/*
 * DSE custom details (feature preview "details", 2026-10-14): staff and customer.
 * Tabular figures for numbers, smooth cross-page transitions, one consistent focus ring,
 * and illustrated empty states.
 */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; animation-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

html:is(#dse-dt#dse-dt#dse-dt, *) body :is(table.list td, table.list th, .dse-tickets-stat, [class*="-stat"] strong, [class*="-kpi"] strong, time, .queue-count, .dse-ctx-stat strong) {
    font-variant-numeric: tabular-nums;
}

html:is(#dse-dt#dse-dt#dse-dt, *) body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid rgba(56, 122, 192, .5) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Illustrated empty states (added by dse-details-2026.js where a list or queue is empty). */
html:is(#dse-dt#dse-dt#dse-dt, *) body .dse-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    padding: 34px 20px 30px !important; margin: 8px 0 !important;
    font-family: "DSE Inter", Inter, system-ui, sans-serif !important; color: #62666e !important;
}
html:is(#dse-dt#dse-dt#dse-dt, *) body .dse-empty svg { width: 120px; height: 90px; margin-bottom: 6px; }
html:is(#dse-dt#dse-dt#dse-dt, *) body .dse-empty strong { font: 650 16px/1.3 "DSE Inter", Inter, system-ui, sans-serif !important; color: #17181b !important; }
html:is(#dse-dt#dse-dt#dse-dt, *) body .dse-empty span { font: 400 14px/1.5 "DSE Inter", Inter, system-ui, sans-serif !important; color: #62666e !important; max-width: 46ch; }

/* Icon set for the new components: 20px, currentColor strokes. */
.dse-icon { width: 1.15em; height: 1.15em; vertical-align: -.2em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }