/* ============================================================
   Sourcing Pipeline — "Institutional Clarity" design system
   Stack: Bootstrap 5 + HTMX + Jinja2
   Fonts: DM Sans (headings) · IBM Plex Sans (body) · IBM Plex Mono (data)
   ============================================================ */

/* ── Google Fonts import (editorial stack; base.html also preloads via <link>) ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES — Light theme (default)
   ============================================================ */
:root {
    /* Brand palette */
    --sp-deep:           #1a2332;
    --sp-deep-rgb:       26, 35, 50;
    --sp-deep-hover:     #243044;
    --sp-accent:         #d4a853;
    --sp-accent-rgb:     212, 168, 83;
    --sp-accent-hover:   #c49540;
    --sp-accent-dark:    #805c0d;   /* gold as text on light: 5.9:1 (was #b8822e, 3.4:1) */
    --sp-teal:           #2dd4bf;
    --sp-teal-rgb:       45, 212, 191;
    --sp-teal-dim:       #0f766e;

    /* Semantic tokens */
    --sp-success-bg:     #d1fae5;
    --sp-success-fg:     #065f46;
    --sp-success-border: #a7f3d0;
    --sp-warning-bg:     #fef3c7;
    --sp-warning-fg:     #92400e;
    --sp-warning-border: #fde68a;
    --sp-danger-bg:      #fee2e2;
    --sp-danger-fg:      #991b1b;
    --sp-danger-border:  #fecaca;
    --sp-info-bg:        #e0f2fe;
    --sp-info-fg:        #075985;
    --sp-info-border:    #bae6fd;

    /* Surface tokens */
    --sp-surface-0:      #ffffff;
    --sp-surface-1:      #f8f9fb;
    --sp-surface-2:      #f1f4f8;
    --sp-surface-3:      #e8ecf2;
    --sp-border:         #dde2ea;
    --sp-border-strong:  #c4cdd8;

    /* Text tokens */
    --sp-text-primary:   #111827;
    --sp-text-secondary: #374151;
    --sp-text-muted:     #6b7280;
    --sp-text-placeholder: #9ca3af;
    --sp-text-inverse:   #ffffff;

    /* Component tokens */
    --sp-btn-radius:     0.4rem;
    --sp-card-radius:    0.6rem;
    --sp-input-radius:   0.4rem;
    --sp-shadow-sm:      0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.06);
    --sp-shadow-md:      0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.06);
    --sp-shadow-lg:      0 10px 15px rgba(0,0,0,0.07), 0 4px 6px rgba(0,0,0,0.05);
    --sp-shadow-xl:      0 20px 25px rgba(0,0,0,0.08), 0 10px 10px rgba(0,0,0,0.04);

    /* Animation */
    --sp-transition-fast: 120ms ease;
    --sp-transition-base: 200ms ease;
    --sp-transition-slow: 350ms ease;

    /* Bootstrap overrides */
    --bs-primary:        #1a2332;
    --bs-primary-rgb:    26, 35, 50;
    --bs-secondary:      #64748b;
    --bs-secondary-rgb:  100, 116, 139;
    --bs-border-color:   #dde2ea;
    --bs-border-radius:  0.4rem;

    /* ========================================================
       NEXT GEN · Bold Modern Editorial token set (parallel to
       the legacy --sp-* set above, which is intentionally left
       unchanged). New editorial.css + macros reference these.
       Source: outputs/remix_handoff/.../styles-nextgen.css
       ======================================================== */
    --accent:          #d4a853;   /* brand gold (matches legacy --sp-accent) */
    --accent-rgb:      212, 168, 83;
    --accent-2:        #c49540;   /* darker gold for hover/fills */
    /* Gold as TEXT/icon only. --accent (2.2:1) and --accent-2 (2.7:1) both fail
       AA on light paper, so eyebrow/smallcaps/em use this instead: 5.9:1. */
    --accent-text:     #805c0d;
    --accent-ink:      #1a1200;   /* dark text/icon on gold fills */
    --accent-soft:     rgba(212, 168, 83, .15);

    --ink:             #0c0c0b;
    --ink-rgb:         12, 12, 11;
    --paper:           #fbfbf8;   /* warm page background */
    --surface-0:       #ffffff;
    --surface-1:       #f4f4ee;
    --surface-2:       #ebebe3;
    --surface-3:       #e0e0d6;
    --border:          #e2e2d8;
    --border-strong:   #cfcfc2;

    --text-primary:    #0c0c0b;
    --text-secondary:  #45453f;
    --text-muted:      #68685e;   /* 5.4:1 on --paper, 4.7:1 on --surface-2 (WCAG AA) */
    --text-placeholder:#74746a;   /* 4.6:1 on --surface-0 */

    /* Rail is near-black in both themes (bold editorial) */
    --rail-bg:         #0b0b0a;
    --rail-ink:        #f5f5ef;
    --rail-muted:      #8a8a80;
    --rail-hair:       rgba(255, 255, 255, .10);

    /* Semantic (editorial pill/banner palette) */
    --success-bg:#dcfce7; --success-fg:#15803d; --success-border:#bbf7d0;
    --warning-bg:#fef3c7; --warning-fg:#a16207; --warning-border:#fde68a;
    --danger-bg:#fee2e2;  --danger-fg:#b91c1c;  --danger-border:#fecaca;
    --info-bg:#e0f2fe;    --info-fg:#0369a1;    --info-border:#bae6fd;

    /* Type stacks */
    --serif: 'Space Grotesk', system-ui, sans-serif;            /* display/headings */
    --sans:  'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
    --mono:  'JetBrains Mono', ui-monospace, monospace;

    /* Layout + shape */
    --rail-w:      248px;
    --content-pad: 36px;
    --content-max: 1340px;
    --radius:      10px;
    --radius-sm:   7px;
    --row-pad-y:   0.7rem;
    --row-pad-x:   0.9rem;
    --btn-pad-y:   0.55rem;
    --btn-pad-x:   1rem;
    --h1-size:     2.7rem;
    --metric-size: 2.9rem;

    /* Editorial shadows */
    --shadow-sm: 0 1px 2px rgba(12, 12, 11, .05);
    --shadow-md: 0 6px 20px rgba(12, 12, 11, .07);
    --shadow-lg: 0 18px 44px rgba(12, 12, 11, .12);
    --shadow-xl: 0 28px 60px rgba(12, 12, 11, .18);
}

/* ── Editorial dark theme (keys off [data-theme], synced with [data-bs-theme]) ── */
[data-theme="dark"] {
    --ink:             #f5f5ef;
    --paper:           #0a0a0a;
    --surface-0:       #131312;
    --surface-1:       #181816;
    --surface-2:       #201f1d;
    --surface-3:       #2a2926;
    --border:          #2a2926;
    --border-strong:   #3a3935;

    --text-primary:    #f5f5ef;
    --text-secondary:  #c6c6bd;
    --text-muted:      #8f8f84;
    --text-placeholder:#6a6a60;

    --accent:          #e0b860;   /* brighter gold for dark surfaces */
    --accent-rgb:      224, 184, 96;
    --accent-2:        #d4a853;
    --accent-text:     #e0b860;   /* 10.5:1 on dark --paper */
    --accent-ink:      #1a1200;
    --accent-soft:     rgba(224, 184, 96, .16);

    --rail-bg:         #060605;
    --rail-ink:        #f5f5ef;
    --rail-muted:      #7c7c72;

    --success-bg:#052e1a; --success-fg:#6ee7b7; --success-border:#14532d;
    --warning-bg:#2a1d00; --warning-fg:#fcd34d; --warning-border:#854d0e;
    --danger-bg:#2a0a0a;  --danger-fg:#fca5a5;  --danger-border:#7f1d1d;
    --info-bg:#04243a;    --info-fg:#7dd3fc;    --info-border:#075985;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
    --shadow-xl: 0 28px 60px rgba(0, 0, 0, .6);
}

/* ============================================================
   ROW DENSITY — set on <html> as data-density, persisted in
   localStorage('sp-density') exactly like the theme. Absent
   attribute == "comfortable", so the :root values above are the
   default and this block is the only thing compact has to say.

   Measured on the 10-column classification table at 1440x900:
   comfortable fits 8 rows per screen, compact fits 20.
   Must stay AFTER :root — equal specificity, later wins.
   ============================================================ */
[data-density="compact"] {
    --row-pad-y:   0.32rem;
    --h1-size:     1.6rem;
    --metric-size: 1.9rem;
    --content-pad: 22px;
}

/* ── Dark theme overrides ── */
[data-bs-theme="dark"] {
    --sp-deep:           #1e2d42;
    --sp-deep-rgb:       30, 45, 66;
    --sp-deep-hover:     #263650;
    --sp-accent:         #d4a853;
    --sp-accent-hover:   #e0b860;
    --sp-accent-dark:    #c49540;
    --sp-teal:           #2dd4bf;
    --sp-teal-dim:       #14b8a6;

    --sp-success-bg:     #022c22;
    --sp-success-fg:     #6ee7b7;
    --sp-success-border: #065f46;
    --sp-warning-bg:     #1c1400;
    --sp-warning-fg:     #fcd34d;
    --sp-warning-border: #92400e;
    --sp-danger-bg:      #1f0606;
    --sp-danger-fg:      #fca5a5;
    --sp-danger-border:  #991b1b;
    --sp-info-bg:        #001f33;
    --sp-info-fg:        #7dd3fc;
    --sp-info-border:    #075985;

    --sp-surface-0:      #0f1923;
    --sp-surface-1:      #15202f;
    --sp-surface-2:      #1c2b3d;
    --sp-surface-3:      #243347;
    --sp-border:         #2a3a50;
    --sp-border-strong:  #374f68;

    --sp-text-primary:   #f1f5f9;
    --sp-text-secondary: #cbd5e1;
    --sp-text-muted:     #94a3b8;
    --sp-text-placeholder: #64748b;

    --sp-shadow-sm:      0 1px 2px rgba(0,0,0,0.3);
    --sp-shadow-md:      0 4px 6px rgba(0,0,0,0.3);
    --sp-shadow-lg:      0 10px 15px rgba(0,0,0,0.35);
    --sp-shadow-xl:      0 20px 25px rgba(0,0,0,0.4);

    --bs-primary:        #3b82f6;
    --bs-primary-rgb:    59, 130, 246;
    --bs-border-color:   #2a3a50;
    --bs-body-bg:        #0f1923;
    --bs-body-color:     #f1f5f9;
    --bs-secondary-bg:   #1c2b3d;
    --bs-tertiary-bg:    #15202f;
}

/* ── Theme toggle label helpers ── */
[data-theme="light"] .theme-label-light { display: none; }
[data-theme="dark"]  .theme-label-dark  { display: none; }

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
html {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--sp-text-primary);
    background-color: var(--sp-surface-1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sp-text-primary);
    line-height: 1.25;
}

/* Monospace for numeric/data values */
.mono, .data-value,
.stat-number,
.confidence-score,
.pipeline-id {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

/* ============================================================
   SKIP LINK (ACCESSIBILITY)
   ============================================================ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--sp-accent);
    color: var(--sp-deep);
    font-weight: 700;
    border-radius: 0 0 var(--sp-btn-radius) var(--sp-btn-radius);
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
}
.skip-link:focus { left: 0; }

/* ============================================================
   BRAND / USER BADGE
   (former #main-navbar + .pipeline-context-bar rules were removed
   when the top navbar was replaced by the left sidebar — sidebar.css)
   ============================================================ */
.brand-icon {
    display: inline-flex;
    align-items: center;
    color: var(--sp-accent);
}

.user-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem !important;
    letter-spacing: 0.02em;
}

/* ============================================================
   APP FOOTER
   ============================================================ */
.app-footer {
    background-color: var(--sp-deep);
    color: rgba(255,255,255,0.65);
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: auto;
    flex-shrink: 0;
    font-size: 0.82rem;
    font-family: 'Schibsted Grotesk', sans-serif;
}
.app-footer a {
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    transition: color var(--sp-transition-fast);
}
.app-footer a:hover { color: #fff; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background-color: var(--sp-surface-0);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-card-radius);
    box-shadow: var(--sp-shadow-sm);
    transition: box-shadow var(--sp-transition-base), border-color var(--sp-transition-base);
}

.card:hover {
    box-shadow: var(--sp-shadow-md);
    border-color: var(--sp-border-strong);
}

/* Top accent border variant */
.card.card-accent-top {
    border-top: 2px solid var(--sp-accent);
}
.card.card-accent-teal {
    border-top: 2px solid var(--sp-teal);
}
.card.card-accent-deep {
    border-top: 2px solid var(--sp-deep);
}

.card-header {
    background-color: var(--sp-surface-1);
    border-bottom: 1px solid var(--sp-border);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
}

.card-body { padding: 1rem; }

.card-icon {
    font-size: 1.1rem;
    margin-right: 0.3rem;
    color: var(--sp-deep);
}
[data-bs-theme="dark"] .card-icon { color: var(--sp-accent); }

.card-text { color: var(--sp-text-secondary); }

/* ── Dark theme card surfaces ── */
[data-bs-theme="dark"] .card {
    background-color: var(--sp-surface-1);
    border-color: var(--sp-border);
}
[data-bs-theme="dark"] .card-header {
    background-color: var(--sp-surface-2);
    border-color: var(--sp-border);
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-card {
    text-align: center;
    padding: 1.25rem 1rem;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-card-radius);
    background: var(--sp-surface-0);
    transition: box-shadow var(--sp-transition-base), transform var(--sp-transition-base);
}

.stat-card:hover {
    box-shadow: var(--sp-shadow-md);
    transform: translateY(-1px);
}

/* Top accent bar */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--sp-deep);
    border-radius: var(--sp-card-radius) var(--sp-card-radius) 0 0;
}

.stat-card .stat-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2rem;
    font-weight: 600;
    color: var(--sp-text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.stat-card .stat-label {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sp-text-muted);
    margin-top: 0.35rem;
}

.stat-card small { color: var(--sp-text-muted); }

/* Accent variants */
.stat-card.accent-success::before { background: var(--sp-teal); }
.stat-card.accent-info::before    { background: var(--bs-primary); }
.stat-card.accent-warning::before { background: var(--sp-accent); }
.stat-card.accent-danger::before  { background: var(--sp-danger-fg); }

[data-bs-theme="dark"] .stat-card {
    background: var(--sp-surface-1);
    border-color: var(--sp-border);
}

/* ============================================================
   PAGE HEADERS — consistent page title treatment
   ============================================================ */
.page-header { margin-bottom: 1.5rem; }

.page-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--sp-text-primary);
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

.page-subtitle {
    font-size: 0.9rem;
    color: var(--sp-text-muted);
    margin-bottom: 0;
}

.section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--sp-text-primary);
    letter-spacing: -0.01em;
}

/* ============================================================
   INTERACTIVE CARDS — hover lift effect
   ============================================================ */
.card-interactive {
    transition: box-shadow var(--sp-transition-base), transform var(--sp-transition-base), border-color var(--sp-transition-base);
}
.card-interactive:hover {
    box-shadow: var(--sp-shadow-lg);
    transform: translateY(-2px);
    border-color: var(--sp-border-strong);
}

.card-icon-lg {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--sp-deep) 8%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sp-deep);
}
[data-bs-theme="dark"] .card-icon-lg {
    background: rgba(var(--sp-accent-rgb), 0.12);
    color: var(--sp-accent);
}

/* ============================================================
   STAT ICON — for stat cards with Lucide icons
   ============================================================ */
.stat-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 0.5rem;
    color: var(--sp-text-muted);
    opacity: 0.6;
}

/* ============================================================
   MINI STATS — inline stat pairs
   ============================================================ */
.mini-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}
.mini-stat-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
}
.mini-stat-label {
    font-size: 0.72rem;
    color: var(--sp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* ============================================================
   STEP CONTENT — sublabels in workflow steps
   ============================================================ */
.step-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.step-label {
    font-weight: 600;
    font-size: 0.82rem;
}
.step-sublabel {
    font-size: 0.72rem;
    opacity: 0.7;
}

/* ============================================================
   FILTER BAR — consistent spacing for filter rows
   ============================================================ */
.filter-bar {
    margin-bottom: 1rem;
}

/* ============================================================
   BADGES — Status / Fit / Assign / Role
   ============================================================ */
.status-badge, .fit-badge, .assign-badge, .dedup-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;           /* pill shape */
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Schibsted Grotesk', sans-serif;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-badge .status-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Spin for active states */
.status-icon-spin { animation: status-spin 0.9s linear infinite; }
@keyframes status-spin { to { transform: rotate(360deg); } }

/* Badge pop animation on status change */
@keyframes badge-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.badge-pop { animation: badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Pipeline status */
.status-draft, .status-default {
    background: var(--sp-surface-2);
    color: var(--sp-text-secondary);
    border-color: var(--sp-border);
}
[data-bs-theme="dark"] .status-draft,
[data-bs-theme="dark"] .status-default {
    background: var(--sp-surface-3);
    color: var(--sp-text-muted);
    border-color: var(--sp-border);
}
.status-active {
    background: var(--sp-info-bg);
    color: var(--sp-info-fg);
    border-color: var(--sp-info-border);
}
.status-done {
    background: var(--sp-success-bg);
    color: var(--sp-success-fg);
    border-color: var(--sp-success-border);
}
.status-failed {
    background: var(--sp-danger-bg);
    color: var(--sp-danger-fg);
    border-color: var(--sp-danger-border);
}
.status-review {
    background: var(--sp-warning-bg);
    color: var(--sp-warning-fg);
    border-color: var(--sp-warning-border);
}

/* ── Step-tracker dots (pipeline list) ── */
.step-tracker {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: max-content;
}
.step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}
.step-line {
    width: 12px;
    height: 2px;
    flex-shrink: 0;
}
/* States */
.step-dot.done {
    background: var(--sp-success-fg);
}
.step-dot.active,
.step-dot.running {
    background: var(--sp-accent);
    box-shadow: 0 0 0 3px rgba(var(--sp-accent-rgb), 0.25);
}
.step-dot.running {
    animation: step-pulse 1.8s ease-in-out infinite;
}
@keyframes step-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(var(--sp-accent-rgb), 0.25); }
    50%      { box-shadow: 0 0 0 6px rgba(var(--sp-accent-rgb), 0.10); }
}
.step-dot.failed {
    background: var(--sp-danger-fg);
}
.step-dot.future {
    background: transparent;
    border: 2px solid var(--sp-border);
}
.step-dot.skipped {
    background: var(--sp-border);
    position: relative;
}
.step-dot.skipped::after {
    content: '–';
    position: absolute;
    top: -1px;
    left: 1px;
    font-size: 9px;
    line-height: 10px;
    color: var(--sp-bg);
    font-weight: 700;
}
.step-line.done  { background: var(--sp-success-fg); }
.step-line.skipped { background: var(--sp-border); }
.step-line.future { background: var(--sp-border); }
.step-label {
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: 0.35rem;
    white-space: nowrap;
    color: var(--sp-text-secondary);
}
.step-label.step-active {
    color: var(--sp-accent-dark);
}

/* Fit classification */
.fit-strong {
    background: var(--sp-success-bg);
    color: var(--sp-success-fg);
    border-color: var(--sp-success-border);
}
.fit-partial {
    background: var(--sp-warning-bg);
    color: var(--sp-warning-fg);
    border-color: var(--sp-warning-border);
}
.fit-none {
    background: var(--sp-danger-bg);
    color: var(--sp-danger-fg);
    border-color: var(--sp-danger-border);
}

/* Dedup gate provenance */
.dedup-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    margin-top: 0.15rem;
}
.dedup-sf {
    background: var(--sp-info-bg);
    color: var(--sp-info-fg);
    border-color: var(--sp-info-border);
}
.dedup-db {
    background: var(--sp-surface-2);
    color: var(--sp-text-secondary);
    border-color: var(--sp-border);
}

/* Review assignments */
.assign-approved {
    background: var(--sp-success-bg);
    color: var(--sp-success-fg);
    border-color: var(--sp-success-border);
}
.assign-corrected {
    background: var(--sp-warning-bg);
    color: var(--sp-warning-fg);
    border-color: var(--sp-warning-border);
}
.assign-rejected {
    background: var(--sp-danger-bg);
    color: var(--sp-danger-fg);
    border-color: var(--sp-danger-border);
}
.assign-pending {
    background: var(--sp-info-bg);
    color: var(--sp-info-fg);
    border-color: var(--sp-info-border);
}
.assign-unassigned {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}
@media (prefers-color-scheme: dark) {
    .assign-unassigned {
        background: #1e293b;
        color: #94a3b8;
        border-color: #334155;
    }
}

/* Role badges — compact variant */
.role-badge, .perm-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-family: 'Schibsted Grotesk', sans-serif;
    letter-spacing: 0.02em;
}
.role-admin    { background: var(--sp-danger-bg);  color: var(--sp-danger-fg); }
.role-analyst  { background: var(--sp-info-bg);    color: var(--sp-info-fg); }
.role-associate { background: var(--sp-warning-bg); color: var(--sp-warning-fg); }
.role-user     { background: var(--sp-surface-2);  color: var(--sp-text-muted); }
.perm-badge    { background: var(--sp-success-bg); color: var(--sp-success-fg); }

/* ============================================================
   TABLES
   ============================================================ */
.table {
    font-size: 0.875rem;
    font-family: 'Schibsted Grotesk', sans-serif;
    color: var(--sp-text-primary);
    --bs-table-striped-bg: var(--sp-surface-1);
    --bs-table-hover-bg:   color-mix(in srgb, var(--sp-accent) 5%, transparent);
}

.table thead th {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.775rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sp-text-muted);
    border-bottom: 2px solid var(--sp-border-strong);
    padding: 0.65rem 0.85rem;
    white-space: nowrap;
    background: var(--sp-surface-1);
}

.table tbody td {
    padding: 0.6rem 0.85rem;
    vertical-align: middle;
    border-color: var(--sp-border);
    line-height: 1.45;
}

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

.table-hover tbody tr:hover {
    background-color: color-mix(in srgb, var(--sp-accent) 4%, transparent);
}

/* Subtle alternating rows */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-color-type: var(--sp-text-primary);
    --bs-table-bg-type: var(--sp-surface-1);
}

[data-bs-theme="dark"] .table thead th {
    background: var(--sp-surface-2);
    border-color: var(--sp-border);
}
[data-bs-theme="dark"] .table tbody td {
    border-color: var(--sp-border);
}

/* Classification table specifics */
.classification-table { font-size: 0.875rem; width: 100%; }
.classification-table th,
.classification-table td { vertical-align: top; }

/* Column width hints (applied via nth-child for both review tables) */
.classification-table th:nth-child(1),
.classification-table td:nth-child(1) { width: 2rem; }       /* checkbox */
.classification-table th:nth-child(2),
.classification-table td:nth-child(2) { width: 2.5rem; }     /* # */
.classification-table th:nth-child(6),
.classification-table td:nth-child(6) { width: 5rem; }       /* confidence */

/* One line, one row. Wrapping three factors per cell made row heights vary
   61-93px, which is what stops the column being scannable — the eye can't run
   down it. Templates now emit the first factor plus a "+N more" count; the full
   list lives in the company detail modal (.decision-factors-list below). */
.decision-factors-cell {
    max-width: 340px;
    line-height: 1.4;
}
/* Factor and count share one line, so the row height is the line height and
   nothing else. The factor takes the slack and ellipsises; the count never
   shrinks, or it would be the thing that gets cut off. */
.decision-factors-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* Explicit, or baseline-aligning the 0.7rem count against the 0.83rem
       factor inflates the line box by ~14px per row. */
    line-height: 1.35;
}
.decision-factor {
    margin: 0;
    font-size: 0.83rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.decision-factors-more {
    flex: 0 0 auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--sp-text-muted);
    white-space: nowrap;
}
.row-archived td {
    opacity: 0.42;
    font-style: italic;
}

/* Review summary bar */
.review-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 1rem;
    background: var(--sp-surface-1);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-card-radius);
    font-size: 0.85rem;
}
.review-summary-bar progress {
    flex: 1;
    max-width: 200px;
    height: 6px;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-control,
.form-select {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.9rem;
    color: var(--sp-text-primary);
    background-color: var(--sp-surface-0);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-input-radius);
    padding: 0.45rem 0.75rem;
    transition: border-color var(--sp-transition-fast), box-shadow var(--sp-transition-fast), background-color var(--sp-transition-fast);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--sp-accent);
    box-shadow: 0 0 0 3px rgba(var(--sp-accent-rgb), 0.18);
    background-color: var(--sp-surface-0);
    color: var(--sp-text-primary);
    outline: none;
}

.form-control::placeholder { color: var(--sp-text-placeholder); }
.form-control::-webkit-input-placeholder { color: var(--sp-text-placeholder); }

.form-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sp-text-secondary);
    margin-bottom: 0.35rem;
}

.form-text {
    font-size: 0.8rem;
    color: var(--sp-text-muted);
}

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

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--sp-surface-2);
    border-color: var(--sp-border);
    color: var(--sp-text-primary);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--sp-surface-2);
    border-color: var(--sp-accent);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn,
button:not(.navbar-toggler):not(.accordion-button):not(.btn-close),
a[role="button"],
a.btn {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 500;
    border-radius: var(--sp-btn-radius) !important;
    transition:
        background-color var(--sp-transition-fast),
        border-color var(--sp-transition-fast),
        color var(--sp-transition-fast),
        box-shadow var(--sp-transition-fast),
        transform var(--sp-transition-fast);
}

.btn:active,
button:not(.navbar-toggler):not(.accordion-button):not(.btn-close):active {
    transform: translateY(1px);
}

/* Primary — gold */
.btn.btn-primary, a.btn.btn-primary,
button.primary, a[role="button"].primary {
    background-color: var(--sp-accent) !important;
    border-color: var(--sp-accent) !important;
    color: #1a1200 !important;
    font-weight: 600;
}
.btn.btn-primary svg, .btn.btn-primary i, .btn.btn-primary [data-lucide],
button.primary svg { color: inherit !important; }
.btn.btn-primary:hover, button.primary:hover {
    background-color: var(--sp-accent-hover) !important;
    border-color: var(--sp-accent-dark) !important;
    color: #1a1200 !important;
    box-shadow: 0 2px 8px rgba(var(--sp-accent-rgb), 0.35);
}

/* Secondary filled */
.btn-secondary, button.secondary:not(.outline) {
    background-color: var(--sp-deep) !important;
    border-color: var(--sp-deep) !important;
    color: #fff !important;
}
.btn-secondary:hover, button.secondary:not(.outline):hover {
    background-color: var(--sp-deep-hover) !important;
    border-color: var(--sp-deep-hover) !important;
}

/* Outline variants */
.btn-outline-secondary, .btn-outline-primary,
button.outline, button.secondary.outline, a[role="button"].outline {
    background-color: transparent !important;
    border: 1px solid var(--sp-border-strong) !important;
    color: var(--sp-text-secondary) !important;
}
.btn-outline-secondary:hover,
button.outline:hover, button.secondary.outline:hover {
    background-color: var(--sp-surface-2) !important;
    border-color: var(--sp-border-strong) !important;
}
.btn-outline-primary {
    border-color: var(--sp-deep) !important;
    color: var(--sp-deep) !important;
}
.btn-outline-primary:hover {
    background-color: rgba(var(--sp-deep-rgb), 0.07) !important;
}

/* Dark mode: outline buttons need contrast against dark surface */
[data-bs-theme="dark"] .btn-outline-primary {
    border-color: var(--sp-accent) !important;
    color: var(--sp-accent) !important;
}
[data-bs-theme="dark"] .btn-outline-primary:hover {
    background-color: rgba(var(--sp-accent-rgb), 0.12) !important;
    color: var(--sp-accent) !important;
}
[data-bs-theme="dark"] .btn-outline-secondary {
    border-color: var(--sp-border-strong) !important;
    color: var(--sp-text-primary) !important;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--sp-surface-2) !important;
    color: var(--sp-text-primary) !important;
}

/* Danger */
.btn-danger, button.btn-danger, button.delete-btn,
.btn-outline-danger {
    color: var(--sp-danger-fg) !important;
    border-color: var(--sp-danger-border) !important;
    background: transparent !important;
}
.btn-danger:hover, button.delete-btn:hover,
.btn-outline-danger:hover {
    background-color: var(--sp-danger-bg) !important;
    border-color: var(--sp-danger-fg) !important;
    color: var(--sp-danger-fg) !important;
}
[data-bs-theme="dark"] .btn-outline-danger,
[data-bs-theme="dark"] .btn-danger {
    color: var(--sp-danger-fg) !important;
    border-color: var(--sp-danger-fg) !important;
    background: transparent !important;
}
[data-bs-theme="dark"] .btn-outline-danger:hover,
[data-bs-theme="dark"] .btn-danger:hover {
    background-color: var(--sp-danger-bg) !important;
    color: var(--sp-danger-fg) !important;
    border-color: var(--sp-danger-fg) !important;
}

/* Size helpers */
.btn.btn-sm, button.btn-sm { border-radius: var(--sp-btn-radius) !important; font-size: 0.8rem; }
.btn-action, button.btn-action { padding: 0.35rem 0.65rem; font-size: 0.84rem; }
.btn-inline, button.btn-inline { padding: 0.22rem 0.5rem; font-size: 0.8rem; }
.btn-inline-sm, button.btn-inline-sm { padding: 0.18rem 0.38rem; font-size: 0.75rem; }
button.small, .btn.small { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
button.contrast { border-color: var(--sp-border); color: var(--sp-text-primary); }

/* Icon-only action buttons */
.pipeline-actions { display: flex; gap: 0.35rem; align-items: center; white-space: nowrap; }
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border-radius: var(--sp-btn-radius);
    border: 1px solid var(--sp-border); background: transparent;
    color: var(--sp-text-secondary); cursor: pointer; flex-shrink: 0;
    font-size: 0; /* hide any accidental text */
}
.btn-icon svg, .btn-icon i { width: 15px; height: 15px; }
.btn-icon:hover { background: var(--sp-surface-2); border-color: var(--sp-border-strong); }
.btn-icon.btn-danger { color: var(--sp-danger-fg) !important; border-color: var(--sp-danger-border) !important; }
.btn-icon.btn-danger:hover { background: var(--sp-danger-bg) !important; border-color: var(--sp-danger-fg) !important; }

/* Sortable column headers */
th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 1.2em !important; }
th.sortable::after {
    content: '\2195'; /* ↕ */
    position: absolute; right: 0.3em; top: 50%; transform: translateY(-50%);
    opacity: 0.3; font-size: 0.75em;
}
th.sortable.sort-asc::after { content: '\2191'; opacity: 0.8; } /* ↑ */
th.sortable.sort-desc::after { content: '\2193'; opacity: 0.8; } /* ↓ */

/* Non-Bootstrap bare buttons */
button:not([class*="btn"]):not(.navbar-toggler):not(.accordion-button):not(.btn-close) {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
}
a[role="button"]:not([class*="btn"]) {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    text-decoration: none;
}
summary[role="button"] {
    border-radius: var(--sp-btn-radius);
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    display: inline-block;
}

/* ============================================================
   REVIEW INLINE ACTIONS
   ============================================================ */
.review-actions-cell {
    min-width: 100px;
    white-space: nowrap;
}
.correct-inline-form {
    white-space: normal;
}
.correct-inline-form .correct-select,
.correct-inline-form .correct-notes {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    margin-bottom: 0.25rem;
}

.btn-approve {
    background: transparent !important;
    border: 1px solid var(--sp-success-border) !important;
    color: var(--sp-success-fg) !important;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px !important;
    transition: background-color var(--sp-transition-fast);
}
.btn-approve:hover {
    background: var(--sp-success-bg) !important;
    border-color: var(--sp-teal) !important;
}

.btn-correct {
    background: transparent !important;
    border: 1px solid var(--sp-warning-border) !important;
    color: var(--sp-warning-fg) !important;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px !important;
    transition: background-color var(--sp-transition-fast);
}
.btn-correct:hover {
    background: var(--sp-warning-bg) !important;
}

/* ============================================================
   FLOATING BULK ACTION TOOLBAR
   Appears at bottom of viewport when rows are selected
   ============================================================ */
.bulk-action-toolbar {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    background: var(--sp-deep);
    color: #fff;
    border-radius: 2rem;
    box-shadow: var(--sp-shadow-xl);
    border: 1px solid rgba(255,255,255,0.12);
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    transition: transform var(--sp-transition-base) cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    opacity: 0;
}

.bulk-action-toolbar.visible {
    transform: translateX(-50%) translateY(0);
    pointer-events: all;
    opacity: 1;
}

.bulk-action-toolbar .bulk-count {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--sp-accent);
    padding-right: 0.5rem;
    border-right: 1px solid rgba(255,255,255,0.2);
    margin-right: 0.25rem;
}

.bulk-action-toolbar .btn {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.75rem !important;
}

/* ============================================================
   SKELETON LOADING STATES — shimmer animation
   ============================================================ */
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--sp-surface-2) 25%,
        var(--sp-surface-3) 50%,
        var(--sp-surface-2) 75%
    );
    background-size: 1200px 100%;
    animation: shimmer 1.6s infinite linear;
    border-radius: var(--sp-btn-radius);
}

.skeleton-text {
    height: 0.875rem;
    width: 100%;
    margin-bottom: 0.5rem;
    border-radius: 3px;
}
.skeleton-text.w-75 { width: 75%; }
.skeleton-text.w-50 { width: 50%; }
.skeleton-text.w-25 { width: 25%; }

.skeleton-heading {
    height: 1.25rem;
    width: 60%;
    margin-bottom: 0.75rem;
    border-radius: 4px;
}

.skeleton-badge {
    height: 1.4rem;
    width: 4rem;
    border-radius: 999px;
    display: inline-block;
}

.skeleton-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--sp-border);
}

.skeleton-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-card {
    padding: 1rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-card-radius);
}

[data-bs-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        var(--sp-surface-2) 25%,
        var(--sp-surface-3) 50%,
        var(--sp-surface-2) 75%
    );
    background-size: 1200px 100%;
    animation: shimmer 1.6s infinite linear;
}

/* ── Loading placeholder (legacy compat) ── */
.loading-placeholder {
    padding: 1.5rem;
    text-align: center;
    color: var(--sp-text-muted);
}

/* ============================================================
   TOAST NOTIFICATIONS — slide-in from right
   ============================================================ */
@keyframes toast-in {
    from {
        transform: translateX(110%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes toast-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(110%);
        opacity: 0;
    }
}

.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.sp-toast {
    background: var(--sp-surface-0);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-card-radius);
    box-shadow: var(--sp-shadow-lg);
    padding: 0.75rem 1rem;
    min-width: 260px;
    max-width: 340px;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.875rem;
    pointer-events: all;
    animation: toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sp-toast.hiding {
    animation: toast-out 0.25s ease forwards;
}

.sp-toast-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 0.1rem;
}

.sp-toast-body { flex: 1; }

.sp-toast-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--sp-text-primary);
    margin-bottom: 0.15rem;
}

.sp-toast-message {
    font-size: 0.82rem;
    color: var(--sp-text-muted);
    line-height: 1.4;
}

/* Toast semantic variants */
.sp-toast.toast-success {
    border-left: 3px solid var(--sp-teal);
}
.sp-toast.toast-success .sp-toast-icon { color: var(--sp-teal); }

.sp-toast.toast-warning {
    border-left: 3px solid var(--sp-accent);
}
.sp-toast.toast-warning .sp-toast-icon { color: var(--sp-accent); }

.sp-toast.toast-error {
    border-left: 3px solid var(--sp-danger-fg);
}
.sp-toast.toast-error .sp-toast-icon { color: var(--sp-danger-fg); }

.sp-toast.toast-info {
    border-left: 3px solid var(--bs-primary);
}
.sp-toast.toast-info .sp-toast-icon { color: var(--bs-primary); }

.toast-close {
    background: none;
    border: none;
    color: var(--sp-text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.2rem;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity var(--sp-transition-fast);
}
.toast-close:hover { opacity: 1; }

.toast-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.toast-message {
    flex: 1;
    font-size: 0.82rem;
    color: var(--sp-text-secondary);
    line-height: 1.4;
}

/* Also style success/error toast icons via the toast-icon class */
.sp-toast.toast-success .toast-icon { color: var(--sp-teal); }
.sp-toast.toast-error .toast-icon { color: var(--sp-danger-fg); }
.sp-toast.toast-warning .toast-icon { color: var(--sp-accent); }
.sp-toast.toast-info .toast-icon { color: var(--bs-primary); }

[data-bs-theme="dark"] .sp-toast {
    background: var(--sp-surface-2);
    border-color: var(--sp-border);
}

/* ============================================================
   PROGRESS RING ANIMATION
   SVG-based circular progress for classification/enrichment
   Usage: <div class="progress-ring-wrapper"><svg class="progress-ring" ...>
   ============================================================ */
.progress-ring-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.progress-ring {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.progress-ring-track {
    fill: none;
    stroke: var(--sp-surface-3);
    stroke-width: 4;
}

.progress-ring-fill {
    fill: none;
    stroke: var(--sp-teal);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-ring-fill.ring-gold { stroke: var(--sp-accent); }
.progress-ring-fill.ring-deep { stroke: var(--sp-deep); }

.progress-ring-label {
    position: absolute;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--sp-text-primary);
    text-align: center;
    line-height: 1;
}

/* Linear progress bar refinement */
.progress {
    background: var(--sp-surface-2);
    border-radius: 999px;
    overflow: hidden;
}
.progress-bar {
    background: var(--sp-teal);
    border-radius: 999px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-bar.bg-warning { background: var(--sp-accent) !important; }
.progress-bar.bg-primary  { background: var(--sp-deep)   !important; }

/* ============================================================
   WORKFLOW STEPPER — refined step indicators
   ============================================================ */
.workflow-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 1.5rem 0 2rem;
    flex-wrap: wrap;
}

.workflow-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--sp-text-muted);
    position: relative;
    background: var(--sp-surface-1);
    border: 1px solid var(--sp-border);
    border-radius: 0;
    margin-right: -1px;
}
.workflow-step:first-child { border-radius: var(--sp-card-radius) 0 0 var(--sp-card-radius); }
.workflow-step:last-child  { border-radius: 0 var(--sp-card-radius) var(--sp-card-radius) 0; margin-right: 0; }

.workflow-step.active {
    background: var(--sp-deep);
    color: #fff;
    border-color: var(--sp-deep);
    z-index: 1;
}

.workflow-step.done {
    background: var(--sp-success-bg);
    color: var(--sp-success-fg);
    border-color: var(--sp-success-border);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: inherit;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.workflow-step:not(.active) .step-number {
    background: var(--sp-surface-3);
    color: var(--sp-text-muted);
}
.workflow-step.done .step-number {
    background: var(--sp-success-border);
    color: var(--sp-success-fg);
}

.step-arrow {
    font-size: 1rem;
    color: var(--sp-text-muted);
    padding: 0 0.35rem;
}

/* ── Step indicator bar (pipeline creation wizard) ── */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
    padding: 1rem 0;
}
.step-indicator-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sp-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}
.step-indicator-dot {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid var(--sp-border-strong);
    background: var(--sp-surface-0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sp-text-muted);
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.step-indicator-item.step-active .step-indicator-dot {
    border-color: var(--sp-accent);
    background: var(--sp-accent);
    color: #fff;
}
.step-indicator-item.step-active {
    color: var(--sp-text-primary);
    font-weight: 600;
}
.step-indicator-item.step-completed .step-indicator-dot {
    border-color: var(--sp-success-fg);
    background: var(--sp-success-bg);
    color: var(--sp-success-fg);
}
.step-indicator-item.step-completed {
    color: var(--sp-success-fg);
}
.step-indicator-line {
    width: 2.5rem;
    height: 2px;
    background: var(--sp-border);
    margin: 0 0.25rem;
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.step-indicator-item.step-completed + .step-indicator-line,
.step-indicator-line.line-completed {
    background: var(--sp-success-fg);
}
@media (max-width: 576px) {
    .step-indicator { gap: 0; flex-wrap: nowrap; overflow-x: auto; }
    .step-indicator-item span:not(.step-indicator-dot) { display: none; }
    .step-indicator-line { width: 1.5rem; }
}

/* ── Filter summary bar ── */
.filter-summary-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--sp-surface-1);
    border: 1px solid var(--sp-border);
    border-radius: 0.375rem;
    font-size: 0.82rem;
    margin-bottom: 0.75rem;
}
.filter-summary-label {
    font-weight: 600;
    color: var(--sp-text-secondary);
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--sp-surface-2);
    border: 1px solid var(--sp-border);
    border-radius: 1rem;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    color: var(--sp-text-primary);
}
.filter-chip-remove {
    background: none;
    border: none;
    padding: 0 0.15rem;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--sp-text-muted);
    opacity: 0.7;
}
.filter-chip-remove:hover { opacity: 1; color: var(--sp-danger-fg); }
.filter-chip-clear {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--sp-text-muted);
    text-decoration: underline;
    padding: 0;
    margin-left: 0.25rem;
}
.filter-chip-clear:hover { color: var(--sp-danger-fg); }

/* ============================================================
   EMPTY STATES — better styled with larger icon
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 3.5rem 2rem;
    border: 1.5px dashed var(--sp-border-strong);
    border-radius: var(--sp-card-radius);
    background: var(--sp-surface-0);
    color: var(--sp-text-muted);
}

.empty-state-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sp-deep) 8%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-bs-theme="dark"] .empty-state-icon {
    background: color-mix(in srgb, var(--sp-accent) 10%, transparent);
}
.empty-state-icon .lucide,
.empty-state-icon svg {
    width: 26px;
    height: 26px;
    color: var(--sp-deep);
}
[data-bs-theme="dark"] .empty-state-icon .lucide,
[data-bs-theme="dark"] .empty-state-icon svg {
    color: var(--sp-accent);
}

.empty-state h5, .empty-state .h5 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sp-text-secondary);
    margin-bottom: 0.4rem;
}
.empty-state p {
    font-size: 0.875rem;
    color: var(--sp-text-muted);
    max-width: 320px;
    margin: 0 auto 1.25rem;
    line-height: 1.55;
}

/* ============================================================
   NOTIFICATION DROPDOWN — refined with better spacing
   ============================================================ */
.notification-wrapper { position: relative; }

.notif-badge {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--sp-deep);
    line-height: 1;
    animation: badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.notif-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: 340px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--sp-surface-0);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-card-radius);
    box-shadow: var(--sp-shadow-lg);
    z-index: 1040;
    animation: toast-in 0.2s ease forwards;
}

.notif-header {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--sp-border);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--sp-text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notif-list { max-height: 320px; overflow-y: auto; }

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--sp-border);
    font-size: 0.82rem;
    line-height: 1.4;
    transition: background-color var(--sp-transition-fast);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover {
    background: var(--sp-surface-1);
}
.notif-item.unread {
    background: color-mix(in srgb, var(--sp-accent) 5%, transparent);
    border-left: 2px solid var(--sp-accent);
}

.notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sp-accent);
    flex-shrink: 0;
    margin-top: 0.3rem;
}

/* Notification content with action links */
.notif-content { flex: 1; min-width: 0; }
.notif-action {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sp-accent-dark);
    margin-top: 0.15rem;
}
.notif-action:hover { color: var(--sp-accent-hover); }

/* Notification urgency */
.notif-item.notif-urgent {
    border-left: 3px solid var(--sp-danger-fg);
    background: var(--sp-danger-bg);
}
.notif-item.notif-pending {
    border-left: 3px solid var(--sp-warning-fg);
    background: var(--sp-warning-bg);
}

/* ── Company detail modal ── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1040;
}
.company-detail-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(90vw, 640px);
    max-height: 85vh;
    overflow-y: auto;
    background: var(--sp-surface-0);
    border-radius: 0.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    z-index: 1050;
    animation: modalSlideIn 0.2s ease;
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}
.company-detail-modal .modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sp-border);
}
.company-detail-modal .modal-body {
    padding: 1rem 1.25rem;
}
.detail-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.detail-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.detail-value {
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}
.decision-factors-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.decision-factors-list li {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--sp-border);
    font-size: 0.85rem;
}
.decision-factors-list li:last-child { border-bottom: none; }
.company-name-link {
    color: var(--sp-text-primary);
    text-decoration: none;
    cursor: pointer;
}
.company-name-link:hover {
    color: var(--sp-accent-dark);
    text-decoration: underline;
}

.notif-text { flex: 1; color: var(--sp-text-secondary); }
.notif-time {
    white-space: nowrap;
    font-size: 0.72rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--sp-text-muted);
}

.notif-footer {
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--sp-border);
    text-align: center;
    font-size: 0.8rem;
    background: var(--sp-surface-1);
    border-radius: 0 0 var(--sp-card-radius) var(--sp-card-radius);
}
.notif-footer a {
    color: var(--sp-deep);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--sp-transition-fast);
}
.notif-footer a:hover { color: var(--sp-accent-dark); text-decoration: none; }
[data-bs-theme="dark"] .notif-footer a { color: var(--sp-accent); }

.notif-empty {
    padding: 2rem 0.9rem;
    text-align: center;
    color: var(--sp-text-muted);
    font-size: 0.85rem;
}
.notif-empty p { margin: 0.5rem 0 0; }

[data-bs-theme="dark"] .notif-dropdown {
    background: var(--sp-surface-1);
    border-color: var(--sp-border);
}
[data-bs-theme="dark"] .notif-header,
[data-bs-theme="dark"] .notif-footer {
    background: var(--sp-surface-2);
}
[data-bs-theme="dark"] .notif-item:hover {
    background: var(--sp-surface-2);
}

/* ============================================================
   KEYBOARD SHORTCUT HINTS
   ============================================================ */
kbd {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 500;
    background: var(--sp-surface-2);
    color: var(--sp-text-secondary);
    border: 1px solid var(--sp-border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0.12rem 0.4rem;
    line-height: 1.4;
    white-space: nowrap;
}
[data-bs-theme="dark"] kbd {
    background: var(--sp-surface-3);
    border-color: var(--sp-border-strong);
    color: var(--sp-text-secondary);
}

.kbd-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--sp-text-muted);
}

/* ============================================================
   SEMANTIC TOKENS — ALERTS AND DISCLAIMER
   ============================================================ */
.disclaimer-banner {
    background: var(--sp-info-bg);
    color: var(--sp-info-fg);
    border-left: 3px solid var(--sp-deep);
    padding: 0.75rem 1rem;
    border-radius: var(--sp-input-radius);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ============================================================
   FILE UPLOAD AREA
   ============================================================ */
#file-upload-area {
    position: relative;
    border: 2px dashed var(--sp-border-strong);
    border-radius: var(--sp-card-radius);
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--sp-transition-base), background var(--sp-transition-base);
    background: var(--sp-surface-0);
}
#file-upload-area input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
#file-upload-area:hover {
    border-color: var(--sp-accent);
    background: color-mix(in srgb, var(--sp-accent) 4%, transparent);
}
#file-upload-area.drag-over {
    border-color: var(--sp-accent);
    background: color-mix(in srgb, var(--sp-accent) 8%, transparent);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumb {
    background: none;
    padding: 0;
    font-size: 0.82rem;
}
.breadcrumb-item a {
    color: var(--sp-deep);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--sp-transition-fast);
}
.breadcrumb-item a:hover { color: var(--sp-accent); }
[data-bs-theme="dark"] .breadcrumb-item a { color: var(--sp-accent); }
.breadcrumb-item.active { color: var(--sp-text-muted); }
.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--sp-text-muted);
}

/* ============================================================
   ASSIGNMENT / REVIEW FORMS
   ============================================================ */
.assignment-panel { padding: 0.5rem 0; }
.assignment-summary {
    padding: 0.5rem 0.75rem;
    background: var(--sp-surface-1);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-input-radius);
    font-size: 0.85rem;
}
.correct-inline-form { margin-top: 0.3rem; }
.correct-select, .correct-notes {
    padding: 0.22rem 0.45rem;
    font-size: 0.84rem;
    border-radius: var(--sp-input-radius);
    border: 1px solid var(--sp-border);
    background: var(--sp-surface-0);
    color: var(--sp-text-primary);
    transition: border-color var(--sp-transition-fast);
}
.correct-select:focus, .correct-notes:focus {
    border-color: var(--sp-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--sp-accent-rgb), 0.15);
}
.perm-form { display: none; margin-top: 0.25rem; }
.perm-label { margin: 0; font-size: 0.8rem; }
.role-checkboxes { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.role-label { margin: 0; font-size: 0.8rem; white-space: nowrap; }
.role-change-form { display: inline-flex; align-items: center; gap: 0.25rem; }

/* ============================================================
   HTMX INDICATORS
   ============================================================ */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: block; }

/* HTMX request overlay: dim content during loads */
.htmx-request-overlay {
    position: relative;
}
.htmx-request-overlay.htmx-request::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--sp-deep-rgb), 0.06);
    border-radius: inherit;
    z-index: 10;
    pointer-events: all;
}
/* Disable interactive elements during request */
.htmx-request button,
.htmx-request select,
.htmx-request input,
.htmx-request a {
    pointer-events: none;
    opacity: 0.6;
}

/* ============================================================
   CONFIRMATION DIALOG
   ============================================================ */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,17,30,0.6);
    backdrop-filter: blur(2px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}
.confirm-dialog {
    background: var(--sp-surface-0);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-card-radius);
    padding: 1.75rem;
    max-width: 440px;
    width: 90%;
    box-shadow: var(--sp-shadow-xl);
}
[data-bs-theme="dark"] .confirm-dialog {
    background: var(--sp-surface-2);
    border-color: var(--sp-border);
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.no-margin { margin: 0 !important; }
.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 1rem; }
.mt-sm { margin-top: 0.25rem; }
.hidden { display: none !important; }
.flex-center { display: flex; align-items: center; gap: 0.5rem; }
.flex-wrap-gap { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.flex-end { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.flex-end-bottom { display: flex; align-items: flex-end; gap: 0.5rem; }
.text-active { color: var(--sp-teal); }
.text-inactive { color: var(--sp-danger-fg); }

/* Grid helper */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.grid.filter-bar { margin-bottom: 1rem; }

/* Alert dismiss */
.alert-dismissible .btn-close { padding: 0.5rem; }

/* ============================================================
   HELP TEXT
   ============================================================ */
.help-text {
    display: block;
    color: var(--sp-text-muted);
    font-size: 0.82rem;
    margin-top: 0.3rem;
    line-height: 1.5;
}

/* ============================================================
   RESPONSIVE TABLES
   ============================================================ */
.table-responsive-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Column picker ── */
.col-picker {
    position: relative;
    display: inline-block;
}
.col-picker-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    min-width: 12rem;
    /* 49 optional columns on the enrichment table: the panel scrolls rather
       than running off the bottom of the page. */
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.45rem;
    background: var(--surface-0);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}
/* Show all / Hide all, pinned above the list so it stays reachable while the
   column names scroll. */
.col-picker-bulk {
    position: sticky;
    top: -0.45rem;
    display: flex;
    gap: 0.35rem;
    padding: 0.35rem 0.4rem;
    margin: -0.45rem -0.45rem 0.25rem;
    background: var(--surface-0);
    border-bottom: 1px solid var(--border);
}
.col-picker-bulk button { flex: 1; }
.col-picker-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    /* 44px minimum touch target — the panel is reachable on tablets too. */
    min-height: 44px;
    padding: 0 0.4rem;
    font-size: 0.84rem;
    cursor: pointer;
    white-space: nowrap;
}
.col-picker-item:hover { background: var(--surface-1); }

/* ── Keyboard row navigation ── */
/* Colour alone would not distinguish the active row for a colourblind user, so
   it also carries a left bar. */
tr.row-active > * { background: var(--accent-soft); }
tr.row-active > *:first-child { box-shadow: inset 3px 0 0 var(--accent-text, var(--accent)); }

/* ── Shortcut help sheet ── */
.shortcut-help {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1000;
    max-width: 22rem;
    padding: 1rem 1.1rem;
    background: var(--surface-0);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: 0.86rem;
}
.shortcut-help h2 {
    margin: 0 0 0.6rem;
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.shortcut-help dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.7rem;
    margin: 0;
}
.shortcut-help dt { margin: 0; }
.shortcut-help dd { margin: 0; color: var(--text-secondary); }
.shortcut-help kbd {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--surface-1);
}

/* Sticky column headers for long row tables. Opt-in per table, because
   overflow-x on the wrapper already makes it a scroll container (see the
   .matrix-scroll note below) — the box has to be height-bounded or top:0
   resolves to the top of the table and sticks to nothing. */
.table-sticky-head {
    max-height: calc(100vh - 13rem);
    overflow: auto;
}
.table-sticky-head thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--paper);
}

/* Strategy Breakdown matrix (loaded via HTMX partial sf_strategy_matrix.html) */
.matrix-table th,
.matrix-table td { white-space: nowrap; }
.matrix-table .wo-cell { padding-left: 1.75rem; }
/* Bounded scroll box so the sticky thead freezes against it (overflow-x alone
   makes the table its own full-height scroll context, defeating top:0). */
.matrix-scroll { max-height: 70vh; overflow: auto; }
/* Sticky header + first column so labels stay visible when scrolling a wide matrix */
.matrix-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--sp-surface-0);
}
.matrix-table thead th:first-child,
.matrix-table tbody th:first-child,
.matrix-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--sp-surface-0);
}
.matrix-table thead th:first-child { z-index: 3; }
/* Client group rows: stronger banding than work-order rows */
.matrix-table .client-row > th,
.matrix-table .client-row > td {
    background: var(--sp-surface-1);
    font-weight: 600;
    border-top: 2px solid var(--sp-border-strong);
}
.matrix-table .grand-row > th,
.matrix-table .grand-row > td {
    background: var(--sp-surface-1);
    border-top: 2px solid var(--sp-border-strong);
    font-weight: 700;
}
/* Dim zero counts so real values pop in a dense grid (no info loss) */
.matrix-table .cell-zero { color: var(--sp-text-secondary); opacity: 0.45; }
/* Delta badges — theme-aware (Bootstrap semantic vars adapt to dark mode) */
.delta-up { color: var(--bs-success, #198754); }
.delta-down { color: var(--bs-danger, #dc3545); }
.delta-flat { color: var(--sp-text-secondary, #6c757d); }

/* Insights: pipeline funnel (CSS bars) */
.funnel-stage {
    display: grid;
    grid-template-columns: 9rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.funnel-label {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.funnel-track {
    background: var(--sp-surface-1);
    border-radius: 3px;
    height: 0.9rem;
    overflow: hidden;
}
.funnel-bar {
    display: block;
    height: 100%;
    min-width: 2px;
    background: var(--sp-accent);
    border-radius: 3px;
}
.funnel-count { font-size: 0.8rem; white-space: nowrap; }

/* Insights: per-client trend sparkline (CSS bars) */
.trend-row {
    display: grid;
    grid-template-columns: 9rem 1fr auto;
    align-items: end;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.trend-label {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trend-spark {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 1.5rem;
}
.trend-spark .spark-bar {
    flex: 1 1 auto;
    min-height: 2px;
    background: var(--sp-accent);
    opacity: 0.7;
    border-radius: 1px;
}
.trend-last { font-size: 0.8rem; white-space: nowrap; }

/* Pipeline list table */
.pipeline-table { table-layout: fixed; width: 100%; }
.pipeline-table th,
.pipeline-table td { overflow: hidden; text-overflow: ellipsis; }
.pipeline-table .status-col { overflow: visible; min-width: 160px; }
.pipeline-actions {
    white-space: nowrap;
    overflow: visible;
}
.pipeline-actions a,
.pipeline-actions button {
    margin-right: 0.25rem;
}

/* ============================================================
   MICRO-INTERACTIONS & SMOOTH TRANSITIONS
   ============================================================ */

/* Row selection highlight */
.table tbody tr.row-selected {
    background: color-mix(in srgb, var(--sp-accent) 8%, transparent) !important;
    outline: 1px solid rgba(var(--sp-accent-rgb), 0.3);
    outline-offset: -1px;
}

/* Checkbox check animation */
input[type="checkbox"] {
    accent-color: var(--sp-accent);
    cursor: pointer;
}

/* Smooth link transitions */
a {
    transition: color var(--sp-transition-fast), opacity var(--sp-transition-fast);
}

/* Focus ring for accessibility */
:focus-visible {
    outline: 2px solid var(--sp-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 991.98px) {
    .classification-table { font-size: 0.8rem; }
    .classification-table th,
    .classification-table td { padding: 0.35rem 0.4rem; }
    .decision-factors-cell { max-width: 160px; }
    main.container { max-width: 100%; padding-left: 0.75rem; padding-right: 0.75rem; }
    .workflow-steps { gap: 0; }
    .workflow-step { font-size: 0.78rem; padding: 0.45rem 0.8rem; }
    .bulk-action-toolbar { width: calc(100% - 2rem); border-radius: var(--sp-card-radius); }
}

@media (max-width: 767.98px) {
    html { font-size: 13.5px; }
    .notif-dropdown { width: calc(100vw - 1.5rem); right: -0.5rem; }
    .filter-bar .form-select,
    .filter-bar .form-control { font-size: 0.85rem; }
    .admin-table th,
    .admin-table td { font-size: 0.82rem; padding: 0.4rem 0.5rem; }
    figure { margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Hide low-priority columns on mobile to prevent horizontal scroll */
    .classification-table .decision-factors-cell,
    .classification-table .decision-factors-header,
    .hide-mobile { display: none; }
    .classification-table { font-size: 0.78rem; }
    h2, .h5 { font-size: 1.05rem; }
    .stat-card .stat-number { font-size: 1.6rem; }
    .toast-container { right: 0.75rem; left: 0.75rem; }
    .sp-toast { min-width: unset; max-width: 100%; }
    .empty-state { padding: 2.5rem 1.25rem; }
    .workflow-steps { flex-wrap: wrap; }
}

@media (max-width: 575.98px) {
    .stat-card { padding: 1rem 0.75rem; }
    .table thead th { font-size: 0.72rem; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    .app-sidebar, .app-footer, .bulk-action-toolbar,
    .toast-container { display: none !important; }
    .card { box-shadow: none; border: 1px solid #ccc; }
    body { background: white; color: black; }
}