/* ═══════════════════════════════════════════════════════════════
   CRM V2 Design System Override
   Applies Material Design 3 tokens from design-tokens-v2.css
   to existing CRM classes. Transforms all pages at once.
   ═══════════════════════════════════════════════════════════════ */

/* ── CRM Top Header Bar ──────────────────────────────────────── */
body:not(.hangout-app) .crm-top-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem 1.5rem;
    gap: 0.5rem;
}

body:not(.hangout-app) .crm-top-bar-right {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

body:not(.hangout-app) .crm-top-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    color: var(--v2-on-surface-variant, #595c5d);
    text-decoration: none;
    transition: all 0.15s ease;
    position: relative;
}

body:not(.hangout-app) .crm-top-icon:hover {
    background: var(--v2-surface-low, #eff1f2);
    color: var(--v2-on-surface, #2c2f30);
}

body:not(.hangout-app) .crm-top-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    background: #ef4444;
    color: white;
    border-radius: 9999px;
    font-size: 0.5625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

body:not(.hangout-app) .crm-top-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--v2-primary, #9333ea), #9333ea);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    margin-left: 0.25rem;
    transition: box-shadow 0.15s ease;
}

body:not(.hangout-app) .crm-top-avatar:hover {
    box-shadow: 0 0 0 3px rgba(112, 42, 225, 0.15);
}

/* Profile Dropdown */
body:not(.hangout-app) .crm-top-profile {
    position: relative;
}

body:not(.hangout-app) .crm-profile-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 240px;
    background: var(--v2-surface-lowest, #ffffff);
    border: 1px solid var(--v2-outline-variant, #abadae20);
    border-radius: 0.75rem;
    box-shadow: 0 20px 40px rgba(44, 47, 48, 0.12);
    z-index: 100;
    overflow: hidden;
}

body:not(.hangout-app) .crm-profile-menu.show {
    display: block;
}

body:not(.hangout-app) .crm-profile-header {
    padding: 0.875rem 1rem;
}

body:not(.hangout-app) .crm-profile-name {
    font-family: var(--v2-font-headline, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--v2-on-surface, #2c2f30);
}

body:not(.hangout-app) .crm-profile-email {
    font-size: 0.75rem;
    color: var(--v2-on-surface-variant, #595c5d);
    margin-top: 0.125rem;
}

body:not(.hangout-app) .crm-profile-divider {
    height: 1px;
    background: var(--v2-outline-variant, #abadae15);
}

body:not(.hangout-app) .crm-profile-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--v2-on-surface, #2c2f30);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    font-family: inherit;
    transition: background 0.1s ease;
}

body:not(.hangout-app) .crm-profile-item:hover {
    background: var(--v2-surface-low, #eff1f2);
}

body:not(.hangout-app) .crm-profile-item.logout {
    color: #dc2626;
}

body:not(.hangout-app) .crm-profile-item.logout:hover {
    background: rgba(220, 38, 38, 0.05);
}

/* Dark mode top bar */
[data-theme="dark"] body:not(.hangout-app) .crm-top-icon { color: #8e9192; }
[data-theme="dark"] body:not(.hangout-app) .crm-top-icon:hover { background: #272a2c; color: #e2e2e3; }
[data-theme="dark"] body:not(.hangout-app) .crm-profile-menu { background: #111315; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] body:not(.hangout-app) .crm-profile-name { color: #e2e2e3; }
[data-theme="dark"] body:not(.hangout-app) .crm-profile-email { color: #8e9192; }
[data-theme="dark"] body:not(.hangout-app) .crm-profile-divider { background: rgba(255,255,255,0.05); }
[data-theme="dark"] body:not(.hangout-app) .crm-profile-item { color: #c1c7ce; }
[data-theme="dark"] body:not(.hangout-app) .crm-profile-item:hover { background: #272a2c; }

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] body:not(.hangout-app) .crm-top-icon { color: #8e9192; }
    [data-theme="auto"] body:not(.hangout-app) .crm-top-icon:hover { background: #272a2c; color: #e2e2e3; }
    [data-theme="auto"] body:not(.hangout-app) .crm-profile-menu { background: #111315; border-color: rgba(255,255,255,0.08); }
    [data-theme="auto"] body:not(.hangout-app) .crm-profile-name { color: #e2e2e3; }
    [data-theme="auto"] body:not(.hangout-app) .crm-profile-email { color: #8e9192; }
    [data-theme="auto"] body:not(.hangout-app) .crm-profile-divider { background: rgba(255,255,255,0.05); }
    [data-theme="auto"] body:not(.hangout-app) .crm-profile-item { color: #c1c7ce; }
    [data-theme="auto"] body:not(.hangout-app) .crm-profile-item:hover { background: #272a2c; }
}

/* ── Global Foundation ─────────────────────────────────────────── */
body:not(.hangout-app) {
    background: var(--v2-background, #f5f6f7);
    color: var(--v2-on-surface, #2c2f30);
    font-family: var(--v2-font-body, 'Inter', sans-serif);
}

/* ── Typography ────────────────────────────────────────────────── */
body:not(.hangout-app) h1,
body:not(.hangout-app) h2,
body:not(.hangout-app) h3,
body:not(.hangout-app) .page-title,
body:not(.hangout-app) .readiness-title,
body:not(.hangout-app) .org-banner-title,
body:not(.hangout-app) .modal-title,
body:not(.hangout-app) .card-title {
    font-family: var(--v2-font-headline, 'Space Grotesk', sans-serif);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--v2-on-surface, #2c2f30);
}

body:not(.hangout-app) h4,
body:not(.hangout-app) h5,
body:not(.hangout-app) h6 {
    font-family: var(--v2-font-headline, 'Space Grotesk', sans-serif);
    font-weight: 700;
    color: var(--v2-on-surface, #2c2f30);
}

body:not(.hangout-app) .page-subtitle,
body:not(.hangout-app) .text-muted,
body:not(.hangout-app) .readiness-subtitle {
    color: var(--v2-on-surface-variant, #595c5d);
}

/* Section labels — uppercase micro text */
body:not(.hangout-app) .nav-group-header,
body:not(.hangout-app) .section-label,
body:not(.hangout-app) .widget-header small {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--v2-on-surface-variant, #595c5d);
}

/* ── Page Header ───────────────────────────────────────────────── */
body:not(.hangout-app) .page-header {
    padding: 1.5rem 0 1rem;
}

body:not(.hangout-app) .page-title {
    font-size: 2.25rem;
    line-height: 1.15;
}

body:not(.hangout-app) .page-title i,
body:not(.hangout-app) .page-title svg {
    color: var(--v2-primary, #9333ea);
    opacity: 0.8;
}

/* ── Cards ─────────────────────────────────────────────────────── */
body:not(.hangout-app) .card,
body:not(.hangout-app) .dashboard-card,
body:not(.hangout-app) .sunday-readiness-card,
body:not(.hangout-app) .celebration-card,
body:not(.hangout-app) .quick-action-card {
    background: var(--v2-surface-lowest, #ffffff);
    border: 1px solid var(--v2-outline-variant, #abadae20);
    border-radius: var(--v2-radius, 1rem);
    box-shadow: var(--v2-shadow-card, 0 20px 40px rgba(44, 47, 48, 0.04));
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

body:not(.hangout-app) .card:hover,
body:not(.hangout-app) .dashboard-card:hover {
    box-shadow: var(--v2-shadow-elevated, 0 20px 40px rgba(44, 47, 48, 0.06));
}

body:not(.hangout-app) .card-header {
    background: transparent;
    border-bottom: 1px solid var(--v2-outline-variant, #abadae20);
    font-family: var(--v2-font-headline, 'Space Grotesk', sans-serif);
    font-weight: 700;
}

body:not(.hangout-app) .card-body {
    padding: 1.25rem;
}

/* ── Stat Cards (Dashboard Widgets) ────────────────────────────── */
body:not(.hangout-app) .dashboard-card .dashboard-card-value,
body:not(.hangout-app) .stat-value,
body:not(.hangout-app) .metric-value {
    font-family: var(--v2-font-headline, 'Space Grotesk', sans-serif);
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -0.025em;
}

body:not(.hangout-app) .dashboard-card .dashboard-card-icon,
body:not(.hangout-app) .stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--v2-radius-sm, 0.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

body:not(.hangout-app) .dashboard-card .dashboard-card-title,
body:not(.hangout-app) .stat-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--v2-on-surface-variant, #595c5d);
}

/* ── Buttons ───────────────────────────────────────────────────── */
body:not(.hangout-app) .btn-primary,
body:not(.hangout-app) .btn-brand {
    background: linear-gradient(135deg, var(--v2-primary, #9333ea), var(--v2-primary-dim, #6411d5));
    border: none;
    border-radius: 9999px;
    font-family: var(--v2-font-body, 'Inter', sans-serif);
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    box-shadow: var(--v2-shadow-primary, 0 8px 24px rgba(112, 42, 225, 0.2));
    transition: all 0.15s ease;
}

body:not(.hangout-app) .btn-primary:hover,
body:not(.hangout-app) .btn-brand:hover {
    background: var(--v2-primary-dim, #6411d5);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(112, 42, 225, 0.25);
}

body:not(.hangout-app) .btn-primary:active,
body:not(.hangout-app) .btn-brand:active {
    transform: scale(0.97);
}

body:not(.hangout-app) .btn-outline-primary {
    border: 1.5px solid var(--v2-primary, #9333ea);
    color: var(--v2-primary, #9333ea);
    border-radius: 9999px;
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    background: transparent;
}

body:not(.hangout-app) .btn-outline-primary:hover {
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 8%, transparent);
    border-color: var(--v2-primary, #9333ea);
    color: var(--v2-primary, #9333ea);
}

body:not(.hangout-app) .btn-outline-secondary,
body:not(.hangout-app) .btn-secondary {
    border-radius: 9999px;
    font-weight: 600;
    padding: 0.625rem 1.5rem;
}

body:not(.hangout-app) .btn-success {
    border-radius: 9999px;
    font-weight: 600;
    background: var(--v2-success, #10b981);
    border: none;
}

body:not(.hangout-app) .btn-danger {
    border-radius: 9999px;
    font-weight: 600;
    background: var(--v2-error, #b41340);
    border: none;
}

body:not(.hangout-app) .btn-sm {
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
}

/* ── Badges ────────────────────────────────────────────────────── */
body:not(.hangout-app) .badge {
    border-radius: 9999px;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.625rem;
    /* Visible neutral default so a bare <span class="badge"> isn't invisible
       (e.g. the "No" in signups-today). Colored variants (.badge.bg-*, .badge-*)
       and inline style="background:.." still override this. */
    background: color-mix(in srgb, var(--v2-on-surface-variant, #595c5d) 16%, transparent);
    color: var(--v2-on-surface, #2c2f30);
}

body:not(.hangout-app) .badge.bg-primary,
body:not(.hangout-app) .badge-primary {
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 12%, transparent) !important;
    color: var(--v2-primary, #9333ea) !important;
}

body:not(.hangout-app) .badge.bg-success,
body:not(.hangout-app) .badge-success {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #059669 !important;
}

body:not(.hangout-app) .badge.bg-warning,
body:not(.hangout-app) .badge-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #d97706 !important;
}

body:not(.hangout-app) .badge.bg-danger,
body:not(.hangout-app) .badge-danger {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #dc2626 !important;
}

body:not(.hangout-app) .badge.bg-info,
body:not(.hangout-app) .badge-info {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #2563eb !important;
}

/* Bare badge in dark mode (variant + inline-styled badges keep their own colors) */
[data-theme="dark"] body:not(.hangout-app) .badge,
body:not(.hangout-app)[data-theme="dark"] .badge {
    background: rgba(255, 255, 255, 0.14);
    color: var(--v2-on-surface, #e2e2e3);
}
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] body:not(.hangout-app) .badge {
        background: rgba(255, 255, 255, 0.14);
        color: var(--v2-on-surface, #e2e2e3);
    }
}

/* ── Form Inputs ───────────────────────────────────────────────── */
body:not(.hangout-app) .form-control,
body:not(.hangout-app) .form-select {
    background: var(--v2-surface-low, #eff1f2);
    border: 1.5px solid transparent;
    border-radius: var(--v2-radius-sm, 0.625rem);
    color: var(--v2-on-surface, #2c2f30);
    font-family: var(--v2-font-body, 'Inter', sans-serif);
    padding: 0.625rem 0.875rem;
    transition: all 0.15s ease;
}

body:not(.hangout-app) .form-control:focus,
body:not(.hangout-app) .form-select:focus {
    border-color: var(--v2-primary, #9333ea);
    background: var(--v2-surface-lowest, #ffffff);
    box-shadow: 0 0 0 3px rgba(112, 42, 225, 0.08);
}

/* ── Fallback for RAW form controls without .form-control/.form-select ──
   Calendar/check-in/sign-in forms and modal inputs that never got the class
   were inheriting nothing → invisible (worst in dark mode + native date/time
   pickers). :where() keeps this at low specificity so any explicit class
   (.form-control, .org-switcher-select, custom-styled inputs) still wins —
   this only "fills in" genuinely unstyled controls. color-scheme fixes the
   native date/time picker glyphs (see CLAUDE.md form-control gotcha). */
body:not(.hangout-app) :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]),
    textarea, select) {
    background: var(--v2-surface-low, #eff1f2);
    border: 1.5px solid var(--v2-outline-variant, #d8dadb);
    border-radius: var(--v2-radius-sm, 0.625rem);
    color: var(--v2-on-surface, #2c2f30);
    font-family: var(--v2-font-body, 'Inter', sans-serif);
    padding: 0.625rem 0.875rem;
    color-scheme: light;
}
body:not(.hangout-app) :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]),
    textarea, select):focus {
    border-color: var(--v2-primary, #9333ea);
    background: var(--v2-surface-lowest, #ffffff);
    box-shadow: 0 0 0 3px rgba(112, 42, 225, 0.08);
    outline: none;
}
[data-theme="dark"] body:not(.hangout-app) :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]),
    textarea, select),
body:not(.hangout-app)[data-theme="dark"] :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]),
    textarea, select) {
    background: var(--v2-surface-container, #1c1f21);
    color: var(--v2-on-surface, #e2e2e3);
    border-color: var(--v2-outline-variant, #41484d);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] body:not(.hangout-app) :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]),
        textarea, select) {
        background: var(--v2-surface-container, #1c1f21);
        color: var(--v2-on-surface, #e2e2e3);
        border-color: var(--v2-outline-variant, #41484d);
        color-scheme: dark;
    }
}

body:not(.hangout-app) .form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v2-on-surface, #2c2f30);
}

/* ── Tables ────────────────────────────────────────────────────── */
body:not(.hangout-app) .table {
    border-collapse: separate;
    border-spacing: 0 0.375rem;
}

body:not(.hangout-app) .table thead th {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--v2-on-surface-variant, #595c5d);
    border-bottom: none;
    padding: 0.75rem 1rem;
    background: transparent;
}

body:not(.hangout-app) .table tbody tr {
    background: var(--v2-surface-lowest, #ffffff);
    box-shadow: var(--v2-shadow-card, 0 20px 40px rgba(44, 47, 48, 0.04));
    transition: box-shadow 0.15s ease;
}

body:not(.hangout-app) .table tbody tr:hover {
    box-shadow: var(--v2-shadow-elevated, 0 20px 40px rgba(44, 47, 48, 0.06));
}

body:not(.hangout-app) .table tbody td {
    padding: 0.875rem 1rem;
    border: none;
    vertical-align: middle;
}

body:not(.hangout-app) .table tbody td:first-child {
    border-radius: var(--v2-radius-sm, 0.5rem) 0 0 var(--v2-radius-sm, 0.5rem);
}

body:not(.hangout-app) .table tbody td:last-child {
    border-radius: 0 var(--v2-radius-sm, 0.5rem) var(--v2-radius-sm, 0.5rem) 0;
}

/* ── Sidebar Navigation ────────────────────────────────────────── */
body:not(.hangout-app) .sidebar-enhanced {
    background: var(--v2-surface-lowest, #ffffff);
    border-right: 1px solid var(--v2-outline-variant, #abadae20);
    box-shadow: var(--v2-shadow-nav, 0 20px 40px rgba(112, 42, 225, 0.06));
}

body:not(.hangout-app) .sidebar-enhanced .organization-name {
    font-family: var(--v2-font-headline, 'Space Grotesk', sans-serif);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--v2-on-surface, #2c2f30);
}

body:not(.hangout-app) .nav-group-header {
    font-family: var(--v2-font-body, 'Inter', sans-serif);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--v2-on-surface-variant, #595c5d);
    padding: 0.75rem 1rem 0.375rem;
}

body:not(.hangout-app) .nav-item {
    border-radius: var(--v2-radius-sm, 0.5rem);
    margin: 0.125rem 0.5rem;
    transition: all 0.15s ease;
}

body:not(.hangout-app) .nav-item:hover {
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 6%, transparent);
}

/* Active-nav colour is governed by the --nav-item-active-* token pair (single
   source of truth: light defaults in design-tokens.css, dark overrides in
   crm-dark-mode.css). These rules CONSUME the tokens; they don't define colour.
   v2-primary stays as a last-ditch fallback if the token is ever undefined. */
body:not(.hangout-app) .nav-item.active {
    background: var(--nav-item-active-bg, rgba(147, 51, 234, 0.1));
}

body:not(.hangout-app) .nav-item.active .nav-item-content span {
    color: var(--nav-item-active-text, var(--v2-primary, #9333ea));
    font-weight: 600;
}

body:not(.hangout-app) .nav-item.active .nav-item-content i,
body:not(.hangout-app) .nav-item.active .nav-item-content svg {
    color: var(--nav-item-active-text, var(--v2-primary, #9333ea));
}

body:not(.hangout-app) .nav-accent {
    background: var(--v2-primary, #9333ea);
    border-radius: 0 3px 3px 0;
}

body:not(.hangout-app) .sidebar-user {
    background: var(--v2-surface-low, #eff1f2);
    border-radius: var(--v2-radius, 1rem);
    margin: 0.5rem;
    padding: 0.75rem;
    border-top: none;
}

/* ── Org Banner ────────────────────────────────────────────────── */
body:not(.hangout-app) .org-banner {
    border-radius: var(--v2-radius, 1rem);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

body:not(.hangout-app) .org-banner-title {
    font-size: 1.5rem;
}

body:not(.hangout-app) .org-banner-badge {
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

body:not(.hangout-app) .org-banner-stat {
    font-size: 0.8125rem;
    font-weight: 500;
}

/* ── Sunday Readiness ──────────────────────────────────────────── */
body:not(.hangout-app) .sunday-readiness-card,
body:not(.hangout-app) #sunday-readiness {
    background: var(--v2-surface-lowest, #ffffff);
    border-radius: var(--v2-radius, 1rem);
    box-shadow: var(--v2-shadow-card);
    border: 1px solid var(--v2-outline-variant, #abadae20);
}

body:not(.hangout-app) .readiness-title {
    font-size: 1.125rem;
}

body:not(.hangout-app) .readiness-progress-fill {
    background: var(--v2-primary, #9333ea);
    border-radius: 9999px;
}

body:not(.hangout-app) .readiness-progress-bar {
    border-radius: 9999px;
    background: var(--v2-surface-low, #eff1f2);
}

body:not(.hangout-app) .readiness-item {
    border-radius: var(--v2-radius-sm, 0.5rem);
    transition: background 0.15s ease;
}

body:not(.hangout-app) .readiness-item:hover {
    background: var(--v2-surface-low, #eff1f2);
}

/* ── Flash Messages ────────────────────────────────────────────── */
body:not(.hangout-app) .flash-message {
    border-radius: var(--v2-radius-sm, 0.625rem);
    font-family: var(--v2-font-body, 'Inter', sans-serif);
}

/* ── Modals ────────────────────────────────────────────────────── */
body:not(.hangout-app) .modal-content {
    background: var(--v2-surface-lowest, #ffffff);
    border-radius: var(--v2-radius-lg, 1.5rem);
    border: none;
    box-shadow: var(--v2-shadow-elevated);
}

body:not(.hangout-app) .modal-header {
    border-bottom: 1px solid var(--v2-outline-variant, #abadae20);
    padding: 1.25rem 1.5rem;
}

body:not(.hangout-app) .modal-title {
    font-size: 1.25rem;
}

body:not(.hangout-app) .modal-footer {
    border-top: 1px solid var(--v2-outline-variant, #abadae20);
    padding: 1rem 1.5rem;
}

/* ── Footer ────────────────────────────────────────────────────── */
body:not(.hangout-app) .site-footer {
    background: var(--v2-surface-low, #eff1f2);
    color: var(--v2-on-surface-variant, #595c5d);
    border-top: 1px solid var(--v2-outline-variant, #abadae20);
}

body:not(.hangout-app) .site-footer h4 {
    font-family: var(--v2-font-headline, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--v2-on-surface, #2c2f30);
}

/* ── Dropdown Menus ────────────────────────────────────────────── */
body:not(.hangout-app) .dropdown-menu {
    background: var(--v2-surface-lowest, #ffffff);
    border: 1px solid var(--v2-outline-variant, #abadae20);
    border-radius: var(--v2-radius, 1rem);
    box-shadow: var(--v2-shadow-elevated);
    padding: 0.375rem;
}

body:not(.hangout-app) .dropdown-item {
    border-radius: var(--v2-radius-sm, 0.5rem);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: background 0.15s ease;
}

body:not(.hangout-app) .dropdown-item:hover,
body:not(.hangout-app) .dropdown-item:focus {
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 6%, transparent);
    color: var(--v2-on-surface, #2c2f30);
}

body:not(.hangout-app) .dropdown-item.active,
body:not(.hangout-app) .dropdown-item:active {
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 12%, transparent);
    color: var(--v2-primary, #9333ea);
}

/* ── Alerts ────────────────────────────────────────────────────── */
body:not(.hangout-app) .alert {
    border-radius: var(--v2-radius-sm, 0.625rem);
    border: none;
    font-family: var(--v2-font-body, 'Inter', sans-serif);
}

/* ── Breadcrumbs ───────────────────────────────────────────────── */
body:not(.hangout-app) .breadcrumb {
    font-size: 0.8125rem;
    font-weight: 500;
}

body:not(.hangout-app) .breadcrumb-item a {
    color: var(--v2-primary, #9333ea);
}

/* ── Pagination ────────────────────────────────────────────────── */
body:not(.hangout-app) .page-link {
    border-radius: var(--v2-radius-sm, 0.5rem);
    border: 1px solid var(--v2-outline-variant, #abadae20);
    color: var(--v2-on-surface, #2c2f30);
    margin: 0 0.125rem;
}

body:not(.hangout-app) .page-item.active .page-link {
    background: var(--v2-primary, #9333ea);
    border-color: var(--v2-primary, #9333ea);
    border-radius: var(--v2-radius-sm, 0.5rem);
}

/* ── Org Switcher ──────────────────────────────────────────────── */
body:not(.hangout-app) .org-switcher-select {
    background: var(--v2-surface-low, #eff1f2);
    border: 1.5px solid transparent;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--v2-on-surface, #2c2f30);
}

body:not(.hangout-app) .org-switcher-select:focus {
    border-color: var(--v2-primary, #9333ea);
    box-shadow: 0 0 0 3px rgba(112, 42, 225, 0.08);
}

/* ── Avatars ───────────────────────────────────────────────────── */
body:not(.hangout-app) .avatar,
body:not(.hangout-app) .member-avatar {
    border-radius: 9999px;
    font-family: var(--v2-font-headline, 'Space Grotesk', sans-serif);
    font-weight: 700;
}

/* ── Toast Notifications ───────────────────────────────────────── */
body:not(.hangout-app) .toast {
    border-radius: var(--v2-radius, 1rem);
    background: var(--v2-surface-lowest, #ffffff);
    box-shadow: var(--v2-shadow-elevated);
    border: 1px solid var(--v2-outline-variant, #abadae20);
}

/* ── Dark Mode Supplements ─────────────────────────────────────── */
/* These supplement design-tokens-v2.css dark mode for CRM-specific elements */

[data-theme="dark"] body:not(.hangout-app) .sidebar-enhanced,
body:not(.hangout-app)[data-theme="dark"] .sidebar-enhanced {
    background: var(--v2-surface-low, #111315);
    border-right-color: var(--v2-outline-variant, #41484d);
}

[data-theme="dark"] body:not(.hangout-app) .sidebar-user,
body:not(.hangout-app)[data-theme="dark"] .sidebar-user {
    background: var(--v2-surface-container, #1c1f21);
}

[data-theme="dark"] body:not(.hangout-app) .card,
[data-theme="dark"] body:not(.hangout-app) .dashboard-card,
[data-theme="dark"] body:not(.hangout-app) .sunday-readiness-card,
[data-theme="dark"] body:not(.hangout-app) #sunday-readiness,
body:not(.hangout-app)[data-theme="dark"] .card,
body:not(.hangout-app)[data-theme="dark"] .dashboard-card {
    background: var(--v2-surface-low, #111315);
    border-color: var(--v2-outline-variant, #41484d);
}

[data-theme="dark"] body:not(.hangout-app) .table tbody tr,
body:not(.hangout-app)[data-theme="dark"] .table tbody tr {
    background: var(--v2-surface-low, #111315);
}

[data-theme="dark"] body:not(.hangout-app) .form-control,
[data-theme="dark"] body:not(.hangout-app) .form-select,
body:not(.hangout-app)[data-theme="dark"] .form-control,
body:not(.hangout-app)[data-theme="dark"] .form-select {
    background: var(--v2-surface-container, #1c1f21);
    color: var(--v2-on-surface, #e2e2e3);
    border-color: var(--v2-outline-variant, #41484d);
}

[data-theme="dark"] body:not(.hangout-app) .form-control:focus,
[data-theme="dark"] body:not(.hangout-app) .form-select:focus,
body:not(.hangout-app)[data-theme="dark"] .form-control:focus,
body:not(.hangout-app)[data-theme="dark"] .form-select:focus {
    border-color: var(--v2-primary, #9333ea);
    background: var(--v2-surface-low, #111315);
    box-shadow: 0 0 0 3px rgba(112, 42, 225, 0.15);
}

[data-theme="dark"] body:not(.hangout-app) .dropdown-menu,
body:not(.hangout-app)[data-theme="dark"] .dropdown-menu {
    background: var(--v2-surface-container, #1c1f21);
    border-color: var(--v2-outline-variant, #41484d);
}

[data-theme="dark"] body:not(.hangout-app) .modal-content,
body:not(.hangout-app)[data-theme="dark"] .modal-content {
    background: var(--v2-surface-low, #111315);
}

[data-theme="dark"] body:not(.hangout-app) .site-footer,
body:not(.hangout-app)[data-theme="dark"] .site-footer {
    background: var(--v2-surface-low, #111315);
    border-top-color: var(--v2-outline-variant, #41484d);
}

[data-theme="dark"] body:not(.hangout-app) .nav-item:hover,
body:not(.hangout-app)[data-theme="dark"] .nav-item:hover {
    background: rgba(164, 118, 255, 0.08);
}

[data-theme="dark"] body:not(.hangout-app) .nav-item.active,
body:not(.hangout-app)[data-theme="dark"] .nav-item.active {
    background: var(--nav-item-active-bg, rgba(164, 118, 255, 0.12));
}

[data-theme="dark"] body:not(.hangout-app) .readiness-item:hover,
body:not(.hangout-app)[data-theme="dark"] .readiness-item:hover {
    background: var(--v2-surface-container, #1c1f21);
}

[data-theme="dark"] body:not(.hangout-app) .readiness-progress-bar,
body:not(.hangout-app)[data-theme="dark"] .readiness-progress-bar {
    background: var(--v2-surface-container, #1c1f21);
}

/* ── Dashboard-Specific V2 Overrides ─────────────────────────── */

/* Stat Cards */
body:not(.hangout-app) .stat-card {
    background: var(--v2-surface-lowest, #ffffff);
    border: 1px solid var(--v2-outline-variant, #abadae20);
    border-radius: var(--v2-radius, 1rem);
    box-shadow: var(--v2-shadow-card, 0 20px 40px rgba(44, 47, 48, 0.04));
    padding: 1rem 1.125rem;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

body:not(.hangout-app) .stat-card:hover {
    box-shadow: var(--v2-shadow-elevated, 0 20px 40px rgba(44, 47, 48, 0.06));
}

body:not(.hangout-app) .stat-card .stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--v2-radius-sm, 0.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body:not(.hangout-app) .stat-purple .stat-icon { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
body:not(.hangout-app) .stat-blue .stat-icon   { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
body:not(.hangout-app) .stat-green .stat-icon  { background: rgba(16, 185, 129, 0.1); color: #10b981; }
body:not(.hangout-app) .stat-amber .stat-icon  { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
body:not(.hangout-app) .stat-red .stat-icon    { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
body:not(.hangout-app) .stat-cyan .stat-icon   { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }

/* .stat-content / .stat-info both stack the value ABOVE the label.
   Without the column flex, span-based markup renders the number inline
   next to the text (the Team-portal "numbers next to the label" bug). */
body:not(.hangout-app) .stat-card .stat-content,
body:not(.hangout-app) .stat-card .stat-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

body:not(.hangout-app) .stat-card .stat-value,
body:not(.hangout-app) .stat-card .stat-info h3 {
    display: block;
    margin: 0;
    line-height: 1.15;
    font-family: var(--v2-font-headline, 'Space Grotesk', sans-serif);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.025em;
    color: var(--v2-on-surface, #2c2f30);
}

body:not(.hangout-app) .stat-card .stat-label,
body:not(.hangout-app) .stat-card .stat-info p {
    display: block;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--v2-on-surface-variant, #595c5d);
}

/* Reusable stat-card grid — self-contained CSS grid so it never depends on
   Bootstrap's .row/.col breakpoints (which collapse stat cards to full-width
   stacks). Auto-fits as many cards per row as fit, wraps below 180px. */
body:not(.hangout-app) .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
/* Labels never clip: wrap inside the card rather than overflow its hidden box */
body:not(.hangout-app) .stat-grid .stat-label {
    white-space: normal;
    overflow-wrap: anywhere;
}
@media (max-width: 575.98px) {
    body:not(.hangout-app) .stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
}

/* Reusable row-action icon button (table/list row actions). Matches the
   gold-standard crisis_support_admin pattern: a 32px square, subtle outline,
   colour only on hover. Use `.action-btn.success` / `.action-btn.info` for
   tinted hovers. Replaces ad-hoc btn-group/btn-outline-* icon clusters. */
body:not(.hangout-app) .action-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--v2-outline-variant, #abadae20);
    background: var(--v2-surface-lowest, #ffffff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--v2-on-surface-variant, #595c5d);
    text-decoration: none;
}
body:not(.hangout-app) .action-btn:hover {
    border-color: var(--v2-primary, #9333ea);
    color: var(--v2-primary, #9333ea);
    background: color-mix(in srgb, var(--v2-primary) 5%, transparent);
}
body:not(.hangout-app) .action-btn.success:hover { border-color: #059669; color: #059669; background: rgba(5, 150, 105, 0.06); }
body:not(.hangout-app) .action-btn.info:hover    { border-color: #2563eb; color: #2563eb; background: rgba(37, 99, 235, 0.06); }

/* Chart & Quick Actions Cards */
body:not(.hangout-app) .chart-card,
body:not(.hangout-app) .quick-actions-card,
body:not(.hangout-app) .info-card {
    background: var(--v2-surface-lowest, #ffffff);
    border: 1px solid var(--v2-outline-variant, #abadae20);
    border-radius: var(--v2-radius, 1rem);
    box-shadow: var(--v2-shadow-card, 0 20px 40px rgba(44, 47, 48, 0.04));
}

body:not(.hangout-app) .chart-header,
body:not(.hangout-app) .quick-actions-header,
body:not(.hangout-app) .info-card-header {
    border-bottom-color: var(--v2-outline-variant, #abadae20);
}

body:not(.hangout-app) .chart-title,
body:not(.hangout-app) .quick-actions-title,
body:not(.hangout-app) .info-card-title {
    font-family: var(--v2-font-headline, 'Space Grotesk', sans-serif);
    font-weight: 700;
    color: var(--v2-on-surface, #2c2f30);
}

body:not(.hangout-app) .chart-title i,
body:not(.hangout-app) .quick-actions-title i,
body:not(.hangout-app) .info-card-title i {
    color: var(--v2-primary, #9333ea);
}

body:not(.hangout-app) .chart-subtitle {
    color: var(--v2-on-surface-variant, #595c5d);
}

body:not(.hangout-app) .info-card-link {
    color: var(--v2-primary, #9333ea);
}

/* Section Titles */
body:not(.hangout-app) .section-title {
    font-family: var(--v2-font-headline, 'Space Grotesk', sans-serif);
    font-weight: 700;
    color: var(--v2-on-surface, #2c2f30);
}

body:not(.hangout-app) .section-title i {
    color: var(--v2-primary, #9333ea);
}

/* Action Cards — v2 surface with softer tints */
body:not(.hangout-app) .action-card {
    border-radius: var(--v2-radius, 1rem);
    box-shadow: var(--v2-shadow-card, 0 20px 40px rgba(44, 47, 48, 0.04));
}

body:not(.hangout-app) .action-card .action-icon {
    border-radius: var(--v2-radius-sm, 0.625rem);
}

body:not(.hangout-app) .action-card .action-title {
    font-weight: 700;
}

/* Quick Action Items — pill-shaped */
body:not(.hangout-app) .quick-action-item {
    border-radius: var(--v2-radius-sm, 0.75rem);
    font-weight: 700;
}

body:not(.hangout-app) .quick-action-item.secondary {
    background: var(--v2-surface-low, #eff1f2);
    color: var(--v2-on-surface, #2c2f30);
    border: 1px solid var(--v2-outline-variant, #abadae20);
}

/* Service Items */
body:not(.hangout-app) .service-name {
    color: var(--v2-on-surface, #2c2f30);
}

body:not(.hangout-app) .service-time {
    color: var(--v2-on-surface-variant, #595c5d);
}

body:not(.hangout-app) .service-item:hover,
body:not(.hangout-app) .service-item.clickable:hover {
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 4%, transparent);
}

body:not(.hangout-app) .service-item.clickable:hover .service-arrow {
    color: var(--v2-primary, #9333ea);
}

/* Activity Items */
body:not(.hangout-app) .activity-text {
    color: var(--v2-on-surface, #2c2f30);
}

body:not(.hangout-app) .activity-time {
    color: var(--v2-on-surface-variant, #595c5d);
}

body:not(.hangout-app) .activity-item:hover {
    background: var(--v2-surface-low, #eff1f2);
}

/* Empty State */
body:not(.hangout-app) .empty-state-mini {
    color: var(--v2-on-surface-variant, #595c5d);
}

/* Sunday Readiness */
body:not(.hangout-app) .readiness-item-label {
    color: var(--v2-on-surface, #2c2f30);
}

body:not(.hangout-app) .readiness-item-hint {
    color: var(--v2-on-surface-variant, #595c5d);
}

body:not(.hangout-app) .readiness-item-action:hover {
    color: var(--v2-primary, #9333ea);
}

/* Org Switcher (dashboard inline) */
body:not(.hangout-app) .org-switcher {
    background: var(--v2-surface-lowest, #ffffff);
    border: 1px solid var(--v2-outline-variant, #abadae20);
    border-radius: var(--v2-radius, 1rem);
    box-shadow: var(--v2-shadow-card);
}

body:not(.hangout-app) .org-switcher-label {
    color: var(--v2-on-surface-variant, #595c5d);
}

/* ── Dashboard Dark Mode ─────────────────────────────────────── */
[data-theme="dark"] body:not(.hangout-app) .stat-card,
body:not(.hangout-app)[data-theme="dark"] .stat-card {
    background: var(--v2-surface-low, #111315);
    border-color: var(--v2-outline-variant, #41484d);
}

[data-theme="dark"] body:not(.hangout-app) .chart-card,
[data-theme="dark"] body:not(.hangout-app) .quick-actions-card,
[data-theme="dark"] body:not(.hangout-app) .info-card,
body:not(.hangout-app)[data-theme="dark"] .chart-card,
body:not(.hangout-app)[data-theme="dark"] .quick-actions-card,
body:not(.hangout-app)[data-theme="dark"] .info-card {
    background: var(--v2-surface-low, #111315);
    border-color: var(--v2-outline-variant, #41484d);
}

[data-theme="dark"] body:not(.hangout-app) .chart-header,
[data-theme="dark"] body:not(.hangout-app) .quick-actions-header,
[data-theme="dark"] body:not(.hangout-app) .info-card-header,
body:not(.hangout-app)[data-theme="dark"] .chart-header,
body:not(.hangout-app)[data-theme="dark"] .quick-actions-header,
body:not(.hangout-app)[data-theme="dark"] .info-card-header {
    border-bottom-color: var(--v2-outline-variant, #41484d);
}

[data-theme="dark"] body:not(.hangout-app) .quick-action-item.secondary,
body:not(.hangout-app)[data-theme="dark"] .quick-action-item.secondary {
    background: var(--v2-surface-container, #1c1f21);
    color: var(--v2-on-surface, #e2e2e3);
    border-color: var(--v2-outline-variant, #41484d);
}

/* Action cards — darker tinted backgrounds */
[data-theme="dark"] body:not(.hangout-app) .action-red,
body:not(.hangout-app)[data-theme="dark"] .action-red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.08) 100%);
    border-color: rgba(239, 68, 68, 0.2);
}
[data-theme="dark"] body:not(.hangout-app) .action-red .action-title,
body:not(.hangout-app)[data-theme="dark"] .action-red .action-title { color: #fca5a5; }
[data-theme="dark"] body:not(.hangout-app) .action-red .action-desc,
body:not(.hangout-app)[data-theme="dark"] .action-red .action-desc { color: #f87171; }

[data-theme="dark"] body:not(.hangout-app) .action-blue,
body:not(.hangout-app)[data-theme="dark"] .action-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.08) 100%);
    border-color: rgba(59, 130, 246, 0.2);
}
[data-theme="dark"] body:not(.hangout-app) .action-blue .action-title,
body:not(.hangout-app)[data-theme="dark"] .action-blue .action-title { color: #93c5fd; }
[data-theme="dark"] body:not(.hangout-app) .action-blue .action-desc,
body:not(.hangout-app)[data-theme="dark"] .action-blue .action-desc { color: #60a5fa; }

[data-theme="dark"] body:not(.hangout-app) .action-amber,
body:not(.hangout-app)[data-theme="dark"] .action-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.08) 100%);
    border-color: rgba(245, 158, 11, 0.2);
}
[data-theme="dark"] body:not(.hangout-app) .action-amber .action-title,
body:not(.hangout-app)[data-theme="dark"] .action-amber .action-title { color: #fcd34d; }
[data-theme="dark"] body:not(.hangout-app) .action-amber .action-desc,
body:not(.hangout-app)[data-theme="dark"] .action-amber .action-desc { color: #fbbf24; }

[data-theme="dark"] body:not(.hangout-app) .action-green,
body:not(.hangout-app)[data-theme="dark"] .action-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.08) 100%);
    border-color: rgba(16, 185, 129, 0.2);
}
[data-theme="dark"] body:not(.hangout-app) .action-green .action-title,
body:not(.hangout-app)[data-theme="dark"] .action-green .action-title { color: #6ee7b7; }
[data-theme="dark"] body:not(.hangout-app) .action-green .action-desc,
body:not(.hangout-app)[data-theme="dark"] .action-green .action-desc { color: #34d399; }

/* Readiness dark mode */
[data-theme="dark"] body:not(.hangout-app) .sunday-readiness-card,
body:not(.hangout-app)[data-theme="dark"] .sunday-readiness-card {
    background: var(--v2-surface-low, #111315);
    border-color: var(--v2-outline-variant, #41484d);
}

[data-theme="dark"] body:not(.hangout-app) .readiness-header,
body:not(.hangout-app)[data-theme="dark"] .readiness-header {
    border-bottom-color: var(--v2-outline-variant, #41484d);
}

[data-theme="dark"] body:not(.hangout-app) .readiness-icon,
body:not(.hangout-app)[data-theme="dark"] .readiness-icon {
    background: rgba(245, 158, 11, 0.15);
}

[data-theme="dark"] body:not(.hangout-app) .readiness-check-icon,
body:not(.hangout-app)[data-theme="dark"] .readiness-check-icon {
    border-color: var(--v2-outline-variant, #41484d);
}

[data-theme="dark"] body:not(.hangout-app) .readiness-footer,
body:not(.hangout-app)[data-theme="dark"] .readiness-footer {
    background: rgba(16, 185, 129, 0.08);
    border-top-color: rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] body:not(.hangout-app) .readiness-complete-msg,
body:not(.hangout-app)[data-theme="dark"] .readiness-complete-msg {
    color: #6ee7b7;
}

/* Org switcher dark mode */
[data-theme="dark"] body:not(.hangout-app) .org-switcher,
body:not(.hangout-app)[data-theme="dark"] .org-switcher {
    background: var(--v2-surface-low, #111315);
    border-color: var(--v2-outline-variant, #41484d);
}

/* Auto dark mode support */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] body:not(.hangout-app) .sidebar-enhanced,
    body:not(.hangout-app)[data-theme="auto"] .sidebar-enhanced {
        background: var(--v2-surface-low, #111315);
        border-right-color: var(--v2-outline-variant, #41484d);
    }

    [data-theme="auto"] body:not(.hangout-app) .sidebar-user,
    body:not(.hangout-app)[data-theme="auto"] .sidebar-user {
        background: var(--v2-surface-container, #1c1f21);
    }

    [data-theme="auto"] body:not(.hangout-app) .card,
    [data-theme="auto"] body:not(.hangout-app) .dashboard-card,
    body:not(.hangout-app)[data-theme="auto"] .card,
    body:not(.hangout-app)[data-theme="auto"] .dashboard-card {
        background: var(--v2-surface-low, #111315);
        border-color: var(--v2-outline-variant, #41484d);
    }

    [data-theme="auto"] body:not(.hangout-app) .table tbody tr,
    body:not(.hangout-app)[data-theme="auto"] .table tbody tr {
        background: var(--v2-surface-low, #111315);
    }

    [data-theme="auto"] body:not(.hangout-app) .form-control,
    [data-theme="auto"] body:not(.hangout-app) .form-select,
    body:not(.hangout-app)[data-theme="auto"] .form-control,
    body:not(.hangout-app)[data-theme="auto"] .form-select {
        background: var(--v2-surface-container, #1c1f21);
        color: var(--v2-on-surface, #e2e2e3);
        border-color: var(--v2-outline-variant, #41484d);
    }

    [data-theme="auto"] body:not(.hangout-app) .modal-content,
    body:not(.hangout-app)[data-theme="auto"] .modal-content {
        background: var(--v2-surface-low, #111315);
    }

    [data-theme="auto"] body:not(.hangout-app) .site-footer,
    body:not(.hangout-app)[data-theme="auto"] .site-footer {
        background: var(--v2-surface-low, #111315);
        border-top-color: var(--v2-outline-variant, #41484d);
    }

    [data-theme="auto"] body:not(.hangout-app) .dropdown-menu,
    body:not(.hangout-app)[data-theme="auto"] .dropdown-menu {
        background: var(--v2-surface-container, #1c1f21);
        border-color: var(--v2-outline-variant, #41484d);
    }

    [data-theme="auto"] body:not(.hangout-app) .nav-item:hover,
    body:not(.hangout-app)[data-theme="auto"] .nav-item:hover {
        background: rgba(164, 118, 255, 0.08);
    }

    [data-theme="auto"] body:not(.hangout-app) .nav-item.active,
    body:not(.hangout-app)[data-theme="auto"] .nav-item.active {
        background: rgba(164, 118, 255, 0.12);
    }

    /* Dashboard auto dark */
    [data-theme="auto"] body:not(.hangout-app) .stat-card,
    body:not(.hangout-app)[data-theme="auto"] .stat-card {
        background: var(--v2-surface-low, #111315);
        border-color: var(--v2-outline-variant, #41484d);
    }

    [data-theme="auto"] body:not(.hangout-app) .chart-card,
    [data-theme="auto"] body:not(.hangout-app) .quick-actions-card,
    [data-theme="auto"] body:not(.hangout-app) .info-card,
    body:not(.hangout-app)[data-theme="auto"] .chart-card,
    body:not(.hangout-app)[data-theme="auto"] .quick-actions-card,
    body:not(.hangout-app)[data-theme="auto"] .info-card {
        background: var(--v2-surface-low, #111315);
        border-color: var(--v2-outline-variant, #41484d);
    }

    [data-theme="auto"] body:not(.hangout-app) .chart-header,
    [data-theme="auto"] body:not(.hangout-app) .quick-actions-header,
    [data-theme="auto"] body:not(.hangout-app) .info-card-header,
    body:not(.hangout-app)[data-theme="auto"] .chart-header,
    body:not(.hangout-app)[data-theme="auto"] .quick-actions-header,
    body:not(.hangout-app)[data-theme="auto"] .info-card-header {
        border-bottom-color: var(--v2-outline-variant, #41484d);
    }

    [data-theme="auto"] body:not(.hangout-app) .quick-action-item.secondary,
    body:not(.hangout-app)[data-theme="auto"] .quick-action-item.secondary {
        background: var(--v2-surface-container, #1c1f21);
        color: var(--v2-on-surface, #e2e2e3);
        border-color: var(--v2-outline-variant, #41484d);
    }

    [data-theme="auto"] body:not(.hangout-app) .action-red,
    body:not(.hangout-app)[data-theme="auto"] .action-red {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.08));
        border-color: rgba(239, 68, 68, 0.2);
    }
    [data-theme="auto"] body:not(.hangout-app) .action-red .action-title,
    body:not(.hangout-app)[data-theme="auto"] .action-red .action-title { color: #fca5a5; }

    [data-theme="auto"] body:not(.hangout-app) .action-blue,
    body:not(.hangout-app)[data-theme="auto"] .action-blue {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.08));
        border-color: rgba(59, 130, 246, 0.2);
    }
    [data-theme="auto"] body:not(.hangout-app) .action-blue .action-title,
    body:not(.hangout-app)[data-theme="auto"] .action-blue .action-title { color: #93c5fd; }

    [data-theme="auto"] body:not(.hangout-app) .action-amber,
    body:not(.hangout-app)[data-theme="auto"] .action-amber {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.08));
        border-color: rgba(245, 158, 11, 0.2);
    }
    [data-theme="auto"] body:not(.hangout-app) .action-amber .action-title,
    body:not(.hangout-app)[data-theme="auto"] .action-amber .action-title { color: #fcd34d; }

    [data-theme="auto"] body:not(.hangout-app) .action-green,
    body:not(.hangout-app)[data-theme="auto"] .action-green {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.08));
        border-color: rgba(16, 185, 129, 0.2);
    }
    [data-theme="auto"] body:not(.hangout-app) .action-green .action-title,
    body:not(.hangout-app)[data-theme="auto"] .action-green .action-title { color: #6ee7b7; }

    [data-theme="auto"] body:not(.hangout-app) .sunday-readiness-card,
    body:not(.hangout-app)[data-theme="auto"] .sunday-readiness-card {
        background: var(--v2-surface-low, #111315);
        border-color: var(--v2-outline-variant, #41484d);
    }

    [data-theme="auto"] body:not(.hangout-app) .readiness-header,
    body:not(.hangout-app)[data-theme="auto"] .readiness-header {
        border-bottom-color: var(--v2-outline-variant, #41484d);
    }

    [data-theme="auto"] body:not(.hangout-app) .readiness-footer,
    body:not(.hangout-app)[data-theme="auto"] .readiness-footer {
        background: rgba(16, 185, 129, 0.08);
        border-top-color: rgba(16, 185, 129, 0.15);
    }

    [data-theme="auto"] body:not(.hangout-app) .org-switcher,
    body:not(.hangout-app)[data-theme="auto"] .org-switcher {
        background: var(--v2-surface-low, #111315);
        border-color: var(--v2-outline-variant, #41484d);
    }
}

/* ── Sidebar User Action Buttons ───────────────────────────────── */
body:not(.hangout-app) .user-action-btn {
    gap: 0.5rem;
}
body:not(.hangout-app) .user-action-btn svg {
    margin-right: 0.375rem;
    flex-shrink: 0;
}

/* ── Nav Church Branding Subtitle ──────────────────────────────── */
body:not(.hangout-app) .org-type-subtitle {
    display: block;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--v2-on-surface-variant, #595c5d);
    margin-top: 0.125rem;
    line-height: 1;
}

body:not(.hangout-app) .organization-logo-fallback {
    background: linear-gradient(135deg, var(--v2-primary, #9333ea), #9333ea);
}

[data-theme="dark"] body:not(.hangout-app) .org-type-subtitle,
body:not(.hangout-app)[data-theme="dark"] .org-type-subtitle {
    color: #8e9192;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 1 — Design-Mockup Pattern Enhancements
   Border-left accents, micro-labels, gradient buttons,
   pulse dots, hover reveals, oversized background icons
   ═══════════════════════════════════════════════════════════════ */

/* ── Border-Left Accents on Stat Cards ────────────────────────── */
body:not(.hangout-app) .stat-purple  { border-left: 4px solid #8b5cf6; }
body:not(.hangout-app) .stat-green   { border-left: 4px solid #10b981; }
body:not(.hangout-app) .stat-cyan    { border-left: 4px solid #06b6d4; }
body:not(.hangout-app) .stat-red     { border-left: 4px solid #ef4444; }
body:not(.hangout-app) .stat-amber   { border-left: 4px solid #f59e0b; }
body:not(.hangout-app) .stat-blue    { border-left: 4px solid #3b82f6; }
body:not(.hangout-app) .stat-gray    { border-left: 4px solid #6b7280; }
body:not(.hangout-app) .stat-orange  { border-left: 4px solid #f97316; }
body:not(.hangout-app) .stat-yellow  { border-left: 4px solid #eab308; }

/* ── Animated Pulse Dot for Urgent Badges ─────────────────────── */
@keyframes crm-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.6); }
}

body:not(.hangout-app) .badge.bg-danger::before,
body:not(.hangout-app) .badge.bg-urgent::before,
body:not(.hangout-app) .urgency-badge.high::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 0.375rem;
    vertical-align: middle;
    animation: crm-pulse 1.5s ease-in-out infinite;
}

/* ── Hover-Reveal Action Buttons ──────────────────────────────── */
body:not(.hangout-app) .stat-card .stat-arrow,
body:not(.hangout-app) .card .card-action-hover {
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s ease;
}
body:not(.hangout-app) .stat-card:hover .stat-arrow,
body:not(.hangout-app) .card:hover .card-action-hover {
    opacity: 1;
    transform: translateX(0);
}

/* ── Oversized Background Icon on Stat Cards ──────────────────── */
body:not(.hangout-app) .stat-card .stat-bg-icon {
    position: absolute;
    right: -4px;
    bottom: -6px;
    width: 56px;
    height: 56px;
    opacity: 0.06;
    pointer-events: none;
    color: var(--v2-on-surface, #2c2f30);
}
body:not(.hangout-app) .stat-purple .stat-bg-icon  { color: #8b5cf6; opacity: 0.08; }
body:not(.hangout-app) .stat-green  .stat-bg-icon  { color: #10b981; opacity: 0.08; }
body:not(.hangout-app) .stat-cyan   .stat-bg-icon  { color: #06b6d4; opacity: 0.08; }
body:not(.hangout-app) .stat-red    .stat-bg-icon  { color: #ef4444; opacity: 0.08; }
body:not(.hangout-app) .stat-amber  .stat-bg-icon  { color: #f59e0b; opacity: 0.08; }
body:not(.hangout-app) .stat-blue   .stat-bg-icon  { color: #3b82f6; opacity: 0.08; }
body:not(.hangout-app) .stat-gray   .stat-bg-icon  { color: #6b7280; opacity: 0.08; }
body:not(.hangout-app) .stat-orange .stat-bg-icon  { color: #f97316; opacity: 0.08; }
body:not(.hangout-app) .stat-yellow .stat-bg-icon  { color: #eab308; opacity: 0.08; }

/* ── Section Title Enhancement ────────────────────────────────── */
body:not(.hangout-app) .section-title,
body:not(.hangout-app) .card-header h5,
body:not(.hangout-app) .card-header h6 {
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--v2-on-surface-variant, #595c5d);
}

/* ── Scripture / Mission Banner ───────────────────────────────── */
body:not(.hangout-app) .org-banner-subtitle,
body:not(.hangout-app) .mission-text {
    font-style: italic;
    font-size: 0.8125rem;
    color: var(--v2-on-surface-variant, #595c5d);
    line-height: 1.5;
}

/* Custom urgency badge colors */
body:not(.hangout-app) .badge.bg-urgent {
    background: #ef4444;
    color: #fff;
}
body:not(.hangout-app) .badge.bg-high {
    background: #f59e0b;
    color: #fff;
}

/* ── Table Card-Style Rows ────────────────────────────────────── */
body:not(.hangout-app) .table > tbody > tr {
    transition: background 0.15s ease;
}
body:not(.hangout-app) .table > tbody > tr:hover {
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 3%, transparent);
}

/* ── Reduced Motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    body:not(.hangout-app) .badge.bg-danger::before,
    body:not(.hangout-app) .badge.bg-urgent::before,
    body:not(.hangout-app) .urgency-badge.high::before {
        animation: none;
    }
    body:not(.hangout-app) .prayer-card:hover,
    body:not(.hangout-app) .stat-card:hover {
        transform: none;
    }
}

/* ── Touch Device Fallback (no hover) ─────────────────────────── */
@media (hover: none) {
    body:not(.hangout-app) .prayer-card__actions {
        opacity: 1;
        transform: translateX(0);
    }
    body:not(.hangout-app) .stat-card .stat-arrow,
    body:not(.hangout-app) .card .card-action-hover {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Dark Mode for Phase 1 additions ──────────────────────────── */
[data-theme="dark"] body:not(.hangout-app) .stat-card .stat-label,
body:not(.hangout-app)[data-theme="dark"] .stat-card .stat-label {
    color: var(--v2-on-surface-variant, #c1c7ce);
}

[data-theme="dark"] body:not(.hangout-app) .stat-card .stat-bg-icon,
body:not(.hangout-app)[data-theme="dark"] .stat-card .stat-bg-icon {
    opacity: 0.04;
}
[data-theme="dark"] body:not(.hangout-app) .stat-purple .stat-bg-icon,
body:not(.hangout-app)[data-theme="dark"] .stat-purple .stat-bg-icon { opacity: 0.06; }
[data-theme="dark"] body:not(.hangout-app) .stat-green .stat-bg-icon,
body:not(.hangout-app)[data-theme="dark"] .stat-green .stat-bg-icon { opacity: 0.06; }
[data-theme="dark"] body:not(.hangout-app) .stat-red .stat-bg-icon,
body:not(.hangout-app)[data-theme="dark"] .stat-red .stat-bg-icon { opacity: 0.06; }
[data-theme="dark"] body:not(.hangout-app) .stat-cyan .stat-bg-icon,
body:not(.hangout-app)[data-theme="dark"] .stat-cyan .stat-bg-icon { opacity: 0.06; }
[data-theme="dark"] body:not(.hangout-app) .stat-amber .stat-bg-icon,
body:not(.hangout-app)[data-theme="dark"] .stat-amber .stat-bg-icon { opacity: 0.06; }
[data-theme="dark"] body:not(.hangout-app) .stat-blue .stat-bg-icon,
body:not(.hangout-app)[data-theme="dark"] .stat-blue .stat-bg-icon { opacity: 0.06; }
[data-theme="dark"] body:not(.hangout-app) .stat-gray .stat-bg-icon,
body:not(.hangout-app)[data-theme="dark"] .stat-gray .stat-bg-icon { opacity: 0.06; }
[data-theme="dark"] body:not(.hangout-app) .stat-orange .stat-bg-icon,
body:not(.hangout-app)[data-theme="dark"] .stat-orange .stat-bg-icon { opacity: 0.06; }
[data-theme="dark"] body:not(.hangout-app) .stat-yellow .stat-bg-icon,
body:not(.hangout-app)[data-theme="dark"] .stat-yellow .stat-bg-icon { opacity: 0.06; }

[data-theme="dark"] body:not(.hangout-app) .section-title,
[data-theme="dark"] body:not(.hangout-app) .card-header h5,
[data-theme="dark"] body:not(.hangout-app) .card-header h6,
body:not(.hangout-app)[data-theme="dark"] .section-title,
body:not(.hangout-app)[data-theme="dark"] .card-header h5,
body:not(.hangout-app)[data-theme="dark"] .card-header h6 {
    color: var(--v2-on-surface-variant, #c1c7ce);
}

[data-theme="dark"] body:not(.hangout-app) .table > tbody > tr:hover,
body:not(.hangout-app)[data-theme="dark"] .table > tbody > tr:hover {
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 5%, transparent);
}

/* Dark mode border-left accents (slightly muted) */
[data-theme="dark"] body:not(.hangout-app) .stat-purple,
body:not(.hangout-app)[data-theme="dark"] .stat-purple  { border-left-color: #a78bfa; }
[data-theme="dark"] body:not(.hangout-app) .stat-green,
body:not(.hangout-app)[data-theme="dark"] .stat-green   { border-left-color: #34d399; }
[data-theme="dark"] body:not(.hangout-app) .stat-cyan,
body:not(.hangout-app)[data-theme="dark"] .stat-cyan    { border-left-color: #22d3ee; }
[data-theme="dark"] body:not(.hangout-app) .stat-red,
body:not(.hangout-app)[data-theme="dark"] .stat-red     { border-left-color: #f87171; }
[data-theme="dark"] body:not(.hangout-app) .stat-amber,
body:not(.hangout-app)[data-theme="dark"] .stat-amber   { border-left-color: #fbbf24; }
[data-theme="dark"] body:not(.hangout-app) .stat-blue,
body:not(.hangout-app)[data-theme="dark"] .stat-blue    { border-left-color: #60a5fa; }
[data-theme="dark"] body:not(.hangout-app) .stat-gray,
body:not(.hangout-app)[data-theme="dark"] .stat-gray    { border-left-color: #9ca3af; }
[data-theme="dark"] body:not(.hangout-app) .stat-orange,
body:not(.hangout-app)[data-theme="dark"] .stat-orange  { border-left-color: #fb923c; }
[data-theme="dark"] body:not(.hangout-app) .stat-yellow,
body:not(.hangout-app)[data-theme="dark"] .stat-yellow  { border-left-color: #facc15; }

/* ── Auto dark mode for Phase 1 ───────────────────────────────── */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] body:not(.hangout-app) .stat-card .stat-label,
    body:not(.hangout-app)[data-theme="auto"] .stat-card .stat-label {
        color: var(--v2-on-surface-variant, #c1c7ce);
    }

    [data-theme="auto"] body:not(.hangout-app) .stat-card .stat-bg-icon,
    body:not(.hangout-app)[data-theme="auto"] .stat-card .stat-bg-icon { opacity: 0.04; }
    [data-theme="auto"] body:not(.hangout-app) .stat-purple .stat-bg-icon,
    body:not(.hangout-app)[data-theme="auto"] .stat-purple .stat-bg-icon { opacity: 0.06; }
    [data-theme="auto"] body:not(.hangout-app) .stat-green .stat-bg-icon,
    body:not(.hangout-app)[data-theme="auto"] .stat-green .stat-bg-icon { opacity: 0.06; }
    [data-theme="auto"] body:not(.hangout-app) .stat-red .stat-bg-icon,
    body:not(.hangout-app)[data-theme="auto"] .stat-red .stat-bg-icon { opacity: 0.06; }
    [data-theme="auto"] body:not(.hangout-app) .stat-cyan .stat-bg-icon,
    body:not(.hangout-app)[data-theme="auto"] .stat-cyan .stat-bg-icon { opacity: 0.06; }
    [data-theme="auto"] body:not(.hangout-app) .stat-amber .stat-bg-icon,
    body:not(.hangout-app)[data-theme="auto"] .stat-amber .stat-bg-icon { opacity: 0.06; }
    [data-theme="auto"] body:not(.hangout-app) .stat-blue .stat-bg-icon,
    body:not(.hangout-app)[data-theme="auto"] .stat-blue .stat-bg-icon { opacity: 0.06; }
    [data-theme="auto"] body:not(.hangout-app) .stat-gray .stat-bg-icon,
    body:not(.hangout-app)[data-theme="auto"] .stat-gray .stat-bg-icon { opacity: 0.06; }
    [data-theme="auto"] body:not(.hangout-app) .stat-orange .stat-bg-icon,
    body:not(.hangout-app)[data-theme="auto"] .stat-orange .stat-bg-icon { opacity: 0.06; }
    [data-theme="auto"] body:not(.hangout-app) .stat-yellow .stat-bg-icon,
    body:not(.hangout-app)[data-theme="auto"] .stat-yellow .stat-bg-icon { opacity: 0.06; }

    [data-theme="auto"] body:not(.hangout-app) .section-title,
    [data-theme="auto"] body:not(.hangout-app) .card-header h5,
    [data-theme="auto"] body:not(.hangout-app) .card-header h6,
    body:not(.hangout-app)[data-theme="auto"] .section-title,
    body:not(.hangout-app)[data-theme="auto"] .card-header h5,
    body:not(.hangout-app)[data-theme="auto"] .card-header h6 {
        color: var(--v2-on-surface-variant, #c1c7ce);
    }

    [data-theme="auto"] body:not(.hangout-app) .table > tbody > tr:hover,
    body:not(.hangout-app)[data-theme="auto"] .table > tbody > tr:hover {
        background: color-mix(in srgb, var(--v2-primary, #9333ea) 5%, transparent);
    }

    [data-theme="auto"] body:not(.hangout-app) .stat-purple,
    body:not(.hangout-app)[data-theme="auto"] .stat-purple  { border-left-color: #a78bfa; }
    [data-theme="auto"] body:not(.hangout-app) .stat-green,
    body:not(.hangout-app)[data-theme="auto"] .stat-green   { border-left-color: #34d399; }
    [data-theme="auto"] body:not(.hangout-app) .stat-cyan,
    body:not(.hangout-app)[data-theme="auto"] .stat-cyan    { border-left-color: #22d3ee; }
    [data-theme="auto"] body:not(.hangout-app) .stat-red,
    body:not(.hangout-app)[data-theme="auto"] .stat-red     { border-left-color: #f87171; }
    [data-theme="auto"] body:not(.hangout-app) .stat-amber,
    body:not(.hangout-app)[data-theme="auto"] .stat-amber   { border-left-color: #fbbf24; }
    [data-theme="auto"] body:not(.hangout-app) .stat-blue,
    body:not(.hangout-app)[data-theme="auto"] .stat-blue    { border-left-color: #60a5fa; }
    [data-theme="auto"] body:not(.hangout-app) .stat-gray,
    body:not(.hangout-app)[data-theme="auto"] .stat-gray    { border-left-color: #9ca3af; }
    [data-theme="auto"] body:not(.hangout-app) .stat-orange,
    body:not(.hangout-app)[data-theme="auto"] .stat-orange  { border-left-color: #fb923c; }
    [data-theme="auto"] body:not(.hangout-app) .stat-yellow,
    body:not(.hangout-app)[data-theme="auto"] .stat-yellow  { border-left-color: #facc15; }
}

/* ═══════════════════════════════════════════════════════════════
   Prayer Request Cards — Card Grid Layout
   ═══════════════════════════════════════════════════════════════ */

body:not(.hangout-app) .prayer-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.75rem;
    padding: 1.25rem;
}

body:not(.hangout-app) .prayer-card {
    position: relative;
    overflow: hidden;
    background: var(--v2-surface-lowest, #ffffff);
    border: 1px solid var(--v2-outline-variant, #abadae20);
    border-radius: var(--v2-radius, 1rem);
    padding: 1rem 1.125rem;
    transition: all 0.2s ease;
    cursor: pointer;
}
body:not(.hangout-app) .prayer-card:hover {
    box-shadow: var(--v2-shadow-card, 0 20px 40px rgba(44, 47, 48, 0.06));
    transform: translateY(-1px);
}

/* Border-left urgency accents */
body:not(.hangout-app) .prayer-card--high { border-left: 4px solid #ef4444; }
body:not(.hangout-app) .prayer-card--medium { border-left: 4px solid #f59e0b; }
body:not(.hangout-app) .prayer-card--low { border-left: 4px solid #6b7280; }

/* Background icon */
body:not(.hangout-app) .prayer-card__bg-icon {
    position: absolute;
    right: -4px;
    bottom: -6px;
    width: 56px;
    height: 56px;
    opacity: 0.04;
    pointer-events: none;
    color: var(--v2-on-surface, #2c2f30);
}
body:not(.hangout-app) .prayer-card--high .prayer-card__bg-icon { color: #ef4444; opacity: 0.06; }
body:not(.hangout-app) .prayer-card--medium .prayer-card__bg-icon { color: #f59e0b; opacity: 0.06; }

/* Header row */
body:not(.hangout-app) .prayer-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.625rem;
}

body:not(.hangout-app) .prayer-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body:not(.hangout-app) .prayer-card__date {
    font-size: 0.6875rem;
    color: var(--v2-on-surface-variant, #595c5d);
    font-weight: 500;
}

/* Hover-reveal action buttons */
body:not(.hangout-app) .prayer-card__actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s ease;
}
body:not(.hangout-app) .prayer-card:hover .prayer-card__actions {
    opacity: 1;
    transform: translateX(0);
}

body:not(.hangout-app) .prayer-card__action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v2-surface-low, #eff1f2);
    border: none;
    border-radius: 0.5rem;
    color: var(--v2-on-surface-variant, #595c5d);
    cursor: pointer;
    transition: all 0.15s ease;
}
body:not(.hangout-app) .prayer-card__action-btn:hover {
    background: var(--v2-primary, #9333ea);
    color: #fff;
}
body:not(.hangout-app) .prayer-card__action-btn--success:hover {
    background: #10b981;
    color: #fff;
}

/* Title */
body:not(.hangout-app) .prayer-card__title {
    font-family: var(--v2-font-headline, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--v2-on-surface, #2c2f30);
    margin: 0 0 0.25rem;
    line-height: 1.3;
}

/* Excerpt */
body:not(.hangout-app) .prayer-card__excerpt {
    font-size: 0.8125rem;
    color: var(--v2-on-surface-variant, #595c5d);
    line-height: 1.5;
    margin: 0 0 0.75rem;
}

/* Footer */
body:not(.hangout-app) .prayer-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.625rem;
    border-top: 1px solid var(--v2-outline-variant, #abadae15);
}

body:not(.hangout-app) .prayer-card__requester {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--v2-on-surface-variant, #595c5d);
    font-weight: 500;
}

body:not(.hangout-app) .prayer-card__unassigned {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--v2-on-surface-variant, #595c5d);
    opacity: 0.7;
}

/* ── Prayer Card Dark Mode ────────────────────────────────────── */
[data-theme="dark"] body:not(.hangout-app) .prayer-card,
body[data-theme="dark"]:not(.hangout-app) .prayer-card,
html[data-theme="dark"] body:not(.hangout-app) .prayer-card {
    background-color: #111315;
    border-color: #41484d;
}
[data-theme="dark"] body:not(.hangout-app) .prayer-card:hover,
body:not(.hangout-app)[data-theme="dark"] .prayer-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] body:not(.hangout-app) .prayer-card--high,
body:not(.hangout-app)[data-theme="dark"] .prayer-card--high { border-left-color: #f87171; }
[data-theme="dark"] body:not(.hangout-app) .prayer-card--medium,
body:not(.hangout-app)[data-theme="dark"] .prayer-card--medium { border-left-color: #fbbf24; }
[data-theme="dark"] body:not(.hangout-app) .prayer-card--low,
body:not(.hangout-app)[data-theme="dark"] .prayer-card--low { border-left-color: #9ca3af; }

[data-theme="dark"] body:not(.hangout-app) .prayer-card__title,
body:not(.hangout-app)[data-theme="dark"] .prayer-card__title { color: #e2e2e3; }
[data-theme="dark"] body:not(.hangout-app) .prayer-card__excerpt,
[data-theme="dark"] body:not(.hangout-app) .prayer-card__date,
[data-theme="dark"] body:not(.hangout-app) .prayer-card__requester,
body:not(.hangout-app)[data-theme="dark"] .prayer-card__excerpt,
body:not(.hangout-app)[data-theme="dark"] .prayer-card__date,
body:not(.hangout-app)[data-theme="dark"] .prayer-card__requester { color: #c1c7ce; }

[data-theme="dark"] body:not(.hangout-app) .prayer-card__footer,
body:not(.hangout-app)[data-theme="dark"] .prayer-card__footer {
    border-top-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] body:not(.hangout-app) .prayer-card__action-btn,
body:not(.hangout-app)[data-theme="dark"] .prayer-card__action-btn {
    background: rgba(255, 255, 255, 0.06);
    color: #c1c7ce;
}

/* ── Prayer Card Auto Dark ────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] body:not(.hangout-app) .prayer-card,
    body[data-theme="auto"]:not(.hangout-app) .prayer-card,
    html[data-theme="auto"] body:not(.hangout-app) .prayer-card {
        background-color: #111315;
        border-color: #41484d;
    }
    [data-theme="auto"] body:not(.hangout-app) .prayer-card:hover,
    body:not(.hangout-app)[data-theme="auto"] .prayer-card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }
    [data-theme="auto"] body:not(.hangout-app) .prayer-card--high,
    body:not(.hangout-app)[data-theme="auto"] .prayer-card--high { border-left-color: #f87171; }
    [data-theme="auto"] body:not(.hangout-app) .prayer-card--medium,
    body:not(.hangout-app)[data-theme="auto"] .prayer-card--medium { border-left-color: #fbbf24; }
    [data-theme="auto"] body:not(.hangout-app) .prayer-card--low,
    body:not(.hangout-app)[data-theme="auto"] .prayer-card--low { border-left-color: #9ca3af; }

    [data-theme="auto"] body:not(.hangout-app) .prayer-card__title,
    body:not(.hangout-app)[data-theme="auto"] .prayer-card__title { color: #e2e2e3; }
    [data-theme="auto"] body:not(.hangout-app) .prayer-card__excerpt,
    [data-theme="auto"] body:not(.hangout-app) .prayer-card__date,
    [data-theme="auto"] body:not(.hangout-app) .prayer-card__requester,
    body:not(.hangout-app)[data-theme="auto"] .prayer-card__excerpt,
    body:not(.hangout-app)[data-theme="auto"] .prayer-card__date,
    body:not(.hangout-app)[data-theme="auto"] .prayer-card__requester { color: #c1c7ce; }

    [data-theme="auto"] body:not(.hangout-app) .prayer-card__footer,
    body:not(.hangout-app)[data-theme="auto"] .prayer-card__footer {
        border-top-color: rgba(255, 255, 255, 0.06);
    }
    [data-theme="auto"] body:not(.hangout-app) .prayer-card__action-btn,
    body:not(.hangout-app)[data-theme="auto"] .prayer-card__action-btn {
        background: rgba(255, 255, 255, 0.06);
        color: #c1c7ce;
    }
}

/* ===== KAC redesign — icon-rail nav (collapses the existing sidebar to a
   72px icon rail; preserves all routes/role-gating; desktop only so the
   mobile off-canvas nav is untouched). Labels appear on hover. ===== */
/* Labeled rail: icons WITH persistent text labels (icon-only nav hurt
   discoverability + a11y + broke on touch, and the 76px rail left a dead gap
   because content margin stayed at --sidebar-width). Rail width is synced to
   --sidebar-width so the content sits flush. */
@media (min-width: 992px) {
  body:not(.hangout-app) { --sidebar-width: 208px; }
  body:not(.hangout-app) .sidebar-enhanced { width: 208px !important; min-width: 208px !important; }
  /* Hide the org-type subtitle + bottom user block. KEEP the org switcher
     (name + chevron) visible — it is now the single, consistent church switcher
     on EVERY page. (The dashboard's bespoke content-header switcher was removed
     so there are not two competing controls.) */
  body:not(.hangout-app) .sidebar-enhanced .org-type-subtitle,
  body:not(.hangout-app) .sidebar-enhanced .user-info,
  body:not(.hangout-app) .sidebar-enhanced .user-actions { display: none !important; }

  /* Rail header = a discoverable workspace/church switcher: crest + name +
     chevron read as ONE tappable control (Slack/Notion convention). The legacy
     navigation-enhanced.css renders it as flat borderless text that does not
     read as a control — give it a bordered pill + hover affordance. */
  body:not(.hangout-app) .sidebar-enhanced .organization-info { flex: 1 1 auto; min-width: 0; }
  body:not(.hangout-app) .sidebar-enhanced .org-switcher-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
    border: 1px solid var(--v2-outline-variant, #e7e8ee) !important;
    background: var(--v2-surface-lowest, #ffffff) !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
  }
  body:not(.hangout-app) .sidebar-enhanced .org-switcher-btn:hover {
    background: var(--v2-surface-low, #f1f5f9) !important;
    border-color: var(--v2-primary, #9333ea) !important;
  }
  body:not(.hangout-app) .sidebar-enhanced .org-switcher-btn .organization-name {
    flex: 1 1 auto; min-width: 0; font-size: 0.82rem !important;
  }
  body:not(.hangout-app) .sidebar-enhanced .org-switcher-chevron {
    flex: 0 0 auto; color: var(--v2-on-surface-variant, #595c5d) !important;
  }
  body:not(.hangout-app) .sidebar-enhanced .nav-group-header { font-size: 0.62rem !important; letter-spacing: 0.07em; opacity: 0.65; padding: 10px 16px 4px !important; }
  body:not(.hangout-app) .sidebar-enhanced .nav-item-content { gap: 0.7rem !important; }
  body:not(.hangout-app) .sidebar-enhanced .nav-item-content span { display: inline !important; font-size: 0.85rem; }
  /* Active state: subtle tinted pill, not a solid fill (the solid block read as
     disruptive — max-contrast vs the quiet text rows + competing with the page's
     other purple chips/buttons). Colour defers to the --nav-item-active-* tokens
     (single source: design-tokens.css light / crm-dark-mode.css dark); this
     desktop-rail block only owns layout (radius/margin) + the !important needed
     to beat the legacy navigation-enhanced.css rules at this width. */
  body:not(.hangout-app) .sidebar-enhanced .nav-item.active { background: var(--nav-item-active-bg, rgba(147, 51, 234, 0.1)) !important; border-radius: 12px !important; margin: 2px 10px !important; }
  body:not(.hangout-app) .sidebar-enhanced .nav-item.active i,
  body:not(.hangout-app) .sidebar-enhanced .nav-item.active svg,
  body:not(.hangout-app) .sidebar-enhanced .nav-item.active span { color: var(--nav-item-active-text, var(--v2-primary, #9333ea)) !important; stroke: var(--nav-item-active-text, var(--v2-primary, #9333ea)) !important; }
}

/* ===== KAC redesign — reusable editorial page header (replaces gradient
   app-banners across CRM screens; prototype: big Space Grotesk title +
   sub-line + dark CTA pill). ===== */
body:not(.hangout-app) .crm-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin:0.5rem 0 1.5rem; flex-wrap:wrap; }
body:not(.hangout-app) .crm-page-title { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2.4rem; letter-spacing:-0.03em; color:var(--v2-on-surface,#0f172a); margin:0; line-height:1.05; }
body:not(.hangout-app) .crm-page-sub { color:var(--v2-on-surface-variant,#64748b); font-size:0.95rem; margin-top:0.35rem; }
body:not(.hangout-app) .crm-page-cta { display:inline-flex; align-items:center; gap:0.5rem; background:var(--v2-on-surface,#0f172a); color:#fff; border:none; border-radius:14px; padding:0.8rem 1.3rem; font-weight:600; font-size:0.92rem; cursor:pointer; text-decoration:none; box-shadow:0 8px 22px -10px rgba(15,23,42,0.5); }
body:not(.hangout-app) .crm-page-cta:hover { opacity:0.92; color:#fff; }
body:not(.hangout-app) .crm-page-cta--ghost { background:transparent; color:var(--v2-on-surface,#0f172a); border:1.5px solid var(--v2-outline,#e2e8f0); box-shadow:none; }
body:not(.hangout-app) .crm-page-cta--ghost:hover { background:var(--v2-surface-variant,#f1f5f9); color:var(--v2-on-surface,#0f172a); opacity:1; }
@media (max-width:820px){ body:not(.hangout-app) .crm-page-title{ font-size:1.9rem; } }

/* ===== Stacked two-column page rows: restore vertical rhythm =====
   On a two-column page (form col + sidebar col), Bootstrap's default
   --bs-gutter-y is 0, so when the columns wrap below `lg` the form's trailing
   action-button row sits flush against the sidebar card beneath it (0px gap —
   e.g. "Create Location / Cancel" touching the "HOW IT WORKS" card, or
   "Save Changes" touching the "Location Code" card on locations/edit).
   row-gap on the flex .row adds space ONLY between wrapped lines, so it's a
   no-op when the columns are side-by-side on desktop and adds no negative-margin
   side-effect on the page header. Scoped to the top-level page row (> .row)
   so inner `.card-body > .row.g-3` field grids are untouched. */
@media (max-width: 991.98px) {
    body:not(.hangout-app) #main-content .container-fluid > .row,
    body:not(.hangout-app) #main-content .container > .row { row-gap: 1.5rem; }
}

/* ===== Alias the legacy flat .page-header to the editorial crm-page-head look.
   ~47 CRM pages still use .page-header/.page-title/.page-subtitle markup; rather
   than churn each one, render them with the editorial typography (Space Grotesk
   title, no bottom rule, muted sub) so no old-design header remains visually.
   !important wins over the legacy app-consolidated.css/.components.css rules
   regardless of stylesheet load order. (markup consolidation = separate cleanup) ===== */
body:not(.hangout-app) .page-header { border-bottom: none !important; padding-bottom: 0 !important; margin: 0.5rem 0 1.5rem !important; }
body:not(.hangout-app) .page-title { font-family: 'Space Grotesk', sans-serif !important; font-weight: 700 !important; font-size: 2.2rem !important; letter-spacing: -0.03em; line-height: 1.06; color: var(--v2-on-surface, #0f172a) !important; }
body:not(.hangout-app) .page-subtitle { color: var(--v2-on-surface-variant, #64748b) !important; font-size: 0.95rem !important; }
@media (max-width: 820px){ body:not(.hangout-app) .page-title { font-size: 1.8rem !important; } }

/* ═══════════════════════════════════════════════════════════════
   KAC v2 — SHARED RECORD SHELL + ATOMS
   Reusable building blocks for the flagship record pages (member
   record, service detail, view-newcomer, org detail). Scoped
   body:not(.hangout-app); dual dark-mode (data-theme + auto/media).
   Tokens: --v2-primary #9333EA, --v2-on-surface (ink #0F172A),
   --v2-on-surface-variant (muted #64748B), --v2-surface-lowest (card),
   --v2-outline-variant (hairline). Values are literal redline px.
   ═══════════════════════════════════════════════════════════════ */

/* ── Record shell header ──────────────────────────────────────── */
body:not(.hangout-app) .record-shell { max-width: 1180px; margin: 0 auto; }
body:not(.hangout-app) .record-back {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--v2-on-surface-variant, #64748b); font-size: 0.85rem;
    font-weight: 600; text-decoration: none; margin-bottom: 1.1rem;
}
body:not(.hangout-app) .record-back:hover { color: var(--v2-on-surface, #0f172a); }
body:not(.hangout-app) .record-back i { width: 16px; height: 16px; }

body:not(.hangout-app) .record-head {
    display: flex; align-items: center; gap: 1.25rem;
    margin-bottom: 1.5rem; flex-wrap: wrap;
}
body:not(.hangout-app) .record-avatar {
    width: 72px; height: 72px; border-radius: 9999px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
    font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: 26px; line-height: 1;
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 14%, transparent);
    color: var(--v2-primary, #9333ea);
}
body:not(.hangout-app) .record-avatar img { width: 100%; height: 100%; object-fit: cover; }
body:not(.hangout-app) .record-identity { flex: 1 1 320px; min-width: 0; }
body:not(.hangout-app) .record-name {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    font-size: 40px; letter-spacing: -0.03em; line-height: 1.04;
    color: var(--v2-on-surface, #0f172a); margin: 0 0 0.5rem;
}
body:not(.hangout-app) .record-namerow {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    margin-bottom: 0.4rem;
}
body:not(.hangout-app) .record-namerow .record-name { margin: 0; }
body:not(.hangout-app) .record-sub {
    color: var(--v2-on-surface-variant, #64748b); font-size: 0.9rem;
    line-height: 1.5; margin: 0;
}
body:not(.hangout-app) .record-actions {
    display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto;
    margin-left: auto;
}

/* ghost icon button (call / message) */
body:not(.hangout-app) .v2-icon-btn {
    width: 42px; height: 42px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--v2-surface-lowest, #ffffff);
    border: 1px solid var(--v2-outline-variant, #e7e8ee);
    color: var(--v2-on-surface, #0f172a); cursor: pointer;
    text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease;
}
body:not(.hangout-app) .v2-icon-btn:hover {
    background: var(--v2-surface-low, #f1f5f9);
    color: var(--v2-on-surface, #0f172a);
}
body:not(.hangout-app) .v2-icon-btn i { width: 18px; height: 18px; }

/* primary record action (Edit) — ink, NOT purple */
body:not(.hangout-app) .v2-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; border-radius: 11px; padding: 0 18px;
    background: var(--v2-on-surface, #0f172a); color: #fff;
    border: none; font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 14px; cursor: pointer; text-decoration: none;
    box-shadow: 0 8px 22px -12px rgba(15,23,42,0.55);
    transition: opacity 0.15s ease;
}
body:not(.hangout-app) .v2-btn-primary:hover { opacity: 0.92; color: #fff; }
body:not(.hangout-app) .v2-btn-primary i { width: 16px; height: 16px; }

/* ── Quick-facts strip ────────────────────────────────────────── */
body:not(.hangout-app) .quick-facts {
    display: grid; grid-template-columns: repeat(5, 1fr);
    border-radius: 14px; padding: 18px 24px;
    background: var(--v2-surface-lowest, #ffffff);
    border: 1px solid var(--v2-outline-variant, #ececf1);
    box-shadow: 0 4px 16px rgba(15,23,42,.04);
    margin-bottom: 1.5rem;
}
body:not(.hangout-app) .quick-fact { padding: 0 0.25rem; min-width: 0; }
body:not(.hangout-app) .quick-fact + .quick-fact {
    border-left: 1px solid var(--v2-outline-variant, #f4f4f7); padding-left: 1.25rem;
}
body:not(.hangout-app) .quick-fact-label {
    display: block; font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--v2-on-surface-variant, #64748b); margin-bottom: 0.4rem;
}
body:not(.hangout-app) .quick-fact-value {
    display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: 20px; letter-spacing: -0.01em;
    color: var(--v2-on-surface, #0f172a); line-height: 1.2;
}
body:not(.hangout-app) .quick-fact-value.is-muted { color: var(--v2-on-surface-variant, #94a3b8); }
@media (max-width: 900px) {
    body:not(.hangout-app) .quick-facts { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 0; }
    body:not(.hangout-app) .quick-fact:nth-child(odd) { border-left: none; padding-left: 0.25rem; }
    body:not(.hangout-app) .quick-fact:nth-child(even) { padding-left: 1.25rem; }
}
@media (max-width: 520px) {
    body:not(.hangout-app) .quick-facts { grid-template-columns: 1fr; }
    body:not(.hangout-app) .quick-fact { border-left: none !important; padding-left: 0.25rem !important; }
    body:not(.hangout-app) .quick-fact + .quick-fact { border-top: 1px solid var(--v2-outline-variant, #f4f4f7); padding-top: 0.9rem; }
}

/* ── Underline tabs ───────────────────────────────────────────── */
body:not(.hangout-app) .v2-tabs {
    display: flex; gap: 0; flex-wrap: wrap; padding: 0; margin: 0 0 1.5rem;
    list-style: none; border-bottom: 1px solid var(--v2-outline-variant, #ececf1);
}
body:not(.hangout-app) .v2-tab {
    border: none; background: none; cursor: pointer;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px;
    color: var(--v2-on-surface-variant, #64748b);
    padding: 10px 4px; margin: 0 10px; margin-bottom: -1px;
    border-bottom: 2px solid transparent; transition: color 0.15s ease;
}
body:not(.hangout-app) .v2-tab:first-child { margin-left: 0; }
body:not(.hangout-app) .v2-tab:hover { color: var(--v2-on-surface, #0f172a); }
body:not(.hangout-app) .v2-tab.active {
    color: var(--v2-primary, #9333ea);
    border-bottom-color: var(--v2-primary, #9333ea);
}

/* ── Status chip (pill) + status dot ──────────────────────────── */
body:not(.hangout-app) .status-chip {
    display: inline-flex; align-items: center; height: 26px;
    padding: 0 11px; border-radius: 9999px;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12.5px;
    line-height: 1; white-space: nowrap;
    background: color-mix(in srgb, var(--v2-on-surface-variant, #64748b) 14%, transparent);
    color: var(--v2-on-surface-variant, #64748b);
}
body:not(.hangout-app) .status-chip.is-success {
    background: color-mix(in srgb, #22c55e 16%, transparent); color: #15803d;
}
body:not(.hangout-app) .status-chip.is-warning {
    background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309;
}
body:not(.hangout-app) .status-chip.is-danger {
    background: color-mix(in srgb, #ef4444 16%, transparent); color: #b91c1c;
}
body:not(.hangout-app) .status-chip.is-info {
    background: color-mix(in srgb, #3b82f6 16%, transparent); color: #1d4ed8;
}
body:not(.hangout-app) .status-chip.is-primary {
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 15%, transparent);
    color: var(--v2-primary, #9333ea);
}

body:not(.hangout-app) .status-dot {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Inter', sans-serif; font-size: 13px;
    color: var(--v2-on-surface-variant, #64748b);
}
body:not(.hangout-app) .status-dot::before {
    content: ""; width: 8px; height: 8px; border-radius: 9999px;
    background: var(--v2-on-surface-variant, #94a3b8); flex: 0 0 auto;
}
body:not(.hangout-app) .status-dot.is-success::before { background: #22c55e; }
body:not(.hangout-app) .status-dot.is-warning::before { background: #f59e0b; }
body:not(.hangout-app) .status-dot.is-danger::before { background: #ef4444; }
body:not(.hangout-app) .status-dot.is-info::before { background: #3b82f6; }

/* ── Toggle (used by form shell) ──────────────────────────────── */
body:not(.hangout-app) .v2-toggle {
    position: relative; display: inline-block; width: 42px; height: 25px;
    flex: 0 0 auto; cursor: pointer;
}
body:not(.hangout-app) .v2-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
body:not(.hangout-app) .v2-toggle .v2-toggle-track {
    position: absolute; inset: 0; border-radius: 9999px;
    background: var(--v2-outline-variant, #e7e8ee); transition: background 0.18s ease;
}
body:not(.hangout-app) .v2-toggle .v2-toggle-track::before {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 19px; height: 19px; border-radius: 9999px; background: #fff;
    box-shadow: 0 1px 3px rgba(15,23,42,0.25); transition: transform 0.18s ease;
}
body:not(.hangout-app) .v2-toggle input:checked + .v2-toggle-track { background: #22c55e; }
body:not(.hangout-app) .v2-toggle input:checked + .v2-toggle-track::before { transform: translateX(17px); }
body:not(.hangout-app) .v2-toggle input:focus-visible + .v2-toggle-track {
    outline: 2px solid var(--v2-primary, #9333ea); outline-offset: 2px;
}

/* ── Readiness ring (SVG-based; used by service detail) ───────── */
body:not(.hangout-app) .readiness-ring {
    position: relative; width: 140px; height: 140px; flex: 0 0 auto;
}
body:not(.hangout-app) .readiness-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
body:not(.hangout-app) .readiness-ring .ring-track {
    fill: none; stroke: var(--v2-outline-variant, #ececf1); stroke-width: 11;
}
body:not(.hangout-app) .readiness-ring .ring-value {
    fill: none; stroke: url(#readinessGradient); stroke-width: 11; stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}
body:not(.hangout-app) .readiness-ring .ring-center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
}
body:not(.hangout-app) .readiness-ring .ring-num {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 26px;
    color: var(--v2-on-surface, #0f172a); line-height: 1;
}
body:not(.hangout-app) .readiness-ring .ring-label {
    font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--v2-on-surface-variant, #64748b); margin-top: 0.3rem;
}
body:not(.hangout-app) .readiness-ring.is-small { width: 96px; height: 96px; }
body:not(.hangout-app) .readiness-ring.is-small .ring-track,
body:not(.hangout-app) .readiness-ring.is-small .ring-value { stroke-width: 9; }
body:not(.hangout-app) .readiness-ring.is-small .ring-num { font-size: 19px; }
body:not(.hangout-app) .readiness-ring.is-small .ring-label { font-size: 10px; }

/* ── Section card (tab panels) ────────────────────────────────── */
body:not(.hangout-app) .section-card {
    border-radius: 16px; padding: 22px 24px;
    background: var(--v2-surface-lowest, #ffffff);
    border: 1px solid var(--v2-outline-variant, #ececf1);
    box-shadow: 0 4px 16px rgba(15,23,42,.04);
    margin-bottom: 20px;
}
body:not(.hangout-app) .section-card-title {
    font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: 17px; letter-spacing: -0.01em; color: var(--v2-on-surface, #0f172a);
    margin: 0 0 1rem; display: flex; align-items: center; gap: 0.5rem;
}
body:not(.hangout-app) .section-card-title i { width: 17px; height: 17px; color: var(--v2-on-surface-variant, #64748b); }

/* field/value detail rows inside section cards */
body:not(.hangout-app) .record-field-label {
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12.5px;
    color: var(--v2-on-surface-variant, #64748b); margin: 0 0 0.2rem;
}
body:not(.hangout-app) .record-field-value {
    font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.45;
    color: var(--v2-on-surface, #0f172a); margin: 0;
}
body:not(.hangout-app) .record-field-value.is-empty { color: var(--v2-on-surface-variant, #94a3b8); font-style: italic; }

/* pastoral callout card */
body:not(.hangout-app) .pastoral-callout {
    border-radius: 16px; padding: 20px 24px; margin-bottom: 20px;
    background: color-mix(in srgb, #f59e0b 9%, var(--v2-surface-lowest, #fff));
    border: 1px solid color-mix(in srgb, #f59e0b 28%, transparent);
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
body:not(.hangout-app) .pastoral-callout-body { flex: 1 1 260px; min-width: 0; }
body:not(.hangout-app) .pastoral-callout-title {
    font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16px;
    color: var(--v2-on-surface, #0f172a); margin: 0 0 0.25rem;
}
body:not(.hangout-app) .pastoral-callout-sub {
    font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.5;
    color: var(--v2-on-surface-variant, #64748b); margin: 0;
}

/* honest empty state inside a tab */
body:not(.hangout-app) .record-empty {
    text-align: center; padding: 2.5rem 1rem;
    color: var(--v2-on-surface-variant, #64748b); font-size: 14px;
}
body:not(.hangout-app) .record-empty i { width: 30px; height: 30px; color: var(--v2-on-surface-variant, #94a3b8); margin-bottom: 0.75rem; display: inline-block; }

/* chip used for tags / dept memberships */
body:not(.hangout-app) .record-tag {
    display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
    border-radius: 9999px; font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 12.5px; line-height: 1;
}

/* ── Record shell — DARK MODE (data-theme + auto/media) ───────── */
[data-theme="dark"] body:not(.hangout-app) .record-name,
[data-theme="dark"] body:not(.hangout-app) .quick-fact-value,
[data-theme="dark"] body:not(.hangout-app) .record-field-value,
[data-theme="dark"] body:not(.hangout-app) .section-card-title,
[data-theme="dark"] body:not(.hangout-app) .pastoral-callout-title,
[data-theme="dark"] body:not(.hangout-app) .readiness-ring .ring-num { color: #e8eaed; }
[data-theme="dark"] body:not(.hangout-app) .record-sub,
[data-theme="dark"] body:not(.hangout-app) .record-back,
[data-theme="dark"] body:not(.hangout-app) .quick-fact-label,
[data-theme="dark"] body:not(.hangout-app) .v2-tab,
[data-theme="dark"] body:not(.hangout-app) .record-field-label,
[data-theme="dark"] body:not(.hangout-app) .pastoral-callout-sub,
[data-theme="dark"] body:not(.hangout-app) .ring-label,
[data-theme="dark"] body:not(.hangout-app) .record-empty { color: #9aa0a6; }
[data-theme="dark"] body:not(.hangout-app) .quick-facts,
[data-theme="dark"] body:not(.hangout-app) .section-card { background: #1b1f2c; border-color: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .quick-fact + .quick-fact,
[data-theme="dark"] body:not(.hangout-app) .v2-tabs { border-color: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .v2-icon-btn { background: #1b1f2c; border-color: #272b37; color: #e8eaed; }
[data-theme="dark"] body:not(.hangout-app) .v2-icon-btn:hover { background: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .v2-btn-primary { background: #3b3f4c; }
[data-theme="dark"] body:not(.hangout-app) .readiness-ring .ring-track,
[data-theme="dark"] body:not(.hangout-app) .v2-toggle .v2-toggle-track { background: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .record-field-value.is-empty,
[data-theme="dark"] body:not(.hangout-app) .quick-fact-value.is-muted { color: #6b7177; }

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] body:not(.hangout-app) .record-name,
    [data-theme="auto"] body:not(.hangout-app) .quick-fact-value,
    [data-theme="auto"] body:not(.hangout-app) .record-field-value,
    [data-theme="auto"] body:not(.hangout-app) .section-card-title,
    [data-theme="auto"] body:not(.hangout-app) .pastoral-callout-title,
    [data-theme="auto"] body:not(.hangout-app) .readiness-ring .ring-num { color: #e8eaed; }
    [data-theme="auto"] body:not(.hangout-app) .record-sub,
    [data-theme="auto"] body:not(.hangout-app) .record-back,
    [data-theme="auto"] body:not(.hangout-app) .quick-fact-label,
    [data-theme="auto"] body:not(.hangout-app) .v2-tab,
    [data-theme="auto"] body:not(.hangout-app) .record-field-label,
    [data-theme="auto"] body:not(.hangout-app) .pastoral-callout-sub,
    [data-theme="auto"] body:not(.hangout-app) .ring-label,
    [data-theme="auto"] body:not(.hangout-app) .record-empty { color: #9aa0a6; }
    [data-theme="auto"] body:not(.hangout-app) .quick-facts,
    [data-theme="auto"] body:not(.hangout-app) .section-card { background: #1b1f2c; border-color: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .quick-fact + .quick-fact,
    [data-theme="auto"] body:not(.hangout-app) .v2-tabs { border-color: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .v2-icon-btn { background: #1b1f2c; border-color: #272b37; color: #e8eaed; }
    [data-theme="auto"] body:not(.hangout-app) .v2-icon-btn:hover { background: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .v2-btn-primary { background: #3b3f4c; }
    [data-theme="auto"] body:not(.hangout-app) .readiness-ring .ring-track,
    [data-theme="auto"] body:not(.hangout-app) .v2-toggle .v2-toggle-track { background: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .record-field-value.is-empty,
    [data-theme="auto"] body:not(.hangout-app) .quick-fact-value.is-muted { color: #6b7177; }
}

/* ═══════════════════════════════════════════════════════════════
   KAC v2 — SERVICE DETAIL (reuses record shell + readiness ring)
   Adds: date badge, Sunday-readiness checklist, serving-team rota.
   Scoped body:not(.hangout-app); dual dark-mode. Literal redline px.
   ═══════════════════════════════════════════════════════════════ */

/* ── Date badge (header, replaces the avatar slot) ────────────── */
body:not(.hangout-app) .date-badge {
    width: 72px; height: 72px; border-radius: 16px; flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 9%, var(--v2-surface-lowest, #fff));
    border: 1px solid color-mix(in srgb, var(--v2-primary, #9333ea) 18%, transparent);
    text-align: center; line-height: 1;
}
body:not(.hangout-app) .date-badge .date-badge-day {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 26px;
    color: var(--v2-primary, #9333ea); line-height: 1;
}
body:not(.hangout-app) .date-badge .date-badge-month {
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px;
    letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.25rem;
    color: var(--v2-primary, #9333ea);
}
/* service name is larger than the 40px member default */
body:not(.hangout-app) .record-name--service { font-size: 38px; }

/* ── Service detail 2-col split (checklist 1.55fr / ring + cards 1fr) ── */
body:not(.hangout-app) .service-grid {
    display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start;
}
@media (max-width: 960px) {
    body:not(.hangout-app) .service-grid { grid-template-columns: 1fr; }
}

/* ── Sunday-readiness checklist ───────────────────────────────── */
body:not(.hangout-app) .checklist { display: flex; flex-direction: column; }
body:not(.hangout-app) .checklist-row {
    display: flex; align-items: center; gap: 0.75rem; padding: 13px 0;
    border-top: 1px solid var(--v2-outline-variant, #f4f4f7);
}
body:not(.hangout-app) .checklist-row:first-child { border-top: none; }
body:not(.hangout-app) .checklist-check {
    width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--v2-outline-variant, #e7e8ee);
    background: var(--v2-surface-lowest, #fff); color: transparent;
}
body:not(.hangout-app) .checklist-check i { width: 14px; height: 14px; }
body:not(.hangout-app) .checklist-row.is-done .checklist-check {
    background: #22c55e; border-color: #22c55e; color: #fff;
}
body:not(.hangout-app) .checklist-label {
    flex: 1 1 auto; min-width: 0;
    font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px;
    color: var(--v2-on-surface, #0f172a);
}
body:not(.hangout-app) .checklist-row.is-done .checklist-label {
    text-decoration: line-through; color: var(--v2-on-surface-variant, #64748b);
}
body:not(.hangout-app) .checklist-status {
    flex: 0 0 auto; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12.5px;
    color: var(--v2-on-surface-variant, #64748b);
}
body:not(.hangout-app) .checklist-status.is-success { color: #16a34a; }
body:not(.hangout-app) .checklist-status.is-warning { color: #d97706; }

/* ── Serving-team rota ────────────────────────────────────────── */
body:not(.hangout-app) .rota-row {
    display: flex; align-items: center; gap: 0.75rem; padding: 13px 0;
    border-top: 1px solid var(--v2-outline-variant, #f4f4f7);
}
body:not(.hangout-app) .rota-row:first-child { border-top: none; }
body:not(.hangout-app) .rota-avatar {
    width: 38px; height: 38px; border-radius: 9999px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px;
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 14%, transparent);
    color: var(--v2-primary, #9333ea);
}
body:not(.hangout-app) .rota-identity { flex: 1 1 auto; min-width: 0; }
body:not(.hangout-app) .rota-name {
    font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14.5px;
    color: var(--v2-on-surface, #0f172a); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body:not(.hangout-app) .rota-role {
    font-family: 'Inter', sans-serif; font-size: 12.5px;
    color: var(--v2-on-surface-variant, #94a3b8); line-height: 1.3;
}

/* ── Service detail — DARK MODE ───────────────────────────────── */
[data-theme="dark"] body:not(.hangout-app) .date-badge,
[data-theme="dark"] body:not(.hangout-app) .checklist-check {
    background: #1b1f2c;
}
[data-theme="dark"] body:not(.hangout-app) .checklist-check { border-color: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .checklist-row.is-done .checklist-check {
    background: #34d399; border-color: #34d399; color: #0e1016;
}
[data-theme="dark"] body:not(.hangout-app) .checklist-label,
[data-theme="dark"] body:not(.hangout-app) .rota-name { color: #e8eaed; }
[data-theme="dark"] body:not(.hangout-app) .checklist-row,
[data-theme="dark"] body:not(.hangout-app) .rota-row { border-color: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .checklist-status.is-success { color: #34d399; }
[data-theme="dark"] body:not(.hangout-app) .checklist-status.is-warning { color: #fbbf24; }

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] body:not(.hangout-app) .date-badge,
    [data-theme="auto"] body:not(.hangout-app) .checklist-check { background: #1b1f2c; }
    [data-theme="auto"] body:not(.hangout-app) .checklist-check { border-color: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .checklist-row.is-done .checklist-check {
        background: #34d399; border-color: #34d399; color: #0e1016;
    }
    [data-theme="auto"] body:not(.hangout-app) .checklist-label,
    [data-theme="auto"] body:not(.hangout-app) .rota-name { color: #e8eaed; }
    [data-theme="auto"] body:not(.hangout-app) .checklist-row,
    [data-theme="auto"] body:not(.hangout-app) .rota-row { border-color: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .checklist-status.is-success { color: #34d399; }
    [data-theme="auto"] body:not(.hangout-app) .checklist-status.is-warning { color: #fbbf24; }
}

/* ═══════════════════════════════════════════════════════════════
   KAC v2 — SHARED FORM SHELL
   Sectioned-card form layout for add/edit member, add service, job
   posting, location, church-settings. Reuses .section-card,
   .v2-btn-primary and .v2-toggle from the record shell — only the
   form-specific atoms live here. Scoped body:not(.hangout-app);
   dual dark-mode (data-theme + auto/media). Literal redline px.
   Inputs: h46 r11 1px hairline pad 0 14 Inter 14 · label 12.5/600 ·
   focus ring 2px primary. iOS form-control gotcha → color-scheme: light.
   ═══════════════════════════════════════════════════════════════ */

/* ── Form shell container ─────────────────────────────────────── */
body:not(.hangout-app) .form-shell { max-width: 880px; margin: 0 auto; padding-bottom: 96px; }
body:not(.hangout-app) .form-shell .record-back {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--v2-on-surface-variant, #64748b); font-size: 0.85rem;
    font-weight: 600; text-decoration: none; margin-bottom: 1.1rem;
}
body:not(.hangout-app) .form-shell .record-back:hover { color: var(--v2-on-surface, #0f172a); }
body:not(.hangout-app) .form-shell .record-back i { width: 16px; height: 16px; }

/* page head */
body:not(.hangout-app) .form-head { margin-bottom: 30px; }
body:not(.hangout-app) .form-title {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    font-size: 32px; letter-spacing: -0.03em; line-height: 1.05;
    color: var(--v2-on-surface, #0f172a); margin: 0 0 0.4rem;
}
body:not(.hangout-app) .form-head-sub {
    font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.5;
    color: var(--v2-on-surface-variant, #64748b); margin: 0;
}

/* ── Form section = a .section-card with title + helper ───────── */
body:not(.hangout-app) .form-section { /* extends .section-card */ }
body:not(.hangout-app) .form-section-head { margin-bottom: 18px; }
body:not(.hangout-app) .form-section-title {
    font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: 17px; letter-spacing: -0.01em; color: var(--v2-on-surface, #0f172a);
    margin: 0; display: flex; align-items: center; gap: 0.5rem;
}
body:not(.hangout-app) .form-section-title i { width: 17px; height: 17px; color: var(--v2-on-surface-variant, #64748b); }
body:not(.hangout-app) .form-section-sub {
    font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.5;
    color: var(--v2-on-surface-variant, #64748b); margin: 0.35rem 0 0;
}

/* ── Field rows / grids ───────────────────────────────────────── */
body:not(.hangout-app) .form-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 16px;
}
body:not(.hangout-app) .form-row { margin-bottom: 16px; }
body:not(.hangout-app) .form-row:last-child { margin-bottom: 0; }
body:not(.hangout-app) .form-field { display: flex; flex-direction: column; min-width: 0; }
body:not(.hangout-app) .form-field.is-full { grid-column: 1 / -1; }
body:not(.hangout-app) .form-field > label,
body:not(.hangout-app) .form-field-label {
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12.5px;
    color: var(--v2-on-surface-variant, #64748b); margin: 0 0 0.4rem;
}
body:not(.hangout-app) .form-field-hint {
    font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.45;
    color: var(--v2-on-surface-variant, #94a3b8); margin: 0.4rem 0 0;
}

/* ── Inputs ───────────────────────────────────────────────────── */
body:not(.hangout-app) .form-shell input[type="text"],
body:not(.hangout-app) .form-shell input[type="email"],
body:not(.hangout-app) .form-shell input[type="tel"],
body:not(.hangout-app) .form-shell input[type="date"],
body:not(.hangout-app) .form-shell input[type="number"],
body:not(.hangout-app) .form-shell input[type="file"],
body:not(.hangout-app) .form-shell select,
body:not(.hangout-app) .form-shell textarea {
    width: 100%; box-sizing: border-box;
    height: 46px; border-radius: 11px; padding: 0 14px;
    border: 1px solid var(--v2-outline-variant, #ececf1);
    background: var(--v2-surface-lowest, #ffffff);
    color: var(--v2-on-surface, #0f172a);
    font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.4;
    color-scheme: light; /* iOS WKWebView dark-mode form-control gotcha */
    -webkit-appearance: none; appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body:not(.hangout-app) .form-shell select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    padding-right: 38px; cursor: pointer;
}
body:not(.hangout-app) .form-shell textarea {
    height: auto; min-height: 92px; padding: 12px 14px; resize: vertical; line-height: 1.5;
}
body:not(.hangout-app) .form-shell input[type="file"] {
    height: auto; padding: 10px 14px; font-size: 13.5px;
}
body:not(.hangout-app) .form-shell input::placeholder,
body:not(.hangout-app) .form-shell textarea::placeholder { color: var(--v2-on-surface-variant, #94a3b8); }
body:not(.hangout-app) .form-shell input:focus,
body:not(.hangout-app) .form-shell select:focus,
body:not(.hangout-app) .form-shell textarea:focus {
    outline: none; border-color: var(--v2-primary, #9333ea);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--v2-primary, #9333ea) 35%, transparent);
}

/* ── Consent / toggle row ─────────────────────────────────────── */
body:not(.hangout-app) .consent-row {
    display: flex; align-items: center; gap: 1rem;
    padding: 14px 0; border-top: 1px solid var(--v2-outline-variant, #f4f4f7);
}
body:not(.hangout-app) .consent-row:first-of-type { border-top: none; padding-top: 0; }
body:not(.hangout-app) .consent-row:last-of-type { padding-bottom: 0; }
body:not(.hangout-app) .consent-row-text { flex: 1 1 auto; min-width: 0; }
body:not(.hangout-app) .consent-row-label {
    font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px;
    color: var(--v2-on-surface, #0f172a); margin: 0;
}
body:not(.hangout-app) .consent-row-desc {
    font-family: 'Inter', sans-serif; font-size: 12.5px; line-height: 1.45;
    color: var(--v2-on-surface-variant, #64748b); margin: 0.15rem 0 0;
}
body:not(.hangout-app) .consent-row .v2-toggle { margin-left: auto; }

/* ── Sticky footer ────────────────────────────────────────────── */
body:not(.hangout-app) .form-footer {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem;
    margin: 20px 0 0; padding: 16px 24px;
    border-top: 1px solid var(--v2-outline-variant, #ececf1);
    border-radius: 16px 16px 0 0;
    background: var(--v2-surface-lowest, #ffffff);
    box-shadow: 0 -6px 20px -16px rgba(15,23,42,0.35);
}
body:not(.hangout-app) .form-footer-meta {
    margin-right: auto;
    font-family: 'Inter', sans-serif; font-size: 12.5px;
    color: var(--v2-on-surface-variant, #94a3b8);
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
body:not(.hangout-app) .v2-btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; border-radius: 11px; padding: 0 18px;
    background: var(--v2-surface-lowest, #ffffff);
    color: var(--v2-on-surface, #0f172a);
    border: 1px solid var(--v2-outline-variant, #e7e8ee);
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px;
    cursor: pointer; text-decoration: none; transition: background 0.15s ease;
}
body:not(.hangout-app) .v2-btn-secondary:hover { background: var(--v2-surface-low, #f4f4f7); color: var(--v2-on-surface, #0f172a); }
body:not(.hangout-app) .v2-btn-secondary i { width: 16px; height: 16px; }

/* responsive: single-column fields on narrow viewports */
@media (max-width: 640px) {
    body:not(.hangout-app) .form-grid { grid-template-columns: 1fr; }
    body:not(.hangout-app) .form-footer { padding: 14px 16px; flex-wrap: wrap; }
    body:not(.hangout-app) .form-footer-meta { width: 100%; margin: 0 0 0.5rem; }
}

/* ── Form shell — dark mode ───────────────────────────────────── */
[data-theme="dark"] body:not(.hangout-app) .form-title,
[data-theme="dark"] body:not(.hangout-app) .form-section-title,
[data-theme="dark"] body:not(.hangout-app) .consent-row-label { color: #e8eaed; }
[data-theme="dark"] body:not(.hangout-app) .form-head-sub,
[data-theme="dark"] body:not(.hangout-app) .form-section-sub,
[data-theme="dark"] body:not(.hangout-app) .form-field > label,
[data-theme="dark"] body:not(.hangout-app) .form-field-label,
[data-theme="dark"] body:not(.hangout-app) .consent-row-desc,
[data-theme="dark"] body:not(.hangout-app) .form-shell .record-back { color: #9aa0a6; }
[data-theme="dark"] body:not(.hangout-app) .form-field-hint,
[data-theme="dark"] body:not(.hangout-app) .form-footer-meta { color: #6b7177; }
[data-theme="dark"] body:not(.hangout-app) .form-shell input[type="text"],
[data-theme="dark"] body:not(.hangout-app) .form-shell input[type="email"],
[data-theme="dark"] body:not(.hangout-app) .form-shell input[type="tel"],
[data-theme="dark"] body:not(.hangout-app) .form-shell input[type="date"],
[data-theme="dark"] body:not(.hangout-app) .form-shell input[type="number"],
[data-theme="dark"] body:not(.hangout-app) .form-shell input[type="file"],
[data-theme="dark"] body:not(.hangout-app) .form-shell select,
[data-theme="dark"] body:not(.hangout-app) .form-shell textarea {
    background: #11131b; border-color: #272b37; color: #e8eaed; color-scheme: dark;
}
[data-theme="dark"] body:not(.hangout-app) .consent-row { border-color: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .form-footer {
    background: #1b1f2c; border-color: #272b37;
}
[data-theme="dark"] body:not(.hangout-app) .v2-btn-secondary {
    background: #1b1f2c; border-color: #272b37; color: #e8eaed;
}
[data-theme="dark"] body:not(.hangout-app) .v2-btn-secondary:hover { background: #272b37; color: #e8eaed; }

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] body:not(.hangout-app) .form-title,
    [data-theme="auto"] body:not(.hangout-app) .form-section-title,
    [data-theme="auto"] body:not(.hangout-app) .consent-row-label { color: #e8eaed; }
    [data-theme="auto"] body:not(.hangout-app) .form-head-sub,
    [data-theme="auto"] body:not(.hangout-app) .form-section-sub,
    [data-theme="auto"] body:not(.hangout-app) .form-field > label,
    [data-theme="auto"] body:not(.hangout-app) .form-field-label,
    [data-theme="auto"] body:not(.hangout-app) .consent-row-desc,
    [data-theme="auto"] body:not(.hangout-app) .form-shell .record-back { color: #9aa0a6; }
    [data-theme="auto"] body:not(.hangout-app) .form-field-hint,
    [data-theme="auto"] body:not(.hangout-app) .form-footer-meta { color: #6b7177; }
    [data-theme="auto"] body:not(.hangout-app) .form-shell input[type="text"],
    [data-theme="auto"] body:not(.hangout-app) .form-shell input[type="email"],
    [data-theme="auto"] body:not(.hangout-app) .form-shell input[type="tel"],
    [data-theme="auto"] body:not(.hangout-app) .form-shell input[type="date"],
    [data-theme="auto"] body:not(.hangout-app) .form-shell input[type="number"],
    [data-theme="auto"] body:not(.hangout-app) .form-shell input[type="file"],
    [data-theme="auto"] body:not(.hangout-app) .form-shell select,
    [data-theme="auto"] body:not(.hangout-app) .form-shell textarea {
        background: #11131b; border-color: #272b37; color: #e8eaed; color-scheme: dark;
    }
    [data-theme="auto"] body:not(.hangout-app) .consent-row { border-color: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .form-footer {
        background: #1b1f2c; border-color: #272b37;
    }
    [data-theme="auto"] body:not(.hangout-app) .v2-btn-secondary {
        background: #1b1f2c; border-color: #272b37; color: #e8eaed;
    }
    [data-theme="auto"] body:not(.hangout-app) .v2-btn-secondary:hover { background: #272b37; color: #e8eaed; }
}

/* ═══════════════════════════════════════════════════════════════
   KAC v2 — SHARED CONSOLE SHELL
   Stat strip + work list (status dots) + due rail. Used by the
   Scribe studio, media requests, recruitment pipeline. Reuses
   .record-back / .record-shell / .v2-btn-primary / .status-dot /
   .section-card from the record shell — only console-specific atoms
   live here. Scoped body:not(.hangout-app); dual dark-mode. Literal
   redline px.
   ═══════════════════════════════════════════════════════════════ */

/* ── Console 2-col split (work list 1.55fr / due rail 1fr) ────── */
body:not(.hangout-app) .console-grid {
    display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start;
}
@media (max-width: 960px) {
    body:not(.hangout-app) .console-grid { grid-template-columns: 1fr; }
}

/* ── Stat strip (horizontal, divided cells) ───────────────────── */
body:not(.hangout-app) .console-stats {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    border-radius: 14px; padding: 18px 24px;
    background: var(--v2-surface-lowest, #ffffff);
    border: 1px solid var(--v2-outline-variant, #ececf1);
    box-shadow: 0 4px 16px rgba(15,23,42,.04);
    margin-bottom: 20px;
}
body:not(.hangout-app) .console-stat { padding: 0 0.25rem; min-width: 0; }
body:not(.hangout-app) .console-stat + .console-stat {
    border-left: 1px solid var(--v2-outline-variant, #f4f4f7); padding-left: 1.25rem;
}
body:not(.hangout-app) .console-stat-label {
    display: block; font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--v2-on-surface-variant, #64748b); margin-bottom: 0.4rem;
}
body:not(.hangout-app) .console-stat-value {
    display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: 22px; letter-spacing: -0.01em;
    color: var(--v2-on-surface, #0f172a); line-height: 1.2;
}
body:not(.hangout-app) .console-stat-value.is-muted { color: var(--v2-on-surface-variant, #94a3b8); }
@media (max-width: 760px) {
    body:not(.hangout-app) .console-stats {
        grid-auto-flow: row; grid-auto-columns: auto;
        grid-template-columns: repeat(2, 1fr);
    }
    body:not(.hangout-app) .console-stat { padding: 0.6rem 0.25rem; }
    body:not(.hangout-app) .console-stat:nth-child(odd) { border-left: none; padding-left: 0.25rem; }
    body:not(.hangout-app) .console-stat:nth-child(even) { padding-left: 1.25rem; }
}

/* ── Section head with right-aligned link ─────────────────────── */
body:not(.hangout-app) .console-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; margin-bottom: 0.5rem;
}
body:not(.hangout-app) .console-card-head .section-card-title { margin: 0; }
body:not(.hangout-app) .console-card-link {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12.5px;
    color: var(--v2-primary, #9333ea); text-decoration: none; flex: 0 0 auto;
}
body:not(.hangout-app) .console-card-link:hover { text-decoration: underline; }
body:not(.hangout-app) .console-card-link i { width: 14px; height: 14px; }

/* ── Work list (rows → editor) ────────────────────────────────── */
body:not(.hangout-app) .work-list { display: flex; flex-direction: column; }
body:not(.hangout-app) .work-row {
    display: flex; align-items: center; gap: 0.85rem; padding: 13px 0;
    border-top: 1px solid var(--v2-outline-variant, #f4f4f7);
    text-decoration: none; cursor: pointer;
}
body:not(.hangout-app) .work-row:first-child { border-top: none; }
body:not(.hangout-app) .work-row:hover .work-title { color: var(--v2-primary, #9333ea); }
body:not(.hangout-app) .work-icon {
    width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 12%, transparent);
    color: var(--v2-primary, #9333ea);
}
body:not(.hangout-app) .work-icon i { width: 18px; height: 18px; }
body:not(.hangout-app) .work-body { flex: 1 1 auto; min-width: 0; }
body:not(.hangout-app) .work-title {
    font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14.5px;
    color: var(--v2-on-surface, #0f172a); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 0.15s ease;
}
body:not(.hangout-app) .work-meta {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    margin-top: 0.25rem;
    font-family: 'Inter', sans-serif; font-size: 12.5px;
    color: var(--v2-on-surface-variant, #94a3b8);
}
body:not(.hangout-app) .work-chevron {
    flex: 0 0 auto; width: 17px; height: 17px; color: #b8bdc7;
}

/* ── Due rail (right-rail list of due items) ──────────────────── */
body:not(.hangout-app) .due-rail { display: flex; flex-direction: column; }
body:not(.hangout-app) .due-row {
    display: flex; align-items: center; gap: 0.85rem; padding: 12px 0;
    border-top: 1px solid var(--v2-outline-variant, #f4f4f7);
}
body:not(.hangout-app) .due-row:first-child { border-top: none; }
body:not(.hangout-app) .due-date {
    width: 48px; flex: 0 0 auto; text-align: center; line-height: 1;
}
body:not(.hangout-app) .due-date-day {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px;
    color: var(--v2-on-surface, #0f172a); display: block;
}
body:not(.hangout-app) .due-date-month {
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 10.5px;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--v2-on-surface-variant, #94a3b8); display: block; margin-top: 0.2rem;
}
body:not(.hangout-app) .due-body { flex: 1 1 auto; min-width: 0; }
body:not(.hangout-app) .due-title {
    font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px;
    color: var(--v2-on-surface, #0f172a); line-height: 1.3;
}

/* ── AI draft card ────────────────────────────────────────────── */
body:not(.hangout-app) .ai-card {
    border-radius: 16px; padding: 22px 24px; margin-bottom: 20px;
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 7%, var(--v2-surface-lowest, #fff));
    border: 1px solid color-mix(in srgb, var(--v2-primary, #9333ea) 24%, transparent);
}
body:not(.hangout-app) .ai-card-icon {
    width: 40px; height: 40px; border-radius: 11px; margin-bottom: 0.85rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 16%, transparent);
    color: var(--v2-primary, #9333ea);
}
body:not(.hangout-app) .ai-card-icon i { width: 20px; height: 20px; }
body:not(.hangout-app) .ai-card-title {
    font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16px;
    color: var(--v2-on-surface, #0f172a); margin: 0 0 0.25rem;
}
body:not(.hangout-app) .ai-card-sub {
    font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.5;
    color: var(--v2-on-surface-variant, #64748b); margin: 0 0 1rem;
}

/* ── Console shell — DARK MODE ────────────────────────────────── */
[data-theme="dark"] body:not(.hangout-app) .console-stats,
[data-theme="dark"] body:not(.hangout-app) .ai-card { background: #1b1f2c; border-color: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .console-stat-value,
[data-theme="dark"] body:not(.hangout-app) .work-title,
[data-theme="dark"] body:not(.hangout-app) .due-date-day,
[data-theme="dark"] body:not(.hangout-app) .due-title,
[data-theme="dark"] body:not(.hangout-app) .ai-card-title { color: #e8eaed; }
[data-theme="dark"] body:not(.hangout-app) .console-stat-label,
[data-theme="dark"] body:not(.hangout-app) .work-meta,
[data-theme="dark"] body:not(.hangout-app) .due-date-month,
[data-theme="dark"] body:not(.hangout-app) .ai-card-sub { color: #9aa0a6; }
[data-theme="dark"] body:not(.hangout-app) .console-stat-value.is-muted { color: #6b7177; }
[data-theme="dark"] body:not(.hangout-app) .console-stat + .console-stat,
[data-theme="dark"] body:not(.hangout-app) .work-row,
[data-theme="dark"] body:not(.hangout-app) .due-row { border-color: #272b37; }

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] body:not(.hangout-app) .console-stats,
    [data-theme="auto"] body:not(.hangout-app) .ai-card { background: #1b1f2c; border-color: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .console-stat-value,
    [data-theme="auto"] body:not(.hangout-app) .work-title,
    [data-theme="auto"] body:not(.hangout-app) .due-date-day,
    [data-theme="auto"] body:not(.hangout-app) .due-title,
    [data-theme="auto"] body:not(.hangout-app) .ai-card-title { color: #e8eaed; }
    [data-theme="auto"] body:not(.hangout-app) .console-stat-label,
    [data-theme="auto"] body:not(.hangout-app) .work-meta,
    [data-theme="auto"] body:not(.hangout-app) .due-date-month,
    [data-theme="auto"] body:not(.hangout-app) .ai-card-sub { color: #9aa0a6; }
    [data-theme="auto"] body:not(.hangout-app) .console-stat-value.is-muted { color: #6b7177; }
    [data-theme="auto"] body:not(.hangout-app) .console-stat + .console-stat,
    [data-theme="auto"] body:not(.hangout-app) .work-row,
    [data-theme="auto"] body:not(.hangout-app) .due-row { border-color: #272b37; }
}

/* ═══════════════════════════════════════════════════════════════
   KAC v2 — SHARED EDITOR SHELL
   2-col writing surface for the post/devotion editor (and the
   sermon / series / plan / quiz forms that inherit it). Main editor
   1.55fr / settings rail 1fr, gap 20. Reuses .record-back,
   .section-card, .form-field input styling, .v2-btn-primary/-secondary,
   .form-footer from the form shell. Scoped body:not(.hangout-app);
   dual dark-mode. Literal redline px.
   ═══════════════════════════════════════════════════════════════ */

body:not(.hangout-app) .editor-shell { max-width: 1180px; margin: 0 auto; padding-bottom: 96px; }
body:not(.hangout-app) .editor-grid {
    display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start;
}
@media (max-width: 960px) {
    body:not(.hangout-app) .editor-grid { grid-template-columns: 1fr; }
}

/* ── Editor main (title + subtitle + toolbar + body) ──────────── */
body:not(.hangout-app) .editor-main {
    border-radius: 16px; padding: 24px;
    background: var(--v2-surface-lowest, #ffffff);
    border: 1px solid var(--v2-outline-variant, #ececf1);
    box-shadow: 0 4px 16px rgba(15,23,42,.04);
}
body:not(.hangout-app) .editor-title {
    width: 100%; box-sizing: border-box; border: none; background: transparent;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    font-size: 32px; letter-spacing: -0.03em; line-height: 1.1;
    color: var(--v2-on-surface, #0f172a); padding: 0; margin-bottom: 0.6rem;
    color-scheme: light; -webkit-appearance: none; appearance: none;
}
body:not(.hangout-app) .editor-title::placeholder { color: var(--v2-on-surface-variant, #cbd2dc); }
body:not(.hangout-app) .editor-title:focus { outline: none; }
body:not(.hangout-app) .editor-subtitle {
    width: 100%; box-sizing: border-box; border: none; background: transparent;
    font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.5;
    color: var(--v2-on-surface-variant, #64748b); padding: 0; margin-bottom: 1.1rem;
    color-scheme: light; -webkit-appearance: none; appearance: none;
}
body:not(.hangout-app) .editor-subtitle::placeholder { color: var(--v2-on-surface-variant, #94a3b8); }
body:not(.hangout-app) .editor-subtitle:focus { outline: none; }

/* ── Editor toolbar (B/I/H/"/Link) ────────────────────────────── */
body:not(.hangout-app) .editor-toolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem;
    padding: 8px; border-radius: 11px;
    background: var(--v2-surface-low, #f4f4f7);
    border: 1px solid var(--v2-outline-variant, #ececf1);
    margin-bottom: 0.75rem;
}
body:not(.hangout-app) .editor-tool {
    width: 34px; height: 34px; border-radius: 8px; border: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--v2-on-surface-variant, #64748b);
    cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
body:not(.hangout-app) .editor-tool:hover {
    background: var(--v2-surface-lowest, #fff); color: var(--v2-on-surface, #0f172a);
}
body:not(.hangout-app) .editor-tool i { width: 16px; height: 16px; }
body:not(.hangout-app) .editor-tool-sep {
    width: 1px; align-self: stretch; margin: 4px 0.25rem;
    background: var(--v2-outline-variant, #ececf1);
}
body:not(.hangout-app) .editor-toolbar-end { margin-left: auto; display: inline-flex; gap: 0.35rem; }

/* ── Editor body (textarea / contenteditable) ─────────────────── */
body:not(.hangout-app) .editor-body {
    width: 100%; box-sizing: border-box; min-height: 320px;
    border-radius: 11px; padding: 14px 16px;
    border: 1px solid var(--v2-outline-variant, #ececf1);
    background: var(--v2-surface-lowest, #ffffff);
    color: var(--v2-on-surface, #0f172a);
    font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.6;
    resize: vertical; color-scheme: light;
    -webkit-appearance: none; appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body:not(.hangout-app) .editor-body::placeholder { color: var(--v2-on-surface-variant, #94a3b8); }
body:not(.hangout-app) .editor-body:focus {
    outline: none; border-color: var(--v2-primary, #9333ea);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--v2-primary, #9333ea) 35%, transparent);
}
body:not(.hangout-app) .editor-meta {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem;
    font-family: 'Inter', sans-serif; font-size: 12px;
    color: var(--v2-on-surface-variant, #94a3b8);
}

/* ── Editor settings rail ─────────────────────────────────────── */
body:not(.hangout-app) .editor-rail { display: flex; flex-direction: column; }

/* selects + checkboxes inside the editor (scripture link, etc.) reuse
   the form-shell input look without needing the .form-shell wrapper */
body:not(.hangout-app) .editor-shell select {
    width: 100%; box-sizing: border-box;
    height: 46px; border-radius: 11px; padding: 0 38px 0 14px;
    border: 1px solid var(--v2-outline-variant, #ececf1);
    background: var(--v2-surface-lowest, #ffffff);
    color: var(--v2-on-surface, #0f172a);
    font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.4;
    color-scheme: light; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body:not(.hangout-app) .editor-shell select:focus {
    outline: none; border-color: var(--v2-primary, #9333ea);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--v2-primary, #9333ea) 35%, transparent);
}
body:not(.hangout-app) .editor-shell input[type="checkbox"] {
    width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--v2-primary, #9333ea); cursor: pointer;
}

/* ── Artwork drop-zone ────────────────────────────────────────── */
body:not(.hangout-app) .dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 0.4rem; padding: 26px 18px;
    border-radius: 12px; border: 1.5px dashed var(--v2-outline-variant, #cbd2dc);
    background: var(--v2-surface-low, #f8f9fb);
    color: var(--v2-on-surface-variant, #64748b); cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
body:not(.hangout-app) .dropzone:hover {
    border-color: var(--v2-primary, #9333ea);
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 5%, transparent);
}
body:not(.hangout-app) .dropzone i { width: 26px; height: 26px; color: var(--v2-on-surface-variant, #94a3b8); }
body:not(.hangout-app) .dropzone-text {
    font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.4;
}
body:not(.hangout-app) .dropzone-text strong { color: var(--v2-on-surface, #0f172a); font-weight: 600; }

/* ── Segmented control (Type: Devotion / Sermon / Summary) ────── */
body:not(.hangout-app) .seg-control {
    display: inline-flex; width: 100%; box-sizing: border-box; gap: 0.25rem;
    padding: 4px; border-radius: 11px;
    background: var(--v2-surface-low, #f4f4f7);
    border: 1px solid var(--v2-outline-variant, #ececf1);
}
body:not(.hangout-app) .seg-control label {
    flex: 1 1 0; min-width: 0; text-align: center; cursor: pointer;
    padding: 8px 6px; border-radius: 8px;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12.5px;
    color: var(--v2-on-surface-variant, #64748b);
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body:not(.hangout-app) .seg-control input { position: absolute; opacity: 0; width: 0; height: 0; }
body:not(.hangout-app) .seg-control input:checked + label {
    background: var(--v2-surface-lowest, #fff); color: var(--v2-primary, #9333ea);
    box-shadow: 0 1px 3px rgba(15,23,42,0.1);
}
body:not(.hangout-app) .seg-control input:focus-visible + label {
    outline: 2px solid var(--v2-primary, #9333ea); outline-offset: 2px;
}

/* ── Editor shell — DARK MODE ─────────────────────────────────── */
[data-theme="dark"] body:not(.hangout-app) .editor-main { background: #1b1f2c; border-color: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .editor-title { color: #e8eaed; }
[data-theme="dark"] body:not(.hangout-app) .editor-subtitle { color: #9aa0a6; }
[data-theme="dark"] body:not(.hangout-app) .editor-toolbar,
[data-theme="dark"] body:not(.hangout-app) .seg-control { background: #11131b; border-color: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .editor-tool:hover { background: #272b37; color: #e8eaed; }
[data-theme="dark"] body:not(.hangout-app) .editor-tool-sep,
[data-theme="dark"] body:not(.hangout-app) .editor-meta { border-color: #272b37; color: #6b7177; }
[data-theme="dark"] body:not(.hangout-app) .editor-body {
    background: #11131b; border-color: #272b37; color: #e8eaed; color-scheme: dark;
}
[data-theme="dark"] body:not(.hangout-app) .dropzone {
    background: #11131b; border-color: #272b37; color: #9aa0a6;
}
[data-theme="dark"] body:not(.hangout-app) .dropzone-text strong { color: #e8eaed; }
[data-theme="dark"] body:not(.hangout-app) .seg-control label { color: #9aa0a6; }
[data-theme="dark"] body:not(.hangout-app) .seg-control input:checked + label {
    background: #272b37; color: #c4b5fd;
}
[data-theme="dark"] body:not(.hangout-app) .editor-shell select {
    background-color: #11131b; border-color: #272b37; color: #e8eaed; color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] body:not(.hangout-app) .editor-main { background: #1b1f2c; border-color: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .editor-title { color: #e8eaed; }
    [data-theme="auto"] body:not(.hangout-app) .editor-subtitle { color: #9aa0a6; }
    [data-theme="auto"] body:not(.hangout-app) .editor-toolbar,
    [data-theme="auto"] body:not(.hangout-app) .seg-control { background: #11131b; border-color: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .editor-tool:hover { background: #272b37; color: #e8eaed; }
    [data-theme="auto"] body:not(.hangout-app) .editor-tool-sep,
    [data-theme="auto"] body:not(.hangout-app) .editor-meta { border-color: #272b37; color: #6b7177; }
    [data-theme="auto"] body:not(.hangout-app) .editor-body {
        background: #11131b; border-color: #272b37; color: #e8eaed; color-scheme: dark;
    }
    [data-theme="auto"] body:not(.hangout-app) .dropzone {
        background: #11131b; border-color: #272b37; color: #9aa0a6;
    }
    [data-theme="auto"] body:not(.hangout-app) .dropzone-text strong { color: #e8eaed; }
    [data-theme="auto"] body:not(.hangout-app) .seg-control label { color: #9aa0a6; }
    [data-theme="auto"] body:not(.hangout-app) .seg-control input:checked + label {
        background: #272b37; color: #c4b5fd;
    }
    [data-theme="auto"] body:not(.hangout-app) .editor-shell select {
        background-color: #11131b; border-color: #272b37; color: #e8eaed; color-scheme: dark;
    }
}

/* ═══════════════════════════════════════════════════════════════
   KAC v2 — MATRIX shell (roles & permissions)
   The role × capability grid + the resolved per-person view.
   Reuses .record-shell / .crm-page-head / .section-card / .status-chip
   / .status-dot from the record + form shells. Scoped body:not(.hangout-app);
   dual dark-mode. Literal redline px (snap to 4px grid).
   ═══════════════════════════════════════════════════════════════ */

/* ── Segmented toggle: "Capability matrix" / "A person's access" ── */
body:not(.hangout-app) .matrix-toggle {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--v2-surface-low, #eff1f2);
    border: 1px solid var(--v2-outline-variant, #ececf1);
    border-radius: 9999px; margin-bottom: 22px;
}
body:not(.hangout-app) .matrix-toggle a,
body:not(.hangout-app) .matrix-toggle button {
    display: inline-flex; align-items: center; gap: 7px;
    border: none; background: none; cursor: pointer; text-decoration: none;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px;
    color: var(--v2-on-surface-variant, #64748b);
    padding: 8px 16px; border-radius: 9999px;
    transition: background 0.15s ease, color 0.15s ease;
}
body:not(.hangout-app) .matrix-toggle a i,
body:not(.hangout-app) .matrix-toggle button i { width: 15px; height: 15px; }
body:not(.hangout-app) .matrix-toggle a:hover,
body:not(.hangout-app) .matrix-toggle button:hover { color: var(--v2-on-surface, #0f172a); }
body:not(.hangout-app) .matrix-toggle .is-active {
    background: var(--v2-surface-lowest, #ffffff);
    color: var(--v2-primary, #9333ea);
    box-shadow: 0 2px 6px -2px rgba(15,23,42,0.18);
}

/* ── Capability matrix table ──────────────────────────────────── */
body:not(.hangout-app) .cap-matrix-wrap {
    border-radius: 16px; overflow: hidden;
    background: var(--v2-surface-lowest, #ffffff);
    border: 1px solid var(--v2-outline-variant, #ececf1);
    box-shadow: 0 4px 16px rgba(15,23,42,.04);
}
body:not(.hangout-app) .cap-matrix-scroll { overflow-x: auto; }
body:not(.hangout-app) .cap-matrix {
    width: 100%; border-collapse: collapse; min-width: 720px;
    font-family: 'Inter', sans-serif;
}
/* sticky header row with role label + level sub */
body:not(.hangout-app) .cap-matrix thead th {
    position: sticky; top: 0; z-index: 10;
    background: var(--v2-surface-lowest, #ffffff);
    border-bottom: 1px solid var(--v2-outline-variant, #ececf1);
    padding: 14px 12px; vertical-align: bottom;
}
body:not(.hangout-app) .cap-matrix thead th.cap-corner {
    text-align: left; min-width: 240px;
    position: sticky; left: 0; z-index: 12;
}
body:not(.hangout-app) .cap-corner-title {
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11.5px;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--v2-on-surface-variant, #94a3b8);
}
body:not(.hangout-app) .cap-role-th { text-align: center; width: 92px; }
body:not(.hangout-app) .cap-role-name {
    display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: 13.5px; letter-spacing: -0.01em; line-height: 1.1;
    color: var(--v2-on-surface, #0f172a);
}
body:not(.hangout-app) .cap-role-level {
    display: block; font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--v2-on-surface-variant, #94a3b8); margin-top: 3px;
}

/* grouped capability header row (tinted) */
body:not(.hangout-app) .cap-group-row td {
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 6%, transparent);
    border-top: 1px solid var(--v2-outline-variant, #ececf1);
    border-bottom: 1px solid var(--v2-outline-variant, #ececf1);
    padding: 9px 12px;
}
body:not(.hangout-app) .cap-group-row td:first-child {
    position: sticky; left: 0; z-index: 4;
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 6%, var(--v2-surface-lowest, #fff));
}
body:not(.hangout-app) .cap-group-label {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--v2-primary, #9333ea);
}
body:not(.hangout-app) .cap-group-label i { width: 14px; height: 14px; }

/* capability row */
body:not(.hangout-app) .cap-row td {
    border-top: 1px solid var(--v2-outline-variant, #f4f4f7);
    padding: 13px 12px;
}
body:not(.hangout-app) .cap-row:hover td { background: var(--v2-surface-low, #f8f9fb); }
body:not(.hangout-app) .cap-row td.cap-name {
    text-align: left; position: sticky; left: 0; z-index: 3;
    background: var(--v2-surface-lowest, #ffffff);
}
body:not(.hangout-app) .cap-row:hover td.cap-name { background: var(--v2-surface-low, #f8f9fb); }
body:not(.hangout-app) .cap-name-label {
    font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px;
    color: var(--v2-on-surface, #0f172a); line-height: 1.35;
}
body:not(.hangout-app) .cap-name-desc {
    font-family: 'Inter', sans-serif; font-size: 12px;
    color: var(--v2-on-surface-variant, #94a3b8); margin-top: 2px;
    line-height: 1.4;
}

/* the cell: centred check (tinted by column) or a faint not-granted dot */
body:not(.hangout-app) .cap-cell { text-align: center; }
body:not(.hangout-app) .cap-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px;
}
body:not(.hangout-app) .cap-check i { width: 16px; height: 16px; }
/* faint "not granted" dot — borrows the .status-dot dot idea */
body:not(.hangout-app) .cap-nodot {
    display: inline-block; width: 7px; height: 7px; border-radius: 9999px;
    background: var(--v2-outline-variant, #e2e8f0);
}
/* column tint ramp Member (L1, neutral) → HQ (L5, primary) */
body:not(.hangout-app) .cap-check.lvl-1 {
    background: color-mix(in srgb, var(--v2-on-surface-variant, #64748b) 14%, transparent);
    color: var(--v2-on-surface-variant, #64748b);
}
body:not(.hangout-app) .cap-check.lvl-2 {
    background: color-mix(in srgb, #3b82f6 14%, transparent); color: #1d4ed8;
}
body:not(.hangout-app) .cap-check.lvl-3 {
    background: color-mix(in srgb, #22c55e 16%, transparent); color: #15803d;
}
body:not(.hangout-app) .cap-check.lvl-4 {
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 14%, transparent);
    color: var(--v2-primary, #9333ea);
}
body:not(.hangout-app) .cap-check.lvl-5 {
    background: var(--v2-primary, #9333ea); color: #fff;
}

/* matrix legend */
body:not(.hangout-app) .cap-legend {
    display: flex; flex-wrap: wrap; gap: 20px;
    padding: 14px 20px; border-top: 1px solid var(--v2-outline-variant, #ececf1);
    background: var(--v2-surface-low, #f8f9fb);
}
body:not(.hangout-app) .cap-legend-item {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Inter', sans-serif; font-size: 12.5px;
    color: var(--v2-on-surface-variant, #64748b);
}

/* ── Person view: base role + grants + overrides → effective list ── */
body:not(.hangout-app) .person-access { display: block; }
body:not(.hangout-app) .person-grants {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-bottom: 4px;
}
body:not(.hangout-app) .person-grants-label {
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11.5px;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--v2-on-surface-variant, #94a3b8); margin-right: 4px;
}
/* base role chip (purple) */
body:not(.hangout-app) .grant-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 28px;
    padding: 0 12px; border-radius: 9999px;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12.5px;
    background: var(--v2-surface-low, #eff1f2);
    color: var(--v2-on-surface-variant, #595c5d);
}
body:not(.hangout-app) .grant-chip i { width: 13px; height: 13px; }
body:not(.hangout-app) .grant-chip.is-role {
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 12%, transparent);
    color: var(--v2-primary, #9333ea);
}
body:not(.hangout-app) .grant-chip.is-dept {
    background: color-mix(in srgb, #22c55e 14%, transparent); color: #15803d;
}
body:not(.hangout-app) .grant-chip.is-override {
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 16%, transparent);
    color: var(--v2-primary, #9333ea);
    border: 1px dashed color-mix(in srgb, var(--v2-primary, #9333ea) 45%, transparent);
}

/* effective-permission rows: distinguish role-derived vs grant vs override */
body:not(.hangout-app) .source-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 9999px;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11.5px;
}
body:not(.hangout-app) .source-badge i { width: 12px; height: 12px; }
body:not(.hangout-app) .source-badge.role {
    background: color-mix(in srgb, var(--v2-on-surface-variant, #64748b) 14%, transparent);
    color: var(--v2-on-surface-variant, #595c5d);
}
body:not(.hangout-app) .source-badge.department {
    background: color-mix(in srgb, #22c55e 14%, transparent); color: #15803d;
}
body:not(.hangout-app) .source-badge.custom {
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 14%, transparent);
    color: var(--v2-primary, #9333ea);
}
body:not(.hangout-app) .source-badge.none {
    background: var(--v2-surface-low, #eff1f2);
    color: var(--v2-on-surface-variant, #94a3b8);
}

/* ── MATRIX shell — DARK MODE (data-theme + auto/media) ───────── */
[data-theme="dark"] body:not(.hangout-app) .matrix-toggle { background: #11131b; border-color: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .matrix-toggle .is-active { background: #1b1f2c; color: #c4b5fd; }
[data-theme="dark"] body:not(.hangout-app) .cap-matrix-wrap { background: #1b1f2c; border-color: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .cap-matrix thead th,
[data-theme="dark"] body:not(.hangout-app) .cap-row td.cap-name { background: #1b1f2c; border-color: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .cap-matrix thead th { border-bottom-color: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .cap-role-name,
[data-theme="dark"] body:not(.hangout-app) .cap-name-label { color: #e8eaed; }
[data-theme="dark"] body:not(.hangout-app) .cap-role-level,
[data-theme="dark"] body:not(.hangout-app) .cap-corner-title,
[data-theme="dark"] body:not(.hangout-app) .cap-name-desc,
[data-theme="dark"] body:not(.hangout-app) .person-grants-label,
[data-theme="dark"] body:not(.hangout-app) .cap-legend-item { color: #9aa0a6; }
[data-theme="dark"] body:not(.hangout-app) .cap-row td { border-top-color: #23262f; }
[data-theme="dark"] body:not(.hangout-app) .cap-row:hover td,
[data-theme="dark"] body:not(.hangout-app) .cap-row:hover td.cap-name { background: #20242f; }
[data-theme="dark"] body:not(.hangout-app) .cap-legend { background: #15171f; border-color: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .cap-nodot { background: #3a3f4c; }
[data-theme="dark"] body:not(.hangout-app) .grant-chip { background: #272b37; color: #c1c7ce; }
[data-theme="dark"] body:not(.hangout-app) .source-badge.role { background: #272b37; color: #c1c7ce; }
[data-theme="dark"] body:not(.hangout-app) .source-badge.none { background: #272b37; color: #6b7177; }

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] body:not(.hangout-app) .matrix-toggle { background: #11131b; border-color: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .matrix-toggle .is-active { background: #1b1f2c; color: #c4b5fd; }
    [data-theme="auto"] body:not(.hangout-app) .cap-matrix-wrap { background: #1b1f2c; border-color: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .cap-matrix thead th,
    [data-theme="auto"] body:not(.hangout-app) .cap-row td.cap-name { background: #1b1f2c; border-color: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .cap-matrix thead th { border-bottom-color: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .cap-role-name,
    [data-theme="auto"] body:not(.hangout-app) .cap-name-label { color: #e8eaed; }
    [data-theme="auto"] body:not(.hangout-app) .cap-role-level,
    [data-theme="auto"] body:not(.hangout-app) .cap-corner-title,
    [data-theme="auto"] body:not(.hangout-app) .cap-name-desc,
    [data-theme="auto"] body:not(.hangout-app) .person-grants-label,
    [data-theme="auto"] body:not(.hangout-app) .cap-legend-item { color: #9aa0a6; }
    [data-theme="auto"] body:not(.hangout-app) .cap-row td { border-top-color: #23262f; }
    [data-theme="auto"] body:not(.hangout-app) .cap-row:hover td,
    [data-theme="auto"] body:not(.hangout-app) .cap-row:hover td.cap-name { background: #20242f; }
    [data-theme="auto"] body:not(.hangout-app) .cap-legend { background: #15171f; border-color: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .cap-nodot { background: #3a3f4c; }
    [data-theme="auto"] body:not(.hangout-app) .grant-chip { background: #272b37; color: #c1c7ce; }
    [data-theme="auto"] body:not(.hangout-app) .source-badge.role { background: #272b37; color: #c1c7ce; }
    [data-theme="auto"] body:not(.hangout-app) .source-badge.none { background: #272b37; color: #6b7177; }
}

/* ===========================================================
   KAC v2 — Compliance suite atoms (GDPR dashboard, data
   requests, consent audit, audit logs, retention report,
   member access log). Shared directory table + filter pills +
   audit timeline + quick-link rows. Reuses .section-card /
   .status-chip / .status-dot / .rota-avatar / .v2-btn-* from
   above; only these compliance-specific atoms live here.
   Scoped body:not(.hangout-app), dual dark-mode below.
   =========================================================== */

/* ── Directory / compliance table ─────────────────────────── */
body:not(.hangout-app) .crm-table-wrap { overflow-x: auto; }
body:not(.hangout-app) .crm-table { width: 100%; border-collapse: collapse; }
body:not(.hangout-app) .crm-table thead th {
    text-align: left; font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--v2-on-surface-variant, #94a3b8);
    padding: 0 16px 10px 0; white-space: nowrap;
}
body:not(.hangout-app) .crm-table thead th.ta-right { text-align: right; padding-right: 0; }
body:not(.hangout-app) .crm-table tbody td {
    padding: 13px 16px 13px 0; vertical-align: middle;
    border-top: 1px solid var(--v2-outline-variant, #f4f4f7);
    font-family: 'Inter', sans-serif; font-size: 14px;
    color: var(--v2-on-surface, #0f172a);
}
body:not(.hangout-app) .crm-table tbody td:last-child { padding-right: 0; }
body:not(.hangout-app) .crm-table tbody tr.is-flagged td {
    background: color-mix(in srgb, #ef4444 5%, transparent);
}
body:not(.hangout-app) .crm-table tbody tr.is-attention td {
    background: color-mix(in srgb, #f59e0b 6%, transparent);
}
body:not(.hangout-app) .crm-table .cell-strong {
    font-weight: 500; color: var(--v2-on-surface, #0f172a);
}
body:not(.hangout-app) .crm-table .cell-muted {
    color: var(--v2-on-surface-variant, #94a3b8); font-size: 12.5px;
}
body:not(.hangout-app) .crm-table .cell-mono {
    font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 12.5px;
    color: var(--v2-on-surface-variant, #94a3b8);
}
body:not(.hangout-app) .crm-table .cell-id {
    font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 13px;
    color: var(--v2-on-surface-variant, #94a3b8);
}
body:not(.hangout-app) .crm-table .cell-identity { display: flex; align-items: center; gap: 12px; }
body:not(.hangout-app) .crm-table .cell-identity-name {
    font-weight: 500; font-size: 14px; color: var(--v2-on-surface, #0f172a); line-height: 1.3;
}
body:not(.hangout-app) .crm-table .cell-identity-sub {
    font-size: 12.5px; color: var(--v2-on-surface-variant, #94a3b8); line-height: 1.35;
}
body:not(.hangout-app) .crm-table .cell-flag {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px;
    letter-spacing: 0.03em; text-transform: uppercase; color: #b91c1c;
}

/* ── Filter pills (status filters) ────────────────────────── */
body:not(.hangout-app) .crm-filter-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
body:not(.hangout-app) .crm-filter-pill {
    font-family: 'Inter', sans-serif; font-size: 0.8125rem; font-weight: 600;
    padding: 0.4rem 0.95rem; border-radius: 999px; text-decoration: none;
    color: var(--v2-on-surface-variant, #64748b);
    background: var(--v2-surface-low, #eff1f2); border: 1px solid transparent;
    transition: all 0.12s ease; cursor: pointer;
}
body:not(.hangout-app) .crm-filter-pill:hover { color: var(--v2-primary, #9333ea); }
body:not(.hangout-app) .crm-filter-pill.active { background: var(--v2-primary, #9333ea); color: #fff; }

/* ── Audit timeline (view-request case detail) ────────────── */
body:not(.hangout-app) .audit-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
body:not(.hangout-app) .audit-timeline-item {
    position: relative; padding: 0 0 1.1rem 1.6rem; border-left: 2px solid var(--v2-outline-variant, #ececf1);
}
body:not(.hangout-app) .audit-timeline-item:last-child { padding-bottom: 0; border-left-color: transparent; }
body:not(.hangout-app) .audit-timeline-item::before {
    content: ""; position: absolute; left: -6px; top: 3px;
    width: 10px; height: 10px; border-radius: 9999px;
    background: var(--v2-surface-lowest, #fff);
    border: 2px solid var(--v2-on-surface-variant, #94a3b8);
}
body:not(.hangout-app) .audit-timeline-item.is-danger::before { border-color: #ef4444; }
body:not(.hangout-app) .audit-timeline-item.is-warning::before { border-color: #f59e0b; }
body:not(.hangout-app) .audit-timeline-item.is-info::before { border-color: #3b82f6; }
body:not(.hangout-app) .audit-timeline-head {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.2rem;
}
body:not(.hangout-app) .audit-timeline-action {
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px;
    color: var(--v2-on-surface, #0f172a); text-transform: capitalize;
}
body:not(.hangout-app) .audit-timeline-date {
    font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--v2-on-surface-variant, #94a3b8);
}
body:not(.hangout-app) .audit-timeline-meta {
    font-family: 'Inter', sans-serif; font-size: 13px; color: var(--v2-on-surface-variant, #64748b);
}

/* ── Quick-link rows (dashboard) ──────────────────────────── */
body:not(.hangout-app) .gdpr-quicklinks { display: flex; flex-direction: column; }
body:not(.hangout-app) .gdpr-quicklink {
    display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 0;
    text-decoration: none; border-top: 1px solid var(--v2-outline-variant, #f4f4f7);
}
body:not(.hangout-app) .gdpr-quicklink:first-child { border-top: none; }
body:not(.hangout-app) .gdpr-quicklink-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
    background: color-mix(in srgb, var(--v2-primary, #9333ea) 12%, transparent);
    color: var(--v2-primary, #9333ea);
}
body:not(.hangout-app) .gdpr-quicklink-icon i { width: 18px; height: 18px; }
body:not(.hangout-app) .gdpr-quicklink-text { min-width: 0; flex: 1; }
body:not(.hangout-app) .gdpr-quicklink-title {
    font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px;
    color: var(--v2-on-surface, #0f172a); line-height: 1.3;
}
body:not(.hangout-app) .gdpr-quicklink-sub {
    font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--v2-on-surface-variant, #94a3b8);
    line-height: 1.35; margin-top: 1px;
}
body:not(.hangout-app) .gdpr-quicklink-chev { color: var(--v2-outline, #b8bdc7); flex: 0 0 auto; }
body:not(.hangout-app) .gdpr-quicklink:hover .gdpr-quicklink-chev { color: var(--v2-primary, #9333ea); }

/* ── Compliance checklist (dashboard summary) ─────────────── */
body:not(.hangout-app) .compliance-list { list-style: none; margin: 0; padding: 0; }
body:not(.hangout-app) .compliance-list li {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0;
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--v2-on-surface, #0f172a);
}
body:not(.hangout-app) .compliance-list li i { width: 16px; height: 16px; color: #15803d; flex: 0 0 auto; }
body:not(.hangout-app) .compliance-eyebrow {
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11.5px;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--v2-on-surface-variant, #94a3b8); margin: 0 0 0.6rem;
}

/* ── Inline info note (replaces Bootstrap alert-info) ─────── */
body:not(.hangout-app) .crm-note {
    display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.9rem 1.1rem;
    border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.5;
    background: color-mix(in srgb, #3b82f6 8%, transparent);
    color: var(--v2-on-surface, #334155);
    border: 1px solid color-mix(in srgb, #3b82f6 20%, transparent);
}
body:not(.hangout-app) .crm-note i { width: 18px; height: 18px; color: #2563eb; flex: 0 0 auto; margin-top: 1px; }

/* ── Pagination (v2 restyle of Bootstrap .pagination) ─────── */
body:not(.hangout-app) .crm-pagination { display: flex; justify-content: center; gap: 0.35rem; padding: 1.25rem 0 0.25rem; flex-wrap: wrap; }
body:not(.hangout-app) .crm-pagination a, body:not(.hangout-app) .crm-pagination span {
    display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px;
    padding: 0 0.6rem; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
    text-decoration: none; color: var(--v2-on-surface-variant, #64748b);
    border: 1px solid var(--v2-outline-variant, #ececf1); background: var(--v2-surface-lowest, #fff);
}
body:not(.hangout-app) .crm-pagination a:hover { border-color: var(--v2-primary, #9333ea); color: var(--v2-primary, #9333ea); }
body:not(.hangout-app) .crm-pagination .is-active { background: var(--v2-primary, #9333ea); color: #fff; border-color: var(--v2-primary, #9333ea); }
body:not(.hangout-app) .crm-pagination .is-disabled { color: var(--v2-outline, #cbd5e1); border-style: dashed; }

/* ── Empty state (compliance pages) ───────────────────────── */
body:not(.hangout-app) .crm-empty { text-align: center; padding: 2.75rem 1rem; }
body:not(.hangout-app) .crm-empty-icon { color: var(--v2-on-surface-variant, #cbd5e1); margin-bottom: 0.75rem; }
body:not(.hangout-app) .crm-empty h4 {
    font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 18px;
    color: var(--v2-on-surface, #0f172a); margin: 0 0 0.35rem;
}
body:not(.hangout-app) .crm-empty p { color: var(--v2-on-surface-variant, #64748b); margin: 0; }

/* ── Retention bucket stat (escalating severity) ──────────── */
body:not(.hangout-app) .retention-buckets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
body:not(.hangout-app) .retention-bucket {
    background: var(--v2-surface-lowest, #fff); border: 1px solid var(--v2-outline-variant, #ececf1);
    border-left: 4px solid var(--v2-outline, #cbd5e1); border-radius: 14px;
    padding: 1.25rem 1.4rem; box-shadow: 0 4px 16px rgba(15,23,42,.04);
}
body:not(.hangout-app) .retention-bucket.tone-warn { border-left-color: #f59e0b; }
body:not(.hangout-app) .retention-bucket.tone-orange { border-left-color: #f97316; }
body:not(.hangout-app) .retention-bucket.tone-danger { border-left-color: #ef4444; }
body:not(.hangout-app) .retention-bucket-value {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 2rem; line-height: 1;
    color: var(--v2-on-surface, #0f172a); letter-spacing: -0.02em;
}
body:not(.hangout-app) .retention-bucket.tone-warn .retention-bucket-value { color: #b45309; }
body:not(.hangout-app) .retention-bucket.tone-orange .retention-bucket-value { color: #c2410c; }
body:not(.hangout-app) .retention-bucket.tone-danger .retention-bucket-value { color: #b91c1c; }
body:not(.hangout-app) .retention-bucket-label {
    font-family: 'Inter', sans-serif; font-size: 13px; color: var(--v2-on-surface-variant, #64748b); margin-top: 0.35rem;
}
@media (max-width: 760px) { body:not(.hangout-app) .retention-buckets { grid-template-columns: 1fr; } }

/* ── Data-subject identity block (view request) ───────────── */
body:not(.hangout-app) .subject-identity { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.1rem; }
body:not(.hangout-app) .subject-identity-name {
    font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 17px; color: var(--v2-on-surface, #0f172a);
}
body:not(.hangout-app) .subject-identity-sub { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--v2-on-surface-variant, #94a3b8); }

/* ── Dark mode — compliance atoms ─────────────────────────── */
[data-theme="dark"] body:not(.hangout-app) .crm-table thead th { background: transparent; color: #9aa0a6; }
[data-theme="dark"] body:not(.hangout-app) .crm-table tbody td,
[data-theme="dark"] body:not(.hangout-app) .crm-table .cell-strong,
[data-theme="dark"] body:not(.hangout-app) .crm-table .cell-identity-name { color: #e8eaed; }
[data-theme="dark"] body:not(.hangout-app) .crm-table tbody td { border-top-color: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .crm-filter-pill { background: #1b1f2c; color: #9aa0a6; }
[data-theme="dark"] body:not(.hangout-app) .crm-filter-pill.active { background: #7c3aed; color: #fff; }
[data-theme="dark"] body:not(.hangout-app) .audit-timeline-item { border-left-color: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .audit-timeline-item:last-child { border-left-color: transparent; }
[data-theme="dark"] body:not(.hangout-app) .audit-timeline-item::before { background: #1b1f2c; border-color: #6b7177; }
[data-theme="dark"] body:not(.hangout-app) .audit-timeline-action,
[data-theme="dark"] body:not(.hangout-app) .gdpr-quicklink-title,
[data-theme="dark"] body:not(.hangout-app) .subject-identity-name,
[data-theme="dark"] body:not(.hangout-app) .compliance-list li,
[data-theme="dark"] body:not(.hangout-app) .crm-empty h4,
[data-theme="dark"] body:not(.hangout-app) .retention-bucket-value { color: #e8eaed; }
[data-theme="dark"] body:not(.hangout-app) .gdpr-quicklink { border-top-color: #272b37; }
[data-theme="dark"] body:not(.hangout-app) .gdpr-quicklink:first-child { border-top: none; }
[data-theme="dark"] body:not(.hangout-app) .retention-bucket { background: #1b1f2c; border-color: #272b37; border-left-color: #3a3f4c; }
[data-theme="dark"] body:not(.hangout-app) .crm-note { background: color-mix(in srgb, #3b82f6 14%, #1b1f2c); border-color: #2d3a52; color: #c1c7ce; }
[data-theme="dark"] body:not(.hangout-app) .crm-pagination a, [data-theme="dark"] body:not(.hangout-app) .crm-pagination span { background: #1b1f2c; border-color: #272b37; color: #9aa0a6; }
[data-theme="dark"] body:not(.hangout-app) .crm-pagination .is-active { background: #7c3aed; color: #fff; border-color: #7c3aed; }

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] body:not(.hangout-app) .crm-table thead th { background: transparent; color: #9aa0a6; }
    [data-theme="auto"] body:not(.hangout-app) .crm-table tbody td,
    [data-theme="auto"] body:not(.hangout-app) .crm-table .cell-strong,
    [data-theme="auto"] body:not(.hangout-app) .crm-table .cell-identity-name { color: #e8eaed; }
    [data-theme="auto"] body:not(.hangout-app) .crm-table tbody td { border-top-color: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .crm-filter-pill { background: #1b1f2c; color: #9aa0a6; }
    [data-theme="auto"] body:not(.hangout-app) .crm-filter-pill.active { background: #7c3aed; color: #fff; }
    [data-theme="auto"] body:not(.hangout-app) .audit-timeline-item { border-left-color: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .audit-timeline-item:last-child { border-left-color: transparent; }
    [data-theme="auto"] body:not(.hangout-app) .audit-timeline-item::before { background: #1b1f2c; border-color: #6b7177; }
    [data-theme="auto"] body:not(.hangout-app) .audit-timeline-action,
    [data-theme="auto"] body:not(.hangout-app) .gdpr-quicklink-title,
    [data-theme="auto"] body:not(.hangout-app) .subject-identity-name,
    [data-theme="auto"] body:not(.hangout-app) .compliance-list li,
    [data-theme="auto"] body:not(.hangout-app) .crm-empty h4,
    [data-theme="auto"] body:not(.hangout-app) .retention-bucket-value { color: #e8eaed; }
    [data-theme="auto"] body:not(.hangout-app) .gdpr-quicklink { border-top-color: #272b37; }
    [data-theme="auto"] body:not(.hangout-app) .gdpr-quicklink:first-child { border-top: none; }
    [data-theme="auto"] body:not(.hangout-app) .retention-bucket { background: #1b1f2c; border-color: #272b37; border-left-color: #3a3f4c; }
    [data-theme="auto"] body:not(.hangout-app) .crm-note { background: color-mix(in srgb, #3b82f6 14%, #1b1f2c); border-color: #2d3a52; color: #c1c7ce; }
    [data-theme="auto"] body:not(.hangout-app) .crm-pagination a, [data-theme="auto"] body:not(.hangout-app) .crm-pagination span { background: #1b1f2c; border-color: #272b37; color: #9aa0a6; }
    [data-theme="auto"] body:not(.hangout-app) .crm-pagination .is-active { background: #7c3aed; color: #fff; border-color: #7c3aed; }
}

/* Shared 4-up stat-card grid (collapses to 2-up on narrow screens). Used by
   the Insights drill-downs and anywhere a row of stat-cards is needed. */
body:not(.hangout-app) .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 768px) { body:not(.hangout-app) .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ─── Insights period pills ───────────────────────────────────────────────
   Shared by the Insights page (reports.html) and its drill-down detail pages
   via components/insights_period_pills.html, so the period selector is
   identical everywhere instead of living inline in one template. */
body:not(.hangout-app) .insights-periods { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0.85rem; }
body:not(.hangout-app) .period-pill { font-size: 0.875rem; font-weight: 600; padding: 0.4rem 0.95rem; border-radius: 999px; text-decoration: none; color: var(--v2-on-surface-variant, #64748b); background: var(--v2-surface-low, #eff1f2); border: 1px solid transparent; transition: all 0.12s ease; }
body:not(.hangout-app) .period-pill:hover { color: var(--v2-primary, #9333ea); }
body:not(.hangout-app) .period-pill.active { background: var(--v2-primary, #9333ea); color: #fff; }
[data-theme="dark"] body:not(.hangout-app) .period-pill { background: #1b1f2c; color: #9aa0a6; }
[data-theme="dark"] body:not(.hangout-app) .period-pill:hover { color: #c4b5fd; }
[data-theme="dark"] body:not(.hangout-app) .period-pill.active { background: #7c3aed; color: #fff; }
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] body:not(.hangout-app) .period-pill { background: #1b1f2c; color: #9aa0a6; }
    [data-theme="auto"] body:not(.hangout-app) .period-pill:hover { color: #c4b5fd; }
    [data-theme="auto"] body:not(.hangout-app) .period-pill.active { background: #7c3aed; color: #fff; }
}