/* dashboard.css — owned by WP3 (home dashboard: greeting banner, 3-zone grid,
 * metric cards, activity feed, charts, regulatory-watch hero, compliance table).
 * Ported verbatim from eudr-x operator-react.css (home-* → ct-home-*) with the
 * navy substitutions of spec-widgets §1.2 — geometry, clamps, z-indices and
 * keyframe timings are unchanged. Dark-mode blocks (spec-widgets §2.8) and the
 * widget skeleton geometry (§9) live here; token-driven surfaces flip via
 * dark.css (WP7). */

/* ═══════════════════ SCROLL RELEASE / PAGE-ROOT ═══════════════════
   The dashboard mounts into #page-root (the shell's scroll host, layout.css).
   Free it from the 1120px content cap and make it a flex column so .ct-home-tab
   can fill. On ≥1441px the grid fits the viewport (no page scroll); below, the
   tab releases its height lock and #page-root scrolls (eudr-x `.gt-main:has`
   pattern, re-scoped to `.ct-main:has(.ct-home-tab)`). */
.ct-main > #page-root.ct-dashboard {
  max-width: none;
  display: flex;
  flex-direction: column;
}

.ct-home-tab {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Height comes from content — nothing here is height-locked to the viewport
     any more, so there is no growth to negotiate, only a shrink to forbid (the
     compliance section below is a flex sibling of #page-root and would otherwise
     crush these rows instead of pushing the page into scroll). */
  flex: 0 0 auto;
  padding: 0 2px 4px;
}

/* ═══════════════════ WELCOME BANNER (operator-react.css:3130-3208) ═══════════════════ */
.ct-home-welcome {
  background: linear-gradient(135deg, #16293d 0%, #1f3c54 55%, #28506e 100%);
  border-radius: var(--radius-fluid);
  /* 18px/24px around three stacked lines made this band ~130px tall — the single
     largest element on the dashboard, spent on the user's own name and today's
     date. Two lines, tighter padding, ~74px. */
  padding: 12px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(12, 25, 37, 0.22);
  flex-shrink: 0;
}
.ct-home-welcome-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 1;
}
/* Inline inside the h1 now ("Good afternoon, Demo QHSE" on one line): the
   greeting is the quiet half, the name the loud half. */
.ct-home-welcome-greeting {
  color: rgba(209, 223, 232, 0.62);
  font-weight: 400;
}
.ct-home-welcome-name {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  color: #d1dfe8;
  line-height: 1.3;
  margin: 0 0 2px;
  font-weight: 700;
}
.ct-home-welcome-date {
  font-size: 0.76rem;
  color: rgba(209, 223, 232, 0.5);
  font-weight: 400;
  margin: 0;
}
/* CTA pill (operator-react.css:3182-3208) */
.ct-home-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(8px);
  color: #d1dfe8;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.ct-home-start-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.ct-home-start-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ═══════════════════ CONTENT ROWS ═══════════════════
   Was a 2×2 areas grid ("map right / btm right") whose ROWS were fractions of
   the viewport (1.3fr / 0.8fr) with min-heights per breakpoint. Fractional rows
   hand every cell the same height whether it holds eight regulatory events or
   one, so the regulatory-watch card sat on ~200px of blank space and the
   "0 open campaigns" tile was stretched into a tall empty box. Height comes from
   content here; the page scrolls in #page-root as it always did. The rows:
     .ct-ready       — the guided readiness card (the page's spine)
     .ct-home-work   — the two chronological lists, side by side
     .ct-home-charts — three comparable charts, side by side           */
.ct-home-work {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 10px;
  /* start, not stretch: these two lists grow independently, and stretching the
     shorter one is exactly how the old grid manufactured empty space. */
  align-items: start;
}
.ct-home-charts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  /* stretch IS right here — three charts of the same kind should share a
     baseline, and none of them can be empty (each renders its own zero state). */
}
.ct-home-charts .ct-home-dds-bars { gap: 6px; }
.ct-home-charts .ct-home-dds-row-bar { height: 10px; }

/* Card footer link (regulatory watch → Changes) */
.ct-home-card-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  font-size: var(--text-sm);
}

/* ═══════════════════ GUIDED READINESS CARD ═══════════════════
   One card that answers "am I OK / what do I do / where am I". It replaced a KPI
   tile row and then a five-stage pipeline strip; both were status displays that
   showed state without ever asking for an action. The order inside the card is
   the order the questions get asked:
     heading + "2 of 4 steps done" + the nearest deadline   → am I OK
     segmented bar                                         → how far along
     DO THIS NEXT + one button                             → what do I do
     the four steps with a you-are-here marker             → where am I
   The bar is SEGMENTED, one segment per step, deliberately not a percentage:
   confirming 31 extracted values and clicking "build package" are not the same
   size of job, and a percentage across uneven steps misstates how close you are. */
.ct-ready {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-fluid);
  box-shadow: var(--shadow-md);
  padding: 18px 22px 16px;
}
.ct-ready-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.ct-ready-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--primary);
  margin: 0;
  line-height: 1.25;
}
.ct-ready-count {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 2px;
}
.ct-ready-intro {
  margin: 10px 0 0;
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 80ch;
}

/* Nearest deadline, promoted into the header: "244 days left" only means
   something next to how far from ready you are. */
.ct-ready-due {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
  font-size: var(--text-sm);
}
.ct-ready-due:hover { background: var(--surface-3); }
.ct-ready-due-count {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ct-ready-due-title { color: var(--text-muted); }
.ct-ready-due .ct-deadline-overdue { color: var(--confirmed); }
.ct-ready-due .ct-deadline-urgent { color: var(--potential); }

/* Segmented bar: one segment per step. */
.ct-ready-bar {
  display: flex;
  gap: 4px;
  margin: 14px 0 0;
}
/* The empty-segment colour is a variable, not a background the dark-mode block
   re-declares: `body.dark-mode .ct-ready-seg` outweighs `.ct-ready-seg--done`
   (two classes beats one), so overriding the background there painted COMPLETED
   segments grey in dark mode. Theming the variable can't reach the state. */
.ct-ready-seg {
  --seg-empty: rgba(63, 84, 105, 0.14);
  flex: 1 1 0;
  height: 6px;
  border-radius: 3px;
  background: var(--seg-empty);
}
.ct-ready-seg--done { background: var(--clear); }
.ct-ready-seg--current {
  /* Half-filled reads as "in progress" without claiming a false fraction. */
  background: linear-gradient(90deg, var(--potential) 0 50%, var(--seg-empty) 50% 100%);
}

/* The prescriptive block — the only button on the card. */
.ct-ready-action {
  margin-top: 16px;
  padding: 14px 16px 16px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--accent);
}
.ct-ready-action--clear {
  border-color: var(--clear-edge);
  background: var(--clear-tint);
}
.ct-ready-action-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.ct-ready-action-title {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}
.ct-ready-action-why {
  margin: 4px 0 12px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 88ch;
}
.ct-ready-action-cta {
  display: inline-flex;
  text-decoration: none;
}
.ct-ready-action--clear .ct-ready-action-why { margin-bottom: 0; }

/* The four steps. Done = check + struck-back tone, current = highlighted with a
   "you are here" tag, upcoming = quiet. */
.ct-ready-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ct-ready-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
}
.ct-ready-item:first-child { border-top: none; }
.ct-ready-check,
.ct-ready-num {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 800;
}
.ct-ready-check {
  background: var(--clear);
  color: #fff;
}
.ct-ready-num {
  border: 1.5px solid var(--border-strong);
  color: var(--text-muted);
}
.ct-ready-item-title {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  min-width: 0;
}
.ct-ready-item-title:hover { text-decoration: underline; }
.ct-ready-item-meta {
  margin-left: auto;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ct-ready-here {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--potential);
  border: 1px solid color-mix(in srgb, var(--potential) 45%, transparent);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  white-space: nowrap;
}
.ct-ready-item--done .ct-ready-item-title { color: var(--text-muted); }
.ct-ready-item--current {
  background: color-mix(in srgb, var(--potential) 8%, transparent);
}
.ct-ready-item--current .ct-ready-item-title { font-weight: 800; }
.ct-ready-item--todo .ct-ready-item-title,
.ct-ready-item--todo .ct-ready-item-meta { color: var(--text-subtle); }

/* Readiness is a count of steps this product can see, not a legal position —
   the same care the verdicts take about provisional reference data. */
.ct-ready-caveat {
  margin: 12px 0 0;
  font-size: var(--text-xs);
  color: var(--text-subtle);
  line-height: 1.45;
}
.ct-ready-flags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ct-ready-flags-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.ct-ready--firstrun {
  max-width: 820px;
}
.ct-ready-skel-bar {
  height: 6px;
  border-radius: 3px;
  width: 100%;
}

/* ═══════════════════ CHART CARDS (operator-react.css:3254-3315) ═══════════════════ */
.ct-home-chart-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-fluid);
  padding: 18px 20px 16px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}
.ct-home-chart-card--clickable {
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.ct-home-chart-card--clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.ct-home-chart-card:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.ct-home-chart-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}
.ct-home-chart-title svg { flex-shrink: 0; }

/* Operator typography bump (operator-react.css:3792-3818) */
.ct-home-tab .ct-home-chart-title { font-size: 1rem; }
.ct-home-tab .ct-home-dds-total-num { font-size: 1.55rem; }
.ct-home-tab .ct-home-dds-total-label { font-size: 0.88rem; }
.ct-home-tab .ct-home-dds-row-label { font-size: 0.88rem; }
.ct-home-tab .ct-home-dds-row-count { font-size: 0.92rem; }
.ct-home-tab .ct-home-legend-item { font-size: 0.86rem; }
.ct-home-tab .ct-home-legend-name { font-size: 0.9rem; }
.ct-home-tab .ct-home-legend-pct { font-size: 0.84rem; }
@media (min-width: 769px) and (max-width: 1399px) {
  .ct-home-tab .ct-home-chart-title { font-size: 0.94rem; }
  .ct-home-tab .ct-home-dds-total-num { font-size: 1.4rem; }
  .ct-home-tab .ct-home-dds-total-label { font-size: 0.82rem; }
  .ct-home-tab .ct-home-dds-row-label { font-size: 0.82rem; }
  .ct-home-tab .ct-home-dds-row-count { font-size: 0.86rem; }
  .ct-home-tab .ct-home-legend-item { font-size: 0.8rem; }
  .ct-home-tab .ct-home-legend-name { font-size: 0.82rem; }
  .ct-home-tab .ct-home-legend-pct { font-size: 0.78rem; }
}

/* ═══════════════════ DONUT (operator-react.css:3318-3374) ═══════════════════ */
.ct-home-donut-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
.ct-home-donut-wrap > svg {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}
.ct-home-donut-num {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 800;
  fill: var(--primary);
}
.ct-home-donut-unit {
  font-family: var(--font-sans);
  font-size: 8px;
  letter-spacing: 1.5px;
  fill: var(--text-muted);
}
.ct-home-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.ct-home-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  min-width: 0;
}
.ct-home-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ct-home-legend-name {
  flex: 1;
  color: var(--text);
  font-weight: 500;
  font-size: 0.79rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-home-legend-count {
  font-weight: 700;
  color: var(--text);
  min-width: 18px;
  text-align: right;
}
.ct-home-legend-pct {
  font-size: 0.72rem;
  color: var(--text-muted);
  min-width: 34px;
  text-align: right;
}

/* ═══════════════════ DDS BAR LIST (operator-react.css:3536-3609) ═══════════════════ */
.ct-home-dds-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.ct-home-dds-total-num {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.ct-home-dds-total-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.ct-home-dds-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  justify-content: space-evenly;
}
.ct-home-dds-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ct-home-dds-row-label {
  width: 120px;
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
  line-height: 1.3;
}
.ct-home-dds-row-bar {
  flex: 1;
  height: 16px;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.ct-home-dds-bar-fill {
  height: 100%;
  border-radius: 4px;
  min-width: 0;
}
.ct-home-dds-row-count {
  width: 26px;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
}

/* ═══════════════════ ACTIVITY FEED (spec-widgets §5.2, navy) ═══════════════════ */
.ct-home-activity-feed {
  border-color: rgba(82, 104, 120, 0.28);
  overflow: hidden;
}
.ct-home-activity-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.ct-home-activity-list { list-style: none; margin: 0; padding: 0; }
.ct-home-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 14px;
  position: relative;
}
.ct-home-activity-item:last-child { padding-bottom: 0; }
.ct-home-activity-rail {
  position: relative;
  width: 9px;
  flex-shrink: 0;
  align-self: stretch;
  margin-top: 5px;
}
.ct-home-activity-dot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 13%, transparent);
  position: relative;
  z-index: 1;
}
.ct-home-activity-line {
  position: absolute;
  top: 13px;
  bottom: -14px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(63, 84, 105, 0.22);
}
.ct-home-activity-item:last-child .ct-home-activity-line { display: none; }
.ct-home-activity-body { flex: 1; min-width: 0; }
.ct-home-activity-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-home-activity-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.ct-home-activity-empty {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0;
}

/* ═══════════════════ REGULATORY WATCH HERO (chart-card chrome + timeline) ═══════════════════ */
.ct-home-regwatch-card {
  overflow: hidden;
  /* NOT align-self: stretch. That was left over from the fractional grid and it
     overrode the row's `align-items: start`, so this card kept matching the
     height of whatever sat beside it and its flex:1 body absorbed the difference
     as blank space — the void this rebuild set out to remove, reintroduced by one
     line. Content height; a ragged bottom edge next to a taller neighbour is the
     honest result. */
  align-self: start;
}
.ct-home-regwatch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.ct-home-regwatch-header .ct-home-chart-title { margin-bottom: 0; }
.ct-home-regwatch-body {
  flex: 1;
  min-height: 0;
  /* Cap, don't stretch: eight regulatory events scroll inside 260px instead of
     making the card (and the row it shares) 600px tall, and one event leaves the
     card 100px tall instead of holding 260px of blank space open. */
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.ct-home-regwatch-body .ct-home-activity-label { white-space: normal; }
.ct-home-recheck {
  padding: 6px 12px;
  font-size: 0.78rem;
  gap: 6px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  /* "Επανέλεγχος χαρτοφυλακίου" ran past the card at 390px */
  .ct-home-recheck {
    flex-shrink: 1;
    min-width: 0;
    white-space: normal;
  }
}
/* Reference freshness chips (styled like the eudr-x .sc-legend chips, navy) */
.ct-home-ref {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.ct-home-ref-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 6px;
}
.ct-home-ref-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ct-home-ref-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(82, 104, 120, 0.1);
  border: 1px solid rgba(82, 104, 120, 0.24);
  font-size: 0.7rem;
}
.ct-home-ref-chip-code {
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.2px;
}
.ct-home-ref-chip-meta {
  color: var(--text-muted);
  font-size: 0.66rem;
}

/* ═══════════════════ COMPLIANCE SECTION (below the grid) ═══════════════════ */
.ct-home-below {
  margin-top: 14px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ct-home-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Section header: title on the left, its filters on the right, one row. */
.ct-home-below-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.ct-home-filters {
  margin: 0;
  gap: var(--space-3);
}
/* The regime select sized itself to its longest option and came out ~370px next
   to a 137px status select. Equal, bounded lanes instead. */
.ct-home-filters .ct-question {
  min-width: 0;
}
.ct-home-filters select {
  width: 200px;
  max-width: 100%;
}

/* ═══════════════════ WIDGET SKELETON (spec-widgets §9) ═══════════════════ */
.ct-home-skel-banner {
  border-radius: var(--radius-fluid);
  flex-shrink: 0;
}
.ct-home-skel-body {
  flex: 1 1 auto;
  min-height: 44px;
  margin-top: 10px;
}

/* ═══════════════════ RESPONSIVE ═══════════════════
   Five tiers (1599/1440/1280/1024/768/480) collapsed to three. The old ones
   existed to re-negotiate viewport height locks and per-breakpoint min-heights
   that no longer exist: with content-driven rows there is nothing to unlock, so
   the only decisions left are how many columns each row gets. */

/* Laptop chrome: same layout, tighter card padding and type. */
@media (min-width: 1025px) and (max-width: 1599px) {
  .ct-ready { padding: 16px 18px 14px; }
  .ct-ready-action { padding: 12px 14px 14px; }
  .ct-home-chart-card { padding: 14px 16px 12px; }
  .ct-home-tab .ct-home-chart-title { font-size: 0.78rem; margin-bottom: 5px; }
}

/* Tablet landscape / small laptop: the two lists stack, charts drop to 2-up (the
   donut keeps the wider cell). The pipeline stays one row — five stages at
   ~130px each still fit, and breaking the chain is what would cost the meaning. */
@media (max-width: 1024px) {
  .ct-home-work { grid-template-columns: minmax(0, 1fr); }
  .ct-home-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-home-charts .ct-home-donut-card { grid-column: 1 / -1; }
}

/* Tablet portrait and below: one card per row, and the pipeline wraps to a 2-up
   grid — below ~700px five columns would each be ~90px, too narrow for a label
   and a number. Reading order still runs 1→5, so the chain survives the wrap. */
@media (max-width: 768px) {
  .ct-home-charts { grid-template-columns: minmax(0, 1fr); }
  .ct-home-charts .ct-home-donut-card { grid-column: auto; }
  .ct-home-welcome { padding: 16px 18px; }
  .ct-home-welcome-content { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ct-home-welcome-name { font-size: 1.25rem; }
  .ct-home-start-btn { width: 100%; justify-content: center; }
  .ct-ready { padding: 14px 16px 14px; }
  /* The step rows wrap rather than squeezing the count against the title. */
  .ct-ready-item { flex-wrap: wrap; row-gap: 2px; }
  .ct-ready-item-meta { margin-left: 28px; text-align: left; }
  .ct-ready-action-cta { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .ct-home-tab { gap: 8px; }
  .ct-home-tab .ct-home-welcome { padding: 14px 16px; }
}

/* ═══════════════════ DARK MODE (spec-widgets §2.8, navy) ═══════════════════ */
body.dark-mode .ct-home-welcome {
  background: linear-gradient(135deg, #0a1420 0%, #0d1f30 55%, #10283b 100%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(82, 104, 120, 0.18);
}
body.dark-mode .ct-home-welcome-name { color: #c6d6e2; }
body.dark-mode .ct-home-welcome-greeting { color: rgba(180, 200, 215, 0.65); }
body.dark-mode .ct-home-welcome-date { color: rgba(180, 200, 215, 0.42); }
body.dark-mode .ct-home-start-btn { color: #c6d6e2; }
body.dark-mode .ct-ready,
body.dark-mode .ct-home-chart-card {
  background: rgba(10, 22, 38, 0.5);
  border-color: rgba(82, 104, 120, 0.18);
}
/* Readiness card in dark mode: the action block and step rows sit ON the card,
   so they must be lighter than it — the light-mode --surface-2 would vanish. */
body.dark-mode .ct-ready-title { color: #c6d6e2; }
body.dark-mode .ct-ready-action,
body.dark-mode .ct-ready-due {
  background: rgba(255, 255, 255, 0.04);
}
body.dark-mode .ct-ready-due { border-color: rgba(82, 104, 120, 0.22); }
body.dark-mode .ct-ready-action--clear { background: var(--clear-tint); }
body.dark-mode .ct-ready-due:hover { background: rgba(255, 255, 255, 0.07); }
body.dark-mode .ct-ready-seg { --seg-empty: rgba(255, 255, 255, 0.12); }
body.dark-mode .ct-ready-item { border-top-color: rgba(82, 104, 120, 0.22); }
body.dark-mode .ct-ready-item--current { background: color-mix(in srgb, var(--potential) 14%, transparent); }
body.dark-mode .ct-home-dds-total-num { color: #c6d6e2; }
body.dark-mode .ct-home-donut-wrap { --primary: #c6d6e2; --text-muted: #9aacba; }
body.dark-mode .ct-home-legend-name,
body.dark-mode .ct-home-legend-count { color: var(--text); }
body.dark-mode .ct-home-legend-pct { color: var(--text-muted); }
body.dark-mode .ct-home-dds-row-label,
body.dark-mode .ct-home-dds-row-count { color: var(--text); }
body.dark-mode .ct-home-dds-row-bar {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .ct-home-activity-line { background: rgba(154, 172, 186, 0.22); }
body.dark-mode .ct-home-ref-chip {
  background: rgba(110, 132, 150, 0.14);
  border-color: rgba(110, 132, 150, 0.3);
}

/* ═══════════════════════ Deadline strip (home + ops) ═══════════════════════ */
/* Sits directly under the welcome banner: the countdown is the one number on
   the dashboard that changes behaviour, so it outranks every chart below it. */
.ct-deadline-strip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.ct-deadline-strip--empty {
  color: var(--text-muted);
}
.ct-deadline-strip-label {
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
}
/* Equal lanes rather than content-width items: with one deadline the strip was a
   full-width card with its content hugging the left third and ~600px of blank
   surface to the right, which reads as a rendering fault rather than a layout. */
.ct-deadline-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-3);
  flex: 1 1 auto;
}
@media (max-width: 900px) {
  .ct-deadline-list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
  /* Narrow: back to the stacked form — a countdown, a long regime name and a
     date do not fit on one phone-width line. */
  .ct-deadline-item:only-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}
.ct-deadline-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
}
.ct-deadline-item:hover {
  background: var(--surface-3);
}
/* A single deadline gets the whole strip, so lay it out as one row — countdown,
   what it is, then when, pushed to the right edge. Stacked, it left the right
   two-thirds of a full-width card empty. Two or three deadlines share the strip
   in lanes and stay stacked, where the compact form is the readable one. */
.ct-deadline-item:only-child {
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-4);
  padding: 8px var(--space-3);
}
.ct-deadline-item:only-child .ct-deadline-meta {
  flex: 1 1 auto;
}
.ct-deadline-item:only-child .ct-deadline-title {
  flex: 1 1 auto;
}
.ct-deadline-count {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  /* "244 days left" is one unit — it broke onto three lines when the flex row
     squeezed it on a phone. */
  white-space: nowrap;
  flex-shrink: 0;
}
.ct-deadline-meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.ct-deadline-title {
  font-weight: 600;
}
.ct-deadline-date {
  font-variant-numeric: tabular-nums;
  color: var(--text-subtle);
}
/* A statutory date the regime config has not had confirmed against the ΦΕΚ is
   never presented as fact — same rule the CMR verdicts follow. */
.ct-deadline-provisional {
  padding: 1px 6px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--text-subtle);
}
/* Severity dot ahead of the countdown (it replaced a 4px side stripe); the
   countdown text itself turns red / amber when overdue / urgent. */
.ct-deadline-item .ct-deadline-count::before,
.ct-ready-due-count::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--neutral-status);
}
.ct-deadline-overdue .ct-deadline-count::before,
.ct-ready-due-count.ct-deadline-overdue::before { background: var(--confirmed); }
.ct-deadline-urgent .ct-deadline-count::before,
.ct-ready-due-count.ct-deadline-urgent::before { background: var(--potential); }
.ct-deadline-soon .ct-deadline-count::before,
.ct-ready-due-count.ct-deadline-soon::before { background: var(--accent); }
.ct-deadline-ok .ct-deadline-count::before,
.ct-ready-due-count.ct-deadline-ok::before { background: var(--clear); }
.ct-deadline-overdue .ct-deadline-count {
  color: var(--confirmed);
}
.ct-deadline-urgent .ct-deadline-count {
  color: var(--potential);
}
/* Inline variant used in the ops tenant table cell. */
td > .ct-deadline {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
td > .ct-deadline-overdue {
  color: var(--confirmed);
}
td > .ct-deadline-urgent {
  color: var(--potential);
}