/* ================================================================
   STRABUDDY THEME SYSTEM
   All theme-aware utility classes are defined here as plain CSS
   using hex CSS variables. Tailwind CDN handles layout/spacing only.
   ================================================================ */

/* ── 1. CSS VARIABLES (hex) ──────────────────────────────────── */

:root {
    /* StrataFlow Fixed Palette — Navy/Teal */
    --color-primary-50:  #F0F3FF;
    --color-primary-100: #E8ECFF;
    --color-primary-200: #D1D9F0;
    --color-primary-300: #A8B4D8;
    --color-primary-400: #6B7280;
    --color-primary-500: #13696A;  /* Teal accent — focus rings, active states */
    --color-primary-600: #1A365D;  /* Navy — primary buttons, headings */
    --color-primary-700: #142B4E;  /* Dark navy hover */
    --color-primary-800: #0F2040;
    --color-primary-900: #002045;
    --sb-bg:          #F9F9FF;
    --sb-card:        #ffffff;
    --sb-surface:     #F0F3FF;    /* sidebar / panel surface */
    --sb-border:      #e5e7eb;
    --sb-text:        #111827;
    --sb-muted:       #6b7280;
    --sb-heading:     #1A365D;    /* navy heading text */
    --sb-navy:        #1A365D;   /* fixed navy — always dark, safe for white text on buttons/badges */
    --sb-navy-rgb:    26,54,93;    /* rgb components for rgba() tints */
    --sb-teal-rgb:    19,105,106;  /* rgb components of --sb-teal for rgba() tints */
    --sb-error-rgb:   185,28,28;   /* rgb components of --sb-error for rgba() tints */
    --sb-nav-divider: rgba(26,54,93,0.12);
    --sb-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
    --sb-inner:       #F0F3FF;   /* elevated inner surface: mini-cards, icon boxes, form panels */
    --sb-chip:        #FFFFFF;   /* chips, filter buttons, input fields */
    --sb-header-surface: #F0F3FF; /* drawer / panel header background */
    --sb-status-error-bg:   #FEF2F2;
    --sb-status-warn-bg:    #FEF3C7;
    --sb-status-ok-bg:      #F0FDF4;
    --sb-status-info-bg:    #EFF6FF;
    --sb-status-neutral-bg: #F0F3FF;
    --cert-status-info:     #1D4ED8;
    --sb-ok:    #059669;
    --sb-warn:  #D97706;
    --sb-error: #B91C1C;
    --sb-teal:  #13696A;
    --sb-info:  #1D4ED8;
    /* Nav shell — always dark (navy sidebar) */
    --sb-nav-text:      #BEC9C8;
    --sb-nav-bg-active: #171F33;
    --sb-nav-text-hover:#DAE2FD;
    --sb-nav-teal:      #89D3D4;
    /* Hero CTA button on fixed dark navy surface */
    --sb-hero-btn-bg:   #A2EDED;
    --sb-hero-btn-text: #002020;
}

.dark {
    /* Deep-navy dark palette — matches Strata Elite reference */
    --sb-bg:          #080F1C;
    --sb-card:        #0E1D35;
    --sb-surface:     #0B1729;    /* sidebar + panel surface */
    --sb-border:      #1A3055;
    --sb-text:        #EDF2FF;
    --sb-muted:       #7A9ABF;
    --sb-heading:     #EDF2FF;    /* headings flip to near-white */
    --sb-navy:        #1A365D;   /* fixed navy — always dark, safe for white text on buttons/badges */
    --sb-navy-rgb:    26,54,93;    /* rgb components for rgba() tints */
    --sb-teal-rgb:    19,105,106;  /* rgb components of --sb-teal for rgba() tints */
    --sb-error-rgb:   185,28,28;   /* rgb components of --sb-error for rgba() tints */
    --sb-nav-divider: rgba(255,255,255,0.07);
    --sb-card-shadow: 0 4px 14px -2px rgb(0 0 0 / 0.45);
    --sb-inner:       #222a3d;   /* elevated inner surface in dark mode */
    --sb-chip:        #2d3449;   /* chips, filter buttons, input fields in dark mode */
    --sb-header-surface: #131D30; /* drawer / panel header background — dark */
    --sb-status-error-bg:   rgba(185,28,28,0.18);
    --sb-status-warn-bg:    rgba(217,119,6,0.18);
    --sb-status-ok-bg:      rgba(5,150,105,0.18);
    --sb-status-info-bg:    rgba(29,78,216,0.18);
    --sb-status-neutral-bg: #222a3d;
    --cert-status-info:     #93C5FD;
    --sb-ok:    #34D399;
    --sb-warn:  #FCD34D;
    --sb-error: #FC8181;
    --sb-teal:  #89D3D4;
    --sb-info:  #93C5FD;
}

/* ── 2. BASE / FOUC GUARDS ───────────────────────────────────── */
/* Loaded synchronously from app.css — before Tailwind CDN executes.      */

/* Prevents body showing white while Tailwind CDN is still fetching.      */
html, body { background-color: var(--sb-bg); }

/* Mirrors Tailwind's .hidden so that elements using `hidden dark:block`   */
/* don't flash visible (e.g. dark-mode backdrop overlays on login page).  */
.hidden { display: none; }

/* ── 3. BACKGROUND UTILITIES ─────────────────────────────────── */

.bg-primary-50  { background-color: var(--color-primary-50);  }
.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-primary-200 { background-color: var(--color-primary-200); }
.bg-primary-300 { background-color: var(--color-primary-300); }
.bg-primary-400 { background-color: var(--color-primary-400); }
.bg-primary-500 { background-color: var(--color-primary-500); }
.bg-primary-600 { background-color: var(--color-primary-600); }
.bg-primary-700 { background-color: var(--color-primary-700); }
.bg-primary-800 { background-color: var(--color-primary-800); }
.bg-primary-900 { background-color: var(--color-primary-900); }

.bg-sb-bg      { background-color: var(--sb-bg);      }
.bg-sb-card    { background-color: var(--sb-card);    }
.bg-sb-surface { background-color: var(--sb-surface); }
.bg-sb-inner   { background-color: var(--sb-inner);   }
.bg-sb-chip    { background-color: var(--sb-chip);    }

/* ── 4. TEXT UTILITIES ───────────────────────────────────────── */

.text-primary-50  { color: var(--color-primary-50);  }
.text-primary-100 { color: var(--color-primary-100); }
.text-primary-200 { color: var(--color-primary-200); }
.text-primary-300 { color: var(--color-primary-300); }
.text-primary-400 { color: var(--color-primary-400); }
.text-primary-500 { color: var(--color-primary-500); }
.text-primary-600 { color: var(--color-primary-600); }
.text-primary-700 { color: var(--color-primary-700); }
.text-primary-800 { color: var(--color-primary-800); }
.text-primary-900 { color: var(--color-primary-900); }

.text-sb-text  { color: var(--sb-text);  }
.text-sb-muted { color: var(--sb-muted); }

/* ── 5. BORDER UTILITIES ─────────────────────────────────────── */

.border-primary-100 { border-color: var(--color-primary-100); }
.border-primary-200 { border-color: var(--color-primary-200); }
.border-primary-300 { border-color: var(--color-primary-300); }
.border-primary-400 { border-color: var(--color-primary-400); }
.border-primary-500 { border-color: var(--color-primary-500); }
.border-primary-600 { border-color: var(--color-primary-600); }
.border-primary-700 { border-color: var(--color-primary-700); }

.border-sb-border { border-color: var(--sb-border); }

.divide-sb-border > :not([hidden]) ~ :not([hidden]) { border-color: var(--sb-border); }

/* ── 6. RING UTILITIES (Tailwind uses --tw-ring-color) ───────── */

.ring-primary-100 { --tw-ring-color: var(--color-primary-100); }
.ring-primary-500 { --tw-ring-color: var(--color-primary-500); }

/* ── 7. HOVER VARIANTS ───────────────────────────────────────── */

.hover\:bg-primary-50:hover  { background-color: var(--color-primary-50);  }
.hover\:bg-primary-100:hover { background-color: var(--color-primary-100); }
.hover\:bg-primary-700:hover { background-color: var(--color-primary-700); }

.hover\:bg-sb-bg:hover     { background-color: var(--sb-bg);     }
.hover\:bg-sb-border:hover { background-color: var(--sb-border); }

.hover\:text-primary-600:hover { color: var(--color-primary-600); }
.hover\:text-sb-text:hover     { color: var(--sb-text);           }

.hover\:border-primary-300:hover { border-color: var(--color-primary-300); }
.hover\:border-primary-400:hover { border-color: var(--color-primary-400); }

/* ── 8. FOCUS VARIANTS ───────────────────────────────────────── */

.focus\:border-primary-500:focus { border-color: var(--color-primary-500); }
.focus\:ring-primary-500:focus   { --tw-ring-color: var(--color-primary-500); }

/* ── 9. BLAZOR FORM VALIDATION ───────────────────────────────── */

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--sb-ok); }

.invalid { outline: 1px solid var(--sb-error); }

/* ── 10. STRAFLOW STATUS UTILITIES ───────────────────────────── */

/* Status badge pills — use with rounded-full px-3 py-1 text-xs font-semibold */
.sf-badge-success  { background-color: var(--sb-status-ok-bg);      color: var(--sb-ok);    }
.sf-badge-critical { background-color: var(--sb-status-error-bg);   color: var(--sb-error); }
.sf-badge-warning  { background-color: var(--sb-status-warn-bg);    color: var(--sb-warn);  }
.sf-badge-info     { background-color: var(--sb-status-info-bg);    color: var(--sb-info);  }
.sf-badge-pending  { background-color: var(--sb-status-neutral-bg); color: var(--sb-muted); }

/* Alert banners — use with rounded-lg px-4 py-3 */
.sf-alert-critical { background-color: var(--sb-status-error-bg); border-left: 3px solid var(--sb-error); }
.sf-alert-warning  { background-color: var(--sb-status-warn-bg);  border-left: 3px solid var(--sb-warn);  }
.sf-alert-info     { background-color: var(--sb-status-info-bg);  border-left: 3px solid var(--sb-info);  }
.sf-alert-success  { background-color: var(--sb-status-ok-bg);    border-left: 3px solid var(--sb-ok);    }

/* Semantic text colours */
.sf-error-text   { color: var(--sb-error); }
.sf-success-text { color: var(--sb-ok);    }
.sf-warning-text { color: var(--sb-warn);  }

/* Vote / confirm / deny action buttons */
.sf-vote-yes { background-color: var(--sb-status-ok-bg);    border: 1px solid var(--sb-ok);    color: var(--sb-ok);    }
.sf-vote-yes:hover { background-color: var(--sb-status-ok-bg);    filter: brightness(0.95); }
.sf-vote-no  { background-color: var(--sb-status-error-bg); border: 1px solid var(--sb-error); color: var(--sb-error); }
.sf-vote-no:hover  { background-color: var(--sb-status-error-bg); filter: brightness(0.95); }

/* ── 11. STRAFLOW SIDEBAR NAV UTILITIES ─────────────────────── */

/* Base nav link — reference navy shell treatment */
.sf-nav-link {
    color: var(--sb-nav-text);
    border-right: 2px solid transparent;
}
.sf-nav-link:hover {
    background: var(--sb-nav-bg-active);
    color: var(--sb-nav-text-hover);
}

/* Active nav state — right-edge accent and navy chip */
.sf-nav-active {
    border-right-color: var(--sb-nav-teal);
    background: var(--sb-nav-bg-active);
    color: var(--sb-nav-teal);
    font-weight: 700;
}

/* Bottom nav active tab */
.sf-bottom-nav-idle {
    color: var(--sb-nav-text);
}

.sf-bottom-nav-active {
    background: var(--sb-nav-bg-active);
    color: var(--sb-nav-teal);
    border-radius: 0.75rem;
}

.validation-message {
    color: var(--sb-error);
    font-size: 0.875rem;
}

.blazor-error-boundary {
    background: var(--sb-status-error-bg);
    border: 1px solid var(--sb-error);
    color: var(--sb-error);
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ── FocusOnNavigate: suppress the browser focus ring on headings when
      focused programmatically by the router (not via keyboard tab). ── */
h1:focus:not(:focus-visible),
h2:focus:not(:focus-visible),
h3:focus:not(:focus-visible) {
    outline: none;
}

/* ── 12. DISCUSSION CARD UTILITIES ──────────────────────────── */

.sf-discussion-card {
    border: 1px solid var(--sb-border);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.sf-discussion-card:hover {
    border-color: rgba(19, 105, 106, 0.4);
}
.sf-discussion-card .sf-thread-title {
    color: var(--sb-heading);
    transition: color 0.2s;
}
.sf-discussion-card:hover .sf-thread-title {
    color: var(--sb-teal);
}

/* ── 13. DARK MODE OVERRIDES ─────────────────────────────────── */

/* Status badge pills — high-contrast on dark card surfaces */
.dark .sf-badge-success  { background-color: rgba(5,150,105,0.18);   color: #34D399; }
.dark .sf-badge-critical { background-color: rgba(185,28,28,0.22);   color: #FC8181; }
.dark .sf-badge-warning  { background-color: rgba(217,119,6,0.20);   color: #FCD34D; }
.dark .sf-badge-info     { background-color: rgba(29,78,216,0.20);   color: #93C5FD; }
.dark .sf-badge-pending  { background-color: rgba(107,114,128,0.20); color: #9CA3AF; }

/* Alert banners */
.dark .sf-alert-critical { background-color: rgba(185,28,28,0.16);  border-left-color: #FC8181; }
.dark .sf-alert-warning  { background-color: rgba(217,119,6,0.16);  border-left-color: #FCD34D; }
.dark .sf-alert-info     { background-color: rgba(29,78,216,0.16);  border-left-color: #93C5FD; }
.dark .sf-alert-success  { background-color: rgba(5,150,105,0.16);  border-left-color: #34D399; }

/* Semantic text */
.dark .sf-error-text   { color: #FC8181; }
.dark .sf-success-text { color: #34D399; }
.dark .sf-warning-text { color: #FCD34D; }

/* Vote buttons */
.dark .sf-vote-yes { background-color: rgba(5,150,105,0.18); border-color: rgba(52,211,153,0.3); color: #34D399; }
.dark .sf-vote-yes:hover { background-color: rgba(5,150,105,0.28); }
.dark .sf-vote-no  { background-color: rgba(185,28,28,0.18); border-color: rgba(252,129,129,0.3); color: #FC8181; }
.dark .sf-vote-no:hover  { background-color: rgba(185,28,28,0.28); }

/* Sidebar nav — nav shell variables are fixed (always dark navy), no dark overrides needed */

/* ── BREACH NOTICES PAGE — ADAPTIVE CLASSES ─────────────────── */

/* Skeleton loader block */
.sf-skeleton { background-color: #F0F3FF; }
.dark .sf-skeleton { background-color: #171f33; }

/* Page header "Active Register" chip */
.sf-register-chip { background-color: #F0F3FF; color: #6B7280; border: 1px solid #E5E7EB; }
.dark .sf-register-chip { background-color: #222a3d; color: #bec9c8; border: 1px solid rgba(63,73,72,0.4); }

/* "Live Updates" pulse label */
.sf-live-text { color: #13696A; }
.dark .sf-live-text { color: #3cddc7; }

/* Metric bento card */
.sf-bento-card { background-color: #FFFFFF; box-shadow: 0 4px 6px -1px rgb(0 0 0/0.05); }
.dark .sf-bento-card { background-color: #171f33; box-shadow: none; }

/* Bento card divider */
.sf-bento-divider { border-top: 1px solid #F0F3FF; }
.dark .sf-bento-divider { border-top: 1px solid rgba(63,73,72,0.3); }

/* Bento card icon badge */
.sf-bento-icon { background-color: #F0F3FF; border: 1px solid #E5E7EB; }
.dark .sf-bento-icon { background-color: #222a3d; border: 1px solid rgba(63,73,72,0.3); }

/* Bento card teal accent (primary/resolved) */
.sf-bento-teal { color: #13696A; }
.dark .sf-bento-teal { color: #89d3d4; }

/* Bento card green accent */
.sf-bento-green { color: #059669; }
.dark .sf-bento-green { color: #3cddc7; }

/* Escalated card — red-tinted surface */
.sf-bento-escalated { background-color: #FEF2F2; border: 1px solid rgba(185,28,28,0.15); }
.dark .sf-bento-escalated { background-color: rgba(147,0,10,0.08); border: 1px solid rgba(255,180,171,0.15); }

.sf-bento-escalated-icon { background-color: #FEE2E2; border: 1px solid rgba(185,28,28,0.2); }
.dark .sf-bento-escalated-icon { background-color: #222a3d; border: 1px solid rgba(255,180,171,0.25); }

.sf-bento-escalated-divider { border-top: 1px solid rgba(185,28,28,0.12); }
.dark .sf-bento-escalated-divider { border-top: 1px solid rgba(255,180,171,0.15); }

.sf-escalated-count { color: #B91C1C; }
.dark .sf-escalated-count { color: #ffb4ab; }

.sf-escalated-action { color: #B91C1C; }
.dark .sf-escalated-action { color: #ffb4ab; }

/* Table card wrapper */
.sf-table-card { background-color: #FFFFFF; box-shadow: 0 20px 40px -10px rgb(0 0 0/0.08); }
.dark .sf-table-card { background-color: #171f33; box-shadow: 0 20px 40px -10px rgba(6,14,32,0.6); }

/* Table toolbar */
.sf-toolbar { background-color: rgba(240,243,255,0.6); border-bottom: 1px solid #E5E7EB; }
.dark .sf-toolbar { background-color: rgba(34,42,61,0.5); border-bottom: 1px solid rgba(11,19,38,0.8); }

/* Table search input */
.sf-search-input { background-color: #F0F3FF; color: #1A365D; border: 1px solid #E5E7EB; }
.dark .sf-search-input { background-color: #060e20; color: #dae2fd; border: 1px solid rgba(63,73,72,0.35); }

/* Slatted gap fill */
.sf-slat-gap { background-color: #F0F3FF; }
.dark .sf-slat-gap { background-color: #060e20; }

/* Column header row */
.sf-col-header { background-color: #F0F3FF; color: #6B7280; }
.dark .sf-col-header { background-color: #222a3d; color: #bec9c8; }

/* Table row */
.sf-slat-row { background-color: #FFFFFF; }
.sf-slat-row:hover { background-color: #F9F9FF; }
.dark .sf-slat-row { background-color: #171f33; }
.dark .sf-slat-row:hover { background-color: #1e2740; }

/* Lot number badge in row */
.sf-lot-badge { background-color: #F0F3FF; border: 1px solid #E5E7EB; color: #1A365D; }
.dark .sf-lot-badge { background-color: #060e20; border: 1px solid rgba(63,73,72,0.25); color: #dae2fd; }
.sf-lot-badge-resolved { color: #6B7280; }
.dark .sf-lot-badge-resolved { color: #bec9c8; }

/* Row primary text */
.sf-row-text { color: #1A365D; }
.dark .sf-row-text { color: #dae2fd; }

/* Row secondary / mono text */
.sf-row-subtext { color: #6B7280; }
.dark .sf-row-subtext { color: #bec9c8; }

/* Row overdue text */
.sf-row-overdue { color: #B91C1C; }
.dark .sf-row-overdue { color: #ffb4ab; }

/* Empty-state icon */
.sf-empty-icon { color: #D1D5DB; }
.dark .sf-empty-icon { color: #3f4948; }

/* Table footer */
.sf-table-footer { background-color: #FFFFFF; border-top: 1px solid #F0F3FF; }
.dark .sf-table-footer { background-color: #171f33; border-top: 1px solid #060e20; }

/* Status badges — breach-specific inline styles replaced by data attributes below */
/* Open — teal */
.sf-status-open   { background-color: rgba(19,105,106,0.08); color: #13696A; border: 1px solid rgba(19,105,106,0.2); }
.dark .sf-status-open   { background-color: rgba(137,211,212,0.1); color: #89d3d4; border: 1px solid rgba(137,211,212,0.2); }
/* Under Review — blue/slate */
.sf-status-review { background-color: rgba(29,78,216,0.08); color: #1D4ED8; border: 1px solid rgba(29,78,216,0.15); }
.dark .sf-status-review { background-color: rgba(188,199,222,0.12); color: #bcc7de; border: 1px solid rgba(63,73,72,0.5); }
/* Escalated — red */
.sf-status-escalated { background-color: #FEF2F2; color: #B91C1C; border: 1px solid rgba(185,28,28,0.2); }
.dark .sf-status-escalated { background-color: rgba(255,180,171,0.1); color: #ffb4ab; border: 1px solid rgba(255,180,171,0.2); }
/* Resolved — green */
.sf-status-resolved  { background-color: #F0FDF4; color: #059669; border: 1px solid rgba(5,150,105,0.2); }
.dark .sf-status-resolved  { background-color: rgba(0,107,95,0.2); color: #3cddc7; border: 1px solid rgba(60,221,199,0.2); }

/* Row left accent bars */
.sf-accent-open      { background-color: #13696A; }
.dark .sf-accent-open      { background-color: #89d3d4; }
.sf-accent-review    { background-color: #1D4ED8; }
.dark .sf-accent-review    { background-color: #bcc7de; }
.sf-accent-escalated { background-color: #B91C1C; }
.dark .sf-accent-escalated { background-color: #ffb4ab; }
.sf-accent-resolved  { background-color: #059669; }
.dark .sf-accent-resolved  { background-color: #3cddc7; }

/* Description/resolution text in rows */
.sf-row-desc { color: #6B7280; }
.dark .sf-row-desc { color: #bec9c8; }

/* Chevron / action button */
.sf-row-action { color: #9CA3AF; }
.dark .sf-row-action { color: #bec9c8; }

/* Slide panel drawer */
.sf-breach-drawer { background-color: #FFFFFF; border-left: 1px solid #F0F3FF; }
.dark .sf-breach-drawer { background-color: #131b2e; border-left: 1px solid rgba(63,73,72,0.3); }

.sf-breach-drawer-header { border-bottom: 1px solid #F0F3FF; }
.dark .sf-breach-drawer-header { border-bottom: 1px solid rgba(63,73,72,0.3); }

.sf-breach-drawer-footer { border-top: 1px solid #F0F3FF; }
.dark .sf-breach-drawer-footer { border-top: 1px solid rgba(63,73,72,0.3); }

.sf-breach-drawer-title { color: #1A365D; font-family: 'Manrope', sans-serif; font-size: 1.25rem; font-weight: 700; }
.dark .sf-breach-drawer-title { color: #dae2fd; }

.sf-breach-drawer-subtitle { color: #6B7280; }
.dark .sf-breach-drawer-subtitle { color: #bec9c8; }

.sf-breach-drawer-label { color: #6B7280; }
.dark .sf-breach-drawer-label { color: #bec9c8; }

.sf-breach-drawer-close { color: #6B7280; }
.dark .sf-breach-drawer-close { color: #bec9c8; }

.sf-breach-drawer-input { background-color: #F0F3FF; color: #1A365D; border: 1px solid #E5E7EB; }
.dark .sf-breach-drawer-input { background-color: #060e20; color: #dae2fd; border: 1px solid rgba(63,73,72,0.4); }

.sf-breach-desc-block { background-color: #F0F3FF; border: 1px solid #E5E7EB; }
.dark .sf-breach-desc-block { background-color: #060e20; border: 1px solid rgba(63,73,72,0.3); }

.sf-breach-desc-text { color: #374151; }
.dark .sf-breach-desc-text { color: #dae2fd; }

.sf-breach-form-error { background-color: #FEF2F2; color: #B91C1C; border: 1px solid rgba(185,28,28,0.2); }
.dark .sf-breach-form-error { background-color: rgba(147,0,10,0.15); color: #ffb4ab; border: 1px solid rgba(255,180,171,0.2); }

.sf-breach-btn-primary { background-color: #1A365D; color: #FFFFFF; font-family: 'Manrope', sans-serif; }
.dark .sf-breach-btn-primary { background-color: #13696a; color: #9be6e6; }

.sf-breach-btn-secondary { color: #13696A; border: 1.5px solid #13696A; background: transparent; }
.dark .sf-breach-btn-secondary { color: #89d3d4; border-color: #13696a; }

.sf-breach-issue-btn { background-color: #1A365D; color: #FFFFFF; border: 1px solid rgba(26,54,93,0.2); }
.dark .sf-breach-issue-btn { background-color: #13696a; color: #9be6e6; border: 1px solid rgba(137,211,212,0.2); }

.sf-backdrop { background: rgba(30,39,64,0.3); backdrop-filter: blur(4px); }
.dark .sf-backdrop { background: rgba(6,14,32,0.5); backdrop-filter: blur(4px); }

/* ── ADAPTIVE PAGE ELEMENT CLASSES ──────────────────────────── */
/* These classes adapt automatically between light and dark mode. */
/* Use them instead of hardcoded hex inline styles.               */

/* Headings (navy in light, near-white in dark) */
.sf-page-heading { color: #1A365D; }
.dark .sf-page-heading { color: #EDF2FF; }

/* Sub-headings & panel headings */
.sf-panel-heading { color: #1A365D; font-family: 'Manrope', sans-serif; }
.dark .sf-panel-heading { color: #EDF2FF; }

/* Body / muted text */
.sf-body-text  { color: #374151; }
.dark .sf-body-text  { color: #bec9c8; }

.sf-muted-text { color: #6B7280; }
.dark .sf-muted-text { color: #7A9ABF; }

.sf-faint-text { color: #9CA3AF; }
.dark .sf-faint-text { color: #5a7290; }

/* Cards / container surfaces */
.sf-card {
    background-color: #FFFFFF;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
}
.dark .sf-card {
    background-color: #0E1D35;
    box-shadow: 0 4px 14px -2px rgb(0 0 0 / 0.45);
}

/* Table / list row surfaces */
.sf-row {
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.04);
}
.sf-row:hover { background-color: #F9F9FF; }
.dark .sf-row { background-color: #171f33; box-shadow: none; }
.dark .sf-row:hover { background-color: #222a3d; }

/* Table wrapper / slatted background */
.sf-table-wrap { background-color: #F0F3FF; }
.dark .sf-table-wrap { background-color: #060e20; }

/* Table header row */
.sf-table-header { color: #6B7280; }
.dark .sf-table-header { color: #7A9ABF; }

/* Inner surface / input backgrounds */
.sf-input-bg { background-color: #F0F3FF; color: #1A365D; }
.dark .sf-input-bg { background-color: #222a3d; color: #EDF2FF; }

.sf-input-bg:focus { outline: 2px solid #13696A; }
.dark .sf-input-bg:focus { outline: 2px solid #89d3d4; }

/* Aside / right panel background */
.sf-panel-bg { background-color: #FFFFFF; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05); }
.dark .sf-panel-bg { background-color: #131b2e; box-shadow: 0 20px 40px -10px rgb(6 14 32 / 0.6); }

/* Slide drawer surface */
.sf-drawer { background-color: #FFFFFF; }
.dark .sf-drawer { background-color: #131b2e; }

/* Divider / border lines */
.sf-divider { border-color: #F0F3FF; }
.dark .sf-divider { border-color: rgba(63,73,72,0.3); }

/* Filter pill tab — active */
.sf-tab-active { background-color: #1A365D; color: #FFFFFF; }
.dark .sf-tab-active { background-color: #13696a; color: #9be6e6; }

/* Filter pill tab — idle */
.sf-tab-idle { background-color: #F0F3FF; color: #6B7280; }
.dark .sf-tab-idle { background-color: #222a3d; color: #7A9ABF; }
.dark .sf-tab-idle:hover { background-color: #2d3449; color: #EDF2FF; }

/* Inline chip / ref badge */
.sf-chip { background-color: #F0F3FF; color: #13696A; }
.dark .sf-chip { background-color: #222a3d; color: #89d3d4; }

/* Active breach indicator chip (red) */
.sf-chip-breach { background-color: #FEF2F2; color: #B91C1C; }
.dark .sf-chip-breach { background-color: rgba(147,0,10,0.18); color: #ffb4ab; }

/* Resolved breach chip (green) */
.sf-chip-ok { background-color: #F0FDF4; color: #059669; }
.dark .sf-chip-ok { background-color: rgba(5,150,105,0.18); color: #34D399; }

/* Icon colours */
.sf-icon-muted { color: #9CA3AF; }
.dark .sf-icon-muted { color: #5a7290; }

.sf-icon-teal  { color: #13696A; }
.dark .sf-icon-teal  { color: #89d3d4; }

.sf-icon-red   { color: #B91C1C; }
.dark .sf-icon-red   { color: #ffb4ab; }

.sf-icon-green { color: #059669; }
.dark .sf-icon-green { color: #34D399; }

/* Primary button (navy / teal-container in dark) */
.sf-btn-primary {
    background-color: #1A365D;
    color: #FFFFFF;
    font-family: 'Manrope', sans-serif;
}
.dark .sf-btn-primary {
    background-color: #13696a;
    color: #9be6e6;
}

/* Secondary / outline button */
.sf-btn-secondary {
    color: #13696A;
    border: 1.5px solid #13696A;
    background: transparent;
}
.dark .sf-btn-secondary {
    color: #89d3d4;
    border-color: #89d3d4;
}

/* Delete button */
.sf-btn-danger { background-color: #B91C1C; color: #FFFFFF; font-family: 'Manrope', sans-serif; }
.dark .sf-btn-danger { background-color: rgba(147,0,10,0.7); color: #ffb4ab; }

/* Form error inline */
.sf-form-error { background-color: #FEF2F2; color: #B91C1C; }
.dark .sf-form-error { background-color: rgba(147,0,10,0.18); color: #ffb4ab; }

/* Aside inner item card */
.sf-aside-item { background-color: #F0F3FF; }
.dark .sf-aside-item { background-color: #222a3d; }

/* Aside total bg */
.sf-aside-total-icon { background-color: #FEF2F2; }
.dark .sf-aside-total-icon { background-color: rgba(147,0,10,0.18); }

/* Stat card accent bars */
.sf-stat-red   { background-color: #B91C1C; }
.dark .sf-stat-red   { background-color: #ffb4ab; }

.sf-stat-teal  { background-color: #13696A; }
.dark .sf-stat-teal  { background-color: #89d3d4; }

.sf-stat-green { background-color: #059669; }
.dark .sf-stat-green { background-color: #34D399; }

/* Severity badge (custom inline because SeverityBadgeClass uses sf-badge-*) */
.sf-badge-neutral { background-color: #F3F4F6; color: #6B7280; }
.dark .sf-badge-neutral { background-color: rgba(107,114,128,0.20); color: #9CA3AF; }

/* ── DISPUTE REGISTER ────────────────────────────────────────────────────── */

/* Bento metric cards */
.sf-dispute-bento { background: #F0F3FF; border-radius: 0.75rem; }
.dark .sf-dispute-bento { background: #171f33; }

.sf-dispute-bento-elevated { background: #E8EDFF; border-radius: 0.75rem; }
.dark .sf-dispute-bento-elevated { background: #222a3d; }

.sf-dispute-metric { color: #1A365D; font-family: 'Manrope', sans-serif; font-weight: 700; }
.dark .sf-dispute-metric { color: #dae2fd; }

.sf-dispute-label { color: #6B7280; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.dark .sf-dispute-label { color: #bec9c8; }

/* Filter bar */
.sf-dispute-filter-active { background: rgba(19,105,106,0.12); color: #1A365D; font-weight: 600; border-radius: 9999px; }
.dark .sf-dispute-filter-active { background: rgba(137,211,212,0.15); color: #dae2fd; }

.sf-dispute-filter-idle { color: #6B7280; border-radius: 9999px; }
.dark .sf-dispute-filter-idle { color: #bec9c8; }
.sf-dispute-filter-idle:hover { background: rgba(0,0,0,0.05); color: #1A365D; }
.dark .sf-dispute-filter-idle:hover { background: rgba(255,255,255,0.05); color: #dae2fd; }

/* Case cards */
.sf-dispute-card { background: #FFFFFF; border-radius: 0.75rem; box-shadow: 0 2px 8px -2px rgb(0 0 0 / 0.06); }
.dark .sf-dispute-card { background: #171f33; box-shadow: none; }

.sf-dispute-card-low { background: #F9FAFF; border-radius: 0.75rem; box-shadow: 0 1px 4px -1px rgb(0 0 0 / 0.04); }
.dark .sf-dispute-card-low { background: #131b2e; box-shadow: none; }

.sf-dispute-card-title { color: #1A365D; font-family: 'Manrope', sans-serif; font-weight: 700; transition: color 0.15s; }
.dark .sf-dispute-card-title { color: #dae2fd; }

.sf-dispute-card-meta { color: #6B7280; }
.dark .sf-dispute-card-meta { color: #bec9c8; }

.sf-dispute-card-desc { color: #4B5563; }
.dark .sf-dispute-card-desc { color: #bec9c8; }

/* Left accent bars by status */
.sf-dispute-bar-open      { background: #6B7280; }
.dark .sf-dispute-bar-open { background: #3e495d; }

.sf-dispute-bar-review    { background: #D97706; }
.dark .sf-dispute-bar-review { background: #D97706; }

.sf-dispute-bar-mediation { background: #0F766E; }
.dark .sf-dispute-bar-mediation { background: #89d3d4; }

.sf-dispute-bar-tribunal  { background: #B91C1C; }
.dark .sf-dispute-bar-tribunal { background: #ffb4ab; }

.sf-dispute-bar-resolved  { background: #059669; }
.dark .sf-dispute-bar-resolved { background: #34D399; }

.sf-dispute-bar-closed    { background: #9CA3AF; }
.dark .sf-dispute-bar-closed { background: #4B5563; }

/* Status chips */
.sf-dispute-chip-open     { background: #F3F4F6; color: #374151; }
.dark .sf-dispute-chip-open { background: rgba(62,73,93,0.4); color: #bec9c8; }

.sf-dispute-chip-review   { background: #FFFBEB; color: #92400E; }
.dark .sf-dispute-chip-review { background: rgba(217,119,6,0.2); color: #D97706; }

.sf-dispute-chip-mediation { background: #F0FDFC; color: #0F766E; }
.dark .sf-dispute-chip-mediation { background: rgba(19,105,106,0.2); color: #89d3d4; }

.sf-dispute-chip-tribunal { background: #FEF2F2; color: #991B1B; }
.dark .sf-dispute-chip-tribunal { background: rgba(147,0,10,0.3); color: #ffb4ab; }

.sf-dispute-chip-resolved { background: #F0FDF4; color: #065F46; }
.dark .sf-dispute-chip-resolved { background: rgba(5,150,105,0.2); color: #34D399; }

.sf-dispute-chip-closed   { background: #F9FAFB; color: #6B7280; }
.dark .sf-dispute-chip-closed { background: rgba(75,85,99,0.2); color: #9CA3AF; }

/* View button */
.sf-dispute-view-btn { background: rgba(19,105,106,0.08); color: #13696A; border-radius: 0.5rem; transition: background 0.15s; }
.dark .sf-dispute-view-btn { background: rgba(137,211,212,0.1); color: #89d3d4; }
.sf-dispute-view-btn:hover { background: rgba(19,105,106,0.18); }
.dark .sf-dispute-view-btn:hover { background: rgba(137,211,212,0.2); }

/* Divider on mobile card footer */
.sf-dispute-row-divider { border-top-color: #E5E7EB; }
.dark .sf-dispute-row-divider { border-top-color: #222a3d; }

/* Side drawer */
.sf-dispute-drawer { background: #FFFFFF; box-shadow: -8px 0 32px -4px rgb(0 0 0 / 0.12); }
.dark .sf-dispute-drawer { background: #0f1829; box-shadow: -8px 0 32px -4px rgb(0 0 0 / 0.5); }

.sf-dispute-drawer-header { background: #1A365D; }
.dark .sf-dispute-drawer-header { background: #060e20; }

.sf-dispute-drawer-section { background: #F0F3FF; border-radius: 0.5rem; }
.dark .sf-dispute-drawer-section { background: #171f33; }

.sf-dispute-drawer-label { color: #6B7280; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.dark .sf-dispute-drawer-label { color: #bec9c8; }

.sf-dispute-drawer-value { color: #1A365D; }
.dark .sf-dispute-drawer-value { color: #dae2fd; }

/* Notes timeline */
.sf-dispute-note { background: #F9FAFF; border-radius: 0.5rem; }
.dark .sf-dispute-note { background: #131b2e; }

.sf-dispute-note-body { color: #374151; }
.dark .sf-dispute-note-body { color: #dae2fd; }

.sf-dispute-note-meta { color: #9CA3AF; }
.dark .sf-dispute-note-meta { color: #5a7290; }

/* Add note textarea */
.sf-dispute-textarea { background: #F0F3FF; color: #1A365D; border-radius: 0.5rem; border: none; }
.dark .sf-dispute-textarea { background: #131b2e; color: #dae2fd; }
.sf-dispute-textarea:focus { outline: 2px solid #13696A; }

/* Status select dropdown */
.sf-dispute-select { background: #F0F3FF; color: #1A365D; border-radius: 0.5rem; border: none; }
.dark .sf-dispute-select { background: #131b2e; color: #dae2fd; }
.sf-dispute-select:focus { outline: 2px solid #13696A; }

/* ── CAPITAL WORKS PLAN ──────────────────────────────────────────────────── */

/* Fund adequacy widget */
.sf-cw-widget { background: #F0F3FF; border-radius: 0.75rem; }
.dark .sf-cw-widget { background: #171f33; }

.sf-cw-stat-box { background: rgba(255,255,255,0.7); border-radius: 0.5rem; }
.dark .sf-cw-stat-box { background: rgba(45,52,73,0.5); }

.sf-cw-stat-label { color: #6B7280; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.dark .sf-cw-stat-label { color: #bec9c8; }

.sf-cw-stat-value { color: #1A365D; font-family: 'Manrope', sans-serif; font-weight: 700; }
.dark .sf-cw-stat-value { color: #dae2fd; }

.sf-cw-status-adequate { background: rgba(5,150,105,0.1); border-bottom: 2px solid #059669; border-radius: 0.5rem; }
.dark .sf-cw-status-adequate { background: rgba(60,221,199,0.1); border-bottom-color: #3cddc7; }

.sf-cw-status-adequate-text { color: #059669; font-family: 'Manrope', sans-serif; font-weight: 700; }
.dark .sf-cw-status-adequate-text { color: #3cddc7; }

.sf-cw-status-deficit { background: rgba(185,28,28,0.08); border-bottom: 2px solid #B91C1C; border-radius: 0.5rem; }
.dark .sf-cw-status-deficit { background: rgba(255,180,171,0.1); border-bottom-color: #ffb4ab; }

.sf-cw-status-deficit-text { color: #B91C1C; font-family: 'Manrope', sans-serif; font-weight: 700; }
.dark .sf-cw-status-deficit-text { color: #ffb4ab; }

/* Year group header */
.sf-cw-year-header { color: #1A365D; font-family: 'Manrope', sans-serif; font-weight: 800; }
.dark .sf-cw-year-header { color: #dae2fd; }

.sf-cw-year-divider { background: #E5E7EB; }
.dark .sf-cw-year-divider { background: #222a3d; }

.sf-cw-year-bg { background: rgba(249,250,255,0.95); }
.dark .sf-cw-year-bg { background: rgba(11,19,38,0.9); }

/* Slatted row container */
.sf-cw-slab-wrap { background: #E8ECFF; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 8px 24px -6px rgb(0 0 0 / 0.06); }
.dark .sf-cw-slab-wrap { background: #060e20; box-shadow: 0 20px 40px -10px rgb(6 14 32 / 0.4); }

/* Individual row */
.sf-cw-row { background: #FFFFFF; }
.dark .sf-cw-row { background: #171f33; }
.sf-cw-row:hover { background: #F5F7FF; }
.dark .sf-cw-row:hover { background: #222a3d; }

/* Category chip */
.sf-cw-chip { background: rgba(19,105,106,0.1); color: #13696A; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 0.25rem; }
.dark .sf-cw-chip { background: rgba(62,73,93,0.5); color: #bec9c8; }

.sf-cw-row-title { color: #1A365D; font-family: 'Manrope', sans-serif; font-weight: 600; }
.dark .sf-cw-row-title { color: #dae2fd; }

.sf-cw-row-desc { color: #6B7280; }
.dark .sf-cw-row-desc { color: #bec9c8; }

.sf-cw-cost-label { color: #9CA3AF; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.dark .sf-cw-cost-label { color: #bec9c8; }

.sf-cw-cost-est { color: #1A365D; }
.dark .sf-cw-cost-est { color: #dae2fd; }

.sf-cw-cost-actual-good { color: #059669; }
.dark .sf-cw-cost-actual-good { color: #3cddc7; }

.sf-cw-cost-actual-none { color: #9CA3AF; }
.dark .sf-cw-cost-actual-none { color: #5a7290; }

.sf-cw-divider-v { background: rgba(0,0,0,0.08); }
.dark .sf-cw-divider-v { background: rgba(63,73,72,0.3); }

/* Status badges */
.sf-cw-badge-planned { background: rgba(107,114,128,0.12); color: #4B5563; border: 1px solid rgba(107,114,128,0.2); border-radius: 9999px; }
.dark .sf-cw-badge-planned { background: rgba(49,57,77,0.4); color: #bec9c8; border-color: rgba(63,73,72,0.3); }

.sf-cw-badge-inprogress { background: rgba(19,105,106,0.1); color: #0F766E; border: 1px solid rgba(19,105,106,0.2); border-radius: 9999px; }
.dark .sf-cw-badge-inprogress { background: rgba(137,211,212,0.12); color: #89d3d4; border-color: rgba(137,211,212,0.2); }

.sf-cw-badge-completed { background: rgba(5,150,105,0.1); color: #065F46; border: 1px solid rgba(5,150,105,0.2); border-radius: 9999px; }
.dark .sf-cw-badge-completed { background: rgba(60,221,199,0.12); color: #3cddc7; border-color: rgba(60,221,199,0.2); }

.sf-cw-badge-deferred { background: rgba(217,119,6,0.1); color: #92400E; border: 1px solid rgba(217,119,6,0.2); border-radius: 9999px; }
.dark .sf-cw-badge-deferred { background: rgba(217,119,6,0.15); color: #D97706; border-color: rgba(217,119,6,0.3); }

.sf-cw-badge-cancelled { background: rgba(185,28,28,0.08); color: #991B1B; border: 1px solid rgba(185,28,28,0.15); border-radius: 9999px; }
.dark .sf-cw-badge-cancelled { background: rgba(255,180,171,0.1); color: #ffb4ab; border-color: rgba(255,180,171,0.2); }

/* Drawer */
.sf-cw-drawer { background: #FFFFFF; box-shadow: -8px 0 32px -4px rgb(0 0 0 / 0.12); }
.dark .sf-cw-drawer { background: #0f1829; box-shadow: -8px 0 32px -4px rgb(0 0 0 / 0.5); }

.sf-cw-drawer-header { background: #1A365D; }
.dark .sf-cw-drawer-header { background: #060e20; }

.sf-cw-drawer-section { background: #F0F3FF; border-radius: 0.5rem; }
.dark .sf-cw-drawer-section { background: #171f33; }

.sf-cw-drawer-label { color: #6B7280; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.dark .sf-cw-drawer-label { color: #bec9c8; }

.sf-cw-drawer-value { color: #1A365D; }
.dark .sf-cw-drawer-value { color: #dae2fd; }

.sf-cw-input { background: #F0F3FF; color: #1A365D; border: none; border-radius: 0.5rem; }
.dark .sf-cw-input { background: #131b2e; color: #dae2fd; }
.sf-cw-input:focus { outline: 2px solid #13696A; }

.sf-cw-select { background: #F0F3FF; color: #1A365D; border: none; border-radius: 0.5rem; }
.dark .sf-cw-select { background: #131b2e; color: #dae2fd; }
.sf-cw-select:focus { outline: 2px solid #13696A; }

/* ============================================================
   sf-amenity-* — Amenity Booking page adaptive classes
   ============================================================ */

/* Gallery cards */
.sf-amenity-card { background: #FFFFFF; border-radius: 1rem; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform 0.25s; }
.dark .sf-amenity-card { background: #171f33; box-shadow: 0 8px 24px rgba(6,14,32,0.4); }
.sf-amenity-card:hover { transform: translateY(-3px); }

.sf-amenity-img-placeholder { background: #E8ECF8; }
.dark .sf-amenity-img-placeholder { background: #2d3449; }

.sf-amenity-card-body { padding: 1.5rem; }

.sf-amenity-card-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.25rem; color: #1A365D; }
.dark .sf-amenity-card-title { color: #dae2fd; }

.sf-amenity-meta { color: #6B7280; font-size: 0.85rem; }
.dark .sf-amenity-meta { color: #bec9c8; }

/* Approval required badge */
.sf-amenity-approval-badge { background: rgba(6,14,32,0.7); backdrop-filter: blur(8px); color: #3cddc7; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.35rem 0.75rem; border-radius: 0.375rem; display: inline-flex; align-items: center; gap: 0.375rem; }
.dark .sf-amenity-approval-badge { background: rgba(6,14,32,0.85); }

/* Book button */
.sf-amenity-btn-book { background: #1A365D; color: #FFFFFF; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 0.875rem; border-radius: 0.5rem; padding: 0.75rem 1.25rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; transition: opacity 0.2s; }
.sf-amenity-btn-book:hover { opacity: 0.88; }
.dark .sf-amenity-btn-book { background: #13696a; }

/* Statutory info box */
.sf-amenity-info-box { background: #F0F3FF; border-radius: 0.75rem; }
.dark .sf-amenity-info-box { background: #131b2e; }

/* Availability calendar */
.sf-amenity-cal-wrap { background: #F0F3FF; border-radius: 0.75rem; }
.dark .sf-amenity-cal-wrap { background: #131b2e; }

.sf-amenity-cal-grid { background: #E2E8F4; border-radius: 0.5rem; overflow: hidden; }
.dark .sf-amenity-cal-grid { background: #060e20; }

.sf-amenity-cal-header { background: #F8F9FF; color: #6B7280; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.dark .sf-amenity-cal-header { background: #171f33; color: #bec9c8; }
.sf-amenity-cal-header-today { background: #F8F9FF; color: #1A365D; font-weight: 800; }
.dark .sf-amenity-cal-header-today { background: #171f33; color: #89d3d4; }

.sf-amenity-cal-cell { background: #FFFFFF; min-height: 120px; }
.dark .sf-amenity-cal-cell { background: #131b2e; }

.sf-amenity-cal-booking { background: #13696a; color: #FFFFFF; font-size: 0.7rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; margin-bottom: 2px; font-weight: 600; }
.dark .sf-amenity-cal-booking { background: #13696a; }

.sf-amenity-cal-booking-pending { background: #E8ECF8; color: #1A365D; border: 1px solid rgba(26,54,93,0.15); font-size: 0.7rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; margin-bottom: 2px; font-weight: 600; }
.dark .sf-amenity-cal-booking-pending { background: #2d3449; color: #bec9c8; border-color: rgba(63,73,72,0.5); }

/* ── Availability Calendar Controls ─────────────────────────────────────── */
.sf-amenity-cal-filter-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; background: #F0F3FF; color: #6B7280; transition: all 0.15s; white-space: nowrap; }
.sf-amenity-cal-filter-btn:hover { background: #E2E8F4; color: #1A365D; }
.sf-amenity-cal-filter-active { background: #1A365D !important; color: #FFFFFF !important; }
.dark .sf-amenity-cal-filter-btn { background: #1f2b42; color: #bec9c8; }
.dark .sf-amenity-cal-filter-btn:hover { background: #2d3449; color: #89d3d4; }
.dark .sf-amenity-cal-filter-active { background: #13696a !important; color: #FFFFFF !important; }

.sf-amenity-cal-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; background: #F0F3FF; color: #1A365D; transition: background 0.15s; }
.sf-amenity-cal-nav-btn:hover { background: #E2E8F4; }
.dark .sf-amenity-cal-nav-btn { background: #1f2b42; color: #89d3d4; }
.dark .sf-amenity-cal-nav-btn:hover { background: #2d3449; }

.sf-amenity-cal-today-btn { padding: 0.3rem 0.875rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 700; background: #F0F3FF; color: #1A365D; transition: background 0.15s; }
.sf-amenity-cal-today-btn:hover { background: #E2E8F4; }
.dark .sf-amenity-cal-today-btn { background: #1f2b42; color: #89d3d4; }
.dark .sf-amenity-cal-today-btn:hover { background: #2d3449; }

.sf-amenity-cal-today-dot { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: #13696A; color: #FFFFFF; font-size: 0.75rem; font-weight: 800; }
.dark .sf-amenity-cal-today-dot { background: #13696a; }

.sf-amenity-cal-cell-today { background: rgba(19,105,106,0.06) !important; }
.dark .sf-amenity-cal-cell-today { background: rgba(19,105,106,0.15) !important; }

.sf-amenity-cal-pill { display: block; font-size: 0.7rem; line-height: 1.3; border-radius: 0.25rem; padding: 0.25rem 0.5rem; }
.sf-amenity-cal-empty-cell { flex: 1; }

/* Edit amenity button */
.sf-amenity-btn-edit { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem; border-radius: 0.5rem; background: #F0F3FF; color: #1A365D; transition: background 0.15s; }
.sf-amenity-btn-edit:hover { background: #E2E8F4; }
.dark .sf-amenity-btn-edit { background: #1f2b42; color: #89d3d4; }
.dark .sf-amenity-btn-edit:hover { background: #2d3449; }

/* Pending approvals slatted list */
.sf-amenity-slab-wrap { background: #F0F3FF; border-radius: 0.75rem; }
.dark .sf-amenity-slab-wrap { background: #060e20; }

.sf-amenity-row { background: #FFFFFF; transition: background 0.15s; }
.dark .sf-amenity-row { background: #171f33; }
.sf-amenity-row:hover { background: #F8F9FF; }
.dark .sf-amenity-row:hover { background: #222a3d; }

.sf-amenity-icon-box { background: #F0F3FF; border-radius: 0.5rem; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dark .sf-amenity-icon-box { background: #2d3449; }

.sf-amenity-row-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1rem; color: #1A365D; }
.dark .sf-amenity-row-title { color: #dae2fd; }

.sf-amenity-row-meta { color: #6B7280; font-size: 0.8rem; }
.dark .sf-amenity-row-meta { color: #bec9c8; }

/* Status badges */
.sf-amenity-badge-pending    { background: #FEF9C3; color: #92400E; border-radius: 9999px; padding: 0.2rem 0.65rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.dark .sf-amenity-badge-pending { background: rgba(217,119,6,0.2); color: #fcd34d; }
.sf-amenity-badge-approved   { background: #DCFCE7; color: #166534; border-radius: 9999px; padding: 0.2rem 0.65rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.dark .sf-amenity-badge-approved { background: rgba(5,150,105,0.2); color: #6ee7b7; }
.sf-amenity-badge-rejected   { background: #FEE2E2; color: #991B1B; border-radius: 9999px; padding: 0.2rem 0.65rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.dark .sf-amenity-badge-rejected { background: rgba(185,28,28,0.2); color: #fca5a5; }
.sf-amenity-badge-cancelled  { background: #F3F4F6; color: #4B5563; border-radius: 9999px; padding: 0.2rem 0.65rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.dark .sf-amenity-badge-cancelled { background: rgba(75,85,99,0.3); color: #9ca3af; }

/* Approve/Decline buttons */
.sf-amenity-btn-approve { background: #13696a; color: #FFFFFF; font-size: 0.8rem; font-weight: 600; border-radius: 0.375rem; padding: 0.5rem 1.25rem; transition: opacity 0.2s; }
.sf-amenity-btn-approve:hover { opacity: 0.85; }
.sf-amenity-btn-decline { color: #B91C1C; font-size: 0.8rem; font-weight: 600; border-radius: 0.375rem; padding: 0.5rem 0.875rem; transition: background 0.2s; }
.sf-amenity-btn-decline:hover { background: rgba(185,28,28,0.08); }
.dark .sf-amenity-btn-decline { color: #fca5a5; }
.dark .sf-amenity-btn-decline:hover { background: rgba(185,28,28,0.15); }

/* Booking form / drawer */
.sf-amenity-drawer { background: #FFFFFF; box-shadow: -4px 0 32px rgba(0,0,0,0.12); }
.dark .sf-amenity-drawer { background: #131b2e; box-shadow: -4px 0 32px rgba(0,0,0,0.5); }
.sf-amenity-drawer-header { background: #1A365D; }
.dark .sf-amenity-drawer-header { background: #0b1326; border-bottom: 1px solid #2d3449; }
.sf-amenity-drawer-section { background: #F0F3FF; }
.dark .sf-amenity-drawer-section { background: #171f33; }
.sf-amenity-drawer-label { color: #6B7280; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.dark .sf-amenity-drawer-label { color: #bec9c8; }
.sf-amenity-drawer-value { color: #1A365D; font-size: 0.875rem; }
.dark .sf-amenity-drawer-value { color: #dae2fd; }

.sf-amenity-input { background: #F0F3FF; color: #1A365D; border: none; }
.dark .sf-amenity-input { background: #0b1326; color: #dae2fd; }
.sf-amenity-input:focus { outline: 2px solid #13696A; }
.sf-amenity-select { background: #F0F3FF; color: #1A365D; border: none; border-radius: 0.5rem; }
.dark .sf-amenity-select { background: #0b1326; color: #dae2fd; }
.sf-amenity-select:focus { outline: 2px solid #13696A; }

/* My bookings tab divider */
.sf-amenity-tab { font-size: 0.8rem; font-weight: 700; padding: 0.5rem 0; color: #6B7280; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.dark .sf-amenity-tab { color: #bec9c8; }
.sf-amenity-tab-active { color: #1A365D; border-bottom-color: #13696A; }
.dark .sf-amenity-tab-active { color: #89d3d4; }

/* ── BUDGET PAGE ─────────────────────────────────────────────── */

/* Stat label inside fund cards */
.sf-budget-stat-label { color: var(--sb-muted); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }

/* Stat value inside fund cards */
.sf-budget-stat-value { color: var(--sb-heading); font-family: 'Manrope', sans-serif; font-size: 1.5rem; font-weight: 800; }

/* Levy impact banner — always navy background */
.sf-budget-levy { background: var(--sb-navy); }
.dark .sf-budget-levy { background: #060e20; }

/* Stat chip inside the levy banner */
.sf-budget-levy-stat { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(8px); }

/* Stat chip label */
.sf-budget-levy-stat-label { color: rgba(255,255,255,0.6); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }

/* Stat chip value — teal accent on navy */
.sf-budget-levy-stat-value { color: var(--sb-nav-teal); font-family: 'Manrope', sans-serif; font-size: 1.25rem; font-weight: 800; }

/* -- PRINT STYLES ------------------------------------------------- */
/* ── Certificate list table row hover ───────────────────────────── */
.cert-row:hover { filter: brightness(0.94); }
.dark .cert-row:hover { filter: brightness(1.12); }

@media print {
    nav, aside, header, footer, .bottom-nav, [data-noprint], .no-print, [data-noprint] * { display: none !important; }
    body { margin: 0 !important; padding: 0 !important; background: #fff !important; color: #000 !important; }
    main { margin-left: 0 !important; padding: 0 !important; }
    body > * { display: none !important; }
    #app { display: block !important; }
    #print-region { display: block !important; position: absolute !important; inset: 0 !important; background: #fff !important; color: #000 !important; padding: 2cm !important; font-family: 'Inter', sans-serif !important; font-size: 11pt !important; }
    #print-region * { display: revert !important; visibility: visible !important; --sb-card:#ffffff !important; --sb-inner:#f0f3ff !important; --sb-text:#111827 !important; --sb-muted:#6b7280 !important; --sb-heading:#1A365D !important; --sb-border:#e5e7eb !important; }
    .ledger-group { page-break-inside: avoid; }
}