/*
 * =============================================================================
 * OPSPORTAL DESIGN SYSTEM
 * =============================================================================
 *
 * Shares the visual identity with FirmPortal.
 *   Aesthetic: Quiet luxury + structured productivity
 *
 * BRAND: "Ink & Lime" (Palette 008) — migrated 2026-06-05 to match FirmPortal.
 *   Ink:      #0c0c0e (near-black — dark rail surface, text on lime)
 *   Accent:   #84cc16 lime (on light) / #a3e635 (on dark); INK text on lime
 *   Link:     #65a30d
 *   Neutrals: warm stone palette (unchanged)
 *
 * FONTS (Google Fonts)
 *   Body/UI:  Plus Jakarta Sans
 *   Display:  Reem Kufi (all headings)
 *   Italic:   Lora (emphasis only)
 *   Wordmark: stacked SVG asset (/img/wordmark-stacked-on-*.svg) + "OPS" tag
 *
 * =============================================================================
 */


/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */

:root {
    /* Accent — Ink & Lime (Palette 008) */
    --ip-accent: #84cc16;            /* lime — primary fill, progress, active, focus (light surfaces) */
    --ip-accent-rgb: 132, 204, 22;
    --ip-accent-hover: #6aa312;      /* lime-deep (lime 80% + black) */
    --ip-accent-light: #a3e635;      /* lime on dark surfaces */
    --ip-accent-on-dark: #a3e635;    /* alias for dark-surface lime accents */
    --ip-accent-subtle: #ebf5d0;     /* lime tint (lime 12% + white) */
    --ip-accent-subtle-hover: #e0eebb;
    --ip-on-accent: #0c0c0e;         /* INK text on lime fills — never white */
    --ip-ink: #0c0c0e;               /* near-black brand ink */
    --ip-link: #65a30d;              /* readable lime link on white */

    /* Status palette — cohesive with Ink & Lime.
       positive = done/confirmed (lime); active = in-progress (faint lime tint);
       action = needs-you (amber); neutral = inactive/info; danger = errors only. */
    --ip-positive-bg: #ebf5d0;       /* lime tint */
    --ip-positive-text: #3f5910;     /* deep lime */
    --ip-positive: #84cc16;          /* lime — dots, check circles */
    --ip-active-bg: #f4f9e6;         /* faint lime tint */
    --ip-active-text: #4d7c0f;       /* olive-lime */
    --ip-action-bg: #F6C453;         /* gold pill — action-required badges */
    --ip-action-text: #3D2A06;

    /* Warm stone neutrals */
    --ip-neutral-50: #FAFAFA;
    --ip-neutral-100: #F5F5F4;
    --ip-neutral-200: #E7E5E4;
    --ip-neutral-300: #D6D3D1;
    --ip-neutral-400: #A8A29E;
    --ip-neutral-500: #78716C;
    --ip-neutral-600: #57534E;
    --ip-neutral-700: #44403C;
    --ip-neutral-800: #292524;
    --ip-neutral-900: #1C1917;

    /* Fonts */
    --ip-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* body / UI */
    --ip-font-display: 'Reem Kufi', 'Plus Jakarta Sans', system-ui, sans-serif;  /* headings / display */
    --ip-font-serif: 'Lora', Georgia, serif;                                     /* italic emphasis only */

    /* Spacing */
    --ip-spacing-unit: 8px;

    /* Radius */
    --ip-radius-sm: 6px;
    --ip-radius-md: 8px;
    --ip-radius-lg: 12px;

    /* Transitions */
    --ip-transition-fast: 150ms ease;
    --ip-transition-normal: 200ms ease;

    /* Layout */
    --ip-sidebar-width: 260px;
}


/* =============================================================================
   2. BOOTSTRAP VARIABLE OVERRIDES
   ============================================================================= */

:root,
[data-bs-theme="light"] {
    /* Font */
    --bs-font-sans-serif: var(--ip-font-family);
    --bs-body-font-family: var(--ip-font-family);
    --bs-body-font-size: 0.9375rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.6;

    /* Primary = accent */
    --bs-primary: var(--ip-accent);
    --bs-primary-rgb: var(--ip-accent-rgb);
    --bs-primary-text-emphasis: #3f5910;
    --bs-primary-bg-subtle: var(--ip-accent-subtle);
    --bs-primary-border-subtle: #d4e8a8;

    /* Body colors */
    --bs-body-color: var(--ip-neutral-800);
    --bs-body-color-rgb: 41, 37, 36;
    --bs-body-bg: #FFFFFF;
    --bs-body-bg-rgb: 255, 255, 255;

    /* Secondary/tertiary */
    --bs-secondary-color: var(--ip-neutral-500);
    --bs-secondary-bg: var(--ip-neutral-100);
    --bs-tertiary-bg: var(--ip-neutral-50);
    --bs-tertiary-color: var(--ip-neutral-400);

    /* Headings */
    --bs-heading-color: var(--ip-neutral-900);

    /* Links — readable lime on white */
    --bs-link-color: var(--ip-link);
    --bs-link-color-rgb: 101, 163, 13;
    --bs-link-decoration: none;
    --bs-link-hover-color: var(--ip-accent-hover);
    --bs-link-hover-color-rgb: 106, 163, 18;

    /* Borders & radius */
    --bs-border-color: var(--ip-neutral-200);
    --bs-border-color-translucent: rgba(41, 37, 36, 0.08);
    --bs-border-radius: var(--ip-radius-md);
    --bs-border-radius-sm: var(--ip-radius-sm);
    --bs-border-radius-lg: var(--ip-radius-lg);

    /* Shadows — minimal */
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.06);

    /* Focus ring */
    --bs-focus-ring-color: rgba(132, 204, 22, 0.35);
    --bs-focus-ring-width: 0.2rem;

    /* Semantic colors — cohesive with Ink & Lime (no blue, no forest-green) */
    --bs-success: #4d7c0f;
    --bs-success-rgb: 77, 124, 15;
    --bs-danger: #C53030;
    --bs-danger-rgb: 197, 48, 48;
    --bs-warning: #B7791F;
    --bs-warning-rgb: 183, 121, 31;
    --bs-info: #57534E;
    --bs-info-rgb: 87, 83, 78;
}


/* =============================================================================
   3. BASE ELEMENT RESETS
   ============================================================================= */

body {
    font-family: var(--ip-font-family);
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

/* Links are governed by Bootstrap's reboot + the --bs-link-* tokens (set in
   section 2): deep-lime --ip-link (#65a30d) text, underlined, darkening to
   --ip-accent-hover on hover. Do NOT add a global `a` color/decoration reset —
   it would diverge from FirmPortal. Surfaces that need quiet, non-underlined
   links (sidebar, breadcrumbs, .app-logo, buttons) opt out via their own rules. */


/* =============================================================================
   4. TYPOGRAPHY SCALE
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
    color: var(--ip-neutral-900);
}

/* All headings use the Reem Kufi display face (Ink & Lime brand) */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--ip-font-display); }

h1 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
h2 { font-size: 1.5rem;   font-weight: 700; letter-spacing: -0.02em;  line-height: 1.25; }
h3 { font-size: 1.25rem;  font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
h5 { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }

h6 {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ip-neutral-500);
    line-height: 1.4;
}

/* Italic emphasis — Lora, in lime (brand convention) */
em {
    font-family: var(--ip-font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--ip-accent);
}

/* Text color utilities */
.text-neutral-400 { color: var(--ip-neutral-400) !important; }
.text-neutral-500 { color: var(--ip-neutral-500) !important; }
.text-neutral-600 { color: var(--ip-neutral-600) !important; }
.bg-neutral-50 { background-color: var(--ip-neutral-50) !important; }


/* =============================================================================
   5. COMPONENT OVERRIDES
   ============================================================================= */

/* ----- Buttons ----- */

.btn {
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: all var(--ip-transition-fast);
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    --bs-btn-color: var(--ip-on-accent);
    --bs-btn-bg: var(--ip-accent);
    --bs-btn-border-color: var(--ip-accent);
    --bs-btn-hover-color: var(--ip-on-accent);
    --bs-btn-hover-bg: var(--ip-accent-hover);
    --bs-btn-hover-border-color: var(--ip-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--ip-accent-rgb);
    --bs-btn-active-color: var(--ip-on-accent);
    --bs-btn-active-bg: var(--ip-accent-hover);
    --bs-btn-active-border-color: var(--ip-accent-hover);
    --bs-btn-disabled-color: var(--ip-on-accent);
    --bs-btn-disabled-bg: var(--ip-accent);
    --bs-btn-disabled-border-color: var(--ip-accent);
    --bs-btn-disabled-opacity: 0.5;
}

.btn-outline-primary {
    --bs-btn-color: var(--ip-accent-hover);
    --bs-btn-border-color: var(--ip-accent);
    --bs-btn-hover-color: var(--ip-on-accent);
    --bs-btn-hover-bg: var(--ip-accent);
    --bs-btn-hover-border-color: var(--ip-accent);
    --bs-btn-active-color: var(--ip-on-accent);
    --bs-btn-active-bg: var(--ip-accent-hover);
    --bs-btn-active-border-color: var(--ip-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--ip-accent-rgb);
}

/* Action button — the primary CTA INSIDE an amber action card/panel. Gold to match
   the count/status pills, so the action zone reads as one cohesive amber module.
   Lime stays reserved for non-action primary buttons. */
.btn-action {
    --bs-btn-color: var(--ip-action-text);
    --bs-btn-bg: var(--ip-action-bg);
    --bs-btn-border-color: var(--ip-action-bg);
    --bs-btn-hover-color: var(--ip-action-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ip-action-bg) 88%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ip-action-bg) 88%, black);
    --bs-btn-active-color: var(--ip-action-text);
    --bs-btn-active-bg: color-mix(in srgb, var(--ip-action-bg) 82%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--ip-action-bg) 82%, black);
    --bs-btn-disabled-color: var(--ip-action-text);
    --bs-btn-disabled-bg: var(--ip-action-bg);
    --bs-btn-disabled-border-color: var(--ip-action-bg);
    --bs-btn-disabled-opacity: 0.5;
}

.btn-secondary {
    --bs-btn-color: var(--ip-neutral-700);
    --bs-btn-bg: var(--ip-neutral-100);
    --bs-btn-border-color: var(--ip-neutral-200);
    --bs-btn-hover-color: var(--ip-neutral-800);
    --bs-btn-hover-bg: var(--ip-neutral-200);
    --bs-btn-hover-border-color: var(--ip-neutral-300);
    --bs-btn-active-color: var(--ip-neutral-900);
    --bs-btn-active-bg: var(--ip-neutral-200);
}

.btn-link {
    color: var(--ip-link);
    font-weight: 500;
}

.btn-link:hover {
    color: var(--ip-accent-hover);
}

/* ----- Forms ----- */

.form-control, .form-select {
    border-color: var(--ip-neutral-300);
    font-size: 0.9375rem;
    transition: border-color var(--ip-transition-fast), box-shadow var(--ip-transition-fast);
}

.form-control:hover, .form-select:hover {
    border-color: var(--ip-neutral-400);
}

.form-control:focus, .form-select:focus {
    border-color: var(--ip-accent);
    box-shadow: 0 0 0 3px rgba(var(--ip-accent-rgb), 0.1);
}

.form-control::placeholder {
    color: var(--ip-neutral-400);
}

.form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ip-neutral-700);
    margin-bottom: 4px;
}

.form-check-input:checked {
    background-color: var(--ip-accent);
    border-color: var(--ip-accent);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--ip-accent-rgb), 0.1);
    border-color: var(--ip-accent);
}

/* ----- Tables ----- */

.table {
    --bs-table-bg: transparent;
    font-size: 0.875rem;
    margin-bottom: 0;
}

.table > thead > tr > th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ip-neutral-500);
    border-bottom-width: 2px;
    border-bottom-color: var(--ip-neutral-200);
    padding: 10px 16px;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--ip-neutral-100);
    color: var(--ip-neutral-800);
}

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

/* ----- Badges ----- */

.badge {
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    padding: 3px 8px;
    border-radius: var(--ip-radius-sm);
}

/* ----- Alerts ----- */

.alert {
    border: none;
    border-left: 3px solid;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--ip-radius-md);
}

.alert-danger {
    background-color: #FDF2F2;
    color: #9B2C2C;
    border-left-color: var(--bs-danger);
}

.alert-success {
    background-color: var(--ip-positive-bg);
    color: var(--ip-positive-text);
    border-left-color: var(--bs-success);
}

.alert-warning {
    background-color: #FFFFF0;
    color: #975A16;
    border-left-color: var(--bs-warning);
}

.alert-info {
    background-color: var(--ip-neutral-100);
    color: var(--ip-neutral-700);
    border-left-color: var(--ip-neutral-400);
}

/* Positive badge (Bootstrap's success contextual) — lime tint, not solid green.
   Keeps the "ink on lime / lime = positive" story instead of white-on-green. */
.text-bg-success {
    background-color: var(--ip-positive-bg) !important;
    color: var(--ip-positive-text) !important;
}

/* ----- Modals ----- */

.modal-backdrop {
    --bs-backdrop-opacity: 0.3;
}

.modal-content {
    border: none;
    border-radius: var(--ip-radius-lg);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

/* ----- Nav Pills ----- */

.nav-pills .nav-link {
    color: var(--ip-neutral-600);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--ip-radius-sm);
    transition: all var(--ip-transition-fast);
}

.nav-pills .nav-link:hover {
    color: var(--ip-neutral-800);
    background-color: var(--ip-neutral-100);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--ip-accent);
}

/* ----- Breadcrumbs ----- */

.breadcrumb {
    font-size: 0.8125rem;
    margin-bottom: 16px;
}

/* Breadcrumb links are quiet (neutral, no underline) — they opt out of the
   default deep-lime underlined content-link treatment. */
.breadcrumb-item a {
    color: var(--ip-neutral-500);
    text-decoration: none;
    transition: color var(--ip-transition-fast);
}

.breadcrumb-item a:hover {
    color: var(--ip-accent);
}

/* ----- Dropdowns ----- */

.dropdown-menu {
    border: 1px solid var(--ip-neutral-200);
    border-radius: var(--ip-radius-md);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    padding: 4px;
    font-size: 0.875rem;
}

.dropdown-item {
    border-radius: var(--ip-radius-sm);
    padding: 6px 12px;
    font-size: 0.875rem;
    color: var(--ip-neutral-700);
}

.dropdown-item:hover {
    background-color: var(--ip-neutral-50);
    color: var(--ip-neutral-900);
}


/* =============================================================================
   6. APP LAYOUT (sidebar + main content)
   ============================================================================= */

.app-wrapper {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: var(--ip-sidebar-width);
    flex-shrink: 0;
    flex-direction: column;
    background:
        linear-gradient(134deg, rgba(12, 12, 14, 0) 70%, rgba(0, 0, 0, 0.55) 94%),
        radial-gradient(circle at 16px 180px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0.30) 760px),
        radial-gradient(circle at 50% 0%, #161617 0%, #0c0c0e 70%);
    border-right: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1030;
    overflow-y: auto;
}

.app-sidebar-header {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 40px 20px 16px 30px;
}

.app-sidebar-header .app-logo {
    flex-shrink: 0;
}

/* On the desktop rail, the "OPS" tag is centered (horizontally + vertically)
   in the space to the right of the wordmark. */
.app-sidebar-header .app-ops-tag {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

/* Logo — stacked SVG wordmark; light/dark variant chosen per surface in markup */
.app-logo {
    display: inline-flex;
    text-decoration: none;
}

.app-logo img {
    display: block;
    width: auto;
    height: 30px;
}

.auth-brand-panel .app-logo img { height: 76px; }

/* "OPS" identifier tag beneath the wordmark — marks the internal Ops tool.
   Lime on the ink rail; muted neutral on the white mobile bar. */
.app-ops-tag {
    display: block;
    margin-top: 10px;
    font-family: var(--ip-font-display);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ip-accent-on-dark);
}

.app-mobile-header .app-ops-tag {
    margin-top: 0;
    color: var(--ip-neutral-400);
}

.app-sidebar-nav {
    flex: 1;
    padding: 0 20px;
    overflow-y: auto;
}

.app-sidebar-footer {
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sidebar Nav Items */

.sidebar-nav-list {
    list-style: none;
    /* Top padding gives the first item (now the Dashboard link) breathing room below the
       logo — previously supplied by the leading group label's top padding. */
    padding: 20px 0 0;
    margin: 0;
}

.sidebar-nav-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 8px 12px;
}

.sidebar-nav-group-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
    padding: 10px 12px 6px;
}

.sidebar-nav-item {
    margin-bottom: 2px;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--ip-radius-sm);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--ip-transition-fast), color var(--ip-transition-fast);
}

.sidebar-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.sidebar-nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-weight: 600;
}

.sidebar-nav-link.active svg {
    color: var(--ip-accent-on-dark);
}

/* Sidebar User Menu */

.sidebar-user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-user-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    border-radius: var(--ip-radius-sm);
    transition: opacity var(--ip-transition-fast);
}

.sidebar-user-link:hover {
    opacity: 0.8;
}

.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

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

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

.sidebar-user-org {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-logout-form {
    flex-shrink: 0;
}

.sidebar-logout-btn {
    background: none;
    border: none;
    padding: 6px;
    border-radius: var(--ip-radius-sm);
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: color var(--ip-transition-fast), background-color var(--ip-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-logout-btn:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Main Content Area */

.app-main {
    flex: 1;
    /* Allow the flex item to shrink below its content's intrinsic width so that
       horizontally-scrolling children (e.g. the Projects swimlanes) scroll internally
       instead of widening the whole page. */
    min-width: 0;
    margin-left: var(--ip-sidebar-width);
    min-height: 100vh;
}

.app-content {
    padding: 40px 48px;
    max-width: 1400px;
}

/* Full-width pages (e.g. the horizontally-scrolling Projects board/timeline). */
.app-content--full {
    max-width: none;
}

/* Mobile Header */

.app-mobile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ip-neutral-200);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.app-menu-toggle {
    background: none;
    border: none;
    padding: 6px;
    color: var(--ip-neutral-700);
    cursor: pointer;
    border-radius: var(--ip-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--ip-transition-fast);
}

.app-menu-toggle:hover {
    background-color: var(--ip-neutral-100);
}

/* Offcanvas Sidebar */

.app-sidebar-offcanvas {
    width: var(--ip-sidebar-width) !important;
    background:
        linear-gradient(134deg, rgba(12, 12, 14, 0) 70%, rgba(0, 0, 0, 0.55) 94%),
        radial-gradient(circle at 16px 180px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0.30) 760px),
        radial-gradient(circle at 50% 0%, #161617 0%, #0c0c0e 70%);
}

.app-sidebar-offcanvas .offcanvas-header {
    padding: 24px 20px 16px;
    border-bottom: none;
}

.app-sidebar-offcanvas .btn-close {
    filter: invert(1);
}


/* =============================================================================
   7. AUTH LAYOUT
   ============================================================================= */

.auth-wrapper {
    display: flex;
    min-height: 100vh;
}

.auth-brand-panel {
    width: 45%;
    max-width: 600px;
    background: linear-gradient(29deg, rgba(87, 199, 133, 1) 0%, rgba(237, 221, 83, 1) 100%);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 48px 56px;
    position: relative;
    overflow: hidden;
}

.auth-brand-content {
    position: relative;
    z-index: 1;
}

/* Ink text on the bright brand gradient — never white */
.auth-brand-tagline {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.6);
    margin: 0;
}

.auth-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.auth-form-container {
    width: 100%;
    max-width: 420px;
}

@media (max-width: 767.98px) {
    .auth-form-panel {
        padding: 32px 20px;
    }

    .auth-form-container {
        max-width: 100%;
    }
}


/* =============================================================================
   8. SECTION SPACING
   ============================================================================= */

.section-gap {
    margin-bottom: 48px;
}

/* Mobile responsive */
@media (max-width: 991.98px) {
    .app-main {
        margin-left: 0;
    }

    .app-content {
        padding: 24px 16px;
    }
}


/* =============================================================================
   8. OPS-SPECIFIC UTILITIES
   ============================================================================= */

/* Nav pills bar (OPS filter bar) */
.nav-pills-bar {
    background-color: var(--ip-neutral-100);
    border-radius: 50rem;
    padding: 0.25rem;
    display: inline-flex;
}

.nav-pills-bar .nav-link {
    border-radius: 50rem;
    color: var(--ip-neutral-600);
    padding: 0.35rem 1rem;
    font-size: 0.875rem;
}

.nav-pills-bar .nav-link.active {
    background-color: #fff;
    color: var(--ip-neutral-900);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Sticky table headers */
.table-responsive thead.table-light th {
    position: sticky;
    top: 0;
    z-index: 1;
}


/* =============================================================================
   AUTO PILOT — STATUS DOT
   A 6px colored disc + label, used to indicate run outcome quietly.
   Color choice mirrors badge sentiment but reads at a glance, no boxed bg.
   ============================================================================= */

.ip-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--ip-neutral-700);
    line-height: 1;
}

.ip-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ip-status-dot--succeeded { background-color: var(--ip-positive); }
.ip-status-dot--failed    { background-color: #C53030; }
.ip-status-dot--skipped   { background-color: var(--ip-neutral-400); }
.ip-status-dot--running {
    background-color: var(--ip-accent);
    box-shadow: 0 0 0 0 rgba(132, 204, 22, 0.6);
    animation: ip-pulse 1.6s ease-out infinite;
}
.ip-status-dot--unknown   { background-color: var(--ip-neutral-300); }

@keyframes ip-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(132, 204, 22, 0.45); }
    70%  { box-shadow: 0 0 0 6px rgba(132, 204, 22, 0); }
    100% { box-shadow: 0 0 0 0 rgba(132, 204, 22, 0); }
}


/* =============================================================================
   AUTO PILOT — HEALTH STRIP
   Compact horizontal grid showing the most recent N run outcomes for a
   single (job, firm) pair. Use to spot anomalies at a glance.
   Successful runs fade to baseline; failed runs pop. Newest is rightmost.
   ============================================================================= */

.ip-health-strip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
}

.ip-health-cell {
    width: 11px;
    height: 18px;
    border-radius: 2px;
    background-color: var(--ip-neutral-200);
    transition: transform var(--ip-transition-fast);
}

.ip-health-cell:hover {
    transform: scaleY(1.15);
}

.ip-health-cell--succeeded { background-color: var(--ip-positive); }
.ip-health-cell--skipped   { background-color: var(--ip-neutral-300); }
.ip-health-cell--failed    { background-color: #C53030; }
.ip-health-cell--running   { background-color: var(--ip-accent); }
.ip-health-cell--empty     { background-color: var(--ip-neutral-100); }


/* =============================================================================
   AUTO PILOT — LIVE/UNREACHABLE INDICATOR
   A larger, more emphatic dot used in the overview page liveness tile.
   ============================================================================= */

.ip-live-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: 1px;
}

.ip-live-dot--up   { background-color: var(--ip-positive); box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.18); }
.ip-live-dot--down { background-color: #C53030; box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.16); }
.ip-live-dot--idle { background-color: var(--ip-neutral-300); }


/* =============================================================================
   AUTO PILOT — EVENT TIMELINE
   Chronological list of JobRunEvent rows on the run-detail page.
   Variant of the design-guide activity timeline with level coloring.
   ============================================================================= */

.ip-event-row {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ip-neutral-100);
}

.ip-event-row:last-child {
    border-bottom: none;
}

.ip-event-rail {
    flex-shrink: 0;
    width: 7px;
    margin-top: 6px;
    height: 7px;
    border-radius: 50%;
}

.ip-event-rail--info    { background-color: var(--ip-neutral-400); }
.ip-event-rail--warning { background-color: #B7791F; }
.ip-event-rail--error   { background-color: #C53030; }

.ip-event-time {
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    color: var(--ip-neutral-400);
    white-space: nowrap;
    width: 86px;
    flex-shrink: 0;
    margin-top: 2px;
}

.ip-event-body {
    flex-grow: 1;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--ip-neutral-800);
    line-height: 1.5;
}

.ip-event-body pre {
    margin: 8px 0 0;
    padding: 10px 12px;
    background-color: var(--ip-neutral-100);
    border-radius: var(--ip-radius-sm);
    font-size: 0.75rem;
    color: var(--ip-neutral-700);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow: auto;
}


/* =============================================================================
   AUTO PILOT — MONOSPACE / TABULAR NUMERICS
   Used for timestamps, durations, and IDs throughout the audit pages so
   columns visually align even at varying widths.
   ============================================================================= */

.ip-tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}


/* =============================================================================
   AUTO PILOT — ALERT TILE
   Subtle warning-tinted callout used for "jobs in alert state" on overview.
   Not loud; the warning hue is enough.
   ============================================================================= */

.ip-alert-tile {
    background-color: #FFFFF0;
    border-left: 3px solid #B7791F;
    border-radius: var(--ip-radius-md);
    padding: 16px 20px;
}


/* =============================================================================
   HOME DASHBOARD ("cockpit")
   Component styles for the operations dashboard at Home/Index. Card-based
   cockpit on light surfaces: KPI tiles, goals scoreboard, pipeline + by-firm
   bars, firm-lifecycle funnel, needs-you queue band, impact tiles, pulse +
   activity feed. A single one-time staggered reveal on load (.rise).
   ============================================================================= */

/* Card shell + section eyebrow */
.cockpit-card {
    background: #fff;
    border: 1px solid var(--ip-neutral-200);
    border-radius: var(--ip-radius-lg);
    padding: 20px 22px;
    height: 100%;
    box-shadow: 0 1px 2px rgba(28, 25, 23, 0.03);
}

.card-eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ip-neutral-400);
    margin-bottom: 4px;
}

/* Stub marker — a pane showing placeholder data, not yet wired to a real source.
   Darkens the pane and watermarks it. Remove `is-stub` from a card once its data
   is live, and the overlay disappears. */
.cockpit-card.is-stub { position: relative; }
.cockpit-card.is-stub::after {
    content: "Sample data";
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 25, 23, 0.16);
    border-radius: inherit;
    pointer-events: none;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

/* Sub-section stub — used inside a card that is partially wired to real data, to
   fade the individual bits that are still placeholder while the live bits stay
   crisp. Remove `stub-part` from an element once its data is real. */
.stub-part { opacity: 0.4; }

/* KPI tiles */
.kpi-value { font-family: var(--ip-font-display); font-weight: 700; font-size: 1.875rem; letter-spacing: -0.025em; color: var(--ip-neutral-900); line-height: 1.05; }
.kpi-delta { font-size: 0.75rem; font-weight: 600; }
.kpi-delta.up { color: var(--ip-positive-text); }
.kpi-delta.muted { color: var(--ip-neutral-400); }
.kpi-spark { display: block; width: 100%; height: 30px; }

/* Pipeline-by-stage bars */
.pl-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; }
.pl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ip-accent); }
.pl-name { width: 158px; flex-shrink: 0; font-size: 0.875rem; color: var(--ip-neutral-700); }
.pl-name .c { color: var(--ip-neutral-400); font-variant-numeric: tabular-nums; }
.pl-bar { flex: 1; height: 10px; background: var(--ip-neutral-100); border-radius: 50rem; overflow: hidden; }
.pl-bar > i { display: block; height: 100%; border-radius: 50rem; background: var(--ip-accent); }
.pl-val { width: 58px; flex-shrink: 0; text-align: right; font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ip-neutral-800); }

/* Needs-you queue band */
.nu-kind { flex-shrink: 0; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 50rem; }
.kind-attention { background: var(--ip-action-bg); color: var(--ip-action-text); }
.kind-progress  { background: var(--ip-active-bg);  color: var(--ip-active-text); }
.kind-error     { background: #FDF2F2;              color: #9B2C2C; }
.nu-band-row { display: flex; align-items: center; gap: 14px; padding: 12px 12px; border-radius: var(--ip-radius-md); text-decoration: none; transition: background-color var(--ip-transition-fast); }
.nu-band-row + .nu-band-row { border-top: 1px solid var(--ip-neutral-100); }
.nu-band-row:hover { background: var(--ip-neutral-50); }
.nu-band-row .nu-kind { width: 66px; text-align: center; flex-shrink: 0; font-size: 0.625rem; }
.nu-band-text { flex: 1; min-width: 0; font-size: 0.9375rem; color: var(--ip-neutral-800); }
.nu-band-text strong { font-weight: 600; color: var(--ip-neutral-900); }
.nu-band-age { flex-shrink: 0; width: 60px; text-align: right; font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--ip-neutral-400); }
.nu-band-age.is-urgent { color: #8a6d1f; font-weight: 600; }
.nu-band-open { flex-shrink: 0; width: 56px; text-align: right; font-size: 0.8125rem; color: var(--ip-neutral-400); white-space: nowrap; }
.nu-band-row:hover .nu-band-open { color: var(--ip-link); }

/* By-firm breakdown */
.bf-block { margin-bottom: 15px; }
.bf-block:last-child { margin-bottom: 0; }
.bf-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.bf-name { font-size: 0.875rem; font-weight: 500; color: var(--ip-neutral-800); }
.bf-val { font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ip-neutral-800); }
.bf-bar { width: 100%; height: 10px; background: var(--ip-neutral-100); border-radius: 50rem; overflow: hidden; }
.bf-bar > i { display: block; height: 100%; background: var(--ip-accent); border-radius: 50rem; }
.bf-sub { font-size: 0.6875rem; color: var(--ip-neutral-400); margin-top: 5px; }

/* Firm-lifecycle funnel (invite -> active), with inter-stage conversion % */
.firm-funnel { display: flex; align-items: flex-end; gap: 4px; margin-top: 12px; }
.ff-stage { flex: 1; display: flex; flex-direction: column; align-items: center; }
.ff-count { font-family: var(--ip-font-display); font-weight: 700; font-size: 0.875rem; color: var(--ip-neutral-900); margin-bottom: 5px; }
.ff-bar { width: 100%; max-width: 48px; background: var(--ip-accent); border-radius: 4px 4px 0 0; }
.ff-label { font-size: 0.625rem; color: var(--ip-neutral-500); margin-top: 7px; line-height: 1.2; text-align: center; min-height: 26px; }
.ff-conv { flex: 0 0 auto; width: 32px; text-align: center; font-size: 0.5625rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ip-neutral-400); padding-bottom: 46px; }
.ff-conv.leak { color: #8a6d1f; }

/* Goals scoreboard */
.gs-tier { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ip-neutral-400); margin: 13px 0 5px; }
.gs-northstar { margin-bottom: 4px; }
.gs-ns-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.gs-ns-name { font-size: 0.8125rem; font-weight: 600; color: var(--ip-neutral-700); }
.gs-ns-val { font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.gs-ns-val strong { font-family: var(--ip-font-display); font-weight: 700; color: var(--ip-neutral-900); }
.gs-ns-val .t { color: var(--ip-neutral-400); }
.gs-bar { height: 6px; background: var(--ip-neutral-200); border-radius: 50rem; overflow: hidden; }
.gs-bar > i { display: block; height: 100%; background: var(--ip-accent); border-radius: 50rem; }
.gs-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.gs-mark { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; }
.gs-mark.ok { background: var(--ip-positive); }
.gs-mark.behind { background: var(--ip-action-bg); }
.gs-name { flex: 1; min-width: 0; font-size: 0.8125rem; color: var(--ip-neutral-700); }
.gs-val { font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gs-val strong { font-weight: 600; color: var(--ip-neutral-900); }
.gs-val .t { color: var(--ip-neutral-400); }
.gs-info { display: inline-flex; vertical-align: -1px; margin-left: 4px; color: var(--ip-neutral-300); cursor: help; }
.gs-info:hover { color: var(--ip-neutral-500); }
.tooltip-inner { max-width: 260px; text-align: left; font-size: 0.75rem; padding: 8px 10px; }

/* Impact tiles */
.impact-icon { width: 44px; height: 44px; border-radius: var(--ip-radius-md); background: var(--ip-accent-subtle); display: flex; align-items: center; justify-content: center; color: var(--ip-accent-hover); margin-bottom: 14px; }
.impact-value { font-family: var(--ip-font-display); font-weight: 700; font-size: 1.625rem; letter-spacing: -0.02em; color: var(--ip-neutral-900); line-height: 1.1; }
.impact-label { font-size: 0.8125rem; color: var(--ip-neutral-500); line-height: 1.45; margin-top: 4px; }

/* Pulse: presence avatars + system status */
.avatar-stack { display: flex; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 600; border: 2px solid #fff; margin-left: -8px; }
.avatar:first-child { margin-left: 0; }
.avatar.firm { background: var(--ip-accent-subtle); color: var(--ip-accent-hover); }
.avatar.owner { background: var(--ip-neutral-200); color: var(--ip-neutral-600); }
.app-status { display: flex; align-items: center; gap: 7px; font-size: 0.8125rem; color: var(--ip-neutral-700); }

/* Activity feed */
.feed-row { display: flex; gap: 12px; padding: 9px 8px; margin: 0 -8px; border-radius: var(--ip-radius-sm); }
a.feed-row { text-decoration: none; color: inherit; transition: background-color 0.12s ease; }
a.feed-row:hover { background: var(--ip-neutral-50); }
.feed-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; background: var(--ip-positive); }
.feed-dot.neutral { background: var(--ip-neutral-300); }
.feed-text { font-size: 0.8125rem; color: var(--ip-neutral-700); line-height: 1.45; }
.feed-text strong { font-weight: 600; color: var(--ip-neutral-900); }
.feed-time { font-size: 0.75rem; color: var(--ip-neutral-400); }

/* One-time staggered reveal on load (respects reduced motion) */
@media (prefers-reduced-motion: no-preference) {
    .rise { opacity: 0; transform: translateY(8px); animation: rise-in 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
    @keyframes rise-in { to { opacity: 1; transform: translateY(0); } }
}

/* =============================================================================
   PROJECTS — board (kanban) + timeline (gantt)
   ============================================================================= */

/* View toggle tabs */
.proj-tabs { display: inline-flex; gap: 4px; background: var(--ip-neutral-100); padding: 3px; border-radius: var(--ip-radius-md); }
.proj-tab { padding: 6px 16px; border-radius: var(--ip-radius-sm); font-size: 0.8125rem; font-weight: 500; color: var(--ip-neutral-600); text-decoration: none; }
.proj-tab:hover { color: var(--ip-neutral-900); }
.proj-tab.active { background: #fff; color: var(--ip-neutral-900); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

/* Board */
.proj-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 14px; align-items: flex-start; }
.proj-cols { display: flex; gap: 16px; align-items: flex-start; }
.proj-col { flex: 0 0 280px; width: 280px; background: var(--ip-neutral-50); border: 1px solid var(--ip-neutral-100); border-radius: var(--ip-radius-md); display: flex; flex-direction: column; max-height: calc(100vh - 240px); }
.proj-col-head { padding: 12px 14px; border-bottom: 1px solid var(--ip-neutral-100); }
.proj-cols .proj-col-head { cursor: grab; }
.proj-col-title { font-weight: 600; font-size: 0.875rem; color: var(--ip-neutral-900); }
.proj-col-sub { font-size: 0.6875rem; color: var(--ip-neutral-400); margin-top: 2px; }
.proj-col-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 48px; overflow-y: auto; flex: 1 1 auto; }
.proj-card { background: #fff; border: 1px solid var(--ip-neutral-100); border-radius: var(--ip-radius-sm); padding: 10px; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.proj-card:active { cursor: grabbing; }
.proj-card-desc { font-size: 0.8125rem; font-weight: 500; line-height: 1.35; }
.proj-card-desc a { color: var(--ip-neutral-800); text-decoration: none; }
.proj-card-desc a:hover { text-decoration: underline; }
.proj-card-meta { font-size: 0.6875rem; color: var(--ip-neutral-400); margin-top: 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Card meta with a right-aligned hours chip (Projects board cards). */
.proj-card-meta--withhrs { flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
.proj-card-meta-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.proj-card-hrs { font-weight: 600; color: var(--ip-neutral-600); white-space: nowrap; cursor: pointer; flex-shrink: 0; }
/* Estimated → show the concise hours chip and hide the input; unestimated → show the input. */
.proj-card.has-estimate:not(.editing) .proj-card-est { display: none; }
.proj-card:not(.has-estimate) .proj-card-hrs { display: none; }
.proj-card.editing .proj-card-hrs { display: none; }
.proj-card-est { margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.proj-card-est input { width: 60px; padding: 2px 6px; font-size: 0.75rem; border: 1px solid var(--ip-neutral-200); border-radius: 4px; }
.proj-card-est label { font-size: 0.6875rem; color: var(--ip-neutral-400); }
.sortable-ghost { opacity: 0.35; }
.sortable-chosen { box-shadow: 0 4px 14px rgba(0,0,0,0.12); }

/* Workstream swimlanes */
.ws-backlog { border: 1px solid var(--ip-neutral-100); border-radius: var(--ip-radius-md); background: var(--ip-neutral-50); margin-bottom: 16px; }
.ws-backlog-head { padding: 10px 14px; font-weight: 600; font-size: 0.8125rem; color: var(--ip-neutral-700); border-bottom: 1px solid var(--ip-neutral-100); }
.ws-backlog-cards { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 10px; min-height: 58px; }
.ws-backlog-cards .proj-card { flex: 0 0 240px; width: 240px; }
.ws-lane { border: 1px solid var(--ip-neutral-100); border-radius: var(--ip-radius-md); margin-bottom: 14px; background: #fff; }
.ws-lane-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-left: 4px solid var(--ip-neutral-300); border-top-left-radius: var(--ip-radius-md); border-bottom: 1px solid var(--ip-neutral-100); cursor: grab; }
.ws-lane--unassigned .ws-lane-head { cursor: default; }
.ws-lane-title { font-weight: 600; font-size: 0.9375rem; color: var(--ip-neutral-900); }
.ws-lane-sub { font-size: 0.6875rem; color: var(--ip-neutral-400); }
.ws-lane-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ws-lane-cols { display: flex; gap: 14px; padding: 12px; overflow-x: auto; align-items: flex-start; min-height: 70px; }
.ws-lane-cols .proj-col { max-height: 440px; }
.ws-lane-cols .proj-col-head { cursor: grab; }
.ws-lane-empty { color: var(--ip-neutral-400); font-size: 0.8125rem; padding: 12px; }
.ws-color-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; position: relative; border: 2px solid transparent; }
.ws-swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ws-swatch:has(input:checked) { border-color: var(--ip-neutral-900); box-shadow: 0 0 0 2px #fff inset; }

/* Timeline (gantt) */
.tl-chart { position: relative; }
/* Faint weekend bands sit behind the rows, aligned with the track region (past the 220px labels). */
.tl-bands { position: absolute; left: 220px; right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 0; }
.tl-band { position: absolute; top: 0; bottom: 0; background: var(--ip-neutral-100); }
.tl-axis, .tl-row { position: relative; z-index: 1; }
.tl-axis { position: relative; height: 22px; margin-left: 220px; border-bottom: 1px solid var(--ip-neutral-200); margin-bottom: 10px; }
.tl-axis-mark { position: absolute; top: 0; font-size: 0.6875rem; color: var(--ip-neutral-400); transform: translateX(-1px); border-left: 1px solid var(--ip-neutral-100); padding-left: 4px; height: 100%; }
.tl-row { display: flex; align-items: center; height: 40px; }
.tl-label { flex: 0 0 220px; width: 220px; padding-right: 14px; }
.tl-label-name { font-size: 0.8125rem; font-weight: 500; color: var(--ip-neutral-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-label-sub { font-size: 0.6875rem; color: var(--ip-neutral-400); }
.tl-track { position: relative; flex: 1 1 auto; height: 100%; }
.tl-track::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--ip-neutral-100); }
.tl-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 22px; min-width: 6px; border-radius: 5px; display: flex; align-items: center; padding: 0 8px; font-size: 0.6875rem; color: #fff; white-space: nowrap; overflow: hidden; }
/* Placeholder (no estimate yet): hatched + dashed so it obviously reads as tentative. */
.tl-bar--placeholder { min-width: 12px; color: var(--ip-neutral-500); border: 1px dashed var(--ip-neutral-400); background: repeating-linear-gradient(45deg, var(--ip-neutral-200), var(--ip-neutral-200) 4px, var(--ip-neutral-50) 4px, var(--ip-neutral-50) 8px); }
.tl-legend-swatch { display: inline-block; width: 22px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.tl-bar-dates { display: flex; gap: 10px; font-size: 0.75rem; color: var(--ip-neutral-500); margin-left: 8px; white-space: nowrap; }
.tl-ws-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 0.8125rem; color: var(--ip-neutral-700); margin: 16px 0 6px; }
.tl-ws-head:first-of-type { margin-top: 4px; }
.tl-ws-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }