/* ============================================================================
   Nimmer Hub — application stylesheet
   ----------------------------------------------------------------------------
   Single source of truth for the shared UI vocabulary. Page templates must not
   redefine anything in here; they add only genuinely page-specific rules in
   their own {% block head %}, which loads after this file and therefore wins
   without needing !important.

   Layout:
     1. Tokens          6. Tables
     2. Base            7. Forms & filters
     3. Navigation      8. Buttons
     4. Page chrome     9. Badges & pills
     5. Surfaces       10. In-page nav, progress, pipelines
                       11. Domain bits, utilities, responsive, a11y
   ============================================================================ */

/* -- 1. Tokens ------------------------------------------------------------ */
:root {
    /* Surfaces */
    --color-bg: #0a0a0a;
    --color-bg-card: #111111;
    --color-bg-card-hover: #161616;
    --color-bg-input: #1a1a1a;
    --color-bg-nav: #000000;
    --color-bg-subtle: rgba(255, 255, 255, 0.03);
    --color-bg-raised: rgba(255, 255, 255, 0.06);

    /* Text */
    --color-text: #f4f4f4;
    --color-text-secondary: #999999;
    --color-text-muted: #666666;

    /* Brand */
    --color-accent: #f2d87c;
    --color-accent-hover: #e5c85a;
    --color-accent-soft: rgba(242, 216, 124, 0.10);
    --color-on-accent: #000000;

    /* Lines */
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-light: rgba(255, 255, 255, 0.12);

    /* Semantic */
    --color-success: #4ade80;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #60a5fa;
    /* Lighter red for danger used as body text, where #ef4444 is thin on
       near-black. Backgrounds and borders keep --color-danger. */
    --color-danger-soft: #f87171;

    /* Status badge families - tinted surface + legible foreground.
       Every .status-* / .type-* class below maps onto one of these. */
    --badge-neutral-bg: #2b2f36;  --badge-neutral-fg: #c3c9d1;
    --badge-muted-bg:   #1c1c1c;  --badge-muted-fg:   #7a7a7a;
    --badge-info-bg:    #16304f;  --badge-info-fg:    #93c5fd;
    --badge-violet-bg:  #33215e;  --badge-violet-fg:  #c4b5fd;
    --badge-magenta-bg: #4d1740;  --badge-magenta-fg: #f0a6d0;
    --badge-amber-bg:   #4a2f0b;  --badge-amber-fg:   #fbbf24;
    --badge-green-bg:   #123d24;  --badge-green-fg:   #6ee7b7;
    --badge-red-bg:     #4a1515;  --badge-red-fg:     #fca5a5;

    /* Shape & type */
    --radius-sm: 3px;
    --radius: 4px;
    --radius-lg: 6px;
    --font-main: Karla, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --shadow-menu: 0 6px 20px rgba(0, 0, 0, 0.4);
    --content-max: 1400px;
}

/* -- 2. Base -------------------------------------------------------------- */
[x-cloak] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--color-accent-hover); }

h1 {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text);
}
h1 span { color: var(--color-accent); }
h2 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text);
}
h3 { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.5px; }

code, pre, .mono { font-family: var(--font-mono); }

/* -- 3. Navigation -------------------------------------------------------- */
/* The bar is two rows: .nav-primary carries the workflow groups, and
   .nav-secondary the pages inside the active group (see app/nav.py). The
   wrapper owns the sticky positioning so both rows pin together -- making
   the second row sticky on its own would need a hard-coded `top` equal to
   the height of the first. */
.nav-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg-nav);
    border-bottom: 1px solid var(--color-border);
}
nav {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 1.5rem;
    flex-wrap: wrap;
}
/* Second row: quieter than the group row, so the eye lands on the group
   first. Its own background separates it from the page beneath. */
.nav-secondary {
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
    padding-left: calc(1.5rem + 30px);
}
.nav-secondary a {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 1.2px;
    padding: 0.55rem 0.8rem;
    color: var(--color-text-secondary);
}
.nav-secondary a:hover { color: var(--color-accent); }
.nav-secondary a.active {
    color: var(--color-accent);
    font-weight: 700;
}
nav a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0.85rem 0.9rem;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}
nav a:hover {
    color: var(--color-accent);
    background: var(--color-accent-soft);
}
/* Current section. Set from base.html against request.blueprint. */
nav a.active {
    color: var(--color-accent);
    box-shadow: inset 0 -2px 0 var(--color-accent);
}
.nav-brand {
    padding: 0.4rem 1.5rem 0.4rem 0;
    margin-right: 0.5rem;
    border-right: 1px solid var(--color-border);
    display: flex;
    align-items: center;
}
.nav-brand img {
    height: 30px;
    width: auto;
    transition: opacity 0.2s ease;
}
.nav-brand:hover img { opacity: 0.8; }
.nav-brand.active { box-shadow: none; }
.nav-spacer { flex: 1; }
.nav-user {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
}

.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    outline: none;
}
.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.nav-dropdown-caret {
    font-size: 0.65rem;
    opacity: 0.6;
    transition: transform 0.15s ease;
}
.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown:focus-within .nav-dropdown-caret {
    transform: translateY(1px);
    opacity: 1;
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.35rem 0;
    z-index: 200;
    box-shadow: var(--shadow-menu);
    flex-direction: column;
}
/* The System menu sits at the right edge, so it opens leftwards rather than
   off the side of the viewport. */
.nav-dropdown-menu-right { left: auto; right: 0; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: flex; }
.nav-dropdown-menu a {
    padding: 0.5rem 0.9rem;
    font-size: 0.72rem;
    letter-spacing: 1px;
    white-space: nowrap;
}
.nav-dropdown-menu a:hover {
    background: rgba(242, 216, 124, 0.07);
    color: var(--color-accent);
}
.nav-dropdown-divider {
    height: 1px;
    background: var(--color-border);
    margin: 0.3rem 0.5rem;
}

/* -- 4. Page chrome ------------------------------------------------------- */
main {
    padding: 1.5rem 2rem;
    max-width: var(--content-max);
    margin: 0 auto;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.page-header h1 { margin: 0; }
.header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.back-link {
    display: inline-block;
    margin-bottom: 0.85rem;
    font-size: 0.85rem;
    color: var(--color-accent);
}

.flash-messages {
    list-style: none;
    padding: 0.75rem 2rem 0;
    margin: 0 auto;
    max-width: var(--content-max);
}
.flash-messages li {
    padding: 0.6rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
}
.flash-success { border-color: var(--color-success); color: var(--color-success); }
.flash-warning { border-color: var(--color-warning); color: var(--color-warning); }
.flash-danger, .flash-error { border-color: var(--color-danger); color: var(--color-danger); }
.flash-info { border-color: var(--color-info); color: var(--color-info); }

.empty-state {
    text-align: center;
    color: var(--color-text-muted);
    padding: 3rem 1rem;
    font-size: 0.95rem;
}

.hint {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}

/* -- 5. Surfaces ---------------------------------------------------------- */
.card,
.section-card,
.section,
.event-form {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: var(--color-bg-card);
}
.card h2,
.section-card h2,
.section h2 {
    margin: 0 0 1rem 0;
    font-size: 1.05rem;
}

/* A card whose own children own the padding (header band + body), e.g. the
   dashboard tiles. Padding on the container would inset those bands. */
.card--split {
    padding: 0;
    overflow: hidden;
}

.summary-bar {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Horizontal definition rows used on detail pages. */
.timeline,
.entity-summary,
.entity-meta {
    display: flex;
    gap: 2rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
}
.timeline dt,
.entity-summary dt,
.entity-meta dt,
.timeline-item dt {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.timeline dd,
.entity-summary dd,
.entity-meta dd,
.timeline-item dd { margin: 0 0 0.25rem 0; }

/* -- 6. Tables ------------------------------------------------------------ */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
th {
    background: var(--color-bg-subtle);
    text-align: left;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
td, th {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
tbody tr:hover td { background: var(--color-bg-card-hover); }
td a { color: var(--color-accent); }
td a:hover { text-decoration: underline; }

/* -- 7. Forms & filters --------------------------------------------------- */
label {
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
input, select, textarea {
    background: var(--color-bg-input);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: 0.9rem;
    padding: 0.45rem 0.5rem;
    transition: border-color 0.2s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}
input[type="checkbox"], input[type="radio"] {
    padding: 0;
    accent-color: var(--color-accent);
}
option {
    background: var(--color-bg-input);
    color: var(--color-text);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.form-group.full-width { grid-column: 1 / -1; }
.form-group input,
.form-group select,
.form-group textarea { width: 100%; }
.form-group textarea {
    min-height: 5rem;
    resize: vertical;
}
.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

/* Radio/checkbox rows read as options, not as field labels. */
.rating-group {
    display: flex;
    gap: 0.75rem;
    padding-top: 0.25rem;
    flex-wrap: wrap;
}
.rating-group label,
label.inline-option {
    font-weight: 400;
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}

.filter-bar {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1.5rem;
    background: var(--color-bg-card);
}
.filter-bar form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.filter-group label { font-size: 0.72rem; }
.filter-group input,
.filter-group select { font-size: 0.85rem; }

/* -- 8. Buttons ----------------------------------------------------------- */
.btn,
button[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.45rem 0.85rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-small {
    padding: 0.25rem 0.55rem;
    font-size: 0.72rem;
}
.btn:disabled,
button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* There are three real button roles - primary, secondary and danger. The
   other class names below are older intent-named aliases (.btn-save,
   .btn-reject, ...) kept so existing markup keeps working; use the role
   names for anything new. */

/* Primary - the affirmative action on a page. */
.btn-primary, .btn-save, .btn-new, .btn-confirm, .btn-book, .btn-complete,
.btn-copy, .btn-login, .btn-verify, .btn-merge {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-color: var(--color-accent);
}
.btn-primary:hover, .btn-save:hover, .btn-new:hover, .btn-confirm:hover,
.btn-book:hover, .btn-complete:hover, .btn-copy:hover, .btn-login:hover,
.btn-verify:hover, .btn-merge:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-on-accent);
}

/* Secondary - outlined, for everything non-committal. */
.btn-secondary, .btn-cancel, .btn-ghost, .btn-filter, .btn-restore, .btn-log {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-light);
}
.btn-secondary:hover, .btn-cancel:hover, .btn-ghost:hover,
.btn-restore:hover, .btn-log:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-text-secondary);
    color: var(--color-text);
}
.btn-filter:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Danger - destructive. Outlined so it reads as a warning rather than
   competing with the primary action for attention. */
.btn-danger, .btn-dismiss, .btn-reject {
    background: transparent;
    color: var(--color-danger);
    border-color: rgba(239, 68, 68, 0.45);
}
.btn-danger:hover, .btn-dismiss:hover, .btn-reject:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.btn-warning {
    background: var(--color-warning);
    color: var(--color-on-accent);
    border-color: var(--color-warning);
}
.btn-warning:hover { background: #d97706; border-color: #d97706; }

/* Icon-only / minimal affordance inside dense UI. */
.icon-btn {
    background: transparent;
    border: 1px solid var(--color-border-light);
    color: var(--color-text-secondary);
    border-radius: var(--radius);
    cursor: pointer;
    padding: 0.2rem 0.45rem;
    font-family: var(--font-main);
}
.icon-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* -- 9. Badges & pills ---------------------------------------------------- */
.status-badge,
.task-status-badge,
.type-badge,
.badge {
    display: inline-block;
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--badge-neutral-bg);
    color: var(--badge-neutral-fg);
}
.task-status-badge {
    border: none;
    cursor: pointer;
    font-family: var(--font-main);
}
.type-badge {
    background: var(--color-bg-raised);
    color: var(--color-text-secondary);
}

.pill, .linked-module-pill {
    display: inline-block;
    background: var(--color-bg-raised);
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: 0.78rem;
    margin: 1px;
}

/* Status vocabulary. Grouped by meaning rather than by module so the same
   word always reads the same colour across the app. */
.status-planning, .status-planned, .status-idea, .status-inquiry,
.status-draft, .status-starting, .status-not_contacted,
.task-status-pending {
    background: var(--badge-neutral-bg); color: var(--badge-neutral-fg);
}
.status-archived, .status-ghosted {
    background: var(--badge-muted-bg); color: var(--badge-muted-fg);
}
.status-recording, .status-demo, .status-offer, .status-sent,
.status-running, .status-active, .task-status-in_progress {
    background: var(--badge-info-bg); color: var(--badge-info-fg);
}
.status-mixing, .status-recorded {
    background: var(--badge-violet-bg); color: var(--badge-violet-fg);
}
.status-mastering, .status-mixed {
    background: var(--badge-magenta-bg); color: var(--badge-magenta-fg);
}
.status-scheduled, .status-mastered, .status-pending {
    background: var(--badge-amber-bg); color: var(--badge-amber-fg);
}
.status-released, .status-confirmed, .status-accepted, .status-completed,
.status-done, .status-generated, .status-uploaded, .task-status-done {
    background: var(--badge-green-bg); color: var(--badge-green-fg);
}
.status-rejected, .status-cancelled, .status-error {
    background: var(--badge-red-bg); color: var(--badge-red-fg);
}

/* Bare status words in table cells - colour only, no chip. */
.status-cell { font-weight: 600; font-size: 0.85rem; }
.status-pending-text, .status-pending-label { color: var(--color-text-muted); }

/* Entity / campaign type badges. */
.type-blog     { background: var(--badge-violet-bg);  color: var(--badge-violet-fg); }
.type-radio    { background: var(--badge-info-bg);    color: var(--badge-info-fg); }
.type-podcast  { background: var(--badge-magenta-bg); color: var(--badge-magenta-fg); }
.type-organic  { background: transparent; color: var(--color-success); border: 1px solid rgba(74, 222, 128, 0.45); }
.type-paid     { background: transparent; color: var(--color-warning); border: 1px solid rgba(245, 158, 11, 0.45); }
.type-badge.auto   { background: rgba(74, 222, 128, 0.12); color: var(--color-success); }
.type-badge.manual { background: rgba(245, 158, 11, 0.12); color: var(--color-warning); }

/* -- 10. In-page navigation, progress, pipelines -------------------------- */
.tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.tab-bar a {
    padding: 0.5rem 1.25rem;
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.tab-bar a:hover { color: var(--color-text); }
.tab-bar a.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    font-size: 0.9rem;
}
.pagination a {
    color: var(--color-text);
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.pagination a:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.pagination .disabled {
    color: var(--color-text-muted);
    pointer-events: none;
    border-color: var(--color-border);
}
.pagination span { color: var(--color-text-secondary); }

.progress-bar, .progress-bar-wide {
    background: var(--color-bg-raised);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.progress-bar-fill {
    background: var(--color-accent);
    border-radius: var(--radius-sm);
    height: 100%;
    transition: width 0.3s ease;
}
.progress-text {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Segmented pipeline (event lifecycle): one clickable band per status. */
.status-pipeline {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.status-step {
    flex: 1;
    text-align: center;
    padding: 0.6rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--color-bg-card);
    color: var(--color-text-muted);
    border-right: 1px solid var(--color-border);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease;
}
.status-step:hover { background: var(--color-bg-card-hover); }
.status-step:last-child { border-right: none; }
.status-step.active-inquiry,
.status-step.active-offer,
.status-step.active-confirmed,
.status-step.active-completed,
.status-step.active-cancelled {
    color: var(--color-on-accent);
}
.status-step.active-inquiry   { background: var(--badge-neutral-fg); }
.status-step.active-offer     { background: var(--badge-info-fg); }
.status-step.active-confirmed { background: var(--color-success); }
.status-step.active-completed { background: var(--badge-green-fg); }
.status-step.active-cancelled { background: var(--color-danger); }

/* Dotted pipeline (release stages): dot + connector per step. */
.status-pipeline--dots { border: none; border-radius: 0; overflow: visible; }
.status-pipeline--dots .status-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background: transparent;
    border-right: none;
    cursor: default;
}
.status-pipeline--dots .status-step:hover { background: transparent; }
.step-dot-row {
    display: flex;
    align-items: center;
    width: 100%;
    height: 34px;
}
.step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--color-border-light);
    background: var(--color-bg-card);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-text);
}
.step-line, .step-connector { flex: 1; height: 3px; background: var(--color-border-light); }
.step-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}
.step-label {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: 600;
}
.status-step.past .step-dot,
.status-step.current .step-dot {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-accent);
}
.status-step.current .step-dot { box-shadow: 0 0 0 3px var(--color-accent-soft); }
.status-step.past .step-line,
.status-step.past .step-connector,
.status-step.current .step-line-left,
.status-step.current .step-connector { background: var(--color-accent); }
.status-step.past .step-label,
.status-step.current .step-label { color: var(--color-accent); }
.status-step:first-child .step-line-left,
.status-step:last-child .step-line-right { visibility: hidden; }

/* -- 11. Domain bits ------------------------------------------------------ */
/* Task / checklist emphasis */
.task-row-critical { border-left: 3px solid var(--color-danger); }
.task-row-critical td:first-child { padding-left: calc(0.5rem - 3px); }
.task-order {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    width: 30px;
    text-align: center;
}
.task-title-critical { font-weight: 700; }
.critical-icon {
    color: var(--color-danger);
    font-weight: 700;
    margin-right: 0.25rem;
}
.overdue-date { color: var(--color-danger); font-weight: 600; }
.days-warning { color: var(--color-warning); font-weight: 600; }

/* Row tints. Qualified with tbody so they outrank `tbody tr:hover td` and
   survive hovering, which is the whole point of tinting a row. */
tbody tr.row-warning td  { background: rgba(245, 158, 11, 0.08); }
tbody tr.row-accepted td { background: rgba(74, 222, 128, 0.10); }
tbody tr.row-rejected td { background: rgba(239, 68, 68, 0.10); }
tbody tr.row-sent td,
tbody tr.row-pending td  { background: var(--color-accent-soft); }
tbody tr.row-draft td    { background: rgba(255, 255, 255, 0.04); }
.warning-text {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.check-btn {
    background: transparent;
    border: 1px solid var(--color-border-light);
    color: var(--color-text);
    border-radius: var(--radius);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
}
.check-btn.submitted {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-color: var(--color-accent);
}

/* Financial summary tiles (event detail) */
.fin-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
    padding: 1rem;
    text-align: center;
}
.fin-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.fin-value {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 0.25rem;
    color: var(--color-text);
}
.fin-positive { color: var(--color-success); }
.fin-negative { color: var(--color-danger); }

.bulk-bar {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
}

.highlight-box {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-accent-soft);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.84rem;
}

/* Cluster status strip. _cluster_status_bar.html is included on ~25 pages, so
   its styling lives here rather than being re-emitted per page. */
.cluster-status-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.85rem;
    margin-bottom: 1.25rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: 0.82rem;
}
.cluster-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.dot-online { background: var(--color-success); box-shadow: 0 0 6px rgba(74, 222, 128, 0.5); }
.dot-offline { background: var(--color-danger); }
.dot-unknown { background: var(--color-text-muted); }
.cluster-label {
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.75rem;
}
.cluster-detail {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    color: var(--color-text-secondary);
}
.cluster-pill {
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.cluster-pill-mock { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); }
.cluster-pill-busy { background: rgba(96, 165, 250, 0.15); color: var(--color-info); }
.cluster-pill-groups { background: var(--color-accent-soft); color: var(--color-accent); }
.cluster-variant {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.3px;
}
.cluster-models { color: var(--color-text-secondary); }
.cluster-gpu { font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.cluster-spacer { flex: 1; }

/* -- Utilities ------------------------------------------------------------ */
.muted { color: var(--color-text-muted); }
.secondary-text { color: var(--color-text-secondary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-accent { color: var(--color-accent); }
.nowrap { white-space: nowrap; }

/* -- Scrollbar ------------------------------------------------------------ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: #333; border-radius: var(--radius); }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* -- Accessibility -------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--color-accent);
    color: var(--color-on-accent);
    padding: 0.5rem 0.9rem;
    border-radius: 0 0 var(--radius) 0;
    font-weight: 700;
    z-index: 1000;
}
.skip-link:focus { left: 0; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

/* -- Responsive ----------------------------------------------------------- */
@media (max-width: 768px) {
    nav { padding: 0 0.75rem; gap: 0.15rem; }
    nav a { font-size: 0.72rem; letter-spacing: 0.8px; padding: 0.5rem 0.4rem; }
    .nav-spacer { display: none; }
    /* Drop the alignment-under-the-logo indent; there is no room for it. */
    .nav-secondary { padding-left: 0.75rem; }
    .nav-secondary a { font-size: 0.68rem; padding: 0.45rem 0.5rem; }
    main { padding: 1rem 0.9rem; }
    .page-header { gap: 0.5rem; }
    .page-header h1 { font-size: 1.4rem; }
    .form-grid { grid-template-columns: 1fr; }
    .status-pipeline { flex-wrap: wrap; }
    /* Wide tables scroll horizontally instead of overflowing the viewport. */
    main table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}