/* =========================================================================
   Suitiee — Filament panel theme (shared across admin / provider / partner /
   client / staff). Loaded as a static stylesheet via the STYLES_AFTER render
   hook so it layers on top of Filament's compiled CSS without a per-panel
   Vite build. Saudi-premium "Soft UI Evolution": warm ivory canvas, emerald
   brand, gold hairline accents, soft layered shadows, rounded cards.
   Dark mode is left to Filament defaults — light-mode rules are scoped with
   :where(html:not(.dark)) so toggling dark stays clean.
   ========================================================================= */

:root {
    --tv-ivory:        #FAF7F0;
    --tv-paper:        #FFFFFF;
    --tv-emerald:      #C2703D;
    --tv-emerald-deep: #B05F33;
    --tv-emerald-ink:  #2B1D14;
    --tv-lime:         #E0A33D;
    --tv-gold:         #C9A227;
    --tv-emerald-wash: rgba(194,112,61, 0.08);
    --tv-emerald-line: rgba(194,112,61, 0.16);
    --tv-hairline:     rgba(11, 42, 34, 0.08);
    --tv-shadow-sm:    0 1px 2px rgba(11, 42, 34, 0.05);
    --tv-shadow-md:    0 1px 2px rgba(11, 42, 34, 0.04), 0 10px 28px -12px rgba(11, 42, 34, 0.16);
    --tv-shadow-lg:    0 2px 6px rgba(11, 42, 34, 0.05), 0 24px 48px -20px rgba(11, 42, 34, 0.22);
    --tv-radius:       1rem;
    --tv-font:         'Thmanyah Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- Typography ---------------------------------------------------------- */
.fi-body,
.fi-simple-layout {
    font-family: var(--tv-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.fi-header-heading,
.fi-section-header-heading,
.fi-simple-header-heading,
.fi-wi-stats-overview-stat-value {
    font-family: var(--tv-font);
    letter-spacing: -0.012em;
    font-weight: 800;
}

/* ---- Canvas (ivory + faint Saudi girih watermark) ----------------------- */
:where(html:not(.dark)) .fi-body {
    background-color: var(--tv-ivory);
    background-image: url('/brand/pattern-girih-faint.svg');
    background-size: 64px;
    background-attachment: fixed;
}
:where(html:not(.dark)) .fi-main-ctn { background-color: transparent; }

/* ---- Sidebar ------------------------------------------------------------- */
:where(html:not(.dark)) .fi-sidebar {
    background-color: var(--tv-paper);
    border-inline-end: 1px solid var(--tv-hairline);
}
.fi-sidebar-item-btn {
    border-radius: 0.7rem;
    font-weight: 600;
    transition: background-color .18s ease, color .18s ease;
}
:where(html:not(.dark)) .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover {
    background-color: var(--tv-emerald-wash);
}
/* Active item: emerald wash pill + a crisp gold leading accent bar */
:where(html:not(.dark)) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--tv-emerald-wash);
    box-shadow: inset 3px 0 0 var(--tv-gold);
    color: var(--tv-emerald-deep);
}
:where(html:not(.dark)) .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--tv-emerald-deep);
}
/* Group labels: smaller, tracked-out, brand-tinted */
.fi-sidebar-group-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.72;
}

/* ---- Topbar -------------------------------------------------------------- */
:where(html:not(.dark)) .fi-topbar > nav,
:where(html:not(.dark)) .fi-topbar {
    background-color: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--tv-hairline);
}

/* ---- Sections / cards ---------------------------------------------------- */
:where(html:not(.dark)) .fi-section {
    border-radius: var(--tv-radius);
    border: 1px solid var(--tv-hairline);
    box-shadow: var(--tv-shadow-md);
    background-color: var(--tv-paper);
}
.fi-section-header { padding-block: 1.1rem; }

/* ---- Stat / overview widgets -------------------------------------------- */
.fi-wi-stats-overview-stat { overflow: hidden; padding: 1.6rem 1.75rem; }
/* breathing room for stat internals so values never hug the border */
.fi-wi-stats-overview-stat-content { gap: 0.4rem; }
.fi-wi-stats-overview-stat-value { line-height: 1.15; }
/* The stat grid renders inside a bordered section whose content container has
   no padding, so the cards hug the section border. Pad that container (scoped to
   stat sections only, so form/table sections are untouched) for breathing room. */
.fi-section:has(.fi-wi-stats-overview-stat) .fi-section-content-ctn { padding: 1.5rem; }
:where(html:not(.dark)) .fi-wi-stats-overview-stat {
    border-radius: var(--tv-radius);
    border: 1px solid var(--tv-hairline);
    box-shadow: var(--tv-shadow-md);
    background:
        radial-gradient(120% 120% at 100% 0%, var(--tv-emerald-wash), transparent 60%),
        var(--tv-paper);
    transition: transform .18s ease, box-shadow .18s ease;
}
:where(html:not(.dark)) .fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--tv-shadow-lg);
}
.fi-wi-stats-overview-stat-value { font-size: 1.9rem; line-height: 1.1; }
.fi-wi-stats-overview-stat-label { font-weight: 600; }

/* ---- Buttons ------------------------------------------------------------- */
.fi-btn {
    border-radius: 0.65rem;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.fi-btn:active { transform: translateY(1px); }
/* Solid brand buttons get a touch of depth + a subtle vertical sheen */
.fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link),
.fi-btn.fi-color-success:not(.fi-btn-outlined):not(.fi-link) {
    box-shadow: 0 1px 1px rgba(11, 42, 34, 0.18), 0 6px 16px -8px rgba(194,112,61, 0.7);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.04));
}
.fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link):hover,
.fi-btn.fi-color-success:not(.fi-btn-outlined):not(.fi-link):hover {
    filter: brightness(1.04);
    box-shadow: 0 2px 2px rgba(11, 42, 34, 0.2), 0 10px 22px -8px rgba(194,112,61, 0.85);
}

/* ---- Tables -------------------------------------------------------------- */
:where(html:not(.dark)) .fi-ta {
    border-radius: var(--tv-radius);
    border: 1px solid var(--tv-hairline);
    box-shadow: var(--tv-shadow-md);
    overflow: hidden;
}
:where(html:not(.dark)) .fi-ta-header-cell {
    background-color: #FBFAF6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
}
:where(html:not(.dark)) .fi-ta-row { transition: background-color .14s ease; }
:where(html:not(.dark)) .fi-ta-row:hover { background-color: var(--tv-emerald-wash); }

/* ---- Inputs -------------------------------------------------------------- */
.fi-input-wrp { border-radius: 0.65rem; }
.fi-fo-field-wrp .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px var(--tv-emerald-line);
    border-color: var(--tv-emerald);
}

/* ---- Dropdowns / modals -------------------------------------------------- */
.fi-dropdown-panel { border-radius: 0.9rem; box-shadow: var(--tv-shadow-lg); }
.fi-modal-window  { border-radius: 1.1rem; box-shadow: var(--tv-shadow-lg); }

/* ---- Empty states: clean brand-tinted icon (no injected illustration) ---- */
.fi-empty-state-icon-bg {
    background-color: var(--tv-emerald-wash);
    color: var(--tv-emerald-deep);
}
.dark .fi-empty-state-icon-bg {
    background-color: rgba(194,112,61, 0.16);
    color: #DBA07C;
}

/* ---- Branded login (simple layout, all panels) -------------------------- */
:where(html:not(.dark)) .fi-simple-layout {
    background-color: var(--tv-ivory);
    background-image:
        radial-gradient(60% 45% at 70% 0%, var(--tv-emerald-wash), transparent 70%),
        url('/brand/panel/login-aside.jpg');
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: cover, cover;
}
:where(html:not(.dark)) .fi-simple-main {
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(1.2) blur(10px);
    border: 1px solid var(--tv-hairline);
    border-top: 3px solid var(--tv-gold);
    border-radius: 1.25rem;
    box-shadow: var(--tv-shadow-lg);
}

/* ========================================================================
   Dark mode — Suitiee warm-ink theme (tints Filament's neutral dark toward
   the brand: deep espresso canvas, hairline borders, terracotta accents).
   ======================================================================== */
.dark {
    --tv-d-canvas: #17120D;   /* refined charcoal with a whisper of warmth (not loud) */
    --tv-d-surface: #201913;  /* neutral-leaning dark charcoal */
    --tv-d-raise:  #2B2219;   /* header band, clearly lighter */
    --tv-d-line:   #3A2E24;   /* visible neutral hairline (~3:1 vs surface) */
    --tv-d-emerald: #CD8253;
    --tv-d-mint:   #DBA07C;
    --tv-d-text:   #F1EAE1;   /* near-white body text */
    --tv-d-muted:  #B3A697;   /* neutral-grey muted text (AA on surface) */
}
/* Base + muted text contrast (Filament defaults are too dim on emerald-ink) */
.dark, .dark .fi-body { color: var(--tv-d-text); }
.dark .fi-section-description,
.dark .fi-fo-field-wrp-hint,
.dark .fi-fo-field-wrp-helper-text,
.dark [class*="text-gray-5"],
.dark [class*="text-gray-6"] { color: var(--tv-d-muted) !important; }

/* Canvas: emerald girih watermark — visible on dark (the gold one disappeared) */
.dark .fi-body {
    background-color: var(--tv-d-canvas);
    background-image: url('/brand/pattern-girih-emerald.svg');
    background-size: 60px;
    background-attachment: fixed;
    background-blend-mode: normal;
}

/* Sidebar */
.dark .fi-sidebar { background-color: var(--tv-d-surface); border-inline-end: 1px solid var(--tv-d-line); }
.dark .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover { background-color: rgba(205, 130, 83, 0.07); }
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgba(205, 130, 83, 0.10);
    box-shadow: inset 3px 0 0 var(--tv-gold);
    color: var(--tv-d-mint);
}
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--tv-d-mint); }
.dark .fi-sidebar-group-label { color: var(--tv-d-muted); opacity: 0.9; }

/* Topbar: frosted + readable controls (fixes the faint locale toggle) */
.dark .fi-topbar > nav,
.dark .fi-topbar {
    background-color: rgba(23, 18, 13, 0.82);
    border-bottom: 1px solid var(--tv-d-line);
    backdrop-filter: saturate(1.15) blur(10px);
}
.dark .fi-topbar a,
.dark .fi-topbar .fi-icon-btn,
.dark .fi-topbar .fi-dropdown-trigger { color: var(--tv-d-text); }

/* Sections / cards: clean charcoal surface (texture lives on the canvas) */
.dark .fi-section {
    background-color: var(--tv-d-surface);
    border: 1px solid var(--tv-d-line);
    box-shadow: none;
}

/* Stat / overview widgets: depth on dark, restrained emerald wash */
.dark .fi-wi-stats-overview-stat {
    border: 1px solid var(--tv-d-line);
    background:
        radial-gradient(130% 130% at 100% 0%, rgba(194, 112, 61, 0.05), transparent 62%),
        var(--tv-d-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 10px 26px -14px rgba(0, 0, 0, 0.5);
}
.dark .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32), 0 16px 36px -16px rgba(194, 112, 61, 0.22);
}

/* Tables: ONE rounded bordered card (the inner container's default slate bg +
   rectangular border are the "blue box" + "double border"), uniform header band */
.dark .fi-ta { border: 1px solid var(--tv-d-line); border-radius: var(--tv-radius); overflow: hidden; box-shadow: none; }
.dark .fi-ta-ctn { background-color: var(--tv-d-surface); border-color: transparent; box-shadow: none; }
.dark .fi-ta-header { background-color: var(--tv-d-raise); }
.dark .fi-ta-header-cell { background-color: var(--tv-d-raise); color: var(--tv-d-text); }
.dark .fi-ta-row:hover { background-color: rgba(205, 130, 83, 0.06); }

/* Inputs */
.dark .fi-input-wrp { border-color: var(--tv-d-line); }
.dark input::placeholder, .dark textarea::placeholder { color: var(--tv-d-muted); opacity: 1; }
.dark .fi-fo-field-wrp .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px rgba(194, 112, 61, 0.28);
    border-color: var(--tv-d-mint);
}

/* Solid brand buttons: dark-appropriate sheen + shadow (no light-mode leak) */
.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link),
.dark .fi-btn.fi-color-success:not(.fi-btn-outlined):not(.fi-link) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.14));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32), 0 6px 16px -8px rgba(194, 112, 61, 0.45);
}

/* Floating surfaces: emerald-ink (not default slate) + real shadows on dark */
.dark .fi-dropdown-panel,
.dark .fi-modal-window {
    background-color: var(--tv-d-surface);
    border: 1px solid var(--tv-d-line);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 48px -20px rgba(0, 0, 0, 0.7);
}

/* Branded login on dark: frosted glass + texture */
.dark .fi-simple-layout {
    background-color: var(--tv-d-canvas);
    background-image:
        radial-gradient(60% 45% at 70% 0%, rgba(194, 112, 61, 0.16), transparent 70%),
        url('/brand/pattern-girih-emerald.svg');
    background-size: cover, 60px;
    background-attachment: scroll, fixed;
}
.dark .fi-simple-main {
    background-color: rgba(32, 25, 19, 0.9);
    backdrop-filter: saturate(1.12) blur(12px);
    border: 1px solid var(--tv-d-line);
    border-top: 3px solid var(--tv-gold);
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.7);
}

/* ---- Shared form divider (theme-aware) ---------------------------------- */
.tv-form-divider { border-top: 1px solid var(--tv-hairline); }
.dark .tv-form-divider { border-top-color: var(--tv-d-line); }

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .fi-btn, .fi-sidebar-item-btn, .fi-ta-row, .fi-wi-stats-overview-stat {
        transition: none !important;
    }
    .fi-wi-stats-overview-stat:hover { transform: none; }
}

/* ---- Arabic / RTL ---------------------------------------------------------
   Letter-spacing visually breaks Arabic cursive joining; zero all tracking
   when the panel renders RTL. */
[dir='rtl'] *,
[dir='rtl'] *::before,
[dir='rtl'] *::after {
    letter-spacing: 0 !important;
}