/* ============================================================
   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 ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&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:    #b8822e;
    --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;
}

/* ── 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: 'IBM Plex Sans', 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: 'DM Sans', 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: 'IBM Plex 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: 'DM Sans', sans-serif;
}
.skip-link:focus { left: 0; }

/* ============================================================
   NAVBAR — Refined deep navy
   ============================================================ */
#main-navbar {
    background-color: var(--sp-deep);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 1px 8px rgba(0,0,0,0.25);
    padding-top: 0;
    padding-bottom: 0;
    min-height: 52px;
}

#main-navbar .navbar-brand {
    color: #fff !important;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.brand-icon {
    display: inline-flex;
    align-items: center;
    color: var(--sp-accent);
}

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

/* Nav link group with subtle dividers */
#main-navbar .navbar-nav {
    align-items: center;
    gap: 0.1rem;
}

#main-navbar .nav-link {
    color: rgba(255,255,255,0.72) !important;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.865rem;
    font-weight: 500;
    padding: 0.9rem 0.7rem !important;
    position: relative;
    transition: color var(--sp-transition-fast);
    white-space: nowrap;
}

#main-navbar .nav-link:hover,
#main-navbar .nav-link:focus {
    color: #fff !important;
}

/* Gold underline active state */
#main-navbar .nav-link.active {
    color: #fff !important;
    font-weight: 600;
}
#main-navbar .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.7rem;
    right: 0.7rem;
    height: 2px;
    background: var(--sp-accent);
    border-radius: 2px 2px 0 0;
}

/* Nav icon inside links */
#main-navbar .nav-icon {
    width: 15px;
    height: 15px;
    opacity: 0.72;
    vertical-align: -2px;
    margin-right: 0.2rem;
}

/* Nav group divider (add class="nav-divider" to a li) */
#main-navbar .nav-divider {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.14);
    margin: 0 0.5rem;
    align-self: center;
}

#main-navbar .navbar-toggler {
    border-color: rgba(255,255,255,0.3);
    padding: 0.35rem 0.6rem;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#main-navbar .badge.bg-secondary {
    background-color: rgba(255,255,255,0.15) !important;
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.03em;
}

/* Navbar icon buttons */
#main-navbar .btn-outline-secondary,
#main-navbar #theme-toggle {
    border-color: rgba(255,255,255,0.28);
    color: rgba(255,255,255,0.85) !important;
    background-color: transparent;
    padding: 0.3rem 0.55rem;
    font-size: 0.85rem;
    border-radius: var(--sp-btn-radius) !important;
    transition: background-color var(--sp-transition-fast), border-color var(--sp-transition-fast);
}
#main-navbar .btn-outline-secondary:hover,
#main-navbar #theme-toggle:hover {
    background-color: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.5);
    color: #fff !important;
}

/* ============================================================
   PIPELINE CONTEXT BAR
   A slim bar below the navbar showing the active pipeline
   ============================================================ */
.pipeline-context-bar {
    background: var(--sp-deep-hover);
    border-bottom: 1px solid rgba(var(--sp-accent-rgb), 0.25);
    padding: 0.3rem 0;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.75);
    font-family: 'IBM Plex Sans', sans-serif;
}

.pipeline-context-bar .pipeline-context-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pipeline-context-bar .pipeline-context-label {
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    font-weight: 600;
}

.pipeline-context-bar .pipeline-context-name {
    color: var(--sp-accent);
    font-weight: 600;
    font-size: 0.82rem;
}

.pipeline-context-bar .pipeline-context-sep {
    color: rgba(255,255,255,0.25);
}

/* ============================================================
   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: 'IBM Plex Sans', 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: 'DM Sans', 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: 'IBM Plex 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: 'IBM Plex Sans', 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: 'DM Sans', 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: 'DM Sans', 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: 'IBM Plex 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 {
    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: 'IBM Plex Sans', 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);
}

/* 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-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: 'IBM Plex Sans', 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: 'IBM Plex Sans', 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: 'DM Sans', 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 */

.decision-factors-cell {
    max-width: 300px;
    line-height: 1.4;
}
.decision-factor {
    margin: 0;
    font-size: 0.83rem;
    white-space: normal;
    word-break: break-word;
}
.decision-factor ~ .decision-factor {
    margin-top: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.decision-factor ~ .decision-factor ~ .decision-factor ~ .decision-factor { display: none; }
.decision-factors-cell:hover .decision-factor ~ .decision-factor ~ .decision-factor ~ .decision-factor {
    display: -webkit-box;
}
.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: 'IBM Plex Sans', 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: 'DM Sans', 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: 'IBM Plex Sans', 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;
}

/* Danger */
.btn-danger, button.btn-danger, button.delete-btn {
    color: var(--sp-danger-fg) !important;
    border-color: var(--sp-danger-border) !important;
    background: transparent !important;
}
.btn-danger:hover, button.delete-btn:hover {
    background-color: var(--sp-danger-bg) !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: 'IBM Plex Sans', 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: 'IBM Plex 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: 'IBM Plex Sans', 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: 'IBM Plex 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: 'IBM Plex Sans', 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: 'IBM Plex 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: 'IBM Plex 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: 'DM Sans', 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: 'IBM Plex 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: 'DM Sans', 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: 'IBM Plex 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);
    text-decoration: underline;
}

.notif-text { flex: 1; color: var(--sp-text-secondary); }
.notif-time {
    white-space: nowrap;
    font-size: 0.72rem;
    font-family: 'IBM Plex 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); 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: 'IBM Plex 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-select { padding: 0.15rem 0.4rem; font-size: 0.84rem; width: auto; }
.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;
}

/* 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: 1199.98px) {
    #main-navbar .nav-link { padding: 0.9rem 0.55rem !important; }
}

@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; }
    .navbar-nav { font-size: 0.9rem; }
    .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) {
    .pipeline-context-bar { font-size: 0.75rem; }
    .stat-card { padding: 1rem 0.75rem; }
    .table thead th { font-size: 0.72rem; }
}

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