/* ==========================================================================
   BW3 Outage Cost Control -- styles.css
   Plain CSS, custom properties on :root. Check here before inventing a new
   variable name.
   ========================================================================== */

:root {
  --bg:        #f4f6f8;
  --panel:     #ffffff;
  --ink:       #16202c;
  --ink-soft:  #5b6b7c;
  --ink-faint: #8b9aa9;
  --border:    #dde3e9;
  --border-strong: #c4ced8;
  --navy:      #12263a;
  --navy-soft: #1d3550;
  --red:       #c0392b;
  --red-soft:  #fdecea;
  --amber:     #b7791f;
  --amber-soft:#fdf4e3;
  --green:     #1e7d54;
  --green-soft:#e8f5ef;
  --blue:      #1c5f9e;
  --blue-soft: #e9f2fa;
  --grey-soft: #eef1f4;
  --radius:    6px;
  --shadow:    0 1px 2px rgba(16,32,48,.06), 0 2px 8px rgba(16,32,48,.05);
  --mono:      'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Layout ---------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px; flex: 0 0 232px; background: var(--navy); color: #dbe4ee;
  display: flex; flex-direction: column; position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
}
.sidebar-brand { padding: 18px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.09); }
.sidebar-brand .b1 { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .2px; }
.sidebar-brand .b2 { font-size: 11px; color: #8fa5bd; margin-top: 3px; }
.sidebar-brand .b3 { font-size: 10px; color: #6f89a5; margin-top: 6px; font-family: var(--mono); }

.nav-group-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .9px;
  color: #6f89a5; padding: 16px 16px 6px; font-weight: 700;
}
.nav-item {
  padding: 8px 16px; cursor: pointer; font-size: 13px; color: #cbd8e6;
  display: flex; align-items: center; justify-content: space-between;
  border-left: 3px solid transparent;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: rgba(255,255,255,.10); color: #fff; border-left-color: #4d9fe0; font-weight: 600; }
.nav-badge {
  background: rgba(255,255,255,.16); color: #fff; font-size: 10px;
  padding: 1px 6px; border-radius: 9px; font-family: var(--mono);
}
.nav-badge.warn { background: var(--red); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--panel); border-bottom: 1px solid var(--border);
  padding: 14px 24px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { margin: 0; font-size: 18px; font-weight: 650; }
.topbar .sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }

/* max-width matters on the wide monitors this actually gets read on. Without
   it a 9-column table stretches across 2500px+, the gap between a label and
   its figure becomes enormous, and the page reads as though columns are
   misaligned even when they are not. 1760px keeps the widest table (Scope
   Register) intact without letting anything sprawl. */
.content { padding: 20px 24px 60px; flex: 1; max-width: 1760px; width: 100%; }

/* ---------- Cards ---------- */
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px;
}
.card-head {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-head h2 { margin: 0; font-size: 14px; font-weight: 650; }
.card-head .hint { font-size: 11.5px; color: var(--ink-faint); font-weight: 400; }
.card-body { padding: 16px; }
.card-body.tight { padding: 0; }

/* ---------- KPI tiles ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 15px; box-shadow: var(--shadow); border-top: 3px solid var(--border-strong);
}
.kpi .k-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--ink-faint); font-weight: 700; }
.kpi .k-value { font-size: 21px; font-weight: 680; margin-top: 5px; font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.kpi .k-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; }
.kpi.k-blue  { border-top-color: var(--blue); }
.kpi.k-green { border-top-color: var(--green); }
.kpi.k-amber { border-top-color: var(--amber); }
.kpi.k-red   { border-top-color: var(--red); }
.kpi.k-navy  { border-top-color: var(--navy); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.grid th {
  background: var(--grey-soft); text-align: left; padding: 8px 10px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-soft); font-weight: 700; border-bottom: 1px solid var(--border-strong);
  white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
/* MUST stay more specific than `table.grid th` above, which sets text-align:left.
   `.num` alone is specificity (0,1,0) and loses to `table.grid th` at (0,1,2), so
   a <th class="num"> silently rendered LEFT-aligned while its figures rendered
   RIGHT-aligned. On a wide monitor that put every header over the PREVIOUS
   column's number and made PO Reconciliation look like the data was wrong --
   the "PO Value" column appeared empty because its figure sat under the next
   heading. The data was never wrong. Do not "simplify" this selector. */
table.grid th.num { text-align: right; }
table.grid td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.grid tbody tr:hover { background: #fafcfe; }
table.grid tfoot td {
  background: var(--grey-soft); font-weight: 700; border-top: 2px solid var(--border-strong);
  border-bottom: none; position: sticky; bottom: 0;
}
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 11.5px; }
.pos { color: var(--red); }      /* positive variance = overrun = bad */
.neg { color: var(--green); }    /* negative variance = under = good */
.muted { color: var(--ink-faint); }
.nowrap { white-space: nowrap; }
.wrapcell { max-width: 320px; white-space: normal; }

/* ---------- Pills ---------- */
.pill {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap; letter-spacing: .2px;
}
.pill-grey  { background: var(--grey-soft); color: var(--ink-soft); }
.pill-blue  { background: var(--blue-soft); color: var(--blue); }
.pill-green { background: var(--green-soft); color: var(--green); }
.pill-amber { background: var(--amber-soft); color: var(--amber); }
.pill-red   { background: var(--red-soft); color: var(--red); }

/* ---------- Controls ---------- */
button, .btn {
  font: inherit; font-size: 12.5px; padding: 6px 13px; border-radius: 5px;
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--ink);
  cursor: pointer; font-weight: 600;
}
button:hover, .btn:hover { background: #f7f9fb; border-color: var(--ink-faint); }
button.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
button.primary:hover { background: #1b3550; }
button.danger { background: var(--red); border-color: var(--red); color: #fff; }
button.danger:hover { background: #a5342a; }
button.ghost { background: transparent; border-color: transparent; color: var(--blue); padding: 4px 6px; }
button.ghost:hover { background: var(--blue-soft); }
button.sm { padding: 3px 8px; font-size: 11.5px; }
button:disabled { opacity: .45; cursor: not-allowed; }

input, select, textarea {
  font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--border-strong);
  border-radius: 5px; background: #fff; color: var(--ink); max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #a9cdec; outline-offset: -1px; border-color: var(--blue); }
input.num-input { text-align: right; font-variant-numeric: tabular-nums; width: 100px; }
input.pct-input { width: 66px; text-align: right; }
input.cell { border: 1px solid transparent; background: transparent; width: 96px; }
input.cell:hover { border-color: var(--border-strong); background: #fff; }
input.cell.dirty { background: #fffbe8; border-color: var(--amber); }

.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .5px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }

.toolbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: #fbfcfd;
}
.toolbar .spacer { flex: 1; }

/* ---------- Progress bar ---------- */
.bar { height: 7px; background: var(--grey-soft); border-radius: 4px; overflow: hidden; min-width: 60px; }
.bar > span { display: block; height: 100%; background: var(--blue); }
.bar.over > span { background: var(--red); }
.bar.ok > span { background: var(--green); }

/* ---------- Charts (hand-rolled SVG, no CDN dependency) ---------- */
/* Do NOT set height here -- the SVG carries its own height attribute, which
   is what keeps chart text at its intended size on wide monitors. Adding
   height:auto would re-enable the runaway scaling. */
.chart { width: 100%; display: block; max-width: 100%; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-soft); margin-top: 8px; }
.chart-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Modal / toast ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(16,32,48,.45);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal {
  background: var(--panel); border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.28);
  max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto;
}
.modal-head { padding: 15px 18px; border-bottom: 1px solid var(--border); font-weight: 650; font-size: 15px; }
.modal-body { padding: 18px; }
.modal-foot { padding: 13px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

#toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 6px;
  font-size: 13px; z-index: 200; box-shadow: 0 6px 20px rgba(0,0,0,.3); display: none;
}
#toast.show { display: block; }
#toast.err { background: var(--red); }

.empty { padding: 40px 20px; text-align: center; color: var(--ink-faint); font-size: 13px; }
.note {
  background: var(--blue-soft); border-left: 3px solid var(--blue); padding: 10px 13px;
  font-size: 12.5px; border-radius: 0 5px 5px 0; margin-bottom: 14px; color: #1b4b78;
}
.note.warn { background: var(--amber-soft); border-left-color: var(--amber); color: #7a5312; }

/* ---------- Sign-in gate (cloud build only) ---------- */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--navy); padding: 20px;
}
.auth-card {
  background: var(--panel); border-radius: 10px; width: 100%; max-width: 400px;
  box-shadow: 0 14px 46px rgba(0,0,0,.34); overflow: hidden;
}
.auth-brand { background: var(--navy); color: #dbe4ee; padding: 22px 24px 18px; }
.auth-brand .b1 { font-size: 19px; font-weight: 650; color: #fff; }
.auth-brand .b2 { font-size: 12.5px; color: #8fa5bd; margin-top: 3px; }
.auth-brand .b3 { font-size: 11px; color: #6f89a5; margin-top: 9px; font-family: var(--mono); }
.auth-body { padding: 22px 24px 24px; }
.auth-err {
  background: var(--red-soft); color: var(--red); border-left: 3px solid var(--red);
  padding: 9px 12px; font-size: 12.5px; margin-top: 14px; border-radius: 0 4px 4px 0;
}
.auth-note { font-size: 11.5px; color: var(--ink-faint); margin: 14px 0 0; line-height: 1.5; }

.sidebar-user {
  margin-top: auto; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.09);
  font-size: 11.5px; color: #8fa5bd;
}
.sidebar-user .u-name { color: #fff; font-weight: 600; }
.sidebar-user button {
  background: transparent; border: 1px solid rgba(255,255,255,.22); color: #cbd8e6;
  font-size: 11px; padding: 3px 9px; margin-top: 7px;
}
.sidebar-user button:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.4); }

/* Build marker under the signed-in user. Deliberately quiet -- it only needs
   to be there when someone asks "which version produced this number?". */
.sidebar-user .u-ver {
  margin-top: 10px; padding-top: 9px; font-size: 10.5px; color: #6f89a5;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.sidebar-user .u-ver button {
  margin-top: 0; padding: 1px 7px; font-size: 10.5px;
  border-color: transparent; color: #8fa5bd;
}

/* Read-only chip. Courtesy only -- the real boundary is the RLS policy. */
.role-chip {
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 10px;
  background: var(--amber-soft); color: var(--amber); letter-spacing: .3px;
}
.role-chip.rw { background: var(--green-soft); color: var(--green); }