/*
 * Cammino design tokens.
 *
 * MSOSV's identity on a dense, functional dashboard. Navy carries the UI, gold
 * is brand chrome only and never a data colour, and the temperature triad is
 * tuned to stay clearly distinct from both.
 *
 * Every screen reads these tokens. Nothing below this block hard-codes a colour.
 */

:root {
    /* Brand */
    --navy: #010080;
    --navy-dark: #010060;
    --navy-tint: #ececf6;
    --navy-tint-strong: #d6d6ec;
    --gold: #f8a932;
    --gold-strong: #ff9600;

    /* Neutrals */
    --ink: #1f1c1a;
    --ink-soft: #212121;
    --body: #444444;
    --body-light: #6b6b6b;
    --muted: #888888;
    --hairline: #dddddd;
    --hairline-soft: #ebebeb;
    --ground: #ffffff;
    --ground-sunk: #f7f7fa;

    /* Temperature: reserved semantics, never reused for anything else */
    --temp-green: #2e7d5b;
    --temp-green-bg: #e6f2ec;
    --temp-yellow: #b57d10;
    --temp-yellow-bg: #fbf1dc;
    --temp-red: #b3352b;
    --temp-red-bg: #fae9e7;

    /* Status semantics, distinct from both brand and temperature */
    --ok: #2e7d5b;
    --warn: #b57d10;
    --danger: #b3352b;

    /* Type */
    --font-heading: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Open Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

    /* Rhythm. Deliberately tight: this is for hour-long sessions. */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --radius: 4px;
    --radius-lg: 6px;
    --shadow-card: 0 1px 2px rgba(31, 28, 26, 0.08);
    --shadow-raised: 0 4px 12px rgba(31, 28, 26, 0.14);
}

/* ---------------------------------------------------------------- reset -- */

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

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.45;
    color: var(--body);
    background: var(--ground-sunk);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
}

h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4 { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--body-light); }

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

table { border-collapse: collapse; width: 100%; }

/* -------------------------------------------------------------- topbar --- */

.topbar {
    background: var(--ground);
    border-bottom: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: 0 var(--sp-5);
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar__brand { display: flex; align-items: center; gap: var(--sp-3); }
.topbar__logo { height: 30px; width: auto; }

.topbar__wordmark {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 17px;
    color: var(--navy);
    letter-spacing: 0.01em;
}

.topbar__tagline {
    font-size: 11px;
    color: var(--muted);
    border-left: 2px solid var(--gold);
    padding-left: var(--sp-2);
}

.topbar__nav { display: flex; gap: var(--sp-1); margin-left: auto; align-items: center; }

.topbar__nav a {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius);
    color: var(--body);
    font-size: 13px;
    white-space: nowrap;
}

.topbar__nav a:hover { background: var(--ground-sunk); text-decoration: none; }

.topbar__nav a.is-active {
    background: var(--navy);
    color: #fff;
    font-weight: 600;
}

.topbar__user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-left: var(--sp-4);
    border-left: 1px solid var(--hairline);
    font-size: 12px;
    color: var(--body-light);
}

.topbar__user strong { display: block; color: var(--ink); font-size: 13px; }

/* --------------------------------------------------------------- shell --- */

.shell { padding: var(--sp-5); max-width: 1680px; margin: 0 auto; }

.page-head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}

.page-head p { margin: 0; color: var(--body-light); font-size: 13px; }

.scope-switch { display: flex; gap: var(--sp-1); margin-left: auto; }

.scope-switch a {
    font-size: 12px;
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--ground);
    color: var(--body);
}

.scope-switch a.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    font-weight: 600;
}

/* --------------------------------------------------------------- cards --- */

.card {
    background: var(--ground);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.card__head {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--hairline-soft);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.card__head h2 { margin-right: auto; }
.card__body { padding: var(--sp-4); }
.card__body--flush { padding: 0; }

/* ----------------------------------------------------------- kpi tiles --- */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.tile {
    background: var(--ground);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4);
    box-shadow: var(--shadow-card);
    display: block;
    color: inherit;
}

.tile:hover { border-color: var(--navy-tint-strong); text-decoration: none; }

.tile__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--body-light);
    margin-bottom: var(--sp-2);
}

.tile__value {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 26px;
    color: var(--navy);
    line-height: 1.1;
}

.tile__value small { font-size: 14px; color: var(--muted); font-weight: 400; }
.tile__note { font-size: 12px; color: var(--body-light); margin-top: var(--sp-1); }

/* ------------------------------------------------------------ capacity --- */

.capacity-row {
    display: grid;
    grid-template-columns: 110px 1fr 128px;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--hairline-soft);
}

.capacity-row:last-child { border-bottom: 0; }
.capacity-row__name { font-weight: 600; color: var(--ink); font-size: 13px; }
.capacity-row__name span { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }

.meter {
    position: relative;
    height: 16px;
    background: var(--ground-sunk);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--hairline-soft);
}

.meter__fill { height: 100%; background: var(--navy); border-radius: 2px 0 0 2px; }
.meter__fill--at-goal { background: var(--ok); }
.meter__fill--low { background: var(--warn); }

/* The 95 per cent goal marker. */
.meter__goal {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--gold-strong);
}

.capacity-row__figures { font-size: 12px; color: var(--body-light); text-align: right; }
.capacity-row__figures strong { color: var(--ink); font-size: 13px; }

/* --------------------------------------------------------------- board --- */

.board {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: var(--sp-4);
}

.column {
    flex: 0 0 256px;
    background: var(--ground);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 210px);
}

.column__head {
    padding: var(--sp-3);
    border-bottom: 1px solid var(--hairline-soft);
    position: sticky;
    top: 0;
    background: var(--ground);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    z-index: 2;
}

.column__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.column__count {
    margin-left: auto;
    background: var(--navy-tint);
    color: var(--navy);
    border-radius: 10px;
    padding: 0 var(--sp-2);
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

.column__stage { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 2px; }
.column__cards { padding: var(--sp-2); overflow-y: auto; flex: 1; min-height: 60px; }
.column.is-drop-target { outline: 2px dashed var(--navy); outline-offset: -2px; }

.card-item {
    background: var(--ground);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--hairline);
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-2);
    cursor: grab;
    display: block;
    color: inherit;
}

.card-item:hover { box-shadow: var(--shadow-raised); text-decoration: none; }
.card-item.is-dragging { opacity: 0.45; }
.card-item--green { border-left-color: var(--temp-green); }
.card-item--yellow { border-left-color: var(--temp-yellow); }
.card-item--red { border-left-color: var(--temp-red); }

.card-item__name { font-weight: 600; color: var(--ink); font-size: 13px; }
.card-item__child { font-size: 12px; color: var(--body-light); }

.card-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-2);
    margin-top: var(--sp-2);
    font-size: 11px;
    color: var(--muted);
}

.card-item__task {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--hairline-soft);
    font-size: 11px;
    color: var(--body-light);
}

.card-item__task.is-overdue { color: var(--danger); font-weight: 600; }

/* --------------------------------------------------------------- chips --- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: 11px;
    padding: 1px var(--sp-2);
    border-radius: 10px;
    border: 1px solid var(--hairline);
    background: var(--ground-sunk);
    color: var(--body);
    white-space: nowrap;
}

.chip--green { background: var(--temp-green-bg); border-color: var(--temp-green); color: var(--temp-green); }
.chip--yellow { background: var(--temp-yellow-bg); border-color: var(--temp-yellow); color: var(--temp-yellow); }
.chip--red { background: var(--temp-red-bg); border-color: var(--temp-red); color: var(--temp-red); }
.chip--tier { background: var(--navy-tint); border-color: var(--navy-tint-strong); color: var(--navy); font-weight: 600; }
.chip--offer { background: #fff6e6; border-color: var(--gold); color: #8a5a00; font-weight: 600; }
.chip--gate { background: var(--ground-sunk); }
.chip--gate.is-met { background: var(--temp-green-bg); border-color: var(--temp-green); color: var(--temp-green); }

/* ----------------------------------------------------------- exit lanes -- */

.lanes { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }

.lane {
    flex: 1 1 260px;
    background: var(--ground);
    border: 1px solid var(--hairline-soft);
    border-left: 3px solid var(--muted);
    border-radius: var(--radius);
    padding: var(--sp-3);
    display: block;
    color: inherit;
}

.lane:hover { text-decoration: none; border-color: var(--navy-tint-strong); }
.lane__count { font-family: var(--font-heading); font-weight: 600; font-size: 20px; color: var(--ink); }
.lane__label { font-weight: 600; color: var(--ink); font-size: 13px; }
.lane__meaning { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* --------------------------------------------------------------- table --- */

.data-table { font-size: 13px; }
.data-table thead th {
    text-align: left;
    font-family: var(--font-heading);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--body-light);
    font-weight: 600;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--hairline);
    background: var(--ground-sunk);
    position: sticky;
    top: 0;
}

.data-table tbody td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--hairline-soft); vertical-align: top; }
.data-table tbody tr:hover { background: var(--navy-tint); }
.data-table td.is-numeric, .data-table th.is-numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- family record --- */

.record { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: var(--sp-4); align-items: start; }

@media (max-width: 1100px) { .record { grid-template-columns: 1fr; } }

.record-head {
    background: var(--ground);
    border: 1px solid var(--hairline-soft);
    border-top: 3px solid var(--navy);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    box-shadow: var(--shadow-card);
}

.record-head__row { display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
.record-head__name { font-family: var(--font-heading); font-weight: 600; font-size: 22px; color: var(--ink); }
.record-head__sub { color: var(--body-light); font-size: 13px; margin-top: 2px; }
.record-head__chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3); }

.field { border-bottom: 1px dashed var(--hairline-soft); padding-bottom: var(--sp-2); }
.field__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 2px; }
.field__value { color: var(--ink); font-size: 13px; word-break: break-word; }
.field__value--empty { color: var(--muted); font-style: italic; }

.editable { cursor: text; border-radius: 2px; padding: 1px 3px; margin: -1px -3px; }
.editable:hover { background: var(--navy-tint); outline: 1px solid var(--navy-tint-strong); }
.editable:focus { background: #fff; outline: 2px solid var(--navy); }

/* ------------------------------------------------------------ timeline --- */

.timeline { list-style: none; margin: 0; padding: 0; }

.timeline li {
    position: relative;
    padding: 0 0 var(--sp-3) var(--sp-5);
    border-left: 2px solid var(--hairline-soft);
    margin-left: var(--sp-2);
}

.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }

.timeline li::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ground);
    border: 2px solid var(--navy);
}

.timeline li.is-status::before { background: var(--navy); }
.timeline li.is-exit::before { border-color: var(--danger); }
.timeline__summary { color: var(--ink); font-size: 13px; }
.timeline__meta { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* -------------------------------------------------------------- pieces --- */

.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.numeric { font-variant-numeric: tabular-nums; }

.btn {
    font-family: var(--font-body);
    font-size: 13px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius);
    border: 1px solid var(--navy);
    background: var(--navy);
    color: #fff;
    cursor: pointer;
    font-weight: 600;
}

.btn:hover { background: var(--navy-dark); }
.btn--quiet { background: var(--ground); color: var(--navy); }
.btn--quiet:hover { background: var(--navy-tint); }
.btn--danger { background: var(--ground); border-color: var(--danger); color: var(--danger); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

select, input[type='text'], input[type='date'], input[type='email'], input[type='password'], textarea {
    font-family: var(--font-body);
    font-size: 13px;
    padding: var(--sp-2);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--ground);
    color: var(--ink);
    width: 100%;
}

select:focus, input:focus, textarea:focus { outline: 2px solid var(--navy); border-color: var(--navy); }

.empty { padding: var(--sp-5); text-align: center; color: var(--muted); font-size: 13px; }

.bands { display: flex; gap: var(--sp-2); }

.band {
    flex: 1;
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid;
}

.band--green { background: var(--temp-green-bg); border-color: var(--temp-green); }
.band--yellow { background: var(--temp-yellow-bg); border-color: var(--temp-yellow); }
.band--red { background: var(--temp-red-bg); border-color: var(--temp-red); }
.band__count { font-family: var(--font-heading); font-weight: 600; font-size: 20px; color: var(--ink); }
.band__label { font-size: 11px; color: var(--body); }

.aitera { display: flex; gap: 2px; }

.aitera__step {
    flex: 1;
    background: var(--ground-sunk);
    border: 1px solid var(--hairline-soft);
    padding: var(--sp-2);
    text-align: center;
}

.aitera__step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.aitera__step:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.aitera__count { font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--navy); }
.aitera__name { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }

/* -------------------------------------------------------------- toasts --- */

#toasts { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 100; display: flex; flex-direction: column; gap: var(--sp-2); max-width: 420px; }

.toast {
    background: var(--ink);
    color: #fff;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    font-size: 13px;
    box-shadow: var(--shadow-raised);
    border-left: 3px solid var(--ok);
}

.toast--error { border-left-color: var(--danger); }
.toast--warn { border-left-color: var(--gold); }

/* --------------------------------------------------------------- login --- */

.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--ground-sunk); }
.login-card { width: 360px; background: var(--ground); border: 1px solid var(--hairline-soft); border-top: 3px solid var(--navy); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-card); }
.login-card h1 { color: var(--navy); margin-bottom: var(--sp-1); }
.login-card p { color: var(--muted); font-size: 12px; margin: 0 0 var(--sp-5); }
.login-card label { display: block; font-size: 12px; color: var(--body-light); margin-bottom: var(--sp-1); }
.login-card .field-block { margin-bottom: var(--sp-4); }
.login-error { background: var(--temp-red-bg); border: 1px solid var(--temp-red); color: var(--temp-red); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); font-size: 12px; margin-bottom: var(--sp-4); }

/* ------------------------------------------------------------- compose --- */

.compose { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--hairline-soft); margin: 0; }
.compose textarea, .compose input[type='text'] { width: 100%; }
.compose__choice { display: inline-flex; align-items: center; gap: var(--sp-1); cursor: pointer; }
.compose__choice:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }