/* Cribbed from the overhead module (which cribbed from debts), plus what this module adds at the end.
   Every module serves its own /static, so a shared stylesheet would mean N
   copies of one file — the platform nav's styling lives in the shared base
   template for exactly that reason, and module styling stays here. */
:root {
  --bg: #f4f5f7; --card: #fff; --ink: #1c2128; --muted: #6b7280;
  --line: #e2e5ea; --accent: #a97b1f; --accent-ink: #fff;
  --good: #1f9d55; --warn: #b45309; --bad: #b3261e;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--ink); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { display: flex; align-items: center; gap: 14px; padding: 10px 20px;
  background: #241f14; color: #fff; }
.brand { font-weight: 800; letter-spacing: 1px; color: #fff; font-size: 18px; }
.tagline { color: #a99a74; font-size: 12px; }
.mainnav { margin-left: auto; display: flex; gap: 16px; }
.mainnav a { color: #ddd0af; }
.signout { display: flex; gap: 10px; align-items: center; margin-left: 16px; }
.signout .whoami { color: #a99a74; font-size: 13px; }
.signout button { background: transparent; border: 1px solid #4a4230; color: #ddd0af;
  padding: 4px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; }

.wrap { max-width: none; margin: 24px auto; padding: 0 20px; }   /* the window, not a column: owner instruction 2026-09-11 */
h1 { margin: 0 0 4px; } h2 { margin-top: 0; } h3 { margin: 0 0 6px; font-size: 14px; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 13px; }
.warn { color: var(--warn); font-size: 12px; }
.crumb { margin: 0 0 8px; color: var(--muted); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
/* Every figure in this module is money or a date; tabular numerals keep the
   columns aligned so two balances can be compared by eye. */
.num { font-variant-numeric: tabular-nums; }
.viewonly { border-left: 3px solid var(--line); padding-left: 10px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 20px; margin: 16px 0; }
.card.nopad { padding: 0; overflow: hidden; }
.card.nopad > summary { padding: 14px 18px; }
.cardhead { padding: 14px 18px 0; }
.cardhint { margin: -6px 0 8px; font-size: 12px; }
.login-card { max-width: 380px; margin: 60px auto; }
.login-card form { display: flex; flex-direction: column; gap: 12px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.grid label, form label, .card label { display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--muted); }
label.check, label.inline { flex-direction: row; align-items: center; gap: 6px; }
.card label + label { margin-top: 10px; }
input, select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; color: var(--ink); background: #fff; }

button, .btn { display: inline-block; background: var(--accent); color: var(--accent-ink);
  border: none; padding: 9px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.btn:hover { text-decoration: none; opacity: .92; }
.btn.ghost, .btn.ghost:hover, button.ghost { background: transparent; color: var(--muted);
  border: 1px solid var(--line); }
button.sm, .btn.sm { padding: 4px 10px; font-size: 12px; }
button.danger, .btn.danger { background: var(--bad); color: #fff; border-color: var(--bad); }
button.ghost.danger { background: transparent; color: var(--bad); border: 1px solid var(--line); }
form.inline { display: inline; }

.stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 18px; min-width: 130px; display: flex; flex-direction: column; }
.stat .num { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .lbl { color: var(--muted); font-size: 13px; }

.tbl { width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tbl th { background: #fafbfc; font-size: 12px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); }
.tbl th.right, .tbl td.right { text-align: right; }
.tbl.compact th, .tbl.compact td { padding: 6px 10px; font-size: 13px; }
.tbl.flush { border: none; border-radius: 0; }
.tbl tr:last-child td { border-bottom: none; }
/* Projected months are the same table as the actual ones, shaded rather than
   separated: the whole value of the view is reading across the boundary. */
.tbl tr.projected td { background: #faf7f0; color: var(--muted); }
.tbl tr.editing td { background: #fbfaf7; }
td.drift { color: var(--warn); font-weight: 600; }

.titlebar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pricebox { text-align: right; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 14px; display: flex; flex-direction: column; }
.pricebox .num { font-size: 22px; font-weight: 700; color: var(--accent); }
.pricebox.big .num { font-size: 28px; }
.pricebox .lbl { color: var(--muted); font-size: 12px; }

.badge { display: inline-block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 0 6px; vertical-align: 1px; }
.statusflag { display: inline-block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px; margin-left: 6px; }

/* the four entry forms, side by side until they no longer fit */
.entrygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; align-items: start; }
.entrygrid form { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.entrygrid button { margin-top: 10px; width: 100%; }
.computedhint { font-size: 13px; margin: 0 0 8px; color: var(--muted); }
.recheck { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; }
.eventedit { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.eventedit input { max-width: 150px; }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; background: #eef2ff;
  border: 1px solid #d9dffb; }
.flash-warn { background: #fff5e6; border-color: #f0d5a8; color: #92600c; }
.flash-error { background: #fbecec; border-color: #f0bcbc; color: #8f1d16; }
.flash-info { background: #eef2ff; border-color: #d9dffb; color: #33417a; }

details.card.danger { border-color: #f0bcbc; }
details.card.danger summary { color: var(--bad); }
details summary { cursor: pointer; font-weight: 600; }

@media (max-width: 720px) {
  .titlebar { flex-direction: column; }
  .grid { grid-template-columns: 1fr; }
}

/* ---- expenses: the month grid and the trend grid ---- */
.monthnav { display: flex; gap: 8px; margin: 0 0 14px; }
.status { display: inline-block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; border-radius: 999px; padding: 1px 8px; }
.status-recorded  { color: var(--good); border: 1px solid var(--good); }
.status-pending   { color: var(--muted); border: 1px solid var(--line); }
.status-unrecorded{ color: var(--bad); border: 1px solid var(--bad); font-weight: 600; }
/* The unrecorded highlight is the thing this view exists for, so it is a row
   tint and not only a badge. */
.tbl tr.flag td { background: #fdf3f2; }
.tbl td.flag { background: #fdf3f2; }
.tbl tr.grouphead td { background: #faf7f0; font-weight: 600;
  text-transform: uppercase; font-size: 11px; letter-spacing: .5px; }
.tbl tr.subtotal td { font-weight: 600; background: #fbfaf7; }
.tbl tr.total td { font-weight: 700; border-top: 2px solid var(--line);
  background: #faf7f0; }
.quick { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.quick input { max-width: 110px; padding: 4px 6px; font-size: 13px; }
.doublecount { background: #fff8e8; border: 1px solid #f0d5a8; color: #7a5310;
  border-radius: 8px; padding: 10px 14px; font-size: 13px; margin: 12px 0; }
.grid .ghost { display: block; font-size: 11px; color: var(--muted); }
.scroller { overflow-x: auto; }
.wrap.wide { max-width: none; }

/* --- billing ------------------------------------------------------------ */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.scroll { overflow-x: auto; }
.neg { color: var(--bad); } .pos { color: var(--good); }
.ghost { color: var(--muted); font-size: 12px; }
.badge.bad { color: var(--bad); border-color: var(--bad); }
.exceptions { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--bad); }
.tbl tr.void td { color: var(--muted); text-decoration: line-through; }
.tbl tr.payment td { background: #fbfaf7; font-size: 12px; }
.tbl tr.band td { background: #fff5e6; }
.tbl tr.totals td { font-weight: 600; background: #fafbfc; }
.lockrow { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0; }
.linklike { color: var(--accent); cursor: pointer; font-size: 13px; display: inline; }
details.inline { display: inline-block; margin-left: 6px; }
details.inline form { margin-top: 6px; }
.hint.ok { color: var(--good); }
.projection td.src-actual { background: #eef7ee; }
.projection td.src-draft { background: #f3f7ee; }
.projection td.src-plan { background: #eef2ff; }
.projection td.src-release { background: #fff0d6; }
.projection td.src-unscheduled { background: #fbecec; }
.projection .badge { font-size: 9px; }
.bars td { padding: 3px 10px; }

/* ---- dashboard */
.flags { margin: 0; padding-left: 18px; }
.flags li { margin: 4px 0; }
.card.danger { border-color: #f0bcbc; }
.card.danger h2 { color: var(--bad); }
.agenda td.today { color: var(--accent); font-weight: 700; }
.queues { list-style: none; margin: 0; padding: 0; }
.queues li { margin: 6px 0; }
.queues .count { display: inline-block; min-width: 2.2em; text-align: right; font-weight: 700; margin-right: 8px; font-variant-numeric: tabular-nums; }


/* --- the four-week look-ahead ------------------------------------------ */
/* One row per job, one cell per day. The row carries its job's colour as
   --jc/--jt (tits.colors.job_style): a planned day is the tint with the crew
   in it, a clocked day is the ink with the people in it, and a trip is a
   line under the cells. Weekends are shaded, today is outlined. */
.la { border-collapse: separate; border-spacing: 2px 0; width: 100%; font-size: 12px; }
.la th, .la td { padding: 0; text-align: center; }
.la th.we, .la td.we { background: #f3f1ec; }
.la-months th { font-size: 10px; color: var(--muted); text-align: left; height: 14px;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.la-days th { font-size: 11px; color: var(--muted); font-weight: 500; height: 30px;
  vertical-align: bottom; padding-bottom: 3px; }
.la-days th .dow { display: block; font-size: 9px; letter-spacing: .04em; }
.la-days th.today { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--accent); }
.la-job { text-align: left !important; padding: 4px 10px 4px 18px !important; white-space: nowrap;
  width: 1%; min-width: 150px; }
.la-job a { font-weight: 600; color: var(--ink); text-decoration: none;
  border-left: 4px solid var(--jc); padding-left: 8px; }
.la-job a:hover { text-decoration: underline; }
.la-job .hint { display: block; padding-left: 12px; font-size: 11px; }
.la-cell { height: 32px; min-width: 24px; font-variant-numeric: tabular-nums;
  border-radius: 4px; color: var(--muted); }
.la-cell.planned { background: var(--jt); color: var(--ink); font-weight: 600; }
.la-cell.worked { background: var(--jc); color: #fff; font-weight: 700; }
.la-cell.today { box-shadow: inset 0 0 0 2px var(--accent); }
.la-cell.trip { border-bottom: 3px solid var(--jc); }
.lookahead .scroll { padding: 0 6px 14px 0; }