:root {
  --bg: #0f1115; --card: #181b22; --card2: #1f232c; --line: #2a2f3a;
  --txt: #e6e8ec; --muted: #8b93a1; --dim: #626a78;
  --good: #36c08a; --bad: #e5544b; --warn: #e0a83a; --accent: #5aa0ff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--txt);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
.wrap { max-width: 760px; margin: 0 auto; padding: 12px 12px 40px; }

.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 6px 2px 14px; }
.topbar h1 { margin: 0; font-size: 20px; letter-spacing: .3px; }
.topbar p { margin: 3px 0 0; font-size: 12px; }
.who { font-size: 12px; color: var(--muted); white-space: nowrap; }

.muted { color: var(--muted); }
.dim { color: var(--dim); }

.banner { padding: 9px 12px; border-radius: 8px; margin: 8px 0; font-size: 13px; background: var(--card2); border: 1px solid var(--line); }
.banner.red { background: #3a1614; border-color: #6e2620; color: #ffb4ad; }
.banner.warn { background: #332a12; border-color: #5e4d1c; color: #f2d59a; }

/* Safe-action button + flash (commands dashboard) */
.btn-action { padding: 7px 12px; border-radius: 8px; font-size: 13px; cursor: pointer;
  background: var(--card2); border: 1px solid var(--line); color: inherit; }
.btn-action:hover { border-color: #5a5a5a; }
.flash { font-size: 13px; margin-left: 10px; }
.flash.good { color: var(--good); }
.flash.bad { color: var(--bad); }

/* Tab link from the ops dashboard to the commands dashboard */
.tabs { margin: 8px 0; }
.tab { display: inline-block; padding: 6px 12px; border-radius: 8px; font-size: 13px;
  text-decoration: none; color: inherit; background: var(--card2); border: 1px solid var(--line); }
.tab:hover { border-color: #5a5a5a; }
.backlink { text-decoration: none; }

/* Crew demand table */
table.demand { width: 100%; border-collapse: collapse; font-size: 13px; }
table.demand th { text-align: left; font-weight: 600; color: var(--muted, #9aa);
  padding: 4px 8px; border-bottom: 1px solid var(--line); font-size: 12px; }
table.demand td { padding: 4px 8px; border-bottom: 1px solid var(--line); }
table.demand .r { text-align: right; }
.count.bad { background: var(--bad); color: #1a1a1a; }

/* Commands dashboard cards */
.cmd-card { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px; margin: 10px 0; border-radius: 10px;
  background: var(--card2); border: 1px solid var(--line); }
.cmd-card h2 { margin: 0 0 4px; font-size: 15px; }

/* Approvals card (commands dashboard) — stacks the list under the header */
.cmd-card.approvals { flex-direction: column; align-items: stretch; }
.cmd-card.approvals .badge { display: inline-block; min-width: 18px; padding: 0 6px;
  margin-left: 6px; border-radius: 9px; background: var(--bad); color: #1a1a1a;
  font-size: 12px; font-weight: 700; text-align: center; }
.approval-list { list-style: none; margin: 8px 0 0; padding: 0; }
.approval-item { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.approval-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cat-tag { align-self: flex-start; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; padding: 1px 7px; border-radius: 6px;
  background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.approval-text { font-size: 13.5px; }
.approval-raw { font-style: italic; font-size: 12.5px; }
.approval-meta { font-size: 11.5px; }

/* Status digest output (commands dashboard) */
.status-out {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin: 10px 0; overflow-x: auto;
  font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--txt); white-space: pre;
}
.status-out.bad { border-color: var(--bad); color: var(--bad); }

/* KPI strip */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
.kpi-num { font-size: 30px; font-weight: 700; line-height: 1; }
.kpi.good .kpi-num { color: var(--good); }
.kpi.bad .kpi-num { color: var(--bad); }
.kpi.warn .kpi-num { color: var(--warn); }
.kpi-unit { font-size: 12px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }
.kpi-sub { font-size: 11px; color: var(--dim); margin-top: 6px; }

/* Cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 12px; }
.card h2 { margin: 0 0 10px; font-size: 15px; letter-spacing: .3px; display: flex; align-items: center; gap: 8px; }
.card h3 { margin: 12px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.card h4 { margin: 10px 0 4px; font-size: 13px; color: var(--accent); }
.count { background: var(--card2); border: 1px solid var(--line); border-radius: 20px; padding: 1px 9px; font-size: 12px; color: var(--muted); }
.card ul { margin: 4px 0; padding-left: 18px; }
.card li { margin: 3px 0; font-size: 13px; }
.insight { border-left: 2px solid var(--accent); padding-left: 10px; margin: 8px 0; }

/* Upcoming dates (schedule window) */
.sw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .sw-cols { grid-template-columns: 1fr; } }
.sw-list { list-style: none; padding: 0; margin: 2px 0; }
.sw-list li { padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 13px;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
/* Zone chip — fill matches the OR Master Tracker sheet exactly (FL3/3B pale
   green, FL4/4B pale peach, FL5/5B pale blue) with dark text like the sheet.
   The pale fills wash out on the dark dashboard, so each carries a bright
   same-hue border (the saturated version of its Google-palette tint) to make
   the floors distinct. */
.sw-zone { font-variant-numeric: tabular-nums; font-weight: 700; text-align: center;
  border-radius: 4px; padding: 0 5px; min-width: 22px; color: var(--txt);
  background: var(--card2); border: 2px solid var(--line); }
/* Colored zone chips have pale fills so they carry dark text; every other floor
   (no color class) keeps the light --txt from the base rule above — otherwise it
   renders black-on-black. */
.z-3b, .z-fl3, .z-4b, .z-fl4, .z-5b, .z-fl5 { color: #1a1a1a; }
.z-3b, .z-fl3 { background: #e2efda; border-color: #7cb342; }
.z-4b, .z-fl4 { background: #fce4d6; border-color: #ef8e3a; }
.z-5b, .z-fl5 { background: #d9e2f3; border-color: #5a8fe0; }
.sw-name { color: var(--txt); }
.sw-status { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.sw-status.ok { color: var(--good); }
.sw-status.bad { color: var(--bad); }
.sw-timeline { list-style: none; padding: 0; margin: 2px 0; }
.sw-ev { display: grid; grid-template-columns: 86px 16px 26px 1fr auto; gap: 8px;
  align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.sw-ev.ours { border-left: 2px solid var(--accent); padding-left: 8px; }
.sw-date { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.sw-tag { color: var(--dim); text-align: center; }
.sw-tag.e { color: var(--accent); font-weight: 700; }
.sw-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--dim); }
.sw-kind.k-start { color: var(--accent); }
.sw-kind.k-due { color: var(--warn); }
.sw-kind.k-finish { color: var(--good); }

/* Daily log changes */
ul.changes { list-style: none; padding-left: 0; max-height: 340px; overflow-y: auto; }
.change { display: grid; grid-template-columns: 84px 1fr; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.change-date { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.change-summary { font-size: 13px; }
.change .muted { grid-column: 2; font-size: 11px; }
.change-removed .change-summary { color: var(--warn, #f2d59a); }

/* Lookahead */
.scroll { max-height: 360px; overflow-y: auto; }
.day ul { list-style: none; padding: 0; }
.day li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.lead { display: inline-block; font-weight: 600; margin-right: 6px; }
.lead.unassigned { color: var(--bad); }
.flag { display: inline-block; font-size: 10px; background: var(--card2); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; margin-left: 4px; color: var(--muted); }

/* Blockers */
.blocker { border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px; padding: 9px 11px; margin: 8px 0; }
.blocker.esc2 { border-left-color: var(--warn); }
.blocker.esc3 { border-left-color: var(--bad); }
.blocker p { margin: 4px 0; font-size: 13px; }
.blocker-head { display: flex; align-items: center; gap: 6px; }
.tag { font-size: 11px; background: var(--card2); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; color: var(--muted); }
.bad-text { color: var(--bad); }

/* Crew */
.crew-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crew { background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 9px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.crew span { font-size: 12px; }
.crew.idle { border-color: var(--warn); }

/* Bars */
.bar-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.bar-label { width: 32px; font-weight: 600; font-size: 13px; }
.bar { flex: 1; height: 9px; background: var(--card2); border-radius: 5px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); }
.bar-val { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Chart */
.chart { width: 100%; height: auto; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .line-burned { fill: none; stroke: var(--good); stroke-width: 2; }
.chart .line-remaining { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .dot-burned { fill: var(--good); }
.chart .dot-remaining { fill: var(--accent); }
.chart .axis-label { fill: var(--muted); font-size: 10px; }
.key-burned { color: var(--good); } .key-remaining { color: var(--accent); }

/* Inbox */
.inbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.inbox-cell { background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; align-items: flex-start; }
.inbox-cell.strand { border-color: var(--warn); }
.inbox-n { font-size: 22px; font-weight: 700; }
.inbox-cat { font-size: 12px; }

/* Health */
.health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.health { display: flex; align-items: center; gap: 8px; font-size: 13px; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.health .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.health.ok .dot { background: var(--good); }
.health.stale .dot { background: var(--warn); }
.health.red .dot, .health.missing .dot { background: var(--bad); }
.health .muted { margin-left: auto; }

.foot { text-align: center; font-size: 11px; margin-top: 20px; }

/* ── Public schedule dashboard ─────────────────────────────────────────────
   Reuses .sw-timeline / .sw-zone (floor chips). Audience is non-technical
   foremen on phones, so: 16px+ controls (no iOS zoom), large tap targets,
   high-contrast trade chips. */
.sched-filters { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap;
  gap: 8px; align-items: center; padding: 10px 0; margin-bottom: 4px;
  background: var(--bg); border-bottom: 1px solid var(--line); }
.sched-filters input[type="search"], .sched-filters select {
  font-size: 16px; min-height: 40px; padding: 6px 10px; color: var(--txt);
  background: var(--card2); border: 1px solid var(--line); border-radius: 8px; }
.sched-filters input[type="search"] { flex: 1 1 160px; min-width: 0; }
.sched-filters .chk { display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; min-height: 40px; padding: 0 4px; color: var(--muted); }
.sched-filters .chk input { width: 18px; height: 18px; }
.sched-count { font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
.sched-empty { color: var(--muted); padding: 16px 4px; }

/* Time-window segmented control (30/60/90/All) */
.win-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.win-btn { font-size: 14px; min-height: 40px; padding: 0 12px; cursor: pointer;
  background: var(--card2); color: var(--muted); border: 0; border-left: 1px solid var(--line); }
.win-btn:first-child { border-left: 0; }
.win-btn.is-on { background: var(--accent); color: #0b1220; font-weight: 700; }

.sch-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; cursor: pointer;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }

/* Tap a row to reveal its activity ID, full name, and WBS group. */
.sch-detail { display: none; flex-basis: 100%; margin: 4px 0 0; padding: 7px 9px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 8px;
  font-size: 12.5px; color: var(--muted); }
.sch-row.open .sch-detail { display: block; }
.sch-detail .det-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--accent); font-weight: 700; }
.sch-detail .det-full { display: block; margin-top: 3px; color: var(--txt); }
.sch-detail .det-wbs { display: block; margin-top: 3px; }
/* `display: flex` above would otherwise override the [hidden] attribute the
   filter JS sets, so rows never disappear — re-assert the hide explicitly. */
.sch-row[hidden] { display: none; }
.sch-row.ours { border-left: 3px solid var(--accent); padding-left: 8px; }
.sch-date { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px;
  min-width: 96px; }
.sch-name { color: var(--txt); flex: 1 1 55%; min-width: 0; }
.sch-name .mile { color: var(--warn); }

/* Trade chips — pale high-contrast fills with dark text, like the floor chips. */
.sch-trade { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; border-radius: 4px; padding: 1px 6px; color: #1a1a1a;
  background: var(--card2); white-space: nowrap; }
.t-electrical        { background: #ffd866; }
.t-data              { background: #b9e08a; }
.t-hvac-mechanical   { background: #9bd1ff; }
.t-plumbing          { background: #a0e7e5; }
.t-fire-sprinkler    { background: #ff9b9b; }
.t-drywall-framing   { background: #d9c7a8; }
.t-ceilings          { background: #cfc6f2; }
.t-flooring-finishes { background: #f0b8d6; }
.t-concrete-structure{ background: #c9ccd1; }
.t-inspections-qc    { background: #f5c98a; }
.t-milestone         { background: #3a3f4a; color: #ffd866; }
.t-other             { background: #2a2f3a; color: var(--muted); }

/* Per-floor chips — colored by floor NUMBER so all sub-zones share a hue.
   Pale fill + dark text + saturated same-hue border, matching the OR zone chips.
   FL3/4/5 reuse the exact green/peach/blue from the ops tracker. */
.fl-1, .fl-2, .fl-3, .fl-4, .fl-5, .fl-6, .fl-7, .fl-8, .fl-9, .fl-10,
.fl-11, .fl-12, .fl-13, .fl-cep { color: #1a1a1a; }
.fl-1   { background: #fff2cc; border-color: #f1c232; }  /* yellow */
.fl-2   { background: #cce8e6; border-color: #3a9aa0; }  /* teal */
.fl-3   { background: #e2efda; border-color: #7cb342; }  /* green  (OR) */
.fl-4   { background: #fce4d6; border-color: #ef8e3a; }  /* peach  (OR) */
.fl-5   { background: #d9e2f3; border-color: #5a8fe0; }  /* blue   (OR) */
.fl-6   { background: #e6dcf2; border-color: #9b6dd6; }  /* purple */
.fl-7   { background: #fad6e5; border-color: #d65a9a; }  /* pink */
.fl-8   { background: #eaf4c9; border-color: #9fc131; }  /* lime */
.fl-9   { background: #d4ecf7; border-color: #3aa5cf; }  /* cyan */
.fl-10  { background: #ece0d1; border-color: #b08440; }  /* tan */
.fl-11  { background: #f9d6d2; border-color: #e0564b; }  /* coral */
.fl-12  { background: #dcdcf5; border-color: #6a6ad6; }  /* indigo */
.fl-13  { background: #e4e8d0; border-color: #9aa54a; }  /* olive */
.fl-cep { background: #dde3e8; border-color: #6b7c8c; }  /* slate */

@media (min-width: 620px) {
  .kpis { grid-template-columns: repeat(4, 1fr); }
}