/* ===== Dashboard Custom Styles ===== */

/* ===== Design Tokens (Phase 01) ===== */
:root {
    /* Color — light mode default */
    --color-bg: #f9fafb;
    --color-surface: #ffffff;
    --color-surface-alt: #f9fafb;
    --color-surface-hover: #f3f4f6;
    --color-border: #e5e7eb;
    --color-border-accent: #d1d5db;
    --color-text: #111827;
    --color-text-muted: #4b5563;
    --color-text-dim: #9ca3af;

    /* Brand + semantic */
    --color-accent: #3b82f6;
    --color-accent-hover: #2563eb;
    --color-accent-bg: #eff6ff;
    --color-success: #22c55e;
    --color-success-bg: #dcfce7;
    --color-success-text: #166534;
    --color-warn: #eab308;
    --color-warn-bg: #fef9c3;
    --color-warn-text: #854d0e;
    --color-danger: #ef4444;
    --color-danger-bg: #fef2f2;
    --color-danger-text: #dc2626;

    /* ROAS tiers */
    --color-roas-good: #15803d;
    --color-roas-ok: #a16207;
    --color-roas-bad: #dc2626;
    --color-roas-good-bg: #f0fdf4;
    --color-roas-ok-bg: #fefce8;
    --color-roas-bad-bg: #fef2f2;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fs-xs: 11px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-lg: 16px;
    --fs-xl: 20px;
    --fs-2xl: 24px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}

/* Dark mode token overrides */
html.dark :root,
html.dark {
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-surface-alt: #172033;
    --color-surface-hover: #273548;
    --color-border: #334155;
    --color-border-accent: #475569;
    --color-text: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-text-dim: #64748b;

    --color-accent: #3b82f6;
    --color-accent-hover: #60a5fa;
    --color-accent-bg: #1e3a8a33;
    --color-success-bg: #14532d66;
    --color-success-text: #86efac;
    --color-warn-bg: #713f1233;
    --color-warn-text: #fde68a;
    --color-danger-bg: #7f1d1d33;
    --color-danger-text: #fca5a5;

    --color-roas-good: #86efac;
    --color-roas-ok: #fde68a;
    --color-roas-bad: #fca5a5;
    --color-roas-good-bg: #14532d33;
    --color-roas-ok-bg: #713f1233;
    --color-roas-bad-bg: #7f1d1d33;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* Body + font baseline */
body {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tabular numerals for all numeric columns — align cột số */
.num,
td.col-num,
.data-table tfoot td,
.kpi-value,
.budget-display {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Ad ID badge */
.ad-id-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    border-radius: 3px;
    font-size: 10px;
    font-family: monospace;
    cursor: pointer;
    vertical-align: middle;
    transition: all .15s;
}
.ad-id-badge:hover {
    background: #e0e7ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

/* Budget display + edit */
.budget-display {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.budget-edit-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 10px;
    padding: 0 2px;
    opacity: 0.4;
    transition: opacity 0.15s;
}
.budget-edit-btn:hover {
    opacity: 1;
}

/* Account badge (multi-account) */
.acc-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 0px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    vertical-align: middle;
    line-height: 16px;
    white-space: nowrap;
}

/* Date preset buttons */
.date-preset {
    padding: 4px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b7280;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.date-preset:hover {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}
.date-preset.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

/* KPI Cards */
.kpi-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: box-shadow 0.2s;
}
.kpi-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.kpi-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    line-height: 1.2;
}
.kpi-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Tab buttons */
.tab-btn {
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.tab-btn:hover { color: #2563eb; }
.tab-btn.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-weight: 600;
}

/* Tab panels */
.tab-panel.hidden { display: none; }

/* Table wrapper */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    max-width: 100%;
}

/* Data table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    white-space: nowrap;
}
.data-table thead th {
    padding: 5px 6px;
    text-align: left;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    position: relative;
    user-select: none;
}
.data-table thead th.sortable { cursor: pointer; }
.data-table thead th.sortable:hover { color: #2563eb; }
.data-table thead th.sorted-asc::after { content: ' ▲'; font-size: 0.5rem; }
.data-table thead th.sorted-desc::after { content: ' ▼'; font-size: 0.5rem; }

/* Column groups */
.column-group-row th {
    padding: 3px 6px !important;
    font-size: 0.5625rem !important;
    text-align: center;
}
.group-meta {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-bottom: 2px solid #93c5fd !important;
}
.group-shopify {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border-bottom: 2px solid #86efac !important;
}
.group-spacer {
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Column separator between META and SHOPIFY */
.col-sep {
    border-left: 3px solid #d1d5db !important;
}
thead .col-sep,
.column-group-row .group-meta.col-sep {
    border-left: 3px solid #d1d5db !important;
}

/* Table cells */
.data-table tbody td {
    padding: 5px 6px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}
.data-table tbody tr:hover td { background: #f8fafc; }
.col-name {
    min-width: 220px;
    max-width: 300px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

/* Resize handle on name column header */
.col-name-resize {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    background: transparent;
    z-index: 12;
}
.col-name-resize:hover,
.col-name-resize.dragging {
    background: #3b82f6;
}
.col-status { min-width: 60px; }
.col-num {
    text-align: right !important;
    min-width: 50px;
}

/* Sticky first column */
.sticky-col { position: sticky; left: 0; z-index: 10; background: inherit; }
thead .sticky-col { background: #f9fafb; z-index: 11; }
tbody .sticky-col { background: #fff; }
tbody tr:hover .sticky-col { background: #f8fafc; }

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
}
.status-active { background: #dcfce7; color: #166534; }
.status-paused { background: #fef9c3; color: #854d0e; }
.status-deleted { background: #f3f4f6; color: #6b7280; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.status-dot-active { background: #22c55e; }
.status-dot-paused { background: #eab308; }
.status-dot-deleted { background: #9ca3af; }

/* OAuth usage code block */
.oauth-usage-block {
    max-height: 200px;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Campaign comparison button */
.compare-btn {
    background: transparent;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 4px;
    font-size: 11px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity .15s, background .15s;
    vertical-align: middle;
}
/* Nhãn đối soát Meta vs Shopify (job 06:00 VN) */
.reconcile-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}
.reconcile-badge.under { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }
.reconcile-badge.over { background: #dbeafe; color: #1e40af; border: 1px solid #3b82f6; }
.dark .reconcile-badge.under { background: #78350f; color: #fde68a; }
.dark .reconcile-badge.over { background: #1e3a8a; color: #bfdbfe; }

.compare-btn:hover {
    opacity: 1;
    background: var(--color-accent-bg, #eff6ff);
    border-color: var(--color-accent, #3b82f6);
}

/* Ad row parent campaign info (Ads tab) */
.ad-parent-info {
    margin-top: 3px;
    font-size: 10px;
    color: var(--color-text-dim, #9ca3af);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ad-parent-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.ad-parent-camp-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
.ad-parent-label {
    opacity: 0.7;
    margin-right: 2px;
}

/* Auto-refresh toggle button */
.auto-refresh-on {
    color: var(--color-success, #22c55e);
    background: var(--color-success-bg, #dcfce7);
}
.auto-refresh-on:hover {
    background: #bbf7d0;
}
.auto-refresh-off {
    color: var(--color-text-dim, #9ca3af);
    background: transparent;
    text-decoration: line-through;
}
.auto-refresh-off:hover {
    background: var(--color-surface-hover, #f3f4f6);
}
html.dark .auto-refresh-on { background: rgba(34, 197, 94, 0.15); }
html.dark .auto-refresh-off { color: #64748b; }

/* Date navigation arrow buttons (prev/next day) */
.date-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.date-nav-btn:hover {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}
.date-nav-btn:active {
    transform: scale(0.95);
}
html.dark .date-nav-btn {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}
html.dark .date-nav-btn:hover {
    background: #334155;
    color: #60a5fa;
    border-color: #475569;
}

/* Embed mode: when loaded inside Workplace iframe (?embed=1) */
.embed-mode > body > header,
body.embed-mode > header {
    display: none !important;
}
body.embed-mode {
    padding-top: 8px;
}
/* Keep date filter + tab nav + content visible */

/* Campaign ON/OFF toggle switch */
.camp-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    cursor: pointer;
    vertical-align: middle;
}
.camp-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.camp-toggle-slider {
    position: absolute;
    inset: 0;
    background: #9ca3af;
    border-radius: 10px;
    transition: background .18s;
}
.camp-toggle-slider::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .18s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.camp-toggle input:checked + .camp-toggle-slider { background: #22c55e; }
.camp-toggle input:checked + .camp-toggle-slider::before { transform: translateX(16px); }
.camp-toggle input:disabled + .camp-toggle-slider { opacity: 0.5; cursor: wait; }

/* ROAS color classes */
.roas-good { color: #15803d; font-weight: 600; }
.roas-ok { color: #a16207; font-weight: 600; }
.roas-bad { color: #dc2626; font-weight: 600; }
.roas-cell-good { background: #f0fdf4; }
.roas-cell-ok { background: #fefce8; }
.roas-cell-bad { background: #fef2f2; }

/* ACR color classes */
.acr-good { color: #15803d; }
.acr-ok { color: #a16207; }
.acr-bad { color: #dc2626; font-weight: 600; }

/* Table footer */
.data-table tfoot td {
    padding: 5px 6px;
    font-weight: 600;
    font-size: 0.75rem;
    background: #f9fafb;
    border-top: 2px solid #e5e7eb;
    color: #111827;
}

/* Chart container */
.chart-container { position: relative; height: 300px; }

/* ===== Expand toggle — fire dot style ===== */
.campaign-name-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}
.expand-toggle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: #e5e7eb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    color: #6b7280;
    flex-shrink: 0;
    transition: all 0.2s;
    line-height: 1;
}
.expand-toggle:hover {
    background: #dbeafe;
    color: #2563eb;
    transform: scale(1.15);
}
.expand-toggle.expanded {
    background: #3b82f6;
    color: #fff;
    transform: scale(1.15);
}
.expand-spacer {
    width: 20px;
    display: inline-block;
    flex-shrink: 0;
}

/* Child rows (adsets under campaigns, ads under adsets) */
.child-row td {
    background: #fafbfc !important;
    font-size: 0.75rem;
}
.child-row .sticky-col {
    padding-left: 30px !important;
    background: #fafbfc !important;
}
.child-row:hover td,
.child-row:hover .sticky-col { background: #f0f4ff !important; }

.grandchild-row td {
    background: #f5f6f8 !important;
    font-size: 0.6875rem;
}
.grandchild-row .sticky-col {
    padding-left: 50px !important;
    background: #f5f6f8 !important;
}
.grandchild-row:hover td,
.grandchild-row:hover .sticky-col { background: #eef2ff !important; }

/* VS META indicator */
.vs-meta-up { color: #15803d; font-weight: 500; }
.vs-meta-down { color: #dc2626; font-weight: 500; }
.vs-meta-neutral { color: #9ca3af; }

/* Order link */
.order-link {
    color: #2563eb;
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 6px;
    background: #eff6ff;
    transition: all 0.15s;
}
.order-link:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

/* ===== Suggestions ===== */
.suggestion-card {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid;
    margin-bottom: 10px;
    font-size: 0.8125rem;
    line-height: 1.5;
}
.suggestion-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.suggestion-card.danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}
.suggestion-card.danger .suggestion-icon {
    background: #fee2e2;
}
.suggestion-card.warning {
    background: #fffbeb;
    border-color: #fed7aa;
    color: #92400e;
}
.suggestion-card.warning .suggestion-icon {
    background: #fef3c7;
}
.suggestion-card.success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}
.suggestion-card.success .suggestion-icon {
    background: #dcfce7;
}
.suggestion-card.info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}
.suggestion-card.info .suggestion-icon {
    background: #dbeafe;
}
.suggestion-body { flex: 1; }
.suggestion-title {
    font-weight: 600;
    font-size: 0.8125rem;
    margin-bottom: 2px;
}
.suggestion-text {
    font-size: 0.8125rem;
    opacity: 0.85;
}

/* Loading skeleton */
.skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s infinite;
    border-radius: 4px;
    height: 1em;
}
@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== Mobile Responsive ===== */

/* Hide scrollbar on scrollable rows */
#date-presets::-webkit-scrollbar,
#tab-nav::-webkit-scrollbar { display: none; }

/* Prevent viewport-level horizontal overflow on mobile */
html, body { overflow-x: hidden; }

@media (max-width: 640px) {
    /* Compact date navigation arrows */
    .date-nav-btn { padding: 4px; }
    .date-nav-btn svg { width: 14px; height: 14px; }

    /* Native date input on iOS/Android: prevent min-width from browser default */
    #date-since, #date-until {
        min-width: 0 !important;
        max-width: 100%;
    }

    /* KPI cards: compact */
    .kpi-card { padding: 8px 10px; border-radius: 8px; }
    .kpi-value { font-size: 0.875rem; }
    .kpi-label { font-size: 0.5rem; }

    /* Table: full-width scroll area */
    .table-wrapper {
        border-radius: 8px;
        margin-left: -8px;
        margin-right: -8px;
        width: calc(100% + 16px);
        touch-action: pan-x pan-y;
    }

    /* Compact table */
    .data-table { font-size: 0.625rem; }
    .data-table thead th {
        padding: 3px 4px;
        font-size: 0.5rem;
    }
    .data-table tbody td { padding: 4px; }
    .data-table tfoot td { padding: 4px; font-size: 0.625rem; }

    /* Name column: scrollable inside cell */
    .col-name {
        min-width: 130px;
        max-width: 170px;
        font-size: 0.625rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        text-overflow: clip;
        white-space: nowrap;
    }
    .col-name::-webkit-scrollbar { display: none; }
    .col-num { min-width: 40px; font-size: 0.625rem; }
    .col-status { min-width: 45px; }

    /* Sticky column: visible shadow for scroll hint */
    .sticky-col {
        box-shadow: 3px 0 6px rgba(0,0,0,0.1);
    }

    /* Tab buttons: single row scroll */
    .tab-btn {
        padding: 6px 10px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* Column group headers ultra compact */
    .column-group-row th {
        padding: 2px 4px !important;
        font-size: 0.4375rem !important;
    }

    /* Ad ID badge — hide mặc định (cluttered), nhưng GIỮ seeding + post-id button */
    .ad-id-badge {
        display: none;
    }
    .ad-id-badge.seeding-btn,
    .ad-id-badge.post-id-btn {
        display: inline-block !important;
    }

    /* Expand toggle smaller */
    .expand-toggle { width: 18px; height: 18px; font-size: 0.5625rem; }
    .expand-spacer { width: 18px; }

    /* Child rows compact */
    .child-row .sticky-col { padding-left: 22px !important; }
    .grandchild-row .sticky-col { padding-left: 38px !important; }

    /* Charts */
    .chart-container { height: 200px; }

    /* Suggestion cards */
    .suggestion-card { padding: 10px 12px; font-size: 0.75rem; }
    .suggestion-icon { width: 24px; height: 24px; font-size: 0.875rem; }
    .suggestion-title { font-size: 0.75rem; }
    .suggestion-text { font-size: 0.6875rem; }

    /* Order link */
    .order-link { font-size: 0.6875rem; padding: 1px 6px; }

    /* Modals full screen */
    #settings-modal .max-w-md,
    #adtools-modal .max-w-md {
        max-width: 100%;
        width: 100%;
    }

    /* Order popup full screen */
    #order-popup > div:last-child {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }
}

/* ===== Dark Mode ===== */
.dark body,
html.dark body {
    background: #0f172a;
    color: #e2e8f0;
}

/* Header */
html.dark header {
    background: #1e293b;
    border-color: #334155;
}
html.dark h1 { color: #f1f5f9; }

/* Inputs, selects */
html.dark select,
html.dark input[type="date"],
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="search"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="url"] {
    background: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
}

/* Date presets */
html.dark .date-preset {
    background: #1e293b;
    border-color: #475569;
    color: #94a3b8;
}
html.dark .date-preset:hover {
    background: #334155;
    color: #60a5fa;
    border-color: #60a5fa;
}
html.dark .date-preset.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

/* KPI Cards */
html.dark .kpi-card {
    background: #1e293b;
    border-color: #334155;
}
html.dark .kpi-label { color: #64748b; }
html.dark .kpi-value { color: #f1f5f9; }

/* Tabs */
html.dark .tab-btn { color: #94a3b8; }
html.dark .tab-btn:hover { color: #60a5fa; }
html.dark .tab-btn.active { color: #60a5fa; border-bottom-color: #60a5fa; }
html.dark nav#tab-nav { border-color: #334155; }

/* Table */
html.dark .table-wrapper {
    background: #1e293b;
    border-color: #334155;
}
html.dark .data-table thead th {
    background: #0f172a;
    color: #94a3b8;
    border-color: #334155;
}
html.dark .data-table tbody td {
    color: #cbd5e1;
    border-color: #1e293b;
}
html.dark .data-table tbody tr:hover td { background: #334155; }

/* Sticky col */
html.dark thead .sticky-col { background: #0f172a; }
html.dark tbody .sticky-col { background: #1e293b; }
html.dark tbody tr:hover .sticky-col { background: #334155; }

/* Column groups */
html.dark .group-meta {
    background: #172554 !important;
    color: #60a5fa !important;
    border-bottom-color: #3b82f6 !important;
}
html.dark .group-shopify {
    background: #052e16 !important;
    color: #4ade80 !important;
    border-bottom-color: #22c55e !important;
}
html.dark .group-spacer {
    background: #0f172a !important;
    border-color: #334155 !important;
}
html.dark .col-sep { border-left-color: #475569 !important; }

/* Footer */
html.dark .data-table tfoot td {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

/* Status badges */
html.dark .status-active { background: #14532d; color: #4ade80; }
html.dark .status-paused { background: #422006; color: #fbbf24; }
html.dark .status-deleted { background: #1e293b; color: #64748b; }

/* ROAS cells */
html.dark .roas-cell-good { background: #052e16; }
html.dark .roas-cell-ok { background: #422006; }
html.dark .roas-cell-bad { background: #450a0a; }

/* Suggestion cards */
html.dark .suggestion-card.danger { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }
html.dark .suggestion-card.warning { background: #422006; border-color: #78350f; color: #fcd34d; }
html.dark .suggestion-card.success { background: #052e16; border-color: #14532d; color: #86efac; }
html.dark .suggestion-card.info { background: #172554; border-color: #1e3a5f; color: #93c5fd; }

/* Child rows */
html.dark .child-row td { background: #162032 !important; }
html.dark .child-row .sticky-col { background: #162032 !important; }
html.dark .child-row:hover td,
html.dark .child-row:hover .sticky-col { background: #1e3050 !important; }
html.dark .grandchild-row td { background: #0d1a2d !important; }
html.dark .grandchild-row .sticky-col { background: #0d1a2d !important; }
html.dark .grandchild-row:hover td,
html.dark .grandchild-row:hover .sticky-col { background: #1a2840 !important; }

/* Modals */
html.dark #settings-modal > div:last-child,
html.dark #adtools-modal > div:last-child,
html.dark #order-popup > div:last-child > div {
    background: #1e293b;
    color: #e2e8f0;
}
html.dark #settings-modal .border-b,
html.dark #adtools-modal .border-b { border-color: #334155; }

/* Ad ID badge */
html.dark .ad-id-badge {
    background: #334155;
    color: #94a3b8;
    border-color: #475569;
}
html.dark .ad-id-badge:hover {
    background: #1e3a5f;
    color: #93c5fd;
    border-color: #3b82f6;
}

/* Order link */
html.dark .order-link {
    background: #172554;
    color: #60a5fa;
}
html.dark .order-link:hover {
    background: #1e3a5f;
    color: #93c5fd;
}

/* Countries tab */
html.dark .bg-white { background: #1e293b; }
html.dark #acc-multi-btn { background: #1e293b; border-color: #475569; color: #e2e8f0; }
html.dark #acc-multi-dropdown { background: #1e293b; border-color: #334155; }
html.dark #acc-multi-dropdown label:hover { background: #334155; }
html.dark .border-gray-200 { border-color: #334155; }
html.dark .text-gray-600 { color: #94a3b8; }
html.dark .text-gray-400 { color: #64748b; }
html.dark .text-gray-500 { color: #94a3b8; }
html.dark .text-gray-700 { color: #cbd5e1; }
html.dark .text-gray-800 { color: #f1f5f9; }

/* Charts */
html.dark .chart-container { filter: brightness(0.9); }

/* Loading skeleton */
html.dark .skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
}

/* Dark mode toggle button */
html.dark #btn-darkmode {
    color: #fbbf24;
}
html.dark #btn-darkmode:hover {
    background: #422006;
}


/* ===== Phase 02 — Component polish (tokens) ===== */

/* Body base using tokens — supersedes hardcoded dark bg */
body {
    background: var(--color-bg);
    color: var(--color-text);
}
html.dark body {
    background: var(--color-bg);
    color: var(--color-text);
}

/* Header — tokenized surface */
header {
    background: var(--color-surface);
    border-color: var(--color-border);
}

/* Modal drawer containers (3 modals share this look via IDs) */
html.dark #settings-modal > div:nth-child(2),
html.dark #oauth-modal > div:nth-child(2),
html.dark #adtools-modal > div:nth-child(2) {
    background: var(--color-surface);
    color: var(--color-text);
    border-left: 1px solid var(--color-border);
}

/* Unified empty-state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
}
.empty-state__icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-3);
    color: var(--color-text-dim);
}
.empty-state__title {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-1);
}
.empty-state__subtitle {
    font-size: var(--fs-xs);
    color: var(--color-text-dim);
}

/* Table polish — zebra + stronger hover via tokens */
.data-table tbody tr:nth-child(even) td {
    background: var(--color-surface-alt);
}
.data-table tbody tr:hover td {
    background: var(--color-surface-hover);
}
html.dark .data-table tbody tr:nth-child(even) td {
    background: var(--color-surface-alt);
}
html.dark .data-table tbody tr:hover td {
    background: var(--color-surface-hover);
}
.data-table tbody tr:hover .sticky-col {
    background: var(--color-surface-hover);
}
html.dark .data-table tbody tr:hover .sticky-col {
    background: var(--color-surface-hover);
}

/* Table header + cells tokenized */
.data-table thead th {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border-bottom-color: var(--color-border);
}
html.dark .data-table thead th {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border-bottom-color: var(--color-border);
}
.data-table tbody td {
    color: var(--color-text);
    border-bottom-color: var(--color-border);
}
html.dark .data-table tbody td {
    color: var(--color-text);
    border-bottom-color: var(--color-border);
}

/* Totals row — stronger divider + accent */
.data-table tfoot td {
    border-top: 2px solid var(--color-border-accent);
    background: var(--color-surface-alt);
    font-weight: 600;
    color: var(--color-text);
}
html.dark .data-table tfoot td {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

/* Table wrapper — surface + border from tokens */
.table-wrapper {
    background: var(--color-surface);
    border-color: var(--color-border);
}

/* Sticky col bg from tokens */
tbody .sticky-col { background: var(--color-surface); }
thead .sticky-col { background: var(--color-surface-alt); }
html.dark tbody .sticky-col { background: var(--color-surface); }
html.dark thead .sticky-col { background: var(--color-surface-alt); }

/* KPI cards polish */
.kpi-card {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, transform 0.15s;
}
.kpi-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.kpi-label { color: var(--color-text-dim); }
.kpi-value { color: var(--color-text); }
html.dark .kpi-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
html.dark .kpi-label { color: var(--color-text-dim); }
html.dark .kpi-value { color: var(--color-text); }

/* Tab buttons — accent from tokens */
.tab-btn { color: var(--color-text-muted); }
.tab-btn:hover { color: var(--color-accent); }
.tab-btn.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
html.dark .tab-btn { color: var(--color-text-muted); }
html.dark .tab-btn:hover { color: var(--color-accent); }
html.dark .tab-btn.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* Date presets tokenized */
.date-preset {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}
.date-preset:hover {
    background: var(--color-accent-bg);
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.date-preset.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
html.dark .date-preset {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}
html.dark .date-preset:hover {
    background: var(--color-accent-bg);
    border-color: var(--color-accent);
    color: var(--color-accent);
}
html.dark .date-preset.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

/* Date nav arrow buttons tokenized */
.date-nav-btn {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}
.date-nav-btn:hover {
    background: var(--color-accent-bg);
    border-color: var(--color-accent);
    color: var(--color-accent);
}
html.dark .date-nav-btn {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}
html.dark .date-nav-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Status badges consistent */
.status-badge {
    padding: 2px 8px;
    font-size: var(--fs-xs);
}
.status-active {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}
.status-paused {
    background: var(--color-warn-bg);
    color: var(--color-warn-text);
}

/* Toggle switch refined shadow */
.camp-toggle-slider {
    box-shadow: inset 0 0 0 1px var(--color-border);
}

/* Unified .btn system — additive, doesn't interfere with existing Tailwind */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 6px 12px;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.btn--secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn--secondary:hover:not(:disabled) {
    background: var(--color-surface-hover);
    border-color: var(--color-border-accent);
}
.btn--ghost {
    background: transparent;
    color: var(--color-text-muted);
}
.btn--ghost:hover:not(:disabled) {
    background: var(--color-surface-hover);
    color: var(--color-text);
}
.btn--danger { background: var(--color-danger); color: #fff; }
.btn--sm { padding: 4px 10px; font-size: var(--fs-xs); }
.btn--lg { padding: 8px 16px; font-size: var(--fs-base); }

/* Inputs tokenized (supersedes existing html.dark input rules for unification) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
select,
textarea {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-bg);
}

/* Ad row: name + badges in flex — badges never truncated */
.ad-name-flex {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.ad-name-truncate {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ad-name-flex .badge-nowrap {
    flex-shrink: 0;
}

/* Click ad name → copy */
.ad-name-copy {
    cursor: pointer;
    border-radius: 3px;
    padding: 1px 3px;
    margin: -1px -3px;
    transition: background 0.12s;
}
.ad-name-copy:hover {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}
.ad-name-copied {
    background: var(--color-success-bg) !important;
    color: var(--color-success-text) !important;
    font-weight: 500;
}


/* ===== Phase 03 — Layout polish + mobile ===== */

/* Drawer modals: full-screen on mobile for more usable real estate */
@media (max-width: 640px) {
    #settings-modal > div:nth-child(2),
    #oauth-modal > div:nth-child(2),
    #adtools-modal > div:nth-child(2) {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        border-left: none !important;
    }

    /* Backdrop: disappears visually since drawer fills screen */
    #settings-backdrop,
    #oauth-backdrop,
    #adtools-backdrop {
        display: none;
    }
}

/* Header icon buttons: slightly more compact on narrow screens */
@media (max-width: 479px) {
    #btn-darkmode,
    #btn-refresh,
    #btn-adtools,
    #btn-oauth,
    #btn-settings {
        padding: 4px !important;
    }
    #btn-darkmode svg,
    #btn-refresh svg,
    #btn-adtools svg,
    #btn-oauth svg,
    #btn-settings svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Main content padding reduced */
    main {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    /* KPI cards: compact padding at extreme small */
    .kpi-card {
        padding: 8px 10px;
        border-radius: 6px;
    }
    .kpi-value { font-size: 0.875rem; }
    .kpi-label { font-size: 0.5rem; }
}

/* Smooth tab scroll on mobile — hide scrollbar */
#tab-nav::-webkit-scrollbar,
#date-presets::-webkit-scrollbar {
    display: none;
}
#tab-nav,
#date-presets {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Fine-tune sticky-col shadow on scroll */
.data-table .sticky-col {
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.08);
}
html.dark .data-table .sticky-col {
    box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.3);
}

/* Card hover shadow: only when pointer is fine (desktop) to avoid sticky-hover on mobile */
@media (hover: none) {
    .kpi-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }
}

/* Settings modal tab nav */
.settings-tab-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    color: #6b7280;
    transition: color 0.15s, border-color 0.15s;
}
.settings-tab-btn:hover {
    color: #1f2937;
}
.settings-tab-btn.active {
    border-bottom-color: #3b82f6;
    color: #3b82f6;
    font-weight: 600;
}
html.dark .settings-tab-btn { color: #94a3b8; }
html.dark .settings-tab-btn:hover { color: #e2e8f0; }
html.dark .settings-tab-btn.active { color: #60a5fa; border-bottom-color: #60a5fa; }

/* AccountSelector dropdown — store header (3-state checkbox toggle) */
.store-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin-top: 4px;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    user-select: none;
    transition: background-color 0.12s, color 0.12s;
}
.store-header:hover {
    background: #eff6ff;
    color: #1d4ed8;
}
.store-header .store-check {
    cursor: pointer;
    margin: 0;
}
.store-header-name {
    flex: 1;
    min-width: 0;
}
html.dark .store-header {
    background: #0f172a;
    color: #cbd5e1;
    border-top-color: #1e293b;
}
html.dark .store-header:hover {
    background: #1e3a8a;
    color: #bfdbfe;
}

/* ───── Scaling alert ───── */
.scaling-control {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}
.scaling-input {
    width: 52px;
    padding: 2px 6px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
    background: #fff;
    color: #111827;
}
html.dark .scaling-input {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
.scaling-range { color: #9ca3af; font-size: 11px; }
.scaling-banner {
    border: 1px solid var(--color-roas-good);
    background: var(--color-roas-good-bg);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.scaling-banner-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-roas-good);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.scaling-close {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 2px 6px;
}
.scaling-close:hover { color: #6b7280; }
.scaling-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    padding: 5px 0;
    border-top: 1px dashed rgba(0,0,0,0.08);
}
html.dark .scaling-row { border-top-color: rgba(255,255,255,0.08); }
.scaling-row:first-of-type { border-top: none; }
.scaling-camp { font-weight: 600; color: #111827; }
html.dark .scaling-camp { color: #e2e8f0; }
.scaling-seq {
    font-family: monospace;
    color: var(--color-roas-good);
    font-weight: 700;
}
.scaling-avg {
    margin-left: auto;
    font-size: 11px;
    color: #6b7280;
}

/* ───── Creative dự phòng ───── */
.ad-pick { margin-right: 6px; cursor: pointer; flex: 0 0 auto; }
.cb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 4px;
    border-top: 1px solid #f1f5f9;
}
.cb-row:first-child { border-top: none; }
html.dark .cb-row { border-top-color: #1e293b; }
.cb-main { min-width: 0; flex: 1; }
.cb-adname {
    font-weight: 600;
    font-size: 13px;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dark .cb-adname { color: #e2e8f0; }
.cb-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 3px 0;
    font-size: 11px;
    color: #6b7280;
    flex-wrap: wrap;
}
.cb-camp {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}
.cb-note {
    flex: 1;
    min-width: 120px;
    max-width: 240px;
    padding: 3px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 11px;
    background: #fff;
    color: #111827;
}
html.dark .cb-note { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.cb-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cb-del { background: transparent; border: none; cursor: pointer; font-size: 14px; opacity: 0.7; }
.cb-del:hover { opacity: 1; }

/* ═══ Mobile: cho phép tên ad/campaign xuống dòng để đọc đủ ═══ */
@media (max-width: 768px) {
    .col-name {
        white-space: normal !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        text-overflow: clip !important;
        word-break: break-word;
        max-width: 60vw;
        min-width: 140px;
    }
    .ad-name-truncate,
    .campaign-name-cell > span,
    .ad-parent-name {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word;
    }
    .ad-name-flex {
        flex-wrap: wrap;
        row-gap: 2px;
    }
    .campaign-name-cell {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    /* Chrome/Safari iPhone: thanh công cụ dưới hiện lại khi vuốt ngược và đè lên
       dòng cuối + dòng TỔNG. Đáy trang chỉ đệm 12px nên hai dòng đó không bao giờ
       cuộn lên khỏi thanh được. Chừa khoảng trống cao hơn thanh công cụ. */
    #tab-content {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
}

/* ===== Settings: side-nav layout (2026-09-19 redesign) ===== */
.settings-nav-group {
    padding: 14px 20px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
}
.settings-nav .settings-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 16px);
    margin: 1px 8px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    text-align: left;
    font-size: 14px;
    color: #475569;
    text-decoration: none;
}
.settings-nav .settings-tab-btn:hover { background: #f1f5f9; color: #0f172a; }
.settings-nav .settings-tab-btn.active { background: #eff6ff; color: #1d4ed8; font-weight: 600; border-bottom-color: transparent; }
.settings-step {
    width: 20px; height: 20px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; font-size: 11px; font-weight: 700;
    background: #e2e8f0; color: #475569;
}
.settings-tab-btn.active .settings-step { background: #2563eb; color: #fff; }
.settings-icon { width: 20px; text-align: center; flex-shrink: 0; }
.settings-done { margin-left: auto; color: #16a34a; font-weight: 700; }

.settings-h { font-size: 16px; font-weight: 700; color: #0f172a; margin-bottom: 2px; }
.settings-card { border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; background: #fff; }
.settings-input {
    width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 12px; font-size: 14px;
}
.settings-input:focus { outline: none; box-shadow: 0 0 0 2px #3b82f6; }
.settings-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500;
    background: #2563eb; color: #fff; white-space: nowrap;
}
.settings-btn-primary:hover { background: #1d4ed8; }
.settings-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500;
    background: #fff; color: #334155; border: 1px solid #cbd5e1; white-space: nowrap;
}
.settings-btn-secondary:hover { background: #f8fafc; }

/* Phone: menu and section take turns on the full screen (#settings-panel[data-view]) */
@media (max-width: 639px) {
    #settings-panel[data-view="nav"] #settings-content { display: none; }
    #settings-panel[data-view="pane"] #settings-nav { display: none; }
    #settings-panel[data-view="nav"] .settings-back,
    #settings-panel[data-view="nav"] .settings-section-title { display: none; }
}
@media (min-width: 640px) {
    .settings-back { display: none; }
}

/* Settings dark theme: one scoped palette for the static markup AND the lists/forms rendered by JS
   (accounts, stores, token panel, seeding, rules, aliases) that still use light utility classes. */
html.dark #settings-panel { background: #0f172a; color: #e2e8f0; }
html.dark #settings-panel .border-gray-200,
html.dark #settings-panel .border-gray-100,
html.dark #settings-nav { border-color: #1e293b; }
html.dark .settings-nav .settings-tab-btn { color: #cbd5e1; }
html.dark .settings-nav .settings-tab-btn:hover { background: #1e293b; color: #f8fafc; }
html.dark .settings-nav .settings-tab-btn.active { background: #172554; color: #93c5fd; }
html.dark .settings-step { background: #1e293b; color: #94a3b8; }
html.dark .settings-h { color: #f1f5f9; }
html.dark .settings-card,
html.dark #settings-panel .bg-white,
html.dark #settings-panel .bg-gray-50,
html.dark #settings-panel .bg-slate-50 { background: #111c31; border-color: #1e293b; }
html.dark #settings-panel .bg-gray-100 { background: #1e293b; }
html.dark #settings-panel .border,
html.dark #settings-panel .border-gray-300,
html.dark #settings-panel .border-slate-200 { border-color: #334155; }
html.dark #settings-panel .bg-blue-50,
html.dark #settings-panel .bg-blue-50\/50 { background: #0b1f44; border-color: #1e3a8a; }
html.dark #settings-panel .bg-amber-50,
html.dark #settings-panel .bg-yellow-50 { background: #2a1f06; border-color: #78350f; color: #fcd34d; }
html.dark #settings-panel .bg-red-50 { background: #2a0f12; border-color: #7f1d1d; }
html.dark #settings-panel .bg-green-50,
html.dark #settings-panel .bg-emerald-50 { background: #052e1a; border-color: #14532d; }
html.dark #settings-panel .bg-purple-50,
html.dark #settings-panel .bg-purple-100 { background: #2e1065; color: #d8b4fe; }
html.dark #settings-panel .text-blue-800,
html.dark #settings-panel .text-blue-700 { color: #93c5fd; }
html.dark #settings-panel .text-amber-700,
html.dark #settings-panel .text-amber-800 { color: #fcd34d; }
html.dark #settings-panel .text-green-700 { color: #86efac; }
html.dark #settings-panel .text-gray-900 { color: #f8fafc; }
html.dark #settings-panel input,
html.dark #settings-panel select,
html.dark #settings-panel textarea,
html.dark .settings-input { background: #0b1324; border-color: #334155; color: #e2e8f0; }
html.dark #settings-panel input::placeholder,
html.dark #settings-panel textarea::placeholder { color: #64748b; }
html.dark #settings-panel code { background: #1e293b; color: #cbd5e1; }
html.dark .settings-btn-secondary { background: #1e293b; color: #e2e8f0; border-color: #334155; }
html.dark .settings-btn-secondary:hover { background: #334155; }
html.dark #settings-panel .hover\:bg-gray-50:hover,
html.dark #settings-panel .hover\:bg-gray-100:hover { background: #1e293b; }
html.dark #btn-logout:hover { background: #2a0f12; }
/* Chrome autofill paints inputs white: repaint it in the dark palette */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus {
    -webkit-text-fill-color: #e2e8f0;
    -webkit-box-shadow: 0 0 0 1000px #0b1324 inset;
    caret-color: #e2e8f0;
}