/* ============================================================
   TransLog — Theme "2026"
   Loaded AFTER style.css on EVERY theme (incl. classic). All rules are
   scoped to html[data-theme="2026"/"2026-dark"], except the theme-switcher
   skeleton at the end — classic (data-theme="classic") matches nothing
   else, so the original style.css look stays pixel-identical.

   Variants:
     html[data-theme="2026"]       → light 2026
     html[data-theme="2026-dark"]  → dark 2026
   ============================================================ */

/* ─────────────────────────── Tokens: light ─────────────────────────── */
html[data-theme="2026"], html[data-theme="2026-dark"] {
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-dark: #3730a3;
    --primary-light: #e0e7ff;
    --primary-50: #eef2ff;
    --primary-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --accent-glow: rgba(79, 70, 229, 0.35);
    --ring: rgba(79, 70, 229, 0.16);

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;

    --sidebar-bg: #0a0e1d;
    --sidebar-hover: #161d33;
    --sidebar-active: linear-gradient(90deg, rgba(79,70,229,0.28), rgba(124,58,237,0.14));
    --sidebar-active-border: #6366f1;
    --sidebar-text: #8290ab;
    --sidebar-text-active: #ffffff;

    --shadow-sm: 0 1px 2px rgba(23, 23, 60, 0.05);
    --shadow: 0 1px 3px rgba(23, 23, 60, 0.06), 0 1px 2px rgba(23, 23, 60, 0.04);
    --shadow-md: 0 6px 16px rgba(23, 23, 60, 0.07), 0 2px 4px rgba(23, 23, 60, 0.04);
    --shadow-lg: 0 14px 32px rgba(23, 23, 60, 0.10), 0 4px 8px rgba(23, 23, 60, 0.05);
    --shadow-xl: 0 24px 48px rgba(23, 23, 60, 0.14), 0 8px 16px rgba(23, 23, 60, 0.06);
}

html[data-theme="2026"] {
    --bg: #eef0f8;
    --bg-soft: #f6f7fc;
    --card-bg: #ffffff;
    --text: #101425;
    --text-secondary: #4b5468;
    --text-muted: #94a0b8;
    --border: #dfe3f0;
    --border-light: #eaedf6;
    --surface-2: #f6f7fc;
}

/* ─────────────────────────── Tokens: dark ──────────────────────────
   Kept inside @media screen so @media print in style.css still prints
   on white. */
@media screen {
    html[data-theme="2026-dark"] {
        --bg: #0a0d17;
        --bg-soft: #10141f;
        --card-bg: #12172a;
        --text: #e7eaf3;
        --text-secondary: #a3adc2;
        --text-muted: #6b7690;
        --border: #232a41;
        --border-light: #1b2136;
        --surface-2: #10141f;

        --primary: #6366f1;
        --primary-hover: #818cf8;
        --primary-dark: #4f46e5;
        --primary-light: rgba(99, 102, 241, 0.18);
        --primary-50: rgba(99, 102, 241, 0.10);
        --ring: rgba(99, 102, 241, 0.25);

        --success: #34d399;
        --success-light: rgba(16, 185, 129, 0.14);
        --warning: #fbbf24;
        --warning-light: rgba(245, 158, 11, 0.14);
        --danger: #f87171;
        --danger-light: rgba(239, 68, 68, 0.14);
        --info: #22d3ee;
        --info-light: rgba(6, 182, 212, 0.14);

        --sidebar-bg: #070a13;
        --sidebar-hover: #131a2c;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35);
        --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.4);

        color-scheme: dark;
    }
}

/* ─────────────────────────── Base surface ─────────────────────────── */
html[data-theme="2026"] body {
    background:
        radial-gradient(1100px 700px at 88% -12%, rgba(124, 58, 237, 0.07), transparent 60%),
        radial-gradient(900px 650px at -8% 108%, rgba(79, 70, 229, 0.06), transparent 55%),
        var(--bg);
    background-attachment: fixed;
}
html[data-theme="2026-dark"] body {
    background:
        radial-gradient(1100px 700px at 88% -12%, rgba(124, 58, 237, 0.12), transparent 60%),
        radial-gradient(900px 650px at -8% 108%, rgba(59, 63, 180, 0.10), transparent 55%),
        var(--bg);
    background-attachment: fixed;
}

html[data-theme="2026"] h1, html[data-theme="2026"] h2, html[data-theme="2026"] h3,
html[data-theme="2026-dark"] h1, html[data-theme="2026-dark"] h2, html[data-theme="2026-dark"] h3 {
    letter-spacing: -0.02em;
}

html[data-theme="2026"] ::selection, html[data-theme="2026-dark"] ::selection {
    background: rgba(99, 102, 241, 0.25);
}

/* ─────────────────────────── Sidebar ─────────────────────────── */
html[data-theme="2026"] .sidebar, html[data-theme="2026-dark"] .sidebar {
    background: linear-gradient(180deg, #0b1020 0%, #0a0e1d 45%, #0b0f21 100%);
    border-right: 1px solid rgba(148, 163, 184, 0.08);
}
html[data-theme="2026"] .sidebar-header .logo span,
html[data-theme="2026-dark"] .sidebar-header .logo span {
    background: linear-gradient(120deg, #818cf8, #c084fc);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
html[data-theme="2026"] .sidebar-header .logo-icon,
html[data-theme="2026-dark"] .sidebar-header .logo-icon { color: #818cf8; }

html[data-theme="2026"] .nav-section-title,
html[data-theme="2026-dark"] .nav-section-title {
    font-size: 10px; letter-spacing: 0.14em;
}
html[data-theme="2026"] .nav-item, html[data-theme="2026-dark"] .nav-item {
    border-radius: 10px;
    margin: 1px 0;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
html[data-theme="2026"] .nav-item.active, html[data-theme="2026-dark"] .nav-item.active {
    background: var(--sidebar-active);
    box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.25), 0 4px 14px rgba(79, 70, 229, 0.25);
}
html[data-theme="2026"] .nav-item.active::before,
html[data-theme="2026-dark"] .nav-item.active::before {
    background: linear-gradient(180deg, #818cf8, #a78bfa);
    box-shadow: 0 0 10px 1px rgba(129, 140, 248, 0.7);
    border-radius: 3px;
}
html[data-theme="2026"] .sidebar-user .user-avatar,
html[data-theme="2026-dark"] .sidebar-user .user-avatar {
    background: var(--primary-gradient);
    box-shadow: 0 4px 12px var(--accent-glow);
    border-radius: 12px;
}
html[data-theme="2026"] .user-menu, html[data-theme="2026-dark"] .user-menu {
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    overflow: hidden;
}

/* ─────────────────────────── Topbar (glass) ─────────────────────────── */
html[data-theme="2026"] .topbar {
    background: rgba(255, 255, 255, 0.66);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    border-bottom: 1px solid rgba(23, 23, 60, 0.06);
}
html[data-theme="2026-dark"] .topbar {
    background: rgba(10, 13, 23, 0.68);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid rgba(148, 163, 184, 0.09);
}
html[data-theme="2026"] .company-switcher-btn, html[data-theme="2026"] .lang-switcher-btn,
html[data-theme="2026"] .theme-switcher-btn, html[data-theme="2026"] .topbar-btn,
html[data-theme="2026-dark"] .company-switcher-btn, html[data-theme="2026-dark"] .lang-switcher-btn,
html[data-theme="2026-dark"] .theme-switcher-btn, html[data-theme="2026-dark"] .topbar-btn {
    border-radius: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
html[data-theme="2026"] .company-switcher-btn:hover, html[data-theme="2026"] .lang-switcher-btn:hover,
html[data-theme="2026"] .theme-switcher-btn:hover,
html[data-theme="2026-dark"] .company-switcher-btn:hover, html[data-theme="2026-dark"] .lang-switcher-btn:hover,
html[data-theme="2026-dark"] .theme-switcher-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-50);
    box-shadow: 0 2px 10px var(--ring);
}
html[data-theme="2026"] .company-dropdown, html[data-theme="2026"] .lang-dropdown, html[data-theme="2026"] .theme-dropdown,
html[data-theme="2026-dark"] .company-dropdown, html[data-theme="2026-dark"] .lang-dropdown, html[data-theme="2026-dark"] .theme-dropdown {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    background: var(--card-bg);
}

/* Theme switcher reuses the lang-switcher skeleton (defined in style.css via
   these classes) — only the pieces classic doesn't have are defined here AND
   inline-safe for classic (see style additions at the end). */

/* ─────────────────────────── Content & cards ─────────────────────────── */
html[data-theme="2026"] .content-header h1, html[data-theme="2026-dark"] .content-header h1 {
    font-weight: 800;
}
html[data-theme="2026"] .card, html[data-theme="2026-dark"] .card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
    background: var(--card-bg);
}
html[data-theme="2026"] .card-header, html[data-theme="2026-dark"] .card-header {
    border-bottom: 1px solid var(--border-light);
    background: transparent;
}
html[data-theme="2026"] .card-footer, html[data-theme="2026-dark"] .card-footer {
    background: var(--bg-soft);
    border-top: 1px solid var(--border-light);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
html[data-theme="2026"] .filter-bar, html[data-theme="2026-dark"] .filter-bar {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
}

/* ─────────────────────────── Buttons ─────────────────────────── */
html[data-theme="2026"] .btn, html[data-theme="2026-dark"] .btn {
    border-radius: 10px;
    font-weight: 600;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease,
                border-color 140ms ease, color 140ms ease, filter 140ms ease;
}
html[data-theme="2026"] .btn-primary, html[data-theme="2026-dark"] .btn-primary {
    background: var(--primary-gradient);
    border: none;
    box-shadow: 0 4px 14px var(--accent-glow);
}
html[data-theme="2026"] .btn-primary:hover, html[data-theme="2026-dark"] .btn-primary:hover {
    background: var(--primary-gradient);
    filter: brightness(1.08);
    box-shadow: 0 6px 20px var(--accent-glow);
}
html[data-theme="2026"] .btn-primary:active, html[data-theme="2026-dark"] .btn-primary:active {
    filter: brightness(0.95);
}
html[data-theme="2026-dark"] .btn-secondary {
    background: var(--bg-soft);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="2026-dark"] .btn-secondary:hover {
    background: #1a2032;
    border-color: var(--primary);
    color: var(--text);
}
@media (prefers-reduced-motion: no-preference) {
    html[data-theme="2026"] .btn:not(:disabled):hover,
    html[data-theme="2026-dark"] .btn:not(:disabled):hover { transform: translateY(-1px); }
    html[data-theme="2026"] .btn:not(:disabled):active,
    html[data-theme="2026-dark"] .btn:not(:disabled):active { transform: translateY(0); }
}
html[data-theme="2026"] .btn:focus-visible, html[data-theme="2026-dark"] .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--ring);
}

/* ─────────────────────────── Forms ─────────────────────────── */
html[data-theme="2026"] .form-control, html[data-theme="2026-dark"] .form-control {
    border-radius: 10px;
    /* background-COLOR, not the shorthand — the shorthand would wipe the
       select chevron background-image inherited from style.css */
    background-color: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
html[data-theme="2026"] .form-control:focus, html[data-theme="2026-dark"] .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--ring);
}
html[data-theme="2026"] .form-control:hover:not(:focus):not(:disabled):not([readonly]),
html[data-theme="2026-dark"] .form-control:hover:not(:focus):not(:disabled):not([readonly]) {
    border-color: var(--text-muted);
}
html[data-theme="2026-dark"] .form-control:disabled,
html[data-theme="2026-dark"] .form-control[readonly] {
    background-color: var(--bg-soft);
    color: var(--text-secondary);
}
/* select chevron: re-tinted data-URI for dark */
html[data-theme="2026-dark"] select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b94a8' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
}
html[data-theme="2026"] .form-section-title, html[data-theme="2026-dark"] .form-section-title {
    border-radius: 10px;
    background: var(--bg-soft);
    border: 1px solid var(--border-light);
}

/* ─────────────────────────── Tables ─────────────────────────── */
html[data-theme="2026"] .table th, html[data-theme="2026-dark"] .table th {
    font-size: 10px;
    letter-spacing: 0.09em;
    background: var(--bg-soft);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
html[data-theme="2026"] .table td, html[data-theme="2026-dark"] .table td {
    border-bottom: 1px solid var(--border-light);
}
html[data-theme="2026"] .table tr:hover td { background: var(--primary-50); }
html[data-theme="2026-dark"] .table tr:hover td { background: rgba(99, 102, 241, 0.07); }
html[data-theme="2026"] .table .row-link:hover td,
html[data-theme="2026-dark"] .table .row-link:hover td {
    background: var(--primary-50);
    box-shadow: inset 3px 0 0 var(--primary);
}
html[data-theme="2026-dark"] .table .row-link:hover td {
    background: rgba(99, 102, 241, 0.10);
}
html[data-theme="2026"] .table-summary, html[data-theme="2026-dark"] .table-summary,
html[data-theme="2026"] .summary-row td, html[data-theme="2026-dark"] .summary-row td {
    background: var(--primary-50);
}
html[data-theme="2026-dark"] .table-footer { background: var(--bg-soft); }

/* ─────────────────────────── Badges ─────────────────────────── */
html[data-theme="2026"] .badge, html[data-theme="2026-dark"] .badge {
    border-radius: 999px;
    padding-left: 9px; padding-right: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
html[data-theme="2026"] .badge::before, html[data-theme="2026-dark"] .badge::before {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 5px;
    vertical-align: 1px;
    opacity: 0.85;
}
@media screen {
    html[data-theme="2026-dark"] .badge-primary { background: var(--primary-light); color: #a5b4fc; border-color: rgba(129,140,248,0.25); }
    html[data-theme="2026-dark"] .badge-success { background: var(--success-light); color: var(--success); border-color: rgba(52,211,153,0.25); }
    html[data-theme="2026-dark"] .badge-warning { background: var(--warning-light); color: var(--warning); border-color: rgba(251,191,36,0.25); }
    html[data-theme="2026-dark"] .badge-danger  { background: var(--danger-light);  color: var(--danger);  border-color: rgba(248,113,113,0.25); }
    html[data-theme="2026-dark"] .badge-info    { background: var(--info-light);    color: var(--info);    border-color: rgba(34,211,238,0.25); }
    html[data-theme="2026-dark"] .badge-secondary { background: var(--bg-soft); color: var(--text-secondary); border-color: var(--border); }
}

/* ─────────────────────────── Alerts / toast ─────────────────────────── */
html[data-theme="2026"] .alert, html[data-theme="2026-dark"] .alert { border-radius: var(--radius); }
@media screen {
    html[data-theme="2026-dark"] .alert-success { color: #6ee7b7; }
    html[data-theme="2026-dark"] .alert-danger  { background: #b91c1c; color: #fff; border-color: #7f1d1d; }
    html[data-theme="2026-dark"] .alert-warning { color: #fcd34d; }
    html[data-theme="2026-dark"] .alert-info    { color: #67e8f9; }
}
html[data-theme="2026"] .toast, html[data-theme="2026-dark"] .toast {
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
}

/* ─────────────────────────── Pagination / tabs ─────────────────────────── */
html[data-theme="2026"] .pagination li a, html[data-theme="2026"] .pagination li span,
html[data-theme="2026-dark"] .pagination li a, html[data-theme="2026-dark"] .pagination li span {
    border-radius: 9px;
    background: var(--card-bg);
    border-color: var(--border);
    color: var(--text-secondary);
}
html[data-theme="2026"] .pagination li a:hover,
html[data-theme="2026-dark"] .pagination li a:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-50);
}
html[data-theme="2026"] .pagination li.active span,
html[data-theme="2026-dark"] .pagination li.active span {
    background: var(--primary-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px var(--accent-glow);
}
html[data-theme="2026"] .pagination li.disabled span,
html[data-theme="2026-dark"] .pagination li.disabled span {
    color: var(--text-muted);
    background: var(--bg-soft);
}
html[data-theme="2026"] .dash-tab.active, html[data-theme="2026-dark"] .dash-tab.active {
    background: var(--primary-gradient);
    box-shadow: 0 3px 10px var(--accent-glow);
    color: #fff;
}
html[data-theme="2026"] .dash-tab, html[data-theme="2026-dark"] .dash-tab { border-radius: 10px; }
html[data-theme="2026-dark"] .dashboard-tabs { background: var(--card-bg); border-color: var(--border-light); }
html[data-theme="2026"] .preset-btn.active, html[data-theme="2026-dark"] .preset-btn.active {
    background: var(--primary-gradient);
    box-shadow: 0 3px 10px var(--accent-glow);
}

/* ─────────────────────────── Dashboard widgets ─────────────────────────── */
html[data-theme="2026"] .stat-card, html[data-theme="2026-dark"] .stat-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    transition: transform 160ms ease, box-shadow 160ms ease;
}
@media (prefers-reduced-motion: no-preference) {
    html[data-theme="2026"] .stat-card:hover, html[data-theme="2026-dark"] .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
}
html[data-theme="2026"] .stat-icon, html[data-theme="2026-dark"] .stat-icon { border-radius: 12px; }
@media screen {
    html[data-theme="2026-dark"] .stat-icon.blue   { background: var(--primary-light); color: #a5b4fc; }
    html[data-theme="2026-dark"] .stat-icon.green  { background: var(--success-light); color: var(--success); }
    html[data-theme="2026-dark"] .stat-icon.orange { background: var(--warning-light); color: var(--warning); }
    html[data-theme="2026-dark"] .stat-icon.red    { background: var(--danger-light);  color: var(--danger); }
    html[data-theme="2026-dark"] .stat-icon.cyan   { background: var(--info-light);    color: var(--info); }
}

/* ─────────────────────────── Modal ─────────────────────────── */
html[data-theme="2026"] .modal, html[data-theme="2026-dark"] .modal {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    background: var(--card-bg);
    box-shadow: var(--shadow-xl);
}
html[data-theme="2026-dark"] .modal-overlay { background: rgba(2, 4, 10, 0.7); }
html[data-theme="2026"] .modal-overlay {
    background: rgba(23, 23, 60, 0.4);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ─────────────────────────── Detail view / stops ─────────────────────────── */
html[data-theme="2026-dark"] .stop-card { background: var(--bg-soft); }
html[data-theme="2026"] .stop-card, html[data-theme="2026-dark"] .stop-card { border-radius: var(--radius); }
html[data-theme="2026"] .stop-card:hover, html[data-theme="2026-dark"] .stop-card:hover {
    border-color: var(--primary);
}
html[data-theme="2026"] .stop-card:focus-within, html[data-theme="2026-dark"] .stop-card:focus-within {
    box-shadow: 0 0 0 4px var(--ring);
}
html[data-theme="2026-dark"] .stop-number { background: var(--card-bg); }

/* ─────────────────────────── Tom Select ─────────────────────────── */
html[data-theme="2026"] .ts-wrapper .ts-control,
html[data-theme="2026-dark"] .ts-wrapper .ts-control {
    border-radius: 10px !important;
    border-color: var(--border) !important;
    background: var(--card-bg) !important;
    color: var(--text) !important;
}
html[data-theme="2026-dark"] .ts-wrapper .ts-control > input { color: var(--text) !important; }
html[data-theme="2026"] .ts-wrapper.focus .ts-control,
html[data-theme="2026-dark"] .ts-wrapper.focus .ts-control {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--ring) !important;
}
html[data-theme="2026"] .ts-wrapper:not(.focus):not(.disabled) .ts-control:hover,
html[data-theme="2026-dark"] .ts-wrapper:not(.focus):not(.disabled) .ts-control:hover {
    border-color: var(--text-muted) !important;
}
html[data-theme="2026-dark"] .ts-wrapper.disabled .ts-control { background: var(--bg-soft) !important; }
html[data-theme="2026"] .ts-wrapper .ts-dropdown,
html[data-theme="2026-dark"] .ts-wrapper .ts-dropdown {
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="2026-dark"] .ts-wrapper .ts-dropdown .active { background: var(--primary-50); color: var(--primary-hover); }
html[data-theme="2026-dark"] .ts-wrapper .ts-dropdown .ts-option-item:hover { background: var(--bg-soft); }

/* ─────────────────────────── Login ─────────────────────────── */
html[data-theme="2026"] .login-page {
    background:
        radial-gradient(900px 600px at 80% -10%, rgba(124, 58, 237, 0.16), transparent 60%),
        radial-gradient(800px 600px at 0% 110%, rgba(79, 70, 229, 0.14), transparent 55%),
        #0b1020;
}
html[data-theme="2026-dark"] .login-page {
    background:
        radial-gradient(900px 600px at 80% -10%, rgba(124, 58, 237, 0.18), transparent 60%),
        radial-gradient(800px 600px at 0% 110%, rgba(59, 63, 180, 0.16), transparent 55%),
        #070a13;
}
html[data-theme="2026"] .login-box, html[data-theme="2026-dark"] .login-box {
    border-radius: 20px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-light);
    background: var(--card-bg);
}
html[data-theme="2026-dark"] .login-box .form-control {
    background: var(--bg-soft);
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="2026"] .login-box .btn-login, html[data-theme="2026-dark"] .login-box .btn-login {
    background: var(--primary-gradient);
    border: none;
    box-shadow: 0 6px 20px var(--accent-glow);
    border-radius: 12px;
}

/* ─────────────────────────── Misc dark fixes ─────────────────────────── */
/* page loader overlay: the classic near-white sheet would flash over the
   dark UI on every navigation */
html[data-theme="2026-dark"] .page-loader { background: rgba(10, 13, 23, 0.85); }
html[data-theme="2026-dark"] .quick-search input { background: var(--bg-soft); color: var(--text); border-color: var(--border); }
html[data-theme="2026-dark"] .quick-search input:focus { background: var(--card-bg); box-shadow: 0 0 0 4px var(--ring); }
html[data-theme="2026-dark"] .user-menu { background: var(--card-bg); }
html[data-theme="2026-dark"] .user-menu-item { color: var(--text-secondary); }
html[data-theme="2026-dark"] .user-menu-item:hover { background: var(--primary-50); color: var(--primary-hover); }
html[data-theme="2026-dark"] .company-option, html[data-theme="2026-dark"] .lang-option, html[data-theme="2026-dark"] .theme-option { color: var(--text-secondary); border-color: var(--border-light); }
html[data-theme="2026-dark"] .company-option:hover, html[data-theme="2026-dark"] .lang-option:hover, html[data-theme="2026-dark"] .theme-option:hover,
html[data-theme="2026-dark"] .company-option.active, html[data-theme="2026-dark"] .lang-option.active, html[data-theme="2026-dark"] .theme-option.active {
    background: var(--primary-50);
    color: var(--primary-hover);
}
html[data-theme="2026-dark"] .mini-chart .bar { background: var(--primary-light); }
html[data-theme="2026-dark"] .mini-chart .bar:hover { background: var(--primary); }
html[data-theme="2026-dark"] .progress-bar { background: var(--border-light); }
/* page-level "soft box" inline styles (bp form addr/bank/contact rows) */
html[data-theme="2026-dark"] .addr-row, html[data-theme="2026-dark"] .bank-row, html[data-theme="2026-dark"] .contact-row {
    background: var(--bg-soft) !important;
    border-color: var(--border) !important;
}
/* order-list closure chips (page <style> uses light tints) */
html[data-theme="2026-dark"] .cl-chip { filter: saturate(1.1); }

/* scrollbars */
html[data-theme="2026"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="2026"] ::-webkit-scrollbar-thumb { background: #c9d0e2; border-radius: 6px; border: 2px solid var(--bg); }
html[data-theme="2026"] ::-webkit-scrollbar-thumb:hover { background: #aab3cc; }
html[data-theme="2026-dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="2026-dark"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-theme="2026-dark"] ::-webkit-scrollbar-thumb { background: #232a41; border-radius: 6px; border: 2px solid var(--bg); }
html[data-theme="2026-dark"] ::-webkit-scrollbar-thumb:hover { background: #2f3852; }

/* ─────────────────────────── Theme switcher (all themes incl. classic) ───
   The switcher lives in the topbar on every theme, so its skeleton is
   defined WITHOUT the data-theme guard — visually it inherits the
   lang-switcher look in classic. */
.theme-switcher { position: relative; }
.theme-switcher-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.theme-switcher-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-50); }
.theme-switcher-btn svg { width: 15px; height: 15px; }
.theme-dropdown {
    display: none;
    position: absolute; right: 0; top: calc(100% + 6px);
    min-width: 190px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
    box-shadow: var(--shadow-xl);
    z-index: 300;
    overflow: hidden;
}
.theme-dropdown.show { display: block; }
.theme-option {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    font-size: 13px; font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    text-decoration: none;
}
.theme-option:last-child { border-bottom: none; }
.theme-option:hover { background: var(--primary-50); color: var(--primary); }
.theme-option.active { background: var(--primary-50); color: var(--primary); font-weight: 700; }
.theme-swatch {
    width: 16px; height: 16px;
    border-radius: 5px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.12);
}
.theme-swatch.sw-classic { background: linear-gradient(135deg, #2563eb 50%, #f5f7fa 50%); }
.theme-swatch.sw-2026 { background: linear-gradient(135deg, #4f46e5 50%, #eef0f8 50%); }
.theme-swatch.sw-2026-dark { background: linear-gradient(135deg, #6366f1 50%, #0a0d17 50%); }