/*
 * ====================================================================
 * EH TAX ACCOUNTANTS PORTAL — MASTER CSS
 * portal.css — Single source of truth. All other CSS files are blank.
 * Version: 3.1 (Premium surface polish)
 * ====================================================================
 */

/* ====================================================================
   GOOGLE FONTS
   ==================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Outfit:wght@600;700;800&display=swap');

/* ====================================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ==================================================================== */
:root {
    /* Brand Colors */
    --c-navy: #0d1f33;
    --c-navy-mid: #1a3a5c;
    --c-blue: #2563eb;
    --c-primary: var(--c-blue);
    --c-blue-light: #3b82f6;
    --c-blue-pale: #eff6ff;
    --c-blue-dark: #1d4ed8;
    --c-green: #10b981;
    --c-green-pale: #ecfdf5;
    --c-orange: #f59e0b;
    --c-orange-pale: #fffbeb;
    --c-red: #ef4444;
    --c-red-pale: #fef2f2;
    --c-purple: var(--c-blue);

    /* Neutrals — cool canvas (SaaS-grade) */
    --c-bg: #ebeef5;
    --c-surface: #ffffff;
    --c-surface-2: #f4f6fb;
    --c-surface-3: #e8ecf4;
    --c-border: rgba(15, 23, 42, 0.09);
    --c-border-dark: rgba(15, 23, 42, 0.14);
    --c-text: #0f172a;
    --c-text-2: #475569;
    --c-text-3: #94a3b8;
    --c-text-4: #cbd5e1;

    /* Sidebar */
    --sidebar-bg-top: var(--c-navy);
    --sidebar-bg-bot: var(--c-navy-mid);
    --sidebar-w: 272px;
    --topbar-h: 64px;

    /* Shadows — layered depth */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .06), 0 10px 28px -8px rgba(15, 23, 42, .1);
    --shadow-lg: 0 12px 32px -10px rgba(15, 23, 42, .14), 0 4px 14px -4px rgba(15, 23, 42, .06);
    --shadow-xl: 0 24px 56px -16px rgba(15, 23, 42, .2), 0 8px 20px -8px rgba(15, 23, 42, .08);
    --shadow-btn: 0 4px 16px -2px rgba(var(--primary-rgb, 37, 99, 235), .38), 0 2px 6px -2px rgba(var(--primary-rgb, 37, 99, 235), .22);
    --ring-focus: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), 0.14);

    /* Border radius */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-2xl: 24px;
    --r-full: 9999px;

    /* Transitions */
    --t-fast: 0.15s ease;
    --t-base: 0.2s ease;
    --t-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* Fluid layout / accessibility (v3.2) */
    --eh-space-y: clamp(12px, 2.8vw, 28px);
    --eh-space-x: clamp(10px, 2.4vw, 32px);
    --eh-touch-min: 44px;
    --eh-content-max: min(100%, 1680px);
    --eh-section-pad-y: clamp(0.5rem, 1.5vw, 1.25rem);

    /* Typography scale (in-app content) */
    --eh-type-display: clamp(1.45rem, 2.2vw, 1.82rem);
    --eh-type-heading: clamp(1.1rem, 1.42vw, 1.3rem);
    --eh-type-sub: clamp(1rem, 1.08vw, 1.0625rem);
    --eh-ease-spring: cubic-bezier(0.34, 1.15, 0.64, 1);
    --eh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    /* 15px */
    line-height: 1.55;
    color: var(--c-text);
    background: linear-gradient(168deg, #e4e9f2 0%, #eef1f8 38%, #e8ecf5 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
    color: var(--c-text);
    line-height: 1.2;
}

/* ====================================================================
   SCROLLBAR
   ==================================================================== */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--c-border-dark);
    border-radius: var(--r-full);
}

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

/* ====================================================================
   PAGE TRANSITION OVERLAY
   ==================================================================== */
#pageTransitionOverlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    will-change: opacity;
}

#pageTransitionOverlay.active {
    opacity: 1;
    pointer-events: none; /* avoid "stuck" interaction blocks on mobile */
}

/* ====================================================================
   LOGIN PAGE — SPLIT SCREEN
   ==================================================================== */
#loginPage {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    z-index: 1;
}

/* Left: brand hero */
.login-hero {
    flex: 0 0 46%;
    background: linear-gradient(145deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg-bot) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 56px;
    position: relative;
    overflow: hidden;
}

.login-hero::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(var(--primary-rgb, 37, 99, 235), .3) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.login-hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(59, 130, 246, .18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Hero Logo - FIXED ASPECT RATIO */
.login-hero-logo {
    display: block;
    max-width: 280px;
    height: auto;
    max-height: 80px;
    object-fit: contain;
    margin-bottom: 30px;
    filter: brightness(0) invert(1);
    position: relative;
    z-index: 1;
}

.login-hero-title {
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 14px;
    line-height: 1.15;
    position: relative;
    z-index: 1;
    transition: color var(--t-slow);
}

.login-hero-sub {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, .68);
    max-width: 380px;
    line-height: 1.65;
    margin-bottom: 44px;
    position: relative;
    z-index: 1;
}

.login-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.login-feature {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-md);
    padding: 15px 18px;
    transition: background var(--t-base);
}

.login-feature:hover {
    background: rgba(255, 255, 255, .12);
}

.login-feature-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.login-feature-body h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.login-feature-body p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, .6);
}

.login-hero-footer {
    position: absolute;
    bottom: 28px;
    left: 56px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, .35);
    z-index: 1;
}

/* Right: form panel */
.login-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 24px;
    background: transparent;
    overflow-y: auto;
}

.login-card {
    width: 100%;
    max-width: 430px;
    background: var(--c-surface);
    border-radius: var(--r-2xl);
    border: 1px solid var(--c-border);
    padding: 44px 40px;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.login-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

.login-card-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--c-text);
    margin-bottom: 6px;
}

.login-card-desc {
    font-size: 0.875rem;
    color: var(--c-text-2);
    margin-bottom: 28px;
}

/* Role tabs */
.role-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 4px;
    gap: 2px;
    margin-bottom: 24px;
}

.role-tab {
    padding: 9px 4px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: var(--c-text-2);
    cursor: pointer;
    transition: all var(--t-base);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.role-tab:hover {
    color: var(--c-text);
}

.role-tab.active {
    background: var(--c-surface);
    color: var(--c-blue);
    box-shadow: var(--shadow-sm);
}

/* Form inputs */
.form-group {
    margin-bottom: 18px;
}

.form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--c-text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 7px;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--c-text);
    background: var(--c-surface);
    transition: border-color var(--t-base), box-shadow var(--t-base);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.form-control:focus {
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), .12);
}

.form-control::placeholder {
    color: var(--c-text-3);
}

/* Login button */
.btn-login {
    width: 100%;
    padding: 13px 24px;
    background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-blue-light) 100%);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    border: none;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: transform var(--t-base), box-shadow var(--t-base), opacity var(--t-base);
    box-shadow: var(--shadow-btn);
    letter-spacing: -0.01em;
}

.btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb, 37, 99, 235), .4);
}

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

.btn-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Login alert */
.login-alert {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    border-radius: var(--r-md);
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 14px;
    border: 1px solid transparent;
}

.login-alert.danger {
    display: flex;
    background: var(--c-red-pale);
    color: #991b1b;
    border-color: rgba(239, 68, 68, .25);
}

.login-alert.warning {
    display: flex;
    background: var(--c-orange-pale);
    color: #92400e;
    border-color: rgba(245, 158, 11, .25);
}

.login-alert.success {
    display: flex;
    background: var(--c-green-pale);
    color: #065f46;
    border-color: rgba(16, 185, 129, .25);
}

/* Mobile: hide hero, show only form */
@media (max-width: 900px) {
    #loginPage {
        flex-direction: column;
    }

    .login-hero {
        display: none;
    }

    .login-form-panel {
        padding: 24px 16px;
    }

    .login-card {
        padding: 32px 24px;
    }

    .login-mobile-logo {
        display: flex !important;
    }
}

/* ====================================================================
   PORTAL SHELL
   ==================================================================== */
/* Logged-in shell: lock document scroll; only .content-area scrolls (sidebar stays visually fixed). */
html.eh-portal-app,
body.eh-portal-app {
    height: 100%;
    overflow: hidden;
}

#portalContainer {
    display: none;
    /* shown via JS */
    min-height: 100vh;
    min-height: 100dvh;
}

/* Desktop: side-by-side grid */
@media (min-width: 1025px) {
    #portalContainer.visible {
        display: grid !important;
        grid-template-columns: var(--sidebar-w) 1fr;
        grid-template-rows: 1fr;
        min-height: 100vh;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;
    }
}

/* Mobile/Tablet: stacked */
@media (max-width: 1024px) {
    #portalContainer.visible {
        display: flex !important;
        flex-direction: column;
        min-height: 100vh;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;
    }
}

/* ====================================================================
   SIDEBAR
   ==================================================================== */
.sidebar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 32%),
        linear-gradient(175deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg-bot) 100%);
    color: rgba(255, 255, 255, .9);
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 4px 0 40px rgba(0, 0, 0, 0.14), inset -1px 0 0 rgba(255, 255, 255, 0.04);
}

/* Desktop: sticky position */
@media (min-width: 1025px) {
    .sidebar {
        width: var(--sidebar-w);
        position: sticky;
        top: 0;
    }
}

/* Mobile: fixed overlay, hidden left */
@media (max-width: 1024px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 2000;
        transform: translateX(-100%) !important;
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--t-slow);
    }

    .sidebar.open {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
    }
}

/* Sidebar backdrop */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1998;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

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

/* Sidebar sections */
.sidebar-header {
    padding: 22px 20px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    flex-shrink: 0;
}

.sidebar-logo {
    max-width: 100%;
    height: auto;
    max-height: 60px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    flex-shrink: 0;
}

.sidebar-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-blue), var(--c-blue-light));
    color: #fff;
    font-size: 0.875rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .2);
}

.sidebar-user-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-id {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, .45);
    margin-top: 1px;
}

/* Navigation */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .15) transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .15);
    border-radius: 9999px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border-radius: var(--r-md);
    color: rgba(255, 255, 255, .72);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t-base);
    user-select: none;
    margin-bottom: 2px;
    border-left: 3px solid transparent;
}

.nav-item:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transform: translateX(2px);
}

.nav-item.active {
    background: rgba(var(--primary-rgb, 37, 99, 235), .28);
    color: #fff;
    border-left-color: var(--c-blue-light);
    padding-left: 10px;
}

.nav-item .nav-icon {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.nav-item .nav-label {
    flex: 1;
    min-width: 0;
}

.nav-item .nav-badge {
    background: var(--c-blue-light);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    border-radius: 9999px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sidebar footer */
.sidebar-footer {
    padding: 14px 10px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    flex-shrink: 0;
}

.btn-logout {
    width: 100%;
    padding: 10px 16px;
    border-radius: var(--r-md);
    border: 1px solid rgba(239, 68, 68, .3);
    background: rgba(239, 68, 68, .08);
    color: #fca5a5;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all var(--t-base);
    font-family: inherit;
}

.btn-logout:hover {
    background: rgba(239, 68, 68, .2);
    color: #fff;
    border-color: rgba(239, 68, 68, .5);
}

/* ====================================================================
   TOPBAR
   ==================================================================== */
.topbar {
    height: var(--topbar-h);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px));
    min-height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 1500;
    box-shadow: 0 1px 0 var(--c-border), var(--shadow-sm);
    flex-shrink: 0;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.menu-toggle {
    background: none;
    border: none;
    padding: 8px;
    border-radius: var(--r-sm);
    color: var(--c-text-2);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

.menu-toggle:hover {
    background: var(--c-bg);
    color: var(--c-text);
}

/* Hide hamburger on desktop */
@media (min-width: 1025px) {
    .menu-toggle {
        display: none;
    }
}

.page-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-text);
    font-family: 'Outfit', sans-serif;
    margin: 0;
}

.topbar-icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-2);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--t-base);
}

.topbar-icon-btn:hover {
    background: var(--c-surface);
    color: var(--c-blue);
    border-color: var(--c-blue);
}

.topbar-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--c-red);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--c-surface);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: var(--r-full);
    transition: background var(--t-fast);
}

.topbar-user:hover {
    background: var(--c-bg);
}

.topbar-user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-text);
}

.topbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-blue), var(--c-blue-light));
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(var(--primary-rgb, 37, 99, 235), .25);
}

/* ====================================================================
   MAIN CONTENT & CONTENT AREA
   ==================================================================== */
.main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    min-width: 0;
    overflow-x: hidden;
    background: transparent;
}

.content-area {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--eh-space-y) var(--eh-space-x);
    padding-bottom: max(var(--eh-space-y), env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@media (max-width: 1200px) {
    .content-area {
        padding: clamp(14px, 2.4vw, 24px) clamp(12px, 2vw, 20px);
        padding-bottom: max(clamp(14px, 2.4vw, 24px), env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 768px) {
    .content-area {
        padding: clamp(12px, 3vw, 18px) clamp(10px, 2.5vw, 14px);
        padding-bottom: max(clamp(12px, 3vw, 18px), env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 480px) {
    .content-area {
        padding: clamp(10px, 3.5vw, 14px) clamp(8px, 2.5vw, 12px);
        padding-bottom: max(clamp(10px, 3.5vw, 14px), env(safe-area-inset-bottom, 0px));
    }
}

/* Ambient canvas inside logged-in shell */
#portalContainer.visible .content-area {
    background:
        radial-gradient(ellipse 92% 56% at 100% -6%, rgba(var(--primary-rgb, 37, 99, 235), 0.07) 0%, transparent 52%),
        radial-gradient(ellipse 52% 42% at -8% 96%, rgba(124, 58, 237, 0.045) 0%, transparent 50%),
        var(--c-bg);
}

/* ====================================================================
   SECTION TRANSITIONS
   ==================================================================== */
.section {
    display: none;
}

.section.active {
    display: block;
    animation: ehSectionReveal 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ehModalIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ehSectionReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====================================================================
   CARD
   ==================================================================== */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t-base), border-color var(--t-base);
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
    opacity: 0.85;
}

.card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.14);
}

/* KPI card */
.kpi-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
    transition: all var(--t-base);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

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

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-blue), var(--c-blue-light));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.kpi-label {
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-3);
    margin-bottom: 8px;
}

.kpi-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--c-text);
    font-family: 'Outfit', sans-serif;
    line-height: 1;
}

.kpi-sub {
    font-size: 0.78rem;
    color: var(--c-text-2);
    margin-top: 10px;
    line-height: 1.4;
}

/* Dark card (for contrast accents) */
.card-dark {
    background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-mid) 100%);
    border: none;
    color: #fff;
}

.card-dark .kpi-label,
.card-dark .kpi-sub {
    color: rgba(255, 255, 255, .55);
}

.card-dark .kpi-value {
    color: #fff;
}

/* ====================================================================
   GRID HELPERS
   ==================================================================== */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1100px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {

    .grid-3,
    .grid-2,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ====================================================================
   BUTTONS
   ==================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: var(--r-md);
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all var(--t-base);
    white-space: nowrap;
    font-family: inherit;
    text-decoration: none;
    line-height: 1;
}

.btn-sm {
    padding: 7px 13px;
    font-size: 0.8rem;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 0.97rem;
}

.btn-block {
    width: 100%;
}

/* Variants */
.btn-primary {
    background: linear-gradient(145deg, var(--c-blue-light) 0%, var(--c-blue) 42%, var(--c-blue-dark) 100%);
    color: #fff;
    box-shadow: var(--shadow-btn), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 8px 22px rgba(var(--primary-rgb, 37, 99, 235), 0.42), 0 2px 8px rgba(var(--primary-rgb, 37, 99, 235), 0.2);
}

.btn-primary:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

.btn-secondary {
    background: var(--c-bg);
    color: var(--c-text);
    border: 1px solid var(--c-border);
}

.btn-secondary:hover {
    background: var(--c-surface);
    border-color: var(--c-border-dark);
}

.btn-ghost {
    background: transparent;
    color: var(--c-text-2);
    border: 1.5px solid var(--c-border);
}

.btn-ghost:hover {
    background: var(--c-bg);
    color: var(--c-text);
    border-color: var(--c-border-dark);
}

.btn-danger {
    background: var(--c-red-pale);
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, .25);
}

.btn-danger:hover {
    background: var(--c-red);
    color: #fff;
    border-color: var(--c-red);
}

.btn-success {
    background: var(--c-green-pale);
    color: #065f46;
    border: 1px solid rgba(16, 185, 129, .25);
}

.btn-success:hover {
    background: var(--c-green);
    color: #fff;
    border-color: var(--c-green);
}

/* ====================================================================
   BADGES
   ==================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-blue {
    background: var(--c-blue-pale);
    color: var(--c-blue);
}

.badge-green {
    background: var(--c-green-pale);
    color: #065f46;
}

.badge-orange {
    background: var(--c-orange-pale);
    color: #92400e;
}

.badge-red {
    background: var(--c-red-pale);
    color: #991b1b;
}

.badge-gray {
    background: var(--c-bg);
    color: var(--c-text-2);
    border: 1px solid var(--c-border);
}

/* ====================================================================
   ALERTS (in-page)
   ==================================================================== */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border-radius: var(--r-md);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
    line-height: 1.45;
}

.alert-info {
    background: var(--c-blue-pale);
    color: var(--c-blue-dark);
    border-color: rgba(var(--primary-rgb, 37, 99, 235), .25);
}

.alert-success {
    background: var(--c-green-pale);
    color: #065f46;
    border-color: rgba(16, 185, 129, .25);
}

.alert-warning {
    background: var(--c-orange-pale);
    color: #92400e;
    border-color: rgba(245, 158, 11, .25);
}

.alert-danger {
    background: var(--c-red-pale);
    color: #991b1b;
    border-color: rgba(239, 68, 68, .25);
}

/* Global alert toast */
#globalAlert {
    position: fixed;
    bottom: 24px;
    right: 24px;
    max-width: 360px;
    min-width: 260px;
    z-index: 5000;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    animation: fadeUp 0.3s ease;
    display: none;
}

/* ====================================================================
   FORMS
   ==================================================================== */
.form-group {
    margin-bottom: 16px;
}

/* form-label & form-control already defined in login section above,
   they work globally too */

/* Textarea */
textarea.form-control {
    resize: vertical;
    min-height: 90px;
}

/* Select arrow */
select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* Color picker cursor */
input[type="color"] {
    cursor: pointer;
}

/* ====================================================================
   TABLES
   ==================================================================== */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    background: var(--c-surface);
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
}

thead {
    background: var(--c-surface-2);
}

thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--c-surface-2);
    box-shadow: 0 1px 0 var(--c-border);
}

th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-2);
    white-space: nowrap;
    border-bottom: 1px solid var(--c-border);
}

td {
    padding: 10px 14px;
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
    transition: background-color 0.16s var(--eh-ease-out);
}

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

tbody tr:nth-child(even) td {
    background: rgba(15, 23, 42, 0.02);
}

tbody tr:hover td {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.06);
}

/* ====================================================================
   MODALS
   ==================================================================== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(10px) saturate(1.15);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
}

.modal.open,
.modal.active {
    display: flex;
}

.modal-content {
    background: var(--c-surface);
    border-radius: var(--r-2xl);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px;
    box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    border: 1px solid var(--c-border);
    animation: ehModalIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.modal-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--c-text);
}

.modal-close {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-2);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--t-fast);
    font-family: inherit;
}

.modal-close:hover {
    background: var(--c-red);
    color: #fff;
    border-color: var(--c-red);
}

/* ====================================================================
   EMPTY / LOADING STATES
   ==================================================================== */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--c-text-3);
}

.empty-state i {
    font-size: 2.5rem;
    margin-bottom: 14px;
    opacity: 0.5;
}

.empty-state h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-text-2);
    margin-bottom: 6px;
}

.empty-state p {
    font-size: 0.875rem;
}

.loading-spinner {
    text-align: center;
    padding: 40px;
    color: var(--c-text-3);
    font-size: 1.5rem;
}

/* ====================================================================
   INPUT ICON WRAPPER
   ==================================================================== */
.input-with-icon {
    position: relative;
}

.input-with-icon i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-3);
    font-size: 0.9rem;
    pointer-events: none;
}

.input-with-icon input {
    padding-left: 40px;
}

/* ====================================================================
   CHAT SECTION
   ==================================================================== */
.chat-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    height: calc(100vh - var(--topbar-h) - 56px);
    height: calc(100dvh - var(--topbar-h) - 56px);
    background: var(--c-surface);
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.chat-sidebar {
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
}

.chat-sidebar-header {
    padding: 16px;
    border-bottom: 1px solid var(--c-border);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--c-text);
}

#chatList {
    flex: 1;
    overflow-y: auto;
}

.chat-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--c-border);
    cursor: pointer;
    transition: background var(--t-fast);
}

.chat-item:hover {
    background: var(--c-surface);
}

.chat-item.active {
    background: var(--c-blue-pale);
}

.chat-item-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.chat-item-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--c-text);
}

.chat-item-time {
    font-size: 0.72rem;
    color: var(--c-text-3);
}

.chat-item-message {
    font-size: 0.8rem;
    color: var(--c-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-blue);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    border-radius: 9999px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    margin-top: 4px;
}

.chat-window {
    display: flex;
    flex-direction: column;
}

.chat-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
    font-weight: 700;
}

#chatMessages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: var(--r-lg);
    font-size: 0.875rem;
    line-height: 1.45;
}

.message-outgoing {
    align-self: flex-end;
    background: var(--c-blue);
    color: #fff;
    border-radius: var(--r-lg) var(--r-lg) 4px var(--r-lg);
}

.message-incoming {
    align-self: flex-start;
    background: var(--c-bg);
    color: var(--c-text);
    border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 4px;
}

.message-time {
    font-size: 0.68rem;
    opacity: 0.6;
    margin-top: 4px;
}

#chatInput {
    padding: 14px 18px;
    border-top: 1px solid var(--c-border);
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

#chatInput textarea {
    flex: 1;
    resize: none;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 10px 13px;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--c-text);
}

#chatInput textarea:focus {
    border-color: var(--c-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), .12);
}

.chat-send-btn {
    background: var(--c-blue);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    padding: 10px 16px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    transition: all var(--t-base);
}

.chat-send-btn:hover {
    background: var(--c-blue-light);
}

@media (max-width: 768px) {
    .chat-container {
        grid-template-columns: 1fr;
    }

    .chat-sidebar {
        display: flex;
    }

    .chat-window {
        display: none;
    }

    .chat-container.chat-active .chat-window {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .chat-container.chat-active .chat-sidebar {
        display: none;
    }
}

/* ====================================================================
   DOCUMENTS SECTION
   ==================================================================== */
.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.doc-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: all var(--t-base);
    cursor: pointer;
}

.doc-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--c-blue);
}

.doc-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: var(--c-blue-pale);
    color: var(--c-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.doc-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 4px;
    word-break: break-word;
}

.doc-meta {
    font-size: 0.75rem;
    color: var(--c-text-3);
}

/* ====================================================================
   PAGE SECTION HEADERS (reusable)
   ==================================================================== */
.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--c-text);
}

.section-desc {
    font-size: 0.875rem;
    color: var(--c-text-2);
    margin-top: 4px;
}

/* ====================================================================
   MISC UTILITIES
   ==================================================================== */
.text-muted {
    color: var(--c-text-3) !important;
}

.text-center {
    text-align: center !important;
}

.mt-1 {
    margin-top: 4px;
}

.mt-2 {
    margin-top: 8px;
}

.mt-3 {
    margin-top: 12px;
}

.mt-4 {
    margin-top: 16px;
}

.mt-5 {
    margin-top: 20px;
}

.mb-1 {
    margin-bottom: 4px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mb-3 {
    margin-bottom: 12px;
}

.mb-4 {
    margin-bottom: 16px;
}

.mb-5 {
    margin-bottom: 20px;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.gap-4 {
    gap: 16px;
}

.w-full {
    width: 100%;
}

.hidden {
    display: none !important;
}

/* ====================================================================
   LEGACY CSS VARIABLE ALIASES
   Maps old variable names used in section HTML files to the new
   design-token names defined in :root above.
   ==================================================================== */
:root {
    /* Old text vars → new */
    --text:        var(--c-text);
    --text2:       var(--c-text-2);
    --text3:       var(--c-text-3);
    --text4:       var(--c-text-4);
    --text-muted:  var(--c-text-3);

    /* Old layout vars → new */
    --bg:          var(--c-bg);
    --surface:     var(--c-surface);
    --border:      var(--c-border);
    --border-dark: var(--c-border-dark);

    /* Old brand vars → new */
    --eh-accent:   var(--c-blue);
    --eh-blue:     var(--c-blue);
    --eh-navy:     var(--c-navy);
    --eh-green:    var(--c-green);
    --eh-orange:   var(--c-orange);
    --eh-red:      var(--c-red);
    --eh-purple:   var(--c-purple);

    /* Spacing scale used in some sections */
    --spacing-2:  8px;
    --spacing-4:  16px;
    --spacing-6:  24px;
    --spacing-8:  32px;
    --spacing-10: 40px;
}

/* ====================================================================
   CARD SUB-COMPONENTS
   (card-header, card-body, card-title, card-desc)
   ==================================================================== */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: wrap;
}

.card-body {
    padding: 20px 24px;
}

.card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-text);
    font-family: 'Outfit', sans-serif;
    margin: 0;
}

.card-desc {
    font-size: 0.85rem;
    color: var(--c-text-2);
    margin-top: 4px;
}

/* ====================================================================
   BUTTON VARIANTS — MISSING
   ==================================================================== */
/* Blue alias (same as primary) */
.btn-blue {
    background: linear-gradient(135deg, var(--c-blue), var(--c-blue-light));
    color: #fff;
    border: none;
    box-shadow: var(--shadow-btn);
}

.btn-blue:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb, 37, 99, 235), .4);
}

/* Warning / amber */
.btn-warning {
    background: var(--c-orange-pale);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, .3);
}

.btn-warning:hover {
    background: var(--c-orange);
    color: #fff;
    border-color: var(--c-orange);
}

/* Glow effect (applied on top of any btn variant) */
.btn-glow {
    box-shadow: 0 4px 20px rgba(var(--primary-rgb, 37, 99, 235), .35);
}

.btn-glow:hover {
    box-shadow: 0 6px 28px rgba(var(--primary-rgb, 37, 99, 235), .5);
}

/* badge-primary alias */
.badge-primary {
    background: var(--c-blue-pale);
    color: var(--c-blue);
}

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

/* ====================================================================
   FADE-IN ANIMATION CLASS
   ==================================================================== */
.fade-in {
    animation: fadeUp 0.3s ease forwards;
}

/* ====================================================================
   GLASS CONTAINER (Onboarding & Settings wrapper)
   ==================================================================== */
.glass-container {
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
}

/* ====================================================================
   ONBOARDING — HEADER, PROGRESS, STEPPER
   ==================================================================== */
.onboarding-header-pro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}

.premium-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--c-text);
    font-family: 'Outfit', sans-serif;
    line-height: 1.15;
}

.premium-subtitle {
    font-size: 0.9rem;
    color: var(--c-text-2);
    margin-top: 6px;
}

.onboarding-progress-container {
    min-width: 200px;
    flex-shrink: 0;
}

.progress-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-text-2);
    margin-bottom: 8px;
}

.progress-bar-pro {
    height: 6px;
    background: var(--c-border);
    border-radius: var(--r-full);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-blue), var(--c-blue-light));
    border-radius: var(--r-full);
    transition: width 0.4s ease;
}

/* Stepper */
.stepper-god-level {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 28px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
}

.step-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--c-border);
    background: var(--c-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-3);
    font-size: 1rem;
    transition: all var(--t-base);
}

.step-item.active .step-icon,
.step-item.completed .step-icon {
    border-color: var(--c-blue);
    background: var(--c-blue);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 37, 99, 235), .15);
}

.step-label {
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--c-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color var(--t-base);
}

.step-item.active .step-label,
.step-item.completed .step-label {
    color: var(--c-blue);
}

.step-connector {
    flex: 1;
    height: 2px;
    background: var(--c-border);
    min-width: 32px;
    margin-bottom: 24px;
    transition: background var(--t-base);
}

/* Premium Card (wraps onboarding/settings forms) */
.premium-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 32px;
    box-shadow: var(--shadow-md);
    margin-bottom: 24px;
}

@media (max-width: 640px) {
    .premium-card {
        padding: 20px 16px;
    }
}

/* Onboarding steps */
.onboarding-step {
    animation: fadeUp 0.25s ease forwards;
}

/* Step intro row */
.step-intro {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--c-border);
}

.intro-text h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 4px;
}

.intro-text p {
    font-size: 0.875rem;
    color: var(--c-text-2);
}

/* Icon circle */
.icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.bg-primary-light  { background: rgba(var(--primary-rgb, 37, 99, 235), .12); color: var(--c-blue); }
.bg-info-light     { background: rgba(14, 165, 233, .12); color: #0ea5e9; }
.bg-warning-light  { background: rgba(245, 158, 11, .12); color: var(--c-orange); }
.bg-success-light  { background: rgba(16, 185, 129, .12); color: var(--c-green); }
.bg-danger-light   { background: rgba(239, 68, 68, .12);  color: var(--c-red); }

/* Onboarding Address Helper */
.ob-address-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ob-address-header label {
    margin-bottom: 0 !important;
}

.premium-checkbox-sm {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 0.75rem;
    color: var(--c-text-2);
    font-weight: 600;
}

.premium-checkbox-sm input[type="checkbox"] {
    display: none; /* fully removed from flow — fixes 2-line layout bug */
}

.premium-checkbox-sm .checkmark {
    display: inline-block !important; /* override global .checkmark display:flex bleed */
    flex-shrink: 0;
    height: 16px;
    width: 16px;
    min-width: 16px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-dark);
    border-radius: 4px;
    position: relative;
    transition: all var(--t-fast);
}

.premium-checkbox-sm:hover .checkmark {
    border-color: var(--c-blue);
}

.premium-checkbox-sm input[type="checkbox"]:checked ~ .checkmark {
    background: var(--c-blue);
    border-color: var(--c-blue);
}

.premium-checkbox-sm .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.premium-checkbox-sm input[type="checkbox"]:checked ~ .checkmark:after {
    display: block;
}

/* ====================================================================
   FORM GRID & PRO FORM ELEMENTS
   ==================================================================== */
.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 0;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 0;
}

.form-group-pro {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.form-group-pro.full-width {
    grid-column: 1 / -1;
}

.form-group-pro label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--c-text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 7px;
}

.input-pro {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--c-text);
    background: var(--c-surface);
    transition: border-color var(--t-base), box-shadow var(--t-base);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.input-pro:focus {
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), .12);
}

.input-pro::placeholder { color: var(--c-text-4); }

textarea.input-pro {
    resize: vertical;
    min-height: 76px;
}

/* Secure input group */
.input-secure-group {
    position: relative;
}

.input-secure-group .input-pro {
    padding-right: 40px;
}

.secure-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-3);
    font-size: 0.85rem;
    pointer-events: none;
}

/* Step action row (back / continue buttons) */
.step-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--c-border);
    gap: 12px;
    flex-wrap: wrap;
}

.ml-2 { margin-left: 8px; }
.mr-2 { margin-right: 8px; }

@media (max-width: 640px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
    .form-grid-3 {
        grid-template-columns: 1fr;
    }
}


/* ====================================================================
   SEGMENTED CONTROL (Radio-tab UI)
   ==================================================================== */
.segmented-control {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 4px;
}

.segmented-control input[type="radio"] {
    display: none;
}

.segmented-control label {
    flex: 1;
    min-width: 0;
    padding: 9px 14px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 9px;
    cursor: pointer;
    color: var(--c-text-2);
    transition: all var(--t-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 640px) {
    .segmented-control {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .segmented-control label {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

.segmented-control input[type="radio"]:checked + label {
    background: var(--c-surface);
    color: var(--c-blue);
    box-shadow: var(--shadow-sm);
}

/* ====================================================================
   UPLOAD ZONE (Onboarding step 4)
   ==================================================================== */
.upload-zone-premium {
    border: 2px dashed var(--c-border);
    border-radius: var(--r-lg);
    padding: 36px 24px;
    text-align: center;
    cursor: pointer;
    transition: all var(--t-base);
    background: var(--c-bg);
    margin-bottom: 16px;
}

.upload-zone-premium:hover {
    border-color: var(--c-blue);
    background: var(--c-blue-pale);
}

.upload-icon {
    font-size: 2rem;
    color: var(--c-text-3);
    margin-bottom: 12px;
    display: block;
}

.upload-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 6px;
}

.upload-hint {
    font-size: 0.8rem;
    color: var(--c-text-3);
}

.file-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--c-green-pale);
    border: 1px solid rgba(16, 185, 129, .25);
    border-radius: var(--r-full);
    font-size: 0.8rem;
    font-weight: 600;
    color: #065f46;
    margin-bottom: 16px;
}

/* ====================================================================
   CONSENT BOX & PREMIUM CHECKBOX
   ==================================================================== */
.consent-box {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 16px;
    margin-bottom: 20px;
}

.premium-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.premium-checkbox input[type="checkbox"] {
    display: none;
}

/* Scoped to .premium-checkbox only — prevents bleed into .premium-checkbox-sm */
.premium-checkbox > .checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--c-border);
    border-radius: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-base);
    margin-top: 1px;
}

.premium-checkbox input[type="checkbox"]:checked ~ .checkmark {
    background: var(--c-blue);
    border-color: var(--c-blue);
}

.premium-checkbox input[type="checkbox"]:checked ~ .checkmark::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
}

.label-text {
    font-size: 0.875rem;
    color: var(--c-text);
    line-height: 1.5;
}

/* ====================================================================
   TAX CALCULATOR — SPECIFIC COMPONENTS
   ==================================================================== */
.tax-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.tax-form-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.form-help-text {
    display: block;
    font-size: 0.75rem;
    color: var(--c-text-3);
    margin-top: 5px;
}

/* Tax results */
.tax-result {
    margin-top: 28px;
    border-top: 1px solid var(--c-border);
    padding-top: 24px;
}

.tax-result-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 18px;
}

.result-grid {
    display: grid;
    gap: 1px;
    background: var(--c-border);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 12px;
}

.result-grid-main    { grid-template-columns: repeat(2, 1fr); }
.result-grid-secondary { grid-template-columns: repeat(2, 1fr); }
.result-grid-final   { grid-template-columns: repeat(3, 1fr); }

.result-item {
    background: var(--c-surface);
    padding: 14px 16px;
}

.result-item-highlight {
    background: var(--c-blue-pale);
}

.result-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--c-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.result-label-sub {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.result-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-text);
    font-family: 'Outfit', sans-serif;
}

.result-value-highlight {
    color: var(--c-blue);
    font-size: 1.15rem;
}

.tax-result-buttons {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Tax brackets reference */
.tax-brackets-reference {
    margin-top: 28px;
    background: var(--c-bg);
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border);
    padding: 20px;
}

.tax-brackets-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 14px;
}

.tax-brackets-subtitle {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--c-text-2);
    margin: 14px 0 10px;
}

.tax-brackets-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tax-brackets-list-small {
    gap: 4px;
}

.tax-bracket-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.83rem;
    color: var(--c-text-2);
    padding: 6px 0;
    border-bottom: 1px solid var(--c-border);
}

.tax-bracket-item:last-child { border-bottom: none; }

.tax-bracket-rate {
    font-weight: 700;
    color: var(--c-text);
    background: var(--c-border);
    padding: 2px 8px;
    border-radius: var(--r-full);
    font-size: 0.78rem;
}

.tax-bracket-free {
    background: var(--c-green-pale);
    color: #065f46;
}

.tax-brackets-nonresident { margin-top: 16px; }

.tax-brackets-note {
    font-size: 0.78rem;
    color: var(--c-text-3);
    margin-top: 10px;
}

@media (max-width: 640px) {
    .tax-form-grid        { grid-template-columns: 1fr; }
    .result-grid-main,
    .result-grid-secondary,
    .result-grid-final    { grid-template-columns: 1fr; }
}

/* ====================================================================
   APPLE-STYLE DOCUMENT & USER MANAGEMENT SECTIONS
   ==================================================================== */
.dashboard-container-apple {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.apple-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.apple-badge {
    display: inline-block;
    padding: 3px 10px;
    background: var(--c-blue-pale);
    color: var(--c-blue);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--r-full);
    margin-bottom: 8px;
}

.apple-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--c-text);
    font-family: 'Outfit', sans-serif;
    line-height: 1.15;
    margin-bottom: 4px;
}

.apple-subtitle {
    font-size: 0.9rem;
    color: var(--c-text-2);
}

.apple-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.apple-btn-large {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--r-md);
    font-size: 0.9rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--t-base);
}

.apple-btn-large.primary {
    background: linear-gradient(135deg, var(--c-blue), var(--c-blue-light));
    color: #fff;
    box-shadow: var(--shadow-btn);
}

.apple-btn-large.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb, 37, 99, 235), .4);
}

/* Filter bar */
.apple-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 10px 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}

.blur-effect {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.apple-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 2 1 300px; /* Grow faster, shrink slower, base at 300px */
    min-width: 240px; /* Prevent placeholder truncation on laptop */
    background: var(--c-bg);
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 8px 14px;
    transition: all var(--t-base);
}

.apple-search-box:focus-within {
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), .1);
}

.apple-search-box i {
    color: var(--c-text-3);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.apple-input-noshadow {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--c-text);
}

.apple-input-noshadow::placeholder { color: var(--c-text-4); }

/* Pill-style tabs */
.apple-pill-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap; /* Keep them in one row for the Apple look */
    overflow-x: auto; /* Allow scrolling if too many tabs */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar Firefox */
    padding: 4px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    width: fit-content;
    max-width: 100%;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    flex-shrink: 1; /* Allow container to shrink to fit next to search */
    min-width: 0;
}

.apple-pill-tabs::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

.pill-tab {
    padding: 8px 16px;
    border-radius: var(--r-full);
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid transparent;
    background: transparent;
    color: var(--c-text-2);
    cursor: pointer;
    transition: color 0.18s var(--eh-ease-out), background 0.18s var(--eh-ease-out), border-color 0.18s var(--eh-ease-out), transform 0.2s var(--eh-ease-spring), box-shadow 0.2s var(--eh-ease-out);
    white-space: nowrap;
    font-family: inherit;
    letter-spacing: 0.01em;
}

.pill-tab:hover {
    color: var(--c-blue);
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.2);
    transform: translateY(-1px);
}

.pill-tab.active {
    background: linear-gradient(145deg, var(--c-blue-light) 0%, var(--c-blue) 50%, var(--c-blue-dark) 100%);
    border-color: rgba(29, 78, 216, 0.5);
    color: #fff;
    box-shadow: var(--shadow-btn), 0 1px 0 rgba(255, 255, 255, 0.22) inset;
    transform: translateY(-1px) scale(1.02);
}

/* Apple grid layouts */
.apple-grid-layout {
    display: grid;
    gap: 16px;
}

.documents-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.user-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media (max-width: 1200px) {
    .documents-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    .user-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 900px) {
    .documents-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .user-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .apple-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .documents-grid,
    .user-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ====================================================================
   CHAT SECTION ENHANCEMENTS
   ==================================================================== */
.chat-header-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 10px;
}

.chat-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 7px 11px;
    transition: border-color var(--t-base);
}

.chat-search:focus-within {
    border-color: var(--c-blue);
}

.chat-search i {
    color: var(--c-text-3);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.chat-search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--c-text);
}

.chat-search input::placeholder { color: var(--c-text-4); }

.chat-window-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
    min-height: 54px;
    display: flex;
    align-items: center;
}

.chat-placeholder {
    font-size: 0.875rem;
    color: var(--c-text-3);
    font-style: italic;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-list {
    flex: 1;
    overflow-y: auto;
}

/* Chat input bar (text input style used in chat.html) */
.chat-input {
    padding: 12px 16px;
    border-top: 1px solid var(--c-border);
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--c-surface);
}

.chat-input input {
    flex: 1;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 10px 13px;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--c-text);
    outline: none;
    transition: border-color var(--t-base);
    background: var(--c-bg);
}

.chat-input input:focus {
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), .1);
}

/* ====================================================================
   RESPONSIVE — MISC
   ==================================================================== */
@media (max-width: 768px) {
    .onboarding-header-pro {
        flex-direction: column;
    }

    .apple-header {
        flex-direction: column;
    }

    .tax-form-grid {
        grid-template-columns: 1fr;
    }

    .step-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .step-actions > * {
        width: 100%;
        justify-content: center;
    }

    .glass-container {
        max-width: 100%;
    }

    .premium-card {
        border-radius: var(--r-lg);
    }
}

/* ====================================================================
   VISUAL OVERHAUL — FIX ALL SECTION ISSUES FROM SCREENSHOTS
   Applied after all other rules for maximum specificity
   ==================================================================== */

/* ──────────────────────────────────────────────────────────────────
   1. GLOBAL: Make form inputs VISUALLY DISTINCT
   Problem: --c-border (#e2e8f0) nearly invisible on white cards
   ────────────────────────────────────────────────────────────────── */
.form-control,
.input-pro {
    border: 1.5px solid #cbd5e1 !important;
    background: #f8fafc !important;
}

.form-control:focus,
.input-pro:focus {
    border-color: var(--c-blue) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), .12) !important;
}

/* Input icon wrapper — force icon to sit properly */
.input-with-icon {
    position: relative;
    display: block;
}

.input-with-icon > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-3);
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 1;
}

.input-with-icon > input,
.input-with-icon > select {
    padding-left: 38px !important;
}

/* ──────────────────────────────────────────────────────────────────
   2. GLOBAL: Card with card-header — zero out parent padding
   Problem: .card has padding:24px but .card-header needs full-width
   ────────────────────────────────────────────────────────────────── */
.card:has(> .card-header) {
    padding: 0 !important;
    overflow: hidden;
}

/* Fallback for browsers without :has() */
.card > .card-header:first-child {
    margin: 0;
}

/* ──────────────────────────────────────────────────────────────────
   3. ONBOARDING SECTION — Complete premium redesign
   ────────────────────────────────────────────────────────────────── */

/* Hero header strip */
#onboardingSection .onboarding-header-pro {
    background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-mid) 100%);
    border-radius: var(--r-xl);
    padding: 24px 28px;
    margin-bottom: 24px;
    align-items: center;
    box-shadow: 0 8px 32px rgba(13, 31, 51, .25);
}

#onboardingSection .premium-title {
    color: #fff;
    font-size: 1.5rem;
}

#onboardingSection .premium-subtitle {
    color: rgba(255, 255, 255, .7);
}

#onboardingSection .progress-stats span {
    color: rgba(255, 255, 255, .65);
}

#onboardingSection .progress-bar-pro {
    background: rgba(255, 255, 255, .2);
}

/* Stepper strip */
#onboardingSection .stepper-god-level {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 18px 24px;
    margin-bottom: 20px;
    gap: 0;
    overflow-x: auto;
}

#onboardingSection .step-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px;
    min-width: 60px;
    flex-shrink: 0;
}

#onboardingSection .step-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50% !important;
    border: 2px solid var(--c-border) !important;
    background: var(--c-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    color: var(--c-text-3) !important;
    transition: all var(--t-base);
}

#onboardingSection .step-item.active .step-icon,
#onboardingSection .step-item.completed .step-icon {
    background: linear-gradient(135deg, var(--c-blue), var(--c-blue-light)) !important;
    border-color: var(--c-blue) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 37, 99, 235), .3) !important;
}

#onboardingSection .step-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--c-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

#onboardingSection .step-item.active .step-label,
#onboardingSection .step-item.completed .step-label {
    color: var(--c-blue);
}

#onboardingSection .step-connector {
    flex: 1;
    height: 2px;
    background: var(--c-border);
    min-width: 16px;
    max-width: 80px;
    margin-bottom: 22px;
}

/* Premium form card */
#onboardingSection .premium-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 28px 32px;
    box-shadow: var(--shadow-md);
}

/* Step intro (icon + title + desc) */
#onboardingSection .step-intro {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--c-blue-pale);
    border-radius: var(--r-md);
    padding: 14px 18px;
    margin-bottom: 22px;
    border-left: 4px solid var(--c-blue);
}

#onboardingSection .step-intro .icon-circle {
    background: rgba(var(--primary-rgb, 37, 99, 235), .15);
    color: var(--c-blue);
    flex-shrink: 0;
}

#onboardingSection .intro-text h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 2px;
}

#onboardingSection .intro-text p {
    font-size: 0.83rem;
    color: var(--c-text-2);
    margin: 0;
}

/* Form layout */
#onboardingSection .form-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
    margin-bottom: 8px;
}

#onboardingSection .form-group-pro {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 14px;
}

#onboardingSection .form-group-pro label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--c-text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

#onboardingSection .input-pro {
    display: block;
    width: 100%;
}

/* Upload zone */
#onboardingSection .upload-zone-premium {
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
}

/* Consent box */
#onboardingSection .consent-box {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 14px 16px;
}

/* Step actions */
#onboardingSection .step-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--c-border);
}

/* Mobile onboarding */
@media (max-width: 640px) {
    #onboardingSection .form-grid-2 {
        grid-template-columns: 1fr !important;
    }

    #onboardingSection .premium-card {
        padding: 18px 14px;
    }

    #onboardingSection .stepper-god-level {
        padding: 14px 12px;
    }

    #onboardingSection .step-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px;
        min-height: 36px;
        font-size: 0.85rem !important;
    }
}

/* ──────────────────────────────────────────────────────────────────
   4. SETTINGS SECTION — Premium header + working segmented control
   ────────────────────────────────────────────────────────────────── */

/* Wide container */
#settingsSection .glass-container {
    max-width: 860px;
}

/* Hero header */
#settingsSection .onboarding-header-pro {
    background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-mid) 100%);
    border-radius: var(--r-xl);
    padding: 20px 24px;
    margin-bottom: 24px;
    align-items: center;
    box-shadow: 0 8px 32px rgba(13, 31, 51, .25);
}

#settingsSection .premium-title {
    color: #fff;
    font-size: 1.4rem;
}

#settingsSection .premium-subtitle {
    color: rgba(255, 255, 255, .7);
}

#settingsSection .icon-circle.bg-primary-light {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

/* Premium card */
#settingsSection .premium-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 28px 32px;
    box-shadow: var(--shadow-md);
}

/* Segmented control — force radio buttons hidden, show styled labels */
#settingsSection .segmented-control {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 4px;
    gap: 2px;
    margin-bottom: 24px;
}

#settingsSection .segmented-control input[type="radio"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#settingsSection .segmented-control label {
    flex: 1;
    padding: 9px 12px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 9px;
    cursor: pointer;
    color: var(--c-text-2);
    transition: all var(--t-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
    user-select: none;
}

#settingsSection .segmented-control label:hover {
    color: var(--c-text);
    background: rgba(255, 255, 255, .6);
}

#settingsSection .segmented-control input[type="radio"]:checked + label {
    background: var(--c-surface) !important;
    color: var(--c-blue) !important;
    box-shadow: var(--shadow-sm) !important;
    font-weight: 700 !important;
}

/* Form layout inside settings */
#settingsSection .form-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
    margin-bottom: 8px;
}

#settingsSection .form-group-pro {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 14px;
}

#settingsSection .form-group-pro label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--c-text-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

#settingsSection .step-actions {
    display: flex !important;
    align-items: center !important;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--c-border);
}

@media (max-width: 640px) {
    #settingsSection .form-grid-2 {
        grid-template-columns: 1fr !important;
    }

    #settingsSection .premium-card {
        padding: 18px 14px;
    }

    #settingsSection .segmented-control {
        flex-wrap: wrap;
    }

    #settingsSection .segmented-control label {
        font-size: 0.76rem;
        padding: 8px 8px;
    }
}

/* ──────────────────────────────────────────────────────────────────
   5. DOCUMENTS SECTION — Apple-style premium layout
   ────────────────────────────────────────────────────────────────── */

#documentsSection .dashboard-container-apple {
    max-width: 100%;
}

/* Hero header */
#documentsSection .apple-header {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 16px;
}

#documentsSection .apple-badge {
    display: inline-block;
    padding: 3px 10px;
    background: var(--c-blue-pale);
    color: var(--c-blue);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--r-full);
    margin-bottom: 6px;
}

#documentsSection .apple-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--c-text);
    font-family: 'Outfit', sans-serif;
    line-height: 1.15;
    margin-bottom: 4px;
}

#documentsSection .apple-subtitle {
    font-size: 0.875rem;
    color: var(--c-text-2);
}

/* Upload button */
#documentsSection .apple-btn-large.primary {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--c-blue), var(--c-blue-light)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--r-md) !important;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    box-shadow: var(--shadow-btn);
    transition: all var(--t-base);
    text-decoration: none;
}

#documentsSection .apple-btn-large.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb, 37, 99, 235), .4);
}

/* Filter bar */
#documentsSection .apple-filter-bar {
    display: flex !important;
    align-items: center;
    gap: 10px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 10px 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}

/* Search box */
#documentsSection .apple-search-box {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 150px;
    background: var(--c-bg);
    border: 1.5px solid #cbd5e1;
    border-radius: var(--r-md);
    padding: 8px 12px;
    transition: border-color var(--t-base), box-shadow var(--t-base);
}

#documentsSection .apple-search-box:focus-within {
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), .1);
}

#documentsSection .apple-search-box i {
    color: var(--c-text-3);
    font-size: 0.82rem;
    flex-shrink: 0;
}

#documentsSection .apple-input-noshadow {
    flex: 1;
    border: none !important;
    background: transparent !important;
    outline: none;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--c-text);
}

/* Pill tabs — segmented (matches global .apple-pill-tabs) */
#documentsSection .apple-pill-tabs {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap;
    padding: 4px !important;
    background: var(--c-surface-2) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-full) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

#documentsSection .pill-tab {
    display: inline-flex !important;
    align-items: center;
    padding: 7px 15px !important;
    border-radius: var(--r-full) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--c-text-2) !important;
    cursor: pointer;
    transition: color 0.18s var(--eh-ease-out), background 0.18s var(--eh-ease-out), border-color 0.18s var(--eh-ease-out), transform 0.2s var(--eh-ease-spring), box-shadow 0.2s var(--eh-ease-out) !important;
    white-space: nowrap;
    font-family: inherit;
}

#documentsSection .pill-tab:hover {
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.2) !important;
    color: var(--c-blue) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-1px);
}

#documentsSection .pill-tab.active {
    background: linear-gradient(145deg, var(--c-blue-light) 0%, var(--c-blue) 50%, var(--c-blue-dark) 100%) !important;
    border-color: rgba(29, 78, 216, 0.45) !important;
    color: #fff !important;
    box-shadow: var(--shadow-btn), 0 1px 0 rgba(255, 255, 255, 0.2) inset !important;
    transform: translateY(-1px) scale(1.02);
}

/* Document grid */
#documentsSection .apple-grid-layout.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

@media (max-width: 640px) {
    #documentsSection .apple-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    #documentsSection .apple-grid-layout.documents-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ──────────────────────────────────────────────────────────────────
   6. USER MANAGEMENT SECTION — styled like Documents
   ────────────────────────────────────────────────────────────────── */
#userManagementSection .apple-filter-bar {
    display: flex !important;
    align-items: center;
    gap: 10px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 10px 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}

#userManagementSection .apple-search-box {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: var(--c-bg);
    border: 1.5px solid #cbd5e1;
    border-radius: var(--r-md);
    padding: 8px 12px;
    transition: border-color var(--t-base), box-shadow var(--t-base);
}

#userManagementSection .apple-search-box:focus-within {
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), .1);
}

#userManagementSection .apple-input-noshadow {
    flex: 1;
    border: none !important;
    background: transparent !important;
    outline: none;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--c-text);
}

#userManagementSection .apple-pill-tabs {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap;
    padding: 4px !important;
    background: var(--c-surface-2) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-full) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

#userManagementSection .pill-tab {
    display: inline-flex !important;
    align-items: center;
    padding: 7px 15px !important;
    border-radius: var(--r-full) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--c-text-2) !important;
    cursor: pointer;
    transition: color 0.18s var(--eh-ease-out), background 0.18s var(--eh-ease-out), border-color 0.18s var(--eh-ease-out), transform 0.2s var(--eh-ease-spring), box-shadow 0.2s var(--eh-ease-out) !important;
    white-space: nowrap;
    font-family: inherit;
}

#userManagementSection .pill-tab:hover {
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.2) !important;
    color: var(--c-blue) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-1px);
}

#userManagementSection .pill-tab.active {
    background: linear-gradient(145deg, var(--c-blue-light) 0%, var(--c-blue) 50%, var(--c-blue-dark) 100%) !important;
    border-color: rgba(29, 78, 216, 0.45) !important;
    color: #fff !important;
    box-shadow: var(--shadow-btn), 0 1px 0 rgba(255, 255, 255, 0.2) inset !important;
    transform: translateY(-1px) scale(1.02);
}

/* ──────────────────────────────────────────────────────────────────
   7. TAX CALCULATOR SECTION — Card fix + visible inputs
   ────────────────────────────────────────────────────────────────── */

/* Card header padding fix */
#taxCalculatorSection .card {
    padding: 0 !important;
    overflow: hidden;
}

#taxCalculatorSection .card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
}

#taxCalculatorSection .card-body {
    padding: 24px;
}

/* Force tax form inputs to be visible */
#taxCalculatorSection .form-control {
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: var(--r-md) !important;
    padding: 11px 14px !important;
}

#taxCalculatorSection .form-control:focus {
    border-color: var(--c-blue) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), .1) !important;
}

/* Tax form grid - 2 columns */
#taxCalculatorSection .tax-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
    margin-bottom: 16px;
}

/* Buttons row */
#taxCalculatorSection .tax-form-buttons {
    display: flex !important;
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--c-border);
    flex-wrap: wrap;
}

/* Tax result section */
#taxCalculatorSection .tax-result {
    margin-top: 24px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 20px;
}

/* Tax brackets reference */
#taxCalculatorSection .tax-brackets-reference {
    margin-top: 20px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 18px 20px;
}

/* Form help text */
#taxCalculatorSection .form-help-text {
    display: block;
    font-size: 0.73rem;
    color: var(--c-text-3);
    margin-top: 4px;
    font-style: italic;
}

/* Labels */
#taxCalculatorSection .form-group > label,
#taxCalculatorSection .form-group > label:first-child {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--c-text-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 7px;
}

@media (max-width: 640px) {
    #taxCalculatorSection .tax-form-grid {
        grid-template-columns: 1fr !important;
    }
}

#taxCalculatorSection .input-with-icon > .form-control {
    padding-left: 40px !important;
}

/* ──────────────────────────────────────────────────────────────────
   8. CHAT / MESSAGES SECTION — Fix card + layout
   ────────────────────────────────────────────────────────────────── */

#chatSection .card {
    padding: 0 !important;
    overflow: hidden;
}

#chatSection .card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
}

#chatSection .card-body {
    padding: 0 !important;
}

#chatSection .chat-container {
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    height: calc(100vh - var(--topbar-h) - 120px);
    height: calc(100dvh - var(--topbar-h) - 120px);
    min-height: 480px;
    max-height: 640px;
    background: var(--c-surface);
    overflow: hidden;
}

/* Chat sidebar */
#chatSection .chat-sidebar {
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
}

/* Chat search box inside sidebar */
#chatSection .chat-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
}

#chatSection .chat-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--c-bg);
    border: 1.5px solid #cbd5e1;
    border-radius: var(--r-md);
    padding: 8px 11px;
    margin-top: 10px;
}

#chatSection .chat-search:focus-within {
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), .1);
}

#chatSection .chat-search input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    outline: none;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--c-text);
}

/* Chat window */
#chatSection .chat-window {
    display: flex;
    flex-direction: column;
}

#chatSection .chat-window-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
    display: flex;
    align-items: center;
    min-height: 52px;
}

#chatSection .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--c-bg);
}

#chatSection .chat-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--c-text-2);
}
#chatSection .chat-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: rgba(var(--primary-rgb, 37, 99, 235), .08);
    color: var(--c-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
#chatSection .chat-empty-title {
    font-weight: 800;
    color: var(--c-text);
    margin-bottom: 4px;
}
#chatSection .chat-empty-sub {
    font-size: 0.85rem;
    color: var(--c-text-3);
}

/* Conversation list — messaging app feel */
#chatSection .chat-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: transparent;
    cursor: pointer;
    align-items: center;
}
#chatSection .chat-item:hover { background: rgba(255,255,255,0.65); }
#chatSection .chat-item.active { background: rgba(var(--primary-rgb, 37, 99, 235), 0.08); }
#chatSection .chat-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-mid) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}
#chatSection .chat-item-body { min-width: 0; flex: 1; }
#chatSection .chat-item-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 2px;
}
#chatSection .chat-item-name { font-weight: 800; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatSection .chat-item-time { font-size: 0.72rem; color: var(--c-text-3); flex-shrink: 0; }
#chatSection .chat-item-bottom { display:flex; gap:10px; align-items:center; justify-content: space-between; }
#chatSection .chat-item-message { font-size: 0.82rem; color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatSection .chat-unread {
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--c-blue);
    color: #fff;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}

/* Messages — bubbles like a messaging app */
#chatSection .chat-msg { display: flex; }
#chatSection .chat-msg.is-sent { justify-content: flex-end; }
#chatSection .chat-msg.is-received { justify-content: flex-start; }
#chatSection .chat-bubble {
    max-width: min(520px, 78%);
    padding: 10px 12px;
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}
#chatSection .chat-msg.is-sent .chat-bubble {
    background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-blue-light) 100%);
    color: #fff;
    border-bottom-right-radius: 6px;
}
#chatSection .chat-msg.is-received .chat-bubble {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    border-bottom-left-radius: 6px;
}
#chatSection .chat-text { font-size: 0.92rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
#chatSection .chat-meta { margin-top: 5px; font-size: 0.68rem; opacity: 0.7; text-align: right; }

#chatSection .chat-input {
    display: flex !important;
    gap: 10px;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
}

#chatSection .chat-input input {
    flex: 1;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: var(--r-md) !important;
    padding: 10px 13px !important;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--c-text);
    outline: none;
    background: var(--c-bg) !important;
    transition: border-color var(--t-base);
}

#chatSection .chat-input input:focus {
    border-color: var(--c-blue) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), .1);
}

@media (max-width: 768px) {
    #chatSection .chat-container {
        grid-template-columns: 1fr !important;
        height: auto;
        max-height: none;
    }

    #chatSection .chat-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--c-border);
        max-height: none;
    }

    #chatSection .chat-messages {
        min-height: 200px;
    }
}

@media (max-width: 1024px) {
    body.sidebar-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .main-content {
        width: 100%;
        min-width: 0;
    }

    .topbar-user-name {
        display: none;
    }
}

/* ──────────────────────────────────────────────────────────────────
   9. STAFF & ADMIN DASHBOARDS — consistent heading style
   ────────────────────────────────────────────────────────────────── */

#staffDashboardSection h1,
#adminDashboardSection h1 {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: var(--c-text) !important;
    font-family: 'Outfit', sans-serif;
}

#staffDashboardSection p,
#adminDashboardSection > div > div > p {
    font-size: 0.9rem;
    color: var(--c-text-2);
}

/* KPI cards use --eh-accent which should now resolve via alias */
#staffDashboardSection .kpi-label,
#adminDashboardSection .kpi-label {
    font-size: 0.73rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--c-text-3);
}

/* ──────────────────────────────────────────────────────────────────
   10. ADMIN CONTROL PANEL — card title/desc fix
   ────────────────────────────────────────────────────────────────── */

.card .card-title.card--title-block {
    display: block;
    margin-bottom: 4px;
}

/* Admin identity control color pickers */
#adminDashboardSection .card .form-label {
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--c-text-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    display: block;
}

#adminDashboardSection .card div[onclick*="setProperty"] {
    cursor: pointer;
    transition: transform var(--t-base);
}

#adminDashboardSection .card div[onclick*="setProperty"]:hover {
    transform: scale(1.1);
}

/* ──────────────────────────────────────────────────────────────────
   11. DASHBOARD SECTION — client dashboard fix
   ────────────────────────────────────────────────────────────────── */

#dashboardSection h1 {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: var(--c-text) !important;
    font-family: 'Outfit', sans-serif;
}

/* Inline card actions row */
#dashboardSection .card {
    transition: box-shadow var(--t-base), transform var(--t-base);
}

#dashboardSection .card:hover {
    box-shadow: var(--shadow-md);
}

/* ──────────────────────────────────────────────────────────────────
   12. GLOBAL FORM LABELS everywhere
   ────────────────────────────────────────────────────────────────── */

/* Ensure all form labels render as block with spacing */
.form-group > label,
.form-group-pro > label {
    display: block !important;
}

/* Consistent select arrow from CSS */
select.form-control,
select.input-pro {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    padding-right: 36px !important;
    cursor: pointer;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ──────────────────────────────────────────────────────────────────
   13. DOCUMENT & USER DIRECTORY GRID ALIGNMENT
   ────────────────────────────────────────────────────────────────── */
.apple-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 1.5rem;
}

.apple-document-card,
.apple-contact-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--t-base), box-shadow var(--t-base);
    height: 100%;
}

.apple-document-card:hover,
.apple-contact-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05);
    transform: translateY(-2px);
    border-color: rgba(0,0,0,0.1);
}

.doc-actions,
.contact-actions {
    margin-top: auto; /* Push to bottom */
    padding-top: 1rem;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap; /* Prevent button overflow on small screens */
}

/* ──────────────────────────────────────────────────────────────────
   14. ONBOARDING WIZARD MISSING CLASSES
   ────────────────────────────────────────────────────────────────── */
.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 640px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

.step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--c-border);
}

.premium-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--c-text-2);
    user-select: none;
}

.premium-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--c-blue);
    cursor: pointer;
}

.upload-zone-premium {
    border: 2px dashed rgba(var(--primary-rgb, 37, 99, 235), 0.3);
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.03);
    border-radius: var(--r-lg);
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all var(--t-base);
    margin-bottom: 16px;
}

.upload-zone-premium:hover {
    border-color: var(--c-blue);
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.05);
}

.upload-zone-premium .upload-icon {
    font-size: 2rem;
    color: var(--c-blue);
    margin-bottom: 12px;
}

.upload-zone-premium .upload-text {
    font-weight: 600;
    color: var(--c-text);
}

.upload-zone-premium .upload-hint {
    font-size: 0.8rem;
    color: var(--c-text-3);
    margin-top: 6px;
}

/* ──────────────────────────────────────────────────────────────────
   15. MODAL EXTENSIONS — Large variant, Profile View Grid
   ────────────────────────────────────────────────────────────────── */
.modal-content.modal-lg {
    max-width: 720px;
}

.profile-view-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 8px;
}

.profile-view-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--c-surface-2);
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
}

.profile-view-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-3);
}

.profile-view-value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--c-text);
    word-break: break-word;
}

@media (max-width: 560px) {
    .profile-view-grid {
        grid-template-columns: 1fr;
    }
    .modal-content.modal-lg {
        max-width: 100%;
    }
}

/* Recipient Dropdown */
.recipient-dropdown.show {
    display: block !important;
}

.recipient-item {
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--t-fast);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--c-border);
}

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

.recipient-item:hover {
    background: var(--c-blue-pale);
}

.recipient-name {
    font-weight: 600;
    color: var(--c-text);
}

.recipient-role {
    color: var(--c-text-3);
    font-size: 0.82rem;
}

.recipient-empty {
    padding: 14px;
    text-align: center;
    color: var(--c-text-3);
    font-size: 0.875rem;
}

/* Profile Document Items */
.profile-document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--c-surface-2);
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    transition: background var(--t-fast);
}

.profile-document-item:hover { background: var(--c-blue-pale); }
.profile-document-info { flex: 1; min-width: 0; }
.profile-document-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-document-meta { font-size: 0.78rem; color: var(--c-text-3); margin-top: 2px; }
.profile-document-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Notification Items */
.notification-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--c-border);
    cursor: pointer;
    transition: background var(--t-fast);
}
.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background: var(--c-blue-pale); }
.notification-item.unread {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.04);
    border-left: 3px solid var(--c-blue);
}
.notification-title { font-size: 0.9rem; font-weight: 600; color: var(--c-text); margin-bottom: 3px; }
.notification-message { font-size: 0.82rem; color: var(--c-text-2); margin-bottom: 4px; }
.notification-time { font-size: 0.75rem; color: var(--c-text-3); }

/* User card action buttons */
.contact-actions .btn {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    font-size: 0.78rem;
    padding: 7px 10px;
}

/* Modal footer standard */
.modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--c-border);
}

/* Login hero logo — remove skew */
.login-hero-logo {
    max-width: 220px;
    max-height: 90px;
    height: auto;
    width: auto;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0) invert(1);
}

/* Sidebar logo — ensure no distortion */
.sidebar-logo {
    max-width: 140px;
    max-height: 48px;
    height: auto;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* ══════════════════════════════════════════════════════════════════
   USER DIRECTORY CARDS — Modern Redesign
   ══════════════════════════════════════════════════════════════════ */
.apple-contact-card {
    background: var(--c-surface);
    border-radius: var(--r-xl);
    padding: 20px;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.apple-contact-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--c-blue);
}

/* Header: Avatar + Name/Email */
.ucard-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ucard-avatar {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-blue) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 37, 99, 235), 0.3);
    flex-shrink: 0;
}

.ucard-info {
    flex: 1;
    min-width: 0;
}

.ucard-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Outfit', sans-serif;
}

.ucard-email {
    font-size: 0.82rem;
    color: var(--c-text-2);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta badges */
.ucard-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.badge-outline {
    background: transparent;
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
    font-size: 0.72rem;
}

/* Action buttons row */
.ucard-actions {
    display: flex;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--c-border);
    flex-wrap: wrap;
}

.ucard-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: var(--r-md);
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t-fast);
    font-family: inherit;
    white-space: nowrap;
}

.ucard-btn span { font-size: 0.8rem; }

.ucard-btn.btn-edit {
    background: var(--c-blue-pale);
    color: var(--c-blue);
    flex: 1;
}
.ucard-btn.btn-edit:hover { background: var(--c-blue); color: #fff; }

.ucard-btn.btn-msg {
    background: var(--c-blue-pale);
    color: var(--c-blue-dark);
    flex: 1;
}
.ucard-btn.btn-msg:hover { background: var(--c-blue-dark); color: #fff; }

.ucard-btn.btn-deact {
    background: var(--c-orange-pale);
    color: #b45309;
    width: 36px;
    padding: 7px;
    justify-content: center;
    flex-shrink: 0;
}
.ucard-btn.btn-deact:hover { background: var(--c-orange); color: #fff; }

.ucard-btn.btn-act {
    background: var(--c-green-pale);
    color: #065f46;
    width: 36px;
    padding: 7px;
    justify-content: center;
    flex-shrink: 0;
}
.ucard-btn.btn-act:hover { background: var(--c-green); color: #fff; }

.ucard-btn.btn-del {
    background: var(--c-red-pale);
    color: var(--c-red);
    width: 36px;
    padding: 7px;
    justify-content: center;
    flex-shrink: 0;
}
.ucard-btn.btn-del:hover { background: var(--c-red); color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   DOCUMENT VAULT CARDS — Vertical Card Redesign
   ══════════════════════════════════════════════════════════════════ */
.apple-document-card {
    background: var(--c-surface);
    border-radius: var(--r-xl);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
    padding: 0;
}

.apple-document-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--c-blue);
}

.doc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
}

.doc-icon-wrapper {
    width: 48px;
    height: 48px;
    background: var(--c-blue-pale);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-blue);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.doc-status-badge {
    display: flex;
    align-items: center;
}

.doc-card-body {
    padding: 0 18px 14px;
    flex: 1;
}

.doc-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 4px 0;
    font-family: 'Outfit', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-type-label {
    font-size: 0.78rem;
    color: var(--c-text-3);
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.doc-meta {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--c-text-2);
    flex-wrap: wrap;
}

.doc-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.doc-owner-badge {
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--c-blue);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.doc-rejection {
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--c-red-pale);
    color: #991b1b;
    border-radius: var(--r-sm);
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.doc-card-actions {
    display: flex;
    gap: 6px;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--c-border);
    flex-wrap: wrap;
}

.doc-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: var(--r-md);
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t-fast);
    font-family: inherit;
    white-space: nowrap;
    flex: 1;
    justify-content: center;
}

.doc-action-btn.btn-approve {
    background: var(--c-green-pale);
    color: #065f46;
}
.doc-action-btn.btn-approve:hover { background: var(--c-green); color: #fff; }

.doc-action-btn.btn-reject {
    background: var(--c-orange-pale);
    color: #b45309;
}
.doc-action-btn.btn-reject:hover { background: var(--c-orange); color: #fff; }

.doc-action-btn.btn-download {
    background: var(--c-blue-pale);
    color: var(--c-blue);
}
.doc-action-btn.btn-download:hover { background: var(--c-blue); color: #fff; }

.doc-action-btn.btn-delete {
    background: var(--c-red-pale);
    color: var(--c-red);
    flex: 0;
    padding: 7px 10px;
}
.doc-action-btn.btn-delete:hover { background: var(--c-red); color: #fff; }

/* Documents section header sticky */
.apple-filter-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--c-bg);
    padding: 12px 0;
    margin-bottom: 8px;
}

/* ══════════════════════════════════════════════════════════════════
   SETTINGS SECTION — Premium Redesign
   ══════════════════════════════════════════════════════════════════ */
.settings-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 768px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }
    .settings-sidebar { display: flex; overflow-x: auto; gap: 0; }
    .settings-nav-item { flex-shrink: 0; flex-direction: row; }
}

.settings-sidebar {
    background: var(--c-surface);
    border-radius: var(--r-xl);
    border: 1px solid var(--c-border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 80px;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--c-text-2);
    border-bottom: 1px solid var(--c-border);
    transition: all var(--t-fast);
}

.settings-nav-item:last-child { border-bottom: none; }

.settings-nav-item i {
    width: 18px;
    text-align: center;
    color: var(--c-text-3);
    transition: color var(--t-fast);
}

.settings-nav-item:hover {
    background: var(--c-blue-pale);
    color: var(--c-blue);
}
.settings-nav-item:hover i { color: var(--c-blue); }

.settings-nav-item.active {
    background: var(--c-blue-pale);
    color: var(--c-blue);
    font-weight: 700;
    border-left: 3px solid var(--c-blue);
}
.settings-nav-item.active i { color: var(--c-blue); }

.settings-panel {
    background: var(--c-surface);
    border-radius: var(--r-xl);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.settings-panel-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    gap: 14px;
}

.settings-panel-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    background: var(--c-blue-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--c-blue);
    flex-shrink: 0;
}

.settings-panel-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 2px 0;
}

.settings-panel-sub {
    font-size: 0.82rem;
    color: var(--c-text-2);
    margin: 0;
}

.settings-panel-body {
    padding: 24px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--c-border);
}
.settings-row:last-child { border-bottom: none; }

.settings-row-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 2px 0;
}

.settings-row-desc {
    font-size: 0.8rem;
    color: var(--c-text-3);
    margin: 0;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-track {
    width: 44px;
    height: 24px;
    background: var(--c-border-dark);
    border-radius: 12px;
    transition: background var(--t-base);
    position: relative;
    flex-shrink: 0;
}

.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: transform var(--t-base);
}

.toggle-switch input:checked ~ .toggle-track { background: var(--c-blue); }
.toggle-switch input:checked ~ .toggle-track .toggle-thumb { transform: translateX(20px); }

/* ====================================================================
   PREMIUM IDENTITY CARDS (ELITE EDITION)
   ==================================================================== */
.premium-card-inner {
    background: var(--c-surface);
    border-radius: var(--r-xl);
    padding: 24px;
    border: 1px solid var(--c-border);
    transition: all var(--t-slow);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.premium-card-inner:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--c-blue-light);
}

.pcard-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pcard-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.pcard-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-blue) 100%);
    color: white;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 4px 12px rgba(13, 31, 51, 0.2);
}

.pcard-status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid var(--c-surface);
}

.pcard-status-dot.online { background: #10b981; }
.pcard-status-dot.offline { background: #94a3b8; }

.pcard-main-info { flex: 1; min-width: 0; }
.pcard-name { 
    font-size: 1.1rem; font-weight: 700; color: var(--c-navy); 
    margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}
.pcard-id-badge { font-size: 0.7rem; font-weight: 600; color: var(--c-text-3); text-transform: uppercase; letter-spacing: 0.05em; }

.pcard-type-tag {
    font-size: 0.65rem; font-weight: 800; text-transform: uppercase; padding: 4px 10px; border-radius: 20px;
}
.pcard-type-tag.client { background: var(--c-blue-pale); color: var(--c-blue); }
.pcard-type-tag.staff { background: #fef3c7; color: #b45309; }
.pcard-type-tag.admin { background: #fee2e2; color: #b91c1c; }

.pcard-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--c-bg);
    border-radius: var(--r-lg);
}

.pcard-detail { display: flex; align-items: center; gap: 12px; color: var(--c-text-2); font-size: 0.85rem; }
.pcard-detail i { width: 16px; color: var(--c-text-3); font-size: 0.9rem; }
.pcard-detail span { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.pcard-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.paction-btn {
    min-height: 36px; border-radius: 10px; border: 1px solid var(--c-border);
    background: white; color: var(--c-text-2); cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.9rem;
    padding: 0 10px;
}

.paction-btn:hover { background: var(--c-navy); color: white; border-color: var(--c-navy); }
.paction-btn.danger:hover { background: var(--c-red); border-color: var(--c-red); }

.pcard-meta-info { font-size: 0.65rem; color: var(--c-text-3); font-weight: 500; }

@media (max-width: 640px) {
    .pcard-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .pcard-actions {
        width: 100%;
    }

    .paction-btn {
        flex: 1 1 auto;
        min-width: 0;
    }
}


/* ====================================================================
   EMAIL SIGNATURE GENERATOR (ELITE VERSION)
   ==================================================================== */
.email-sig-builder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

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

.email-sig-form-col {
    background: var(--c-surface);
    padding: 24px;
    border-radius: var(--r-xl);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
}

.email-sig-preview-col {
    position: sticky;
    top: 24px;
}

.email-sig-preview-card {
    background: #f8fafc;
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 30px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    margin-bottom: 24px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    overflow-x: auto;
    max-width: 100%;
}

.email-sig-preview-inner {
    width: 100%;
    max-width: 480px;
    min-width: 0;
    background: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    box-sizing: border-box;
}

.email-sig-photo-wrap, .email-sig-logo-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.email-sig-photo-preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f1f5f9;
    background-size: cover;
    background-position: center;
    border: 2px solid var(--c-border);
}

.email-sig-logo-preview {
    width: 100px;
    height: 48px;
    background: #f1f5f9;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
}

.email-sig-photo-actions { display: flex; gap: 8px; }

.email-sig-saved-list {
    background: var(--c-blue-pale);
    padding: 20px;
    border-radius: var(--r-lg);
    border: 1px solid var(--c-blue-light);
    margin-bottom: 30px;
}

.email-sig-saved-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: white;
    border-radius: var(--r-md);
    margin-bottom: 8px;
    border: 1px solid var(--c-border);
}

.email-sig-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.form-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-3);
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--c-border);
}

/* ====================================================================
   ENHANCED LETTERHEAD DESIGN TOKENS
   ==================================================================== */
.header-geometric {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 120px;
    overflow: hidden;
    z-index: 0;
}
.header-geometric .tri-1 {
    position: absolute; top: 0; left: 0;
    border-top: 100px solid black;
    border-right: 150px solid transparent;
    opacity: 0.1;
}
.header-geometric .tri-2 {
    position: absolute; top: 0; right: 0;
    border-bottom: 80px solid black;
    border-left: 120px solid transparent;
    opacity: 0.05;
}

.header-minimal {
    display: flex;
    gap: 4px;
    margin-top: 10px;
}
.header-minimal .dot-1 { width: 40px; height: 3px; border-radius: 2px; }
.header-minimal .dot-2 { width: 10px; height: 3px; border-radius: 2px; }

.header-accent {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
}
.header-accent .thick { width: 60px; height: 4px; border-radius: 2px; }
.header-accent .thin { width: 100%; height: 1px; }

.header-modern {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}
.header-modern .block { width: 12px; height: 12px; transform: rotate(45deg); }
.header-modern .line { flex: 1; border-bottom: 1px solid; opacity: 0.3; }

.footer-boxed {
    border: 1px solid var(--footer-accent);
    padding: 15px !important;
    background: #f8fafc;
    border-radius: 8px;
}

.footer-divider {
    border-top: 3px solid var(--footer-accent);
    padding-top: 15px !important;
}

.layout-corner {
    border-left: 15px solid var(--c-navy);
}

.layout-bordered {
    border: 10px solid #f1f5f9;
}


/* ====================================================================
   FINAL RESPONSIVE HARDENING (CLIENT + STAFF + ADMIN)
   ==================================================================== */
@media (max-width: 1200px) {
    #chatSection .chat-container {
        grid-template-columns: 260px 1fr !important;
        height: calc(100vh - var(--topbar-h) - 104px);
        height: calc(100dvh - var(--topbar-h) - 104px);
        min-height: 420px;
    }
}

@media (max-width: 1024px) {
    .content-area {
        padding: 14px !important;
    }

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

    .grid-2 {
        grid-template-columns: 1fr;
    }

    #dashboardSection h1,
    #staffDashboardSection h1,
    #adminDashboardSection h1,
    .apple-title {
        font-size: 1.35rem !important;
        line-height: 1.25;
        word-break: break-word;
    }

    .apple-subtitle {
        font-size: 0.84rem;
        line-height: 1.45;
    }

    #chatSection .chat-container {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    #chatSection .chat-sidebar {
        max-height: 60vh;
        overflow-y: auto;
    }

    #chatSection .chat-window {
        min-height: 54vh;
    }

    #chatSection #messageCopilotPanel {
        margin: 10px !important;
    }

    #chatSection #messageCopilotPanel .settings-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .modal-content {
        width: min(94vw, 680px);
        max-width: 94vw;
    }

    .modal-content.modal-lg {
        width: min(96vw, 900px);
        max-width: 96vw;
    }
}

@media (max-width: 768px) {
    #portalContainer.visible {
        display: flex !important;
        flex-direction: column;
    }

    .content-area {
        padding: 12px !important;
    }

    .card {
        padding: 16px;
    }

    .card .card {
        padding: 14px;
    }

    .apple-filter-bar {
        gap: 8px;
        align-items: stretch;
    }

    .apple-search-box {
        min-width: 0;
        width: 100%;
    }

    .apple-pill-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .pill-tab {
        flex: 0 0 auto;
    }

    .documents-grid,
    .user-cards-grid,
    #documentsSection .apple-grid-layout.documents-grid,
    #userManagementSection .apple-grid-layout.user-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .settings-layout {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .settings-sidebar {
        position: static !important;
        top: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap;
        padding: 6px;
        border-radius: 14px;
    }

    .settings-nav-item {
        width: auto !important;
        min-width: max-content;
        flex: 0 0 auto;
        flex-direction: row !important;
        gap: 8px;
        border-bottom: none !important;
        border-left: none !important;
        border-radius: var(--r-full);
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .settings-nav-item.active {
        border-left: none !important;
        box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb, 37, 99, 235), 0.22);
    }

    .settings-panel-header {
        padding: 14px 14px 12px;
        align-items: flex-start;
    }

    .settings-panel-body {
        padding: 14px;
    }

    .settings-row {
        align-items: flex-start;
        gap: 10px;
    }

    .settings-row > div {
        min-width: 0;
        flex: 1;
    }

    .settings-row-label,
    .settings-row-desc {
        word-break: break-word;
    }

    #settingsSection [style*="display:flex"][style*="gap:20px"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    #settingsSection [style*="display:flex"][style*="gap:14px"][style*="padding:14px"] {
        flex-wrap: wrap;
    }

    #dashboardSection .grid-3,
    #staffDashboardSection .grid-3,
    #adminDashboardSection .grid-3,
    #dashboardSection .grid-2,
    #staffDashboardSection .grid-2,
    #adminDashboardSection .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    #adminDashboardSection .btn.btn-ghost,
    #staffDashboardSection .btn.btn-ghost {
        justify-content: flex-start;
    }

    #emailSignatureSection .email-sig-upload-row {
        flex-direction: column !important;
        gap: 14px !important;
    }

    #emailSignatureSection [style*="align-items: center"][style*="gap: 12px"] {
        flex-wrap: wrap !important;
    }

    .email-sig-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .email-sig-actions .btn {
        width: 100%;
    }

    .email-sig-preview-card {
        padding: 16px 10px;
        min-height: 220px;
    }
}

@media (max-width: 480px) {
    .content-area {
        padding: 10px !important;
    }

    .topbar {
        padding: 0 10px !important;
    }

    .card {
        padding: 14px !important;
    }

    .kpi-card {
        padding: 14px;
    }

    .kpi-value {
        font-size: 1.45rem;
    }

    #chatSection .chat-header,
    #chatSection .chat-window-header,
    #chatSection .chat-input {
        padding: 10px 12px !important;
    }

    #chatSection .chat-messages {
        padding: 10px 12px !important;
    }

    #chatSection .chat-item {
        padding: 10px 10px;
        gap: 8px;
    }

    #chatSection .chat-item-name,
    #chatSection .chat-item-message {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
    }

    .settings-nav-item {
        font-size: 0.76rem;
        padding: 9px 10px;
    }

    .apple-title {
        font-size: 1.2rem !important;
    }

    .apple-subtitle {
        font-size: 0.8rem !important;
    }

    .modal-content,
    .modal-content.modal-lg {
        width: 96vw;
        max-width: 96vw;
        border-radius: 12px;
    }
}

/* ====================================================================
   SHIP FIX — mobile “text cut to 2 letters” + stale CSS cache defence
   (paired with portal.css?v=20260416ui3 on HTML entrypoints)
   ==================================================================== */
@media (max-width: 1024px) {
    #portalContainer.visible {
        display: flex !important;
        flex-direction: column !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }

    #portalContainer.visible > .sidebar,
    #portalContainer.visible > nav.sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(288px, calc(100vw - 48px)) !important;
        max-width: 100vw !important;
        z-index: 2000 !important;
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        pointer-events: none !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-left: env(safe-area-inset-left, 0px) !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #portalContainer.visible > .sidebar.open,
    #portalContainer.visible > nav.sidebar.open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    #portalContainer.visible > .main-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        box-sizing: border-box !important;
    }

    .nav-item .nav-label {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: break-word !important;
    }
}

@media (max-width: 768px) {
    .apple-title,
    .apple-subtitle,
    .card-title,
    .card-desc,
    .chat-header-title,
    #dashboardSection h1,
    #staffDashboardSection h1,
    #adminDashboardSection h1 {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: break-word !important;
    }

    #chatSection .card-header {
        align-items: flex-start !important;
    }

    #chatSection .card-header .card-title {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    #chatSection .chat-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    #chatSection .chat-header-title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    #chatSection .settings-row {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    #chatSection .settings-row .settings-row-desc {
        white-space: normal !important;
        overflow: visible !important;
    }
}

/* ====================================================================
   SECTION 2-COL — balanced layout for content pages
   (Support, Training, Tasks, AI & Automation)
   ==================================================================== */
.section-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.section-2col > div {
    min-width: 0;
}

@media (max-width: 1100px) {
    .section-2col {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
}

@media (max-width: 768px) {
    .section-2col {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
}

/* Settings layout fix — only for settings page nav sidebar */
.settings-layout {
    display: grid !important;
    grid-template-columns: 220px 1fr !important;
    gap: 24px !important;
    align-items: start !important;
}

@media (max-width: 768px) {
    .settings-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* ====================================================================
   NEW MODULES — Appointments, Invoices, Audit Log, Billing
   Responsive mobile CSS
   ==================================================================== */

/* Appointment grid */
#appointmentsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

/* Invoice summary row */
#invoiceSummaryCards {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
#invoiceSummaryCards > .kpi-card {
    flex: 1 1 160px;
    min-width: 140px;
}

/* Invoices table */
#invoicesSection table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
#invoicesSection table th,
#invoicesSection table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--c-border, #e5e7eb);
    white-space: nowrap;
}

/* Billing plans grid */
#billingPlansGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

/* Billing usage stats grid */
#billingUsageGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

/* Audit log table wrapper */
#auditLogSection .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}
#auditLogSection table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    font-size: .85rem;
}
#auditLogSection table th,
#auditLogSection table td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--c-border, #e5e7eb);
    white-space: nowrap;
}

/* AI Banner on dashboards */
.ai-dashboard-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border-radius: 20px;
    padding: 18px 22px;
    margin-bottom: 28px;
}
.ai-dashboard-banner-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* ============================================================
   MOBILE — max-width: 640px — all new sections
   ============================================================ */
@media (max-width: 640px) {
    /* Appointments */
    #appointmentsGrid {
        grid-template-columns: 1fr !important;
    }
    #apptStatusTabs,
    #apptTypeTabs {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Invoices */
    #invoiceSummaryCards {
        flex-direction: column !important;
    }
    #invoicesSection .table-wrapper,
    #invoicesSection table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #invoicesSection table {
        min-width: 580px;
    }

    /* Billing */
    #billingPlansGrid,
    #billingUsageGrid {
        grid-template-columns: 1fr !important;
    }

    /* Audit Log */
    #auditLogSection table {
        min-width: 700px;
    }
    #auditLogSection .filter-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Modals — full-width on mobile */
    .modal-content {
        width: 96vw !important;
        max-width: 96vw !important;
        margin: 8px auto !important;
        border-radius: 16px !important;
    }
    .modal-lg {
        max-width: 96vw !important;
    }

    /* AI dashboard banners — stack vertically */
    .ai-dashboard-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .ai-dashboard-banner-actions {
        margin-left: 0 !important;
        width: 100%;
        justify-content: flex-start;
    }

    /* AI floating widget — ensure visible above mobile nav */
    #aiWidgetBtn {
        bottom: 72px !important;
        right: 16px !important;
    }
    #aiWidgetPanel {
        bottom: 136px !important;
        right: 12px !important;
        width: calc(100vw - 24px) !important;
    }

    /* Appointment/Invoice modals — stack form fields */
    #appointmentForm .form-row,
    #invoiceModal .form-row {
        flex-direction: column !important;
    }
}

/* ============================================================
   MOBILE — max-width: 768px — medium screens
   ============================================================ */
@media (max-width: 768px) {
    /* Pill-tab rows wrap */
    .pill-tabs {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Appointment admin actions row */
    #apptAdminActions {
        flex-direction: column;
        gap: 8px;
    }

    /* Invoice admin actions row */
    #invoiceAdminActions {
        flex-direction: column;
        gap: 8px;
    }

    /* Billing plan feature lists */
    #billingPlansGrid .card {
        padding: 18px !important;
    }

    /* Audit log filters stack */
    #auditLogSection .filter-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* Page-level section padding */
    #appointmentsSection,
    #invoicesSection,
    #auditLogSection,
    #billingSection {
        padding: 16px !important;
    }
}

/* ====================================================================
   CHAT SECTION — Mobile improvements
   ==================================================================== */

/* Ensure chat container fills height */
#chatSection {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-h, 64px) - 32px);
    height: calc(100dvh - var(--topbar-h, 64px) - 32px);
    min-height: 400px;
}
#chatSection .chat-container {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Chat input bar — always visible, never hidden */
.chat-input {
    position: sticky;
    bottom: 0;
    background: var(--c-bg, #fff);
    z-index: 10;
    border-top: 1px solid var(--c-border, #e5e7eb);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
}
.chat-input textarea,
.chat-input input[type="text"] {
    flex: 1;
    min-width: 0;
    resize: none;
    border-radius: 12px;
    border: 1px solid var(--c-border, #e2e8f0);
    padding: 9px 13px;
    font-size: .9rem;
    outline: none;
    font-family: inherit;
    line-height: 1.4;
    max-height: 120px;
    overflow-y: auto;
}

/* Message copilot panel — collapsible on mobile */
.chat-copilot-panel {
    border-top: 1px solid var(--c-border, #e5e7eb);
    background: var(--c-surface, #f8fafc);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    /* Chat section height */
    #chatSection {
        height: calc(100vh - var(--topbar-h, 56px) - 16px);
        height: calc(100dvh - var(--topbar-h, 56px) - 16px);
    }

    /* Chat input accessible on mobile */
    .chat-input {
        padding: 8px 10px;
        gap: 6px;
    }
    .chat-input textarea,
    .chat-input input[type="text"] {
        font-size: .85rem;
        padding: 8px 10px;
    }

    /* Copilot panel — scrollable and compact */
    #messageCopilotPanel {
        max-height: 220px !important;
        overflow-y: auto !important;
    }

    /* Back button in chat header on mobile */
    #chatSection .chat-back-btn {
        display: inline-flex !important;
    }

    /* Chat header compact */
    .chat-header,
    .chat-window-header {
        padding: 10px 12px !important;
    }

    /* Message bubbles — full width */
    .msg-bubble {
        max-width: 90% !important;
    }

    /* Attachment preview bar */
    #chatAttachmentPreview {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px 10px !important;
    }
}

@media (max-width: 480px) {
    /* Very small screens — ensure send button visible */
    .chat-send-btn,
    #chatSection .btn.btn-primary {
        min-width: 40px !important;
        padding: 8px !important;
    }
    .chat-input textarea {
        max-height: 80px;
    }
}


/* ======================================================================
   EH TAX PORTAL — UNIFIED PREMIUM LAYER v2.0
   Single clean addition. No duplicates.
   ====================================================================== */

/* Extended tokens */
:root {
    --shadow-card:          0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
    --shadow-card-hover:    0 8px 24px rgba(var(--primary-rgb, 37, 99, 235),.12), 0 2px 8px rgba(0,0,0,.08);
    --shadow-float:         0 20px 60px rgba(0,0,0,.15), 0 4px 16px rgba(0,0,0,.08);
    --gradient-brand:       linear-gradient(135deg,var(--c-blue) 0%,var(--c-blue-light) 100%);
    --gradient-brand-soft:  linear-gradient(135deg,rgba(var(--primary-rgb, 37, 99, 235),.08) 0%,rgba(var(--primary-rgb, 37, 99, 235),.02) 100%);
    --gradient-navy:        linear-gradient(160deg,var(--sidebar-bg-top, #060f1e) 0%,var(--sidebar-bg-mid, #0d1f33) 45%,var(--sidebar-bg-bot, #1a3a5c) 100%);
    --gradient-success:     linear-gradient(135deg,#10b981 0%,#059669 100%);
    --glass-bg:             rgba(255,255,255,.85);
    --t-spring:             cubic-bezier(.34,1.56,.64,1);
    --t-ease:               cubic-bezier(.4,0,.2,1);
    --c-navy-deep:          #060f1e;
}

/* Base rendering */
*, *::before, *::after {
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Keyframes */
@keyframes spin         { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sectionFade  { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulseDot     { 0%,100% { box-shadow:0 0 0 2px rgba(16,185,129,.3); } 50% { box-shadow:0 0 0 5px rgba(16,185,129,.1); } }
@keyframes pulseBadge   { 0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,.4); } 50% { box-shadow:0 0 0 6px rgba(239,68,68,0); } }
@keyframes shimmer      { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@keyframes blobFloat1   { from { transform:translate(0,0) scale(1); } to { transform:translate(40px,-40px) scale(1.1); } }
@keyframes blobFloat2   { from { transform:translate(0,0) scale(1); } to { transform:translate(-30px,30px) scale(1.08); } }
@keyframes cardEntrance { from { opacity:0; transform:translateY(20px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes modalSlideIn { from { opacity:0; transform:scale(.95) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes typingBounce { 0%,60%,100% { transform:translateY(0); opacity:.4; } 30% { transform:translateY(-4px); opacity:1; } }
@keyframes msgSlideIn   { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

/* Section fade */
.section { animation: sectionFade .25s ease; }

/* Scrollbar */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(148,163,184,.4); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(148,163,184,.7); }

/* Focus ring */
:focus-visible { outline:2px solid var(--c-blue) !important; outline-offset:2px !important; }

/* Skeleton */
.skeleton { background:linear-gradient(90deg,#f0f4f8 25%,#e2e8f0 50%,#f0f4f8 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--r-sm); }

/* ====================================================================
   LOGIN — PREMIUM
   ==================================================================== */
#loginPage { background: var(--sidebar-bg-top, #060f1e) !important; overflow:hidden; }

.login-hero {
    background:transparent !important;
    position:relative; z-index:1; overflow:visible;
    padding:64px 52px !important;
}
.login-hero::before {
    content:'' !important; position:absolute !important;
    top:-120px !important; right:-80px !important;
    width:500px !important; height:500px !important;
    background:radial-gradient(circle,rgba(var(--primary-rgb, 37, 99, 235),.35) 0%,transparent 70%) !important;
    border-radius:50% !important;
    animation:blobFloat1 8s ease-in-out infinite alternate !important; z-index:0 !important;
}
.login-hero::after {
    content:'' !important; position:absolute !important;
    bottom:-80px !important; left:-80px !important;
    width:400px !important; height:400px !important;
    background:radial-gradient(circle,rgba(var(--primary-rgb, 37, 99, 235),.25) 0%,transparent 70%) !important;
    border-radius:50% !important;
    animation:blobFloat2 10s ease-in-out infinite alternate !important; z-index:0 !important;
}
.login-hero-logo { position:relative; z-index:2; filter:drop-shadow(0 0 24px rgba(255,255,255,.2)) !important; margin-bottom:36px !important; }
.login-hero-title {
    font-size:clamp(2rem,3vw,2.8rem) !important; font-weight:800 !important;
    font-family:'Outfit',sans-serif !important; letter-spacing:-0.03em !important; line-height:1.1 !important;
    color:#fff !important; margin-bottom:16px !important; position:relative; z-index:2;
    text-shadow:0 2px 20px rgba(0,0,0,.3) !important;
}
.login-hero-sub { font-size:1rem !important; color:rgba(255,255,255,.72) !important; line-height:1.7 !important; max-width:360px !important; margin-bottom:48px !important; position:relative; z-index:2; }
.login-features { display:flex !important; flex-direction:column !important; gap:16px !important; position:relative; z-index:2; }
.login-feature {
    display:flex !important; align-items:center !important; gap:16px !important; padding:14px 18px !important;
    background:rgba(255,255,255,.07) !important; backdrop-filter:blur(20px) !important;
    border:1px solid rgba(255,255,255,.12) !important; border-radius:14px !important;
    transition:all .2s ease !important;
}
.login-feature:hover { background:rgba(255,255,255,.12) !important; transform:translateX(4px) !important; }
.login-feature-icon { width:42px !important; height:42px !important; border-radius:12px !important; background:linear-gradient(135deg,var(--c-blue) 0%,#7c3aed 100%) !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#fff !important; font-size:1rem !important; flex-shrink:0 !important; box-shadow:0 4px 12px rgba(var(--primary-rgb, 37, 99, 235),.4) !important; }
.login-feature-body h4 { font-size:.88rem !important; font-weight:700 !important; color:#fff !important; margin-bottom:2px !important; }
.login-feature-body p  { font-size:.78rem !important; color:rgba(255,255,255,.55) !important; margin:0 !important; }
.login-trust-strip { display:flex; gap:20px; margin-top:36px; flex-wrap:wrap; position:relative; z-index:2; }
.login-trust-item { display:flex; align-items:center; gap:6px; font-size:.75rem; color:rgba(255,255,255,.45); font-weight:500; }
.login-trust-item i { color:rgba(255,255,255,.3); font-size:.7rem; }
.login-hero-footer { bottom:32px !important; left:52px !important; font-size:.72rem !important; color:rgba(255,255,255,.3) !important; position:absolute; z-index:2; letter-spacing:.02em; }

.login-form-panel {
    background:rgba(255,255,255,.04) !important; backdrop-filter:blur(40px) !important;
    border-left:1px solid rgba(255,255,255,.08) !important;
    display:flex !important; align-items:center !important; justify-content:center !important; padding:48px 32px !important;
}
.login-card {
    background:rgba(255,255,255,.96) !important; border-radius:24px !important;
    border:1px solid rgba(255,255,255,.8) !important;
    box-shadow:0 24px 80px rgba(0,0,0,.25), 0 0 0 1px rgba(var(--primary-rgb, 37, 99, 235),.06) !important;
    padding:44px !important; max-width:420px !important; width:100% !important;
    animation:cardEntrance .5s cubic-bezier(.34,1.56,.64,1) !important;
}
.login-card-title { font-size:1.8rem !important; font-weight:800 !important; font-family:'Outfit',sans-serif !important; letter-spacing:-0.03em !important; color:#0f172a !important; margin-bottom:6px !important; }
.login-card-desc  { font-size:.88rem !important; color:#475569 !important; margin-bottom:32px !important; line-height:1.5 !important; }
.login-card .form-group { margin-bottom:18px !important; }
.login-card .form-label { font-size:.8rem !important; font-weight:700 !important; color:#475569 !important; text-transform:uppercase !important; letter-spacing:.05em !important; margin-bottom:7px !important; display:block !important; }
.login-card .form-control { height:48px !important; padding:0 16px !important; border:1.5px solid #e2e8f0 !important; border-radius:12px !important; font-size:.95rem !important; background:#f8fafc !important; transition:all .2s ease !important; color:#0f172a !important; }
.login-card .form-control:focus { border-color:var(--c-blue) !important; background:#fff !important; box-shadow:0 0 0 4px rgba(var(--primary-rgb, 37, 99, 235),.1) !important; }

.btn-login {
    width:100% !important; height:50px !important; padding:0 24px !important;
    background:linear-gradient(135deg,var(--c-blue-dark) 0%,var(--c-blue) 50%,var(--c-blue-light) 100%) !important;
    color:#fff !important; font-size:.95rem !important; font-weight:700 !important;
    border:none !important; border-radius:12px !important; cursor:pointer !important;
    display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important;
    margin-top:8px !important; letter-spacing:.01em !important;
    box-shadow:0 4px 16px rgba(var(--primary-rgb, 37, 99, 235),.4), inset 0 1px 0 rgba(255,255,255,.2) !important;
    transition:all .25s cubic-bezier(.34,1.56,.64,1) !important;
    position:relative !important; overflow:hidden !important;
}
.btn-login::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); transition:left .5s ease; }
.btn-login:hover::before { left:100%; }
.btn-login:hover  { transform:translateY(-2px) !important; box-shadow:0 8px 28px rgba(var(--primary-rgb, 37, 99, 235),.5), inset 0 1px 0 rgba(255,255,255,.2) !important; }
.btn-login:active { transform:translateY(0) !important; }
.btn-login:disabled { opacity:.55 !important; cursor:not-allowed !important; transform:none !important; }

.login-divider { display:flex; align-items:center; gap:12px; margin:20px 0 0; color:#94a3b8; font-size:.78rem; }
.login-divider::before, .login-divider::after { content:''; flex:1; height:1px; background:#e2e8f0; }
.login-help { text-align:center; margin-top:20px; font-size:.8rem; color:#94a3b8; }
.login-help a { color:var(--c-blue); font-weight:600; }
.login-help a:hover { text-decoration:underline; }
.login-alert { margin-top:16px !important; padding:12px 16px !important; border-radius:10px !important; font-size:.84rem !important; font-weight:500 !important; display:none !important; align-items:center !important; gap:8px !important; }
.login-alert.error   { display:flex !important; background:#fef2f2 !important; border:1px solid rgba(239,68,68,.2) !important; color:#991b1b !important; }
.login-alert.success { display:flex !important; background:#ecfdf5 !important; border:1px solid rgba(16,185,129,.2) !important; color:#065f46 !important; }

@media (max-width:768px) {
    #loginPage { background:#f8fafc !important; }
    .login-hero { display:none !important; }
    .login-form-panel { background:#f8fafc !important; backdrop-filter:none !important; border-left:none !important; padding:32px 20px !important; }
    .login-card { box-shadow:0 4px 24px rgba(0,0,0,.1) !important; padding:32px 24px !important; background:#fff !important; animation:none !important; }
}

/* ====================================================================
   SIDEBAR — PREMIUM
   ==================================================================== */
.sidebar {
    background:linear-gradient(160deg,#060f1e 0%,#0d1f33 45%,#1a3a5c 100%) !important;
    box-shadow:4px 0 32px rgba(0,0,0,.25), inset -1px 0 0 rgba(255,255,255,.04) !important;
}
.sidebar-header { padding:24px 20px 20px !important; border-bottom:1px solid rgba(255,255,255,.06) !important; background:rgba(0,0,0,.15) !important; }
.sidebar-logo   { max-width:160px !important; height:auto !important; filter:brightness(1.1) !important; }
.sidebar-user {
    padding:16px 18px !important; margin:10px 10px 6px !important;
    background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.08) !important;
    border-radius:14px !important; gap:12px !important;
    display:flex !important; align-items:center !important; cursor:pointer !important;
    transition:background .2s ease !important; position:relative !important;
}
.sidebar-user:hover { background:rgba(255,255,255,.1) !important; }
.sidebar-user::after { content:''; width:8px; height:8px; border-radius:50%; background:#10b981; box-shadow:0 0 0 2px rgba(16,185,129,.3); margin-left:auto; flex-shrink:0; animation:pulseDot 2.5s ease-in-out infinite; }
.sidebar-avatar { width:40px !important; height:40px !important; border-radius:12px !important; font-size:.9rem !important; font-weight:800 !important; flex-shrink:0 !important; background:linear-gradient(135deg,var(--c-blue) 0%,#7c3aed 100%) !important; box-shadow:0 4px 12px rgba(var(--primary-rgb, 37, 99, 235),.4) !important; border:2px solid rgba(255,255,255,.15) !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#fff !important; }
.sidebar-user-name { font-size:.875rem !important; font-weight:700 !important; color:#fff !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; max-width:150px !important; }
.sidebar-user-id   { font-size:.7rem !important; color:rgba(255,255,255,.38) !important; margin-top:1px !important; letter-spacing:.02em !important; }
.sidebar-footer    { padding:14px 12px !important; border-top:1px solid rgba(255,255,255,.06) !important; background:rgba(0,0,0,.1) !important; flex-shrink:0 !important; }
.btn-logout { width:100% !important; padding:11px 16px !important; background:rgba(239,68,68,.08) !important; border:1px solid rgba(239,68,68,.15) !important; border-radius:12px !important; color:rgba(255,255,255,.6) !important; font-size:.84rem !important; font-weight:600 !important; cursor:pointer !important; display:flex !important; align-items:center !important; gap:10px !important; justify-content:center !important; transition:all .2s ease !important; }
.btn-logout:hover { background:rgba(239,68,68,.18) !important; border-color:rgba(239,68,68,.35) !important; color:#fca5a5 !important; transform:translateY(-1px) !important; }

.nav-section-label { font-size:.65rem !important; font-weight:700 !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:rgba(255,255,255,.28) !important; padding:12px 14px 5px !important; display:block !important; }
.nav-item { margin:2px 0 !important; border-radius:12px !important; overflow:hidden !important; }
.nav-item a, .nav-item button { display:flex !important; align-items:center !important; gap:12px !important; padding:11px 14px !important; width:100% !important; border:none !important; background:transparent !important; color:rgba(255,255,255,.65) !important; font-size:.875rem !important; font-weight:500 !important; border-radius:12px !important; cursor:pointer !important; transition:all .18s ease !important; text-align:left !important; position:relative !important; overflow:hidden !important; }
.nav-item a::before, .nav-item button::before { content:''; position:absolute; left:0; top:20%; bottom:20%; width:3px; background:linear-gradient(135deg,var(--c-blue) 0%,#7c3aed 100%); border-radius:0 3px 3px 0; opacity:0; transform:scaleY(.5); transition:all .18s ease; }
.nav-item a:hover, .nav-item button:hover { background:rgba(255,255,255,.09) !important; color:#fff !important; transform:translateX(3px) !important; }
.nav-item.active a, .nav-item.active button { background:rgba(var(--primary-rgb, 37, 99, 235),.2) !important; color:#fff !important; font-weight:600 !important; box-shadow:inset 0 0 0 1px rgba(var(--primary-rgb, 37, 99, 235),.25) !important; }
.nav-item.active a::before, .nav-item.active button::before { opacity:1 !important; transform:scaleY(1) !important; }
.nav-icon { width:20px !important; text-align:center !important; font-size:.9rem !important; flex-shrink:0 !important; opacity:.8 !important; }
.nav-item.active .nav-icon { opacity:1 !important; }
.nav-badge { background:linear-gradient(135deg,#ef4444,#dc2626) !important; color:#fff !important; font-size:.65rem !important; font-weight:800 !important; border-radius:999px !important; min-width:18px !important; height:18px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:0 4px !important; box-shadow:0 2px 8px rgba(239,68,68,.4) !important; }

/* JS builds div.nav-item with .nav-icon / .nav-label — premium block above only styled a/button */
#portalContainer .sidebar .nav-item {
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding:11px 14px !important;
    width:100% !important;
    box-sizing:border-box !important;
    border:none !important;
    background:transparent !important;
    color:rgba(255,255,255,.65) !important;
    font-size:.875rem !important;
    font-weight:500 !important;
    border-radius:12px !important;
    cursor:pointer !important;
    transition:background .22s var(--eh-ease-out), color .22s var(--eh-ease-out), transform .28s var(--eh-ease-spring), box-shadow .22s ease !important;
    text-align:left !important;
    position:relative !important;
    overflow:hidden !important;
    margin:2px 0 !important;
}
#portalContainer .sidebar .nav-item::before {
    content:'' !important;
    position:absolute !important;
    left:0 !important;
    top:20% !important;
    bottom:20% !important;
    width:3px !important;
    background:linear-gradient(135deg,var(--c-blue) 0%,#7c3aed 100%) !important;
    border-radius:0 3px 3px 0 !important;
    opacity:0 !important;
    transform:scaleY(.5) !important;
    transition:opacity .24s var(--eh-ease-out), transform .28s var(--eh-ease-spring) !important;
}
#portalContainer .sidebar .nav-item:hover {
    background:rgba(255,255,255,.09) !important;
    color:#fff !important;
    transform:translateX(4px) !important;
}
#portalContainer .sidebar .nav-item.active {
    background:rgba(var(--primary-rgb, 37, 99, 235),.2) !important;
    color:#fff !important;
    font-weight:600 !important;
    box-shadow:inset 0 0 0 1px rgba(var(--primary-rgb, 37, 99, 235),.25) !important;
    border-left-color:transparent !important;
    padding-left:14px !important;
}
#portalContainer .sidebar .nav-item.active::before {
    opacity:1 !important;
    transform:scaleY(1) !important;
}
#portalContainer .sidebar .nav-item.active .nav-icon { opacity:1 !important; }

/* ====================================================================
   TOPBAR — PREMIUM
   ==================================================================== */
.topbar { min-height:calc(var(--topbar-h) + env(safe-area-inset-top, 0px)) !important; height:auto !important; background:rgba(255,255,255,.92) !important; backdrop-filter:saturate(180%) blur(24px) !important; -webkit-backdrop-filter:saturate(180%) blur(24px) !important; border-bottom:1px solid rgba(226,232,240,.7) !important; box-shadow:0 1px 0 rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04) !important; display:flex !important; align-items:center !important; padding:env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)) !important; justify-content:space-between !important; position:sticky !important; top:0 !important; z-index:1350 !important; box-sizing:border-box !important; }
.topbar-left  { display:flex !important; align-items:center !important; gap:14px !important; min-width:0 !important; }
.page-title   { font-family:'Outfit',sans-serif !important; font-size:1.1rem !important; font-weight:700 !important; color:#0f172a !important; letter-spacing:-0.01em !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
.menu-toggle  { width:38px !important; height:38px !important; border-radius:10px !important; border:1.5px solid #e2e8f0 !important; background:#fff !important; color:#475569 !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; transition:all .18s ease !important; font-size:.9rem !important; }
.menu-toggle:hover { background:var(--c-blue-pale) !important; border-color:var(--c-blue) !important; color:var(--c-blue) !important; }
.topbar-right { display:flex !important; align-items:center !important; gap:10px !important; flex-shrink:0 !important; }
.topbar-icon-btn { width:40px !important; height:40px !important; border-radius:12px !important; background:#f8fafc !important; border:1.5px solid #e2e8f0 !important; color:#475569 !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; transition:all .18s ease !important; position:relative !important; font-size:.95rem !important; }
.topbar-icon-btn:hover { background:var(--c-blue-pale) !important; border-color:var(--c-blue) !important; color:var(--c-blue) !important; transform:translateY(-1px) !important; }
.topbar-badge { position:absolute !important; top:-3px !important; right:-3px !important; background:linear-gradient(135deg,#ef4444,#dc2626) !important; color:#fff !important; font-size:.6rem !important; font-weight:800 !important; min-width:17px !important; height:17px !important; border-radius:999px !important; display:flex !important; align-items:center !important; justify-content:center !important; border:2px solid #fff !important; box-shadow:0 2px 8px rgba(239,68,68,.4) !important; animation:pulseBadge 2s infinite; }
.topbar-user  { display:flex !important; align-items:center !important; gap:10px !important; padding:6px 14px 6px 6px !important; border-radius:14px !important; background:#f8fafc !important; border:1.5px solid #e2e8f0 !important; cursor:pointer !important; transition:all .18s ease !important; }
.topbar-user:hover { background:var(--c-blue-pale) !important; border-color:var(--c-blue-light) !important; }
.topbar-user-name { font-size:.83rem !important; font-weight:600 !important; color:#0f172a !important; }
.topbar-avatar { width:30px !important; height:30px !important; border-radius:9px !important; background:linear-gradient(135deg,var(--c-blue) 0%,#7c3aed 100%) !important; color:#fff !important; font-size:.75rem !important; font-weight:800 !important; display:flex !important; align-items:center !important; justify-content:center !important; box-shadow:0 2px 8px rgba(var(--primary-rgb, 37, 99, 235),.3) !important; flex-shrink:0 !important; }

/* ====================================================================
   CARDS — PREMIUM
   ==================================================================== */
.card { background:#fff !important; border-radius:20px !important; border:1px solid rgba(226,232,240,.7) !important; box-shadow:0 2px 8px rgba(0,0,0,.05) !important; overflow:hidden !important; transition:box-shadow .25s ease, transform .25s ease !important; }
.card:hover { box-shadow:0 6px 24px rgba(0,0,0,.08) !important; transform:translateY(-1px) !important; }
.card-header { padding:18px 22px !important; border-bottom:1px solid rgba(226,232,240,.6) !important; display:flex !important; align-items:center !important; justify-content:space-between !important; background:#fff !important; }
.card-title  { font-family:'Outfit',sans-serif !important; font-size:1rem !important; font-weight:700 !important; color:#0f172a !important; letter-spacing:-0.01em !important; }
.card-body   { padding:20px 22px !important; }

/* ====================================================================
   KPI CARDS — PREMIUM
   ==================================================================== */
.kpi-card { background:#fff !important; border-radius:20px !important; padding:22px !important; border:1px solid rgba(226,232,240,.7) !important; box-shadow:0 2px 8px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.03) !important; transition:all .25s cubic-bezier(.34,1.2,.64,1) !important; position:relative !important; overflow:hidden !important; }
.kpi-card::after { content:''; position:absolute; top:0; right:0; width:80px; height:80px; background:radial-gradient(circle at top right,var(--c-blue-pale),transparent 70%); border-radius:0 20px 0 0; pointer-events:none; }
.kpi-card:hover { box-shadow:0 8px 32px rgba(var(--primary-rgb, 37, 99, 235),.12), 0 0 0 1px rgba(var(--primary-rgb, 37, 99, 235),.08) !important; transform:translateY(-3px) !important; }
.kpi-label { font-size:.75rem !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.06em !important; color:#475569 !important; margin-bottom:12px !important; display:flex !important; align-items:center !important; gap:6px !important; }
.kpi-value  { font-size:2.2rem !important; font-weight:800 !important; font-family:'Outfit',sans-serif !important; letter-spacing:-0.03em !important; line-height:1 !important; color:#0f172a !important; margin-bottom:10px !important; }
.kpi-sub    { font-size:.78rem !important; color:#94a3b8 !important; font-weight:500 !important; line-height:1.4 !important; }

/* ====================================================================
   BUTTONS — PREMIUM
   ==================================================================== */
.btn         { font-weight:600 !important; letter-spacing:.01em; transition:all .2s ease !important; }
.btn-primary { background:linear-gradient(135deg,var(--c-blue) 0%,#7c3aed 100%) !important; box-shadow:0 4px 14px rgba(var(--primary-rgb, 37, 99, 235),.35) !important; border:none !important; color:#fff !important; }
.btn-primary:hover { box-shadow:0 6px 20px rgba(var(--primary-rgb, 37, 99, 235),.45) !important; transform:translateY(-1px); }
.btn-success { background:linear-gradient(135deg,#10b981 0%,#059669 100%) !important; box-shadow:0 4px 14px rgba(16,185,129,.3) !important; border:none !important; color:#fff !important; }

/* ====================================================================
   BADGES
   ==================================================================== */
.badge         { font-weight:600 !important; letter-spacing:.02em; font-size:.72rem !important; }
.badge-success { background:rgba(16,185,129,.12) !important; color:#065f46 !important; border:1px solid rgba(16,185,129,.2) !important; }
.badge-warning { background:rgba(245,158,11,.12) !important; color:#92400e !important; border:1px solid rgba(245,158,11,.2) !important; }
.badge-danger, .badge-error { background:rgba(239,68,68,.1) !important; color:#991b1b !important; border:1px solid rgba(239,68,68,.18) !important; }
.badge-info   { background:rgba(var(--primary-rgb, 37, 99, 235),.1) !important; color:var(--c-blue-dark) !important; border:1px solid rgba(var(--primary-rgb, 37, 99, 235),.18) !important; }

/* ====================================================================
   TABLES
   ==================================================================== */
table th { background:var(--c-surface-2) !important; font-size:.68rem !important; font-weight:700 !important; letter-spacing:.07em !important; text-transform:uppercase !important; color:var(--c-text-2) !important; padding:10px 14px !important; }
table td { padding:10px 14px !important; font-size:.8125rem !important; }
table tbody tr { transition:background .16s var(--eh-ease-out) !important; }
table tbody tr:nth-child(even) td { background:rgba(15,23,42,.02) !important; }
table tbody tr:hover td { background:rgba(var(--primary-rgb, 37, 99, 235),.07) !important; }

/* ====================================================================
   MODAL
   ==================================================================== */
.modal { backdrop-filter:blur(6px) !important; -webkit-backdrop-filter:blur(6px) !important; background:rgba(15,23,42,.4) !important; }
.modal-content { border-radius:24px !important; box-shadow:0 20px 60px rgba(0,0,0,.15), 0 4px 16px rgba(0,0,0,.08) !important; border:1px solid rgba(255,255,255,.8) !important; animation:modalSlideIn .3s cubic-bezier(.34,1.56,.64,1); }

/* ====================================================================
   FORM CONTROLS
   ==================================================================== */
.form-control, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select, textarea { border:1.5px solid #e2e8f0 !important; border-radius:12px !important; transition:border-color .2s, box-shadow .2s !important; font-family:'Inter',sans-serif !important; }
.form-control:focus, input:focus, select:focus, textarea:focus { border-color:var(--c-blue) !important; box-shadow:0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235),.12) !important; outline:none !important; }

/* ====================================================================
   AI WIDGET
   ==================================================================== */
#aiWidget { z-index:9999; }
#aiWidgetBtn { background:linear-gradient(135deg,var(--c-blue) 0%,#7c3aed 100%) !important; box-shadow:0 8px 24px rgba(var(--primary-rgb, 37, 99, 235),.4), 0 2px 8px rgba(0,0,0,.15) !important; transition:all .3s cubic-bezier(.34,1.56,.64,1) !important; border:2px solid rgba(255,255,255,.25) !important; }
#aiWidgetBtn:hover { box-shadow:0 12px 32px rgba(var(--primary-rgb, 37, 99, 235),.5), 0 4px 12px rgba(0,0,0,.2) !important; transform:scale(1.06) !important; }
#aiWidgetBtn:active { transform:scale(.97) !important; }
#aiWidgetPanel { border-radius:24px !important; box-shadow:0 20px 60px rgba(0,0,0,.15), 0 4px 16px rgba(0,0,0,.08) !important; border:1px solid rgba(226,232,240,.8) !important; backdrop-filter:blur(20px) !important; overflow:hidden; }
.ai-msg--bot .ai-bubble  { background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%) !important; border:1px solid rgba(226,232,240,.7) !important; border-radius:16px 16px 16px 4px !important; font-size:.875rem !important; line-height:1.55 !important; }
.ai-msg--user .ai-bubble { background:linear-gradient(135deg,var(--c-blue) 0%,#7c3aed 100%) !important; border-radius:16px 16px 4px 16px !important; box-shadow:0 4px 12px rgba(var(--primary-rgb, 37, 99, 235),.25) !important; font-size:.875rem !important; line-height:1.55 !important; }
.ai-suggestion { background:#fff !important; border:1.5px solid #e2e8f0 !important; border-radius:20px !important; padding:5px 12px !important; font-size:.78rem !important; font-weight:500 !important; color:#475569 !important; cursor:pointer !important; transition:all .18s ease !important; white-space:nowrap; }
.ai-suggestion:hover { background:var(--c-blue-pale) !important; border-color:var(--c-blue) !important; color:var(--c-blue) !important; transform:translateY(-1px) !important; }

/* ====================================================================
   DASHBOARD AI BANNER
   ==================================================================== */
.eh-ai-banner { background:linear-gradient(135deg,var(--c-blue) 0%,#7c3aed 100%) !important; border-radius:20px !important; padding:20px 24px !important; margin-bottom:24px !important; color:#fff !important; box-shadow:0 8px 24px rgba(var(--primary-rgb, 37, 99, 235),.3) !important; display:flex; align-items:center; gap:16px; flex-wrap:wrap; position:relative; overflow:hidden; }
.eh-ai-banner::before { content:''; position:absolute; top:-30px; right:-30px; width:120px; height:120px; background:rgba(255,255,255,.08); border-radius:50%; }
.eh-ai-banner::after  { content:''; position:absolute; bottom:-20px; right:60px; width:80px; height:80px; background:rgba(255,255,255,.05); border-radius:50%; }
.eh-ai-banner-chips   { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.eh-ai-chip { background:rgba(255,255,255,.18) !important; border:1px solid rgba(255,255,255,.25) !important; color:#fff !important; border-radius:20px !important; padding:5px 14px !important; font-size:.78rem !important; font-weight:500 !important; cursor:pointer !important; transition:all .18s ease !important; }
.eh-ai-chip:hover { background:rgba(255,255,255,.28) !important; transform:translateY(-1px); }

/* ====================================================================
   STATUS PILLS
   ==================================================================== */
.status-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.02em; }
.status-pill.online { background:rgba(16,185,129,.1); color:#065f46; border:1px solid rgba(16,185,129,.2); }
.status-pill.online::before { content:''; width:6px; height:6px; border-radius:50%; background:#10b981; box-shadow:0 0 6px #10b981; animation:pulseDot 2s infinite; }

/* ====================================================================
   SECTION PAGE HEADER
   ==================================================================== */
.section-page-header { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:clamp(22px, 3vw, 32px); }
.section-page-header h1 { font-size:var(--eh-type-display) !important; font-weight:800 !important; letter-spacing:-0.035em !important; color:var(--c-text) !important; margin:0 0 6px !important; font-family:'Outfit',sans-serif !important; line-height:1.12 !important; }
.section-page-header p  { font-size:clamp(.84rem, 1.1vw, .9rem) !important; color:var(--c-text-2) !important; margin:0 !important; max-width:52ch; line-height:1.5 !important; }

/* ====================================================================
   QUICK-ACTION BUTTONS
   ==================================================================== */
.quick-action-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px 12px; border-radius:16px; background:#f8fafc; border:1.5px solid #e2e8f0; cursor:pointer; transition:all .2s cubic-bezier(.34,1.2,.64,1); text-align:center; color:#0f172a; font-size:.82rem; font-weight:600; text-decoration:none; }
.quick-action-btn i { font-size:1.3rem; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; transition:transform .2s ease; }
.quick-action-btn:hover { background:var(--c-blue-pale); border-color:var(--c-blue); color:var(--c-blue); transform:translateY(-3px); box-shadow:0 8px 24px rgba(var(--primary-rgb, 37, 99, 235),.15); }
.quick-action-btn:hover i { transform:scale(1.15); }

/* ====================================================================
   MESSAGING — COMPLETE PREMIUM SYSTEM
   ==================================================================== */
.msg-page-header { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.msg-page-title  { font-family:'Outfit',sans-serif; font-size:var(--eh-type-display); font-weight:800; color:var(--c-text); letter-spacing:-0.032em; margin:0 0 6px; display:flex; align-items:center; gap:10px; line-height:1.12; }
.msg-page-title i { color:var(--c-blue); font-size:1.25rem; }
.msg-page-sub   { font-size:clamp(.82rem, 1vw, .88rem); color:var(--c-text-3); margin:0; max-width:52ch; line-height:1.45; }
.msg-new-btn    { flex-shrink:0; }

.msg-layout { display:grid; grid-template-columns:320px 1fr; gap:0; height:calc(100vh - 200px); height:calc(100dvh - 200px); min-height:500px; max-height:820px; background:#fff; border-radius:20px; border:1px solid #e2e8f0; box-shadow:0 4px 24px rgba(0,0,0,.07); overflow:hidden; }
.msg-sidebar { border-right:1px solid #e2e8f0; display:flex; flex-direction:column; background:#f8fafc; overflow:hidden; }
.msg-sidebar-head { padding:16px 14px; border-bottom:1px solid #e2e8f0; background:#fff; flex-shrink:0; }
.msg-search-wrap { position:relative; display:flex; align-items:center; }
.msg-search-icon { position:absolute; left:12px; color:#94a3b8; font-size:.8rem; pointer-events:none; }
.msg-search-input { width:100%; padding:9px 12px 9px 34px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:.84rem; background:#f8fafc; color:#0f172a; transition:all .2s ease; }
.msg-search-input:focus { border-color:var(--c-blue); background:#fff; box-shadow:0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235),.1); outline:none; }
.msg-conv-list { flex:1; overflow-y:auto; padding:8px 0; }
.msg-conv-list::-webkit-scrollbar { width:4px; }
.msg-conv-list::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:99px; }

.chat-item { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; transition:background .15s ease; border-bottom:1px solid rgba(226,232,240,.5); position:relative; }
.chat-item:hover { background:rgba(var(--primary-rgb, 37, 99, 235),.04); }
.chat-item.active { background:var(--c-blue-pale) !important; border-left:3px solid var(--c-blue); }
.chat-item.active .chat-item-name { color:var(--c-blue) !important; }
.chat-item-avatar { width:44px; height:44px; border-radius:14px; background:linear-gradient(135deg,var(--c-blue) 0%,#7c3aed 100%); color:#fff; font-size:.95rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 2px 8px rgba(var(--primary-rgb, 37, 99, 235),.2); text-transform:uppercase; }
.chat-item-body { flex:1; min-width:0; }
.chat-item-top  { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:3px; }
.chat-item-name { font-size:.88rem; font-weight:700; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-item-time { font-size:.72rem; color:#94a3b8; flex-shrink:0; }
.chat-item-bottom   { display:flex; align-items:center; gap:6px; }
.chat-item-message  { font-size:.8rem; color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.chat-item.unread .chat-item-message { color:#475569; font-weight:600; }
.chat-unread { background:var(--c-blue); color:#fff; font-size:.65rem; font-weight:800; min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; flex-shrink:0; box-shadow:0 2px 6px rgba(var(--primary-rgb, 37, 99, 235),.35); }

.chat-empty { padding:48px 24px; text-align:center; color:#94a3b8; }
.chat-empty-icon  { font-size:2.2rem; margin-bottom:12px; opacity:.25; }
.chat-empty-title { font-size:.92rem; font-weight:700; color:#475569; margin-bottom:6px; }
.chat-empty-sub   { font-size:.8rem; line-height:1.5; max-width:220px; margin:0 auto; }

.msg-window { display:flex; flex-direction:column; min-width:0; overflow:hidden; position:relative; }
.msg-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; padding:40px; text-align:center; color:#94a3b8; }
.msg-empty-icon  { font-size:3rem; margin-bottom:16px; background:linear-gradient(135deg,rgba(var(--primary-rgb, 37, 99, 235),.08) 0%,rgba(124,58,237,.06) 100%); width:80px; height:80px; border-radius:24px; display:flex; align-items:center; justify-content:center; color:var(--c-blue); }
.msg-empty-title { font-family:'Outfit',sans-serif; font-size:1.2rem; font-weight:700; color:#0f172a; margin-bottom:8px; }
.msg-empty-sub   { font-size:.88rem; color:#94a3b8; max-width:300px; line-height:1.6; }

.msg-chat-header { padding:14px 20px; border-bottom:1px solid #e2e8f0; background:#fff; display:flex; align-items:center; min-height:66px; flex-shrink:0; gap:12px; }
.msg-contact-avatar { width:42px; height:42px; border-radius:14px; background:linear-gradient(135deg,var(--c-blue) 0%,#7c3aed 100%); color:#fff; font-size:.95rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 2px 8px rgba(var(--primary-rgb, 37, 99, 235),.2); text-transform:uppercase; }
.msg-contact-info { flex:1; min-width:0; }
.msg-contact-name { font-size:.95rem; font-weight:700; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-contact-role { font-size:.75rem; color:#94a3b8; text-transform:capitalize; margin-top:1px; display:flex; align-items:center; gap:6px; }
.msg-header-actions { display:flex; gap:6px; flex-shrink:0; }
.msg-header-action-btn { width:34px; height:34px; border-radius:10px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .18s ease; font-size:.82rem; }
.msg-header-action-btn:hover { background:var(--c-blue-pale); border-color:var(--c-blue); color:var(--c-blue); }
.msg-back-btn { width:34px; height:34px; border-radius:10px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; font-size:.9rem; transition:all .18s ease; }
.msg-back-btn:hover { background:var(--c-blue-pale); color:var(--c-blue); }

.msg-copilot-wrap   { border-bottom:1px solid #e2e8f0; background:#fff; flex-shrink:0; }
.msg-copilot-toggle { display:flex; align-items:center; justify-content:space-between; padding:10px 18px; cursor:pointer; user-select:none; transition:background .15s; }
.msg-copilot-toggle:hover { background:#f8fafc; }
.msg-copilot-toggle-left { display:flex; align-items:center; gap:10px; }
.msg-copilot-icon   { width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg,var(--c-blue) 0%,#7c3aed 100%); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.82rem; flex-shrink:0; box-shadow:0 2px 8px rgba(var(--primary-rgb, 37, 99, 235),.25); }
.msg-copilot-label  { font-size:.84rem; font-weight:700; color:#0f172a; }
.msg-copilot-status { font-size:.72rem; color:#94a3b8; margin-top:1px; max-width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-copilot-toggle-right { display:flex; align-items:center; gap:8px; }
.msg-copilot-chevron { font-size:.75rem; color:#94a3b8; transition:transform .25s ease; }
.msg-copilot-wrap.open .msg-copilot-chevron { transform:rotate(180deg); }
.msg-copilot-refresh { width:28px; height:28px; border-radius:8px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#94a3b8; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.72rem; transition:all .18s; }
.msg-copilot-refresh:hover { background:var(--c-blue-pale); border-color:var(--c-blue); color:var(--c-blue); }
.msg-copilot-body { border-top:1px solid #e2e8f0; background:linear-gradient(135deg,rgba(var(--primary-rgb, 37, 99, 235),.02) 0%,rgba(124,58,237,.02) 100%); max-height:260px; overflow-y:auto; }
.msg-copilot-content { padding:14px 18px; }
.msg-copilot-loading { display:flex; align-items:center; gap:10px; color:#94a3b8; font-size:.84rem; padding:4px 0; }
.msg-copilot-loading i { color:var(--c-blue); opacity:.4; font-size:1rem; }
.msg-copilot-card       { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:12px 14px; margin-bottom:8px; font-size:.83rem; }
.msg-copilot-card-title { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin-bottom:6px; }
.msg-copilot-card-text  { color:#475569; line-height:1.55; }
.msg-copilot-card.ai-summary { border-color:rgba(var(--primary-rgb, 37, 99, 235),.2); background:rgba(var(--primary-rgb, 37, 99, 235),.03); }
.msg-copilot-card.ai-missing { border-color:rgba(245,158,11,.2); background:rgba(245,158,11,.03); }
.msg-copilot-card.ai-missing .msg-copilot-card-title { color:#f59e0b; }
.msg-copilot-card.ai-action  { border-color:rgba(16,185,129,.2); background:rgba(16,185,129,.03); }
.msg-copilot-card.ai-action .msg-copilot-card-title  { color:#10b981; }
.msg-copilot-reply-row     { display:flex; align-items:center; gap:12px; padding:10px 18px 14px; background:#fff; border-top:1px solid #e2e8f0; flex-wrap:wrap; }
.msg-copilot-reply-preview { flex:1; font-size:.83rem; color:#475569; background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:10px; padding:8px 12px; line-height:1.5; font-style:italic; max-height:60px; overflow:hidden; text-overflow:ellipsis; }

.msg-messages { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:2px; scroll-behavior:smooth; background:#f1f5f9; }
.msg-messages::-webkit-scrollbar { width:4px; }
.msg-messages::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:99px; }

.msg-date-sep { display:flex; align-items:center; gap:12px; margin:12px 0; color:#94a3b8; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.msg-date-sep::before, .msg-date-sep::after { content:''; flex:1; height:1px; background:#e2e8f0; }

.chat-msg { display:flex; flex-direction:column; max-width:72%; margin-bottom:6px; animation:msgSlideIn .2s ease; }
.chat-msg.is-sent     { align-self:flex-end; align-items:flex-end; }
.chat-msg.is-received { align-self:flex-start; align-items:flex-start; }
.chat-bubble { border-radius:18px; padding:10px 14px; font-size:.88rem; line-height:1.55; max-width:100%; word-break:break-word; position:relative; }
.is-sent .chat-bubble     { background:linear-gradient(135deg,var(--c-blue) 0%,#7c3aed 100%); color:#fff; border-radius:18px 18px 4px 18px; box-shadow:0 2px 12px rgba(var(--primary-rgb, 37, 99, 235),.25); }
.is-received .chat-bubble { background:#fff; color:#0f172a; border:1px solid #e2e8f0; border-radius:18px 18px 18px 4px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.chat-text { margin:0; }
.chat-meta { font-size:.67rem; margin-top:4px; display:flex; align-items:center; gap:4px; }
.is-sent .chat-meta     { color:rgba(255,255,255,.6); justify-content:flex-end; }
.is-received .chat-meta { color:#94a3b8; }
.msg-sender-name { font-size:.72rem; font-weight:700; color:var(--c-blue); margin-bottom:3px; padding-left:4px; }
.chat-attachment { margin-top:8px; border-radius:10px; overflow:hidden; }
.chat-attachment img { max-width:220px; max-height:180px; border-radius:10px; cursor:pointer; transition:opacity .2s; display:block; }
.chat-attachment img:hover { opacity:.9; }
.chat-attach-file { display:flex; align-items:center; gap:8px; padding:8px 12px; background:rgba(0,0,0,.05); border-radius:10px; font-size:.8rem; text-decoration:none; transition:background .15s; }
.is-sent .chat-attach-file { background:rgba(255,255,255,.15); color:#fff; }
.is-received .chat-attach-file { color:var(--c-blue); }

.msg-typing-indicator { align-self:flex-start; background:#fff; border:1px solid #e2e8f0; border-radius:18px 18px 18px 4px; padding:10px 16px; display:flex; gap:4px; align-items:center; margin-bottom:6px; }
.msg-typing-dot { width:7px; height:7px; background:#94a3b8; border-radius:50%; animation:typingBounce 1.2s infinite; }
.msg-typing-dot:nth-child(2) { animation-delay:.2s; }
.msg-typing-dot:nth-child(3) { animation-delay:.4s; }

.msg-attachment-preview { background:#f8fafc; border-top:1px solid #e2e8f0; padding:8px 16px; flex-shrink:0; }
.msg-attachment-inner   { display:flex; align-items:center; gap:10px; font-size:.84rem; }
.msg-attach-icon  { color:var(--c-blue); }
.msg-attach-name  { color:#0f172a; font-weight:600; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-attach-save  { display:flex; align-items:center; gap:5px; font-size:.78rem; color:#475569; cursor:pointer; white-space:nowrap; }
.msg-attach-clear { width:28px; height:28px; border-radius:8px; border:none; background:rgba(239,68,68,.1); color:#ef4444; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.8rem; transition:background .15s; flex-shrink:0; }
.msg-attach-clear:hover { background:rgba(239,68,68,.2); }

.msg-input-bar { padding:10px 14px; border-top:1px solid #e2e8f0; background:#fff; display:flex; align-items:flex-end; gap:8px; flex-shrink:0; }
.msg-input-action-btn { min-width:38px; height:38px; border-radius:12px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .18s ease; font-size:.85rem; gap:5px; white-space:nowrap; flex-shrink:0; padding:0 10px; }
.msg-input-btn-label { font-size:.75rem; font-weight:600; display:none; }
.msg-input-action-btn:hover { background:var(--c-blue-pale); border-color:var(--c-blue); color:var(--c-blue); }
.msg-ai-btn { border-color:rgba(var(--primary-rgb, 37, 99, 235),.25) !important; color:var(--c-blue) !important; background:rgba(var(--primary-rgb, 37, 99, 235),.06) !important; }
.msg-ai-btn:hover { background:rgba(var(--primary-rgb, 37, 99, 235),.12) !important; border-color:var(--c-blue-light) !important; }
.msg-input-field-wrap { flex:1; min-width:0; position:relative; }
.msg-input-field { width:100%; min-height:38px; max-height:120px; resize:none; border:1.5px solid #e2e8f0; border-radius:12px; padding:9px 14px; font-size:.88rem; font-family:'Inter',sans-serif; line-height:1.45; background:#f8fafc; color:#0f172a; transition:all .2s ease; overflow-y:auto; display:block; box-sizing:border-box; }
.msg-input-field:focus { border-color:var(--c-blue); background:#fff; box-shadow:0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235),.1); outline:none; }
.msg-send-btn { width:42px; height:42px; min-width:42px; border-radius:14px; border:none; background:var(--gradient-brand); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.9rem; flex-shrink:0; box-shadow:0 4px 12px rgba(var(--primary-rgb, 37, 99, 235),.35); transition:all .2s cubic-bezier(.34,1.4,.64,1); }
.msg-send-btn:hover  { transform:scale(1.08); box-shadow:0 6px 18px rgba(var(--primary-rgb, 37, 99, 235),.45); }
.msg-send-btn:active { transform:scale(.96); }
.msg-send-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

@media (min-width:900px) { .msg-input-btn-label { display:inline; } .msg-input-action-btn { padding:0 12px; width:auto; } }

/* ====================================================================
   RESPONSIVE — MOBILE
   ==================================================================== */
@media (max-width:900px) { .msg-layout { grid-template-columns:280px 1fr; } }
@media (max-width:768px) {
    .msg-layout { grid-template-columns:1fr; height:calc(100dvh - 160px); max-height:none; border-radius:16px; }
    .msg-sidebar { display:flex; }
    .msg-window  { display:none; }
    .msg-layout.chat-active .msg-sidebar { display:none; }
    .msg-layout.chat-active .msg-window  { display:flex; }
    .msg-page-title { font-size:1.2rem; }
    .chat-msg { max-width:86%; }
    .msg-copilot-body { max-height:180px; }
    .msg-copilot-reply-row { flex-direction:column; align-items:stretch; }
    .msg-messages { padding:12px; }
    .msg-input-bar { padding:8px 10px; gap:6px; }
    .topbar-user-name { display:none !important; }
    .kpi-value { font-size:1.8rem !important; }
    .card:hover, .kpi-card:hover { transform:none !important; }
    .page-title { font-size:1rem !important; }
    .eh-ai-banner { flex-direction:column !important; align-items:flex-start !important; }
    .eh-ai-banner-chips { margin-left:0 !important; width:100%; }
    .section-page-header { flex-direction:column; }
}
@media (max-width:480px) {
    .msg-layout { height:calc(100dvh - 140px); border-radius:12px; }
    .chat-bubble { font-size:.84rem; padding:9px 12px; }
    .msg-chat-header { padding:10px 14px; min-height:58px; }
    .kpi-card { padding:16px !important; }
    .kpi-value { font-size:1.6rem !important; }
    .btn-login { height:48px !important; font-size:.9rem !important; }
    .card-body { padding:16px !important; }
    .card-header { padding:14px 16px !important; }
}

/* ======================================================================
   CRITICAL PATCH + MOBILE FIX + NEW FEATURES — EH Tax Portal v3.1
   ====================================================================== */

/* ── Fix: msg-active-view (was completely missing) ────────────────── */
.msg-active-view {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}
/* JS sets style.display='flex' — but ensure it takes proper flex flow */
#msgActiveView[style*="flex"] {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* ── Fix: mobile overflow cuts ────────────────────────────────────── */
html, body { overflow-x: hidden !important; }
#portalContainer { overflow-x: hidden !important; }

/* ── Fix: mobile topbar height + content shift ────────────────────── */
@media (max-width: 1024px) {
    .main-wrapper { overflow-x: hidden; }
    .topbar {
        padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)) !important;
        min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
        height: auto !important;
    }
    .content-area {
        padding: clamp(12px, 2.8vw, 16px) clamp(10px, 2.4vw, 14px) !important;
        padding-bottom: max(clamp(12px, 2.8vw, 16px), env(safe-area-inset-bottom, 0px)) !important;
        overflow-x: hidden;
    }
    .sidebar-nav .nav-item {
        min-height: var(--eh-touch-min);
        padding-top: max(10px, calc((var(--eh-touch-min) - 1.2em) / 2));
        padding-bottom: max(10px, calc((var(--eh-touch-min) - 1.2em) / 2));
    }
}
@media (max-width: 768px) {
    .topbar {
        padding: env(safe-area-inset-top, 0px) max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px)) !important;
        min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    }
    .topbar-left { gap: 8px !important; }
    .topbar-right { gap: 6px !important; }
    .page-title { font-size: .92rem !important; max-width: min(140px, 38vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .content-area {
        padding: clamp(10px, 3.2vw, 14px) clamp(8px, 2.5vw, 12px) !important;
        padding-bottom: max(clamp(10px, 3.2vw, 14px), env(safe-area-inset-bottom, 0px)) !important;
    }
    .topbar-icon-btn { width: max(36px, var(--eh-touch-min)) !important; height: max(36px, var(--eh-touch-min)) !important; }
    .topbar-user { padding: 5px 10px 5px 5px !important; min-height: var(--eh-touch-min); }
}

/* ====================================================================
   FORMS — MOBILE POLISH (labels/placeholders/readability)
   ==================================================================== */
@media (max-width: 768px) {
    .form-label,
    .form-group-pro label,
    #onboardingSection .form-group-pro label {
        font-size: 0.78rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        color: var(--c-text-2) !important;
        margin-bottom: 8px !important;
        display: block !important;
        line-height: 1.2 !important;
    }
    .form-control,
    .input-pro {
        min-height: 48px !important;
        font-size: 0.95rem !important;
        padding: 0 14px !important;
    }
    textarea.form-control,
    textarea.input-pro {
        min-height: 120px !important;
        padding: 12px 14px !important;
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
    }
    .form-control::placeholder,
    .input-pro::placeholder {
        opacity: 0.85;
    }
    /* tighter grids on phones */
    .form-grid-2,
    .tax-form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}
@media (max-width: 480px) {
    .topbar {
        padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)) !important;
        min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    }
    .page-title { font-size: .85rem !important; max-width: min(110px, 32vw); }
    .content-area {
        padding: clamp(8px, 3.5vw, 12px) clamp(6px, 2.2vw, 10px) !important;
        padding-bottom: max(clamp(8px, 3.5vw, 12px), env(safe-area-inset-bottom, 0px)) !important;
    }
    .topbar-icon-btn { width: max(40px, var(--eh-touch-min)) !important; height: max(40px, var(--eh-touch-min)) !important; }
}

/* ── Fix: KPI grid mobile overflow ──────────────────────────────── */
.grid-4, .grid-3, .grid-2 { width: 100%; }
@media (max-width: 768px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .grid-4, .grid-3 { grid-template-columns: 1fr !important; }
    .grid-2 { grid-template-columns: 1fr !important; }
}

/* ── Fix: tables overflow on mobile ──────────────────────────────── */
.table-wrap, .apple-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { min-width: 500px; }
@media (max-width: 768px) { table { font-size: .8rem; } }

/* ── Fix: modals overflow on mobile ──────────────────────────────── */
.modal-content { max-width: min(96vw, 680px) !important; max-height: 90vh !important; overflow-y: auto !important; }
.modal-body { overflow-y: auto; }

/* ── Fix: login page title encoding (mojibake) ───────────────────── */
@media (max-width: 360px) {
    .login-card { padding: 24px 16px !important; }
    .login-card-title { font-size: 1.4rem !important; }
}

/* ── Fix: chat input always visible when active ──────────────────── */
#chatInput { flex-shrink: 0; }

/* ── Fix: chat bubble max-width mobile ───────────────────────────── */
@media (max-width: 480px) {
    .chat-msg { max-width: 92% !important; }
    .msg-input-field { font-size: .84rem !important; }
    .msg-copilot-wrap { display: none !important; }/* hide copilot on very small phones */
}
@media (max-width: 380px) {
    .msg-layout { height: calc(100dvh - 120px) !important; }
    .msg-input-action-btn { width: 32px !important; height: 32px !important; padding: 0 !important; }
    .msg-input-btn-label { display: none !important; }
    .msg-send-btn { width: 36px !important; height: 36px !important; min-width: 36px !important; }
}

/* ── Sidebar nav: scroll inside column (padding mobile = SIDEBAR FIX v7) ── */
.sidebar-nav { overflow-y: auto; flex: 1; min-height: 0; padding: 10px; -webkit-overflow-scrolling: touch; }

/* ======================================================================
   CRM SECTION — New Module
   ====================================================================== */
.crm-workspace-pane { min-height: 0; }
.crm-workspace-pane.is-visible {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#crmPaneDirectory,
#crmPaneInbox {
    min-height: 0;
}
/* Embedded inbox: ensure chat takes full height and can scroll correctly */
#crmPaneInbox .crm-embedded-chat-root {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.crm-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; height: calc(100vh - 180px); height: calc(100dvh - 180px); min-height: 480px; }
.crm-layout.crm-layout--solo { grid-template-columns: 1fr; }
@media (max-width: 1024px) { .crm-layout { grid-template-columns: 260px 1fr; gap: 16px; } }
@media (max-width: 768px) { .crm-layout { grid-template-columns: 1fr; height: auto; } }

.crm-sidebar { background: var(--c-surface); border-radius: 20px; border: 1px solid var(--c-border); overflow: hidden; display: flex; flex-direction: column; }
.crm-sidebar-head { padding: 16px; border-bottom: 1px solid var(--c-border); background: var(--c-surface); flex-shrink: 0; }
.crm-search { width: 100%; padding: 9px 14px; border: 1.5px solid var(--c-border); border-radius: 10px; font-size: .84rem; background: var(--c-surface-2); transition: all .2s; }
.crm-search:focus { border-color: var(--c-blue); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235),.1); }
.crm-contact-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.crm-contact-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; transition: background .15s; border-bottom: 1px solid rgba(226,232,240,.4); }
.crm-contact-item:hover { background: rgba(var(--primary-rgb, 37, 99, 235),.04); }
.crm-contact-item.active { background: var(--c-blue-pale) !important; border-left: 3px solid var(--c-blue); }
.crm-contact-avatar { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg,var(--c-blue) 0%,var(--c-blue-light) 100%); color: #fff; font-size: .95rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-transform: uppercase; }
.crm-contact-name { font-size: .88rem; font-weight: 700; color: var(--c-text); }
.crm-contact-tag  { font-size: .72rem; color: var(--c-text-3); }

.crm-main { background: var(--c-surface); border-radius: 20px; border: 1px solid var(--c-border); overflow: hidden; display: flex; flex-direction: column; }

#crmPaneInbox .crm-embedded-chat-root {
    min-height: calc(100vh - 220px);
    min-height: calc(100dvh - 220px);
}
@media (max-width: 768px) and (min-width: 641px) {
    .crm-ws-tab {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
        font-size: 0.8rem;
    }
}
@media (max-width: 640px) {
    .crm-workspace-tabs .crm-ws-tab {
        flex: 0 0 auto !important;
        justify-content: center;
        padding: 10px 14px;
        font-size: 0.78rem;
    }
}
.crm-main-head { padding: 18px 22px; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.crm-profile-avatar { width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg,var(--c-blue) 0%,var(--c-blue-light) 100%); color: #fff; font-size: 1.4rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 16px rgba(var(--primary-rgb, 37, 99, 235),.3); text-transform: uppercase; }
.crm-profile-name { font-family: 'Outfit',sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--c-text); }
.crm-profile-meta { font-size: .82rem; color: var(--c-text-3); margin-top: 2px; }
.crm-profile-actions { margin-left: auto; display: flex; gap: 8px; }

.crm-tabs { display: flex; gap: 0; padding: 0 22px; border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); overflow-x: auto; flex-shrink: 0; }
.crm-tab { padding: 13px 18px; font-size: .84rem; font-weight: 600; color: var(--c-text-3); cursor: pointer; border-bottom: 2.5px solid transparent; white-space: nowrap; transition: all .18s; }
.crm-tab:hover { color: var(--c-text); }
.crm-tab.active { color: var(--c-blue); border-bottom-color: var(--c-blue); background: transparent; }

.crm-body { flex: 1; overflow-y: auto; padding: 20px 22px; }

/* Timeline */
.crm-timeline { position: relative; padding-left: 28px; }
.crm-timeline::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--c-blue), transparent); }
.crm-tl-item { position: relative; margin-bottom: 20px; }
.crm-tl-dot { position: absolute; left: -23px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c-surface); box-shadow: 0 0 0 2px var(--c-blue); background: var(--c-blue); }
.crm-tl-dot.green  { background: var(--c-green); box-shadow: 0 0 0 2px var(--c-green); }
.crm-tl-dot.orange { background: var(--c-orange); box-shadow: 0 0 0 2px var(--c-orange); }
.crm-tl-dot.purple { background: var(--c-purple); box-shadow: 0 0 0 2px var(--c-purple); }
.crm-tl-date { font-size: .7rem; font-weight: 700; color: var(--c-text-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.crm-tl-card { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 12px; padding: 12px 14px; font-size: .84rem; color: var(--c-text-2); line-height: 1.5; }
.crm-tl-card-title { font-weight: 700; color: var(--c-text); margin-bottom: 3px; font-size: .88rem; }

/* CRM Notes */
.crm-note-input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--c-border); border-radius: 12px; font-size: .88rem; font-family: 'Inter',sans-serif; resize: vertical; min-height: 80px; background: var(--c-surface-2); transition: all .2s; }
.crm-note-input:focus { border-color: var(--c-blue); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235),.1); }
.crm-note-card { background: #fffbeb; border: 1px solid rgba(245,158,11,.2); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; position: relative; }
.crm-note-text { font-size: .85rem; color: var(--c-text); line-height: 1.55; }
.crm-note-meta { font-size: .72rem; color: var(--c-text-3); margin-top: 6px; }

/* CRM Stats mini-row */
.crm-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 768px) { .crm-stats-row { grid-template-columns: repeat(2, 1fr); } }
.crm-stat { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 14px; padding: 14px; text-align: center; }
.crm-stat-val { font-size: 1.5rem; font-weight: 800; font-family: 'Outfit',sans-serif; color: var(--c-text); }
.crm-stat-lbl { font-size: .72rem; font-weight: 600; color: var(--c-text-3); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }

/* CRM empty state */
.crm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 60px 40px; text-align: center; }
.crm-empty-icon { font-size: 2.8rem; color: var(--c-blue); background: var(--c-blue-pale); width: 80px; height: 80px; border-radius: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.crm-empty-title { font-family: 'Outfit',sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--c-text); margin-bottom: 8px; }
.crm-empty-sub { font-size: .88rem; color: var(--c-text-3); max-width: 280px; line-height: 1.6; }

/* ======================================================================
   INVOICE GENERATOR — Enhanced
   ====================================================================== */
.inv-card { background: var(--c-surface); border-radius: 20px; border: 1px solid var(--c-border); padding: 24px; }
.inv-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.inv-logo { max-height: 48px; object-fit: contain; }
.inv-number-box { text-align: right; }
.inv-number { font-family: 'Outfit',sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--c-text); }
.inv-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.inv-status-badge.paid    { background: rgba(16,185,129,.12); color: #065f46; border: 1px solid rgba(16,185,129,.2); }
.inv-status-badge.pending { background: rgba(245,158,11,.12); color: #92400e; border: 1px solid rgba(245,158,11,.2); }
.inv-status-badge.overdue { background: rgba(239,68,68,.1); color: #991b1b; border: 1px solid rgba(239,68,68,.18); }

.inv-line-items { width: 100%; border-collapse: separate; border-spacing: 0; margin: 20px 0; }
.inv-line-items th { background: var(--c-surface-2); padding: 10px 14px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-2); border-bottom: 1px solid var(--c-border); }
.inv-line-items td { padding: 12px 14px; border-bottom: 1px solid rgba(226,232,240,.5); font-size: .9rem; color: var(--c-text); vertical-align: middle; }
.inv-line-items tr:hover td { background: var(--c-surface-2); }
.inv-total-row { background: linear-gradient(135deg,rgba(var(--primary-rgb, 37, 99, 235),.05),rgba(124,58,237,.04)); border-radius: 12px; padding: 16px 20px; display: flex; justify-content: flex-end; gap: 16px; align-items: center; margin-top: 12px; }
.inv-total-label { font-size: .88rem; color: var(--c-text-2); font-weight: 600; }
.inv-total-amount { font-family: 'Outfit',sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--c-text); }

/* ── Payment Timeline (in invoices) ──────────────────────────────── */
.payment-track { display: flex; gap: 0; margin: 16px 0; }
.payment-track-step { flex: 1; position: relative; text-align: center; }
.payment-track-step::before { content: ''; position: absolute; top: 12px; left: 50%; right: -50%; height: 2px; background: var(--c-border); z-index: 0; }
.payment-track-step:last-child::before { display: none; }
.payment-track-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--c-border); background: var(--c-surface); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-size: .75rem; color: var(--c-text-3); position: relative; z-index: 1; }
.payment-track-step.done .payment-track-dot  { background: var(--c-green); border-color: var(--c-green); color: #fff; }
.payment-track-step.done::before             { background: var(--c-green); }
.payment-track-step.active .payment-track-dot{ background: var(--c-blue); border-color: var(--c-blue); color: #fff; box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 37, 99, 235),.2); }
.payment-track-label { font-size: .72rem; font-weight: 600; color: var(--c-text-3); }
.payment-track-step.done .payment-track-label  { color: var(--c-green); }
.payment-track-step.active .payment-track-label{ color: var(--c-blue); }

/* ======================================================================
   AI TAX CALCULATOR — AI Panel
   ====================================================================== */
.tax-ai-panel { background: linear-gradient(135deg,rgba(var(--primary-rgb, 37, 99, 235),.06),rgba(124,58,237,.04)); border: 1px solid rgba(var(--primary-rgb, 37, 99, 235),.15); border-radius: 16px; padding: 18px 20px; margin-top: 20px; }
.tax-ai-panel-title { font-size: .82rem; font-weight: 700; color: var(--c-blue); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.tax-ai-output { font-size: .88rem; color: var(--c-text-2); line-height: 1.6; }
.tax-ai-output strong { color: var(--c-text); }

/* ======================================================================
   NOTIFICATION BELL — Pulse animation
   ====================================================================== */
.notif-bell-pulse { animation: pulseBadge 2s infinite; }

/* ======================================================================
   DASHBOARD — Activity feed
   ====================================================================== */
.activity-feed { display: flex; flex-direction: column; gap: 0; }
.activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(226,232,240,.5); }
.activity-item:last-child { border-bottom: none; }
.activity-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
.activity-icon.blue   { background: var(--c-blue-pale); color: var(--c-blue); }
.activity-icon.green  { background: var(--c-green-pale); color: var(--c-green); }
.activity-icon.orange { background: var(--c-orange-pale); color: var(--c-orange); }
.activity-icon.purple { background: rgba(124,58,237,.08); color: var(--c-purple); }
.activity-body { flex: 1; min-width: 0; }
.activity-text { font-size: .84rem; color: var(--c-text); line-height: 1.4; }
.activity-text strong { color: var(--c-text); font-weight: 700; }
.activity-time { font-size: .72rem; color: var(--c-text-3); margin-top: 2px; }

/* ======================================================================
   QUICK CONNECT — Cross-section links (e.g. Open Chat from Invoice)
   ====================================================================== */
.cross-link-btn { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--c-blue); cursor: pointer; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(var(--primary-rgb, 37, 99, 235),.2); background: var(--c-blue-pale); transition: all .18s; }
.cross-link-btn:hover { background: var(--c-blue); color: #fff; }

/* ======================================================================
   PILL TABS — used in CRM, settings, profile
   ====================================================================== */
.pill-tabs { display: flex; gap: 4px; padding: 4px; background: var(--c-surface-2); border-radius: 12px; border: 1px solid var(--c-border); flex-wrap: wrap; }
.pill-tab { padding: 7px 16px; border-radius: 9px; font-size: .82rem; font-weight: 600; color: var(--c-text-2); cursor: pointer; transition: all .18s; border: none; background: transparent; }
.pill-tab:hover { color: var(--c-text); background: rgba(255,255,255,.7); }
.pill-tab.active { background: var(--c-surface); color: var(--c-blue); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* ======================================================================
   EMPTY STATE — Universal
   ====================================================================== */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; }
.empty-state-icon { width: 72px; height: 72px; border-radius: 22px; background: var(--c-blue-pale); color: var(--c-blue); font-size: 2rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.empty-state-title { font-family: 'Outfit',sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--c-text); margin-bottom: 8px; }
.empty-state-sub { font-size: .88rem; color: var(--c-text-3); max-width: 300px; line-height: 1.6; }

/* ======================================================================
   REMINDER BADGE + DEADLINE PILL
   ====================================================================== */
.deadline-urgent { background: rgba(239,68,68,.1); color: #991b1b; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; border: 1px solid rgba(239,68,68,.2); }
.deadline-soon   { background: rgba(245,158,11,.1); color: #92400e; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; border: 1px solid rgba(245,158,11,.2); }
.deadline-ok     { background: rgba(16,185,129,.1); color: #065f46; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; border: 1px solid rgba(16,185,129,.2); }


/* ======================================================================
   GOD-LEVEL PATCH — EH Tax Accountants Portal v4.0
   Fixes: missing classes, undefined vars, spacing, mobile, all sections
   ====================================================================== */

/* ── Missing CSS variable aliases ────────────────────────────────── */
:root {
    /* Alias patches */
    --danger:        var(--c-red);
    --error:         var(--c-red);
    --primary:       var(--c-blue);
    --gray:          var(--c-text-3);
    --text-dark:     var(--c-text);
    --radius-lg:     var(--r-lg);
    --radius-md:     var(--r-md);
    --radius-sm:     var(--r-sm);
    --radius-full:   var(--r-full);
    /* Role gradients */
    --gradient-client: linear-gradient(135deg,var(--c-blue) 0%,var(--c-blue-dark) 100%);
    --gradient-staff:  linear-gradient(135deg,#0891b2 0%,#0e7490 100%);
    --gradient-admin:  linear-gradient(135deg,#7c3aed 0%,#6d28d9 100%);
}

/* ======================================================================
   MISSING BUTTON VARIANTS
   ====================================================================== */
.btn-outline {
    background: transparent !important;
    border: 1.5px solid var(--c-border) !important;
    color: var(--c-text-2) !important;
    font-weight: 600;
    transition: all .18s ease;
}
.btn-outline:hover {
    background: var(--c-surface-2) !important;
    border-color: var(--c-text-2) !important;
    color: var(--c-text) !important;
}
.btn-ghost {
    background: transparent !important;
    border: none !important;
    color: var(--c-text-2) !important;
    font-weight: 600;
    transition: all .18s ease;
}
.btn-ghost:hover {
    background: var(--c-surface-2) !important;
    color: var(--c-text) !important;
}
.btn-danger {
    background: linear-gradient(135deg,#ef4444,#dc2626) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(239,68,68,.3) !important;
}
.btn-danger:hover {
    box-shadow: 0 6px 18px rgba(239,68,68,.4) !important;
    transform: translateY(-1px);
}
.btn-secondary {
    background: var(--c-surface-2) !important;
    border: 1.5px solid var(--c-border) !important;
    color: var(--c-text-2) !important;
    font-weight: 600;
}
.btn-secondary:hover {
    background: var(--c-border) !important;
    color: var(--c-text) !important;
}
.btn-block { width: 100% !important; justify-content: center !important; }
.btn-xs { padding: 4px 10px !important; font-size: .72rem !important; border-radius: var(--r-sm) !important; }
.btn-sm { padding: 7px 14px !important; font-size: .82rem !important; border-radius: var(--r-sm) !important; }
.btn-lg { padding: 13px 28px !important; font-size: 1rem !important; border-radius: var(--r-md) !important; }
.btn-icon { width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: var(--r-sm) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

/* ======================================================================
   ALERT VARIANTS
   ====================================================================== */
.alert { padding: 12px 16px; border-radius: var(--r-md); font-size: .875rem; font-weight: 500; display: none; align-items: center; gap: 10px; line-height: 1.45; }
.alert.show, .alert:not([style*="none"]):not(:empty) { display: flex; }
.alert-success { display: flex; background: var(--c-green-pale) !important; border: 1px solid rgba(16,185,129,.2) !important; color: #065f46 !important; }
.alert-warning { display: flex; background: var(--c-orange-pale) !important; border: 1px solid rgba(245,158,11,.2) !important; color: #92400e !important; }
.alert-error, .alert-danger { display: flex; background: var(--c-red-pale) !important; border: 1px solid rgba(239,68,68,.2) !important; color: #991b1b !important; }
.alert-info    { display: flex; background: var(--c-blue-pale) !important; border: 1px solid rgba(var(--primary-rgb, 37, 99, 235),.18) !important; color: var(--c-blue-dark) !important; }

/* ======================================================================
   MISSING LAYOUT HELPERS
   ====================================================================== */
.header-meta { flex: 1; min-width: 0; }
.header-meta .apple-badge { margin-bottom: 8px; }
.apple-icon { width: 40px; height: 40px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.apple-icon.blue   { background: var(--c-blue-pale); color: var(--c-blue); }
.apple-icon.green  { background: var(--c-green-pale); color: var(--c-green); }
.apple-icon.orange { background: var(--c-orange-pale); color: var(--c-orange); }
.apple-icon.red    { background: var(--c-red-pale); color: var(--c-red); }
.apple-icon.purple { background: rgba(124,58,237,.1); color: var(--c-purple); }
.section-content-animate { animation: fadeUp .3s ease forwards; }
.tab-active { background: var(--c-surface) !important; color: var(--c-blue) !important; box-shadow: 0 1px 4px rgba(0,0,0,.08) !important; }
.text-muted { color: var(--c-text-3) !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

/* ======================================================================
   SETTINGS PAGE — Complete fix
   ====================================================================== */
.settings-layout { display: grid !important; grid-template-columns: 220px 1fr !important; gap: 24px !important; align-items: start !important; }
@media (max-width: 768px) { .settings-layout { grid-template-columns: 1fr !important; } }
.settings-sidebar-nav { display: flex; flex-direction: column; gap: 2px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 8px; position: sticky; top: 80px; }
@media (max-width: 768px) { .settings-sidebar-nav { flex-direction: row; flex-wrap: wrap; position: static; gap: 4px; } }
.settings-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); font-size: .875rem; font-weight: 500; color: var(--c-text-2); cursor: pointer; transition: all .18s ease; border: none; background: transparent; text-align: left; width: 100%; }
.settings-nav-item i { width: 18px; text-align: center; font-size: .9rem; }
.settings-nav-item:hover { background: var(--c-surface-2); color: var(--c-text); }
.settings-nav-item.active { background: var(--c-blue-pale); color: var(--c-blue); font-weight: 700; }
.settings-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); overflow-x: auto; flex-shrink: 0; }
.settings-tab { padding: 12px 20px; font-size: .875rem; font-weight: 600; color: var(--c-text-3); cursor: pointer; border-bottom: 2.5px solid transparent; white-space: nowrap; transition: all .18s ease; background: transparent; border-top: none; border-left: none; border-right: none; }
.settings-tab:hover { color: var(--c-text); background: rgba(255,255,255,.7); }
.settings-tab.active { color: var(--c-blue); border-bottom-color: var(--c-blue); }
.settings-panel { display: none; }
.settings-panel.active { display: block; animation: fadeUp .25s ease; }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--c-border); gap: 16px; flex-wrap: wrap; }
.settings-row:last-child { border-bottom: none; }
.settings-row-label { font-size: .9rem; font-weight: 600; color: var(--c-text); }
.settings-row-desc  { font-size: .8rem; color: var(--c-text-3); margin-top: 2px; }
.settings-section-title { font-size: 1rem; font-weight: 700; color: var(--c-text); margin: 20px 0 12px; font-family: 'Outfit', sans-serif; display: flex; align-items: center; gap: 8px; }
.settings-section-title i { color: var(--c-blue); }

/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: var(--c-border); border-radius: 13px; cursor: pointer; transition: .2s; }
.toggle-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.toggle-switch input:checked + .toggle-slider { background: var(--c-blue); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ======================================================================
   TASK ITEMS — Complete styling
   ====================================================================== */
.task-item {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 16px 18px;
    margin-bottom: 10px;
    transition: all .2s ease;
    position: relative;
}
.task-item:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--c-blue-light); }
.task-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.task-item-title  { font-size: .95rem; font-weight: 700; color: var(--c-text); line-height: 1.3; }
.task-item-desc   { font-size: .84rem; color: var(--c-text-2); line-height: 1.5; margin-bottom: 12px; }
.task-item-meta   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .78rem; color: var(--c-text-3); }
.task-item-meta i { font-size: .75rem; }
.task-item-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-border); }
.task-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.task-status.open          { background: var(--c-blue-pale); color: var(--c-blue); border: 1px solid rgba(var(--primary-rgb, 37, 99, 235),.2); }
.task-status.in_progress   { background: rgba(245,158,11,.1); color: #92400e; border: 1px solid rgba(245,158,11,.2); }
.task-status.completed     { background: var(--c-green-pale); color: #065f46; border: 1px solid rgba(16,185,129,.2); }
.task-status.escalated     { background: var(--c-red-pale); color: #991b1b; border: 1px solid rgba(239,68,68,.18); }
.task-status.waiting_on_client { background: rgba(124,58,237,.1); color: #5b21b6; border: 1px solid rgba(124,58,237,.2); }
.task-priority { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.task-priority.urgent  { background: rgba(239,68,68,.1); color: #991b1b; }
.task-priority.high    { background: rgba(245,158,11,.1); color: #92400e; }
.task-priority.medium  { background: rgba(var(--primary-rgb, 37, 99, 235),.1); color: var(--c-blue-dark); }
.task-priority.low     { background: rgba(16,185,129,.1); color: #065f46; }

/* Task summary cards */
.task-summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 0; }
.task-summary-card { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 14px; text-align: center; }
.task-summary-num  { font-size: 1.6rem; font-weight: 800; font-family: 'Outfit', sans-serif; color: var(--c-text); }
.task-summary-lbl  { font-size: .72rem; font-weight: 600; color: var(--c-text-3); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* ======================================================================
   TRAINING MODULE CARDS
   ====================================================================== */
.training-module-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 20px;
    transition: all .2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.training-module-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--c-blue-light); }
.training-module-icon { width: 48px; height: 48px; border-radius: var(--r-lg); background: var(--gradient-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 4px 12px rgba(var(--primary-rgb, 37, 99, 235),.25); }
.training-module-title { font-size: .95rem; font-weight: 700; color: var(--c-text); }
.training-module-desc  { font-size: .84rem; color: var(--c-text-2); line-height: 1.5; flex: 1; }
.training-module-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.training-progress-bar { height: 4px; background: var(--c-border); border-radius: 2px; overflow: hidden; flex: 1; }
.training-progress-fill { height: 100%; background: var(--c-blue); border-radius: 2px; transition: width .4s ease; }

/* ======================================================================
   SUPPORT & KNOWLEDGE BASE CARDS
   ====================================================================== */
.knowledge-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 18px 20px;
    transition: all .2s ease;
    cursor: pointer;
}
.knowledge-card:hover { box-shadow: var(--shadow-md); border-color: var(--c-blue); transform: translateY(-2px); }
.knowledge-card-icon  { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--c-blue-pale); color: var(--c-blue); display: flex; align-items: center; justify-content: center; font-size: .9rem; margin-bottom: 10px; }
.knowledge-card-title { font-size: .9rem; font-weight: 700; color: var(--c-text); margin-bottom: 5px; }
.knowledge-card-desc  { font-size: .82rem; color: var(--c-text-2); line-height: 1.5; }

.support-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 20px;
    transition: all .2s ease;
}
.support-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ======================================================================
   LOADING STATES — Universal
   ====================================================================== */
.loading-spinner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 32px; color: var(--c-text-3); font-size: .875rem; }
.loading-spinner::before { content: ''; width: 20px; height: 20px; border: 2px solid var(--c-border); border-top-color: var(--c-blue); border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
.skeleton-line { height: 14px; background: linear-gradient(90deg,#f0f4f8 25%,#e2e8f0 50%,#f0f4f8 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 7px; margin-bottom: 10px; }
.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.h-full { height: 100%; min-height: 120px; }

/* ======================================================================
   APPOINTMENTS SECTION — Complete fix
   ====================================================================== */
.appointment-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 16px 18px; margin-bottom: 10px; display: flex; align-items: flex-start; gap: 16px; transition: all .2s ease; }
.appointment-card:hover { box-shadow: var(--shadow-md); border-color: var(--c-blue-light); }
.appointment-date-box { background: var(--gradient-brand); color: #fff; border-radius: var(--r-lg); padding: 10px 14px; text-align: center; min-width: 58px; flex-shrink: 0; }
.appointment-date-day  { font-size: 1.4rem; font-weight: 800; font-family: 'Outfit', sans-serif; line-height: 1; }
.appointment-date-mon  { font-size: .72rem; font-weight: 600; opacity: .85; text-transform: uppercase; letter-spacing: .06em; }
.appointment-body { flex: 1; min-width: 0; }
.appointment-title { font-size: .95rem; font-weight: 700; color: var(--c-text); margin-bottom: 3px; }
.appointment-meta  { font-size: .8rem; color: var(--c-text-3); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.appointment-meta i { font-size: .75rem; }

/* ======================================================================
   INVOICE SECTION — Enhanced
   ====================================================================== */
.invoice-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); margin-bottom: 8px; transition: all .18s ease; }
.invoice-row:hover { box-shadow: var(--shadow-md); border-color: var(--c-blue-light); transform: translateX(3px); }
.invoice-number { font-size: .88rem; font-weight: 700; color: var(--c-text); min-width: 100px; }
.invoice-client { font-size: .84rem; color: var(--c-text-2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invoice-amount { font-size: .95rem; font-weight: 800; color: var(--c-text); font-family: 'Outfit', sans-serif; min-width: 80px; text-align: right; }
.invoice-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ======================================================================
   USER MANAGEMENT — Cards and table
   ====================================================================== */
.user-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 20px; transition: all .2s ease; cursor: pointer; }
.user-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--c-blue-light); }
.user-card-avatar { width: 52px; height: 52px; border-radius: var(--r-lg); background: var(--gradient-brand); color: #fff; font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(var(--primary-rgb, 37, 99, 235),.25); text-transform: uppercase; }
.user-card-name { font-size: .95rem; font-weight: 700; color: var(--c-text); margin-bottom: 3px; }
.user-card-email { font-size: .8rem; color: var(--c-text-3); margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; }
.user-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* ======================================================================
   ONBOARDING SECTION — Steps
   ====================================================================== */
.onboarding-steps { display: flex; align-items: center; gap: 0; margin-bottom: 32px; overflow-x: auto; padding-bottom: 4px; }
.onboarding-step  { display: flex; align-items: center; flex: 1; min-width: 80px; }
.onboarding-step-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--c-border); background: var(--c-surface); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: var(--c-text-3); flex-shrink: 0; transition: all .25s ease; z-index: 1; position: relative; }
.onboarding-step.done .onboarding-step-dot    { background: var(--c-green); border-color: var(--c-green); color: #fff; }
.onboarding-step.active .onboarding-step-dot  { background: var(--c-blue); border-color: var(--c-blue); color: #fff; box-shadow: 0 0 0 5px rgba(var(--primary-rgb, 37, 99, 235),.15); }
.onboarding-step-line { flex: 1; height: 2px; background: var(--c-border); }
.onboarding-step.done + .onboarding-step .onboarding-step-line,
.onboarding-step.done .onboarding-step-line { background: var(--c-green); }
.onboarding-step-label { font-size: .7rem; font-weight: 600; color: var(--c-text-3); text-align: center; margin-top: 6px; white-space: nowrap; }
.onboarding-step.active .onboarding-step-label { color: var(--c-blue); }
.onboarding-step.done .onboarding-step-label   { color: var(--c-green); }

/* Onboarding form card */
.onboarding-form-card { max-width: 720px; margin: 0 auto; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-2xl); padding: 36px; box-shadow: var(--shadow-lg); }
@media (max-width: 600px) { .onboarding-form-card { padding: 20px 16px; border-radius: var(--r-xl); } }

/* ======================================================================
   AUDIT LOG — Table styling
   ====================================================================== */
.audit-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(226,232,240,.5); font-size: .84rem; transition: background .15s; }
.audit-row:hover { background: var(--c-surface-2); }
.audit-time { font-size: .72rem; color: var(--c-text-3); min-width: 140px; flex-shrink: 0; }
.audit-user { font-weight: 700; color: var(--c-text); min-width: 120px; flex-shrink: 0; }
.audit-action { flex: 1; color: var(--c-text-2); min-width: 0; }
.audit-ip { font-size: .72rem; color: var(--c-text-4); flex-shrink: 0; }

/* ======================================================================
   NOTIFICATION ITEMS
   ====================================================================== */
.notification-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(226,232,240,.5); transition: background .15s; cursor: pointer; }
.notification-item:hover { background: var(--c-surface-2); }
.notification-item.unread { background: rgba(var(--primary-rgb, 37, 99, 235),.03); }
.notification-item.unread .notification-title { font-weight: 700; }
.notification-icon { width: 38px; height: 38px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
.notification-title { font-size: .88rem; color: var(--c-text); line-height: 1.4; margin-bottom: 2px; }
.notification-time  { font-size: .72rem; color: var(--c-text-3); }

/* ======================================================================
   BILLING SECTION
   ====================================================================== */
.billing-plan-card { background: var(--c-surface); border: 2px solid var(--c-border); border-radius: var(--r-2xl); padding: 28px; transition: all .25s ease; position: relative; overflow: hidden; }
.billing-plan-card:hover { border-color: var(--c-blue); box-shadow: 0 8px 32px rgba(var(--primary-rgb, 37, 99, 235),.12); transform: translateY(-3px); }
.billing-plan-card.featured { border-color: var(--c-blue); background: linear-gradient(135deg,rgba(var(--primary-rgb, 37, 99, 235),.03),rgba(124,58,237,.02)); }
.billing-plan-card.featured::before { content: 'Most Popular'; position: absolute; top: 0; right: 20px; background: var(--gradient-brand); color: #fff; font-size: .7rem; font-weight: 800; padding: 4px 12px; border-radius: 0 0 10px 10px; }
.billing-price { font-size: 2.6rem; font-weight: 800; font-family: 'Outfit', sans-serif; color: var(--c-text); letter-spacing: -0.04em; }
.billing-price sup { font-size: 1.2rem; font-weight: 700; vertical-align: super; margin-right: 2px; }
.billing-price sub { font-size: .9rem; font-weight: 500; color: var(--c-text-3); }
.billing-feature-list { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-direction: column; gap: 10px; }
.billing-feature-list li { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--c-text-2); }
.billing-feature-list li i.check { color: var(--c-green); }
.billing-feature-list li i.cross { color: var(--c-text-4); }

/* ======================================================================
   AUTOMATION CENTER
   ====================================================================== */
.automation-rule-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 18px 20px; margin-bottom: 10px; display: flex; align-items: flex-start; gap: 16px; transition: all .2s ease; }
.automation-rule-card:hover { box-shadow: var(--shadow-md); border-color: var(--c-blue-light); }
.automation-rule-icon { width: 44px; height: 44px; border-radius: var(--r-lg); background: var(--gradient-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; box-shadow: 0 4px 12px rgba(var(--primary-rgb, 37, 99, 235),.25); }
.automation-rule-body { flex: 1; min-width: 0; }
.automation-rule-title { font-size: .95rem; font-weight: 700; color: var(--c-text); margin-bottom: 3px; }
.automation-rule-desc  { font-size: .84rem; color: var(--c-text-2); line-height: 1.5; }
.automation-rule-footer { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

/* ======================================================================
   EMAIL SIGNATURE BUILDER
   ====================================================================== */
.sig-preview-wrap { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 24px; min-height: 120px; overflow: auto; }
.sig-photo-upload { width: 80px; height: 80px; border-radius: var(--r-xl); object-fit: cover; display: block; }
.sig-photo-placeholder { width: 80px; height: 80px; border-radius: var(--r-xl); background: var(--c-surface-2); border: 2px dashed var(--c-border); display: flex; align-items: center; justify-content: center; color: var(--c-text-3); font-size: 1.5rem; cursor: pointer; transition: all .18s; }
.sig-photo-placeholder:hover { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-pale); }

/* ======================================================================
   GLOBAL RESPONSIVE FIXES
   ====================================================================== */
/* Ensure all sections don't overflow on mobile */
.section > * { max-width: 100%; }
.section { overflow-x: hidden; }

/* Fix form-grid-2 on mobile */
@media (max-width: 640px) {
    .form-grid-2, .form-grid-3 { grid-template-columns: 1fr !important; }
    .section-2col { grid-template-columns: 1fr !important; }
    .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .task-summary-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 400px) {
    .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
    .task-summary-grid { grid-template-columns: 1fr !important; }
}

/* Fix card padding on tiny screens */
@media (max-width: 480px) {
    .card-body { padding: 14px 16px !important; }
    .card-header { padding: 13px 16px !important; }
    .apple-title { font-size: 1.3rem !important; }
    .dashboard-container-apple { padding: 0 !important; }
    .onboarding-form-card { padding: 16px 12px !important; }
    .billing-plan-card { padding: 20px 16px !important; }
    .appointment-card { flex-direction: column; gap: 10px; }
    .invoice-row { flex-wrap: wrap; }
    .automation-rule-card { flex-direction: column; }
}

/* Fix overflowing table on mobile */
@media (max-width: 768px) {
    .apple-table-wrap table, .table-wrap table { min-width: 600px; }
    .settings-layout { grid-template-columns: 1fr !important; }
    .section-2col { grid-template-columns: 1fr !important; gap: 14px; }
    .billing-grid { grid-template-columns: 1fr !important; }
    .task-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ======================================================================
   MISC GLOBAL IMPROVEMENTS
   ====================================================================== */
/* Smooth scroll everywhere */
* { scroll-behavior: smooth; }

/* Better link style */
a { color: var(--c-blue); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--c-blue-light); }

/* HR divider */
hr { border: none; border-top: 1px solid var(--c-border); margin: 20px 0; }

/* Input with icon wrapper */
.input-with-icon { position: relative; display: flex; align-items: center; }
.input-with-icon > i { position: absolute; left: 14px; color: var(--c-text-3); font-size: .9rem; pointer-events: none; z-index: 1; }
.input-with-icon > input, .input-with-icon > select { padding-left: 40px !important; }

/* Select style */
select.form-control { 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='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px !important; cursor: pointer; }

/* Focus outline override for non-keyboard users */
:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }

/* Better checkbox style */
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--c-blue); cursor: pointer; }
input[type="radio"]    { width: 16px; height: 16px; accent-color: var(--c-blue); cursor: pointer; }

/* Badge variants */
.badge        { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.badge-blue   { background: var(--c-blue-pale); color: var(--c-blue); border: 1px solid rgba(var(--primary-rgb, 37, 99, 235),.18); }
.badge-green  { background: var(--c-green-pale); color: #065f46; border: 1px solid rgba(16,185,129,.2); }
.badge-red    { background: var(--c-red-pale); color: #991b1b; border: 1px solid rgba(239,68,68,.18); }
.badge-orange { background: var(--c-orange-pale); color: #92400e; border: 1px solid rgba(245,158,11,.2); }
.badge-purple { background: rgba(124,58,237,.1); color: #5b21b6; border: 1px solid rgba(124,58,237,.2); }
.badge-gray   { background: var(--c-surface-2); color: var(--c-text-3); border: 1px solid var(--c-border); }

/* Divider with text */
.divider-text { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--c-text-3); font-size: .8rem; }
.divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--c-border); }

/* ======================================================================
   PROFILE VIEW GRID
   ====================================================================== */
.profile-view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 14px;
}
.profile-view-item {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.profile-view-item:hover {
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.12);
    box-shadow: var(--shadow-md);
}
.profile-view-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--c-text-3);
    margin-bottom: 6px;
    display: block;
}
.profile-view-value {
    font-size: .92rem;
    font-weight: 600;
    color: var(--c-text);
    word-break: break-word;
    line-height: 1.45;
}
@media (max-width: 640px) { .profile-view-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 400px) { .profile-view-grid { grid-template-columns: 1fr !important; } }

/* Mojibake fix utility */
.em-dash::before { content: '\2014'; }

/* ======================================================================
  PORTAL TRANSITION OVERLAY (normalized above)
  ====================================================================== */
#pageTransitionOverlay { background: rgba(15, 23, 42, 0.35) !important; transition: opacity 0.18s ease !important; pointer-events: none !important; }
#pageTransitionOverlay.active { opacity: 1 !important; pointer-events: none !important; }

/* ======================================================================
   DEEP-FIX PATCH v5.0 — EH Tax Portal
   Fixes: mobile copilot, invoice grid, global search, section headers,
          CRM timeline dots, analytics placeholder, toast improvements
   ====================================================================== */

/* ── 1. Chat Copilot: collapse to slide-up panel on mobile ─────────── */
@media (max-width: 480px) {
    .msg-copilot-wrap {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important; left: 0 !important; right: 0 !important;
        height: auto !important; max-height: 50vh !important;
        flex-direction: column !important;
        background: var(--c-surface) !important;
        border-top: 1px solid var(--c-border) !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -8px 40px rgba(0,0,0,.18) !important;
        z-index: 200 !important;
        transform: translateY(100%) !important;
        transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
        overflow: hidden !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }
    .msg-copilot-wrap.copilot-open {
        transform: translateY(0) !important;
    }
    /* Drag handle */
    .msg-copilot-wrap::before {
        content: '' !important;
        display: block !important;
        width: 40px !important;
        height: 4px !important;
        background: var(--c-border) !important;
        border-radius: 999px !important;
        margin: 10px auto 4px !important;
        flex-shrink: 0 !important;
    }
    /* copilot toggle button — mobile floating */
    .copilot-toggle-mobile {
        display: flex !important;
    }
}
@media (min-width: 481px) {
    .copilot-toggle-mobile { display: none !important; }
}
.copilot-toggle-mobile {
    display: none;
    position: fixed;
    bottom: 88px; right: 16px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff; font-size: 1rem;
    border: none; cursor: pointer;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb, 37, 99, 235),.4);
    z-index: 199;
    align-items: center; justify-content: center;
    transition: transform .2s ease;
}
.copilot-toggle-mobile:hover { transform: scale(1.08); }

/* ── 2. Invoice line items grid — responsive ───────────────────────── */
#invoiceItemsContainer > div {
    grid-template-columns: 1fr 80px 100px 70px 30px !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}
@media (max-width: 640px) {
    #invoiceItemsContainer > div {
        grid-template-columns: 1fr 60px !important;
        grid-template-rows: auto auto auto !important;
    }
    #invoiceItemsContainer > div input:first-child { grid-column: 1 / -1 !important; }
    #invoiceItemsContainer > div select { grid-column: 1 / span 1 !important; }
    #invoiceItemsContainer > div button { grid-column: 2 / span 1 !important; justify-self: end !important; }
}

/* ── 3. Global Search Modal ────────────────────────────────────────── */
#globalSearchModal .search-results-wrap {
    max-height: 420px; overflow-y: auto;
    padding: 0 24px 16px;
}
#globalSearchInput {
    width: 100%; padding: 14px 18px;
    font-size: 1.05rem; border: none;
    border-bottom: 2px solid var(--c-border);
    background: transparent; color: var(--c-text);
    outline: none;
}
#globalSearchInput:focus { border-bottom-color: var(--c-blue); }
.search-result-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--c-border);
    cursor: pointer; transition: background .15s;
    border-radius: 10px; padding: 10px 12px;
}
.search-result-item:hover { background: var(--c-surface-2); }
.search-result-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; flex-shrink: 0;
}
.search-result-icon.blue  { background: rgba(var(--primary-rgb, 37, 99, 235),.12); color: var(--c-blue); }
.search-result-icon.green { background: rgba(16,185,129,.12); color: var(--c-green); }
.search-result-icon.orange{ background: rgba(245,158,11,.12); color: var(--c-orange); }
.search-result-icon.purple{ background: rgba(var(--primary-rgb, 37, 99, 235),.12); color: var(--c-blue); }
.search-result-title { font-size: .9rem; font-weight: 600; color: var(--c-text); }
.search-result-sub   { font-size: .78rem; color: var(--c-text-3); margin-top: 1px; }
.search-result-type  { margin-left: auto; font-size: .7rem; font-weight: 700;
                        text-transform: uppercase; letter-spacing: .06em;
                        color: var(--c-text-3); flex-shrink: 0; }
.search-empty-state  { text-align: center; padding: 40px 20px; color: var(--c-text-3); font-size: .88rem; }
.search-shortcut-hint { font-size: .72rem; color: var(--c-text-3); text-align: center; padding: 8px 0 0; }
.global-search-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
    color: rgba(255,255,255,.5); font-size: .82rem; cursor: pointer;
    transition: all .2s ease; white-space: nowrap;
}
.global-search-btn:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
.global-search-btn .kbd { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 4px; padding: 1px 5px; font-size: .7rem; }

/* ── 4. Section page header consistency ────────────────────────────── */
.section-page-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    flex-wrap: wrap !important;
}
.section-page-header h1 { font-size: 1.55rem !important; font-weight: 800 !important; color: var(--c-text) !important; line-height: 1.25 !important; margin: 0 0 4px !important; }
.section-page-header p  { font-size: .84rem !important; color: var(--c-text-3) !important; margin: 0 !important; }
@media (max-width: 640px) {
    .section-page-header { flex-direction: column !important; gap: 12px !important; }
    .section-page-header > div:last-child { width: 100% !important; }
    .section-page-header > div:last-child .btn { flex: 1 !important; justify-content: center !important; }
}

/* ── 5. CRM timeline dot colors ────────────────────────────────────── */
.crm-tl-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--c-border); background: var(--c-surface-2); }
.crm-tl-dot.blue   { background: var(--c-blue);   border-color: var(--c-blue); }
.crm-tl-dot.green  { background: var(--c-green);  border-color: var(--c-green); }
.crm-tl-dot.orange { background: var(--c-orange); border-color: var(--c-orange); }
.crm-tl-dot.red    { background: var(--c-red);    border-color: var(--c-red); }
.crm-tl-dot.purple { background: var(--c-blue); border-color: var(--c-blue); }
.crm-tl-dot.amber  { background: #d97706; border-color: #d97706; }
.crm-tl-dot.teal   { background: #0d9488; border-color: #0d9488; }
.crm-tl-dot.slate  { background: #64748b; border-color: #64748b; }

/* ── 6. Analytics / charts section ─────────────────────────────────── */
.chart-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 24px; }
.chart-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.chart-card-title  { font-size: 1rem; font-weight: 700; color: var(--c-text); }
.chart-card-sub    { font-size: .78rem; color: var(--c-text-3); margin-top: 2px; }
.chart-container   { position: relative; height: 220px; }
@media (max-width: 640px) { .chart-container { height: 160px; } }

/* ── 7. Toast notification improvements ─────────────────────────────── */
.toast-stack {
    position: fixed; bottom: 24px; right: 24px;
    display: flex; flex-direction: column; gap: 10px;
    z-index: 9998; max-width: 360px; width: calc(100vw - 48px);
}
.toast {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; border-radius: 14px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    animation: toastIn .25s cubic-bezier(.4,0,.2,1) forwards;
}
.toast.hiding { animation: toastOut .25s ease forwards; }
.toast-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.toast.success .toast-icon { background: rgba(16,185,129,.12); color: var(--c-green); }
.toast.danger  .toast-icon { background: rgba(239,68,68,.1);   color: var(--c-red); }
.toast.warning .toast-icon { background: rgba(245,158,11,.1);  color: var(--c-orange); }
.toast.info    .toast-icon { background: rgba(var(--primary-rgb, 37, 99, 235),.1);   color: var(--c-blue); }
.toast-body { flex: 1; }
.toast-title { font-size: .88rem; font-weight: 700; color: var(--c-text); }
.toast-msg   { font-size: .8rem; color: var(--c-text-3); margin-top: 2px; line-height: 1.4; }
.toast-close { background: none; border: none; cursor: pointer; color: var(--c-text-3); padding: 2px; border-radius: 6px; flex-shrink: 0; font-size: .85rem; }
.toast-close:hover { color: var(--c-text); background: var(--c-surface-2); }
@keyframes toastIn  { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { to   { transform: translateX(20px); opacity: 0; } }
@media (max-width: 480px) {
    .toast-stack { bottom: 12px; right: 12px; left: 12px; width: auto; }
}

/* ── 8. Print styles for Invoice PDF ────────────────────────────────── */
@media print {
    body > *:not(#printFrame) { display: none !important; }
    #printFrame { display: block !important; position: fixed; inset: 0; background: #fff; z-index: 99999; }
}
.invoice-print-sheet { font-family: 'Outfit', 'Inter', sans-serif; color: #1a1a1a; max-width: 800px; margin: 0 auto; padding: 40px; background: #fff; }
.invoice-print-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 2px solid #e5e7eb; }
.invoice-print-logo   { font-size: 1.4rem; font-weight: 800; color: var(--c-blue); }
.invoice-print-title  { font-size: 2rem; font-weight: 900; color: #111; text-align: right; }
.invoice-print-number { font-size: .9rem; color: #6b7280; text-align: right; margin-top: 4px; }
.invoice-print-parties{ display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.invoice-print-party-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #9ca3af; margin-bottom: 8px; }
.invoice-print-party-name  { font-size: 1rem; font-weight: 700; color: #111; }
.invoice-print-party-meta  { font-size: .85rem; color: #6b7280; line-height: 1.6; }
.invoice-print-table { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.invoice-print-table th { background: #f9fafb; padding: 10px 14px; text-align: left; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; border-bottom: 2px solid #e5e7eb; }
.invoice-print-table td { padding: 12px 14px; border-bottom: 1px solid #f3f4f6; font-size: .88rem; color: #374151; vertical-align: top; }
.invoice-print-table tr:last-child td { border-bottom: none; }
.invoice-print-totals { margin-left: auto; width: 260px; }
.invoice-print-totals tr td { padding: 6px 0; font-size: .88rem; color: #6b7280; }
.invoice-print-totals tr td:last-child { text-align: right; font-weight: 600; color: #111; }
.invoice-print-totals .total-row td { border-top: 2px solid #e5e7eb; padding-top: 12px; font-size: 1.05rem; font-weight: 800; color: #111; }
.invoice-print-footer { margin-top: 40px; padding-top: 24px; border-top: 1px solid #e5e7eb; text-align: center; font-size: .78rem; color: #9ca3af; }

/* ── 9. Sidebar bottom safe area for mobile browsers ────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .sidebar-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important; }
}

/* ── 10. Fix: kpi-card hover state missing ──────────────────────────── */
.kpi-card { transition: transform .2s ease, box-shadow .2s ease; }
.kpi-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.14) !important; }

/* ── 11. Topbar search btn placement ────────────────────────────────── */
.topbar-search-area { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 480px; }
@media (max-width: 640px) { .topbar-search-area { max-width: 100%; } .global-search-btn .kbd { display: none; } }


/* ── Topbar search button — light topbar context ─────────────────── */
.global-search-btn {
    background: var(--c-surface-2) !important;
    border: 1px solid var(--c-border) !important;
    color: var(--c-text-3) !important;
    border-radius: 10px !important;
    padding: 7px 14px !important;
    font-size: .82rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all .2s ease !important;
    white-space: nowrap !important;
}
.global-search-btn:hover { background: var(--c-border) !important; color: var(--c-text) !important; }
.global-search-btn .kbd { background: var(--c-border); border: 1px solid rgba(0,0,0,.08); border-radius: 4px; padding: 1px 5px; font-size: .68rem; color: var(--c-text-3); }
.topbar-search-label { display: none; }
@media (min-width: 640px) { .topbar-search-label { display: inline; } }

/* ======================================================================
   DARK MODE — [data-theme="dark"] full portal support
   ====================================================================== */
[data-theme="dark"],
[data-theme="dark"] body {
    /* Core surface palette */
    --c-bg:        #0d1117 !important;
    --c-surface:   #161b22 !important;
    --c-surface-2: #1c2128 !important;
    --c-surface-3: #21262d !important;
    --c-border:    rgba(255,255,255,.1) !important;

    /* Text */
    --c-text:      #e6edf3 !important;
    --c-text-2:    #8b949e !important;
    --c-text-3:    #6e7681 !important;

    /* Brand colours slightly adjusted */
    --c-blue:      #58a6ff !important;
    --c-blue-pale: rgba(88,166,255,.12) !important;
    --c-green:     #3fb950 !important;
    --c-orange:    #d29922 !important;
    --c-red:       #f85149 !important;
    --c-purple:    #bc8cff !important;

    /* Aliases */
    --danger:  var(--c-red) !important;
    --primary: var(--c-blue) !important;
}

/* Background + body */
[data-theme="dark"] body   { background: var(--c-bg) !important; color: var(--c-text) !important; }
[data-theme="dark"] #portalApp { background: var(--c-bg) !important; }

/* Sidebar */
[data-theme="dark"] .sidebar { background: #010409 !important; border-right: 1px solid rgba(255,255,255,.06) !important; }

/* Topbar */
[data-theme="dark"] .topbar { background: rgba(13,17,23,.92) !important; backdrop-filter: saturate(120%) blur(20px) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 1px 0 rgba(0,0,0,.3) !important; }
[data-theme="dark"] .page-title { color: var(--c-text) !important; }
[data-theme="dark"] .global-search-btn { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.5) !important; }
[data-theme="dark"] .global-search-btn:hover { background: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.8) !important; }
[data-theme="dark"] .global-search-btn .kbd { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.4) !important; }
[data-theme="dark"] .topbar-icon-btn { color: rgba(255,255,255,.6) !important; }
[data-theme="dark"] .topbar-icon-btn:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
[data-theme="dark"] .topbar-user-name { color: rgba(255,255,255,.7) !important; }
[data-theme="dark"] .topbar-avatar { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.7) !important; }

/* Cards */
[data-theme="dark"] .card { background: var(--c-surface) !important; border-color: var(--c-border) !important; box-shadow: 0 2px 8px rgba(0,0,0,.3) !important; }
[data-theme="dark"] .card-header { border-color: var(--c-border) !important; }
[data-theme="dark"] .card-title { color: var(--c-text) !important; }
[data-theme="dark"] .kpi-card { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
[data-theme="dark"] .kpi-label { color: var(--c-text-3) !important; }
[data-theme="dark"] .kpi-value { color: var(--c-text) !important; }
[data-theme="dark"] .profile-view-item {
    background: var(--c-surface) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}
[data-theme="dark"] .profile-view-item:hover {
    border-color: rgba(88, 166, 255, 0.22) !important;
}

/* Forms */
[data-theme="dark"] .form-control { background: var(--c-surface-2) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
[data-theme="dark"] .form-control:focus { border-color: var(--c-blue) !important; background: var(--c-surface-3) !important; box-shadow: 0 0 0 3px rgba(88,166,255,.15) !important; }
[data-theme="dark"] .form-control::placeholder { color: var(--c-text-3) !important; }
[data-theme="dark"] select.form-control option { background: var(--c-surface-2) !important; color: var(--c-text) !important; }
[data-theme="dark"] .form-label { color: var(--c-text-2) !important; }
[data-theme="dark"] .form-help-text { color: var(--c-text-3) !important; }

/* Buttons */
[data-theme="dark"] .btn-ghost { color: var(--c-text-2) !important; border-color: var(--c-border) !important; }
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.08) !important; color: var(--c-text) !important; }
[data-theme="dark"] .btn-secondary { background: var(--c-surface-2) !important; border-color: var(--c-border) !important; color: var(--c-text-2) !important; }
[data-theme="dark"] .btn-outline { background: transparent !important; border-color: var(--c-border) !important; color: var(--c-text-2) !important; }

/* Modal */
[data-theme="dark"] .modal-content {
    background: var(--c-surface) !important;
    border: 1px solid var(--c-border) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}
[data-theme="dark"] .modal-header { border-color: var(--c-border) !important; }
[data-theme="dark"] .modal-title { color: var(--c-text) !important; }
[data-theme="dark"] .modal-close { color: var(--c-text-3) !important; }
[data-theme="dark"] .modal-close:hover { color: var(--c-text) !important; background: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .modal-body { color: var(--c-text) !important; }

/* Tables */
[data-theme="dark"] table { color: var(--c-text-2) !important; }
[data-theme="dark"] thead tr { background: var(--c-surface-2) !important; border-color: var(--c-border) !important; }
[data-theme="dark"] thead th { background: var(--c-surface-2) !important; box-shadow: 0 1px 0 var(--c-border) !important; }
[data-theme="dark"] tbody tr { border-color: var(--c-border) !important; }
[data-theme="dark"] tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02) !important; }
[data-theme="dark"] tbody tr:hover td { background: rgba(88, 166, 255, 0.09) !important; }

/* Badges */
[data-theme="dark"] .badge { border-color: rgba(255,255,255,.1) !important; }
[data-theme="dark"] .badge-success { background: rgba(63,185,80,.12) !important; color: #3fb950 !important; }
[data-theme="dark"] .badge-warning { background: rgba(210,153,34,.12) !important; color: #d29922 !important; }
[data-theme="dark"] .badge-info    { background: rgba(88,166,255,.12) !important; color: #58a6ff !important; }
[data-theme="dark"] .badge-danger  { background: rgba(248,81,73,.12) !important; color: #f85149 !important; }

/* Alerts */
[data-theme="dark"] .alert { border-color: var(--c-border) !important; }
[data-theme="dark"] .alert-success { background: rgba(63,185,80,.12) !important; color: #3fb950 !important; }
[data-theme="dark"] .alert-danger  { background: rgba(248,81,73,.12) !important; color: #f85149 !important; }
[data-theme="dark"] .alert-warning { background: rgba(210,153,34,.12) !important; color: #d29922 !important; }
[data-theme="dark"] .alert-info    { background: rgba(88,166,255,.12) !important; color: #58a6ff !important; }

/* Chat / Messaging */
[data-theme="dark"] .msg-layout,
[data-theme="dark"] .msg-sidebar,
[data-theme="dark"] .msg-chat-area { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
[data-theme="dark"] .msg-chat-header { background: var(--c-surface-2) !important; border-color: var(--c-border) !important; }
[data-theme="dark"] .chat-conv-item { border-color: var(--c-border) !important; }
[data-theme="dark"] .chat-conv-item:hover,
[data-theme="dark"] .chat-conv-item.active { background: var(--c-surface-2) !important; }
[data-theme="dark"] .chat-conv-name { color: var(--c-text) !important; }
[data-theme="dark"] .chat-conv-preview { color: var(--c-text-3) !important; }
[data-theme="dark"] .chat-msg.received .chat-bubble { background: var(--c-surface-2) !important; color: var(--c-text) !important; border-color: var(--c-border) !important; }
[data-theme="dark"] .msg-input-area { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
[data-theme="dark"] .msg-input-field { background: var(--c-surface-2) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
[data-theme="dark"] .msg-copilot-wrap { background: var(--c-surface) !important; border-color: var(--c-border) !important; }

/* Content area */
[data-theme="dark"] .content-area { background: var(--c-bg) !important; }
[data-theme="dark"] #portalContainer.visible .content-area {
    background:
        radial-gradient(ellipse 88% 50% at 100% 0%, rgba(88, 166, 255, 0.07) 0%, transparent 52%),
        radial-gradient(ellipse 48% 40% at 0% 100%, rgba(188, 140, 255, 0.05) 0%, transparent 48%),
        var(--c-bg) !important;
}
[data-theme="dark"] .card::before {
    opacity: 0.12;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
[data-theme="dark"] .section { background: transparent !important; }
[data-theme="dark"] .section-page-header h1 { color: var(--c-text) !important; }
[data-theme="dark"] .section-page-header p  { color: var(--c-text-3) !important; }

/* Pill tabs */
[data-theme="dark"] .apple-pill-tabs,
[data-theme="dark"] .apple-filter-bar { background: var(--c-surface-2) !important; border-color: var(--c-border) !important; }
[data-theme="dark"] .apple-pill-tabs { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important; }
[data-theme="dark"] .pill-tab { color: var(--c-text-3) !important; }
[data-theme="dark"] .pill-tab:hover { background: rgba(255, 255, 255, 0.07) !important; color: var(--c-text) !important; border-color: rgba(88, 166, 255, 0.22) !important; }
[data-theme="dark"] .pill-tab.active {
    background: linear-gradient(145deg, #58a6ff 0%, #388bfd 55%, #1f6feb 100%) !important;
    color: #fff !important;
    border-color: rgba(88, 166, 255, 0.45) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.15) inset !important;
}

/* Empty states */
[data-theme="dark"] .empty-state-icon { background: rgba(88,166,255,.12) !important; }
[data-theme="dark"] .empty-state-title { color: var(--c-text) !important; }
[data-theme="dark"] .empty-state-sub { color: var(--c-text-3) !important; }

/* AI widget */
[data-theme="dark"] #aiWidgetPanel { background: #0d1117 !important; border-color: rgba(255,255,255,.1) !important; }
[data-theme="dark"] .ai-msg--bot .ai-bubble { background: var(--c-surface-2) !important; color: var(--c-text) !important; }
[data-theme="dark"] .ai-suggestion { background: var(--c-surface-2) !important; border-color: var(--c-border) !important; color: var(--c-text-2) !important; }

/* Charts */
[data-theme="dark"] .chart-card { background: var(--c-surface) !important; border-color: var(--c-border) !important; }

/* ATO date cards / CRM */
[data-theme="dark"] .crm-sidebar,
[data-theme="dark"] .crm-main-panel { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
[data-theme="dark"] .crm-contact-item:hover { background: var(--c-surface-2) !important; }
[data-theme="dark"] .crm-note-card { background: var(--c-surface-2) !important; border-color: var(--c-border) !important; }

/* Settings */
[data-theme="dark"] .settings-nav-item { color: var(--c-text-3) !important; }
[data-theme="dark"] .settings-nav-item:hover,
[data-theme="dark"] .settings-nav-item.active { background: var(--c-surface-2) !important; color: var(--c-text) !important; }

/* Login page — keep light */
[data-theme="dark"] #loginPage { filter: none; }

/* Scrollbars */
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--c-surface-2); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

/* ======================================================================
   CONSISTENT EMPTY STATE COMPONENT
   ====================================================================== */
.eh-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 24px; text-align:center; }
.eh-empty-icon { width:80px; height:80px; border-radius:24px; display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 20px; }
.eh-empty-icon.blue   { background:rgba(var(--primary-rgb, 37, 99, 235),.1); color:var(--c-blue); }
.eh-empty-icon.green  { background:rgba(16,185,129,.1); color:var(--c-green); }
.eh-empty-icon.orange { background:rgba(245,158,11,.1); color:var(--c-orange); }
.eh-empty-title { font-family:'Outfit',sans-serif; font-size:1.15rem; font-weight:800; color:var(--c-text); margin-bottom:8px; }
.eh-empty-sub   { font-size:.88rem; color:var(--c-text-3); line-height:1.6; max-width:320px; }
.eh-empty-action { margin-top:20px; }

/* ======================================================================
   CONSISTENT LOADING STATE COMPONENT
   ====================================================================== */
.eh-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; gap:14px; }
.eh-loading-spinner { width:36px; height:36px; border:3px solid var(--c-border); border-top-color:var(--c-blue); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.eh-loading-text { font-size:.88rem; color:var(--c-text-3); }

/* Inline loading skeleton */
.eh-skeleton { background:linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-surface-3) 50%, var(--c-surface-2) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:6px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.eh-skeleton-line { height:14px; margin-bottom:8px; }
.eh-skeleton-line.w-100 { width:100%; }
.eh-skeleton-line.w-75  { width:75%; }
.eh-skeleton-line.w-50  { width:50%; }


/* ======================================================================
   STABILITY v6 — Sidebar scroll, no white gap, chat/doc layout, performance
   ====================================================================== */

/* Flex: nav must shrink so inner scroll works (fixes double scrollbar + footer overlap) */
.sidebar {
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    isolation: isolate;
}
.sidebar-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px !important;
}
.sidebar-footer {
    margin-top: auto !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,.12) !important;
}

/* Grid column: main area must clip wide children (removes horizontal page scroll) */
@media (min-width: 1025px) {
    #portalContainer.visible {
        grid-template-columns: var(--sidebar-w) minmax(0, 1fr) !important;
    }
}

.main-content {
    max-width: 100%;
}

.content-area {
    max-width: 100%;
    box-sizing: border-box;
}

#documentsSection .dashboard-container-apple,
#documentsSection .apple-filter-bar,
#documentsSection .card {
    max-width: 100%;
    box-sizing: border-box;
}

#documentsSection .apple-grid-layout.documents-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) !important;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 640px) {
    #documentsSection .apple-grid-layout.documents-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Reduce layout thrash: prefer GPU-friendly compositing on message panes */
#chatSection .msg-messages,
#chatMessages {
    contain: content;
}

/* ======================================================================
   SIDEBAR FIX v7 — Desktop grid stretch bug (logout / footer “gadbad”)
   Grid default align-self:stretch makes sidebar as tall as MAIN content
   (10,000px+), so nav scrolls wrong and Logout sits miles below viewport.
   Fix: pin sidebar to viewport height + start-align in grid + inner scroll.
   ====================================================================== */
@media (min-width: 1025px) {
    #portalContainer.visible > .sidebar,
    #portalContainer.visible > nav.sidebar {
        align-self: start !important;
        justify-self: stretch !important;
        width: var(--sidebar-w) !important;
        min-width: var(--sidebar-w) !important;
        max-width: var(--sidebar-w) !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        position: sticky !important;
        top: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    #portalContainer.visible > .sidebar .sidebar-nav,
    #portalContainer.visible > nav.sidebar .sidebar-nav {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    #portalContainer.visible > .sidebar .sidebar-header,
    #portalContainer.visible > .sidebar .sidebar-user,
    #portalContainer.visible > nav.sidebar .sidebar-header,
    #portalContainer.visible > nav.sidebar .sidebar-user {
        flex-shrink: 0 !important;
    }

    #portalContainer.visible > .sidebar .sidebar-footer,
    #portalContainer.visible > nav.sidebar .sidebar-footer {
        flex-shrink: 0 !important;
        margin-top: 0 !important;
        background: rgba(0, 0, 0, 0.22) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Tablet / phone: overlay sidebar — full height panel, no white sliver */
@media (max-width: 1024px) {
    #portalContainer.visible > .sidebar,
    #portalContainer.visible > nav.sidebar {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        box-sizing: border-box !important;
    }

    #portalContainer.visible > .sidebar .sidebar-nav,
    #portalContainer.visible > nav.sidebar .sidebar-nav {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px 10px max(16px, calc(56px + env(safe-area-inset-bottom, 0px))) !important;
    }

    #portalContainer.visible > .sidebar .sidebar-footer,
    #portalContainer.visible > nav.sidebar .sidebar-footer {
        flex-shrink: 0 !important;
        margin-top: 0 !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        background: rgba(0, 0, 0, 0.25) !important;
    }
}

/* --------------------------------------------------------------------------
   Welcome guide (first-session checklist) — SaaS-style onboarding rail
   -------------------------------------------------------------------------- */
.eh-welcome-guide {
    margin: 0 0 1.25rem;
    padding: 0;
    animation: ehWgFade 0.45s ease both;
}

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

.eh-welcome-guide[hidden] {
    display: none !important;
}

.eh-wg-card {
    position: relative;
    border-radius: 16px;
    padding: 1.25rem 1.35rem 1.1rem;
    background: linear-gradient(135deg, #f8fafc 0%, var(--c-blue-pale) 45%, #f1f5f9 100%);
    border: 1px solid rgba(var(--primary-rgb, 37, 99, 235), 0.14);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 32px -12px rgba(var(--primary-rgb, 37, 99, 235), 0.18);
    overflow: hidden;
}

.eh-wg-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(900px 280px at 10% -20%, rgba(59, 130, 246, 0.12), transparent 55%);
}

.eh-wg-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.eh-wg-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--c-blue-dark);
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.1);
    border: 1px solid rgba(var(--primary-rgb, 37, 99, 235), 0.18);
}

.eh-wg-dismiss {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.75);
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.eh-wg-dismiss:hover {
    background: #fff;
    color: #0f172a;
}

.eh-wg-title {
    position: relative;
    margin: 0 0 0.4rem;
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    line-height: 1.25;
}

.eh-wg-sub {
    position: relative;
    margin: 0 0 1rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #475569;
    max-width: 52rem;
}

.eh-wg-sub strong {
    color: #334155;
}

.eh-wg-inline-ico {
    opacity: 0.85;
}

.eh-wg-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.55rem;
}

.eh-wg-step {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease;
}

.eh-wg-step:hover {
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.45);
    background: #fff;
    box-shadow: 0 4px 14px -4px rgba(var(--primary-rgb, 37, 99, 235), 0.35);
    transform: translateY(-1px);
}

.eh-wg-step:active {
    transform: translateY(0);
}

.eh-wg-step-num {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--c-blue-dark);
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.12);
}

.eh-wg-step-icon {
    flex-shrink: 0;
    width: 1.15rem;
    text-align: center;
    color: var(--c-blue);
    opacity: 0.92;
}

.eh-wg-step-label {
    flex: 1 1 auto;
    min-width: 0;
}

.eh-wg-step-arrow {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: #94a3b8;
    opacity: 0.85;
}

.eh-wg-foot {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
}

@media (max-width: 640px) {
    .eh-wg-card {
        padding: 1rem 1rem 0.95rem;
        border-radius: 14px;
    }

    .eh-wg-title {
        font-size: 1.1rem;
    }

    .eh-wg-sub {
        font-size: 0.86rem;
        margin-bottom: 0.85rem;
    }

    .eh-wg-steps {
        grid-template-columns: 1fr;
    }

    .eh-wg-foot {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .eh-wg-foot .btn {
        width: 100%;
        justify-content: center;
    }
}

[data-theme="dark"] .eh-wg-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    border-color: rgba(96, 165, 250, 0.22);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 16px 40px -16px rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .eh-wg-card::before {
    background: radial-gradient(900px 280px at 10% -20%, rgba(59, 130, 246, 0.18), transparent 55%);
}

[data-theme="dark"] .eh-wg-badge {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(96, 165, 250, 0.35);
}

[data-theme="dark"] .eh-wg-dismiss {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
}

[data-theme="dark"] .eh-wg-dismiss:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

[data-theme="dark"] .eh-wg-title {
    color: #f8fafc;
}

[data-theme="dark"] .eh-wg-sub {
    color: rgba(226, 232, 240, 0.82);
}

[data-theme="dark"] .eh-wg-sub strong {
    color: #e2e8f0;
}

[data-theme="dark"] .eh-wg-step {
    background: rgba(15, 23, 42, 0.65);
    border-color: rgba(148, 163, 184, 0.22);
    color: #f1f5f9;
}

[data-theme="dark"] .eh-wg-step:hover {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(30, 41, 59, 0.95);
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .eh-wg-step-num {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .eh-wg-step-icon {
    color: #60a5fa;
}

[data-theme="dark"] .eh-wg-step-arrow {
    color: rgba(148, 163, 184, 0.7);
}

[data-theme="dark"] .eh-wg-foot {
    border-top-color: rgba(148, 163, 184, 0.18);
}

.eh-wg-badge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.eh-wg-role-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(15, 23, 42, 0.06);
    color: #475569;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.eh-welcome-guide--client .eh-wg-role-pill {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.1);
    color: var(--c-blue-dark);
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.22);
}

.eh-welcome-guide--staff .eh-wg-role-pill {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.1);
    color: var(--c-blue-dark);
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.22);
}

.eh-welcome-guide--admin .eh-wg-role-pill {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.1);
    color: var(--c-blue-dark);
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.22);
}

.eh-wg-title-muted {
    font-weight: 700;
    color: #64748b;
    letter-spacing: -0.01em;
}

.eh-welcome-guide--client .eh-wg-card {
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.2);
}

.eh-welcome-guide--staff .eh-wg-card {
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.2);
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 37, 99, 235), 0.03) 0%, var(--c-blue-pale) 40%, #f8fafc 100%);
}

.eh-welcome-guide--staff .eh-wg-card::before {
    background: radial-gradient(900px 280px at 10% -20%, rgba(var(--primary-rgb, 37, 99, 235), 0.1), transparent 55%);
}

.eh-welcome-guide--admin .eh-wg-card {
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.2);
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 37, 99, 235), 0.03) 0%, var(--c-blue-pale) 42%, #f8fafc 100%);
}

.eh-welcome-guide--admin .eh-wg-card::before {
    background: radial-gradient(900px 280px at 10% -20%, rgba(var(--primary-rgb, 37, 99, 235), 0.1), transparent 55%);
}

.eh-wg-step--ai {
    border-style: dashed;
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.35);
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 37, 99, 235), 0.05), rgba(255, 255, 255, 0.9));
}

.eh-wg-step--ai .eh-wg-step-num {
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 37, 99, 235), 0.18), rgba(var(--primary-rgb, 37, 99, 235), 0.15));
    color: var(--c-blue-dark);
}

.eh-welcome-guide--staff .eh-wg-step--ai {
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.35);
}

.eh-welcome-guide--admin .eh-wg-step--ai {
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.35);
}

[data-theme="dark"] .eh-wg-role-pill {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(226, 232, 240, 0.9);
    border-color: rgba(148, 163, 184, 0.25);
}

[data-theme="dark"] .eh-wg-title-muted {
    color: rgba(148, 163, 184, 0.95);
}

[data-theme="dark"] .eh-welcome-guide--staff .eh-wg-card {
    background: linear-gradient(135deg, #1e1b4b 0%, #1e293b 55%, #0f172a 100%);
}

[data-theme="dark"] .eh-welcome-guide--admin .eh-wg-card {
    background: linear-gradient(135deg, #134e4a 0%, #1e293b 50%, #0f172a 100%);
}

[data-theme="dark"] .eh-wg-step--ai {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.35), rgba(15, 23, 42, 0.85));
    border-color: rgba(96, 165, 250, 0.35);
}

.settings-row--cta {
    align-items: center;
}

.settings-row--cta .btn {
    flex-shrink: 0;
}

@media (max-width: 520px) {
    .settings-row--cta {
        flex-direction: column;
        align-items: stretch;
    }
    .settings-row--cta .btn {
        width: 100%;
        justify-content: center;
    }
}

#portalContainer.visible .section.active {
    padding-bottom: var(--eh-section-pad-y);
}

@media (max-width: 768px) {
    #portalContainer.visible .btn:not(.btn-sm):not(.topbar-icon-btn) {
        min-height: var(--eh-touch-min);
    }
}

@media (prefers-reduced-motion: reduce) {
    .eh-welcome-guide {
        animation: none !important;
    }
    .section.active {
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   Portal empty states + Help menu (SaaS-style)
   -------------------------------------------------------------------------- */
.eh-portal-empty {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 520px;
    margin: 1.5rem auto;
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
    text-align: center;
    background: linear-gradient(165deg, var(--c-surface) 0%, var(--c-surface-2) 100%);
    border: 1px dashed rgba(var(--primary-rgb, 37, 99, 235), 0.22);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}

.crm-contact-list .eh-portal-empty {
    grid-column: auto;
    max-width: none;
    margin: 1rem 0.5rem;
}

#taskBoardList .eh-portal-empty {
    max-width: none;
    margin: 0.5rem 0;
}

.eh-portal-empty-icon {
    font-size: clamp(2rem, 5vw, 2.75rem);
    color: var(--c-blue);
    opacity: 0.88;
    margin-bottom: 0.75rem;
    line-height: 1;
}

.eh-portal-empty-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.05rem, 2.5vw, 1.25rem);
    font-weight: 800;
    color: var(--c-text);
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}

.eh-portal-empty-desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--c-text-2);
    margin: 0 0 1.1rem;
}

.eh-portal-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.eh-pe-empty-btn {
    min-height: 40px;
}

[data-theme="dark"] .eh-portal-empty {
    background: linear-gradient(165deg, var(--c-surface) 0%, rgba(22, 27, 34, 0.95) 100%);
    border-color: rgba(96, 165, 250, 0.28);
}

[data-theme="dark"] .eh-portal-empty-icon {
    color: var(--c-blue);
}

.eh-help-wrap {
    position: relative;
    flex-shrink: 0;
}

.eh-help-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: min(240px, calc(100vw - 24px));
    padding: 6px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    z-index: 2200;
    box-sizing: border-box;
}

.eh-help-menu[hidden] {
    display: none !important;
}

.eh-help-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--c-text);
    font-size: 0.86rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.eh-help-item:hover {
    background: var(--c-surface-2);
}

.eh-help-item i {
    width: 1.1rem;
    color: var(--c-blue);
    opacity: 0.9;
}

.eh-help-kbd {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--c-surface-2);
    color: var(--c-text-3);
    border: 1px solid var(--c-border);
}

[data-theme="dark"] .eh-help-menu {
    background: var(--c-surface);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

@media (max-width: 480px) {
    .eh-help-menu {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ======================================================================
   ACCESSIBILITY — respect reduced motion
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .section.active {
        animation: none !important;
    }

    .modal-content {
        animation: none !important;
    }

    .pill-tab,
    .pill-tab.active,
    #documentsSection .pill-tab,
    #userManagementSection .pill-tab,
    #portalContainer .sidebar .nav-item,
    #portalContainer .sidebar .nav-item:hover {
        transform: none !important;
    }
}

/* ---------- Navigation groups & client attention strip (market UX) ---------- */
#portalContainer .sidebar .nav-group-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-text-3, #64748b);
    padding: 14px 14px 6px;
    margin: 0;
    user-select: none;
}

#portalContainer .sidebar .nav-group-label:first-of-type {
    padding-top: 6px;
}

.eh-attention-strip {
    width: 100%;
}

.eh-attention-inner {
    border-radius: 16px;
    border: 1px solid var(--c-border, rgba(226, 232, 240, 0.9));
    background: var(--c-surface, #fff);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.eh-attention-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-border, rgba(226, 232, 240, 0.7));
    background: linear-gradient(180deg, rgba(var(--primary-rgb, 37, 99, 235), 0.04), transparent);
}

.eh-attention-head-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.12);
    color: var(--c-blue, var(--c-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.eh-attention-head-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--c-text, #0f172a);
}

.eh-attention-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
}

.eh-attention-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border: none;
    border-right: 1px solid var(--c-border, rgba(226, 232, 240, 0.6));
    border-bottom: 1px solid var(--c-border, rgba(226, 232, 240, 0.6));
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease;
    font: inherit;
    color: inherit;
}

.eh-attention-card:last-child {
    border-right: none;
}

.eh-attention-card:hover {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.04);
}

.eh-attention-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.eh-attention-blue .eh-attention-card-icon { background: rgba(var(--primary-rgb, 37, 99, 235), 0.12); color: var(--c-blue, var(--c-blue)); }
.eh-attention-amber .eh-attention-card-icon { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.eh-attention-red .eh-attention-card-icon { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.eh-attention-purple .eh-attention-card-icon { background: rgba(var(--primary-rgb, 37, 99, 235), 0.12); color: var(--c-blue); }
.eh-attention-green .eh-attention-card-icon { background: rgba(16, 185, 129, 0.15); color: #059669; }

.eh-attention-card-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.eh-attention-card-title {
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--c-text, #0f172a);
}

.eh-attention-card-sub {
    font-size: 0.75rem;
    color: var(--c-text-3, #64748b);
}

.eh-attention-card-go {
    color: var(--c-text-3, #94a3b8);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.eh-attention-clear {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border: none;
}

.eh-attention-clear-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.eh-attention-clear-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--c-text, #0f172a);
}

.eh-attention-clear-sub {
    font-size: 0.8rem;
    color: var(--c-text-3, #64748b);
    margin-top: 2px;
    max-width: 420px;
}

@media (max-width: 640px) {
    .eh-attention-cards {
        grid-template-columns: 1fr;
    }
    .eh-attention-card {
        border-right: none;
    }
}

/* Staff / admin “Today’s queue” + document request inbox */
.eh-inbox-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 0.78rem;
    color: var(--c-text-3, #64748b);
}

.eh-inbox-stat strong {
    color: var(--c-text, #0f172a);
    font-weight: 700;
    margin-right: 4px;
}

.eh-inbox-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--c-border, rgba(226, 232, 240, 0.8));
}

@media (max-width: 768px) {
    .eh-inbox-cols {
        grid-template-columns: 1fr;
    }
}

.eh-inbox-col {
    padding: 12px 16px 16px;
    border-right: 1px solid var(--c-border, rgba(226, 232, 240, 0.6));
}

.eh-inbox-col:last-child {
    border-right: none;
}

.eh-inbox-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-3, #64748b);
    margin-bottom: 10px;
}

.eh-inbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--c-border, rgba(226, 232, 240, 0.5));
    font-size: 0.86rem;
}

.eh-inbox-row:last-child {
    border-bottom: none;
}

.eh-inbox-row-click {
    cursor: pointer;
    border-radius: 8px;
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}

.eh-inbox-row-click:hover {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.04);
}

.eh-inbox-row-main {
    min-width: 0;
    flex: 1;
}

.eh-inbox-row-main strong {
    display: block;
    font-size: 0.88rem;
}

.eh-inbox-meta {
    display: block;
    font-size: 0.78rem;
    color: var(--c-text-3, #64748b);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eh-inbox-empty {
    font-size: 0.82rem;
    color: var(--c-text-3, #94a3b8);
    padding: 8px 0;
}

/* ========== Product engagement: banners, checklist, mobile bar, a11y ========== */
.eh-engagement-banners {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eh-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--c-border, #e2e8f0);
    background: var(--c-surface, #fff);
    font-size: 0.88rem;
    line-height: 1.45;
}

.eh-banner--info {
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 37, 99, 235), 0.07), rgba(124, 58, 237, 0.06));
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.2);
}

.eh-banner--resume {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
}

.eh-banner--muted {
    background: var(--c-bg, #f8fafc);
    color: var(--c-text-2, #475569);
}

.eh-banner-body {
    flex: 1;
    min-width: 200px;
}

.eh-banner-dismiss {
    border: none;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    color: var(--c-text-3, #94a3b8);
    padding: 4px 8px;
    border-radius: 8px;
}

.eh-banner-dismiss:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--c-text, #0f172a);
}

.eh-kbd {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid var(--c-border, #e2e8f0);
    font-size: 0.75rem;
    font-family: ui-monospace, monospace;
    background: var(--c-surface, #fff);
}

.eh-activation-checklist {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--c-border, #e2e8f0);
}

.eh-act-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-border, #e2e8f0);
    background: var(--c-bg, #f8fafc);
}

.eh-act-head-title {
    display: block;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--c-text, #0f172a);
}

.eh-act-head-title i {
    margin-right: 8px;
    color: var(--c-blue, var(--c-blue));
}

.eh-act-head-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--c-text-3, #64748b);
    margin-top: 4px;
}

.eh-act-steps {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.eh-act-step-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: background 0.15s ease;
}

.eh-act-step-btn:hover {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.05);
}

.eh-act-step + .eh-act-step .eh-act-step-btn {
    border-top: 1px solid var(--c-border, #f1f5f9);
}

.eh-act-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.1);
    color: var(--c-blue, var(--c-blue));
    flex-shrink: 0;
}

.eh-act-step--done .eh-act-icon {
    background: rgba(16, 185, 129, 0.15);
    color: var(--c-green, #10b981);
}

.eh-act-label {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 600;
}

.eh-act-state {
    color: var(--c-text-3, #94a3b8);
    font-size: 0.85rem;
}

.eh-act-step--done .eh-act-state {
    color: var(--c-green, #10b981);
}

.eh-mobile-quick-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8500;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--c-border, #e2e8f0);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}

.eh-mqb-inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    gap: 8px;
}

.eh-mqb-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border: none;
    border-radius: 12px;
    background: var(--c-bg, #f1f5f9);
    color: var(--c-text, #0f172a);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease;
}

.eh-mqb-btn i {
    font-size: 1.15rem;
    color: var(--c-blue, var(--c-blue));
}

.eh-mqb-btn:active {
    transform: scale(0.97);
}

@media (min-width: 901px) {
    .eh-mobile-quick-bar {
        display: none !important;
    }
}

body.eh-portal-app {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (max-width: 900px) {
    /* Use body class instead of :has for broad browser support */
    body.eh-portal-app.eh-mqb-visible {
        padding-bottom: 96px;
    }
    /* Scrolling happens inside .content-area — this padding prevents the last card/table rows hiding under the sticky quick bar + home indicator. */
    body.eh-portal-app.eh-mqb-visible .content-area {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Keep floating controls above the mobile quick bar (z-index: 8500) */
    body.eh-portal-app.eh-mqb-visible #aiWidgetBtn {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.eh-portal-app.eh-mqb-visible #aiWidgetPanel {
        bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.eh-portal-app.eh-mqb-visible .toast-stack {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── Filter chips: one horizontal row on phone (no clipping in filter cards) ── */
@media (max-width: 640px) {
    .apple-filter-bar .apple-pill-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
        flex: 1 1 auto;
        min-width: 0;
    }
    .apple-filter-bar .apple-pill-tabs .pill-tab {
        flex: 0 0 auto;
    }
    .apple-filter-bar {
        flex-wrap: wrap;
        align-items: stretch;
        overflow: visible;
    }
}

/* Admin: accent colour swatches — scroll row on small phones, wrap on larger */
.eh-accent-swatch-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    margin-bottom: 8px;
    scrollbar-width: thin;
}
.eh-accent-swatch-row > [title] {
    flex: 0 0 auto;
}
@media (min-width: 641px) {
    .eh-accent-swatch-row {
        flex-wrap: wrap;
        overflow: visible;
    }
}
.eh-accent-swatch-hint {
    display: block;
    font-size: 0.78rem;
    color: var(--c-text-3);
    margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Cross-page stability: data tables, chip rows, CRM header strip (v20260425)
   -------------------------------------------------------------------------- */
.eh-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overscroll-behavior-x: contain;
}

/* Secondary button rows in cards (admin ops, etc.): one horizontal scroller on phones */
@media (max-width: 640px) {
    .eh-chip-row--scroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        padding-bottom: 2px;
    }
    .eh-chip-row--scroll .btn,
    .eh-chip-row--scroll .btn-sm,
    .eh-chip-row--scroll .eh-ai-chip {
        flex: 0 0 auto;
    }
    .eh-ai-banner-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        max-width: 100%;
        padding-bottom: 4px;
    }
    .eh-ai-banner-chips .eh-ai-chip {
        flex: 0 0 auto;
    }
    .crm-workspace-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    #appointmentsSection #apptTypeTabs.apple-pill-tabs,
    #appointmentsSection #apptStatusTabs.apple-pill-tabs {
        flex-wrap: nowrap !important;
    }
    /* Breathing room between filter card and table (audit, etc.) */
    #auditLogSection .card + .card {
        margin-top: 4px;
    }
}

/* When the mobile quick bar is visible, cap chat shell height so the composer stays reachable */
@media (max-width: 900px) {
    body.eh-portal-app.eh-mqb-visible #chatSection {
        max-height: calc(100vh - var(--topbar-h, 56px) - 100px);
        max-height: calc(100dvh - var(--topbar-h, 56px) - 100px);
    }
    body.eh-portal-app.eh-mqb-visible #chatSection .chat-container {
        max-height: min(640px, calc(100vh - var(--topbar-h, 56px) - 140px));
        max-height: min(640px, calc(100dvh - var(--topbar-h, 56px) - 140px));
    }
}

.eh-ops-focus-strip {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.12), rgba(var(--primary-rgb, 37, 99, 235), 0.08));
    border: 1px solid rgba(245, 158, 11, 0.25);
    font-size: 0.88rem;
    color: var(--c-text, #0f172a);
}

.eh-ops-focus-strip--admin {
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.1), rgba(var(--primary-rgb, 37, 99, 235), 0.08));
    border-color: rgba(124, 58, 237, 0.22);
}

.eh-ops-inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.eh-ops-inner i {
    margin-top: 3px;
    color: var(--c-orange, #d97706);
}

.eh-ops-focus-strip--admin .eh-ops-inner i {
    color: var(--c-purple, #7c3aed);
}

@keyframes eh-kpi-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

.kpi-card.eh-kpi-pulse {
    animation: eh-kpi-pulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .kpi-card.eh-kpi-pulse {
        animation: none;
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35);
    }

    .eh-mqb-btn,
    .eh-act-step-btn {
        transition: none;
    }

    .page-transition-overlay,
    #pageTransitionOverlay {
        animation: none !important;
    }
}

/* ====================================================================
   DYNAMIC BRANDING OVERRIDES
   ==================================================================== */

/* Dynamic Sidebar Gradient */
.sidebar {
    background: linear-gradient(160deg, var(--sidebar-bg-top, #060f1e) 0%, var(--sidebar-bg-mid, #0d1f33) 45%, var(--sidebar-bg-bot, #1a3a5c) 100%) !important;
}

/* Dynamic Brand Gradient Tokens */
:root {
    --gradient-brand: linear-gradient(135deg, var(--c-blue) 0%, var(--c-blue-light) 100%);
    --gradient-brand-soft: linear-gradient(135deg, rgba(var(--primary-rgb, 37, 99, 235), 0.08) 0%, rgba(var(--primary-rgb, 37, 99, 235), 0.04) 100%);
}

/* Login Panel & Feature Overrides */
.login-feature-icon {
    background: var(--gradient-brand) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 37, 99, 235), 0.4) !important;
}
.login-card .form-control:focus {
    border-color: var(--c-blue) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 37, 99, 235), 0.1) !important;
}
.btn-login {
    background: linear-gradient(135deg, var(--c-blue-dark, #1d4ed8) 0%, var(--c-blue) 50%, var(--c-blue-light) 100%) !important;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb, 37, 99, 235), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.btn-login:hover {
    box-shadow: 0 8px 28px rgba(var(--primary-rgb, 37, 99, 235), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.login-help a {
    color: var(--c-blue) !important;
}

/* Sidebar Avatar & Active Navigation Indicators */
.sidebar-avatar {
    background: var(--gradient-brand) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 37, 99, 235), 0.4) !important;
}
.nav-item a::before, .nav-item button::before {
    background: var(--gradient-brand) !important;
}
#portalContainer .sidebar .nav-item::before {
    background: var(--gradient-brand) !important;
}
#portalContainer .sidebar .nav-item.active {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.2) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb, 37, 99, 235), 0.25) !important;
}

/* UI Controls: Topbar, Modals, Buttons, KPI Cards */
.menu-toggle:hover {
    background: var(--c-blue-pale) !important;
    border-color: var(--c-blue) !important;
    color: var(--c-blue) !important;
}
.topbar-icon-btn:hover {
    background: var(--c-blue-pale) !important;
    border-color: var(--c-blue) !important;
    color: var(--c-blue) !important;
}
.topbar-avatar {
    background: var(--gradient-brand) !important;
}
.kpi-card:hover {
    box-shadow: 0 8px 32px rgba(var(--primary-rgb, 37, 99, 235), 0.12), 0 0 0 1px rgba(var(--primary-rgb, 37, 99, 235), 0.08) !important;
}
.btn-primary {
    background: var(--gradient-brand) !important;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb, 37, 99, 235), 0.35) !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--c-blue) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), 0.12) !important;
}
#aiWidgetBtn {
    background: var(--gradient-brand) !important;
    box-shadow: 0 8px 24px rgba(var(--primary-rgb, 37, 99, 235), 0.4), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}
#aiWidgetBtn:hover {
    box-shadow: 0 12px 32px rgba(var(--primary-rgb, 37, 99, 235), 0.5), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}
.ai-msg--user .ai-bubble {
    background: var(--gradient-brand) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 37, 99, 235), 0.25) !important;
}
.ai-suggestion:hover {
    background: var(--c-blue-pale) !important;
    border-color: var(--c-blue) !important;
    color: var(--c-blue) !important;
}
.eh-ai-banner {
    background: var(--gradient-brand) !important;
    box-shadow: 0 8px 24px rgba(var(--primary-rgb, 37, 99, 235), 0.3) !important;
}

/* Chat & Messaging Layouts */
.quick-action-btn:hover {
    background: var(--c-blue-pale) !important;
    border-color: var(--c-blue) !important;
    color: var(--c-blue) !important;
    box-shadow: 0 8px 24px rgba(var(--primary-rgb, 37, 99, 235), 0.15) !important;
}
.msg-search-input:focus {
    border-color: var(--c-blue) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), 0.1) !important;
}
.chat-item:hover {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.04) !important;
}
.chat-item.active {
    background: var(--c-blue-pale) !important;
    border-left: 3px solid var(--c-blue) !important;
}
.chat-item.active .chat-item-name {
    color: var(--c-blue) !important;
}
.chat-item-avatar {
    background: var(--gradient-brand) !important;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb, 37, 99, 235), 0.2) !important;
}
.chat-unread {
    background: var(--c-blue) !important;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb, 37, 99, 235), 0.35) !important;
}
.msg-empty-state .msg-empty-icon {
    background: var(--gradient-brand-soft) !important;
    color: var(--c-blue) !important;
}
.msg-contact-avatar {
    background: var(--gradient-brand) !important;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb, 37, 99, 235), 0.2) !important;
}
.msg-header-action-btn:hover {
    background: var(--c-blue-pale) !important;
    border-color: var(--c-blue) !important;
    color: var(--c-blue) !important;
}
.msg-back-btn:hover {
    background: var(--c-blue-pale) !important;
    color: var(--c-blue) !important;
}
.msg-copilot-icon {
    background: var(--gradient-brand) !important;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb, 37, 99, 235), 0.25) !important;
}
.msg-copilot-refresh:hover {
    background: var(--c-blue-pale) !important;
    border-color: var(--c-blue) !important;
    color: var(--c-blue) !important;
}
.msg-copilot-body {
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 37, 99, 235), 0.02) 0%, rgba(var(--primary-rgb, 37, 99, 235), 0.01) 100%) !important;
}
.msg-copilot-loading i {
    color: var(--c-blue) !important;
}
.msg-copilot-card.ai-summary {
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.2) !important;
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.03) !important;
}
.is-sent .chat-bubble {
    background: var(--gradient-brand) !important;
    box-shadow: 0 2px 12px rgba(var(--primary-rgb, 37, 99, 235), 0.25) !important;
}
.is-received .chat-attach-file {
    color: var(--c-blue) !important;
}
.msg-sender-name {
    color: var(--c-blue) !important;
}
.msg-attach-icon {
    color: var(--c-blue) !important;
}
.msg-input-action-btn:hover {
    background: var(--c-blue-pale) !important;
    border-color: var(--c-blue) !important;
    color: var(--c-blue) !important;
}
.msg-input-field:focus {
    border-color: var(--c-blue) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), 0.1) !important;
}
.msg-send-btn {
    background: var(--gradient-brand) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 37, 99, 235), 0.35) !important;
}
.msg-send-btn:hover {
    box-shadow: 0 6px 18px rgba(var(--primary-rgb, 37, 99, 235), 0.45) !important;
}