/* Sessions (Shift) page - B60 OS (page-scoped) */

.sessions-page {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-5);
}

/*
 * The page scrolls; its cards never shrink to fit. design-system.css holds
 * this column to the screen's height (min-height: 0), and the open-shift card
 * hides its overflow, which lets a flex item shrink to nothing: once the shift
 * history grew past one screen, the card was squeezed to 2px and the top of
 * the page looked empty (Oak N' Bean, 2026-10-23).
 */
.sessions-page > * {
    flex-shrink: 0;
}

/* One gap between the open shift and the history: components.css adds a
   24px document margin on top of the flex gap. */
.page-content .sessions-page > * + * {
    margin-top: 0;
}

/* -- The open shift (rebuilt 2026-10-15) -------------------------------------
   One panel: who and since when with the three actions, then what the shift
   has sold, what should be in the drawer with the sum that makes it, and a
   short list of the rest. Hairlines between the parts instead of eight boxes
   with an icon each. */

.ds-card.shift-live {
    --shift-line: color-mix(in srgb, var(--ds-text-primary) 8%, var(--ds-surface));
    padding: 0;
    overflow: hidden;
}

.shift-live-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 20px 24px 16px;
}


.shift-live-who {
    min-width: 0;
}

.shift-live-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.shift-live-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-success-tint);
    color: var(--ds-success-text);
    font-size: 12.5px;
    font-weight: var(--ds-fw-semibold);
}

.shift-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: shift-live-pulse 2.4s ease-in-out infinite;
}

@keyframes shift-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .shift-live-dot { animation: none; }
}

.shift-live-id {
    font-family: var(--ds-font-mono);
    font-size: 12.5px;
    color: var(--ds-text-tertiary);
}

.shift-live-name {
    margin: 8px 0 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ds-text-primary);
}

.shift-live-when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--ds-text-secondary);
}

.shift-live-timer {
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Open more than a day: most likely never closed. */
.shift-live-timer.is-long {
    color: var(--ds-warning-text);
}

.shift-live .sessions-takeover {
    margin: 8px 0 0;
    font-size: 13.5px;
}

.shift-live-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.shift-live-actions .ds-btn {
    min-height: 44px;
}

.shift-live-body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 0.9fr);
    gap: 1px;
    border-top: 1px solid var(--shift-line);
    background: var(--shift-line);
}

.shift-live-body.is-plain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shift-live-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 16px 24px 20px;
    background: var(--ds-surface);
}

/* What the shift has sold leads: larger, on a faint wash of the shop's
   colour, as on the Dashboard. */
/* The cafe colour glowing up from the far corner; 7% was too faint to see. */
.shift-live-cell.is-lead {
    background:
        radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, var(--ds-primary) 16%, transparent), transparent 70%),
        var(--ds-surface);
}

[dir="rtl"] .shift-live-cell.is-lead {
    background:
        radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--ds-primary) 16%, transparent), transparent 70%),
        var(--ds-surface);
}

.shift-live-label {
    font-size: 13.5px;
    font-weight: var(--ds-fw-medium);
    color: var(--ds-text-secondary);
}

.shift-live-figure {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ds-text-primary);
    white-space: nowrap;
}

.shift-live-cell.is-lead .shift-live-figure {
    font-size: 36px;
    letter-spacing: -0.03em;
}

.shift-live-unit {
    margin-inline-start: 4px;
    font-size: 15px;
    font-weight: var(--ds-fw-semibold);
    letter-spacing: 0;
    color: var(--ds-text-secondary);
}

.shift-live-sub {
    font-size: 13px;
    color: var(--ds-text-secondary);
}

.shift-live-sub.is-warn {
    color: var(--ds-warning-text);
}

.shift-live-ledger,
.shift-live-facts {
    display: flex;
    flex-direction: column;
    margin: 8px 0 0;
}

.shift-live-ledger > div,
.shift-live-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 13.5px;
}

.shift-live-ledger > div + div {
    border-top: 1px solid var(--shift-line);
}

.shift-live-facts {
    margin: 0;
}

.shift-live-facts > div {
    padding: 8px 0;
    font-size: 14px;
}

.shift-live-facts > div + div {
    border-top: 1px solid var(--shift-line);
}

.shift-live-ledger dt,
.shift-live-facts dt {
    color: var(--ds-text-secondary);
}

.shift-live-ledger dd,
.shift-live-facts dd {
    margin: 0;
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-text-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.shift-live-facts > div.is-warn dd {
    color: var(--ds-warning-text);
}

/* A short till (1520x730): the same panel, a little tighter, so the shift
   history starts on the first screen. */
@media (max-height: 820px) {
    .shift-live-head {
        padding: 16px 20px 16px;
    }

    .shift-live-cell {
        padding: 16px 20px 16px;
    }

    .shift-live-cell.is-lead .shift-live-figure {
        font-size: 32px;
    }

    .shift-live-figure {
        font-size: 26px;
    }
}

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

    .shift-live-body > .shift-live-cell:nth-child(3) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .shift-live-body,
    .shift-live-body.is-plain {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sessions-empty {
    text-align: center;
    padding: var(--ds-space-12) var(--ds-space-6);
}

.sessions-empty-icon {
    width: 64px;
    height: 64px;
    margin-inline: auto;
    margin-block-end: var(--ds-space-4);
    color: var(--ds-text-tertiary);
}

.sessions-empty-title {
    margin: 0 0 var(--ds-space-2);
    font-size: var(--ds-text-lg);
    font-weight: var(--ds-fw-semibold);
}

.sessions-empty-desc {
    margin: 0 0 var(--ds-space-6);
    color: var(--ds-text-secondary);
    font-size: var(--ds-text-sm);
}

.sessions-history-wrap {
    overflow-x: auto;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
}

.sessions-close-summary {
    padding: var(--ds-space-5);
    background: var(--ds-bg-inset);
    border-radius: var(--ds-radius-md);
    margin-block-end: var(--ds-space-5);
}

.sessions-close-row {
    display: flex;
    justify-content: space-between;
    margin-block-end: var(--ds-space-2);
    font-size: var(--ds-text-sm);
}

.sessions-close-row.is-total {
    font-weight: var(--ds-fw-bold);
    padding-block-start: var(--ds-space-3);
    margin-block-start: var(--ds-space-2);
    border-block-start: 1px solid var(--ds-border);
}

/* Wave 4 T-N: repeated inline styles lifted from sessions.js */
.sessions-row-between {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;
}
.sessions-row-between-md {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.sessions-meta {
    font-size: 11px;
    color: var(--text-secondary);
}
.sessions-meta-mb {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.sessions-meta-md {
    font-size: 13px;
    color: var(--text-secondary);
}
.sessions-inset {
    background: var(--bg-tertiary);
    padding: 12px;
    border-radius: var(--radius-md);
}
.sessions-accent-value {
    font-weight: 600;
    color: var(--accent);
    margin-top: 4px;
}
.sessions-mb-20 { margin-bottom: 20px; }
.sessions-mb-8 { margin-bottom: 8px; }
.sessions-title-sm {
    font-size: 14px;
    margin-bottom: 8px;
}
.sessions-fw-semibold { font-weight: 600; }
.sessions-label-md {
    font-weight: 500;
    font-size: 13px;
}

/* -- Shift handover and same-day shifts (2026-10) --------------------------
   Two cashiers on one day are told apart by name and by Morning/Afternoon,
   not by an id. */

/* The shift's name in a soft shade of the cafe colour with darker text, so
   it reads as a label beside the wave rather than as a button. */
.sessions-shift-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--ds-space-2);
    border-radius: var(--ds-radius-pill);
    background: color-mix(in srgb, var(--ds-primary) 12%, var(--ds-surface));
    color: color-mix(in srgb, var(--ds-primary) 70%, #000);
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-fw-semibold);
    white-space: nowrap;
}

.sessions-takeover {
    margin: calc(-1 * var(--ds-space-3)) 0 var(--ds-space-5);
    font-size: var(--ds-text-sm);
    color: var(--ds-text-secondary);
}

.sessions-takeover-ok {
    color: var(--ds-success-text);
    font-weight: var(--ds-fw-medium);
}

.sessions-takeover-diff {
    color: var(--ds-danger-text);
    font-weight: var(--ds-fw-medium);
}

/* History: one block per day. */
.sessions-day {
    margin-top: var(--ds-space-4);
}

.sessions-day + .sessions-day {
    margin-top: var(--ds-space-6);
}

.sessions-day-head {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    margin-bottom: var(--ds-space-2);
}

.sessions-day-title {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.sessions-day-title strong {
    font-size: var(--ds-text-md, var(--ds-text-base));
    color: var(--ds-text-primary);
}

.sessions-day-title span {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
}

.sessions-day-total {
    font-size: var(--ds-text-lg);
    font-weight: var(--ds-fw-bold);
    color: var(--ds-text-primary);
}

.sessions-day-table td {
    vertical-align: middle;
}

.sessions-day-table tr.is-open td {
    background: var(--ds-success-tint);
}

.sessions-shift-id {
    margin-inline-start: var(--ds-space-2);
    font-size: var(--ds-text-xs);
    color: var(--ds-text-tertiary);
}

.sessions-gift-count {
    font-size: var(--ds-text-xs);
    color: var(--ds-info);
}

.sessions-variance.is-over { color: var(--ds-success); }
.sessions-variance.is-short { color: var(--ds-danger); }

/* Start modal: who, which shift, and the drawer handed over. */
.sessions-label-picks {
    display: grid;
    /* As many as the cafe has set up, not always four. */
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: var(--ds-space-2);
}

.sessions-label-pick {
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--ds-space-1) var(--ds-space-2);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-md);
    background: var(--ds-bg-surface);
    color: var(--ds-text-primary);
    font-weight: var(--ds-fw-medium);
    cursor: pointer;
}

.sessions-label-pick.is-picked {
    border-color: var(--ds-primary);
    background: var(--ds-primary-tint);
    color: var(--ds-primary);
}

/* When each shift runs, under its name. */
.sessions-label-hours {
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-fw-normal);
    color: var(--ds-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.sessions-label-pick.is-picked .sessions-label-hours {
    color: inherit;
}

.sessions-handover {
    margin-bottom: var(--ds-space-4);
    padding: var(--ds-space-4);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-bg-inset);
}

.sessions-handover-from {
    font-size: var(--ds-text-sm);
    color: var(--ds-text-secondary);
}

.sessions-handover-amount {
    margin-top: var(--ds-space-1);
    font-size: var(--ds-text-2xl);
    font-weight: var(--ds-fw-bold);
    color: var(--ds-text-primary);
}

.sessions-handover-caption {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
}

.sessions-handover-note {
    margin-top: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-3);
    border-inline-start: 3px solid var(--ds-warning);
    background: var(--ds-warning-tint);
    font-size: var(--ds-text-sm);
    white-space: pre-wrap;
}

.sessions-handover-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-2);
    margin-top: var(--ds-space-3);
}

.sessions-handover-opt {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    min-height: 44px;
    padding: 0 var(--ds-space-3);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-md);
    background: var(--ds-bg-surface);
    font-size: var(--ds-text-sm);
    cursor: pointer;
}

.sessions-handover-opt:has(input:checked) {
    border-color: var(--ds-primary);
    background: var(--ds-primary-tint);
}

.sessions-handover .ds-field {
    margin-top: var(--ds-space-3);
    margin-bottom: 0;
}

/* .ds-field sets its own display, which beats the hidden attribute. */
.sessions-handover .ds-field[hidden] {
    display: none;
}

.sessions-start > .ds-field,
.sessions-start > .sessions-handover {
    margin-bottom: var(--ds-space-4);
}

/* Close modal: what this shift leaves for the next one, in its own box. */
.sessions-close-handover {
    margin: var(--ds-space-4) 0;
    padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-3);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-md);
}

.sessions-close-handover legend {
    padding: 0 var(--ds-space-1);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-text-primary);
}

.sessions-close-handover-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--ds-space-3);
    align-items: start;
}

.sessions-close-handover-grid .ds-field {
    margin-bottom: 0;
}

.sessions-close-handover-hint {
    margin: var(--ds-space-2) 0 0;
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
}

.sessions-blind-note {
    margin: 0 0 var(--ds-space-4);
    padding: var(--ds-space-3);
    border-radius: var(--ds-radius-md);
    background: var(--ds-info-tint);
    font-size: var(--ds-text-sm);
}

/* Simple day: the headings inside the day report window. */
.sessions-day-report-title {
    margin: var(--ds-space-4) 0 var(--ds-space-2);
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: var(--ds-text-secondary);
}

/* Check count: short, over or matching, shown after a blind count. */
.sessions-count-result {
    margin: 0 0 var(--ds-space-4);
    padding: var(--ds-space-3);
    border-radius: var(--ds-radius-md);
    background: var(--ds-success-tint);
    font-size: var(--ds-text-sm);
    font-weight: 600;
}

.sessions-count-result.is-short {
    background: var(--ds-danger-tint);
}

.sessions-count-result.is-over {
    background: var(--ds-warning-tint);
}

/* No connection, or sales still waiting on this till (2026-10). */
.sessions-offline-note,
.sessions-close-waiting {
    margin: 0 0 var(--ds-space-4);
    padding: var(--ds-space-3);
    border-radius: var(--ds-radius-md);
    background: var(--ds-warning-tint);
    font-size: var(--ds-text-sm);
}

.sessions-pending-chip {
    display: inline-flex;
    align-items: center;
    margin-inline-start: var(--ds-space-2);
    padding: 2px var(--ds-space-2);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-warning-tint);
    color: var(--ds-text-secondary, inherit);
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-fw-semibold);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .sessions-label-picks,
    .sessions-handover-choice,
    .sessions-close-handover {
        grid-template-columns: 1fr 1fr;
    }
}

/* -- Shift view (rebuilt 2026-10-15) -----------------------------------------
   A wide window: a band across the top says who, when, what was sold, taken
   off and given away; under it the drawer and how it was paid stay on the
   left while orders, categories and cancels take turns on the right. It was
   every section of the report stacked down one long scroll. Someone who may
   not see sales gets the small .shv window with the facts and no figures. */

.shv {
    --shv-line: color-mix(in srgb, var(--ds-text-primary) 8%, var(--ds-surface));
    --shv-hover: color-mix(in srgb, var(--ds-text-primary) 4%, var(--ds-surface));
    --shv-track: color-mix(in srgb, var(--ds-text-primary) 7%, var(--ds-surface));
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
}

.modal.modal-lg:has(.shv--split) {
    max-width: min(1180px, calc(100vw - 32px));
    height: min(92vh, 860px);
    overflow: hidden;
}

.modal:has(.shv--split) .modal-body {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.modal:has(.shv--split) .modal-footer {
    display: none;
}

.shv.shv--split {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(300px, 356px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
}

/* The band: hairlines are the band's own colour through a 1px gap. */
.shv-band {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 0.85fr) minmax(0, 0.85fr);
    gap: 1px;
    border-bottom: 1px solid var(--shv-line);
    background: var(--shv-line);
}

.shv-band > * {
    min-width: 0;
    padding: 16px 24px;
    background: var(--ds-surface);
}

.shv-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shv-who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2);
}

.shv-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ds-text-primary);
}

.shv-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-text-secondary);
}

.shv-status.is-open {
    color: var(--ds-success-text);
}

.shv-status.is-open::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.shv-when,
.shv-took {
    font-size: 13px;
    color: var(--ds-text-secondary);
}

.shv-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shv-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);
}

.shv-kpi-label {
    font-size: 12.5px;
    font-weight: var(--ds-fw-medium);
    color: var(--ds-text-secondary);
}

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

.shv-kpi.is-lead .shv-kpi-value {
    font-size: 28px;
}

.shv-kpi.is-danger .shv-kpi-value {
    color: var(--ds-danger-text);
}

.shv-kpi.is-quiet .shv-kpi-value {
    font-size: 17px;
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-text-tertiary);
}

.shv-unit {
    margin-inline-start: 4px;
    font-size: 13px;
    font-weight: var(--ds-fw-semibold);
    letter-spacing: 0;
    color: var(--ds-text-secondary);
}

.shv-kpi-sub {
    font-size: 12.5px;
    color: var(--ds-text-secondary);
}

/* Left: the drawer, how it was paid, the notes. */
.shv-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 24px 24px;
    border-inline-end: 1px solid var(--shv-line);
    background: color-mix(in srgb, var(--ds-text-primary) 2%, var(--ds-surface));
}

.shv-h {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-text-primary);
}

.shv-line {
    display: flex;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: 8px 0;
    border-bottom: 1px solid var(--shv-line);
    font-size: 13.5px;
    color: var(--ds-text-secondary);
}

.shv-line > span:last-child {
    font-weight: var(--ds-fw-medium);
    color: var(--ds-text-primary);
    white-space: nowrap;
}

.shv-line.is-total {
    padding-top: 8px;
    border-bottom: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ds-text-primary);
}

.shv-line.is-total > span:last-child {
    font-weight: 700;
}

.shv-line-note {
    margin: 0 0 4px;
    font-size: 12.5px;
    color: var(--ds-text-secondary);
}

.shv-verdict {
    margin: 4px 0 8px;
    padding: 8px 12px;
    border-radius: var(--ds-radius-sm);
    font-size: 13.5px;
    font-weight: var(--ds-fw-semibold);
}

.shv-verdict.is-even {
    background: var(--ds-success-tint);
    color: var(--ds-success-text);
}

.shv-verdict.is-short {
    background: var(--ds-danger-tint);
    color: var(--ds-danger-text);
}

.shv-verdict.is-over {
    background: var(--ds-warning-tint);
    color: var(--ds-warning-text);
}

/* A name, its amount, its share, and the share as a bar. */
.shv-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shv-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 38px;
    align-items: baseline;
    gap: 8px 8px;
    font-size: 13.5px;
}

.shv-bar-name {
    overflow: hidden;
    color: var(--ds-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shv-bar-amt {
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-text-primary);
    white-space: nowrap;
}

.shv-bar-pct {
    font-size: 12.5px;
    color: var(--ds-text-secondary);
    text-align: end;
}

.shv-bar-track {
    grid-column: 1 / -1;
    height: 5px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--shv-track);
}

.shv-bar-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ds-primary);
}

.shv-empty {
    margin: 0;
    padding: var(--ds-space-2) 0;
    font-size: 13.5px;
    color: var(--ds-text-tertiary);
}

.shv-notes {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.shv-notes p {
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--shv-line);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface);
    font-size: 13.5px;
    color: var(--ds-text-primary);
}

.shv-notes p span {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    color: var(--ds-text-secondary);
}

.shv-hidden-note {
    margin: 0;
    font-size: var(--ds-text-base);
    color: var(--ds-text-secondary);
}

/* Right: tabs, one part of the report at a time. */
.shv-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.shv-tabs {
    flex: none;
    display: flex;
    gap: 4px;
    padding: 4px 16px 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--shv-line);
}

.shv-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 12px;
    border: 0;
    background: none;
    color: var(--ds-text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: var(--ds-fw-semibold);
    white-space: nowrap;
    cursor: pointer;
}

:where(.can-hover) .shv-tab:hover {
    color: var(--ds-text-primary);
}

.shv-tab.is-on {
    color: var(--ds-text-primary);
}

.shv-tab.is-on::after {
    content: '';
    position: absolute;
    inset-inline: 8px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--ds-primary);
}

.shv-tab:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: -6px;
    border-radius: 10px;
}

.shv-tab-n {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    padding: 0 8px;
    border-radius: var(--ds-radius-pill);
    background: var(--shv-hover);
    font-size: 12px;
    color: var(--ds-text-secondary);
}

.shv-tab.is-on .shv-tab-n {
    background: color-mix(in srgb, var(--ds-primary) 12%, var(--ds-surface));
    color: var(--ds-text-primary);
}

.shv-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 16px 24px;
}

.shv-panel[hidden] {
    display: none;
}

.shv-panel-note {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--ds-text-secondary);
}

.shv-panel-note strong {
    color: var(--ds-text-primary);
}

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

.shv-filter {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--shv-line);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    color: var(--ds-text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: var(--ds-fw-medium);
    cursor: pointer;
}

.shv-filter span {
    margin-inline-start: 2px;
    color: var(--ds-text-tertiary);
}

.shv-filter.is-on {
    border-color: var(--ds-text-primary);
    background: var(--ds-text-primary);
    color: var(--ds-surface);
}

.shv-filter.is-on span {
    color: inherit;
    opacity: 0.7;
}

/* Orders: a row per order that opens to show what was on it and what can
   be done with it. */
.shv-order-list {
    overflow: hidden;
    border: 1px solid var(--shv-line);
    border-radius: var(--ds-radius-md);
}

.shv-order + .shv-order {
    border-top: 1px solid var(--shv-line);
}

.shv-order[hidden] {
    display: none;
}

.shv-order-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) minmax(0, 150px) 92px 100px 16px;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 8px 16px;
    list-style: none;
    cursor: pointer;
    transition: background-color 120ms var(--ds-ease-standard);
}

.shv-order-row::-webkit-details-marker {
    display: none;
}

.shv-order-row::marker {
    content: '';
}

:where(.can-hover) .shv-order-row:hover,
.shv-order[open] > .shv-order-row {
    background: var(--shv-hover);
}

.shv-order-row:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: -2px;
}

.shv-order-time {
    font-size: 13.5px;
    color: var(--ds-text-secondary);
    white-space: nowrap;
}

.shv-order-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.shv-order-ref {
    font-size: 13.5px;
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-text-primary);
}

.shv-order-where,
.shv-order-meta {
    overflow: hidden;
    font-size: 12.5px;
    color: var(--ds-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shv-order-meta {
    font-size: 13px;
}

.shv-order-status {
    display: flex;
    min-width: 0;
}

.shv-order-amount {
    font-size: 14.5px;
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-text-primary);
    text-align: end;
    white-space: nowrap;
}

/* Struck through: the money went back, so it is not in the takings. */
.shv-order-amount.is-refunded {
    color: var(--ds-danger-text);
    text-decoration: line-through;
}

.shv-order-chev {
    color: var(--ds-text-tertiary);
    transition: transform 150ms var(--ds-ease-standard);
}

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

.shv-order[open] .shv-order-chev,
body[dir="rtl"] .shv-order[open] .shv-order-chev {
    transform: rotate(90deg);
}

.shv-order-more {
    padding: 4px 16px 16px;
    padding-inline-start: calc(16px + 72px + 12px);
    background: var(--shv-hover);
}

.shv-order-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shv-order-items li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 4px 0;
    font-size: 13.5px;
    color: var(--ds-text-primary);
}

.shv-item-qty,
.shv-item-amt {
    color: var(--ds-text-secondary);
}

.shv-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.shv-refund {
    color: var(--ds-danger-text);
}

.shv-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--ds-radius-pill);
    background: var(--shv-hover);
    color: var(--ds-text-secondary);
    font-size: 12.5px;
    font-weight: var(--ds-fw-semibold);
    white-space: nowrap;
}

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

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

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

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

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

/* Cancels and voids: what came off, why, who, and the money. */
.shift-removals {
    overflow: hidden;
    border: 1px solid var(--shv-line, var(--ds-border-default));
    border-radius: var(--ds-radius-md);
}

.shift-removal {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 12px 16px;
}

.shift-removal + .shift-removal {
    border-top: 1px solid var(--shv-line, var(--ds-border-default));
}

.shift-removal-main {
    min-width: 0;
}

.shift-removal-what {
    font-size: 13.5px;
    color: var(--ds-text-primary);
}

.shift-removal-why {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--ds-text-secondary);
}

.shift-removal-amt {
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-text-primary);
    text-align: end;
    white-space: nowrap;
}

.shift-removal-print {
    margin-top: 8px;
    font-weight: var(--ds-fw-semibold);
}

/* A short till (1520x730): the band and the tabs a little tighter. */
@media (max-height: 820px) {
    .shv-band > * {
        padding: 12px 20px;
    }

    .shv-side {
        gap: 16px;
        padding: 16px 20px 20px;
    }

    .shv-tab {
        height: 42px;
    }
}

/* Narrower screens: one column, the whole window scrolls. */
@media (max-width: 1000px) {
    .modal:has(.shv--split) .modal-body {
        display: block;
        overflow-y: auto;
    }

    .shv.shv--split {
        display: block;
    }

    .shv-band {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shv-band > .shv-head {
        grid-column: 1 / -1;
    }

    .shv-side {
        overflow: visible;
        border-inline-end: 0;
        border-bottom: 1px solid var(--shv-line);
    }

    .shv-panel {
        overflow: visible;
    }
}

@media (max-width: 640px) {
    .shv-band {
        grid-template-columns: minmax(0, 1fr);
    }

    .shv-order-row {
        grid-template-columns: 56px minmax(0, 1fr) auto auto 16px;
    }

    .shv-order-meta {
        display: none;
    }

    .shv-order-more {
        padding-inline-start: 16px;
    }
}

/* After a hand-over: the invitation to sign out. */
.sessions-signout-note {
    margin: 0;
    padding: var(--ds-space-2) 0;
    font-size: var(--ds-text-base);
}

.sessions-restart {
    margin-block-start: var(--ds-space-3);
}

/* A note with an arrow at the button it is about (Sessions._pointAt). Placed
   from the button's own position, so it works on either side in Arabic. */
.shift-tip {
    position: fixed;
    z-index: var(--ds-z-toast);
    max-width: 18rem;
    padding: var(--ds-space-2) var(--ds-space-3);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-text-primary);
    color: var(--ds-surface);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-medium);
    line-height: 1.4;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    animation: shift-tip-in 160ms ease-out;
}

.shift-tip::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: inherit;
    transform: rotate(45deg);
}

.shift-tip.is-below::before {
    top: -5px;
    left: calc(var(--tip-arrow) - 5px);
}

.shift-tip.is-right::before {
    left: -5px;
    top: calc(var(--tip-arrow) - 5px);
}

.shift-tip.is-left::before {
    right: -5px;
    top: calc(var(--tip-arrow) - 5px);
}

.shift-tip-target {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}

@keyframes shift-tip-in {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shift-tip {
        animation: none;
    }
}