/* =========================================================================
   admin.css — MyChatBot Admin
   Layered on top of Bootstrap 4.5 (grid + utilities stay; this restyles).
   Brand tokens build on the existing #6c47ff family already used across the
   stats dashboards, so everything stays visually consistent.
   ========================================================================= */

:root {
    /* Brand */
    --purple: #6c47ff;
    --purple-dark: #5a35ef;
    --purple-darker: #22194D;
    --purple-light: #8b6fff;
    --cyan: #2ccdff;
    --green: #16a34a;

    /* Surfaces / text */
    --bg: #f4f3f8;
    --surface: #fff;
    --border: #e5e3ef;
    --border-soft: #f0eff5;
    --text: #22194D;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;

    /* Scales */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 2px 8px rgba(34,25,77,0.12);
    --shadow-lg: 4px 0 24px rgba(0,0,0,0.30);

    --sidebar-w: 240px;
    --topbar-h: 56px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    font-family: var(--font);
    color: var(--text);
    min-height: 100vh;
}

/* =========================================================================
   Sidebar
   ========================================================================= */
.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--purple-darker);
    display: flex;
    flex-direction: column;
    z-index: 200;
}
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand img {
    height: 24px;
    width: auto;
    filter: brightness(0) invert(1);
}
.sidebar-brand .badge-admin {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85);
    font-size: 0.6rem;
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sidebar-nav {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;
}
.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: rgba(255,255,255,0.72);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar-nav .nav-link:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
    text-decoration: none;
}
.sidebar-nav .nav-link.active {
    background: rgba(255,255,255,0.10);
    color: #fff;
    border-left-color: var(--cyan);
}
.sidebar-nav .nav-link svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: currentColor;
}
.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.sidebar-footer .user-info {
    color: rgba(255,255,255,0.55);
    font-size: 0.72rem;
    margin-bottom: 10px;
    word-break: break-word;
}
.btn-logout {
    width: 100%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s;
}
.btn-logout:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* =========================================================================
   Main column + mobile topbar
   ========================================================================= */
.admin-main {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.admin-topbar {
    display: none; /* mobile only */
    align-items: center;
    gap: 12px;
    height: var(--topbar-h);
    padding: 0 16px;
    background: var(--purple-darker);
    position: sticky;
    top: 0;
    z-index: 150;
    box-shadow: var(--shadow-md);
}
.admin-topbar .hamburger {
    background: none;
    border: none;
    color: #fff;
    padding: 8px;
    margin-left: -8px;
    cursor: pointer;
    display: inline-flex;
}
.admin-topbar .hamburger svg { width: 24px; height: 24px; fill: currentColor; }
.admin-topbar img { height: 22px; filter: brightness(0) invert(1); }
.admin-topbar .topbar-title {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}
.sidebar-overlay { display: none; }

.admin-content {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

/* =========================================================================
   Pages (hash-routed show/hide)
   ========================================================================= */
.admin-page { display: none; }
.admin-page.active { display: block; }

.page-header { margin-bottom: 20px; }
.page-header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.page-header .page-sub {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 4px;
}

/* =========================================================================
   Section cards
   ========================================================================= */
.section-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    overflow: hidden;
}
.section-header {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-soft);
    flex-wrap: wrap;
    gap: 12px;
}
.section-header h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--purple-darker);
    margin: 0;
}
.section-body { padding: 24px; }

/* =========================================================================
   Controls bar (stats date range + refresh)
   ========================================================================= */
.controls-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.controls-bar select,
.controls-bar input[type="date"] {
    border-radius: var(--radius);
    border: 1.5px solid #dee2e6;
    padding: 6px 12px;
    font-size: 0.8rem;
    height: 34px;
    transition: border-color 0.15s;
}
.controls-bar select:focus,
.controls-bar input[type="date"]:focus {
    border-color: var(--purple);
    outline: none;
    box-shadow: 0 0 0 3px rgba(108,71,255,0.12);
}
.controls-bar label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 4px 0 0;
}
.btn-refresh {
    background: var(--surface);
    border: 1.5px solid #dee2e6;
    border-radius: var(--radius);
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--purple-darker);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
}
.btn-refresh:hover { border-color: var(--purple); color: var(--purple); }
.btn-refresh svg { width: 14px; height: 14px; }

.date-input-group { display: flex; align-items: center; }
.date-input-group label { margin-bottom: 0; margin-right: 5px; white-space: nowrap; }

/* =========================================================================
   Search input
   ========================================================================= */
.search-wrapper { position: relative; }
.search-wrapper input {
    border-radius: var(--radius);
    border: 1.5px solid #dee2e6;
    padding: 10px 16px 10px 40px;
    font-size: 0.88rem;
    width: 100%;
    max-width: 360px;
    transition: border-color 0.15s;
}
.search-wrapper input:focus {
    border-color: var(--purple);
    outline: none;
    box-shadow: 0 0 0 3px rgba(108,71,255,0.12);
}
.search-wrapper .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

/* =========================================================================
   Tables
   ========================================================================= */
.table { margin-bottom: 0; }
.table thead th {
    background: var(--bg);
    border-top: none;
    border-bottom: 2px solid var(--border);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 10px 16px;
    white-space: nowrap;
}
.table tbody td {
    padding: 10px 16px;
    vertical-align: middle;
    font-size: 0.87rem;
    border-color: var(--border-soft);
}
.table-hover tbody tr:hover { background: rgba(108,71,255,0.03); }

.badge-purple { background: var(--purple); color: #fff; }

/* =========================================================================
   Compact row actions (Phase 3)
   ========================================================================= */
.row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.btn-action {
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
    white-space: nowrap;
    transition: filter 0.15s, transform 0.1s;
}
.btn-action:hover { filter: brightness(1.08); color: #fff; }
.btn-action:active { transform: scale(0.98); }
.btn-action.topup { background: var(--cyan); }
.btn-action.agent { background: var(--green); }
.btn-action.edit  { background: var(--purple-darker); }

.row-model-hint {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.subscription-status-stack,
.subscription-date-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.subscription-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    white-space: nowrap;
}

.subscription-status-active { color: #12663b; background: #dcfce7; }
.subscription-status-trial { color: #5b3ea6; background: #ede9fe; }
.subscription-status-overdue,
.subscription-status-cancelling,
.subscription-status-incomplete { color: #92400e; background: #fef3c7; }
.subscription-status-cancelled,
.subscription-status-expired { color: #991b1b; background: #fee2e2; }
.subscription-status-paused { color: #075985; background: #e0f2fe; }
.subscription-status-none,
.subscription-status-not_found,
.subscription-status-unknown { color: #475569; background: #e2e8f0; }

.subscription-provider,
.subscription-date-label,
.subscription-date-empty {
    color: var(--text-secondary);
    font-size: 0.7rem;
    line-height: 1.25;
}

.subscription-date-value {
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.messages-left-value { font-weight: 700; }
.messages-left-high { color: #15803d; }
.messages-left-medium { color: #a16207; }
.messages-left-low { color: #b91c1c; }

/* =========================================================================
   Subscription editor (full-width expandable Edit row — model + plan config)
   The editor lives in its own table row spanning all columns so it has room
   to lay the Model and Plan panels out side by side instead of cramming them
   into the narrow Actions cell.
   ========================================================================= */
.subscription-editor-row > td {
    padding: 0;
    background: var(--surface-2, #f7f7fb);
    border-bottom: 1px solid var(--border);
}
.sub-editor {
    border-left: 3px solid var(--purple);
    padding: 18px 24px 22px;
    animation: subEditorIn 0.18s ease;
}
@keyframes subEditorIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.sub-editor-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}
.sub-editor-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--purple);
}
.sub-editor-email { font-size: 0.82rem; color: var(--text-secondary); }

/* Two panels side by side on wide screens; stack when space is tight. */
.sub-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}
.config-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
}
.config-section .config-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.model-info { margin-bottom: 12px; }
.model-info .badge { padding: 0.35em 0.6em; }

/* Vertical stack of fields inside a panel. align-items:stretch keeps each
   field full width without making it grow vertically. */
.config-stack { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.config-stack > .config-field,
.config-stack > .config-duo { flex: none; }
/* Two fields sharing a row (reasoning+temperature, end date+recurring) */
.config-duo { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.config-duo > .config-field { flex: 1 1 140px; }

.config-field { display: flex; flex-direction: column; gap: 4px; }
.config-field label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}
.config-field select,
.config-field input {
    height: 36px;
    border-radius: var(--radius);
    border: 1.5px solid #dee2e6;
    padding: 4px 10px;
    font-size: 0.82rem;
    background: var(--surface);
}
.config-field select:focus,
.config-field input:focus {
    border-color: var(--purple);
    outline: none;
    box-shadow: 0 0 0 3px rgba(108,71,255,0.12);
}
/* `grow` just means "fill the available width" — width, not flex-grow, so it
   never stretches vertically when stacked in a column. Horizontal sharing
   inside a row is handled by `.config-duo > .config-field`. */
.config-field.grow { min-width: 140px; }
.config-field.grow select,
.config-field.grow input { width: 100%; }
.config-check-field { justify-content: flex-end; }
.config-check-field .form-check { padding-top: 8px; height: 36px; display: flex; align-items: center; gap: 6px; }
.config-check-field .form-check-label { margin: 0; }

.btn-config-update {
    align-self: flex-start;
    margin-top: 4px;
    height: 36px;
    background: var(--purple);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0 18px;
    cursor: pointer;
    transition: background 0.15s, filter 0.15s;
    white-space: nowrap;
}
.btn-config-update:hover { background: var(--purple-dark); filter: brightness(1.03); color: #fff; }
.config-meta { font-size: 0.72rem; color: var(--text-secondary); margin-top: 6px; }

/* =========================================================================
   Pagination bar
   ========================================================================= */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-top: 1px solid var(--border-soft);
}
.pagination-bar .page-info { font-size: 0.82rem; color: var(--text-secondary); }
.pagination-bar .page-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.pagination-bar .page-btn {
    min-width: 34px;
    height: 34px;
    border: 1.5px solid #dee2e6;
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    color: var(--purple-darker);
    font-weight: 600;
}
.pagination-bar .page-btn.active {
    background: var(--purple);
    color: #fff;
    border-color: var(--purple);
}
.pagination-bar .page-btn:hover:not(.active):not(:disabled) {
    border-color: var(--purple);
    color: var(--purple);
}
.pagination-bar .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* =========================================================================
   Responsive — collapse sidebar to off-canvas drawer under 768px
   ========================================================================= */
@media (max-width: 768px) {
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: var(--shadow-lg);
    }
    body.sidebar-open .admin-sidebar { transform: none; }

    .admin-main { margin-left: 0; }
    .admin-topbar { display: flex; }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 190;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    body.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; }

    .admin-content { padding: 16px; }
    .page-header h1 { font-size: 1.2rem; }

    .section-header { flex-direction: column; align-items: flex-start; }
    .section-header .controls-bar,
    .section-header .search-wrapper { width: 100%; }
    .search-wrapper input { max-width: 100%; }

    /* Horizontal scroll preserves all columns on narrow screens */
    .table-responsive #subscriptions-table { min-width: 980px; }

    /* Bigger touch targets (WCAG ~44px) */
    .btn-action { min-height: 40px; padding: 9px 14px; }
    .row-actions { gap: 8px; }
    .btn-logout { min-height: 44px; }
    .config-field select,
    .config-field input,
    .btn-config-update { height: 40px; }

    .pagination-bar { flex-direction: column; gap: 8px; align-items: stretch; }
    .sub-editor { padding: 14px 16px 18px; }
    .sub-editor-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .row-actions { width: 100%; }
    .btn-action { flex: 1 1 auto; justify-content: center; }
}

/* ============================ Pricing calculator ============================ */
.calc-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 28px;
    padding: 24px;
}
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }

.calc-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 16px 6px;
    margin-bottom: 16px;
}
.calc-section-title {
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--purple);
    margin-bottom: 12px;
}
.calc-section-muted { background: var(--bg); padding-bottom: 16px; }
.calc-coming-soon { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }

.calc-inputs label {
    display: block;
    margin-bottom: 14px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
}
.calc-inputs .form-control {
    margin-top: 6px;
    width: 100%;
    /* Bootstrap (loaded page-wide) pins .form-control to
       height: calc(1.5em + .75rem + 2px) ≈ 38px; with our 9px vertical
       padding that clips the text to a half-visible strip. Let content
       size the box. */
    height: auto;
    line-height: 1.4;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 12px;
    font-size: 0.92rem;
    color: var(--text);
    background: var(--surface);
}
.calc-inputs .form-control:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(108, 71, 255, 0.12);
}

.calc-run {
    width: 100%;
    justify-content: center;
    background: var(--purple);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 11px 16px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
/* .btn-refresh:hover flips text to purple (meant for the white toolbar
   button); on the purple Calculate button that made the label invisible. */
.calc-run:hover { background: var(--purple-dark, #5638d6); color: #fff; border-color: transparent; }

.calc-results { min-width: 0; }
.calc-total {
    background: linear-gradient(120deg, var(--purple), var(--purple-light));
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 16px;
    letter-spacing: 0.01em;
}
.calc-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.calc-table td {
    padding: 9px 4px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.9rem;
    color: var(--text);
}
.calc-table tr:last-child td { border-bottom: none; }
.calc-table td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-note { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 20px; }

.calc-cogs {
    background: #fff8ec;
    border: 1px solid #f0dcae;
    border-radius: var(--radius);
    padding: 14px 16px;
}
.calc-cogs .calc-table td { border-bottom-color: #f3e6c8; }
.calc-cogs-title {
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a05a00;
    margin-bottom: 10px;
}
.calc-warn { color: #c0392b; font-weight: 700; font-size: 0.88rem; margin-top: 6px; }

/* Info badge + hover/focus tooltip for calculator field labels. Pure CSS so
   the static admin stays dependency-free; keyboard-reachable via tabindex. */
.calc-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--purple, #6c47ff);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    font-style: normal;
    cursor: help;
    position: relative;
    vertical-align: text-top;
    user-select: none;
}
.calc-info-tip {
    display: none;
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    /* Above every app layer (sticky toolbar 150, drawer 190/200) — a help
       tip must never render underneath chrome. */
    z-index: 1000;
    width: 300px;
    padding: 12px 14px;
    background: var(--text, #1f2430);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.55;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 20, 43, 0.25);
    text-align: left;
}
.calc-info:hover .calc-info-tip,
.calc-info:focus .calc-info-tip { display: block; }

/* Full-width derivation line under a quote row (update-volume math). */
.calc-table td.calc-subnote {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    padding-top: 0;
    text-align: left;
    white-space: normal;
    font-variant-numeric: normal;
}

/* The calculator card must not clip its ⓘ tooltips (section-card default
   is overflow:hidden for rounded corners; the calc has no media that
   needs clipping). */
.section-card.calc-card { overflow: visible; }

/* Manual invoices page */
.manual-invoices-total { font-size: 0.9rem; font-weight: 600; color: var(--text-muted, #6b7280); margin-right: 12px; white-space: nowrap; }
.mi-account { display: flex; flex-direction: column; gap: 2px; }
.mi-account-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; color: #8a8f9c; }
.mi-meter-hint { display: block; font-size: 0.72rem; color: #8a8f9c; }
.mi-usd { font-weight: 700; white-space: nowrap; }
.mi-nowrap { white-space: nowrap; }
.mi-month-final { background: #e6f4ea; color: #1e7e34; }
.mi-month-open { background: #fff4e5; color: #b26a00; }
.mi-empty td { text-align: center; color: #8a8f9c; padding: 28px 12px; }
.mi-error td { text-align: center; color: #b02a37; padding: 20px 12px; }

/* Events page */
.events-controls { flex-wrap: wrap; justify-content: flex-end; }
.events-controls select { width: auto; min-width: 170px; }
.ev-account { display: flex; flex-direction: column; gap: 2px; }
.ev-account-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; color: #8a8f9c; }
.ev-nowrap { white-space: nowrap; }
.ev-details { min-width: 280px; line-height: 1.45; }
.ev-badge { font-weight: 600; }
.ev-created { background: #e8f0fe; color: #1a56c4; }
.ev-topup { background: #e6f4ea; color: #1e7e34; }
.ev-credits { background: #f1ebff; color: var(--purple-dark); }
.ev-plan { background: #fff4e5; color: #b26a00; }
.ev-trial { background: #e7f6f8; color: #0f6674; }
.ev-other { background: #eceef1; color: #495057; }
.ev-empty td { text-align: center; color: #8a8f9c; padding: 28px 12px; }
.ev-error td { text-align: center; color: #b02a37; padding: 20px 12px; }
.pagination-bar .page-btn.ev-page-of { border: none; cursor: default; }
.ev-value { min-width: 180px; }
.ev-usd { font-weight: 700; }
.ev-basis { font-size: 0.72rem; color: #6b7280; margin-top: 2px; max-width: 260px; }
.ev-activity { min-width: 140px; }
.ev-muted { color: #8a8f9c; }
.ev-live { background: #e6f4ea; color: #1e7e34; }
.ev-dead { background: #fdecee; color: #b02a37; }
.ev-new { background: #e8f0fe; color: #1a56c4; }
.ev-summary.ev-stale { opacity: 0.45; }
.ev-usd-trial { color: #0f6674; }
.ev-trial-cost { font-size: 0.78rem; color: #6b7280; margin-top: 2px; }
.ev-trial-active { color: var(--purple-dark); font-weight: 700; }
.ev-summary-trial { color: #0f6674; font-size: 0.85rem; }
.ev-summary { padding: 14px 20px; border-bottom: 1px solid #eef0f3; display: flex; flex-direction: column; gap: 8px; }
.ev-summary-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.ev-summary-total { font-size: 1.6rem; font-weight: 700; color: var(--purple-darker); }
.ev-summary-label { color: #6b7280; font-size: 0.85rem; }
.ev-summary-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.85rem; font-weight: 600; }
.ev-summary-chip { white-space: nowrap; }
.ev-summary-dead { color: #b02a37; font-size: 0.85rem; font-weight: 600; }
.ev-summary-note { color: #8a8f9c; font-size: 0.78rem; }

/* Subscription editor: events link + "plan credits no messages" note */
.sub-editor-events { margin-left: auto; font-size: 0.8rem; font-weight: 600; color: var(--purple); white-space: nowrap; }
.sub-editor-events:hover { color: var(--purple-dark); }
.config-note {
    font-size: 0.78rem;
    line-height: 1.45;
    color: #8a5300;
    background: #fff7e6;
    border: 1px solid #ffe2b3;
    border-radius: 6px;
    padding: 8px 10px;
}
#events-pagination .page-btn { padding: 0 12px; }

/* ---------------------------------------------------------------- Signups */
.su-maintenance { padding: 32px 24px; }
.su-maintenance h2 { font-size: 1.05rem; font-weight: 700; color: var(--purple-darker); margin: 0 0 8px; }
.su-maintenance p { color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 16px; }
.su-maintenance .btn-refresh:hover { text-decoration: none; }
.su-controls { margin-bottom: 16px; flex-wrap: wrap; justify-content: flex-start; }
.su-controls select { width: auto; min-width: 150px; }
.su-check { display: flex; align-items: center; gap: 6px; margin-bottom: 0; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; }
.su-body { transition: opacity 0.15s; }
.su-body.su-stale { opacity: 0.45; }
.su-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.su-tile { background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.su-tile-label { font-size: 0.8rem; color: var(--text-secondary); }
.su-tile-value { font-size: 1.6rem; font-weight: 700; color: var(--purple-darker); line-height: 1.2; margin-top: 2px; }
.su-tile-sub { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
.su-card { margin-bottom: 16px; }
.su-card .section-header h2 { margin-right: 10px; }
.su-card .section-header h2 .su-muted { font-weight: 400; }
.su-pad { padding: 14px 20px; }
.su-two { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
@media (max-width: 1000px) { .su-two { grid-template-columns: 1fr; } }
.su-muted { color: #8a8f9c; font-size: 0.78rem; }
.su-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-nowrap { white-space: nowrap; }
.su-note { font-size: 0.82rem; color: #6b7280; margin-bottom: 8px; }
.su-note.su-error { color: #b02a37; font-weight: 600; }
.su-defs { margin-top: 4px; }
.su-chart-wrap { padding: 8px 16px 12px; }
.su-chart { display: block; max-width: 100%; }
.su-grid { stroke: #eceaf3; stroke-width: 1; }
.su-axis { font-size: 10px; fill: #8a8f9c; }
.su-hit { cursor: default; outline: none; }
.su-hit:hover, .su-hit:focus { fill: rgba(34, 25, 77, 0.06); }
.su-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--text); }
.su-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.su-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.su-funnel-row { display: grid; grid-template-columns: 190px 1fr 210px; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.su-funnel-row:last-child { border-bottom: none; }
.su-funnel-track { background: #f1f0f6; border-radius: 4px; height: 14px; }
.su-funnel-bar { background: #2a78d6; height: 14px; border-radius: 0 4px 4px 0; }
.su-funnel-value { font-variant-numeric: tabular-nums; font-size: 0.85rem; }
@media (max-width: 700px) { .su-funnel-row { grid-template-columns: 1fr; gap: 4px; } }
.su-stack { display: flex; gap: 2px; height: 18px; border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.su-seg { min-width: 3px; }
.su-cohorts td, .su-cohorts th { padding: 8px 12px; font-size: 0.85rem; }
.su-channels td, .su-channels th { padding: 8px 12px; font-size: 0.85rem; vertical-align: middle; }
.su-ch-bar-col { width: 40%; min-width: 120px; }
@media (max-width: 600px) { .su-ch-bar-col { display: none; } }
.su-ch-track { height: 14px; }
.su-ch-bar { height: 14px; background: #c9c7d6; border-radius: 0 4px 4px 0; overflow: hidden; min-width: 3px; }
.su-ch-bar-unknown { background: #d9dce3; }
.su-ch-on { height: 14px; background: #2a78d6; }
.su-ch-on-split { border-right: 2px solid #fff; }
.su-ch-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.su-ch-chip { font-size: 0.72rem; padding: 1px 6px; border-radius: 8px; background: #eef1f6; color: #3d4451; white-space: nowrap; }
.su-ch-chip-off { color: #5c6370; text-decoration: line-through; background: #f5f5f8; }
/* The signup voice demo switched on: shown, not counted as a channel. */
.su-ch-chip-demo { color: #5c6370; background: transparent; border: 1px dashed #b8bdc7; }
.su-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.su-list td { vertical-align: middle; font-size: 0.85rem; }
.su-account { display: flex; flex-direction: column; gap: 2px; }
.su-account-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; color: #8a8f9c; }
.su-steps { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.su-step { font-size: 0.75rem; padding: 2px 7px; border-radius: 10px; background: #f1f0f6; color: #8a8f9c; white-space: nowrap; }
.su-step-done { background: #e8f0fe; color: #1a56c4; font-weight: 600; }
.su-step-done .su-muted { font-weight: 400; font-size: 0.72rem; }
.su-billing { font-weight: 600; }
.su-billing-paid { background: #e8f0fe; color: #1a56c4; }
.su-billing-trial { background: #e3f6ee; color: #0f7a54; }
.su-billing-unpaid { background: #fdeee6; color: #b4461a; }
.su-billing-lapsed, .su-billing-none { background: #eceef1; color: #495057; }
.su-empty td { text-align: center; color: #8a8f9c; padding: 24px 12px; }
.su-tooltip { position: fixed; z-index: 50; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.12); padding: 8px 10px; font-size: 0.8rem; pointer-events: none; }
.su-tip-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.su-tip-row strong { font-variant-numeric: tabular-nums; }
.su-tip-key { width: 10px; height: 2px; display: inline-block; }
.su-daily-table summary { cursor: pointer; font-size: 0.82rem; color: var(--text-secondary); }
.su-daily-table table { margin-top: 8px; font-size: 0.82rem; }
.su-loading { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; padding: 10px 14px; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); font-size: 0.85rem; color: var(--text); }
.su-spinner { width: 16px; height: 16px; border: 2px solid #d9d4f5; border-top-color: var(--purple); border-radius: 50%; animation: su-spin 0.8s linear infinite; flex: none; }
@keyframes su-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .su-spinner { animation-duration: 2.4s; } }

/* Subscriptions list: how the account met the Claude connector */
.claude-marker { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.claude-marker-badge { font-size: 0.7rem; font-weight: 600; }
.claude-marker-day { font-size: 0.72rem; color: var(--text-secondary); }
.su-plans { font-size: 0.85rem; }
.su-total td { font-weight: 600; border-top: 2px solid #dee2e6; }