/*
 * Dashboards (B-13 Organisation at a glance, B-15 My department, B-16 My day): the page grid and the few pieces the
 * dashboards share that the component library (vt-ui.css) doesn't have: list rows, the week strip, meters and the
 * type bar. Tokens only, so light and dark work without extra rules; no fixed heights (cards stretch in the grid);
 * everything stacks into one column on a phone.
 */

/* ── Page grid: 12 columns from 992 px, one column below ── */
.vt-dash { display: flex; flex-direction: column; gap: var(--vt-space-6); min-width: 0; }
.vt-dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vt-space-6); align-items: stretch; }
.vt-dash-grid > * { min-width: 0; }
.vt-dash-stack { display: flex; flex-direction: column; gap: var(--vt-space-6); min-width: 0; }
.vt-dash-stack > * { flex: 1 1 auto; }
@media (min-width: 992px) {
  .vt-dash-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .vt-dash-grid > * { grid-column: span 12; }
  .vt-dash-grid > .vt-span-4 { grid-column: span 4; }
  .vt-dash-grid > .vt-span-5 { grid-column: span 5; }
  .vt-dash-grid > .vt-span-6 { grid-column: span 6; }
  .vt-dash-grid > .vt-span-7 { grid-column: span 7; }
  .vt-dash-grid > .vt-span-8 { grid-column: span 8; }
}
/* Cards fill their grid cell, so a row never has a short card beside a tall one. */
.vt-dash-grid > * > .vt-card, .vt-dash-grid > .vt-card { height: 100%; }
.vt-dash .vt-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
/* The heat map keeps a readable size in a wide card instead of growing with it. */
.vt-dash-matrix { max-width: 480px; margin-inline: auto; }
.vt-dash-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vt-space-3); }

/* ── List rows (attention, agenda, team, reviews) ── */
.vt-dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vt-dash-row { display: flex; align-items: center; gap: var(--vt-space-3); padding: var(--vt-space-3) 0; border-top: 1px solid var(--vt-border); min-width: 0; }
.vt-dash-row:first-child { border-top: 0; padding-top: 0; }
.vt-dash-row:last-child { padding-bottom: 0; }
.vt-dash-row__main { flex: 1 1 auto; min-width: 0; }
.vt-dash-row__title { display: block; margin: 0; color: var(--vt-text); font-size: var(--vt-text-md); font-weight: 600; line-height: var(--vt-leading-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.vt-dash-row__title { text-decoration: none; }
a.vt-dash-row__title:hover, a.vt-dash-row__title:focus-visible { color: var(--vt-link); text-decoration: underline; }
.vt-dash-row__meta { display: block; margin-top: 2px; color: var(--vt-text-muted); font-size: var(--vt-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-dash-row__aside { flex: none; display: flex; align-items: center; gap: var(--vt-space-2); color: var(--vt-text-muted); font-size: var(--vt-text-sm); white-space: nowrap; }
.vt-dash-row__time { flex: none; width: 52px; color: var(--vt-text); font-size: var(--vt-text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.vt-dash-icon { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--vt-surface-muted); color: var(--vt-text-muted); }
.vt-dash-more { display: inline-flex; margin-top: var(--vt-space-4); font-size: var(--vt-text-sm); font-weight: 600; }
.vt-dash-note { margin: 0; color: var(--vt-text-muted); font-size: var(--vt-text-sm); }
.vt-dash-figure { font-family: var(--vt-font-display); font-size: var(--vt-text-2xl); font-weight: 600; color: var(--vt-text); font-variant-numeric: tabular-nums; line-height: 1.15; }
@media (max-width: 575.98px) {
  .vt-dash-row { flex-wrap: wrap; }
  .vt-dash-row__aside { width: 100%; justify-content: flex-start; padding-left: 44px; white-space: normal; }
}

/* ── The type of an agenda line (C-02): a 4 px bar, one categorical colour each, named in the legend ── */
.vt-type-bar { flex: none; align-self: stretch; width: 4px; min-height: 32px; border-radius: 2px; background: var(--vt-neutral); }
.vt-type-bar--review { background: var(--vt-cat-1); }
.vt-type-bar--control { background: var(--vt-cat-2); }
.vt-type-bar--task { background: var(--vt-cat-3); }
.vt-legend { display: flex; flex-wrap: wrap; gap: var(--vt-space-2) var(--vt-space-4); margin: 0 0 var(--vt-space-4); padding: 0; list-style: none; color: var(--vt-text-muted); font-size: var(--vt-text-xs); }
.vt-legend li { display: inline-flex; align-items: center; gap: 6px; }
.vt-legend .vt-type-bar { width: 10px; min-height: 10px; height: 10px; border-radius: 3px; }

/* ── The week strip (C-02): Monday to Sunday, today in the brand's soft colour ── */
.vt-daystrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--vt-space-1); margin-bottom: var(--vt-space-4); }
.vt-day { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: var(--vt-space-2) 0; border: 1px solid transparent; border-radius: var(--vt-radius); background: transparent; color: var(--vt-text-muted); font-size: var(--vt-text-xs); cursor: pointer; }
.vt-day:hover { background: var(--vt-surface-muted); }
.vt-day:focus-visible { outline: none; box-shadow: var(--vt-focus-ring); }
.vt-day__num { color: var(--vt-text); font-family: var(--vt-font-display); font-size: var(--vt-text-lg); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.vt-day__count { min-height: 16px; color: var(--vt-text-muted); font-variant-numeric: tabular-nums; }
.vt-day--today { background: var(--vt-primary-soft); color: var(--vt-primary); }
.vt-day--today .vt-day__num { color: var(--vt-primary); }
.vt-day[aria-pressed="true"] { border-color: var(--vt-primary); }

/* ── Meters: a done-against-planned bar, with an optional marker (where you'd expect to be by now) ── */
.vt-meter { display: flex; align-items: center; gap: var(--vt-space-2); min-width: 0; }
.vt-meter__track { position: relative; flex: 1 1 auto; min-width: 48px; height: 6px; border-radius: 3px; background: var(--vt-surface-muted); }
.vt-meter__fill { position: absolute; inset: 0 auto 0 0; max-width: 100%; border-radius: 3px; background: var(--vt-primary); }
.vt-meter__fill--good { background: var(--vt-success); }
.vt-meter__fill--warning { background: var(--vt-warning); }
.vt-meter__fill--bad { background: var(--vt-danger); }
.vt-meter__mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--vt-text); }
.vt-meter__text { flex: none; color: var(--vt-text-muted); font-size: var(--vt-text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Small things ── */
.vt-chips { display: flex; flex-wrap: wrap; gap: var(--vt-space-2); }
.vt-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 4px 10px; border: 1px solid var(--vt-border); border-radius: var(--vt-radius-pill); background: var(--vt-surface); color: var(--vt-text); font-size: var(--vt-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-levels { display: flex; flex-wrap: wrap; gap: 4px; }
.vt-dept-cell { display: flex; align-items: center; gap: var(--vt-space-3); min-width: 0; }
.vt-dept-cell a { font-weight: 600; }
.vt-dash-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--vt-space-3); margin-bottom: var(--vt-space-4); }
.vt-dash-filters .vt-field { margin: 0; min-width: min(100%, 220px); }
.vt-switch { display: inline-flex; align-items: center; gap: var(--vt-space-2); color: var(--vt-text); font-size: var(--vt-text-sm); }
.vt-report-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--vt-space-2); margin: var(--vt-space-4) 0; }
.vt-report-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--vt-space-2) 0; border-radius: var(--vt-radius-sm); background: var(--vt-surface-muted); color: var(--vt-text-muted); font-size: var(--vt-text-xs); }
.vt-report-day--done { background: var(--vt-success-soft); color: var(--vt-success-text); }
.vt-report-day--later { background: transparent; border: 1px dashed var(--vt-border-strong); }
.vt-quote { margin: var(--vt-space-2) 0 0; padding-left: var(--vt-space-3); border-left: 3px solid var(--vt-border-strong); color: var(--vt-text-muted); font-size: var(--vt-text-sm); }

/* ── Phones (B-40): two figures a row, so the first screen isn't spent on tiles ── */
@media (max-width: 575.98px) {
  .vt-dash .vt-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vt-space-3); }
  .vt-dash .vt-kpi { padding: var(--vt-space-3); }
  .vt-dash .vt-kpi__value { font-size: var(--vt-text-2xl); }
  .vt-dash .vt-kpi__spark { display: none; }
}

/* ── Department cards (C-07) ── */
.vt-dept-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--vt-space-3) var(--vt-space-4); align-items: center; margin: var(--vt-space-4) 0 0; }
.vt-dept-facts dt { margin: 0; color: var(--vt-text-muted); font-size: var(--vt-text-sm); font-weight: 500; }
.vt-dept-facts dd { margin: 0; min-width: 0; text-align: end; }
.vt-dept-facts dd .vt-meter, .vt-dept-facts dd .vt-levels { justify-content: flex-end; }

/* ── Activity (C-10): day headings and the lines' text ── */
.vt-activity-day { margin: 0 0 var(--vt-space-3); color: var(--vt-text-muted); font-family: var(--vt-font-body); font-size: var(--vt-text-sm); font-weight: 600; }
.vt-activity-text { display: block; color: var(--vt-text); font-size: var(--vt-text-md); overflow-wrap: anywhere; }