/* Unified Filament surface normalization across platform + tenant panels */
/* NOTE: --gray-N vars are oklch() values in Filament v5 — do NOT wrap in rgb() */
.fi-body {
    --u-bg: var(--gray-950);
    --u-card: var(--gray-800);
    --u-surface: var(--gray-700);
    --u-ink: var(--gray-50);
    --u-muted: var(--gray-300);
    --u-line: rgba(255, 255, 255, 0.12);
}

html:not(.dark) .fi-body {
    --u-bg: var(--gray-50);
    --u-card: var(--gray-100);
    --u-surface: var(--gray-50);
    --u-ink: var(--gray-900);
    --u-muted: var(--gray-600);
    --u-line: rgba(0, 0, 0, 0.10);
}

/* ── SchoolOS custom dashboard component classes ────────────────────────── */
/* Filament does not know about these — we must style them explicitly */
.so-kpi-card,
.so-panel,
.so-device-card,
.ao-kpi-card,
.ao-panel,
.rp-card,
.pm-chip-panel,
.pm-table-wrap,
.pm-footer,
.pm-role-card {
    background: var(--u-card) !important;
    border-color: var(--u-line) !important;
    color: var(--u-ink) !important;
}

.so-list-row,
.so-chip,
.so-textarea,
.so-response,
.ao-list-item,
.rp-item,
.pm-row-odd,
.pm-row-odd .pm-td-perm,
.pm-chip-off,
.pm-btn-ghost,
.pm-search {
    background: var(--u-surface) !important;
    border-color: var(--u-line) !important;
    color: var(--u-ink) !important;
}

.so-kpi-label,
.so-kpi-meta,
.so-head-sub,
.so-list-row .so-sub,
.so-list-row .so-time,
.so-progress-head,
.ao-kpi-label,
.ao-kpi-meta,
.ao-empty,
.ao-progress-head,
.rp-label,
.rp-sub,
.rp-legend,
.pm-legend,
.pm-chip-sub,
.pm-perm-code,
.pm-role-card-count {
    color: var(--u-muted) !important;
}

.so-progress-track,
.ao-progress-track,
.rp-progress,
.pm-progress,
.pm-progress-mini,
.pm-check-btn,
.pm-th-role,
.pm-th-perm,
.pm-group-td,
.pm-td-check,
.pm-td-perm {
    border-color: var(--u-line) !important;
}

/* Tenant panel: hide misplaced desktop sidebar collapse arrow near the brand logo */
.fi-sidebar-header .fi-icon-btn:first-of-type {
    display: none !important;
}

/* ── Toggle switches (Active, Two-Factor Auth, …) ─────────────────────────
   Filament paints the toggle TRACK from a --bg custom-property chain that
   this build never resolves, so switches rendered with a transparent track:
   only the white knob showed (or nothing at all), and on/off were visually
   identical. Pin explicit, self-contained styling so state is unmistakable —
   grey track = OFF, green track + knob slid right = ON. */
.fi-toggle {
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0;
    width: 2.75rem !important;
    height: 1.5rem !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background-color: #d1d5db !important;   /* OFF (light) */
    border: 1px solid rgba(0, 0, 0, .12) !important;
    cursor: pointer;
    transition: background-color .2s ease;
}
.dark .fi-toggle {
    background-color: #4b5563 !important;   /* OFF (dark) */
    border-color: rgba(255, 255, 255, .16) !important;
}
.fi-toggle.fi-toggle-on,
.dark .fi-toggle.fi-toggle-on {
    background-color: var(--primary-500, #0bbf55) !important;   /* ON */
    border-color: color-mix(in srgb, var(--primary-500, #0bbf55) 60%, #000) !important;
}
/* Knob */
.fi-toggle > :first-child {
    width: 1.125rem !important;
    height: 1.125rem !important;
    margin-inline-start: 3px;
    background-color: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important;
    translate: 0 0 !important;
    transition: translate .2s ease;
}
.fi-toggle.fi-toggle-on > :first-child {
    translate: 1.15rem 0 !important;
}
.fi-toggle:focus-visible {
    outline: 2px solid var(--primary-500, #0bbf55) !important;
    outline-offset: 2px;
}
/* When a toggle is ON, Filament also renders a static stand-in copy marked
   .fi-hidden (an anti-flash placeholder). The display:inline-flex !important
   above was overriding Filament's .fi-hidden{display:none}, so BOTH copies
   showed — two switches per field. Keep the stand-in hidden. */
.fi-toggle.fi-hidden {
    display: none !important;
}