/* Dashboards: page tabs, filter bar, 12-column widget grid, widget kinds, customise panel */
.dash { display: flex; flex-direction: column; gap: calc(var(--m-space) * 4); }
.dash__tabs { display: flex; align-items: center; gap: calc(var(--m-space) * 1); overflow: visible; } /* the More menu must not be clipped */
.dash__tabs .tabs__items { display: flex; gap: calc(var(--m-space) * 1); min-width: 0; flex: 1; overflow: hidden; }
.tabs__more { margin-left: auto; position: relative; }
.tabs__item--more { cursor: pointer; background: none; border: 0; font: inherit; }
.dash__filters { display: flex; flex-wrap: wrap; gap: calc(var(--m-space) * 3); align-items: flex-start; padding: calc(var(--m-space) * 3) calc(var(--m-space) * 4); background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); }
.dash__filter { display: flex; flex-direction: column; gap: calc(var(--m-space) * 1); min-width: 12rem; }
.dash__filter-label { font-size: var(--m-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--m-fg-muted); }
.dash__filter-dates { display: flex; align-items: center; gap: calc(var(--m-space) * 2); }
.dash__filter-sep { color: var(--m-fg-muted); }
.dash__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(var(--m-space) * 4); }
.dash__cell { grid-column: span 12; min-width: 0; }
@media (min-width: 48rem) {
  .dash__cell--1 { grid-column: span 2; } .dash__cell--2 { grid-column: span 4; } .dash__cell--3 { grid-column: span 6; } .dash__cell--4 { grid-column: span 6; } .dash__cell--5 { grid-column: span 6; } .dash__cell--6 { grid-column: span 6; }
  .dash__cell--7, .dash__cell--8, .dash__cell--9, .dash__cell--10, .dash__cell--11, .dash__cell--12 { grid-column: span 12; }
}
@media (min-width: 64rem) {
  .dash__cell--1 { grid-column: span 1; } .dash__cell--2 { grid-column: span 2; } .dash__cell--3 { grid-column: span 3; } .dash__cell--4 { grid-column: span 4; } .dash__cell--5 { grid-column: span 5; } .dash__cell--6 { grid-column: span 6; } .dash__cell--7 { grid-column: span 7; } .dash__cell--8 { grid-column: span 8; } .dash__cell--9 { grid-column: span 9; } .dash__cell--10 { grid-column: span 10; } .dash__cell--11 { grid-column: span 11; }
}
.widget { display: flex; flex-direction: column; gap: calc(var(--m-space) * 3); padding: calc(var(--m-space) * 4); background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow); transition: box-shadow .3s; }
.widget--refreshed { box-shadow: var(--m-ring); }
.widget--kpi { padding: calc(var(--m-space) * 3.5) calc(var(--m-space) * 4); }
.widget__head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--m-space) * 2); }
.widget__title { margin: 0; display: flex; align-items: center; gap: calc(var(--m-space) * 2); font-size: var(--m-font-size-sm); font-weight: 600; color: var(--m-fg-strong); }
.widget__title i { color: var(--m-fg-muted); }
.widget__help { color: var(--m-fg-muted); font-weight: 400; cursor: help; }
.widget__actions { display: flex; gap: calc(var(--m-space) * 1); }
.widget__scroll { overflow-x: auto; }
.widget__empty, .widget__more { margin: 0; font-size: var(--m-font-size-sm); color: var(--m-fg-muted); }
/* KPI */
.kpi { display: flex; align-items: center; gap: calc(var(--m-space) * 3); --kpi-accent: var(--m-primary); }
.kpi--success { --kpi-accent: var(--m-success); } .kpi--warning { --kpi-accent: var(--m-warning); } .kpi--danger { --kpi-accent: var(--m-danger); } .kpi--info { --kpi-accent: var(--m-info); } .kpi--secondary { --kpi-accent: var(--m-fg-muted); }
.kpi__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; border-radius: var(--m-radius); background: color-mix(in oklab, var(--kpi-accent) 14%, var(--m-surface)); color: var(--kpi-accent); font-size: 1.1rem; }
.kpi__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.kpi__label { font-size: var(--m-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--m-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--m-fg-strong); font-variant-numeric: tabular-nums; }
.kpi__value a { color: inherit; }
.kpi__unit { margin-left: .25rem; font-size: var(--m-font-size-xs); font-weight: 500; color: var(--m-fg-muted); }
.kpi__delta { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--m-font-size-xs); color: var(--m-fg-muted); }
.kpi__delta--up { color: var(--m-success-ink); } .kpi__delta--down { color: var(--m-danger-ink); }
.kpi__delta small { color: var(--m-fg-muted); }
.kpi__trend { width: 5rem; height: 1.75rem; flex: 0 0 auto; color: var(--kpi-accent); }
/* Chart */
.chart { position: relative; height: var(--chart-height, 16rem); }
.chart canvas { width: 100% !important; height: 100% !important; }  /* !important: Chart.js sets the canvas size inline */
/* Table */
.widget-table { width: 100%; border-collapse: collapse; font-size: var(--m-font-size-sm); }
.widget-table th { text-align: left; padding: calc(var(--m-space) * 1) calc(var(--m-space) * 2); font-size: var(--m-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--m-fg-muted); border-bottom: 1px solid var(--m-border); white-space: nowrap; }
.widget-table td { padding: calc(var(--m-space) * 1.5) calc(var(--m-space) * 2); border-bottom: 1px solid var(--m-border); vertical-align: middle; }
.widget-table tbody tr:last-child td { border-bottom: 0; }
.widget-table .cell-yes { color: var(--m-success-ink); } .widget-table .cell-no { color: var(--m-danger-ink); }
/* List */
.widget-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.widget-list__item { display: flex; align-items: center; gap: calc(var(--m-space) * 3); padding: calc(var(--m-space) * 2) 0; border-bottom: 1px solid var(--m-border); }
.widget-list__item:last-child { border-bottom: 0; }
.widget-list__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--m-radius-pill); font-size: var(--m-font-size-xs); flex: 0 0 auto; background: var(--m-surface-3); color: var(--m-fg-muted); }
.widget-list__icon--primary { background: var(--m-primary-soft); color: var(--m-primary-ink); } .widget-list__icon--success { background: var(--m-success-soft); color: var(--m-success-ink); } .widget-list__icon--warning { background: var(--m-warning-soft); color: var(--m-warning-ink); } .widget-list__icon--danger { background: var(--m-danger-soft); color: var(--m-danger-ink); } .widget-list__icon--info { background: var(--m-info-soft); color: var(--m-info-ink); }
.widget-list__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.widget-list__title { font-weight: 500; color: var(--m-fg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-list__subtitle, .widget-list__meta { font-size: var(--m-font-size-xs); color: var(--m-fg-muted); }
.widget-list__meta { flex: 0 0 auto; }
/* Progress */
.widget-progress { display: flex; flex-direction: column; gap: calc(var(--m-space) * 2.5); }
.widget-progress__meta { display: flex; justify-content: space-between; font-size: var(--m-font-size-sm); margin-bottom: 4px; }
.widget-progress__text { color: var(--m-fg-muted); font-variant-numeric: tabular-nums; }
.widget-progress__track { height: .5rem; border-radius: var(--m-radius-pill); background: var(--m-surface-3); overflow: hidden; }
.widget-progress__bar { height: 100%; border-radius: var(--m-radius-pill); background: var(--m-primary); transition: width .4s; }
.widget-progress__bar--success { background: var(--m-success); } .widget-progress__bar--warning { background: var(--m-warning); } .widget-progress__bar--danger { background: var(--m-danger); } .widget-progress__bar--info { background: var(--m-info); } .widget-progress__bar--secondary { background: var(--m-fg-muted); }
/* Tracker */
.tracker { display: flex; flex-direction: column; gap: calc(var(--m-space) * 2); }
.tracker__cells { display: flex; gap: 3px; }
.tracker__cell { flex: 1 1 0; height: 1.75rem; border-radius: var(--m-radius-sm); background: var(--m-surface-3); }
.tracker__cell--success { background: var(--m-success); } .tracker__cell--warning { background: var(--m-warning); } .tracker__cell--danger { background: var(--m-danger); } .tracker__cell--info { background: var(--m-info); } .tracker__cell--primary { background: var(--m-primary); }
.tracker__legend { display: flex; flex-wrap: wrap; gap: calc(var(--m-space) * 3); font-size: var(--m-font-size-xs); color: var(--m-fg-muted); }
.tracker__legend .tracker__cell { display: inline-block; width: .75rem; height: .75rem; margin-right: .35rem; vertical-align: -1px; flex: none; }
/* Cohort */
.cohort th[scope="row"] { font-weight: 500; color: var(--m-fg-strong); text-transform: none; letter-spacing: 0; font-size: var(--m-font-size-sm); }
.cohort__cell { text-align: center; font-variant-numeric: tabular-nums; }
.cohort__cell--1 { background: color-mix(in oklab, var(--m-primary) 12%, var(--m-surface)); } .cohort__cell--2 { background: color-mix(in oklab, var(--m-primary) 26%, var(--m-surface)); } .cohort__cell--3 { background: color-mix(in oklab, var(--m-primary) 42%, var(--m-surface)); color: var(--m-primary-contrast); } .cohort__cell--4 { background: color-mix(in oklab, var(--m-primary) 62%, var(--m-surface)); color: var(--m-primary-contrast); } .cohort__cell--5 { background: var(--m-primary); color: var(--m-primary-contrast); }
/* Form widget */
.widget-form__fields { display: grid; gap: calc(var(--m-space) * 3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.widget-form__actions { display: flex; justify-content: flex-end; margin-top: calc(var(--m-space) * 3); }
/* Customise panel */
.dash__customize { position: fixed; inset: 0; z-index: var(--m-z-overlay); }
.dash__customize-backdrop { position: absolute; inset: 0; background: var(--m-backdrop); }
.dash__customize-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(24rem, 92vw); display: flex; flex-direction: column; background: var(--m-surface); box-shadow: var(--m-shadow-lg); }
.dash__customize-header { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--m-space) * 4); border-bottom: 1px solid var(--m-border); }
.dash__customize-header h2 { margin: 0; font-size: 1rem; }
.dash__customize-help { margin: 0; padding: calc(var(--m-space) * 3) calc(var(--m-space) * 4) 0; font-size: var(--m-font-size-sm); color: var(--m-fg-muted); }
.dash__customize-list { list-style: none; margin: 0; padding: calc(var(--m-space) * 3) calc(var(--m-space) * 4); flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: calc(var(--m-space) * 1); }
.dash__customize-item { display: flex; align-items: center; gap: calc(var(--m-space) * 2); padding: calc(var(--m-space) * 2); border: 1px solid var(--m-border); border-radius: var(--m-radius); background: var(--m-surface-2); cursor: grab; }
.dash__customize-item label { display: flex; align-items: center; gap: calc(var(--m-space) * 2); cursor: pointer; }
.dash__customize-handle { color: var(--m-fg-muted); }
.dash__customize-footer { display: flex; justify-content: space-between; padding: calc(var(--m-space) * 3) calc(var(--m-space) * 4); border-top: 1px solid var(--m-border); }
/* Filters as comboboxes */
.dash__combobox { min-width: 16rem; }
/* The theme builder rendered inside a widget stays open and in the flow */
.widget .ui-builder { position: static; }
.widget .ui-builder__toggle { display: none; }
.widget .ui-builder__panel { display: block !important; /* !important: x-show sets display inline */ position: static; width: auto; max-height: none; box-shadow: none; border: 0; padding: 0; }
.dash__filter-row { display: flex; flex-wrap: wrap; gap: calc(var(--m-space) * 2); align-items: center; }
.widget__toggle { display: inline-flex; align-items: center; gap: calc(var(--m-space) * 1.5); font-size: var(--m-font-size-xs); color: var(--m-fg-muted); cursor: pointer; }
.list-widgets { margin-bottom: calc(var(--m-space) * 2); }
.kpi__extra { font-size: var(--m-font-size-xs); color: var(--m-fg-muted); }
.dash__filter-caption { font-size: var(--m-font-size-xs); color: var(--m-fg-muted); }
.dash__tabs:not(.dash__tabs--ready) .tabs__more { visibility: hidden; } /* the tabs paint at once; only the overflow menu waits for the measure */