/* Dark, quiet, and dense. Two rules of thumb behind everything here:
   the sheet is the interface, so chrome recedes and data does not; and
   categories are shapes (pills), while values are text.

   The grid's own colours live in grid.js — AG Grid v33 is themed through
   parameters, not a stylesheet — and the two palettes are kept in step by
   hand. If you change a colour here, change it there. */

/* The browser hides [hidden] elements with `display: none` from its own
   stylesheet, which ANY explicit display in this file outranks. #topbar sets
   `display: flex`, so `topbar.hidden = true` did nothing and the sign-in
   screen showed a bar with an empty project picker in it. This is the fix, and
   it has to come first and carry !important to beat every layout rule below.

   jsdom does not do the cascade, so no test can catch this — the assertion in
   login.test.mjs checks the attribute, which was always correct. Look at the
   screen. */
[hidden] { display: none !important; }

:root {
  --bg: #0f1114;
  --card: #16191e;
  --card-2: #1a1d23;
  --ink: #e6e8eb;
  --muted: #8b93a1;
  --dim: #6b7280;
  --line: #23272f;
  --line-strong: #2a2f3a;

  --accent: #4f8cff;
  --accent-dim: #1a2740;
  --ok: #4ade80;
  --ok-dim: #14301f;
  --warn: #f5c26b;
  --warn-dim: #2e2515;
  --danger: #f87171;
  --danger-dim: #331a1a;

  --radius: 10px;
  --radius-sm: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Times, dates and day counts are compared down a column — they must line up. */
.time, .num, input.time, .ag-cell[col-id="start"], .ag-cell[col-id="end"],
.ag-cell[col-id="wx"], .ag-cell[col-id="sf_id"] {
  font-variant-numeric: tabular-nums;
}

/* --- top bar --- */

#topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

#topbar h1 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  margin: 0;
  white-space: nowrap;
}

#context { display: flex; align-items: center; gap: 12px; flex: 1; }
#identity { display: flex; align-items: center; gap: 10px; margin-left: auto; }

nav#tabs { display: flex; gap: 2px; }

.tab {
  background: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--muted);
}
.tab:hover { background: var(--card-2); color: var(--ink); }
.tab.active {
  background: var(--card-2);
  border-color: var(--line-strong);
  color: var(--ink);
  font-weight: 600;
}

/* --- layout --- */

#view { padding: 20px; max-width: 1600px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.card.inset { background: var(--card-2); }
.card h2 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.card h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }

.card.login { max-width: 380px; margin: 80px auto; }
.card.login input { display: block; width: 100%; margin: 12px 0; }

/* The control strip above the sheet: one recessed bar, like the mockup's. */
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.row label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.spacer { flex: 1; }

.muted { color: var(--muted); }
.num { text-align: right; }

/* --- controls --- */

input, select, button {
  font: inherit;
  color: var(--ink);
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
input::placeholder { color: var(--dim); }
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
input:disabled { background: var(--card-2); color: var(--dim); }
input.wide { flex: 1; min-width: 260px; }
input.time { width: 76px; text-align: center; }

button {
  cursor: pointer;
  background: var(--card-2);
  border-color: var(--line-strong);
  font-weight: 500;
}
button:hover:not(:disabled) { border-color: var(--muted); background: #20242c; }
button:disabled { opacity: .45; cursor: default; }

/* Tinted outlines rather than solid fills: the sheet stays the loudest thing
   on the page, and the two consequential buttons still stand apart. */
button.primary {
  background: var(--ok-dim);
  border-color: #2f6b45;
  color: #86efac;
}
button.primary:hover { background: #1a3d28; border-color: var(--ok); }

button.link { border: none; background: none; padding: 4px 6px; color: var(--accent); }
button.link.danger { color: var(--danger); }
button.link:hover { background: none; text-decoration: underline; }

.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--card-2);
  border: 1px solid var(--line-strong);
  font-size: 11px;
  color: var(--muted);
}

/* --- category tags (BLOCK column in the mockup) --- */

.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.6;
}
.tag-core { color: #86efac; border-color: #2f6b45; background: var(--ok-dim); }
.tag-daily { color: var(--warn); border-color: #6b5423; background: var(--warn-dim); }
/* Added by hand, no Start Form behind it. Deliberately cooler than core and
   daily: it is not a deal CM knows about, it is the head's own word. */
.tag-manual { color: #93b4e0; border-color: #33506f; background: rgba(111, 155, 216, .14); }

/* --- the day's units, above the sheet --- */

.day-units { margin: 4px 0 10px; }
table.grid.units-table { width: auto; min-width: 340px; }
table.grid.units-table th, table.grid.units-table td {
  padding: 3px 14px 3px 0;
  font-variant-numeric: tabular-nums;
}
table.grid.units-table td { border-bottom: none; }

/* --- responsibilities --- */

/* The setup grid gets more height than the submit sheet: it is the whole
   screen, and it is worked through a department at a time. */
.grid-host.tall { height: 68vh; }

/* The department bar's own tick box — AG Grid does not give a full-width group
   row one, so this is ours. */
.dept-bar { display: inline-flex; align-items: center; gap: 9px; }
.dept-tick { cursor: pointer; }

/* --- combobox --- */

.combo { position: relative; display: inline-block; min-width: 240px; }
.combo input { width: 100%; }

.combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--card-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  z-index: 30;
}

.combo-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  cursor: pointer;
}
.combo-item + .combo-item { border-top: 1px solid var(--line); }
.combo-item:hover, .combo-item.active { background: #232833; }
.combo-item .muted { font-size: 11px; text-align: right; flex-shrink: 0; }
.combo-item.combo-new { color: var(--accent); }

/* --- AG Grid host --- */

.grid-host { height: 560px; width: 100%; margin-top: 12px; }

/* The combobox lives inside a popup cell editor, where it must size itself
   rather than inherit the cell's width. Names and titles are long — a fixed
   320px box truncated most of them — so it is generous and grows with the
   viewport rather than being pinned to one number. */
.combo-in-cell {
  min-width: min(560px, 60vw);
  background: var(--card-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.combo-in-cell .combo-list {
  position: static;
  box-shadow: none;
  border: none;
  border-top: 1px solid var(--line);
  max-height: 320px;
}
.combo-in-cell .combo-item span:first-child { overflow-wrap: anywhere; }

/* Column headers: small, spaced, quiet. */
.ag-header-cell-text {
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* A row that is off, or on Off Set, has no meaningful times — dim them so the
   empty cells read as deliberate rather than forgotten. */
.ag-cell.cell-idle { opacity: .35; }

/* A row with days on it is the normal case and should read as the solid
   foreground; "did not work" recedes into italics and grey, as in the mockup.
   Greyed only — a strike-through read as "deleted" when the row is very much
   still going in. */
.ag-row.row-off .ag-cell { color: var(--dim); font-style: italic; }

/* A submitted row: locked, on record, and unmistakably not draft. Blue,
   because blue is already this app's "recorded in the system" colour — the
   SF number wears it too. */
/* Read down a long sheet, a tint alone is too quiet — the eye wants an edge.
   Hence the bar on the left of the name cell: it makes the sent block
   scannable at a glance without shouting over the rows still being filled in.
   No strike-through anywhere here: a sent row is the LIVE record, and a strike
   would say it had been withdrawn. */
.ag-row.row-locked { background-color: rgba(79, 140, 255, .13) !important; }
.ag-row.row-locked .ag-cell { color: #b6cbe8; font-style: normal; }
.ag-row.row-locked .ag-cell[col-id="name"] {
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 600;
  color: #d7e4f7;
}
.ag-row.row-locked .ag-cell[col-id="system_note"] { color: #7f9dc7; }

/* The version badge: this row is not the first thing said about this person
   on this day. Small and blue — it belongs to the sent-row family, and it is
   a fact about the row rather than a warning about it. */
.ver-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: var(--radius-sm);
  background: rgba(79, 140, 255, .26);
  color: #dbe8fb;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
  vertical-align: middle;
}

/* Being amended: the copy below it is not sent yet, so this row is STILL the
   truth. Dimmed to say "you are working on this one", never struck out. */
.ag-row.row-amended { background-color: rgba(79, 140, 255, .07) !important; }
.ag-row.row-amended .ag-cell { opacity: .62; }

/* The amendment itself: a draft row that will replace the one above it. */
.ag-row.row-amends .ag-cell[col-id="name"] { box-shadow: inset 3px 0 0 var(--warn); }
.ag-row.row-amends .ag-cell[col-id="system_note"] { color: var(--warn); }

/* Amend, in the same slot the working toggle uses on an unsent row. */
.row-amend {
  display: inline-block; min-width: 22px;
  color: #6f8cba; font-size: 14px; line-height: 1.4;
  border-radius: var(--radius-sm);
}
.ag-cell[col-id="remove"]:hover .row-amend { background: var(--card-2); color: #cfe0ff; }

/* NOTE: unselected rows are deliberately NOT dimmed. That rule dated from
   when ticking meant "include in the submission"; the box is only a batch
   selector now, and nothing is ticked by default, so it greyed the whole
   sheet. What a row is worth is said by its days, not by its tick. */

/* The System note column. Anything the app has to say about a row lives here,
   away from the columns being filled in. Amber, not red: a thing to notice,
   not an error. */
.ag-cell.cell-warn { color: var(--warn); }

/* The SF number is a reference, not a value — recessive, and blue like the
   mockup's, so it reads as a link to something in Crew Manager. */
.ag-cell[col-id="sf_id"] { color: #6f9bd8; }

/* The working/not-working toggle. The whole cell is the hit target, so make
   that obvious; the glyph says which way the click will go. */
.ag-cell[col-id="remove"] { cursor: pointer; text-align: center; }

/* AG Grid puts `text-overflow: ellipsis` on every cell and 14px of padding on
   each side. A cell whose content is an ELEMENT rather than text still gets the
   "…" painted beside it when that element is wider than the padded box — so the
   44px toggle column and the DAILY pill both grew two stray dots that mean
   nothing and truncate nothing. Clip instead of marking, and give these two
   their width back. CORE never showed it; it is simply a shorter word. */
.ag-cell[col-id="remove"],
.ag-cell[col-id="deal_type"] {
  text-overflow: clip;
  padding-left: 4px;
  padding-right: 4px;
}
.row-toggle {
  display: inline-block;
  min-width: 22px;
  color: var(--dim);
  font-size: 15px;
  line-height: 1.4;
  border-radius: var(--radius-sm);
}
/* On a stood-down row the toggle offers to put them back on: green, like the
   day it will give them. */
.row-toggle-on { color: #86efac; font-weight: 700; }
.ag-cell[col-id="remove"]:hover .row-toggle { background: var(--card-2); color: var(--ink); }

/* --- tables (admin screens) --- */

table.grid { width: 100%; border-collapse: collapse; margin-top: 12px; }
table.grid th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: 8px;
}
table.grid td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid tr.dim td { opacity: .45; }
table.submit td:first-child, table.submit th:first-child { width: 28px; }

.sf-id {
  font-size: 11px;
  color: var(--dim);
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* --- assignment tree --- */

details.dept { border-top: 1px solid var(--line); padding: 8px 0; }
details.dept summary { cursor: pointer; list-style: none; }
details.dept summary::-webkit-details-marker { display: none; }
.sf-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px;
  padding: 6px 0 6px 18px;
}
label.sf { display: flex; align-items: center; gap: 7px; padding: 2px 0; }

/* --- toast --- */

#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 11px 20px;
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--card-2);
  border: 1px solid var(--line-strong);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  z-index: 50;
}
#toast.error {
  background: var(--danger-dim);
  border-color: #6b2b2b;
  color: #fca5a5;
}