* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    /* ════════════════════════════════════════════════════════════════
       TIER 1 — PRIMITIVES (raw values; never use directly in components)
       Edit these to retheme the entire product. Semantic tokens below
       point at these, so a primitive change cascades everywhere.
       ════════════════════════════════════════════════════════════════ */

    /* Brand blue scale — kept narrow because we only need brand+states */
    --blue-50:  #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;

    /* Neutrals — 9-step gray scale (existing, unchanged) */
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Status hues — minimal scales, focused on usage */
    --green-100: #dcfce7;  --green-200: #bbf7d0;  --green-500: #10b981;
    --green-600: #059669;  --green-700: #166534;  --green-800: #15803d;

    --amber-100: #fef3c7;  --amber-200: #fde68a;  --amber-500: #f59e0b;
    --amber-600: #d97706;  --amber-700: #92400e;  --amber-800: #b45309;

    --red-50:    #fef2f2;  --red-100:   #fee2e2;  --red-200:   #fecaca;
    --red-500:   #ef4444;  --red-600:   #dc2626;  --red-700:   #991b1b;
    --red-800:   #b91c1c;

    /* Surface anchors (existing) */
    --canvas:        #e4e7ee;
    --canvas-border: #d6dae3;
    --inset:         #eef0f5;

    /* ════════════════════════════════════════════════════════════════
       TIER 2 — SEMANTIC TOKENS (intent-named; use these in components)
       Components reference these aliases. Adding dark mode later means
       remapping these to dark primitives — no component changes needed.
       ════════════════════════════════════════════════════════════════ */

    /* Brand */
    --primary:        var(--blue-600);
    --primary-dark:   var(--blue-800);
    --primary-hover:  var(--blue-700);
    --primary-soft:   var(--blue-50);
    --primary-text:   var(--blue-800);

    /* Status — bg/border/text triplets for consistent pill+card patterns */
    --color-success-bg:     var(--green-100);
    --color-success-border: var(--green-200);
    --color-success-text:   var(--green-700);
    --color-success-strong: var(--green-600);

    --color-warning-bg:     var(--amber-100);
    --color-warning-border: var(--amber-200);
    --color-warning-text:   var(--amber-700);
    --color-warning-strong: var(--amber-600);

    --color-danger-bg:      var(--red-100);
    --color-danger-border:  var(--red-200);
    --color-danger-text:    var(--red-700);
    --color-danger-strong:  var(--red-600);

    --color-info-bg:        var(--blue-100);
    --color-info-border:    var(--blue-200);
    --color-info-text:      var(--blue-800);

    /* Legacy single-name aliases — kept for backward compatibility with
       existing CSS that uses --success / --warning / --danger as solid
       colors (chart fills, dots, etc.). Map to the "strong" variants. */
    --success: var(--green-500);
    --warning: var(--amber-500);
    --danger:  var(--red-500);
    --info:    var(--blue-500);

    /* Text colors — every text token must hit AA contrast (4.5:1) against
       its surface. Phase 6 bumped tertiary from gray-500 to gray-600 because
       gray-500 on canvas was 3.91:1 (fail) and on inset was 4.24:1 (fail).
       gray-600 against canvas is 6.10:1 — comfortable AA pass.
       Side effect: tertiary and secondary now use the same swatch. The
       semantic distinction lives in WHERE they're used (tertiary = meta/labels,
       secondary = body) rather than in the visual tone. */
    --color-text-primary:    var(--gray-900);
    --color-text-secondary:  var(--gray-600);
    --color-text-tertiary:   var(--gray-600);
    --color-text-muted:      var(--gray-400);   /* icons & decoration ONLY — never text */
    --color-text-on-primary: white;
    --color-text-link:       var(--blue-700);
    --color-text-link-strong: var(--blue-800);   /* for links on non-white surfaces */

    /* Surfaces */
    --color-surface:         white;
    --color-surface-alt:     var(--gray-50);    /* hover, subtle striping */
    --color-surface-inset:   var(--inset);      /* nested zones in cards */
    --color-surface-canvas:  var(--canvas);
    --color-border:          var(--gray-200);
    --color-border-strong:   var(--gray-300);
    --color-border-canvas:   var(--canvas-border);

    /* ════════════════════════════════════════════════════════════════
       TYPOGRAPHY — t-shirt sizing (Tailwind-aligned for dev familiarity)
       The values match what's most-used in existing inline styles, so
       migration is identity-preserving (no visual drift).
       ════════════════════════════════════════════════════════════════ */
    --text-xs:    11px;   /* meta, labels, captions */
    --text-sm:    12px;   /* dense UI, table cells, badges */
    --text-base:  13px;   /* card body */
    --text-md:    14px;   /* page body */
    --text-lg:    16px;   /* card titles */
    --text-xl:    18px;   /* section headers */
    --text-2xl:   22px;   /* page subtitles */
    --text-3xl:   28px;   /* metric values */
    --text-4xl:   32px;   /* page titles, large display */

    --leading-tight:  1.2;
    --leading-snug:   1.4;
    --leading-normal: 1.55;
    --leading-loose:  1.7;

    --weight-normal:    400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-extrabold: 800;

    /* ════════════════════════════════════════════════════════════════
       SPACING — numeric scale, 4px base (Tailwind-aligned)
       ════════════════════════════════════════════════════════════════ */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ════════════════════════════════════════════════════════════════
       RADIUS — Stripe-side middle-ground for vertical-neutral feel.
       ════════════════════════════════════════════════════════════════ */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-pill: 100px;
    --radius-full: 50%;

    /* ════════════════════════════════════════════════════════════════
       ELEVATION — shadows.
       ════════════════════════════════════════════════════════════════ */
    --shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md:   0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl:   0 20px 50px rgba(0, 0, 0, 0.20);
    --shadow-2xl:  0 24px 64px rgba(0, 0, 0, 0.40);
    --shadow-ring:        0 0 0 3px rgba(37, 99, 235, 0.20);
    --shadow-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.20);

    /* ════════════════════════════════════════════════════════════════
       MOTION — duration + easing tokens.
       ════════════════════════════════════════════════════════════════ */
    --duration-fast:   120ms;
    --duration-base:   180ms;
    --duration-slow:   300ms;
    --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
    }
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--canvas); color: var(--gray-900); line-height: 1.6; }
a { color: inherit; text-decoration: none; }

/* ════════════════════════════════════════════════════════════════
   MOBILE TAP TARGETS — Phase 6
   touch-action: manipulation eliminates iOS's default 300ms tap delay
   that exists to wait-and-see if a double-tap-to-zoom is coming. We
   apply it broadly to interactive elements; the trade-off (losing
   double-tap-to-zoom) is fine because every page has a viewport meta
   that lets users pinch-zoom instead.

   Apple HIG and Android Material both call for ~44px minimum tap
   targets. Most of our buttons and links comfortably meet that, but
   pulse-card list rows, breadcrumb segments, and inline action chips
   were under-target. The min-height rule below brings them up to spec
   on touch devices specifically (via the hover:none media query) so
   it doesn't change spacing on desktop. */
button, a, [role="button"], [onclick], input[type="checkbox"], input[type="radio"], select { touch-action: manipulation; }

@media (hover: none) and (pointer: coarse) {
    /* Only apply on actual touch devices — leaves mouse/desktop spacing untouched */
    button:not(.modal-close), a.dash-pulse-link, .pulse-row a, .breadcrumb-item, .filter-select { min-height: 36px; }
    .table td, .table th { padding-top: 12px; padding-bottom: 12px; }
}

/* Tables overflow on phones; wrap them in a horizontally-scrollable container.
   This rule applies to .table-responsive — pages should opt-in by adding the
   class to a wrapper around table-heavy zones. We don't auto-wrap every table
   because some are already inside cards with their own width constraints. */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive table { min-width: 600px; }

/* Phone viewport fallback: any .table or .dash-table that DIDN'T get wrapped
   in .table-responsive still gets auto horizontal scroll on narrow viewports
   so it doesn't blow out the layout. The block display + overflow combo lets
   the table scroll independently of the page. */
@media (max-width: 640px) {
    .table, .dash-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .table thead, .dash-table thead { min-width: max-content; }
}


/* ════════════════════════════════════════════════════════════════
   UTILITY CLASSES — replaces the most-repeated inline-style patterns.
   These exist so common compositions (text-meta, row, stack, card-inset)
   can be applied as a class instead of an 80-character style attribute.
   New code should reach for these before writing inline styles.
   ════════════════════════════════════════════════════════════════ */

/* Text utilities — replaces the most-frequent text inline styles */
.text-meta      { font-size: var(--text-sm); color: var(--color-text-tertiary); }
.text-meta-xs   { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.text-body-sm   { font-size: var(--text-sm); color: var(--color-text-secondary); }
.text-body      { font-size: var(--text-base); color: var(--color-text-primary); }
.text-caption   { font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-tertiary); }
.text-label     { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); }
.text-strong    { font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.text-link      { color: var(--primary); cursor: pointer; }
.text-link:hover { color: var(--primary-hover); }
.text-success   { color: var(--color-success-text); }
.text-warning   { color: var(--color-warning-text); }
.text-danger    { color: var(--color-danger-text); }

/* Layout utilities — replaces 'display:flex;gap:Xpx;' patterns */
.row            { display: flex; align-items: center; gap: var(--space-2); }
.row-tight      { display: flex; align-items: center; gap: var(--space-1); }
.row-md         { display: flex; align-items: center; gap: var(--space-3); }
.row-lg         { display: flex; align-items: center; gap: var(--space-4); }
.row-between    { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.col            { display: flex; flex-direction: column; gap: var(--space-3); }
.col-tight      { display: flex; flex-direction: column; gap: var(--space-1); }
.col-md         { display: flex; flex-direction: column; gap: var(--space-4); }
.grid-2         { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.grid-3         { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Spacing utilities — replaces the most-frequent margin patterns */
.mb-section     { margin-bottom: var(--space-6); }
.mb-block       { margin-bottom: var(--space-5); }
.mb-card        { margin-bottom: var(--space-4); }
.mb-tight       { margin-bottom: var(--space-2); }
.mb-none        { margin-bottom: 0; }
.mt-section     { margin-top: var(--space-6); }
.mt-block       { margin-top: var(--space-5); }
.mt-card        { margin-top: var(--space-4); }

/* Surface utilities — for nested zones inside cards */
.surface-inset  { background: var(--color-surface-inset); border-radius: var(--radius-lg); padding: var(--space-4); }
.surface-alt    { background: var(--color-surface-alt); border-radius: var(--radius-md); padding: var(--space-3); }

/* Status pill utility — bg/border/text triplet */
.pill           { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold); border: 1px solid transparent; }
.pill-success  { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-text); }
.pill-warning  { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.pill-danger   { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger-text); }
.pill-info     { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info-text); }
.pill-neutral  { background: var(--gray-100); border-color: var(--gray-200); color: var(--color-text-secondary); }

/* Visually-hidden utility — for screen-reader-only content */
.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; }

/* Skip-to-content link — accessibility */
.skip-link      { position: absolute; top: -40px; left: 0; background: var(--primary); color: white; padding: var(--space-2) var(--space-4); border-radius: 0 0 var(--radius-md) 0; z-index: 100000; font-weight: var(--weight-semibold); }
.skip-link:focus { top: 0; }

/* Focus-visible discipline — apply to all interactive controls */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

/* ════════════════════════════════════════════════════════════════
   END utility classes
   ════════════════════════════════════════════════════════════════ */

/* ═══════════ APP LAYOUT (Sidebar + Main) ═══════════ */
.app-layout { display: flex; min-height: 100vh; }
.sidebar { width: 252px; background: white; border-right: 1px solid var(--gray-200); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; transition: width var(--duration-base) ease; overflow: hidden; }
.sidebar.collapsed { width: 56px; }
.app-main { flex: 1; margin-left: 252px; display: flex; flex-direction: column; min-height: 100vh; transition: margin-left var(--duration-base) ease; }
.sidebar.collapsed ~ .app-main { margin-left: 56px; }
/* Sidebar header */
.sb-header { padding: 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; height: 56px; }
.sb-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--primary); white-space: nowrap; overflow: hidden; }
.sb-logo-icon { width: 32px; height: 32px; min-width: 32px; border-radius: 8px; background: var(--primary); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 13px; }
.sb-collapse-btn { width: 28px; height: 28px; min-width: 28px; border-radius: 6px; border: 1px solid var(--gray-200); background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gray-400); font-size: 14px; transition: all var(--duration-fast); flex-shrink: 0; }
.sb-collapse-btn:hover { background: var(--gray-50); color: var(--gray-600); }
.sidebar.collapsed .sb-collapse-btn { transform: rotate(180deg); }
.sidebar.collapsed .sb-logo span { display: none; }
/* Sidebar search box removed in Phase 7 along with the command palette. */
/* Sidebar sections */
.sb-section { padding: 4px 0; }
.sb-section-label { padding: 8px 16px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-400); white-space: nowrap; overflow: hidden; }
.sidebar.collapsed .sb-section-label { text-align: center; font-size: 0; padding: 4px 0; }
.sidebar.collapsed .sb-section-label::after { content: '·'; font-size: 14px; color: var(--gray-300); display: block; text-align: center; }
/* Sidebar items */
.sb-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; margin: 1px 8px; font-size: 13px; color: var(--gray-600); cursor: pointer; border-radius: 6px; transition: all 0.12s; white-space: nowrap; overflow: hidden; text-decoration: none; position: relative; }
.sb-item:hover { background: var(--gray-100); color: var(--gray-900); }
.sb-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.sb-item.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.sb-item-icon { width: 20px; height: 20px; min-width: 20px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--gray-500); }
.sb-item.active .sb-item-icon { color: var(--primary); }
.sb-item-badge { margin-left: auto; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: var(--color-danger-bg); color: var(--danger); flex-shrink: 0; }
.sidebar.collapsed .sb-item { justify-content: center; padding: 10px 0; margin: 1px 4px; }
.sidebar.collapsed .sb-item span:not(.sb-item-icon) { display: none; }
.sidebar.collapsed .sb-item .sb-item-badge { display: none; }
.sidebar.collapsed .sb-item .sb-item-icon { margin: 0; }
.sidebar.collapsed .sb-item::before { left: 0; }
/* Sidebar tooltip (collapsed state) */
.sb-item[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; left: 56px; top: 50%; transform: translateY(-50%); background: var(--gray-900); color: white; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; z-index: 1000; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.sidebar:not(.collapsed) .sb-item[data-tooltip]:hover::after { display: none; }
/* Sidebar divider */
.sb-divider { height: 1px; background: var(--gray-200); margin: 4px 12px; flex-shrink: 0; }
.sidebar.collapsed .sb-divider { margin: 4px 8px; }
/* Sidebar project picker */
.sb-project-picker { margin: 4px 8px; flex-shrink: 0; position: relative; }
.sb-project-current { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--gray-200); background: white; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--gray-700); transition: all var(--duration-fast); width: 100%; text-align: left; font-family: inherit; }
.sb-project-current:hover { border-color: var(--primary); background: var(--primary-soft); }
.sb-project-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-project-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: white; border: 1px solid var(--gray-200); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 200; max-height: 240px; overflow-y: auto; padding: 4px; }
.sb-project-dropdown.show { display: block; }
.sb-proj-option { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 5px; font-size: 12px; color: var(--gray-600); cursor: pointer; transition: background 0.1s; text-decoration: none; }
.sb-proj-option:hover { background: var(--gray-50); color: var(--gray-900); }
.sidebar.collapsed .sb-project-picker { display: none; }
/* Sidebar bottom section */
.sb-bottom { margin-top: auto; border-top: 1px solid var(--gray-200); padding: 4px 0; flex-shrink: 0; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 2px 8px; border-radius: 6px; overflow: hidden; }
.sb-user:hover { background: var(--gray-50); }
.sb-avatar { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; color: var(--primary); flex-shrink: 0; }
.sb-user-info { overflow: hidden; white-space: nowrap; }
.sb-user-name { font-size: 13px; font-weight: 600; color: var(--gray-900); }
.sb-user-role { font-size: 11px; color: var(--gray-400); }
.sidebar.collapsed .sb-user-info { display: none; }
.sidebar.collapsed .sb-user { justify-content: center; padding: 10px 0; }
/* Top bar (minimal) */
.topbar { height: 48px; background: white; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; padding: 0 24px; flex-shrink: 0; position: sticky; top: 0; z-index: 50; }
.topbar-breadcrumb { font-size: 13px; color: var(--gray-500); }
.topbar-breadcrumb a { color: var(--gray-500); }
.topbar-breadcrumb a:hover { color: var(--primary); }
.topbar-breadcrumb .current { color: var(--gray-900); font-weight: 600; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.topbar-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--gray-600);
    cursor: pointer;
    transition: all var(--duration-fast);
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.topbar-icon:hover { background: var(--gray-100); color: var(--gray-900); }
.topbar-icon:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.topbar-icon svg { display: block; }
/* Notification dot — small red circle with white ring so it pops off the icon */
.topbar-badge {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 100px;
    background: var(--danger);
    color: white;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    line-height: 1;
}
/* Mobile hamburger in topbar */
.topbar-hamburger { display: none; width: 36px; height: 36px; border: none; background: none; cursor: pointer; border-radius: 6px; flex-direction: column; justify-content: center; align-items: center; gap: 4px; margin-right: 8px; }
.topbar-hamburger:hover { background: var(--gray-100); }
.topbar-hamburger span { display: block; width: 18px; height: 2px; background: var(--gray-600); border-radius: 1px; transition: all var(--duration-slow); }
/* ═══════════ MOBILE SIDEBAR ═══════════ */
@media (max-width:768px) {
    .sidebar { transform: translateX(-100%); z-index: 200; box-shadow: none; width: 280px; }
    .sidebar.mobile-open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.15); }
    .sidebar.collapsed { width: 280px; }
    .sidebar.collapsed .sb-item span:not(.sb-item-icon) { display: inline; }
    .sidebar.collapsed .sb-item { justify-content: flex-start; padding: 7px 12px; margin: 1px 8px; }
    .sidebar.collapsed .sb-item .sb-item-badge { display: inline; }
    .sidebar.collapsed .sb-section-label { font-size: 10px; text-align: left; padding: 8px 16px 4px; }
    .sidebar.collapsed .sb-section-label::after { display: none; }
    .sidebar.collapsed .sb-logo span { display: inline; }
    .sidebar.collapsed .sb-user-info { display: block; }
    .sidebar.collapsed .sb-user { justify-content: flex-start; padding: 10px 12px; }
    .sidebar.collapsed .sb-divider { margin: 4px 12px; }
    .app-main { margin-left: 0 !important; }
    .topbar-hamburger { display: flex; }
    .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 199; border: none; padding: 0; cursor: pointer; }
    .mobile-overlay.show { display: block; }
}
/* Legacy compat: hide old nav elements */
.navbar { display: none !important; }
.mobile-nav { display: none !important; }
/* Notification bell */

/* View Toggle */
.view-toggle { display: flex; gap: 4px; background: var(--gray-100); padding: 4px; border-radius: 8px; }
.view-tab { padding: 8px 16px; border-radius: 6px; background: transparent; border: none; font-size: 14px; font-weight: 500; cursor: pointer; transition: all var(--duration-base); display: flex; align-items: center; gap: 6px; color: var(--gray-600); }
.view-tab:hover { color: var(--gray-900); }
.view-tab.active { background: white; color: var(--gray-900); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
/* Project Cards Enhanced */
.project-card.at-risk { border: 2px solid var(--danger); }
.project-card.needs-attention { border: 2px solid var(--warning); }
.project-card.at-risk .card-stats { background: var(--color-danger-bg); }
.project-card.needs-attention .card-stats { background: var(--color-warning-bg); }
.project-card.on-hold { opacity: 0.75; }
.project-card.on-hold:hover { opacity: 1; }
.project-progress-bar { height: 4px; background: var(--gray-200); border-radius: 2px; overflow: hidden; }
.project-progress-fill { height: 100%; border-radius: 2px; transition: width var(--duration-slow); }
.project-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.project-tag { padding: 4px 8px; background: var(--gray-200); color: var(--gray-700); border-radius: 4px; font-size: 11px; font-weight: 600; }
.project-tag.active { background: var(--color-info-bg); color: var(--primary); }
.project-tag.at-risk { background: var(--color-danger-bg); color: var(--danger); }
.project-tag.on-hold { background: var(--gray-300); color: var(--gray-700); }
/* Dependency List */
.dependency-list { list-style: none; padding: 0; margin: 0; }
.dependency-item { padding: 12px; background: var(--gray-50); border-radius: 6px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.dependency-item.completed { opacity: 0.6; }
.dependency-item.completed::before { content: "✓"; color: var(--success); font-weight: 700; }
.dependency-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.dependency-icon.warning { color: var(--warning); }
.dependency-icon.success { color: var(--success); }
/* Chart Styles */
.chart-container { height: 300px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 20px 0; }
.chart-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chart-bar-fill { width: 100%; background: var(--primary); border-radius: 4px 4px 0 0; transition: height var(--duration-slow); }
.chart-bar-label { font-size: 11px; color: var(--gray-600); font-weight: 600; }
/* Time Period Selector */
.period-selector { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.period-btn { padding: 8px 16px; border-radius: 20px; background: white; border: 1px solid var(--gray-300); font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--duration-base); }
.period-btn:hover { border-color: var(--primary); color: var(--primary); }
.period-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
/* AI Learning Progress */
.ai-progress-card { background: linear-gradient(135deg, var(--primary-soft) 0%, var(--color-info-bg) 100%); border: 1px solid var(--color-info-border); }
.ai-progress-item { margin-bottom: 20px; }
.ai-progress-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.ai-progress-label { font-size: 14px; font-weight: 600; color: var(--gray-700); }
.ai-progress-value { font-size: 14px; font-weight: 700; color: var(--primary); }
.ai-progress-bar { height: 8px; background: rgba(255,255,255,0.7); border-radius: 4px; overflow: hidden; }
.ai-progress-fill { height: 100%; border-radius: 4px; }
.ai-progress-trend { font-size: 12px; color: var(--success); margin-top: 4px; }
/* File Upload Enhanced */
.upload-area { border: 2px dashed var(--gray-300); border-radius: 12px; padding: 48px 24px; text-align: center; background: var(--gray-50); cursor: pointer; transition: all var(--duration-base); }
.upload-area:hover, .upload-area.dragover { border-color: var(--primary); background: var(--primary-soft); }
.upload-area input[type="file"] { display: none; }
.upload-icon { width: 64px; height: 64px; margin: 0 auto 16px; color: var(--gray-400); }
.upload-title { font-size: 16px; font-weight: 600; color: var(--gray-900); margin-bottom: 8px; }
.upload-subtitle { font-size: 14px; color: var(--gray-600); margin-bottom: 16px; }
/* Animations */
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); } 100% { box-shadow: 0 0 0 20px rgba(37, 99, 235, 0); } }
.pulse { animation: pulse 2s infinite; }
.interactive-ripple:hover { animation: ripple 0.6s ease-out; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.slide-in { animation: slideIn 0.3s ease-out; }
/* Filter Pills */
.filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--primary); color: white; border-radius: 20px; font-size: 13px; font-weight: 500; }
.filter-pill-remove { cursor: pointer; opacity: 0.8; }
.filter-pill-remove:hover { opacity: 1; }
/* Drag Handle */
.drag-handle { cursor: grab; color: var(--gray-400); padding: 4px; }
.drag-handle:active { cursor: grabbing; }
/* Project Type Badges */
.project-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.project-tag { padding: 4px 8px; background: var(--gray-200); color: var(--gray-700); border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.project-tag.active { background: var(--color-info-bg); color: var(--primary); }
.project-tag.on-hold { background: var(--gray-300); color: var(--gray-700); }
/* Enhanced Project Cards */
.project-card {
    cursor: pointer;
    transition: all var(--duration-slow);
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
    /* The progress bar at the top sits flush with the card edge — overflow:hidden
       clips the progress bar to the rounded corners. */
}
.project-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.15); border-color: var(--primary); }
.project-card .progress-bar-top { height: 4px; background: linear-gradient(90deg, var(--success) 0%, var(--success) var(--progress), var(--gray-200) var(--progress), var(--gray-200) 100%); }
/* Projects-grid: responsive grid layout for the project cards on /projects.
   This was referenced in the markup but never defined in CSS, which caused
   the project cards to collapse into a vertical full-width stack with no
   container styling. Phase 12 added it. */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}
@media (max-width: 768px) {
    .projects-grid { grid-template-columns: 1fr; gap: 16px; }
}
.project-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; padding: 12px; background: var(--gray-50); border-radius: 8px; }
.project-info-cell { }
.project-info-cell .label { font-size: 11px; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.project-info-cell .value { font-size: 16px; font-weight: 700; color: var(--gray-900); }
.project-info-cell .subtext { font-size: 11px; color: var(--gray-600); }
.project-info-cell .subtext.success { color: var(--success); }
.project-info-cell .subtext.danger { color: var(--danger); }
/* Deal Detail Styles */
.deal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.deal-title-section h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.deal-company { font-size: 16px; color: var(--gray-600); }
.deal-value-badge { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; padding: 16px 24px; border-radius: 12px; text-align: center; }
.deal-value-badge .label { font-size: 12px; opacity: 0.9; margin-bottom: 4px; }
.deal-value-badge .value { font-size: 28px; font-weight: 700; }
.deal-timeline { border-left: 2px solid var(--gray-200); padding-left: 20px; margin-left: 8px; }
.deal-timeline-item { position: relative; padding-bottom: 20px; }
.deal-timeline-item::before { content: ''; position: absolute; left: -26px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 2px solid white; box-shadow: 0 0 0 2px var(--primary); }
.deal-timeline-item.completed::before { background: var(--success); box-shadow: 0 0 0 2px var(--success); }
.deal-timeline-date { font-size: 12px; color: var(--gray-500); margin-bottom: 4px; }
.deal-timeline-text { font-size: 14px; color: var(--gray-700); }
/* Probability Indicator */
.probability-meter { display: flex; align-items: center; gap: 12px; }
.probability-bar { flex: 1; height: 8px; background: var(--gray-200); border-radius: 4px; overflow: hidden; }
.probability-fill { height: 100%; border-radius: 4px; transition: width var(--duration-slow); }
.probability-fill.high { background: var(--success); }
.probability-fill.medium { background: var(--primary); }
.probability-fill.low { background: var(--warning); }
/* ======== MOBILE: TABLE OVERFLOW FALLBACK ========
   On viewports <= 768px, tables that exceed available width get a horizontal
   scroll instead of either breaking the layout or being crushed unreadable.
   This applies to ALL tables in the app so we don't have to per-table wrap
   each one in <div style="overflow-x:auto">.

   On the dashboard project-health table specifically, the per-column min-widths
   keep the table from collapsing into one mash of text on phones.

   Phase 6 audit identified 45 unwrapped tables — most of them inside .card
   bodies. The display:block + overflow-x:auto pattern is the standard fix
   used by Bootstrap, Tailwind, and most design systems. */
@media (max-width: 768px) {
    .card-body table,
    .container table,
    main table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        max-width: 100%;
    }
    /* Inside the scroll container, td/th can return to normal table cells */
    .card-body table > tbody,
    .card-body table > thead,
    .container table > tbody,
    .container table > thead,
    main table > tbody,
    main table > thead {
        display: table;
        width: 100%;
    }
    /* Tap targets: any <button> or <a class="btn"> sized smaller than 44x44 should
       grow on mobile. Use min-height/min-width so existing padding determines
       the rest. Excludes inline icon-only utility buttons inside fixed-position
       chrome (FAB, modal close X) which are already finger-sized. */
    .container button:not(.modal-close):not(.assistant-close):not(.unified-fab-btn),
    .container .btn,
    main button:not(.modal-close):not(.assistant-close):not(.unified-fab-btn),
    main .btn {
        min-height: 36px;  /* slight bump from default; combined w/ padding ≈ 44px */
    }
}

/* ======== AI ASSISTANT FAB ========
   Phase 7 simplified from a multi-option unified FAB to a single direct-action
   button that opens the AI Assistant. The .open / .unified-fab-menu / .unified-fab-option
   styles were deleted along with the command palette since there's no longer a
   second action to surface in a menu. */
.unified-fab { position:fixed; bottom:24px; right:24px; z-index:9990; }
.unified-fab-btn { width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg,var(--color-success-strong),var(--success)); color:white; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(22,163,74,0.35); transition:all var(--duration-slow); position:relative; z-index:2; }
.unified-fab-btn:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(22,163,74,0.45); }
.unified-fab-badge { position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; border-radius:100px; background:var(--danger); color:white; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid white; }
@media (max-width:768px) { .unified-fab { bottom:16px; right:16px; } .unified-fab-btn { width:48px; height:48px; border-radius:12px; } }
/* ======== AI ASSISTANT PANEL — Phase 8 redesign ========
   Design notes for future maintainers:
   - Panel widened from 400px to 440px (default) with an "expand" mode that goes 720px.
     Expanded mode uses fixed left position so it doesn't bump into the right edge of
     long monitors awkwardly.
   - Max-height is fluid (calc(100vh - 120px)) instead of fixed 540px so content
     gets the room available without scrolling within a small window.
   - Header gradient softened from full-saturation success-green to a subtle slate-on-white
     pattern. The panel's job is to host content; the header shouldn't compete with it.
   - Avatars on AI messages help users scan a long conversation at a glance.
   - Quick-prompts surface lives in a collapsible footer drawer, not inline. They don't
     disappear after first message — pin to bring them back.
   - Send button bumped to 40px tap target (was 36px).
*/
.assistant-panel {
    position:fixed; bottom:84px; right:24px; z-index:15001;
    width:440px; max-width:calc(100vw - 32px);
    height:auto; max-height:calc(100vh - 120px);
    background:white; border-radius:16px;
    box-shadow:0 24px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(15,23,42,0.06);
    display:none; flex-direction:column; overflow:hidden;
    animation:assistSlideUp var(--duration-base) cubic-bezier(0.34,1.4,0.64,1);
}
.assistant-panel.open { display:flex; }
.assistant-panel.expanded {
    width:720px; max-width:calc(100vw - 48px);
    max-height:calc(100vh - 80px);
    bottom:24px;
}
@keyframes assistSlideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }

.assistant-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px;
    background:white;
    border-bottom:1px solid var(--gray-100);
    color:var(--gray-900);
    flex-shrink:0;
}
.assistant-header-left { display:flex; align-items:center; gap:10px; min-width:0; }
.assistant-header-mark {
    width:32px; height:32px; border-radius:9px;
    background:linear-gradient(135deg, var(--color-success-strong), var(--success));
    color:white;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    box-shadow:0 2px 6px rgba(22,163,74,0.25);
}
.assistant-header-mark svg { width:16px; height:16px; }
.assistant-header-text { display:flex; flex-direction:column; min-width:0; }
.assistant-header-title { font-weight:600; font-size:14px; color:var(--gray-900); line-height:1.2; }
.assistant-header-usage { font-size:11px; color:var(--gray-500); margin-top:2px; }
.assistant-header-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.assistant-header-btn {
    width:32px; height:32px; border-radius:8px;
    background:transparent; border:none;
    color:var(--gray-500); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all var(--duration-fast);
}
.assistant-header-btn:hover { background:var(--gray-100); color:var(--gray-800); }
.assistant-header-btn svg { width:16px; height:16px; }
/* Hide expand button when already expanded (and vice versa) via .expanded scoping */
.assistant-panel.expanded .assistant-expand-btn .icon-expand { display:none; }
.assistant-panel:not(.expanded) .assistant-expand-btn .icon-collapse { display:none; }
.assistant-close { background:transparent; border:none; color:var(--gray-500); cursor:pointer; padding:4px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px; transition:all var(--duration-fast); }
.assistant-close:hover { background:var(--gray-100); color:var(--gray-900); }

/* Messages container — fluid height, generous padding */
.assistant-messages {
    flex:1; overflow-y:auto;
    padding:18px 16px;
    display:flex; flex-direction:column; gap:14px;
    background:var(--gray-50);
    scroll-behavior:smooth;
}
.assistant-messages::-webkit-scrollbar { width:8px; }
.assistant-messages::-webkit-scrollbar-track { background:transparent; }
.assistant-messages::-webkit-scrollbar-thumb { background:var(--gray-200); border-radius:4px; }
.assistant-messages::-webkit-scrollbar-thumb:hover { background:var(--gray-300); }

/* Message rows: AI messages have an avatar to the left, user messages don't */
.assistant-msg-row { display:flex; gap:8px; max-width:100%; }
.assistant-msg-row.user { justify-content:flex-end; }
.assistant-msg-avatar {
    width:28px; height:28px; border-radius:50%;
    background:linear-gradient(135deg, var(--color-success-strong), var(--success));
    color:white;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; align-self:flex-end;
    font-size:11px; font-weight:700;
    box-shadow:0 1px 3px rgba(22,163,74,0.25);
}
.assistant-msg-row.user .assistant-msg-avatar { display:none; }

.assistant-msg {
    font-size:14px; line-height:1.55;
    max-width:calc(100% - 36px);
    word-wrap:break-word;
    overflow-wrap:break-word;
}
.assistant-msg.user {
    background:var(--primary); color:white;
    padding:10px 14px;
    border-radius:16px 16px 4px 16px;
    box-shadow:0 1px 2px rgba(37,99,235,0.15);
}
.assistant-msg.ai {
    background:white; color:var(--gray-800);
    padding:10px 14px;
    border-radius:16px 16px 16px 4px;
    border:1px solid var(--gray-200);
    box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
.assistant-msg.ai strong { color:var(--gray-900); font-weight:600; }
.assistant-msg.ai a { color:var(--blue-700); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.assistant-msg.ai a:hover { color:var(--blue-800); }
.assistant-msg.system {
    align-self:center;
    font-size:11px; color:var(--gray-500);
    font-style:italic;
    padding:4px 10px;
    background:var(--gray-100);
    border-radius:8px;
}

/* Streaming caret — appears while tokens are still arriving */
.assistant-msg.streaming::after {
    content:''; display:inline-block;
    width:2px; height:14px;
    background:var(--gray-500);
    margin-left:2px; vertical-align:middle;
    animation:streamCaret 1s steps(2) infinite;
}
@keyframes streamCaret { 0%,50% { opacity:1; } 50.01%,100% { opacity:0; } }

.assistant-action-btn {
    display:inline-flex; align-items:center; gap:6px;
    margin-top:8px; padding:6px 14px;
    background:var(--primary); color:white;
    border-radius:8px;
    font-size:12px; font-weight:600;
    cursor:pointer; border:none;
    transition:all var(--duration-fast);
    min-height:32px;
}
.assistant-action-btn:hover { background:var(--primary-dark); transform:translateY(-1px); }
.assistant-action-btn:disabled { background:var(--gray-300); cursor:not-allowed; transform:none; }

/* Pre-stream typing dots */
.assistant-typing {
    display:flex; gap:4px;
    padding:12px 16px;
    background:white;
    border:1px solid var(--gray-200);
    border-radius:16px 16px 16px 4px;
    align-self:flex-start; align-items:center;
    box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
.assistant-typing span { width:6px; height:6px; background:var(--gray-400); border-radius:50%; animation:typingBounce 1.2s ease-in-out infinite; }
.assistant-typing span:nth-child(2) { animation-delay:0.15s; }
.assistant-typing span:nth-child(3) { animation-delay:0.3s; }
@keyframes typingBounce { 0%,60%,100% { transform:translateY(0); } 30% { transform:translateY(-4px); } }

/* Quick prompts drawer — collapsible, persists across the conversation */
.assistant-prompts-drawer {
    border-top:1px solid var(--gray-100);
    background:white;
    flex-shrink:0;
}
.assistant-prompts-toggle {
    width:100%; padding:8px 16px;
    background:none; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
    font-size:11px; font-weight:600; color:var(--gray-600);
    text-transform:uppercase; letter-spacing:0.06em;
    font-family:inherit;
    transition:background var(--duration-fast);
}
.assistant-prompts-toggle:hover { background:var(--gray-50); }
.assistant-prompts-toggle svg { width:12px; height:12px; transition:transform var(--duration-base); }
.assistant-prompts-drawer.collapsed .assistant-prompts-toggle svg { transform:rotate(-90deg); }
.assistant-prompts-list {
    display:flex; flex-direction:column; gap:6px;
    padding:4px 12px 12px;
    max-height:200px; overflow-y:auto;
    transition:max-height var(--duration-base) ease, padding var(--duration-base) ease;
}
.assistant-prompts-drawer.collapsed .assistant-prompts-list { max-height:0; padding-top:0; padding-bottom:0; overflow:hidden; }
.assistant-prompt-card {
    display:flex; align-items:center; gap:10px;
    padding:8px 12px;
    background:var(--gray-50);
    border:1px solid var(--gray-200);
    border-radius:10px;
    cursor:pointer; text-align:left;
    font-family:inherit; font-size:13px; color:var(--gray-800);
    transition:all var(--duration-fast);
    min-height:40px;
}
.assistant-prompt-card:hover { background:white; border-color:var(--primary); transform:translateX(2px); }
.assistant-prompt-card i { font-size:14px; flex-shrink:0; }

.assistant-input-area {
    display:flex; align-items:flex-end;
    padding:12px 14px;
    border-top:1px solid var(--gray-100);
    gap:8px; background:white;
    flex-shrink:0;
}
.assistant-input {
    flex:1; border:1px solid var(--gray-200);
    border-radius:12px;
    padding:10px 14px;
    font-size:14px; font-family:inherit;
    outline:none; resize:none;
    min-height:40px; max-height:120px;
    line-height:1.45;
    transition:border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.assistant-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,0.12); }
.assistant-input::placeholder { color:var(--gray-400); }

.assistant-send {
    width:40px; height:40px; border-radius:12px;
    background:var(--primary); color:white;
    border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all var(--duration-fast);
    flex-shrink:0;
}
.assistant-send:hover { background:var(--primary-dark); transform:translateY(-1px); }
.assistant-send:disabled { background:var(--gray-300); cursor:not-allowed; transform:none; }
.assistant-send svg { width:18px; height:18px; }

@media (max-width:768px) {
    .assistant-panel, .assistant-panel.expanded {
        left:12px; right:12px; bottom:12px;
        width:auto; max-width:none;
        max-height:calc(100vh - 24px);
    }
    .assistant-msg { font-size:13px; }
    .assistant-input { font-size:14px; /* keep at 14px+ to prevent iOS zoom on focus */ }
}

/* ======== LIVE TOAST NOTIFICATIONS ======== */
.toast-container { position:fixed; bottom:84px; right:24px; z-index:15000; display:flex; flex-direction:column-reverse; gap:8px; pointer-events:none; max-width:380px; }
.toast { background:white; border-radius:12px; padding:14px 16px; box-shadow:0 8px 32px rgba(0,0,0,0.12),0 0 0 1px rgba(0,0,0,0.04); display:flex; gap:12px; align-items:flex-start; pointer-events:auto; animation:toastIn 0.35s ease-out; opacity:1; transition:all var(--duration-slow); }
.toast.exiting { opacity:0; transform:translateX(100px); }
@keyframes toastIn { from { opacity:0; transform:translateY(16px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } }
.toast-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.toast-icon.success { background:var(--color-success-bg); color:#16a34a; }
.toast-icon.info { background:var(--color-info-bg); color:var(--primary); }
.toast-icon.warning { background:var(--color-warning-bg); color:var(--color-warning-strong); }
.toast-icon.ai { background:#f0fdf4; color:var(--color-success-strong); animation:iconGlow 1.5s ease-out; }
.toast-icon.success { background:var(--color-success-bg); color:#16a34a; animation:iconPulse 0.6s ease-out; }
@keyframes iconGlow { 0% { box-shadow:0 0 0 0 rgba(5,150,105,0.4); } 40% { box-shadow:0 0 0 8px rgba(5,150,105,0.0); } 100% { box-shadow:none; } }
@keyframes iconPulse { 0% { transform:scale(1); } 30% { transform:scale(1.15); } 100% { transform:scale(1); } }
.toast-body { flex:1; min-width:0; }
.toast-title { font-size:13px; font-weight:700; color:var(--gray-900); margin-bottom:2px; }
.toast-desc { font-size:12px; color:var(--gray-500); line-height:1.4; }
.toast-time { font-size:10px; color:var(--gray-400); margin-top:3px; }
.toast-close { background:none; border:none; color:var(--gray-400); cursor:pointer; font-size:14px; padding:2px; line-height:1; flex-shrink:0; }
.toast-close:hover { color:var(--gray-600); }
@media (max-width:768px) { .toast-container { bottom:72px; right:12px; left:12px; max-width:none; } }

/* Command palette (Cmd+K) was removed in Phase 7. CSS for .cmd-* classes
   was deleted along with the function. The AI Assistant covers what users
   would have used the palette for; sidebar nav covers the rest. */

/* ═══════════ GLOBAL FOUNDATION STYLES ═══════════ */
/* Container */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; border:none; text-decoration:none; transition:all var(--duration-base); font-family:inherit; touch-action:manipulation; }
.btn-primary { background:var(--primary); color:white; }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-1px); box-shadow:0 4px 12px rgba(37,99,235,0.3); }
.btn-secondary { background:white; color:var(--gray-700); border:1px solid var(--gray-300); }
.btn-secondary:hover { background:var(--gray-50); border-color:var(--gray-400); }
.btn-danger { background:var(--danger); color:white; }
.btn-danger:hover { background:var(--color-danger-strong); }
.btn-success { background:#16a34a; color:white; }
.btn-success:hover { background:var(--green-800); }
.btn-sm { padding:6px 12px; font-size:13px; }

/* Forms */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-weight:600; font-size:13px; color:var(--gray-600); margin-bottom:6px; }
.form-input, .form-textarea, .form-select { width:100%; padding:10px 14px; border:1px solid var(--gray-300); border-radius:8px; font-size:14px; font-family:inherit; background:white; color:var(--gray-900); transition:border-color var(--duration-base), box-shadow var(--duration-base); }
.form-input:focus, .form-textarea:focus, .form-select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
.form-input::placeholder { color:var(--gray-400); }
.form-textarea { resize:vertical; min-height:80px; }

/* Alerts */
.alert { padding:12px 16px; border-radius:8px; font-size:14px; font-weight:500; margin-bottom:16px; }
.alert-error { background:var(--red-50); color:var(--color-danger-strong); border:1px solid var(--color-danger-border); }
.alert-success { background:#f0fdf4; color:#16a34a; border:1px solid var(--color-success-border); }
.alert-warning { background:#fffbeb; color:var(--color-warning-strong); border:1px solid var(--color-warning-border); }
.alert-info { background:var(--primary-soft); color:var(--primary); border:1px solid var(--color-info-border); }

/* Auth Pages */
.auth-container { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; background:linear-gradient(135deg, #f0f5ff 0%, var(--gray-50) 50%, #fefce8 100%); }
.auth-card { background:white; border-radius:16px; box-shadow:0 4px 24px rgba(0,0,0,0.08); padding:40px; width:100%; max-width:420px; border:1px solid var(--gray-200); }
.auth-logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; color:var(--primary); margin-bottom:32px; }
.auth-logo svg { width:32px; height:32px; }
.auth-title { font-size:26px; font-weight:800; color:var(--gray-900); margin-bottom:6px; }
.auth-subtitle { font-size:14px; color:var(--gray-500); margin-bottom:24px; }
.auth-footer { text-align:center; margin-top:20px; font-size:14px; color:var(--gray-500); }
.auth-footer a { color:var(--primary); font-weight:600; }
.auth-footer a:hover { text-decoration:underline; }

/* Onboarding */
.ob-container { max-width:640px; margin:0 auto; padding:40px 24px; }
.ob-logo { display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:20px; color:var(--primary); margin-bottom:24px; }
.ob-logo svg { width:28px; height:28px; }
.ob-progress { height:6px; background:var(--gray-200); border-radius:100px; overflow:hidden; margin-bottom:12px; }
.ob-progress-fill { height:100%; background:var(--primary); border-radius:100px; transition:width 0.4s ease; }
.ob-steps { display:flex; justify-content:center; gap:16px; margin-bottom:32px; font-size:12px; color:var(--gray-400); }

/* Animation */
.animate-in { animation:animateIn 0.4s ease forwards; }
@keyframes animateIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }

/* Cards */
.card { background:white; border-radius:12px; border:1px solid var(--gray-200); box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.card-header { padding:16px 20px; border-bottom:1px solid var(--gray-100); display:flex; align-items:center; justify-content:space-between; }
.card-body { padding:20px; }

/* Stats */
.stat-card { background:white; border-radius:12px; border:1px solid var(--gray-200); padding:20px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.stat-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--gray-500); margin-bottom:4px; }
.stat-value { font-size:28px; font-weight:800; color:var(--gray-900); }

/* Badges */
.badge { display:inline-flex; align-items:center; padding:2px 10px; border-radius:100px; font-size:12px; font-weight:600; }
.badge-success { background:#d1fae5; color:#065f46; }
.badge-warning { background:var(--color-warning-bg); color:var(--color-warning-text); }
.badge-danger { background:var(--color-danger-bg); color:var(--color-danger-text); }
.badge-info { background:var(--color-info-bg); color:var(--primary-dark); }
.badge-gray { background:var(--gray-100); color:var(--gray-600); }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:10000; display:none; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(4px); }
.modal-overlay.active { display:flex; }
.modal { background:white; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,0.15); max-width:560px; width:100%; max-height:85vh; overflow-y:auto; }
.modal-header { padding:20px 24px; border-bottom:1px solid var(--gray-100); display:flex; align-items:center; justify-content:space-between; }
.modal-header h2 { font-size:18px; font-weight:700; }
.modal-close { background:none; border:none; cursor:pointer; color:var(--gray-400); font-size:20px; padding:4px; }
.modal-close:hover { color:var(--gray-600); }
.modal-body { padding:24px; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--gray-100); display:flex; justify-content:flex-end; gap:8px; }

/* Tables */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { text-align:left; padding:10px 16px; font-size:12px; font-weight:600; color:var(--gray-500); text-transform:uppercase; letter-spacing:0.05em; border-bottom:2px solid var(--gray-200); }
.data-table td { padding:12px 16px; border-bottom:1px solid var(--gray-100); font-size:14px; }
.data-table tr:hover { background:var(--gray-50); }

/* Page Headers */
.page-header { margin-bottom:24px; }
.page-title { font-size:24px; font-weight:800; color:var(--gray-900); }
.page-subtitle { font-size:14px; color:var(--gray-500); margin-top:4px; }

/* Responsive */
@media (max-width:768px) {
    .auth-card { padding:28px 20px; }
    .auth-title { font-size:22px; }
}

/* ═══════════ METRICS BAR (Dashboard) ═══════════ */
.metrics-bar { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin-bottom:20px; }
.metric-card { background:white; border:1px solid var(--gray-200); border-radius:10px; padding:14px 12px; text-align:center; }
.metric-card-link { cursor:pointer; transition:all var(--duration-fast) ease; }
.metric-card-link:hover { border-color:var(--primary); box-shadow:0 4px 12px rgba(37,99,235,0.12); transform:translateY(-2px); background:#f8faff; }
.metric-card-link:hover .metric-label { color:var(--primary); }
.metric-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--gray-500); margin-bottom:2px; }
.metric-value { font-size:22px; font-weight:800; color:var(--gray-900); }
@media (max-width:1024px) { .metrics-bar { grid-template-columns:repeat(4,1fr); } .metrics-bar .metric-card:nth-child(n+5) { display:none; } }
@media (max-width:640px) { .metrics-bar { grid-template-columns:repeat(3,1fr); } .metrics-bar .metric-card:nth-child(n+4) { display:none; } }

/* Card title (used in dashboard cards) */
.card-title { font-size:16px; font-weight:700; color:var(--gray-900); }

/* Info grid (two-column form layouts) */
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px) { .info-grid { grid-template-columns:1fr; } }

/* ═══════════ DASHBOARD V2 (Command Center redesign) ═══════════ */
/* Greeting band */
.dash-greeting { margin-bottom:24px; }
.dash-date-line { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--gray-500); margin-bottom:8px; }
.dash-greeting-row { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.dash-greeting-text { flex:1; min-width:0; }
.dash-greeting-title { font-size:32px; font-weight:700; color:var(--gray-900); margin-bottom:8px; line-height:1.15; letter-spacing:-0.01em; }
.dash-greeting-summary { font-size:15px; color:var(--gray-600); line-height:1.55; max-width:780px; }
.dash-greeting-summary strong { color:var(--gray-900); font-weight:600; }
.dash-time-saved-pill { display:flex; align-items:center; gap:6px; padding:6px 12px; background:var(--color-success-bg); color:var(--color-success-text); border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap; }
.dash-time-saved-pill svg { width:14px; height:14px; }

/* Metric cards V2 - left aligned with delta */
.dash-metrics { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:24px; }
.dash-metric { background:white; border:1px solid var(--canvas-border); border-radius:12px; padding:16px 18px; cursor:pointer; transition:all var(--duration-fast) ease; text-decoration:none; color:inherit; display:block; box-shadow:0 1px 2px rgba(15, 23, 42, 0.04); }
.dash-metric:hover { border-color:var(--gray-300); box-shadow:0 4px 12px rgba(15, 23, 42, 0.08); transform:translateY(-1px); }
.dash-metric-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; }
.dash-spark { width:60px; height:18px; flex-shrink:0; opacity:0.7; }
.dash-metric-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--gray-500); }
.dash-metric-value { font-size:30px; font-weight:700; color:var(--gray-900); line-height:1.1; margin-bottom:6px; letter-spacing:-0.02em; }
.dash-metric-delta { font-size:12px; font-weight:500; color:var(--gray-500); display:flex; align-items:center; gap:4px; }
.dash-metric-delta.up { color:var(--color-success-strong); }
.dash-metric-delta.down { color:var(--danger); }
.dash-metric-delta.warn { color:var(--warning); }
@media (max-width:1100px) { .dash-metrics { grid-template-columns:repeat(3,1fr); } .dash-metrics .dash-metric:nth-child(n+4) { display:none; } }
@media (max-width:640px) { .dash-metrics { grid-template-columns:repeat(2,1fr); } .dash-metrics .dash-metric:nth-child(n+3) { display:none; } .dash-greeting-title { font-size:24px; } .dash-greeting-row { flex-direction:column; } }

/* Two-column row utility */
.dash-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width:1024px) { .dash-row-2 { grid-template-columns:1fr; } }

/* Dashboard cards - softer than default .card, designed to float on --canvas */
.dash-card { background:white; border:1px solid var(--canvas-border); border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(15, 23, 42, 0.04); }
.dash-card-header { padding:16px 20px; border-bottom:1px solid var(--gray-100); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dash-card-header-left { display:flex; align-items:center; gap:10px; min-width:0; }
.dash-card-icon { width:28px; height:28px; min-width:28px; border-radius:7px; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:13px; }
.dash-card-icon.warn { background:var(--color-warning-bg); color:var(--color-warning-text); }
.dash-card-icon.danger { background:var(--color-danger-bg); color:var(--danger); }
.dash-card-icon.success { background:var(--color-success-bg); color:var(--color-success-strong); }
.dash-card-title { font-size:14px; font-weight:700; color:var(--gray-900); }
.dash-card-meta { font-size:11px; color:var(--gray-500); margin-top:1px; }
.dash-card-body { padding:16px 20px; }
.dash-card-body.tight { padding:8px 16px; }

/* Risk severity pill */
.dash-risk-pill { padding:3px 10px; border-radius:20px; font-size:10px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; }
.dash-risk-pill.low { background:var(--color-success-bg); color:var(--color-success-text); }
.dash-risk-pill.moderate { background:var(--color-info-bg); color:var(--primary-dark); }
.dash-risk-pill.elevated { background:var(--color-warning-bg); color:var(--color-warning-text); }
.dash-risk-pill.high { background:var(--color-danger-bg); color:var(--color-danger-text); }
.dash-risk-pill.critical { background:#7f1d1d; color:white; }
.dash-risk-pill.unknown { background:var(--gray-100); color:var(--gray-600); }

/* Briefing card */
.dash-briefing-summary { font-size:14px; color:var(--gray-700); line-height:1.6; margin-bottom:16px; }
.dash-briefing-list { list-style:none; padding:0; margin:0; }
.dash-briefing-list li { font-size:13px; color:var(--gray-700); line-height:1.55; padding:6px 0 6px 18px; position:relative; }
.dash-briefing-list li::before { content:''; position:absolute; left:4px; top:14px; width:4px; height:4px; background:var(--gray-400); border-radius:50%; }
.dash-briefing-list li strong { color:var(--gray-900); font-weight:600; }

/* Inset gray zone - sub-region inside a white card. Used for action zones,
   list bodies, and any region that should feel like a distinct surface
   nested inside its parent card. The inset color matches the canvas family. */
.dash-card-inset { background:var(--inset); border-radius:10px; padding:14px 16px; margin-top:14px; }
.dash-card-inset-tight { background:var(--inset); border-radius:0; padding:14px 20px; margin:0 -20px -16px; }

.dash-briefing-actions { background:var(--inset); border-radius:10px; padding:14px 16px; margin-top:16px; }
.dash-briefing-actions-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--gray-500); margin-bottom:10px; }
.dash-action-row { display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13px; color:var(--gray-700); }
.dash-action-row a { color:var(--gray-700); text-decoration:none; flex:1; }
.dash-action-row a:hover { color:var(--primary); }
.dash-action-checkbox { width:16px; height:16px; min-width:16px; border:1.5px solid var(--gray-300); border-radius:4px; cursor:pointer; flex-shrink:0; transition:all 0.12s; background:white; }
.dash-action-checkbox:hover { border-color:var(--primary); }
.dash-action-row.urgent .dash-action-checkbox { border-color:var(--warning); background:#fffbeb; }
.dash-action-empty { padding:8px 0 0; font-size:13px; color:var(--success); display:flex; align-items:center; gap:8px; }

/* Risk intelligence list */
.dash-risk-summary { font-size:14px; color:var(--gray-700); line-height:1.6; margin-bottom:16px; }
.dash-risk-item { padding:10px 0; border-bottom:1px solid var(--gray-100); }
.dash-risk-item:last-child { border-bottom:none; }
.dash-risk-item-title { font-size:13px; font-weight:600; color:var(--gray-900); margin-bottom:3px; line-height:1.4; }
.dash-risk-item-meta { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--gray-500); }
.dash-risk-item-meta .sep { color:var(--gray-300); margin:0 6px; }

/* Overdue rows with inline actions */
.dash-overdue-meta { font-size:12px; color:var(--gray-600); margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--gray-100); }
.dash-overdue-meta .crit { color:var(--danger); font-weight:600; }
.dash-overdue-meta .wait { color:var(--warning); font-weight:600; }
.dash-overdue-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--gray-100); }
.dash-overdue-row:last-child { border-bottom:none; }
.dash-overdue-info { flex:1; min-width:0; }
.dash-overdue-row-meta { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--gray-500); margin-bottom:3px; }
.dash-overdue-row-title { font-size:13px; font-weight:500; color:var(--gray-900); line-height:1.3; }
.dash-overdue-row-title a { color:inherit; text-decoration:none; }
.dash-overdue-row-title a:hover { color:var(--primary); }
.dash-overdue-row-blocks { font-size:11px; color:var(--danger); margin-top:2px; }
.dash-action-btn { padding:6px 12px; border-radius:6px; border:1px solid var(--gray-300); background:white; font-size:12px; font-weight:500; color:var(--gray-700); cursor:pointer; white-space:nowrap; transition:all 0.12s; text-decoration:none; }
.dash-action-btn:hover { border-color:var(--primary); color:var(--primary); background:#f8faff; }

/* This Week timeline */
.dash-week-row { display:flex; align-items:flex-start; gap:14px; padding:10px 0; border-bottom:1px solid var(--gray-100); }
.dash-week-row:last-child { border-bottom:none; }
.dash-week-day { width:60px; min-width:60px; font-size:11px; font-weight:600; color:var(--gray-500); padding-top:1px; }
.dash-week-info { flex:1; min-width:0; }
.dash-week-title { font-size:13px; font-weight:500; color:var(--gray-900); line-height:1.3; margin-bottom:2px; }
.dash-week-title a { color:inherit; text-decoration:none; }
.dash-week-title a:hover { color:var(--primary); }
.dash-week-sub { font-size:11px; color:var(--gray-500); }
.dash-priority-pill { padding:2px 8px; border-radius:12px; font-size:9px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; flex-shrink:0; align-self:flex-start; margin-top:1px; }
.dash-priority-pill.high { background:var(--color-danger-bg); color:var(--color-danger-text); }
.dash-priority-pill.med { background:var(--color-warning-bg); color:var(--color-warning-text); }
.dash-priority-pill.low { background:var(--gray-100); color:var(--gray-600); }

/* Portfolio donuts */
.dash-portfolio-grid { display:grid; grid-template-columns:1.4fr 4fr; gap:24px; align-items:center; }
@media (max-width:900px) { .dash-portfolio-grid { grid-template-columns:1fr; } }
.dash-donut-avg { display:flex; flex-direction:column; align-items:center; padding:8px; }
.dash-donut-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px 12px; }
@media (max-width:640px) { .dash-donut-grid { grid-template-columns:repeat(2,1fr); } }
.dash-donut-cell { display:flex; flex-direction:column; align-items:center; text-decoration:none; color:inherit; padding:6px; border-radius:8px; transition:background 0.12s; }
.dash-donut-cell:hover { background:var(--gray-50); }
.dash-donut-svg { position:relative; }
.dash-donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.dash-donut-num { font-size:20px; font-weight:700; color:var(--gray-900); line-height:1; }
.dash-donut-num-big { font-size:32px; font-weight:700; color:var(--gray-900); line-height:1; }
.dash-donut-denom { font-size:11px; color:var(--gray-400); margin-top:2px; }
.dash-donut-denom-big { font-size:13px; color:var(--gray-400); margin-top:3px; }
.dash-donut-label { font-size:11px; color:var(--gray-700); margin-top:8px; text-align:center; max-width:90px; line-height:1.3; }
.dash-donut-sub { font-size:10px; color:var(--gray-500); margin-top:2px; }
.dash-donut-avg-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--gray-500); margin-top:10px; }
.dash-donut-avg-sub { font-size:11px; color:var(--success); margin-top:2px; }
.dash-portfolio-legend { display:flex; align-items:center; gap:14px; font-size:11px; color:var(--gray-500); }
.dash-portfolio-legend .dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:5px; vertical-align:middle; }

/* Pulse strip - compact secondary surveillance */
.dash-pulse-strip { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:16px; }
@media (max-width:640px) { .dash-pulse-strip { grid-template-columns:1fr; } }
.dash-pulse-card { background:white; border:1px solid var(--canvas-border); border-radius:10px; padding:14px 16px; box-shadow:0 1px 2px rgba(15, 23, 42, 0.04); }
.dash-pulse-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.dash-pulse-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--gray-600); }
.dash-pulse-link { font-size:11px; color:var(--primary); text-decoration:none; font-weight:500; }
.dash-pulse-row { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:12px; color:var(--gray-700); }
.dash-pulse-row a { color:inherit; text-decoration:none; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-pulse-row a:hover { color:var(--primary); }
.dash-pulse-row .meta { font-size:10px; color:var(--gray-500); }
.dash-pulse-empty { font-size:12px; color:var(--gray-500); padding:8px 0; text-align:center; }

/* Project health table */
.dash-table-wrap { background:white; border:1px solid var(--canvas-border); border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(15, 23, 42, 0.04); }
.dash-table { width:100%; border-collapse:collapse; }
.dash-table thead th { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--gray-500); padding:12px 16px; text-align:left; border-bottom:1px solid var(--gray-200); background:var(--gray-50); }
.dash-table tbody td { padding:12px 16px; font-size:13px; color:var(--gray-700); border-bottom:1px solid var(--gray-100); }
.dash-table tbody tr:last-child td { border-bottom:none; }
.dash-table tbody tr { cursor:pointer; transition:background 0.1s; }
.dash-table tbody tr:hover { background:var(--gray-50); }
.dash-table-name { font-weight:600; color:var(--gray-900); }
.dash-progress-track { width:100px; height:6px; background:var(--gray-100); border-radius:3px; overflow:hidden; }
.dash-progress-fill { height:100%; border-radius:3px; }
.dash-status-pill { padding:2px 8px; border-radius:10px; font-size:10px; font-weight:600; }
.dash-status-pill.on-track { background:var(--color-success-bg); color:var(--color-success-text); }
.dash-status-pill.monitor { background:var(--color-warning-bg); color:var(--color-warning-text); }
.dash-status-pill.at-risk { background:var(--color-danger-bg); color:var(--color-danger-text); }
/* Tables that include inline donut rings need slightly more vertical room */
.dash-table-with-rings tbody td { padding:14px 16px; }
.dash-table-with-rings tbody td:first-child { padding:10px 16px; }

/* Top toolbar buttons */
.dash-toolbar { display:flex; gap:8px; flex-wrap:wrap; }
/* When toolbar lives in the global topbar, make buttons more compact */
.topbar .dash-toolbar { flex-wrap:nowrap; gap:6px; }
.topbar .dash-tool-btn { padding:5px 11px; font-size:12px; box-shadow:none; }
.topbar .dash-tool-btn svg { width:13px; height:13px; }
.dash-tool-btn { padding:7px 14px; border-radius:7px; border:1px solid var(--canvas-border); background:white; font-size:13px; font-weight:500; color:var(--gray-700); cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all 0.12s; text-decoration:none; box-shadow:0 1px 2px rgba(15, 23, 42, 0.04); }
.dash-tool-btn:hover { border-color:var(--gray-300); background:#f8f9fb; }
.dash-tool-btn.primary { background:var(--gray-900); border-color:var(--gray-900); color:white; }
.dash-tool-btn.primary:hover { background:var(--gray-700); border-color:var(--gray-700); }
.dash-tool-btn svg { width:14px; height:14px; }

/* ═══════════ NOTIFICATION DROPDOWN ═══════════ */
.nav-notification { position:relative; cursor:pointer; display:flex; align-items:center; padding:6px; border-radius:6px; transition:background var(--duration-base); }
.nav-notification:hover { background:var(--gray-100); }
.nav-notification svg { color:var(--gray-600); }
.notification-badge { position:absolute; top:0; right:0; min-width:16px; height:16px; border-radius:100px; background:var(--danger); color:white; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.notification-dropdown { position:absolute; top:calc(100% + 8px); right:0; width:340px; background:white; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,0.15); border:1px solid var(--gray-200); display:none; z-index:10000; overflow:hidden; }
.notification-dropdown.show { display:block; }
.notification-header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--gray-200); font-weight:700; font-size:14px; color:var(--gray-900); }
.notification-item { padding:12px 16px; border-bottom:1px solid var(--gray-100); cursor:pointer; transition:background var(--duration-fast); }
.notification-item:hover { background:var(--gray-50); }
.notification-item.unread { background:var(--primary-soft); border-left:3px solid var(--primary); }
.notification-item-title { font-size:13px; font-weight:600; color:var(--gray-900); margin-bottom:2px; }
.notification-item-text { font-size:12px; color:var(--gray-600); line-height:1.4; }
.notification-item-time { font-size:11px; color:var(--gray-400); margin-top:4px; }
.notification-empty { text-align:center; padding:24px 16px; color:var(--gray-400); font-size:13px; }

/* ═══════════ USER MENU DROPDOWN ═══════════ */
.user-menu { position:relative; }
.user-avatar { width:32px; height:32px; border-radius:50%; background:var(--primary); color:white; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; cursor:pointer; transition:box-shadow var(--duration-base); }
.user-avatar:hover { box-shadow:0 0 0 3px rgba(37,99,235,0.2); }
.user-dropdown { position:absolute; top:calc(100% + 8px); right:0; width:200px; background:white; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.12); border:1px solid var(--gray-200); padding:4px; display:none; z-index:10000; }
.user-dropdown.show { display:block; }
.user-dropdown a { display:block; padding:8px 12px; border-radius:6px; font-size:13px; font-weight:500; color:var(--gray-700); transition:background var(--duration-fast); }
.user-dropdown a:hover { background:var(--gray-50); }

/* Nav settings icon */
.nav-settings { display:flex; align-items:center; padding:6px; border-radius:6px; transition:background var(--duration-base); }
.nav-settings:hover { background:var(--gray-100); }
.nav-settings svg { color:var(--gray-500); }

/* ═══════════ MODAL EXTRAS ═══════════ */
.modal-title { font-size:18px; font-weight:700; color:var(--gray-900); }
.modal-actions { padding:16px 24px; border-top:1px solid var(--gray-100); display:flex; justify-content:flex-end; gap:8px; }

/* ═══════════ RESPONSIVE DASHBOARD ═══════════ */
@media (max-width:1024px) {
    .container > div[style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns:1fr 1fr !important; }
}
@media (max-width:768px) {
    .container > div[style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns:1fr !important; }
    .container > div[style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns:1fr !important; }
    .page-header div[style*="display:flex;justify-content:space-between"] { flex-direction:column; gap:12px; }
}

/* ═══════════ TASK LIST ═══════════ */
.task-item { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-bottom:1px solid var(--gray-100); text-decoration:none; color:inherit; transition:background var(--duration-fast); cursor:pointer; }
.task-item:hover { background:var(--gray-50); }
.task-item.overdue { border-left:3px solid var(--danger); }
.task-checkbox { width:20px; height:20px; border:2px solid var(--gray-300); border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; font-size:12px; color:transparent; transition:all var(--duration-base); }
.task-checkbox.completed { background:var(--success); border-color:var(--success); color:white; }
.task-content { flex:1; min-width:0; }
.task-title { font-size:14px; font-weight:600; color:var(--gray-900); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.task-meta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.task-meta-item { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--gray-500); }
.task-meta-item svg { color:var(--gray-400); flex-shrink:0; }

/* ═══════════ STATUS & PRIORITY BADGES ═══════════ */
.status-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:100px; font-size:12px; font-weight:600; }
.status-badge.status-pending { background:var(--color-warning-bg); color:var(--color-warning-text); }
.status-badge.status-in-progress { background:var(--color-info-bg); color:var(--primary-dark); }
.status-badge.status-completed { background:#d1fae5; color:#065f46; }
.status-badge.status-blocked { background:var(--color-danger-bg); color:var(--color-danger-text); }
.status-badge.status-on-hold { background:var(--gray-100); color:var(--gray-600); }
.status-badge.status-review { background:#ede9fe; color:#5b21b6; }

.priority-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:100px; font-size:12px; font-weight:600; }
.priority-badge.priority-critical { background:var(--color-danger-bg); color:var(--color-danger-text); }
.priority-badge.priority-high { background:#ffedd5; color:#9a3412; }
.priority-badge.priority-medium { background:var(--color-warning-bg); color:var(--color-warning-text); }
.priority-badge.priority-low { background:#d1fae5; color:#065f46; }

.health-badge { display:inline-flex; padding:4px 12px; border-radius:100px; font-size:13px; font-weight:700; }
.health-badge.good { background:#d1fae5; color:#065f46; }
.health-badge.warning { background:var(--color-warning-bg); color:var(--color-warning-text); }
.health-badge.critical { background:var(--color-danger-bg); color:var(--color-danger-text); }

/* ═══════════ PROGRESS BAR ═══════════ */
.progress-bar { height:6px; background:var(--gray-200); border-radius:100px; overflow:hidden; }
.progress-fill { height:100%; background:var(--primary); border-radius:100px; transition:width 0.4s ease; }

/* ═══════════ CONFIDENCE BAR ═══════════ */
.confidence-bar { display:flex; align-items:center; gap:8px; }
.confidence-fill { flex:1; height:6px; background:var(--gray-200); border-radius:100px; overflow:hidden; }
.confidence-fill-inner { height:100%; border-radius:100px; transition:width var(--duration-slow); }
.confidence-fill-inner.high { background:var(--success); }
.confidence-fill-inner.medium { background:var(--warning); }
.confidence-fill-inner.low { background:var(--danger); }

/* ═══════════ TABLES ═══════════ */
.table { width:100%; border-collapse:collapse; }
.table th { text-align:left; padding:10px 16px; font-size:12px; font-weight:600; color:var(--gray-500); text-transform:uppercase; letter-spacing:0.05em; border-bottom:2px solid var(--gray-200); background:var(--gray-50); }
.table td { padding:12px 16px; border-bottom:1px solid var(--gray-100); font-size:14px; color:var(--gray-700); }
.table tr:hover { background:var(--gray-50); }
.table tr:last-child td { border-bottom:none; }
/* ═══════════ RESPONSIVE TABLES ═══════════ */
@media (max-width:768px) {
    .table thead { display:none; }
    .table tbody tr { display:block; padding:12px 16px; margin-bottom:8px; border:1px solid var(--gray-200); border-radius:8px; background:white; position:relative; }
    .table tbody tr:hover { background:var(--gray-50); }
    .table td { display:flex; align-items:center; justify-content:space-between; padding:5px 0; border-bottom:none; font-size:13px; }
    .table td:first-child { font-weight:600; font-size:14px; padding-bottom:6px; border-bottom:1px solid var(--gray-100); margin-bottom:4px; padding-top:0; display:block; }
    .table td:last-child { padding-bottom:0; }
    .table td:empty { display:none; }
    .table td[data-label]::before { content:attr(data-label); font-size:11px; font-weight:600; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.04em; margin-right:auto; padding-right:12px; flex-shrink:0; }
    .table td:first-child[data-label]::before { display:none; }
    .card-body { padding:8px !important; }
    .card-body > .table { border:none; }
    /* Mobile task items */
    .task-item { padding:12px; gap:8px; }
    .task-content { min-width:0; }
    .task-title { white-space:normal; font-size:13px; }
    .task-meta { gap:6px 10px; }
    .task-meta-item { font-size:11px; }
    .task-item .progress-bar { width:60px; }
    /* Mobile two-column grids → single column */
    div[style*="grid-template-columns:1fr 340px"],
    div[style*="grid-template-columns:1fr 280px"],
    div[style*="grid-template-columns:2fr 1fr"] { grid-template-columns:1fr !important; }
    /* Mobile metrics bar: 2 columns, show 4 max */
    .metrics-bar { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
    .metrics-bar .metric-card:nth-child(n+5) { display:none; }
    .metric-card { padding:12px 10px; }
    .metric-value { font-size:22px; }
    /* Mobile page headers */
    .page-header { flex-direction:column; gap:12px; align-items:flex-start !important; }
    .page-header > div:last-child { width:100%; }
    .page-header .btn { font-size:12px; padding:6px 12px; }
    /* Mobile info grids */
    .info-grid { grid-template-columns:1fr !important; gap:8px !important; }
    /* Container padding */
    .container { padding:0 12px; }
    /* Hide action button text on very small screens, show icons only */
    @media (max-width:480px) {
        .btn span.btn-text { display:none; }
        .metrics-bar { grid-template-columns:1fr 1fr !important; }
        .metrics-bar .metric-card:nth-child(n+3) { display:none; }
    }
}

/* ═══════════ FILTERS BAR ═══════════ */
.filters-bar { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.filter-select { padding:8px 32px 8px 12px; border:1px solid var(--gray-300); border-radius:8px; font-size:13px; font-weight:500; color:var(--gray-700); background:white url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='%236b7280' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E") no-repeat right 10px center/12px; appearance:none; cursor:pointer; transition:border-color var(--duration-base); font-family:inherit; }
.filter-select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
.search-input { padding:8px 12px 8px 36px; border:1px solid var(--gray-300); border-radius:8px; font-size:13px; font-weight:500; color:var(--gray-700); background:white url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='%239ca3af' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z'/%3E%3C/svg%3E") no-repeat 10px center/16px; transition:border-color var(--duration-base); font-family:inherit; }
.search-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
.search-input::placeholder { color:var(--gray-400); }

/* ═══════════ EMPTY STATE ═══════════ */
.empty-state { text-align:center; padding:48px 24px; }
.empty-state-title { font-size:16px; font-weight:700; color:var(--gray-900); margin-bottom:6px; }
.empty-state-text { font-size:14px; color:var(--gray-500); margin-bottom:16px; max-width:400px; margin-left:auto; margin-right:auto; }

/* ═══════════ AI LOADING OVERLAY ═══════════ */
/* Full-screen modal shown while server-side AI calls run. Stays up until the
   redirect that ends the form post arrives. Backdrop is opaque enough to
   discourage clicks on stale UI but allows the page beneath to remain visible
   in case the overlay fails to render (defensive). */
.ai-loading-overlay { position:fixed; inset:0; z-index:99999; background:rgba(15,23,42,0.55); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:24px; animation:aiLoadingFade 0.25s ease; }
@keyframes aiLoadingFade { from { opacity:0; } to { opacity:1; } }
.ai-loading-card { background:white; border-radius:18px; box-shadow:0 24px 64px rgba(0,0,0,0.4); padding:40px 36px; max-width:440px; width:100%; text-align:center; animation:aiLoadingPop 0.35s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes aiLoadingPop { from { opacity:0; transform:translateY(16px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } }
.ai-loading-icon { font-size:42px; margin-bottom:12px; line-height:1; }
.ai-loading-title { font-size:20px; font-weight:700; color:var(--gray-900); margin-bottom:8px; }
.ai-loading-stage { font-size:14px; color:var(--gray-600); margin-bottom:20px; min-height:21px; transition:opacity var(--duration-base); }
.ai-loading-bar { height:6px; background:var(--gray-100); border-radius:100px; overflow:hidden; margin-bottom:8px; }
.ai-loading-fill { height:100%; background:linear-gradient(90deg,var(--primary),#60a5fa); border-radius:100px; transition:width 0.6s ease; }
.ai-loading-pct { font-size:12px; font-weight:600; color:var(--primary); margin-bottom:18px; }
.ai-loading-hint { font-size:12px; color:var(--gray-500); padding-top:14px; border-top:1px solid var(--gray-100); }
@media (prefers-reduced-motion: reduce) {
    .ai-loading-overlay, .ai-loading-card { animation:none; }
    .ai-loading-fill { transition:none; }
}

/* ═══════════ CONFIRM MODAL (window.confirm replacement) ═══════════ */
/* Single shared modal injected by base_page() that replaces every native
   browser confirm() across the app. Forms and links opt in via
   data-mm-confirm="message". Esc and outside-click cancel; Enter confirms. */
.mm-confirm-overlay { position:fixed; inset:0; z-index:99998; background:rgba(15,23,42,0.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; animation:aiLoadingFade 0.2s ease; }
.mm-confirm-card { background:white; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,0.25); padding:32px 28px; max-width:420px; width:100%; text-align:center; animation:aiLoadingPop 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.mm-confirm-icon { width:56px; height:56px; border-radius:50%; background:var(--primary-soft); color:var(--primary); font-size:24px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.mm-confirm-icon.danger { background:var(--color-danger-bg); color:var(--danger); }
.mm-confirm-title { font-size:18px; font-weight:700; color:var(--gray-900); margin-bottom:8px; }
.mm-confirm-body { font-size:14px; color:var(--gray-600); line-height:1.5; margin-bottom:24px; }
.mm-confirm-actions { display:flex; gap:8px; justify-content:center; }
.mm-confirm-btn { padding:10px 20px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:all var(--duration-fast); font-family:inherit; }
.mm-confirm-cancel { background:white; color:var(--gray-700); border-color:var(--gray-300); }
.mm-confirm-cancel:hover { background:var(--gray-50); border-color:var(--gray-400); }
.mm-confirm-ok { background:var(--primary); color:white; }
.mm-confirm-ok:hover { background:var(--primary-dark); }
.mm-confirm-ok.danger { background:var(--danger); }
.mm-confirm-ok.danger:hover { background:var(--red-800); }
.mm-confirm-btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
    .mm-confirm-overlay, .mm-confirm-card { animation:none; }
}

/* ═══════════ COLLAPSIBLE SECTIONS ═══════════ */
.collapse-section { border:1px solid var(--gray-200); border-radius:8px; margin-bottom:12px; overflow:hidden; }
.collapse-toggle { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--gray-50); cursor:pointer; user-select:none; font-size:14px; font-weight:600; color:var(--gray-700); transition:background var(--duration-fast); }
.collapse-toggle:hover { background:var(--gray-100); }
.collapse-toggle .chevron { transition:transform var(--duration-base); font-size:12px; color:var(--gray-400); }
.collapse-toggle.open .chevron { transform:rotate(180deg); }
.collapse-body { max-height:0; overflow:hidden; transition:max-height var(--duration-slow) ease; }
.collapse-body.open { max-height:none; }
.collapse-body-inner { padding:16px; }

/* ═══════════ INFO ITEMS (Detail pages) ═══════════ */
.info-item { padding:12px 0; border-bottom:1px solid var(--gray-100); }
.info-item:last-child { border-bottom:none; }
.info-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--gray-500); margin-bottom:2px; }
.info-value { font-size:15px; font-weight:600; color:var(--gray-900); }

/* ═══════════ TIMELINE (Follow-up history) ═══════════ */
.timeline-item { display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--gray-100); }
.timeline-item:last-child { border-bottom:none; }
.timeline-date { width:80px; flex-shrink:0; font-size:12px; font-weight:600; color:var(--gray-500); padding-top:2px; }
.timeline-text { flex:1; font-size:14px; color:var(--gray-700); line-height:1.6; }

/* ═══════════ DEALS GRID ═══════════ */
.deals-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
.deal-card { background:white; border:1px solid var(--gray-200); border-radius:12px; padding:20px; cursor:pointer; transition:all var(--duration-base); }
.deal-card:hover { border-color:var(--primary); box-shadow:0 4px 12px rgba(37,99,235,0.1); transform:translateY(-2px); }

/* ═══════════ CONTRACTOR CELLS ═══════════ */
.contractor-cell { display:flex; align-items:center; gap:10px; }
.contractor-avatar { width:32px; height:32px; border-radius:50%; background:var(--primary); color:white; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }

/* ═══════════ METRIC TREND ═══════════ */
.metric-trend { font-size:12px; color:var(--gray-500); margin-top:2px; }
.metric-trend.positive { color:var(--success); }
.metric-trend.negative { color:var(--danger); }
.positive { color:var(--success); }

/* ═══════════ TAB BUTTONS ═══════════ */
.tab-btn { padding:10px 20px; font-size:13px; font-weight:600; border:none; background:none; cursor:pointer; border-bottom:2px solid transparent; color:var(--gray-500); transition:all var(--duration-base); font-family:inherit; }
.tab-btn:hover { color:var(--gray-900); }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }

/* ═══════════ IMPORT TABS ═══════════ */
.import-tab { padding:24px 0; }

/* ═══════════ UPLOAD AREA ═══════════ */
.upload-area { border:2px dashed var(--gray-300); border-radius:12px; padding:40px; text-align:center; transition:all var(--duration-base); cursor:pointer; }
.upload-area:hover, .upload-area.dragover { border-color:var(--primary); background:var(--primary-soft); }

/* ═══════════ RESPONSIVE GRID OVERRIDES ═══════════ */
/* These catch inline style grids used across dashboard, analytics, reports, etc. */
@media (max-width:1024px) {
    [style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns:1fr 1fr !important; }
    [style*="grid-template-columns:repeat(4"] { grid-template-columns:repeat(2,1fr) !important; }
    [style*="grid-template-columns:repeat(5"] { grid-template-columns:repeat(3,1fr) !important; }
    [style*="grid-template-columns:repeat(6"] { grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:768px) {
    [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns:1fr !important; }
    [style*="grid-template-columns:repeat(3"] { grid-template-columns:1fr !important; }
    [style*="grid-template-columns:repeat(4"] { grid-template-columns:1fr !important; }
    [style*="grid-template-columns:repeat(5"] { grid-template-columns:repeat(2,1fr) !important; }
    [style*="grid-template-columns:repeat(6"] { grid-template-columns:repeat(2,1fr) !important; }
    .filters-bar { flex-direction:column; }
    .filter-select, .search-input { width:100%; }
    .deals-grid { grid-template-columns:1fr !important; }
}

/* ═══════════ TOOLTIPS ═══════════
   Usage: add data-tooltip="Your helpful text" to any element.
   Positioning: defaults to top; add data-tooltip-pos="bottom|left|right" to override.
   Accessibility: focus-triggered, Escape-dismissable, role=tooltip via JS helper.
   Research-based defaults: 500ms delay, 14px font, 4.5:1 contrast, max 280px wide. */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::before,
[data-tooltip]::after {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease-out 0.5s, transform 0.18s ease-out 0.5s;
    position: absolute;
    z-index: 9999;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    background: var(--gray-900);
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
}
[data-tooltip]::before {
    content: '';
    border: 5px solid transparent;
}
/* Default: top */
[data-tooltip]::after {
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}
[data-tooltip]::before {
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border-top-color: var(--gray-900);
}
/* Bottom */
[data-tooltip-pos="bottom"]::after {
    top: calc(100% + 10px);
    bottom: auto;
    transform: translateX(-50%) translateY(-4px);
}
[data-tooltip-pos="bottom"]::before {
    top: calc(100% + 2px);
    bottom: auto;
    transform: translateX(-50%) translateY(-4px);
    border-top-color: transparent;
    border-bottom-color: var(--gray-900);
}
/* Left */
[data-tooltip-pos="left"]::after {
    right: calc(100% + 10px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(4px);
}
[data-tooltip-pos="left"]::before {
    right: calc(100% + 2px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(4px);
    border-top-color: transparent;
    border-left-color: var(--gray-900);
}
/* Right */
[data-tooltip-pos="right"]::after {
    left: calc(100% + 10px);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(-4px);
}
[data-tooltip-pos="right"]::before {
    left: calc(100% + 2px);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(-4px);
    border-top-color: transparent;
    border-right-color: var(--gray-900);
}
/* Reveal on hover, focus, or explicit show flag (for mobile tap + ESC suppress) */
[data-tooltip]:hover:not([data-tooltip-suppressed])::before,
[data-tooltip]:hover:not([data-tooltip-suppressed])::after,
[data-tooltip]:focus:not([data-tooltip-suppressed])::before,
[data-tooltip]:focus:not([data-tooltip-suppressed])::after,
[data-tooltip]:focus-within:not([data-tooltip-suppressed])::before,
[data-tooltip]:focus-within:not([data-tooltip-suppressed])::after,
[data-tooltip][data-tooltip-show="true"]:not([data-tooltip-suppressed])::before,
[data-tooltip][data-tooltip-show="true"]:not([data-tooltip-suppressed])::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
[data-tooltip-pos="left"]:hover::after,
[data-tooltip-pos="left"]:focus::after,
[data-tooltip-pos="left"]:hover::before,
[data-tooltip-pos="left"]:focus::before,
[data-tooltip-pos="right"]:hover::after,
[data-tooltip-pos="right"]:focus::after,
[data-tooltip-pos="right"]:hover::before,
[data-tooltip-pos="right"]:focus::before {
    transform: translateY(-50%) translateX(0);
}
/* Info icon — subtle, inline, keyboard-focusable */
.tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-500);
    font-size: 10px;
    font-weight: 700;
    cursor: help;
    vertical-align: middle;
    font-style: normal;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.tip-icon:hover, .tip-icon:focus {
    background: var(--primary);
    color: white;
    outline: none;
}
/* Motion reduction */
@media (prefers-reduced-motion: reduce) {
    [data-tooltip]::before,
    [data-tooltip]::after {
        transition: opacity 0.01s 0s;
    }
}
/* Mobile: hide hover tooltips; tap behavior handled by JS */
@media (hover: none) {
    [data-tooltip]:hover::before,
    [data-tooltip]:hover::after {
        opacity: 0;
    }
}