/* Orodha "Joyful" theme. Loaded only when selected; every rule is scoped to html[data-theme="joyful"].
   Palette: slate #373F51, blue #0095E2, blush #DFBBB1, coral #F56476, rose #E43F6F. Mostly slate, blush and white, with coral/rose as
   the one accent and blue for information only. Change the variables below to retune the whole theme. Appearance only. */
html[data-theme="joyful"] {
    --jx-slate: #373f51; --jx-slate-deep: #2b3142;
    --jx-blue: #0095e2;
    --jx-blush: #dfbbb1; --jx-paper: #fbf5f3;
    --jx-coral: #f56476; --jx-rose: #e43f6f;
    --jx-radius: 1rem;
    --jx-accent: linear-gradient(135deg, var(--jx-coral), var(--jx-rose));
}

/* Page: soft blush paper */
html[data-theme="joyful"] body { background: radial-gradient(900px 480px at 100% -10%, rgb(245 100 118 / .12), transparent 60%), var(--jx-paper); }
html[data-theme="joyful"].dark body { background: radial-gradient(900px 480px at 100% -10%, rgb(228 63 111 / .14), transparent 60%), #1d212d; }
html[data-theme="joyful"] .fi-body, html[data-theme="joyful"] .fi-layout { background: transparent; }

/* Cards: white, rounded, a thin coral edge on top. Plain (not-contained) sections such as a widget group heading stay untouched,
   and a card inside a card does not get a second edge. */
html[data-theme="joyful"] .fi-section:not(.fi-section-not-contained), html[data-theme="joyful"] .fi-ta-ctn, html[data-theme="joyful"] .fi-wi-stats-overview-stat, html[data-theme="joyful"] .fi-wi-chart {
    position: relative; overflow: hidden; border-radius: var(--jx-radius); border: 1px solid rgb(223 187 177 / .55);
    box-shadow: 0 8px 22px -14px rgb(55 63 81 / .45); transition: transform .18s ease, box-shadow .18s ease; }
html[data-theme="joyful"] .fi-section:not(.fi-section-not-contained)::before, html[data-theme="joyful"] .fi-ta-ctn::before, html[data-theme="joyful"] .fi-wi-stats-overview-stat::before, html[data-theme="joyful"] .fi-wi-chart::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--jx-accent); }
html[data-theme="joyful"] .fi-section .fi-section:not(.fi-section-not-contained)::before, html[data-theme="joyful"] .fi-section .fi-ta-ctn::before { display: none; }
html[data-theme="joyful"] .fi-section-not-contained { border: 0; box-shadow: none; background: transparent; overflow: visible; }
html[data-theme="joyful"] .fi-section-not-contained > .fi-section-header { padding-inline: 0; }
html[data-theme="joyful"] .fi-wi-stats-overview-stat:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgb(228 63 111 / .4); }
html[data-theme="joyful"] .fi-section-header-heading, html[data-theme="joyful"] .fi-header-heading { font-weight: 800; color: var(--jx-slate); }
html[data-theme="joyful"].dark .fi-section-header-heading, html[data-theme="joyful"].dark .fi-header-heading { color: #fff; }

/* Buttons: pill shaped; primary is the coral-to-rose accent, everything else stays calm */
html[data-theme="joyful"] .fi-btn { border-radius: 9999px; font-weight: 700; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
html[data-theme="joyful"] .fi-btn:hover { transform: translateY(-1px); }
html[data-theme="joyful"] .fi-btn:active { transform: translateY(1px) scale(.97); }
html[data-theme="joyful"] .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-btn-color-gray) { background-image: var(--jx-accent); color: #fff; border: 0; box-shadow: 0 8px 18px -8px rgb(228 63 111 / .7); }
html[data-theme="joyful"] .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-btn-color-gray):hover { filter: brightness(1.06); }
html[data-theme="joyful"] .fi-btn.fi-color-info:not(.fi-outlined) { background: var(--jx-blue); color: #fff; border: 0; }

/* Navigation: slate sidebar, the active item in the accent */
html[data-theme="joyful"] .fi-sidebar { background: var(--jx-slate); border-inline-end: 0; }
html[data-theme="joyful"] .fi-sidebar-header, html[data-theme="joyful"] .fi-sidebar-nav { background: transparent; }
html[data-theme="joyful"] .fi-sidebar .fi-sidebar-item-label, html[data-theme="joyful"] .fi-sidebar .fi-tenant-menu-trigger, html[data-theme="joyful"] .fi-sidebar .fi-tenant-menu-trigger-tenant-name,
html[data-theme="joyful"] .fi-sidebar .fi-tenant-menu-trigger svg, html[data-theme="joyful"] .fi-sidebar .fi-sidebar-group-collapse-button { color: rgb(255 255 255 / .92); }
html[data-theme="joyful"] .fi-sidebar .fi-sidebar-group-label { color: var(--jx-blush); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
html[data-theme="joyful"] .fi-sidebar-nav .fi-sidebar-item-icon, html[data-theme="joyful"] .fi-sidebar-nav svg { color: rgb(255 255 255 / .75); }
html[data-theme="joyful"] .fi-sidebar .fi-tenant-menu-trigger { border-radius: .85rem; }
html[data-theme="joyful"] .fi-sidebar .fi-tenant-menu-trigger:hover, html[data-theme="joyful"] .fi-sidebar .fi-tenant-menu-trigger:focus-visible,
html[data-theme="joyful"] .fi-sidebar .fi-tenant-menu-trigger[aria-expanded="true"] { background: rgb(255 255 255 / .12); }
html[data-theme="joyful"] .fi-sidebar-item-btn { border-radius: .8rem; transition: background .15s ease, transform .15s ease; }
html[data-theme="joyful"] .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover { background-color: rgb(255 255 255 / .08); }
html[data-theme="joyful"] .fi-sidebar-item-btn:hover { transform: translateX(2px); }
html[data-theme="joyful"] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-image: var(--jx-accent); box-shadow: 0 8px 16px -8px rgb(0 0 0 / .5); }
html[data-theme="joyful"] .fi-sidebar-item.fi-active .fi-sidebar-item-label, html[data-theme="joyful"] .fi-sidebar-item.fi-active .fi-sidebar-item-icon, html[data-theme="joyful"] .fi-sidebar-item.fi-active svg { color: #fff; }
html[data-theme="joyful"] .fi-topbar { backdrop-filter: blur(10px); background: rgb(255 255 255 / .85); border-bottom: 1px solid rgb(223 187 177 / .6); }
html[data-theme="joyful"].dark .fi-topbar { background: rgb(29 33 45 / .85); }

/* ---- LIGHT-MODE SIDEBAR (added v0.10.1): a light sidebar so the company dropdown, header and scrollbar match the page.
   Dark mode keeps the slate sidebar above. To revert: delete this block, or restore docs/theme-backups/orodha-joyful.before-light-sidebar.css ---- */
html[data-theme="joyful"]:not(.dark) .fi-sidebar { background: #fff; border-inline-end: 1px solid rgb(223 187 177 / .6); }
html[data-theme="joyful"]:not(.dark) .fi-sidebar .fi-sidebar-item-label, html[data-theme="joyful"]:not(.dark) .fi-sidebar .fi-tenant-menu-trigger,
html[data-theme="joyful"]:not(.dark) .fi-sidebar .fi-tenant-menu-trigger-tenant-name, html[data-theme="joyful"]:not(.dark) .fi-sidebar .fi-tenant-menu-trigger svg,
html[data-theme="joyful"]:not(.dark) .fi-sidebar .fi-sidebar-group-collapse-button { color: var(--jx-slate); }
html[data-theme="joyful"]:not(.dark) .fi-sidebar .fi-sidebar-group-label { color: var(--jx-rose); }
html[data-theme="joyful"]:not(.dark) .fi-sidebar-nav .fi-sidebar-item-icon, html[data-theme="joyful"]:not(.dark) .fi-sidebar-nav svg { color: rgb(55 63 81 / .65); }
html[data-theme="joyful"]:not(.dark) .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover { background-color: rgb(245 100 118 / .08); }
html[data-theme="joyful"]:not(.dark) .fi-sidebar .fi-tenant-menu-trigger:hover, html[data-theme="joyful"]:not(.dark) .fi-sidebar .fi-tenant-menu-trigger:focus-visible,
html[data-theme="joyful"]:not(.dark) .fi-sidebar .fi-tenant-menu-trigger[aria-expanded="true"] { background: rgb(223 187 177 / .3); }
html[data-theme="joyful"]:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-label, html[data-theme="joyful"]:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
html[data-theme="joyful"]:not(.dark) .fi-sidebar-item.fi-active svg { color: #fff; }
html[data-theme="joyful"]:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { box-shadow: 0 8px 16px -8px rgb(228 63 111 / .55); }
/* ---- end light-mode sidebar ---- */

/* Dropdown panels opened from the sidebar (company menu) stay light with dark text */
html[data-theme="joyful"] .fi-dropdown-panel { border-radius: .9rem; box-shadow: 0 16px 36px -12px rgb(55 63 81 / .5); }
html[data-theme="joyful"] .fi-sidebar .fi-dropdown-panel, html[data-theme="joyful"] .fi-sidebar .fi-dropdown-panel * { color: var(--jx-slate); }
html[data-theme="joyful"].dark .fi-sidebar .fi-dropdown-panel, html[data-theme="joyful"].dark .fi-sidebar .fi-dropdown-panel * { color: #fff; }
html[data-theme="joyful"] .fi-dropdown-list-item:hover { background: rgb(245 100 118 / .1); }

/* Badges, inputs, tables */
html[data-theme="joyful"] .fi-badge { border-radius: 9999px; font-weight: 700; }
html[data-theme="joyful"] .fi-input-wrp { border-radius: .85rem; transition: box-shadow .15s ease; }
html[data-theme="joyful"] .fi-input-wrp:focus-within { box-shadow: 0 0 0 4px rgb(245 100 118 / .2); }
html[data-theme="joyful"] .fi-ta-header-cell { background: rgb(223 187 177 / .25); }
html[data-theme="joyful"] .fi-ta-row { transition: background .12s ease; }
html[data-theme="joyful"] .fi-ta-row:hover { background: rgb(245 100 118 / .06); }

/* Entrance animation */
@keyframes jx-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html[data-theme="joyful"] .fi-main > * { animation: jx-rise .26s ease backwards; } /* not "both"/"forwards": a held transform makes this the containing block of position:fixed modals */

/* Loader: coral-to-rose bar */
html[data-theme="joyful"] .orodha-loader { height: 4px; }
html[data-theme="joyful"] .orodha-loader::before { background: linear-gradient(90deg, var(--jx-coral), var(--jx-rose)); }

/* Table shimmer while Livewire reloads */
html[data-theme="joyful"] .fi-ta-content[wire\:loading], html[data-theme="joyful"] .fi-ta-ctn [wire\:loading] { background: linear-gradient(90deg, transparent, rgb(223 187 177 / .35), transparent); background-size: 200% 100%; animation: jx-shimmer 1.2s linear infinite; }
@keyframes jx-shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    html[data-theme="joyful"] *, html[data-theme="joyful"] *::before { animation-duration: .001s !important; transition-duration: .001s !important; }
}