/* ==========================================================================
   BASE + APPLICATION SHELL
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-subtle);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--duration-theme) var(--ease-in-out),
    color var(--duration-theme) var(--ease-in-out);
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

svg { flex-shrink: 0; }

.page {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-10) var(--space-16);
}

/* Sits after each page's own content, inside <main> — not fixed/sticky, so
   it simply appears once the reader scrolls to the bottom of the page. */
.app-footer {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-10);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.page-title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-1);
}

.page-subtitle {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.section-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}

.text-secondary { color: var(--text-secondary); }
.text-mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.text-right { text-align: right; }

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-hover) var(--ease-out),
    border-color var(--duration-hover) var(--ease-out),
    background-color var(--duration-theme) var(--ease-in-out);
}

.card-padded { padding: var(--space-6); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
}

.card-body { padding: var(--space-6); }

.card-interactive:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

/* ---- KPI cards ------------------------------------------------------------ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.kpi-card {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.kpi-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

.kpi-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
}

.kpi-icon svg { width: 18px; height: 18px; }
.kpi-icon.is-success { background: var(--success-soft); color: var(--success); }
.kpi-icon.is-warning { background: var(--warning-soft); color: var(--warning); }
.kpi-icon.is-danger  { background: var(--danger-soft);  color: var(--danger); }
.kpi-icon.is-info    { background: var(--info-soft);    color: var(--info); }

.kpi-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: 1;
}

.kpi-meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* ---- AI status widgets ---------------------------------------------------- */
.widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.widget-card {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.widget-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.widget-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.widget-icon svg { width: 17px; height: 17px; }
.widget-icon.is-success { background: var(--success-soft); color: var(--success); }
.widget-icon.is-warning { background: var(--warning-soft); color: var(--warning); }
.widget-icon.is-danger  { background: var(--danger-soft);  color: var(--danger); }

.widget-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.widget-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.widget-detail {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.progress-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--hover);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: width 600ms var(--ease-out);
}

.progress-fill.is-success { background: var(--success); }
.progress-fill.is-warning { background: var(--warning); }
.progress-fill.is-danger  { background: var(--danger); }

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

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

.badge-neutral { background: var(--hover);        color: var(--text-secondary); }
.badge-info    { background: var(--info-soft);    color: var(--info); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-accent  { background: var(--accent-soft);  color: var(--accent); }

.badge-plain::before { display: none; }

/* ---- Sample-data notice (illustrative business pages) --------------------- */
.demo-notice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.demo-notice svg { flex-shrink: 0; }

/* Confidence meter used on detail pages. */
.confidence {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.confidence-bar {
  flex: 1;
  min-width: 80px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--hover);
  overflow: hidden;
}

.confidence-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   TABLES
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-card);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.data-table th {
  padding: var(--space-3) var(--space-5);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.data-table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-out);
}

.data-table tbody tr:hover { background: var(--hover); }
.data-table tbody tr:last-child td { border-bottom: none; }

.data-table .cell-strong { font-weight: var(--weight-semibold); }
.data-table .cell-numeric { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.empty-state {
  padding: var(--space-16) var(--space-6);
  text-align: center;
}

.empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  display: grid;
  place-items: center;
  border-radius: var(--radius-card);
  background: var(--hover);
  color: var(--text-tertiary);
}

.empty-icon svg { width: 26px; height: 26px; }

.empty-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.empty-text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  max-width: 420px;
  margin: 0 auto;
}

/* ==========================================================================
   UPLOAD DROPZONE
   ========================================================================== */

.dropzone {
  padding: var(--space-12) var(--space-6);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-hover) var(--ease-out),
    background-color var(--duration-hover) var(--ease-out);
}

.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.dropzone.is-busy {
  pointer-events: none;
  opacity: 0.75;
}

.dropzone-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto var(--space-4);
  display: grid;
  place-items: center;
  border-radius: var(--radius-card);
  background: var(--accent-soft);
  color: var(--accent);
}

.dropzone-icon svg { width: 24px; height: 24px; }

.dropzone-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.dropzone-hint {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   DOCUMENT DETAIL LAYOUT
   ========================================================================== */

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-6);
  align-items: start;
}

.preview-pane {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  overflow: hidden;
}

.preview-frame {
  width: 100%;
  height: 640px;
  border: none;
  display: block;
  background: var(--bg-subtle);
}

.preview-image {
  width: 100%;
  height: auto;
  display: block;
}

.preview-unavailable {
  height: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6);
  text-align: center;
  color: var(--text-secondary);
  background: var(--bg-subtle);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.field-input {
  width: 100%;
  padding: 10px var(--space-3);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-hover) var(--ease-out),
    box-shadow var(--duration-hover) var(--ease-out);
}

.field-input:hover { border-color: var(--border-strong); }

.field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-input:disabled {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  cursor: not-allowed;
}

textarea.field-input {
  min-height: 84px;
  resize: vertical;
  line-height: var(--leading-normal);
}

.field-flag {
  font-size: var(--text-xs);
  color: var(--warning);
}

.totals {
  margin-left: auto;
  width: min(340px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.total-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  font-size: var(--text-base);
}

.total-row.is-grand {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

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

/* ---- Issues list ----------------------------------------------------------- */
.issue-list { display: flex; flex-direction: column; gap: var(--space-3); }

.issue {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.issue-error   { background: var(--danger-soft);  color: var(--danger); }
.issue-warning { background: var(--warning-soft); color: var(--warning); }
.issue svg { width: 16px; height: 16px; margin-top: 2px; }

/* ---- Timeline -------------------------------------------------------------- */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  padding-left: var(--space-6);
}

.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border);
}

.timeline-item { position: relative; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-6) + 2px);
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--accent);
}

.timeline-item.is-success::before { border-color: var(--success); }
.timeline-item.is-danger::before  { border-color: var(--danger); }

.timeline-title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.timeline-meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ==========================================================================
   CHARTS (pure CSS/SVG, no external library)
   ========================================================================== */

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.bar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 44px;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.bar-label { color: var(--text-secondary); }

.bar-track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--hover);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--chart-1);
  transition: width 700ms var(--ease-out);
}

.bar-fill.is-success { background: var(--success); }
.bar-fill.is-warning { background: var(--warning); }
.bar-fill.is-danger  { background: var(--danger); }
.bar-fill.is-neutral { background: var(--text-tertiary); }

.bar-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* Wider label/value columns for charts with business names and currency
   amounts (as opposed to short status labels and plain counts). */
.bar-chart.is-wide .bar-row {
  grid-template-columns: 200px 1fr 100px;
}

.bar-chart.is-wide .bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spark-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 130px;
}

.spark-bar {
  flex: 1;
  min-height: 4px;
  border-radius: 4px 4px 2px 2px;
  background: var(--accent-soft);
  transition: background-color var(--duration-hover) var(--ease-out);
  position: relative;
}

.spark-bar[data-count]:not([data-count="0"]) { background: var(--chart-1); }
.spark-bar:hover { background: var(--accent); }

.spark-axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* A handful of monthly bars reads better with every label shown, evenly
   spaced under its bar, instead of just the two end labels. */
.spark-axis.is-full { justify-content: space-around; }

/* ---- Sales vs Purchases comparison chart ----------------------------------- */
.compare-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: var(--space-3);
  height: 160px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.compare-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  height: 100%;
}

.compare-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  flex: 1;
  width: 100%;
  justify-content: center;
}

.compare-bar {
  width: 40%;
  min-height: 3px;
  border-radius: 3px 3px 1px 1px;
}

.compare-bar.is-sales { background: var(--chart-1); }
.compare-bar.is-purchase { background: var(--chart-3); }

.compare-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.compare-legend {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.legend-dot.is-sales { background: var(--chart-1); }
.legend-dot.is-purchase { background: var(--chart-3); }

/* A comparison chart needs more width than a standard KPI card, so it
   spans the full row instead of sharing one grid cell. */
.kpi-card-wide { grid-column: 1 / -1; }

/* Compact monthly-trend variant of the comparison chart, sized to sit
   inside a KPI-card-height box instead of a full chart panel. */
.compare-chart.is-compact {
  height: 84px;
  gap: var(--space-2);
}

/* ---- Dashboard: dual-column panels + tighter section rhythm --------------- */
.dual-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--space-5);
}

.kpi-grid.is-compact-3 {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/* Scoped to the dashboard page only, so the shared .page/.kpi-grid/
   .section-title defaults used by every other page stay untouched. */
.dashboard-page { padding-bottom: var(--space-10); }
.dashboard-page .section-title { margin-bottom: var(--space-3); }
.dashboard-page > section { margin-bottom: var(--space-6); scroll-margin-top: var(--space-6); }
.dashboard-page > section:last-child { margin-bottom: 0; }

/* Opt-in only — NOT a blanket ".dashboard-page .kpi-grid" rule. A broad
   descendant selector here would also zero the margin on KPI grids that
   live *inside* a merged section (Sales/Purchase Overview and Performance
   each have a KPI grid followed by more content — a table or charts — in
   the very same section), stripping the gap between them and making that
   next block visually touch the KPI cards above it. This class is applied
   explicitly only to this file's own KPI grids, each of which really is
   the last thing in its section before the next section's own gap takes
   over — never to a nested one built by a shared macro. */
.kpi-grid.is-flush { margin-bottom: 0; }

/* The merged Sales Overview / Sales Performance / Customers / Vendors /
   Purchase Overview / Purchase Performance sections reuse macros that were
   built to be a standalone page's entire content, so each self-wraps in its
   own .page (own max-width + padding). Nested inside .dashboard-page's own
   .page, that would double up the horizontal padding and re-center each
   section to a narrower width. Neutralise the inner one so every section —
   old and newly merged — lines up flush against the same outer container. */
.dashboard-page .page {
  max-width: none;
  margin: 0;
  padding: 0;
}

.data-table.is-compact th,
.data-table.is-compact td {
  padding: var(--space-2) var(--space-4);
}

/* Recent Sales / Recent Purchases: fixed column widths shared by both
   tables so Invoice No./Party/Date/Amount/Status line up with each other
   from one table to the next — with the default auto layout, each table
   computes its own column widths independently from its own content
   (e.g. a longer vendor name in one table than the other), so the same
   column can land at a different x-position between the two tables even
   though every row within a single table stays internally consistent. */
.data-table.is-recent {
  table-layout: fixed;
  /* Below this, .table-wrap's overflow-x:auto scrolls the table horizontally
     instead of squeezing every column down to unreadable widths. */
  min-width: 560px;
}

.data-table.is-recent .col-recent-invoice { width: 20%; }
.data-table.is-recent .col-recent-party { width: 28%; }
.data-table.is-recent .col-recent-date { width: 14%; }
.data-table.is-recent .col-recent-amount { width: 20%; }
.data-table.is-recent .col-recent-status { width: 18%; }

.data-table.is-recent .cell-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Mini trend sparkline (compact KPI-card variant) ---------------------- */
.kpi-card-trend { gap: var(--space-2); }

.mini-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 52px;
}

.mini-spark-bar {
  flex: 1;
  min-height: 3px;
  border-radius: 2px 2px 1px 1px;
  background: var(--accent-soft);
}

.mini-spark-bar.is-success { background: var(--success); }
.mini-spark-bar.is-warning { background: var(--warning); }
.mini-spark-bar.is-accent  { background: var(--accent); }

/* ==========================================================================
   TOASTS
   ========================================================================== */

.toast-stack {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: min(400px, calc(100vw - var(--space-8)));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-base);
  animation: toast-in 300ms var(--ease-out);
}

.toast.is-success { border-left-color: var(--success); }
.toast.is-error   { border-left-color: var(--danger); }
.toast.is-leaving { animation: toast-out 250ms var(--ease-in-out) forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(20px); }
}

/* ==========================================================================
   SETTINGS
   ========================================================================== */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.status-row:last-child { border-bottom: none; }

.status-key {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.status-detail {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
  word-break: break-word;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  .page { padding: var(--space-6) var(--space-6) var(--space-12); }
}

@media (max-width: 960px) {
  .detail-grid { grid-template-columns: 1fr; }

  .preview-pane { position: static; }

  .preview-frame { height: 460px; }
  .preview-unavailable { height: 460px; }
}

@media (max-width: 860px) {
  .page { padding: var(--space-5) var(--space-4) var(--space-12); }

  .page-header { flex-direction: column; align-items: stretch; }

  .kpi-grid,
  .widget-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }

  .bar-row { grid-template-columns: 100px 1fr 36px; }

  .toast-stack {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    max-width: none;
  }
}

@media (max-width: 560px) {
  .kpi-grid,
  .widget-grid { grid-template-columns: 1fr; }

  .kpi-value { font-size: var(--text-xl); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}