/* =============================================================================
   Ghanti Control Panel — Catppuccin Mocha theme
   -----------------------------------------------------------------------------
   One stylesheet for the whole SPA (shell + every page + login). We use CSS
   custom properties for the palette so the operator's "one mental model, one
   theme" rule holds: change a token here, it changes everywhere. The layout aims
   for a dense analytics-console feel (tight spacing, zebra tables, sticky heads).
   ========================================================================== */

:root {
    /* --- Catppuccin Mocha palette (exact hexes per the brief) --- */
    --crust:    #11111b;  /* deepest bg — page behind cards, code/terminal */
    --mantle:   #181825;  /* sidebar, top bar */
    --base:     #1e1e2e;  /* main content bg */
    --surface0: #313244;  /* cards, inputs, elevated rows */
    --surface1: #45475a;  /* borders, dividers */
    --overlay0: #6c7086;  /* placeholders, disabled, faint icons */
    --subtext0: #a6adc8;  /* labels, secondary text */
    --text:     #cdd6f4;  /* primary text */
    --accent:   #89b4fa;  /* primary action blue */
    --green:    #a6e3a1;  /* success / online / delivered */
    --yellow:   #f9e2af;  /* warning / limited / paused */
    --red:      #f38ba8;  /* error / danger / failed */
    --teal:     #94e2d5;  /* info badges, secondary accent */
    --mauve:    #cba6f7;  /* tertiary accent (variant C, charts) */

    /* Derived tones (tints of the above) for hover/active/badge backgrounds. */
    --accent-hover: #74c7ec;
    --accent-bg:    #1e3a5f;            /* active nav / selected row tint */
    --accent-soft:  rgba(137, 180, 250, 0.14);
    --green-soft:   rgba(166, 227, 161, 0.15);
    --yellow-soft:  rgba(249, 226, 175, 0.15);
    --red-soft:     rgba(243, 139, 168, 0.15);
    --teal-soft:    rgba(148, 226, 213, 0.15);
    --overlay-soft: rgba(108, 112, 134, 0.16);

    /* Geometry + type, shared across components. */
    --radius:      8px;
    --radius-sm:   6px;
    --sidebar-w:   230px;
    --font: "Inter", "Segoe UI", "Ubuntu", "Cantarell", system-ui, sans-serif;
    --mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "Menlo", monospace;
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

/* ----------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
}

body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--text);
    background: var(--base);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--text); }

::selection { background: var(--accent-soft); }

.hidden { display: none !important; }
.muted  { color: var(--overlay0); }

/* Custom scrollbars to match the dark surfaces (the default light ones jar). */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--surface1);
    border-radius: 6px;
    border: 2px solid var(--base);
}
*::-webkit-scrollbar-thumb:hover { background: var(--overlay0); }

/* =============================================================================
   App shell — sidebar + content column
   ========================================================================== */
#app {
    display: flex;
    height: 100vh;
    overflow: hidden;             /* each pane scrolls internally, not the page */
}

/* ------------------------------------------------------------- sidebar ----- */
#sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--mantle);
    border-right: 1px solid var(--surface1);
    display: flex;
    flex-direction: column;
    padding: 18px 12px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 18px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--surface1);
}
.brand-mark { font-size: 22px; line-height: 1; }
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: 0.2px; }

#nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
    flex: 1 1 auto;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--subtext0);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.nav-item:hover { background: var(--surface0); color: var(--text); }

/* Active state uses the accent-bg tint + a left accent rail (analytics-console
   convention: the current section is unmistakable at a glance). */
.nav-item.active {
    background: var(--accent-bg);
    color: var(--text);
    box-shadow: inset 3px 0 0 var(--accent);
}
.nav-icon {
    width: 18px;
    text-align: center;
    color: var(--overlay0);
    font-size: 13px;
}
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon { color: var(--accent); }

.sidebar-foot {
    margin-top: 10px;
    padding: 12px 8px 2px;
    border-top: 1px solid var(--surface1);
    font-size: 11px;
}

/* ------------------------------------------------------------- content ----- */
#content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;                 /* allow tables to shrink instead of overflow */
}

/* ------------------------------------------------------------- top bar ----- */
#topbar {
    height: 60px;
    flex: 0 0 60px;
    background: var(--mantle);
    border-bottom: 1px solid var(--surface1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
}
#page-title { font-size: 18px; font-weight: 700; }

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.admin-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid var(--surface1);
}
.admin-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--subtext0);
}

/* The "Sync ghanti" button gets a tiny spinner that app.js reveals via .syncing. */
#btn-sync .sync-spinner {
    display: none;
    width: 13px;
    height: 13px;
    margin-right: 7px;
    border: 2px solid rgba(17, 17, 27, 0.35);
    border-top-color: var(--crust);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
#btn-sync.syncing .sync-spinner { display: inline-block; }
#btn-sync.syncing { opacity: 0.85; cursor: progress; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------- view area ----- */
#view {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 22px;
    background: var(--base);
}
.view-loading {
    color: var(--overlay0);
    padding: 40px;
    text-align: center;
    font-size: 14px;
}

/* Page header used inside each route (title + actions row). */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.page-head h2 { font-size: 16px; }
.page-sub { color: var(--subtext0); font-size: 13px; margin-top: 2px; }

/* =============================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--surface1);
    background: var(--surface0);
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease,
                color 0.12s ease, transform 0.04s ease;
    white-space: nowrap;
}
.btn:hover { background: var(--surface1); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Primary — solid accent, dark text, no border (the brief's "accent" button). */
.btn-accent {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--crust);
    font-weight: 600;
}
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Danger — transparent with red text/border (destructive: delete, hard send). */
.btn-danger {
    background: transparent;
    border-color: var(--red);
    color: var(--red);
}
.btn-danger:hover { background: var(--red-soft); }

/* Compact variant for table rows / inline actions. */
.btn-small { padding: 5px 12px; font-size: 12px; }

/* Full-width (login submit, modal footers). */
.btn-block { width: 100%; }

/* Ghost / subtle — for secondary toolbar actions. */
.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--subtext0);
}
.btn-ghost:hover { background: var(--surface0); color: var(--text); }

/* =============================================================================
   Cards
   ========================================================================== */
.card {
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: var(--radius);
    overflow: hidden;
}
.card-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--surface1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.card-head h3 { font-size: 14px; }
.card-body { padding: 18px; }

/* Dashboard KPI grid — dense, auto-fitting stat cards. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.stat-card {
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--subtext0);
}
.stat-value {
    font-size: 26px;
    font-weight: 700;
    margin-top: 6px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;   /* numbers line up like a console */
}
.stat-delta { font-size: 12px; margin-top: 4px; }
.stat-delta.up   { color: var(--green); }
.stat-delta.down { color: var(--red); }
.stat-card.accent { border-color: var(--accent); }
.stat-card.accent .stat-value { color: var(--accent); }

/* Generic grid for arbitrary card layouts on a page. */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* =============================================================================
   Tables — zebra striping + sticky header (the analytics-console default)
   ========================================================================== */
.table-wrap {
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: var(--radius);
    overflow: auto;
    max-height: calc(100vh - 200px);     /* scroll the body, pin the header */
}
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
table.data thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mantle);
    color: var(--subtext0);
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--surface1);
    white-space: nowrap;
}
table.data tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--surface1);
    color: var(--text);
}
table.data tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.018); }
table.data tbody tr:hover { background: var(--accent-soft); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data td.num, table.data th.num { text-align: right; }
table.data td.mono { font-family: var(--mono); font-size: 12.5px; }

.empty-row {
    text-align: center;
    color: var(--overlay0);
    padding: 28px !important;
}

/* =============================================================================
   Forms
   ========================================================================== */
.field { display: block; margin-bottom: 14px; }
.field-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--subtext0);
    margin-bottom: 6px;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="email"],
select,
textarea {
    width: 100%;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--overlay0); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
input:disabled, select:disabled, textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
select {
    appearance: none;
    /* Chevron drawn inline so we don't ship an asset for one control. */
    background-image: linear-gradient(45deg, transparent 50%, var(--overlay0) 50%),
                      linear-gradient(135deg, var(--overlay0) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 32px;
}

/* Inline toolbar of filters above tables (search, selects, etc.). */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.filter-bar .field { margin-bottom: 0; }
.filter-bar input, .filter-bar select { min-width: 140px; }
.filter-grow { flex: 1 1 auto; }

/* =============================================================================
   Status badges
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.badge.success { background: var(--green-soft);  color: var(--green); }
.badge.warn    { background: var(--yellow-soft); color: var(--yellow); }
.badge.error   { background: var(--red-soft);    color: var(--red); }
.badge.info    { background: var(--teal-soft);   color: var(--teal); }
.badge.muted   { background: var(--overlay-soft); color: var(--overlay0); }
.badge.accent  { background: var(--accent-soft); color: var(--accent); }
/* Dot-less variant for plain category tags. */
.tag { padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.tag::before { display: none; }

/* =============================================================================
   Groups page — the MAIN grouped view (threshold buckets)
   Each row is a bucket ("N people received >= X calls") with a prominent,
   per-row "Send SMS" accent button — the operator's primary action surface.
   ========================================================================== */
.bucket-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bucket-row {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    align-items: center;
    gap: 18px;
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: var(--radius);
    padding: 14px 18px;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.bucket-row:hover { border-color: var(--surface2, var(--overlay0)); }

/* Left: the threshold label, e.g. ">= 50 calls". */
.bucket-range {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.bucket-range .bucket-sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--overlay0);
    margin-top: 2px;
}

/* Middle: two big counters — people in the bucket + their total calls. */
.bucket-metrics {
    display: flex;
    gap: 30px;
}
.bucket-metric .bm-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.bucket-metric.people .bm-value { color: var(--accent); }
.bucket-metric.calls  .bm-value { color: var(--teal); }
.bucket-metric .bm-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--subtext0);
    margin-top: 3px;
}

/* Right: the prominent Send SMS button. Slightly larger than a normal accent
   button because it is the page's main call-to-action. */
.bucket-actions { display: flex; gap: 8px; }
.btn-send-sms {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    background: var(--accent);
    border-color: var(--accent);
    color: var(--crust);
    box-shadow: 0 0 0 0 var(--accent-soft);
}
.btn-send-sms:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 0 14px var(--accent-soft);
}
.btn-send-sms::before { content: "\2709"; font-size: 13px; }  /* ✉ glyph */

/* Saved groups list reuses .bucket-row but tints the Send button per-group. */
.group-row .bucket-range .bucket-sub { color: var(--subtext0); }

/* =============================================================================
   Campaign composer modal — 4 variant textareas + live char/segment counters
   ========================================================================== */
.modal-host {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px;
    background: rgba(17, 17, 27, 0.72);
    backdrop-filter: blur(3px);
    overflow-y: auto;
}
.modal {
    width: 100%;
    max-width: 880px;
    background: var(--base);
    border: 1px solid var(--surface1);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    animation: modal-in 0.16s ease;
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--surface1);
}
.modal-head h3 { font-size: 15px; }
.modal-close {
    background: none;
    border: none;
    color: var(--overlay0);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 20px; }
.modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--surface1);
}
.modal-foot .foot-left { color: var(--subtext0); font-size: 12.5px; }
.modal-foot .foot-actions { display: flex; gap: 10px; }

/* The 4 split-test variants laid out 2x2. Each has its own char/segment counter. */
.variant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.variant-box {
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: var(--radius-sm);
    padding: 12px;
}
.variant-box .variant-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.variant-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 5px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
    font-size: 12px;
}
/* Distinct accent per variant so A/B/C/D read apart at a glance. */
.variant-box[data-variant="A"] .variant-label { background: var(--accent-soft); color: var(--accent); }
.variant-box[data-variant="B"] .variant-label { background: var(--green-soft);  color: var(--green); }
.variant-box[data-variant="C"] .variant-label { background: var(--teal-soft);   color: var(--teal); }
.variant-box[data-variant="D"] .variant-label { background: rgba(203,166,247,0.16); color: var(--mauve); }

.variant-box textarea {
    min-height: 92px;
    font-size: 13px;
    background: var(--crust);
}

/* Live counter line under each textarea: chars · segments · encoding. */
.variant-counter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 7px;
    font-size: 11.5px;
    color: var(--subtext0);
    font-variant-numeric: tabular-nums;
}
.variant-counter .cc-segments { color: var(--text); font-weight: 600; }
.variant-counter .cc-enc {
    margin-left: auto;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
/* Multi-segment is a cost warning — flip the counter to yellow/red. */
.variant-counter.warn  { color: var(--yellow); }
.variant-counter.warn  .cc-segments { color: var(--yellow); }
.variant-counter.over  { color: var(--red); }
.variant-counter.over  .cc-segments { color: var(--red); }

/* The weight inputs row under the variant grid. */
.variant-weights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 16px;
}

/* Safety-rail callout in the composer (dry-run first, hard cap). */
.safety-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--yellow-soft);
    border: 1px solid rgba(249, 226, 175, 0.3);
    color: var(--yellow);
    font-size: 12.5px;
}
.safety-note strong { color: var(--text); }

/* Checkbox row (e.g. "I confirm — allow multi-segment / opt in to live send"). */
.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--subtext0);
    margin-top: 12px;
}
.check-row input[type="checkbox"] {
    width: 15px; height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* =============================================================================
   Progress bars — campaign live progress + funnel fill
   ========================================================================== */
.progress {
    height: 8px;
    background: var(--crust);
    border-radius: 6px;
    overflow: hidden;
}
.progress .bar {
    height: 100%;
    background: var(--accent);
    border-radius: 6px;
    transition: width 0.3s ease;
}
.progress .bar.green  { background: var(--green); }
.progress .bar.yellow { background: var(--yellow); }
.progress .bar.red    { background: var(--red); }
.progress.tall { height: 12px; }

/* Labeled progress (used in funnel + campaign run view). */
.progress-block { margin-bottom: 14px; }
.progress-block .pb-top {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    margin-bottom: 5px;
}
.progress-block .pb-top .pb-pct {
    color: var(--subtext0);
    font-variant-numeric: tabular-nums;
}

/* Live campaign counters strip (sent / delivered / failed / queued). */
.run-counters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 16px 0;
}
.run-counter {
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    text-align: center;
}
.run-counter .rc-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.run-counter .rc-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--subtext0); margin-top: 3px; }
.run-counter.sent      .rc-value { color: var(--accent); }
.run-counter.delivered .rc-value { color: var(--green); }
.run-counter.failed    .rc-value { color: var(--red); }
.run-counter.queued    .rc-value { color: var(--overlay0); }

/* =============================================================================
   Split-test result cards — per-variant conversion side by side
   ========================================================================== */
.split-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.split-card {
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: var(--radius);
    padding: 16px 18px;
    position: relative;
}
.split-card .sc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.split-card .variant-label { width: 24px; height: 24px; }
.split-card .sc-name { font-weight: 600; font-size: 13px; }

/* The headline conversion number for the variant. */
.split-card .sc-conv {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.split-card .sc-conv-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--subtext0);
    margin-top: 4px;
}

/* The winning variant gets an accent ring + "Winner" tag. */
.split-card.winner {
    border-color: var(--green);
    box-shadow: 0 0 0 1px var(--green) inset;
}
.split-card .winner-tag {
    position: absolute;
    top: 12px; right: 12px;
    background: var(--green-soft);
    color: var(--green);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Per-variant metric breakdown (sent → installed → verified → calls → minutes). */
.sc-metrics {
    margin-top: 14px;
    border-top: 1px solid var(--surface1);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.sc-metric {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
}
.sc-metric .m-k { color: var(--subtext0); }
.sc-metric .m-v { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Funnel step list (Analytics → funnel overview). */
.funnel { display: flex; flex-direction: column; gap: 4px; }
.funnel-step { padding: 4px 0; }
.funnel-step .fs-top {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 5px;
}
.funnel-step .fs-name { font-weight: 600; }
.funnel-step .fs-stat { color: var(--subtext0); font-variant-numeric: tabular-nums; }
.funnel-step .fs-rate { color: var(--green); font-size: 12px; margin-left: 8px; }

/* =============================================================================
   CDR Import — preview + mapping + progress
   ========================================================================== */
.mapping-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}
.preview-scroll { overflow-x: auto; }
table.preview {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: var(--mono);
}
table.preview th, table.preview td {
    border: 1px solid var(--surface1);
    padding: 6px 9px;
    white-space: nowrap;
    text-align: left;
}
table.preview th { background: var(--mantle); color: var(--subtext0); }

/* Import progress panel (rows done / total + bar). */
.import-status {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    font-variant-numeric: tabular-nums;
}
.import-status .is-bar { flex: 1 1 auto; }

/* =============================================================================
   Toast notifications — top-center stack
   ========================================================================== */
#toast-host {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.toast {
    min-width: 240px;
    max-width: 420px;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    background: var(--surface0);
    border: 1px solid var(--surface1);
    color: var(--text);
    font-size: 13px;
    box-shadow: var(--shadow);
    pointer-events: auto;
    animation: toast-in 0.18s ease;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.toast.leaving { animation: toast-out 0.2s ease forwards; }
@keyframes toast-out {
    to { opacity: 0; transform: translateY(-10px); }
}
/* Left accent rail tints the toast by severity. */
.toast.success { border-left: 3px solid var(--green); }
.toast.error   { border-left: 3px solid var(--red); }
.toast.info    { border-left: 3px solid var(--accent); }
.toast.warn    { border-left: 3px solid var(--yellow); }

/* =============================================================================
   Pagination + small utilities
   ========================================================================== */
.pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--subtext0);
}
.pager .page-info { font-variant-numeric: tabular-nums; }

.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mb-2 { margin-bottom: 16px; }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-yellow { color: var(--yellow); }
.text-accent { color: var(--accent); }
.text-muted  { color: var(--overlay0); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }

/* Settings page sectioning (split nav left, content right). */
.settings-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 22px; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; }
.settings-nav a {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--subtext0);
    font-size: 13px;
    cursor: pointer;
}
.settings-nav a:hover { background: var(--surface0); color: var(--text); }
.settings-nav a.active { background: var(--accent-bg); color: var(--text); }
.settings-section { max-width: 600px; }

/* =============================================================================
   Login page (standalone, pre-SPA)
   ========================================================================== */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(137,180,250,0.10), transparent 60%),
        var(--crust);
}
.login-wrap { width: 100%; max-width: 380px; padding: 24px; }
.login-card {
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: var(--radius);
    padding: 30px 28px;
    box-shadow: var(--shadow);
}
.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 6px;
}
.login-brand .brand-name { font-size: 18px; }
.login-sub {
    text-align: center;
    color: var(--subtext0);
    font-size: 13px;
    margin: 0 0 22px;
}
.login-error {
    background: var(--red-soft);
    border: 1px solid rgba(243, 139, 168, 0.3);
    color: var(--red);
    font-size: 13px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}
.login-card .btn-block { margin-top: 6px; }

/* =============================================================================
   Responsive — collapse the sidebar to icons on narrow viewports
   ========================================================================== */
@media (max-width: 1100px) {
    .grid-2, .grid-3, .variant-grid, .mapping-grid { grid-template-columns: 1fr; }
    .settings-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
    :root { --sidebar-w: 60px; }
    .brand-name, .nav-item span:not(.nav-icon), .sidebar-foot,
    .admin-name { display: none; }
    .nav-item { justify-content: center; }
    .bucket-row { grid-template-columns: 1fr; gap: 10px; }
    .bucket-metrics { gap: 20px; }
    #view { padding: 16px; }
}

/* =============================================================================
   Enhancement layer — Users page, step funnel, ROI, dashboard breakdowns,
   sparklines, plus the shared primitives app.js emits (tables, KPI cards, info
   rows, pager). Appended (never edits the rules above) so existing pages keep
   their styling and the new views render in the same Catppuccin Mocha language.
   ========================================================================== */

/* ---- Shared primitives the SPA's render functions rely on ---------------- */

/* Page wrapper + section subtitles + small status/empty blocks. */
.page > h1 { font-size: 20px; margin-bottom: 4px; }
.page > h2 { font-size: 15px; margin: 22px 0 12px; }
.subtitle { color: var(--subtext0); font-size: 13px; margin: 2px 0 18px; }
.loading { color: var(--overlay0); padding: 28px; text-align: center; font-size: 13px; }
.error-block {
    background: var(--red-soft);
    border: 1px solid rgba(243, 139, 168, 0.3);
    color: var(--red);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
}
.empty {
    color: var(--overlay0);
    padding: 24px;
    text-align: center;
    background: var(--surface0);
    border: 1px dashed var(--surface1);
    border-radius: var(--radius);
    font-size: 13px;
}
/* One-line context strip above tables ("N rows match…", snapshot freshness). */
.info-row {
    color: var(--subtext0);
    font-size: 12.5px;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}
.back-link { display: inline-block; margin-bottom: 14px; font-size: 13px; }

/* A second table class name app.js uses (.data-table) — same zebra/sticky look as
   table.data so both vocabularies render identically. */
table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: var(--radius);
    overflow: hidden;
}
table.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mantle);
    color: var(--subtext0);
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--surface1);
    white-space: nowrap;
}
table.data-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--surface1);
    color: var(--text);
}
table.data-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.018); }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table td.mono { font-family: var(--mono); font-size: 12.5px; }
/* Clickable rollup rows (dashboard/campaign lists) get a pointer + hover tint. */
table.data-table tr.clickable { cursor: pointer; }
table.data-table tr.clickable:hover { background: var(--accent-soft); }
.table-scroll { overflow-x: auto; }

/* Pager (.btn-sm is app.js's small-button alias for .btn-small). */
.btn-sm { padding: 5px 12px; font-size: 12px; }
.pager-label { font-variant-numeric: tabular-nums; }

/* KPI cards (dashboard) — accent-tinted value per metric. */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.kpi-card {
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.kpi-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--subtext0);
    margin-top: 6px;
}
.kpi-accent .kpi-value { color: var(--accent); }
.kpi-green  .kpi-value { color: var(--green); }
.kpi-teal   .kpi-value { color: var(--teal); }
.kpi-yellow .kpi-value { color: var(--yellow); }
.kpi-red    .kpi-value { color: var(--red); }

/* Conversion / active-window rate chips (dashboard strip). */
.rate-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.rate-chip {
    flex: 1 1 140px;
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: var(--radius);
    padding: 12px 16px;
}
.rate-pct {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.rate-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--subtext0);
    margin-top: 3px;
}

/* ---- Inline checkbox label used in filter bars (Users "installed only"). -- */
.check-inline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--subtext0);
    white-space: nowrap;
}
.check-inline input[type="checkbox"] {
    width: 15px; height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* =============================================================================
   STEP FUNNEL — labelled horizontal bars (count, % of sent, drop-off vs prev).
   Shared by the Campaign detail view + the Analytics page.
   ========================================================================== */
.funnel-card {
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 16px;
}
.funnel-card > h3 { font-size: 13px; margin-bottom: 14px; color: var(--subtext0); }

.step-funnel { display: flex; flex-direction: column; gap: 10px; }
.sf-row {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    align-items: center;
    gap: 14px;
}
.sf-label { font-size: 13px; font-weight: 600; color: var(--text); }
/* The bar track + gradient fill; the fill width is set inline per step. */
.sf-track {
    height: 22px;
    background: var(--crust);
    border-radius: 5px;
    overflow: hidden;
}
.sf-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--teal));
    border-radius: 5px;
    transition: width 0.35s ease;
}
.sf-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
/* The "% of sent" and drop-off annotations sit beside the count, muted/red. */
.sf-pct {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--subtext0);
}
.sf-drop {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--red);
}

/* =============================================================================
   ROI block — SMS cost, installs, cost/install, company revenue, ROI verdict.
   ========================================================================== */
.roi-block { /* container; grid does the work */ }
.roi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}
.roi-cell {
    background: var(--crust);
    border: 1px solid var(--surface1);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    text-align: center;
}
.roi-value {
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.roi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--subtext0);
    margin-top: 4px;
}
/* ROI verdict cell flips green (profitable) / red (underwater). */
.roi-cell.roi-good { border-color: var(--green); }
.roi-cell.roi-good .roi-value { color: var(--green); }
.roi-cell.roi-bad { border-color: var(--red); }
.roi-cell.roi-bad .roi-value { color: var(--red); }

/* =============================================================================
   Dashboard breakdown tables — top caller countries + devices, with inline bars.
   ========================================================================== */
.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 14px;
}
.breakdown-card {
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.breakdown-card > h3 { font-size: 13px; margin-bottom: 10px; color: var(--subtext0); }
/* The breakdown table is borderless + tight; the middle cell holds the bar. */
table.breakdown-table { border: none; background: transparent; }
table.breakdown-table tbody td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--surface1);
    font-size: 12.5px;
}
table.breakdown-table tbody tr:last-child td { border-bottom: none; }
.bd-bar-cell { width: 55%; }
.bd-bar {
    height: 8px;
    background: var(--crust);
    border-radius: 4px;
    overflow: hidden;
}
.bd-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
}
.bd-count {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* =============================================================================
   Sparklines — tiny inline-SVG trend lines on the dashboard (signups / calls).
   ========================================================================== */
.spark-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.spark-card {
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.spark-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}
.spark-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--subtext0);
}
.spark-latest {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
/* The SVG fills the card width; the line + faint area read at small heights. */
.sparkline { width: 100%; height: auto; display: block; }
.spark-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.spark-area {
    fill: var(--accent-soft);
    stroke: none;
}

/* Narrow viewports: the step-funnel rows stack their bar full-width. */
@media (max-width: 880px) {
    .sf-row { grid-template-columns: 90px 1fr; }
    .sf-count { grid-column: 2; text-align: left; }
}

/* ===========================================================================
   Analytics page — product funnel, trends chart, split-test comparison.
   =========================================================================== */

/* Section rhythm: each analytics block is a titled section with breathing room. */
.an-section { margin-top: 30px; }
.an-section > h2 { font-size: 16px; margin: 0 0 4px; }
.section-note { color: var(--subtext0); font-size: 13px; margin: 0 0 14px; }

/* A small uppercase label that frames a group of cards (e.g. attribution KPIs). */
.section-label {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--subtext0);
    margin: 4px 0 10px;
}
.section-label .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Inline legend dot, reused by the trends chart + totals. */
.dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* --- Ghanti product funnel: narrowing horizontal bars --------------------- */
.product-funnel {
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: 8px;
    padding: 16px 18px;
}
.pf-row {
    display: grid;
    grid-template-columns: 160px 1fr 150px;
    align-items: center;
    gap: 12px;
}
.pf-label { font-size: 13px; color: var(--subtext0); }
.pf-track {
    position: relative;
    height: 26px;
    background: var(--crust);
    border-radius: 6px;
    overflow: hidden;
}
.pf-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
    min-width: 2px;
}
.pf-accent { background: var(--accent); }
.pf-teal   { background: var(--teal); }
.pf-green  { background: var(--green); }
.pf-yellow { background: var(--yellow); }
.pf-inbar {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: var(--crust);
    font-variant-numeric: tabular-nums;
}
.pf-meta { font-size: 12px; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.pf-step { color: var(--overlay0); }
.pf-claims {
    margin-top: 12px;
    font-size: 13px;
    color: var(--subtext0);
}
.pf-claims strong { color: var(--green); }

/* --- Trends chart --------------------------------------------------------- */
.chart-card {
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: 8px;
    padding: 14px 16px;
}
.trend-totals {
    display: flex;
    gap: 22px;
    font-size: 13px;
    color: var(--subtext0);
    margin-bottom: 6px;
}
.trend-totals strong { color: var(--text); }
.line-chart {
    width: 100%;
    height: auto;
    display: block;
    margin: 4px 0 2px;
}
.lc-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.lc-area { fill-opacity: 0.10; stroke: none; }
.lc-axis { stroke: var(--surface1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lc-legend {
    display: flex;
    gap: 18px;
    font-size: 12px;
    color: var(--subtext0);
    margin-bottom: 8px;
}
.lc-xlabels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--overlay0);
    margin-top: 2px;
}

/* --- Split-test: winner banner + comparison bars + variant cards ---------- */
.winner-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg, rgba(166,227,161,0.14), rgba(166,227,161,0.02));
    border: 1px solid var(--green);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.winner-badge {
    background: var(--green);
    color: var(--crust);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 9px;
    border-radius: 5px;
}
.winner-text { font-size: 14px; color: var(--text); }
.winner-text strong { color: var(--green); }

.cmp-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.cmp-row {
    display: grid;
    grid-template-columns: 90px 1fr 130px;
    align-items: center;
    gap: 12px;
}
.cmp-label { font-size: 13px; font-weight: 600; color: var(--subtext0); }
.cmp-track {
    height: 22px;
    background: var(--crust);
    border-radius: 6px;
    overflow: hidden;
}
.cmp-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 6px;
    transition: width 0.5s ease;
}
.cmp-win .cmp-fill { background: var(--green); }
.cmp-win .cmp-label { color: var(--green); }
.cmp-val { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cmp-sub { color: var(--overlay0); font-weight: 400; font-size: 12px; }

/* Variant detail cards (these previously had NO styling — the weak look). */
.variant-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-top: 4px;
}
.variant-card {
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: 8px;
    padding: 14px 16px;
}
.variant-card.variant-win { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.variant-card-head {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mini-badge {
    background: var(--green);
    color: var(--crust);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
}
.variant-copy {
    font-size: 12px;
    color: var(--subtext0);
    background: var(--crust);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
    line-height: 1.4;
}

/* The per-step rows inside a variant card (Sent/Installed/Verified/…). These use
   fs-label/fs-count/fs-rate; lay them out as a tidy aligned row with separators. */
.variant-card .funnel-step {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--surface1);
    font-size: 13px;
}
.variant-card .funnel-step:last-child { border-bottom: none; }
.funnel-step .fs-label { color: var(--subtext0); }
.funnel-step .fs-count { font-weight: 600; font-variant-numeric: tabular-nums; margin-left: auto; }
.funnel-step .fs-rate {
    color: var(--green);
    font-size: 12px;
    min-width: 50px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   SMS Content page — dedicated A/B/C/D template editor (own classes so it
   doesn't inherit the cramped composer-modal styling).
   =========================================================================== */
.smsc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 6px;
}
.smsc-card {
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-left: 3px solid var(--surface1);
    border-radius: 8px;
    padding: 16px 18px;
    transition: border-color 0.15s ease;
}
.smsc-card[data-variant="A"] { border-left-color: var(--accent); }
.smsc-card[data-variant="B"] { border-left-color: var(--green); }
.smsc-card[data-variant="C"] { border-left-color: var(--teal); }
.smsc-card[data-variant="D"] { border-left-color: var(--mauve); }
.smsc-card.smsc-warn { border-color: var(--yellow); }

.smsc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.smsc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    flex: none;
}
.smsc-card[data-variant="A"] .smsc-badge { background: var(--accent-soft); color: var(--accent); }
.smsc-card[data-variant="B"] .smsc-badge { background: var(--green-soft);  color: var(--green); }
.smsc-card[data-variant="C"] .smsc-badge { background: var(--teal-soft);   color: var(--teal); }
.smsc-card[data-variant="D"] .smsc-badge { background: rgba(203,166,247,0.16); color: var(--mauve); }
/* Title takes the slack so the weight control sits flush right. */
.smsc-title { font-weight: 600; font-size: 14px; flex: 1; }

.smsc-weight {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--subtext0);
    white-space: nowrap;
}
.smsc-weight input {
    width: 54px;
    padding: 5px 8px;
    background: var(--crust);
    border: 1px solid var(--surface1);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    text-align: right;
}
.smsc-weight input:focus { outline: none; border-color: var(--accent); }
.smsc-pct { color: var(--overlay0); }

.smsc-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 84px;
    resize: vertical;
    padding: 11px 13px;
    background: var(--crust);
    border: 1px solid var(--surface1);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.5;
}
.smsc-textarea:focus { outline: none; border-color: var(--accent); }

.smsc-counter {
    margin-top: 8px;
    font-size: 12px;
    color: var(--subtext0);
    font-variant-numeric: tabular-nums;
}
.smsc-counter.warn { color: var(--yellow); }

.smsc-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}
.smsc-hint { font-size: 12.5px; }

@media (max-width: 880px) {
    .smsc-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Fix the campaign-composer variant blocks too: the JS emits .variant-block /
   .variant-weight / .v-content / .v-counter, but the original CSS targeted
   .variant-box / .variant-weights, so they rendered unstyled. Style the actual
   classes the markup uses.
   --------------------------------------------------------------------------- */
.variant-block {
    background: var(--surface0);
    border: 1px solid var(--surface1);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.variant-block .variant-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
/* "Variant A" text needs an auto-width pill, not the 22px square badge. */
.variant-block .variant-label {
    width: auto;
    height: auto;
    padding: 3px 9px;
    font-size: 12px;
    border-radius: 5px;
}
.variant-block[data-variant="A"] .variant-label { background: var(--accent-soft); color: var(--accent); }
.variant-block[data-variant="B"] .variant-label { background: var(--green-soft);  color: var(--green); }
.variant-block[data-variant="C"] .variant-label { background: var(--teal-soft);   color: var(--teal); }
.variant-block[data-variant="D"] .variant-label { background: rgba(203,166,247,0.16); color: var(--mauve); }
.variant-block .variant-weight {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--subtext0);
    white-space: nowrap;
}
.variant-block .variant-weight input {
    width: 52px;
    padding: 4px 7px;
    background: var(--crust);
    border: 1px solid var(--surface1);
    border-radius: 6px;
    color: var(--text);
    text-align: right;
}
.variant-block .v-content {
    width: 100%;
    box-sizing: border-box;
    min-height: 76px;
    resize: vertical;
    padding: 10px 12px;
    background: var(--crust);
    border: 1px solid var(--surface1);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
}
.variant-block .v-content:focus { outline: none; border-color: var(--accent); }
.variant-block .v-counter { margin-top: 7px; font-size: 11.5px; color: var(--subtext0); font-variant-numeric: tabular-nums; }
.variant-block .v-counter.warn { color: var(--yellow); }