/* WOS standalone / iframe app pages – matches WOS shell aesthetics */
@import url("./wos-controls.css") layer(wos.controls);
@import url("./wos-confirm-dialog.css");
@import url("./wos-calendar.css") layer(wos.controls);
@import url("./sparkchart/wos-sparkchart.css") layer(wos.sparkchart);
@import url("../reporting/wos-reporting.css") layer(wos.reporting);

:root {
  --wos-font-ui:
    -apple-system, blinkmacsystemfont, "Segoe UI Variable", "Segoe UI", system-ui, roboto, "Helvetica Neue", arial,
    sans-serif;
  --wos-text: #142033;
  --wos-muted: #3a4d62;
  --wos-text-muted: var(--wos-muted);
  --wos-border: rgb(49 70 96 / 38%);
  --wos-panel: rgb(255 255 255 / 98%);
  --wos-panel-soft: rgb(248 251 255 / 99%);
  --wos-accent: #0b5cab;
  --wos-accent-strong: #084f98;
  --wos-accent-soft: #e6f1ff;
  --wos-focus-ring: rgb(11 92 171 / 28%);
  --wos-shadow: 0 1px 2px rgb(29 49 72 / 8%), 0 12px 30px rgb(29 49 72 / 12%);
  --wos-radius-xs: 6px;
  --wos-radius-sm: 8px;
  --wos-radius-md: 10px;
  --wos-radius-lg: 12px;
  --wos-radius-pill: 999px;
  --wos-radius: var(--wos-radius-lg);
  --wos-space-1: 4px;
  --wos-space-2: 6px;
  --wos-space-3: 8px;
  --wos-space-4: 10px;
  --wos-space-5: 12px;
  --wos-motion-fast: 110ms;
  --wos-motion-shell: 150ms;
  --wos-motion-ease: cubic-bezier(0.22, 0.9, 0.28, 1);
  --wos-success-bg: #eaf7ea;
  --wos-success-text: #1f5f32;
  --wos-warning-bg: #fff8e8;
  --wos-warning-text: #7a5a00;
  --wos-danger-bg: #ffecee;
  --wos-danger-text: #9f1d1d;
  --wos-neutral-bg: #eef2f6;
  --wos-neutral-text: #4a5e74;
  --wos-disabled-bg: #edf2f7;
  --wos-disabled-text: #5f7082;
  --wos-disabled-border: rgb(49 70 96 / 22%);
  --wos-control-height: 36px;
  --wos-control-min-height: 40px;
  --wos-info-bg: #e8f2ff;
  --wos-info-text: #155b9f;
  --wos-table-wrap-min-height: 120px;
  --wos-tabulator-max-height: calc(100vh - 220px);
  --wos-tabulator-row-height: 34px;
  --wos-tabulator-header-height: 26px;
  --wos-tabulator-header-font-size: 12px;
  --wos-tabulator-font-size: 14px;
  --wos-tabulator-filter-height: 24px;
  --wos-tabulator-toolbar-height: 34px;
  --wos-surface-elevated: var(--wos-panel-soft);

  /* WOS Core UI — compact ERP desktop layout */
  --wos-core-font-data: 13px;
  --wos-core-font-meta: 11px;
  --wos-core-control-height: 30px;
  --wos-core-control-height-sm: 28px;
  --wos-core-toolbar-height: 36px;
  --wos-core-toolbar-max: 48px;
  --wos-core-gap: 6px;
  --wos-core-pad: 8px;
  --wos-core-pad-sm: 4px;
  --wos-core-border: rgb(49 70 96 / 22%);
  --wos-core-surface: var(--wos-panel);
  --wos-core-surface-soft: var(--wos-panel-soft);
  --wos-core-shadow: 0 1px 2px rgb(29 49 72 / 6%);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  font-family: var(--wos-font-ui);
  font-variant-numeric: tabular-nums;
  color: var(--wos-text);
  background:
    radial-gradient(ellipse 70% 55% at 12% 8%, rgb(255 255 255 / 92%), rgb(255 255 255 / 0%) 58%),
    radial-gradient(ellipse 55% 48% at 88% 12%, rgb(34 105 190 / 28%), rgb(34 105 190 / 0%) 62%),
    radial-gradient(ellipse 48% 40% at 72% 88%, rgb(96 165 250 / 16%), rgb(96 165 250 / 0%) 58%),
    linear-gradient(148deg, #eef5fc 0%, #d4e6f6 42%, #b7d0ea 78%, #a5c4e2 100%);
}

/* Dark theme: logistics slate-blue base. Deep near-black background with
   cool blue-tinted surfaces and WOS accent. Semantic success/danger/warning
   stay green/red/amber so status meaning is preserved. All apps consume these
   --wos-* tokens, so the look propagates without per-app edits. */
body.is-dark {
  --wos-text: #e8eef8;
  --wos-muted: #b0c0d4;
  --wos-border: rgb(125 179 234 / 40%);
  --wos-panel: rgb(11 18 32 / 94%);
  --wos-panel-soft: rgb(16 28 44 / 96%);
  --wos-field-bg: rgb(20 34 52 / 78%);
  --wos-accent: #7db3ea;
  --wos-accent-strong: #93c5fd;
  --wos-accent-soft: rgb(37 99 180 / 55%);
  --wos-focus-ring: rgb(125 179 234 / 34%);
  --wos-shadow: 0 1px 2px rgb(0 0 0 / 42%), 0 16px 36px rgb(0 0 0 / 50%);
  --wos-success-bg: rgb(34 197 94 / 16%);
  --wos-success-text: #86efac;
  --wos-warning-bg: rgb(245 158 11 / 16%);
  --wos-warning-text: #fcd34d;
  --wos-danger-bg: rgb(239 68 68 / 16%);
  --wos-danger-text: #fca5a5;
  --wos-neutral-bg: rgb(51 65 85 / 55%);
  --wos-neutral-text: #c5d0de;
  --wos-disabled-bg: rgb(22 32 48 / 92%);
  --wos-disabled-text: #a8b8cc;
  --wos-disabled-border: rgb(125 179 234 / 32%);
  --wos-core-border: rgb(125 179 234 / 28%);
  --wos-core-surface: var(--wos-panel);
  --wos-core-surface-soft: var(--wos-panel-soft);
  --wos-core-shadow: 0 1px 2px rgb(0 0 0 / 32%);

  color: var(--wos-text);
  background:
    radial-gradient(ellipse 70% 55% at 12% 8%, rgb(37 99 180 / 26%), rgb(37 99 180 / 0%) 58%),
    radial-gradient(ellipse 55% 48% at 88% 14%, rgb(59 130 200 / 18%), rgb(59 130 200 / 0%) 62%),
    radial-gradient(ellipse 48% 40% at 68% 90%, rgb(14 116 180 / 12%), rgb(14 116 180 / 0%) 58%),
    linear-gradient(148deg, #060e16 0%, #0b1626 42%, #12253a 78%, #152a40 100%);
}

button,
input,
select {
  font: inherit;
}

.wos-app {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--wos-space-3);
}

.wos-app-wide {
  max-width: none;
  padding: 4px;
}

.wos-loading-overlay {
  position: fixed;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(320px, calc(100vw - 24px));
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--wos-border);
  border-radius: var(--wos-radius-pill);
  background: var(--wos-panel);
  color: var(--wos-text);
  box-shadow: var(--wos-shadow);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
}

.wos-loading-overlay::before {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid var(--wos-border);
  border-block-start-color: var(--wos-accent);
  border-radius: 50%;
  content: "";
  animation: wos-loading-overlay-spin 0.8s linear infinite;
}

.wos-loading-overlay[hidden] {
  display: none;
}

@keyframes wos-loading-overlay-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wos-loading-overlay::before {
    animation: none;
  }
}

/* Windows must not render their own header/title: the WOS window chrome already
   shows the app title and controls. Hidden globally to keep apps minimalist and
   space-optimized (no duplicated title bar inside the window). */
.wos-app-header {
  display: none;
}

.wos-app-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wos-app-mark {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: var(--wos-radius-sm);
  background: linear-gradient(145deg, #2c7bc6, #123f79);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.04em;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 24%),
    0 4px 12px rgb(31 111 183 / 24%);
}

.wos-app-brand h1 {
  margin: 0;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.wos-app-brand p {
  margin: 2px 0 0;
  color: var(--wos-muted);
  font-size: 11px;
  font-weight: 700;
}

.wos-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--wos-space-1);
  min-height: 24px;
  border: 1px solid rgb(11 92 171 / 22%);
  border-radius: var(--wos-radius-pill);
  background: var(--wos-accent-soft);
  color: var(--wos-accent-strong);
  padding: 3px 9px;
  font-size: 11px;
  font-weight: var(--wos-kpi-value-weight, 800);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.wos-kpi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wos-space-2);
  align-items: stretch;
}

.wos-kpi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wos-space-3);
  min-height: 28px;
  line-height: 1.35;
}

.wos-kpi-chip {
  display: inline-grid;
  gap: 3px;
  align-content: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: var(--wos-radius-md);
  border: 1px solid var(--wos-border);
  background: var(--wos-neutral-bg);
  color: var(--wos-neutral-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  max-width: 100%;
  min-width: 0;
}

.wos-kpi-chip-pill {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--wos-space-1);
  border-radius: var(--wos-radius-pill);
  padding: 3px 9px;
  min-height: 24px;
}

.wos-kpi-label {
  font-size: 11px;
  font-weight: 650;
  color: var(--wos-muted);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wos-kpi-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--wos-text);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}

.wos-kpi-unit {
  font-size: 11px;
  font-weight: 700;
  color: var(--wos-muted);
  line-height: 1.25;
}

.wos-kpi-chip.is-neutral {
  background: var(--wos-neutral-bg);
  color: var(--wos-neutral-text);
  border-color: rgb(74 94 116 / 22%);
}

.wos-kpi-chip.is-positive,
.wos-kpi-chip.is-ok {
  background: var(--wos-success-bg);
  color: var(--wos-success-text);
  border-color: rgb(31 95 50 / 24%);
}

.wos-kpi-chip.is-warning,
.wos-kpi-chip.is-pending {
  background: var(--wos-warning-bg);
  color: var(--wos-warning-text);
  border-color: rgb(122 90 0 / 24%);
}

.wos-kpi-chip.is-danger,
.wos-kpi-chip.is-error {
  background: var(--wos-danger-bg);
  color: var(--wos-danger-text);
  border-color: rgb(159 29 29 / 24%);
}

.wos-kpi-chip.is-info {
  background: var(--wos-info-bg, #e8f2ff);
  color: var(--wos-info-text, #155b9f);
  border-color: rgb(21 91 159 / 22%);
}

.wos-app-body {
  display: grid;
  gap: var(--wos-space-4);
  contain: layout style;
}

.wos-panel {
  border: 1px solid var(--wos-border);
  border-radius: var(--wos-radius);
  background: var(--wos-panel);
  box-shadow: var(--wos-shadow);
  padding: var(--wos-space-5) var(--wos-space-4);
  contain: layout style;
  outline: 1px solid rgb(255 255 255 / 24%);
  outline-offset: -2px;
}

.wos-panel-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.wos-notice {
  font-size: 12px;
  line-height: 1.45;
}

.wos-notice b {
  color: var(--wos-accent-strong);
}

.wos-notice code {
  border: 1px solid var(--wos-border);
  border-radius: var(--wos-radius-xs);
  background: rgb(255 255 255 / 55%);
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 700;
}

body.is-dark .wos-notice code {
  background: var(--wos-field-bg);
}

.wos-notice-info {
  background: var(--wos-panel-soft);
  border-left: 3px solid var(--wos-accent);
}

.wos-form {
  display: grid;
  gap: 8px;
}

.wos-field {
  display: grid;
  gap: 4px;
}

.wos-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--wos-text);
}

.wos-hint {
  color: var(--wos-muted);
  font-size: 11px;
  font-weight: 700;
}

.wos-input,
.wos-app input[type="text"],
.wos-app input[type="search"],
.wos-app input[type="number"],
.wos-app input[type="date"],
.wos-app input[type="datetime-local"],
.wos-app input[type="file"],
.wos-app select,
.wos-app textarea {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--wos-border);
  border-radius: var(--wos-radius-sm);
  background: #fff;
  color: var(--wos-text);
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 700;
  min-height: var(--wos-core-control-height, 30px);
  outline: none;
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    background-color 0.14s ease;
}

.wos-app select,
.wos-app textarea {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--wos-border);
  border-radius: var(--wos-radius-sm);
  background: #fff;
  color: var(--wos-text);
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 700;
  outline: none;
  min-height: var(--wos-control-min-height);
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    background-color 0.14s ease;
}

.wos-core-filterbar-fields .wos-input,
.wos-core-filterbar-fields select {
  min-height: var(--wos-core-control-height);
  max-width: none;
  font-size: var(--wos-core-font-data);
  padding: 3px 8px;
}

.wos-touch-up select,
.wos-touch-up textarea,
.wos-touch-up input[type="text"],
.wos-touch-up input[type="number"],
.wos-touch-up input[type="date"],
.wos-touch-up input[type="datetime-local"],
.wos-touch-up input[type="file"],
.wos-touch-up button,
.wos-app-wide .wos-app select,
.wos-app-wide .wos-app textarea {
  min-height: var(--wos-control-min-height);
}

.wos-input:disabled,
.wos-app input[type="text"]:disabled,
.wos-app input[type="search"]:disabled,
.wos-app input[type="number"]:disabled,
.wos-app input[type="date"]:disabled,
.wos-app input[type="datetime-local"]:disabled,
.wos-app input[type="file"]:disabled,
.wos-app select:disabled,
.wos-app textarea:disabled {
  border-color: var(--wos-disabled-border);
  background: var(--wos-disabled-bg);
  color: var(--wos-disabled-text);
  cursor: not-allowed;
  opacity: 1;
}

.wos-input:focus,
.wos-app input[type="text"]:focus,
.wos-app input[type="search"]:focus,
.wos-app input[type="number"]:focus,
.wos-app input[type="date"]:focus,
.wos-app input[type="datetime-local"]:focus,
.wos-app select:focus,
.wos-app textarea:focus {
  border-color: var(--wos-accent);
  box-shadow: 0 0 0 3px var(--wos-focus-ring);
}

.wos-btn {
  border: 1px solid var(--wos-border);
  border-radius: var(--wos-radius-sm);
  background: rgb(255 255 255 / 76%);
  color: var(--wos-text);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  min-height: var(--wos-control-min-height);
  box-shadow: 0 1px 2px rgb(29 49 72 / 8%);
  transition:
    border-color var(--wos-motion-fast, 110ms) var(--wos-motion-ease, ease),
    background-color var(--wos-motion-fast, 110ms) ease,
    box-shadow var(--wos-motion-fast, 110ms) ease,
    color var(--wos-motion-fast, 110ms) ease,
    transform var(--wos-motion-fast, 110ms) var(--wos-motion-ease, ease);
}

.wos-input:focus-visible,
.wos-app input[type="text"]:focus-visible,
.wos-app input[type="search"]:focus-visible,
.wos-app input[type="number"]:focus-visible,
.wos-app input[type="date"]:focus-visible,
.wos-app input[type="datetime-local"]:focus-visible,
.wos-app input[type="file"]:focus-visible,
.wos-app select:focus-visible,
.wos-app textarea:focus-visible,
.wos-btn:focus-visible {
  outline: 3px solid var(--wos-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--wos-focus-ring);
}

.wos-app select:disabled,
.wos-app textarea:disabled {
  border-color: var(--wos-disabled-border);
  background: var(--wos-disabled-bg);
  color: var(--wos-disabled-text);
  cursor: not-allowed;
  opacity: 1;
}

.wos-app select:focus,
.wos-app textarea:focus {
  border-color: var(--wos-accent);
  box-shadow: 0 0 0 3px var(--wos-focus-ring);
}

body.is-dark .wos-input,
body.is-dark .wos-app input[type="text"],
body.is-dark .wos-app input[type="search"],
body.is-dark .wos-app input[type="number"],
body.is-dark .wos-app input[type="date"],
body.is-dark .wos-app input[type="datetime-local"],
body.is-dark .wos-app input[type="file"],
body.is-dark .wos-app select,
body.is-dark .wos-app textarea {
  background: var(--wos-field-bg);
  color: var(--wos-text);
}

.wos-input.wos-input-sm {
  max-width: 110px;
}

.wos-check {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

.wos-check input[type="checkbox"] {
  margin-top: 2px;
}

.wos-touch-up .wos-check {
  min-height: var(--wos-control-min-height);
  align-items: center;
}

.wos-touch-up input[type="checkbox"] {
  width: 24px;
  height: 20px;
  min-width: 24px;
  min-height: 20px;
  flex: 0 0 auto;
}

.wos-check label {
  font-size: 12px;
  font-weight: 700;
}

.wos-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.wos-touch-up .wos-btn,
.wos-touch-up button {
  min-width: var(--wos-control-min-height);
}

.wos-btn:hover,
.wos-btn:focus {
  outline: none;
  border-color: var(--wos-accent);
  background: #fff;
  color: var(--wos-accent-strong);
  box-shadow: 0 3px 10px rgb(29 49 72 / 12%);
  transform: translateY(-0.5px);
}

.wos-btn:disabled,
.wos-btn[aria-disabled="true"] {
  border-color: var(--wos-disabled-border);
  background: var(--wos-disabled-bg);
  color: var(--wos-disabled-text);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
}

.wos-form-actions .wos-btn {
  width: 100%;
  justify-content: center;
}

.wos-core-shell .wos-btn {
  min-height: var(--wos-core-control-height);
  padding: 4px 10px;
  font-size: var(--wos-core-font-data);
  box-shadow: none;
}

.doctree-confirm-actions .wos-btn {
  width: 100%;
  justify-content: center;
}

body.is-dark .wos-btn {
  background: var(--wos-field-bg);
  color: var(--wos-text);
}

body.wos-app-surface-v2 .wos-btn {
  border-radius: var(--wos-surface-radius);
  font-size: var(--wos-surface-font-base);
  padding: 6px var(--wos-surface-pad);
  min-height: var(--wos-surface-control-height);
  box-shadow: none;
}

.wos-btn:disabled:hover,
.wos-btn:disabled:focus,
.wos-btn[aria-disabled="true"]:hover,
.wos-btn[aria-disabled="true"]:focus {
  border-color: var(--wos-disabled-border);
  background: var(--wos-disabled-bg);
  color: var(--wos-disabled-text);
  box-shadow: none;
}

.wos-btn-primary {
  border-color: rgb(11 92 171 / 42%);
  background: linear-gradient(145deg, #1d74c2, #0b5cab);
  color: #fff;
  box-shadow: 0 4px 12px rgb(11 92 171 / 26%);
}

.wos-btn-primary:hover,
.wos-btn-primary:focus {
  background: linear-gradient(145deg, #2681d1, #1269b8);
  color: #fff;
}

/* In dark mode the neutral/primary key action adopts the logistics blue accent
   so the slate-blue base stays cohesive. Success (green) and danger (red) buttons
   keep their semantic hues unchanged. */
body.is-dark .wos-btn-primary {
  border-color: rgb(37 99 180 / 50%);
  background: linear-gradient(145deg, #3b82c4, #0b5cab);
  color: #fff;
  box-shadow: 0 4px 12px rgb(11 92 171 / 36%);
}

body.is-dark .wos-btn-primary:hover,
body.is-dark .wos-btn-primary:focus {
  background: linear-gradient(145deg, #4f93d4, #0d6bc4);
  color: #fff;
}

.wos-btn-danger {
  border-color: rgb(159 29 29 / 38%);
  background: linear-gradient(145deg, #dc3545, #b02a37);
  color: #fff;
  box-shadow: 0 4px 12px rgb(185 28 28 / 22%);
}

.wos-btn-danger:hover,
.wos-btn-danger:focus {
  background: linear-gradient(145deg, #e04555, #c82333);
  color: #fff;
}

.wos-btn-success {
  border-color: rgb(31 95 50 / 38%);
  background: linear-gradient(145deg, #22a04a, #198754);
  color: #fff;
  box-shadow: 0 4px 12px rgb(25 135 84 / 22%);
}

.wos-btn-success:hover,
.wos-btn-success:focus {
  background: linear-gradient(145deg, #28b055, #1e9a4a);
  color: #fff;
}

body.wos-app-surface-v2 .wos-input,
body.wos-app-surface-v2 .wos-app input[type="text"],
body.wos-app-surface-v2 .wos-app input[type="search"],
body.wos-app-surface-v2 .wos-app input[type="file"],
body.wos-app-surface-v2 .wos-app select,
body.wos-app-surface-v2 .wos-app textarea {
  border-radius: var(--wos-surface-radius);
  font-size: var(--wos-surface-font-base);
  padding: 6px var(--wos-surface-pad-sm);
  min-height: var(--wos-surface-control-height);
  max-width: none;
}

.wos-input.is-invalid,
.wos-input[aria-invalid="true"],
.wos-field.is-invalid .wos-input {
  border-color: var(--wos-danger-text);
  box-shadow: 0 0 0 3px rgb(159 29 29 / 22%);
}

.wos-input-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.wos-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wos-space-3, 8px);
  max-width: 360px;
  margin-top: var(--wos-space-2, 6px);
}

@media (forced-colors: active) {
  .wos-input:focus-visible,
  .wos-app input[type="text"]:focus-visible,
  .wos-app input[type="file"]:focus-visible,
  .wos-btn:focus-visible {
    outline-color: Highlight;
    box-shadow: 0 0 0 5px Canvas;
  }
}

.wos-results {
  padding: 0;
  overflow: hidden;
}

.wos-status {
  display: block;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

.wos-status.is-ok {
  color: var(--wos-success-text);
}

.wos-status.is-error {
  color: var(--wos-danger-text);
}

.wos-status :is(h2, h3) {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 900;
}

.wos-status p {
  margin: 0 0 8px;
}

.wos-result-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--wos-muted);
  font-size: 12px;
  font-weight: 800;
}

.wos-status tr.unchanged {
  background: var(--wos-success-bg);
  color: var(--wos-success-text);
}

.wos-table-wrap:not(.wos-tabulator-wrap) {
  overflow: auto;
  max-height: 70vh;
  min-height: var(--wos-table-wrap-min-height);
  border-top: 1px solid var(--wos-border);
  contain: strict;
  overscroll-behavior: contain;
}

.payment-results.is-hide-unchanged tr.unchanged {
  display: none;
}

body.is-dark .wos-app select,
body.is-dark .wos-app textarea {
  background: var(--wos-field-bg);
  color: var(--wos-text);
}

.wos-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: var(--wos-table-wrap-min-height);
  padding: 16px 12px;
  color: var(--wos-muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.wos-empty b {
  color: var(--wos-text);
}

.wos-panel[aria-busy="true"],
.wos-app-body[aria-busy="true"] {
  opacity: 0.88;
  pointer-events: none;
}

.wos-tabulator,
.wos-tabulator-wrap,
.wos-tabulator-mount,
.wos-core-data .wos-tabulator-mount {
  opacity: 1;
  pointer-events: auto;
}

.wos-legacy-bridge .form-container,
.wos-legacy-bridge .container {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

body.wos-app-surface-v2 .wos-table-wrap,
body.wos-app-surface-v2 .vc-table-wrap {
  border-top: 1px solid var(--wos-surface-border);
}

.wos-app-wide .wos-table-wrap:not(.wos-tabulator-wrap) {
  max-height: calc(100vh - 190px);
}

.wos-status table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-size: 12px;
}

.wos-status th,
.wos-status td {
  border-bottom: 1px solid var(--wos-border);
  padding: 5px 7px;
  vertical-align: top;
  white-space: nowrap;
}

.wos-status th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--wos-panel-soft);
  color: var(--wos-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 0 var(--wos-border);
}

.wos-status tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: auto 28px;
}

.wos-status tbody tr:where(:not(.changed, .unchanged, .missing)):hover {
  background: rgb(230 241 255 / 55%);
}

body.is-dark .wos-status tbody tr:where(:not(.changed, .unchanged, .missing)):hover {
  background: rgb(37 99 180 / 34%);
}

.wos-status tr.changed {
  background: var(--wos-warning-bg);
  color: var(--wos-warning-text);
}

.wos-status tr.missing {
  background: var(--wos-danger-bg);
  color: var(--wos-danger-text);
}

.wos-status tr.excluded {
  background: var(--wos-neutral-bg);
  color: var(--wos-neutral-text);
}

.wos-status tr.blocked {
  background: var(--wos-danger-bg);
  color: var(--wos-danger-text);
  font-weight: 800;
}

.wos-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--wos-neutral-bg);
  border-radius: var(--wos-radius-sm);
  min-height: 1rem;
}

.wos-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 35%), transparent);
  animation: wos-skeleton-shimmer 1.2s ease-in-out infinite;
}

@keyframes wos-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (width <= 720px) {
  .wos-app {
    padding: 6px;
  }

  .payment-import-panel,
  .payment-filter-form {
    grid-template-columns: 1fr;
  }

  .wos-app-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .wos-input,
  .wos-app input[type="text"],
  .wos-app input[type="file"] {
    max-width: none;
  }
}

/* WOS status pills — shared semantic chips (Surface v2 primitive) */
.wos-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--wos-radius-pill);
  white-space: nowrap;
  border: 1px solid transparent;
}

.wos-pill-success {
  color: var(--wos-success, #1e8449);
  background: rgb(30 132 73 / 12%);
  border-color: rgb(30 132 73 / 25%);
}

.wos-pill-warning {
  color: #d35400;
  background: rgb(211 84 0 / 10%);
  border-color: rgb(211 84 0 / 25%);
}

.wos-pill-danger {
  color: var(--wos-danger, #c0392b);
  background: rgb(192 57 43 / 10%);
  border-color: rgb(192 57 43 / 25%);
}

.wos-pill-neutral {
  color: var(--wos-muted, #52667c);
  background: rgb(82 102 124 / 8%);
  border-color: rgb(82 102 124 / 20%);
}

.wos-pill-accent {
  color: var(--wos-accent, #1f6fb7);
  background: rgb(31 111 183 / 12%);
  border-color: rgb(31 111 183 / 25%);
}

[id="vcPullBadge"].wos-pill {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   WOS Core UI — compact ERP desktop shell (data-first Tabulator apps).
   Opt-in: .wos-core-shell on .wos-app. Pilot: dunning-waves/dunning-waves.html (Mahnwelle).
   -------------------------------------------------------------------------- */
.wos-core-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  height: 100%;
  margin: 0;
  padding: var(--wos-core-pad-sm);
  gap: var(--wos-core-gap);
  overflow: hidden;
}

html:has(.wos-core-shell),
body:has(.wos-core-shell) {
  height: 100%;
  overflow: hidden;
}

.wos-core-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wos-core-gap);
  min-height: var(--wos-core-toolbar-height);
  max-height: none;
  padding: var(--wos-core-pad-sm) var(--wos-core-pad);
  border: 1px solid var(--wos-core-border);
  border-radius: var(--wos-radius-sm);
  background: var(--wos-core-surface-soft);
  box-shadow: var(--wos-core-shadow);
}

.wos-core-filterbar {
  row-gap: var(--wos-core-gap);
}

.wos-core-filterbar-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wos-core-gap);
  flex: 1 1 auto;
  min-width: 0;
}

.wos-core-filterbar-fields .wos-field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 0 1 auto;
  min-width: 0;
}

.wos-core-kpis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wos-core-gap);
  flex: 0 1 auto;
  min-width: 0;
}

.wos-core-kpi {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-height: var(--wos-core-control-height-sm);
  padding: 2px 8px;
  border: 1px solid var(--wos-core-border);
  border-radius: var(--wos-radius-xs);
  background: var(--wos-core-surface);
  font-size: var(--wos-core-font-meta);
  font-weight: 700;
  color: var(--wos-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wos-core-kpi-val {
  font-size: var(--wos-core-font-data);
  font-weight: 800;
  color: var(--wos-text);
}

.wos-core-kpi.is-accent .wos-core-kpi-val {
  color: var(--wos-accent-strong);
}

.wos-core-kpi.is-warn .wos-core-kpi-val {
  color: var(--wos-warning-text);
}

.wos-core-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wos-core-gap);
  flex: 0 0 auto;
  margin-left: auto;
}

.wos-core-data {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wos-core-border);
  border-radius: var(--wos-radius-sm);
  background: var(--wos-core-surface);
  box-shadow: var(--wos-core-shadow);
  overflow: hidden;
}

.wos-core-data > .wos-tabulator-mount,
.wos-core-data > [id] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wos-core-data .wos-tabulator-toolbar {
  overflow: visible;
  position: relative;
  z-index: 20;
}

.wos-core-footer {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wos-core-gap);
  padding: var(--wos-core-pad-sm) var(--wos-core-pad);
  border: 1px solid var(--wos-core-border);
  border-radius: var(--wos-radius-sm);
  background: var(--wos-core-surface-soft);
}

.wos-core-footer-note {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--wos-core-font-meta);
  font-weight: 700;
  color: var(--wos-muted);
  line-height: 1.35;
}

.wos-core-status {
  flex: 0 0 auto;
  min-height: 16px;
  padding: 2px var(--wos-core-pad);
  font-size: var(--wos-core-font-data);
  line-height: 1.35;
}

.wos-core-empty {
  display: grid;
  place-items: center;
  gap: var(--wos-core-gap);
  flex: 1 1 auto;
  min-height: 120px;
  padding: var(--wos-core-pad);
  color: var(--wos-muted);
  font-size: var(--wos-core-font-data);
  font-weight: 700;
  text-align: center;
}

.wos-core-loading {
  display: grid;
  place-items: center;
  gap: var(--wos-core-gap);
  flex: 1 1 auto;
  min-height: 80px;
  padding: var(--wos-core-pad);
  color: var(--wos-muted);
  font-size: var(--wos-core-font-data);
  font-weight: 700;
}

.wos-core-loading::before {
  content: "⏳";
  font-size: 18px;
  line-height: 1;
  opacity: 0.75;
}

.wos-core-shell .wos-tabulator {
  flex: 1 1 auto;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: var(--wos-core-surface, #fff);
}

.wos-core-shell .wos-tabulator-toolbar {
  min-height: var(--wos-core-control-height-sm);
  max-height: var(--wos-core-toolbar-max);
  padding: 2px var(--wos-core-pad);
  border-bottom: 1px solid var(--wos-core-border);
  background: var(--wos-core-surface-soft);
  position: relative;
  z-index: 20;
  overflow: visible;
}

.wos-core-shell .wos-tabulator-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  border-top: none;
}

.wos-core-shell .wos-tabulator-chips-wrap {
  flex-shrink: 0;
  border-bottom: 1px solid var(--wos-core-border);
}

body.wos-app-surface-v2 .wos-core-shell {
  padding: var(--wos-core-pad-sm);
  gap: var(--wos-core-gap);
}

.wos-core-shell .dw-confirm-actions .wos-btn {
  width: 100%;
  justify-content: center;
}

body.wos-app-surface-v2 .wos-core-shell .wos-btn,
body.wos-app-surface-v2 .wos-core-shell .wos-input,
body.wos-app-surface-v2 .wos-core-shell select {
  min-height: var(--wos-core-control-height);
  font-size: var(--wos-core-font-data);
  box-shadow: none;
}

body.wos-app-surface-v2 .wos-btn:hover,
body.wos-app-surface-v2 .wos-btn:focus {
  box-shadow: none;
}

body.wos-app-surface-v2 .dw-confirm-actions .wos-btn {
  width: 100%;
  justify-content: center;
}

body.wos-app-surface-v2 .adr-confirm-actions .wos-btn {
  width: 100%;
  justify-content: center;
}

body.wos-app-surface-v2 .wos-core-shell .wos-btn:hover,
body.wos-app-surface-v2 .wos-core-shell .wos-btn:focus {
  box-shadow: none;
}

/* Mahnwelle pilot — field widths */

/* stylelint-disable-next-line no-descending-specificity -- pairs with "body.wos-app-surface-v2 .wos-core-shell .wos-btn:hover" (line 1410);
   different component, same trailing compound, so source order cannot change what either paints. */
body.wos-app-surface-v2 .adr-structured-actions .wos-btn {
  min-width: 7.5rem;
}

.wos-core-shell .dw-confirm-backdrop.is-open {
  display: flex;
}

.wos-core-shell .dw-confirm-dialog h2 {
  margin: 0 0 var(--wos-core-gap);
  font-size: 15px;
  font-weight: 800;
}

.wos-core-shell .dw-confirm-dialog p {
  margin: 0 0 var(--wos-core-pad);
  color: var(--wos-muted);
  font-size: var(--wos-core-font-data);
  font-weight: 700;
  line-height: 1.45;
}

@media (width <= 900px) {
  .wos-core-toolbar-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }

  .wos-core-footer {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --------------------------------------------------------------------------
   WOS App Surface v2 — optional Odoo-inspired clarity layer (additive only).
   Opt-in: body.wos-app-surface-v2. Spec: WOS-Lifecycle/research/ui/
   researched/2026-06-25__wos-design-language-odoo-inspired__researched.md
   -------------------------------------------------------------------------- */
body.wos-app-surface-v2 {
  --wos-surface-unit: var(--wos-space-3);
  --wos-surface-gap-xs: var(--wos-space-1);
  --wos-surface-gap: var(--wos-space-3);
  --wos-surface-gap-lg: calc(var(--wos-space-3) * 2);
  --wos-surface-pad: var(--wos-space-5);
  --wos-surface-pad-sm: var(--wos-space-3);
  --wos-surface-radius-sm: var(--wos-radius-xs);
  --wos-surface-radius: var(--wos-radius-sm);
  --wos-surface-radius-lg: var(--wos-radius-md);
  --wos-surface-font-xs: 11px;
  --wos-surface-font-sm: 12px;
  --wos-surface-font-base: 14px;
  --wos-surface-font-lg: 15px;
  --wos-surface-font-xl: 18px;
  --wos-surface-row-height: 32px;
  --wos-surface-control-height: var(--wos-control-height);
  --wos-surface-panel-shadow: none;
  --wos-surface-text: var(--wos-text);
  --wos-surface-muted: var(--wos-muted);
  --wos-surface-border: var(--wos-border);
  --wos-surface-bg: var(--wos-panel);
  --wos-surface-bg-soft: var(--wos-panel-soft);
  --wos-surface-accent: var(--wos-accent);
  --wos-surface-hover: rgb(11 92 171 / 6%);
  --wos-surface-selected: rgb(11 92 171 / 10%);
  --wos-control-min-height: var(--wos-surface-control-height);
}

body.wos-app-surface-v2.is-dark {
  --wos-surface-hover: rgb(125 179 234 / 14%);
  --wos-surface-selected: rgb(125 179 234 / 22%);
}

body.wos-app-surface-v2 .wos-app {
  font-size: var(--wos-surface-font-base);
}

.dms-preview-shell .wos-app-body,
.dms-preview-mount {
  height: 100%;
  min-height: 0;
}

body.wos-app-surface-v2 .wos-app-body {
  gap: var(--wos-surface-gap);
}

body.wos-app-surface-v2 .wos-panel {
  border-radius: var(--wos-surface-radius);
  box-shadow: var(--wos-surface-panel-shadow);
  outline: none;
  padding: var(--wos-surface-pad);
}

body.wos-app-surface-v2 .wos-panel.wos-results {
  padding: 0;
}

body.wos-app-surface-v2 .wos-panel-title {
  font-size: var(--wos-surface-font-sm);
  margin-bottom: var(--wos-surface-gap-xs);
}

body.wos-app-surface-v2 .wos-badge {
  font-size: var(--wos-surface-font-xs);
  padding: 2px var(--wos-surface-pad-sm);
  border-radius: var(--wos-radius-pill);
}

body.wos-app-surface-v2 .wos-control-strip,
body.wos-app-surface-v2 .vc-toolbar,
body.wos-app-surface-v2 .tm-toolbar,
body.wos-app-surface-v2 .adr-toolbar,
body.wos-app-surface-v2 .vc-spesen-toolbar,
body.wos-app-surface-v2 .vc-route-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wos-surface-gap);
  padding: var(--wos-surface-pad-sm) var(--wos-surface-pad);
  border: 1px solid var(--wos-surface-border);
  border-radius: var(--wos-surface-radius);
  background: var(--wos-surface-bg-soft);
  position: sticky;
  top: 0;
  z-index: 2;
}

body.wos-app-surface-v2 .wos-control-strip-filters,
body.wos-app-surface-v2 .vc-control-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wos-surface-gap-xs);
  flex: 0 1 auto;
  min-width: 0;
}

body.wos-app-surface-v2 .wos-control-strip-search,
body.wos-app-surface-v2 .wos-control-strip [id="vcSearch"],
body.wos-app-surface-v2 .vc-toolbar [id="vcSearch"] {
  flex: 1 1 180px;
  min-width: 140px;
}

body.wos-app-surface-v2 .wos-control-strip-status,
body.wos-app-surface-v2 .vc-control-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wos-surface-gap-xs);
  flex: 0 1 auto;
}

body.wos-app-surface-v2 .wos-control-strip-actions,
body.wos-app-surface-v2 .vc-control-actions {
  display: flex;
  align-items: center;
  gap: var(--wos-surface-gap-xs);
  flex: 0 0 auto;
  margin-left: auto;
}

body.wos-app-surface-v2 .wos-pill {
  font-size: var(--wos-surface-font-xs);
  padding: 2px var(--wos-surface-pad-sm);
}

body.wos-app-surface-v2 .vc-nav-btn.is-active {
  background: var(--wos-accent-soft);
  border-color: var(--wos-surface-accent);
  color: var(--wos-accent-strong);
}

.doctree-preview-office table {
  border-collapse: collapse;
  width: 100%;
  font-size: inherit;
}

body.wos-app-surface-v2 .wos-status table,
body.wos-app-surface-v2 .vc-table,
body.wos-app-surface-v2 .tm-table,
body.wos-app-surface-v2 .vc-spesen-table,
body.wos-app-surface-v2 .vc-route-fleet,
body.wos-app-surface-v2 .vc-route-points,
body.wos-app-surface-v2 .vc-master-table {
  font-size: var(--wos-surface-font-sm);
}

.doctree-preview-office td,
.doctree-preview-office th {
  border: 1px solid var(--wos-surface-border, #ddd);
  padding: 4px 6px;
  vertical-align: top;
}

.scanner-supervisor .event-table th,
.scanner-supervisor .event-table td,
.scanner-supervisor .heat-table th,
.scanner-supervisor .heat-table td,
.scanner-supervisor .ladung-table th,
.scanner-supervisor .ladung-table td {
  border-bottom: 1px solid var(--wos-border);
  padding: 6px 8px;
  vertical-align: top;
  font-size: 0.82rem;
}

.scanner-supervisor .event-table th,
.scanner-supervisor .heat-table th,
.scanner-supervisor .ladung-table th {
  background: var(--wos-panel-soft);
  color: var(--wos-text);
  position: sticky;
  top: 0;
  z-index: 2;
}

.scanner-supervisor .event-filter-row th {
  background: var(--wos-panel);
  top: 36px;
  z-index: 2;
  padding: 4px 6px;
}

body.wos-app-surface-v2 .wos-status th,
body.wos-app-surface-v2 .wos-status td,
body.wos-app-surface-v2 .vc-table th,
body.wos-app-surface-v2 .vc-table td,
body.wos-app-surface-v2 .tm-table th,
body.wos-app-surface-v2 .tm-table td {
  padding: 6px var(--wos-surface-pad-sm);
  min-height: var(--wos-surface-row-height);
}

body.wos-app-surface-v2 .wos-status th,
body.wos-app-surface-v2 .vc-table th,
body.wos-app-surface-v2 .tm-table th {
  font-size: var(--wos-surface-font-xs);
  background: var(--wos-surface-bg-soft);
  box-shadow: 0 1px 0 var(--wos-surface-border);
}

body.wos-app-surface-v2 .tm-table tbody tr:hover,
body.wos-app-surface-v2 .vc-table tbody tr[data-vin]:hover,
body.wos-app-surface-v2 .vc-table tbody tr[data-driver-id]:hover,
body.wos-app-surface-v2 .wos-status tbody tr:not(.changed, .unchanged, .missing):hover {
  background: var(--wos-surface-hover);
}

body.wos-app-surface-v2 .vc-table tr.is-active,
body.wos-app-surface-v2 .tm-table tr.is-active {
  background: var(--wos-surface-selected);
}

body.wos-app-surface-v2 .tm-provider-panel .wos-pill,
body.wos-app-surface-v2 .tm-row-provider.wos-pill {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.wos-app-surface-v2 .tm-provider-panel .wos-pill.is-disabled {
  opacity: 0.65;
}

body.wos-app-surface-v2 .tm-seg-btn.is-active {
  background: var(--wos-surface-selected);
  color: var(--wos-accent-strong);
}

body.wos-app-surface-v2 .vc-detail,
body.wos-app-surface-v2 .tm-detail {
  gap: var(--wos-surface-gap);
}

body.wos-app-surface-v2 .vc-detail-section,
body.wos-app-surface-v2 .tm-detail-section {
  margin-top: var(--wos-surface-gap);
}

body.wos-app-surface-v2 .tm-provider-panel.wos-panel {
  padding: var(--wos-surface-pad-sm) var(--wos-surface-pad);
}

body.wos-app-surface-v2 .vc-health-card {
  border-radius: var(--wos-surface-radius);
  box-shadow: none;
}

body.wos-app-surface-v2 .wos-empty {
  font-size: var(--wos-surface-font-base);
  min-height: 96px;
  gap: var(--wos-surface-gap-xs);
}

body.wos-app-surface-v2 .wos-status {
  font-size: var(--wos-surface-font-base);
  padding: var(--wos-surface-pad-sm) var(--wos-surface-pad);
}

/* Phase C pilot: dunning-waves/dunning-waves.html — control strip, KPI stats, results table */

@media (width <= 900px) {
  body.wos-app-surface-v2 .dw-commit-bar {
    grid-template-columns: 1fr;
  }
}

body.wos-app-surface-v2 .dw-commit-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--wos-surface-gap);
  align-items: center;
}

body.wos-app-surface-v2 .dw-status {
  font-size: var(--wos-surface-font-sm);
  min-height: 18px;
}

body.wos-app-surface-v2 .dw-note {
  font-size: var(--wos-surface-font-xs);
  color: var(--wos-surface-muted);
  margin: 0;
}

body.wos-app-surface-v2 .dw-table-mount {
  flex: 1 1 auto;
  min-height: 0;
}

body.wos-app-surface-v2 .dw-results-title {
  font-size: var(--wos-surface-font-sm);
  font-weight: 800;
}

body.wos-app-surface-v2 .dw-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wos-surface-gap);
}

body.wos-app-surface-v2 .dw-results-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: var(--wos-surface-gap-xs);
  padding: var(--wos-surface-pad);
}

body.wos-app-surface-v2 .dw-stat.warn .dw-v {
  color: var(--wos-warning-text, #b45309);
}

body.wos-app-surface-v2 .dw-stat.warn {
  border-color: rgb(180 83 9 / 40%);
}

body.wos-app-surface-v2 .dw-stat.accent .dw-v {
  color: var(--wos-surface-accent);
}

body.wos-app-surface-v2 .dw-stat.accent {
  border-color: rgb(11 92 171 / 35%);
}

body.wos-app-surface-v2 .dw-stat .dw-l {
  font-size: var(--wos-surface-font-xs);
  color: var(--wos-surface-muted);
  margin-top: var(--wos-surface-gap-xs);
}

/* stylelint-disable-next-line no-descending-specificity -- pairs with "body.wos-app-surface-v2 .dw-stat.warn .dw-v" (line 1880);
   different component, same trailing compound, so source order cannot change what either paints. */
body.wos-app-surface-v2 .dw-stat .dw-v {
  font-size: var(--wos-surface-font-xl, 18px);
  font-weight: 800;
  line-height: 1.15;
}

body.wos-app-surface-v2 .dw-stat {
  flex: 1 1 120px;
  min-width: 110px;
  border-radius: var(--wos-surface-radius);
  padding: var(--wos-surface-pad-sm) var(--wos-surface-pad);
  border: 1px solid var(--wos-surface-border);
  background: var(--wos-surface-bg);
  box-shadow: none;
}

body.wos-app-surface-v2 .dw-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wos-surface-gap);
}

body.wos-app-surface-v2 .dw-toolbar-filters [id="dwDraftSelect"] {
  max-width: 200px;
}

body.wos-app-surface-v2 .dw-toolbar-filters [id="dwAddressFilter"] {
  flex: 1 1 200px;
  max-width: 320px;
}

body.wos-app-surface-v2 .dw-toolbar-filters [id="dwWeekKey"] {
  max-width: 168px;
}

body.wos-app-surface-v2 .dw-toolbar-filters .wos-field {
  margin: 0;
  flex: 1 1 140px;
  min-width: 100px;
  max-width: 220px;
}

body.wos-app-surface-v2 .dw-toolbar-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--wos-surface-gap);
  flex: 1 1 auto;
  min-width: 0;
}

body.wos-app-surface-v2 .dw-toolbar.wos-control-strip {
  align-items: end;
  position: static;
}

body.wos-app-surface-v2 .dw-shell .wos-app-body {
  display: flex;
  flex-direction: column;
  gap: var(--wos-surface-gap);
  padding: var(--wos-surface-pad-sm);
  min-height: calc(100vh - 16px);
}

body.wos-app-surface-v2 .dw-shell {
  width: 100%;
  max-width: 100%;
}

body.wos-app-surface-v2 .dw-confirm-backdrop.is-open {
  display: flex;
}

.scanner-supervisor .kpi-card h2 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
}

body.wos-app-surface-v2 .dw-confirm-dialog h2 {
  margin: 0 0 var(--wos-surface-gap);
  font-size: var(--wos-surface-font-xl, 18px);
}

body.wos-app-surface-v2 .dw-confirm-dialog p {
  margin: 0 0 var(--wos-surface-pad);
  color: var(--wos-surface-muted);
  font-weight: 700;
  line-height: 1.45;
}

/* Address remake: addresses.html — control strip, results/detail layout, confirm modals */

body.wos-app-surface-v2 .adr-shell .wos-app-body {
  display: flex;
  flex-direction: column;
  gap: var(--wos-surface-gap);
  padding: var(--wos-surface-pad-sm);
  min-height: calc(100vh - 16px);
}

body.wos-app-surface-v2 .adr-toolbar.wos-control-strip {
  align-items: end;
  position: static;
}

body.wos-app-surface-v2 .adr-toolbar-filters .wos-field {
  margin: 0;
  flex: 1 1 120px;
  min-width: 90px;
  max-width: 180px;
}

body.wos-app-surface-v2 .adr-results,
body.wos-app-surface-v2 .adr-detail {
  display: none;
  flex-direction: column;
  gap: var(--wos-surface-gap-xs);
  min-height: 0;
}

@media (width <= 900px) {
  body.wos-app-surface-v2 .adr-layout {
    grid-template-columns: 1fr;
  }
}

body.wos-app-surface-v2 .adr-layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: var(--wos-surface-gap);
  min-height: 0;
}

body.wos-app-surface-v2 .adr-toolbar-filters .adr-field-id {
  flex: 1 1 180px;
  max-width: 260px;
}

body.wos-app-surface-v2 .adr-results.is-visible,
body.wos-app-surface-v2 .adr-detail.is-visible {
  display: flex;
}

body.wos-app-surface-v2 .adr-row {
  cursor: pointer;
}

body.wos-app-surface-v2 .adr-row.is-selected {
  background: var(--wos-surface-selected);
}

body.wos-app-surface-v2 .adr-results-title {
  font-size: var(--wos-surface-font-sm);
  font-weight: 800;
  color: var(--wos-surface-text);
}

body.wos-app-surface-v2 .adr-results-head {
  margin-bottom: var(--wos-surface-gap-xs);
}

body.wos-app-surface-v2 .adr-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wos-surface-gap);
  font-size: var(--wos-surface-font-sm);
  color: var(--wos-surface-muted);
  font-weight: 700;
}

body.wos-app-surface-v2 .adr-results .wos-table-wrap {
  flex: 1 1 auto;
  max-height: calc(100vh - 280px);
  overflow: auto;
}

body.wos-app-surface-v2 .adr-results {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--wos-surface-pad);
}

body.wos-app-surface-v2 .adr-detail-row strong {
  font-weight: 700;
}

body.wos-app-surface-v2 .adr-detail-row:last-child {
  border-bottom: none;
}

/* stylelint-disable-next-line no-descending-specificity -- pairs with "body.wos-app-surface-v2 .adr-detail-row:last-child" (line 2161);
   different component, same trailing compound, so source order cannot change what either paints. */
body.wos-app-surface-v2 .adr-detail-row {
  padding: var(--wos-surface-gap-xs) 0;
  border-bottom: 1px solid var(--wos-surface-border);
}

body.wos-app-surface-v2 .adr-detail-block h4 {
  margin: 0 0 var(--wos-surface-gap-xs);
  font-size: var(--wos-surface-font-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wos-surface-muted);
}

body.wos-app-surface-v2 .adr-detail-block {
  border: 1px solid var(--wos-surface-border);
  border-radius: var(--wos-surface-radius-sm);
  padding: var(--wos-surface-pad-sm);
  margin-bottom: var(--wos-surface-gap-xs);
  background: var(--wos-surface-bg-soft);
}

body.wos-app-surface-v2 .adr-empty-icon {
  font-size: 22px;
  line-height: 1;
  opacity: 0.7;
}

body.wos-app-surface-v2 .adr-empty-search strong {
  color: var(--wos-surface-text);
  font-size: var(--wos-surface-font-base);
}

body.wos-app-surface-v2 .adr-empty-search.is-visible {
  display: flex;
}

body.wos-app-surface-v2 .adr-empty-search {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--wos-surface-gap-xs);
  padding: var(--wos-surface-pad) var(--wos-surface-pad-sm);
  text-align: center;
  color: var(--wos-surface-muted);
  font-size: var(--wos-surface-font-sm);
}

body.wos-app-surface-v2 .adr-actions-gated {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--wos-surface-bg);
  border-top: 1px solid var(--wos-surface-border);
  padding-top: var(--wos-surface-gap-xs);
  margin-top: 2px;
}

body.wos-app-surface-v2 .adr-detail .adr-meta {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--wos-surface-bg);
  border-bottom: 1px solid var(--wos-surface-border);
  padding-bottom: var(--wos-surface-gap-xs);
  margin-bottom: 2px;
}

body.wos-app-surface-v2 .adr-tab {
  appearance: none;
  border: 1px solid var(--wos-surface-border);
  background: var(--wos-surface-bg);
  color: var(--wos-surface-text);
  border-radius: var(--wos-surface-radius-sm);
  padding: 4px 10px;
  font-size: var(--wos-surface-font-sm);
  font-weight: 700;
  cursor: pointer;
  line-height: 1.3;
}

body.wos-app-surface-v2 .adr-tab.is-active {
  background: var(--wos-accent, #2563eb);
  border-color: transparent;
  color: #fff;
}

body.wos-app-surface-v2 .adr-tab-panel {
  display: none;
  width: 100%;
}

body.wos-app-surface-v2 .adr-tab-panel.is-active {
  display: contents;
}

body.wos-app-surface-v2 .adr-detail-body .adr-tab-panel.is-active {
  display: block;
}

body.wos-app-surface-v2 .adr-detail-empty {
  padding: var(--wos-surface-pad);
  text-align: center;
  color: var(--wos-surface-muted);
  font-size: var(--wos-surface-font-sm);
}

body.wos-app-surface-v2 .adr-detail-tabs {
  padding: 0;
}

body.wos-app-surface-v2 .adr-create .adr-form-actions {
  grid-column: 1 / -1;
}

body.wos-app-surface-v2 .adr-create .adr-form-tabs {
  padding-top: var(--wos-surface-pad-xs);
}

body.wos-app-surface-v2 .adr-create .adr-tab-panel.is-active {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--wos-surface-gap);
  width: 100%;
}

body.wos-app-surface-v2 .adr-form-grid .wos-field {
  margin-bottom: 0;
}

body.wos-app-surface-v2 .adr-create.is-visible {
  display: flex;
}

body.wos-app-surface-v2 .adr-create {
  display: none;
  flex-direction: column;
  gap: var(--wos-surface-gap-xs);
}

body.wos-app-surface-v2 .adr-actions-gated .wos-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

body.wos-app-surface-v2 .adr-form-grid .is-wide {
  grid-column: 1 / -1;
}

body.wos-app-surface-v2 .adr-form-grid .wos-actions,
body.wos-app-surface-v2 .adr-form-grid .wos-form-actions,
body.wos-app-surface-v2 .adr-form-grid .wos-control-strip-actions {
  grid-column: 1 / -1;
}

body.wos-app-surface-v2 .adr-form-section {
  grid-column: 1 / -1;
  padding-top: var(--wos-surface-gap-xs);
  border-top: 1px solid var(--wos-surface-border);
  color: var(--wos-surface-muted);
  font-size: var(--wos-surface-font-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.wos-app-surface-v2 .adr-role-terms.is-visible {
  display: contents;
}

body.wos-app-surface-v2 .adr-role-terms {
  display: none;
}

body.wos-app-surface-v2 .adr-form-grid .is-checks label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--wos-surface-font-sm);
  font-weight: 700;
}

body.wos-app-surface-v2 .adr-form-grid .is-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

body.wos-app-surface-v2 .adr-confirm.is-open {
  display: flex;
}

body.wos-app-surface-v2 .adr-ac-item {
  padding: 5px 8px;
  cursor: pointer;
  font-size: var(--wos-surface-font-sm);
  border-bottom: 1px solid var(--wos-surface-border);
}

body.wos-app-surface-v2 .adr-ac-list {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  border: 1px solid var(--wos-surface-border);
  border-radius: var(--wos-surface-radius-sm);
  background: var(--wos-surface-bg);
  max-height: 120px;
  overflow: auto;
}

body.wos-app-surface-v2 .adr-pilot-hint {
  color: var(--wos-surface-muted);
  font-weight: 700;
}

body.wos-app-surface-v2 .adr-pilot.is-visible {
  display: flex;
}

body.wos-app-surface-v2 .adr-pilot {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wos-surface-gap);
  padding: var(--wos-surface-pad-sm);
  font-size: var(--wos-surface-font-xs);
}

body.wos-app-surface-v2 .adr-btn-save:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

body.wos-app-surface-v2 .adr-lock-hint {
  font-size: 0.8rem;
  color: var(--wos-accent, #2f7ec6);
  margin-top: 0.25rem;
}

body.wos-app-surface-v2 .adr-structured-row.is-locked .adr-structured-input[disabled] {
  opacity: 0.65;
}

body.wos-app-surface-v2 .adr-structured-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.45rem;
  flex-wrap: wrap;
}

body.wos-app-surface-v2 .adr-structured-check {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  padding: 0.25rem 0;
}

body.wos-app-surface-v2 .adr-structured-grid .wos-field {
  margin: 0;
  min-width: 0;
}

@media (width <= 1200px) {
  body.wos-app-surface-v2 .adr-structured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.wos-app-surface-v2 .adr-structured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem 0.65rem;
  align-items: end;
}

body.wos-app-surface-v2 .adr-structured-subhead {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
  opacity: 0.85;
}

body.wos-app-surface-v2 .adr-structured-new {
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--wos-surface-border, rgb(128 128 128 / 35%));
}

body.wos-app-surface-v2 .adr-structured-row:first-of-type {
  border-top: none;
}

/* stylelint-disable-next-line no-descending-specificity -- pairs with "body.wos-app-surface-v2 .adr-structured-row:first-of-type" (line 2488);
   different component, same trailing compound, so source order cannot change what either paints. */
body.wos-app-surface-v2 .adr-structured-row {
  padding: 0.55rem 0;
  border-top: 1px solid var(--wos-surface-border, rgb(128 128 128 / 15%));
}

body.wos-app-surface-v2 .adr-structured-head h4 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
}

body.wos-app-surface-v2 .adr-structured-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

body.wos-app-surface-v2 .adr-structured-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* stylelint-disable-next-line no-descending-specificity -- pairs with "body.wos-app-surface-v2 .adr-structured-block:last-child" (line 2510);
   different component, same trailing compound, so source order cannot change what either paints. */
body.wos-app-surface-v2 .adr-structured-block {
  margin-bottom: var(--wos-surface-gap);
  padding-bottom: var(--wos-surface-gap);
  border-bottom: 1px solid var(--wos-surface-border, rgb(128 128 128 / 25%));
}

/* stylelint-disable-next-line no-descending-specificity -- pairs with "body.wos-app-surface-v2 .adr-btn-save:disabled" (line 2427);
   different component, same trailing compound, so source order cannot change what either paints. */
body.wos-app-surface-v2 .adr-btn-save {
  background: linear-gradient(145deg, #2ea043, #1f5f32);
  border-color: transparent;
  color: #fff;
}

body.wos-app-surface-v2 .adr-ac-item:last-child {
  border-bottom: none;
}

body.wos-app-surface-v2 .adr-ac-item:hover,
body.wos-app-surface-v2 .adr-ac-item.is-focus {
  background: var(--wos-surface-hover);
}

body.wos-app-surface-v2 .adr-enrich-diff-row {
  display: block;
  padding: var(--wos-surface-pad-sm);
  border: 1px solid var(--wos-surface-border);
  border-radius: var(--wos-surface-radius-sm);
  font-size: var(--wos-surface-font-sm);
  cursor: pointer;
}

body.wos-app-surface-v2 .adr-enrich-diffs {
  display: flex;
  flex-direction: column;
  gap: var(--wos-surface-gap-xs);
  max-height: 220px;
  overflow: auto;
}

body.wos-app-surface-v2 .adr-enrich-actions.is-visible {
  display: flex;
}

body.wos-app-surface-v2 .adr-enrich-actions {
  grid-column: 1 / -1;
  display: none;
  flex-wrap: wrap;
  gap: var(--wos-surface-gap);
}

body.wos-app-surface-v2 .adr-results .wos-pill,
body.wos-app-surface-v2 .adr-detail-body .wos-pill {
  margin: 0 2px 2px 0;
}

/* DocTree — WOS Document Management (tree + preview + drag-drop) */
.doctree-mount {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  height: 100%;
}

body.wos-app-surface-v2 .adr-finalize-check .adr-detail-row {
  font-size: var(--wos-surface-font-xs);
}

body.wos-app-surface-v2 .adr-enrich-to {
  color: var(--wos-surface-accent);
  font-weight: 700;
}

body.wos-app-surface-v2 .adr-enrich-from {
  color: var(--wos-surface-muted);
  text-decoration: line-through;
}

.doctree-root {
  display: flex;
  flex-direction: column;
  gap: var(--wos-surface-gap-sm, 8px);
  flex: 1 1 auto;
  min-height: 280px;
  max-height: calc(100vh - 240px);
  min-width: 0;
}

.doctree-workspace {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.doctree-tree-panel {
  position: relative;
  flex: 0 0 38%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border: 2px dashed var(--wos-surface-border, #ccc);
  transition:
    border-color 0.15s,
    background 0.15s;
  padding-top: 28px;
}

.doctree-splitter {
  flex: 0 0 6px;
  cursor: col-resize;
  background: color-mix(in srgb, var(--wos-surface-border, #ccc) 55%, transparent);
  border-radius: 2px;
  margin: 0 2px;
  align-self: stretch;
}

.doctree-splitter:hover,
.doctree-splitter:focus-visible {
  background: color-mix(in srgb, var(--wos-accent, #2563eb) 35%, transparent);
  outline: none;
}

.doctree-preview-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0;
}

.doctree-preview-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--wos-surface-border, #ddd);
  flex: 0 0 auto;
}

.doctree-preview {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.doctree-preview-empty,
.doctree-preview-loading {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: var(--wos-surface-muted, #666);
  font-size: var(--wos-surface-font-sm, 0.8125rem);
  text-align: center;
}

.doctree-preview-iframe {
  flex: 1 1 auto;
  width: 100%;
  min-height: 180px;
  border: none;
  background: var(--wos-surface-bg, #fff);
}

.doctree-preview-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
}

.doctree-preview-text {
  margin: 0;
  padding: 8px 10px;
  font-size: var(--wos-surface-font-sm, 0.8125rem);
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, Consolas, monospace;
}

.doctree-preview-text-note {
  padding: 6px 10px;
  font-size: var(--wos-surface-font-sm, 0.75rem);
  color: var(--wos-surface-muted, #666);
  border-bottom: 1px solid var(--wos-surface-border, #ddd);
}

.doctree-preview-fallback {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  text-align: center;
}

.doctree-preview-fallback-icon {
  font-size: 2rem;
  line-height: 1;
}

.doctree-preview-fallback-name {
  font-weight: 600;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.doctree-preview-fallback-meta {
  color: var(--wos-surface-muted, #666);
  font-size: var(--wos-surface-font-sm, 0.8125rem);
}

.doctree-upload-corner {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  border: none;
  background: color-mix(in srgb, var(--wos-surface-bg, #fff) 85%, transparent);
  color: var(--wos-accent, #2563eb);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--wos-radius-sm, 4px);
  opacity: 0.75;
}

.doctree-upload-corner:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--wos-accent, #2563eb) 10%, transparent);
}

.doctree-tree-panel.is-dragover {
  border-color: var(--wos-accent, #2563eb);
  background: color-mix(in srgb, var(--wos-accent, #2563eb) 8%, transparent);
}

.doctree-tree-panel.is-drop-disabled {
  border-style: solid;
}

.doctree-tree-root,
.doctree-tree-children,
.doctree-tree-revisions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.doctree-tree-children {
  padding-left: 1.25rem;
}

.doctree-tree-revisions {
  padding-left: 2rem;
}

.doctree-folder-toggle,
.doctree-file-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--wos-radius-sm, 4px);
}

.doctree-folder-toggle:hover,
.doctree-file-row:hover {
  background: color-mix(in srgb, var(--wos-accent, #2563eb) 6%, transparent);
}

.doctree-folder.is-drop-target,
.doctree-file.is-drop-target > .doctree-file-row {
  outline: 2px solid var(--wos-accent, #2563eb);
  background: color-mix(in srgb, var(--wos-accent, #2563eb) 10%, transparent);
}

.doctree-file.is-selected > .doctree-file-row {
  background: color-mix(in srgb, var(--wos-accent, #2563eb) 12%, transparent);
}

.doctree-folder-icon,
.doctree-file-rev-toggle {
  flex: 0 0 auto;
  width: 1.1rem;
  color: var(--wos-surface-muted, #666);
  font-size: 0.75rem;
}

.doctree-file-rev-toggle {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.doctree-file-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doctree-file-meta,
.doctree-revision-meta,
.doctree-folder-count {
  flex: 0 0 auto;
  color: var(--wos-surface-muted, #666);
  font-size: var(--wos-surface-font-sm, 0.8125rem);
  white-space: nowrap;
}

.doctree-file-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  opacity: 0.55;
}

.doctree-file-row:hover .doctree-file-actions,
.doctree-file.is-selected .doctree-file-actions {
  opacity: 1;
}

.doctree-btn-icon {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--wos-radius-sm, 4px);
  font: inherit;
  line-height: 1.2;
}

.doctree-btn-icon:hover {
  background: color-mix(in srgb, var(--wos-accent, #2563eb) 14%, transparent);
}

.doctree-revision {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 1.5rem;
  font-size: var(--wos-surface-font-sm, 0.8125rem);
  cursor: pointer;
  border-radius: var(--wos-radius-sm, 4px);
}

.doctree-revision:hover {
  background: color-mix(in srgb, var(--wos-accent, #2563eb) 6%, transparent);
}

.doctree-revision-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doctree-fallback {
  text-align: center;
}

.doctree-fallback-link {
  border: none;
  background: transparent;
  color: var(--wos-surface-muted, #666);
  font-size: var(--wos-surface-font-sm, 0.8125rem);
  cursor: pointer;
  text-decoration: underline;
  padding: 2px 4px;
}

.doctree-fallback-link:hover {
  color: var(--wos-accent, #2563eb);
}

.doctree-compact .doctree-tree-panel {
  flex-basis: 36%;
}

.doctree-meta-deferred {
  padding: 8px;
}

.doctree-empty,
.doctree-drop-hint {
  padding: 16px 12px;
  color: var(--wos-surface-muted, #666);
  font-size: var(--wos-surface-font-sm, 0.875rem);
  text-align: center;
}

.doctree-empty-folder .doctree-empty {
  padding: 4px 8px 4px 1.25rem;
  text-align: left;
}

.doctree-status.is-error {
  color: var(--wos-danger, #b91c1c);
}

.doctree-preview-office {
  padding: 8px 10px;
  overflow: auto;
  font-size: var(--wos-surface-font-sm, 0.875rem);
}

.doctree-file-thumb {
  flex: 0 0 auto;
  width: 2rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 2px;
  font-size: 0.95rem;
  line-height: 1;
}

.doctree-thumb-img,
.doctree-thumb-canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}

.doctree-preview-text-edit {
  width: 100%;
  min-height: 16rem;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.35;
  white-space: pre-wrap;
}

.wos-pptx-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 12rem;
  gap: 0.35rem;
}

.wos-pptx-status {
  font-size: 0.8rem;
  color: var(--wos-muted, #666);
}

.wos-pptx-stage {
  flex: 1 1 auto;
  min-height: 10rem;
  overflow: auto;
  border: 1px solid var(--wos-border, #ddd);
  border-radius: 4px;
}

.doctree-workspace.is-preview-window {
  min-height: calc(100vh - 2rem);
}

.doctree-preview-mail {
  padding: 8px 10px;
}

.doctree-mail-row {
  margin-bottom: 4px;
  font-size: var(--wos-surface-font-sm, 0.8125rem);
  overflow-wrap: anywhere;
}

.doctree-mail-label {
  font-weight: 600;
}

.doctree-mail-body {
  margin-top: 8px;
}

.doctree-confirm {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--wos-surface-gap-lg, 16px);
  background: rgb(8 13 22 / 58%);
  z-index: 1000;
}

.doctree-confirm.is-open {
  display: flex;
}

.doctree-confirm-box {
  width: min(480px, 100%);
  border: 1px solid var(--wos-surface-border, #ccc);
  border-radius: var(--wos-surface-radius-lg, 8px);
  background: var(--wos-surface-bg, #fff);
  color: var(--wos-surface-text, #111);
  box-shadow: 0 18px 48px rgb(0 0 0 / 28%);
  padding: var(--wos-surface-pad, 12px);
}

.doctree-confirm-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.doctree-confirm-text {
  font-size: var(--wos-surface-font-sm, 0.875rem);
  overflow-wrap: anywhere;
}

.doctree-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wos-surface-gap, 8px);
  margin-top: var(--wos-surface-pad, 12px);
}

.doctree-btn-yes {
  background: linear-gradient(145deg, #2ea043, #1f5f32);
  border-color: transparent;
  color: #fff;
}

.doctree-btn-no {
  background: linear-gradient(145deg, #d94848, #9f1d1d);
  border-color: transparent;
  color: #fff;
}

.doctree-preview-popout {
  min-height: 100vh;
  max-height: none;
}

.wos-pdf-viewer {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  gap: 6px;
}

.doctree-popout-body {
  margin: 0;
  min-height: 100vh;
  background: var(--wos-surface-bg, #fff);
}

.wos-pdf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.wos-pdf-btn {
  padding: 4px 8px;
  min-width: 0;
  font-size: 12px;
}

.wos-pdf-page-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wos-muted);
}

.wos-pdf-page-input {
  width: 52px;
  min-width: 0;
  padding: 3px 6px;
  font-size: 12px;
  text-align: center;
}

.wos-pdf-search {
  flex: 1 1 120px;
  min-width: 120px;
  max-width: 220px;
  padding: 4px 8px;
  font-size: 12px;
}

.wos-pdf-canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: rgb(255 255 255 / 35%);
  border: 1px solid rgb(47 126 198 / 22%);
  border-radius: 10px;
  padding: 8px;
}

body.is-dark .wos-pdf-canvas-wrap {
  background: rgb(8 13 22 / 35%);
}

.wos-pdf-canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.wos-pdf-status {
  font-size: 11px;
  font-weight: 700;
  color: var(--wos-muted);
  min-height: 1.2em;
}

.doctree-preview .wos-pdf-viewer {
  height: 100%;
}

.adr-tab-panel[data-tab-panel="documents"] {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* jobs/jobs.html — Lagerjobs Wochenkalender */
body.wos-app-surface-v2.jobmanager-app,
body.wos-app-surface-v2.jobmanager-app html {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body.wos-app-surface-v2.jobmanager-app {
  padding: 0;
  background: transparent;
  font-family: var(--wos-font-ui, Arial, sans-serif);
  color: var(--wos-text, #1e293b);
}

body.wos-app-surface-v2.jobmanager-app #form1 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.wos-app-surface-v2.jobmanager-app .jm-shell.wos-app {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.wos-app-surface-v2.jobmanager-app .jm-shell .wos-app-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  contain: none;
  gap: 6px;
}

body.wos-app-surface-v2.jobmanager-app .jm-shell .calendar-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

body.wos-app-surface-v2.jobmanager-app .jm-edit-btn {
  font-size: 0.65rem;
  padding: 2px 6px;
  float: right;
}

body.wos-app-surface-v2.jobmanager-app .time-label {
  width: 65px;
  text-align: right;
  padding-right: 6px;
  font-size: 0.75rem;
  color: var(--wos-text, #1e293b);
  background: var(--wos-panel-soft, #e2e8f0);
  font-weight: 700;
}

body.wos-app-surface-v2.jobmanager-app .day-header {
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--wos-accent, #1e293b);
  color: #fff;
  padding: 8px;
}

body.wos-app-surface-v2.jobmanager-app .time-slot {
  height: 34px;
  border: 1px solid var(--wos-border, #94a3b8);
  padding: 2px 4px;
  position: relative;
  cursor: pointer;
  font-size: 0.75rem;
  background: var(--wos-panel, #fff);
  overflow: hidden;
}

body.wos-app-surface-v2.jobmanager-app .time-slot:hover {
  background: var(--wos-neutral-bg, #dbeafe);
  border-color: var(--wos-accent, #3b82f6);
}

body.wos-app-surface-v2.jobmanager-app .job-event {
  background: var(--wos-panel, #fff);
  border-left: 6px solid var(--wos-accent, #2563eb);
  padding: 3px 5px;
  margin: 1px 0;
  border-radius: 4px;
  font-size: 0.73rem;
  box-shadow: var(--wos-shadow, 0 2px 5px rgb(0 0 0 / 20%));
  cursor: context-menu;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--wos-text, #1e293b);
  font-weight: 600;
}

body.wos-app-surface-v2.jobmanager-app .job-event:hover {
  box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
  transform: translateY(-1px);
  border-left-color: var(--wos-accent-strong, #1d4ed8);
}

body.wos-app-surface-v2.jobmanager-app .all-day-area {
  min-height: 36px;
  background: var(--wos-panel-soft, #e2e8f0);
  border-bottom: 3px solid var(--wos-border, #475569);
  padding: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--wos-text, #1e293b);
}

body.wos-app-surface-v2.jobmanager-app .context-menu {
  position: absolute;
  background: var(--wos-panel, #fff);
  border: 1px solid var(--wos-border, #ced4da);
  border-radius: var(--wos-radius-sm, 6px);
  box-shadow: var(--wos-shadow, 0 4px 12px rgb(0 0 0 / 15%));
  z-index: 1000;
  min-width: 180px;
  padding: 5px 0;
  display: none;
}

body.wos-app-surface-v2.jobmanager-app .context-menu a {
  display: block;
  padding: 8px 16px;
  color: var(--wos-text, #212529);
  text-decoration: none;
  font-size: 0.9rem;
}

body.wos-app-surface-v2.jobmanager-app .context-menu a:hover {
  background: var(--wos-accent-soft, #f0f8ff);
}

body.wos-app-surface-v2.jobmanager-app .jm-job-backdrop.is-open {
  display: flex;
}

body.wos-app-surface-v2.jobmanager-app .jm-job-grid .wos-input {
  max-width: none;
}

body.wos-app-surface-v2.jobmanager-app .jm-job-footer.jm-footer-new {
  grid-template-columns: 1fr 1fr;
}

body.wos-app-surface-v2.jobmanager-app .jm-job-footer .wos-btn {
  width: 100%;
  text-align: center;
}

@media (width <= 768px) {
  body.wos-app-surface-v2.jobmanager-app .jm-job-grid {
    grid-template-columns: 1fr;
  }
}

body.wos-app-surface-v2.jobmanager-app .jm-status-bar.is-visible {
  display: block;
}

body.wos-app-surface-v2.jobmanager-app .jm-legend-item.is-active {
  border-color: var(--wos-accent);
  background: var(--wos-accent-soft);
  color: var(--wos-accent-strong);
}

/* Jobmanager calendar legend: one swatch colour per job status. Moved out of the
   markup so the palette lives with the swatch geometry defined just below. */

body.wos-app-surface-v2.jobmanager-app .jm-legend-swatch.is-open {
  /* Offen */
  background: #bfdbfe;
}

body.wos-app-surface-v2.jobmanager-app .jm-legend-swatch.is-done {
  /* Abgeschlossen */
  background: #86efac;
}

body.wos-app-surface-v2.jobmanager-app #jmJobDialogTitle {
  margin: 0 0 12px;
}

body.wos-app-surface-v2.jobmanager-app .jm-calendar-loading.is-visible {
  display: flex;
}

body.wos-app-surface-v2.jobmanager-app .jm-empty-week.is-visible {
  display: block;
}

body.wos-app-surface-v2.jobmanager-app .jm-retry-load.is-visible {
  display: block;
}

/* scanner-jobs/scanner-jobs.html — Scanner Supervisor */

.scanner-supervisor .kpi-card {
  background: var(--wos-panel);
  border-radius: 10px;
  padding: 10px;
  box-shadow: var(--wos-shadow);
  border-left: 6px solid #64748b;
}

.scanner-supervisor .kpi-card .label {
  font-size: 0.78rem;
  color: var(--wos-muted);
  font-weight: 800;
  text-transform: uppercase;
}

.scanner-supervisor .kpi-ok {
  border-left-color: #16a34a;
}

.scanner-supervisor .kpi-err {
  border-left-color: #dc2626;
}

.scanner-supervisor .kpi-info {
  border-left-color: #2563eb;
}

.scanner-supervisor .kpi-warn {
  border-left-color: #f59e0b;
}

.scanner-supervisor .wos-panel h3 {
  font-size: 0.98rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--wos-text);
}

.scanner-supervisor .scanner-tile {
  position: relative;
  border-radius: 10px;
  padding: 8px;
  min-height: 168px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 8px rgb(0 0 0 / 12%);
  transition: transform 0.08s ease;
}

.scanner-supervisor .scanner-tile:hover {
  transform: translateY(-1px);
}

.scanner-supervisor .scanner-remove {
  position: absolute;
  top: 6px;
  right: 8px;
  min-width: 40px;
  min-height: 40px;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 85%);
  background: rgb(0 0 0 / 18%);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 10px;
}

.scanner-supervisor .event-row {
  cursor: pointer;
}

.scanner-supervisor .scanner-tile:focus-visible,
.scanner-supervisor .event-row:focus-visible,
.scanner-supervisor .scanner-remove:focus-visible {
  outline: 3px solid var(--wos-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--wos-focus-ring);
}

.scanner-supervisor .scanner-online {
  background: #16a34a;
}

.scanner-supervisor .scanner-warn {
  background: #f59e0b;
  color: #111827;
}

.scanner-supervisor .scanner-error {
  background: #dc2626;
}

.scanner-supervisor .scanner-offline {
  background: #64748b;
}

.scanner-supervisor .scanner-tile .title {
  font-size: 0.98rem;
  font-weight: 800;
  padding-right: 54px;
}

.scanner-supervisor .scanner-tile .sub {
  font-size: 0.8rem;
  opacity: 0.97;
}

.scanner-supervisor .scanner-tile .big {
  font-size: 1.02rem;
  font-weight: 800;
  margin-top: 3px;
}

.scanner-supervisor .scanner-warn .scanner-remove {
  color: #111827;
  border-color: rgb(17 24 39 / 70%);
  background: rgb(255 255 255 / 45%);
}

.scanner-supervisor .alert-item {
  border-left: 6px solid #dc2626;
  background: var(--wos-danger-bg);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 6px;
}

.scanner-supervisor .alert-item.warn {
  border-left-color: #f59e0b;
  background: var(--wos-warning-bg);
}

.scanner-supervisor .alert-item.info {
  border-left-color: #2563eb;
  background: var(--wos-accent-soft);
}

.scanner-supervisor .alert-item .headline {
  font-weight: 800;
}

.scanner-supervisor .ss-notice.is-visible {
  display: block;
}

.scanner-supervisor .ss-notice.is-error {
  border-left-color: #dc2626;
  background: var(--wos-danger-bg);
  color: var(--wos-danger-text);
}

.scanner-supervisor .ss-notice.is-success {
  border-left-color: #16a34a;
  background: var(--wos-success-bg);
  color: var(--wos-success-text);
}

.scanner-supervisor .event-table,
.scanner-supervisor .heat-table,
.scanner-supervisor .ladung-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.scanner-supervisor .event-filter-input {
  width: 100%;
  font-size: 0.76rem;
  padding: 3px 6px;
  border: 1px solid var(--wos-border);
  border-radius: 6px;
  background: var(--wos-panel);
  color: var(--wos-text);
}

.scanner-supervisor .event-row:hover {
  background: var(--wos-panel-soft);
}

.scanner-supervisor .sev {
  display: inline-block;
  min-width: 74px;
  text-align: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 700;
  font-size: 0.75rem;
}

.scanner-supervisor .sev-info {
  background: #dbeafe;
  color: #1d4ed8;
}

.scanner-supervisor .sev-warn {
  background: #fef3c7;
  color: #92400e;
}

.scanner-supervisor .sev-error {
  background: #fee2e2;
  color: #991b1b;
}

.scanner-supervisor .sev-critical {
  background: #7f1d1d;
  color: #fff;
}

.scanner-supervisor .small-muted {
  color: var(--wos-muted);
  font-size: 0.75rem;
}

.scanner-supervisor .mono {
  font-family: Consolas, monospace;
  font-size: 0.8rem;
}

.scanner-supervisor .ss-mt-1 {
  margin-top: 4px;
}

.scanner-supervisor .ss-mb-2 {
  margin-bottom: 8px;
}

.scanner-supervisor .detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.scanner-supervisor .detail-box {
  background: var(--wos-panel-soft);
  border: 1px solid var(--wos-border);
  border-radius: 10px;
  padding: 10px;
}

.scanner-supervisor .detail-box h5 {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.scanner-supervisor .heat-bar {
  height: 12px;
  border-radius: 999px;
  background: #dbeafe;
  overflow: hidden;
  min-width: 90px;
}

.scanner-supervisor .heat-fill-ok {
  height: 100%;
  background: #16a34a;
}

.scanner-supervisor .heat-fill-warn {
  height: 100%;
  background: #f59e0b;
}

.scanner-supervisor .heat-fill-err {
  height: 100%;
  background: #dc2626;
}

@media (width <= 1200px) {
  .scanner-supervisor .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .scanner-supervisor .status-board {
    grid-template-columns: repeat(2, 1fr);
  }

  .scanner-supervisor .heat-grid {
    grid-template-columns: 1fr;
  }

  .scanner-supervisor .ss-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (width <= 768px) {
  .scanner-supervisor .kpi-grid {
    grid-template-columns: 1fr;
  }

  .scanner-supervisor .status-board,
  .scanner-supervisor .detail-grid {
    grid-template-columns: 1fr;
  }
}

body.ss-modal-open {
  overflow: hidden;
}

.scanner-supervisor .ss-detail-backdrop.is-open {
  display: flex;
}

/* Utility: content exposed to assistive tech but not painted. Used for the per-page <h1>
   that names each app — the WOS shell already shows the app name in its own chrome, so a
   visible heading would duplicate it, but screen-reader users still need the landmark. */
.wos-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}