/* ==========================================================================================================
   iTech Valet — DESIGN SYSTEM v0  (tools.itechvalet.com)
   ONE shared stylesheet. Every tool imports it; no tool ships its own colours, type or spacing.

   1. TOKENS      every value lives here, as a custom property. Reskin = change tokens, never components.
   2. STATUS      the sacred colours (see the rules block). Used for status and NOTHING else.
   3. SHELL       header, left nav, main area, phone menu
   4. COMPONENTS  cards, tabs, tables, pills, bars, states, forms

   Values follow the 2.0 UI standard (a light SaaS look: navy header, brand blue, soft shadows, rounded corners)
   and reuse Client Manager 2.0's palette, so the shell and the older 2.0 tools read as one family.
   ========================================================================================================== */

/* ---- 1. TOKENS ------------------------------------------------------------------------------------------- */
:root {
  /* brand */
  --brand-navy:       #063a6c;
  --brand-navy-deep:  #04294c;
  --brand-blue:       #2494e0;
  --brand-blue-pale:  #e8f3fd;
  --accent:           #0e5aa6;
  --on-brand:         #ffffff;
  --on-brand-dim:     #b9d9f5;

  /* surfaces and ink */
  --bg:          #f6f8fb;
  --surface:     #ffffff;
  --surface-alt: #f9fafc;
  --ink:         #101828;
  --ink-dim:     #4e5a6a;
  --ink-mute:    #5a6675;
  --line:        #e4e9f0;
  --line-strong: #d3dae4;

  /* type */
  --font:      Inter, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 26px;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    650;
  --lh: 1.45;

  /* spacing (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* shape and depth */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
  --shadow-md: 0 2px 4px rgba(16, 24, 40, .05), 0 4px 12px rgba(16, 24, 40, .06);

  /* layout */
  --header-h:     56px;
  --nav-w:        232px;
  --nav-w-collapsed: 64px;
  --content-max:  1280px;

  /* ---- 2. STATUS — THE SACRED COLOURS ------------------------------------------------------------------
     RED     route status "over", and anything broken or failed.
     AMBER   NOT VERIFIED: not_tracked items, NOT ENTERED retainers, INCOMPLETE profit, "pre-gateway" labels.
     (none)  route status "ok" — quiet success shows nothing.
     GRAY    route status "watch" — a plain neutral "near target" label. Never amber.
     GREEN   verified confirmations only, e.g. "0 cost mismatches — verified".
     These five meanings are the only uses of these colours anywhere in the shell or any tool.            */
  --red:        #b3261e;
  --red-ink:    #8d1c15;
  --red-wash:   rgba(179, 38, 30, .08);
  --red-line:   rgba(179, 38, 30, .30);
  --amber:      #9a6b00;
  --amber-ink:  #6d4a00;
  --amber-wash: rgba(214, 158, 0, .10);
  --amber-line: rgba(154, 107, 0, .35);
  --green:      #1a7a4d;
  --green-ink:  #0f5c39;
  --green-wash: rgba(26, 122, 77, .08);
  --green-line: rgba(26, 122, 77, .30);
  --watch-ink:  #4e5a6a;
  --watch-bg:   #eef1f5;
  --watch-line: #d3dae4;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: var(--fw-regular) var(--fs-md)/var(--lh) var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
code, .mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
[hidden] { display: none !important; }

/* ---- status classes (the ONLY way a status colour reaches the page) ----------------------------------- */
.st-over       { color: var(--red-ink); }
.st-over.cell-box, .row-over > td { background: var(--red-wash); }
.row-over > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.unverified    { color: var(--amber-ink); }
.verified      { color: var(--green-ink); }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: var(--fw-medium); border: 1px solid transparent; white-space: nowrap; vertical-align: 1px; }
.pill-watch      { color: var(--watch-ink); background: var(--watch-bg); border-color: var(--watch-line); }
.pill-over       { color: var(--red-ink); background: var(--red-wash); border-color: var(--red-line); }
.pill-unverified { color: var(--amber-ink); background: var(--amber-wash); border-color: var(--amber-line); }
.pill-verified   { color: var(--green-ink); background: var(--green-wash); border-color: var(--green-line); }
.note-unverified { color: var(--amber-ink); background: var(--amber-wash); border: 1px solid var(--amber-line); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); }
.note-verified   { color: var(--green-ink); background: var(--green-wash); border: 1px solid var(--green-line); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); }

/* ---- 3. SHELL ------------------------------------------------------------------------------------------- */
.shell-header { position: sticky; top: 0; z-index: 20; height: var(--header-h); display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); background: var(--brand-navy); color: var(--on-brand); box-shadow: var(--shadow-sm); }
.shell-brand { font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: .2px; }
.shell-brand small { font-weight: var(--fw-regular); color: var(--on-brand-dim); margin-left: var(--sp-2); font-size: var(--fs-sm); }
.shell-spacer { flex: 1; }
.shell-user { color: var(--on-brand-dim); font-size: var(--fs-sm); }
.btn-on-brand { font: inherit; font-size: var(--fs-sm); color: var(--on-brand); background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; }
.btn-on-brand:hover { background: rgba(255,255,255,.10); }
.menu-btn { display: none; }

.shell-body { display: flex; min-height: calc(100vh - var(--header-h)); }
.shell-nav { width: var(--nav-w); flex: none; background: var(--brand-navy-deep); color: var(--on-brand-dim); padding: var(--sp-3) var(--sp-2); transition: width .15s ease; }
.shell-nav.collapsed { width: var(--nav-w-collapsed); }
.shell-nav.collapsed .nav-label, .shell-nav.collapsed .nav-collapse-label { display: none; }
.nav-item { display: flex; align-items: center; gap: var(--sp-3); padding: 9px var(--sp-3); margin: 2px 0; border-radius: var(--radius-sm); color: var(--on-brand-dim); text-decoration: none; font-weight: var(--fw-medium); }
.nav-item:hover { background: rgba(255,255,255,.07); color: var(--on-brand); }
.nav-item.active { background: var(--brand-blue); color: var(--on-brand); }
.nav-item svg { width: 20px; height: 20px; flex: none; }
.nav-collapse svg { width: 16px; height: 16px; flex: none; }
.nav-empty { padding: var(--sp-3); font-size: var(--fs-sm); color: var(--on-brand-dim); }
.nav-collapse { margin-top: var(--sp-4); width: 100%; display: flex; align-items: center; gap: var(--sp-2); font: inherit; font-size: var(--fs-xs); color: var(--on-brand-dim); background: none; border: 0; padding: var(--sp-2) var(--sp-3); cursor: pointer; }
.shell-main { flex: 1; min-width: 0; padding: var(--sp-5); }
.shell-main > .inner { max-width: var(--content-max); margin: 0 auto; }

@media (max-width: 767px) {
  .menu-btn { display: inline-block; }
  .shell-nav { position: fixed; top: var(--header-h); bottom: 0; left: 0; z-index: 30; transform: translateX(-100%); transition: transform .15s ease; width: var(--nav-w); }
  .shell-nav.open { transform: none; box-shadow: var(--shadow-md); }
  .shell-nav.collapsed { width: var(--nav-w); }
  .shell-nav.collapsed .nav-label { display: inline; }
  .nav-collapse { display: none; }
  .shell-main { padding: var(--sp-3); }
  .shell-user { display: none; }
}

/* ---- sign-in ------------------------------------------------------------------------------------------- */
.signin { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: var(--sp-4); }
.signin form { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--sp-6) var(--sp-5); }
.signin h1 { margin: 0 0 var(--sp-1); font-size: var(--fs-2xl); color: var(--brand-navy); }
.signin p { margin: 0 0 var(--sp-5); color: var(--ink-mute); font-size: var(--fs-sm); }
.field { display: block; width: 100%; margin-bottom: var(--sp-3); padding: 11px 13px; font: inherit; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.field:focus { outline: 2px solid var(--brand-blue-pale); border-color: var(--brand-blue); }
.btn-primary { width: 100%; padding: 11px; font: inherit; font-weight: var(--fw-bold); color: var(--on-brand); background: var(--accent); border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.btn-primary:disabled { opacity: .6; cursor: wait; }
.form-error { margin-top: var(--sp-3); min-height: 18px; font-size: var(--fs-sm); color: var(--red-ink); }

/* ---- 4. COMPONENTS -------------------------------------------------------------------------------------- */
.page-title { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.page-sub { margin: 0 0 var(--sp-4); color: var(--ink-mute); font-size: var(--fs-sm); }
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-4); overflow-x: auto; }
.tab { padding: var(--sp-2) var(--sp-4); color: var(--ink-dim); text-decoration: none; font-weight: var(--fw-medium); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.frame-line { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: flex-start; margin-bottom: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-mute); }
.frame-line .nt { flex-basis: 100%; }
.frame-line ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); }

.grid { display: grid; gap: var(--sp-4); }
.grid-cards { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* P-128: Dashboard cards are links; the whole card is the target. */
.card-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.card-link:hover, .card-link:focus-visible { border-color: var(--brand-blue); box-shadow: var(--shadow-md); }
.card-link .card-go { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--accent); }
/* P-128: the Needs-attention list. Colour comes only from the pills (sacred status set). */
.attention { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.attention .att { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.attention .att:last-child { border-bottom: 0; }
.attention .att-text { flex: 1; }
.attention .att-go { white-space: nowrap; font-size: var(--fs-sm); color: var(--accent); }
@media (max-width: 767px) { .attention .att { flex-wrap: wrap; } .attention .att-go { width: 100%; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); padding: var(--sp-4); }
.card h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-mute); text-transform: none; }
.card .big { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.15; }
/* P-127: an amber (partial / not verified) big number keeps the card's size; only the colour says it is partial. A status
   pill after a number ("over", "near target") stays pill-sized (P-128). */
.card .big .pill-unverified { font-size: inherit; font-weight: inherit; padding: 0 var(--sp-2); border-radius: var(--radius-sm); vertical-align: baseline; }
.card .sub { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-dim); }
.section { margin-top: var(--sp-5); }
.section > h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.section > .hint { margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ink-mute); }

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.data th { text-align: left; font-weight: var(--fw-medium); color: var(--ink-mute); background: var(--surface-alt); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.reason { max-width: 520px; color: var(--ink-dim); }

.bars { display: grid; gap: var(--sp-2); }
.bar-row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); }
.bar-track { height: 10px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; width: calc(var(--f, 0) * 100%); background: var(--brand-blue); border-radius: 999px; }
.bar-fill.pre { background: var(--line-strong); }

.story { display: grid; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.story-line { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.story-line:last-child { border-bottom: 0; font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.story-line .v { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* P-127: the amber "partial: data starts …" line under a window's number. */
.partial-note { margin-top: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-regular); }

.side-by-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); }
dl.kv { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4); margin: 0; font-size: var(--fs-sm); }
dl.kv dt { color: var(--ink-mute); }
dl.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.state { padding: var(--sp-5); border-radius: var(--radius-md); border: 1px dashed var(--line-strong); color: var(--ink-mute); background: var(--surface); text-align: center; }
.state-error { border: 1px solid var(--red-line); border-style: solid; background: var(--red-wash); color: var(--red-ink); text-align: left; }
.empty { color: var(--ink-mute); font-style: italic; }
.muted { color: var(--ink-mute); }
details summary { cursor: pointer; color: var(--accent); font-size: var(--fs-sm); margin: var(--sp-2) 0; }