/* SLAP UI 2.0 — screen-only design system. PDF tokens live in the backend. */
@media screen {
  :root {
    --slap-bg: #f7f8fc;
    --slap-surface: #ffffff;
    --slap-text: #19243b;
    --slap-muted: #626c80;
    --slap-subtle: #f0f2f8;
    --slap-line: #dce1ec;
    --slap-control: #788398;
    --slap-accent: var(--brand, #7456e8);
    --slap-radius-sm: 8px;
    --slap-radius: 12px;
    --slap-radius-lg: 18px;
    --slap-space-1: 4px;
    --slap-space-2: 8px;
    --slap-space-3: 12px;
    --slap-space-4: 16px;
    --slap-space-6: 24px;
    --slap-space-8: 32px;
    --slap-shadow: 0 2px 6px #19243b04, 0 12px 32px #19243b05;
    --slap-shadow-dialog: 0 24px 80px #10182740;
    --slap-motion: 140ms;
    --slap-font: Inter, "Segoe UI", Arial, sans-serif;
    --surface: var(--slap-surface);
    --surface-alt: var(--slap-bg);
    --text: var(--slap-text);
    --muted: var(--slap-muted);
    --line: var(--slap-line);
    --control-border: var(--slap-control);
    --placeholder: var(--slap-muted);
    font-family: var(--slap-font);
    font-size: 16px;
    line-height: 1.5;
  }
  :root[data-appearance="dark"] {
    --slap-bg: #111827;
    --slap-surface: #1c2535;
    --slap-text: #f5f7fb;
    --slap-muted: #a8b2c7;
    --slap-subtle: #242f43;
    --slap-line: #3b4760;
    --slap-control: #7f8ca5;
    --slap-shadow: 0 2px 6px #00000010, 0 12px 32px #00000014;
    --slap-shadow-dialog: 0 24px 80px #00000080;
    --surface: var(--slap-surface);
    --surface-alt: var(--slap-bg);
    --text: var(--slap-text);
    --muted: var(--slap-muted);
    --line: var(--slap-line);
    --control-border: var(--slap-control);
    --placeholder: var(--slap-muted);
  }
  html { scroll-padding-block: 24px; }
  body { background: var(--slap-bg); color: var(--slap-text); }
  button, input, select, textarea { font-family: var(--slap-font); }
  button, a, summary, input, select, textarea { touch-action: manipulation; }
  button { min-height: 44px; border-radius: var(--slap-radius-sm); font-weight: 600; transition: background-color var(--slap-motion), border-color var(--slap-motion), box-shadow var(--slap-motion); }
  button:not(:disabled):hover { border-color: var(--link-color); }
  button.primary { color: var(--on-primary); box-shadow: 0 2px 4px #19243b12; }
  button:disabled { box-shadow: none; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 44px; border-radius: var(--slap-radius-sm); }
  input[type=checkbox], input[type=radio] { accent-color: var(--slap-accent); }
  label { gap: var(--slap-space-2); font-size: 13px; line-height: 1.5; }
  :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; scroll-margin: 24px; }
  input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border: 2px solid var(--error-border); }
  h1, h2, h3 { line-height: 1.25; overflow-wrap: anywhere; }
  h1 { font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.035em; }
  h2 { font-size: 19px; letter-spacing: -.02em; }
  h3 { font-size: 16px; }
  :root[data-appearance] :is(.hint,.muted,.hd-order-meta,.hd-weekday) { color: var(--slap-muted); }
  .content { width: 100%; max-width: 1680px; padding: var(--slap-space-8); }
  .page-head, .hd-page-title { margin-bottom: var(--slap-space-6); }
  .page-head p { max-width: 75ch; }
  .card, .hd-card, .settings-panel, .table-wrap, fieldset { border: 1px solid var(--slap-line); border-radius: var(--slap-radius-lg); background: var(--slap-surface); color: var(--slap-text); box-shadow: var(--slap-shadow); }
  .card, .settings-panel { padding: var(--slap-space-6); margin-bottom: var(--slap-space-6); }
  .cards { gap: var(--slap-space-4); }
  .metric, .hd-indicator strong, td { font-variant-numeric: tabular-nums; }
  .metric { color: var(--slap-text); font-size: 30px; letter-spacing: -.03em; }
  .shell.hd-shell { grid-template-columns: 248px minmax(0,1fr); }
  .hd-shell .sidebar { padding: var(--slap-space-6) var(--slap-space-3); background: var(--slap-surface); border-right: 1px solid var(--slap-line); scrollbar-width: thin; scrollbar-color: var(--slap-control) transparent; }
  .hd-shell .brand { padding: 4px 12px 24px; margin-bottom: 8px; font-size: 21px; letter-spacing: -.035em; overflow-wrap: anywhere; }
  .hd-shell .brand small { color: var(--slap-muted); font-size: 10px; letter-spacing: .13em; }
  .hd-menu-toggle { min-height: 44px; margin-bottom: 16px; background: var(--slap-subtle); border-color: var(--slap-line); font-size: 13px; }
  .hd-shell .nav-search { margin-bottom: var(--slap-space-4); }
  .hd-shell .sidebar nav { gap: 8px; }
  .hd-shell .nav-group { border: 0; padding: 0 0 8px; margin: 0 0 4px; background: transparent; box-shadow: none; }
  .hd-shell .nav-group summary { min-height: 36px; padding: 8px 12px; color: var(--slap-muted); font-size: 11px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
  .hd-shell .nav-group summary svg { width: 15px; height: 15px; }
  .hd-shell .sidebar nav button { border-radius: var(--slap-radius-sm); border: 1px solid transparent; margin: 2px 0; padding: 10px 12px; gap: 12px; font-size: 13px; font-weight: 500; }
  .hd-shell .sidebar nav button:not(.active):hover { background: var(--slap-subtle); border-color: var(--slap-line); }
  .hd-shell .sidebar nav button.active { background: var(--accent-soft); color: var(--link-color); border-color: var(--slap-accent); font-weight: 700; box-shadow: inset 3px 0 var(--slap-accent); }
  .hd-shell .sidebar footer { color: var(--slap-muted); border-top: 1px solid var(--slap-line); margin-top: 16px; padding: 16px 12px 0; line-height: 1.6; }
  .shell.hd-shell.hd-collapsed { grid-template-columns: 80px minmax(0,1fr); }
  .hd-collapsed .sidebar { padding: 16px 8px; }
  .hd-collapsed .brand { padding: 4px; }
  .hd-collapsed .brand:not(:has(img))::before { color: var(--link-color); }
  .hd-shell.hd-collapsed .sidebar nav button { padding: 10px 8px; }
  .topbar { min-height: 80px; padding: 16px 32px; gap: 16px; border-bottom: 1px solid var(--slap-line); background: var(--slap-surface); }
  .topbar strong { font-size: 15px; font-weight: 650; }
  .topbar small { font-size: 12px; margin-top: 2px; }
  .topbar>div:last-child { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; font-size: 13px; }
  .badge, .hd-status { border-radius: 99px; padding: 5px 10px; font-size: 12px; font-weight: 600; }
  .slap-context { display: block; color: var(--slap-muted); font-size: 12px; margin-bottom: 3px; }
  .slap-skip { position: fixed; top: -120px; left: 16px; z-index: 1000; padding: 12px 20px; border-radius: var(--slap-radius); background: var(--slap-surface); color: var(--link-color); border: 2px solid var(--focus-ring); }
  .slap-skip:focus { top: 12px; }
  .hd-indicators { gap: var(--slap-space-4); margin: var(--slap-space-6) 0; }
  .hd-indicator { min-height: 128px; padding: 22px; border: 1px solid var(--slap-line); border-radius: var(--slap-radius-lg); background: var(--slap-surface); color: var(--slap-text); box-shadow: var(--slap-shadow); }
  .hd-indicator:hover { transform: none; box-shadow: 0 4px 16px #19243b12; }
  .hd-indicator strong { font-size: 34px; letter-spacing: -.04em; margin-top: 10px; }
  .hd-indicator-label { color: var(--slap-muted); font-size: 13px; }
  .hd-indicator-icon { background: var(--accent-soft); color: var(--link-color); border-radius: var(--slap-radius); flex-shrink: 0; }
  .hd-indicator-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .hd-indicator>span:last-child { color: var(--slap-muted); font-size: 18px; }
  .hd-guide { background: var(--slap-surface); border-left: 3px solid var(--slap-accent); }
  .hd-eyebrow { color: var(--link-color); }
  .hd-orders, .hd-calendar { padding: var(--slap-space-6); }
  .toolbar, .hd-table-controls, .hd-calendar-toolbar { gap: var(--slap-space-3); }
  .hd-filters { grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: var(--slap-space-3); padding: var(--slap-space-4); border-radius: var(--slap-radius); background: var(--slap-bg); }
  .hd-filters :is(input,select,button), .hd-table-controls select, .hd-calendar-toolbar :is(input,select,button) { min-height: 44px; height: auto; }
  table { font-size: 13px; }
  th, .hd-orders th { padding: 14px 16px; background: var(--slap-subtle); color: var(--slap-muted); font-size: 11px; letter-spacing: .035em; font-weight: 700; }
  td, .hd-orders td { padding: 16px; border-color: var(--slap-line); }
  tbody tr:nth-child(even) { background: var(--slap-surface); }
  tbody tr:hover td, .hd-orders tr:hover td { background: var(--slap-subtle); }
  .hd-compact td { padding-block: 10px; }
  .hd-row-actions button { min-height: 36px; }
  .table-wrap { max-width: 100%; overflow: auto; overscroll-behavior-x: contain; }
  .table-wrap:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
  .hd-pagination { flex-wrap: wrap; gap: 12px; }
  .hd-pagination button { min-height: 44px; }
  .hd-day { border-color: var(--slap-line); border-radius: var(--slap-radius-sm); background: var(--slap-surface); color: var(--slap-text); }
  .hd-busy, .hd-day:hover { background: var(--accent-soft); }
  .hd-day small { color: var(--link-color); }
  .hd-current-day>span { color: var(--on-primary); }
  .hd-weekday { font-size: 12px; }
  .hd-day-order, .hd-day-detail { border-color: var(--slap-line); }
  .wizard-steps { gap: 12px; }
  .wizard-step-button { border-radius: var(--slap-radius); min-height: 52px; }
  dialog { padding: 0; border: 1px solid var(--slap-line); border-radius: var(--slap-radius-lg); background: var(--slap-surface); box-shadow: var(--slap-shadow-dialog); max-height: 90dvh; }
  dialog::backdrop { background: #11182799; }
  .dialog-head { position: sticky; top: 0; z-index: 2; padding: 18px 24px; margin: 0; background: var(--slap-surface); border-bottom: 1px solid var(--slap-line); }
  .dialog-head h2 { margin: 0; font-size: 20px; }
  .dialog-head button { width: 44px; min-width: 44px; height: 44px; border-radius: var(--slap-radius-sm); }
  #dialog-body { padding: var(--slap-space-6); }
  #notice { border-radius: var(--slap-radius); box-shadow: var(--slap-shadow-dialog); max-width: min(480px,calc(100vw - 32px)); line-height: 1.5; }
  .error, .info, [role=alert], .success { border-radius: var(--slap-radius); padding: 14px 16px; overflow-wrap: anywhere; }
  #main[aria-busy=true]>[role=status] { min-height: 100px; padding: var(--slap-space-6); border: 1px solid var(--slap-line); border-radius: var(--slap-radius-lg); background: var(--slap-surface); }
  .login { min-height: 100dvh; background: var(--slap-bg); }
  .login .card { border-radius: 24px; box-shadow: var(--slap-shadow); border-top: 4px solid var(--slap-accent); }
  .login h1 { font-size: 28px; }
  @media(min-width:1600px) { .content { padding: 40px 48px; } .topbar { padding-inline: 48px; } }
  @media(max-width:1100px) { .shell.hd-shell { grid-template-columns: 224px minmax(0,1fr); } .content { padding: 24px; } .topbar { padding: 16px 24px; } .hd-indicators { grid-template-columns: repeat(2,minmax(0,1fr)); } }
  @media(max-width:850px) {
    .shell.hd-shell:not(.hd-collapsed) { grid-template-columns: minmax(0,1fr); }
    .shell.hd-shell.hd-collapsed { grid-template-columns: 70px minmax(0,1fr); }
    .hd-shell:not(.hd-collapsed) .sidebar { position: relative; height: auto; max-height: none; padding: 16px; }
    .hd-shell:not(.hd-collapsed) .sidebar nav { grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); max-height: 280px; }
    .hd-shell:not(.hd-collapsed) .brand { padding: 4px 4px 12px; }
    .hd-shell:not(.hd-collapsed) .sidebar footer { display: none; }
    .hd-shell.hd-collapsed .sidebar { position: sticky; height: 100dvh; }
    .topbar>div { min-width: 0; overflow-wrap: anywhere; }
    .topbar>div:last-child { justify-content: flex-start; }
    .content { padding: 20px; }
  }
  @media(max-width:600px) {
    .content, .hd-collapsed .content { padding: 16px 12px; }
    .topbar { padding: 16px; align-items: flex-start; flex-direction: column; }
    .card, .settings-panel, .hd-orders, .hd-calendar { padding: 16px; border-radius: 14px; margin-bottom: 16px; }
    .hd-indicators { gap: 10px; }
    .hd-indicator { padding: 16px; min-height: 112px; }
    .hd-indicator-label { font-size: 12px; }
    .hd-indicator strong { font-size: 28px; }
    .hd-indicator-icon { display: none; }
    .hd-filters { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 12px; }
    .hd-filters label:first-child { grid-column: 1 / -1; }
    .hd-collapsed .hd-filters, .hd-collapsed .hd-indicators { grid-template-columns: minmax(0,1fr); }
    .form-grid { grid-template-columns: minmax(0,1fr); }
    input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }
    .page-head, .hd-section-head { flex-wrap: wrap; gap: 12px; }
    .hd-day { min-height: 64px; padding: 6px; }
    .hd-day small { font-size: 10px; }
    dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: 94dvh; border-radius: 14px; }
    .dialog-head { padding: 12px 16px; }
    #dialog-body { padding: 16px; }
    .wizard-step-button { padding: 8px 4px; font-size: 12px; }
    .hd-row-actions button { min-height: 44px; }
  }
  @media(prefers-reduced-motion:reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }
  @media(forced-colors:active) { .hd-shell .sidebar nav button.active { border: 2px solid Highlight; } }
}