/* ============================================================
   BuoyDeck — LenelS2 Synergy design system
   ============================================================ */

:root {
    --ink: #0B2239;
    --ink-2: #33485C;
    --muted: #6B7C8C;
    --line: #E2E8EF;
    --line-soft: #EDF1F5;
    --bg: #F2F5F8;
    --card: #FFFFFF;
    --blue: #1558A8;
    --blue-2: #2C7BE5;
    --blue-tint: #EAF1FB;
    --red: #EE3124;
    --green: #138A5E;
    --amber: #B5791A;
    --purple: #6B4FA8;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(11, 34, 57, .06), 0 8px 24px rgba(11, 34, 57, .05);
}

/* ---------- reset / base ---------- */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    font-optical-sizing: auto;
}

a { color: var(--blue-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono, code, .num {
    font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app {
    display: grid;
    grid-template-columns: 232px 1fr;
    min-height: 100vh;
}

/* ---------- sidebar ---------- */
.sidebar {
    background: var(--ink);
    color: #C4D2E0;
    display: flex;
    flex-direction: column;
    padding: 18px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin-bottom: 14px;
}
.brand__logo { width: 30px; height: 30px; flex: none; }
.brand__name { color: #fff; font-weight: 700; font-size: 15px; line-height: 1.1; }
.brand__sub { color: #7E93A8; font-size: 11px; letter-spacing: .02em; }

.nav-group { margin-bottom: 16px; }
.nav-group__label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #5E7488;
    padding: 0 8px 6px;
    font-weight: 600;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #C4D2E0;
    font-weight: 500;
    font-size: 13.5px;
    margin-bottom: 2px;
}
.nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--blue); color: #fff; }
.nav-item__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; flex: none; }

.sidebar__footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12px;
    color: #7E93A8;
}
.sidebar__footer a { color: #A9BCD0; }

/* ---------- main / topbar ---------- */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
    height: 60px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 26px;
}
.topbar__crumb { color: var(--muted); font-size: 13px; }
.topbar__crumb strong { color: var(--ink); font-weight: 600; }
.topbar__spacer { flex: 1; }
.topbar__search-form { display: flex; margin: 0; }
.topbar__search {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    width: 240px;
    background: var(--bg);
    color: var(--ink);
    font-family: inherit;
}
.topbar__search:focus {
    outline: none;
    border-color: var(--blue-2);
    background: var(--card);
    box-shadow: 0 0 0 3px var(--blue-tint);
}
.proto-pill {
    background: var(--amber);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: .02em;
}

.content { padding: 26px; max-width: 1240px; width: 100%; }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.eyebrow {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
    font-weight: 600;
    color: var(--blue-2);
    margin-bottom: 6px;
}
.page-title { font-size: 26px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.page-sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; max-width: 720px; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}
.card__title { font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.card__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* The Team Dashboard's headline row. It is a STATE row: Projects supported +
   Active Pipeline + Inactive + Won + Lost + Abandoned = six cards.
   THESE MUST LIVE HERE, in the one stylesheet base.html loads on every page.
   .grid-5 previously lived in a second stylesheet pulled in via
   {% block head_extra %}; because hx-boost swaps only <body>, a boosted
   navigation to the dashboard never applied that <head> link, so the cards fell
   back to a single implicit column and rendered stacked until a real reload.
   See the CONSOLIDATED section at the foot of this file. */
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-2-1 { grid-template-columns: 1.6fr 1fr; }

/* ---------- stat card ---------- */
.stat-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
}
.stat-label {
    font-size: 12px; color: var(--muted); font-weight: 500;
    margin-bottom: 8px;
}
.stat-value {
    font-family: 'DM Mono', monospace;
    font-size: 28px; font-weight: 500; color: var(--ink);
    line-height: 1; letter-spacing: -.02em;
}
.stat-delta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.stat-delta.up { color: var(--green); }

/* ============================================================
   STATUS PILLS
   ============================================================ */
.pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: #fff;
    background: var(--muted);
}
/* STATE pills — the top-level axis: in the pipeline, or resolved.
   Abandoned = no-decision / dropped, NOT a competitive loss, so it stays
   visually distinct from lost (same rule as the Sufficiency dashboard).
   Inactive = parked long-term. It reads as a QUIET version of active — same
   family, drained of urgency — because that is exactly what it is: a live
   pursuit that is not being worked. It must not look like a resolution. */
.pill--state-active { background: var(--blue-2); }
.pill--state-inactive {
    background: var(--bg);
    color: var(--ink-2);
    border: 1px solid var(--line);
}
.pill--state-won { background: var(--green); }
.pill--state-lost { background: var(--red); }
.pill--state-abandoned { background: var(--ink-2); }

/* STAGE / sub-stage reads as text under the state pill, not as a second pill:
   one loud badge per row, and the phase detail beneath it. */
.workflow-cell__stage { margin-top: 3px; white-space: nowrap; }

/* Analytics still uses these three as generic colour pills (won/lost surplus,
   draft/live snapshots, staleness), so they stay. The rest of the old flat
   status pills (qualified / pending / target / stalled / active / abandoned)
   went with the flat status field itself. */
.pill--won { background: var(--green); }
.pill--lost { background: var(--red); }
.pill--quote { background: var(--muted); }
.pill--trr { background: var(--amber); }

/* ============================================================
   SALESFORCE OPP # — the key tying a project to the SFDC / sufficiency book
   ============================================================ */
/* List cell */
.opp-num {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    background: var(--blue-tint);
    border: 1px solid #D3E2F7;
    border-radius: 5px;
    padding: 2px 7px;
    white-space: nowrap;
}
/* Detail banner */
.opp-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--blue-tint);
    border: 1px solid #D3E2F7;
    border-left: 3px solid var(--blue);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 16px;
}
.opp-banner__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--blue);
}
.opp-banner__value {
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -.01em;
}
.opp-banner__value--empty { color: var(--muted); font-style: italic; font-size: 14px; }
/* Form field */
.field--key label { color: var(--blue); }
.badge--key {
    background: var(--blue);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 9.5px;
}
input.input-key {
    font-family: 'DM Mono', monospace;
    font-size: 15px;
    border-color: var(--blue-2);
    background: var(--blue-tint);
    max-width: 260px;
}

/* ============================================================
   TABLES
   ============================================================ */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 600;
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--line);
}
.table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--bg); }
.table .num { text-align: right; font-size: 13px; }
.t-strong { font-weight: 600; color: var(--ink); }
.t-sub { color: var(--muted); font-size: 12px; }

.var-cell { color: var(--red); font-family: 'DM Mono', monospace; font-weight: 500; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: #124d94; color: #fff; }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: var(--bg); }
.btn-danger { background: #fff; color: var(--red); border-color: var(--line); }
.btn-danger:hover { background: #fdecea; border-color: var(--red); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-block { width: 100%; justify-content: center; }

/* ============================================================
   FORMS
   ============================================================ */
.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.input, .select, .textarea,
input[type=text], input[type=password], input[type=email], input[type=number], select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--ink);
    background: #fff;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--blue-2);
    box-shadow: 0 0 0 3px var(--blue-tint);
}
textarea { resize: vertical; min-height: 90px; }
.help-text { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* segmented control */
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.segmented label { padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--ink-2); border-right: 1px solid var(--line); }
.segmented label:last-child { border-right: none; }
.segmented input { display: none; }
.segmented input:checked + span { color: var(--blue); font-weight: 600; }
.segmented label:has(input:checked) { background: var(--blue-tint); }
/* segmented toggle-button control (analytics region/quarter/scenario/metric) */
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.seg-btn { display: inline-block; padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--ink-2); background: #fff; border: none; border-right: 1px solid var(--line); text-decoration: none; cursor: pointer; white-space: nowrap; line-height: 1.6; }
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.seg-btn.is-active { background: var(--blue); color: #fff; font-weight: 600; }
.seg-btn.is-active:hover { background: #124d94; color: #fff; }
.seg-btn.is-disabled { color: var(--muted); background: var(--bg); cursor: not-allowed; opacity: .6; }
.seg-btn.is-disabled:hover { background: var(--bg); color: var(--muted); }
/* analytics tab nav */
.tab-link { padding: 8px 13px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); border-radius: 8px 8px 0 0; text-decoration: none; border-bottom: 2px solid transparent; }
.tab-link:hover { background: var(--bg); text-decoration: none; }
.tab-link.tab-active { color: var(--blue); font-weight: 600; border-bottom-color: var(--blue); }

/* ============================================================
   AVATARS
   ============================================================ */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    color: #fff; font-size: 12px; font-weight: 600; flex: none;
    font-family: 'DM Sans', sans-serif;
}
.avatar--lg { width: 56px; height: 56px; font-size: 20px; }
/* supporters (co-attribution) render smaller + ringed, secondary to the lead */
.avatar--support { width: 24px; height: 24px; font-size: 10px; opacity: .85; box-shadow: 0 0 0 2px #fff; }
.avatar-row { display: flex; align-items: center; gap: 9px; }

/* ============================================================
   REGION BAR CHART
   ============================================================ */
.region-bar { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 12px; margin-bottom: 12px; }
.region-bar__label { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.region-bar__track { background: var(--line-soft); border-radius: 6px; height: 10px; overflow: hidden; }
.region-bar__fill { background: linear-gradient(90deg, var(--blue), var(--blue-2)); height: 100%; border-radius: 6px; }
.region-bar__value { font-family: 'DM Mono', monospace; font-size: 12.5px; color: var(--ink); }

/* ============================================================
   MISC LAYOUT HELPERS
   ============================================================ */
.stack > * + * { margin-top: 14px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flex { display: flex; align-items: center; gap: 10px; }
.badge {
    display: inline-block; padding: 2px 8px; border-radius: 6px;
    background: var(--blue-tint); color: var(--blue); font-size: 11px; font-weight: 600;
}
.badge--admin { background: #fbe9e7; color: var(--red); }
.badge--camera { background: #e3f3ec; color: var(--green); }
.badge--integration { background: #ece7f6; color: var(--purple); }
/* co-attribution: lead = primary (filled), supporter = secondary (muted) */
.badge--lead { background: var(--blue); color: #fff; }
.badge--support { background: #eef2f6; color: var(--ink-2); }
.tag-row-cameras { margin-top: 4px; }
.tag-rows { display: flex; flex-direction: column; gap: 8px; }
.tag-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag-row__label {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); min-width: 72px;
}
.count-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    background: var(--ink); color: #fff; font-size: 12px; font-weight: 600;
}
.muted { color: var(--muted); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.note {
    background: var(--blue-tint);
    border: 1px solid #D3E2F7;
    color: var(--ink-2);
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 13px;
    margin-bottom: 18px;
}
.note--warn { background: #fdf4e6; border-color: #f0dcb6; color: #7a561a; }

.project-mini { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.project-mini:last-child { border-bottom: none; }

.section-gap { margin-top: 22px; }
.hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }

/* ============================================================
   STUDIO
   ============================================================ */
.studio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.dropzone {
    border: 1.5px dashed var(--line);
    border-radius: 10px;
    padding: 22px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    background: var(--bg);
}
.output-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: var(--muted); padding: 60px 20px; min-height: 340px;
}
.output-empty svg { opacity: .35; margin-bottom: 14px; }
.subtotal-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0 2px; margin-top: 8px; border-top: 2px solid var(--line);
    font-weight: 600;
}
.subtotal-row .num { font-family: 'DM Mono', monospace; font-size: 16px; }

.doc-preview { border: 1px solid var(--line); border-radius: 8px; padding: 20px; background: #fff; }
.doc-preview h3 { margin: 0 0 4px; font-size: 16px; }
.draft-stamp {
    display: inline-block; border: 1px solid var(--amber); color: var(--amber);
    font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background:
        radial-gradient(1200px 600px at 70% -10%, rgba(44, 123, 229, .18), transparent 60%),
        linear-gradient(160deg, #0B2239 0%, #0E2E4C 55%, #103a61 100%);
}
.login-card {
    width: 100%; max-width: 400px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    padding: 32px 30px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.login-chrome {
    display: flex; align-items: center; gap: 8px;
    background: rgba(0, 0, 0, .2);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px; color: #A9BCD0;
    margin-bottom: 24px;
    font-family: 'DM Mono', monospace;
}
.login-chrome .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.login-head { text-align: center; margin-bottom: 22px; }
.login-head .logo { width: 42px; height: 42px; margin: 0 auto 12px; display: block; }
.login-head h1 { color: #fff; font-size: 20px; margin: 0 0 3px; font-weight: 700; }
.login-head p { color: #8FA6BD; font-size: 12.5px; margin: 0; }
.login-card label { color: #C4D2E0; font-size: 12.5px; font-weight: 600; display: block; margin-bottom: 5px; }
.login-card input {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    margin-bottom: 14px;
}
.login-card input::placeholder { color: #6E859C; }
.login-card input:focus { border-color: var(--blue-2); box-shadow: 0 0 0 3px rgba(44, 123, 229, .25); }
.login-error {
    background: rgba(238, 49, 36, .15);
    border: 1px solid rgba(238, 49, 36, .4);
    color: #ffb4ad;
    border-radius: 8px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 14px;
}
.login-foot { text-align: center; color: #7E93A8; font-size: 11.5px; margin-top: 18px; }

/* ============================================================
   TOAST + HTMX INDICATOR
   ============================================================ */
.toast-wrap { position: fixed; bottom: 22px; right: 22px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast {
    background: var(--ink); color: #fff;
    padding: 12px 16px; border-radius: 10px;
    font-size: 13px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    min-width: 220px;
}

.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }
.spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--line); border-top-color: var(--blue-2);
    animation: spin .7s linear infinite; margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { position: relative; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .sidebar__footer { margin: 0 0 0 auto; padding-top: 0; border: none; }
    .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr); }
    .grid-3, .grid-2, .grid-2-1, .studio-grid { grid-template-columns: 1fr; }
}
/* Six stat cards need an intermediate step: three across on a laptop, rather
   than six squeezed columns or a jump straight to two. */
@media (max-width: 1280px) and (min-width: 981px) {
    .grid-6 { grid-template-columns: repeat(3, 1fr); }
    .grid-5 { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   FLASH MESSAGES (django.contrib.messages)
   ============================================================ */
.flash-wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.flash {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--shadow);
}
.flash--success { border-left-color: var(--green); }
.flash--error { border-left-color: var(--red); }
.flash--warning { border-left-color: var(--amber); }

/* ============================================================
   DANGER ZONE (destructive actions — admin only)
   ============================================================ */
.danger-zone { border-color: #f4c7c3; background: #fffaf9; }
.danger-zone__title { color: var(--red); }
.danger-zone__warn { margin: 0 0 10px; color: var(--ink); font-weight: 500; }
.danger-zone__list { margin: 0 0 14px; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.danger-zone__list li { margin-bottom: 2px; }
.danger-zone__error {
    margin: 0 0 12px; padding: 8px 12px;
    border-radius: 8px; background: #fdecea; color: var(--red);
    font-size: 13px;
}
.btn-danger:disabled, .btn-danger[disabled] {
    opacity: .5; cursor: not-allowed; color: var(--muted); border-color: var(--line);
}
.btn-danger:disabled:hover, .btn-danger[disabled]:hover { background: #fff; border-color: var(--line); }

/* ============================================================
   PROJECT FORM — TAG MULTI-SELECTS (platforms / cameras / integrations)
   Layout only. The checkbox lists flow into responsive columns instead of one
   long vertical list. `columns: 3 190px` = at most 3 columns, each at least
   190px wide, so the browser drops to 2 and then 1 column as the form narrows.
   Structure is Django's: #id_platforms > group div > (group label + option div),
   and a flat #id_cameras / #id_integrations > option div.
   ============================================================ */
#id_platforms > div > div,
#id_cameras,
#id_integrations {
    columns: 3 190px;
    column-gap: 24px;
}

/* An option must never be split down the middle by a column break. */
#id_platforms > div > div > div,
#id_cameras > div,
#id_integrations > div {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* Access / VMS subheaders stay full width above their columns. */
#id_platforms > div { margin-bottom: 12px; }
#id_platforms > div > label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin-bottom: 6px;
}

/* Option rows. */
#id_platforms > div > div > div > label,
#id_cameras > div > label,
#id_integrations > div > label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--ink);
    cursor: pointer;
}
#id_platforms input[type=checkbox],
#id_cameras input[type=checkbox],
#id_integrations input[type=checkbox] { accent-color: var(--blue); margin: 0; }

@media (max-width: 640px) {
    #id_platforms > div > div,
    #id_cameras,
    #id_integrations { column-count: 1; }
}

/* ============================================================
   COLLAPSIBLE SIDEBAR (G1) — additive, layout only
   State lives in the `bd_sidebar` cookie and is rendered as
   `.app.sidebar-collapsed` server-side, so it survives navigation
   (including hx-boost body swaps) with no flash.
   ============================================================ */
.app { transition: grid-template-columns .22s ease; }

.nav-item__icon {
    width: 20px; height: 20px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.nav-item__icon svg { width: 18px; height: 18px; }
.nav-item__label { white-space: nowrap; overflow: hidden; }

.sidebar__bottom { margin-top: auto; }

/* The collapse toggle lives in the brand row at the TOP of the sidebar (next to
   Synergy / by Honeywell BS) — the conventional, discoverable spot. It stays in
   that same spot when collapsed, where it is the re-expand control. */
.sidebar__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; margin-left: auto;
    width: 28px; height: 28px;
    background: rgba(255, 255, 255, .04); color: #C4D2E0;
    border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px;
    padding: 0; cursor: pointer; font: inherit;
}
.sidebar__toggle:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.sidebar__toggle .nav-item__icon { width: 18px; height: 18px; }
.sidebar__toggle .nav-item__icon svg { width: 16px; height: 16px; }
.sidebar__toggle-chevron { transition: transform .22s ease; }

.sidebar__user { margin-bottom: 8px; }
.sidebar__signout { display: flex; align-items: center; gap: 10px; color: #A9BCD0; }
.sidebar__signout:hover { color: #fff; text-decoration: none; }

/* Collapsed state — desktop only. On narrow screens (<=980px) the sidebar
   already reflows into a stacked top row, so collapse does not apply there. */
@media (min-width: 981px) {
    .app.sidebar-collapsed { grid-template-columns: 64px 1fr; }
    .sidebar-collapsed .sidebar { padding: 18px 8px; }
    /* Collapsed: the logo and the toggle stack, both centred in the 64px rail,
       so the toggle is still at the top and still visible as the way back out. */
    .sidebar-collapsed .brand {
        flex-direction: column; justify-content: center; gap: 8px;
        padding: 4px 0 14px;
    }
    .sidebar-collapsed .brand__text,
    .sidebar-collapsed .nav-group__label,
    .sidebar-collapsed .nav-item__label,
    .sidebar-collapsed .sidebar__user { display: none; }
    .sidebar-collapsed .nav-item { justify-content: center; padding: 8px 0; gap: 0; }
    .sidebar-collapsed .sidebar__toggle { margin-left: 0; }
    .sidebar-collapsed .sidebar__toggle-chevron { transform: rotate(180deg); }
    .sidebar-collapsed .sidebar__signout { justify-content: center; gap: 0; }
}
@media (max-width: 980px) {
    .sidebar__toggle { display: none; }        /* collapse control is desktop-only */
    .sidebar__bottom { margin: 0 0 0 auto; }   /* sit at the right of the mobile row, like the old footer */
}

/* ============================================================
   MONEY / WORKFLOW / SYNERGY STATUS
   (consolidated 2026-08-13 from static/css/buoydeck_money.css)

   WHY THIS MOVED HERE, and why it must stay here.
   These rules used to live in a second stylesheet, buoydeck_money.css, pulled
   in per-page by {% block head_extra %}. That was a workaround for this file
   being root-owned at the time; it is lloyd-writable again, and the workaround
   turned out to have a real bug behind it:

     base.html sets hx-boost="true" on <body>, and htmx 1.9.12 boosts by
     swapping the BODY of the response into the current document. The <head> of
     the response - including any head_extra <link> - is discarded. So arriving
     at the Team Dashboard from any page that did not already carry the link
     (Workspace, Contacts, Sufficiency, Estimator, Search, the login redirect)
     left .grid-5 undefined. `.grid` alone is display:grid with one implicit
     column, so the six stat cards rendered as a vertical stack, and only a hard
     reload - which does parse the new <head> - snapped them into a row.

   Everything here now loads from the single <link> in base.html, on every page,
   before first paint. DO NOT move layout rules back into a head_extra include.
   ============================================================ */

/* Pipeline Value cell in a project row: the dollar figure with a small type tag
   beneath it - "sell" is a firm locked number, "ROM" is a working placeholder.
   Labelling the type is the point; an unlabelled figure would present an early
   ROM as though it were quoted. */
.value-kind {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin-top: 1px;
}

/* ---------- Cost | Sell matrix ----------
   One aligned row per money type, so the gap between a cost and its sell reads
   as the margin. Identical structure on the edit form and the detail card;
   .money-grid--read is the read-only variant.

   ALIGNMENT RULE (fixed 2026-08-13): there is NO column gap. Column separation
   is padding INSIDE each cell instead. A grid gap is dead space that no cell
   owns, so any border drawn on a row was chopped into three floating segments
   with 14px holes between them - the "divider lines do not line up" defect on
   the Subcontractor and Margin rows. With the gap folded into padding, every
   rule runs unbroken from the left edge of the label column to the right edge
   of the sell column, and every row is the same height, so the Cost and Sell
   columns cannot drift. */
.money-grid {
    display: grid;
    grid-template-columns: minmax(140px, 1.2fr) 1fr 1fr;
    column-gap: 0;
    row-gap: 0;
    align-items: center;
}
/* One rhythm for EVERY cell - head, corner, label and value alike - so rows
   are uniform height and the columns stay square. */
.money-grid > * {
    padding: 10px 0;
    min-width: 0;
}
/* The gutter between the label, Cost and Sell columns. Applied as padding so it
   sits inside a cell the borders can cross. */
.money-grid__head,
.money-grid__cell { padding-left: 16px; }

.money-grid__head {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-2);
}
/* The header underline crosses ALL THREE columns - the empty corner included -
   so it reads as one line under the whole matrix rather than starting halfway
   across at the Cost column. */
.money-grid__corner,
.money-grid__head { border-bottom: 1px solid var(--line); }

.money-grid__label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
/* A hairline under every row, closing on the last one, so Project / Labor /
   Subcontractor / Margin read as clean bands. Rows are always exactly three
   cells, so the last three children are the last row. */
.money-grid__label,
.money-grid__cell { border-bottom: 1px solid var(--line-soft); }
.money-grid > :nth-last-child(-n+3) { border-bottom: none; }

/* Margin is the total line: one solid rule across all three columns above it. */
.money-grid__label--total,
.money-grid__label--total ~ .money-grid__cell {
    border-top: 1px solid var(--line);
}
.money-grid__label--total { color: var(--ink); }
.money-grid__cell input { margin: 0; }
.money-grid--read .money-grid__cell { font-size: 14px; }

/* ROM sits below the matrix, visually secondary - it feeds Pipeline Value but
   is no longer a headline in its own right. */
.money-grid__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}

/* ---------- SYNERGY STATUS ----------
   The current state of play, in the team's own words: "where Synergy is on this
   project" right now. It is a first-class, clearly labelled block - not a line
   buried in notes - because the whole point is that someone can glance at it.
   The accent rail and the larger type are what make it read as the answer to a
   question rather than as more body copy. */
.synergy-status {
    border-left: 3px solid var(--blue-2);
    background: linear-gradient(90deg, var(--blue-tint) 0%, var(--card) 60%);
}
.synergy-status__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}
.synergy-status__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}
.synergy-status__body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    margin: 0;
    max-width: 78ch;
}
.synergy-status__body--empty { color: var(--muted); font-size: 14px; }

/* Grouped sections (Money, Workflow, Synergy Status) inside the project form. */
.form-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.form-section__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-2);
    margin-bottom: 12px;
}

/* Win reason / Loss reason as a clearly grouped pair beneath the selector. */
.reason-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 4px;
}
.outcome-block__value {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
/* The one readable workflow line: state - stage -> sub-stage (TRR ...). */
.workflow-line { font-size: 13px; color: var(--muted); }

/* WORKFLOW - the three axes side by side on detail, and as a row on the form. */
.workflow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}
.workflow-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.trr-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 4px;
}
.trr-block {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 14px;
}
/* The four TRR trigger checkboxes read as one short list, not a column each. */
.trr-fields ul { list-style: none; margin: 0; padding: 0; }
.trr-fields li { display: flex; align-items: center; gap: 6px; }
.trr-fields input[type="checkbox"] { accent-color: var(--blue); }

@media (max-width: 980px) {
    /* Drop the empty corner so Cost / Sell take the two columns, then let each
       row label span the full width above its own pair. */
    .money-grid { grid-template-columns: 1fr 1fr; }
    .money-grid__corner { display: none; }
    .money-grid__label { grid-column: 1 / -1; padding-top: 14px; padding-left: 0; }
    .money-grid__head:first-of-type,
    .money-grid__cell:nth-of-type(2n+1) { padding-left: 0; }
    .reason-pair { grid-template-columns: 1fr; }
    .workflow-grid { grid-template-columns: 1fr 1fr; }
    .workflow-fields { grid-template-columns: 1fr; }
    .trr-fields { grid-template-columns: 1fr; }
}