/* Spray Review SPA — vanilla, no build tools.
   Designed to deploy as-is to Cloudflare Pages.
   Dark theme tuned to match the per-shift report.html palette. */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  /* CRITICAL for iframe scrolling: pin html + body to viewport height
     and clip overflow at the document root. Without this, the OUTER
     page expands to its content and the iframe's `position:absolute;
     inset:0` covers the entire long page — no scrollbar appears
     because the iframe sees no overflow (it thinks its viewport
     equals its content height).
     We use `position: fixed` on #app for the same reason: it
     decouples the SPA shell completely from any document-level
     reflow caused by the iframe's content height. */
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  background: #0d1117;
  color: #c9d1d9;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ────────── Sidebar ────────── */
#sidebar {
  background: #161b22;
  border-right: 1px solid #21262d;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  flex: 0 0 360px;
}
.sb-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid #21262d;
}
.sb-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #f0f6fc;
}
.sb-sub {
  font-size: 13.5px;
  color: #8b949e;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.sb-stats {
  padding: 12px 20px;
  border-bottom: 1px solid #21262d;
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: #8b949e;
  flex-wrap: wrap;
}
.sb-stats .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: #0d1117;
  border-radius: 9999px;
  border: 1px solid #21262d;
}
.sb-stats .pill .num {
  font-weight: 700;
  color: #f0f6fc;
  font-variant-numeric: tabular-nums;
}
.sb-stats .pill.ok      { border-color: #144d28; color: #4ade80; }
.sb-stats .pill.ok .num { color: #4ade80; }
.sb-stats .pill.no      { border-color: #501818; color: #f87171; }
.sb-stats .pill.no .num { color: #f87171; }

#sb-tree {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 0;
}

#sb-tree .company {
  padding: 14px 16px 6px;
  font-size: 12.5px;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
#sb-tree .group {
  padding: 4px 16px 4px 22px;
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
}
#sb-tree .shift {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 28px;
  font-size: 14px;
  color: #c9d1d9;
  cursor: pointer;
  border-left: 3px solid transparent;
}
#sb-tree .shift:hover { background: #1a1f2e; }
#sb-tree .shift.active {
  background: #1a1f2e;
  color: #f0f6fc;
}
#sb-tree .shift.active .shift-dev { color: #f0f6fc; }
#sb-tree .shift.reviewed-approved { border-left-color: #16a34a; }
#sb-tree .shift.reviewed-rejected { border-left-color: #ef4444; }

#sb-tree .shift-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex: 0 0 8px;
  background: #4b5563;
}
#sb-tree .shift-dot.v-spraying     { background: #10b981; }
#sb-tree .shift-dot.v-not_spraying { background: #ef4444; }
#sb-tree .shift-dot.v-uncertain    { background: #f59e0b; }

#sb-tree .shift-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#sb-tree .shift-dev {
  font-weight: 600;
  font-size: 14px;
  color: #c9d1d9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sb-tree .shift-time {
  font-size: 12px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
#sb-tree .shift-rev {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}
#sb-tree .shift.reviewed-approved .shift-rev {
  color: #4ade80; background: #14532d40;
}
#sb-tree .shift.reviewed-rejected .shift-rev {
  color: #f87171; background: #450a0a40;
}

.sb-foot {
  padding: 12px 16px;
  border-top: 1px solid #21262d;
  display: flex;
  gap: 8px;
}
.sb-foot button {
  flex: 1;
  padding: 8px 10px;
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid #30363d;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.sb-foot button:hover { background: #2a313a; }

/* ────────── Main ────────── */
#main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
#topbar         { flex: 0 0 auto; }
#review-drawer  { flex: 0 0 auto; }

#topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 22px;
  background: #11161d;
  border-bottom: 1px solid #21262d;
}
.tb-nav {
  display: flex;
  gap: 8px;
}
.tb-nav button {
  padding: 8px 16px;
  background: #21262d;
  color: #f0f6fc;
  border: 1px solid #30363d;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
}
.tb-nav button:hover { background: #2a313a; }
.tb-nav button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tb-crumbs {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  color: #c9d1d9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-crumbs .crumb-sep { color: #484f58; margin: 0 10px; }
.tb-crumbs .crumb-strong { color: #f0f6fc; font-weight: 600; }
.tb-counter {
  font-size: 14px;
  color: #c9d1d9;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#report-frame {
  position: relative;
  background: #0d1117;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
/* Use absolute positioning for the iframe so it always fills its
   positioned parent EXACTLY, regardless of whether height:100% in
   the flex chain produced a definite size. Without this, some
   browsers leave the iframe sized to its content's intrinsic
   document height, which makes the iframe's own scrollbar render
   but stay stuck (no overflow to scroll). */
#report {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #0d1117;
}
/* The `display: flex` MUST be scoped to the not-hidden state. The
   browser's UA rule `[hidden] { display: none }` has lower specificity
   (0,0,1,0) than `#empty-state` (0,1,0,0), so an unscoped
   `#empty-state { display: flex }` would defeat the HTML `hidden`
   attribute — the element would stay rendered, and because it is
   `position: absolute; inset: 0` it would sit on top of the iframe
   and silently swallow every wheel/click event. That was the real
   cause of both "I see the No-shift overlay" AND "scrolling looks
   stuck". With `:not([hidden])` the display rule activates only when
   we ACTUALLY want the overlay visible. */
#empty-state:not([hidden]) {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 14px;
  pointer-events: none;
}

/* ────────── Review drawer ────────── */
#review-drawer {
  background: #161b22;
  border-top: 1px solid #21262d;
  padding: 14px 22px 16px;
}
.dr-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.dr-state { flex: 1; min-width: 0; }
.dr-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.pill-pending   { background: #21262d; color: #c9d1d9; }
.pill-approved  { background: #14532d; color: #4ade80; }
.pill-rejected  { background: #450a0a; color: #f87171; }
.dr-actions {
  display: flex;
  gap: 8px;
}
.dr-actions button {
  padding: 9px 20px;
  border-radius: 4px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-reject  { background: #7f1d1d; color: #fee2e2; border-color: #ef4444; }
.btn-reject:hover  { background: #991b1b; }
.btn-approve { background: #065f46; color: #d1fae5; border-color: #10b981; }
.btn-approve:hover { background: #047857; }
.btn-clear   { background: #21262d; color: #c9d1d9; border-color: #30363d; }
.btn-clear:hover   { background: #2a313a; }

#dr-note {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  background: #0d1117;
  color: #c9d1d9;
  border: 1px solid #30363d;
  border-radius: 4px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 800px) {
  #app { grid-template-columns: 1fr; }
  #sidebar { display: none; }
}