/* ==========================================
   CALLABLY DESIGN SYSTEM v3.0
   Precision. Intelligence. Premium.
   ========================================== */

/* ==========================================
   1. DESIGN TOKENS & VARIABLES
   ========================================== */
/* Inter loaded via <link> in header.php for non-blocking font delivery */

:root {
    /* Color Palette - Premium Indigo */
    --color-primary: #6366f1;
    --color-primary-btn: #6366f1;  /* button bg = Brand token */
    --color-primary-hover: #4f46e5;
    --color-primary-light: rgba(99, 102, 241, 0.18);
    --color-primary-subtle: rgba(99, 102, 241, 0.10);

    --color-success: #10b981;
    --color-success-light: rgba(16, 185, 129, 0.16);
    --color-warning: #f59e0b;
    --color-warning-light: rgba(245, 158, 11, 0.15);
    --color-error: #f43f5e;
    --color-error-hover: #f43f5e;
    --color-error-light: rgba(244, 63, 94, 0.15);
    --color-error-subtle: rgba(244, 63, 94, 0.08);
    --color-error-dark: #f43f5e;
    --color-info: #6366f1;
    --color-info-light: rgba(99, 102, 241, 0.15);

    --color-warning-hover: #f59e0b;
    --color-warning-dark: #f59e0b;

    /* Neutral Palette - Light Content System */
    --color-white: #ffffff;
    --color-gray-50:  #f8fafc;
    --color-gray-100: #f8fafc;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #e2e8f0;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #64748b;
    --color-gray-700: #475569;
    --color-gray-800: #475569;
    --color-gray-900: #475569;

    /* ── Dark background palette (RGB triplets for rgba() use) ── */
    --gray-800: 71, 85, 105;     /* #475569 — primary dark bg (deeper) */
    --gray-700: 71, 85, 105;     /* #475569 — elevated dark bg (cards/panels) */

    /* Header */
    --header-bg: rgba(var(--gray-800), 1);
    --header-border: rgba(255, 255, 255, 0.06);
    --header-nav-text: rgba(148, 163, 184, 0.75);
    --header-nav-hover: rgba(220, 228, 255, 0.95);
    --header-nav-active-bg: rgba(99, 102, 241, 0.22);
    --header-nav-active-text: #6366f1;

    /* Semantic Colors — Light Content, Dark Chrome */
    --bg-primary:   #f8fafc;
    --bg-secondary: #f8fafc;
    --bg-tertiary:  #f8fafc;
    --bg-elevated:  #ffffff;
    --bg-surface:   #ffffff;
    --border-color: rgba(71, 85, 105, 0.1);

    --text-primary:   #475569;
    --text-secondary: #64748b;
    --text-tertiary:  #94a3b8;
    --text-dim:       #94a3b8;
    --text-inverse:   #ffffff;
    --text-muted:     #94a3b8;
    --text-dark:      #e8eeff;  /* Token 5 — high-contrast text on dark backgrounds */

    --border-primary:   rgba(71, 85, 105, 0.07);
    --border-secondary: rgba(71, 85, 105, 0.12);
    --border-focus: var(--color-primary);

    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Typography Scale */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

    /* Type scale — base 16px, Major Third (1.25×) with practical intermediate steps */
    --text-2xs:  0.6875rem;   /* 11px  — micro-labels, badge counters        */
    --text-xs:   0.75rem;     /* 12px  — table column headers, small captions */
    --text-sm:   0.8125rem;   /* 13px  — secondary text, sidebar items        */
    --text-base: 0.875rem;    /* 14px  — primary body text (dense data UI)    */
    --text-md:   0.9375rem;   /* 15px  — comfortable inline reading text      */
    --text-lg:   1rem;        /* 16px  — emphasized body, nav labels          */
    --text-xl:   1.125rem;    /* 18px  — card titles, modal headings          */
    --text-2xl:  1.25rem;     /* 20px  — section headings                     */
    --text-3xl:  1.5rem;      /* 24px  — page titles                          */
    --text-4xl:  2rem;        /* 32px  — stat numbers, hero figures           */
    --text-5xl:  2.5rem;      /* 40px  — marketing hero headlines             */

    /* Line heights */
    --leading-none:    1;
    --leading-tight:   1.25;   /* headings */
    --leading-snug:    1.375;  /* sub-headings, compact UI */
    --leading-normal:  1.5;    /* body text */
    --leading-relaxed: 1.75;   /* long-form reading */
    --leading-loose:   2;      /* spacious prose */

    /* Font weights */
    --font-light:     300;
    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;
    --font-extrabold: 800;     /* hero numbers, marketing emphasis */
    --font-black:     900;     /* marketing display text only */

    /* Letter-spacing tokens */
    --tracking-tight:   -0.025em;
    --tracking-snug:    -0.015em;
    --tracking-normal:   0em;
    --tracking-wide:     0.025em;
    --tracking-wider:    0.05em;
    --tracking-widest:   0.08em;

    /* Border Radius */
    --radius: 0.5rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --radius-full: 9999px;

    /* Shadows - Light Content Depth */
    --shadow-xs:       0 1px 2px rgba(71, 85, 105, 0.06);
    --shadow-sm:       0 2px 8px rgba(71, 85, 105, 0.08), 0 0 0 1px rgba(71, 85, 105, 0.04);
    --shadow-md:       0 4px 16px rgba(71, 85, 105, 0.10), 0 0 0 1px rgba(71, 85, 105, 0.04);
    --shadow-lg:       0 8px 32px rgba(71, 85, 105, 0.12), 0 0 0 1px rgba(71, 85, 105, 0.05);
    --shadow-xl:       0 16px 52px rgba(71, 85, 105, 0.15), 0 0 0 1px rgba(71, 85, 105, 0.05);
    --shadow-focus:    0 0 0 3px rgba(99, 102, 241, 0.25);
    --shadow-input:    0 1px 3px rgba(71, 85, 105, 0.08), inset 0 1px 2px rgba(71, 85, 105, 0.04);
    --shadow-input-hover: 0 2px 8px rgba(71, 85, 105, 0.10), 0 0 0 1px rgba(71, 85, 105, 0.06);
    --shadow-panel:    -4px 0 24px rgba(71, 85, 105, 0.12);
    --shadow-dropdown: 0 8px 32px rgba(71, 85, 105, 0.14), 0 0 0 1px rgba(71, 85, 105, 0.06);
    --shadow-thumb:    0 1px 3px rgba(71, 85, 105, 0.15);
    --shadow-card:     0 1px 4px rgba(71, 85, 105, 0.07), 0 0 0 1px rgba(71, 85, 105, 0.04);

    /* Overlays */
    --overlay-dark:     rgba(71, 85, 105, 0.78);
    --overlay-medium:   rgba(71, 85, 105, 0.50);
    --overlay-light:    rgba(71, 85, 105, 0.18);
    --overlay-chat:     rgba(71, 85, 105, 0.14);
    --overlay-image:    rgba(71, 85, 105, 0.88);
    --overlay-gradient: rgba(71, 85, 105, 0.65);

    /* Transitions - Buttery Smooth */
    --transition-fast: 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-base: 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-slow: 320ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Z-index Scale */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-toast: 1100;

    /* Legacy Aliases */
    --danger: var(--color-error);
    --color-danger: var(--color-error);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --bg-hover: rgba(71, 85, 105, 0.04);
}

/* ==========================================
   SVG ICON SYSTEM
   Professional, minimal icons replacing emojis
   ========================================== */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 18px; height: 18px; }

.icon-success { color: var(--color-success); }
.icon-error { color: var(--color-error); }
.icon-warning { color: var(--color-warning); }
.icon-info { color: var(--color-info); }
.icon-muted { color: var(--text-tertiary); }

.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--color-primary-light);
}

.icon-badge svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-primary);
}

.icon-badge.success { background: var(--color-success-light); }
.icon-badge.success svg { stroke: var(--color-success); }
.icon-badge.error { background: var(--color-error-light); }
.icon-badge.error svg { stroke: var(--color-error); }
.icon-badge.warning { background: var(--color-warning-light); }
.icon-badge.warning svg { stroke: var(--color-warning); }

/* ==========================================
   2. RESET & BASE STYLES
   ========================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-secondary);
    min-height: 100vh;
    overflow-x: hidden;
    letter-spacing: -0.01em;
}

/* Native form controls do not consistently inherit the page foreground.
   Keep browser defaults from reintroducing black into otherwise themed UI. */
:where(button, input, select, textarea) {
    color: inherit;
}

:where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--color-primary);
}

/* ==========================================
   3. TYPOGRAPHY SYSTEM
   ========================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-top: 0;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* Per-level tuning: tighter tracking for larger text, normal for small */
h1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: 1.2;
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-6);
}
h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-snug);
    margin-bottom: var(--space-5);
}
h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-4);
}
h4 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
    margin-bottom: var(--space-3);
}
h5 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    margin-bottom: var(--space-3);
}
h6 {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    margin-bottom: var(--space-2);
}

p {
    margin-bottom: var(--space-4);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:not(.btn):hover {
    color: var(--color-primary-hover);
}

a:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ==========================================
   4. LAYOUT — SIDEBAR APP SHELL
   ========================================== */

/* Container (used inside content area) */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* ── App Shell ──────────────────────────────────── */
.app-shell {
    display: flex;
    min-height: 100vh;
    background: var(--bg-secondary);
}

/* ── Sidebar ─────────────────────────────────────
   Dark, collapsible left panel.
   Widths: 220px expanded / 56px collapsed (desktop)
─────────────────────────────────────────────────── */
:root {
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 56px;
    --sidebar-bg: rgba(var(--gray-800), 1);
    --sidebar-bottom-bg: rgba(var(--gray-800), 1);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: linear-gradient(90deg, rgba(99, 102, 241, 0.28) 0%, rgba(99, 102, 241, 0.14) 100%);
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --sidebar-text: var(--text-dark);
    --sidebar-text-hover: var(--text-dark);
    --sidebar-active-text: var(--text-dark);
    --sidebar-rail-color: rgba(148, 163, 184, 0.4);
    --sidebar-rail-active-color: rgba(99, 102, 241, 0.6);
    --topbar-height: 50px;
}

.sidebar {
    /* 1px wider than the app-main offset below so the sidebar's edge
       overlaps the content area instead of exactly abutting it — the
       fixed sidebar and the sticky topbar are separate compositor
       layers, and an exact seam between them shows a hairline gap. */
    width: calc(var(--sidebar-width) + 1px);
    flex-shrink: 0;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    box-sizing: border-box;
    border-right: 1px solid var(--sidebar-border);
    z-index: var(--z-sticky);
    overflow: hidden;
    transition: transform var(--transition-base), width 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ── Sidebar Logo ──────────────────────────────── */
.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    flex-shrink: 0;
    background: var(--sidebar-bottom-bg);
    border-bottom: 1px solid var(--sidebar-border);
    /* Matches --topbar-height exactly so the logo row and the topbar
       read as one continuous bar, not two stacked/misaligned ones. */
    height: var(--topbar-height);
    box-sizing: border-box;
}

.sidebar-brand-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    transition: opacity 0.15s ease, max-width 0.15s ease;
}

.sidebar-product-attribution {
    display: flex;
    align-items: center;
    gap: 0.25em;
    color: var(--text-tertiary);
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
}

.sidebar-product-attribution a {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    text-decoration: none;
}

.sidebar-product-attribution a:hover { text-decoration: underline; }

.sidebar-logo-link {
    display: flex;
    align-items: center;
    line-height: 0;
}

.sidebar-logo-img {
    height: 22px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}

.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--sidebar-text);
    cursor: pointer;
    padding: 5px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    margin-left: 4px;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.sidebar-collapse-btn:hover {
    color: var(--sidebar-text-hover);
    background: rgba(255,255,255,0.08);
}

.sidebar-close-btn {
    display: none;
    background: none;
    border: none;
    color: var(--sidebar-text);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}

.sidebar-close-btn:hover { color: var(--sidebar-text-hover); }

/* ── Sidebar Navigation ────────────────────────── */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-2) var(--space-2);
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
}

.sidebar-nav::-webkit-scrollbar { display: none; }

.sidebar-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 0.5rem;
    color: var(--sidebar-text);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
    position: relative;
    white-space: nowrap;
}

.sidebar-nav-item svg {
    flex-shrink: 0;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.sidebar .sidebar-nav-item:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text-hover);
}

.sidebar .sidebar-nav-item:hover svg { opacity: 1; }

.sidebar-nav-item.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: var(--font-medium);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.sidebar-nav-item.active svg { opacity: 1; filter: drop-shadow(0 0 4px rgba(99,102,241,0.6)); }

.sidebar-nav-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small muted qualifier after a nav label, e.g. "Cally (AI Agent)". */
.sidebar-nav-label-tag {
    font-size: 0.78em;
    font-weight: 500;
    opacity: 0.65;
    white-space: nowrap;
}

.sidebar-nav-divider {
    flex: 1;
    background: none;
    height: auto;
    min-height: 8px;
    margin: 0;
}

.sidebar-nav-divider + .sidebar-nav-group {
    border-top: 1px solid var(--sidebar-border);
    padding-top: 6px;
    margin-top: 2px;
}

/* ── Sidebar Group (expandable section) ─────────── */
.sidebar-nav-group-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 0.5rem;
    color: var(--sidebar-text);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    letter-spacing: 0.01em;
    transition: color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
}

/* Classic button toggle (groups without a primary href) */
button.sidebar-nav-group-toggle {
    gap: 10px;
    padding: 11px 12px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

/* Split div toggle (groups with a primary href) */
div.sidebar-nav-group-toggle {
    /* layout only — children handle padding */
}

.sidebar .sidebar-nav-group-toggle:hover,
.sidebar div.sidebar-nav-group-toggle:has(:hover) {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text-hover);
}

button.sidebar-nav-group-toggle > svg:first-child {
    flex-shrink: 0;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

button.sidebar-nav-group-toggle:hover > svg:first-child,
.sidebar-nav-group-toggle.active > svg:first-child { opacity: 1; }

.sidebar-nav-group-toggle.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: var(--font-medium);
}

/* ── Split group: link + chevron ─── */
.sidebar-nav-group-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    padding: 11px 4px 11px 12px;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-nav-group-link svg {
    flex-shrink: 0;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.sidebar-nav-group-toggle.active .sidebar-nav-group-link svg,
.sidebar-nav-group-link:hover svg { opacity: 1; }

.sidebar .sidebar-nav-group-link:hover {
    color: var(--sidebar-text-hover);
}
.sidebar .sidebar-nav-group-chevron-btn:hover {
    color: var(--sidebar-text-hover);
}

.sidebar-nav-group-chevron-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    padding: 11px 12px 11px 8px;
    display: flex;
    align-items: center;
    color: inherit;
    align-self: stretch;
    transition: background var(--transition-fast);
}

.sidebar-nav-group-chevron-btn:hover {
    background: rgba(255,255,255,0.08);
    border-radius: 0 0.5rem 0.5rem 0;
}

/* ── Chevron ─── */
.sidebar-nav-group-chevron {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.65;
    transition: transform 0.25s ease, opacity 0.15s ease;
}

button.sidebar-nav-group-toggle .sidebar-nav-group-chevron { margin-left: auto; }
.sidebar-nav-group-chevron-btn .sidebar-nav-group-chevron { margin-left: 0; }

.sidebar-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 100px; font-size: var(--text-2xs); font-weight: var(--font-extrabold); padding: 0 4px; line-height: 1; background: var(--color-primary, var(--color-primary)); color: var(--text-inverse); margin-left: 4px; flex-shrink: 0; }
.sidebar-is-collapsed .sidebar-nav-badge { display: none; }

.sidebar-nav-group-toggle.open .sidebar-nav-group-chevron {
    transform: rotate(180deg);
    opacity: 0.9;
}

/* ── Children list ─── */
.sidebar-nav-group-children {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0 0 0 29px;
    padding-left: 19px;
    padding-top: 0;
    padding-bottom: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease, padding 0.2s ease;
}

.sidebar-nav-group-children.open {
    opacity: 1;
    padding-top: 3px;
    padding-bottom: 5px;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* ── Dots + Line (Lumion-style: line only between dots) ─── */
.sidebar-nav-group-children > li {
    position: relative;
}

/* Vertical line segment — per item, only spans between dot centers */
.sidebar-nav-group-children > li::after {
    content: '';
    position: absolute;
    left: -20px;
    width: 1px;
    top: 0;
    bottom: 0;
    background: var(--sidebar-rail-color);
    transition: background 0.2s ease;
}

/* First item: line starts at dot center, not before */
.sidebar-nav-group-children > li:first-child::after {
    top: 50%;
}

/* Last item: line ends at dot center, not after */
.sidebar-nav-group-children > li:last-child::after {
    bottom: 50%;
}

/* Single item: no line */
.sidebar-nav-group-children > li:only-child::after {
    display: none;
}

/* Dot */
.sidebar-nav-group-children > li::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sidebar-rail-color);
    z-index: 1;
    transition: background 0.2s ease;
}

/* Active dot + line */
.sidebar-nav-group-children > li:has(.sidebar-nav-child-link.active)::before,
.sidebar-nav-group-children > li:has(.sidebar-nav-child-link.active)::after {
    background: var(--sidebar-rail-active-color);
}

.sidebar-nav-child-link {
    display: block;
    padding: 9px 10px;
    border-radius: 0.375rem;
    color: var(--sidebar-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.sidebar-nav-child-link.active {
    color: var(--sidebar-active-text);
    background: var(--sidebar-active-bg);
    font-weight: var(--font-medium);
}

/* ── Sidebar Bottom ────────────────────────────── */
.sidebar-bottom {
    flex-shrink: 0;
    background: var(--sidebar-bottom-bg);
    border-top: 1px solid var(--sidebar-border);
    padding: 10px 8px;
    position: relative;
}

.sidebar-bottom .sidebar-nav-list {
    margin-bottom: 8px;
}

/* ── Sidebar User Widget ───────────────────────── */
.sidebar-user {
    display: flex;
    align-items: center;
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

/* Split layout: left link navigates, right button opens menu */
.sidebar-user-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 8px 6px 8px 10px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.sidebar-user-main:hover {
    background: rgba(255,255,255,0.06);
}

.sidebar-user-menu-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    color: inherit;
    align-self: stretch;
    transition: background var(--transition-fast);
}

.sidebar-user-menu-btn:hover {
    background: rgba(255,255,255,0.08);
}

.sidebar-user:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.14);
}

.sidebar-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: 1;
    flex-shrink: 0;
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    transition: opacity 0.15s ease, max-width 0.22s cubic-bezier(0.4,0,0.2,1);
}

.sidebar-user-name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--sidebar-text-hover);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.sidebar-user-role {
    font-size: var(--text-xs);
    color: var(--sidebar-text);
    display: block;
}

.sidebar-user-chevron {
    color: var(--sidebar-text);
    flex-shrink: 0;
    transition: transform var(--transition-fast), opacity 0.15s ease;
}

/* ── Sidebar User Popup ────────────────────────── */
.sidebar-user-popup {
    position: fixed;
    width: 224px;
    background: rgba(var(--gray-800), 1);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(71, 85, 105, 0.4);
    overflow: hidden;
    z-index: 1000;
}

.sidebar-user-popup-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: var(--sidebar-text);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
}

a.sidebar-user-popup-item:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text-hover);
}

.sidebar-user-popup-header {
    padding: 10px 14px 8px;
}

.sidebar-user-popup-name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--sidebar-text-hover);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-popup-email {
    font-size: var(--text-xs);
    color: var(--sidebar-text);
    margin-top: 1px;
}

.sidebar-user-popup-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 2px 0;
}

.sidebar-user-popup-danger {
    color: rgba(244, 63, 94, 0.85);
}

a.sidebar-user-popup-danger:hover {
    background: var(--sidebar-hover-bg);
    color: var(--color-error);
}

/* ── Sidebar Collapsed State (desktop only) ────── */
@media (min-width: 900px) {
    html.sidebar-is-collapsed .sidebar {
        width: calc(var(--sidebar-collapsed-width) + 1px);
    }
    html.sidebar-is-collapsed .app-main {
        margin-left: var(--sidebar-collapsed-width);
    }
    html.sidebar-is-collapsed .sidebar-nav-label,
    html.sidebar-is-collapsed .sidebar-nav-group-chevron {
        opacity: 0;
        width: 0;
        max-width: 0;
        flex: 0 0 0;
        overflow: hidden;
        pointer-events: none;
        white-space: nowrap;
    }
    html.sidebar-is-collapsed .sidebar-nav {
        padding-left: 4px;
        padding-right: 4px;
    }
    html.sidebar-is-collapsed .sidebar-bottom {
        padding-left: 4px;
        padding-right: 4px;
    }
    html.sidebar-is-collapsed .sidebar-user-info,
    html.sidebar-is-collapsed .sidebar-user-chevron {
        opacity: 0;
        max-width: 0;
        overflow: hidden;
        pointer-events: none;
    }
    html.sidebar-is-collapsed .sidebar-user-menu-btn {
        display: none;
    }
    /* .sidebar-user-info is hidden via max-width:0/opacity:0 above, not
       display:none, so it's still a flex child of .sidebar-user-main —
       and .sidebar-user-main's base "gap: 10px" (sized for the expanded
       sidebar's avatar/name/chevron row) still applies between the avatar
       and that zero-width phantom element. Verified via getBoundingClientRect:
       with gap left at 10px the avatar's center sat at x=22.5 against a
       true sidebar center of x=28 (5.5px left) — closing the gap here
       moves it to dead center. The base padding (8px 6px 8px 10px) is also
       asymmetric, built for the expanded row where the menu-btn sits to the
       right; with that button hidden in collapsed mode the leftover 10px/6px
       split still pushes the centered avatar 2px right of true center, so
       the left padding is brought down to match the right here too. */
    html.sidebar-is-collapsed .sidebar-user-main {
        gap: 0;
        justify-content: center;
        padding-left: 6px;
    }
    html.sidebar-is-collapsed .sidebar-brand-stack {
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
    }
    html.sidebar-is-collapsed .sidebar-logo {
        justify-content: center;
        padding: 0 8px;
    }
    html.sidebar-is-collapsed .sidebar-nav-item {
        justify-content: center;
        padding: 10px;
        gap: 0;
    }
    html.sidebar-is-collapsed .sidebar-nav-item::before {
        display: none;
    }
    /* The active item's left accent bar + left-to-right gradient (added for
       the expanded sidebar, where they read as a "selected tab" next to the
       label) put all their visual weight on the left edge — with no label
       to balance it in collapsed/icon-only mode, that makes the icon look
       off-center even though it's flexbox-centered. Swap to a symmetric
       flat highlight with no directional bar here instead. */
    html.sidebar-is-collapsed .sidebar-nav-item.active {
        background: rgba(99, 102, 241, 0.22);
        box-shadow: none;
    }
    /* !important here because a later "compact override" rule
       (search .sidebar-nav-group-link's "8px 4px 8px 12px !important")
       forces asymmetric left/right padding meant for the expanded
       sidebar's split link+chevron layout — without !important that rule
       always won here too, regardless of specificity, leaving group items
       (anything with a submenu) visibly off-center in collapsed/icon-only
       mode while plain nav items centered correctly. Padding here is set
       to match .sidebar-nav-item's own collapsed padding (8px 12px, from
       that same compact-override layer) exactly — it was previously 10px
       all around, 2px taller top+bottom than a plain item, which is what
       made every group item's row visibly taller and pushed the gaps
       between collapsed nav rows out of sync with the expanded sidebar's
       rhythm even though .sidebar-nav-list's own gap never changed. */
    html.sidebar-is-collapsed .sidebar-nav-group-toggle {
        justify-content: center !important;
        padding: 8px 12px !important;
        gap: 0 !important;
    }
    html.sidebar-is-collapsed .sidebar-nav-group-children {
        display: none !important;
    }
    html.sidebar-is-collapsed .sidebar-nav-group-link {
        flex: none !important;
        justify-content: center !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    html.sidebar-is-collapsed .sidebar-nav-group-chevron-btn {
        display: none;
    }
    html.sidebar-is-collapsed .sidebar-user {
        justify-content: center;
    }
    html.sidebar-is-collapsed .sidebar-collapse-btn svg {
        transform: rotate(180deg);
    }
    html.sidebar-is-collapsed .sidebar-bottom {
        padding: 10px 8px;
    }
}

/* ── Collapsed Flyout Submenu ───────────────────── */
.sidebar-flyout {
    position: fixed;
    z-index: 9999;
    background: rgba(var(--gray-700), 1);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(71, 85, 105, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 190px;
    padding: 6px 0;
    pointer-events: auto;
}

.sidebar-flyout-title {
    padding: 9px 16px 7px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: rgba(232, 238, 255, 0.65);
    border-bottom: 1px solid rgba(71, 85, 105, 0.06);
    margin-bottom: 4px;
}

.sidebar-flyout-item {
    display: block;
    padding: 9px 16px;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--sidebar-text);
    text-decoration: none;
    transition: background 0.13s ease, color 0.13s ease;
    white-space: nowrap;
}

.sidebar-flyout-item:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text-hover);
}

.sidebar-flyout-item.active {
    color: var(--color-primary);
    font-weight: var(--font-medium);
    background: rgba(99, 102, 241, 0.06);
}

/* ── Sidebar Sign-Out Link ──────────────────────── */
.sidebar-signout-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    color: rgba(244, 63, 94, 0.6);
    text-decoration: none;
    transition: color var(--transition-fast), background var(--transition-fast);
    border-radius: var(--radius);
    margin: var(--space-1) var(--space-2);
}

.sidebar-signout-link:hover {
    color: var(--color-error);
    background: rgba(244, 63, 94, 0.08);
}

.sidebar-signout-link svg {
    flex-shrink: 0;
    opacity: 0.8;
}

/* ── Sidebar Overlay (mobile) ──────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(71, 85, 105, 0.5);
    backdrop-filter: blur(2px);
    z-index: calc(var(--z-sticky) - 1);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.sidebar-overlay.active {
    opacity: 1;
}

/* ── App Main ─────────────────────────────────────
   Content area sits beside the sidebar.
─────────────────────────────────────────────────── */
.app-main {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-secondary);
    transition: margin-left 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ── Top Bar (universal — desktop shows right-side actions only, since the
   sidebar already covers branding/navigation there; mobile also shows the
   hamburger + logo) ──────────────────────── */
.topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--topbar-height);
    padding: 0 var(--space-4);
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--sidebar-border);
    position: sticky;
    top: 0;
    z-index: var(--z-dropdown);
    flex-shrink: 0;
}

.topbar-menu-btn {
    background: none;
    border: none;
    color: var(--sidebar-text);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
}

.topbar-menu-btn:hover { color: var(--sidebar-text-hover); }

.topbar-notif-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-md); color: var(--sidebar-text); text-decoration: none; background: none; border: none; cursor: pointer; font: inherit; transition: background 0.15s, color 0.15s; }
.topbar-notif-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-text-hover); }
.topbar-notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; border-radius: 100px; font-size: var(--text-2xs); font-weight: var(--font-extrabold); display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; border: 1.5px solid #475569; }
.topbar-notif-badge-primary { background: var(--color-primary, var(--color-primary)); color: var(--text-inverse); }
.topbar-notif-badge-warn { background: var(--color-warning, var(--color-warning)); color: var(--text-inverse); }

.topbar-logo {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Desktop: the sidebar already shows the logo and provides navigation, so
   hide the hamburger + wordmark here and let the right-side actions sit
   flush against the sidebar's edge. */
@media (min-width: 900px) {
    .topbar-menu-btn, .topbar-logo { display: none; }
    .topbar-right { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* Quick Actions + Profile dropdowns */
.topbar-dropdown-wrap { position: relative; }

.topbar-quickadd-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    height: 34px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--sidebar-border);
    background: transparent;
    color: var(--sidebar-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.topbar-quickadd-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-text-hover); }
@media (max-width: 1099px) { .topbar-quickadd-label { display: none; } .topbar-quickadd-btn { padding: 0; width: 34px; justify-content: center; } }

.topbar-profile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: var(--color-primary);
    color: var(--text-inverse);
}
.topbar-profile-avatar { color: var(--text-inverse); font-size: var(--text-sm); font-weight: var(--font-bold); }

/* Persistent impersonation state lives in the existing header so it remains
   unmistakable without reducing the workspace's vertical area. */
.topbar-impersonation {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: 34px;
    gap: 7px;
    padding: 0 4px 0 10px;
    border: 1px solid rgba(245, 158, 11, 0.42);
    border-radius: var(--radius-full);
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-warning-dark, #92400e);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.topbar-impersonation-icon { flex: none; }

.topbar-impersonation-text {
    display: flex;
    gap: 0.25em;
    min-width: 0;
}

.topbar-impersonation-text strong {
    display: block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-impersonation-exit {
    flex: none;
    height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-warning, #d97706);
    color: #fff;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: background var(--transition-fast), opacity var(--transition-fast);
}

.topbar-impersonation-exit:hover { opacity: 0.86; }

@media (max-width: 899px) {
    .topbar-impersonation-prefix { display: none; }
    .topbar-impersonation-text strong { max-width: 110px; }
}

@media (max-width: 600px) {
    .topbar-impersonation { gap: 5px; padding-left: 7px; }
    .topbar-impersonation-icon { display: none; }
    .topbar-impersonation-text strong { max-width: 64px; }
    .topbar-impersonation-exit { padding: 0 8px; }
}

.topbar-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    min-width: 210px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(71, 85, 105, 0.15));
    padding: var(--space-2);
    z-index: var(--z-dropdown);
    /* Soft open/close from the trigger, matching the AI companion panel's
       scale+fade instead of a hard display:none/block toggle. */
    opacity: 0;
    transform: scale(0.92) translateY(-6px);
    transform-origin: top right;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.topbar-dropdown-menu.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    visibility: visible;
}
.topbar-dropdown-menu-right { left: auto; right: 0; transform-origin: top right; }

.topbar-dropdown-header { padding: var(--space-2) var(--space-2) var(--space-1); }
.topbar-dropdown-header-name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); overflow-wrap: anywhere; }
.topbar-dropdown-header-role { font-size: var(--text-xs); color: var(--text-secondary); }
.topbar-dropdown-divider { height: 1px; background: var(--border-primary); margin: var(--space-1) 0; }

.topbar-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    /* Reset <button> UA chrome so a <button> item is indistinguishable from
       an <a> item — both are used interchangeably in this menu. */
    width: 100%;
    background: none;
    border: none;
    font-family: inherit;
    font-weight: inherit;
    text-align: left;
    cursor: pointer;
}
.topbar-dropdown-item:hover { background: var(--bg-secondary); }
.topbar-dropdown-item-danger { color: var(--color-danger, #ef4444); }
.topbar-dropdown-item-danger:hover { background: rgba(239,68,68,0.08); }

/* ── Universal topbar search (contacts, call/text history, pages) ──
   The icon itself expands in place into an inline field instead of
   opening a separate panel below a static button. */
.topbar-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: transparent;
    transition: width 0.22s cubic-bezier(0.4,0,0.2,1), background 0.15s ease, border-color 0.15s ease;
}
.topbar-search-wrap.open {
    width: 320px;
    background: rgba(255,255,255,0.06);
    border-color: var(--sidebar-border);
}
.topbar-search-icon-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--sidebar-text);
    cursor: pointer;
    transition: color 0.15s ease;
}
.topbar-search-wrap:not(.open):hover .topbar-search-icon-btn { background: var(--sidebar-hover); color: var(--sidebar-text-hover); }
.topbar-search-wrap.open .topbar-search-icon-btn { color: var(--sidebar-text-hover); pointer-events: none; }
.topbar-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 var(--space-2) 0 0;
    border: none;
    background: transparent;
    color: var(--sidebar-text-hover);
    font-size: var(--text-sm);
    font-family: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.topbar-search-input::placeholder { color: var(--sidebar-text); }
/* The wrap's own border/background already signal the active state
   (.topbar-search-wrap.open above), so the field skips the sitewide
   focus-visible outline rather than drawing two focus rings on top
   of each other. Scoped by #gsearchInput too (not just the class) —
   workspace.css's `:is(a, button, input, ...):focus-visible` rule has
   the exact same specificity as a bare class selector here and loads
   after this file, so it would otherwise win the tie and keep drawing
   the outline this rule is trying to remove. */
#gsearchInput.topbar-search-input:focus,
#gsearchInput.topbar-search-input:focus-visible { outline: none; }
.topbar-search-wrap.open .topbar-search-input { opacity: 1; pointer-events: auto; transition: opacity 0.15s ease 0.08s; }
.topbar-search-results-menu { width: min(360px, 90vw); padding: var(--space-2); left: auto; right: 0; }
@media (max-width: 480px) {
    .topbar-search-results-menu { position: fixed; top: 58px; left: 16px; right: 16px; width: auto; }
    .topbar-search-wrap.open { width: calc(100vw - 140px); }
}
.gsearch-results { max-height: 360px; overflow-y: auto; }
.gsearch-group-label { font-size: var(--text-2xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); padding: var(--space-2) var(--space-2) var(--space-1); }
.gsearch-item { display: flex; flex-direction: column; gap: 1px; padding: var(--space-2); border-radius: var(--radius-sm); text-decoration: none; color: var(--text-primary); }
.gsearch-item:hover { background: var(--bg-secondary); }
.gsearch-item-title { font-size: var(--text-sm); font-weight: var(--font-medium); }

.gsearch-empty { padding: var(--space-3) var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); text-align: center; }

/* ── App Banners ─────────────────────────────────── */
.app-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-6);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    border-bottom: 1px solid transparent;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.app-banner-info {
    background: linear-gradient(90deg, rgba(99,102,241,0.12), rgba(99,102,241,0.06));
    border-color: rgba(99,102,241,0.2);
    color: var(--color-primary);
}

.app-banner-urgent {
    background: linear-gradient(90deg, rgba(244,63,94,0.1), rgba(244,63,94,0.05));
    border-color: rgba(244,63,94,0.2);
    color: var(--color-error);
}

.app-banner-warning {
    background: linear-gradient(90deg, rgba(245,158,11,0.1), rgba(245,158,11,0.05));
    border-color: rgba(245,158,11,0.2);
    color: var(--color-warning-dark);
}

.app-banner svg { flex-shrink: 0; }

.app-banner-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: currentColor;
    background: var(--color-primary-btn, var(--color-primary));
    color: var(--text-inverse);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-full);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity var(--transition-fast);
    flex-shrink: 0;
}

.app-banner-urgent .app-banner-btn {
    background: var(--color-error);
}

.app-banner-warning .app-banner-btn {
    background: var(--color-warning);
}

.app-banner-btn:hover { opacity: 0.85; }

.app-banner-btn-ghost {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
}

.app-banner-sep {
    opacity: 0.4;
}

.app-banner-dismiss {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: currentColor;
    opacity: 0.5;
    font-size: var(--text-xl);
    line-height: 1;
    padding: 2px 4px;
    transition: opacity var(--transition-fast);
    flex-shrink: 0;
}

.app-banner-dismiss:hover { opacity: 1; }

/* ── Main Content ───────────────────────────────── */
/* Single source of truth for .main-content — was defined 4x in this file
   (two of them just to override padding, one just to change the load
   animation). Do not re-add a duplicate; extend this one instead. */
.main-content {
    flex: 1;
    padding: var(--space-3) var(--space-4) var(--space-6);
    overflow-x: hidden;
    animation: fadeIn 200ms ease;
}

/* Logo (legacy, used on landing pages) */
.logo {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text-inverse);
    letter-spacing: -0.05em;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: opacity var(--transition-fast);
}

.logo:hover {
    opacity: 0.85;
}

.logo-wordmark {
    filter: brightness(0) invert(1);
}

/* Mobile menu styles for landing/SEO/legal pages live in /css/shared.css. */

.mobile-user-section {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
}

/* Navigation - Dark Header Style */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2px;
    align-items: center;
}

.nav-menu a {
    padding: 0.4rem 0.75rem;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--header-nav-text);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    position: relative;
}

.nav-menu a svg {
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.nav-menu a:hover {
    color: var(--header-nav-hover);
    background: rgba(255, 255, 255, 0.07);
}

.nav-menu a:hover svg {
    opacity: 1;
}

.nav-menu a.active {
    color: var(--header-nav-active-text);
    font-weight: var(--font-semibold);
    background: var(--header-nav-active-bg);
}

.nav-menu a.active svg {
    opacity: 1;
}

.nav-menu a.active::after {
    content: none;
}

.nav-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 var(--space-2);
    flex-shrink: 0;
}

/* User Info */
.user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    white-space: nowrap;
}

/* ── Sidebar Mobile Breakpoint ─────────────────────
   Below 900px: sidebar slides in as a drawer.
   Above 900px: sidebar is always visible (fixed).
─────────────────────────────────────────────────── */
@media (max-width: 899px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 8px 0 40px rgba(71, 85, 105, 0.5);
    }
    .sidebar-close-btn {
        display: flex;
    }
    .sidebar-collapse-btn {
        display: none !important;
    }
    .sidebar-overlay.active {
        display: block;
    }
    .sidebar-overlay {
        display: block;
        opacity: 0;
        pointer-events: none;
    }
    .sidebar-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
    .app-main {
        margin-left: 0;
    }
    .topbar {
        display: flex;
    }
    .main-content {
        padding: var(--space-4);
    }
}

.user-name {
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.header-user-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    padding: 4px 10px 4px 4px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.15s ease;
}
.header-user-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.95);
}

.header-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
}

.settings-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow: 0 12px 40px rgba(71, 85, 105, 0.12), 0 0 0 1px rgba(71, 85, 105, 0.04);
    z-index: 200;
    min-width: 220px;
    overflow: hidden;
    padding: 6px;
}

.settings-dropdown-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}
.settings-dropdown-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    flex-shrink: 0;
}

.settings-dropdown-divider {
    height: 1px;
    background: var(--border-primary);
    margin: 4px 8px;
}
.settings-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    transition: all 100ms ease;
}
.settings-dropdown-item:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.settings-dropdown-item svg {
    opacity: 0.6;
    flex-shrink: 0;
}
.settings-dropdown-logout {
    color: var(--danger);
}
.settings-dropdown-logout:hover {
    background: rgba(244, 63, 94, 0.06);
    color: var(--danger);
}

/* Main Content — override previous rule */
/* (canonical rule is in section 4 .main-content) */

/* ==========================================
   5. CARD COMPONENTS - Clean & Elevated
   ========================================== */
.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(71, 85, 105,0.05), 0 1px 2px rgba(71, 85, 105,0.04);
    overflow: hidden;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

/* Single source of truth for .card:hover — a dashboard is full of cards, so
   hover intentionally does NOT move/lift them (that reads as jittery at
   density); depth comes from a richer shadow + border shift only. This used
   to be defined three times in this file with conflicting values — do not
   re-add a duplicate elsewhere. */
.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-secondary);
}

.card.clickable {
    cursor: pointer;
}

.card.clickable:active {
    box-shadow: var(--shadow-xs);
    transform: scale(0.99);
}

/* .card-header/.card-body consolidated (were each defined 3x and 2x
   respectively, two copies using !important to force compact padding) —
   do not re-add a duplicate. */
.card-header {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    letter-spacing: -0.015em;
}

.card-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.card-body {
    padding: var(--space-2) var(--space-3);
}

.card-footer {
    padding: var(--space-2) var(--space-4);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
}

/* Status Cards - Compact Metrics */
.status-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.status-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-2);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
}

.status-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.status-card:hover::before {
    opacity: 1;
}

.status-number {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.status-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-tertiary);
}

.stat-breakdown {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 1;
}

.stat-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    flex-wrap: nowrap;
    margin-bottom: 0.25rem;
    font-size: var(--text-sm);
}

.stat-row:last-child {
    margin-bottom: 0;
}

.stat-in,
.stat-out {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.35rem;
    border-radius: 999px;
    font-size: var(--text-2xs);
    font-weight: var(--font-semibold);
    white-space: nowrap;
}

.stat-in {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

.stat-out {
    background: rgba(99,102,241, 0.1);
    color: var(--color-primary);
}

.stat-period {
    font-size: var(--text-2xs);
    font-weight: var(--font-normal);
    color: var(--text-secondary);
    margin-top: 0.25rem;
    letter-spacing: 0.02em;
}

.team-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xs);
    padding: 1px 0;
    color: var(--text-secondary);
}

.team-stat-row.top-performer {
    color: var(--color-warning);
    font-weight: var(--font-semibold);
    padding: 3px 6px;
    margin: 0 -6px;
    background: rgba(245, 158, 11, 0.08);
    border-radius: var(--radius-sm);
}

.team-stat-row.top-performer .team-stat-count {
    color: var(--color-warning);
}

.top-performer-icon {
    font-size: var(--text-xs);
    margin-right: 2px;
}

.team-stat-count {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    font-size: var(--text-xs);
}

.row-num {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    text-align: center;
    min-width: 28px;
}

.log-entry .row-num {
    background: var(--bg-tertiary);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    min-width: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

/* ==========================================
   6. FORM COMPONENTS - Super Advanced Styling
   ========================================== */
/* .form-group consolidated (was 2x, the second forcing space-4 via
   !important) — do not re-add a duplicate. */
.form-group {
    margin-bottom: var(--space-4);
    position: relative;
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

/* Form Controls */
.form-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1.5px solid var(--border-primary);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    outline: none;
    position: relative;
    box-shadow: var(--shadow-input);
}

.form-control::placeholder {
    color: var(--color-gray-400);
    transition: opacity var(--transition-fast);
}

/* Hover State */
.form-control:hover:not(:disabled) {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-input-hover);
}

/* Focus State */
.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.form-control:focus::placeholder {
    opacity: 0.5;
}

.form-control-sm {
    padding: 0.3rem 0.55rem;
    font-size: var(--text-xs);
}

/* Disabled State */
.form-control:disabled {
    background: var(--bg-tertiary);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Textarea Enhancement */
textarea.form-control {
    resize: vertical;
    min-height: 120px;
    line-height: var(--leading-relaxed);
}

/* Form Select - Matches button height */
.form-select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    padding-right: calc(var(--space-3) + 20px);
    font-size: var(--text-xs);
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-2) center;
    box-shadow: var(--shadow-input);
}

.form-select:hover:not(:disabled) {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-input-hover);
    transform: translateY(-1px);
}

.form-select:focus {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-focus), 0 4px 8px 0 rgba(99, 102, 241, 0.08);
    transform: translateY(-1px);
}

.form-select:disabled {
    background: var(--bg-tertiary);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

/* Select Enhancement */
select.form-control {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem;
    appearance: none;
}

select.form-control:hover:not(:disabled) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
}

select.form-control:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236366f1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
}

/* Input Group - Advanced Layout */
.input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group .form-control {
    flex: 1;
    min-width: 0;
}

.input-group-prepend,
.input-group-append,
.input-group-text {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}

.input-group-prepend,
.input-group-text {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    border-right: 0;
}

.input-group-append {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: 0;
}

.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Validation States */
.form-control.is-valid {
    border-color: var(--color-success);
    padding-right: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310b981'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem 1.25rem;
}

.form-control.is-valid:focus {
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-control.is-invalid {
    border-color: var(--color-error);
    padding-right: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23f43f5e'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem 1.25rem;
}

.form-control.is-invalid:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.1);
}

.valid-feedback {
    display: none;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-success);
}

.invalid-feedback {
    display: none;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-error);
}

.form-control.is-valid ~ .valid-feedback {
    display: block;
}

.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Form Row */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
}

/* Form Helper Text */
.form-text {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.text-muted {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

/* Floating Label Effect */
.form-floating {
    position: relative;
}

.form-floating > .form-control {
    padding: 1.625rem 0.75rem 0.625rem;
}

.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    color: var(--text-tertiary);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* ==========================================
   7. BUTTON COMPONENTS - Micro-interactions
   ========================================== */
/* Single source of truth for the .btn family (base + hover/active + ripple).
   This used to be split across two non-adjacent blocks in this file with
   overlapping, sometimes conflicting transform/shadow values for the same
   selectors — do not re-add a duplicate .btn/.btn:hover block elsewhere. */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.4rem 0.85rem;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    font-family: var(--font-sans);
    line-height: 1.4;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    outline: none;
    user-select: none;
    white-space: nowrap;
    letter-spacing: -0.005em;
    overflow: hidden;
    isolation: isolate;
}

/* Subtle tactile ripple on click */
.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    z-index: -1;
    pointer-events: none;
}

.btn:active::after {
    width: 260px;
    height: 260px;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0) scale(0.97);
}

.btn:focus-visible {
    box-shadow: var(--shadow-focus);
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary-btn, var(--color-primary)) 0%, var(--color-primary-hover) 100%);
    color: var(--text-inverse);
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-btn, var(--color-primary)) 100%);
    color: var(--text-inverse);
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.4);
}

.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--border-secondary);
}

.btn-danger {
    background: var(--bg-elevated);
    color: var(--color-error);
    border-color: var(--color-error);
    box-shadow: none;
}

.btn-danger:hover {
    background: var(--color-error-light);
    color: var(--color-error);
    border-color: var(--color-error);
    box-shadow: none;
}

/* Confirmation dialogs keep the solid red action button; row/toolbar delete buttons use the light style above. */
.modal-dialog .btn-danger {
    background: linear-gradient(135deg, var(--color-error) 0%, #e11d48 100%);
    color: var(--text-inverse);
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(244, 63, 94, 0.3);
}
.modal-dialog .btn-danger:hover {
    background: linear-gradient(135deg, #e11d48 0%, var(--color-error) 100%);
    color: var(--text-inverse);
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(244, 63, 94, 0.4);
}

.btn-warning {
    background: linear-gradient(135deg, var(--color-warning) 0%, #d97706 100%);
    color: var(--text-inverse);
    border-color: var(--color-warning);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, var(--color-warning) 100%);
    color: var(--text-inverse);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
}

.btn-ghost {
    background: linear-gradient(to top, var(--bg-primary) 60%, transparent);
    padding-top: 2rem;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-sm,
.btn-xs,
.btn-lg {
    padding: 0.4rem 0.85rem;
    font-size: var(--text-xs);
}

.btn-icon {
    padding: var(--space-2);
    min-width: 2rem;
    justify-content: center;
}

/* Icon-only action buttons (Edit/Delete/View/Copy row actions) — the icon
   stays, .btn-label text is hidden; title/aria-label carry the accessible
   name. Scoped to this class only so it never touches the many other
   buttons (Save, Add Contact, etc.) that also use a .btn-label span. */
.btn-icon-only {
    padding: var(--space-2);
    min-width: 2rem;
    justify-content: center;
    gap: 0;
}
.btn-icon-only .btn-label {
    display: none;
}

/* Repeated row actions are secondary to the data itself. Keep their space
   stable, reveal them on intent (hover/focus), and keep touch access visible. */
.row-hover-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
tr:hover .row-hover-actions,
tr:focus-within .row-hover-actions,
.cal-day-item:hover .row-hover-actions,
.cal-day-item:focus-within .row-hover-actions,
.row-hover-actions:focus-within { opacity: 1; }

.row-action-danger {
    color: var(--text-tertiary);
    background: transparent;
    border-color: var(--border-primary);
}
.row-action-danger:hover,
.row-action-danger:focus-visible {
    color: var(--color-error);
    background: var(--color-error-light);
    border-color: var(--color-error);
}

.ai-decision-actions { white-space: nowrap; }
.ai-draft-label { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 2px; }
.ai-draft-text { display: block; color: var(--text-primary); line-height: 1.45; overflow-wrap: anywhere; }
.ai-draft-input { width: 100%; box-sizing: border-box; margin: 4px 0; }
.ai-draft-edit { font-size: var(--text-sm); font-weight: 600; color: var(--ai-accent, #4f46e5); text-decoration: none; }
.ai-draft-edit:hover { text-decoration: underline; }
.ai-decision-btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-primary);
    background: transparent;
    color: var(--text-tertiary);
    font: inherit;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.ai-decision-approve:hover,
.ai-decision-approve:focus-visible {
    color: var(--color-success);
    background: var(--color-success-light);
    border-color: var(--color-success);
}
.ai-decision-dismiss:hover,
.ai-decision-dismiss:focus-visible {
    color: var(--color-error);
    background: var(--color-error-light);
    border-color: var(--color-error);
}

.team-member-cell {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-primary);
}
.team-member-fallback-icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
}

@media (hover: none), (pointer: coarse) {
    .row-hover-actions { opacity: 1; }
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-disabled-look {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ==========================================
   8. BADGE COMPONENTS
   ========================================== */
/* Single source of truth for .badge — was defined 3x in this file with
   drifting padding/font-size/weight; the values below are the ones that
   were actually winning (the last definition, source-order), just
   collected in one place instead of three. Do not re-add a duplicate. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: var(--text-2xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-full);
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.4;
    transition: all var(--transition-fast);
}
.badge:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.badge-primary {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.badge-success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.badge-warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.badge-error, 
.badge-danger {
    background: var(--color-error-light);
    color: var(--color-error);
}

.badge-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* ==========================================
   9. ALERT COMPONENTS
   ========================================== */
/* .alert was defined twice; kept the values already winning the cascade
   (the later, more complete copy — this location's border-radius/padding/
   margin-bottom were all overridden anyway). */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    border: 1px solid transparent;
    margin-bottom: var(--space-3);
    position: relative;
    line-height: 1.5;
}

/* .alert-success/-error/-warning/-info were each defined twice (here and
   again further down); merged into one definition per variant using the
   values already winning the cascade. Note: the second copy's .alert-error
   used a hardcoded rgba(244,63,94,0.06) background instead of the
   --color-error-light token (which resolves to a much stronger 0.15 alpha)
   — kept the actually-rendering rgba value rather than silently darkening
   the alert, but this token/value mismatch is worth a deliberate follow-up
   decision rather than fixing it here as a "duplicate". */
.alert-success {
    background: var(--color-success-light);
    border-color: var(--color-success);
    color: var(--color-success);
}

.alert-error,
.alert-danger {
    background: rgba(244,63,94,0.06);
    border-color: var(--color-error);
    color: var(--color-error);
}

.alert-warning {
    background: var(--color-warning-light);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.alert-info {
    background: var(--color-info-light);
    border-color: var(--color-info);
    color: var(--color-info);
}

/* ==========================================
   10. TABLE COMPONENTS
   ========================================== */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.table th {
    padding: 0.45rem var(--space-3);
    text-align: left;
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-secondary);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.table td {
    padding: 0.55rem var(--space-3);
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-secondary);
}

.table tbody tr {
    transition: background var(--transition-fast);
}

.table tbody tr:hover {
    background: var(--color-primary-subtle);
}

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

/* Data Table (styled to match .table). This was previously defined twice
   (here and again near .data-table-wrapper); merged into one definition
   using the values that were already winning the cascade (the later
   .data-table-wrapper-adjacent copy for th/td spacing, font-size, color,
   letter-spacing and white-space; this location's container styling for
   border/background/radius, which the other copy never set). */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.data-table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-secondary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.data-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-primary);
    vertical-align: middle;
}

.data-table tbody tr {
    transition: background var(--transition-fast);
}

.data-table tbody tr:hover {
    background: var(--color-primary-subtle);
}

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

/* ==========================================
   11. MODAL COMPONENTS - Refined
   ========================================== */
.modal,
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--overlay-dark);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    padding: var(--space-4);
    overflow-y: auto;
    align-items: center;
    justify-content: center;
}

.modal.active,
.modal-overlay.active {
    display: flex;
    animation: fadeIn var(--transition-base);
}

.modal-content,
.modal-dialog {
    position: relative;
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    width: 100%;
    max-width: 500px;
    margin: auto;
    box-shadow: 0 24px 64px rgba(71, 85, 105, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.07);
    animation: slideUp var(--transition-slow);
    overflow: hidden;
}

.modal-sm .modal-dialog,
.modal-dialog.modal-sm {
    max-width: 420px;
}

.modal-lg .modal-dialog,
.modal-dialog.modal-lg {
    max-width: 700px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-primary);
}

.modal-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.modal-close {
    background: var(--bg-tertiary);
    border: none;
    font-size: var(--text-xl);
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-body {
    padding: var(--space-6);
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    background: var(--bg-elevated);
}

.modal-footer {
    padding: var(--space-4) var(--space-6);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* Section Header for Cards — .section-header-content/.section-actions
   were each defined 3x with drifting gap units; consolidated here. */
.section-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.section-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 0.5rem;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================
   12. LOG COMPONENTS - Clean Display
   ========================================== */

/* Logs Filter Row - One Row Layout */
.logs-filter-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: nowrap;
}

.logs-filter-row .form-control {
    flex: 1;
    min-width: 90px;
}

.logs-filter-row .form-control:first-child {
    max-width: 180px;
}

.logs-filter-row .btn {
    flex-shrink: 0;
}

.log-entry {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    transition: all var(--transition-fast);
}

.log-entry:hover {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-sm);
}

/* Expandable Log Entries */
.expandable-log-entry {
    cursor: pointer;
    user-select: none;
}

.expandable-log-entry:hover {
    background: var(--bg-tertiary);
}

.expandable-log-entry .expand-icon {
    display: inline-block;
    margin-right: var(--space-2);
    font-size: var(--text-2xs);
    color: var(--text-secondary);
    transition: transform var(--transition-fast);
}

.expandable-log-entry.expanded .expand-icon {
    transform: rotate(90deg);
}

.expandable-log-entry .full-text {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-tertiary);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    animation: slideDown 0.2s ease-out;
}

.expandable-log-entry .expand-hint {
    margin-left: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-primary);
    font-style: italic;
    opacity: 0.7;
}

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

.log-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.log-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}

.log-meta-left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.topbar-right,
.header-right,
.log-meta-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.log-timestamp {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
}

.log-content {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.log-content pre {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    margin-top: var(--space-3);
}

/* ==========================================
   13. AUTH PAGES — Login / Signup
   Consistent with app's dark, premium look
   ========================================== */
.login-container {
    /* Auth pages — light theme matching landing page lp-light sections */
    --bg-primary:      #ffffff;
    --bg-secondary:    #f8fafc;
    --bg-tertiary:     #f8fafc;
    --bg-elevated:     #ffffff;
    --text-primary:    #475569;
    --text-secondary:  #64748b;
    --text-tertiary:   #64748b;
    --text-dim:        #94a3b8;
    --text-muted:      #64748b;
    --border-primary:  rgba(71, 85, 105, 0.08);
    --border-secondary: rgba(71, 85, 105, 0.12);
    --bg-hover:        rgba(71, 85, 105, 0.04);
    /* Light gray scale */
    --color-gray-50:  #f8fafc;
    --color-gray-100: #f8fafc;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #e2e8f0;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #64748b;
    --color-gray-700: #475569;
    --color-gray-800: #475569;
    --color-gray-900: #475569;
    /* Light shadows */
    --shadow-xs:       0 1px 2px rgba(71, 85, 105, 0.06);
    --shadow-sm:       0 2px 8px rgba(71, 85, 105, 0.08);
    --shadow-md:       0 4px 16px rgba(71, 85, 105, 0.10);
    --shadow-input:    0 1px 3px rgba(71, 85, 105, 0.08), inset 0 1px 2px rgba(71, 85, 105, 0.04);
    --shadow-input-hover: 0 2px 8px rgba(71, 85, 105, 0.12), 0 0 0 1px rgba(99, 102, 241, 0.25);
    --shadow-dropdown: 0 8px 32px rgba(71, 85, 105, 0.12), 0 0 0 1px rgba(71, 85, 105, 0.06);
    --shadow-card:     0 1px 4px rgba(71, 85, 105, 0.06), 0 0 0 1px rgba(71, 85, 105, 0.05);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(99,102,241,0.08) 0%, var(--color-white) 50%, rgba(99,102,241,0.08) 100%);
    padding: var(--space-4);
    position: relative;
    gap: var(--space-3);
}

.login-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.10) 0%, transparent 70%);
    pointer-events: none;
}

.login-card {
    background: var(--color-white);
    border: 1px solid rgba(71, 85, 105, 0.08);
    border-radius: var(--radius-2xl);
    padding: 2.25rem 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 24px rgba(71, 85, 105, 0.08), 0 1px 4px rgba(71, 85, 105, 0.05);
    animation: slideUp var(--transition-slow);
    position: relative;
    z-index: 1;
}

.login-header {
    text-align: center;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    position: relative;
}
.login-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(99, 102, 241, 0.2) 30%, rgba(99, 102, 241, 0.2) 70%, transparent);
}

.login-title-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    background: var(--color-primary-light);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.login-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-gray-700);
    margin-bottom: var(--space-1);
    letter-spacing: -0.03em;
    line-height: 1.25;
}

.login-title-accent {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.password-field-wrapper {
    position: relative;
    margin-top: var(--space-1);
}
.password-field-wrapper .form-control {
    padding-right: 44px;
}
.password-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.password-toggle-btn:hover {
    color: var(--text-secondary);
}

.login-btn {
    background: var(--color-primary) !important;
    background-image: none !important;
    border-color: var(--color-primary) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-semibold) !important;
    padding: 0.6rem var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    margin-top: var(--space-3);
    letter-spacing: 0.01em;
    transition: background var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.login-btn:hover {
    background: var(--color-primary-hover) !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
}

/* Signup two-column layout */
.signup-card {
    max-width: 680px !important;
}
.signup-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-6);
}
@media (max-width: 680px) {
    .signup-layout {
        grid-template-columns: 1fr;
    }
    .signup-card {
        max-width: 420px !important;
    }
}
.signup-form-col .login-header {
    margin-bottom: var(--space-4);
    padding-bottom: 0;
}
.signup-form-col .login-header::after {
    display: none;
}
.signup-info-col {
    padding-top: var(--space-6);
    padding-left: var(--space-6);
    position: relative;
}
.signup-info-col::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5%;
    height: 90%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(79, 70, 229, 0.25) 25%, rgba(99, 102, 241, 0.2) 75%, transparent);
}
@media (max-width: 600px) {
    .signup-info-col {
        padding-left: 0;
        padding-top: var(--space-4);
    }
    .signup-info-col::before {
        left: 5%;
        top: 0;
        width: 90%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(79, 70, 229, 0.25) 25%, rgba(99, 102, 241, 0.2) 75%, transparent);
    }
}
.signup-info-title {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
    letter-spacing: -0.01em;
}
.signup-feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    line-height: var(--leading-normal);
}
.signup-feature-item strong {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.signup-feature-item p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 2px 0 0;
    line-height: 1.5;
}
.signup-feature-icon {
    flex-shrink: 0;
    margin-top: 2px;
    padding: 6px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.signup-feature-item--indigo .signup-feature-icon { color: var(--color-primary); background: var(--color-primary-light); }
.signup-feature-item--purple .signup-feature-icon { color: #7c3aed; background: rgba(124,58,237,0.1); }
.signup-feature-item--green .signup-feature-icon  { color: #059669; background: rgba(5,150,105,0.1); }
.signup-referral-banner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: linear-gradient(135deg, #10b981, #0d9488);
    color: #fff;
    border-radius: var(--radius-md, 10px);
    padding: 0.75rem 1rem;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}
.signup-referral-banner svg { flex-shrink: 0; }

.login-subtitle {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    letter-spacing: 0;
    margin-top: 2px;
}

/* ==========================================
   14. TABS COMPONENT
   ========================================== */
.tab-buttons {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: var(--space-6);
}

.tab-buttons .btn {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: 2px solid transparent;
    background: linear-gradient(to top, var(--bg-primary) 60%, transparent);
    padding-top: 2rem;
    color: var(--text-secondary);
}

.tab-buttons .btn.active {
    background: linear-gradient(to top, var(--bg-primary) 60%, transparent);
    padding-top: 2rem;
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn var(--transition-base);
}

/* ==========================================
   15. LOADING STATES
   ========================================== */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-primary);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin 0.6s linear infinite;
}

/* ==========================================
   16. SCROLLBAR STYLING
   ========================================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* ==========================================
   17. UTILITY CLASSES
   ========================================== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }

.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-success { color: var(--color-success); }

/* .text-error consolidated — see the single definition further down this
   file (a hardcoded #ef4444 was winning the cascade over this token-based
   copy, so that's the one kept; a token/value mismatch worth a deliberate
   follow-up rather than a silent color change here). */

.hidden { display: none; }
.visible { display: block; }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ==========================================
   18. RESPONSIVE DESIGN - See comprehensive section at end of file
   ========================================== */

/* ==========================================
   19. ACCESSIBILITY ENHANCEMENTS
   ========================================== */

/* Focus visible states */
*:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border-primary: var(--color-gray-400);
        --border-secondary: var(--color-gray-500);
    }
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==========================================
   20. MICRO-INTERACTIONS & ANIMATIONS
   ========================================== */

/* Hover lift effect */
.hover-lift {
    transition: transform var(--transition-fast);
}

.hover-lift:hover {
    transform: translateY(-2px);
}

/* Pulse animation */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Fade in animation */
.fade-in {
    animation: fadeIn var(--transition-base);
}

/* Slide in animation */
.slide-in-right {
    animation: slideInRight var(--transition-base);
}

/* ==========================================
   GRID & LAYOUT UTILITIES
   ========================================== */
.grid-2-responsive {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.grid-3-responsive {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.grid-3-responsive .grid-col-full {
    grid-column: 1 / -1;
}

/* Card Spacing */
.card + .card {
    margin-top: var(--space-6);
}

/* Direction & Type Icons */
.direction-icon,
.type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    vertical-align: middle;
    line-height: 1;
}

.direction-icon svg,
.type-icon svg {
    display: block;
}

.direction-outbound {
    background: var(--color-success-light);
    color: var(--color-success);
}

.type-text {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.type-missed-call {
    background: var(--color-error-light, #fee2e2) !important;
    color: var(--color-error, #ef4444) !important;
}

.type-voice-mail, .type-voice-message {
    background: var(--color-primary-subtle, #ede9fe) !important;
    color: var(--color-primary, #6366f1) !important;
}

.type-icon:not(.type-text):not(.type-missed-call):not(.type-voice-mail):not(.type-voice-message):not(.group-icon):not(.audit-toggle-btn) {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

/* Filter Container */
.filter-row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.filter-input {
    flex: 1;
    min-width: 200px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}

.filter-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-focus);
}

/* ==========================================
   LOADING INDICATORS - Site-wide
   ========================================== */
   
/* Page Loader - Full screen */
.page-loader {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 1;
    transition: opacity var(--transition-base);
}

.page-loader.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Spinner Loader */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-primary);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

.spinner-sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.spinner-lg {
    width: 60px;
    height: 60px;
    border-width: 4px;
}

/* Skeleton Loader - For content loading */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        var(--bg-secondary) 50%,
        var(--bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-pulse {
    0%, 100% { background-position: 200% 0; }
    50% { background-position: -200% 0; }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: var(--space-2);
}

.skeleton-heading {
    height: 1.5rem;
    width: 60%;
    margin-bottom: var(--space-4);
}

.skeleton-button {
    height: 2.5rem;
    width: 120px;
}

/* Section Loading (injected via JS via sectionLoading()/sectionLoaded()) —
   universal treatment for every filter/sort/page/search re-fetch: the
   previous content stays in place and in the DOM (dimmed, not hidden or
   removed) with a centered spinner on top, and the section's min-height is
   pinned to the tallest height it has already rendered at (see
   sectionLoading() in header.php) so nothing below it on the page jumps —
   whether during the load itself or because a filtered/last page came back
   with fewer rows than a full page. */
.section-loading-dim > *:not(.section-loading-overlay) {
    opacity: 0.5;
    transition: opacity 0.15s ease;
}
.section-loading-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-overlay);
}

/* Inline Loading Indicator */
.loading-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.loading-inline .spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

/* Progress Bar */
.progress-bar {
    width: 100%;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
}

.progress-bar-indeterminate {
    position: absolute;
    width: 30%;
    height: 100%;
    background: var(--color-primary);
    animation: progress-slide 1.5s ease-in-out infinite;
}

@keyframes progress-slide {
    0% { left: -30%; }
    100% { left: 100%; }
}

/* ==========================================
   ENHANCED INTERACTIVE ELEMENTS
   ========================================== */

/* Enhanced Navigation */
.nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.nav-item:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
    transform: translateY(-1px);
}

.nav-item.active {
    color: var(--color-primary);
    background: var(--color-primary-subtle);
}

.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--space-4);
    right: var(--space-4);
    height: 2px;
    background: var(--color-primary);
}

/* .badge/.badge:hover consolidated — see "8. BADGE COMPONENTS". */

/* Table Actions Container */
.table-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* Enhanced Divs and Containers */
.interactive-div {
    padding: var(--space-4);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.interactive-div:hover {
    border-color: var(--border-secondary);
    background: var(--bg-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Enhanced Spans with Interaction */
.interactive-span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.interactive-span:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Interactive Badges - Enhanced Hover States */
.interactive-badge {
    cursor: pointer;
    transition: all var(--transition-fast);
}

.interactive-badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    filter: brightness(1.1);
}

/* Interactive Icons - Enhanced Hover States */
.interactive-icon {
    cursor: pointer;
    transition: all var(--transition-fast);
}

.interactive-icon:hover {
    transform: scale(1.15);
}

.group-icon {
    background: var(--color-warning-light);
    color: var(--color-warning);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.group-icon:hover {
    background: var(--color-warning);
    color: white;
}

.recording-play-btn {
    cursor: pointer;
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    transition: all var(--transition-fast);
}
.recording-play-btn:hover {
    background: var(--color-primary-light);
}

/* .badge-dark previously only had a [href] variant styled — a plain
   <span class="badge badge-dark"> (used e.g. by phone-logs.php for
   non-clickable name/label badges) rendered with no color at all. Base
   rule added so both render the same way; the [href] variant only adds
   the link-specific hover/transition on top. */
.badge-dark {
    color: var(--color-primary);
    background: var(--color-primary-subtle);
}
.badge-dark[href] {
    text-decoration: none;
    transition: all var(--transition-fast);
}
.badge-dark[href]:hover {
    background: var(--color-primary-light);
}

/* Interactive Buttons - Enhanced Hover States */
.interactive-btn {
    transition: all var(--transition-fast);
    cursor: pointer;
}

.interactive-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.interactive-btn:active {
    transform: translateY(0);
}

/* Interactive Actions Container */
.interactive-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* Code Badge - Inline Code Styling */
.code-badge {
    font-size: var(--text-xs);
    background: var(--bg-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-family: monospace;
    transition: all var(--transition-fast);
}

.code-badge:hover {
    background: var(--border-secondary);
}

/* Message/Summary Preview - Click to Expand */
.message-preview,
.summary-preview {
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.message-preview:hover,
.summary-preview:hover {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.expand-hint {
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    margin-left: 0.25rem;
}

.expand-hint:hover {
    text-decoration: underline;
}

/* Filter Panel Styles */
.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 5px;
    font-size: var(--text-2xs);
    font-weight: var(--font-bold);
    line-height: 20px;
    color: white;
    background: var(--color-primary);
    border-radius: 10px;
    box-sizing: border-box;
}

/* Filter Panel - Slide-in Overlay */
.filter-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    height: 100dvh;
    z-index: 1002;
    transform: translateX(110%);
    transition: transform 0.3s ease, visibility 0.3s ease;
    background: var(--bg-primary);
    box-shadow: var(--shadow-panel);
    display: flex;
    flex-direction: column;
    visibility: hidden;
}

.filter-panel.open {
    transform: translateX(0);
    visibility: visible;
}

.filter-panel .card {
    box-shadow: none;
    border: none;
    border-radius: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.filter-panel .card-header {
    flex-shrink: 0;
    background: var(--bg-primary);
    z-index: 1;
    border-bottom: 1px solid var(--border-primary);
}

.filter-panel .card-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2rem;
}

/* Filter Panel Overlay Background */
.filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-medium);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.filter-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Filter panel: sidebar-width + sidebar theme on mobile */
@media (max-width: 768px) {
    .filter-panel {
        width: var(--sidebar-width);
        background: var(--sidebar-bg);
        border-left: 1px solid var(--sidebar-border);
    }
    .filter-panel .card {
        background: var(--sidebar-bg);
        border: none;
        box-shadow: none;
    }
    .filter-panel .card-header {
        background: var(--sidebar-bottom-bg);
        border-bottom: 1px solid var(--sidebar-border);
        color: var(--sidebar-active-text);
    }
    .filter-panel .card-header .btn,
    .filter-panel .card-header button {
        background: rgba(255,255,255,0.08);
        border-color: var(--sidebar-border);
        color: var(--sidebar-text-hover);
    }
    .filter-panel .card-body {
        background: var(--sidebar-bg);
    }
    .filter-panel .filter-group label {
        color: var(--sidebar-text);
    }
    .filter-panel .form-control,
    .filter-panel .form-select,
    .filter-panel select {
        background: rgba(255,255,255,0.07);
        border-color: rgba(255,255,255,0.15);
        color: var(--sidebar-active-text);
    }
    .filter-panel .btn-secondary {
        background: rgba(255,255,255,0.08);
        border-color: var(--sidebar-border);
        color: var(--sidebar-text-hover);
    }
    .filter-panel .btn-primary {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--text-inverse);
    }
    .filter-panel input[type="checkbox"] {
        accent-color: var(--color-primary-light, var(--color-primary));
    }
    .filter-panel .multi-select-container {
        background: rgba(255,255,255,0.07);
        border-color: rgba(255,255,255,0.15);
        color: var(--sidebar-active-text);
    }
    .filter-panel .multi-select-dropdown {
        background: var(--sidebar-bg);
        border-color: rgba(255,255,255,0.15);
        box-shadow: 0 4px 16px rgba(71, 85, 105, 0.4);
    }
    .filter-panel .multi-select-option {
        background: var(--sidebar-bg);
        color: var(--sidebar-active-text);
    }
    .filter-panel .multi-select-option:hover,
    .filter-panel .multi-select-container .multi-select-option:hover {
        background: rgba(255,255,255,0.10);
    }
    .filter-panel .multi-select-display {
        color: var(--sidebar-active-text);
    }
    /* Collapsible "More Filters" header in dark filter panel */
    .filter-panel .collapsible-header {
        background: rgba(255,255,255,0.05);
        border-color: rgba(255,255,255,0.10);
        border-radius: var(--radius-md);
    }
    .filter-panel .collapsible-header:hover {
        background: rgba(255,255,255,0.09);
    }
    .filter-panel .collapsible-title {
        color: var(--sidebar-active-text);
    }
    .filter-panel .collapsible-chevron {
        color: var(--sidebar-text);
    }
    .filter-panel .collapsible-header.active {
        border-bottom-color: rgba(255,255,255,0.10);
    }
    /* More Filters section separator */
    .filter-panel [style*="border-top"] {
        border-top-color: rgba(255,255,255,0.10) !important;
    }
}

.filter-group label {
    font-weight: var(--font-medium);
    display: block;
    margin-bottom: 0.25rem;
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.logs-layout {
    display: flex;
    gap: 1rem;
}

.logs-main {
    flex: 1;
    min-width: 0;
}

/* Pagination styles */
.pagination-controls a,
.pagination-controls span.btn {
    min-width: 32px;
    text-align: center;
}

/* Multi-select dropdown styles - matches form-control/form-select design system */
.multi-select-container {
    position: relative;
    width: 100%;
}

.multi-select-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    padding-right: calc(var(--space-3) + 20px);
    font-size: var(--text-xs);
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    min-height: 38px;
    transition: all var(--transition-fast);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.multi-select-display:hover {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-input-hover);
    transform: translateY(-1px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
}

.multi-select-container.open .multi-select-display {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-focus), 0 4px 8px 0 rgba(99, 102, 241, 0.08);
    transform: translateY(-1px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236366f1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
}

.multi-select-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-family: var(--font-sans);
}

.multi-select-arrow {
    display: none;
}

.multi-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 2px;
}

.multi-select-container.open .multi-select-dropdown {
    display: block;
}

.multi-select-option {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: var(--text-xs);
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-primary);
    transition: background-color var(--transition-fast);
}

label.multi-select-option {
    font-size: var(--text-xs);
    display: flex;
    align-items: center;
}

.multi-select-option:hover {
    background-color: var(--bg-secondary);
}

.multi-select-option input[type="checkbox"] {
    margin-right: var(--space-2);
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

/* ==========================================
   COMPREHENSIVE RESPONSIVE DESIGN
   All Device Sizes: Desktop to Mobile
   ========================================== */

/* ==========================================
   HUGE DESKTOPS - 1440px+
   ========================================== */
@media (min-width: 1441px) {
    .container {
        max-width: 1400px;
    }
    
    .status-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .status-number {
        font-size: var(--text-4xl);
    }
    
    .card-body {
        padding: var(--space-8);
    }
    
    .main-content {
        padding: var(--space-8) var(--space-8) var(--space-12);
    }
}

/* ==========================================
   LARGE DESKTOPS - 1200px to 1440px
   ========================================== */
@media (min-width: 1200px) and (max-width: 1440px) {
    .container {
        max-width: 1200px;
    }
    
    .status-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ==========================================
   STANDARD DESKTOPS - 992px to 1199px
   ========================================== */
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
    
    .status-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   TABLETS - 768px to 991px
   ========================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        max-width: 720px;
        padding: 0 var(--space-4);
    }
    
    .header-content {
        height: auto;
        padding: var(--space-3) 0;
        flex-wrap: wrap;
    }
    
    .nav-menu {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        border-top: 1px solid var(--border-primary);
    }
    
    .nav-menu a {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }
    
    .status-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-input {
        min-width: 100%;
    }
    
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pagination-info {
        width: 100%;
        text-align: center;
        margin-bottom: var(--space-2);
    }
    
    .grid-2-responsive {
        grid-template-columns: 1fr;
    }
    
    .grid-3-responsive {
        grid-template-columns: 1fr;
    }
    
    .grid-cols-2,
    .grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    .logs-layout {
        flex-direction: column;
    }
    
    .modal-content {
        margin: var(--space-4);
        max-width: 100%;
    }
    
    .card-header,
    .card-body,
    .card-footer {
        padding: var(--space-4);
    }
}

/* ==========================================
   LARGE PHONES / SMALL TABLETS - 576px to 767px
   ========================================== */
@media (min-width: 576px) and (max-width: 767px) {
    :root {
        --text-3xl: 1.5rem;
        --text-2xl: 1.25rem;
        --text-xl: 1.125rem;
    }
    
    .container {
        max-width: 540px;
        padding: 0 var(--space-4);
    }
    
    .header {
        position: relative;
    }
    
    .header-content {
        flex-direction: column;
        height: auto;
        padding: var(--space-4) 0;
        gap: var(--space-3);
    }
    
    .logo {
        font-size: var(--text-base);
    }
    
    .nav-menu {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--space-1);
    }
    
    .nav-menu a {
        padding: var(--space-2);
        font-size: var(--text-xs);
    }
    
    .user-info {
        font-size: var(--text-xs);
        padding: var(--space-2) var(--space-3);
    }
    
    .status-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
    
    .status-card {
        padding: var(--space-4);
    }
    
    .status-number {
        font-size: var(--text-2xl);
    }
    
    .card-header,
    .card-body,
    .card-footer {
        padding: var(--space-4);
    }
    
    .main-content {
        padding: var(--space-5) 0;
    }
    
    .form-row,
    .grid-cols-2,
    .grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    .filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    
    .table {
        font-size: var(--text-xs);
    }
    
    .table th,
    .table td {
        padding: var(--space-2) var(--space-3);
    }
    
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(-1 * var(--space-4));
        padding: 0 var(--space-4);
    }
    
    .modal-content {
        margin: var(--space-4);
        max-width: calc(100% - var(--space-8));
        max-height: calc(100vh - var(--space-8));
    }
    
    .login-card {
        padding: var(--space-6);
        max-width: 100%;
    }
    
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
    }
    
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2);
    }
    
    .pagination-info {
        width: 100%;
        text-align: center;
        order: -1;
        margin-bottom: var(--space-2);
    }
    
    .filter-panel {
        width: var(--sidebar-width);
    }
    
    .filter-panel.open {
        transform: translateX(0);
    }
}

/* ==========================================
   MOBILE PHONES - 480px to 575px
   ========================================== */
@media (min-width: 480px) and (max-width: 575px) {
    :root {
        --text-3xl: 1.375rem;
        --text-2xl: 1.125rem;
        --text-xl: 1rem;
        --text-lg: 0.9375rem;
    }
    
    .container {
        padding: 0 var(--space-3);
    }
    
    .status-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }
    
    .status-card {
        padding: var(--space-3);
    }
    
    .status-number {
        font-size: var(--text-xl);
    }
    
    .status-label {
        font-size: var(--text-2xs);
    }
    
    .card {
        border-radius: var(--radius-md);
    }
    
    .card-header,
    .card-body,
    .card-footer {
        padding: var(--space-3);
    }
    
    .card-title {
        font-size: var(--text-base);
    }
    
    .main-content {
        padding: var(--space-4) 0;
    }
    
    .form-group {
        margin-bottom: var(--space-3);
    }
    
    .form-control,
    .form-select,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="datetime-local"],
    select,
    textarea {
        padding: 6px 10px !important;
        font-size: var(--text-sm) !important;
        height: auto;
    }

    .form-label,
    label {
        font-size: var(--text-xs);
        margin-bottom: 4px;
    }
    
    .btn {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-xs);
        width: 100%;
    }
    
    .btn-sm {
        padding: var(--space-2);
    }
    
    .btn-xs {
        width: auto;
    }
    
    .modal-footer .btn {
        width: auto;
        flex: 1;
    }
    
    .table {
        font-size: var(--text-2xs);
    }
    
    .table th,
    .table td {
        padding: var(--space-2);
    }
    
    .badge {
        font-size: var(--text-2xs);
        padding: 2px var(--space-2);
    }
    
    .log-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    
    .log-entry {
        padding: var(--space-3);
    }
    
    .modal-content {
        margin: var(--space-2);
        max-width: calc(100% - var(--space-4));
        border-radius: var(--radius-md);
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--space-3);
    }
    
    .login-container {
        padding: var(--space-3);
    }
    
    .login-card {
        padding: var(--space-5);
    }
    
    .login-title {
        font-size: var(--text-2xl);
    }
    
    .filter-panel {
        width: var(--sidebar-width);
    }
    
    .filter-panel.open {
        transform: translateX(0);
    }
    
    .pagination {
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
    }
    
    .pagination button {
        padding: var(--space-2);
        min-width: 36px;
    }
    
    .tab-buttons {
        flex-wrap: wrap;
    }
    
    .tab-buttons .btn {
        flex: 1;
        min-width: 80px;
        text-align: center;
    }
    
    .alert {
        padding: var(--space-3);
        font-size: var(--text-xs);
    }
}

/* ==========================================
   SMALL MOBILE PHONES - 360px to 479px
   ========================================== */
@media (min-width: 360px) and (max-width: 479px) {
    :root {
        --text-3xl: 1.25rem;
        --text-2xl: 1.0625rem;
        --text-xl: 0.9375rem;
        --text-lg: 0.875rem;
        --text-base: 0.875rem;
        --text-sm: 0.8125rem;
        --text-xs: 0.6875rem;
    }
    
    .container {
        padding: 0 var(--space-2);
    }
    
    .header {
        padding: 0 var(--space-2);
    }
    
    .header-content {
        padding: var(--space-2) 0;
        gap: var(--space-2);
    }
    
    .logo {
        font-size: var(--text-sm);
    }
    
    .nav-menu {
        gap: 0;
        width: 100%;
        justify-content: space-around;
    }
    
    .nav-menu a {
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-2xs);
    }
    
    .user-info {
        font-size: var(--text-2xs);
        padding: var(--space-1) var(--space-2);
    }
    
    .user-name {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .status-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }
    
    .status-card {
        padding: var(--space-2);
    }
    
    .status-number {
        font-size: var(--text-lg);
    }
    
    .status-label {
        font-size: var(--text-2xs);
        letter-spacing: 0;
    }
    
    .card-header,
    .card-body,
    .card-footer {
        padding: var(--space-2);
    }
    
    .card-title {
        font-size: var(--text-sm);
    }
    
    .main-content {
        padding: var(--space-3) 0;
    }
    
    h1 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
    h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
    h3 { font-size: var(--text-base); margin-bottom: var(--space-2); }
    
    .form-control,
    .form-select {
        padding: var(--space-2);
        font-size: var(--text-xs);
    }
    
    .form-label {
        font-size: var(--text-xs);
    }
    
    .btn {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-2xs);
    }
    
    .table-responsive {
        overflow-x: auto;
        margin: 0 calc(-1 * var(--space-2));
        padding: 0 var(--space-2);
    }
    
    .table {
        font-size: var(--text-2xs);
        min-width: 500px;
    }
    
    .table th,
    .table td {
        padding: var(--space-1) var(--space-2);
    }
    
    .badge {
        font-size: var(--text-2xs);
        padding: 1px 4px;
    }
    
    .log-entry {
        padding: var(--space-2);
    }
    
    .log-timestamp {
        font-size: var(--text-2xs);
    }
    
    .log-content {
        font-size: var(--text-2xs);
    }
    
    .modal-content,
    .modal-dialog {
        margin: auto;
        max-width: calc(100% - var(--space-6));
        flex-shrink: 0;
    }

    .modal,
    .modal-overlay {
        align-items: center;
        padding: var(--space-4);
        overflow-y: auto;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--space-3) var(--space-4);
    }
    
    .modal-title {
        font-size: var(--text-base);
    }

    .modal-content .form-group,
    .modal-dialog .form-group {
        margin-bottom: var(--space-3);
    }

    .modal-content .form-label,
    .modal-dialog .form-label {
        font-size: var(--text-sm);
        margin-bottom: var(--space-1);
    }

    .modal-content .form-control,
    .modal-content .form-select,
    .modal-content select,
    .modal-content textarea,
    .modal-content input,
    .modal-dialog .form-control,
    .modal-dialog .form-select,
    .modal-dialog select,
    .modal-dialog textarea,
    .modal-dialog input {
        font-size: var(--text-sm);
        padding: 8px 10px;
    }

    .modal-content textarea,
    .modal-dialog textarea {
        min-height: 60px;
    }

    .modal-body {
        font-size: var(--text-sm);
    }
    
    .login-card {
        padding: var(--space-4);
        margin: var(--space-2);
    }
    
    .login-title {
        font-size: var(--text-xl);
    }
    
    .login-subtitle {
        font-size: var(--text-sm);
    }
    
    .filter-panel {
        width: var(--sidebar-width);
    }
    
    .pagination {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .pagination button {
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-2xs);
        min-width: 32px;
    }
    
    .pagination-jump input {
        width: 40px;
        padding: var(--space-1);
    }
    
    .tab-buttons {
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    
    .tab-buttons .btn {
        flex-shrink: 0;
        font-size: var(--text-2xs);
        padding: var(--space-2);
    }
    
    .direction-icon,
    .type-icon {
        width: 20px;
        height: 20px;
        font-size: var(--text-2xs);
    }
    
    .interactive-actions {
        flex-wrap: wrap;
        gap: var(--space-1);
    }
    
    .code-badge {
        font-size: var(--text-2xs);
        padding: 1px 4px;
    }
}

/* ==========================================
   VERY SMALL DEVICES - Under 360px
   ========================================== */
@media (max-width: 359px) {
    :root {
        --text-3xl: 1.125rem;
        --text-2xl: 1rem;
        --text-xl: 0.875rem;
        --text-lg: 0.8125rem;
        --text-base: 0.8125rem;
        --text-sm: 0.75rem;
        --text-xs: 0.625rem;
    }
    
    .container {
        padding: 0 var(--space-1);
    }
    
    .header-content {
        padding: var(--space-2) 0;
    }
    
    .logo {
        font-size: var(--text-xs);
    }
    
    .nav-menu {
        justify-content: space-between;
        padding: 0 var(--space-1);
    }
    
    .nav-menu a {
        padding: var(--space-1);
        font-size: var(--text-2xs);
    }
    
    .nav-menu a span:not(.nav-icon) {
        display: none;
    }
    
    .user-info {
        display: none;
    }
    
    .status-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    
    .status-card {
        padding: var(--space-2);
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }
    
    .status-number {
        font-size: var(--text-lg);
        margin-bottom: 0;
    }
    
    .status-label {
        font-size: var(--text-2xs);
    }
    
    .card-header,
    .card-body,
    .card-footer {
        padding: var(--space-2);
    }
    
    .main-content {
        padding: var(--space-2) 0;
    }
    
    .btn {
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-2xs);
    }
    
    .table {
        font-size: var(--text-2xs);
        min-width: 400px;
    }
    
    .table th,
    .table td {
        padding: var(--space-1);
    }
    
    .badge {
        font-size: var(--text-2xs);
        padding: 1px 3px;
    }
    
    .log-entry {
        padding: var(--space-2);
    }
    
    .modal-content,
    .modal-dialog {
        margin: auto;
        max-width: calc(100% - var(--space-4));
        border-radius: var(--radius-lg);
        flex-shrink: 0;
    }

    .modal,
    .modal-overlay {
        align-items: center;
        padding: var(--space-3);
        overflow-y: auto;
    }
    
    .login-container {
        padding: var(--space-2);
    }
    
    .login-card {
        padding: var(--space-3);
        border-radius: var(--radius-md);
    }
    
    .filter-panel {
        width: var(--sidebar-width);
    }
    
    .direction-icon,
    .type-icon {
        width: 18px;
        height: 18px;
        font-size: var(--text-2xs);
    }
}

/* ==========================================
   TOUCH DEVICE OPTIMIZATIONS
   ========================================== */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px;
        padding: var(--space-3) var(--space-4);
    }
    
    .btn-sm {
        min-height: 36px;
    }
    
    .btn-xs {
        min-height: 32px;
    }
    
    .form-control,
    .form-select,
    .multi-select-display {
        min-height: 44px;
        font-size: 16px;
    }
    
    .multi-select-option {
        font-size: var(--text-base);
    }
    
    .nav-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .table td,
    .table th {
        min-height: 44px;
    }
    
    .pagination button {
        min-width: 44px;
        min-height: 44px;
    }
    
    
    a,
    button,
    .interactive-icon,
    .interactive-badge,
    .interactive-btn {
        -webkit-tap-highlight-color: rgba(99, 102, 241, 0.1);
    }
    
    .form-control:hover:not(:disabled),
    .form-select:hover:not(:disabled) {
        transform: none;
    }
    
    .btn:hover {
        transform: none;
    }
}

/* ==========================================
   LANDSCAPE MOBILE OPTIMIZATION
   ========================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .header {
        position: relative;
    }
    
    .header-content {
        height: 3rem;
        padding: var(--space-1) 0;
    }
    
    .logo {
        font-size: var(--text-sm);
    }
    
    .nav-menu a {
        padding: var(--space-1) var(--space-2);
    }
    
    .main-content {
        padding: var(--space-3) 0;
    }
    
    .modal-content {
        max-height: 90vh;
    }
    
    .login-container {
        min-height: auto;
        padding: var(--space-3);
    }
    
    .login-card {
        padding: var(--space-4);
    }
    
    .login-header {
        margin-bottom: var(--space-4);
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */
@media print {
    .header,
    .nav-menu,
    .user-info,
    .btn,
    .filter-panel,
    .filter-overlay,
    .pagination,
    .modal {
        display: none !important;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid var(--border-primary);
        break-inside: avoid;
    }
    
    .table {
        font-size: 10pt;
    }
    
    body {
        background: var(--bg-primary);
        color: var(--text-primary);
    }
}

/* ==========================================
   HIGH DPI / RETINA DISPLAYS
   ========================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .card,
    .status-card,
    .btn {
        border-width: 0.5px;
    }
}

/* ==========================================
   TOAST NOTIFICATIONS
   ========================================== */
#toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    background: var(--bg-elevated);
    color: var(--text-primary);
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(71, 85, 105, 0.12), 0 0 0 1px rgba(71, 85, 105, 0.04);
    border-left: 3px solid var(--color-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    max-width: 360px;
    opacity: 0;
    transform: translateX(100%) scale(0.95);
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: auto;
}

.toast.show {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.toast-error {
    border-left-color: var(--color-error);
}

.toast-success {
    border-left-color: var(--color-success);
}

.toast-warning {
    border-left-color: var(--color-warning);
}

.toast-info {
    border-left-color: var(--color-info);
}

/* ==========================================
   LIVE CALL STATUS BAR — one panel for every
   phone provider, since they all run the same
   ring-agent-then-bridge call underneath today.
   ========================================== */
.call-bar {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 280px;
    max-width: 92vw;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(71, 85, 105, 0.16), 0 0 0 1px rgba(71, 85, 105, 0.04);
    border-left: 3px solid var(--color-primary);
    z-index: var(--z-toast);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.call-bar[hidden] {
    display: none;
}
.call-bar.open { opacity: 1; transform: translateX(-50%) translateY(0); }
.call-bar.stage-ended { border-left-color: var(--color-success); }
.call-bar.stage-error { border-left-color: var(--color-danger, #dc2626); }
.call-bar-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--text-inverse);
}
.call-bar.stage-dialing .call-bar-icon { animation: call-bar-pulse 1.4s ease-in-out infinite; }
.call-bar.stage-ended .call-bar-icon { background: var(--color-success); }
.call-bar.stage-error .call-bar-icon { background: var(--color-danger, #dc2626); }
@keyframes call-bar-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}
.call-bar-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.call-bar-name { font-size: var(--text-sm); font-weight: var(--font-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch-item-sub,
.call-bar-status {
    font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.call-bar-ctrl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
}
.call-bar-ctrl-btn:hover { background: var(--bg-tertiary, var(--bg-secondary)); }
.call-bar-ctrl-btn.active { background: var(--color-warning, #d97706); color: var(--text-inverse); }
.call-bar-ctrl-hangup { background: var(--color-danger, #dc2626); color: var(--text-inverse); }
.call-bar-ctrl-hangup:hover { background: var(--color-danger, #dc2626); opacity: 0.85; }
.call-bar-dismiss {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    margin-left: var(--space-1);
}
.call-bar-dismiss:hover { background: var(--bg-secondary); color: var(--text-primary); }

.incoming-call-bar { border-left-color: var(--color-success); }
.incoming-call-bar .call-bar-icon { background: var(--color-success); animation: call-bar-pulse-incoming 1s ease-in-out infinite; }
@keyframes call-bar-pulse-incoming {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4); }
    50% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
}
.call-bar-ctrl-answer { background: var(--color-success); color: var(--text-inverse); }
.call-bar-ctrl-answer:hover { background: var(--color-success); opacity: 0.85; }

/* ==========================================
   SITE FOOTER
   ========================================== */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.35rem 0;
    text-align: center;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-primary);
    z-index: 10;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.footer-brand a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-medium);
    opacity: 0.75;
}

.footer-brand a:hover {
    opacity: 1;
    text-decoration: underline;
}

.login-footer {
    text-align: center;
    margin-top: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* On dark auth pages, fade from dark background */
body:has(.login-container) .branding-footer {
    background: linear-gradient(to top, rgba(248, 250, 252, 0.97) 60%, transparent) !important;
}
body:has(.login-container) .footer-brand {
    color: rgba(100, 116, 139, 0.75) !important;
}
body:has(.login-container) .footer-brand a {
    color: rgba(99, 102, 241, 0.85) !important;
    opacity: 1 !important;
}
body:has(.login-container) .footer-brand a:hover {
    color: rgba(99, 102, 241, 1) !important;
}

.branding-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    text-align: center;
    background: linear-gradient(to top, var(--bg-primary) 60%, transparent);
    padding-top: 2rem;
}

/* ==========================================
   INTERACTIVE ANIMATIONS & EFFECTS
   ========================================== */

/* Keyframe Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ripple {
    0% { transform: scale(0); opacity: 0.5; }
    100% { transform: scale(4); opacity: 0; }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px var(--color-primary); }
    50% { box-shadow: 0 0 20px var(--color-primary), 0 0 30px var(--color-primary-light); }
}

@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Animation Classes */
.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 0.5s ease-out forwards; }
.animate-fade-in-down { animation: fadeInDown 0.5s ease-out forwards; }
.animate-slide-left { animation: slideInLeft 0.5s ease-out forwards; }
.animate-slide-right { animation: slideInRight 0.5s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.3s ease-out forwards; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-bounce { animation: bounce 1s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-glow { animation: glow 2s ease-in-out infinite; }

/* Staggered Animation Delays */
.stagger-1 { animation-delay: 0.1s; opacity: 0; }
.stagger-2 { animation-delay: 0.2s; opacity: 0; }
.stagger-3 { animation-delay: 0.3s; opacity: 0; }
.stagger-4 { animation-delay: 0.4s; opacity: 0; }
.stagger-5 { animation-delay: 0.5s; opacity: 0; }
.stagger-6 { animation-delay: 0.6s; opacity: 0; }

/* .card hover/clickable states consolidated into the single definition in
   "5. CARD COMPONENTS" near the top of this file — do not redefine here. */

/* .btn base/hover/active/ripple consolidated into the single definition
   in "3. RESET & BASE STYLES" area near the top of this file — do not
   redefine here. .btn-success:hover keeps its shadow bump since
   .btn-success itself is defined separately, further down. */
.btn-success:hover {
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

/* Enhanced Table Row Interactions */
.data-table tbody tr {
    transition: all var(--transition-fast);
}

.data-table tbody tr:hover {
    background: var(--color-primary-subtle);
    transform: scale(1.005);
}

.data-table tbody tr.clickable {
    cursor: pointer;
}

.data-table tbody tr.clickable:active {
    background: var(--color-primary-light);
}

/* Enhanced Form Input Interactions */
.form-input, .form-select, .form-textarea {
    transition: all var(--transition-fast);
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border-primary);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    outline: none;
}

/* Enhanced Navigation Interactions */
.nav-menu a {
    position: relative;
    overflow: hidden;
}

.nav-menu a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: all var(--transition-base);
    transform: translateX(-50%);
}

.nav-menu a:hover::before,
.nav-menu a.active::before {
    width: 80%;
}

/* Enhanced Badge/Tag Interactions */
.badge, .tag, .status-badge, .stat-badge {
    transition: all var(--transition-fast);
}

.badge:hover, .tag:hover {
    transform: scale(1.05);
}

/* Enhanced KPI Card Interactions */
.kpi-card {
    transition: all var(--transition-base);
    animation: fadeInUp 0.5s ease-out forwards;
}

.kpi-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.kpi-card:nth-child(1) { animation-delay: 0.05s; }
.kpi-card:nth-child(2) { animation-delay: 0.1s; }
.kpi-card:nth-child(3) { animation-delay: 0.15s; }
.kpi-card:nth-child(4) { animation-delay: 0.2s; }
.kpi-card:nth-child(5) { animation-delay: 0.25s; }
.kpi-card:nth-child(6) { animation-delay: 0.3s; }
.kpi-card:nth-child(7) { animation-delay: 0.35s; }
.kpi-card:nth-child(8) { animation-delay: 0.4s; }
.kpi-card:nth-child(9) { animation-delay: 0.45s; }
.kpi-card:nth-child(10) { animation-delay: 0.5s; }

.plan-gated-content {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

.plan-gated-content .plan-gate-notice {
    opacity: 1;
    pointer-events: auto;
    user-select: auto;
}

.plan-gate-notice {
    pointer-events: auto;
}

.plan-gate-notice a {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    text-decoration: none;
}

.plan-gate-notice a:hover {
    text-decoration: underline;
}

.kpi-card-locked {
    opacity: 0.6;
    position: relative;
}

.kpi-card-locked:hover {
    transform: none;
    box-shadow: none;
}

.kpi-locked-overlay {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.kpi-locked-overlay .upgrade-link {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    text-decoration: none;
}

.kpi-locked-overlay .upgrade-link:hover {
    text-decoration: underline;
}

.kpi-value {
    transition: all var(--transition-base);
}

.kpi-card:hover .kpi-value {
    transform: scale(1.1);
}

.kpi-icon {
    transition: all var(--transition-base);
}

.kpi-card:hover .kpi-icon {
    transform: scale(1.2) rotate(5deg);
}

/* Enhanced Progress Bar Animations */
.progress-fill {
    transition: width 1s ease-out;
    animation: shimmer 2s infinite;
    background-size: 200% 100%;
}

.progress-fill.success {
    background: linear-gradient(90deg, var(--color-success), var(--color-success), var(--color-success));
}

.progress-fill.warning {
    background: linear-gradient(90deg, var(--color-warning), var(--color-warning), var(--color-warning));
}

.progress-fill.danger {
    background: linear-gradient(90deg, var(--color-error), rgba(244,63,94,0.40), var(--color-error));
}

/* Enhanced Modal Animations */
.modal-backdrop {
    animation: fadeIn 0.2s ease-out forwards;
}

.modal-content {
    animation: scaleIn 0.3s ease-out forwards;
}

.modal.closing .modal-backdrop {
    animation: fadeIn 0.2s ease-out reverse forwards;
}

.modal.closing .modal-content {
    animation: scaleIn 0.2s ease-out reverse forwards;
}

/* Enhanced Toast Animations */
.toast {
    animation: slideInRight 0.4s ease-out forwards;
}

.toast.hiding {
    animation: slideInRight 0.3s ease-out reverse forwards;
}

/* Enhanced Dropdown Animations */
.dropdown-menu {
    animation: fadeInDown 0.2s ease-out forwards;
    transform-origin: top;
}

/* Skeleton Loading Animation */
.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.skeleton-card {
    height: 100px;
}

/* Loading Spinner */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-primary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 40px; height: 40px; border-width: 4px; }

/* Page Transition Effects for HTMX */
.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-indicator {
    display: none;
}

[hx-indicator] {
    position: relative;
}

.htmx-swapping {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.htmx-settling {
    opacity: 1;
    animation: fadeIn 0.3s ease-out;
}

/* Interactive List Items */
.list-item {
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
}

.list-item:hover {
    background: var(--bg-tertiary);
    border-left-color: var(--color-primary);
    padding-left: calc(var(--space-4) + 3px);
}

/* Interactive Icon Buttons */
.icon-btn {
    transition: all var(--transition-fast);
    border-radius: var(--radius-full);
}

.icon-btn:hover {
    background: var(--bg-tertiary);
    transform: scale(1.1);
}

.icon-btn:active {
    transform: scale(0.95);
}

/* Status Indicator Pulse */
.status-indicator {
    position: relative;
}

.status-indicator.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    animation: pulse 2s ease-in-out infinite;
    background: inherit;
    opacity: 0.5;
    z-index: -1;
}

/* Hot Lead Fire Effect */
.hot-indicator {
    display: inline-flex;
    align-items: center;
    animation: pulse 1.5s ease-in-out infinite;
}

/* Notification Badge Bounce */
.notification-badge {
    animation: bounce 2s ease-in-out infinite;
}

/* Interactive Stats Card */
.stat-card {
    transition: all var(--transition-base);
    animation: fadeInUp 0.4s ease-out forwards;
}

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

.stat-card:nth-child(1) { animation-delay: 0s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.2s; }

.stat-value {
    transition: all var(--transition-base);
}

.stat-card:hover .stat-value {
    transform: scale(1.05);
    color: var(--color-primary);
}

/* Accordion Animations */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content.open {
    max-height: 500px;
}

.accordion-trigger svg {
    transition: transform var(--transition-fast);
}

.accordion-trigger.open svg {
    transform: rotate(180deg);
}

/* Tab Transitions */
.tab-content {
    animation: fadeIn 0.3s ease-out;
}

.tab-btn {
    position: relative;
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
}

.tab-btn.active::after {
    transform: scaleX(1);
}

/* Tooltip Animations */
.tooltip {
    animation: fadeInUp 0.2s ease-out forwards;
}

/* Hover Card Effect */
.hover-card {
    transition: all var(--transition-base);
}

.hover-card:hover {
    transform: perspective(1000px) rotateX(2deg) translateY(-5px);
    box-shadow: var(--shadow-xl);
}

/* Click Feedback */
.click-feedback {
    position: relative;
}

.click-feedback::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
    border-radius: inherit;
}

.click-feedback:active::before {
    opacity: 0.1;
}

/* Focus Ring Animation */
.focus-ring:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--color-primary);
    animation: glow 1.5s ease-in-out infinite;
}

/* .main-content consolidated — see "── Main Content ──" near the top. */

/* Success Checkmark Animation */
@keyframes checkmark {
    0% { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

.success-checkmark {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: checkmark 0.5s ease-out forwards;
}

/* Number Counter Animation Class */
.count-up {
    animation: countUp 0.6s ease-out forwards;
}

/* ==========================================
   TRIAL BANNER
   ========================================== */
.trial-banner {
    background: var(--color-warning-light);
    border-bottom: 2px solid var(--color-warning);
    color: var(--color-gray-800);
    padding: 0.625rem 0;
    font-size: var(--text-base);
    line-height: 1.4;
    text-align: center;
    position: sticky;
    top: 4rem;
    z-index: 998;
}

.trial-banner svg {
    flex-shrink: 0;
    color: var(--color-warning);
}

.trial-banner span {
    flex-shrink: 1;
}

.trial-banner-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 1rem;
    background: var(--color-primary);
    color: var(--color-white) !important;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.trial-banner-btn:hover {
    background: var(--color-primary-hover);
    text-decoration: none;
}

.trial-banner.trial-urgent {
    background: var(--color-error-light);
    border-bottom-color: var(--color-error);
}

.trial-banner.trial-urgent svg {
    color: var(--color-error);
}

.trial-banner.trial-urgent .trial-banner-btn {
    background: var(--color-error);
}

.trial-banner.trial-urgent .trial-banner-btn:hover {
    background: var(--color-error-hover);
}

/* Custom Audio Player */
.audio-player {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    padding: 6px 12px;
    width: 100%;
    box-sizing: border-box;
}

.audio-player .ap-play-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: var(--text-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
    padding: 0;
}

.audio-player .ap-play-btn:hover {
    background: var(--color-primary-hover);
}

.audio-player .ap-time {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.audio-player .ap-track {
    flex: 1;
    height: 6px;
    background: var(--color-gray-300);
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
    min-width: 60px;
}

.audio-player .ap-track:hover {
    height: 8px;
}

.audio-player .ap-progress {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    width: 0%;
    position: relative;
    transition: none;
    pointer-events: none;
}

.audio-player .ap-progress::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--color-primary);
    border-radius: 50%;
    border: 2px solid var(--color-white);
    box-shadow: var(--shadow-thumb);
    opacity: 0;
    transition: opacity 0.15s;
}

.audio-player .ap-track:hover .ap-progress::after,
.audio-player.ap-playing .ap-progress::after,
.audio-player.ap-seeking .ap-progress::after {
    opacity: 1;
}

.audio-player-inline {
    margin: 0.35rem 0;
}

.audit-panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-2);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.25s ease;
}
.audit-panel.audit-panel-open {
    opacity: 1;
    max-height: 2000px;
    overflow: visible;
}
.audit-toggle-btn.audit-active {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.log-entry .audio-player-logs {
    margin-top: 0.35rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.25s ease;
}
.log-entry .audio-player-logs.audio-player-open {
    opacity: 1;
    max-height: 200px;
    overflow: visible;
}

/* ==========================================
   RESPONSIVE: COMPONENT-SPECIFIC OVERRIDES
   These target inline-styled components in admin.php
   ========================================== */

/* .section-header-content/.section-actions consolidated — see
   "Section Header for Cards" near the top of this file. */

/* Card header flex layout - responsive */
.card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Leads page layout */
.leads-layout {
    display: flex;
    gap: 1rem;
}

/* Leads toolbar */
.leads-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.leads-toolbar-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Lead detail view grid */
.lead-view-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    align-items: center;
}

.lead-view-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.lead-view-item svg {
    opacity: 0.5;
    flex-shrink: 0;
}

.lead-page-layout {
    display: grid;
    grid-template-columns: max(440px, 25vw) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    transition: grid-template-columns 0.35s cubic-bezier(0.4, 0, 0.2, 1), gap 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.lead-page-layout.activity-maximized {
    grid-template-columns: 0px 1fr;
    gap: 0;
}

.lead-sidebar {
    position: sticky;
    top: 1rem;
    min-width: 0;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s;
}

.lead-page-layout.activity-maximized .lead-sidebar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.15s;
}

.lead-sidebar-profile {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.lead-sidebar-top {
    margin-bottom: 0;
}

.lead-sidebar-name {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    margin: 0 0 0.35rem;
    color: var(--text-primary);
    line-height: 1.3;
    word-break: break-word;
}

.lead-sidebar-badges {
    display: flex;
    gap: 0.35rem;
}

.lead-sidebar-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
}

.lead-sidebar-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.lead-sidebar-action-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.lead-ai-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
}

.lead-ai-toggle-btn:hover {
    background: var(--bg-secondary);
}

/* Custom fields on a lead: compact label-over-value cells, as many per row
   as fit (auto-fill), click-to-edit like the other contact fields. */
.lead-cf-section {
    border-top: 1px solid var(--border-primary);
    padding: var(--space-2) var(--space-4) var(--space-3);
}

.lead-cf-section-title {
    font-size: 10px;
    font-weight: var(--font-semibold);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: 5px;
}

.lead-cf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--space-2) var(--space-4);
}

.lead-cf-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.lead-cf-cell > .lead-cf-label {
    font-size: 10px;
    font-weight: var(--font-medium);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-cf-cell > .lead-cf-value {
    display: block;
    flex: none;
    font-size: var(--text-sm);
    color: var(--text-primary);
    min-height: 20px;
    overflow-wrap: anywhere;
}

/* Sidebar variant: same cells, no extra frame around them. */
.lead-cf-grid--sidebar {
    padding: var(--space-2) var(--space-4) var(--space-3);
}

.lead-sidebar-body {
    padding: 0;
}

.lead-main .card {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    min-height: 400px;
}

.lead-view-toggle {
    background: transparent;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.15s ease;
}
.lead-view-toggle.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-inverse);
}
.lead-view-toggle:hover:not(.active) {
    background: var(--bg-secondary);
}

.timeline-container {
    padding: var(--space-4);
}

.tl-date-sep {
    text-align: center;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    padding: var(--space-2) 0;
    margin-bottom: var(--space-2);
    position: relative;
}
.tl-date-sep::before,
.tl-date-sep::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 1px;
    width: calc(50% - 60px);
    background: var(--border-primary);
}
.tl-date-sep::before { left: 0; }
.tl-date-sep::after { right: 0; }

.tl-entry {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    position: relative;
    margin-left: var(--space-2);
}
.tl-entry::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 36px;
    bottom: -8px;
    width: 2px;
    background: var(--border-primary);
}
.tl-entry:last-child::before {
    display: none;
}

.tl-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}
.tl-call .tl-icon { background: rgba(16, 185, 129, 0.12); color: var(--color-success); }
.tl-sms .tl-icon { background: rgba(99, 102, 241, 0.12); color: var(--color-primary); }
.tl-note .tl-icon { background: rgba(245, 158, 11, 0.12); color: var(--color-warning); }
.tl-score_change .tl-icon { background: rgba(244, 63, 94, 0.12); color: var(--color-error); }
.tl-appointment .tl-icon { background: rgba(99, 102, 241, 0.12); color: var(--color-primary-hover); }
.tl-ai_action .tl-icon { background: rgba(16, 185, 129, 0.12); color: var(--color-success); }
.tl-sequence .tl-icon { background: rgba(99,102,241, 0.12); color: var(--color-primary-hover); }

.tl-content {
    flex: 1;
    min-width: 0;
    background: var(--bg-elevated, var(--bg-primary));
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
}

.tl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    flex-wrap: wrap;
}

.tl-type-label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.tl-time {
    font-size: var(--text-xs);
    color: var(--text-dim);
    white-space: nowrap;
}

.tl-dir-out {
    background: var(--color-primary-light, rgba(99,102,241,0.06));
    color: var(--color-primary, var(--color-primary));
}
.tl-dir-badge,
.tl-status-pill {
    font-size: var(--text-2xs);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    font-weight: var(--font-medium);
}
.tl-dir-in,
.tl-status-ok {
    background: var(--color-success-light, rgba(16,185,129,0.06));
    color: var(--color-success, var(--color-success));
}
.tl-status-error {
    background: var(--color-error-light, rgba(244,63,94,0.06));
    color: var(--color-error-dark, var(--color-error));
}

.tl-meta {
    font-size: var(--text-xs);
    color: var(--text-dim);
    font-weight: normal;
}

.tl-body {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
.full-text,
.tl-text {
    white-space: pre-wrap;
    word-break: break-word;
}
.tl-text-dim {
    color: var(--text-dim);
    font-style: italic;
}

@media (max-width: 768px) {
    .tl-entry { margin-left: 0; }
    .tl-entry::before { display: none; }
}

.lead-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.lead-detail-row {
    display: flex;
    align-items: baseline;
    padding: var(--space-2) var(--space-4);
    gap: 0.75rem;
    font-size: var(--text-sm);
}

.lead-detail-row:last-child {
    padding-bottom: var(--space-3);
}

.lead-detail-label {
    color: var(--text-secondary);
    min-width: 100px;
    flex-shrink: 0;
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.lead-detail-value {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    min-width: 0;
    word-break: break-word;
    flex: 1;
}

.lead-tags-inline {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.lead-tag-pill {
    background: var(--color-primary-light, rgba(99,102,241,0.12));
    color: var(--color-primary, var(--color-primary));
    font-size: var(--text-xs);
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    font-weight: var(--font-medium);
}

.lead-tag-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-primary);
    font-size: var(--text-sm);
    padding: 0.1rem 0.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    opacity: 0.7;
}

.lead-tag-edit-btn:hover {
    opacity: 1;
}

/* Click-to-edit lead detail fields (name, email, company, address, deal
   value) — a dashed underline signals "click to edit" without looking like
   a normal link, and disappears while the field is swapped for its input(s)
   so the editing state reads cleanly. */
.lead-inline-editable {
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s, background 0.15s;
    border-radius: 4px;
    padding: 1px 3px;
    margin: -1px -3px;
}

.lead-inline-editable:hover {
    border-bottom-color: var(--border-color, #cbd5e1);
    background: var(--bg-secondary);
}

.lead-inline-editable.inline-editing {
    cursor: default;
    border-bottom-color: transparent;
    background: none;
    padding: 0;
    margin: 0;
    display: block;
    width: 100%;
}

.inline-edit-input {
    padding: 0.3rem 0.5rem !important;
    font-size: var(--text-sm) !important;
    height: auto !important;
}

.inline-edit-input-name {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    padding: 2px 4px !important;
}

h2.lead-inline-editable.inline-editing {
    border-bottom: none;
}

.lead-tag-editor {
    display: none;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-primary);
}

.lead-tag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.4rem;
}

.lead-tag-input-row {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    position: relative;
}

.lead-tag-input-row .form-control {
    flex: 1;
    font-size: var(--text-sm);
    padding: 0.25rem 0.5rem;
}

.lead-tag-input-row .btn {
    padding: 0.25rem 0.5rem;
    font-size: var(--text-xs);
}

.lead-tag-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 80px;
    background: var(--bg-primary, var(--color-white));
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    max-height: 120px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

/* Lead edit sidebar form */
.lead-edit-sidebar {
    padding: 0;
}

.lead-edit-field {
    padding: var(--space-3) var(--space-4);
}

.lead-edit-field label {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    margin-bottom: 0.25rem;
}

.lead-edit-field .form-control {
    font-size: var(--text-sm);
    padding: 0.35rem 0.5rem;
}

.lead-edit-field .btn-add-field {
    margin-top: 0.35rem;
    font-size: var(--text-xs);
    padding: 0.2rem 0.5rem;
}

.lead-edit-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.lead-edit-row-2 .lead-edit-field {
    border-bottom: none;
}

/* Lead sidebar sections */
.lead-sidebar-section {
    border-top: 1px solid var(--border-primary);
}

.lead-sidebar-section-header {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.lead-notes-empty {
    padding: var(--space-3) var(--space-4);
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    font-style: italic;
    text-align: center;
}

.lead-note-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px dashed var(--border-secondary);
}
.lead-note-avatar { margin-top: 2px; }
.col-team-member-avatar { width: 20px; height: 20px; font-size: 9px; flex-shrink: 0; }

.lead-note-item:last-child {
    border-bottom: none;
}

.lead-appt-item {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-primary);
}

.lead-appt-item:last-child {
    border-bottom: none;
}

.lead-note-content {
    flex: 1;
    min-width: 0;
}

.lead-note-content .note-content {
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.4;
}

.lead-note-meta {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    margin-top: 0.1rem;
}

/* Visibility is driven from JS (see the hover/tap-reveal IIFE in
   contacts.php) — this is just layout and the transition. */
.lead-note-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
    align-self: flex-start;
    margin-top: 0.15rem;
}

.lead-note-compose {
    display: flex;
    gap: 0.35rem;
    padding: 0.35rem 0 0.5rem;
    align-items: center;
}

.lead-note-compose .form-control {
    flex: 1;
    font-size: var(--text-sm);
    padding: 0.3rem 0.5rem;
}

.lead-note-compose .btn {
    font-size: var(--text-xs);
    padding: 0.3rem 0.6rem;
}

/* Lead edit form grid (legacy) */
.lead-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    font-size: var(--text-base);
}

/* Lead edit phone/email 2-column grid */
.lead-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.75rem;
    font-size: var(--text-base);
}

/* Phone assignment row */
.phone-assign-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

/* Roster row */
.roster-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

/* .bulk-assign-bar consolidated — see the canonical definition further
   down this file (was defined twice with conflicting padding/radius). */

/* Team summary panel */
.team-summary-panel {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-primary);
}

/* Subscription plan cards grid */
/* Plan card styles: see .plan-cards-grid / .plan-card definitions later in file */

/* Subscription action links */
.sub-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    font-size: var(--text-sm);
}

/* Button row for forms */
.btn-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Chat container */
.chat-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    padding: 1rem;
}

/* SMS compose area */
.sms-compose {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    align-items: flex-end;
}

/* Direct card form layout */
.card-form-row {
    display: flex;
    gap: 0.5rem;
}

/* Duplicate results row */
.dup-result-row {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-primary);
}

.dup-result-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.dup-result-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* Provider select in card header */
.provider-select {
    width: auto;
    max-width: 200px;
    font-size: var(--text-sm);
}

/* Inline-row pattern: flex row with gap for roster/webhook/similar rows */
.inline-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

.inline-row .form-control {
    flex: 1;
    min-width: 0;
}

/* Team summary panel — one table row per member (name, count, numbers all in
   line), matching the site's normal table pattern instead of stacked blocks. */
.team-summary-table td {
    vertical-align: middle;
}

.team-summary-member {
    white-space: nowrap;
}

.team-summary-phones {
    line-height: 1.8;
}

.team-summary-phones code {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-right: 0.5rem;
}

.team-summary-count {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-left: 0.25rem;
}

/* Bulk assign bar */
.bulk-assign-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary);
    flex-wrap: wrap;
}

.bulk-assign-bar label {
    font-size: var(--text-sm);
    white-space: nowrap;
    color: var(--text-secondary);
}

.bulk-assign-bar .form-control {
    flex: 1;
    font-size: var(--text-sm);
}

/* Section divider for within cards */
.card-divider {
    margin: var(--space-5) 0;
    border: none;
    border-top: 1px solid var(--border-primary);
}

/* Lead view grid field labels */
.lead-edit-grid .field-label {
    color: var(--text-tertiary);
}

/* Lead edit compact inputs */
.lead-edit-grid .form-control,
.lead-contact-grid .form-control {
    padding: 0.4rem 0.6rem;
}

.lead-edit-grid label,
.lead-contact-grid > div > label {
    color: var(--text-tertiary);
    display: block;
    margin-bottom: var(--space-1);
}

/* Multi-field row for phone/email edit */
.multi-field-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.multi-field-row .form-control {
    flex: 1;
}

.multi-field-row .btn {
    padding: 0.2rem 0.4rem;
    line-height: 1;
}

/* Primary field row */
.primary-field-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.primary-field-row .form-control {
    flex: 1;
}

.primary-field-row .field-label-sm {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* Duplicate panel */
.dup-panel {
    display: none;
    margin-top: 0.5rem;
    padding: 0.75rem;
    font-size: var(--text-sm);
    flex-direction: column;
    align-items: stretch;
}

.dup-panel-title {
    font-weight: var(--font-semibold);
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

/* Add field button */
.btn-add-field {
    margin-top: 0.25rem;
    font-size: var(--text-xs);
}

/* .section-header-content/.section-actions consolidated — see
   "Section Header for Cards" near the top of this file. */

/* Badge small */
.badge-sm {
    font-size: var(--text-xs);
    padding: 0.2rem 0.4rem;
}

/* Table cell utilities */
.cell-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-name {
    font-weight: var(--font-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.cell-phone,
.cell-email {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.cell-email {
    max-width: 140px;
}

.cell-company {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leads-main {
    flex: 1;
    min-width: 0;
}

/* Spacing utilities */
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 0.75rem; }
.mt-lg { margin-top: 1rem; }
.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 0.75rem; }
.mb-lg { margin-bottom: 1rem; }
.my-md { margin-top: 0.75rem; margin-bottom: 0.75rem; }

/* Referral stats */
.referral-link-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.referral-link-row input { flex: 1; min-width: 200px; }

.referral-stats-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.referral-stat-card {
    flex: 1;
    min-width: 80px;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: 6px;
    text-align: center;
}
.referral-stat-card .stat-value {
    font-size: var(--text-xl);
    font-weight: bold;
}
.referral-stat-card .stat-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-left: 0.25rem;
}

/* Danger zone */
.danger-zone { border: 1px solid var(--color-error); }
.danger-zone-header { background: var(--color-error-subtle); color: var(--color-error); font-weight: var(--font-semibold); }

/* Scheduled change notice */
.scheduled-notice {
    padding: var(--space-2) var(--space-3);
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-warning-dark);
    margin-bottom: var(--space-3);
}

/* ==========================================
   RESPONSIVE BREAKPOINTS: COMPONENT OVERRIDES
   ========================================== */

/* Tablets and below */
@media (max-width: 991px) {
    .leads-layout {
        flex-direction: column;
    }
    
    .lead-contact-grid {
        grid-template-columns: 1fr;
    }
    
    .grid-2-responsive {
        grid-template-columns: 1fr;
    }
    
    .grid-3-responsive {
        grid-template-columns: 1fr;
    }
    
    .plan-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    
    .card-header-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .card-header-flex.card-header-stack {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .card-header-flex .provider-select {
        width: 100%;
        max-width: 100%;
    }
    
    .section-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .section-actions {
        width: 100%;
    }
}

/* Large phones */
@media (max-width: 767px) {
    .leads-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .leads-toolbar-actions {
        flex-wrap: wrap;
    }
    
    .leads-toolbar-actions input[type="text"],
    .leads-toolbar-actions .logs-search-input {
        flex: 1;
        min-width: 0;
        width: auto !important;
    }
    
    .lead-view-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .lead-page-layout {
        grid-template-columns: 280px 1fr;
    }
    
    .lead-detail-grid {
        grid-template-columns: 1fr;
    }
    
    .lead-edit-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .plan-cards-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .sub-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
    
    .sub-actions .sub-separator {
        display: none;
    }
    
    .phone-assign-row {
        flex-wrap: wrap;
    }
    
    .phone-assign-row code {
        min-width: 0;
        flex-shrink: 0;
        font-size: var(--text-sm);
        white-space: nowrap;
    }
    
    .phone-assign-row .form-control {
        flex: 1 1 100%;
    }
    
    .bulk-assign-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .bulk-assign-bar label {
        white-space: normal;
    }
    
    .sms-compose {
        flex-wrap: wrap;
        align-items: flex-end;
    }
    
    .sms-compose textarea {
        width: 100% !important;
    }
    
    .modal-dialog,
    .modal-content {
        margin: var(--space-2) auto;
        max-width: calc(100% - var(--space-4));
    }
    
    .modal-dialog.modal-sm {
        max-width: calc(100% - var(--space-4));
    }
    
    .dup-result-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .dup-result-actions {
        width: 100%;
    }
    
    .dup-result-actions .btn {
        flex: 1;
    }
    
    .lead-page-layout {
        grid-template-columns: 1fr;
    }
    
    .lead-sidebar {
        position: static;
    }
}

/* Mobile phones */
@media (max-width: 575px) {
    .lead-view-grid {
        grid-template-columns: 1fr;
    }
    
    .lead-detail-grid {
        grid-template-columns: 1fr;
    }
    
    .lead-detail-label {
        min-width: 90px;
    }
    
    .lead-edit-grid {
        grid-template-columns: 1fr;
    }
    
    .plan-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .section-actions {
        flex-direction: column;
    }
    
    .section-actions .btn {
        width: 100%;
    }
    
    .leads-toolbar-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .leads-toolbar-actions input[type="text"],
    .leads-toolbar-actions .logs-search-input,
    .leads-toolbar-actions select,
    .leads-toolbar-actions .form-select,
    .leads-toolbar-actions .form-control,
    .leads-toolbar-actions .btn {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .card-form-row {
        flex-direction: column;
    }
    
    .btn-row {
        flex-direction: column;
    }
    
    .btn-row .btn {
        width: 100%;
    }
}

/* Very small devices */
@media (max-width: 479px) {
    .lead-view-grid {
        gap: 0.5rem;
        font-size: var(--text-sm);
    }
    
    .lead-edit-grid {
        gap: 0.5rem;
    }
    
    .leads-toolbar-actions {
        gap: 0.25rem;
    }
    
    .roster-row {
        gap: 0.25rem;
    }
    
    .phone-assign-row {
        gap: 0.25rem;
        font-size: var(--text-sm);
    }
    
    .phone-assign-row code {
        font-size: var(--text-xs);
    }
    
    .phone-assign-row .form-control {
        font-size: var(--text-sm);
    }
    
    .plan-card {
        padding: 0.65rem;
    }
    
    .team-summary-panel {
        padding: 0.5rem;
    }
    
    .team-summary-panel code {
        font-size: var(--text-xs);
        display: inline-block;
        margin-bottom: 0.15rem;
    }
}

/* Responsive Leads Table - horizontal scroll on small screens */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive .data-table {
    min-width: 700px;
}

/* Responsive Pagination */
.pagination-controls {
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 767px) {
    .pagination-controls {
        padding: 0.75rem 0.5rem !important;
        gap: 0.35rem;
    }
    
    .pagination-controls > span {
        margin: 0 0.25rem !important;
        font-size: var(--text-sm);
        text-align: center;
        white-space: nowrap;
    }
    
    .pagination-controls > span .pagination-total-label {
        display: none;
    }
    
    .pagination-controls .pagination-jump {
        margin-left: 0 !important;
    }
}

/* Responsive Phone Assignments */
@media (max-width: 575px) {
    .phone-assign-row code {
        font-size: var(--text-xs);
    }
}

/* ==========================================
   INLINE VERIFY NOTICE (inside trial banner)
   ========================================== */
.trial-banner-sep {
    color: var(--color-gray-400);
    font-weight: var(--font-bold);
    margin: 0 0.125rem;
}

.trial-banner-verify {
    font-size: var(--text-sm);
    opacity: 0.8;
}

.trial-banner-btn-outline {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: var(--bg-elevated);
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.trial-banner-btn-outline:hover {
    background: var(--bg-secondary);
    border-color: var(--border-secondary);
    text-decoration: none;
}

/* Banner Dismiss Button */
.banner-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--color-gray-500);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

.banner-dismiss:hover {
    color: var(--color-gray-800);
    background: var(--overlay-light);
}

.mobile-notice-card {
    display: none;
    position: relative;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0.75rem;
    padding: 0.625rem 2rem 0.625rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-size: var(--text-sm);
}

.mobile-notice-card.notice-urgent {
    border-left-color: var(--color-error);
}

.mobile-notice-card.notice-verify {
    border-left-color: var(--color-primary);
}

.mobile-notice-dismiss {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    background: none;
    border: none;
    font-size: var(--text-xl);
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0.125rem 0.25rem;
    line-height: 1;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.mobile-notice-dismiss:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.mobile-notice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full, 50%);
    flex-shrink: 0;
}

.notice-icon-urgent {
    background: var(--color-error-light);
    color: var(--color-error);
}

.notice-icon-trial {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.notice-icon-email {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.mobile-notice-card.notice-warning {
    border-left-color: var(--color-warning);
}

.notice-icon-warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.mobile-notice-body {
    flex: 1;
    min-width: 0;
}

.mobile-notice-title {
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.3;
}

.mobile-notice-text {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    line-height: 1.3;
    margin-top: 1px;
}

.mobile-notice-action {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.625rem;
    background: var(--color-primary);
    color: var(--text-inverse);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.mobile-notice-action:hover {
    background: var(--color-primary-hover);
    color: var(--text-inverse);
}

.mobile-notice-secondary {
    position: absolute;
    bottom: 0.375rem;
    right: 2rem;
    font-size: var(--text-xs);
    color: var(--color-primary);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .desktop-banner {
        display: none !important;
    }

    .mobile-notice-card {
        display: flex;
    }
}

@media (min-width: 769px) {
    .mobile-notice-card {
        display: none !important;
    }
}

/* Collapsible Sections */
.collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid transparent;
    background: var(--bg-primary);
    transition: background 0.15s ease, border-color 0.15s ease;
    gap: var(--space-3);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.collapsible-header:not(.active) {
    border-radius: var(--radius-xl);
}

.collapsible-header.active {
    border-bottom: 1px solid var(--border-primary);
}

.collapsible-header:hover {
    background: var(--color-gray-50);
}

.collapsible-title {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.collapsible-status {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-weight: var(--font-medium);
    background: var(--bg-secondary);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.collapsible-status-connected {
    color: var(--success);
    background: rgba(16, 185, 129, 0.08);
}
.collapsible-status-connected::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
}

.collapsible-chevron {
    width: 16px;
    height: 16px;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.collapsible-header.active .collapsible-chevron {
    transform: rotate(180deg);
}

.collapsible-body {
    display: none;
    padding: var(--space-4) var(--space-6);
    overflow: hidden;
}

/* .settings-section-desc consolidated (was defined 3x across settings.php/
   account.php/contacts-import.php's section-header patterns) — see the
   canonical definition near "settings-section-status" further down. */

.automation-toggle-row {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-primary);
}
.automation-toggle-row:last-of-type {
    border-bottom: none;
}

.automation-toggle-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}

.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--color-gray-300);
    border-radius: 24px;
    transition: background 0.2s ease;
}
.toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(71, 85, 105, 0.15);
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--color-primary);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-primary);
}
.settings-toggle-row:last-child {
    border-bottom: none;
}
.settings-toggle-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.settings-toggle-info {
    flex: 1;
    min-width: 0;
}

.settings-toggle-action {
    flex-shrink: 0;
}

/* Single source of truth for the whole .page-header family (used by
   comp_page_header() — see app/templates/components/components.php). This
   used to be defined across four separate, partly-conflicting blocks in
   this file (two of them fighting the cascade with !important) — do not
   re-add a duplicate .page-header/.page-heading/.page-header-icon/etc.
   block elsewhere; extend this one instead. */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-primary);
}

.page-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, var(--color-primary-hover)));
    color: var(--text-inverse);
    flex-shrink: 0;
    margin-top: 1px;
    box-shadow: 0 2px 6px rgba(99,102,241,0.3);
}
.page-header-icon svg {
    width: 14px;
    height: 14px;
}
.page-header-icon.icon-green {
    background: linear-gradient(135deg, #10b981, #059669);
}
.page-header-icon.icon-amber {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
.page-header-icon.icon-blue {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
}
.page-header-icon.icon-purple {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.page-header-icon.icon-rose {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
}
.page-header-icon.icon-slate {
    background: linear-gradient(135deg, #64748b, #475569);
}
.page-header-icon.icon-violet {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}
.page-header-text {
    flex: 1;
    min-width: 0;
}
.page-heading {
    font-size: 1.125rem;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.3;
}
.page-subheading {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}
.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    flex-wrap: wrap;
    margin-top: 0;
}
/* Optional context row for comp_page_header() — a last-sync time, a record
   count, or filter chips. flex-basis:100% pushes it onto its own line below
   the title/actions row, since .page-header already wraps. */
.page-header-context {
    flex-basis: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: 2px;
}
.page-header-context-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.page-header-context-item svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.page-header-context-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: var(--text-2xs);
    font-weight: var(--font-medium);
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.page-header-context-chip:hover {
    background: var(--border-primary);
    text-decoration: none;
    color: var(--text-secondary);
}
.page-header-context-chip.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: var(--font-semibold);
}
@media (max-width: 600px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    .page-header-actions {
        width: 100%;
        flex-direction: column;
    }
    .page-header-actions .btn,
    .page-header-actions input[type="text"],
    .page-header-actions .logs-search-input,
    .page-header-actions .form-control,
    .page-header-actions select,
    .page-header-actions .form-select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }
    .page-header-icon {
        width: 36px;
        height: 36px;
    }
    .page-header-icon svg {
        width: 18px;
        height: 18px;
    }

    /* AI Actions toolbar: search above tabs on mobile */
    .ai-actions-toolbar {
        flex-direction: column;
        align-items: stretch !important;
    }
    .ai-toolbar-search {
        order: -1;
        width: 100%;
    }
    .ai-toolbar-search input[type="text"],
    .ai-toolbar-search .logs-search-input {
        flex: 1;
        min-width: 0;
        max-width: 100% !important;
        width: 100% !important;
    }
    .ai-actions-toolbar .stab-nav {
        order: 0;
    }
}

/* .footer-main was dead CSS (footer.php always emits class="landing-footer",
   never "footer-main") and its .footer-grid/.footer-col/.footer-bottom
   sub-selectors duplicated (with wrong values) the real .landing-footer
   block further down this file. Its .footer-brand definition here was a
   real bug: it unintentionally overrode the correct "SITE FOOTER" section's
   .footer-brand (used by branding_footer.php's small attribution bar)
   because it came later in source order. Removed entirely; canonical
   .footer-brand lives in the "SITE FOOTER" section, canonical
   .footer-grid/.footer-col/.footer-bottom live with .landing-footer. */

.ai-actions-banner {
    background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(99,102,241,0.12) 50%, rgba(99,102,241,0.06) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
}
.ai-actions-banner-text h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
}
.ai-actions-banner-text p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

.logs-expand-arrow {
    cursor: pointer;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
    user-select: none;
}
.logs-expand-arrow.open {
    transform: rotate(90deg);
}
.logs-detail-panel {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: var(--space-2) 0;
}
.logs-detail-panel h4 {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}
.logs-detail-panel ul {
    margin: 0;
    padding-left: var(--space-5);
}
.logs-detail-panel li {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}
.logs-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}
.logs-pagination-pages {
    display: flex;
    gap: var(--space-1);
}
.logs-pagination-pages a,
.logs-pagination-pages span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-decoration: none;
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
}
.logs-pagination-pages span.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Plan card styles: see .plan-cards-grid / .plan-card definitions later in file */

.usage-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
}
.usage-bar-wrapper {
    margin-bottom: var(--space-4);
}

.usage-bar-track {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.usage-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}
.usage-bar-fill.green { background: var(--success); }
.usage-bar-fill.yellow { background: var(--warning); }
.usage-bar-fill.blue { background: var(--color-primary); }

.referral-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
}
.referral-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.referral-link-box input {
    flex: 1;
    font-size: var(--text-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
}

.account-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
@media (max-width: 768px) {
    .account-two-col {
        grid-template-columns: 1fr;
    }
    .ai-actions-banner {
        flex-direction: column;
    }
    .ai-actions-autopilot {
        width: 100%;
    }
    .ai-actions-autopilot-desc {
        max-width: none;
    }
    .logs-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .logs-filter-bar .form-control,
    .logs-filter-bar .form-select {
        max-width: none;
    }
    .referral-stats {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    .settings-toggle-row {
        flex-wrap: wrap;
    }
}

.collapsible-body.open {
    display: block;
}

.collapsible-body-flush {
    padding: 0;
}

.collapsible-body-flush.open {
    padding: var(--space-2) 0;
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

.fs-2xs { font-size: var(--text-2xs); }
.fs-xs { font-size: var(--text-xs); }
.fs-sm { font-size: var(--text-sm); }
.fs-base { font-size: var(--text-base); }
.fs-lg { font-size: var(--text-lg); }
.fs-xl { font-size: var(--text-xl); }
.fs-2xl { font-size: var(--text-2xl); }
.fs-3xl { font-size: var(--text-3xl); }

.fw-normal { font-weight: var(--font-normal); }
.fw-medium { font-weight: var(--font-medium); }
.fw-semibold { font-weight: var(--font-semibold); }
.fw-bold { font-weight: var(--font-bold); }

.text-muted { color: var(--text-secondary); }
.text-faint { color: var(--text-tertiary); }
.text-dim { color: var(--text-dim); }
.text-body { color: var(--text-primary); }
.text-white { color: var(--text-inverse); }
.text-warning { color: var(--color-warning); }
.text-primary-color { color: var(--color-primary); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }

.bg-elevated { background: var(--bg-elevated); }
.bg-secondary { background: var(--bg-secondary); }
.bg-tertiary { background: var(--bg-tertiary); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }

.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }

.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

.m-0 { margin: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-3 { margin-top: var(--space-3); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-5 { margin-bottom: var(--space-5); }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

.d-none { display: none !important; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.scroll-y { overflow-y: auto; }
.max-h-320 { max-height: 320px; }
.align-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }

.text-nowrap { white-space: nowrap; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-full { width: 100%; }
.border-top { border-top: 1px solid var(--border-primary); }
.border-bottom { border-bottom: 1px solid var(--border-primary); }

.chat-bubble {
    padding: var(--space-2) var(--space-3);
    box-shadow: 0 1px 1px var(--overlay-chat);
}
.call-detail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1) 0;
    margin-top: var(--space-1);
    font-weight: var(--font-medium);
    transition: color 0.2s;
}
.call-detail-toggle:hover {
    color: var(--color-primary-hover, var(--color-primary-hover));
}
.call-detail-chevron {
    transition: transform 0.3s ease;
}
.call-detail-toggle.open .call-detail-chevron {
    transform: rotate(180deg);
}

.call-detail-inner {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--border-secondary, rgba(71, 85, 105, 0.06));
    margin-top: var(--space-1);
    line-height: 1.5;
}
/* Speaker-split transcript layout */
.synced-transcript-inner.speaker-layout {
    max-height: 360px;
    overflow-y: auto;
    padding: var(--space-2) 0 var(--space-1);
}
.speaker-turn {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    align-items: flex-start;
}
.speaker-turn:last-child { margin-bottom: 0; }
.speaker-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    margin-top: 2px;
    letter-spacing: 0.02em;
}
.speaker-turn-body {
    flex: 1;
    min-width: 0;
}
.speaker-name {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-tertiary);
    margin-bottom: 3px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.speaker-turn-text {
    font-size: var(--text-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary, rgba(71, 85, 105, 0.06));
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-2);
    line-height: 1.5;
    word-break: break-word;
    color: var(--text-primary);
}

/* AI summary inline edit / delete */
.call-summary-inner {
    position: relative;
}
.summary-text-content {
    display: block;
    white-space: pre-line;
}
.summary-edit-actions {
    display: inline-flex;
    gap: 3px;
    margin-top: var(--space-1);
    opacity: 0.45;
    transition: opacity 0.15s;
    vertical-align: middle;
}
.call-summary-inner:hover .summary-edit-actions,
.tl-call-summary:hover .summary-edit-actions,
.summary-edit-actions:hover {
    opacity: 1;
}
.summary-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.summary-action-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.summary-action-btn.summary-action-delete:hover {
    color: var(--color-error, #ef4444);
    border-color: var(--color-error-light, #fee2e2);
    background: var(--color-error-light, #fee2e2);
}
/* Per-bullet summary structure */
.summary-section-header {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    margin-top: var(--space-3);
    margin-bottom: var(--space-1);
}
.summary-section-header:first-child { margin-top: 0; }
.summary-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-1) 0;
}
.summary-bullet {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 2px 0;
    line-height: 1.5;
}
.summary-bullet-text {
    flex: 1;
    word-break: break-word;
}
.summary-bullet-actions {
    display: inline-flex;
    gap: 3px;
    flex-shrink: 0;
    margin-top: 3px;
    opacity: 0.35;
    transition: opacity 0.15s;
}
.summary-bullet:hover .summary-bullet-actions,
.summary-bullet-actions:hover {
    opacity: 1;
}
.summary-bullet-edit-row {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: 2px 0;
}
.summary-bullet-edit-input {
    width: 100%;
    font-size: var(--text-sm) !important;
}

.summary-edit-area {
    width: 100%;
    box-sizing: border-box;
    font-size: var(--text-sm);
    color: var(--text-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
    font-family: inherit;
    background: var(--bg-primary);
}
.summary-edit-area:focus { outline: none; }
.summary-edit-btns {
    display: flex;
    gap: var(--space-1);
    margin-top: var(--space-1);
    align-items: center;
}

/* Synchronized transcript word highlighting */
.tw {
    cursor: pointer;
    border-radius: 2px;
    padding: 0 1px;
    transition: background 0.1s, color 0.1s;
}
.tw:hover {
    background: var(--bg-elevated, #f3f4f6);
}
.tw-active {
    background: var(--color-warning-light, #fff8e1);
    color: var(--color-warning-dark, #7c5700);
    font-weight: 500;
    border-radius: 3px;
    padding: 0 2px;
}
.ts-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    padding: 4px 0 6px;
    font-style: italic;
}
.chat-bubble-inbound {
    background: var(--bg-elevated);
    border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-lg);
}
.chat-bubble-outbound {
    background: var(--color-success-light);
    border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-lg);
}

.call-status-badge {
    padding: 0.1rem var(--space-1);
    border-radius: var(--radius-md);
    font-size: var(--text-2xs);
}
.call-status-badge-success {
    background: var(--color-success-light);
    color: var(--color-success);
}
.call-status-badge-error {
    background: var(--color-error-light);
    color: var(--color-error-dark);
}

.attachment-card {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.attachment-link {
    display: block;
    text-align: center;
    padding: var(--space-1);
    font-size: var(--text-2xs);
    background: var(--bg-secondary);
    color: var(--color-primary);
    text-decoration: none;
    border-top: 1px solid var(--border-primary);
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: var(--text-xs);
    padding: 0.15rem var(--space-1);
    border-radius: var(--radius-full);
}
.tag-pill button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: var(--text-sm);
    padding: 0;
    line-height: 1;
}

.spinner-sm {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}
.spinner-md {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--bg-tertiary);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

.loader-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    width: 100%;
    flex: 1;
}

.summary-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    border-top: 1px solid var(--overlay-chat);
    white-space: pre-line;
}

.image-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-image);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}
.image-overlay img {
    max-width: 90%;
    max-height: 90%;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 24px var(--overlay-gradient);
    object-fit: contain;
}
.image-overlay-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-6);
    color: var(--text-inverse);
    font-size: var(--text-4xl);
    cursor: pointer;
    line-height: 1;
    text-shadow: 0 2px 4px var(--overlay-gradient);
}

.gradient-header-error {
    background: linear-gradient(135deg, var(--color-error), var(--color-error-dark));
    color: var(--text-inverse);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    text-align: center;
}

.gradient-card-bg {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.media-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, var(--overlay-dark));
    padding: var(--space-3);
    text-align: right;
}

.plan-card-active {
    background: var(--color-primary-subtle);
    border: 2px solid var(--color-primary);
}
.plan-card-scheduled {
    background: var(--color-warning-light);
    border: 2px solid var(--color-warning);
}
.plan-card-default {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
}

.status-label-active {
    text-align: center;
    padding: var(--space-1);
    background: var(--color-success-light);
    color: var(--color-success);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.card-radio-label {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-1);
    cursor: pointer;
    font-size: var(--text-sm);
}

.card-display-row {
    display: flex;
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}
/* ============================================================
   CALLY — Agentic AI companion widget
   Built on the existing token system (--color-primary, --space-*,
   --radius-*, --shadow-*, --text-*). Local tokens below are additive,
   scoped to this widget only.
   ============================================================ */

:root {
    --cally-a: #6366f1;   /* indigo  — brand primary */
    --cally-b: #8b5cf6;   /* violet  — mid stop */
    --cally-c: #22d3ee;   /* cyan    — energetic accent */
    --cally-gradient: conic-gradient(from 0deg, var(--cally-a), var(--cally-b), var(--cally-c), var(--cally-b), var(--cally-a));
    --cally-gradient-linear: linear-gradient(135deg, var(--cally-a), var(--cally-b) 55%, var(--cally-c));
    --cally-listen: #f43f5e;
    --cally-blob: 42% 58% 65% 35% / 45% 45% 55% 55%;
}

@keyframes cally-blob-morph {
    0%, 100% { border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%; }
    25%      { border-radius: 58% 42% 35% 65% / 55% 65% 35% 45%; }
    50%      { border-radius: 50% 50% 42% 58% / 60% 42% 58% 40%; }
    75%      { border-radius: 65% 35% 55% 45% / 40% 55% 45% 60%; }
}

@keyframes cally-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* ---------- Launcher orb ---------- */

.ai-companion-toggle {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    width: 58px;
    height: 58px;
    border: none;
    background: none;
    color: var(--text-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ai-companion-toggle::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: var(--radius-full);
    background: var(--cally-gradient);
    animation: cally-orb-spin 7s linear infinite;
    z-index: -2;
}

.ai-companion-toggle::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--cally-gradient-linear);
    animation: cally-blob-morph 9s ease-in-out infinite, cally-float 4.5s ease-in-out infinite;
    z-index: -1;
}

.ai-companion-toggle .cally-orb-core {
    position: relative;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-companion-toggle .cally-orb-core svg {
    width: 100%;
    height: 100%;
    animation: cally-breathe 3.2s ease-in-out infinite;
    filter: drop-shadow(0 1px 3px rgba(71, 85, 105, 0.15));
}

.ai-companion-toggle-glow {
    position: absolute;
    inset: -14px;
    border-radius: var(--radius-full);
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%);
    z-index: -3;
    animation: cally-glow-pulse 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cally-orb-spin { to { transform: rotate(360deg); } }
@keyframes cally-breathe {
    0%, 100% { transform: scale(1); opacity: 0.92; }
    50% { transform: scale(1.14); opacity: 1; }
}
@keyframes cally-glow-pulse {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.2); }
}

.ai-companion-toggle:hover { transform: scale(1.1) rotate(-4deg); }
.ai-companion-toggle:active { transform: scale(0.95); }
.ai-companion-toggle.panel-open .cally-orb-core { animation: none; }
.ai-companion-toggle.panel-open::after { animation: cally-blob-morph 9s ease-in-out infinite; }

.ai-companion-toggle .ai-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background: var(--color-error);
    color: var(--text-inverse);
    font-size: var(--text-2xs);
    font-weight: var(--font-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    border: 2px solid var(--bg-primary);
    z-index: 2;
}

@media (max-width: 480px) {
    .ai-companion-toggle { right: var(--space-3); bottom: var(--space-3); }
}

/* ---------- Panel shell ---------- */

.ai-companion-panel {
    position: fixed;
    bottom: calc(var(--space-6) + 68px);
    right: var(--space-6);
    width: 396px;
    height: 576px;
    max-height: 576px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.15) translateY(40px);
    transform-origin: bottom right;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-companion-panel.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    visibility: visible;
}

.ai-companion-panel.maximized { height: calc(100vh - 100px); max-height: calc(100vh - 100px); }

/* ambient aurora wash — subtle, slow-drifting, purely atmospheric */
.ai-companion-panel::before,
.ai-companion-panel::after {
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    filter: blur(64px);
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
}
.ai-companion-panel::before {
    background: var(--cally-a);
    top: -70px;
    left: -70px;
    animation: cally-aurora-1 15s ease-in-out infinite;
}
.ai-companion-panel::after {
    background: var(--cally-c);
    bottom: -80px;
    right: -60px;
    animation: cally-aurora-2 18s ease-in-out infinite;
}
@keyframes cally-aurora-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(35px, 25px) scale(1.15); }
}
@keyframes cally-aurora-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-30px, -20px) scale(1.1); }
}

.ai-companion-header, .ai-companion-tabs, .ai-companion-tab-content { position: relative; z-index: 1; }

@media (max-width: 480px) {
    .ai-companion-panel {
        right: var(--space-3);
        left: var(--space-3);
        width: auto;
        bottom: calc(var(--space-3) + 68px);
        height: 68vh;
        max-height: 68vh;
    }
}

/* ---------- Header ---------- */

.ai-companion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-primary);
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.07), transparent);
}

.ai-companion-header-left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }

.cally-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    background: var(--cally-gradient-linear);
    animation: cally-blob-morph 9s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.10);
}

.cally-avatar svg { width: 18px; height: 18px; color: var(--text-inverse); animation: cally-breathe 3.2s ease-in-out infinite; }

.ai-companion-header-title {
    font-size: var(--text-lg);
    font-weight: var(--font-extrabold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.2;
    background: linear-gradient(100deg, var(--cally-a), var(--cally-b) 45%, var(--cally-c) 90%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: cally-title-shimmer 6s ease-in-out infinite;
}

@keyframes cally-title-shimmer {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

.ai-companion-header-sub {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cally-status-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-success); flex-shrink: 0; transition: background 0.2s ease; }
.cally-status-dot.thinking { background: var(--cally-a); animation: cally-status-pulse 1s ease-in-out infinite; }
.cally-status-dot.listening { background: var(--cally-listen); animation: cally-status-pulse 0.7s ease-in-out infinite; }
.cally-status-dot.speaking { background: var(--cally-c); animation: cally-status-pulse 0.8s ease-in-out infinite; }
@keyframes cally-status-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}

.ai-companion-header-actions { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }

.ai-companion-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 7px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.ai-companion-close:hover { color: var(--text-primary); background: var(--bg-tertiary); transform: scale(1.08); }
.ai-companion-close.active { color: var(--cally-a); background: rgba(99, 102, 241, 0.1); }

/* ---------- Tabs ---------- */

.ai-companion-tabs { display: flex; border-bottom: 1px solid var(--border-primary); background: var(--bg-primary); padding: 0 var(--space-4); }
.ai-companion-tab {
    flex: 1;
    background: none;
    border: none;
    padding: var(--space-3) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-tertiary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}
.ai-companion-tab:hover { color: var(--text-secondary); }
.ai-companion-tab.active { color: var(--cally-a); border-bottom-color: var(--cally-a); }

.ai-tab-badge { min-width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--color-error); color: var(--text-inverse); font-size: var(--text-2xs); font-weight: var(--font-bold); display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; }

.ai-companion-tab-content { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.ai-companion-tab-content.active { display: flex; }
.ai-companion-body { flex: 1; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; }

/* ---------- Suggestions ---------- */

.ai-suggestion { padding: var(--space-4); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); margin-bottom: var(--space-3); background: var(--bg-elevated); transition: all 0.2s ease; }
.ai-suggestion:last-child { margin-bottom: 0; }
.ai-suggestion:hover { box-shadow: var(--shadow-sm); border-color: var(--border-secondary); transform: translateY(-1px); }
.ai-suggestion.priority-critical { border-left: 3px solid var(--color-error); }
.ai-suggestion.priority-high { border-left: 3px solid var(--color-warning); }
.ai-suggestion.priority-medium { border-left: 3px solid var(--color-info); }
.ai-suggestion.priority-low { border-left: 3px solid var(--color-success); }
.ai-suggestion-message { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); }
.ai-suggestion-actions { display: flex; align-items: center; gap: var(--space-2); }
.ai-suggestion-actions .btn { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); transition: all 0.2s ease; }
.ai-suggestion-actions .btn:hover { background: var(--cally-b); box-shadow: 0 3px 10px rgba(99, 102, 241, 0.35); transform: translateY(-1px); }
.ai-suggestion-dismiss { background: none; border: none; color: var(--text-tertiary); font-size: var(--text-xs); cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); transition: all 0.2s ease; }
.ai-suggestion-dismiss:hover { color: var(--text-secondary); background: var(--bg-tertiary); }

.ai-companion-empty { text-align: center; padding: var(--space-4); color: var(--text-tertiary); flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ai-companion-empty-icon { margin-bottom: var(--space-3); color: var(--color-success); }
.ai-companion-empty-title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-1); }
.footer-brand,
.cell-extra-count,
.referral-stat-label,
.ai-companion-empty-text {
    font-size: var(--text-xs); color: var(--text-tertiary);
}
.ai-companion-loading { text-align: center; padding: var(--space-8); color: var(--text-tertiary); font-size: var(--text-sm); }

/* ---------- Chat messages ---------- */

.ai-chat-messages { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); position: relative; z-index: 1; }

.ai-chat-welcome { text-align: center; padding: var(--space-6) var(--space-2) var(--space-4); }

.cally-welcome-orb {
    width: 52px;
    height: 52px;
    margin: 0 auto var(--space-4);
    background: var(--cally-gradient-linear);
    animation: cally-blob-morph 9s ease-in-out infinite, cally-float 4.5s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.08);
}
.cally-welcome-orb svg { width: 24px; height: 24px; color: var(--text-inverse); }

.ai-chat-welcome-text { font-size: var(--text-md); color: var(--text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); max-width: 30ch; margin-left: auto; margin-right: auto; }
.ai-chat-starters { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.ai-chat-starter {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    padding: 7px var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ai-chat-starter:hover { background: rgba(99, 102, 241, 0.08); border-color: var(--cally-a); color: var(--cally-a); transform: translateY(-2px) scale(1.03); box-shadow: 0 3px 10px rgba(99, 102, 241, 0.15); }
.ai-chat-starter-report { background: var(--color-warning-light, rgba(245,158,11,0.10)); border-color: var(--color-warning); color: var(--color-warning-dark, var(--color-warning)); flex-basis: 100%; }
.ai-chat-starter-report:hover { background: var(--color-warning); color: var(--color-white); border-color: var(--color-warning); }

.ai-chat-msg { display: flex; flex-direction: column; animation: cally-msg-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes cally-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.ai-chat-msg-user { align-items: flex-end; }
.ai-chat-msg-assistant { align-items: flex-start; }

.ai-chat-msg-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.ai-chat-msg-assistant .ai-chat-msg-row { flex-direction: row; }
.ai-chat-msg-user .ai-chat-msg-row { flex-direction: row-reverse; }

.cally-msg-avatar {
    width: 22px;
    height: 22px;
    background: var(--cally-gradient-linear);
    border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cally-msg-avatar svg { width: 12px; height: 12px; color: var(--text-inverse); }

.ai-chat-bubble {
    max-width: 100%;
    padding: 10px var(--space-4);
    border-radius: var(--radius-xl);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    word-wrap: break-word;
    white-space: pre-wrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ai-chat-bubble:hover { transform: translateY(-1px); }
.ai-chat-bubble-user { background: var(--cally-gradient-linear); color: var(--text-inverse); border-bottom-right-radius: var(--radius-xs); }
.ai-chat-bubble-assistant { background: var(--bg-tertiary); color: var(--text-primary); border-bottom-left-radius: var(--radius-xs); }
.ai-chat-bubble-assistant:hover { box-shadow: var(--shadow-xs); }

.ai-chat-bubble-para { margin: 0 0 var(--space-2) 0; }
.ai-chat-bubble-para:last-child { margin-bottom: 0; }
.ai-chat-bubble-list { margin: var(--space-1) 0 var(--space-2) 0; padding-left: 1.3em; }
.ai-chat-bubble-list:last-child { margin-bottom: 0; }
.ai-chat-bubble-list li { margin: 3px 0; }
.ai-chat-bubble-list li::marker { color: var(--cally-a); font-weight: var(--font-semibold); }
.ai-chat-stat { color: var(--cally-a); font-weight: var(--font-semibold); }

.ai-chat-typing { display: flex; align-items: center; gap: 5px; padding: 12px var(--space-4); }
.ai-chat-typing span { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--cally-a); animation: aiTypingWave 1.1s ease-in-out infinite; }
.ai-chat-typing span:nth-child(2) { animation-delay: 0.15s; background: var(--cally-b); }
.ai-chat-typing span:nth-child(3) { animation-delay: 0.3s; background: var(--cally-c); }
@keyframes aiTypingWave {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-5px); opacity: 1; }
}

.ai-chat-action-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); background: var(--cally-gradient-linear); border: none; color: var(--text-inverse); font-size: var(--text-xs); font-weight: var(--font-semibold); padding: 8px var(--space-4); border-radius: var(--radius-full); cursor: pointer; text-decoration: none; box-shadow: var(--shadow-xs); transition: all 0.2s ease; align-self: flex-start; }
.ai-chat-action-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); filter: brightness(1.06); }
.ai-chat-action-btn svg { flex-shrink: 0; }

/* ---------- Input bar ---------- */

.ai-chat-input-area { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-primary); background: var(--bg-primary); position: relative; z-index: 1; }

.cally-input-pill {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    padding: 4px 4px 4px var(--space-4);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cally-input-pill:focus-within { border-color: var(--cally-a); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.10); }

.ai-chat-input { flex: 1; border: none; background: none; padding: 8px 4px; font-size: var(--text-sm); color: var(--text-primary); outline: none; min-width: 0; }
.ai-chat-input::placeholder { color: var(--text-tertiary); }

/* Single morphing mic <-> send control — mirrors the familiar
   messaging-app pattern: mic when empty, send once you've typed,
   a waveform while actively listening. */
.cally-action-btn {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--cally-gradient-linear);
    color: var(--text-inverse);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.25s ease;
}
.cally-action-btn:hover:not(:disabled) { transform: scale(1.08); box-shadow: 0 3px 12px rgba(99, 102, 241, 0.4); }
.cally-action-btn:active:not(:disabled) { transform: scale(0.92); }
.cally-action-btn:disabled { opacity: 0.35; cursor: default; }

.cally-action-icon { position: absolute; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cally-action-icon.icon-send { opacity: 0; transform: scale(0.4) rotate(-25deg); }
.cally-action-icon.icon-mic { opacity: 1; transform: scale(1) rotate(0deg); }
.cally-action-btn.has-text .icon-send { opacity: 1; transform: scale(1) rotate(0deg); }
.cally-action-btn.has-text .icon-mic { opacity: 0; transform: scale(0.4) rotate(25deg); }
.cally-action-btn.no-voice .icon-mic { display: none; }
.cally-action-btn.no-voice .icon-send { opacity: 1; transform: none; }

.cally-waveform { position: absolute; display: none; align-items: center; justify-content: center; gap: 2.5px; }
.cally-action-btn.listening { background: var(--cally-listen); animation: cally-mic-pulse 1.1s ease-in-out infinite; }
.cally-action-btn.listening .cally-action-icon { opacity: 0; }
.cally-action-btn.listening .cally-waveform { display: flex; }
.cally-waveform span { width: 3px; height: 12px; background: var(--text-inverse); border-radius: 2px; animation: cally-wave 0.85s ease-in-out infinite; }
.cally-waveform span:nth-child(1) { animation-delay: 0s; }
.cally-waveform span:nth-child(2) { animation-delay: 0.12s; }
.cally-waveform span:nth-child(3) { animation-delay: 0.24s; }
.cally-waveform span:nth-child(4) { animation-delay: 0.36s; }
@keyframes cally-wave { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@keyframes cally-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.5); }
    50% { box-shadow: 0 0 0 7px rgba(244, 63, 94, 0); }
}

/* Persistent ring while a hands-free voice conversation is active but the
   turn is between "listening" states (thinking / speaking) — a visible cue
   that the mic will pick back up on its own once the reply finishes. */
.cally-action-btn.voice-mode:not(.listening) { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35); }

/* ---------- Voice mode overlay ---------- */
/* A dedicated, HUD-style full-screen voice view — counter-rotating rings
   around a glowing core, like a reactor readout, reacting to listening /
   thinking / speaking. No text transcript while talking: an interim
   preview necessarily comes from a different, less accurate pass than the
   final transcription, so showing one then swapping it for another was
   the exact "what it showed isn't what it sent" bug this replaces. The
   normal tabs/messages/input underneath stay populated in the background
   the whole time, and reappear as soon as voice mode ends. */

.cally-voice-overlay { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-5); position: relative; background: var(--bg-elevated); overflow: hidden; }
.ai-companion-panel.voice-mode-active .ai-companion-tabs,
.ai-companion-panel.voice-mode-active .ai-companion-tab-content { display: none; }
.ai-companion-panel.voice-mode-active .cally-voice-overlay { display: flex; }

.cally-voice-end-btn { position: absolute; top: var(--space-4); right: var(--space-4); width: 32px; height: 32px; border-radius: var(--radius-full); border: 1px solid var(--border-primary); background: var(--bg-secondary); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; z-index: 2; }
.cally-voice-end-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); transform: scale(1.06); }

.cally-voice-orb-wrap { position: relative; width: 168px; height: 168px; margin-top: var(--space-6); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

.cally-voice-glow {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.38) 0%, transparent 70%);
    animation: cally-glow-pulse 3s ease-in-out infinite;
    pointer-events: none;
    transition: background 0.3s ease;
}

.cally-voice-ring { position: absolute; border-radius: 50%; border: 2px solid transparent; pointer-events: none; transition: border-color 0.3s ease; }
.cally-voice-ring-outer {
    inset: 0;
    border-top-color: var(--cally-a);
    border-right-color: var(--cally-c);
    opacity: 0.6;
    animation: cally-orb-spin 6s linear infinite;
}
.cally-voice-ring-inner {
    inset: 22px;
    border-bottom-color: var(--cally-b);
    border-left-color: var(--cally-a);
    opacity: 0.5;
    animation: cally-orb-spin 4s linear infinite reverse;
}

.cally-voice-orb {
    position: relative;
    width: 92px;
    height: 92px;
    background: var(--cally-gradient-linear);
    border-radius: var(--cally-blob);
    box-shadow: 0 8px 40px rgba(99, 102, 241, 0.35);
    animation: cally-blob-morph 9s ease-in-out infinite, cally-voice-breathe 2.6s ease-in-out infinite;
    transition: background 0.3s ease;
}
@keyframes cally-voice-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Listening: everything speeds up and shifts to the "listening" red, like
   the rings are actively tracking your voice. */
.cally-voice-overlay.listening .cally-voice-orb { background: var(--cally-listen); animation: cally-blob-morph 9s ease-in-out infinite, cally-voice-pulse-listen 1s ease-in-out infinite; }
.cally-voice-overlay.listening .cally-voice-ring-outer { animation-duration: 2.4s; border-top-color: var(--cally-listen); border-right-color: var(--cally-listen); }
.cally-voice-overlay.listening .cally-voice-ring-inner { animation-duration: 1.7s; border-bottom-color: var(--cally-listen); border-left-color: var(--cally-listen); }
.cally-voice-overlay.listening .cally-voice-glow { background: radial-gradient(circle, rgba(244, 63, 94, 0.42) 0%, transparent 70%); animation-duration: 1s; }
@keyframes cally-voice-pulse-listen {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.4); }
    50%      { transform: scale(1.12); box-shadow: 0 0 0 18px rgba(244, 63, 94, 0); }
}

/* Thinking: rings tighten into a fast, purposeful spin. */
.cally-voice-overlay.thinking .cally-voice-orb { animation: cally-blob-morph 2.2s ease-in-out infinite, cally-voice-breathe 1.1s ease-in-out infinite; opacity: 0.9; }
.cally-voice-overlay.thinking .cally-voice-ring-outer { animation-duration: 1.4s; }
.cally-voice-overlay.thinking .cally-voice-ring-inner { animation-duration: 1s; }

/* Speaking: a slower, steadier orbit with a quicker breathing core. */
.cally-voice-overlay.speaking .cally-voice-orb { animation: cally-blob-morph 4s ease-in-out infinite, cally-voice-breathe 0.85s ease-in-out infinite; }
.cally-voice-overlay.speaking .cally-voice-ring-outer { animation-duration: 3.2s; }
.cally-voice-overlay.speaking .cally-voice-ring-inner { animation-duration: 2.4s; }

.cally-voice-status { flex-shrink: 0; font-size: var(--text-base); font-weight: var(--font-medium); color: var(--text-secondary); letter-spacing: 0.02em; }

/* Builds up sentence by sentence as Cally speaks, so a long reply stays
   readable instead of needing to be memorized as it's said out loud.
   Scrolls internally rather than pushing the orb around as it grows. */
.cally-voice-caption {
    width: 100%;
    max-width: 300px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
    text-align: center;
}
.cally-voice-caption:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
    .cally-voice-orb,
    .cally-voice-ring,
    .cally-voice-glow { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-companion-toggle::before,
    .ai-companion-toggle::after,
    .ai-companion-toggle-glow,
    .ai-companion-toggle .cally-orb-core svg,
    .ai-companion-toggle:hover,
    .cally-avatar,
    .cally-avatar svg,
    .cally-welcome-orb,
    .ai-companion-header-title,
    .ai-companion-panel::before,
    .ai-companion-panel::after,
    .cally-status-dot,
    .ai-chat-msg,
    .ai-chat-typing span,
    .cally-action-btn.listening,
    .cally-waveform span {
        animation: none !important;
        transform: none !important;
    }
}

/* ==========================================
   ADMIN FEATURES MOBILE RESPONSIVE
   (Impersonation, Logs, Diagnostics, Tickets)
   ========================================== */

@media (max-width: 767px) {
    .payload-panel {
        min-width: 0 !important;
        flex-basis: 100% !important;
    }

    .log-entry pre {
        font-size: var(--text-2xs) !important;
        max-height: 200px !important;
        word-break: break-all;
    }

    .log-entry .log-timestamp {
        flex-wrap: wrap;
        gap: 0.25rem !important;
    }

    .leads-toolbar-actions .logs-search-input,
    .logs-search-input {
        width: 100% !important;
        max-width: 100% !important;
    }

    .payload-panel pre {
        overflow-wrap: anywhere;
    }

    .table-actions {
        gap: 0.25rem !important;
    }

    .table-actions .btn-sm {
        font-size: var(--text-xs) !important;
        padding: 0.2rem 0.4rem !important;
    }

    #date-range-indicator {
        font-size: var(--text-sm) !important;
        flex-wrap: wrap !important;
    }

    #bulk-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #bulk-actions label {
        font-size: var(--text-sm) !important;
    }
}

@media (max-width: 575px) {
    .logs-filter-row {
        flex-wrap: wrap !important;
    }

    .logs-filter-row .form-control {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .logs-filter-row .btn {
        flex: 1 1 auto !important;
    }

    .log-entry .log-meta {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.25rem !important;
    }

    .log-entry .log-contact-info {
        font-size: var(--text-xs) !important;
    }
}

@media (max-width: 479px) {
    .log-entry {
        padding: 0.5rem !important;
    }

    .log-entry .row-num {
        font-size: var(--text-2xs) !important;
        min-width: 18px !important;
    }

    .status-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

.required { color: var(--color-error); font-weight: var(--font-semibold); }

/* ===== Lead Sidebar Collapsible Sections ===== */
.lead-sidebar-section .collapsible-header {
    border-bottom: none;
}
.lead-sidebar-section .collapsible-body {
    padding: 0;
}
.lead-sidebar-section .collapsible-body.open {
    padding: 0;
}

/* ===== Slide Section (smooth show/hide) ===== */
.slide-section {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-out, padding 0.2s ease-out;
    pointer-events: none;
}

/* Suppress any utility-class padding (py-*, px-*) while section is collapsed */
.slide-section:not(.slide-open) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.slide-section.slide-open {
    opacity: 1;
    pointer-events: auto;
}
.slide-section.slide-flex.slide-open {
    display: flex;
}

/* .cal-day-*: see "ADMIN — CALENDAR / APPOINTMENTS" (day detail panel)
   later in this file — this was an earlier, superseded duplicate. */

/* ===== Appointment status select - ensure dropdown arrow space ===== */
.lead-appt-item select.form-control {
    padding-right: 1.5rem !important;
    background-size: 1em 1em;
    background-position: right 0.25rem center;
    min-width: 100px;
    text-overflow: ellipsis;
}

/* ===== NEW FEATURES RESPONSIVE - Lead Detail Sidebar Management ===== */

@media (max-width: 767px) {
    .lead-sidebar-actions {
        gap: 0.25rem;
    }
    .lead-sidebar-actions .btn {
        font-size: var(--text-xs);
        padding: 4px 8px;
    }
    .lead-sidebar-section-header {
        padding: var(--space-2) var(--space-3);
    }
    .lead-appt-item > div {
        flex-direction: column;
        gap: var(--space-2);
    }
    .lead-appt-item > div > div:last-child {
        flex-direction: row;
        width: 100%;
        margin-left: 0 !important;
        align-items: center;
    }
    .lead-appt-item > div > div:last-child select {
        flex: 1;
    }
    .lead-appt-item > div > div:last-child .btn-icon {
        flex-shrink: 0;
        align-self: center;
    }
}

@media (max-width: 575px) {
    .lead-sidebar-profile {
        padding: var(--space-3);
    }
    .lead-sidebar-name {
        font-size: var(--text-lg);
    }
}

@media (max-width: 479px) {
    .lead-sidebar-section-header {
        font-size: var(--text-xs);
        padding: var(--space-2);
    }
}

.auto-option-panel {
    margin-top: var(--space-2);
    max-height: 500px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
}

/* Settings Dropdown Hover */
.settings-dropdown-item:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.settings-gear-btn:hover {
    background: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

/* ==========================================
   MODERN METRIC CARDS & STAT GRIDS
   ========================================== */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-3);
}

.metric-card {
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.metric-card:hover {
    background: var(--color-primary-subtle);
    border-color: rgba(99, 102, 241, 0.1);
}

.metric-value {
    font-size: 1.5em;
    font-weight: var(--font-bold);
    color: var(--color-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.metric-value.success { color: var(--color-success); }
.metric-value.warning { color: var(--color-warning); }
.metric-value.error { color: var(--color-error); }

.metric-label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
    font-weight: var(--font-medium);
    letter-spacing: 0.01em;
}

/* Quick Link Grid */
.quick-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
}

.quick-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.quick-link:hover {
    background: var(--color-primary-subtle);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Briefing Line Items */
.briefing-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-primary);
}

.briefing-line:last-child {
    border-bottom: none;
}

.briefing-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-primary-subtle);
}

.briefing-icon.urgent { background: var(--color-error-light); color: var(--color-error); }
.briefing-icon.high { background: var(--color-warning-light); color: var(--color-warning); }

/* Task Items */
.task-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-primary);
    transition: background var(--transition-fast);
}

.task-item:hover {
    background: var(--color-gray-50);
}

.task-item:last-child {
    border-bottom: none;
}

.task-check {
    padding: 3px 7px;
    font-size: var(--text-2xs);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1;
}

.task-check:hover {
    background: var(--color-success-light);
    border-color: var(--color-success);
    color: var(--color-success);
}

.task-body {
    flex: 1;
    min-width: 0;
}

.task-text {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.4;
}

.task-text.overdue { color: var(--color-error); }

.task-meta {
    font-size: var(--text-xs);
    color: var(--text-dim);
    margin-top: 2px;
}

.task-dismiss {
    padding: 3px 7px;
    font-size: var(--text-base);
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    line-height: 1;
}

.task-dismiss:hover {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* Page section header */
.page-section-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Trial Expired Banner */
.trial-expired-banner {
    background: linear-gradient(135deg, var(--color-error), var(--color-error-dark));
    color: var(--text-inverse);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-6);
    text-align: center;
}

.trial-expired-banner h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-2);
    color: inherit;
}

.trial-expired-banner p {
    font-size: var(--text-lg);
    opacity: 0.9;
}

/* .empty-state/.empty-state-icon consolidated — see "9. Empty state
   component" further down this file (search that heading) for the single
   definition. .empty-state-text (a plain-text variant still used by
   dashboard.php, _team_performance.php, ai-autopilot.php, playbooks.php —
   distinct from comp_empty_state()'s .empty-state-title/-desc) stays here. */
.empty-state-text {
    font-size: var(--text-sm);
    max-width: 300px;
    margin: 0 auto;
    line-height: var(--leading-relaxed);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
}

/* Selection */
::selection {
    background: rgba(99, 102, 241, 0.15);
    color: var(--text-primary);
}

/* .main-content consolidated — see "── Main Content ──" near the top. */

/* ==========================================
   ADMIN PAGE COMPONENTS
   ========================================== */

.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.icon-box-primary { background: var(--color-primary-subtle); color: var(--color-primary); }
.icon-box-success { background: var(--color-success-light); color: var(--color-success); }
.badge-info,
.direction-inbound,
.audit-toggle-btn,
.icon-box-info {
    background: var(--color-info-light); color: var(--color-info);
}
.icon-box-warning { background: var(--color-warning-light); color: var(--color-warning); }
.icon-box-error,
.icon-box-danger { background: var(--color-error-light); color: var(--color-error); }
.icon-box-secondary { background: var(--bg-tertiary); color: var(--text-secondary); }

.card-header-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-4);
}

.section-divider-line {
    height: 1px;
    background: var(--border-primary);
    flex: 1;
}

.settings-section {
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-primary);
}
.settings-section:last-child {
    border-bottom: none;
}
.settings-section > .settings-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-primary);
}
.settings-section-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}
/* .settings-section-desc consolidated — see canonical definition near
   "settings-section-status" further down this file. */

.settings-row {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.settings-row > * { flex: 1; }

.setting-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-primary);
}
.setting-inline:last-child { border-bottom: none; }
.setting-inline-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}
.settings-toggle-desc,
.setting-inline-desc {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
}

.plan-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}
.plan-card {
    background: var(--bg-elevated);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    position: relative;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.plan-card:hover {
    border-color: var(--color-gray-300);
    box-shadow: var(--shadow-md);
}
.plan-card.plan-current {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
}
.plan-card.plan-featured {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1), var(--shadow-lg);
    transform: scale(1.02);
    z-index: 1;
}
.plan-card.plan-featured:hover {
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), var(--shadow-xl);
}

.plan-card-price {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}
.plan-card-price span {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: var(--text-tertiary);
}
.plan-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    flex-grow: 1;
}
.plan-card-features li {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    padding: var(--space-2) 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    border-bottom: 1px solid var(--border-primary);
    line-height: 1.4;
}
.plan-card-features li:last-child {
    border-bottom: none;
}
.plan-card.plan-scheduled {
    border-color: var(--color-warning);
    background: var(--color-warning-light);
}
.plan-card-badge {
    text-align: center;
    margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-3);
    padding: 5px 0;
    background: var(--color-primary);
    color: var(--text-inverse);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    border-radius: calc(var(--radius-xl) - 2px) calc(var(--radius-xl) - 2px) 0 0;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.plan-card-badge-gold {
    background: linear-gradient(90deg, var(--color-warning) 0%, var(--color-warning) 50%, var(--color-warning) 100%);
    color: rgba(245,158,11,0.10);
}
.plan-card-features li::before {
    content: '';
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: var(--radius-full);
    background: var(--color-success-light);
    flex-shrink: 0;
    margin-top: 1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.info-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}
.info-banner-primary {
    background: var(--color-primary-subtle);
    border: 1px solid rgba(99, 102, 241, 0.15);
    color: var(--color-primary-hover);
}
.info-banner-warning {
    background: var(--color-warning-light);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: var(--color-warning-dark);
}
.info-banner-success {
    background: var(--color-success-light);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--color-success);
}
.info-banner-error {
    background: var(--color-error-light);
    border: 1px solid rgba(244, 63, 94, 0.15);
    color: var(--color-error-dark);
}

.page-greeting {
    margin-bottom: var(--space-6);
}
.page-greeting h1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-1);
}
.page-greeting p {
    font-size: var(--text-base);
    color: var(--text-tertiary);
    margin: 0;
    font-weight: var(--font-light);
}

.tab-nav {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: var(--space-4);
    overflow-x: auto;
}
.tab-nav-item {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-tertiary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    white-space: nowrap;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.tab-nav-item:hover {
    color: var(--text-primary);
}
.tab-nav-item.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.data-table-wrapper,
.responsive-table {
    overflow-x: auto;
    border-radius: var(--radius-lg);
}
.table-sm th,
.table-sm td {
    padding: 0.35rem var(--space-2);
    font-size: var(--text-xs);
}
/* .data-table/.data-table th/.data-table td consolidated — see
   "Data Table (styled to match .table)" near the top of this file. */
.data-table tr:last-child td {
    border-bottom: none;
}
.data-table tr:hover td {
    background: var(--bg-secondary);
}

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.opacity-60 { opacity: 0.6; }

.toggle-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.toggle-label.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.automation-toggle-label,
.radio-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.enrichment-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
}
.enrichment-grid .enrichment-label {
    color: var(--text-dim);
}
.enrichment-grid .enrichment-value {
    font-weight: var(--font-medium);
}

.grade-row {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-primary);
    font-size: var(--text-sm);
}
.grade-row:last-child { border-bottom: none; }

.collapsible-body-padded {
    padding: 0 var(--space-4) var(--space-3);
}

.billing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) 0 var(--space-3);
}

.billing-switch {
    width: 40px;
    height: 22px;
    background: var(--border-primary);
    border-radius: 100px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}
.billing-switch-knob {
    width: 16px;
    height: 16px;
    background: var(--color-white);
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
    box-shadow: 0 1px 2px rgba(71, 85, 105, 0.15);
}

.yearly-save-badge {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--color-success);
    background: var(--color-success-light);
    padding: 2px 8px;
    border-radius: 100px;
}

.accent-primary { accent-color: var(--color-primary); }

.dashboard-greeting {
    margin-bottom: var(--space-6);
}
.dashboard-greeting-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    margin: 0 0 var(--space-1);
    letter-spacing: -0.02em;
}
.dashboard-greeting-sub {
    font-size: var(--text-base);
    color: var(--text-tertiary);
    margin: 0;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    align-items: start;
}
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dashboard-summary-list li {
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    color: var(--text-primary);
    position: relative;
    padding-left: var(--space-4);
}
.dashboard-summary-list li::before {
    content: '\2022';
    position: absolute;
    left: var(--space-1);
    color: var(--text-dim);
}

.settings-field-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 4px;
    display: block;
}

.settings-section-header {
    padding: var(--space-3) var(--space-4);
    color: var(--text-dim);
    font-weight: var(--font-semibold);
}

/* .empty-state consolidated — see "9. Empty state component". */

.info-banner-error {
    color: var(--color-error-dark);
    background: var(--color-error-light);
    border-radius: var(--radius-sm);
}

.verification-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}
.verification-status.verified {
    background: var(--color-success-light);
    color: var(--color-success);
}
.verification-status.unverified {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.provider-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.provider-badge.connected {
    background: var(--color-success-light);
    color: var(--color-success);
}

.upgrade-cta {
    text-align: center;
    padding: var(--space-6);
    border: 1px dashed var(--border-secondary);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
}
.upgrade-cta-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
.upgrade-cta-desc {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-bottom: var(--space-4);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.ai-action-card:hover {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-sm);
}
.ai-action-type {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}
.ai-action-text {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-3);
}
.ai-action-meta {
    font-size: var(--text-xs);
    color: var(--text-dim);
}
.referral-link-box,
.ai-action-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.onboarding-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-primary);
    transition: background var(--transition-fast);
}
.onboarding-step:last-child { border-bottom: none; }
.onboarding-step:hover { background: var(--bg-secondary); }
.onboarding-step.completed { opacity: 0.6; }
.onboarding-step-check {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: transparent;
    transition: all var(--transition-fast);
}
.onboarding-step.completed .onboarding-step-check {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
}
.onboarding-step-text {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}
.onboarding-step-text a {
    color: var(--color-primary);
    text-decoration: none;
}
.onboarding-step-text a:hover { text-decoration: underline; }

.sequence-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
    transition: all var(--transition-fast);
    cursor: pointer;
}
.sequence-card:hover {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-sm);
}
.ai-action-card,
.appt-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    transition: all var(--transition-fast);
}
.appt-card:hover {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
    .settings-row {
        flex-direction: column;
    }
    .plan-cards-grid {
        grid-template-columns: 1fr;
    }
    .tab-nav {
        gap: 0;
    }
}

/* Calendar Layout Grid with Reminders Sidebar */
.cal-layout-grid {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: var(--space-4);
    align-items: start;
}
.cal-main-col { min-width: 0; }
/* .cal-reminders-col/.cal-reminders-title/.cal-reminder-*: see the
   "Reminders sidebar" definitions under "ADMIN — CALENDAR / APPOINTMENTS"
   later in this file — this was an earlier, superseded duplicate. */
@media (max-width: 768px) {
    .cal-layout-grid {
        grid-template-columns: 1fr;
    }
    .cal-reminders-col {
        order: -1;
    }
}

/* Sequences Table */
.seq-table { margin-bottom: 0; border: none; border-radius: 0; box-shadow: none; }
.seq-table-row:hover { background: var(--bg-secondary); }
.seq-table th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-secondary); background: var(--bg-secondary); border-bottom: 2px solid var(--border-secondary); }
.seq-table td { padding: 0.6rem var(--space-4); }

/* Enhanced Lead Cards */
.lead-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.lead-score-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lead-score-badge.hot  { background: rgba(244, 63, 94, 0.10);  color: var(--color-error); border: 1px solid rgba(244, 63, 94, 0.22); }
.lead-score-badge.hot::before  { background: var(--color-error); }
.lead-score-badge.warm { background: rgba(245, 158, 11, 0.12); color: var(--text-primary); border: 1px solid rgba(245, 158, 11, 0.25); }
.lead-score-badge.warm::before { background: var(--color-warning); }
.lead-score-badge.cold { background: rgba(148, 163, 184, 0.10); color: var(--color-primary); border: 1px solid rgba(148, 163, 184, 0.22); }
.lead-score-badge.cold::before { background: var(--text-dim); }
.lead-score-badge.new  { background: rgba(16, 185, 129, 0.10); color: var(--color-success); border: 1px solid rgba(16, 185, 129, 0.22); }
.lead-score-badge.new::before { background: var(--color-success); }

/* ======================== */
/* AI Actions Page Redesign */
/* ======================== */
.ai-actions-banner {
    background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(99,102,241,0.05) 50%, rgba(244,63,94,0.06) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-8);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.ai-actions-banner-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.3;
}
.ai-actions-banner-sub {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}
.ai-actions-banner-toggle {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    min-width: 240px;
}
.page-header-left,
.ai-actions-banner-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mobile-user-name,
.settings-dropdown-name,
.automation-toggle-text,
.settings-toggle-title,
.ai-actions-banner-toggle-title {
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.ai-actions-autopilot-desc {
    font-size: var(--text-xs);
    color: var(--text-dim);
    max-width: 180px;
}

.ai-actions-table thead th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    border-bottom: 2px solid var(--border-secondary);
    background: var(--bg-secondary);
}
.ai-actions-table tbody tr {
    border-bottom: 1px solid var(--border-primary);
    transition: background var(--transition-fast);
}
.ai-actions-table tbody tr:hover {
    background: var(--bg-secondary);
}
.ai-actions-table tbody td {
    padding: var(--space-4);
    vertical-align: middle;
}
.btn-success {
    background: var(--color-success);
    color: white;
    border: 1px solid var(--color-success);
}
.btn-success:hover {
    background: var(--color-success);
}
.btn-danger-outline {
    background: var(--bg-elevated);
    color: var(--color-error);
    border: 1px solid var(--color-error);
}
.btn-danger-outline:hover {
    background: var(--color-error-light);
}
@media (max-width: 768px) {
    .ai-actions-banner {
        flex-direction: column;
        padding: var(--space-6);
    }
    .ai-actions-banner-toggle {
        width: 100%;
        min-width: unset;
    }
    .ai-actions-table thead { display: none; }
    .ai-actions-table tbody tr {
        display: block;
        padding: var(--space-4);
        border-bottom: 1px solid var(--border-primary);
    }
    .ai-actions-table tbody td {
        display: flex;
        justify-content: space-between;
        padding: var(--space-1) 0;
    }
    .ai-actions-table tbody td::before {
        content: attr(data-label);
        font-weight: var(--font-semibold);
        color: var(--text-dim);
        font-size: var(--text-xs);
        text-transform: uppercase;
    }
}

/* ======================== */
/* Settings Page Toggle Row */
/* ======================== */
.settings-section-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-6);
    overflow: hidden;
}
.settings-section-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.settings-section-title-bar:hover {
    background: var(--bg-secondary);
}

.settings-section-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--color-primary);
    flex-shrink: 0;
}
.settings-section-name {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}
.settings-section-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: 2px;
}

.settings-section-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}
.settings-section-status-badge.connected {
    background: rgba(16, 185, 129, 0.16);
    color: var(--color-success);
}
.settings-section-chevron {
    transition: transform 0.2s ease;
    color: var(--text-dim);
}
.settings-section-title-bar.active .settings-section-chevron {
    transform: rotate(180deg);
}
.settings-section-body {
    border-top: 1px solid var(--border-primary);
}
.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border-primary);
    gap: var(--space-4);
}
.collapsible-header-left,
.settings-toggle-row-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}
.settings-toggle-row-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
}
.settings-toggle-row-text h4 {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}
.settings-toggle-row-text p {
    font-size: var(--text-xs);
    color: var(--text-dim);
    margin: 2px 0 0 0;
}
.settings-section-status,
.settings-toggle-row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* ======================== */
/* Logs Page Redesign       */
/* ======================== */
.logs-header {
    margin-bottom: var(--space-6);
}
.logs-header h1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-6) 0;
}
.logs-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.logs-search-input {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    padding: var(--space-2) var(--space-3) var(--space-2) 2.25rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    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='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.75rem center;
}
.logs-filter-select {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-width: 120px;
}
.ai-actions-table,
.logs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.logs-table thead th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    border-bottom: 2px solid var(--border-secondary);
    background: var(--bg-secondary);
}
.logs-table tbody tr {
    border-bottom: 1px solid var(--border-primary);
    transition: background var(--transition-fast);
    cursor: pointer;
}
.logs-table tbody tr:hover {
    background: var(--bg-secondary);
}
.logs-table tbody td {
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
}
.logs-expand-row {
    display: none;
    background: var(--bg-tertiary);
}
.logs-expand-row.open {
    display: table-row;
}
.logs-expand-content {
    padding: var(--space-4) var(--space-6);
}

/* ======================== */
/* Account Page Redesign    */
/* ======================== */
.account-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.account-plan-card {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    background: var(--bg-elevated);
    position: relative;
    display: flex;
    flex-direction: column;
}
.account-plan-card.popular {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}
.account-plan-card .popular-badge {
    position: absolute;
    top: -12px;
    right: var(--space-4);
    background: var(--color-primary);
    color: white;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}
.plan-card-name,
.account-plan-name {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}
.account-plan-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}
.account-plan-price {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}
.account-plan-price span {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: var(--text-dim);
}
.account-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6) 0;
    flex: 1;
}
.account-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.account-plan-features li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-success);
}
.account-usage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.usage-bar-container {
    margin-bottom: var(--space-4);
}
.usage-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
.usage-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    overflow: hidden;
}
.usage-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}
.usage-bar-fill.green { background: var(--color-success); }
.usage-bar-fill.yellow { background: var(--color-warning); }
.profile-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 768px) {
    .account-plans-grid {
        grid-template-columns: 1fr;
    }
    .account-usage-grid {
        grid-template-columns: 1fr;
    }
    .profile-settings-grid {
        grid-template-columns: 1fr;
    }
}

/* Icon Buttons */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.btn-icon:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-secondary);
}
.btn-icon-danger {
    border-color: var(--color-error);
    background: var(--color-error);
    color: var(--text-inverse);
}
.btn-icon-danger:hover {
    background: var(--color-error-hover, var(--color-error));
    color: var(--text-inverse);
    border-color: var(--color-error-hover, var(--color-error));
}

/* =========================================================
   UTILITY CLASSES
   Single source for all layout / typography / spacing helpers.
   Use these instead of inline style="" attributes everywhere.
   ========================================================= */

/* Display */
.u-hidden   { display: none !important; }
.u-flex     { display: flex !important; }

.u-flex-center   { display: flex; align-items: center; justify-content: center; }
.u-flex-between  { display: flex; align-items: center; justify-content: space-between; }
.u-flex-start    { display: flex; align-items: flex-start; }
.u-block         { display: block; }
.u-inline-block  { display: inline-block; }
.u-grid          { display: grid; }

/* Gap */
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }

/* Flex alignment */
.u-items-center    { align-items: center; }
.u-items-start     { align-items: flex-start; }
.u-justify-between { justify-content: space-between; }
.u-justify-center  { justify-content: center; }
.u-justify-end     { justify-content: flex-end; }
.u-flex-wrap       { flex-wrap: wrap; }
.u-flex-1          { flex: 1; }
.u-flex-shrink-0   { flex-shrink: 0; }

/* Typography */
.u-text-xs   { font-size: var(--text-xs); }
.u-text-sm   { font-size: var(--text-sm); }
.u-text-base { font-size: var(--text-base); }
.u-text-lg   { font-size: var(--text-lg); }
.u-text-xl   { font-size: var(--text-xl); }
.u-text-2xl  { font-size: var(--text-2xl); }

.u-font-normal   { font-weight: var(--font-normal); }
.u-font-medium   { font-weight: var(--font-medium); }
.u-font-semibold { font-weight: var(--font-semibold); }
.u-font-bold     { font-weight: var(--font-bold); }

.u-text-primary   { color: var(--text-primary); }
.u-text-secondary { color: var(--text-secondary); }
.u-text-muted     { color: var(--text-muted); }
.u-text-dim       { color: var(--text-dim); }
.u-text-success   { color: var(--color-success); }
.u-text-error     { color: var(--color-error); }
.u-text-warning   { color: var(--color-warning); }
.u-text-brand     { color: var(--color-primary); }

.u-text-center { text-align: center; }
.u-text-left   { text-align: left; }
.u-text-right  { text-align: right; }

.u-nowrap    { white-space: nowrap; }
.u-pre-wrap  { white-space: pre-wrap; }
.u-break-word{ word-break: break-word; }
.u-uppercase { text-transform: uppercase; }

.u-no-underline { text-decoration: none; }

.u-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-medium);
}
.u-link:hover { text-decoration: underline; }

.u-link-muted {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Cross-page "select all N matching" bulk-select banner (Contacts, Calendar,
   Communication Log) — one shared rule instead of each page inlining its own
   copy of the same declarations, so the pill can't drift out of sync between
   pages again. Text defaults to the same muted tone as .team-summary-count
   (the "(20)" page-header counts elsewhere), with only the actionable link
   picking up color — no bold/medium-weight anywhere in here, so "All 20
   selected." and the confirmed "All 20 selected. Clear" read as one uniform
   sentence instead of some words looking heavier than others. */
.select-all-banner {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    background: var(--color-info-subtle, #eff6ff);
    border: 1px solid var(--color-info-border, #bfdbfe);
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: var(--font-normal, 400);
    color: var(--text-secondary);
    white-space: nowrap;
}
.select-all-banner strong { font-weight: var(--font-normal, 400); }

/* "Select all N matching" / "Clear" triggers inside a select-all-matching
   banner — plain text links, not .btn (repurposing .btn classes here caused
   underline artifacts from the button box model fighting text-decoration).
   No font-weight of its own — color+underline alone signal "clickable" so it
   reads at the same weight as the rest of the banner's text. */
.select-all-link {
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}
.select-all-link:hover { color: var(--color-primary-hover); }

/* Spacing — Margin */
.u-m-0  { margin: 0; }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mr-1 { margin-right: 2px; }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }

/* Spacing — Padding */
.u-p-0  { padding: 0; }
.u-p-1  { padding: var(--space-1); }
.u-p-2  { padding: var(--space-2); }
.u-p-3  { padding: var(--space-3); }
.u-p-4  { padding: var(--space-4); }
.px-3,
.u-px-3 {
    padding-left: var(--space-3); padding-right: var(--space-3);
}
.px-4,
.u-px-4 {
    padding-left: var(--space-4); padding-right: var(--space-4);
}
.py-2,
.u-py-2 {
    padding-top: var(--space-2); padding-bottom: var(--space-2);
}
.py-3,
.u-py-3 {
    padding-top: var(--space-3); padding-bottom: var(--space-3);
}

/* Sizing */
.u-w-auto { width: auto; }
.u-w-full { width: 100%; }
.u-w-32   { width: 32px; }
.u-w-70   { width: 70px; }
.u-w-130  { width: 130px; }
.u-min-w-0   { min-width: 0; }
.u-min-w-300 { min-width: 300px; }
.u-max-w-250 { max-width: 250px; }
.u-min-h-180 { min-height: 180px; }
.u-max-h-320 { max-height: 320px; overflow-y: auto; }

/* Icon sizing */
.u-icon-xs  { width: 12px; height: 12px; }
.u-icon-sm  { width: 16px; height: 16px; }
.u-icon-md  { width: 20px; height: 20px; }

.u-icon-xl  { width: 32px; height: 32px; flex-shrink: 0; }
.u-icon-40  { width: 40px; height: 40px; }

/* Borders */
.u-border-b      { border-bottom: 1px solid var(--border-color); }
.u-border-b-light{ border-bottom: 1px solid var(--border-light); }
.u-border-none   { border: none; }
.u-border-l-primary { border-left: 3px solid var(--color-primary); }
.u-border-l-error   { border-left: 3px solid var(--color-error); }

/* Backgrounds */
.u-bg-secondary   { background: var(--bg-secondary); border-radius: var(--radius-md); }
.u-bg-error-soft  {
    background: var(--color-error-light);
    border-left: 3px solid var(--color-error);
    padding: var(--space-2);
    font-size: var(--text-xs);
}

/* Radius */
.u-rounded    { border-radius: var(--radius-md); }
.u-rounded-sm { border-radius: var(--radius-sm); }
.u-rounded-lg { border-radius: var(--radius-lg); }

/* Cursor */
.u-cursor-pointer { cursor: pointer; }
.u-cursor-default { cursor: default; }

/* Overflow */
.u-overflow-hidden { overflow: hidden; }
.u-overflow-y-auto { overflow-y: auto; }

/* Misc */
.u-list-none    { list-style: none; padding: 0; margin: 0; }
.u-no-transform { transform: none !important; }
.u-relative     { position: relative; }
.u-absolute-fill { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* Separator rows */
.u-row-item {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-light);
    align-items: flex-start;
}
.u-row-item:last-child { border-bottom: none; }

.u-row-between {
    padding: var(--space-2) 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
}
.u-row-between:last-child { border-bottom: none; }

.u-row-padded {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
}
.u-row-padded:last-child { border-bottom: none; }

/* Empty / placeholder cells */
.u-empty-cell {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-8);
    color: var(--text-dim);
}
.u-text-center-pad {
    text-align: center;
    padding: var(--space-4);
    color: var(--text-secondary);
}
.u-text-center-pad-lg {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-8);
    color: var(--text-dim);
    font-size: var(--text-sm);
}

/* Step circle — onboarding */
.u-step-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-inverse);
    font-size: var(--text-2xs);
    font-weight: var(--font-semibold);
}
.u-step-circle.done    { background: var(--color-success); }
.u-step-circle.pending { background: var(--border-primary); }

/* Inline nav link */
.u-nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: none;
    text-decoration: none;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: background 0.15s;
}
.u-nav-link:hover, .u-nav-link.active { background: var(--bg-secondary); }

/* Small action button row */
.u-small-action {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-primary);
    text-align: left;
    border-radius: var(--radius-sm);
}
.u-small-action:hover { background: var(--bg-secondary); }

/* Sub labels */
.u-sub-label {
    font-size: var(--text-xs);
    color: var(--text-dim);
    display: block;
    margin-bottom: 4px;
}

/* =========================================================
   COMPONENT LIBRARY — ADDITIONAL CSS
   All component styles live here. Zero inline styles needed.
   ========================================================= */

/* .page-header/.page-header-text consolidated — see "5. CARD COMPONENTS"
   area near the top of this file. .page-title below is a legacy class no
   longer emitted by comp_page_header() (it now emits .page-heading); kept
   only in case something else still references it. */
.page-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}
.page-subtitle {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: var(--space-1) 0 0;
}
.page-header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* Section header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.section-header-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}
.section-header-sub {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 2px 0 0;
}
.section-header-actions { display: flex; align-items: center; gap: var(--space-2); }

/* .empty-state family consolidated — see "9. Empty state component". */

/* Loading state */
.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8);
    color: var(--text-dim);
}
.loading-text { font-size: var(--text-sm); }

/* Spinner */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: comp-spin 0.7s linear infinite;
    flex-shrink: 0;
}
.spinner-sm { width: 14px; height: 14px; }
.spinner-lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes comp-spin { to { transform: rotate(360deg); } }

/* Avatar */
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
    box-shadow: 0 1px 3px rgba(99,102,241,0.3);
    object-fit: cover; /* no-op for the initials <div>; keeps an <img> avatar from stretching */
}
.avatar-sm { width: 28px; height: 28px; font-size: var(--text-xs); }
.avatar-lg { width: 48px; height: 48px; font-size: var(--text-lg); }
.avatar-xl { width: 64px; height: 64px; font-size: var(--text-xl); }

/* Canonical team identity: avatar and name always read as one horizontal unit. */
.team-member-identity {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: var(--space-2, 8px);
    min-width: 0;
    vertical-align: middle;
    white-space: nowrap;
}
.team-member-identity .team-member-avatar {
    flex: 0 0 auto;
    border-radius: 50% !important;
}
.team-member-identity .team-member-name {
    min-width: 0;
    font-weight: var(--font-semibold, 600);
    color: var(--text-primary, #475569);
}

/* .alert / .alert-info/-success/-warning/-error consolidated — see
   "9. ALERT COMPONENTS" near the top of this file. */
.alert-dismiss {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-xl);
    color: inherit;
    opacity: 0.6;
    line-height: 1;
    padding: 2px 4px;
}
.alert-dismiss:hover { opacity: 1; }

/* Form group */
.form-group    { margin-bottom: var(--space-4); }
.form-required { color: var(--color-error); margin-left: 2px; }
.form-hint     { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-tertiary); }

/* Progress bar */
.progress-bar-wrap { display: flex; flex-direction: column; gap: var(--space-1); }
.progress-label    { font-size: var(--text-xs); color: var(--text-secondary); font-weight: var(--font-medium); }
.progress-bar      { height: 8px; background: var(--bg-secondary); border-radius: 100px; overflow: hidden; }
.progress-bar-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 100px;
    transition: width 0.3s ease;
}
.progress-bar-fill.success { background: var(--color-success); }
.progress-bar-fill.warning { background: var(--color-warning); }
.progress-bar-fill.error   { background: var(--color-error); }

/* SVG donut */
.donut-wrap { width: 40px; height: 40px; position: relative; }
.donut-svg  { width: 40px; height: 40px; transform: rotate(-90deg); }

/* Toggle group */
.toggle-group { display: inline-flex; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; }
.toggle-group-btn {
    background: var(--bg-primary);
    border: none;
    padding: 5px 14px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s;
}
.toggle-group-btn:last-child { border-right: none; }
.toggle-group-btn.active { background: var(--color-primary); color: var(--text-inverse); }
.toggle-group-btn:hover:not(.active) { background: var(--bg-secondary); }

/* Divider */
.divider { border: none; border-top: 1px solid var(--border-color); margin: var(--space-4) 0; }

/* =========================================================
   404 ERROR PAGE
   ========================================================= */
.error-page-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 100%);
}
.error-card {
    background: var(--bg-elevated);
    border-radius: 16px;
    padding: 3rem;
    text-align: center;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(71, 85, 105, 0.2);
}
.error-icon    { font-size: 5rem; color: var(--color-primary); margin-bottom: 1rem; }
.error-code    { font-size: 6rem; font-weight: var(--font-extrabold); color: var(--text-primary); line-height: 1; margin-bottom: 0.5rem; }
.error-title   { font-size: var(--text-3xl); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: 1rem; }
.error-message { color: var(--text-secondary); margin-bottom: 2rem; }

/* =========================================================
   SIGNUP PAGE
   ========================================================= */
.features-list {
    background: var(--color-surface, var(--bg-secondary));
    border: 1px solid var(--color-border, var(--border-color));
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.features-list h4 { margin-bottom: 0.5rem; color: var(--text-primary); font-size: var(--text-base); }
.features-list ul { list-style: none; padding: 0; margin: 0; }
.features-list li {
    padding: 0.25rem 0;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-base);
}
.features-list li::before { content: "\2713"; color: var(--color-success); font-weight: bold; }

/* =========================================================
   BILLING DASHBOARD — TWIN COLUMN LAYOUT
   ========================================================= */
.dash-twin-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    align-items: start;
}
.dash-twin-card { display: flex !important; flex-direction: column; margin: 0 !important; padding: 0; }
.dash-twin-card:hover { transform: none !important; }
.dash-twin-card .card-header.card-header-flex {
    min-height: 52px;
    box-sizing: border-box;
    padding: var(--space-4) var(--space-6);
}
@media (max-width: 768px) { .dash-twin-row { grid-template-columns: 1fr; } }

/* .kpi-row/.kpi-tile*: see "ADMIN — KPI TILES (dashboard overview)" later
   in this file — this was an earlier, fully-superseded duplicate. */

/* ── Onboarding Checklist Card ─────────────────────── */
.onboard-card { background: var(--bg-elevated); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4); transition: opacity 0.25s, transform 0.25s; }
.onboard-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }

.onboard-card-dismiss { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: var(--text-xl); line-height: 1; padding: 2px 6px; border-radius: var(--radius-sm); transition: background 0.15s; }
.onboard-card-dismiss:hover { background: var(--bg-hover); color: var(--text-secondary); }

.onboard-step { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--bg-subtle, rgba(71, 85, 105, 0.04)); color: var(--text-secondary); font-size: var(--text-sm); transition: background 0.15s; }
.onboard-step:hover { background: var(--bg-hover); }
.onboard-step-done { color: var(--text-dim); }
.onboard-step-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--bg-hover); }
.onboard-step-done .onboard-step-icon { background: rgba(16,185,129,0.12); color: var(--color-success, var(--color-success)); }
.onboard-step-label { flex: 1; }
.onboard-step-done .onboard-step-label { text-decoration: line-through; opacity: 0.6; }
.onboard-step-cta { font-size: var(--text-xs); color: var(--color-primary); font-weight: var(--font-medium); white-space: nowrap; }

/* .ai-action-*: see "ADMIN — AI ACTION CARDS" later in this file. Note:
   currently not referenced by any template (dead), kept only in that one
   canonical spot rather than deleted outright. */

/* .appt-view-toggle/.cal-*: user calendar.php's admin-labeled calendar
   grid was defined twice (this was the earlier, incomplete version —
   missing item-time/item-title spans, confirmed/no-show/task item
   variants, hover feedback, and the reminders sidebar that the later,
   richer "ADMIN — CALENDAR / APPOINTMENTS" definition further down this
   file has and calendar.php actually uses). Removed as dead/superseded. */

/* =========================================================
   ADMIN — SEQUENCES
   ========================================================= */
.seq-card-header  { display: flex; justify-content: space-between; align-items: center; }
.seq-card-badges  { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.seq-card-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.seq-step-row     { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) {
    .seq-card-header { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .seq-card-actions { width: 100%; }
    .seq-card-badges { margin-top: var(--space-1); }
    .seq-step-row .form-control.seq-step-instruction { min-width: 100% !important; flex-basis: 100%; }
}

/* =========================================================
   LANDING PAGE
   ========================================================= */
:root {
    --brand: #6366f1;
    --purple: #4f46e5;
    --brand-light: rgba(99,102,241,0.10);
    --brand-glow: rgba(99,102,241,0.15);
    --landing-accent: #f59e0b;
    --landing-accent-light: rgba(245,158,11,0.10);
    --landing-dark: #475569;
    --landing-dark2: #475569;
    --gray-50:  var(--color-gray-50);
    --gray-100: var(--color-gray-100);
    --gray-200: var(--color-gray-200);
    --gray-300: var(--color-gray-300);
    --gray-400: var(--color-gray-400);
    --gray-500: var(--color-gray-500);
    --gray-600: var(--color-gray-600);
    --gray-900: var(--color-gray-900);
}

.hero { padding: clamp(72px, 10vh, 140px) 0 clamp(40px, 5.5vh, 80px); position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, var(--brand-glow) 0%, transparent 70%); pointer-events: none; }
.hero::after  { content: ''; position: absolute; bottom: -100px; left: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(245,158,11,0.08) 0%, transparent 70%); pointer-events: none; }

.hero-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.hero-badge  { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--brand-light); color: var(--brand); border-radius: 100px; font-size: var(--text-sm); font-weight: var(--font-semibold); margin-bottom: 1rem; border: 1px solid rgba(99,102,241,0.15); }
.hero-badge .pulse-dot { width: 8px; height: 8px; background: var(--success); border-radius: 50%; animation: lpulse 2s infinite; }
@keyframes lpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } }

.hero h1 { font-size: 3.5rem; font-weight: var(--font-black); line-height: 1.1; color: var(--gray-900); margin-bottom: 1.25rem; letter-spacing: -0.03em; }
.hero h1 .gradient-text { background: linear-gradient(135deg, var(--brand), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero p.hero-sub { font-size: var(--text-xl); color: var(--gray-500); line-height: 1.7; margin-bottom: 1.25rem; max-width: 520px; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.hero-trust { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 0.4rem; font-size: var(--text-sm); color: var(--gray-500); }
.trust-item svg { width: 18px; height: 18px; stroke: var(--success); fill: none; }
.hero-trusted { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: var(--text-sm); color: var(--gray-500); }
.hero-trusted-count { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--brand); line-height: 1; }
.hero-trusted-label { color: var(--gray-500); }
.hero-visual { position: relative; }
.hero-phone-card { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl), var(--shadow-glow, 0 0 40px rgba(99,102,241,0.1)); padding: 2rem; border: 1px solid var(--gray-100); position: relative; overflow: hidden; }
.hero-phone-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brand), var(--purple), var(--landing-accent)); }

.flow-step  { display: flex; align-items: center; gap: 1rem; padding: 14px 16px; border-radius: var(--radius); margin-bottom: 12px; transition: all 0.3s; background: var(--gray-50); border: 1px solid var(--gray-100); }
.flow-step:hover { transform: translateX(4px); border-color: var(--brand-light); background: var(--color-white); }
.flow-icon  { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--text-xl); }
.flow-icon.phone   { background: linear-gradient(135deg,rgba(99,102,241,0.10),rgba(99,102,241,0.20)); color: var(--brand); }
.flow-icon.ai      { background: linear-gradient(135deg,rgba(99,102,241,0.08),rgba(99,102,241,0.15)); color: var(--purple); }
.flow-icon.webhook { background: rgba(16,185,129,0.10); color: var(--color-success); }
.flow-icon.crm     { background: linear-gradient(135deg,rgba(245,158,11,0.10),rgba(245,158,11,0.25)); color: var(--color-warning); }
.flow-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-gray-800); }

.flow-arrow { text-align: center; color: var(--gray-300); margin: -4px 0; font-size: var(--text-2xl); }
.live-counter { position: absolute; top: 1.5rem; right: 1.5rem; display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: rgba(16,185,129,0.1); border-radius: 100px; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--success); }
.live-counter .blink { width: 6px; height: 6px; background: var(--success); border-radius: 50%; animation: lpulse 1.5s infinite; }

.logo-ticker { padding: 60px 0 40px; border-bottom: 1px solid var(--gray-100); }
.ticker-label { text-align: center; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.5rem; }
.ticker-logos { display: flex; align-items: center; justify-content: center; gap: 3rem; flex-wrap: wrap; }
.ticker-logos img { height: 28px; opacity: 0.5; filter: grayscale(100%); transition: all 0.3s; }
.ticker-logos img:hover { opacity: 0.8; filter: grayscale(0%); }

.section { padding: 80px 0; }
.section-label { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--brand); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; }
.section-title { font-size: var(--text-5xl); font-weight: var(--font-black); color: var(--gray-900); text-align: center; margin-bottom: 1rem; letter-spacing: -0.03em; line-height: 1.1; }
.section-sub   { font-size: var(--text-xl); color: var(--gray-500); text-align: center; max-width: 560px; margin: 0 auto 3.5rem; line-height: 1.6; }

.steps-grid  { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; position: relative; }
.steps-grid::before { content: ''; position: absolute; top: 28px; left: calc(12.5% + 28px); right: calc(12.5% + 28px); height: 2px; background: linear-gradient(90deg,var(--brand),var(--purple)); opacity: 0.25; }
.step-card   { text-align: center; position: relative; }
.step-number { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,var(--brand),var(--purple)); color: var(--text-inverse); font-size: var(--text-2xl); font-weight: var(--font-extrabold); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: 0 8px 24px rgba(99,102,241,0.3); }
.step-card h3  { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--gray-900); margin-bottom: 0.5rem; }
.step-card p   { font-size: var(--text-base); color: var(--gray-500); line-height: 1.6; }

.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; }
.stat-box   { text-align: center; padding: 2rem; background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--gray-100); }
.stat-value { font-size: var(--text-5xl); font-weight: var(--font-black); color: var(--brand); line-height: 1; margin-bottom: 0.4rem; }
.stat-label { font-size: var(--text-base); color: var(--gray-500); }

.integrations-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.integration-pill  { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--color-white); border-radius: 10px; border: 1px solid var(--gray-100); box-shadow: 0 1px 4px rgba(71, 85, 105, 0.04); transition: all 0.25s; }
.integration-pill:hover { border-color: var(--brand-light); box-shadow: 0 4px 16px rgba(99,102,241,0.08); transform: translateY(-1px); }
.integration-icon  { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: var(--text-2xl); flex-shrink: 0; }
.integration-name  { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-gray-800); }
.integration-type  { font-size: var(--text-xs); color: var(--gray-400); }

.pricing-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; align-items: stretch; }
.price-card    { background: var(--color-white); border: 1px solid var(--gray-200); border-radius: 16px; padding: 2rem; display: flex; flex-direction: column; position: relative; transition: all 0.3s; }
.price-card:hover { border-color: var(--brand-light); box-shadow: var(--shadow-xl); }
.price-card.featured,.price-card-featured { border-color: var(--brand); box-shadow: var(--shadow-xl),0 0 0 1px var(--brand); }
.featured-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg,var(--brand),var(--purple)); color: var(--text-inverse); font-size: var(--text-xs); font-weight: var(--font-bold); padding: 4px 14px; border-radius: 100px; text-transform: uppercase; letter-spacing: var(--tracking-widest); white-space: nowrap; }
.price-name   { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-gray-800); margin-bottom: 0.5rem; }

.price-amount { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 0.25rem; }
.price-currency { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-gray-700); line-height: 2; }
.price-number   { font-size: 3.5rem; font-weight: var(--font-black); color: var(--gray-900); line-height: 1; letter-spacing: -0.03em; }
.price-desc,
.price-period {
    font-size: var(--text-sm); color: var(--gray-500); margin-bottom: 1.5rem;
}
.price-features { list-style: none; padding: 0; margin: 0 0 2rem; flex: 1; }
.price-features li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: var(--text-base); color: var(--gray-600); border-bottom: 1px solid var(--gray-100); }
.price-features li:last-child { border-bottom: none; }
.price-features li svg { width: 16px; height: 16px; stroke: var(--success); fill: none; flex-shrink: 0; margin-top: 2px; }
.pricing-footnote { text-align: center; margin-top: 1.5rem; font-size: var(--text-sm); color: var(--gray-400); }

/* ── AI Advantage Comparison (replaces pricing-compare-bar) ── */
.ai-advantage { margin: 2.5rem 0 0.5rem; }
.ai-adv-intro { text-align: center; margin-bottom: 1.75rem; }
.ai-adv-title { font-size: var(--text-2xl); font-weight: var(--font-extrabold); color: var(--gray-900); letter-spacing: -0.03em; margin: 0 0 0.35rem; }
.ai-adv-sub { font-size: var(--text-md); color: var(--gray-500); margin: 0; }

/* Comparison table */
.ai-adv-table { border: 1px solid var(--gray-200); border-radius: 14px; overflow: hidden; margin-bottom: 1.5rem; background: var(--color-white); }
.ai-adv-thead { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
.ai-adv-th-feature, .ai-adv-th-legacy, .ai-adv-th-us { padding: 0.85rem 1.25rem; font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.07em; display: flex; align-items: center; gap: 6px; }
.ai-adv-th-feature { color: var(--gray-400); }
.ai-adv-th-legacy { color: var(--color-error); background: rgba(244,63,94,0.06); border-left: 1px solid var(--gray-200); justify-content: center; }
.ai-adv-th-legacy svg { stroke: var(--color-error); }
.ai-adv-th-us { color: var(--color-success); background: rgba(16,185,129,0.06); border-left: 1px solid var(--gray-200); justify-content: center; }
.ai-adv-th-us svg { stroke: var(--color-success); }

.ai-adv-row { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--gray-100); transition: background 0.15s; }
.ai-adv-row:last-child { border-bottom: none; }
.ai-adv-row:hover { background: var(--gray-50); }
.ai-adv-row-price { background: var(--gray-50); }
.ai-adv-row-price:hover { background: rgba(255, 255, 255, 0.04); }

.ai-adv-td-feature { padding: 0.85rem 1.25rem; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-gray-700); display: flex; align-items: center; }
.ai-adv-td-legacy { padding: 0.85rem 1.25rem; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--border-primary); background: var(--bg-primary); }
.ai-adv-td-us { padding: 0.85rem 1.25rem; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--border-primary); background: rgba(16, 185, 129, 0.05); }

.adv-no { font-size: var(--text-sm); color: var(--color-error); display: flex; align-items: center; gap: 6px; font-weight: var(--font-medium); }
.adv-no::before { content: '✕'; font-size: var(--text-xs); font-weight: var(--font-extrabold); flex-shrink: 0; }
.adv-yes { font-size: var(--text-sm); color: var(--color-success); display: flex; align-items: center; gap: 6px; font-weight: var(--font-semibold); }
.adv-yes::before { content: '✓'; font-size: var(--text-sm); font-weight: var(--font-extrabold); flex-shrink: 0; }
.adv-price-no { font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--color-error); }
.adv-price-no small, .adv-price-yes small { font-size: var(--text-xs); font-weight: var(--font-medium); margin-left: 2px; opacity: 0.8; }
.adv-price-yes { font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--color-success); }

/* Switch & Save Cards */
.switch-save-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.switch-save-card { background: var(--bg-elevated); border: 1px solid var(--border-primary); border-radius: 12px; padding: 1.1rem 1rem; text-align: center; position: relative; overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; }
.switch-save-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand), var(--color-primary-hover)); }
.switch-save-card:hover { box-shadow: 0 6px 24px rgba(99,102,241,0.12); transform: translateY(-2px); }
.ssc-plan { font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand); margin-bottom: 0.65rem; }
.ssc-price-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.ssc-ours { font-size: var(--text-2xl); font-weight: var(--font-extrabold); color: var(--gray-900); line-height: 1; }
.ssc-dollar { font-size: var(--text-sm); vertical-align: super; font-weight: var(--font-bold); }
.ssc-mo { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--gray-500); margin-left: 1px; }
.ssc-vs { font-size: var(--text-2xs); font-weight: var(--font-bold); color: var(--gray-400); text-transform: uppercase; letter-spacing: var(--tracking-wider); padding: 2px 5px; border: 1px solid var(--gray-200); border-radius: 4px; }
.ssc-theirs { font-size: var(--text-md); font-weight: var(--font-bold); color: var(--color-error); text-decoration: line-through; text-decoration-color: rgba(244,63,94,0.25); opacity: 0.85; }
.ssc-note { font-size: var(--text-xs); color: var(--gray-400); line-height: 1.45; }

@media (max-width: 900px) { .switch-save-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
    .switch-save-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .ai-adv-thead { grid-template-columns: 1fr 1fr; }
    .ai-adv-th-feature { display: none; }
    .ai-adv-row { grid-template-columns: 1fr 1fr; }
    .ai-adv-td-feature { display: none; }
}

.btn-hero { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 10px; font-weight: var(--font-bold); font-size: var(--text-lg); text-decoration: none; transition: all 0.25s; cursor: pointer; border: none; }
.btn-hero-primary { background: var(--brand); color: var(--text-inverse); box-shadow: 0 4px 20px rgba(99,102,241,0.35); }
.btn-hero-primary:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(99,102,241,0.4); }
.btn-hero-outline { background: transparent; color: var(--color-gray-700); border: 2px solid var(--gray-200); }
.btn-hero-outline:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.btn-plan { display: block; width: 100%; padding: 13px; background: var(--brand); color: var(--text-inverse); border: none; border-radius: 10px; font-weight: var(--font-bold); font-size: var(--text-md); text-align: center; text-decoration: none; cursor: pointer; transition: all 0.25s; }
.btn-plan:hover { background: var(--brand-dark); transform: translateY(-1px); }
.btn-plan.outline { background: transparent; color: var(--brand); border: 2px solid var(--brand); }
.btn-plan.outline:hover { background: var(--brand); color: var(--text-inverse); }
.billing-toggle { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 3rem; }
.billing-toggle span { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--gray-600); }
.billing-toggle span.active { color: var(--gray-900); }
.billing-toggle-switch { width: 48px; height: 26px; background: var(--brand); border-radius: 100px; position: relative; cursor: pointer; border: none; transition: background 0.2s; }
.billing-toggle-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--color-white); border-radius: 50%; transition: transform 0.2s; }
.billing-toggle-switch.monthly::after { transform: translateX(0); }
.billing-toggle-switch.annual::after  { transform: translateX(22px); }
.save-badge { background: rgba(16, 185, 129, 0.12); color: var(--color-success); font-size: var(--text-xs); font-weight: var(--font-bold); padding: 2px 10px; border-radius: 100px; border: 1px solid rgba(16, 185, 129, 0.25); }

.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.diff-col  { padding: 2rem; border-radius: 16px; }
.diff-col.bad  { background: rgba(244, 63, 94, 0.10);  border: 1px solid rgba(244, 63, 94, 0.25); }
.diff-col.good { background: rgba(16, 185, 129, 0.10); border: 1px solid rgba(16, 185, 129, 0.25); }
.diff-col h3   { font-size: var(--text-xl); font-weight: var(--font-extrabold); margin-bottom: 1.25rem; }
.diff-col.bad h3  { color: var(--color-error, var(--color-error)); }
.diff-col.good h3 { color: var(--color-success); }
.diff-list { list-style: none; padding: 0; margin: 0; }
.diff-list li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: var(--text-base); color: var(--color-gray-700); }
.diff-list li svg { width: 18px; height: 18px; fill: none; flex-shrink: 0; }

.cta-section { padding: 100px 0; background: linear-gradient(135deg,var(--brand) 0%,var(--purple) 100%); text-align: center; position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.cta-section h2 { font-size: 3rem; font-weight: var(--font-black); color: var(--text-inverse); margin-bottom: 1rem; letter-spacing: -0.03em; position: relative; }
.cta-section p { font-size: var(--text-xl); color: rgba(255,255,255,0.8); margin-bottom: 2.5rem; max-width: 500px; margin-left: auto; margin-right: auto; position: relative; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; }

.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.testimonial-card  { background: var(--color-white); border-radius: 16px; padding: 1.75rem; border: 1px solid var(--gray-100); box-shadow: 0 2px 8px rgba(71, 85, 105, 0.04); }
.testimonial-stars { color: var(--landing-accent); font-size: var(--text-lg); margin-bottom: 0.75rem; }
.testimonial-text  { font-size: var(--text-md); color: var(--gray-600); line-height: 1.7; margin-bottom: 1.25rem; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,var(--brand),var(--purple)); display: flex; align-items: center; justify-content: center; color: var(--text-inverse); font-weight: var(--font-bold); font-size: var(--text-sm); flex-shrink: 0; }
.testimonial-name  { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--gray-900); }
.flow-desc,
.testimonial-role {
    font-size: var(--text-xs); color: var(--gray-500);
}

.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--gray-200); }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 0; cursor: pointer; }
.faq-question h4 { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--gray-900); }
.faq-chevron { transition: transform 0.3s; color: var(--gray-400); flex-shrink: 0; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.call-detail-content,
.faq-answer {
    overflow: hidden; max-height: 0; transition: max-height 0.35s ease;
}
.faq-answer p { padding-bottom: 1.25rem; color: var(--gray-600); font-size: var(--text-md); line-height: 1.7; }

.feature-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-bottom: 5rem; }
.feature-showcase:last-child { margin-bottom: 0; }
.feature-showcase.reverse { direction: rtl; }
.feature-showcase.reverse > * { direction: ltr; }
.feature-showcase-text h3 { font-size: 1.75rem; font-weight: var(--font-extrabold); color: var(--gray-900); margin-bottom: 0.75rem; letter-spacing: -0.02em; }
.feature-showcase-text p  { font-size: var(--text-lg); color: var(--gray-500); line-height: 1.7; margin-bottom: 1.25rem; }
.feature-showcase-text .section-label { text-align: left; justify-content: flex-start; }
.feature-showcase-text ul { list-style: none; padding: 0; margin: 0; }
.feature-showcase-text ul li { padding: 5px 0; font-size: var(--text-md); color: var(--gray-600); display: flex; align-items: center; gap: 10px; }
.feature-showcase-text ul li svg { width: 18px; height: 18px; stroke: var(--success); fill: none; flex-shrink: 0; }
.feature-showcase-img { border-radius: 14px; box-shadow: var(--shadow-xl),0 0 40px rgba(99,102,241,0.06); border: 1px solid var(--gray-200); overflow: hidden; transition: all 0.3s; background:#475569; isolation:isolate; }
.feature-showcase-img:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl),0 0 60px rgba(99,102,241,0.12); }
.feature-showcase-img img { display: block; width: 100%; height: auto; mix-blend-mode:screen; }

@media (max-width: 1024px) {
    .hero h1 { font-size: var(--text-5xl); }
    .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
    .hero-visual { max-width: 500px; margin: 0 auto; }
    .steps-grid { grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
    .steps-grid::before { display: none; }
    .pricing-grid { grid-template-columns: repeat(2,1fr); }
    .pricing-grid .price-card:last-child { grid-column: span 2; max-width: 600px; justify-self: center; width: 100%; }
    .diff-grid { grid-template-columns: 1fr; }
    .feature-showcase { grid-template-columns: 1fr; gap: 2.5rem; }
    .feature-showcase.reverse { direction: ltr; }
}
@media (max-width: 768px) {
    .hero { padding: 120px 0 60px; }
    .hero h1 { font-size: 2.25rem; }
    .hero p.hero-sub { font-size: var(--text-lg); }
    .section { padding: 60px 0; }
    .section-title { font-size: var(--text-4xl); }
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-grid .price-card:last-child { grid-column: span 1; max-width: none; }
    .steps-grid { grid-template-columns: 1fr 1fr; }
    .stats-grid { grid-template-columns: repeat(2,1fr); }
    .integrations-grid { grid-template-columns: repeat(2,1fr); }
    .testimonials-grid { grid-template-columns: 1fr; }
    .feature-showcase-text h3 { font-size: var(--text-3xl); }
    .feature-showcase-img { max-width: 500px; margin: 0 auto; }
    .cta-section h2 { font-size: 2.25rem; }
}
@media (max-width: 480px) {
    .hero h1 { font-size: 1.85rem; }
    .hero-actions { flex-direction: column; }
    .btn-hero { justify-content: center; }
    .steps-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .integrations-grid { grid-template-columns: 1fr; }
    .feature-showcase-text h3 { font-size: var(--text-2xl); }
    .cta-section h2 { font-size: 1.75rem; }
}

/* =========================================================
   LEGAL / PRIVACY / TERMS PAGES
   ========================================================= */
.landing-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.nav-inner   { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav-logo img{ height: 28px; }
.nav-links   { display: flex; align-items: center; gap: 2rem; }
.nav-links a { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--gray-600, var(--text-secondary)); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--brand); }
.nav-cta  { display: inline-flex; align-items: center; gap: 0.5rem; padding: 8px 20px; background: var(--brand); color: var(--text-inverse) !important; border-radius: 8px; font-weight: var(--font-semibold); font-size: var(--text-base); transition: all 0.2s; }
.nav-cta:hover  { background: var(--brand-dark); transform: translateY(-1px); }
.nav-login { color: var(--gray-500, var(--text-secondary)) !important; }
.mobile-nav-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.mobile-nav-btn svg { width: 24px; height: 24px; stroke: var(--color-gray-700); }
.mobile-nav-menu { display: none; }
@media (max-width: 768px) {
    .nav-links { display: none; }
    .mobile-nav-btn { display: block; }
    .mobile-nav-menu.open { display: flex; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.98); backdrop-filter: blur(10px); flex-direction: column; padding: 2rem; gap: 0.5rem; z-index: 999; }
    .mobile-nav-menu.open a { display: block; padding: 12px 16px; font-size: var(--text-lg); font-weight: var(--font-medium); color: var(--color-gray-700); text-decoration: none; border-radius: 8px; }
    .mobile-nav-menu.open a:hover { background: var(--gray-50,#f8fafc); }
    .mobile-nav-menu.open .nav-cta { background: var(--brand); color: var(--text-inverse) !important; text-align: center; justify-content: center; margin-top: 1rem; }
}

.legal-content { max-width: 800px; margin: 0 auto; padding: 120px 24px 80px; }
.legal-content h1 { font-size: var(--text-5xl); font-weight: var(--font-extrabold); color: var(--text-primary); margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.legal-date { color: var(--gray-400, var(--text-dim)); font-size: var(--text-md); margin-bottom: 2.5rem; }
.legal-content p  { color: var(--gray-600, var(--text-secondary)); line-height: 1.8; margin-bottom: 1rem; }
.legal-content h3 { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); margin-top: 2.5rem; margin-bottom: 0.75rem; }
.legal-content ul { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.legal-content ul li { color: var(--gray-600, var(--text-secondary)); line-height: 1.8; margin-bottom: 0.25rem; }
.legal-content a:hover { text-decoration: underline; }
.legal-content strong { color: var(--text-primary); }

.landing-footer { background: var(--landing-dark2,#475569); color: var(--gray-400, var(--text-dim)); padding: 60px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.footer-brand-text { font-size: var(--text-sm); line-height: 1.7; margin-top: 1rem; color: var(--gray-500, var(--text-secondary)); max-width: 320px; }
.footer-col h4 { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--text-inverse); text-transform: uppercase; letter-spacing: var(--tracking-widest); margin-bottom: 1rem; }
.footer-col a  { display: block; font-size: var(--text-sm); color: var(--gray-500, var(--text-secondary)); text-decoration: none; padding: 4px 0; transition: color 0.2s; }
.footer-col a:hover { color: var(--text-inverse); }
.footer-bottom { border-top: 1px solid var(--text-primary); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); }
.footer-bottom a { color: var(--gray-500, var(--text-secondary)); text-decoration: none; }
.footer-bottom a:hover { color: var(--text-inverse); }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; gap: 0.75rem; text-align: center; }
    .legal-content { padding: 100px 20px 60px; }
    .legal-content h1 { font-size: var(--text-4xl); }
}
@media (max-width: 480px) { .legal-content h1 { font-size: var(--text-3xl); } }

/* =========================================================
   STANDALONE ERROR / VERIFY PAGES (router.php inline pages)
   ========================================================= */
.standalone-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background: var(--bg-secondary);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.standalone-box {
    background: var(--bg-elevated);
    padding: 40px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    max-width: 440px;
    width: 90%;
}
.standalone-box h1 { color: var(--text-primary); font-size: var(--text-3xl); margin-bottom: 10px; }
.standalone-box p  { color: var(--text-secondary); margin-bottom: 20px; }
.standalone-box a,
.standalone-box button.standalone-btn {
    background: var(--color-primary);
    color: var(--text-inverse);
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    border: none;
    cursor: pointer;
    font-size: var(--text-base);
}

/* =========================================================
   BILLING DASHBOARD — KPI GRID & CARDS
   ========================================================= */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    align-items: start;
    grid-auto-rows: minmax(0, auto);
}
@media (max-width: 1000px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .kpi-card { padding: var(--space-2) var(--space-3); }
    .kpi-value { font-size: var(--text-xl); }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table { min-width: 500px; }
    .data-table th, .data-table td { padding: var(--space-2); font-size: var(--text-sm); white-space: nowrap; }
    .period-selector { flex-wrap: wrap; gap: var(--space-1); }
    #period-select { min-width: 130px; }
}
.kpi-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    box-shadow: var(--shadow-xs);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    position: relative;
}
.kpi-tip {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--text-dim, #9ca3af);
    color: var(--text-dim, #9ca3af);
    font-size: 9px;
    font-weight: 700;
    font-style: normal;
    line-height: 11px;
    text-align: center;
    cursor: default;
    z-index: 2;
    opacity: 0.45;
    transition: opacity 0.15s;
    letter-spacing: 0;
    text-transform: none;
    user-select: none;
}
.kpi-tip:hover { opacity: 1; }
.kpi-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 7px);
    right: -4px;
    background: #475569;
    color: #f4f4f5;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.55;
    white-space: normal;
    width: 190px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 1000;
    text-align: left;
    box-shadow: 0 4px 16px rgba(71, 85, 105, 0.28);
}
.kpi-tip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    right: 3px;
    border: 5px solid transparent;
    border-top-color: #475569;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 1000;
}
.kpi-tip:hover::after,
.kpi-tip:hover::before { opacity: 1; }
.kpi-card.highlight, .kpi-card.success, .kpi-card.warning, .kpi-card.danger {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    color: inherit;
}
.kpi-icon { width: 32px; height: 32px; margin-bottom: var(--space-2); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: rgba(99,102,241,0.1); }
.kpi-icon svg { width: 16px; height: 16px; stroke: var(--color-primary); stroke-width: 2; fill: none; }
.kpi-card.highlight .kpi-icon { background: rgba(99,102,241,0.1); }
.kpi-card.highlight .kpi-icon svg { stroke: var(--color-primary); }
.kpi-value { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-primary); line-height: 1.2; }
.kpi-card.highlight .kpi-value { color: var(--color-primary); }
.kpi-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-secondary); margin-top: var(--space-1); }
.kpi-card.highlight .kpi-label { color: var(--text-secondary); }
.kpi-subtitle { font-size: var(--text-sm); color: var(--text-dim); margin-top: var(--space-1); }
.kpi-card.highlight .kpi-subtitle { color: var(--text-dim); }
/* Featured kpi-card: for the single most important metric in a row of otherwise
   equal-weight kpi-cards (e.g. ai-logs.php's Est. Cost). */
.kpi-card-featured { grid-column: span 2; }
.kpi-card-featured .kpi-icon { width: 40px; height: 40px; }
.kpi-card-featured .kpi-icon svg { width: 20px; height: 20px; }
.kpi-card-featured .kpi-value { font-size: 2.25rem; }
@media(max-width:479px) { .kpi-card-featured { grid-column: span 2; } }
/* Alert kpi-card: tints the whole card, not just its icon, for a count that
   represents risk needing action (e.g. re-dnc.php's compliance-flagged
   numbers) rather than a neutral stat equal in weight to its neighbor. */
.kpi-card-alert { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.3); }
.kpi-card-alert .kpi-value { color: #d97706; }
.kpi-card-link { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.kpi-card-link:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(71, 85, 105, 0.08); }
.kpi-drill { text-decoration: none; color: inherit; border-radius: var(--radius-sm); padding: 1px 4px; margin: 0 1px; transition: background 0.15s ease, opacity 0.15s ease; cursor: pointer; }
.kpi-drill:hover { background: rgba(71, 85, 105, 0.07); text-decoration: underline; }
.kpi-drill.stat-in { color: var(--color-primary); }
.kpi-drill.stat-out { color: var(--color-error); }
.kpi-drill.stat-in:hover, .kpi-drill.stat-out:hover { opacity: 0.8; }
.kpi-drill.db-stat-in { color: var(--color-success); }
.kpi-drill.db-stat-out { color: var(--text-secondary); }
.kpi-drill.db-stat-missed { color: var(--color-error); }
.progress-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-sm); transition: width 0.3s; }
.progress-fill.success { background: var(--color-success); }
.progress-fill.warning { background: var(--color-warning); }
.progress-fill.danger  { background: var(--color-error); }
.stat-badge { display: inline-block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-full, 999px); font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; }
.stat-badge.success { background: rgba(16,185,129,0.15); color: var(--color-success); }
.stat-badge.info    { background: rgba(99,102,241,0.15); color: var(--color-primary); }
.stat-badge.warning { background: rgba(245,158,11,0.15); color: var(--color-warning); }
.stat-badge.danger  { background: rgba(244,63,94,0.15); color: var(--color-error); }
.period-selector { display: flex; gap: var(--space-1); margin-bottom: 1rem; flex-wrap: wrap; }
.kpi-loading { opacity: 0.5; pointer-events: none; }

/* =========================================================
   ADMIN — KPI TILES (dashboard overview)
   ========================================================= */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); margin-bottom:var(--space-4); }
.kpi-tile { background:var(--bg-elevated); border:1px solid var(--border-primary); border-radius:var(--radius-lg); padding:var(--space-4); text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-1); }
.kpi-tile-value { font-size:var(--text-2xl); font-weight:var(--font-bold); color:var(--text-primary); line-height:1; }
.kpi-tile-label { font-size:var(--text-xs); color:var(--text-secondary); font-weight:var(--font-medium); }
.kpi-tile-sub { font-size:var(--text-2xs); color:var(--text-dim); }
.kpi-tile-icon { width:32px; height:32px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-1); }
.kpi-tile-icon.blue   { background:rgba(99,102,241,0.12); color:var(--color-primary); }
.kpi-tile-icon.green  { background:rgba(16,185,129,0.12); color:var(--color-success); }
.kpi-tile-icon.purple { background:rgba(99,102,241,0.12); color: var(--color-primary); }
.kpi-tile-icon.orange { background:rgba(245,158,11,0.12); color:var(--color-warning); }
@media(max-width:768px) { .kpi-row { grid-template-columns:repeat(2,1fr); } }
@media(max-width:479px) { .kpi-row { grid-template-columns:1fr 1fr; gap:var(--space-2); } .kpi-tile { padding:var(--space-3); } }

/* Featured KPI tile: wider, left-aligned, for the single most important metric in a row (e.g. MRR) */
.kpi-tile-featured { grid-column: span 2; flex-direction: row; text-align: left; justify-content: flex-start; gap: var(--space-3); }
.kpi-tile-featured .kpi-tile-icon { width: 44px; height: 44px; margin-bottom: 0; flex-shrink: 0; }
.kpi-tile-featured .kpi-tile-value { font-size: 1.75rem; }
@media(max-width:479px) { .kpi-tile-featured { flex-direction: column; text-align: center; } }

/* 1 featured (double-width) + 4 regular tile row (admin dashboard overview).
   A dedicated class instead of an inline grid-template-columns override, since
   an inline style can't be overridden by a breakpoint's class rule and left
   this row unresponsive on narrow screens even before the featured tile existed. */
.admin-kpi-row-6 { grid-template-columns: repeat(6, 1fr); }
@media(max-width:900px) { .admin-kpi-row-6 { grid-template-columns: repeat(3, 1fr); } .admin-kpi-row-6 .kpi-tile-featured { grid-column: span 3; } }
@media(max-width:560px) { .admin-kpi-row-6 { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } .admin-kpi-row-6 .kpi-tile-featured { grid-column: span 2; } .admin-kpi-row-6 .kpi-tile { padding: var(--space-3); } }

/* Status KPI tile: for a health/rate metric, shown as a colored pill instead of a bare number */
.kpi-status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 12px; border-radius: 100px; font-size: var(--text-sm); font-weight: var(--font-bold); line-height: 1.6; }
.kpi-status-pill.status-good { background: rgba(16,185,129,0.12); color: var(--color-success); }
.kpi-status-pill.status-warn { background: rgba(245,158,11,0.12); color: var(--color-warning); }
.kpi-status-pill.status-bad  { background: rgba(220,38,38,0.12); color: var(--color-danger); }

/* Dense status table: replaces a wall of single-number kpi-tiles (e.g. health.php's
   dedup stats, formerly 9 boxes across 4 rows) with a compact label/value list that
   can show a real total -> subtotal -> breakdown hierarchy via indentation. */
.health-stat-table { border: 1px solid var(--border-primary); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-elevated); }
.health-stat-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.625rem 1rem; }
.health-stat-row:not(:last-child) { border-bottom: 1px solid var(--border-primary); }
.health-stat-row.health-stat-sub { padding-left: 1.75rem; background: var(--bg-hover); }
.health-stat-row.health-stat-subsub { padding-left: 2.75rem; background: var(--bg-hover); }
.health-stat-label { font-size: var(--text-sm); color: var(--text-secondary); }
.health-stat-row.health-stat-primary .health-stat-label { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
.health-stat-value { font-weight: 700; font-size: var(--text-sm); }
.health-stat-row.health-stat-primary .health-stat-value { font-size: var(--text-base); }

/* Funnel visualization: replaces a row of disconnected equal-weight kpi-tiles
   (e.g. referral.php's Clicks/Signups/Converted/Pending/Balance) with a
   left-to-right flow showing each stage's conversion rate from the last. */
.referral-overview  { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; margin-bottom: 1.5rem; }
.referral-funnel     { flex: 1; min-width: 280px; display: flex; align-items: center; background: var(--bg-elevated); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: 1.25rem 1rem; }
.rf-step             { flex: 1; text-align: center; min-width: 0; }
.rf-step-icon        { width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; color: #fff; }
.rf-icon-purple       { background: linear-gradient(135deg,#8b5cf6,#7c3aed); }
.rf-icon-blue         { background: linear-gradient(135deg,#6366f1,#4f46e5); }
.rf-icon-green        { background: linear-gradient(135deg,#10b981,#059669); }
.rf-icon-orange       { background: linear-gradient(135deg,#f59e0b,#d97706); }
.rf-icon-rose         { background: linear-gradient(135deg,#f43f5e,#e11d48); }
.rf-step-value        { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); line-height: 1; }

.rf-step-sub          { font-size: var(--text-2xs); color: var(--text-dim); margin-top: 2px; }
.rf-connector         { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 0.5rem; color: var(--border-primary); }
.rf-connector-pct     { font-size: var(--text-2xs); font-weight: var(--font-bold); color: var(--text-secondary); white-space: nowrap; }
.referral-balance-card { flex-shrink: 0; display: flex; align-items: center; gap: 0.875rem; background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02)); border: 1px solid rgba(16,185,129,0.25); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; min-width: 200px; }
.rb-icon              { width: 40px; height: 40px; border-radius: var(--radius-md); background: linear-gradient(135deg,#10b981,#059669); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rb-value             { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-success); line-height: 1; }
.rf-step-label,
.rb-label {
    font-size: var(--text-xs); color: var(--text-secondary); font-weight: var(--font-medium); margin-top: 0.25rem;
}
@media(max-width:600px) {
    .referral-funnel { flex-wrap: wrap; gap: 0.5rem; }
    .rf-step { flex-basis: 100%; }
    .rf-connector { flex-basis: 100%; flex-direction: row; justify-content: center; padding: 0.25rem 0; }
    .rf-connector-arrow { transform: rotate(90deg); }
}

/* Roster pair: 2 related counts shown beside a funnel but intentionally NOT
   connected by an arrow, since they aren't a cohort ratio of each other
   (e.g. affiliates.php's Pending Applications / Active Affiliates). */
.affiliate-roster-pair { flex-shrink: 0; display: flex; gap: 0.75rem; }
.affiliate-roster-pair .kpi-tile { min-width: 140px; }
@media(max-width:600px) { .affiliate-roster-pair { flex-wrap: wrap; width: 100%; } .affiliate-roster-pair .kpi-tile { flex: 1; min-width: 120px; } }

/* =========================================================
   ADMIN — AI ACTION CARDS
   ========================================================= */
.ai-action-card-layout { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-4); }

.ai-action-card-buttons { display:flex; flex-direction:column; gap:var(--space-2); flex-shrink:0; }
.ai-action-meta { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
@media(max-width:640px) {
    .ai-action-card-layout { flex-direction:column; }
    .ai-action-card-buttons { flex-direction:row; width:100%; }
    .ai-action-card-buttons .btn { flex:1; }
    .ai-action-meta { gap:var(--space-1); }
}

/* =========================================================
   ADMIN — CALENDAR / APPOINTMENTS
   ========================================================= */
/* Calendar toggle */
.appt-view-toggle { display:inline-flex; border:1px solid var(--color-border); border-radius:var(--radius-sm); overflow:hidden; }
.appt-view-toggle button { background:var(--bg-primary); border:none; padding:5px 14px; font-size:var(--text-sm); color:var(--text-secondary); cursor:pointer; display:flex; align-items:center; gap:5px; transition:background 0.15s,color 0.15s; }
.appt-view-toggle button.active { background:var(--color-primary); color:#fff; }
.appt-view-toggle button:not(:last-child) { border-right:1px solid var(--color-border); }
.appt-view-toggle button:hover:not(.active) { background:var(--bg-secondary); }

/* Calendar grid */
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--border-primary); border:1px solid var(--border-primary); border-radius:var(--radius-md); overflow:hidden; width:100%; }
.cal-header-cell { background:var(--bg-secondary); padding:10px 4px; text-align:center; font-size:var(--text-xs); font-weight:var(--font-semibold); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.06em; }
.cal-cell { background:var(--bg-primary); min-height:120px; padding:6px; position:relative; cursor:pointer; transition:background 0.12s; overflow:hidden; vertical-align:top; }
.cal-cell:hover { background:rgba(71, 85, 105, 0.025); }
.cal-cell.other-month { background:var(--bg-secondary); }
.cal-cell.other-month .cal-day-num { opacity:0.3; }
.cal-cell.today { background:rgba(99,102,241,0.06); }
.cal-cell.today:hover { background:rgba(99,102,241,0.10); }
.cal-cell.today .cal-day-num { background:var(--color-primary); color:#fff; border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-weight:var(--font-bold); }
.cal-day-num { font-size:var(--text-sm); font-weight:var(--font-semibold); color:var(--text-secondary); margin-bottom:4px; line-height:1; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%; }

/* Calendar event pills */
.cal-item { font-size:11px; border-radius:3px; padding:2px 5px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; display:flex; align-items:center; gap:3px; line-height:1.5; transition:filter 0.1s; border-left:3px solid transparent; }
.cal-item:hover { filter:brightness(0.93); }
.cal-item.appt { background:rgba(99,102,241,0.10); color:var(--color-primary); border-left-color:var(--color-primary); }
.cal-item.confirmed { background:rgba(14,164,114,0.10); color:#0a7a55; border-left-color:var(--color-success); }
.cal-item.completed { background:rgba(14,164,114,0.08); color:var(--color-success); border-left-color:var(--color-success); opacity:0.75; }
.cal-item.cancelled { background:var(--bg-secondary); color:var(--text-tertiary); border-left-color:var(--border-secondary); text-decoration:line-through; }
.cal-item.no-show { background:rgba(245,158,11,0.10); color:#b45309; border-left-color:var(--warning,#f59e0b); }
.cal-item.task { background:rgba(245,158,11,0.10); color:#92400e; border-left-color:var(--warning,#f59e0b); }
.cal-item-time { font-weight:var(--font-semibold); flex-shrink:0; opacity:0.80; font-size:10px; }
.cal-item-title { overflow:hidden; text-overflow:ellipsis; }
.cal-more { font-size:10px; color:var(--text-tertiary); padding:1px 4px; font-weight:var(--font-medium); }

/* Calendar navigation */
.cal-nav { display:flex; align-items:center; gap:var(--space-2); }
.cal-nav button { background:var(--bg-primary); border:1px solid var(--border-primary); border-radius:var(--radius); padding:6px 12px; cursor:pointer; color:var(--text-secondary); font-size:var(--text-sm); transition:all 0.12s; }
.cal-nav button:hover { background:var(--bg-secondary); color:var(--text-primary); }
.cal-month-label { font-size:var(--text-lg,1.05rem); font-weight:var(--font-semibold); min-width:160px; text-align:center; color:var(--text-primary); }

/* Day detail panel */
.cal-day-section { border-bottom:1px solid var(--border-primary); }
.cal-day-section:last-child { border-bottom:none; }
.cal-day-section-header { padding:var(--space-2) var(--space-4); font-size:var(--text-xs); font-weight:var(--font-semibold); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.05em; background:var(--bg-secondary); }
.cal-day-item { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border-color); }
.cal-day-item:last-child { border-bottom:none; }
.cal-day-item .item-time { font-size:var(--text-xs); color:var(--color-primary); font-weight:var(--font-semibold); }
.cal-day-item .item-title { font-size:var(--text-sm); font-weight:var(--font-medium); color:var(--text-primary); margin-top:2px; }
.cal-day-item .item-meta { font-size:var(--text-xs); color:var(--text-dim); margin-top:2px; }
.cal-day-item .item-meta a { color:var(--color-primary); text-decoration:none; font-weight:var(--font-medium); }
.cal-day-item .item-meta a:hover { text-decoration:underline; }
.cal-day-empty { padding:var(--space-6) var(--space-4); text-align:center; color:var(--text-dim); font-size:var(--text-sm); }

/* Reminders sidebar */
.cal-reminders-col { border-left:1px solid var(--border-primary); padding-left:var(--space-4); min-width:200px; }
.cal-reminders-title { font-size:var(--text-xs); font-weight:var(--font-semibold); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:var(--space-3); padding-bottom:var(--space-2); border-bottom:1px solid var(--border-primary); }
.cal-reminder-item { display:flex; align-items:flex-start; gap:var(--space-2); margin-bottom:var(--space-3); }
.cal-reminder-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.cal-reminder-name { font-size:var(--text-sm); font-weight:var(--font-medium); color:var(--text-primary); }
.cal-reminder-time { font-size:var(--text-xs); color:var(--text-dim); margin-top:1px; }

@media(max-width:1024px) {
    .cal-reminders-col { border-left:none; border-top:1px solid var(--border-primary); padding-left:0; padding-top:var(--space-3); min-width:0; }
}
@media(max-width:991px) { .cal-cell { min-height:80px; } .cal-month-label { font-size:var(--text-sm); min-width:120px; } }
@media(max-width:640px) {
    .cal-cell { min-height:56px; padding:2px; }
    .cal-item { font-size:10px; padding:1px 3px; }
    .cal-day-num { font-size:var(--text-xs); width:20px; height:20px; }
    .cal-header-cell { padding:6px 2px; font-size:10px; }
    .cal-nav { gap:var(--space-1); }
    .cal-nav button { padding:4px 8px; font-size:var(--text-xs); }
    .cal-month-label { font-size:var(--text-sm); min-width:100px; }
    .appt-view-toggle button { padding:4px 8px; font-size:var(--text-xs); }
}
@media(max-width:479px) {
    .cal-cell { min-height:48px; padding:1px; }
    .cal-day-num { font-size:var(--text-2xs); width:18px; height:18px; }
    .cal-item { font-size:10px; padding:1px; }
    .cal-header-cell { font-size:var(--text-2xs); padding:3px 1px; }
    .cal-day-item { padding:var(--space-2); }
    .cal-day-section-header { padding:var(--space-2); }
}

/* =========================================================
   ADMIN — SEQUENCE CARDS
   ========================================================= */
.seq-card-header { display:flex; justify-content:space-between; align-items:center; }
.seq-card-badges { display:flex; flex-wrap:wrap; gap:var(--space-1); align-items:center; }
.seq-card-actions { display:flex; gap:var(--space-2); flex-shrink:0; }
.seq-step-row { display:flex; gap:var(--space-2); margin-bottom:var(--space-2); align-items:center; flex-wrap:wrap; }
@media(max-width:640px) {
    .seq-card-header { flex-direction:column; align-items:flex-start; gap:var(--space-2); }
    .seq-card-actions { width:100%; }
    .seq-card-badges { margin-top:var(--space-1); }
    .seq-step-row .form-control.seq-step-instruction { min-width:100% !important; flex-basis:100%; }
}

/* =========================================================
   CALLY — GREETING TOOLTIP
   ========================================================= */
.cally-greeting {
    position: fixed;
    bottom: calc(var(--space-6) + 72px);
    right: var(--space-6);
    max-width: 250px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3) var(--space-8) var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    z-index: 998;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cally-greeting.visible { opacity: 1; transform: translateY(0); }

.cally-greeting-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: var(--text-xl);
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
}
.cally-greeting-close:hover { color: var(--text-primary); }

.cally-greeting::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 24px;
    width: 12px;
    height: 12px;
    background: var(--bg-elevated);
    border-right: 1px solid var(--border-primary);
    border-bottom: 1px solid var(--border-primary);
    transform: rotate(45deg);
}

/* =========================================================
   BILLING DASHBOARD — TWIN COLUMN LAYOUT
   ========================================================= */
.dash-twin-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-bottom:var(--space-4); align-items:start; }
.dash-twin-card { display:flex !important; flex-direction:column; margin:0 !important; padding:0; }
.dash-twin-card:hover { transform:none !important; }
.dash-twin-card .card-header.card-header-flex { min-height:52px; box-sizing:border-box; padding:var(--space-4) var(--space-6); }
@media(max-width:768px) { .dash-twin-row { grid-template-columns:1fr; } }

/* =========================================================
   T007/T008 UTILITY ADDITIONS — auth.php, billing_dashboard cleanup
   ========================================================= */
.auth-logo { max-width: 220px; width: 100%; height: auto; margin: 0 auto 0.75rem; display: block; }
.no-underline { text-decoration: none !important; }
.btn-block { width: 100%; display: inline-flex; align-items: center; justify-content: center; }
.text-info { color: var(--color-primary); }
.usage-count { font-weight: var(--font-semibold); }
.usage-sub { display: block; margin-top: 0.2rem; }
.usage-ai-badge { display: block; margin-top: 0.15rem; font-size: var(--text-xs); color: var(--text-tertiary); }

/* =========================================================
   DASHBOARD DUO GRID (replaces inline style on 2-col row)
   ========================================================= */
.dash-duo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); align-items: start; }
@media (max-width: 768px) { .dash-duo-grid { grid-template-columns: 1fr; } }

/* =========================================================
   STAT LIST (AI Performance card)
   ========================================================= */
.stat-list { list-style: none; padding: 0; margin: 0; }
.stat-list-item { padding: var(--space-2) 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); }
.stat-list-item:last-child { border-bottom: none; }
.stat-list-label { color: var(--text-secondary); font-size: var(--text-sm); }
.stat-list-value { font-weight: var(--font-semibold); color: var(--text-primary); }
.stat-list-value--muted { font-weight: var(--font-semibold); color: var(--text-muted); }
.stat-list-value--success { font-weight: var(--font-semibold); color: var(--color-success); }

/* =========================================================
   QUICK LINKS GRID
   ========================================================= */
.quick-links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.quick-link-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--bg-secondary); text-decoration: none; color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--font-medium); transition: background 0.15s; }
.quick-link-item:hover { background: var(--bg-tertiary); text-decoration: none; }

/* =========================================================
   BRIEFING ITEMS (JS-generated content)
   ========================================================= */
.briefing-item { display: flex; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-light); align-items: flex-start; }

.briefing-item-text { font-size: var(--text-sm); color: var(--text-secondary); flex: 1; }
.briefing-item-link { color: var(--color-primary); text-decoration: none; font-weight: var(--font-medium); white-space: nowrap; }
.briefing-item-link:hover { text-decoration: underline; }

/* =========================================================
   DASHBOARD SECTION GROUP DIVIDERS
   ========================================================= */
.db-section-group { display: flex; align-items: center; gap: 1rem; margin: 2.5rem 0 1.125rem; }
.db-section-group-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--color-primary, #6366f1); white-space: nowrap; padding-left: 0.625rem; border-left: 3px solid var(--color-primary, #6366f1); line-height: 1.2; }
.db-section-group::after { content: ''; flex: 1; height: 1px; background: var(--border-primary); }

/* =========================================================
   PRIORITY ACTION CARDS (Stitch Design — Dashboard)
   ========================================================= */
.priority-actions-section { margin-bottom: var(--space-4); }
.priority-actions-label { font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: var(--space-3); }
.priority-actions-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
@media (max-width: 1200px) { .priority-actions-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .priority-actions-row { grid-template-columns: 1fr; } }

.priority-action-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); transition: border-color 0.15s, box-shadow 0.15s; position: relative; overflow: hidden; }
.priority-action-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; opacity: 0.7; }
.priority-action-card--hot::before { background: var(--color-error); }
.priority-action-card--ai::before { background: var(--color-primary); }
.priority-action-card--appt::before { background: var(--color-success); }
.priority-action-card--missed::before { background: var(--color-warning); }
.priority-action-card:hover { border-color: var(--color-primary-light, rgba(99,102,241,0.3)); box-shadow: 0 4px 16px rgba(99,102,241,0.1); }
.page-header-content,
.priority-action-top {
    display: flex; align-items: flex-start; gap: var(--space-3);
}
.priority-action-icon { width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.priority-action-icon--hot { background: rgba(244,63,94,0.12); color: var(--color-error); }

.priority-action-icon--appt { background: rgba(14,164,114,0.12); color: var(--color-success); }
.priority-action-icon--missed { background: rgba(230,160,0,0.12); color: var(--color-warning); }

.priority-action-meta { flex: 1; min-width: 0; }
.priority-action-title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.priority-action-desc { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.priority-action-empty { font-size: var(--text-xs); color: var(--text-dim); font-style: italic; }
.priority-action-btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border-primary); background: transparent; color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--font-semibold); cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s; align-self: flex-start; }
.priority-action-btn:hover { background: var(--bg-secondary); border-color: var(--color-primary); text-decoration: none; }
.priority-action-btn--empty { color: var(--text-dim); border-color: var(--border-light); pointer-events: none; }

/* =========================================================
   CALLY'S TIP CARD (Stitch Design — Dashboard)
   ========================================================= */
.cally-tip-section { margin-bottom: var(--space-4); }
.cally-tip-card { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: linear-gradient(135deg, rgba(99,102,241,0.07) 0%, rgba(99,102,241,0.02) 100%); border: 1px solid rgba(99,102,241,0.2); border-radius: var(--radius-lg); }
.cally-tip-icon-wrap { width: 38px; height: 38px; border-radius: 50%; background: var(--color-primary); color: var(--text-inverse); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cally-tip-body { flex: 1; min-width: 0; }
.cally-tip-label { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: var(--space-1); }
.cally-tip-text { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55; font-style: italic; }

/* =========================================================
   LANDING PAGE — AGENCY PRICING TIER
   ========================================================= */
.price-card-agency { border-color: var(--text-dim); }
.price-badge-agency { background: var(--bg-tertiary); color: var(--text-secondary); }

/* =========================================================
   T008 REMAINING UTILITY CLASSES — billing_dashboard.php
   ========================================================= */

/* Period selector modifier */
.period-selector--right { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.period-select { width: auto; min-width: 160px; }
.custom-date-range { display: none; align-items: center; gap: var(--space-2); }
.custom-date-range.is-visible { display: flex; }
.date-input-compact { width: auto; font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }
.date-range-sep { font-size: var(--text-xs); color: var(--text-secondary); }

/* Table layout helpers */
.card-body-flush { padding: 0 !important; }
.table-flush { margin: 0 !important; }
.th-center { text-align: center !important; }
.th-right { text-align: right !important; }
.td-center { text-align: center; }
.td-right { text-align: right; }

/* Tasks scroll list */
.tasks-scroll-list { max-height: 320px; overflow-y: auto; }

/* Spacing utility */
.mx-auto { margin-left: auto; margin-right: auto; }

/* =========================================================
   SETUP CHECKLIST CARD — billing_dashboard.php
   ========================================================= */
.setup-checklist-card { margin-bottom: var(--space-4); border-left: 3px solid var(--color-primary); }
.setup-progress-ring { width: 40px; height: 40px; position: relative; flex-shrink: 0; }
.setup-progress-svg { width: 40px; height: 40px; transform: rotate(-90deg); display: block; }
.donut-label,
.setup-progress-pct {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--text-2xs); font-weight: var(--font-semibold); color: var(--color-primary);
}
.card-body-sm { padding: var(--space-3); }
.setup-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); }
.setup-step { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--bg-primary); text-decoration: none; border: 1px solid var(--border-primary); transition: border-color 0.15s, background 0.15s; cursor: pointer; }
.setup-step:hover { border-color: var(--color-primary); text-decoration: none; }
.setup-step--done { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.25); cursor: default; pointer-events: none; }
.setup-step-num { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--border-primary); color: white; font-size: var(--text-2xs); font-weight: var(--font-semibold); }
.setup-step-num--done { background: var(--color-success); }
.setup-step-label { font-size: var(--text-sm); color: var(--text-primary); }
.setup-step-label--done { color: var(--color-success); text-decoration: line-through; opacity: 0.65; }

/* =========================================================
   TEAM ACTIVITY KPI — billing_dashboard.php
   ========================================================= */
.team-trigger { font-size: var(--text-2xs); color: var(--color-primary); cursor: pointer; margin-top: 0.25rem; display: inline-block; text-decoration: none; }
.team-trigger:hover { text-decoration: underline; }
.team-list-panel { display: none; width: 100%; text-align: left; margin-top: 0.5rem; border-top: 1px solid var(--border-primary); padding-top: 0.5rem; overflow: hidden; height: 0; }
.team-member-row { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0; font-size: var(--text-xs); }
.team-member-row--top { font-weight: var(--font-semibold); color: var(--color-warning); }
.team-member-stat { font-size: var(--text-xs); white-space: nowrap; color: var(--text-secondary); }
.team-member-stat--top { color: var(--color-warning); }

/* KPI subtitle extra-small modifier */
.kpi-subtitle--xs { font-size: var(--text-2xs); opacity: 0.85; }

/* =========================================================
   PIPELINE / KANBAN BOARD
   ========================================================= */
.pipeline-board { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-4); min-height: 70vh; align-items: flex-start; }
.pipeline-column { flex: 0 0 260px; background: var(--bg-secondary); border-radius: var(--radius-lg); overflow: hidden; }
.pipeline-col-header { padding: var(--space-3) var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-primary); }
.onboard-card-title,
.pipeline-col-title {
    display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary);
}
.pipeline-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pipeline-col-count { margin-left: auto; background: var(--border-primary); color: var(--text-secondary); font-size: var(--text-2xs); padding: 0 6px; border-radius: 10px; font-weight: var(--font-medium); }
.pipeline-col-value { font-size: var(--text-xs); color: var(--color-success); font-weight: var(--font-semibold); margin-top: var(--space-1); }
.pipeline-col-body { padding: var(--space-2); min-height: 80px; display: flex; flex-direction: column; gap: var(--space-2); }
.pipeline-card { background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: var(--space-3); cursor: grab; transition: box-shadow 0.15s, transform 0.15s; }
.pipeline-card:hover { box-shadow: var(--shadow-md); }
.pipeline-card-ghost { opacity: 0.4; }
.pipeline-card-dragging { box-shadow: var(--shadow-xl); transform: rotate(1.5deg); cursor: grabbing; }
.pipeline-card-name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-primary); text-decoration: none; display: block; margin-bottom: var(--space-1); }
.pipeline-card-name:hover { text-decoration: underline; }

.pipeline-card-agent { font-size: var(--text-2xs); color: var(--text-secondary); }
.pipeline-card-value { display: flex; align-items: center; gap: 4px; }
.pipeline-deal-input { width: 100%; font-size: var(--text-xs); padding: 4px 6px; border: 1px solid var(--border-primary); border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-primary); }
.pipeline-deal-input:focus { outline: none; border-color: var(--color-primary); }
.pipeline-card-source { font-size: var(--text-2xs); color: var(--text-tertiary); margin-top: var(--space-1); }
.pipeline-forecast-pill { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.pipeline-forecast-pill strong { color: var(--color-success); }
.pipeline-overflow-link { display: block; text-align: center; padding: var(--space-2) var(--space-3); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-primary); background: rgba(99,102,241,0.06); border: 1px dashed rgba(99,102,241,0.25); border-radius: var(--radius); text-decoration: none; transition: background 0.15s; }
.pipeline-overflow-link:hover { background: rgba(99,102,241,0.12); }
.pipeline-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-5) var(--space-3); flex: 1; border: 1.5px dashed var(--border-color); border-radius: var(--radius-md); margin: var(--space-2); }

/* =========================================================
   LEADERBOARD
   ========================================================= */
.lb-forecast-strip { display: flex; gap: var(--space-3); overflow-x: auto; margin-bottom: var(--space-5); padding-bottom: 2px; }
.lb-forecast-card { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); flex: 0 0 auto; min-width: 140px; }
.lb-forecast-total { flex: 0 0 auto; min-width: 180px; background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(99,102,241,0.03)); border-color: rgba(99,102,241,0.25); }

.lb-forecast-value { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--text-primary); }

.lb-main-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .lb-main-grid { grid-template-columns: 1fr; } }
.lb-agents-card { overflow: hidden; }

.lb-medal { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: var(--text-xs); font-weight: var(--font-bold); color: #fff; }
.lb-medal.lb-gold { background: #d4a017; }
.lb-medal.lb-silver { background: #9aa5b1; }
.lb-medal.lb-bronze { background: #b5651d; }
.lb-rank { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-secondary); }
.lb-agent-name { font-weight: var(--font-semibold); font-size: var(--text-sm); }

.lb-score-bar { height: 100%; border-radius: var(--radius-full); transition: width 0.4s; }
.lb-score-pct { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; min-width: 60px; }
.lb-trend-chart { display: flex; align-items: flex-end; gap: var(--space-2); height: 120px; padding: var(--space-2) 0; }
.lb-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.lb-trend-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.lb-trend-bar { width: 100%; background: var(--color-primary); border-radius: var(--radius-sm) var(--radius-sm) 0 0; position: relative; min-height: 4px; transition: height 0.4s; }
.lb-trend-val { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: var(--text-2xs); color: var(--text-secondary); white-space: nowrap; }
.lb-trend-label { font-size: var(--text-2xs); color: var(--text-tertiary); margin-top: 4px; white-space: nowrap; }

/* =========================================================
   PLAYBOOKS
   ========================================================= */
.playbooks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
.playbook-card { }
.playbook-active { border-left: 3px solid var(--color-success); }
.playbook-paused { border-left: 3px solid var(--border-primary); }
.playbook-name { font-weight: var(--font-semibold); font-size: var(--text-base); }
.playbook-trigger { font-size: var(--text-xs); color: var(--text-secondary); display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.playbook-card-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.playbook-desc { font-size: var(--text-sm); color: var(--text-secondary); padding: 0 var(--space-4) var(--space-2); }
.playbook-steps { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); }
.playbook-no-steps { font-size: var(--text-xs); color: var(--text-tertiary); padding: var(--space-2) 0; }
.playbook-step { margin-bottom: var(--space-2); }
.playbook-step-delay { font-size: var(--text-2xs); color: var(--text-tertiary); display: flex; align-items: center; gap: 4px; margin-left: 20px; margin-bottom: 2px; }
.playbook-step-action { display: flex; align-items: center; gap: var(--space-2); }
.playbook-step-num { width: 20px; height: 20px; border-radius: 50%; background: var(--color-primary); color: white; font-size: var(--text-2xs); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.playbook-step-type { font-size: var(--text-xs); font-weight: var(--font-semibold); }
.playbook-step-content { font-size: var(--text-xs); color: var(--text-secondary); }
.playbook-meta { font-size: var(--text-2xs); color: var(--text-tertiary); padding: var(--space-2) var(--space-4); }
.playbook-step-builder { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-2); }
.playbook-step-row { display: flex; align-items: center; gap: var(--space-2); }

/* =========================================================
   REPORTS
   ========================================================= */
.reports-kpi-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); overflow-x: auto; }
.reports-kpi-card { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); flex: 0 0 auto; min-width: 130px; }
.reports-kpi-hot { border-top: 3px solid var(--color-error); }
.reports-kpi-green { border-top: 3px solid var(--color-success); }
.lb-forecast-label,
.reports-kpi-label {
    font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: 4px;
}

.reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-4); }
.pipeline-card-meta,
.lb-score-row,
.report-bar-row {
    display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2);
}
.report-bar-label { font-size: var(--text-xs); color: var(--text-secondary); min-width: 90px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score-bar-wrap,
.report-bar-track {
    flex: 1; background: var(--border-primary); border-radius: var(--radius-full); height: 8px; overflow: hidden;
}
.report-bar-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); transition: width 0.4s; }
.report-bar-val { font-size: var(--text-xs); font-weight: var(--font-semibold); min-width: 32px; text-align: right; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); }
.checkbox-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-primary); cursor: pointer; }
.checkbox-item input[type="checkbox"] { flex-shrink: 0; }

/* =========================================================
   API ACCESS
   ========================================================= */
.api-main-grid { display: grid; grid-template-columns: 1fr 420px; gap: var(--space-4); align-items: start; }
@media (max-width: 1000px) { .api-main-grid { grid-template-columns: 1fr; } }
.api-token-reveal { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.api-token-reveal code { flex: 1; font-size: var(--text-sm); word-break: break-all; }
.api-endpoint { margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-primary); }
.api-endpoint:last-of-type { border-bottom: none; }
.api-endpoint-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.api-method { font-size: var(--text-2xs); font-weight: var(--font-bold); padding: 2px 7px; border-radius: var(--radius-sm); }
.api-get { background: rgba(16,185,129,0.15); color: var(--color-success); }
.api-post { background: rgba(99,102,241,0.15); color: var(--color-primary); }
.api-endpoint-header code { font-size: var(--text-xs); color: var(--text-secondary); }

.api-code-block { margin-top: var(--space-4); background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); overflow: hidden; }
.api-code-label { font-size: var(--text-2xs); font-weight: var(--font-semibold); padding: var(--space-2) var(--space-3); background: var(--border-primary); color: var(--text-secondary); }
.api-code { font-size: var(--text-xs); padding: var(--space-3); margin: 0; color: var(--text-primary); white-space: pre-wrap; word-break: break-all; }

/* =========================================================
   AGENCY
   ========================================================= */
.agency-stats-strip { display: flex; gap: var(--space-4); margin-bottom: var(--space-5); padding: var(--space-4); background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); }
.agency-stat { flex: 1; text-align: center; }
.referral-stat-value,
.reports-kpi-val,
.agency-stat-val {
    font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary);
}
.agency-stat-label { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; }

/* =========================================================
   BULK LEAD ACTIONS
   ========================================================= */
.bulk-action-bar { display: none; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--color-primary); color: white; border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.bulk-action-bar.is-visible { display: flex; }
.bulk-action-count { font-weight: var(--font-semibold); font-size: var(--text-sm); margin-right: var(--space-2); }
.bulk-action-btn { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; font-size: var(--text-xs); padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s; }
.bulk-action-btn:hover { background: rgba(255,255,255,0.35); }
.bulk-dismiss { margin-left: auto; background: none; border: none; color: white; cursor: pointer; opacity: 0.7; font-size: 16px; }

/* =========================================================
   SETTINGS — NEW SECTIONS (custom fields, voicemail, reviews, white-label)
   ========================================================= */
.settings-section-divider { height: 1px; background: var(--border-primary); margin: var(--space-6) 0; }
.field-builder-list { padding: var(--space-3); }
.field-builder-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.field-builder-row:last-child { margin-bottom: 0; }

.field-builder-type { font-size: var(--text-xs); color: var(--text-secondary); background: var(--border-primary); padding: 2px 8px; border-radius: var(--radius-sm); }

.voicemail-item { display: flex; align-items: center; gap: var(--space-3); background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.field-builder-name,
.voicemail-item-name {
    flex: 1; font-size: var(--text-sm); font-weight: var(--font-semibold);
}
.voicemail-item-dur { font-size: var(--text-xs); color: var(--text-secondary); }

/* =========================================================
   SETTINGS HUB — Feature quick-access grid
   ========================================================= */
.settings-hub { }
.settings-hub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.settings-hub-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); background: var(--bg-elevated); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); text-decoration: none; color: var(--text-primary); transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s; cursor: pointer; }
.settings-hub-tile:hover { border-color: var(--color-primary); box-shadow: 0 4px 16px rgba(99,102,241,0.12); transform: translateY(-1px); }
.settings-hub-icon { width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--text-inverse); flex-shrink: 0; }
.settings-hub-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); line-height: 1.2; }
.settings-hub-desc { font-size: var(--text-xs); color: var(--text-dim); }
.settings-section-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-4); }
.settings-section-divider::before, .settings-section-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-primary); }
.section-divider-label,
.settings-section-divider-label {
    font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-dim); text-transform: uppercase; letter-spacing: var(--tracking-widest); white-space: nowrap;
}
@media (max-width: 900px) { .settings-hub-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .settings-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .settings-hub-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); } .settings-hub-tile { padding: var(--space-3) var(--space-2); } .settings-hub-icon { width: 40px; height: 40px; } }

/* ===== CONTACTS VIEW TOGGLE (List | Pipeline | Calendar) ===== */
.contacts-view-toggle { display:flex; align-items:center; background:var(--bg-secondary); border:1px solid var(--border-primary); border-radius:var(--radius-md); padding:2px; gap:2px; }
.contacts-view-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:calc(var(--radius-md) - 2px); font-size:var(--text-sm); font-weight:var(--font-medium); color:var(--text-secondary); text-decoration:none; transition:background .15s, color .15s; cursor:pointer; white-space:nowrap; }
.contacts-view-btn:hover { background:var(--bg-primary); color:var(--text-primary); text-decoration:none; }
.contacts-view-btn.active { background:var(--bg-primary); color:var(--color-primary); font-weight:var(--font-semibold); box-shadow:0 1px 3px rgba(71, 85, 105, .08); }
.contacts-view-btn svg { flex-shrink:0; }

/* ===== CLICK-TO-CALL PHONE LINKS ===== */
.lead-phone-link { display:inline-flex; align-items:center; gap:4px; color:var(--text-primary); text-decoration:none; font-size:inherit; }
.lead-phone-link:hover { color:var(--color-primary); text-decoration:underline; }
.lead-phone-link svg { color:var(--color-primary); opacity:.7; flex-shrink:0; }
.lead-phone-link:hover svg { opacity:1; }

/* ===== SEQUENCE FLOW CARDS =====
   .seq-cards-grid/.seq-flow-card/.seq-flow-card-header/.seq-flow-card-footer
   were each also redefined in a later "compact grid" override section;
   merged here into the single set of values that combination was already
   producing (later section won for genuinely conflicting properties —
   background, hover colors, grid density, footer gap/padding/border —
   while properties only the original section set, like the header's flex
   layout, keep applying since they were never overridden). That later
   section's .seq-flow-card-body was dead CSS (no template renders a
   .seq-flow-card-body element) and was dropped. */
.seq-cards-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:var(--space-3); }
.seq-flow-card { background:var(--bg-elevated); border:1px solid var(--border-primary); border-radius:var(--radius-lg); padding:var(--space-4); box-shadow:var(--shadow-xs); overflow:hidden; cursor:pointer; transition:box-shadow var(--transition-fast), border-color var(--transition-fast); }
.seq-flow-card:hover { border-color:var(--border-secondary); box-shadow:var(--shadow-sm); }
.seq-flow-card-header { display:flex; align-items:flex-start; gap:var(--space-2); margin-bottom:var(--space-3); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border-primary); background:var(--bg-secondary); }
.seq-flow-chain { display:flex; align-items:center; flex-wrap:wrap; gap:3px; margin-bottom:var(--space-3); padding:var(--space-2) var(--space-3); background:var(--bg-secondary); border-radius:var(--radius-md); min-height:36px; }
.seq-flow-arrow { color:var(--text-dim); font-size: var(--text-xs); flex-shrink:0; }
.seq-flow-node { display:inline-flex; align-items:center; gap:3px; font-size:var(--text-xs); font-weight:var(--font-medium); padding:3px 7px; border-radius:var(--radius-full); flex-shrink:0; white-space:nowrap; }
.seq-flow-trigger { background:var(--color-primary-light); color:var(--color-primary); }
.seq-flow-step { background:var(--bg-primary); border:1px solid var(--border-primary); color:var(--text-secondary); }
.seq-flow-more { background:var(--bg-primary); border:1px solid var(--border-primary); color:var(--text-dim); font-style:italic; }
.seq-flow-empty { background:var(--bg-primary); border:1px dashed var(--border-primary); color:var(--text-dim); font-style:italic; }
.seq-flow-delay { display:inline-block; margin-left:3px; font-size: var(--text-2xs); color:var(--text-dim); font-weight:var(--font-normal); }
.seq-flow-card-footer { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-xs); color:var(--text-secondary); flex-wrap:wrap; padding:var(--space-2) var(--space-4); border-top:1px solid var(--border-primary); background:var(--bg-secondary); justify-content:space-between; }
.seq-flow-card-footer span { display:inline-flex; align-items:center; gap:4px; }
@media (max-width: 640px) { .seq-cards-grid { grid-template-columns:1fr; } .contacts-view-toggle { display:none; } }

/* ===== AI ENRICHMENT BANNER ===== */
.ai-enrich-banner { display:flex; align-items:center; gap:var(--space-2); margin:var(--space-2) var(--space-4); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); font-size:var(--text-xs); font-weight:var(--font-medium); transition:opacity .5s; }
.ai-enrich-pending { background:rgba(99,102,241,.08); color:var(--color-primary); border:1px solid rgba(99,102,241,.2); }
.ai-enrich-pending svg { animation:enrich-spin 1.4s linear infinite; }
.ai-enrich-done { background:rgba(16,185,129,.08); color: var(--color-success); border:1px solid rgba(16,185,129,.2); }
.ai-enrich-dismiss { background:none; border:none; cursor:pointer; color:inherit; font-size: var(--text-md); line-height:1; padding:0 2px; margin-left:auto; opacity:.6; }
.ai-enrich-dismiss:hover { opacity:1; }
@keyframes enrich-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* ===== GLOBAL COMPACT / MINIMALIST OVERRIDES ===== */
/* .page-header family already consolidated at the top of this file. */
/* .card-body/.card-header consolidated — see "5. CARD COMPONENTS". */
/* Denser data tables */
.data-table th {
    padding: 0.45rem var(--space-3);
}
.data-table td {
    padding: 0.45rem var(--space-3);
}
/* Denser .table */
.table th, .table td {
    padding: 0.45rem var(--space-3);
}
/* Compact status grid */
.status-grid {
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
/* mt-lg / mt-md smaller */
.mt-lg { margin-top: var(--space-3) !important; }
.mt-md { margin-top: var(--space-2) !important; }
/* .main-content consolidated — see "── Main Content ──" near the top. */
/* Slim tab buttons */
.tab-btn {
    padding: 5px 12px;
    font-size: var(--text-xs);
}
/* Secondary nav groups in primary nav (e.g. Tools after divider) */
.sidebar-nav-group-secondary > div.sidebar-nav-group-toggle .sidebar-nav-group-link,
.sidebar-nav-group-secondary > button.sidebar-nav-group-toggle {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: var(--text-sm);
}
.sidebar-nav-group-secondary > div.sidebar-nav-group-toggle .sidebar-nav-group-link svg,
.sidebar-nav-group-secondary > button.sidebar-nav-group-toggle svg:not(.sidebar-nav-group-chevron) {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.sidebar-nav-group-secondary .sidebar-nav-child-link {
    padding: 5px 10px;
    font-size: var(--text-xs);
}

/* Bottom nav child links */
.sidebar-nav-bottom .sidebar-nav-child-link {
    padding: 5px 10px;
    font-size: var(--text-xs);
}

/* Sidebar secondary bottom nav */
.sidebar-nav-bottom {
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--sidebar-border);
    margin-bottom: var(--space-1);
}
.sidebar-nav-bottom .sidebar-nav-list {
    gap: 1px;
}
.sidebar-nav-bottom .sidebar-nav-item {
    color: var(--sidebar-text);
}
.sidebar-nav-bottom .sidebar-nav-item:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text-hover);
}
.sidebar-nav-bottom .sidebar-nav-item.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}
.sidebar-nav-bottom button.sidebar-nav-group-toggle {
    padding: 5px 12px;
    font-size: var(--text-sm);
}
.sidebar-nav-bottom div.sidebar-nav-group-toggle .sidebar-nav-group-link {
    padding: 5px 4px 5px 12px;
    font-size: var(--text-sm);
}
.sidebar-nav-bottom button.sidebar-nav-group-toggle svg,
.sidebar-nav-bottom div.sidebar-nav-group-toggle .sidebar-nav-group-link svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ── Sidebar icon row (What's New / Refer / Help) ───────── */
.sidebar-icon-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px 6px;
}
.sidebar-icon-btn {
    flex: 1;
    justify-content: center;
    padding: 7px 8px;
    gap: 0;
}
button.sidebar-icon-btn {
    background: none;
    border: none;
    width: 100%;
    font: inherit;
    cursor: pointer;
}
html.sidebar-is-collapsed .sidebar-icon-row { display: none; }

/* ── What's New Panel ──────────────────────────────────── */
.whats-new-panel {
    position: fixed;
    /* Anchored above its trigger in the sidebar's bottom icon row, not
       top-right — the button lives there now, not in the topbar. */
    bottom: 64px;
    left: 12px;
    width: 360px;
    max-height: 500px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}
.whats-new-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.whats-new-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}
.whats-new-panel-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.whats-new-panel-link {
    font-size: var(--text-xs);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-medium);
}
.whats-new-panel-link:hover { text-decoration: underline; }
.whats-new-panel-body {
    overflow-y: auto;
    flex: 1;
    padding: 14px 16px;
}
.whats-new-release { margin-bottom: 14px; }
.whats-new-release:last-child { margin-bottom: 0; }
.whats-new-release-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
}
.whats-new-version {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.whats-new-date {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.whats-new-badge-latest {
    font-size: 10px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(99,102,241,0.12);
    color: var(--color-primary);
    border-radius: 100px;
    padding: 2px 7px;
    line-height: 1.4;
}
.whats-new-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.whats-new-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.5;
}
.whats-new-item-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: var(--font-semibold);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 1px;
    line-height: 1.35;
    white-space: nowrap;
}
.whats-new-item-badge.type-new      { background: rgba(99,102,241,0.1);  color: var(--color-primary); }
.whats-new-item-badge.type-improved { background: rgba(16,185,129,0.1);  color: var(--color-success); }
.whats-new-item-badge.type-fix      { background: rgba(245,158,11,0.1);  color: var(--color-warning); }
.whats-new-sep {
    height: 1px;
    background: var(--border-primary);
    margin: 2px 0 14px;
}
@media (max-width: 480px) {
    .whats-new-panel { right: 8px; left: 8px; width: auto; }
}

/* ─── Channel Spend Panel ──────────────────────────────────────────────────── */
.channel-spend-card {
    margin-bottom: var(--space-4);
}
.channel-spend-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}
.channel-spend-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition-base);
}
.channel-spend-item:hover {
    box-shadow: var(--shadow-sm);
}
.channel-spend-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.channel-spend-icon--calls {
    background: rgba(99, 102, 241, 0.12);
    color: var(--color-primary);
}
.channel-spend-icon--sms {
    background: rgba(16, 185, 129, 0.12);
    color: var(--color-success);
}
.channel-spend-icon--email {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-warning);
}
.channel-spend-icon--mail {
    background: rgba(244, 63, 94, 0.12);
    color: #f43f5e;
}
.channel-spend-details {
    min-width: 0;
}
.channel-spend-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.channel-spend-amount {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1.2;
}
.channel-spend-amount-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.spend-delta {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.spend-delta--up {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger, #ef4444);
}
.spend-delta--down {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success, #10b981);
}
.spend-delta--flat {
    background: var(--bg-tertiary, rgba(71, 85, 105, 0.05));
    color: var(--text-secondary);
}
@media (max-width: 768px) {
    .channel-spend-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
}

/* ── App cookie consent banner ──────────────────────────────── */
.app-cookie-consent {
    position: fixed;
    bottom: -120px;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 1rem 1.5rem;
    background: var(--bg-inverse, #475569);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 24px rgba(71, 85, 105, 0.3);
    transition: bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.app-cookie-consent.visible {
    bottom: 0;
}
.app-cookie-consent-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.app-cookie-consent-text {
    flex: 1;
    min-width: 200px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.5;
}
.app-cookie-consent-text svg {
    flex-shrink: 0;
    opacity: 0.55;
}
.app-cookie-consent-text a {
    color: #a5b4fc;
    text-decoration: underline;
}
.app-cookie-consent-text a:hover {
    color: #fff;
}
.app-cookie-consent-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.app-cookie-btn {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.app-cookie-btn-accept {
    background: var(--color-primary, #6366f1);
    color: #fff;
}
.app-cookie-btn-accept:hover {
    background: var(--color-primary-dark, #4f46e5);
}
.app-cookie-btn-decline {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.app-cookie-btn-decline:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
@media (max-width: 600px) {
    .app-cookie-consent-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .app-cookie-consent-actions {
        width: 100%;
    }
    .app-cookie-btn {
        flex: 1;
        text-align: center;
    }
}

/* ==========================================
   PRICING — STORAGE HINTS
   ========================================== */
.price-storage-hint {
    font-size: 0.72em;
    font-weight: 400;
    color: var(--text-tertiary);
    opacity: 0.85;
}

/* ==========================================
   FOOTER — SOCIAL LINKS
   ========================================== */
.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(148, 163, 184, 0.75);
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.footer-social-link:hover {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.4);
    color: #e0e7ff;
}
.footer-social-link svg {
    display: block;
}

/* ==========================================
   FOOTER — TRUST BADGES
   ========================================== */
.footer-trust-badges {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.footer-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(148, 163, 184, 0.65);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 4px 8px;
    white-space: nowrap;
}
.footer-trust-badge svg {
    opacity: 0.55;
    flex-shrink: 0;
}

/* ==========================================
   PRICING COMPARISON TABLE
   ========================================== */
.pricing-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-primary);
    box-shadow: 0 4px 20px rgba(71, 85, 105, 0.06);
}
.pricing-compare-table th {
    padding: 14px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--color-gray-50);
    border-bottom: 2px solid var(--border-secondary);
    text-align: center;
}
.pricing-compare-table th:first-child {
    text-align: left;
}
.pricing-compare-table td {
    padding: 10px 16px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-primary);
    text-align: center;
    vertical-align: middle;
}
.pricing-compare-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--text-primary);
}
.pricing-compare-table tr:last-child td {
    border-bottom: none;
}
.pricing-compare-table tr:hover td {
    background: rgba(99, 102, 241, 0.03);
}
.pricing-compare-popular {
    background: rgba(99, 102, 241, 0.05) !important;
    border-left: 2px solid rgba(99, 102, 241, 0.2) !important;
    border-right: 2px solid rgba(99, 102, 241, 0.2) !important;
}
.pricing-compare-group td {
    background: var(--color-gray-50) !important;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary) !important;
    padding: 8px 16px;
    border-top: 1px solid var(--border-secondary);
}
.pricing-compare-table tfoot td {
    border-top: 2px solid var(--border-secondary);
    padding: 16px;
}

/* ==========================================
   BLOG PREVIEW SECTION — HOMEPAGE
   ========================================== */
.blog-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.blog-preview-card {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
}
.blog-preview-card:hover {
    box-shadow: 0 8px 32px rgba(71, 85, 105, 0.10);
    transform: translateY(-2px);
}
.blog-preview-img-wrap {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: var(--color-gray-100);
}
.blog-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.blog-preview-card:hover .blog-preview-img {
    transform: scale(1.04);
}
.blog-preview-body {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    flex: 1;
}
.blog-preview-date {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}
.blog-preview-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.45;
    margin: 0 0 0.6rem;
}
.blog-preview-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 auto;
    padding-bottom: 0.75rem;
}
.blog-preview-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 0.75rem;
}
.blog-preview-card:hover .blog-preview-cta {
    text-decoration: underline;
}
@media (max-width: 768px) {
    .blog-preview-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   CONTACT PAGE — GRID
   ========================================== */
@media (max-width: 680px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================
   MOBILE NAV — INDUSTRY LINKS
   ========================================== */
.mobile-nav-industries-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.5);
    padding: 0.75rem 1.25rem 0.25rem;
}
.mobile-nav-industry-link {
    display: block;
    padding: 0.4rem 1.5rem;
    font-size: 0.875rem;
    color: rgba(148, 163, 184, 0.75);
    text-decoration: none;
    transition: color 0.15s;
}
.mobile-nav-industry-link:hover {
    color: #e0e7ff;
}

/* ==========================================
   PRICING PAGE — BILLING TOGGLE
   ========================================== */
.billing-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 2rem 0 3rem;
}
.billing-toggle-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.billing-save-tag {
    display: inline-block;
    background: var(--color-success);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}
.billing-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    cursor: pointer;
}
.billing-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.billing-toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--color-gray-200);
    border-radius: 26px;
    transition: background 0.25s;
}
.billing-toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.25s;
    box-shadow: 0 1px 4px rgba(71, 85, 105, 0.2);
}
.billing-toggle-switch input:checked + .billing-toggle-slider {
    background: var(--color-primary);
}
.billing-toggle-switch input:checked + .billing-toggle-slider::before {
    transform: translateX(24px);
}

/* ==========================================
   PRICE CARD — BUTTONS
   ========================================== */
.btn-price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 22px;
    border-radius: 8px;
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-price-primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 4px 14px rgba(99,102,241,0.3);
}
.btn-price-primary:hover {
    background: var(--color-primary-dark, #4f46e5);
    border-color: var(--color-primary-dark, #4f46e5);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99,102,241,0.4);
}
/* ==========================================
   PRICE CARD — GHOST/OUTLINE BUTTON
   ========================================== */
.btn-price-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.btn-price-outline:hover {
    background: var(--color-primary-subtle);
}

/* ==========================================
   PRICING FOOTNOTE
   ========================================== */
.pricing-footnote {
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-tertiary);
    margin-top: 1.5rem;
}

/* ==========================================
   LANDING PAGE UTILITY SYSTEM
   Shared classes for all interior pages.
   Zero inline styles — all token-based.
   ========================================== */

/* ── Section wrappers ─────────────────────── */
.lp-page         { padding-top: 6rem; padding-bottom: 5rem; }
.lp-page-sm      { padding-top: 4.5rem; padding-bottom: 4rem; }

/* ── Width containers (inside landing-container) ─ */
.lp-narrow  { max-width: 800px;  margin-left: auto; margin-right: auto; }
.lp-medium  { max-width: 860px;  margin-left: auto; margin-right: auto; }
.lp-wide    { max-width: 940px;  margin-left: auto; margin-right: auto; }

/* ── Spacing helpers ──────────────────────── */
.lp-mt-xs   { margin-top: 1rem; }
.lp-mt-sm   { margin-top: 1.5rem; }
.lp-mt-md   { margin-top: 2.5rem; }
.lp-mt      { margin-top: 3rem; }
.lp-mt-lg   { margin-top: 4rem; }

/* ── Prose body text ─────────────────────── */
.lp-prose {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}
.lp-prose p + p { margin-top: 1.5rem; }
.lp-prose a     { color: var(--color-primary); text-decoration: none; }
.lp-prose a:hover { text-decoration: underline; }

/* ── Callout / info box ─────────────────── */
.lp-callout {
    background: var(--color-primary-subtle);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-xl);
    padding: 2rem 2.5rem;
}
.lp-callout-center { text-align: center; }

.lp-callout-title {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}
.lp-callout-text {
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}
.lp-callout a { color: var(--color-primary); }

/* ── Section sub-headings (h2/h3 inside content) ─ */
.lp-content-h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.lp-content-h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}
.lp-content-h4 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* ── Icon colors ─────────────────────────── */
.lp-icon-primary  { color: var(--color-primary); }
.lp-icon-success  { color: var(--color-success); }

/* ── Check-list (ul with tick icons) ───────── */
.lp-check-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.lp-check-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: var(--text-md);
    color: var(--text-secondary);
}
.lp-check-item svg { flex-shrink: 0; margin-top: 3px; }
.lp-check-item a { color: var(--color-primary); }

/* ── Check-list — larger spacing variant ─── */
.lp-check-list-lg .lp-check-item { font-size: 0.95rem; gap: 0.75rem; align-items: flex-start; }
.lp-check-list-lg .lp-check-item svg { margin-top: 2px; }

/* ── Detail sections stack ───────────────── */
.lp-detail-sections { display: flex; flex-direction: column; gap: 2.5rem; }

/* ── CTA block ───────────────────────────── */
.lp-cta-block {
    text-align: center;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(16,185,129,0.06));
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-2xl);
    padding: 3rem 2rem;
}
.lp-cta-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}
.lp-cta-text {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin-bottom: 1.5rem;
}
.error-buttons,
.lp-cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.lp-cta-note {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: 1rem;
}
.lp-cta-note a { color: var(--color-primary); }

/* ── Form system ─────────────────────────── */
.lp-form-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.lp-form-title {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.lp-form-group { display: flex; flex-direction: column; gap: 0; }
.lp-form-label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.4rem;
}
.lp-form-required { color: var(--color-error); }
.lp-form-input,
.lp-form-select,
.lp-form-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius);
    font-size: var(--text-md);
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-elevated);
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.lp-form-input:focus,
.lp-form-select:focus,
.lp-form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}
.lp-form-textarea { resize: vertical; }
.lp-form-submit {
    width: 100%;
    padding: 14px;
    font-size: var(--text-lg);
    border: none;
    cursor: pointer;
}
.lp-form-error {
    background: var(--color-error-light);
    border: 1px solid var(--color-error);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: var(--text-sm);
    color: var(--color-error);
}
.lp-form-success {
    background: var(--color-success-light);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
}
.lp-form-success-title {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}
.lp-form-success-text { color: var(--text-secondary); font-size: var(--text-md); }

/* ── Contact grid ─────────────────────────── */
.lp-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

/* ── vs-page overrides ───────────────────── */
.lp-vs-table-wrap { overflow-x: auto; }
.lp-vs-table-wrap .pricing-compare-table { width: 100%; }
.lp-vs-h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }

/* ── Security / about stat badge override ── */
.stat-number-text {
    font-size: var(--text-4xl);
    font-weight: var(--font-extrabold);
    color: var(--color-primary);
    line-height: 1;
}

/* ── ROI Calculator ─────────────────────── */
.roi-inputs-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.roi-inputs-h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.lp-contact-info,
.roi-results-col {
    display: flex; flex-direction: column; gap: 1.25rem;
}
.roi-hero-card {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    border-radius: var(--radius-xl);
    padding: 2rem;
    color: var(--text-inverse);
}
.roi-hero-label { font-size: var(--text-base); font-weight: var(--font-semibold); opacity: 0.85; margin-bottom: 0.25rem; }
.roi-hero-value { font-size: 2.5rem; font-weight: var(--font-black); letter-spacing: var(--tracking-tight); }
.roi-hero-sub   { font-size: var(--text-sm); opacity: 0.75; margin-top: 0.25rem; }
.roi-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.roi-result-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-align: center;
}
.roi-result-num   { font-size: 1.8rem; font-weight: var(--font-black); }
.roi-result-label { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 0.25rem; }
.roi-result-error   { color: var(--color-error); }
.roi-result-warning { color: var(--color-warning); }
.roi-result-info    { color: var(--color-info); }
.roi-result-success { color: var(--color-success); }
.roi-recovery-card {
    background: var(--color-success-light);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}
.roi-recovery-label { font-size: var(--text-sm); font-weight: var(--font-bold); color: #065f46; margin-bottom: 0.25rem; }
.roi-recovery-value { font-size: var(--text-3xl); font-weight: var(--font-black); color: var(--color-success); }
.roi-recovery-sub   { font-size: var(--text-xs); color: #065f46; margin-top: 0.25rem; }
.roi-context-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 2rem;
}
.roi-context-title { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--text-primary); margin-bottom: 1rem; }
.roi-context-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.roi-disclaimer    { font-size: var(--text-xs); color: var(--text-tertiary); text-align: center; margin-top: 2rem; }
.roi-trial-note    { font-size: var(--text-xs); color: var(--text-tertiary); text-align: center; margin-top: 0.75rem; }
.roi-trial-btn     { display: block; text-align: center; }

/* ── Responsive: contact & roi grids ─────── */
@media (max-width: 640px) {
    .lp-contact-grid { grid-template-columns: 1fr; }
    .roi-inputs-card + .roi-results-col { margin-top: 1.5rem; }
    .lp-cta-block { padding: 2rem 1.25rem; }
}
/* ── End Landing Page Utility System ──────── */

/* ── ROI calc grid (2-col layout with responsive) ── */
.roi-calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 640px) {
    .roi-calc-grid { grid-template-columns: 1fr; }
}

/* ── Centred CTA block (standalone, no gradient bg) ── */
.lp-cta-center { text-align: center; }

/* ── btn-hero ghost variant ────────────────────────── */
.btn-hero-ghost {
    background: transparent;
    color: var(--color-gray-700);
    border: 2px solid var(--color-gray-200);
}
.btn-hero-ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
}

/* ── Responsive action button labels (icon+label on desktop, icon-only on mobile) ── */
@media (max-width: 768px) {
    .btn .btn-label { display: none; }
}

/* ==========================================
   PAGE-SPECIFIC STYLES
   (extracted from inline <style> blocks for
   browser caching & single parse on load)
   ========================================== */

/* ── Changelog page ─────────────────────────────────────────────────────── */
.cl-filter-bar { display:flex; align-items:center; gap:0.375rem; flex-wrap:wrap; }
.cl-filter-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.75rem; border-radius: 2rem;
    font-size: 0.78rem; font-weight: 600; cursor: pointer;
    border: 1.5px solid var(--border-primary);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    transition: all 0.18s;
    white-space: nowrap;
}
.cl-filter-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cl-filter-btn.cl-filter-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.cl-filter-btn svg { flex-shrink:0; }
.cl-release { transition: opacity 0.2s; }
.cl-release.cl-hidden { display: none; }
.cl-item { display:flex; align-items:flex-start; gap:0.625rem; padding: 0.35rem 0; }
.cl-item.cl-item-hidden { display: none; }
.cl-type-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    flex-shrink: 0; font-size: 0.7rem; font-weight: 700;
    padding: 0.18rem 0.55rem; border-radius: 2rem; margin-top: 0.1rem;
    letter-spacing: 0.01em; text-transform: uppercase;
}

.cl-badge-improved { background: rgba(16,185,129,0.12); color: var(--color-success); }
.cl-badge-fix     { background: rgba(245,158,11,0.12); color: var(--color-warning); }

/* ── Communication Log page ─────────────────────────────────────────────── */
.cl-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.625rem 0.25rem;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.cl-tab-btn:hover { color: var(--text-primary); }
.cl-tab-btn.cl-tab-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.cl-lc-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    vertical-align: middle;
    flex-shrink: 0;
}
.cl-lc-line {
    display: inline-block;
    width: 10px;
    height: 1.5px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── Docs page ──────────────────────────────────────────────────────────── */
.docs-layout { max-width: none; }
.docs-quicklinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 2rem; }
.docs-ql-card { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 0.6rem; color: var(--text-primary); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: border-color 0.2s, background 0.2s; }
.docs-ql-card:hover { border-color: var(--color-primary); background: var(--hover-bg, rgba(99,102,241,0.06)); color: var(--color-primary); }
.docs-ql-card svg { flex-shrink: 0; opacity: 0.7; }

.docs-body { display: flex; flex-direction: column; gap: 2.5rem; }
.docs-section { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 0.75rem; padding: 1.5rem; }
.docs-section-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; }
.docs-section-header svg { opacity: 0.75; flex-shrink: 0; color: var(--color-primary); }
.docs-section-header h2 { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.u-flex-col,
.lb-right-col,
.docs-list {
    display: flex; flex-direction: column;
}
.docs-list-item { padding: 1.1rem 0; }
.docs-list-item:first-child { padding-top: 0; }
.docs-list-item:last-child { padding-bottom: 0; }
.docs-list-item:not(:last-child) { border-bottom: 1px solid var(--border-color); }
.docs-list-item h3 { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.4rem; }
.docs-list-item p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; margin: 0; max-width: 62ch; }
.docs-list-item p + p { margin-top: 0.4rem; }
.docs-list-item a { color: var(--color-primary); text-decoration: none; }
.docs-list-item a:hover { text-decoration: underline; }

.docs-table-wrap { overflow-x: auto; margin-bottom: 1rem; }
.docs-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.docs-table th { text-align: left; padding: 0.55rem 0.75rem; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.docs-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border-color); color: var(--text-primary); }
.docs-table tr:last-child td { border-bottom: none; }
.docs-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 100px; font-size: 0.7rem; font-weight: 600; }
.docs-badge-live { background: rgba(16,185,129,0.12); color: #10b981; }
.docs-badge-beta { background: rgba(251,191,36,0.12); color: #f59e0b; }

.docs-callout { display: flex; align-items: flex-start; gap: 0.6rem; background: rgba(99,102,241,0.07); border: 1px solid rgba(99,102,241,0.18); border-radius: 0.5rem; padding: 0.75rem 1rem; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }
.docs-callout svg { flex-shrink: 0; margin-top: 1px; color: var(--color-primary); }
.docs-callout a { color: var(--color-primary); text-decoration: none; }

.docs-plan-note { margin-top: 0.5rem; }

.docs-support-cta { display: flex; align-items: center; gap: 1.25rem; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 0.75rem; padding: 1.25rem 1.5rem; }
.docs-support-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(99,102,241,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-primary); }
.docs-support-cta h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.2rem; color: var(--text-primary); }
.docs-support-cta p { font-size: 0.8rem; color: var(--text-secondary); margin: 0; }
.docs-support-cta .btn { margin-left: auto; white-space: nowrap; flex-shrink: 0; }

@media (max-width: 680px) {
    .docs-quicklinks { grid-template-columns: repeat(2, 1fr); }
    .docs-support-cta { flex-wrap: wrap; }
    .docs-support-cta .btn { margin-left: 0; }
}

/* ── Deliverability page ─────────────────────────────────────────────────── */
.deliverability-collapsed { display: none !important; }

/* ── Dashboard ──────────────────────────────────────────────────────────── */
.db-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:.75rem;align-items:stretch;}
@media(max-width:1100px){.db-kpi-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:580px){.db-kpi-grid{grid-template-columns:1fr;}}

.db-tile{background:var(--bg-elevated,#fff);border:1px solid var(--border-primary,#e2e8f0);border-radius:10px;padding:.9rem 1rem .85rem;position:relative;transition:box-shadow .15s;}
.db-tile{border-top:3px solid var(--tile-accent,var(--color-primary,#6366f1));}
.db-tile-link{cursor:pointer;}
.db-tile-link:hover{box-shadow:0 2px 12px rgba(71, 85, 105, .07);}
.db-tile-label{font-size:var(--text-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--text-secondary);margin-bottom:.2rem;}
.db-tile-val{font-size:2.15rem;font-weight:var(--font-extrabold,800);letter-spacing:-.035em;line-height:1.0;color:var(--tile-accent,var(--color-primary));margin-bottom:.05rem;}
.db-tile-val.text-error{color:#ef4444;}
.db-sparkline-wrap{position:relative;height:28px;margin:.45rem 0 .25rem;overflow:hidden;}
.db-sparkline{position:absolute;top:0;left:0;width:100% !important;height:100% !important;display:block;}
.db-tile-stats{font-size:var(--text-2xs);color:var(--text-secondary);display:flex;flex-wrap:wrap;gap:.2rem .5rem;margin-top:.2rem;}
.db-tile-events-body{display:flex;gap:.6rem;align-items:flex-start;margin-top:.05rem;}
.db-tile-events-left{flex-shrink:0;min-width:0;}
.db-tile-events-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:.12rem;padding-top:.35rem;border-left:1px solid var(--border-color,rgba(71, 85, 105, .07));padding-left:.6rem;align-items:flex-end;text-align:right;}
.db-stat-in{color:#10b981;font-weight:500;}
.db-stat-in:not(:first-child){margin-left:.45rem;}
.db-stat-out{color:var(--color-primary,#6366f1);font-weight:500;margin-left:.45rem;}
.db-stat-missed{color:#ef4444;font-weight:500;margin-left:.45rem;}

.db-signal-bar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--bg-elevated,#fff);border:1px solid var(--border-primary,#e2e8f0);border-radius:10px;margin-bottom:.75rem;overflow:hidden;}
@media(max-width:900px){.db-signal-bar{grid-template-columns:repeat(2,1fr);}}
@media(max-width:580px){.db-signal-bar{grid-template-columns:1fr;}}
.db-signal-item{display:flex;align-items:center;gap:.6rem;padding:.625rem .9rem;border-right:1px solid var(--border-primary,#e2e8f0);}
.db-signal-item:last-child{border-right:none;}
@media(max-width:900px){
  .db-signal-item:nth-child(2){border-right:none;}
  .db-signal-item:nth-child(n){border-bottom:1px solid var(--border-primary,#e2e8f0);}
  .db-signal-item:nth-child(3),.db-signal-item:nth-child(4){border-bottom:none;}
  .db-signal-item:nth-child(3){border-right:1px solid var(--border-primary,#e2e8f0);}
}
.db-signal-icon{flex-shrink:0;opacity:.7;}

.db-signal-label{font-size:var(--text-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.055em;color:var(--text-secondary);line-height:1.2;}
.db-signal-sub{font-size:var(--text-2xs);color:var(--text-secondary);display:flex;align-items:center;gap:.4rem;margin-top:2px;flex-wrap:wrap;}
.db-signal-main{font-size:var(--text-xl);font-weight:700;color:var(--color-primary);margin-left:auto;flex-shrink:0;}
.db-signal-main--ai{color:#a855f7;}

.db-charts-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:.75rem;align-items:stretch;}
.db-charts-row>.card{display:flex;flex-direction:column;}
.db-charts-row>.card>.card-body{flex:1;}
.db-charts-row .db-trend-card{grid-column:span 3;}
.db-charts-row .db-mix-card{grid-column:span 1;}
.db-charts-row .card+.card{margin-top:0;}
@media(max-width:880px){.db-charts-row{grid-template-columns:1fr;}.db-charts-row .db-trend-card,.db-charts-row .db-mix-card{grid-column:span 1;}}

.db-donut-wrap{position:relative;width:160px;height:160px;}
.db-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;}
.db-donut-center-val{font-size:var(--text-xl);font-weight:700;color:var(--color-primary);}
.db-donut-center-sub{font-size:var(--text-2xs);color:var(--text-secondary);text-align:center;}
.db-donut-legend{width:100%;font-size:var(--text-2xs);}
.db-donut-legend-row{display:flex;align-items:center;justify-content:space-between;padding:3px 0;}

.db-donut-swatch{width:10px;height:10px;border-radius:2px;display:inline-block;flex-shrink:0;}
.db-donut-legend-val{font-weight:var(--font-semibold,600);}

.db-spend-row{display:flex;align-items:center;gap:.65rem;margin-bottom:.55rem;}
.db-spend-icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.db-spend-icon--calls{background:rgba(99,102,241,.12);}
.db-spend-icon--sms{background:rgba(14,165,233,.12);}
.db-spend-icon--email{background:rgba(16,185,129,.12);}
.db-spend-icon--mail{background:rgba(245,158,11,.12);}

.db-spend-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:2px;}
.db-spend-name{font-size:var(--text-xs);font-weight:500;color:var(--text-secondary);}
.db-spend-amount{font-size:var(--text-xs);font-weight:700;color:var(--text-primary);}
.db-donut-legend-label,
.db-spend-amount-wrap {
    display:flex;align-items:center;gap:6px;
}
.db-spend-track{height:4px;background:rgba(71, 85, 105, .06);border-radius:2px;overflow:hidden;}
.db-spend-fill{height:100%;border-radius:2px;transition:width .4s ease;}
.db-spend-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.875rem;padding-top:.65rem;border-top:1px solid var(--border-primary,#e2e8f0);}

.db-card-meta{display:flex;align-items:center;gap:.75rem;}
.db-card-meta-text{font-size:var(--text-2xs);color:var(--text-secondary);}

.db-split-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.75rem;align-items:start;}
@media(max-width:880px){.db-split-row{grid-template-columns:1fr;}}

.db-roi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:.75rem;}
@media(max-width:1000px){.db-roi-grid{grid-template-columns:repeat(2,1fr);}}
.db-roi-grid--split{grid-template-columns:repeat(2,1fr);margin-bottom:0;}
.db-roi-tile{background:var(--bg-elevated,#fff);border:1px solid var(--border-primary,#e2e8f0);border-radius:10px;padding:.875rem 1rem;display:flex;align-items:center;gap:.75rem;}
.db-roi-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.db-roi-val{font-size:var(--text-xl);font-weight:700;line-height:1;color:var(--color-primary);}
.db-roi-label{font-size:var(--text-2xs);color:var(--text-secondary);margin-top:2px;}

.db-team-table tr{display:table-row !important;}
.db-team-table th,.db-team-table td{display:table-cell !important;}
.db-team-table{width:100%;border-collapse:collapse;font-size:var(--text-xs);table-layout:fixed;}
.db-team-table col.col-num{width:100px;}
.db-team-table col.col-act{width:110px;}
.db-team-table th{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);font-weight:600;padding:.75rem .75rem .45rem;text-align:center;}
.db-team-table td{padding:.4rem .75rem;border-top:1px solid var(--border-primary,#e2e8f0);vertical-align:middle;text-align:center;}
.db-team-table th:first-child,.db-team-table td:first-child{text-align:left;padding-left:1.25rem;}
.db-team-table th:last-child,.db-team-table td:last-child{text-align:right;padding-right:1.25rem;}
.db-team-bar{height:4px;background:rgba(99,102,241,.12);border-radius:2px;margin-top:4px;overflow:hidden;}
.db-team-bar-fill{height:100%;border-radius:2px;background:var(--color-primary,#6366f1);}
.db-team-top{color:var(--color-primary,#6366f1);font-weight:600;}

.kpi-change{font-size:var(--text-2xs);font-weight:600;padding:.1rem .35rem;border-radius:999px;display:inline-flex;align-items:center;gap:2px;margin-top:.15rem;white-space:nowrap;line-height:1.4;}
.kpi-change-up{background:rgba(16,185,129,.15);color:#10b981;}
.kpi-change-down{background:rgba(239,68,68,.14);color:#ef4444;}
.kpi-change-flat{background:rgba(100,116,139,.12);color:var(--text-secondary);}
.kpi-delta-vs{font-weight:400;opacity:.72;font-size:.88em;}

.kpi-goal-bar-wrap{height:3px;background:rgba(100,116,139,.18);border-radius:2px;overflow:hidden;margin-top:.35rem;}
.kpi-goal-bar-fill{height:100%;border-radius:2px;}
.kpi-goal-text{font-size:9px;color:var(--text-tertiary);text-align:right;margin-top:2px;}

.spend-delta{font-size:var(--text-2xs);font-weight:600;padding:1px 4px;border-radius:999px;white-space:nowrap;}
.spend-delta--up{background:rgba(16,185,129,.12);color:#10b981;}
.spend-delta--down{background:rgba(239,68,68,.10);color:#ef4444;}
.spend-delta--flat{background:rgba(100,116,139,.10);color:var(--text-secondary);}

.kpi-drill{cursor:pointer;border-bottom:1px dashed currentColor;}
.kpi-drill:hover{opacity:.75;}
.text-error{color:#ef4444;}

.db-header-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:1rem;gap:.75rem;flex-wrap:wrap;}
.db-header-controls{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding-bottom:2px;margin-left:auto;}

.db-signal-dot{display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-left:4px;vertical-align:middle;position:relative;top:-1px;}
.db-signal-dot--ok{background:#10b981;}
.db-signal-dot--warn{background:var(--color-warning,#f59e0b);}
.db-signal-dot--error{background:#ef4444;}
.db-signal-dot--neutral{background:var(--text-tertiary,#cbd5e1);}

.pa-badge{display:inline-flex;align-items:center;justify-content:center;background:#ef4444;color:#fff;font-size:9px;font-weight:var(--font-bold,700);border-radius:999px;min-width:16px;height:16px;padding:0 4px;margin-left:5px;vertical-align:middle;line-height:1;}

.db-section-overlay{position:absolute;inset:0;background:rgba(255,255,255,0.88);display:flex;align-items:center;justify-content:center;z-index:200;border-radius:inherit;pointer-events:all;}
[data-color-scheme="dark"] .db-section-overlay,[data-theme="dark"] .db-section-overlay{background:rgba(71, 85, 105,0.88);}

.db-trend-legend{display:flex;flex-wrap:wrap;gap:.3rem;padding:.5rem 1.5rem .25rem;}
.db-trend-check{display:inline-flex;align-items:center;gap:.38rem;padding:.22rem .55rem .22rem .28rem;border-radius:6px;border:none;font-size:.72rem;font-weight:var(--font-medium,500);cursor:pointer;user-select:none;background:none;color:var(--text-primary);transition:opacity 150ms,background 150ms;white-space:nowrap;}
.db-trend-check:hover{background:var(--bg-subtle,rgba(71, 85, 105, .05));}
.db-trend-check__box{width:13px;height:13px;border-radius:3px;border:2px solid var(--check-clr,#6366f1);background:var(--check-clr,#6366f1);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 150ms;position:relative;}
.db-trend-check__box::after{content:'';position:absolute;width:6px;height:3.5px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translate(0px,-0.5px);}
.db-trend-check[data-hidden="1"] .db-trend-check__box{background:transparent;}
.db-trend-check[data-hidden="1"] .db-trend-check__box::after{opacity:0;}
.db-trend-check[data-hidden="1"]{opacity:.5;}
.db-trend-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .65rem;border-radius:999px;border:1.5px solid transparent;font-size:.72rem;font-weight:var(--font-medium,500);cursor:pointer;user-select:none;transition:opacity 150ms,background 150ms;white-space:nowrap;background:none;}
.db-trend-pill[data-hidden="1"]{opacity:.45;filter:grayscale(.6);}

.db-export-wrap{position:relative;}
.db-export-menu{
    position:absolute;right:0;top:calc(100% + 6px);
    background:var(--bg-elevated,#fff);
    border:1px solid var(--border-primary,#e2e8f0);
    border-radius:10px;
    box-shadow:var(--shadow-dropdown,0 8px 32px rgba(71, 85, 105, .14),0 0 0 1px rgba(71, 85, 105, .06));
    min-width:190px;z-index:400;padding:.375rem 0;
    opacity:0;
    transform:translateY(-6px) scale(0.96);
    transform-origin:top right;
    pointer-events:none;
    visibility:hidden;
    transition:opacity .18s cubic-bezier(.25,.1,.25,1),transform .18s cubic-bezier(.25,.1,.25,1),visibility .18s;
}
.db-export-menu.open{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
    visibility:visible;
}
.db-export-item{display:flex;align-items:center;gap:.625rem;width:100%;padding:.5rem 1rem;font-size:var(--text-sm);font-weight:500;color:var(--text-primary);background:none;border:none;cursor:pointer;text-align:left;transition:background .12s;}
.db-export-item:hover{background:var(--color-primary-subtle,rgba(99,102,241,.07));}
.db-export-item svg{flex-shrink:0;color:var(--text-secondary);}

.db-print-header{display:none;align-items:center;gap:1.5rem;padding:.875rem 1.25rem;margin-bottom:1.25rem;background:#6366f1;border-radius:10px;color:#fff;}
.db-print-header.png-visible{display:flex;}
.db-print-logo{filter:brightness(0) invert(1);flex-shrink:0;}
.db-print-header-center{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem;}
.db-print-report-title{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.01em;}
.db-print-report-period{font-size:12px;color:rgba(255,255,255,.78);}
.db-print-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;flex-shrink:0;}
.db-print-report-date{font-size:12px;color:rgba(255,255,255,.9);font-weight:500;}
.db-print-report-url{font-size:11px;color:rgba(255,255,255,.6);}

@media print{
    .topbar,.sidebar,.db-header-controls,.db-export-wrap,.kpi-tip,
    .setup-checklist-card,.dash-twin-row,.scroll-top-btn,
    .db-section-overlay,.db-header-row .db-header-controls,
    .ai-companion-toggle,.ai-companion-panel,.ai-companion-overlay,
    .cally-greeting,.app-cookie-consent,.app-banner,
    #toast-container,.modal-overlay,#logout-confirm-modal{display:none !important;}
    .db-print-header{display:flex !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
    body{background:#fff !important;}
    .card{box-shadow:none !important;border:1px solid #e2e8f0 !important;break-inside:avoid;}
    .main-content{padding:1rem !important;}
    @page{size:A4 landscape;margin:1.2cm;}
}

.db-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;text-align:center;gap:.375rem;min-height:200px;}
.db-empty-icon{color:var(--text-secondary);opacity:.35;margin-bottom:.125rem;}
.db-empty-title{font-size:var(--text-sm);font-weight:600;color:var(--text-secondary);}
.db-empty-sub{font-size:var(--text-xs,11px);color:var(--text-tertiary,#94a3b8);}

.db-team-split-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.75rem;align-items:start;}
@media(max-width:900px){.db-team-split-row{grid-template-columns:1fr;}}

#lb-forecast-side{display:flex;flex-direction:column;gap:.5rem;}
.lb-forecast-total-card{background:var(--bg-elevated,#fff);border:1px solid var(--border-primary,#e2e8f0);border-radius:10px;padding:.875rem 1rem;}
.lb-forecast-total-lbl{font-size:var(--text-xs,11px);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;font-weight:600;}
.lb-forecast-total-val{font-size:1.6rem;font-weight:700;color:var(--color-primary);margin-top:.2rem;}
.lb-stage-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;}
@media(max-width:600px){.lb-stage-grid{grid-template-columns:1fr;}}
.lb-stage-tile{background:var(--bg-elevated,#fff);border:1px solid var(--border-primary,#e2e8f0);border-radius:8px;padding:.65rem .875rem;}
.lb-stage-tile-lbl{font-size:var(--text-xs,11px);color:var(--text-secondary);font-weight:500;}
.lb-stage-tile-val{font-size:1.1rem;font-weight:700;margin:.1rem 0;}
.lb-stage-tile-sub{font-size:10px;color:var(--text-secondary);}

.db-lb-bottom-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:.75rem;}
@media(max-width:900px){.db-lb-bottom-row{grid-template-columns:1fr;}}

.lb-source-label{font-size:var(--text-sm);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;flex-shrink:0;}

.db-lb-bottom-row > .card + .card,.db-team-split-row > .card + .card{margin-top:0;}
.db-lb-bottom-row > .card{display:flex;flex-direction:column;}
.db-lb-bottom-row > .card > .card-body{flex:1;display:flex;flex-direction:column;}

#lb-score-body .lb-score-row,#lb-source-body .lb-score-row{flex:1;margin-bottom:0;padding:.625rem 0;border-bottom:1px solid var(--border-primary,#e2e8f0);align-items:center;}
#lb-score-body .lb-score-row:last-child,#lb-source-body .lb-score-row:last-child{border-bottom:none;padding-bottom:0;}
#lb-score-body .lb-score-row:first-child,#lb-source-body .lb-score-row:first-child{padding-top:0;}

.lb-score-bar-wrap{height:10px !important;}

#lb-trend-body{display:flex;flex-direction:column;}
#lb-trend-body .lb-trend-chart{flex:1;height:auto !important;min-height:140px;}

.lb-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;flex-shrink:0;letter-spacing:.02em;user-select:none;object-fit:cover;}
.lb-avatar-sm{width:26px;height:26px;font-size:10px;}
.lb-agent-cell{display:flex;align-items:center;gap:.5rem;}

.team-visual-list{width:100%;}
.team-visual-row{display:flex;align-items:center;gap:.75rem;padding:.55rem var(--space-4);border-bottom:1px solid var(--border-primary,#e2e8f0);}
.team-visual-row:last-child{border-bottom:none;}
.team-visual-row--top{background:rgba(99,102,241,.04);}

.team-visual-name{font-size:var(--text-sm);font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:.3rem;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.team-visual-crown{font-size:12px;flex-shrink:0;}
.team-visual-stats{display:flex;align-items:center;gap:.6rem;flex-shrink:0;}

.team-visual-stat small{font-size:9px;text-transform:uppercase;letter-spacing:.03em;opacity:.75;}
.team-visual-total{font-size:var(--text-sm);font-weight:700;color:var(--text-primary);min-width:2rem;text-align:right;}

/* ── Dashboard mobile responsive ────────────────────────────────────────── */
@media(max-width:899px){
    .db-header-row{flex-direction:column;align-items:stretch;gap:.5rem;margin-bottom:.75rem;}
    .db-header-controls{justify-content:flex-start;flex-wrap:wrap;}
    #lb-rankings-card .card-body-flush{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    #lb-rankings-card .card-body-flush table{min-width:500px;}
    #db-team-card .card-body-flush{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .db-team-table{min-width:380px;table-layout:auto;}
}
@media(max-width:640px){
    .db-header-controls{flex-direction:column;align-items:stretch;gap:.4rem;}
    #period-select{width:100%;}
    .custom-date-range.is-visible{flex-wrap:wrap;gap:.375rem;}
    #custom-date-from,#custom-date-to{flex:1;min-width:110px;}
    .db-export-wrap{align-self:flex-start;}
    .db-tile{padding:.75rem .875rem .7rem;}
    .db-tile-val{font-size:1.7rem;}
    .db-signal-item{padding:.5rem .75rem;}
    .db-signal-main{font-size:var(--text-lg,1.125rem);}
    .db-mix-card .card-body>div:first-child{flex-direction:column;align-items:center;}
    .db-donut-wrap{margin:0 auto .75rem;}
    .db-donut-legend{max-width:220px;margin:0 auto;}
    .db-roi-tile{padding:.65rem .75rem;gap:.5rem;}
    .db-roi-val{font-size:1rem;}
    .db-roi-icon{width:28px;height:28px;}
    .card-header.card-header-flex{flex-wrap:wrap;gap:.375rem;}
    .db-spend-icon{width:26px;height:26px;border-radius:5px;}
    .team-visual-row{padding:.45rem .75rem;}
    .team-visual-stats{flex-wrap:wrap;gap:.3rem;}
}
@media(max-width:580px){
    .db-signal-item{border-right:none !important;border-bottom:1px solid var(--border-primary,#e2e8f0) !important;}
    .db-signal-item:last-child{border-bottom:none !important;}
}
@media(max-width:480px){
    .db-header-greeting h1{font-size:1.05rem;}
    .db-tile-val{font-size:1.4rem;}
    .db-tile{padding:.65rem .75rem .6rem;}
    .db-kpi-grid{gap:.5rem;margin-bottom:.5rem;}
    .db-signal-bar{margin-bottom:.5rem;}
    .db-charts-row{gap:.5rem;margin-bottom:.5rem;}
    .db-split-row{gap:.5rem;margin-bottom:.5rem;}
    .db-lb-bottom-row{gap:.5rem;margin-bottom:.5rem;}
    .db-team-split-row{gap:.5rem;margin-bottom:.5rem;}
    .db-roi-grid{grid-template-columns:1fr;}
    #lb-rankings-card table th,
    #lb-rankings-card table td{padding:.35rem .4rem;font-size:11px;}
    .db-team-table th,.db-team-table td{padding:.35rem .5rem;font-size:11px;}
    .priority-action-card{padding:.75rem;}
    .priority-action-icon{width:32px;height:32px;}
    .card-title{font-size:var(--text-sm,0.875rem);}
    .db-signal-main{font-size:var(--text-base,1rem);}
    .lb-source-label{max-width:none;flex:1;}
}
@media(max-width:360px){
    .db-header-greeting h1{font-size:.95rem;}
    .db-tile-val{font-size:1.2rem;}
    .db-tile{padding:.55rem .65rem .5rem;}
    .db-kpi-grid,.db-charts-row,.db-split-row{gap:.375rem;}
    .db-signal-item{padding:.4rem .6rem;}
    .priority-action-card{padding:.6rem;}
    .db-export-menu{min-width:160px;}
    .db-roi-tile{padding:.5rem .6rem;}
    .card-header{padding:.55rem .75rem;}
}

/* ==========================================
   STRUCTURAL UTILITY EXPANSION
   (complete set — eliminates all inline style patterns)
   ========================================== */

/* .page-header-actions consolidated at the top of this file. */

/* ── Spacing scale — fill gaps ──────────────────────────────────────── */
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-7  { margin-bottom: var(--space-7); }
.mb-8  { margin-bottom: var(--space-8); }
.ml-0  { margin-left: 0; }
.ml-1  { margin-left: var(--space-1); }
.ml-2  { margin-left: var(--space-2); }
.ml-3  { margin-left: var(--space-3); }
.ml-4  { margin-left: var(--space-4); }
.ml-auto { margin-left: auto; }
.mr-0  { margin-right: 0; }
.mr-1  { margin-right: var(--space-1); }
.mr-2  { margin-right: var(--space-2); }
.mr-auto { margin-right: auto; }
.my-1  { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2  { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3  { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4  { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.pb-0  { padding-bottom: 0; }
.pb-1  { padding-bottom: var(--space-1); }
.pb-2  { padding-bottom: var(--space-2); }
.pb-3  { padding-bottom: var(--space-3); }
.pb-4  { padding-bottom: var(--space-4); }
.pt-0  { padding-top: 0; }
.pt-1  { padding-top: var(--space-1); }
.pt-2  { padding-top: var(--space-2); }
.pt-3  { padding-top: var(--space-3); }
.pt-4  { padding-top: var(--space-4); }
.pl-0  { padding-left: 0; }
.pl-1  { padding-left: var(--space-1); }
.pl-2  { padding-left: var(--space-2); }
.pl-4  { padding-left: var(--space-4); }
.pr-0  { padding-right: 0; }
.pr-2  { padding-right: var(--space-2); }
.pr-4  { padding-right: var(--space-4); }

/* ── Gap scale — fill gaps ──────────────────────────────────────────── */
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.col-gap-2 { column-gap: var(--space-2); }
.col-gap-3 { column-gap: var(--space-3); }
.row-gap-2 { row-gap: var(--space-2); }
.row-gap-3 { row-gap: var(--space-3); }

/* ── Layout ─────────────────────────────────────────────────────────── */
.flex-row      { flex-direction: row; }
.align-end     { align-items: flex-end; }
.align-start   { align-items: flex-start; }
.justify-end   { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-evenly { justify-content: space-evenly; }
.justify-around { justify-content: space-around; }
.self-start    { align-self: flex-start; }
.self-end      { align-self: flex-end; }
.self-center   { align-self: center; }
.flex-0        { flex: 0 0 auto; }
.flex-auto     { flex: 1 1 auto; }
.flex-1-min    { flex: 1; min-width: 0; }
.flex-noshrink { flex-shrink: 0; }

/* ── Display ────────────────────────────────────────────────────────── */
.d-inline      { display: inline; }
.d-inline-block { display: inline-block; }
.d-contents    { display: contents; }
.invisible     { visibility: hidden; }

/* ── Width & height ─────────────────────────────────────────────────── */
.w-auto   { width: auto; }
.w-half   { width: 50%; }
.w-third  { width: 33.333%; }
.w-two-thirds { width: 66.666%; }
.w-quarter { width: 25%; }
.h-full   { height: 100%; }
.h-auto   { height: auto; }
.h-screen { height: 100vh; }
.max-w-xs  { max-width: 320px; }
.max-w-sm  { max-width: 480px; }
.max-w-md  { max-width: 640px; }
.max-w-lg  { max-width: 760px; }
.max-w-xl  { max-width: 900px; }
.max-w-2xl { max-width: 1100px; }
.min-h-0  { min-height: 0; }

/* ── Overflow ───────────────────────────────────────────────────────── */
.overflow-hidden   { overflow: hidden; }
.overflow-x-auto   { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.overflow-y-auto   { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-visible  { overflow: visible; }

/* ── Position ───────────────────────────────────────────────────────── */
.relative    { position: relative; }
.absolute    { position: absolute; }
.sticky      { position: sticky; }
.static      { position: static; }
.inset-0     { top: 0; right: 0; bottom: 0; left: 0; }
.z-0         { z-index: 0; }
.z-10        { z-index: 10; }
.z-20        { z-index: 20; }
.z-50        { z-index: 50; }

/* ── Typography ─────────────────────────────────────────────────────── */
.text-2xs  { font-size: var(--text-2xs); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.font-light    { font-weight: var(--font-light); }
.font-extrabold { font-weight: var(--font-extrabold); }
.font-black    { font-weight: var(--font-black); }
.uppercase     { text-transform: uppercase; }
.lowercase     { text-transform: lowercase; }
.capitalize    { text-transform: capitalize; }
.italic        { font-style: italic; }
.line-through  { text-decoration: line-through; }
.underline     { text-decoration: underline; }
.no-underline  { text-decoration: none; }
.tracking-wide { letter-spacing: var(--tracking-wide, 0.025em); }
.tracking-wider { letter-spacing: var(--tracking-wider, 0.05em); }
.leading-none  { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-normal { line-height: var(--leading-normal); }
.break-all     { word-break: break-all; }
.break-word    { overflow-wrap: break-word; }

/* ── Colors ─────────────────────────────────────────────────────────── */
.text-danger   { color: var(--color-error); }
.text-info     { color: var(--color-info, var(--color-primary)); }
.text-brand    { color: var(--color-primary); }
.bg-primary    { background-color: var(--bg-primary); }
.bg-elevated   { background-color: var(--bg-elevated); }
.bg-success-subtle { background: rgba(16,185,129,0.08); }
.bg-warning-subtle { background: rgba(245,158,11,0.08); }
.bg-error-subtle   { background: rgba(239,68,68,0.08); }
.bg-brand-subtle   { background: rgba(99,102,241,0.08); }

/* ── Border ─────────────────────────────────────────────────────────── */
.border-0      { border: none; }
.border        { border: 1px solid var(--border-primary); }
.border-left   { border-left: 1px solid var(--border-primary); }
.border-right  { border-right: 1px solid var(--border-primary); }
.outline-none  { outline: none; }

/* ── Cursor & interaction ───────────────────────────────────────────── */
.cursor-default { cursor: default; }
.select-none   { user-select: none; }
.pointer-events-none { pointer-events: none; }
.pointer-events-all  { pointer-events: all; }

/* ── Visual ─────────────────────────────────────────────────────────── */
.opacity-0    { opacity: 0; }
.opacity-50   { opacity: 0.5; }
.opacity-75   { opacity: 0.75; }
.shadow-none  { box-shadow: none; }
.shadow-sm    { box-shadow: var(--shadow-sm); }
.shadow-md    { box-shadow: var(--shadow-md); }
.transition   { transition: all var(--transition-fast); }

/* ── Common component patterns (replaces multi-property inline combos) */

/* Flex row with centered items and consistent gap */
.flex-center-2   { display: flex; align-items: center; gap: var(--space-2); }
.settings-section-title-info,
.flex-center-3 {
    display: flex; align-items: center; gap: var(--space-3);
}
.flex-center-4   { display: flex; align-items: center; gap: var(--space-4); }
.flex-between    { display: flex; align-items: center; justify-content: space-between; }
.flex-between-2  { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.flex-between-3  { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.flex-end        { display: flex; align-items: center; justify-content: flex-end; }
.flex-end-2      { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.onboard-steps,
.voicemail-drop-list,
.flex-col-2 {
    display: flex; flex-direction: column; gap: var(--space-2);
}
.flex-col-3      { display: flex; flex-direction: column; gap: var(--space-3); }
.flex-col-4      { display: flex; flex-direction: column; gap: var(--space-4); }
.flex-wrap-2     { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.flex-wrap-3     { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Progress bar pattern (replaces repeated height/background inline styles) */
.progress-track {
    height: 6px;
    background: var(--bg-tertiary, #e5e7eb);
    border-radius: 3px;
    overflow: hidden;
}
.progress-track--sm { height: 4px; }
.progress-track--lg { height: 10px; }
.progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
    background: var(--color-primary);
}
.progress-fill--success { background: var(--color-success, #10b981); }
.progress-fill--warning { background: var(--color-warning, #f59e0b); }
.progress-fill--danger  { background: var(--color-error, #ef4444); }

/* Status dot (replaces 7 instances of inline dot pattern) */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
}
.status-dot--success { background: var(--color-success, #10b981); }
.status-dot--warning { background: var(--color-warning, #f59e0b); }
.status-dot--danger  { background: var(--color-error, #ef4444); }
.status-dot--neutral { background: var(--text-tertiary, #94a3b8); }
.status-dot--primary { background: var(--color-primary); }

/* Info row (label + value pair used in detail views) */
.info-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-primary);
}
.info-row:last-child { border-bottom: none; }
.info-row-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    flex-shrink: 0;
}
.info-row-value {
    font-size: var(--text-sm);
    color: var(--text-primary);
    text-align: right;
    min-width: 0;
    word-break: break-word;
}

/* Compact meta text (replaces 30+ instances of font-size+color combos) */
.meta-text {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}
.meta-text--2xs { font-size: var(--text-2xs); }
.meta-text--muted { color: var(--text-tertiary); }

/* Icon wrapper (replaces inline width/height on icon containers) */
.icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-lg,
.u-icon-lg,
.icon-wrap--sm {
    width: 24px; height: 24px;
}
.icon-xl,
.icon-wrap--md {
    width: 32px; height: 32px;
}
.icon-wrap--lg  { width: 40px; height: 40px; }
.icon-wrap--xl  { width: 48px; height: 48px; }
.icon-wrap--circle { border-radius: 50%; }
.icon-wrap--rounded { border-radius: var(--radius-lg); }

/* Scrollable table wrapper (replaces inline overflow-x:auto on tables) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* .badge consolidated — see "8. BADGE COMPONENTS". */
.badge--success { background: rgba(16,185,129,0.12); color: var(--color-success, #10b981); }
.badge--warning { background: rgba(245,158,11,0.12); color: var(--color-warning, #f59e0b); }
.badge--danger  { background: rgba(239,68,68,0.12);  color: var(--color-error, #ef4444); }
.priority-action-icon--ai,
.cl-badge-new,
.badge--primary {
    background: rgba(99,102,241,0.12); color: var(--color-primary);
}
.badge--neutral { background: rgba(100,116,139,0.10); color: var(--text-secondary); }

/* Section separator (replaces spacer divs) */
.section-gap   { margin-bottom: var(--space-4); }
.section-gap--lg { margin-bottom: var(--space-6); }
.section-gap--sm { margin-bottom: var(--space-2); }

/* ── Grid utilities ─────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-start-1 { grid-column-start: 1; }

@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .col-span-2, .col-span-3 { grid-column: span 1; }
}
@media (max-width: 900px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Dropdown menu item button (replaces 4x inline style in contacts.php) */
.dropdown-item-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-primary);
    text-align: left;
    transition: background 0.15s;
    border-radius: 0;
}
.dropdown-item-btn:hover { background: var(--bg-secondary); }

/* ── Quota/billing row (label + value spaced apart, used in billing section) */
.quota-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-1);
}
.quota-row .quota-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}
.quota-row .quota-value {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ── Warning/alert hint text (replaces inline font-size + color combos) */
.hint-error   { font-size: var(--text-xs); color: var(--color-error, #ef4444); margin-top: var(--space-1); }
.hint-warning { font-size: var(--text-xs); color: var(--color-warning, #f59e0b); margin-top: var(--space-1); }
.hint-muted   { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-1); }

/* ── Subscription feature chip (replaces display:flex;align-items:center;gap:0.3rem;font-size:var(--text-xs)...) */
.feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
}

/* ── Icon with label row (settings icon check rows) */
.icon-label-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-primary);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.icon-label-row:last-child { border-bottom: none; }

/* ==========================================
   RE (Real Estate) KANBAN COMPONENTS
   Extracts static props from inline styles across re-acquisitions/buyers/dispositions
   ========================================== */

/* Kanban board wrapper */
.re-kanban {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-4);
    min-height: 500px;
}

/* Stage column */
.re-stage-col {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Stage header */
.re-stage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}
.re-stage-header-title {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
}
.lb-forecast-sub,
.re-stage-header-count {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* Cards area inside stage column */
.re-stage-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 80px;
    padding: 2px;
}

/* Individual lead/buyer card */
.re-lead-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.re-lead-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--border-secondary, var(--color-primary));
}

/* Stage pill in summary bar */
.re-stage-pill,
.acq-stage-pill,
.disp-stage-pill,
.buyer-stage-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: opacity 0.15s;
    user-select: none;
}
.re-stage-pill:hover,
.acq-stage-pill:hover,
.disp-stage-pill:hover,
.buyer-stage-pill:hover { opacity: 0.75; }
.re-stage-pill.inactive,
.acq-stage-pill.inactive { opacity: 0.4; }

/* Stage summary bar */
.re-summary-bar {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    align-items: center;
}

/* Toolbar above kanban */
.re-toolbar {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}
.re-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}
.re-search-wrap .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-tertiary);
}
.re-search-wrap .form-control {
    padding-left: 32px;
}
.re-score-btns {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* ==========================================
   COMMUNICATION LOG TABLE PATTERNS
   ========================================== */
.cl-cell-date  { white-space: nowrap; color: var(--text-secondary); font-size: var(--text-sm); }
.cl-cell-type  { color: var(--text-secondary); font-size: var(--text-sm); }
.cl-cell-trunc { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.cl-cell-wide  { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-cell-meta  { font-size: 11px; color: var(--text-secondary); margin-top: 2px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-lc-wrap    { display: flex; align-items: center; gap: 2px; margin-top: 5px; }

/* ==========================================
   SEARCH INPUT WITH ICON PATTERN
   (search icon absolutely positioned inside form-control)
   ========================================== */
.input-icon-wrap {
    position: relative;
}
.input-icon-wrap .input-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-tertiary);
}
.input-icon-wrap .form-control {
    padding-left: 32px;
}

/* ==========================================
   AI SPOTLIGHT BANNER PATTERN
   (phone-logs.php gradient info banner)
   ========================================== */
.ai-spotlight-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-elevated));
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

/* ==========================================
   FINAL UTILITY ADDITIONS — pass 5 targets
   ========================================== */

/* Text sizes — sub-xs */
.text-3xs   { font-size: 9px; line-height: 1.2; }

/* Decoration / color shortcuts */
.link-inherit { text-decoration: none; color: inherit; }
.link-inherit:hover { text-decoration: underline; }
.link-no-dec  { text-decoration: none; }

/* Icon fixed sizes */
.icon-16  { width: 16px; height: 16px; }
.icon-20  { width: 20px; height: 20px; }

/* Inline code / monospace tag */
.code-tag {
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--text-xs);
    font-family: var(--font-mono, monospace);
    color: var(--text-primary);
}

/* Tiny badge / label pill */
.tag-xs {
    font-size: var(--text-xs);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    line-height: 1.4;
    display: inline-block;
}

/* Plain button (no chrome, inline icon button) */
.btn-plain {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-secondary);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-plain:hover { color: var(--text-primary); }

/* Text colors */
.text-warning  { color: var(--color-warning, #f59e0b); }
.text-inherit  { color: inherit; }

/* Line-height */
.lh-tight     { line-height: 1.3; }
.lh-snug      { line-height: 1.4; }
.lh-relaxed   { line-height: 1.6; }

/* 2-column grid */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.grid-2.gap-2 { gap: var(--space-2); }
.grid-2.gap-3 { gap: var(--space-3); }
@media (max-width: 600px) {
    .grid-2 { grid-template-columns: 1fr; }
}

/* Flex shorthand combos */
.d-flex.align-start  { align-items: flex-start; }
.d-flex.align-end    { align-items: flex-end; }
.d-flex.justify-between { justify-content: space-between; }
.d-flex.justify-end  { justify-content: flex-end; }
.d-flex.justify-center { justify-content: center; }
.flex-start { justify-content: flex-start; }

/* gap-1 */

/* Margin shorthands */
.mr-3  { margin-right: var(--space-3); }
.ms-auto { margin-left: auto; }
.me-auto { margin-right: auto; }

/* Infobox pattern (used in account/settings) */
.infobox {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
}
.infobox-center {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    text-align: center;
}

/* Stat / KPI big number */
.stat-lg {
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    color: var(--color-primary);
    line-height: 1.1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STRUCTURAL OVERHAUL — Component & Utility Classes
   Replaces inline styles across all templates for a clean, maintainable HTML
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard KPI tile stat variants ───────────────────────────────────── */
.db-tile-stats--bordered {
    margin: 0;
    padding-top: .2rem;
    border-top: 1px solid var(--border-color, rgba(71, 85, 105, .07));
}
.db-tile-stats--col {
    margin: 0;
    flex-direction: column;
    gap: .18rem;
}
.db-tile-stats--col .kpi-goal-bar-wrap {
    margin-top: .2rem;
    width: 100%;
    min-width: 60px;
}
.db-kpi-hot-pct { font-size: .7rem; color: var(--text-secondary); }

/* ── Dashboard trend legend header variant ──────────────────────────────── */
.db-trend-legend--right {
    padding: 0;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .25rem;
}

/* ── Dashboard chart card bodies ────────────────────────────────────────── */
.card-body--chart {
    padding: .25rem 1.5rem 1rem;
    position: relative;
}
.card-body--donut {
    padding: 0.5rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
}

/* ── Dashboard leads trend sub-section ──────────────────────────────────── */
.db-leads-section {
    margin-top: .75rem;
    padding-top: .65rem;
    border-top: 1px solid var(--border-primary, #e2e8f0);
}
.db-leads-section-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .35rem;
}
.db-leads-section-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary);
}
.db-leads-trend-empty {
    font-size: .75rem;
    color: var(--text-secondary);
    text-align: center;
    padding: .5rem 0;
}

/* ── Dashboard donut legend row variants ────────────────────────────────── */
.db-donut-legend-row--sep {
    margin-bottom: .3rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--border-color);
}
.db-donut-legend-row--delta { margin-top: .1rem; }
.db-donut-legend-comp { font-size: .68rem; color: var(--text-dim); }

/* ── Email deliverability strip ─────────────────────────────────────────── */
.email-deliv-strip { margin-bottom: .875rem; overflow: hidden; }
.card-header--compact { padding: .625rem 1rem; }

.email-deliv-link:hover { color: var(--text-primary); text-decoration: underline; }
.email-deliv-period {
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 4px;
}
.email-deliv-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid var(--border-primary);
}
@media (max-width: 900px) {
    .email-deliv-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 500px) {
    .email-deliv-grid { grid-template-columns: repeat(2, 1fr); }
}
.email-deliv-cell { padding: .625rem .875rem; }
.email-deliv-cell--sep { border-left: 1px solid var(--border-primary); }
.email-deliv-cell-label {
    font-size: var(--text-2xs);
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
}
.email-deliv-cell-val {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.email-deliv-num {
    font-size: 1.125rem;
    font-weight: 700;
}

/* ── AI ROI tile icon color variants ────────────────────────────────────── */
.db-roi-icon--indigo  { background: rgba(99, 102, 241, 0.12); }
.db-roi-icon--green   { background: rgba(16, 185, 129, 0.12); }
.db-roi-icon--blue    { background: rgba(14, 165, 233, 0.12); }
.db-roi-icon--gray    { background: rgba(100, 116, 139, 0.10); }
.db-roi-tile--locked  { opacity: 0.55; pointer-events: none; }
.db-roi-label-est     { font-size: 0.7em; opacity: .6; }
.db-roi-tile-upgrade  { font-size: 9px; font-weight: 600; color: var(--color-primary); pointer-events: all; }

/* ── AI Spotlight banner ─────────────────────────────────────────────────── */
.ai-spotlight {
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-elevated));
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.ai-spotlight--task  { border-left: 3px solid #ef4444; }
.ai-spotlight--grade { border-left: 3px solid #f59e0b; }
.ai-spotlight-content { flex: 1; min-width: 0; }
.ai-spotlight-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 3px;
}
.ai-spotlight-body { /* uses .text-sm .text-secondary directly */ }
.ai-spotlight-dismiss {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-secondary);
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.ai-spotlight-dismiss:hover { opacity: 1; }
.briefing-item-icon,
.ai-spotlight-icon {
    flex-shrink: 0; margin-top: 2px;
}

/* ── Logs layout ─────────────────────────────────────────────────────────── */
.logs-layout { display: flex; gap: var(--space-4); }
@media (max-width: 768px) { .logs-layout { flex-direction: column; } }

/* ── Bulk actions bar ───────────────────────────────────────────────────── */
.bulk-actions-bar {
    display: none;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
}
.bulk-actions-bar.active { display: flex; }
.bulk-select-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}
.bulk-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.event-checkbox-cell {
    width: 16px;
    height: 16px;
    display: inline-block;
}

/* ── Audit payload pre blocks ───────────────────────────────────────────── */
.audit-pre {
    padding: var(--space-2);
    font-size: var(--text-xs);
    max-height: 400px;
    overflow-y: auto;
    border-left-width: 3px;
    border-left-style: solid;
}
.audit-pre--provider {
    background: var(--color-primary-subtle);
    border-left-color: var(--color-primary);
}
.audit-pre--crm {
    background: var(--color-success-light);
    border-left-color: var(--color-success);
}
.audit-pre--error {
    background: var(--color-error-light);
    border-left-color: var(--color-error);
}
.audit-pre--empty { color: var(--text-tertiary); font-style: italic; }

/* ── Contacts AI Insights ───────────────────────────────────────────────── */
.ai-ins-score-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
}
.ai-ins-trend {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.ai-ins-sublabel {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
}
.ai-ins-action-text {
    font-size: var(--text-sm);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
.ai-ins-action-btns {
    display: flex;
    gap: var(--space-2);
    margin-bottom: 0;
    flex-wrap: wrap;
}
.ai-ins-summary-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ── Call Grade items ───────────────────────────────────────────────────── */
.grade-item {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--text-sm);
}
.grade-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.grade-score {
    font-size: 1.2em;
    font-weight: 700;
}
.grade-cats {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-1);
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.grade-tips {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-dim);
    font-style: italic;
}

/* ── Pending AI Action items ────────────────────────────────────────────── */
.pending-action-item {
    font-size: var(--text-sm);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color);
}
.pending-action-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.pending-action-reason {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ── Assigned-to inline editor ──────────────────────────────────────────── */
.assigned-to-actions {
    display: none;
    gap: var(--space-1);
    flex-shrink: 0;
}
.assigned-to-actions.active { display: flex; }

/* ── Misc inline-style replacements ─────────────────────────────────────── */
.mb-875 { margin-bottom: .875rem; }
.min-w-300 { min-width: 300px; }
.font-size-inherit { font-size: inherit; }
.opacity-55 { opacity: 0.55; }
.pointer-none { pointer-events: none; }
.pointer-all  { pointer-events: all; }
.email-deliv-link,
.card-header-link-sm {
    font-size: var(--text-2xs);
    color: var(--text-secondary);
    text-decoration: none;
}
.card-header-link-sm:hover { color: var(--text-primary); }
.kpi-hot-delta { /* positioned next to hot-pct */ }
.text-70 { font-size: .7rem; }
.text-68 { font-size: .68rem; }
.text-72 { font-size: .72rem; }
.font-700 { font-weight: 700; }
.font-600 { font-weight: 600; }
.m-0-gap-18 { margin: 0; gap: .18rem; }
.ml-35 { margin-left: .35rem; }
.card-body--compact { padding: var(--space-2) var(--space-3); }
.card-header--sm { padding: var(--space-2) var(--space-3); }
.db-roi-grid--split > .db-roi-tile { position: relative; }

/* ── Additional filter/form utilities ───────────────────────────────────── */
.logs-search-input { width: 200px; }
.form-select--auto { width: auto; }
@media (max-width: 600px) { .logs-search-input { width: 100%; } }

/* ── Donut swatch swatches (colors stay inline since they're dynamic) ───── */
/* ── Inline-style audit panel payload min-width ─────────────────────────── */
.payload-panel.min-w-300 { min-width: 300px; }
.mt-2px { margin-top: 2px; }

/* ── 404 page ─────────────────────────────────────────────────────────────── */
.lp-alt { background: var(--bg-secondary, #f8f9fc); }
.section-subtitle { font-size: var(--text-lg); color: var(--text-secondary); text-align: center; max-width: 640px; margin: 0 auto 1.5rem; line-height: 1.6; }
.e404-section { min-height: calc(100vh - 140px); display: flex; align-items: center; }
.e404-wrap { text-align: center; padding: var(--space-12, 3rem) 0; }
.e404-bignum { font-size: 9rem; font-weight: 900; line-height: 1; color: var(--brand); opacity: 0.12; margin-bottom: var(--space-2, 0.5rem); letter-spacing: -0.04em; }
.e404-actions { display: flex; gap: var(--space-3, 0.75rem); justify-content: center; margin: var(--space-8, 2rem) 0; flex-wrap: wrap; }
.e404-links-section { margin-top: var(--space-10, 2.5rem); }
.e404-links-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-4, 1rem); }
.e404-link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3, 0.75rem); max-width: 580px; margin: 0 auto; }
.e404-link-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-2, 0.5rem); padding: var(--space-4, 1rem); border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--surface, #fff); color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm); font-weight: var(--font-medium); transition: all 0.2s; }
.e404-link-card:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-subtle, #ede9fe); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99,102,241,0.12); }
.e404-link-cta { background: var(--brand-subtle, #ede9fe); border-color: var(--brand); color: var(--brand); }
.e404-link-cta:hover { background: var(--brand); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   CALLABLY v4 — Compact High-Density UI System
   Research-backed patterns: Linear · Notion · HubSpot · Intercom.
   Pure override layer — no removals, only targeted enhancements.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Compact page header — consolidated into the single .page-header
   definition near the top of this file (search "5. CARD COMPONENTS"). ── */

/* ── 2. Sidebar nav sizing: main items larger, sub-items smaller ─────── */

/* More breathing room between top-level list items */
.sidebar-nav-list {
    gap: 6px !important;
}

/* Main nav items — text-base (14px), medium weight */
.sidebar-nav-item {
    padding: 8px 12px !important;
    font-size: var(--text-base) !important;
    font-weight: var(--font-medium) !important;
}
button.sidebar-nav-group-toggle {
    padding: 8px 12px !important;
    font-size: var(--text-base) !important;
    font-weight: var(--font-medium) !important;
}
.sidebar-nav-group-link {
    padding: 8px 4px 8px 12px !important;
    font-size: var(--text-base) !important;
    font-weight: var(--font-medium) !important;
}
.sidebar-nav-group-chevron-btn {
    padding: 8px 12px 8px 8px !important;
}
.sidebar-nav-group-toggle {
    font-size: var(--text-base) !important;
}

/* Secondary navigation sits at the bottom of the rail. Keep these rows at
   least as dense as the primary navigation, even though the compact layer
   above intentionally gives primary rows more breathing room. */
.sidebar-nav-group-secondary + .sidebar-nav-group-secondary {
    margin-top: -2px;
}
.sidebar-nav-group-secondary > button.sidebar-nav-group-toggle,
.sidebar-nav-bottom button.sidebar-nav-group-toggle {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
.sidebar-nav-group-secondary > div.sidebar-nav-group-toggle .sidebar-nav-group-link,
.sidebar-nav-bottom div.sidebar-nav-group-toggle .sidebar-nav-group-link {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
.sidebar-nav-group-secondary > div.sidebar-nav-group-toggle .sidebar-nav-group-chevron-btn,
.sidebar-nav-bottom div.sidebar-nav-group-toggle .sidebar-nav-group-chevron-btn {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
.sidebar-nav-bottom .sidebar-nav-list {
    gap: 4px !important;
}
.sidebar-bottom {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Sub-items — text-xs (12px), normal weight, tighter */
.sidebar-nav-child-link {
    font-size: var(--text-xs) !important;
    font-weight: var(--font-normal) !important;
    padding: 5px var(--space-3) !important;
}

/* More gap between child items for readability */
.sidebar-nav-group-children {
    gap: 2px !important;
}

/* ── 3. Tighter form groups — consolidated into the single .form-group
   definition near the top of this file. ── */
.form-label {
    margin-bottom: 3px !important;
    font-size: var(--text-sm) !important;
}
.form-text.text-muted { font-size: var(--text-xs) !important; }

/* ── 3b. Lead sidebar empty-state labels — balanced top/bottom spacing ── */
.lead-notes-empty {
    padding-top: var(--space-2) !important;
    padding-bottom: var(--space-2) !important;
}

/* ── 4. Compact card headers & bodies — consolidated into the single
   .card-header/.card-body definition in "5. CARD COMPONENTS" near the
   top of this file. ── */
.collapsible-header {
    padding: var(--space-3) var(--space-4) !important;
}
/* Uniform height for all lead sidebar section headers */
.lead-sidebar-section .collapsible-header {
    min-height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Shrink buttons inside section headers so they don't inflate the row */
.lead-sidebar-section .collapsible-header .btn {
    padding: 0.25rem 0.6rem !important;
    font-size: var(--text-2xs) !important;
    line-height: 1.4 !important;
}
.collapsible-title {
    font-size: var(--text-sm) !important;
    font-weight: var(--font-semibold) !important;
}
.collapsible-status {
    font-size: var(--text-xs) !important;
}

/* ── 5. Denser tables ──────────────────────────────────────────────────── */
.data-table th {
    padding: 0.4rem var(--space-3) !important;
    font-size: 0.65rem !important;
}
.data-table td {
    padding: 0.45rem var(--space-3) !important;
    font-size: var(--text-sm) !important;
}
.table th {
    padding: 0.4rem var(--space-3) !important;
}
.table td {
    padding: 0.45rem var(--space-3) !important;
}

/* ── 5b. Lead sidebar section UX improvements ──────────────────────────── */

/* Icon-only action buttons (hide text labels) */
.lead-sidebar-section .btn-label { display: none !important; }

/* Full-width content — appointment items get consistent side padding */
.lead-appt-item { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }

/* Hover/tap-reveal action buttons — visibility is driven entirely from JS
   (see the IIFE in contacts.php that forces inline opacity/pointer-events
   with !important), so there's exactly one thing controlling it. This is
   just the transition and a visible default in case JS hasn't run yet. */
.item-actions {
    transition: opacity 0.15s ease;
}

/* Files section search bar */
.files-search-wrap {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-primary);
}
.files-search-input {
    width: 100%;
    padding: 4px 8px;
    font-size: var(--text-xs);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
}
.files-search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-alpha, rgba(99,102,241,0.15)); }
.lead-file-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-primary); }
.lead-file-item:last-child { border-bottom: none; }
.lead-file-item.hidden { display: none !important; }

/* ── 6. Page toolbar — inline search + filter bar ─────────────────────── */
.page-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 8px var(--space-3);
    box-shadow: var(--shadow-xs);
}
.page-toolbar-divider {
    width: 1px; height: 18px;
    background: var(--border-secondary);
    flex-shrink: 0;
}
.page-toolbar-label {
    font-size: var(--text-2xs);
    font-weight: var(--font-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    flex-shrink: 0;
}
.page-toolbar .form-control,
.page-toolbar .form-select,
.page-toolbar .logs-search-input,
.page-toolbar select {
    height: 30px !important;
    padding: 0 0.625rem !important;
    font-size: var(--text-sm) !important;
    border-radius: var(--radius-md) !important;
    min-width: 0;
}
.page-toolbar .btn, .page-toolbar button.btn {
    height: 30px !important;
    padding: 0 var(--space-3) !important;
    font-size: var(--text-sm) !important;
}
.page-toolbar-spacer { flex: 1; }
.page-toolbar input[type="text"].logs-search-input {
    min-width: 160px;
    max-width: 220px;
}

/* ── 7. Settings vertical tab layout ──────────────────────────────────── */
.settings-layout {
    display: grid;
    grid-template-columns: 192px 1fr;
    gap: var(--space-5);
    align-items: start;
}
.stab-nav {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    position: sticky;
    top: 72px;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.stab-nav-section-title {
    padding: 8px var(--space-2) 4px;
    font-size: var(--text-2xs);
    font-weight: var(--font-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1;
}
.stab-nav-section-title:not(:first-child) {
    margin-top: var(--space-2);
    border-top: 1px solid var(--border-primary);
    padding-top: 10px;
}
.stab-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    line-height: 1.3;
}
.stab-link:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.stab-link.active {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    font-weight: var(--font-medium);
}
.stab-content { min-width: 0; }
.stab-panel { display: none; }
.stab-panel.active { display: block; }
@media (max-width: 768px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }
    .stab-nav {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: var(--space-2);
    }
    .stab-nav-section-title { display: none; }
    .stab-link { padding: 5px var(--space-2); font-size: var(--text-xs); flex: none; }
}

/* ── 8. Compact KPI strip ──────────────────────────────────────────────── */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.kpi-strip-tile {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: var(--shadow-xs);
}
.kpi-strip-tile-value {
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    color: var(--text-primary);
    letter-spacing: -0.04em;
    line-height: 1;
}
.kpi-strip-tile-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--font-medium);
    margin-top: 2px;
}

/* ── 9. Empty state component ─────────────────────────────────────────── */
/* Single source of truth for .empty-state and its children — this family
   used to be defined 3-4x across this file with conflicting padding and,
   worse, a bug: .empty-state-icon set opacity:0.5 on the wrapper AND
   .empty-state svg set opacity:0.22 on the icon inside it, which multiply
   (≈0.11 final) rather than replace — icons rendered far fainter than any
   single rule intended. Opacity now lives only on .empty-state-icon. */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10) var(--space-4);
    text-align: center;
    color: var(--text-dim);
}
.empty-state-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-3);
    color: var(--text-dim);
    opacity: 0.45;
}
.empty-state-icon svg {
    width: 100%;
    height: 100%;
    opacity: 1;
}
.empty-state-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
}
.empty-state-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-4);
    max-width: 360px;
    line-height: 1.5;
}
/* Optional ghost-row preview: faint skeleton bars above the icon, fading out,
   suggesting the table/list rows this empty state precedes rather than
   leaving the icon+title floating alone in blank space. */
.empty-state-ghost {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 280px;
    margin: 0 0 var(--space-5);
}
.empty-state-ghost-row {
    height: 12px;
    width: 100%;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
}
.empty-state-ghost-row:nth-child(1) { opacity: 0.9; }
.empty-state-ghost-row:nth-child(2) { width: 82%; opacity: 0.55; }
.empty-state-ghost-row:nth-child(3) { width: 64%; opacity: 0.3; }
.empty-state-ghost-row:nth-child(4) { width: 46%; opacity: 0.15; }

/* .seq-cards-grid/.seq-flow-card*: consolidated — see "SEQUENCE FLOW
   CARDS" near the top of this file. */

/* ── 11. Playbook card compact ────────────────────────────────────────── */
.playbook-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-primary);
    transition: background var(--transition-fast);
}
.playbook-item:last-child { border-bottom: none; }
.playbook-item:hover { background: var(--bg-secondary); }

.playbook-item-meta {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.call-bar-controls,
.playbook-item-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* ── 12. Pipeline kanban compact ──────────────────────────────────────── */
.pipeline-board {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-3);
    align-items: flex-start;
    min-height: 60vh;
}
.pipeline-col-header {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.pipeline-col-title {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
}
.pipeline-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin: var(--space-2) var(--space-2) 0;
    box-shadow: var(--shadow-xs);
    cursor: grab;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.pipeline-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.pipeline-card-name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    margin: 0 0 4px;
}
.pipeline-card-meta {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── 13. Communication log compact rows ──────────────────────────────── */
.comm-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-primary);
    transition: background var(--transition-fast);
}
.comm-row:last-child { border-bottom: none; }
.comm-row:hover { background: var(--bg-secondary); }

/* ── 14. Calendar sync connect card ──────────────────────────────────── */
.connect-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
}
.connect-card-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.connect-card-info { flex: 1; min-width: 0; }
.playbook-item-title,
.connect-card-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 2px;
}
.api-desc,
.connect-card-desc {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 0;
}

/* ── 15. Leads toolbar compact ───────────────────────────────────────── */
.leads-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}
.leads-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── Universal data-table toolbar controls ────────────────────────────── */
.data-table-workspace-card { overflow: visible; }
.data-table-workspace-card > .card-header { overflow: visible; }
.data-table-workspace-card .contacts-list-body { padding-top: 0; }
.data-table-workspace-card .contacts-board-body { padding-top: var(--space-4); }
.table-toolbar .leads-toolbar-actions { position: relative; margin-left: auto; }
.table-icon-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.table-search {
    display: inline-flex;
    align-items: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: transparent;
    transition: width .22s cubic-bezier(.4,0,.2,1), background .15s ease, border-color .15s ease;
}
.table-search .table-search-trigger {
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    border: 0 !important;
    border-radius: var(--radius-md);
    background: transparent;
}
.table-search.is-open {
    width: min(280px, 36vw);
    background: var(--bg-elevated);
    border-color: var(--border-secondary);
}
.table-search .table-search-input {
    flex: 1;
    width: 0;
    min-width: 0;
    height: 32px;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background-color: transparent !important;
    background-image: none !important;
    opacity: 0;
    pointer-events: none;
    box-shadow: none !important;
    transition: opacity .15s ease;
}
.table-search.is-open .table-search-input {
    width: auto;
    padding: 0 var(--space-3) 0 0;
    opacity: 1;
    pointer-events: auto;
}
.table-search .table-search-input:focus,
.table-search .table-search-input:focus-visible {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
.table-overflow { position: relative; display: inline-flex; }
.table-overflow-menu {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 6px);
    right: 0;
    width: max-content;
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-dropdown);
}
.table-overflow-menu[hidden] { display: none !important; }
/* Same open/close motion as the Cally chat panel (.ai-companion-panel), anchored to the 3-dot button. */
.table-overflow-menu {
    opacity: 0;
    transform: scale(0.15) translateY(-40px);
    transform-origin: top right;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.table-overflow.is-open > .table-overflow-menu {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    visibility: visible;
}
@media (prefers-reduced-motion: reduce) { .table-overflow-menu { transition: none; } }
.table-overflow-menu button,
.table-overflow-menu a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--text-sm);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.table-overflow-menu button:hover,
.table-overflow-menu a:hover { background: var(--bg-hover); }
.table-overflow-divider { height: 1px; margin: 5px 4px; background: var(--border-primary); }
.table-toolbar .appt-view-toggle { height: 34px; }
.table-toolbar .appt-view-toggle button {
    width: 34px;
    min-width: 34px;
    height: 32px;
    padding: 0 !important;
    justify-content: center;
    line-height: 1;
}

@media (max-width: 700px) {
    .table-toolbar { align-items: flex-start; }
    .table-toolbar .leads-toolbar-actions { width: 100%; justify-content: flex-end; flex-direction: row; }
    .table-toolbar .table-icon-button { width: 34px !important; max-width: 34px !important; }
    .table-toolbar .table-search .table-search-input { width: 0 !important; max-width: 0 !important; }
    .table-search.is-open { order: -1; width: 100%; }
    .table-toolbar .table-search.is-open .table-search-input { width: 100% !important; max-width: none !important; }
}

/* ── 16. Log entry compact ───────────────────────────────────────────── */
.log-entry {
    border-bottom: 1px solid var(--border-primary);
    transition: background var(--transition-fast);
}
.log-entry:hover { background: var(--color-primary-subtle); }
.log-entry:last-child { border-bottom: none; }

/* ── Universal sortable table headers ─────────────────────────────────── */
.sort-th { cursor:pointer; user-select:none; white-space:nowrap; }
.sort-th:hover { color:var(--color-primary); }
.sort-th .sort-icon { margin-left:3px; font-size:0.65em; opacity:0.35; vertical-align:middle; display:inline-block; width:1em; text-align:center; }
.sort-th-active { color:var(--color-primary); }
.sort-th-active .sort-icon { opacity:1; }

/* ── Shared component library additions ──────────────────────────────────
   Backs comp_tabs_nav()/comp_tab_panel()/comp_bulk_toolbar() in
   app/templates/components/components.php. .stab-btn horizontal-tab
   styling is lifted verbatim from settings.php's previously page-local
   inline <style> block so every page adopting the shared component gets
   the exact same look already proven there.
   ─────────────────────────────────────────────────────────────────── */

/* Backs comp_info_tip(). The badge itself is pure CSS; the popup content is
   positioned by a small global handler (initInfoTips() in header.php) into a
   position:fixed element appended to <body> — a plain CSS ::after/::before
   popup gets clipped by any ancestor with overflow:hidden (e.g. .card,
   .collapsible-body use it for rounded corners / the collapse height
   animation), which cut tooltips off inside cards. Fixed positioning escapes
   that regardless of ancestor. */
.info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    font-size: 10px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    line-height: 1;
    cursor: help;
    margin-left: var(--space-1);
    vertical-align: middle;
}
.info-tip-float {
    position: fixed;
    background: var(--text-primary);
    color: var(--bg-primary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 400;
    white-space: normal;
    max-width: 260px;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 3000;
    pointer-events: none;
}
.info-tip-float.visible {
    opacity: 1;
}
.info-tip-float::after {
    content: '';
    position: absolute;
    left: var(--tip-arrow-left, 50%);
    transform: translateX(-50%);
    border: 5px solid transparent;
}
.info-tip-float.arrow-bottom::after {
    top: 100%;
    border-top-color: var(--text-primary);
}
.info-tip-float.arrow-top::after {
    bottom: 100%;
    border-bottom-color: var(--text-primary);
}
/* Reset every box-model property the bare .stab-nav (Settings' sticky vertical
   sidebar) rule above sets — CSS cascades per-property across all matching
   rules, so without these resets a horizontal [data-tab-group] tab bar still
   inherits position:sticky/top:72px/background/border/padding/box-shadow from
   the sidebar rule despite the extra selector specificity, which sticks the
   tab bar mid-viewport and lets it intercept clicks on whatever scrolls
   underneath it (e.g. AI Actions' pagination bar). */
.stab-nav[data-tab-group] { display:flex; gap:0; border:none; border-bottom:2px solid var(--border-color); border-radius:0; margin-bottom:var(--space-4); padding:0; position:static; top:auto; background:none; box-shadow:none; overflow-x:auto; overflow-y:visible; scrollbar-width:none; }
.stab-nav[data-tab-group]::-webkit-scrollbar { display:none; }
.stab-nav[data-tab-group] .stab-btn { background:none; border:none; cursor:pointer; padding:var(--space-2) var(--space-4); font-size:var(--text-sm); font-weight:var(--font-medium); color:var(--text-secondary); border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:color .15s,border-color .15s; }
.stab-nav[data-tab-group] .stab-btn.active { color:var(--color-primary); border-bottom-color:var(--color-primary); }
.stab-nav[data-tab-group] .stab-btn:hover:not(.active) { color:var(--text-primary); }
.tab-panel.d-none { display:none; }
/* settings.php's own tab-panel visibility toggle (its switchSettingsTab() JS predates
   comp_tab_panel()'s .tab-panel/.d-none convention and uses show-when-.active instead —
   kept as its own class so that JS doesn't need to change, just centralized here). */
.settings-tab-panel { display:none; }
.settings-tab-panel.active { display:block; }

.bulk-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; padding:var(--space-2) var(--space-3); margin-bottom:var(--space-3); background:var(--color-primary-subtle); border:1px solid var(--color-primary-light); border-radius:var(--radius-md); }
.bulk-toolbar.d-none { display:none; }
.bulk-toolbar-count { font-size:var(--text-sm); font-weight:var(--font-semibold); color:var(--text-primary); }
.bulk-toolbar-actions { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }

/* ==========================================
   CONTACTS IMPORT WIZARD (app/templates/pages/user/contacts-import.php)
   Relocated from an inline <style> block — a small numbered step-wizard
   pattern (step circle + connector + column-mapping row). Only this page
   uses it (verified via grep); moved here for the same single-source-of-
   truth reason as the rest of this file.
   ========================================== */
.ci-step{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:80px;}
.ci-step-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--text-sm);background:var(--bg-secondary);color:var(--text-tertiary);border:2px solid var(--border-color);transition:all 0.2s;}
.ci-step.active .ci-step-num{background:var(--color-primary,#6366f1);color:#fff;border-color:var(--color-primary,#6366f1);}
.ci-step.done .ci-step-num{background:var(--color-success,#10b981);color:#fff;border-color:var(--color-success,#10b981);}
.team-visual-stat,
.ci-step-label {
    font-size:var(--text-xs);color:var(--text-secondary);white-space:nowrap;
}
.ci-step.active .ci-step-label,.ci-step.done .ci-step-label{font-weight:600;}
.ci-step.active .ci-step-label{color:var(--color-primary,#6366f1);}
.ci-step.done .ci-step-label{color:var(--color-success,#10b981);}
.ci-step-connector{flex:1;height:2px;background:var(--border-color);margin-top:-16px;transition:background 0.2s;}
.ci-step-connector.done{background:var(--color-success,#10b981);}
.ci-map-row{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);align-items:center;padding:var(--space-2) 0;border-bottom:1px solid var(--border-color);}
.ci-map-row:last-child{border-bottom:none;}
.ci-map-col-name{font-size:var(--text-sm);font-family:monospace;background:var(--bg-secondary);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ci-map-arrow{color:var(--text-tertiary);font-size:1.1rem;}

/* ==========================================
   WEB FORMS GRID (app/templates/pages/user/webforms.php)
   Relocated from an inline <style> block — only this page uses .wf-*
   (verified via grep).
   ========================================== */
.wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-4)}
.wf-card{background:var(--bg-primary);border:1.5px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.wf-card:hover{border-color:var(--color-primary);box-shadow:0 4px 16px rgba(99,102,241,.1)}
.wf-card-header{padding:var(--space-4);border-bottom:1px solid var(--border-default);display:flex;align-items:flex-start;gap:12px}
.wf-card-icon{width:40px;height:40px;border-radius:10px;background:var(--color-primary-subtle,#eef2ff);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai-action-card-content,
.db-signal-texts,
.db-spend-meta,
.team-visual-body,
.re-feed-body,
.wf-card-meta {
    flex:1;min-width:0;
}
.wf-card-name{font-size:var(--text-base);font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.wf-card-slug{font-size:var(--text-xs);color:var(--text-muted);font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-card-body{padding:var(--space-3) var(--space-4);display:flex;align-items:center;justify-content:space-between}
.wf-stat{text-align:center}
.wf-stat-val{font-size:var(--text-lg);font-weight:700;color:var(--text-primary)}
.wf-stat-lbl{font-size:var(--text-xs);color:var(--text-muted)}
.wf-card-footer{padding:var(--space-3) var(--space-4);border-top:1px solid var(--border-default);display:flex;gap:var(--space-2);align-items:center}
.wf-badge-active{background:#dcfce7;color:#166534;padding:3px 8px;border-radius:12px;font-size:var(--text-xs);font-weight:600}
.wf-badge-paused{background:#fef9c3;color:#854d0e;padding:3px 8px;border-radius:12px;font-size:var(--text-xs);font-weight:600}

/* Keep panel shadows understated. */
.card, .kpi-card, .db-tile, .pipeline-card, .re-lead-card, .prop-card, .wf-card, .playbook-card, .seq-flow-card { box-shadow: none !important; }
.form-control, .form-select, .form-input, .btn, .stab-btn { box-shadow: none; }
.prop-card > div:first-child { height: 1px !important; }

/* Subtle corner treatment; preserve existing production colors and layout. */
:root { --radius: 3px; --radius-sm: 3px; --radius-md: 3px; --radius-lg: 3px; --radius-xl: 3px; --radius-2xl: 3px; --radius-full: 3px; }
*, *::before, *::after { border-radius: 3px !important; }

/* The universal rule above rounds every corner, including the flush,
   edge-to-edge chrome containers below — since .sidebar clips with
   overflow:hidden and .topbar/.app-main sit flush against the
   viewport and each other, a rounded corner there clips a sliver of
   the page background into view at the seam instead of just softening
   a card. Keep those containers square. */
.app-shell, .app-main, .sidebar, .sidebar-logo, .sidebar-nav, .sidebar-bottom, .topbar {
    border-radius: 0 !important;
}

/* ==========================================
   CONTACT PREVIEW PANEL TABS (app/templates/pages/user/contacts.php)
   Relocated from an inline <style> block — the #contact-preview-panel
   slide-over's own tab/field-row styling. Only this page uses the cp-tab,
   cp-field, and cp-edit class prefixes (verified via grep; distinct from the unrelated
   .cp-* classes in the standalone private_checkout.php page, which use
   different suffixes and don't collide).
   ========================================== */
.cp-tab-nav{display:flex;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0;}
.cp-tab-btn{flex:1;padding:var(--space-2) var(--space-1);font-size:var(--text-xs);font-weight:500;color:var(--text-secondary);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color 0.15s,border-color 0.15s;white-space:nowrap;}
.cp-tab-btn.active{color:var(--color-primary,#6366f1);border-bottom-color:var(--color-primary,#6366f1);}
.cp-tab-btn:hover:not(.active){color:var(--text-primary);}
.cp-tab-panel{display:none;padding:var(--space-4);flex:1;overflow-y:auto;}
.cp-tab-panel.active{display:block;}
.cp-field-row{display:flex;gap:var(--space-2);margin-bottom:var(--space-2);font-size:var(--text-sm);}
.cp-field-label{color:var(--text-tertiary);white-space:nowrap;min-width:88px;padding-top:2px;}
.cp-field-val{color:var(--text-primary);flex:1;min-width:0;}
.cp-feedback{font-size:var(--text-xs);margin-top:var(--space-1);min-height:16px;}
.cp-edit-view{display:block;}
.cp-edit-form{display:none;}
#contact-preview-panel.cp-editing .cp-edit-view{display:none;}
#contact-preview-panel.cp-editing .cp-edit-form{display:block;}
.cp-edit-form .cp-field-row{align-items:center;}
.cp-edit-form .form-control{font-size:var(--text-sm);padding:var(--space-1) var(--space-2);}

/* ==========================================
   AI ACTIONS TOOLBAR — bulk-select bar (app/templates/pages/user/ai-actions.php)
   Relocated from inline style="" attributes on every element (the clearest
   "not managed from a single defined section" violation found in the user
   pages audit). All display:none/flex/inline toggling stays fully driven
   by updateAIBulkBar()/activateAISelectAll()/etc.'s direct .style.display
   writes in the page's own <script> — those always win over a class since
   inline style has higher specificity, so converting the *initial* markup
   from style="" to these classes doesn't change any JS-driven show/hide
   behavior, only where the values live.
   ========================================== */
.ai-toolbar-search { display:flex; gap:var(--space-2); align-items:center; flex-wrap:wrap; }
.ai-toolbar-search .logs-search-input { max-width:200px; }

/* ==========================================
   AUTHENTICATED APP THEMES
   A complete light/dark surface system shared by admin and user workspaces.
   data-theme is set synchronously in header.php to avoid a flash on load.
   ========================================== */
:root[data-theme="light"] {
    color-scheme: light;
    --color-primary: #4f46e5;
    --color-primary-btn: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-primary-light: rgba(79, 70, 229, 0.13);
    --color-primary-subtle: rgba(79, 70, 229, 0.08);
    --color-success: #047857;
    --color-success-light: rgba(4, 120, 87, 0.12);
    --color-warning: #b45309;
    --color-warning-dark: #92400e;
    --color-warning-light: rgba(180, 83, 9, 0.12);
    --color-error: #be123c;
    --color-error-dark: #9f1239;
    --color-error-light: rgba(190, 18, 60, 0.11);
    --color-info: #4f46e5;
    --color-info-light: rgba(79, 70, 229, 0.12);

    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-elevated: #ffffff;
    --bg-surface: #ffffff;
    --bg-inverse: #ffffff;
    --bg-hover: rgba(71, 85, 105, 0.055);
    --text-primary: #475569;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-muted: #64748b;
    --text-dim: #64748b;
    --text-inverse: #ffffff;
    --border-color: #d7dee8;
    --border-default: #d7dee8;
    --border-primary: rgba(71, 85, 105, 0.11);
    --border-secondary: rgba(71, 85, 105, 0.20);

    --sidebar-bg: #ffffff;
    --sidebar-bottom-bg: #ffffff;
    --sidebar-border: #dce3ec;
    --sidebar-text: #475569;
    --sidebar-text-hover: #475569;
    --sidebar-active-text: #3730a3;
    --sidebar-hover-bg: #f1f5f9;
    --sidebar-hover: #f1f5f9;
    --sidebar-active-bg: #eef2ff;
    --sidebar-rail-color: #cbd5e1;
    --sidebar-rail-active-color: #6366f1;
    --header-bg: #ffffff;
    --header-border: #dce3ec;
    --header-nav-text: #475569;
    --header-nav-hover: #475569;

    --shadow-xs: 0 1px 2px rgba(71, 85, 105, 0.06);
    --shadow-sm: 0 2px 8px rgba(71, 85, 105, 0.08);
    --shadow-md: 0 6px 20px rgba(71, 85, 105, 0.10);
    --shadow-lg: 0 12px 34px rgba(71, 85, 105, 0.14);
    --shadow-dropdown: 0 14px 36px rgba(71, 85, 105, 0.16);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-primary: #a5b4fc;
    --color-primary-btn: #4f46e5;
    --color-primary-btn-hover: #4338ca;
    --color-primary-btn-active: #3730a3;
    --color-primary-hover: #c7d2fe;
    --color-primary-light: rgba(129, 140, 248, 0.20);
    --color-primary-subtle: rgba(129, 140, 248, 0.13);
    --color-success: #34d399;
    --color-success-light: rgba(52, 211, 153, 0.15);
    --color-warning: #fbbf24;
    --color-warning-dark: #fcd34d;
    --color-warning-light: rgba(251, 191, 36, 0.16);
    --color-error: #fb7185;
    --color-error-dark: #fda4af;
    --color-error-light: rgba(251, 113, 133, 0.16);
    --color-info: #a5b4fc;
    --color-info-light: rgba(165, 180, 252, 0.16);

    --color-white: #111827;
    --color-gray-50: #111827;
    --color-gray-100: #172033;
    --color-gray-200: #1e293b;
    --color-gray-300: #334155;
    --color-gray-400: #94a3b8;
    --color-gray-500: #cbd5e1;
    --color-gray-600: #cbd5e1;
    --color-gray-700: #e2e8f0;
    --color-gray-800: #f1f5f9;
    --color-gray-900: #f8fafc;
    --gray-800: 15, 23, 42;
    --gray-700: 17, 24, 39;

    /* Dark mode uses true depth: a near-black canvas, dark navy navigation,
       and visibly elevated surfaces. Light-theme tokens above stay unchanged. */
    --bg-primary: #0f172a;
    --bg-secondary: #0b1120;
    --bg-tertiary: #1e293b;
    --bg-elevated: #111827;
    --bg-surface: #111827;
    --bg-inverse: #0f172a;
    --bg-card: #111827;
    --card-bg: #111827;
    --color-surface: #111827;
    --bg-subtle: #172033;
    --bg-hover: rgba(148, 163, 184, 0.10);
    --text-primary: #f8fafc;
    --text-secondary: #f1f5f9;
    --text-tertiary: #e2e8f0;
    --text-muted: #e2e8f0;
    --text-dim: #cbd5e1;
    --text-inverse: #ffffff;
    --text-dark: #f8fafc;
    --border-color: #334155;
    --border-default: #334155;
    --border-light: rgba(148, 163, 184, 0.12);
    --border-primary: rgba(148, 163, 184, 0.20);
    --border-secondary: rgba(148, 163, 184, 0.34);

    --sidebar-bg: #0f172a;
    --sidebar-bottom-bg: #0f172a;
    --sidebar-border: rgba(148, 163, 184, 0.18);
    --sidebar-text: #f1f5f9;
    --sidebar-text-hover: #ffffff;
    --sidebar-active-text: #ffffff;
    --sidebar-hover-bg: rgba(148, 163, 184, 0.10);
    --sidebar-hover: rgba(148, 163, 184, 0.10);
    --sidebar-active-bg: rgba(79, 70, 229, 0.48);
    --sidebar-rail-color: #334155;
    --sidebar-rail-active-color: #c7d2fe;
    --header-bg: #0f172a;
    --header-border: rgba(148, 163, 184, 0.18);
    --header-nav-text: #f1f5f9;
    --header-nav-hover: #ffffff;

    --shadow-xs: 0 1px 3px rgba(2, 6, 23, 0.30);
    --shadow-sm: 0 4px 12px rgba(2, 6, 23, 0.34);
    --shadow-md: 0 8px 24px rgba(2, 6, 23, 0.40);
    --shadow-lg: 0 16px 40px rgba(2, 6, 23, 0.48);
    --shadow-dropdown: 0 18px 44px rgba(2, 6, 23, 0.56);
    --shadow-input: inset 0 0 0 1px rgba(148, 163, 184, 0.10);
}

html[data-theme] body,
html[data-theme] .app-shell,
html[data-theme] .app-main {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

html[data-theme="dark"] body {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

html[data-theme="light"] .sidebar-logo-img,
html[data-theme="light"] .topbar-logo img { filter: none !important; }
html[data-theme="dark"] .sidebar-logo-img,
html[data-theme="dark"] .topbar-logo img { filter: brightness(0) invert(1) !important; }

html[data-theme="light"] .sidebar,
html[data-theme="light"] .topbar { box-shadow: none; }
html[data-theme="light"] .app-cookie-consent {
    background: var(--bg-elevated);
    border-top-color: var(--border-secondary);
    box-shadow: 0 -8px 26px rgba(71, 85, 105, 0.10);
}
html[data-theme="light"] .app-cookie-consent-text { color: var(--text-secondary); }
html[data-theme="light"] .app-cookie-consent-text a { color: var(--color-primary-hover); }
html[data-theme="light"] .app-cookie-consent-text a:hover { color: var(--text-primary); }
html[data-theme="light"] .app-cookie-btn-decline {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
    color: var(--text-secondary);
}
html[data-theme="light"] .app-cookie-btn-decline:hover { background: #e2e8f0; color: var(--text-primary); }

.topbar-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    width: 34px;
    padding: 0;
    border: 1px solid var(--sidebar-border);
    background: transparent;
    color: var(--sidebar-text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.topbar-theme-btn:hover,
.topbar-theme-btn[aria-expanded="true"] { color: var(--sidebar-text-hover); background: var(--sidebar-hover); }
.theme-icon { flex: none; }
.topbar-theme-label { display: none; }
[data-theme="light"] .theme-icon-dark,
[data-theme="dark"] .theme-icon-light { display: none; }

.theme-menu { width: 270px; padding: 7px; }
.theme-menu-heading {
    padding: 5px 8px 7px;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.theme-option {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 8px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.theme-option:hover { background: var(--bg-tertiary); }
.theme-option.active { background: var(--color-primary-subtle); color: var(--color-primary-hover); }
.theme-option-icon { display: grid; place-items: center; color: var(--text-secondary); }
.theme-option strong,
.theme-option small { display: block; }
.theme-option strong { font-size: var(--text-sm); line-height: 1.25; }
.theme-option small { margin-top: 2px; color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.3; }
.theme-option-check { opacity: 0; color: var(--color-primary); font-weight: var(--font-bold); }
.theme-option.active .theme-option-check { opacity: 1; }

/* Native controls and frequently reused legacy surfaces must follow the
   resolved theme even when a page predates the semantic design tokens. */
html[data-theme] :is(input, select, textarea) { color-scheme: inherit; }
html[data-theme="dark"] :is(.form-control, .form-select, .form-input, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="password"], input[type="date"], input[type="time"], textarea, select) {
    background-color: var(--bg-elevated);
    border-color: var(--border-secondary);
    color: var(--text-primary);
}
html[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--text-tertiary); opacity: 1; }
html[data-theme="dark"] :is(.modal-content, .modal-card, .drawer, .slide-panel, .dropdown-menu, .popover, .tooltip-content) {
    background-color: var(--bg-elevated);
    border-color: var(--border-primary);
    color: var(--text-primary);
}
html[data-theme="dark"] :is(.table, .data-table) :is(th, td) { border-color: var(--border-primary); }
html[data-theme="dark"] :is(.table, .data-table) thead th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: var(--font-bold);
}
html[data-theme="dark"] :is(.table, .data-table) tbody tr:hover { background: var(--bg-hover); }
html[data-theme="dark"] .page-loader { background: var(--bg-secondary); }
html[data-theme="dark"] .card { box-shadow: 0 1px 3px rgba(2,6,23,.32), 0 0 0 1px rgba(148,163,184,.05) !important; }

@media (max-width: 700px) {
    .topbar-theme-label { display: none; }
    .topbar-theme-btn { width: 34px; padding: 0; }
    .theme-menu { position: fixed; top: 58px; right: 10px; left: auto; width: min(270px, calc(100vw - 20px)); }
}

@media (prefers-reduced-motion: reduce) {
    .topbar-theme-btn, .theme-option { transition: none; }
}

/* ── Lead detail: per-number / per-email action icons and number status ── */
/* Phone and Email sit to the right of their label like every other field;
   each number/address is its own line: number + status + Call/Text. */
.lead-detail-row--multi { align-items: flex-start; }
.lead-detail-row--multi > .lead-detail-label { padding-top: 3px; }
.lead-detail-row--multi > .lead-detail-value { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.lead-phone-line { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
/* Phones: the sidebar is the screen width (<440px), too narrow for label +
   line side by side — put the label above so each line still fits on one row. */
@media (max-width: 767px) {
    .lead-detail-row--multi { flex-direction: column; align-items: stretch; gap: 6px; }
    .lead-detail-row--multi > .lead-detail-label { padding-top: 0; }
}
.lead-phone-line > .lead-phone-num { flex-shrink: 0; white-space: nowrap; }
.lead-phone-line > .phone-status-pill, .lead-phone-line > .phone-type-badge {
    flex-shrink: 1; min-width: 0; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;
}
.lead-phone-line > .phone-row-actions { flex-shrink: 0; margin-left: auto; }
.lead-phone-line > .phone-status-empty { display: none; }
.lead-phone-row:hover .lead-phone-line > .phone-status-empty,
.lead-phone-row.tap-reveal .lead-phone-line > .phone-status-empty,
.lead-phone-line > .phone-status-empty:focus-visible { display: inline-block; }
.lead-phone-num { color: var(--text-primary); font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 4px; padding: 1px 3px; margin: -1px -3px; transition: background .15s; }
.lead-phone-num:hover, .lead-phone-num:focus-visible { background: var(--bg-secondary); outline: none; }
.lead-phone-num.inline-editing { cursor: default; background: none; padding: 0; margin: 0; }
.lead-phone-num .inline-edit-input { width: 15ch; display: inline-block; }
.lead-email-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-radius: 4px; padding: 1px 3px; margin: -1px -3px; transition: background .15s; }
.lead-email-text:hover, .lead-email-text:focus-visible { background: var(--bg-secondary); outline: none; }
.lead-email-line.inline-editing .lead-email-text { cursor: default; background: none; padding: 0; margin: 0; }
.lead-email-text .inline-edit-input { width: 100%; }
/* With emails present, each address is its own edit target — the field as a whole isn't. */
#lead-field-email:has(.lead-email-line) { cursor: default; }
#lead-field-email:has(.lead-email-line):hover { background: none; border-bottom-color: transparent; }
.phone-status-select { width: auto; max-width: 140px; padding: 0 .4rem !important; font-size: 12px !important; height: 24px !important; }
.phone-row-actions { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.phone-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; flex-shrink: 0;
    border: 1px solid var(--border-primary); border-radius: var(--radius-sm);
    background: var(--bg-elevated, #fff); color: var(--text-secondary);
    cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.phone-action-btn:hover:not([disabled]) { color: var(--color-primary); border-color: var(--color-primary); background: var(--bg-secondary); }
.phone-action-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.phone-action-btn[disabled] { opacity: .45; cursor: not-allowed; }
.phone-action-call:not([disabled]) { color: var(--color-success, #16a34a); }
.phone-action-call:hover:not([disabled]) { color: var(--color-success, #16a34a); border-color: var(--color-success, #16a34a); }
.lead-email-line { display: flex; align-items: center; gap: 6px; }


.lead-email-line .phone-action-btn { margin-left: auto; flex-shrink: 0; }
.phone-status-pill {
    display: inline-flex; align-items: center; gap: 3px;
    font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.4;
    padding: 1px 6px; border: none; border-radius: 999px; cursor: pointer;
    background: var(--bg-secondary); color: var(--text-secondary);
}
.phone-status-pill:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
/* "+ Status" only shows on hover/focus of its row so unset numbers stay uncluttered. */
.phone-status-empty { display: none; background: none; border: 1px dashed var(--border-primary); color: var(--text-tertiary); font-weight: 500; }
.lead-phone-row:hover .phone-status-empty, .lead-phone-row.tap-reveal .phone-status-empty, .phone-status-empty:focus-visible { display: inline-flex; }
.phone-status-empty:hover { color: var(--color-primary); border-color: var(--color-primary); }
.phone-status-valid { background: #dcfce7; color: #166534; }
.phone-status-landline { background: #dbeafe; color: #1e40af; }
.phone-status-wrong_number, .phone-status-disconnected, .phone-status-do_not_call { background: #fee2e2; color: #991b1b; }
.phone-status-ai { font-size: 9px; font-weight: 700; padding: 0 3px; border-radius: 3px; background: rgba(255,255,255,.7); }
html[data-theme="dark"] .phone-status-valid { background: rgba(34,197,94,.18); color: #86efac; }
html[data-theme="dark"] .phone-status-landline { background: rgba(59,130,246,.18); color: #93c5fd; }
html[data-theme="dark"] .phone-status-wrong_number, html[data-theme="dark"] .phone-status-disconnected, html[data-theme="dark"] .phone-status-do_not_call { background: rgba(239,68,68,.18); color: #fca5a5; }
html[data-theme="dark"] .phone-status-ai { background: rgba(255,255,255,.14); }

/* Lead sidebar: click the Pipeline Stage badge to change it in place. */
/* The stage badge is a dropdown: a chevron sits inside it at all times (touch
   screens have no hover), and it lifts with a ring on hover/focus. */
.lead-stage-editable { cursor: pointer; display: inline-flex; border-radius: 999px; }
.lead-stage-editable .badge { display: inline-flex; align-items: center; gap: 3px; transition: box-shadow .15s, filter .15s; }
.lead-stage-chevron { flex-shrink: 0; opacity: .75; transition: transform .15s; }
.lead-stage-editable:hover .badge, .lead-stage-editable:focus-visible .badge { box-shadow: 0 0 0 2px var(--color-primary-light, rgba(99,102,241,.25)); filter: brightness(.97); }
.lead-stage-editable:hover .lead-stage-chevron { opacity: 1; transform: translateY(1px); }
.lead-stage-editable:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Status pills open a picker, so they carry a small chevron. */
.phone-status-pill:not(.phone-status-empty)::after {
    content: ''; flex-shrink: 0; width: 8px; height: 8px; opacity: .7;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.phone-status-pill:not(.phone-status-empty):hover { filter: brightness(.96); box-shadow: 0 0 0 1px currentColor inset; }
.lead-stage-menu {
    position: fixed; z-index: 10050; min-width: 160px; max-height: 320px; overflow-y: auto; padding: 4px;
    background: var(--bg-elevated); border: 1px solid var(--border-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.lead-stage-menu-item {
    display: block; width: 100%; text-align: left; padding: 6px 10px; border: none; background: none; cursor: pointer;
    font: inherit; font-size: 13px; color: var(--text-primary); border-radius: var(--radius-sm);
}
.lead-stage-menu-item:hover, .lead-stage-menu-item:focus-visible { background: var(--bg-secondary); outline: none; }
.lead-stage-menu-item.is-current { color: var(--color-primary); font-weight: 600; }
.lead-delete-btn { color: var(--color-error); border-color: var(--color-error); background: var(--bg-elevated); }
.lead-delete-btn:hover { background: var(--color-error-light); }

/* Address suggestions under the inline Mailing Address editor. */
.contact-addr-ac {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 10000;
    max-height: 220px; overflow-y: auto; margin-top: 2px;
    background: var(--bg-elevated); border: 1px solid var(--border-primary);
    border-radius: 6px; box-shadow: var(--shadow-lg);
}
.contact-addr-ac-item { padding: 8px 12px; cursor: pointer; font-size: 0.8rem; line-height: 1.4; border-bottom: 1px solid var(--border-primary); color: var(--text-primary); }
.contact-addr-ac-item:last-child { border-bottom: none; }
.contact-addr-ac-item:hover { background: var(--bg-secondary); }

/* Shared phone/email validation message (public/js/contact-validation.js). */
.contact-validation-hint { margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--color-error, #dc2626); }
input.is-invalid { border-color: var(--color-error, #dc2626) !important; }

/* SMS composer and Quick Actions: explicit From / To pickers. */
.sms-route { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--text-xs); color: var(--text-tertiary); min-width: 0; }
.sms-route-field { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; margin: 0; font-weight: 400; }
.sms-route-label { font-weight: 600; color: var(--text-secondary); flex-shrink: 0; }
.sms-route-select {
    font: inherit; font-size: var(--text-xs); color: var(--text-primary); background: var(--bg-elevated);
    border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 1px 4px; height: 22px;
    max-width: 240px; min-width: 0; text-overflow: ellipsis; cursor: pointer;
}
.sms-route-select:disabled { cursor: default; opacity: 1; background: transparent; border-color: transparent; padding-left: 0; appearance: none; -webkit-appearance: none; }
.sms-route-field--from { margin-left: auto; }
.sms-route-note { color: var(--color-error, #dc2626); }
.sms-route-note:empty { display: none; }
.email-from-value { color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.email-route .sms-route-select { max-width: 280px; }
.email-route input.form-control { height: 28px; padding: 2px 8px; font-size: var(--text-xs); min-width: 200px; }

/* Contacts → Clean up data */
.cleanup-summary { font-size: var(--text-sm); color: var(--text-secondary); margin: var(--space-2) 0 var(--space-3); }
.cleanup-list { max-height: 55vh; overflow: auto; }
.cleanup-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cleanup-table th { text-align: left; font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); padding: 6px 8px; border-bottom: 1px solid var(--border-primary); position: sticky; top: 0; background: var(--bg-elevated); }
.cleanup-table td { padding: 8px; border-bottom: 1px solid var(--border-primary); vertical-align: top; }
.cleanup-value { font-family: var(--font-mono, monospace); word-break: break-all; }
.cleanup-fix { white-space: nowrap; text-align: right; }
.cleanup-done { color: var(--color-success, #16a34a); font-weight: 600; font-size: var(--text-xs); }
@media (max-width: 640px) { .cleanup-table th:nth-child(3), .cleanup-table td:nth-child(3) { display: none; } }

/* Contacts → AI catch-up */
.aicu-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: var(--space-2) 0 var(--space-3); }
.aicu-stats > div { border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 8px 10px; font-size: var(--text-xs); color: var(--text-secondary); }
.aicu-num { display: block; font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
.aicu-cap { display: flex; align-items: center; gap: 8px; }
.aicu-cap input { width: 110px; }
.aicu-job { margin-top: var(--space-3); padding: 10px 12px; border-radius: var(--radius-md); background: var(--bg-secondary); display: flex; flex-direction: column; gap: 4px; }

/* ── Contacts: compact Smart Lists menu ─────────────────────────────── */
.sl-strip { display:flex; align-items:center; gap:8px; padding:6px 0; flex-wrap:wrap; border-bottom:1px solid var(--border-color); margin-bottom:8px; }
.sl-label { font-size:var(--text-xs); font-weight:600; color:var(--text-secondary); white-space:nowrap; text-transform:uppercase; letter-spacing:.05em; }
.table-views-host > .sl-strip { padding:4px var(--space-4); margin:0; }
.sl-menu-wrap { position:relative; }
.sl-trigger { display:inline-flex; align-items:center; gap:8px; max-width:260px; padding:4px 10px; border:1px solid var(--border-color); border-radius:999px; background:var(--surface-secondary); color:var(--text-primary); font-size:var(--text-xs); font-weight:500; cursor:pointer; line-height:1.4; }
.sl-trigger > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sl-trigger:hover { border-color:var(--color-primary); }
.sl-trigger.active { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.sl-menu { position:absolute; z-index:60; top:calc(100% + 6px); left:0; width:300px; max-width:calc(100vw - 32px); background:var(--bg-elevated); border:1px solid var(--border-primary); border-radius:var(--radius-md); box-shadow:var(--shadow-dropdown); padding:8px; }
.sl-menu[hidden] { display:none; }
.sl-search { width:100%; padding:6px 8px; font-size:var(--text-xs); border:1px solid var(--border-color); border-radius:6px; background:transparent; color:var(--text-primary); margin-bottom:6px; }
.sl-items { max-height:320px; overflow-y:auto; }
.sl-group { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary); padding:8px 6px 3px; }
.sl-item { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:var(--text-xs); color:var(--text-primary); }
.sl-item:hover { background:var(--surface-secondary); }
.sl-item.active { background:color-mix(in srgb, var(--color-primary) 12%, transparent); color:var(--color-primary); font-weight:600; }
.sl-item.active .sl-item-name::before { content:"\2713  "; }
.sl-ai-row { color:var(--color-primary); font-weight:600; }
.sl-item-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sl-item-actions { display:inline-flex; gap:2px; opacity:0; flex-shrink:0; }
.sl-item:hover .sl-item-actions, .sl-item:focus-within .sl-item-actions { opacity:1; }
@media (hover:none) { .sl-item-actions { opacity:1; } }
.sl-item-actions button { border:0; background:transparent; color:var(--text-secondary); cursor:pointer; padding:0 4px; font-size:13px; line-height:1.3; border-radius:4px; }
.sl-item-actions button:hover { background:var(--border-color); color:var(--text-primary); }
.sl-empty { padding:10px 8px; font-size:var(--text-xs); color:var(--text-secondary); }
.sl-save-btn { border:0; background:transparent; color:var(--color-primary); font-size:var(--text-xs); font-weight:600; cursor:pointer; padding:4px 6px; }
.sl-save-btn:hover { text-decoration:underline; }
.sl-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:var(--space-3, 12px); padding:8px 10px; border-radius:var(--radius); background:color-mix(in srgb, var(--color-primary) 8%, transparent); box-shadow:inset 3px 0 0 var(--color-primary); }
.sl-chips[hidden] { display:none; }
.sl-chips-title { width:100%; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-primary); }
.sl-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 4px 2px 8px; border-radius:999px; background:var(--color-primary); color:#fff; font-size:var(--text-xs); }
.sl-chip button { border:0; background:transparent; color:#fff; cursor:pointer; font-size:14px; line-height:1; padding:0 4px; opacity:.85; }
.sl-chip button:hover { opacity:1; }

/* Filter panel: groups that currently have a value stand out */
.filter-panel .filter-group { position:relative; }
.filter-panel .filter-group.has-filter { padding:8px 10px; margin-left:-10px; margin-right:-10px; border-radius:var(--radius); background:color-mix(in srgb, var(--color-primary) 8%, transparent); box-shadow:inset 3px 0 0 var(--color-primary); }
.filter-panel .filter-group.has-filter > label { color:var(--color-primary); font-weight:600; }
.filter-panel .filter-group.has-filter > label::before { content:""; display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--color-primary); vertical-align:middle; }
.filter-group-clear { position:absolute; top:8px; right:10px; border:0; background:transparent; color:var(--color-primary); font-size:var(--text-xs); font-weight:600; cursor:pointer; padding:0 2px; }
.filter-group-clear:hover { text-decoration:underline; }
.collapsible-header.has-filter .collapsible-title { color:var(--color-primary); }
/* Count badges: JS toggles display, so keep the centering on the element itself */
.filter-badge { box-sizing:border-box; text-align:center; }

/* Filter-count badge on the icon-only Filters button: sits on the corner instead of overflowing the 34px button. */
.table-icon-button .filter-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    margin: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    line-height: 18px;
    box-shadow: 0 0 0 2px var(--bg-primary, #fff);
}
.sl-save-btn[hidden] { display: none; }
.sl-flag-list { display: flex; flex-direction: column; gap: 4px; }
.filter-panel .sl-flag-row { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--text-sm); color: var(--text-primary); cursor: pointer; }
.filter-hint { font-weight: normal; font-size: var(--text-xs); color: var(--text-secondary); }
/* .btn clips overflow for its click ripple; icon-only toolbar buttons have no ripple and need the corner badge visible. */
.table-icon-button { overflow: visible; }
.table-icon-button::after { display: none; }


/* Sidebar rhythm: more air between the main items; Settings sits tighter to the bottom edge. */
.sidebar-nav-list { gap: 10px !important; }
.sidebar-nav-bottom .sidebar-nav-list { gap: 2px !important; margin-bottom: 0 !important; }
.sidebar-bottom .sidebar-nav-list { margin-bottom: 0; }
.sidebar-nav-bottom { padding-bottom: 0; margin-bottom: 0; }
.sidebar-bottom { padding-top: 4px; padding-bottom: 6px; }
.sl-item[hidden], .sl-group[hidden] { display: none; }

/* Sidebar bottom block: Logs, Tools and Settings share one tight row rhythm; no spare space above Settings or below the icon row. */
.sidebar-bottom { padding-top: 0; padding-bottom: 0; }
.sidebar-icon-row { padding: 2px 8px 2px; }
.sidebar-nav-group-secondary + .sidebar-nav-group-secondary { margin-top: -2px; }
.sidebar-nav-divider + .sidebar-nav-group-secondary { padding-top: 2px; margin-top: 0; }

/* Contact priority badge: reads as a control (chevron, hover ring) with a "Why?" link beside it. */
.lead-score-badge.is-interactive { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.lead-score-badge.is-interactive::after {
    content: ''; width: 10px; height: 10px; flex-shrink: 0; margin-left: 1px; background: currentColor; opacity: .7;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lead-score-badge.is-interactive:hover { box-shadow: 0 0 0 3px var(--bg-tertiary); }
.lead-score-badge.is-interactive:hover::after { opacity: 1; }
.lead-score-badge.is-interactive:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.lead-priority-pop { width: 280px; max-height: none; padding: 12px; }
.lead-priority-pop-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13px; color: var(--text-primary); }
.lead-priority-pop-total { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.lead-priority-meters { display: grid; gap: 5px; margin-bottom: 8px; }
.lead-priority-meter { display: grid; grid-template-columns: 78px 1fr 40px; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.lead-priority-meter-track { height: 6px; border-radius: 6px; background: var(--bg-tertiary); overflow: hidden; }
.lead-priority-meter-fill { display: block; height: 100%; border-radius: 6px; background: var(--color-primary); }
.lead-priority-meter-val { text-align: right; font-variant-numeric: tabular-nums; }
.lead-priority-reasons { margin: 6px 0; font-size: 12px; }
.lead-priority-reasons-title { font-weight: 600; margin-bottom: 2px; }
.lead-priority-reasons ul { margin: 0; padding-left: 16px; color: var(--text-secondary); }
.lead-priority-reasons.is-for .lead-priority-reasons-title { color: var(--color-success); }
.lead-priority-reasons.is-against .lead-priority-reasons-title { color: var(--color-error); }
.lead-priority-reasons.is-missing .lead-priority-reasons-title { color: var(--text-secondary); }
.lead-priority-empty { margin: 0 0 8px; font-size: 12px; color: var(--text-secondary); }
.lead-priority-set-label { margin: 10px 0 4px; padding-top: 8px; border-top: 1px solid var(--border-primary); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.lead-priority-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.lead-priority-seg-btn { text-align: center; padding: 6px 4px; border: 1px solid var(--border-primary); }
.lead-priority-seg-btn.is-current { background: var(--bg-secondary); border-color: var(--color-primary); }

/* Tables inside cards keep the same side/vertical inset as the Contacts list (16px sides, like .card-body there). */
.table-inset { padding: var(--space-3) var(--space-4) var(--space-4) !important; }

/* Column chooser (public/js/table-columns.js) */
.col-is-hidden { display: none !important; }
.table-columns-btn.has-changes { color: var(--color-primary); background: var(--color-primary-subtle); border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.table-columns-btn.has-changes:hover { background: var(--color-primary-subtle); }
.table-columns-bar { display: flex; justify-content: flex-end; align-items: center; padding: var(--space-2) var(--space-4) 0; min-height: 34px; }
.cols-menu { z-index: 1000; }
.cols-menu .sl-item.cols-item { justify-content: flex-start; gap: 8px; }
.cols-menu .sl-item.cols-item input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.cols-menu .sl-item.cols-item:has(input:disabled) { cursor: default; color: var(--text-secondary); }
.cols-menu .sl-item.cols-item:focus-within { background: var(--surface-secondary); }
.cols-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 6px; margin-top: 6px; border-top: 1px solid var(--border-color); }
.cols-menu .cols-foot .sl-save-btn { padding: 2px 4px; }

/* ============================================================
   CALLY INSIGHT STRIPS — rules-based, one-line guidance at the top of a page.
   Additive AI tokens (WCAG: accent 6.3:1 on white, ink 8.9:1 on the soft tint).
   Motion is opacity-only and switched off for reduced-motion.
   ============================================================ */
:root {
    --ai-accent: #4f46e5;
    --ai-ink: #3730a3;
    --ai-soft: #eef2ff;
    --ai-soft-end: #f5f3ff;
    --ai-border: #c7d2fe;
    --ai-border-strong: #6366f1;
}
:root[data-theme="dark"] {
    --ai-accent: #a5b4fc;
    --ai-ink: #c7d2fe;
    --ai-soft: #262a40;
    --ai-soft-end: #2a2840;
    --ai-border: #3a3f78;
    --ai-border-strong: #6366f1;
}
.cally-strip-slot:empty { display: none; }
.cally-strips { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--space-3, 12px); }
.cally-strip {
    display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 6px 4px 10px;
    border: 1px solid var(--ai-border); border-left: 3px solid var(--ai-border-strong); border-radius: 8px;
    background: linear-gradient(90deg, var(--ai-soft), var(--ai-soft-end)); color: var(--ai-ink);
    font-size: 13px; line-height: 1.4; transition: opacity 160ms ease;
}
.cally-strip.is-leaving { opacity: .45; }
.cally-strip.is-critical { border-left-color: var(--color-error); }
.cally-strip.is-high { border-left-color: var(--color-warning); }
.cally-strip-badge {
    display: inline-flex; align-items: center; gap: 4px; flex: none; height: 18px; padding: 0 6px;
    border: 1px solid var(--ai-border); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em;
    color: var(--ai-ink); background: var(--ai-soft);
}
.cally-strip-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cally-strip-actions { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.cally-strip .cally-strip-link { font-weight: 600; color: var(--ai-accent); text-decoration: none; padding: 4px 8px; border-radius: 6px; }
.cally-strip-link:hover { text-decoration: underline; }
.cally-strip-btn { background: none; border: 0; color: var(--ai-ink); font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.cally-strip-btn:hover { background: var(--ai-soft); text-decoration: underline; }
.cally-strip-x { font-size: 16px; line-height: 1; padding: 2px 8px; }
.cally-strip-link:focus-visible, .cally-strip-btn:focus-visible { outline: 2px solid var(--ai-border-strong); outline-offset: 1px; }
@media (max-width: 640px) {
    .cally-strip { flex-wrap: wrap; }
    .cally-strip-text { white-space: normal; flex-basis: calc(100% - 70px); }
    .cally-strip-actions { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .cally-strip { transition: none; } }


/* ── Universal dropdown motion ─────────────────────────────────────────────
   One motion for every dropdown/menu surface: the 3-dot (table overflow) menu's
   grow-in, which mirrors the Cally chat panel (scale .15 + 40px slide, .35s). Menus that are
   shown by toggling display/hidden use the keyframes; menus shown through an .open class
   already transition and are re-timed below. Native <select> popups are drawn by the
   browser and cannot be animated — every select enhanced by searchable-select.js is. */
:root { --menu-motion: 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes callably-menu-pop {
    from { opacity: 0; transform: scale(0.15) translateY(-40px); }
    to   { opacity: 1; transform: none; }
}
@keyframes callably-menu-pop-up {
    from { opacity: 0; transform: scale(0.15) translateY(40px); }
    to   { opacity: 1; transform: none; }
}
.ss-panel:not([hidden]),
.sl-menu:not([hidden]),
.cols-menu:not([hidden]),
.multi-select-container.open .multi-select-dropdown,
.settings-dropdown,
.dropdown-menu,
.lead-stage-menu {
    animation: callably-menu-pop var(--menu-motion) backwards;
    transform-origin: top left;
}
.settings-dropdown,
.dropdown-menu { transform-origin: top right; }
.ss-panel.ss-panel-up:not([hidden]) {
    animation-name: callably-menu-pop-up;
    transform-origin: bottom left;
}
/* Class-toggled menus: same start state, origin and timing as the 3-dot menu. */
.topbar-dropdown-menu,
.db-export-menu {
    transform: scale(0.15) translateY(-40px);
    transform-origin: top right;
    transition: opacity var(--menu-motion), transform var(--menu-motion), visibility var(--menu-motion);
}
.topbar-dropdown-menu.open,
.db-export-menu.open { transform: scale(1) translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .ss-panel:not([hidden]), .sl-menu:not([hidden]), .cols-menu:not([hidden]),
    .multi-select-container.open .multi-select-dropdown, .settings-dropdown, .dropdown-menu, .lead-stage-menu { animation: none; }
    .topbar-dropdown-menu, .db-export-menu { transition: none; }
}