@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════
   PayDam - App Styles
   Legacy rules remain above; the refresh overrides live below.
   ═══════════════════════════════════════════════════════════ */

:root {
    --pg-primary:       #4f46e5;
    --pg-primary-dark:  #4338ca;
    --pg-primary-light: #eef2ff;
    --pg-success:       #059669;
    --pg-danger:        #dc2626;
    --pg-warning:       #d97706;
    --pg-surface:       #f8f9fc;
    --pg-border:        #e5e7eb;
    --pg-text:          #111827;
    --pg-muted:         #6b7280;
    --pg-sidebar-bg:    #1e1b4b;
    --pg-sidebar-text:  #c7d2fe;
    --pg-sidebar-hover: rgba(255,255,255,0.08);
    --pg-sidebar-active:#4f46e5;
    --sidebar-width:    240px;
}

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

/* App.razor uses <blazor-focus-on-navigate selector="h1"> so after every
   route change Blazor sets tabindex="-1" on the first h1 and focuses it
   (screen-reader a11y: announces the new page). Chrome paints its
   default focus outline on that programmatic focus, especially on a
   keyboard-initiated reload (Shift+F5 primes :focus-visible heuristics).
   tabindex="-1" means "programmatically focusable, never in the tab
   order" so the outline is never useful there - keyboard users cannot
   Tab onto this element by definition. */
[tabindex="-1"]:focus {
    outline: none;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    color: var(--pg-text);
    background: var(--pg-surface);
    -webkit-font-smoothing: antialiased;
}

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

.sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--pg-sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

main {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.top-row {
    height: 56px;
    background: #fff;
    border-bottom: 1px solid var(--pg-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 50;
}

article.content {
    padding: 2rem 2.5rem;
    width: 100%;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1.25rem 1.25rem 0.75rem;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0;
}

.sidebar-brand-mark {
    width: 32px;
    height: 32px;
    background: var(--pg-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.sidebar-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 0.5rem 1.25rem;
}

.nav-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.68);
    padding: 0.75rem 1.25rem 0.25rem;
}

.nav-item {
    list-style: none;
    margin: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.55rem 1.25rem;
    color: var(--pg-sidebar-text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0;
    transition: background 0.15s, color 0.15s;
}

.nav-link:hover {
    background: var(--pg-sidebar-hover);
    color: #fff;
}

.nav-link.active {
    background: var(--pg-primary);
    color: #fff;
}

.nav-link svg, .nav-link .nav-icon {
    width: 16px;
    height: 16px;
    opacity: 0.75;
}

.sidebar-footer {
    margin-top: auto;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    font-weight: 500;
    border-radius: 8px;
    font-size: 0.875rem;
    padding: 0.5rem 1.1rem;
    transition: all 0.15s;
}

.btn-primary {
    background: var(--pg-primary);
    border-color: var(--pg-primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--pg-primary-dark);
    border-color: var(--pg-primary-dark);
}

.btn-outline-secondary {
    border-color: var(--pg-border);
    color: var(--pg-muted);
}

.btn-outline-secondary:hover {
    background: var(--pg-surface);
    color: var(--pg-text);
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--pg-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    background: #fff;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--pg-border);
    padding: 0.875rem 1.25rem;
    font-size: 0.9rem;
}

.card-body {
    padding: 1.25rem;
}

/* ── Stat cards ───────────────────────────────────────────── */
.stat-card {
    background: #fff;
    border: 1px solid var(--pg-border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pg-muted);
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--pg-text);
    line-height: 1;
}

.stat-value.text-success { color: var(--pg-success) !important; }
.stat-value.text-danger  { color: var(--pg-danger)  !important; }
.stat-value.text-warning { color: var(--pg-warning) !important; }

/* ── Tables ───────────────────────────────────────────────── */
.table {
    font-size: 0.875rem;
}

.table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pg-muted);
    border-bottom: 1px solid var(--pg-border);
    padding: 0.75rem 1rem;
    background: transparent;
}

.table tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    border-color: var(--pg-border);
}

.table-hover tbody tr:hover {
    background: var(--pg-primary-light);
}

/* ── Forms ────────────────────────────────────────────────── */
.form-control, .form-select {
    border-color: var(--pg-border);
    border-radius: 8px;
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus, .form-select:focus {
    border-color: var(--pg-primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
    outline: none;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pg-text);
    margin-bottom: 0.375rem;
}

.form-text {
    font-size: 0.8rem;
    color: var(--pg-muted);
}

/* ── Badges ───────────────────────────────────────────────── */
.badge {
    font-weight: 500;
    font-size: 0.75rem;
    border-radius: 6px;
    padding: 0.3em 0.6em;
}

.badge-status-open       { background: #fef3c7; color: #92400e; }
.badge-status-recovering { background: #dbeafe; color: #1e40af; }
.badge-status-recovered  { background: #d1fae5; color: #065f46; }
.badge-status-lost       { background: #fee2e2; color: #991b1b; }

/* ── Auth pages ───────────────────────────────────────────── */
.auth-box {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--pg-surface);
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.75rem;
}

.brand-mark {
    width: 36px;
    height: 36px;
    background: var(--pg-primary);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: #fff;
}

.brand-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pg-text);
    letter-spacing: 0;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border: 1px solid var(--pg-border);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pg-text);
    margin-bottom: 0.375rem;
    letter-spacing: 0;
}

.auth-subtitle {
    color: var(--pg-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.auth-footer {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.875rem;
    color: var(--pg-muted);
}

.auth-footer a {
    color: var(--pg-primary);
    text-decoration: none;
    font-weight: 500;
}

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
    border-radius: 10px;
    border: none;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
}

.alert-success { background: #d1fae5; color: #065f46; }
.alert-danger  { background: #fee2e2; color: #991b1b; }
.alert-warning { background: #fef3c7; color: #92400e; }
.alert-info    { background: var(--pg-primary-light); color: #3730a3; }

/* ── Quill editor ─────────────────────────────────────────── */
.quill-editor-container {
    min-height: 180px;
    border: 1px solid var(--pg-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #fff;
    font-size: 0.875rem;
}

.ql-toolbar {
    border: 1px solid var(--pg-border) !important;
    border-radius: 8px 8px 0 0 !important;
    background: var(--pg-surface);
}

.ql-container {
    border: none !important;
    font-size: 0.875rem !important;
    font-family: inherit !important;
}

/* ── Page headings ────────────────────────────────────────── */
h1 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--pg-text);
}

h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pg-text);
}

/* ── Landing page ─────────────────────────────────────────── */
.landing-hero {
    text-align: center;
    padding: 5rem 1rem 4rem;
}

.landing-hero h1 {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--pg-text);
    line-height: 1.15;
    max-width: 700px;
    margin: 0 auto 1.25rem;
}

.landing-hero .lead {
    font-size: 1.15rem;
    color: var(--pg-muted);
    max-width: 560px;
    margin: 0 auto 2.5rem;
}

.steps-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

.step-card {
    background: #fff;
    border: 1px solid var(--pg-border);
    border-radius: 14px;
    padding: 1.75rem;
    text-align: center;
}

.step-number {
    width: 40px;
    height: 40px;
    background: var(--pg-primary-light);
    color: var(--pg-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 auto 1rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

.pricing-card {
    background: #fff;
    border: 2px solid var(--pg-border);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
}

.pricing-card.featured {
    border-color: var(--pg-primary);
    position: relative;
}

.pricing-card.featured::before {
    content: 'Most popular';
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pg-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.75rem;
    border-radius: 20px;
    white-space: nowrap;
}

.pricing-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--pg-text);
    letter-spacing: 0;
    line-height: 1;
}

.pricing-period {
    font-size: 0.875rem;
    color: var(--pg-muted);
}

/* ── Connect Stripe page ──────────────────────────────────── */
.connect-box {
    max-width: 520px;
    margin: 3rem auto;
}

/* ── Empty state ──────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--pg-muted);
}

.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

/* ── Blazor error UI ──────────────────────────────────────── */
#blazor-error-ui {
    background: #fef3c7;
    border-top: 1px solid #fbbf24;
    bottom: 0;
    box-shadow: 0 -1px 6px rgba(0,0,0,0.1);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 0.875rem;
    color: #92400e;
}

#blazor-error-ui .dismiss { cursor: pointer; float: right; font-weight: 700; }

/* ── Hamburger button ─────────────────────────────────────── */
.hamburger-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    margin-right: 0.5rem;
}

.hamburger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--pg-muted);
    border-radius: 2px;
    transition: transform 0.2s;
}

/* ── Sidebar overlay (mobile) ─────────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99;
}

.sidebar-overlay.show {
    display: block;
}

/* ── Placeholder chips ────────────────────────────────────── */
.placeholder-chips {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--pg-surface);
    padding: 0.75rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--pg-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.chips-label {
    font-size: 0.8rem;
    color: var(--pg-muted);
    font-weight: 500;
    white-space: nowrap;
}

.placeholder-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    background: var(--pg-primary-light);
    color: var(--pg-primary);
    border: 1px solid #c7d2fe;
    border-radius: 20px;
    font-size: 0.78rem;
    font-family: monospace;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, transform 0.1s;
}

.placeholder-chip:hover {
    background: #e0e7ff;
    transform: translateY(-1px);
}

.placeholder-chip:active {
    transform: translateY(0);
}

.placeholder-chip[draggable="true"] {
    cursor: grab;
}

/* ── HTML toggle button ───────────────────────────────────── */
.html-toggle-btn {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    font-family: monospace;
}

/* ── Schedule Timeline ────────────────────────────────────── */
.schedule-timeline {
    background: #f0f4ff;
    border: 1px solid var(--pg-primary-light);
    border-radius: 8px;
    padding: 1.25rem;
    margin: 1rem 0;
}


.schedule-timeline p {
    color: var(--pg-text);
    font-size: 0.95rem;
}

.timeline-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.timeline-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.timeline-marker {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    flex-shrink: 0;
    position: relative;
}

.timeline-marker.marker-email  { background: #059669; }
.timeline-marker.marker-retry  { background: #d97706; }
.timeline-marker.marker-note   { background: #6366f1; }

.timeline-marker::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2rem;
    background: var(--pg-border);
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.timeline-item:last-child .timeline-marker::after {
    display: none;
}

.timeline-item-upcoming {
    opacity: .6;
}
.timeline-item-upcoming .timeline-marker {
    border: 2px dashed #9ca3af !important;
    background: #fff !important;
    color: #9ca3af !important;
}

.timeline-engagement {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .3rem;
}

.engagement-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
}

.engagement-pill-icon {
    font-size: .75rem;
    line-height: 1;
}

.engagement-pill--opened {
    background: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}

.engagement-pill--clicked {
    background: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe;
}

.timeline-content {
    flex: 1;
    padding-top: 0.25rem;
}

.timeline-time {
    font-size: 0.85rem;
    color: var(--pg-muted);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.timeline-description {
    font-size: 0.95rem;
    color: var(--pg-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timeline-description .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

/* ── Mobile responsive ────────────────────────────────────── */
@media (max-width: 768px) {
    .hamburger-btn {
        display: flex;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 100;
    }

    .sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
    }

    main {
        margin-left: 0 !important;
    }

    article.content {
        padding: 1rem;
    }

    .top-row {
        position: sticky;
        top: 0;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .steps-row, .pricing-grid { grid-template-columns: 1fr; }
    .landing-hero h1 { font-size: 2rem; }
    .stat-amount { font-size: 1.4rem !important; }
}

/* ── Dashboard stat cards ─────────────────────────────────── */
.stat-card {
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--pg-border);
    background: #fff;
    transition: transform .12s, box-shadow .12s;
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 12px 12px 0 0;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.stat-card-active { box-shadow: 0 0 0 2px var(--pg-primary); }

.stat-card-recovered::before { background: #059669; }
.stat-card-recovering::before { background: #d97706; }
.stat-card-open::before { background: #dc2626; }
.stat-card-lost::before { background: #9ca3af; }
.stat-card-paused::before { background: #6366f1; }

.stat-amount {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: .25rem;
}
.stat-card-recovered .stat-amount  { color: #059669; }
.stat-card-recovering .stat-amount { color: #d97706; }
.stat-card-open .stat-amount       { color: #dc2626; }
.stat-card-lost .stat-amount       { color: #6b7280; }
.stat-card-paused .stat-amount     { color: #6366f1; }

.stat-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--pg-muted);
    margin-bottom: .15rem;
}
.stat-count { font-size: .8rem; color: var(--pg-muted); }

/* ── Offcanvas backdrop (Blazor-rendered, not Bootstrap JS) ── */
.offcanvas-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1040;
}
.offcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow-y: auto;
    box-shadow: -4px 0 24px rgba(0,0,0,.15);
}

/* ── Cookie consent banner ── */
.cookie-banner {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: auto;
    z-index: 2000;
    background: #1e293b;
    color: #e2e8f0;
    max-width: min(440px, calc(100vw - 2rem));
    padding: .72rem .8rem .72rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: nowrap;
    font-size: .85rem;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
.cookie-banner-link { color: #93c5fd; }
.cookie-banner-link:hover { color: #bfdbfe; }
.cookie-banner-btn {
    font-size: .8rem;
    white-space: nowrap;
    border-radius: 10px;
    min-height: 34px;
    padding: .42rem .68rem;
}
.cookie-banner-secondary {
    color: #e2edf5;
    background: transparent;
    border: 1px solid rgba(226, 237, 245, .58);
}
.cookie-banner-secondary:hover,
.cookie-banner-secondary:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .84);
}
.cookie-banner-primary {
    color: #0b1422;
    background: #ffffff;
    border: 1px solid #ffffff;
}
.cookie-banner-primary:hover,
.cookie-banner-primary:focus {
    color: #0b1422;
    background: #dff5f2;
    border-color: #dff5f2;
}
.cookie-banner-actions {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
}

@media (max-width: 560px) {
    .cookie-banner {
        right: .75rem;
        bottom: .75rem;
        max-width: calc(100vw - 1.5rem);
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        gap: .6rem;
        padding: .65rem .7rem .65rem .85rem;
    }

    .cookie-banner-actions {
        width: 100%;
        justify-content: stretch;
        margin-left: 0 !important;
    }

    .cookie-banner-btn {
        flex: 1 1 0;
        margin-left: 0 !important;
    }
}

/* ── Auth shell (login / register / forgot-password) ─────────── */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 70% 30%, rgba(19,123,116,.18) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(19,123,116,.10) 0%, transparent 45%),
        #0f1b2c;
    padding: 2rem 1rem;
}

.auth-shell-inner {
    width: 100%;
    max-width: 420px;
}

/* ── Plan shell (choose-plan - wider than auth shell) ─────────── */
.plan-shell {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background:
        radial-gradient(ellipse at 70% 30%, rgba(19,123,116,.18) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(19,123,116,.10) 0%, transparent 45%),
        #0f1b2c;
    padding: 3rem 1.5rem;
}

.plan-shell > * {
    width: 100%;
}

.auth-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
    padding: 2.25rem 2rem 2rem;
}

.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    text-decoration: none;
}

.auth-logo-full {
    width: 110px;
    height: 110px;
    object-fit: contain;
}

.auth-security-card {
    border: 1px solid rgba(155, 202, 197, 0.42);
}

.auth-security-card .auth-logo {
    margin-bottom: .75rem;
}

.auth-security-card .auth-logo-full {
    width: 96px;
    height: 96px;
}

.auth-security-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 1rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dff5f2;
    color: #0f766e;
}

.auth-security-note {
    border: 1px solid #bee7e1;
    border-radius: 8px;
    background: #f0fdfa;
    color: #31524f;
    font-size: .82rem;
    line-height: 1.5;
    padding: .8rem .9rem;
}

.auth-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1rem;
    margin-top: 1.25rem;
    font-size: .75rem;
    color: rgba(255,255,255,.78);
}

.auth-trust-strip--security {
    color: rgba(255, 255, 255, .84);
}

/* Each line of trust copy is its own flex item; on narrow viewports a long
   item wraps internally to a second line. `justify-content: center` only
   places the flex items on the cross-axis - it doesn't centre the wrapped
   text inside them, so a 2-line item read as left-aligned while a short
   1-line item next to it sat centred (e.g. "portal links" on the second
   line of the long item, then "Disconnect any time" centred on the next
   row). `text-align: center` makes the wrap inside each span centre too,
   so all four visible lines line up on the page centerline. */
.auth-trust-strip span {
    text-align: center;
}

.auth-trust-strip span::before {
    content: "\1F512\00a0";
    font-size: .65rem;
}

/* -----------------------------------------------------------------
   2026 app refresh overrides
   ----------------------------------------------------------------- */

/* ── Theming tokens ──────────────────────────────────────────
   Single source of truth for both light and dark. Anything that
   needs to flip between themes reads from one of these vars; new
   rules should NOT hard-code `#fff`, `#152033`, etc. Toggle is
   driven by `<html data-theme="dark|light">` set FOUC-safely from
   an inline script in Components/App.razor. */
:root {
    /* Brand */
    --pg-primary: #137b74;
    --pg-primary-dark: #0f5f5a;
    --pg-primary-light: #dff5f2;

    /* Status semantics - match the marketing landing dashboard so
       the in-product look is consistent with what users saw before
       they signed up: green = recovered, amber = in flight,
       blue = open/active, red = lost.

       (Previously: open=red, lost=grey. Updated 2026-04-25 to land
       on the more standard "blue=informational, red=critical-final"
       semantics shown in the marketing hero.) */
    --pg-success: #1f8f63;
    --pg-danger: #c84b31;
    --pg-warning: #bf7c23;
    --pg-info: #2563eb;

    /* Surfaces */
    --pg-surface: #f6f3ec;          /* page bg base */
    --pg-panel: #ffffff;             /* solid card / panel bg */
    --pg-panel-muted: #fbfaf7;      /* table header, secondary surface */
    --pg-panel-translucent: rgba(255, 255, 255, 0.88); /* glassy workspace panel */
    --pg-elev-soft: rgba(255, 255, 255, 0.7);          /* pill bg in top row */
    --pg-border: #d7e0e6;
    --pg-border-strong: #c2ccd6;
    --pg-border-subtle: rgba(194, 204, 214, 0.5);

    /* Text */
    --pg-text: #152033;
    --pg-text-strong: #0b1422;
    --pg-muted: #667489;
    --pg-muted-strong: #4f5d70;

    /* Status accents - keep in sync with the .stat-card-* rules
       below. Light mode uses richer/darker hues that read on a
       cream surface; dark mode swaps to the brighter neon variants
       that pop against the deep-teal background. */
    --accent-recovered: #1f8f63;
    --accent-recovering: #bf7c23;
    --accent-open:       #2563eb;
    --accent-lost:       #c84b31;
    --accent-paused:     #6366f1;

    /* Shadows - kept as full rgba so the dark theme can soften
       them to near-zero rather than redefine every box-shadow. */
    --pg-shadow-card: 0 18px 36px rgba(15, 27, 44, 0.06);
    --pg-shadow-card-hover: 0 22px 44px rgba(15, 27, 44, 0.1);
    --pg-shadow-banner: 0 16px 34px rgba(31, 143, 99, 0.08);

    /* Sidebar (already dark in light theme - small tweaks for dark) */
    --pg-sidebar-bg: #0f1b2c;
    --pg-sidebar-text: #dde6f0;
    --pg-sidebar-hover: rgba(255,255,255,0.06);
    --pg-sidebar-active: #1d3148;

    /* Top row */
    --pg-topbar-bg: rgba(246, 243, 236, 0.88);
    --pg-topbar-border: rgba(194, 204, 214, 0.72);

    /* Recovery banner (success-tinted info) */
    --pg-banner-bg: linear-gradient(135deg, rgba(223, 245, 242, 0.92), rgba(240, 253, 244, 0.96));
    --pg-banner-border: rgba(31, 143, 99, 0.18);

    --sidebar-width: 292px;
}

/* ── Dark theme ──────────────────────────────────────────────
   Background mirrors the marketing landing dashboard's deep-teal
   gradient. Panels become glassy dark surfaces with a subtle inner
   border; status accents brighten so they read as "neon" rather
   than "muted" against the dark background.

   Variables are SCOPED to `.page` (the authenticated workspace
   wrapper in MainLayout) so the marketing landing, the public
   legal pages, and the unauthenticated sign-in prompt are NEVER
   touched by dark mode - they all use hardcoded colours and the
   landing.css palette, and bleeding the dark variables through
   makes those headings unreadable on the wrong background. The
   landing has no `.page` wrapper, so the cascade stops cleanly
   at the workspace boundary. (Reported 2026-04-25: dark variables
   leaking into landing's `.pg-section-h2` made the "Everything
   you need. Nothing you don't." heading invisible.) */
[data-theme="dark"] .page {
    /* Brand stays the same hue; light variants become a translucent
       teal that reads on the dark background. */
    --pg-primary-light: rgba(19, 123, 116, 0.18);

    /* Surfaces */
    --pg-surface: #07181a;
    --pg-panel: #0e2521;
    --pg-panel-muted: #122a26;
    --pg-panel-translucent: rgba(14, 37, 33, 0.72);
    --pg-elev-soft: rgba(255, 255, 255, 0.04);
    --pg-border: rgba(255, 255, 255, 0.08);
    --pg-border-strong: rgba(255, 255, 255, 0.12);
    --pg-border-subtle: rgba(255, 255, 255, 0.05);

    /* Text */
    --pg-text: #e6f1ee;
    --pg-text-strong: #ffffff;
    --pg-muted: #93a8a3;
    --pg-muted-strong: #b8c8c4;

    /* Status accents - neon-bright variants for dark surfaces */
    --accent-recovered:  #34d399;
    --accent-recovering: #fbbf24;
    --accent-open:       #60a5fa;
    --accent-lost:       #f87171;
    --accent-paused:     #a78bfa;

    /* Status text (slightly desaturated so it doesn't fluoresce on white amounts) */
    --pg-success: var(--accent-recovered);
    --pg-warning: var(--accent-recovering);
    --pg-info:    var(--accent-open);
    --pg-danger:  var(--accent-lost);

    /* Shadows fade to dark glow */
    --pg-shadow-card: 0 18px 36px rgba(0, 0, 0, 0.35);
    --pg-shadow-card-hover: 0 22px 44px rgba(0, 0, 0, 0.45);
    --pg-shadow-banner: 0 16px 34px rgba(52, 211, 153, 0.12);

    /* Top row glassy dark */
    --pg-topbar-bg: rgba(7, 24, 26, 0.78);
    --pg-topbar-border: rgba(255, 255, 255, 0.06);

    /* Recovery banner - subtle green glow on dark base */
    --pg-banner-bg: linear-gradient(135deg, rgba(31, 143, 99, 0.14), rgba(52, 211, 153, 0.08));
    --pg-banner-border: rgba(52, 211, 153, 0.22);

    /* Paint the workspace wrapper itself with the dark gradient.
       Body stays on the light cream so non-authenticated routes
       are untouched even when data-theme is set on <html>. */
    background:
        radial-gradient(ellipse 90% 50% at top, rgba(19, 123, 116, 0.35), transparent 60%),
        radial-gradient(ellipse 70% 50% at bottom right, rgba(52, 211, 153, 0.12), transparent 55%),
        var(--pg-surface);
    color: var(--pg-text);
}

html,
body {
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    color: var(--pg-text);
    background:
        radial-gradient(circle at top right, rgba(19, 123, 116, 0.08), transparent 28%),
        radial-gradient(circle at left center, rgba(15, 27, 44, 0.06), transparent 24%),
        var(--pg-surface);
}

/* Body bg stays on the cream gradient unconditionally - landing
   pages share the body so dark cannot leak there. The dark
   gradient is painted by `[data-theme="dark"] .page { ... }`
   above, which only matches the authenticated workspace wrapper. */

body {
    line-height: 1.55;
}

/* Workspace body copy uses compact SaaS typography; give prose a little
   more word air so small dark-mode helper text does not visually run
   together. Keep controls and data-dense surfaces at normal spacing. */
.page article.content :where(p, li, dd, .form-text, .alert, .page-intro-subtitle, .email-studio-card-desc, .email-studio-card-foot, .automation-card-desc, .docs-card-body, .settings-gate-panel) {
    word-spacing: .035em;
}

.page article.content :where(button, .btn, .badge, input, select, textarea, table, code, .font-monospace) {
    word-spacing: normal;
}

a {
    color: var(--pg-primary-dark);
}

code,
.font-monospace,
.ql-snow .ql-picker.ql-font .ql-picker-label,
.ql-snow .ql-picker.ql-font .ql-picker-item {
    font-family: 'IBM Plex Mono', Consolas, monospace !important;
}

.page {
    position: relative;
    display: block;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    padding: 1.3rem 1rem 1rem;
    background:
        radial-gradient(circle at top left, rgba(102, 166, 255, 0.12), transparent 26%),
        linear-gradient(180deg, #112134 0%, #18293f 45%, #0d1827 100%);
    border-right: 1px solid rgba(255,255,255,0.05);
    box-shadow: 18px 0 40px rgba(11, 19, 31, 0.18);
}

main.app-main {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main:not(.app-main) {
    margin-left: 0;
    width: auto;
    min-height: 100vh;
    display: block;
}

/* Workspace footer (post-login, MainLayout). Kept compact so it
   reads as a legal/contact strip, not navigation. Sits at the
   bottom of `.app-main` (which is flex-column min-height: 100vh)
   so on short pages it stays anchored to the viewport bottom and
   on long pages it follows the content. */
.app-footer {
    margin-top: auto;
    padding: 1.25rem 1.75rem 1.5rem;
    border-top: 1px solid var(--pg-border-subtle);
    color: var(--pg-muted);
    font-size: 0.78rem;
    background: transparent;
}
.app-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.app-footer-copy {
    color: var(--pg-muted);
}
.app-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.1rem;
}
.app-footer-links a {
    color: var(--pg-muted);
    text-decoration: none;
    transition: color .15s;
}
.app-footer-links a:hover {
    color: var(--pg-primary);
    text-decoration: underline;
}
[data-theme="dark"] .app-footer {
    border-top-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .app-footer,
[data-theme="dark"] .app-footer-copy,
[data-theme="dark"] .app-footer-links a {
    color: rgba(184, 200, 196, 0.78);
}
[data-theme="dark"] .app-footer-links a:hover {
    color: #34d399;
}
@media (max-width: 640px) {
    .app-footer-inner { justify-content: center; text-align: center; }
}

.top-row {
    height: 72px;
    padding: 0 1.5rem 0 1.25rem;
    background: var(--pg-topbar-bg);
    border-bottom: 1px solid var(--pg-topbar-border);
    backdrop-filter: blur(14px);
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-row-left {
    display: flex;
    align-items: center;
    gap: 0.95rem;
}

.top-row-copy {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.top-row-title {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--pg-text);
}

.top-row-right {
    display: flex;
    align-items: center;
}

.top-row-account-menu {
    position: relative;
}

.top-row-account {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    max-width: min(100%, 560px);
    padding: 0.65rem 0.95rem;
    border: 1px solid var(--pg-border-strong);
    border-radius: 999px;
    background: var(--pg-elev-soft);
    color: var(--pg-text);
    text-decoration: none;
    box-shadow: var(--pg-shadow-card);
    cursor: pointer;
    font-family: inherit;
    transition: background 140ms ease, border-color 140ms ease;
}

.top-row-account:hover,
.top-row-account[aria-expanded="true"] {
    background: var(--pg-panel);
    border-color: rgba(23, 109, 103, 0.38);
}

[data-theme="dark"] .top-row-account:hover,
[data-theme="dark"] .top-row-account[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(52, 211, 153, 0.4);
}

.top-row-account-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
    font-weight: 600;
}

.top-row-account-chevron {
    flex-shrink: 0;
    color: #516176;
    transition: transform 140ms ease;
}

.top-row-account[aria-expanded="true"] .top-row-account-chevron {
    transform: rotate(180deg);
}

.top-row-account-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 200px;
    padding: 0.4rem;
    border-radius: 14px;
    border: 1px solid var(--pg-border-strong);
    background: var(--pg-panel);
    box-shadow: var(--pg-shadow-card-hover);
    display: none;
    z-index: 1000;
}

.top-row-account-dropdown.show {
    display: block;
    animation: account-dropdown-in 140ms ease;
}

@keyframes account-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.top-row-account-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--pg-text);
    text-align: left;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.top-row-account-item:hover {
    background: rgba(239, 248, 246, 0.96);
    color: var(--pg-primary-dark);
}

.top-row-account-item svg {
    flex-shrink: 0;
    color: #516176;
}

.top-row-account-item:hover svg {
    color: var(--pg-primary-dark);
}

.top-row-account-divider {
    height: 1px;
    background: var(--pg-border);
    margin: 0.5rem 0;
}

[data-theme="dark"] .top-row-account-item:hover {
    background: rgba(52, 211, 153, 0.08);
    color: var(--pg-text-strong);
}

[data-theme="dark"] .top-row-account-item:hover svg {
    color: var(--accent-recovered);
}

/* ── Theme toggle button ─────────────────────────────────────
   Sits left of the account-menu pill in MainLayout.razor's top
   row. Sun icon when dark mode is active (click → go light);
   moon icon when light mode is active (click → go dark). The
   inline script in App.razor flips data-theme on <html>; CSS
   here drives which icon is visible via attribute selectors. */
.top-row-theme-toggle {
    width: 40px;
    height: 40px;
    margin-right: 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--pg-border-strong);
    background: var(--pg-elev-soft);
    color: var(--pg-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--pg-shadow-card);
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.top-row-theme-toggle:hover {
    background: var(--pg-panel);
    border-color: rgba(23, 109, 103, 0.38);
    transform: rotate(-15deg);
}

[data-theme="dark"] .top-row-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(52, 211, 153, 0.4);
    transform: rotate(15deg);
}

.top-row-theme-toggle .icon-sun  { display: none; }
.top-row-theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .top-row-theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .top-row-theme-toggle .icon-moon { display: none; }

.top-row-account-signout-form {
    margin: 0;
}

.top-row-account-signout {
    color: #b91c1c;
}

.top-row-account-signout svg {
    color: #b91c1c;
}

.top-row-account-signout:hover {
    background: rgba(254, 226, 226, 0.6);
    color: #991b1b;
}

.top-row-account-signout:hover svg {
    color: #991b1b;
}

/* ── /privacy and /terms legal-page wrapper ─────────────────── */
html:has(.legal-page),
body:has(.legal-page) {
    background: #f8fafc !important;
    background-image: none !important;
}

.legal-page {
    max-width: 820px;
    margin: 2.5rem auto;
    padding: 2.5rem 2.5rem 3rem;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(194, 204, 214, 0.55);
    box-shadow: 0 4px 18px rgba(15, 27, 44, 0.05);
    color: var(--pg-text);
}

.legal-page h1,
.legal-page h2,
.legal-page h3 {
    color: var(--pg-text);
}

.legal-page a {
    color: var(--pg-primary);
}

.legal-page-back {
    color: var(--pg-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.legal-page-back:hover {
    text-decoration: underline;
}

@media (max-width: 680px) {
    .legal-page {
        margin: 1rem auto;
        padding: 1.75rem 1.25rem;
        border-radius: 12px;
    }
}

/* ── /docs page-specific layout helpers ─────────────────────── */
/* Reuses .legal-page wrapper for visual consistency; these classes
   only apply inside the docs pages (DocsIndex, DocsGettingStarted, …)
   and are scoped to the helpers each doc actually uses. */

.page .legal-page {
    max-width: 960px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 2rem 0 1rem;
}

.docs-index-page {
    max-width: 980px;
}

.docs-index-heading {
    margin: 2rem 0 .65rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pg-muted, #5b6475);
}

.docs-card {
    display: block;
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(194, 204, 214, 0.55);
    border-radius: 8px;
    background: #fff;
    color: var(--pg-text);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.docs-card:hover {
    border-color: var(--pg-primary);
    box-shadow: 0 6px 16px rgba(15, 27, 44, 0.08);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--pg-text);
}

.docs-card-title {
    font-weight: 600;
    color: var(--pg-primary);
    margin-bottom: .35rem;
}

.docs-card-body {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--pg-muted, #5b6475);
}

.docs-guide-figure {
    margin: 1.35rem 0 1.75rem;
}

.docs-guide-img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(194, 204, 214, 0.72);
    border-radius: 10px;
    background: #f8fafc;
    box-shadow: 0 14px 34px rgba(15, 27, 44, 0.10);
}

.docs-guide-figure figcaption {
    margin-top: .55rem;
    color: var(--pg-muted, #5b6475);
    font-size: .88rem;
    line-height: 1.5;
}

.docs-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .85rem;
    margin: 1rem 0 1.25rem;
}

.docs-mini-card {
    border: 1px solid rgba(194, 204, 214, 0.55);
    border-radius: 8px;
    background: #fff;
    padding: .9rem 1rem;
}

.docs-mini-card h3 {
    margin: 0 0 .35rem;
    font-size: .98rem;
    font-weight: 650;
}

.docs-mini-card p {
    margin: 0;
    color: var(--pg-muted, #5b6475);
    font-size: .9rem;
    line-height: 1.5;
}

.docs-tight-list li {
    margin-bottom: .4rem;
    line-height: 1.5;
}

.docs-support-panel {
    margin-top: 2rem;
}

.docs-support-panel h2 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.docs-support-panel p {
    margin: 0;
    color: var(--pg-muted);
}

.docs-steps {
    padding-left: 1.25rem;
    margin: .75rem 0 1rem;
}

.docs-steps li {
    margin-bottom: .5rem;
    line-height: 1.55;
}

.docs-checklist {
    padding-left: 1.25rem;
    margin: .5rem 0 1rem;
}

.docs-checklist li {
    margin-bottom: .35rem;
    line-height: 1.5;
}

/* Tip / callout boxes - light, unobtrusive, not alarmist. */
.docs-tip {
    background: #f4f6fb;
    border-left: 3px solid var(--pg-primary);
    padding: .75rem 1rem;
    border-radius: 6px;
    font-size: .92rem;
    line-height: 1.55;
    margin: 1rem 0;
}

/* "Where in Stripe" line in the setup checklist - meta info, slightly muted. */
.docs-where {
    color: var(--pg-muted, #5b6475);
    font-size: .9rem;
    margin: .25rem 0 .75rem;
}

/* Plan-comparison table on /docs/billing-and-fees */
.docs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: .92rem;
}

.docs-table thead th {
    text-align: left;
    padding: .6rem .8rem;
    background: #f4f6fb;
    border-bottom: 1px solid rgba(194, 204, 214, 0.55);
    font-weight: 600;
}

.docs-table tbody td {
    padding: .55rem .8rem;
    border-bottom: 1px solid rgba(194, 204, 214, 0.4);
}

.docs-table tbody tr:last-child td {
    border-bottom: none;
}

/* Trailing "need help" line at the bottom of each doc page. */
.docs-help {
    color: var(--pg-muted, #5b6475);
    font-size: .92rem;
}

article.content {
    padding: 1.5rem 1.75rem 3rem;
    width: 100%;
}

.page-shell {
    width: min(100%, 1180px);
    margin: 0 auto;
}

.public-shell {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* Sidebar brand area - replaced 2026-04-30 with the full wordmark
   (logo_trans.png). Earlier design layered a 44px favicon mark with
   "PayDam" + "Recovery workspace" copy AND a pulsing-dot "Stripe
   subscriptions" status pill below it; user feedback called the pill
   overkill (the dashboard already has a Live indicator) and the
   three-text-element block visually busy. The wordmark alone reads
   cleaner and matches what every other surface (login, register,
   landing nav, footer) already uses. */
.sidebar-brand {
    display: flex;
    align-items: center;
    /* Padding aligns brand-row baseline with nav-link icon left edge.
       The nav-link icons sit at `.25rem + .95rem = 1.2rem` from the
       sidebar edge (Bootstrap `px-1` ul gutter + `.nav-link` padding).
       Matching `padding-left: 1.2rem` here puts the wordmark on the
       same vertical axis as the icons below it. */
    padding: 1.4rem 1.2rem 1rem;
    color: #fff;
    text-decoration: none;
}

.sidebar-brand-logo {
    display: block;
    /* Iteration history (2026-04-30):
         v1: `width:100%; max-width:168px` → ~104px tall, dominated sidebar
         v2: `height:30px` → too small, "humongous and unevenly placed"
         v3: `height:42px` → matches landing nav's 44px, balanced. */
    height: 42px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    /* `logo_trans.png` is dark-toned (drawn for the white landing nav).
       The sidebar uses a dark navy/teal fill in both themes, so the
       asset would render near-invisible without an inversion. Same
       `brightness(0) invert(1)` treatment as `landing.css:65
       .pg-land-logo-img--footer` for the dark public footer. */
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

.sidebar-divider {
    margin: 0 0.25rem 1rem;
    background: rgba(255,255,255,0.08);
}

.nav-section-label {
    /* `padding-left: 1.2rem` aligns this section eyebrow with the
       nav-link icon left edge (sidebar `px-1` gutter + .nav-link
       padding-x). Earlier 0.8rem put the WORKSPACE label visibly
       inset from the icons below - looked misaligned. */
    padding: 0.5rem 1.2rem 0.5rem;
    color: rgba(145, 163, 186, 0.76);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
}

.sidebar-scope {
    padding: 0 1rem 0.55rem;
}

.sidebar-scope .dropdown {
    position: relative;
}

.sidebar-scope-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 0.48rem 2rem 0.48rem 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: rgba(15, 31, 48, 0.62);
    color: rgba(248, 250, 252, 0.94);
    text-align: left;
    box-shadow: none;
}

.sidebar-scope-button:hover,
.sidebar-scope-button:focus-visible,
.sidebar-scope-button.show {
    border-color: rgba(94, 234, 212, 0.42);
    background: rgba(20, 184, 166, 0.12);
}

.sidebar-scope-button:focus-visible {
    outline: 2px solid rgba(94, 234, 212, 0.42);
    outline-offset: 2px;
}

.sidebar-scope-button::after {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    margin-top: -0.1rem;
    opacity: 0.82;
}

.sidebar-scope-copy {
    min-width: 0;
}

.sidebar-scope-current,
.sidebar-scope-count,
.sidebar-scope-option-main,
.sidebar-scope-option-sub {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-scope-current {
    max-width: 150px;
    font-size: 0.78rem;
    font-weight: 700;
}

.sidebar-scope-count {
    max-width: 150px;
    margin-top: 0.02rem;
    color: rgba(203, 213, 225, 0.62);
    font-size: 0.66rem;
}

.sidebar-scope-menu {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0.3rem;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 10px;
    background: #0d2033;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
}

.sidebar-scope-menu.show {
    position: static !important;
    transform: none !important;
    margin-top: 0.35rem;
}

.sidebar-scope-menu .dropdown-divider {
    border-top-color: rgba(148, 163, 184, 0.18);
    margin: 0.25rem 0;
}

.sidebar-scope-option {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.58rem 0.55rem;
    border-radius: 7px;
    color: rgba(241, 245, 249, 0.94);
    white-space: normal;
}

.sidebar-scope-option:hover,
.sidebar-scope-option:focus {
    background: rgba(20, 184, 166, 0.12);
    color: rgba(255, 255, 255, 0.96);
}

.sidebar-scope-option-main {
    color: rgba(248, 250, 252, 0.94);
    font-size: 0.78rem;
    font-weight: 700;
}

.sidebar-scope-option-sub {
    margin-top: 0.08rem;
    color: rgba(203, 213, 225, 0.66);
    font-size: 0.66rem;
}

.sidebar-scope-primary {
    display: inline-flex;
    margin-top: 0.24rem;
    padding: 0.08rem 0.32rem;
    border-radius: 999px;
    background: rgba(45, 212, 191, 0.13);
    color: #99f6e4;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.nav-link {
    gap: 0.8rem;
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    color: var(--pg-sidebar-text);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0;
}

.nav-link svg {
    opacity: 0.85;
}

.nav-link:hover {
    background: var(--pg-sidebar-hover);
}

.nav-link.active {
    background: linear-gradient(135deg, rgba(19, 123, 116, 0.34), rgba(32, 57, 82, 0.96));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 12px 22px rgba(11, 19, 31, 0.18);
}

.sidebar-footer {
    margin-top: auto;
    padding: 1rem 0.3rem 0.1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Secondary, single-row affordance below the main nav (e.g. "Leave a
   review"). Lives inside .sidebar-nav so it sits above TrialCountdown. */
.sidebar-subnav {
    margin-top: 1rem;
    padding: 0 0.7rem;
}

.sidebar-subnav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.72rem;
    border: 1px dashed rgba(221, 230, 240, 0.22);
    border-radius: 12px;
    color: rgba(221, 230, 240, 0.78);
    font-size: 0.78rem;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.sidebar-subnav-link:hover {
    border-color: rgba(221, 230, 240, 0.45);
    color: #fff;
    background: rgba(221, 230, 240, 0.06);
}

.sidebar-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
    justify-content: center;
    margin-bottom: 0.8rem;
}

.sidebar-footer-links a {
    color: rgba(221, 230, 240, 0.56);
    font-size: 0.78rem;
    text-decoration: none;
}

.sidebar-footer-links a:hover {
    color: #fff;
}

.sidebar-signout {
    width: 100%;
    padding: 0.82rem 0.95rem;
    border: 1px solid rgba(221, 230, 240, 0.18);
    border-radius: 16px;
    background: transparent;
    color: rgba(255,255,255,0.82);
    font-size: 0.88rem;
    font-weight: 600;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.sidebar-signout:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(221, 230, 240, 0.28);
}

/* ── Trial countdown banner ───────────────────────────────── */
.sidebar-trial-banner {
    padding: 0 0.75rem 0.75rem;
}

.sidebar-trial-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--pg-sidebar-text);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    transition: background 0.15s, border-color 0.15s;
}

.sidebar-trial-link:hover {
    background: rgba(255,255,255,0.11);
    color: #fff;
}

.sidebar-trial-link svg {
    flex-shrink: 0;
    opacity: 0.75;
}

.sidebar-trial-cta {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.65;
    white-space: nowrap;
}

/* Review-bonus discoverability hint shown under the trial banner */
.sidebar-trial-bonus {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.76);
    background: transparent;
    transition: color 0.15s, background 0.15s;
}
.sidebar-trial-bonus:hover {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.85);
}
.sidebar-trial-bonus svg {
    flex-shrink: 0;
    opacity: 0.6;
}

/* Urgent: 1–3 days left */
.sidebar-trial--urgent {
    background: rgba(251,191,36,0.1);
    border-color: rgba(251,191,36,0.28);
    color: #fcd34d;
}
.sidebar-trial--urgent:hover {
    background: rgba(251,191,36,0.16);
    color: #fde68a;
}

/* Expired */
.sidebar-trial--expired {
    background: rgba(248,113,113,0.1);
    border-color: rgba(248,113,113,0.28);
    color: #fca5a5;
}
.sidebar-trial--expired:hover {
    background: rgba(248,113,113,0.18);
    color: #fecaca;
}

.card,
.table-responsive,
.auth-card {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(194, 204, 214, 0.86);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(15, 27, 44, 0.07);
}

.card-header {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(194, 204, 214, 0.72);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pg-muted);
}

.card-body {
    padding: 1.35rem;
}

.btn {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 0.62rem 1.12rem;
}

.btn-sm {
    padding: 0.5rem 0.95rem;
}

.btn-primary {
    background: linear-gradient(135deg, #16958c 0%, #137b74 100%);
    border-color: #137b74;
    box-shadow: 0 14px 28px rgba(19, 123, 116, 0.16);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #137b74 0%, #0f5f5a 100%);
    border-color: #0f5f5a;
}

.btn-outline-secondary,
.btn-outline-primary {
    background: rgba(255,255,255,0.72);
    border-color: rgba(194, 204, 214, 0.9);
    color: var(--pg-text);
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    background: #fff;
    color: var(--pg-text);
    border-color: var(--pg-border-strong);
}

.form-control,
.form-select {
    min-height: 46px;
    border: 1px solid rgba(194, 204, 214, 0.94);
    border-radius: 16px;
    background: rgba(255,255,255,0.92);
    color: var(--pg-text);
    padding: 0.72rem 0.92rem;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(19, 123, 116, 0.55);
    box-shadow: 0 0 0 4px rgba(19, 123, 116, 0.12);
}

.form-label {
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #435063;
}

.form-text,
.text-muted,
.small.text-muted {
    color: var(--pg-muted) !important;
}

.badge {
    border-radius: 999px;
    padding: 0.42em 0.74em;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.alert {
    border-radius: 18px;
    border: 1px solid transparent;
    padding: 0.95rem 1.05rem;
}

.alert-success {
    background: #e9f8f0;
    color: #1f6c4d;
    border-color: #c9ead8;
}

.alert-warning {
    background: #fff7e7;
    color: #8c621b;
    border-color: #efd7a1;
}

.alert-danger {
    background: #fff0eb;
    color: #9d3e2b;
    border-color: #efc0b7;
}

.alert-info {
    background: #edf7f6;
    color: #195b58;
    border-color: #cfe8e5;
}

h1 {
    margin-bottom: 0.35rem;
    font-size: clamp(1.9rem, 2.4vw, 2.45rem);
    font-weight: 800;
    letter-spacing: 0;
    color: var(--pg-text);
}

h2,
h3,
h4,
h5,
h6 {
    color: var(--pg-text);
    letter-spacing: 0;
}

.table-responsive {
    overflow: hidden;
}

.table {
    margin-bottom: 0;
    background: transparent;
}

.table thead th,
.table thead.table-light th {
    padding: 1rem;
    background: var(--pg-panel-muted);
    border-bottom: 1px solid var(--pg-border-strong);
    color: var(--pg-muted-strong);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.table tbody td {
    padding: 1rem;
    border-color: var(--pg-border-subtle);
    color: var(--pg-text);
}

.table-hover tbody tr:hover {
    background: rgba(223, 245, 242, 0.42);
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background: rgba(52, 211, 153, 0.06);
}

/* ── Stat cards ──────────────────────────────────────────────
   Match the marketing landing dashboard's stacked layout:
     LABEL (small caps, muted)
     $AMOUNT (big, prominent - colored in light mode, white in dark)
     subtitle count
   The status-coloured stripe runs the full width of the card top
   (was a 72-px chip in the prior design) so it reads as a cohesive
   row of cards rather than four disconnected tiles.

   Markup order in Home.razor was reshuffled to label → amount → count
   to match this layout - `flex-direction: column` and natural source
   order do the rest. */
.stat-card {
    appearance: none;
    width: 100%;
    padding: 1.65rem 1.5rem 1.4rem;
    border-radius: 18px;
    border: 1px solid var(--pg-border-strong);
    background: var(--pg-panel);
    color: inherit;
    box-shadow: var(--pg-shadow-card);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    position: relative;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.stat-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--pg-shadow-card-hover);
}

.stat-card:focus-visible {
    outline: 3px solid rgba(45, 212, 191, 0.72);
    outline-offset: 3px;
}

.stat-card::before {
    /* Full-width top stripe - overrides the 4px-tall positioned-absolute
       block from the legacy stat-card rule earlier in this file. */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 3px;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 0 0 transparent;
}

/* Per-status accent on the top stripe. Reads from the --accent-*
   tokens so dark mode automatically swaps in the neon variants. */
.stat-card-recovered::before  { background: var(--accent-recovered); }
.stat-card-recovering::before { background: var(--accent-recovering); }
.stat-card-open::before       { background: var(--accent-open); }
.stat-card-lost::before       { background: var(--accent-lost); }
.stat-card-paused::before     { background: var(--accent-paused); }

/* Status-coloured amounts (light mode reads as the brand colour
   for the row; dark mode overrides to white below for landing
   aesthetic - accent stays on the top stripe only). */
.stat-card-recovered .stat-amount  { color: var(--accent-recovered); }
.stat-card-recovering .stat-amount { color: var(--accent-recovering); }
.stat-card-open .stat-amount       { color: var(--accent-open); }
.stat-card-lost .stat-amount       { color: var(--accent-lost); }
.stat-card-paused .stat-amount     { color: var(--accent-paused); }

.stat-card-active {
    box-shadow: 0 0 0 2px rgba(19, 123, 116, 0.22), var(--pg-shadow-card-hover);
    border-color: rgba(19, 123, 116, 0.42);
}

.stat-amount {
    margin: 0;
    font-size: clamp(1.8rem, 2vw, 2.3rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.05;
}

.stat-label {
    color: var(--pg-muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.stat-count {
    color: var(--pg-muted);
    font-size: 0.85rem;
}

/* Dark-mode-specific stat-card adjustments: glassy dark surface,
   neon top stripe with a subtle bloom, white amount text (the
   colour cue is the top stripe; the amount is the headline). */
[data-theme="dark"] .stat-card {
    background: rgba(14, 37, 33, 0.7);
    backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .stat-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .stat-card::before {
    height: 2px;
    box-shadow: 0 0 22px var(--neon-glow, currentColor);
}

[data-theme="dark"] .stat-card-recovered::before  { box-shadow: 0 0 18px rgba(52, 211, 153, 0.6); }
[data-theme="dark"] .stat-card-recovering::before { box-shadow: 0 0 18px rgba(251, 191, 36, 0.55); }
[data-theme="dark"] .stat-card-open::before       { box-shadow: 0 0 18px rgba(96, 165, 250, 0.55); }
[data-theme="dark"] .stat-card-lost::before       { box-shadow: 0 0 18px rgba(248, 113, 113, 0.5); }

[data-theme="dark"] .stat-card .stat-amount {
    color: var(--pg-text-strong);
}

[data-theme="dark"] .stat-card-active {
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.55), 0 22px 44px rgba(0, 0, 0, 0.5);
    border-color: rgba(52, 211, 153, 0.4);
}

.quill-editor-container {
    min-height: 220px;
    border: 1px solid rgba(194, 204, 214, 0.82);
    border-top: none;
    border-radius: 0 0 18px 18px;
    background: rgba(255,255,255,0.94);
}

.ql-toolbar {
    border: 1px solid rgba(194, 204, 214, 0.82) !important;
    border-radius: 18px 18px 0 0 !important;
    background: #fbfaf7;
    padding: 0.9rem 0.95rem !important;
}

.ql-container {
    border: none !important;
}

.ql-editor {
    min-height: 180px;
    font-size: 0.96rem;
    line-height: 1.72;
    color: #233042;
}

.placeholder-chips {
    position: sticky;
    top: 72px;
    z-index: 12;
    margin: 1rem 0 1.25rem;
    padding: 0.9rem 0 1rem;
    border-bottom: 1px solid rgba(194, 204, 214, 0.72);
    background: rgba(246, 243, 236, 0.94);
    backdrop-filter: blur(12px);
}

.chips-label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pg-muted);
}

.placeholder-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(194, 204, 214, 0.9);
    background: rgba(255,255,255,0.82);
    color: #274053;
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(15, 27, 44, 0.05);
    cursor: pointer;
    appearance: none;
}

.placeholder-chip:hover {
    background: #fff;
    transform: translateY(-1px);
}

.placeholder-chip code {
    margin-left: 0.2rem;
    padding: 0.18rem 0.36rem;
    border-radius: 999px;
    background: rgba(15, 27, 44, 0.06);
    color: #4b6074;
    font-size: 0.68rem;
    font-weight: 700;
}

.template-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.template-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.editor-warning-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 0.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(191, 124, 35, 0.24);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(255, 247, 237, 0.92));
    box-shadow: 0 14px 32px rgba(15, 27, 44, 0.05);
}

.template-guidance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin: 1rem 0 1.1rem;
}

.template-guidance-card {
    padding: 1rem 1.1rem;
    border: 1px solid rgba(194, 204, 214, 0.82);
    border-radius: 18px;
    background: rgba(255,255,255,0.8);
}

.template-guidance-card strong {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.94rem;
}

.template-card {
    margin-bottom: 1.25rem;
    border: 1px solid rgba(194, 204, 214, 0.82);
    border-radius: 24px;
    background: rgba(255,255,255,0.88);
    box-shadow: 0 18px 40px rgba(15, 27, 44, 0.07);
    overflow: hidden;
}

.template-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.2rem;
    background: #fbfaf7;
    border-bottom: 1px solid rgba(194, 204, 214, 0.72);
}

.template-card-body {
    padding: 1.25rem;
}

.template-preview-shell {
    border: 1px solid rgba(194, 204, 214, 0.82);
    border-radius: 22px;
    overflow: hidden;
    background: #fbfaf7;
}

.template-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid rgba(194, 204, 214, 0.72);
    background: rgba(255,255,255,0.9);
}

.template-preview-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #516176;
}

.template-preview-email {
    max-height: min(72vh, 920px);
    overflow: auto;
    padding: 1.25rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.2)),
        #f5f3eb;
}

.template-preview-iframe {
    display: block;
    width: 100%;
    min-height: min(78vh, 920px);
    border: 0;
    background: #f5f3eb;
}

.radzen-email-editor .rz-html-editor {
    border-radius: 18px;
    border: 1px solid rgba(194, 204, 214, 0.82);
    overflow: hidden;
    background: rgba(255,255,255,0.96);
}

.radzen-email-editor .rz-html-editor-content {
    min-height: 360px;
    padding: 1rem 1rem 1.15rem;
    color: #162033;
    line-height: 1.75;
}

.radzen-email-editor .rz-html-editor-toolbar {
    border-bottom: 1px solid rgba(194, 204, 214, 0.72);
    background: #fbfcfd;
}

.page-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 1.35rem;
    flex-wrap: wrap;
}

.page-intro-copy {
    max-width: 760px;
}

.page-intro-title {
    margin: 0;
    color: var(--pg-text-strong);
    font-size: clamp(2rem, 2.7vw, 2.85rem);
    font-weight: 800;
    letter-spacing: 0;
}

.page-intro-subtitle {
    margin: 0.45rem 0 0;
    color: var(--pg-muted);
    font-size: 0.98rem;
    line-height: 1.7;
}

.workspace-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.15rem;
    border: 1px solid var(--pg-border-strong);
    border-radius: 22px;
    background: var(--pg-elev-soft);
    box-shadow: var(--pg-shadow-card);
}

.workspace-toolbar-copy {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.workspace-toolbar-copy strong {
    font-size: 0.95rem;
    letter-spacing: 0;
}

.dashboard-refresh-stamp {
    color: #93a4b7;
    font-size: 0.78rem;
}

.workspace-toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.dashboard-custom-date-range {
    display: grid;
    grid-template-columns: minmax(8.25rem, 1fr) auto minmax(8.25rem, 1fr);
    align-items: center;
    gap: 0.45rem;
    min-width: min(100%, 20rem);
}

.dashboard-date-input {
    min-width: 0;
}

.dashboard-custom-date-separator {
    color: var(--pg-muted);
    font-size: 0.8rem;
}

.dashboard-date-error {
    grid-column: 1 / -1;
    color: #b42318;
    font-size: 0.78rem;
    line-height: 1.35;
}

.workspace-panel {
    border: 1px solid var(--pg-border-strong);
    border-radius: 24px;
    background: var(--pg-panel-translucent);
    backdrop-filter: blur(8px);
    box-shadow: var(--pg-shadow-card);
    overflow: hidden;
}

.workspace-panel-body {
    padding: 1.2rem 1.3rem 1.35rem;
}

.workspace-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.workspace-panel-heading h2,
.workspace-panel-heading h3,
.workspace-panel-heading h4,
.workspace-panel-heading h5 {
    margin: 0;
}

.workspace-panel-heading p {
    margin: 0.2rem 0 0;
}

.recovery-banner {
    border: 1px solid var(--pg-banner-border);
    border-radius: 22px;
    background: var(--pg-banner-bg);
    box-shadow: var(--pg-shadow-banner);
}

.account-page {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    gap: 1.2rem;
}

.account-page-intro {
    display: block;
    margin-bottom: 0;
}

.account-page-intro .page-intro-copy {
    max-width: 720px;
}

.account-page-intro .page-intro-subtitle {
    max-width: 620px;
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    align-items: stretch;
}

.account-wide-panel {
    grid-column: 1 / -1;
}

.account-panel {
    height: 100%;
}

.account-panel .workspace-panel-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.account-panel .workspace-panel-heading {
    align-items: flex-start;
    margin-bottom: 0;
}

.account-panel .workspace-panel-heading .text-muted,
.account-section-header .text-muted {
    max-width: 58rem;
}

.account-form {
    display: grid;
    gap: 0.7rem;
}

.account-form .btn {
    justify-self: start;
    margin-top: 0.25rem;
}

.account-note {
    padding: 1rem 1.05rem;
    border: 1px solid rgba(19, 123, 116, 0.16);
    border-radius: 8px;
    background: rgba(20, 184, 166, 0.08);
    color: var(--pg-text);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

.account-section-header,
.account-compact-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.account-compact-panel .workspace-panel-body {
    padding-top: 1.05rem;
    padding-bottom: 1.05rem;
}

.account-compact-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
}

.account-actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.account-actions .btn {
    white-space: nowrap;
}

.account-security-form {
    max-width: 360px;
}

.account-inline-form {
    display: inline-block;
}

.account-code-input,
main.auth-shell .auth-code-input {
    font-family: var(--pg-font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

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

    .account-compact-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .account-actions {
        justify-content: flex-start;
    }
}

/* ── Recovery funnel ───────────────────────────────────────
   Sits between the recovery-rate banner and the invoices table on
   /dashboard. Shows the email-first flow stage by stage with both
   share-of-failed (the bar fill) and stage-vs-prior conversion (the
   small ↓ chip) so the merchant can spot the exact step they're
   losing customers at. */
.funnel-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 1.25rem 1.5rem 1rem;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}
.funnel-head { margin-bottom: 1rem; }
.funnel-rows { display: flex; flex-direction: column; gap: .65rem; }
.funnel-row {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    align-items: center;
    gap: 1rem;
}
.funnel-row-label {
    font-size: .85rem;
    font-weight: 600;
    color: #334155;
}
.funnel-bar-track {
    background: #f1f5f9;
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
}
.funnel-bar-fill {
    background: linear-gradient(90deg, #137b74 0%, #1f9b91 100%);
    height: 100%;
    border-radius: 999px;
    transition: width .35s ease;
    min-width: 1px;
}
.funnel-row-count {
    text-align: right;
    font-size: .85rem;
    color: #0f172a;
    white-space: nowrap;
}
.funnel-conversion {
    display: inline-block;
    background: #f0fdf9;
    color: #137b74;
    border: 1px solid #c7f0e9;
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
}

[data-theme="dark"] .page .funnel-card {
    background: var(--pg-panel);
    border-color: var(--pg-border-strong);
    color: var(--pg-text);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

[data-theme="dark"] .page .funnel-card h6,
[data-theme="dark"] .page .funnel-row-label,
[data-theme="dark"] .page .funnel-row-count {
    color: var(--pg-text-strong);
}

[data-theme="dark"] .page .funnel-card .text-muted {
    color: var(--pg-muted) !important;
}

[data-theme="dark"] .page .funnel-bar-track {
    background: rgba(148, 163, 184, .16);
}

[data-theme="dark"] .page .funnel-bar-fill {
    background: linear-gradient(90deg, #34d399 0%, #2dd4bf 100%);
}

[data-theme="dark"] .page .funnel-conversion {
    background: rgba(45, 212, 191, .14);
    border-color: rgba(45, 212, 191, .34);
    color: #8cf4e8;
}

@media (max-width: 768px) {
    .funnel-row { grid-template-columns: 1fr; gap: .25rem; }
    .funnel-row-count { text-align: left; }
}

.connect-grid {
    display: grid;
    /* Equalised 2026-04-29 - left column was wider (1.15fr) but held
       Connection status + the long Stripe configuration checklist + Update
       API key + Disconnect, while the right column held only the small
       "What PayDam uses access for" aside, leaving most of the right side
       empty. Right column now also carries the checklist (see
       ConnectStripe.razor), so balance them and bump the min so neither
       column collapses to a single line at 1024px. */
    grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.connect-side-note {
    padding: 1.15rem 1.2rem;
    border: 1px solid rgba(194, 204, 214, 0.82);
    border-radius: 22px;
    background: rgba(255,255,255,0.72);
    box-shadow: 0 16px 34px rgba(15, 27, 44, 0.05);
}

.connect-side-note h3 {
    margin: 0 0 0.55rem;
    font-size: 1.05rem;
    letter-spacing: 0;
}

.connect-side-note ul {
    margin: 0;
    padding-left: 1rem;
    color: #526276;
}

.connect-side-note li + li {
    margin-top: 0.45rem;
}

.connect-page-intro {
    margin-bottom: 1.5rem;
}

.plan-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.plan-summary-card {
    border: 1px solid rgba(194, 204, 214, 0.82);
    border-radius: 24px;
    background: rgba(255,255,255,0.88);
    box-shadow: 0 18px 40px rgba(15, 27, 44, 0.06);
}

.plan-summary-card .card-body {
    padding: 1.35rem 1.4rem;
}

.plan-option-card {
    border-radius: 24px !important;
    box-shadow: 0 18px 36px rgba(15, 27, 44, 0.05);
}

.settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 1.25rem;
    align-items: start;
}

.settings-side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.schedule-timeline {
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6fb 100%);
    border: 1px solid rgba(194, 204, 214, 0.82);
    border-radius: 22px;
    padding: 1.25rem;
}

.timeline-time {
    color: #516176;
    font-weight: 700;
}

.timeline-description {
    color: var(--pg-text);
}

.connect-box {
    max-width: 900px;
    margin: 0;
}

.auth-box {
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(19, 123, 116, 0.09), transparent 28%),
        var(--pg-surface);
}

.auth-logo {
    margin-bottom: 1.3rem;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2cc4b6 0%, #137b74 100%);
    box-shadow: 0 12px 26px rgba(19, 123, 116, 0.24);
}

.brand-name {
    font-size: 1.3rem;
    font-weight: 800;
}

.auth-card {
    border-radius: 24px;
    padding: 2rem;
}

.offcanvas {
    border-radius: 24px 0 0 24px;
    background: #fffdf9;
}

.cookie-banner {
    background: rgba(15, 27, 44, 0.96);
    color: #dce6f1;
}

@media (max-width: 1100px) {
    .plan-summary-grid,
    .connect-grid,
    .settings-grid,
    .template-guidance {
        grid-template-columns: 1fr;
    }

    .editor-warning-banner {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: min(86vw, 320px);
        transform: translateX(-100%);
        transition: transform 0.24s ease;
    }

    .sidebar.sidebar-open {
        transform: translateX(0);
    }

    main.app-main {
        margin-left: 0;
        width: 100%;
    }

    .top-row {
        padding: 0 1rem;
    }

    .top-row-copy {
        display: none;
    }

    .top-row-account {
        max-width: 68vw;
        padding-inline: 0.72rem;
    }

    article.content {
        padding: 1rem 1rem 2.5rem;
    }

    .placeholder-chips {
        top: 72px;
    }
}

/* -----------------------------------------------------------------
   Email template studio refresh
   ----------------------------------------------------------------- */

.template-studio-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

.template-studio-copy {
    max-width: 760px;
}

.template-studio-card .template-card-body {
    padding: 1.4rem;
}

.template-card-header-copy {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
}

.email-template-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 1rem;
    align-items: stretch;
}

.email-template-editor-pane,
.email-template-preview-pane {
    min-width: 0;
}

.email-template-editor-pane {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.1rem;
    border: 1px solid rgba(194, 204, 214, 0.82);
    border-radius: 22px;
    background: rgba(255,255,255,0.94);
}

.email-pane-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.email-pane-title {
    margin: 0;
    color: #142033;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0;
}

.email-pane-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.38rem 0.68rem;
    border-radius: 999px;
    background: #edf6f5;
    color: #145d57;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.email-pane-badge-preview {
    background: #f1f5f9;
    color: #516176;
}

.email-html-editor {
    min-height: 720px;
    resize: vertical;
    border-radius: 18px;
    padding: 1rem 1rem 1.1rem;
    border-color: rgba(194, 204, 214, 0.82);
    background: #fcfbf8;
    color: #152033;
    font-size: 0.82rem;
    line-height: 1.7;
}

.email-html-editor:focus {
    background: #ffffff;
}

.template-storage-note {
    padding: 0.85rem 0.95rem;
    border: 1px dashed rgba(194, 204, 214, 0.95);
    border-radius: 16px;
    background: #fbfaf7;
    color: #607184;
    font-size: 0.8rem;
    line-height: 1.6;
}

.template-preview-shell {
    height: 100%;
}

.template-preview-toolbar {
    align-items: flex-start;
}

.template-preview-email {
    min-height: 720px;
    padding: 1.1rem;
}

@media (max-width: 1240px) {
    .email-template-workbench {
        grid-template-columns: 1fr;
    }

    .email-html-editor,
    .template-preview-email {
        min-height: 560px;
    }
}

@media (max-width: 768px) {
    .template-studio-header {
        align-items: stretch;
    }

    .email-pane-header {
        flex-direction: column;
    }

    .email-html-editor,
    .template-preview-email {
        min-height: 420px;
    }
}

/* -----------------------------------------------------------------
   Email template workspace rebuild
   ----------------------------------------------------------------- */

.email-studio-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.email-studio-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.email-studio-header-actions {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.email-studio-account-picker {
    min-width: min(260px, 100%);
}

.email-studio-account-picker .form-label {
    color: #4c5d70;
}

.stripe-account-add-panel {
    border: 1px solid rgba(194, 204, 214, 0.82);
    border-radius: 8px;
    background: rgba(248, 250, 252, 0.96);
    padding: 1rem;
    margin-bottom: 1rem;
}

.stripe-empty-state {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stripe-empty-state > div:first-child {
    max-width: 46rem;
}

.stripe-empty-state-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.stripe-accounts-table {
    min-width: 920px;
}

.stripe-accounts-table th:last-child,
.stripe-accounts-table td:last-child {
    width: 38%;
}

.stripe-account-actions-cell {
    text-align: right;
}

.stripe-account-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
}

.stripe-account-action-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.stripe-account-action-buttons .btn {
    margin: 0;
    white-space: nowrap;
}

.stripe-account-action-note {
    max-width: 18rem;
    margin: 0;
    color: #586a7d;
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: right;
}

.stripe-account-action-note a {
    white-space: normal;
}

.stripe-manual-key-panel {
    max-width: 42rem;
    border-top: 1px solid rgba(194, 204, 214, 0.6);
    padding-top: 0.75rem;
}

.stripe-manual-key-panel > summary {
    cursor: pointer;
    color: #385066;
    font-size: 0.84rem;
    font-weight: 700;
}

.stripe-manual-key-panel > summary:hover {
    color: #137b74;
}

.email-studio-banner,
.email-studio-toolbar,
.email-studio-editor-card {
    border: 1px solid rgba(194, 204, 214, 0.82);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 36px rgba(15, 27, 44, 0.06);
}

.email-studio-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-color: rgba(191, 124, 35, 0.24);
    background: linear-gradient(135deg, rgba(255, 245, 231, 0.98), rgba(255, 251, 244, 0.98));
}

.email-studio-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    align-items: stretch;
}

/*
 * The Style-set and Saved-sets cards live side-by-side in a 2-col grid.
 * A shared column-grid of rows (head / description / controls / foot)
 * with `display: contents` on each card would be ideal but isn't well-
 * supported for accessibility landmarks; instead, both cards apply the
 * same flex rhythm + matching gaps + align-self:stretch so visually the
 * label row, description row, select row, and footnote row line up
 * across the two columns even when one card has more controls than the
 * other.
 */
.email-studio-style-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.email-studio-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 24px;
}

.email-studio-card-head .form-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    color: #3b4b5f;
}

.email-studio-card-meta {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7a8c;
    white-space: nowrap;
}

.email-studio-card-desc {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.6;
    color: #6b7a8c;
    min-height: 3.2em;           /* reserve two lines so both cards align */
}

.email-studio-card-foot {
    margin-top: auto;             /* pins the footnote to the card bottom */
    font-size: 0.78rem;
    color: #6b7a8c;
    min-height: 1.3em;
}

.email-studio-style-row {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: center;
}

.email-studio-style-select {
    flex: 1 1 240px;
    min-width: 0;
}

.email-studio-fields-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 100%;
}

.email-studio-fields-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid rgba(194, 204, 214, 0.82);
    border-radius: 22px;
    background: rgba(251, 250, 247, 0.96);
}

.email-studio-field-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.58rem 0.88rem;
    border: 1px solid rgba(191, 201, 214, 0.9);
    border-radius: 999px;
    background: #fff;
    color: #182336;
    font-size: 0.9rem;
    font-weight: 600;
    transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.email-studio-field-chip:hover {
    border-color: rgba(23, 109, 103, 0.38);
    box-shadow: 0 10px 18px rgba(15, 27, 44, 0.08);
    transform: translateY(-1px);
}

.email-studio-sequence {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 0.7rem;
    overflow: visible;
}

/*
 * Sequence tile grid. Every tile has the same width, the same three
 * internal rows (day label / title / badge slot) with fixed heights,
 * and the same outer dimensions - so a dirty tile next to a clean tile
 * doesn't create vertical jitter.
 */
.email-studio-step {
    display: grid;
    grid-template-rows: auto 1fr auto;
    row-gap: 0.3rem;
    width: 100%;
    min-width: 0;
    height: 108px;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(194, 204, 214, 0.86);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    color: #182336;
    text-align: left;
    box-shadow: 0 10px 24px rgba(15, 27, 44, 0.04);
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
    box-sizing: border-box;
}

.email-studio-step:hover {
    border-color: rgba(23, 109, 103, 0.34);
    box-shadow: 0 16px 28px rgba(15, 27, 44, 0.08);
    transform: translateY(-1px);
}

.email-studio-step.is-active {
    border-color: rgba(23, 109, 103, 0.48);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 246, 0.98));
    box-shadow: 0 18px 32px rgba(23, 109, 103, 0.12);
}

.email-studio-step.is-dirty:not(.is-active) {
    border-color: rgba(191, 124, 35, 0.5);
    background: rgba(255, 250, 240, 0.96);
}

.email-studio-step-day {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7a8c;
    line-height: 1;
}

.email-studio-step-title {
    align-self: start;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
    /* Clamp to two lines so variable-length titles don't alter the
       tile's internal row geometry. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.email-studio-step-badge-slot {
    /* Always-present slot - pinned at the same place whether a badge is
       rendered or not, so clean and dirty tiles have identical heights. */
    display: flex;
    align-items: center;
    min-height: 20px;
}

.email-studio-step-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    background: #fff1cb;
    color: #7b5300;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

/* Draft (staged-but-not-published) variant. Different colour from the
   Unsaved pill so the user can distinguish "I haven't saved yet" from
   "I saved, but it's not live yet." */
.email-studio-step-badge--draft {
    background: #eef3ff;
    color: #2a4670;
}

.email-studio-step.is-staged:not(.is-active):not(.is-dirty) {
    border-color: rgba(42, 70, 112, 0.22);
    background: rgba(238, 243, 255, 0.45);
}

.email-studio-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.2rem 1.25rem;
    border-bottom: 1px solid rgba(194, 204, 214, 0.72);
    background: #fbfaf7;
}

.email-studio-editor-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

.email-studio-body-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.email-studio-fields-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.email-studio-fields-panel--inline {
    margin-bottom: 0.5rem;
    background: rgba(248, 249, 250, 0.95);
    border: 1px solid rgba(194, 204, 214, 0.7);
    border-radius: 12px;
    padding: 0.6rem 0.8rem;
}

.email-studio-editor-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

.email-studio-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem;
    border: 1px solid rgba(194, 204, 214, 0.82);
    border-radius: 999px;
    background: #ffffff;
}

.email-studio-mode-button {
    padding: 0.42rem 0.8rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #55657a;
    font-size: 0.85rem;
    font-weight: 700;
}

.email-studio-mode-button.is-active {
    background: #176d67;
    color: #fff;
}

.email-studio-editor-surface .email-studio-tiny-host .tox-tinymce {
    overflow: hidden;
    border: 1px solid rgba(194, 204, 214, 0.82);
    border-radius: 20px;
    background: #fff;
    box-shadow: none;
}

.email-studio-editor-surface .email-studio-tiny-host .tox-editor-header {
    border-bottom: 1px solid rgba(194, 204, 214, 0.72);
    background: #f8fafc;
}

.email-studio-editor-surface .email-studio-tiny-host .tox-toolbar,
.email-studio-editor-surface .email-studio-tiny-host .tox-toolbar__primary,
.email-studio-editor-surface .email-studio-tiny-host .tox-toolbar__overflow {
    background: #f8fafc;
}

.email-studio-editor-surface .email-studio-tiny-host .tox .tox-edit-area__iframe {
    background: #fff;
}

.email-studio-editor-surface .email-studio-tiny-host .tox-statusbar {
    border-top: 1px solid rgba(194, 204, 214, 0.72);
}

.email-studio-tiny-host,
.email-studio-html-editor--tiny-host {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.email-studio-html-editor {
    min-height: 520px;
    height: min(64vh, 760px);
    max-height: 78vh;
    resize: vertical;
    padding: 1rem 1rem 1.1rem;
    border-radius: 20px;
    border-color: rgba(194, 204, 214, 0.82);
    background: #fcfbf8;
    color: #152033;
    font-size: 0.9rem;
    line-height: 1.7;
}

.email-studio-preview-shell {
    overflow: hidden;
    border: 1px solid rgba(194, 204, 214, 0.82);
    border-radius: 22px;
    background: #fbfaf7;
}

.email-studio-preview-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid rgba(194, 204, 214, 0.72);
    background: rgba(255, 255, 255, 0.92);
}

.email-studio-preview-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #516176;
}

.email-studio-preview-subject,
.email-studio-preview-note {
    color: #475569;
    font-size: 0.86rem;
}

.email-studio-preview-close {
    border-radius: 999px;
}

.email-studio-preview-iframe {
    display: block;
    width: 100%;
    min-height: min(78vh, 920px);
    border: 0;
    background: #edf1f4;
}

@media (max-width: 1024px) {
    .email-studio-toolbar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .email-studio-banner,
    .email-studio-fields-toggle,
    .email-studio-preview-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .email-studio-editor-head {
        padding: 1rem;
    }

    .email-studio-editor-body,
    .email-studio-toolbar {
        padding: 1rem;
    }

    .email-studio-style-row {
        flex-direction: column;
        align-items: stretch;
    }

    .email-studio-style-row .btn,
    .email-studio-style-row .form-select,
    .email-studio-fields-toggle .btn {
        width: 100%;
    }

    /* `.email-studio-style-select` declares `flex: 1 1 240px` for the
       desktop row layout. When the row flips to column on mobile, the
       240px flex-basis becomes a *height*, ballooning the select into
       a giant empty box. Reset to auto sizing on mobile. */
    .email-studio-style-row .email-studio-style-select,
    .email-studio-style-row .form-control.email-studio-style-select,
    .email-studio-style-row .form-select.email-studio-style-select {
        flex: 0 0 auto;
    }

    .email-studio-html-editor {
        min-height: 420px;
        height: min(62vh, 560px);
    }

    .email-studio-editor-surface .email-studio-tiny-host .tox-tinymce {
        border-radius: 18px;
    }
}

/* ── Email studio: floating save toast ────────────────────────── */
.email-studio-save-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    background: #182336;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 27, 44, 0.24);
    animation: toast-slide-in 180ms ease;
    pointer-events: none;
}

@keyframes toast-slide-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Onboarding welcome (dashboard, no Stripe connected) ─────── */
.onboarding-welcome {
    max-width: 600px;
    margin: 3rem auto 0;
}

.onboarding-welcome-head {
    text-align: center;
    margin-bottom: 2.5rem;
}

.onboarding-welcome-title {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
}

.onboarding-welcome-subtitle {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}

.onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.onboarding-step {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: 16px;
    border: 1.5px solid transparent;
    position: relative;
}

.onboarding-step + .onboarding-step {
    margin-top: 0.75rem;
}

.onboarding-step--active {
    border-color: rgba(23, 109, 103, 0.38);
    background: rgba(239, 248, 246, 0.96);
    box-shadow: 0 4px 20px rgba(23, 109, 103, 0.08);
}

.onboarding-step--pending {
    border-color: rgba(194, 204, 214, 0.7);
    background: #fff;
    opacity: 0.55;
}

.onboarding-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.88rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.onboarding-step--active .onboarding-step-num {
    background: #176d67;
    color: #fff;
}

.onboarding-step--pending .onboarding-step-num {
    background: rgba(194, 204, 214, 0.6);
    color: #516176;
}

.onboarding-step-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.onboarding-step-desc {
    color: #516176;
    font-size: 0.88rem;
    margin-bottom: 0.85rem;
    line-height: 1.55;
}

.onboarding-step--pending .onboarding-step-desc {
    margin-bottom: 0;
}

/* ── Connect-success panel (post-Stripe-connect) ─────────────── */
.connect-success-panel {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border-radius: 14px;
    border: 1.5px solid rgba(5, 150, 105, 0.3);
    background: rgba(240, 253, 244, 0.95);
}

.connect-success-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #059669;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Dashboard listening state (Stripe connected, no invoices) ── */
.dashboard-listening {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 14px;
    border: 1px solid rgba(194, 204, 214, 0.7);
    background: rgba(250, 252, 255, 0.9);
}

.dashboard-listening-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    margin-top: 5px;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
    animation: listening-pulse 2.2s ease-in-out infinite;
}

@keyframes listening-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22); }
    50%       { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.06); }
}

/* ── /choose-plan email-confirmed success banner ─────────────── */
.choose-plan-confirmed-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    border-radius: 14px;
    border: 1.5px solid rgba(34, 197, 94, 0.45);
    background: rgba(22, 101, 52, 0.25);
    color: #fff;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.choose-plan-confirmed-check {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Settings / Email templates pre-Stripe gate panel ────────── */
.settings-gate-panel {
    max-width: 620px;
    margin: 2rem auto;
    padding: 2.5rem 2rem;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(194, 204, 214, 0.7);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(15, 27, 44, 0.05);
}

.settings-gate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(239, 248, 246, 0.96);
    color: #176d67;
    margin-bottom: 1rem;
}

.settings-gate-list {
    padding: 1rem 1.25rem;
    background: rgba(250, 252, 255, 0.9);
    border: 1px solid rgba(194, 204, 214, 0.5);
    border-radius: 12px;
    text-align: left;
}

.settings-gate-list ul li {
    padding: 0.2rem 0;
}

.settings-gate-list ul li::before {
    content: "✓ ";
    color: #22c55e;
    font-weight: 700;
    margin-right: 0.25rem;
}

/* ── Connect side-note footer line ─────────────────────────── */
.connect-side-note-footer {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(194, 204, 214, 0.55);
    font-size: 0.78rem;
    color: #516176;
    margin-bottom: 0;
}


/* ── Hosted pay page (/pay/{invoiceId}) ──────────────────────── */
.pay-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(180deg, #f7f9fb 0%, #eef2f7 100%);
    color: #0f172a;
    color-scheme: light;
}
.pay-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, .08);
    padding: 2.5rem 2.25rem;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
.pay-card--success { text-align: center; }
.pay-card--centered { text-align: center; }
.pay-card--centered .pay-body { text-align: center; }
.pay-card--centered .pay-icon { margin: 0 auto 1.25rem; color: #f59e0b; background: #fef3c7; }
.pay-brand {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pay-accent-dark, #64748b);
    font-weight: 700;
    margin-bottom: 1rem;
}
.pay-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1rem;
    line-height: 1.25;
}
.pay-body {
    color: #475569;
    font-size: .95rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}
.pay-body--muted { color: #475569; font-size: .85rem; }
.pay-body--notice {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    color: #9a3412;
    font-size: .88rem;
    padding: .85rem 1rem;
}
.pay-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
}
.pay-icon--success { background: var(--pay-accent-soft, #dff5f2); color: var(--pay-accent, #137b74); }
.pay-invoice {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}
.pay-invoice-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .4rem 0;
}
.pay-invoice-label {
    color: #64748b;
    font-size: .85rem;
}
.pay-invoice-value {
    color: #0f172a;
    font-weight: 600;
    font-size: .95rem;
}
.pay-invoice-value--amount {
    font-size: 1.25rem;
    font-weight: 700;
}
.pay-actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: 1.5rem 0 1.25rem;
}
.pay-btn {
    display: block;
    text-align: center;
    padding: .85rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: background .15s, transform .1s;
}
.pay-btn:active { transform: translateY(1px); }
.pay-btn--primary {
    background: var(--pay-accent, #137b74);
    color: #fff;
}
.pay-btn--primary:hover { background: var(--pay-accent-dark, #0e5a55); color: #fff; }
.pay-btn--secondary {
    background: #f1f5f9;
    color: #0f172a;
    border: 1px solid #e2e8f0;
}
.pay-btn--secondary:hover { background: #e2e8f0; color: #0f172a; }
.pay-footer {
    color: #475569;
    font-size: .78rem;
    line-height: 1.55;
    text-align: center;
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid #dbe3ed;
}

.pay-demo-card {
    max-width: 540px;
}

.pay-demo-eyebrow {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #ccfbf1;
    border: 1px solid #99f6e4;
    color: #115e59;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    margin-bottom: 1.25rem;
    padding: .35rem .75rem;
    text-transform: uppercase;
}

.pay-demo-disabled-action {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #94a3b8;
    border-radius: 10px;
    color: #0f172a;
    display: flex;
    font-size: .92rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1.35;
    margin: 1.5rem 0 1.25rem;
    min-height: 48px;
    padding: .85rem 1rem;
    text-align: center;
}
.pay-footer a { color: var(--pay-accent-dark, #0f766e); font-weight: 700; }

html[data-theme="dark"]:has(.pay-shell),
html[data-theme="dark"]:has(.pay-shell) body {
    background: #eef2f7;
    color: #0f172a;
}

[data-theme="dark"] .pay-shell {
    background: linear-gradient(180deg, #f7f9fb 0%, #eef2f7 100%);
    color: #0f172a;
}

[data-theme="dark"] .pay-card,
[data-theme="dark"] .pay-invoice,
[data-theme="dark"] .pay-demo-disabled-action {
    color-scheme: light;
}

[data-theme="dark"] .pay-card {
    background: #fff;
    border-color: #d7e0ea;
}

[data-theme="dark"] .pay-brand,
[data-theme="dark"] .pay-invoice-label,
[data-theme="dark"] .pay-footer,
[data-theme="dark"] .pay-body,
[data-theme="dark"] .pay-body--muted {
    color: #475569;
}

[data-theme="dark"] .pay-title,
[data-theme="dark"] .pay-invoice-value,
[data-theme="dark"] .pay-demo-disabled-action {
    color: #0f172a;
}

[data-theme="dark"] .pay-demo-eyebrow {
    background: #ccfbf1;
    border-color: #99f6e4;
    color: #115e59;
}

/* ── /automations page ─────────────────────────────────────── */

.automations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 1.1rem;
    margin-top: 1.25rem;
}

.automation-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.2rem 1.25rem;
    border: 1px solid rgba(194, 204, 214, 0.82);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 30px rgba(15, 27, 44, 0.05);
    min-height: 100%;
    height: 100%;
}

.automation-card--accent {
    border-color: rgba(23, 109, 103, 0.32);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 248, 246, 0.96));
}

.automation-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 1.85rem;
}

.automation-card-title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    color: #172033;
    line-height: 1.25;
    min-width: 0;
    flex: 1 1 auto;
}

.automation-card-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.62rem;
    min-height: 1.85rem;
    max-width: min(100%, 18rem);
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.automation-card-status--on {
    background: #e7f6ee;
    color: #155e3a;
    border: 1px solid rgba(21, 94, 58, 0.18);
}

.automation-card-status--promo {
    background: #fff1cb;
    color: #7b5300;
    border: 1px solid rgba(123, 83, 0, 0.22);
}

.automation-card-status--off {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.24);
}

.automation-card-desc {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #3b4b5f;
}

.automation-card-metrics {
    /* Push the metrics block to the bottom of each card so the grid
       row's status zone lines up visually across cards,
       regardless of how tall each description ends up being. Works
       with the flex column on .automation-card: margin-top: auto on
       this child absorbs the row's free vertical space above. Any
       content that lives BELOW the metrics block in markup (details
       drilldown on card 1, actions row on card 4) flows naturally
       after and also lands at the bottom. */
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0.9rem 1rem;
    background: rgba(246, 249, 252, 0.85);
    border: 1px solid rgba(194, 204, 214, 0.48);
    border-radius: 8px;
    min-height: 7.5rem;
}

.automation-card-metrics > div {
    min-width: 0;
    padding: 0 0.85rem;
    border-left: 1px solid rgba(194, 204, 214, 0.48);
}

.automation-card-metrics > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.automation-card-metrics > div:last-child {
    padding-right: 0;
}

.automation-card-metrics dt {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7a8c;
    margin: 0 0 0.25rem;
}

.automation-card-metrics dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: #172033;
    min-height: 2.7em;
    overflow-wrap: break-word;
}

.automation-card-details {
    margin-top: 0.2rem;
    font-size: 0.86rem;
}

.automation-card-details > summary {
    cursor: pointer;
    font-weight: 600;
    color: #137b74;
}

.automation-card-details > summary:hover {
    color: #0e5a55;
}

.automation-card-actions--stack {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
}

.automation-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.92rem;
    font-weight: 650;
    color: #172033;
}

.automation-toggle .form-check-input {
    margin: 0;
}

.review-status-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.review-status-title {
    margin: 0 0 0.15rem;
    font-size: 1.05rem;
    font-weight: 750;
    color: #172033;
}

.review-status-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0.9rem 1rem;
    background: rgba(246, 249, 252, 0.85);
    border: 1px solid rgba(194, 204, 214, 0.48);
    border-radius: 8px;
}

.review-status-metrics > div {
    min-width: 0;
    padding: 0 0.85rem;
    border-left: 1px solid rgba(194, 204, 214, 0.48);
}

.review-status-metrics > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.review-status-metrics dt {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7a8c;
    margin: 0 0 0.25rem;
}

.review-status-metrics dd {
    margin: 0;
    font-size: 0.96rem;
    font-weight: 650;
    color: #172033;
    overflow-wrap: break-word;
}

.automation-card-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    border-top: 1px solid rgba(194, 204, 214, 0.48);
}

.automation-card-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.2rem 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(194, 204, 214, 0.38);
    font-size: 0.84rem;
}

.automation-card-list li:last-child {
    border-bottom: none;
}

.automation-card-list-primary {
    font-weight: 600;
    color: #172033;
}

.automation-card-list-secondary {
    grid-column: 1;
    font-size: 0.78rem;
    color: #6b7a8c;
}

.automation-card-list-time {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 0.78rem;
    color: #6b7a8c;
    white-space: nowrap;
}

.automation-card-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    /* Natural flow: the metrics block above us already claims the
       auto-pushed bottom slot, and actions sit directly below it via
       the flex column gap. Previously this row owned the margin-top:
       auto, but that left a visible gap between metrics and actions
       in the testimonial card - moved the push up one element. */
    padding-top: 0.35rem;
    min-height: 2.2rem;
}

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

    .automation-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .automation-card-status {
        max-width: 100%;
    }

    .automation-card-metrics {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .automation-card-metrics > div {
        padding: 0.65rem 0 0;
        border-left: 0;
        border-top: 1px solid rgba(194, 204, 214, 0.48);
    }

    .automation-card-metrics > div:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .automation-card-metrics dd {
        min-height: 0;
    }
}

/* ── /admin pages ──────────────────────────────────────────── */

.admin-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.25rem 0 1.5rem;
    padding: 0.35rem;
    background: rgba(246, 249, 252, 0.85);
    border: 1px solid rgba(194, 204, 214, 0.55);
    border-radius: 12px;
    width: fit-content;
}

.admin-subnav a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.85rem;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #3b4b5f;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}

.admin-subnav a:hover {
    background: rgba(23, 109, 103, 0.08);
    color: #0e5a55;
}

.admin-subnav a.active {
    background: #137b74;
    color: #fff;
    box-shadow: 0 3px 8px rgba(19, 123, 116, 0.25);
}

.admin-subnav a .admin-subnav-count {
    display: inline-flex;
    align-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(23, 109, 103, 0.12);
    color: #0e5a55;
    font-size: 0.72rem;
    font-weight: 700;
}

.admin-subnav a.active .admin-subnav-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.admin-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 0.25rem;
}

.admin-hub-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid rgba(194, 204, 214, 0.82);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 22px rgba(15, 27, 44, 0.04);
    color: #172033;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.admin-hub-card:hover {
    transform: translateY(-1px);
    border-color: rgba(23, 109, 103, 0.5);
    box-shadow: 0 12px 30px rgba(15, 27, 44, 0.08);
    color: #0e5a55;
}

.admin-hub-card .admin-hub-heading {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7a8c;
}

.admin-hub-card .admin-hub-count {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0;
    color: #172033;
    line-height: 1;
}

.admin-hub-card .admin-hub-count-sub {
    font-size: 0.78rem;
    color: #6b7a8c;
    margin-top: 0.1rem;
}

.admin-hub-card .admin-hub-label {
    font-weight: 700;
    font-size: 1rem;
}

.admin-hub-card .admin-hub-desc {
    font-size: 0.84rem;
    color: #3b4b5f;
    line-height: 1.45;
}

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.86rem;
    background: #fff;
    border: 1px solid rgba(194, 204, 214, 0.62);
    border-radius: 14px;
    overflow: hidden;
}

.admin-table thead th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7a8c;
    padding: 0.75rem 0.9rem;
    background: rgba(246, 249, 252, 0.85);
    border-bottom: 1px solid rgba(194, 204, 214, 0.48);
}

.admin-table tbody td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid rgba(194, 204, 214, 0.32);
    vertical-align: middle;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:hover {
    background: rgba(246, 249, 252, 0.65);
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-badge--trial      { background: #fff1cb; color: #7b5300; border: 1px solid rgba(123, 83, 0, 0.22); }
.admin-badge--active     { background: #e7f6ee; color: #155e3a; border: 1px solid rgba(21, 94, 58, 0.18); }
.admin-badge--pastdue    { background: #fde1e1; color: #8a1f1f; border: 1px solid rgba(138, 31, 31, 0.22); }
.admin-badge--canceled   { background: #eef1f4; color: #42516b; border: 1px solid rgba(66, 81, 107, 0.22); }
.admin-badge--expired    { background: #eef1f4; color: #42516b; border: 1px solid rgba(66, 81, 107, 0.22); }
.admin-badge--starter    { background: #eef3f9; color: #2a4670; border: 1px solid rgba(42, 70, 112, 0.22); }
.admin-badge--pro        { background: #ecefff; color: #3b3f8a; border: 1px solid rgba(59, 63, 138, 0.22); }
.admin-badge--scale      { background: #e9f7f2; color: #0e5a55; border: 1px solid rgba(14, 90, 85, 0.22); }

.admin-kv {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0.55rem 1rem;
    margin: 0;
    font-size: 0.88rem;
}

.admin-kv dt {
    color: #6b7a8c;
    font-weight: 600;
}

.admin-kv dd {
    margin: 0;
    color: #172033;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.admin-error-row {
    background: rgba(246, 249, 252, 0.5);
    padding: 0.9rem 1.1rem;
    border-radius: 12px;
    border: 1px solid rgba(194, 204, 214, 0.55);
    margin-bottom: 0.6rem;
}

.admin-error-row-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    align-items: baseline;
    margin-bottom: 0.4rem;
}

/* ════════════════════════════════════════════════════════════
   Dark-theme safety net
   ════════════════════════════════════════════════════════════
   The token system in :root + [data-theme="dark"] .page above
   handles surfaces that already read from --pg-* variables. The
   block below catches the long tail of Bootstrap-derived and
   page-specific classes that hard-coded `#fff`, `#fbfaf7`, etc.
   without going through tokens.

   Anything scoped here lives under `[data-theme="dark"] .page`
   so it can NEVER leak into the marketing landing or other
   public surfaces (which don't have the `.page` wrapper).
   ════════════════════════════════════════════════════════════ */

/* ── Sidebar harmony ──────────────────────────────────────────
   The default sidebar background is a navy gradient that visually
   disconnects from the deep-teal workspace bg in dark mode. Tint
   the gradient toward teal so the sidebar reads as part of the
   same surface, not a different app pinned alongside it. */
[data-theme="dark"] .page .sidebar {
    background:
        radial-gradient(circle at top left, rgba(52, 211, 153, 0.10), transparent 30%),
        linear-gradient(180deg, #0d2521 0%, #0a1f1c 50%, #07181a 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 18px 0 40px rgba(0, 0, 0, 0.35);
}

/* ── Form controls (selects, inputs, textareas) ──────────────
   Bootstrap defaults paint these white-on-white in dark mode,
   making the dashboard's date/status filters and the settings
   form fields invisible. */
[data-theme="dark"] .page .form-select,
[data-theme="dark"] .page .form-control,
[data-theme="dark"] .page input[type="text"],
[data-theme="dark"] .page input[type="email"],
[data-theme="dark"] .page input[type="url"],
[data-theme="dark"] .page input[type="number"],
[data-theme="dark"] .page input[type="search"],
[data-theme="dark"] .page input[type="tel"],
[data-theme="dark"] .page input[type="password"],
[data-theme="dark"] .page textarea {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--pg-text);
}

[data-theme="dark"] .page .form-select:focus,
[data-theme="dark"] .page .form-control:focus,
[data-theme="dark"] .page input:focus,
[data-theme="dark"] .page textarea:focus {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(52, 211, 153, 0.45);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
    color: var(--pg-text-strong);
}

[data-theme="dark"] .page .form-select option {
    background-color: #0e2521;
    color: var(--pg-text);
}

[data-theme="dark"] .page ::placeholder {
    color: var(--pg-muted);
    opacity: 0.7;
}

/* ── Buttons ─────────────────────────────────────────────────
   Bootstrap's `.btn-outline-*` classes use `color: <hue>` and
   `border-color: <hue>` against a transparent bg. On a dark bg
   that hue is fine for the border but the text stays the hue
   too; many of them are too dim. Punch them up with the neon
   palette in dark mode. */
[data-theme="dark"] .page .btn-outline-secondary {
    color: var(--pg-text);
    border-color: rgba(255, 255, 255, 0.18);
    background-color: transparent;
}

[data-theme="dark"] .page .btn-outline-secondary:hover,
[data-theme="dark"] .page .btn-outline-secondary:focus {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(52, 211, 153, 0.4);
    color: var(--pg-text-strong);
}

[data-theme="dark"] .page .btn-outline-primary {
    color: var(--accent-recovered);
    border-color: rgba(52, 211, 153, 0.45);
    background-color: transparent;
}

[data-theme="dark"] .page .btn-outline-primary:hover,
[data-theme="dark"] .page .btn-outline-primary:focus {
    background-color: rgba(52, 211, 153, 0.12);
    color: #ecfdf5;
    border-color: rgba(52, 211, 153, 0.7);
}

[data-theme="dark"] .page .btn-outline-danger {
    color: var(--accent-lost);
    border-color: rgba(248, 113, 113, 0.45);
}

[data-theme="dark"] .page .btn-outline-danger:hover {
    background-color: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.7);
}

[data-theme="dark"] .page .btn-outline-light {
    color: var(--pg-text);
    border-color: rgba(255, 255, 255, 0.2);
    background-color: transparent;
}

[data-theme="dark"] .page .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--pg-text-strong);
}

[data-theme="dark"] .page .btn-light {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--pg-text);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .page .btn-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--pg-text-strong);
}

/* ── Cards (Bootstrap default + ad-hoc panels) ──────────────
   Many surfaces use `.card` directly or build panels with
   `background: #fff` inline. Override at the .page level so
   they pick up dark surfaces. Pages that hard-code their own
   bg can override this further if needed; this is the backstop
   so nothing reads as "white on white". */
[data-theme="dark"] .page .card {
    background-color: var(--pg-panel);
    border-color: var(--pg-border);
    color: var(--pg-text);
}

[data-theme="dark"] .page .card-header,
[data-theme="dark"] .page .card-footer {
    background-color: var(--pg-panel-muted);
    border-color: var(--pg-border);
    color: var(--pg-text);
}

[data-theme="dark"] .page .card-body {
    color: var(--pg-text);
}

[data-theme="dark"] .page .card-title,
[data-theme="dark"] .page .card-subtitle {
    color: var(--pg-text-strong);
}

/* ── Plan / pricing tier cards ───────────────────────────────
   The /plan page paints tier cards with a hard-coded white bg
   and dark text - completely unreadable on dark. These class
   names come from the page itself; ratchet them all to dark
   surfaces so the "Pro" label, the feature checklist, and the
   "Switch to" buttons all have the right contrast. */
[data-theme="dark"] .page .plan-card,
[data-theme="dark"] .page .tier-card,
[data-theme="dark"] .page .pg-tier,
[data-theme="dark"] .page .pricing-card,
[data-theme="dark"] .page [class*="plan-summary"],
[data-theme="dark"] .page [class*="plan-features"],
[data-theme="dark"] .page [class*="success-fee"] {
    background-color: var(--pg-panel) !important;
    border-color: var(--pg-border-strong) !important;
    color: var(--pg-text) !important;
}

[data-theme="dark"] .page .plan-card h2,
[data-theme="dark"] .page .plan-card h3,
[data-theme="dark"] .page .tier-card h2,
[data-theme="dark"] .page .tier-card h3 {
    color: var(--pg-text-strong) !important;
}

/* Generic "anything that hard-coded a white-ish background and
   a dark text colour" backstop. Catches the email-templates
   style/saved-set panels, the automations cards, the stripe-
   connection sidebar info card, etc. without us needing to
   enumerate every class. Targets descendants of .page that
   inline-styled themselves white. */
[data-theme="dark"] .page [style*="background: #fff"],
[data-theme="dark"] .page [style*="background:#fff"],
[data-theme="dark"] .page [style*="background-color: #fff"],
[data-theme="dark"] .page [style*="background-color:#fff"] {
    background-color: var(--pg-panel) !important;
    color: var(--pg-text) !important;
}

/* ── Tables (workspace + admin) ─────────────────────────────
   Table cells inherit color but hyperlinks and value cells
   sometimes hard-code dark text. Backstop so nothing in a
   table is invisible on dark. */
[data-theme="dark"] .page .table,
[data-theme="dark"] .page .table th,
[data-theme="dark"] .page .table td {
    color: var(--pg-text);
    border-color: var(--pg-border-subtle);
}

[data-theme="dark"] .page .table thead th {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--pg-muted-strong);
}

[data-theme="dark"] .page table th {
    background: var(--pg-panel-muted) !important;
    color: var(--pg-text-strong) !important;
}

/* ── Modals, alerts, dropdowns ──────────────────────────────
   Bootstrap modal/alert/dropdown defaults are light surfaces
   that look broken on dark. Fix the surface, leave the variant
   colours (alert-warning yellow, alert-danger red) since those
   already read on dark. */
[data-theme="dark"] .page .modal-content,
[data-theme="dark"] .page .dropdown-menu {
    background-color: var(--pg-panel);
    border-color: var(--pg-border);
    color: var(--pg-text);
}

[data-theme="dark"] .page .modal-content .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.88;
}

[data-theme="dark"] .page .modal-content .btn-close:hover,
[data-theme="dark"] .page .modal-content .btn-close:focus {
    opacity: 1;
}

[data-theme="dark"] .page .modal-content .btn-close:focus {
    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.35);
}

[data-theme="dark"] .page .email-studio-preview-modal .modal-header {
    border-color: rgba(148, 163, 184, 0.3);
}

[data-theme="dark"] .page .email-studio-preview-modal .email-studio-preview-close {
    filter: invert(1) grayscale(100%) brightness(230%);
    opacity: 0.96;
}

[data-theme="dark"] .page .email-studio-preview-modal .email-studio-preview-subject {
    color: #cbd5e1;
}

[data-theme="dark"] .page .email-studio-preview-modal .email-studio-preview-shell,
[data-theme="dark"] .page .email-studio-preview-modal .email-studio-preview-toolbar {
    color-scheme: light;
}

[data-theme="dark"] .page .email-studio-preview-modal .email-studio-preview-label {
    color: #334155;
}

[data-theme="dark"] .page .email-studio-preview-modal .email-studio-preview-note {
    color: #475569;
}

[data-theme="dark"] .page .alert {
    border-color: var(--pg-border);
}

/* ── Misc text-on-dark fallbacks ────────────────────────────
   Anything reading text-muted in dark should pick up the muted
   variable, not Bootstrap's #6c757d which is too dim against
   dark teal. */
[data-theme="dark"] .page .text-muted,
[data-theme="dark"] .page small.text-muted {
    color: var(--pg-muted) !important;
}

[data-theme="dark"] .page .text-dark {
    color: var(--pg-text) !important;
}

/* ── Workspace-level inline white surfaces ──────────────────
   The `workspace-toolbar` is already token-driven; the form
   selects inside it inherit the form-select rule above. But
   the toolbar's own copy text needs to be readable on the
   token-driven translucent bg. */
[data-theme="dark"] .page .workspace-toolbar-copy strong {
    color: var(--pg-text-strong);
}

/* Bootstrap paints every td/th in `.table` with
   `background-color: var(--bs-table-bg)` and `--bs-table-bg`
   defaults to white. Overriding the variable would be cleaner
   but turned out to be unreliable when chained with Bootstrap's
   `--bs-table-bg-state` / `--bs-table-bg-type` lookups, so we
   force-paint transparent on the cell selector Bootstrap itself
   uses. Same outcome, no variable plumbing required. The hover
   highlight rule below adds a subtle teal glow on row hover for
   the `.table-hover` variant. */
[data-theme="dark"] .page .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--pg-text);
    border-color: var(--pg-border-subtle);
}

[data-theme="dark"] .page .table-hover > tbody > tr:hover > * {
    background-color: rgba(52, 211, 153, 0.06);
    color: var(--pg-text-strong);
}

[data-theme="dark"] .page .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Legacy `.card, .table-responsive, .auth-card { background: rgba(255,
   255, 255, 0.9); }` rule (line ~1740) paints a 90 %-white wrapper
   under tables and cards. Cells with transparent backgrounds let the
   white bleed through, and light-text-on-white = invisible - that's
   why the dashboard table customer names and amounts rendered as
   ghosts despite the per-cell color being WCAG-AAA on dark.

   Wipe the wrapper paint in dark mode so the workspace-panel's dark
   translucent bg becomes the actual visible surface. (Reported
   2026-04-25 - third attempt at fixing the same root cause; the
   first two assumed Bootstrap's --bs-table-bg was the culprit.) */
[data-theme="dark"] .page .table-responsive,
[data-theme="dark"] .page .auth-card {
    background: transparent;
    border-color: var(--pg-border);
    box-shadow: none;
}

/* ── Email Studio (/email-templates) ─────────────────────────
   The email-templates page uses its own `.email-studio-*`
   namespace. Several classes hard-code dark text on light bg
   for the "preview the email how the customer will see it"
   aesthetic - appropriate for the email body itself, broken
   for the chrome (day stepper, page header, subject line,
   editor card frame).

   Strategy:
     • Step buttons + style/saved cards + outer editor card →
       dark surfaces with light text in dark mode
     • The TinyMCE iframe that renders the actual email body
       has its own internal stylesheet so the preview INSIDE
       the editor still shows the email-as-customer-sees-it
       white-on-white aesthetic - that's intentional and we
       deliberately don't touch it. */
[data-theme="dark"] .page .email-studio-step {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--pg-text);
}

[data-theme="dark"] .page .email-studio-step:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(52, 211, 153, 0.3);
}

/* The light-theme rules paint these states with a cream
   `linear-gradient(...)` on background-image. Browsers
   canonicalize `background: <color>` shorthand to just
   `background-color` long-hand and DON'T propagate the implied
   `background-image: initial` to the long-hand storage - so the
   light gradient kept winning the long-hand cascade despite my
   higher specificity selector. Set `background-image: none`
   explicitly so the cascade resolves correctly. */
[data-theme="dark"] .page .email-studio-step.is-active {
    background-color: rgba(52, 211, 153, 0.08);
    background-image: none;
    border-color: rgba(52, 211, 153, 0.55);
    color: var(--pg-text-strong);
}

[data-theme="dark"] .page .email-studio-step.is-dirty:not(.is-active) {
    background-color: rgba(251, 191, 36, 0.08);
    background-image: none;
    border-color: rgba(251, 191, 36, 0.30);
    color: var(--pg-text);
}

[data-theme="dark"] .page .email-studio-step.is-staged:not(.is-active):not(.is-dirty) {
    background-color: rgba(96, 165, 250, 0.08);
    background-image: none;
    border-color: rgba(96, 165, 250, 0.25);
    color: var(--pg-text);
}

[data-theme="dark"] .page .email-studio-step-day {
    color: var(--pg-muted);
}

[data-theme="dark"] .page .email-studio-step-title,
[data-theme="dark"] .page .email-studio-step.is-active .email-studio-step-title {
    color: var(--pg-text);
}

[data-theme="dark"] .page .email-studio-editor-card {
    background-color: var(--pg-panel-translucent);
    border-color: var(--pg-border-strong);
    color: var(--pg-text);
}

/* Style-set + Saved-sets cards live nested inside `.email-studio-toolbar`,
   which already has its own dark-mode background. Layering another panel
   bg + border on top produced the "weird dark rectangles" on the email-
   templates page (feedback 2026-04-29) - the inner cards stood out as
   filled boxes inside the also-filled toolbar. Light mode never set an
   inner bg/border on these (see `.email-studio-style-card` base rule);
   matching that behaviour in dark mode keeps the two cards visually
   delineated by spacing + the head/foot rhythm alone. The text-color
   override stays. */
[data-theme="dark"] .page .email-studio-style-card,
[data-theme="dark"] .page .email-studio-saved-card {
    background-color: transparent;
    border-color: transparent;
    color: var(--pg-text);
}

[data-theme="dark"] .page .email-studio-card-head,
[data-theme="dark"] .page .email-studio-card-foot {
    color: var(--pg-text);
    border-color: var(--pg-border-subtle);
}

[data-theme="dark"] .page .email-studio-card-desc,
[data-theme="dark"] .page .email-studio-card-meta {
    color: var(--pg-muted);
}

[data-theme="dark"] .page .email-studio-account-picker .form-label {
    color: var(--pg-muted-strong);
}

[data-theme="dark"] .page .stripe-account-add-panel {
    background-color: var(--pg-panel-translucent);
    border-color: var(--pg-border-strong);
    color: var(--pg-text);
}

[data-theme="dark"] .page .stripe-empty-state {
    color: var(--pg-text);
}

[data-theme="dark"] .page .stripe-account-action-note {
    color: var(--pg-muted);
}

[data-theme="dark"] .page .stripe-manual-key-panel {
    border-color: var(--pg-border);
}

[data-theme="dark"] .page .stripe-manual-key-panel > summary {
    color: var(--pg-muted-strong);
}

[data-theme="dark"] .page .email-studio-style-select {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--pg-text);
}

[data-theme="dark"] .page .email-studio-toolbar {
    background-color: var(--pg-panel-muted);
    border-color: var(--pg-border);
    color: var(--pg-text);
}

/* The Visual/HTML/Preview tab pills inside the editor head */
[data-theme="dark"] .page .email-studio-editor-head .nav-pills .nav-link,
[data-theme="dark"] .page .email-studio-tabs .tab,
[data-theme="dark"] .page [class*="email-studio"] .btn-link {
    color: var(--pg-text);
}

/* ── Stripe Connection sidebar info card ───────────────────
   The "What PayDam uses access for" sidebar uses
   `.connect-side-note` with a hard-coded light translucent bg
   (`rgba(255, 255, 255, 0.72)`). It's the only major Stripe-
   connection element that doesn't pick up the dark theme. */
[data-theme="dark"] .page .connect-side-note {
    background-color: var(--pg-panel-translucent);
    border-color: var(--pg-border-strong);
    color: var(--pg-text);
}

[data-theme="dark"] .page .connect-side-note h3 {
    color: var(--pg-text-strong);
}

[data-theme="dark"] .page .connect-side-note ul {
    color: var(--pg-text);
}

[data-theme="dark"] .page .connect-side-note li + li {
    border-color: var(--pg-border-subtle);
}

/* ── Settings - recovery schedule timeline ──────────────────
   The cream "Stripe handles charge retries" banner inside the
   Recovery Schedule card stays light (it's a callout - light
   variants of warning banners read fine on dark). The day
   labels are already light text via the cascade - the bg
   underneath is the panel, which is dark. No further fix
   needed beyond what's already in place; flagged here for
   future-readers so this doesn't get "fixed" twice. */

.admin-error-row-head .err-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    color: #0e5a55;
}

.admin-error-row-head .err-type {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: #6b7a8c;
}

.admin-error-row-msg {
    font-size: 0.9rem;
    color: #172033;
    margin-bottom: 0.4rem;
    word-break: break-word;
}

.admin-error-row details summary {
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: #137b74;
}

.admin-error-row pre {
    margin-top: 0.5rem;
    padding: 0.7rem 0.85rem;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.74rem;
    line-height: 1.5;
    border-radius: 8px;
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Recently-reviewed testimonial rows on /admin/testimonials. One card
   per row rather than the old narrow <table> so the quote can breathe
   and the action buttons have somewhere to live. */
.admin-review-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.admin-review-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.45rem 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(194, 204, 214, 0.62);
    border-radius: 14px;
    background: #fff;
}

.admin-review-row-quote {
    grid-column: 1;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #172033;
}

.admin-review-row-meta {
    grid-column: 1;
    font-size: 0.82rem;
    color: #3b4b5f;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
}

.admin-review-row-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 140px;
}

@media (max-width: 640px) {
    .admin-review-row {
        grid-template-columns: 1fr;
    }
    .admin-review-row-actions {
        grid-column: 1;
        grid-row: auto;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Compact stat tiles for the admin-side "recovery snapshot" on
   /admin/tenants/{id}. Visually quieter than the tenant-facing
   .stat-card on /dashboard - this is a read-only admin surface,
   not the operational dashboard. */

.admin-tenant-stat {
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(194, 204, 214, 0.55);
    border-left-width: 4px;
    border-radius: 10px;
    background: rgba(246, 249, 252, 0.6);
}

.admin-tenant-stat-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: #172033;
    letter-spacing: 0;
    line-height: 1.2;
}

.admin-tenant-stat-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7a8c;
    margin-top: 0.25rem;
}

.admin-tenant-stat-count {
    font-size: 0.72rem;
    color: #6b7a8c;
    margin-top: 0.1rem;
}

.admin-tenant-stat--recovered  { border-left-color: #137b74; }
.admin-tenant-stat--recovering { border-left-color: #b08400; }
.admin-tenant-stat--open       { border-left-color: #2a4670; }
.admin-tenant-stat--lost       { border-left-color: #8a1f1f; }

/* ── <PayDamLoader /> branded loading indicator ──────────────
   See PayDamLoader.razor. The PAYDAM wordmark sits static in the
   centre; the two teal arrow glyphs rotate around it. Uses the
   real brand PNGs (/loader-arrows.png + /loader-wordmark.png) so
   it reads as an on-brand moment rather than a generic spinner. */

.paydam-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    color: #1e3a8a;
}

.paydam-loader--block {
    flex-direction: column;
    padding: 1.8rem 1rem;
    width: 100%;
}

.paydam-loader--inline {
    flex-direction: row;
    padding: 0;
}

.paydam-loader-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* Square container - the arrows PNG is a circular glyph and
       needs equal width/height to rotate without visual jitter. */
    aspect-ratio: 1 / 1;
}

.paydam-loader--block .paydam-loader-ring {
    width: 128px;
    height: 128px;
}

.paydam-loader--inline .paydam-loader-ring {
    width: 44px;
    height: 44px;
}

.paydam-loader-arrows {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: paydam-loader-spin 1.4s linear infinite;
    transform-origin: 50% 50%;
    /* GPU compositing - keeps the spin at a smooth 60fps even when the
       page is busy hydrating components alongside the loader. */
    will-change: transform;
    /* Never break to new line or distort; keep the circular motion
       pixel-perfect. */
    display: block;
}

/* The loader is mounted/unmounted by Blazor when content finishes
   loading. Without a fade-in, it pops onto the page abruptly - fade
   in over 240ms so it feels like a graceful hand-off into the
   spinning state. */
.paydam-loader {
    animation: paydam-loader-fade-in 240ms ease-out both;
}

@keyframes paydam-loader-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.paydam-loader-wordmark {
    position: relative;
    display: block;
    object-fit: contain;
    /* Sized to sit cleanly inside the arrows' inner clearing - the
       arrow PNG's circle diameter is ~88% of its bounding box, and
       the wordmark is ~50% of the ring width so it clears the
       arrows' inner edge with breathing room. */
    z-index: 1;
}

.paydam-loader--block .paydam-loader-wordmark {
    width: 58%;
    height: auto;
    max-height: 30%;
}

.paydam-loader--inline .paydam-loader-wordmark {
    width: 60%;
    height: auto;
    max-height: 34%;
}

.paydam-loader-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #6b7a8c;
    letter-spacing: 0.02em;
}

.paydam-loader--block .paydam-loader-label {
    margin-top: 0.25rem;
    font-size: 0.85rem;
}

@keyframes paydam-loader-spin {
    /* Rotates COUNTER-clockwise so the motion tracks the arrowheads in
       loader-arrows.png - the glyph's top arrow points left and the
       bottom arrow points right, which is a counter-clockwise loop.
       Rotating clockwise read as "fighting the glyph." */
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
    /* Keep a slow rotation so the activity signal isn't lost, but
       dial the cadence way down so vestibular-sensitive users
       aren't bothered. */
    .paydam-loader-arrows {
        animation-duration: 4s;
    }

    .paydam-loader,
    .page-shell.pg-page-enter,
    .public-shell.pg-page-enter,
    .pay-shell.pg-page-enter {
        animation: none !important;
    }
}

/* ── Page transition fade-in ────────────────────────────────
   Driven by the `PgPageEnter` JS hook in App.razor - fires on
   `DOMContentLoaded` (first load) and `enhancedload` (every
   subsequent Blazor enhanced navigation). The class is removed +
   re-added with a forced reflow each time, so the animation
   replays even though the layout's shell element doesn't unmount.

   **Pure opacity fade - no transform.** A non-`none` transform on
   `.page-shell` (even `translateY(0)`) makes the shell a containing
   block for any `position: fixed`/iframe descendant. That breaks:
     - the invoice detail offcanvas + backdrop in `Home.razor`,
       which would anchor to the shell instead of the viewport;
     - the TinyMCE iframe on `/email-templates`, which calculates
       its dimensions on init via `getBoundingClientRect()` and
       gets warped values during the 240ms animation window -
       leaving a blank, undersized iframe even after the transform
       clears.
   Opacity-only sidesteps both classes of bug while still feeling
   smooth. The earlier 6px translateY slide added minimal polish
   for outsized cost. */
.page-shell.pg-page-enter,
.public-shell.pg-page-enter,
.pay-shell.pg-page-enter {
    animation: pg-page-enter 220ms ease-out;
}

@keyframes pg-page-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -----------------------------------------------------------------
   Dashboard dark polish
   Mirrors the landing-page product preview while keeping the real
   controls, filters, table, and detail drawer interactive.
   ----------------------------------------------------------------- */

body:has(.dashboard-surface) {
    background: #07111f;
    color: #dce8f5;
}

body:has(.dashboard-surface) main.app-main {
    background:
        radial-gradient(circle at 78% 12%, rgba(19, 123, 116, 0.28), transparent 30%),
        radial-gradient(circle at 20% 55%, rgba(48, 92, 135, 0.18), transparent 28%),
        linear-gradient(135deg, #07111f 0%, #0d2431 42%, #0f665f 100%);
}

body:has(.dashboard-surface) .top-row {
    background: rgba(7, 17, 31, 0.72);
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

body:has(.dashboard-surface) .top-row-account {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(148, 163, 184, 0.26);
    color: #e6f3f4;
    box-shadow: none;
}

body:has(.dashboard-surface) .top-row-account:hover,
body:has(.dashboard-surface) .top-row-account[aria-expanded="true"] {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(94, 234, 212, 0.32);
}

body:has(.dashboard-surface) .top-row-account-dropdown {
    background: #0f172a;
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.34);
}

body:has(.dashboard-surface) .top-row-account-item {
    color: #dce8f5;
}

body:has(.dashboard-surface) .top-row-account-item svg,
body:has(.dashboard-surface) .top-row-account-chevron {
    color: #8ba5b8;
}

body:has(.dashboard-surface) .top-row-account-item:hover {
    background: rgba(20, 184, 166, 0.12);
    color: #e6fffb;
}

body:has(.dashboard-surface) .top-row-account-divider {
    background: rgba(148, 163, 184, 0.18);
}

body:has(.dashboard-surface) article.content {
    padding: 1.5rem 1.65rem 3rem;
}

.dashboard-surface {
    width: min(100%, 1180px);
    margin: 0 auto;
    color: #e2edf5;
}

.dashboard-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.2rem 0 1.35rem;
}

.dashboard-hero-copy {
    max-width: 720px;
}

.dashboard-hero-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #4ade80;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.12);
}

.dashboard-hero-title {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(2rem, 3.2vw, 3.35rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.04;
}

.dashboard-hero-subtitle {
    max-width: 680px;
    margin: 0.72rem 0 0;
    color: rgba(226, 237, 245, 0.68);
    font-size: 1rem;
    line-height: 1.68;
}

.dashboard-hero-inline-meta {
    display: inline-block;
    margin-left: 0.55rem;
    color: rgba(226, 237, 245, 0.78);
}

.dashboard-hero-inline-meta strong {
    color: #f8fafc;
    font-weight: 800;
}

.dashboard-window-title {
    display: block;
    color: rgba(148, 163, 184, 0.86);
    font-family: 'IBM Plex Mono', Consolas, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-window {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: #1e293b;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.38);
}

.dashboard-window-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.74rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: #0f172a;
}

.dashboard-window-dots {
    display: inline-flex;
    gap: 0.42rem;
    flex: 0 0 auto;
}

.dashboard-window-dots span {
    width: 12px;
    height: 12px;
    border-radius: 999px;
}

.dashboard-window-title {
    flex: 1;
    text-transform: none;
    letter-spacing: 0;
}

.dashboard-window-live {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.24rem 0.58rem;
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.1);
    color: #86efac;
    font-size: 0.74rem;
    font-weight: 800;
}

.dashboard-window-live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #22c55e;
}

.dashboard-window-body {
    padding: 1.2rem;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.11), transparent 24%),
        linear-gradient(180deg, #172638 0%, #0f1d2d 100%);
}

.dashboard-surface .dashboard-toolbar,
.dashboard-surface .workspace-panel,
.dashboard-surface .recovery-banner,
.dashboard-surface .dashboard-listening {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.76);
    box-shadow: none;
}

.dashboard-surface .dashboard-toolbar {
    align-items: center;
    padding: 0.95rem 1rem;
    border-radius: 12px;
}

.dashboard-surface .workspace-toolbar-copy strong,
.dashboard-surface .workspace-panel-heading h5,
.dashboard-surface .dashboard-listening .fw-semibold {
    color: #f8fafc;
}

.dashboard-surface .text-muted,
.dashboard-surface .small.text-muted {
    color: #8fa2b7 !important;
}

.dashboard-surface .dashboard-refresh-stamp {
    color: #9eb0c3;
}

.dashboard-surface .dashboard-date-error {
    color: #fda4af;
}

.dashboard-surface .form-select,
.dashboard-surface .form-control {
    min-height: 40px;
    border-color: rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    background-color: rgba(15, 23, 42, 0.9);
    color: #e2edf5;
    box-shadow: none;
}

.dashboard-surface .form-select:focus,
.dashboard-surface .form-control:focus {
    border-color: rgba(94, 234, 212, 0.48);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
}

.dashboard-surface .btn {
    min-height: 40px;
    border-radius: 10px;
}

.dashboard-surface .btn-outline-secondary,
.dashboard-surface .btn-outline-primary {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.76);
    color: #dce8f5;
}

.dashboard-surface .btn-outline-secondary:hover,
.dashboard-surface .btn-outline-primary:hover {
    border-color: rgba(94, 234, 212, 0.34);
    background: rgba(20, 184, 166, 0.12);
    color: #f8fafc;
}

.dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.78rem;
}

.dashboard-secondary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.78rem;
}

.dashboard-stat-grid > [class*="col-"],
.dashboard-secondary-grid > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
}

.dashboard-surface .stat-card {
    min-height: 106px;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-left-width: 3px;
    border-radius: 10px;
    background: #0f172a;
    box-shadow: none;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.dashboard-surface .stat-card::before {
    display: none;
}

.dashboard-surface .stat-card:hover {
    transform: translateY(-1px);
    border-color: rgba(226, 237, 245, 0.24);
    background: #111d2f;
    box-shadow: none;
}

.dashboard-surface .stat-card-active {
    border-color: rgba(94, 234, 212, 0.52);
    box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.14);
}

.dashboard-surface .stat-card-recovered { border-left-color: #22c55e; }
.dashboard-surface .stat-card-recovering { border-left-color: #f59e0b; }
.dashboard-surface .stat-card-open { border-left-color: #3b82f6; }
.dashboard-surface .stat-card-lost { border-left-color: #ef4444; }
.dashboard-surface .stat-card-paused { border-left-color: #8b5cf6; }

.dashboard-surface .stat-amount,
.dashboard-surface .stat-card-recovered .stat-amount,
.dashboard-surface .stat-card-recovering .stat-amount,
.dashboard-surface .stat-card-open .stat-amount,
.dashboard-surface .stat-card-lost .stat-amount,
.dashboard-surface .stat-card-paused .stat-amount {
    margin: 0.12rem 0 0.18rem;
    color: #f8fafc;
    font-size: clamp(1.35rem, 2vw, 1.86rem);
    font-weight: 800;
    letter-spacing: 0;
}

.dashboard-surface .stat-label {
    margin: 0 0 0.12rem;
    color: #9fb0c5;
    font-family: 'IBM Plex Mono', Consolas, monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.dashboard-surface .stat-count {
    color: #7f91a7;
    font-size: 0.76rem;
}

.dashboard-surface .dashboard-secondary-grid .stat-card {
    min-height: 82px;
    min-width: min(100%, 260px);
}

.dashboard-surface .recovery-banner {
    border-color: rgba(34, 197, 94, 0.2);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.13), rgba(34, 197, 94, 0.08));
    color: #dffcf5;
}

.dashboard-surface .workspace-panel {
    overflow: hidden;
    border-radius: 12px;
}

.dashboard-surface .workspace-panel-body {
    padding: 1rem;
}

.dashboard-surface .workspace-panel-heading {
    margin-bottom: 0.85rem;
}

.dashboard-surface .table-responsive {
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
}

.dashboard-surface .table {
    --bs-table-bg: transparent;
    --bs-table-color: #dce8f5;
    --bs-table-hover-bg: rgba(20, 184, 166, 0.08);
    --bs-table-hover-color: #f8fafc;
    color: #dce8f5;
}

.dashboard-surface .table thead th,
.dashboard-surface .table thead.table-light th,
.dashboard-surface .table .table-light th {
    padding: 0.82rem 0.95rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: #111f31;
    color: #9fb0c5;
    font-family: 'IBM Plex Mono', Consolas, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.dashboard-surface .table tbody td {
    padding: 0.8rem 0.95rem;
    border-color: rgba(148, 163, 184, 0.12);
}

.dashboard-surface .table tbody tr {
    transition: background 0.14s ease;
}

.dashboard-surface .table tbody tr:last-child td {
    border-bottom: 0;
}

.dashboard-surface .font-monospace {
    color: #c9d8e8;
}

.dashboard-surface .badge.bg-success {
    background: rgba(34, 197, 94, 0.16) !important;
    color: #86efac !important;
}

.dashboard-surface .badge.bg-warning {
    background: rgba(245, 158, 11, 0.17) !important;
    color: #fcd34d !important;
}

.dashboard-surface .badge.bg-danger {
    background: rgba(239, 68, 68, 0.16) !important;
    color: #fca5a5 !important;
}

.dashboard-surface .badge.bg-secondary {
    background: rgba(148, 163, 184, 0.16) !important;
    color: #cbd5e1 !important;
}

.dashboard-surface .text-success {
    color: #86efac !important;
}

.dashboard-surface .dashboard-listening {
    border-radius: 10px;
}

body:has(.dashboard-surface) .cookie-banner {
    right: 1rem;
    bottom: 1rem;
    left: auto;
    max-width: min(440px, calc(100vw - 2rem));
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0.72rem 0.8rem 0.72rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.94);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
}

body:has(.dashboard-surface) .cookie-banner p {
    flex: 1 1 auto;
    line-height: 1.35;
}

body:has(.dashboard-surface) .cookie-banner-btn {
    flex: 0 0 auto;
}

body:has(.dashboard-surface) .offcanvas {
    background: #0f172a;
    color: #e2edf5;
    border-left: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.42);
}

body:has(.dashboard-surface) .offcanvas-header {
    border-bottom-color: rgba(148, 163, 184, 0.18) !important;
}

body:has(.dashboard-surface) .offcanvas-title,
body:has(.dashboard-surface) .offcanvas h5,
body:has(.dashboard-surface) .offcanvas h6,
body:has(.dashboard-surface) .offcanvas dd {
    color: #f8fafc;
}

body:has(.dashboard-surface) .offcanvas .text-muted {
    color: #8fa2b7 !important;
}

body:has(.dashboard-surface) .offcanvas a {
    color: #7dd3fc;
}

body:has(.dashboard-surface) .offcanvas hr {
    border-color: rgba(148, 163, 184, 0.18);
    opacity: 1;
}

body:has(.dashboard-surface) .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.8;
}

body:has(.dashboard-surface) .timeline-marker {
    box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.8);
}

@media (max-width: 1100px) {
    .dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    body:has(.dashboard-surface) article.content {
        padding: 1rem 0.75rem 2.5rem;
    }

    .dashboard-hero {
        padding-top: 0.6rem;
    }

    .dashboard-window-body {
        padding: 0.85rem;
    }

    .dashboard-surface .dashboard-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-surface .workspace-toolbar-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .dashboard-surface .workspace-toolbar-group > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Failed-invoices table → compact cards on mobile.
       The default `<table>` inside `.table-responsive` only scrolls
       horizontally, so the Amount column gets clipped. Below ~768px,
       each row becomes a 2-column CSS Grid card:

           [ Customer name + email ]      [ Amount     ]
           [ #INV-… · subscription      |  Failed      ]
           [ Status badge               |  Recovered   ]
           [ - - - -                    |  View →      ]

       The View button stays as the keyboard/AT activation target
       on both viewports - making the row itself a `role=button`
       would nest interactive controls and double the tab stops. */
    .failed-invoices-table-wrapper {
        overflow-x: visible;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .failed-invoices-table,
    .failed-invoices-table tbody {
        display: block;
        width: 100%;
    }

    .failed-invoices-table thead {
        display: none;
    }

    .dashboard-surface .failed-invoices-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "customer amount"
            "invoice  failed"
            "status   recovered"
            ".        action";
        column-gap: 0.85rem;
        row-gap: 0.3rem;
        margin-bottom: 0.6rem;
        padding: 0.7rem 0.85rem;
        border: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 12px;
        background: rgba(17, 31, 49, 0.55);
    }

    .dashboard-surface .failed-invoices-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .dashboard-surface .failed-invoices-table tbody td {
        display: block;
        padding: 0;
        border: 0;
        text-align: left;
    }

    /* Each cell's role is conveyed by position + typography, so
       suppress the verbose ::before column labels. */
    .failed-invoices-table tbody td[data-label]::before {
        content: none;
    }

    .failed-invoices-table tbody td.fi-customer { grid-area: customer; min-width: 0; }
    .failed-invoices-table tbody td.fi-invoice  { grid-area: invoice;  min-width: 0; }
    .failed-invoices-table tbody td.fi-status   { grid-area: status;   min-width: 0; align-self: center; }

    .dashboard-surface .failed-invoices-table tbody td.fi-amount {
        grid-area: amount;
        align-self: start;
        text-align: right !important;       /* override Bootstrap .text-end utility cleanly */
        font-size: 1rem;
        white-space: nowrap;
    }

    .dashboard-surface .failed-invoices-table tbody td.fi-failed,
    .dashboard-surface .failed-invoices-table tbody td.fi-recovered {
        text-align: right;
        align-self: center;
        font-size: 0.75rem;
    }

    .failed-invoices-table tbody td.fi-failed     { grid-area: failed; }
    .failed-invoices-table tbody td.fi-recovered  { grid-area: recovered; }

    .failed-invoices-table tbody td.failed-invoices-action-cell {
        grid-area: action;
        justify-self: end;
        margin-top: 0.15rem;
    }

    .failed-invoices-table tbody td.failed-invoices-action-cell .btn {
        padding: 0.25rem 0.7rem;
        font-size: 0.78rem;
    }
}

/* Pager - used on both mobile and desktop. */
.failed-invoices-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    font-size: 0.85rem;
}

.dashboard-surface .failed-invoices-pager-summary {
    color: var(--pg-muted);
}

.failed-invoices-pager-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-surface .failed-invoices-pager-page {
    color: var(--pg-muted);
    font-variant-numeric: tabular-nums;
    min-width: 8.5ch;
    text-align: center;
}

@media (max-width: 480px) {
    .failed-invoices-pager {
        justify-content: center;
        text-align: center;
    }

    .failed-invoices-pager-summary {
        flex: 1 1 100%;
    }
}

@media (max-width: 560px) {
    .dashboard-stat-grid,
    .dashboard-surface .workspace-toolbar-group {
        grid-template-columns: 1fr;
    }

    .dashboard-window {
        border-radius: 12px;
    }

    .dashboard-window-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-window-live {
        display: none;
    }

    .dashboard-surface .recovery-banner {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 0.35rem !important;
    }

    body:has(.dashboard-surface) .cookie-banner {
        right: 0.65rem;
        bottom: 0.65rem;
        left: 0.65rem;
        max-width: none;
        padding: 0.58rem 0.62rem 0.58rem 0.72rem;
        font-size: 0.72rem;
    }
}

/* -----------------------------------------------------------------
   Theme system repair and app polish
   Keeps the dashboard polish, but makes it honor the selected theme.
   Also tightens the shared authenticated app chrome so non-dashboard
   pages do not feel like patched Bootstrap.
   ----------------------------------------------------------------- */

:root {
    --pg-surface: #f6f8fb;
    --pg-panel: #ffffff;
    --pg-panel-muted: #f2f5f8;
    --pg-panel-translucent: rgba(255, 255, 255, 0.88);
    --pg-elev-soft: rgba(255, 255, 255, 0.78);
    --pg-border: #d7e2ea;
    --pg-border-strong: #c7d3dd;
    --pg-border-subtle: rgba(155, 172, 188, 0.28);
    --pg-text: #172033;
    --pg-text-strong: #0b1422;
    --pg-muted: #5c687a;
    --pg-muted-strong: #3d4b5d;
    --pg-topbar-bg: rgba(246, 248, 251, 0.88);
    --pg-topbar-border: rgba(199, 211, 221, 0.78);
    --pg-shadow-card: 0 14px 34px rgba(15, 27, 44, 0.07);
    --pg-shadow-card-hover: 0 18px 42px rgba(15, 27, 44, 0.11);
}

[data-theme="dark"] .page {
    --pg-surface: #08131c;
    --pg-panel: #0f1a24;
    --pg-panel-muted: #132231;
    --pg-panel-translucent: rgba(15, 26, 36, 0.78);
    --pg-elev-soft: rgba(255, 255, 255, 0.05);
    --pg-border: rgba(148, 163, 184, 0.15);
    --pg-border-strong: rgba(148, 163, 184, 0.22);
    --pg-border-subtle: rgba(148, 163, 184, 0.12);
    --pg-text: #dce8f5;
    --pg-text-strong: #f8fafc;
    --pg-muted: #91a3b8;
    --pg-muted-strong: #b7c5d6;
    --pg-topbar-bg: rgba(8, 19, 28, 0.82);
    --pg-topbar-border: rgba(148, 163, 184, 0.14);
    --pg-shadow-card: 0 18px 40px rgba(0, 0, 0, 0.28);
    --pg-shadow-card-hover: 0 22px 48px rgba(0, 0, 0, 0.36);
    background:
        radial-gradient(circle at 88% 8%, rgba(19, 123, 116, 0.18), transparent 28%),
        radial-gradient(circle at 8% 72%, rgba(37, 99, 235, 0.10), transparent 26%),
        var(--pg-surface);
}

.page {
    background:
        radial-gradient(circle at 90% 10%, rgba(19, 123, 116, 0.06), transparent 30%),
        var(--pg-surface);
}

.page-shell {
    width: min(100%, 1280px);
    margin: 0 auto;
}

.card,
.workspace-panel,
.workspace-toolbar,
.table-responsive,
.auth-card {
    border-radius: 12px;
    border-color: var(--pg-border);
    background: var(--pg-panel-translucent);
    box-shadow: var(--pg-shadow-card);
}

.workspace-toolbar,
.workspace-panel-body,
.card-body {
    padding: 1rem;
}

.btn,
.btn-sm,
.form-control,
.form-select {
    border-radius: 10px;
}

.btn {
    letter-spacing: 0;
}

.top-row-account,
.top-row-theme-toggle {
    box-shadow: none;
}

.page-intro {
    margin-bottom: 1.2rem;
}

.page-intro-title {
    color: var(--pg-text-strong);
}

.page-intro-subtitle {
    color: var(--pg-muted);
}

[data-theme="dark"] .page .workspace-toolbar,
[data-theme="dark"] .page .workspace-panel,
[data-theme="dark"] .page .card,
[data-theme="dark"] .page .table-responsive,
[data-theme="dark"] .page .auth-card {
    background: var(--pg-panel-translucent);
    border-color: var(--pg-border);
    box-shadow: var(--pg-shadow-card);
}

[data-theme="dark"] .page .table thead th,
[data-theme="dark"] .page .table thead.table-light th,
[data-theme="dark"] .page .table .table-light th {
    background: var(--pg-panel-muted);
    color: var(--pg-muted-strong);
}

[data-theme="dark"] .page .dropdown-menu,
[data-theme="dark"] .page .top-row-account-dropdown {
    background: #0f1a24;
    border-color: var(--pg-border-strong);
}

[data-theme="dark"] .page .form-label {
    color: var(--pg-muted-strong);
}

[data-theme="dark"] .page .badge.bg-primary-subtle,
[data-theme="dark"] .page .badge.text-bg-primary {
    background-color: rgba(96, 165, 250, 0.16) !important;
    color: #bfdbfe !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
}

[data-theme="dark"] .page code:not(pre code) {
    color: #f0abfc;
}

[data-theme="dark"] .page a:not(.btn):not(.nav-link):not(.sidebar-brand):not(.sidebar-subnav-link),
[data-theme="dark"] .page .btn-link,
[data-theme="dark"] .page .text-primary {
    color: #7dd3fc !important;
}

[data-theme="dark"] .page .text-success {
    color: var(--accent-recovered) !important;
}

[data-theme="dark"] .page .text-danger {
    color: #fca5a5 !important;
}

[data-theme="dark"] .page .badge.bg-warning.text-dark,
[data-theme="dark"] .page .badge.text-bg-warning {
    color: #422006 !important;
}

[data-theme="dark"] .page .badge.bg-success-subtle.text-success {
    background-color: rgba(34, 197, 94, 0.16) !important;
    border-color: rgba(34, 197, 94, 0.24) !important;
    color: #86efac !important;
}

[data-theme="dark"] .page .timeline-time {
    color: var(--pg-muted-strong);
}

[data-theme="light"] .page code:not(pre code) {
    color: #a21caf;
}

[data-theme="light"] .page .text-primary,
[data-theme="light"] .page .btn-link,
[data-theme="light"] .page a:not(.btn):not(.nav-link):not(.sidebar-brand):not(.sidebar-subnav-link) {
    color: #0f5f5a !important;
}

[data-theme="light"] .page .text-success {
    color: #166534 !important;
}

[data-theme="light"] .page .text-danger {
    color: #b91c1c !important;
}

[data-theme="light"] .page .badge.bg-success-subtle.text-success {
    background-color: #dcfce7 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

/* Dashboard light mode. The earlier dashboard polish intentionally
   established the dark look; these selectors restore a real bright
   dashboard when the saved theme is light. */
[data-theme="light"] body:has(.dashboard-surface) {
    background: #f6f8fb;
    color: var(--pg-text);
}

[data-theme="light"] body:has(.dashboard-surface) main.app-main {
    background:
        radial-gradient(circle at 80% 8%, rgba(19, 123, 116, 0.08), transparent 30%),
        radial-gradient(circle at 12% 70%, rgba(37, 99, 235, 0.06), transparent 26%),
        #f6f8fb;
}

[data-theme="light"] body:has(.dashboard-surface) .top-row {
    background: rgba(246, 248, 251, 0.88);
    border-bottom-color: rgba(199, 211, 221, 0.78);
    box-shadow: none;
}

[data-theme="light"] body:has(.dashboard-surface) .top-row-account {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(199, 211, 221, 0.9);
    color: var(--pg-text);
}

[data-theme="light"] body:has(.dashboard-surface) .top-row-account:hover,
[data-theme="light"] body:has(.dashboard-surface) .top-row-account[aria-expanded="true"] {
    background: #ffffff;
    border-color: rgba(19, 123, 116, 0.34);
}

[data-theme="light"] body:has(.dashboard-surface) .top-row-account-dropdown {
    background: #ffffff;
    border-color: rgba(199, 211, 221, 0.9);
    box-shadow: 0 20px 46px rgba(15, 27, 44, 0.12);
}

[data-theme="light"] body:has(.dashboard-surface) .top-row-account-item {
    color: var(--pg-text);
}

[data-theme="light"] body:has(.dashboard-surface) .top-row-account-item svg,
[data-theme="light"] body:has(.dashboard-surface) .top-row-account-chevron {
    color: var(--pg-muted);
}

[data-theme="light"] body:has(.dashboard-surface) .top-row-account-item:hover {
    background: rgba(19, 123, 116, 0.08);
    color: var(--pg-text-strong);
}

[data-theme="light"] body:has(.dashboard-surface) .top-row-account-divider {
    background: rgba(199, 211, 221, 0.82);
}

[data-theme="light"] .dashboard-surface {
    color: var(--pg-text);
}

[data-theme="light"] .dashboard-hero-title {
    color: var(--pg-text-strong);
}

[data-theme="light"] .dashboard-hero-subtitle {
    color: var(--pg-muted);
}

[data-theme="light"] .dashboard-hero-inline-meta {
    color: #475569;
}

[data-theme="light"] .dashboard-hero-inline-meta strong {
    color: var(--pg-text-strong);
}

[data-theme="light"] .dashboard-window-title {
    color: var(--pg-muted);
}

[data-theme="light"] .dashboard-window {
    border-color: rgba(199, 211, 221, 0.86);
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(15, 27, 44, 0.12);
}

[data-theme="light"] .dashboard-window-topbar {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background: #152033;
}

[data-theme="light"] .dashboard-window-topbar .dashboard-window-title {
    color: rgba(203, 213, 225, 0.88);
}

[data-theme="light"] .dashboard-window-body {
    background:
        radial-gradient(circle at top right, rgba(19, 123, 116, 0.08), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}

[data-theme="light"] .dashboard-surface .dashboard-toolbar,
[data-theme="light"] .dashboard-surface .workspace-panel,
[data-theme="light"] .dashboard-surface .recovery-banner,
[data-theme="light"] .dashboard-surface .dashboard-listening {
    border-color: rgba(199, 211, 221, 0.86);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: none;
}

[data-theme="light"] .dashboard-surface .workspace-toolbar-copy strong,
[data-theme="light"] .dashboard-surface .workspace-panel-heading h5,
[data-theme="light"] .dashboard-surface .dashboard-listening .fw-semibold {
    color: var(--pg-text-strong);
}

[data-theme="light"] .dashboard-surface .text-muted,
[data-theme="light"] .dashboard-surface .small.text-muted {
    color: var(--pg-muted) !important;
}

[data-theme="light"] .dashboard-surface .dashboard-refresh-stamp {
    color: var(--pg-muted);
}

[data-theme="light"] .dashboard-surface .dashboard-date-error {
    color: #b42318;
}

[data-theme="light"] .dashboard-surface .form-select,
[data-theme="light"] .dashboard-surface .form-control {
    border-color: rgba(199, 211, 221, 0.9);
    background-color: rgba(255, 255, 255, 0.94);
    color: var(--pg-text);
}

[data-theme="light"] .dashboard-surface .btn-outline-secondary,
[data-theme="light"] .dashboard-surface .btn-outline-primary {
    border-color: rgba(199, 211, 221, 0.9);
    background: rgba(255, 255, 255, 0.82);
    color: var(--pg-text);
}

[data-theme="light"] .dashboard-surface .btn-outline-secondary:hover,
[data-theme="light"] .dashboard-surface .btn-outline-primary:hover {
    border-color: rgba(19, 123, 116, 0.36);
    background: rgba(19, 123, 116, 0.07);
    color: var(--pg-text-strong);
}

[data-theme="light"] .dashboard-surface .stat-card {
    border-color: rgba(199, 211, 221, 0.8);
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 27, 44, 0.06);
}

[data-theme="light"] .dashboard-surface .stat-card:hover {
    border-color: rgba(19, 123, 116, 0.28);
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 27, 44, 0.1);
}

[data-theme="light"] .dashboard-surface .stat-card-active {
    border-color: rgba(19, 123, 116, 0.44);
    box-shadow: 0 0 0 2px rgba(19, 123, 116, 0.12), 0 18px 40px rgba(15, 27, 44, 0.09);
}

[data-theme="light"] .dashboard-surface .stat-card-recovered { border-left-color: #1f8f63; }
[data-theme="light"] .dashboard-surface .stat-card-recovering { border-left-color: #bf7c23; }
[data-theme="light"] .dashboard-surface .stat-card-open { border-left-color: #2563eb; }
[data-theme="light"] .dashboard-surface .stat-card-lost { border-left-color: #c84b31; }
[data-theme="light"] .dashboard-surface .stat-card-paused { border-left-color: #6366f1; }

[data-theme="light"] .dashboard-surface .stat-amount,
[data-theme="light"] .dashboard-surface .stat-card-recovered .stat-amount,
[data-theme="light"] .dashboard-surface .stat-card-recovering .stat-amount,
[data-theme="light"] .dashboard-surface .stat-card-open .stat-amount,
[data-theme="light"] .dashboard-surface .stat-card-lost .stat-amount,
[data-theme="light"] .dashboard-surface .stat-card-paused .stat-amount {
    color: var(--pg-text-strong);
}

[data-theme="light"] .dashboard-surface .stat-label {
    color: var(--pg-muted-strong);
}

[data-theme="light"] .dashboard-surface .stat-count {
    color: var(--pg-muted);
}

[data-theme="light"] .dashboard-surface .recovery-banner {
    border-color: rgba(31, 143, 99, 0.16);
    background: linear-gradient(135deg, rgba(223, 245, 242, 0.9), rgba(240, 253, 244, 0.95));
    color: #174c43;
}

[data-theme="light"] .dashboard-surface .table-responsive {
    border-color: rgba(199, 211, 221, 0.82);
    background: #ffffff;
}

[data-theme="light"] .dashboard-surface .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--pg-text);
    --bs-table-hover-bg: rgba(19, 123, 116, 0.06);
    --bs-table-hover-color: var(--pg-text-strong);
    color: var(--pg-text);
}

[data-theme="light"] .dashboard-surface .table thead th,
[data-theme="light"] .dashboard-surface .table thead.table-light th,
[data-theme="light"] .dashboard-surface .table .table-light th {
    border-bottom-color: rgba(199, 211, 221, 0.82);
    background: #f2f5f8;
    color: var(--pg-muted-strong);
}

[data-theme="light"] .dashboard-surface .table tbody td {
    border-color: rgba(199, 211, 221, 0.55);
}

@media (max-width: 768px) {
    [data-theme="light"] .dashboard-surface .failed-invoices-table tbody tr {
        border-color: rgba(199, 211, 221, 0.82);
        background: #ffffff;
    }

    [data-theme="light"] .failed-invoices-table tbody td[data-label]::before {
        color: #6b7a8c;
    }
}

[data-theme="light"] .dashboard-surface .font-monospace {
    color: #314256;
}

[data-theme="light"] .dashboard-surface .text-success {
    color: #166534 !important;
}

[data-theme="light"] .dashboard-surface .badge.bg-success {
    background: #dcfce7 !important;
    color: #166534 !important;
}

[data-theme="light"] .dashboard-surface .badge.bg-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
}

[data-theme="light"] .dashboard-surface .badge.bg-danger {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

[data-theme="light"] .dashboard-surface .badge.bg-secondary {
    background: #e2e8f0 !important;
    color: #334155 !important;
}

[data-theme="dark"] .dashboard-surface .badge.bg-warning,
[data-theme="dark"] .dashboard-surface .badge.bg-warning.text-dark {
    background: #fbbf24 !important;
    color: #422006 !important;
}

[data-theme="light"] body:has(.dashboard-surface) .cookie-banner {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(199, 211, 221, 0.86);
    color: #314256;
    box-shadow: 0 18px 44px rgba(15, 27, 44, 0.12);
}

[data-theme="light"] body:has(.dashboard-surface) .cookie-banner-link {
    color: #0f5f5a;
}

[data-theme="light"] body:has(.dashboard-surface) .cookie-banner-btn {
    color: #0b1422;
}

[data-theme="light"] body:has(.dashboard-surface) .cookie-banner-secondary {
    color: #0b1422;
    border-color: #64748b;
}

[data-theme="light"] body:has(.dashboard-surface) .cookie-banner-secondary:hover,
[data-theme="light"] body:has(.dashboard-surface) .cookie-banner-secondary:focus {
    color: #07111f;
    background: #eef5f7;
    border-color: #334155;
}

[data-theme="light"] body:has(.dashboard-surface) .offcanvas {
    background: #ffffff;
    color: var(--pg-text);
    border-left-color: rgba(199, 211, 221, 0.86);
    box-shadow: -20px 0 54px rgba(15, 27, 44, 0.14);
}

[data-theme="light"] body:has(.dashboard-surface) .offcanvas-title,
[data-theme="light"] body:has(.dashboard-surface) .offcanvas h5,
[data-theme="light"] body:has(.dashboard-surface) .offcanvas h6,
[data-theme="light"] body:has(.dashboard-surface) .offcanvas dd {
    color: var(--pg-text-strong);
}

[data-theme="light"] body:has(.dashboard-surface) .offcanvas .text-muted {
    color: var(--pg-muted) !important;
}

[data-theme="light"] body:has(.dashboard-surface) .offcanvas a {
    color: #0f5f5a;
}

[data-theme="light"] body:has(.dashboard-surface) .offcanvas hr {
    border-color: rgba(199, 211, 221, 0.82);
}

[data-theme="light"] body:has(.dashboard-surface) .btn-close {
    filter: none;
    opacity: 0.72;
}

/* Shared gate/empty panels. These are used on settings, Stripe
   connection, and email templates, and were the main dark-mode holdout
   after the dashboard pass. */
.settings-gate-panel,
.empty-state {
    border-radius: 12px;
}

.settings-gate-panel {
    background: var(--pg-panel-translucent);
    border-color: var(--pg-border);
    color: var(--pg-text);
    box-shadow: var(--pg-shadow-card);
}

.settings-gate-panel h2,
.settings-gate-panel h3,
.settings-gate-panel h4 {
    color: var(--pg-text-strong);
}

.settings-gate-panel .text-muted,
.settings-gate-panel p {
    color: var(--pg-muted) !important;
}

.settings-gate-icon {
    background: rgba(19, 123, 116, 0.09);
    color: #137b74;
}

.settings-gate-list {
    background: var(--pg-panel-muted);
    border-color: var(--pg-border);
    color: var(--pg-text);
}

[data-theme="dark"] .page .settings-gate-panel,
[data-theme="dark"] .page .empty-state {
    background: var(--pg-panel-translucent);
    border-color: var(--pg-border-strong);
    color: var(--pg-text);
    box-shadow: var(--pg-shadow-card);
}

[data-theme="dark"] .page .settings-gate-panel h2,
[data-theme="dark"] .page .settings-gate-panel h3,
[data-theme="dark"] .page .settings-gate-panel h4 {
    color: var(--pg-text-strong);
}

[data-theme="dark"] .page .settings-gate-panel .text-muted,
[data-theme="dark"] .page .settings-gate-panel p,
[data-theme="dark"] .page .empty-state {
    color: var(--pg-muted) !important;
}

[data-theme="dark"] .page .settings-gate-icon {
    background: rgba(52, 211, 153, 0.10);
    color: var(--accent-recovered);
}

[data-theme="dark"] .page .settings-gate-list {
    background: var(--pg-panel-muted);
    border-color: var(--pg-border);
    color: var(--pg-text);
}

/* ════════════════════════════════════════════════════════════
   Status pills (Failed invoices table + drill-in)
   Bind to the same --accent-* tokens that drive the stat-card
   top stripes so the colour cue is consistent: blue Open tile
   → blue Open pill; red Lost tile → red Lost pill. Previously
   bg-secondary (grey) for Lost + bg-danger (red) for Open
   produced cross-purposes against the marketing-aligned tile
   colours - flagged 2026-04-25.
   ════════════════════════════════════════════════════════════ */
.status-pill {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.status-pill-recovered  { background-color: #0f7a4f; }
.status-pill-recovering { background-color: var(--accent-recovering); color: #1a1a1a; }
.status-pill-open       { background-color: var(--accent-open); }
.status-pill-lost       { background-color: var(--accent-lost); }

/* Dark mode: the accent tokens already flip to the brighter neon
   variants via [data-theme="dark"] .page. The pills inherit that
   automatically via the var() reference above. We override the
   text color to a near-black so the bright neon backgrounds read
   correctly (white-on-neon is too vivid and loses legibility). */
[data-theme="dark"] .page .status-pill-recovered  { background-color: var(--accent-recovered); color: #051d14; }
[data-theme="dark"] .page .status-pill-recovering { color: #1a1408; }
[data-theme="dark"] .page .status-pill-open       { color: #06121f; }
[data-theme="dark"] .page .status-pill-lost       { color: #1f0808; }

/* ════════════════════════════════════════════════════════════
   Remaining bright surfaces in dark mode (per UX/UI audit
   2026-04-25). The earlier safety-net pass and the email-studio
   pass missed a handful of class-namespaced surfaces that
   hard-code their own light backgrounds.
   ════════════════════════════════════════════════════════════ */

/* Email-templates: editor head strip + Visual/HTML mode switch.
   These sit ABOVE the TinyMCE iframe (which intentionally stays
   light because it's the email-as-customer-sees-it preview).
   The strip itself is page chrome and should follow the theme. */
[data-theme="dark"] .page .email-studio-editor-head {
    background: var(--pg-panel-translucent);
    border-color: var(--pg-border);
    color: var(--pg-text);
}

[data-theme="dark"] .page .email-studio-mode-switch {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--pg-border-strong);
    color: var(--pg-text);
}

[data-theme="dark"] .page .email-studio-mode-switch button,
[data-theme="dark"] .page .email-studio-mode-switch .nav-link {
    color: var(--pg-text);
}

[data-theme="dark"] .page .email-studio-mode-switch .active,
[data-theme="dark"] .page .email-studio-mode-switch [aria-selected="true"] {
    background: rgba(52, 211, 153, 0.16);
    color: var(--pg-text-strong);
}

/* Automations: outer cards + inner metrics dl. The cards use
   `.automation-card` with rgba(255,255,255,0.94) - basically
   solid white - and the metrics block is rgba(246,249,252,0.85).
   Both flip to dark surfaces with the same tokenised palette
   the rest of the dashboard uses. */
[data-theme="dark"] .page .automation-card {
    background: var(--pg-panel-translucent);
    border-color: var(--pg-border-strong);
    color: var(--pg-text);
    backdrop-filter: blur(8px);
}

[data-theme="dark"] .page .automation-card h2,
[data-theme="dark"] .page .automation-card h3,
[data-theme="dark"] .page .automation-card h4,
[data-theme="dark"] .page .automation-card-title {
    color: var(--pg-text-strong);
}

[data-theme="dark"] .page .automation-card-metrics {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--pg-border);
    color: var(--pg-text);
}

[data-theme="dark"] .page .automation-card-metrics dt {
    color: var(--pg-muted);
}

[data-theme="dark"] .page .automation-card-metrics dd {
    color: var(--pg-text-strong);
}

/* The card body copy hard-codes color: rgb(59, 75, 95) which is
   navy text - invisible on dark workspace bg. Same for the time
   labels and "Active · ..." status pills (rgb(21, 94, 58) dark
   green). Promote them to the light token / brighter accent so
   they read on the dark surface. */
[data-theme="dark"] .page .automation-card-desc {
    color: var(--pg-text);
}

[data-theme="dark"] .page .automation-card .local-time {
    color: var(--accent-recovered);
}

/* Earlier draft only flipped `color`, leaving `background: #e7f6ee`
   (and `--promo`'s `#fff1cb`) as glaring light-cream pills against
   the dark workspace surface - reported 2026-04-30. Both variants
   now use a translucent green/amber wash that matches the rest of
   the dark theme's tinted-status surfaces. */
[data-theme="dark"] .page .automation-card-status--on {
    background: rgba(34, 197, 94, 0.12);
    color: #6ee7b7;
    border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .page .automation-card-status--promo {
    background: rgba(251, 191, 36, 0.14);
    color: #fcd34d;
    border-color: rgba(251, 191, 36, 0.32);
}

[data-theme="dark"] .page .automation-card-status--off {
    background: rgba(148, 163, 184, 0.10);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.28);
}

[data-theme="dark"] .page .automation-toggle,
[data-theme="dark"] .page .review-status-title,
[data-theme="dark"] .page .review-status-metrics dd {
    color: var(--pg-text-strong);
}

[data-theme="dark"] .page .review-status-metrics {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--pg-border);
}

[data-theme="dark"] .page .review-status-metrics > div {
    border-left-color: var(--pg-border);
}

[data-theme="dark"] .page .review-status-metrics dt {
    color: var(--pg-muted);
}

/* Settings → Recovery schedule timeline tile. Light theme paints
   it with `background: linear-gradient(180deg, #f8fbff, #f1f6fb)`.
   Same canonicalization gotcha as the email-studio steps - set
   background-image: none explicitly so the cream gradient long-
   hand doesn't win over my higher-specificity selector. */
[data-theme="dark"] .page .schedule-timeline {
    background-color: var(--pg-panel-translucent);
    background-image: none;
    border-color: var(--pg-border);
}

[data-theme="dark"] .page .timeline-time {
    color: var(--pg-muted-strong);
}

/* Bootstrap alert variants. Light cream backgrounds look out of
   place against dark teal even though the contrast on the dark
   text is technically fine. Switch to the dark-tinted variant
   pattern: low-alpha accent bg + accent-tinted border + light
   foreground text. */
[data-theme="dark"] .page .alert-warning {
    background-color: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.32);
    color: #fef3c7;
}

[data-theme="dark"] .page .alert-warning a {
    color: #fef3c7;
    text-decoration: underline;
}

[data-theme="dark"] .page .alert-warning strong {
    color: #fef9e7;
}

[data-theme="dark"] .page .alert-info {
    background-color: rgba(96, 165, 250, 0.10);
    border-color: rgba(96, 165, 250, 0.28);
    color: #dbeafe;
}

[data-theme="dark"] .page .alert-info a {
    color: #dbeafe;
    text-decoration: underline;
}

[data-theme="dark"] .page .alert-info strong {
    color: #eff6ff;
}

[data-theme="dark"] .page .alert-success {
    background-color: rgba(52, 211, 153, 0.10);
    border-color: rgba(52, 211, 153, 0.28);
    color: #d1fae5;
}

[data-theme="dark"] .page .alert-danger {
    background-color: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.32);
    color: #fee2e2;
}

/* alert-secondary has no Bootstrap dark variant, so the default
   light-grey surface bleeds through and reads as a white tile in
   dark mode (review 2026-04-28 - schedule preview's "Exact send
   times are Stripe-state-driven" callout). Slate-tinted variant
   keeps it visually distinct from alert-info above without
   reverting to the cream paint. */
[data-theme="dark"] .page .alert-secondary {
    background-color: rgba(148, 163, 184, 0.10);
    border-color: rgba(148, 163, 184, 0.28);
    color: #e2e8f0;
}

[data-theme="dark"] .page .alert-secondary a {
    color: #e2e8f0;
    text-decoration: underline;
}

[data-theme="dark"] .page .alert-secondary strong {
    color: #f1f5f9;
}

[data-theme="dark"] .page .alert-secondary code {
    background-color: rgba(255, 255, 255, 0.06);
    color: #f8fafc;
}

/* ── Sidebar harmony ────────────────────────────────────────
   Tighten the colour relationship between the sidebar and the
   workspace bg in dark mode. Both share the same teal hue family
   but the sidebar previously sat noticeably "heavier" than the
   workspace surface, reading as a separate window pinned next to
   the dashboard rather than a continuous extension of it.

   Pull the gradient stops closer to --pg-surface so the seam
   between the two is barely perceptible - the sidebar is the
   same surface with a slight inward shadow and a touch more
   green at the top to pick up the workspace's top-edge glow. */
[data-theme="dark"] .page .sidebar {
    background:
        radial-gradient(circle at top left, rgba(52, 211, 153, 0.08), transparent 38%),
        linear-gradient(180deg, rgba(8, 26, 28, 0.96) 0%, rgba(7, 24, 26, 0.98) 50%, var(--pg-surface) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.02);
}

/* The .sidebar-context "Stripe subscriptions" pill was removed
   2026-04-30 - its dark-mode override is gone with it. */

/* ════════════════════════════════════════════════════════════════
   Dark mode for LandingLayout pages - public legal/security only.
   Originally covered `/`, `/docs/*`, `/terms`, `/privacy`,
   `/legal/dpa`, `/legal/sub-processors`, `/not-found`. After feedback
   on 2026-04-29:

   1. The landing page (`/`) looked broken in dark mode because some
      of its sections have hard-coded light-mode bgs that the partial
      overrides couldn't tame, leaving the page in a half-light /
      half-dark state. User said "dont do it on the landing page" -
      so the rules below now exclude `/` only.
   2. Most `/docs/*` pages were moved post-login (they used to live
      under LandingLayout); only `/docs/security` stays public for
      vulnerability disclosure. Post-login docs pages get dark mode
      automatically via the existing `.page`-scoped overrides plus a
      new rule below for `.legal-page` inside `.page`.

   Approach: scope dark overrides to
   `body:has(.pg-land-nav):not(:has(.pg-proof-strip))`. LandingLayout
   always emits `.pg-land-nav`; `.pg-proof-strip` is unique to
   `Landing.razor` (verified via grep - no other component renders it).
   So the selector matches the public legal pages, `/docs/security`,
   and `/not-found` - and excludes only `/`. Earlier draft used
   `:not(:has(.pg-hero))` but `NotFound.razor:6` ALSO renders a
   `.pg-hero` section (it's the always-dark error hero on the 404
   page), which accidentally killed dark mode on `/not-found` -
   regression flagged by Codex on PR #181 post-merge. Hard-coded dark
   colours match the authenticated app's `.page` palette so navigating
   from /connect-stripe → /privacy → /docs/security reads as the same
   surface family.
   ──────────────────────────────────────────────────────────────── */

/* Body bg flips when LandingLayout is rendered. Without this the
   nav + footer would be dark but the section gutters would stay
   cream. The radial highlights mirror the .page wrapper's gradient
   so the surface family matches between the workspace and the public
   marketing/docs pages. Opacity values intentionally identical to
   `[data-theme="dark"] .page` (above) - earlier draft used 0.18/0.06
   and produced a visibly lighter teal that broke the connect-stripe
   → /docs/stripe-setup transition (reported 2026-04-29). */
/* Dark-mode body + html backgrounds, take 5 (2026-04-30 - actually
   correct this time).

   Five iterations of "user reports a bright stripe between content
   and footer in dark mode" failed to fix the bug. The reason:

      [data-theme="dark"] html { ... }

   parses as "an `html` element that is a DESCENDANT of an element
   with `[data-theme="dark"]`". But `html` is the document root -
   it has no ancestor. So that selector never matches. html kept
   resolving its bg from the base `html, body { ... var(--pg-surface) }`
   rule with `--pg-surface` falling back to its light cream value
   (the dark override only redefined `--pg-surface` inside
   `.page`, which doesn't exist on LandingLayout pages). That cream
   bled through wherever body's radial gradients were transparent.

   The right form is `html[data-theme="dark"]` - qualifier ON the
   html element. Five rounds of `:has()` chaining and brute-forcing
   couldn't compensate for this single misparsed selector.

   Strategy unchanged from take 4: paint html + body unconditionally
   dark whenever `data-theme="dark"`, with a single explicit cream
   exception for the landing page (Landing.razor is the only page
   that renders `.pg-proof-strip`). */

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: #07181a;
    color: #e6f1ee;
}

/* Landing page exception. */
html[data-theme="dark"]:has(.pg-proof-strip),
html[data-theme="dark"]:has(.pg-proof-strip) body {
    background: #f8fafc;
    color: var(--pg-text);
}

/* Top nav */
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-land-nav {
    background: rgba(7, 24, 26, 0.78);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-land-nav-links a {
    color: #b8c8c4;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-land-mobile-nav a {
    color: #b8c8c4;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-land-nav-links a:hover,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-land-mobile-nav a:hover {
    color: #34d399;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-land-btn-ghost {
    color: #e6f1ee;
    border-color: rgba(255, 255, 255, 0.18);
    background: transparent;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-land-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

/* Landing hero. The rest of LandingLayout dark mode is section/card based,
   but the homepage hero owns its own hard-coded light gradient. Keep the
   dashboard mockup readable while making the first viewport a real dark
   surface. */
[data-theme="dark"] body:has(.pg-land-nav) .pg-hero {
    background:
        radial-gradient(circle at top right, rgba(45, 212, 191, .16), transparent 34%),
        linear-gradient(135deg, #061719 0%, #0a211f 58%, #07181a 100%);
}

[data-theme="dark"] body:has(.pg-land-nav) .pg-hero-headline {
    color: #ffffff;
}

[data-theme="dark"] body:has(.pg-land-nav) .pg-hero-h2,
[data-theme="dark"] body:has(.pg-land-nav) .pg-hero-sub,
[data-theme="dark"] body:has(.pg-land-nav) .pg-hero-microcopy {
    color: #c5d8d4 !important;
}

[data-theme="dark"] body:has(.pg-land-nav) .pg-hero-cta-ghost {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .18);
    color: #f8fafc;
}

[data-theme="dark"] body:has(.pg-land-nav) .pg-hero-cta-ghost:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(94, 234, 212, .55);
    color: #5eead4;
}

[data-theme="dark"] body:has(.pg-land-nav) .pg-product-window--hero {
    border-color: rgba(148, 163, 184, .28);
    box-shadow: 0 32px 90px rgba(0, 0, 0, .44);
}

/* Section text (everything outside the dark hero / proof strip,
   which are already always-dark by design and need no override). */
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-section-h2 {
    color: #ffffff;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-section-body {
    color: #b8c8c4;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-section-eyebrow {
    color: #34d399;
}

/* `.pg-section-alt` is light-grey in light mode (slight surface lift
   between problem and how-it-works); in dark mode the lift is the
   reverse - slightly more saturated panel surface. */
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-land-section,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-problem-section {
    background: #07181a;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-section-alt {
    background: #0e2521;
}

/* Cards: problem, how-it-works steps, features, pricing.
   Hard-coded panel surface + subtle border so they read as raised
   tiles on the dark background. */
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-step-card,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-feat-card,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-pricing-card,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-tour-card,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-problem-card,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-surface-card,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-positioning-card,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-compare-mobile-card,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-compare-worked-example,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-pricing-summary-table,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-playbook-list div {
    background: #122a26;
    border-color: rgba(255, 255, 255, 0.08);
    color: #e6f1ee;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-feat-card:hover,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-step-card:hover,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-pricing-card:hover,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-positioning-card--paydam,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-compare-mobile-card--paydam {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.14);
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-pricing-card-featured {
    background: linear-gradient(135deg, rgba(19, 123, 116, 0.22) 0%, #122a26 100%);
    border-color: #137b74;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-tour-shot,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-surface-dashboard-crop,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-customer-email-shot,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-email-client-preview,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-product-tour-img {
    background: #0b1715;
    border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-step-title,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-feat-title,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-pricing-plan,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-tour-card h2,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-tour-card h3,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-problem-card h3,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-surface-card h3,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-positioning-card h3,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-compare-mobile-card h2,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-compare-mobile-row strong,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-playbook-list div {
    color: #ffffff;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-step-body,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-feat-body,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-pricing-desc,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-tour-card p,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-problem-card p,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-surface-card p,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-positioning-card p,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-compare-mobile-row span {
    color: #b8c8c4;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .text-muted,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .small.text-muted,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .docs-help {
    color: #b8c8c4 !important;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) a:not(.btn):not(.pg-land-nav-links a):not(.pg-land-logo) {
    color: #5eead4;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-price-amount {
    color: #ffffff;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-price-period,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-pricing-features,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-pricing-roadmap {
    color: #b8c8c4;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-pricing-success {
    color: #34d399;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-tour-kicker {
    color: #34d399;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-step-num {
    color: rgba(52, 211, 153, 0.45);
}

/* Problem cards: keep the red/green tint but on dark surface */
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-problem-card.bad {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.32);
    color: #e6f1ee;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-problem-card.good {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.32);
    color: #e6f1ee;
}

/* FAQ */
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-faq-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-faq-q {
    color: #ffffff;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-faq-a {
    color: #b8c8c4;
}

/* Comparison table */
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-compare-table {
    color: #e6f1ee;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-compare-table th,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-compare-table td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-compare-table th {
    background: #122a26;
    color: #ffffff;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) table th {
    background: #122a26 !important;
    color: #ffffff !important;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) table td {
    background: #0f1f2a !important;
    color: #e6f1ee !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) table td .text-muted {
    color: #b8c8c4 !important;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-compare-table th:first-child,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-compare-table td:first-child {
    color: #93a8a3;
}

/* Pricing helpers */
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-pricing-note {
    background: rgba(34, 197, 94, 0.12);
    color: #34d399;
    border-color: rgba(34, 197, 94, 0.25);
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-pricing-explainer {
    background: #122a26;
    border-color: rgba(255, 255, 255, 0.06);
    color: #e6f1ee;
}

/* ── /privacy /terms /legal/dpa /legal/sub-processors + every
      /docs/* page. Single wrapper so all rules cascade. ── */
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .legal-page {
    background: transparent;
    border-color: transparent;
    color: #e6f1ee;
    box-shadow: none;
}

html[data-theme="dark"]:has(.legal-page),
html[data-theme="dark"]:has(.legal-page) body {
    background: #07181a !important;
    background-image: none !important;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .legal-page h1,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .legal-page h2,
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .legal-page h3 {
    color: #ffffff;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .legal-page a {
    color: #34d399;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .legal-page-back {
    color: #34d399;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .legal-page .text-muted {
    color: #93a8a3 !important;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .legal-page strong {
    color: #ffffff;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .legal-page code {
    background: rgba(255, 255, 255, 0.06);
    color: #d8e8e4;
    padding: 0.05em 0.35em;
    border-radius: 4px;
}

/* Docs index grid + cards */
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .docs-card {
    background: #122a26;
    border-color: rgba(255, 255, 255, 0.08);
    color: #e6f1ee;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .docs-card:hover {
    border-color: #34d399;
    color: #e6f1ee;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .docs-card-title {
    color: #34d399;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .docs-card-body {
    color: #b8c8c4;
}

/* Docs in-page helpers (DocsStripeSetup uses .docs-tip + .docs-where +
   .docs-checklist; dark-mode override mirrors the light-mode treatment
   on a dark surface). */
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .docs-tip {
    background: rgba(19, 123, 116, 0.12);
    border-left-color: #34d399;
    color: #e6f1ee;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .docs-where {
    color: #93a8a3;
}

/* ── Dark mode for `.legal-page` rendered INSIDE the post-login workspace
      (`.page`). After 2026-04-29 the four substantive docs pages
      (DocsIndex, DocsGettingStarted, DocsStripeSetup, DocsHowItWorks,
      DocsBillingAndFees) moved behind [Authorize], which means they
      render under MainLayout's `.page` shell instead of LandingLayout.
      Their content still uses the `.legal-page` wrapper, but that
      wrapper hard-codes `background: #fff` so without these overrides a
      dark-themed workspace would show a glaring white card on a
      `--pg-surface` deep-teal background. Mirrors the dark treatment
      applied above to the public `.legal-page` (terms / privacy / etc.). */
[data-theme="dark"] .page .legal-page {
    background: transparent;
    border-color: transparent;
    color: #e6f1ee;
    box-shadow: none;
}
[data-theme="dark"] .page .legal-page h1,
[data-theme="dark"] .page .legal-page h2,
[data-theme="dark"] .page .legal-page h3 {
    color: #ffffff;
}
[data-theme="dark"] .page .legal-page a {
    color: #34d399;
}
[data-theme="dark"] .page .legal-page-back {
    color: #34d399;
}
[data-theme="dark"] .page .legal-page .text-muted {
    color: #93a8a3 !important;
}
[data-theme="dark"] .page .legal-page strong {
    color: #ffffff;
}
[data-theme="dark"] .page .legal-page code {
    background: rgba(255, 255, 255, 0.06);
    color: #d8e8e4;
    padding: 0.05em 0.35em;
    border-radius: 4px;
}
[data-theme="dark"] .page .docs-card {
    background: #122a26;
    border-color: rgba(255, 255, 255, 0.08);
    color: #e6f1ee;
}
[data-theme="dark"] .page .docs-card:hover {
    border-color: #34d399;
    color: #e6f1ee;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}
[data-theme="dark"] .page .docs-card-title {
    color: #34d399;
}
[data-theme="dark"] .page .docs-card-body {
    color: #b8c8c4;
}
[data-theme="dark"] .page .docs-index-heading {
    color: #93a8a3;
}
[data-theme="dark"] .page .docs-guide-img {
    background: #0b1715;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .page .docs-guide-figure figcaption {
    color: #b8c8c4;
}
[data-theme="dark"] .page .docs-mini-card {
    background: #122a26;
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .page .docs-mini-card h3 {
    color: #e6f1ee;
}
[data-theme="dark"] .page .docs-mini-card p {
    color: #b8c8c4;
}
[data-theme="dark"] .page .docs-tip {
    background: rgba(19, 123, 116, 0.12);
    border-left-color: #34d399;
    color: #e6f1ee;
}
[data-theme="dark"] .page .docs-where {
    color: #93a8a3;
}

[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .docs-guide-img {
    background: #0b1715;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .docs-guide-figure figcaption {
    color: #b8c8c4;
}

/* Theme toggle inside the LandingLayout nav. The MainLayout-scoped dark
   theme tokens don't apply on landing pages (no `.page` wrapper), so
   the button's `var(--pg-*)` references resolve to light-mode values
   even when data-theme=dark. Hard-code dark equivalents here so the
   pill matches the dark nav surface around it. */
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-land-nav .top-row-theme-toggle {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #e6f1ee;
    box-shadow: none;
}
[data-theme="dark"] body:has(.pg-land-nav):not(:has(.pg-proof-strip)) .pg-land-nav .top-row-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(52, 211, 153, 0.4);
}

/* Landing page itself stays light-only - the cream / hero treatment is the
   marketing canvas and was never designed to flip dark, so suppress the
   theme toggle on Landing.razor (the only page that renders
   .pg-proof-strip). All other LandingLayout pages (privacy, terms, docs,
   etc.) keep the toggle so visitors can read in their preferred theme. */
body:has(.pg-proof-strip) .pg-land-nav .top-row-theme-toggle {
    display: none;
}

/* In dark mode the LandingLayout nav logo (logo_trans.png - dark teal mark
   on transparent) all but disappears against the near-black surface. Same
   trick as the post-login sidebar: brightness(0) collapses to solid black,
   invert(1) flips it to white. Only applies on non-landing dark pages -
   the landing page in dark still paints its cream marketing bg, where the
   original colored logo reads correctly. */
html[data-theme="dark"]:not(:has(.pg-proof-strip)) .pg-land-logo-img {
    filter: brightness(0) invert(1);
}

/* Auth pages are rendered in MinimalLayout, outside the authenticated
   workspace shell. Keep these rules last so generic workspace card/table
   refresh rules cannot leak into login, register, or password reset. */
main.auth-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin-left: 0 !important;
    padding: clamp(2rem, 5vh, 3.5rem) 1rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #0f1b2c;
    color: #172033;
}

main.auth-shell .auth-shell-inner {
    width: min(100%, 420px);
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

main.auth-shell .auth-card {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: clamp(1.75rem, 4vw, 2.25rem);
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 14px;
    background: #ffffff;
    color: #172033;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
}

main.auth-shell .auth-logo {
    margin-bottom: 1.25rem;
    justify-content: center;
}

main.auth-shell .auth-logo-full,
main.auth-shell .auth-security-card .auth-logo-full {
    width: 116px;
    height: auto;
    max-height: 76px;
    object-fit: contain;
}

main.auth-shell .auth-title {
    color: #111827;
}

main.auth-shell .auth-subtitle,
main.auth-shell .text-muted,
main.auth-shell .form-text {
    color: #526176 !important;
}

main.auth-shell .form-label {
    color: #253247;
}

main.auth-shell .form-control {
    min-height: 46px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #111827;
    box-shadow: none;
}

main.auth-shell .form-control:focus {
    border-color: #137b74;
    box-shadow: 0 0 0 4px rgba(19, 123, 116, 0.16);
}

main.auth-shell .form-control::placeholder {
    color: #64748b;
    opacity: 1;
}

main.auth-shell .btn-primary {
    border-color: #137b74;
    background: #137b74;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(19, 123, 116, 0.22);
}

main.auth-shell .btn-primary:hover,
main.auth-shell .btn-primary:focus {
    border-color: #0f5f5a;
    background: #0f5f5a;
    color: #ffffff;
}

main.auth-shell a {
    color: #0f766e;
}

main.auth-shell .auth-security-note {
    border-color: #b7e5df;
    background: #f0fdfa;
    color: #31524f;
}

main.auth-shell .auth-trust-strip {
    width: min(100%, 420px);
    margin: 1rem auto 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: .45rem;
    color: #cbd5e1;
    font-size: .76rem;
    line-height: 1.45;
}

main.auth-shell .auth-trust-strip span {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .5rem;
    text-align: center;
}

main.auth-shell .auth-trust-strip span::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: .45rem;
    border-radius: 999px;
    background: #5eead4;
    box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.12);
}

@media (max-width: 480px) {
    main.auth-shell {
        align-items: flex-start;
        padding: 1rem;
    }

    main.auth-shell .auth-card {
        padding: 1.4rem;
    }
}