/* ============================================================
   Cannyboy — modern coral panel theme (v7)
   Cohesive with the bespoke dashboard: light-grey canvas, clean
   white sidebar with organised, animated nav sections, rounded
   cards/tables with soft shadows + row entrance animation, coral
   accent. Light + dark. Plain CSS injected on every panel page.
   ============================================================ */

:root {
    --cb-coral:        #f4554a;
    --cb-coral2:       #ff8466;
    --cb-coral-600:    #e23b30;
    --cb-coral-soft:   rgba(244, 85, 74, .10);
    --cb-coral-soft2:  rgba(244, 85, 74, .16);
    --cb-canvas:       #e9ecf1;
    --cb-chrome:       #ffffff;
    --cb-surface:      #ffffff;
    --cb-surface-2:    #f6f7fa;
    --cb-border:       #eceef3;
    --cb-text-soft:    #8a909c;
    --cb-radius:       1.5rem;
    --cb-radius-sm:    .9rem;
    --cb-shadow:       0 10px 30px rgba(15, 23, 42, .07), 0 2px 6px rgba(15, 23, 42, .04);
    --cb-shadow-sm:    0 2px 10px rgba(15, 23, 42, .05);
}

html.dark {
    --cb-coral-soft:   rgba(244, 85, 74, .16);
    --cb-coral-soft2:  rgba(244, 85, 74, .24);
    --cb-canvas:       #0a111f;
    --cb-chrome:       #111a2c;
    --cb-surface:      #111a2c;
    --cb-surface-2:    #18233a;
    --cb-border:       #243149;
    --cb-text-soft:    #8b97ac;
    --cb-shadow:       0 12px 34px rgba(0, 0, 0, .40);
    --cb-shadow-sm:    0 2px 12px rgba(0, 0, 0, .30);
}

/* ---------- entrance keyframes (shared) ---------- */
@keyframes cbNavIn  { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes cbRowIn  { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: none; } }
@keyframes cbFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- page canvas ---------- */
body.fi-body { background-color: var(--cb-canvas) !important; }
body.fi-body .fi-main-ctn,
body.fi-body .fi-main,
body.fi-body .fi-page { background: transparent !important; }
@media (min-width: 1024px) {
    body.fi-body .fi-main { padding: 1.75rem 2rem !important; }
}

/* ============================================================
   SIDEBAR — clean white panel, NO top gap, organised sections
   ============================================================ */
body.fi-body .fi-sidebar,
body.fi-body .fi-sidebar-header,
body.fi-body .fi-sidebar-nav {
    background-color: var(--cb-chrome) !important;
    border-color: transparent !important;
}
@media (min-width: 1024px) {
    body.fi-body .fi-sidebar {
        inset-block: 0 !important;            /* flush to top — removes the messy gap */
        height: 100dvh !important;
        border: 0 !important;
        border-start-end-radius: 0 !important;
        border-end-end-radius: 0 !important;
        box-shadow: 8px 0 30px rgba(15, 23, 42, .05) !important; /* soft right-edge shadow */
    }
    /* RTL: shadow falls on the inner (start) edge */
    body.fi-body[dir="rtl"] .fi-sidebar { box-shadow: -8px 0 30px rgba(15, 23, 42, .05) !important; }
}

/* brand header — tidy, with a hairline under it */
body.fi-body .fi-sidebar-header {
    box-shadow: none !important;
    border-bottom: 1px solid var(--cb-border) !important;
    height: auto !important;
    padding-block: 1.05rem !important;
}
body.fi-body .fi-sidebar-nav { padding: .6rem .7rem 1.25rem !important; gap: .15rem; }

/* section separation: divider + styled label */
body.fi-body .fi-sidebar-group + .fi-sidebar-group {
    margin-top: .55rem;
    padding-top: .55rem;
    border-top: 1px solid var(--cb-border);
}
body.fi-body .fi-sidebar-group-label {
    color: var(--cb-text-soft) !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em;
    padding-inline-start: .55rem;
    margin-bottom: .15rem;
    display: flex; align-items: center; gap: .45rem;
}
/* little coral tick before each section title */
body.fi-body .fi-sidebar-group-label::before {
    content: ""; width: .35rem; height: .35rem; border-radius: 50%;
    background: var(--cb-coral); flex: none; opacity: .85;
}

/* nav items: roomy rounded rows + staggered entrance */
body.fi-body .fi-sidebar-item-button {
    border-radius: var(--cb-radius-sm) !important;
    padding-block: .58rem !important;
    gap: .7rem;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
body.fi-body .fi-sidebar-item-button:hover { transform: translateX(-2px); }
body.fi-body[dir="rtl"] .fi-sidebar-item-button:hover { transform: translateX(2px); }
body.fi-body .fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-button:hover {
    background-color: var(--cb-coral-soft) !important;
}
/* active item: filled coral pill */
body.fi-body .fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: var(--cb-coral) !important;
    box-shadow: 0 6px 16px rgba(244, 85, 74, .35);
}
body.fi-body .fi-sidebar-item-active .fi-sidebar-item-button .fi-sidebar-item-label,
body.fi-body .fi-sidebar-item-active .fi-sidebar-item-button .fi-sidebar-item-icon {
    color: #ffffff !important;
}
/* nav count badges → coral pills */
body.fi-body .fi-sidebar-item-button .fi-badge { background-color: var(--cb-coral-soft2) !important; color: var(--cb-coral-600) !important; }
body.fi-body .fi-sidebar-item-active .fi-sidebar-item-button .fi-badge { background-color: rgba(255,255,255,.25) !important; color: #fff !important; }

/* staggered entrance for the first rows on each section */
body.fi-body .fi-sidebar-item { animation: cbNavIn .45s cubic-bezier(.22,1,.36,1) backwards; }
body.fi-body .fi-sidebar-group-items .fi-sidebar-item:nth-child(1){ animation-delay: .04s; }
body.fi-body .fi-sidebar-group-items .fi-sidebar-item:nth-child(2){ animation-delay: .08s; }
body.fi-body .fi-sidebar-group-items .fi-sidebar-item:nth-child(3){ animation-delay: .12s; }
body.fi-body .fi-sidebar-group-items .fi-sidebar-item:nth-child(4){ animation-delay: .16s; }
body.fi-body .fi-sidebar-group-items .fi-sidebar-item:nth-child(5){ animation-delay: .20s; }
body.fi-body .fi-sidebar-group-items .fi-sidebar-item:nth-child(n+6){ animation-delay: .24s; }

/* ---------- topbar: clean & airy ---------- */
body.fi-body .fi-topbar > nav,
body.fi-body .fi-topbar { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; }
body.fi-body .fi-topbar .fi-input-wrp {
    border-radius: 999px !important; background-color: var(--cb-surface) !important;
    box-shadow: var(--cb-shadow-sm) !important; border-color: var(--cb-border) !important;
}

/* ============================================================
   CARDS / SECTIONS / WIDGETS / TABLES
   ============================================================ */
body.fi-body .fi-section,
body.fi-body .fi-wi-stats-overview-stat,
body.fi-body .fi-modal-window,
body.fi-body .fi-dropdown-panel,
body.fi-body .fi-ta-ctn,
body.fi-body .fi-fo-tabs,
body.fi-body .fi-wi-chart {
    background-color: var(--cb-surface) !important;
    border: 1px solid var(--cb-border) !important;
    border-radius: var(--cb-radius) !important;
    box-shadow: var(--cb-shadow) !important;
}
/* gentle fade-up when a section mounts. Table containers intentionally do not
   animate: Livewire replaces them after filtering, and a transformed table can
   temporarily paint above an open filter panel. */
body.fi-body .fi-section { animation: cbFadeUp .5s cubic-bezier(.22,1,.36,1) both; }

/* avoid a doubled frame when a table sits inside a section */
body.fi-body .fi-section .fi-ta-ctn { border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; animation: none; }

/* stat cards */
body.fi-body .fi-wi { gap: 1.25rem !important; }
body.fi-body .fi-wi-stats-overview-stat { padding: 1.3rem 1.4rem !important; }
body.fi-body .fi-wi-stats-overview-stat-value { font-weight: 800 !important; font-size: 2rem !important; line-height: 1.1 !important; letter-spacing: -.02em; }
body.fi-body .fi-wi-stats-overview-stat-label { color: var(--cb-text-soft) !important; font-weight: 600; }

/* ---------- TABLE polish + animated rows ---------- */
body.fi-body .fi-ta-header-ctn,
body.fi-body .fi-ta-header-toolbar { background-color: transparent !important; }
body.fi-body .fi-ta-header-cell { color: var(--cb-text-soft) !important; font-weight: 700 !important; font-size: .76rem; letter-spacing: .02em; }
body.fi-body .fi-ta-row { transition: background-color .15s ease; }
body.fi-body .fi-ta-row:hover { background-color: var(--cb-coral-soft) !important; }
/* subtle staggered row reveal */
body.fi-body .fi-ta-table tbody .fi-ta-row { animation: cbRowIn .4s ease both; }
body.fi-body .fi-ta-table tbody .fi-ta-row:nth-child(1){ animation-delay:.02s; }
body.fi-body .fi-ta-table tbody .fi-ta-row:nth-child(2){ animation-delay:.05s; }
body.fi-body .fi-ta-table tbody .fi-ta-row:nth-child(3){ animation-delay:.08s; }
body.fi-body .fi-ta-table tbody .fi-ta-row:nth-child(4){ animation-delay:.11s; }
body.fi-body .fi-ta-table tbody .fi-ta-row:nth-child(5){ animation-delay:.14s; }
body.fi-body .fi-ta-table tbody .fi-ta-row:nth-child(6){ animation-delay:.17s; }
body.fi-body .fi-ta-table tbody .fi-ta-row:nth-child(n+7){ animation-delay:.2s; }

/* Keep legacy dropdown-style table filters above table content. The Works
   resource now uses an inline collapsible filter area, so it cannot overlap. */
body.fi-body .fi-ta-filters-dropdown .fi-dropdown-panel {
    z-index: 1000 !important;
}

/* badges → soft rounded pills */
body.fi-body .fi-badge { border-radius: 999px !important; font-weight: 700; }

/* tabs (the branch/production list tabs) → pill style */
body.fi-body .fi-tabs { background: var(--cb-surface-2) !important; border-radius: 999px !important; padding: .25rem !important; gap: .2rem; box-shadow: none !important; border: 0 !important; }
body.fi-body .fi-tabs-item { border-radius: 999px !important; font-weight: 700; }
body.fi-body .fi-tabs-item-active { background: var(--cb-coral) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(244,85,74,.3); }
body.fi-body .fi-tabs-item-active .fi-tabs-item-label { color: #fff !important; }

/* ---------- inputs / buttons ---------- */
body.fi-body .fi-input-wrp { border-color: var(--cb-border) !important; border-radius: .85rem !important; }
body.fi-body .fi-input-wrp:focus-within { border-color: var(--cb-coral) !important; box-shadow: 0 0 0 3px var(--cb-coral-soft2) !important; }
body.fi-body .fi-btn { border-radius: .85rem !important; font-weight: 700; }
body.fi-body .fi-header-heading { letter-spacing: -.02em; font-weight: 800; }

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 1023px) {
    body.fi-body .fi-sidebar { border-radius: 0 !important; box-shadow: none !important; inset-block: 0 !important; height: 100dvh !important; }
}
@media (max-width: 768px) {
    html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body.fi-body .fi-ta-ctn, body.fi-body .fi-ta { -webkit-overflow-scrolling: touch; }
    body.fi-body .fi-main { padding: 1rem !important; }
    body.fi-body .fi-section-content, body.fi-body .fi-page > .fi-page-header { padding-inline: .75rem; }
    body.fi-body .fi-ta-actions .fi-icon-btn, body.fi-body .fi-ac-action { min-height: 2.25rem; }
    body.fi-body .fi-wi-stats-overview-stat-value { font-size: 1.6rem !important; }
}

/* ============================================================
   DROPDOWN CLIPPING FIX (v8)
   Select / DatePicker overlays were cut off at the edge of the
   themed rounded section, tab or modal. The rounded containers
   clip their children; relax overflow on the field-HOLDING
   wrappers so an opened dropdown/calendar can spill past them.
   Scroll containers that legitimately need to clip (tables via
   .fi-ta, the modal overlay .fi-modal itself) are left untouched.
   ============================================================ */
body.fi-body .fi-section,
body.fi-body .fi-section-content-ctn,
body.fi-body .fi-section-content,
body.fi-body .fi-fo-component-ctn,
body.fi-body .fi-fo-fieldset,
body.fi-body .fi-fo-fieldset > div,
body.fi-body .fi-fo-tabs,
body.fi-body .fi-fo-tabs-content,
body.fi-body .fi-modal-window {
    overflow: visible !important;
}

/* Jalali date/time calendar as a CENTERED POPUP.
   The calendar is anchored inside a form section and kept getting clipped /
   painted under the following section. Rather than fight the per-section
   stacking, pin the panel to the viewport centre as a floating popup with a
   dim backdrop — always fully visible and clickable, on every screen size.
   CSS-only: the picker's own JS still toggles display (open/close) and handles
   outside-click + date selection, so no Alpine/markup change is needed. */
body.fi-body .fi-fo-date-time-picker-panel {
    position: fixed !important;
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2147483000 !important;
    max-width: 92vw !important;
    max-height: 88vh !important;
    overflow: auto !important;
}
/* full-screen dim backdrop behind the centred popup. pointer-events:none so a
   click on the dim area passes through and the picker's own outside-click
   handler still closes it. */
body.fi-body .fi-fo-date-time-picker-panel::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, .45);
    z-index: -1;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    body.fi-body .fi-sidebar-item,
    body.fi-body .fi-section,
    body.fi-body .fi-ta-table tbody .fi-ta-row {
        animation: none !important;
    }
}