/* ============================================================
   Jadawel — Modern Admin Theme (v1)
   Targets Filament v3 default classes (.fi-*).
   Loaded after Filament core CSS so selectors win without !important
   where possible. Uses CSS variables for easy tuning.
   ============================================================ */

:root {
    --jd-primary-50:  #eef2ff;
    --jd-primary-100: #e0e7ff;
    --jd-primary-200: #c7d2fe;
    --jd-primary-400: #818cf8;
    --jd-primary-500: #6366f1;
    --jd-primary-600: #4f46e5;
    --jd-primary-700: #4338ca;

    --jd-bg:          #f5f7fb;
    --jd-surface:     #ffffff;
    --jd-surface-2:   #fafbfd;
    --jd-border:      #e3e8ef;
    --jd-border-soft: #eef2f7;
    --jd-text:        #0f172a;
    --jd-text-muted:  #64748b;
    --jd-text-faint:  #94a3b8;

    --jd-radius-sm: 0.5rem;
    --jd-radius:    0.75rem;
    --jd-radius-lg: 1rem;

    --jd-shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
    --jd-shadow:    0 4px 16px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --jd-shadow-lg: 0 14px 38px rgba(15,23,42,0.10), 0 4px 10px rgba(15,23,42,0.05);

    --jd-sidebar-w: 17rem;
}

/* ── Base ──────────────────────────────────────────────────── */
html, body { background: var(--jd-bg); }
body, .fi-body { font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--jd-text); }

/* ── Top bar ───────────────────────────────────────────────── */
.fi-topbar {
    background: rgba(255,255,255,0.85) !important;
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--jd-border) !important;
    box-shadow: 0 1px 0 rgba(15,23,42,0.03);
}
.fi-topbar nav { padding-block: 0.4rem; }
.fi-topbar .fi-icon-btn,
.fi-topbar button[type="button"] {
    border-radius: var(--jd-radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
}
.fi-topbar .fi-icon-btn:hover { background: var(--jd-primary-50); color: var(--jd-primary-700); }

/* Global search input in topbar */
.fi-global-search-field input,
.fi-global-search-input {
    border-radius: 9999px !important;
    border: 1px solid var(--jd-border) !important;
    background: #f8fafc !important;
    transition: all 0.18s ease;
}
.fi-global-search-field input:focus,
.fi-global-search-input:focus {
    background: #ffffff !important;
    border-color: var(--jd-primary-400) !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.12) !important;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.fi-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%) !important;
    border-inline-end: 1px solid var(--jd-border) !important;
    box-shadow: inset -1px 0 0 rgba(15,23,42,0.02);
}
.fi-sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid var(--jd-border-soft) !important;
    padding: 1rem 1.1rem !important;
}
.fi-sidebar-header .fi-logo,
.fi-sidebar-header h1,
.fi-sidebar-header .fi-brand {
    font-weight: 800;
    color: var(--jd-text);
    letter-spacing: 0.01em;
}

/* Sidebar group label */
.fi-sidebar-group-label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--jd-text-faint) !important;
    padding: 0.75rem 0.75rem 0.4rem !important;
}

/* Sidebar nav items */
.fi-sidebar-item-button {
    border-radius: 0.6rem !important;
    margin: 0.1rem 0.4rem !important;
    padding: 0.55rem 0.7rem !important;
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.fi-sidebar-item-button:hover {
    background: var(--jd-primary-50) !important;
    color: var(--jd-primary-700) !important;
}
.fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar-item-button svg {
    width: 1.15rem !important;
    height: 1.15rem !important;
    color: #94a3b8 !important;
    transition: color 0.15s ease;
}
.fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-item-button:hover svg { color: var(--jd-primary-600) !important; }

/* Active sidebar item */
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: linear-gradient(135deg, var(--jd-primary-600) 0%, var(--jd-primary-500) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(99,102,241,0.30) !important;
}
.fi-sidebar-item-active .fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-button svg,
.fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-button svg { color: #ffffff !important; }

/* Sidebar collapsible group toggle */
.fi-sidebar-group-collapsible button {
    padding: 0.5rem 0.7rem !important;
    border-radius: 0.5rem !important;
}

/* Sidebar footer holds the desktop-app link rendered as a standard
   <x-filament-panels::sidebar.item>. Only keep the footer from being
   stretched by long labels (defensive min-width:0 / overflow clip). */
.fi-sidebar > :last-child {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* ── Desktop-app promo toast (bottom-left, quiet, one-time) ── */
.jd-desktop-toast {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 40;                  /* above content, below modals/dropdowns */
    width: 400px;
    max-width: calc(100vw - 2rem);
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.95rem 1.05rem;
    background: #ffffff;
    border: 1px solid #e9d5ff;    /* light purple border */
    border-radius: 0.85rem;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.jd-desktop-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* Keep the toast out of the way of the sidebar (right side in RTL) on small screens */
@media (max-width: 1023px) {
    .jd-desktop-toast { left: 0.75rem; bottom: 0.75rem; }
}

.jd-toast-icon {
    flex-shrink: 0;
    width: 2.7rem;
    height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f3ff;
    border: 1px solid #ede9fe;
    border-radius: 0.65rem;
}
.jd-toast-body { min-width: 0; flex: 1; }
.jd-toast-title { font-weight: 800; font-size: 0.95rem; color: #0f172a; line-height: 1.3; }
.jd-toast-desc { font-size: 0.8rem; color: #64748b; margin-top: 0.15rem; line-height: 1.45; }

.jd-toast-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    padding: 0.42rem 0.8rem;
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.15s ease, transform 0.15s ease;
}
.jd-toast-btn:hover { background: #4338ca !important; transform: translateY(-1px); }

.jd-toast-close {
    position: absolute;
    top: 0.3rem;
    inset-inline-end: 0.4rem;     /* top-left in RTL */
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.45rem;
    text-align: center;
    border: 0;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.05rem;
    border-radius: 0.4rem;
    transition: background 0.15s, color 0.15s;
}
.jd-toast-close:hover { background: #f1f5f9; color: #4f46e5; }

/* Dark mode */
.dark .jd-desktop-toast {
    background: #1f2937;
    border-color: #3730a3;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.dark .jd-toast-title { color: #f8fafc; }
.dark .jd-toast-desc { color: #cbd5e1; }
.dark .jd-toast-icon { background: #312e81; border-color: #3730a3; }
.dark .jd-toast-close { color: #94a3b8; }
.dark .jd-toast-close:hover { background: rgba(255, 255, 255, 0.08); color: #c7d2fe; }
/* Tint the monitor + arrow with the item's hover color for cohesion */
.desktop-app-link:hover .jd-desktop-badge { color: inherit; }

/* ── Main content area ────────────────────────────────────── */
.fi-main {
    background: var(--jd-bg) !important;
    min-height: calc(100vh - 4rem);
    padding-block: 1.25rem !important;
}
/* Keep the sticky topbar flush to the very top of the viewport.
   (The topbar is the first child of .fi-main-ctn, so any block padding
   here would push it down and leave an empty band above it.) */
.fi-main-ctn { padding-block: 0 !important; }
.fi-page { padding-inline: 0 !important; }

/* ── Page header ──────────────────────────────────────────── */
.fi-header {
    background: var(--jd-surface) !important;
    border: 1px solid var(--jd-border) !important;
    border-radius: var(--jd-radius-lg) !important;
    padding: 1rem 1.25rem !important;
    box-shadow: var(--jd-shadow-sm);
    margin-bottom: 1rem !important;
}
.fi-header-heading,
.fi-header h1 {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: var(--jd-text) !important;
    letter-spacing: -0.01em;
}
.fi-header-subheading,
.fi-header-heading + p {
    color: var(--jd-text-muted) !important;
    font-size: 0.875rem !important;
}
.fi-breadcrumbs {
    margin-bottom: 0.4rem;
    font-size: 0.78rem !important;
}
.fi-breadcrumbs a { color: var(--jd-text-muted) !important; }
.fi-breadcrumbs a:hover { color: var(--jd-primary-600) !important; }

/* ── Cards / Sections ─────────────────────────────────────── */
.fi-section,
.fi-fo-section {
    background: var(--jd-surface) !important;
    border: 1px solid var(--jd-border) !important;
    border-radius: var(--jd-radius-lg) !important;
    box-shadow: var(--jd-shadow-sm) !important;
    transition: box-shadow 0.2s ease;
}
.fi-section:hover,
.fi-fo-section:hover { box-shadow: var(--jd-shadow); }
.fi-section-header,
.fi-fo-section-header {
    padding: 0.85rem 1.1rem !important;
    border-bottom: 1px solid var(--jd-border-soft) !important;
}
.fi-section-header-heading,
.fi-fo-section-header-heading {
    font-weight: 700 !important;
    color: var(--jd-text) !important;
}
.fi-section-content,
.fi-fo-section-content { padding: 1rem 1.1rem !important; }

/* ── Buttons ──────────────────────────────────────────────── */
.fi-btn {
    border-radius: 0.6rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.fi-btn:not(:disabled):hover { transform: translateY(-1px); }
.fi-btn:not(:disabled):active { transform: translateY(0); }

.fi-btn-color-primary {
    background: linear-gradient(135deg, var(--jd-primary-600) 0%, var(--jd-primary-500) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(99,102,241,0.30) !important;
    border: none !important;
}
.fi-btn-color-primary:not(:disabled):hover {
    box-shadow: 0 6px 22px rgba(99,102,241,0.42) !important;
}

.fi-btn-color-gray {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid var(--jd-border) !important;
}
.fi-btn-color-gray:not(:disabled):hover { background: var(--jd-bg) !important; }

.fi-btn-color-danger {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(220,38,38,0.25) !important;
    border: none !important;
}
.fi-btn-color-success {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16,185,129,0.25) !important;
    border: none !important;
}
.fi-btn-color-warning {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(217,119,6,0.25) !important;
    border: none !important;
}

/* Icon-only buttons */
.fi-icon-btn {
    border-radius: 0.55rem !important;
    transition: background 0.15s ease, color 0.15s ease;
}
.fi-icon-btn:hover { background: var(--jd-primary-50); }

/* ── Inputs / Selects / Textareas ─────────────────────────── */
.fi-input,
.fi-input-wrp input,
.fi-input-wrp select,
.fi-input-wrp textarea {
    border-radius: 0.6rem !important;
    border-color: var(--jd-border) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-size: 0.875rem !important;
}
.fi-input:focus,
.fi-input-wrp:focus-within input,
.fi-input-wrp:focus-within select,
.fi-input-wrp:focus-within textarea,
.fi-input-wrp:focus-within {
    border-color: var(--jd-primary-400) !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.12) !important;
}

/* Field labels */
.fi-fo-field-wrp-label,
.fi-fo-field-wrp label {
    font-weight: 700 !important;
    color: #334155 !important;
    font-size: 0.8125rem !important;
}

/* ── Tables (Filament resource tables) ───────────────────── */
.fi-ta {
    background: var(--jd-surface) !important;
    border: 1px solid var(--jd-border) !important;
    border-radius: var(--jd-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--jd-shadow-sm);
}
.fi-ta-header { padding: 0.85rem 1.1rem !important; border-bottom: 1px solid var(--jd-border-soft) !important; }
.fi-ta-header-heading { font-weight: 800 !important; color: var(--jd-text) !important; }
.fi-ta-content { padding: 0 !important; }

.fi-ta-table thead {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
}
.fi-ta-table thead th {
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.02em;
    padding: 0.7rem 0.9rem !important;
    border-bottom: 1px solid var(--jd-border) !important;
}
.fi-ta-table tbody tr {
    transition: background 0.15s ease;
    border-top: 1px solid var(--jd-border-soft) !important;
}
.fi-ta-table tbody tr:hover { background: #f8fafc !important; }
.fi-ta-table tbody td {
    padding: 0.7rem 0.9rem !important;
    font-size: 0.875rem;
    color: #334155;
}

/* Table filters / search bar */
.fi-ta-filters,
.fi-ta-actions { padding: 0.7rem 1.1rem !important; }

/* Pagination */
.fi-pagination { padding: 0.6rem 1rem !important; border-top: 1px solid var(--jd-border-soft) !important; }

/* ── Badges ───────────────────────────────────────────────── */
.fi-badge {
    border-radius: 0.5rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    padding: 0.18rem 0.55rem !important;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.fi-tabs {
    background: var(--jd-surface) !important;
    border: 1px solid var(--jd-border) !important;
    border-radius: var(--jd-radius) !important;
    padding: 0.25rem !important;
}
.fi-tabs-item {
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    color: var(--jd-text-muted) !important;
    transition: all 0.15s ease;
}
.fi-tabs-item:hover { background: #f8fafc !important; color: var(--jd-text) !important; }
.fi-tabs-item.fi-active {
    background: linear-gradient(135deg, var(--jd-primary-600), var(--jd-primary-500)) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(99,102,241,0.30) !important;
}

/* ── Modals ───────────────────────────────────────────────── */
.fi-modal-window {
    border-radius: var(--jd-radius-lg) !important;
    box-shadow: var(--jd-shadow-lg) !important;
    border: 1px solid var(--jd-border) !important;
}
.fi-modal-header { padding: 1rem 1.25rem !important; border-bottom: 1px solid var(--jd-border-soft); }
.fi-modal-heading { font-weight: 800 !important; color: var(--jd-text) !important; }
.fi-modal-footer { padding: 0.85rem 1.25rem !important; border-top: 1px solid var(--jd-border-soft); }

/* ── Notifications ────────────────────────────────────────── */
.fi-no-notification {
    border-radius: var(--jd-radius) !important;
    box-shadow: var(--jd-shadow-lg) !important;
    border: 1px solid var(--jd-border) !important;
}

/* ── Dropdown menus ───────────────────────────────────────── */
.fi-dropdown-panel {
    border-radius: var(--jd-radius) !important;
    box-shadow: var(--jd-shadow-lg) !important;
    border: 1px solid var(--jd-border) !important;
    padding: 0.3rem !important;
}
.fi-dropdown-list-item {
    border-radius: 0.45rem !important;
    transition: background 0.15s ease, color 0.15s ease;
}
.fi-dropdown-list-item:hover { background: var(--jd-primary-50) !important; color: var(--jd-primary-700) !important; }

/* ── User menu avatar trigger ─────────────────────────────── */
.fi-topbar .fi-user-menu-trigger,
.fi-topbar .fi-avatar {
    box-shadow: 0 0 0 2px var(--jd-surface), 0 0 0 3px var(--jd-primary-200);
}

/* ── Scrollbars (Webkit) ──────────────────────────────────── */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: #cbd5e1; border-radius: 8px; border: 2px solid var(--jd-bg);
}
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Login / Auth pages ───────────────────────────────────── */
.fi-simple-layout {
    background: radial-gradient(circle at 25% 20%, #eef2ff 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, #ddd6fe 0%, transparent 45%),
                #f5f7fb !important;
}
.fi-simple-main {
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--jd-border) !important;
    border-radius: var(--jd-radius-lg) !important;
    box-shadow: var(--jd-shadow-lg) !important;
}

/* ── Dark mode adjustments ────────────────────────────────── */
/* Refined dark palette: warmer slate tones instead of harsh near-black */
.dark {
    --jd-bg:          #1a1f2e;   /* page background — softer than #0f172a */
    --jd-surface:     #252b3d;   /* cards/sections — lifted from #1e293b */
    --jd-surface-2:   #1f2538;   /* secondary surface — between bg & surface */
    --jd-surface-3:   #2d3349;   /* inputs & elevated controls */
    --jd-border:      rgba(148,163,184,0.18);
    --jd-border-soft: rgba(148,163,184,0.10);
    --jd-text:        #e5e7eb;
    --jd-text-muted:  #94a3b8;
    --jd-text-faint:  #64748b;
}
.dark html, .dark body, .dark .fi-body { background: var(--jd-bg) !important; color: var(--jd-text); }
.dark .fi-topbar {
    background: rgba(37,43,61,0.85) !important;
    border-bottom-color: var(--jd-border) !important;
}
.dark .fi-sidebar {
    background: linear-gradient(180deg, var(--jd-surface) 0%, var(--jd-surface-2) 100%) !important;
    border-inline-end-color: var(--jd-border) !important;
}
.dark .fi-sidebar-header { border-bottom-color: var(--jd-border-soft) !important; }
.dark .fi-sidebar-header .fi-logo,
.dark .fi-sidebar-header h1,
.dark .fi-sidebar-header .fi-brand { color: var(--jd-text) !important; }
.dark .fi-sidebar-group-label { color: #94a3b8 !important; }
.dark .fi-sidebar-item-button { color: #cbd5e1 !important; }
.dark .fi-sidebar-item-button:hover { background: rgba(99,102,241,0.18) !important; color: #c7d2fe !important; }
.dark .fi-sidebar-item-button .fi-sidebar-item-icon,
.dark .fi-sidebar-item-button svg { color: #94a3b8 !important; }
.dark .fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.dark .fi-sidebar-item-button:hover svg { color: #c7d2fe !important; }

.dark .fi-main { background: var(--jd-bg) !important; }

/* Page header card in dark */
.dark .fi-header {
    background: var(--jd-surface) !important;
    border-color: var(--jd-border) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
}
.dark .fi-header-heading,
.dark .fi-header h1 { color: var(--jd-text) !important; }
.dark .fi-header-subheading,
.dark .fi-header-heading + p { color: var(--jd-text-muted) !important; }

/* Sections / cards in dark */
.dark .fi-section,
.dark .fi-fo-section {
    background: var(--jd-surface) !important;
    border-color: var(--jd-border) !important;
}
.dark .fi-section-header,
.dark .fi-fo-section-header { border-bottom-color: var(--jd-border-soft) !important; }
.dark .fi-section-header-heading,
.dark .fi-fo-section-header-heading { color: var(--jd-text) !important; }

/* Tables in dark */
.dark .fi-ta {
    background: var(--jd-surface) !important;
    border-color: var(--jd-border) !important;
}
.dark .fi-ta-header { border-bottom-color: var(--jd-border-soft) !important; }
.dark .fi-ta-header-heading { color: var(--jd-text) !important; }
.dark .fi-ta-table thead {
    background: linear-gradient(180deg, var(--jd-surface-3) 0%, var(--jd-surface-2) 100%) !important;
}
.dark .fi-ta-table thead th { color: #cbd5e1 !important; border-bottom-color: var(--jd-border) !important; }
.dark .fi-ta-table tbody tr { border-top-color: var(--jd-border-soft) !important; }
.dark .fi-ta-table tbody tr:hover { background: rgba(99,102,241,0.08) !important; }
.dark .fi-ta-table tbody td { color: #cbd5e1 !important; }

/* Inputs / selects / textarea in dark */
.dark .fi-input,
.dark .fi-input-wrp input,
.dark .fi-input-wrp select,
.dark .fi-input-wrp textarea,
.dark select,
.dark input[type="text"],
.dark input[type="number"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="search"],
.dark input[type="date"],
.dark textarea {
    background-color: var(--jd-surface-3) !important;
    color: var(--jd-text) !important;
    border-color: var(--jd-border) !important;
}
.dark .fi-input-wrp { background-color: var(--jd-surface-3) !important; border-color: var(--jd-border) !important; }
.dark ::placeholder { color: #64748b !important; }
.dark .fi-fo-field-wrp-label,
.dark .fi-fo-field-wrp label { color: #cbd5e1 !important; }

/* Generic gray buttons in dark */
.dark .fi-btn-color-gray {
    background: var(--jd-surface-3) !important;
    color: #cbd5e1 !important;
    border-color: var(--jd-border) !important;
}
.dark .fi-btn-color-gray:not(:disabled):hover { background: #363d54 !important; }

/* Tabs in dark */
.dark .fi-tabs { background: var(--jd-surface) !important; border-color: var(--jd-border) !important; }
.dark .fi-tabs-item { color: #94a3b8 !important; }
.dark .fi-tabs-item:hover { background: rgba(99,102,241,0.10) !important; color: var(--jd-text) !important; }

/* Modals / dropdowns / notifications in dark */
.dark .fi-modal-window,
.dark .fi-no-notification,
.dark .fi-dropdown-panel {
    background: var(--jd-surface) !important;
    border-color: var(--jd-border) !important;
}
.dark .fi-modal-header,
.dark .fi-modal-footer { border-color: var(--jd-border-soft) !important; }
.dark .fi-modal-heading { color: var(--jd-text) !important; }
.dark .fi-dropdown-list-item { color: #cbd5e1 !important; }
.dark .fi-dropdown-list-item:hover { background: rgba(99,102,241,0.15) !important; color: #e0e7ff !important; }

/* Login / Auth pages in dark */
.dark .fi-simple-layout {
    background: radial-gradient(circle at 25% 20%, rgba(99,102,241,0.18) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(124,58,237,0.18) 0%, transparent 45%),
                var(--jd-bg) !important;
}
.dark .fi-simple-main {
    background: rgba(37,43,61,0.85) !important;
    border-color: var(--jd-border) !important;
}

/* Scrollbars in dark */
.dark *::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.35);
    border-color: var(--jd-bg);
}
.dark *::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.55); }

/* ─── Page-level overrides for dark (weekly-schedule etc.) ───
   These pages set inline styles like background:#ffffff!important.
   We retarget them by class so the dark theme stays consistent. */
.dark .ws-stat-card,
.dark [class~="ws-stat-card"] {
    background: var(--jd-surface) !important;
    border-color: var(--jd-border) !important;
}
.dark .ws-stat-card div[style*="color:#0f172a"],
.dark .ws-stat-card div[style*="color:#0F172A"] { color: var(--jd-text) !important; }
.dark .ws-stat-card div[style*="color:#64748b"] { color: var(--jd-text-muted) !important; }

/* Schedule grid native cells/headers/borders override for dark */
.dark table.w-full.border-separate th,
.dark table.w-full.border-separate td,
.dark table.w-full.border-collapse th,
.dark table.w-full.border-collapse td {
    border-color: rgba(148,163,184,0.18) !important;
}

/* ════════════════════════════════════════════════════════════
   DARK MODE — universal inline-style overrides for ALL pages
   These selectors hit common color patterns embedded in
   "style=..." attributes across teacher-assignments, classes,
   days, generate-schedule, backup-seed, full-schedule,
   swap-proposal-visualization, weekly-schedule.
   ════════════════════════════════════════════════════════════ */

/* ── White / off-white backgrounds → surface ───────────────── */
.dark [style*="background:#ffffff"],
.dark [style*="background: #ffffff"],
.dark [style*="background:#fff;"],
.dark [style*="background: #fff;"],
.dark [style*="background:#fff\""],
.dark [style*="background: #fff\""],
.dark [style*="background:#FFFFFF"],
.dark [style*="background-color:#ffffff"],
.dark [style*="background-color: #ffffff"],
.dark [style*="background-color:white"],
.dark [style*="background-color: white"],
.dark [style*="background:white"],
.dark [style*="background: white"] {
    background-color: var(--jd-surface) !important;
}

.dark [style*="background:#fafbfc"],
.dark [style*="background: #fafbfc"],
.dark [style*="background:#fafbfd"],
.dark [style*="background:#f8fafc"],
.dark [style*="background: #f8fafc"],
.dark [style*="background:#f9fafb"],
.dark [style*="background: #f9fafb"],
.dark [style*="background:#f5f7fb"],
.dark [style*="background:#f1f5f9"],
.dark [style*="background:#f3f4f6"],
.dark [style*="background:#fafafa"],
.dark [style*="background:#edf2f7"] {
    background-color: var(--jd-surface-2) !important;
}

/* ── Status (info / success / warn / danger) tinted blocks ── */
/* Info — blues */
.dark [style*="background:#eff6ff"],
.dark [style*="background: #eff6ff"],
.dark [style*="background:#ebf8ff"],
.dark [style*="background:#dbeafe"],
.dark [style*="background:#e0f2fe"],
.dark [style*="background:#f0f9ff"],
.dark [style*="background: #f0f9ff"] {
    background-color: rgba(59,130,246,0.18) !important;
    border-color: rgba(59,130,246,0.30) !important;
}
/* Indigo / Primary tints */
.dark [style*="background:#eef2ff"],
.dark [style*="background: #eef2ff"],
.dark [style*="background:#e0e7ff"] {
    background-color: rgba(99,102,241,0.20) !important;
    border-color: rgba(99,102,241,0.30) !important;
}
/* Violet / purple tints */
.dark [style*="background:#ede9fe"],
.dark [style*="background: #ede9fe"],
.dark [style*="background:#f5f3ff"],
.dark [style*="background: #f5f3ff"],
.dark [style*="background:#fdf4ff"],
.dark [style*="background: #fdf4ff"] {
    background-color: rgba(139,92,246,0.20) !important;
    border-color: rgba(139,92,246,0.30) !important;
}
/* Pink / rose tints */
.dark [style*="background:#fdf2f8"],
.dark [style*="background: #fdf2f8"],
.dark [style*="background:#fff1f2"],
.dark [style*="background: #fff1f2"],
.dark [style*="background:#fce7f3"] {
    background-color: rgba(236,72,153,0.18) !important;
    border-color: rgba(236,72,153,0.30) !important;
}
/* Success — greens */
.dark [style*="background:#ecfdf5"],
.dark [style*="background:#f0fdf4"],
.dark [style*="background: #f0fdf4"],
.dark [style*="background:#f0fdfa"],
.dark [style*="background:#d1fae5"],
.dark [style*="background:#dcfce7"],
.dark [style*="background:#ccfbf1"],
.dark [style*="background:#c6f6d5"] {
    background-color: rgba(16,185,129,0.18) !important;
    border-color: rgba(16,185,129,0.30) !important;
}
/* Warning — ambers / oranges */
.dark [style*="background:#fffbeb"],
.dark [style*="background: #fffbeb"],
.dark [style*="background:#fff7ed"],
.dark [style*="background:#ffedd5"],
.dark [style*="background:#fef3c7"],
.dark [style*="background:#fef9c3"],
.dark [style*="background:#fefce8"],
.dark [style*="background: #fefce8"],
.dark [style*="background:#fed7aa"] {
    background-color: rgba(245,158,11,0.18) !important;
    border-color: rgba(245,158,11,0.30) !important;
}
/* Danger — reds */
.dark [style*="background:#fef2f2"],
.dark [style*="background: #fef2f2"],
.dark [style*="background:#fee2e2"],
.dark [style*="background:#fed7d7"] {
    background-color: rgba(220,38,38,0.18) !important;
    border-color: rgba(220,38,38,0.30) !important;
}

/* ── Light gray / neutral subtle backgrounds ─────────────── */
.dark [style*="background:#e2e8f0"],
.dark [style*="background: #e2e8f0"],
.dark [style*="background:#e5e7eb"],
.dark [style*="background:#cbd5e1"] {
    background-color: rgba(148,163,184,0.15) !important;
}

/* ── Dark text colors used on light surfaces → light text ── */
.dark [style*="color:#0f172a"],
.dark [style*="color: #0f172a"],
.dark [style*="color:#1e293b"],
.dark [style*="color: #1e293b"],
.dark [style*="color:#111827"],
.dark [style*="color: #111827"],
.dark [style*="color:#1f2937"],
.dark [style*="color: #1f2937"] {
    color: #f1f5f9 !important;
}
.dark [style*="color:#334155"],
.dark [style*="color: #334155"],
.dark [style*="color:#374151"],
.dark [style*="color: #374151"],
.dark [style*="color:#4b5563"],
.dark [style*="color: #4b5563"],
.dark [style*="color:#475569"],
.dark [style*="color: #475569"],
.dark [style*="color:#4a5568"] {
    color: #cbd5e1 !important;
}
.dark [style*="color:#64748b"],
.dark [style*="color: #64748b"],
.dark [style*="color:#6b7280"],
.dark [style*="color: #6b7280"],
.dark [style*="color:#9ca3af"],
.dark [style*="color: #9ca3af"],
.dark [style*="color:#94a3b8"],
.dark [style*="color: #94a3b8"] {
    color: #94a3b8 !important;
}

/* Status text on tinted blocks should stay readable */
.dark [style*="color:#dc2626"],
.dark [style*="color: #dc2626"],
.dark [style*="color:#b91c1c"],
.dark [style*="color: #b91c1c"],
.dark [style*="color:#991b1b"],
.dark [style*="color:#9b2c2c"],
.dark [style*="color:#e53e3e"],
.dark [style*="color:#ef4444"] { color: #fca5a5 !important; }

.dark [style*="color:#9f1239"],
.dark [style*="color:#9d174d"],
.dark [style*="color:#be185d"],
.dark [style*="color:#831843"] { color: #f9a8d4 !important; }

.dark [style*="color:#b45309"],
.dark [style*="color:#92400e"],
.dark [style*="color:#854d0e"],
.dark [style*="color:#9a3412"],
.dark [style*="color:#78350f"] { color: #fcd34d !important; }

.dark [style*="color:#1d4ed8"],
.dark [style*="color: #1d4ed8"],
.dark [style*="color:#2563eb"],
.dark [style*="color:#0369a1"],
.dark [style*="color:#0c4a6e"],
.dark [style*="color:#0284c7"],
.dark [style*="color:#2b6cb0"],
.dark [style*="color:#1e3a5f"],
.dark [style*="color:#1e40af"],
.dark [style*="color:#1e3a8a"] { color: #93c5fd !important; }

.dark [style*="color:#059669"],
.dark [style*="color: #059669"],
.dark [style*="color:#047857"],
.dark [style*="color:#10b981"],
.dark [style*="color:#115e59"],
.dark [style*="color:#166534"],
.dark [style*="color:#276749"],
.dark [style*="color:#065f46"] { color: #6ee7b7 !important; }

.dark [style*="color:#ea580c"],
.dark [style*="color: #ea580c"],
.dark [style*="color:#f97316"],
.dark [style*="color:#c2410c"] { color: #fdba74 !important; }

.dark [style*="color:#5b21b6"],
.dark [style*="color:#6d28d9"],
.dark [style*="color:#7e22ce"],
.dark [style*="color:#7c3aed"],
.dark [style*="color:#6b21a8"] { color: #c4b5fd !important; }

/* ── Borders on light hex values ─────────────────────────── */
.dark [style*="border:1px solid #e2e8f0"],
.dark [style*="border: 1px solid #e2e8f0"],
.dark [style*="border:1px solid #e5e7eb"],
.dark [style*="border: 1px solid #e5e7eb"],
.dark [style*="border:1px solid #d1d5db"],
.dark [style*="border: 1px solid #d1d5db"],
.dark [style*="border:1px solid #d1d9e6"],
.dark [style*="border:1px solid #f3f4f6"],
.dark [style*="border:1px solid #f1f5f9"],
.dark [style*="border-bottom:1px solid #e5e7eb"],
.dark [style*="border-bottom:1px solid #e2e8f0"],
.dark [style*="border-bottom:1px solid #f1f5f9"],
.dark [style*="border-top:1px solid #e5e7eb"] {
    border-color: rgba(148,163,184,0.18) !important;
}

/* ── Dropdown chevron SVGs in inline-styled selects ──────── */
.dark select[style*="background-image"] {
    background-color: var(--jd-surface-3) !important;
    color: #f1f5f9 !important;
    border-color: var(--jd-border) !important;
}

/* ── Input border light grays in inline styles ───────────── */
.dark [style*="border:1px solid #fca5a5"],
.dark [style*="border:1px solid #fecaca"],
.dark [style*="border:1px solid #fecdd3"] { border-color: rgba(220,38,38,0.40) !important; }
.dark [style*="border:1px solid #fde68a"],
.dark [style*="border:1px solid #fcd34d"],
.dark [style*="border:1.5px solid #fcd34d"],
.dark [style*="border:1px solid #fef08a"],
.dark [style*="border:1px solid #fed7aa"],
.dark [style*="border:1px solid #fdba74"],
.dark [style*="border:1.5px solid #fdba74"] { border-color: rgba(245,158,11,0.40) !important; }
.dark [style*="border:1px solid #86efac"],
.dark [style*="border:1.5px solid #86efac"],
.dark [style*="border:1px solid #6ee7b7"],
.dark [style*="border:1px solid #a7f3d0"],
.dark [style*="border:2px solid #48bb78"],
.dark [style*="border:1px solid #5eead4"],
.dark [style*="border:1px solid #99f6e4"],
.dark [style*="border:1px solid #ccfbf1"],
.dark [style*="border:1px solid #bbf7d0"] { border-color: rgba(16,185,129,0.40) !important; }
.dark [style*="border:1px solid #bfdbfe"],
.dark [style*="border:1px solid #a5b4fc"],
.dark [style*="border:1px solid #c7d2fe"],
.dark [style*="border:1px solid #93c5fd"],
.dark [style*="border:1px solid #bae6fd"] { border-color: rgba(99,102,241,0.40) !important; }
.dark [style*="border:1px solid #c4b5fd"],
.dark [style*="border:1px solid #ddd6fe"],
.dark [style*="border:1px solid #e9d5ff"] { border-color: rgba(139,92,246,0.40) !important; }
.dark [style*="border:1px solid #fbcfe8"],
.dark [style*="border:1px solid #f9a8d4"] { border-color: rgba(236,72,153,0.40) !important; }

/* ── Print-schedule preview: keep it strictly LIGHT in dark ──
     The print preview must look like paper at all times. */
.dark .print-preview,
.dark .print-preview *,
.dark [data-print-preview],
.dark [data-print-preview] * {
    color-scheme: light;
}
.dark .print-preview { background: #ffffff !important; color: #0f172a !important; }
.dark table.w-full.border-separate thead tr,
.dark table.w-full.border-collapse thead tr {
    background: linear-gradient(180deg, var(--jd-surface-3) 0%, var(--jd-surface-2) 100%) !important;
}
.dark table.w-full.border-separate thead th,
.dark table.w-full.border-collapse thead th { color: #cbd5e1 !important; }

/* Empty cells in weekly schedule (override inline white) */
.dark .ws-cell[style*="background:#fafbfc"],
.dark .ws-cell[style*="background:#ffffff"] {
    background: var(--jd-surface-2) !important;
}
.dark table.w-full.border-separate th[style*="background:#fafbfc"],
.dark table.w-full.border-separate th[style*="background:linear-gradient"] {
    background: linear-gradient(180deg, var(--jd-surface-3) 0%, var(--jd-surface-2) 100%) !important;
}
.dark table.w-full.border-collapse td[style*="background:#f8fafc"] {
    background: var(--jd-surface-2) !important;
}
.dark table.w-full.border-collapse th[style*="background:#f8fafc"],
.dark table.w-full.border-collapse th[style*="background:#f1f5f9"] {
    background: var(--jd-surface-3) !important;
}
.dark table.w-full.border-collapse th[style*="background:#ffffff"] {
    background: var(--jd-surface) !important;
}

/* Row hover for the schedule grid in dark */
.dark table.w-full.border-separate tbody tr:hover > td:not([style*="outline"]) {
    background: rgba(99,102,241,0.08) !important;
}

/* Generic white-card overrides used across pages */
.dark div[style*="background:#ffffff"][style*="border-radius"]:not([class*="ws-cell"]):not([class*="fi-modal"]) {
    background: var(--jd-surface) !important;
}
.dark div[style*="background:white"][style*="border-radius"]:not([class*="fi-modal"]) {
    background: var(--jd-surface) !important;
}

/* Subject card text in dark schedule cells */
.dark .ws-cell .dark\:text-gray-100 { color: #e5e7eb !important; }
.dark .ws-cell .dark\:text-gray-400 { color: #94a3b8 !important; }

/* ════════════════════════════════════════════════════════════
   FINAL GAP FILLERS — observed in latest screenshots
   ════════════════════════════════════════════════════════════ */

/* swap-proposal-visualization specific shades */
.dark [style*="background:#fafafa"] { background-color: rgba(255,255,255,0.04) !important; }
.dark [style*="background:#edf2f7"] { background-color: rgba(255,255,255,0.06) !important; }
.dark [style*="background:#fed7d7"] { background-color: rgba(229,62,62,0.18) !important; border-color: rgba(229,62,62,0.40) !important; }
.dark [style*="background:#c6f6d5"] { background-color: rgba(72,187,120,0.18) !important; border-color: rgba(72,187,120,0.40) !important; }
.dark [style*="background:#1e3a5f"] { background-color: var(--jd-surface) !important; }

/* swap-proposal text colors not yet mapped */
.dark [style*="color:#cbd5e1"] { color: #cbd5e1 !important; }
.dark [style*="color:#4a5568"] { color: #cbd5e1 !important; }

/* Solid green/red dots & borders in swap-proposal */
.dark [style*="border:2px solid #48bb78"] { border-color: rgba(72,187,120,0.55) !important; }
.dark [style*="border:2px solid #e53e3e"] { border-color: rgba(229,62,62,0.55) !important; }
.dark [style*="border:1px solid #1e3a8a"] { border-color: rgba(30,58,138,0.55) !important; }

/* Solid color swatches that double as legend dots — keep them solid in dark */
.dark .sviz-dot[style*="background:#48bb78"],
.dark [class*="legend"][style*="background:#48bb78"] { background-color: #48bb78 !important; }

/* Backup-seed teal/indigo card backgrounds */
.dark [style*="background:#ccfbf1"] { background-color: rgba(20,184,166,0.18) !important; border-color: rgba(20,184,166,0.30) !important; }
.dark [style*="background: #f0fdfa"] { background-color: rgba(20,184,166,0.10) !important; }
.dark [style*="border-bottom: 1px solid #ccfbf1"],
.dark [style*="border-bottom: 1px solid #e0e7ff"] { border-color: rgba(255,255,255,0.10) !important; }

/* Small "white" pill indicators inside larger blocks (e.g., #fff inside #1e3a5f) — flip text & bg together */
.dark [style*="background:#fff"][style*="color:#1e3a5f"],
.dark [style*="background:#fff"][style*="color:#1e3a8a"] {
    background-color: rgba(255,255,255,0.10) !important;
    color: #f1f5f9 !important;
}

/* Print preview MUST stay light: re-assert override-of-overrides */
.dark .preview-wrap,
.dark .preview-wrap *,
.dark [class*="print-preview"],
.dark [class*="print-preview"] * { color-scheme: light; }
.dark .preview-wrap { background: #f3f4f6 !important; }

/* ── Small refinements ────────────────────────────────────── */
hr { border-color: var(--jd-border-soft) !important; }
a { transition: color 0.15s ease; }

/* Focus ring polish */
:focus-visible {
    outline: 2px solid var(--jd-primary-400);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Tailwind dark backgrounds → softer slate palette ────────
   Many Blade pages use raw Tailwind classes like dark:bg-gray-900
   which resolve to near-black (#111827). Replace them with the
   warmer jadawel palette so all admin pages share a unified look. */
.dark .dark\:bg-gray-900,
.dark .dark\:bg-slate-900,
.dark .dark\:bg-zinc-900,
.dark .dark\:bg-neutral-900 {
    background-color: var(--jd-surface) !important;
}

.dark .dark\:bg-gray-950,
.dark .dark\:bg-slate-950,
.dark .dark\:bg-zinc-950,
.dark .dark\:bg-neutral-950,
.dark .dark\:bg-black {
    background-color: var(--jd-bg) !important;
}

.dark .dark\:bg-gray-800,
.dark .dark\:bg-slate-800,
.dark .dark\:bg-zinc-800,
.dark .dark\:bg-neutral-800 {
    background-color: var(--jd-surface-3) !important;
}

/* Inline white surfaces inside admin pages should follow the dark palette
   when the .dark class is active (covers style="background:white"). */
.dark .fi-main [style*="background:white"],
.dark .fi-main [style*="background: white"],
.dark .fi-main [style*="background:#fff"],
.dark .fi-main [style*="background: #fff"],
.dark .fi-main [style*="background-color:white"],
.dark .fi-main [style*="background-color: white"],
.dark .fi-main [style*="background-color:#fff"],
.dark .fi-main [style*="background-color: #fff"] {
    background-color: var(--jd-surface) !important;
    background: var(--jd-surface) !important;
}

/* Modal overlays were pure rgba(0,0,0,0.5) — soften to a slate tone. */
.dark .fi-main [style*="rgba(0,0,0,0.5"],
.dark .fi-main [style*="rgba(0, 0, 0, 0.5"] {
    background: rgba(15, 23, 42, 0.55) !important;
}

/* ------------------------------------------------------------------ */
/* Tailwind color utilities not bundled by the Filament core stylesheet */
/* (indigo / emerald / amber / slate). Used by app pages such as       */
/* schedule-settings. Defined here so buttons/badges stay visible      */
/* regardless of the Vite build state.                                 */
/* ------------------------------------------------------------------ */
.jw-page .bg-indigo-50,   .fi-main .bg-indigo-50   { background-color: #eef2ff !important; }
.jw-page .bg-indigo-100,  .fi-main .bg-indigo-100  { background-color: #e0e7ff !important; }
.jw-page .bg-indigo-600,  .fi-main .bg-indigo-600  { background-color: #4f46e5 !important; }
.jw-page .bg-indigo-700,  .fi-main .bg-indigo-700  { background-color: #4338ca !important; }
.jw-page .bg-indigo-950,  .fi-main .bg-indigo-950  { background-color: #1e1b4b !important; }

.jw-page .text-indigo-300, .fi-main .text-indigo-300 { color: #a5b4fc !important; }
.jw-page .text-indigo-500, .fi-main .text-indigo-500 { color: #6366f1 !important; }
.jw-page .text-indigo-600, .fi-main .text-indigo-600 { color: #4f46e5 !important; }
.jw-page .text-indigo-700, .fi-main .text-indigo-700 { color: #4338ca !important; }

.jw-page .border-indigo-200, .fi-main .border-indigo-200 { border-color: #c7d2fe !important; }
.jw-page .border-indigo-300, .fi-main .border-indigo-300 { border-color: #a5b4fc !important; }
.jw-page .border-indigo-500, .fi-main .border-indigo-500 { border-color: #6366f1 !important; }
.jw-page .border-indigo-900, .fi-main .border-indigo-900 { border-color: #312e81 !important; }

.jw-page .hover\:bg-indigo-700:hover, .fi-main .hover\:bg-indigo-700:hover { background-color: #4338ca !important; }

.jw-page .bg-emerald-500,  .fi-main .bg-emerald-500 { background-color: #10b981 !important; }
.jw-page .text-emerald-300, .fi-main .text-emerald-300 { color: #6ee7b7 !important; }
.jw-page .text-emerald-700, .fi-main .text-emerald-700 { color: #047857 !important; }

.jw-page .bg-amber-50,  .fi-main .bg-amber-50  { background-color: #fffbeb !important; }
.jw-page .bg-amber-950, .fi-main .bg-amber-950 { background-color: #451a03 !important; }
.jw-page .border-amber-200, .fi-main .border-amber-200 { border-color: #fde68a !important; }
.jw-page .border-amber-900, .fi-main .border-amber-900 { border-color: #78350f !important; }

.jw-page .text-slate-300, .fi-main .text-slate-300 { color: #cbd5e1 !important; }
.jw-page .text-slate-600, .fi-main .text-slate-600 { color: #475569 !important; }

/* Red / white / gray button utilities used by schedule-settings action     */
/* buttons (Reset confirm dialog + Save/Cancel bar). Without these the       */
/* white button text renders over a white surface and the button "vanishes". */
.jw-page .bg-red-600,  .fi-main .bg-red-600  { background-color: #dc2626 !important; }
.jw-page .bg-red-700,  .fi-main .bg-red-700  { background-color: #b91c1c !important; }
.jw-page .hover\:bg-red-700:hover, .fi-main .hover\:bg-red-700:hover { background-color: #b91c1c !important; }

.jw-page .text-white, .fi-main .text-white { color: #ffffff !important; }

.jw-page .bg-gray-50,  .fi-main .bg-gray-50  { background-color: #f9fafb !important; }
.jw-page .hover\:bg-gray-50:hover, .fi-main .hover\:bg-gray-50:hover { background-color: #f9fafb !important; }
.jw-page .hover\:bg-gray-700:hover, .fi-main .hover\:bg-gray-700:hover { background-color: #374151 !important; }

/* ================================================================== */
/* Inline-editor modals (school / days / lessons / backup).           */
/* The Filament core stylesheet (and jadawel-theme above) did not ship */
/* these gradient / card / spacing / grid utilities, so the modals     */
/* rendered with no card boundary, an invisible header and stacked     */
/* fields. Backfilled here so the dialogs stay cohesive regardless of  */
/* the Vite build state (Tailwind v4 JIT only emits scanned classes).  */
/* ================================================================== */

/* --- Gradient header (reconstruct the --tw-gradient pipeline) --- */
.jw-page .bg-gradient-to-l, .fi-main .bg-gradient-to-l {
    background-color: #4f46e5 !important; /* solid fallback if vars unset */
    background-image: linear-gradient(to left, var(--tw-gradient-from, #4f46e5), var(--tw-gradient-to, #6366f1)) !important;
}
.jw-page .from-indigo-600, .fi-main .from-indigo-600 { --tw-gradient-from: #4f46e5 !important; }
.jw-page .to-indigo-500,   .fi-main .to-indigo-500   { --tw-gradient-to:   #6366f1 !important; }
.jw-page .from-blue-700,   .fi-main .from-blue-700   { --tw-gradient-from: #1d4ed8 !important; }
.jw-page .to-blue-500,     .fi-main .to-blue-500     { --tw-gradient-to:   #3b82f6 !important; }

/* --- Card surface --- */
.jw-page .rounded-2xl, .fi-main .rounded-2xl { border-radius: 1rem !important; }
.jw-page .shadow-2xl,  .fi-main .shadow-2xl  { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }

/* --- Close button (translucent white) --- */
.jw-page .bg-white\/15,  .fi-main .bg-white\/15  { background-color: rgba(255, 255, 255, 0.15) !important; }
.jw-page .text-white\/80, .fi-main .text-white\/80 { color: rgba(255, 255, 255, 0.80) !important; }

/* --- Modal padding / spacing --- */
.jw-page .p-5,  .fi-main .p-5  { padding: 1.25rem !important; }
.jw-page .px-5, .fi-main .px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.jw-page .py-10, .fi-main .py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.jw-page .pt-1, .fi-main .pt-1 { padding-top: 0.25rem !important; }
.jw-page .mb-1,   .fi-main .mb-1   { margin-bottom: 0.25rem !important; }
.jw-page .mb-1\.5, .fi-main .mb-1\.5 { margin-bottom: 0.375rem !important; }
.jw-page .mb-3,   .fi-main .mb-3   { margin-bottom: 0.75rem !important; }
.jw-page .mt-4,   .fi-main .mt-4   { margin-top: 1rem !important; }
.jw-page .mt-1\.5, .fi-main .mt-1\.5 { margin-top: 0.375rem !important; }
.jw-page .leading-relaxed, .fi-main .leading-relaxed { line-height: 1.625 !important; }
.jw-page .text-\[11px\], .fi-main .text-\[11px\] { font-size: 11px !important; line-height: 1.4 !important; }

/* --- Grid columns (modal field rows side-by-side) --- */
.jw-page .grid-cols-2, .fi-main .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.jw-page .grid-cols-3, .fi-main .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.jw-page .col-span-2,  .fi-main .col-span-2  { grid-column: span 2 / span 2 !important; }
@media (min-width: 1024px) {
    .jw-page .lg\:grid-cols-2, .fi-main .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* --- Form / file input / state --- */
.jw-page .accent-emerald-600, .fi-main .accent-emerald-600 { accent-color: #059669 !important; }
.jw-page .transition-transform, .fi-main .transition-transform {
    transition-property: transform !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important;
}
.jw-page .h-2\.5, .fi-main .h-2\.5 { height: 0.625rem !important; }
.jw-page .w-2\.5, .fi-main .w-2\.5 { width: 0.625rem !important; }
.jw-page .disabled\:opacity-50:disabled, .fi-main .disabled\:opacity-50:disabled { opacity: 0.5 !important; }
.jw-page .disabled\:opacity-60:disabled, .fi-main .disabled\:opacity-60:disabled { opacity: 0.6 !important; }

/* Native file picker button inside the backup upload / import inputs. */
.jw-page input[type="file"]::file-selector-button,
.fi-main input[type="file"]::file-selector-button {
    margin-inline-end: 0.75rem;
    border: 0;
    border-radius: 0.25rem;
    background-color: #f3f4f6;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}
.dark .jw-page input[type="file"]::file-selector-button,
.dark .fi-main input[type="file"]::file-selector-button {
    background-color: #374151;
    color: #e5e7eb;
}