/* reports.css — shared snapshot + report-page styles, split from styles.css (M8).
   Loaded (after styles.css) by the /app pivot page, /snapshots.html and /bic.html;
   snapshot.js / snapshots-page.js / bic-page.js emit these class names. */

/* ---------- snapshot tracking ---------- */
.snap-take { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.snap-take input { padding: 5px 9px; border: 1px solid var(--line-dk); border-radius: var(--radius); font-size: 12.5px; min-width: 150px; }
.snap-take input:focus { outline: 2px solid var(--vcg); border-color: var(--vcg); }
.snap-take-note { font-size: var(--fs-md); color: var(--muted); }
.snap-take-note b { color: var(--ink); }
.snap-section-title { font-size: var(--fs-md); font-weight: 600; color: var(--heading); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 8px; }
.snap-section-title i { text-transform: none; font-weight: 400; color: var(--muted); }
.snap-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 12.5px; background: var(--surface); border: 1px dashed var(--line-dk); border-radius: 8px; }

.snap-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.snap-table th { text-align: left; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line-dk); padding: 5px 8px; white-space: nowrap; }
.snap-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.snap-table td.num, .snap-table th.num { text-align: right; white-space: nowrap; }
.snap-pc { color: var(--muted); font-size: var(--fs-xs); }

.snap-hist .snap-pick { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.snap-hist .snap-when { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.snap-rowsel { background: var(--surface-3); }
.snap-del { border: none; background: none; cursor: pointer; opacity: .6; font-size: var(--fs-base); }
.snap-del:hover { opacity: 1; }

.snap-cmp-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-md); margin-bottom: 12px; }
.snap-cmp-controls select { padding: 4px 7px; border: 1px solid var(--line-dk); border-radius: 5px; }
.snap-cmp-controls .snap-vs { color: var(--muted); }
.snap-cmp-controls > button { margin-left: auto; }

.snap-cards { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.snap-card { flex: 1 1 150px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; position: relative; }
.snap-card-gold { background: light-dark(#EBF4F0, #17271f); border-color: light-dark(#9EC4BA, #2f5d4f); }
.snap-card-n { font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1; }
.snap-card-d { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.snap-card-l { font-size: var(--fs-sm); color: var(--muted); margin-top: 5px; }
.snap-card-pc { position: absolute; top: 12px; right: 14px; font-size: 14px; font-weight: 700; color: var(--heading); }
.snap-card-gold .snap-card-pc { color: light-dark(#2E7A65, #6cc0a3); }

.snap-sub { font-size: var(--fs-2xs); color: var(--muted); font-weight: 400; margin-top: 1px; }
.snap-breakdown { font-size: var(--fs-sm); color: var(--muted); margin: -4px 0 12px; }
.snap-breakdown b { color: var(--ink); }
.snap-ds { display: inline-block; font-size: var(--fs-2xs); font-weight: 700; padding: 1px 6px; border-radius: var(--radius-lg); line-height: 1.5; }
.snap-ds-submittals { background: light-dark(#E8E8E8, var(--surface-3)); color: light-dark(#333333, var(--ink)); }
.snap-ds-rfis { background: light-dark(#E0E0E0, var(--surface-2)); color: light-dark(#444444, var(--muted)); }
.snap-ds-combined { background: light-dark(#DDE8E4, #17271f); color: light-dark(#2A6458, #6cc0a3); }
/* FR-83: report level badges — company-wide vs project-scoped. */
.snap-ds-company { background: light-dark(#DDE8E4, #17271f); color: light-dark(#2A6458, #6cc0a3); }
.snap-ds-project { background: light-dark(#E6EEF6, #16232f); color: light-dark(#2B5378, #7fa8d1); }
.snap-detail .snap-star { color: var(--accent); text-align: center; width: 22px; }
.snap-detail .snap-item a { color: var(--heading); text-decoration: none; }
.snap-detail .snap-item a:hover { text-decoration: underline; }
.snap-detail tr.snap-pri { background: var(--priority); }
.snap-arrow { color: var(--heading); font-weight: 600; }
.snap-verdict { white-space: nowrap; }
.snap-yes { color: light-dark(#1a7f37, #5fd18a); font-weight: 600; }
.snap-no { color: var(--muted); }

/* ---------- snapshot report PAGE render (/snapshots.html, /bic.html) ---------- */
.snap-report { flex: 1; overflow: auto; padding: 18px 26px 40px; max-width: 1240px; width: 100%; margin: 0 auto; }

.rep-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.rep-take { display: flex; align-items: center; gap: 8px; }
.rep-take input { padding: 6px 10px; border: 1px solid var(--line-dk); border-radius: var(--radius); font-size: var(--fs-base); min-width: 160px; }
.rep-take input:focus { outline: 2px solid var(--vcg); border-color: var(--vcg); }
.rep-take-note { font-size: var(--fs-md); color: var(--muted); }
.rep-take-note b { color: var(--ink); }

.rep-section { margin-top: 22px; }
.rep-section h3 { font-size: var(--fs-lg); color: var(--heading); margin: 0 0 10px; font-weight: 600; }
.rep-sub-h { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.rep-firstrun { margin-top: 22px; }

.rep-cmpbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--fs-base); margin-bottom: 14px; }
.rep-cmpbar .rep-k { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; }
.rep-cmpbar select { padding: 5px 8px; border: 1px solid var(--line-dk); border-radius: 5px; }
.rep-cmpbar .rep-vs { color: var(--muted); }
.rep-cmpbar .rep-when { color: var(--muted); font-size: var(--fs-sm); }
.rep-cmpbar-sp { flex: 1; }

/* metric cards */
.rep-cards { display: flex; gap: 14px; flex-wrap: wrap; }
.rep-card { flex: 1 1 150px; min-width: 140px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; position: relative; box-shadow: var(--shadow); }
.rep-card-gold { background: light-dark(#EBF4F0, #17271f); border-color: light-dark(#9EC4BA, #2f5d4f); }
.rep-card-warn { background: light-dark(#fdf3f2, #2e1b1b); border-color: light-dark(#e9c4c2, #6b3a38); }
.rep-card-n { font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1; }
.rep-card-d { font-size: var(--fs-lg); font-weight: 500; color: var(--muted); margin-left: 4px; }
.rep-card-l { font-size: var(--fs-md); color: var(--muted); margin-top: 6px; }
.rep-card-pc { position: absolute; top: 14px; right: 16px; font-size: var(--fs-lg); font-weight: 700; color: var(--heading); }
.rep-card-gold .rep-card-pc { color: light-dark(#2E7A65, #6cc0a3); }
.rep-card-warn .rep-card-n { color: light-dark(#a4262c, #f28b82); }

.rep-split { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.rep-chip { font-size: var(--fs-md); color: var(--muted); background: var(--chip); border: 1px solid var(--line); border-radius: 16px; padding: 5px 13px; }
.rep-chip b { color: var(--ink); }

/* tables */
.rep-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rep-table th { position: relative; text-align: left; color: var(--muted); font-weight: 600; border-bottom: 1.5px solid var(--line-dk); padding: 7px 9px; white-space: nowrap; }
.rep-table td { padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rep-table.colw { table-layout: fixed; }
.rep-table.colw th, .rep-table.colw td { overflow: hidden; text-overflow: ellipsis; }
.rep-table td.num, .rep-table th.num { text-align: right; white-space: nowrap; }
.rep-rowsel { background: var(--surface-3); }
.rep-pick { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rep-when { font-size: 10.5px; color: var(--muted); }
.rep-sub { font-size: var(--fs-2xs); color: var(--muted); margin-top: 1px; }
.rep-del { border: none; background: none; cursor: pointer; opacity: .6; font-size: 14px; }
.rep-del:hover { opacity: 1; }
.rep-muted { color: var(--muted); }
.rep-pendnum { color: light-dark(#a4262c, #f28b82); font-weight: 600; }

/* progress bar */
.rep-bar { position: relative; min-width: 150px; height: 17px; background: var(--surface-3); border-radius: 9px; overflow: hidden; }
.rep-bar-fill { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 9px; }
.rep-bar-gold { background: light-dark(#3A8B70, #3f9e80); }
.rep-bar-slate { background: var(--vcg); }
.rep-bar-txt { position: relative; z-index: 1; font-size: 10.5px; line-height: 17px; padding-left: 8px; color: var(--ink); font-weight: 600; }

/* detail */
.rep-detail .rep-star { color: var(--accent); text-align: center; width: 20px; }
.rep-item a { color: var(--heading); text-decoration: none; }
.rep-item a:hover { text-decoration: underline; }
.rep-item .snap-ds { vertical-align: middle; margin-right: 3px; }
.rep-detail tr.rep-pri { background: var(--priority); }
.rep-detail tr.rep-ret.rep-pri { background: light-dark(#EDF5F1, #17271f); }
.rep-step { color: var(--muted); white-space: nowrap; }
.rep-arrow { color: var(--heading); font-weight: 600; }
.rep-detail tr.rep-ret.rep-pri .rep-item a, .rep-detail tr.rep-ret.rep-pri .rep-arrow { color: light-dark(var(--vcg-dd), var(--ink)); }
.rep-strike { text-decoration: line-through; }
.rep-verdict { white-space: nowrap; }
.rep-yes { color: light-dark(#1a7f37, #5fd18a); font-weight: 600; }
.rep-no { color: var(--muted); }
.rep-days-cell { white-space: nowrap; }
.rep-days-med { color: light-dark(#c28100, #e0a53a); font-weight: 600; }
.rep-days-hi  { color: light-dark(#a4262c, #f28b82); font-weight: 700; }

/* --- Snapshot management -------------------------------------------------- */
.rep-trend-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.rep-trend-header h3 { margin: 0; flex: 1; }
.rep-snap-search { padding: 5px 9px; border: 1px solid var(--line-dk); border-radius: 16px; font-size: var(--fs-md); min-width: 200px; }
.rep-snap-search:focus { outline: 2px solid var(--vcg); border-color: var(--vcg); }
.rep-trend-scroll { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.rep-trend-scroll .rep-table { width: 100%; }
.rep-trend-scroll thead th { position: sticky; top: 0; background: var(--hdr); z-index: 1; }
.rep-trash-toggle { margin-top: 10px; }
.rep-trash-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); margin-top: 6px; }
.rep-trash-table th { text-align: left; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line-dk); padding: 5px 9px; }
.rep-trash-table td { padding: 5px 9px; border-bottom: 1px solid var(--line); }
.rep-restore { border: 1px solid var(--line-dk); background: light-dark(#EBF4F0, #17271f); color: light-dark(#2E7A65, #6cc0a3); border-radius: 5px; padding: 3px 8px; font-size: var(--fs-xs); cursor: pointer; white-space: nowrap; }
.rep-restore:hover { background: light-dark(#D2EBE3, #1f342a); }

/* --- Ball in Court page ---------------------------------------------------- */
.bic-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.bic-ctrl { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.bic-lbl { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; }
.bic-chk { cursor: pointer; }
.bic-ctrl select { padding: 5px 8px; border: 1px solid var(--line-dk); border-radius: 5px; font-size: 12.5px; max-width: 260px; }
.bic-spacer { flex: 1; }
.bic-segs { display: inline-flex; border: 1px solid var(--line-dk); border-radius: var(--radius); overflow: hidden; }
.bic-seg { border: none; background: var(--surface); padding: 5px 11px; font-size: var(--fs-md); cursor: pointer; color: var(--heading); border-left: 1px solid var(--line); }
.bic-seg:first-child { border-left: none; }
.bic-seg:hover { background: var(--surface-3); }
.bic-seg.on { background: var(--vcg-d); color: #fff; }  /* #F8: --vcg is 3:1 behind white in dark */
.bic-basis { font-size: var(--fs-sm); color: var(--muted); margin: 8px 0 2px; }
.rep-card-sub { font-size: var(--fs-xs); color: var(--heading); margin-top: 4px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bic-dur-hi { color: light-dark(#a4262c, #f28b82); font-weight: 700; }
.bic-dur-mid { color: light-dark(#b8860b, #e0a53a); font-weight: 700; }
.bic-pastdue { color: light-dark(#a4262c, #f28b82); font-weight: 600; white-space: nowrap; }
.bic-bar-hi { background: light-dark(#a4262c, #f28b82); }
.bic-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.bic-th-sort:hover { background: light-dark(rgba(0,0,0,.04), rgba(255,255,255,.06)); }
.bic-th-active { color: var(--ink) !important; }
.bic-sort-ico { font-size: var(--fs-2xs); margin-left: 3px; color: var(--muted); opacity: .55; }
.bic-sort-ico.on { opacity: 1; color: var(--accent); }
.bic-courts tr.bic-clk { cursor: pointer; }
.bic-courts tr.bic-clk:hover { background: var(--surface-3); }
.bic-detail .rep-star { color: var(--accent); text-align: center; width: 20px; }

@media print {
  .snap-page .appbar, .snap-page .appfooter { display: none !important; }
  .snap-report { overflow: visible; max-width: none; padding: 0; }
  .no-print { display: none !important; }
  .print-only { display: inline !important; }
  .rep-card { box-shadow: none; }
  .rep-section { break-inside: avoid; }
}

/* #202 / #221 — dark-theme sweep for the snapshot/report/BIC classes. These
   classes hardcode light hex values (pale green "gold" tiles, pink "warn" tiles,
   DS badges, near-black link text on tinted rows, dark reds/greens/ambers for
   status text) that don't flow from the semantic tokens. Each now carries its
   dark value inline via light-dark(light, dark) in the base rule above, so it
   follows color-scheme — flipping for both system dark and the manual theme
   toggle (#221). Token-driven rules were already correct and left untouched. */