/* Always light -- a cool, neutral gray (not the warm/beige-tinted default
   palette), regardless of OS dark-mode preference. This app has no
   dark-mode toggle, so letting `prefers-color-scheme` flip it produced an
   unwanted dark UI for anyone with system dark mode on. */
:root {
  color-scheme: light;
  --surface-1: #ffffff;
  --page: #f4f5f7;
  --text-primary: #111318;
  --text-secondary: #5b6472;
  --text-muted: #8b93a0;
  --gridline: #e5e8ec;
  --baseline: #c7ccd3;
  --border: rgba(17, 19, 24, 0.08);
  --seq-blue: #2a6fd6;
  --seq-blue-soft: #9ec5f4;
  --status-serious: #d9502f;
  --status-good: #0f9d3f;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}
h1 { font-size: 22px; margin: 0 0 4px; font-weight: 650; }
h2 { font-size: 16px; margin: 0 0 12px; color: var(--text-secondary); font-weight: 600; }
.subtitle { color: var(--text-secondary); margin: 0 0 24px; }

/* Full-width bar with a bottom separator; the logos themselves are centered
   in a narrower inner row so they don't stretch edge-to-edge. */
.brand-header {
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--gridline);
  min-height: 64px;
}
.brand-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin: 0 auto;
  max-width: 66%;
}
.brand-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.brand-logo img { max-height: 72px; max-width: 100%; object-fit: contain; display: none; }
.brand-logo.has-logo img { display: block; }
.brand-divider { width: 1px; height: 48px; background: var(--gridline); flex-shrink: 0; }

/* Org name + subtitle on the left, "Active through" inline on the right,
   under the logo header -- not part of the header itself. */
.title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.active-through { font-size: 12px; color: var(--text-secondary); white-space: nowrap; margin-top: 4px; }

/* Native file inputs render inconsistently and look out of place next to a
   clean logo -- hide it and style the <label> as the control instead. */
.logo-upload-label {
  position: relative;
  font-size: 12px;
  color: var(--seq-blue);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  transition: background 0.1s;
}
.logo-upload-label:hover { background: var(--gridline); }
.logo-upload { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
@media (max-width: 700px) {
  .brand-logos { max-width: 100%; gap: 16px; }
  .title-row { flex-wrap: wrap; }
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.admin-form { display: flex; gap: 8px; margin-bottom: 24px; }
.admin-form input, .field-input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 14px;
  width: 100%;
}
.admin-form button, .btn {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  background: var(--seq-blue);
  color: white;
  font-size: 14px;
  cursor: pointer;
}
.admin-form button:hover, .btn:hover { opacity: 0.9; }

.btn-secondary {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--page);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-secondary:hover { background: var(--gridline); }

.stacked-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.input-with-button { display: flex; gap: 8px; }
.input-with-button .field-input { flex: 1; }

.meters { display: flex; gap: 24px; flex-wrap: wrap; }
.meter { flex: 1; min-width: 220px; }
.meter-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.meter-value { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: 600; }
.meter-track {
  height: 14px;
  border-radius: 7px;
  background: var(--gridline);
  overflow: hidden;
  display: flex;
}
.meter-fill { background: var(--seq-blue); height: 100%; }
.meter-overage { background: var(--status-serious); height: 100%; }
.meter-note { font-size: 12px; color: var(--status-serious); margin-top: 6px; }
.meter-note.ok { color: var(--status-good); }

.bar-list { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 160px 1fr 40px; align-items: center; gap: 8px; font-size: 13px; }
.bar-row .name { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 10px; background: var(--gridline); border-radius: 5px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--seq-blue); }
.bar-row .count { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary); }

.stat-row { display: flex; gap: 16px; flex-wrap: wrap; }
.stat-tile { flex: 1; min-width: 140px; text-align: center; padding: 16px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; }
.stat-tile .value { font-size: 28px; font-weight: 700; }
.stat-tile .label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--gridline); }
th { color: var(--text-muted); font-weight: 500; }

.error { color: var(--status-serious); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.col { display: flex; flex-direction: column; }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }

/* Every drill-down trigger, whatever element it's on (meter, bar row, stat
   tile, table row) -- clear pointer cursor + a light-blue "clickable" tint
   (not just a gray background, which read as barely-there) + the primary
   text turning link-blue, so it's never ambiguous what's clickable. */
.drillable { cursor: pointer; border-radius: 6px; transition: background 0.1s, box-shadow 0.1s, color 0.1s; }
.drillable:hover, .drillable:focus-visible {
  background: #eaf2fd;
  box-shadow: inset 0 0 0 1px var(--seq-blue-soft);
  outline: none;
}
.drillable:hover .name, .drillable:focus-visible .name,
.drillable:hover .meter-label span:first-child, .drillable:focus-visible .meter-label span:first-child,
.drillable:hover .value, .drillable:focus-visible .value { color: var(--seq-blue); }
tr.drillable:hover td, tr.drillable:focus-visible td { background: #eaf2fd; }
tr.drillable:hover td:nth-child(2), tr.drillable:focus-visible td:nth-child(2) { color: var(--seq-blue); }
.meter.drillable:hover, .meter.drillable:focus-visible { padding: 8px; margin: -8px; }
.stat-tile.drillable:hover, .stat-tile.drillable:focus-visible { border-color: var(--seq-blue-soft); }

.drilldown-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(11, 11, 11, 0.5);
  align-items: center; justify-content: center;
  z-index: 100;
  padding: 16px;
}
.drilldown-panel {
  background: var(--surface-1);
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
}
.drilldown-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; gap: 12px; }
.drilldown-header h2 { margin: 0; font-size: 16px; color: var(--text-primary); }
.drilldown-actions { display: flex; gap: 14px; flex-shrink: 0; }
.drilldown-header a { color: var(--seq-blue); text-decoration: none; font-size: 13px; cursor: pointer; }
.drilldown-header a:hover { text-decoration: underline; }

.loading-state { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); padding: 40px 0; }
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--gridline);
  border-top-color: var(--seq-blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.report-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 8px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.report-toolbar a {
  color: var(--seq-blue);
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 5px;
  transition: background 0.1s;
}
.report-toolbar a:hover { background: var(--gridline); }

.pdf-page-2 { margin-top: 24px; padding-top: 24px; border-top: 1px dashed var(--gridline); }

.print-footer { display: none; }

/* Standard way to ask for "page X of Y" in print -- Chrome has historically
   not rendered @page margin-box content at all (unlike Firefox/Prince/
   WeasyPrint), so this may be a no-op there. If it doesn't show up in the
   print preview, the fallback is Chrome's own "Headers and footers" print
   dialog checkbox, which isn't stylable but does show real page numbers. */
@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
    font-size: 9px;
    color: #767b85;
  }
}

@media print {
  @page { size: letter; margin: 0.5in; }
  .no-print { display: none !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body, .page { background: white; color: black; }

  /* The margin a viewer picks in the print dialog (e.g. "Minimum" or "None")
     overrides @page and can push content to the physical edge -- padding
     inside the page itself is the only thing that reliably guarantees
     breathing room regardless of that setting. Extra top/bottom padding also
     reserves room for the fixed header/footer below. */
  .page { max-width: none; margin: 0; padding: 104px 28px 44px; }

  /* Chrome repeats a `position: fixed` element on every printed page, which
     is what makes one header/footer appear on both pages instead of only
     wherever it sits in document flow. */
  .brand-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    margin: 0;
    min-height: 0;
    padding: 10px 28px;
    background: white;
    z-index: 10;
  }
  .brand-logo img { max-height: 58px; }
  .print-footer {
    display: block;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    text-align: center;
    font-size: 9px;
    color: #767b85;
    padding: 8px 28px;
    background: white;
  }

  /* Compact sizing throughout -- the goal is membership/demographics/
     committees fitting on one printed page and all of product purchases
     fitting on a second, which needs real estate saved everywhere, not just
     one big lever. Depends on how much data a given org has (a very large
     committee or purchase history may still spill further); this is the
     tightest reasonable fit without truncating any rows. */
  h1 { font-size: 17px; margin-bottom: 2px; }
  h2 { font-size: 12.5px; margin-bottom: 6px; }
  .subtitle { font-size: 10.5px; margin-bottom: 10px; }
  .active-through { font-size: 10px; margin-top: 2px; }
  .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; page-break-inside: avoid; padding: 8px 12px; margin-bottom: 8px; }
  .grid-2 { break-inside: avoid; gap: 10px; }
  .meters { gap: 16px; }
  .meter-track { height: 10px; }
  .meter-note { font-size: 10px; margin-top: 3px; }
  .bar-list { gap: 3px; }
  .bar-row { font-size: 10.5px; grid-template-columns: 140px 1fr 30px; }
  .bar-track { height: 6px; }
  .stat-row { gap: 10px; margin-bottom: 8px !important; }
  .stat-tile { padding: 6px; }
  .stat-tile .value { font-size: 17px; }
  .stat-tile .label { font-size: 9px; }
  table { font-size: 9.5px; }
  th, td { padding: 2px 5px; }
  a { color: inherit; text-decoration: none; }

  /* Cards and tables never split mid-box -- a whole card cleanly jumping to
     the next physical page reads fine; a card/table cut off partway through
     (its border ending mid-air, rows missing) does not. This means product
     purchases may occasionally spill onto a 3rd sheet for an org with an
     unusually long committee or purchase history; that's a real paper-size
     tradeoff, not a bug -- a clean 3-page report beats a broken 2-page one. */
  .card, table { break-inside: avoid; page-break-inside: avoid; }

  /* .page's own top padding only reserves header clearance once, at the
     very start of the flow -- it does NOT reapply on page 2's physical
     sheet just because the fixed header repeats there too. Page 2 needs
     its own matching top padding, or its content renders straight under
     the fixed header (confirmed: stat tiles' top edges were clipped). */
  .pdf-page-2 { break-before: page; page-break-before: always; margin-top: 0; padding-top: 104px; border-top: none; }
}