/* ============================================================
   VOREA Executive Dashboard
   All selectors prefixed with .dash- to avoid collision
   ============================================================ */

:root {
  /* Metric hue palette (data viz).
     #221/theming: every hue here was a single deep value used BOTH as tile-value
     text and as a bar fill, so on the dark surface the whole palette sat between
     1.6:1 and 3.2:1 — the dashboard's numbers were the least readable text in the
     app. Each is now a light-dark() pair: the light half is the shipped hue, the
     dark half is the same hue lifted to clear 4.5:1 on --surface (#1e2229). The
     `-bg` fills flip with them so ink-on-fill passes in both themes too.
     Two light values moved, and only because they already failed AA in LIGHT:
       --amber #C28100 was 3.26:1 on white and 2.62:1 on --amber-bg; #8A5A00 is
         the same gold a step deeper (5.93:1 / 4.76:1).
       --green-bg #DBEEE4 left --green at 4.43:1; #EAF6EF (the global --ok-fill
         light value) lifts it to 4.83:1 without changing the hue. */
  --blue:light-dark(#1E5FA8,#8fc4ee);--blue-bg:light-dark(#DCEAF7,#16283a);
  --indigo:light-dark(#4A3FB8,#a9a2ee);
  --amber:light-dark(#8A5A00,#f0c26a);--amber-bg:light-dark(#FBE5A8,#3a2c12);
  --violet:light-dark(#6E3FA8,#c9b0f0);--teal:light-dark(#0E7C7B,#6fd0ce);--slate:light-dark(#57606F,#9aa5b0);
  --green:light-dark(#117A4E,#7fd6a6);--green-bg:light-dark(#EAF6EF,#16321f);--red:light-dark(#B42318,#f09a9a);--red-bg:light-dark(#FCE3DF,#3a1c1c);
  /* Layout tokens.
     #F10: --radius / --radius-lg used to be redefined here at 4px/6px. Because
     dashboard.css loads after styles.css, that private :root silently
     overrode the global radius scale for the whole dashboard page. They are
     removed so the shared scale applies; only --pad remains dashboard-local. */
  --pad:20px;
}

/* ── Topbar ──────────────────────────────────────────────── */

.dash-topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--pad);
  height: 52px;
  background: linear-gradient(180deg, var(--vcg-dd), #32464f);
  color: #fff;
}

.dash-brand {
  display: flex; align-items: center; gap: 8px;
}

.dash-brand-mark {
  font-size: 18px; color: var(--vcg); line-height: 1;
}

.dash-brand-name {
  font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
}

.dash-brand-name span { color: var(--vcg); }

.dash-nav {
  display: flex; gap: 4px; margin-left: 24px;
}

.dash-nav a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  font-size: var(--fs-base); font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius);
  transition: background .15s, color .15s;
}

.dash-nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.dash-nav a.active { color: #fff; background: rgba(255,255,255,.14); }

.dash-topbar-right {
  margin-left: auto;
  font-size: var(--fs-md); color: rgba(255,255,255,.45);
  font-variant-numeric: tabular-nums;
}

/* ── Page layout ─────────────────────────────────────────── */

.dash-page {
  max-width: var(--content-w-wide);   /* #F11 */
  margin: 0 auto;
  padding: var(--pad);
}

.dash-header {
  margin-bottom: 24px;
}

.dash-header-eyebrow {
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--muted);
  margin-bottom: 4px;
}

.dash-header-title {
  font-size: 28px; font-weight: 700; line-height: 1.2;
  margin: 0 0 4px;
  color: var(--ink);
}

.dash-header-subtitle {
  font-size: var(--fs-base); color: var(--muted); margin: 0;
}

/* ── Toolbar ─────────────────────────────────────────────── */

.dash-toolbar {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 16px;
  font-size: var(--fs-md); color: var(--muted);
}

.dash-toolbar label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 500;
}

.dash-toolbar input[type="range"] {
  width: 120px;
  accent-color: var(--vcg);
}

.dash-toolbar .dash-threshold-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted);
  min-width: 32px;
}

/* ── Metric grid ─────────────────────────────────────────── */

.dash-metric-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.dash-metric-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 14px 12px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
  position: relative;
  overflow: hidden;
}

.dash-metric-tile:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--line-dk);
}


.dash-metric-tile .dash-tile-bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
}

.dash-metric-tile .dash-tile-label {
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted);
  margin-bottom: 6px;
}

.dash-metric-tile .dash-tile-value {
  font-size: 32px; font-weight: 700; line-height: 1;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}

.dash-metric-tile .dash-tile-breakdown {
  font-size: var(--fs-xs); color: var(--muted);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.dash-metric-tile .dash-tile-sparkline {
  margin-top: 4px;
}

.dash-metric-tile .dash-tile-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-xs); font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 4px;
}

.dash-metric-tile .dash-tile-delta.up {
  color: var(--red); background: var(--red-bg);
}

.dash-metric-tile .dash-tile-delta.down {
  color: var(--ok-ink); background: var(--ok-fill);
}

.dash-metric-tile .dash-tile-delta.flat {
  color: var(--muted); background: var(--tint);
}

/* Hue variants */
.dash-metric-tile.hue-blue    .dash-tile-bar { background: var(--blue); }
.dash-metric-tile.hue-blue    .dash-tile-value { color: var(--blue); }

.dash-metric-tile.hue-indigo  .dash-tile-bar { background: var(--indigo); }
.dash-metric-tile.hue-indigo  .dash-tile-value { color: var(--indigo); }

.dash-metric-tile.hue-amber   .dash-tile-bar { background: var(--amber); }
.dash-metric-tile.hue-amber   .dash-tile-value { color: var(--amber); }

.dash-metric-tile.hue-violet  .dash-tile-bar { background: var(--violet); }
.dash-metric-tile.hue-violet  .dash-tile-value { color: var(--violet); }

.dash-metric-tile.hue-teal    .dash-tile-bar { background: var(--teal); }
.dash-metric-tile.hue-teal    .dash-tile-value { color: var(--teal); }

.dash-metric-tile.hue-slate   .dash-tile-bar { background: var(--slate); }
.dash-metric-tile.hue-slate   .dash-tile-value { color: var(--slate); }

.dash-metric-tile.hue-orange  .dash-tile-bar { background: var(--vcg); }
.dash-metric-tile.hue-orange  .dash-tile-value { color: var(--vcg); }

.dash-metric-tile.hue-red     .dash-tile-bar { background: var(--red); }
.dash-metric-tile.hue-red     .dash-tile-value { color: var(--red); }

.dash-metric-tile.hue-green   .dash-tile-bar { background: var(--green); }
.dash-metric-tile.hue-green   .dash-tile-value { color: var(--green); }

/* Hazard tile */
.dash-metric-tile.dash-tile-hazard {
  background: repeating-linear-gradient(
    -45deg,
    var(--surface),
    var(--surface) 8px,
    var(--tint) 8px,
    var(--tint) 16px
  );
  border-color: var(--vcg);
}

/* ── Charts row ──────────────────────────────────────────── */

.dash-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.dash-chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.dash-chart-title {
  font-size: var(--fs-md); font-weight: 600; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted);
  margin-bottom: 12px;
}

/* ── Heatmap ─────────────────────────────────────────────── */

.dash-heatmap {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-md);
}

.dash-heatmap th {
  font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted);
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.dash-heatmap th:first-child {
  text-align: left; min-width: 100px;
}

.dash-heatmap td {
  padding: 4px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.dash-heatmap td:first-child {
  text-align: left;
  font-weight: 500;
  padding-left: 8px;
  color: var(--muted);
}

.dash-heatmap-cell {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  min-width: 36px; height: 28px;
  border-radius: 3px;
  font-size: var(--fs-xs); font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform .1s;
}

.dash-heatmap-cell:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-lg);
}

.dash-heatmap-cell .dash-overdue-dot {
  position: absolute; top: 2px; right: 2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
}

/* ── Stacked bar chart ───────────────────────────────────── */

.dash-stack-chart {
  display: flex; flex-direction: column; gap: 8px;
}

.dash-stack-row {
  display: flex; align-items: center; gap: 10px;
}

.dash-stack-label {
  width: 80px; flex-shrink: 0;
  font-size: var(--fs-md); font-weight: 500; color: var(--muted);
  text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dash-stack-bar-track {
  flex: 1; height: 18px;
  background: var(--tint);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}

.dash-stack-bar-seg {
  height: 100%;
  transition: width .3s ease;
  position: relative;
}

.dash-stack-bar-seg.open { background: var(--blue); }
.dash-stack-bar-seg.overdue { background: var(--red); }

.dash-stack-count {
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  width: 32px; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.dash-stack-legend {
  display: flex; gap: 16px; margin-top: 8px;
  font-size: var(--fs-xs); color: var(--muted);
}

.dash-stack-legend-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; margin-right: 4px;
  vertical-align: middle;
}

/* ── Very old items card ─────────────────────────────────── */

.dash-very-old-card {
  background: var(--warn-fill);
  border: 1px solid var(--amber);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 20px;
}

.dash-very-old-card .dash-voc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}

.dash-very-old-card .dash-voc-title {
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}

.dash-very-old-card .dash-voc-title .icon {
  font-size: 18px;
}

.dash-very-old-card .dash-voc-count {
  /* same 2.62:1 amber-on-amber as .pending below — the warn pair passes both ways */
  font-size: var(--fs-md); font-weight: 600; color: var(--warn-ink);
  background: var(--warn-fill);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

/* #400: aged-population trend inside the very-old card. Colors ride the shared
   theme vars (styles.css + the hue palette above), so light/dark both work. */
.dash-voc-stats {
  display: flex; align-items: center; gap: 8px;
}

.dash-voi-delta {
  font-size: var(--fs-xs); font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-voi-delta.up   { color: var(--red);   background: var(--red-bg); }
.dash-voi-delta.down { color: var(--green); background: var(--green-bg); }
.dash-voi-delta.flat { color: var(--muted); background: var(--tint); }

.dash-voi-trend { margin: 4px 0 14px; }

.dash-voi-trend-svg {
  width: 100%; height: 150px; display: block;
}

.dash-voi-trend-x {
  display: flex; justify-content: space-between;
  font-size: var(--fs-2xs); color: var(--muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.dash-voi-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: var(--fs-xs); color: var(--muted);
  margin-top: 6px;
}

.dash-voi-legend .dot {
  width: 8px; height: 8px; border-radius: 2px;
  display: inline-block; margin-right: 4px;
  vertical-align: middle;
}

.dash-very-old-list {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.dash-very-old-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-size: var(--fs-md);
  text-decoration: none; color: var(--ink);
  transition: background .1s, border-color .1s;
}

.dash-very-old-item:hover {
  background: var(--surface);
}

.dash-very-old-item .dash-voi-age {
  font-weight: 700; color: var(--red);
  min-width: 36px; text-align: right;
  font-variant-numeric: tabular-nums;
}

.dash-very-old-item .dash-voi-kind {
  font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px;
  padding: 1px 5px;
  border-radius: 3px;
  color: #fff;
}

.dash-very-old-item .dash-voi-title {
  flex: 1;
  min-width: 0;   /* flex children default to min-width:auto, which blocks the ellipsis */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dash-very-old-item .dash-voi-project {
  font-size: var(--fs-xs); color: var(--muted);
  flex-shrink: 0;
}

/* ── Slide-over panel ────────────────────────────────────── */

.dash-slideover-backdrop {
  position: fixed; inset: 0;
  background: rgba(26,24,20,.3);
  z-index: var(--z-overlay);
  animation: dashFadeIn .2s ease;
}

.dash-slideover {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 520px; max-width: 90vw;
  background: var(--elevated);
  box-shadow: -4px 0 24px rgba(26,24,20,.14);
  z-index: var(--z-overlay-top);
  display: flex; flex-direction: column;
  animation: dashSlideIn .25s ease;
}

@keyframes dashFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

@keyframes dashSlideIn {
  from { transform: translateX(100%); } to { transform: translateX(0); }
}

.dash-slideover-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.dash-slideover-title {
  font-size: 16px; font-weight: 700; color: var(--ink);
}

.dash-slideover-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  border: none; background: transparent;
  cursor: pointer;
  font-size: 18px; color: var(--muted);
  transition: background .1s;
}

.dash-slideover-close:hover {
  background: var(--tint);
}

.dash-slideover-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.dash-filter-chip {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 500;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .12s;
}

.dash-filter-chip:hover {
  border-color: var(--vcg);
  color: var(--ink);
}

.dash-filter-chip.active {
  background: var(--vcg-d);   /* #F8: --vcg is 3:1 behind white in dark */
  color: #fff;
  border-color: var(--vcg);
}

.dash-slideover-search {
  flex: 1; min-width: 120px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  background: var(--row-hdr);
  outline: none;
  transition: border-color .12s;
}

.dash-slideover-search:focus {
  border-color: var(--vcg);
}

.dash-slideover-body {
  flex: 1; overflow-y: auto;
  padding: 12px 20px;
}

.dash-slideover-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: var(--fs-base);
}

.dash-so-item {
  display: block;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--row-hdr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: background .1s, border-color .1s;
}

.dash-so-item:hover {
  background: var(--surface);
  border-color: var(--line-dk);
}

.dash-so-item-top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}

.dash-so-item-kind {
  font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px;
  padding: 1px 5px;
  border-radius: 3px;
  color: #fff;
}

.dash-so-item-title {
  font-size: var(--fs-base); font-weight: 500;
  flex: 1;
  min-width: 0;   /* flex children default to min-width:auto, which blocks the ellipsis */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dash-so-item-meta {
  display: flex; gap: 12px;
  font-size: var(--fs-xs); color: var(--muted);
}

.dash-so-item-age {
  font-weight: 600;
}

.dash-so-item-age.overdue { color: var(--red); }

.dash-so-item-status {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase;
}

/* ── Sparkline SVG ───────────────────────────────────────── */

.dash-sparkline svg {
  display: block;
}

/* ── Loading / Error states ──────────────────────────────── */

.dash-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 400px;
  color: var(--muted);
  gap: 12px;
}

.dash-loading-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--line);
  border-top-color: var(--vcg);
  border-radius: 50%;
  animation: dashSpin .8s linear infinite;
}

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

.dash-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 400px; gap: 12px;
  text-align: center;
}

.dash-error-icon {
  font-size: 40px;
}

.dash-error-msg {
  font-size: 14px; color: var(--muted);
  max-width: 400px;
}

.dash-retry-btn {
  padding: 8px 20px;
  background: var(--vcg-d);   /* #F8: --vcg is 3:1 behind white text in dark */
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: var(--fs-base); font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}

.dash-retry-btn:hover { background: var(--vcg-d); }

/* ── Change Events ───────────────────────────────────────── */

.dash-ce-page {
  max-width: var(--content-w-wide);   /* #F11 */
  margin: 0 auto;
  padding: var(--pad);
}

.dash-ce-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}

.dash-ce-header h2 {
  font-size: 20px; font-weight: 700; margin: 0;
  color: var(--ink);
}

.dash-ce-create-btn {
  padding: 8px 16px;
  background: var(--vcg-d);   /* #F8: fill behind white text */
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: var(--fs-base); font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}

.dash-ce-create-btn:hover { background: var(--vcg-d); }

.dash-ce-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}

.dash-ce-select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  background: var(--surface-2);
  color: var(--ink);
  outline: none;
}

.dash-ce-search {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  background: var(--surface-2);
  flex: 1; min-width: 160px;
  outline: none;
}

.dash-ce-search:focus,
.dash-ce-select:focus {
  border-color: var(--vcg);
}

.dash-ce-table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.dash-ce-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

.dash-ce-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted);
  background: var(--row-hdr);
  border-bottom: 1px solid var(--line);
}

.dash-ce-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink);
}

.dash-ce-table tr:last-child td { border-bottom: none; }

.dash-ce-table tr:hover td {
  background: var(--row-hdr);
}

.dash-ce-table .dash-ce-title-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

.dash-ce-table .dash-ce-title-link:hover {
  text-decoration: underline;
}

.dash-ce-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .3px;
}

.dash-ce-status-badge.open    { background: var(--blue-bg); color: var(--blue); }
.dash-ce-status-badge.pending { background: var(--warn-fill); color: var(--warn-ink); }
.dash-ce-status-badge.closed  { background: var(--ok-fill); color: var(--ok-ink); }
.dash-ce-status-badge.void    { background: var(--tint); color: var(--muted); }

.dash-ce-cost {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.dash-ce-cost.negative { color: var(--red); }
.dash-ce-cost.positive { color: var(--green); }

/* CE Form */

.dash-ce-form-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--pad);
}

.dash-ce-form-back {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-md); color: var(--muted);
  text-decoration: none;
  margin-bottom: 12px;
  cursor: pointer;
  background: none; border: none;
  padding: 0;
}

.dash-ce-form-back:hover { color: var(--ink); }

.dash-ce-form-title {
  font-size: 20px; font-weight: 700;
  margin: 0 0 20px;
  color: var(--ink);
}

.dash-ce-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.dash-ce-field {
  margin-bottom: 16px;
}

.dash-ce-field label {
  display: block;
  font-size: var(--fs-md); font-weight: 600; color: var(--muted);
  margin-bottom: 4px;
}

.dash-ce-field label .req { color: var(--red); }

.dash-ce-field input[type="text"],
.dash-ce-field input[type="number"],
.dash-ce-field textarea,
.dash-ce-field select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-family: inherit;
  background: var(--row-hdr);
  color: var(--ink);
  outline: none;
  transition: border-color .12s;
  box-sizing: border-box;
}

.dash-ce-field input:focus,
.dash-ce-field textarea:focus,
.dash-ce-field select:focus {
  border-color: var(--vcg);
}

.dash-ce-field textarea {
  min-height: 100px;
  resize: vertical;
}

.dash-ce-field-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dash-ce-form-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.dash-ce-btn-primary {
  padding: 8px 20px;
  background: var(--vcg-d);   /* #F8: fill behind white text */
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: var(--fs-base); font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}

.dash-ce-btn-primary:hover { background: var(--vcg-d); }
.dash-ce-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.dash-ce-btn-secondary {
  padding: 8px 20px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-base); font-weight: 500;
  cursor: pointer;
  transition: all .12s;
}

.dash-ce-btn-secondary:hover {
  border-color: var(--line-dk);
  background: var(--row-hdr);
}

.dash-ce-form-msg {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: var(--fs-base);
  margin-bottom: 16px;
}

.dash-ce-form-msg.success { background: var(--ok-fill); color: var(--ok-ink); }
.dash-ce-form-msg.error   { background: var(--red-bg); color: var(--red); }

.dash-ce-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
  font-size: var(--fs-base);
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1200px) {
  .dash-metric-grid { grid-template-columns: repeat(4, 1fr); }
  .dash-charts-row { grid-template-columns: 1fr; }
  .dash-very-old-list { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .dash-metric-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-topbar { gap: 12px; padding: 0 12px; }
  .dash-nav { margin-left: 8px; }
  .dash-nav a { font-size: var(--fs-md); padding: 5px 10px; }
  .dash-brand-name { display: none; }
  .dash-slideover { width: 100%; max-width: 100vw; }
  .dash-ce-field-row { grid-template-columns: 1fr; }
}

/* #780: a live Procore read that failed. Warn-toned, and never mistaken for an
   empty count: the banner names what was left out, the tile says "partial" or
   shows no number at all, and the heatmap cell is a "?" rather than blank. */
.dash-unread {
  margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--warn-ink); border-radius: 6px;
  background: var(--warn-fill); color: var(--warn-ink);
  font-size: var(--fs-sm);
}
.dash-unread-head { font-weight: 600; }
.dash-unread ul { margin: 6px 0 0; padding-left: 18px; }
.dash-unread-why, .dash-unread-foot { opacity: .85; }
.dash-unread-foot { margin-top: 6px; font-size: var(--fs-xs); }
.dash-metric-tile .dash-tile-partial { color: var(--warn-ink); font-weight: 600; }
.dash-tile-unread .dash-tile-value { color: var(--muted); }
.dash-heatmap-cell.dash-heatmap-unread {
  background: var(--warn-fill); color: var(--warn-ink); font-weight: 700; cursor: help;
}