@font-face {
  font-family: 'HU Custom Industry';
  src: url("/assets/hucustomindustry-webfont-ca36b89e.woff2") format('woff2'),
       url("/assets/hucustomindustry-webfont-da2126ce.woff") format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --hu-bg: #E8E0DB;
  --hu-accent: #f5a3bf;
  --hu-text: #000000;
  --hu-font-heading: 'HU Custom Industry', sans-serif;
  --hu-font-body: 'Archivo', sans-serif;
  --hu-sidebar-width: 240px;

  /* Product accent colours — brand hues muted toward the desaturated-dark
     palette. Source of truth: product_colors.js derives its JS values from
     these. (Start points: Pure #0f2963, All-Purpose #f5d553, Chilli #e795bf,
     Salt & Pepper #748089.) */
  --hu-product-pure: #2f4369;
  --hu-product-all-purpose: #c6a849;
  --hu-product-chilli: #c97ba2;
  --hu-product-salt-pepper: #6e7a83;
}

body {
  background-color: var(--hu-bg);
  color: var(--hu-text);
  font-family: var(--hu-font-body);
  margin: 0;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hu-font-heading);
}

a:link, a:visited {
  color: var(--hu-text);
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--hu-sidebar-width);
  height: 100vh;
  background-color: #1a1a1a;
  color: #ffffff;
  padding: 0;
  overflow-y: auto;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.sidebar-brand {
  padding: 1.5rem 1rem;
  text-align: center;
  border-bottom: 1px solid #333;
}

.sidebar-brand img {
  max-width: 160px;
  height: auto;
}

.sidebar-nav {
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  flex: 1;
}

.sidebar-nav li a {
  display: block;
  padding: 0.6rem 1.25rem;
  color: #ccc;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.15s, color 0.15s;
}

.sidebar-nav li a:hover,
.sidebar-nav li a.active {
  background-color: #333;
  color: #ffffff;
}

.sidebar-nav li a.active {
  border-left: 3px solid var(--hu-accent);
  padding-left: calc(1.25rem - 3px);
}

.sidebar-section {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
  padding: 1rem 1.25rem 0.3rem;
  margin-top: 0.25rem;
}

.sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid #333;
  font-size: 0.85rem;
}

.sidebar-footer a {
  color: #ccc;
  text-decoration: none;
}

.sidebar-footer a:hover {
  color: #fff;
}

/* Mobile topbar (hidden on desktop) */
.mobile-topbar {
  display: none;
  background-color: #1a1a1a;
  padding: 0.75rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1040;
}

.mobile-topbar img {
  height: 28px;
  width: auto;
}

.mobile-topbar .burger {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

/* Main content */
.main-content {
  margin-left: var(--hu-sidebar-width);
  padding: 1.5rem 2rem;
  min-height: 100vh;
}

/* Page header: title + action buttons */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-header h1 {
  margin: 0;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Summary card rows need gap when stacked */
.row.gx-3 {
  --bs-gutter-y: 0.75rem;
}

/* Accent utilities */
.text-accent {
  color: var(--hu-accent);
}

.bg-accent {
  background-color: var(--hu-accent);
}

.btn-accent {
  background-color: var(--hu-accent);
  border-color: var(--hu-accent);
  color: #000;
}

.btn-accent:hover {
  background-color: #f08aaf;
  border-color: #f08aaf;
  color: #000;
}

/* Cards */
.card {
  border: none;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid #e0d8d3;
  font-family: var(--hu-font-heading);
}

/* Tables */
.table {
  --bs-table-bg: transparent;
}

.table .col-pct {
  width: 5ch;
}

/* Flash messages */
.flash-notice {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.flash-alert {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

/* Login page (no sidebar) */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: #fff;
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.login-card img {
  max-width: 200px;
  margin-bottom: 1.5rem;
}

/* Print: PDF-friendly layout */
@media print {
  @page {
    size: A4 portrait;
    margin: 1cm;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 10pt;
  }

  .sidebar,
  .sidebar-backdrop,
  .mobile-topbar,
  .page-actions,
  .flash-notice,
  .flash-alert,
  form .btn {
    display: none !important;
  }

  .main-content {
    margin-left: 0;
    padding: 0;
    min-height: 0;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ccc;
    border-radius: 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .card-header {
    border-bottom: 1px solid #ccc;
  }

  h1, h2, h3, h4, h5, h6,
  table, tr, .row {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  h1 { font-size: 18pt; }
  h2 { font-size: 15pt; }
  h3, h4, h5, h6 { font-size: 12pt; }

  a, a:link, a:visited {
    color: #000;
    text-decoration: none;
  }

  /* Don't append href URLs after links when printing */
  a[href]::after { content: none !important; }

  /* Tighten up filter card inputs so they don't waste horizontal space */
  .form-control, .form-select {
    border: 1px solid #ccc;
    background: transparent;
  }

  /* Honest Umami logo next to the page title. */
  .main-content h1::before {
    content: url("/assets/honest-umami-logo-d041b8bd.svg");
    display: inline-block;
    width: 50pt;
    height: 50pt;
    vertical-align: middle;
    margin-right: 0.5em;
  }
}

/* Responsive: offcanvas sidebar on mobile */
@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    left: -100%;
    width: 280px;
    transition: left 0.3s ease;
  }

  .sidebar.show {
    left: 0;
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  .sidebar-backdrop.show {
    display: block;
  }

  .mobile-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .main-content {
    margin-left: 0;
    padding: 1rem;
  }
}

/* ==========================================================================
   AI Insights / agent findings — triage dossier
   ========================================================================== */

.page-header .page-subtitle {
  margin: 0.35rem 0 0;
  color: #6f655d;
  font-size: 0.92rem;
}

/* Prompt-proposal banner */
.proposal-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: #fbf3e6;
  border: 1px solid #ecd9b4;
  border-left: 4px solid #bd7d10;
  border-radius: 10px;
  padding: 0.8rem 1.1rem;
  margin-bottom: 1.75rem;
  font-size: 0.92rem;
}

/* Severity filter bar */
.findings__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.sev-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid #ddd2c9;
  background: transparent;
  color: #4a423b;
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.sev-chip:hover { border-color: #b9a99c; }

.sev-chip.is-active {
  background: #2b2622;
  border-color: #2b2622;
  color: #fff;
}

.sev-chip__count {
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  opacity: 0.7;
}

.sev-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sev, #999);
}

.sev-chip--critical { --sev: #a8321f; }
.sev-chip--warning  { --sev: #bd7d10; }
.sev-chip--info     { --sev: #5d7686; }

/* Findings list */
.findings__list {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* A single finding "case file" card */
.finding {
  display: flex;
  background: #fdfbf8;
  border: 1px solid #ece3da;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.05);
  transition: box-shadow 0.18s ease;
}

.finding:hover { box-shadow: 0 6px 22px rgba(40, 30, 20, 0.09); }
.finding.is-hidden { display: none; }

.finding[data-severity="critical"] { --sev: #a8321f; }
.finding[data-severity="warning"]  { --sev: #b97d10; }
.finding[data-severity="info"]     { --sev: #5d7686; }

.finding__spine {
  flex: 0 0 6px;
  background: var(--sev, #bbb);
}

.finding__main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.25rem 1.4rem 1.1rem;
}

/* Header: title/meta + actions */
.finding__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}

.finding__lead { min-width: 0; }

.finding__sev {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sev);
  margin-bottom: 0.3rem;
}

.finding__title {
  font-family: var(--hu-font-heading);
  font-size: 1.22rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  color: #1d1916;
}

.finding__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  color: #847a70;
}

.finding__meta li {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.finding__meta li + li::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c9bdb1;
}

.finding__meta-agent {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  color: #5c534b;
}

.finding__meta-link { color: var(--sev); text-decoration: none; }
.finding__meta-link:hover { text-decoration: underline; }

/* Header action buttons */
.finding__actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.finding__actions form { margin: 0; }

.finding__btn {
  display: inline-block;
  width: 100%;
  border-radius: 8px;
  padding: 0.34rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.finding__btn--primary {
  background: #2b2622;
  border: 1px solid #2b2622;
  color: #fff;
}
.finding__btn--primary:hover { background: #000; border-color: #000; }

.finding__btn--ghost {
  background: transparent;
  border: 1px solid #cdbfb2;
  color: #4a423b;
}
.finding__btn--ghost:hover { border-color: #2b2622; color: #2b2622; }

/* Finding body prose */
.finding__body {
  margin-top: 0.85rem;
  color: #4f463e;
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 70ch;
}
.finding__body p:last-child { margin-bottom: 0; }

/* Activity thread */
.thread {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px dashed #e4d9cd;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.note {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.note__avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
}

.note--human .note__avatar { background: #f4d4df; color: #863253; }
.note--agent .note__avatar { background: #e9e1d7; color: #6f655d; }

.note__content {
  min-width: 0;
  flex: 1 1 auto;
  background: #fff;
  border: 1px solid #efe6db;
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
}

.note--human .note__content {
  background: #fef7f0;
  border-color: #f3ddc9;
}

.note__meta {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-bottom: 0.15rem;
}

.note__author {
  font-size: 0.78rem;
  font-weight: 700;
  color: #3b342d;
}

.note--agent .note__author { color: #6f655d; font-weight: 600; }

.note__time {
  font-size: 0.72rem;
  color: #a59a8d;
  font-variant-numeric: tabular-nums;
}

.note__body {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #4a423b;
}
.note--agent .note__body { color: #6b6258; }
.note__body p { margin: 0; }

/* Delete control — quiet, reveals on hover/focus */
.note__delete-form {
  margin: 0 0 0 auto;
  opacity: 0;
  transition: opacity 0.15s;
}
.note:hover .note__delete-form,
.note__delete-form:focus-within { opacity: 1; }

.note__delete {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.72rem;
  color: #b98a8a;
  cursor: pointer;
  text-decoration: none;
}
.note__delete:hover { color: #a8321f; text-decoration: underline; }

@media (hover: none) {
  .note__delete-form { opacity: 0.65; }
}

/* Collapsed "earlier agent updates" disclosure */
.thread__fold { margin: 0; }

.thread__toggle {
  display: inline-flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: #7a7066;
  padding: 0.25rem 0.1rem;
  user-select: none;
}
.thread__toggle::-webkit-details-marker { display: none; }

.thread__toggle::before {
  content: "›";
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.15s;
  color: #b1a596;
}
.thread__fold[open] .thread__toggle::before { transform: rotate(90deg); }

.thread__toggle:hover { color: #2b2622; }
.thread__toggle-close { display: none; }
.thread__fold[open] .thread__toggle-open { display: none; }
.thread__fold[open] .thread__toggle-close { display: inline; }

.thread__folded {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.55rem;
  padding-left: 0.65rem;
  border-left: 2px solid #ece2d6;
}

/* Note composer */
.composer {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.composer__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #ddd2c7;
  background: #fff;
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  font-size: 0.85rem;
  font-family: var(--hu-font-body);
  color: #2b2622;
}
.composer__input::placeholder { color: #ab9f92; }
.composer__input:focus {
  outline: none;
  border-color: var(--hu-accent);
  box-shadow: 0 0 0 3px rgba(245, 163, 191, 0.25);
}

.composer__btn {
  flex: 0 0 auto;
  border: 1px solid #cdbfb2;
  background: transparent;
  color: #4a423b;
  border-radius: 8px;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.composer__btn:hover { background: #2b2622; border-color: #2b2622; color: #fff; }

/* Empty state */
.findings__empty {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #6f655d;
  background: #fdfbf8;
  border: 1px dashed #ddd2c7;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}
.findings__empty p { margin: 0; }
.findings__empty--inline { margin: 0; padding: 1rem 1.25rem; }

.findings__empty-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #d8e8d8;
  color: #2f6b3a;
  font-weight: 700;
}

/* Recent runs panel */
.panel {
  background: #fdfbf8;
  border: 1px solid #ece3da;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.05);
  margin-bottom: 2rem;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.3rem;
  border-bottom: 1px solid #efe6db;
}
.panel__head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #1d1916;
}
.panel__link { font-size: 0.82rem; color: #7a7066; text-decoration: none; }
.panel__link:hover { color: #2b2622; text-decoration: underline; }

.runs__scroll,
.table-scroll { overflow-x: auto; }

.runs__table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.runs__table th,
.data-table th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #998d80;
  font-weight: 600;
  padding: 0.55rem 1.3rem;
  border-bottom: 1px solid #efe6db;
  white-space: nowrap;
}
.runs__table td,
.data-table td {
  padding: 0.6rem 1.3rem;
  border-bottom: 1px solid #f3ece3;
  color: #4f463e;
  vertical-align: middle;
}
.runs__table tbody tr:last-child td,
.data-table tbody tr:last-child td { border-bottom: none; }
.runs__table tbody tr:hover,
.data-table tbody tr:hover { background: #f8f2ea; }
.runs__agent { font-weight: 600; color: #2b2622; }
.runs__num { text-align: right; font-variant-numeric: tabular-nums; }
.runs__when { color: #847a70; white-space: nowrap; font-variant-numeric: tabular-nums; }
.runs__view a { color: #7a7066; text-decoration: none; font-weight: 600; }
.runs__view a:hover { color: #2b2622; text-decoration: underline; }

/* Reusable data-table cell modifiers */
.data-table th.num,
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .strong { font-weight: 600; color: #2b2622; }
.data-table .muted { color: #998d80; }
.data-table .pct { color: #998d80; font-size: 0.78rem; width: 5ch; text-align: right; }

.run-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}
.run-status--success { background: #dcebdd; color: #2f6b3a; }
.run-status--failed  { background: #f6dcd8; color: #a8321f; }
.run-status--running { background: #e7e0d7; color: #6f655d; }

/* Responsive: stack the card header on narrow screens */
@media (max-width: 700px) {
  .finding__main { padding: 1.05rem 1.05rem 1rem; }
  .finding__head { flex-direction: column; gap: 0.85rem; }
  .finding__actions { flex-direction: row; width: 100%; }
  .finding__btn { width: auto; flex: 1 1 0; }
  .composer { flex-wrap: wrap; }
  .composer__btn { width: 100%; }
}

/* Print: expand every collapsed note so PDFs are complete */
@media print {
  .findings__bar,
  .composer,
  .note__delete-form { display: none !important; }

  .finding,
  .panel { break-inside: avoid; page-break-inside: avoid; box-shadow: none; }

  .thread__fold > *:not(.thread__toggle) { display: block !important; }
  .thread__toggle { display: none !important; }
}

/* ==========================================================================
   Shared dashboard / report building blocks
   ========================================================================== */

/* Product accent swatch — a small dot keyed to a product's brand colour */
.prod-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: baseline;
  background: var(--prod, #c9bdb1);
}
.prod-dot--pure         { --prod: var(--hu-product-pure); }
.prod-dot--all-purpose  { --prod: var(--hu-product-all-purpose); }
.prod-dot--chilli       { --prod: var(--hu-product-chilli); }
.prod-dot--salt-pepper  { --prod: var(--hu-product-salt-pepper); }

/* Eyebrow label above a group of tiles */
.section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #998d80;
  margin: 0 0 0.9rem;
}

/* Stat tiles */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.stat {
  background: #fdfbf8;
  border: 1px solid #ece3da;
  border-radius: 14px;
  padding: 1.05rem 1.2rem;
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stat__label {
  font-size: 0.71rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: #847a70;
}

.stat__value {
  font-family: var(--hu-font-heading);
  font-size: 1.7rem;
  line-height: 1.05;
  color: #1d1916;
  font-variant-numeric: tabular-nums;
}

.stat__sub { font-size: 0.75rem; color: #998d80; }
.stat__delta { font-size: 0.8rem; min-height: 1.1em; }
.stat__delta .text-success { color: #2f6b3a !important; }
.stat__delta .text-danger { color: #a8321f !important; }

/* Coloured left edge for emphasis tiles */
.stat--accent { border-left: 4px solid var(--hu-accent); }
.stat--slate  { border-left: 4px solid #5d7686; }
.stat--ochre  { border-left: 4px solid #b97d10; }

/* Panel body for non-table content (charts, prose, messages) */
.panel__body { padding: 1.15rem 1.3rem 1.3rem; }
.panel__note { padding: 1.5rem; text-align: center; color: #6f655d; }

/* Chart sizing */
.chart-box { position: relative; width: 100%; height: 250px; }
.chart-box--tall { height: 310px; }
.chart-box--short { height: 210px; }

/* Multi-panel rows that stack on mobile */
.panel-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-bottom: 1rem;
}
.panel-grid > .panel { margin-bottom: 0; }
.panel-grid--lead { grid-template-columns: 1.85fr 1fr; }
@media (max-width: 860px) {
  .panel-grid--lead { grid-template-columns: 1fr; }
}

/* Callout banners (dashboard alerts) */
.callout-stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}
.callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: #fdfbf8;
  border: 1px solid #ece3da;
  border-left: 4px solid var(--cl, #5d7686);
  border-radius: 10px;
  padding: 0.7rem 1.05rem;
  font-size: 0.9rem;
  color: #4a423b;
}
.callout--danger  { --cl: #a8321f; }
.callout--warning { --cl: #b97d10; }
.callout--info    { --cl: #5d7686; }

/* Filter bar */
.filters {
  background: #fdfbf8;
  border: 1px solid #ece3da;
  border-radius: 14px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.75rem;
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.05);
}
.filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: flex-end;
}
.filters__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.filters__field label {
  font-size: 0.71rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: #847a70;
  margin: 0;
}
.filters__field .form-control,
.filters__field .form-select {
  border: 1px solid #ddd2c7;
  border-radius: 8px;
  background: #fff;
  font-size: 0.85rem;
  padding: 0.42rem 0.6rem;
  color: #2b2622;
  min-width: 150px;
}
.filters__field .form-control:focus,
.filters__field .form-select:focus {
  outline: none;
  border-color: var(--hu-accent);
  box-shadow: 0 0 0 3px rgba(245, 163, 191, 0.25);
}
.filters__actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}
.filters__actions .btn { white-space: nowrap; }

@media (max-width: 700px) {
  .filters__actions { margin-left: 0; width: 100%; }
  .filters__actions .btn { flex: 1 1 0; }
}

/* Diffy output for agent prompt proposals */
.diff { overflow: auto; border: 1px solid #e5e0da; border-radius: 6px; background: #fff; }
.diff ul { background: #fff; overflow: auto; font-size: 12px; list-style: none; margin: 0; padding: 0; display: table; width: 100%; font-family: var(--bs-font-monospace, monospace); }
.diff del, .diff ins { display: block; text-decoration: none; }
.diff li { padding: 0 0.5rem; display: table-row; margin: 0; height: 1em; white-space: pre-wrap; }
.diff li.ins { background: #dfd; color: #1a5c1a; }
.diff li.del { background: #fee; color: #8b1a1a; }
.diff li:hover { background: #ffc; }
.diff del strong { font-weight: normal; background: #fcc; }
.diff ins strong { font-weight: normal; background: #9f9; }
.diff li.diff-comment { display: none; }
.diff li.diff-block-info { background: none repeat scroll 0 0 #f4f1ec; color: #8a8378; }

/* Shareholder report section preview — mirrors the PDF's section styling so
   the edit page shows what the printed report will contain. */
.section-preview { overflow-x: auto; font-size: 0.85rem; }
.section-preview .kpi-row { width: 100%; border-collapse: collapse; background-color: var(--hu-bg); border-radius: 6px; overflow: hidden; }
.section-preview .kpi-row td { padding: 14px 8px; text-align: center; }
.section-preview .kpi-value { font-size: 1.2rem; font-weight: 650; }
.section-preview .kpi-value.large { font-size: 1.75rem; }
.section-preview .kpi-label { font-size: 0.65rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.6px; margin-top: 2px; }
.section-preview .kpi-change { font-size: 0.7rem; margin-top: 2px; }
.section-preview .kpi-vs { color: #6c757d; font-size: 0.65rem; }
.section-preview .data-table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
.section-preview .data-table th { text-align: left; padding: 6px 8px; border-bottom: 2px solid #1a1a1a; font-weight: 650; }
.section-preview .data-table td { padding: 6px 8px; border-bottom: 1px solid var(--hu-bg); }
.section-preview .data-table th.num, .section-preview .data-table td.num { text-align: right; }
.section-preview .data-table td.pct { color: #6c757d; font-size: 0.7rem; width: 5ch; text-align: right; padding-left: 4px; }
.section-preview .data-table tr.total td { border-top: 2px solid #1a1a1a; border-bottom: none; font-weight: 650; }
.section-preview .data-table tr.section-head td { font-weight: 650; padding-top: 12px; border-bottom: 1px solid #1a1a1a; }
.section-preview .data-table td.strong { font-weight: 650; }
.section-preview .chart-wrap { margin: 4px 0 10px; text-align: center; }
.section-preview .note { color: #6c757d; font-size: 0.7rem; font-style: italic; margin: 8px 0 0; }
.section-preview .empty { color: #6c757d; font-style: italic; }

.drag-handle { cursor: grab; color: #6c757d; user-select: none; }
.sortable-ghost { opacity: 0.4; background-color: var(--hu-bg); }