.units-group + .units-group { margin-top: 20px; }
/* Put each units filter name above its select so the label reads like a field heading on phones. */
.units-page .operations-options label { flex-direction: column; align-items: flex-start; gap: 4px; }
/* The same records reflow on phones; session actions never depend on hover or horizontal scrolling. */
.unit-overview { display: grid; grid-template-columns: minmax(130px,1.3fr) minmax(80px,.8fr) minmax(80px,.8fr) 65px 128px; align-items: center; gap: 12px; padding: 12px 16px; font-size: 16px; }
.unit-column-heading { color: var(--cafe-text-subtle); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.unit-record { border-top: 1px solid var(--cafe-line); }
.unit-identity { display: grid; gap: 4px; min-width: 0; }
.unit-identity strong { color: var(--cafe-text); font-weight: 800; letter-spacing: .03em; overflow-wrap: anywhere; }
.unit-connection { color: var(--cafe-text-muted); font-size: 16px; overflow-wrap: anywhere; }
.unit-status { display: flex; align-items: center; gap: 7px; color: var(--cafe-text-muted); font-size: 16px; }
.unit-status::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.unit-status--running { color: var(--cafe-success); }
.unit-status--idle { color: var(--cafe-warning); }
.unit-status--scheduled { color: var(--cafe-warning); }
.unit-time { color: var(--cafe-text); font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 800; overflow-wrap: anywhere; }
.unit-rate { color: var(--cafe-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.unit-actions { display: flex; gap: 6px; }
.unit-actions .mud-icon-button { width: 38px; height: 38px; padding: 8px; border: 1px solid var(--cafe-border); border-radius: 9px; background: var(--cafe-surface-raised); color: var(--cafe-accent-soft); }
.unit-actions .unit-action { border-color: color-mix(in srgb, var(--unit-action-color) 42%, var(--cafe-border)); background: color-mix(in srgb, var(--unit-action-color) 12%, var(--cafe-surface-raised)); color: var(--unit-action-color); }
.unit-actions .unit-action--session { --unit-action-color: var(--cafe-info); }
.unit-actions .unit-action--start { --unit-action-color: var(--cafe-success); }
.unit-actions .unit-action--update { --unit-action-color: var(--cafe-warning); }
.unit-actions .unit-action:not(:disabled):hover { border-color: var(--unit-action-color); background: color-mix(in srgb, var(--unit-action-color) 22%, var(--cafe-surface-raised)); }
.unit-actions .unit-action:focus-visible { outline: 2px solid var(--unit-action-color); outline-offset: 2px; }
.unit-actions .mud-icon-button:disabled { opacity: .4; }
.unit-actions .mud-icon-root { width: 18px; height: 18px; }
.unit-details { border-top: 1px solid var(--cafe-line); padding: 0 16px 8px; color: var(--cafe-text-muted); font-size: 16px; }
.unit-details summary { padding: 12px 0 4px; cursor: pointer; }
.unit-device { display: grid; grid-template-columns: 85px 1fr; gap: 6px; margin: 14px 0; }
.unit-device dt { color: var(--cafe-text-subtle); }
.unit-device dd { margin: 0; overflow-wrap: anywhere; }
/* Existing active/upcoming dialogs and payment fields stay inside the expanded record. */
/* Session facts use the same violet surface as the overview, without MudTable's gray cell fills. */
.unit-details .unit-session-toolbar { flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 0 12px; }
.unit-session-toolbar .unit-session-title { color: var(--cafe-text); font-size: 16px; font-weight: 800; }
.unit-session-toolbar .mud-button-root { min-height: 44px; font-size: 16px; }
.unit-session-facts { margin: 0 0 12px; padding: 4px 14px; border: 1px solid var(--cafe-border); border-radius: 12px; background: var(--cafe-surface-raised); }
.unit-session-facts > div { display: grid; grid-template-columns: minmax(100px,.9fr) minmax(0,1.3fr); gap: 16px; padding: 12px 0; }
.unit-session-facts > div + div { border-top: 1px solid var(--cafe-line); }
.unit-session-facts dt { color: var(--cafe-text-muted); }
.unit-session-facts dd { margin: 0; color: var(--cafe-text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (max-width: 450px) {
    .unit-details { font-size: 16px; }
    .unit-session-toolbar .mud-button-root { min-height: 44px; }
    .unit-session-toolbar .mud-spacer { display: none; }
    .unit-session-toolbar .unit-session-title { flex-basis: 100%; }
    .unit-session-facts > div { grid-template-columns: minmax(0,1fr); gap: 5px; }
}
@media (max-width: 1100px) and (min-width: 651px) {
    /* Tablet rows use two readable fact columns and a full-width action row; five squeezed tracks clipped the last button. */
    .unit-column-heading { display: none; }
    .unit-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 14px 16px; }
    .unit-overview > * { min-width: 0; }
    .unit-actions { grid-column: 1 / -1; justify-content: flex-end; min-width: 0; gap: 8px; }
    .unit-actions .mud-icon-button { width: 44px; height: 44px; flex: 0 0 44px; }
}
@media (max-width: 650px) {
    .unit-column-heading { display: none; }
    .unit-overview { font-size: 16px; }
    .unit-connection { font-size: 16px; }
    /* Three 44px controls plus gaps need a real action column; the old 116px track clipped the refresh control. */
    .unit-overview { grid-template-columns: minmax(0,1fr) 140px; gap: 8px; padding: 14px 12px; }
    .unit-identity { grid-column: 1; grid-row: 1; }
    .unit-time { grid-column: 1; grid-row: 2; font-size: 16px; }
    .unit-rate { grid-column: 1; grid-row: 3; font-size: 16px; }
    .unit-status { grid-column: 2; grid-row: 1; }
    .unit-actions { grid-column: 2; grid-row: 2 / 4; gap: 4px; }
    .unit-actions .mud-icon-button { width: 44px; height: 44px; }
    .unit-details summary { padding-block: 14px; }
}
.unit-sessions { width: 100%; min-width: 0; }