/* ─── base & sidebar ─── */
        * {
            border-color: hsl(var(--border));
        }

        :root {
            --sidebar-width: 16rem;
            --sidebar-width-icon: 3rem;
            --sidebar: 0 0% 98%;
            --sidebar-foreground: 240 5% 26%;
            --sidebar-accent: 240 5% 96%;
            --sidebar-accent-foreground: 240 6% 10%;
            --sidebar-border: 220 13% 91%;
            --sidebar-ring: 217 91% 60%;
            --background: 0 0% 100%;
            --foreground: 222 47% 11%;
            --card: 0 0% 100%;
            --card-foreground: 222 47% 11%;
            --border: 214 32% 91%;
            --primary: 221 83% 53%;
            --primary-foreground: 210 40% 98%;
            --secondary: 210 40% 96%;
            --secondary-foreground: 222 47% 11%;
            --muted-foreground: 215 16% 47%;
            --accent: 210 40% 96%;
            --accent-foreground: 222 47% 11%;
            --ring: 215 20% 65%;
            /* light mode */
            --bg-body: #f8fafc;
            --bg-card: #ffffff;
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --border-color: #e2e8f0;
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
            --sidebar-bg: #ffffff;
            --header-bg: rgba(255, 255, 255, 0.95);
            --input-bg: #ffffff;
            --badge-bg: #f1f5f9;
        }

        html.dark-mode {
            --bg-body: #202222;
            --bg-card: #2a2c2c;
            --text-primary: #e5e7eb;
            --text-secondary: #9ca3af;
            --border-color: #3a3c3c;
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            --sidebar-bg: #242626;
            --header-bg: rgba(32, 34, 34, 0.95);
            --input-bg: #2a2c2c;
            --badge-bg: #333636;
            --background: 32 34 34;
            --foreground: 229 231 235;
            --card: 42 44 44;
            --card-foreground: 229 231 235;
            --border: 58 60 60;
            --secondary: 42 44 44;
            --secondary-foreground: 229 231 235;
            --muted-foreground: 156 163 175;
            --accent: 42 44 44;
            --accent-foreground: 229 231 235;
            --ring: 58 60 60;
            --sidebar: 36 38 38;
            --sidebar-foreground: 229 231 235;
            --sidebar-accent: 42 44 44;
            --sidebar-accent-foreground: 229 231 235;
            --sidebar-border: 58 60 60;
            --sidebar-ring: 58 60 60;
        }

        body {
            background: var(--bg-body);
            color: var(--text-primary);
            transition: background 0.2s, color 0.2s;
        }

        .bg-background {
            background-color: var(--bg-body) !important;
        }
        .bg-card {
            background-color: var(--bg-card) !important;
        }
        .border-border {
            border-color: var(--border-color) !important;
        }
        .text-foreground {
            color: var(--text-primary) !important;
        }
        .text-muted-foreground {
            color: var(--text-secondary) !important;
        }
        .bg-sidebar {
            background-color: var(--sidebar-bg) !important;
        }
        .bg-background\/95 {
            background-color: var(--header-bg) !important;
        }
        .bg-muted\/40 {
            background-color: var(--badge-bg) !important;
        }
        input,
        select {
            background-color: var(--input-bg) !important;
            color: var(--text-primary) !important;
            border-color: var(--border-color) !important;
        }
        input::placeholder {
            color: var(--text-secondary) !important;
        }

        /* ─── SIDEBAR CORE ─── */
        [data-sidebar="sidebar"] {
            transition: width 0.2s ease-in-out;
        }

        /* collapse state – hide text, keep icons */
        [data-collapsible="icon"] [data-sidebar="sidebar"] {
            width: var(--sidebar-width-icon);
        }
        [data-collapsible="icon"] .sidebar-hidden-text {
            display: none !important;
        }
        [data-collapsible="icon"] [data-sidebar="menu-button"] {
            justify-content: center !important;
            padding: 0.5rem !important;
            width: 2.5rem !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        [data-collapsible="icon"] [data-sidebar="menu-button"] svg {
            display: inline-block !important;
            flex-shrink: 0 !important;
        }
        [data-collapsible="icon"] [data-sidebar="group-label"] {
            display: none !important;
        }

        /* ─── MOBILE SIDEBAR ─── */
        .sidebar-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 35;
            display: none;
        }
        .sidebar-overlay.active {
            display: block;
        }

        #sidebarContainer {
            position: fixed;
            left: -100%;
            top: 0;
            bottom: 0;
            z-index: 40;
            transition: left 0.2s ease;
            width: 280px;
            background: var(--sidebar-bg);
            border-right: 1px solid var(--border-color);
            overflow-y: auto;
        }
        #sidebarContainer.mobile-open {
            left: 0;
        }
        #sidebarContainer .sidebar-desktop-root {
            width: 100% !important;
            height: 100% !important;
            position: relative !important;
            inset: auto !important;
            display: block !important;
            border: none !important;
        }
        #sidebarContainer .sidebar-desktop-root [data-sidebar="sidebar"] {
            width: 100% !important;
            height: 100% !important;
        }

        /* hide desktop sidebar on mobile, but show inside #sidebarContainer */
        @media (min-width: 768px) {
            #sidebarContainer {
                position: relative;
                left: auto;
                top: auto;
                bottom: auto;
                width: auto;
                background: transparent;
                border: none;
                overflow: visible;
                z-index: auto;
                transition: none;
            }
            #sidebarContainer.mobile-open {
                left: auto;
            }
            .sidebar-overlay {
                display: none !important;
            }
        }

        /* theme toggle */
        .theme-toggle-btn {
            background: var(--bg-card);
            border-color: var(--border-color);
            color: var(--text-primary);
        }
        .theme-toggle-btn:hover {
            background: var(--badge-bg);
        }

        /* pagination */
        .pagination-btn {
            background: var(--bg-card);
            border-color: var(--border-color);
            color: var(--text-primary);
        }
        .pagination-btn:hover {
            background: var(--badge-bg);
        }
        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* filter selects */
        .filter-select {
            background: var(--bg-card);
            border-color: var(--border-color);
            color: var(--text-primary);
        }
        .filter-select:focus {
            outline: none;
            box-shadow: 0 0 0 2px var(--ring);
        }

        /* card hover */
        .rounded-xl {
            transition: all 0.2s ease;
        }
        .hover\:shadow-lg:hover {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
        }