/* ============================================================================
   Cockpit shell — the redesigned frontend (Manrope + indigo).

   The shell is scoped under `.cockpit`, which RE-THEMES the app's CSS custom
   properties. Existing token-based components (settings sections, tables, forms,
   health indicators) adopt the new look automatically inside this shell — no
   component rewrites. The legacy shell (MainLayout / app.css) is untouched.

   Theme-aware: the cockpit follows the app's `data-theme` (set by the shared
   theme toggle + localStorage). Light values are the base; the dark block
   overrides them under `[data-theme="dark"]`, which is the app's default.
   ============================================================================ */

.cockpit {
    /* palette — light (base) */
    --bg: #F6F7F9;
    --surface: #FFFFFF;
    --surface-alt: #F3F5F7;
    --subtle-bg: #FAFBFC;
    --text: #0F1320;
    --text-muted: #59606E;
    --text-faint: #677080;   /* ≥4.5:1 on every surface — it labels small uppercase text */
    --accent: #5B5BD6;
    --accent-light: #4B49CB;
    --accent-fill: #5B5BD6;        /* filled buttons/badges with white text (≥4.5:1) */
    --accent-fill-hover: #4B49CB;
    --nav-active-fg: #3F3AC0;
    /* Status colours are also used as text on their own tinted backgrounds (badges, pills) — keep ≥4.5:1 there. */
    --success: #137A3A;
    --error: #C81E1E;
    --warning: #AD4F08;
    --border: #E8EAEF;
    --hairline: #F0F1F4;
    --ctl-border: #DADDE4;
    --radius: 10px;

    --bg-hover: #F3F5F7;
    --success-bg: #E7F6EC;
    --error-bg: #FCEBEA;
    --warning-bg: #FBF1E2;
    --warning-border: #F1DFBE;
    --bg-info: #E4F5F9;
    --bg-success: #E7F6EC;
    --bg-error: #FCEBEA;
    --bg-active: #ECECFB;
    --bg-active-alt: #F1ECFD;
    --brand-shadow: rgba(91, 91, 214, .30);

    /* The one monospace stack for IDs, logs, code and data cells. */
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;

    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* palette — dark (the app's default theme). Overrides only the token values. */
[data-theme="dark"] .cockpit {
    --bg: #101017;
    --surface: #191A22;
    --surface-alt: #23242F;
    --subtle-bg: #1E1F28;
    --text: #E9EAF1;
    --text-muted: #A2A8B6;
    --text-faint: #858B9B;
    --accent: #8385F0;
    --accent-light: #A6A7F6;
    /* --accent is light for text on dark surfaces; white text needs a deeper fill. */
    --accent-fill: #5B5BD6;
    --accent-fill-hover: #6262DB;
    --nav-active-fg: #C3C3FA;
    --success: #34D399;
    --error: #F87171;
    --warning: #FBBF24;
    --border: #2A2C39;
    --hairline: #23242F;
    --ctl-border: #363845;

    --bg-hover: #23242F;
    --success-bg: rgba(52, 211, 153, .12);
    --error-bg: rgba(248, 113, 113, .12);
    --warning-bg: rgba(251, 191, 36, .12);
    --warning-border: rgba(251, 191, 36, .28);
    --bg-info: rgba(52, 211, 236, .12);
    --bg-success: rgba(52, 211, 153, .12);
    --bg-error: rgba(248, 113, 113, .12);
    --bg-active: #2B2B52;
    --bg-active-alt: #2C2246;
    --brand-shadow: rgba(131, 133, 240, .35);
}

/* Native widgets (scrollbars, checkboxes, file inputs, select pop-ups) follow the app theme,
   not the OS one — without this they render light inside the dark theme. */
[data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

/* Form controls don't inherit the page font by default (browsers fall back to e.g. Arial), and code
   elements use the browser's monospace. :where() keeps specificity at zero, so any class that sets
   its own font still wins. */
:where(.cockpit) :where(button, input, select, textarea, optgroup) { font-family: inherit; }
:where(.cockpit) :where(code, kbd, samp, pre) { font-family: var(--font-mono); }
:where(.cockpit) :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent-fill); }

.cockpit .mono {
    font-family: var(--font-mono);
}

/* ---- Base link color for the cockpit shell --------------------------------- */
/* Use :where() to keep specificity at 0-0-1 so any class on a link overrides. :hover goes inside :where()
   too — a bare `a:hover` is 0-1-1 and out-ranks single-class links such as .cockpit-nav-link, which then
   underline on hover. */
:where(.cockpit) a {
    color: var(--accent-light);
    text-decoration: none;
}
:where(.cockpit) a:where(:hover) {
    text-decoration: underline;
}

/* ---- Toggle switch — shared rule so all child components can use it --------- */
/* The scoped .toggle-switch in AgentCoding.razor.css only applies to AgentCoding
   itself because Blazor scoped CSS does not cross component boundaries. Moving
   this rule here (a global stylesheet) makes it available in TemplateTableSection,
   PipelineLoopSection, QualityGateConfigSection, and ReviewerConfigSection too.
   The scoped copies in *.razor.css remain as-is (they are harmless duplicates). */
:where(.cockpit, .settings-page) .toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    vertical-align: middle;
}
:where(.cockpit, .settings-page) .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
:where(.cockpit, .settings-page) .toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--surface-alt);
    border-radius: 20px;
    transition: background 0.2s;
}
:where(.cockpit, .settings-page) .toggle-slider::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}
:where(.cockpit, .settings-page) .toggle-switch input:checked + .toggle-slider {
    background: var(--success);
}
:where(.cockpit, .settings-page) .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(16px);
}

/* ---- sidebar --------------------------------------------------------------- */
.cockpit-sidebar {
    width: 248px;
    min-width: 248px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.cockpit-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 18px;
    height: 56px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border);
}

.cockpit-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px var(--brand-shadow);
    flex-shrink: 0;
}

.cockpit-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.cockpit-brand-name { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.cockpit-brand-sub { font-size: 11px; font-weight: 500; color: var(--text-faint); }

.cockpit-nav { display: flex; flex-direction: column; gap: 3px; padding: 14px 12px; }

.cockpit-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 9px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.cockpit-nav-link:hover { background: var(--bg-hover); color: var(--text); }
.cockpit-nav-link.active { background: var(--bg-active); color: var(--nav-active-fg); font-weight: 600; }
.cockpit-nav-icon { display: inline-flex; flex-shrink: 0; color: currentColor; }
.cockpit-nav-link:not(.active) .cockpit-nav-icon { color: var(--text-faint); }
.cockpit-nav-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.cockpit-nav-link.is-disabled { color: var(--text-faint); cursor: default; pointer-events: none; }
.cockpit-nav-link.is-disabled .cockpit-nav-icon { color: var(--text-faint); opacity: .7; }

.cockpit-nav-sep { height: 1px; background: var(--hairline); margin: 10px 8px; }
.cockpit-nav-group {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 4px 11px;
}

.cockpit-sidebar-footer { margin-top: auto; }
.cockpit-sidebar-footer .sidebar-health { margin-top: 0; border-top: 1px solid var(--border); }

.cockpit-theme-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 0;
    border: none;
    border-top: 1px solid var(--border);
    background: transparent;
    color: var(--text-faint);
    font: 600 12px 'Manrope', sans-serif;
    cursor: pointer;
}
.cockpit-theme-toggle:hover { background: var(--bg-hover); color: var(--text); }

/* ---- content column -------------------------------------------------------- */
.cockpit-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cockpit-topbar {
    height: 56px;
    flex-shrink: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
}

.cockpit-project-switcher {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 36px;
    border: 1px solid var(--ctl-border);
    border-radius: 9px;
    padding: 0 8px 0 12px;
    background: var(--surface);
    color: var(--text);
}
.cockpit-project-switcher .icon { color: var(--accent); }
.cockpit-project-switcher select {
    border: none;
    background: transparent;
    color: inherit;
    font: 600 13.5px 'Manrope', sans-serif;
    padding: 0 4px;
    cursor: pointer;
    outline: none;
}
.cockpit-project-switcher select option { background: var(--surface); color: var(--text); }

.cockpit-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.cockpit-attention {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--warning);
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
}
.cockpit-attention.is-disabled { color: var(--text-faint); background: var(--surface-alt); border-color: var(--border); }

.cockpit-body { flex: 1; overflow: auto; }

/* ---- First-run setup banner (legacy component, restyled for the cockpit) --- */
.cockpit .first-run-banner {
    display: flex; align-items: center; gap: 14px;
    margin: 16px 28px 0; padding: 11px 16px;
    background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: 12px;
    font-size: 13px;
}
.cockpit .first-run-banner-message { flex: 1; color: var(--text); line-height: 1.5; }
.cockpit .first-run-banner-message a { color: var(--warning); font-weight: 700; text-decoration: none; }
.cockpit .first-run-banner-message a:hover { text-decoration: underline; }
.cockpit .first-run-banner-dismiss {
    flex-shrink: 0; height: 30px; padding: 0 13px; border: 1px solid var(--ctl-border); border-radius: 8px;
    background: var(--surface); color: var(--text-muted); font: 600 12px 'Manrope', ui-sans-serif, sans-serif; cursor: pointer;
}
.cockpit .first-run-banner-dismiss:hover { color: var(--text); border-color: var(--accent); background: var(--bg-hover); }

/* ---- shared page chrome ---------------------------------------------------- */
.cockpit-page { padding: 22px 28px 40px; display: flex; flex-direction: column; gap: 16px; }
.cockpit-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.cockpit-page-header h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.cockpit-page-header .cockpit-page-sub { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.cockpit-page-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.cockpit-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cockpit-filter-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 12px; border: 1px solid var(--ctl-border); border-radius: 9px;
    background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.cockpit-filter-toggle.is-on { border-color: var(--accent); color: var(--nav-active-fg); background: var(--bg-active); }
.cockpit-filter-toggle input { margin: 0; }

.cockpit-segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt); }
.cockpit-seg-btn {
    height: 28px; padding: 0 12px; border: none; border-radius: 7px; background: transparent;
    color: var(--text-muted); font: 600 12.5px 'Manrope', ui-sans-serif, sans-serif; cursor: pointer; white-space: nowrap;
}
.cockpit-seg-btn:hover { color: var(--text); }
.cockpit-seg-btn.is-active { background: var(--surface); color: var(--nav-active-fg); box-shadow: 0 1px 2px rgba(15, 19, 32, .06); }

.cockpit-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cockpit-pager-info { font-size: 12.5px; color: var(--text-muted); }
.cockpit-pager-buttons { display: inline-flex; align-items: center; gap: 8px; }
.cockpit-pager-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px;
    border: 1px solid var(--ctl-border); border-radius: 9px; background: var(--surface);
    color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.cockpit-pager-btn:disabled { color: var(--text-faint); border-color: var(--border); cursor: default; }

.cockpit-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 19, 32, .04); overflow: hidden;
}
.cockpit-card-pad { padding: 16px 20px; }
.cockpit-card-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--hairline);
}
.cockpit-card-header h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }

.cockpit-back {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
    color: var(--text-muted); text-decoration: none;
}
.cockpit-back:hover { color: var(--accent); }

.cockpit-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; }
.cockpit-detail-grid .k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.cockpit-detail-grid .v { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 2px; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.cockpit-detail-item { min-width: 0; }

.cockpit-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13.5px; }

/* ---- Run page: links rail + review-findings breakdown ---------------------- */
.cockpit-links-rail { display: flex; flex-wrap: wrap; gap: 8px; }
.cockpit-link-chip {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
    border: 1px solid var(--ctl-border); border-radius: 9px; background: var(--surface);
    color: var(--text); font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.cockpit-link-chip:hover { border-color: var(--accent); color: var(--nav-active-fg); background: var(--bg-active); }
.cockpit-link-chip .icon { color: var(--accent); }

.cockpit-findings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cockpit-finding {
    display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 11px; background: var(--subtle-bg);
}
.cockpit-finding-v { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.cockpit-finding-l { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.cockpit-finding.is-critical .cockpit-finding-v { color: var(--error); }
.cockpit-finding.is-warning .cockpit-finding-v { color: var(--warning); }
.cockpit-finding.is-suggestion .cockpit-finding-v { color: var(--accent); }
.cockpit-detail-sub-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; }

/* ---- Run page: live trace log --------------------------------------------- */
.run-live-log {
    max-height: 380px; overflow: auto; margin: 0;
    font-family: var(--font-mono);
    font-size: 12px; line-height: 1.55; color: var(--text);
    background: var(--subtle-bg); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 14px; white-space: pre-wrap; word-break: break-word;
}

/* ---- Fleet: expandable agent detail row ------------------------------------ */
.cockpit .fleet-chevron { color: var(--text-faint); flex-shrink: 0; transition: none; }
.cockpit .fleet-detail-row > td { background: var(--subtle-bg); padding: 4px 16px 14px; }
.cockpit .fleet-detail-row .cockpit-detail-grid { gap: 12px 24px; }

.cockpit-stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cockpit-stat {
    background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 14px;
    display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 2px rgba(15, 19, 32, .04);
}
.cockpit-stat-l { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.cockpit-stat-v { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.cockpit-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; color: var(--text-muted); background: var(--surface-alt); margin: 0 3px 3px 0; }

/* Compact time-window selector inside a stat label */
.time-window-select {
    display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--accent); background: transparent;
    border: none; border-bottom: 1px solid var(--accent); padding: 0 2px;
    cursor: pointer; appearance: auto; vertical-align: middle; line-height: 1;
}

.cockpit-run-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 18px; border-bottom: 1px solid var(--hairline); cursor: pointer;
}
.cockpit-run-row:last-child { border-bottom: none; }
.cockpit-run-row:hover { background: var(--bg-hover); }
.cockpit-row-chevron { color: var(--text-faint); flex-shrink: 0; }

/* consolidation run-type badge (the other run-type-* variants already exist in app.css) */
.cockpit .run-type-consolidation { color: #6D28D9; background: var(--bg-active-alt); }
[data-theme="dark"] .cockpit .run-type-consolidation { color: #C3A6F5; }
.cockpit .monitoring-row-clickable { cursor: pointer; }

/* ---- Runs page: sort headers + column filters (issue #2328) ---------------- */
/* Sortable th button — resets button styling, inherits header uppercase look. */
.cockpit .monitoring-table thead th .sort-header {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.cockpit .monitoring-table thead th .sort-header:hover { color: var(--text); }

/* Active sort column: slightly highlighted th. */
.cockpit .monitoring-table thead th.sort-active { color: var(--nav-active-fg); }

/* Sort direction arrow. */
.cockpit .sort-indicator { font-size: 0.8em; opacity: 0.85; }

/* Column filter select — compact, inline below the sort button. */
.cockpit .monitoring-table thead th .column-filter {
    display: block;
    margin-top: 3px;
    width: 100%;
    font-size: 0.72rem;
    padding: 1px 4px;
    border: 1px solid var(--ctl-border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    /* overflow-hidden on th would clip the dropdown; keep overflow: visible on th.th-has-hint pattern */
}
.cockpit .monitoring-table thead th:has(.column-filter) { overflow: visible; vertical-align: top; }

/* Links cell: prevent row click propagation visually; flex layout for icon links. */
.cockpit .runs-links-cell { display: flex; align-items: center; gap: 5px; overflow: visible; white-space: nowrap; }
/* Fleet "Active work" cell: the <td> stays a table cell; the chips sit in an inner flex row. Only the issue
   chip's title shrinks (with an ellipsis) — the Run and PR chips always stay visible and clickable. */
.cockpit .fleet-work-links { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.cockpit .fleet-work-links > .runs-link { flex-shrink: 0; }
.cockpit .fleet-work-links > .fleet-work-issue { flex-shrink: 1; min-width: 0; overflow: hidden; }
.cockpit .fleet-work-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cockpit .runs-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 5px;
    text-decoration: none;
    background: var(--surface-alt);
    color: var(--accent);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.cockpit .runs-link:hover { background: var(--bg-active); color: var(--nav-active-fg); }
.cockpit .runs-link-pr { color: var(--success); }
.cockpit .runs-link-pr:hover { background: var(--success-bg); color: var(--success); }

/* ---- Tables that must fit their card at 1440px ------------------------------ */
/* .monitoring-table cells are nowrap, and in auto table layout "overflow: hidden; text-overflow: ellipsis"
   on a <td> does not stop long text from widening the column — the tables scrolled sideways and hid their
   action buttons. */

/* Work in-flight / queue: the issue column takes the remaining width and truncates (max-width: 0 stops its
   text from counting towards the column width), so Cancel/Remove stay in view. */
.cockpit .work-table td:first-child { width: 100%; max-width: 0; }

/* Pipelines templates: template and provider names are long repo slugs — wrap them instead. */
.cockpit .template-table td:nth-child(-n+5) { white-space: normal; overflow-wrap: anywhere; min-width: 120px; }
.cockpit .template-table .feature-badge-bar { flex-wrap: wrap; }

/* A table's first column lines up with its card title and its rows run edge to edge, in either card type:
   in a .cockpit-card the outer cells take the header's 18px (the 10px cell padding left the text 8px left of
   the title); in a padded .settings-section the table bleeds through the 20px card padding and the outer
   cells take that 20px instead (the stacked paddings put the text 8–10px right of the title). */
.cockpit .cockpit-card > .monitoring-table-wrap > table :is(th, td):first-child { padding-left: 18px; }
.cockpit .cockpit-card > .monitoring-table-wrap > table :is(th, td):last-child { padding-right: 18px; }
.cockpit .settings-section > .monitoring-table-wrap { margin-left: -20px; margin-right: -20px; }
.cockpit .settings-section > .monitoring-table-wrap > table :is(th, td):first-child { padding-left: 20px; }
.cockpit .settings-section > .monitoring-table-wrap > table :is(th, td):last-child { padding-right: 20px; }

/* Lists inside section cards: wrap every cell except the actions column. */
.cockpit .settings-section .monitoring-table td:not(:last-child) { white-space: normal; overflow-wrap: anywhere; }
/* Consolidation run history: the summary cell takes all spare width (width: 100%; max-width: 0), so the short
   columns keep their text on one line — with the wrap rule above they were squeezed to a few characters and
   split mid-word ("Succe|eded"). */
.cockpit .settings-section .monitoring-table.consolidation-history-table td:not(.consolidation-summary-cell) { white-space: nowrap; }
/* Settings page lists (profiles, quality gates, reviewers) wrap at word boundaries instead — anywhere split
   names and label chips mid-word once a column got narrow. Chips wrap as whole chips; headers wrap and cells
   are a little tighter, so the lists fit the content column at 1280px. */
.cockpit .settings-content .monitoring-table td:not(:last-child) { overflow-wrap: break-word; }
.cockpit .settings-content .monitoring-table .sidebar-label { display: inline-block; margin: 1px 3px 1px 0; white-space: nowrap; }
.cockpit .settings-content .monitoring-table th { white-space: normal; text-overflow: clip; }
.cockpit .settings-content .monitoring-table :is(th, td) { padding-left: 8px; padding-right: 8px; }

/* ---- Settings re-shell (scoped tweaks so it sits cleanly in the new frame) -- */
/* The page uses the shared .cockpit-page chrome. Drop the legacy full-height scroller from app.css: an
   overflow container here would also stop the tree from sticking. */
.cockpit .settings-page { height: auto; overflow: visible; }
.cockpit .settings-layout { gap: 16px; align-items: flex-start; overflow: visible; }

/* The tree is a card of its own, level with the content card, and stays in view while a long section
   scrolls (max-height leaves room for the 56px top bar and the 16px offsets). */
.cockpit .settings-tree {
    position: sticky; top: 16px;
    max-height: calc(100vh - 88px);
    padding: 8px;
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 19, 32, .04);
    scrollbar-width: thin; scrollbar-color: var(--ctl-border) transparent;
}
.cockpit .tree-group-header { padding: 7px 10px; border-radius: 8px; }
.cockpit .tree-group-children { gap: 1px; padding: 2px 0 6px; }
/* Tree links use the sidebar nav's item style: a rounded row, tinted when active. */
.cockpit .tree-node { padding: 5px 10px 5px 28px; border-left: 0; border-radius: 8px; }
.cockpit .tree-node:hover { background: var(--bg-hover); color: var(--text); }
.cockpit .tree-node.active { background: var(--bg-active); color: var(--nav-active-fg); font-weight: 600; }

/* The content column starts level with the tree; app.css pads it 20px on every side. */
.cockpit .settings-content { padding: 0; min-width: 0; }

/* Section cards match .cockpit-card: 14px radius, faint shadow, plain-text titles. */
.cockpit .settings-section { padding: 18px 20px; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 19, 32, .04); }
.cockpit .settings-section h2 { font-size: 15px; font-weight: 700; color: var(--text); }
/* A section whose body is a single settings form: the card already frames it, so the form's own box would
   nest a second bordered well inside the card. Add/edit panels under a list keep their frame. */
.cockpit .settings-section > .section-description + .provider-form { padding: 0; border: 0; background: none; }

/* Cards are as wide as the window; single-line controls stretched to 1300px at 1885px. Text areas keep
   the full width for prompts. */
.cockpit .settings-section .form-group > :is(input:not([type="checkbox"], [type="radio"]), select),
.cockpit .settings-section .input-with-action { max-width: 560px; }
.cockpit .settings-section .form-group > input[type="number"] { max-width: 220px; }

/* ≤768px: the tree stacks above the content and its links wrap into chips, so the content keeps the full
   width (next to the fixed 220px tree it was 99px wide on a phone). */
@media (max-width: 768px) {
    .cockpit .settings-layout { flex-direction: column; align-items: stretch; }
    .cockpit .settings-tree { position: static; width: auto; min-width: 0; max-height: none; }
    .cockpit .tree-group-children { flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 2px 6px 8px; }
    .cockpit .tree-node { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; }
}

/* ---- Pipelines re-shell (Agent Coding page inside the new frame) ------------ */
/* The page sits in .cockpit-page, which already provides the 28px inset and the 16px rhythm. .agent-main only
   stacks its cards the same way; its legacy 20px padding pushed the cards past the h1 and away from the right. */
.cockpit .agent-main { display: flex; flex-direction: column; gap: 16px; padding: 0; }

/* A card title row inside a padded .settings-section spans the card edge to edge, like .cockpit-card-header in
   a .cockpit-card, and its title lines up with the card body instead of sitting 18px further in. */
.cockpit .settings-section > .cockpit-card-header:first-child { margin: -18px -20px 14px; padding: 14px 20px; }

/* ---- RefreshBar — consistent refresh control (issue #2339) ---------------- */
.refresh-bar {
    display: flex; align-items: center; gap: 10px; align-self: center; flex-shrink: 0;
}
.refresh-bar-label {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 10px 0 13px;
    border: 1px solid var(--ctl-border); border-radius: 9px; background: var(--surface);
    font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: default;
}
.refresh-bar-interval-label {
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-faint); white-space: nowrap;
}
/* The interval <select> reuses .time-window-select but without the forced uppercase/letter-spacing
   so the "Off" option reads naturally in sentence case. */
.refresh-bar-select {
    text-transform: none !important; letter-spacing: normal !important;
    font-size: 12px !important; font-weight: 600; color: var(--text) !important;
    border-bottom-color: var(--ctl-border) !important;
}


/* ============================================================================
   Responsive layout — issue #2946
   Three breakpoints:
     ≤1024px  sidebar collapses to icon rail
     ≤768px   top bar hides secondary elements (search, project switcher)
     ≤640px   sidebar becomes overlay drawer behind hamburger button;
              page padding tightened; page-header wraps; multi-col grids collapse
   Desktop (≥1280px) is untouched — the widest breakpoint is max-width: 1024px.
   ============================================================================ */

/* ---- New elements: hamburger button, sidebar backdrop, responsive grid classes ---- */

/* Hamburger button — hidden at desktop, shown at ≤640px */
.cockpit-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--ctl-border); border-radius: 9px;
    background: var(--surface); color: var(--text);
    cursor: pointer; flex-shrink: 0;
}
.cockpit-hamburger:hover { background: var(--bg-hover); color: var(--accent); }

/* Sidebar backdrop — hidden by default; shown only at ≤640px when sidebar is open.
   TODO [WARNING]: The backdrop element is rendered conditionally in Razor (@if (_sidebarOpen)),
   so at 641–1024px if _sidebarOpen is somehow true (e.g. user resizes after opening on mobile),
   the backdrop DOM node would be present but have display:none from this base rule — the click-to-
   close handler would silently not fire. If the hamburger button ever becomes accessible at tablet
   widths, consider making backdrop visibility driven by Razor state (always render it, hide via
   inline style or a C# class binding) rather than relying on the CSS media query to hide it. */
.cockpit-sidebar-backdrop {
    display: none;
    position: fixed; inset: 0; z-index: 199;
    background: rgba(0, 0, 0, 0.4);
}

/* Named responsive grid classes for inline layouts in Overview.razor and Insights.razor.
   These replace hardcoded style attributes so media queries can target them. */
.cockpit-kpi-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.cockpit-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.cockpit-two-col-asymmetric {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
    align-items: start;
}

/* ---- Breakpoint 1 — Tablet icon rail (≤1024px) ---- */
@media (max-width: 1024px) {
    .cockpit-sidebar {
        width: 60px;
        min-width: 60px;
    }
    .cockpit-brand-text { display: none; }
    .cockpit-nav-text { display: none; }
    .cockpit-nav-group { display: none; }
    .cockpit-nav-sep { display: none; }
    .cockpit-theme-toggle span { display: none; }
    .cockpit-nav-link { justify-content: center; gap: 0; padding: 11px; }
    .cockpit-brand { justify-content: center; padding: 12px; }
    /* Health: dots only in the 60px rail (each dot's title names the service). */
    .cockpit-sidebar .sidebar-health-title,
    .cockpit-sidebar .sidebar-health-label { display: none; }
    .cockpit-sidebar .sidebar-health { padding: 8px 4px; }
    .cockpit-sidebar .sidebar-health-item { justify-content: center; }
}

/* ---- Breakpoint 2 — Tablet top bar (≤768px) ---- */
@media (max-width: 768px) {
    /* The project scope stays reachable: the switcher shrinks and truncates instead of disappearing. */
    .cockpit-project-switcher { min-width: 0; max-width: 220px; flex: 0 1 auto; }
    .cockpit-project-switcher select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
    .cockpit-topbar { padding: 0 14px; gap: 10px; }
}

/* ---- Breakpoint 3 — Mobile overlay drawer + page chrome (≤640px) ---- */
@media (max-width: 640px) {
    /* Sidebar becomes a fixed overlay drawer, hidden off-screen to the left */
    .cockpit-sidebar {
        position: fixed;
        top: 0; left: -248px;
        height: 100vh;
        z-index: 200;
        width: 248px; min-width: 248px;
        transition: left 0.22s ease;
    }
    /* When open, slide in from the left */
    .cockpit-sidebar.is-open {
        left: 0;
    }
    /* Restore full text labels inside the open overlay drawer */
    .cockpit-sidebar.is-open .cockpit-brand-text { display: flex; }
    .cockpit-sidebar.is-open .cockpit-nav-text { display: block; }
    .cockpit-sidebar.is-open .cockpit-nav-group { display: block; }
    .cockpit-sidebar.is-open .cockpit-nav-sep { display: block; }
    .cockpit-sidebar.is-open .cockpit-nav-link { justify-content: flex-start; gap: 11px; padding: 9px 11px; }
    .cockpit-sidebar.is-open .cockpit-brand { justify-content: flex-start; padding: 12px 18px; }
    .cockpit-sidebar.is-open .cockpit-theme-toggle span { display: inline; }
    .cockpit-sidebar.is-open .sidebar-health-title { display: block; }
    .cockpit-sidebar.is-open .sidebar-health-label { display: inline; }
    .cockpit-sidebar.is-open .sidebar-health { padding: 12px 16px 8px; }
    .cockpit-sidebar.is-open .sidebar-health-item { justify-content: flex-start; }

    /* Show hamburger button and backdrop */
    .cockpit-hamburger { display: inline-flex; }
    /* TODO [WARNING]: The backdrop is set to display:block unconditionally here, but the element
       is only in the DOM when _sidebarOpen=true (Razor @if). Between 641px and 1024px the backdrop
       element may be present-but-invisible if _sidebarOpen gets stuck true (e.g. after a resize).
       See the base .cockpit-sidebar-backdrop rule above for the full discussion. */
    .cockpit-sidebar-backdrop { display: block; }

    /* Tighten top bar */
    .cockpit-topbar { padding: 0 12px; gap: 8px; }

    /* Prevent page scroll behind the open sidebar */
    /* TODO [WARNING]: .cockpit.sidebar-open sets overflow:hidden only at ≤640px. The C# _sidebarOpen
       state and sidebar-open root class are not viewport-gated in Razor. If the user opens the sidebar
       on mobile and then resizes to a wider viewport, _sidebarOpen remains true but the overflow:hidden
       and overlay CSS no longer apply — the state is visually invisible but the class stays on the root
       element. Consider resetting _sidebarOpen to false on a JS resize event, or accepting this as a
       rare edge case that self-heals on next navigation. */
    .cockpit.sidebar-open { overflow: hidden; }

    /* Reduce page padding so cards have more horizontal room */
    .cockpit-page { padding: 14px 12px 28px; }

    /* Page headers must wrap when title + actions exceed the narrow content area */
    .cockpit-page-header { flex-wrap: wrap; }

    /* Collapse multi-column grids to single column */
    .cockpit-kpi-3col { grid-template-columns: 1fr !important; }
    .cockpit-two-col { grid-template-columns: 1fr !important; }
    .cockpit-two-col-asymmetric { grid-template-columns: 1fr !important; }
    .cockpit-findings { grid-template-columns: 1fr; }
}

/* ── Auth pages and user menu (Spec 049) ─────────────────────────────────────── */
.cockpit.auth-shell { align-items: center; justify-content: center; overflow: auto; padding: 24px 16px; }
.auth-main { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 20px; margin: auto; }
.auth-main:has(.auth-main-wide-host) { max-width: 760px; }
.auth-main-wide-host { display: flex; flex-direction: column; gap: 20px; }
.auth-brand { display: flex; align-items: center; gap: 10px; justify-content: center; }
.auth-card { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.auth-card h1 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.auth-card p { margin: 0; color: var(--text-muted); line-height: 1.5; }
.auth-error { padding: 10px 12px; border-radius: 8px; background: var(--error-bg); color: var(--error); font-size: 14px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.auth-field input { padding: 9px 11px; border: 1px solid var(--ctl-border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; }
.auth-form .btn-save, .auth-oidc { border-radius: 8px; text-align: center; text-decoration: none; }
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--text-faint); font-size: 12px; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.auth-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.auth-actions a { border-radius: 8px; text-decoration: none; }
.auth-authorizing { padding: 24px; color: var(--text-muted); }
.auth-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.auth-dl dt { color: var(--text-muted); font-weight: 600; }
.auth-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.auth-groups { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 13px; user-select: all; }
.auth-groups li { user-select: all; overflow-wrap: anywhere; }
.auth-warning { padding: 10px 12px; border-radius: 8px; background: var(--warning-bg); color: var(--warning); font-size: 14px; }
.cockpit-user-menu { position: relative; }
.cockpit-user-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; font-weight: 600; }
.cockpit-user-menu summary::-webkit-details-marker { display: none; }
.cockpit-user-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; z-index: 50; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 19, 32, .12); padding: 6px; display: flex; flex-direction: column; }
.cockpit-user-menu-panel a, .cockpit-user-menu-panel button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none; background: none; border: 0; font-size: 13px; cursor: pointer; }
.cockpit-user-menu-panel a:hover, .cockpit-user-menu-panel button:hover { background: var(--bg-hover); }
.cockpit-user-menu-panel form { margin: 0; }