/* ═══════════════════════════════════════════════════════════
   ZAD App — global theme tokens (sidebar, pages, dashboard)
   ═══════════════════════════════════════════════════════════ */

/* Shared app tokens per theme */
:root, .theme-zad-light {
    --sidebar-w: 280px;
    --sidebar-rail: 72px;
    /* Light page → light sidebar (matches selected theme, not a dark leftover) */
    --sidebar-bg: linear-gradient(175deg, #f7f9fc 0%, #eef3f9 45%, #e3eef8 100%);
    --sidebar-border: rgba(0, 120, 212, 0.14);
    --sidebar-text: #1b1b1b;
    --sidebar-muted: #605e5c;
    --sidebar-divider: rgba(0, 120, 212, 0.14);
    --nav-hover: rgba(0, 120, 212, 0.1);
    --nav-active-bg: linear-gradient(90deg, rgba(0, 120, 212, 0.2), rgba(0, 120, 212, 0.08));
    --nav-active-edge: #0078d4;
    --nav-icon-bg: rgba(0, 120, 212, 0.1);
    --sidebar-tip-bg: #201f1e;
    --sidebar-tip-fg: #fff;
    --dash-hero-bg: linear-gradient(135deg, #004578 0%, #0078d4 55%, #201f1e 100%);
    --dash-hero-glow: rgba(80, 160, 232, 0.35);
    --topbar-border: rgba(0, 120, 212, 0.1);
    --panel-border: rgba(0, 120, 212, 0.08);
}

.theme-zad {
    --sidebar-bg: linear-gradient(175deg, #0f172a 0%, #1e3a5f 42%, #78350f 100%);
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --sidebar-text: #f8fafc;
    --sidebar-muted: rgba(248, 250, 252, 0.7);
    --sidebar-divider: rgba(255, 255, 255, 0.16);
    --nav-hover: rgba(255, 255, 255, 0.1);
    --nav-active-bg: linear-gradient(90deg, rgba(217, 119, 6, 0.4), rgba(30, 58, 95, 0.35));
    --nav-active-edge: #f59e0b;
    --nav-icon-bg: rgba(255, 255, 255, 0.1);
    --sidebar-tip-bg: #0f172a;
    --sidebar-tip-fg: #fff;
    --dash-hero-bg: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #b45309 100%);
    --dash-hero-glow: rgba(245, 158, 11, 0.35);
    --topbar-border: rgba(30, 58, 95, 0.12);
    --panel-border: rgba(30, 58, 95, 0.1);
}

.theme-obsidian {
    --sidebar-bg: linear-gradient(175deg, #030308 0%, #12121c 40%, #312e81 100%);
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --sidebar-text: #f8fafc;
    --sidebar-muted: #cbd5e1;
    --sidebar-divider: rgba(255, 255, 255, 0.14);
    --nav-hover: rgba(255, 255, 255, 0.1);
    --nav-active-bg: linear-gradient(90deg, rgba(99, 102, 241, 0.45), rgba(139, 92, 246, 0.25));
    --nav-active-edge: #a78bfa;
    --nav-icon-bg: rgba(255, 255, 255, 0.08);
    --sidebar-tip-bg: #1e1b4b;
    --sidebar-tip-fg: #f1f5f9;
    --dash-hero-bg: linear-gradient(135deg, #030308 0%, #1e1b4b 50%, #6366f1 100%);
    --dash-hero-glow: rgba(139, 92, 246, 0.4);
    --topbar-border: rgba(255, 255, 255, 0.08);
    --panel-border: rgba(255, 255, 255, 0.1);
    --table-head-bg: rgba(255, 255, 255, 0.07);
    --table-head-text: #c4b5fd;
    --table-row-hover: rgba(255, 255, 255, 0.05);
    --input-bg: rgba(255, 255, 255, 0.07);
    --input-border: rgba(255, 255, 255, 0.14);
    --input-text: #f1f5f9;
    --bg: #0c0c14;
    --bg-alt: #1a1a28;
    --card: rgba(22, 22, 32, 0.92);
    --text: #f8fafc;
    --text-muted: #cbd5e1;
    --purple: #a5b4fc;
    --magenta: #c4b5fd;
    --accent: #818cf8;
}

.theme-copper {
    --sidebar-bg: linear-gradient(175deg, #431407 0%, #7c2d12 45%, #c2410c 100%);
    --sidebar-border: rgba(255, 255, 255, 0.12);
    --sidebar-text: #fff7ed;
    --sidebar-muted: rgba(255, 247, 237, 0.72);
    --sidebar-divider: rgba(255, 255, 255, 0.16);
    --nav-hover: rgba(255, 255, 255, 0.1);
    --nav-active-bg: linear-gradient(90deg, rgba(251, 146, 60, 0.4), rgba(154, 52, 18, 0.35));
    --nav-active-edge: #fb923c;
    --nav-icon-bg: rgba(255, 255, 255, 0.1);
    --sidebar-tip-bg: #7c2d12;
    --sidebar-tip-fg: #fff7ed;
    --dash-hero-bg: linear-gradient(135deg, #431407 0%, #9a3412 50%, #ea580c 100%);
    --dash-hero-glow: rgba(251, 146, 60, 0.35);
    --topbar-border: rgba(154, 52, 18, 0.15);
    --panel-border: rgba(154, 52, 18, 0.1);
}

/* ─── Apply theme to app shell ─── */
.app-shell {
    background: var(--bg);
    color: var(--text);
}

.app-shell .sidebar {
    background: var(--sidebar-bg) !important;
    border-inline-end: 1px solid var(--sidebar-border);
    color: var(--sidebar-text, #fff);
}

.app-shell .sidebar-brand {
    border-bottom-color: var(--sidebar-divider, rgba(255,255,255,0.12));
}
.app-shell .brand-text strong { color: var(--sidebar-text); }
.app-shell .brand-text span { color: var(--sidebar-muted); opacity: 1; }
.app-shell .nav-search-field {
    border-color: color-mix(in srgb, var(--sidebar-text) 16%, transparent);
    background: color-mix(in srgb, var(--sidebar-text) 7%, transparent);
}
.app-shell .nav-search-field:focus-within {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.app-shell .nav-search-input { color: var(--sidebar-text); }
.app-shell .nav-search-input::placeholder,
.app-shell .nav-search-icon { color: var(--sidebar-muted); }
.app-shell .nav-search-toggle {
    color: var(--sidebar-text);
    border-color: color-mix(in srgb, var(--sidebar-text) 18%, transparent);
    background: color-mix(in srgb, var(--sidebar-text) 8%, transparent);
}
.app-shell .nav-divider {
    background: linear-gradient(90deg, transparent, var(--sidebar-divider), transparent);
}
.app-shell .nav-link {
    color: var(--sidebar-text);
}
.app-shell .nav-link:hover {
    background: var(--nav-hover);
    color: var(--sidebar-text);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.app-shell .nav-link.active {
    background: var(--nav-active-bg) !important;
    color: var(--sidebar-text) !important;
    box-shadow: inset 4px 0 0 var(--nav-active-edge), 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}
.app-shell.rtl .nav-link.active {
    box-shadow: inset -4px 0 0 var(--nav-active-edge), 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}
.app-shell .nav-icon-wrap {
    background: var(--nav-icon-bg);
}
.app-shell .nav-sublink-dot {
    background: color-mix(in srgb, var(--sidebar-text) 35%, transparent);
}
.app-shell .nav-sublink.active .nav-sublink-dot {
    background: var(--nav-active-edge);
    box-shadow: 0 0 6px var(--nav-active-edge);
}
.app-shell .sidebar-user {
    border-top-color: var(--sidebar-divider, rgba(255,255,255,0.12));
}
.app-shell .user-name { color: var(--sidebar-text); }
.app-shell .user-meta small { color: var(--sidebar-muted); opacity: 1; }
.app-shell .btn-logout {
    border-color: color-mix(in srgb, var(--sidebar-text) 22%, transparent);
    color: var(--sidebar-text);
    background: color-mix(in srgb, #dc2626 22%, transparent);
}
.app-shell .btn-logout:hover {
    background: color-mix(in srgb, #dc2626 38%, transparent);
}

.app-shell.theme-zad-light .btn-logout {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.28);
    color: #b91c1c;
}
.app-shell.theme-zad-light .btn-logout:hover {
    background: rgba(220, 38, 38, 0.18);
}

.app-shell .user-avatar,
.app-shell .nav-icon-wrap.accent {
    background: var(--gradient) !important;
    color: #ffffff !important;
}

/* Light theme: accent chips use a bright blue (avoid black end of --gradient) + white glyphs */
.app-shell.theme-zad-light .user-avatar,
.app-shell.theme-zad-light .nav-icon-wrap.accent {
    background: linear-gradient(135deg, #0078d4 0%, #106ebe 50%, #005a9e 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 8px rgba(0, 90, 158, 0.28);
}
.app-shell.theme-zad-light .nav-icon-wrap.accent .nav-icon,
.app-shell.theme-zad-light .user-avatar {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    filter: drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.85));
}
.app-shell.theme-zad-light .nav-icon-wrap:not(.accent) {
    background: rgba(0, 120, 212, 0.12);
}
.app-shell.theme-zad-light .nav-icon-wrap:not(.accent) .nav-icon {
    filter: none;
    color: inherit;
    -webkit-text-fill-color: unset;
}

.app-shell .nav-menu::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent), var(--scrollbar-thumb-hover, var(--purple)));
}

.app-shell .main-wrapper {
    background: var(--bg);
}

.app-shell header.top-bar {
    background: var(--card);
    border-bottom-color: var(--topbar-border);
}

.app-shell .panel-card,
.app-shell .stat-card,
.app-shell .data-table-wrap {
    border-color: var(--panel-border);
}

.app-shell .dash-hero {
    background: var(--dash-hero-bg) !important;
    box-shadow: 0 16px 40px color-mix(in srgb, var(--purple) 25%, transparent);
}

.app-shell .dash-hero::before {
    background: radial-gradient(circle at 85% 20%, var(--dash-hero-glow), transparent 48%) !important;
}

.app-shell .panel-title {
    color: var(--magenta);
}

.app-shell .btn-primary,
.app-shell .settings-btn:hover {
    background: var(--gradient) !important;
}

.app-shell .menu-toggle.is-open {
    background: var(--gradient) !important;
}

/* Obsidian dark pages */
.theme-obsidian.app-shell .top-bar,
body.theme-obsidian .app-shell .top-bar {
    background: rgba(16, 16, 24, 0.92);
    backdrop-filter: blur(12px);
    color: var(--text);
}

.theme-obsidian.app-shell .top-title,
body.theme-obsidian .app-shell .top-title { color: var(--text); }

.theme-obsidian.app-shell .panel-card,
.theme-obsidian.app-shell .stat-card,
body.theme-obsidian .app-shell .panel-card,
body.theme-obsidian .app-shell .stat-card {
    background: var(--card);
    color: var(--text);
    backdrop-filter: blur(10px);
}

/* POS columns: no backdrop-filter — it creates a fixed containing block and mis-places dropdowns */
.theme-obsidian.app-shell .pos-left.panel-card,
.theme-obsidian.app-shell .pos-right.panel-card,
body.theme-obsidian .app-shell .pos-left.panel-card,
body.theme-obsidian .app-shell .pos-right.panel-card,
.app-shell .pos-left.panel-card,
.app-shell .pos-right.panel-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
}

body.theme-obsidian .app-shell .reports-hub-card,
.theme-obsidian.app-shell .reports-hub-card {
    background: var(--card) !important;
    color: var(--text) !important;
    border-color: color-mix(in srgb, var(--accent) 28%, transparent) !important;
}
body.theme-obsidian .app-shell .reports-hub-card strong,
.theme-obsidian.app-shell .reports-hub-card strong,
body.theme-obsidian .app-shell .reports-hub-section h3,
.theme-obsidian.app-shell .reports-hub-section h3 {
    color: var(--text) !important;
}

/* Stat / KPI icon chips: keep readable glyphs on dark themes */
.theme-obsidian .stat-icon-wrap,
body.theme-obsidian .stat-icon-wrap,
.theme-obsidian.app-shell .stat-icon-wrap,
body.theme-obsidian .app-shell .stat-icon-wrap {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
    color: #f8fafc;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.theme-obsidian .stat-icon-wrap.sales,
body.theme-obsidian .stat-icon-wrap.sales {
    background: color-mix(in srgb, #a78bfa 28%, rgba(255, 255, 255, 0.06));
    color: #e9d5ff;
}
.theme-obsidian .stat-icon-wrap.purchase,
body.theme-obsidian .stat-icon-wrap.purchase {
    background: color-mix(in srgb, #60a5fa 28%, rgba(255, 255, 255, 0.06));
    color: #bfdbfe;
}
.theme-obsidian .stat-icon-wrap.invoice,
body.theme-obsidian .stat-icon-wrap.invoice {
    background: color-mix(in srgb, #f472b6 26%, rgba(255, 255, 255, 0.06));
    color: #fbcfe8;
}
.theme-obsidian .stat-icon-wrap.stock,
body.theme-obsidian .stat-icon-wrap.stock {
    background: color-mix(in srgb, #34d399 26%, rgba(255, 255, 255, 0.06));
    color: #a7f3d0;
}
.theme-obsidian .stat-icon-wrap.warn,
body.theme-obsidian .stat-icon-wrap.warn {
    background: color-mix(in srgb, #fbbf24 28%, rgba(255, 255, 255, 0.06));
    color: #fde68a;
}

/* Nav text glyphs — contrast on dark sidebars */
.theme-obsidian .nav-icon-wrap:not(.accent) .nav-icon,
body.theme-obsidian .nav-icon-wrap:not(.accent) .nav-icon,
.theme-zad .nav-icon-wrap:not(.accent) .nav-icon,
.theme-copper .nav-icon-wrap:not(.accent) .nav-icon {
    color: #f1f5f9;
}
.app-shell.theme-zad-light .nav-icon-wrap:not(.accent) .nav-icon {
    color: #0f172a;
}

.theme-obsidian.app-shell .page-body,
body.theme-obsidian .app-shell .page-body {
    background: var(--gradient-soft);
}

/* ─── Obsidian: readable text on all pages ─── */
.theme-obsidian.app-shell,
body.theme-obsidian .app-shell {
    color: var(--text);
}

.theme-obsidian.app-shell .panel-card,
.theme-obsidian.app-shell .chart-panel,
.theme-obsidian.app-shell .panel-card-pro,
body.theme-obsidian .app-shell .panel-card,
body.theme-obsidian .app-shell .chart-panel {
    background: var(--card);
    color: var(--text);
    border-color: var(--panel-border);
}

.theme-obsidian.app-shell .panel-title,
.theme-obsidian.app-shell .panel-meta,
.theme-obsidian.app-shell .form-row label,
.theme-obsidian.app-shell .status-msg,
body.theme-obsidian .app-shell .panel-title,
body.theme-obsidian .app-shell .panel-meta,
body.theme-obsidian .app-shell .form-row label {
    color: var(--magenta);
}

.theme-obsidian.app-shell .top-name,
.theme-obsidian.app-shell .low-name,
.theme-obsidian.app-shell .top-title,
body.theme-obsidian .app-shell .top-name,
body.theme-obsidian .app-shell .low-name {
    color: var(--text);
}

.theme-obsidian.app-shell .link-more,
.theme-obsidian.app-shell .bar-val,
body.theme-obsidian .app-shell .link-more,
body.theme-obsidian .app-shell .bar-val {
    color: var(--purple);
}

.theme-obsidian.app-shell .stat-value,
.theme-obsidian.app-shell .dash-table .amount,
.theme-obsidian.app-shell .grand-total,
body.theme-obsidian .app-shell .stat-value,
body.theme-obsidian .app-shell .dash-table .amount {
    color: var(--accent);
}

.theme-obsidian.app-shell .inv-badge,
body.theme-obsidian .app-shell .inv-badge {
    background: rgba(99, 102, 241, 0.28);
    color: #e0e7ff;
}

.theme-obsidian.app-shell .table-wrap,
body.theme-obsidian .app-shell .table-wrap {
    border-color: var(--panel-border);
    background: rgba(0, 0, 0, 0.15);
}

.theme-obsidian.app-shell .data-table th,
.theme-obsidian.app-shell .report-table th,
body.theme-obsidian .app-shell .data-table th,
body.theme-obsidian .app-shell .report-table th {
    background: var(--table-head-bg, rgba(255,255,255,0.07)) !important;
    color: var(--table-head-text, #c4b5fd) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-obsidian.app-shell .data-table td,
.theme-obsidian.app-shell .report-table td,
body.theme-obsidian .app-shell .data-table td,
body.theme-obsidian .app-shell .report-table td {
    color: var(--text) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-obsidian.app-shell .data-table tbody tr:hover,
.theme-obsidian.app-shell .report-table tbody tr:hover,
body.theme-obsidian .app-shell .data-table tbody tr:hover {
    background: var(--table-row-hover, rgba(255,255,255,0.05)) !important;
}

.theme-obsidian.app-shell .field-input,
.theme-obsidian.app-shell input:not([type="checkbox"]):not([type="radio"]),
.theme-obsidian.app-shell select,
.theme-obsidian.app-shell textarea,
body.theme-obsidian .app-shell .field-input,
body.theme-obsidian .app-shell input:not([type="checkbox"]):not([type="radio"]),
body.theme-obsidian .app-shell select,
body.theme-obsidian .app-shell textarea {
    background: var(--input-bg, rgba(255,255,255,0.07)) !important;
    border-color: var(--input-border, rgba(255,255,255,0.14)) !important;
    color: var(--input-text, #f1f5f9) !important;
}

/* Compact filter chips keep readable ink even when theme forces light input text */
.theme-obsidian.app-shell .cf-pair-ctrl,
body.theme-obsidian .app-shell .cf-pair-ctrl {
    color: var(--text, #f1f5f9) !important;
    background: color-mix(in srgb, var(--accent, #8b5cf6) 14%, transparent) !important;
}
.theme-obsidian.app-shell .data-table thead th,
body.theme-obsidian .app-shell .data-table thead th {
    color: var(--text, #f1f5f9) !important;
}

.theme-obsidian.app-shell .field-input::placeholder,
body.theme-obsidian .app-shell .field-input::placeholder {
    color: #64748b !important;
}

.theme-obsidian.app-shell .btn-secondary,
body.theme-obsidian .app-shell .btn-secondary,
.theme-obsidian .settings-drawer .btn-secondary,
body.theme-obsidian .settings-drawer .btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text) !important;
}

.theme-obsidian.app-shell .btn-secondary:hover,
body.theme-obsidian .app-shell .btn-secondary:hover,
.theme-obsidian .settings-drawer .btn-secondary:hover,
body.theme-obsidian .settings-drawer .btn-secondary:hover {
    color: var(--accent) !important;
}

.theme-obsidian.app-shell .tab-btn:not(.active),
.theme-obsidian.app-shell .preset-chip:not(.active),
body.theme-obsidian .app-shell .tab-btn:not(.active),
body.theme-obsidian .app-shell .preset-chip:not(.active),
.theme-obsidian .settings-drawer .tab-btn:not(.active),
.theme-obsidian .settings-drawer .preset-chip:not(.active) {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

.theme-obsidian.app-shell .tab-btn:hover:not(.active),
.theme-obsidian.app-shell .preset-chip:hover:not(.active),
body.theme-obsidian .app-shell .tab-btn:hover:not(.active),
body.theme-obsidian .app-shell .preset-chip:hover:not(.active) {
    color: var(--accent) !important;
}

.theme-obsidian.app-shell .notification-panel,
.theme-obsidian.app-shell .settings-drawer,
body.theme-obsidian .app-shell .notification-panel,
body.theme-obsidian .app-shell .settings-drawer {
    background: #16161f;
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-obsidian.app-shell .ops-alert-panel,
body.theme-obsidian .app-shell .ops-alert-panel {
    background: #1a1612;
    color: var(--text);
    border-color: color-mix(in srgb, #f59e0b 40%, rgba(255, 255, 255, 0.12));
    border-top-color: #f59e0b;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.theme-obsidian.app-shell .ops-alert-panel-head,
body.theme-obsidian .app-shell .ops-alert-panel-head {
    background: color-mix(in srgb, #f59e0b 16%, #1a1612);
    border-bottom-color: rgba(245, 158, 11, 0.28);
}
.theme-obsidian.app-shell .ops-alert-panel-head > strong,
body.theme-obsidian .app-shell .ops-alert-panel-head > strong {
    color: #fde68a !important;
}
.theme-obsidian.app-shell .ops-alert-panel-head .btn-secondary,
.theme-obsidian.app-shell .ops-alert-panel-head .btn-sm,
body.theme-obsidian .app-shell .ops-alert-panel-head .btn-secondary,
body.theme-obsidian .app-shell .ops-alert-panel-head .btn-sm {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}
.theme-obsidian.app-shell .ops-alert-item,
body.theme-obsidian .app-shell .ops-alert-item {
    color: var(--text);
}
.theme-obsidian.app-shell .ops-alert-item:hover,
body.theme-obsidian .app-shell .ops-alert-item:hover {
    background: rgba(245, 158, 11, 0.1);
}
.theme-obsidian.app-shell .ops-alert-item .n-body strong,
body.theme-obsidian .app-shell .ops-alert-item .n-body strong {
    color: #f8fafc !important;
}
.theme-obsidian.app-shell .ops-alert-item .n-body small,
body.theme-obsidian .app-shell .ops-alert-item .n-body small {
    color: #cbd5e1 !important;
}
.theme-obsidian.app-shell .ops-alert-item .ops-count,
body.theme-obsidian .app-shell .ops-alert-item .ops-count {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}
.theme-obsidian.app-shell .ops-alert-item.sev-critical .ops-count,
body.theme-obsidian .app-shell .ops-alert-item.sev-critical .ops-count {
    background: color-mix(in srgb, #ef4444 28%, transparent);
    color: #fecaca;
}
.theme-obsidian.app-shell .ops-alert-item.sev-warn .ops-count,
body.theme-obsidian .app-shell .ops-alert-item.sev-warn .ops-count {
    background: color-mix(in srgb, #f59e0b 28%, transparent);
    color: #fde68a;
}

.theme-obsidian.app-shell .notification-panel-head > strong,
body.theme-obsidian .app-shell .notification-panel-head > strong {
    color: #f8fafc !important;
}
.theme-obsidian.app-shell .notification-panel-head,
body.theme-obsidian .app-shell .notification-panel-head {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.theme-obsidian.app-shell .notification-item,
.theme-obsidian.app-shell .settings-link,
body.theme-obsidian .app-shell .notification-item,
body.theme-obsidian .app-shell .settings-link {
    color: var(--text);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.theme-obsidian.app-shell .notification-item:hover,
.theme-obsidian.app-shell .settings-link:hover,
body.theme-obsidian .app-shell .notification-item:hover,
body.theme-obsidian .app-shell .settings-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--accent);
}

.theme-obsidian.app-shell .report-summary,
.theme-obsidian.app-shell .pick-row,
.theme-obsidian.app-shell .pos-totals,
.theme-obsidian.app-shell .pay-tender-panel,
.theme-obsidian.app-shell .pos-margin-panel,
body.theme-obsidian .app-shell .report-summary,
body.theme-obsidian .app-shell .pick-row,
body.theme-obsidian .app-shell .pos-totals,
body.theme-obsidian .app-shell .pay-tender-panel,
body.theme-obsidian .app-shell .pos-margin-panel,
.app-shell.theme-zad .pos-totals,
.app-shell.theme-zad .pay-tender-panel,
.app-shell.theme-zad .pos-margin-panel,
body.theme-zad .app-shell .pos-totals,
body.theme-zad .app-shell .pay-tender-panel,
body.theme-zad .app-shell .pos-margin-panel {
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
    color: var(--text);
}

.theme-obsidian.app-shell .scan-input,
body.theme-obsidian .app-shell .scan-input {
    background: var(--input-bg);
    color: var(--text);
    border-color: var(--accent);
}

.theme-obsidian.app-shell .product-card,
body.theme-obsidian .app-shell .product-card {
    background: var(--card);
    border-color: var(--panel-border);
    color: var(--text);
}

.theme-obsidian.app-shell .p-price,
body.theme-obsidian .app-shell .p-price {
    color: var(--accent);
}

.theme-obsidian.app-shell .invoice-detail-tabs .tab-btn,
body.theme-obsidian .app-shell .invoice-detail-tabs .tab-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text);
}

.theme-obsidian.app-shell .modal-content,
.theme-obsidian.app-shell .blazored-modal,
.theme-obsidian.app-shell .modal-card,
body.theme-obsidian .app-shell .modal-content,
body.theme-obsidian .app-shell .modal-card {
    background: #16161f;
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-obsidian.app-shell .modal-card h3,
.theme-obsidian.app-shell .modal-card h4,
body.theme-obsidian .app-shell .modal-card h3 {
    color: var(--text);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.theme-obsidian.app-shell .perm-check,
body.theme-obsidian .app-shell .perm-check {
    color: var(--text) !important;
}

.theme-obsidian.app-shell .muted,
.theme-obsidian.app-shell .dash-empty,
.theme-obsidian.app-shell .top-body small,
body.theme-obsidian .app-shell .muted,
body.theme-obsidian .app-shell .dash-empty {
    color: var(--text-muted) !important;
}

.theme-obsidian.app-shell .low-meter,
body.theme-obsidian .app-shell .low-meter {
    background: rgba(255, 255, 255, 0.1);
}

.theme-obsidian.app-shell .top-bar-wrap,
body.theme-obsidian .app-shell .top-bar-wrap {
    background: rgba(255, 255, 255, 0.1);
}

.theme-obsidian.app-shell .btn-remove,
.theme-obsidian.app-shell .btn-remove-sm,
body.theme-obsidian .app-shell .btn-remove {
    background: rgba(248, 113, 113, 0.15);
    color: #fca5a5;
}

.theme-obsidian.app-shell .lang-switcher.lang-compact,
body.theme-obsidian .app-shell .lang-switcher.lang-compact {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.theme-obsidian.app-shell .lang-compact .lang-btn,
body.theme-obsidian .app-shell .lang-compact .lang-btn {
    color: var(--text-muted);
}

.theme-obsidian.app-shell .lang-compact .lang-btn.active,
body.theme-obsidian .app-shell .lang-compact .lang-btn.active {
    color: #fff;
}

.app-shell.theme-obsidian .pos-queue-status.status-0,
.app-shell.theme-zad .pos-queue-status.status-0,
.app-shell.theme-copper .pos-queue-status.status-0 {
    background: rgba(245, 158, 11, 0.22) !important;
    color: #fbbf24 !important;
    -webkit-text-fill-color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.4);
}
.app-shell.theme-obsidian .pos-queue-status.status-1,
.app-shell.theme-zad .pos-queue-status.status-1,
.app-shell.theme-copper .pos-queue-status.status-1 {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
    -webkit-text-fill-color: #4ade80;
    border-color: rgba(34, 197, 94, 0.35);
}
.app-shell.theme-obsidian .pos-queue-status.status-2,
.app-shell.theme-zad .pos-queue-status.status-2,
.app-shell.theme-copper .pos-queue-status.status-2 {
    background: rgba(148, 163, 184, 0.18) !important;
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.3);
}
.app-shell.theme-obsidian .pos-mode-tabs-main > button:not(.active),
.app-shell.theme-zad .pos-mode-tabs-main > button:not(.active),
.app-shell.theme-copper .pos-mode-tabs-main > button:not(.active) {
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}

.theme-obsidian.app-shell .report-header-pro,
body.theme-obsidian .app-shell .report-header-pro {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, var(--card) 60%);
    border-color: var(--panel-border);
}

.theme-obsidian.app-shell .report-header-org,
.theme-obsidian.app-shell .report-header-title,
body.theme-obsidian .app-shell .report-header-org {
    color: var(--text);
}

.theme-obsidian.app-shell .report-header-doc,
body.theme-obsidian .app-shell .report-header-doc {
    border-inline-start-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 640px) {
    .report-header-pro > .report-header-brand-row {
        flex-wrap: wrap;
        align-items: stretch;
    }
    .report-header-main {
        width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
    }
    .report-header-meta { white-space: normal; }
    .report-header-doc {
        align-items: flex-start;
        text-align: start;
        margin-inline-start: 0;
        border-inline-start: none;
        border-top: 1px solid var(--bg-alt);
        padding-top: 0.45rem;
        padding-inline-start: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

/* Compact top bar */
header.top-bar {
    min-height: 52px !important;
    padding: 0.35rem 0.9rem !important;
    gap: 0.5rem !important;
}

.top-bar-start {
    gap: 0.55rem !important;
    min-height: 36px !important;
}

.top-greeting {
    font-size: 0.62rem !important;
    margin-bottom: 0 !important;
    line-height: 1.1;
}

.top-title {
    font-size: 1.05rem !important;
    line-height: 1.15 !important;
}

.menu-toggle {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    gap: 4px !important;
}

.menu-bar {
    width: 16px !important;
    height: 2px !important;
}

.menu-toggle.is-open .menu-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-open .menu-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.top-bar-end {
    gap: 0.35rem !important;
}

.notification-bell-btn {
    padding: 0.3rem 0.45rem !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important;
}

.theme-strip-compact {
    padding: 0.25rem 0.45rem !important;
    gap: 0.35rem !important;
    background: var(--bg-alt);
    border: 1px solid var(--panel-border);
}

.theme-strip-compact .theme-swatch {
    width: 22px !important;
    height: 22px !important;
}

.theme-strip-compact .theme-swatch-ring {
    inset: -2px !important;
    border-width: 1.5px !important;
}

.lang-switcher.lang-compact {
    padding: 0.15rem !important;
    gap: 0.15rem !important;
}

.lang-compact .lang-btn {
    padding: 0.25rem 0.45rem !important;
    font-size: 0.72rem !important;
}

.settings-btn {
    padding: 0.35rem 0.55rem !important;
    font-size: 0.72rem !important;
    min-height: 32px !important;
    border-radius: 8px !important;
}

.settings-btn svg {
    width: 17px !important;
    height: 17px !important;
}

/* Responsive */
@media (max-width: 768px) {
    header.top-bar {
        min-height: 48px !important;
        padding: 0.3rem 0.65rem !important;
    }

    .top-greeting { display: none; }

    .top-title { font-size: 0.95rem !important; }

    .theme-strip-compact .theme-swatch {
        width: 20px !important;
        height: 20px !important;
    }

    .page-body {
        padding: 0.85rem !important;
    }

    .dash-hero {
        padding: 0.9rem 1rem !important;
    }

    .dash-hero-title {
        font-size: 1.15rem !important;
    }

    .stat-card {
        padding: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    .top-bar-end .theme-strip-compact {
        display: none;
    }
}