/* ============================================================================
   DemoWeb ADMIN — COMPLETE REDESIGN
   Filament v3.3 · Sports Dark Navy + Orange (SBOBET vibe)
   Loaded AFTER the default theme (STYLES_AFTER) → cascades reliably.

   Layers:
     1  Design tokens
     2  Global + login (simple pages)
     3  Sidebar & navigation
     4  Topbar
     5  Dashboard widgets
     6  Tables (all resources)
     7  Forms
     8  Buttons / badges / links
     9  Modals / dropdowns / notifications
    10  Scrollbars / misc
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1 · DESIGN TOKENS
--------------------------------------------------------------------------- */
:root {
    /* Surfaces — deep navy scale */
    --dwb-bg-0:      #eef3ef;   /* page backdrop */
    --dwb-bg-1:      #f4f7f5;   /* body */
    --dwb-surface-1: #ffffff;   /* sidebar / topbar / login card */
    --dwb-surface-2: #ffffff;   /* cards */
    --dwb-surface-3: #f0fdf4;   /* hover / elevated */
    --dwb-surface-4: #dcfce7;   /* active / modal */

    /* Brand */
    --dwb-orange:        #16a34a;
    --dwb-orange-bright: #22c55e;
    --dwb-orange-deep:   #15803d;
    --dwb-grad-orange:   linear-gradient(135deg, #22c55e 0%, #16a34a 55%, #15803d 100%);
    --dwb-grad-surface:  linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #f6faf7 100%);
    --dwb-grad-navbar:   linear-gradient(180deg, #ffffff 0%, #f6faf7 100%);

    /* Text */
    --dwb-text:      #0f172a;
    --dwb-text-dim:  #475569;
    --dwb-text-mute: #64748b;

    /* Lines */
    --dwb-border: rgba(34, 197, 94, 0.55);
    --dwb-border-strong: rgba(22, 163, 74, 0.85);

    /* Glow */
    --dwb-glow-orange: 0 0 0 1px rgba(34, 197, 94, 0.35), 0 8px 24px -6px rgba(34, 197, 94, 0.45);
    --dwb-shadow: 0 1px 2px rgba(22, 163, 74, 0.08), 0 10px 28px -12px rgba(22, 163, 74, 0.18);
}

/* ---------------------------------------------------------------------------
   2 · GLOBAL + LOGIN (simple pages)
--------------------------------------------------------------------------- */
body.fi-body {
    background-color: var(--dwb-bg-1);
    background-image: radial-gradient(1200px 500px at 85% -10%, rgba(34, 197, 94, 0.05), transparent 60%),
                      radial-gradient(900px 420px at -10% 110%, rgba(34, 197, 94, 0.08), transparent 60%);
    color: var(--dwb-text);
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: 0.01em;
}

/* Simple page (login, password reset) — dramatic sports backdrop card */
.fi-simple-layout {
    background:
        radial-gradient(900px 600px at 15% 0%, rgba(34, 197, 94, 0.10), transparent 55%),
        radial-gradient(1000px 700px at 100% 20%, rgba(34, 197, 94, 0.12), transparent 60%),
        linear-gradient(165deg, #ffffff 0%, #f4f7f5 45%, #eef3ef 100%);
}
/* The visible auth card IS .fi-simple-main */
.fi-simple-main {
    background: linear-gradient(180deg, rgba(23, 37, 61, 0.92) 0%, rgba(15, 26, 46, 0.96) 100%) !important;
    border: 1px solid var(--dwb-border-strong);
    border-radius: 20px !important;
    box-shadow: var(--dwb-shadow), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.fi-simple-page {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.fi-simple-header {
    margin-bottom: 1.5rem;
}
.fi-simple-header .fi-logo {
    background: var(--dwb-grad-navbar);
    border: 1px solid var(--dwb-border);
    border-radius: 14px;
    padding: 0.85rem 1.6rem;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #ffffff !important;
    box-shadow: 0 10px 30px -12px rgba(34, 197, 94, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
}
.fi-simple-header .fi-logo::after {
    content: '';
    position: absolute;
    inset: auto -999px 0 -999px;
    height: 2px;
    background: var(--dwb-grad-orange);
    border-radius: 2px 2px 0 0;
    opacity: 0.85;
}
.fi-simple-header-heading {
    color: var(--dwb-text) !important;
    font-weight: 700 !important;
    font-size: 1.6rem;
}
.fi-simple-header-subheading {
    color: var(--dwb-text-dim) !important;
    font-size: 0.92rem;
}

/* Simple page = the actual card (inside .fi-simple-main). Filament wraps the
   content in a card; we restyle it as the headline login card. */
.fi-simple-main > .fi-simple-page {
    background: linear-gradient(180deg, rgba(23, 37, 61, 0.92) 0%, rgba(15, 26, 46, 0.96) 100%);
    border: 1px solid var(--dwb-border-strong);
    border-radius: 20px;
    padding: 1.1rem 1.6rem 1.6rem;
    box-shadow: var(--dwb-shadow), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Auth screenshot: form fields keep strong contrast on the card */
.fi-simple-page .fi-form .fi-input {
    background-color: var(--dwb-bg-0) !important;
}

/* ---------------------------------------------------------------------------
   3 · SIDEBAR & NAVIGATION
--------------------------------------------------------------------------- */
.fi-sidebar {
    background: var(--dwb-grad-navbar) !important;
    border-right: 1px solid var(--dwb-border);
}
.fi-sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid var(--dwb-border);
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
}
.fi-sidebar-header .fi-logo,
.fi-sidebar-header a[href] {
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #ffffff !important;
    text-shadow: 0 1px 8px rgba(34, 197, 94, 0.35);
}

.fi-sidebar-nav .fi-sidebar-group {
    margin-bottom: 0.4rem;
}
.fi-sidebar-group-label,
.fi-sidebar-group-button {
    color: var(--dwb-text-mute) !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
}
.fi-sidebar-group-collapse-button:hover {
    color: var(--dwb-orange-bright) !important;
}

.fi-sidebar-item {
    border-radius: 10px;
    margin-bottom: 2px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.fi-sidebar-item:hover {
    background-color: rgba(255, 255, 255, 0.06);
}
.fi-sidebar-item-label {
    color: var(--dwb-text-dim) !important;
    font-size: 0.86rem !important;
    font-weight: 500;
}
.fi-sidebar-item:hover .fi-sidebar-item-label {
    color: #ffffff !important;
}
.fi-sidebar-item.fi-sidebar-item-active,
.fi-sidebar-item.fi-active {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.28) 0%, rgba(34, 197, 94, 0.10) 100%) !important;
    box-shadow: inset 3px 0 0 var(--dwb-orange), 0 4px 16px -6px rgba(34, 197, 94, 0.5);
}
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #15803d !important;
    font-weight: 600;
}
.fi-sidebar-item.fi-sidebar-item-active .fi-icon,
.fi-sidebar-item.fi-active .fi-icon {
    color: var(--dwb-orange-bright) !important;
}

/* ---------------------------------------------------------------------------
   4 · TOPBAR
--------------------------------------------------------------------------- */
.fi-topbar,
.fi-topbar > nav {
    background: var(--dwb-grad-navbar) !important;
    border-bottom: 1px solid var(--dwb-border);
}
.fi-topbar .fi-icon-btn,
.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn {
    color: var(--dwb-text-dim) !important;
    border-radius: 9px;
}
.fi-topbar .fi-icon-btn:hover {
    color: var(--dwb-orange-bright) !important;
    background: rgba(255, 255, 255, 0.06);
}
.fi-topbar .fi-global-search-field .fi-input {
    background-color: var(--dwb-bg-0) !important;
    border: 1px solid var(--dwb-border);
}
.fi-topbar .fi-global-search-field .fi-input:focus {
    border-color: var(--dwb-orange);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
}

/* ---------------------------------------------------------------------------
   5 · DASHBOARD WIDGETS
--------------------------------------------------------------------------- */
/* Range picker + section shells */
.fi-section {
    background: linear-gradient(180deg, var(--dwb-surface-3) 0%, var(--dwb-surface-2) 100%) !important;
    border: 1px solid var(--dwb-border);
    border-radius: 14px !important;
    box-shadow: var(--dwb-shadow) !important;
}
.fi-section-header {
    border-bottom: 1px solid var(--dwb-border);
}
.fi-section-header-heading {
    font-weight: 700 !important;
    color: var(--dwb-text) !important;
    letter-spacing: 0.01em;
}
.fi-section-header-description {
    color: var(--dwb-text-mute) !important;
}

/* Stats overview cards → KPI dashboard tiles */
.fi-wi-stats-overview {
    gap: 0.9rem;
}
.fi-wi-stats-overview-stat {
    background: linear-gradient(165deg, var(--dwb-surface-3) 0%, var(--dwb-surface-2) 70%) !important;
    border: 1px solid var(--dwb-border);
    border-radius: 14px !important;
    box-shadow: 0 4px 18px -8px rgba(22, 163, 74, 0.18) !important;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
    position: relative;
}
.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--dwb-grad-orange);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    border-color: var(--dwb-border-strong);
    box-shadow: 0 10px 26px -10px rgba(34, 197, 94, 0.28) !important;
}
.fi-wi-stats-overview-stat:hover::before {
    opacity: 1;
}
.fi-wi-stats-overview-stat-label {
    color: var(--dwb-text-dim) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.fi-wi-stats-overview-stat-value {
    color: #ffffff !important;
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}
.fi-wi-stats-overview-stat-icon {
    border-radius: 11px !important;
    padding: 0.45rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.fi-wi-stats-overview-stat-description {
    color: var(--dwb-text-mute) !important;
}

/* Charts */
.fi-wi-chart {
    background: var(--dwb-surface-2) !important;
    border: 1px solid var(--dwb-border);
    border-radius: 12px;
    padding: 0.4rem;
}
.fi-wi-chart canvas {
    border-radius: 8px;
}

/* Custom dashboard blades (range / system health) */
.fi-wi-dashboard-range select,
.fi-wi-dashboard-range input[type='date'] {
    background-color: var(--dwb-surface-3) !important;
    border: 1px solid var(--dwb-border) !important;
    color: var(--dwb-text) !important;
    border-radius: 10px !important;
}
.fi-wi-system-health table thead th {
    color: var(--dwb-text-dim) !important;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* ---------------------------------------------------------------------------
   6 · TABLES (all resources)
--------------------------------------------------------------------------- */
.fi-ta-ctn {
    background: transparent !important;
    border: 1px solid var(--dwb-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--dwb-shadow) !important;
    overflow: hidden;
}
.fi-ta-header-ctn {
    background: linear-gradient(180deg, var(--dwb-surface-3) 0%, var(--dwb-surface-2) 100%);
    border-bottom: 1px solid var(--dwb-border);
}
.fi-ta-content thead {
    background: rgba(11, 18, 32, 0.6);
}
.fi-ta-content thead th {
    color: var(--dwb-text-dim) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--dwb-border);
}
.fi-ta-content tbody tr {
    transition: background-color 0.12s ease;
    border-bottom: 1px solid rgba(148, 163, 184, 0.07);
}
.fi-ta-content tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.035);
}
.fi-ta-content tbody td {
    color: var(--dwb-text);
}

/* Table header toolbar — search + filters on dark */
.fi-ta-search-field .fi-input,
.fi-ta-filters .fi-input,
.fi-ta-filters select {
    background-color: var(--dwb-surface-3) !important;
    border: 1px solid var(--dwb-border) !important;
    color: var(--dwb-text) !important;
}
.fi-ta-search-field .fi-input:focus,
.fi-ta-filters .fi-input:focus {
    border-color: var(--dwb-orange);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

/* Empty state */
.fi-ta-empty-state {
    background: transparent;
}
.fi-ta-empty-state-icon-ctn {
    background: rgba(34, 197, 94, 0.10) !important;
    color: var(--dwb-orange) !important;
}
.fi-ta-empty-state-heading {
    color: var(--dwb-text) !important;
}

/* ---------------------------------------------------------------------------
   7 · FORMS
--------------------------------------------------------------------------- */
.fi-input-wrp,
.fi-fo-field-wrp .fi-input,
.fi-select-input,
.fi-textarea {
    background-color: var(--dwb-surface-3) !important;
    border: 1px solid var(--dwb-border) !important;
    color: var(--dwb-text) !important;
    border-radius: 10px !important;
}
.fi-input-wrp:focus-within,
.fi-fo-field-wrp .fi-input:focus,
.fi-select-input:focus,
.fi-textarea:focus {
    border-color: var(--dwb-orange) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
}
.fi-input-wrp::placeholder,
.fi-input::placeholder {
    color: var(--dwb-text-mute) !important;
}
.fi-input-wrp-prefix {
    color: var(--dwb-text-mute);
}
.fi-fo-field-wrp-label {
    color: var(--dwb-text-dim) !important;
    font-weight: 600 !important;
    font-size: 0.84rem;
}
.fi-fo-field-wrp-hint {
    color: var(--dwb-text-mute) !important;
}

/* Checkboxes / radios / toggles */
.fi-checkbox-input,
.fi-radio-input {
    border-color: var(--dwb-border-strong) !important;
    background-color: var(--dwb-surface-3) !important;
}
.fi-checkbox-input:checked,
.fi-radio-input:checked {
    background-color: var(--dwb-orange) !important;
    border-color: var(--dwb-orange) !important;
}

/* Dates / selects popovers */
.fi-select-options,
.fi-datepicker,
.fi-color-picker {
    background-color: var(--dwb-surface-4) !important;
    border: 1px solid var(--dwb-border-strong) !important;
    color: var(--dwb-text) !important;
}

/* ---------------------------------------------------------------------------
   8 · BUTTONS / BADGES / LINKS
--------------------------------------------------------------------------- */
.fi-btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
}
.fi-btn.fi-btn-color-primary {
    background-image: var(--dwb-grad-orange) !important;
    border: none;
    box-shadow: 0 6px 18px -6px rgba(34, 197, 94, 0.5);
}
.fi-btn.fi-btn-color-primary:hover {
    filter: brightness(1.08);
    box-shadow: var(--dwb-glow-orange);
}
.fi-btn.fi-btn-color-danger {
    background-image: linear-gradient(135deg, #f87171, #dc2626) !important;
    border: none;
}
.fi-btn.fi-btn-color-gray {
    background-color: var(--dwb-surface-3) !important;
    color: var(--dwb-text) !important;
    border: 1px solid var(--dwb-border);
}
.fi-btn.fi-btn-color-gray:hover {
    background-color: var(--dwb-surface-4) !important;
}

/* Badges → status chips */
.fi-badge {
    border-radius: 999px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    padding: 0.22rem 0.68rem !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.fi-link {
    color: var(--dwb-orange-bright) !important;
    font-weight: 500;
}
.fi-link:hover {
    color: var(--dwb-orange) !important;
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   9 · MODALS / DROPDOWNS / NOTIFICATIONS
--------------------------------------------------------------------------- */
.fi-modal-window {
    background: var(--dwb-grad-surface) !important;
    border: 1px solid var(--dwb-border-strong);
    border-radius: 16px !important;
    box-shadow: 0 24px 70px -20px rgba(22, 163, 74, 0.18) !important;
}
.fi-modal-close-overlay {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background-color: rgba(4, 8, 16, 0.55) !important;
}

.fi-dropdown-panel {
    background: var(--dwb-grad-surface) !important;
    border: 1px solid var(--dwb-border-strong);
    border-radius: 13px !important;
    box-shadow: 0 18px 50px -16px rgba(22, 163, 74, 0.18) !important;
}
.fi-dropdown-header-label,
.fi-dropdown-list-item-label {
    color: var(--dwb-text) !important;
}
.fi-dropdown-list-item:hover,
.fi-dropdown-list-item.fi-dropdown-list-item-color-primary {
    background-color: rgba(34, 197, 94, 0.14) !important;
    color: var(--dwb-orange-bright) !important;
}

.fi-notification {
    background: var(--dwb-grad-surface) !important;
    border: 1px solid var(--dwb-border-strong);
    border-radius: 14px !important;
    box-shadow: var(--dwb-shadow), 0 0 0 1px var(--dwb-orange) inset !important;
}

/* ---------------------------------------------------------------------------
   10 · SCROLLBARS / MISC
--------------------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--dwb-surface-4) transparent;
}
*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: var(--dwb-surface-4);
    border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover {
    background: #bbf7d0;
}

.fi-page {
    color: var(--dwb-text);
}
.fi-header-heading {
    color: var(--dwb-text) !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}
.fi-breadcrumbs-item,
.fi-breadcrumbs-item-label {
    color: var(--dwb-text-dim) !important;
}
.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: var(--dwb-orange-bright) !important;
}

/* Focus ring — consistent orange everywhere */
:focus-visible {
    outline: 2px solid var(--dwb-orange) !important;
    outline-offset: 2px;
}

/* ============================================================================
   11 · PREMIUM POLISH PASS (append-only, reversible)
   Purpose: elevate cohesion + premium feel WITHOUT changing the established
   dark-navy + orange identity or any working behavior. Every rule here is
   additive. To revert, delete this entire section — no prior rule is altered.
   ============================================================================ */

/* 11.1 Status chips → semantic, color-matched ring instead of the previous
        flat rgb(228,228,231) border that appeared on every chip regardless of
        state. Closes a real inconsistency across all 20+ resource pages. */
.fi-badge.fi-color-success { border-color: rgba(74,222,128,0.45)  !important; box-shadow: inset 0 0 0 1px rgba(74,222,128,0.18)  !important; }
.fi-badge.fi-color-danger  { border-color: rgba(251,113,133,0.45) !important; box-shadow: inset 0 0 0 1px rgba(251,113,133,0.18) !important; }
.fi-badge.fi-color-warning { border-color: rgba(251,191,36,0.45)  !important; box-shadow: inset 0 0 0 1px rgba(251,191,36,0.18)  !important; }
.fi-badge.fi-color-primary { border-color: rgba(254,119,17,0.45)  !important; box-shadow: inset 0 0 0 1px rgba(254,119,17,0.18)  !important; }
.fi-badge.fi-color-info    { border-color: rgba(96,165,250,0.45)  !important; box-shadow: inset 0 0 0 1px rgba(96,165,250,0.18)  !important; }
.fi-badge.fi-color-gray    { border-color: rgba(148,163,184,0.35) !important; box-shadow: inset 0 0 0 1px rgba(148,163,184,0.12) !important; }

/* 11.2 Table rows → warm brand-tinted hover (was a neutral white wash) so the
        data grid reads as part of the orange identity and gains focus. */
.fi-ta-content tbody tr:hover {
    background-color: rgba(34, 197, 94, 0.06) !important;
}
.fi-ta-content tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--dwb-orange);
}

/* 11.3 Elevation hairline — a faint top inner light on elevated surfaces gives
        depth without visual noise (replaces plain shadow-only look). */
.fi-section,
.fi-ta-ctn {
    box-shadow: var(--dwb-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* 11.4 KPI stat icons → branded tinted chip (consistent across all metric
        cards). The source icon color is inherited near-white text, so we tint
        with the brand orange rather than currentColor for a cohesive look. */
.fi-wi-stats-overview-stat-icon {
    background: rgba(34, 197, 94, 0.14) !important;
    color: var(--dwb-orange-bright) !important;
    border: 1px solid rgba(34, 197, 94, 0.32) !important;
}

/* 11.5 Buttons → tactile press feedback on primary + gray actions. */
.fi-btn.fi-btn-color-primary,
.fi-btn.fi-btn-color-gray {
    transition: filter .15s ease, box-shadow .15s ease, transform .08s ease, background-color .15s ease !important;
}
.fi-btn.fi-btn-color-gray:active { transform: translateY(1px); }
.fi-btn.fi-btn-color-primary:active { transform: translateY(1px); }

/* 11.6 Empty states → feel intentional: generous padding, larger tinted icon,
        constrained description text. Reads as "designed", not "broken". */
.fi-ta-empty-state { padding: 3rem 1.5rem !important; }
.fi-ta-empty-state-icon-ctn {
    width: 3.25rem; height: 3.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px; margin-bottom: 0.5rem;
}
.fi-ta-empty-state-heading { font-size: 1.05rem !important; font-weight: 700 !important; }
.fi-ta-empty-state-description { color: var(--dwb-text-mute) !important; max-width: 32rem; margin: 0.35rem auto 0; }

/* 11.7 Overlay surfaces → soft inner hairline for a refined edge. */
.fi-modal-window   { box-shadow: 0 24px 70px -20px rgba(0,0,0,0.8),  inset 0 1px 0 rgba(255,255,255,0.05) !important; }
.fi-dropdown-panel { box-shadow: 0 18px 50px -16px rgba(0,0,0,0.7),  inset 0 1px 0 rgba(255,255,255,0.05) !important; }
.fi-notification   { box-shadow: var(--dwb-shadow), 0 0 0 1px var(--dwb-orange) inset, inset 0 1px 0 rgba(255,255,255,0.05) !important; }

/* 11.8 Auth screen → fields glow on focus, tying the login to the brand. */
.fi-simple-page .fi-input-wrp:focus-within {
    border-color: var(--dwb-orange) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22) !important;
}

/* 11.9 Sidebar → faint divider between nav groups for clearer structure. */
.fi-sidebar-group + .fi-sidebar-group {
    border-top: 1px solid var(--dwb-border);
    padding-top: 0.55rem;
    margin-top: 0.25rem;
}

/* 11.10 Page → calm, premium content settle-in on navigation. */
.fi-page { animation: dwb-fade .25s ease both; }
@keyframes dwb-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* ---------------------------------------------------------------------------
   12 · LIGHT + GREEN THEME (white background, green borders)
--------------------------------------------------------------------------- */
html, body.fi-body { color-scheme: light; }
.fi-sidebar, .fi-topbar nav, .fi-main, .fi-section, .fi-wi-stats-overview-stat, .fi-ta-ctn, .fi-fo-section,
.fi-modal-window, .fi-dropdown-panel, .fi-no-notification, .fi-simple-main, .fi-ta-table, .fi-fo-tabs, .fi-tabs {
    background-color: #ffffff; color: var(--dwb-text);
}
.fi-sidebar { border-right: 1px solid var(--dwb-border) !important; }
.fi-topbar nav { border-bottom: 1px solid var(--dwb-border) !important; }
.fi-section, .fi-wi-stats-overview-stat, .fi-ta-ctn, .fi-fo-section, .fi-modal-window, .fi-dropdown-panel,
.fi-no-notification, .fi-simple-main, .fi-fo-tabs, .fi-tabs, .fi-wi-chart, .fi-fo-repeater-item, .fi-fo-fieldset {
    border: 1px solid var(--dwb-border) !important; border-radius: 0.9rem; box-shadow: var(--dwb-shadow) !important;
}
.fi-wi-stats-overview-stat { border-top: 3px solid var(--dwb-orange) !important; }
.fi-ta-table thead, .fi-ta-header-cell { background-color: #f0fdf4 !important; color: #14532d !important; }
.fi-ta-row:hover { background-color: #f0fdf4 !important; }
.fi-ta-cell, .fi-ta-row { border-color: rgba(34, 197, 94, 0.25) !important; }
.fi-input, .fi-select-input, .fi-fo-select .choices__inner, .fi-input-wrp, textarea.fi-input {
    background-color: #ffffff !important; color: var(--dwb-text) !important; border: 1px solid var(--dwb-border) !important; box-shadow: none !important;
}
.fi-input-wrp:focus-within { border-color: var(--dwb-orange) !important; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22) !important; }
.fi-sidebar-item-button:hover, .fi-sidebar-item-active .fi-sidebar-item-button { background: rgba(34, 197, 94, 0.12) !important; }
.fi-sidebar-item-active .fi-sidebar-item-button { box-shadow: inset 3px 0 0 var(--dwb-orange) !important; }
.fi-sidebar-item-active .fi-sidebar-item-label, .fi-sidebar-item-active .fi-sidebar-item-icon { color: #15803d !important; }
.fi-sidebar-item-label, .fi-sidebar-group-label, .fi-topbar *, .fi-header-heading, .fi-breadcrumbs *, .fi-ta-text, .fi-fo-field-wrp-label, label, .fi-wi-stats-overview-stat-label, .fi-wi-stats-overview-stat-value, .fi-wi-stats-overview-stat-description {
    color: var(--dwb-text);
}
.fi-wi-stats-overview-stat-value { color: #14532d !important; }
.fi-btn-color-primary, .fi-btn.fi-color-primary { background-image: var(--dwb-grad-orange) !important; color: #ffffff !important; border: 1px solid #15803d !important; }
.fi-badge { border: 1px solid rgba(34, 197, 94, 0.35); }
a.fi-link, .fi-link { color: #15803d; }
::-webkit-scrollbar-thumb { background: #86efac !important; }
.fi-simple-layout .fi-logo, .fi-logo { color: #15803d !important; }
#admin-lang-select { background: #ffffff !important; color: #0f172a !important; border: 1px solid var(--dwb-border) !important; }
.fi-logo, .fi-sidebar-header .fi-logo, .fi-simple-header .fi-logo { color: #15803d !important; -webkit-text-fill-color: #15803d !important; background: none !important; text-shadow: none !important; }
select.fi-select-input, .fi-select-input, .fi-input-wrp select { background-color: #ffffff !important; color: #0f172a !important; border: 1px solid var(--dwb-border) !important; }
.fi-main [style*="color:#e6edf7"], .fi-main [style*="color: #e6edf7"], .fi-main [style*="color:#cbd5e1"], .fi-main [style*="color:#9fb0c8"], .fi-main [style*="color: #9fb0c8"] { color: #0f172a !important; }
.fi-main [style*="#17253d"], .fi-main [style*="#121c2f"], .fi-main [style*="#0f1a2e"] { background: #ffffff !important; }
label, .fi-fo-field-wrp-label span, .fi-fo-field-wrp-hint, .fi-fo-placeholder { color: #0f172a !important; }