:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --accent: #6366f1;
  --accent-soft: rgba(99, 102, 241, 0.12);
  --positive: #059669;
  --positive-soft: rgba(5, 150, 105, 0.12);
  --negative: #dc2626;
  --negative-soft: rgba(220, 38, 38, 0.12);
  --warn: #d97706;
  --warn-soft: rgba(217, 119, 6, 0.12);
  --shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #020617;
    --surface: #0f172a;
    --surface-2: #1e293b;
    --border: #1e293b;
    --text: #f1f5f9;
    --muted: #94a3b8;
    --muted-2: #64748b;
    --accent: #818cf8;
    --accent-soft: rgba(129, 140, 248, 0.18);
    --positive: #34d399;
    --positive-soft: rgba(52, 211, 153, 0.15);
    --negative: #f87171;
    --negative-soft: rgba(248, 113, 113, 0.15);
    --warn: #fbbf24;
    --warn-soft: rgba(251, 191, 36, 0.15);
    --shadow: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "cv11" 1;
}

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.topbar {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar {
  position: relative;
}

/* Row 1: just the action icons on the right (brand sits absolute on the left). */
.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 24px 6px 232px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 36px;
}

/* Row 2: property tabs on the left, period dropdowns on the right.
   Desktop only — hidden on mobile (mobile menu carries this content). */
.topbar-secondary {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 14px 232px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

/* Brand lockup — absolutely positioned in the top-left so it can be visually
   tall (spanning the tabs row + the period row beneath) without forcing the
   tabs row itself to grow. */
.brand {
  position: absolute;
  top: 8px;
  left: 24px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.12s ease;
}
.brand:hover { opacity: 0.85; }

.brand-mark {
  height: 88px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: height 0.22s ease;
}

/* Desktop shows the full combined lockup. The pictogram-only mark and the
   separate text wordmark only appear on the mobile breakpoint. */
.brand-mark-icon,
.brand-text-link {
  display: none;
}

/* The Vidarose Collection combined lockup + the text wordmark are pure
   black on transparent. Invert in dark mode so they read as white against
   the dark surface. The gold pictogram already has color — leave it. */
@media (prefers-color-scheme: dark) {
  .brand-mark-combined,
  .brand-text-img {
    filter: invert(1);
  }
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 10px;
  flex: 1;
  max-width: 720px;
}

/* Unified topbar action button — used by PDF, Health, hamburger.
   Same 36×36 size so the cluster reads consistently next to the avatar. */
.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.icon-btn svg { width: 18px; height: 18px; }

/* Hamburger is hidden on desktop; only shown at the mobile breakpoint. */
.menu-btn { display: none; }

/* Mobile menu (dropdown panel anchored under the topbar) */
.mobile-menu {
  display: none;
}

.tab {
  flex: 1;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: all 0.15s ease;
  white-space: nowrap;
  text-align: center;
}

.tab:hover {
  color: var(--text);
}

.tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Period selectors sit on the right side of the secondary row, aligned
   with the bottom edge of the tabs.  Spec'd here for both desktop and
   mobile (mobile uses them inside the menu drawer). */
.period-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* When the period controls live in the desktop secondary row, wrap them in
   the same gray pill that frames the property tabs so the two sides of the
   row read as a matched pair. */
.topbar-secondary .period-controls {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 6px 14px;
}

.period-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.period-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.select {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2364748b' d='M3 4.5L6 7.5L9 4.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
  min-width: 130px;
}

.select:hover {
  border-color: var(--accent);
}

.select:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
  border-color: var(--accent);
}

.select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ghost-btn {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--muted);
  transition: all 0.15s ease;
}

.ghost-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 24px;
}

.loading {
  text-align: center;
  padding: 80px 0;
  color: var(--muted);
  font-size: 14px;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.section-subtitle {
  font-size: 12px;
  color: var(--muted);
}

/* Section dividers inside the Financials view ("Revenue", "Expenses").
   Slightly more breathing room above each header so the page reads as
   distinct chapters rather than a continuous stream of cards. */
.fin-section-header {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.fin-section-header .section-title {
  font-size: 16px;
  letter-spacing: -0.01em;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--muted);
}

.kpi-delta {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

.kpi-delta.positive {
  background: var(--positive-soft);
  color: var(--positive);
}

.kpi-delta.negative {
  background: var(--negative-soft);
  color: var(--negative);
}

.kpi-delta.flat {
  background: var(--surface-2);
  color: var(--muted);
}

.kpi-value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kpi-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

/* --- Pickup & Pace cards --------------------------------------------- */

.pickup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.pickup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Top summary: three tightly stacked rows — labels, big amount, room-nights
   count. Left column is the on-the-books data; right column is the
   matching "Last 7 days" deltas. Baseline alignment keeps each row in line. */
.pickup-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pickup-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.pickup-card-month {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--muted);
}

.pickup-7day-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--muted);
}

/* Tap target on the window label — toggles 7-day ↔ 24-hour pickup chip.
   The dotted underline lives on the inner .pickup-window-value span (just
   "7 days" / "24 hours") so the prefix "Last " reads as a static label and
   only the variable part looks interactive. */
.pickup-window-toggle {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--muted);
  font-family: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: color 0.12s ease;
}
.pickup-window-value {
  border-bottom: 1px dotted var(--muted-2);
  padding-bottom: 1px;
  transition: border-bottom-color 0.12s ease;
}
.pickup-window-toggle:hover,
.pickup-window-toggle:focus-visible {
  color: var(--text);
  outline: none;
}
.pickup-window-toggle:hover .pickup-window-value,
.pickup-window-toggle:focus-visible .pickup-window-value {
  border-bottom-color: var(--text);
}

.pickup-7day-nights {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pickup-7day-nights.positive { color: var(--positive); }
.pickup-7day-nights.negative { color: var(--negative); }
.pickup-7day-nights.flat { color: var(--muted); }

.pickup-onbooks {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pickup-onbooks-hint {
  font-size: 11.5px;
  color: var(--muted);
}

/* Two-row metrics block — "On the books" stacked above "LY same time".
   Top/bottom rules wrap the whole block; an internal rule divides the rows. */
.pickup-metrics {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.pickup-metrics-row {
  padding: 10px 0;
}

.pickup-metrics-row + .pickup-metrics-row {
  border-top: 1px solid var(--border);
}

.pickup-metrics-title {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}

.pickup-metrics-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pickup-mini-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.pickup-mini-value {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.pickup-pace-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pickup-pace-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pickup-pace-label {
  font-size: 12px;
  color: var(--muted);
}

.pickup-pace-ref {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.pickup-empty {
  font-size: 12px;
  color: var(--muted-2);
  font-style: italic;
  padding: 18px 0;
}

.pickup-card-skeleton {
  gap: 0;
}

.pickup-card-skeleton .skel-bar {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}

@keyframes skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.chart-grid.one-col {
  grid-template-columns: 1fr;
}

.chart-grid.one-col .chart-canvas-wrapper {
  height: 320px;
}

.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.chart-header {
  margin-bottom: 12px;
}

.chart-title {
  font-size: 13px;
  font-weight: 600;
}

.chart-subtitle {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.chart-canvas-wrapper {
  height: 260px;
  position: relative;
}

/* Wages / Cost of Goods Sold callouts — chart-card sized box with a
   headline amount + delta chip at the top, followed by the full grouped
   list of categories. The card auto-sizes to its content (no internal
   scroll); the chart-grid lets the two siblings match height so they look
   uniform on the row. */
.callout-card {
  display: flex;
  flex-direction: column;
}

.callout-header {
  margin-bottom: 12px;
}

.callout-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.callout-amount {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}

.callout-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* Column-header strip at the very top of the list — shown only when a
   comparison column is active. Labels the two amount columns by year and
   leaves the Δ slot for the per-row pct-change chip. */
.callout-col-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px 100px 72px;
  column-gap: 10px;
  align-items: center;
  padding: 0 2px 4px;
}
.callout-col-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--muted);
  text-align: right;
}

/* Group block — section header + indented leaves under a P&L parent like
   "Salaries & Wages" or "Food & Beverage". */
.callout-group {
  display: flex;
  flex-direction: column;
}

.callout-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.callout-group-name {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--muted);
}
.callout-group-amt {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  text-align: right;
}
.callout-group-amt.negative {
  color: var(--negative);
}

.callout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  padding: 6px 2px;
  border-bottom: 1px dashed var(--border);
}
.callout-row:last-child {
  border-bottom: 0;
}
.callout-row.indented {
  padding-left: 14px;
}

/* 4-column layout when prior-period comparison is shown — name | current |
   prior | Δ — applied to section headers AND leaf rows so amounts align
   in tidy columns. Name column uses minmax(0, 1fr) so very long category
   names truncate with ellipsis rather than blowing the grid wider than its
   container. */
.callout-list.has-cmp .callout-section-head,
.callout-list.has-cmp .callout-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px 100px 72px;
  column-gap: 10px;
  align-items: center;
}

/* Collapsible section header — clickable, with caret that flips ▾↔▸.
   Default 2-column flex layout (name | amount); .has-cmp variant above
   overrides to a 4-column grid when prior-period data is present. */
.callout-section-head {
  cursor: pointer;
  user-select: none;
  padding: 5px 2px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s ease;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.callout-section-head:hover {
  background: var(--surface-2);
}
.callout-section-head.top-level {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding-top: 8px;
  padding-bottom: 6px;
}
.callout-section-head.top-level .callout-section-amt,
.callout-section-head.top-level .callout-cmp,
.callout-section-head.top-level .callout-delta {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
}
.callout-section-head.top-level .callout-cmp {
  color: var(--muted);
  font-weight: 500;
}
/* Inner section headers: regular case + bold, smaller than top-level */
.callout-section-head:not(.top-level) {
  font-size: 12px;
  color: var(--fg);
}

/* Caret glyph — fixed-width slot so leaf labels at the same depth align
   with section labels (leaves get the same padding-left as their parent
   section's text). Rotates 0°→-90° when collapsed for the ▸ effect. */
.callout-section-caret {
  display: inline-block;
  width: 14px;
  font-size: 9px;
  color: var(--muted);
  vertical-align: middle;
  transition: transform 0.18s ease;
  transform: translateY(-1px);
}
.callout-section-head.collapsed .callout-section-caret {
  transform: rotate(-90deg) translateX(1px);
}
/* Dimmed bullet for top-level leaves (e.g. Gift Shop) — sits in the caret
   slot so labels stay aligned with sibling section headers, but doesn't
   suggest clickability or rotate. */
.callout-section-caret-empty {
  opacity: 0.45;
  font-size: 13px;
  line-height: 1;
}
.callout-section-head.non-clickable {
  cursor: default;
}
.callout-section-head.non-clickable:hover {
  background: transparent;
}

.callout-section-label {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.callout-section-children {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: none;
  transition: max-height 0.2s ease;
}
.callout-section-children.hidden {
  display: none;
}

.callout-section-amt {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.callout-cmp {
  color: var(--muted);
  font-weight: 500;
  text-align: right;
}
.callout-cmp.negative {
  color: var(--negative);
}
.callout-amt.muted,
.callout-cmp.muted,
.callout-delta.muted {
  color: var(--muted);
  font-weight: 400;
}

/* Per-row pct-change chip — small inline ▲/▼ + percent, color-coded the
   same way as the title kpi-delta chip. No pill background since these are
   dense rows; the color carries the signal. */
.callout-delta {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.callout-delta.positive {
  color: var(--positive);
}
.callout-delta.negative {
  color: var(--negative);
}
.callout-delta.flat {
  color: var(--muted);
}

.callout-name {
  color: var(--fg);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.callout-amt {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
}
.callout-amt.negative {
  color: var(--negative);
}

.callout-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 24px 0;
  text-align: center;
}

/* Segmented view-toggle control — sits in the card header on the right.
   Two pill buttons: "Table" and "Chart" with the active one highlighted.
   Used on the Top Expense Categories card to swap between the hierarchy
   table and the bar chart view. */
.view-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  gap: 0;
}

.view-toggle-btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  letter-spacing: 0.01em;
}

.view-toggle-btn:hover:not(.active) {
  color: var(--fg);
}

.view-toggle-btn.active {
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Hidden pane state — used by the view toggle to swap between the table
   and chart bodies inside the Top Expense Categories card. */
.chart-card .hidden,
.callout-list.hidden {
  display: none;
}

.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.table-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead {
  background: var(--surface-2);
}

thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

tbody td {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  white-space: nowrap;
}

tbody tr:hover {
  background: var(--surface-2);
}

.text-right {
  text-align: right;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--muted-2);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

.badge.live {
  background: var(--positive-soft);
  color: var(--positive);
}

.badge.error {
  background: var(--negative-soft);
  color: var(--negative);
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.error-banner {
  background: var(--negative-soft);
  color: var(--negative);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 18px;
}

.success-banner {
  background: var(--positive-soft);
  color: var(--positive);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 18px;
}

/* ----- Financials progress indicator ----- */

.fin-progress-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.fin-progress-wrap.fin-progress-done {
  opacity: 0;
  transform: translateY(-4px);
}

.fin-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 10px;
}

.fin-progress-count {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
}

.fin-progress-track {
  height: 4px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.fin-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #ec4899);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 6px rgba(99, 102, 241, 0.4);
}

/* Shimmer effect while bar is < 100% */
.fin-progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 60px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: fin-progress-shimmer 1.4s ease-in-out infinite;
}

@keyframes fin-progress-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400px); }
}

/* ----- Skeleton placeholders for progressive loading ----- */

@keyframes skel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.skel-bar {
  display: inline-block;
  height: 1em;
  min-height: 14px;
  background: var(--surface-2);
  border-radius: 6px;
  animation: skel-pulse 1.4s ease-in-out infinite;
}

.skel-bar.skel-short {
  width: 60%;
}

.kpi-skeleton .kpi-value.skel-bar {
  height: 28px;
  width: 70%;
  margin-top: 4px;
}

.kpi-skeleton .kpi-hint.skel-bar {
  margin-top: 8px;
}

.chart-card-skeleton .skel-area {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-radius: 8px;
  animation: skel-pulse 1.4s ease-in-out infinite;
}

.chart-card-skeleton .skel-text {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.chart-card-skeleton .chart-subtitle.skel-bar {
  height: 11px;
  width: 50%;
}

.subtabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border-radius: 9px;
}

.subtab {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  transition: all 0.15s ease;
}

.subtab:hover {
  color: var(--text);
}

.subtab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.fin-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fin-table table {
  font-size: 12px;
}

.fin-table thead th {
  padding: 8px 12px;
}

.fin-table tbody td {
  padding: 8px 12px;
}

.fin-table .negative {
  color: var(--negative);
}

/* Section header row inside the accounts table — "Banks" / "Credit cards" */
.fin-table-group-head td {
  background: var(--surface-2);
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-top: 11px;
  padding-bottom: 7px;
  border-top: 1px solid var(--border);
}
.fin-table-group-head td:last-child {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}
/* First group head sits flush against the thead — drop its extra top border */
.fin-table tbody tr.fin-table-group-head:first-child td {
  border-top: 0;
}

/* Grand total row — slightly heavier than the per-group subtotals */
.fin-table-grand-total td {
  border-top: 2px solid var(--border);
  font-size: 13px;
}

.ap-row-total {
  font-weight: 600;
  border-top: 2px solid var(--border);
  background: var(--surface-2);
}

/* AP Aging — clickable bucket rows + sliding vendor-breakdown panel ----- */

.fin-ap-table .ap-bucket-row.clickable {
  cursor: pointer;
  user-select: none;
}
.fin-ap-table .ap-bucket-row.clickable:hover td {
  background: var(--surface-2);
}
.fin-ap-table .ap-bucket-row.ap-row-total.clickable:hover td {
  background: var(--border); /* slightly darker since total row is already tinted */
}

.fin-ap-table .ap-caret {
  display: inline-block;
  width: 12px;
  margin-right: 6px;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
  transition: transform 0.2s ease;
  transform: translateY(-1px);
}
.fin-ap-table .ap-bucket-row.expanded .ap-caret:not(.ap-caret-empty) {
  transform: rotate(90deg) translateX(-1px);
}
/* Non-expandable bullet — same width as the caret so labels align, but
   visually quieter and never rotates. */
.fin-ap-table .ap-caret-empty {
  color: var(--muted);
  opacity: 0.45;
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* Detail row: a sliding container holding the vendor list */
.fin-ap-table .ap-bucket-detail td {
  padding: 0;
  border-top: 0;
  background: var(--surface-2);
}

.fin-ap-table .ap-detail-inner {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}
.fin-ap-table .ap-bucket-detail.open .ap-detail-inner {
  /* Generous cap — fits most vendor lists. If a tenant has 50+ vendors in
     one bucket, internal scroll kicks in via .ap-detail-list. */
  max-height: 600px;
}

.fin-ap-table .ap-detail-list {
  padding: 6px 14px 12px 32px;
  max-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fin-ap-table .ap-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
}
.fin-ap-table .ap-detail-row:last-child {
  border-bottom: 0;
}

.fin-ap-table .ap-detail-name {
  color: var(--fg);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fin-ap-table .ap-detail-amt {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}
.fin-ap-table .ap-detail-amt.negative {
  color: var(--negative);
}

/* Footer row inside the detail panel — "N vendors · subtotal" */
.fin-ap-table .ap-detail-footer {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  border-bottom: 0;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.fin-ap-table .ap-detail-footer .ap-detail-amt {
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
}
.fin-ap-table .ap-detail-footer .ap-detail-amt.negative {
  color: var(--negative);
}

.connections-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 22px;
}

.conn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}

.conn-row:first-child {
  border-top: none;
}

.conn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.conn-dot.connected {
  background: var(--positive);
}

.conn-dot.disconnected {
  background: var(--muted-2);
}

.conn-dot.error {
  background: var(--negative);
}

.conn-body {
  flex: 1;
  min-width: 0;
}

.conn-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.conn-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.conn-status-text {
  font-size: 12px;
  color: var(--muted);
}

.conn-btn {
  display: inline-block;
  padding: 6px 14px;
  background: var(--accent);
  color: white;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.conn-btn:hover {
  opacity: 0.9;
}

/* Icon-only refresh button used in the System health modal rows. */
.conn-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  flex-shrink: 0;
}
.conn-btn-icon:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.conn-btn-icon:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.conn-btn-icon.spinning svg {
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =========================================================================
   Vidar chat — floating button + side drawer
   ========================================================================= */

.ask-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 12px 18px;
  background: linear-gradient(135deg, var(--accent), #ec4899);
  color: white;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35),
              0 2px 6px rgba(99, 102, 241, 0.25);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ask-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(99, 102, 241, 0.4),
              0 4px 8px rgba(99, 102, 241, 0.3);
}

.ask-btn svg {
  width: 18px;
  height: 18px;
}

body.chat-open .ask-btn {
  transform: scale(0.9) translateY(8px);
  opacity: 0;
  pointer-events: none;
}

.chat-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 50;
}

body.chat-open .chat-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 440px;
  max-width: 100%;
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 60;
  display: flex;
  flex-direction: column;
}

body.chat-open .chat-drawer {
  transform: translateX(0);
}

.chat-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.chat-drawer-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.chat-drawer-mark {
  font-size: 18px;
  color: #c9a961;
  line-height: 1;
}

.chat-drawer-sub {
  color: var(--muted);
  font-size: 12px;
  margin-left: 4px;
}

.chat-drawer-actions {
  display: flex;
  gap: 4px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}

.chat-empty {
  margin: auto 0;
  padding: 18px 4px;
  text-align: center;
  color: var(--muted);
}

.chat-empty-mark {
  font-size: 32px;
  color: #c9a961;
  margin-bottom: 8px;
}

.chat-empty h4 {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 6px;
}

.chat-empty p {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.chat-suggestions {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.chat-suggestions li {
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.chat-suggestions li:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-msg-user {
  align-items: flex-end;
}

.chat-msg-assistant {
  align-items: flex-start;
}

.chat-bubble {
  max-width: 92%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.chat-msg-user .chat-bubble {
  background: var(--accent);
  color: white;
  border-bottom-right-radius: 4px;
}

.chat-msg-assistant .chat-bubble {
  background: var(--surface-2);
  color: var(--text);
  border-bottom-left-radius: 4px;
  max-width: 100%;
}

/* Markdown body inside assistant bubbles */
.chat-msg-assistant .chat-bubble h1,
.chat-msg-assistant .chat-bubble h2,
.chat-msg-assistant .chat-bubble h3,
.chat-msg-assistant .chat-bubble h4 {
  font-size: 14px;
  font-weight: 600;
  margin-top: 12px;
  margin-bottom: 4px;
}

.chat-msg-assistant .chat-bubble h1 { font-size: 16px; }
.chat-msg-assistant .chat-bubble h2 { font-size: 15px; }

.chat-msg-assistant .chat-bubble p {
  margin: 6px 0;
}

.chat-msg-assistant .chat-bubble ul,
.chat-msg-assistant .chat-bubble ol {
  margin: 6px 0;
  padding-left: 22px;
}

.chat-msg-assistant .chat-bubble li {
  margin-bottom: 3px;
}

.chat-msg-assistant .chat-bubble code {
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.chat-msg-assistant .chat-bubble pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  overflow-x: auto;
  margin: 8px 0;
}

.chat-msg-assistant .chat-bubble pre code {
  background: none;
  padding: 0;
}

.chat-msg-assistant .chat-bubble table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin: 8px 0;
}

.chat-msg-assistant .chat-bubble th,
.chat-msg-assistant .chat-bubble td {
  border: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
}

.chat-msg-assistant .chat-bubble th {
  background: var(--surface);
  font-weight: 600;
}

.chat-msg-assistant .chat-bubble strong {
  font-weight: 600;
  color: var(--text);
}

.chat-msg-assistant .chat-bubble hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

.chat-msg-assistant .chat-bubble blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  color: var(--muted);
  margin: 8px 0;
}

.chat-tools {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding-left: 2px;
}

/* Inline progress lines while Vidar works through a request.
   Reads as "what the AI is doing" rather than raw API names. */
.chat-tool-chip {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
}
.chat-tool-chip::before {
  content: "·  ";
  font-style: normal;
  opacity: 0.6;
}

.chat-typing {
  display: inline-flex;
  gap: 4px;
}

.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: chat-typing 1.2s infinite ease-in-out;
}

.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chat-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

.chat-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.chat-input {
  flex: 1;
  resize: none;
  min-height: 38px;
  max-height: 200px;
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s ease;
}

.chat-input:focus {
  border-color: var(--accent);
}

.chat-send {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.chat-send:hover { opacity: 0.9; }

.chat-send svg {
  width: 16px;
  height: 16px;
}

/* Mobile chat tweaks */
@media (max-width: 600px) {
  .chat-drawer {
    width: 100%;
    border-left: none;
  }
  .ask-btn {
    bottom: 16px;
    right: 16px;
    padding: 11px 16px 11px 14px;
    font-size: 13px;
  }
  .ask-btn span {
    display: none; /* circular icon-only on phones */
  }
  .ask-btn {
    padding: 14px;
  }
  .ask-btn svg {
    width: 22px;
    height: 22px;
  }
}

/* =========================================================================
   Mobile / tablet (≤ 880px)
   ========================================================================= */

@media (max-width: 880px) {
  /* Mobile topbar mirrors vidarose.com:
       [pictogram]      [VIDAROSE text]      [☰] [Avatar]
     On scroll, the text fades out and the mark + header shrink, leaving:
       [pictogram]                            [☰] [Avatar]
     Property tabs, period dropdowns, PDF, and health collapse into the
     hamburger menu drawer. */

  .topbar {
    position: sticky;
    top: 0;
    transition: padding 0.22s ease;
  }

  .topbar-inner {
    padding: 14px 14px 14px 70px;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 60px;
    transition: padding 0.22s ease, min-height 0.22s ease;
  }

  .brand {
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    transition: transform 0.22s ease;
  }

  /* Swap which brand image is visible on mobile: hide combined, show
     pictogram-only mark. */
  .brand-mark-combined {
    display: none;
  }
  .brand-mark-icon {
    display: block;
    height: 50px;
    width: auto;
  }

  /* Text wordmark — centered horizontally between the mark and the
     right-side action cluster. Sits absolute in the topbar so it doesn't
     consume layout space in topbar-inner. Vertical offset is tuned so the
     "VIDAROSE" word (which occupies the top ~65% of the source image) is
     centered in the header, leaving "COLLECTION" to hang below. */
  .brand-text-link {
    display: block;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    line-height: 0;
    transition: opacity 0.18s ease;
  }
  .brand-text-img {
    height: 36px;
    width: auto;
    display: block;
  }

  /* Scrolled state — applied by initTopbarScroll() once the user has
     scrolled past a threshold. Text disappears, mark + header shrink. */
  .topbar.scrolled .brand-text-link {
    opacity: 0;
    pointer-events: none;
  }
  .topbar.scrolled .brand-mark-icon {
    height: 34px;
  }
  .topbar.scrolled .topbar-inner {
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 44px;
    padding-left: 56px;
  }

  /* Secondary row (tabs + period) lives only in the mobile menu drawer. */
  .topbar-secondary {
    display: none;
  }

  .menu-btn {
    display: inline-flex;
  }

  /* Inside the mobile menu drawer, the period dropdowns get full-width
     labelled rows; the desktop right-aligned pill layout doesn't fit. */
  .mobile-menu .period-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .mobile-menu .period-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .mobile-menu .period-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .mobile-menu .select {
    flex: 0 1 200px;
    min-width: 0;
    font-size: 13px;
  }

  /* PDF + Health hidden in the row; they re-appear inside the menu drawer. */
  #exportBtn, #healthBtn {
    display: none;
  }

  /* Hamburger sits to the LEFT of the avatar in the meta cluster.
     (Avatar has no explicit order, so default 0; menuBtn -1 wins.) */
  #menuBtn {
    order: -1;
  }

  /* Mobile menu (property selector) — anchored under the hamburger */
  .mobile-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 6px);
    right: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    padding: 6px;
    min-width: 220px;
    max-width: calc(100vw - 24px);
    z-index: 80;
  }

  .mobile-menu[hidden] {
    display: none;
  }

  .mobile-menu-item {
    text-align: left;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.12s ease;
  }

  .mobile-menu-item:hover,
  .mobile-menu-item:focus-visible {
    background: var(--surface-2);
  }

  .mobile-menu-item.active {
    background: var(--accent-soft);
    color: var(--accent);
  }

  .mobile-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 4px;
  }

  .mobile-menu-action {
    color: var(--muted);
    font-size: 13px;
  }

  /* Section header — title + sub-tab toggle stack */
  .section-header {
    flex-direction: column;
    align-items: stretch !important;
  }

  .section-header > div:first-child {
    margin-bottom: 8px;
  }

  .subtabs {
    align-self: flex-start;
  }

  /* Body padding */
  .main {
    padding: 16px 14px;
  }

  /* KPI cards stack to 1 column */
  .kpi-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .kpi {
    padding: 14px;
  }

  .kpi-value {
    font-size: 22px;
  }

  /* Charts: single column, shorter heights */
  .chart-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .chart-canvas-wrapper {
    height: 220px;
  }

  .chart-grid.one-col .chart-canvas-wrapper {
    height: 240px;
  }

  /* Tables a bit tighter */
  .fin-table table,
  table {
    font-size: 12px;
  }

  thead th,
  tbody td {
    padding: 8px 10px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .conn-row {
    padding: 11px 14px;
    gap: 10px;
  }

  .conn-btn {
    padding: 6px 12px;
    font-size: 11px;
  }

  .footer {
    padding: 14px 14px 24px;
  }
}

@media (max-width: 480px) {
  /* Very narrow phones — go even tighter */
  .brand {
    left: 10px;
  }
  .brand-mark-icon {
    height: 40px;
  }
  .topbar.scrolled .brand-mark-icon {
    height: 28px;
  }
  .brand-text-link {
    top: 21px;
  }
  .brand-text-img {
    height: 27px;
  }

  .topbar-inner {
    padding: 12px 10px 12px 58px;
    min-height: 56px;
    gap: 6px;
  }
  .topbar.scrolled .topbar-inner {
    padding-left: 46px;
  }

  .meta {
    gap: 6px;
  }

  .icon-btn {
    width: 34px;
    height: 34px;
  }

  .menu-btn svg {
    width: 16px;
    height: 16px;
  }

  .ghost-btn {
    padding: 4px 6px;
    font-size: 14px;
  }

  .kpi-value {
    font-size: 20px;
  }

  .chart-canvas-wrapper {
    height: 200px;
  }

  .main {
    padding: 12px 12px;
  }
}

.footer {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 24px 32px;
  font-size: 11px;
  color: var(--muted-2);
  text-align: right;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.property-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.property-card h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.property-card .sub {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 14px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}

.metric-row:first-of-type {
  border-top: none;
}

.metric-row .name {
  color: var(--muted);
}

.metric-row .val {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ============================================================================
   Export PDF modal
   ============================================================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 90;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  z-index: 100;
  overflow: hidden;
}

/* `display: flex` above overrides the UA stylesheet's [hidden] { display: none },
   so we have to restore it explicitly. Same for the backdrop for consistency. */
.modal[hidden],
.modal-backdrop[hidden] {
  display: none !important;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.modal-header h2 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.modal-body {
  padding: 18px 20px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-row.two-col {
  flex-direction: row;
  gap: 12px;
}

.modal-row.two-col .modal-label {
  flex: 1;
}

.modal-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.modal-label .select {
  text-transform: none;
  letter-spacing: 0;
  width: 100%;
}

.modal-fieldset {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px 14px;
  background: var(--surface-2);
}

.modal-fieldset legend {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.modal-checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
  margin-top: 4px;
}

.modal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.modal-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.modal-check.disabled {
  color: var(--muted-2);
  cursor: not-allowed;
}

.modal-check.disabled input { cursor: not-allowed; }

.modal-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.modal-toggle:hover { border-color: var(--accent); }

.modal-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
}

.modal-toggle span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.modal-toggle small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.modal-guidance {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--accent-soft);
  border-radius: 10px;
  background: var(--surface-2);
}

.modal-guidance[hidden] { display: none; }

.modal-label-hint {
  color: var(--muted);
  font-weight: 400;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

.modal-textarea {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
  resize: vertical;
  min-height: 64px;
}

.modal-textarea:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
  border-color: var(--accent);
}

.modal-textarea::placeholder { color: var(--muted-2); }

.modal-hint {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.primary-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}

.primary-btn:hover { filter: brightness(0.95); }
.primary-btn:active { transform: translateY(1px); }
.primary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: none;
}

@media (max-width: 600px) {
  .modal-row.two-col { flex-direction: column; }
  .modal-checks { grid-template-columns: 1fr; }
  .modal { width: calc(100vw - 16px); }
}