/**
 * SInFoKop — Theme Pack (browser-local via data-spx-theme)
 * 7 profesional themes. Preferensi disimpan di localStorage (spx_ui_theme).
 */

:root,
html[data-spx-theme="koperasi"] {
    --spx-primary: #1e5631;
    --spx-secondary: #007ba7;
    --spx-accent: #00a86b;
    --spx-sidebar-from: #1e5631;
    --spx-sidebar-to: #0a5a78;
    --spx-sidebar-text: rgba(255, 255, 255, 0.88);
    --spx-sidebar-hover: rgba(255, 255, 255, 0.12);
    --spx-sidebar-active: #00a86b;
    --spx-brand-bg: rgba(0, 0, 0, 0.18);
    --spx-nav-bg: #ffffff;
    --spx-nav-text: #2c3e50;
    --spx-nav-border: rgba(30, 86, 49, 0.08);
    --spx-body-bg: #f0f4f2;
    --spx-content-bg: #f0f4f2;
    --spx-card-bg: #ffffff;
    --spx-card-border: rgba(30, 86, 49, 0.06);
    --spx-card-shadow: 0 4px 18px rgba(20, 60, 40, 0.06);
    --spx-text: #1a2e24;
    --spx-text-muted: #5a7266;
    --spx-table-stripe: #f6faf7;
    --spx-table-hover: #eaf4ee;
    --spx-table-border: #e2ebe6;
    --spx-input-bg: #ffffff;
    --spx-input-border: #cfdcd4;
    --spx-footer-bg: #ffffff;
    --spx-footer-border: #e5ece8;
    --spx-modal-bg: #ffffff;
    --spx-dropdown-bg: #ffffff;
    --spx-link: #007ba7;
    --spx-success: #1e8a4c;
    --spx-danger: #c0392b;
    --spx-warning: #d68910;
    --spx-info: #2471a3;
    --spx-picker-bg: #ffffff;
    --spx-picker-border: rgba(30, 86, 49, 0.12);
    --primary-color: var(--spx-primary);
    --secondary-color: var(--spx-secondary);
    --accent-color: var(--spx-accent);
}

/* 2 — Navy Professional */
html[data-spx-theme="navy"] {
    --spx-primary: #0b3d5c;
    --spx-secondary: #1a6fa0;
    --spx-accent: #3db8e8;
    --spx-sidebar-from: #0a2740;
    --spx-sidebar-to: #0e4a6e;
    --spx-sidebar-text: rgba(230, 242, 250, 0.9);
    --spx-sidebar-hover: rgba(61, 184, 232, 0.15);
    --spx-sidebar-active: #3db8e8;
    --spx-brand-bg: rgba(0, 0, 0, 0.22);
    --spx-nav-bg: #f7fafc;
    --spx-nav-text: #0b3d5c;
    --spx-nav-border: rgba(11, 61, 92, 0.1);
    --spx-body-bg: #eef3f7;
    --spx-content-bg: #eef3f7;
    --spx-card-bg: #ffffff;
    --spx-card-border: rgba(11, 61, 92, 0.07);
    --spx-card-shadow: 0 4px 18px rgba(10, 40, 70, 0.07);
    --spx-text: #13293d;
    --spx-text-muted: #5a7388;
    --spx-table-stripe: #f4f8fb;
    --spx-table-hover: #e6f0f7;
    --spx-table-border: #d5e2ec;
    --spx-input-bg: #ffffff;
    --spx-input-border: #b8cddc;
    --spx-footer-bg: #f7fafc;
    --spx-footer-border: #dbe6ef;
    --spx-modal-bg: #ffffff;
    --spx-dropdown-bg: #ffffff;
    --spx-link: #1a6fa0;
    --spx-success: #1e8a5a;
    --spx-danger: #c0392b;
    --spx-warning: #c97b12;
    --spx-info: #1a6fa0;
    --spx-picker-bg: #ffffff;
    --spx-picker-border: rgba(11, 61, 92, 0.14);
}

/* 3 — Midnight Graphite */
html[data-spx-theme="midnight"] {
    --spx-primary: #4ecdc4;
    --spx-secondary: #3aa8a1;
    --spx-accent: #7ee8e0;
    --spx-sidebar-from: #12151a;
    --spx-sidebar-to: #1c222b;
    --spx-sidebar-text: rgba(220, 230, 235, 0.88);
    --spx-sidebar-hover: rgba(78, 205, 196, 0.14);
    --spx-sidebar-active: #4ecdc4;
    --spx-brand-bg: rgba(0, 0, 0, 0.35);
    --spx-nav-bg: #1a1f27;
    --spx-nav-text: #e8eef2;
    --spx-nav-border: rgba(78, 205, 196, 0.12);
    --spx-body-bg: #0f1217;
    --spx-content-bg: #0f1217;
    --spx-card-bg: #1a1f27;
    --spx-card-border: rgba(255, 255, 255, 0.06);
    --spx-card-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    --spx-text: #e4eaf0;
    --spx-text-muted: #8b97a5;
    --spx-table-stripe: #151a22;
    --spx-table-hover: #222933;
    --spx-table-border: #2a323e;
    --spx-input-bg: #151a22;
    --spx-input-border: #343e4c;
    --spx-footer-bg: #1a1f27;
    --spx-footer-border: #2a323e;
    --spx-modal-bg: #1a1f27;
    --spx-dropdown-bg: #1f2630;
    --spx-link: #4ecdc4;
    --spx-success: #3dcf8e;
    --spx-danger: #e86a6a;
    --spx-warning: #e0b04a;
    --spx-info: #5ab0e8;
    --spx-picker-bg: #1a1f27;
    --spx-picker-border: rgba(78, 205, 196, 0.2);
}

/* 4 — Pearl Slate */
html[data-spx-theme="pearl"] {
    --spx-primary: #3d4f5f;
    --spx-secondary: #5a6f82;
    --spx-accent: #8fa3b5;
    --spx-sidebar-from: #2f3d4a;
    --spx-sidebar-to: #3d5163;
    --spx-sidebar-text: rgba(245, 247, 249, 0.9);
    --spx-sidebar-hover: rgba(255, 255, 255, 0.1);
    --spx-sidebar-active: #a8bcc9;
    --spx-brand-bg: rgba(0, 0, 0, 0.16);
    --spx-nav-bg: #fbfcfd;
    --spx-nav-text: #2f3d4a;
    --spx-nav-border: rgba(61, 79, 95, 0.08);
    --spx-body-bg: #f3f5f7;
    --spx-content-bg: #f3f5f7;
    --spx-card-bg: #ffffff;
    --spx-card-border: rgba(61, 79, 95, 0.06);
    --spx-card-shadow: 0 4px 16px rgba(40, 55, 70, 0.05);
    --spx-text: #243039;
    --spx-text-muted: #6b7c8a;
    --spx-table-stripe: #f7f8fa;
    --spx-table-hover: #eef1f4;
    --spx-table-border: #e0e5ea;
    --spx-input-bg: #ffffff;
    --spx-input-border: #c5ced6;
    --spx-footer-bg: #fbfcfd;
    --spx-footer-border: #e4e8ec;
    --spx-modal-bg: #ffffff;
    --spx-dropdown-bg: #ffffff;
    --spx-link: #3d4f5f;
    --spx-success: #3d8a5f;
    --spx-danger: #b54545;
    --spx-warning: #b8860b;
    --spx-info: #4a7a9b;
    --spx-picker-bg: #ffffff;
    --spx-picker-border: rgba(61, 79, 95, 0.12);
}

/* 5 — Emerald Prestige */
html[data-spx-theme="emerald"] {
    --spx-primary: #0d5c3d;
    --spx-secondary: #b8973a;
    --spx-accent: #d4af37;
    --spx-sidebar-from: #0a3d2a;
    --spx-sidebar-to: #0f6b45;
    --spx-sidebar-text: rgba(245, 240, 225, 0.92);
    --spx-sidebar-hover: rgba(212, 175, 55, 0.16);
    --spx-sidebar-active: #d4af37;
    --spx-brand-bg: rgba(0, 0, 0, 0.2);
    --spx-nav-bg: #faf8f2;
    --spx-nav-text: #0d5c3d;
    --spx-nav-border: rgba(13, 92, 61, 0.1);
    --spx-body-bg: #f2f0e8;
    --spx-content-bg: #f2f0e8;
    --spx-card-bg: #fffcf6;
    --spx-card-border: rgba(184, 151, 58, 0.14);
    --spx-card-shadow: 0 4px 18px rgba(13, 60, 40, 0.07);
    --spx-text: #1a3328;
    --spx-text-muted: #5c6e62;
    --spx-table-stripe: #f7f5ed;
    --spx-table-hover: #efe9d8;
    --spx-table-border: #e0d9c4;
    --spx-input-bg: #fffcf6;
    --spx-input-border: #cfc6a8;
    --spx-footer-bg: #faf8f2;
    --spx-footer-border: #e5dfd0;
    --spx-modal-bg: #fffcf6;
    --spx-dropdown-bg: #fffcf6;
    --spx-link: #0d5c3d;
    --spx-success: #0d5c3d;
    --spx-danger: #a33a3a;
    --spx-warning: #b8973a;
    --spx-info: #2a6e8a;
    --spx-picker-bg: #fffcf6;
    --spx-picker-border: rgba(184, 151, 58, 0.22);
}

/* 6 — Ocean Mist */
html[data-spx-theme="ocean"] {
    --spx-primary: #0e6b6e;
    --spx-secondary: #1a8f94;
    --spx-accent: #2ec4b6;
    --spx-sidebar-from: #0a4a4d;
    --spx-sidebar-to: #127a7e;
    --spx-sidebar-text: rgba(230, 250, 248, 0.92);
    --spx-sidebar-hover: rgba(46, 196, 182, 0.16);
    --spx-sidebar-active: #2ec4b6;
    --spx-brand-bg: rgba(0, 0, 0, 0.18);
    --spx-nav-bg: #f5fbfb;
    --spx-nav-text: #0e6b6e;
    --spx-nav-border: rgba(14, 107, 110, 0.1);
    --spx-body-bg: #eaf5f5;
    --spx-content-bg: #eaf5f5;
    --spx-card-bg: #ffffff;
    --spx-card-border: rgba(14, 107, 110, 0.08);
    --spx-card-shadow: 0 4px 18px rgba(10, 70, 75, 0.06);
    --spx-text: #143538;
    --spx-text-muted: #5a787a;
    --spx-table-stripe: #f2f9f9;
    --spx-table-hover: #dff1f1;
    --spx-table-border: #cfe3e3;
    --spx-input-bg: #ffffff;
    --spx-input-border: #aecbcb;
    --spx-footer-bg: #f5fbfb;
    --spx-footer-border: #d4e8e8;
    --spx-modal-bg: #ffffff;
    --spx-dropdown-bg: #ffffff;
    --spx-link: #0e6b6e;
    --spx-success: #1a8a62;
    --spx-danger: #c04545;
    --spx-warning: #c98a1a;
    --spx-info: #1a8f94;
    --spx-picker-bg: #ffffff;
    --spx-picker-border: rgba(14, 107, 110, 0.14);
}

/* 7 — Espresso */
html[data-spx-theme="espresso"] {
    --spx-primary: #5c3d2e;
    --spx-secondary: #8b6b4a;
    --spx-accent: #c4a574;
    --spx-sidebar-from: #3a261c;
    --spx-sidebar-to: #5c3d2e;
    --spx-sidebar-text: rgba(245, 235, 220, 0.92);
    --spx-sidebar-hover: rgba(196, 165, 116, 0.16);
    --spx-sidebar-active: #c4a574;
    --spx-brand-bg: rgba(0, 0, 0, 0.22);
    --spx-nav-bg: #faf6f1;
    --spx-nav-text: #5c3d2e;
    --spx-nav-border: rgba(92, 61, 46, 0.1);
    --spx-body-bg: #f3eee8;
    --spx-content-bg: #f3eee8;
    --spx-card-bg: #fffbf7;
    --spx-card-border: rgba(92, 61, 46, 0.08);
    --spx-card-shadow: 0 4px 18px rgba(60, 40, 25, 0.07);
    --spx-text: #2e221a;
    --spx-text-muted: #7a6556;
    --spx-table-stripe: #f8f3ed;
    --spx-table-hover: #efe5d8;
    --spx-table-border: #e0d4c4;
    --spx-input-bg: #fffbf7;
    --spx-input-border: #d0c0ae;
    --spx-footer-bg: #faf6f1;
    --spx-footer-border: #e5dbd0;
    --spx-modal-bg: #fffbf7;
    --spx-dropdown-bg: #fffbf7;
    --spx-link: #5c3d2e;
    --spx-success: #4a7a4a;
    --spx-danger: #a3453a;
    --spx-warning: #b8860b;
    --spx-info: #5a7088;
    --spx-picker-bg: #fffbf7;
    --spx-picker-border: rgba(92, 61, 46, 0.14);
}

/* ─── Global shell ─── */
html[data-spx-theme] body {
    background-color: var(--spx-body-bg) !important;
    color: var(--spx-text);
}

html[data-spx-theme] .content-wrapper,
html[data-spx-theme] .content-wrapper > .content {
    background-color: var(--spx-content-bg) !important;
    color: var(--spx-text);
}

html[data-spx-theme] .main-header.navbar,
html[data-spx-theme] .navbar.navbar-white,
html[data-spx-theme] .navbar.navbar-light {
    background: var(--spx-nav-bg) !important;
    color: var(--spx-nav-text) !important;
    border-bottom: 1px solid var(--spx-nav-border) !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

html[data-spx-theme] .main-header .nav-link,
html[data-spx-theme] .main-header .navbar-nav .nav-link {
    color: var(--spx-nav-text) !important;
}

html[data-spx-theme] .main-sidebar,
html[data-spx-theme] .main-sidebar.sidebar-dark-primary {
    background: linear-gradient(180deg, var(--spx-sidebar-from) 0%, var(--spx-sidebar-to) 100%) !important;
}

html[data-spx-theme] .brand-link {
    background: var(--spx-brand-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

html[data-spx-theme] .sidebar .nav-link,
html[data-spx-theme] .nav-sidebar .nav-link p,
html[data-spx-theme] .nav-sidebar .nav-icon {
    color: var(--spx-sidebar-text) !important;
}

html[data-spx-theme] .sidebar .nav-link:hover,
html[data-spx-theme] .sidebar .nav-link.active {
    background: var(--spx-sidebar-hover) !important;
    color: #fff !important;
}

html[data-spx-theme] .sidebar .nav-link.active {
    border-left: 3px solid var(--spx-sidebar-active);
}

html[data-spx-theme] .main-footer {
    background: var(--spx-footer-bg) !important;
    color: var(--spx-text-muted) !important;
    border-top: 1px solid var(--spx-footer-border) !important;
}

html[data-spx-theme] .main-footer a {
    color: var(--spx-link) !important;
}

/* Cards & panels */
html[data-spx-theme] .card,
html[data-spx-theme] .info-box,
html[data-spx-theme] .small-box {
    background: var(--spx-card-bg) !important;
    color: var(--spx-text) !important;
    border: 1px solid var(--spx-card-border) !important;
    box-shadow: var(--spx-card-shadow) !important;
}

html[data-spx-theme] .card-header,
html[data-spx-theme] .card-footer {
    background: transparent !important;
    border-color: var(--spx-table-border) !important;
    color: var(--spx-text) !important;
}

html[data-spx-theme] .card-title,
html[data-spx-theme] h1, html[data-spx-theme] h2,
html[data-spx-theme] h3, html[data-spx-theme] h4,
html[data-spx-theme] h5, html[data-spx-theme] h6 {
    color: var(--spx-text);
}

html[data-spx-theme] .text-muted,
html[data-spx-theme] .content-header p {
    color: var(--spx-text-muted) !important;
}

/* Tables */
html[data-spx-theme] .table {
    color: var(--spx-text) !important;
    border-color: var(--spx-table-border) !important;
}

html[data-spx-theme] .table thead th,
html[data-spx-theme] .dataTables_wrapper .dataTables_scrollHead th {
    background: var(--spx-table-stripe) !important;
    color: var(--spx-text) !important;
    border-color: var(--spx-table-border) !important;
}

html[data-spx-theme] .table-striped tbody tr:nth-of-type(odd),
html[data-spx-theme] table.dataTable tbody tr:nth-child(odd) {
    background-color: var(--spx-table-stripe) !important;
}

html[data-spx-theme] .table-hover tbody tr:hover,
html[data-spx-theme] table.dataTable tbody tr:hover {
    background-color: var(--spx-table-hover) !important;
    color: var(--spx-text) !important;
}

html[data-spx-theme] .table td,
html[data-spx-theme] .table th {
    border-color: var(--spx-table-border) !important;
}

/* Forms */
html[data-spx-theme] .form-control,
html[data-spx-theme] .form-select,
html[data-spx-theme] .custom-select,
html[data-spx-theme] .select2-container--default .select2-selection--single,
html[data-spx-theme] .select2-container--default .select2-selection--multiple {
    background-color: var(--spx-input-bg) !important;
    border-color: var(--spx-input-border) !important;
    color: var(--spx-text) !important;
}

html[data-spx-theme] .form-control:focus,
html[data-spx-theme] .form-select:focus {
    border-color: var(--spx-primary) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--spx-primary) 22%, transparent);
}

html[data-spx-theme] .form-label,
html[data-spx-theme] label {
    color: var(--spx-text);
}

html[data-spx-theme] .input-group-text {
    background: var(--spx-table-stripe) !important;
    border-color: var(--spx-input-border) !important;
    color: var(--spx-text-muted) !important;
}

/* Buttons */
html[data-spx-theme] .btn-primary {
    background-color: var(--spx-primary) !important;
    border-color: var(--spx-primary) !important;
    color: #fff !important;
}

html[data-spx-theme] .btn-primary:hover,
html[data-spx-theme] .btn-primary:focus,
html[data-spx-theme] .btn-primary:active {
    background-color: var(--spx-secondary) !important;
    border-color: var(--spx-secondary) !important;
}

html[data-spx-theme] .btn-outline-primary {
    color: var(--spx-primary) !important;
    border-color: var(--spx-primary) !important;
}

html[data-spx-theme] .btn-outline-primary:hover {
    background-color: var(--spx-primary) !important;
    color: #fff !important;
}

html[data-spx-theme] .btn-success { background-color: var(--spx-success) !important; border-color: var(--spx-success) !important; }
html[data-spx-theme] .btn-danger { background-color: var(--spx-danger) !important; border-color: var(--spx-danger) !important; }
html[data-spx-theme] .btn-warning { background-color: var(--spx-warning) !important; border-color: var(--spx-warning) !important; }
html[data-spx-theme] .btn-info { background-color: var(--spx-info) !important; border-color: var(--spx-info) !important; color: #fff !important; }

html[data-spx-theme] .btn-secondary,
html[data-spx-theme] .btn-default {
    background-color: var(--spx-table-stripe) !important;
    border-color: var(--spx-input-border) !important;
    color: var(--spx-text) !important;
}

/* Modals & dropdowns */
html[data-spx-theme] .modal-content {
    background: var(--spx-modal-bg) !important;
    color: var(--spx-text) !important;
    border-color: var(--spx-card-border) !important;
}

html[data-spx-theme] .modal-header,
html[data-spx-theme] .modal-footer {
    border-color: var(--spx-table-border) !important;
}

html[data-spx-theme] .dropdown-menu {
    background: var(--spx-dropdown-bg) !important;
    border-color: var(--spx-card-border) !important;
    color: var(--spx-text) !important;
}

html[data-spx-theme] .dropdown-item {
    color: var(--spx-text) !important;
}

html[data-spx-theme] .dropdown-item:hover,
html[data-spx-theme] .dropdown-item:focus {
    background: var(--spx-table-hover) !important;
    color: var(--spx-text) !important;
}

html[data-spx-theme] .dropdown-divider {
    border-top-color: var(--spx-table-border) !important;
}

/* Tabs, badges, alerts, links */
html[data-spx-theme] .nav-tabs .nav-link.active,
html[data-spx-theme] .nav-pills .nav-link.active {
    background-color: var(--spx-primary) !important;
    color: #fff !important;
    border-color: var(--spx-primary) !important;
}

html[data-spx-theme] .nav-tabs {
    border-bottom-color: var(--spx-table-border) !important;
}

html[data-spx-theme] .nav-tabs .nav-link {
    color: var(--spx-text-muted);
}

html[data-spx-theme] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.brand-link) {
    color: var(--spx-link);
}

html[data-spx-theme] .badge-primary,
html[data-spx-theme] .bg-primary {
    background-color: var(--spx-primary) !important;
}

html[data-spx-theme] .page-item.active .page-link,
html[data-spx-theme] .pagination .page-item.active .page-link {
    background-color: var(--spx-primary) !important;
    border-color: var(--spx-primary) !important;
}

html[data-spx-theme] .page-link {
    color: var(--spx-primary);
    background-color: var(--spx-card-bg);
    border-color: var(--spx-table-border);
}

html[data-spx-theme] .list-group-item {
    background: var(--spx-card-bg);
    color: var(--spx-text);
    border-color: var(--spx-table-border);
}

html[data-spx-theme] .breadcrumb {
    background: transparent;
}

html[data-spx-theme] .breadcrumb-item,
html[data-spx-theme] .breadcrumb-item a {
    color: var(--spx-text-muted);
}

html[data-spx-theme] .content-header {
    color: var(--spx-text);
}

/* DataTables chrome */
html[data-spx-theme] .dataTables_wrapper .dataTables_filter input,
html[data-spx-theme] .dataTables_wrapper .dataTables_length select {
    background: var(--spx-input-bg) !important;
    color: var(--spx-text) !important;
    border-color: var(--spx-input-border) !important;
}

html[data-spx-theme] .dataTables_info,
html[data-spx-theme] .dataTables_length label,
html[data-spx-theme] .dataTables_filter label {
    color: var(--spx-text-muted) !important;
}

/* Select2 dropdown panel */
html[data-spx-theme] .select2-dropdown {
    background: var(--spx-dropdown-bg) !important;
    border-color: var(--spx-input-border) !important;
    color: var(--spx-text) !important;
}

html[data-spx-theme] .select2-results__option--highlighted {
    background: var(--spx-primary) !important;
}

/* SweetAlert / misc overlays stay readable */
html[data-spx-theme="midnight"] .swal2-popup {
    background: var(--spx-modal-bg);
    color: var(--spx-text);
}

/* ─── Theme picker UI ─── */
.spx-theme-nav-item {
    position: relative;
}

.spx-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--spx-nav-border);
    background: transparent;
    color: var(--spx-nav-text);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.spx-theme-toggle:hover {
    background: var(--spx-table-hover);
    transform: translateY(-1px);
}

.spx-theme-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: min(320px, calc(100vw - 24px));
    padding: 14px;
    background: var(--spx-picker-bg);
    border: 1px solid var(--spx-picker-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
    z-index: 1100;
    display: none;
    color: var(--spx-text);
}

.spx-theme-panel.is-open {
    display: block;
    animation: spxThemeIn 0.18s ease;
}

@keyframes spxThemeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.spx-theme-panel-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--spx-text-muted);
    margin-bottom: 10px;
}

.spx-theme-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.spx-theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--spx-table-border);
    background: transparent;
    color: var(--spx-text);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.spx-theme-option:hover {
    background: var(--spx-table-hover);
}

.spx-theme-option.is-active {
    border-color: var(--spx-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--spx-primary) 25%, transparent);
    background: var(--spx-table-stripe);
}

.spx-theme-swatch {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    background: linear-gradient(135deg, var(--sw1) 0%, var(--sw2) 55%, var(--sw3) 100%);
}

.spx-theme-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.spx-theme-name {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
}

.spx-theme-desc {
    font-size: 0.68rem;
    color: var(--spx-text-muted);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spx-theme-panel-note {
    margin-top: 10px;
    font-size: 0.68rem;
    color: var(--spx-text-muted);
    line-height: 1.35;
}

/* Portal / login surfaces (shared preference) */
html[data-spx-theme] body.portal-auth-page {
    color: var(--spx-text);
    background:
        radial-gradient(ellipse 70% 45% at 12% 0%, color-mix(in srgb, var(--spx-accent) 18%, transparent), transparent 55%),
        radial-gradient(ellipse 55% 40% at 95% 100%, color-mix(in srgb, var(--spx-primary) 12%, transparent), transparent 50%),
        linear-gradient(165deg, var(--spx-body-bg) 0%, var(--spx-content-bg) 100%);
}

html[data-spx-theme] body.portal-auth-page .portal-form-panel,
html[data-spx-theme] body.portal-auth-page .portal-btn-primary {
    /* keep structure; accent via primary */
}

html[data-spx-theme] body.portal-auth-page .portal-btn-primary {
    background: linear-gradient(135deg, var(--spx-primary), var(--spx-secondary)) !important;
    border: none;
}

html[data-spx-theme="midnight"] body.portal-auth-page .portal-form-panel {
    background: var(--spx-card-bg);
    color: var(--spx-text);
}

.spx-theme-nav-item[style*="position:absolute"] .spx-theme-panel {
    right: 0;
    left: auto;
}

.spx-theme-nav-item[style*="position:absolute"] .spx-theme-toggle {
    background: var(--spx-card-bg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Smooth theme transitions for shell chrome */
html.spx-theme-ready body,
html.spx-theme-ready .main-sidebar,
html.spx-theme-ready .main-header,
html.spx-theme-ready .content-wrapper,
html.spx-theme-ready .card,
html.spx-theme-ready .main-footer {
    transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}