/**
 * IQ Pigeon Design System V2 — shared components
 * Additive only: enhances existing pages without breaking legacy classes.
 */

/* ─── App canvas (client + admin main areas) ─── */
.v2-app-canvas,
body.client-app .client-main,
body.v2-client .client-main,
body.v2-shell.client-app .client-main,
body.app-shell .app-main,
body.admin-app .app-main,
body.v2-admin .app-main,
body.v2-shell.app-shell .app-main {
    background: var(--color-app-canvas);
}

/* ─── Layered card ─── */
.v2-card {
    background: var(--color-surface-elevated, var(--color-surface-container-lowest));
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-card, 16px);
    box-shadow: var(--shadow-layer-2);
    padding: var(--space-lg);
}

.v2-card--flat {
    box-shadow: var(--shadow-layer-1);
}

.v2-card--hover {
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

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

.v2-card + .v2-card {
    margin-top: var(--space-lg);
}

/* ─── Glass panel ─── */
.v2-glass {
    background: var(--color-landing-glass);
    border: 1px solid var(--color-landing-glass-border);
    border-radius: var(--radius-card-lg, 20px);
    box-shadow: var(--shadow-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ─── Section header ─── */
.v2-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.v2-section-header__title {
    font-size: var(--text-title);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-on-surface);
    margin: 0;
}

.v2-section-header__action {
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}

.v2-section-header__action:hover {
    color: var(--color-accent-bright);
}

/* ─── Stat card ─── */
.v2-stat-card,
.stat-card.v2-stat-card {
    background: var(--color-surface-elevated, var(--color-surface-container-lowest));
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-layer-1);
    padding: var(--space-md);
}

.v2-stat-card__label {
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-outline);
    margin: 0;
}

.v2-stat-card__value {
    font-size: var(--text-headline);
    font-weight: 800;
    color: var(--color-on-surface);
    margin: var(--space-xs) 0 0;
    line-height: 1.1;
}

.v2-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .v2-stat-grid:not(:has(> *:nth-child(5):last-child)) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ─── Pill buttons (primary CTAs only) ─── */
.v2-btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: 3.25rem;
    padding: 0 1.5rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--text-body);
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.v2-btn-pill:active {
    transform: scale(0.97);
}

.v2-btn-pill--primary {
    background: var(--color-accent-dim);
    color: #fff;
    border-color: var(--color-accent-dim);
    box-shadow: 0 4px 14px var(--color-accent-glow);
}

.v2-btn-pill--primary:hover {
    box-shadow: 0 8px 24px var(--color-accent-glow);
}

.v2-btn-pill--ghost {
    background: var(--color-landing-glass);
    color: var(--color-on-surface);
    border-color: var(--color-outline-variant);
    backdrop-filter: blur(8px);
}

.v2-btn-pill--ghost:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-dim);
}

/* ─── Admin sidebar V2 skin (indigo) ─── */
#admin-sidebar.v2-admin-sidebar,
body.v2-admin #admin-sidebar.admin-sidebar,
body.admin-app #admin-sidebar.admin-sidebar,
body.app-shell #admin-sidebar.admin-sidebar {
    background: var(--color-admin-sidebar-bg) !important;
    border-right: 1px solid var(--color-admin-sidebar-border);
}

body.v2-admin #admin-sidebar .admin-sidebar-link:not(.bg-primary):hover,
body.admin-app #admin-sidebar .admin-sidebar-link:not(.bg-primary):hover,
body.app-shell #admin-sidebar .admin-sidebar-link:not(.bg-primary):hover {
    background: var(--color-admin-sidebar-hover) !important;
}

body.v2-admin #admin-sidebar .admin-sidebar-link.bg-primary,
body.admin-app #admin-sidebar .admin-sidebar-link.bg-primary,
body.app-shell #admin-sidebar .admin-sidebar-link.bg-primary {
    background: var(--color-admin-sidebar-active-bg) !important;
    color: var(--color-admin-sidebar-active-text) !important;
}

body.v2-admin #admin-sidebar .admin-sidebar-brand,
body.admin-app #admin-sidebar .admin-sidebar-brand,
body.app-shell #admin-sidebar .admin-sidebar-brand {
    border-color: var(--color-admin-sidebar-border) !important;
}

body.v2-admin #admin-sidebar,
body.v2-admin #admin-sidebar .font-headline,
body.v2-admin #admin-sidebar .font-title,
body.admin-app #admin-sidebar,
body.admin-app #admin-sidebar .font-headline,
body.admin-app #admin-sidebar .font-title,
body.app-shell #admin-sidebar,
body.app-shell #admin-sidebar .font-headline,
body.app-shell #admin-sidebar .font-title {
    color: var(--color-admin-sidebar-text);
}

/* ─── Client sidebar V2 refinements ─── */
body.v2-client .client-sidebar,
body.client-app .client-sidebar {
    background: var(--color-sidebar-bg);
    border-right: 1px solid var(--color-sidebar-border);
    color: var(--color-sidebar-text);
}

body.v2-client .client-sidebar-link,
body.client-app .client-sidebar-link {
    color: var(--color-sidebar-muted);
}

body.v2-client .client-sidebar-link:hover,
body.client-app .client-sidebar-link:hover {
    background: var(--color-nav-hover);
    color: var(--color-sidebar-text);
}

body.v2-client .client-sidebar-link.is-active,
body.client-app .client-sidebar-link.is-active {
    background: var(--color-nav-active-bg);
    color: var(--color-nav-active-text);
}

body.v2-client .client-sidebar-brand,
body.client-app .client-sidebar-brand {
    border-bottom-color: var(--color-sidebar-border);
}

body.v2-client .client-sidebar-footer,
body.client-app .client-sidebar-footer {
    border-top-color: var(--color-sidebar-border);
}

html.dark body.v2-client .client-sidebar-link.is-active,
html.dark body.client-app .client-sidebar-link.is-active {
    color: var(--color-nav-active-text);
}

/* ─── Segment / tab pills ─── */
.v2-segment-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-xs);
    background: var(--color-surface-container-low);
    border-radius: var(--radius-control);
    border: 1px solid var(--color-outline-variant);
}

.v2-segment-tab {
    flex: 1 1 auto;
    min-width: fit-content;
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-radius: calc(var(--radius-control) - 2px);
    background: transparent;
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.v2-segment-tab.is-active,
.v2-segment-tab[aria-selected="true"] {
    background: var(--color-surface-elevated, #fff);
    color: var(--color-on-surface);
    box-shadow: var(--shadow-layer-1);
}

/* ─── Data table → mobile cards ─── */
.v2-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-card);
    border: 1px solid var(--color-outline-variant);
    background: var(--color-surface-elevated, var(--color-surface-container-lowest));
    box-shadow: var(--shadow-layer-1);
}

.v2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-body);
}

.v2-table th {
    text-align: left;
    padding: var(--space-md);
    font-size: var(--text-caption);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-outline);
    border-bottom: 1px solid var(--color-outline-variant);
    background: var(--color-panel-head, var(--color-surface-container-low));
}

.v2-table td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-outline-variant);
    color: var(--color-on-surface);
}

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

.v2-table tbody tr:hover td {
    background: var(--color-surface-container-low);
}

@media (max-width: 767px) {
    .v2-table-responsive .v2-table thead {
        display: none;
    }

    .v2-table-responsive .v2-table tbody tr {
        display: block;
        margin-bottom: var(--space-md);
        border: 1px solid var(--color-outline-variant);
        border-radius: var(--radius-card);
        background: var(--color-surface-elevated, var(--color-surface-container-lowest));
        box-shadow: var(--shadow-layer-1);
        overflow: hidden;
    }

    .v2-table-responsive .v2-table td {
        display: flex;
        justify-content: space-between;
        gap: var(--space-md);
        border-bottom: 1px solid var(--color-outline-variant);
        padding: var(--space-sm) var(--space-md);
    }

    .v2-table-responsive .v2-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: var(--text-caption);
        color: var(--color-outline);
        flex-shrink: 0;
    }

    .v2-table-responsive .v2-table td:last-child {
        border-bottom: none;
    }
}

/* ─── Chat bubbles ─── */
.v2-chat-bubble {
    max-width: 85%;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-control);
    font-size: var(--text-body);
    line-height: 1.45;
}

.v2-chat-bubble--in {
    background: var(--color-surface-container);
    color: var(--color-on-surface);
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}

.v2-chat-bubble--out {
    background: var(--color-primary-container, #d4edce);
    color: var(--color-on-primary-container, #1a4d12);
    border-bottom-right-radius: 4px;
    align-self: flex-end;
    margin-left: auto;
}

/* ─── Empty state ─── */
.v2-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
    gap: var(--space-md);
}

.v2-empty__icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-card);
    background: var(--color-surface-container-low);
    color: var(--color-outline);
}

.v2-empty__icon .material-symbols-outlined {
    font-size: 1.75rem;
}

.v2-empty__title {
    font-size: var(--text-title);
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
}

/* ─── Stamp frame (floating avatar objects) ─── */
.v2-stamp-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border: 2px dashed var(--color-accent);
    border-radius: var(--radius-card);
    background: var(--color-landing-glass);
    box-shadow: var(--shadow-float);
    transform: rotate(-6deg);
    overflow: hidden;
}

.v2-stamp-frame--lg {
    width: 5.5rem;
    height: 5.5rem;
}

.v2-stamp-frame__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-accent-dim);
    background: linear-gradient(135deg, var(--color-landing-gradient-mid), var(--color-landing-gradient-end));
}

.v2-stamp-frame .material-symbols-outlined {
    font-size: 1.75rem;
    color: var(--color-accent);
}

/* ─── Landing hero layers ─── */
.v2-hero {
    position: relative;
    overflow: hidden;
    min-height: min(88vh, 860px);
    display: flex;
    align-items: center;
}

.v2-hero__layers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.v2-hero__gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 20%, var(--color-landing-orb-pink), transparent 50%),
        radial-gradient(ellipse 70% 55% at 80% 30%, var(--color-landing-orb-indigo), transparent 45%),
        radial-gradient(ellipse 90% 70% at 50% 80%, var(--color-landing-orb-green), transparent 55%),
        linear-gradient(145deg, var(--color-landing-gradient-start) 0%, var(--color-landing-gradient-mid) 45%, var(--color-landing-gradient-end) 100%);
}

.v2-hero__mesh {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    background-image: radial-gradient(rgba(74, 173, 54, 0.15) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(180deg, black 0%, transparent 90%);
}

.v2-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.v2-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-pill);
    font-size: var(--text-eyebrow);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-dim);
    background: var(--color-landing-glass);
    border: 1px solid var(--color-landing-glass-border);
    backdrop-filter: blur(8px);
    margin-bottom: var(--space-md);
}

.v2-hero__title {
    font-size: var(--text-display);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--color-on-surface);
    margin: 0 0 var(--space-md);
    max-width: 14ch;
}

.v2-hero__title-accent {
    color: var(--color-accent);
    font-style: normal;
}

.v2-hero__lead {
    font-size: var(--text-body);
    line-height: 1.55;
    color: var(--color-on-surface-variant);
    max-width: 32rem;
    margin: 0 0 var(--space-lg);
}

.v2-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.v2-hero__note {
    font-size: var(--text-caption);
    color: var(--color-outline);
    margin: 0;
}

.v2-hero__grid {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

@media (min-width: 1024px) {
    .v2-hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }

    .v2-hero__content-col {
        text-align: left;
    }
}

.v2-hero__visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 320px;
}

/* Floating objects */
.v2-float {
    position: absolute;
    z-index: 1;
    animation: v2-float 6s ease-in-out infinite;
}

.v2-float--1 { top: 8%; left: 5%; animation-delay: 0s; }
.v2-float--2 { top: 18%; right: 8%; animation-delay: -1.5s; transform: rotate(8deg); }
.v2-float--3 { bottom: 22%; left: 12%; animation-delay: -3s; transform: rotate(-4deg); }
.v2-float--4 { bottom: 12%; right: 6%; animation-delay: -4.5s; transform: rotate(12deg); }
.v2-float--5 { top: 42%; left: 2%; animation-delay: -2s; }

@keyframes v2-float {
    0%, 100% { transform: translateY(0) rotate(var(--v2-rotate, -6deg)); }
    50% { transform: translateY(-12px) rotate(calc(var(--v2-rotate, -6deg) + 3deg)); }
}

.v2-float--2 { --v2-rotate: 8deg; }
.v2-float--3 { --v2-rotate: -4deg; }
.v2-float--4 { --v2-rotate: 12deg; }
.v2-float--5 { --v2-rotate: -10deg; }

/* Marketing page V2 body */
body.marketing-page--v2 {
    background: var(--color-landing-gradient-mid);
}

body.marketing-page--v2 .hip-trust {
    background: transparent;
}

/* Progressive: enhance existing stat cards when v2 class present */
.stat-grid .v2-stat-card,
.stat-grid .stat-card {
    transition: box-shadow 0.2s ease;
}

/* Form controls — additive polish (12px radius preserved) */
.v2-form-group {
    margin-bottom: var(--space-md);
}

.v2-form-label {
    display: block;
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--color-on-surface-variant);
    margin-bottom: var(--space-xs);
}

@media (prefers-reduced-motion: reduce) {
    .v2-float {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   Client portal V2 — Phase 4
   ═══════════════════════════════════════════════════════════ */

body.client-app.v2-client,
body.client-app {
    --color-header-bg: transparent;
    --color-header-border: transparent;
}

/* Page shell */
.v2-page-header {
    margin-bottom: var(--space-md);
}

.v2-page-header .client-page-header {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0;
    padding: max(0.75rem, env(safe-area-inset-top, 0px)) 0 0.625rem;
    background: color-mix(in srgb, var(--color-app-canvas) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: none;
}

.v2-page-header .client-page-header__title {
    font-size: var(--text-headline, 1.5rem);
    letter-spacing: -0.025em;
}

.v2-page-header .client-page-header__subtitle {
    font-size: var(--text-caption, 0.8125rem);
    max-width: 42ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-page-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
}

.v2-page-body > .v2-card,
.v2-page-body > section.v2-card {
    margin-top: 0;
}

/* Client sidebar refinements */
.v2-client-sidebar .client-sidebar-brand {
    padding: var(--space-md) var(--space-md) var(--space-sm);
    border-bottom: 1px solid var(--color-sidebar-border);
}

.v2-client-sidebar .client-sidebar-link {
    border-radius: var(--radius-control);
    margin: 0 var(--space-xs);
    padding: 0.625rem var(--space-md);
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--color-sidebar-muted);
}

.v2-client-sidebar .client-sidebar-link:hover {
    background: var(--color-nav-hover);
    color: var(--color-sidebar-text);
}

.v2-client-sidebar .client-sidebar-link.is-active {
    box-shadow: var(--shadow-layer-1);
    background: var(--color-nav-active-bg);
    color: var(--color-nav-active-text);
}

.v2-client-sidebar .client-sidebar-nav {
    gap: 2px;
    padding: var(--space-sm) var(--space-xs);
}

html.dark .v2-client-sidebar .client-sidebar-link.is-active {
    box-shadow: none;
}

/* Mobile bottom nav */
.v2-client-bottom-nav {
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.v2-client-bottom-nav .app-nav-link.active {
    color: var(--color-accent-dim);
}

.v2-client-bottom-nav .app-nav-link.active .app-nav-icon-slot {
    background: var(--color-nav-active-bg);
}

/* Mobile feature drawer */
.client-mobile-menu-drawer {
    box-shadow: var(--shadow-layer-3);
}

.client-mobile-menu-link.is-active {
    background: var(--color-nav-active-bg);
    color: var(--color-nav-active-text);
    border-radius: var(--radius-control);
}

/* Segment tabs — legacy alias */
.client-segment-tabs,
.leads-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-xs);
    background: var(--color-surface-container-low);
    border-radius: var(--radius-control);
    border: 1px solid var(--color-outline-variant);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.client-segment-tabs::-webkit-scrollbar,
.leads-filter-tabs::-webkit-scrollbar {
    display: none;
}

.client-segment-tab,
.leads-filter-tab {
    flex: 1 1 auto;
    min-width: fit-content;
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-radius: calc(var(--radius-control) - 2px);
    background: transparent;
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.client-segment-tab.is-active,
.leads-filter-tab.is-active,
.leads-filter-tab[aria-selected="true"] {
    background: var(--color-surface-elevated, #fff);
    color: var(--color-on-surface);
    box-shadow: var(--shadow-layer-1);
}

/* Override app.css nav-active-text on light filter tabs */
.leads-page .leads-filter-tab.is-active,
.leads-page .leads-filter-tab[aria-selected="true"] {
    color: var(--color-on-surface);
}

/* Stat cards on dashboard / analytics */
.client-stat-grid .v2-stat-card {
    background: var(--color-surface-elevated, var(--color-surface-container-lowest));
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-layer-1);
    padding: var(--space-md);
}

.client-stat-grid.v2-stat-grid,
.v2-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .client-stat-grid.v2-stat-grid:not(:has(> *:nth-child(5):last-child)):not(:has(> *:nth-child(6):last-child)),
    .v2-stat-grid:not(:has(> *:nth-child(5):last-child)):not(:has(> *:nth-child(6):last-child)) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.v2-stat-card__sub {
    font-size: var(--text-caption);
    color: var(--color-accent);
    margin: var(--space-xs) 0 0;
}

/* Plan cards (billing) */
.v2-plan-grid,
.client-plan-grid {
    display: grid;
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .v2-plan-grid,
    .client-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .v2-plan-grid,
    .client-plan-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.v2-plan-card,
.client-plan-card.v2-plan-card {
    background: var(--color-surface-elevated, var(--color-surface-container-lowest));
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-layer-1);
    padding: var(--space-md);
    transition: box-shadow 0.2s ease;
}

.v2-plan-card.is-current,
.client-plan-card.v2-plan-card.is-current {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-primary-container, #d4edce) 12%, var(--color-surface-elevated, #fff));
    box-shadow: var(--shadow-layer-2);
}

/* Channel cards (bot setup) */
.v2-channel-card {
    background: var(--color-surface-elevated, var(--color-surface-container-lowest));
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-layer-1);
    padding: var(--space-md);
}

.v2-channel-card + .v2-channel-card {
    margin-top: var(--space-md);
}

/* Widget embed code block (bot setup) */
.v2-embed-block {
    background: var(--color-inverse-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.v2-embed-block__code {
    margin: 0;
    padding: var(--space-md);
    padding-right: 6.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: var(--color-inverse-on-surface);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.v2-embed-block__copy {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: calc(var(--radius-control) - 2px);
    background: var(--color-accent);
    color: #fff;
    font-size: var(--text-caption);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.v2-embed-block__copy:active {
    transform: scale(0.97);
}

.v2-embed-help {
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-card);
    background: var(--color-surface-container-low);
    overflow: hidden;
}

.v2-embed-help summary {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.v2-embed-help summary::-webkit-details-marker {
    display: none;
}

.v2-embed-help summary::after {
    content: '+';
    float: right;
    font-weight: 700;
    color: var(--color-outline);
}

.v2-embed-help[open] summary::after {
    content: '−';
}

.v2-embed-help__body {
    padding: 0 var(--space-md) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    border-top: 1px solid var(--color-outline-variant);
}

.v2-embed-help__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.v2-embed-help__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    padding: 0 0.875rem;
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-control);
    background: var(--color-surface-elevated, #fff);
    color: var(--color-on-surface);
    font-size: var(--text-caption);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.v2-embed-help__btn:hover {
    background: var(--color-surface-container-low);
    border-color: var(--color-accent);
    color: var(--color-accent-dim);
}

@media (max-width: 479px) {
    .v2-embed-block__code {
        padding-top: 2.75rem;
        padding-right: var(--space-md);
    }

    .v2-embed-block__copy {
        left: var(--space-sm);
        right: var(--space-sm);
        top: var(--space-sm);
        width: calc(100% - 2 * var(--space-sm));
        text-align: center;
    }
}

/* Leads list as layered card */
.v2-leads-card {
    padding: 0;
    overflow: hidden;
}

.v2-leads-card .leads-list {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.leads-page .v2-leads-card .lead-row {
    position: relative;
}

.leads-page .v2-leads-card .lead-row__link {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.leads-page .v2-leads-card .lead-row__link:hover {
    background: var(--color-surface-container-low);
}

.leads-page .v2-leads-card .lead-row__link:active {
    background: var(--color-surface-container-low);
}

.leads-page .v2-leads-card .lead-row__avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-secondary-container);
    color: var(--color-on-secondary-container);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Google Sans Flex', Inter, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.leads-page .v2-leads-card .lead-row__body {
    flex: 1;
    min-width: 0;
}

.leads-page .v2-leads-card .lead-row__top {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.leads-page .v2-leads-card .lead-row__name {
    margin: 0;
    font-family: 'Google Sans Flex', Inter, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leads-page .v2-leads-card .lead-row__time {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--color-outline);
}

.leads-page .v2-leads-card .lead-row__meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.leads-page .v2-leads-card .lead-row__channel {
    font-size: 16px;
    color: var(--color-outline);
}

.leads-page .v2-leads-card .lead-row__tag {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--color-surface-container);
    color: var(--color-on-surface-variant);
}

.leads-page .v2-leads-card .lead-row__preview {
    margin: 6px 0 0;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--color-on-surface-variant);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leads-toolbar .v2-search-input,
.leads-toolbar input[type="search"] {
    border-radius: var(--radius-control) !important;
    border: 1px solid var(--color-outline-variant) !important;
    background: var(--color-surface-elevated, var(--color-surface-container-lowest)) !important;
    box-shadow: var(--shadow-layer-1);
}

/* Dashboard quick actions — always side-by-side */
.v2-action-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-sm);
}

@media (min-width: 640px) {
    .v2-action-row {
        gap: var(--space-md);
    }
}

.v2-action-row > a,
.v2-action-row > button {
    flex: 1 1 0;
    min-width: 0;
    border-radius: var(--radius-control);
}

.v2-action-row .v2-btn-pill {
    min-height: 3.25rem;
}

/* Training — industry picker grid */
.industry-grid .industry-pick {
    padding: 0.5rem 0.375rem;
    min-height: 0;
}

.industry-grid .industry-pick__icon {
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
    line-height: 1;
}

.industry-grid .industry-pick__label {
    font-size: 0.625rem;
    line-height: 1.25;
}

@media (min-width: 640px) {
    .industry-grid .industry-pick {
        padding: 0.625rem 0.5rem;
    }

    .industry-grid .industry-pick__icon {
        font-size: 1.25rem;
    }

    .industry-grid .industry-pick__label {
        font-size: 0.6875rem;
    }
}

@media (min-width: 1024px) {
    .industry-grid .industry-pick {
        padding: var(--space-md);
    }

    .industry-grid .industry-pick__icon {
        font-size: 1.5rem;
        margin-bottom: var(--space-xs);
    }

    .industry-grid .industry-pick__label {
        font-size: var(--text-title-sm, 0.875rem);
    }
}

/* Training — readiness summary card */
.training-readiness {
    background: var(--color-surface-elevated, var(--color-surface-container-lowest));
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-layer-1);
    padding: var(--space-md);
}

.training-readiness__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.training-readiness__label {
    margin: 0;
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
}

.training-readiness__score {
    margin: 0;
    font-family: var(--font-headline, inherit);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #15803d;
}

.training-readiness__bar {
    position: relative;
    height: 1.75rem;
    border-radius: 999px;
    background: #e8f5e9;
    overflow: hidden;
    margin-bottom: var(--space-md);
}

.training-readiness__fill {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 2.75rem;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    transition: width 0.25s ease;
}

.training-readiness__bar-pct {
    padding: 0 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.training-readiness__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.625rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.training-readiness__check {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: var(--color-surface-container);
    color: var(--color-on-surface-variant);
    font-size: 0.75rem;
    line-height: 1.25;
}

.training-readiness__check .material-symbols-outlined {
    font-size: 0.875rem;
    line-height: 1;
    color: #94a3b8;
}

.training-readiness__check.is-done {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.training-readiness__check.is-done .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 600;
    color: #16a34a;
}

@media (min-width: 640px) {
    .training-readiness {
        padding: var(--space-md) var(--space-lg);
    }

    .training-readiness__score {
        font-size: 1.75rem;
    }

    .training-readiness__check {
        font-size: 0.8125rem;
    }
}

/* PWA install banner — mobile client portal only */
.pwa-install-banner {
    display: none;
}

@media (max-width: 767px) {
    .pwa-install-banner {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        position: fixed;
        left: 1rem;
        right: 1rem;
        bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
        z-index: 9998;
        padding: 0.875rem;
        border-radius: var(--radius-card);
        border: 1px solid var(--color-primary);
        background: var(--color-surface-elevated, var(--color-surface-container-lowest));
        box-shadow: var(--shadow-layer-3, 0 12px 32px rgba(0, 0, 0, 0.18));
    }

    .pwa-install-banner__head {
        display: flex;
        align-items: flex-start;
        gap: 0.625rem;
    }

    .pwa-install-banner__icon {
        color: var(--color-primary);
        font-size: 1.75rem;
        line-height: 1;
        flex-shrink: 0;
    }

    .pwa-install-banner__copy {
        flex: 1;
        min-width: 0;
    }

    .pwa-install-banner__title {
        margin: 0;
        font-family: var(--font-title, inherit);
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--color-on-surface);
    }

    .pwa-install-banner__text {
        margin: 0.125rem 0 0;
        font-size: 0.75rem;
        line-height: 1.35;
        color: var(--color-on-surface-variant);
    }

    .pwa-install-banner__ios-hint {
        margin: 0.375rem 0 0;
        font-size: 0.75rem;
        line-height: 1.35;
        color: var(--color-on-surface);
    }

    .pwa-install-banner__close {
        border: 0;
        background: transparent;
        color: var(--color-outline);
        font-size: 1.25rem;
        line-height: 1;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;
    }

    .pwa-install-banner__btn {
        width: 100%;
        min-height: 2.75rem;
        border: 0;
        border-radius: var(--radius-control);
        background: var(--color-primary);
        color: var(--color-on-primary);
        font-family: var(--font-title, inherit);
        font-size: 0.9375rem;
        font-weight: 600;
        cursor: pointer;
    }

    .pwa-install-banner__btn:active {
        transform: scale(0.98);
    }
}

/* Recent activity list inside card */
.v2-activity-list {
    padding: 0;
    overflow: hidden;
}

.v2-activity-list .v2-activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-outline-variant);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.v2-activity-list .v2-activity-item:last-child {
    border-bottom: none;
}

.v2-activity-list .v2-activity-item:hover,
.v2-activity-list .v2-activity-item:active {
    background: var(--color-surface-container-low);
}

/* Alert / banner cards */
.v2-banner {
    border-radius: var(--radius-card);
    padding: var(--space-md);
    border: 1px solid var(--color-outline-variant);
    box-shadow: var(--shadow-layer-1);
}

.v2-banner--success {
    background: color-mix(in srgb, var(--color-primary-container, #d4edce) 25%, var(--color-surface-elevated, #fff));
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-outline-variant));
}

.v2-banner--info {
    background: color-mix(in srgb, var(--color-secondary-container, #e8def8) 20%, var(--color-surface-elevated, #fff));
    border-color: var(--color-outline-variant);
}

/* Chat view — minimal chrome */
body.client-chat-view .client-main {
    padding: 0;
}

body.client-chat-view .client-inner {
    max-width: none;
    padding: 0;
}

.client-chat-frame.v2-chat-frame {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    background: var(--color-app-canvas);
}

.v2-chat-frame .conversation-header {
    background: var(--color-surface-elevated, var(--color-surface-container-lowest));
    border-bottom: 1px solid var(--color-outline-variant);
    box-shadow: var(--shadow-layer-1);
}

.v2-chat-frame .conversation-thread {
    background: var(--color-app-canvas);
    padding: var(--space-md);
}

.v2-chat-frame .conversation-composer {
    background: var(--color-surface-elevated, var(--color-surface-container-lowest));
    border-top: 1px solid var(--color-outline-variant);
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.04);
}

.v2-chat-frame .client-lead-intel {
    background: var(--color-surface-elevated, var(--color-surface-container-lowest));
    box-shadow: var(--shadow-layer-1);
}

/* Chat bubbles — conv-msg mapping */
.conv-msg .v2-chat-bubble {
    box-shadow: var(--shadow-layer-1);
}

.conv-msg--assistant .v2-chat-bubble {
    border-top-left-radius: 4px;
}

.conv-msg--user .v2-chat-bubble {
    border-top-right-radius: 4px;
}

/* Empty states */
.v2-page-body .v2-empty {
    background: var(--color-surface-elevated, var(--color-surface-container-lowest));
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-layer-1);
}

/* Remaining pages — auto-enhance legacy cards inside v2-page-body */
.v2-page-body > .bg-surface-container-lowest,
.v2-page-body section.bg-surface-container-lowest,
.v2-page-body > section > .bg-surface-container-lowest {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-layer-1);
}

.v2-page-body > section {
    min-width: 0;
}

/* Usage bar polish */
.v2-page-body .client-usage-bar {
    border-radius: var(--radius-control);
    overflow: hidden;
    background: var(--color-surface-container);
    height: 8px;
}

.v2-page-body .client-usage-bar__fill {
    border-radius: var(--radius-control);
    background: linear-gradient(90deg, var(--color-accent-dim), var(--color-accent-bright));
}

/* Dark mode */
html.dark .v2-page-header .client-page-header {
    background: color-mix(in srgb, var(--color-app-canvas) 90%, transparent);
}

html.dark .v2-client-bottom-nav {
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}

html.dark .client-segment-tab.is-active,
html.dark .leads-filter-tab.is-active {
    background: var(--color-surface-container-high);
}

/* ═══════════════════════════════════════════════════════════
   Admin portal V2 — Phase 5
   ═══════════════════════════════════════════════════════════ */

body.v2-admin,
body.admin-app.v2-admin {
    --color-header-bg: transparent;
    --color-header-border: transparent;
}

body.v2-admin .app-main.v2-app-canvas,
body.admin-app .app-main.v2-app-canvas {
    background: var(--color-app-canvas);
}

.admin-inner {
    max-width: var(--content-max-admin, 68rem);
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
}

.app-main.max-w-lg .admin-inner,
.app-main.max-w-2xl .admin-inner,
.app-main.max-w-3xl .admin-inner,
.app-main.max-w-5xl .admin-inner {
    max-width: none;
}

/* Admin page header */
.v2-page-header .admin-page-header {
    position: relative;
    top: auto;
    z-index: 10;
    margin: 0;
    padding: max(0.75rem, env(safe-area-inset-top, 0px)) 0 0.625rem;
    background: color-mix(in srgb, var(--color-app-canvas) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: none;
}

.admin-page-header__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
}

.admin-page-header__title {
    font-size: var(--text-headline, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--color-on-surface);
    margin: 0;
}

.admin-page-header__subtitle {
    font-size: var(--text-caption, 0.8125rem);
    color: var(--color-on-surface-variant);
    margin: var(--space-xs) 0 0;
    max-width: 42ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Admin bottom nav */
body.v2-admin .app-bottom-nav,
body.admin-app .app-bottom-nav {
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.v2-admin .app-bottom-nav .app-nav-link.active,
body.admin-app .app-bottom-nav .app-nav-link.active {
    color: var(--color-accent-dim);
}

body.v2-admin .app-bottom-nav .app-nav-link.active .app-nav-icon-slot,
body.admin-app .app-bottom-nav .app-nav-link.active .app-nav-icon-slot {
    background: var(--color-admin-sidebar-active-bg);
}

/* Admin stat grid */
.admin-stat-grid.v2-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.admin-stat-grid--3.v2-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-stat-grid--3 .v2-stat-card {
    padding: var(--space-sm) var(--space-md);
    min-height: 0;
}

.admin-stat-grid--3 .v2-stat-card__label {
    font-size: 0.65rem;
    letter-spacing: 0.05em;
}

.admin-stat-grid--3 .v2-stat-card__value {
    font-size: clamp(0.875rem, 3.5vw, 1.25rem);
    word-break: break-word;
}

.admin-stat-grid--3 .v2-stat-card__sub {
    font-size: 0.6875rem;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .admin-stat-grid.v2-stat-grid:not(:has(> *:nth-child(5):last-child)) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .admin-stat-grid--3.v2-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-stat-grid--3 .v2-stat-card {
        padding: var(--space-md);
    }

    .admin-stat-grid--3 .v2-stat-card__value {
        font-size: var(--text-headline);
    }
}

/* ─── 5-stat grid: 3 on row 1, 2 centered on row 2 (site-wide) ─── */
.v2-stat-grid--5,
.admin-stat-grid--5,
.client-stat-grid--5,
.stat-grid--5,
.v2-stat-grid:has(> .v2-stat-card:nth-child(5):last-child),
.v2-stat-grid:has(> *:nth-child(5):last-child),
.client-stat-grid:has(> .v2-stat-card:nth-child(5):last-child),
.client-stat-grid:has(> *:nth-child(5):last-child),
.admin-stat-grid:has(> .v2-stat-card:nth-child(5):last-child),
.stat-grid:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-sm);
}

.v2-stat-grid--5 > *:nth-child(-n+3),
.admin-stat-grid--5 > *:nth-child(-n+3),
.client-stat-grid--5 > *:nth-child(-n+3),
.stat-grid--5 > *:nth-child(-n+3),
.v2-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) > *:nth-child(-n+3),
.v2-stat-grid:has(> *:nth-child(5):last-child) > *:nth-child(-n+3),
.client-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) > *:nth-child(-n+3),
.client-stat-grid:has(> *:nth-child(5):last-child) > *:nth-child(-n+3),
.admin-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) > *:nth-child(-n+3),
.stat-grid:has(> :nth-child(5):last-child) > *:nth-child(-n+3) {
    grid-column: span 2;
}

.v2-stat-grid--5 > *:nth-child(4),
.v2-stat-grid--5 > *:nth-child(5),
.admin-stat-grid--5 > *:nth-child(4),
.admin-stat-grid--5 > *:nth-child(5),
.client-stat-grid--5 > *:nth-child(4),
.client-stat-grid--5 > *:nth-child(5),
.stat-grid--5 > *:nth-child(4),
.stat-grid--5 > *:nth-child(5),
.v2-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) > *:nth-child(4),
.v2-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) > *:nth-child(5),
.v2-stat-grid:has(> *:nth-child(5):last-child) > *:nth-child(4),
.v2-stat-grid:has(> *:nth-child(5):last-child) > *:nth-child(5),
.client-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) > *:nth-child(4),
.client-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) > *:nth-child(5),
.client-stat-grid:has(> *:nth-child(5):last-child) > *:nth-child(4),
.client-stat-grid:has(> *:nth-child(5):last-child) > *:nth-child(5),
.admin-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) > *:nth-child(4),
.admin-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) > *:nth-child(5),
.stat-grid:has(> :nth-child(5):last-child) > *:nth-child(4),
.stat-grid:has(> :nth-child(5):last-child) > *:nth-child(5) {
    grid-column: span 3;
}

.v2-stat-grid--5 .v2-stat-card,
.admin-stat-grid--5 .v2-stat-card,
.client-stat-grid--5 .v2-stat-card,
.v2-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card,
.client-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card,
.admin-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card,
.stat-grid:has(> :nth-child(5):last-child) > * {
    padding: var(--space-sm);
    min-width: 0;
}

.v2-stat-grid--5 .v2-stat-card__label,
.admin-stat-grid--5 .v2-stat-card__label,
.client-stat-grid--5 .v2-stat-card__label,
.v2-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card__label,
.client-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card__label,
.admin-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card__label {
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    line-height: 1.25;
}

.v2-stat-grid--5 .v2-stat-card__value,
.admin-stat-grid--5 .v2-stat-card__value,
.client-stat-grid--5 .v2-stat-card__value,
.v2-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card__value,
.client-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card__value,
.admin-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card__value {
    font-size: clamp(1rem, 4vw, 1.375rem);
    margin-top: 2px;
}

.v2-stat-grid--5 .v2-stat-card__sub,
.admin-stat-grid--5 .v2-stat-card__sub,
.client-stat-grid--5 .v2-stat-card__sub,
.v2-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card__sub,
.client-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card__sub,
.admin-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card__sub {
    font-size: 0.625rem;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .v2-stat-grid--5,
    .admin-stat-grid--5,
    .client-stat-grid--5,
    .stat-grid--5,
    .v2-stat-grid:has(> .v2-stat-card:nth-child(5):last-child),
    .v2-stat-grid:has(> *:nth-child(5):last-child),
    .client-stat-grid:has(> .v2-stat-card:nth-child(5):last-child),
    .client-stat-grid:has(> *:nth-child(5):last-child),
    .admin-stat-grid:has(> .v2-stat-card:nth-child(5):last-child),
    .stat-grid:has(> :nth-child(5):last-child) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--space-md);
    }

    .v2-stat-grid--5 .v2-stat-card,
    .admin-stat-grid--5 .v2-stat-card,
    .client-stat-grid--5 .v2-stat-card,
    .v2-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card,
    .client-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card,
    .admin-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card {
        padding: var(--space-md);
    }

    .v2-stat-grid--5 .v2-stat-card__label,
    .admin-stat-grid--5 .v2-stat-card__label,
    .client-stat-grid--5 .v2-stat-card__label,
    .v2-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card__label,
    .client-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card__label,
    .admin-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card__label {
        font-size: var(--text-caption);
    }

    .v2-stat-grid--5 .v2-stat-card__value,
    .admin-stat-grid--5 .v2-stat-card__value,
    .client-stat-grid--5 .v2-stat-card__value,
    .v2-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card__value,
    .client-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card__value,
    .admin-stat-grid:has(> .v2-stat-card:nth-child(5):last-child) .v2-stat-card__value {
        font-size: var(--text-headline);
    }
}

/* ─── 6-stat grid: 3 on mobile, 6 on desktop (analytics) ─── */
.client-stat-grid--6,
.client-stat-grid:has(> .v2-stat-card:nth-child(6):last-child),
.client-stat-grid:has(> *:nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
}

.client-stat-grid--6 .v2-stat-card,
.client-stat-grid:has(> .v2-stat-card:nth-child(6):last-child) .v2-stat-card,
.client-stat-grid:has(> *:nth-child(6):last-child) > * {
    padding: var(--space-sm);
    min-width: 0;
}

.client-stat-grid--6 .v2-stat-card__label,
.client-stat-grid:has(> .v2-stat-card:nth-child(6):last-child) .v2-stat-card__label {
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    line-height: 1.25;
}

.client-stat-grid--6 .v2-stat-card__value,
.client-stat-grid:has(> .v2-stat-card:nth-child(6):last-child) .v2-stat-card__value {
    font-size: clamp(0.9375rem, 3.5vw, 1.25rem);
    margin-top: 2px;
}

.client-stat-grid--6 .v2-stat-card__sub,
.client-stat-grid:has(> .v2-stat-card:nth-child(6):last-child) .v2-stat-card__sub {
    font-size: 0.625rem;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .client-stat-grid--6,
    .client-stat-grid:has(> .v2-stat-card:nth-child(6):last-child),
    .client-stat-grid:has(> *:nth-child(6):last-child) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--space-md);
    }

    .client-stat-grid--6 .v2-stat-card,
    .client-stat-grid:has(> .v2-stat-card:nth-child(6):last-child) .v2-stat-card {
        padding: var(--space-md);
    }

    .client-stat-grid--6 .v2-stat-card__label,
    .client-stat-grid:has(> .v2-stat-card:nth-child(6):last-child) .v2-stat-card__label {
        font-size: var(--text-caption);
    }

    .client-stat-grid--6 .v2-stat-card__value,
    .client-stat-grid:has(> .v2-stat-card:nth-child(6):last-child) .v2-stat-card__value {
        font-size: var(--text-headline);
    }

    .client-stat-grid--6 .v2-stat-card__sub,
    .client-stat-grid:has(> .v2-stat-card:nth-child(6):last-child) .v2-stat-card__sub {
        font-size: var(--text-caption);
    }
}

/* Reminder email log (admin subscriptions) */
.v2-reminder-log {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.v2-reminder-log__item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 65%, transparent);
}

.v2-reminder-log__item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.v2-reminder-log__title {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-on-surface);
}

.v2-reminder-log__meta {
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--color-outline);
}

.v2-reminder-log__empty {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
}

/* Meta tech provider note (admin billing) */
.v2-meta-provider-note {
    background: var(--color-surface-container-low);
    padding: var(--space-lg);
}

.v2-meta-provider-note__list {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-on-surface-variant);
}

.v2-meta-provider-note__list code {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    background: var(--color-surface-container);
    word-break: break-all;
}

/* Admin list card (clients, leads) */
.v2-admin-list {
    padding: 0;
    overflow: hidden;
}

.v2-admin-list .v2-admin-list__row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-outline-variant);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
    min-width: 0;
}

.v2-admin-list .v2-admin-list__row:last-child {
    border-bottom: none;
}

.v2-admin-list .v2-admin-list__row:hover,
.v2-admin-list .v2-admin-list__row:active {
    background: var(--color-surface-container-low);
}

.v2-admin-list .v2-admin-list__row--static {
    cursor: default;
}

/* Admin mobile cards — v2 enhancement */
.v2-admin-mobile-card,
.admin-mobile-card.v2-admin-mobile-card {
    background: var(--color-surface-elevated, var(--color-surface-container-lowest));
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-card);
    padding: var(--space-md);
    box-shadow: var(--shadow-layer-1);
}

.v2-admin-mobile-card--urgent {
    border-color: color-mix(in srgb, var(--color-error) 40%, var(--color-outline-variant));
    background: color-mix(in srgb, var(--color-error-container) 8%, var(--color-surface-elevated, #fff));
}

/* Integration panels */
.v2-integration-card,
.integration-section.v2-integration-card {
    background: var(--color-surface-elevated, var(--color-surface-container-lowest));
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-layer-1);
    padding: var(--space-lg);
}

.v2-integration-card + .v2-integration-card,
.integration-section.v2-integration-card + .integration-section.v2-integration-card {
    margin-top: var(--space-md);
}

.integration-status-grid.v2-integration-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .integration-status-grid.v2-integration-status {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.integration-status-card.v2-stat-card {
    padding: var(--space-md);
}

/* Admin toolbar on canvas */
body.v2-admin .admin-toolbar {
    background: color-mix(in srgb, var(--color-app-canvas) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-outline-variant);
}

/* Admin filters toolbar */
.v2-admin-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

@media (min-width: 640px) {
    .v2-admin-toolbar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

.v2-admin-toolbar .v2-search-wrap {
    position: relative;
    flex: 1 1 12rem;
    min-width: 0;
}

.v2-admin-toolbar .v2-search-wrap .material-symbols-outlined {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-outline);
    pointer-events: none;
}

.v2-admin-toolbar input[type="search"] {
    width: 100%;
    padding-left: 2.5rem !important;
}

/* Admin table inside v2-card */
.v2-admin-table-section {
    padding: 0;
    overflow: hidden;
}

.v2-admin-table-section .v2-section-header {
    padding: var(--space-md) var(--space-lg);
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-outline-variant);
}

.v2-admin-table-section .v2-table-wrap {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Error banner */
.v2-banner--error {
    background: color-mix(in srgb, var(--color-error-container) 25%, var(--color-surface-elevated, #fff));
    border-color: color-mix(in srgb, var(--color-error) 35%, var(--color-outline-variant));
    color: var(--color-on-error-container);
}

/* Auto-enhance legacy sections inside admin v2-page-body */
body.v2-admin .v2-page-body > .bg-surface-container-lowest,
body.v2-admin .v2-page-body section.bg-surface-container-lowest,
body.admin-app .v2-page-body > .bg-surface-container-lowest,
body.admin-app .v2-page-body section.bg-surface-container-lowest {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-layer-1);
}

html.dark .v2-page-header .admin-page-header {
    background: color-mix(in srgb, var(--color-app-canvas) 90%, transparent);
}

html.dark body.v2-admin .app-bottom-nav,
html.dark body.admin-app .app-bottom-nav {
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}

/* ── Admin mobile polish (Phase 5b) ── */

@media (min-width: 768px) {
    body.admin-app .app-main.v2-app-canvas {
        padding-top: 3.25rem;
    }
}

@media (max-width: 767px) {
    body.admin-app .admin-inner {
        padding-top: 0.25rem;
    }

    body.admin-app .admin-page-header__title {
        font-size: 1.25rem;
    }

    body.admin-app .admin-page-header__subtitle {
        white-space: normal;
        font-size: 0.75rem;
    }
}

/* Compact admin forms */
.admin-form-compact {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.admin-form-compact__title {
    font-size: var(--text-title);
    font-weight: 700;
    margin: 0 0 var(--space-xs);
}

.admin-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.admin-field__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
}

.admin-field__hint {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin: 0;
    line-height: 1.45;
}

.admin-field__input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0 0.875rem;
    border-radius: var(--radius-control, 12px);
    border: 1px solid var(--color-outline-variant);
    background: var(--color-surface-container-lowest);
    font-size: 0.875rem;
    color: var(--color-on-surface);
    box-sizing: border-box;
}

.admin-field__input--textarea {
    min-height: 6rem;
    padding: 0.625rem 0.875rem;
    resize: vertical;
}

.admin-field__input--select {
    padding-right: 2rem;
}

.admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0 1rem;
    border-radius: var(--radius-control, 12px);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.admin-btn--compact {
    min-height: 2.375rem;
    padding: 0 0.75rem;
    font-size: 0.75rem;
}

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

.admin-btn--ghost {
    background: var(--color-surface-container-lowest);
    color: var(--color-on-surface);
    border-color: var(--color-outline-variant);
}

.admin-btn:active {
    transform: scale(0.98);
}

/* Search with icon */
body.admin-app .v2-search-wrap {
    position: relative;
    flex: 1 1 100%;
    min-width: 0;
}

body.admin-app .v2-search-wrap .material-symbols-outlined {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: var(--color-outline);
    pointer-events: none;
}

body.admin-app .v2-search-wrap input[type="search"],
body.admin-app .v2-search-wrap input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0 0.875rem 0 2.5rem !important;
    border-radius: var(--radius-control, 12px);
    border: 1px solid var(--color-outline-variant);
    background: var(--color-surface-container-lowest);
    box-sizing: border-box;
}

.v2-admin-toolbar {
    padding: var(--space-md);
    gap: var(--space-sm);
}

.v2-admin-toolbar--inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.v2-admin-filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    flex-shrink: 0;
}

.v2-admin-filter-select {
    width: auto;
    min-width: 9rem;
    max-width: 14rem;
}

.v2-admin-filters-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--space-sm);
    align-items: center;
    width: 100%;
}

.v2-admin-filters-row .admin-field__input--select {
    min-width: 0;
    font-size: 0.75rem;
    min-height: 2.375rem;
    padding-left: 0.625rem;
    padding-right: 1.5rem;
}

.v2-admin-filters-row .admin-btn--compact {
    min-width: 4.5rem;
}

/* Subscriptions / dashboard action row — single line, equal width */
.v2-action-row--compact {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-sm);
}

.v2-action-row--compact > form,
.v2-action-row--compact > a,
.v2-action-row--compact > button {
    flex: 1 1 0;
    min-width: 0;
}

.v2-action-row--compact .admin-btn {
    width: 100%;
    max-width: 100%;
    min-height: 2.25rem;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
}

.v2-action-row--compact form {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
}

.v2-action-row--compact form .admin-btn {
    width: 100%;
}

@media (min-width: 480px) {
    .v2-action-row--compact .admin-btn {
        padding: 0 0.625rem;
        font-size: 0.75rem;
        min-height: 2.375rem;
    }
}

@media (min-width: 640px) {
    .v2-action-row--compact {
        gap: var(--space-md);
    }

    .v2-action-row--compact .admin-btn {
        padding: 0 0.875rem;
        font-size: 0.8125rem;
    }
}

/* Leads list spacing */
.v2-leads-card--spaced .v2-admin-list__row {
    display: block;
    margin-bottom: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-control);
    text-decoration: none;
}

.v2-leads-card--spaced .v2-admin-list__row:last-child {
    margin-bottom: 0;
}

.v2-leads-card--spaced {
    padding: var(--space-sm);
    gap: 0;
}

/* Data deletion tabs — single row */
.v2-segment-tabs--compact {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.v2-segment-tabs--compact::-webkit-scrollbar {
    display: none;
}

a.v2-segment-tab,
.v2-segment-tab--compact {
    flex: 0 0 auto;
    min-width: fit-content;
    padding: 6px 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    border-radius: calc(var(--radius-control) - 2px);
    color: var(--color-on-surface-variant);
    background: transparent;
}

a.v2-segment-tab.is-active,
.v2-segment-tab--compact.is-active {
    background: var(--color-accent-dim);
    color: #fff;
}

/* Training company list */
.v2-training-company-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.v2-training-company-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-sm);
    align-items: start;
    padding: var(--space-md);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-control);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.v2-training-company-row:active,
.v2-training-company-row:hover {
    background: var(--color-surface-container-low);
}

.v2-training-company-row__icon {
    font-size: 1.25rem;
    margin-top: 0.125rem;
}

.v2-training-company-row__title {
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.v2-training-company-row__company {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin: 0.125rem 0 0;
}

.v2-training-company-row__email {
    font-size: 0.6875rem;
    color: var(--color-outline);
    margin: 0.125rem 0 0;
    word-break: break-all;
    white-space: normal;
    line-height: 1.35;
}

.v2-training-company-row__meta {
    font-size: 0.6875rem;
    color: var(--color-outline);
    text-align: right;
    white-space: nowrap;
}

/* Pricing plan cards compact */
.admin-plan-card .grid {
    gap: var(--space-sm);
}

.admin-plan-card input:not([type="checkbox"]),
.admin-plan-card select,
.admin-plan-card textarea {
    min-height: 2.5rem !important;
    height: auto !important;
    font-size: 0.8125rem !important;
    border-radius: var(--radius-control, 12px) !important;
    border: 1px solid var(--color-outline-variant) !important;
}

.admin-plan-card label.block.text-label-sm {
    font-size: 0.625rem;
    margin-bottom: 0.25rem;
}

.admin-plan-card h2 {
    font-size: 1rem;
}

.admin-plan-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-outline-variant);
}

.admin-plan-card__toggles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
}

.admin-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
    min-height: 1.5rem;
    position: relative;
}

.admin-switch input {
    position: absolute;
    opacity: 0;
    width: 2.75rem;
    height: 1.5rem;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.admin-switch__track {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    background: #1a1a1a;
    transition: background 0.2s ease;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.admin-switch__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    transition: transform 0.2s ease;
}

.admin-switch input:checked + .admin-switch__track {
    background: var(--color-primary, #4aad36);
    box-shadow: none;
}

.admin-switch input:checked + .admin-switch__track::after {
    transform: translateX(1.25rem);
}

html.dark .admin-switch__track {
    background: #0f0f0f;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

html.dark .admin-switch input:checked + .admin-switch__track {
    background: var(--color-primary, #4aad36);
}

.admin-switch input:focus-visible + .admin-switch__track {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.admin-switch__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-on-surface);
    line-height: 1.25;
}

/* Plan visibility label swap + subtle hidden-plan card style */
.admin-switch--visibility:has(input:checked) .admin-switch__label-on {
    display: inline;
}

.admin-switch--visibility:has(input:checked) .admin-switch__label-off {
    display: none;
}

.admin-switch--visibility:has(input:not(:checked)) .admin-switch__label-on {
    display: none;
}

.admin-switch--visibility:has(input:not(:checked)) .admin-switch__label-off {
    display: inline;
}

.admin-plan-card:has(.admin-switch--visibility input:not(:checked)) {
    background: color-mix(in srgb, var(--color-surface-container-low) 65%, var(--color-surface-container-lowest));
    border-style: dashed;
}