*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--color-ink); background: var(--color-canvas); font-family: var(--font-family); font-size: var(--font-body); line-height: var(--line-body); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.icon { width: var(--icon-size); height: var(--icon-size); flex: 0 0 auto; }
.skip-link { position: fixed; z-index: 10; top: var(--space-4); left: var(--space-4); padding: var(--space-3) var(--space-5); background: var(--color-surface); border-radius: var(--radius-sm); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.sidebar { display: flex; flex-direction: column; align-self: start; position: sticky; top: 0; min-height: 100vh; min-height: 100dvh; padding: var(--space-8) var(--space-4) var(--space-5); color: var(--color-sidebar-text); background: var(--color-sidebar); }
.sidebar :focus-visible { outline-color: var(--focus-on-dark); }
.brand { display: flex; align-items: center; gap: var(--space-3); width: fit-content; margin-left: var(--space-3); color: var(--color-on-dark); font-size: var(--font-brand); font-weight: var(--weight-bold); letter-spacing: var(--tracking-heading); line-height: var(--line-heading); }
.brand-accent { color: var(--color-accent); }
.brand-mark { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: var(--space-1); width: var(--space-7); height: var(--space-7); }
.brand-mark span { height: 75%; background: var(--color-accent); border-radius: var(--border-width); transform: skewY(-20deg); }
.brand-mark span:nth-child(2) { height: 100%; background: var(--color-on-dark); }
.sidebar-caption { margin: var(--space-3) 0 var(--space-10) var(--space-3); color: var(--color-sidebar-muted); font-size: var(--font-sm); }
.navigation-group + .navigation-group { margin-top: var(--space-6); }
.navigation-label { padding: 0 var(--space-3); margin-bottom: var(--space-2); font-size: var(--font-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-sidebar-muted); }
.main-navigation ul { list-style: none; margin: 0; padding: 0; }
.main-navigation li + li { margin-top: var(--space-1); }
.navigation-link { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-weight: var(--weight-medium); transition: background var(--transition-fast), color var(--transition-fast); }
.navigation-link:hover { color: var(--color-on-dark); background: var(--color-sidebar-hover); }
.navigation-link[aria-current="page"] { color: var(--color-on-dark); background: var(--color-sidebar-active); }
.sidebar-footer { margin-top: auto; padding: var(--space-8) var(--space-3) 0; }
.sidebar-environment { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-sidebar-divider); font-size: var(--font-sm); }
.sidebar-environment > span { width: var(--dot-size); height: var(--dot-size); background: var(--color-accent); border-radius: var(--radius-pill); }
.sidebar-footer-caption { display: block; margin-top: var(--space-1); font-size: var(--font-xs); color: var(--color-sidebar-muted); }
.workspace { display: flex; flex-direction: column; min-width: 0; }
.app-header { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--content-gutter); border-bottom: var(--border-width) solid var(--color-border); background: var(--color-surface); }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); font-size: var(--font-sm); }
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-brand); text-decoration: underline; }
.breadcrumb [aria-current] { font-weight: var(--weight-semibold); }
.breadcrumb-divider { color: var(--color-border-strong); }
.badge { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--badge-height); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: var(--font-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.badge-dot { width: var(--dot-size); height: var(--dot-size); border-radius: var(--radius-pill); background: currentColor; }
.badge--development { color: var(--color-dev); background: var(--color-dev-bg); }
.badge--development .badge-dot { background: var(--color-dev-dot); }
.badge--neutral { color: var(--color-muted); background: var(--color-canvas); }
.badge--neutral .badge-dot { background: var(--color-neutral-dot); }
.main-content { width: 100%; max-width: var(--content-width); margin-inline: auto; padding: var(--space-12) var(--content-gutter) var(--space-8); }
.main-content:focus { outline-offset: calc(-1 * var(--focus-width)); }
.workspace--dashboard { --content-gutter: var(--dashboard-gutter); }
.workspace--dashboard .main-content, .workspace--dashboard .app-footer { max-width: none; min-width: 0; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
.eyebrow { margin-bottom: var(--space-2); color: var(--color-muted); font-size: var(--font-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); }
h1 { font-size: var(--font-title); font-weight: var(--weight-semibold); line-height: var(--line-heading); letter-spacing: var(--tracking-heading); }
.page-description { margin-top: var(--space-3); color: var(--color-muted); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); flex: 0 0 auto; min-height: var(--control-height); padding: var(--space-2) var(--space-4); border: var(--border-width) solid transparent; border-radius: var(--radius-sm); font-size: var(--font-sm); font-weight: var(--weight-semibold); transition: background var(--transition-fast), border-color var(--transition-fast); }
.button--secondary { color: var(--color-ink); background: var(--color-surface); border-color: var(--color-border-strong); }
.button--secondary:hover { background: var(--color-brand-soft); border-color: var(--color-brand); }
.button .icon { width: var(--space-4); height: var(--space-4); }
.panel { overflow: hidden; background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-bottom: var(--border-width) solid var(--color-border); }
.panel-heading { display: flex; align-items: center; gap: var(--space-3); }
.panel-icon { display: inline-flex; color: var(--color-muted); }
.panel h2 { font-size: var(--font-body); font-weight: var(--weight-semibold); }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: var(--empty-height); padding: var(--space-10) var(--space-6) var(--space-12); text-align: center; }
.empty-state-eyebrow { margin: var(--space-5) 0 var(--space-2); color: var(--color-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--font-xs); font-weight: var(--weight-semibold); }
.empty-state h3 { font-size: var(--font-lg); letter-spacing: var(--tracking-heading); font-weight: var(--weight-semibold); }
.empty-state-description { max-width: var(--text-width); margin-top: var(--space-3); color: var(--color-muted); line-height: var(--line-body); }
.empty-state-hint { margin-top: var(--space-6); color: var(--color-muted); font-size: var(--font-sm); }
.empty-state-hint > span { padding-right: var(--space-1); }
.panel-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-6); border-top: var(--border-width) solid var(--color-border); background: var(--color-surface-soft); font-size: var(--font-xs); color: var(--color-muted); }
.panel-footer strong { margin-left: var(--space-2); color: var(--color-ink); font-weight: var(--weight-medium); }
.workspace-note { display: flex; align-items: baseline; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); color: var(--color-muted); font-size: var(--font-xs); text-align: center; }
.note-dot { flex: 0 0 auto; width: var(--dot-size); height: var(--dot-size); border: var(--border-width) solid var(--color-neutral-dot); border-radius: var(--radius-pill); }
.app-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); width: 100%; max-width: var(--content-width); margin: auto auto 0; padding: var(--space-8) var(--content-gutter) var(--space-6); color: var(--color-muted); font-size: var(--font-xs); }
.app-footer span span { margin-inline: var(--space-2); color: var(--color-border-strong); }
.empty-illustration { position: relative; width: var(--illustration-width); height: var(--illustration-height); }
.illustration-orbit { position: absolute; width: var(--illustration-orbit); height: var(--illustration-orbit); inset: var(--space-1) auto auto var(--space-4); border-radius: 50%; background: var(--color-surface-soft); }
.illustration-sheet { position: absolute; width: var(--illustration-sheet-width); height: var(--illustration-sheet-height); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); }
.illustration-sheet--back { top: var(--space-3); left: var(--space-6); background: var(--color-brand-soft); border-color: var(--color-brand-line); transform: rotate(-12deg); }
.illustration-sheet--front { top: var(--space-5); left: var(--illustration-offset); display: flex; flex-direction: column; align-items: start; gap: var(--space-2); padding: var(--space-4) var(--space-3); background: var(--color-surface); box-shadow: var(--shadow-sheet); transform: rotate(6deg); }
.illustration-heading { height: var(--space-2); width: 35%; background: var(--color-brand-line); border-radius: var(--radius-pill); }
.illustration-line { height: var(--space-1); width: 100%; background: var(--color-border); border-radius: var(--radius-pill); }
.illustration-line--short { width: 65%; }
.illustration-row { display: flex; gap: var(--space-1); width: 100%; margin-top: var(--space-1); }
.illustration-row > span { height: var(--space-3); flex: 1; background: var(--color-surface-soft); border: var(--border-width) solid var(--color-border); border-radius: var(--border-width); }
.illustration-symbol { position: absolute; bottom: var(--space-2); right: var(--space-3); display: grid; place-items: center; width: var(--illustration-symbol-size); height: var(--illustration-symbol-size); background: var(--color-brand); color: var(--color-on-dark); border: var(--border-width) solid var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sheet); }
.illustration-symbol .icon { width: var(--space-4); height: var(--space-4); }
/* Breakpoints are central layout rules; CSS variables cannot be used in media queries. */
@media (max-width: 64rem) {
    .page-header { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 48rem) {
    .app-shell { display: block; }
    .sidebar { position: static; min-height: auto; padding: var(--space-5) var(--content-gutter); }
    .brand { margin-left: 0; }
    .sidebar-caption { margin: var(--space-2) 0 var(--space-5); }
    .main-navigation { display: flex; gap: var(--space-6); overflow-x: auto; padding: var(--space-2); margin-inline: calc(-1 * var(--space-2)); }
    .navigation-group { flex: 0 0 auto; }
    .navigation-group + .navigation-group { margin-top: 0; }
    .navigation-label { padding-inline: var(--space-2); }
    .main-navigation ul { display: flex; gap: var(--space-2); }
    .main-navigation li + li { margin: 0; }
    .navigation-link { padding-inline: var(--space-3); white-space: nowrap; }
    .sidebar-footer { display: none; }
    .app-header { padding-block: var(--space-4); }
    .main-content { padding-top: var(--space-8); }
    .panel-header { align-items: flex-start; flex-wrap: wrap; padding: var(--space-4); }
    .panel-footer { padding-inline: var(--space-4); }
    .empty-state { min-height: var(--empty-height); padding-inline: var(--space-5); }
    .app-footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}

/* Shared read-only dashboards and named semantic badge variants. */
.badge--info { color: var(--color-brand); background: var(--color-brand-soft); }
.badge--success { color: var(--color-success); background: var(--color-success-bg); }
.badge--danger { color: var(--color-danger); background: var(--color-danger-bg); }
.badge--warning { color: var(--color-dev); background: var(--color-dev-bg); }
.badge--info .badge-dot, .badge--success .badge-dot,
.badge--danger .badge-dot, .badge--warning .badge-dot { background: currentColor; }
.dashboard-content { padding: var(--space-5); min-width: 0; }
.dashboard-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); }
.dashboard-filters label { display: grid; gap: var(--space-1); font-weight: var(--weight-semibold); }
.dashboard-filters select { font: inherit; color: var(--color-ink); background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-2); min-height: var(--control-height); }
.dashboard-hint, .dashboard-pagination { color: var(--color-muted); margin-block: var(--space-4); }
.dashboard-scroll { overflow-x: auto; max-width: 100%; }
.dashboard-table { border-collapse: collapse; width: 100%; text-align: left; }
.dashboard-table caption { text-align: left; font-weight: var(--weight-semibold); padding-block: var(--space-3); }
.dashboard-table th, .dashboard-table td { padding: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); vertical-align: top; min-width: var(--dashboard-cell-width); max-width: var(--dashboard-summary-width); overflow-wrap: anywhere; }
.dashboard-table th { background: var(--color-surface-soft); }
.dashboard-table .dashboard-cell--summary { min-width: var(--dashboard-summary-width); }
.dashboard-cell, .dashboard-text, .dashboard-source dd { white-space: pre-wrap; }
.dashboard-table p { margin-block: var(--space-2); }
.dashboard-status { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }
.dashboard-status .badge { justify-self: start; white-space: normal; height: auto; }
.dashboard-list { padding-left: var(--space-5); }
.dashboard-list li { margin-block: var(--space-2); }
.dashboard-pagination { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.dashboard-note { padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
.dashboard-notes { margin-top: var(--space-6); }
.dashboard-source dt { font-weight: var(--weight-semibold); }
.dashboard-source dd { margin: 0 0 var(--space-3); }
.dashboard-empty { padding-block: var(--space-8); }
.dashboard-content summary { cursor: pointer; }

/* Full dashboard container chain: viewport grid -> workspace -> main -> panel.
   Keep table intrinsic widths inside its own scrollport, at every viewport. */
.workspace--dashboard { width: 100%; max-width: none; align-items: stretch; }
.workspace--dashboard > .main-content { flex: 1 0 auto; align-self: stretch; margin-inline: 0; padding-top: var(--space-6); }
.workspace--dashboard .panel, .workspace--dashboard .dashboard-content,
.planning-day, .planning-group, .planning-unplanned { width: 100%; min-width: 0; max-width: 100%; }
.dashboard-content { padding: var(--space-3); }
.planning-navigation, .planning-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.dashboard-filters input, .planning-editor input, .planning-editor select { min-height: var(--control-height); padding: var(--space-2); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); }
.planning-day, .planning-unplanned { margin-top: var(--space-6); }
.panel .planning-date, .planning-unplanned > h2 { padding: var(--space-3); font-size: var(--font-md); background: var(--color-brand-soft); color: var(--color-brand); border-left: var(--space-1) solid var(--color-brand); }
.planning-group > h3, .planning-unplanned > h3 { margin: var(--space-3) 0 var(--space-1); font-size: var(--font-body); }
.planning-group .dashboard-empty { padding: var(--space-2) var(--space-3); color: var(--color-muted); }
.dashboard-table--compact th, .dashboard-table--compact td { min-width: var(--planning-cell-width); max-width: var(--planning-summary-width); padding: var(--space-2); vertical-align: middle; white-space: nowrap; overflow-wrap: normal; }
.dashboard-table--compact td { height: var(--planning-row-height); }
.dashboard-table--compact th { white-space: normal; line-height: var(--line-heading); }
.dashboard-table--compact .dashboard-cell--summary { min-width: var(--planning-summary-width); }
.cell-ellipsis { display: block; max-width: var(--planning-summary-width); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-table--compact .badge { min-height: 0; padding: var(--space-1) var(--space-2); }
.dashboard-table--compact caption { font-size: var(--font-sm); padding-block: var(--space-1); }
.planning-link { color: var(--color-brand); text-decoration: underline; margin-inline: var(--space-2); }
.order-details { display: inline-block; margin-left: var(--space-2); vertical-align: top; }
.order-details[open] { display: block; min-width: var(--planning-detail-width); white-space: normal; }
.order-details .dashboard-source { white-space: normal; }
.planning-editor { max-width: var(--content-width); margin-top: var(--space-5); }
.planning-editor > div { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }
.planning-editor .planning-actions { display: flex; }
.errorlist { color: var(--color-danger); }

/* Shared compact planning interaction variants. */
.planning-toolbar, .planning-toolbar form, .inline-editor form { display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-2); }
.planning-toolbar { padding: var(--space-3); margin-block: var(--space-3); border: var(--border-width) solid var(--color-brand-line); background: var(--color-brand-soft); }
.planning-toolbar[hidden] { display: none; }
.planning-toolbar label, .inline-editor label { display: grid; gap: var(--space-1); font-size: var(--font-sm); }
.planning-toolbar input, .planning-toolbar select, .inline-editor input, .inline-editor select { min-height: var(--planning-row-height); max-width: var(--planning-summary-width); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); background: var(--color-surface); color: var(--color-ink); }
.planning-toolbar .button, .inline-editor .button { min-height: var(--planning-row-height); padding: var(--space-1) var(--space-2); }
.inline-editor { display: inline-block; vertical-align: middle; margin-inline-end: var(--space-2); }
.inline-editor[open] { display: block; margin-block: var(--space-2); }
.inline-editor summary { width: fit-content; }
.inline-editor form { margin-block: var(--space-1); white-space: normal; }
.planning-feedback { position: fixed; bottom: var(--space-4); right: var(--space-4); z-index: 3; max-width: min(90vw, var(--content-width)); max-height: 30vh; overflow: auto; background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-panel); }
.planning-feedback:empty { display: none; }
.planning-feedback:not(:empty) { padding: var(--space-2); border: var(--border-width) solid var(--color-border-strong); }
.dashboard-table--compact .planning-selection-cell { min-width: 0; width: var(--space-10); }
[data-planning-row][aria-selected="true"] > td { background: var(--color-brand-soft); }
[data-planning-row][aria-selected="true"] > td:first-child { box-shadow: inset var(--space-1) 0 var(--color-brand); }
[data-planning-row]:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.drag-handle { margin-inline-start: var(--space-1); color: var(--color-muted); cursor: grab; }
[data-planning-row] { cursor: grab; }
.is-planning-drag, .is-planning-drag [data-planning-row] { cursor: grabbing; }
[data-planning-row] :is(input, textarea, [contenteditable]) { cursor: text; }
[data-planning-row] :is(a, button, select, summary, input[type="checkbox"]) { cursor: pointer; }
.is-dragging { opacity: .65; }
.planning-drop { padding: var(--space-4); min-height: var(--planning-row-height); border: var(--border-width) dashed var(--color-border-strong); font-size: var(--font-sm); color: var(--color-muted); }
.planning-group[data-drop-target] { min-height: calc(3 * var(--planning-row-height)); padding: var(--space-3); border: var(--border-width) solid var(--color-border); }
.planning-drop-hint { color: var(--color-muted); font-size: var(--font-sm); }
.planning-exceptions { margin-block: var(--space-4); padding: var(--space-3); border: var(--border-width) solid var(--color-border-strong); }
.inline-editor--direct select.badge { height: auto; cursor: pointer; color: inherit; }
.inline-editor--direct select.badge--info { color: var(--color-brand); background: var(--color-brand-soft); }
.inline-editor--direct select.badge--success { color: var(--color-success); background: var(--color-success-bg); }
.inline-editor--direct select.badge--danger { color: var(--color-danger); background: var(--color-danger-bg); }
.inline-editor--direct select.badge--warning { color: var(--color-dev); background: var(--color-dev-bg); }
.is-drop-target { outline: var(--focus-width) solid var(--color-brand); outline-offset: calc(-1 * var(--focus-width)); background: var(--color-brand-soft); }
[data-planning-row].is-drop-target > td { border-top: var(--focus-width) solid var(--color-brand); }
[aria-busy="true"] { cursor: progress; }
button:disabled { cursor: not-allowed; opacity: .65; }

.is-planning-drag .planning-feedback { position: fixed; top: auto; bottom: var(--space-4); right: var(--space-4); max-width: min(90vw, var(--content-width)); pointer-events: none; box-shadow: var(--shadow-panel); }
.planning-drag-preview { position: fixed; top: 0; left: 0; z-index: 3; padding: var(--space-2); border: var(--border-width) solid var(--color-brand); background: var(--color-brand-soft); color: var(--color-ink); pointer-events: none; }