/* =====================================================
   Report Studio — First Mile
   Primary green:  #2E7D4F
   Accent cyan:    rgb(25, 203, 203)
   ===================================================== */

:root {
  --green: #2e7d4f;
  --green-dark: #1f5938;
  --cyan: rgb(25, 203, 203);
  --cyan-soft: rgba(25, 203, 203, 0.12);
  --ink: #1c2329;
  --muted: #6c7680;
  --line: #e3e7ec;
  --bg: #f5f7f9;
  --card: #ffffff;
  --danger: #c2410c;
}

@font-face {
  font-family: "Larsseit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Larsseit-Regular.otf") format("opentype"),
       local("Larsseit"), local("Larsseit-Regular");
}
@font-face {
  font-family: "Larsseit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Larsseit-Medium.otf") format("opentype"),
       local("Larsseit Medium"), local("Larsseit-Medium");
}
@font-face {
  font-family: "Larsseit";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Larsseit-Bold.otf") format("opentype"),
       local("Larsseit Bold"), local("Larsseit-Bold");
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: "Larsseit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; }
h1 { font-size: 1.7rem; font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
.muted { color: var(--muted); }

/* ---------- Studio chrome ---------- */
.studio-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand img { height: 28px; }
.brand span { font-weight: 700; font-size: 1.05rem; }
.studio-nav { display: flex; align-items: center; gap: 6px; }
.studio-nav a { padding: 8px 14px; border-radius: 8px; color: var(--ink); }
.studio-nav a.active { color: var(--green); background: rgba(46,125,79,0.08); }
.studio-nav a.btn { color: #fff; }
.studio-main { max-width: 1180px; margin: 0 auto; padding: 28px 32px 64px; }
@media (max-width: 720px) {
  .studio-header { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
  .studio-nav { flex-wrap: wrap; max-width: 100%; }
  body:not(.portal) .studio-main { padding: 20px 16px 48px; }
  .settings-form, .settings-form > * { min-width: 0; }
  .studio-main .factor-table { display: block; max-width: 100%; overflow-x: auto; }
}

.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 20px; gap: 16px;
}
.page-header.preview-header { align-items: center; }
.page-header .actions { display: flex; align-items: center; gap: 10px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.card.empty { text-align: center; padding: 56px 20px; }
.card.empty h2 { margin-bottom: 8px; }
.card.empty p { margin: 0 0 16px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  color: var(--ink);
}
.btn:hover { text-decoration: none; }
.btn.primary { background: var(--green); color: #fff; }
.btn.primary:hover { background: var(--green-dark); }
.btn.ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn.ghost:hover { background: #f7f8fa; }
.btn.ghost.danger { color: var(--danger); border-color: #e9c8b6; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Forms */
.form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px; font: inherit; background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--cyan); outline-offset: 0; border-color: var(--cyan);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Tables */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th, .data-table td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.data-table th {
  background: #fafbfc; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem;
}
.data-table tbody tr:hover { background: #fafbfc; }
.actions-col { text-align: right; }
.actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.actions form { display: inline; }

.status {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
}
.status-draft { background: var(--cyan-soft); color: #117a7a; }
.status-final { background: #e8f5ee; color: var(--green-dark); }

/* ---------- Preview shell ---------- */
.report-frame {
  background: var(--bg);
  display: flex; justify-content: center;
  padding: 8px 0 40px;
}
.report-standalone { background: #fff; margin: 0; }
.report {
  width: 210mm;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}
.report-standalone .report { box-shadow: none; }

/* ---------- Report pages ---------- */
/* PDF page size/orientation lives inline in each printable template
   (views/report/derwent.hbs = portrait, views/embed.hbs = portrait) so the two
   documents never fight over a shared `@page` rule. */

.report .page {
  padding: 20mm 18mm;
  min-height: 297mm;
  page-break-after: always;
  break-after: page;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.report .page:last-child { page-break-after: auto; break-after: auto; }

.page-1-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 4px solid var(--green); padding-bottom: 16px;
}
.report-eyebrow { color: var(--cyan); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.85rem; }
.report-title { font-size: 2.4rem; margin-top: 4px; color: var(--green-dark); }
.report-logo { height: 56px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 22px;
}
.stat {
  display: flex; gap: 14px; align-items: center;
  padding: 14px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff;
}
.stat-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.3rem;
  background: var(--green); flex-shrink: 0;
}
.stat-icon--recycling { background: var(--green); }
.stat-icon--trees { background: #5cb85c; }
.stat-icon--paper { background: #a1887f; font-size: 1.5rem; }
.stat-icon--co2 { background: var(--cyan); font-size: 0.95rem; }
.stat-icon--meals { background: #f0ad4e; font-size: 1.4rem; }
.stat-icon--homes { background: #5d6d7e; font-size: 1.4rem; }
.stat-icon--coffee { background: #6f4e37; font-size: 1.4rem; }
.stat-icon--weight { background: var(--green-dark); }
.stat-value { font-size: 1.6rem; font-weight: 700; color: var(--green-dark); line-height: 1; }
.stat-label { color: var(--ink); font-size: 0.85rem; margin-top: 4px; }
.stat-sub { color: var(--muted); font-size: 0.75rem; margin-top: 2px; }

.narrative-block {
  margin-top: auto; padding: 14px; border: 1px dashed var(--cyan);
  background: var(--cyan-soft); border-radius: 10px;
}
.narrative-block textarea {
  width: 100%; min-height: 110px; resize: vertical;
  border: none; background: transparent; font: inherit; color: var(--ink); outline: none;
}
.narrative-text { margin: 0; white-space: pre-wrap; min-height: 60px; }
.footnote { color: var(--muted); font-size: 0.72rem; margin: 0; }

/* Pages 2-5 */
.page-header-bar {
  border-bottom: 2px solid var(--green); padding-bottom: 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi-row--2 { grid-template-columns: repeat(2, 1fr); }
.kpi {
  background: var(--green); color: #fff;
  border-radius: 10px; padding: 16px; text-align: center;
}
.kpi-value { font-size: 1.8rem; font-weight: 700; }
.kpi-label { font-size: 0.85rem; opacity: 0.9; margin-top: 4px; }

.chart-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chart-stack { display: flex; flex-direction: column; gap: 16px; }
.chart-card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.chart-card.wide { grid-column: 1 / -1; }
.chart-card h3 { color: var(--green-dark); font-size: 0.95rem; }
.chart-card .chart-box {
  position: relative;
  width: 100%;
  height: 220px;
}
.chart-card.wide .chart-box { height: 260px; }
.chart-card .chart-box--tall { height: 285px; }

/* Occupier detail pages are denser (2 charts + 2 tables + area chart), so use
   tighter chart heights, padding and table rows to keep each on a single page. */
.page-occupier { gap: 12px; }
.page-occupier .chart-card { padding: 10px 12px; gap: 6px; }
.page-occupier .chart-card .chart-box { height: 165px; }
.page-occupier .chart-card.wide .chart-box { height: 190px; }
.page-occupier .data-table.compact th,
.page-occupier .data-table.compact td { padding: 3px 4px; }
.chart-card .chart-box canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.service-col { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.service-col h3 { color: var(--green-dark); margin-bottom: 8px; }
.mini-stats { width: 100%; border-collapse: collapse; }
.mini-stats th, .mini-stats td { padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.mini-stats th { text-align: left; color: var(--muted); font-weight: 600; }
.mini-stats td { text-align: right; font-weight: 700; color: var(--green-dark); }

.matrix-table { overflow-x: visible; }
.data-table.compact { font-size: 0.72rem; table-layout: fixed; width: 100%; }
.data-table.compact th, .data-table.compact td {
  padding: 5px 4px; text-align: right; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.data-table.compact th:first-child, .data-table.compact td:first-child {
  text-align: left; font-weight: 600; white-space: normal; width: 22%;
}
.data-table.compact th { letter-spacing: 0; font-size: 0.7rem; }
.matrix-table .data-table.compact th:last-child,
.matrix-table .data-table.compact td:last-child {
  width: 9%; overflow: visible; text-overflow: clip;
}
.data-table.compact .total-row td { background: #f0f4f1; }
.data-table.compact .rate-row td { background: var(--cyan-soft); color: var(--green-dark); font-weight: 700; }

.league-table { overflow-x: visible; }
.league-table .data-table.compact th:first-child,
.league-table .data-table.compact td:first-child {
  width: 4%; text-align: right; white-space: nowrap;
}
.league-table .data-table.compact th:nth-child(2),
.league-table .data-table.compact td:nth-child(2) {
  text-align: left; font-weight: 600; white-space: normal; width: 18%;
}

.header-actions { display: flex; align-items: center; gap: 10px; }

.bulk-export {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.bulk-export h2 { margin: 0 0 4px; font-size: 1.15rem; }
.bulk-export p { margin: 0; max-width: 52ch; }
.bulk-export-controls { display: flex; align-items: flex-end; gap: 12px; }
.bulk-export-controls .field { margin: 0; }
.bulk-export-controls .field input { width: 100px; }

.upload-stats { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.upload-stats li { font-size: 0.95rem; }
.upload-result.ok h2 { color: var(--green-dark); margin: 0 0 4px; }
.upload-error { color: var(--danger); font-weight: 600; margin: 0; }

/* Keep self-contained blocks (chart + its legend, a whole table, KPI/stat tiles)
   from being split across a page boundary in the PDF. If a block doesn't fit in
   the remaining space it moves to the next page intact instead of fracturing. */
.chart-card,
.chart-grid-2,
.matrix-table,
.league-table,
.service-col,
.kpi,
.stat {
  break-inside: avoid;
  page-break-inside: avoid;
}
.data-table thead { display: table-header-group; }
.data-table tr { break-inside: avoid; page-break-inside: avoid; }
.chart-card h3,
.page-header-bar { break-after: avoid; page-break-after: avoid; }

/* Print rules */
@media print {
  body { background: #fff; }
  .studio-header, .page-header, .preview-header, #narrative-status { display: none !important; }
  .report { box-shadow: none; width: auto; }
  .report .page { padding: 0; min-height: auto; }
  .report-frame { padding: 0; background: #fff; }
}

/* ---------- Settings ---------- */
.settings-form { display: flex; flex-direction: column; gap: 16px; max-width: none; }
.settings-form .data-table input[type="text"] {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}
.settings-form .data-table input[type="text"]:focus { outline: none; border-color: var(--green); }
.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.color-row input[type="color"] {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
}
.color-name { font-size: 0.9rem; color: var(--ink); flex: 1 1 auto; }
.color-tag {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: #f1f3f5;
  padding: 2px 7px;
  border-radius: 6px;
  flex: 0 0 auto;
}

/* ============================================================
   Embeddable portal dashboard (/embed) — headerless, iframe-ready
   ============================================================ */
body.portal {
  background: var(--bg);
  color: var(--ink);
  margin: 0;
}
.portal-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 22px 32px;
}
.portal-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.range-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.range-form > label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--muted);
  gap: 4px;
}
.range-form input[type="date"],
.range-form select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}
.range-form select { min-width: 180px; cursor: pointer; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  padding: 2px 4px 2px 10px;
  border-radius: 999px;
  background: #efe9f5;
  color: #3B2A50;
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}
.filter-clear {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #3B2A50;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.filter-clear:hover { background: #2a1d3b; text-decoration: none; }

/* Settings / Methodology buttons in the controls bar */
.ctrl-nav-group {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.ctrl-nav-btn {
  border: none;
  background: none;
  padding: 7px 12px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.1s, color 0.1s;
}
.ctrl-nav-btn:hover { background: #f0f2f5; color: var(--ink); }
.ctrl-nav-btn.is-active { background: #ece8f2; color: #3B2A50; }

/* Location multi-select dropdown */
.loc-label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--muted);
  gap: 4px;
}
.loc-select-wrap { position: relative; }
.loc-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
  min-width: 180px;
  text-align: left;
}
.loc-select-btn:hover { border-color: #c5cad3; }
.loc-chevron { flex-shrink: 0; color: var(--muted); }
.loc-select-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.1);
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}
.loc-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
}
.loc-option:hover { background: #f5f7f9; }
.loc-option-all {
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-radius: 0;
}
.loc-option input[type="checkbox"] { flex-shrink: 0; cursor: pointer; }

/* Export dropdown */
.export-wrap { position: relative; }
.export-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.1);
  min-width: 110px;
  padding: 6px;
}
.export-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
}
.export-opt {
  display: block;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.export-opt:hover { background: #f5f7f9; text-decoration: none; }

.page-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.page-tab {
  border: none;
  background: none;
  padding: 9px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.page-tab:hover { color: var(--ink); }
.page-tab.is-active { color: #3B2A50; border-bottom-color: #3B2A50; }

/* Streams tab */
.streams-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.streams-filter-label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--muted);
  gap: 4px;
}
.streams-filter-label select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  min-width: 220px;
  cursor: pointer;
}
.streams-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  .streams-charts-row { grid-template-columns: 1fr; }
}
.streams-chart-panel {
  min-height: 0;
}
.chart-box--donut {
  height: 280px;
  position: relative;
}
.streams-table {
  width: 100%;
}
.streams-empty p {
  margin: 0;
  color: var(--muted);
}

/* The Streams page is printable, but the interactive selector is not. Keep
   both doughnuts side by side and compact enough for their dedicated portrait
   sheet; body.print is required so Chart.js sizes to this box before capture. */
body.portal.print .streams-charts-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body.portal.print .streams-chart-panel {
  break-inside: avoid;
  page-break-inside: avoid;
}
body.portal.print .chart-box--donut {
  height: 230px;
}
body.portal.print .streams-table {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Methodology tab (screen only — the section is no-print) */
.methodology-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.methodology-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.methodology-panel h2 {
  margin-bottom: 12px;
  color: var(--green-dark);
}
.methodology-panel p {
  margin: 0 0 10px;
  line-height: 1.65;
  max-width: 80ch;
}
.methodology-panel p:last-child { margin-bottom: 0; }
.methodology-panel ul {
  margin: 0 0 10px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 80ch;
}
.methodology-panel ul:last-child { margin-bottom: 0; }
.methodology-panel li { line-height: 1.6; }
.methodology-formula {
  background: var(--cyan-soft);
  border-left: 3px solid var(--cyan);
  border-radius: 6px;
  padding: 10px 14px !important;
  font-size: 0.95rem;
  margin: 10px 0 !important;
}

/* Waste Auditing placeholder (screen only — the section is no-print) */
.audit-empty {
  max-width: 620px;
  margin: 24px auto 0;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 44px 40px 40px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.audit-empty-icon {
  width: 68px; height: 68px; border-radius: 50%;
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cyan-soft);
  color: var(--green-dark);
}
.audit-empty h2 { color: var(--green-dark); margin-bottom: 10px; }
.audit-empty-lead { margin: 0 auto 18px; max-width: 52ch; color: var(--ink); }
.audit-benefits {
  list-style: none; padding: 0; margin: 0 auto 18px;
  max-width: 46ch; text-align: left;
  display: grid; gap: 8px;
}
.audit-benefits li {
  padding-left: 24px; position: relative; font-size: 0.92rem;
}
.audit-benefits li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--green); font-weight: 700;
}
.audit-empty-note { color: var(--muted); font-size: 0.85rem; margin: 0 0 22px; }
.audit-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}
.audit-cta:hover { background: var(--green-dark); text-decoration: none; color: #fff; }

/* On screen only the active page is shown; when printing (PDF export) every
   .rpt-page renders so the exported document keeps all three pages. */
@media screen {
  body.portal .rpt-page { display: none; }
  body.portal .rpt-page.is-active { display: block; }
  /* PDF export loads the page with ?print=1 while Chromium is still in screen
     media; every page must be visible so its charts can render and report ready. */
  body.portal.print .rpt-page { display: block; }
}

.league-row { cursor: pointer; }
.league-row:hover td { background: #f5f2fa; }
.league-row.is-active td { background: #efe9f5; box-shadow: inset 3px 0 0 #3B2A50; }
.league-row:focus-visible { outline: 2px solid #3B2A50; outline-offset: -2px; }
.portal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--green);
  margin-bottom: 20px;
}
.portal-head h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
}
.portal-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.head-right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.head-logo {
  height: 84px;
  width: auto;
  display: block;
}
/* Customer-pasted logo: match the First Mile logo height, never distort. */
.head-logo--customer {
  height: 42px;
  max-width: 200px;
  object-fit: contain;
}
.logo-form {
  width: min(420px, 100%);
  display: grid;
  gap: 8px;
  font-size: 13px;
}
.logo-form input[type="url"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #c9d2da;
  border-radius: 6px;
  font: inherit;
}
.logo-form-btns { display: flex; gap: 8px; }
.logo-error { color: #b42318; margin: 0; }

/* ---------- Report loading screen / overlay ---------- */
.loader-screen {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
}
.loader-logo { height: 76px; margin-bottom: 8px; }
.loader-bin {
  position: relative;
  width: 130px;
  height: 150px;
}
.loader-bin-svg {
  position: absolute;
  left: 5px;
  bottom: 0;
  width: 120px;
  height: 140px;
  animation: loader-bin-bounce 1.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.loader-lid {
  animation: loader-lid-flap 1.6s ease-in-out infinite;
  transform-origin: 26px 36px;
}
.loader-bag {
  position: absolute;
  width: 26px;
  height: 34px;
  left: 52px;
  top: -8px;
  opacity: 0;
  animation: loader-bag-drop 4.8s linear infinite;
}
.loader-bag--2 { animation-delay: 1.6s; }
.loader-bag--3 { animation-delay: 3.2s; }
@keyframes loader-bin-bounce {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.96); }
}
@keyframes loader-lid-flap {
  0%, 55%, 100% { transform: rotate(0deg); }
  20%, 35% { transform: rotate(-24deg); }
}
@keyframes loader-bag-drop {
  0%, 4% { opacity: 0; transform: translateY(-26px) rotate(-8deg); }
  8% { opacity: 1; }
  14% { opacity: 1; transform: translateY(14px) rotate(6deg); }
  17% { opacity: 0; transform: translateY(22px) rotate(6deg); }
  18%, 100% { opacity: 0; }
}
.loader-msg {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--green-dark);
  min-height: 1.6em;
}
.loader-msg.is-in { animation: loader-msg-in 0.45s ease both; }
@keyframes loader-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.loader-sub { margin: 0; color: var(--muted); font-size: 13px; }
/* Simple spinner for in-report reloads (filters, dates, settings). */
.spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--line);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spinner-spin 0.9s linear infinite;
}
@keyframes spinner-spin { to { transform: rotate(360deg); } }

.loader-overlay {
  position: fixed;
  inset: 0;
  /* Leaflet stacks its panes up to z-index 700 and controls at 1000 inside
     .leaflet-container, so full-screen overlays must sit above 1000 or the
     map bleeds through the dimmed screen (e.g. on End Destinations). */
  z-index: 2000;
  background: rgba(245, 247, 249, 0.94);
}
.loader-overlay[hidden] { display: none; }
.loader-screen--overlay { min-height: 100vh; }
@media (prefers-reduced-motion: reduce) {
  .loader-bin-svg, .loader-lid, .loader-bag { animation: none; }
  .loader-bag { opacity: 0; }
  .loader-msg.is-in { animation: none; }
}

/* "Preparing your export" overlay — visually distinct from the report-update
   spinner: dark scrim + white card with a pulsing download icon. */
.export-overlay {
  position: fixed;
  inset: 0;
  /* Above .loader-overlay (2000) and Leaflet's panes/controls (≤1000). */
  z-index: 2010;
  background: rgba(28, 35, 41, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.export-overlay[hidden] { display: none; }
.export-loader-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 36px;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25);
}
.export-spinner {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--cyan-soft);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: export-pulse 1.4s ease-in-out infinite;
}
@keyframes export-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(25, 203, 203, 0.35); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(25, 203, 203, 0); }
}
.export-loader-title { margin: 0 0 4px; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.export-loader-sub { margin: 0; color: var(--muted); font-size: 0.875rem; }
@media (prefers-reduced-motion: reduce) {
  .export-spinner { animation: none; }
}

/* Settings tab (screen only — the whole pane is no-print) */
.settings-stack { display: grid; gap: 16px; max-width: 720px; }
.settings-panel { display: grid; gap: 10px; }
.settings-help { margin: 0; color: var(--muted); font-size: 13px; max-width: 62ch; }
.settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}
.settings-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
  cursor: pointer;
}
.settings-units-form select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  min-width: 140px;
  cursor: pointer;
}
.head-logo--defra {
  height: 52px;
}
.portal .head-logo--bbp { height: auto; width: 240px; max-width: 100%; object-fit: contain; }
.rate-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  padding: 10px 16px;
  border-radius: 14px;
  color: #fff;
  background: var(--green);
}
.rate-badge .rate-num { font-size: 30px; font-weight: 700; line-height: 1; }
.rate-badge .rate-cap { font-size: 11px; opacity: .92; margin-top: 4px; letter-spacing: .02em; }

.stat-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stat-card.stat-total {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.stat-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.stat-total .stat-label { color: rgba(255,255,255,.85); }
.stat-value { font-size: 26px; font-weight: 700; line-height: 1.1; }
.stat-unit { font-size: 15px; font-weight: 600; margin-left: 2px; opacity: .8; }
.stat-foot { font-size: 12px; color: var(--muted); }
.stat-dot {
  position: absolute;
  top: 14px; right: 14px;
  width: 12px; height: 12px;
  border-radius: 50%;
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.panel-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--green-dark);
}
.panel-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.panel-title-row--bare { justify-content: flex-end; margin-bottom: 6px; }
.dl-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--green-dark, #2e7d4f);
  text-decoration: none;
  opacity: 0.65;
  white-space: nowrap;
}
.dl-link:hover { opacity: 1; text-decoration: underline; }
.chart-box { height: 320px; }

.map-league {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.map-panel, .league-panel { margin-bottom: 0; display: flex; flex-direction: column; }
#p-map {
  flex: 1;
  min-height: 420px;
  border-radius: 12px;
  overflow: hidden;
  z-index: 0;
}
.map-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.map-legend i {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.league-scroll { overflow: auto; max-height: 460px; }
.league-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.league-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  text-align: left;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 8px 8px;
  border-bottom: 2px solid var(--line);
}
.league-table th.num, .league-table td.num { text-align: right; }
.league-table tbody td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.league-table tbody tr:nth-child(-n+3) .rank { color: var(--green); font-weight: 700; }
.rank { color: var(--muted); font-weight: 600; width: 26px; }
.loc-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}
.loc-pc { color: var(--muted); font-size: 11px; margin-left: 6px; }
.rate-pill {
  display: inline-block;
  min-width: 46px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
}
.rate-pill.rate-green { background: #2E7D4F; }
.rate-pill.rate-orange { background: #E8913A; }
.rate-pill.rate-red { background: #D9534F; }
.rate-pill.rate-neutral { background: #7A8699; }

.portal-foot {
  margin-top: 22px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 860px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .map-league { grid-template-columns: 1fr; }
  /* Let page headers wrap on narrow embeds so logos never squeeze the title. */
  .portal-head { flex-wrap: wrap; }
  .head-right { gap: 14px; }
  .head-logo { height: 60px; }
  .head-logo--customer { height: 30px; max-width: 140px; }
  .head-logo--defra { height: 40px; }
}

/* Conversion factors settings UI */
.factor-add {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 8px;
}
.factor-add label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.factor-add select,
.factor-add input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  min-width: 150px;
}
.factor-add input[type="number"] { min-width: 120px; }
.factor-table { margin-top: 14px; }
.btn.danger { background: #D9534F; border-color: #D9534F; color: #fff; }
.btn.sm { padding: 4px 10px; font-size: 12px; }

/* Impact Conversions & Scope 3 report pages (print only) */
.print-only { display: none; }

/* Section headers (tabs 2+) repeat the logos for the PDF, where every page
   needs branding. On screen the logos already sit in the top header, so hide
   the per-section copies; the print block below restores them. */
.rpt-page .head-right .head-logo { display: none; }
.rpt-page .head-right .head-logo--bbp { display: inline-block; }
.bbp-page .head-right { flex-wrap: wrap; }

/* Size-critical print rules applied via the `print` body class (present at load
   for the export URL) so Chart.js and Leaflet size to the compact box at render
   time, not after print media flips at capture — which would leave the canvas
   overflowing onto the map. */
body.portal.print .chart-box { height: 150px; }
/* Explicit height + paint/isolation containment keeps Leaflet's composited tile
   layers inside the map box; without it Chromium bleeds the map's grey backdrop
   onto later PDF pages during pagination. */
body.portal.print .map-panel { display: block; isolation: isolate; contain: paint; }
body.portal.print #p-map { height: 410px; min-height: 0; flex: none; contain: layout paint; overflow: hidden; }
/* Collapse the two-column map/league to a single full-width column at load time
   (not just under @media print) so Leaflet initialises at the final print width;
   otherwise it sizes to the on-screen half-width and leaves whitespace in the PDF. */
body.portal.print .map-league { display: block; }
body.portal.print .league-panel { display: none; }

/* Fill each A4 sheet. Every `.pdf-page` is laid out as a fixed-height flex
   column (277mm printable minus a safety margin) and ONE block per page —
   marked `.pdf-fill` — absorbs the remaining height, so the main chart or map
   grows to whatever the tables above/below leave over. This has to live under
   body.print (not @media print) because Chart.js and Leaflet size their canvas
   to the box at load time and never reflow during page.pdf(). Page 1 keeps
   fixed heights: the demo banner above it varies per report. */
body.portal.print .pdf-page,
body.portal.print .rpt-page[data-page="1"] {
  display: flex;
  flex-direction: column;
  height: 274mm; /* page 1's height is set inline by the print script: the
                    banner above it varies per report */
  box-sizing: border-box;
}
body.portal.print .pdf-page > *,
body.portal.print .rpt-page[data-page="1"] > * { flex: 0 0 auto; }
/* A sheet whose fixed content alone is taller than the page (unusually long
   date range, many streams) is released by the print script to flow onto a
   further page instead of painting over the next one; its chart falls back to
   a fixed height because there is no free space left to fill. */
body.portal.print .pdf-page.pdf-overflow,
body.portal.print .rpt-page[data-page="1"].pdf-overflow { height: auto !important; display: block; }
body.portal.print .pdf-overflow .pdf-fill { margin-bottom: 12px; }
body.portal.print .pdf-overflow .pdf-fill .chart-box,
body.portal.print .pdf-overflow .pdf-fill #d-map { flex: none; height: 260px; }
body.portal.print .pdf-overflow .streams-charts-row.pdf-fill { max-height: none; }
body.portal.print .rpt-page[data-page="1"] > .map-league {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.portal.print .rpt-page[data-page="1"] > .map-league > .map-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.portal.print .rpt-page[data-page="1"] #p-map { flex: 1 1 auto; min-height: 0; height: auto; }
/* Very tall boxes look wrong for some charts (three narrow trend charts,
   doughnuts wider than they are tall), so those stop growing at a sensible
   height and the leftover stays as white space. */
body.portal.print .impact-chart-grid.pdf-fill .chart-box { max-height: 340px; }
body.portal.print .streams-charts-row.pdf-fill { max-height: 520px; }
/* The Streams breakdown table has the rest of the sheet to itself. */
body.portal.print .streams-table { font-size: 13px; }
body.portal.print .streams-table thead th { padding: 8px 8px; font-size: 11px; }
body.portal.print .streams-table tbody td { padding: 10px 8px; }
body.portal.print .pdf-fill .chart-box--carbon { max-height: 460px; }

/* Print density: at the true 190mm column everything must be tighter than the
   on-screen dashboard, or the monthly tables alone overrun a sheet. */
/* Fixed height: page 1's flex height is measured by the print script before
   the web font has loaded, so the banner must not change height when it does. */
body.portal.print .demo-banner {
  font-size: 11px; line-height: 1.5; padding: 5px 10px; margin-bottom: 8px;
  height: 46px; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
/* nowrap: the ≤860px screen rule lets the logos wrap under the title, which in
   the print measurement (fallback font, before Larsseit loads) made page 1's
   header temporarily taller and left the sheet short. */
body.portal.print .portal-head { padding-bottom: 6px; margin-bottom: 10px; flex-wrap: nowrap; }
body.portal.print .portal-head > div:first-child { min-width: 0; }
body.portal.print .portal-head h1 { font-size: 20px; }
body.portal.print .portal-sub { font-size: 12px; }
body.portal.print .stat-cards { gap: 10px; margin-bottom: 10px; }
body.portal.print .stat-card { padding: 8px 12px; gap: 2px; }
body.portal.print .stat-card .stat-value { font-size: 20px; }
body.portal.print .stat-card .stat-label,
body.portal.print .stat-card .stat-foot { font-size: 11px; }
body.portal.print .panel { padding: 10px 14px; margin-bottom: 10px; }
body.portal.print .panel-title { margin-bottom: 6px; font-size: 14px; }
body.portal.print .league-table { font-size: 12px; }
body.portal.print .league-table thead th { padding: 5px 6px; font-size: 10px; }
body.portal.print .league-table tbody td { padding: 4px 6px; }
body.portal.print .impact-table { font-size: 11px; }
body.portal.print .impact-table td:first-child { white-space: nowrap; }
body.portal.print .impact-table tfoot td { padding: 5px 6px; }
body.portal.print .impact-note { margin-top: 8px; }
body.portal.print .portal-foot { margin-top: 8px; }
body.portal.print .league-print .panel-title { margin-bottom: 2px; }
body.portal.print .lrow { padding: 1px 0; }
body.portal.print .map-legend { margin-top: 6px; font-size: 10px; }
body.portal.print .leaflet-control-zoom { display: none; }
body.portal.print .anim-card { padding: 10px 12px; gap: 4px; }
body.portal.print .anim-row { min-height: 36px; }
body.portal.print .anim-icon { width: 22px; height: 30px; }
body.portal.print .anim-card .stat-value { font-size: 20px; }
body.portal.print .anim-key { font-size: 10px; }
body.portal.print .cloud-panel { gap: 12px; padding: 8px 14px; }
body.portal.print .forest-line { font-size: 13px; margin: 2px 0; }
body.portal.print .forest-key { font-size: 10px; margin: 0; }
body.portal.print .cloud-sky { min-height: 40px; flex-basis: 220px; }
body.portal.print .forest-copy { flex-basis: 200px; }
body.portal.print .cloud-icon { width: 40px; height: 26px; }
body.portal.print .impact-anim-grid { margin-bottom: 12px; }
body.portal.print .pdf-page > .pdf-fill { margin-bottom: 12px; }
body.portal.print .pdf-page.pdf-omit { display: none; }
body.portal.print .pdf-page > .pdf-fill {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 12px;
}
body.portal.print .pdf-fill.panel,
body.portal.print .pdf-fill .panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
}
body.portal.print .pdf-fill .panel-title,
body.portal.print .pdf-fill .panel-title-row,
body.portal.print .pdf-fill .map-legend { flex: 0 0 auto; }
body.portal.print .pdf-fill .chart-box,
body.portal.print .pdf-fill #d-map {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  position: relative;
}
/* Grids of chart panels (Impact trend row, Streams doughnuts) stretch their
   single row to the flexed height, so each panel fills it. */
body.portal.print .impact-chart-grid.pdf-fill,
body.portal.print .streams-charts-row.pdf-fill { grid-auto-rows: minmax(0, 1fr); }

/* Compact multi-column league (print page 1 only) */
.league-print .panel-title { margin-bottom: 2px; }
.league-key { font-size: 10px; color: var(--muted); margin: 0 0 6px; }
/* Columns share the width equally; empty columns are omitted in the template. */
.league-grid { display: flex; gap: 0 18px; align-items: flex-start; }
.league-grid .lp-col { flex: 1 1 0; min-width: 0; }
.lp-head {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green-dark);
  border-bottom: 2px solid var(--green-dark);
  padding-bottom: 3px;
}
.ldelta { text-align: right; white-space: nowrap; font-weight: 700; color: #2E7D4F; }
.lp-note { font-size: 8px; color: var(--muted); margin: 2px 0 3px; }

/* Self-service Unit of Productivity form (embed page 4, screen only) */
.uop-form-panel.is-hidden { display: none; }
#uop-other-wrap.is-hidden { display: none; }
.uop-edit-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.btn-uop-edit,
.btn-uop-cancel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink);
}
.btn-uop-edit:hover, .btn-uop-cancel:hover { border-color: var(--green-dark); }
.btn-uop-save {
  background: var(--green-dark);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 8px 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-uop-save:hover { filter: brightness(1.1); }
.uop-unit-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0 4px; }
.uop-unit-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.uop-unit-label select, .uop-unit-label input {
  font: inherit; font-size: 13px; font-weight: 400; color: var(--ink);
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; min-width: 220px; background: #fff;
}
.uop-months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 10px 0 14px;
}
.uop-month { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); }
.uop-month input {
  font: inherit; font-size: 13px; font-weight: 400; color: var(--ink);
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; width: 100%; box-sizing: border-box;
}
.uop-form-actions { display: flex; gap: 10px; }
.uop-saved { color: #2E7D4F; font-weight: 600; }
.uop-error { color: #D9534F; font-weight: 600; }
.lrow {
  display: grid;
  grid-template-columns: 16px 1fr auto auto;
  gap: 5px;
  align-items: center;
  break-inside: avoid;
  font-size: 10px;
  padding: 3px 0;
  border-bottom: 1px solid var(--line);
}
.lrank { color: var(--muted); font-weight: 600; text-align: right; }
.lname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltonnes { text-align: right; white-space: nowrap; }
.lrate { text-align: right; }
.lrate .rate-pill { min-width: 32px; font-size: 9px; padding: 1px 5px; }
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 18px 0;
}
.impact-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--card);
}
.impact-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.impact-value { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--green-dark); }
.impact-unit { font-size: 12px; color: var(--muted); }
.impact-note { font-size: 11px; color: var(--muted); margin-top: 12px; }
.scope3-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 16px; }
.scope3-table th {
  text-align: left;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 8px 10px;
  border-bottom: 2px solid var(--line);
}
.scope3-table th.num, .scope3-table td.num { text-align: right; }
.scope3-table tbody td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.scope3-table tfoot td {
  padding: 10px;
  font-weight: 700;
  border-top: 2px solid var(--line);
}
/* PDF: the Scope 3 sheet holds only this table, so give it room to breathe
   rather than leaving the lower half of the page blank. */
/* Print: the table grows to the sheet (it is the page's .pdf-fill; rows share
   the extra height) up to a per-row cap set by the print script. */
body.portal.print .scope3-table { font-size: 14px; margin-top: 20px; }
body.portal.print .scope3-table th { font-size: 12px; padding: 12px 10px; vertical-align: middle; }
body.portal.print .scope3-table tbody td { padding: 12px 10px; vertical-align: middle; }
body.portal.print .scope3-table tfoot td { padding: 12px 10px; font-size: 15px; vertical-align: middle; }

/* Every rule below is scoped to body.portal so the /embed dashboard's compact
   print layout never bleeds into the standard report PDFs, which share the same
   stylesheet (e.g. .stat-value) but a different body class. */
@media print {
  /* The page canvas takes its colour from the root element; the base grey
     `html { background: var(--bg) }` must be reset here too, or short pages
     (e.g. the empty Scope 3 page) expose a grey void below their content. */
  html { background: #fff; }
  body.portal { background: #fff; }
  body.portal .no-print { display: none !important; }
  body.portal .print-only { display: block; }
  body.portal .rpt-page .head-right .head-logo { display: inline-block; }
  body.portal .portal-shell { max-width: none; padding: 0; }
  body.portal .panel, body.portal .stat-card { break-inside: avoid; }
  body.portal .map-league { break-inside: avoid; }

  /* Page 1: size the dashboard to fill a single tall A4 portrait page. */
  body.portal .portal-head { padding-bottom: 8px; margin-bottom: 16px; }
  body.portal .portal-head h1 { font-size: 24px; }
  body.portal .portal-sub { font-size: 13px; }
  body.portal .rate-badge { padding: 6px 16px; }
  body.portal .rate-num { font-size: 24px; }
  /* Force the single-row layout: Chromium evaluates the print media width below
     the 860px breakpoint, which would otherwise collapse the cards to 2 columns
     and push the league table onto a second page. */
  body.portal .stat-cards { grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
  body.portal .stat-card { padding: 14px 14px; border-radius: 12px; }
  body.portal .stat-value { font-size: 22px; }
  body.portal .panel { padding: 14px 18px; margin-bottom: 18px; border-radius: 14px; }
  body.portal .panel-title { margin-bottom: 10px; font-size: 15px; }

  /* Map goes full width; the on-screen league table is replaced by the
     compact multi-column print league so all rows fit one page.
     (chart-box / #p-map heights are set via body.print above so charts size
     correctly at load time.) */
  body.portal .map-league { display: block; break-inside: avoid; }
  body.portal .map-panel { margin-bottom: 8px; }
  body.portal .league-panel { display: none; }
  body.portal .map-legend { margin-top: 10px; font-size: 11px; }
  body.portal .league-print { display: block; break-inside: avoid; }
  body.portal .portal-foot { margin-top: 12px; }

  /* Page 2 (Impact): larger 2×2 tiles so four metrics fill the portrait sheet
     instead of a thin strip across the top. Print-only — the on-screen tab keeps
     its 4-across layout. */
  body.portal .impact-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 32px 0; }
  body.portal .impact-card { padding: 32px 28px; border-radius: 18px; }
  body.portal .impact-label { font-size: 15px; }
  body.portal .impact-value { font-size: 44px; }
  body.portal .impact-unit { font-size: 14px; }

  /* Pages 2 & 3 each start on a fresh sheet, opaque and above any bleed. */
  body.portal .pdf-page { break-before: page; position: relative; z-index: 2; background: #fff; }
}
body.portal.print .no-print { display: none !important; }

/* Two-up field layout (e.g. export date range) */
.form-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.form-row .field {
  flex: 1 1 180px;
}

/* ---------- Impact Conversions page ---------- */
.impact-stat-cards .stat-value { font-size: 22px; }
.delta { font-weight: 700; }
.delta-up { color: #2E7D4F; }
.delta-down { color: #D9534F; }
.delta-flat { color: var(--muted); }
.delta-note { color: var(--muted); font-style: italic; font-size: 11px; }

.forest-panel {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #f2faf5 0%, #e8f5ee 100%);
}
.forest-copy { flex: 1 1 260px; }
.forest-line { margin: 0 0 6px; font-size: 14px; }
.forest-key { margin: 0; font-size: 11px; color: var(--muted); }
.forest {
  flex: 1 1 320px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-height: 64px;
}
.forest-tree {
  width: 34px;
  height: 46px;
  transform-origin: bottom center;
  animation: tree-grow 700ms cubic-bezier(0.22, 1.4, 0.4, 1) backwards;
}
.forest-tree:nth-child(even) { width: 28px; height: 38px; }
@keyframes tree-grow {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------- Impact page: four animated stat cards ---------- */
.impact-anim-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.anim-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
}
.anim-card--trees { background: linear-gradient(135deg, #f2faf5 0%, #e8f5ee 100%); }
.anim-card--co2 { background: linear-gradient(135deg, #f3f7fa 0%, #e9f1f6 100%); }
.anim-card--bio { background: linear-gradient(135deg, #fdf9ef 0%, #f0f7ea 100%); }
.anim-card--kwh { background: linear-gradient(135deg, #fdf7ec 0%, #faf0dc 100%); }
.anim-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 44px;
  margin: 2px 0;
}
.anim-icon { width: 26px; height: 34px; display: block; }
.anim-icon.cloud-icon { width: 40px; height: 26px; animation: cloud-drift 1.6s ease-out backwards; }
.anim-key { font-size: 11px; color: var(--muted); }
.stat-value--text { font-size: 18px; padding: 4px 0; }
.bolt-icon {
  transform-origin: bottom center;
  animation: tree-grow 700ms cubic-bezier(0.22, 1.4, 0.4, 1) backwards, bolt-flash 2.2s ease-in-out 1s infinite;
}
@keyframes bolt-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes cloud-drift {
  0% { transform: translateY(8px); opacity: 0; }
  25% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-4px); opacity: 1; }
}
@media (max-width: 900px) { .impact-anim-grid { grid-template-columns: repeat(2, 1fr); } }
/* minmax(0, 1fr): plain 1fr tracks cannot shrink below their content's
   min-content width (Chart.js canvases report 300px, the icon rows wider still),
   which pushed the document past the 718px print column. Any horizontal
   overflow makes Chromium shrink-to-fit the WHOLE PDF (here to ~67%), which is
   why every page used to print small with a blank lower half. */
body.portal.print .impact-anim-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.portal.print .anim-icon,
body.portal.print .bolt-icon { animation: none; opacity: 1; transform: none; }

/* Info-marker tooltips on the impact cards (screen only; hidden in print). */
.tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
  cursor: help;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
}
.tip:focus-visible .tip-i { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 50%; }
.tip-i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
}
.tip:hover .tip-i, .tip:focus .tip-i { border-color: var(--ink); color: var(--ink); }
.tip-pop {
  display: none;
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  width: 230px;
  padding: 9px 11px;
  background: #253238;
  color: #fff;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 40;
  text-transform: none;
  letter-spacing: normal;
}
.tip-pop::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #253238;
}
.tip:hover .tip-pop, .tip:focus .tip-pop { display: block; }
/* Keep the pop inside the viewport on the outer cards. */
.anim-card--trees .tip-pop { left: 0; transform: none; }
.anim-card--trees .tip-pop::before { left: 14px; transform: none; }
.anim-card--kwh .tip-pop { left: auto; right: 0; transform: none; }
.anim-card--kwh .tip-pop::before { left: auto; right: 14px; transform: none; }
/* 2-column layout: CO₂ (right edge) and Biodiversity (left edge) become
   outer cards, so anchor their pops inward; narrow screens get a slimmer pop. */
@media (max-width: 900px) {
  .anim-card--co2 .tip-pop { left: auto; right: 0; transform: none; }
  .anim-card--co2 .tip-pop::before { left: auto; right: 14px; transform: none; }
  .anim-card--bio .tip-pop { left: 0; transform: none; }
  .anim-card--bio .tip-pop::before { left: 14px; transform: none; }
  .tip-pop { width: min(230px, 72vw); }
}

/* ---------- Biodiversity meadow (Impact page) ---------- */
.meadow-panel {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #fdf9ef 0%, #f0f7ea 100%);
}
.meadow {
  flex: 1 1 320px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-height: 64px;
}
.meadow-slot {
  display: inline-block;
  transform-origin: bottom center;
  animation: tree-grow 700ms cubic-bezier(0.22, 1.4, 0.4, 1) backwards;
}
.meadow-icon { width: 30px; height: 40px; display: block; }
.meadow-bee { animation: bee-buzz 2.4s ease-in-out infinite alternate; }
.meadow-butterfly { animation: flutter 3s ease-in-out infinite alternate; }
@keyframes bee-buzz {
  from { transform: translate(0, 0); }
  50% { transform: translate(3px, -5px); }
  to { transform: translate(-2px, -2px); }
}
@keyframes flutter {
  from { transform: translateY(0) rotate(-4deg); }
  to { transform: translateY(-6px) rotate(5deg); }
}

/* ---------- Carbon avoided clouds (Carbon page) ---------- */
.cloud-panel {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #f3f7fa 0%, #e9f1f6 100%);
}
.cloud-sky {
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 64px;
  overflow: hidden;
}
.cloud-icon {
  width: 52px;
  height: 34px;
  flex: 0 0 auto;
  animation: cloud-away 6s ease-in-out infinite backwards;
}
@keyframes cloud-away {
  0% { transform: translateY(14px) scale(0.85); opacity: 0; }
  20% { transform: translateY(0) scale(1); opacity: 1; }
  80% { transform: translateY(-8px) scale(1); opacity: 1; }
  100% { transform: translateY(-22px) scale(0.9); opacity: 0; }
}

.impact-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.impact-chart-grid .panel { margin-bottom: 20px; }
.chart-box--impact { height: 220px; }
.impact-table { width: 100%; }
.impact-table tfoot td {
  padding: 9px 8px;
  border-top: 2px solid var(--green);
  font-weight: 700;
  color: var(--green-dark);
}

/* Print: fixed chart heights at load time, no animation, stacked chart grid
   kept to one row of three across the A4 width. */
body.portal.print .chart-box--impact { height: 170px; }
body.portal.print .forest-tree,
body.portal.print .meadow-slot,
body.portal.print .meadow-bee,
body.portal.print .meadow-butterfly,
body.portal.print .cloud-icon { animation: none; opacity: 1; transform: none; }
body.portal.print .impact-chart-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.impact-chart-grid .panel, .forest-panel, .impact-table tr { break-inside: avoid; page-break-inside: avoid; }

/* ---------- Carbon Comparison page ---------- */
.carbon-stat-cards { grid-template-columns: repeat(4, 1fr); }
.carbon-stat-cards .stat-value { font-size: 22px; }
.scenario-toggle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scenario-cap { font-size: 12px; color: var(--muted); }
.scenario-btn {
  border: 1px solid #cfd8d3;
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink);
}
.scenario-btn.is-active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-weight: 600;
}
.chart-box--carbon { height: 300px; }
body.portal.print .chart-box--carbon { height: 220px; }

/* ---------- Per Unit of Productivity page ---------- */
.uop-missing { color: var(--muted); font-style: italic; }
.uop-flag { color: var(--muted); margin-left: 2px; }

/* ---------- End Destinations page ---------- */
.dest-filter label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.dest-filter select {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  font: inherit; color: var(--ink); background: #fff; min-width: 200px; cursor: pointer;
}
#d-map { height: 480px; border-radius: 10px; }
.dest-map-panel { break-inside: avoid; }
/* PDF export: same containment as the locations map so Leaflet's composited
   tiles never bleed onto later pages. */
body.portal.print .dest-map-panel { display: block; isolation: isolate; contain: paint; }
body.portal.print #d-map { height: 420px; min-height: 0; flex: none; contain: layout paint; overflow: hidden; }
/* Staff Destinations page */
.dest-materials { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.dest-material { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; }

/* ---------- Live Salesforce Service Report ---------- */
.service-report-page {
  min-width: 0;
}
.service-report-shell {
  max-width: 1560px;
}
.service-report-controls {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 12px 0;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px);
}
.service-report-export {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--green-dark);
  background: #fff;
  border: 1px solid #b9c9c0;
}
.service-report-export:hover {
  border-color: var(--green);
  color: var(--green);
  text-decoration: none;
}
.service-report-head {
  margin-bottom: 20px;
}
.service-report-eyebrow {
  margin: 0 0 5px;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.service-report-panel {
  padding: 0;
  overflow: hidden;
}
.service-report-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.service-report-summary p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.service-report-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.service-report-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2E7D4F;
  box-shadow: 0 0 0 4px rgba(46, 125, 79, 0.12);
}
.service-report-table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.service-report-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
.service-report-table th,
.service-report-table td {
  max-width: 260px;
  padding: 10px 12px;
  border-bottom: 1px solid #edf0ee;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.service-report-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f5f8f6;
  color: #48564e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.service-report-table tbody tr:hover td {
  background: #f9fbfa;
}
.service-report-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.service-report-date {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.service-report-status,
.reading-type {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef1ef;
  color: #4b5851;
  font-size: 11px;
  font-weight: 700;
}
.reading-type--Actual {
  color: #1f6541;
  background: #e5f3eb;
}
.reading-type--Estimated {
  color: #765313;
  background: #fff2d7;
}
.service-report-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 20px;
  background: #fafcfb;
  color: var(--muted);
  font-size: 13px;
}
.service-report-pagination .btn {
  min-width: 84px;
  text-align: center;
  text-decoration: none;
}
.service-report-pagination .is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.service-report-empty,
.service-report-message {
  padding: 48px 24px;
  text-align: center;
}
.service-report-empty p {
  margin: 4px 0;
  color: var(--muted);
}
.service-report-message h2 {
  margin: 0 0 8px;
}
.service-report-message p {
  margin: 0 auto 20px;
  max-width: 520px;
  color: var(--muted);
}
.service-report-message--error {
  border-color: #edc8c8;
  background: #fffafa;
}

@media (max-width: 640px) {
  .service-report-shell {
    padding: 12px 12px 24px;
  }
  .service-report-controls {
    align-items: stretch;
  }
  .service-report-controls .range-form {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .service-report-controls .range-form .btn {
    grid-column: 1 / -1;
  }
  .service-report-export {
    width: 100%;
  }
  .service-report-summary {
    align-items: flex-start;
  }
}


/* Public demo report (?demo): synthetic-data banner, shown on screen and in
   the exported PDF so demo figures are never mistaken for real performance. */
.demo-banner {
  background: #fff7e6;
  border: 1px solid #f0c36d;
  color: #7a5a1e;
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* ---------- Public waste-supplier connection demonstration ---------- */
.supplier-demo-body { background: #f5f7f6; min-height: 100vh; }
.supplier-demo { max-width: 1160px; margin: 0 auto; padding: 24px 28px 56px; }
.supplier-demo-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:54px; }
.supplier-demo-brand { display:flex; align-items:center; gap:12px; color:var(--ink); font-weight:700; font-size:16px; }
.supplier-demo-brand:hover { text-decoration:none; }
.supplier-demo-brand img { height:30px; width:auto; }
.supplier-demo-chip { color:#27764d; border:1px solid #bbe0c9; background:#effaf3; border-radius:999px; padding:5px 11px; font-size:12px; font-weight:700; }
.supplier-hero { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:30px; }
.supplier-kicker { color:var(--green); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 10px; }
.supplier-hero h1 { max-width:700px; font-size:42px; line-height:1.08; letter-spacing:-.035em; }
.supplier-intro { max-width:680px; color:#58636b; font-size:17px; margin:16px 0 0; }
.supplier-hero-stat { display:flex; align-items:center; gap:12px; flex:none; padding:17px 21px; border-radius:14px; background:#173f30; color:#fff; }
.supplier-hero-stat strong { font-size:40px; line-height:1; }
.supplier-hero-stat span { font-size:13px; line-height:1.25; opacity:.85; }
.supplier-demo-note { display:flex; align-items:center; gap:10px; background:#fffdf4; border:1px solid #eadb99; color:#665b31; border-radius:10px; padding:11px 14px; font-size:13px; margin-bottom:38px; }
.supplier-demo-note-icon { display:grid; place-items:center; flex:none; width:17px; height:17px; border:1px solid currentColor; border-radius:50%; font-size:11px; font-weight:700; }
.supplier-list-head { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:16px; }
.supplier-list-head h2 { font-size:22px; }
.supplier-list-head p { margin:4px 0 0; color:var(--muted); }
.supplier-key { display:flex; align-items:center; gap:7px; color:#506059; font-size:13px; font-weight:600; }
.supplier-light { width:9px; height:9px; display:inline-block; border-radius:50%; background:#c9d0cb; box-shadow:0 0 0 3px #f0f2f0; }
.supplier-light.is-on { background:#36b668; box-shadow:0 0 0 3px #e3f6e9, 0 0 10px rgba(54,182,104,.45); }
.supplier-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.supplier-card { display:flex; flex-direction:column; min-height:292px; background:#fff; border:1px solid #e4e9e6; border-radius:15px; padding:19px; box-shadow:0 1px 2px rgba(21,48,37,.03); transition:box-shadow .2s, border-color .2s, transform .2s; }
.supplier-card:hover { border-color:#c7d7ce; transform:translateY(-2px); box-shadow:0 9px 24px rgba(26,69,48,.08); }
.supplier-card.is-connected { border-top:3px solid #43ad6b; padding-top:17px; }
.supplier-card-top { display:flex; justify-content:space-between; align-items:center; }
.supplier-logo { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; color:#fff; font-size:20px; font-weight:700; }
.supplier-logo--first-mile { background:#20bfc2; }
.supplier-logo--veolia { background:#db3e25; }
.supplier-logo--biffa { background:#2258a6; }
.supplier-logo--suez { background:#03755f; }
.supplier-logo--grundon { background:#1c6c46; }
.supplier-logo--local { background:#69777d; }
.supplier-status { display:flex; align-items:center; gap:7px; color:#7b8580; font-size:12px; font-weight:700; }
.supplier-status.is-connected { color:#26764a; }
.supplier-card h3 { margin:18px 0 3px; font-size:19px; }
.supplier-description { margin:0; color:var(--muted); font-size:13px; }
.supplier-meta { display:grid; grid-template-columns:1fr auto; gap:5px 10px; margin:18px 0; font-size:12px; }
.supplier-meta-label { color:#87908b; }
.supplier-meta-value { color:#44534b; font-weight:600; text-align:right; }
.supplier-actions { margin-top:auto; display:flex; align-items:center; gap:12px; }
.supplier-action { flex:1; display:flex; align-items:center; justify-content:space-between; background:#286f4a; border:1px solid #286f4a; color:#fff; padding:9px 12px; border-radius:8px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.supplier-action:hover { background:#1f5938; }
.supplier-action--connected { background:#eef8f1; border-color:#cae7d3; color:#28744a; }
.supplier-action--connected:hover { background:#e5f5eb; }
.supplier-link-action { border:0; background:none; color:#347958; font:inherit; font-size:12px; font-weight:700; cursor:pointer; padding:8px 0; white-space:nowrap; }
.supplier-link-action:hover { text-decoration:underline; }
.supplier-footer-card { display:flex; align-items:center; gap:16px; margin-top:24px; padding:20px 22px; border-radius:14px; border:1px solid #d9e8df; background:#edf7f0; }
.supplier-footer-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#2d7e51; color:#fff; font-weight:700; }
.supplier-footer-card h2 { font-size:16px; }
.supplier-footer-card p { margin:2px 0 0; color:#5d6d64; font-size:13px; }
.supplier-template-button { margin-left:auto; background:#fff; border:1px solid #bddbc8; color:#266e47; border-radius:8px; padding:9px 12px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.supplier-template-button:hover { background:#f8fdf9; }
.supplier-file-input { position:fixed; left:-10000px; }
.supplier-toast { position:fixed; bottom:24px; left:50%; max-width:calc(100% - 32px); transform:translate(-50%, 24px); background:#1c4030; color:#fff; padding:12px 16px; border-radius:9px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; box-shadow:0 10px 28px rgba(18,43,32,.22); }
.supplier-toast.is-visible { opacity:1; transform:translate(-50%, 0); }
@media (max-width:780px) {
  .supplier-demo { padding:19px 16px 40px; }
  .supplier-demo-header { margin-bottom:36px; }
  .supplier-hero { align-items:flex-start; flex-direction:column; }
  .supplier-hero h1 { font-size:34px; }
  .supplier-hero-stat { align-self:flex-start; }
  .supplier-list-head { align-items:flex-start; flex-direction:column; }
  .supplier-grid { grid-template-columns:1fr; }
  .supplier-footer-card { align-items:flex-start; flex-wrap:wrap; }
  .supplier-template-button { margin-left:54px; }
}

/* ---------- BBP report ---------- */
.bbp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bbp-cards .stat-total .stat-value, .bbp-cards .stat-total .stat-unit { color: #fff; }
.bbp-cards .stat-total .stat-foot { color: rgba(255,255,255,.9); }
.bbp-page { min-width: 0; max-width: 100%; }
.bbp-block, .bbp-scroll { min-width: 0; max-width: 100%; }
@media screen {
  body.portal .page-tabs { overflow-x: auto; max-width: 100%; }
  body.portal .page-tab { flex: 0 0 auto; white-space: nowrap; }
}
.bbp-block { margin-bottom: 16px; }
.bbp-scroll, .bbp-map-scroll { overflow-x: auto; }
.bbp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.bbp-table th, .bbp-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.bbp-table th.num, .bbp-table td.num { text-align: right; white-space: nowrap; }
.bbp-table thead { display: table-header-group; }
.bbp-table tr { break-inside: avoid; page-break-inside: avoid; }
.bbp-detail { min-width: 760px; }
.bbp-status { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: #f1f3f5; color: var(--muted); text-transform: capitalize; }
.bbp-status--ok { background: #e8f5ee; color: var(--green-dark); }
.bbp-status--bad { background: #fdeee6; color: var(--danger); }
.bbp-text { margin: 0 0 8px; line-height: 1.6; max-width: 90ch; }
.bbp-sub { margin: 12px 0 6px; font-size: 0.95rem; }
.bbp-toggle { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; }
.bbp-map-table select { max-width: 260px; width: 100%; }
.bbp-map-table input[type="text"] { width: 100%; min-width: 160px; }
.bbp-map-table { min-width: 960px; }
#bbp { scroll-margin-top: 100px; }
.bbp-mapping-invalid { background: #fff4f0; }
.bbp-row-error { margin-top: 6px; font-size: 12px; }
.bbp-batch-errors { margin: 12px 0; padding: 12px; border: 1px solid var(--danger); border-radius: 8px; scroll-margin-top: 100px; }
.bbp-batch-errors ul { margin-bottom: 0; }
.bbp-settings-panel { min-width: 0; }
.bbp-settings-panel .bbp-visibility { display: grid; gap: 10px; }
.bbp-settings-panel .bbp-save-success { margin: 0; color: var(--green-dark); font-weight: 700; }
.bbp-settings-panel .bbp-save-error { margin: 0; color: var(--danger); font-weight: 700; }
@media (max-width: 640px) { .bbp-cards { grid-template-columns: 1fr; } }
@media print {
  body.portal .bbp-page { display: block; break-before: page; page-break-before: always; }
  body.portal .bbp-page .bbp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.portal .bbp-scroll { overflow: visible; }
  body.portal .bbp-detail { min-width: 0; font-size: 0.7rem; }
  body.portal .bbp-block { break-inside: auto; page-break-inside: auto; }
  body.portal .bbp-block .panel-title { break-after: avoid; page-break-after: avoid; }
}
.bbp-status--warn { background: #fdf3dc; color: #8a5a00; }
.bbp-status--neutral { background: #f1f3f5; color: var(--muted); }
.bbp-sub-line { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 400; max-width: 34ch; overflow-wrap: anywhere; }
@media print {
  body.portal .bbp-page, body.portal .bbp-page .panel.bbp-block, body.portal .bbp-page .bbp-table {
    break-inside: auto !important; page-break-inside: auto !important;
  }
  body.portal .bbp-page .bbp-table thead { display: table-header-group; }
  body.portal .bbp-page .bbp-table tr { break-inside: avoid !important; page-break-inside: avoid !important; }
}