/* =====================================================================
   Novantum AI — Admin Design System
   Derived from Novantum AI brand book (BRAND-AI.md v1.0)
   Light/Dark theme, sidebar layout, scalable multi-page architecture
   Typography: Inter (body/headings) + JetBrains Mono (data/code)
   Accent: Strategic Indigo — #818cf8 (dark) / #4f46e5 (light)
   ===================================================================== */

/* --- Fonts (display:swap = zero-blocking, system fallback until loaded) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* --- Theme tokens --- */
:root {
    /* Light theme (default) — Novantum AI light mode */
    --bg:          #F8FAFC;
    --bg2:         #F1F5F9;
    --bg-sidebar:  #FFFFFF;
    --surface:     #FFFFFF;
    --surface2:    #F1F5F9;
    --border:      #E2E8F0;
    --border-light:#F1F5F9;
    --text:        #0F172A;
    --text2:       #475569;
    --text3:       #94A3B8;
    --accent:      #4F46E5;   /* Indigo 600 — indigo as text/fill on white */
    --accent-hover:#4338CA;
    --accent-bg:   rgba(79, 70, 229, 0.08);
    --secondary:   #6366F1;   /* indigo-family gradient partner */
    --cta:         #4F46E5;   /* primary actions = indigo (orange retired) */
    --cta-hover:   #4338CA;
    --green:       #10B981;   /* success / positive */
    --green-bg:    #D1FAE5;
    --red:         #EF4444;   /* error / negative */
    --red-bg:      #FEE2E2;
    --yellow:      #F59E0B;   /* warning */
    --yellow-bg:   #FEF3C7;
    --radius:      8px;
    --radius-lg:   12px;
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
    --shadow:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-lg:   0 4px 12px rgba(0,0,0,0.08);
    --sidebar-w:   240px;
    --header-h:    56px;
    --transition:  0.2s ease;
    --glow:        none;
}

[data-theme="dark"] {
    /* Dark theme — Novantum AI Slate 900/800 system */
    --bg:          #0F172A;   /* Slate 900 */
    --bg2:         #223049;
    --bg-sidebar:  #111827;
    --surface:     #1E293B;   /* Slate 800 panel */
    --surface2:    #223049;
    --border:      #334155;   /* Slate 700 */
    --border-light:#2B3A52;
    --text:        #E2E8F0;   /* Slate 200 */
    --text2:       #94A3B8;   /* Slate 400 */
    --text3:       #64748B;
    --accent:      #818CF8;   /* Strategic Indigo (on dark) */
    --accent-hover:#A5B4FC;
    --accent-bg:   rgba(129, 140, 248, 0.14);
    --secondary:   #A5B4FC;   /* indigo-family gradient partner */
    --cta:         #818CF8;
    --cta-hover:   #A5B4FC;
    --green:       #10B981;
    --green-bg:    rgba(16, 185, 129, 0.14);
    --red:         #EF4444;
    --red-bg:      rgba(239, 68, 68, 0.12);
    --yellow:      #F59E0B;
    --yellow-bg:   rgba(245, 158, 11, 0.1);
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.3);
    --shadow:      0 1px 3px rgba(0,0,0,0.4);
    --shadow-lg:   0 4px 16px rgba(0,0,0,0.5);
    /* No accent glow: the brand uses flat/subtle drop shadows, and logo-mehānika
       bans effects on the mark ("Bez ēnām, spīduma vai efektiem"). Keeping the
       token (used by the logo, page titles, focus ring) but neutralised. S246. */
    --glow:        none;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow: hidden;
}

/* --- Layout --- */
.layout {
    display: flex;
    min-height: 100vh;
}

/* --- Sidebar --- */
.sidebar {
    width: var(--sidebar-w);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transition: transform var(--transition);
}

.sidebar-header {
    height: var(--header-h);
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    gap: 10px;
}

.sidebar-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--glow);
    overflow: hidden;
}

.sidebar-logo svg { width: 32px; height: 32px; display: block; }
/* S421: klienta zīmola logo (BRAND_LOGO_URL) tajā pašā 32px kastē */
.sidebar-logo img { width: 32px; height: 32px; display: block; object-fit: contain; }
/* S421: vārdzīmes režīms (BRAND_LOGO_INLINE) — inline SVG ar currentColor, krāsa no tēmas */
.brand-wordmark { display: flex; align-items: center; color: var(--text); min-width: 0; }
.brand-wordmark svg { height: 22px; width: auto; display: block; }
.brand-wordmark-login { justify-content: center; margin-bottom: 20px; }
.brand-wordmark-login svg { height: 40px; }
/* S421: «Powered by Novantum AI» — tikai svešā zīmola vidē (BRAND_NAME ≠ Novantum AI) */
.sidebar-powered { padding: 6px 16px 10px; font-size: 10.5px; color: var(--text3); letter-spacing: 0.02em; }
.sidebar-powered span { color: var(--text2); font-weight: 600; }

.sidebar-title {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-title .ai-accent { color: var(--accent); }

/* Novantum AI wordmark: the raised indigo dot after "AI" (matches the brand
   logo SVG). em-sized so one rule scales to both the sidebar (15px) and the
   larger login wordmark; theme-aware via var(--accent). */
.wordmark-dot {
    display: inline-block;
    width: 0.28em;
    height: 0.28em;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: 0.5em;
    margin-left: 0.1em;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 8px;
    overflow-y: auto;
}

.nav-section {
    margin-bottom: 20px;
}

.nav-section-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text3);
    padding: 0 12px 6px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--text2);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    user-select: none;
}

.nav-item:hover {
    background: var(--surface2);
    color: var(--text);
}

.nav-item.active {
    background: var(--accent-bg);
    color: var(--accent);
}

.nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke-width: 1.8;
}

.nav-item .badge-count {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    background: var(--surface2);
    color: var(--text3);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.sidebar-footer {
    padding: 12px 8px;
    border-top: 1px solid var(--border);
}

/* S258: live app version, server-stamped into the sidebar footer so staff can
   confirm at a glance whether live is the latest deploy. Deliberately muted —
   informational, not a nav target. */
.sidebar-version {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px 2px;
    font-size: 11px;
    color: var(--text2);
    cursor: default;
    user-select: text;
}
.sidebar-version svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    opacity: 0.75;
}
.sidebar-version-tag {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Main content area --- */
.main {
    flex: 1;
    /* min-width:0 is load-bearing: a flex item defaults to min-width:auto, so a
       child wider than the track (e.g. a many-column Products/TDS table) forces
       .main to grow to the content width instead of the viewport — the whole
       page then reads as "wider than the others". min-width:0 pins .main to its
       flex track so wide content scrolls inside .table-scroll instead. S246. */
    min-width: 0;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Top header --- */
.top-header {
    height: var(--header-h);
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text2);
}

.breadcrumb-current {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.env-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--accent-bg);
    color: var(--accent);
    border: 1px solid var(--border);
    font-weight: 500;
}

/* --- Staff online toggle --- */
.staff-online-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text2);
    transition: all var(--transition);
}
.staff-online-toggle:hover { background: var(--surface2); }
.staff-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text3);
    transition: background 0.2s;
}
.staff-status-dot.online {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}
.staff-status-dot.offline {
    background: #9ca3af;
}

/* --- Theme toggle --- */
.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text2);
    transition: all var(--transition);
}

.theme-toggle:hover {
    background: var(--surface2);
    color: var(--text);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

/* --- Change-password panel (header, S439 follow-up) --- */
.pw-wrap { position: relative; }
.pw-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 14px;
    z-index: 50;
}
.pw-panel .form-row:last-of-type { margin-bottom: 10px; }
.pw-panel .btn-row { margin-bottom: 4px; }
.pw-panel .btn { font-size: 12px; padding: 6px 10px; }
.pw-panel .ua-status { margin-top: 4px; font-size: 12px; }
.pw-panel .ua-status.ok { color: var(--green); }
.pw-panel .ua-status.err { color: var(--red); }

/* --- Page content --- */
.page-content {
    flex: 1;
    /* Same min-width:0 guard as .main (it's a column flex item of .main): keep
       wide page content from stretching the column past the viewport. S246. */
    min-width: 0;
    padding: 24px;
    overflow-y: auto;
    max-height: calc(100vh - var(--header-h));
}

.page-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    text-shadow: var(--glow);
}

.page-subtitle {
    font-size: 13px;
    color: var(--text2);
    margin-bottom: 24px;
}

/* --- Card --- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.card:hover {
    box-shadow: var(--shadow);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.card h2, .card-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card h2 .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-green { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot-red { background: var(--red); box-shadow: 0 0 6px var(--red); }
.dot-yellow { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
.dot-gray { background: var(--text3); }

/* --- KV Grid (key-value display) --- */
.kv-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 16px;
    font-size: 13px;
}

.kv-grid dt { color: var(--text2); }
.kv-grid dd { color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 12px; word-break: break-all; }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 0 12px rgba(99,102,241,0.35); }
.btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { opacity: 0.9; }
.btn-cta { background: var(--cta); color: #fff; }
.btn-cta:hover { background: var(--cta-hover); box-shadow: 0 0 12px rgba(99,102,241,0.35); }
.btn-ghost { background: none; color: var(--text2); padding: 6px 10px; }
.btn-ghost:hover { background: var(--surface2); color: var(--text); }
/* S194: shared admin action icons.
   - leading icon inside a labelled .btn (e.g. "🔗 Link") → 14px, inline
   - icon-only button (.btn-icon) → fixed square box + 15px SVG */
.btn > svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn-icon { padding: 5px; line-height: 0; }
.btn-icon svg { display: block; width: 15px; height: 15px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* SEO Co-Pilot select toggle — plain checkbox + label, no pill (S151) */
.copilot-select-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text2);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
    padding: 4px 0;
}
.copilot-select-chip input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* --- Icon button (header actions) --- */
.icon-btn {
    width: 36px; height: 36px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--surface);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--text2); transition: all var(--transition);
}
.icon-btn:hover { background: var(--surface2); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }

/* --- Forms --- */
input, select, textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    width: 100%;
    transition: all var(--transition);
    outline: none;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

input::placeholder { color: var(--text3); }

.form-row { margin-bottom: 12px; }
.form-row label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    color: var(--text2);
    margin-bottom: 4px;
}

/* --- Table --- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
    text-align: left;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text3);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
}
th:first-child { border-radius: var(--radius) 0 0 0; }
th:last-child { border-radius: 0 var(--radius) 0 0; }
td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); }
tr:hover td { background: var(--accent-bg); }

/* --- Badges --- */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
}

.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow); }
.badge-gray { background: var(--surface2); color: var(--text2); }
.badge-blue { background: var(--accent-bg); color: var(--accent); }
.badge-purple { background: #f3e8ff; color: #7c3aed; }
.badge-orange { background: #fff7ed; color: #c2410c; }
.badge-teal { background: #f0fdfa; color: #0f766e; }

/* --- Conversations --- */
.conv-card {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 4px;
    transition: background 0.15s;
}
.conv-card:hover { background: var(--surface2); }
.conv-card--selected { background: var(--accent-bg); }
.conv-card--waiting { border-left: 3px solid var(--orange); }

.conv-filter-btn {
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
}
.conv-filter-btn.active {
    background: var(--primary) !important;
    color: white !important;
}

.badge-count {
    background: var(--orange);
    color: white;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

.conv-product-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
    cursor: default;
    transition: background 0.15s;
}
.conv-product-card:hover { background: var(--surface2); }

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.badge-count { animation: pulse-badge 2s infinite; }

/* --- Log --- */
.log {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    color: var(--text2);
    line-height: 1.7;
}
.log .info { color: var(--accent); }
.log .ok { color: var(--green); }
.log .err { color: var(--red); }

/* --- Empty state --- */
.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text2);
    font-size: 13px;
}

.empty-state svg {
    width: 48px;
    height: 48px;
    color: var(--text3);
    margin-bottom: 12px;
}

/* --- Stats grid (dashboard) --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

.stat-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--accent);
}

.stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--text3);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.stat-sub {
    font-size: 12px;
    color: var(--text3);
    margin-top: 4px;
}

/* --- Spinner --- */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

.spinner-lg { width: 32px; height: 32px; border-width: 3px; }

@keyframes spin { to { transform: rotate(360deg); } }

.sync-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--yellow);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

/* --- Drop zone --- */
.drop-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
}

.drop-zone:hover, .drop-zone.drag-over {
    border-color: var(--accent);
    background: var(--accent-bg);
    box-shadow: 0 0 20px rgba(37,99,235,0.08);
}

.drop-zone .icon, .drop-zone .dz-icon { margin-bottom: 8px; color: var(--text3); }
.drop-zone .dz-icon svg { width: 40px; height: 40px; }
.drop-zone .dz-title { font-weight: 500; color: var(--text); margin-bottom: 4px; }
.drop-zone .hint, .drop-zone .dz-hint { font-size: 12px; color: var(--text2); margin-top: 4px; }
.drop-zone input[type="file"] { display: none; }

.nav-item .badge-soon {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    background: var(--surface2); color: var(--text3);
    font-size: 10px; padding: 2px 6px;
    border-radius: 4px; font-weight: 500;
}
.nav-item.disabled { opacity: 0.4; pointer-events: none; }

/* --- TDS specific --- */
.tds-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.tds-progress { text-align: center; padding: 24px; }
.tds-progress p { margin-top: 12px; color: var(--text2); font-size: 13px; }

.tds-review { font-size: 13px; }
.tds-review .summary-grid { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; margin-bottom: 16px; }
.tds-review .summary-grid dt { color: var(--text2); }
.tds-review .summary-grid dd { color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.tds-review .warn-list { margin: 8px 0; padding: 8px 12px; background: var(--yellow-bg); border-radius: 6px; font-size: 12px; color: var(--yellow); }
.tds-review .err-list { margin: 8px 0; padding: 8px 12px; background: var(--red-bg); border-radius: 6px; font-size: 12px; color: var(--red); }
.tds-review .json-toggle { font-size: 12px; color: var(--accent); cursor: pointer; margin-top: 8px; background: none; border: none; padding: 0; font-family: 'JetBrains Mono', monospace; }
.tds-review .json-toggle:hover { text-decoration: underline; }
.tds-review .json-block {
    display: none; margin-top: 8px; max-height: 300px; overflow: auto;
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
    white-space: pre-wrap; color: var(--text2);
}

.tds-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text2); margin-top: 8px; }
.tds-meta span { margin-right: 16px; }

/* Bulk upload */
.tds-mode-tabs {
    display: flex; gap: 0; margin-bottom: 16px;
    border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.tds-tab {
    flex: 1; padding: 8px 16px; background: var(--surface2); border: none;
    font-family: 'Inter', sans-serif;
    color: var(--text2); font-size: 13px; cursor: pointer; transition: all var(--transition);
}
.tds-tab.active { background: var(--accent); color: #fff; }
.tds-tab:hover:not(.active) { background: var(--border); }

.bulk-input {
    font-size: 11px !important; padding: 4px 6px !important; width: 100% !important;
    background: var(--surface2) !important; border: 1px solid var(--border) !important;
    color: var(--text) !important; border-radius: 4px !important;
}
.bulk-select {
    font-size: 11px !important; padding: 3px 4px !important; width: 100% !important;
    background: var(--surface2) !important; border: 1px solid var(--border) !important;
    color: var(--text) !important; border-radius: 4px !important;
}
.bulk-row-current { background: var(--accent-bg); }
.bulk-progress-bar { height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; margin: 8px 0; }
.bulk-progress-fill {
    height: 100%; width: 0%; border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), var(--secondary));
    box-shadow: 0 0 8px rgba(129,140,248,0.4);
    transition: width 0.3s;
}
.bulk-defaults-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }

/* --- Sync progress --- */
.sync-progress-bar {
    margin-top: 8px;
    padding: 10px 14px;
    background: var(--yellow-bg);
    border-radius: 6px;
    font-size: 13px;
    color: var(--yellow);
    display: flex;
    align-items: center;
}

/* --- Mobile --- */
/* Sidebar backdrop overlay (mobile only when sidebar is open) */
.sidebar-backdrop {
    position: fixed; inset: 0; z-index: 99;
    background: rgba(0,0,0,0.4);
    opacity: 0; pointer-events: none;
    transition: opacity var(--transition);
}
.sidebar.open ~ .sidebar-backdrop,
body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); width: min(280px, 80vw); }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .page-content { padding: 16px; }
    .kv-grid { grid-template-columns: 1fr; }
    .tds-form-grid { grid-template-columns: 1fr; }
    .bulk-defaults-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }

    .mobile-menu-btn { display: flex !important; }

    /* Top header: hide breadcrumb in favor of compact title; tighten spacing */
    .top-header { padding: 0 12px; gap: 8px; }
    .breadcrumb { display: none; }
    .breadcrumb-mobile-title { display: block !important; font-size: 14px; font-weight: 600; }
    .header-actions { gap: 4px; }
    .header-actions .env-badge { display: none; }
    .header-actions .theme-toggle,
    .header-actions .staff-online-toggle {
        min-width: 36px; min-height: 36px;
    }

    /* The custom font-size cycle button uses CSS `zoom` on #pageContent,
       which on mobile scales beyond the viewport and pushes the header
       buttons off-screen. iOS Safari + Android Chrome already provide
       system-level pinch zoom + accessibility text-size, so the button
       is redundant on phones — hide it. Also reset any persisted zoom
       so the layout starts clean even if the user previously cranked it
       up on a desktop session. */
    #fontSizeBtn { display: none !important; }
    #pageContent { zoom: 1 !important; }

    /* Forms — collapse 2-col grids */
    .stats-grid { gap: 8px; }
    .stat-card { padding: 10px; }
    .stat-value { font-size: 18px; }

    /* ==============================================================
       Live Conversations — single-panel-at-a-time on mobile (iOS Mail
       pattern). Default view = list; opening a conversation switches
       to chat; chat-info button opens the right sidebar. The CSS uses
       a `data-mobile-view` attribute on #convContainer that conversations.js
       updates on selection / back / info toggle.
       ============================================================== */
    #convContainer {
        position: relative;
        height: calc(100vh - 220px) !important;
        gap: 0 !important;
    }
    #convContainer > .card {
        position: absolute !important; inset: 0;
        width: auto !important; min-width: 0 !important;
        transition: transform 200ms ease;
    }
    /* Default state: list visible, others off-screen right */
    #convContainer #convChatPanel,
    #convContainer #convSidebar { transform: translateX(100%); display: flex !important; }
    /* When a conversation is selected, slide chat in over list */
    #convContainer[data-mobile-view="chat"] #convChatPanel { transform: translateX(0); }
    #convContainer[data-mobile-view="chat"] > .card:first-child { transform: translateX(-100%); }
    /* Info panel slides over chat */
    #convContainer[data-mobile-view="info"] #convChatPanel { transform: translateX(-100%); }
    #convContainer[data-mobile-view="info"] #convSidebar { transform: translateX(0); }
    #convContainer[data-mobile-view="info"] > .card:first-child { transform: translateX(-100%); }

    /* Mobile-only chat header back button + info toggle */
    .conv-mobile-back, .conv-mobile-info { display: inline-flex !important; }

    /* Filter buttons — tighter, scrollable horizontally if needed */
    .conv-filter-btn { font-size: 12px; padding: 5px 8px; flex: 0 0 auto; }
    #convListBody [class*="conv-card"] { padding: 10px 8px; }

    /* Chat input area: compact toolbar — buttons icon-only on mobile */
    #convInputArea > div:first-child { gap: 4px !important; }
    #convInputArea button { padding: 8px 10px !important; min-width: 40px; min-height: 40px; }
    #convInputArea button .label-desktop { display: none; }
    #convInputArea .label-mobile { display: inline !important; }
    #convMsgInput { font-size: 16px !important; /* prevents iOS Safari zoom-on-focus */ }
    /* Templates picker becomes a bottom sheet on mobile */
    #convTemplatesPicker {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
        width: auto !important; max-width: 100% !important;
        border-radius: 12px 12px 0 0 !important;
        max-height: 50vh !important;
    }

    /* Hide pickup/resolution stats grid extras on small screens */
    .stats-grid > .stat-card:nth-child(n+5) { display: none; }
}

/* Mobile-only chat-header buttons — hidden on desktop */
.conv-mobile-back, .conv-mobile-info { display: none; }
.breadcrumb-mobile-title { display: none; }

/* ==========================================================================
   NOV-71 UX polish — Operating Hours + Staff Notifications cards
   ========================================================================== */

/* --- Operating Hours: stacked weekday rows, work on every viewport --- */
.op-hours-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.op-day {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    flex-wrap: wrap;
}
.op-day.is-off { opacity: 0.55; }
.op-day__head {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex: 0 0 140px;
    min-width: 0;
}
.op-day__head input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.op-day__name {
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.op-day__times {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}
.op-day__time {
    font-size: 13px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface2);
    color: var(--text);
    min-width: 0;
}
.op-day__sep { color: var(--text3); }

@media (max-width: 480px) {
    .op-day { gap: 8px; padding: 10px; }
    .op-day__head { flex: 1 1 100%; }
    .op-day__times { flex: 1 1 100%; justify-content: flex-start; }
    .op-day__time { flex: 1 1 0; }
}

/* --- Staff Notifications: iOS-style toggle list --- */
.notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}
.notif-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.notif-row:last-child { border-bottom: none; }
.notif-row__text {
    flex: 1 1 auto;
    min-width: 0;
}
.notif-row__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 2px;
}
.notif-row__hint {
    font-size: 12px;
    color: var(--text3);
    line-height: 1.3;
}
.notif-row__toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.notif-row__toggle input[type="checkbox"] {
    /* Hide the native checkbox; the .notif-toggle span renders the iOS-style switch. */
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.notif-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    background: var(--border);
    border-radius: 13px;
    transition: background 150ms ease;
}
.notif-toggle::before {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 150ms ease;
}
.notif-row__toggle input:checked + .notif-toggle { background: var(--accent); }
.notif-row__toggle input:checked + .notif-toggle::before { transform: translateX(18px); }
.notif-row__toggle input:focus-visible + .notif-toggle {
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.notif-status {
    font-size: 12px;
    color: var(--text3);
    padding: 10px 4px 0;
}
.notif-action { padding-top: 8px; }
.notif-footnote {
    font-size: 11px;
    color: var(--text3);
    line-height: 1.5;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* --- Phase 1 (S105): Settings cards using iOS-Settings stacked layout.
   Reuses the .notif-list / .notif-toggle primitives where the row shape is
   "title + hint + toggle"; adds .rule-list / .rule-add (Widget Visibility)
   and .qrt-list / .qrt-item / .qrt-add (Quick-Reply Templates) for the
   list+CRUD shapes. All behave identically on every viewport — no grid
   collapse, no horizontal squeeze, native scroll only. */

.list-summary {
    font-size: 12px;
    color: var(--text3);
    margin-bottom: 8px;
}

/* Visibility rule list (URL hide rules) */
.rule-list {
    list-style: none;
    margin: 0 0 12px 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}
.rule-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.rule-row:last-child { border-bottom: none; }
.rule-row__url {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-all;
    font-family: monospace;
    font-size: 12px;
    color: var(--text);
}
.rule-row__match {
    flex-shrink: 0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rule-row__del {
    border: none;
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}
.rule-row__del:hover { background: var(--surface2); color: var(--danger); }
.rule-empty {
    padding: 14px;
    font-size: 12px;
    color: var(--text3);
    text-align: center;
}

.rule-add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.rule-add__input {
    flex: 1 1 240px;
    font-size: 13px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    min-width: 0;
}
.rule-add__match {
    display: inline-flex;
    gap: 12px;
    flex-shrink: 0;
}
.rule-add__match label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text2);
    cursor: pointer;
}

@media (max-width: 480px) {
    .rule-add { flex-direction: column; align-items: stretch; }
    .rule-add__input { flex: 1 1 auto; }
    .rule-add__match { justify-content: center; }
    .rule-add .btn { width: 100%; }
}

/* Per-device collapsible (desktop / mobile) for Widget Visibility */
.vis-device {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}
.vis-device > summary {
    list-style: none;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.vis-device > summary::-webkit-details-marker { display: none; }
.vis-device > summary::after {
    content: '▾';
    color: var(--text3);
    font-size: 12px;
    transition: transform 150ms ease;
}
.vis-device[open] > summary::after { transform: rotate(180deg); }
.vis-device[open] > summary { border-bottom: 1px solid var(--border); }
.vis-device__count { font-size: 12px; color: var(--text3); font-weight: 400; }
.vis-device__body { padding: 12px 14px; background: var(--card2); }

/* Quick-Reply Templates */
.qrt-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 12px;
}
.qrt-group__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.qrt-group__count {
    color: var(--text3);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.qrt-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.qrt-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.qrt-item__label,
.qrt-item__body {
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface2);
    color: var(--text);
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.qrt-item__label { font-weight: 500; }
.qrt-item__body { resize: vertical; min-height: 60px; }
.qrt-item__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.qrt-item__actions .btn { font-size: 12px; padding: 6px 14px; }
.qrt-empty {
    padding: 16px;
    font-size: 13px;
    color: var(--text3);
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
}
.qrt-add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.qrt-add__lang {
    flex: 0 0 140px;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    min-width: 0;
}
.qrt-add__label,
.qrt-add__body {
    flex: 1 1 200px;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    min-width: 0;
}
.qrt-add__body { flex: 1 1 100%; }

@media (max-width: 480px) {
    .qrt-add { flex-direction: column; align-items: stretch; }
    .qrt-add__lang, .qrt-add__label, .qrt-add__body { flex: 1 1 auto; }
    .qrt-add .btn { width: 100%; }
}

/* --- Phase 2 (S105): Live Conversations sidebar — Customer Info uses
   .info-list / .info-row stacked rows with iOS-style section header,
   bordered wrapper, and value-prominent typography. */
.conv-info-section {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.conv-info-section__title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 8px 4px;
}
.info-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
}
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}
.info-row:first-child { border-top: none; }
.info-row__label {
    color: var(--text3);
    font-size: 12px;
    flex-shrink: 0;
}
.info-row__value {
    color: var(--text);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
    min-width: 0;
}

/* --- Phase 3 (S105): Sales Pulse Staff Performance — desktop keeps the
   6-col table; ≤768px swaps to a stacked card list (each staff = own
   card with title header + info-rows). CSS-only switch. The inner
   .table-scroll wrapper is added by admin.js MutationObserver for
   the actual horizontal scroll handling. */
.staff-metrics-table-wrap { display: block; }
.staff-metrics-cards { display: none; }

@media (max-width: 768px) {
    .staff-metrics-table-wrap { display: none; }
    .staff-metrics-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
}

.staff-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.staff-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    padding: 12px 14px;
    background: var(--card2);
    word-break: break-all;
}
.staff-card .info-row {
    padding: 9px 14px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}

/* ==========================================================================
   NOV-71 follow-up — global mobile overflow guards + Dashboard / Sales Pulse
   responsive collapses. The pages were authored with inline `display:grid;
   grid-template-columns:1fr 1fr 1fr` rules that don't collapse on narrow
   viewports, causing horizontal page scroll on phones.
   ========================================================================== */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
    /* Block iOS Dynamic Type — Settings → Display & Text Size → Text Size
       upscales fonts via `-webkit-text-size-adjust` and that can make
       fixed-text content overflow the viewport even when the rest of the
       layout is responsive. The admin UI sizes its own typography. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* NOV-71: explicit horizontal-scroll container for wide tables (Products,
   TDS Mappings, QA Scores). The wrapper is added by admin.js after each
   page render so we don't have to touch every renderer. The fade gradient
   on the right edge is a touch-device cue that there's more content.
   max-width must be viewport-relative — `max-width: 100%` doesn't constrain
   when an ancestor has auto width (the table-scroll's grandparent is often
   a layout div without explicit width, so percentage chains resolve to
   "as wide as content needs", which `min-width: max-content` on the inner
   table then expands. Using `100vw - sidebar-w` hard-codes the cap in
   absolute pixels relative to the viewport). */
.table-scroll {
    /* Desktop chrome: page-content padding (24*2=48) + card padding (24*2=48)
       = 96; sidebar (240px) via --sidebar-w. NB: was 72px, which assumed 12px
       card padding — but .card padding is 24px (line ~354), so on wide-table
       pages (Products, TDS Mappings) the scroll region overshot the card by
       24px and pushed content past the viewport. S246 fix. */
    max-width: calc(100vw - var(--sidebar-w) - 96px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
.table-scroll > table { display: table; min-width: max-content; }
.table-scroll::after {
    /* right-edge gradient signaling scrollability — only visible while the
       container has unread overflow on the right */
    content: '';
    position: sticky;
    right: 0; top: 0; bottom: 0;
    width: 24px; height: 100%;
    margin-left: -24px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--surface));
    display: block;
}
.page-content { max-width: 100%; overflow-x: hidden; }
/* Prevent very long unbreakable strings (URLs, large numbers, slugs) from
   pushing their flex parent past the viewport. */
.card * { min-width: 0; }
.card .data-table th, .card .data-table td { word-break: break-word; }

@media (max-width: 768px) {
    /* Tables pushed past the viewport — handled by the .table-scroll
       wrapper inserted by admin.js. The wrapper's .table-scroll > table
       rule (above this @media block) sets `display: table; min-width:
       max-content` so the cells render at their natural width and the
       wrapper's overflow-x:auto provides the swipe. The earlier rule
       that set `display: block` directly on `.card table` was overriding
       the wrapper's `display: table` because both selectors had the
       same specificity and the @media-block rule appeared later in the
       cascade — net effect was the table collapsed to fit and the scroll
       wrapper had nothing to scroll to. Removed to let the wrapper win. */
    /* Fallback: if a table somehow renders before the MutationObserver
       wraps it, give it a horizontal scroll on its own. */
    .card > table:not([data-mobile-wrapped="1"]) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Mobile: sidebar is hidden, so the calc loses the sidebar segment.
       page-content padding 16px each side (32) + card padding 24px each
       side (48) = 80px total horizontal chrome. (Was 64px — assumed 16px
       card padding; actual is 24px. S246.) */
    .table-scroll {
        max-width: calc(100vw - 80px) !important;
    }
    /* Same containment problem for the .card itself when its content has
       intrinsic min-content larger than the viewport (e.g. long product
       names rendered without table wrapping). Hard-cap the card width to
       what the viewport can actually show. Page-content padding is 16px
       per side, so the card may be at most viewport-32px wide. */
    .card {
        max-width: calc(100vw - 32px) !important;
    }

    /* Dashboard: the page-level 3-col stats grid (inline-styled) collapses
       to one column on mobile. The selector matches the inline style; we
       use !important because inline styles otherwise win. */
    div[style*="grid-template-columns:1fr 1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:2fr 1fr"],
    div[style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Cards: iOS-Settings-style breathing room. 18px internal padding pairs
       with the 16px page-content padding for symmetric visual margins both
       outside and inside every card. */
    .card { padding: 18px; max-width: 100%; overflow-x: hidden; }
    .card h2, .card h3 { font-size: 14px; line-height: 1.3; }
    .card .stat-value { font-size: 22px !important; }
    .card .stat-label { font-size: 11px; }

    /* Charts (Chart.js renders into a canvas with fixed width) — let the
       canvas shrink with its container. */
    .card canvas { max-width: 100% !important; height: auto !important; }

    /* Inline `font-size:30px` (Dashboard "AI Chat Users" stat triple)
       overrides the mobile shrink unless we win specificity inline-vs-inline.
       Targeting via attribute selector + !important. */
    div[style*="font-size:30px"], div[style*="font-size: 30px"] { font-size: 22px !important; }

    /* When 3-col grids collapse to 1-col, the original visual divider was
       a left border on cells 2 + 3. Convert that to a top border between
       stacked rows so the divider stays meaningful in the new direction.
       :not(.card) excludes cards that happen to be direct children of an
       inline-grid wrapper (e.g. sales-pulse.html line 73 has a 2fr 1fr
       outer grid wrapping two cards) — those should keep their .card
       padding intact. */
    div[style*="grid-template-columns:1fr 1fr 1fr"] > div:not(.card),
    div[style*="grid-template-columns: 1fr 1fr 1fr"] > div:not(.card),
    div[style*="grid-template-columns:1fr 1fr"] > div:not(.card),
    div[style*="grid-template-columns: 1fr 1fr"] > div:not(.card),
    div[style*="grid-template-columns:2fr 1fr"] > div:not(.card),
    div[style*="grid-template-columns: 2fr 1fr"] > div:not(.card) {
        border-left: none !important;
        padding-left: 0 !important;
    }
    div[style*="grid-template-columns:1fr 1fr 1fr"] > div:not(.card) + div:not(.card),
    div[style*="grid-template-columns: 1fr 1fr 1fr"] > div:not(.card) + div:not(.card),
    div[style*="grid-template-columns:1fr 1fr"] > div:not(.card) + div:not(.card),
    div[style*="grid-template-columns: 1fr 1fr"] > div:not(.card) + div:not(.card),
    div[style*="grid-template-columns:2fr 1fr"] > div:not(.card) + div:not(.card),
    div[style*="grid-template-columns: 2fr 1fr"] > div:not(.card) + div:not(.card) {
        border-top: 1px solid var(--border);
        padding-top: 12px;
    }

    /* Card header: when title + period pills + helper text overflow, wrap
       them onto multiple lines instead of pushing past the viewport. */
    .card-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Period pills (Today / This Week / This Month / Last 30 Days / This
       Year) total ~440px — wider than every phone. Let the row scroll
       horizontally inside the card-header. */
    .period-pills {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    .period-pill { flex-shrink: 0; padding: 6px 10px; font-size: 11px; }

    /* btn-row (Quick Actions) — let buttons wrap and stretch full-width */
    .btn-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .btn-row > .btn { flex: 1 1 calc(50% - 4px); min-height: 40px; text-align: center; }

    /* ======================================================================
       NOV-71 part B — Settings / TDS / Products / Knowledge / QA Scores
       ====================================================================== */

    /* Inline min-width on inputs/selects too wide for a 375px viewport.
       Release them so they fill the available row width instead. */
    [style*="min-width:240px"], [style*="min-width: 240px"],
    [style*="min-width:260px"], [style*="min-width: 260px"],
    [style*="min-width:280px"], [style*="min-width: 280px"],
    [style*="min-width:180px"], [style*="min-width: 180px"],
    [style*="min-width:140px"], [style*="min-width: 140px"] {
        min-width: 0 !important;
    }

    /* Inline fixed widths on form controls — full-width on mobile */
    input[style*="width:260px"], input[style*="width: 260px"],
    input[style*="width:240px"], input[style*="width: 240px"],
    input[style*="width:200px"], input[style*="width: 200px"],
    input[style*="width:160px"], input[style*="width: 160px"],
    select[style*="max-width:200px"], select[style*="max-width: 200px"],
    select[style*="max-width:160px"], select[style*="max-width: 160px"],
    select[style*="max-width:130px"], select[style*="max-width: 130px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Number inputs that are intentionally narrow (counts, seconds) keep their size */

    /* Settings: Operating Hours uses self-contained .op-day rows now —
       no grid collapse needed. The .op-day media query above (max-width:
       480px) stacks weekday name above time pickers. */

    /* File inputs: stretch full-width */
    input[type="file"] { max-width: 100% !important; }

    /* Quick-reply template "Add new" inputs: stack vertically */
    #qrtNewLabel, #qrtNewBody { width: 100% !important; min-width: 0 !important; }

    /* Settings collapsible cards: compact summary heading + tighter body */
    details.collapsible-card > summary { padding: 10px 12px; }
    details.collapsible-card > summary > h2 { font-size: 14px; }
    details.collapsible-card > summary .card-subtitle { font-size: 11px; line-height: 1.3; }
    details.collapsible-card .card-body { padding: 12px; }

    /* TDS/Products: search + filter inputs in a flex row — wrap them */
    .form-row { flex-wrap: wrap; gap: 8px; }
    .form-row > * { min-width: 0 !important; }
    /* Filter rows commonly use display:flex + flex-wrap directly inline; the
       `[style*="flex"]` cascade is too broad, so just target form inputs. */

    /* Page titles + subtitles tighter */
    .page-title { font-size: 18px; line-height: 1.2; margin-bottom: 4px; }
    .page-subtitle { font-size: 12px; margin-bottom: 12px; }

    /* TDS bulk import card: the action row and progress text shouldn't
       enforce a min-width that wraps oddly. */
    .tds-bulk-defaults-grid, .bulk-defaults-grid { grid-template-columns: 1fr !important; }
}

.mobile-menu-btn {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--text2);
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* --- Period Pills (Sales Pulse) --- */
.period-pills {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.period-pill {
    padding: 6px 14px;
    background: var(--surface2);
    border: none;
    color: var(--text2);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    border-right: 1px solid var(--border);
}
.period-pill:last-child { border-right: none; }
.period-pill:hover:not(.active) { background: var(--border); color: var(--text); }
.period-pill.active { background: var(--accent); color: #fff; }

/* --- Custom date-range picker (S232) --- */
.custom-range-panel {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.date-input {
    width: auto;
    padding: 6px 10px;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    color-scheme: light; /* native calendar popup follows the theme */
}
[data-theme="dark"] .date-input { color-scheme: dark; }
.custom-range-label { font-size: 12px; color: var(--text2); }

/* --- Stat delta --- */
.stat-delta { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; }
.stat-delta.up { color: var(--green); }
.stat-delta.down { color: var(--red); }

/* --- Chart loading overlay --- */
.chart-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--text3);
    font-size: 13px;
    border-radius: var(--radius);
}

/* --- Granularity button active state --- */
.granularity-btn.active { background: var(--accent-bg); color: var(--accent); }

/* --- SEO Templates row editor (S170) --- */
.seo-tpl-rows {
    border-collapse: collapse;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.seo-tpl-rows thead th {
    background: var(--surface2);
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.seo-tpl-rows tbody tr {
    border-top: 1px solid var(--border-light);
}
.seo-tpl-rows tbody tr:first-child {
    border-top: none;
}
.seo-tpl-rows tbody td {
    padding: 6px 8px;
    vertical-align: middle;
}
.seo-tpl-rows tbody input[type="text"],
.seo-tpl-rows tbody input[type="number"] {
    width: 100%;
    box-sizing: border-box;
}
.seo-tpl-rows tbody button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}