/* NUMB3RS Accounting Workbench
   Final cascade overlay: operational cockpit, dense review queues, audit-first agent work. */

:root,
html[data-theme="light"] {
  --awb-bg: #f5f6f8;
  --awb-surface: #ffffff;
  --awb-surface-2: #eef2f5;
  --awb-sidebar: #111820;
  --awb-sidebar-muted: #8ea0b2;
  --awb-border: #d7dee6;
  --awb-border-strong: #aebccc;
  --awb-text: #18212b;
  --awb-muted: #607080;
  --awb-faint: #7a8794;
  --awb-primary: #1f4e78;
  --awb-primary-strong: #173d5d;
  --awb-primary-soft: #e4eef7;
  --awb-green: #2f6f5e;
  --awb-green-soft: #e4f3ed;
  --awb-amber: #996b10;
  --awb-amber-soft: #fff4d7;
  --awb-red: #b42318;
  --awb-red-soft: #fde8e7;
  --awb-shadow: 0 10px 28px rgba(20, 33, 44, 0.08);
  --awb-topbar: #ffffff;
}

html[data-theme="dark"] {
  --awb-bg: #101417;
  --awb-surface: #171d22;
  --awb-surface-2: #20282f;
  --awb-sidebar: #0f151b;
  --awb-sidebar-muted: #7e8e9e;
  --awb-border: #2d3944;
  --awb-border-strong: #40505f;
  --awb-text: #eef3f7;
  --awb-muted: #a5b3bf;
  --awb-faint: #8d9aa5;
  --awb-primary: #7aa2c7;
  --awb-primary-strong: #9abbda;
  --awb-primary-soft: #182b3c;
  --awb-green: #7bbf9a;
  --awb-green-soft: #173226;
  --awb-amber: #d8aa4a;
  --awb-amber-soft: #372a13;
  --awb-red: #f08b82;
  --awb-red-soft: #3b1d1b;
  --awb-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
  --awb-topbar: #151b20;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

html,
body {
  background: var(--awb-bg) !important;
  color: var(--awb-text) !important;
}

body {
  font-size: 13px;
  line-height: 1.45;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--awb-surface-2) !important;
  color: var(--awb-text) !important;
  border-color: var(--awb-border) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--awb-faint) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .drawer,
html[data-theme="dark"] .modal,
html[data-theme="dark"] details,
html[data-theme="dark"] table,
html[data-theme="dark"] thead,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] td,
html[data-theme="dark"] th {
  color: var(--awb-text);
  border-color: var(--awb-border);
}

html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:#FAF7F2"],
html[data-theme="dark"] [style*="background: #FAF7F2"],
html[data-theme="dark"] [style*="background:#FAFAFA"],
html[data-theme="dark"] [style*="background: #FAFAFA"] {
  background: var(--awb-surface) !important;
  color: var(--awb-text) !important;
  border-color: var(--awb-border) !important;
}

html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#f1f5f9"],
html[data-theme="dark"] [style*="background: #f1f5f9"],
html[data-theme="dark"] [style*="background:#eef2ff"],
html[data-theme="dark"] [style*="background: #eef2ff"],
html[data-theme="dark"] [style*="background:#eff6ff"],
html[data-theme="dark"] [style*="background: #eff6ff"],
html[data-theme="dark"] [style*="background:#f0f9ff"],
html[data-theme="dark"] [style*="background: #f0f9ff"],
html[data-theme="dark"] [style*="background:#e0f2fe"],
html[data-theme="dark"] [style*="background: #e0f2fe"] {
  background: var(--awb-surface-2) !important;
  color: var(--awb-text) !important;
  border-color: var(--awb-border) !important;
}

html[data-theme="dark"] [style*="background:var(--brand-bg)"],
html[data-theme="dark"] [style*="background: var(--brand-bg)"],
html[data-theme="dark"] [style*="background:#f0fdfa"],
html[data-theme="dark"] [style*="background: #f0fdfa"],
html[data-theme="dark"] [style*="background:#dcfce7"],
html[data-theme="dark"] [style*="background: #dcfce7"] {
  background: var(--awb-surface-2) !important;
  color: var(--awb-text) !important;
  border-color: color-mix(in srgb, var(--awb-green) 45%, var(--awb-border)) !important;
}

html[data-theme="dark"] [style*="background:#fffbeb"],
html[data-theme="dark"] [style*="background: #fffbeb"],
html[data-theme="dark"] [style*="background:#fff7ed"],
html[data-theme="dark"] [style*="background: #fff7ed"],
html[data-theme="dark"] [style*="background:#fff8e1"],
html[data-theme="dark"] [style*="background: #fff8e1"] {
  background: var(--awb-amber-soft) !important;
  color: var(--awb-amber) !important;
  border-color: rgba(216, 170, 74, 0.5) !important;
}

html[data-theme="dark"] [style*="background:#fef2f2"],
html[data-theme="dark"] [style*="background: #fef2f2"],
html[data-theme="dark"] [style*="background:#fee2e2"],
html[data-theme="dark"] [style*="background: #fee2e2"] {
  background: var(--awb-red-soft) !important;
  color: var(--awb-red) !important;
  border-color: rgba(240, 139, 130, 0.5) !important;
}

html[data-theme="dark"] [style*="border-bottom:1px solid #dde4ee"],
html[data-theme="dark"] [style*="border-bottom: 1px solid #dde4ee"],
html[data-theme="dark"] [style*="border-bottom:2px solid #dde4ee"],
html[data-theme="dark"] [style*="border-bottom: 2px solid #dde4ee"] {
  border-bottom-color: var(--awb-border) !important;
}

html[data-theme="dark"] [style*="color:#0f172a"],
html[data-theme="dark"] [style*="color: #0f172a"],
html[data-theme="dark"] [style*="color:#111827"],
html[data-theme="dark"] [style*="color: #111827"],
html[data-theme="dark"] [style*="color:#1f2937"],
html[data-theme="dark"] [style*="color: #1f2937"],
html[data-theme="dark"] [style*="color:#334155"],
html[data-theme="dark"] [style*="color: #334155"],
html[data-theme="dark"] [style*="color:#475569"],
html[data-theme="dark"] [style*="color: #475569"] {
  color: var(--awb-text) !important;
}

html[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border:1px solid #d1d5db"],
html[data-theme="dark"] [style*="border:1px solid #dde4ee"],
html[data-theme="dark"] [style*="border:1px solid #dbe4ef"],
html[data-theme="dark"] [style*="border:1px solid #e2e8f0"],
html[data-theme="dark"] [style*="border:1px solid #c7d2fe"],
html[data-theme="dark"] [style*="border:1px solid #bfdbfe"],
html[data-theme="dark"] [style*="border:1px solid #99f6e4"],
html[data-theme="dark"] [style*="border:1px solid #fed7aa"],
html[data-theme="dark"] [style*="border:1px solid #fecaca"],
html[data-theme="dark"] [style*="border:1px solid #86efac"] {
  border-color: var(--awb-border) !important;
}

body,
button,
input,
select,
textarea {
  letter-spacing: 0 !important;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.page-head > .row {
  display: flex !important;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-direction: row !important;
  align-items: center !important;
}

.page-head > .row > *,
.page-head > .row .btn {
  width: auto !important;
  min-width: 0 !important;
}

#app {
  display: grid !important;
  grid-template-columns: 248px minmax(0, 1fr) !important;
  min-height: 100vh;
  background: var(--awb-bg) !important;
}

#sidebar {
  width: 248px !important;
  padding: 12px 10px !important;
  background: var(--awb-sidebar) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #eef3f7 !important;
  overflow-y: auto;
}

#main {
  min-width: 0;
  background: var(--awb-bg) !important;
}

#content {
  width: 100% !important;
  max-width: none !important;
  padding: 18px 22px 38px !important;
}

#topbar,
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 56px !important;
  background: var(--awb-topbar) !important;
  border-bottom: 1px solid var(--awb-border) !important;
  box-shadow: none !important;
  color: var(--awb-text) !important;
  flex-wrap: wrap !important;
  height: auto !important;
  row-gap: 6px;
}

#topbar-search,
#topbar input,
.topbar input {
  min-height: 34px !important;
  background: var(--awb-surface-2) !important;
  color: var(--awb-text) !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

#topbar-search::placeholder,
#topbar input::placeholder {
  color: var(--awb-faint) !important;
}

#topbar-meta,
.topbar-meta {
  color: var(--awb-muted) !important;
}

.topbar-agent-queue {
  appearance: none;
  border: 1px solid var(--awb-border);
  background: var(--awb-surface-2);
  color: var(--awb-text);
  border-radius: 999px;
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}

.topbar-agent-queue:hover {
  border-color: var(--awb-border-strong);
  background: color-mix(in srgb, var(--awb-surface-2), var(--awb-primary) 8%);
}

.topbar-agent-queue strong {
  color: var(--awb-text);
  font-size: 12px;
}

.topbar-agent-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--awb-green);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.12);
}

.topbar-agent-queue[data-tone="queued"] .topbar-agent-dot {
  background: var(--awb-amber);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
}

.topbar-agent-queue[data-tone="running"] .topbar-agent-dot {
  background: var(--awb-primary);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14);
}

.topbar-agent-queue[data-tone="stale"] .topbar-agent-dot {
  background: var(--awb-red);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.13);
}

.mp-review-shortcuts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -2px 0 12px;
}

html[data-theme="dark"] .mp-review-shortcuts {
  background: var(--awb-surface) !important;
  color: var(--awb-text) !important;
  border-color: var(--awb-border) !important;
}

html[data-theme="dark"] .mp-review-shortcuts .muted {
  color: var(--awb-muted) !important;
}

html[data-theme="dark"] .mp-review-shortcuts strong {
  color: var(--awb-text) !important;
}

.mp-review-shortcuts .btn.primary {
  box-shadow: none;
}

.mp-runner-health {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--awb-border);
  background: var(--awb-surface-2);
  color: var(--awb-text);
  font-size: 12px;
}

.mp-runner-health strong {
  color: var(--awb-text);
}

.mp-runner-health span {
  color: var(--awb-muted);
}

.mp-runner-health-warn {
  border-color: color-mix(in srgb, var(--awb-amber) 50%, var(--awb-border));
}

.mp-runner-health-error {
  border-color: color-mix(in srgb, var(--awb-red) 55%, var(--awb-border));
}

html[data-theme="dark"] .mp-special-action-card {
  background: var(--awb-surface-2) !important;
  color: var(--awb-text) !important;
  border-color: var(--awb-border-strong) !important;
}

html[data-theme="dark"] .mp-special-action-card.tone-oprichting {
  border-color: color-mix(in srgb, var(--awb-green) 42%, var(--awb-border)) !important;
}

html[data-theme="dark"] .mp-special-action-card.tone-nbb {
  border-color: color-mix(in srgb, var(--awb-green) 48%, var(--awb-border)) !important;
}

html[data-theme="dark"] .mp-special-action-card.tone-portal {
  border-color: color-mix(in srgb, var(--awb-primary) 46%, var(--awb-border)) !important;
}

html[data-theme="dark"] .mp-special-action-card strong,
html[data-theme="dark"] .mp-special-action-card li {
  color: var(--awb-text) !important;
}

html[data-theme="dark"] .mp-special-action-card .muted,
html[data-theme="dark"] .mp-special-action-card .small {
  color: var(--awb-muted) !important;
}

.mp-bulkbar-inline {
  width: 100%;
  margin-top: 2px;
}

.mp-action-panel {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(320px, 0.9fr);
  gap: 10px;
  margin: 12px 0;
  align-items: stretch;
}

.mp-quick-filters,
.mp-bulkbar,
.mp-nextbox {
  background: var(--awb-surface);
  border: 1px solid var(--awb-border);
  border-radius: 8px;
  padding: 10px;
}

.mp-quick-filters {
  grid-column: 1 / 2;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.mp-bulkbar {
  grid-column: 1 / 2;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}

.mp-bulkbar strong {
  margin-right: 6px;
  color: var(--awb-text);
}

.mp-filter-chip {
  appearance: none;
  border: 1px solid var(--awb-border);
  background: var(--awb-surface-2);
  color: var(--awb-text);
  border-radius: 999px;
  min-height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
}

.mp-filter-chip strong {
  min-width: 22px;
  text-align: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--awb-surface);
  border: 1px solid var(--awb-border);
}

.mp-filter-chip.active {
  border-color: var(--awb-primary);
  background: var(--awb-primary-soft);
}

.mp-filter-chip.hot strong,
.mp-filter-chip.warn strong {
  color: var(--awb-red);
}

.mp-nextbox {
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
}

.mp-next-title {
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--awb-text);
}

.mp-next-item {
  appearance: none;
  width: 100%;
  display: grid;
  gap: 2px;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--awb-border);
  background: transparent;
  color: var(--awb-text);
  padding: 8px 0;
  cursor: pointer;
}

.mp-next-item:first-of-type {
  border-top: 0;
}

.mp-next-item span,
.mp-next-item small {
  color: var(--awb-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rv-mail-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.rv-mail-kpi {
  appearance: none;
  border: 1px solid var(--awb-border);
  background: var(--awb-surface-2);
  border-radius: 8px;
  padding: 10px;
  text-align: left;
  color: var(--awb-text);
  cursor: pointer;
}

.rv-mail-kpi strong {
  display: block;
  font-size: 22px;
  line-height: 1;
  margin-bottom: 4px;
}

.rv-mail-kpi span {
  color: var(--awb-muted);
  font-size: 12px;
}

.rv-mail-table td,
.rv-mail-table th {
  vertical-align: top;
}

.mp-signature-note {
  margin-top: 10px;
  border-left: 3px solid var(--awb-primary);
  padding: 8px 10px;
  color: var(--awb-muted);
  font-size: 12px;
  line-height: 1.45;
  background: var(--awb-surface-2);
  border-radius: 4px;
}

.mp-table-head {
  background: var(--awb-surface) !important;
  border-bottom: 2px solid var(--awb-border) !important;
  color: var(--awb-text) !important;
}

.mp-mail-row {
  border-bottom: 1px solid var(--awb-border) !important;
  cursor: pointer;
}

.mp-mail-row:hover td {
  background: color-mix(in srgb, var(--awb-primary) 8%, transparent) !important;
}

.mp-run-card,
.mp-draft-panel,
.mp-body-content {
  background: var(--awb-surface-2) !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 8px;
  color: var(--awb-text) !important;
}

.mp-run-card {
  padding: 10px 12px;
  margin-bottom: 8px;
}

.mp-draft-panel {
  padding: 10px 12px;
  margin-bottom: 14px;
}

.mp-panel-warn {
  background: var(--awb-amber-soft) !important;
  border-color: color-mix(in srgb, var(--awb-amber) 55%, var(--awb-border)) !important;
}

.mp-safety-warning {
  background: var(--awb-red-soft) !important;
  border: 1px solid color-mix(in srgb, var(--awb-red) 55%, var(--awb-border)) !important;
  color: var(--awb-red) !important;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  margin-bottom: 8px;
}

.mp-draft-editor {
  width: 100% !important;
  resize: vertical;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-family: inherit !important;
  background: var(--awb-surface) !important;
  color: var(--awb-text) !important;
}

.mp-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(640px, 95vw);
  background: var(--awb-surface) !important;
  color: var(--awb-text) !important;
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.22);
}

.mp-drawer-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--awb-border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.mp-ack-strip {
  background: var(--mp-ack-bg, var(--awb-surface-2));
  color: #1f2937;
  padding: 8px 20px;
  font-size: 12px;
  border-bottom: 1px solid var(--awb-border);
}

html[data-theme="dark"] .mp-ack-strip {
  background: var(--awb-surface-2) !important;
  color: var(--awb-text) !important;
}

.mp-sent-found {
  background: var(--awb-green-soft) !important;
  border: 1px solid color-mix(in srgb, var(--awb-green) 55%, var(--awb-border)) !important;
  border-radius: 6px;
  padding: 9px 11px;
  margin-bottom: 14px;
  color: var(--awb-green) !important;
  font-size: 12px;
}

.mp-body-content,
.mp-draft-content {
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  white-space: pre-wrap;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 14px;
}

.mp-draft-content {
  background: var(--awb-amber-soft) !important;
  border: 1px solid color-mix(in srgb, var(--awb-amber) 55%, var(--awb-border)) !important;
  color: var(--awb-text) !important;
}

.mp-decision-panel {
  background: var(--awb-surface);
  border: 1px solid var(--awb-border);
  border-radius: 8px;
  padding: 14px;
  margin: 14px 0;
  color: var(--awb-text);
}

.mp-decision-panel--internal {
  border-color: rgba(20, 184, 166, 0.32);
  background: linear-gradient(180deg, rgba(20, 184, 166, 0.06), rgba(255, 255, 255, 0));
}

.mp-decision-head,
.mp-decision-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.mp-decision-head h3 {
  margin: 2px 0 0;
  font-size: 18px;
  line-height: 1.2;
}

.mp-overline {
  color: var(--awb-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mp-status-chip {
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.28);
  border-radius: 999px;
  color: var(--awb-primary-strong);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
}

.mp-decision-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(230px, 0.95fr);
  gap: 14px;
  margin-top: 12px;
}

.mp-decision-grid section {
  background: var(--awb-surface-2);
  border: 1px solid var(--awb-border);
  border-radius: 8px;
  padding: 10px 12px;
}

.mp-decision-grid p,
.mp-next-actions {
  font-size: 12px;
  line-height: 1.5;
  margin: 7px 0 0;
}

.mp-next-actions {
  padding-left: 18px;
}

.mp-next-actions li + li {
  margin-top: 5px;
}

.mp-decision-actions {
  justify-content: flex-start;
  margin-top: 12px;
}

.mp-inline-statusbox,
.mp-run-summary {
  background: var(--awb-surface-2);
  border: 1px solid var(--awb-border);
  border-radius: 8px;
  color: var(--awb-text);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 10px;
  padding: 9px 11px;
  white-space: pre-wrap;
}

.mp-compact-details,
.mp-run-details,
.mp-runs-block,
.mp-agent-correction {
  margin-top: 10px;
}

.mp-compact-details summary,
.mp-run-details summary,
.mp-runs-block summary,
.mp-agent-correction summary {
  cursor: pointer;
  color: var(--awb-muted);
  font-size: 12px;
  font-weight: 700;
}

.mp-compact-details pre,
.mp-run-details pre {
  max-height: 420px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 10px;
  background: var(--awb-surface-2);
  border: 1px solid var(--awb-border);
  border-radius: 8px;
}

.mp-runs-block {
  border-top: 1px solid var(--awb-border);
  padding-top: 12px;
}

.mp-agent-correction {
  background: var(--awb-surface-2);
  border: 1px solid var(--awb-border);
  border-radius: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
}

.mp-agent-correction textarea {
  margin-top: 10px;
}

@media (max-width: 980px) {
  .mp-action-panel {
    grid-template-columns: 1fr;
  }

  .mp-decision-grid {
    grid-template-columns: 1fr;
  }

  .mp-quick-filters,
  .mp-bulkbar,
  .mp-nextbox {
    grid-column: 1;
    grid-row: auto;
  }

  .rv-mail-kpis {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

.sb-brand {
  padding: 8px 8px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  margin-bottom: 12px;
}

.sb-brand-name {
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.05;
}

.sb-brand-tag {
  margin-top: 4px;
  color: var(--awb-sidebar-muted) !important;
  font-size: 11px !important;
}

.sb-section {
  margin: 12px 0 0 !important;
}

.sb-section-title {
  padding: 0 8px 5px !important;
  color: var(--awb-sidebar-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0 !important;
}

.sb-collapsible .sb-section-title {
  cursor: pointer;
}

.sb-collapsible .sb-section-title::after {
  content: "v";
  float: right;
  opacity: 0.7;
}

.sb-collapsible.collapsed .sb-section-title::after {
  content: ">";
}

.sb-section-body {
  display: grid;
  gap: 2px;
}

.sb-collapsible.collapsed .sb-section-body {
  display: none;
}

.sb-link {
  min-height: 34px !important;
  padding: 8px 9px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: #dce5ee !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sb-link:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
}

.sb-link.active {
  background: #ffffff !important;
  color: #111820 !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

.sb-badge {
  min-width: 20px;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: inherit !important;
  text-align: center;
  font-size: 10px !important;
}

.sb-status {
  margin: 16px 8px 6px !important;
  padding: 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #dce5ee !important;
  font-size: 11px !important;
}

.page-title {
  margin: 0;
  color: var(--awb-text) !important;
  font-size: 24px !important;
  line-height: 1.2;
  font-weight: 800 !important;
}

.page-sub,
.muted,
.small.muted {
  color: var(--awb-muted) !important;
}

.card,
.panel,
.detail-card,
.pa-surface,
.pa-queue > .card,
.pa-detail-card,
.pa-insights > .card,
.pa-agent-panel {
  background: var(--awb-surface) !important;
  color: var(--awb-text) !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.card-header {
  border-bottom: 1px solid var(--awb-border) !important;
  padding: 12px 14px !important;
  gap: 12px;
}

.card-body {
  padding: 14px !important;
}

.card-title {
  color: var(--awb-text) !important;
  font-size: 13px !important;
  line-height: 1.3;
}

.btn,
button.btn,
a.btn {
  min-height: 30px;
  border: 1px solid var(--awb-border-strong) !important;
  border-radius: 6px !important;
  background: var(--awb-surface) !important;
  color: var(--awb-text) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.btn:hover,
button.btn:hover,
a.btn:hover {
  border-color: var(--awb-primary) !important;
  color: var(--awb-primary-strong) !important;
}

.btn.primary,
button.btn.primary,
a.btn.primary {
  background: var(--awb-primary) !important;
  border-color: var(--awb-primary) !important;
  color: #ffffff !important;
}

.btn.ghost,
button.btn.ghost,
a.btn.ghost {
  background: transparent !important;
}

.input,
.select,
textarea,
select,
input[type="text"],
input[type="search"] {
  background: var(--awb-surface) !important;
  color: var(--awb-text) !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.pill,
.bd-pill,
.tag,
.chip {
  border-radius: 999px !important;
  border: 1px solid var(--awb-border) !important;
  background: var(--awb-surface-2) !important;
  color: var(--awb-text) !important;
  font-weight: 700 !important;
}

.pill.green,
.bd-pill-green,
.vd-kpi-green,
.pa-tone-green {
  background: var(--awb-green-soft) !important;
  border-color: color-mix(in srgb, var(--awb-green) 45%, var(--awb-border)) !important;
  color: var(--awb-green) !important;
}

.pill.amber,
.bd-pill-amber,
.vd-kpi-amber,
.pa-tone-amber {
  background: var(--awb-amber-soft) !important;
  border-color: color-mix(in srgb, var(--awb-amber) 45%, var(--awb-border)) !important;
  color: var(--awb-amber) !important;
}

.pill.red,
.bd-pill-red,
.vd-kpi-red,
.pa-tone-red {
  background: var(--awb-red-soft) !important;
  border-color: color-mix(in srgb, var(--awb-red) 45%, var(--awb-border)) !important;
  color: var(--awb-red) !important;
}

.alert {
  border-radius: 6px !important;
  border: 1px solid var(--awb-border) !important;
}

.alert.red {
  background: var(--awb-red-soft) !important;
  color: var(--awb-red) !important;
}

.alert.amber {
  background: var(--awb-amber-soft) !important;
  color: var(--awb-amber) !important;
}

.kpi-strip > :nth-child(n+4),
.kpi-grid > :nth-child(n+4),
.stats-row > :nth-child(n+4) {
  display: revert !important;
}

.vd-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 10px !important;
  margin: 12px 0 14px !important;
}

.vd-kpi {
  min-height: 82px;
  padding: 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--awb-border) !important;
  background: var(--awb-surface) !important;
  box-shadow: none !important;
}

.mp-kpi-card {
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.mp-kpi-card:hover,
.mp-kpi-card:focus-visible {
  border-color: color-mix(in srgb, var(--awb-primary) 48%, var(--awb-border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--awb-primary) 14%, transparent) !important;
  outline: none;
  transform: translateY(-1px);
}

.mp-kpi-card.active {
  border-color: var(--awb-primary) !important;
  box-shadow: inset 0 0 0 1px var(--awb-primary) !important;
}

.vd-kpi-value {
  color: var(--awb-text) !important;
  font-size: 22px !important;
  line-height: 1.1;
}

.vd-kpi-label {
  color: var(--awb-text) !important;
  font-size: 12px !important;
}

.vd-kpi-sub {
  color: var(--awb-muted) !important;
  font-size: 11px !important;
}

.pa-page {
  max-width: none !important;
}

.pa-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px !important;
}

.pa-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pa-commandbar {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) auto !important;
  gap: 12px !important;
  align-items: stretch;
  padding: 12px !important;
  margin: 10px 0 14px !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 8px !important;
  background: var(--awb-surface) !important;
  box-shadow: none !important;
}

.pa-command-eyebrow,
.pa-workpiece-label,
.pa-agent-flow-label {
  color: var(--awb-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0 !important;
}

.pa-command-title {
  margin-top: 3px;
  color: var(--awb-text) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.25;
}

.pa-command-metrics {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: 6px !important;
}

.pa-command-metrics button {
  min-width: 92px;
  padding: 8px !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 6px !important;
  background: var(--awb-surface-2) !important;
  color: var(--awb-text) !important;
  text-align: left;
}

.pa-command-metrics button.active {
  background: var(--awb-primary-soft) !important;
  border-color: var(--awb-primary) !important;
}

.pa-command-metrics strong {
  display: block;
  color: var(--awb-text) !important;
  font-size: 20px;
  line-height: 1;
}

.pa-command-metrics span {
  color: var(--awb-muted) !important;
  font-size: 11px;
}

.pa-surface {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.pa-workspace {
  display: grid !important;
  grid-template-columns: minmax(520px, 1fr) minmax(360px, 430px) !important;
  gap: 14px !important;
  align-items: start;
}

.pa-page-mail .pa-workspace {
  grid-template-columns: minmax(520px, 1fr) minmax(390px, 520px) !important;
}

.pa-queue,
.pa-detail {
  min-width: 0;
}

.pa-detail {
  position: sticky;
  top: 74px;
  max-height: calc(100vh - 92px);
  overflow: auto;
}

.pa-flow-strip {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(74px, 1fr));
  gap: 6px !important;
  padding: 7px !important;
  margin-bottom: 10px !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 8px !important;
  background: var(--awb-surface) !important;
}

.pa-flow {
  min-height: 44px;
  padding: 7px 8px !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 6px !important;
  background: var(--awb-surface-2) !important;
  color: var(--awb-text) !important;
  display: grid;
  gap: 2px;
  justify-items: start;
}

.pa-flow.active {
  background: var(--awb-primary-soft) !important;
  border-color: var(--awb-primary) !important;
}

.pa-flow span {
  font-size: 11px;
  color: var(--awb-muted) !important;
}

.pa-flow strong {
  font-size: 16px;
  color: var(--awb-text) !important;
}

.pa-list-head,
.pa-dossier-card {
  grid-template-columns: minmax(180px, 1.3fr) minmax(150px, 0.95fr) minmax(150px, 0.95fr) minmax(160px, 1fr) minmax(120px, 0.65fr) !important;
}

.pa-list-head {
  color: var(--awb-muted) !important;
  font-size: 11px !important;
  border-bottom: 1px solid var(--awb-border) !important;
}

.pa-dossier-card,
.pa-recent-mail-card,
.pa-decision-row {
  border: 1px solid var(--awb-border) !important;
  border-radius: 8px !important;
  background: var(--awb-surface) !important;
  color: var(--awb-text) !important;
  box-shadow: none !important;
}

.pa-dossier-card:hover,
.pa-recent-mail-card:hover,
.pa-decision-row:hover {
  border-color: var(--awb-border-strong) !important;
}

.pa-dossier-card.active,
.pa-recent-mail-card.active,
.pa-decision-row.active {
  border-color: var(--awb-primary) !important;
  background: var(--awb-primary-soft) !important;
}

.pa-recent-mail-list,
.pa-dossier-list,
.pa-decision-list {
  display: grid;
  gap: 8px !important;
}

.pa-recent-mail-card {
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) 118px !important;
  gap: 10px !important;
  align-items: start;
  padding: 10px !important;
}

.pa-recent-mail-time strong,
.pa-recent-mail-subject,
.pa-card-client .bold,
.pa-workpiece-head h2 {
  color: var(--awb-text) !important;
}

.pa-recent-mail-time span,
.pa-mail-workline {
  color: var(--awb-muted) !important;
}

.pa-mail-state {
  min-width: 0;
  padding: 7px 8px !important;
  border-radius: 6px !important;
  border: 1px solid var(--awb-border) !important;
  background: var(--awb-surface-2) !important;
}

.pa-mail-state strong,
.pa-mail-state span {
  display: block;
  overflow-wrap: anywhere;
}

.pa-mail-state.green {
  background: var(--awb-green-soft) !important;
  color: var(--awb-green) !important;
}

.pa-mail-state.red {
  background: var(--awb-red-soft) !important;
  color: var(--awb-red) !important;
}

.pa-mail-state.amber {
  background: var(--awb-amber-soft) !important;
  color: var(--awb-amber) !important;
}

.pa-mail-state.brand {
  background: var(--awb-primary-soft) !important;
  color: var(--awb-primary-strong) !important;
}

.pa-mail-filterbar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 6px !important;
  padding: 0 14px 12px !important;
}

.pa-mail-filter {
  min-height: 46px;
  border: 1px solid var(--awb-border) !important;
  border-radius: 6px !important;
  background: var(--awb-surface-2) !important;
  color: var(--awb-text) !important;
  text-align: left;
}

.pa-mail-filter.active {
  border-color: var(--awb-primary) !important;
  background: var(--awb-primary-soft) !important;
}

.pa-detail-card {
  overflow: hidden;
}

.pa-workpiece-head {
  padding: 12px !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 8px !important;
  background: var(--awb-surface-2) !important;
}

.pa-workpiece-head h2 {
  margin: 4px 0 6px;
  font-size: 18px !important;
  line-height: 1.24;
}

.pa-workpiece-head p {
  color: var(--awb-muted) !important;
}

.pa-review-actions {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap;
}

.pa-review-actions-top {
  padding: 10px 0 12px;
}

.pa-detail-section,
.pa-agent-proof,
.pa-mail-section {
  margin-top: 12px !important;
  padding: 12px !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 8px !important;
  background: var(--awb-surface) !important;
}

.pa-agent-proof.green {
  border-color: color-mix(in srgb, var(--awb-green) 40%, var(--awb-border)) !important;
}

.pa-agent-proof.amber {
  border-color: color-mix(in srgb, var(--awb-amber) 40%, var(--awb-border)) !important;
}

.pa-agent-proof.red {
  border-color: color-mix(in srgb, var(--awb-red) 40%, var(--awb-border)) !important;
}

.pa-agent-proof-head,
.pa-draft-head,
.pa-mail-section-head,
.pa-mail-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.pa-agent-result-flow {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.pa-agent-draft-inline,
.pa-agent-draft-inline.empty,
.pa-mail-body,
.pa-mail-pre,
#mp-body-content,
#mp-draft-content {
  background: var(--awb-surface-2) !important;
  color: var(--awb-text) !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 8px !important;
}

.pa-agent-draft-inline pre,
.pa-agent-output pre,
.pa-mail-pre,
pre {
  color: var(--awb-text) !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  font-size: 12px !important;
  line-height: 1.45;
}

.pa-agent-guardrails {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
  margin-top: 10px;
}

.pa-agent-guardrails span {
  padding: 3px 7px;
  border: 1px solid var(--awb-border);
  border-radius: 999px;
  background: var(--awb-surface-2);
  color: var(--awb-muted);
  font-size: 11px;
  font-weight: 700;
}

.pa-agent-grid {
  display: grid !important;
  grid-template-columns: minmax(120px, 0.6fr) minmax(150px, 0.8fr) minmax(260px, 2fr) minmax(150px, 0.7fr) !important;
  gap: 10px !important;
}

.pa-agent-question {
  min-width: 0;
}

.pa-agent-text {
  min-height: 120px !important;
  resize: vertical;
}

.tbl,
table.tbl {
  background: var(--awb-surface) !important;
  color: var(--awb-text) !important;
}

.tbl thead,
table.tbl thead {
  background: var(--awb-surface-2) !important;
  color: var(--awb-muted) !important;
}

.tbl th,
.tbl td {
  border-color: var(--awb-border) !important;
}

.drawer-overlay {
  background: rgba(8, 12, 16, 0.55) !important;
}

.drawer {
  background: var(--awb-surface) !important;
  color: var(--awb-text) !important;
  border-left: 1px solid var(--awb-border) !important;
  box-shadow: var(--awb-shadow) !important;
}

.mp-workbench-note {
  color: var(--awb-muted);
}

.pa-ops-page {
  max-width: none !important;
}

.pa-ops-head {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px !important;
}

.pa-ops-eyebrow {
  color: var(--awb-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0 !important;
}

.pa-ops-sourcebar {
  display: grid !important;
  grid-template-columns: minmax(360px, 1fr) auto !important;
  gap: 12px !important;
  align-items: stretch;
  margin: 10px 0 14px !important;
  padding: 12px !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 8px !important;
  background: var(--awb-surface) !important;
}

.pa-ops-source-main {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 8px !important;
}

.pa-ops-source-main > div {
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--awb-border) !important;
  border-radius: 6px !important;
  background: var(--awb-surface-2) !important;
}

.pa-ops-source-main strong {
  display: block;
  color: var(--awb-text) !important;
  font-size: 21px;
  line-height: 1.05;
}

.pa-ops-source-main span,
.pa-ops-source-meta span {
  color: var(--awb-muted) !important;
  font-size: 11px !important;
}

.pa-ops-source-meta {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px !important;
}

.pa-ops-source-meta span {
  padding: 4px 7px;
  border: 1px solid var(--awb-border);
  border-radius: 999px;
  background: var(--awb-surface-2);
  font-weight: 700;
}

.pa-ops-source-details {
  grid-column: 1 / -1;
  border-top: 1px solid var(--awb-border);
  padding-top: 10px;
}

.pa-ops-source-details summary,
.pa-ops-agent-details summary,
.pa-ops-technical summary {
  color: var(--awb-text) !important;
  font-weight: 800;
  cursor: pointer;
}

.pa-ops-source-grid,
.pa-ops-contradictions,
.pa-ops-anchor,
.pa-ops-followup,
.pa-ops-meta-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px !important;
}

.pa-ops-source-grid > div,
.pa-ops-contradictions > div,
.pa-ops-anchor > div,
.pa-ops-followup > div,
.pa-kv {
  padding: 9px 10px !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 6px !important;
  background: var(--awb-surface-2) !important;
}

.pa-ops-source-grid strong,
.pa-ops-anchor strong,
.pa-ops-followup strong,
.pa-kv strong {
  display: block;
  color: var(--awb-text) !important;
  overflow-wrap: anywhere;
}

.pa-ops-source-grid span,
.pa-ops-source-grid small,
.pa-ops-anchor span,
.pa-ops-followup span,
.pa-kv span {
  color: var(--awb-muted) !important;
  font-size: 11px !important;
}

.pa-ops-shell {
  display: grid !important;
  grid-template-columns: minmax(560px, 1fr) minmax(380px, 470px) !important;
  gap: 14px !important;
  align-items: start;
}

.pa-ops-worklist,
.pa-ops-detailpane {
  min-width: 0;
  border: 1px solid var(--awb-border) !important;
  border-radius: 8px !important;
  background: var(--awb-surface) !important;
}

.pa-ops-detailpane {
  position: sticky;
  top: 74px;
  max-height: calc(100vh - 92px);
  overflow: auto;
  padding: 14px !important;
}

.pa-ops-lanes {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(84px, 1fr));
  gap: 6px !important;
  padding: 10px !important;
  border-bottom: 1px solid var(--awb-border) !important;
}

.pa-ops-lane {
  min-height: 48px;
  padding: 8px !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 6px !important;
  background: var(--awb-surface-2) !important;
  color: var(--awb-text) !important;
  text-align: left;
}

.pa-ops-lane.active {
  background: var(--awb-primary-soft) !important;
  border-color: var(--awb-primary) !important;
}

.pa-ops-lane span,
.pa-ops-toolbar span,
.pa-ops-row-sub,
.pa-ops-client span,
.pa-ops-deadline span {
  color: var(--awb-muted) !important;
  font-size: 11px !important;
}

.pa-ops-lane strong {
  display: block;
  margin-top: 2px;
  color: var(--awb-text) !important;
  font-size: 17px;
  line-height: 1;
}

.pa-ops-toolbar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px !important;
  border-bottom: 1px solid var(--awb-border) !important;
}

.pa-ops-toolbar strong {
  display: block;
  color: var(--awb-text) !important;
  font-size: 14px;
}

.pa-ops-search {
  width: min(320px, 42vw) !important;
}

.pa-ops-table-wrap {
  overflow: auto;
}

.pa-ops-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--awb-surface) !important;
  color: var(--awb-text) !important;
  font-size: 12px;
}

.pa-ops-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 10px;
  text-align: left;
  color: var(--awb-muted) !important;
  background: var(--awb-surface-2) !important;
  border-bottom: 1px solid var(--awb-border) !important;
  font-size: 11px;
}

.pa-ops-table td {
  padding: 10px;
  border-bottom: 1px solid var(--awb-border) !important;
  vertical-align: top;
}

.pa-ops-table tr {
  cursor: pointer;
}

.pa-ops-table tr:hover td {
  background: color-mix(in srgb, var(--awb-primary-soft) 34%, transparent);
}

.pa-ops-table tr.is-selected td {
  background: var(--awb-primary-soft) !important;
}

.pa-ops-row-title {
  color: var(--awb-text) !important;
  font-weight: 800 !important;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.pa-ops-row-sub {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 5px;
}

.pa-ops-client a,
.pa-ops-client strong {
  color: var(--awb-text) !important;
  font-weight: 800;
  text-decoration: none;
}

.pa-ops-client span,
.pa-ops-deadline span {
  display: block;
  margin-top: 3px;
}

.pa-ops-deadline strong {
  color: var(--awb-text) !important;
}

.pa-ops-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--awb-border);
}

.pa-ops-detail-head h2 {
  margin: 4px 0 4px;
  color: var(--awb-text) !important;
  font-size: 19px !important;
  line-height: 1.25;
}

.pa-ops-detail-head p {
  margin: 0;
  color: var(--awb-muted) !important;
}

.pa-ops-actionbox {
  margin-top: 12px;
  padding: 12px !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 8px !important;
  background: var(--awb-surface-2) !important;
}

.pa-ops-actionbox span,
.pa-ops-section-title {
  color: var(--awb-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0 !important;
}

.pa-ops-actionbox strong {
  display: block;
  margin-top: 4px;
  color: var(--awb-text) !important;
  font-size: 15px;
}

.pa-ops-actionbox p {
  color: var(--awb-muted) !important;
  overflow-wrap: anywhere;
}

.pa-ops-section,
.pa-ops-agent-details,
.pa-ops-technical {
  margin-top: 12px !important;
  padding: 12px !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 8px !important;
  background: var(--awb-surface) !important;
}

.pa-ops-section-title {
  margin-bottom: 8px;
}

.pa-ops-anchor-missing {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--awb-amber) 50%, var(--awb-border));
  border-radius: 6px;
  background: var(--awb-amber-soft);
  color: var(--awb-amber);
}

.pa-ops-technical pre {
  max-height: 320px;
  overflow: auto;
  background: var(--awb-surface-2) !important;
  border: 1px solid var(--awb-border) !important;
  border-radius: 6px;
  padding: 10px;
}

code {
  color: var(--awb-primary-strong) !important;
  background: var(--awb-primary-soft) !important;
  border-radius: 4px;
  padding: 1px 4px;
}

@media (max-width: 1180px) {
  #app {
    grid-template-columns: 226px minmax(0, 1fr) !important;
  }

  #sidebar {
    width: 226px !important;
  }

  .pa-commandbar,
  .pa-workspace,
  .pa-page-mail .pa-workspace,
  .pa-ops-shell,
  .pa-ops-sourcebar {
    grid-template-columns: 1fr !important;
  }

  .pa-detail,
  .pa-ops-detailpane {
    position: static;
    max-height: none;
  }

  .pa-command-metrics,
  .pa-flow-strip,
  .pa-ops-lanes,
  .pa-ops-source-main {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #app {
    grid-template-columns: 1fr !important;
  }

  #content {
    padding: 60px 12px 32px !important;
  }

  /* mobile tap-targets */
  .btn.sm, .btn.xs { min-height: 34px !important; padding-top: 7px !important; padding-bottom: 7px !important; font-size: 12px !important; }

  .page-head {
    display: grid;
  }

  .page-head > .row {
    justify-content: flex-start;
    flex-direction: row !important;
    align-items: center !important;
  }

  #sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: min(86vw, 310px) !important;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 60;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    overflow-y: auto;
  }
  #sidebar.open { transform: translateX(0) !important; }
  #mobile-menu-toggle { display: flex !important; }
  #mobile-menu-backdrop.show { display: block !important; }

  .pa-head,
  .pa-ops-head,
  .pa-agent-proof-head,
  .pa-draft-head,
  .pa-mail-section-head,
  .pa-mail-meta,
  .pa-ops-toolbar,
  .pa-ops-detail-head {
    display: grid;
  }

  .pa-command-metrics,
  .pa-mail-filterbar,
  .pa-agent-grid,
  .pa-ops-lanes,
  .pa-ops-source-main {
    grid-template-columns: 1fr !important;
  }

  .pa-ops-search {
    width: 100% !important;
  }

  .pa-ops-table {
    min-width: 720px;
  }

  .pa-recent-mail-card {
    grid-template-columns: 1fr !important;
  }

  .pa-list-head {
    display: none !important;
  }

  .pa-dossier-card {
    grid-template-columns: 1fr !important;
  }
}

/* Gerechtsdeskundige cockpit */
.gd-shell {
  display: grid;
  gap: 14px;
}

.gd-shell .row {
  flex-direction: row !important;
  align-items: center !important;
}

.gd-shell .row > * {
  width: auto !important;
}

.gd-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
}

.gd-kpi,
.gd-queue-strip,
.gd-side-card,
.gd-command,
.gd-workspace,
.gd-panel {
  background: var(--awb-surface);
  border: 1px solid var(--awb-border);
  border-radius: 8px;
  color: var(--awb-text);
}

.gd-queue-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
}

.gd-queue-main {
  padding: 12px 14px;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.gd-queue-main + .gd-queue-main {
  border-left: 1px solid var(--awb-border);
}

.gd-queue-main strong {
  font-size: 15px;
  color: var(--awb-text);
}

.gd-queue-main span {
  color: var(--awb-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gd-kpi {
  min-height: 66px;
  padding: 11px 12px;
  display: grid;
  align-content: center;
  gap: 2px;
}

.gd-kpi strong {
  font-size: 21px;
  line-height: 1;
}

.gd-kpi span {
  color: var(--awb-muted);
  font-size: 11px;
  font-weight: 700;
}

.gd-kpi.is-hot {
  border-color: color-mix(in srgb, var(--awb-amber) 40%, var(--awb-border));
  background: color-mix(in srgb, var(--awb-amber-soft) 45%, var(--awb-surface));
}

.gd-kpi.is-review {
  border-color: color-mix(in srgb, var(--awb-primary) 34%, var(--awb-border));
  background: color-mix(in srgb, var(--awb-primary-soft) 55%, var(--awb-surface));
}

/* Dienstenhub en waarderingswerkbank */
.diensten-shell,
.waardering-shell {
  display: grid;
  gap: 14px;
}

.diensten-strip,
.generator-strip,
.waardering-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
}

.diensten-kpi {
  min-height: 66px;
  padding: 11px 12px;
  display: grid;
  align-content: center;
  gap: 2px;
  background: var(--awb-surface);
  border: 1px solid var(--awb-border);
  border-radius: 8px;
}

.diensten-kpi strong {
  color: var(--awb-text);
  font-size: 21px;
  line-height: 1;
}

.diensten-kpi span {
  color: var(--awb-muted);
  font-size: 11px;
  font-weight: 700;
}

.diensten-kpi.is-review {
  border-color: color-mix(in srgb, var(--awb-primary) 34%, var(--awb-border));
  background: color-mix(in srgb, var(--awb-primary-soft) 55%, var(--awb-surface));
}

.diensten-section {
  display: grid;
  gap: 10px;
}

.diensten-section-head h2 {
  margin: 0;
  color: var(--awb-text);
  font-size: 15px;
  letter-spacing: 0;
}

.diensten-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
}

.diensten-grid.compact {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.diensten-card {
  min-height: 126px;
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 14px;
  color: var(--awb-text);
  text-decoration: none;
  background: var(--awb-surface);
  border: 1px solid var(--awb-border);
  border-radius: 8px;
}

.diensten-card:hover {
  border-color: var(--awb-primary);
  background: color-mix(in srgb, var(--awb-primary-soft) 30%, var(--awb-surface));
}

.diensten-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.diensten-card h3 {
  margin: 0;
  color: var(--awb-text);
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0;
}

.diensten-card span,
.diensten-card p {
  color: var(--awb-muted);
}

.diensten-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.diensten-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.diensten-shortcut {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 10px 12px;
  text-align: left;
  color: var(--awb-text);
  background: var(--awb-surface);
  border: 1px solid var(--awb-border);
  border-radius: 8px;
  cursor: pointer;
}

.diensten-shortcut:hover {
  border-color: var(--awb-primary);
  background: color-mix(in srgb, var(--awb-primary-soft) 28%, var(--awb-surface));
}

.diensten-shortcut strong {
  font-size: 13px;
  color: var(--awb-text);
}

.diensten-shortcut span {
  font-size: 11px;
  color: var(--awb-muted);
  font-weight: 700;
}

.generator-strip {
  margin-bottom: 12px;
}

.generator-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.generator-run-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 16px;
  padding: 16px;
  display: grid;
  gap: 12px;
  overflow-y: auto;
  align-self: flex-start;
  color: var(--awb-text);
  background: var(--awb-surface);
  border: 1px solid var(--awb-border);
  border-radius: 8px;
  box-shadow: var(--awb-shadow);
}

.generator-run-head,
.generator-run-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.generator-run-head h2 {
  margin: 0;
  color: var(--awb-text);
  font-size: 19px;
  letter-spacing: 0;
}

.generator-run-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.generator-run-grid label,
.generator-run-grid > div,
.generator-run-field {
  display: grid;
  gap: 5px;
}

.generator-run-grid span,
.generator-run-grid > div span,
.generator-run-field span {
  color: var(--awb-muted);
  font-size: 11px;
  font-weight: 800;
}

.generator-run-grid strong {
  color: var(--awb-text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.generator-run-field textarea {
  width: 100%;
  min-height: 170px;
  padding: 10px;
  resize: vertical;
}

.generator-run-pre {
  max-height: 360px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--awb-text);
  background: var(--awb-surface-2);
  border: 1px solid var(--awb-border);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
}

.generator-run-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.generator-run-foot {
  justify-content: flex-end;
  align-items: center;
}

.waardering-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;
  background: var(--awb-surface);
  border: 1px solid var(--awb-border);
  border-radius: 8px;
}

.waardering-toolbar .input {
  width: min(360px, 100%);
}

.waardering-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 14px;
  align-items: start;
}

.waardering-list {
  display: grid;
  gap: 9px;
}

.waardering-row {
  width: 100%;
  display: grid;
  gap: 9px;
  text-align: left;
  padding: 12px;
  color: var(--awb-text);
  background: var(--awb-surface);
  border: 1px solid var(--awb-border);
  border-radius: 8px;
  cursor: pointer;
}

.waardering-row:hover,
.waardering-row.active {
  border-color: var(--awb-primary);
  background: color-mix(in srgb, var(--awb-primary-soft) 34%, var(--awb-surface));
}

.waardering-row-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.waardering-row-main strong {
  font-size: 14px;
  color: var(--awb-text);
}

.waardering-row-main span {
  color: var(--awb-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waardering-row-meta {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--awb-muted);
  font-size: 11px;
}

.waardering-detail {
  position: sticky;
  top: 72px;
  display: grid;
  gap: 12px;
  padding: 14px;
  color: var(--awb-text);
  background: var(--awb-surface);
  border: 1px solid var(--awb-border);
  border-radius: 8px;
}

.waardering-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.waardering-detail h2,
.waardering-block h3 {
  margin: 0;
  color: var(--awb-text);
  letter-spacing: 0;
}

.waardering-detail h2 {
  font-size: 20px;
  line-height: 1.2;
}

.waardering-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.waardering-block {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--awb-border);
}

.waardering-block h3 {
  font-size: 13px;
}

.waardering-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.waardering-method-grid span {
  min-height: 30px;
  display: grid;
  align-items: center;
  padding: 6px 8px;
  color: var(--awb-text);
  background: var(--awb-surface-2);
  border: 1px solid var(--awb-border);
  border-radius: 8px;
  font-size: 12px;
}

.gd-command {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 0;
  overflow: hidden;
}

.gd-command-main,
.gd-command-steps,
.gd-command-foot,
.gd-side-block,
.gd-workspace-head,
.gd-panel {
  padding: 14px;
}

.gd-command-main h2,
.gd-workspace-head h3,
.gd-panel-head h4 {
  margin: 0;
  color: var(--awb-text);
  letter-spacing: 0;
}

.gd-command-main h2 {
  font-size: 21px;
  line-height: 1.2;
  margin-top: 3px;
}

.gd-command-main p {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--awb-muted);
}

.gd-command-steps {
  border-left: 1px solid var(--awb-border);
  background: color-mix(in srgb, var(--awb-surface-2) 55%, var(--awb-surface));
}

.gd-command-foot {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--awb-border);
  color: var(--awb-muted);
  font-size: 11px;
}

.gd-meta-line,
.gd-command-actions,
.gd-dossier-actions,
.gd-dossier-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}

.gd-meta-line span,
.gd-dossier-meta span {
  color: var(--awb-muted);
  font-size: 11px;
}

.gd-meta-line span:not(:last-child)::after,
.gd-dossier-meta span:not(:last-child)::after {
  content: "·";
  margin-left: 7px;
  color: var(--awb-faint);
}

.gd-command-actions {
  margin-top: 12px;
}

.gd-next-step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid var(--awb-border);
}

.gd-next-step:last-child {
  border-bottom: 0;
}

.gd-step-index {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--awb-primary-soft);
  color: var(--awb-primary-strong);
  font-size: 11px;
  font-weight: 800;
}

.gd-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 14px;
  align-items: start;
}

.gd-search {
  width: 100%;
  margin-bottom: 10px;
}

.gd-dossier-list {
  display: grid;
  gap: 9px;
}

.gd-dossier-card {
  border: 1px solid var(--awb-border);
  border-radius: 8px;
  padding: 11px;
  background: var(--awb-surface);
  cursor: pointer;
  display: grid;
  gap: 9px;
}

.gd-dossier-card:hover,
.gd-dossier-card.active {
  border-color: var(--awb-primary);
  background: color-mix(in srgb, var(--awb-primary-soft) 36%, var(--awb-surface));
}

.gd-dossier-top,
.gd-panel-head,
.gd-stage-row,
.gd-mini-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.gd-dossier-sub {
  color: var(--awb-muted);
  font-size: 12px;
  line-height: 1.35;
}

.gd-side-card {
  position: sticky;
  top: 72px;
  display: grid;
  gap: 0;
}

.gd-side-block + .gd-side-block {
  border-top: 1px solid var(--awb-border);
}

.gd-checkline {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 8px 0;
  color: var(--awb-text);
  font-size: 12px;
  line-height: 1.35;
}

.gd-checkline input {
  margin-top: 2px;
}

.gd-mini-row {
  padding: 7px 0;
  border-bottom: 1px solid var(--awb-border);
  font-size: 12px;
}

.gd-mini-row:last-child {
  border-bottom: 0;
}

.gd-mini-row span {
  color: var(--awb-muted);
  text-align: right;
}

.gd-queue-items {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.gd-queue-items > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 8px;
  align-items: center;
  padding-top: 7px;
  border-top: 1px solid var(--awb-border);
}

.gd-queue-items span,
.gd-queue-items small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gd-queue-items small {
  grid-column: 2;
  color: var(--awb-muted);
  font-size: 11px;
}

.gd-workspace {
  overflow: hidden;
}

.gd-workspace-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--awb-border);
  align-items: flex-start;
}

.gd-work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.gd-panel {
  padding: 12px;
}

.gd-panel-wide {
  grid-column: 1 / -1;
}

.gd-panel-head {
  margin-bottom: 10px;
}

.gd-stage-list,
.gd-prep-list,
.gd-review-list {
  display: grid;
  gap: 8px;
}

.gd-stage-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--awb-border);
  font-size: 12px;
}

.gd-stage-row:last-child {
  border-bottom: 0;
}

.gd-prep-list div {
  display: grid;
  gap: 3px;
  padding: 8px 0;
  border-bottom: 1px solid var(--awb-border);
}

.gd-prep-list div:last-child {
  border-bottom: 0;
}

.gd-prep-list span {
  color: var(--awb-muted);
  font-size: 12px;
}

.gd-file-row {
  border-bottom: 1px solid var(--awb-border);
  padding: 7px 0;
}

.gd-file-row:last-child {
  border-bottom: 0;
}

.gd-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 8px;
}

.gd-contact-card {
  border: 1px solid var(--awb-border);
  border-radius: 8px;
  padding: 10px;
  background: var(--awb-surface);
}

.gd-contact-card.needs-email {
  border-style: dashed;
  background: color-mix(in srgb, var(--awb-amber-soft) 24%, var(--awb-surface));
}

.gd-contact-break {
  grid-column: 1 / -1;
  margin-top: 4px;
  color: var(--awb-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

details.gd-panel > summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--awb-text);
}

@media (max-width: 1100px) {
  .gd-command,
  .gd-main-grid,
  .gd-work-grid,
  .gd-queue-strip,
  .diensten-grid,
  .diensten-grid.compact,
  .waardering-main {
    grid-template-columns: 1fr;
  }

  .gd-command-steps {
    border-left: 0;
    border-top: 1px solid var(--awb-border);
  }

  .gd-side-card {
    position: static;
  }

  .waardering-detail {
    position: static;
  }

  .gd-queue-main + .gd-queue-main {
    border-left: 0;
    border-top: 1px solid var(--awb-border);
  }
}

@media (max-width: 760px) {
  .gd-kpi-strip,
  .diensten-strip,
  .generator-strip,
  .waardering-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gd-workspace-head,
  .gd-dossier-top,
  .gd-panel-head,
  .waardering-detail-head {
    display: grid;
  }

  .waardering-method-grid {
    grid-template-columns: 1fr;
  }

  .generator-run-grid {
    grid-template-columns: 1fr;
  }
}