/* =================================================================
   App entrypoint stylesheet — late-stage page-level overrides only.
   --------------------------------------------------------------------
   The full bundle is now emitted by helpers/format.php::css_bundle_links()
   as individual <link> tags, each cache-busted via asset_url(). The old
   @import strategy left child files un-busted, so Hostinger's 30-day
   Cache-Control kept serving stale CSS forever after a deploy.

   This file is loaded LAST in the bundle order so anything here wins
   the cascade — use it for cross-cutting deployment overrides only.
   ================================================================= */

.topbar__heading {
  min-width: 0;
  flex: 1 1 auto;
}
.topbar__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__actions {
  flex: 0 0 auto;
}
.topbar__seal-lockup {
  padding: 0 var(--sp-4) 0 var(--sp-2);
}
.topbar__seal-lockup img {
  width: 54px;
  height: 54px;
  box-shadow: 0 4px 12px rgba(140,70,30,.16), 0 0 0 4px rgba(255,176,141,.16);
}
.topbar__seal-lockup img + img {
  margin-left: -13px;
}
.sidebar__brand-mark {
  width: 72px;
  height: 72px;
}

/* =================================================================
   NOTIFICATIONS — bell + dropdown + inbox page
   ================================================================= */

.notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.notif-bell__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--c-line, rgba(140,70,30,.18));
  background: var(--c-bg, #fff);
  color: var(--c-text, #2e1d10);
  cursor: pointer;
  transition: background var(--motion-fast, 120ms) var(--ease-standard, cubic-bezier(0.2,0.8,0.2,1));
}
.notif-bell__btn:hover { background: rgba(247,111,21,.08); }
.notif-bell__btn:focus-visible { outline: 2px solid var(--c-accent, #f76f15); outline-offset: 2px; }
.notif-bell__icon { width: 20px; height: 20px; }

.notif-bell__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #d72638;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  letter-spacing: .01em;
  box-shadow: 0 0 0 2px var(--c-bg, #fff);
  display: none;
}
.notif-bell__badge.is-shown { display: inline-block; }

.notif-bell__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line, rgba(140,70,30,.18));
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(60,30,10,.18), 0 4px 12px rgba(60,30,10,.08);
  z-index: 1000;
  overflow: hidden;
}
.notif-bell__panel[hidden] { display: none; }

.notif-bell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-line, rgba(140,70,30,.12));
  font-size: 14px;
}
.notif-bell__see-all { color: var(--c-accent, #a8470a); text-decoration: none; font-weight: 500; }
.notif-bell__see-all:hover { text-decoration: underline; }

.notif-bell__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 420px;
  overflow-y: auto;
}
.notif-bell__loading,
.notif-bell__empty {
  padding: 16px;
  text-align: center;
  color: var(--c-muted, #8b6e54);
  font-size: 13px;
}

.notif-bell__item { border-bottom: 1px solid rgba(140,70,30,.06); }
.notif-bell__item:last-child { border-bottom: none; }
.notif-bell__item.is-unread { background: rgba(247,111,21,.05); }

.notif-bell__item-link {
  display: flex;
  gap: 10px;
  padding: 11px 16px;
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
  transition: background var(--motion-fast, 120ms);
}
.notif-bell__item-link:hover { background: rgba(247,111,21,.08); }

.notif-bell__item-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  background: var(--c-muted, #c8b9a8);
}
.notif-bell__item.is-unread .notif-bell__item-dot { background: var(--c-accent, #f76f15); }
.notif-bell__item--success .notif-bell__item-dot { background: #2f9e6e; }
.notif-bell__item--warning .notif-bell__item-dot { background: #d49415; }
.notif-bell__item--danger  .notif-bell__item-dot { background: #d72638; }

.notif-bell__item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-bell__item-body strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text, #2e1d10);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-bell__item-body small {
  font-size: 12px;
  color: var(--c-muted, #6b5747);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-bell__item-body em {
  font-size: 11px;
  font-style: normal;
  color: var(--c-muted, #8b6e54);
  letter-spacing: .01em;
}

.notif-bell__foot {
  padding: 10px 12px;
  border-top: 1px solid var(--c-line, rgba(140,70,30,.12));
  text-align: right;
  background: rgba(247,111,21,.03);
}

/* /notifications inbox page */
.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.notif-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(140,70,30,.08);
  align-items: flex-start;
  transition: background var(--motion-fast, 120ms);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(247,111,21,.04); }
.notif-item.is-unread { background: rgba(247,111,21,.06); }
.notif-item.is-unread::before {
  content: "";
  position: absolute;
}

.notif-item__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(247,111,21,.10);
  color: var(--c-accent, #a8470a);
}
.notif-item__icon svg { width: 20px; height: 20px; }
.notif-item--success .notif-item__icon { background: rgba(47,158,110,.12); color: #1f6f4d; }
.notif-item--warning .notif-item__icon { background: rgba(212,148,21,.14); color: #8b5e0e; }
.notif-item--danger  .notif-item__icon { background: rgba(215,38,56,.12);  color: #a31627; }

.notif-item__body { min-width: 0; }
.notif-item__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.notif-item__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-text, #2e1d10);
}
.notif-item__title a { color: inherit; text-decoration: none; }
.notif-item__title a:hover { text-decoration: underline; }
.notif-item__time {
  font-size: 12px;
  color: var(--c-muted, #8b6e54);
  white-space: nowrap;
  flex: 0 0 auto;
}
.notif-item__text {
  margin: 4px 0 6px 0;
  font-size: 13.5px;
  color: var(--c-text-secondary, #5b4733);
  line-height: 1.45;
}
.notif-item__meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11.5px;
  letter-spacing: .015em;
}
.notif-item__sev {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10.5px;
}
.notif-item__sev--info    { background: rgba(56,109,160,.12); color: #2c5685; }
.notif-item__sev--success { background: rgba(47,158,110,.14); color: #1f6f4d; }
.notif-item__sev--warning { background: rgba(212,148,21,.16); color: #8b5e0e; }
.notif-item__sev--danger  { background: rgba(215,38,56,.14);  color: #a31627; }

.notif-item__actions {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.notif-form { margin: 0; display: inline; }

/* =================================================================
   PENDING DASHBOARD — coverage gap, status mix, deltas, days waiting
   ================================================================= */

.coverage-gap {
  margin: var(--sp-4, 16px) 0;
  padding: var(--sp-4, 16px) var(--sp-5, 20px);
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line, rgba(140,70,30,.12));
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(140,70,30,.06);
}
.coverage-gap__bar {
  display: flex;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(140,70,30,.07);
}
.coverage-gap__bar-served {
  background: linear-gradient(90deg, #2f9e6e 0%, #1f6f4d 100%);
  transition: width var(--motion-medium, 240ms) var(--ease-standard, cubic-bezier(0.2,0.8,0.2,1));
}
.coverage-gap__bar-gap {
  background: linear-gradient(90deg, #d49415 0%, #b97808 100%);
  transition: width var(--motion-medium, 240ms) var(--ease-standard, cubic-bezier(0.2,0.8,0.2,1));
}
.coverage-gap__legend {
  list-style: none;
  margin: var(--sp-3, 12px) 0 0 0;
  padding: 0;
  display: flex;
  gap: var(--sp-5, 20px);
  flex-wrap: wrap;
  font-size: 13px;
}
.coverage-gap__legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.coverage-gap__swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
}
.coverage-gap__swatch--served { background: #1f6f4d; }
.coverage-gap__swatch--gap    { background: #b97808; }

/* Lens tab counts */
.reports-tabs__count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(247,111,21,.18);
  color: var(--c-accent, #a8470a);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}
.reports-tabs__tab.is-active .reports-tabs__count {
  background: rgba(255,255,255,.25);
  color: inherit;
}

/* Pending filters form */
.pending-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3, 12px);
  align-items: end;
  padding: var(--sp-3, 12px) 0;
}
.pending-filters__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.pending-filters__field span {
  font-weight: 600;
  color: var(--c-text-secondary, #5b4733);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
}
.pending-filters__actions {
  display: flex;
  align-items: end;
  gap: 8px;
}

/* Days-waiting indicator */
.days-waiting {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(140,70,30,.07);
  color: var(--c-text, #2e1d10);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.days-waiting--high {
  background: rgba(215,38,56,.14);
  color: #a31627;
}

/* =================================================================
   STATUS MIX (per-program horizontal bar) on /dashboard/reports
   ================================================================= */

.status-mix {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
  padding: var(--sp-2, 8px) 0;
}
.status-mix__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: var(--sp-3, 12px);
}
.status-mix__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.status-mix__label small {
  color: var(--c-muted, #8b6e54);
  font-size: 11px;
}
.status-mix__bar {
  display: flex;
  height: 16px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(140,70,30,.05);
}
.status-mix__seg { transition: filter var(--motion-fast, 120ms); }
.status-mix__seg:hover { filter: brightness(1.1); }
.status-mix__seg--released      { background: linear-gradient(90deg, #2f9e6e, #1f6f4d); }
.status-mix__seg--pending_funds { background: linear-gradient(90deg, #d49415, #a87509); }
.status-mix__seg--lacking_docs  { background: linear-gradient(90deg, #b97808, #8a5a05); }
.status-mix__seg--cancelled     { background: linear-gradient(90deg, #d72638, #a31627); }

.status-mix__legend {
  grid-column: 2;
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3, 12px);
  font-size: 11.5px;
  color: var(--c-text-secondary, #5b4733);
}
.status-mix__legend li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.status-mix__dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
}
.status-mix__dot--released      { background: #1f6f4d; }
.status-mix__dot--pending_funds { background: #a87509; }
.status-mix__dot--lacking_docs  { background: #8a5a05; }
.status-mix__dot--cancelled     { background: #a31627; }

/* =================================================================
   PERIOD-OVER-PERIOD DELTA STRIP on /dashboard/reports
   ================================================================= */

.reports-deltas {
  margin: var(--sp-4, 16px) 0;
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line, rgba(140,70,30,.12));
  border-radius: 12px;
}
.reports-deltas__title {
  margin: 0 0 var(--sp-2, 8px) 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-muted, #8b6e54);
  font-weight: 700;
}
.reports-deltas__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3, 12px);
}
.reports-deltas__cell {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(140,70,30,.04);
}
.reports-deltas__cell--up    { background: rgba(47,158,110,.10); }
.reports-deltas__cell--down  { background: rgba(215,38,56,.08); }
.reports-deltas__cell--flat  { background: rgba(140,70,30,.05); }

.reports-deltas__label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-muted, #8b6e54);
  font-weight: 600;
}
.reports-deltas__delta {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.reports-deltas__cell--up   .reports-deltas__delta { color: #1f6f4d; }
.reports-deltas__cell--down .reports-deltas__delta { color: #a31627; }
.reports-deltas__cell--flat .reports-deltas__delta { color: var(--c-muted, #8b6e54); }
.reports-deltas__sub {
  font-size: 11.5px;
  color: var(--c-muted, #8b6e54);
}

/* Three-up grid for demographics */
.reports-grid--three {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Status pills inside tables (extends existing .status-pill) */
.status-pill--pending_funds { background: rgba(212,148,21,.16); color: #8b5e0e; }
.status-pill--lacking_docs  { background: rgba(185,120,8,.18);  color: #6b4905; }
.status-pill--released      { background: rgba(47,158,110,.14); color: #1f6f4d; }
.status-pill--cancelled     { background: rgba(215,38,56,.14);  color: #a31627; }

/* Reduced-motion friendliness */
@media (prefers-reduced-motion: reduce) {
  .coverage-gap__bar-served,
  .coverage-gap__bar-gap,
  .status-mix__seg,
  .notif-bell__btn,
  .notif-item,
  .notif-bell__item-link {
    transition: none !important;
  }
}

/* =================================================================
   LIST TOOLBAR — group-by · export · print  (above pending listing)
   ================================================================= */
.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3, 12px);
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2, 8px) 0;
  margin-top: var(--sp-3, 12px);
}
.list-toolbar__group {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2, 8px);
}
.list-toolbar__field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-muted, #8b6e54);
  font-weight: 600;
}
.list-toolbar__field span { white-space: nowrap; }
.list-toolbar__actions {
  display: inline-flex;
  gap: var(--sp-2, 8px);
  flex-wrap: wrap;
}

/* Inline cap-warning + generic callout */
.callout {
  margin: var(--sp-3, 12px) 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.45;
}
.callout--warning {
  background: rgba(212,148,21,.10);
  border-left: 4px solid #b97808;
  color: #6b4905;
}

/* =================================================================
   GROUPED LISTINGS — header + sub-total rows in a flat table
   ================================================================= */
.group-header-row td {
  background: linear-gradient(90deg, rgba(247,111,21,.10) 0%, rgba(247,111,21,.02) 100%);
  border-top: 2px solid rgba(168,71,10,.25);
  border-bottom: 1px solid rgba(168,71,10,.16);
  padding: 10px 14px;
  font-size: 13px;
}
.group-header-row__name {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-accent, #a8470a);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: var(--sp-3, 12px);
}
.group-header-row__sub {
  color: var(--c-text-secondary, #5b4733);
  font-weight: 500;
}

.group-subtotal-row td {
  background: rgba(140,70,30,.04);
  border-top: 1px dashed rgba(140,70,30,.20);
  border-bottom: 2px solid rgba(140,70,30,.12);
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--c-text-secondary, #5b4733);
  font-style: italic;
}

/* =================================================================
   PRINT — global rules for any listing page (pending / reports /
   programs). Hides chrome, normalizes layout, and forces tables to
   fit on landscape A4 without right-edge clipping.
   ================================================================= */
@page {
  size: A4 landscape;
  margin: 10mm 8mm;
}

@media print {
  /* 1. Hide all chrome — sidebar, topbar, filter forms, action buttons,
        period tabs, pagination, callouts, in-card filter rows, etc. */
  .sidebar,
  .topbar,
  .reports-tabs,
  .status-chips,
  .reports-hero__actions,
  .programs-hero__actions,
  .list-toolbar,
  .pending-filters,
  .reports-card__inline-filter,
  .search-hero,
  .period-covered-range,
  .pagination,
  .quick-guide,
  .reports-card__head .btn,
  .filter-banner,
  .obligations-callout__cta,
  .programs-service-map,
  [data-print-page],
  .no-print {
    display: none !important;
  }

  /* 2. Reset shell + main so the listing fills the printable area. */
  .app-shell { display: block; }
  .main      { padding: 0; max-width: 100%; width: 100%; }
  body       { background: #fff; color: #000; }

  /* 3. Hero strip — keep title + period, drop background/shadow. */
  .reports-hero,
  .programs-hero {
    background: none !important;
    box-shadow: none !important;
    padding: 0 0 8px 0 !important;
    border-bottom: 1.5px solid #000;
    margin-bottom: 8mm;
  }
  .reports-hero__title,
  .programs-hero__title { color: #000 !important; font-size: 16pt; }
  .reports-hero__lede,
  .programs-hero__lede { font-size: 9pt; }
  .reports-hero__period-now,
  .programs-hero__period-now { font-size: 10pt; }

  /* 4. Cards — flatten + allow page breaks between (not within rows). */
  .reports-card,
  .obligations-callout {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: auto;
    page-break-inside: auto;
    margin-bottom: 5mm;
  }
  .reports-kpis {
    page-break-inside: avoid;
    margin-bottom: 5mm;
  }
  .reports-kpi {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
  .reports-card__head h2 { font-size: 12pt; }
  .reports-card__head p  { font-size: 9pt; }

  /* 5. THE FIX — table-scroll wrappers are overflow:auto on screen for
        horizontal scroll; that's what clipped the right edge in print.
        Force visible overflow + 100% width and let content wrap. */
  .table-scroll {
    overflow: visible !important;
    overflow-x: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .table {
    width: 100% !important;
    font-size: 8.5pt !important;
    table-layout: auto;
    border-collapse: collapse;
  }
  .table th,
  .table td {
    padding: 3px 5px !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    vertical-align: top;
  }
  .table th { font-size: 8pt; }

  /* Long codes/dates fit on one line via tabular-nums + smaller mono. */
  .text-mono { font-size: 7.5pt !important; letter-spacing: -0.01em; }

  /* The avatar circle eats ~40px per row — drop it for print. */
  .ledger-row__avatar { display: none !important; }
  .ledger-row__client { gap: 0 !important; }

  /* 6. Repeat <thead> on each page; never split a row across pages. */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr    { page-break-inside: avoid; }

  /* 7. Pills — print-friendly outlines, no filled backgrounds. */
  .status-pill,
  .program-pill {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #999 !important;
    padding: 1px 4px !important;
    font-size: 7.5pt !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 8. Group rows — light shading that prints. */
  .group-header-row td {
    background: #f5e6d8 !important;
    border-top: 2px solid #888 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .group-subtotal-row td {
    background: #f5f5f5 !important;
    border-bottom: 2px solid #888 !important;
    font-style: italic;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 9. Links print as plain black, no URLs appended. */
  a { color: #000 !important; text-decoration: none !important; }
  a[href^="http"]::after,
  a[href^="/"]::after { content: "" !important; }

  /* 10. Page footer — date stamp ONLY on the last printed card.
        Suppresses the older programs.css rule that emitted it on every card. */
  .reports-card--full::after { display: none !important; content: none !important; }
  .reports-card--full:last-of-type::after {
    content: "Printed " attr(data-printed-at) " · CSWDO Pagadian" !important;
    display: block !important;
    margin-top: 6mm;
    padding-top: 3mm;
    border-top: 1px solid #ccc;
    font-size: 7.5pt;
    color: #777;
    text-align: right;
  }
}

/* =================================================================
   PRINT OPTIONS — checkbox panel that drops down from the Print button
   ================================================================= */
.print-options {
  position: relative;
  display: inline-block;
}
.print-options > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.print-options > summary::-webkit-details-marker { display: none; }
.print-options[open] > summary {
  background: rgba(247,111,21,.10);
}

.print-options__panel {
  /* Position is set by print-options.js via getBoundingClientRect so the panel
     escapes any ancestor with overflow:hidden (e.g. .programs-hero, .reports-hero).
     Defaults are a fallback for the brief moment before JS measures. */
  position: fixed;
  top: 80px;
  right: 16px;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line, rgba(140,70,30,.18));
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(60,30,10,.22), 0 4px 12px rgba(60,30,10,.10);
  padding: 14px 16px;
  z-index: 9000;  /* above sticky topbars + sidebars */
}

.print-options__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--sp-3, 12px);
  padding-bottom: var(--sp-2, 8px);
  border-bottom: 1px solid rgba(140,70,30,.10);
}
.print-options__head strong { font-size: 14.5px; color: var(--c-text, #2e1d10); }
.print-options__head .muted  { font-size: 11.5px; color: var(--c-muted, #8b6e54); }

.print-options__group {
  border: none;
  padding: 0;
  margin: 0 0 var(--sp-3, 12px) 0;
}
.print-options__group legend {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-muted, #8b6e54);
  margin-bottom: 6px;
  padding: 0;
}
.print-options__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--motion-fast, 120ms);
}
.print-options__check:hover { background: rgba(247,111,21,.06); }
.print-options__check input { margin-top: 3px; flex: 0 0 auto; }
.print-options__check span  { line-height: 1.35; color: var(--c-text, #2e1d10); }

.print-options__actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding-top: var(--sp-2, 8px);
  border-top: 1px solid rgba(140,70,30,.10);
}

/* Mobile — full-width panel */
@media (max-width: 720px) {
  .print-options__panel {
    right: 8px;
    width: calc(100vw - 32px);
  }
}

/* Mobile — stack the status-mix rows */
@media (max-width: 720px) {
  .status-mix__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .status-mix__legend { grid-column: auto; }
  .notif-bell__panel  { width: calc(100vw - 32px); right: 8px; }
  .reports-deltas__grid { grid-template-columns: 1fr; }
}

/* =================================================================
   CLIENT 360 + WORKFLOWS PORTALS  ("09" hybrid-system upgrade)
   --------------------------------------------------------------------
   Reuses the shipped warm-brand tokens only. Status = color + icon +
   label (never color alone). Accent is a muted icon tint, not a loud
   card border. Honors prefers-reduced-motion at the foot of the block.
   ================================================================= */

:root {
  --portal-live-fg:  #1f6f4d;
  --portal-live-bg:  rgba(47,158,110,.12);
  --portal-bld-fg:   #8b5e0e;
  --portal-bld-bg:   rgba(212,148,21,.16);
  --portal-plan-fg:  #6b5747;
  --portal-plan-bg:  rgba(140,70,30,.09);
}

/* ---- Status / phase chips (shared: portal page + dashboard board) ---- */
.portal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}
.portal-chip svg { width: 13px; height: 13px; }
.portal-chip--sm { padding: 3px 9px; font-size: 11px; }
.portal-chip--is-live     { background: var(--portal-live-bg); color: var(--portal-live-fg); }
.portal-chip--is-building { background: var(--portal-bld-bg);  color: var(--portal-bld-fg); }
.portal-chip--is-planned  { background: var(--portal-plan-bg); color: var(--portal-plan-fg); }
.portal-chip--phase {
  background: rgba(168,71,10,.10);
  color: var(--c-accent, #a8470a);
}

/* ---- Sidebar phase tag ---- */
.sidebar__tag {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .85;
}
.sidebar__tag--building { background: var(--portal-bld-bg);  color: var(--portal-bld-fg); }
.sidebar__tag--planned  { background: var(--portal-plan-bg); color: var(--portal-plan-fg); }

/* ---- Portal page hero ---- */
.portal-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--sp-7, 32px) var(--sp-7, 32px) var(--sp-6, 24px);
  border-radius: 20px;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line, rgba(140,70,30,.14));
  box-shadow: 0 1px 0 rgba(140,70,30,.05), 0 18px 40px -28px rgba(60,30,10,.30);
}
.portal-hero__body { position: relative; z-index: 2; }
.portal-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-4, 16px);
}
.portal-hero__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--c-muted, #8b6e54);
  margin-right: 4px;
}
.portal-hero__lockup {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4, 16px);
}
.portal-hero__icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(168,71,10,.10);
  color: var(--c-accent, #a8470a);
}
.portal-hero__icon svg { width: 28px; height: 28px; }
.portal-hero__title {
  margin: 2px 0 6px;
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--c-text, #2e1d10);
  line-height: 1.08;
}
.portal-hero__lede {
  margin: 0;
  max-width: 70ch;
  color: var(--c-text-secondary, #5b4733);
  line-height: 1.55;
}
.portal-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2, 8px);
  margin-top: var(--sp-5, 20px);
}
/* Muted per-module accent — icon tint only, brand-warm, low saturation */
.portal-hero--coral     .portal-hero__icon { background: rgba(184,84,47,.12);  color: #b8542f; }
.portal-hero--gold      .portal-hero__icon { background: rgba(154,107,18,.13); color: #9a6b12; }
.portal-hero--lavender  .portal-hero__icon { background: rgba(106,90,166,.13); color: #6a5aa6; }
.portal-hero--rose      .portal-hero__icon { background: rgba(168,69,107,.12); color: #a8456b; }
.portal-hero--berry     .portal-hero__icon { background: rgba(138,58,100,.13); color: #8a3a64; }
.portal-hero--champagne .portal-hero__icon { background: rgba(138,106,58,.13); color: #8a6a3a; }
.portal-hero--leaf      .portal-hero__icon { background: rgba(63,122,82,.13);  color: #3f7a52; }
.portal-hero--sky       .portal-hero__icon { background: rgba(44,101,133,.12); color: #2c6585; }

/* ---- Section titles + feature grid ---- */
.portal-section-title {
  margin: 0 0 var(--sp-4, 16px);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-text, #2e1d10);
  letter-spacing: -.01em;
}
.portal-grid {
  display: grid;
  gap: var(--sp-4, 16px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.portal-feature {
  padding: var(--sp-4, 16px) var(--sp-5, 20px);
  border-radius: 14px;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line, rgba(140,70,30,.12));
  box-shadow: 0 1px 0 rgba(140,70,30,.04);
}
.portal-feature__title {
  margin: 0 0 6px;
  font-size: .98rem;
  font-weight: 600;
  color: var(--c-text, #2e1d10);
}
.portal-feature__body {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--c-text-secondary, #5b4733);
}

/* ---- Two-column split (workflow + aside / live + roadmap) ---- */
.portal-split {
  display: grid;
  gap: var(--sp-5, 20px);
  grid-template-columns: 1.5fr 1fr;
  align-items: start;
}
.portal-aside { display: grid; gap: var(--sp-5, 20px); }

/* ---- Numbered workflow steps ---- */
.portal-steps { list-style: none; margin: 0; padding: 0; counter-reset: pstep; }
.portal-steps__item {
  display: flex;
  gap: var(--sp-3, 12px);
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(140,70,30,.14);
}
.portal-steps__item:last-child { border-bottom: 0; }
.portal-steps__num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(168,71,10,.10);
  color: var(--c-accent, #a8470a);
}
.portal-steps__text {
  font-size: .92rem;
  line-height: 1.5;
  color: var(--c-text-secondary, #5b4733);
  padding-top: 3px;
}

/* ---- Tag lists (legal basis / bridges) ---- */
.portal-taglist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.portal-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
}
.portal-tag--legal  { background: rgba(140,70,30,.07); color: var(--c-text-secondary, #5b4733); }
.portal-tag--bridge { background: rgba(44,101,133,.10); color: #275a78; }

/* ---- Live cross-links ---- */
.portal-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.portal-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--c-text, #2e1d10);
  transition: background var(--motion-fast, 140ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1));
}
.portal-link:hover { background: rgba(168,71,10,.07); }
.portal-link:focus-visible { outline: 2px solid var(--c-accent, #a8470a); outline-offset: 2px; }
.portal-link__dot {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-muted, #c8b9a8);
}
.portal-link__dot.is-live { background: var(--portal-live-fg); }
.portal-link__label { font-size: .92rem; font-weight: 500; }
.portal-link__badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--portal-live-bg);
  color: var(--portal-live-fg);
}
.portal-link__arrow { margin-left: auto; color: var(--c-muted, #8b6e54); }

/* ---- Roadmap ---- */
.portal-roadmap { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.portal-roadmap__item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  align-items: center;
}
.portal-roadmap__phase {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-muted, #8b6e54);
}
.portal-roadmap__title { font-size: .88rem; color: var(--c-text-secondary, #5b4733); }

/* ---- Bislish plain-language guide ---- */
.portal-guide {
  border: 1px solid var(--c-line, rgba(140,70,30,.14));
  border-radius: 14px;
  background: rgba(168,71,10,.035);
  padding: var(--sp-4, 16px) var(--sp-5, 20px);
}
.portal-guide__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-text, #2e1d10);
}
.portal-guide__summary::-webkit-details-marker { display: none; }
.portal-guide__list { margin: var(--sp-4, 16px) 0 0; display: grid; gap: 10px; }
.portal-guide__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--sp-3, 12px);
}
.portal-guide__row dt { font-weight: 700; color: var(--c-accent, #a8470a); font-size: .9rem; }
.portal-guide__row dd { margin: 0; color: var(--c-text-secondary, #5b4733); font-size: .9rem; line-height: 1.5; }

/* ---- Dashboard portal board ---- */
.portal-board__head { margin-bottom: var(--sp-5, 20px); }
.portal-board__eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--c-muted, #8b6e54);
}
.portal-board__title {
  margin: 0 0 6px;
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--c-text, #2e1d10);
}
.portal-board__lede {
  margin: 0;
  max-width: 78ch;
  color: var(--c-text-secondary, #5b4733);
  line-height: 1.55;
}
.portal-board__grid {
  display: grid;
  gap: var(--sp-4, 16px);
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}
.portal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--sp-5, 20px);
  border-radius: 16px;
  text-decoration: none;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line, rgba(140,70,30,.13));
  box-shadow: 0 1px 0 rgba(140,70,30,.04);
  transition: transform var(--motion-fast, 140ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
              box-shadow var(--motion-fast, 140ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1));
}
.portal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -22px rgba(60,30,10,.40);
}
.portal-card:focus-visible { outline: 2px solid var(--c-accent, #a8470a); outline-offset: 3px; }
.portal-card__icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(168,71,10,.10);
  color: var(--c-accent, #a8470a);
}
.portal-card__icon svg { width: 22px; height: 22px; }
.portal-card--coral     .portal-card__icon { background: rgba(184,84,47,.12);  color: #b8542f; }
.portal-card--gold      .portal-card__icon { background: rgba(154,107,18,.13); color: #9a6b12; }
.portal-card--lavender  .portal-card__icon { background: rgba(106,90,166,.13); color: #6a5aa6; }
.portal-card--rose      .portal-card__icon { background: rgba(168,69,107,.12); color: #a8456b; }
.portal-card--berry     .portal-card__icon { background: rgba(138,58,100,.13); color: #8a3a64; }
.portal-card--champagne .portal-card__icon { background: rgba(138,106,58,.13); color: #8a6a3a; }
.portal-card--leaf      .portal-card__icon { background: rgba(63,122,82,.13);  color: #3f7a52; }
.portal-card--sky       .portal-card__icon { background: rgba(44,101,133,.12); color: #2c6585; }
.portal-card .portal-chip { align-self: flex-start; }
.portal-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text, #2e1d10);
}
.portal-card__lede {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--c-text-secondary, #5b4733);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.portal-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-accent, #a8470a);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .portal-split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .portal-hero { padding: var(--sp-5, 20px); }
  .portal-hero__lockup { flex-direction: column; gap: var(--sp-3, 12px); }
  .portal-guide__row { grid-template-columns: 1fr; gap: 2px; }
  .portal-board__grid { grid-template-columns: 1fr; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .portal-card,
  .portal-link { transition: none !important; }
  .portal-card:hover { transform: none; }
}

/* =================================================================
   SIDEBAR HOVER/FOCUS HELP TIP — one body-appended floating bubble.
   Positioned by sidebar.php via getBoundingClientRect (escapes any
   sidebar overflow clipping). Shows for every tab, on hover AND
   keyboard focus; touch falls back to the native title attribute.
   ================================================================= */
.sidebar-tip {
  position: fixed;
  z-index: 9500;            /* above sticky topbar (9000) + sidebar */
  max-width: 260px;
  padding: 9px 13px;
  border-radius: 10px;
  background: var(--c-surface, #fff);
  color: var(--c-text, #2e1d10);
  border: 1px solid var(--c-line, rgba(140,70,30,.16));
  box-shadow: 0 14px 36px -18px rgba(60,30,10,.45), 0 2px 8px rgba(60,30,10,.10);
  font-size: 12.5px;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 120ms var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
              transform 120ms var(--ease-standard, cubic-bezier(.2,.8,.2,1));
}
.sidebar-tip::before {            /* left-pointing arrow toward the tab */
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--c-surface, #fff);
  border-left: 1px solid var(--c-line, rgba(140,70,30,.16));
  border-bottom: 1px solid var(--c-line, rgba(140,70,30,.16));
}
.sidebar-tip.is-shown {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-tip { transition: none; transform: none; }
  .sidebar-tip.is-shown { transform: none; }
}