/* Dashboard (js/pages/dashboard.js) - rebuilt 2026-10-15

   One summary strip, then two rows of three cards. Every rule for the page
   is here; redesign.css no longer styles it. Quiet surfaces and hairlines,
   the shop's colour only on data and the one active control, figures in
   the sans at a size that says how much they matter. A wide screen turns
   these into separate cards: the last section of this file. */

.dashboard-page {
    --dash-line: color-mix(in srgb, var(--ds-text-primary) 8%, var(--ds-surface));
    --dash-line-strong: color-mix(in srgb, var(--ds-text-primary) 18%, var(--ds-surface));
    --dash-grid: color-mix(in srgb, var(--ds-text-primary) 6%, var(--ds-surface));
    --dash-track: color-mix(in srgb, var(--ds-text-primary) 6%, var(--ds-surface));
    --dash-prev: color-mix(in srgb, var(--ds-text-primary) 17%, var(--ds-surface));
    --dash-hover: color-mix(in srgb, var(--ds-text-primary) 4%, var(--ds-surface));
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    transition: opacity 150ms var(--ds-ease-standard);
}

/* One 16px rhythm between the rows (components.css adds a document margin
   to page sections; this page is a grid, not a document). */
.page-content .dashboard-page > * + * {
    margin-top: 0;
}

/* A new period is loading: the old figures stay, dimmed, instead of a
   blank page. */
.dashboard-page.is-refreshing {
    opacity: 0.55;
}

/* "Your sales only": says why a cashier's numbers are smaller than the shop's.
   Pulled up into the page gap so it costs a line, not a line and a gap. */
.dash-scope-note {
    margin: -8px 0 0;
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
}

/* ---------------------------------------------------------------
   Page header: period, shift chip, the next action
   --------------------------------------------------------------- */

#pageHeaderActions:has(.dash-controls) {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 1;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Arabic's long month names fill this row: the controls wrap, the title never. */
.ds-page-header:has(.dash-controls) .ds-page-header-title {
    white-space: nowrap;
}

/* The line under the title takes what is left over, not room from the controls. */
@media (min-width: 769px) {
    .ds-page-header:has(.dash-controls) .ds-page-header-main {
        flex: 1 1 0;
        min-width: min-content;
    }
}

.dash-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ds-text-primary) 5%, var(--ds-surface));
    border: 1px solid color-mix(in srgb, var(--ds-text-primary) 6%, var(--ds-surface));
}

.dash-seg-btn {
    height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ds-text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color 120ms var(--ds-ease-standard), background-color 120ms var(--ds-ease-standard);
}

:where(.can-hover) .dash-seg-btn:hover {
    color: var(--ds-text-primary);
}

.dash-seg-btn.is-on {
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    box-shadow: 0 1px 2px rgba(30, 27, 57, 0.10), 0 1px 1px rgba(30, 27, 57, 0.04);
}

.dash-seg-btn:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: 1px;
}

.dash-shift-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.dash-shift-chip.is-open {
    background: var(--ds-success-tint);
    color: var(--ds-success-text);
}

.dash-shift-chip.is-closed {
    background: var(--ds-warning-tint);
    color: var(--ds-warning-text);
}

.dash-shift-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.dash-shift-chip.is-closed .dash-shift-dot {
    border-radius: 2px;
}

/* ---------------------------------------------------------------
   Summary strip
   The hairlines are the strip's own colour showing through a 1px gap,
   so they stay right however the cells wrap.
   --------------------------------------------------------------- */

.dash-kpis {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--dash-line);
    border-radius: var(--ds-radius-lg);
    background: var(--dash-line);
    box-shadow: var(--ds-shadow-card);
}

.dash-kpis > .dash-load-error {
    grid-column: 1 / -1;
    background: var(--ds-surface);
}

.dash-kpi {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 16px 24px;
    background: var(--ds-surface);
}

.dash-kpi-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dash-kpi-label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ds-text-secondary);
}

.dash-kpi-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ds-text-primary);
    white-space: nowrap;
}

/* The figure and its unit run left to right in Arabic too, so the gap's side
   is fixed. */
.dash-kpi-unit {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ds-text-secondary);
}

.dash-kpi-delta {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ds-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-kpi-delta.is-up {
    color: var(--ds-success-text);
}

.dash-kpi-delta.is-down {
    color: var(--ds-warning-text);
}

/* Revenue leads: larger, on a faint wash of the shop's colour. */
.dash-kpi.is-lead {
    background:
        radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, var(--ds-primary) 7%, transparent), transparent 60%),
        var(--ds-surface);
}

.dash-kpi.is-lead .dash-kpi-value {
    font-size: clamp(30px, 2.65vw, 40px);
    letter-spacing: -0.03em;
}

.dash-kpi.is-lead .dash-kpi-unit {
    font-size: 16px;
}

/* The figure keeps its width; the small chart gives way. */
.dash-kpi.is-lead .dash-kpi-text {
    flex: none;
}

/* Revenue's running total against the compared period. */
/* Gives way to a long figure before the figure would wrap. */
.dash-spark {
    flex: 0 1 168px;
    min-width: 0;
    max-width: 168px;
    height: 56px;
    overflow: visible;
}

.dash-spark-area {
    fill: color-mix(in srgb, var(--ds-primary) 10%, transparent);
    stroke: none;
}

.dash-spark-cur,
.dash-spark-prev {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.dash-spark-cur {
    stroke: var(--ds-primary);
}

.dash-spark-prev {
    stroke: var(--dash-prev);
}

.dash-spark-dot {
    fill: var(--ds-primary);
    stroke: var(--ds-surface);
    stroke-width: 2;
}

/* Time runs the other way in Arabic, as the columns already do. */
body[dir="rtl"] .dash-spark {
    transform: scaleX(-1);
}

/* ---------------------------------------------------------------
   Rows and cards
   --------------------------------------------------------------- */

.dash-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.dash-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 16px 20px 20px;
    border: 1px solid var(--dash-line);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-card);
}

.dash-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 24px;
}

.dash-card-titles {
    min-width: 0;
}

.dash-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ds-text-primary);
}

.dash-card-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--ds-text-secondary);
}

.dash-card-sub strong {
    font-weight: 600;
    color: var(--ds-text-primary);
}

.dash-card-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin: -4px -8px 0 0;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ds-primary);
    text-decoration: none;
    white-space: nowrap;
}

:where(.can-hover) .dash-card-link:hover {
    background: color-mix(in srgb, var(--ds-primary) 8%, transparent);
}

.dash-card-body {
    flex: 1 1 auto;
    min-height: 0;
}

.dash-card-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--dash-line);
}

.dash-card-foot:empty {
    display: none;
}

.dash-card .ds-empty-state {
    padding-block: 24px;
}

.dash-empty-action {
    margin-top: var(--ds-space-3);
    align-self: center;
    text-decoration: none;
}

/* ---------------------------------------------------------------
   Sales chart
   --------------------------------------------------------------- */

.dash-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 16px;
    padding-top: 3px;
    font-size: 12.5px;
    color: var(--ds-text-secondary);
}

.dash-legend-key {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.dash-legend-key i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--ds-primary);
}

.dash-legend-key i.is-prev {
    background: var(--dash-prev);
}

.dash-chart {
    --dash-gutter: 42px;
    position: relative;
}

.dash-chart-plot {
    position: relative;
    height: 196px;
    margin-inline-start: var(--dash-gutter);
}

.dash-chart-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dash-chart-tick {
    position: absolute;
    inset-inline: 0;
    height: 0;
    border-top: 1px solid var(--dash-grid);
}

.dash-chart-tick.is-base {
    border-top-color: var(--dash-line-strong);
}

.dash-chart-tick > span {
    position: absolute;
    inset-inline-end: calc(100% + 8px);
    top: 0;
    transform: translateY(-50%);
    font-size: 11.5px;
    color: var(--ds-text-tertiary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dash-chart-bars {
    position: absolute;
    inset: 0;
    display: flex;
    gap: 8px;
}

.dash-chart-slot {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    border-radius: 8px 8px 0 0;
    outline: none;
    transition: background-color 120ms var(--ds-ease-standard);
}

:where(.can-hover) .dash-chart-slot:hover,
.dash-chart-slot:focus-visible {
    background: color-mix(in srgb, var(--ds-primary) 7%, transparent);
}

.dash-chart-slot:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ds-primary) 45%, transparent);
}

.dash-chart-bar {
    flex: 0 1 24px;
    min-width: 3px;
    border-radius: 4px 4px 0 0;
    background: var(--ds-primary);
}

.dash-chart.has-prev .dash-chart-bar {
    flex-basis: 14px;
}

.dash-chart-bar.is-prev {
    background: var(--dash-prev);
}

.dash-chart-x {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    margin-inline-start: var(--dash-gutter);
}

.dash-chart.is-thin .dash-chart-bars,
.dash-chart.is-thin .dash-chart-x {
    gap: 3px;
}

.dash-chart-x > span {
    flex: 1 1 0;
    min-width: 0;
    font-size: 12px;
    color: var(--ds-text-secondary);
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dash-chart-tip {
    position: absolute;
    z-index: 2;
    min-width: 136px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--ds-text-primary);
    color: #FFFFFF;
    font-size: 12.5px;
    line-height: 1.5;
    box-shadow: 0 10px 28px rgba(30, 27, 57, 0.22);
    transform: translateX(-50%);
    pointer-events: none;
}

.dash-chart-tip[hidden] {
    display: none;
}

/* Beside a tall column instead of over it. */
.dash-chart-tip.is-side {
    transform: none;
}

.dash-chart-tip-label {
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.68);
}

.dash-chart-tip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.dash-chart-tip-row i {
    width: 10px;
    height: 2px;
    border-radius: 1px;
    background: color-mix(in srgb, var(--ds-primary) 65%, #FFFFFF);
}

.dash-chart-tip-row.is-prev i {
    background: rgba(255, 255, 255, 0.5);
}

.dash-chart-tip-row strong {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dash-chart-tip-row span {
    color: rgba(255, 255, 255, 0.68);
}

/* ---------------------------------------------------------------
   Top sellers
   --------------------------------------------------------------- */

.dash-sellers {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-seller {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.dash-thumb {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--ds-plate);
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-text-secondary);
}

.dash-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dash-seller-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
}

.dash-seller-name {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    color: var(--ds-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-seller-n {
    font-size: 13px;
    color: var(--ds-text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dash-seller-track,
.dash-pay-track {
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--dash-track);
}

.dash-seller-track {
    margin-top: 8px;
}

.dash-seller-track > span,
.dash-pay-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ds-primary);
}

/* ---------------------------------------------------------------
   Payment methods, and orders by status under them
   --------------------------------------------------------------- */

.dash-pay {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-pay-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 42px;
    align-items: baseline;
    gap: 8px 8px;
    font-size: 14px;
}

.dash-pay-name {
    overflow: hidden;
    font-weight: 500;
    color: var(--ds-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-pay-amt {
    font-weight: 600;
    color: var(--ds-text-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dash-pay-pct {
    font-size: 13px;
    color: var(--ds-text-secondary);
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.dash-pay-track {
    grid-column: 1 / -1;
}

.dash-status-title {
    display: block;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ds-text-secondary);
}

/* Each box as wide as its word, the spare room shared out evenly. */
.dash-status-list {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-status-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 8px 8px;
    border-radius: 10px;
    background: var(--dash-hover);
}

.dash-status-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    font-size: 12.5px;
    color: var(--ds-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-status-cell i {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ds-success);
}

.dash-status-cell.is-open i {
    border-radius: 2px;
    background: var(--ds-warning);
}

.dash-status-cell.is-cancelled i {
    border-radius: 1px;
    background: var(--ds-text-tertiary);
    transform: rotate(45deg);
}

.dash-status-cell strong {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ds-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   Recent orders
   --------------------------------------------------------------- */

.dash-recent-table-wrap {
    overflow-x: auto;
}

.dash-recent {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 14px;
}

.dash-recent th {
    padding: 0 12px 8px;
    border-bottom: 1px solid var(--dash-line);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ds-text-secondary);
    text-align: start;
    white-space: nowrap;
}

.dash-recent td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--dash-line);
    vertical-align: middle;
    color: var(--ds-text-primary);
}

.dash-recent tbody tr:last-child td {
    border-bottom: 0;
}

.dash-recent th:first-child,
.dash-recent td:first-child {
    padding-inline-start: 0;
}

.dash-recent th:last-child,
.dash-recent td:last-child {
    padding-inline-end: 0;
}

.dash-ro-ref {
    display: block;
    font-family: var(--ds-font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-primary);
}

.dash-ro-where {
    display: block;
    margin-top: 1px;
    font-size: 12.5px;
    color: var(--ds-text-secondary);
}

.dash-ro-items,
.dash-ro-time {
    color: var(--ds-text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dash-recent .dash-ro-amt {
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dash-recent td.dash-ro-amt {
    font-weight: 600;
}

/* Cancelled or voided: the money is not in the takings. */
.dash-recent td.dash-ro-amt.is-void {
    font-weight: 500;
    color: var(--ds-text-tertiary);
    text-decoration: line-through;
}

.dash-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.dash-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.dash-pill.is-paid {
    background: var(--ds-success-tint);
    color: var(--ds-success-text);
}

.dash-pill.is-open {
    background: var(--ds-warning-tint);
    color: var(--ds-warning-text);
}

.dash-pill.is-cancelled {
    background: var(--ds-danger-tint);
    color: var(--ds-danger-text);
}

.dash-pill.is-gift {
    background: var(--ds-info-tint);
    color: var(--ds-info-text);
}

/* ---------------------------------------------------------------
   Needs attention
   --------------------------------------------------------------- */

.dash-alerts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-alert {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    margin-inline: -8px;
    padding: 8px 8px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background-color 120ms var(--ds-ease-standard);
}

:where(.can-hover) .dash-alert:hover {
    background: var(--dash-hover);
}

.dash-alert-mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
}

.dash-alert.is-danger .dash-alert-mark {
    background: var(--ds-danger-tint);
    color: var(--ds-danger-text);
}

.dash-alert.is-warning .dash-alert-mark {
    background: var(--ds-warning-tint);
    color: var(--ds-warning-text);
}

.dash-alert.is-info .dash-alert-mark {
    background: var(--ds-info-tint);
    color: var(--ds-info-text);
}

.dash-alert.is-success .dash-alert-mark {
    background: var(--ds-success-tint);
    color: var(--ds-success-text);
}

.dash-alert-text {
    min-width: 0;
}

.dash-alert-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ds-text-primary);
}

.dash-alert-desc {
    display: -webkit-box;
    margin-top: 2px;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ds-text-secondary);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.dash-alert-time {
    padding-top: 2px;
    font-size: 12px;
    color: var(--ds-text-tertiary);
    white-space: nowrap;
}

.dash-alerts-more {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--ds-text-secondary);
}

/* ---------------------------------------------------------------
   At a glance
   --------------------------------------------------------------- */

.dash-glance {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-glance li + li {
    border-top: 1px solid var(--dash-line);
}

.dash-glance-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    margin-inline: -8px;
    padding: 0 8px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

:where(.can-hover) a.dash-glance-row:hover {
    background: var(--dash-hover);
}

.dash-glance-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    color: var(--ds-text-secondary);
}

.dash-glance-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--ds-text-primary);
    font-variant-numeric: tabular-nums;
}

.dash-glance-row.is-warn .dash-glance-value {
    color: var(--ds-warning-text);
}

.dash-glance-row.is-warn .dash-glance-label::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-inline-start: 8px;
    border-radius: 50%;
    background: var(--ds-warning);
    vertical-align: 1px;
}

.dash-glance-chev {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--ds-text-tertiary);
}

body[dir="rtl"] .dash-glance-chev {
    transform: scaleX(-1);
}

/* ---------------------------------------------------------------
   Load errors and narrower screens
   --------------------------------------------------------------- */

/* Failed fetch - distinct from empty shop (F9). */
.dash-load-error {
    gap: var(--ds-space-3);
}

.dash-load-error .ds-empty-state-icon {
    color: var(--ds-danger);
}

/* ---------------------------------------------------------------
   Start here: a shop with no sales yet (Dashboard._renderStart)
   --------------------------------------------------------------- */

.dash-start {
    max-inline-size: 760px;
    padding: 24px;
    gap: 20px;
    overflow: hidden;
}

/* The wave behind the title, fading out down into the first step. */
.dash-start.ds-wave {
    --wave-w: 64%;
    --wave-h: 160px;
    --wave-fade-y: linear-gradient(to bottom, #000 40%, transparent);
}

/* The summary's far cell: the whole cell, so it reaches the strip's corner,
   faded out before the figure. */
.dash-kpi.ds-wave {
    --wave-w: 100%;
    --wave-solid: 10%;
}

.dash-start-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ds-text-primary);
}

.dash-start-sub {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--ds-text-secondary);
}

.dash-start-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-start-step {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-block-start: 1px solid var(--dash-line);
}

.dash-start-step:first-child {
    padding-block-start: 0;
    border-block-start: 0;
}

.dash-start-step:last-child {
    padding-block-end: 0;
}

.dash-start-mark {
    inline-size: 32px;
    block-size: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--dash-line-strong);
    border-radius: 50%;
    color: var(--ds-text-secondary);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dash-start-step.is-done .dash-start-mark {
    border-color: transparent;
    background: var(--ds-success-tint);
    color: var(--ds-success-text);
}

.dash-start-name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ds-text-primary);
}

.dash-start-tag {
    margin-inline-start: 8px;
    padding: 2px 8px;
    border-radius: var(--ds-radius-pill);
    background: var(--dash-track);
    color: var(--ds-text-secondary);
    font-size: 12px;
    font-weight: 500;
    vertical-align: 1px;
}

.dash-start-desc {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--ds-text-secondary);
}

/* A short till (1520x730): a shorter chart keeps the top sellers and the
   first of the recent orders on the first screen. */
@media (max-height: 820px) {
    .dash-chart-plot {
        height: 176px;
    }

    .dash-kpi {
        padding-block: 16px;
    }
}

@media (max-width: 1280px) {
    .dash-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .dash-card--wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1100px) {
    .dash-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-kpi.is-lead {
        grid-column: 1 / -1;
    }

    /* Revenue takes a row, so three cards follow it in two columns and the
       last sat beside an empty grey cell. It takes the row instead. */
    .dash-kpi:nth-child(even):last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .dashboard-page {
        padding-inline: var(--ds-space-3);
    }

    .dash-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .dash-kpi {
        padding: 16px 16px;
    }

    .dash-kpi.is-lead .dash-kpi-value {
        font-size: 32px;
    }

    /* Half a phone is too narrow for "Nothing last Friday to compare";
       it wraps instead of ending in "...". */
    .dash-kpi-delta {
        white-space: normal;
    }

    .dash-spark {
        display: none;
    }

    .dash-chart {
        --dash-gutter: 34px;
    }

    .dash-recent-table-wrap {
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------------------------------------------------------------
   Dates and filters: one row in the page header, the picker under it
   (js/pages/dashboard-range.js)
   --------------------------------------------------------------- */

.dash-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dash-range {
    display: inline-flex;
    align-items: stretch;
    height: 40px;
    overflow: hidden;
    border: 1px solid var(--ds-border-strong);
    border-radius: 10px;
    background: var(--ds-surface);
}

.dash-range-step {
    display: grid;
    place-items: center;
    width: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ds-text-secondary);
    cursor: pointer;
}

.dash-range-step:disabled {
    color: var(--ds-text-tertiary);
    opacity: 0.45;
    cursor: default;
}

:where(.can-hover) .dash-range-step:not(:disabled):hover,
:where(.can-hover) .dash-range-btn:hover {
    background: color-mix(in srgb, var(--ds-text-primary) 4%, var(--ds-surface));
    color: var(--ds-text-primary);
}

.dash-range-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 0;
    border-inline: 1px solid var(--ds-border);
    background: transparent;
    color: var(--ds-text-primary);
    font: inherit;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
}

.dash-range-btn svg {
    flex: none;
    color: var(--ds-text-secondary);
}

.dash-range-btn strong {
    font-weight: 600;
}

.dash-range-btn span {
    font-size: 13px;
    color: var(--ds-text-secondary);
}

.dash-range-btn:focus-visible,
.dash-range-step:focus-visible,
.dash-filter:focus-visible,
.dash-filter-clear:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: -2px;
}

body[dir="rtl"] .dash-flip {
    transform: scaleX(-1);
}

.dash-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dash-filter {
    appearance: none;
    -webkit-appearance: none;
    height: 40px;
    max-width: 148px;
    padding-block: 0;
    padding-inline: 12px 24px;
    border: 1px solid var(--ds-border-strong);
    border-radius: 10px;
    background-color: var(--ds-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    color: var(--ds-text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-overflow: ellipsis;
    cursor: pointer;
}

body[dir="rtl"] .dash-filter {
    background-position: left 8px center;
}

/* A filter in use reads as in use from across the room. */
.dash-filter.is-on {
    border-color: var(--ds-primary);
    background-color: color-mix(in srgb, var(--ds-primary) 10%, var(--ds-surface));
    font-weight: 600;
}

.dash-filter-clear {
    height: 40px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* The small segmented control: on a card's band and in the picker. */
.dash-seg.is-small {
    flex: none;
    padding: 2px;
    border-radius: 9px;
}

.dash-seg.is-small .dash-seg-btn {
    height: 28px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 12.5px;
}

.dash-card-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 12px;
}

.dash-pop {
    position: fixed;
    top: var(--pop-y, 80px);
    left: var(--pop-x, 12px);
    z-index: var(--ds-z-modal);
    display: grid;
    grid-template-columns: 148px auto;
    grid-template-areas:
        'presets cal'
        'foot foot';
    grid-auto-rows: max-content;
    width: max-content;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface);
    box-shadow: 0 16px 40px rgba(30, 27, 57, 0.22);
}

.dash-pop-presets {
    grid-area: presets;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border-inline-end: 1px solid var(--ds-border);
}

.dash-pop-preset {
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-text-primary);
    font: inherit;
    font-size: 14px;
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
}

:where(.can-hover) .dash-pop-preset:hover {
    background: color-mix(in srgb, var(--ds-text-primary) 5%, var(--ds-surface));
}

.dash-pop-preset.is-on {
    background: color-mix(in srgb, var(--ds-primary) 12%, var(--ds-surface));
    color: var(--ds-primary);
    font-weight: 600;
}

.dash-pop-cal {
    grid-area: cal;
    position: relative;
    padding: 12px 16px 16px;
}

.dash-cal-nav {
    position: absolute;
    inset-inline: 16px;
    top: 8px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.dash-cal-step {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-text-secondary);
    cursor: pointer;
    pointer-events: auto;
}

.dash-cal-step:disabled {
    opacity: 0.35;
    cursor: default;
}

:where(.can-hover) .dash-cal-step:not(:disabled):hover {
    background: color-mix(in srgb, var(--ds-text-primary) 5%, var(--ds-surface));
}

.dash-cal-months {
    display: flex;
    gap: 24px;
}

.dash-cal-title {
    height: 24px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    color: var(--ds-text-primary);
}

.dash-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 40px);
    row-gap: 4px;
}

.dash-cal-dow {
    font-size: 11.5px;
    line-height: 24px;
    text-align: center;
    color: var(--ds-text-secondary);
    white-space: nowrap;
    overflow: hidden;
}

.dash-cal-day {
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ds-text-primary);
    font: inherit;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.dash-cal-day:disabled {
    color: var(--ds-text-tertiary);
    opacity: 0.5;
    cursor: default;
}

:where(.can-hover) .dash-cal-day:not(:disabled):hover {
    background: color-mix(in srgb, var(--ds-primary) 14%, var(--ds-surface));
}

.dash-cal-day.is-today {
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--ds-border-strong);
}

.dash-cal-day.is-in {
    background: color-mix(in srgb, var(--ds-primary) 12%, var(--ds-surface));
}

.dash-cal-day.is-start,
.dash-cal-day.is-end {
    background: var(--ds-primary);
    color: #FFFFFF;
    font-weight: 600;
}

.dash-cal-day.is-start {
    border-start-start-radius: 8px;
    border-end-start-radius: 8px;
}

.dash-cal-day.is-end {
    border-start-end-radius: 8px;
    border-end-end-radius: 8px;
}

.dash-cal-day:focus-visible,
.dash-cal-step:focus-visible,
.dash-pop-preset:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: -2px;
}

.dash-pop-foot {
    grid-area: foot;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-top: 1px solid var(--ds-border);
    background: var(--ds-surface-alt);
}

.dash-pop-compare {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.dash-pop-compare-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-primary);
}

.dash-pop-summary {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    text-align: end;
    color: var(--ds-text-secondary);
}

.dash-pop-summary.is-bad {
    color: var(--ds-danger-text);
    font-weight: 600;
}

.dash-pop-actions {
    display: flex;
    gap: 8px;
}

/* ---------------------------------------------------------------
   Sales summary: menu value down to revenue, then what was not charged
   --------------------------------------------------------------- */

.dash-sum {
    margin: 0;
}

.dash-sum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-block: 4px;
    font-size: 14px;
}

.dash-sum-row dt {
    min-width: 0;
    color: var(--ds-text-secondary);
}

.dash-sum-row dd {
    margin: 0;
    font-weight: 600;
    color: var(--ds-text-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dash-sum-row.is-total {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--dash-line-strong);
}

.dash-sum-row.is-total dt,
.dash-sum-row.is-total dd {
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-text-primary);
}

.dash-sum-head {
    margin: 12px 0 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ds-text-primary);
}

.dash-sum-n {
    display: inline-block;
    min-width: 20px;
    margin-inline-start: 4px;
    padding: 0 4px;
    border-radius: 6px;
    background: var(--dash-track);
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    color: var(--ds-text-secondary);
    font-variant-numeric: tabular-nums;
}

.dash-note {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.dash-note.is-quiet {
    padding: 0;
    color: var(--ds-text-secondary);
    font-weight: 500;
}

.dash-note.is-warn {
    background: var(--ds-warning-tint);
    color: var(--ds-warning-text);
}

/* ---------------------------------------------------------------
   Staff and busiest times
   --------------------------------------------------------------- */

.dash-table-wrap {
    overflow-x: auto;
}

.dash-staff {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 14px;
}

.dash-staff th,
.dash-staff td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--dash-line);
    color: var(--ds-text-primary);
    text-align: end;
    vertical-align: middle;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dash-staff thead th {
    padding-block: 0 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ds-text-secondary);
}

.dash-staff th:first-child {
    padding-inline-start: 0;
    text-align: start;
}

.dash-staff th:last-child,
.dash-staff td:last-child {
    padding-inline-end: 0;
}

.dash-staff tbody tr:last-child th,
.dash-staff tbody tr:last-child td {
    border-bottom: 0;
}

.dash-staff td.is-warn {
    background: var(--ds-warning-tint);
    color: var(--ds-warning-text);
    font-weight: 600;
}

.dash-staff-sub {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-text-secondary);
}

.dash-staff td.is-warn .dash-staff-sub {
    color: inherit;
}

.dash-staff-name {
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ds-primary);
    font: inherit;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}

:where(.can-hover) .dash-staff-name:hover {
    text-decoration: underline;
}

.dash-heat {
    width: 100%;
    min-width: 420px;
    border-collapse: separate;
    border-spacing: 2px;
    table-layout: fixed;
}

.dash-heat th {
    padding: 0;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ds-text-secondary);
    text-align: start;
    white-space: nowrap;
    overflow: visible;
}

.dash-heat th:first-child {
    width: 44px;
}

.dash-heat-cell {
    height: 24px;
    padding: 0;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ds-primary) var(--heat), var(--ds-surface));
    outline: none;
}

.dash-heat-cell.is-empty {
    background: var(--dash-track);
}

.dash-heat-cell:focus-visible {
    box-shadow: 0 0 0 2px var(--ds-primary);
}

.dash-heat-read {
    min-height: 20px;
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--ds-text-secondary);
}

/* The rows the analytics added. */
.dash-row--thirds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dash-row--split {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

.dash-row--split.is-solo {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1280px) {
    .dash-row--thirds {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-row--thirds > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .dash-row--split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Too narrow for two months: one, the one holding the last day. */
@media (max-width: 900px) {
    .dash-cal-month.is-earlier {
        display: none;
    }
}

@media (max-width: 768px) {
    .dash-row--thirds {
        grid-template-columns: minmax(0, 1fr);
    }

    .dash-controls {
        flex: 1 1 100%;
    }

    .dash-range {
        flex: 1 1 100%;
    }

    .dash-range-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* The filters scroll in their own row. */
    .dash-filters {
        flex: 1 1 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .dash-filters::-webkit-scrollbar {
        display: none;
    }

    .dash-filter {
        flex: none;
    }

    /* The picker becomes a sheet from the foot of the screen. */
    .dash-pop {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            'presets'
            'cal'
            'foot';
        width: 100%;
        max-width: 100%;
        max-height: 90dvh;
        border-width: 1px 0 0;
        border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .dash-pop-presets {
        flex-direction: row;
        overflow-x: auto;
        border-inline-end: 0;
        border-bottom: 1px solid var(--ds-border);
        scrollbar-width: none;
    }

    .dash-pop-presets::-webkit-scrollbar {
        display: none;
    }

    .dash-pop-preset {
        flex: none;
        height: 40px;
    }

    .dash-pop-cal {
        padding-inline: 12px;
    }

    .dash-cal-months {
        justify-content: center;
    }

    .dash-cal-month {
        width: 100%;
        max-width: 420px;
    }

    .dash-cal-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .dash-pop-foot {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .dash-pop-compare {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .dash-pop-summary {
        flex: 1 1 100%;
        text-align: start;
    }

    .dash-pop-actions {
        flex: 1 1 100%;
    }

    .dash-pop-actions .ds-btn {
        flex: 1 1 0;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------
   A wide screen: cards you can tell apart

   A grey tray, white cards with real edges, a band in the shop's colour
   on each card, and under each summary figure a strip that says at a
   glance whether it went up (green) or down (amber).

   Nothing here reaches a phone, upright or on its side. Start here is a
   .dash-card too and keeps its own look, so the card rules go through
   .dash-row.
   --------------------------------------------------------------- */

@media (min-width: 769px) and (min-height: 501px) {
    /* White cards only stand apart on something darker. */
    #mainContent:has(.dashboard-page),
    .page-content:has(.dashboard-page) {
        background: var(--ds-border);
    }

    .dashboard-page {
        --dash-band: color-mix(in srgb, var(--ds-primary) 16%, var(--ds-surface));
        --dash-ink: color-mix(in srgb, var(--ds-primary) 60%, #000);
        --dash-edge: 1px solid var(--ds-border-strong);
        --dash-lift: 0 1px 2px rgba(30, 27, 57, 0.08);
        gap: 12px;
    }

    .dash-row {
        gap: 12px;
    }

    /* The summary: four cards, each with its strip. */
    .dash-kpis {
        gap: 12px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    /* A failed load stands where the four cards would. */
    .dash-kpis > .dash-load-error {
        border: var(--dash-edge);
        border-radius: var(--ds-radius-md);
        box-shadow: var(--dash-lift);
    }

    .dash-kpi {
        align-items: flex-start;
        overflow: hidden;
        padding: 16px 20px 52px;
        border: var(--dash-edge);
        border-radius: var(--ds-radius-md);
        box-shadow: var(--dash-lift);
    }

    .dash-kpi-label {
        font-weight: 600;
        color: var(--ds-text-primary);
    }

    .dash-kpi-delta {
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        height: 36px;
        padding-inline: 20px;
        background: var(--ds-surface-alt);
        border-block-start: var(--dash-edge);
        font-size: 13px;
    }

    .dash-kpi-delta.is-up {
        background: var(--ds-success-tint);
        border-block-start-color: color-mix(in srgb, var(--ds-success) 25%, var(--ds-surface));
    }

    .dash-kpi-delta.is-down {
        background: var(--ds-warning-tint);
        border-block-start-color: color-mix(in srgb, var(--ds-warning) 30%, var(--ds-surface));
    }

    .dash-kpi:has(.dash-kpi-delta.is-up) {
        border-color: color-mix(in srgb, var(--ds-success) 45%, var(--ds-surface));
    }

    .dash-kpi:has(.dash-kpi-delta.is-down) {
        border-color: color-mix(in srgb, var(--ds-warning) 50%, var(--ds-surface));
    }

    /* The cards: a coloured band, then the content. */
    .dash-row .dash-card {
        gap: 0;
        overflow: hidden;
        padding: 0;
        border: var(--dash-edge);
        border-radius: var(--ds-radius-md);
        box-shadow: var(--dash-lift);
    }

    .dash-row .dash-card-head {
        align-items: center;
        min-height: 48px;
        padding: 8px 20px;
        background: var(--dash-band);
    }

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

    /* The busiest hour shares the title's line, so this band matches the
       ones beside it. */
    .dash-card-titles {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 12px;
    }

    .dash-card-sub {
        margin: 0;
    }

    .dash-card-sub,
    .dash-card-sub strong,
    .dash-legend,
    .dash-card-link {
        color: var(--dash-ink);
    }

    .dash-legend {
        padding-top: 0;
    }

    .dash-legend-key i.is-prev,
    .dash-chart-bar.is-prev {
        background: color-mix(in srgb, var(--ds-text-primary) 28%, var(--ds-surface));
    }

    .dash-card-link {
        margin-block: 0;
        margin-inline: 0 -8px;
    }

    .dash-row .dash-card-body {
        padding: 16px 20px;
    }

    .dash-row .dash-card-foot {
        padding: 12px 20px 16px;
        background: var(--ds-surface-alt);
        border-top: var(--dash-edge);
    }

    /* The chart takes the height its row has. */
    #salesOverviewCard .dash-card-body {
        display: flex;
        flex-direction: column;
    }

    .dash-chart {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .dash-chart-plot {
        flex: 1 1 auto;
        height: auto;
        min-height: 196px;
    }

    .dash-chart-tick {
        border-top-color: var(--ds-border-strong);
    }

    /* Top sellers and payment methods: a line between rows. */
    .dash-sellers,
    .dash-pay {
        gap: 0;
    }

    .dash-seller,
    .dash-pay-row {
        padding-block: 12px;
    }

    .dash-seller:first-child,
    .dash-pay-row:first-child {
        padding-block-start: 0;
    }

    .dash-seller:last-child,
    .dash-pay-row:last-child {
        padding-block-end: 0;
    }

    .dash-seller + .dash-seller,
    .dash-pay-row + .dash-pay-row {
        border-block-start: var(--dash-edge);
    }

    .dash-thumb {
        background: var(--dash-band);
        color: var(--dash-ink);
        font-weight: 700;
    }

    .dash-seller-track,
    .dash-pay-track {
        height: 8px;
        border-radius: 4px;
        background: var(--ds-border);
    }

    .dash-seller-n,
    .dash-pay-pct {
        font-weight: 600;
        color: var(--ds-text-primary);
    }

    /* Orders by status: each number in its own colour. */
    .dash-status-title {
        font-weight: 600;
        color: var(--ds-text-primary);
    }

    .dash-status-cell {
        padding: 8px 12px;
        background: var(--ds-success-tint);
        border: 1px solid color-mix(in srgb, var(--ds-success) 25%, var(--ds-surface));
    }

    .dash-status-cell.is-open {
        background: var(--ds-warning-tint);
        border-color: color-mix(in srgb, var(--ds-warning) 30%, var(--ds-surface));
    }

    .dash-status-cell.is-cancelled {
        background: var(--ds-danger-tint);
        border-color: color-mix(in srgb, var(--ds-danger) 25%, var(--ds-surface));
    }

    .dash-status-name {
        font-weight: 600;
        color: var(--ds-success-text);
    }

    .dash-status-cell.is-open .dash-status-name {
        color: var(--ds-warning-text);
    }

    .dash-status-cell.is-cancelled .dash-status-name {
        color: var(--ds-danger-text);
    }

    /* Recent orders: edge to edge, every other row shaded. */
    .dash-row .dash-recent-table-wrap {
        padding: 0;
    }

    .dash-recent th {
        padding-block: 8px;
        background: var(--ds-surface-alt);
        border-bottom: var(--dash-edge);
        font-weight: 600;
        color: var(--ds-text-primary);
    }

    .dash-recent td {
        padding-block: 8px;
        border-bottom: var(--dash-edge);
    }

    .dash-recent tbody tr:nth-child(even) td {
        background: var(--ds-surface-alt);
    }

    .dash-recent th:first-child,
    .dash-recent td:first-child {
        padding-inline-start: 20px;
    }

    .dash-recent th:last-child,
    .dash-recent td:last-child {
        padding-inline-end: 20px;
    }

    .dash-recent td.dash-ro-amt {
        font-size: 15px;
        font-weight: 700;
    }

    .dash-ro-items,
    .dash-ro-time {
        color: var(--ds-text-primary);
    }

    /* Needs attention: each one a coloured block. */
    .dash-alerts {
        gap: 8px;
    }

    .dash-alert {
        margin-inline: 0;
        padding: 12px;
        border: var(--dash-edge);
        border-radius: var(--ds-radius-sm);
        background: var(--ds-surface-alt);
    }

    :where(.can-hover) .dash-alert:hover {
        background: var(--ds-surface-alt);
        box-shadow: 0 2px 8px rgba(30, 27, 57, 0.12);
    }

    .dash-alert.is-danger,
    :where(.can-hover) .dash-alert.is-danger:hover {
        background: var(--ds-danger-tint);
        border-color: color-mix(in srgb, var(--ds-danger) 35%, var(--ds-surface));
    }

    .dash-alert.is-warning,
    :where(.can-hover) .dash-alert.is-warning:hover {
        background: var(--ds-warning-tint);
        border-color: color-mix(in srgb, var(--ds-warning) 40%, var(--ds-surface));
    }

    .dash-alert.is-info,
    :where(.can-hover) .dash-alert.is-info:hover {
        background: var(--ds-info-tint);
        border-color: color-mix(in srgb, var(--ds-info) 30%, var(--ds-surface));
    }

    .dash-alert.is-success,
    :where(.can-hover) .dash-alert.is-success:hover {
        background: var(--ds-success-tint);
        border-color: color-mix(in srgb, var(--ds-success) 30%, var(--ds-surface));
    }

    .dash-alert.is-danger .dash-alert-mark {
        background: var(--ds-danger-text);
        color: #FFFFFF;
    }

    .dash-alert.is-warning .dash-alert-mark {
        background: var(--ds-warning-text);
        color: #FFFFFF;
    }

    .dash-alert-desc,
    .dash-alert-time {
        color: var(--ds-text-primary);
    }

    /* At a glance: full-width rows, stock in amber. */
    .dash-row #dashMiniStats {
        padding: 0;
    }

    .dash-glance li + li {
        border-top: var(--dash-edge);
    }

    .dash-glance-row {
        min-height: 52px;
        margin-inline: 0;
        padding: 0 20px;
        border-radius: 0;
    }

    .dash-glance-label {
        color: var(--ds-text-primary);
    }

    .dash-glance-value {
        font-size: 16px;
        font-weight: 700;
    }

    .dash-glance-row.is-warn {
        background: var(--ds-warning-tint);
    }

    .dash-glance-row.is-warn .dash-glance-label {
        font-weight: 600;
        color: var(--ds-warning-text);
    }

    /* Sales summary and staff in the same language as the other cards. */
    .dash-sum-row dt {
        color: var(--ds-text-primary);
    }

    .dash-sum-n {
        background: var(--dash-band);
        color: var(--dash-ink);
    }

    .dash-row #staffSales {
        padding: 0;
    }

    .dash-staff thead th {
        padding-block: 8px;
        background: var(--ds-surface-alt);
        border-bottom: var(--dash-edge);
        font-weight: 600;
        color: var(--ds-text-primary);
    }

    .dash-staff tbody th,
    .dash-staff tbody td {
        border-bottom: var(--dash-edge);
    }

    .dash-staff th:first-child {
        padding-inline-start: 20px;
    }

    .dash-staff th:last-child,
    .dash-staff td:last-child {
        padding-inline-end: 20px;
    }

    .dash-heat-cell.is-empty {
        background: var(--ds-border);
    }

    .dash-heat th,
    .dash-heat-read {
        color: var(--ds-text-primary);
    }
}

/* A short till (1520x730): the same cards, drawn tighter, so the first
   screen holds as much as it did. */
@media (min-width: 769px) and (min-height: 501px) and (max-height: 820px) {
    .dash-kpi {
        padding: 12px 20px 44px;
    }

    .dash-kpi-delta {
        height: 32px;
    }

    .dash-row .dash-card-head {
        min-height: 40px;
        padding-block: 4px;
    }

    .dash-row .dash-card-body {
        padding-block: 12px;
    }

    .dash-row .dash-recent-table-wrap,
    .dash-row #dashMiniStats {
        padding-block: 0;
    }

    .dash-seller,
    .dash-pay-row {
        padding-block: 8px;
    }

    .dash-row .dash-card-foot {
        padding-block: 8px 12px;
    }

    .dash-chart-plot {
        min-height: 176px;
    }

    .dash-glance-row {
        min-height: 44px;
    }
}

/* ---------------------------------------------------------------
   A wide screen: the top of the page is a bento

   The first rows give up their boxes, so the chart, the sales summary,
   payments and order types lock together on one four-column grid and
   the till's first screen holds all four. Lists that grow with a busy
   shop stay whole rows below: staff and recent orders never fit a tile.

   Rules only, no change to the page, so a phone or a tablet keeps the
   same cards in the same order. Staff and busiest times come and go with
   who is looking and the dates; each case below fills its row. A failed
   load has no chart and keeps its rows.
   --------------------------------------------------------------- */

@media (min-width: 1281px) and (min-height: 501px) {
    .dashboard-page:has(#salesOverviewCard) {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-page:has(#salesOverviewCard) > * {
        grid-column: 1 / -1;
    }

    .dashboard-page:has(#salesOverviewCard) > .dash-row:not(:last-child) {
        display: contents;
    }

    /* The chart stands two tiles tall beside the figures. */
    #salesOverviewCard {
        grid-column: span 2;
        grid-row: span 2;
    }

    /* Order types is wide and low: two lists side by side, under the
       figures it belongs with. */
    .dash-row .dash-card:has(> #orderTypes) {
        grid-column: span 2;
    }

    #orderTypes .dash-pay {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 24px;
    }

    #orderTypes .dash-pay-row {
        padding-block: 8px;
    }

    #orderTypes .dash-pay-row:nth-child(-n + 2) {
        padding-block-start: 0;
    }

    #orderTypes .dash-pay-row:nth-child(2) {
        border-block-start: 0;
    }

    #orderTypes .dash-pay-row:nth-last-child(-n + 2):nth-child(odd),
    #orderTypes .dash-pay-row:last-child {
        padding-block-end: 0;
    }

    #orderTypes .dash-pay-row:only-child {
        grid-column: 1 / -1;
    }

    /* The three status names fit a narrow tile whole. */
    .dash-status-list {
        gap: 4px;
    }

    .dash-status-cell {
        padding-inline: 8px;
    }

    /* Then what sold, two across, or three with the busiest times. */
    #topSellingCard,
    .dash-row .dash-card:has(> #categorySales),
    .dash-row .dash-card:has(> #busiestTimes) {
        grid-column: span 2;
        order: 1;
    }

    .dashboard-page:has(#busiestTimes) #topSellingCard,
    .dashboard-page:has(#busiestTimes) .dash-card:has(> #categorySales) {
        grid-column: span 1;
    }

    /* The tabs are taller than a title; this band still matches its row. */
    #topSellingCard .dash-card-head {
        padding-block: 4px;
    }

    /* In a single tile the tabs stay on the title's line at the till; a
       narrower window drops them under it rather than cutting them. */
    .dashboard-page:has(#busiestTimes) #topSellingCard .dash-card-head {
        flex-wrap: wrap;
        padding-inline-end: 12px;
    }

    .dashboard-page:has(#busiestTimes) #topSellingCard .dash-seg-btn {
        padding: 0 4px;
    }

    /* The busiest times take the height the lists beside them need. */
    .dash-card:has(> #busiestTimes) .dash-card-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .dash-heat {
        flex: 1 1 auto;
    }

    /* Whole rows from here down. */
    .dash-row .dash-card:has(> #staffSales) {
        grid-column: 1 / -1;
        order: 2;
    }

    .dashboard-page:has(#salesOverviewCard) > .dash-row:last-child {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        order: 3;
    }

    /* What needs doing stays above the long list of what was done. */
    .dashboard-page:has(#salesOverviewCard) > .dash-row:last-child > .dash-card--wide {
        grid-column: 1 / -1;
        order: 1;
    }
}

/* The till's short screen: all four tiles on its first screen. */
@media (min-width: 1281px) and (min-height: 501px) and (max-height: 820px) {
    #topSellingCard .dash-card-head {
        padding-block: 3px;
    }

    #orderTypes.dash-card-body {
        padding-block: 8px;
    }

    #orderTypes .dash-pay-row {
        row-gap: 4px;
    }

    .dash-status-cell {
        padding-block: 4px;
    }
}