/* =====================================================================
   AI Sales Assistant — Admin Design System
   Light/Dark theme, sidebar layout, scalable multi-page architecture
   Typography: Fira Code (data/headings) + Fira Sans (body/labels)
   Colors: Primary #2563EB, CTA #F97316, OLED dark mode
   ===================================================================== */

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

/* --- Theme tokens --- */
:root {
    /* Light theme (default) */
    --bg:          #F8FAFC;
    --bg2:         #F1F5F9;
    --bg-sidebar:  #FFFFFF;
    --surface:     #FFFFFF;
    --surface2:    #F1F5F9;
    --border:      #E2E8F0;
    --border-light:#F1F5F9;
    --text:        #1E293B;
    --text2:       #64748B;
    --text3:       #94A3B8;
    --accent:      #2563EB;
    --accent-hover:#1D4ED8;
    --accent-bg:   rgba(37, 99, 235, 0.08);
    --secondary:   #3B82F6;
    --cta:         #F97316;
    --cta-hover:   #EA580C;
    --green:       #16A34A;
    --green-bg:    #DCFCE7;
    --red:         #DC2626;
    --red-bg:      #FEE2E2;
    --yellow:      #D97706;
    --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"] {
    --bg:          #0B0F1A;
    --bg2:         #243044;
    --bg-sidebar:  #111827;
    --surface:     #1E293B;
    --surface2:    #1E293B;
    --border:      #334155;
    --border-light:#1E293B;
    --text:        #F1F5F9;
    --text2:       #94A3B8;
    --text3:       #64748B;
    --accent:      #3B82F6;
    --accent-hover:#60A5FA;
    --accent-bg:   rgba(59, 130, 246, 0.12);
    --secondary:   #60A5FA;
    --cta:         #F97316;
    --cta-hover:   #FB923C;
    --green:       #22C55E;
    --green-bg:    rgba(34, 197, 94, 0.12);
    --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);
    --glow:        0 0 10px rgba(59, 130, 246, 0.15);
}

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

body {
    font-family: 'Fira Sans', -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;
    background: linear-gradient(135deg, var(--accent), var(--secondary));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Fira Code', monospace;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: var(--glow);
}

.sidebar-title {
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

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

.nav-section-label {
    font-family: 'Fira Code', 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: 'Fira Code', 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);
}

/* --- Main content area --- */
.main {
    flex: 1;
    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: 'Fira Code', monospace;
    color: var(--text);
    font-weight: 600;
}

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

.env-badge {
    font-family: 'Fira Code', 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;
}

/* --- Page content --- */
.page-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    max-height: calc(100vh - var(--header-h));
}

.page-title {
    font-family: 'Fira Code', 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: 'Fira Code', 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: 'Fira Code', 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: 'Fira Sans', 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(37,99,235,0.3); }
.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(249,115,22,0.3); }
.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: 'Fira Sans', 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), var(--glow);
}

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

.form-row { margin-bottom: 12px; }
.form-row label {
    display: block;
    font-family: 'Fira Code', 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: 'Fira Code', 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: 'Fira Code', 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: 'Fira Code', 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: 'Fira Code', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--text3);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-family: 'Fira Code', 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: 'Fira Code', 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: 'Fira Code', 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: 'Fira Code', 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: 'Fira Code', monospace; font-size: 11px;
    white-space: pre-wrap; color: var(--text2);
}

.tds-meta { font-family: 'Fira Code', 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: 'Fira Sans', 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(59,130,246,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: sidebar (240px) + page-content padding (24*2) + card padding (12*2) */
    max-width: calc(100vw - var(--sidebar-w) - 72px);
    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 is 16px each side + card padding 16px each
       side = 64px total horizontal chrome. */
    .table-scroll {
        max-width: calc(100vw - 64px) !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: 'Fira Sans', 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: 'Fira Code', 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: 'Fira Code', 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;
}