:root {
  --ink: #001f44;
  --muted: #5e6b78;
  --line: #d9e0e6;
  --paper: #ffffff;
  --soft: #f4f7f9;
  --orange: #ff8200;
  --orange-dark: #d96d00;
  --teal: #0b6f70;
  --gold: #d8a028;
  --shadow: 0 18px 48px rgba(23, 33, 43, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

a { color: inherit; text-decoration: none; }

.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Admin menu items are real links so users can open a workspace in a new tab/window. */
html body.admin-body:has(#dashboard:not(.hidden)) .admin-tabs a[data-admin-tab] {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-align: left !important;
  text-decoration: none !important;
  font: inherit !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  color: var(--pf24-text, #102033) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

html body.admin-body:has(#dashboard:not(.hidden)) .admin-tabs a[data-admin-tab][hidden] {
  display: none !important;
}

html body.admin-body:has(#dashboard:not(.hidden)) .admin-tabs a[data-admin-tab]:hover {
  border-color: rgba(245, 130, 32, .24) !important;
  background: rgba(245, 130, 32, .08) !important;
}

html body.admin-body:has(#dashboard:not(.hidden)) .admin-tabs a[data-admin-tab].active {
  border-color: rgba(245, 130, 32, .35) !important;
  background: color-mix(in srgb, #f58220 13%, var(--pf24-surface, #fff)) !important;
  color: var(--pf24-text, #102033) !important;
  box-shadow: inset 3px 0 0 #f58220 !important;
}

.business-core-panel {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--pf24-line, #d8e2ee);
  border-radius: 12px;
  background: var(--pf24-surface, #fff);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.business-core-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.business-core-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: start;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--pf24-line, #d8e2ee);
  border-radius: 10px;
  background: color-mix(in srgb, var(--pf24-surface, #fff) 92%, #f58220);
  color: var(--pf24-text, #102033);
  text-decoration: none;
}

.business-core-card i,
.business-core-card svg {
  width: 20px;
  height: 20px;
  color: #f58220;
}

.business-core-card span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.business-core-card strong {
  font-size: 14px;
  line-height: 1.2;
}

.business-core-card small,
.business-core-card em {
  font-size: 12px;
  line-height: 1.35;
  color: var(--pf24-muted, #5b6778);
  font-style: normal;
}

.business-core-card b {
  min-width: 28px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(245, 130, 32, .13);
  color: var(--pf24-text, #102033);
  text-align: center;
  font-size: 12px;
}

.business-core-card em {
  grid-column: 2 / -1;
}

@media (max-width: 820px) {
  .business-core-grid {
    grid-template-columns: 1fr;
  }
}

/* Document builder override: keep invoice/quote rows usable after global admin guards. */
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="finance"] .document-quick-draft {
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="finance"] .document-line-row {
  grid-template-columns: minmax(180px, 1.4fr) minmax(72px, .45fr) minmax(78px, .45fr) minmax(92px, .55fr) minmax(92px, .55fr) 32px !important;
}

@media (max-width: 900px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="finance"] .document-quick-draft,
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="finance"] .document-line-row,
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="finance"] .generated-document-list article {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="finance"] .document-quick-draft > *,
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="finance"] .document-live-preview {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* Exact legacy fixes found by the guardian audit. */
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm.business-calculator-grid {
  grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr) !important;
  align-items: start !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .compact-input-card {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .compact-input-card label,
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .compact-input-card :where(input, select) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm :where(.business-row, .business-row-head, .calculator-lines) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .calculator-ai-savings {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .calculator-ai-savings > span {
  display: grid !important;
  grid-template-columns: 1fr !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] .settings-shell,
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] #settingsForm.settings-form-grouped {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] :where(
  .settings-card,
  .branch-release-form,
  .switchboard-status-strip,
  .integration-hub-kpis,
  .data-sharing-grid,
  .data-sharing-row
) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] :where(
  .settings-card label,
  .integration-hub-kpis span,
  .integration-hub-kpis small,
  .switchboard-status-strip span,
  .data-sharing-row span,
  .data-sharing-row small,
  .branch-release-form button
) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

@media (max-width: 820px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #intakeForm.guided-intake-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: 10px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #intakeForm.guided-intake-form > .intake-step-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #intakeForm.guided-intake-form label,
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #intakeForm.guided-intake-form :where(input, select, textarea, button) {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm.business-calculator-grid,
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .compact-input-card,
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .calculator-ai-savings,
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] .settings-shell,
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] #settingsForm.settings-form-grouped,
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] :where(.settings-card, .branch-release-form, .switchboard-status-strip, .integration-hub-kpis, .data-sharing-grid, .data-sharing-row) {
    grid-template-columns: 1fr !important;
  }
}

/* Guided assistant and taxi operations */
.voice-guided-question {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-left: 3px solid var(--accent, #f97316);
  background: color-mix(in srgb, var(--panel, #fff) 92%, #f97316 8%);
}
.voice-answer-options { display: flex; flex-wrap: wrap; gap: 6px; }
.taxi-live-panel { display: grid; gap: 10px; margin-bottom: 16px; }
.taxi-live-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.taxi-live-counts span { display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 8px; border: 1px solid var(--border, #cbd5e1); border-radius: 6px; font-size: 12px; }
.taxi-live-counts b { color: var(--ink, #102033); }
.taxi-live-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, .8fr); gap: 12px; min-height: 390px; }
.taxi-map { position: relative; min-height: 390px; border: 1px solid var(--border, #cbd5e1); border-radius: 6px; overflow: hidden; background: #dceaf2; }
.taxi-map.taxi-map-offline::after { content: "Kaartlaag niet bereikbaar; statussen en locaties blijven beschikbaar."; position: absolute; z-index: 500; left: 50%; top: 12px; width: min(270px, calc(100% - 80px)); transform: translateX(-50%); padding: 7px 9px; border: 1px solid #94a3b8; border-radius: 6px; background: #fff; color: #102033; font-size: 11px; font-weight: 700; text-align: center; }
.taxi-live-sidebar { display: grid; align-content: start; gap: 9px; min-width: 0; }
.taxi-live-sidebar details { border: 1px solid var(--border, #cbd5e1); border-radius: 6px; padding: 8px; background: #fff; color: #102033; }
.taxi-live-sidebar summary { cursor: pointer; font-weight: 800; color: #102033 !important; background: transparent !important; }
.taxi-vehicle-list, .taxi-pool-list { display: grid; gap: 6px; }
.taxi-vehicle-list article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, .65fr); gap: 6px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border, #cbd5e1); }
.taxi-vehicle-list span, .taxi-pool-list span { display: grid; min-width: 0; }
.taxi-vehicle-list small, .taxi-pool-list small { overflow-wrap: anywhere; }
.taxi-live-panel .leaflet-control-layers-expanded { color: #102033; background: #fff; }
.taxi-live-panel .leaflet-control-layers label { color: #102033; }
.taxi-dispatch-workbench { display: grid; gap: 9px; border: 1px solid var(--border, #cbd5e1); border-radius: 8px; padding: 10px; background: #fff; color: #102033; }
.taxi-dispatch-intelligence { display: grid; gap: 8px; padding: 10px; border: 1px solid #dbeafe; border-radius: 8px; background: #f8fbff; color: #102033; }
.taxi-dispatch-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.taxi-dispatch-kpis.compact { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }
.taxi-dispatch-kpis span { display: grid; gap: 1px; padding: 7px 8px; border: 1px solid #d8e2ee; border-radius: 6px; background: #f8fafc; }
.taxi-dispatch-kpis b { font-size: 14px; color: #102033; }
.taxi-dispatch-kpis small { font-size: 11px; color: #64748b; }
.taxi-intelligence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.taxi-intelligence-grid article { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 8px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.taxi-intelligence-grid article > strong { font-size: 13px; color: #0f172a; }
.taxi-intelligence-signal { display: grid; gap: 2px; min-width: 0; padding: 7px; border: 1px solid #e2e8f0; border-left: 3px solid #60a5fa; border-radius: 7px; background: #f8fafc; font-size: 11px; }
.taxi-intelligence-signal.warning { border-left-color: #f97316; background: #fff7ed; }
.taxi-intelligence-signal.critical { border-left-color: #dc2626; background: #fef2f2; }
.taxi-intelligence-signal b { color: #102033; font-size: 12px; }
.taxi-intelligence-signal small { color: #475569; overflow-wrap: anywhere; }
.taxi-intelligence-signal em { color: #0f766e; font-style: normal; font-weight: 700; }
.taxi-dispatch-list { display: grid; gap: 8px; }
.taxi-dispatch-card { display: grid; gap: 8px; padding: 9px; border: 1px solid #d8e2ee; border-radius: 8px; background: #fff; }
.taxi-dispatch-card header { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.taxi-dispatch-card header span { display: grid; min-width: 0; }
.taxi-dispatch-card header small { color: #64748b; overflow-wrap: anywhere; }
.taxi-dispatch-meta,
.taxi-dispatch-warnings,
.taxi-dispatch-passenger,
.taxi-dispatch-contact { display: flex; flex-wrap: wrap; gap: 6px; }
.taxi-dispatch-meta span,
.taxi-dispatch-warnings span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 999px; font-size: 11px; }
.taxi-dispatch-meta span { background: #eef2f7; color: #334155; }
.taxi-dispatch-warnings span { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.taxi-dispatch-warnings svg { width: 13px; height: 13px; }
.taxi-dispatch-passenger { align-items: center; font-size: 11px; color: #475569; }
.taxi-dispatch-passenger :where(span, a) { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.taxi-dispatch-passenger small { flex-basis: 100%; color: #64748b; }
.taxi-dispatch-passenger svg { width: 13px; height: 13px; }
.taxi-match-advice { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 6px 7px; border: 1px solid #dbeafe; border-radius: 7px; background: #eff6ff; color: #1e3a8a; font-size: 11px; }
.taxi-match-advice span { display: inline-flex; align-items: center; gap: 4px; }
.taxi-match-advice small { padding: 2px 5px; border-radius: 999px; background: #fff; color: #334155; }
.taxi-match-advice em { padding: 2px 5px; border-radius: 999px; background: #fff7ed; color: #9a3412; font-style: normal; }
.taxi-match-advice svg { width: 13px; height: 13px; }
.taxi-profile-grid,
.taxi-school-route-grid,
.taxi-service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.taxi-profile-grid article,
.taxi-school-route-card,
.taxi-service-grid article { display: grid; gap: 6px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #102033; font-size: 12px; }
.taxi-profile-grid strong,
.taxi-school-route-card strong,
.taxi-service-grid strong { font-size: 13px; color: #0f172a; }
.taxi-profile-grid small,
.taxi-profile-grid span,
.taxi-school-route-card small,
.taxi-service-grid :where(p, small, em) { color: #64748b; overflow-wrap: anywhere; }
.taxi-school-route-card header { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.taxi-school-route-card header span { display: grid; gap: 2px; }
.taxi-service-grid header { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.taxi-service-grid header span { display: grid; gap: 2px; min-width: 0; }
.taxi-service-grid b { color: #0f766e; font-size: 12px; white-space: nowrap; }
.taxi-service-grid em { font-style: normal; font-size: 11px; }
.taxi-route-stops { display: grid; gap: 4px; }
.taxi-route-stops span { display: flex; align-items: center; gap: 6px; color: #475569; font-size: 11px; }
.taxi-route-stops b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: #eef2f7; color: #334155; font-size: 10px; }
.customer-taxi-tracking { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; font-size: 11px; color: #334155; }
.customer-taxi-tracking :where(span, em) { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 999px; background: #eef6ff; color: #1e3a8a; font-style: normal; }
.customer-taxi-tracking small { flex-basis: 100%; color: #64748b; }
.customer-taxi-tracking svg { width: 13px; height: 13px; }
.taxi-dispatch-controls { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) repeat(3, max-content); gap: 6px; align-items: center; }
.taxi-dispatch-controls select { min-height: 34px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 7px; background: #fff; color: #102033; font: inherit; font-size: 12px; }
.taxi-estimate { display: grid; gap: 5px; padding: 10px; border: 1px solid #bae6fd; border-radius: 8px; background: #f0f9ff; color: #0c4a6e; }
@media (max-width: 850px) {
  .taxi-live-layout { grid-template-columns: 1fr; }
  .taxi-map { min-height: 320px; }
  .taxi-dispatch-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .taxi-intelligence-grid { grid-template-columns: 1fr; }
  .taxi-dispatch-controls { grid-template-columns: 1fr; }
}

/* Kassa-app is een zelfstandig werkstation en gebruikt daarom het volledige scherm. */
body.kassaapp-entry.portal-active #portalDashboard.dashboard > .pos-v2-workspace {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}

@media (pointer: coarse) {
  .pos-v2-workspace :where(button, input, select) {
    touch-action: manipulation;
  }

  .pos-v2-top-actions button,
  .pos-v2-categories button,
  .pos-v2-scan button,
  .pos-v2-customer button,
  .pos-v2-pay button,
  .pos-v2-split-form button,
  .pos-v2-split-form select,
  .pos-v2-tools button {
    min-height: 48px !important;
  }

  .pos-v2-scan input,
  .pos-v2-customer input,
  .pos-v2-tools input,
  .pos-v2-tools select,
  .pos-v2-dialog input {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  .pos-v2-function-rail button {
    min-height: 68px !important;
  }

  .pos-v2-quantity button,
  .pos-v2-remove {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .pos-v2-product {
    min-height: 124px !important;
  }
}

body.professional-portal-active.portal-active .warehouse-slotting-tools {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}

body.professional-portal-active.portal-active .warehouse-slotting-tools > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--text-strong);
  font-weight: 800;
}

body.professional-portal-active.portal-active .warehouse-slotting-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--border);
}

body.professional-portal-active.portal-active .warehouse-slotting-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 8px;
  background: var(--surface, var(--panel));
}

body.professional-portal-active.portal-active .warehouse-slotting-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.professional-portal-active.portal-active .warehouse-slotting-panel-head h4 {
  margin: 0;
  font-size: 14px;
}

body.professional-portal-active.portal-active .warehouse-slotting-list {
  display: grid;
  gap: 8px;
  max-height: 430px;
  overflow: auto;
}

body.professional-portal-active.portal-active .warehouse-slotting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 8px;
  background: var(--panel);
}

body.professional-portal-active.portal-active .warehouse-slotting-row strong,
body.professional-portal-active.portal-active .warehouse-slotting-row small {
  display: block;
  min-width: 0;
}

body.professional-portal-active.portal-active .warehouse-slotting-row small {
  color: var(--muted);
}

body.professional-portal-active.portal-active .warehouse-slotting-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

body.professional-portal-active.portal-active .warehouse-relocation-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}

body.professional-portal-active.portal-active .warehouse-relocation-form label {
  display: grid;
  gap: 5px;
  margin: 0;
}

body.professional-portal-active.portal-active .warehouse-relocation-form label:first-child,
body.professional-portal-active.portal-active .warehouse-relocation-form button {
  grid-column: 1 / -1;
}

body.professional-portal-active.portal-active .warehouse-relocation-form span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

body.professional-portal-active.portal-active .warehouse-location-finder {
  grid-column: 1 / -1;
}

body.professional-portal-active.portal-active .warehouse-finder-controls {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr);
  gap: 10px;
  align-items: end;
}

body.professional-portal-active.portal-active .warehouse-finder-controls label {
  display: grid;
  gap: 5px;
  margin: 0;
}

body.professional-portal-active.portal-active .warehouse-finder-controls label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

body.professional-portal-active.portal-active .warehouse-orientation-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

body.professional-portal-active.portal-active .warehouse-map-shell {
  position: relative;
  min-height: 330px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--border) 35%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--border) 35%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--panel) 84%, var(--accent) 4%);
  background-size: 42px 42px;
}

body.professional-portal-active.portal-active .warehouse-map-shell > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .18;
  pointer-events: none;
}

body.professional-portal-active.portal-active .warehouse-map-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(84px, 1fr));
  gap: 8px;
  transform: rotate(var(--warehouse-map-rotation, 0deg));
  transform-origin: center;
  transition: transform .25s ease;
}

body.professional-portal-active.portal-active .warehouse-map-cell {
  min-width: 0;
  min-height: 68px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--text-strong);
  text-align: left;
  cursor: pointer;
}

body.professional-portal-active.portal-active .warehouse-map-cell strong,
body.professional-portal-active.portal-active .warehouse-map-cell small {
  transform: rotate(calc(var(--warehouse-map-rotation, 0deg) * -1));
  transform-origin: center;
}

body.professional-portal-active.portal-active .warehouse-map-cell small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.professional-portal-active.portal-active .warehouse-map-cell.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 24%, var(--panel));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent);
  animation: warehouse-location-pulse 1.15s ease-in-out infinite;
}

body.professional-portal-active.portal-active .warehouse-map-compass {
  position: absolute;
  z-index: 2;
  right: 12px;
  top: 12px;
  min-width: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 900;
}

body.professional-portal-active.portal-active .warehouse-location-route {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}

body.professional-portal-active.portal-active .warehouse-location-route small {
  color: var(--muted);
}

@keyframes warehouse-location-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@media (max-width: 960px) {
  body.professional-portal-active.portal-active .warehouse-slotting-grid,
  body.professional-portal-active.portal-active .warehouse-slotting-row,
  body.professional-portal-active.portal-active .warehouse-relocation-form,
  body.professional-portal-active.portal-active .warehouse-finder-controls {
    grid-template-columns: 1fr;
  }

  body.professional-portal-active.portal-active .warehouse-slotting-actions,
  body.professional-portal-active.portal-active .warehouse-orientation-controls {
    justify-content: flex-start;
  }

  body.professional-portal-active.portal-active .warehouse-map-grid {
    grid-template-columns: repeat(3, minmax(78px, 1fr));
  }
}

.portal-active #professional-pos .pos-branch-banner,
.portal-active #professional-pos .pos-terminal-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #e5edf7;
}

.portal-active #professional-pos .pos-branch-banner {
  grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.8fr);
  align-items: center;
}

.portal-active #professional-pos .pos-branch-banner span,
.portal-active #professional-pos .pos-terminal-card span {
  display: grid;
  gap: 2px;
}

.portal-active #professional-pos .pos-branch-banner small,
.portal-active #professional-pos .pos-terminal-card small {
  color: #9fb0c4;
}

.portal-active #professional-pos .pos-branch-banner strong,
.portal-active #professional-pos .pos-terminal-card strong {
  color: #ffffff;
}

.portal-active #professional-pos .pos-branch-banner div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.portal-active #professional-pos .pos-branch-banner b,
.portal-active #professional-pos .pos-terminal-card > b {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.16);
  color: #bbf7d0;
  font-size: 11px;
}

.portal-active #professional-pos .pos-terminal-card {
  margin-top: 10px;
}

.portal-active #professional-pos .compact-terminal-actions {
  justify-content: flex-start;
}

.kassaapp-shell .professional-section-nav .portal-nav-links {
  min-height: 0;
}

html[data-theme="light"] .portal-active #professional-pos .pos-branch-banner,
html[data-theme="light"] .portal-active #professional-pos .pos-terminal-card {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .portal-active #professional-pos .pos-branch-banner strong,
html[data-theme="light"] .portal-active #professional-pos .pos-terminal-card strong {
  color: #0f172a;
}

h1, h2, h3, p, a, button, label, span, strong {
  overflow-wrap: break-word;
  hyphens: auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: 0 36px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Public signup simplification - 2026-07-22 */
.public-site .topbar .brand {
  min-height: 0;
}

.public-site .topbar .brand img[src*="profix24-logo"] {
  width: 178px;
  height: auto;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgb(255, 255, 255);
  object-fit: contain;
}

.public-site .homepage-nav {
  display: flex;
  width: 100%;
}

.public-site .homepage-login-link {
  border-color: rgba(255, 130, 0, 0.46);
  background: rgba(255, 130, 0, 0.18);
  color: #fff;
}

.public-site.signup-look .portal-shell {
  width: min(720px, calc(100% - 32px));
  grid-template-columns: 1fr;
  align-items: start;
}

.public-site.signup-look .login-panel {
  padding: 24px;
}

.public-site.signup-look form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.public-site.signup-look label {
  min-width: 0;
}

.public-site.signup-look label[hidden],
.public-site.signup-look [hidden] {
  display: none !important;
}

.public-site.signup-look input {
  min-height: 44px;
}

.public-site.signup-look .button.primary {
  min-height: 46px;
}

.business-lookup-results {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.business-lookup-result {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 130, 0, 0.36);
  border-radius: 6px;
  background: rgba(255, 130, 0, 0.12);
  color: #f7efe5;
  text-align: left;
  cursor: pointer;
}

.business-lookup-result span,
.business-lookup-results p {
  color: rgba(247, 239, 229, 0.76);
}

.form-message a {
  color: #ff9a2e;
  font-weight: 900;
}

.legal-consent-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  border: 1px solid rgba(143, 178, 214, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(226, 236, 247, 0.82);
  padding: 10px 12px;
  font-size: 0.9rem;
  line-height: 1.35;
}

.legal-consent-note a {
  color: #ff9a2e;
  font-weight: 900;
}

html[data-theme="light"] .legal-consent-note {
  background: #ffffff;
  border-color: rgba(14, 47, 82, 0.14);
  color: #536579;
}

.badge-login-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255, 130, 0, 0.3);
  border-radius: 8px;
  background: rgba(255, 130, 0, 0.1);
}

.badge-login-form label {
  min-width: 0;
  color: rgba(240, 247, 255, 0.88);
}

.badge-login-form input {
  min-height: 42px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-login-form .form-message {
  grid-column: 1 / -1;
  margin: 0;
}

.transport-regie-panel {
  display: grid;
  gap: 14px;
  align-items: start;
}

.transport-regie-panel > .transport-workspace-tabs,
.transport-regie-panel > .transport-workspace-panel {
  grid-column: 1 / -1 !important;
  width: 100%;
  min-width: 0;
}

.transport-workspace-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px;
  border: 1px solid var(--portal-line, #cbd5e1);
  border-radius: 8px;
  background: color-mix(in srgb, var(--portal-card, #fff) 92%, #0b6f70 8%);
}

.transport-workspace-tabs::-webkit-scrollbar {
  display: none;
}

.transport-workspace-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--portal-text, #102033);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
}

.transport-workspace-tabs button:hover {
  border-color: var(--portal-line, #cbd5e1);
}

.transport-workspace-tabs button.active {
  border-color: #e26f00;
  background: #ff8200;
  color: #102033;
}

.transport-workspace-panel {
  display: block;
}

.transport-workspace-panel[hidden] {
  display: none !important;
}

.transport-workspace-tabs button svg,
.inland-shipping-workspace svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  vertical-align: middle;
}

.inland-shipping-workspace,
.inland-plan-list,
.inland-plan-card,
.inland-plan-card > :not(summary) {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.inland-marketplace,
.inland-listing-list,
.inland-listing-card,
.inland-listing-card > :not(summary) {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.inland-marketplace {
  padding: 10px;
  border: 1px solid var(--portal-line, #cbd5e1);
  border-radius: 8px;
  background: color-mix(in srgb, var(--portal-card, #fff) 96%, #0b6f70 4%);
}

.inland-marketplace > summary,
.inland-listing-card > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.inland-marketplace > summary span,
.inland-listing-card > summary span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.inland-marketplace > summary small,
.inland-listing-card > summary small {
  flex-basis: 100%;
  padding-left: 23px;
  color: var(--portal-muted, #516174);
}

.inland-marketplace-kpis,
.inland-listing-facts,
.inland-settlement {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.inland-marketplace-kpis > span,
.inland-listing-facts > span,
.inland-settlement > span {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--portal-line, #cbd5e1);
  border-radius: 5px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.inland-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.inland-marketplace-form,
.inland-bid-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inland-listing-card {
  padding: 10px;
  border: 1px solid var(--portal-line, #cbd5e1);
  border-radius: 7px;
  background: var(--portal-card, #fff);
}

.inland-bid-list {
  display: grid;
  gap: 5px;
}

.inland-bid-list > article {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border-top: 1px solid var(--portal-line, #cbd5e1);
}

.inland-bid-list > article > span {
  display: grid;
  min-width: 0;
}

.inland-shipping-workspace > .section-title-row h4,
.inland-plan-card > summary span,
.inland-route-strip span,
.inland-replan > summary,
.inland-revisions > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.inland-shipping-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inland-hold-inputs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--portal-line, #cbd5e1);
  border-radius: 6px;
}

.inland-hold-inputs legend {
  padding: 0 5px;
  font-size: 0.75rem;
  font-weight: 800;
}

.inland-plan-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--portal-line, #cbd5e1);
  border-radius: 8px;
  background: var(--portal-card, #fff);
}

.inland-plan-card > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 12px;
  cursor: pointer;
}

.inland-plan-card > summary span:first-child {
  flex-wrap: wrap;
}

.inland-plan-card > summary small {
  flex-basis: 100%;
  padding-left: 24px;
  color: var(--portal-muted, #516174);
}

.inland-plan-card > :not(summary) {
  margin: 0 12px 12px;
}

.inland-load-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.inland-load-summary > span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px 7px;
  padding: 9px;
  border: 1px solid var(--portal-line, #cbd5e1);
  border-radius: 6px;
}

.inland-load-summary small {
  grid-column: 2;
  color: var(--portal-muted, #516174);
}

.inland-hold-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 6px;
}

.inland-hold-grid > span {
  position: relative;
  display: grid;
  gap: 2px;
  overflow: hidden;
  padding: 9px;
  border: 1px solid var(--portal-line, #cbd5e1);
  border-radius: 5px;
  background: linear-gradient(to top, color-mix(in srgb, #0b6f70 22%, transparent) var(--hold-fill), transparent var(--hold-fill));
}

.inland-route-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--portal-line, #cbd5e1);
  border-radius: 6px;
}

.inland-route-strip > span {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
}

.inland-route-strip small {
  grid-column: 2 / -1;
  color: var(--portal-muted, #516174);
}

.inland-replan,
.inland-revisions {
  border-top: 1px solid var(--portal-line, #cbd5e1);
  padding-top: 9px;
}

.inland-replan > summary,
.inland-revisions > summary {
  cursor: pointer;
  font-weight: 800;
}

.inland-revisions p {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 8px;
  margin: 6px 0 0;
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  .inland-shipping-form,
  .inland-marketplace-form,
  .inland-bid-form,
  .inland-marketplace-kpis,
  .inland-listing-facts,
  .inland-settlement,
  .inland-load-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .inland-shipping-form,
  .inland-marketplace-form,
  .inland-bid-form,
  .inland-marketplace-kpis,
  .inland-listing-facts,
  .inland-settlement,
  .inland-hold-inputs,
  .inland-load-summary,
  .inland-route-strip,
  .inland-plan-card > summary {
    grid-template-columns: 1fr;
  }

  .inland-marketplace > summary,
  .inland-listing-card > summary,
  .inland-bid-list > article {
    grid-template-columns: 1fr;
  }

  .inland-route-strip > svg {
    transform: rotate(90deg);
    justify-self: center;
  }
}

.professional-fiscal-year {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border, var(--line));
  border-radius: 8px;
  background: var(--surface, var(--paper));
}

.professional-fiscal-year > header,
.professional-fiscal-actions,
.professional-fiscal-history > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.professional-fiscal-year header div,
.professional-fiscal-history > span {
  display: grid;
  gap: 2px;
}

.professional-fiscal-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.professional-fiscal-kpis article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border, var(--line));
  border-radius: 6px;
  background: var(--surface-strong, var(--soft));
}

.professional-fiscal-kpis span,
.professional-fiscal-note,
.professional-trial-balance-table small {
  color: var(--muted);
  font-size: 12px;
}

.professional-fiscal-kpis strong {
  font-size: 15px;
}

.professional-fiscal-blockers > div,
.professional-trial-balance-table,
.professional-fiscal-history {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.professional-fiscal-blockers span,
.professional-trial-balance-table > span,
.professional-fiscal-history > span {
  padding: 8px 10px;
  border: 1px solid var(--border, var(--line));
  border-radius: 6px;
  background: var(--surface-strong, var(--soft));
}

.professional-accounting-review article {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border, var(--line));
  border-radius: 6px;
  background: var(--surface-strong, var(--soft));
}

.professional-accounting-review article small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.professional-accounting-review form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  gap: 8px;
}

.professional-accounting-priority,
.professional-tax-readiness {
  font-size: 13px;
}

.professional-accounting-priority > header,
.professional-tax-readiness {
  margin: 8px 0 12px;
}

.professional-accounting-priority-list {
  display: grid;
  gap: 8px;
}

.professional-accounting-review-item {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border, var(--line));
  border-radius: 8px;
  background: #fff;
}

.professional-accounting-review-item > div {
  display: grid;
  gap: 2px;
}

.professional-accounting-review-item b {
  color: var(--ink, #071426);
  font-size: 13px;
}

.professional-accounting-review-item small,
.professional-tax-readiness span {
  color: var(--muted, #526175);
  line-height: 1.35;
}

.professional-accounting-review-item form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  align-items: end;
}

.professional-tax-readiness {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.professional-tax-readiness article {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--border, var(--line));
  border-radius: 8px;
  background: #fff;
}

.professional-tax-readiness .needs-action {
  border-color: rgba(255, 128, 0, .45);
  background: #fff7ed;
}

.professional-tax-readiness .is-ok {
  border-color: rgba(13, 148, 136, .35);
  background: #f0fdfa;
}

.professional-historical-import {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--border, var(--line));
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
}

.professional-historical-import > header,
.professional-historical-import > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
}

.professional-historical-import > div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.professional-historical-import article {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--border, var(--line));
  border-radius: 7px;
  background: #f8fbff;
}

.professional-historical-import small,
.professional-historical-import span,
.professional-historical-import p {
  color: var(--muted, #526175);
  line-height: 1.35;
}

.professional-bank-connection {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: stretch;
  margin: 8px 0 10px;
  font-size: 13px;
}

.professional-bank-connection article,
.professional-bank-connection > div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--border, var(--line));
  border-radius: 8px;
  background: #fff;
}

.professional-bank-connection span {
  color: var(--muted, #526175);
  line-height: 1.35;
}

.professional-bank-connection > div {
  align-content: center;
}

.professional-accounting-review form label {
  min-width: 0;
}

.professional-accounting-review .form-message {
  grid-column: 1 / -1;
  margin: 0;
}

.professional-trial-balance-table > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

@media (max-width: 1100px) {
  .professional-fiscal-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .professional-fiscal-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .professional-tax-readiness,
  .professional-bank-connection,
  .professional-historical-import > header,
  .professional-historical-import > div,
  .professional-accounting-review-item form {
    grid-template-columns: 1fr;
  }

  .professional-trial-balance-table > span {
    display: grid;
  }
}

.owner-dashboard-toolbar,
.owner-dashboard-toolbar > div,
.owner-organization-shortcuts {
  display: flex;
  align-items: center;
  gap: 8px;
}

.owner-dashboard-toolbar {
  grid-column: 1 / -1;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid var(--border, var(--line));
  border-radius: 6px;
  background: var(--surface, var(--paper));
}

.owner-dashboard-toolbar > div:first-child {
  display: grid;
  gap: 2px;
}

.owner-dashboard-toolbar small,
.owner-organization-shortcuts span {
  color: var(--muted);
  font-size: 12px;
}

.owner-dashboard-density .icon-button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border: 1px solid var(--border, var(--line));
}

.owner-dashboard-density .icon-button.active {
  border-color: var(--orange);
  background: var(--orange);
  color: #102033;
}

.owner-organization-shortcuts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.owner-organization-shortcuts a {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--teal);
  background: var(--surface-strong, var(--soft));
}

.owner-dashboard-compact .professional-assistant-greeting span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.owner-comparison-kpis {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.owner-comparison-kpis article {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border, var(--line));
  border-radius: 6px;
  background: var(--surface, var(--paper));
}

.owner-comparison-kpis span,
.owner-comparison-kpis small {
  color: var(--muted);
  font-size: 11px;
}

.owner-comparison-kpis strong {
  color: var(--text, var(--ink));
  font-size: 17px;
}

.owner-comparison-kpis article.warning {
  border-left: 4px solid var(--orange);
}

.owner-comparison-kpis article.ok {
  border-left: 4px solid var(--success, #2c9b66);
}

.owner-dashboard-compact .professional-regiecentrum {
  background: var(--surface, var(--paper));
  border-color: var(--border, var(--line));
}

.owner-dashboard-compact .professional-regiecentrum :is(h3, p) {
  color: var(--text, var(--ink));
}

.owner-dashboard-compact .professional-regie-item {
  background: var(--surface-strong, var(--soft));
  color: var(--text, var(--ink));
  border-color: var(--border, var(--line));
}

.owner-dashboard-compact .professional-regie-item strong {
  color: var(--text, var(--ink));
}

.owner-dashboard-compact .professional-regie-item small {
  color: var(--muted);
}

.professional-regie-item em {
  display: block;
  margin-top: 5px;
  color: var(--text, #fff);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.owner-no-signals {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  color: var(--muted);
  border-left: 4px solid var(--success, #2c9b66);
  background: var(--surface-strong, var(--soft));
}

@media (max-width: 720px) {
  .owner-comparison-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-organization-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Admin header metrics final density: chips, not cards. */
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .admin-header-metrics {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .admin-header-metrics .metric-card {
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 126px !important;
  min-height: 24px !important;
  height: 24px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .admin-header-metrics .metric-card span {
  font-size: 10.5px !important;
  line-height: 1 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .admin-header-metrics .metric-card strong {
  max-width: 72px !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
}

.transport-workspace-panel > :first-child {
  margin-top: 0;
}

.transport-workspace-panel .taxi-live-panel,
.transport-workspace-panel .stay-regie-card {
  margin-bottom: 0;
}

.freight-marketplace {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(137, 190, 255, 0.24);
  border-radius: 8px;
  background: rgba(7, 24, 43, 0.72);
}

.compact-action-details {
  position: relative;
}

.compact-action-details > summary {
  list-style: none;
}

.compact-action-details[open] > .freight-listing-form {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  width: min(720px, calc(100vw - 48px));
  max-height: min(76vh, 720px);
  overflow: auto;
  scrollbar-width: none;
  padding: 14px;
  border: 1px solid rgba(255, 130, 0, 0.4);
  border-radius: 8px;
  background: #071c31;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

.compact-action-details[open] > .freight-listing-form::-webkit-scrollbar {
  display: none;
}

.freight-listing-form,
.freight-bid-form,
.freight-delivery-form,
.freight-live-form,
.freight-customer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.freight-listing-form .wide,
.freight-bid-form .wide,
.freight-delivery-form .wide,
.freight-live-form .wide,
.freight-customer-grid .wide {
  grid-column: 1 / -1;
}

.freight-kpis,
.freight-settlement {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.freight-kpis > span,
.freight-settlement > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(137, 190, 255, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(240, 247, 255, 0.76);
  font-size: 0.75rem;
}

.freight-kpis b,
.freight-settlement b {
  color: #fff;
  font-size: 0.9rem;
}

.freight-fee-line {
  margin: 0;
  color: rgba(240, 247, 255, 0.72);
  font-size: 0.76rem;
}

.freight-capacity-matches {
  border: 1px solid rgba(96, 211, 157, 0.24);
  border-radius: 7px;
  background: rgba(3, 17, 31, 0.48);
}

.freight-match-dashboard,
.freight-tariff-panel,
.freight-optimizer-panel,
.freight-waybill,
.freight-route-change,
.freight-live-panel,
.freight-form-section,
.freight-auto-bid-fields {
  border: 1px solid rgba(137, 190, 255, 0.2);
  border-radius: 7px;
  background: rgba(3, 17, 31, 0.5);
}

:where(.freight-match-dashboard, .freight-tariff-panel, .freight-optimizer-panel, .freight-waybill, .freight-route-change, .freight-live-panel, .freight-form-section, .freight-auto-bid-fields) > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  padding: 7px 9px;
  cursor: pointer;
  color: rgba(240, 247, 255, 0.9);
  font-size: 0.78rem;
}

.freight-match-list {
  display: grid;
  gap: 5px;
  padding: 0 8px 8px;
}

.freight-match-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) minmax(90px, 0.7fr) minmax(90px, 0.7fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(240, 247, 255, 0.82);
  text-align: left;
}

.freight-match-row b,
.freight-match-row small {
  display: block;
}

.freight-match-row small {
  margin-top: 2px;
  color: rgba(240, 247, 255, 0.58);
}

.freight-tariff-form,
.freight-route-form,
.freight-waybill-grid {
  margin: 0 9px 9px;
}

.freight-tariff-form,
.freight-route-form,
.freight-auto-bid-fields .compact-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.freight-waybill-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: end;
}

.freight-waybill-grid span {
  display: grid;
  gap: 2px;
  color: rgba(240, 247, 255, 0.74);
  font-size: 0.75rem;
}

.freight-route-alert {
  padding: 8px 9px;
  border: 1px solid rgba(255, 130, 0, 0.34);
  border-radius: 6px;
  background: rgba(255, 130, 0, 0.1);
}

.freight-operation-advice {
  margin: 0;
  padding: 8px 9px;
  border: 1px solid rgba(96, 211, 157, 0.28);
  border-radius: 6px;
  background: rgba(96, 211, 157, 0.08);
}

.freight-container-warning {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid #dc6b19;
  background: rgba(220, 107, 25, 0.12);
  color: var(--text-main, #f5f7fa);
  line-height: 1.45;
}

.freight-container-clearance {
  border-color: rgba(220, 107, 25, 0.55);
}

.freight-optimizer-patterns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.freight-optimizer-patterns > span {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 6px;
}

.freight-form-section > .compact-form,
.freight-live-panel > .freight-live-form {
  margin: 0 9px 9px;
}

.freight-form-section > .freight-access-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.freight-access-form > .wide {
  grid-column: 1 / -1;
}

.freight-optimizer-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 0 9px 8px;
}

.freight-optimizer-summary > span {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid rgba(137, 190, 255, 0.16);
  border-radius: 6px;
  color: rgba(240, 247, 255, 0.72);
  font-size: 0.73rem;
}

.freight-optimizer-summary b {
  color: #fff;
}

.freight-optimizer-suggestions {
  display: grid;
  gap: 5px;
  padding: 0 9px 9px;
}

.freight-optimizer-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto auto;
  gap: 7px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  color: rgba(240, 247, 255, 0.78);
  font-size: 0.74rem;
}

.freight-optimizer-row b,
.freight-optimizer-row small {
  display: block;
}

.freight-optimizer-row small {
  margin-top: 2px;
  color: rgba(240, 247, 255, 0.58);
}

.freight-live-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.freight-capacity-matches > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  padding: 7px 9px;
  cursor: pointer;
  color: rgba(240, 247, 255, 0.88);
  font-size: 0.78rem;
}

.freight-capacity-list {
  display: grid;
  gap: 5px;
  padding: 0 8px 8px;
}

.freight-capacity-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(120px, 1fr) minmax(110px, 0.9fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 6px 7px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  color: rgba(240, 247, 255, 0.78);
  font-size: 0.74rem;
}

.freight-capacity-row b,
.freight-capacity-row small {
  display: block;
}

.freight-capacity-row b {
  color: #fff;
}

.freight-capacity-row small {
  margin-top: 2px;
  color: rgba(240, 247, 255, 0.58);
}

.freight-list {
  display: grid;
  gap: 6px;
}

.freight-card {
  border: 1px solid rgba(137, 190, 255, 0.2);
  border-radius: 7px;
  background: rgba(3, 17, 31, 0.62);
}

.freight-card > summary {
  display: grid;
  grid-template-columns: minmax(180px, 1.7fr) minmax(90px, 0.7fr) minmax(110px, 0.8fr) minmax(120px, 0.8fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  cursor: pointer;
  color: rgba(240, 247, 255, 0.86);
  font-size: 0.78rem;
}

.freight-main,
.freight-main b,
.freight-main small {
  display: block;
  min-width: 0;
}

.freight-main b {
  color: #fff;
}

.freight-main small {
  margin-top: 2px;
  color: rgba(240, 247, 255, 0.62);
}

.freight-card[open] {
  border-color: rgba(255, 130, 0, 0.42);
}

.freight-card > :not(summary) {
  margin: 0 10px 10px;
}

.freight-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.freight-detail-grid > span {
  display: grid;
  gap: 3px;
  color: rgba(240, 247, 255, 0.74);
  font-size: 0.76rem;
}

.freight-detail-grid b {
  color: #fff;
}

.freight-detail-grid .wide {
  grid-column: 1 / -1;
  color: rgba(240, 247, 255, 0.8);
}

.freight-access-strip {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(96, 211, 157, 0.28);
  border-radius: 7px;
  background: rgba(96, 211, 157, 0.08);
}

.freight-access-strip span,
.freight-access-strip small {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.freight-access-strip span {
  color: #fff;
  font-size: 0.76rem;
}

.freight-access-strip small {
  color: rgba(240, 247, 255, 0.7);
}

.freight-bids {
  display: grid;
  gap: 6px;
}

.freight-bid-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(240, 247, 255, 0.78);
  font-size: 0.77rem;
}

.freight-integration-hub > summary {
  display: flex;
  justify-content: space-between;
  padding: 8px 0 0;
  cursor: pointer;
  color: rgba(240, 247, 255, 0.82);
}

.freight-integration-hub .integration-status-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}

.freight-integration-hub .integration-status-list > span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px;
  align-items: baseline;
  min-width: 0;
  color: rgba(240, 247, 255, 0.68);
  font-size: 0.72rem;
}

.freight-integration-hub .integration-status-list b {
  color: #fff;
}

.freight-connector-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.freight-connector {
  border: 1px solid rgba(137, 190, 255, 0.18);
  border-radius: 7px;
  background: rgba(3, 17, 31, 0.5);
}

.freight-connector > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  padding: 7px 9px;
  cursor: pointer;
  color: rgba(240, 247, 255, 0.86);
  font-size: 0.78rem;
}

.freight-connector > summary span:first-child,
.freight-connector > summary b,
.freight-connector > summary small {
  display: block;
}

.freight-connector > summary b {
  color: #fff;
}

.freight-connector > summary small {
  margin-top: 2px;
  color: rgba(240, 247, 255, 0.58);
}

.freight-connector-form {
  margin: 0 9px 9px;
}

.freight-connector-form .compact-choice-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.freight-connector-form .checkbox-line {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid rgba(137, 190, 255, 0.18);
  border-radius: 6px;
  background: rgba(3, 17, 31, 0.46);
  color: rgba(240, 247, 255, 0.84);
  font-size: 0.73rem;
}

.freight-connector-form .checkbox-line:has(input:disabled) {
  opacity: 0.58;
}

.connector-capabilities,
.connector-credential-state {
  margin: 0;
  color: rgba(240, 247, 255, 0.68);
  font-size: 0.74rem;
}

.connector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 720px) {
  .freight-integration-hub .integration-status-list {
    grid-template-columns: 1fr;
  }

  .freight-connector-form .compact-choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .freight-capacity-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .freight-capacity-row > span:nth-child(2),
  .freight-capacity-row > span:nth-child(3) {
    grid-column: 1 / -1;
  }

  .freight-match-row,
  .freight-tariff-form,
  .freight-route-form,
  .freight-auto-bid-fields .compact-form,
  .freight-waybill-grid {
    grid-template-columns: 1fr;
  }
}

.customer-freight-card {
  border: 1px solid rgba(255, 130, 0, 0.3);
  border-radius: 8px;
  padding: 10px;
}

.customer-freight-card > summary {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.inline-time-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.transport-regie-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(420px, 1.15fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
}

.transport-regie-layout .compact-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.transport-regie-layout .compact-form label {
  min-width: 0;
  font-size: 12px;
}

.transport-regie-layout .compact-form input {
  min-height: 38px;
}

.transport-regie-layout .compact-form .wide {
  grid-column: 1 / -1;
}

.transport-regie-result {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.transport-regie-result > [data-transport-estimate] {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.transport-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.transport-result-grid article {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(137, 190, 255, 0.22);
  border-radius: 8px;
  background: rgba(7, 24, 43, 0.74);
}

.transport-result-grid article strong,
.transport-result-grid article span {
  display: block;
}

.transport-result-grid article strong {
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.transport-result-grid article span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.transport-cost-strip,
.transport-regie-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.transport-cost-strip span,
.transport-regie-checks span {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(241, 247, 255, 0.88);
  font-size: 12px;
  font-weight: 850;
}

.transport-cost-strip .income {
  border-color: rgba(34, 197, 94, 0.34);
  color: #bbf7d0;
}

.transport-cost-strip .cost {
  border-color: rgba(248, 113, 113, 0.26);
  color: #fecaca;
}

.transport-rule-box {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(4, 18, 34, 0.72);
}

.transport-rule-box.warning {
  border-color: rgba(255, 130, 0, 0.42);
  background: rgba(255, 130, 0, 0.12);
}

.transport-rule-box.ok {
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.08);
}

.transport-rule-box strong {
  color: #fff;
}

.transport-rule-box p,
.transport-rule-box small {
  color: rgba(240, 247, 255, 0.78);
  line-height: 1.35;
}

.transport-saved-plans {
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid rgba(137, 190, 255, 0.22);
  min-width: 0;
}

.transport-plan-list {
  display: grid;
  gap: 8px;
}

.transport-plan-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(137, 190, 255, 0.24);
  border-radius: 8px;
  background: rgba(7, 24, 43, 0.72);
}

.transport-plan-card strong,
.transport-plan-card span {
  display: block;
}

.transport-plan-card strong {
  color: #fff;
}

.transport-plan-card span {
  color: var(--muted);
  font-size: 0.82rem;
}

.transport-plan-meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 2px 10px;
  align-items: baseline;
  text-align: right;
}

.transport-plan-meta b {
  color: var(--orange);
}

@media (max-width: 980px) {
  .transport-regie-layout,
  .transport-regie-layout .compact-form,
  .transport-result-grid {
    grid-template-columns: 1fr;
  }

  .transport-plan-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .transport-plan-meta {
    text-align: left;
  }

  .freight-listing-form,
  .freight-bid-form,
  .freight-delivery-form,
  .freight-live-form,
  .freight-customer-grid,
  .freight-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .freight-card > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .freight-card > summary > :nth-child(2),
  .freight-card > summary > :nth-child(3),
  .freight-card > summary > :nth-child(5) {
    display: none;
  }
}

@media (max-width: 620px) {
  .freight-listing-form,
  .freight-bid-form,
  .freight-delivery-form,
  .freight-customer-grid,
  .freight-detail-grid,
  .freight-kpis,
  .freight-settlement {
    grid-template-columns: 1fr;
  }

  .freight-optimizer-summary,
  .freight-optimizer-row,
  .freight-live-actions {
    grid-template-columns: 1fr;
  }

  .freight-bid-row {
    grid-template-columns: 1fr auto;
  }

  .freight-access-strip {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .freight-form-section > .freight-access-form {
    grid-template-columns: 1fr;
  }
}

.employment-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 130, 0, 0.18);
  border-radius: 8px;
  background: rgba(8, 31, 56, 0.78);
}

.employment-panel > summary {
  cursor: pointer;
}

.policy-note {
  padding: 9px 10px;
  border: 1px solid rgba(255, 130, 0, 0.28);
  border-radius: 7px;
  background: rgba(255, 130, 0, 0.11);
  color: #ffe3c1;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.employment-match-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.employment-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.055);
}

.employment-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.employment-card strong {
  color: #fff;
  font-size: 14px;
  font-weight: 950;
}

.employment-card span,
.employment-card small {
  color: rgba(238, 245, 251, 0.78);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.contact-request-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.contact-request-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.contact-request-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.contact-request-card.urgent {
  border-color: rgba(255, 130, 0, 0.5);
  background: rgba(255, 130, 0, 0.1);
}

.contact-request-card div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.contact-request-card strong {
  color: #fff;
  font-size: 15px;
  font-weight: 950;
}

.contact-request-card span,
.contact-request-card small,
.contact-request-card p {
  margin: 0;
  color: rgba(238, 245, 251, 0.78);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.contact-request-actions {
  display: flex !important;
  gap: 7px;
  align-items: center;
}

.incident-report-form,
.field-incident-panel {
  border: 1px solid rgba(255, 130, 0, 0.34);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 130, 0, 0.12), rgba(8, 31, 55, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.incident-report-head {
  display: grid;
  gap: 4px;
  padding: 8px 9px;
  border-radius: 8px;
  background: rgba(255, 130, 0, 0.12);
}

.incident-report-head strong,
.field-incident-card strong {
  color: #fff;
}

.incident-report-head span,
.field-incident-card span,
.field-incident-card small,
.field-incident-card p {
  color: rgba(238, 245, 251, 0.78);
}

.incident-stepper {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.incident-step-status {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.incident-step-status span {
  color: #ffb15c;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.incident-step-status strong {
  color: #fff;
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 950;
  line-height: 1.05;
  text-align: right;
}

.incident-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.incident-progress span {
  display: block;
  width: 20%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8200, #ffb15c);
  transition: width 0.18s ease;
}

.incident-step {
  display: none;
  gap: 12px;
  min-width: 0;
}

.incident-step.active {
  display: grid;
}

.incident-choice-grid,
.incident-location-modes,
.incident-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  min-width: 0;
}

.incident-choice-grid.priority {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.incident-choice {
  min-height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.075);
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
  padding: 10px;
  cursor: pointer;
  text-align: left;
}

.incident-choice.active {
  border-color: rgba(255, 130, 0, 0.86);
  background: linear-gradient(145deg, rgba(255, 130, 0, 0.34), rgba(255, 130, 0, 0.16));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.incident-other-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(255, 130, 0, 0.24);
  border-radius: 8px;
  background: rgba(255, 130, 0, 0.08);
}

.incident-other-field[hidden] {
  display: none !important;
}

.incident-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.incident-step-actions.submit {
  position: sticky;
  bottom: 8px;
  z-index: 3;
  padding-top: 6px;
  background: linear-gradient(180deg, rgba(8, 31, 55, 0), rgba(8, 31, 55, 0.96) 38%);
}

.incident-step-actions .button,
.incident-live-location-control {
  min-height: 48px;
}

.incident-report-form .muted-control input {
  opacity: 0.78;
}

.incident-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.incident-actions legend {
  padding: 0 6px;
  color: #ffb15c;
  font-size: 12px;
  font-weight: 950;
}

.incident-actions label {
  display: flex;
  gap: 7px;
  align-items: center;
  min-height: 30px;
  font-size: 12px;
}

.incident-quick-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.incident-quick-types button {
  min-height: 31px;
  border: 1px solid rgba(255, 130, 0, 0.35);
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 9px;
  cursor: pointer;
}

.incident-quick-types button.active {
  background: #ff8200;
  color: #061a33;
}

.field-incident-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.field-incident-list {
  display: grid;
  gap: 8px;
}

.field-incident-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(255, 130, 0, 0.26);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.field-incident-card > div,
.field-incident-action-form {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.incident-quick-card {
  border-color: rgba(255, 130, 0, 0.44) !important;
  background: rgba(255, 130, 0, 0.11) !important;
}

.incident-quick-card .button.danger {
  background: #ff8200 !important;
  color: #06111f !important;
  border-color: #ffb15c !important;
  box-shadow: 0 10px 22px rgba(255, 130, 0, 0.24);
  font-weight: 800;
}

.incident-quick-card .button.danger:hover,
.incident-quick-card .button.danger:focus-visible {
  background: #ff9b2f !important;
  color: #06111f !important;
  border-color: #ffd0a0 !important;
}

.workorder-issue-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-soft);
}

.workorder-issue-action strong,
.workorder-issue-action span {
  display: block;
}

.workorder-issue-action span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.84rem;
}

.workorder-issue-action.active {
  border-color: rgba(255, 130, 0, 0.45);
  background: rgba(255, 130, 0, 0.1);
}

.workorder-intake-block {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(255, 139, 26, 0.42);
  border-radius: 12px;
  background: rgba(255, 139, 26, 0.12);
}

.workorder-intake-block strong {
  display: block;
  color: var(--accent);
  font-weight: 950;
}

.workorder-intake-block span,
.workorder-intake-block p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.38;
}

.workorder-intake-missing {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workorder-intake-missing b {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 139, 26, 0.18);
  color: var(--text);
  font-size: 11px;
}

.workorder-issue-compact {
  display: block;
  padding: 0;
  overflow: hidden;
}

.workorder-issue-compact summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.workorder-issue-compact summary::-webkit-details-marker {
  display: none;
}

.workorder-issue-compact summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  font-weight: 900;
}

.workorder-issue-compact[open] summary::after {
  content: "-";
}

.workorder-issue-compact small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.workorder-issue-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.workorder-issue-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.completion-review-head,
.completion-review-wait {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-soft);
}

.completion-review-head span,
.completion-review-wait span {
  color: var(--muted);
  font-size: 0.86rem;
}

.completion-review-wait.done {
  border-color: rgba(73, 190, 137, 0.42);
  background: rgba(73, 190, 137, 0.1);
}

.planning-publication-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-soft);
}

.planning-publication-check span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.2;
  background: var(--surface);
  color: var(--text);
}

.planning-publication-check span b {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.68rem;
}

.planning-publication-check span.ok b {
  background: rgba(73, 190, 137, 0.18);
  color: #1d7d59;
}

.planning-publication-check span.warn b {
  background: rgba(255, 130, 0, 0.18);
  color: #a55000;
}

.planning-publication-check small {
  flex-basis: 100%;
  color: var(--muted);
}

.planning-publication-check.ready {
  border-color: rgba(73, 190, 137, 0.35);
}

.incident-timeline-mini {
  display: grid;
  gap: 3px;
  padding: 6px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.workorder-incident-card {
  display: grid;
  gap: 9px;
  margin: 10px 0;
  padding: 11px;
  border: 1px solid rgba(255, 130, 0, 0.3);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 130, 0, 0.1), rgba(8, 31, 55, 0.86));
}

.workorder-incident-card > summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}

.workorder-incident-card > summary small,
.workorder-incident-list span,
.workorder-incident-list small,
.workorder-incident-list p {
  color: rgba(238, 245, 251, 0.76);
}

.workorder-incident-list {
  display: grid;
  gap: 7px;
}

.workorder-incident-list article {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.workorder-incident-list strong {
  color: #ffb15c;
}

@media (max-width: 820px) {
  .field-incident-card {
    grid-template-columns: 1fr;
  }

  .incident-report-form {
    padding: 10px;
  }

  .incident-step-status {
    display: grid;
    align-items: start;
  }

  .incident-step-status strong {
    text-align: left;
  }

  .incident-choice-grid,
  .incident-location-modes,
  .incident-toggle-grid,
  .incident-choice-grid.priority {
    grid-template-columns: 1fr;
  }

  .incident-other-field {
    grid-template-columns: 1fr;
  }

  .incident-step-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.emergency-broadcast-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 9, 18, 0.88);
  backdrop-filter: blur(8px);
}

.emergency-broadcast-card {
  width: min(720px, 100%);
  border: 2px solid #ff8200;
  border-radius: 14px;
  background: linear-gradient(145deg, #170b06, #071c31 62%, #06111f);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: clamp(22px, 4vw, 42px);
  animation: emergency-attention-pulse 1.8s ease-in-out infinite;
}

@keyframes emergency-attention-pulse {
  0%,
  100% {
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55), 0 0 0 rgba(255, 130, 0, 0);
  }

  50% {
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55), 0 0 34px rgba(255, 130, 0, 0.55);
  }
}

.emergency-broadcast-top,
.emergency-broadcast-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.86rem;
}

.emergency-broadcast-top strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  border-radius: 999px;
  background: #ff8200;
  color: #06111f;
  padding: 8px 14px;
  font-weight: 900;
}

.emergency-broadcast-card h2 {
  margin: 22px 0 12px;
  color: #ff9d32;
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.emergency-broadcast-message {
  margin: 0;
  color: #fff;
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  line-height: 1.45;
  font-weight: 800;
}

.emergency-broadcast-instruction {
  margin: 18px 0;
  border-left: 4px solid #ff8200;
  padding: 12px 0 12px 16px;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.45;
}

.emergency-swipe-confirm {
  width: 100%;
  margin-top: 22px;
  border: 0;
  border-radius: 12px;
  background: #ff8200;
  color: #06111f;
  padding: 16px 18px;
  font-weight: 900;
  cursor: pointer;
}

.emergency-safe-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.emergency-safe-actions .emergency-swipe-confirm {
  margin-top: 0;
}

.emergency-swipe-confirm.safe {
  background: #7bd88f;
  color: #06111f;
}

.emergency-swipe-confirm.help {
  background: #ff8200;
  color: #06111f;
}

.emergency-location-hint {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
}

.emergency-scope-picker,
.communication-route-grid,
.contact-route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.contact-route-section {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.profix-backup-section {
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 14px;
}

.profix-backup-section .contact-route-card {
  border-color: rgba(255, 130, 0, 0.48);
  background: rgba(255, 130, 0, 0.1);
}

.communication-route-grid {
  margin-bottom: 16px;
}

.emergency-scope-option,
.communication-route-card,
.contact-route-card {
  min-height: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.emergency-scope-option.active,
.contact-route-card.active,
.communication-route-card:hover,
.contact-route-card:hover {
  border-color: rgba(255, 130, 0, 0.82);
  background: rgba(255, 130, 0, 0.14);
}

.emergency-scope-option strong,
.communication-route-card strong,
.contact-route-card strong {
  display: block;
  color: var(--text);
  font-weight: 900;
}

.communication-route-card span,
.contact-route-card span {
  display: block;
  margin-top: 4px;
  color: #ffad55;
  font-size: 0.88rem;
  font-weight: 800;
}

.emergency-scope-option small,
.communication-route-card small,
.contact-route-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.emergency-scope-fallback {
  display: none;
}

.admin-emergency-panel,
.emergency-broadcast-form {
  border: 1px solid rgba(255, 130, 0, 0.36);
  border-radius: 10px;
  background: rgba(8, 28, 48, 0.78);
  padding: 14px;
}

.admin-emergency-panel {
  margin-bottom: 16px;
}

.emergency-response-panel {
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(8, 28, 48, 0.72);
  padding: 14px;
}

.emergency-response-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.emergency-response-list article {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 12px;
}

.emergency-response-list article.needs-help {
  border-color: rgba(255, 72, 72, 0.8);
  background: rgba(255, 72, 72, 0.12);
}

.emergency-response-list article.safe {
  border-color: rgba(123, 216, 143, 0.45);
}

.emergency-response-list strong {
  color: #fff;
}

.emergency-response-list span,
.emergency-response-list small {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.35;
}

.emergency-broadcast-form {
  margin-top: 12px;
}

.emergency-broadcast-form [hidden] {
  display: none !important;
}

.emergency-broadcast-form .button.danger,
.button.danger {
  background: #ff8200;
  color: #06111f;
  border-color: #ff8200;
}

.emergency-history {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.emergency-history article {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  padding: 10px 12px;
}

.emergency-history article span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.86rem;
}

@media (max-width: 760px) {
  .employment-card,
  .contact-request-card {
    grid-template-columns: 1fr;
  }

  .contact-request-actions {
    justify-content: stretch;
  }

  .emergency-safe-actions {
    grid-template-columns: 1fr;
  }
}

/* Admin compact workspaces: keep every role/workspace readable without overlong menus. */
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar {
  min-height: 62px !important;
  padding: 8px 18px !important;
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .brand {
  min-height: 42px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .brand img {
  max-height: 42px !important;
  width: auto !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar nav {
  gap: 7px !important;
  justify-self: end !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(72px, 1fr)) !important;
  gap: 5px !important;
  margin: 0 !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card {
  min-height: 36px !important;
  height: 36px !important;
  padding: 4px 7px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  border: 1px solid var(--pf24-admin-line) !important;
  box-shadow: none !important;
  color: var(--pf24-admin-text) !important;
  display: grid !important;
  align-content: center !important;
  gap: 1px !important;
  text-align: left !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card span {
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  color: var(--pf24-admin-text) !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card strong {
  font-size: 9.5px !important;
  line-height: 1.05 !important;
  font-weight: 560 !important;
  color: var(--pf24-admin-muted) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar-assistant-actions .voice-menu-icon-button {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .language-select {
  min-height: 36px !important;
  height: 36px !important;
  width: 82px !important;
  padding: 4px 22px 4px 10px !important;
  font-size: 12px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar :where(.settings-toggle, .settings-button, button[aria-label*="instelling"], button[aria-label*="Instelling"]) {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 10px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
  top: 72px !important;
  max-height: calc(100dvh - 88px) !important;
  padding: 7px !important;
  gap: 4px !important;
  border-radius: 8px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-workspace {
  gap: 4px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .system-switch {
  gap: 4px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .system-switch label {
  display: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .system-switch select {
  width: 100% !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 3px 22px 3px 7px !important;
  font-size: 11px !important;
  font-weight: 620 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-caption {
  padding: 3px 1px 1px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(
  a[data-admin-tab],
  .admin-nav-direct,
  .screen-switcher > summary,
  .portal-sidebar-logout
) {
  min-height: 26px !important;
  height: 26px !important;
  padding: 3px 6px !important;
  gap: 6px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 560 !important;
  white-space: nowrap !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(
  a[data-admin-tab] span,
  .admin-nav-direct span,
  .screen-switcher > summary span,
  .portal-sidebar-logout span
) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(svg, i[data-lucide]) {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct-actions {
  padding-top: 2px !important;
  border-top: 1px solid var(--pf24-admin-line) !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct-actions .admin-nav-direct b {
  min-width: 19px !important;
  padding: 1px 5px !important;
  font-size: 10px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-communication {
  display: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .dashboard > #metrics.metrics {
  display: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .cockpit-kpis .summary-card {
  min-height: 52px !important;
  padding: 8px 10px !important;
  border-radius: 7px !important;
  text-align: left !important;
  align-content: center !important;
  gap: 2px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .cockpit-kpis .summary-card span {
  font-size: 13px !important;
  line-height: 1.05 !important;
  font-weight: 600 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .cockpit-kpis .summary-card strong {
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 650 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-cockpit {
  gap: 10px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-cockpit.wide {
  padding: 12px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .cockpit-head {
  grid-template-columns: minmax(0, 1fr) minmax(220px, .9fr) !important;
  gap: 10px !important;
  padding: 12px !important;
  border-radius: 7px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .cockpit-head h2,
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) #overviewPanel h2 {
  font-size: 18px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .cockpit-head p,
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) #overviewPanel p {
  font-size: 12px !important;
  line-height: 1.3 !important;
  margin: 2px 0 0 !important;
  color: var(--pf24-admin-muted) !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .cockpit-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) :where(.action-center, .daily-priority, .action-dossier, .action-row, .launch-readiness, .trend-dashboard) {
  border-color: var(--pf24-admin-line) !important;
  background: #ffffff !important;
  color: var(--pf24-admin-text) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04) !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) :where(.action-center *, .daily-priority *, .action-dossier *, .action-row *, .launch-readiness *, .trend-dashboard *) {
  color: inherit !important;
  text-shadow: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) :where(.action-center p, .daily-priority span, .daily-priority small, .daily-priority em, .action-row small) {
  color: var(--pf24-admin-muted) !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .action-center {
  padding: 12px !important;
  border-radius: 7px !important;
  gap: 8px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .daily-priority {
  min-height: 54px !important;
  padding: 9px 10px !important;
  border-radius: 7px !important;
}

@media (max-width: 1280px) {
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar {
    grid-template-columns: 190px minmax(0, 1fr) auto !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics {
    grid-template-columns: repeat(3, minmax(70px, 1fr)) !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .cockpit-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
    grid-template-columns: 1fr !important;
    padding: 8px !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
    position: static !important;
    max-height: none !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics,
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .cockpit-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar {
    min-height: 54px !important;
    padding: 7px 10px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .brand img {
    max-height: 30px !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar-assistant-actions .voice-menu-icon-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .language-select {
    width: 64px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    order: 3 !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card:nth-child(n+4) {
    display: none !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .cockpit-kpis {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 380px) {
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics,
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .cockpit-kpis {
    grid-template-columns: 1fr !important;
  }
}

/* Voorraadbalans */
.warehouse-balance-card {
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}

.warehouse-balance-card > summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
}

.warehouse-balance-card > summary span {
  font-weight: 800;
}

.warehouse-balance-card > summary small {
  color: var(--muted);
}

.warehouse-balance-start,
.warehouse-balance-line {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px 12px;
}

.warehouse-balance-line label,
.warehouse-balance-start label {
  display: grid;
  gap: 4px;
}

.warehouse-balance-line .wide,
.warehouse-balance-line .form-message {
  grid-column: span 2;
}

.warehouse-balance-line output {
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
}

.warehouse-balance-lines {
  display: grid;
  gap: 5px;
  padding: 0 12px 12px;
}

.warehouse-balance-lines > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.warehouse-balance-lines > span small {
  grid-column: 1;
}

.warehouse-balance-lines > span b {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

/* Zelfscan gebruikt dezelfde catalogus en betaling, maar zonder beheerinterface. */
.zelfscanapp-entry.portal-active > .topbar {
  display: none;
}

body.zelfscanapp-entry.portal-active,
body.zelfscanapp-entry.portal-active .admin-shell,
body.zelfscanapp-entry.portal-active #portalDashboard {
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
}

.selfscan-app {
  min-height: 100dvh;
  color: #122033;
  background: #eef3f6;
}

.selfscan-head {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 18px;
  color: #f7fbff;
  background: #071827;
}

.selfscan-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.selfscan-head .selfscan-head-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.selfscan-head-actions > span {
  font-size: 13px;
  font-weight: 800;
}

.selfscan-head img {
  width: 132px;
  height: 42px;
  object-fit: contain;
  padding: 4px;
  border-radius: 4px;
  background: #f7fbff;
}

.selfscan-head button {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 6px;
  color: #f7fbff;
  background: rgba(255, 255, 255, .08);
  font-weight: 800;
}

.selfscan-main {
  min-height: calc(100dvh - 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
}

.selfscan-catalog {
  min-width: 0;
  padding: 20px;
}

.selfscan-intro h1 {
  margin: 0;
  font-size: 28px;
}

.selfscan-intro p {
  margin: 4px 0 16px;
  color: #526274;
}

.selfscan-scan-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: end;
}

.selfscan-scan-form label {
  display: grid;
  gap: 4px;
}

.selfscan-scan-form input,
.selfscan-scan-form button {
  min-height: 48px;
}

.selfscan-scan-form .form-message {
  grid-column: 1 / -1;
}

.selfscan-camera {
  width: min(420px, 100%);
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #bdcbd6;
  border-radius: 6px;
  background: #f8fbfd;
}

.selfscan-camera > div {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: #0a1118;
}

.selfscan-camera video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selfscan-camera > div > span {
  position: absolute;
  inset: 28% 10%;
  border: 3px solid #ff8200;
  border-radius: 6px;
}

.selfscan-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 8px;
}

.selfscan-products button {
  min-height: 96px;
  display: grid;
  align-content: space-between;
  gap: 4px;
  padding: 12px;
  border: 1px solid #c3d0da;
  border-radius: 6px;
  color: #122033;
  background: #f8fbfd;
  text-align: left;
}

.selfscan-products button b {
  color: #cc5f00;
  font-size: 18px;
}

.selfscan-basket {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-left: 1px solid #c3d0da;
  background: #f8fbfd;
}

.selfscan-basket > header,
.selfscan-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.selfscan-lines {
  flex: 1 1 auto;
  min-height: 160px;
  overflow-y: auto;
}

.selfscan-lines > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 32px;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #d5dfe6;
}

.selfscan-lines button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  color: #7c2430;
  background: #f6e5e8;
}

.selfscan-total {
  padding-top: 10px;
  border-top: 2px solid #122033;
  font-size: 22px;
}

.selfscan-pay {
  min-height: 58px;
  border: 0;
  border-radius: 6px;
  color: #071827;
  background: #ff8200;
  font-size: 18px;
  font-weight: 900;
}

.selfscan-empty {
  grid-column: 1 / -1;
  margin: 8px 0;
  padding: 16px;
  border: 1px dashed #9caebb;
  border-radius: 6px;
  color: #33485a;
  background: #f8fbfd;
}

.selfscan-settings {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(5, 17, 27, .72);
}

.selfscan-settings[hidden] {
  display: none;
}

.selfscan-settings-dialog {
  width: min(760px, 100%);
  max-height: min(780px, calc(100dvh - 32px));
  overflow-y: auto;
  padding: 18px;
  border-radius: 8px;
  color: #122033;
  background: #f8fbfd;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .28);
}

.selfscan-settings-dialog > header,
.selfscan-settings-dialog form {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.selfscan-settings-dialog h2,
.selfscan-settings-dialog h3 {
  margin: 0;
}

.selfscan-settings-dialog > header > button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: #122033;
  background: #e3ebf0;
  font-size: 24px;
}

.selfscan-settings-dialog fieldset {
  margin: 16px 0;
  border: 1px solid #bdcbd6;
}

.selfscan-profile-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.selfscan-profile-options button {
  min-height: 56px;
  border: 1px solid #aebdca;
  border-radius: 6px;
  color: #122033;
  background: #fff;
  font-weight: 800;
}

.selfscan-profile-options button.active {
  border-color: #a64600;
  color: #071827;
  background: #ffb15c;
}

.selfscan-settings-dialog form label {
  flex: 1 1 auto;
  display: grid;
  gap: 4px;
}

.selfscan-force-check {
  margin-top: 10px;
}

.pos-v2-selfscan-controls > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, auto);
  gap: 6px;
  align-items: center;
}

.pos-v2-selfscan-controls > span > :where(b, small, input) {
  grid-column: 1 / -1;
}

.selfscan-register-overview {
  margin-top: 18px;
}

.selfscan-register-overview > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.selfscan-register-overview article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  padding: 10px;
  border: 1px solid #c3d0da;
  border-radius: 6px;
  background: #fff;
}

.selfscan-register-overview article strong,
.selfscan-register-overview article small {
  grid-column: 1 / -1;
}

.professional-admin-registers {
  border-top: 1px solid var(--line, #c3d0da);
}

.professional-admin-registers > summary {
  padding: 7px 0;
  cursor: pointer;
  font-weight: 800;
}

.professional-admin-registers > div,
.professional-admin-registers > div > span {
  display: grid;
  gap: 3px;
}

.professional-admin-registers > div > span {
  padding: 6px 0;
  border-top: 1px solid var(--line, #d5dfe6);
}

.privacy-rights-panel {
  margin-top: 12px;
  border: 1px solid var(--line, #c3d0da);
  border-radius: 6px;
  background: var(--panel, #f8fbfd);
}

.privacy-rights-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
}

.privacy-rights-panel > summary > span,
.privacy-request-status > div,
.privacy-request-history span {
  display: grid;
  gap: 2px;
}

.privacy-rights-panel > summary small,
.privacy-request-status small,
.privacy-request-history small {
  color: var(--muted, #526274);
}

.privacy-rights-panel > summary > b {
  font-size: 12px;
}

.privacy-request-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--line, #c3d0da);
}

.privacy-request-form label {
  display: grid;
  gap: 4px;
}

.privacy-request-form .wide,
.privacy-request-form .form-message {
  grid-column: 1 / -1;
}

.privacy-request-form .checkbox-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--line, #c3d0da);
  border-radius: 6px;
  background: var(--panel-soft, #f8fbfd);
  color: var(--ink, #14263a);
  line-height: 1.35;
}

.privacy-request-form .checkbox-line input {
  flex: 0 0 auto;
  margin-top: 2px;
}

.privacy-request-form .privacy-request-submit {
  grid-column: 1 / -1;
  justify-self: start;
}

.privacy-request-status,
.privacy-request-history {
  margin: 0 12px 12px;
  padding: 10px;
  border-top: 1px solid var(--line, #c3d0da);
}

.privacy-request-history span {
  padding: 6px 0;
  border-top: 1px solid var(--line, #d5dfe6);
}

.privacy-admin-list {
  display: grid;
  gap: 7px;
}

.privacy-admin-list > article {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, .5fr) minmax(240px, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line, #c3d0da);
  border-radius: 6px;
  background: var(--panel-soft, #f8fbfd);
}

.privacy-admin-list > article > div {
  display: grid;
  gap: 2px;
}

.privacy-admin-list > article small {
  color: var(--muted, #526274);
}

/* Dynamische viewport en veilige onderruimte: onderknoppen/footer blijven bereikbaar. */
body:has(> footer) {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body:has(> footer) > footer {
  width: 100%;
  margin-top: auto;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.portal-active .admin-shell,
.portal-active #portalDashboard.dashboard {
  min-height: 100dvh !important;
}

@media (min-width: 720px) {
  .portal-active #portalDashboard > .portal-section-nav,
  .portal-active #portalDashboard > .professional-section-nav,
  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
    min-height: 100dvh !important;
    height: 100dvh !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
}

.admin-body:has(#dashboard:not(.hidden)) .admin-page-footer {
  bottom: env(safe-area-inset-bottom) !important;
}

@media (max-width: 760px) {
  .warehouse-balance-start,
  .warehouse-balance-line {
    grid-template-columns: 1fr 1fr;
  }

  .warehouse-balance-line .wide,
  .warehouse-balance-line .form-message {
    grid-column: 1 / -1;
  }

  .selfscan-main {
    grid-template-columns: 1fr;
  }

  .selfscan-catalog {
    padding: 12px;
  }

  .selfscan-basket {
    border-top: 1px solid #c3d0da;
    border-left: 0;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .selfscan-scan-form {
    grid-template-columns: 1fr 1fr;
  }

  .selfscan-scan-form label {
    grid-column: 1 / -1;
  }

  .selfscan-profile-options,
  .selfscan-register-overview > div {
    grid-template-columns: 1fr 1fr;
  }

  .selfscan-settings-dialog form {
    align-items: stretch;
    flex-direction: column;
  }

  .privacy-request-form {
    grid-template-columns: 1fr;
  }

  .privacy-request-form > * {
    grid-column: 1 !important;
  }

  .privacy-admin-list > article {
    grid-template-columns: 1fr 1fr;
  }

  .privacy-admin-list > article > div,
  .privacy-admin-list > article > input {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .public-site.signup-look form {
    grid-template-columns: 1fr;
  }
}

/* Final theme, dropdown and temporary style guardrail - keep at file end. */
:root {
  --pf24-event-accent: #ff8200;
}

.theme-select-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.theme-select-field {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  color: rgba(247, 239, 229, 0.84) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.theme-select-field select,
.style-image-picker summary {
  min-height: 32px !important;
  padding: 6px 28px 6px 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 7px !important;
  background-color: #0f2438 !important;
  color: #f8fafc !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.style-image-picker {
  position: relative;
  min-width: 0;
}

.style-image-picker summary {
  cursor: pointer;
  list-style: none;
}

.style-image-picker summary::-webkit-details-marker {
  display: none;
}

.style-image-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 8000;
  display: grid;
  gap: 8px;
  width: min(260px, 82vw);
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(4, 16, 29, 0.98);
  color: #f8fafc;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

.style-image-panel label {
  display: grid;
  gap: 6px;
  color: #f8fafc !important;
  font-size: 12px;
  font-weight: 900;
}

.style-image-panel input[type="file"],
.style-image-panel button {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  font-size: 12px;
  font-weight: 900;
}

:where(select option, select optgroup) {
  background-color: #f8fafc !important;
  color: #061a33 !important;
}

:where(select option:checked) {
  background-color: #ffb15a !important;
  color: #061a33 !important;
}

:where(.admin-body, .portal-active, body.workscreen-mode) :where(select, input[list]) {
  background-color: rgba(2, 13, 25, 0.72) !important;
  color: #f8fafc !important;
  border-color: rgba(184, 207, 230, 0.24) !important;
}

:where(.admin-more-flyout, .screen-switcher-grid, .nav-dropdown-panel) {
  background: rgba(4, 16, 29, 0.98) !important;
  color: #f8fafc !important;
}

:where(.admin-more-flyout, .screen-switcher-grid, .nav-dropdown-panel) :where(a, button, span, strong, small) {
  color: #f8fafc !important;
}

:where(.button.primary, button.primary, .primary-action),
:where(.public-site .button.primary, .public-site button.primary) {
  color: #061a33 !important;
}

html[data-style-image="custom"] :where(.topbar, .portal-topbar) {
  background:
    linear-gradient(90deg, rgba(0, 31, 63, 0.94), rgba(0, 31, 63, 0.78)),
    var(--pf24-event-image) center / cover no-repeat !important;
  border-bottom-color: color-mix(in srgb, var(--pf24-event-accent) 48%, rgba(255, 255, 255, 0.18)) !important;
}

html[data-style-image="custom"] :where(.admin-tabs, .portal-section-nav, .professional-section-nav, .login-panel, .settings-card, .summary-card) {
  border-color: color-mix(in srgb, var(--pf24-event-accent) 26%, rgba(255, 255, 255, 0.12)) !important;
}

html[data-style-image="custom"] :where(.admin-tabs button.active, .portal-section-nav a.active, .professional-section-nav a.active, .button.primary, button.primary) {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pf24-event-accent) 70%, #ff8200), #ffb15a) !important;
  color: #061a33 !important;
}

html[data-theme="light"] body.admin-body,
html[data-theme="light"] body.portal-active,
html[data-theme="light"] body.workapp-entry,
html[data-theme="light"] body.klantapp-entry {
  --admin-bg: #f4f7fb;
  --admin-panel: #ffffff;
  --admin-panel-2: #eef4fa;
  --admin-text: #07182d;
  --pf24-text: #07182d;
  --pf24-muted: #526579;
  background: #f4f7fb !important;
  color: #07182d !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(.topbar, .portal-topbar) {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: rgba(6, 26, 51, 0.12) !important;
  color: #07182d !important;
}

html[data-theme="light"][data-style-image="custom"] :where(.admin-body, .portal-active) :where(.topbar, .portal-topbar) {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 252, 0.78)),
    var(--pf24-event-image) center / cover no-repeat !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(.admin-title, .topbar a, .portal-nav a, .site-nav a) {
  color: #07182d !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(.admin-shell, .dashboard) {
  background: #f4f7fb !important;
  color: #07182d !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-tabs,
html[data-theme="light"] .portal-active #portalDashboard > .portal-section-nav,
html[data-theme="light"] .portal-active #portalDashboard > .professional-section-nav {
  background: #ffffff !important;
  border-color: rgba(6, 26, 51, 0.12) !important;
  color: #07182d !important;
  box-shadow: 0 16px 42px rgba(6, 26, 51, 0.08) !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-tabs::before,
html[data-theme="light"] .portal-active #portalDashboard > .portal-section-nav::before,
html[data-theme="light"] .portal-active #portalDashboard > .professional-section-nav::before {
  background-color: #ffffff !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(
  .summary-card,
  .partners,
  .settings-card,
  .request-card,
  .customer-request-card,
  .workorder-card,
  .job-card,
  .planning-card,
  .wallet-row,
  .finance-card,
  .finance-row,
  .staff-card,
  .staff-time-card,
  .professional-cockpit article,
  .customer-cockpit article,
  .login-panel,
  .portal-panel,
  .card,
  .panel,
  details
) {
  background: #ffffff !important;
  border-color: rgba(6, 26, 51, 0.12) !important;
  color: #07182d !important;
  box-shadow: 0 12px 32px rgba(6, 26, 51, 0.07) !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(h1, h2, h3, h4, strong, label, legend, .field-label) {
  color: #07182d !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(p, small, span, em, .form-message, .settings-help, .empty) {
  color: #526579 !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(input, select, textarea, .search-input, .form-control) {
  background: #ffffff !important;
  color: #07182d !important;
  border-color: rgba(6, 26, 51, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(6, 26, 51, 0.03) !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(input, textarea)::placeholder {
  color: #74869a !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(.admin-tabs button, .portal-section-nav a, .professional-section-nav a, .screen-switcher summary, .admin-more-tabs summary, .sidebar-chat-compact, .portal-sidebar-logout, .admin-nav-screens button, .portal-workscreen-actions button) {
  background: #f7fafc !important;
  color: #07182d !important;
  border-color: rgba(6, 26, 51, 0.14) !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(.admin-tabs button.active, .portal-section-nav a.active, .professional-section-nav a.active, .screen-switcher[open] summary, .admin-more-tabs[open] summary) {
  background: rgba(255, 130, 0, 0.15) !important;
  color: #07182d !important;
  border-color: rgba(255, 130, 0, 0.48) !important;
}

html[data-theme="light"] :where(.admin-more-flyout, .screen-switcher-grid, .nav-dropdown-panel, .style-image-panel) {
  background: #ffffff !important;
  border-color: rgba(6, 26, 51, 0.14) !important;
  color: #07182d !important;
  box-shadow: 0 18px 45px rgba(6, 26, 51, 0.16) !important;
}

html[data-theme="light"] :where(.admin-more-flyout, .screen-switcher-grid, .nav-dropdown-panel, .style-image-panel) :where(a, button, span, strong, small, label) {
  color: #07182d !important;
}

html[data-theme="light"] .theme-select-field {
  color: #33475b !important;
}

html[data-theme="light"] .theme-select-field select,
html[data-theme="light"] .style-image-picker summary,
html[data-theme="light"] .style-image-panel input[type="file"],
html[data-theme="light"] .style-image-panel button {
  background-color: #ffffff !important;
  color: #07182d !important;
  border-color: rgba(6, 26, 51, 0.18) !important;
}

html[data-theme="light"] .business-lookup-result {
  background: rgba(255, 130, 0, 0.10) !important;
  color: #07182d !important;
}

html[data-theme="light"] .business-lookup-result span,
html[data-theme="light"] .business-lookup-results p {
  color: #526579 !important;
}

html[data-theme="light"] body.public-site:not(.signup-look) {
  background: #f4f7fb !important;
  color: #07182d !important;
}

html[data-theme="light"] body.public-site:not(.signup-look) :where(.topbar, .content-card, .audience-card, .pricing-card, .module-card, .package-card, .login-panel) {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #07182d !important;
  border-color: rgba(6, 26, 51, 0.12) !important;
}

html[data-theme="light"] body.public-site:not(.signup-look) :where(h1, h2, h3, strong, label, .topbar a, .site-nav a) {
  color: #07182d !important;
}

html[data-theme="light"] body.public-site:not(.signup-look) :where(p, small, span, li) {
  color: #526579 !important;
}

html[data-theme="light"] body.public-site:not(.signup-look) :where(input, select, textarea) {
  background: #ffffff !important;
  color: #07182d !important;
  border-color: rgba(6, 26, 51, 0.18) !important;
}

@media (max-width: 760px) {
  .theme-select-field span {
    display: none;
  }

  .theme-select-field select {
    max-width: 104px !important;
  }

  .style-image-picker summary {
    max-width: 78px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Theme and dropdown readability guardrail. Keep this block near the end so older polish layers cannot undo contrast. */
.theme-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: rgba(247, 239, 229, 0.84);
  font-size: 12px;
  font-weight: 900;
}

.theme-select-wrap span {
  white-space: nowrap;
}

.theme-select-wrap select {
  min-height: 32px !important;
  width: auto !important;
  max-width: 128px !important;
  padding: 6px 28px 6px 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 7px !important;
  background-color: #0f2438 !important;
  color: #f8fafc !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

:where(select option, select optgroup) {
  background-color: #f8fafc !important;
  color: #061a33 !important;
}

:where(select option:checked) {
  background-color: #ffb15a !important;
  color: #061a33 !important;
}

:where(.admin-body, .portal-active, body.workscreen-mode) :where(select, input[list]) {
  background-color: rgba(2, 13, 25, 0.72) !important;
  color: #f8fafc !important;
  border-color: rgba(184, 207, 230, 0.24) !important;
}

:where(.admin-more-flyout, .screen-switcher-grid, .nav-dropdown-panel) {
  background: rgba(4, 16, 29, 0.98) !important;
  color: #f8fafc !important;
}

:where(.admin-more-flyout, .screen-switcher-grid, .nav-dropdown-panel) :where(a, button, span, strong, small) {
  color: #f8fafc !important;
}

:where(.button.primary, button.primary, .primary-action),
:where(.public-site .button.primary, .public-site button.primary) {
  color: #061a33 !important;
}

html[data-theme="light"] body.admin-body,
html[data-theme="light"] body.portal-active,
html[data-theme="light"] body.workapp-entry,
html[data-theme="light"] body.klantapp-entry {
  --admin-bg: #f4f7fb;
  --admin-panel: #ffffff;
  --admin-panel-2: #eef4fa;
  --admin-text: #07182d;
  --pf24-text: #07182d;
  --pf24-muted: #526579;
  background: #f4f7fb !important;
  color: #07182d !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(.topbar, .portal-topbar) {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: rgba(6, 26, 51, 0.12) !important;
  color: #07182d !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(.admin-title, .topbar a, .portal-nav a, .site-nav a) {
  color: #07182d !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(.admin-shell, .dashboard) {
  background: #f4f7fb !important;
  color: #07182d !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-tabs,
html[data-theme="light"] .portal-active #portalDashboard > .portal-section-nav,
html[data-theme="light"] .portal-active #portalDashboard > .professional-section-nav {
  background: #ffffff !important;
  border-color: rgba(6, 26, 51, 0.12) !important;
  color: #07182d !important;
  box-shadow: 0 16px 42px rgba(6, 26, 51, 0.08) !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-tabs::before,
html[data-theme="light"] .portal-active #portalDashboard > .portal-section-nav::before,
html[data-theme="light"] .portal-active #portalDashboard > .professional-section-nav::before {
  background-color: #ffffff !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(
  .summary-card,
  .partners,
  .settings-card,
  .request-card,
  .customer-request-card,
  .workorder-card,
  .job-card,
  .planning-card,
  .wallet-row,
  .finance-card,
  .finance-row,
  .staff-card,
  .staff-time-card,
  .professional-cockpit article,
  .customer-cockpit article,
  .login-panel,
  .portal-panel,
  .card,
  .panel,
  details
) {
  background: #ffffff !important;
  border-color: rgba(6, 26, 51, 0.12) !important;
  color: #07182d !important;
  box-shadow: 0 12px 32px rgba(6, 26, 51, 0.07) !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(h1, h2, h3, h4, strong, label, legend, .field-label) {
  color: #07182d !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(p, small, span, em, .form-message, .settings-help, .empty) {
  color: #526579 !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(input, select, textarea, .search-input, .form-control) {
  background: #ffffff !important;
  color: #07182d !important;
  border-color: rgba(6, 26, 51, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(6, 26, 51, 0.03) !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(input, textarea)::placeholder {
  color: #74869a !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(.admin-tabs button, .portal-section-nav a, .professional-section-nav a, .screen-switcher summary, .admin-more-tabs summary, .sidebar-chat-compact, .portal-sidebar-logout, .admin-nav-screens button, .portal-workscreen-actions button) {
  background: #f7fafc !important;
  color: #07182d !important;
  border-color: rgba(6, 26, 51, 0.14) !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(.admin-tabs button.active, .portal-section-nav a.active, .professional-section-nav a.active, .screen-switcher[open] summary, .admin-more-tabs[open] summary) {
  background: rgba(255, 130, 0, 0.15) !important;
  color: #07182d !important;
  border-color: rgba(255, 130, 0, 0.48) !important;
}

html[data-theme="light"] :where(.admin-more-flyout, .screen-switcher-grid, .nav-dropdown-panel) {
  background: #ffffff !important;
  border-color: rgba(6, 26, 51, 0.14) !important;
  color: #07182d !important;
  box-shadow: 0 18px 45px rgba(6, 26, 51, 0.16) !important;
}

html[data-theme="light"] :where(.admin-more-flyout, .screen-switcher-grid, .nav-dropdown-panel) :where(a, button, span, strong, small) {
  color: #07182d !important;
}

html[data-theme="light"] .theme-select-wrap {
  color: #33475b;
}

html[data-theme="light"] .theme-select-wrap select {
  background-color: #ffffff !important;
  color: #07182d !important;
  border-color: rgba(6, 26, 51, 0.18) !important;
}

html[data-theme="light"] .business-lookup-result {
  background: rgba(255, 130, 0, 0.10) !important;
  color: #07182d !important;
}

html[data-theme="light"] .business-lookup-result span,
html[data-theme="light"] .business-lookup-results p {
  color: #526579 !important;
}

html[data-theme="light"] body.public-site:not(.signup-look) {
  background: #f4f7fb !important;
  color: #07182d !important;
}

html[data-theme="light"] body.public-site:not(.signup-look) :where(.topbar, .content-card, .audience-card, .pricing-card, .module-card, .package-card, .login-panel) {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #07182d !important;
  border-color: rgba(6, 26, 51, 0.12) !important;
}

html[data-theme="light"] body.public-site:not(.signup-look) :where(h1, h2, h3, strong, label, .topbar a, .site-nav a) {
  color: #07182d !important;
}

html[data-theme="light"] body.public-site:not(.signup-look) :where(p, small, span, li) {
  color: #526579 !important;
}

html[data-theme="light"] body.public-site:not(.signup-look) :where(input, select, textarea) {
  background: #ffffff !important;
  color: #07182d !important;
  border-color: rgba(6, 26, 51, 0.18) !important;
}

@media (max-width: 760px) {
  .theme-select-wrap span {
    display: none;
  }

  .theme-select-wrap select {
    max-width: 104px !important;
  }
}

/* Compacte werklaag en kaartfilters - 2026-07-28 */
.live-map-tools.owner-tools {
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(184, 207, 230, 0.12);
  border-radius: 10px;
  background: rgba(2, 13, 25, 0.28);
}

.live-map-tools.owner-tools button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  max-width: 220px;
}

.live-map-tools.owner-tools button span,
.servicecenter-map-row i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--owner-color, #ff8a00);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--owner-color, #ff8a00) 18%, transparent);
}

.servicecenter-map-pin {
  outline: 2px solid color-mix(in srgb, var(--owner-color, #ff8a00) 80%, transparent);
}

.servicecenter-live-map-card[data-live-map-owner-active]:not([data-live-map-owner-active="all"]) .owner-muted {
  opacity: 0.2;
  filter: grayscale(0.75);
}

.servicecenter-live-map-card[data-live-map-owner-active]:not([data-live-map-owner-active="all"]) .servicecenter-map-pin[data-map-owner],
.servicecenter-live-map-card[data-live-map-owner-active]:not([data-live-map-owner-active="all"]) .servicecenter-leaflet-pin[data-map-owner],
.servicecenter-live-map-card[data-live-map-owner-active]:not([data-live-map-owner-active="all"]) .servicecenter-map-row[data-map-owner] {
  transition: opacity .16s ease, filter .16s ease, transform .16s ease;
}

.servicecenter-map-row span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.servicecenter-action-modal .value-editor-panel,
.remote-hardware-editor {
  width: min(560px, calc(100vw - 28px));
}

.remote-hardware-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.remote-choice {
  display: grid !important;
  gap: 5px !important;
  min-width: 0;
  padding: 10px !important;
  border: 1px solid rgba(184, 207, 230, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.055);
  cursor: pointer;
}

.remote-choice input {
  width: 18px !important;
  height: 18px !important;
}

.remote-choice strong {
  color: #fff;
  font-size: 14px;
}

.remote-choice small {
  color: rgba(247, 239, 229, 0.7);
  font-size: 11px;
  line-height: 1.25;
}

.remote-choice:has(input:checked) {
  border-color: rgba(255, 130, 0, 0.62);
  background: rgba(255, 130, 0, 0.14);
}

.portal-active :where(textarea),
.admin-body:not(.login-entry) :where(textarea) {
  min-height: 72px;
  max-height: 168px;
}

.portal-active :where(.smart-intake-support textarea, .incident-report-form textarea, .field-incident-action-form textarea),
.admin-body:not(.login-entry) :where(.field-incident-action-form textarea) {
  min-height: 48px !important;
  max-height: 92px !important;
}

.portal-active :where(input, select, textarea),
.admin-body:not(.login-entry) :where(input, select, textarea) {
  min-width: 0 !important;
}

.portal-active :where(.button, button, .portal-nav-link, .professional-regie-item, .servicecenter-map-row),
.admin-body :where(.button, button, .servicecenter-map-row, .servicecenter-ticket-main) {
  min-width: 0;
}

.portal-active :where(.button, button) {
  overflow-wrap: anywhere;
}

.professional-regie-item,
.professional-servicecenter-ticket,
.servicecenter-ticket,
.job-card,
.planning-card,
.mobile-workday-card,
.mobile-workday-hero {
  overflow-wrap: anywhere;
}

.mobile-workday-actions {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
}

.mobile-workday-actions .button,
.mobile-workday-tabs button {
  min-width: 0 !important;
  white-space: normal !important;
}

@media (max-width: 760px) {
  .remote-hardware-choice-grid {
    grid-template-columns: 1fr;
  }

  .live-map-legend em {
    display: none;
  }

  .live-map-owner-select {
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: stretch;
  }

  .servicecenter-map-strip {
    grid-template-columns: 1fr !important;
  }

  .servicecenter-live-map {
    min-height: 300px;
  }

  .professional-cockpit,
  .customer-cockpit {
    grid-template-columns: 1fr !important;
  }

  .professional-regie-grid,
  .professional-servicecenter-lanes {
    grid-template-columns: 1fr !important;
  }
}

/* Public total-platform story */
.homepage-total-platform,
.pricing-value-strip {
  width: min(1120px, calc(100% - 32px));
  margin: 28px auto 0;
}

.homepage-total-platform {
  padding: 28px;
  border: 1px solid rgba(255, 133, 15, 0.24);
  border-radius: 18px;
  background: rgba(247, 244, 238, 0.96);
  color: #17202a;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
}

.homepage-total-platform h2 {
  margin: 0 0 10px;
  color: #061b31;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
}

.homepage-total-platform > p:not(.eyebrow) {
  max-width: 860px;
  margin: 0 0 20px;
  color: #334255;
  font-size: 1.05rem;
  line-height: 1.55;
}

.homepage-platform-grid,
.pricing-value-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.homepage-platform-grid article,
.pricing-value-strip article {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(6, 27, 49, 0.12);
  border-radius: 14px;
  background: #fff;
}

.homepage-platform-grid strong,
.pricing-value-strip strong {
  display: block;
  margin-bottom: 7px;
  color: #061b31;
  font-size: 1rem;
}

.homepage-platform-grid span,
.pricing-value-strip span {
  display: block;
  color: #516173;
  font-size: 0.92rem;
  line-height: 1.38;
}

.homepage-total-platform .button {
  margin-top: 18px;
}

.pricing-value-strip {
  margin-bottom: 18px;
}

.pricing-value-strip article {
  background: #f7f4ee;
  border-color: rgba(255, 133, 15, 0.22);
}

@media (max-width: 900px) {
  .homepage-platform-grid,
  .pricing-value-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .homepage-total-platform {
    padding: 20px;
  }

  .homepage-platform-grid,
  .pricing-value-strip {
    grid-template-columns: 1fr;
  }
}

/* Planning and construction module polish - 2026-07-28 */
.portal-active .planning-staff-readiness,
.portal-active .construction-form,
.portal-active .construction-project-card {
  border: 1px solid rgba(148, 163, 184, .24);
  background: linear-gradient(145deg, rgba(8, 30, 52, .96), rgba(7, 23, 39, .98));
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

.portal-active .planning-staff-readiness > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.portal-active .planning-readiness-grid,
.portal-active .construction-command-strip,
.portal-active .construction-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.portal-active .planning-readiness-grid span,
.portal-active .construction-command-strip span,
.portal-active .construction-status-grid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, .2);
  background: rgba(15, 42, 68, .72);
}

.portal-active .planning-readiness-grid strong,
.portal-active .construction-command-strip strong,
.portal-active .construction-status-grid strong {
  color: #fff7ed;
  font-size: .98rem;
}

.portal-active .planning-readiness-grid small,
.portal-active .construction-command-strip small,
.portal-active .construction-status-grid small {
  color: #bfd2e6;
  font-size: .78rem;
}

.portal-active .construction-form-grid,
.portal-active .construction-form-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
}

.portal-active .construction-form-grid .wide,
.portal-active .construction-form-columns fieldset {
  grid-column: span 2;
}

.portal-active .construction-form-columns {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  margin-top: 10px;
}

.portal-active .construction-form fieldset {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 8px;
  padding: 10px;
  background: rgba(4, 18, 32, .48);
}

.portal-active .construction-form legend {
  color: #ffb15c;
  font-weight: 800;
  padding: 0 6px;
}

.portal-active .construction-form :where(input, select) {
  width: 100%;
  min-width: 0;
}

.portal-active .construction-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.portal-active .construction-checks label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 130, 0, .11);
  border: 1px solid rgba(255, 130, 0, .24);
  color: #fff7ed;
  font-weight: 700;
}

.portal-active .construction-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.portal-active .construction-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

@media (max-width: 980px) {
  .portal-active .planning-readiness-grid,
  .portal-active .construction-command-strip,
  .portal-active .construction-status-grid,
  .portal-active .construction-form-grid,
  .portal-active .construction-form-columns {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .portal-active .planning-readiness-grid,
  .portal-active .construction-command-strip,
  .portal-active .construction-status-grid,
  .portal-active .construction-form-grid,
  .portal-active .construction-form-columns {
    grid-template-columns: 1fr;
  }

  .portal-active .construction-form-grid .wide,
  .portal-active .construction-form-columns fieldset {
    grid-column: auto;
  }
}

/* Servicecenter live kaart */
.servicecenter-live-map-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(184, 207, 230, 0.16);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(10, 32, 54, 0.92), rgba(4, 17, 30, 0.94));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.live-map-legend,
.live-map-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.live-map-legend span,
.live-map-tools button {
  min-height: 26px;
  padding: 4px 7px;
  border: 1px solid rgba(184, 207, 230, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(247, 239, 229, 0.84);
  font-size: 11px;
  font-weight: 900;
}

.live-map-legend {
  gap: 4px;
  justify-content: flex-end;
}

.live-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 10px;
}

.live-map-legend :is(i, em, b) {
  font: inherit;
  font-style: normal;
}

.live-map-legend i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.live-map-legend b {
  color: inherit;
}

.live-map-legend .emergency {
  color: #ff7772;
}

.live-map-owner-select {
  display: grid;
  grid-template-columns: auto minmax(180px, 300px);
  align-items: center;
  justify-content: end;
  gap: 7px;
  color: rgba(247, 239, 229, 0.72);
  font-size: 11px;
  font-weight: 850;
}

.live-map-owner-select select {
  min-height: 30px;
  padding: 4px 28px 4px 8px;
  border: 1px solid rgba(184, 207, 230, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
}

.live-map-tools button {
  cursor: pointer;
}

.live-map-tools button.active,
.live-map-tools button:hover,
.live-map-tools button:focus-visible {
  border-color: rgba(255, 130, 0, 0.58);
  background: rgba(255, 130, 0, 0.18);
  color: #fff;
  outline: none;
}

.live-map-legend .critical {
  color: #ffb4b4;
}

.live-map-legend .warning {
  color: #ffd29d;
}

.live-map-legend .active {
  color: #9ee8ff;
}

.live-map-legend .hardware {
  color: #bfe2ff;
}

.servicecenter-live-map {
  position: relative;
  min-height: clamp(230px, 32vw, 380px);
  overflow: hidden;
  border: 1px solid rgba(139, 198, 255, 0.18);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 18%, rgba(139, 198, 255, 0.20), transparent 34%),
    radial-gradient(circle at 38% 52%, rgba(255, 130, 0, 0.13), transparent 28%),
    linear-gradient(145deg, rgba(6, 34, 59, 0.96), rgba(3, 14, 26, 0.98));
}

.servicecenter-map-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: #dce7ec;
}

.servicecenter-live-map.leaflet-ready > .servicecenter-map-pin,
.servicecenter-live-map.leaflet-ready > .servicecenter-transit-pin {
  display: none;
}

.servicecenter-map-canvas .leaflet-control-attribution {
  font-size: 9px;
}

.servicecenter-leaflet-pin {
  display: grid !important;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #8bc6ff;
  color: #07182d;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
  transition: opacity .16s ease, filter .16s ease, transform .16s ease;
}

.servicecenter-leaflet-pin span {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
}

.servicecenter-leaflet-pin b {
  position: relative;
  z-index: 1;
  font-size: 8px;
  font-weight: 950;
}

.servicecenter-leaflet-pin.critical { background: #ff5f57; }
.servicecenter-leaflet-pin.warning { background: #ffad4d; }
.servicecenter-leaflet-pin.active { background: #54d7ff; }
.servicecenter-leaflet-pin.default { background: #8bc6ff; }

.servicecenter-leaflet-pin[data-map-kind="transit"] {
  display: none !important;
}

.servicecenter-map-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.7) contrast(1.02) brightness(0.82);
  pointer-events: none;
}

.servicecenter-map-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3, 14, 26, 0.08), rgba(3, 14, 26, 0.18)),
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(2, 13, 25, 0.16));
  pointer-events: none;
}

.servicecenter-live-map::before {
  content: none;
}

.servicecenter-live-map::after {
  content: none;
}

.map-region {
  position: absolute;
  z-index: 1;
  color: rgba(247, 239, 229, 0.42);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.map-region.north { left: 47%; top: 12%; }
.map-region.west { left: 28%; top: 40%; }
.map-region.middle { left: 48%; top: 50%; }
.map-region.south { left: 48%; top: 77%; }

.servicecenter-map-pin {
  position: absolute;
  z-index: 3;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 0;
  border-radius: 50% 50% 50% 6px;
  transform: rotate(-45deg);
  background: #8bc6ff;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.32);
  cursor: pointer;
}

.servicecenter-map-pin span,
.servicecenter-map-pin b {
  position: absolute;
  inset: 6px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(2, 13, 25, 0.88);
  color: #fff;
  font-size: 9px;
  font-weight: 950;
  transform: rotate(45deg);
}

.servicecenter-map-pin span {
  animation: mapPinPulse 1.8s ease-in-out infinite;
}

.servicecenter-map-pin.critical {
  background: #ff5f57;
}

.servicecenter-map-pin.warning {
  background: #ffad4d;
}

.servicecenter-map-pin.active {
  background: #54d7ff;
}

.servicecenter-map-pin[data-map-kind="hardware"] {
  background: #7cc1ff;
}

.servicecenter-map-pin[data-map-kind="emergency"] {
  background: #ff2f2f;
}

.servicecenter-map-pin[data-map-kind="hardware"] b {
  color: #bfe2ff;
}

.servicecenter-map-pin.default {
  background: #8bc6ff;
}

.map-provider-layer {
  position: absolute;
  z-index: 2;
  display: none;
  gap: 2px;
  min-width: 150px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 130, 0, 0.28);
  border-radius: 9px;
  background: rgba(2, 13, 25, 0.82);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.servicecenter-transit-pin {
  position: absolute;
  z-index: 4;
  display: none;
  min-width: 42px;
  min-height: 32px;
  margin: -16px 0 0 -21px;
  padding: 4px 7px;
  border: 1px solid rgba(94, 234, 212, 0.48);
  border-radius: 10px;
  background: rgba(2, 13, 25, 0.88);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30);
  cursor: pointer;
}

.servicecenter-transit-pin b,
.servicecenter-transit-pin span {
  display: block;
  line-height: 1.05;
}

.servicecenter-transit-pin b {
  color: #8ff7e8;
  font-size: 11px;
  font-weight: 950;
}

.servicecenter-transit-pin span {
  color: rgba(247, 239, 229, 0.72);
  font-size: 9px;
  font-weight: 850;
}

.map-provider-layer b {
  color: var(--orange);
  font-size: 12px;
}

.map-provider-layer span {
  color: rgba(247, 239, 229, 0.72);
  font-size: 11px;
  font-weight: 800;
}

.map-provider-layer.traffic {
  left: 11%;
  top: 24%;
}

.map-provider-layer.transit {
  right: 10%;
  bottom: 19%;
}

.servicecenter-live-map-card[data-live-map-filter-active="traffic"] .map-provider-layer.traffic,
.servicecenter-live-map-card[data-live-map-filter-active="transit"] .map-provider-layer.transit {
  display: grid;
}

.servicecenter-live-map-card[data-live-map-filter-active="transit"] .servicecenter-transit-pin {
  display: block;
}

.servicecenter-live-map-card[data-live-map-filter-active="transit"] .servicecenter-leaflet-pin[data-map-kind="transit"] {
  display: grid !important;
}

.servicecenter-live-map-card[data-live-map-filter-active="transit"] .servicecenter-leaflet-pin:not([data-map-kind="transit"]) {
  opacity: 0.18;
  filter: grayscale(1);
}

.servicecenter-live-map-card[data-live-map-filter-active="critical"] .servicecenter-map-pin:not([data-map-tone="critical"]),
.servicecenter-live-map-card[data-live-map-filter-active="critical"] .servicecenter-leaflet-pin:not([data-map-tone="critical"]),
.servicecenter-live-map-card[data-live-map-filter-active="emergency"] .servicecenter-map-pin:not([data-map-kind="emergency"]),
.servicecenter-live-map-card[data-live-map-filter-active="emergency"] .servicecenter-leaflet-pin:not([data-map-kind="emergency"]),
.servicecenter-live-map-card[data-live-map-filter-active="incident"] .servicecenter-map-pin:not([data-map-kind="incident"]),
.servicecenter-live-map-card[data-live-map-filter-active="incident"] .servicecenter-leaflet-pin:not([data-map-kind="incident"]),
.servicecenter-live-map-card[data-live-map-filter-active="hardware"] .servicecenter-map-pin:not([data-map-kind="hardware"]),
.servicecenter-live-map-card[data-live-map-filter-active="hardware"] .servicecenter-leaflet-pin:not([data-map-kind="hardware"]),
.servicecenter-live-map-card[data-live-map-filter-active="active"] .servicecenter-map-pin:not([data-map-tone="active"]) {
  opacity: 0.18;
  filter: grayscale(1);
}

.servicecenter-live-map-card[data-live-map-filter-active="active"] .servicecenter-leaflet-pin:not([data-map-tone="active"]) {
  opacity: 0.18;
  filter: grayscale(1);
}

.servicecenter-live-map-card[data-live-map-filter-active="traffic"] .servicecenter-map-pin,
.servicecenter-live-map-card[data-live-map-filter-active="transit"] .servicecenter-map-pin {
  opacity: 0.45;
}

.servicecenter-map-empty {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 18px;
  color: rgba(247, 239, 229, 0.72);
  font-weight: 850;
}

.servicecenter-map-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 6px;
  max-height: 132px;
  overflow: auto;
  padding-right: 2px;
}

.servicecenter-map-row {
  display: grid;
  grid-template-columns: minmax(74px, .55fr) minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid rgba(184, 207, 230, 0.14);
  border-left: 3px solid rgba(139, 198, 255, 0.7);
  border-radius: 7px;
  background: rgba(6, 22, 39, 0.66);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.servicecenter-map-row.critical {
  border-left-color: #ff5f57;
}

.servicecenter-map-row.warning {
  border-left-color: #ffad4d;
}

.servicecenter-map-row.active {
  border-left-color: #54d7ff;
}

.servicecenter-map-row.hardware,
.servicecenter-map-row[data-map-kind="hardware"] {
  border-left-color: #7cc1ff;
}

.servicecenter-map-row b {
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.servicecenter-map-row span {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: rgba(247, 239, 229, 0.68);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-hardware-queue {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(124, 193, 255, 0.18);
  border-radius: 10px;
  background: rgba(7, 22, 39, 0.72);
}

.remote-hardware-queue > strong {
  color: #fff;
  font-size: 14px;
}

.remote-hardware-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(2, 13, 25, 0.58);
}

.remote-hardware-row.pending {
  border-color: rgba(255, 139, 26, 0.34);
}

.remote-hardware-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.remote-hardware-row b {
  color: #fff;
}

.remote-hardware-row small {
  overflow: hidden;
  color: rgba(247, 239, 229, 0.72);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-hardware-row em {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(124, 193, 255, 0.13);
  color: #bfe2ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.remote-hardware-row > div {
  display: inline-flex;
  gap: 6px;
}

@media (max-width: 780px) {
  .remote-hardware-row {
    grid-template-columns: 1fr;
  }
}

@keyframes mapPinPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.18); }
  50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}

/* Public package/module explanation - 2026-07-23 */
.package-detail-page {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(234, 242, 251, 0.96)),
    radial-gradient(circle at 18% 4%, rgba(255, 128, 0, 0.16), transparent 30%),
    #eef4f9;
  color: #071827;
}

.package-detail-page .topbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(6, 26, 51, 0.12);
  box-shadow: 0 14px 38px rgba(6, 26, 51, 0.08);
}

.package-detail-page .site-nav > a,
.package-detail-page .nav-dropdown summary {
  color: #08213d;
}

.package-detail-page .site-nav > a[aria-current="page"],
.package-detail-page .site-nav > a:hover,
.package-detail-page .nav-dropdown[open] summary {
  color: #c25c00;
}

.package-detail-hero {
  width: min(1180px, calc(100% - 40px));
  margin: 34px auto 0;
  padding: clamp(28px, 5vw, 54px);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(6, 26, 51, 0.96), rgba(10, 46, 83, 0.92));
  color: #fff;
  box-shadow: 0 28px 80px rgba(6, 26, 51, 0.18);
}

.package-detail-hero h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.02;
}

.package-detail-hero p:not(.eyebrow) {
  max-width: 780px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.08rem;
  line-height: 1.65;
}

.package-detail-hero .button.primary {
  background: #ff8a13;
  color: #061a33;
  border-color: #ff8a13;
  box-shadow: 0 12px 28px rgba(255, 128, 0, 0.24);
}

.package-detail-hero .button.ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .package-detail-page .package-detail-hero {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 246, 252, 0.96));
  color: #061a33;
  border: 1px solid rgba(6, 26, 51, 0.1);
  box-shadow: 0 22px 54px rgba(6, 26, 51, 0.1);
}

html[data-theme="light"] .package-detail-page .package-detail-hero h1,
html[data-theme="light"] .package-detail-page .package-detail-hero .eyebrow {
  color: #061a33;
}

html[data-theme="light"] .package-detail-page .package-detail-hero p:not(.eyebrow) {
  color: #41556d;
}

html[data-theme="light"] .package-detail-page .package-detail-hero .button.ghost {
  color: #061a33;
  border-color: rgba(6, 26, 51, 0.18);
  background: #ffffff;
}

.package-detail-content {
  display: grid;
  gap: 24px;
}

.package-value-grid,
.module-explain-grid,
.package-standard-strip,
.package-price-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.package-value-grid article,
.module-explain-grid article,
.package-standard-strip article,
.package-price-overview article,
.package-principles,
.package-section-head {
  border: 1px solid rgba(6, 26, 51, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 44px rgba(6, 26, 51, 0.08);
  padding: 22px;
}

.package-value-grid span,
.module-explain-grid span,
.package-standard-strip span,
.package-price-overview span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 128, 0, 0.12);
  color: #a54d00;
  font-weight: 900;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.package-value-grid strong,
.package-standard-strip strong,
.package-price-overview strong,
.module-explain-grid h3,
.package-section-head h2,
.package-principles strong {
  display: block;
  margin: 0 0 8px;
  color: #061a33;
  font-size: 1.28rem;
  line-height: 1.18;
}

.package-value-grid p,
.module-explain-grid p,
.package-standard-strip p,
.package-price-overview p,
.package-section-head p,
.package-principles p,
.package-value-grid li {
  color: rgba(6, 26, 51, 0.72);
  line-height: 1.55;
}

.package-value-grid ul {
  margin: 14px 0 0;
  padding-left: 18px;
}

.module-explain-grid b {
  display: block;
  margin-top: 14px;
  color: #0a2d55;
  font-size: 0.95rem;
}

.package-price-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.package-standard-strip {
  margin-top: -6px;
}

.package-standard-strip article {
  padding: 18px;
  border-color: rgba(255, 128, 0, 0.2);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 253, 0.98));
}

.package-price-overview b,
.module-explain-grid em {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #061a33;
  color: #fff;
  font-style: normal;
  font-weight: 900;
}

.package-price-overview small {
  display: block;
  margin-top: 12px;
  color: rgba(6, 26, 51, 0.66);
  font-weight: 800;
  line-height: 1.45;
}

.package-section-head {
  display: grid;
  gap: 6px;
}

.package-info-details {
  border: 1px solid rgba(6, 26, 51, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(6, 26, 51, 0.07);
  overflow: hidden;
}

.package-info-details > summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}

.package-info-details > summary::-webkit-details-marker {
  display: none;
}

.package-info-details > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #ff8a13;
  color: #061a33;
  font-weight: 900;
}

.package-info-details[open] > summary::after {
  content: "-";
}

.package-info-details > summary > i,
.package-info-details > summary > svg {
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 999px;
  background: rgba(255, 138, 19, .13);
  color: #c25c00;
}

.package-info-details > summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.package-info-details > summary b {
  color: #061a33;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.15;
}

.package-info-details > summary small {
  color: rgba(6, 26, 51, 0.62);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.package-info-details > :where(.package-price-overview, .extra-costs-grid, .package-section-head, .package-standard-strip, .module-explain-grid) {
  margin: 0 20px 20px;
}

.package-info-details > .package-section-head {
  box-shadow: none;
}

.package-composer [data-composer-section][hidden] {
  display: none !important;
}

@media (max-width: 620px) {
  .package-info-details > summary {
    grid-template-columns: 38px minmax(0, 1fr) 28px;
    padding: 14px;
  }

  .package-info-details > summary > i,
  .package-info-details > summary > svg {
    width: 38px;
    height: 38px;
    padding: 8px;
  }

  .package-info-details > summary b {
    font-size: .98rem;
  }

  .package-info-details > summary small {
    font-size: .78rem;
  }
}

.package-section-head .eyebrow,
.package-detail-hero .eyebrow {
  color: #ff9a2b;
  font-weight: 900;
}

.package-principles {
  border-color: rgba(255, 128, 0, 0.28);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 246, 234, 0.96));
}

.public-site.pricing-page .pricing-compare-head {
  align-items: center;
}

.public-site.pricing-page .pricing-compare-head .button {
  min-width: max-content;
}

.public-site.pricing-page .module-strip {
  gap: 18px;
}

.public-site.pricing-page .module-strip > .button {
  justify-self: start;
}

@media (max-width: 920px) {
  .package-value-grid,
  .module-explain-grid,
  .package-standard-strip,
  .package-price-overview {
    grid-template-columns: 1fr;
  }

  .package-detail-hero {
    width: min(100% - 24px, 760px);
    border-radius: 18px;
  }

  .public-site.pricing-page .pricing-compare-head {
    grid-template-columns: 1fr;
  }
}

/* Professional portal final layout pass - 2026-07-23 */
.portal-active details.professional-foldout.portal-view-active,
.portal-active details.customer-request-card.professional-foldout.portal-view-active {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.portal-active details.professional-foldout.portal-view-active > summary,
.portal-active details.professional-foldout.portal-view-active > .professional-foldout-body {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

.portal-active details.professional-foldout.portal-view-active > .professional-foldout-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 14px !important;
}

.portal-active details.professional-foldout.portal-view-active > summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 62px !important;
  padding: 13px 15px !important;
}

.portal-active details.professional-foldout.portal-view-active > summary small {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.portal-active #professional-planning .planning-summary-strip,
.portal-active #professional-planning .planning-integration-strip,
.portal-active #professional-mileage .mileage-summary-grid,
.portal-active #professional-labels .team-summary-strip,
.portal-active #professional-labels .warehouse-module-strip,
.portal-active #professional-team .team-summary-strip {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 9px !important;
  width: 100% !important;
}

.portal-active #professional-planning .planning-concept-list,
.portal-active #professional-planning .compact-table,
.portal-active #professional-team .team-grid,
.portal-active #professional-labels .warehouse-enterprise-grid,
.portal-active #professional-labels .warehouse-control-grid,
.portal-active #professional-labels .label-table,
.portal-active #professional-mileage .mileage-workspace,
.portal-active #professional-mileage .mileage-lists,
.portal-active #professional-modules .compact-module-grid {
  width: 100% !important;
  min-width: 0 !important;
}

.portal-active #professional-planning .planning-concept-list,
.portal-active #professional-planning .compact-table {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.portal-active #professional-planning .planning-concept-row {
  grid-template-columns: minmax(210px, 1.35fr) minmax(150px, 0.85fr) minmax(82px, 0.3fr) minmax(82px, 0.3fr) auto !important;
  width: 100% !important;
}

.portal-active #professional-planning .rideshare-form,
.portal-active #professional-planning .rideshare-passenger-row {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.portal-active #professional-team .team-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)) !important;
}

.portal-active #professional-team .team-row > summary {
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
}

.portal-active #professional-team .employment-panel > summary,
.portal-active #professional-team .professional-time-admin > summary,
.portal-active #professional-team .professional-hr-admin > summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 58px !important;
}

.portal-active #professional-team .employment-panel > summary span,
.portal-active #professional-team .professional-time-admin > summary span,
.portal-active #professional-team .professional-hr-admin > summary span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.portal-active #professional-team .employment-panel > summary strong,
.portal-active #professional-team .employment-panel > summary small,
.portal-active #professional-team .professional-time-admin > summary strong,
.portal-active #professional-team .professional-time-admin > summary small,
.portal-active #professional-team .professional-hr-admin > summary strong,
.portal-active #professional-team .professional-hr-admin > summary small {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.portal-active #professional-team .team-edit-grid,
.portal-active #professional-mileage .mileage-form {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}

.portal-active #professional-mileage .mileage-workspace,
.portal-active #professional-mileage .mileage-lists {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
}

.portal-active #professional-labels .warehouse-control-grid,
.portal-active #professional-labels .warehouse-enterprise-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
}

.portal-active #professional-labels .warehouse-control-card,
.portal-active #professional-labels .warehouse-enterprise-grid > *,
.portal-active #professional-labels .warehouse-add-card {
  min-width: 0 !important;
  overflow: hidden !important;
}

.portal-active #professional-labels .label-row {
  grid-template-columns: minmax(220px, 1.2fr) minmax(130px, 0.6fr) minmax(180px, 0.9fr) minmax(180px, auto) !important;
}

.portal-active #professional-modules .compact-module-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
  gap: 12px !important;
}

.portal-active #professional-modules .module-card {
  min-width: 0 !important;
  min-height: 0 !important;
}

.portal-active #professional-modules .module-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
}

.portal-active #professional-modules .module-card-head b {
  max-width: 118px !important;
  white-space: normal !important;
  text-align: right !important;
  line-height: 1.15 !important;
}

.portal-active #professional-modules .module-card p,
.portal-active #professional-modules .module-card li,
.portal-active #professional-modules .module-card small {
  overflow-wrap: anywhere !important;
  hyphens: none !important;
}

.portal-active #professional-profile .profile-section > summary,
.portal-active #professional-profile .profession-picker,
.portal-active #professional-profile .service-area-picker,
.portal-active #professional-profile .document-upload-assistant,
.portal-active #professional-profile .anonymous-profile-preview,
.portal-active #professional-profile .profile-quick-actions,
.portal-active #professional-profile .vehicle-profile-grid,
.portal-active #professional-profile .document-status-card {
  border-color: rgba(184, 207, 230, 0.16) !important;
  background: rgba(9, 29, 50, 0.92) !important;
  color: var(--portal-text) !important;
}

.portal-active #professional-profile :where(.profile-section > summary strong, .profession-picker strong, .service-area-picker strong, .document-upload-assistant strong, .anonymous-profile-preview strong, .profile-quick-actions strong, .vehicle-profile-grid strong, .document-status-card strong) {
  color: var(--portal-text) !important;
}

.portal-active #professional-profile :where(.profile-section > summary span, .profile-section > summary small, .profession-picker label, .profession-picker span, .service-area-picker label, .service-area-picker span, .document-upload-assistant label, .document-upload-assistant span, .document-upload-assistant small, .anonymous-profile-preview span, .profile-quick-actions span, .vehicle-profile-grid p, .vehicle-profile-grid label, .vehicle-profile-grid span, .vehicle-profile-grid small, .document-status-card small) {
  color: var(--portal-muted) !important;
}

.portal-active #professional-profile .document-upload-assistant .button.secondary,
.portal-active #professional-profile .vehicle-profile-grid .button.secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(184, 207, 230, 0.22) !important;
  color: var(--portal-text) !important;
}

.portal-active #professional-planning *,
.portal-active #professional-team *,
.portal-active #professional-labels *,
.portal-active #professional-mileage *,
.portal-active #professional-modules * {
  min-width: 0;
}

@media (max-width: 860px) {
  .portal-active #professional-planning .planning-concept-row,
  .portal-active #professional-labels .label-row,
  .portal-active #professional-team .team-row > summary {
    grid-template-columns: 1fr !important;
  }

  .portal-active details.professional-foldout.portal-view-active > summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Module status cockpit - eigenaar/beheer */
.module-status-workspace,
.module-status-shell {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.module-status-head,
.module-standard-card,
.module-quality-guards,
.module-status-actions,
.module-status-card,
.module-status-kpi article {
  border: 1px solid rgba(184, 207, 230, 0.15);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(11, 34, 56, 0.94), rgba(5, 19, 34, 0.94));
  color: #f7efe5;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.module-status-head {
  padding: 16px;
}

.module-status-head h2,
.module-status-actions h3 {
  margin: 0;
  color: #fff;
}

.module-status-head p,
.module-status-actions p,
.module-standard-card span,
.module-quality-guards p,
.module-status-card p {
  margin: 4px 0 0;
  color: rgba(247, 239, 229, 0.74);
  font-size: 13px;
  line-height: 1.42;
  font-weight: 800;
}

.module-quality-guards {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.mobile-parity-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(184, 207, 230, 0.15);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(11, 34, 56, 0.94), rgba(5, 19, 34, 0.94));
  color: #f7efe5;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.module-quality-guard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.mobile-parity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.module-quality-guard,
.mobile-parity-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(184, 207, 230, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.mobile-parity-card.warning {
  border-color: rgba(251, 146, 60, 0.32);
  background: rgba(251, 146, 60, 0.09);
}

.module-quality-icon {
  display: grid;
  place-items: center;
  min-height: 34px;
  border-radius: 7px;
  background: rgba(45, 212, 191, 0.14);
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

.module-quality-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.module-quality-guard strong,
.module-quality-guard small,
.module-quality-guard p,
.mobile-parity-card strong,
.mobile-parity-card small,
.mobile-parity-card p,
.mobile-parity-card em,
.mobile-parity-card b {
  display: block;
  min-width: 0;
}

.module-quality-guard strong,
.mobile-parity-card strong {
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
}

.module-quality-guard small,
.mobile-parity-card small {
  margin-top: 2px;
  color: #5eead4;
  font-size: 11px;
  font-weight: 950;
}

.module-quality-guard p,
.mobile-parity-card p {
  margin-top: 4px;
  font-size: 12px;
}

.mobile-parity-card b {
  margin-top: 7px;
  color: rgba(226, 232, 240, 0.82);
  font-size: 11px;
  line-height: 1.35;
}

.mobile-parity-card em {
  margin-top: 7px;
  padding: 7px 8px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 7px;
  background: rgba(14, 165, 233, 0.08);
  color: rgba(224, 242, 254, 0.9);
  font-size: 11px;
  font-style: normal;
  line-height: 1.3;
}

.mobile-parity-card .button {
  justify-self: start;
  margin-top: 8px;
  min-height: 30px;
  padding: 5px 9px;
  font-size: 11px;
}

.quality-suite-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.quality-suite-command {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 8px;
  background: rgba(14, 165, 233, 0.08);
}

.quality-suite-command span,
.quality-suite-command small,
.quality-suite-check small {
  color: rgba(226, 232, 240, 0.76);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
}

.quality-suite-command code {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 6px;
  background: rgba(2, 6, 23, 0.38);
  color: #f8fafc;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quality-suite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.quality-suite-check {
  display: grid;
  gap: 5px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.07);
}

.quality-suite-panel.warning .quality-suite-command,
.quality-suite-check.warning {
  border-color: rgba(251, 146, 60, 0.34);
  background: rgba(251, 146, 60, 0.10);
}

.quality-suite-check b {
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.quality-suite-check span,
.quality-suite-check small {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.quality-suite-check span {
  color: rgba(226, 232, 240, 0.76);
  font-size: 11px;
  line-height: 1.28;
}

.module-status-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.module-status-kpi article {
  display: grid;
  gap: 3px;
  min-height: 78px;
  padding: 12px 14px;
}

.module-status-kpi.compact {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.module-status-kpi.compact article {
  min-height: 64px;
  padding: 9px 10px;
}

.module-mini-panel {
  display: grid;
  gap: 4px;
  margin: 8px 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.24);
}

.module-mini-panel p {
  margin: 0;
}

.live-demo-gate {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 143, 26, 0.28);
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(11, 34, 56, 0.96), rgba(5, 19, 34, 0.96));
  color: #f8fafc;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.live-demo-gate.ok {
  border-color: rgba(45, 212, 191, 0.30);
}

.live-demo-gate.attention {
  border-color: rgba(255, 143, 26, 0.42);
}

.live-gate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.live-gate-grid article,
.live-gate-checks span {
  min-width: 0;
  border: 1px solid rgba(184, 207, 230, 0.14);
  border-radius: 8px;
  background: rgba(8, 26, 43, 0.72);
}

.live-gate-grid article {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
}

.live-gate-grid strong {
  color: #ffffff;
  font-size: 1rem;
}

.live-gate-grid span,
.live-gate-grid small,
.live-gate-checks small {
  color: rgba(226, 232, 240, 0.74);
  font-size: 0.78rem;
  line-height: 1.3;
  font-weight: 800;
}

.live-gate-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.live-gate-checks span {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
}

.live-gate-checks b {
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  color: #e2e8f0;
  font-size: 0.68rem;
  letter-spacing: 0;
}

.live-gate-checks .ok b {
  background: rgba(45, 212, 191, 0.16);
  color: #7dd3fc;
}

.live-gate-checks .attention b {
  background: rgba(255, 143, 26, 0.18);
  color: #ffb45c;
}

.live-gate-checks .optional b {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
}

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

.production-start-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(184, 207, 230, 0.14);
  border-radius: 8px;
  background: rgba(8, 26, 43, 0.72);
}

.production-start-card > div:first-child {
  display: grid;
  gap: 3px;
}

.production-start-card strong {
  color: #ffffff;
}

.production-start-card p,
.production-start-card span,
.production-start-card small,
.production-start-card em {
  margin: 0;
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.78rem;
  line-height: 1.35;
  font-style: normal;
  font-weight: 800;
}

.production-start-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 7px;
}

.production-start-table span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
}

.production-start-table b {
  color: #f8fafc;
  font-size: 0.78rem;
}

.production-start-command {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}

.production-start-command code {
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.7);
  color: #7dd3fc;
  font-size: 0.74rem;
  font-weight: 900;
}

.recurring-service-panel {
  border: 1px solid rgba(255, 143, 26, 0.28);
  background: linear-gradient(135deg, rgba(255, 143, 26, 0.08), rgba(14, 42, 66, 0.86));
}

.recurring-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.recurring-service-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(6, 20, 34, 0.64);
  color: #f8fafc;
}

.recurring-service-card strong {
  display: block;
  color: #ffffff;
  font-size: 1rem;
}

.recurring-service-card small,
.recurring-service-card p,
.recurring-service-card em {
  margin: 0;
  color: rgba(226, 232, 240, 0.78);
  font-style: normal;
  line-height: 1.35;
}

.recurring-service-money {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.recurring-service-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.recurring-service-money span {
  min-width: 0;
  padding: 8px;
  border-radius: 7px;
  background: rgba(15, 35, 56, 0.88);
}

.recurring-service-control span {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}

.recurring-service-money b {
  display: block;
  color: #ff9f2e;
  font-size: 0.95rem;
}

.recurring-service-control b {
  display: block;
  color: #f8fafc;
  font-size: 0.82rem;
  line-height: 1.25;
}

.recurring-service-form {
  margin-top: 10px;
}

.commercial-terms-locked {
  display: grid;
  gap: 3px;
  align-content: center;
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 8px;
  background: rgba(14, 42, 66, 0.62);
}

.commercial-terms-locked span {
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
}

.commercial-terms-locked strong {
  color: #f8fafc;
  font-size: 0.88rem;
}

.commercial-terms-locked small {
  color: rgba(226, 232, 240, 0.68);
  line-height: 1.25;
}

.recurring-revenue-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid rgba(255, 143, 26, 0.22);
  border-radius: 8px;
  background: rgba(5, 20, 36, 0.72);
}

.recurring-revenue-strip span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.recurring-revenue-strip small,
.recurring-revenue-strip em,
.recurring-fee-help {
  color: rgba(226, 232, 240, 0.74);
  font-style: normal;
  line-height: 1.35;
}

.recurring-revenue-strip b {
  color: var(--pf24-orange, #ff8a00);
  font-size: 1.05rem;
}

.recurring-revenue-strip p {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(226, 232, 240, 0.82);
  font-size: 0.86rem;
}

.recurring-fee-help {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.recurring-customer-planning {
  border-color: rgba(125, 211, 252, 0.28);
  background: linear-gradient(135deg, rgba(14, 42, 66, 0.72), rgba(5, 20, 36, 0.58));
}

.routework-panel {
  border-color: rgba(125, 211, 252, 0.28);
  background: linear-gradient(135deg, rgba(14, 42, 66, 0.90), rgba(5, 20, 36, 0.78));
}

.routework-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  padding: 12px 12px 0;
}

.routework-summary span,
.routework-route-line span,
.routework-rules span {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.routework-summary span {
  padding: 8px 10px;
}

.routework-summary small {
  display: block;
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.76rem;
  font-weight: 850;
}

.routework-summary b {
  display: block;
  color: var(--pf24-orange, #ff8a00);
  font-size: 1.08rem;
}

.routework-route-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 12px 0;
}

.routework-route-line span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  color: #f8fafc;
  font-size: 0.8rem;
  font-weight: 900;
}

.routework-route-line b {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 138, 0, 0.18);
  color: #ffb45c;
}

.routework-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  padding: 10px 12px 0;
}

.routework-rules span {
  padding: 8px 10px;
  color: rgba(226, 232, 240, 0.78);
  font-size: 0.8rem;
  line-height: 1.35;
}

.routework-stop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 10px;
  padding: 12px;
}

.routework-stop-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(125, 211, 252, 0.24);
  border-radius: 8px;
  background: rgba(6, 20, 34, 0.72);
}

.routework-stop-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.routework-stop-card strong,
.routework-stop-card small,
.routework-stop-card p {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.routework-stop-card strong {
  color: #ffffff;
  font-size: 0.98rem;
}

.routework-stop-card small,
.routework-stop-card p {
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.82rem;
  line-height: 1.35;
}

.routework-stop-card header b {
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.12);
  color: #bae6fd;
  font-size: 0.72rem;
}

.routework-checklist,
.routework-materials {
  display: grid;
  gap: 6px;
}

.routework-checklist span {
  position: relative;
  padding-left: 18px;
  color: rgba(248, 250, 252, 0.88);
  font-size: 0.8rem;
  line-height: 1.3;
}

.routework-checklist span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff8a00;
}

.routework-materials {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.routework-materials small {
  padding: 6px 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
}

.mobile-routework-card {
  display: grid;
  gap: 9px;
}

.mobile-routework-stop {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.mobile-routework-stop b {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 138, 0, 0.20);
  color: #ffb45c;
  font-size: 0.8rem;
}

.mobile-routework-stop strong,
.mobile-routework-stop small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-routework-stop strong {
  color: #fff;
  font-size: 0.92rem;
}

.mobile-routework-stop small {
  color: rgba(247, 239, 229, 0.68);
  font-size: 0.78rem;
}

.workorder-recurring-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid rgba(255, 143, 26, 0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 143, 26, 0.10), rgba(8, 28, 46, 0.88));
}

.workorder-recurring-suggestion > div:first-child {
  display: grid;
  gap: 4px;
}

.workorder-recurring-suggestion strong {
  color: #fff;
}

.workorder-recurring-suggestion span,
.workorder-recurring-suggestion small {
  color: rgba(226, 232, 240, 0.78);
}

.recurring-suggestion-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.recurring-suggestion-actions > span {
  display: grid;
  min-width: 92px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(6, 20, 34, 0.72);
}

.recurring-suggestion-actions b {
  color: var(--pf24-orange, #ff8a00);
}

.workorder-recurring-suggestion .form-message {
  grid-column: 1 / -1;
  margin: 0;
}

.portal-active #professional-labels .warehouse-ops-card .warehouse-ops-row small {
  overflow-wrap: anywhere;
}

.module-status-kpi strong {
  color: var(--orange);
  font-size: 28px;
  line-height: 1;
}

.module-status-kpi span,
.module-status-kpi small {
  color: rgba(247, 239, 229, 0.76);
  font-size: 12px;
  font-weight: 850;
}

.module-standard-card {
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border-color: rgba(255, 130, 0, 0.32);
  background: linear-gradient(135deg, rgba(255, 130, 0, 0.13), rgba(8, 28, 48, 0.92));
}

.module-standard-card strong {
  color: #ffb35c;
  font-size: 15px;
}

.workflow-tightening-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(184, 207, 230, 0.15);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(11, 34, 56, 0.94), rgba(5, 19, 34, 0.94));
  color: #f7efe5;
}

.workflow-tightening-panel .panel-head.compact {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.workflow-tightening-panel h3 {
  margin: 0;
  color: #fff;
}

.workflow-tightening-panel p {
  margin: 4px 0 0;
  color: rgba(247, 239, 229, 0.74);
  font-size: 13px;
  line-height: 1.42;
  font-weight: 800;
}

.workflow-tightening-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.workflow-tightening-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(184, 207, 230, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.workflow-tightening-card > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.workflow-tightening-card strong,
.workflow-tightening-card b {
  color: #fff;
}

.workflow-tightening-card b {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.14);
  color: #ffd0a0;
  font-size: 10px;
  white-space: nowrap;
}

.workflow-tightening-card span,
.workflow-tightening-card small,
.workflow-tightening-card p {
  margin: 0;
  color: rgba(247, 239, 229, 0.68);
  font-size: 12px;
  line-height: 1.35;
}

.workflow-tightening-card.done {
  border-color: rgba(65, 209, 125, 0.26);
}

.workflow-tightening-card.urgent {
  border-color: rgba(255, 130, 0, 0.36);
  background: linear-gradient(180deg, rgba(255, 130, 0, 0.12), rgba(7, 23, 39, 0.92));
}

.launch-readiness-panel,
.demo-scenario-panel,
.integration-impact-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(184, 207, 230, 0.15);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(11, 34, 56, 0.94), rgba(5, 19, 34, 0.94));
  color: #f7efe5;
}

.bob-status-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(184, 207, 230, 0.16);
  border-left: 4px solid #29c76f;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(8, 31, 52, 0.96), rgba(5, 19, 34, 0.94));
  color: #f7efe5;
}

.bob-status-card.attention {
  border-left-color: #ff8200;
}

.bob-status-card .panel-head.compact {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.bob-status-metrics,
.bob-status-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.bob-status-metrics span,
.bob-status-list span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(184, 207, 230, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.bob-status-card :where(strong, b) {
  color: #fff;
}

.bob-status-card :where(p, small) {
  margin: 0;
  color: rgba(247, 239, 229, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

.launch-readiness-panel .panel-head.compact,
.demo-scenario-panel .panel-head.compact,
.integration-impact-panel .panel-head.compact {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.launch-readiness-grid,
.demo-readiness-grid,
.integration-impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.launch-readiness-card,
.demo-readiness-card,
.integration-impact-card,
.module-decision-advice {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(184, 207, 230, 0.14);
  border-left: 3px solid rgba(255, 130, 0, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.launch-readiness-card > div,
.demo-readiness-card > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.launch-readiness-card strong,
.launch-readiness-card b,
.demo-readiness-card strong,
.integration-impact-card strong,
.module-decision-advice strong {
  color: #fff;
}

.launch-readiness-card span,
.launch-readiness-card p,
.launch-readiness-card small,
.demo-readiness-card span,
.demo-readiness-card p,
.demo-readiness-card li,
.integration-impact-card span,
.integration-impact-card small,
.module-decision-advice span {
  margin: 0;
  color: rgba(247, 239, 229, 0.70);
  font-size: 12px;
  line-height: 1.35;
}

.launch-readiness-card em {
  color: #ffd0a0;
  font-style: normal;
  font-weight: 900;
}

.launch-readiness-card b {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.14);
  color: #ffd0a0;
  font-size: 10px;
  white-space: nowrap;
}

.launch-readiness-card.go,
.module-decision-advice.go {
  border-left-color: #29c76f;
}

.launch-readiness-card.go b,
.module-decision-advice.go strong {
  color: #8df0b5;
}

.launch-readiness-card.block,
.module-decision-advice.block {
  border-left-color: #e76262;
}

.launch-readiness-card.block b,
.module-decision-advice.block strong {
  color: #ffb4b4;
}

.launch-readiness-card a {
  justify-self: start;
  color: #ffd0a0;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.demo-readiness-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.demo-readiness-modules b {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.14);
  color: #ffd0a0;
  font-size: 10px;
}

.demo-readiness-card ol {
  margin: 0;
  padding-left: 18px;
}

.integration-impact-card span b {
  color: #ffd0a0;
}

.module-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 12px;
  align-items: start;
}

.module-status-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.module-status-card.done {
  border-color: rgba(34, 197, 94, 0.22);
}

.module-status-card.ready {
  border-color: rgba(255, 130, 0, 0.34);
}

.module-status-card.todo {
  border-color: rgba(248, 113, 113, 0.34);
}

.module-status-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(184, 207, 230, 0.12);
}

.module-status-card-head span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.module-status-card-head strong {
  color: #fff;
  font-size: 18px;
  line-height: 1.12;
}

.module-status-card-head small,
.module-status-meta small,
.module-status-money small {
  color: rgba(247, 239, 229, 0.62);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.module-status-card-head b {
  padding: 6px 9px;
  border: 1px solid rgba(255, 130, 0, 0.34);
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.13);
  color: #ffbd73;
  font-size: 12px;
  white-space: nowrap;
}

.module-status-money,
.module-status-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.module-status-money span,
.module-status-meta span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(184, 207, 230, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
}

.module-status-money strong {
  color: #fff;
  font-size: 17px;
}

.module-status-money .ok strong {
  color: #64f09a;
}

.module-status-money .risk strong {
  color: #ffb35c;
}

.module-status-meta strong {
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
}

.module-status-done {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.module-readiness-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.module-readiness-row span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(184, 207, 230, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(247, 239, 229, 0.82);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
}

.module-readiness-row b {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
}

.module-readiness-row .ok {
  border-color: rgba(34, 197, 94, 0.22);
}

.module-readiness-row .ok b {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

.module-readiness-row .attention {
  border-color: rgba(255, 130, 0, 0.34);
  color: #ffd0a0;
}

.module-readiness-row .attention b {
  background: rgba(255, 130, 0, 0.18);
  color: #ffbd73;
}

.module-status-done span {
  padding: 5px 8px;
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.08);
  color: rgba(247, 255, 250, 0.88);
  font-size: 11px;
  font-weight: 850;
}

.module-status-next {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border-left: 3px solid var(--orange);
  border-radius: 7px;
  background: rgba(255, 130, 0, 0.08);
}

.module-status-next strong {
  color: #ffb35c;
  font-size: 12px;
  text-transform: uppercase;
}

.module-status-next span {
  color: rgba(247, 239, 229, 0.82);
  font-size: 12px;
  line-height: 1.38;
}

.module-status-actions {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: 14px;
  padding: 14px;
}

.module-status-actions ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
}

.module-status-actions li {
  color: rgba(247, 239, 229, 0.78);
  font-size: 12px;
  line-height: 1.35;
}

.module-status-actions li strong {
  display: block;
  color: #fff;
  font-size: 13px;
}

@media (max-width: 860px) {
  .module-status-actions {
    grid-template-columns: 1fr;
  }
}

/* Portal professional polish - 2026-07-23 */
.portal-active {
  --portal-card: rgba(10, 31, 52, 0.88);
  --portal-card-strong: rgba(13, 39, 64, 0.94);
  --portal-card-soft: rgba(255, 255, 255, 0.045);
  --portal-line: rgba(184, 207, 230, 0.16);
  --portal-line-strong: rgba(255, 130, 0, 0.34);
  --portal-text: #f7fbff;
  --portal-muted: rgba(226, 236, 247, 0.72);
  --portal-muted-soft: rgba(226, 236, 247, 0.58);
}

.portal-active #portalDashboard.dashboard {
  align-content: start;
  gap: 14px;
}

.portal-active #portalDashboard > .panel-head.customer-head {
  min-height: 74px;
  border: 1px solid var(--portal-line);
  border-radius: 10px;
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 130, 0, 0.13), transparent 36%),
    linear-gradient(135deg, rgba(13, 39, 64, 0.95), rgba(7, 22, 39, 0.95));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.portal-active #portalDashboard > .panel-head.customer-head h1 {
  margin: 0;
  color: var(--portal-text);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
}

.portal-active #portalDashboard > .panel-head.customer-head p {
  margin-top: 6px;
  color: var(--portal-muted);
  font-size: 13px;
  font-weight: 850;
}

.portal-active :where(.professional-section, .customer-section, .customer-request-card, .professional-foldout, .wallet-panel, .activation-card, .contact-request-panel > form, .employment-panel, .module-card, .plan-choice) {
  min-width: 0;
  border-color: var(--portal-line) !important;
  background: var(--portal-card) !important;
  color: var(--portal-text) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}

.portal-active :where(.professional-section, .customer-section, .customer-request-card) {
  border-radius: 10px !important;
}

.portal-active .professional-section.portal-view-active,
.portal-active .customer-section.portal-view-active {
  display: grid !important;
  gap: 14px;
  width: 100%;
  max-width: 1280px;
}

.portal-active .professional-section.portal-view-active > :where(.customer-request-card, .professional-foldout, .wallet-panel, .contact-request-panel, .professional-mobile-workday, .professional-cockpit, .readiness-grid, .module-card-grid, .planning-shell),
.portal-active .customer-section.portal-view-active > :where(.customer-request-card, .wallet-panel, .customer-cockpit, .request-workspace) {
  width: 100%;
}

.portal-active :where(.panel-head.compact-head, .settings-card-head, .module-card-head, .job-card-head, .wallet-head) {
  align-items: center;
  min-height: 54px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(184, 207, 230, 0.12);
}

.portal-active :where(.panel-head.compact-head h3, .settings-card-head h3, .module-card-head strong, .job-card-head h2) {
  color: var(--portal-text) !important;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.12;
}

.portal-active :where(.panel-head.compact-head p, .settings-card-head p, .module-card p, .module-card li, .job-card .description, .form-message, .empty) {
  color: var(--portal-muted) !important;
  font-size: 13px;
  line-height: 1.42;
}

.portal-active :where(.professional-cockpit, .customer-cockpit, .summary-grid, .document-status-grid, .business-package-grid, .module-card-grid, .plan-picker, .wallet-summary-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  min-width: 0;
}

.portal-active :where(.professional-cockpit article, .customer-cockpit article, .summary-card, .readiness-step, .professional-next-action, .module-card, .plan-choice, .employment-card, .contact-request-card, .planning-card) {
  border: 1px solid var(--portal-line) !important;
  border-radius: 8px !important;
  background: var(--portal-card-soft) !important;
  color: var(--portal-text) !important;
}

.portal-active :where(.professional-cockpit article, .customer-cockpit article, .summary-card) {
  min-height: 74px;
  padding: 12px 14px;
}

.portal-active :where(.professional-cockpit article strong, .customer-cockpit article strong, .summary-card strong, .readiness-step strong, .professional-next-action strong, .planning-card strong, .contact-request-card strong, .employment-card strong) {
  color: var(--portal-text) !important;
  font-size: 14px;
  line-height: 1.2;
}

.portal-active :where(.professional-cockpit article b, .customer-cockpit article b, .summary-card b) {
  color: var(--pf24-orange, #ff8200) !important;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
}

.portal-active :where(.professional-cockpit article span, .customer-cockpit article span, .summary-card span, .readiness-step small, .professional-next-action small, .planning-card span, .contact-request-card span, .contact-request-card p, .employment-card span, .employment-card small) {
  color: var(--portal-muted) !important;
  font-size: 12px;
  line-height: 1.35;
}

.portal-active :where(.portal-request-form, .request-form, .business-form, .profile-section-grid, .team-edit-grid, .vehicle-profile-grid, .warehouse-ops-form) {
  gap: 10px !important;
}

.portal-active :where(label, legend) {
  color: var(--portal-muted) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.portal-active :where(input, select, textarea) {
  min-height: 40px;
  border: 1px solid rgba(184, 207, 230, 0.18) !important;
  border-radius: 7px !important;
  background: rgba(3, 15, 28, 0.72) !important;
  color: var(--portal-text) !important;
  box-shadow: none !important;
}

.portal-active :where(textarea) {
  line-height: 1.45;
}

.portal-active :where(input:focus, select:focus, textarea:focus) {
  border-color: rgba(255, 130, 0, 0.62) !important;
  outline: 2px solid rgba(255, 130, 0, 0.18) !important;
}

.portal-active :where(select option) {
  color: #07182d;
}

.portal-active :where(.button, button.button) {
  min-height: 38px;
  border-radius: 7px !important;
  font-size: 13px;
  font-weight: 950;
}

.portal-active :where(.button.primary, button.primary, .primary-action) {
  background: #ff8200 !important;
  color: #06111f !important;
  border-color: #ff8200 !important;
}

.portal-active :where(.button.secondary, button.secondary) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--portal-text) !important;
  border-color: rgba(184, 207, 230, 0.22) !important;
}

.portal-active :where(.badge, .status-pill, .pill, .workday-pill) {
  border-color: rgba(255, 130, 0, 0.34) !important;
  background: rgba(255, 130, 0, 0.12) !important;
  color: #ffbd73 !important;
  font-size: 11px;
  font-weight: 950;
}

.portal-active .professional-section-nav,
.portal-active .portal-section-nav {
  border-right: 1px solid rgba(184, 207, 230, 0.14);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 130, 0, 0.09), transparent 28%),
    linear-gradient(180deg, rgba(5, 17, 30, 0.98), rgba(2, 11, 21, 0.99)) !important;
}

.portal-active .portal-sidebar-brand {
  gap: 9px;
}

.portal-active .portal-sidebar-brand img {
  width: 100%;
  max-height: 74px;
  padding: 7px 9px;
  border-radius: 6px;
  background: #fff;
  object-fit: contain;
}

.portal-active .portal-sidebar-brand span {
  color: var(--portal-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.portal-active .portal-nav-links {
  gap: 7px;
}

.portal-active .portal-nav-links a,
.portal-active .professional-section-nav a,
.portal-active .portal-section-nav a {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(184, 207, 230, 0.13) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: var(--portal-muted) !important;
  font-size: 13px;
  font-weight: 950;
}

.portal-active .portal-nav-links a.active,
.portal-active .professional-section-nav a.active,
.portal-active .portal-section-nav a.active {
  border-color: rgba(255, 130, 0, 0.52) !important;
  background: rgba(255, 130, 0, 0.16) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 #ff8200;
}

.portal-active .portal-workscreen-actions,
.portal-active .portal-app-download,
.portal-active .sidebar-chat-compact {
  border-color: rgba(184, 207, 230, 0.14) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border-radius: 8px;
  padding: 10px;
}

.portal-active #professional-planning .planning-list,
.portal-active #professional-workorders.customer-request-list,
.portal-active #professional-jobs .customer-request-list,
.portal-active #customer-requests .customer-request-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 10px;
}

.portal-active .job-card {
  padding: 14px !important;
  border: 1px solid var(--portal-line) !important;
  border-radius: 9px !important;
  background: var(--portal-card-strong) !important;
}

.portal-active .job-card .info-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.portal-active .job-card .info-grid p {
  min-height: 52px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045) !important;
}

.portal-active #professional-team .team-row,
.portal-active #professional-team .staff-subpanel,
.portal-active .profile-section {
  border: 1px solid var(--portal-line) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.portal-active #professional-team .team-row > summary,
.portal-active .profile-section > summary,
.portal-active #professional-team .staff-subpanel > summary {
  min-height: 48px;
  padding: 11px 13px;
  border-radius: 9px;
  color: var(--portal-text);
}

.portal-active #professional-team .team-row[open] > summary,
.portal-active .profile-section[open] > summary,
.portal-active #professional-team .staff-subpanel[open] > summary {
  border-bottom: 1px solid rgba(184, 207, 230, 0.12);
  border-radius: 9px 9px 0 0;
  background: rgba(255, 130, 0, 0.08);
}

.portal-active #professional-labels .warehouse-control-grid,
.portal-active #professional-labels .warehouse-enterprise-grid,
.portal-active #professional-labels .warehouse-ops-grid {
  gap: 10px !important;
}

.portal-active #professional-labels :where(.warehouse-control-card, .warehouse-ops-card, .warehouse-add-card, .warehouse-enterprise-upsell) {
  border-color: var(--portal-line) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.portal-active .contact-request-panel {
  gap: 12px;
}

.portal-active .contact-request-list,
.portal-active .employment-match-list {
  display: grid;
  gap: 8px;
}

.portal-active .professional-inline-alert {
  border: 1px solid rgba(255, 130, 0, 0.4);
  border-radius: 9px;
  background: rgba(255, 130, 0, 0.1);
  color: var(--portal-text);
}

.portal-active .readiness-panel {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(0, 1.1fr);
  gap: 10px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--portal-line);
  border-radius: 10px;
  background: var(--portal-card);
  padding: 10px;
}

.portal-active .readiness-status {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(184, 207, 230, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.portal-active .readiness-status strong {
  color: var(--portal-text);
  font-size: 18px;
  line-height: 1.15;
}

.portal-active .readiness-status span {
  color: var(--portal-muted);
  font-size: 13px;
  line-height: 1.35;
}

.portal-active .readiness-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  min-width: 0;
}

.portal-active .readiness-step {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 76px;
  padding: 10px 12px;
  text-decoration: none;
}

.portal-active .readiness-step small,
.portal-active .readiness-step strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-active .readiness-step small {
  white-space: nowrap;
}

.portal-active .readiness-step strong {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

@media (max-width: 1120px) {
  .portal-active .readiness-panel {
    grid-template-columns: 1fr;
  }

  .portal-active .readiness-steps {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

@media (min-width: 1180px) {
  .portal-active #portalDashboard.dashboard {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .portal-active #portalDashboard > .panel-head.customer-head,
  .portal-active #portalDashboard > .portal-notifications,
  .portal-active #portalDashboard > .emergency-broadcast-overlay {
    grid-column: 2;
  }

  .portal-active #portalDashboard > .professional-section-nav,
  .portal-active #portalDashboard > .portal-section-nav {
    grid-column: 1;
  }

  .portal-active #portalDashboard > .professional-section,
  .portal-active #portalDashboard > .customer-section,
  .portal-active #portalDashboard > .customer-request-card {
    grid-column: 2;
  }
}

@media (max-width: 980px) {
  .portal-active #professional-planning .planning-list,
  .portal-active #professional-workorders.customer-request-list,
  .portal-active #professional-jobs .customer-request-list,
  .portal-active #customer-requests .customer-request-list {
    grid-template-columns: 1fr;
  }

  .portal-active :where(.professional-cockpit, .customer-cockpit, .summary-grid, .document-status-grid, .business-package-grid, .module-card-grid, .plan-picker, .wallet-summary-grid) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .portal-active #portalDashboard > .panel-head.customer-head {
    min-height: 0;
    padding: 14px;
  }

  .portal-active #portalDashboard > .panel-head.customer-head h1 {
    font-size: 24px;
  }

  .portal-active .professional-section.portal-view-active,
  .portal-active .customer-section.portal-view-active {
    gap: 10px;
  }

  .portal-active :where(.professional-section, .customer-section, .customer-request-card) {
    border-radius: 8px !important;
  }
}

/* Tarieven: pakketvergelijking moet zonder horizontaal scrollen passen. */
.public-site.pricing-page .pricing-compare-card {
  overflow: visible !important;
}

.public-site.pricing-page .pricing-compact-table {
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  border-radius: 10px !important;
}

.public-site.pricing-page .pricing-compact-table > div {
  display: grid !important;
  grid-template-columns: minmax(136px, 1.15fr) repeat(4, minmax(64px, 0.72fr)) !important;
  gap: 5px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 6px 8px !important;
}

.public-site.pricing-page .pricing-compact-table span,
.public-site.pricing-page .pricing-compact-table b,
.public-site.pricing-page .pricing-compact-table strong {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: none !important;
  line-height: 1.18 !important;
  font-size: clamp(10px, 0.78vw, 12px) !important;
}

.public-site.pricing-page .pricing-compact-table b,
.public-site.pricing-page .pricing-compact-table strong {
  text-align: center !important;
}

.public-site.pricing-page .pricing-compact-table .compare-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(6, 26, 51, 0.16);
}

.public-site.pricing-page .pricing-compact-table .compare-icon.yes {
  background: #ff8200;
  border-color: #ff8200;
}

.public-site.pricing-page .pricing-compact-table .compare-icon.yes::before {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid #061a33;
  border-bottom: 2px solid #061a33;
  transform: rotate(-45deg) translateY(-1px);
}

.public-site.pricing-page .pricing-compact-table .compare-icon.no {
  background: rgba(6, 26, 51, 0.08);
}

.public-site.pricing-page .pricing-compact-table .compare-icon.no::before {
  content: "";
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: rgba(6, 26, 51, 0.45);
}

@media (max-width: 980px) {
  .public-site.pricing-page .pricing-compact-table {
    display: grid !important;
    gap: 10px !important;
    background: transparent !important;
  }

  .public-site.pricing-page .pricing-compact-table .comparison-head {
    display: none !important;
  }

  .public-site.pricing-page .pricing-compact-table > div {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 12px !important;
    border: 1px solid rgba(6, 26, 51, 0.12) !important;
    border-radius: 10px !important;
    background: rgb(251, 252, 253) !important;
  }

  .public-site.pricing-page .pricing-compact-table > div > span {
    color: #061a33 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  .public-site.pricing-page .pricing-compact-table > div > b {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    text-align: left !important;
    color: #061a33 !important;
    font-size: 13px !important;
  }

  .public-site.pricing-page .pricing-compact-table > div > b:nth-child(2)::before { content: "Particulier"; color: rgba(6, 26, 51, 0.62); }
  .public-site.pricing-page .pricing-compact-table > div > b:nth-child(3)::before { content: "Starter"; color: rgba(6, 26, 51, 0.62); }
  .public-site.pricing-page .pricing-compact-table > div > b:nth-child(4)::before { content: "Professional"; color: rgba(6, 26, 51, 0.62); }
  .public-site.pricing-page .pricing-compact-table > div > b:nth-child(5)::before { content: "Organisatie"; color: rgba(6, 26, 51, 0.62); }

  .public-site.pricing-page .pricing-compact-table .compare-icon {
    margin: 0;
  }
}

/* Magazijnmodule eindpolish: compact overzicht, donkere kaarten, leesbare knoppen. */
.portal-active #professional-labels .warehouse-control-grid {
  grid-template-columns: minmax(280px, 1.15fr) repeat(2, minmax(210px, 0.75fr));
  align-items: start;
}

.portal-active #professional-labels .warehouse-control-card {
  padding: 12px !important;
  border-radius: 8px !important;
  min-width: 0;
}

.portal-active #professional-labels .warehouse-control-card h3 {
  font-size: 16px;
  line-height: 1.2;
}

.portal-active #professional-labels .warehouse-control-card p,
.portal-active #professional-labels .warehouse-control-card small {
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.portal-active #professional-labels .warehouse-add-card {
  border-color: rgba(255, 130, 0, 0.26) !important;
}

.portal-active #professional-labels .warehouse-add-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}

.portal-active #professional-labels .warehouse-add-card > summary::after {
  content: "+";
  display: inline-grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 130, 0, 0.38);
  border-radius: 999px;
  color: var(--pf24-orange);
  font-weight: 900;
}

.portal-active #professional-labels .warehouse-add-card[open] > summary::after {
  content: "-";
}

.portal-active #professional-labels .label-form {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
}

.portal-active #professional-labels .label-form button[type="submit"] {
  align-self: end;
  min-width: 0 !important;
}

.portal-active #professional-labels .label-table {
  gap: 8px !important;
}

.portal-active #professional-labels .label-row {
  grid-template-columns: minmax(240px, 1.4fr) minmax(122px, 0.5fr) minmax(220px, 0.95fr) minmax(245px, auto) !important;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  background: linear-gradient(180deg, rgba(11, 32, 54, 0.92), rgba(5, 20, 36, 0.9)) !important;
}

.portal-active #professional-labels .label-row:hover {
  border-color: rgba(255, 130, 0, 0.36) !important;
  background: linear-gradient(180deg, rgba(14, 39, 65, 0.96), rgba(6, 23, 41, 0.94)) !important;
}

.portal-active #professional-labels .label-row strong {
  font-size: 14px;
  line-height: 1.2;
}

.portal-active #professional-labels .label-row small {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.35;
}

.portal-active #professional-labels .label-row code {
  justify-self: start;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-color: rgba(255, 130, 0, 0.2) !important;
  background: rgba(255, 130, 0, 0.08) !important;
  color: #ffd6ad !important;
}

.portal-active #professional-labels .label-row .status-pill {
  width: max-content;
  max-width: 100%;
  background: rgba(255, 130, 0, 0.14) !important;
  color: var(--pf24-orange) !important;
}

.portal-active #professional-labels .label-row-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 245px;
}

.portal-active #professional-labels .label-row-actions .button {
  justify-content: center;
  width: 100%;
  min-height: 31px !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
}

@media (max-width: 1180px) {
  .portal-active #professional-labels .warehouse-control-grid {
    grid-template-columns: 1fr 1fr;
  }

  .portal-active #professional-labels .warehouse-control-grid .warehouse-control-card:first-child {
    grid-column: 1 / -1;
  }

  .portal-active #professional-labels .label-row {
    grid-template-columns: minmax(220px, 1fr) minmax(110px, 0.45fr) minmax(190px, 0.85fr) !important;
  }

  .portal-active #professional-labels .label-row-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .portal-active #professional-labels .warehouse-control-grid,
  .portal-active #professional-labels .label-row {
    grid-template-columns: 1fr !important;
  }

  .portal-active #professional-labels .label-row code {
    max-width: 100%;
  }

  .portal-active #professional-labels .label-row-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.portal-active #professional-labels .warehouse-enterprise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.portal-active #professional-labels .warehouse-enterprise-upsell {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(240px, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid rgba(255, 130, 0, 0.28);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(12, 35, 58, 0.94), rgba(31, 24, 18, 0.86));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.18);
}

.portal-active #professional-labels .warehouse-enterprise-upsell h3 {
  margin: 2px 0 6px;
  color: #fff7ed;
  font-size: 18px;
}

.portal-active #professional-labels .warehouse-enterprise-upsell p,
.portal-active #professional-labels .warehouse-enterprise-upsell li,
.portal-active #professional-labels .warehouse-enterprise-upsell small {
  color: rgba(247, 239, 229, 0.78);
  font-size: 12px;
  line-height: 1.4;
}

.portal-active #professional-labels .warehouse-enterprise-upsell ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.portal-active #professional-labels .warehouse-enterprise-price {
  display: grid;
  gap: 6px;
  min-width: 170px;
}

.portal-active #professional-labels .warehouse-enterprise-price strong {
  color: var(--pf24-orange);
  font-size: 22px;
}

.portal-active #professional-labels .warehouse-enterprise-grid .warehouse-control-card {
  min-height: 0;
}

.portal-active #professional-labels .warehouse-value-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.portal-active #professional-labels .warehouse-value-strip span,
.portal-active #professional-labels .warehouse-connector-list span {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(5, 20, 36, 0.58);
}

.portal-active #professional-labels .warehouse-value-strip strong {
  color: var(--pf24-orange);
  font-size: 17px;
}

.portal-active #professional-labels .warehouse-scanner-flow {
  display: grid;
  gap: 8px;
}

.portal-active #professional-labels .warehouse-scanner-flow > input {
  min-height: 58px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  border-color: rgba(255, 130, 0, 0.44);
  background: rgba(2, 10, 22, 0.92);
}

.portal-active #professional-labels .warehouse-scanner-flow > div,
.portal-active #professional-labels .warehouse-connector-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.portal-active #professional-labels .warehouse-scanner-flow :where(input, select),
.portal-active #professional-labels .warehouse-connector-form :where(input, select),
.portal-active #professional-labels .warehouse-control-card .button {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.portal-active #professional-labels .warehouse-connector-form .wide {
  grid-column: 1 / -1;
}

.portal-active #professional-labels .warehouse-connector-list {
  display: grid;
  gap: 7px;
  margin: 10px 0;
  max-height: 170px;
  overflow: auto;
  scrollbar-width: none;
}

.portal-active #professional-labels .warehouse-connector-list::-webkit-scrollbar,
.portal-active #professional-labels .warehouse-history-list::-webkit-scrollbar {
  display: none;
}

.portal-active #professional-labels .warehouse-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}

.portal-active #professional-labels .warehouse-action-row .button {
  justify-content: center;
}

/* Kassa-module: compacte POS-werkplek met bon, lade, keuken/bar en dagafsluiting. */
.portal-active #professional-pos .pos-register-shell {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(260px, 0.85fr) minmax(260px, 0.8fr);
  gap: 12px;
  align-items: start;
}

.portal-active #professional-pos :where(.pos-register-left, .pos-ticket-panel, .pos-register-right, .pos-register-empty) {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(10, 36, 62, 0.96), rgba(5, 20, 36, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.portal-active #professional-pos .pos-register-left,
.portal-active #professional-pos .pos-ticket-panel,
.portal-active #professional-pos .pos-register-right {
  padding: 12px;
}

.portal-active #professional-pos .pos-register-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.portal-active #professional-pos .pos-register-toolbar,
.portal-active #professional-pos .pos-ticket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.portal-active #professional-pos .pos-register-toolbar span,
.portal-active #professional-pos .pos-ticket-head span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.portal-active #professional-pos .pos-register-toolbar strong,
.portal-active #professional-pos .pos-ticket-head strong {
  color: #fff7ed;
  font-size: 17px;
  line-height: 1.15;
}

.portal-active #professional-pos .pos-register-toolbar small,
.portal-active #professional-pos .pos-ticket-head small,
.portal-active #professional-pos .pos-status-list small,
.portal-active #professional-pos .pos-product-button span {
  color: rgba(226, 232, 240, 0.72);
  font-size: 11px;
  line-height: 1.25;
}

.portal-active #professional-pos .pos-register-toolbar b,
.portal-active #professional-pos .pos-ticket-head b {
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 130, 0, 0.16);
  color: var(--pf24-orange);
  white-space: nowrap;
}

.portal-active #professional-pos .pos-product-groups,
.portal-active #professional-pos .pos-pay-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.portal-active #professional-pos .pos-product-groups button,
.portal-active #professional-pos .pos-product-button {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(15, 40, 65, 0.96);
  color: #fff7ed;
  cursor: pointer;
}

.portal-active #professional-pos .pos-product-groups button {
  display: grid;
  gap: 2px;
  padding: 8px;
  text-align: left;
  font-weight: 800;
}

.portal-active #professional-pos .pos-product-groups button.active {
  border-color: rgba(255, 130, 0, 0.72);
  background: rgba(255, 130, 0, 0.18);
}

.portal-active #professional-pos .pos-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}

.portal-active #professional-pos .pos-session-form,
.portal-active #professional-pos .pos-scan-form,
.portal-active #professional-pos .pos-product-manage-form {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 8px;
  background: rgba(3, 18, 32, 0.72);
}

.portal-active #professional-pos .pos-scan-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.portal-active #professional-pos .pos-session-form {
  margin-bottom: 10px;
}

.portal-active #professional-pos .pos-scan-form .form-message {
  grid-column: 1 / -1;
  margin: 0;
}

.portal-active #professional-pos .pos-session-form label,
.portal-active #professional-pos .pos-scan-form label,
.portal-active #professional-pos .pos-product-manage-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: rgba(226, 232, 240, 0.82);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.portal-active #professional-pos :where(.pos-session-form, .pos-scan-form, .pos-product-manage-form) :where(input, select) {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  background: rgba(2, 10, 22, 0.9);
  color: #fff7ed;
  padding: 8px 9px;
  font: inherit;
}

.portal-active #professional-pos :where(.pos-session-form, .pos-scan-form, .pos-product-manage-form) select option {
  background: #071827;
  color: #fff7ed;
}

.portal-active #professional-pos .pos-product-manage-form {
  margin-top: 10px;
}

.portal-active #professional-pos .pos-product-button {
  display: grid;
  gap: 5px;
  min-height: 88px;
  padding: 10px;
  text-align: left;
}

.portal-active #professional-pos .pos-product-button strong {
  font-size: 15px;
  line-height: 1.15;
}

.portal-active #professional-pos .pos-product-button b {
  color: var(--pf24-orange);
  font-size: 16px;
}

.portal-active #professional-pos .pos-ticket-lines,
.portal-active #professional-pos .pos-status-list {
  display: grid;
  gap: 7px;
}

.portal-active #professional-pos .pos-ticket-lines {
  min-height: 170px;
  margin-bottom: 10px;
}

.portal-active #professional-pos .pos-ticket-lines span,
.portal-active #professional-pos .pos-status-list span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.portal-active #professional-pos .pos-ticket-lines b {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}

.portal-active #professional-pos .pos-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.portal-active #professional-pos .pos-stat-grid article {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.04);
}

.portal-active #professional-pos .pos-stat-grid strong {
  color: var(--pf24-orange);
  font-size: 16px;
}

.portal-active #professional-pos .pos-stat-grid span {
  display: block;
  margin-top: 2px;
  color: rgba(226, 232, 240, 0.72);
  font-size: 11px;
}

.portal-active #professional-pos .pos-status-list {
  margin-top: 10px;
}

.portal-active #professional-pos .pos-status-list h4 {
  margin: 0;
  color: #fff7ed;
}

.portal-active #professional-pos .pos-benefit-form {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.portal-active #professional-pos .pos-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.portal-active #professional-pos .pos-benefit-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: rgba(226, 232, 240, 0.78);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.portal-active #professional-pos .pos-benefit-grid .wide {
  grid-column: 1 / -1;
}

.portal-active #professional-pos .pos-benefit-grid :where(input, select) {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(2, 10, 22, 0.86);
  color: #fff7ed;
  padding: 8px 9px;
  font: inherit;
}

.portal-active #professional-pos .pos-status-list span {
  grid-template-columns: 1fr;
}

.portal-active #professional-team .benefit-budget-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 9px;
}

.portal-active #professional-team .benefit-budget-list article {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(255, 130, 0, 0.22);
  border-radius: 8px;
  background: rgba(255, 130, 0, 0.08);
}

.portal-active #professional-team .benefit-budget-list strong {
  color: #fff7ed;
}

.portal-active #professional-team .benefit-budget-list span {
  color: var(--pf24-orange);
  font-weight: 900;
}

.portal-active #professional-team .benefit-budget-list small {
  color: rgba(226, 232, 240, 0.72);
}

/* Brede kwaliteitslaag: formulieren rustig inline bewerken zonder los scherm. */
.admin-body:has(#dashboard:not(.hidden)) .smart-edit-surface,
.portal-active .smart-edit-surface {
  position: relative;
}

.admin-body:has(#dashboard:not(.hidden)) .smart-edit-toolbar,
.portal-active .smart-edit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  grid-column: 1 / -1;
  margin: 0 0 10px;
  padding: 8px 9px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(2, 15, 29, 0.42);
}

.admin-body:has(#dashboard:not(.hidden)) .smart-edit-toolbar span,
.portal-active .smart-edit-toolbar span {
  color: rgba(226, 232, 240, 0.72);
  font-size: 12px;
  font-weight: 800;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .smart-edit-toolbar,
html[data-theme="light"] .portal-active .smart-edit-toolbar {
  border-color: #d9e0e7;
  background: #eef2f5;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .smart-edit-toolbar span,
html[data-theme="light"] .portal-active .smart-edit-toolbar span {
  color: #5b6978;
}

body.smart-edit-mode::before {
  content: none !important;
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .smart-edit-surface.smart-edit-active,
.portal-active .smart-edit-surface.smart-edit-active {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  align-content: start !important;
  gap: 10px !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 10px 0 !important;
  overflow: visible !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 130, 0, 0.34) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(8, 30, 52, 0.98), rgba(3, 13, 25, 0.98)) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .smart-edit-surface.smart-edit-active::-webkit-scrollbar,
.portal-active .smart-edit-surface.smart-edit-active::-webkit-scrollbar {
  display: initial;
}

.admin-body:has(#dashboard:not(.hidden)) .smart-edit-surface.smart-edit-active :where(button[type="submit"], .button.primary[type="submit"]),
.portal-active .smart-edit-surface.smart-edit-active :where(button[type="submit"], .button.primary[type="submit"]) {
  position: static;
  z-index: 3;
  grid-column: 1 / -1;
  min-height: 46px;
  margin-top: 8px;
}

.admin-body:has(#dashboard:not(.hidden)) .smart-edit-close,
.portal-active .smart-edit-close {
  position: static;
  z-index: 4;
  justify-self: end;
  grid-column: 1 / -1;
  min-height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(15, 40, 65, 0.96);
  color: #fff7ed;
  font-weight: 900;
  padding: 0 14px;
  cursor: pointer;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.smart-edit-surface label, .smart-edit-surface .checkbox-line),
.portal-active :where(.smart-edit-surface label, .smart-edit-surface .checkbox-line) {
  min-width: 0;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.smart-edit-surface input, .smart-edit-surface select, .smart-edit-surface textarea),
.portal-active :where(.smart-edit-surface input, .smart-edit-surface select, .smart-edit-surface textarea) {
  min-width: 0;
}

.admin-body:has(#dashboard:not(.hidden)) .smart-edit-surface textarea,
.portal-active .smart-edit-surface textarea {
  min-height: 78px;
  max-height: 170px;
  resize: vertical;
}

.admin-body:has(#dashboard:not(.hidden)) .smart-edit-surface.smart-edit-active .wide,
.portal-active .smart-edit-surface.smart-edit-active .wide {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .admin-body:has(#dashboard:not(.hidden)) .smart-edit-surface.smart-edit-active,
  .portal-active .smart-edit-surface.smart-edit-active {
    inset: auto !important;
    grid-template-columns: 1fr !important;
    max-height: none !important;
    padding: 12px !important;
  }
}

/* Centrale productaanmaak en verkoopkanalen */
.warehouse-product-core {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.warehouse-product-core .warehouse-product-scan {
  align-self: end;
  min-height: 40px;
}

.warehouse-product-lookup-message {
  align-self: end;
  margin: 0;
}

.warehouse-sales-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.warehouse-sales-channels legend {
  width: 100%;
}

.warehouse-sales-channels .checkbox-line {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
}

.warehouse-product-advanced {
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
}

.warehouse-product-advanced > summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 700;
}

.warehouse-product-advanced-grid {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}

.pos-v2-channel-switch {
  display: flex;
  gap: 6px;
  padding: 8px 10px 0;
}

.pos-v2-channel-switch button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  background: var(--surface-2);
  font-weight: 700;
}

.pos-v2-channel-switch button.active {
  border-color: var(--accent);
  color: var(--accent-contrast);
  background: var(--accent);
}

.pos-product-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

@media (max-width: 760px) {
  .warehouse-product-core {
    grid-template-columns: 1fr 1fr;
  }

  .warehouse-product-lookup-message {
    grid-column: 1 / -1;
  }
}

/* Professional administration: one compact control surface for sales, work and operations. */
.professional-admin-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.professional-admin-kpis article,
.professional-admin-channel-grid article,
.professional-admin-close-form,
.professional-admin-closures {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(15, 23, 42, .62);
  color: #e8eef6;
}

.professional-admin-kpis article {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
}

.professional-admin-kpis span,
.professional-admin-kpis small,
.professional-admin-channel-grid span,
.professional-admin-close-form small,
.professional-admin-closure-list small {
  color: #aebed0;
  font-size: .76rem;
}

.professional-admin-kpis strong {
  font-size: 1.08rem;
}

.professional-admin-kpis .is-ok {
  border-color: rgba(34, 197, 94, .42);
}

.professional-admin-kpis .needs-attention {
  border-color: rgba(245, 158, 11, .55);
}

.professional-admin-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.professional-admin-result {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(15, 23, 42, .32);
}

.professional-admin-result > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.professional-admin-result > header > div {
  display: grid;
  gap: 2px;
}

.professional-admin-result > header small,
.professional-admin-result-grid span,
.professional-admin-result-grid small {
  color: #aebed0;
  font-size: .76rem;
}

.professional-admin-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.professional-admin-result-grid article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 7px;
}

.professional-admin-result-grid strong {
  font-size: 1.08rem;
}

.professional-admin-result-grid .is-positive strong {
  color: #86efac;
}

.professional-admin-result-grid .is-negative strong {
  color: #fca5a5;
}

.professional-admin-result details {
  border-top: 1px solid rgba(148, 163, 184, .14);
  padding-top: 8px;
}

.professional-admin-result details > div {
  display: grid;
  gap: 4px;
  padding-top: 7px;
}

.professional-admin-result details span {
  font-size: .78rem;
}

.professional-purchase-invoices {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(15, 23, 42, .32);
}

.professional-purchase-invoices-head,
.professional-purchase-invoice-totals,
.professional-purchase-invoice-actions,
.professional-purchase-invoice-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.professional-purchase-invoices-head {
  justify-content: space-between;
}

.professional-purchase-invoices-head > div:first-child {
  display: grid;
  gap: 2px;
}

.professional-purchase-invoices-head small,
.professional-purchase-invoice-list :where(span, small) {
  color: #aebed0;
  font-size: .76rem;
}

.professional-purchase-invoice-totals {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.professional-purchase-invoice-totals span {
  padding: 4px 7px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 6px;
  font-size: .75rem;
}

.professional-purchase-invoice-totals .overdue {
  border-color: rgba(239, 68, 68, .45);
  color: #fecaca;
}

.professional-history-scan {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(245, 158, 11, .32);
  border-radius: 8px;
  background: rgba(255, 247, 237, .72);
  color: #0f172a;
}

.professional-history-scan > div:first-child {
  display: grid;
  gap: 2px;
}

.professional-history-scan > div:first-child span,
.professional-history-scan small,
.professional-history-scan details span {
  color: #526173;
}

.professional-history-scan-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.professional-history-scan-metrics span,
.professional-history-scan details article {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 7px;
  background: #fff;
}

.professional-history-scan details {
  background: transparent;
}

.professional-history-scan details > summary {
  font-size: .78rem;
  font-weight: 800;
  color: #0f172a;
}

.professional-purchase-invoice-entry {
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 7px;
  background: rgba(15, 23, 42, .36);
}

.professional-purchase-invoice-entry > summary {
  padding: 9px 11px;
  cursor: pointer;
  font-weight: 700;
  color: #e8eef6 !important;
  background: transparent;
}

.professional-purchase-invoice-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 11px 11px;
}

.professional-purchase-invoice-form label,
.professional-purchase-invoice-payment label {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: .76rem;
}

.professional-purchase-invoice-form .wide {
  grid-column: 1 / -1;
}

.professional-purchase-invoice-list {
  display: grid;
  gap: 6px;
  max-height: 330px;
  overflow-y: auto;
  scrollbar-width: none;
}

.professional-purchase-invoice-list::-webkit-scrollbar {
  display: none;
}

.professional-purchase-invoice-list > article {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(105px, auto) auto;
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 7px;
}

.professional-purchase-invoice-list > article.needs-attention {
  border-color: rgba(245, 158, 11, .42);
}

.professional-purchase-invoice-main,
.professional-purchase-invoice-amount {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.professional-purchase-invoice-amount {
  text-align: right;
}

.risk-pill {
  justify-self: end;
  width: max-content;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid rgba(34, 197, 94, .24);
  border-radius: 999px;
  background: rgba(34, 197, 94, .08);
  color: #166534;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.15;
}

.risk-pill.medium {
  border-color: rgba(245, 158, 11, .35);
  background: rgba(245, 158, 11, .1);
  color: #92400e;
}

.risk-pill.high {
  border-color: rgba(239, 68, 68, .36);
  background: rgba(239, 68, 68, .1);
  color: #991b1b;
}

.professional-purchase-invoice-row-actions {
  justify-content: flex-end;
}

.professional-purchase-invoice-row-actions .button {
  min-height: 34px;
  margin: 0;
}

.professional-purchase-invoice-list article > details,
.professional-purchase-invoice-payment {
  grid-column: 1 / -1;
}

.professional-purchase-invoice-list article > details {
  padding-top: 5px;
  border-top: 1px solid rgba(148, 163, 184, .12);
  background: transparent;
  color: #e8eef6;
}

.professional-purchase-invoice-list article > details > summary {
  color: #e8eef6 !important;
  background: transparent;
  font-size: .76rem;
  font-weight: 700;
}

.professional-purchase-invoice-list article > details span {
  display: block;
  padding-top: 4px;
}

.professional-purchase-invoice-payment {
  display: grid;
  grid-template-columns: minmax(120px, .7fr) minmax(180px, 1.3fr) auto;
  gap: 8px;
  align-items: end;
  padding-top: 7px;
  border-top: 1px solid rgba(148, 163, 184, .12);
}

.professional-purchase-invoice-payment .form-message {
  grid-column: 1 / -1;
}

.professional-admin-channel-grid article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
}

.professional-admin-channel-grid article > span {
  grid-column: 1 / -1;
}

.professional-admin-channel-grid .button {
  justify-self: start;
}

.professional-admin-channel-head {
  display: contents;
}

.professional-admin-attention {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(245, 158, 11, .45);
  border-radius: 8px;
  background: rgba(245, 158, 11, .09);
}

.professional-admin-attention span {
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(15, 23, 42, .38);
  font-size: .78rem;
}

.professional-admin-close-grid {
  display: grid;
  grid-template-columns: minmax(330px, .9fr) minmax(420px, 1.1fr);
  gap: 10px;
}

.professional-admin-close-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.professional-admin-close-form .wide {
  grid-column: 1 / -1;
}

.professional-admin-close-actions {
  display: grid;
  grid-template-columns: minmax(150px, 1.15fr) repeat(2, minmax(130px, .85fr));
  gap: 8px;
}

.professional-admin-close-actions .button,
.professional-admin-export-actions .button {
  min-height: 36px;
  margin: 0;
}

.professional-admin-close-form > div,
.professional-admin-close-form label {
  display: grid;
  gap: 4px;
}

.professional-admin-closures {
  padding: 12px;
}

.professional-admin-closures-head,
.professional-admin-closure-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
}

.professional-admin-closures-head {
  margin-bottom: 8px;
}

.professional-admin-closure-list {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  scrollbar-width: none;
}

.professional-admin-closure-list::-webkit-scrollbar {
  display: none;
}

.professional-admin-closure-list article {
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 7px;
}

.professional-admin-closure-list article > div {
  display: grid;
  gap: 2px;
}

.professional-admin-closure-list article > .professional-admin-export-actions {
  display: flex;
  gap: 6px;
}

.professional-admin-export-actions .button.compact {
  min-width: 54px;
  padding: 6px 9px;
  font-size: .74rem;
}

html[data-theme="light"] :where(.professional-admin-kpis article, .professional-admin-channel-grid article, .professional-admin-close-form, .professional-admin-closures) {
  border-color: rgba(15, 23, 42, .12);
  background: #f8fafc;
  color: #0f172a;
}

html[data-theme="light"] .professional-admin-result {
  border-color: rgba(15, 23, 42, .12);
  background: #f8fafc;
  color: #0f172a;
}

html[data-theme="light"] .professional-purchase-invoices {
  border-color: rgba(15, 23, 42, .12);
  background: #f8fafc;
  color: #0f172a;
}

html[data-theme="light"] .professional-purchase-invoice-entry,
html[data-theme="light"] .professional-purchase-invoice-list > article {
  border-color: rgba(15, 23, 42, .12);
  background: #fff;
}

html[data-theme="light"] .professional-purchase-invoice-entry > summary,
html[data-theme="light"] .professional-purchase-invoice-list article > details,
html[data-theme="light"] .professional-purchase-invoice-list article > details > summary {
  color: #10243a !important;
  background: transparent;
}

html[data-theme="light"] .professional-purchase-invoices-head small,
html[data-theme="light"] .professional-purchase-invoice-list :where(span, small) {
  color: #526173;
}

html[data-theme="light"] .professional-purchase-invoice-totals .overdue {
  color: #b91c1c;
}

html[data-theme="light"] :where(.professional-admin-result > header small, .professional-admin-result-grid span, .professional-admin-result-grid small) {
  color: #526173;
}

html[data-theme="light"] .professional-admin-result-grid article {
  border-color: rgba(15, 23, 42, .1);
  background: #fff;
}

html[data-theme="light"] .professional-admin-result-grid .is-positive strong {
  color: #166534;
}

html[data-theme="light"] .professional-admin-result-grid .is-negative strong {
  color: #b91c1c;
}

html[data-theme="light"] :where(.professional-admin-kpis span, .professional-admin-kpis small, .professional-admin-channel-grid span, .professional-admin-close-form small, .professional-admin-closure-list small) {
  color: #526173;
}

html[data-theme="light"] .professional-admin-attention {
  background: #fffbeb;
  color: #78350f;
}

html[data-theme="light"] .professional-admin-attention span {
  background: #fef3c7;
}

html[data-theme="light"] .portal-active .portal-notifications article {
  background: #eaf2f8 !important;
  border-color: #c4d2df !important;
  color: #10243a !important;
}

html[data-theme="light"] .portal-active .portal-notifications :where(strong, span) {
  color: #10243a !important;
}

html[data-theme="light"] .portal-active .portal-notifications .secondary-action {
  border-color: #9fb2c5 !important;
  background: #ffffff !important;
  color: #17324d !important;
}

html[data-theme="light"] body.login-entry .portal-topbar :where(.nav-links a, .admin-title) {
  color: #f8fafc !important;
}

html[data-theme="light"] body.login-entry .login-panel :where(.quiet-link, .login-recovery-link) {
  color: #8a3d00 !important;
}

html[data-theme="light"] body.login-entry :where(.badge-login-form, .test-login-panel) {
  border-color: #c8d3df !important;
  background: #eef3f8 !important;
  color: #10243a !important;
}

html[data-theme="light"] body.login-entry :where(.badge-login-form, .test-login-panel) :where(label, strong, span) {
  color: #10243a !important;
}

html[data-theme="light"] body.login-entry :where(.badge-login-form, .portal-actions) .secondary,
html[data-theme="light"] body.login-entry .badge-login-form button {
  border-color: #9fb2c5 !important;
  background: #ffffff !important;
  color: #17324d !important;
}

html[data-theme="light"] body.login-entry .login-panel .login-recovery-link {
  color: #743100 !important;
  background: transparent !important;
}

html[data-theme="light"] body.login-entry .test-login-panel > div :where(strong, span) {
  color: #10243a !important;
}

html[data-theme="light"] body.login-entry .test-login-grid :where(button, a) {
  border-color: #b9c8d7 !important;
  background: #ffffff !important;
  color: #10243a !important;
}

html[data-theme="light"] body.login-entry .test-login-choice :where(strong, span, small) {
  color: #10243a !important;
}

html[data-theme="light"] .professional-admin-channel-head :where(strong, b),
html[data-theme="light"] .professional-admin-channel-grid article > b {
  color: #0f172a !important;
}

@media (max-width: 980px) {
  .professional-admin-kpis,
  .professional-admin-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .professional-admin-close-grid {
    grid-template-columns: 1fr;
  }

  .professional-purchase-invoice-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .professional-admin-kpis,
  .professional-admin-channel-grid,
  .professional-admin-result-grid,
  .professional-admin-close-form {
    grid-template-columns: 1fr;
  }

  .professional-admin-close-form .wide {
    grid-column: auto;
  }

  .professional-admin-close-actions {
    grid-template-columns: 1fr;
  }

  .professional-purchase-invoices-head,
  .professional-purchase-invoice-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .professional-purchase-invoice-totals {
    justify-content: flex-start;
  }

  .professional-purchase-invoice-form,
  .professional-purchase-invoice-list > article,
  .professional-purchase-invoice-payment {
    grid-template-columns: 1fr;
  }

  .professional-purchase-invoice-form .wide {
    grid-column: auto;
  }

  .professional-purchase-invoice-amount {
    text-align: left;
  }

  .professional-purchase-invoice-row-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .professional-admin-closures-head,
  .professional-admin-closure-list article {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .professional-admin-closure-list article > span {
    grid-column: 1 / -1;
  }

  .professional-admin-closure-list article > .professional-admin-export-actions {
    grid-column: 1 / -1;
  }
}

/* Compacte barcodecamera met blijvende terugkoppeling */
.portal-active #professional-labels .warehouse-camera-panel {
  width: min(440px, calc(100vw - 24px));
  padding: 9px;
}

.portal-active #professional-labels .warehouse-camera-preview {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  border-radius: 6px;
  background: #000;
}

.portal-active #professional-labels .warehouse-camera-panel .warehouse-camera-preview video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  object-fit: cover;
}

.portal-active #professional-labels .warehouse-camera-preview > span {
  position: absolute;
  inset: 34% 8%;
  border: 2px solid #ff8200;
  border-radius: 6px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .2);
  pointer-events: none;
}

.portal-active #professional-labels .warehouse-camera-panel .warehouse-camera-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 8px;
  align-items: center;
  padding: 9px 2px 0;
}

.portal-active #professional-labels .warehouse-camera-controls > strong {
  grid-column: 1 / -1;
  color: #f8fbff !important;
}

.portal-active #professional-labels .warehouse-camera-controls > span {
  color: #aebed0 !important;
  font-size: .76rem;
}

.portal-active #professional-labels .warehouse-camera-panel .warehouse-camera-controls .button {
  grid-column: auto;
  grid-row: auto;
}

.portal-active #professional-labels .warehouse-camera-file {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.portal-active #professional-labels .warehouse-camera-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.portal-active #professional-labels .warehouse-scan-message {
  grid-column: 1 / -1;
  min-height: 22px;
  margin: 0;
  padding: 5px 7px;
  border-radius: 5px;
  color: var(--pf24-muted) !important;
  font-size: .75rem;
}

.portal-active #professional-labels .warehouse-scan-message[data-tone="success"] {
  background: rgba(34, 197, 94, .12);
  color: #86efac !important;
}

.portal-active #professional-labels .warehouse-scan-message[data-tone="warning"] {
  background: rgba(245, 158, 11, .12);
  color: #fcd34d !important;
}

html[data-theme="light"] .portal-active #professional-labels .warehouse-scan-message[data-tone="success"] {
  background: #e8f7ee;
  color: #12653a !important;
}

html[data-theme="light"] .portal-active #professional-labels .warehouse-scan-message[data-tone="warning"] {
  background: #fff4df;
  color: #7a4100 !important;
}

/* Assistentacties staan in elke toegestane rol op dezelfde plek en in dezelfde vorm. */
.portal-assistant-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 2px 0 4px !important;
  padding: 0 !important;
}

.portal-assistant-actions .voice-menu-icon-button {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 1px solid #e86f0b !important;
  border-radius: 50% !important;
  background: #f58220 !important;
  color: #fff !important;
}

.portal-assistant-actions .voice-menu-icon-button:hover,
.portal-assistant-actions .voice-menu-icon-button:focus-visible {
  background: #d96508 !important;
  border-color: #bd5604 !important;
  color: #fff !important;
}

@media (max-width: 719px) {
  .portal-active #portalDashboard > :where(.professional-section-nav, .portal-section-nav) .portal-assistant-actions {
    order: -1 !important;
    flex: 0 0 78px !important;
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  .portal-active #portalDashboard > :where(.professional-section-nav, .portal-section-nav) .portal-assistant-actions .voice-menu-icon-button {
    flex-basis: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
}

@media (max-width: 520px) {
  .portal-active #professional-labels .warehouse-camera-panel .warehouse-camera-controls {
    grid-template-columns: 1fr 1fr;
  }

.portal-active #professional-labels .warehouse-camera-controls > :where(strong, span) {
    grid-column: 1 / -1;
  }
}

/* Definitive readability guard 2026-08-03.
   This block intentionally lives at the end because older pilot styles are still present above it. */
html[data-theme="light"] :where(body, .admin-body, .portal-active, .public-site) {
  color: #10243a !important;
}

html[data-theme="light"] :where(.topbar, .portal-topbar, .admin-body .topbar, .portal-active .topbar) {
  background: #0f2d4a !important;
  color: #f8fbff !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

html[data-theme="light"] :where(.topbar, .portal-topbar, .admin-body .topbar, .portal-active .topbar) :where(.admin-title, a, button, label, span, strong, small) {
  color: #f8fbff !important;
}

html[data-theme="light"] :where(.topbar, .portal-topbar) select,
html[data-theme="light"] :where(.topbar, .portal-topbar) .language-select {
  background: #eef6fb !important;
  color: #10243a !important;
  border-color: #d7e3ec !important;
}

html[data-theme="light"] :where(.admin-tabs, .professional-section-nav, .portal-section-nav, .portal-nav, .nav-links) {
  background: #eef4f8 !important;
  color: #10243a !important;
  border-color: #d7e3ec !important;
}

html[data-theme="light"] :where(.admin-tabs, .professional-section-nav, .portal-section-nav, .portal-nav, .nav-links) :where(a, button, summary, label, span, strong, small) {
  color: #10243a !important;
}

html[data-theme="light"] :where(.admin-tabs, .professional-section-nav, .portal-section-nav, .portal-nav, .nav-links) :where(.active, [aria-selected="true"], button.active, a.active) {
  background: #ff8200 !important;
  color: #111827 !important;
  border-color: #ff8200 !important;
}

html[data-theme="light"] :where(.content-card, .portal-panel, .login-panel, .metric-card, .module-card, .pricing-card, .package-card, .dashboard-card, .form-card, details, fieldset, .panel, .card, .surface) {
  background: #ffffff !important;
  color: #10243a !important;
  border-color: #d7e3ec !important;
}

html[data-theme="light"] :where(.content-card, .portal-panel, .login-panel, .metric-card, .module-card, .pricing-card, .package-card, .dashboard-card, .form-card, details, fieldset, .panel, .card, .surface) :where(h1, h2, h3, h4, p, li, label, span, strong, small, summary, td, th) {
  color: #10243a !important;
}

html[data-theme="light"] :where(.muted, .form-message, .help-text, .subtle, small) {
  color: #50657a !important;
}

html[data-theme="light"] :where(input, select, textarea) {
  background: #ffffff !important;
  color: #10243a !important;
  border-color: #b9c8d6 !important;
}

html[data-theme="light"] :where(input, textarea)::placeholder {
  color: #6b7f93 !important;
}

html[data-theme="light"] body.public-site :where(.package-price-overview, .pricing-plan-grid, .package-composer, .targeted-pricing) :where(.price-promo, .discount-price, [class*="price"], [class*="cost"]) {
  background: #fff4e8 !important;
  color: #10243a !important;
  border-color: #f0c28f !important;
}

html[data-theme="light"] body.public-site :where(.package-price-overview, .pricing-plan-grid, .package-composer, .targeted-pricing) :where(.price-promo, .discount-price, [class*="price"], [class*="cost"]) :where(strong, b, span, small, i, s) {
  color: #10243a !important;
}

body.public-site .public-brand-logo,
body.public-site .topbar .brand img {
  object-fit: contain !important;
}

/* Public readability guard 2026-08-03: keep public/login screens readable after older theme overrides. */
html[data-theme="light"] body.login-entry {
  background: #eef4f7 !important;
  color: #07182d !important;
}

html[data-theme="light"] body.login-entry .topbar {
  background: #d9e7ef !important;
  border-bottom-color: #b8cbd8 !important;
}

html[data-theme="light"] body.login-entry .topbar :where(a, button, label, span, strong),
html[data-theme="light"] body.login-entry .brand {
  color: #07182d !important;
}

html[data-theme="light"] body.login-entry .login-panel {
  background: #f8fbfd !important;
  color: #07182d !important;
  border-color: #b8cbd8 !important;
}

html[data-theme="light"] body.login-entry .login-panel :where(h1, h2, h3, strong, label, label span, p, small) {
  color: #07182d !important;
}

html[data-theme="light"] body.login-entry .login-panel .form-message,
html[data-theme="light"] body.login-entry .login-panel .quiet-link {
  color: #314961 !important;
}

html[data-theme="light"] body.login-entry :where(input, select, textarea) {
  background: #ffffff !important;
  color: #07182d !important;
  border-color: #bac9d5 !important;
}

html[data-theme="light"] body.login-entry :where(input::placeholder, textarea::placeholder) {
  color: #66788b !important;
  opacity: 1 !important;
}

body.public-site.signup-look .topbar .brand,
body.public-site.signup-look .topbar .public-brand,
body.public-site.signup-look .topbar [data-public-brand] {
  min-width: 150px !important;
  width: 180px !important;
  overflow: visible !important;
}

body.public-site.signup-look .topbar .brand img,
body.public-site.signup-look .topbar .public-brand img,
body.public-site.signup-look .topbar [data-public-brand] img {
  width: 180px !important;
  max-width: 180px !important;
  height: 52px !important;
  object-fit: contain !important;
}

html[data-theme="light"] body.public-site.signup-look .signup-package-preference,
html[data-theme="light"] body.public-site.signup-look .legal-consent-note {
  background: #fff6ec !important;
  color: #102438 !important;
  border-color: #ffb66d !important;
}

html[data-theme="light"] body.public-site.signup-look .signup-package-preference :where(p, span, strong, small),
html[data-theme="light"] body.public-site.signup-look .legal-consent-note :where(p, span, strong, small, a) {
  color: #102438 !important;
}

html[data-theme="light"] body.public-site.signup-look details,
html[data-theme="light"] body.public-site.signup-look summary {
  background: #ffffff !important;
  color: #07182d !important;
  border-color: #bac9d5 !important;
}

html[data-theme="light"] body.public-site :where(.package-price-overview, .pricing-plan-grid, .package-composer, .package-composer-summary, .targeted-pricing) :where(span, small, p, li) {
  color: #263f57 !important;
}

html[data-theme="light"] body.public-site :where(.package-price-overview, .pricing-plan-grid, .package-composer, .package-composer-summary, .targeted-pricing) :where(h2, h3, strong, b) {
  color: #07182d !important;
}

html[data-theme="light"] body.public-site :where(.package-price-overview, .pricing-plan-grid, .package-composer, .package-composer-summary, .targeted-pricing) :where(.eyebrow, [class*="badge"], [class*="pill"]) {
  color: #07182d !important;
}

/* Final light-mode contrast guard: stop dark-blue text from landing on dark-blue surfaces. */
html[data-theme="light"] :where(.portal-active, .admin-body:not(.login-entry)) {
  color: #0f172a !important;
}

html[data-theme="light"] :where(.portal-active, .admin-body:not(.login-entry)) :where(.topbar, .portal-topbar, .admin-tabs, .professional-section-nav, .portal-section-nav) {
  background: #dceaf1 !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
}

html[data-theme="light"] :where(.portal-active, .admin-body:not(.login-entry)) :where(.topbar, .portal-topbar, .admin-tabs, .professional-section-nav, .portal-section-nav) :where(a, button, summary, label, span, strong, small, select) {
  color: #0f172a !important;
}

html[data-theme="light"] :where(.portal-active, .admin-body:not(.login-entry)) :where(.admin-tabs, .professional-section-nav, .portal-section-nav) :where(button, a, summary, select, .sidebar-chat-compact) {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
}

html[data-theme="light"] :where(.portal-active, .admin-body:not(.login-entry)) :where(.admin-tabs, .professional-section-nav, .portal-section-nav) :where(button.active, a.active, [aria-current="page"]) {
  background: #ff8200 !important;
  color: #06111f !important;
  border-color: #ff8200 !important;
}

html[data-theme="light"] :where(.portal-active, .admin-body:not(.login-entry)) :where(.panel, .portal-panel, .card, .stat-card, .metric-card, .admin-card, .module-card, section, article, details) {
  color: #0f172a;
}

html[data-theme="light"] :where(.portal-active, .admin-body:not(.login-entry)) :where(.panel, .portal-panel, .card, .stat-card, .metric-card, .admin-card, .module-card, section, article, details) :where(h1, h2, h3, h4, strong, b, label, summary) {
  color: #0f172a !important;
}

html[data-theme="light"] :where(.portal-active, .admin-body:not(.login-entry)) :where(.panel, .portal-panel, .card, .stat-card, .metric-card, .admin-card, .module-card, section, article, details) :where(p, li, span, small, td, th) {
  color: #334155 !important;
}

html[data-theme="light"] :where(.portal-active, .admin-body:not(.login-entry)) :where(input, select, textarea) {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
}

html[data-theme="light"] :where(.portal-active, .admin-body:not(.login-entry)) :where(input::placeholder, textarea::placeholder) {
  color: #64748b !important;
  opacity: 1 !important;
}

/* Need-to-know proceshulp */
.need-to-know-assistant {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--pf24-line) 82%, #ff8200 18%);
  border-radius: 6px;
  background: var(--pf24-panel);
  color: var(--pf24-text);
  overflow: hidden;
}

.need-to-know-assistant > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.need-to-know-assistant > summary::-webkit-details-marker { display: none; }

.need-to-know-assistant > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.need-to-know-assistant > summary svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: #ff8200;
}

.need-to-know-assistant > summary small {
  color: var(--pf24-muted);
  text-align: right;
}

.need-to-know-assistant[open] > summary {
  border-bottom: 1px solid var(--pf24-line);
}

.need-to-know-assistant form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 12px 12px 8px;
}

.need-to-know-assistant form label { min-width: 0; }
.need-to-know-assistant form textarea { min-height: 58px; resize: vertical; }
.need-to-know-assistant form .form-message { grid-column: 1 / -1; min-height: 18px; margin: 0; }

.need-to-know-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 10px;
}

.need-to-know-examples button {
  border: 1px solid var(--pf24-line);
  border-radius: 999px;
  background: var(--pf24-panel-strong);
  color: var(--pf24-text);
  padding: 6px 9px;
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
}

.need-to-know-answer {
  display: grid;
  gap: 8px;
  margin: 0 12px 12px;
  padding: 11px;
  border-left: 3px solid #1f9d62;
  background: color-mix(in srgb, var(--pf24-panel-strong) 88%, #1f9d62 12%);
}

.need-to-know-answer.restricted {
  border-left-color: #d97706;
  background: color-mix(in srgb, var(--pf24-panel-strong) 88%, #d97706 12%);
}

.need-to-know-answer > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.need-to-know-answer > div svg { width: 18px; height: 18px; flex: 0 0 18px; }
.need-to-know-answer p, .need-to-know-answer small { margin: 0; }
.need-to-know-answer small { color: var(--pf24-muted); }

.need-to-know-answer ol {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: process-step;
}

.need-to-know-answer li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  counter-increment: process-step;
}

.need-to-know-answer li strong { color: #ff8200; font-size: .75rem; }
.need-to-know-answer li span { overflow-wrap: anywhere; }

.customer-overview-hero + .need-to-know-assistant { margin-top: 10px; }
.customer-mobile-app > .need-to-know-assistant { margin-top: 10px; }

@media (max-width: 640px) {
  .need-to-know-assistant > summary { align-items: flex-start; }
  .need-to-know-assistant > summary small { max-width: 45%; }
  .need-to-know-assistant form { grid-template-columns: 1fr; }
  .need-to-know-assistant form .button { width: 100%; }
}

/* Professional signup: keep every composed-package field inside a phone viewport. */
@media (max-width: 760px) {
  html,
  body,
  .public-site.signup-look,
  .public-site.signup-look .admin-shell,
  .public-site.signup-look .portal-shell,
  .public-site.signup-look .login-panel {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .public-site.signup-look {
    overflow-x: hidden !important;
  }

  .public-site.signup-look .admin-shell {
    width: 100% !important;
    margin: 0 !important;
    padding: 24px 12px 36px !important;
  }

  .public-site.signup-look .portal-shell,
  .public-site.signup-look .login-panel {
    width: 100% !important;
    margin: 0 !important;
  }

  .public-site.signup-look .login-panel {
    overflow: hidden !important;
    padding: 16px !important;
  }

  .public-site.signup-look .login-panel h1 {
    max-width: 100%;
    font-size: 28px !important;
    overflow-wrap: anywhere;
  }

  .public-site.signup-look form,
  .public-site.signup-look form > *,
  .signup-branch-selector,
  .signup-branch-preview,
  .signup-structure,
  .signup-package-preference {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .signup-industry-setup,
  .signup-structure-counts {
    grid-template-columns: 1fr !important;
  }

  .signup-branch-preview {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  .signup-branch-preview > :where(ul, .signup-industry-setup, .signup-branch-extras, .signup-branch-match, .signup-branch-filter) {
    grid-column: 1 / -1 !important;
  }

  .signup-package-preference,
  .signup-branch-preview p,
  .signup-structure-summary {
    overflow-wrap: anywhere;
  }
}

/* Eindvangrail voor de mobiele portalnavigatie. */
.notification-read-icon {
  display: inline-grid !important;
  place-items: center;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

@media (max-width: 719px) {
  .portal-active #portalDashboard > :where(.professional-section-nav, .portal-section-nav) {
    justify-content: flex-start !important;
  }

  .portal-active #portalDashboard > :where(.professional-section-nav, .portal-section-nav) .voice-menu-actions {
    flex: 0 0 76px !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
  }

  .portal-active #portalDashboard > :where(.professional-section-nav, .portal-section-nav) .portal-nav-links {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
  }

  .portal-active #portalDashboard > :where(.professional-section-nav, .portal-section-nav) .portal-nav-links::-webkit-scrollbar {
    display: none;
  }

  .portal-active #portalDashboard > :where(.professional-section-nav, .portal-section-nav) .portal-sidebar-logout {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }
}

/* Laatste mobiele navigatiecorrectie: voorkom dat brede desktopregels de links wegdrukken. */
.notification-read-icon {
  display: inline-grid !important;
  place-items: center;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

@media (max-width: 719px) {
  .portal-active #portalDashboard > :where(.professional-section-nav, .portal-section-nav) {
    justify-content: flex-start !important;
  }

  .portal-active #portalDashboard > :where(.professional-section-nav, .portal-section-nav) .voice-menu-actions {
    flex: 0 0 76px !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
  }

  .portal-active #portalDashboard > :where(.professional-section-nav, .portal-section-nav) .portal-nav-links {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
  }

  .portal-active #portalDashboard > :where(.professional-section-nav, .portal-section-nav) .portal-nav-links::-webkit-scrollbar {
    display: none;
  }

  .portal-active #portalDashboard > :where(.professional-section-nav, .portal-section-nav) .portal-sidebar-logout {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }
}

/* Portalinstellingen: een herkenbare knop, alle persoonlijke voorkeuren bij elkaar. */
.app-settings-button {
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 19px;
  line-height: 1;
}

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

.app-preference-theme,
.app-notification-permission {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 86px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f7fafc;
  color: var(--ink);
}

.app-preference-theme > span,
.app-notification-permission > span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
}

.app-preference-theme select {
  width: 100%;
  min-height: 38px;
}

.app-notification-permission {
  grid-template-columns: minmax(0, 1fr) auto;
}

.app-notification-permission > span {
  grid-column: 1 / -1;
}

.app-notification-permission .button {
  align-self: center;
}

html[data-theme="dark"] .notification-preferences-panel,
html[data-theme="dark"] .app-preference-theme,
html[data-theme="dark"] .app-notification-permission,
html[data-theme="dark"] .notification-preference-row {
  border-color: rgba(255, 255, 255, .16);
  background: #172433;
  color: #eef5fb;
}

html[data-theme="dark"] .notification-preferences-panel p,
html[data-theme="dark"] .app-preference-theme > span,
html[data-theme="dark"] .app-notification-permission > span {
  color: #b9c8d7;
}

/* Mobiele portals: compacte bovenbalk, horizontale navigatie en footer in de paginaflow. */
@media (max-width: 719px) {
  body.portal-active {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .portal-active .topbar {
    position: sticky !important;
    top: 0;
    z-index: 70;
    display: flex !important;
    min-height: 54px !important;
    padding: 7px 10px !important;
  }

  .portal-active .topbar .brand {
    min-width: 0;
  }

  .portal-active .topbar .brand img {
    width: auto !important;
    max-width: 116px !important;
    height: 34px !important;
    object-fit: contain;
  }

  .portal-active .topbar .admin-title,
  .portal-active .topbar .nav-links,
  .portal-active .topbar .language-select,
  .portal-active .topbar [data-pwa-install] {
    display: none !important;
  }

  .portal-active .topbar .portal-nav,
  .portal-active .topbar [data-nav-actions] {
    width: auto !important;
    margin-left: auto;
  }

  .portal-active .topbar [data-nav-actions] {
    display: flex !important;
    justify-content: flex-end;
    gap: 6px;
  }

  .portal-active .admin-shell,
  .portal-active #portalDashboard.dashboard {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .portal-active #portalDashboard > .professional-section-nav,
  .portal-active #portalDashboard > .portal-section-nav {
    position: sticky !important;
    inset: auto !important;
    top: 54px !important;
    z-index: 60;
    display: flex !important;
    align-items: center;
    gap: 6px;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 5px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
  }

  .portal-active #portalDashboard > :where(.professional-section-nav, .portal-section-nav)::-webkit-scrollbar {
    display: none;
  }

  .portal-active :where(.professional-section-nav, .portal-section-nav) :where(.portal-sidebar-brand, .portal-nav-group-label, .portal-workscreen-actions, .portal-app-download, .sidebar-chat-widget) {
    display: none !important;
  }

  .portal-active :where(.professional-section-nav, .portal-section-nav) .portal-nav-links {
    display: flex !important;
    flex: 0 0 auto;
    gap: 5px;
    width: auto !important;
    overflow: visible !important;
  }

  .portal-active :where(.professional-section-nav, .portal-section-nav) .portal-nav-group {
    display: contents !important;
  }

  .portal-active :where(.professional-section-nav, .portal-section-nav) .portal-nav-links a {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: .75rem !important;
    line-height: 1 !important;
    white-space: nowrap;
  }

  .portal-active :where(.professional-section-nav, .portal-section-nav) .voice-menu-actions {
    display: flex !important;
    flex: 0 0 auto;
    gap: 4px;
    order: -1;
    margin: 0 !important;
    padding: 0 !important;
  }

  .portal-active :where(.professional-section-nav, .portal-section-nav) .voice-menu-icon-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  .portal-active :where(.professional-section-nav, .portal-section-nav) .portal-sidebar-logout {
    flex: 0 0 auto;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    color: transparent !important;
    font-size: 0 !important;
  }

  .portal-active :where(.professional-section-nav, .portal-section-nav) .portal-sidebar-logout::before {
    content: "\21AA";
    color: currentColor;
    color: #eef5fb;
    font-size: 18px;
  }

  .portal-active #portalDashboard > :where(section, details):not(.professional-section-nav):not(.portal-section-nav) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px !important;
  }

  .portal-active .admin-page-footer,
  .portal-active .portal-page-footer {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
  }

  .app-preference-basics {
    grid-template-columns: 1fr;
  }

  .notification-preferences-backdrop {
    align-items: end;
    padding: 0;
  }

  .notification-preferences-panel {
    width: 100%;
    max-height: min(88vh, 720px);
    border-radius: 10px 10px 0 0;
    padding: 14px;
  }
}

/* Mobiele portal: een compacte horizontale navigatie, normale paginastroom en geen footer-overlap. */
@media (max-width: 719px) {
  .portal-active,
  .portal-active .admin-shell,
  .portal-active #portalDashboard.dashboard {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .portal-active .admin-shell,
  .portal-active #portalDashboard.dashboard {
    display: block !important;
    grid-template-columns: none !important;
  }

  .portal-active #portalDashboard.dashboard {
    margin: 0 !important;
    padding: 10px !important;
  }

  .portal-active #portalDashboard > .professional-section-nav,
  .portal-active #portalDashboard > .portal-section-nav {
    position: sticky !important;
    inset: auto !important;
    top: 0 !important;
    z-index: 60 !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 10px !important;
    padding: 7px !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid var(--line) !important;
    border-radius: 7px !important;
    background: color-mix(in srgb, var(--panel, #f8fbfd) 97%, transparent) !important;
    box-shadow: 0 5px 14px rgba(6, 26, 51, .10) !important;
  }

  .portal-active #portalDashboard > :not(.professional-section-nav):not(.portal-section-nav) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .portal-active .portal-sidebar-brand,
  .portal-active .portal-nav-caption,
  .portal-active .portal-app-download,
  .portal-active .portal-workscreen-actions,
  .portal-active .sidebar-chat-widget {
    display: none !important;
  }

  .portal-active .portal-nav-links {
    display: contents !important;
  }

  .portal-active .portal-nav-group {
    display: contents !important;
  }

  .portal-active .professional-section-nav a,
  .portal-active .portal-section-nav a {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 108px !important;
    min-height: 40px !important;
    padding: 7px 9px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  .portal-active .professional-section-nav .voice-menu-actions,
  .portal-active .portal-section-nav .voice-menu-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 5px !important;
    order: 20;
  }

  .portal-active .professional-section-nav .voice-menu-actions .icon-button,
  .portal-active .portal-section-nav .voice-menu-actions .icon-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .portal-active .professional-section-nav .portal-sidebar-logout,
  .portal-active .portal-section-nav .portal-sidebar-logout {
    flex: 0 0 auto !important;
    order: 30;
    width: auto !important;
    min-width: 92px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    color: var(--ink) !important;
    background: var(--panel-soft, #fff7ed) !important;
  }

  .portal-active .portal-page-footer {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 52px !important;
    margin-top: 12px !important;
  }

  .portal-active #portalDashboard {
    padding-bottom: 10px !important;
  }

  .portal-active :where(.panel-head.customer-head h1, .professional-regie-brand h2) {
    overflow-wrap: anywhere !important;
  }
}

.pos-v2-receipt-delivery {
  display: grid;
  grid-template-columns: minmax(108px, .7fr) minmax(0, 1.3fr);
  gap: 6px;
  align-items: end;
  padding: 0 12px 10px;
}

.pos-v2-receipt-delivery label {
  display: grid;
  gap: 3px;
}

.pos-v2-receipt-delivery label span {
  color: var(--pf24-muted);
  font-size: .68rem;
  font-weight: 700;
}

.pos-v2-receipt-delivery :where(select, input) {
  min-width: 0;
  min-height: 36px;
  border: 1px solid var(--pf24-border);
  border-radius: 5px;
  background: var(--pf24-surface);
  color: var(--pf24-text);
  padding: 6px 8px;
  font: inherit;
}

.pos-v2-receipt-delivery input[hidden] {
  display: none;
}

.pos-v2-receipt-warning,
.pos-v2-receipt-ok {
  display: block;
  margin-top: 7px;
  font-size: .7rem;
}

.pos-v2-receipt-warning {
  color: #f59e0b;
}

.pos-v2-receipt-ok {
  color: #22c55e;
}

/* Privacyrechten blijven in beide weergavemodi een rustig, leesbaar formulier. */
.portal-active .privacy-request-form .checkbox-line,
.login-entry .privacy-request-form .checkbox-line {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--line, #c3d0da) !important;
  border-radius: 6px;
  background: var(--panel-soft, #f8fbfd) !important;
  color: var(--ink, #14263a) !important;
  line-height: 1.35;
}

html[data-theme="dark"] .portal-active .privacy-request-form .checkbox-line,
html[data-theme="dark"] .login-entry .privacy-request-form .checkbox-line {
  background: #17283a !important;
  color: #f3f7fb !important;
}

.portal-active .privacy-request-form .checkbox-line input,
.login-entry .privacy-request-form .checkbox-line input {
  flex: 0 0 auto;
  margin-top: 2px;
}

/* Vaste portaalfooter: zichtbaar zonder lange pagina's tot het einde te scrollen. */
.portal-page-footer {
  display: none;
}

.portal-active .portal-page-footer {
  position: fixed;
  left: clamp(178px, 18vw, 238px);
  right: 0;
  bottom: 0;
  z-index: 1450;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 46px;
  padding: 7px 16px max(7px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line, #c3d0da);
  background: color-mix(in srgb, var(--panel, #f8fbfd) 96%, transparent);
  color: var(--muted, #526274);
  box-shadow: 0 -5px 16px rgba(6, 26, 51, .08);
  backdrop-filter: blur(10px);
}

.portal-active .portal-page-footer span,
.portal-active .portal-page-footer small {
  color: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-transform: lowercase;
}

.portal-active .portal-page-footer img {
  width: 74px;
  height: 22px;
  padding: 2px 4px;
  border-radius: 5px;
  background: #fff;
  object-fit: contain;
}

.portal-active #portalDashboard {
  padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 719px) {
  .portal-active .portal-page-footer {
    left: 0;
    min-height: 50px;
  }

  .portal-active #portalDashboard {
    padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
  }
}

/* Apps tonen de klant als hoofdmerk en ProFix24 bescheiden als platformleverancier. */
.portal-active .app-powered-footer {
  left: 0;
  min-height: 32px;
  padding: 4px 14px max(4px, env(safe-area-inset-bottom));
  gap: 6px;
  justify-content: flex-end;
}

.portal-active .app-powered-footer span,
.portal-active .app-powered-footer small {
  font-size: 9px;
}

.portal-active .app-powered-footer img {
  width: 68px;
  height: 20px;
  padding: 2px 4px;
}

:where(.workapp-entry, .klantapp-entry, .kassaapp-entry, .zelfscanapp-entry).portal-active #portalDashboard {
  padding-bottom: calc(42px + env(safe-area-inset-bottom)) !important;
}

.pos-v2-company-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pos-v2-company-brand > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pos-v2-company-brand > span > strong,
.pos-v2-company-brand > span > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-v2-company-brand > span > small {
  color: inherit;
  font-size: .72rem;
  opacity: .78;
}

.pos-v2-company-logo {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 112px;
  height: 44px;
  padding: 4px 7px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 6px;
  background: rgba(255, 255, 255, .96);
}

.pos-v2-company-logo img,
.pos-v2-login-brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pos-v2-company-logo .professional-brand-fallback,
.pos-v2-login-brand .professional-brand-fallback {
  color: #12263b;
  font-size: 1.2rem;
}

.pos-v2-login-brand {
  display: grid;
  place-items: center;
  width: min(190px, 70%);
  height: 72px;
  margin: 0 auto 8px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 6px;
  background: #fff;
}

.pos-v2-catalog {
  position: relative;
  isolation: isolate;
}

.pos-v2-brand-watermark {
  position: absolute;
  inset: 20% 12%;
  z-index: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  opacity: .045;
}

.pos-v2-brand-watermark img {
  width: min(56%, 420px);
  max-height: 58%;
  object-fit: contain;
}

.pos-v2-catalog > :not(.pos-v2-brand-watermark) {
  position: relative;
  z-index: 1;
}

html[data-theme="dark"] .pos-v2-brand-watermark {
  opacity: .07;
}

@media (max-width: 760px) {
  .pos-v2-company-logo {
    width: 82px;
    height: 38px;
  }

  .pos-v2-company-brand > span > small {
    max-width: 42vw;
  }
}

/* App-shell afsluiting: na apparaataanmelding blijft alleen de bedieningslaag zichtbaar. */
body:is(.zelfscanapp-entry, .kassaapp-entry).portal-active.is-authenticated .portal-shell {
  display: none !important;
}

body.zelfscanapp-entry.portal-active.is-authenticated .admin-shell {
  display: block !important;
}

.zelfscan-head :where(span, strong),
html[data-theme="light"] .zelfscan-head :where(span, strong) {
  color: #f7fbff !important;
}

.selfscan-products button b,
html[data-theme="light"] .selfscan-products button b {
  color: #a64600 !important;
}

html[data-theme="dark"] .selfscan-products button b {
  color: #ffad5c !important;
}

.selfscan-basket > header > strong {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
}

body.zelfscanapp-entry.portal-active .selfscan-head > div > span,
html[data-theme="light"] body.zelfscanapp-entry.portal-active .selfscan-head > div > span {
  color: #f7fbff !important;
}

.selfscan-basket > header > div {
  display: grid;
  gap: 2px;
}

.selfscan-basket > header > div :where(small, strong) {
  display: block;
}

@media (max-width: 760px) {
  body.zelfscanapp-entry.portal-active.is-authenticated,
  body.zelfscanapp-entry.portal-active.is-authenticated .admin-shell,
  body.zelfscanapp-entry.portal-active.is-authenticated #portalDashboard,
  .selfscan-app {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
  }

  .selfscan-head {
    padding-inline: 12px;
  }

  .selfscan-head > div {
    min-width: 0;
  }

  .selfscan-head > div > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .selfscan-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .selfscan-basket {
    min-height: min(62dvh, 520px);
  }
}

/* Final viewport guard 2026-07-31: footer en onderacties blijven op elk apparaat bereikbaar. */
.portal-active .admin-shell,
.portal-active #portalDashboard.dashboard {
  min-height: 100dvh !important;
}

@media (min-width: 720px) {
  .portal-active #portalDashboard > .portal-section-nav,
  .portal-active #portalDashboard > .professional-section-nav,
  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
    min-height: 100dvh !important;
    height: 100dvh !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
}

.admin-body:has(#dashboard:not(.hidden)) .admin-page-footer {
  bottom: env(safe-area-inset-bottom) !important;
}

body:has(> footer) {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body:has(> footer) > footer {
  width: 100%;
  margin-top: auto;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

body.zelfscanapp-entry.portal-active .admin-shell,
body.zelfscanapp-entry.portal-active #portalDashboard.dashboard {
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Bankafstemming: compact, controleerbaar en geschikt voor financieel werk */
.portal-active #professional-administration .professional-bank-reconciliation {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 8px;
  background: rgba(15, 23, 42, .3);
}

.portal-active #professional-administration .professional-bank-reconciliation > header,
.portal-active #professional-administration .professional-bank-totals,
.portal-active #professional-administration .professional-bank-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.portal-active #professional-administration .professional-bank-reconciliation > header {
  justify-content: space-between;
}

.portal-active #professional-administration .professional-bank-reconciliation > header > div:first-child {
  display: grid;
  gap: 2px;
}

.portal-active #professional-administration .professional-bank-reconciliation small {
  color: var(--pf24-muted) !important;
}

.portal-active #professional-administration .professional-bank-totals span {
  padding: 4px 7px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 6px;
  font-size: .73rem;
  white-space: nowrap;
}

.portal-active #professional-administration .professional-bank-import {
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 7px;
  overflow: clip;
}

.portal-active #professional-administration .professional-bank-import > summary {
  padding: 9px 10px;
  cursor: pointer;
  font-weight: 750;
}

.portal-active #professional-administration .professional-bank-import form {
  display: grid;
  grid-template-columns: minmax(190px, .65fr) minmax(300px, 1.35fr) auto;
  gap: 8px;
  align-items: end;
  padding: 9px;
  border-top: 1px solid rgba(148, 163, 184, .16);
}

.portal-active #professional-administration .professional-bank-import label {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: .74rem;
  font-weight: 700;
}

.portal-active #professional-administration .professional-bank-import textarea {
  min-height: 72px;
  resize: vertical;
}

.portal-active #professional-administration .professional-bank-import .form-message {
  grid-column: 1 / -1;
}

.portal-active #professional-administration .professional-bank-list {
  display: grid;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: none;
}

.portal-active #professional-administration .professional-bank-list::-webkit-scrollbar {
  display: none;
}

.portal-active #professional-administration .professional-bank-list > article {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto auto;
  gap: 9px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgba(148, 163, 184, .17);
  border-radius: 7px;
}

.portal-active #professional-administration .professional-bank-list > article > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.portal-active #professional-administration .professional-bank-list > article > div:first-child :where(strong, span, small) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-active #professional-administration .professional-bank-list .is-positive {
  color: #2fbf71 !important;
}

.portal-active #professional-administration .professional-bank-list .is-negative {
  color: #ef6b6b !important;
}

html[data-theme="light"] .portal-active #professional-administration .professional-bank-reconciliation {
  border-color: #cbd5e1;
  background: #f8fafc;
}

html[data-theme="light"] .portal-active #professional-administration .professional-bank-list > article,
html[data-theme="light"] .portal-active #professional-administration .professional-bank-import {
  border-color: #cbd5e1;
  background: #fff;
  color: #10243a;
}

html[data-theme="light"] .portal-active #professional-administration .professional-bank-import > summary {
  color: #10243a !important;
}

html[data-theme="light"] .portal-active #professional-administration .professional-bank-list .is-positive {
  color: #08783e !important;
}

html[data-theme="light"] .portal-active #professional-administration .professional-bank-list .is-negative {
  color: #b42318 !important;
}

@media (max-width: 860px) {
  .portal-active #professional-administration .professional-bank-import form,
  .portal-active #professional-administration .professional-bank-list > article {
    grid-template-columns: 1fr auto;
  }

  .portal-active #professional-administration .professional-bank-import .wide,
  .portal-active #professional-administration .professional-bank-import button {
    grid-column: 1 / -1;
  }

  .portal-active #professional-administration .professional-bank-list > article > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .portal-active #professional-administration .professional-bank-reconciliation > header {
    align-items: stretch;
    flex-direction: column;
  }

  .portal-active #professional-administration .professional-bank-totals {
    flex-wrap: wrap;
  }
}

.module-standard-card:has(.module-admin-chain-stats) {
  display: grid;
  grid-template-columns: minmax(240px, 1.3fr) minmax(360px, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.module-standard-card:has(.module-admin-chain-stats) > div:first-child {
  display: grid;
  gap: 4px;
}

.module-admin-chain-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.module-admin-chain-stats span {
  display: flex;
  gap: 5px;
  align-items: baseline;
  font-size: .78rem;
}

@media (max-width: 980px) {
  .module-standard-card:has(.module-admin-chain-stats) {
    grid-template-columns: 1fr;
  }
}

body.login-entry .password-reset-dialog .button.secondary {
  border-color: rgba(6, 26, 51, 0.22) !important;
  background: #f1f5f9 !important;
  color: #07182d !important;
}

html[data-theme="dark"] body.login-entry .password-reset-dialog .button.secondary {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: #17324d !important;
  color: #ffffff !important;
}

/* Marktmonitor-kop blijft een donker informatievlak in beide gebruikersmodi. */
html body.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-monitor-head > div:first-child h2,
html[data-theme="light"] body.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-monitor-head > div:first-child h2,
html body.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-monitor-kpis article strong,
html[data-theme="light"] body.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-monitor-kpis article strong {
  color: #ffffff !important;
}

html body.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-monitor-head > div:first-child p,
html body.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-monitor-head > div:first-child small,
html[data-theme="light"] body.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-monitor-head > div:first-child p,
html[data-theme="light"] body.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-monitor-head > div:first-child small {
  color: #dbe7f3 !important;
}

html body.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-monitor-kpis article,
html[data-theme="light"] body.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-monitor-kpis article {
  border-color: rgba(191, 219, 254, .24) !important;
  background: rgba(255, 255, 255, .09) !important;
}

html body.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-monitor-kpis article span,
html[data-theme="light"] body.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-monitor-kpis article span {
  color: #cbd5e1 !important;
}

.branch-release-form,
.branch-release-list {
  display: grid;
  gap: 8px;
}

[data-branch-release-hidden] {
  display: none !important;
}

.branch-release-form {
  width: 100% !important;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
  justify-self: stretch;
  padding: 10px;
}

.branch-release-list,
.branch-release-row {
  width: 100%;
  box-sizing: border-box;
}

.branch-release-form .switchboard-status-strip {
  width: 100%;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.branch-release-form .switchboard-status-strip span {
  min-width: 0;
}

.branch-release-form .switchboard-status-strip strong,
.branch-release-form .switchboard-status-strip small {
  overflow-wrap: normal;
  word-break: normal;
}

.branch-release-row {
  border: 1px solid var(--pf24-border);
  border-radius: 7px;
  background: var(--pf24-panel);
}

.branch-release-row > summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  cursor: pointer;
}

.branch-release-row > summary div,
.branch-release-row > summary small {
  display: grid;
  gap: 2px;
}

.branch-release-row > summary small {
  color: var(--pf24-muted);
}

.branch-release-mode {
  min-width: 78px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
}

.branch-release-summary-status {
  display: flex;
  gap: 8px;
  align-items: center;
}

.branch-release-summary-status > b {
  color: var(--pf24-muted);
  font-size: 11px;
  white-space: nowrap;
}

.branch-release-mode.public {
  background: #dcfce7;
  color: #166534;
}

.branch-release-mode.pilot,
.branch-release-mode.internal {
  background: #ffedd5;
  color: #9a3412;
}

.branch-release-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 10px 10px;
}

.branch-release-content section,
.branch-release-content label {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--pf24-border);
  border-radius: 6px;
  background: var(--pf24-surface);
}

.branch-release-content section p {
  margin: 0;
  color: var(--pf24-muted);
  font-size: 12px;
  line-height: 1.35;
}

.branch-release-content select,
.branch-release-content textarea {
  width: 100%;
  min-width: 0;
}

.branch-release-content .wide {
  grid-column: span 3;
}

.branch-product-scope {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.branch-product-scope section {
  border-left: 3px solid var(--pf24-border);
}

.branch-product-scope section.included {
  border-left-color: #16a34a;
}

.branch-product-scope section.optional {
  border-left-color: #0284c7;
}

.branch-product-scope section.excluded {
  border-left-color: #dc2626;
}

.branch-product-scope section.planned {
  border-left-color: #f97316;
}

.branch-release-blockers {
  border-color: rgba(220, 38, 38, 0.35) !important;
  border-left: 3px solid #dc2626 !important;
  background: rgba(220, 38, 38, 0.06) !important;
}

.branch-release-blockers ul {
  display: grid;
  gap: 5px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.branch-release-blockers li {
  display: grid;
  gap: 1px;
}

.branch-release-blockers li span {
  color: var(--pf24-muted);
  font-size: 11px;
}

.branch-product-scope ul {
  display: grid;
  gap: 3px;
  margin: 3px 0 0;
  padding-left: 16px;
  color: var(--pf24-muted);
  font-size: 11px;
  line-height: 1.3;
}

.branch-scope-mini {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.branch-scope-mini section {
  padding: 8px;
  border: 1px solid var(--pf24-border);
  border-radius: 6px;
  background: var(--pf24-surface);
}

.branch-scope-mini h4,
.branch-scope-mini p {
  margin: 0;
}

.branch-scope-mini p {
  margin-top: 3px;
  color: var(--pf24-muted);
  font-size: 11px;
  line-height: 1.35;
}

.assistant-voice-choice {
  display: grid;
  gap: 4px;
  max-width: 520px;
  color: var(--pf24-muted);
  font-size: 12px;
}

.assistant-voice-choice select {
  width: 100%;
  min-height: 38px;
}

@media (max-width: 900px) {
  .branch-release-form .switchboard-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .branch-release-content {
    grid-template-columns: 1fr;
  }

  .branch-product-scope {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .branch-release-content .wide {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .branch-product-scope {
    grid-template-columns: 1fr;
  }

  .branch-scope-mini {
    grid-template-columns: 1fr;
  }

  .branch-release-summary-status > b {
    display: none;
  }
}

/* Marktmonitor-editor staat buiten het dashboardpaneel, maar volgt wel het actieve thema. */
html[data-theme="light"] body.admin-body:has(#dashboard:not(.hidden)) .market-competitor-modal .market-edit-grid label,
html[data-theme="light"] body.admin-body:has(#dashboard:not(.hidden)) .market-competitor-modal .market-edit-financials > summary {
  color: #07182d !important;
}

html[data-theme="light"] body.admin-body:has(#dashboard:not(.hidden)) .market-competitor-modal .market-edit-grid :where(input, select, textarea) {
  border-color: #c9d6e2 !important;
  background: #ffffff !important;
  color: #07182d !important;
}

/* Kassa-app v2: verkoop eerst, beheer uit het dagelijkse werkvlak. */
.kassaapp-entry.portal-active > .topbar {
  display: none;
}

body.kassaapp-entry.portal-active,
body.kassaapp-entry.portal-active .admin-shell,
body.kassaapp-entry.portal-active .portal-shell,
body.kassaapp-entry.portal-active #portalDashboard {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
}

.pos-v2-workspace {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh;
  background: #edf2f6;
  color: #14202b;
  overflow: hidden;
  font-size: 14px;
}

.pos-v2-close-form[hidden] {
  display: none !important;
}

.pos-v2-close-form {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 100;
  width: min(360px, calc(100vw - 24px));
  display: grid;
  gap: 10px;
  transform: translate(-50%, -50%);
  border: 1px solid #9eabb4;
  border-radius: 7px;
  background: #fff;
  color: #17212a;
  padding: 16px;
  box-shadow: 0 18px 70px rgba(7, 18, 27, .45);
}

.pos-v2-close-form label {
  display: grid;
  gap: 4px;
}

.pos-v2-close-form > div {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.pos-v2-topbar {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 14px;
  background: #10283b;
  color: #fff;
  border-bottom: 4px solid #f58220;
}

.pos-v2-topbar > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.kassaapp-entry.portal-active .pos-v2-topbar > div:first-child > strong {
  color: #fff !important;
  font-size: 17px;
  line-height: 1.15;
}

body.kassaapp-entry.portal-active .pos-v2-topbar > div:first-child > span {
  color: #dce7ef !important;
  font-size: 12px;
}

.pos-v2-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.pos-v2-top-actions button,
.pos-v2-categories button,
.pos-v2-scan button,
.pos-v2-receipt button,
.pos-v2-tools-head button {
  min-height: 38px;
  border: 1px solid #cbd3da;
  border-radius: 5px;
  background: #fff;
  color: #17212a;
  padding: 7px 12px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.pos-v2-top-actions button {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.pos-v2-top-actions button,
.pos-v2-scan button,
.pos-v2-pay button,
.pos-v2-open-tables button:first-child,
.pos-v2-channel-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.pos-v2-top-actions svg,
.pos-v2-scan svg,
.pos-v2-pay svg,
.pos-v2-open-tables svg,
.pos-v2-channel-switch svg,
.pos-v2-workmode svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}

.pos-v2-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
}

.pos-v2-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35c46a;
}

.pos-v2-status.offline i {
  background: #ef4444;
}

.pos-v2-layout {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) clamp(330px, 32vw, 430px);
  min-height: calc(100vh - 68px);
}

.pos-v2-function-rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 7px;
  border-right: 1px solid #29495f;
  background: #143046;
}

.pos-v2-function-rail button {
  position: relative;
  min-width: 0;
  min-height: 64px;
  display: grid;
  place-items: center;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #e8f0f5 !important;
  padding: 6px 3px;
  cursor: pointer;
}

.pos-v2-function-rail button > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #27495f;
  color: inherit;
}

.pos-v2-function-rail button > span svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.6;
}

.pos-v2-function-rail button > small {
  color: inherit !important;
  font-size: 9px;
  line-height: 1.05;
  text-align: center;
}

.pos-v2-function-rail button > b {
  position: absolute;
  top: 4px;
  right: 5px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #d53d32;
  color: #fff;
  padding: 0 4px;
  font-size: 9px;
}

.pos-v2-function-rail button.active,
.pos-v2-function-rail button:hover {
  border-color: #ffab5f;
  background: #f58220;
  color: #171717;
}

.pos-v2-function-rail button.active > span,
.pos-v2-function-rail button:hover > span {
  background: #fff;
}

.pos-v2-function-rail button.manager {
  margin-top: auto;
}

.pos-v2-catalog {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px 14px;
  background: #e8edf1;
}

.pos-v2-workmode {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(160px, .8fr) minmax(120px, .55fr);
  gap: 8px;
}

.pos-v2-workmode span {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid #c9d4dc;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 31, 44, .05);
}

.pos-v2-workmode i {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf4f8;
  color: #173b56;
}

.pos-v2-workmode b {
  min-width: 0;
  color: #162838;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-v2-workmode small {
  min-width: 0;
  color: #657380;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-v2-hospitality-context {
  display: grid;
  grid-template-columns: minmax(270px, .7fr) minmax(0, 1.3fr);
  gap: 8px;
}

.pos-v2-hospitality .pos-v2-catalog {
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
}

.pos-v2-open-tables {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.pos-v2-open-tables button {
  flex: 0 0 auto;
  min-height: 42px;
  display: grid;
  gap: 1px;
  border: 1px solid #bdc8d0;
  border-radius: 8px;
  background: #fff;
  color: #17212a;
  padding: 6px 10px;
  text-align: left;
  cursor: pointer;
}

.pos-v2-open-tables button.active {
  border-color: #d9670c;
  background: #fff0e3;
}

.pos-v2-open-tables span {
  color: #63717c;
  font-size: 10px;
}

.pos-v2-hospitality-context form,
.pos-v2-guests {
  display: flex;
  gap: 6px;
  align-items: end;
  min-width: 0;
}

.pos-v2-hospitality-context label {
  display: grid;
  gap: 3px;
  color: #4c5c68;
  font-size: 10px;
  font-weight: 800;
}

.pos-v2-hospitality-context input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #b9c4cc;
  border-radius: 5px;
  padding: 7px 9px;
}

.pos-v2-hospitality-context button,
.pos-v2-split-pay button {
  min-height: 38px;
  border: 1px solid #c2cbd2;
  border-radius: 5px;
  background: #fff;
  color: #17212a;
  padding: 7px 10px;
  font: inherit;
  font-weight: 800;
}

.pos-v2-split-form {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 5px;
}

.pos-v2-split-form select {
  min-width: 0;
  min-height: 38px;
  border: 1px solid #c2cbd2;
  border-radius: 5px;
  background: #fff;
  color: #17212a;
  padding: 5px;
}

.pos-v2-guests {
  overflow-x: auto;
  scrollbar-width: none;
}

.pos-v2-guests button {
  flex: 0 0 auto;
}

.pos-v2-guests button.active {
  border-color: #d9670c;
  background: #f58220;
}

.pos-v2-scan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 9px;
  border: 1px solid #cad4db;
  border-radius: 9px;
  background: #fff;
}

.pos-v2-scan label,
.pos-v2-customer label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.pos-v2-scan label span,
.pos-v2-customer label span {
  font-size: 11px;
  font-weight: 800;
  color: #4c5c68;
}

.pos-v2-scan input,
.pos-v2-customer input,
.pos-v2-tools input,
.pos-v2-tools select,
.pos-v2-login input,
.pos-v2-dialog input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #b9c4cc;
  border-radius: 7px;
  background: #fff;
  color: #17212a;
  padding: 8px 10px;
  font: inherit;
}

.pos-v2-scan button,
.pos-v2-pay .primary,
.pos-v2-customer button {
  background: #f58220;
  border-color: #d9670c;
  color: #171717;
}

.pos-v2-scan .form-message {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 0;
}

.pos-v2-categories {
  display: flex;
  justify-content: flex-start !important;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.pos-v2-categories::-webkit-scrollbar {
  display: none;
}

.pos-v2-categories button {
  flex: 0 0 auto;
  min-width: 96px;
  border-radius: 999px;
}

.pos-v2-categories button.active {
  background: #193c55;
  border-color: #193c55;
  color: #fff;
}

.pos-v2-products {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  grid-auto-rows: 126px;
  gap: 10px;
  align-content: start;
  overflow-y: auto;
  scrollbar-width: none;
}

.pos-v2-products::-webkit-scrollbar,
.pos-v2-ticket-lines::-webkit-scrollbar {
  display: none;
}

.pos-v2-product {
  min-width: 0;
  min-height: 118px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 4px;
  border: 1px solid #c4ccd2;
  border-radius: 10px;
  background: #fff;
  color: #17212a;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(17, 31, 44, 0.07);
  touch-action: manipulation;
}

.pos-v2-product[hidden],
[data-pos-hospitality-only][hidden] {
  display: none !important;
}

.pos-v2-hospitality .pos-v2-product {
  grid-template-rows: 54px auto minmax(0, 1fr) auto;
  min-height: 138px;
}

.pos-v2-hospitality .pos-v2-products {
  grid-auto-rows: 146px;
}

.pos-v2-product-image {
  width: 100%;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 4px;
  background: #dfe8ee;
}

.pos-v2-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pos-v2-product-image b {
  color: #24475f;
  font-size: 22px;
}

.pos-v2-product:active {
  transform: translateY(1px);
  border-color: #f58220;
}

.pos-v2-product > span,
.pos-v2-product > small {
  color: #63717c;
  font-size: 10px;
  line-height: 1.15;
}

.pos-v2-product > strong {
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pos-v2-product > b {
  color: #0e6b3a;
  font-size: 16px;
}

.pos-v2-receipt {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(120px, 1fr) auto auto auto auto;
  background: #fff;
  border-left: 1px solid #c8d0d6;
  box-shadow: -5px 0 16px rgba(23, 38, 50, 0.08);
}

.pos-v2-receipt-head,
.pos-v2-customer,
.pos-v2-table-summary,
.pos-v2-totals,
.pos-v2-pay,
.pos-v2-split-pay,
.pos-v2-loyalty-summary {
  padding: 10px 13px;
  border-bottom: 1px solid #dfe5e9;
}

.pos-v2-table-summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}

.pos-v2-table-summary span {
  color: #5d6a74;
}

.pos-v2-receipt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pos-v2-receipt-head > div {
  display: grid;
  gap: 2px;
}

.pos-v2-receipt-head small,
.pos-v2-loyalty-summary {
  color: #5d6a74;
  font-size: 11px;
}

.pos-v2-customer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, .65fr) auto;
  gap: 6px;
  align-items: end;
}

.pos-v2-customer > small {
  grid-column: 1 / -1;
}

.pos-v2-ticket-lines {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 4px 12px;
}

.pos-v2-ticket-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 34px;
  gap: 8px;
  align-items: center;
  min-height: 58px;
  border-bottom: 1px solid #e6eaed;
}

.pos-v2-ticket-line > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pos-v2-ticket-line small {
  color: #64717b;
  font-size: 10px;
}

.pos-v2-quantity {
  display: grid;
  grid-template-columns: 28px 28px 28px;
  align-items: center;
  text-align: center;
}

.pos-v2-quantity button,
.pos-v2-remove {
  min-height: 30px;
  padding: 2px;
}

.pos-v2-remove {
  color: #a72b2b !important;
}

.pos-v2-totals {
  display: grid;
  gap: 5px;
}

.pos-v2-totals > span,
.pos-v2-totals > strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pos-v2-totals > strong {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 2px solid #1f3546;
  font-size: 22px;
}

.pos-v2-pay {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 7px;
}

.pos-v2-pay button {
  min-height: 54px;
  font-size: 14px;
  border-radius: 8px;
  touch-action: manipulation;
}

.pos-v2-pay button:disabled,
.pos-v2-receipt button:disabled,
.pos-v2-split-pay button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.pos-v2-split-pay {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 230px;
  overflow-y: auto;
  scrollbar-width: none;
}

.pos-v2-split-pay > strong {
  grid-column: 1 / -1;
  font-size: 11px;
}

.pos-v2-seat-selection-form,
.pos-v2-seat-selection-list,
.pos-v2-seat-selection-actions,
.pos-v2-seat-open-note {
  grid-column: 1 / -1;
}

.pos-v2-seat-selection-form {
  display: grid;
  gap: 6px;
}

.pos-v2-seat-selection-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.pos-v2-seat-selection-list label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.pos-v2-seat-selection-list label.settled {
  opacity: .62;
}

.pos-v2-seat-selection-list input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.pos-v2-seat-selection-list span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.pos-v2-seat-selection-list b,
.pos-v2-seat-selection-list small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pos-v2-seat-selection-list small,
.pos-v2-seat-open-note {
  color: var(--muted);
  font-size: 11px;
}

.pos-v2-seat-selection-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 1fr);
  gap: 6px;
}

.pos-v2-split-pay button {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
}

.pos-v2-sent-state {
  width: fit-content;
  margin-top: 3px;
  border-radius: 3px;
  background: #dcecf5;
  color: #234c65 !important;
  padding: 2px 5px;
  font-weight: 800;
}

.pos-v2-send-order {
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #15664e;
  border-radius: 5px;
  background: #187a5d;
  color: #fff;
  padding: 8px 11px;
  font-weight: 900;
}

.pos-v2-send-order b {
  font-size: 11px;
}

.transport-asphalt-fields {
  border: 1px solid var(--line, #ccd5dc);
  border-radius: 6px;
  padding: 8px 10px;
}

.transport-asphalt-fields summary {
  cursor: pointer;
  font-weight: 800;
}

.transport-asphalt-fields .compact-form {
  margin-top: 9px;
}

.transport-asphalt-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.transport-asphalt-strip span {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--line, #d5dde2);
  border-radius: 5px;
  background: var(--panel-soft, #f2f5f7);
}

.transport-asphalt-strip small {
  color: var(--muted, #64717b);
}

.pos-v2-loyalty-summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.pos-v2-tools {
  position: fixed;
  inset: 72px 18px 18px;
  z-index: 80;
  overflow-y: auto;
  border: 1px solid #aeb9c1;
  border-radius: 7px;
  background: #f7f9fa;
  box-shadow: 0 18px 60px rgba(15, 28, 39, .28);
  padding: 14px;
}

.pos-v2-tools[hidden] {
  display: none;
}

.pos-v2-tools-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pos-v2-tools-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: 12px;
}

.pos-v2-tools .pos-product-manage-form,
.pos-v2-management-summary,
.pos-v2-device-form {
  margin: 0;
  padding: 12px;
  border: 1px solid #d3dbe0;
  border-radius: 6px;
  background: #fff;
}

.pos-v2-settings-card {
  align-self: start;
  border: 1px solid #d3dbe0;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.pos-v2-settings-card > summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.pos-v2-settings-card > summary::-webkit-details-marker {
  display: none;
}

.pos-v2-settings-card > summary span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.pos-v2-settings-card > summary b {
  color: #223744 !important;
  font-size: 14px;
}

.pos-v2-settings-card > summary small {
  color: #64717b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-v2-settings-wide {
  grid-column: 1 / -1;
}

.pos-v2-settings-card > summary em {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 4px;
  background: #e8edf0;
  color: #42535f;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.pos-v2-settings-card > summary em.ok {
  background: #dff3e7;
  color: #17633a;
}

.pos-v2-settings-card > summary em.attention {
  background: #fff0dc;
  color: #8a4a0d;
}

.pos-v2-settings-card[open] > summary {
  border-bottom: 1px solid #dbe2e6;
}

.pos-v2-settings-card > form {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.pos-v2-tools .pos-product-manage-form {
  background: #fff !important;
  color: #223744 !important;
}

.pos-v2-tools .pos-product-manage-form h3,
.pos-v2-tools .pos-product-manage-form label,
.pos-v2-management-summary h3,
.pos-v2-management-summary span b {
  color: #223744 !important;
}

.pos-v2-management-summary span small {
  color: #50626e !important;
}

.pos-v2-settings-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pos-v2-settings-fields > label:not(.pos-v2-check),
.pos-v2-policy-grid fieldset > label:not(.pos-v2-check) {
  display: grid;
  gap: 4px;
  color: #4c5c68;
  font-size: 11px;
  font-weight: 800;
}

.pos-v2-settings-fields input,
.pos-v2-settings-fields select,
.pos-v2-policy-grid input,
.pos-v2-policy-grid select {
  min-width: 0;
  min-height: 38px;
}

.pos-v2-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pos-v2-settings-actions .button.secondary {
  border-color: #b9c5cc !important;
  background: #fff !important;
  color: #263b48 !important;
}

.pos-v2-settings-actions .button.secondary:hover {
  border-color: #f58220 !important;
  background: #fff5eb !important;
}

.pos-v2-check {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #dbe2e6;
  border-radius: 5px;
  background: #f4f7f8;
  color: #2f404c;
  font-size: 11px;
  font-weight: 800;
}

.pos-v2-check input {
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
}

.pos-v2-settings-device {
  display: grid;
  gap: 7px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e1e6e9;
}

.pos-v2-settings-device:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

.pos-v2-policy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.pos-v2-policy-grid fieldset {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  margin: 0;
  padding: 9px;
  border: 1px solid #dbe2e6;
  border-radius: 5px;
}

.pos-v2-policy-grid legend {
  padding: 0 4px;
  color: #253845;
  font-size: 11px;
  font-weight: 900;
}

.pos-v2-floor-settings {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(130px, .45fr) auto;
  align-items: end;
  gap: 8px 12px;
  margin: 0;
  padding: 12px;
  border: 1px solid #d3dbe0;
  border-radius: 6px;
  background: #fff;
}

.pos-v2-floor-settings h3,
.pos-v2-floor-settings .form-message {
  grid-column: 1 / -1;
  margin: 0;
}

.pos-v2-floor-settings label {
  display: grid;
  gap: 4px;
  color: #4c5c68;
  font-size: 11px;
  font-weight: 800;
}

.pos-v2-activity-selected {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
  padding: 10px;
  border-left: 4px solid #f58220;
  background: #eef2f5;
}

.pos-v2-activity-seat {
  min-width: 76px;
  color: #49606e;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.pos-v2-activity-dialog,
.pos-v2-floor-dialog {
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: hidden;
}

.pos-v2-activity-board {
  max-height: calc(100vh - 100px);
  display: grid;
  gap: 7px;
  overflow-y: auto;
  scrollbar-width: none;
}

.pos-v2-activity-board::-webkit-scrollbar {
  display: none;
}

.pos-v2-activity-board article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #d3dbe0;
  border-radius: 5px;
  padding: 9px;
}

.pos-v2-activity-board article > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.pos-v2-activity-board article :where(span, small) {
  color: #60717e;
}

.pos-v2-floor-dialog .pos-v2-dialog-head > span {
  display: grid;
  gap: 2px;
}

.pos-v2-floor-legend {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  color: #536570;
  font-size: 11px;
}

.pos-v2-floor-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pos-v2-floor-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dfe8ee;
}

.pos-v2-floor-legend i.occupied {
  background: #1b6d94;
}

.pos-v2-floor-legend i.attention {
  background: #d53d32;
}

.pos-v2-floor-grid {
  max-height: calc(100vh - 120px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 9px;
  overflow-y: auto;
  scrollbar-width: none;
}

.pos-v2-floor-grid::-webkit-scrollbar {
  display: none;
}

.pos-v2-floor-grid button {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 3px;
  border: 2px solid #bdc9d1;
  border-radius: 6px;
  background: #f5f8fa;
  color: #17212a;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.pos-v2-floor-grid button.occupied {
  border-color: #1b6d94;
  background: #e8f4f9;
}

.pos-v2-floor-grid button.attention {
  border-color: #d53d32;
  background: #fff0ee;
}

.pos-v2-floor-grid button :where(span, small) {
  color: #536570;
}

.pos-v2-floor-grid button b {
  margin-top: 4px;
  color: #0e6b3a;
}

[data-pos-elapsed] {
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
}

.pos-v2-table-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.pos-v2-table-summary button {
  min-height: 34px;
  border: 1px solid #d9670c;
  border-radius: 5px;
  background: #f58220;
  color: #171717;
  padding: 5px 9px;
  font-weight: 800;
  cursor: pointer;
}

.pos-v2-device-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 8px 12px;
}

.pos-v2-device-form h3,
.pos-v2-device-form > small,
.pos-v2-device-form .form-message {
  grid-column: 1 / -1;
  margin: 0;
}

.pos-v2-device-form label {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: #4c5c68;
  font-size: 11px;
  font-weight: 800;
}

.pos-v2-device-form button {
  min-height: 42px;
}

.pos-v2-management-summary {
  display: grid;
  align-content: start;
  gap: 8px;
}

.pos-v2-management-summary span {
  display: grid;
  gap: 2px;
  padding: 8px;
  background: #eef2f5;
}

.pos-v2-dialog {
  width: min(560px, calc(100vw - 24px));
  border: 1px solid #aeb9c1;
  border-radius: 7px;
  background: #fff;
  color: #17212a;
  padding: 14px;
}

.pos-v2-dialog::backdrop {
  background: rgba(6, 17, 26, .62);
}

.pos-v2-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.pos-v2-kitchen-dialog {
  width: min(860px, calc(100vw - 24px));
  max-height: min(760px, calc(100vh - 24px));
  overflow: hidden;
}

.pos-v2-kitchen-board {
  max-height: calc(100vh - 110px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 9px;
  overflow-y: auto;
  scrollbar-width: none;
}

.pos-v2-kitchen-board::-webkit-scrollbar {
  display: none;
}

.pos-v2-kitchen-order {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  align-self: start;
  gap: 10px;
  border: 1px solid #c5d0d7;
  border-left: 5px solid #d9670c;
  border-radius: 5px;
  background: #f7f9fa;
  padding: 11px;
}

.pos-v2-kitchen-order.status-in-bereiding {
  border-left-color: #1976a3;
}

.pos-v2-kitchen-order.status-gereed {
  border-left-color: #187a5d;
  background: #edf8f3;
}

.pos-v2-kitchen-order header,
.pos-v2-kitchen-order footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pos-v2-kitchen-order footer {
  border: 0;
  background: transparent;
  padding: 0;
}

.pos-v2-kitchen-order header span {
  display: grid;
  gap: 1px;
}

.pos-v2-kitchen-order header b {
  border-radius: 3px;
  background: #e6edf1;
  padding: 4px 6px;
  font-size: 10px;
}

.pos-v2-kitchen-order > div {
  display: grid;
  gap: 5px;
  min-height: 48px;
}

.pos-v2-kitchen-order footer span {
  color: #62717b;
  font-size: 11px;
}

.pos-v2-kitchen-order footer button {
  min-height: 36px;
  border: 1px solid #0e5d46;
  border-radius: 4px;
  background: #187a5d;
  color: #fff;
  padding: 6px 12px;
  font-weight: 900;
}

.pos-v2-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #142c3f;
}

.pos-v2-login-card {
  width: min(420px, 100%);
  display: grid;
  gap: 12px;
  padding: 22px;
  border-radius: 7px;
  background: #fff;
  color: #17212a;
  text-align: center;
}

.pos-v2-register-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: auto;
  border-radius: 50%;
  background: #f58220;
  color: #171717;
  font-weight: 900;
}

.pos-v2-empty,
.pos-v2-empty-ticket {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-height: 130px;
  color: #66747e;
  text-align: center;
}

html[data-theme="dark"] .pos-v2-workspace {
  background: #111c25;
  color: #f0f4f7;
}

html[data-theme="dark"] .pos-v2-catalog {
  background: #13232f;
}

html[data-theme="dark"] .pos-v2-workmode span,
html[data-theme="dark"] .pos-v2-scan {
  border-color: #38505f;
  background: #1b2c38;
  color: #f3f6f8;
}

html[data-theme="dark"] .pos-v2-workmode b {
  color: #f3f6f8;
}

html[data-theme="dark"] .pos-v2-workmode small {
  color: #b8c5ce;
}

html[data-theme="dark"] .pos-v2-workmode i {
  background: #102634;
  color: #d8e8f2;
}

html[data-theme="dark"] .pos-v2-product,
html[data-theme="dark"] .pos-v2-receipt,
html[data-theme="dark"] .pos-v2-tools,
html[data-theme="dark"] .pos-v2-tools .pos-product-manage-form,
html[data-theme="dark"] .pos-v2-management-summary,
html[data-theme="dark"] .pos-v2-dialog {
  background: #1b2c38;
  color: #f3f6f8;
  border-color: #38505f;
}

html[data-theme="dark"] .pos-v2-product > span,
html[data-theme="dark"] .pos-v2-product > small,
html[data-theme="dark"] .pos-v2-ticket-line small,
html[data-theme="dark"] .pos-v2-receipt-head small,
html[data-theme="dark"] .pos-v2-loyalty-summary {
  color: #b8c5ce;
}

html[data-theme="dark"] .pos-v2-kitchen-order {
  background: #22333e;
  color: #f3f6f8;
  border-color: #47606f;
}

html[data-theme="dark"] .pos-v2-kitchen-order.status-gereed {
  background: #17382f;
}

html[data-theme="dark"] .pos-v2-kitchen-order header b {
  background: #314754;
}

html[data-theme="dark"] .pos-v2-kitchen-order footer span {
  color: #bfccd4;
}

html[data-theme="dark"] .pos-v2-scan input,
html[data-theme="dark"] .pos-v2-customer input,
html[data-theme="dark"] .pos-v2-tools input,
html[data-theme="dark"] .pos-v2-tools select,
html[data-theme="dark"] .pos-v2-dialog input {
  background: #0e1d27;
  color: #fff;
  border-color: #49616f;
}

html[data-theme="dark"] .pos-v2-management-summary span {
  background: #142631;
}

html[data-theme="dark"] :where(.pos-v2-floor-settings, .pos-v2-activity-board article, .pos-v2-floor-grid button, .pos-v2-settings-card) {
  border-color: #49616f;
  background: #172a36;
  color: #f3f6f8;
}

html[data-theme="dark"] .pos-v2-settings-card > summary {
  color: #f3f6f8;
}

html[data-theme="dark"] .pos-v2-settings-card > summary b,
html[data-theme="dark"] .pos-v2-tools .pos-product-manage-form h3,
html[data-theme="dark"] .pos-v2-tools .pos-product-manage-form label,
html[data-theme="dark"] .pos-v2-management-summary h3,
html[data-theme="dark"] .pos-v2-management-summary span b {
  color: #f3f6f8 !important;
}

html[data-theme="dark"] .pos-v2-settings-card > summary small,
html[data-theme="dark"] .pos-v2-settings-fields > label:not(.pos-v2-check),
html[data-theme="dark"] .pos-v2-policy-grid fieldset > label:not(.pos-v2-check) {
  color: #bfccd4;
}

html[data-theme="dark"] :where(.pos-v2-check, .pos-v2-policy-grid fieldset) {
  border-color: #49616f;
  background: #0f202b;
  color: #f3f6f8;
}

html[data-theme="dark"] .pos-v2-tools .pos-product-manage-form {
  background: #172a36 !important;
  color: #f3f6f8 !important;
}

html[data-theme="dark"] .pos-v2-settings-actions .button.secondary {
  border-color: #607988 !important;
  background: #0f202b !important;
  color: #f3f6f8 !important;
}

html[data-theme="dark"] .pos-v2-management-summary span small {
  color: #bfccd4 !important;
}

html[data-theme="dark"] .pos-v2-open-tables button,
html[data-theme="dark"] .pos-v2-hospitality-context button,
html[data-theme="dark"] .pos-v2-split-form select {
  background: #172a36;
  color: #f3f6f8;
  border-color: #3b5260;
}

html[data-theme="dark"] .pos-v2-open-tables button.active {
  background: #5d3217;
  border-color: #f58220;
}

@media (max-width: 1100px) {
  .pos-v2-products {
    grid-template-columns: repeat(3, minmax(112px, 1fr));
  }

  .pos-v2-layout {
    grid-template-columns: 68px minmax(0, 1fr) clamp(300px, 38vw, 370px);
  }

  .pos-v2-workmode {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .pos-v2-workspace {
    overflow: visible;
  }

  .pos-v2-topbar {
    align-items: flex-start;
  }

  .pos-v2-status {
    display: none;
  }

  .pos-v2-layout {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .pos-v2-catalog {
    min-height: 55vh;
  }

  .pos-v2-hospitality-context {
    grid-template-columns: 1fr;
  }

  .pos-v2-receipt {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 3px solid #f58220;
  }

  .pos-v2-products {
    grid-template-columns: repeat(3, minmax(96px, 1fr));
    max-height: 48vh;
  }

  .pos-v2-tools-grid {
    grid-template-columns: 1fr;
  }

  .pos-v2-policy-grid {
    grid-template-columns: 1fr;
  }

  .pos-v2-floor-settings {
    grid-template-columns: 1fr 1fr;
  }

  .pos-v2-kitchen-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .pos-v2-function-rail {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    padding: 6px;
    border-right: 0;
    border-bottom: 1px solid #29495f;
    scrollbar-width: none;
  }

  .pos-v2-function-rail::-webkit-scrollbar {
    display: none;
  }

  .pos-v2-function-rail button {
    flex: 0 0 64px;
    min-height: 54px;
  }

  .pos-v2-function-rail button.manager {
    margin-top: 0;
    margin-left: auto;
  }

  .pos-v2-floor-settings,
  .pos-v2-activity-board article,
  .pos-v2-settings-fields {
    grid-template-columns: 1fr;
  }

  .pos-v2-floor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pos-v2-hospitality .pos-v2-topbar > div:first-child span,
  .pos-v2-hospitality .pos-v2-customer,
  .pos-v2-hospitality .pos-v2-scan label span {
    display: none;
  }

  .pos-v2-hospitality .pos-v2-top-actions button {
    min-height: 34px;
    padding: 5px 8px;
    font-size: 11px;
  }

  .pos-v2-hospitality .pos-v2-layout {
    grid-template-columns: 1fr;
  }

  .pos-v2-hospitality .pos-v2-catalog {
    min-height: auto;
    grid-template-rows: auto auto auto auto minmax(240px, 43vh);
  }

  .pos-v2-hospitality .pos-v2-products {
    grid-template-columns: repeat(3, minmax(88px, 1fr));
    grid-auto-rows: 128px;
    max-height: 43vh;
  }

  .pos-v2-hospitality .pos-v2-product {
    min-height: 128px;
    padding: 7px;
  }

  .pos-v2-hospitality .pos-v2-receipt {
    min-height: 46vh;
  }

  .transport-asphalt-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .pos-v2-topbar {
    min-height: 58px;
    padding: 7px 9px;
  }

  .pos-v2-top-actions button {
    min-height: 34px;
    padding: 5px 8px;
    font-size: 11px;
  }

  .pos-v2-top-actions button[data-pos-focus-customer],
  .pos-v2-top-actions button[data-portal-logout] {
    display: none;
  }

  .pos-v2-catalog {
    padding: 8px;
  }

  .pos-v2-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pos-v2-customer {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pos-v2-customer > input {
    display: none;
  }

  .pos-v2-ticket-line {
    grid-template-columns: minmax(0, 1fr) auto 30px;
  }

  .pos-v2-ticket-line > strong {
    grid-column: 1;
  }

  .pos-v2-pay {
    grid-template-columns: 1fr 1fr;
  }

  .pos-v2-pay button:last-child {
    grid-column: 1 / -1;
  }
}

.portal-active #professional-capacity-pool .transport-pool-collab {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(255, 130, 0, 0.22);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255, 130, 0, 0.09), rgba(7, 26, 46, 0.92));
}

.portal-active #professional-capacity-pool .transport-pool-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(220px, 0.9fr));
  gap: 10px;
}

.portal-active #professional-capacity-pool .transport-pool-grid article {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(2, 15, 29, 0.58);
}

.portal-active #professional-capacity-pool .transport-pool-grid strong {
  color: #fff7ed;
}

.portal-active #professional-capacity-pool .transport-pool-grid span {
  display: grid;
  gap: 2px;
  padding: 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
}

.portal-active #professional-capacity-pool .transport-pool-grid small,
.portal-active #professional-capacity-pool .transport-pool-grid li {
  color: rgba(226, 232, 240, 0.72);
  font-size: 11px;
  line-height: 1.35;
}

.portal-active #professional-capacity-pool .transport-pool-grid ul {
  margin: 0;
  padding-left: 16px;
}

@media (max-width: 980px) {
  .portal-active #professional-capacity-pool .transport-pool-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1120px) {
  .portal-active #professional-pos .pos-register-shell {
    grid-template-columns: 1fr 1fr;
  }

  .portal-active #professional-pos .pos-register-right {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .portal-active #professional-pos .pos-register-shell,
  .portal-active #professional-pos .pos-register-empty {
    grid-template-columns: 1fr;
  }

  .portal-active #professional-pos .pos-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.portal-active #professional-labels .warehouse-import-card textarea {
  width: 100%;
  min-height: 138px;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(2, 10, 22, 0.88);
  color: #f7efe5;
  padding: 10px;
}

.portal-active #professional-labels .warehouse-history-list {
  display: grid;
  gap: 7px;
  max-height: 240px;
  overflow: auto;
  scrollbar-width: none;
  margin: 9px 0;
}

.portal-active #professional-labels .warehouse-history-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(5, 20, 36, 0.58);
  min-width: 0;
}

.portal-active #professional-labels .warehouse-history-row em {
  grid-column: 1 / -1;
  color: rgba(247, 239, 229, 0.72);
  font-size: 11px;
  font-style: normal;
}

@media (max-width: 1180px) {
  .portal-active #professional-labels .warehouse-enterprise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-active #professional-labels .warehouse-enterprise-upsell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .branch-profile-grid {
    grid-template-columns: 1fr;
  }

  .portal-active #professional-labels .warehouse-enterprise-grid,
  .portal-active #professional-labels .warehouse-scanner-flow > div,
  .portal-active #professional-labels .warehouse-connector-form,
  .portal-active #professional-labels .warehouse-action-row,
  .portal-active #professional-labels .warehouse-value-strip {
    grid-template-columns: 1fr;
  }
}

.portal-active #professional-labels .warehouse-module-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}

.portal-active #professional-labels .warehouse-module-strip span {
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 130, 0, 0.2);
  border-radius: 8px;
  background: rgba(255, 130, 0, 0.075);
}

.portal-active #professional-labels .warehouse-module-strip strong {
  color: var(--pf24-orange);
  font-size: 19px;
  line-height: 1;
}

.portal-active #professional-labels .warehouse-module-strip small {
  color: rgba(247, 239, 229, 0.72);
  font-size: 11px;
  font-weight: 900;
}

.portal-active #professional-labels .warehouse-ops-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.portal-active #professional-labels .warehouse-ops-card {
  padding: 0 !important;
  overflow: hidden;
}

.portal-active #professional-labels .warehouse-ops-card > summary {
  display: grid;
  grid-template-columns: minmax(130px, 0.75fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(3, 15, 28, 0.42);
}

.portal-active #professional-labels .warehouse-ops-card > summary span {
  color: #fff;
  font-weight: 950;
}

.portal-active #professional-labels .warehouse-ops-card > summary small {
  min-width: 0;
  overflow: hidden;
  color: rgba(247, 239, 229, 0.66);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-active #professional-labels .warehouse-ops-card > summary b {
  min-width: 28px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 130, 0, 0.36);
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.12);
  color: var(--pf24-orange);
  font-size: 12px;
  text-align: center;
}

.portal-active #professional-labels .warehouse-ops-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 10px;
}

.portal-active #professional-labels .warehouse-ops-form :where(input, select) {
  min-height: 36px;
  border-color: rgba(148, 163, 184, 0.28) !important;
  background: rgba(3, 15, 28, 0.74) !important;
  color: #f8fbff !important;
}

.portal-active #professional-labels .warehouse-ops-list {
  display: grid;
  gap: 7px;
  padding: 0 10px 10px;
}

.portal-active #professional-labels .warehouse-ops-print {
  width: calc(100% - 20px);
  margin: 0 10px 10px;
  justify-content: center;
}

.portal-active #professional-labels .warehouse-ops-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 8px 9px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
}

.portal-active #professional-labels .warehouse-ops-row strong {
  color: #fff;
  font-size: 13px;
}

.portal-active #professional-labels .warehouse-ops-row small {
  display: block;
  margin-top: 2px;
  color: rgba(247, 239, 229, 0.68);
  font-size: 11px;
  line-height: 1.3;
}

.portal-active #professional-labels .warehouse-ops-row b {
  color: var(--pf24-orange);
  font-size: 11px;
  white-space: nowrap;
}

@media (max-width: 1050px) {
  .portal-active #professional-labels .warehouse-ops-grid {
    grid-template-columns: 1fr;
  }

  .portal-active #professional-labels .warehouse-ops-card > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .portal-active #professional-labels .warehouse-ops-card > summary small {
    grid-column: 1 / -1;
  }
}

/* Mobiele werkdag professional - 2026-07-22 */
.portal-active #professional-workday {
  width: min(100%, 1180px);
}

.portal-active .professional-section[hidden],
.portal-active .customer-section[hidden] {
  display: none !important;
}

.professional-mobile-workday {
  display: grid;
  grid-template-columns: minmax(300px, 410px) minmax(260px, 1fr);
  gap: 18px;
  align-items: start;
}

.mobile-workday-phone {
  max-width: 410px;
  border: 1px solid rgba(184, 207, 230, 0.18);
  border-radius: 28px;
  padding: 10px;
  background:
    radial-gradient(circle at 82% -8%, rgba(255, 130, 0, 0.18), transparent 32%),
    linear-gradient(150deg, rgba(13, 35, 58, 0.98), rgba(2, 13, 25, 0.98));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}

.mobile-workday-status,
.mobile-workday-head,
.mobile-workday-tabs,
.mobile-workday-body {
  border-left: 1px solid rgba(184, 207, 230, 0.12);
  border-right: 1px solid rgba(184, 207, 230, 0.12);
}

.mobile-workday-status {
  display: flex;
  justify-content: space-between;
  padding: 11px 15px 6px;
  border-top: 1px solid rgba(184, 207, 230, 0.12);
  border-radius: 22px 22px 0 0;
  color: rgba(247, 239, 229, 0.62);
  font-size: 12px;
}

.mobile-workday-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 12px;
  align-items: center;
  padding: 8px 15px 15px;
  border-bottom: 1px solid rgba(184, 207, 230, 0.12);
}

.mobile-workday-head small,
.mobile-workday-side small {
  color: #ffad4d;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-workday-head h2 {
  margin: 2px 0 3px;
  color: #fff;
  font-size: 22px;
  line-height: 1.1;
}

.mobile-workday-subtitle {
  display: block;
  margin: 10px 0 8px;
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
}

.workday-source-note {
  display: inline-flex;
  margin-top: 8px;
  color: rgba(247, 239, 229, 0.68);
  font-size: 11px;
  font-weight: 800;
}

.mobile-workday-head p,
.mobile-workday-hero p,
.mobile-workday-side p,
.mobile-workday-side li {
  margin: 0;
  color: rgba(247, 239, 229, 0.72);
  font-size: 13px;
  line-height: 1.35;
}

.mobile-workday-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 130, 0, 0.38);
  border-radius: 50%;
  background: rgba(255, 130, 0, 0.16);
  color: #fff;
  font-weight: 900;
}

.mobile-workday-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(184, 207, 230, 0.12);
}

.mobile-workday-tabs button {
  min-width: 0;
  min-height: 36px;
  border: 1px solid rgba(184, 207, 230, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(247, 239, 229, 0.78);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.mobile-workday-tabs button.active {
  border-color: rgba(255, 130, 0, 0.55);
  background: rgba(255, 130, 0, 0.18);
  color: #fff;
}

.mobile-workday-body {
  min-height: 530px;
  padding: 13px;
  border-bottom: 1px solid rgba(184, 207, 230, 0.12);
  border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, rgba(4, 20, 36, 0.96), rgba(1, 10, 19, 0.98));
}

.mobile-workday-stage {
  display: none;
  gap: 11px;
}

.mobile-workday-stage.active {
  display: grid;
}

.mobile-workday-hero,
.mobile-workday-card,
.mobile-workday-route,
.mobile-workday-side article {
  border: 1px solid rgba(184, 207, 230, 0.14);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(13, 35, 58, 0.92), rgba(7, 23, 39, 0.92));
}

.mobile-workday-hero {
  display: grid;
  gap: 8px;
  padding: 13px;
}

.mobile-workday-hero h3,
.mobile-workday-side strong {
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.16;
}

.workday-pill {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(255, 130, 0, 0.32);
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.12);
  color: #ffd2a1;
  font-size: 11px;
  font-weight: 900;
}

.mobile-workday-card {
  display: grid;
  gap: 8px;
  padding: 11px;
}

.mobile-workday-card.attention {
  border-color: rgba(255, 130, 0, 0.32);
  background: linear-gradient(180deg, rgba(255, 130, 0, 0.13), rgba(13, 35, 58, 0.9));
}

.workday-row,
.workday-order-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.workday-row strong,
.workday-order-line strong,
.workday-check strong,
.workday-route-point strong {
  color: #fff;
  font-size: 13px;
  line-height: 1.18;
}

.workday-order-line {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(184, 207, 230, 0.12);
}

.workday-order-line.done {
  opacity: 0.68;
}

.workday-order-line.done strong::after {
  content: " klaar";
  color: #8bc6ff;
  font-size: 0.75em;
  font-weight: 900;
}

.workday-order-line:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.workday-order-line small,
.workday-check small,
.workday-route-point span,
.mobile-workday-feedback {
  color: rgba(247, 239, 229, 0.62);
  font-size: 12px;
}

.workday-order-line b {
  color: #ffad4d;
  font-size: 13px;
}

.workday-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 30px;
}

.workday-check span {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(184, 207, 230, 0.34);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.workday-check.done span {
  border-color: rgba(255, 130, 0, 0.54);
  background: #ff8200;
}

.mobile-workday-route {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 13px 13px 13px 28px;
}

.mobile-workday-route::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: rgba(184, 207, 230, 0.18);
}

.workday-route-point {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.workday-route-point::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 17px;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(2, 13, 25, 0.96);
  border-radius: 50%;
  background: #ff8200;
}

.workday-route-point.active {
  border-color: rgba(255, 130, 0, 0.48);
  background: rgba(255, 130, 0, 0.1);
  transform: translateX(2px);
}

.workday-route-point.active::before {
  box-shadow: 0 0 0 5px rgba(255, 130, 0, 0.16);
}

.workday-route-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.workday-route-select {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.workday-route-nav {
  position: relative;
  z-index: 1;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(139, 198, 255, 0.32);
  border-radius: 999px;
  background: rgba(139, 198, 255, 0.12);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.workday-route-nav:hover,
.workday-route-nav:focus-visible {
  border-color: rgba(255, 130, 0, 0.58);
  background: rgba(255, 130, 0, 0.18);
  outline: none;
}

.workday-route-point.done::before {
  background: #41d17d;
}

.workday-route-point.skipped::before {
  background: #ff5f57;
}

.workday-route-point.done,
.workday-route-point.skipped {
  opacity: 0.76;
}

.mobile-workday-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-workday-actions .button {
  width: 100%;
  justify-content: center;
}

.mobile-workday-actions .is-done {
  opacity: 0.72;
}

.workday-next-action {
  display: grid;
  gap: 3px;
  margin-top: 2px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 130, 0, 0.34);
  border-radius: 12px;
  background: rgba(255, 130, 0, 0.12);
}

.workday-next-action strong {
  color: #ffb35c;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.workday-next-action span {
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 850;
}

.workday-next-action.is-updated {
  border-color: rgba(139, 198, 255, 0.4);
  background: rgba(139, 198, 255, 0.1);
}

.mobile-workday-feedback {
  margin: 2px 0 0;
}

.mobile-workday-side {
  display: grid;
  gap: 12px;
}

.mobile-workday-side article {
  display: grid;
  gap: 9px;
  padding: 14px;
}

.mobile-workday-side ul {
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 760px) {
  .professional-mobile-workday {
    grid-template-columns: 1fr;
  }

  .mobile-workday-phone {
    max-width: 100%;
  }

  .mobile-workday-side {
    display: none;
  }
}

/* App-schillen: Werkapp en Klantapp delen backend, maar krijgen een lichte mobiele ingang. */
.workapp-entry .portal-shell,
.klantapp-entry .portal-shell {
  width: min(100%, 460px);
  margin-inline: auto;
}

.workapp-entry .login-panel,
.klantapp-entry .login-panel {
  border-color: rgba(255, 130, 0, 0.2) !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(255, 130, 0, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(13, 35, 58, 0.96), rgba(4, 18, 32, 0.96)) !important;
}

.workapp-entry .login-panel h1,
.klantapp-entry .login-panel h1 {
  color: #fff !important;
}

.workapp-entry .test-login-grid,
.klantapp-entry .test-login-grid {
  grid-template-columns: 1fr !important;
}

.werkapp-shell .panel-head.customer-head h1,
.klantapp-shell .panel-head.customer-head h1 {
  font-size: clamp(24px, 5vw, 34px) !important;
}

.werkapp-shell .portal-workscreen-actions {
  display: none !important;
}

/* Werkapp moet aanvoelen als een losse telefoonapp, niet als het kantoorportaal. */
body.workapp-entry.portal-active {
  overflow-x: hidden;
  background: #171a1d !important;
}

body.workapp-entry.portal-active .topbar,
body.workapp-entry.portal-active .portal-shell,
body.workapp-entry.portal-active .professional-section-nav,
body.workapp-entry.portal-active .portal-notification-stack,
body.workapp-entry.portal-active .portal-notifications,
body.workapp-entry.portal-active .panel-head.customer-head,
body.workapp-entry.portal-active .mobile-workday-side {
  display: none !important;
}

body.workapp-entry.portal-active .admin-shell {
  display: block !important;
  min-height: 100vh;
  padding: 0 !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(122, 188, 244, 0.16), transparent 34%),
    #171a1d !important;
}

body.workapp-entry.portal-active #portalDashboard.dashboard {
  display: block !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 540px !important;
  min-height: 100vh;
  margin: 0 auto;
  padding: 10px 8px 18px !important;
  background: transparent !important;
}

body.workapp-entry.portal-active .professional-section {
  width: 100%;
}

body.workapp-entry.portal-active #professional-workday {
  display: block !important;
  padding: 0 !important;
}

body.workapp-entry.portal-active .professional-mobile-workday {
  display: block;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

body.workapp-entry.portal-active .mobile-workday-phone {
  max-width: none;
  min-height: calc(100vh - 20px);
  padding: 10px;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(61, 73, 85, 0.98), rgba(30, 34, 38, 0.99));
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.42);
}

body.workapp-entry.portal-active .mobile-workday-status,
body.workapp-entry.portal-active .mobile-workday-head,
body.workapp-entry.portal-active .mobile-workday-tabs,
body.workapp-entry.portal-active .mobile-workday-body {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

body.workapp-entry.portal-active .mobile-workday-status {
  padding: 22px 24px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 26px 26px 0 0;
  color: rgba(247, 239, 229, 0.62);
  font-size: 1.05rem;
}

body.workapp-entry.portal-active .mobile-workday-head {
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 16px;
  padding: 8px 24px 26px;
  background: linear-gradient(180deg, rgba(67, 79, 91, 0.78), rgba(55, 65, 75, 0.6));
}

body.workapp-entry.portal-active .mobile-workday-head small {
  display: none;
}

body.workapp-entry.portal-active .mobile-workday-head h2 {
  margin: 0 0 24px;
  font-size: clamp(26px, 7vw, 32px);
}

body.workapp-entry.portal-active .mobile-workday-subtitle {
  margin: 0 0 14px;
  font-size: clamp(24px, 6vw, 30px);
}

body.workapp-entry.portal-active .mobile-workday-head p {
  color: rgba(247, 239, 229, 0.62);
  font-size: clamp(18px, 5vw, 24px);
  line-height: 1.45;
}

body.workapp-entry.portal-active .mobile-workday-avatar {
  width: 64px;
  height: 64px;
  border: 0;
  background: #7abcf4;
  color: #061a33;
  font-size: 24px;
}

body.workapp-entry.portal-active .mobile-workday-tabs {
  display: none;
}

body.workapp-entry.portal-active .mobile-workday-body {
  min-height: auto;
  padding: 28px;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(180deg, rgba(32, 35, 38, 0.98), rgba(25, 28, 31, 0.99));
}

body.workapp-entry.portal-active .mobile-workday-stage.active {
  gap: 24px;
}

body.workapp-entry.portal-active .mobile-workday-hero,
body.workapp-entry.portal-active .mobile-workday-card,
body.workapp-entry.portal-active .mobile-workday-route {
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(73, 88, 102, 0.96), rgba(64, 78, 92, 0.96));
}

body.workapp-entry.portal-active .mobile-workday-hero {
  padding: 28px;
}

body.workapp-entry.portal-active .mobile-workday-hero h3 {
  max-width: 260px;
  font-size: clamp(30px, 8vw, 42px);
  line-height: 1.25;
}

body.workapp-entry.portal-active .mobile-workday-hero p {
  margin-top: 18px;
  color: rgba(247, 239, 229, 0.64);
  font-size: clamp(18px, 5vw, 26px);
  line-height: 1.55;
}

body.workapp-entry.portal-active .workday-pill {
  justify-self: end;
  padding: 8px 18px;
  border: 0;
  background: rgba(38, 52, 66, 0.72);
  color: #fff;
  font-size: clamp(16px, 4.2vw, 22px);
}

body.workapp-entry.portal-active .mobile-workday-card.attention {
  padding: 28px 24px;
  border-color: rgba(122, 188, 244, 0.72);
  background: rgba(69, 86, 102, 0.98);
}

body.workapp-entry.portal-active .workday-row strong {
  font-size: 22px;
}

body.workapp-entry.portal-active .workday-check {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 56px;
}

body.workapp-entry.portal-active .workday-check span {
  width: 22px;
  height: 22px;
  border-color: rgba(122, 188, 244, 0.42);
  background: #082b49;
}

body.workapp-entry.portal-active .workday-check.done span {
  border-color: #7abcf4;
  background: #7abcf4;
}

body.workapp-entry.portal-active .workday-check strong {
  color: #fff;
  font-size: clamp(21px, 5.4vw, 28px);
  line-height: 1.32;
}

body.workapp-entry.portal-active .workday-check small {
  color: rgba(247, 239, 229, 0.58);
  font-size: clamp(17px, 4.4vw, 23px);
}

body.workapp-entry.portal-active .warehouse-pick-line {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid rgba(247, 239, 229, 0.08);
}

body.workapp-entry.portal-active .warehouse-pick-line:first-of-type {
  border-top: 0;
}

body.workapp-entry.portal-active .warehouse-pick-dot {
  width: 22px;
  height: 22px;
  margin-top: 4px;
  border: 1px solid rgba(122, 188, 244, 0.42);
  border-radius: 50%;
  background: #082b49;
}

body.workapp-entry.portal-active .warehouse-pick-line.done .warehouse-pick-dot {
  border-color: #7abcf4;
  background: #7abcf4;
}

body.workapp-entry.portal-active .warehouse-pick-line strong {
  display: block;
  color: #fff;
  font-size: clamp(19px, 5vw, 25px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.workapp-entry.portal-active .warehouse-pick-line small {
  display: block;
  margin-top: 4px;
  color: rgba(247, 239, 229, 0.62);
  font-size: clamp(15px, 4vw, 19px);
  line-height: 1.35;
}

body.workapp-entry.portal-active .warehouse-workapp .mobile-workday-card.attention {
  gap: 10px;
}

/* Klantapp: dezelfde mobiele laag, maar gericht op melden, volgen en betalen. */
body.klantapp-entry.portal-active {
  overflow-x: hidden;
  background: #171a1d !important;
}

body.klantapp-entry.portal-active .topbar,
body.klantapp-entry.portal-active .portal-shell,
body.klantapp-entry.portal-active .portal-section-nav,
body.klantapp-entry.portal-active .portal-notification-stack,
body.klantapp-entry.portal-active .portal-notifications {
  display: none !important;
}

body.klantapp-entry.portal-active .admin-shell {
  display: block !important;
  min-height: 100vh;
  padding: 0 !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 130, 0, 0.14), transparent 32%),
    #171a1d !important;
}

body.klantapp-entry.portal-active #portalDashboard.dashboard {
  display: block !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 540px !important;
  min-height: 100vh;
  margin: 0 auto;
  padding: 10px 8px 18px !important;
  background: transparent !important;
}

body.klantapp-entry.portal-active .panel-head.customer-head {
  display: none !important;
}

body.klantapp-entry.portal-active .customer-section {
  width: 100%;
  padding: 0 !important;
}

body.klantapp-entry.portal-active .customer-mobile-app {
  display: block;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-phone {
  max-width: none;
  min-height: calc(100vh - 20px);
  padding: 10px;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(61, 73, 85, 0.98), rgba(30, 34, 38, 0.99));
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.42);
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-status,
body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-head,
body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-body {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-status {
  padding: 22px 24px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 26px 26px 0 0;
  color: rgba(247, 239, 229, 0.62);
  font-size: 1.05rem;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-head {
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 16px;
  padding: 8px 24px 26px;
  background: linear-gradient(180deg, rgba(67, 79, 91, 0.78), rgba(55, 65, 75, 0.6));
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-head small {
  display: none;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-head h2 {
  margin: 0 0 24px;
  font-size: clamp(26px, 7vw, 32px);
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-subtitle {
  margin: 0 0 14px;
  font-size: clamp(24px, 6vw, 30px);
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-head p {
  color: rgba(247, 239, 229, 0.62);
  font-size: clamp(18px, 5vw, 24px);
  line-height: 1.45;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-avatar {
  width: 64px;
  height: 64px;
  border: 0;
  background: #ff8200;
  color: #061a33;
  font-size: 24px;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-body {
  min-height: auto;
  padding: 28px;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(180deg, rgba(32, 35, 38, 0.98), rgba(25, 28, 31, 0.99));
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-stage.active {
  gap: 24px;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-hero,
body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-card {
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(73, 88, 102, 0.96), rgba(64, 78, 92, 0.96));
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-hero {
  padding: 28px;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-hero h3 {
  max-width: 310px;
  font-size: clamp(30px, 8vw, 42px);
  line-height: 1.25;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-hero p {
  margin-top: 18px;
  color: rgba(247, 239, 229, 0.64);
  font-size: clamp(18px, 5vw, 26px);
  line-height: 1.55;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-card.attention {
  padding: 28px 24px;
  border-color: rgba(255, 130, 0, 0.62);
  background: rgba(69, 86, 102, 0.98);
}

body.klantapp-entry.portal-active .customer-mobile-actions {
  grid-template-columns: 1fr 1fr;
}

body.klantapp-entry.portal-active .customer-mobile-actions .button {
  min-height: 54px;
}

/* Klantapp definitief: geen telefoonmockup, maar een echte schermvullende mobiele app. */
body.klantapp-entry.portal-active {
  background: var(--pf24-bg, #f5f7fb) !important;
}

body.klantapp-entry.portal-active .admin-shell {
  background: var(--pf24-bg, #f5f7fb) !important;
}

body.klantapp-entry.portal-active #portalDashboard.dashboard {
  max-width: 620px !important;
  padding: max(10px, env(safe-area-inset-top)) 10px calc(82px + env(safe-area-inset-bottom)) !important;
}

body.klantapp-entry.portal-active .customer-mobile-app,
body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-phone {
  width: 100% !important;
  max-width: none !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-status,
body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-head,
body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-body {
  border: 0 !important;
  background: transparent !important;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-status {
  padding: 4px 2px 10px !important;
  color: var(--pf24-muted, #64748b) !important;
  font-size: .82rem !important;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-head {
  grid-template-columns: minmax(0, 1fr) 48px !important;
  gap: 10px !important;
  padding: 0 0 12px !important;
  color: var(--pf24-text, #102033) !important;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-head small {
  display: block !important;
  color: var(--pf24-muted, #64748b) !important;
  font-size: .72rem !important;
  letter-spacing: 0 !important;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-head h2 {
  margin: 2px 0 4px !important;
  color: var(--pf24-text, #102033) !important;
  font-size: 1.45rem !important;
  line-height: 1.05 !important;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-subtitle,
body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-head p {
  margin: 0 !important;
  color: var(--pf24-muted, #64748b) !important;
  font-size: .9rem !important;
  line-height: 1.35 !important;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-avatar {
  width: 48px !important;
  height: 48px !important;
  background: #f58220 !important;
  color: #fff !important;
  font-size: 1rem !important;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-body {
  padding: 0 !important;
  color: var(--pf24-text, #102033) !important;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-stage.active {
  gap: 10px !important;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-hero,
body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-card {
  border: 1px solid var(--pf24-line, #d8e2ee) !important;
  border-radius: 18px !important;
  background: var(--pf24-surface, #fff) !important;
  color: var(--pf24-text, #102033) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-hero {
  padding: 16px !important;
  border-color: rgba(245, 130, 32, .35) !important;
  background: linear-gradient(135deg, #fff7ed, #fff) !important;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-hero h3 {
  max-width: none !important;
  color: var(--pf24-text, #102033) !important;
  font-size: 1.55rem !important;
  line-height: 1.1 !important;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-hero p,
body.klantapp-entry.portal-active .mobile-workday-feedback {
  margin-top: 8px !important;
  color: var(--pf24-muted, #64748b) !important;
  font-size: .92rem !important;
  line-height: 1.35 !important;
}

body.klantapp-entry.portal-active .customer-mobile-app .mobile-workday-card.attention,
body.klantapp-entry.portal-active .customer-mobile-open {
  padding: 14px !important;
  border-color: var(--pf24-line, #d8e2ee) !important;
}

body.klantapp-entry.portal-active .customer-mobile-open {
  display: grid !important;
  gap: 8px !important;
}

body.klantapp-entry.portal-active .customer-mobile-request {
  display: grid !important;
  gap: 2px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--pf24-line, #d8e2ee) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--pf24-bg, #f5f7fb) 72%, #fff) !important;
  color: var(--pf24-text, #102033) !important;
  text-decoration: none !important;
}

body.klantapp-entry.portal-active .customer-mobile-request span {
  font-weight: 850 !important;
}

body.klantapp-entry.portal-active .customer-mobile-request small {
  color: var(--pf24-muted, #64748b) !important;
}

body.klantapp-entry.portal-active .customer-mobile-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.klantapp-entry.portal-active .customer-mobile-actions .button {
  min-height: 48px !important;
  justify-content: center !important;
  border-radius: 14px !important;
}

body.klantapp-entry.portal-active .customer-mobile-app > .need-to-know-assistant {
  display: none !important;
}

.customer-mobile-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  width: min(620px, 100%);
  padding: 7px 10px max(7px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  border-top: 1px solid var(--pf24-line, #d8e2ee);
  background: color-mix(in srgb, var(--pf24-surface, #fff) 95%, transparent);
  box-shadow: 0 -10px 28px rgba(15, 23, 42, .10);
  backdrop-filter: blur(14px);
}

.customer-mobile-bottom-nav a {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 52px;
  border-radius: 14px;
  color: var(--pf24-muted, #64748b);
  font-size: .72rem;
  font-weight: 850;
  text-decoration: none;
}

.customer-mobile-bottom-nav svg {
  width: 21px;
  height: 21px;
}

.customer-mobile-bottom-nav a:hover,
.customer-mobile-bottom-nav a:focus-visible {
  background: #fff7ed;
  color: #9a4b00;
}

.portal-app-download {
  display: grid;
  gap: 7px;
  padding: 10px 0;
  border-top: 1px solid rgba(184, 207, 230, 0.14);
  border-bottom: 1px solid rgba(184, 207, 230, 0.14);
}

.portal-app-download span {
  color: rgba(247, 239, 229, 0.68);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.portal-app-download .button {
  width: 100%;
  justify-content: center;
  border-color: rgba(255, 130, 0, 0.3) !important;
}

@media (max-width: 760px) {
  .workapp-entry .topbar,
  .klantapp-entry .topbar {
    position: static;
  }

  .workapp-entry .admin-shell,
  .klantapp-entry .admin-shell {
    padding-inline: 14px !important;
  }

  .workapp-entry .nav-links a:not(:first-child),
  .klantapp-entry .nav-links a:not(:first-child) {
    display: none;
  }
}

/* Lichte publieke tarievenpagina - 2026-07-22 */
.public-site.pricing-page {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(236, 242, 248, 0.98)),
    url("assets/profix24-regiecentrum-hero.webp") center/cover fixed no-repeat !important;
  color: #061a33 !important;
}

.public-site.pricing-page .topbar {
  background: rgba(10, 24, 40, 0.94) !important;
}

.public-site.pricing-page .pricing-hero,
.public-site.pricing-page .pricing-detail {
  background: transparent !important;
  color: #061a33 !important;
}

.public-site.pricing-page .pricing-hero {
  padding-bottom: 20px;
}

.public-site.pricing-page .section-head {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 22px 24px;
  border: 1px solid rgba(6, 26, 51, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 48px rgba(6, 26, 51, 0.12);
}

.public-site.pricing-page .section-head h1,
.public-site.pricing-page .section-head h2,
.public-site.pricing-page .pricing-compare-head h2,
.public-site.pricing-page .staff-bundle-strip h3 {
  color: #061a33 !important;
}

.public-site.pricing-page .section-head p,
.public-site.pricing-page .pricing-compare-head span,
.public-site.pricing-page .role-flow p,
.public-site.pricing-page .pricing-plan-card p,
.public-site.pricing-page .pricing-plan-card li,
.public-site.pricing-page .staff-bundle-strip span,
.public-site.pricing-page .module-mini-card p,
.public-site.pricing-page .module-mini-card small {
  color: #506173 !important;
}

.public-site.pricing-page .comparison-card,
.public-site.pricing-page .pricing-compare-card {
  border-color: rgba(6, 26, 51, 0.12) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #061a33 !important;
  box-shadow: 0 22px 58px rgba(6, 26, 51, 0.14) !important;
}

.public-site.pricing-page .pricing-compare-head,
.public-site.pricing-page .pricing-plan-grid {
  background: rgba(246, 249, 252, 0.96) !important;
  border-color: rgba(6, 26, 51, 0.1) !important;
}

.public-site.pricing-page .role-flow article,
.public-site.pricing-page .pricing-plan-card,
.public-site.pricing-page .staff-bundle-strip,
.public-site.pricing-page .staff-bundle-strip li,
.public-site.pricing-page .module-mini-card {
  border-color: rgba(6, 26, 51, 0.12) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #061a33 !important;
  box-shadow: 0 12px 28px rgba(6, 26, 51, 0.08) !important;
}

.public-site.pricing-page .role-flow strong,
.public-site.pricing-page .pricing-plan-card strong,
.public-site.pricing-page .staff-bundle-strip strong,
.public-site.pricing-page .module-mini-card strong,
.public-site.pricing-page .comparison-card strong {
  color: #061a33 !important;
}

.public-site.pricing-page .role-flow span {
  background: rgba(255, 130, 0, 0.14) !important;
  color: #ff8200 !important;
}

.public-site.pricing-page .pricing-plan-card span,
.public-site.pricing-page .staff-bundle-strip .eyebrow,
.public-site.pricing-page .pricing-compare-head .eyebrow {
  color: #ff8200 !important;
}

.public-site.pricing-page .pricing-plan-card .button.secondary {
  border-color: rgba(255, 130, 0, 0.48) !important;
  background: #ff8200 !important;
  color: #061a33 !important;
}

.public-site.pricing-page .pricing-compact-table {
  background: rgb(255, 255, 255) !important;
  color: #061a33 !important;
}

.public-site.pricing-page .pricing-compact-table > div {
  border-color: rgba(6, 26, 51, 0.1) !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

.public-site.pricing-page .pricing-compact-table > div:nth-child(odd):not(.comparison-head) {
  background: rgba(244, 248, 252, 0.98) !important;
}

.public-site.pricing-page .pricing-compact-table .comparison-head {
  background: #061a33 !important;
  color: #fff !important;
}

.public-site.pricing-page .pricing-compact-table span,
.public-site.pricing-page .pricing-compact-table b,
.public-site.pricing-page .pricing-compact-table strong {
  color: #061a33 !important;
}

.public-site.pricing-page .pricing-compact-table .comparison-head span,
.public-site.pricing-page .pricing-compact-table .comparison-head strong {
  color: #fff !important;
}

.public-site.pricing-page .price-promo {
  background: rgba(255, 130, 0, 0.12) !important;
}

.public-site.pricing-page footer {
  background: #061a33 !important;
}

/* Admin rustlaag: compact, donkerder canvas en duidelijke werkvlakken. */
.admin-body {
  --admin-canvas: #07182d;
  --admin-panel: #10243b;
  --admin-text: #eef5fb;
  --admin-muted: #a9b8c8;
  --admin-line: rgba(197, 213, 229, 0.18);
  background: linear-gradient(135deg, #06182c 0%, #0b223c 50%, #06111f 100%);
  color: var(--admin-text);
}

.admin-body .topbar {
  background: rgba(7, 24, 45, 0.94);
  border-bottom: 1px solid var(--admin-line);
  box-shadow: none;
}

.admin-body .brand img {
  width: 190px;
  height: auto;
  padding: 6px 8px;
  border-radius: 5px;
  background: #fff;
}

.admin-body .admin-title,
.admin-body .topbar nav a,
.admin-body .plain-btn {
  color: var(--admin-text);
}

.admin-body .system-switch,
.admin-body .admin-tabs,
.admin-body .partners,
.admin-body .cockpit-head,
.admin-body .cockpit-block,
.admin-body .trend-dashboard,
.admin-body .finance-block,
.admin-body .finance-chart-block,
.admin-body .finance-priority,
.admin-body .action-center,
.admin-body .assistant-console,
.admin-body .assistant-panel,
.admin-body .document-review-panel,
.admin-body .quote-box,
.admin-body .staff-console,
.admin-body .staff-sessions,
.admin-body .staff-dossier,
.admin-body .staff-subpanel,
.admin-body .acceptance-head,
.admin-body .acceptance-summary,
.admin-body .acceptance-priority,
.admin-body .acceptance-group,
.admin-body .security-panel,
.admin-body .communication-panel,
.admin-body .community-head,
.admin-body .community-table,
.admin-body .settings-shell,
.admin-body .settings-card {
  border-color: var(--admin-line);
  background: rgba(16, 36, 59, 0.88);
  color: var(--admin-text);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
}

.account-discount-panel {
  margin: 16px 0;
}

.account-discount-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.account-discount-form .wide,
.account-discount-scope {
  grid-column: 1 / -1;
}

.account-discount-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(5, 18, 31, 0.38);
}

.account-discount-scope legend {
  padding: 0 6px;
  color: var(--admin-muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.account-discount-active-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.account-discount-active-list span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid rgba(255, 143, 23, 0.35);
  border-radius: 999px;
  background: rgba(255, 143, 23, 0.1);
}

.admin-body .system-switch a,
.admin-body .admin-tabs button {
  color: var(--admin-muted);
}

.admin-body .system-switch a.active,
.admin-body .admin-tabs button.active {
  color: var(--admin-text);
  background: rgba(255, 130, 0, 0.14);
  box-shadow: inset 3px 0 0 var(--orange);
}

.admin-body p,
.admin-body small,
.admin-body .cockpit-head p,
.admin-body .panel-head p,
.admin-body .finance-line small,
.admin-body .cockpit-stat-list span,
.admin-body .ranked-list span,
.admin-body .compact-table span,
.admin-body .trend-head p {
  color: var(--admin-muted);
}

.admin-body .metric-card,
.admin-body .summary-card,
.admin-body .staff-kpi-strip article,
.admin-body .action-tile,
.admin-body .finance-stat,
.admin-body .trend-card,
.admin-body .cockpit-stat-list button,
.admin-body .ranked-list button,
.admin-body .compact-table button,
.admin-body .compact-table a,
.admin-body .finance-line,
.admin-body .staff-table-row,
.admin-body .staff-document-row,
.admin-body .staff-split fieldset,
.admin-body .staff-subpanel,
.admin-body .document-review-row,
.admin-body .admin-doc-row,
.admin-body input,
.admin-body select,
.admin-body textarea {
  border-color: var(--admin-line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--admin-text);
}

.admin-body input::placeholder,
.admin-body textarea::placeholder {
  color: rgba(238, 245, 251, 0.52);
}

.admin-body select option {
  color: #07182d;
}

.admin-body .admin-tabs select,
.admin-body .admin-tabs select option,
.admin-body .system-switch select,
.admin-body .system-switch select option {
  background-color: #07182d !important;
  color: #f8fafc !important;
}

.admin-body .badge,
.admin-body .status-pill {
  background: rgba(255, 130, 0, 0.15);
  color: #ffd29d;
}

.admin-body .panel-head h2,
.admin-body .staff-dossier-head h3,
.admin-body .staff-table-head,
.admin-body .staff-card-form legend,
.admin-body .staff-card-form label {
  color: #ffb15c;
}

.admin-body input:focus,
.admin-body select:focus,
.admin-body textarea:focus {
  border-color: rgba(255, 130, 0, 0.76) !important;
  box-shadow: 0 0 0 2px rgba(255, 130, 0, 0.16);
  outline: none;
}

.admin-body .metrics,
.admin-body .cockpit-kpis,
.admin-body .finance-summary-strip,
.admin-body .staff-kpi-strip,
.admin-body .acceptance-summary,
.admin-body .community-kpis,
.admin-body .communication-kpis {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
}

.admin-body .metric-card,
.admin-body .summary-card,
.admin-body .staff-kpi-strip article,
.admin-body .finance-stat {
  min-height: 62px;
  padding: 9px 11px;
}

.admin-body .metric-card span,
.admin-body .summary-card strong,
.admin-body .finance-stat strong {
  font-size: 20px;
  line-height: 1.1;
}

.admin-body .overview-grid,
.admin-body .finance-columns,
.admin-body .cockpit-sections {
  gap: 10px;
}

.assistant-workspace,
.assistant-console,
.assistant-grid,
.document-review-panel,
.document-review-list {
  display: grid;
  gap: 10px;
}

.assistant-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.assistant-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

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

.assistant-permissions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: stretch;
}

.assistant-permissions label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--admin-line, var(--line));
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
}

.assistant-permissions span {
  display: grid;
  gap: 3px;
}

.assistant-permissions small {
  font-size: 12px;
  line-height: 1.35;
}

.document-review-panel {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.document-review-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.document-review-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.document-review-row div {
  min-width: 0;
}

.document-review-row strong,
.document-review-row small {
  display: block;
}

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

/* Beheerbrede donkerlaag: geen losse witte/grijze werkvlakken in tabs. */
.admin-body.login-entry .login-panel,
.admin-body .branch-card,
.admin-body .branch-editor,
.admin-body .branch-stats article,
.admin-body .branch-value-shell,
.admin-body .branch-value-group,
.admin-body .branch-value-row,
.admin-body .settings-summary article,
.admin-body .settings-card label,
.admin-body .settings-card .checkbox-line,
.admin-body .outbox-row,
.admin-body .security-row,
.admin-body .acceptance-item,
.admin-body .acceptance-auto,
.admin-body .acceptance-steps,
.admin-body .pro-card-compact,
.admin-body .staff-table,
.admin-body .staff-table-head,
.admin-body .workspace,
.admin-body .queue,
.admin-body .detail,
.admin-body .detail-card,
.admin-body .detail-section,
.admin-body .timeline-card,
.admin-body .ticket-card,
.admin-body .quote-card,
.admin-body .workorder-card,
.admin-body .request-list,
.admin-body .request-item,
.admin-body .calculator-result,
.admin-body .audit-filter-bar,
.admin-body .log-row,
.admin-body .admin-doc-list,
.admin-body .admin-doc-row,
.admin-body .document-archive-preview,
.admin-body .compact-table button,
.admin-body .compact-table a {
  border-color: var(--admin-line) !important;
  background: rgba(16, 36, 59, 0.76) !important;
  color: var(--admin-text) !important;
  box-shadow: none !important;
}

.admin-body .branch-card.active,
.admin-body .request-item.active,
.admin-body .acceptance-item.busy,
.admin-body .outbox-row:hover,
.admin-body .security-row:hover,
.admin-body .compact-table button:hover,
.admin-body .compact-table a:hover {
  border-color: rgba(255, 130, 0, 0.42) !important;
  background: rgba(255, 130, 0, 0.12) !important;
}

.admin-body .settings-card label:focus-within,
.admin-body .branch-value-row:hover {
  border-color: rgba(255, 130, 0, 0.46) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

.admin-body .acceptance-item.done,
.admin-body .security-row.ok,
.admin-body .mini-status.green {
  border-color: rgba(34, 197, 94, 0.28) !important;
  background: rgba(34, 197, 94, 0.10) !important;
  color: #d7ffe9 !important;
}

.admin-body .acceptance-item.blocked,
.admin-body .security-row.critical,
.admin-body .security-row.high,
.admin-body .mini-status.red {
  border-color: rgba(248, 113, 113, 0.28) !important;
  background: rgba(248, 113, 113, 0.10) !important;
  color: #ffe1e1 !important;
}

.admin-body .mini-status.orange,
.admin-body .status-pill.open,
.admin-body .status-pill.nieuw {
  border-color: rgba(255, 130, 0, 0.34) !important;
  background: rgba(255, 130, 0, 0.14) !important;
  color: #ffd29d !important;
}

.admin-body .branch-card strong,
.admin-body .branch-editor h2,
.admin-body .settings-summary strong,
.admin-body .settings-card h3,
.admin-body .settings-card-head h3,
.admin-body .outbox-row strong,
.admin-body .security-row strong,
.admin-body .acceptance-item strong,
.admin-body .pro-card-compact strong,
.admin-body .staff-table-row strong,
.admin-body .detail strong,
.admin-body .detail-card strong,
.admin-body .detail-section strong,
.admin-body .ticket-card strong,
.admin-body .quote-card strong,
.admin-body .workorder-card strong,
.admin-body .request-item strong,
.admin-body .compact-table strong,
.admin-body .log-row strong,
.admin-body .calculator-result strong {
  color: var(--admin-text) !important;
}

.admin-body .branch-card span,
.admin-body .branch-card small,
.admin-body .settings-summary span,
.admin-body .settings-summary small,
.admin-body .settings-card span,
.admin-body .settings-card small,
.admin-body .settings-card .settings-help,
.admin-body .outbox-row small,
.admin-body .security-row small,
.admin-body .acceptance-item small,
.admin-body .acceptance-item p,
.admin-body .pro-card-compact span,
.admin-body .pro-card-compact small,
.admin-body .staff-table-row span,
.admin-body .staff-table-row small,
.admin-body .detail span,
.admin-body .detail small,
.admin-body .detail p,
.admin-body .detail-card span,
.admin-body .detail-card small,
.admin-body .detail-card p,
.admin-body .detail-section span,
.admin-body .detail-section small,
.admin-body .detail-section p,
.admin-body .ticket-card span,
.admin-body .ticket-card small,
.admin-body .ticket-card p,
.admin-body .quote-card span,
.admin-body .quote-card small,
.admin-body .quote-card p,
.admin-body .workorder-card span,
.admin-body .workorder-card small,
.admin-body .workorder-card p,
.admin-body .request-item span,
.admin-body .request-item small,
.admin-body .compact-table small,
.admin-body .log-row small,
.admin-body .calculator-result small {
  color: var(--admin-muted) !important;
}

.admin-body .metric-card strong,
.admin-body .metric-card span,
.admin-body .summary-card strong,
.admin-body .finance-stat span,
.admin-body .settings-summary span,
.admin-body .community-kpis span,
.admin-body .branch-value-row small,
.admin-body .outbox-row small:last-child,
.admin-body .security-row strong,
.admin-body .acceptance-meta span,
.admin-body .pro-meta-line span,
.admin-body .staff-table-head span,
.admin-body .compact-head .badge,
.portal-active .portal-nav-count,
.portal-active .customer-cockpit span,
.portal-active .professional-cockpit span,
.portal-active .badge,
.portal-active .status-pill {
  color: #ffd29d !important;
}

.admin-body .button.secondary:hover,
.admin-body .plain-btn:hover,
.portal-active .button.secondary:hover,
.portal-active .plain-btn:hover {
  border-color: rgba(255, 130, 0, 0.48) !important;
  background: rgba(255, 130, 0, 0.13) !important;
  color: #fff !important;
}

.admin-body .outbox-head-row,
.admin-body .staff-table-head {
  background: rgba(255, 255, 255, 0.09) !important;
}

.admin-body.login-entry .login-panel {
  max-width: 430px;
  background: rgba(16, 36, 59, 0.92) !important;
}

.admin-body.login-entry .login-panel h1,
.admin-body.login-entry .login-panel strong {
  color: #fff !important;
}

.admin-body.login-entry .login-panel p,
.admin-body.login-entry .login-panel span,
.admin-body.login-entry .login-panel label {
  color: var(--admin-muted) !important;
}

.admin-body.login-entry .login-panel input {
  background: #fff !important;
  color: #061a33 !important;
}

/* Portalen: dezelfde rust voor extra panelen die door rollen heen terugkomen. */
.portal-active .customer-cockpit article,
.portal-active .customer-next-action,
.portal-active .business-shortcuts a,
.portal-active .planning-concept-row,
.portal-active .planning-import-panel,
.portal-active .planning-summary-strip article,
.portal-active .planning-integration-strip article,
.portal-active .team-document-list,
.portal-active .team-document-field,
.portal-active .document-status-card,
.portal-active .chat-messages article,
.portal-active .workorder-card,
.portal-active .job-card,
.portal-active .request-card,
.portal-active .asset-card,
.portal-active .inventory-row,
.portal-active .vehicle-row {
  border-color: var(--pf24-line) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--pf24-text) !important;
  box-shadow: none !important;
}

.portal-active .customer-cockpit article strong,
.portal-active .customer-next-action strong,
.portal-active .business-shortcuts a strong,
.portal-active .planning-concept-row strong,
.portal-active .document-status-card strong,
.portal-active .chat-messages article strong,
.portal-active .workorder-card strong,
.portal-active .job-card strong,
.portal-active .request-card strong,
.portal-active .asset-card strong,
.portal-active .inventory-row strong,
.portal-active .vehicle-row strong {
  color: #fff !important;
}

.portal-active .customer-cockpit article span,
.portal-active .customer-next-action span,
.portal-active .business-shortcuts a span,
.portal-active .planning-concept-row small,
.portal-active .document-status-card small,
.portal-active .chat-messages article p,
.portal-active .chat-messages article small,
.portal-active .workorder-card small,
.portal-active .job-card small,
.portal-active .request-card small,
.portal-active .asset-card small,
.portal-active .inventory-row small,
.portal-active .vehicle-row small {
  color: var(--pf24-muted) !important;
}

@media (max-width: 1100px) {
  .assistant-grid,
  .assistant-permissions {
    grid-template-columns: 1fr;
  }
}

.topbar nav a,
.topbar nav .plain-btn {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.topbar nav a:hover,
.topbar nav .plain-btn:hover {
  border-color: rgba(0, 31, 68, 0.1);
  background: #f6f8fa;
  color: var(--ink);
}

.topbar nav a[href*="login"] {
  border-color: rgba(255, 130, 0, 0.32);
  color: var(--ink);
  background: #fff7ee;
}

.topbar nav a[href*="login"]:hover {
  border-color: rgba(255, 130, 0, 0.5);
  background: #fff1df;
}

.app-action {
  white-space: nowrap;
}

.portal-topbar {
  gap: 18px;
}

.portal-nav {
  flex: 1;
  justify-content: space-between;
  gap: 16px;
}

.nav-links,
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-actions {
  justify-content: flex-end;
}

.nav-actions .language-select {
  min-width: 108px;
}

.app-action.secondary-action {
  opacity: 0.82;
}

.app-action.secondary-action:hover {
  opacity: 1;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
}

.brand img {
  display: block;
  width: min(260px, 46vw);
  height: 54px;
  object-fit: contain;
  object-position: left center;
}

.admin-title {
  max-width: 220px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  color: var(--muted);
  font-size: 15px;
}

.language-select {
  width: auto;
  min-width: 104px;
  max-width: 126px;
  min-height: 32px;
  padding: 5px 24px 5px 9px;
  border: 1px solid rgba(0, 31, 68, 0.14);
  border-radius: 6px;
  color: var(--ink);
  background-color: rgba(255,255,255,0.88);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.1;
}

.nav-dropdown {
  width: 100%;
}

.nav-dropdown summary {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  list-style: none;
}

.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}

.nav-dropdown[open] summary {
  color: var(--ink);
  background: #f6f8fa;
  border-color: rgba(0, 31, 68, 0.1);
}

.nav-dropdown-panel {
  display: grid;
  gap: 4px;
  padding: 4px 0 8px 10px;
}

.nav-dropdown-panel a {
  display: grid !important;
  justify-content: stretch;
  min-height: 0;
  padding: 7px 9px;
}

.nav-dropdown-panel strong,
.nav-dropdown-panel span {
  display: block;
}

.nav-dropdown-panel strong {
  color: var(--ink);
  font-size: 12px;
}

.nav-dropdown-panel span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

@media (min-width: 861px) {
  .public-site {
    padding-left: 232px;
    background:
      linear-gradient(180deg, #121a22 0%, #16110d 54%, #21170f 100%);
    color: #f7efe5;
  }

  .public-site .topbar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 232px;
    min-height: 100vh;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    gap: 22px;
    padding: 24px 18px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    background: rgba(16, 22, 28, 0.96);
    color: #f7efe5;
  }

  .public-site .topbar nav a,
  .public-site .nav-dropdown summary {
    color: rgba(247, 239, 229, 0.78);
  }

  .public-site .topbar nav a:hover,
  .public-site .nav-dropdown[open] summary {
    color: #fff;
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
  }

  .public-site .topbar nav a[href*="login"] {
    background: rgba(255, 130, 0, 0.13);
    border-color: rgba(255, 130, 0, 0.28);
    color: #fff;
  }

  .public-site .nav-dropdown-panel strong {
    color: #fff;
  }

  .public-site .nav-dropdown-panel span {
    color: rgba(247, 239, 229, 0.62);
  }

  .public-site .brand img {
    width: 178px;
    height: 44px;
  }

  .public-site .admin-title {
    max-width: none;
    padding-left: 0;
    border-left: 0;
    font-size: 15px;
    line-height: 1.2;
    white-space: normal;
  }

  .public-site .site-nav {
    width: 100%;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .public-site .site-nav > a,
  .public-site .site-nav > .language-select {
    width: 100%;
  }

  .public-site .site-nav > a {
    justify-content: flex-start;
  }

  .public-site .language-select {
    margin-top: 8px;
    max-width: none;
  }

  .public-site .hero {
    min-height: 88vh;
  }

  .public-site .hero-copy {
    max-width: 760px;
  }

  .public-site .hero h1 {
    max-width: 720px;
    font-size: clamp(40px, 4.7vw, 62px);
    line-height: 1.04;
    hyphens: none;
  }

  .public-site .hero p:not(.eyebrow) {
    max-width: 720px;
    font-size: 18px;
    line-height: 1.55;
    hyphens: none;
  }

  .public-site .hero-actions {
    max-width: 720px;
  }

  .public-site .hero-actions .button {
    min-width: 0;
  }

  .public-site .primary {
    background: var(--ink);
  }

  .public-site .primary:hover {
    background: #06315f;
  }

  .public-site .button {
    box-shadow: none;
  }
}

.public-site .band,
.public-site footer {
  background: #171d22;
  color: #f7efe5;
}

.public-site .services-band,
.public-site .workflow-band,
.public-site .pricing-detail,
.public-site .audience-content {
  background:
    linear-gradient(180deg, rgba(23, 29, 34, 0.98), rgba(31, 23, 15, 0.98));
}

.public-site.audience-page .audience-content {
  background:
    linear-gradient(180deg, #f5f8fb 0%, #e8eef5 100%);
  color: #061a33;
}

.public-site .section-head h2,
.public-site .workflow-copy h2,
.public-site .pricing-page h1,
.public-site .pricing-page h2 {
  color: #fff;
}

.public-site .service-grid article,
.public-site .service-package-strip article,
.public-site .platform-proof article,
.public-site .role-flow article,
.public-site .audience-grid article,
.public-site .comparison-card,
.public-site .pricing-plan-card,
.public-site .payment-panel,
.public-site .pro-value {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.055);
  color: #f7efe5;
  box-shadow: 0 14px 38px rgba(0,0,0,0.18);
}

.public-site .role-flow span {
  color: #fff;
  background: rgba(255,255,255,0.12);
}

.public-site .service-grid p,
.public-site .service-package-strip span,
.public-site .platform-proof span,
.public-site .role-flow p,
.public-site .audience-grid p,
.public-site .pricing-plan-card p,
.public-site .pricing-compare-head span,
.public-site .pro-value span,
.public-site .form-message {
  color: rgba(247, 239, 229, 0.72);
}

.public-site .audience-grid strong,
.public-site .role-flow strong,
.public-site .service-grid h3,
.public-site .pricing-plan-card strong,
.public-site .platform-proof strong {
  color: #fff;
}

.public-site .secondary {
  color: #fff;
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}

.public-site .secondary:hover {
  background: rgba(255,255,255,0.1);
}

.public-site label,
.public-site .pricing-page,
.public-site .audience-content,
.public-site .pricing-detail,
.public-site .workflow-band,
.public-site .services-band {
  color: #f7efe5;
}

.public-site input,
.public-site select,
.public-site textarea {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.94);
  color: #061a33;
}

.public-site input::placeholder,
.public-site textarea::placeholder {
  color: #526274;
}

.public-site .empty,
.public-site small,
.public-site .muted,
.public-site .pricing-note,
.public-site .section-head p,
.public-site .audience-content li,
.public-site .pricing-plan-card li {
  color: rgba(247, 239, 229, 0.76);
}

.public-site .badge,
.public-site .status-pill {
  color: #061a33;
}

.portal-active {
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 128, 0, 0.10), transparent 28%),
    linear-gradient(135deg, #07182d 0%, #0b223c 52%, #07111f 100%);
  color: #eef5fb;
}

.portal-active .nav-links a {
  display: none;
}

.portal-active .topbar {
  position: sticky;
  background: rgba(7, 24, 45, 0.96);
  color: #eef5fb;
  border-bottom-color: rgba(255,255,255,0.10);
}

.portal-active .admin-shell {
  padding-top: 24px;
}

.portal-active .dashboard {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.professional-portal-active .panel-head.customer-head {
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  color: #eef5fb;
}

.professional-portal-active .panel-head.customer-head h1 {
  margin: 0;
  font-size: 28px;
}

.professional-portal-active .panel-head.customer-head p {
  margin: 5px 0 0;
  color: rgba(238,245,251,0.72);
  font-size: 13px;
  font-weight: 800;
}

.professional-portal-active .professional-cockpit {
  grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.professional-portal-active .compact-business-card,
.professional-portal-active .professional-section,
.professional-portal-active .customer-request-card {
  border-radius: 8px;
  box-shadow: none;
}

.portal-active .customer-request-card,
.portal-active .compact-business-card,
.portal-active .readiness-panel,
.portal-active .professional-section,
.portal-active .customer-section > .customer-request-card,
.portal-active .portal-notifications article {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.07);
  color: #eef5fb;
}

.portal-active .customer-request-card p,
.portal-active .customer-request-card span,
.portal-active .customer-request-card small,
.portal-active .compact-business-card p,
.portal-active .compact-business-card span,
.portal-active .readiness-panel span,
.portal-active .readiness-panel small {
  color: rgba(238,245,251,0.74);
}

.portal-active .customer-request-card strong,
.portal-active .customer-request-card h2,
.portal-active .customer-request-card h3,
.portal-active .compact-business-card strong,
.portal-active .readiness-panel strong {
  color: #fff;
}

.portal-active input,
.portal-active select,
.portal-active textarea {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.94);
  color: #061a33;
}

.professional-portal-active .professional-section-nav {
  position: sticky;
  top: 72px;
  z-index: 3;
  display: flex;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.96);
  overflow-x: auto;
}

.professional-portal-active .professional-section-nav a {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.professional-portal-active .professional-section-nav a:hover {
  color: var(--ink);
  background: #eef3f7;
}

.professional-inline-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255,130,0,0.22);
  border-left: 4px solid var(--orange);
  border-radius: 8px;
  background: #fff8ec;
}

.professional-inline-alert strong {
  color: var(--ink);
  font-size: 14px;
}

.professional-inline-alert span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.professional-inline-alert .button {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

.professional-portal-active .professional-foldout > summary,
.professional-portal-active .profile-section > summary {
  cursor: pointer;
}

.audience-page main {
  min-height: 100vh;
}

.audience-hero {
  min-height: 48vh;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  padding: 54px 7vw;
  background:
    linear-gradient(90deg, rgba(3, 18, 35, 0.72), rgba(3, 18, 35, 0.18) 68%),
    url("assets/profix24-regiecentrum-hero.webp") 72% center/cover no-repeat,
    #121a22;
}

.audience-hero .eyebrow,
.audience-hero h1,
.audience-hero p:not(.eyebrow) {
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(3, 18, 35, 0.58);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(8px);
}

.audience-hero .eyebrow {
  padding: 7px 11px;
  border-radius: 999px;
  color: #ffb15a;
}

.audience-hero h1 {
  max-width: 660px;
  margin-bottom: 0;
  padding: 12px 16px 10px;
  border-radius: 8px;
  font-size: clamp(28px, 3vw, 40px);
  color: #fff;
  hyphens: none;
}

.audience-hero p:not(.eyebrow) {
  max-width: 590px;
  margin: 0;
  padding: 11px 14px;
  border-radius: 8px;
  color: rgba(247, 239, 229, 0.88);
  font-size: 16px;
  line-height: 1.55;
}

.audience-hero .hero-actions {
  margin-top: 4px;
}

.audience-checklist {
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.audience-checklist strong,
.audience-checklist span {
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.055);
}

.audience-checklist strong {
  grid-column: 1 / -1;
  color: #fff;
  font-size: 18px;
}

.audience-checklist span {
  color: rgba(247, 239, 229, 0.82);
  font-weight: 800;
}

@media (max-width: 860px) {
  .topbar {
    gap: 14px;
    padding-inline: 28px;
  }

  .brand img {
    width: min(210px, 42vw);
  }

  .topbar nav a,
  .topbar nav .plain-btn {
    padding-inline: 8px;
  }
}

.hero {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  padding: 72px 7vw;
  color: white;
  background:
    linear-gradient(90deg, rgba(18, 26, 34, 0.94), rgba(18, 26, 34, 0.72) 48%, rgba(18, 26, 34, 0.18)),
    url("assets/profix24-regiecentrum-hero.webp") 74% center/cover no-repeat,
    #1a252f;
}

.hero-copy {
  max-width: 680px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--gold);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 13px;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: 22px;
  font-size: clamp(42px, 6vw, 78px);
  line-height: 1.02;
}

h2 {
  font-size: 34px;
  line-height: 1.12;
  margin-bottom: 12px;
}

.hero p:not(.eyebrow) {
  max-width: 610px;
  color: rgba(255,255,255,0.86);
  font-size: 20px;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.button {
  border: 0;
  border-radius: 7px;
  min-height: 46px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  cursor: pointer;
  line-height: 1.18;
  text-align: center;
  white-space: normal;
}

.primary {
  background: var(--orange);
  color: white;
}

.primary:hover { background: var(--orange-dark); }

.secondary {
  color: var(--ink);
  border: 1px solid var(--line);
  background: white;
}

.ghost {
  color: white;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
}

.band, .request-section, footer, .admin-shell {
  padding: 64px 7vw;
}

.section-head, .request-intro {
  max-width: 680px;
  margin-bottom: 28px;
}

.section-head-spaced {
  margin-top: 36px;
}

.role-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.role-flow article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid rgba(0, 31, 68, 0.1);
  border-radius: 8px;
  background: #fbfcfd;
  hyphens: none;
}

.role-flow span {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--ink);
  background: #eef3f7;
  font-size: 12px;
  font-weight: 950;
}

.role-flow strong {
  display: block;
  color: var(--blue);
  font-size: 14px;
  line-height: 1.25;
}

.role-flow p {
  grid-column: 2;
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

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

.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.audience-grid article {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
  hyphens: none;
}

.audience-grid span {
  display: block;
  margin-bottom: 7px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.audience-grid strong {
  display: block;
  color: var(--blue);
  font-size: 18px;
  line-height: 1.25;
}

.audience-grid p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.audience-grid .button {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.service-grid article {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.service-grid h3 { margin-bottom: 8px; }

.service-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.service-package-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}

.service-package-strip article {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.service-package-strip strong {
  color: var(--blue);
  font-size: 15px;
}

.service-package-strip span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.service-package-strip a {
  color: var(--orange);
  font-size: 13px;
  font-weight: 950;
  text-decoration: none;
}

.branch-profile-picker {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 130, 0, 0.24);
  border-radius: 8px;
  background: rgba(255, 130, 0, 0.06);
}

.branch-profile-picker-head {
  display: grid;
  gap: 3px;
}

.branch-profile-picker-head strong {
  color: var(--blue);
  font-size: 15px;
}

.branch-profile-picker-head span,
.branch-profile-picker p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.branch-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.branch-profile-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(0, 31, 68, 0.12);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.branch-profile-option.selected {
  border-color: rgba(255, 130, 0, 0.75);
  box-shadow: inset 3px 0 0 var(--orange);
}

.branch-profile-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.branch-profile-option span {
  grid-row: 1 / span 2;
  min-width: 42px;
  padding: 5px 6px;
  border-radius: 999px;
  background: rgba(0, 31, 68, 0.08);
  color: var(--blue);
  font-size: 10px;
  font-weight: 950;
  text-align: center;
}

.branch-profile-option span svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.branch-profile-option b {
  color: var(--blue);
  font-size: 13px;
  line-height: 1.2;
}

.branch-profile-option small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.portal-active .branch-profile-picker {
  border-color: rgba(255, 130, 0, 0.28);
  background: rgba(255, 130, 0, 0.08);
}

.portal-active .branch-profile-picker-head strong,
.portal-active .branch-profile-option b {
  color: #fff7ed;
}

.portal-active .branch-profile-picker-head span,
.portal-active .branch-profile-picker p,
.portal-active .branch-profile-option small {
  color: rgba(247, 239, 229, 0.74);
}

.portal-active .branch-profile-option {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(5, 20, 36, 0.72);
}

.portal-active .branch-profile-option span {
  background: rgba(255, 130, 0, 0.14);
  color: var(--pf24-orange);
}

.signup-branch-selector {
  gap: 12px;
  background: #f7fafc;
}

.signup-branch-primary {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.signup-branch-primary > span {
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.signup-branch-primary select {
  width: 100%;
  min-height: 44px;
}

.signup-branch-preview {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px 12px;
  padding: 14px;
  border: 1px solid rgba(0, 31, 68, 0.14);
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  background: #fff;
}

.signup-branch-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 6px;
  background: rgba(255, 130, 0, 0.12);
  color: #9b4d00;
}

.signup-branch-icon svg {
  width: 26px;
  height: 26px;
}

.signup-branch-preview [data-branch-kicker] {
  color: #536477;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.signup-branch-preview h2 {
  margin: 2px 0 3px;
  color: #001f44;
  font-size: 17px;
  letter-spacing: 0;
  line-height: 1.25;
}

.signup-branch-preview p {
  margin: 0;
  color: #536477;
  font-size: 12px;
}

.signup-branch-preview > ul {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px 14px;
  margin: 2px 0 0;
  padding-left: 18px;
  color: #243a52;
  font-size: 11px;
}

.signup-industry-setup {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.signup-industry-setup section {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(0, 31, 68, 0.1);
  border-radius: 5px;
  background: #f7fafc;
}

.signup-industry-setup strong {
  display: block;
  margin-bottom: 3px;
  color: #001f44;
  font-size: 10px;
  text-transform: uppercase;
}

.signup-industry-setup p {
  color: #31475e;
  font-size: 10px;
  line-height: 1.4;
}

.signup-branch-extras {
  grid-column: 2;
  display: grid;
  gap: 6px;
  margin-top: 3px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 31, 68, 0.1);
}

.signup-branch-extras > strong {
  color: #001f44;
  font-size: 12px;
}

.signup-branch-extras > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
}

.signup-branch-extras span {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 5px 0;
  color: #243a52;
  font-size: 11px;
}

.signup-branch-extras span svg {
  width: 15px;
  height: 15px;
  color: #607286;
}

.signup-branch-extras span.selected svg {
  color: #16804a;
}

.signup-branch-extras small {
  color: #607286;
  font-size: 10px;
}

.signup-branch-match,
.signup-branch-filter {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border-left: 3px solid #16804a;
  background: rgba(22, 128, 74, 0.08);
  color: #174a32 !important;
  font-size: 11px !important;
}

.signup-branch-filter {
  border-left-color: #c66500;
  background: rgba(255, 130, 0, 0.09);
  color: #713b00 !important;
}

.signup-secondary-branches {
  border-top: 1px solid rgba(0, 31, 68, 0.1);
  padding-top: 8px;
}

.signup-secondary-branches summary {
  cursor: pointer;
  color: #001f44;
  font-size: 12px;
  font-weight: 850;
}

.signup-secondary-branches > p {
  margin: 7px 0;
}

.signup-secondary-branches [data-branch-secondary-options] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
}

.signup-secondary-branches label {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 5px 0;
  color: #243a52;
  font-size: 11px;
}

.signup-secondary-branches input {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.signup-structure {
  grid-column: 1 / -1;
  display: grid;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(0, 31, 68, 0.14);
  border-radius: 8px;
  background: #f7fafc;
}

.signup-structure-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
}

.signup-structure-counts > label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(0, 31, 68, 0.1);
  border-radius: 5px;
  background: #fff;
  color: #243a52;
  font-size: 11px;
  font-weight: 750;
}

.signup-structure-counts input[type="number"] {
  width: 70px;
  min-height: 38px;
}

.signup-structure-counts .signup-structure-check {
  justify-content: flex-start;
}

.signup-structure-check input {
  width: 18px;
  height: 18px;
}

.signup-structure-summary {
  padding: 9px 11px;
  border-left: 3px solid #16804a;
  background: rgba(22, 128, 74, 0.08);
  color: #174a32;
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 700px) {
  .signup-branch-primary {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .signup-branch-preview > ul,
  .signup-industry-setup,
  .signup-branch-extras {
    grid-column: 1 / -1;
  }

  .signup-branch-preview > ul,
  .signup-industry-setup,
  .signup-branch-extras > div,
  .signup-secondary-branches [data-branch-secondary-options],
  .signup-structure-counts {
    grid-template-columns: 1fr;
  }
}

.platform-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.platform-proof article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.platform-proof strong {
  display: block;
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}

.platform-proof span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.pricing-hero {
  padding-bottom: 8px;
}

.pricing-page .band {
  padding-top: 26px;
  padding-bottom: 26px;
}

.pricing-page .section-head {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.pricing-page h1 {
  font-size: clamp(30px, 3.8vw, 46px);
}

.pricing-page h2 {
  font-size: 24px;
}

.pricing-hero .section-head p:last-child {
  max-width: 720px;
  margin: 0 auto;
  color: var(--muted);
}

.pricing-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 1120px;
  margin: 18px auto 0;
}

.pricing-route-grid-four,
.pricing-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pricing-route {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}

.pricing-route:hover,
.pricing-route:focus-visible {
  border-color: var(--orange);
  box-shadow: 0 10px 28px rgba(0, 31, 63, 0.08);
}

.pricing-route.highlighted {
  border-color: var(--orange);
  box-shadow: inset 0 3px 0 var(--orange);
}

.pricing-route strong {
  font-size: 18px;
}

.pricing-route span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.pricing-band {
  padding-top: 18px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pricing-grid.pricing-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pricing-card {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  align-content: stretch;
  gap: 10px;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.pricing-card .button {
  align-self: end;
  margin-top: auto;
}

.pricing-card.featured {
  border-color: var(--orange);
  box-shadow: inset 0 4px 0 var(--orange);
}

.pricing-card strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.05;
}

.pricing-card p {
  color: var(--muted);
  margin: 0;
}

.price-promo {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(255, 130, 0, 0.28);
  border-radius: 8px;
  background: #fff7ee;
}

.price-promo[hidden] {
  display: none;
}

.price-promo.neutral {
  border-color: var(--line);
  background: #fbfcfd;
}

.price-promo span {
  color: var(--orange);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.price-promo.neutral span {
  color: var(--muted);
}

.price-promo b {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.price-promo small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.pricing-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 14px;
}

.pricing-list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.pricing-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--orange);
}

.pricing-label {
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.comparison-card {
  max-width: 1120px;
  margin: 16px auto 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.pricing-compare-card {
  padding: 0;
  overflow: hidden;
}

.pricing-compare-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
}

.pricing-compare-head h2,
.pricing-compare-head p {
  margin: 0;
}

.pricing-compare-head span {
  max-width: 360px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}

.pricing-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  background: #f5f7fa;
}

.pricing-plan-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px;
  min-height: 306px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 31, 68, 0.06);
  hyphens: none;
}

.pricing-plan-card > div:first-child {
  display: grid;
  gap: 7px;
}

.pricing-plan-card span {
  color: var(--orange);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.pricing-plan-card strong {
  color: var(--ink);
  font-size: 23px;
  line-height: 1.05;
}

.pricing-plan-card p {
  min-height: 48px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.pricing-plan-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-plan-card li {
  position: relative;
  padding-left: 16px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.pricing-plan-card li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--orange);
}

.pricing-plan-actions {
  display: grid;
  align-items: end;
}

.pricing-plan-actions .button {
  min-height: 38px;
  padding: 9px 10px;
  font-size: 13px;
}

.pricing-plan-card .price-promo {
  align-self: end;
  padding: 8px;
  border: 1px solid rgba(255, 130, 0, 0.35);
  border-radius: 8px;
  background: rgba(255, 130, 0, 0.08);
}

.pricing-plan-card .price-promo i {
  display: block;
  color: var(--orange);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.pricing-plan-card .price-promo b {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.pricing-plan-card .price-promo small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}

.comparison-table {
  display: grid;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
}

.pricing-compare-card .comparison-table {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.comparison-table > div {
  display: grid;
  grid-template-columns: minmax(220px, 1.7fr) repeat(3, minmax(110px, 1fr));
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
}

.pricing-compact-table > div {
  grid-template-columns: minmax(160px, 0.8fr) repeat(4, minmax(135px, 1fr));
}

.comparison-table > div:first-child {
  border-top: 0;
}

.comparison-table .comparison-head {
  background: var(--ink);
  color: #fff;
  font-weight: 900;
}

.comparison-table .comparison-head span,
.comparison-table .comparison-head strong {
  color: #fff;
}

.comparison-table .pricing-plan-row {
  align-items: stretch;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  padding: 0;
  gap: 0;
}

.comparison-table .pricing-plan-row > span {
  display: none;
  align-items: center;
  padding: 12px;
  background: var(--ink);
  color: #fff;
}

.pricing-plan-cell {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 7px;
  min-height: 164px;
  padding: 12px;
  border-left: 1px solid rgba(255,255,255,0.18);
  background: var(--ink);
  color: #fff;
}

.pricing-plan-cell.highlighted {
  background: #062b58;
  box-shadow: inset 0 4px 0 var(--orange);
}

.pricing-plan-cell em {
  color: var(--orange);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.pricing-plan-cell b {
  color: #fff;
  font-size: 20px;
  line-height: 1.05;
}

.comparison-table .pricing-plan-cell > b {
  color: #fff;
}

.pricing-plan-cell small {
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  line-height: 1.35;
}

.pricing-plan-cell .button {
  align-self: end;
  min-height: 34px;
  padding: 8px 10px;
  font-size: 13px;
}

.pricing-plan-cell .price-promo {
  background: rgba(255, 130, 0, 0.12);
  border-color: rgba(255, 130, 0, 0.35);
}

.pricing-plan-cell .price-promo i {
  color: var(--orange);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.pricing-plan-cell .price-promo b {
  font-size: 14px;
}

.comparison-table span {
  color: var(--muted);
}

.comparison-table b {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}

.pricing-compact-table > div:nth-child(odd):not(.comparison-head) {
  background: #fbfcfd;
}

.staff-bundle-strip {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.staff-bundle-strip h3,
.staff-bundle-strip p {
  margin: 0;
}

.staff-bundle-strip h3 {
  color: var(--ink);
  font-size: 20px;
}

.staff-bundle-strip > div > span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.staff-bundle-strip ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: min(100%, 620px);
}

.staff-bundle-strip li {
  display: grid;
  gap: 2px;
  min-width: 128px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.staff-bundle-strip strong {
  color: var(--ink);
  font-size: 17px;
}

.staff-bundle-strip li span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.module-mini-grid,
.module-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  width: 100%;
}

.inline-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--muted, #5c6b7a);
  font-size: 0.86rem;
  font-weight: 800;
}

.inline-control select {
  min-height: 34px;
  max-width: min(420px, 72vw);
  border: 1px solid var(--border, #d9e3ee);
  border-radius: 8px;
  background: #fff;
  color: var(--text, #102033);
  padding: 6px 32px 6px 10px;
  font-size: 0.9rem;
  font-weight: 750;
}

.module-mini-card,
.module-card {
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(4, 23, 45, .72);
  color: #f8fbff;
  border-radius: 8px;
  padding: 12px;
}

.module-mini-card > div,
.module-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.module-mini-card strong,
.module-card strong {
  display: block;
  color: #fff;
}

.module-mini-card span,
.module-card b {
  color: #ff8a00;
  font-weight: 850;
  white-space: nowrap;
}

.module-mini-card p,
.module-card p,
.module-card small {
  color: rgba(248, 251, 255, .78);
}

.module-mini-card p,
.module-card p {
  margin: 8px 0;
  font-size: .92rem;
  line-height: 1.45;
}

.module-card .module-note {
  display: block;
  margin: 6px 0;
  padding: 6px 8px;
  border-left: 3px solid rgba(255, 138, 0, .78);
  border-radius: 6px;
  background: rgba(255, 138, 0, .08);
  color: rgba(255, 245, 232, .88);
  font-size: .8rem;
  line-height: 1.35;
}

.module-card ul {
  margin: 8px 0 12px;
  padding-left: 18px;
  color: rgba(248, 251, 255, .82);
  font-size: .9rem;
}

.demo-walkthrough-hero {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(220px, .8fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}

.demo-walkthrough-hero > div,
.demo-scenario-card,
.demo-pitch-card {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(4, 23, 45, .68);
  color: #f8fbff;
  padding: 12px;
}

.demo-walkthrough-hero h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.demo-walkthrough-hero p,
.demo-pitch-card span,
.demo-scenario-card p,
.demo-scenario-card li,
.demo-scenario-card b {
  color: rgba(248, 251, 255, .82);
}

.demo-pitch-card {
  display: grid;
  gap: 6px;
}

.demo-pitch-card strong {
  color: #ff8a00;
  font-size: 1rem;
}

.demo-scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 12px;
}

.demo-scenario-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.demo-scenario-head {
  display: grid;
  gap: 4px;
  align-items: flex-start;
}

.demo-scenario-head small,
.demo-module-chip small {
  display: block;
  color: rgba(248, 251, 255, .58);
  font-size: .74rem;
}

.demo-scenario-head strong {
  display: block;
  color: #fff;
  font-size: 1.03rem;
}

.demo-scenario-head b {
  font-size: .78rem;
  line-height: 1.25;
  text-align: left;
}

.demo-scenario-card p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.45;
}

.demo-scenario-card ol {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: .86rem;
  line-height: 1.35;
}

.demo-module-row,
.demo-route-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.demo-module-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(255, 138, 0, .1);
  border: 1px solid rgba(255, 138, 0, .28);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
}

.demo-route-row {
  margin-top: auto;
  padding-top: 2px;
}

@media (max-width: 920px) {
  .demo-walkthrough-hero {
    grid-template-columns: 1fr;
  }

  .demo-scenario-grid {
    grid-template-columns: 1fr;
  }
}

.warehouse-pick-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 110px auto;
  gap: 10px;
  align-items: end;
  margin: 10px 0;
}

.warehouse-pick-form .form-message {
  grid-column: 1 / -1;
}

.warehouse-pick-list {
  margin-top: 10px;
}

.label-row-warning {
  border-color: rgba(255, 138, 0, .45) !important;
  background: rgba(255, 138, 0, .08) !important;
}

.addon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 1040px;
  margin: 18px auto 0;
}

.addon-grid article {
  display: grid;
  gap: 6px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.addon-grid article > span {
  color: var(--orange);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.addon-grid h3 {
  margin: 0;
  font-size: 17px;
}

.addon-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.module-catalog {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.4fr);
  gap: 18px;
  max-width: 1040px;
  margin: 16px auto 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.module-catalog h3,
.module-catalog p {
  margin: 0;
}

.module-catalog h3 {
  font-size: 18px;
}

.module-catalog p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.module-catalog ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.module-catalog li {
  display: grid;
  grid-template-columns: minmax(160px, 0.55fr) minmax(0, 1fr);
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.module-catalog li:first-child {
  border-top: 0;
  padding-top: 0;
}

.module-catalog b {
  color: var(--ink);
  font-size: 13px;
}

.module-catalog span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.module-table {
  max-width: 1040px;
  margin: 16px auto 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  font-size: 13px;
}

.module-table > div {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(180px, 0.9fr) minmax(260px, 1.4fr);
  gap: 14px;
  align-items: start;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}

.module-table > div:first-child {
  border-top: 0;
}

.module-table-head {
  background: var(--ink);
  color: #fff;
  font-weight: 950;
}

.module-table b {
  color: var(--ink);
  font-size: 13px;
}

.module-table span {
  color: var(--muted);
  line-height: 1.35;
}

.module-table-head span {
  color: #fff;
}

.pricing-note {
  max-width: 1040px;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.business-pricing-grid {
  margin-top: 18px;
}

.business-package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.business-package-card {
  display: grid;
  gap: 5px;
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.business-package-card.active {
  border-color: var(--orange);
  box-shadow: inset 0 3px 0 var(--orange);
}

.business-package-card span,
.business-package-card small {
  color: var(--muted);
  font-weight: 800;
}

.business-package-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.discount-price {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.discount-price s {
  color: rgba(226, 232, 240, 0.58);
  font-size: 0.86em;
  text-decoration-color: rgba(255, 143, 23, 0.85);
}

.discount-price strong {
  color: var(--orange);
  font-weight: 900;
}

.customer-upgrade-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 145, 20, 0.08);
  color: var(--text);
  font-size: 0.9rem;
}

.customer-upgrade-hint a {
  color: var(--brand);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.customer-extra-account-note {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 145, 20, 0.35);
  border-radius: 8px;
  background: rgba(255, 145, 20, 0.08);
  color: var(--text);
  font-size: 0.88rem;
}

.customer-extra-account-note strong {
  color: var(--brand);
}

.customer-extra-account-note small {
  color: var(--muted);
}

.structured-manager {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.manager-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.manager-list article {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
}

.manager-list strong {
  color: var(--ink);
  font-size: 13px;
}

.manager-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.budget-quick-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 8px;
}

.budget-quick-grid input {
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.planning-list {
  display: grid;
  gap: 10px;
}

.planning-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.planning-item span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.profile-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
}

.profile-quick-actions span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.profile-quick-actions strong {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  font-size: 12px;
}

.profile-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.profile-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  min-height: 44px;
  padding: 10px 12px;
  background: #f7fafc;
  color: var(--ink);
  font-weight: 900;
}

.profile-section summary span {
  min-width: 0;
}

.profile-section summary small {
  flex: 0 0 auto;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.label-toolbar {
  display: grid;
  gap: 10px;
}

.label-form {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1fr) minmax(130px, .8fr) 96px minmax(150px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

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

.label-table {
  display: grid;
  gap: 6px;
}

.label-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(130px, .8fr) minmax(120px, .7fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
}

.label-row strong,
.label-row small {
  display: block;
}

.label-row small {
  color: var(--muted);
  font-size: 12px;
}

.label-row code {
  width: fit-content;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

.warehouse-control-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) minmax(220px, .9fr) minmax(220px, .9fr);
  gap: 10px;
  margin: 12px 0;
}

.warehouse-control-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}

.warehouse-location-form,
.warehouse-floorplan-form,
.warehouse-scan-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.warehouse-location-form .wide,
.warehouse-floorplan-form small,
.warehouse-floorplan-form label,
.warehouse-scan-form button {
  grid-column: 1 / -1;
}

.warehouse-location-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 6px;
}

.warehouse-location-list span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 7px;
  background: rgba(1, 19, 35, .42);
  color: var(--text, #f8fbff);
  font-size: 12px;
}

.warehouse-location-list small {
  color: var(--muted, #cbd5e1);
}

.warehouse-floorplan-preview {
  display: grid;
  place-items: center;
  min-height: 118px;
  overflow: hidden;
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: 8px;
  background: rgba(1, 19, 35, .38);
  color: var(--muted, #cbd5e1);
  font-weight: 900;
  text-decoration: none;
}

.warehouse-floorplan-preview img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.workorder-inventory-usage,
.customer-material-usage {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(1, 19, 35, .28);
}

.workorder-inventory-usage > span,
.customer-material-usage > span {
  color: var(--muted, #cbd5e1);
  font-size: 12px;
  font-weight: 800;
}

.workorder-completion-checklist {
  display: grid;
  gap: 12px;
  padding: 14px;
  margin: 10px 0 14px;
  border: 1px solid rgba(255, 143, 23, 0.3);
  border-radius: 12px;
  background: rgba(7, 28, 49, 0.78);
}

.workorder-completion-checklist.ready {
  border-color: rgba(54, 211, 124, 0.36);
}

.workorder-completion-checklist.blocked {
  border-color: rgba(255, 143, 23, 0.42);
}

.workorder-completion-checklist strong {
  display: block;
  color: #ffffff;
}

.workorder-completion-checklist span {
  color: rgba(236, 244, 252, 0.74);
}

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

.workorder-completion-items span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 0.9rem;
}

.workorder-completion-items b {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 22px;
  border-radius: 999px;
  font-size: 0.72rem;
}

.workorder-completion-items .ok b {
  background: rgba(54, 211, 124, 0.18);
  color: #a8f0c2;
}

.workorder-completion-items .missing b {
  background: rgba(255, 91, 91, 0.18);
  color: #ffd2d2;
}

.workorder-blocking-list {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
}

.workorder-blocking-list span {
  padding: 8px 10px;
  border: 1px solid rgba(255, 91, 91, 0.36);
  border-radius: 8px;
  background: rgba(255, 91, 91, 0.12);
  color: #ffffff;
}

.workorder-warning-list {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
}

.workorder-warning-list span {
  padding: 8px 10px;
  border: 1px solid rgba(255, 143, 23, 0.36);
  border-radius: 8px;
  background: rgba(255, 143, 23, 0.12);
  color: #ffe5c0;
}

.workorder-submit-review.blocked {
  border-color: rgba(255, 91, 91, 0.42);
}

.workorder-submit-review.ready {
  border-color: rgba(54, 211, 124, 0.34);
}

.inventory-usage-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) minmax(80px, .35fr) minmax(160px, .8fr);
  gap: 8px;
  align-items: end;
}

.workorder-residual-materials,
.employee-expense-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  margin-top: 10px;
  border: 1px solid rgba(255, 143, 23, 0.24);
  border-radius: 12px;
  background: rgba(7, 28, 49, 0.72);
}

.workorder-residual-materials > div:first-child,
.employee-expense-card .panel-head {
  margin: 0;
}

.workorder-residual-materials strong,
.employee-expense-card h3 {
  color: #ffffff;
}

.workorder-residual-materials span,
.residual-price-note,
.employee-expense-card p {
  color: rgba(236, 244, 252, 0.74);
}

.residual-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.residual-choice-grid label {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-weight: 800;
}

.material-usage-line {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(120px, .7fr);
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: rgba(255,255,255,.05);
}

.material-usage-line b {
  color: var(--pf24-orange, #ff8a00);
}

.material-usage-line small {
  color: var(--muted, #cbd5e1);
}

.external-rental-card summary small {
  color: var(--pf24-orange, #ff8a00);
}

.external-rental-list {
  margin: 10px;
}

.external-rental-line {
  grid-template-columns: minmax(220px, 1.2fr) minmax(110px, .35fr) minmax(180px, .8fr);
}

.external-rental-line span {
  display: grid;
  gap: 3px;
}

.external-rental-line strong {
  color: #fff;
}

.scan-action-panel {
  width: min(520px, 100%);
  display: grid;
  gap: 10px;
  align-self: flex-start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.scan-action-panel > div:first-child {
  display: grid;
  gap: 2px;
}

.scan-action-panel span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.label-print-body {
  min-height: 100vh;
  background: #eef2f6;
  color: var(--ink);
}

.label-print-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.label-print-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.label-print-shell {
  width: min(1120px, calc(100% - 24px));
  margin: 16px auto;
}

.label-sheet {
  --label-w: 62mm;
  --label-h: 29mm;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4mm;
  padding: 10mm;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.label-size-small { --label-w: 50mm; --label-h: 25mm; }
.label-size-medium { --label-w: 62mm; --label-h: 29mm; }
.label-size-large { --label-w: 89mm; --label-h: 36mm; }
.label-size-sheet { --label-w: 63.5mm; --label-h: 38.1mm; }

.print-label {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: var(--label-w);
  height: var(--label-h);
  overflow: hidden;
  padding: 2.5mm;
  border: 1px dashed #9aa8b7;
  border-radius: 2mm;
  background: white;
  page-break-inside: avoid;
}

.print-label-head,
.print-label-foot {
  display: flex;
  justify-content: space-between;
  gap: 2mm;
  min-width: 0;
}

.print-label strong,
.print-label small,
.print-label code,
.print-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-label strong {
  font-size: 9pt;
  line-height: 1;
}

.print-label small,
.print-label span {
  color: #475569;
  font-size: 6.8pt;
  font-weight: 800;
}

.print-label code {
  color: #001f3f;
  font-size: 7pt;
  font-weight: 900;
}

.barcode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25mm;
  min-height: 9mm;
  padding: 1mm 0;
}

.barcode-char {
  display: inline-flex;
  align-items: stretch;
  height: 8mm;
}

.barcode i {
  display: block;
  height: 100%;
}

.barcode .bar {
  width: .32mm;
  background: #001f3f;
}

.barcode .gap {
  width: .24mm;
  background: transparent;
}

.barcode .wide.bar {
  width: .62mm;
}

.barcode .wide.gap {
  width: .52mm;
}

.profile-section:not([open]) summary {
  background: #fff;
}

.profile-section[open] summary {
  border-bottom: 1px solid var(--line);
}

.profile-section-grid,
.profile-section .profession-picker,
.profile-section .service-area-picker,
.profile-section .option-picker,
.profile-section .anonymous-profile-preview {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.profile-section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.verified-field input[readonly] {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: var(--ink);
}

.verified-field small {
  display: block;
  margin-top: 5px;
  color: #15803d;
  font-size: 12px;
  font-weight: 900;
}

.document-upload-assistant {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(160px, 0.9fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.document-upload-assistant strong,
.document-upload-assistant span,
.document-upload-assistant small {
  display: block;
}

.document-upload-assistant span,
.document-upload-assistant small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.vehicle-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafc;
}

.vehicle-profile-grid .panel-head,
.vehicle-profile-grid .wide {
  grid-column: 1 / -1;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  font-weight: 800;
}

.lookup-action {
  display: grid;
  gap: 6px;
  align-content: end;
}

.lookup-action small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

.asset-summary {
  display: grid;
  gap: 5px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--ink);
}

.asset-summary span,
.asset-summary small,
.asset-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.intake-summary {
  border-color: #c7d2fe;
  background: #eef2ff;
}

.route-advice {
  display: grid;
  gap: 5px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #b8d7f5;
  border-radius: 8px;
  background: #eef6ff;
  color: var(--ink);
}

.route-advice strong {
  color: var(--blue);
  font-size: 13px;
}

.route-advice span,
.route-advice small,
.route-advice p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.route-advice .warning {
  color: #b45309;
}

.bundle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.bundle-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.bundle-card span {
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.bundle-card strong {
  color: var(--ink);
  font-size: 28px;
  line-height: 1.1;
}

.bundle-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.bundle-notes {
  margin-top: 16px;
}

.postcode-checker {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(160px, 220px) auto;
  gap: 12px;
  align-items: end;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow);
}

.postcode-checker h3,
.postcode-checker p {
  margin: 0;
}

.postcode-checker p,
.postcode-result p {
  color: var(--muted);
}

.postcode-result {
  padding-top: 8px;
}

.postcode-result ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.postcode-result li {
  margin: 4px 0;
  font-weight: 800;
}

.steps article, .metrics article, .partners article, .login-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.steps article {
  padding: 22px;
  min-height: 100%;
}

.steps span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: white;
  background: var(--teal);
  border-radius: 50%;
  font-weight: 800;
}

.steps h3 { margin: 18px 0 8px; }
.steps p, .request-intro p, footer span { color: var(--muted); line-height: 1.5; }

.workflow-band {
  background: var(--soft);
}

.workflow-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(320px, 1.28fr);
  gap: 32px;
  align-items: start;
}

.workflow-copy {
  max-width: 520px;
}

.workflow-copy p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.58;
}

.compact-steps {
  grid-template-columns: 1fr;
  gap: 10px;
}

.compact-steps article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  box-shadow: none;
}

.compact-steps span {
  width: 30px;
  height: 30px;
  margin-top: 2px;
  background: var(--orange);
}

.compact-steps h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.compact-steps p {
  margin: 0;
}

.coverage-band {
  background: white;
}

.coverage-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1.1fr);
  gap: 38px;
  align-items: center;
}

.coverage-map {
  height: 460px;
  min-height: 460px;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef6ff;
  box-shadow: var(--shadow);
}

.coverage-map .leaflet-container {
  font-family: inherit;
}

.coverage-map .leaflet-control-attribution {
  font-size: 10px;
}

.leaflet-popup-content {
  display: grid;
  gap: 4px;
  margin: 12px 14px;
}

.leaflet-popup-content span {
  display: block;
}

.postcode-label {
  display: grid;
  place-items: center;
  width: 54px !important;
  height: 24px !important;
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 6px;
  background: rgba(0,92,185,0.92);
  color: white;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(0,31,68,0.18);
}

.coverage-copy p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.58;
}

.coverage-filter {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  font-weight: 900;
}

.coverage-filter select {
  width: min(360px, 100%);
}

.coverage-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 4px solid #005cb9;
  background: #eef6ff;
  border-radius: 8px;
  color: var(--ink) !important;
  font-weight: 800;
}

.coverage-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 14px;
}

.coverage-stats article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.coverage-stats strong {
  display: block;
  font-size: 32px;
  line-height: 1;
}

.coverage-stats span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 800;
}

.coverage-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 800;
}

.legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0,92,185,0.45);
  border: 2px solid #005cb9;
}

.request-section {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(320px, 1.4fr);
  gap: 42px;
  background: var(--soft);
}

.account-required {
  align-self: start;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow);
}

.request-form, .update-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
  font: inherit;
  color: var(--ink);
  background: white;
}

textarea { resize: vertical; }
.wide { grid-column: 1 / -1; }
.form-message { min-height: 22px; color: var(--teal); font-weight: 800; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--line);
}

.admin-body { background: var(--soft); }
.plain-btn { border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit; }
.hidden { display: none !important; }

.homepage-example {
  min-height: calc(100vh - 72px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 34%),
    radial-gradient(circle at 20% 10%, rgba(255, 130, 0, 0.14), transparent 30%),
    linear-gradient(135deg, #061a33 0%, #08274d 46%, #021023 100%);
  color: #fff;
}

@media (max-width: 980px) {
  .warehouse-control-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .warehouse-location-form,
  .warehouse-floorplan-form,
  .warehouse-scan-form,
  .inventory-usage-row,
  .material-usage-line {
    grid-template-columns: 1fr;
  }
}

.public-site .homepage-nav {
  display: grid;
  width: 100%;
}

.homepage-login-card {
  display: grid !important;
  gap: 5px;
  justify-content: stretch !important;
  min-height: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 130, 0, 0.48) !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, rgba(255, 130, 0, 0.24), rgba(255, 255, 255, 0.08)) !important;
  color: #fff !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.homepage-login-card strong,
.homepage-login-card span {
  display: block;
}

.homepage-login-card strong {
  font-size: 16px;
}

.homepage-login-card span {
  color: rgba(247, 239, 229, 0.7);
  font-size: 12px;
  font-weight: 700;
}

.public-site .topbar .brand img[src*="profix24-header"] {
  width: min(270px, 72vw);
  height: 74px;
  padding: 8px 10px;
  border-radius: 4px;
  background: #fff;
}

.homepage-showcase {
  width: min(1120px, calc(100% - 48px));
  min-height: calc(100vh - 72px);
  margin: 0 auto;
  display: grid;
  align-content: center;
  gap: 34px;
  padding: 72px 0;
}

.homepage-intro {
  max-width: 100%;
}

.homepage-intro img {
  display: block;
  width: 100%;
  max-height: 390px;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
}

.homepage-service-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.homepage-service-cards article {
  position: relative;
  height: 100%;
  min-height: 318px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: 16px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,252,0.94));
  color: #061a33;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.homepage-service-cards article:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 130, 0, 0.58);
  box-shadow: 0 30px 74px rgba(0, 0, 0, 0.3);
}

.homepage-service-cards span {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #ff8200;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

.homepage-service-cards h2 {
  margin: 0;
  color: #061a33;
  font-size: clamp(22px, 1.55vw, 26px);
  line-height: 1.08;
  hyphens: none;
  overflow-wrap: normal;
}

.homepage-service-cards p {
  margin: 0;
  color: #394b5e;
  font-size: 15px;
  line-height: 1.55;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.homepage-service-cards a {
  align-self: end;
  width: fit-content;
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 130, 0, 0.42);
  border-radius: 6px;
  background: rgba(255, 130, 0, 0.09);
  color: #061a33;
  font-size: 14px;
  font-weight: 900;
}

.homepage-service-cards a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.targeted-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.targeted-pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.targeted-pricing-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.targeted-grid article,
.targeted-pricing article,
.targeted-list,
.targeted-cta {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.055);
  color: #f7efe5;
  box-shadow: 0 14px 38px rgba(0,0,0,0.18);
}

.targeted-grid article {
  padding: 20px;
}

.targeted-pricing article,
.targeted-list {
  padding: 18px 20px;
}

.targeted-pricing span {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.targeted-pricing strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 24px;
  line-height: 1.1;
}

.targeted-pricing p,
.targeted-list li {
  color: rgba(247, 239, 229, 0.74);
  line-height: 1.5;
  hyphens: none;
}

.targeted-grid h2 {
  margin-bottom: 10px;
  color: #fff;
  font-size: 20px;
}

.targeted-grid p {
  margin: 0;
  color: rgba(247, 239, 229, 0.74);
  line-height: 1.55;
  hyphens: none;
}

.targeted-list {
  margin-top: 16px;
}

.targeted-list h2 {
  margin-bottom: 10px;
  color: #fff;
  font-size: 20px;
}

.targeted-list ul {
  margin: 0;
  padding-left: 18px;
}

.targeted-list li + li {
  margin-top: 6px;
}

.targeted-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 18px 20px;
}

.targeted-cta strong {
  color: #fff;
  font-size: 18px;
}

.public-site.audience-page .targeted-grid article,
.public-site.audience-page .targeted-pricing article,
.public-site.audience-page .targeted-list,
.public-site.audience-page .targeted-cta {
  border: 1px solid rgba(6, 26, 51, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 253, 0.96));
  color: #061a33;
  box-shadow: 0 16px 42px rgba(6, 26, 51, 0.12);
}

.public-site.audience-page .targeted-grid h2,
.public-site.audience-page .targeted-list h2,
.public-site.audience-page .targeted-cta strong {
  color: #061a33;
}

.public-site.audience-page .targeted-grid p,
.public-site.audience-page .targeted-pricing p,
.public-site.audience-page .targeted-list li {
  color: #3b4d61;
}

.public-site.audience-page .targeted-pricing span {
  color: #b45d00;
}

.public-site.audience-page .targeted-pricing strong {
  color: #061a33;
}

.public-site.audience-page .targeted-list li::marker {
  color: #ff8200;
}

.public-site.audience-page .button.primary {
  border: 1px solid rgba(185, 88, 0, 0.72) !important;
  background: linear-gradient(135deg, #ff8200, #ffad4d) !important;
  color: #061a33 !important;
  box-shadow: 0 14px 30px rgba(255, 130, 0, 0.24);
}

.public-site.audience-page .button.primary:hover {
  background: linear-gradient(135deg, #ff9a24, #ffc06f) !important;
  color: #061a33 !important;
}

@media (max-width: 980px) {
  .homepage-service-cards {
    grid-template-columns: 1fr;
  }

  .targeted-grid,
  .targeted-pricing,
  .targeted-pricing-three {
    grid-template-columns: 1fr;
  }

  .homepage-service-cards article,
  .homepage-service-cards article:nth-child(2) {
    min-height: 0;
    margin-top: 0;
  }
}

@media (max-width: 620px) {
  .homepage-showcase {
    width: min(100% - 32px, 1120px);
    padding: 46px 0;
  }

  .homepage-service-cards article {
    padding: 24px;
  }
}

.login-entry {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(12, 20, 28, 0.92), rgba(12, 20, 28, 0.68)),
    url("assets/profix24-regiecentrum-hero.webp") center/cover fixed no-repeat,
    #121a22;
}

.login-entry .topbar {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
}

.login-entry .topbar nav a,
.login-entry .admin-title {
  color: rgba(255,255,255,0.86);
}

.login-entry .topbar nav a[href*="login"] {
  background: rgba(255,255,255,0.12);
  color: white;
  border-color: rgba(255,255,255,0.2);
}

.login-entry .language-select {
  background-color: rgba(255,255,255,0.9);
}

.login-entry .app-action,
.login-entry .secondary-action {
  display: none !important;
}

.login-entry .admin-shell {
  min-height: calc(100vh - 72px);
  display: grid;
  align-items: center;
  padding-top: 36px;
  padding-bottom: 36px;
}

.login-entry .portal-shell {
  width: min(460px, 100%);
  margin: 0 auto;
}

.login-panel {
  max-width: 420px;
  margin: 40px auto;
  padding: 28px;
}

.login-entry .login-panel {
  margin: 0;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  background: rgba(31, 25, 19, 0.94);
  color: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.login-entry .login-panel h1 {
  margin-bottom: 8px;
  font-size: 34px;
}

.login-entry .form-message {
  color: rgba(247, 239, 229, 0.74);
}

.login-entry .login-panel label span,
.login-entry .login-panel .quiet-link {
  color: rgba(247, 239, 229, 0.78);
}

.login-entry .login-panel input,
.login-entry .login-panel select,
.login-entry .login-panel textarea {
  border-color: rgba(255,255,255,0.12);
  color: #fff;
  background: rgba(255,255,255,0.08);
}

.login-entry .login-panel input:focus,
.login-entry .login-panel select:focus,
.login-entry .login-panel textarea:focus {
  outline: 2px solid rgba(255, 130, 0, 0.38);
}

.login-entry .login-panel .secondary {
  color: #fff;
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
}

.login-panel form {
  display: grid;
  gap: 14px;
}

.test-login-panel {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
}

.test-login-panel > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: rgba(247, 239, 229, 0.84);
  font-size: 13px;
}

.test-login-panel > div:first-child span {
  color: rgba(247, 239, 229, 0.62);
  text-align: right;
}

.test-login-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.test-login-choice {
  display: grid;
  gap: 2px;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.test-login-choice:hover,
.test-login-choice:focus-visible {
  border-color: rgba(255, 130, 0, 0.62);
  background: rgba(255, 130, 0, 0.15);
}

.test-login-choice strong {
  font-size: 14px;
  line-height: 1.15;
}

.test-login-choice span {
  color: rgba(247, 239, 229, 0.62);
  font-size: 12px;
}

.test-login-choice small {
  color: rgba(247, 239, 229, 0.52);
  font-size: 11px;
  line-height: 1.2;
}

.login-context-choice {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.login-context-choice > strong {
  display: block;
  color: #f58220;
  font-size: 0.88rem;
  margin-bottom: 8px;
}

.login-context-grid {
  display: grid;
  gap: 8px;
}

.login-context-button {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: #f8fbff;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.login-context-button:hover,
.login-context-button:focus-visible {
  border-color: rgba(245, 130, 32, 0.8);
  background: rgba(245, 130, 32, 0.14);
  outline: none;
}

.login-context-button span,
.login-context-button small {
  display: block;
}

.login-context-button small {
  margin-top: 2px;
  color: rgba(247, 239, 229, 0.68);
}

.signup-look {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(6, 26, 51, 0.96), rgba(2, 16, 35, 0.94)),
    #061a33;
}

.signup-look .topbar {
  background: rgba(6, 18, 34, 0.96);
  border-right-color: rgba(255,255,255,0.12);
}

.signup-look .brand img {
  padding: 7px 9px;
  border-radius: 4px;
  background: #fff;
}

.signup-look .admin-shell {
  padding-top: 42px;
  padding-bottom: 42px;
}

.signup-look .portal-shell {
  width: min(980px, 100%);
  display: grid;
  gap: 16px;
}

.signup-look .login-panel {
  margin: 0;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.96);
  color: #061a33;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.signup-look .login-panel h1 {
  margin-bottom: 8px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.08;
}

.signup-look .login-panel h2 {
  margin-bottom: 8px;
  font-size: 22px;
}

.signup-look .form-message {
  color: #5d6b7a;
  font-size: 14px;
  line-height: 1.45;
}

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

.signup-look label,
.signup-look .wide {
  min-width: 0;
}

.signup-look label span,
.signup-look label {
  color: #061a33;
  font-weight: 850;
}

.signup-look input,
.signup-look select,
.signup-look textarea {
  min-height: 40px;
  border-color: #d9e0e6;
  background: #f8fafc;
  color: #061a33;
}

.signup-look textarea {
  min-height: 88px;
}

.signup-look .wide,
.signup-look button[type="submit"],
.signup-look .form-message.wide {
  grid-column: 1 / -1;
}

.signup-look .pro-value {
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 8px;
  border-color: #d9e0e6;
  background: #f8fafc;
  box-shadow: none;
}

.signup-look .pro-value strong {
  font-size: 18px;
}

.signup-look .pro-value span,
.signup-look .pro-value small {
  color: #5d6b7a;
}

@media (max-width: 760px) {
  .capacity-pool-summary,
  .capacity-pool-row {
    grid-template-columns: 1fr;
  }

  .signup-look form {
    grid-template-columns: 1fr;
  }
}

.dashboard {
  display: grid;
  gap: 14px;
}

.system-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef3f7;
  overflow-x: auto;
}

.system-switch span,
.system-switch label {
  flex: 0 0 auto;
  margin: 0 6px 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.system-switch select {
  min-height: 32px;
  padding: 6px 28px 6px 10px;
  border: 1px solid rgba(0, 31, 63, 0.16);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.system-switch button,
.system-switch a {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.system-switch button.active,
.system-switch a.active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 31, 63, 0.12);
}

.admin-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.admin-tabs button {
  flex: 0 0 auto;
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  padding: 6px 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.admin-tabs button.active {
  color: var(--ink);
  background: #fff;
  box-shadow: inset 0 -2px 0 var(--orange), 0 1px 3px rgba(0, 31, 63, 0.08);
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.admin-cockpit {
  display: grid;
  gap: 18px;
  grid-column: 1 / -1;
}

.cockpit-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.cockpit-head h2 {
  margin: 0 0 6px;
  font-size: 20px;
}

.cockpit-head p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.cockpit-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.cockpit-kpis .summary-card {
  min-height: 74px;
}

.trend-dashboard {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.trend-head h3 {
  margin: 0 0 5px;
  font-size: 18px;
}

.trend-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.trend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.trend-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.trend-card-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.trend-card-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.trend-card-head strong {
  font-size: 20px;
  font-weight: 900;
}

.sparkline {
  width: 100%;
  height: 54px;
  overflow: visible;
}

.sparkline-grid {
  fill: none;
  stroke: #dbe5ee;
  stroke-width: 1;
}

.sparkline-area {
  fill: rgba(11, 79, 179, 0.10);
}

.sparkline-line {
  fill: none;
  stroke: #0b4fb3;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-compare-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.trend-compare-grid span {
  display: grid;
  gap: 2px;
  padding: 5px 6px;
  border-radius: 7px;
  background: white;
  border: 1px solid var(--line);
}

.trend-compare-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.trend-compare-grid b {
  font-size: 13px;
  font-weight: 900;
}

.trend-compare-grid em {
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

.trend-compare-grid .positive em {
  color: #0f766e;
}

.trend-compare-grid .negative em {
  color: #b42318;
}

.cockpit-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

.cockpit-block {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.cockpit-block-wide {
  grid-column: span 2;
}

.cockpit-block h3 {
  margin: 0;
  font-size: 15px;
}

.cockpit-stat-list,
.ranked-list {
  display: grid;
  gap: 7px;
}

.data-cleanup-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.data-cleanup-plan {
  margin: 8px 0;
}

.cockpit-stat-list button,
.ranked-list button,
.compact-table button,
.compact-table a {
  width: 100%;
  display: grid;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px 12px;
  background: #fbfcfd;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.cockpit-stat-list button,
.ranked-list button {
  grid-template-columns: minmax(0, 1fr) auto;
}

.cockpit-stat-list span,
.ranked-list span,
.compact-table span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.cockpit-stat-list strong,
.ranked-list strong,
.compact-table strong {
  font-weight: 900;
}

.compact-table {
  display: grid;
  gap: 7px;
}

.compact-table button,
.compact-table a {
  grid-template-columns: minmax(0, 1.3fr) minmax(90px, 0.8fr) auto auto;
}

.compact-table small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.audit-compact button {
  grid-template-columns: minmax(0, 1fr) minmax(130px, auto) minmax(90px, auto);
}

.finance-workspace {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}

.finance-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.finance-head h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.finance-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.finance-periods {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.finance-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.finance-periods button {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.finance-periods button.active {
  background: white;
  color: var(--blue);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.finance-priority,
.finance-chart-block {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.finance-priority h3,
.finance-chart-block h3 {
  margin: 0 0 3px;
  font-size: 16px;
}

.finance-priority p,
.finance-chart-block p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.finance-priority-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.finance-priority-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.finance-priority-card strong {
  grid-row: span 2;
  min-width: 36px;
  color: var(--blue);
  font-size: 24px;
  font-weight: 900;
}

.finance-priority-card span {
  font-weight: 900;
}

.finance-priority-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.finance-priority-card.warning {
  border-color: rgba(180, 83, 9, 0.28);
  background: #fffbeb;
}

.finance-priority-card.positive {
  border-color: rgba(15, 118, 110, 0.25);
  background: #f0fdfa;
}

.finance-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.finance-beta-results {
  display: grid;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid rgba(15, 118, 110, 0.28);
  border-radius: 8px;
  background: #f0fdfa;
  color: #0f172a;
}

.finance-beta-head,
.finance-beta-head > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.finance-beta-head h3 {
  margin: 0;
  font-size: 15px;
}

.finance-beta-head small,
.finance-beta-grid span {
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.finance-beta-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.finance-beta-grid article {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 6px;
  background: white;
}

.finance-beta-grid strong {
  overflow-wrap: anywhere;
  font-size: 15px;
}

@media (max-width: 720px) {
  .finance-beta-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .finance-beta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-beta-grid article:last-child {
    grid-column: 1 / -1;
  }
}

.finance-stat {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.finance-stat span,
.finance-stat small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.finance-stat strong {
  font-size: 19px;
  font-weight: 900;
}

.finance-stat.warning {
  border-color: rgba(180, 83, 9, 0.3);
  background: #fffbeb;
}

.finance-stat.positive {
  border-color: rgba(15, 118, 110, 0.3);
  background: #f0fdfa;
}

.finance-stat.negative {
  border-color: rgba(180, 83, 9, 0.3);
  background: #fffbeb;
}

.finance-bars {
  display: grid;
  gap: 5px;
}

.action-center {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.action-tile,
.action-row-main {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.action-tile {
  display: grid;
  gap: 3px;
  padding: 10px;
}

.action-tile strong {
  font-size: 24px;
  font-weight: 900;
}

.action-tile span,
.action-list h4 {
  font-weight: 900;
}

.action-tile small,
.action-row small,
.action-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.action-tile.warning {
  border-color: rgba(180, 83, 9, 0.35);
  background: #fffbeb;
}

.action-tile.positive {
  border-color: rgba(15, 118, 110, 0.25);
  background: #f0fdfa;
}

.daily-priority {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(180, 83, 9, 0.35);
  border-radius: 8px;
  background: #fffbeb;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.daily-priority.critical {
  border-color: rgba(220, 38, 38, 0.35);
  background: #fef2f2;
}

.daily-priority.low {
  border-color: rgba(15, 118, 110, 0.25);
  background: #f0fdfa;
}

.daily-priority small,
.daily-priority em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.daily-priority strong {
  font-size: 18px;
  font-weight: 950;
}

.daily-priority span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.daily-action-list {
  display: grid;
  gap: 7px;
}

.action-dossier-list {
  gap: 8px;
}

.action-dossier {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
}

.action-dossier.priority-critical {
  border-color: rgba(220, 38, 38, 0.35);
  background: #fff7f7;
}

.action-dossier.priority-high,
.action-dossier.priority-medium {
  border-color: rgba(245, 124, 0, 0.35);
  background: #fffaf2;
}

.action-dossier-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.action-dossier-main {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) minmax(82px, auto) 58px;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.action-dossier-main span:not(.status-dot) {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.action-dossier-main strong,
.action-subrow b {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-dossier-main small,
.action-dossier-main b,
.action-dossier-main em,
.action-subrow small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-dossier-main em {
  text-align: right;
}

.action-dossier .status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #22c55e;
}

.action-dossier .status-dot.critical,
.action-dossier .status-dot.high {
  background: #f57c00;
}

.action-dossier .status-dot.medium {
  background: #f59e0b;
}

.action-dossier-details {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 5px;
}

.action-dossier-details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.action-dossier-details > div {
  display: grid;
  gap: 5px;
  margin-top: 5px;
}

.action-subrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 30px;
  padding: 5px 0 0;
}

.action-subrow .as-button {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.action-subrow span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.action-row.priority-critical {
  border-color: rgba(220, 38, 38, 0.35);
  background: #fef2f2;
}

.action-row.priority-high,
.action-row.priority-medium {
  border-color: rgba(180, 83, 9, 0.28);
  background: #fffbeb;
}

.action-lists {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.action-list {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.action-list h4 {
  margin: 0;
}

.action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.action-row-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(80px, auto) minmax(90px, auto);
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.action-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dispute-panel {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.dispute-messages,
.dispute-form {
  display: grid;
  gap: 7px;
}

.dispute-messages article {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.dispute-messages p {
  margin: 4px 0;
  color: var(--muted);
}

.dispute-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.portal-notifications {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.portal-notifications article {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 118, 110, 0.25);
  border-radius: 8px;
  background: #f0fdfa;
}

.portal-notifications span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.portal-notifications-compact {
  gap: 6px;
  margin-bottom: 8px;
}

.portal-notifications-compact article {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 8px 10px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.portal-notifications-compact article > div {
  min-width: 0;
  max-width: 100%;
}

.portal-notifications-compact article > div > span {
  display: -webkit-box;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.portal-notifications-compact .secondary-action,
.notification-row .secondary-action {
  min-height: 30px;
  padding: 6px 10px;
  white-space: nowrap;
}

.notification-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 620px) {
  .portal-notifications-compact article {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .portal-notifications-compact .secondary-action {
    align-self: start;
  }
}

.notification-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.finance-bar-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 105px 74px;
  gap: 8px;
  align-items: center;
  min-height: 24px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.finance-bar-track {
  position: relative;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f7;
}

.finance-bar-track i,
.finance-bar-track b {
  position: absolute;
  inset-block: 0;
  left: 0;
  border-radius: inherit;
}

.finance-bar-track i {
  background: rgba(11, 79, 179, 0.18);
}

.finance-bar-track b {
  height: 7px;
  margin-block: auto;
  background: var(--orange);
}

.finance-bar-row strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.finance-bar-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.finance-legend {
  display: flex;
  gap: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.finance-legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.finance-legend i,
.finance-legend b {
  display: inline-block;
  width: 18px;
  height: 8px;
  border-radius: 999px;
}

.finance-legend i {
  background: rgba(11, 79, 179, 0.18);
}

.finance-legend b {
  background: var(--orange);
}

.calculator-shell {
  display: grid;
  gap: 10px;
}

.calculator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr) minmax(280px, 0.85fr);
  gap: 8px;
  align-items: start;
}

.business-calculator-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 8px;
  align-items: start;
}

.business-calculator-card {
  align-content: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-business-calculator .compact-input-card {
  gap: 7px;
}

.compact-business-calculator .compact-input-card label {
  min-height: 48px;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 11px;
}

.compact-business-calculator .compact-input-card input,
.compact-business-calculator .compact-input-card select {
  min-height: 29px;
  padding: 5px 7px;
  font-size: 13px;
}

.business-calculator-card .settings-card-head,
.business-calculator-card .business-row,
.business-calculator-card .business-row-head,
.business-calculator-card .usage-cost-summary,
.business-calculator-card .wide,
.business-calculator-card details {
  grid-column: 1 / -1;
}

.business-calculator-result {
  grid-column: 1 / -1;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
}

.business-calculator-result .settings-card-head,
.business-calculator-result .calculator-breakdown,
.business-calculator-result .calculator-cashflow,
.business-calculator-result .calculator-capacity,
.business-calculator-result .calculator-structure-flow,
.business-calculator-result .calculator-break-even,
.business-calculator-result .calculator-ai-savings,
.business-calculator-result .calculator-advice {
  grid-column: 1 / -1;
}

.calculator-scenario-card {
  grid-column: 1 / -1;
}

.calculator-scenario-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  grid-column: 1 / -1;
}

.calculator-scenario-grid button {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 76px;
  padding: 10px;
  border: 1px solid rgba(255, 143, 26, 0.22);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(14, 42, 66, 0.86), rgba(7, 22, 38, 0.90));
  color: #f8fafc;
  text-align: left;
  cursor: pointer;
}

.calculator-scenario-grid button:hover,
.calculator-scenario-grid button:focus-visible {
  border-color: rgba(255, 143, 26, 0.62);
  box-shadow: 0 0 0 3px rgba(255, 143, 26, 0.12);
}

.calculator-scenario-grid strong {
  color: #fff;
  font-size: 0.95rem;
}

.calculator-scenario-grid span,
.calculator-scenario-grid small {
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.75rem;
  line-height: 1.28;
  font-weight: 850;
}

.business-row {
  display: grid;
  grid-template-columns: minmax(74px, 1fr) minmax(42px, 54px) minmax(42px, 54px) minmax(62px, 72px) minmax(70px, 82px);
  gap: 6px;
  align-items: center;
}

.business-row-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.business-row strong {
  min-width: 0;
  font-size: 13px;
}

.business-row input {
  width: 100%;
  min-height: 31px;
  padding: 6px 7px;
  border: 1px solid #cdd8e2;
  border-radius: 6px;
  background: white;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.usage-cost-card {
  grid-column: 1 / -1;
}

.usage-cost-card .settings-card-head {
  min-height: 0;
}

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

.usage-derived-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.usage-derived-grid span {
  display: grid;
  gap: 3px;
  min-height: 54px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.055);
}

.usage-derived-grid small {
  font-size: 11px;
  font-weight: 900;
}

.usage-derived-grid strong {
  font-size: 18px;
  line-height: 1.1;
}

.usage-cost-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(255, 130, 0, 0.26);
  border-radius: 7px;
  background: rgba(255, 130, 0, 0.10);
}

.usage-cost-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.usage-cost-summary strong {
  font-size: 18px;
}

.usage-rate-details {
  padding: 0;
  border: 0;
  background: transparent;
}

.usage-rate-details summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0 2px;
  cursor: pointer;
}

.calculator-structure-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 143, 26, 0.24);
  border-radius: 8px;
  background: rgba(255, 143, 26, 0.08);
}

.calculator-structure-flow > strong {
  grid-column: 1 / -1;
  color: #fff;
}

.calculator-structure-flow span {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.055);
}

.calculator-structure-flow small,
.calculator-structure-flow em {
  color: rgba(234, 242, 251, 0.76);
  font-style: normal;
}

.calculator-structure-flow b {
  color: #fff;
  font-size: 17px;
}

.calculator-break-even {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(45, 212, 191, 0.26);
  border-radius: 8px;
  background: rgba(20, 184, 166, 0.07);
}

.calculator-break-even > strong {
  grid-column: 1 / -1;
  color: #fff;
  font-size: 14px;
}

.calculator-break-even span {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.055);
}

.calculator-break-even small,
.calculator-break-even em {
  color: rgba(234, 242, 251, 0.76);
  font-style: normal;
  line-height: 1.3;
}

.calculator-break-even b {
  color: #99f6e4;
  font-size: 17px;
}

.usage-rate-details .usage-grid {
  padding-top: 8px;
}

.calculator-cashflow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.calculator-money-flow {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.calculator-money-flow strong {
  color: #fff;
  font-size: 14px;
  font-weight: 950;
}

.calculator-money-flow span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 850;
}

.calculator-money-flow b {
  color: #fff;
}

.calculator-money-flow em {
  width: 100%;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 20px;
  font-style: normal;
  font-weight: 950;
  text-align: right;
}

.calculator-money-flow.inflow {
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.08);
}

.calculator-money-flow.inflow em,
.calculator-money-flow.inflow b {
  color: #86efac;
}

.calculator-money-flow.outflow {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(248, 113, 113, 0.08);
}

.calculator-money-flow.outflow em,
.calculator-money-flow.outflow b {
  color: #fca5a5;
}

.calculator-foldout {
  padding: 0;
}

.calculator-foldout summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
}

.calculator-foldout[open] {
  display: grid;
  gap: 8px;
  padding-bottom: 10px;
}

.calculator-foldout .calculator-grid {
  padding: 0 10px;
}

.calculator-card,
.calculator-result {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.calculator-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px 110px;
  gap: 6px;
}

.calculator-card label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.calculator-line input,
.calculator-card input {
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid #cdd8e2;
  border-radius: 7px;
  background: white;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.calculator-stat {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.calculator-stat span,
.calculator-stat small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.calculator-stat strong {
  font-size: 20px;
  font-weight: 900;
}

.calculator-stat.positive {
  border-color: rgba(15, 118, 110, 0.28);
  background: #f0fdfa;
}

.calculator-stat.negative {
  border-color: rgba(180, 35, 24, 0.28);
  background: #fff1f2;
}

.calculator-breakdown {
  display: grid;
  gap: 5px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.calculator-breakdown span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.calculator-breakdown b {
  color: var(--ink);
}

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

.calculator-capacity {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.calculator-capacity > strong {
  grid-column: 1 / -1;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

.calculator-ai-savings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(255, 142, 24, 0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 142, 24, 0.13), rgba(10, 30, 49, 0.72));
}

.calculator-ai-savings > strong {
  grid-column: 1 / -1;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

.calculator-ai-savings span {
  display: grid;
  gap: 3px;
  min-height: 64px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(4, 18, 31, 0.62);
}

.calculator-ai-savings span.positive {
  border-color: rgba(61, 220, 151, 0.42);
}

.calculator-ai-savings span.warning {
  border-color: rgba(255, 196, 87, 0.42);
}

.calculator-ai-savings small,
.calculator-ai-savings em {
  color: var(--admin-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.calculator-ai-savings b {
  color: #fff;
  font-size: 17px;
  line-height: 1.05;
}

.calculator-capacity span {
  display: grid;
  gap: 3px;
  min-height: 64px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.055);
}

.calculator-capacity small {
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 900;
}

.calculator-capacity b {
  color: var(--orange);
  font-size: 17px;
  line-height: 1.05;
}

.calculator-capacity em {
  color: var(--admin-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.2;
}

.calculator-advice span {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 130, 0, 0.24);
  border-radius: 7px;
  background: rgba(255, 130, 0, 0.10);
  color: var(--admin-text);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.admin-body .calculator-shell {
  color: var(--admin-text);
}

.admin-body .calculator-card,
.admin-body .calculator-result,
.admin-body .calculator-foldout {
  border-color: var(--admin-line) !important;
  background: linear-gradient(180deg, rgba(16, 36, 59, 0.96), rgba(9, 25, 43, 0.96)) !important;
  color: var(--admin-text) !important;
  box-shadow: none !important;
}

.admin-body .calculator-foldout summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.admin-body .business-row-head,
.admin-body .calculator-card label,
.admin-body .calculator-stat span,
.admin-body .calculator-stat small,
.admin-body .calculator-breakdown span {
  color: var(--admin-muted) !important;
}

.admin-body .business-row strong,
.admin-body .calculator-card h3,
.admin-body .calculator-result h3,
.admin-body .calculator-stat strong,
.admin-body .calculator-breakdown b {
  color: #fff !important;
}

.admin-body .business-row input,
.admin-body .calculator-line input,
.admin-body .calculator-card input {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(4, 18, 33, 0.88) !important;
  color: #fff !important;
}

.admin-body .calculator-stat {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: var(--admin-text) !important;
}

.admin-body .calculator-stat.positive {
  border-color: rgba(34, 197, 94, 0.30) !important;
  background: rgba(34, 197, 94, 0.10) !important;
}

.admin-body .calculator-stat.negative {
  border-color: rgba(248, 113, 113, 0.30) !important;
  background: rgba(248, 113, 113, 0.10) !important;
}

.admin-body .calculator-breakdown {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}

.admin-body .calculator-advice span {
  color: #fff !important;
}

.finance-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.finance-block,
.finance-table-block {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.finance-block h3 {
  margin: 0;
  font-size: 15px;
}

.finance-lines,
.finance-table {
  display: grid;
  gap: 6px;
}

.finance-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
}

.finance-line span,
.finance-row span {
  display: grid;
  gap: 2px;
  color: var(--ink);
  font-weight: 900;
}

.finance-line small,
.finance-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.finance-line strong {
  font-weight: 900;
}

.finance-line.warning {
  border-color: rgba(180, 83, 9, 0.25);
  background: #fffbeb;
}

.finance-line.positive {
  border-color: rgba(15, 118, 110, 0.25);
  background: #f0fdfa;
}

.finance-line.negative {
  border-color: rgba(180, 35, 24, 0.25);
  background: #fff1f2;
}

.finance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 130px 120px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.finance-row strong,
.finance-row em {
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.finance-row.payout-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.finance-row.webhook-row {
  grid-template-columns: minmax(0, 1fr) minmax(130px, auto) minmax(120px, auto);
  cursor: default;
}

.finance-row.webhook-row span {
  color: #ffad4d;
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.finance-row.webhook-row.positive span {
  color: #7ee0a3;
}

.finance-row.webhook-row.warning span {
  color: #ffcf70;
}

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

.finance-row-actions .button {
  min-height: 34px;
  padding: 8px 10px;
}

.bookkeeping-checklist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.bookkeeping-check {
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.bookkeeping-check span,
.bookkeeping-check small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.bookkeeping-check strong {
  color: var(--blue);
  font-size: 18px;
  font-weight: 950;
}

.bookkeeping-check.ok {
  border-color: #b8e2ca;
  background: #f3fbf6;
}

.bookkeeping-check.action {
  border-color: #fed7aa;
  background: #fff7ed;
}

.summary-card {
  display: grid;
  gap: 8px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  background: white;
  color: var(--ink);
  cursor: pointer;
}

.summary-card span {
  font-size: 30px;
  font-weight: 900;
}

.data-list, .audit-list {
  display: grid;
  gap: 10px;
}

.data-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.data-row div {
  display: grid;
  gap: 5px;
}

.data-row span {
  color: var(--muted);
}

.audit-workspace {
  display: grid;
  gap: 12px;
}

.audit-head,
.audit-filters,
.audit-summary,
.audit-insight-grid,
.audit-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.audit-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  padding: 14px 16px;
}

.audit-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.audit-head p {
  margin: 0;
  color: var(--muted);
}

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

.audit-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(150px, 1fr));
  gap: 10px;
  padding: 12px;
}

.audit-filters label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.audit-filters input,
.audit-filters select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 800;
  color: var(--ink);
  background: #fbfcfd;
}

.audit-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.audit-integrity {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.audit-integrity.positive {
  border-color: rgba(22, 163, 74, 0.28);
}

.audit-integrity.warning {
  border-color: rgba(245, 158, 11, 0.45);
  background: #fff7ed;
}

.audit-integrity span,
.audit-integrity small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

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

.audit-insight-grid article {
  display: grid;
  gap: 7px;
}

.audit-insight-grid article > strong {
  font-size: 13px;
}

.audit-insight-grid span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.audit-results {
  display: grid;
  gap: 10px;
}

.audit-table {
  display: grid;
  gap: 7px;
}

.security-workspace,
.security-grid {
  display: grid;
  gap: 12px;
}

.security-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.security-head h2 {
  margin: 0;
  font-size: 22px;
}

.security-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

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

.security-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.security-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

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

.communication-workspace {
  display: grid;
  gap: 12px;
}

.communication-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.communication-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.communication-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.communication-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.communication-kpis button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  text-align: left;
  color: var(--ink);
}

.communication-kpis strong,
.communication-kpis span {
  display: block;
}

.communication-kpis strong {
  font-size: 20px;
}

.communication-kpis span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.outbox-table {
  display: grid;
  gap: 6px;
}

.account-recovery-monitor {
  margin: 12px 0;
  border: 1px solid var(--border, var(--line));
  border-radius: 8px;
  background: var(--surface, var(--paper));
}

.account-recovery-monitor > summary {
  min-height: 52px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.account-recovery-monitor > summary span,
.account-recovery-monitor > summary strong,
.account-recovery-monitor > summary small {
  display: block;
}

.account-recovery-monitor > summary small {
  margin-top: 2px;
  color: var(--muted);
}

.account-recovery-monitor > summary b {
  min-width: 28px;
  text-align: center;
}

.account-recovery-list {
  border-top: 1px solid var(--border, var(--line));
}

.account-recovery-list article {
  min-height: 50px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(220px, 1.3fr) 90px auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border, var(--line));
}

.account-recovery-list article:last-child {
  border-bottom: 0;
}

.account-recovery-list article span,
.account-recovery-list article strong,
.account-recovery-list article small {
  display: block;
  min-width: 0;
}

.account-recovery-list article small {
  color: var(--muted);
}

@media (max-width: 760px) {
  .account-recovery-list article {
    grid-template-columns: 1fr auto;
  }
}

html[data-theme="light"] .admin-body #communicationsPanel :where(
  .communication-head,
  .staff-chat-list,
  .staff-chat-room,
  .staff-chat-channel,
  .chat-messages article,
  .communication-kpis button,
  .outbox-summary-line,
  .outbox-table,
  .outbox-row,
  .account-recovery-monitor
) {
  border-color: #d7e0e8 !important;
  background: #f8fafc !important;
  color: #0f172a !important;
}

html[data-theme="light"] .admin-body #communicationsPanel :where(
  .communication-head h2,
  .communication-head h3,
  .communication-head p,
  .staff-chat-list h3,
  .staff-chat-room h3,
  .staff-chat-channel strong,
  .staff-chat-channel small,
  .chat-messages strong,
  .chat-messages p,
  .communication-kpis strong,
  .communication-kpis span,
  .outbox-summary-line h3,
  .outbox-summary-line p,
  .outbox-summary-line span,
  .outbox-row strong,
  .outbox-row small,
  .outbox-message,
  .outbox-message strong,
  .outbox-message small,
  .account-recovery-monitor strong,
  .account-recovery-monitor small
) {
  color: #0f172a !important;
}

html:not([data-theme="light"]) .admin-body #communicationsPanel .account-recovery-monitor {
  border-color: rgba(255, 255, 255, 0.13);
  background: linear-gradient(180deg, rgba(16, 36, 59, 0.96), rgba(9, 25, 43, 0.96));
  color: #f7efe5;
}

html:not([data-theme="light"]) .admin-body #communicationsPanel .account-recovery-monitor small {
  color: rgba(247, 239, 229, 0.72);
}

.outbox-waiting-summary {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.outbox-waiting-summary > summary {
  min-height: 48px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.outbox-waiting-summary > summary span,
.outbox-waiting-summary > summary strong,
.outbox-waiting-summary > summary small,
.outbox-waiting-content span,
.outbox-waiting-content strong,
.outbox-waiting-content small {
  display: block;
}

.outbox-waiting-summary small {
  color: var(--muted);
}

.outbox-waiting-content {
  padding: 10px 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr)) auto;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
}

html:not([data-theme="light"]) .admin-body #communicationsPanel .outbox-waiting-summary {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(9, 25, 43, 0.96);
  color: #f7efe5;
}

@media (max-width: 760px) {
  .outbox-waiting-content {
    grid-template-columns: repeat(2, minmax(90px, 1fr));
  }
}

.outbox-summary-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.outbox-summary-line h3,
.outbox-summary-line p {
  margin: 0;
}

.outbox-summary-line h3 {
  font-size: 16px;
}

.outbox-summary-line p,
.outbox-summary-line span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.outbox-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(220px, 1.4fr) minmax(190px, 1fr) minmax(110px, .6fr) minmax(260px, auto);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px 10px;
}

.outbox-head-row {
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.outbox-row strong,
.outbox-row small {
  display: block;
  min-width: 0;
}

.outbox-row small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.outbox-message {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  color: var(--ink);
  font: inherit;
  min-width: 0;
}

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

.outbox-actions .button {
  white-space: nowrap;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eef2f7;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.status-pill.open {
  background: #fffbeb;
  color: #b45309;
}

.status-pill.mislukt {
  background: #fef2f2;
  color: #b91c1c;
}

.status-pill.afgehandeld {
  background: #ecfdf5;
  color: #15803d;
}

.staff-chat-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.staff-chat-list,
.staff-chat-room {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.staff-chat-channel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fafc;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.staff-chat-channel.active {
  border-color: rgba(255, 130, 0, 0.48);
  background: rgba(255, 130, 0, 0.10);
}

.staff-chat-channel span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.staff-chat-channel strong,
.staff-chat-channel small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-chat-channel em,
.staff-chat-channel > small {
  min-width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--orange);
  color: var(--ink);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.staff-chat-channel > small {
  background: rgba(255, 255, 255, 0.10);
  color: var(--muted);
}

.staff-chat-messages {
  max-height: 320px;
}

.staff-chat-messages article.own {
  border-color: rgba(255, 130, 0, 0.28);
  background: rgba(255, 130, 0, 0.10);
}

@media (max-width: 900px) {
  .staff-chat-workspace {
    grid-template-columns: 1fr;
  }
}

/* Compacte dashboardstatistieken: alleen de bovenste KPI-rij. */
.admin-body:has(#dashboard:not(.hidden)) #overviewPanel .cockpit-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)) !important;
  gap: 8px !important;
  margin: 8px 0 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) #overviewPanel .cockpit-kpis .summary-card {
  min-height: 48px !important;
  padding: 8px 10px !important;
  border-radius: 7px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
}

.admin-body:has(#dashboard:not(.hidden)) #overviewPanel .cockpit-kpis .summary-card span {
  font-size: clamp(16px, 1.45vw, 20px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.admin-body:has(#dashboard:not(.hidden)) #overviewPanel .cockpit-kpis .summary-card strong {
  font-size: 10.5px !important;
  line-height: 1.12 !important;
  font-weight: 850 !important;
  opacity: .88 !important;
}

@media (min-width: 1180px) {
  .admin-body:has(#dashboard:not(.hidden)) #overviewPanel .cockpit-kpis {
    grid-template-columns: repeat(8, minmax(112px, 1fr)) !important;
  }
}

.admin-body .staff-chat-list,
.admin-body .staff-chat-room,
.admin-body .staff-chat-channel,
.admin-body .chat-messages article,
.admin-body .outbox-table,
.admin-body .outbox-summary-line,
.admin-body .outbox-row,
.admin-body .communication-head,
.admin-body .communication-kpis button {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: linear-gradient(180deg, rgba(16, 36, 59, 0.96), rgba(9, 25, 43, 0.96)) !important;
  color: #f7efe5 !important;
  box-shadow: none !important;
}

.admin-body .staff-chat-channel.active,
.admin-body .staff-chat-messages article.own {
  border-color: rgba(255, 130, 0, 0.44) !important;
  background: rgba(255, 130, 0, 0.13) !important;
}

.admin-body .staff-chat-channel :where(strong, em),
.admin-body .chat-messages strong,
.admin-body .communication-kpis strong,
.admin-body .outbox-summary-line h3,
.admin-body .outbox-row strong,
.admin-body .outbox-message {
  color: #fff !important;
}

.admin-body .staff-chat-channel :where(small, span),
.admin-body .chat-messages :where(p, small),
.admin-body .communication-kpis span,
.admin-body .outbox-summary-line :where(p, span),
.admin-body .outbox-row :where(span, small) {
  color: rgba(247, 239, 229, 0.76) !important;
}

.security-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(80px, auto) minmax(90px, auto);
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
  padding: 9px 10px;
  text-align: left;
  color: var(--ink);
  font: inherit;
}

.security-row.high,
.security-row.critical,
.security-row.attention {
  border-color: rgba(220, 38, 38, 0.3);
  background: #fef2f2;
}

.security-row.ok {
  border-color: rgba(22, 163, 74, 0.24);
  background: #f0fdf4;
}

.security-row span {
  display: grid;
  gap: 2px;
  font-weight: 900;
}

.security-row small,
.security-row strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.security-classification {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.security-classification span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 9px;
  background: #fbfcfd;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.encryption-policy-panel {
  gap: 16px;
}

.encryption-policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.encryption-policy-grid article {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 14px;
  background: #fbfcfd;
}

.encryption-policy-grid strong {
  color: var(--ink);
  font-size: 0.96rem;
}

.encryption-policy-grid span {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  font-weight: 900;
  font-size: 0.78rem;
}

.encryption-policy-grid small {
  color: var(--muted);
  line-height: 1.45;
}

.audit-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) minmax(160px, 1fr) minmax(220px, 1.4fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
}

.audit-row strong,
.audit-row span,
.audit-row small {
  display: block;
}

.audit-row small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.audit-row-actions {
  display: flex;
  justify-content: flex-end;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.metrics article,
.metric-card {
  padding: 20px;
}

.metric-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.metrics span,
.metric-card span {
  display: block;
  font-size: 34px;
  font-weight: 900;
}

.workspace {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  min-height: 620px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.queue {
  border-right: 1px solid var(--line);
  background: #fbfcfd;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.panel-head h2 { font-size: 20px; margin: 0; }
.panel-head select { max-width: 170px; }

.request-list {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.request-item {
  display: grid;
  gap: 6px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  padding: 14px;
  cursor: pointer;
}

.request-item span { color: var(--muted); font-size: 13px; }
.request-item.active { border-color: var(--orange); box-shadow: inset 4px 0 0 var(--orange); }

.risk-line {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .business-calculator-grid,
  .calculator-grid {
    grid-template-columns: 1fr;
  }

  .usage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .usage-derived-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.risk-line.warning {
  background: #fff7ed;
  color: #9a3412;
}

.risk-line.critical {
  background: #fef2f2;
  color: #991b1b;
}

.execution-monitor {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.execution-monitor.warning {
  border-color: rgba(249, 115, 22, 0.35);
  background: #fff7ed;
}

.execution-monitor.critical {
  border-color: rgba(220, 38, 38, 0.35);
  background: #fef2f2;
}

.risk-message {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}

.servicecenter-cockpit {
  display: grid;
  gap: 14px;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.servicecenter-kpis {
  display: grid;
  grid-template-columns: repeat(7, minmax(132px, 1fr));
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
}

.servicecenter-kpi {
  display: grid;
  gap: 2px;
  min-width: 132px;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  text-align: left;
  cursor: pointer;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.servicecenter-kpi strong {
  color: var(--navy);
  font-size: 20px;
  line-height: 1;
}

.servicecenter-kpi span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.servicecenter-kpi.warning {
  border-color: rgba(249, 115, 22, 0.34);
  background: #fff7ed;
}

.servicecenter-routing-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.70);
}

.servicecenter-routing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
  gap: 8px;
}

.servicecenter-routing-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 4px 8px;
  align-items: center;
  min-height: 74px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.servicecenter-routing-tile span,
.servicecenter-routing-tile small {
  min-width: 0;
}

.servicecenter-routing-tile strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.15;
}

.servicecenter-routing-tile b {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  background: rgba(255, 130, 0, 0.14);
  color: var(--navy);
  font-size: 18px;
}

.servicecenter-routing-tile em,
.servicecenter-routing-tile small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.2;
}

.servicecenter-routing-tile.actief {
  border-color: rgba(32, 130, 94, 0.30);
}

.servicecenter-routing-tile.druk,
.servicecenter-routing-tile.kritiek {
  border-color: rgba(249, 115, 22, 0.42);
  background: #fff7ed;
}

.servicecenter-routing-tile.kritiek {
  border-color: rgba(220, 38, 38, 0.42);
  background: #fef2f2;
}

.servicecenter-routing-tile.active {
  outline: 2px solid rgba(255, 130, 0, 0.42);
  box-shadow: 0 0 0 4px rgba(255, 130, 0, 0.10);
}

.servicecenter-layout {
  display: grid;
  grid-template-columns: minmax(460px, 1fr) minmax(280px, 0.7fr);
  gap: 14px;
  align-items: start;
}

.servicecenter-queue,
.servicecenter-side,
.servicecenter-mini-list {
  display: grid;
  gap: 10px;
}

.servicecenter-ticket-list {
  display: grid;
  gap: 7px;
}

.servicecenter-ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  min-width: 0;
}

.servicecenter-ticket.warning {
  border-color: rgba(249, 115, 22, 0.32);
}

.servicecenter-ticket.critical {
  border-color: rgba(220, 38, 38, 0.32);
  background: #fef2f2;
}

.servicecenter-ticket-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: center;
  min-width: 0;
  text-align: left;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.servicecenter-score {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
}

.servicecenter-ticket-main strong,
.servicecenter-mini-list strong {
  color: var(--ink);
}

.servicecenter-ticket-main small,
.servicecenter-ticket-main em,
.servicecenter-mini-list span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.servicecenter-ticket-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: max-content;
}

.servicecenter-mini-list {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.servicecenter-mini-list h3 {
  margin: 0;
  font-size: 15px;
}

.servicecenter-mini-list button {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.detail { padding: 26px; }
.detail-head { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.detail-head h2 { margin-bottom: 8px; }
.badge { padding: 8px 10px; border-radius: 7px; background: #e7f5f4; color: var(--teal); font-weight: 800; white-space: nowrap; }

.ticket-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 16px;
  align-items: start;
}

.ticket-main {
  min-width: 0;
}

.ticket-progress {
  position: sticky;
  top: 90px;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.ticket-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.ticket-progress-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.ticket-next-action {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid #c7d2fe;
  border-radius: 7px;
  background: #eef2ff;
}

.ticket-process-warning {
  display: grid;
  gap: 5px;
  padding: 0;
  border: 1px solid rgba(248, 113, 113, 0.34);
  border-radius: 7px;
  background: rgba(248, 113, 113, 0.12);
}

.ticket-process-warning summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.ticket-process-warning summary::-webkit-details-marker {
  display: none;
}

.ticket-process-warning summary::after {
  content: "Bekijk";
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(248, 113, 113, 0.16);
  color: #fecaca;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.ticket-process-warning[open] summary::after {
  content: "Sluit";
}

.ticket-process-warning > div {
  display: grid;
  gap: 5px;
  padding: 0 10px 10px;
}

.ticket-process-warning strong {
  color: #fecaca !important;
  font-size: 12px;
  text-transform: uppercase;
}

.ticket-process-warning span {
  color: #fee2e2 !important;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.ticket-next-action span,
.ticket-next-action small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.ticket-progress ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticket-progress li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
}

.ticket-progress li.blocked {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(248, 113, 113, 0.10);
}

.ticket-progress li.blocked .progress-index {
  background: rgba(248, 113, 113, 0.18);
  color: #fecaca;
}

.ticket-progress li.blocked small::after {
  content: " - controle nodig";
  color: #fecaca;
  font-weight: 900;
}

.ticket-progress li.done {
  border-color: rgba(255, 130, 0, 0.45);
  background: #fff4e8;
}

.progress-index {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: var(--muted);
  background: #e9eef2;
  font-size: 12px;
  font-weight: 900;
}

.ticket-progress li.done .progress-index {
  color: white;
  background: var(--orange);
}

.ticket-progress strong,
.ticket-progress small {
  display: block;
}

.ticket-progress li strong {
  font-size: 12px;
}

.ticket-progress small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.info-grid p {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 14px;
  background: var(--soft);
  border-radius: 7px;
  color: var(--muted);
}

.info-grid strong { color: var(--ink); }
.description { padding: 16px; border-left: 4px solid var(--gold); background: #fffaf0; line-height: 1.5; }
.notes { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 18px; }
.notes p { display: grid; gap: 5px; color: var(--muted); }
.empty { color: var(--muted); padding: 18px; }

.quote-box {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  overflow: hidden;
}

.compact-head h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.compact-head p {
  margin: 0;
  color: var(--muted);
}

.quote-lines-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.quote-lines {
  display: grid;
  gap: 8px;
}

.quote-line {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 72px 82px 124px 76px 96px 42px;
  gap: 8px;
}

.quote-review {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface, #fff);
  padding: 10px 12px;
}

.quote-review summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.quote-review small { color: var(--muted); }
.quote-review ul { margin: 8px 0 0; padding-left: 20px; }

.benchmark-reference-panel { margin: 12px 0; }
.benchmark-learning-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 8px;
}
.benchmark-learning-status article,
.benchmark-kpis article {
  display: grid;
  gap: 2px;
  min-width: 88px;
}
.benchmark-learning-status article strong,
.benchmark-learning-status article span,
.benchmark-kpis article strong,
.benchmark-kpis article span { display: block; }
.benchmark-learning-status article span,
.benchmark-kpis article span { color: var(--muted); font-size: 11px; }
.benchmark-learning-track {
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface, #fff);
}
.benchmark-learning-track span {
  display: block;
  min-width: 2px;
  height: 100%;
  background: var(--accent, #ef7d00);
}
.benchmark-collection-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface, #fff);
}
.benchmark-collection-row div { display: grid; gap: 2px; }
.benchmark-collection-row small,
.benchmark-collection-row > span { color: var(--muted); }
.benchmark-collection-row a { color: var(--accent, #b45309); font-weight: 800; }
.benchmark-admission-rules {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.benchmark-admission-rules summary { cursor: pointer; font-weight: 800; }
.benchmark-admission-rules ol { margin: 8px 0 0; padding-left: 22px; }
.benchmark-admission-rules li + li { margin-top: 5px; }
.benchmark-upload-panel { margin: 12px 0; }
.benchmark-source-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 10px;
}
.benchmark-source-options > section {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface, #fff);
}
.benchmark-source-options h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: .9rem;
}
.benchmark-source-options h3 svg { width: 17px; height: 17px; }
.benchmark-source-options .checkbox-line {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--soft, #f7f9fb) !important;
  color: var(--ink, #172033) !important;
}
.benchmark-source-options .checkbox-line input { accent-color: #e86f0b; }
.benchmark-upload-form,
.benchmark-upload-save-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 10px;
}
.benchmark-upload-form label,
.benchmark-upload-save-form label,
.benchmark-upload-result > label {
  display: grid;
  gap: 5px;
}
.benchmark-upload-form .wide,
.benchmark-upload-save-form .wide { grid-column: 1 / -1; }
.benchmark-upload-result {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface, #fff);
}
.benchmark-upload-result > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.benchmark-upload-result > header div { display: grid; gap: 2px; }
.benchmark-upload-result > header small { color: var(--muted); }
.benchmark-analysis-scope { display: flex; flex-wrap: wrap; gap: 6px; }
.benchmark-analysis-scope span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: .75rem;
}
.benchmark-analysis-scope span.positive { color: #17623a; background: #eefaf3; }
.benchmark-analysis-scope span.warning { color: #7a4100; background: #fff6e8; }
.benchmark-analysis-scope svg { width: 15px; height: 15px; }
.benchmark-offering-review {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.benchmark-offering-review legend { padding: 0 5px; font-weight: 800; }
.benchmark-offering-review label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--soft, #f7f9fb);
}
.benchmark-offering-review small { color: var(--muted); }
.benchmark-knowledge-panel { margin: 10px 0; }
.benchmark-knowledge-list { display: grid; max-height: 300px; overflow-y: auto; scrollbar-width: none; }
.benchmark-knowledge-list::-webkit-scrollbar { display: none; }
.benchmark-knowledge-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.benchmark-knowledge-list article:last-child { border-bottom: 0; }
.benchmark-knowledge-list article > div { display: grid; gap: 2px; min-width: 0; }
.benchmark-knowledge-list small { color: var(--muted); }
.benchmark-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.benchmark-reference-grid article,
.benchmark-source-list a {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: var(--surface, #fff);
  text-decoration: none;
}
.benchmark-reference-grid span,
.benchmark-reference-grid small,
.benchmark-source-list span { color: var(--muted); }
.benchmark-source-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}

@media (max-width: 760px) {
  .benchmark-learning-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benchmark-collection-row { grid-template-columns: 1fr; gap: 5px; }
  .benchmark-source-options { grid-template-columns: 1fr; }
  .benchmark-knowledge-list article { grid-template-columns: 1fr auto; }
  .benchmark-knowledge-list article > small { grid-column: 1 / -1; }
  .benchmark-upload-form,
  .benchmark-upload-save-form { grid-template-columns: 1fr; }
}

.icon-btn {
  width: 42px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: white;
  cursor: pointer;
  font-weight: 900;
}

.quote-total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--muted);
}

.quote-total strong { color: var(--ink); }

.offer-monitor {
  display: grid;
  gap: 10px;
  padding: 0 18px 18px;
}

.offer-monitor h3,
.offer-choice-box h3 {
  margin: 0;
  font-size: 16px;
}

.offer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
}

.offer-row div {
  display: grid;
  gap: 5px;
}

.offer-row span,
.offer-row p {
  margin: 0;
  color: var(--muted);
}

.planning-monitor {
  display: grid;
  gap: 10px;
  padding: 0 18px 18px;
}

.planning-monitor .panel-head {
  padding: 0;
  border-bottom: 0;
}

.planning-monitor small {
  color: var(--muted);
  font-weight: 800;
}

.planning-candidate-list {
  display: grid;
  gap: 8px;
}

.planning-candidate-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.planning-candidate-row div:last-child {
  display: grid;
  gap: 4px;
}

.planning-candidate-row span,
.planning-candidate-row small {
  color: var(--muted);
  font-size: 12px;
}

.score-pill {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #e8f1ff;
  color: #0b4fb3;
  font-weight: 900;
}

.positive-line {
  color: #0f766e !important;
}

.warning-line {
  color: #b45309 !important;
}

.link-strip {
  display: grid;
  gap: 12px;
  padding: 0 18px 18px;
}

.edit-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 12px;
}

.padded-toolbar {
  margin: 0;
  padding: 14px 18px 0;
}

.document-body {
  min-height: 100vh;
  background: var(--soft);
}

.document-shell {
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0;
}

.document-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.document-header img {
  width: min(300px, 70vw);
  height: 58px;
  object-fit: contain;
  object-position: left center;
}

.document-header span {
  color: var(--muted);
  font-weight: 800;
}

.document-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow);
}

.translation-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafc;
}

.translation-toolbar strong,
.translation-toolbar span {
  display: block;
}

.translation-toolbar span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.original-document {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.original-document.collapsed {
  display: none;
}

.document-title {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.document-title h1 {
  margin-bottom: 8px;
  font-size: 42px;
}

.document-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.line-table {
  width: 100%;
  margin-top: 22px;
  border-collapse: collapse;
}

.line-table th,
.line-table td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.line-table th {
  color: var(--muted);
  font-size: 13px;
}

.line-table td:last-child,
.line-table th:last-child {
  text-align: right;
}

.line-table tfoot td {
  background: #fbfcfd;
}

.approval-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
}

.success-pill {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 7px;
  color: var(--teal);
  background: #e7f5f4;
  font-weight: 800;
}

.partners {
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
}

.pro-form, .settings-form, .intake-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr)) auto;
  gap: 10px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.intake-form {
  grid-template-columns: repeat(5, minmax(140px, 1fr));
}

.settings-form {
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  border-bottom: 0;
}

.settings-shell {
  display: grid;
  gap: 14px;
}

.settings-shell .panel-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.settings-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.settings-summary article {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  box-shadow: none;
}

.settings-summary span,
.settings-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.settings-summary strong {
  font-size: 18px;
  font-weight: 900;
}

.settings-summary article:nth-child(1),
.settings-summary article:nth-child(2) {
  border-color: rgba(255, 130, 0, 0.35);
}

.settings-summary article:nth-child(4) {
  border-color: rgba(15, 118, 110, 0.28);
}

.settings-form-grouped {
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0;
  border-bottom: 0;
}

.settings-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.settings-card label,
.branch-form label,
#userForm label,
.staffing-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.settings-card label:focus-within,
.branch-form label:focus-within,
#userForm label:focus-within,
.staffing-grid label:focus-within {
  border-color: #7fb3ff;
  background: #f5f9ff;
  box-shadow: 0 0 0 3px rgba(11, 79, 179, 0.08);
}

.settings-card label input,
.settings-card label select,
.settings-card label textarea,
.branch-form label input,
.branch-form label select,
.branch-form label textarea,
#userForm label input,
#userForm label select,
.staffing-grid label input {
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid #cdd8e2;
  border-radius: 7px;
  background: white;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.settings-card label input:disabled,
.settings-card label select:disabled,
.settings-card label textarea:disabled,
.branch-form label input:disabled,
.branch-form label select:disabled,
.branch-form label textarea:disabled,
#userForm label input:disabled,
#userForm label select:disabled,
.staffing-grid label input:disabled {
  border-color: transparent;
  background: #eef3f7;
  color: #304256;
  opacity: 1;
}

.settings-card label input[inputmode="decimal"],
.settings-card label input[inputmode="numeric"],
.branch-form label input[inputmode="decimal"],
.branch-form label input[inputmode="numeric"],
.staffing-grid label input[type="number"],
#userForm label input[inputmode="decimal"] {
  font-size: 15px;
  font-weight: 900;
}

.settings-card .checkbox-line,
.branch-form .checkbox-line {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 13px;
  padding: 7px 8px;
  background: #fbfcfd;
  border: 1px solid var(--line);
}

.settings-card .checkbox-line input,
.branch-form .checkbox-line input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--orange);
}

.settings-card-wide,
.settings-actions {
  grid-column: 1 / -1;
}

.settings-card-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.settings-card-head h3 {
  margin: 0;
  font-size: 15px;
}

.settings-card-head span,
.settings-help {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.settings-help {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border-radius: 7px;
  background: #fbfcfd;
}

.settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.settings-actions .form-message {
  margin-left: auto;
  color: var(--muted);
  font-weight: 800;
}

.settings-form.settings-form-grouped {
  gap: 14px;
  padding: 0;
  border-bottom: 0;
}

.settings-card label,
.branch-form label,
#userForm label,
.staffing-grid label {
  padding: 11px;
  border-radius: 8px;
}

.branch-workspace {
  display: grid;
  gap: 14px;
}

.branch-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.6fr);
  gap: 14px;
}

.corporate-structure-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 143, 26, 0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(8, 34, 60, 0.96), rgba(8, 24, 42, 0.98));
  color: #f8fbff;
}

.corporate-kpi-strip,
.corporate-layout,
.corporate-finance-grid {
  display: grid;
  gap: 10px;
}

.corporate-kpi-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.corporate-layout,
.corporate-finance-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.corporate-structure-tree,
.corporate-flow-list {
  display: grid;
  gap: 10px;
}

.corporate-entity-card,
.corporate-flow-row {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(210, 225, 240, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.corporate-entity-card {
  border-left: 3px solid var(--orange);
}

.corporate-entity-card strong,
.corporate-flow-row strong {
  display: block;
  color: #fff;
}

.corporate-entity-card span,
.corporate-entity-card small,
.corporate-flow-row small,
.corporate-structure-panel p {
  color: rgba(234, 242, 251, 0.78);
}

.corporate-entity-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.corporate-entity-metrics small {
  padding: 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
}

.corporate-flow-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.corporate-flow-row span {
  color: #ffb056;
  font-weight: 900;
}

.corporate-flow-row b {
  color: #fff;
  font-size: 15px;
}

.corporate-config-editor {
  border: 1px solid rgba(210, 225, 240, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.corporate-config-editor summary {
  padding: 11px 12px;
  cursor: pointer;
  font-weight: 900;
}

.corporate-config-editor form {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.corporate-config-editor textarea {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  border: 1px solid rgba(210, 225, 240, 0.24);
  border-radius: 8px;
  background: rgba(4, 15, 27, 0.9);
  color: #f8fbff;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.corporate-finance-block .corporate-flow-list,
.corporate-finance-block .bookkeeping-checklist {
  min-width: 0;
}

.professional-business-structure .business-structure-summary,
.business-structure-grid,
.business-structure-edit-grid {
  display: grid;
  gap: 10px;
}

.professional-business-structure .business-structure-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 10px 0;
}

.business-structure-status {
  display: grid;
  gap: 3px;
  margin: 10px 0;
  padding: 9px 11px;
  border-left: 3px solid #22c55e;
  border-radius: 5px;
  background: rgba(34, 197, 94, 0.1);
}

.business-structure-status.needs-review {
  border-left-color: #ff8200;
  background: rgba(255, 130, 0, 0.1);
}

.professional-business-structure .business-structure-status strong {
  color: #f8fbff;
  font-size: 0.82rem;
}

.professional-business-structure .business-structure-status span {
  color: rgba(234, 242, 251, 0.8);
  font-size: 0.75rem;
}

.professional-business-structure .business-structure-summary article,
.business-structure-list article {
  padding: 11px;
  border: 1px solid rgba(210, 225, 240, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.business-structure-edit-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 10px 0;
}

.business-structure-edit-grid .wide {
  grid-column: 1 / -1;
}

.business-structure-edit-grid label,
.business-structure-editor-row label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: rgba(234, 242, 251, 0.78);
  font-size: 0.78rem;
  font-weight: 800;
}

.business-structure-edit-grid input,
.business-structure-edit-grid select,
.business-structure-editor-row input,
.business-structure-editor-row select {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(210, 225, 240, 0.2);
  border-radius: 8px;
  background: rgba(4, 15, 27, 0.74);
  color: #f8fbff;
  font-size: 0.88rem;
}

.business-structure-editor-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.business-structure-editor-row small {
  grid-column: 1 / -1;
}

.professional-business-structure strong,
.business-structure-list h4 {
  color: #fff;
}

.professional-business-structure span,
.professional-business-structure small,
.professional-business-structure .form-message {
  color: rgba(234, 242, 251, 0.78);
}

.business-structure-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.business-structure-list {
  display: grid;
  gap: 8px;
}

body.light-theme .business-structure-edit-grid label,
body.light-theme .business-structure-editor-row label {
  color: #334155;
}

body.light-theme .business-structure-edit-grid input,
body.light-theme .business-structure-edit-grid select,
body.light-theme .business-structure-editor-row input,
body.light-theme .business-structure-editor-row select {
  border-color: rgba(15, 23, 42, 0.14);
  background: #ffffff;
  color: #0f172a;
}

body.light-theme .business-structure-status strong,
html[data-theme="light"] .business-structure-status strong {
  color: #10243a;
}

body.light-theme .business-structure-status span,
html[data-theme="light"] .business-structure-status span {
  color: #43566c;
}

.branch-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.branch-card {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  text-align: left;
  cursor: pointer;
}

.branch-card.active {
  border-color: var(--orange);
  box-shadow: inset 3px 0 0 var(--orange);
}

.branch-card strong,
.branch-card span,
.branch-card small {
  display: block;
}

.branch-card span,
.branch-card small {
  color: var(--muted);
}

.branch-mini-metrics,
.branch-stats,
.solo-task-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.branch-mini-metrics span,
.branch-stats article,
.solo-task-grid button {
  min-height: 52px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
}

.branch-mini-metrics b,
.branch-stats strong,
.solo-task-grid b {
  display: block;
  color: var(--ink);
  font-size: 15px;
}

.branch-stats {
  padding: 0 18px 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.branch-stats span,
.solo-task-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.solo-pill {
  display: inline-flex;
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--teal);
  background: #e7f5f4;
  font-weight: 800;
}

.solo-panel {
  display: grid;
  gap: 12px;
  margin: 0 18px 14px;
  padding: 14px;
  border: 1px solid #badbd8;
  border-radius: 8px;
  background: #f3fbfa;
}

.solo-panel strong,
.solo-panel span {
  display: block;
}

.solo-panel span {
  color: var(--muted);
}

.solo-task-grid button {
  text-align: left;
  cursor: pointer;
}

.branch-form {
  padding-top: 0;
}

.branch-value-shell {
  display: grid;
  gap: 8px;
  padding: 0 18px 18px;
}

.branch-value-group {
  display: grid;
  gap: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.branch-value-group summary {
  display: grid;
  grid-template-columns: minmax(160px, 0.45fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.branch-value-group summary::-webkit-details-marker {
  display: none;
}

.branch-value-group summary span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.branch-value-group summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.branch-value-group[open] summary {
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.branch-value-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.branch-value-group-compact .branch-value-list {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 6px;
}

.branch-value-row {
  display: grid;
  grid-template-columns: minmax(100px, 0.9fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.branch-value-row:hover {
  border-color: #b9c8d8;
  background: #f5f8fb;
}

.branch-value-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.branch-value-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.branch-value-row small {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.value-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 20, 42, 0.38);
}

.value-editor-panel {
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  box-shadow: 0 24px 70px rgba(2, 20, 42, 0.22);
}

.value-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.value-editor-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.value-editor-head h2 {
  margin: 2px 0 0;
}

.value-editor-panel p {
  margin: 0;
  color: var(--muted);
}

.value-editor-panel label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 900;
}

.value-editor-panel input,
.value-editor-panel select,
.value-editor-panel textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
  color: var(--ink);
  font: inherit;
}

.value-editor-panel textarea {
  resize: vertical;
}

.value-checkbox {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.value-checkbox input {
  width: auto;
}

.value-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
}

.checkbox-line input {
  width: auto;
}

.staffing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.staffing-grid legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.walkthrough-shell {
  display: grid;
  gap: 18px;
}

.walkthrough-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow);
}

.compact-form-panel {
  margin-bottom: 10px;
  padding: 0;
  overflow: hidden;
}

.compact-form-panel summary,
.staff-sessions summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.compact-form-panel summary::-webkit-details-marker,
.staff-sessions summary::-webkit-details-marker {
  display: none;
}

.compact-form-panel summary span,
.staff-sessions summary span {
  font-size: 16px;
  font-weight: 900;
}

.compact-form-panel summary small,
.staff-sessions summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.compact-form-panel[open] summary,
.staff-sessions[open] summary {
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.staff-panel {
  display: grid;
  gap: 10px;
}

.staff-console {
  display: grid;
  gap: 10px;
}

.staff-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.staff-kpi-strip article {
  display: grid;
  gap: 2px;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.staff-kpi-strip article strong {
  font-size: 18px;
  line-height: 1;
}

.staff-kpi-strip article span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.staff-table,
.staff-list,
.staff-session-list {
  display: grid;
  gap: 5px;
}

.staff-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.staff-table-head,
.staff-table-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) minmax(110px, .8fr) minmax(90px, .7fr) 64px;
  gap: 8px;
  align-items: center;
}

.staff-table-head {
  padding: 0 8px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.staff-table-row {
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
}

.staff-table-row .status-pill {
  padding: 4px 7px;
  font-size: 11px;
  line-height: 1.1;
}

.staff-select-row {
  width: 100%;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.staff-select-row.active,
.staff-select-row:hover {
  border-color: rgba(255, 130, 0, 0.75);
  box-shadow: inset 3px 0 0 var(--orange);
}

.staff-last-active {
  grid-column: 1 / -1;
}

.staff-table-row span,
.staff-table-row strong,
.staff-table-row small {
  min-width: 0;
}

.staff-table-row strong,
.staff-table-row small {
  display: block;
}

.staff-table-row small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-dossier {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(8, 31, 55, .96), rgba(4, 18, 34, .96));
  min-width: 0;
  font-size: 13px;
  overflow-wrap: normal;
  hyphens: manual;
}

.staff-id-card,
.staff-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.staff-id-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(120px, .4fr) minmax(145px, .46fr) auto 72px;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 130, 0, .28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 130, 0, .13), rgba(255, 255, 255, .035)),
    rgba(0, 31, 68, .3);
}

.staff-id-avatar {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 72px;
  height: 86px;
  border: 2px solid rgba(255, 130, 0, .75);
  border-radius: 8px;
  background: rgba(255, 255, 255, .95);
  color: #001f44;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
  overflow: hidden;
}

.staff-id-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-id-main,
.staff-id-meta {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.staff-id-main h3,
.staff-id-main p {
  margin: 0;
}

.staff-id-main h3 {
  overflow: hidden;
  color: #fff;
  font-size: 20px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-id-main span,
.staff-id-main small,
.staff-id-meta small,
.staff-card-actions span {
  color: var(--muted);
  font-size: 12px;
}

.staff-id-main p,
.staff-id-meta b,
.staff-id-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-id-main p,
.staff-id-meta b {
  color: #ffb15c;
  font-weight: 950;
}

.staff-id-meta {
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, .12);
}

.staff-id-actions {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 124px;
}

.staff-id-actions .button {
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  font-size: 12px;
}

.staff-photo-field {
  position: relative;
  grid-column: span 2;
}

.staff-photo-hint {
  align-self: end;
  grid-column: 1 / -1;
  color: rgba(248, 250, 252, .72);
  font-size: .78rem;
  line-height: 1.35;
}

.staff-photo-field input[type="file"] {
  min-width: 0;
  font-size: 12px;
}

.staff-badge-panel .form-message {
  margin-top: 8px;
}

.staff-badge-ops {
  margin-top: 10px;
}

.badge-ops-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.badge-ops-grid h3 {
  margin: 0 0 8px;
  color: #ffb15c;
  font-size: 14px;
}

.badge-queue-list {
  display: grid;
  gap: 7px;
}

.badge-queue-list article {
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 7px;
  background: rgba(255, 255, 255, .035);
}

.badge-queue-list strong {
  color: #f8fafc;
  font-size: 13px;
}

.badge-queue-list span,
.badge-queue-list small {
  color: rgba(248, 250, 252, .72);
  font-size: 12px;
}

@media (max-width: 860px) {
  .badge-ops-grid {
    grid-template-columns: 1fr;
  }
}

.branch-access-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 130, 0, .28);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(8, 31, 55, .92), rgba(4, 18, 34, .94));
}

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

.access-mini-list,
.access-log-list {
  display: grid;
  gap: 7px;
}

.access-mini-list article,
.access-log-list span {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 7px;
  background: rgba(255, 255, 255, .035);
}

.access-mini-list strong,
.access-log-list b {
  color: #ffb15c;
}

.access-mini-list span,
.access-mini-list small,
.access-log-list small {
  color: rgba(248, 250, 252, .74);
  font-size: .82rem;
}

.digital-pass-row {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 138, 0, .24);
  border-radius: 8px;
  background: rgba(255, 138, 0, .08);
}

.digital-pass-row b {
  color: #ffb15c;
  font-size: .78rem;
  letter-spacing: 0;
}

.digital-pass-row .plain-btn {
  justify-self: start;
  min-height: 30px;
  padding: 6px 9px;
  font-size: .76rem;
}

.workorder-access-card {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  padding: 11px;
  border: 1px solid rgba(255, 138, 0, .28);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 138, 0, .10), rgba(8, 31, 55, .86));
}

.workorder-access-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  color: #fff;
  font-weight: 950;
}

.workorder-access-card > summary small,
.workorder-access-card p,
.workorder-access-head span,
.workorder-access-head small,
.workorder-access-points small {
  color: rgba(247, 239, 229, .72);
}

.workorder-access-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.workorder-access-window {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(120px, .8fr));
  gap: 7px;
  margin: 9px 0;
}

.workorder-access-window span,
.workorder-access-restricted,
.workorder-access-scope {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .055);
}

.workorder-access-window span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  color: rgba(247, 239, 229, .72);
  font-size: .78rem;
}

.workorder-access-window strong,
.workorder-access-window b {
  color: #fff;
  font-size: .86rem;
}

.workorder-access-window.is-active span:first-child {
  border-color: rgba(96, 211, 148, .42);
  background: rgba(41, 141, 91, .18);
}

.workorder-access-window.is-waiting span:first-child {
  border-color: rgba(255, 177, 92, .48);
  background: rgba(255, 138, 0, .12);
}

.workorder-access-window.is-revoked span:first-child {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .045);
}

.workorder-access-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.workorder-access-head strong {
  color: #fff;
}

.workorder-access-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.workorder-access-points span {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .055);
}

.workorder-access-points b {
  color: #ffb15c;
}

.workorder-access-scope {
  margin: 0 0 8px;
  padding: 8px 9px;
  font-size: .86rem;
}

.workorder-access-scope strong {
  color: #ffb15c;
}

.workorder-access-restricted {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 7px 8px;
}

.workorder-access-restricted strong {
  color: rgba(247, 239, 229, .9);
  font-size: .78rem;
}

.workorder-access-restricted small {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: rgba(247, 239, 229, .66);
  font-size: .72rem;
}

.workorder-access-history {
  display: grid;
  gap: 4px;
  padding: 7px 8px;
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.workorder-access-history small {
  color: rgba(247, 239, 229, .70);
}

.workorder-hardware-card {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  padding: 11px;
  border: 1px solid rgba(125, 211, 252, .28);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(14, 165, 233, .11), rgba(8, 31, 55, .86));
}

.workorder-hardware-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  color: #fff;
  font-weight: 950;
}

.workorder-hardware-card > summary small,
.workorder-hardware-card .form-message,
.workorder-hardware-list span,
.workorder-hardware-list small {
  color: rgba(247, 239, 229, .72);
}

.workorder-hardware-assignment,
.workorder-hardware-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.workorder-hardware-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workorder-hardware-assignment span,
.workorder-hardware-strip span {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, .055);
  color: rgba(247, 239, 229, .72);
  font-size: .78rem;
}

.workorder-hardware-assignment strong,
.workorder-hardware-strip strong {
  color: #fff;
  font-size: .84rem;
}

.workorder-hardware-list {
  display: grid;
  gap: 7px;
}

.workorder-hardware-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, .045);
}

.workorder-hardware-list article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.workorder-hardware-list strong {
  color: #fff;
}

.workorder-hardware-list b {
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(125, 211, 252, .13);
  color: #bae6fd;
  font-size: .75rem;
  white-space: nowrap;
}

.customer-access-consent-card {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  padding: 11px;
  border: 1px solid rgba(34, 197, 94, .28);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(34, 197, 94, .09), rgba(8, 31, 55, .82));
}

.customer-access-consent-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  color: #fff;
  font-weight: 950;
}

.customer-access-consent-card > summary small,
.customer-access-consent-card .form-message,
.customer-access-point-list small {
  color: rgba(247, 239, 229, .72);
}

.customer-access-consent-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.customer-access-consent-grid span,
.customer-access-point-list span {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, .055);
  color: rgba(247, 239, 229, .74);
  font-size: .78rem;
}

.customer-access-consent-grid strong,
.customer-access-point-list b {
  color: #fff;
}

.customer-access-point-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 7px;
}

.access-issue-form {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) auto;
  gap: 7px;
  align-items: start;
}

.access-issue-form input {
  min-height: 34px;
}

.access-issue-form .form-message {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .access-issue-form,
  .workorder-access-window,
  .workorder-access-head {
    grid-template-columns: 1fr;
  }
}

.inline-access-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.inline-access-form label {
  display: grid;
  gap: 3px;
  color: rgba(248, 250, 252, .72);
  font-size: .78rem;
  font-weight: 800;
}

.inline-access-form input,
.inline-access-form select {
  min-height: 34px;
}

.inline-access-form .button {
  align-self: end;
}

.inline-access-form .access-pass-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-body .branch-mini-metrics span,
.admin-body .branch-stats article,
.admin-body .solo-task-grid button,
.admin-body .solo-panel {
  border-color: rgba(255, 130, 0, .24) !important;
  background: linear-gradient(145deg, rgba(10, 36, 63, .92), rgba(6, 20, 38, .94)) !important;
  color: rgba(248, 250, 252, .9) !important;
}

.admin-body .branch-mini-metrics b,
.admin-body .branch-stats strong,
.admin-body .solo-task-grid b,
.admin-body .solo-panel strong {
  color: #ffb15c !important;
}

.admin-body .branch-stats span,
.admin-body .solo-task-grid span,
.admin-body .solo-panel span {
  color: rgba(248, 250, 252, .72) !important;
}

.admin-body .branch-grid {
  grid-template-columns: minmax(220px, .42fr) minmax(520px, 1.58fr) !important;
  align-items: start;
}

.admin-body .branch-list {
  padding: 10px !important;
}

.admin-body .branch-mini-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.admin-body .branch-access-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.admin-body .inline-access-form {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

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

.staff-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 7px;
}

.staff-form-grid label:nth-child(5) {
  grid-column: span 1;
}

.staff-card-form label,
.staff-card-form fieldset {
  min-width: 0;
}

.staff-card-form label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: normal;
  hyphens: manual;
}

.staff-card-form input,
.staff-card-form select,
.staff-card-form textarea {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  font-size: 13px;
}

.staff-onboarding-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(74px, 1fr)) auto auto;
  gap: 6px;
  align-items: stretch;
}

.staff-onboarding-step {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .055);
}

.staff-onboarding-step b {
  color: #fff;
  font-size: 11px;
  line-height: 1.15;
}

.staff-onboarding-step small {
  overflow: hidden;
  color: rgba(255, 255, 255, .72);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-onboarding-step.done {
  border-color: rgba(41, 171, 95, .45);
}

.staff-onboarding-step.todo {
  border-color: rgba(255, 128, 0, .55);
}

.staff-invite-link {
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgba(255, 128, 0, .35);
  border-radius: 8px;
  background: rgba(255, 128, 0, .12);
  color: #fff;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.staff-access-panel {
  border-color: rgba(255, 128, 0, .22);
}

.staff-access-grid {
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
}

.staff-access-switches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 10px;
  margin: 8px 0;
}

.staff-access-switches .checkbox-line {
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
}

.staff-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 7px;
}

.staff-shortcut-grid label {
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
}

.staff-shortcut-grid span {
  overflow: hidden;
  color: rgba(238, 245, 251, .74);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-shortcut-grid input {
  font-weight: 950;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .staff-onboarding-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-onboarding-strip .button {
    width: 100%;
  }

  .staff-access-grid,
  .staff-access-switches,
  .staff-shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-id-card {
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .staff-id-meta,
  .staff-id-actions {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
  }

  .staff-id-avatar {
    grid-column: 2;
    grid-row: 1;
    width: 64px;
    height: 76px;
  }

  .staff-id-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.staff-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.staff-split fieldset {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.staff-split legend {
  padding: 0 4px;
  font-weight: 900;
}

.checkbox-line {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 7px !important;
  align-items: center;
}

.checkbox-line input {
  width: auto;
}

.staff-document-list,
.staff-activity-list {
  display: grid;
  gap: 6px;
}

.staff-document-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(145px, 0.65fr) minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.staff-subpanel {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .035);
  min-width: 0;
}

.staff-subpanel summary {
  cursor: pointer;
  padding: 7px 9px;
  color: #ffb15c;
  font-size: 12px;
  font-weight: 900;
  list-style-position: inside;
}

.staff-subpanel > div {
  padding: 8px;
  border-top: 1px solid var(--line);
}

.staff-activity-list span {
  display: grid;
  gap: 2px;
}

.walkthrough-head h1,
.walkthrough-head p {
  margin: 0;
}

.walkthrough-head h1 {
  margin-bottom: 8px;
  font-size: 34px;
}

.walkthrough-head p:not(.eyebrow) {
  color: var(--muted);
}

.walkthrough-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.walkthrough-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
}

.walkthrough-steps {
  display: grid;
  gap: 8px;
}

.walkthrough-steps button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  text-align: left;
  cursor: pointer;
}

.walkthrough-steps button.active {
  border-color: var(--orange);
  box-shadow: inset 3px 0 0 var(--orange);
}

.walkthrough-steps b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: white;
  background: var(--navy);
}

.walkthrough-steps button.active b {
  background: var(--orange);
}

.walkthrough-stage {
  min-height: 430px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow);
}

.walk-card {
  display: none;
  gap: 18px;
  padding: 30px;
}

.walk-card.active {
  display: grid;
}

.walk-card h2 {
  margin: 0;
  font-size: 30px;
}

.walk-card p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.mock-panel,
.mock-grid {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.mock-panel span,
.mock-grid span {
  color: var(--muted);
}

.mock-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pro-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.pro-list article {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
}

.pro-list span, .pro-list small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.pro-card-compact > strong,
.pro-card-head strong {
  font-size: 15px;
}

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

.pro-card-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pro-meta-line,
.pro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pro-meta-line span,
.mini-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fbfcfd;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.mini-status.green {
  color: #0f766e;
  border-color: rgba(15, 118, 110, 0.25);
  background: #f0fdfa;
}

.mini-status.orange {
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.25);
  background: #fffbeb;
}

.mini-status.red {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.25);
  background: #fef2f2;
}

.community-workspace {
  display: grid;
  gap: 14px;
}

.community-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.community-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.community-head p {
  margin: 0;
  color: var(--muted);
}

.community-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(86px, 1fr));
  gap: 8px;
  min-width: min(520px, 100%);
}

.community-table {
  display: grid;
  gap: 8px;
}

.community-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr minmax(190px, 1.4fr) 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  background: white;
}

.community-row.green { border-left-color: #16a34a; }
.community-row.red { border-left-color: #dc2626; }

.community-main {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.community-row strong,
.community-row small,
.community-row p {
  display: block;
  margin: 0;
}

.community-row small,
.community-row p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

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

.customer-head h1 {
  margin: 0 0 6px;
  font-size: 28px;
}

.customer-head p {
  margin: 0;
  color: var(--muted);
}

.customer-request-list {
  display: grid;
  gap: 16px;
}

.customer-request-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow);
}

.portal-shell {
  max-width: 760px;
  margin: 0 auto 24px;
}

.portal-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.portal-tabs button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.portal-tabs button.active {
  border-color: var(--orange);
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--orange);
}

.portal-panel {
  max-width: none;
  margin: 0;
}

.portal-divider {
  height: 1px;
  margin: 22px 0;
  background: var(--line);
}

.portal-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.pro-value {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.pro-value strong {
  font-size: 22px;
}

.pro-value span {
  color: var(--muted);
  line-height: 1.45;
}

.payment-shell {
  width: min(720px, 100%);
  margin: 0 auto;
}

.payment-panel {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow);
}

.payment-panel h1 {
  margin-bottom: 12px;
  font-size: 38px;
}

.payment-lead {
  color: var(--muted);
  line-height: 1.5;
}

.payment-summary {
  display: grid;
  gap: 10px;
  margin: 22px 0;
}

.payment-summary p {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 14px;
  border-radius: 7px;
  background: var(--soft);
  color: var(--muted);
}

.payment-summary strong {
  color: var(--ink);
}

.portal-panel h2 {
  font-size: 22px;
}

.portal-request-form {
  padding: 18px;
}

.toast,
.inline-toast {
  padding: 13px 16px;
  border-radius: 7px;
  background: #e7f5f4;
  color: var(--teal);
  font-weight: 800;
}

.incident-banner {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 8px;
  background: #fff7ed;
  color: var(--ink);
}

.incident-banner.lockdown {
  border-color: rgba(220, 38, 38, 0.45);
  background: #fef2f2;
}

.incident-banner span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: var(--shadow);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.smart-intake {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
  padding: 14px;
  display: grid;
  gap: 10px;
  position: relative;
}

.smart-intake-support {
  background: rgba(6, 26, 51, 0.04);
  border-style: dashed;
}

.smart-intake-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.smart-intake-head strong {
  color: var(--ink);
  font-size: 15px;
}

.smart-intake-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.smart-chat-log {
  display: grid;
  gap: 8px;
  max-height: 240px;
  overflow: auto;
  padding: 4px;
}

.smart-chat-log article {
  width: min(86%, 620px);
  padding: 9px 10px;
  border: 1px solid rgba(6, 26, 51, 0.12);
  border-radius: 8px;
  background: #fff;
}

.smart-chat-log article.user {
  justify-self: end;
  background: #eef5fb;
}

.smart-chat-log article.assistant {
  justify-self: start;
}

.smart-chat-log strong {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
}

.smart-chat-log p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.smart-chat-input textarea {
  min-height: 72px;
}

.smart-chat-input.hidden {
  display: none;
}

.compact-smart {
  padding: 10px;
}

.smart-intake-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.smart-intake-actions span,
.smart-advice span,
.smart-advice small {
  color: var(--muted);
  font-weight: 800;
}

.smart-advice {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: grid;
  gap: 6px;
}

.smart-safety-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(190, 18, 60, 0.24);
  border-radius: 8px;
  background: #fff1f2;
  color: #3f1020;
}

.smart-safety-layer {
  position: sticky;
  top: 10px;
  z-index: 8;
}

.smart-safety-layer.hidden {
  display: none;
}

.smart-safety-overlay {
  padding: 16px;
  border-width: 2px;
  border-color: rgba(190, 18, 60, 0.54);
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  box-shadow: 0 18px 44px rgba(63, 16, 32, 0.20);
}

.smart-intake-safety-active .smart-chat-log,
.smart-intake-safety-active .smart-chat-input,
.smart-intake-safety-active .smart-intake-actions,
.smart-intake-safety-active .smart-intake-result {
  opacity: 0.38;
}

.smart-safety-panel strong {
  color: #7f1d1d;
}

.smart-safety-panel p {
  margin: 0;
  color: #4a1d1d;
}

.smart-safety-panel ol {
  margin: 0;
  padding-left: 20px;
}

.smart-safety-panel li {
  color: #4a1d1d;
  font-weight: 800;
}

.admin-smart-advice {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(255, 128, 0, 0.28);
  border-radius: 8px;
  background: rgba(4, 18, 38, 0.78);
  color: #f8fafc;
}

.assistant-next-question {
  display: grid;
  gap: 4px;
  margin: 8px 0;
  padding: 10px;
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  background: rgba(255, 128, 0, 0.1);
}

.assistant-next-question b {
  color: #fff;
  font-size: 1rem;
}

.assistant-next-question small {
  color: var(--orange);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.smart-advice ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(248, 250, 252, 0.78);
}

.project-parts-preview,
.project-reference {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(255, 128, 0, 0.28);
  border-radius: 8px;
  background: rgba(255, 128, 0, 0.08);
}

.project-parts-preview p,
.project-reference {
  margin: 0;
}

.project-parts-preview p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
}

.project-parts-preview span,
.project-reference span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.quiet-link {
  color: var(--muted);
  font-weight: 800;
  text-decoration: none;
  padding: 8px 4px;
}

.quiet-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

.team-note {
  color: var(--muted);
  font-weight: 800;
  align-self: center;
  font-size: 13px;
}

.team-row {
  grid-template-columns: minmax(150px, 1.1fr) minmax(190px, 1.4fr) minmax(130px, 0.8fr) minmax(150px, 0.8fr) minmax(190px, 1fr);
}

.inline-toast.error {
  color: #981923;
  background: #ffe8ea;
}

.app-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  max-width: min(360px, calc(100vw - 36px));
  box-shadow: 0 18px 48px rgba(2, 20, 42, 0.18);
}

.notification-preferences-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 20, 42, 0.38);
}

.notification-preferences-panel {
  display: grid;
  gap: 14px;
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  box-shadow: 0 24px 70px rgba(2, 20, 42, 0.22);
}

.notification-preferences-panel p {
  margin: 0;
  color: var(--muted);
}

.notification-preference-list {
  display: grid;
  gap: 8px;
}

.notification-preference-section {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.notification-preference-section summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.notification-preference-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
  color: var(--ink);
  font-weight: 800;
}

.notification-preference-row input {
  width: 18px;
  height: 18px;
}

.readiness-panel {
  display: grid;
  grid-template-columns: minmax(240px, .75fr) minmax(320px, 1.25fr);
  gap: 10px;
  align-items: stretch;
}

.readiness-status,
.readiness-step,
.empty-state-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.readiness-status {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px;
  border-left: 4px solid var(--orange);
}

.readiness-status strong {
  font-size: 18px;
}

.readiness-status span,
.readiness-step small,
.empty-state-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.readiness-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.readiness-step {
  display: grid;
  gap: 4px;
  padding: 12px;
  min-height: 74px;
}

.readiness-step strong {
  font-size: 16px;
}

.readiness-step.done {
  border-color: #bfe5cc;
  background: #f3fbf6;
}

.readiness-step.warning {
  border-color: #ffd9a9;
  background: #fff8ef;
}

.readiness-step.action {
  border-color: #b9d6ff;
  background: #f2f7ff;
}

.compact-action-list {
  display: grid;
  gap: 8px;
}

.compact-action-list a {
  display: grid;
  grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.compact-action-list span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.empty-state-card {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 14px;
}

.professional-cockpit,
.customer-cockpit {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(4, minmax(0, .85fr));
  gap: 10px;
}

.professional-regie-brand {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(184, 207, 230, 0.16);
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 130, 0, 0.16), transparent 32%),
    linear-gradient(135deg, rgba(13, 35, 58, 0.95), rgba(4, 18, 32, 0.96));
  color: #f7efe5;
}

.professional-regie-logo {
  display: grid;
  place-items: center;
  width: 74px;
  height: 58px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  overflow: hidden;
}

.professional-regie-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
}

.professional-regie-logo strong {
  color: #061a33;
  font-size: 28px;
}

.professional-regie-brand small,
.professional-regie-brand span {
  color: rgba(247, 239, 229, 0.68);
  font-size: 12px;
  font-weight: 850;
}

.professional-regie-brand h2 {
  margin: 2px 0;
  color: #fff;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
}

.powered-by-profix {
  display: none;
  justify-items: end;
  gap: 4px;
  min-width: 92px;
}

.powered-by-profix span {
  font-size: 10px;
  text-transform: uppercase;
}

.powered-by-profix img {
  width: 86px;
  max-height: 28px;
  object-fit: contain;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

.professional-regiecentrum {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(184, 207, 230, 0.14);
  border-radius: 10px;
  background: rgba(8, 26, 44, 0.88);
}

.business-operations-director {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(184, 207, 230, 0.18);
  border-radius: 12px;
  background: rgba(8, 26, 44, 0.9);
}

.business-operations-director.warning,
.business-operations-director.danger {
  border-color: rgba(255, 130, 0, 0.38);
}

.business-operations-head,
.business-operations-title,
.business-operations-action,
.business-domain-chip {
  display: grid;
  min-width: 0;
}

.business-operations-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.business-operations-title {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.business-operations-title > span,
.business-operations-action > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #ff8a00;
  background: rgba(255, 130, 0, 0.14);
}

.business-operations-title small,
.business-operations-title em,
.business-operations-action small,
.business-operations-action em,
.business-domain-chip small {
  display: block;
  color: rgba(247, 239, 229, 0.72);
  font-style: normal;
  line-height: 1.35;
}

.business-operations-title strong {
  display: block;
  color: #fff;
  font-size: clamp(16px, 1.2vw, 20px);
}

.business-operations-score {
  min-width: 78px;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
}

.business-operations-score strong {
  display: block;
  color: #fff;
  font-size: 24px;
  line-height: 1;
}

.business-operations-score span {
  display: block;
  margin-top: 3px;
  color: rgba(247, 239, 229, 0.72);
  font-size: 11px;
}

.business-operations-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.business-operations-metrics article {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.055);
}

.business-operations-metrics strong,
.business-operations-metrics span {
  display: block;
}

.business-operations-metrics strong {
  color: #fff;
  font-size: 18px;
}

.business-operations-metrics span {
  color: rgba(247, 239, 229, 0.72);
  font-size: 12px;
}

.business-operations-costguard,
.business-operations-tenant-mail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(184, 207, 230, 0.14);
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.045);
}

.business-operations-costguard > span,
.business-operations-tenant-mail > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #ff8a00;
  background: rgba(255, 130, 0, 0.14);
}

.business-operations-costguard strong,
.business-operations-tenant-mail strong,
.business-operations-staff-queue strong {
  display: block;
  color: #fff;
}

.business-operations-costguard small,
.business-operations-costguard em,
.business-operations-tenant-mail small,
.business-operations-staff-queue small {
  display: block;
  color: rgba(247, 239, 229, 0.72);
  font-style: normal;
  line-height: 1.35;
}

.business-operations-costguard b,
.business-operations-tenant-mail b {
  padding: 5px 8px;
  border-radius: 999px;
  color: #ffbd73;
  background: rgba(255, 130, 0, 0.13);
  font-size: 12px;
  white-space: nowrap;
}

.business-operations-staff-queue {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(184, 207, 230, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.business-operations-staff-queue header,
.business-operations-staff-queue article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.business-operations-staff-queue article {
  padding: 9px;
  border: 1px solid rgba(184, 207, 230, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
}

.business-operations-staff-queue article.high,
.business-operations-staff-queue article.medium {
  border-color: rgba(255, 130, 0, 0.36);
}

.business-operations-staff-queue nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.business-operations-staff-queue nav a {
  padding: 7px 9px;
  border: 1px solid rgba(255, 130, 0, 0.28);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 130, 0, 0.12);
  font-size: 12px;
  font-weight: 800;
}

.business-operations-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 9px;
}

.business-operations-action {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 86px;
  padding: 11px;
  border: 1px solid rgba(184, 207, 230, 0.14);
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.045);
}

.business-operations-action strong,
.business-domain-chip strong {
  display: block;
  color: #fff;
}

.business-operations-action b,
.business-domain-chip b {
  padding: 5px 8px;
  border-radius: 999px;
  color: #ffbd73;
  background: rgba(255, 130, 0, 0.13);
  font-size: 12px;
  white-space: nowrap;
}

.business-operations-action.high,
.business-operations-action.medium,
.business-domain-chip.high,
.business-domain-chip.medium {
  border-color: rgba(255, 130, 0, 0.36);
}

.business-operations-domains {
  border: 1px solid rgba(184, 207, 230, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.business-operations-domains summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  color: #fff;
}

.business-operations-domains summary span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.business-operations-domains > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  padding: 0 10px 10px;
}

.business-domain-chip {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(184, 207, 230, 0.12);
  border-radius: 9px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.business-domain-chip > svg,
.business-domain-chip > i {
  color: #ff8a00;
}

@media (max-width: 720px) {
  .business-operations-head,
  .business-operations-title,
  .business-operations-costguard,
  .business-operations-tenant-mail,
  .business-operations-staff-queue header,
  .business-operations-staff-queue article,
  .business-operations-action,
  .business-domain-chip {
    grid-template-columns: 1fr;
  }

  .business-operations-score,
  .business-operations-costguard b,
  .business-operations-tenant-mail b,
  .business-operations-action b,
  .business-domain-chip b {
    justify-self: start;
  }

  .business-operations-staff-queue nav {
    justify-content: flex-start;
  }

  .business-operations-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.professional-regie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px;
}

.professional-regie-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(184, 207, 230, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
}

.professional-regie-item strong,
.professional-regie-item b,
.professional-regie-item small {
  display: block;
}

.professional-regie-item strong {
  color: #fff;
  font-size: 14px;
}

.professional-regie-item small {
  margin-top: 3px;
  color: rgba(247, 239, 229, 0.68);
  font-size: 12px;
  line-height: 1.35;
}

.professional-regie-item b {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.13);
  color: #ffbd73;
  font-size: 12px;
  white-space: nowrap;
}

.professional-regie-item.ok {
  border-color: rgba(65, 209, 125, 0.22);
}

.professional-regie-item.attention {
  border-color: rgba(139, 198, 255, 0.28);
}

.professional-regie-item.warning,
.professional-regie-item.danger {
  border-color: rgba(255, 130, 0, 0.42);
  background: rgba(255, 130, 0, 0.09);
}

.professional-regie-item.danger b {
  background: rgba(255, 95, 87, 0.18);
  color: #ffd1cc;
}

.professional-servicecenter-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  margin: 0 0 18px;
  border: 1px solid rgba(255, 139, 18, 0.3);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 139, 18, 0.12), rgba(6, 25, 44, 0.95));
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.professional-servicecenter-head {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.professional-servicecenter-head small,
.professional-servicecenter-head span,
.professional-servicecenter-ticket span,
.professional-servicecenter-ticket small {
  color: rgba(236, 244, 252, 0.74);
}

.professional-servicecenter-head strong {
  display: block;
  color: #ffffff;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
}

.professional-servicecenter-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 8px;
}

.professional-servicecenter-metrics span {
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
}

.professional-servicecenter-metrics b {
  color: #ff9f33;
  font-size: 1.25rem;
}

.professional-servicecenter-lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.professional-servicecenter-ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-height: 94px;
  padding: 13px;
  border: 1px solid rgba(159, 190, 220, 0.2);
  border-radius: 12px;
  background: rgba(8, 31, 53, 0.9);
}

.professional-servicecenter-ticket strong,
.professional-servicecenter-ticket b {
  color: #ffffff;
}

.professional-servicecenter-ticket b {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.professional-servicecenter-ticket.warning {
  border-color: rgba(255, 184, 77, 0.42);
}

.professional-servicecenter-ticket.danger {
  border-color: rgba(255, 92, 92, 0.5);
  background: linear-gradient(135deg, rgba(117, 28, 28, 0.55), rgba(8, 31, 53, 0.94));
}

.professional-servicecenter-ticket.danger b {
  background: rgba(255, 92, 92, 0.18);
  color: #ffd3cf;
}

@media (max-width: 760px) {
  .professional-regie-brand {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .professional-regie-logo {
    width: 58px;
    height: 48px;
  }

  .powered-by-profix {
    grid-column: 1 / -1;
    justify-items: start;
    grid-template-columns: auto auto;
    align-items: center;
  }

  .professional-regie-brand h2 {
    font-size: 22px;
  }

  .professional-servicecenter-head,
  .professional-servicecenter-ticket {
    grid-template-columns: 1fr;
  }

  .professional-servicecenter-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.professional-cockpit article,
.customer-cockpit article,
.compact-business-card,
.professional-next-action,
.customer-next-action {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.professional-cockpit article,
.customer-cockpit article,
.professional-next-action,
.customer-next-action {
  padding: 14px;
}

.professional-assistant-greeting {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-color: rgba(255, 143, 23, 0.38) !important;
  background: linear-gradient(135deg, rgba(255, 143, 23, 0.14), rgba(7, 28, 49, 0.7)) !important;
}

.professional-assistant-greeting div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.professional-assistant-greeting small {
  color: #ffb15a;
  font-weight: 900;
  font-size: 12px;
}

.professional-assistant-greeting strong {
  font-size: 17px;
}

.professional-assistant-greeting span {
  color: var(--pf24-muted);
}

.customer-assistant-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 143, 23, 0.32);
  border-radius: var(--pf24-radius);
  background: linear-gradient(135deg, rgba(255, 143, 23, 0.12), rgba(7, 28, 49, 0.68));
  color: var(--pf24-text);
}

.customer-assistant-greeting div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.customer-assistant-greeting small {
  color: #ffb15a;
  font-weight: 900;
  font-size: 12px;
}

.customer-assistant-greeting strong {
  font-size: 17px;
}

.customer-assistant-greeting span {
  color: var(--pf24-muted);
}

.professional-next-action,
.customer-next-action {
  display: grid;
  gap: 4px;
  color: var(--ink);
  background: #f0fdfa;
  border-color: rgba(15, 118, 110, .25);
}

.professional-next-action.warning,
.customer-next-action.warning {
  background: #fffbeb;
  border-color: rgba(180, 83, 9, .35);
}

.professional-next-action.neutral,
.customer-next-action.neutral {
  background: #fbfcfd;
  border-color: var(--line);
}

.professional-next-action small,
.customer-next-action small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.professional-cockpit strong,
.customer-cockpit strong {
  display: block;
  font-size: 24px;
}

.professional-cockpit span,
.customer-cockpit span,
.business-shortcuts span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.business-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
}

.business-shortcuts a {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
  color: var(--blue);
  font-weight: 900;
}

.business-shortcuts strong {
  color: var(--blue);
  font-size: 13px;
}

.portal-section-nav,
.professional-section-nav {
  position: sticky;
  top: 8px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 24px rgba(0, 37, 73, .07);
}

.portal-nav-links {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.portal-section-nav a,
.professional-section-nav a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.portal-nav-count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 37, 73, .08);
  color: var(--blue);
  font-size: 12px;
  line-height: 1;
}

.portal-section-nav a.active .portal-nav-count,
.professional-section-nav a.active .portal-nav-count {
  background: var(--orange);
  color: #fff;
}

.portal-sidebar-logout {
  width: 100%;
  min-height: 34px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 128, 0, 0.35);
  border-radius: 7px;
  background: rgba(255, 128, 0, 0.10);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.portal-section-nav .portal-sidebar-logout,
.professional-section-nav .portal-sidebar-logout,
.admin-tabs .portal-sidebar-logout {
  color: var(--blue);
  background: #fff7ed;
}

.portal-sidebar-logout:hover {
  border-color: rgba(255, 128, 0, 0.65);
  background: rgba(255, 128, 0, 0.18);
}

.portal-view-hidden {
  display: none !important;
}

.portal-section-nav a.active,
.professional-section-nav a.active,
.business-shortcuts a.active,
.readiness-step.active,
.customer-next-action.active,
.professional-next-action.active {
  border-color: rgba(255, 128, 0, 0.45);
  background: #fff3e5;
  color: var(--blue);
}

@media (min-width: 981px) {
  .portal-active .dashboard {
    width: min(1280px, 100%);
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
  }

  .portal-active .dashboard > * {
    grid-column: 2;
  }

  .portal-active .portal-section-nav,
  .portal-active .professional-section-nav {
    grid-column: 1;
    grid-row: 1 / span 40;
    position: sticky;
    top: 82px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-self: start;
    gap: 6px;
    min-height: calc(100vh - 104px);
    padding: 8px;
    border-radius: 8px;
    box-shadow: none;
  }

  .portal-active .portal-nav-links {
    width: 100%;
    display: grid;
    gap: 6px;
  }

  .portal-active .portal-section-nav a,
  .portal-active .professional-section-nav a {
    justify-content: flex-start;
    min-height: 34px;
    padding: 8px 10px;
  }

  .portal-active .portal-sidebar-logout {
    align-self: end;
  }

  .portal-active .panel-head.customer-head {
    grid-column: 2;
  }
}

@media (min-width: 981px) {
  .admin-body #dashboard:not(.hidden) {
    width: min(1320px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
  }

  .admin-body #dashboard:not(.hidden) > * {
    grid-column: 2;
  }

  .admin-body #dashboard:not(.hidden) > .system-switch,
  .admin-body #dashboard:not(.hidden) > .admin-tabs {
    grid-column: 1;
    position: sticky;
    align-self: start;
    display: grid;
    width: 100%;
    overflow: visible;
    border-radius: 8px;
    box-shadow: none;
  }

  .admin-body #dashboard:not(.hidden) > .system-switch {
    top: 74px;
  }

  .admin-body #dashboard:not(.hidden) > .admin-tabs {
    top: 190px;
    min-height: calc(100vh - 210px);
  }

  .admin-body #dashboard:not(.hidden) > .system-switch span {
    margin: 0 0 4px;
  }

  .admin-body #dashboard:not(.hidden) > .system-switch a,
  .admin-body #dashboard:not(.hidden) > .system-switch button,
  .admin-body #dashboard:not(.hidden) > .admin-tabs button {
    justify-content: flex-start;
    width: 100%;
    min-height: 34px;
    text-align: left;
  }

  .admin-body #dashboard:not(.hidden) > .admin-tabs button.active {
    box-shadow: inset 3px 0 0 var(--orange), 0 1px 3px rgba(0, 31, 63, 0.08);
  }
}

@media (min-width: 981px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard {
    padding: 18px 22px 24px 246px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #dashboard > * {
    grid-column: 1 !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #dashboard > .admin-tabs {
    grid-column: auto !important;
  }
}

.customer-section,
.professional-section {
  scroll-margin-top: 78px;
}

.professional-foldout {
  padding: 0;
  overflow: hidden;
}

.professional-foldout > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  background: #fff;
}

.professional-foldout > summary::-webkit-details-marker {
  display: none;
}

.professional-foldout > summary span {
  min-width: 0;
}

.professional-foldout > summary strong,
.professional-foldout > summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.professional-foldout > summary strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}

.professional-foldout > summary small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.professional-foldout[open] > summary {
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.professional-foldout-body {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.planning-summary-strip,
.planning-integration-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.planning-summary-strip span,
.planning-integration-strip span {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(255, 122, 0, 0.22);
  border-radius: 8px;
  background: rgba(2, 30, 58, 0.06);
}

.planning-summary-strip strong,
.planning-integration-strip strong,
.planning-summary-strip small,
.planning-integration-strip small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-summary-strip strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.planning-summary-strip span,
.planning-integration-strip small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.planning-import-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
}

.planning-import-panel > summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-weight: 950;
}

.planning-import-panel > summary::-webkit-details-marker {
  display: none;
}

.planning-concept-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 0 12px 12px;
}

.planning-concept-form textarea {
  min-height: 112px;
  resize: vertical;
}

.planning-form-actions,
.planning-concept-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.planning-concept-row {
  grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 0.9fr) 76px 76px auto;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.planning-concept-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.planning-concept-actions:empty {
  min-height: 1px;
}

.planning-concept-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 2px;
}

.planning-concept-meta span {
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(255, 122, 0, 0.22);
  border-radius: 999px;
  background: rgba(255, 122, 0, 0.08);
  color: inherit;
  font-size: 11px;
  font-weight: 850;
}

.planning-warning-strip span {
  border-color: rgba(255, 196, 87, 0.42);
  background: rgba(255, 196, 87, 0.12);
}

.planning-concept-card {
  display: grid;
  gap: 7px;
}

.planning-concept-row span {
  min-width: 0;
}

.planning-concept-row strong,
.planning-concept-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-active #professional-planning.professional-foldout > summary,
.portal-active #professional-planning .planning-import-panel > summary,
.portal-active #professional-planning .planning-concept-row,
.portal-active #professional-planning .compact-table a {
  background: rgba(13, 24, 42, 0.82);
  color: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.14);
}

.portal-active #professional-planning.professional-foldout[open] > summary {
  background: rgba(13, 24, 42, 0.9);
}

.portal-active #professional-planning .planning-summary-strip span,
.portal-active #professional-planning .planning-integration-strip span,
.portal-active #professional-planning .planning-import-panel {
  background: rgba(13, 24, 42, 0.62);
  border-color: rgba(255, 122, 0, 0.34);
  color: rgba(255, 255, 255, 0.9);
}

.portal-active #professional-planning strong,
.portal-active #professional-planning small,
.portal-active #professional-planning .professional-foldout > summary strong,
.portal-active #professional-planning .professional-foldout > summary small {
  color: inherit;
}

.portal-active #professional-planning .planning-summary-strip strong,
.portal-active #professional-planning .planning-concept-row > span:nth-child(3) strong,
.portal-active #professional-planning .badge {
  color: #ff7a00;
}

.planning-command-center {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.95fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 122, 0, 0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(9, 27, 48, 0.94), rgba(16, 39, 65, 0.86));
}

.planning-command-main h3 {
  margin: 4px 0 6px;
  color: #ffffff;
  font-size: 22px;
}

.planning-command-main p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.planning-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.planning-command-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.planning-command-kpis span,
.planning-command-alerts span {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  padding: 9px 10px;
}

.planning-command-kpis strong {
  display: block;
  color: #ff9a2f;
  font-size: 20px;
}

.planning-command-kpis small,
.planning-command-alerts span {
  color: rgba(255, 255, 255, 0.76);
}

.planning-command-alerts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.planning-command-alerts.ok span {
  border-color: rgba(90, 214, 147, 0.32);
  color: #baf2d2;
}

.planning-quick-form {
  display: grid;
  gap: 10px;
}

.planning-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 9px;
}

.planning-quick-grid label,
.planning-quick-form label.wide {
  min-width: 0;
}

.planning-quick-grid label small {
  float: right;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.planning-quick-grid input,
.planning-quick-grid select,
.planning-quick-form textarea {
  width: 100%;
  min-width: 0;
}

.planning-bulk-lines {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  overflow: hidden;
}

.planning-bulk-lines > summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.planning-bulk-lines > summary::-webkit-details-marker {
  display: none;
}

.planning-bulk-lines > summary strong,
.planning-bulk-lines > summary span {
  font-weight: 950;
}

.planning-bulk-lines > summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.planning-bulk-lines label {
  display: block;
  padding: 10px;
}

.planning-quick-panel {
  border-color: rgba(255, 122, 0, 0.34) !important;
}

.planning-concept-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(5, 18, 34, 0.54);
  padding: 10px;
}

.planning-concept-card + .planning-concept-card {
  margin-top: 8px;
}

.planning-concept-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.planning-concept-meta span {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.76);
  padding: 5px 8px;
  font-size: 12px;
}

@media (max-width: 880px) {
  .planning-command-center {
    grid-template-columns: 1fr;
  }

  .planning-command-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .planning-command-kpis,
  .planning-quick-grid {
    grid-template-columns: 1fr;
  }
}

.rideshare-panel {
  border: 1px solid rgba(255, 122, 0, 0.22);
  border-radius: 8px;
  background: rgba(2, 13, 28, 0.48);
  overflow: hidden;
}

.rideshare-panel > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.rideshare-panel > summary::-webkit-details-marker {
  display: none;
}

.rideshare-panel > summary strong,
.rideshare-panel > summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rideshare-panel > summary b {
  color: #ff9a2f;
  font-size: 13px;
}

.rideshare-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 0 10px 8px;
}

.rideshare-summary span {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
}

.rideshare-summary strong,
.rideshare-summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rideshare-summary strong {
  color: #ff9a2f;
  font-size: 13px;
}

.rideshare-summary small {
  color: rgba(226, 236, 247, 0.76);
  font-size: 11px;
}

.rideshare-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1.2fr) repeat(2, minmax(95px, 0.6fr)) minmax(160px, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 0 10px 10px;
}

.rideshare-form label,
.rideshare-passengers {
  min-width: 0;
}

.rideshare-passengers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
}

.rideshare-passengers legend {
  padding: 0 4px;
  color: rgba(226, 236, 247, 0.78);
  font-size: 11px;
  font-weight: 900;
}

.rideshare-passengers label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 850;
}

.rideshare-order-hint {
  grid-column: 1 / -1;
  color: rgba(247, 239, 229, 0.68);
  font-size: 0.78rem;
}

.rideshare-pickup-option {
  cursor: grab;
  user-select: none;
}

.rideshare-pickup-option.dragging {
  opacity: 0.55;
  outline: 2px dashed rgba(255, 130, 0, 0.7);
}

.drag-handle {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 0.35rem;
  border-radius: 0.35rem;
  background: rgba(255, 130, 0, 0.16);
  color: #ffad4d;
  font-weight: 900;
}

.rideshare-form .form-message {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(226, 236, 247, 0.78);
}

.rideshare-next-stop,
.rideshare-warning {
  margin: 0 10px 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 122, 0, 0.24);
  border-radius: 7px;
  background: rgba(255, 122, 0, 0.09);
}

.rideshare-next-stop strong,
.rideshare-next-stop span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rideshare-next-stop strong,
.rideshare-warning {
  color: #ff9a2f;
  font-size: 12px;
  font-weight: 900;
}

.rideshare-next-stop span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 800;
}

.rideshare-passenger-actions {
  display: grid;
  gap: 7px;
  padding: 0 10px 10px;
}

.rideshare-return-button {
  justify-self: start;
}

.rideshare-passenger-card {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 92px 70px auto auto auto auto;
  gap: 7px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
}

.rideshare-passenger-card strong,
.rideshare-passenger-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rideshare-passenger-card label {
  display: inline-grid;
  grid-template-columns: auto 36px auto;
  gap: 4px;
  align-items: center;
  margin: 0;
  color: rgba(226, 236, 247, 0.82);
  font-size: 11px;
  font-weight: 900;
}

.rideshare-passenger-card input {
  min-width: 0;
}

.rideshare-passenger-card [data-not-joining-reason] {
  min-width: 90px;
}

.rideshare-auto {
  grid-template-columns: auto auto !important;
}

@media (max-width: 1100px) {
  .rideshare-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rideshare-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rideshare-passenger-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.capacity-pool-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.capacity-pool-summary span,
.capacity-pool-rules span,
.capacity-pool-row {
  border: 1px solid rgba(255, 122, 0, 0.28);
  border-radius: 8px;
  background: rgba(13, 24, 42, 0.72);
  color: rgba(255, 255, 255, 0.92);
}

.capacity-pool-summary span {
  min-width: 0;
  padding: 9px 10px;
}

.capacity-pool-summary strong,
.capacity-pool-summary small,
.capacity-pool-row strong,
.capacity-pool-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capacity-pool-summary strong,
.capacity-pool-row strong {
  color: #ff7a00;
  font-weight: 950;
}

.capacity-pool-summary small,
.capacity-pool-row small {
  color: rgba(226, 232, 240, 0.78);
  font-size: 12px;
}

.capacity-pool-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.capacity-pool-rules span {
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 850;
}

.capacity-pool-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.7fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
}

.capacity-pool-request-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.capacity-pool-request-form :where(input, button) {
  min-width: 0;
}

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

.capacity-pool-request-box,
.capacity-pool-request-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(255, 122, 0, 0.22);
  border-radius: 8px;
  background: rgba(9, 25, 43, 0.72);
  color: rgba(255, 255, 255, 0.9);
}

.capacity-pool-request-box {
  padding: 10px;
}

.capacity-pool-request-box > strong {
  color: #fff;
  font-size: 15px;
}

.capacity-pool-request-card {
  padding: 9px;
  background: rgba(255, 255, 255, 0.045);
}

.capacity-pool-request-card > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.capacity-pool-request-card strong {
  color: #ffb15a;
}

.capacity-pool-request-card small,
.capacity-pool-request-card p {
  margin: 0;
  color: rgba(226, 232, 240, 0.76);
  font-size: 12px;
  line-height: 1.35;
}

.capacity-pool-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.capacity-pool-editor textarea {
  min-height: 92px;
}

.incident-live-location-control {
  display: grid;
  gap: 6px;
}

.incident-live-location-control .button {
  width: 100%;
  justify-content: center;
}

.incident-location-hint {
  margin: -2px 0 2px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 130, 0, 0.2);
  border-radius: 7px;
  background: rgba(255, 130, 0, 0.075);
  color: rgba(247, 239, 229, 0.82) !important;
  font-size: 12px !important;
  line-height: 1.35;
}

@media (max-width: 880px) {
  .capacity-pool-summary,
  .capacity-pool-request-grid,
  .capacity-pool-row,
  .capacity-pool-request-form {
    grid-template-columns: 1fr;
  }
}

.traffic-summary-strip,
.traffic-project-meta,
.traffic-cert-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.traffic-summary-strip span,
.traffic-project-card,
.traffic-project-meta span,
.traffic-cert-strip span {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(13, 24, 42, 0.74);
  color: rgba(255, 255, 255, 0.92);
}

.traffic-summary-strip span {
  display: grid;
  gap: 2px;
  min-width: 150px;
  padding: 10px 12px;
}

.traffic-summary-strip strong {
  color: #ff7a00;
  font-size: 20px;
}

.traffic-project-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.traffic-project-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.traffic-project-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.traffic-project-head strong,
.traffic-project-head b {
  color: #fff;
}

.traffic-project-head small,
.traffic-project-card p,
.traffic-concept-list small {
  color: rgba(247, 239, 229, 0.74);
}

.traffic-project-meta span,
.traffic-cert-strip span {
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
}

.traffic-acceptance-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(36, 181, 111, 0.28);
  border-radius: 8px;
  background: rgba(36, 181, 111, 0.08);
}

.traffic-acceptance-strip.attention {
  border-color: rgba(255, 139, 26, 0.32);
  background: rgba(255, 139, 26, 0.08);
}

.traffic-acceptance-strip span {
  display: grid;
  min-width: 170px;
  margin-right: auto;
}

.traffic-acceptance-strip strong {
  color: #fff;
}

.traffic-acceptance-strip small {
  color: rgba(247, 239, 229, 0.72);
}

.traffic-acceptance-strip b,
.traffic-acceptance-strip em,
.traffic-device-connection {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.traffic-acceptance-strip b.ok,
.traffic-device-connection.ok {
  background: rgba(36, 181, 111, 0.18);
  color: #9df5c5;
}

.traffic-acceptance-strip b.missing,
.traffic-device-connection.warn {
  background: rgba(255, 139, 26, 0.18);
  color: #ffd8a8;
}

.traffic-device-connection.demo,
.traffic-device-connection.neutral {
  background: rgba(124, 193, 255, 0.13);
  color: rgba(230, 244, 255, 0.92);
}

.traffic-acceptance-strip em {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.traffic-cert-strip.instruction-strip span {
  border-color: rgba(255, 138, 0, 0.34);
  background: rgba(255, 138, 0, 0.1);
  color: rgba(255, 244, 230, 0.94);
}

.traffic-concept-list {
  display: grid;
  gap: 4px;
}

.traffic-access-control-panel,
.traffic-access-card {
  border: 1px solid rgba(255, 139, 26, 0.28);
  border-radius: 8px;
  background: rgba(255, 139, 26, 0.07);
}

.traffic-access-control-panel summary,
.traffic-access-card summary {
  cursor: pointer;
  padding: 10px 12px;
  color: #fff;
}

.traffic-access-control-panel summary span,
.traffic-access-card summary span {
  display: block;
  font-weight: 950;
}

.traffic-access-control-panel summary small,
.traffic-access-card summary small {
  color: rgba(247, 239, 229, 0.72);
}

.traffic-access-grid,
.traffic-access-meta {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 12px 12px;
}

.traffic-access-grid .wide {
  grid-column: 1 / -1;
}

.hardware-link-panel,
.traffic-regie-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(124, 193, 255, 0.22);
  border-radius: 8px;
  background: rgba(7, 24, 41, 0.72);
}

.traffic-regie-panel {
  border-color: rgba(255, 139, 26, 0.28);
  background: rgba(255, 139, 26, 0.08);
}

.traffic-regie-panel.locked {
  background: rgba(8, 20, 35, 0.54);
}

.hardware-link-panel h4,
.traffic-regie-panel h4 {
  margin: 0;
  color: #fff;
  font-size: 0.96rem;
}

.hardware-link-panel .traffic-access-grid,
.traffic-regie-panel .traffic-access-grid {
  padding: 0;
}

.traffic-regie-summary {
  display: grid;
  gap: 7px;
  padding: 0 12px 12px;
}

.traffic-regie-summary span {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid rgba(255, 139, 26, 0.2);
  border-radius: 7px;
  background: rgba(255, 139, 26, 0.08);
}

.traffic-regie-summary strong {
  color: #fff;
}

.traffic-regie-summary small {
  color: rgba(247, 239, 229, 0.72);
}

.traffic-access-meta span,
.traffic-watchlist-list span {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(8, 20, 35, 0.58);
}

.traffic-access-meta strong,
.traffic-watchlist-list strong {
  color: #fff;
}

.traffic-access-meta small,
.traffic-watchlist-list small {
  color: rgba(247, 239, 229, 0.72);
}

.traffic-watchlist-list {
  display: grid;
  gap: 7px;
  padding: 0 12px 12px;
}

.traffic-device-switchboard {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.traffic-device-switchboard.compact-switchboard {
  padding: 8px 0 0;
}

.traffic-device-switchboard.compact-switchboard .switchboard-head {
  padding: 8px;
}

.traffic-device-switchboard.compact-switchboard .switchboard-head small,
.traffic-device-switchboard.compact-switchboard .traffic-switch-device small:nth-of-type(n+2),
.traffic-device-switchboard.compact-switchboard .traffic-safe-stop-row input {
  display: none;
}

.traffic-device-switchboard.compact-switchboard .traffic-safe-stop-row {
  grid-template-columns: 86px minmax(0, 1fr);
}

.traffic-device-switchboard.compact-switchboard .traffic-switch-device {
  grid-template-columns: 1fr auto;
}

.traffic-device-switchboard.compact-switchboard .traffic-switch-device > select,
.traffic-device-switchboard.compact-switchboard .traffic-switch-device > input {
  display: none;
}

.traffic-safe-stop-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 94, 94, 0.28);
  border-radius: 8px;
  background: rgba(68, 18, 22, 0.42);
}

.traffic-safe-stop-row input,
.traffic-safe-stop-row select {
  min-height: 38px;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(3, 12, 24, 0.78);
  color: #fff;
}

.switchboard-head,
.traffic-switch-device {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(124, 193, 255, 0.22);
  border-radius: 8px;
  background: rgba(8, 20, 35, 0.68);
}

.switchboard-head {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.traffic-project-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
}

.traffic-project-actions b {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 139, 26, 0.18);
  color: #ffd8a8;
}

.switchboard-head strong,
.traffic-switch-device strong {
  color: #fff;
}

.switchboard-head small,
.traffic-switch-device small {
  color: rgba(247, 239, 229, 0.72);
}

.traffic-switch-device {
  grid-template-columns: minmax(130px, 1fr) auto minmax(86px, auto) minmax(130px, 0.8fr);
  align-items: center;
}

.traffic-switch-device .switch-state {
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(124, 193, 255, 0.13);
  color: #fff;
  font-weight: 900;
  text-align: center;
}

.traffic-switch-device.open .switch-state {
  background: rgba(36, 181, 111, 0.2);
  color: #9df5c5;
}

.traffic-switch-device.danger .switch-state {
  background: rgba(255, 94, 94, 0.2);
  color: #ffb6b6;
}

.switch-buttons {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.switch-buttons .button {
  min-height: 40px;
}

.traffic-switch-device:not(.taken-over) [data-needs-takeover] {
  opacity: 0.45;
}

.traffic-switch-device.taken-over {
  border-color: rgba(255, 139, 26, 0.46);
}

.traffic-switch-device.taken-over .takeover {
  background: rgba(255, 139, 26, 0.18);
  color: #ffd8a8;
}

.traffic-workapp-focus {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 139, 26, 0.08);
}

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

.traffic-workapp-head span {
  display: grid;
  gap: 3px;
}

.traffic-workapp-head small,
.traffic-workapp-head em,
.traffic-workapp-focus p {
  color: rgba(247, 239, 229, 0.72);
  font-style: normal;
}

.traffic-workapp-head strong {
  color: #fff;
  font-size: 20px;
}

.traffic-workapp-head b {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(36, 181, 111, 0.18);
  color: #9df5c5;
  font-size: 11px;
  text-transform: uppercase;
}

.traffic-workapp-head b.warn {
  background: rgba(255, 139, 26, 0.18);
  color: #ffd8a8;
}

.traffic-workapp-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.traffic-workapp-focus .traffic-safe-stop-row,
.traffic-workapp-focus .traffic-switch-device {
  background: rgba(6, 18, 31, 0.76);
}

@media (max-width: 860px) {
  .traffic-access-grid,
  .traffic-access-meta {
    grid-template-columns: 1fr;
  }

  .traffic-switch-device {
    grid-template-columns: 1fr;
  }

  .traffic-safe-stop-row {
    grid-template-columns: 1fr;
  }

  .switch-buttons {
    grid-template-columns: 1fr 1fr;
  }
}

.smart-question-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.smart-question-list button {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.budget-status-card {
  border-left: 4px solid #1c9b5e;
}

.budget-status-card.attention {
  border-left-color: var(--orange);
}

.budget-status-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.dispatch-warning {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #ffd9a9;
  border-left: 4px solid var(--orange);
  border-radius: 8px;
  background: #fff8ef;
}

.dispatch-warning span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.plan-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.plan-choice {
  display: grid;
  gap: 10px;
  align-content: space-between;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.plan-choice div {
  display: grid;
  gap: 5px;
}

.plan-choice strong {
  color: var(--ink);
  font-size: 16px;
}

.plan-choice span {
  color: #005cb9;
  font-weight: 900;
}

.plan-choice small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.launch-readiness {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.launch-readiness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.plan-choice.is-preferred {
  border-color: #ff8400;
  box-shadow: inset 0 0 0 1px #ff8400;
  background: color-mix(in srgb, var(--panel, #fff) 92%, #ff8400 8%);
}

.subscription-management-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel, #fff) 94%, #ff8400 6%);
}

.subscription-management-card > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.subscription-management-card strong {
  color: var(--ink);
}

.subscription-management-card span,
.subscription-management-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.subscription-module-scope-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.subscription-module-scope-list span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.subscription-module-scope-list b {
  color: var(--ink);
  font-size: 11px;
}

.subscription-management-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.subscription-management-actions .danger {
  border-color: color-mix(in srgb, #ef4444 42%, var(--line) 58%);
  color: #b91c1c;
}

html[data-theme="dark"] .subscription-management-card {
  border-color: rgba(148, 163, 184, .24);
  background: rgba(15, 23, 42, .72);
}

html[data-theme="dark"] .subscription-management-card strong {
  color: #f8fafc;
}

html[data-theme="dark"] .subscription-management-card span,
html[data-theme="dark"] .subscription-management-card small {
  color: rgba(226, 232, 240, .76);
}

html[data-theme="dark"] .subscription-module-scope-list span {
  border-color: rgba(148, 163, 184, .24);
  background: rgba(15, 23, 42, .86);
}

html[data-theme="dark"] .subscription-module-scope-list b {
  color: #f8fafc;
}

.launch-blockers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.launch-blocker,
.launch-clear {
  border: 1px solid rgba(255, 143, 23, 0.34);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 143, 23, 0.16), rgba(5, 27, 48, 0.88));
  color: #f8fbff;
}

.launch-blocker {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  text-align: left;
  cursor: pointer;
}

.launch-blocker span,
.launch-blocker small,
.launch-clear span {
  color: rgba(248, 251, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.launch-blocker strong,
.launch-clear strong {
  color: #ffad4a;
  font-size: 15px;
}

.launch-blocker.danger {
  border-color: rgba(255, 87, 87, 0.46);
  background: linear-gradient(135deg, rgba(255, 87, 87, 0.18), rgba(5, 27, 48, 0.9));
}

.launch-clear {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-color: rgba(94, 214, 141, 0.34);
  background: linear-gradient(135deg, rgba(33, 166, 97, 0.18), rgba(5, 27, 48, 0.88));
}

.launch-action-plan {
  display: grid;
  grid-template-columns: minmax(130px, 0.65fr) repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  align-items: stretch;
}

.launch-action-plan > strong {
  display: flex;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(255, 143, 23, 0.34);
  border-radius: 8px;
  color: #ffad4a;
  background: rgba(255, 143, 23, 0.1);
  font-size: 13px;
}

.launch-action-plan button {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid rgba(139, 164, 190, 0.28);
  border-radius: 8px;
  background: rgba(7, 31, 54, 0.72);
  color: #f8fbff;
  text-align: left;
  cursor: pointer;
}

.launch-action-plan span,
.launch-action-plan small {
  color: rgba(248, 251, 255, 0.68);
  font-size: 11px;
  font-weight: 800;
}

.launch-action-plan b {
  color: #f8fbff;
  font-size: 13px;
}

.launch-readiness-item {
  display: grid;
  gap: 5px;
  align-content: start;
  min-height: 112px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.launch-readiness-item small {
  color: var(--muted);
  font-weight: 900;
}

.launch-readiness-item strong {
  font-size: 16px;
}

.launch-readiness-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.launch-readiness-item.positive {
  border-color: #bfe5cc;
  background: #f3fbf6;
}

.launch-readiness-item.warning {
  border-color: #ffd9a9;
  background: #fff8ef;
}

.acceptance-panel {
  display: grid;
  gap: 12px;
}

.acceptance-head,
.acceptance-summary,
.acceptance-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.acceptance-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 14px;
  align-items: center;
  padding: 16px;
}

.acceptance-head h2,
.acceptance-head p {
  margin: 0;
}

.acceptance-head p {
  color: var(--muted);
  font-weight: 800;
}

.acceptance-progress {
  display: grid;
  gap: 5px;
}

.acceptance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.acceptance-actions .button {
  min-height: 38px;
  padding: 8px 11px;
  font-size: 13px;
}

.acceptance-progress strong {
  font-size: 28px;
}

.acceptance-progress span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.acceptance-progress small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.acceptance-progress i {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf3;
}

.acceptance-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1c9b5e;
}

.acceptance-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  padding: 10px;
}

.acceptance-summary article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(4, 18, 33, 0.36);
}

.acceptance-summary article strong {
  color: #ffb35c;
  font-size: 18px;
  line-height: 1;
}

.acceptance-summary article span {
  color: rgba(247, 239, 229, 0.78);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
}

.launch-scenarios {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 36, 59, 0.98), rgba(8, 24, 42, 0.98));
}

.launch-scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 9px;
}

.launch-scenario-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  min-height: 178px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid rgba(255, 130, 0, 0.72);
  border-radius: 8px;
  background: rgba(4, 18, 33, 0.54);
  color: #f7efe5;
}

.launch-scenario-card * {
  min-width: 0;
}

.launch-scenario-card.ready {
  border-left-color: #22c55e;
}

.launch-scenario-card.blocked {
  border-left-color: #ef4444;
}

.launch-scenario-card.attention,
.launch-scenario-card.open {
  border-left-color: #ff8200;
}

.launch-scenario-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.launch-scenario-top strong {
  color: #fff;
  font-size: 15px;
}

.launch-scenario-top span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.16);
  color: #ffb35c;
  font-size: 11px;
  font-weight: 900;
}

.launch-scenario-card.ready .launch-scenario-top span {
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
}

.launch-scenario-card.blocked .launch-scenario-top span {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
}

.launch-scenario-card p,
.launch-scenario-card small {
  margin: 0;
  color: rgba(247, 239, 229, 0.75);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.launch-scenario-card p {
  min-height: 32px;
}

.launch-scenario-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
}

.launch-scenario-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8200, #ffb35c);
}

.launch-scenario-card.ready .launch-scenario-progress i {
  background: linear-gradient(90deg, #22c55e, #86efac);
}

.launch-scenario-card button,
.launch-scenario-card a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
}

.launch-scenario-card button span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
}

.launch-scenario-card button:hover,
.launch-scenario-card a:hover {
  border-color: rgba(255, 130, 0, 0.55);
  background: rgba(255, 130, 0, 0.12);
}

.mileage-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
}

.mileage-summary-grid article,
.mileage-compliance-strip,
.mileage-form,
.mileage-lists article {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(4, 18, 33, 0.54);
  color: #f7efe5;
}

.mileage-summary-grid article {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 9px 10px;
}

.mileage-summary-grid span,
.mileage-form label,
.mileage-form small,
.mileage-rules span,
.mileage-table span,
.mileage-table small {
  color: rgba(247, 239, 229, 0.76);
}

.mileage-summary-grid strong {
  color: #ffb35c;
  font-size: 18px;
}

.mileage-compliance-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 9px 10px;
  border-left: 3px solid #ff8200;
}

.mileage-compliance-strip.ok {
  border-left-color: #22c55e;
}

.mileage-compliance-strip strong {
  color: #fff;
}

.mileage-workspace,
.mileage-lists {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: 10px;
}

.mileage-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.mileage-form label,
.mileage-form input,
.mileage-form select {
  min-width: 0;
  width: 100%;
}

.mileage-form h3,
.mileage-form .wide,
.mileage-form button,
.mileage-form .form-message,
.mileage-rules {
  grid-column: 1 / -1;
}

.mileage-form h3,
.mileage-lists h3 {
  margin: 0;
  color: #fff;
  font-size: 15px;
}

.mileage-form input,
.mileage-form select {
  min-height: 38px;
}

.mileage-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mileage-rules span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 11px;
  font-weight: 800;
}

.mileage-lists article {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.mileage-table button {
  min-height: 50px;
}

@media (max-width: 860px) {
  .mileage-workspace,
  .mileage-lists,
  .mileage-form {
    grid-template-columns: 1fr;
  }
}

.acceptance-priority {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.acceptance-groups {
  display: grid;
  gap: 12px;
}

.acceptance-group {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.acceptance-list {
  display: grid;
  gap: 7px;
}

.acceptance-item {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(145px, .55fr) minmax(110px, .38fr) minmax(145px, .55fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.acceptance-item.done {
  border-color: #bfe5cc;
  background: #f3fbf6;
}

.acceptance-item.blocked {
  border-color: #ffc9c9;
  background: #fff5f5;
}

.acceptance-item.busy {
  border-color: #ffd9a9;
  background: #fff8ef;
}

.acceptance-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.acceptance-copy span,
.acceptance-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

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

.acceptance-meta small,
.acceptance-steps summary {
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
}

.acceptance-meta a {
  color: #005cb9;
}

.acceptance-auto {
  display: grid;
  gap: 3px;
  align-content: center;
  min-width: 0;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.acceptance-auto.ok {
  border-color: #bfe5cc;
  background: #f3fbf6;
}

.acceptance-auto.attention {
  border-color: #ffd9a9;
  background: #fff8ef;
}

.acceptance-auto strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.1;
}

.acceptance-auto span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.acceptance-steps {
  display: grid;
  gap: 5px;
}

.acceptance-steps summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.acceptance-steps ol {
  margin: 0;
  padding-left: 22px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.acceptance-item select,
.acceptance-item input {
  min-height: 38px;
  padding: 8px 10px;
}

.admin-body :where(.acceptance-head, .acceptance-summary, .acceptance-priority, .acceptance-group, .acceptance-item, .acceptance-auto, .acceptance-steps summary) {
  border-color: var(--pf24-line);
  background: linear-gradient(180deg, var(--pf24-panel-2), var(--pf24-panel));
  color: var(--pf24-text);
}

.admin-body :where(.acceptance-item.done, .acceptance-auto.ok) {
  border-color: rgba(34, 197, 94, 0.36);
  background: linear-gradient(180deg, rgba(21, 74, 52, 0.72), rgba(8, 32, 31, 0.82));
}

.admin-body :where(.acceptance-item.blocked) {
  border-color: rgba(239, 68, 68, 0.36);
  background: linear-gradient(180deg, rgba(87, 38, 38, 0.72), rgba(42, 18, 24, 0.84));
}

.admin-body :where(.acceptance-item.busy, .acceptance-auto.attention) {
  border-color: rgba(255, 130, 0, 0.38);
  background: linear-gradient(180deg, rgba(72, 48, 24, 0.76), rgba(39, 26, 18, 0.86));
}

.admin-body :where(.acceptance-head p, .acceptance-progress span, .acceptance-progress small, .acceptance-copy span, .acceptance-copy small, .acceptance-auto span, .acceptance-steps ol) {
  color: rgba(247, 239, 229, 0.76);
}

.admin-body :where(.acceptance-item strong, .acceptance-auto strong, .acceptance-steps summary) {
  color: var(--pf24-text);
}

.admin-body .acceptance-meta a {
  color: #ffb35c;
  overflow-wrap: anywhere;
}

.focus-pulse {
  animation: focusPulse 1.1s ease;
}

@keyframes focusPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 130, 0, .45); }
  100% { box-shadow: 0 0 0 10px rgba(255, 130, 0, 0); }
}

.transfer-report {
  display: grid;
  gap: 12px;
}

.transfer-head p {
  max-width: 820px;
}

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

.transfer-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.transfer-stat,
.transfer-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.transfer-stat {
  padding: 10px;
}

.transfer-stat span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.transfer-stat strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

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

.transfer-card {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 12px;
}

.transfer-card h4 {
  margin: 0;
  color: var(--blue);
  font-size: 14px;
}

.transfer-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.transfer-definition-list {
  display: grid;
  gap: 7px;
  margin: 0;
}

.transfer-definition-list div,
.transfer-mini-table p,
.transfer-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}

.transfer-definition-list div:first-child,
.transfer-mini-table p:first-child,
.transfer-bar-row:first-child {
  border-top: 0;
}

.transfer-definition-list dt,
.transfer-mini-table span,
.transfer-bar-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.transfer-definition-list dd,
.transfer-mini-table strong,
.transfer-bar-row strong {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-align: right;
}

.transfer-bars {
  display: grid;
  gap: 2px;
}

.transfer-bar-row {
  grid-template-columns: 54px minmax(0, 1fr) 86px;
}

.transfer-bar-row i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf4;
}

.transfer-bar-row b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--orange);
}

.transfer-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 780;
}

.transfer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.transfer-tags span {
  border: 1px solid #b8d7f5;
  border-radius: 999px;
  background: #eef6ff;
  padding: 6px 9px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.transfer-note {
  margin: 0;
}

.team-form {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.team-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.team-summary-strip span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.team-summary-strip strong {
  color: var(--ink);
}

.team-grid {
  display: grid;
  gap: 6px;
}

.team-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 150px 180px minmax(210px, 0.9fr);
  gap: 8px;
  align-items: center;
}

.team-row-compact {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.team-row-compact summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.team-row-compact summary::-webkit-details-marker {
  display: none;
}

.team-row-compact summary span {
  min-width: 0;
}

.team-row-compact summary strong,
.team-row-compact summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-row-compact summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.team-row-compact[open] summary {
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.team-edit-grid {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(190px, 1.2fr) 140px 160px minmax(190px, .9fr);
  gap: 8px;
  padding: 10px;
}

.team-edit-sections {
  grid-template-columns: 1fr;
  align-items: start;
}

.team-edit-section {
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.team-edit-section > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.team-edit-section > summary::-webkit-details-marker {
  display: none;
}

.team-edit-section > summary strong,
.team-edit-section > summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-edit-section > summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.team-edit-section > summary b {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.team-edit-section[open] > summary {
  border-bottom: 1px solid var(--line);
}

.team-edit-section[open] > summary b {
  background: var(--accent-soft);
  color: var(--accent);
}

.team-edit-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  padding: 10px;
}

.team-row input,
.team-row select,
.team-edit-grid input,
.team-edit-grid select {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
}

.regie-partner-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(248, 250, 252, .96), rgba(255, 255, 255, .9));
}

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

.regie-rules span,
.regie-blueprint-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}

.regie-rules span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 6px 8px;
  align-items: center;
  padding: 9px;
}

.regie-rules svg,
.regie-blueprint-card svg,
.regie-partnership-row svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.regie-rules b,
.regie-rules small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.regie-rules small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.regie-blueprint-card {
  display: grid;
  gap: 6px;
  padding: 9px;
}

.regie-blueprint-card header,
.regie-partnership-row strong {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.regie-blueprint-card strong,
.regie-partnership-row strong span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.regie-blueprint-card p,
.regie-blueprint-card small {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.regie-blueprint-card p b {
  color: var(--ink);
}

.partnership-panel .team-edit-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.partnership-panel .team-edit-grid .wide {
  grid-column: 1 / -1;
}

.partnership-panel select[multiple] {
  min-height: 108px;
  padding: 6px;
}

.regie-partnership-row small b {
  color: var(--ink);
}

.hospitality-offer-panel {
  display: grid;
  gap: 12px;
}

.hospitality-offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.hospitality-offer-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.hospitality-offer-card > img,
.hospitality-offer-card > svg {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-2);
}

.hospitality-offer-card > svg {
  padding: 16px;
  color: var(--accent);
}

.hospitality-offer-card div,
.hospitality-offer-card strong,
.hospitality-offer-card span,
.hospitality-offer-card small,
.hospitality-offer-card em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hospitality-offer-card strong,
.hospitality-offer-card small,
.hospitality-offer-card span,
.hospitality-offer-card em {
  display: block;
}

.hospitality-offer-card small,
.hospitality-offer-card span,
.hospitality-offer-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.hospitality-order-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.hospitality-order-form .wide {
  grid-column: 1 / -1;
}

.hospitality-fee-options,
.hospitality-total-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.hospitality-fee-options > span,
.hospitality-total-strip > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-2));
}

.hospitality-fee-options > span.active {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.hospitality-fee-options b,
.hospitality-fee-options strong,
.hospitality-total-strip b {
  color: var(--ink);
}

.hospitality-fee-options small,
.hospitality-total-strip small {
  color: var(--muted);
  line-height: 1.35;
}

.hospitality-fee-strip.compact {
  margin: 0;
}

.pos-v2-incoming-requests {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.pos-v2-incoming-head,
.pos-v2-request-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.pos-v2-incoming-head span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pos-v2-incoming-head button,
.pos-v2-request-actions button {
  min-width: 40px;
  min-height: 38px;
  border-radius: 8px;
}

.pos-v2-request-status-grid,
.pos-v2-day-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.pos-v2-request-status-grid span,
.pos-v2-day-summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.pos-v2-day-summary {
  grid-column: 1 / -1;
}

.pos-v2-day-summary span {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.pos-v2-day-summary i {
  grid-row: span 2;
  color: var(--accent);
}

.pos-v2-incoming-requests article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
}

.pos-v2-incoming-requests article.status-nieuw {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: inset 3px 0 0 var(--accent);
}

.pos-v2-request-main,
.pos-v2-request-side {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pos-v2-request-side {
  justify-items: end;
}

.pos-v2-request-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.pos-v2-request-actions .primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #111827;
}

.pos-v2-request-lines {
  display: grid;
  gap: 2px;
  padding-top: 3px;
}

.pos-v2-request-lines em {
  color: var(--ink);
  font-size: 11px;
  font-style: normal;
}

.pos-v2-incoming-requests span,
.pos-v2-incoming-requests small {
  color: var(--muted);
  font-size: 11px;
}

.pos-v2-hospitality-insights {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, var(--surface-2));
}

.pos-v2-hospitality-insights header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pos-v2-hospitality-insights header i {
  color: var(--accent);
}

.pos-v2-hospitality-insights header span,
.pos-v2-hospitality-insights header strong,
.pos-v2-hospitality-insights header small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pos-v2-hospitality-insights header small {
  color: var(--muted);
  font-size: 11px;
}

.pos-v2-hospitality-insights > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.pos-v2-hospitality-insights > div span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.pos-v2-hospitality-insights > div b {
  color: var(--ink);
}

.pos-v2-hospitality-insights > div small {
  color: var(--muted);
  font-size: 11px;
}

.badge-order-panel .compact-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px;
  min-width: 0;
  max-height: 210px;
  overflow-y: auto;
  scrollbar-width: none;
  border: 1px solid var(--line);
  padding: 8px;
}

.badge-order-panel .compact-check-grid::-webkit-scrollbar {
  display: none;
}

.badge-order-panel .check-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.badge-order-panel .check-card input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.badge-order-panel .check-card span,
.badge-order-panel .check-card strong,
.badge-order-panel .check-card small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.badge-own-production {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) repeat(2, auto);
  align-items: center;
  gap: 6px;
  width: 100%;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.badge-own-production input {
  min-width: 130px;
  max-width: 190px;
}

.referral-overview {
  margin-top: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.referral-overview > summary,
.referral-share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
}

.referral-overview > summary span {
  display: grid;
  min-width: 0;
}

.referral-share-row {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.referral-share-row code {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 800;
}

.referral-list {
  display: grid;
}

.referral-list .compact-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.referral-list .compact-list-row:last-child {
  border-bottom: 0;
}

.referral-list .compact-list-row > strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.referral-list .compact-list-row > span {
  font-weight: 800;
}

.referral-list .compact-list-row > small {
  grid-column: 1 / -1;
  color: var(--muted);
}

@media (max-width: 720px) {
  .badge-own-production {
    grid-template-columns: 1fr;
  }

  .badge-own-production input {
    max-width: none;
  }

  .referral-share-row {
    align-items: stretch;
    flex-direction: column;
  }

  .referral-share-row .button {
    width: 100%;
  }
}

.team-permission-field,
.team-personnel-field {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
}

.team-personnel-field {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.team-permission-field legend,
.team-personnel-field legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.team-permission-field label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  min-height: 30px;
  margin: 0;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(2, 30, 58, 0.06);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.team-document-field,
.team-document-list {
  grid-column: span 2;
}

.team-document-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.team-document-list span {
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255, 122, 0, 0.12);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.guided-intake-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.intake-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.intake-step-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 122, 0, 0.22);
  border-radius: 8px;
  background: rgba(13, 24, 42, 0.78);
  color: rgba(255, 255, 255, 0.93);
}

.intake-step-card > strong {
  grid-column: 1 / -1;
  color: #ff7a00;
  font-size: 14px;
  font-weight: 950;
}

.intake-step-card label,
.intake-step-card .wide {
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 900;
}

.intake-step-card input,
.intake-step-card select,
.intake-step-card textarea {
  margin-top: 5px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
}

.intake-step-card .admin-service-picker {
  padding: 0;
  border: 0;
  background: transparent;
}

.intake-step-card .admin-service-picker input {
  background: rgba(2, 16, 31, 0.96);
  color: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 122, 0, 0.55);
}

.intake-step-card .admin-service-picker input::placeholder {
  color: rgba(255, 255, 255, 0.48);
}

.intake-step-card .admin-service-picker .service-search-selected {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 7px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 122, 0, 0.14);
  color: #ffb36a;
  font-size: 12px;
  font-weight: 900;
}

.intake-step-card .admin-service-picker .service-search-results {
  margin-top: 7px;
}

.intake-customer-suggestions {
  display: grid;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 122, 0, 0.18);
  border-radius: 8px;
  background: rgba(2, 16, 31, 0.42);
}

.intake-customer-suggestions > span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 780;
}

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

.intake-customer-list button,
.intake-customer-picked {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 8px 9px;
  border: 1px solid rgba(255, 122, 0, 0.25);
  border-radius: 8px;
  background: rgba(13, 24, 42, 0.86);
  color: rgba(255, 255, 255, 0.92);
}

.intake-customer-list button:hover,
.intake-customer-list button:focus-visible {
  border-color: rgba(255, 122, 0, 0.75);
  background: rgba(255, 122, 0, 0.12);
}

.intake-customer-list strong,
.intake-customer-picked strong {
  color: #ffb36a;
  font-size: 12px;
  font-weight: 950;
}

.intake-customer-list small,
.intake-customer-list em,
.intake-customer-picked span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.intake-customer-picked {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.intake-customer-picked button {
  padding: 6px 8px;
  border: 1px solid rgba(255, 122, 0, 0.28);
  border-radius: 7px;
  background: rgba(255, 122, 0, 0.12);
  color: #ffb36a;
  font-size: 11px;
  font-weight: 900;
}

.intake-assist-optional {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.intake-assist-optional > span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 760;
}

.intake-assist-optional .smart-intake-result {
  grid-column: 1 / -1;
}

.intake-step-wide,
.intake-submit-row {
  grid-column: 1 / -1;
}

.admin-body:has(#dashboard:not(.hidden)) .guided-intake-form > .intake-step-wide,
.admin-body:has(#dashboard:not(.hidden)) .guided-intake-form > .intake-submit-row {
  grid-column: 1 / -1 !important;
}

.intake-submit-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(255, 122, 0, 0.22);
  border-radius: 8px;
  background: rgba(13, 24, 42, 0.62);
}

.intake-submit-row .form-message {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}

.workflow-steps {
  display: grid;
  gap: 9px;
}

.workflow-steps article {
  display: grid;
  grid-template-columns: minmax(150px, .6fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid rgba(255, 122, 0, 0.2);
  border-radius: 8px;
  background: rgba(13, 24, 42, 0.72);
}

.workflow-steps strong {
  color: #ff7a00;
  font-size: 13px;
  font-weight: 950;
}

.workflow-steps span {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.45;
}

.team-invite-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.team-invite-actions .button,
.team-copy-link {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 13px;
}

.team-copy-link {
  color: var(--muted);
  font-weight: 900;
}

.profession-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.suggestion-list {
  display: grid;
  gap: 6px;
}

.suggestion-list button {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  padding: 8px 10px;
  font-weight: 800;
  cursor: pointer;
}

.tag-list {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #b8d7f5;
  border-radius: 999px;
  background: #eef6ff;
  color: var(--ink);
  padding: 7px 10px;
  font-weight: 900;
}

.tag-chip button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
}

.tag-chip small {
  color: var(--muted);
  font-weight: 700;
}

.service-area-picker {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.service-area-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.45fr);
  gap: 10px;
}

.service-area-heading {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.warning-chip {
  border-color: #ffd1a8;
  background: #fff6ed;
}

.postcode-area-preview {
  min-height: 36px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: white;
  font-size: 13px;
}

.anonymous-profile-preview {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

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

.anonymous-profile-grid article {
  min-height: 94px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.anonymous-profile-grid strong,
.anonymous-profile-grid span {
  display: block;
}

.anonymous-profile-grid span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.document-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 14px;
}

.document-status-card,
.admin-doc-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 10px 12px;
}

.document-status-card small,
.admin-doc-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 800;
}

.status-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffb020;
  box-shadow: 0 0 0 3px rgba(255,176,32,0.14);
}

.status-dot.red {
  background: #d92d20;
  box-shadow: 0 0 0 3px rgba(217,45,32,0.14);
}

.status-dot.orange {
  background: #ffb020;
  box-shadow: 0 0 0 3px rgba(255,176,32,0.14);
}

.status-dot.green {
  background: #1f9d55;
  box-shadow: 0 0 0 3px rgba(31,157,85,0.14);
}

.mini-empty {
  padding: 4px 0;
}

.admin-doc-list {
  display: grid;
  gap: 5px;
  margin-top: 4px;
}

.admin-doc-row {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 7px;
  padding: 6px 8px;
  min-width: 0;
}

.admin-doc-list.compact {
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.doc-summary-line {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.doc-summary-line span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #fbfcfd;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.doc-summary-line .status-dot {
  width: 8px;
  height: 8px;
  box-shadow: none;
}

.admin-doc-row.is-done {
  grid-template-columns: auto minmax(0, 1fr);
  background: #fbfcfd;
}

.admin-doc-row strong,
.admin-doc-row small {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.admin-doc-row .button {
  min-height: 28px;
  padding: 4px 7px;
  font-size: 11px;
  border-radius: 6px;
}

@media (max-width: 980px) {
  .steps, .role-flow, .audience-grid, .service-grid, .service-package-strip, .platform-proof, .pricing-grid, .pricing-route-grid, .business-package-grid, .bundle-grid, .addon-grid, .metrics, .info-grid, .pro-list, .document-grid, .anonymous-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .staff-bundle-strip {
    grid-template-columns: 1fr;
  }
  .pricing-compare-head {
    display: grid;
    align-items: start;
  }
  .pricing-compare-head span {
    max-width: none;
    text-align: left;
  }
  .module-catalog {
    grid-template-columns: 1fr;
  }
  .module-table > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .module-table-head {
    display: none !important;
  }
  .comparison-table {
    overflow-x: auto;
  }
  .pricing-compact-table > div {
    grid-template-columns: 150px repeat(4, 160px);
    min-width: 790px;
  }
  .pricing-compact-table > .pricing-plan-row {
    grid-template-columns: repeat(4, minmax(135px, 1fr));
    min-width: 0;
  }
  .compact-steps { grid-template-columns: 1fr; }
  .request-section, .workspace, .workflow-layout, .coverage-layout { grid-template-columns: 1fr; }
  .queue { border-right: 0; border-bottom: 1px solid var(--line); }
  .pro-form, .settings-form, .intake-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  body.label-print-body {
    background: white;
  }

  .label-print-toolbar,
  .label-print-shell > .form-message,
  .scan-action-panel {
    display: none !important;
  }

  .label-print-shell {
    width: auto;
    margin: 0;
  }

  .label-sheet {
    gap: 2mm;
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  .print-label {
    border-color: #d1d5db;
    box-shadow: none;
  }
}

@media (max-width: 640px) {
  .topbar { align-items: flex-start; flex-direction: column; padding: 16px 20px; }
  .brand img { width: min(300px, 82vw); height: 48px; }
  nav { flex-wrap: wrap; }
  .portal-nav,
  .nav-links,
  .nav-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .nav-actions .language-select {
    flex: 0 0 124px;
  }
  .hero { min-height: 700px; padding: 54px 24px; }
  h1 { font-size: 40px; }
  .steps, .role-flow, .audience-grid, .service-grid, .service-package-strip, .platform-proof, .pricing-grid, .pricing-route-grid, .business-package-grid, .bundle-grid, .addon-grid, .postcode-checker, .metrics, .overview-grid, .portal-actions, .info-grid, .pro-list, .request-form, .update-form, .pro-form, .settings-form, .intake-form, .quote-lines-form, .document-grid, .anonymous-profile-grid { grid-template-columns: 1fr; }
  .property-summary-strip,
  .property-object-form {
    grid-template-columns: 1fr;
  }
  .pricing-plan-grid {
    grid-template-columns: 1fr;
  }
  .staff-bundle-strip ul {
    grid-template-columns: 1fr;
  }
  .comparison-card { padding: 12px; }
  .comparison-table {
    overflow-x: auto;
  }
  .comparison-table > div {
    grid-template-columns: 190px repeat(3, 108px);
    min-width: 514px;
    font-size: 13px;
  }
  .pricing-compact-table > div {
    grid-template-columns: 160px repeat(4, 126px);
    min-width: 664px;
  }
  .module-catalog li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .profession-picker { grid-template-columns: 1fr; }
  .compact-steps article { grid-template-columns: 34px minmax(0, 1fr); }
  .coverage-map { min-height: 340px; }
  .coverage-stats { grid-template-columns: 1fr; }
  .quote-line { grid-template-columns: 1fr; }
  .document-card { padding: 20px; }
  .document-title { flex-direction: column; }
  .document-title h1 { font-size: 34px; }
  .line-table { font-size: 14px; }
  .portal-tabs { grid-template-columns: 1fr 1fr; }
  .profile-section-grid,
  .document-upload-assistant {
    grid-template-columns: 1fr;
  }
  footer { flex-direction: column; }
}

/* Compact admin workspace */
.admin-body,
.admin-body input,
.admin-body select,
.admin-body textarea,
.admin-body button {
  font-size: 14px;
}

.admin-body .topbar {
  min-height: 58px;
  padding-block: 8px;
  gap: 16px;
}

.admin-body .brand img {
  width: 190px;
  height: 38px;
}

.admin-body .admin-shell {
  padding-top: 16px;
  padding-bottom: 16px;
}

.admin-body h1 { font-size: 28px; }
.admin-body h2 { font-size: 18px; }
.admin-body h3 { font-size: 16px; }

.admin-body label {
  gap: 5px;
}

.admin-body input,
.admin-body select,
.admin-body textarea {
  padding: 8px 10px;
  border-radius: 6px;
}

.admin-body .button {
  min-height: 36px;
  padding: 8px 12px;
}

.dashboard {
  gap: 12px;
}

.admin-tabs {
  position: sticky;
  top: 0;
  z-index: 6;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(238, 243, 247, 0.96);
  backdrop-filter: blur(8px);
}

.admin-tabs button {
  padding: 6px 10px;
  border-radius: 6px;
}

.overview-grid,
.metrics {
  gap: 10px;
}

.summary-card,
.metrics article,
.metric-card {
  padding: 12px 14px;
}

.summary-card span {
  font-size: 24px;
}

.metrics span,
.metric-card span {
  font-size: 26px;
}

.data-list,
.audit-list {
  gap: 7px;
}

.data-row {
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
}

.workspace {
  grid-template-columns: 320px minmax(0, 1fr);
  height: calc(100vh - 166px);
  min-height: 560px;
}

.panel-head {
  padding: 11px 13px;
}

.panel-head h2 {
  font-size: 18px;
}

.request-list {
  gap: 6px;
  padding: 8px;
  max-height: calc(100vh - 238px);
  overflow: auto;
}

.request-item {
  gap: 4px;
  padding: 9px 10px;
  border-radius: 6px;
}

.request-item span {
  font-size: 12px;
}

.detail {
  padding: 14px;
  overflow: auto;
}

.detail-head h2 {
  margin-bottom: 6px;
  font-size: 20px;
}

.badge {
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
}

.info-grid {
  gap: 8px;
  margin: 12px 0;
}

.info-grid p {
  gap: 4px;
  padding: 9px 10px;
  border-radius: 6px;
}

.description {
  padding: 10px 12px;
  line-height: 1.45;
}

.notes {
  margin-top: 14px;
  padding-top: 12px;
}

.quote-box {
  margin-top: 12px;
}

.quote-lines-form,
.pro-form,
.settings-form,
.intake-form {
  gap: 8px;
  padding: 12px;
}

.quote-line {
  grid-template-columns: minmax(160px, 1fr) 72px 116px 36px;
  gap: 6px;
}

.icon-btn {
  width: 36px;
  min-height: 36px;
  border-radius: 6px;
}

.tab-panel {
  min-width: 0;
}

.tab-panel > .partners + .partners {
  margin-top: 12px;
}

.pro-list,
.audit-list {
  max-height: calc(100vh - 220px);
  overflow: auto;
}

.pro-list article {
  padding: 10px 12px;
}

.edit-toolbar,
.padded-toolbar,
.approval-panel {
  gap: 8px;
  padding: 10px 12px;
}

.link-strip {
  padding: 10px 12px;
}

@media (max-width: 980px) {
  .workspace {
    height: auto;
    min-height: 0;
  }

  .corporate-kpi-strip,
  .corporate-layout,
  .corporate-finance-grid,
  .corporate-entity-metrics,
  .professional-business-structure .business-structure-summary,
  .business-structure-edit-grid,
  .business-structure-editor-row,
  .business-structure-grid,
  .branch-grid,
  .acceptance-head,
  .community-head,
  .communication-head,
  .outbox-row,
  .label-form,
  .label-row,
  .ticket-detail-layout,
  .readiness-panel,
  .walkthrough-layout {
    grid-template-columns: 1fr;
  }

  .community-head,
  .communication-head {
    display: grid;
  }

  .community-kpis,
  .communication-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .community-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .community-actions {
    justify-content: flex-start;
  }

  .outbox-head-row {
    display: none;
  }

  .outbox-actions {
    justify-content: flex-start;
  }

  .audit-head,
  .audit-row {
    grid-template-columns: 1fr;
  }

  .audit-head {
    display: grid;
  }

  .audit-actions,
  .audit-row-actions {
    justify-content: flex-start;
  }

  .audit-filters,
  .audit-summary,
  .audit-integrity,
  .audit-insight-grid {
    grid-template-columns: 1fr;
  }

  .incident-banner {
    grid-template-columns: 1fr;
  }

  .security-head,
  .security-grid,
  .security-row {
    grid-template-columns: 1fr;
  }

  .security-actions {
    justify-content: flex-start;
  }

  .ticket-progress {
    position: static;
  }

  .branch-stats,
  .acceptance-summary,
  .branch-mini-metrics,
  .launch-readiness-grid,
  .readiness-steps,
  .solo-task-grid,
  .branch-value-list,
  .staffing-grid,
  .mock-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pro-list,
  .audit-list {
    max-height: none;
  }

  .request-list {
    max-height: 260px;
    overflow: auto;
  }

  .detail {
    max-height: 68vh;
    overflow: auto;
  }

  .walkthrough-head {
    display: grid;
  }
}

@media (max-width: 680px) {
  .branch-value-list,
  .acceptance-item,
  .compact-action-list a,
  .readiness-steps,
  .service-area-controls,
  .customer-cockpit,
  .professional-cockpit,
  .team-row,
  .team-edit-grid,
  .branch-value-row {
    grid-template-columns: 1fr;
  }

  .branch-value-group summary {
    grid-template-columns: 1fr;
  }

  .branch-value-row small {
    width: fit-content;
  }

  .value-editor-actions {
    display: grid;
  }
}

@media (max-width: 1180px) {
  .cockpit-kpis,
  .trend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cockpit-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .transfer-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .finance-summary-strip,
  .finance-columns,
  .finance-priority-grid,
  .bookkeeping-checklist,
  .calculator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cockpit-head,
  .trend-card-head {
    display: grid;
  }

  .cockpit-kpis,
  .trend-grid,
  .cockpit-sections {
    grid-template-columns: 1fr;
  }

  .cockpit-block-wide {
    grid-column: auto;
  }

  .trend-compare-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compact-table button,
  .compact-table a,
  .audit-compact button,
  .staff-table-head,
  .staff-table-row {
    grid-template-columns: 1fr;
  }

  .settings-summary,
  .settings-form-grouped,
  .settings-card {
    grid-template-columns: 1fr;
  }

  .settings-card-head,
  .settings-actions {
    display: grid;
  }

  .transfer-stat-grid,
  .transfer-columns {
    grid-template-columns: 1fr;
  }

  .transfer-bar-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .transfer-bar-row strong {
    grid-column: 1 / -1;
    text-align: left;
  }

  .finance-summary-strip,
  .finance-columns,
  .finance-priority-grid,
  .bookkeeping-checklist,
  .calculator-grid,
  .finance-row {
    grid-template-columns: 1fr;
  }

  .calculator-line {
    grid-template-columns: 1fr;
  }

  .finance-head {
    flex-direction: column;
  }

  .finance-head-actions {
    justify-content: flex-start;
  }

  .finance-periods {
    width: 100%;
    overflow-x: auto;
  }

  .finance-bar-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .finance-bar-row strong,
  .finance-bar-row small {
    text-align: left;
  }

  .finance-row strong,
  .finance-row em {
    text-align: left;
  }
}

.settings-form.settings-form-grouped {
  gap: 14px;
  padding: 0;
  border-bottom: 0;
}

.chat-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.chat-panel .compact-head {
  align-items: start;
}

.chat-panel .compact-head h3 {
  margin: 0;
  font-size: 1rem;
}

.chat-panel .compact-head p {
  margin: 3px 0 0;
  font-size: .86rem;
  color: var(--muted);
}

.chat-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.chat-messages {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
}

.chat-messages article {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #e4eaf2;
  border-radius: 8px;
  background: #f8fafc;
}

.chat-messages article.system {
  background: #fff8ed;
  border-color: #ffd8a3;
}

.chat-messages strong {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: .9rem;
  color: var(--navy);
}

.chat-messages small {
  font-weight: 700;
  color: var(--muted);
}

.chat-messages p {
  margin: 0;
  font-size: .9rem;
  color: #314154;
}

.chat-channel {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e8f1ff;
  color: var(--navy);
  font-size: .76rem;
  font-weight: 800;
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.chat-form:not(:has(select)) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.chat-form input,
.chat-form select {
  min-height: 40px;
}

.message-hub {
  display: grid;
  gap: 12px;
}

.message-hub-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.message-hub-summary span {
  display: grid;
  min-width: 92px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
}

.message-hub-summary b {
  color: var(--navy);
  font-size: 1.15rem;
}

.message-hub-summary small {
  color: var(--muted);
  font-weight: 800;
}

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

.message-route-card {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 3px 10px;
  min-height: 118px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
  align-content: start;
}

.message-route-card i,
.message-route-card svg {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  color: var(--orange);
}

.message-route-card strong {
  color: var(--navy);
  font-size: .98rem;
}

.message-route-card span {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.35;
}

.message-route-card.warning {
  border-color: rgba(245, 158, 11, .45);
  background: #fff8ed;
}

.message-route-card.profix {
  border-color: rgba(20, 184, 166, .35);
  background: #f0fdfa;
}

.message-compose-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  overflow: hidden;
}

.message-compose-block > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.message-compose-block > summary::-webkit-details-marker {
  display: none;
}

.message-compose-block > summary span {
  color: var(--navy);
  font-weight: 900;
}

.message-compose-block > summary small {
  color: var(--muted);
  font-weight: 800;
  text-align: right;
}

.message-compose-block > :where(form, .email-automation-panel, .social-monitoring-panel, .contact-route-section) {
  margin: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

.portal-active .contact-request-panel .contact-route-section {
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-chat-panel .chat-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 980px) {
  .message-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .chat-form,
  .chat-form:not(:has(select)),
  .admin-chat-panel .chat-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .message-hub-grid {
    grid-template-columns: 1fr;
  }

  .message-compose-block > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .message-compose-block > summary small {
    text-align: left;
  }
}

@media print {
  body.transfer-anonymous-print .transfer-full-only {
    display: none !important;
  }

  body:not(.transfer-anonymous-print) .transfer-anonymous-only {
    display: none !important;
  }

  body.transfer-anonymous-print .transfer-anonymous-card {
    grid-column: 1 / -1;
  }

  body:has(#professional-transfer) .topbar,
  body:has(#professional-transfer) .portal-tabs,
  body:has(#professional-transfer) .panel-head.customer-head,
  body:has(#professional-transfer) .transfer-actions {
    display: none !important;
  }

  #professional-transfer {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .transfer-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .transfer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Admin rustlaag - definitieve override onderaan. */
.admin-body {
  --admin-canvas: #07182d;
  --admin-panel: #10243b;
  --admin-text: #eef5fb;
  --admin-muted: #a9b8c8;
  --admin-line: rgba(197, 213, 229, 0.18);
  background: linear-gradient(135deg, #06182c 0%, #0b223c 50%, #06111f 100%) !important;
  color: var(--admin-text);
}

.admin-body .topbar {
  background: rgba(7, 24, 45, 0.94) !important;
  border-bottom: 1px solid var(--admin-line);
  box-shadow: none;
}

.admin-body .brand img {
  width: 190px;
  height: auto;
  padding: 6px 8px;
  border-radius: 5px;
  background: #fff;
}

.admin-body .admin-title,
.admin-body .topbar nav a,
.admin-body .plain-btn {
  color: var(--admin-text);
}

.admin-body .system-switch,
.admin-body .admin-tabs,
.admin-body .partners,
.admin-body .cockpit-head,
.admin-body .cockpit-block,
.admin-body .trend-dashboard,
.admin-body .finance-block,
.admin-body .finance-chart-block,
.admin-body .finance-priority,
.admin-body .action-center,
.admin-body .assistant-console,
.admin-body .assistant-panel,
.admin-body .document-review-panel,
.admin-body .quote-box,
.admin-body .staff-console,
.admin-body .staff-sessions,
.admin-body .acceptance-head,
.admin-body .acceptance-summary,
.admin-body .acceptance-priority,
.admin-body .acceptance-group,
.admin-body .security-panel,
.admin-body .communication-panel,
.admin-body .community-head,
.admin-body .community-table,
.admin-body .settings-shell,
.admin-body .settings-card {
  border-color: var(--admin-line) !important;
  background: rgba(16, 36, 59, 0.88) !important;
  color: var(--admin-text);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
}

.admin-body .system-switch a,
.admin-body .admin-tabs button {
  color: var(--admin-muted);
}

.admin-body .system-switch a.active,
.admin-body .admin-tabs button.active {
  color: var(--admin-text);
  background: rgba(255, 130, 0, 0.14) !important;
  box-shadow: inset 0 -2px 0 var(--orange);
}

.admin-body p,
.admin-body small,
.admin-body .cockpit-head p,
.admin-body .panel-head p,
.admin-body .finance-line small,
.admin-body .cockpit-stat-list span,
.admin-body .ranked-list span,
.admin-body .compact-table span,
.admin-body .trend-head p {
  color: var(--admin-muted);
}

.admin-body .metric-card,
.admin-body .summary-card,
.admin-body .action-tile,
.admin-body .finance-stat,
.admin-body .trend-card,
.admin-body .cockpit-stat-list button,
.admin-body .ranked-list button,
.admin-body .compact-table button,
.admin-body .compact-table a,
.admin-body .finance-line,
.admin-body .staff-table-row,
.admin-body .document-review-row,
.admin-body .admin-doc-row,
.admin-body input,
.admin-body select,
.admin-body textarea {
  border-color: var(--admin-line) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--admin-text) !important;
}

.admin-body input::placeholder,
.admin-body textarea::placeholder {
  color: rgba(238, 245, 251, 0.52);
}

.admin-body select option {
  color: #07182d;
}

.admin-body .badge,
.admin-body .status-pill {
  background: rgba(255, 130, 0, 0.15) !important;
  color: #ffd29d !important;
}

.admin-body .metrics,
.admin-body .cockpit-kpis,
.admin-body .finance-summary-strip,
.admin-body .staff-kpi-strip,
.admin-body .acceptance-summary,
.admin-body .community-kpis,
.admin-body .communication-kpis {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 7px !important;
}

.admin-body .metric-card,
.admin-body .summary-card,
.admin-body .finance-stat {
  min-height: 62px !important;
  padding: 9px 11px !important;
}

.admin-body .metric-card span,
.admin-body .summary-card strong,
.admin-body .finance-stat strong {
  font-size: 20px !important;
  line-height: 1.1;
}

.admin-body .overview-grid,
.admin-body .finance-columns,
.admin-body .cockpit-sections {
  gap: 10px !important;
}

.admin-body .community-table {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.admin-body .community-head {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 18px;
  align-items: start;
}

.admin-body .community-head h2 {
  max-width: 420px;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  line-height: 1.08;
}

.admin-body .community-kpis article {
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--admin-line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
}

.admin-body .community-kpis strong {
  color: var(--admin-text);
  font-size: 17px;
  line-height: 1.05;
}

.admin-body .community-kpis span {
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 850;
}

.admin-body .community-row {
  grid-template-columns: minmax(180px, 1.1fr) minmax(160px, 0.85fr) minmax(210px, 1.2fr) minmax(150px, 0.85fr) minmax(210px, auto);
  gap: 10px;
  align-items: center;
  border-color: var(--admin-line) !important;
  background: rgba(16, 36, 59, 0.78) !important;
  color: var(--admin-text) !important;
  box-shadow: none;
}

.admin-body .community-row strong {
  color: var(--admin-text) !important;
}

.admin-body .community-row small,
.admin-body .community-row p {
  color: var(--admin-muted) !important;
}

.admin-body .community-main {
  align-items: flex-start;
}

.admin-body .community-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  justify-content: stretch;
}

.admin-body .community-actions .button {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 12px;
  white-space: normal;
}

@media (max-width: 1250px) {
  .admin-body .community-head {
    grid-template-columns: 1fr;
  }

  .admin-body .community-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-body .community-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .admin-body .community-row,
  .admin-body .community-actions {
    grid-template-columns: 1fr;
  }
}

.assistant-workspace,
.assistant-console,
.assistant-grid,
.document-review-panel,
.document-review-list {
  display: grid;
  gap: 10px;
}

.assistant-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.assistant-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

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

.assistant-permissions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: stretch;
}

.assistant-permissions label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--admin-line, var(--line));
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
}

.assistant-permissions span {
  display: grid;
  gap: 3px;
}

.assistant-permissions small {
  font-size: 12px;
  line-height: 1.35;
}

.document-review-panel {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.document-review-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.document-review-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.document-review-row div {
  min-width: 0;
}

.document-review-row strong,
.document-review-row small {
  display: block;
}

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

@media (max-width: 1100px) {
  .assistant-grid,
  .assistant-permissions {
    grid-template-columns: 1fr;
  }
}
/* Eindcorrecties: donkere huisstijl, maar altijd leesbaar. */
.public-site .homepage-nav span,
.public-site .service-grid p,
.public-site .service-package-strip span,
.public-site .platform-proof span,
.public-site .role-flow p,
.public-site .audience-grid p,
.public-site .pricing-plan-card p,
.public-site .pricing-plan-card li,
.public-site .pricing-compare-head span,
.public-site .pro-value span,
.public-site footer span {
  color: rgba(247, 239, 229, 0.82) !important;
}

.public-site .pricing-plan-card,
.public-site .pricing-compare-head,
.public-site .pricing-compare-row,
.public-site .pricing-addon-card,
.public-site .comparison-card {
  border-color: rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.07) !important;
  color: #f7efe5 !important;
}

.public-site .pricing-plan-card h2,
.public-site .pricing-plan-card h3,
.public-site .pricing-plan-card strong,
.public-site .pricing-compare-head strong,
.public-site .pricing-compare-row strong,
.public-site .pricing-addon-card strong,
.public-site .comparison-card strong {
  color: #fff !important;
}

.public-site .pricing-plan-card .eyebrow,
.public-site .pricing-addon-card .eyebrow {
  color: #ffd29d !important;
}

.public-site .light-panel,
.public-site .signup-card,
.public-site .register-card,
.public-site .registration-card,
.public-site .form-card {
  background: rgba(255,255,255,0.94) !important;
  color: #061a33 !important;
}

.public-site .light-panel *,
.public-site .signup-card *,
.public-site .register-card *,
.public-site .registration-card *,
.public-site .form-card * {
  color: inherit;
}

.plain-btn.app-action,
.portal-active .plain-btn,
.public-site .plain-btn {
  color: rgba(238,245,251,0.78) !important;
}

.login-entry label,
.login-entry .login-panel label,
.login-entry .role-panel label {
  color: #f7efe5 !important;
}

.login-entry .button.primary,
.portal-active .button.primary {
  color: #061a33 !important;
}

.public-site .staff-bundle-strip {
  border-color: rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.07) !important;
  color: #f7efe5 !important;
}

.public-site .staff-bundle-strip li {
  background: rgba(255,255,255,0.07) !important;
  color: #f7efe5 !important;
}

.public-site .staff-bundle-strip strong {
  color: #fff !important;
}

.public-site .staff-bundle-strip span {
  color: rgba(247,239,229,0.82) !important;
}

.public-site .login-panel.portal-panel .pro-value,
.public-site .login-panel.portal-panel .pro-value * {
  color: #061a33 !important;
}

/* ProFix24 huisstijl-laag: een centrale basis voor leesbaarheid en rust. */
:root {
  --pf24-bg: #101821;
  --pf24-bg-soft: #162231;
  --pf24-panel: rgba(255, 255, 255, 0.08);
  --pf24-panel-strong: rgba(255, 255, 255, 0.12);
  --pf24-panel-light: #f8fbfc;
  --pf24-line: rgba(255, 255, 255, 0.16);
  --pf24-text: #eef5fb;
  --pf24-muted: #b9c8d7;
  --pf24-dark-text: #061a33;
  --pf24-dark-muted: #506173;
  --pf24-orange: #ff8200;
  --pf24-orange-soft: #fff2e4;
  --pf24-radius: 8px;
}

.login-entry,
.portal-active {
  background:
    linear-gradient(115deg, rgba(10, 18, 28, 0.96), rgba(15, 30, 45, 0.9)),
    url("assets/profix24-regiecentrum-hero.webp") center/cover fixed no-repeat,
    var(--pf24-bg) !important;
  color: var(--pf24-text) !important;
}

.login-entry .topbar,
.portal-active .topbar {
  background: rgba(9, 18, 30, 0.9) !important;
  border-color: var(--pf24-line) !important;
  box-shadow: none !important;
}

.login-entry .admin-shell,
.portal-active .admin-shell,
.portal-active .dashboard {
  background: transparent !important;
  color: var(--pf24-text) !important;
}

.login-entry .login-panel,
.portal-active .customer-request-card,
.portal-active .professional-section,
.portal-active .customer-section,
.portal-active .compact-business-card,
.portal-active .readiness-panel,
.portal-active .professional-cockpit,
.portal-active .portal-section-nav,
.portal-active .professional-section-nav,
.portal-active .portal-notifications article,
.portal-active .profile-section,
.portal-active .team-row,
.portal-active .chat-panel,
.portal-active .transfer-report,
.portal-active .quote-box,
.portal-active .asset-summary,
.portal-active .route-advice,
.portal-active .empty-state-card {
  background: var(--pf24-panel) !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: var(--pf24-radius) !important;
  color: var(--pf24-text) !important;
  box-shadow: none !important;
}

.portal-active .smart-intake,
.portal-active .form-card,
.portal-active .light-panel,
.portal-active .inline-panel,
.portal-active .document-review-panel {
  background: var(--pf24-panel-light) !important;
  border: 1px solid rgba(6, 26, 51, 0.12) !important;
  color: var(--pf24-dark-text) !important;
}

.portal-active .smart-intake *,
.portal-active .form-card *,
.portal-active .light-panel *,
.portal-active .inline-panel *,
.portal-active .document-review-panel * {
  color: inherit !important;
}

.login-entry h1,
.login-entry h2,
.login-entry h3,
.login-entry strong,
.portal-active h1,
.portal-active h2,
.portal-active h3,
.portal-active h4,
.portal-active strong,
.portal-active summary {
  color: #fff !important;
}

.login-entry p,
.login-entry span,
.login-entry small,
.login-entry label,
.login-entry li,
.portal-active p,
.portal-active span,
.portal-active small,
.portal-active label,
.portal-active li {
  color: var(--pf24-muted) !important;
}

.portal-active .smart-intake label,
.portal-active .smart-intake span,
.portal-active .smart-intake p,
.portal-active .form-card label,
.portal-active .form-card span,
.portal-active .form-card p,
.portal-active .light-panel label,
.portal-active .light-panel span,
.portal-active .light-panel p,
.portal-active .inline-panel label,
.portal-active .inline-panel span,
.portal-active .inline-panel p {
  color: var(--pf24-dark-muted) !important;
}

.portal-active .smart-intake strong,
.portal-active .form-card strong,
.portal-active .light-panel strong,
.portal-active .inline-panel strong {
  color: var(--pf24-dark-text) !important;
}

.login-entry input,
.login-entry select,
.login-entry textarea,
.portal-active input,
.portal-active select,
.portal-active textarea {
  background: #fff !important;
  border: 1px solid rgba(6, 26, 51, 0.18) !important;
  color: var(--pf24-dark-text) !important;
  box-shadow: none !important;
}

.login-entry input::placeholder,
.login-entry textarea::placeholder,
.portal-active input::placeholder,
.portal-active textarea::placeholder {
  color: #8291a1 !important;
}

.login-entry .button,
.portal-active .button,
.portal-active .portal-section-nav a,
.portal-active .professional-section-nav a {
  border-radius: var(--pf24-radius) !important;
  box-shadow: none !important;
}

.login-entry .button.primary,
.portal-active .button.primary {
  background: var(--pf24-orange) !important;
  border-color: var(--pf24-orange) !important;
  color: var(--pf24-dark-text) !important;
}

.login-entry .button.secondary,
.portal-active .button.secondary,
.portal-active .portal-section-nav a,
.portal-active .professional-section-nav a {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--pf24-line) !important;
  color: var(--pf24-text) !important;
}

.portal-active .portal-section-nav a.active,
.portal-active .professional-section-nav a.active {
  background: var(--pf24-orange-soft) !important;
  border-color: var(--pf24-orange) !important;
  color: var(--pf24-dark-text) !important;
}

.portal-active .smart-intake .button.secondary,
.portal-active .form-card .button.secondary,
.portal-active .light-panel .button.secondary,
.portal-active .inline-panel .button.secondary {
  background: #fff !important;
  border-color: rgba(6, 26, 51, 0.16) !important;
  color: var(--pf24-dark-text) !important;
}

.portal-active .badge,
.portal-active .status-pill,
.portal-active .pill {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--pf24-line) !important;
  color: var(--pf24-text) !important;
}

/* Auditcorrecties publieke pagina's: voorkom lichte containers met lichte tekst. */
.public-site .pricing-plan-grid {
  background: rgba(255, 255, 255, 0.035) !important;
}

.public-site .pricing-plan-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f7efe5 !important;
}

.public-site .pricing-plan-card .button.secondary,
.public-site.signup-look .portal-panel .button.secondary {
  background: #fff !important;
  border-color: rgba(6, 26, 51, 0.16) !important;
  color: #061a33 !important;
}

.public-site .pricing-plan-card .price-promo small,
.public-site .pricing-compact-table span,
.public-site .staff-bundle-strip h3,
.public-site .staff-bundle-strip p,
.public-site .staff-bundle-strip span {
  color: rgba(247, 239, 229, 0.82) !important;
}

.public-site .staff-bundle-strip h3,
.public-site .pricing-compact-table strong,
.public-site .pricing-compact-table b {
  color: #fff !important;
}

.public-site .pricing-compact-table div {
  background: rgb(251, 252, 253) !important;
  color: #061a33 !important;
}

.public-site .pricing-compact-table span,
.public-site .pricing-compact-table strong,
.public-site .pricing-compact-table b {
  color: #061a33 !important;
}

.public-site .pricing-compact-table .comparison-head {
  background: #edf3f8 !important;
}

/* Tarieventabel v2: oude kolomvergelijking compact houden, geen waslijst. */
.public-site.pricing-page .pricing-compact-table {
  display: grid !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.public-site.pricing-page .pricing-compact-table > div,
.public-site.pricing-page .pricing-compact-table .comparison-head {
  display: grid !important;
  grid-template-columns: minmax(124px, 1.25fr) repeat(4, minmax(54px, 0.72fr)) !important;
  gap: 4px !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 5px 7px !important;
  border-radius: 0 !important;
}

.public-site.pricing-page .pricing-compact-table span,
.public-site.pricing-page .pricing-compact-table b,
.public-site.pricing-page .pricing-compact-table strong {
  font-size: clamp(9px, 0.68vw, 11px) !important;
  line-height: 1.12 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.public-site.pricing-page .pricing-compact-table > div > b {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 18px !important;
  text-align: center !important;
}

@media (max-width: 980px) {
  .public-site.pricing-page .pricing-compact-table .comparison-head {
    display: grid !important;
  }

  .public-site.pricing-page .pricing-compact-table > div {
    grid-template-columns: minmax(96px, 1.2fr) repeat(4, minmax(42px, 0.68fr)) !important;
    gap: 3px !important;
    padding: 4px 5px !important;
    border-radius: 0 !important;
    background: rgb(251, 252, 253) !important;
  }

  .public-site.pricing-page .pricing-compact-table > div > span {
    font-size: 9px !important;
  }

  .public-site.pricing-page .pricing-compact-table > div > b {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    text-align: center !important;
    font-size: 8.5px !important;
  }

  .public-site.pricing-page .pricing-compact-table > div > b::before {
    content: none !important;
  }
}

.admin-body .button.primary,
.public-site .button.primary {
  color: #061a33 !important;
}

/* Auditcorrecties professionalprofiel: lichte invoerpanelen krijgen donkere tekst. */
.portal-active .profile-section > summary,
.portal-active .profession-picker,
.portal-active .service-area-picker,
.portal-active .document-upload-assistant,
.portal-active .anonymous-profile-preview,
.portal-active .profile-quick-actions {
  background: rgb(251, 252, 253) !important;
  border-color: rgba(6, 26, 51, 0.12) !important;
  color: #061a33 !important;
}

.portal-active .profile-section > summary span,
.portal-active .profile-section > summary small,
.portal-active .profession-picker label,
.portal-active .profession-picker span,
.portal-active .service-area-picker label,
.portal-active .service-area-picker span,
.portal-active .document-upload-assistant span,
.portal-active .anonymous-profile-preview span,
.portal-active .profile-quick-actions span {
  color: #506173 !important;
}

.portal-active .profile-section > summary strong,
.portal-active .profession-picker strong,
.portal-active .service-area-picker strong,
.portal-active .document-upload-assistant strong,
.portal-active .anonymous-profile-preview strong,
.portal-active .profile-quick-actions strong {
  color: #061a33 !important;
}

.portal-active .tag-chip {
  background: #eef6ff !important;
  border-color: rgba(6, 26, 51, 0.12) !important;
  color: #061a33 !important;
}

.portal-active .profile-quick-actions span strong {
  background: #001f44 !important;
  color: #fff !important;
}

.portal-active .tag-chip small,
.portal-active .tag-chip button,
.portal-active .postcode-area-preview,
.portal-active .service-area-heading {
  color: #506173 !important;
}

.portal-active .vehicle-profile-grid {
  background: #f7fafc !important;
  border-color: rgba(6, 26, 51, 0.12) !important;
  color: #061a33 !important;
}

.pricing-profile-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafc;
}

.pricing-profile-grid,
.pricing-import-row,
.pricing-service-rate-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
  align-items: end;
}

.pricing-service-rate-list {
  display: grid;
  gap: 8px;
}

.pricing-service-rate-row {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.material-logistics-card {
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafc;
  overflow: hidden;
}

.material-logistics-card summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 900;
}

.material-logistics-card > .info-grid,
.material-logistics-card .material-logistics-form {
  margin: 10px;
}

.material-logistics-form {
  display: grid;
  gap: 10px;
}

.portal-active .vehicle-profile-grid h3,
.portal-active .vehicle-profile-grid strong,
.portal-active .pricing-profile-card h3,
.portal-active .pricing-profile-card strong {
  color: #061a33 !important;
}

.portal-active .vehicle-profile-grid p,
.portal-active .vehicle-profile-grid label,
.portal-active .vehicle-profile-grid span,
.portal-active .vehicle-profile-grid small,
.portal-active .pricing-profile-card p,
.portal-active .pricing-profile-card label,
.portal-active .pricing-profile-card span,
.portal-active .pricing-profile-card small {
  color: #506173 !important;
}

.portal-active .document-upload-assistant label,
.portal-active .document-upload-assistant span,
.portal-active .document-upload-assistant small {
  color: #506173 !important;
}

.portal-active .document-upload-assistant .button.secondary,
.portal-active .vehicle-profile-grid .button.secondary {
  background: #fff !important;
  border-color: rgba(6, 26, 51, 0.16) !important;
  color: #061a33 !important;
}

.portal-active .document-status-card {
  background: #fff !important;
  border-color: rgba(6, 26, 51, 0.12) !important;
  color: #061a33 !important;
}

.portal-active .document-status-card strong {
  color: #061a33 !important;
}

.portal-active .document-status-card small {
  color: #506173 !important;
}

.portal-active #professional-labels .label-toolbar,
.portal-active #professional-labels .label-table,
.portal-active #professional-team .team-form {
  display: grid;
  gap: 10px;
}

.portal-active .professional-foldout > summary {
  border-bottom: 1px solid var(--pf24-line) !important;
  background: rgba(13, 28, 47, 0.88) !important;
  color: var(--pf24-text) !important;
}

.portal-active .professional-foldout[open] > summary {
  background: rgba(13, 28, 47, 0.96) !important;
}

.portal-active .professional-foldout > summary strong {
  color: #fff !important;
}

.portal-active .professional-foldout > summary small {
  color: var(--pf24-muted) !important;
}

.portal-active .professional-foldout > summary .badge,
.portal-active .professional-foldout > summary b {
  background: rgba(255, 130, 0, 0.16) !important;
  border-color: rgba(255, 130, 0, 0.38) !important;
  color: var(--pf24-orange) !important;
}

.portal-active #professional-labels .label-form {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  padding: 10px;
  border: 1px solid var(--pf24-line) !important;
  border-radius: var(--pf24-radius);
  background: rgba(13, 28, 47, 0.78) !important;
}

.portal-active .pricing-profile-card {
  border-color: var(--pf24-line) !important;
  background: rgba(13, 28, 47, 0.78) !important;
  color: var(--pf24-text) !important;
}

.portal-active .material-logistics-card {
  border-color: var(--pf24-line) !important;
  background: rgba(13, 28, 47, 0.78) !important;
  color: var(--pf24-text) !important;
}

.portal-active .pricing-profile-card .panel-head,
.portal-active .pricing-service-rate-row,
.portal-active .pricing-import-row,
.portal-active .material-logistics-card .info-grid,
.portal-active .material-logistics-form .profile-section-grid {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.portal-active .pricing-profile-card h3,
.portal-active .pricing-profile-card strong,
.portal-active .material-logistics-card strong,
.portal-active .material-logistics-card summary span {
  color: #fff !important;
}

.portal-active .pricing-profile-card p,
.portal-active .pricing-profile-card label,
.portal-active .pricing-profile-card span,
.portal-active .pricing-profile-card small,
.portal-active .material-logistics-card p,
.portal-active .material-logistics-card label,
.portal-active .material-logistics-card small {
  color: var(--pf24-muted) !important;
}

.portal-active .pricing-profile-card .badge {
  background: rgba(255, 130, 0, 0.16) !important;
  border-color: rgba(255, 130, 0, 0.38) !important;
  color: var(--pf24-orange) !important;
}

.portal-active #professional-labels .label-form button {
  min-width: 150px;
}

.portal-active #professional-labels .label-actions {
  justify-content: flex-start;
  padding: 0;
}

.portal-active #professional-labels .label-row,
.portal-active #professional-team .team-summary-strip,
.portal-active #professional-team .team-row,
.portal-active #professional-team .team-edit-grid,
.portal-active #professional-team .team-permission-field,
.portal-active #professional-team .team-personnel-field {
  border-color: var(--pf24-line) !important;
  background: rgba(13, 28, 47, 0.78) !important;
  color: var(--pf24-text) !important;
}

.portal-active #professional-team .team-summary-strip {
  grid-template-columns: repeat(3, minmax(0, 140px));
  justify-content: flex-start;
}

.portal-active #professional-team .team-summary-strip span {
  border: 1px solid rgba(255, 130, 0, 0.24) !important;
  background: rgba(255, 130, 0, 0.12) !important;
  color: var(--pf24-muted) !important;
}

.portal-active #professional-team .team-summary-strip strong {
  color: var(--pf24-orange) !important;
}

.portal-active #professional-labels .label-row {
  grid-template-columns: minmax(170px, 1.2fr) minmax(150px, .7fr) minmax(170px, .9fr) minmax(120px, auto);
}

.portal-active #professional-labels .label-row code {
  white-space: nowrap;
}

.portal-active #professional-labels .label-row code,
.portal-active #professional-team .team-document-list span,
.portal-active #professional-team .team-note {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--pf24-text) !important;
}

.portal-active #professional-labels .label-form label,
.portal-active #professional-labels .label-row small,
.portal-active #professional-team .team-summary-strip span,
.portal-active #professional-team .team-row summary small,
.portal-active #professional-team .team-permission-field label,
.portal-active #professional-team .team-personnel-field label,
.portal-active #professional-team .team-document-list,
.portal-active #professional-team .team-photo-field {
  color: var(--pf24-muted) !important;
}

.portal-active #professional-labels .label-row strong,
.portal-active #professional-team .team-summary-strip strong,
.portal-active #professional-team .team-row summary strong,
.portal-active #professional-team .team-permission-field legend,
.portal-active #professional-team .team-personnel-field legend {
  color: #fff !important;
}

/* Magazijnmodule polish - compact, donkere huisstijl en leesbare acties */
.portal-active #professional-labels {
  --warehouse-card: rgba(7, 25, 45, 0.9);
  --warehouse-card-soft: rgba(13, 37, 63, 0.78);
  --warehouse-border: rgba(127, 154, 185, 0.22);
}

.portal-active #professional-labels .team-summary-strip {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.portal-active #professional-labels .team-summary-strip span {
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 130, 0, 0.22) !important;
  border-radius: 8px;
  background: rgba(255, 130, 0, 0.09) !important;
  color: var(--pf24-muted) !important;
}

.portal-active #professional-labels .team-summary-strip strong {
  color: var(--pf24-orange) !important;
  font-size: 20px;
}

.portal-active #professional-labels .warehouse-control-grid {
  grid-template-columns: minmax(280px, 1.05fr) minmax(220px, .78fr) minmax(220px, .78fr);
  gap: 10px;
  align-items: stretch;
}

.portal-active #professional-labels .warehouse-control-card {
  border-color: var(--warehouse-border) !important;
  background: linear-gradient(180deg, rgba(13, 37, 63, .86), rgba(6, 22, 39, .88)) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}

.portal-active #professional-labels .warehouse-control-card .panel-head {
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: transparent !important;
}

.portal-active #professional-labels .warehouse-control-card h3,
.portal-active #professional-labels .warehouse-control-card strong,
.portal-active #professional-labels .warehouse-add-card summary span {
  color: #fff !important;
}

.portal-active #professional-labels .warehouse-control-card p,
.portal-active #professional-labels .warehouse-control-card label,
.portal-active #professional-labels .warehouse-control-card small,
.portal-active #professional-labels .warehouse-add-card summary small {
  color: var(--pf24-muted) !important;
}

.portal-active #professional-labels .warehouse-location-form,
.portal-active #professional-labels .warehouse-floorplan-form,
.portal-active #professional-labels .warehouse-scan-form {
  gap: 7px;
}

.portal-active #professional-labels .warehouse-location-form input,
.portal-active #professional-labels .warehouse-floorplan-form input,
.portal-active #professional-labels .warehouse-scan-form input,
.portal-active #professional-labels .warehouse-scan-form select,
.portal-active #professional-labels .label-form input,
.portal-active #professional-labels .label-form select {
  min-height: 38px;
  border-color: rgba(148, 163, 184, .28) !important;
  background: rgba(3, 15, 28, .74) !important;
  color: #f8fbff !important;
}

.portal-active #professional-labels .warehouse-location-form input::placeholder,
.portal-active #professional-labels .warehouse-floorplan-form input::placeholder,
.portal-active #professional-labels .warehouse-scan-form input::placeholder,
.portal-active #professional-labels .label-form input::placeholder {
  color: rgba(203, 213, 225, .68) !important;
}

.portal-active #professional-labels .warehouse-floorplan-preview {
  min-height: 96px;
  border-color: rgba(255, 130, 0, .26) !important;
  background: rgba(3, 15, 28, .55) !important;
}

.portal-active #professional-labels .warehouse-location-list {
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
}

.portal-active #professional-labels .warehouse-location-list span {
  border-color: rgba(255,255,255,.1) !important;
  background: rgba(3, 15, 28, .52) !important;
}

.portal-active #professional-labels .warehouse-add-card {
  margin-top: 10px;
  padding: 0;
}

.portal-active #professional-labels .warehouse-add-card > summary {
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(3, 15, 28, .4) !important;
}

.portal-active #professional-labels .warehouse-add-card[open] > summary {
  border-radius: 8px 8px 0 0;
}

.portal-active #professional-labels .warehouse-add-card .label-toolbar {
  padding: 10px;
}

.portal-active #professional-labels .label-form {
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  padding: 0;
  border: 0 !important;
  background: transparent !important;
}

.portal-active #professional-labels .label-form label {
  gap: 4px;
  font-size: 12px;
}

.portal-active #professional-labels .label-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-active #professional-labels .button,
.portal-active #professional-labels .button.secondary,
.portal-active #professional-labels .button.primary {
  min-height: 38px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.portal-active #professional-labels .button.secondary {
  border-color: rgba(255, 130, 0, .28) !important;
  background: rgba(255, 130, 0, .1) !important;
  color: #ffd6ad !important;
}

.portal-active #professional-labels .button.primary {
  background: var(--pf24-orange) !important;
  color: #061a33 !important;
}

.portal-active #professional-labels .label-row {
  grid-template-columns: minmax(220px, 1.35fr) minmax(132px, .58fr) minmax(180px, .9fr) minmax(220px, auto);
  min-height: 50px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(7, 25, 45, .82) !important;
}

.portal-active #professional-labels .label-row-actions {
  justify-content: flex-end;
  gap: 5px;
}

.portal-active #professional-labels .label-row-actions .button {
  min-width: 0;
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
}

.portal-active #professional-labels .warehouse-replenishment-card {
  margin: 10px 0;
}

/* Professional planning + warehouse add polish 2026-07-29 */
.portal-active #professional-planning .professional-foldout-body {
  display: grid;
  gap: 10px;
}

.portal-active #professional-planning .planning-command-center {
  order: 1;
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) minmax(320px, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(7, 25, 45, .92), rgba(13, 37, 63, .84));
}

.portal-active #professional-planning .planning-command-main {
  min-width: 0;
}

.portal-active #professional-planning .planning-command-main h3 {
  margin: 3px 0 4px;
  font-size: 20px;
  line-height: 1.14;
  color: #fff !important;
}

.portal-active #professional-planning .planning-command-main p {
  max-width: 680px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(226, 232, 240, .82) !important;
}

.portal-active #professional-planning .planning-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.portal-active #professional-planning .planning-command-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.portal-active #professional-planning .planning-command-kpis span,
.portal-active #professional-planning .planning-command-alerts span,
.portal-active #professional-planning .planning-section-heading,
.portal-active #professional-planning .planning-concept-card,
.portal-active #professional-planning .planning-final-list a,
.portal-active #professional-planning .planning-import-panel,
.portal-active #professional-planning .planning-staff-readiness {
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 8px;
  background: rgba(7, 25, 45, .74) !important;
  color: #f8fafc !important;
}

.portal-active #professional-planning .planning-command-kpis span {
  min-height: 54px;
  padding: 8px 9px;
}

.portal-active #professional-planning .planning-command-kpis strong {
  display: block;
  color: #ff9b35 !important;
  font-size: 19px;
  line-height: 1;
}

.portal-active #professional-planning .planning-command-kpis small {
  display: block;
  margin-top: 4px;
  color: rgba(226, 232, 240, .72) !important;
  font-size: 11px;
}

.portal-active #professional-planning .planning-command-alerts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.portal-active #professional-planning .planning-command-alerts span {
  padding: 6px 8px;
  font-size: 12px;
  background: rgba(255, 130, 0, .11) !important;
  color: #ffd6ad !important;
}

.portal-active #professional-planning .planning-command-alerts.ok span {
  background: rgba(34, 197, 94, .12) !important;
  color: #bbf7d0 !important;
}

.portal-active #professional-planning .planning-quick-panel {
  order: 2;
  padding: 0;
  overflow: hidden;
}

.portal-active #professional-planning .planning-staff-readiness {
  order: 3;
}

.portal-active #professional-planning .planning-concept-heading {
  order: 4;
}

.portal-active #professional-planning .planning-concept-list {
  order: 5;
}

.portal-active #professional-planning .planning-final-heading {
  order: 6;
}

.portal-active #professional-planning .planning-final-list {
  order: 7;
}

.portal-active #professional-planning .recurring-revenue-strip {
  order: 8;
}

.portal-active #professional-planning .planning-summary-strip {
  order: 9;
}

.portal-active #professional-planning .voice-command-panel {
  order: 10;
}

.portal-active #professional-planning .planning-integration-strip {
  order: 11;
}

.portal-active #professional-planning .recurring-service-panel {
  order: 12;
}

.portal-active #professional-planning .routework-panel {
  order: 13;
}

.portal-active #professional-planning .planning-quick-panel > summary,
.portal-active #professional-planning .recurring-service-panel > summary,
.portal-active #professional-planning .planning-staff-readiness > summary {
  min-height: 42px;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
  background: rgba(3, 15, 28, .34) !important;
}

.portal-active #professional-planning .planning-quick-form {
  padding: 10px;
}

.portal-active #professional-planning .planning-quick-grid-refined {
  grid-template-columns: minmax(210px, 1.2fr) minmax(190px, 1.1fr) minmax(125px, .55fr) minmax(125px, .55fr) minmax(150px, .7fr) minmax(90px, .35fr) minmax(145px, .65fr);
  gap: 7px;
  align-items: end;
}

.portal-active #professional-planning .planning-quick-form label,
.portal-active #professional-labels .warehouse-object-form label {
  gap: 4px;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(226, 232, 240, .76) !important;
}

.portal-active #professional-planning .planning-quick-form :where(input, select, textarea),
.portal-active #professional-labels .warehouse-object-form :where(input, select, textarea) {
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  border-radius: 7px;
  background: rgba(3, 15, 28, .72) !important;
  color: #f8fafc !important;
  font-size: 13px;
}

.portal-active #professional-planning .planning-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
}

.portal-active #professional-planning .planning-section-heading strong {
  display: block;
  color: #fff !important;
  font-size: 14px;
}

.portal-active #professional-planning .planning-section-heading small {
  color: rgba(226, 232, 240, .7) !important;
}

.portal-active #professional-planning .planning-section-heading b {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 130, 0, .16);
  color: #ffb56a;
  white-space: nowrap;
}

.portal-active #professional-planning .planning-match-board {
  order: 1;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(7, 25, 45, .74);
  color: #f8fafc;
}

.portal-active #professional-planning .planning-calendar-board {
  order: 1;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(7, 25, 45, .74);
  color: #f8fafc;
}

.portal-active #professional-planning .planning-calendar-board > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.portal-active #professional-planning .planning-calendar-board > header div {
  display: flex;
  gap: 5px;
}

.portal-active #professional-planning .planning-calendar-board button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
}

.portal-active #professional-planning .planning-calendar-board button.is-active {
  border-color: rgba(255, 130, 0, .45);
  background: rgba(255, 130, 0, .16);
  color: #ffb56a;
}

.portal-active #professional-planning .planning-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.portal-active #professional-planning .planning-calendar-grid article {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 150px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 7px;
  background: rgba(3, 15, 28, .44);
}

.portal-active #professional-planning .planning-calendar-grid h4 {
  margin: 0 0 2px;
  font-size: 12px;
  color: inherit;
}

.portal-active #professional-planning .planning-calendar-grid a {
  display: grid;
  gap: 2px;
  padding: 6px;
  border-radius: 6px;
  background: rgba(255, 130, 0, .12);
  color: inherit;
  text-decoration: none;
}

.portal-active #professional-planning .planning-calendar-grid a.final {
  background: rgba(34, 197, 94, .12);
}

.portal-active #professional-planning .planning-calendar-grid b,
.portal-active #professional-planning .planning-calendar-grid span,
.portal-active #professional-planning .planning-calendar-grid small {
  font-size: 11px;
  line-height: 1.2;
}

.portal-active #professional-planning .planning-match-board > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.portal-active #professional-planning .planning-match-board strong,
.portal-active #professional-planning .planning-match-board h4 {
  color: inherit;
}

.portal-active #professional-planning .planning-match-board small,
.portal-active #professional-planning .planning-match-board span {
  color: rgba(226, 232, 240, .76);
}

.portal-active #professional-planning .planning-match-board > header b {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 130, 0, .16);
  color: #ffb56a;
  white-space: nowrap;
}

.portal-active #professional-planning .planning-match-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr);
  gap: 8px;
}

.portal-active #professional-planning .planning-match-column {
  display: grid;
  align-content: start;
  gap: 7px;
}

.portal-active #professional-planning .planning-match-column h4 {
  margin: 0;
  font-size: 13px;
}

.portal-active #professional-planning .planning-match-column article {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 7px;
  background: rgba(3, 15, 28, .44);
}

.portal-active #professional-planning [data-planning-drag-employee] {
  cursor: grab;
}

.portal-active #professional-planning [data-planning-drag-employee].is-dragging {
  opacity: .55;
}

.portal-active #professional-planning [data-planning-drop-concept].is-drop-target {
  border-color: rgba(255, 130, 0, .75) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 130, 0, .24);
}

.portal-active #professional-planning .planning-match-column article strong {
  font-size: 13px;
  line-height: 1.2;
}

.portal-active #professional-planning .planning-match-column article span,
.portal-active #professional-planning .planning-match-column article small {
  font-size: 12px;
  line-height: 1.25;
}

.portal-active #professional-planning .planning-assigned-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.portal-active #professional-planning .planning-concept-list,
.portal-active #professional-planning .planning-final-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  scrollbar-width: none;
}

.portal-active #professional-planning .planning-concept-list::-webkit-scrollbar,
.portal-active #professional-planning .planning-final-list::-webkit-scrollbar {
  display: none;
}

.portal-active #professional-planning .planning-concept-card {
  padding: 9px;
}

.portal-active #professional-planning .planning-concept-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(130px, .7fr) minmax(90px, .45fr) minmax(90px, .45fr) auto;
  gap: 8px;
  align-items: center;
}

.portal-active #professional-planning .planning-concept-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.portal-active #professional-planning .planning-publication-check {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.portal-active #professional-planning .planning-publication-check span {
  padding: 4px 6px;
  border-radius: 999px;
  font-size: 11px;
}

.portal-active #professional-planning .planning-publication-check .ok {
  background: rgba(34, 197, 94, .12);
  color: #bbf7d0;
}

.portal-active #professional-planning .planning-publication-check .warn {
  background: rgba(255, 130, 0, .12);
  color: #ffd6ad;
}

.portal-active #professional-planning .planning-final-list a {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(230px, 1.2fr) minmax(140px, .7fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  text-decoration: none;
}

.portal-active #professional-planning .recurring-revenue-strip,
.portal-active #professional-planning .planning-summary-strip,
.portal-active #professional-planning .planning-integration-strip {
  gap: 7px;
}

.portal-active #professional-planning .recurring-revenue-strip span,
.portal-active #professional-planning .planning-summary-strip span,
.portal-active #professional-planning .planning-integration-strip span {
  min-height: 48px;
  padding: 8px 9px;
}

.portal-active #professional-labels .warehouse-add-workbench {
  padding: 10px;
}

.portal-active #professional-labels .warehouse-object-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
}

.portal-active #professional-labels .warehouse-form-group {
  display: grid;
  grid-template-columns: repeat(4, minmax(118px, 1fr));
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(7, 25, 45, .74);
}

.portal-active #professional-labels .warehouse-form-group-primary {
  grid-column: 1 / -1;
  grid-template-columns: minmax(240px, 1.2fr) minmax(220px, 1fr) minmax(160px, .7fr) minmax(160px, .7fr);
}

.portal-active #professional-labels .warehouse-form-group legend {
  padding: 0 6px;
  color: #fff;
  font-weight: 900;
  font-size: 12px;
}

.portal-active #professional-labels .warehouse-form-group .wide {
  grid-column: span 2;
}

.portal-active #professional-labels .warehouse-form-submit {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  border: 1px solid rgba(255, 130, 0, .2);
  border-radius: 8px;
  background: rgba(255, 130, 0, .08);
}

.portal-active #professional-labels .warehouse-form-submit span {
  color: rgba(226, 232, 240, .74);
  font-size: 12px;
}

.portal-active #professional-labels .label-actions {
  padding-top: 2px;
}

.theme-light.portal-active #professional-planning .planning-command-center,
.theme-light.portal-active #professional-planning .planning-calendar-board,
.theme-light.portal-active #professional-planning .planning-match-board,
.theme-light.portal-active #professional-planning .planning-command-kpis span,
.theme-light.portal-active #professional-planning .planning-section-heading,
.theme-light.portal-active #professional-planning .planning-concept-card,
.theme-light.portal-active #professional-planning .planning-final-list a,
.theme-light.portal-active #professional-planning .planning-import-panel,
.theme-light.portal-active #professional-planning .planning-staff-readiness,
.theme-light.portal-active #professional-labels .warehouse-form-group {
  background: #fff !important;
  color: #061a33 !important;
  border-color: rgba(6, 26, 51, .12) !important;
}

.theme-light.portal-active #professional-planning .planning-match-column article {
  background: #f8fafc !important;
  border-color: rgba(6, 26, 51, .12) !important;
}

.theme-light.portal-active #professional-planning .planning-calendar-grid article {
  background: #f8fafc !important;
  border-color: rgba(6, 26, 51, .12) !important;
}

.theme-light.portal-active #professional-planning .planning-calendar-grid a {
  color: #061a33 !important;
}

.theme-light.portal-active #professional-planning .planning-command-main h3,
.theme-light.portal-active #professional-planning .planning-calendar-board strong,
.theme-light.portal-active #professional-planning .planning-calendar-board h4,
.theme-light.portal-active #professional-planning .planning-match-board strong,
.theme-light.portal-active #professional-planning .planning-match-board h4,
.theme-light.portal-active #professional-planning .planning-section-heading strong,
.theme-light.portal-active #professional-labels .warehouse-form-group legend {
  color: #061a33 !important;
}

.theme-light.portal-active #professional-planning .planning-command-main p,
.theme-light.portal-active #professional-planning .planning-calendar-board span,
.theme-light.portal-active #professional-planning .planning-calendar-board small,
.theme-light.portal-active #professional-planning .planning-match-board span,
.theme-light.portal-active #professional-planning .planning-match-board small,
.theme-light.portal-active #professional-planning .planning-section-heading small,
.theme-light.portal-active #professional-planning .planning-quick-form label,
.theme-light.portal-active #professional-labels .warehouse-object-form label,
.theme-light.portal-active #professional-labels .warehouse-form-submit span {
  color: #516276 !important;
}

.theme-light.portal-active #professional-planning .planning-quick-form :where(input, select, textarea),
.theme-light.portal-active #professional-labels .warehouse-object-form :where(input, select, textarea) {
  background: #f8fafc !important;
  color: #061a33 !important;
  border-color: rgba(6, 26, 51, .16) !important;
}

.theme-light.portal-active #professional-labels .warehouse-form-submit {
  background: #fff7ed !important;
  border-color: rgba(255, 130, 0, .24) !important;
}

@media (max-width: 1180px) {
  .portal-active #professional-planning .planning-command-center,
  .portal-active #professional-labels .warehouse-object-form {
    grid-template-columns: 1fr;
  }

  .portal-active #professional-planning .planning-match-grid,
  .portal-active #professional-planning .planning-calendar-grid,
  .portal-active #professional-planning .planning-quick-grid-refined,
  .portal-active #professional-planning .planning-concept-row,
  .portal-active #professional-planning .planning-final-list a,
  .portal-active #professional-labels .warehouse-form-group,
  .portal-active #professional-labels .warehouse-form-group-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .portal-active #professional-planning [data-planning-drag-employee] {
    cursor: default;
  }

  .portal-active #professional-planning .planning-match-grid,
  .portal-active #professional-planning .planning-command-kpis,
  .portal-active #professional-planning .planning-quick-grid-refined,
  .portal-active #professional-planning .planning-concept-row,
  .portal-active #professional-planning .planning-final-list a,
  .portal-active #professional-labels .warehouse-form-group,
  .portal-active #professional-labels .warehouse-form-group-primary {
    grid-template-columns: 1fr;
  }

  .portal-active #professional-labels .warehouse-form-group .wide {
    grid-column: auto;
  }
}

.portal-active #professional-team .team-grid {
  display: grid;
  gap: 8px;
}

.portal-active #professional-team .team-row {
  padding: 0;
  overflow: hidden;
}

.portal-active #professional-team .team-row > summary {
  min-height: 52px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04) !important;
}

.portal-active #professional-team .team-edit-grid {
  margin: 0;
  padding: 10px;
  border-width: 1px 0 0;
  border-radius: 0;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.portal-active #professional-team .team-permission-field,
.portal-active #professional-team .team-personnel-field {
  padding: 10px;
  border-radius: 7px;
}

.portal-active #professional-team .team-invite-actions {
  align-items: end;
}

.portal-active #professional-team .hr-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  padding: 10px;
}

.portal-active #professional-team .professional-hr-record-form {
  padding: 10px;
  border-top: 1px solid var(--pf24-line);
}

.portal-active #professional-team .professional-time-admin .compact-table,
.portal-active #professional-team .professional-hr-admin .compact-table,
.portal-active #professional-team .professional-hr-admin .staff-subpanel {
  background: rgba(7, 21, 36, 0.58) !important;
  border-color: var(--pf24-line) !important;
  color: var(--pf24-text) !important;
}

.customer-employee-grid {
  display: grid;
  gap: 8px;
}

.customer-employee-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.1fr) minmax(120px, .7fr) minmax(110px, .6fr) minmax(260px, auto);
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(7, 21, 36, 0.72);
}

.dot-permission-row {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.dot-permission-row label {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  color: var(--pf24-muted) !important;
}

.dot-permission-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dot-permission-row span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 92, 92, 0.58) !important;
}

.dot-permission-row input:checked + span {
  border-color: rgba(62, 207, 142, 0.75);
  background: #24b56b !important;
}

@media (max-width: 980px) {
  .customer-employee-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dot-permission-row {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

.quote-assistant-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 130, 0, 0.26);
  border-radius: 8px;
  background: rgba(255, 130, 0, 0.10);
}

.quote-assistant-panel > div:first-child {
  display: grid;
  gap: 3px;
}

.quote-assistant-panel strong {
  color: #fff !important;
}

.quote-assistant-panel span,
.quote-assistant-panel li {
  color: var(--pf24-muted) !important;
  font-size: 12px;
  line-height: 1.35;
}

.quote-assistant-result {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 7px;
  background: rgba(13, 28, 47, 0.72);
}

.quote-assistant-result ul {
  margin: 0;
  padding-left: 18px;
}

.quote-benchmark-note {
  display: grid;
  gap: 4px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.benchmark-workspace {
  display: grid;
  gap: 14px;
}

.benchmark-head,
.benchmark-layout,
.benchmark-row {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 36, 59, 0.96), rgba(9, 25, 43, 0.96));
  color: #f7efe5;
}

.benchmark-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.benchmark-head h2,
.benchmark-form h3 {
  margin: 0;
  color: #fff;
}

.benchmark-head p,
.benchmark-row span,
.benchmark-row small,
.benchmark-price small {
  margin: 0;
  color: var(--pf24-muted);
}

.benchmark-kpis {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.benchmark-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
}

.benchmark-entry-panel {
  align-self: start;
  background: rgba(255, 255, 255, 0.06);
}

.benchmark-entry-panel > summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.benchmark-entry-panel .benchmark-form { margin-top: 12px; }

.benchmark-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  align-content: start;
}

.benchmark-form h3,
.benchmark-form .wide,
.benchmark-form button {
  grid-column: 1 / -1;
}

.benchmark-form label {
  display: grid;
  gap: 5px;
  color: var(--pf24-muted);
  font-size: 12px;
  font-weight: 800;
}

.benchmark-form input,
.benchmark-form select,
.benchmark-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 8px 9px;
}

html[data-theme="light"] body.admin-body .benchmark-head,
html[data-theme="light"] body.admin-body .benchmark-layout,
html[data-theme="light"] body.admin-body .benchmark-row {
  border-color: #c8d3dc;
  background: #eef3f6;
  color: #172534;
}

html[data-theme="light"] body.admin-body .benchmark-head :where(h2, strong),
html[data-theme="light"] body.admin-body .benchmark-form :where(h3, label),
html[data-theme="light"] body.admin-body .benchmark-entry-panel > summary span,
html[data-theme="light"] body.admin-body .benchmark-row strong {
  color: #172534 !important;
}

html[data-theme="light"] body.admin-body .benchmark-head :where(p, span, small),
html[data-theme="light"] body.admin-body .benchmark-form label,
html[data-theme="light"] body.admin-body .benchmark-entry-panel > summary small,
html[data-theme="light"] body.admin-body .benchmark-row :where(span, small) {
  color: #526577 !important;
}

html[data-theme="light"] body.admin-body .benchmark-form :where(input, select, textarea) {
  border-color: #b8c6d1;
  background: #fff;
  color: #172534;
}

html[data-theme="light"] body.admin-body .benchmark-form :where(input, textarea)::placeholder {
  color: #687b8c;
  opacity: 1;
}

.benchmark-table {
  display: grid;
  gap: 8px;
  align-content: start;
}

.benchmark-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
}

.benchmark-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.benchmark-row strong {
  color: #fff;
}

.benchmark-price {
  text-align: right;
}

.market-monitor-workspace {
  display: grid;
  gap: 14px;
}

.market-monitor-head,
.market-add-panel,
.market-opportunity-strip,
.market-competitor-card {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 36, 59, 0.96), rgba(9, 25, 43, 0.96));
  color: #f7efe5;
}

.market-monitor-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  padding: 14px;
}

.market-monitor-head h2,
.market-opportunity-strip h3 {
  margin: 0 0 5px;
  color: #fff;
}

.market-monitor-head p,
.market-monitor-head small,
.market-competitor-card p,
.market-competitor-card small,
.market-opportunity-strip small {
  margin: 0;
  color: var(--pf24-muted);
  font-weight: 800;
}

.market-monitor-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 8px;
  min-width: 260px;
}

.market-monitor-head > div:first-child h2 {
  color: #ffffff !important;
}

.market-monitor-head > div:first-child p,
.market-monitor-head > div:first-child small {
  color: #dbe7f3 !important;
}

.market-monitor-kpis article {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(191, 219, 254, .24);
  border-radius: 7px;
  background: rgba(255, 255, 255, .09);
}

.market-monitor-kpis article strong {
  color: #ffffff !important;
  font-size: 15px;
  line-height: 1.1;
}

.market-monitor-kpis article span {
  color: #cbd5e1 !important;
  font-size: 11px;
  font-weight: 850;
}

.market-competitor-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.market-competitor-form .wide {
  grid-column: span 2;
}

.market-competitor-form input,
.market-competitor-form select {
  min-height: 34px;
}

.market-quick-workbench {
  display: grid;
  grid-template-columns: minmax(320px, .86fr) minmax(420px, 1.14fr);
  gap: 10px;
  align-items: start;
}

.market-quick-workbench .market-add-panel,
.market-compact-list-panel,
.market-collapsible-block {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 36, 59, 0.96), rgba(9, 25, 43, 0.96));
  color: #f7efe5;
}

.market-quick-workbench .market-add-panel > summary,
.market-collapsible-block > summary {
  min-height: 42px;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.market-competitor-form-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 10px;
}

.market-competitor-form-compact label {
  gap: 4px;
  font-size: 12px;
  color: rgba(226, 232, 240, .76);
}

.market-competitor-form-compact input,
.market-competitor-form-compact select {
  min-height: 32px;
  padding: 6px 8px;
  font-size: 13px;
}

.market-competitor-form-compact button[type="submit"] {
  align-self: end;
  min-height: 34px;
}

.market-sort-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: .78rem;
  color: rgba(226, 232, 240, .72);
}

.market-sort-control select {
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, .24);
  background: rgba(15, 23, 42, .92);
  color: #e5eef8;
  font-size: .82rem;
}

.market-filterbar {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) repeat(4, minmax(120px, .8fr)) auto;
  gap: 7px;
  align-items: end;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 7px;
  background: rgba(3, 15, 28, .34);
}

.market-attention-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.market-attention-strip button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 7px;
  background: rgba(15, 35, 56, .94);
  color: #e5eef8;
  text-align: left;
  cursor: pointer;
}

.market-attention-strip button:hover,
.market-attention-strip button:focus-visible {
  border-color: rgba(255, 139, 26, .72);
  background: rgba(26, 51, 76, .98);
}

.market-attention-strip strong {
  display: grid;
  place-items: center;
  min-width: 30px;
  min-height: 28px;
  border-radius: 6px;
  background: rgba(255, 139, 26, .16);
  color: #fdba74;
  font-size: 14px;
}

.market-attention-strip span {
  font-size: 12px;
  font-weight: 850;
}

html[data-theme="light"] .market-attention-strip button {
  border-color: #d6e0eb;
  background: #ffffff;
  color: #172033;
}

html[data-theme="light"] .market-attention-strip button:hover,
html[data-theme="light"] .market-attention-strip button:focus-visible {
  border-color: #f59e0b;
  background: #fff7ed;
}

html[data-theme="light"] .market-attention-strip strong {
  background: #ffedd5;
  color: #9a3412;
}

.market-bulk-actions,
.market-bulk-report {
  grid-column: 1 / -1;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 8px;
  background: rgba(8, 22, 38, .7);
  color: #f8fafc;
}

.market-bulk-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}

.market-bulk-actions div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.market-bulk-actions strong,
.market-bulk-report strong {
  font-size: .92rem;
}

.market-bulk-actions small,
.market-bulk-report small {
  color: rgba(226, 232, 240, .72);
}

.market-bulk-report {
  padding: 10px;
}

.market-bulk-report > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.market-bulk-report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 7px;
  min-width: min(100%, 420px);
}

.market-bulk-report-grid .mini-stat {
  min-height: 44px;
  padding: 7px;
}

.market-bulk-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.market-bulk-columns article {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 7px;
  background: rgba(15, 23, 42, .38);
  padding: 8px;
}

.market-bulk-columns h4 {
  margin: 0 0 6px;
  font-size: .82rem;
}

.market-bulk-columns ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.market-bulk-columns li {
  display: grid;
  gap: 2px;
  padding: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
}

.market-bulk-columns li.negative {
  border-left: 3px solid #fb7185;
}

.market-bulk-columns li.warning {
  border-left: 3px solid #f59e0b;
}

.market-bulk-columns li.info {
  border-left: 3px solid #38bdf8;
}

.market-bulk-columns li span {
  color: rgba(226, 232, 240, .78);
  font-size: .78rem;
  line-height: 1.35;
}

html[data-theme="light"] .market-bulk-actions,
html[data-theme="light"] .market-bulk-report {
  border-color: #d6e0eb;
  background: #ffffff;
  color: #102033;
}

html[data-theme="light"] .market-bulk-actions small,
html[data-theme="light"] .market-bulk-report small,
html[data-theme="light"] .market-bulk-columns li span {
  color: #475569;
}

html[data-theme="light"] .market-bulk-columns article {
  border-color: #dbe4ee;
  background: #f8fafc;
}

html[data-theme="light"] .market-bulk-columns li {
  background: #ffffff;
}

.market-filterbar label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: rgba(226, 232, 240, .78);
  font-size: 11px;
  font-weight: 850;
}

.market-filterbar input,
.market-filterbar select {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid rgba(148, 163, 184, .3);
  border-radius: 6px;
  background: rgba(15, 23, 42, .92);
  color: #f8fafc;
  font-size: 12px;
}

.market-filter-clear {
  min-height: 32px !important;
}

html[data-theme="light"] .market-filterbar {
  border-color: #d6e0eb;
  background: #eef4f8;
}

html[data-theme="light"] .market-filterbar label {
  color: #334155;
}

html[data-theme="light"] .market-filterbar input,
html[data-theme="light"] .market-filterbar select {
  border-color: #cbd5e1;
  background: #ffffff;
  color: #07182d;
}

@media (max-width: 1180px) {
  .market-filterbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .market-bulk-report > header,
  .market-bulk-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .market-bulk-report-grid,
  .market-bulk-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-search-field {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .market-filterbar {
    grid-template-columns: 1fr 1fr;
  }

  .market-search-field {
    grid-column: 1 / -1;
  }

  .market-attention-strip {
    grid-template-columns: 1fr 1fr;
  }
}

.market-research-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 12px 10px;
}

.market-competitor-modal .market-research-stepper {
  padding: 0;
}

.market-research-stepper span {
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: .68rem;
  font-weight: 700;
  color: rgba(226, 232, 240, .72);
  background: rgba(15, 23, 42, .28);
}

.market-research-stepper span.done {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, .34);
  background: rgba(34, 197, 94, .12);
}

.market-research-stepper span.active {
  color: #fde68a;
  border-color: rgba(245, 158, 11, .42);
  background: rgba(245, 158, 11, .14);
}

.market-research-stepper span.todo {
  opacity: .72;
}

.market-row-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 12px 10px;
}

.market-row-actions .button {
  min-height: 28px;
  padding: 4px 9px;
  font-size: .72rem;
}

.market-financial-inputs {
  grid-column: 1 / -1;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 7px;
  background: rgba(3, 15, 28, .34);
}

.market-financial-inputs > summary {
  padding: 7px 9px;
}

.market-financial-inputs > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
}

.market-compact-list-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.market-compact-list {
  display: grid;
  gap: 6px;
  max-height: 455px;
  overflow: auto;
  scrollbar-width: none;
}

.market-compact-list::-webkit-scrollbar {
  display: none;
}

.market-compact-row {
  display: grid;
  grid-template-columns: 72px minmax(150px, .85fr) minmax(180px, 1.2fr) minmax(125px, .65fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 7px;
  background: rgba(255, 255, 255, .045);
}

.market-compact-row strong,
.market-compact-row small {
  display: block;
}

.market-compact-row p {
  margin: 0;
  color: rgba(226, 232, 240, .78);
  font-size: 12px;
  line-height: 1.28;
}

.market-compact-row > small {
  color: rgba(226, 232, 240, .68);
  font-weight: 800;
}

.market-threat-dot {
  display: inline-flex;
  justify-content: center;
  padding: 5px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 139, 26, .36);
  background: rgba(255, 139, 26, .11);
  color: #ffb56a;
  font-size: 11px;
  font-weight: 950;
}

.market-compact-row.negative .market-threat-dot {
  border-color: rgba(248, 113, 113, .5);
  background: rgba(248, 113, 113, .12);
  color: #fecaca;
}

.market-compact-row.positive .market-threat-dot {
  border-color: rgba(34, 197, 94, .45);
  background: rgba(34, 197, 94, .12);
  color: #bbf7d0;
}

.market-collapsible-block {
  overflow: hidden;
}

.market-collapsible-block > summary span,
.market-financial-inputs > summary span {
  display: block;
  color: #fff;
  font-weight: 950;
}

.market-collapsible-block > summary small,
.market-financial-inputs > summary small {
  color: var(--pf24-muted);
}

.market-collapsible-block > :not(summary) {
  margin: 10px;
}

html[data-theme="light"] .market-quick-workbench .market-add-panel,
html[data-theme="light"] .market-compact-list-panel,
html[data-theme="light"] .market-collapsible-block,
html[data-theme="light"] .market-compact-row,
html[data-theme="light"] .market-financial-inputs {
  background: #fff !important;
  color: #07182d !important;
  border-color: rgba(6, 26, 51, .12) !important;
}

html[data-theme="light"] .market-compact-row p,
html[data-theme="light"] .market-compact-row > small,
html[data-theme="light"] .market-competitor-form-compact label,
html[data-theme="light"] .market-collapsible-block > summary small,
html[data-theme="light"] .market-financial-inputs > summary small {
  color: #526579 !important;
}

html[data-theme="light"] .market-collapsible-block > summary span,
html[data-theme="light"] .market-financial-inputs > summary span {
  color: #07182d !important;
}

html[data-theme="light"] .market-sort-control {
  color: #475569;
}

html[data-theme="light"] .market-sort-control select {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(15, 23, 42, .14);
}

html[data-theme="light"] .market-research-stepper span {
  color: #64748b;
  background: #f8fafc;
  border-color: rgba(15, 23, 42, .12);
}

html[data-theme="light"] .market-research-stepper span.done {
  color: #15803d;
  background: #dcfce7;
  border-color: #86efac;
}

html[data-theme="light"] .market-research-stepper span.active {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}

/* Marktmonitor: concurrentenlijst expliciet leesbaar in light/dark. */
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-list-panel {
  background: #0b2138 !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row {
  grid-template-columns: 76px minmax(170px, 0.9fr) minmax(240px, 1.25fr) minmax(140px, 0.7fr) minmax(104px, auto) !important;
  min-height: 54px !important;
  padding: 9px 10px !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
  background: rgba(255, 255, 255, 0.085) !important;
  box-shadow: inset 3px 0 0 rgba(125, 211, 252, 0.22) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row strong {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row small {
  color: #cbd5e1 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row p {
  color: #e8f0f8 !important;
  font-size: 12.5px !important;
  font-weight: 760 !important;
  line-height: 1.34 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row > small {
  justify-self: start !important;
  padding: 5px 7px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.55) !important;
  color: #dbeafe !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row .button {
  min-height: 30px !important;
  padding: 6px 9px !important;
  border-color: rgba(191, 219, 254, 0.36) !important;
  background: rgba(219, 234, 254, 0.14) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-threat-dot {
  min-width: 62px !important;
  color: #fff7ed !important;
  border-color: rgba(251, 146, 60, 0.72) !important;
  background: rgba(234, 88, 12, 0.34) !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-list-panel {
  background: #ffffff !important;
  border-color: #d6e0eb !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row {
  background: #f8fafc !important;
  border-color: #d6e0eb !important;
  box-shadow: inset 3px 0 0 #0ea5e9 !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row strong {
  color: #07182d !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row small {
  color: #44566c !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row p {
  color: #1f2f43 !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row > small {
  background: #eaf2fb !important;
  color: #1e3a5f !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row .button {
  border-color: #c6d5e5 !important;
  background: #ffffff !important;
  color: #0f2744 !important;
}

/* Marktmonitor: toevoegen pas na klik, concurrenten als openklapbare lijst. */
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-quick-workbench {
  grid-template-columns: minmax(0, 1fr) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-add-panel {
  width: fit-content !important;
  min-width: min(100%, 260px) !important;
  max-width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-add-panel > summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(125, 211, 252, 0.38) !important;
  border-radius: 7px !important;
  background: rgba(14, 165, 233, 0.18) !important;
  color: #f8fbff !important;
  cursor: pointer !important;
  list-style: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-add-panel > summary::-webkit-details-marker {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-add-panel > summary span {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-add-panel > summary small {
  color: #cfe8ff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-add-panel[open] {
  width: 100% !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  background: #0b2138 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-add-panel[open] > summary {
  display: flex !important;
  width: 100% !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 7px 7px 0 0 !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-list {
  max-height: calc(100vh - 310px) !important;
  min-height: 220px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row {
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row > .market-compact-summary {
  display: grid !important;
  grid-template-columns: 76px minmax(170px, 0.9fr) minmax(240px, 1.25fr) minmax(140px, 0.7fr) 64px !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 54px !important;
  padding: 9px 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-row-open {
  justify-self: end !important;
  min-width: 48px !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(191, 219, 254, 0.34) !important;
  border-radius: 999px !important;
  background: rgba(219, 234, 254, 0.13) !important;
  color: #ffffff !important;
  font-size: 0 !important;
  font-weight: 950 !important;
  text-align: center !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-row-open::after {
  content: "Info" !important;
  font-size: 11px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-detail {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  padding: 10px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.22) !important;
  background: rgba(2, 12, 24, 0.42) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-block {
  display: grid !important;
  gap: 4px !important;
  align-content: start !important;
  min-width: 0 !important;
  padding: 8px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 7px !important;
  background: rgba(15, 23, 42, 0.34) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-detail strong {
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-detail p,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-detail small {
  color: #dbe7f3 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-financials,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-signals,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-sources,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-dossier {
  grid-column: span 2 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-financials dl {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 2px 0 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-dossier {
  grid-column: 1 / -1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-dossier dl {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 2px 0 0 !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-dossier dl::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-financials dl span,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-dossier dl span,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-signals span,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-sources span {
  display: grid !important;
  gap: 2px !important;
  padding: 6px 7px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: #e8f0f8 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-financials dt {
  color: #a9bdd3 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-dossier dt {
  color: #a9bdd3 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-financials dd {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-dossier dd {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  line-height: 1.28 !important;
  overflow-wrap: anywhere !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-row-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  align-content: start !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-add-panel > summary {
  background: #eaf6ff !important;
  border-color: #b8dcf5 !important;
  color: #08314f !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-add-panel > summary small {
  color: #31536d !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-add-panel[open] {
  background: #ffffff !important;
  border-color: #d6e0eb !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-detail {
  background: #eef5fb !important;
  border-color: #d6e0eb !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-block {
  background: #ffffff !important;
  border-color: #d6e0eb !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-row-open {
  background: #ffffff !important;
  border-color: #c6d5e5 !important;
  color: #0f2744 !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-detail strong {
  color: #07182d !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-detail p,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-detail small {
  color: #334155 !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-financials dl span,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-dossier dl span,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-signals span,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-sources span {
  background: #eef5fb !important;
  color: #24364a !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-financials dt {
  color: #536579 !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-dossier dt {
  color: #536579 !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-financials dd {
  color: #07182d !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-dossier dd {
  color: #07182d !important;
}

.market-competitor-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
  background: rgba(2, 6, 23, 0.74) !important;
  backdrop-filter: blur(8px) !important;
}

.market-competitor-modal {
  display: grid !important;
  gap: 12px !important;
  width: min(1120px, calc(100vw - 34px)) !important;
  max-height: calc(100vh - 34px) !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  padding: 16px !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 12px !important;
  background: #071829 !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.44) !important;
  color: #eef6ff !important;
}

.market-competitor-modal::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.market-competitor-modal-head,
.market-competitor-modal-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.market-competitor-modal-head h2 {
  margin: 2px 0 2px !important;
  color: #ffffff !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
}

.market-competitor-modal-head p,
.market-competitor-modal small,
.market-competitor-modal p {
  color: #cbd8e6 !important;
}

.market-competitor-modal-grid,
.market-modal-two-col {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.market-modal-two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.market-competitor-modal-grid article,
.market-competitor-modal-section {
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 9px !important;
  background: rgba(15, 23, 42, 0.52) !important;
}

.market-competitor-modal strong {
  color: #ffffff !important;
  font-weight: 950 !important;
}

.market-modal-section-title {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}

.market-modal-dl {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin: 0 !important;
}

.market-modal-dossier {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.market-modal-dl span,
.market-modal-stack span {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  padding: 8px !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.market-modal-dl dt {
  color: #9fb4ca !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.market-modal-dl dd {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  overflow-wrap: anywhere !important;
}

.market-modal-stack {
  display: grid !important;
  gap: 7px !important;
}

.market-modal-stack p {
  margin: 0 !important;
}

.market-competitor-edit-form {
  display: grid !important;
  gap: 12px !important;
}

.market-edit-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.market-edit-grid label {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  color: #dbe8f5 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.market-edit-grid label.wide {
  grid-column: span 2 !important;
}

.market-edit-grid :where(input, select, textarea) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 7px !important;
  background: #0d2238 !important;
  color: #f8fbff !important;
}

.market-edit-analysis {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.market-edit-analysis textarea {
  min-height: 84px !important;
  resize: vertical !important;
}

.market-edit-financials > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  cursor: pointer !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

.market-edit-financials[open] > summary {
  margin-bottom: 12px !important;
}

html[data-theme="light"] .market-competitor-modal-backdrop {
  background: rgba(15, 23, 42, 0.42) !important;
}

html[data-theme="light"] .market-competitor-modal {
  background: #ffffff !important;
  border-color: #d6e0eb !important;
  color: #102033 !important;
}

html[data-theme="light"] .market-competitor-modal-head h2,
html[data-theme="light"] .market-competitor-modal strong {
  color: #07182d !important;
}

html[data-theme="light"] .market-competitor-modal-head p,
html[data-theme="light"] .market-competitor-modal small,
html[data-theme="light"] .market-competitor-modal p {
  color: #42566d !important;
}

html[data-theme="light"] .market-competitor-modal-grid article,
html[data-theme="light"] .market-competitor-modal-section {
  background: #f6f9fc !important;
  border-color: #d6e0eb !important;
}

html[data-theme="light"] .market-modal-dl span,
html[data-theme="light"] .market-modal-stack span {
  background: #ffffff !important;
  border: 1px solid #dbe5ef !important;
}

html[data-theme="light"] .market-modal-dl dt {
  color: #5b6d82 !important;
}

html[data-theme="light"] .market-modal-dl dd {
  color: #07182d !important;
}

html[data-theme="light"] body.admin-body .market-competitor-modal .market-edit-grid label,
html[data-theme="light"] body.admin-body .market-competitor-modal .market-edit-financials > summary {
  color: #07182d !important;
}

html[data-theme="light"] body.admin-body .market-competitor-modal .market-edit-grid :where(input, select, textarea) {
  border-color: #c9d6e2 !important;
  background: #ffffff !important;
  color: #07182d !important;
}

@media (max-width: 980px) {
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row > .market-compact-summary {
    grid-template-columns: 70px minmax(150px, 1fr) 72px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row > .market-compact-summary p,
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row > .market-compact-summary > small {
    grid-column: 2 / -1 !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-detail {
    grid-template-columns: 1fr 1fr !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-financials,
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-signals,
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-sources,
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-dossier {
    grid-column: 1 / -1 !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-dossier dl {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .market-competitor-modal-grid,
  .market-modal-two-col,
  .market-modal-dl,
  .market-modal-dossier,
  .market-edit-grid,
  .market-edit-analysis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-row > .market-compact-summary,
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-compact-detail {
    grid-template-columns: 1fr !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-financials dl {
    grid-template-columns: 1fr !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-detail-dossier dl {
    grid-template-columns: 1fr !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="market-monitor"] .market-row-open {
    justify-self: start !important;
  }

  .market-competitor-modal {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    padding: 12px !important;
  }

  .market-competitor-modal-head,
  .market-competitor-modal-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .market-competitor-modal-grid,
  .market-modal-two-col,
  .market-modal-dl,
  .market-modal-dossier,
  .market-edit-grid,
  .market-edit-analysis {
    grid-template-columns: 1fr !important;
  }

  .market-edit-grid label.wide {
    grid-column: auto !important;
  }
}

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

.market-competitor-card {
  display: grid;
  gap: 10px;
  padding: 13px;
}

.market-competitor-card.negative {
  border-color: rgba(255, 139, 26, 0.58);
}

.market-card-head,
.market-card-actions,
.market-source-status {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.market-card-head strong {
  display: block;
  color: #fff;
  font-size: 18px;
}

.market-card-head > span {
  border: 1px solid rgba(255, 139, 26, 0.5);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 139, 26, 0.14);
  color: var(--orange);
  font-size: 12px;
  font-weight: 950;
}

.market-financials {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.market-source-status {
  grid-column: 1 / -1;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
}

.market-financials > span {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
}

.market-financials strong,
.market-source-status b {
  color: #fff;
  font-weight: 950;
}

.market-signals {
  display: grid;
  gap: 6px;
}

.market-signals span,
.market-opportunity-strip article {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 7px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 850;
}

.market-signals .positive {
  border-color: rgba(20, 184, 166, 0.35);
}

.market-signals .warning {
  border-color: rgba(255, 139, 26, 0.4);
}

.market-opportunity-strip {
  padding: 13px;
}

.market-opportunity-strip > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.market-opportunity-strip article {
  display: grid;
  gap: 4px;
}

.market-opportunity-strip span {
  color: var(--orange);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.branch-monitor-workspace {
  display: grid;
  gap: 16px;
}

.branch-monitor-hero,
.branch-monitor-card,
.branch-monitor-kpis article {
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(145deg, rgba(8, 32, 56, 0.96), rgba(10, 25, 43, 0.98));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.branch-monitor-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 8px;
}

.branch-monitor-hero small,
.branch-monitor-card small,
.branch-source-list small,
.branch-competitor-list small,
.branch-alert-list span,
.branch-action-list span {
  color: rgba(226, 232, 240, 0.72);
}

.branch-monitor-hero h3,
.branch-monitor-card h3 {
  margin: 0 0 8px;
  color: #f8fafc;
}

.branch-monitor-hero p,
.branch-monitor-card p {
  margin: 0;
  color: rgba(226, 232, 240, 0.78);
}

.branch-monitor-kpis {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.branch-monitor-kpis article {
  min-height: 76px;
  padding: 14px;
  border-radius: 8px;
}

.branch-monitor-kpis strong {
  display: block;
  color: #ff9b2f;
  font-size: 1.45rem;
  line-height: 1;
}

.branch-monitor-kpis span {
  display: block;
  margin-top: 8px;
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.84rem;
}

.branch-monitor-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.branch-monitor-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.branch-monitor-card {
  padding: 16px;
  border-radius: 8px;
  min-width: 0;
}

.branch-price-row,
.branch-source-list > div,
.branch-competitor-list > div,
.branch-alert-list > div,
.branch-action-list li {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.branch-price-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.branch-price-row strong,
.branch-source-list strong,
.branch-competitor-list strong,
.branch-alert-list strong,
.branch-action-list strong {
  color: #f8fafc;
}

.branch-price-row span,
.branch-source-list span,
.branch-competitor-list span {
  color: rgba(226, 232, 240, 0.72);
}

.branch-action-list {
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.branch-alert-list {
  display: grid;
  gap: 0;
}

.branch-alert-list .warning strong,
.branch-alert-list .danger strong {
  color: #ffb15c;
}

.branch-alert-list .ok strong {
  color: #86efac;
}

.branch-completion-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
}

.branch-completion-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.branch-completion-summary article {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.branch-completion-summary strong {
  color: #ff9b2f;
  font-size: 1.22rem;
  line-height: 1;
}

.branch-completion-summary span {
  color: rgba(226, 232, 240, 0.74);
  font-size: 0.78rem;
}

.branch-completion-list {
  display: grid;
  gap: 8px;
}

.branch-completion-row {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.42);
}

.branch-completion-row summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.branch-completion-row summary::-webkit-details-marker {
  display: none;
}

.branch-completion-row summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.branch-completion-row summary strong,
.branch-completion-body h4 {
  color: #f8fafc;
}

.branch-completion-row summary small,
.branch-completion-body p,
.branch-completion-body small,
.branch-completion-body li span {
  color: rgba(226, 232, 240, 0.74);
}

.branch-completion-row summary b {
  min-width: 54px;
  padding: 6px 8px;
  border-radius: 999px;
  color: #0f172a;
  background: #ffb15c;
  text-align: center;
}

.branch-completion-row.ok summary b {
  background: #86efac;
}

.branch-completion-row.attention summary b {
  background: #fca5a5;
}

.branch-completion-body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 12px;
  padding: 0 12px 12px;
}

.branch-completion-body h4 {
  margin: 0 0 6px;
  font-size: 0.86rem;
}

.branch-completion-body ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.branch-completion-body li {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.branch-completion-body li strong {
  color: #f8fafc;
  font-size: 0.84rem;
}

body.light-theme .branch-completion-panel,
body.light-theme .branch-completion-row {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

body.light-theme .branch-completion-summary article,
body.light-theme .branch-completion-body li {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.1);
}

body.light-theme .branch-completion-row summary strong,
body.light-theme .branch-completion-body h4,
body.light-theme .branch-completion-body li strong {
  color: #0f172a;
}

body.light-theme .branch-completion-row summary small,
body.light-theme .branch-completion-body p,
body.light-theme .branch-completion-body small,
body.light-theme .branch-completion-body li span,
body.light-theme .branch-completion-summary span {
  color: #475569;
}

@media (max-width: 900px) {
  .benchmark-head,
  .benchmark-layout,
  .benchmark-row,
  .market-monitor-head,
  .market-monitor-grid,
  .market-opportunity-strip > div,
  .market-competitor-form {
    grid-template-columns: 1fr;
  }

  .branch-monitor-kpis,
  .branch-monitor-grid,
  .branch-monitor-grid.three,
  .branch-completion-summary,
  .branch-completion-body {
    grid-template-columns: 1fr;
  }

  .branch-monitor-hero {
    flex-direction: column;
  }

  .benchmark-head,
  .market-monitor-head {
    display: grid;
  }

  .benchmark-price,
  .market-monitor-kpis {
    text-align: left;
    min-width: 0;
  }

  .market-competitor-form .wide {
    grid-column: auto;
  }

  .market-financials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.portal-section-nav .portal-sidebar-logout,
.professional-section-nav .portal-sidebar-logout,
.admin-tabs .portal-sidebar-logout {
  margin-top: auto;
  color: var(--blue);
  background: #fff7ed;
  border-color: rgba(255, 128, 0, 0.38);
}

.bot-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.request-photo-uploader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(6, 26, 51, 0.12);
  border-radius: 8px;
  background: #f7fafc;
}

.request-photo-uploader > div:first-child {
  display: grid;
  gap: 3px;
}

.request-photo-uploader strong {
  color: #061a33;
}

.request-photo-uploader span,
.request-photo-uploader .form-message {
  color: #506173;
}

.photo-pick-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(6, 26, 51, 0.16);
  border-radius: 6px;
  background: #fff;
  color: #061a33;
  font-weight: 800;
  cursor: pointer;
}

.photo-pick-button input {
  display: none;
}

.request-photo-preview,
.job-photo-strip {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.request-photo-preview figure,
.job-photo-strip figure {
  width: 112px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(6, 26, 51, 0.12);
  border-radius: 7px;
  background: #fff;
}

.request-photo-preview img,
.job-photo-strip img {
  display: block;
  width: 100%;
  height: 76px;
  object-fit: cover;
  background: #e8eef5;
}

.request-photo-preview figcaption,
.job-photo-strip figcaption {
  padding: 6px 7px;
  color: #506173;
  font-size: 11px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-overview-hero {
  display: grid;
  grid-template-columns: minmax(260px, .95fr) minmax(0, 1.45fr);
  gap: 12px;
  align-items: stretch;
}

.customer-next-action,
.customer-status-strip,
.customer-overview-list,
.mini-job-card,
.job-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

.customer-next-action {
  display: grid;
  gap: 6px;
  padding: 14px;
  text-decoration: none;
}

.customer-next-action small,
.customer-next-action span {
  color: var(--muted);
}

.customer-next-action strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.customer-status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
}

.customer-status-strip article {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 72px;
  padding: 10px;
  background: var(--surface-2);
}

.customer-status-strip strong {
  color: var(--ink);
  font-size: 18px;
}

.customer-status-strip span {
  color: var(--muted);
  font-size: 12px;
}

html[data-theme="dark"] .customer-next-action,
html[data-theme="dark"] .customer-status-strip,
html[data-theme="dark"] .customer-overview-list,
html[data-theme="dark"] .mini-job-card,
html[data-theme="dark"] .job-card {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(13, 28, 47, .88);
  color: #f7efe5;
}

html[data-theme="dark"] .customer-next-action strong,
html[data-theme="dark"] .customer-status-strip strong {
  color: #fff;
}

html[data-theme="dark"] .customer-next-action small,
html[data-theme="dark"] .customer-next-action span,
html[data-theme="dark"] .customer-status-strip span {
  color: rgba(247, 239, 229, .72);
}

.customer-status-strip span {
  color: rgba(247, 239, 229, 0.72);
  font-size: 12px;
}

.property-manager-workspace {
  display: grid;
  gap: 12px;
  max-width: 1320px;
}

.property-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin: 0;
}

.property-summary-strip article,
.property-object-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(13, 28, 47, 0.78);
  color: #f7efe5;
}

.property-summary-strip article {
  display: grid;
  gap: 2px;
  min-height: 66px;
  padding: 9px 11px;
}

.property-summary-strip strong {
  color: #ff8a00;
  font-size: 18px;
  line-height: 1;
}

.property-summary-strip span,
.property-object-card span,
.property-object-card small {
  color: rgba(247, 239, 229, 0.72);
  font-size: 12px;
}

.property-workbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 138, 0, 0.24);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 138, 0, 0.12), rgba(13, 28, 47, 0.64));
}

.property-workbar div {
  display: grid;
  gap: 2px;
}

.property-workbar strong {
  color: #fff;
  font-size: 14px;
}

.property-workbar span {
  color: rgba(247, 239, 229, 0.72);
  font-size: 12px;
}

.property-workbar .button {
  width: auto;
  min-height: 36px;
  padding: 8px 12px;
  white-space: nowrap;
}

.property-object-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
  align-items: start;
  margin-bottom: 0;
}

.property-object-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  align-self: start;
  overflow: hidden;
}

.property-object-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.property-object-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.property-object-head small {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(255, 138, 0, 0.34);
  border-radius: 999px;
  background: rgba(255, 138, 0, 0.12);
  color: #ffb15a;
  font-size: 11px;
  font-weight: 900;
}

.property-object-card strong {
  color: #fff;
}

.property-manager-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255, 138, 0, 0.22);
  border-radius: 8px;
  background: rgba(255, 138, 0, 0.08);
}

.property-manager-card .entity-avatar {
  width: 42px;
  height: 42px;
  font-size: 12px;
}

.property-manager-card > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.property-manager-card small {
  color: #ffb15a;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.property-manager-card strong,
.property-manager-card em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-manager-card em {
  color: rgba(247, 239, 229, 0.70);
  font-size: 12px;
  font-style: normal;
}

.property-manager-contact {
  display: flex;
  gap: 5px;
}

.property-manager-contact .icon-chip {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-weight: 950;
  text-decoration: none;
}

.property-object-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.property-object-actions .plain-btn {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

.property-object-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.property-object-meta span {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(255, 255, 255, 0.055);
  white-space: nowrap;
}

.property-unit-strip,
.property-resident-strip,
.property-smart-systems-strip,
.property-booking-strip {
  display: grid;
  gap: 6px;
}

.property-unit-strip,
.property-smart-systems-strip,
.property-booking-strip {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.property-unit-strip span,
.property-resident-strip span,
.property-smart-systems-strip span,
.property-booking-strip span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  min-width: 0;
}

.property-unit-strip b,
.property-resident-strip b,
.property-smart-systems-strip b,
.property-booking-strip b {
  color: #fff;
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-unit-strip small,
.property-resident-strip small,
.property-smart-systems-strip small,
.property-booking-strip small,
.property-booking-strip em {
  color: rgba(247, 239, 229, 0.68);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

.property-smart-systems-strip span {
  border-color: rgba(34, 197, 94, .2);
  background: rgba(34, 197, 94, .07);
}

.property-booking-strip span {
  align-items: flex-start;
  flex-direction: column;
}

.property-booking-strip span.attention {
  border-color: rgba(248, 113, 113, .32);
  background: rgba(248, 113, 113, .10);
}

.property-booking-strip small,
.property-booking-strip em {
  text-align: left;
  white-space: normal;
}

.property-booking-strip > strong {
  align-self: center;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(248, 113, 113, .16);
  color: #fecaca;
  font-size: 11px;
}

.property-next-action {
  padding: 8px 10px;
  border-left: 3px solid #ff8a00;
  border-radius: 8px;
  background: rgba(255, 138, 0, 0.1);
}

.property-next-action strong {
  color: #f7efe5;
  font-size: 12px;
}

.complex-manager-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 138, 0, 0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 138, 0, 0.10), rgba(8, 27, 47, 0.86));
}

.complex-manager-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.complex-manager-head small {
  color: #ffad4d;
  font-size: 0.74rem;
  font-weight: 950;
  text-transform: uppercase;
}

.complex-manager-head h3,
.complex-object-card strong,
.complex-tenant-queue > strong {
  margin: 0;
  color: #fff;
}

.complex-manager-head p,
.complex-object-card small,
.complex-checklist small,
.complex-tenant-queue small {
  margin: 0;
  color: rgba(226, 232, 240, 0.74);
  line-height: 1.35;
}

.complex-manager-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.complex-manager-summary span,
.complex-object-card,
.complex-tenant-queue {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(5, 20, 36, 0.58);
}

.complex-manager-summary span {
  padding: 8px 10px;
}

.complex-manager-summary strong {
  display: block;
  color: #ff9f2e;
  font-size: 1.05rem;
}

.complex-manager-summary small {
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.78rem;
}

.complex-tenant-queue {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.complex-tenant-queue article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(180px, auto);
  gap: 8px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.complex-tenant-queue b,
.complex-tenant-queue small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.complex-tenant-queue em,
.complex-tenant-queue time {
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(226, 232, 240, 0.78);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.complex-tenant-queue article.urgent time {
  background: rgba(255, 138, 0, 0.18);
  color: #ffb45c;
}

.complex-tenant-queue article.overdue time,
.complex-tenant-queue article.needs-owner em {
  background: rgba(248, 113, 113, 0.18);
  color: #fecaca;
}

.complex-escalation-actions {
  display: grid;
  grid-template-columns: minmax(118px, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.complex-escalation-actions select {
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.94);
  color: #061a33;
  font-size: 0.78rem;
  font-weight: 850;
}

.complex-manager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 10px;
}

.complex-object-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.complex-object-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.complex-object-card header span,
.complex-object-card header strong,
.complex-object-card header small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.complex-object-card header b {
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(255, 138, 0, 0.16);
  color: #ffb45c;
  font-size: 0.72rem;
}

.complex-checklist {
  display: grid;
  gap: 7px;
}

.complex-checklist span {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.complex-checklist i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #ff8a00;
}

.complex-checklist strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
}

.complex-system-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.complex-system-strip small {
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.complex-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.service-search-picker {
  display: grid;
  gap: 8px;
  position: relative;
}

.service-search-picker label {
  display: grid;
  gap: 6px;
}

.service-search-selected {
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid rgba(255, 138, 0, 0.42);
  border-radius: 999px;
  background: rgba(255, 138, 0, 0.12);
  color: #ffb15a;
  font-size: 12px;
  font-weight: 900;
}

.service-search-results {
  display: grid;
  gap: 5px;
  max-height: 230px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(4, 16, 30, 0.96);
}

.service-search-results:empty {
  display: none;
}

.service-search-results button {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
  color: #f7efe5;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.service-search-results button:hover,
.service-search-results button:focus-visible {
  border-color: rgba(255, 138, 0, 0.7);
  background: rgba(255, 138, 0, 0.16);
  outline: none;
}

.property-object-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.property-object-form .wide {
  grid-column: 1 / -1;
}

.property-object-editor,
.property-form-section {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(13, 28, 47, 0.7);
}

.property-object-editor {
  padding: 0;
}

.property-object-editor > summary,
.property-form-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.property-object-editor > summary small,
.property-form-section > summary small {
  color: rgba(247, 239, 229, 0.66);
  font-size: 11px;
  font-weight: 700;
}

.property-object-editor[open] > summary,
.property-form-section[open] > summary {
  border-bottom: 1px solid rgba(255, 138, 0, 0.28);
  color: #ff8a00;
}

.property-object-editor > .property-object-form {
  padding: 10px;
}

.property-form-section {
  padding: 0;
}

.property-form-section > .property-repeater,
.property-form-section > .compact-fieldset {
  margin: 10px;
}

.compact-fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}

.compact-fieldset legend {
  padding: 0 6px;
  color: #ff8a00;
  font-size: 12px;
  font-weight: 800;
}

.property-repeater {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(4, 16, 30, 0.28);
}

.property-repeater legend {
  padding: 0 6px;
  color: #ff8a00;
  font-size: 12px;
  font-weight: 800;
}

.property-repeater-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
  align-items: end;
}

.property-repeater-fields .boolean-dot-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 39px;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.yesno-dot,
.inline-yesno-dot {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

.yesno-dot {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.inline-yesno-dot {
  width: 10px;
  height: 10px;
  vertical-align: middle;
}

.yesno-dot.yes,
.inline-yesno-dot.yes {
  background: #22c55e;
}

.yesno-dot.no,
.inline-yesno-dot.no {
  background: #ef4444;
}

.yesno-dot:focus-visible {
  outline: 2px solid #ff8a00;
  outline-offset: 3px;
}

.property-repeater-fields button {
  min-height: 39px;
}

.property-repeater-list {
  display: grid;
  gap: 6px;
}

.property-repeater-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.property-repeater-row span {
  color: rgba(247, 239, 229, 0.9);
  font-size: 12px;
}

.property-dossier {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.property-dossier summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  cursor: pointer;
  font-weight: 800;
}

.property-dossier summary small {
  color: #ff8a00;
}

.property-dossier-grid,
.property-inspection-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  padding: 10px;
}

.property-dossier-grid section,
.property-inspection-row,
.damage-draft,
.photo-guidance {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(4, 16, 30, 0.42);
  padding: 10px;
}

.property-dossier-grid h4 {
  margin: 0 0 8px;
  font-size: 13px;
}

.property-dossier-grid p,
.property-inspection-row {
  margin: 0 0 8px;
}

.property-inspection-form .wide,
.photo-guidance {
  grid-column: 1 / -1;
}

.photo-guidance {
  display: grid;
  gap: 3px;
}

.photo-guidance strong {
  color: #ff8a00;
  font-size: 12px;
}

.photo-guidance span {
  color: rgba(247, 239, 229, 0.78);
}

.damage-draft {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.damage-draft b {
  color: #ff8a00;
}

.damage-draft ul {
  margin: 0;
  padding-left: 18px;
}

.rent-ledger-row {
  display: grid;
  gap: 4px;
}

.property-dossier-grid em {
  display: block;
  margin-top: 5px;
  color: #ffbd7a;
  font-style: normal;
  font-size: 11px;
}

.compact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.mini-job-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  text-decoration: none;
}

.mini-job-card strong {
  color: #fff;
}

.mini-job-card span,
.mini-job-card small {
  color: rgba(247, 239, 229, 0.72);
}

.job-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.job-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.job-card-head h2 {
  margin: 2px 0 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.15;
}

.job-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.job-card-meta span {
  max-width: 260px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(247, 239, 229, 0.78);
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-card .description {
  margin: 0;
  color: rgba(247, 239, 229, 0.84);
}

.job-card .info-grid p,
.job-card .asset-summary,
.job-card .chat-panel,
.job-card .approval-panel,
.job-card .quote-lines-form {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.job-card .info-grid strong,
.job-card .asset-summary strong {
  color: #fff;
}

.job-card .info-grid p,
.job-card .asset-summary span,
.job-card .asset-summary small {
  color: rgba(247, 239, 229, 0.78);
}

.job-card .job-photo-strip figure {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
}

.job-card .job-photo-strip figcaption {
  color: rgba(247, 239, 229, 0.72);
}

.completion-card {
  display: grid;
  gap: 12px;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid rgba(255, 122, 0, 0.28);
  border-radius: 14px;
  background: rgba(7, 24, 45, 0.72);
}

.workorder-preparation-card {
  margin: 12px 0;
  border: 1px solid rgba(129, 194, 255, 0.22);
  border-radius: 14px;
  background: rgba(7, 24, 45, 0.64);
  overflow: hidden;
}

.workorder-preparation-card summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  color: #f7efe5;
}

.workorder-preparation-card summary span {
  color: #ff8a1c;
  font-weight: 900;
}

.workorder-preparation-card summary small {
  color: rgba(247, 239, 229, 0.68);
  font-weight: 800;
}

.workorder-preparation-form {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}

.workorder-preparation-form textarea {
  resize: vertical;
}

.workorder-prep-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.workorder-prep-checklist legend {
  padding: 0 6px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.workorder-prep-checklist label {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.workorder-prep-checklist label.wide {
  grid-column: 1 / -1;
}

.workorder-prep-checklist input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

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

.completion-grid p,
.completion-note {
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(247, 239, 229, 0.82);
  font-size: 13px;
  line-height: 1.35;
}

.completion-grid strong,
.completion-note strong {
  display: block;
  margin-bottom: 4px;
  color: #ff8a1c;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.customer-completion-form {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 10px;
}

.customer-completion-form .checkbox-line,
.workorder-customer-approval {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 138, 28, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(247, 239, 229, 0.86);
}

.customer-completion-form .checkbox-line {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  font-size: 13px;
}

.completion-actions,
.approval-method-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workorder-customer-approval > div:first-child strong {
  display: block;
  color: #ff8a1c;
}

.workorder-customer-approval > div:first-child span {
  color: rgba(247, 239, 229, 0.74);
  font-size: 12px;
}

.workorder-approval-preview {
  min-height: 54px;
}

.workorder-approval-visual {
  display: inline-grid;
  gap: 6px;
  min-width: 160px;
  padding: 10px 12px;
  border: 1px solid rgba(129, 194, 255, 0.35);
  border-radius: 12px;
  background: rgba(8, 29, 52, 0.88);
  color: #f7efe5;
}

.workorder-approval-visual strong,
.workorder-approval-visual .nfc-mark {
  color: #ff8a1c;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.workorder-approval-visual small {
  color: rgba(247, 239, 229, 0.74);
}

.fake-qr {
  display: grid;
  grid-template-columns: repeat(5, 10px);
  gap: 3px;
  width: max-content;
  padding: 8px;
  border-radius: 8px;
  background: #f7efe5;
}

.fake-qr i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: rgba(7, 24, 45, 0.18);
}

.fake-qr i.on {
  background: #07182d;
}

.workorder-location-status {
  align-self: center;
  color: rgba(247, 239, 229, 0.74);
  font-size: 12px;
}

.travel-status-card {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid rgba(255, 138, 28, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(247, 239, 229, 0.82);
}

.travel-status-card strong {
  display: block;
  color: #ff8a1c;
}

.travel-status-card span,
.travel-status-card small,
.travel-status-card p {
  color: rgba(247, 239, 229, 0.78);
}

.travel-status-card p {
  margin: 0;
  font-size: 12px;
}

.en-route-panel summary {
  cursor: pointer;
}

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

@media (max-width: 840px) {
  .customer-overview-hero,
  .request-photo-uploader {
    grid-template-columns: 1fr;
  }

  .customer-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .completion-grid,
  .customer-completion-form,
  .en-route-grid {
    grid-template-columns: 1fr;
  }

  .servicecenter-kpis,
  .servicecenter-layout,
  .servicecenter-ticket,
  .servicecenter-ticket-main {
    grid-template-columns: 1fr;
  }

  .servicecenter-ticket-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 1350px) {
  .servicecenter-layout {
    grid-template-columns: 1fr;
  }

  .servicecenter-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .servicecenter-ticket {
    grid-template-columns: minmax(0, 1fr) max-content;
  }
}

.portal-active .smart-safety-panel,
.portal-active .smart-safety-panel * {
  color: #3f1020 !important;
}

.portal-active .smart-safety-panel strong {
  color: #7f1d1d !important;
}

.address-book-manager {
  gap: 10px;
}

.address-book-list {
  display: grid;
  gap: 7px;
}

.address-book-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.address-book-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.address-book-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.address-add-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 110px 1fr auto;
  gap: 8px;
  align-items: end;
}

.address-add-grid input {
  min-width: 0;
}

@media (max-width: 900px) {
  .address-add-grid {
    grid-template-columns: 1fr;
  }
}

/* Portalnavigatie gelijkgetrokken met de homepage-sidebar. */
@media (min-width: 981px) {
  .portal-active .topbar {
    display: none !important;
  }

  .portal-active .admin-shell {
    min-height: 100vh;
    padding: 0 !important;
  }

  .portal-active .dashboard {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 28px 28px 28px 258px;
    display: block !important;
  }

  .portal-active .dashboard > * {
    grid-column: auto !important;
  }

  .portal-active .portal-section-nav,
  .portal-active .professional-section-nav {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 20;
    width: 232px;
    min-height: 100vh !important;
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 120px 18px 18px;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 0 !important;
    background: rgba(9, 18, 30, 0.94) !important;
    box-shadow: none !important;
  }

  .portal-active .portal-section-nav::before,
  .portal-active .professional-section-nav::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 18px;
    right: 18px;
    height: 74px;
    border-radius: 5px;
    background: #fff url("assets/profix24-header.png") center / calc(100% - 22px) auto no-repeat;
  }

  .portal-active .portal-nav-links {
    width: 100%;
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
  }

  .portal-active .portal-section-nav a,
  .portal-active .professional-section-nav a {
    width: 100%;
    min-height: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: rgba(247, 239, 229, 0.84) !important;
    font-size: 14px;
    line-height: 1.15;
  }

  .portal-active .portal-section-nav a .portal-nav-count,
  .portal-active .professional-section-nav a .portal-nav-count {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13) !important;
    color: #fff !important;
    font-size: 12px;
  }

  .portal-active .portal-section-nav a.active,
  .portal-active .professional-section-nav a.active {
    border-color: rgba(255, 130, 0, 0.44) !important;
    background: rgba(255, 130, 0, 0.14) !important;
    color: #fff !important;
  }

  .portal-active .portal-section-nav a.active .portal-nav-count,
  .portal-active .professional-section-nav a.active .portal-nav-count {
    background: var(--pf24-orange) !important;
    color: var(--pf24-dark-text) !important;
  }

  .portal-active .portal-sidebar-logout {
    width: 100%;
    margin-top: auto;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 130, 0, 0.36) !important;
    border-radius: 6px !important;
    background: rgba(255, 130, 0, 0.13) !important;
    color: #fff !important;
    text-align: left;
  }
}

/* Donkere portalcorrecties: geen lichte tegels met fletse tekst in klantoverzichten. */
.portal-active .customer-next-action.warning,
.portal-active .customer-next-action.danger,
.portal-active .customer-next-action.success,
.portal-active .business-shortcuts a {
  background: rgba(13, 28, 47, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f7efe5 !important;
}

.portal-active .customer-next-action.warning small,
.portal-active .customer-next-action.warning span,
.portal-active .customer-next-action.danger small,
.portal-active .customer-next-action.danger span,
.portal-active .customer-next-action.success small,
.portal-active .customer-next-action.success span,
.portal-active .business-shortcuts a span {
  color: rgba(247, 239, 229, 0.72) !important;
}

.portal-active .customer-next-action.warning strong,
.portal-active .customer-next-action.danger strong,
.portal-active .customer-next-action.success strong,
.portal-active .business-shortcuts a strong {
  color: #fff !important;
}

/* Gedeelde linker werkbalk voor website/portalen/beheer. */
@media (min-width: 981px) {
  .admin-body:has(#dashboard:not(.hidden)) .topbar {
    display: none !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-shell {
    min-height: 100vh;
    padding: 0 !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #dashboard {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 22px 24px 246px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 1200 !important;
    width: 232px;
    min-height: 100vh;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    margin: 0 !important;
    padding: 104px 16px 14px !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 0 !important;
    background: rgba(9, 18, 30, 0.94) !important;
    box-shadow: none !important;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 16px;
    right: 16px;
    height: 68px;
    border-radius: 5px;
    background: #fff url("assets/profix24-header.png") center / calc(100% - 22px) auto no-repeat;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs button:not(.portal-sidebar-logout) {
    width: 100%;
    min-height: 0 !important;
    justify-content: flex-start;
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: rgba(247, 239, 229, 0.84) !important;
    font-size: 13px;
    line-height: 1.15;
    text-align: left;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 4px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch span,
  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch label {
    display: none;
    padding: 0 2px 2px;
    color: rgba(247, 239, 229, 0.56);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch select {
    width: 100%;
    min-height: 32px;
    padding: 6px 28px 6px 9px;
    border: 1px solid rgba(255, 130, 0, 0.38);
    border-radius: 6px;
    background: rgba(255, 130, 0, 0.14);
    color: #f8fafc;
    font-size: 12px;
    font-weight: 900;
    outline: none;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch option {
    background: #061526;
    color: #f8fafc;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-nav-block {
    display: grid;
    gap: 6px;
    min-width: 0;
    flex: 0 0 auto;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-nav-caption {
    display: block;
    margin: 8px 0 2px;
    color: rgba(247, 239, 229, 0.62);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-nav-workspace .admin-nav-caption {
    margin-top: 0;
  }

  .admin-body:has(#dashboard:not(.hidden)) #adminSidebarChats,
  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .sidebar-chat-compact {
    width: 100% !important;
    min-width: 0 !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .sidebar-chat-compact {
    grid-template-columns: 16px minmax(0, 1fr) auto !important;
    justify-content: stretch !important;
    padding: 8px 9px !important;
    border-color: rgba(255, 130, 0, 0.38) !important;
    background: rgba(255, 130, 0, 0.13) !important;
    color: #fff !important;
    text-align: left !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch a {
    display: flex;
    align-items: center;
    min-height: 0;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(247, 239, 229, 0.76);
    font-size: 12px;
    font-weight: 900;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch a.active {
    border-color: rgba(255, 130, 0, 0.46);
    background: rgba(255, 130, 0, 0.16);
    color: #fff;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs button.active:not(.portal-sidebar-logout) {
    border-color: rgba(255, 130, 0, 0.44) !important;
    background: rgba(255, 130, 0, 0.14) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #adminSidebarChats {
    margin-top: 0;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom {
    margin-top: auto;
    padding-top: 8px;
  }

  .portal-active .portal-section-nav,
  .portal-active .professional-section-nav {
    grid-template-rows: minmax(0, 1fr) auto auto !important;
  }
}

.admin-more-tabs {
  display: grid;
  gap: 5px;
  position: relative;
  color: rgba(247, 239, 229, 0.58);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-more-tabs summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(255, 130, 0, 0.26);
  border-radius: 6px;
  background: rgba(255, 130, 0, 0.10);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-transform: none;
  cursor: pointer;
  list-style: none;
}

.admin-more-tabs summary::-webkit-details-marker {
  display: none;
}

.admin-more-tabs summary::after {
  content: "\203A";
  color: #ffb15a;
  font-size: 18px;
  line-height: 1;
}

.admin-more-flyout {
  position: absolute;
  left: calc(100% + 10px);
  top: 0;
  z-index: 5000;
  display: grid;
  gap: 5px;
  width: 178px;
  max-height: min(56vh, 360px);
  overflow-y: auto;
  scrollbar-width: none;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(4, 16, 29, .98);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}

.admin-more-flyout::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.admin-more-tabs:not([open]) .admin-more-flyout {
  display: none;
}

.sidebar-chat-widget {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.055);
  color: #f7efe5;
}

.sidebar-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-chat-head strong {
  font-size: 13px;
  letter-spacing: 0;
}

.sidebar-chat-head span {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--orange);
  color: #08111f;
  font-size: 12px;
  font-weight: 900;
}

.sidebar-chat-head span.quiet {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(247, 239, 229, 0.68);
}

.sidebar-chat-list {
  display: grid;
  gap: 6px;
}

.sidebar-chat-list p {
  margin: 0;
  color: rgba(247, 239, 229, 0.64) !important;
  font-size: 12px;
  line-height: 1.35;
}

.sidebar-chat-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.sidebar-chat-item span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sidebar-chat-item b,
.sidebar-chat-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-chat-item b {
  font-size: 12px;
}

.sidebar-chat-item small {
  color: rgba(247, 239, 229, 0.66) !important;
  font-size: 11px;
}

.sidebar-chat-item em {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.18);
  color: #ffd29d;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.sidebar-chat-mute {
  justify-self: end;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: transparent;
  color: rgba(247, 239, 229, 0.72);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.sidebar-chat-mute.muted {
  border-color: rgba(255, 130, 0, 0.38);
  background: rgba(255, 130, 0, 0.13);
  color: #ffd29d;
}

.sidebar-chat-compact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 34px;
  margin-top: 6px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 130, 0, 0.32);
  border-radius: 6px;
  background: rgba(255, 130, 0, 0.11);
  color: #fff;
  cursor: pointer;
}

.sidebar-chat-glyph {
  position: relative;
  width: 16px;
  height: 13px;
  display: inline-block;
  border: 2px solid #ffb15a;
  border-radius: 5px;
}

.sidebar-chat-glyph::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: -5px;
  width: 6px;
  height: 6px;
  border-right: 2px solid #ffb15a;
  border-bottom: 2px solid #ffb15a;
  transform: rotate(38deg);
}

.sidebar-chat-compact b {
  overflow: hidden;
  color: #fff !important;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-chat-compact em,
.sidebar-chat-compact small {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--orange);
  color: #07182d !important;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.sidebar-chat-compact small {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(247, 239, 229, 0.72) !important;
}

.professional-admin-summary,
.document-review-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.professional-admin-list {
  display: grid;
  gap: 10px;
}

.professional-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 150px 170px;
  gap: 8px;
  align-items: end;
}

.professional-filter-bar label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--admin-muted, var(--muted));
  font-size: 12px;
  font-weight: 800;
}

.professional-filter-bar :where(input, select) {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--admin-line, var(--line));
  border-radius: 7px;
  background: var(--admin-card, rgba(255, 255, 255, 0.06));
  color: var(--admin-text, var(--text));
  font-size: 13px;
}

.account-directory-home {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 1100px;
}

#proList.pro-list {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.account-directory-tile {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--admin-line, var(--line));
  border-radius: 7px;
  background: var(--admin-card, var(--surface));
  color: var(--admin-text, var(--text));
  text-align: left;
  cursor: pointer;
}

.account-directory-tile:hover,
.account-directory-tile:focus-visible {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 18%, transparent);
}

.account-directory-tile.warning {
  border-left: 3px solid var(--orange);
}

.account-directory-tile.positive {
  border-left: 3px solid #2d8a5b;
}

.account-directory-tile > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.account-directory-tile strong {
  font-size: 14px;
  overflow-wrap: normal;
  word-break: normal;
}

.account-directory-tile small {
  color: var(--admin-muted, var(--muted));
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: normal;
  word-break: normal;
}

.account-directory-tile > b {
  min-width: 34px;
  font-size: 18px;
  text-align: right;
}

.account-directory-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.account-directory-arrow {
  color: var(--admin-muted, var(--muted));
  font-size: 24px;
  line-height: 1;
}

.account-directory-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.account-directory-header h3 {
  margin: 0;
  font-size: 17px;
}

.account-directory-header .account-directory-icon {
  width: 32px;
  height: 32px;
}

.account-directory-list-toolbar {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-bottom: 8px;
}

.account-directory-list-toolbar label {
  display: grid;
  gap: 3px;
  width: min(520px, 100%);
}

.account-directory-list-toolbar label > span {
  color: var(--admin-muted, var(--muted));
  font-size: 11px;
  font-weight: 700;
}

.account-directory-list-toolbar input {
  min-height: 34px;
}

.account-directory-list-toolbar input::placeholder {
  color: var(--admin-text, var(--text));
  opacity: .55;
}

.account-editor-backdrop {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 15, 28, .62);
  backdrop-filter: blur(3px);
}

.account-editor-modal {
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
  scrollbar-width: none;
  border: 1px solid var(--admin-line, var(--line));
  border-radius: 8px;
  background: var(--admin-panel-bg, var(--surface));
  color: var(--admin-text, var(--text));
  box-shadow: 0 24px 70px rgba(5, 15, 28, .35);
}

.account-editor-modal::-webkit-scrollbar {
  display: none;
}

.account-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--admin-line, var(--line));
}

.account-editor-head h3,
.account-editor-head small {
  margin: 0;
}

.account-editor-head h3 {
  color: #f8fafc !important;
  font-size: 17px;
}

html[data-theme="light"] .account-editor-head h3 {
  color: #17263a !important;
}

.account-editor-head > div {
  display: grid;
  gap: 2px;
}

.account-editor-head small {
  color: var(--admin-muted, var(--muted));
  font-size: 11px;
}

.account-editor-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
}

.account-editor-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.account-editor-form label > span,
.account-editor-readonly > span {
  color: var(--admin-muted, var(--muted));
  font-size: 11px;
  font-weight: 800;
}

.account-editor-form :where(input, select, textarea) {
  width: 100%;
  min-height: 36px;
}

.account-editor-form .wide {
  grid-column: 1 / -1;
}

.account-editor-readonly {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--admin-line, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--admin-card, var(--surface)) 88%, transparent);
}

.account-editor-access {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.account-editor-access > span {
  display: grid;
  gap: 2px;
}

.account-editor-access small,
.account-editor-access em {
  color: var(--muted);
  font-style: normal;
}

.account-editor-access > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.login-recovery-link {
  justify-self: start;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
  font: inherit;
}

.password-reset-dialog {
  width: min(440px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: #07182d;
  box-shadow: 0 24px 70px rgba(4, 19, 35, 0.28);
}

.password-reset-dialog::backdrop {
  background: rgba(4, 19, 35, 0.62);
  backdrop-filter: blur(2px);
}

.password-reset-dialog form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 20px;
}

.password-reset-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.password-reset-head h2,
.password-reset-head p {
  margin: 0;
}

.password-reset-head h2,
.password-reset-dialog label,
.password-reset-dialog label span {
  color: #07182d;
}

.password-reset-head p {
  margin-top: 4px;
  color: #526579;
  font-size: 13px;
}

.password-reset-dialog input {
  border-color: rgba(6, 26, 51, 0.2);
  background: #f8fafc;
  color: #07182d;
}

.password-reset-dialog .button.secondary {
  border-color: rgba(6, 26, 51, 0.22) !important;
  background: #f1f5f9 !important;
  color: #07182d !important;
}

html[data-theme="dark"] .password-reset-dialog {
  border-color: rgba(255, 255, 255, 0.16);
  background: #0d2238;
  color: #f7efe5;
}

html[data-theme="dark"] .password-reset-head h2,
html[data-theme="dark"] .password-reset-dialog label,
html[data-theme="dark"] .password-reset-dialog label span {
  color: #f7efe5;
}

html[data-theme="dark"] .password-reset-head p {
  color: #b8c5d3;
}

html[data-theme="dark"] .password-reset-dialog input {
  border-color: rgba(255, 255, 255, 0.2);
  background: #07182d;
  color: #ffffff;
}

html[data-theme="dark"] .password-reset-dialog .button.secondary {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: #17324d !important;
  color: #ffffff !important;
}

.password-reset-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.form-trap {
  position: fixed !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 520px) {
  .password-reset-dialog form {
    padding: 16px;
  }

  .password-reset-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .password-reset-actions .button {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .account-editor-access {
    align-items: stretch;
    flex-direction: column;
  }

  .account-editor-access > div {
    justify-content: stretch;
  }

  .account-editor-access .button {
    flex: 1 1 auto;
  }
}

.account-editor-readonly small {
  color: var(--admin-muted, var(--muted));
  font-size: 11px;
}

.account-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

@media (max-width: 760px) {
  .account-directory-home {
    grid-template-columns: 1fr;
  }

  .account-directory-tile {
    grid-template-columns: 38px minmax(0, 1fr) auto 14px;
  }

  .account-editor-form {
    grid-template-columns: 1fr;
  }

  .account-editor-form .wide {
    grid-column: 1;
  }
}

.professional-admin-table {
  display: grid;
  gap: 6px;
}

.professional-admin-row {
  border: 1px solid var(--admin-line, var(--line));
  border-radius: 8px;
  background: var(--admin-card, rgba(255, 255, 255, 0.055));
  overflow: hidden;
}

.professional-admin-row > summary {
  display: grid;
  grid-template-columns: 124px minmax(180px, 1.3fr) minmax(170px, 1fr) minmax(120px, .7fr) minmax(118px, .7fr);
  gap: 9px;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.professional-admin-row > summary .mini-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.professional-admin-row > summary::-webkit-details-marker {
  display: none;
}

.professional-admin-row > summary :where(strong, small, b, em) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.professional-admin-row > summary strong,
.professional-admin-row > summary b {
  color: var(--admin-text, var(--text));
  font-size: 13px;
}

.professional-admin-row > summary small,
.professional-admin-row > summary em {
  color: var(--admin-muted, var(--muted));
  font-size: 12px;
  font-style: normal;
}

.professional-admin-row-detail {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid var(--admin-line, var(--line));
}

.professional-admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 7px;
}

.professional-admin-detail-grid span {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border-radius: 7px;
  background: rgba(148, 163, 184, 0.08);
  color: var(--admin-muted, var(--muted));
  font-size: 12px;
}

.professional-admin-detail-grid b {
  color: var(--admin-text, var(--text));
  font-size: 11px;
  text-transform: uppercase;
}

.pro-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
}

.document-review-empty {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--admin-line, var(--line));
  border-radius: 7px;
  background: rgba(34, 197, 94, 0.08);
}

.document-review-empty span {
  color: var(--admin-muted, var(--muted));
  font-size: 13px;
}

.document-review-panel > summary {
  cursor: pointer;
  list-style: none;
}

.document-review-panel > summary::-webkit-details-marker {
  display: none;
}

.document-review-panel:not([open]) {
  padding-bottom: 0;
}

.document-archive-preview {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.portal-active .request-photo-uploader {
  background: rgba(13, 28, 47, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.portal-active .request-photo-uploader strong {
  color: #fff !important;
}

.portal-active .request-photo-uploader span,
.portal-active .request-photo-uploader .form-message {
  color: rgba(247, 239, 229, 0.72) !important;
}

.portal-active .photo-pick-button {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

.portal-active .smart-intake,
.portal-active .smart-intake-support {
  background: rgba(13, 28, 47, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f7efe5 !important;
}

.portal-active .smart-intake strong,
.portal-active .smart-intake label {
  color: #fff !important;
}

.portal-active .smart-intake span,
.portal-active .smart-intake p,
.portal-active .smart-intake small {
  color: rgba(247, 239, 229, 0.72) !important;
}

.portal-active .smart-intake .button.secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

.identity-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(13, 28, 47, 0.88);
  color: #f7efe5;
}

.identity-card-compact {
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.identity-card > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.identity-card strong {
  color: #fff !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-card span,
.identity-card small {
  color: rgba(247, 239, 229, 0.72) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-avatar {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 1px solid rgba(255, 130, 0, 0.35);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 130, 0, 0.22), rgba(255, 255, 255, 0.08));
  color: #fff;
  font-weight: 900;
  letter-spacing: 0;
}

.identity-card-compact .entity-avatar,
.team-row .entity-avatar {
  width: 42px;
  height: 42px;
  font-size: 13px;
}

.entity-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo-card {
  grid-column: 1 / -1;
  margin-bottom: 12px;
}

.profile-photo-card .compact-photo-button,
.team-photo-field {
  width: max-content;
  margin-top: 6px;
}

.team-row > summary {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.team-photo-field {
  display: grid;
  gap: 4px;
  color: #506173;
}

.team-photo-field input {
  min-width: 0;
}

.account-context-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 130, 0, 0.24);
  border-radius: 7px;
  background: rgba(255, 130, 0, 0.08);
}

.account-context-panel strong,
.account-context-panel span {
  display: block;
}

.account-context-panel code {
  padding: 6px 9px;
  border-radius: 6px;
  background: rgba(6, 26, 51, 0.82);
  color: var(--orange);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.account-context-panel > small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
}

.account-context-list {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.account-context-list span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
}

/* Admin finance contrast: ProFix24-orange labels on dark blue finance cards. */
.admin-body .finance-stat span,
.admin-body .finance-stat small,
.admin-body .finance-priority-card small,
.admin-body .finance-line small,
.admin-body .finance-row small,
.admin-body .finance-bar-row small,
.admin-body .finance-legend span {
  color: var(--orange) !important;
}

.admin-body .finance-stat strong,
.admin-body .finance-priority-card strong,
.admin-body .finance-line strong,
.admin-body .finance-row strong,
.admin-body .finance-row em,
.admin-body .finance-bar-row strong {
  color: #fff !important;
}

/* Admin desktop: use the space next to the left menu more efficiently. */
@media (min-width: 981px) {
  .admin-body #dashboard:not(.hidden) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 22px 24px 18px;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .admin-body .admin-shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  .admin-body .finance-workspace,
  .admin-body .overview-grid {
    width: 100%;
    max-width: none;
  }
}

/* Laatste beheer/portaal contrastvangnet. */
.admin-body.login-entry .login-panel,
.admin-body #loginPanel {
  border: 1px solid var(--admin-line) !important;
  background: rgba(16, 36, 59, 0.94) !important;
  color: var(--admin-text) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22) !important;
}

.admin-body.login-entry .login-panel h1,
.admin-body.login-entry .login-panel strong,
.admin-body #loginPanel h1,
.admin-body #loginPanel strong {
  color: #fff !important;
}

.admin-body.login-entry .login-panel p,
.admin-body.login-entry .login-panel span,
.admin-body.login-entry .login-panel label,
.admin-body #loginPanel p,
.admin-body #loginPanel span,
.admin-body #loginPanel label {
  color: var(--admin-muted) !important;
}

.admin-body.login-entry .login-panel input,
.admin-body #loginPanel input {
  background: #fff !important;
  color: #061a33 !important;
}

.admin-body.login-entry .login-panel .button.primary,
.admin-body #loginPanel .button.primary {
  background: var(--orange) !important;
  color: #061a33 !important;
}

/* Definitieve portaal/admin dark pass: geen witte werkvlakken meer achter login. */
body.portal-active,
body.admin-body:not(.login-entry) {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 130, 0, 0.10), transparent 34%),
    linear-gradient(135deg, #061a33 0%, #07182b 48%, #0d1c2f 100%) !important;
  color: #f7efe5 !important;
}

.portal-active .dashboard,
.portal-active .portal-dashboard,
.portal-active .portal-main,
.portal-active .portal-content,
.portal-active .portal-view,
.portal-active .portal-view-active,
.admin-body #dashboard,
.admin-body .admin-shell,
.admin-body .admin-main,
.admin-body .admin-content,
.admin-body [data-tab-panel] {
  background: transparent !important;
  color: #f7efe5 !important;
}

.portal-active :where(
  .portal-card,
  .customer-card,
  .customer-dashboard-card,
  .customer-request-card,
  .customer-next-action,
  .customer-request-list,
  .request-form,
  .request-card,
  .workorder-card,
  .quote-card,
  .quote-builder,
  .quote-assistant-panel,
  .smart-intake,
  .smart-intake-support,
  .smart-safety-panel,
  .request-photo-uploader,
  .profile-section,
  .profile-card,
  .identity-card,
  .document-status-card,
  .document-card,
  .professional-foldout,
  .professional-profile-card,
  .professional-status-card,
  .profession-picker,
  .service-area-picker,
  .option-picker,
  .asset-summary,
  .asset-card,
  .inventory-card,
  .label-row,
  .label-form,
  .team-row,
  .team-card,
  .team-summary-strip,
  .team-edit-grid,
  .team-permission-field,
  .team-personnel-field,
  .material-logistics-card,
  .travel-status-card,
  .en-route-panel,
  .planning-card,
  .chat-panel,
  .chat-room,
  .chat-message,
  .notification-settings-card,
  .account-context-panel,
  .business-shortcuts a,
  .empty-state-card,
  .info-grid,
  .approval-panel,
  .compact-table,
  .data-table,
  .status-table,
  details,
  summary
),
.admin-body :where(
  .admin-card,
  .admin-panel,
  .admin-section,
  .admin-block,
  .metric-card,
  .finance-card,
  .finance-stat,
  .finance-priority-card,
  .finance-line,
  .finance-row,
  .finance-chart,
  .finance-workspace,
  .overview-grid,
  .branch-card,
  .settings-card,
  .setting-card,
  .value-card,
  .action-card,
  .assistant-card,
  .document-card,
  .document-status-card,
  .professional-card,
  .request-card,
  .customer-card,
  .staff-card,
  .time-card,
  .security-card,
  .community-card,
  .log-card,
  .audit-card,
  .chat-panel,
  .chat-message,
  .sidebar-chat-widget,
  .compact-table,
  .data-table,
  table,
  thead,
  tbody,
  tr,
  td,
  th,
  details,
  summary
) {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: linear-gradient(180deg, rgba(16, 36, 59, 0.96), rgba(9, 25, 43, 0.96)) !important;
  color: #f7efe5 !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18) !important;
}

.portal-active :where(.info-grid, .team-edit-grid, .overview-grid, .finance-workspace),
.admin-body :where(.info-grid, .team-edit-grid, .overview-grid, .finance-workspace) {
  background: transparent !important;
  box-shadow: none !important;
}

.portal-active :where(
  h1, h2, h3, h4, h5, h6, strong, b, label, legend, summary,
  .card-title, .section-title, .metric-value
),
.admin-body :where(
  h1, h2, h3, h4, h5, h6, strong, b, label, legend, summary,
  .card-title, .section-title, .metric-value
) {
  color: #fff !important;
}

.portal-active :where(p, span, small, li, dd, dt, td, th, em),
.admin-body :where(p, span, small, li, dd, dt, td, th, em) {
  color: rgba(247, 239, 229, 0.76) !important;
}

.portal-active :where(a:not(.button):not(.portal-sidebar-logout)),
.admin-body :where(a:not(.button):not(.portal-sidebar-logout)) {
  color: #ffb15a !important;
}

.portal-active :where(input, select, textarea),
.admin-body:not(.login-entry) :where(input, select, textarea) {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(4, 18, 33, 0.86) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.portal-active :where(input, select, textarea)::placeholder,
.admin-body:not(.login-entry) :where(input, select, textarea)::placeholder {
  color: rgba(247, 239, 229, 0.52) !important;
}

.portal-active :where(input:focus, select:focus, textarea:focus),
.admin-body:not(.login-entry) :where(input:focus, select:focus, textarea:focus) {
  border-color: rgba(255, 130, 0, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(255, 130, 0, 0.16) !important;
  outline: none !important;
}

.portal-active :where(.badge, .status-pill, .pill, code, .tag),
.admin-body :where(.badge, .status-pill, .pill, code, .tag) {
  border-color: rgba(255, 130, 0, 0.28) !important;
  background: rgba(255, 130, 0, 0.12) !important;
  color: #ffb15a !important;
}

.portal-active :where(.button.secondary, button.secondary),
.admin-body :where(.button.secondary, button.secondary) {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.portal-active :where(.button.primary, button.primary, .primary-action),
.admin-body :where(.button.primary, button.primary, .primary-action) {
  border-color: rgba(255, 130, 0, 0.8) !important;
  background: linear-gradient(135deg, #ff8200, #ff9f2e) !important;
  color: #061a33 !important;
}

.portal-active :where(table, .compact-table, .data-table),
.admin-body :where(table, .compact-table, .data-table) {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.portal-active :where(tr:nth-child(even), .list-row:nth-child(even)),
.admin-body :where(tr:nth-child(even), .list-row:nth-child(even)) {
  background: rgba(255, 255, 255, 0.035) !important;
}

.portal-active :where(tr:hover, .list-row:hover, .customer-request-card:hover),
.admin-body :where(tr:hover, .list-row:hover, .admin-card:hover) {
  background: rgba(255, 130, 0, 0.08) !important;
}

.portal-active :where(.warning, .needs-attention, .alert-warning),
.admin-body :where(.warning, .needs-attention, .alert-warning) {
  border-color: rgba(255, 130, 0, 0.34) !important;
  background: rgba(255, 130, 0, 0.11) !important;
}

.portal-active :where(.danger, .alert-danger, .error),
.admin-body :where(.danger, .alert-danger, .error) {
  border-color: rgba(255, 92, 92, 0.34) !important;
  background: rgba(130, 26, 26, 0.32) !important;
}

.portal-active :where(.success, .approved, .alert-success),
.admin-body :where(.success, .approved, .alert-success) {
  border-color: rgba(62, 207, 142, 0.34) !important;
  background: rgba(20, 90, 61, 0.28) !important;
}

.portal-active hr,
.admin-body hr {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.portal-active :where(
  .description,
  .profile-quick-actions,
  .tag-chip,
  .checkbox-line,
  .step-card,
  .flow-step,
  .summary-strip,
  .portal-view article
),
.admin-body :where(
  .description,
  .servicecenter-ticket,
  .servicecenter-mini-list,
  .daily-priority,
  .action-row,
  .finance-head,
  .finance-periods,
  .finance-periods button,
  .checkbox-line,
  .tab-panel article,
  .metrics article,
  .overview-grid article,
  .acceptance-metric,
  .document-metric
) {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: linear-gradient(180deg, rgba(15, 35, 58, 0.98), rgba(8, 23, 39, 0.98)) !important;
  color: #f7efe5 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16) !important;
}

.portal-active :where(.profile-section summary, .professional-foldout summary, details summary),
.admin-body :where(details summary, .compact-form-panel summary) {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #fff !important;
}

.portal-active :where(small, .tag-chip, .tag-chip *, .status-note),
.admin-body :where(small, .status-note, .finance-periods button) {
  background-color: transparent !important;
}

.portal-active :where(.tag-chip, .tag-chip span),
.admin-body :where(.finance-periods button.active, .admin-tabs button.active:not(.portal-sidebar-logout)) {
  border-color: rgba(255, 130, 0, 0.56) !important;
  background: rgba(255, 130, 0, 0.16) !important;
  color: #ffb15a !important;
}

.admin-body :where(.servicecenter-ticket.critical, .daily-priority.critical, .action-row.priority-critical) {
  border-color: rgba(255, 92, 92, 0.42) !important;
  background: linear-gradient(180deg, rgba(75, 20, 28, 0.74), rgba(33, 15, 26, 0.78)) !important;
}

.admin-body .portal-sidebar-logout,
.portal-active .portal-sidebar-logout {
  border-color: rgba(255, 130, 0, 0.34) !important;
  background: rgba(255, 130, 0, 0.12) !important;
  color: #ffb15a !important;
}

.admin-body .portal-sidebar-logout:hover,
.portal-active .portal-sidebar-logout:hover {
  background: rgba(255, 130, 0, 0.2) !important;
  color: #fff !important;
}

.admin-body.login-entry .language-select,
.portal-topbar .language-select,
.admin-body .topbar .language-select,
.portal-active .topbar .language-select {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(6, 26, 51, 0.92) !important;
  color: #fff !important;
}

.admin-body.login-entry .topbar,
.portal-active .topbar,
.admin-body:not(.login-entry) .topbar {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(6, 26, 51, 0.96) !important;
}

/* PWA/app contrastvangnet voor standalone document- en portaalpagina's. */
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
  body:not(.homepage):not(.public-page) {
    background:
      radial-gradient(circle at 12% 0%, rgba(255, 130, 0, 0.10), transparent 34%),
      linear-gradient(135deg, #061a33 0%, #07182b 48%, #0d1c2f 100%) !important;
    color: #f7efe5 !important;
  }

  body:not(.homepage):not(.public-page) :where(
    .document-card,
    .payment-panel,
    .approval-panel,
    .completion-card,
    .workorder-submit-review,
    .travel-status-card,
    .chat-panel,
    .quote-lines,
    .quote-summary,
    .customer-request-card,
    .customer-card,
    .portal-card,
    .login-card,
    .login-panel,
    main > section,
    article,
    details,
    summary,
    table,
    tr,
    td,
    th
  ) {
    border-color: rgba(255, 255, 255, 0.13) !important;
    background: linear-gradient(180deg, rgba(16, 36, 59, 0.96), rgba(9, 25, 43, 0.96)) !important;
    color: #f7efe5 !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18) !important;
  }

  body:not(.homepage):not(.public-page) :where(h1, h2, h3, h4, strong, b, label, legend, summary) {
    color: #fff !important;
  }

  body:not(.homepage):not(.public-page) :where(p, span, small, li, td, th, dd, dt) {
    color: rgba(247, 239, 229, 0.76) !important;
  }

  body:not(.homepage):not(.public-page) :where(input, select, textarea) {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(4, 18, 33, 0.86) !important;
    color: #fff !important;
  }

  body:not(.homepage):not(.public-page) :where(.button.primary, button.primary) {
    border-color: rgba(255, 130, 0, 0.8) !important;
    background: linear-gradient(135deg, #ff8200, #ff9f2e) !important;
    color: #061a33 !important;
  }

  body:not(.homepage):not(.public-page) :where(.button.secondary, button.secondary) {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
  }
}

/* Zelfde vangnet ook buiten standalone, voor pagina's die niet via login/admin shells lopen. */
body:has(.document-card),
body:has(.payment-panel) {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 130, 0, 0.10), transparent 34%),
    linear-gradient(135deg, #061a33 0%, #07182b 48%, #0d1c2f 100%) !important;
  color: #f7efe5 !important;
}

body:has(.document-card) :where(.document-card, .approval-panel, .completion-card, .quote-lines, .quote-summary),
body:has(.payment-panel) :where(.payment-panel, .approval-panel) {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: linear-gradient(180deg, rgba(16, 36, 59, 0.96), rgba(9, 25, 43, 0.96)) !important;
  color: #f7efe5 !important;
}

body:has(.document-card) :where(h1, h2, h3, h4, strong, b, label),
body:has(.payment-panel) :where(h1, h2, h3, h4, strong, b, label) {
  color: #fff !important;
}

body:has(.document-card) :where(p, span, small, li, td, th),
body:has(.payment-panel) :where(p, span, small, li, td, th) {
  color: rgba(247, 239, 229, 0.76) !important;
}

.document-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 130, 0, 0.10), transparent 34%),
    linear-gradient(135deg, #061a33 0%, #07182b 48%, #0d1c2f 100%) !important;
  color: #f7efe5 !important;
}

.document-body .document-shell {
  background: transparent !important;
  color: #f7efe5 !important;
}

.document-body .document-header,
.document-body .document-card,
.document-body .approval-panel,
.document-body .original-document,
.document-body .completion-card,
.document-body .travel-status-card,
.document-body table,
.document-body tr,
.document-body td,
.document-body th {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: linear-gradient(180deg, rgba(16, 36, 59, 0.96), rgba(9, 25, 43, 0.96)) !important;
  color: #f7efe5 !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18) !important;
}

.document-body :where(h1, h2, h3, h4, strong, b, label, th) {
  color: #fff !important;
}

.document-body :where(p, span, small, li, td) {
  color: rgba(247, 239, 229, 0.78) !important;
}

.document-body :where(input, select, textarea) {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(4, 18, 33, 0.86) !important;
  color: #fff !important;
}

/* Definitieve contrastlaag voor de rekenmodule. */
.admin-body #calculatorPanel :where(
  .calculator-card,
  .calculator-result,
  .calculator-foldout,
  .calculator-stat,
  .usage-rate-details,
  .usage-cost-summary
) {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: linear-gradient(180deg, rgba(16, 36, 59, 0.98), rgba(8, 24, 42, 0.98)) !important;
  color: #f7efe5 !important;
  box-shadow: none !important;
}

.admin-body #calculatorPanel :where(input, select, textarea) {
  border-color: rgba(255, 255, 255, 0.20) !important;
  background: rgba(3, 15, 29, 0.94) !important;
  color: #fff !important;
}

.admin-body #calculatorPanel :where(h2, h3, strong, b, label, summary) {
  color: #fff !important;
}

.admin-body #calculatorPanel :where(p, span, small, .business-row-head, .calculator-breakdown span, .usage-cost-summary span) {
  color: rgba(247, 239, 229, 0.76) !important;
}

.admin-body #calculatorPanel .calculator-stat.positive {
  border-color: rgba(34, 197, 94, 0.32) !important;
  background: linear-gradient(180deg, rgba(22, 101, 52, 0.36), rgba(8, 42, 28, 0.42)) !important;
}

.admin-body #calculatorPanel .calculator-stat.negative {
  border-color: rgba(248, 113, 113, 0.32) !important;
  background: linear-gradient(180deg, rgba(127, 29, 29, 0.36), rgba(48, 14, 20, 0.42)) !important;
}

/* Laatste correctie voor de vaste linkerbalk: niets mag buiten de kolom vallen. */
@media (min-width: 981px) {
  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs,
  .portal-active :where(.portal-section-nav, .professional-section-nav) {
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs *,
  .portal-active :where(.portal-section-nav, .professional-section-nav) * {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs :where(button, a),
  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch,
  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .sidebar-chat-widget,
  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .sidebar-chat-compact,
  .portal-active :where(.portal-section-nav, .professional-section-nav) :where(button, a, .sidebar-chat-widget, .sidebar-chat-compact) {
    width: 100% !important;
    min-width: 0 !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch a {
    justify-content: flex-start !important;
    white-space: normal !important;
  }

  .admin-tabs .portal-sidebar-logout,
  .portal-section-nav .portal-sidebar-logout,
  .professional-section-nav .portal-sidebar-logout {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs button.sidebar-chat-compact:not(.portal-sidebar-logout) {
    border-color: rgba(255, 130, 0, 0.38) !important;
    background: rgba(255, 130, 0, 0.13) !important;
    color: #fff !important;
  }
}

/* Definitieve donkere app-laag voor alle ingelogde omgevingen.
   Deze staat bewust helemaal onderaan zodat oudere kaart- en formulierregels geen witte vlakken terugzetten. */
.login-entry,
.portal-active,
.admin-body:not(.homepage) {
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 130, 0, 0.10), transparent 32%),
    linear-gradient(135deg, #061a33 0%, #07182b 48%, #0d1c2f 100%) !important;
  color: #f7efe5 !important;
}

.login-entry :where(
  .login-panel,
  .test-login-panel,
  .test-login-choice
),
.portal-active :where(
  .panel-head,
  .customer-head,
  .customer-request-card,
  .customer-overview-list,
  .customer-status-strip,
  .customer-status-strip article,
  .compact-business-card,
  .customer-card,
  .portal-card,
  .dashboard-card,
  .readiness-panel,
  .readiness-status,
  .empty-state-card,
  .mini-job-card,
  .job-card,
  .job-card-head,
  .job-card-meta,
  .info-grid p,
  .asset-summary,
  .chat-panel,
  .approval-panel,
  .quote-lines-form,
  .profile-section,
  .professional-foldout,
  .team-row,
  .transfer-report,
  .route-advice,
  .portal-notifications article,
  details,
  table,
  tr,
  td,
  th
),
.admin-body :where(
  .panel-head,
  .card,
  .dashboard-card,
  .metric-card,
  .metrics article,
  .overview-grid article,
  .tab-panel,
  .tab-panel article,
  .admin-card,
  .servicecenter-ticket,
  .servicecenter-mini-list,
  .daily-priority,
  .action-row,
  .finance-head,
  .finance-periods,
  .workspace,
  .queue,
  .detail,
  .detail-card,
  .detail-section,
  .timeline-card,
  .ticket-card,
  .quote-card,
  .workorder-card,
  .request-list,
  .request-item,
  .document-review-panel,
  .acceptance-metric,
  .document-metric,
  .settings-group,
  .setting-row,
  details,
  table,
  tr,
  td,
  th
) {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: linear-gradient(180deg, rgba(16, 36, 59, 0.96), rgba(9, 25, 43, 0.96)) !important;
  color: #f7efe5 !important;
  box-shadow: none !important;
}

.login-entry :where(h1, h2, h3, h4, strong, b, label),
.portal-active :where(h1, h2, h3, h4, strong, b, label, th, summary),
.admin-body :where(h1, h2, h3, h4, strong, b, label, th, summary) {
  color: #fff !important;
}

.login-entry :where(p, span, small, li),
.portal-active :where(p, span, small, li, td, figcaption),
.admin-body :where(p, span, small, li, td, figcaption) {
  color: rgba(247, 239, 229, 0.78) !important;
}

.portal-active :where(.button.secondary, button.secondary, .plain-btn, .secondary-action),
.admin-body :where(.button.secondary, button.secondary, .plain-btn, .secondary-action),
.login-entry :where(.button.secondary, button.secondary, .plain-btn, .secondary-action) {
  border-color: rgba(255, 130, 0, 0.24) !important;
  background: rgba(255, 130, 0, 0.10) !important;
  color: #fff !important;
}

.portal-active :where(input, select, textarea),
.admin-body :where(input, select, textarea),
.login-entry :where(input, select, textarea) {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(4, 18, 33, 0.88) !important;
  color: #fff !important;
}

.portal-active :where(input::placeholder, textarea::placeholder),
.admin-body :where(input::placeholder, textarea::placeholder),
.login-entry :where(input::placeholder, textarea::placeholder) {
  color: rgba(247, 239, 229, 0.52) !important;
}

.portal-active :where(.button.secondary, button.secondary, .plain-btn, .secondary-action),
.admin-body :where(.button.secondary, button.secondary, .plain-btn, .secondary-action),
.login-entry :where(.button.secondary, button.secondary, .plain-btn, .secondary-action) {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.portal-active .wallet-panel {
  display: grid !important;
  gap: 12px !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 130, 0, 0.12), transparent 22rem),
    linear-gradient(135deg, rgba(8, 27, 48, 0.97), rgba(10, 35, 60, 0.95)) !important;
  border-color: rgba(255, 130, 0, 0.28) !important;
}

.portal-active .wallet-summary-grid,
.portal-active .wallet-actions-grid,
.portal-active .wallet-two-column {
  display: grid;
  gap: 10px;
}

.portal-active .wallet-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  order: 1;
}

.portal-active .wallet-permission-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 0;
  order: 2;
}

.portal-active .wallet-permission-strip span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border: 1px solid rgba(255, 95, 95, 0.28);
  background: rgba(255, 95, 95, 0.08);
  border-radius: 7px;
  color: rgba(247, 239, 229, 0.68) !important;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 9px;
}

.portal-active .wallet-permission-strip span::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #ff5f5f;
  box-shadow: 0 0 0 3px rgba(255, 95, 95, 0.12);
}

.portal-active .wallet-permission-strip span.ok {
  border-color: rgba(41, 199, 111, 0.32);
  background: rgba(41, 199, 111, 0.10);
  color: #a9f0c7 !important;
}

.portal-active .wallet-permission-strip span.ok::before {
  background: #29c76f;
  box-shadow: 0 0 0 3px rgba(41, 199, 111, 0.13);
}

.portal-active .wallet-summary-grid article,
.portal-active .wallet-action-form,
.portal-active .wallet-two-column > article {
  min-width: 0;
  border: 1px solid rgba(184, 207, 230, 0.14);
  background: rgba(2, 13, 28, 0.42);
  border-radius: 8px;
  padding: 11px;
}

.portal-active .wallet-summary-grid span,
.portal-active .wallet-two-column small,
.portal-active .wallet-panel .form-message {
  color: rgba(247, 239, 229, 0.72) !important;
}

.portal-active .wallet-summary-grid strong {
  display: block;
  margin-top: 4px;
  color: #ffad4d !important;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1;
}

.portal-active .wallet-trust-strip {
  display: grid;
  gap: 4px;
  margin: 0;
  order: 3;
  padding: 10px 12px;
  border: 1px solid rgba(255, 130, 0, 0.28);
  border-radius: 8px;
  background: rgba(255, 130, 0, 0.08);
  color: rgba(247, 239, 229, 0.78) !important;
  font-size: 13px;
}

.portal-active .wallet-trust-strip strong {
  color: #ff8a12 !important;
}

.portal-active .wallet-actions-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 0;
  order: 4;
}

.portal-active .wallet-action-form {
  display: grid;
  gap: 8px;
  align-content: start;
}

.portal-active .wallet-action-form strong {
  color: #fff !important;
  font-size: 14px !important;
}

.portal-active .wallet-action-form > small {
  min-height: 30px;
  color: rgba(247, 239, 229, 0.66) !important;
  font-size: 11px !important;
  line-height: 1.35;
}

.portal-active .wallet-action-form label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0 !important;
  color: rgba(247, 239, 229, 0.82) !important;
}

.portal-active .wallet-action-form input,
.portal-active .wallet-action-form select {
  min-height: 36px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(2, 13, 28, 0.76);
  color: #fff;
  padding: 8px 10px;
}

.portal-active .wallet-two-column {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 0;
  order: 5;
}

.portal-active .wallet-mode-note {
  order: 6;
  margin: 0 !important;
  border-color: rgba(255, 138, 0, 0.25) !important;
  background: rgba(255, 138, 0, 0.08) !important;
}

.portal-active .wallet-two-column h4 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 15px;
}

.portal-active .wallet-two-column .compact-table button {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  min-height: 54px;
  border: 1px solid rgba(184, 207, 230, 0.12) !important;
  background: rgba(2, 13, 28, 0.64) !important;
  color: #fff !important;
  text-align: left !important;
}

.portal-active .wallet-two-column .compact-table button strong {
  color: #fff !important;
  font-size: 13px !important;
}

.portal-active .wallet-two-column .compact-table button span {
  color: #ffad4d !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.portal-active .wallet-two-column .compact-table small {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .portal-active .wallet-actions-grid,
  .portal-active .wallet-two-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .portal-active .wallet-summary-grid {
    grid-template-columns: 1fr;
  }
}

.portal-active :where(.button.primary, button.primary, .primary),
.admin-body :where(.button.primary, button.primary, .primary),
.login-entry :where(.button.primary, button.primary, .primary) {
  border-color: rgba(255, 130, 0, 0.85) !important;
  background: linear-gradient(135deg, #ff8200, #ff9f2e) !important;
  color: #061a33 !important;
}

.portal-active :where(.portal-section-nav a.active, .professional-section-nav a.active),
.admin-body :where(.admin-tabs button.active, .workspace-switch button.active) {
  border-color: rgba(255, 130, 0, 0.65) !important;
  background: rgba(255, 130, 0, 0.18) !important;
  color: #ffb15a !important;
}

.portal-active .portal-sidebar-logout,
.admin-body .portal-sidebar-logout {
  border-color: rgba(255, 130, 0, 0.34) !important;
  background: rgba(255, 130, 0, 0.12) !important;
  color: #ffb15a !important;
}

/* Admin dashboard moet op laptopbreedte niet als een smalle kolom voelen. */
@media (min-width: 981px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard {
    padding: 14px 16px 22px 184px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
    width: 168px !important;
    padding: 92px 10px 12px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs::before {
    top: 14px !important;
    left: 10px !important;
    right: 10px !important;
    height: 58px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs button:not(.portal-sidebar-logout),
  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch a {
    padding: 8px 9px !important;
    font-size: 13px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .metrics {
    grid-template-columns: repeat(4, minmax(130px, 1fr)) !important;
    gap: 10px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .metrics article {
    min-height: 78px !important;
    padding: 12px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .overview-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .overview-grid > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .admin-body:has(#dashboard:not(.hidden)) .overview-grid > .wide,
  .admin-body:has(#dashboard:not(.hidden)) .overview-grid > .full-width,
  .admin-body:has(#dashboard:not(.hidden)) .finance-workspace,
  .admin-body:has(#dashboard:not(.hidden)) .assistant-workspace,
  .admin-body:has(#dashboard:not(.hidden)) .branch-workspace,
  .admin-body:has(#dashboard:not(.hidden)) .security-workspace {
    grid-column: 1 / -1 !important;
  }
}

@media (min-width: 1180px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard {
    padding-left: 184px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
    width: 168px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .overview-grid > * {
    grid-column: span 6;
  }
}

@media (min-width: 1460px) {
  .admin-body:has(#dashboard:not(.hidden)) .overview-grid > * {
    grid-column: span 4;
  }
}

@media (max-width: 980px) {
  .staff-workspace,
  .staff-split {
    grid-template-columns: 1fr;
  }

  .staff-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-document-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1260px) {
  .staff-workspace {
    grid-template-columns: 1fr;
  }

  .staff-list {
    max-height: 360px;
    overflow: auto;
  }

  .staff-table-head,
  .staff-table-row {
    grid-template-columns: minmax(180px, 1.35fr) minmax(105px, .65fr) minmax(76px, .45fr) 48px;
  }

  .staff-table-head span:nth-child(n+2) {
    display: block;
  }

  .staff-table-row > span:nth-child(2),
  .staff-table-row > span:nth-child(3),
  .staff-table-row > strong {
    grid-column: auto;
  }

  .staff-form-grid {
    grid-template-columns: repeat(3, minmax(104px, 1fr));
  }
}

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

  .staff-table-head {
    display: none;
  }

  .staff-table-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .staff-table-row > span:nth-child(2),
  .staff-table-row > span:nth-child(3),
  .staff-table-row > strong {
    grid-column: 1 / -1;
  }

  .staff-form-grid,
  .staff-split {
    grid-template-columns: 1fr;
  }

  .staff-form-grid label:nth-child(5) {
    grid-column: auto;
  }

  .staff-id-card,
  .staff-card-actions {
    align-items: flex-start;
  }

  .staff-id-card {
    grid-template-columns: minmax(0, 1fr) 58px;
  }

  .staff-id-avatar {
    grid-column: 2;
    grid-row: 1;
    width: 58px;
    height: 68px;
    font-size: 17px;
  }
}

.admin-body :where(.panel-head h2, .staff-id-main h3, .staff-table-head, .staff-card-form legend),
.admin-body .staff-card-form label:has(input:not([type="checkbox"])),
.admin-body .staff-card-form label:has(select),
.admin-body .staff-card-form label:has(textarea) {
  color: #ffb15c !important;
}

.admin-body :where(.staff-select-row.active, .admin-tabs button.active:not(.portal-sidebar-logout), .sidebar-chat-compact) {
  border-color: rgba(255, 130, 0, 0.58) !important;
  background: linear-gradient(180deg, rgba(255, 130, 0, 0.18), rgba(255, 130, 0, 0.10)) !important;
}

.admin-body .servicecenter-ticket .servicecenter-ticket-main,
.admin-body .servicecenter-ticket .servicecenter-ticket-main.as-button {
  border-color: rgba(255, 255, 255, 0.10) !important;
  background: rgba(3, 15, 29, 0.38) !important;
  color: #f7efe5 !important;
  box-shadow: none !important;
}

.admin-body .servicecenter-ticket .servicecenter-ticket-main :where(strong, small, em, span) {
  color: inherit !important;
}

.admin-body .servicecenter-ticket .servicecenter-ticket-main small,
.admin-body .servicecenter-ticket .servicecenter-ticket-main em {
  color: rgba(247, 239, 229, 0.72) !important;
}

/* Laptop-app correctie: dashboard vult de ruimte naast het menu. */
.admin-body:has(#dashboard:not(.hidden)) .admin-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.admin-body:has(#dashboard:not(.hidden)) .tab-panel:not(.hidden),
.admin-body:has(#dashboard:not(.hidden)) .metrics,
.admin-body:has(#dashboard:not(.hidden)) .overview-grid {
  width: 100% !important;
  max-width: none !important;
}

@media (min-width: 981px) and (max-width: 1459px) {
  .admin-body:has(#dashboard:not(.hidden)) .overview-grid > * {
    grid-column: span 6 !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .overview-grid > .wide,
  .admin-body:has(#dashboard:not(.hidden)) .overview-grid > .full-width,
  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-cockpit,
  .admin-body:has(#dashboard:not(.hidden)) .admin-cockpit,
  .admin-body:has(#dashboard:not(.hidden)) .trend-dashboard,
  .admin-body:has(#dashboard:not(.hidden)) .launch-readiness {
    grid-column: 1 / -1 !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-kpis {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-kpi {
    flex: 0 0 138px !important;
    min-width: 138px !important;
    max-width: 150px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-layout {
    grid-template-columns: 1fr !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-side {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket {
    grid-template-columns: minmax(0, 1fr) max-content !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket-main {
    grid-template-columns: 38px minmax(0, 1fr) max-content !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket .servicecenter-ticket-main,
  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket .servicecenter-ticket-main.as-button {
    min-height: 44px !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 7px !important;
    background: rgba(3, 15, 29, 0.38) !important;
    color: #f7efe5 !important;
    box-shadow: none !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket .servicecenter-ticket-main:hover,
  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket .servicecenter-ticket-main:focus {
    border-color: rgba(255, 130, 0, 0.48) !important;
    background: rgba(255, 130, 0, 0.10) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) :where(.servicecenter-kpi, .servicecenter-ticket, .servicecenter-mini-list) {
    background: linear-gradient(180deg, rgba(15, 35, 58, 0.98), rgba(8, 23, 39, 0.98)) !important;
    color: #f7efe5 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) :where(.servicecenter-kpi strong, .servicecenter-ticket-main strong, .servicecenter-mini-list strong) {
    color: #fff !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) :where(.servicecenter-kpi span, .servicecenter-ticket-main small, .servicecenter-ticket-main em, .servicecenter-mini-list span) {
    color: rgba(247, 239, 229, 0.74) !important;
  }
}

/* Finale platform-layout: links navigeren blijft links, ook in de laptop-app. */
.admin-body:has(#dashboard:not(.hidden)) .admin-shell {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard,
.portal-active .admin-shell {
  display: grid !important;
  grid-template-columns: clamp(178px, 18vw, 238px) minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard > .tab-panel:not(.hidden),
.portal-active #portalDashboard {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 16px clamp(14px, 2vw, 26px) !important;
  overflow-x: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 14px 10px !important;
  border-width: 0 1px 0 0 !important;
  border-radius: 0 !important;
  background: rgba(4, 16, 29, .98) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs > * {
  width: 100% !important;
  max-width: 100% !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs button:not(.portal-sidebar-logout),
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch a,
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .sidebar-chat-compact {
  min-height: 38px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  white-space: normal !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket-main {
  background: rgba(8, 26, 45, .92) !important;
}

@media (max-width: 760px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard,
  .portal-active .admin-shell {
    grid-template-columns: 156px minmax(0, 1fr) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #dashboard,
  .portal-active #portalDashboard {
    padding: 12px !important;
  }
}

/* Beheercentrum navigatie 2026-07-20: compact, gecategoriseerd en zonder stapelconstructies. */
.admin-body:has(#dashboard:not(.hidden)) .topbar {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard {
  grid-template-columns: 188px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  background: linear-gradient(135deg, #06182c 0%, #081f38 54%, #06111f 100%) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
  z-index: 1200 !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto 1fr auto !important;
  gap: 8px !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 82px 10px 10px !important;
  border-right: 1px solid rgba(255, 255, 255, .13) !important;
  background:
    linear-gradient(180deg, rgba(5, 18, 33, .98), rgba(3, 13, 24, .99)) !important;
  overflow: visible !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-more-tabs {
  display: block !important;
  position: relative !important;
  margin: 0 !important;
  color: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-more-tabs summary {
  width: 100% !important;
  min-height: 33px !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .055) !important;
  color: #f7efe5 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-more-tabs[open] summary {
  border-color: rgba(255, 130, 0, .62) !important;
  background: rgba(255, 130, 0, .17) !important;
  color: #ffb15a !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-more-flyout button {
  min-height: 32px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs::before {
  content: "" !important;
  position: absolute !important;
  top: 12px !important;
  left: 10px !important;
  right: 10px !important;
  height: 58px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 7px !important;
  background: #fff url("assets/profix24-logo.png") center / 82% auto no-repeat !important;
}

.admin-nav-block {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.admin-nav-primary {
  overflow: hidden auto !important;
  min-height: 0 !important;
  padding-right: 2px !important;
  scrollbar-width: thin;
}

.admin-nav-caption,
.admin-more-tabs {
  display: block !important;
  margin: 2px 2px 0 !important;
  color: rgba(247, 239, 229, .68) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs button:not(.portal-sidebar-logout),
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .sidebar-chat-compact,
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs select {
  width: 100% !important;
  min-height: 33px !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .055) !important;
  color: #f7efe5 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs button.active:not(.portal-sidebar-logout) {
  border-color: rgba(255, 130, 0, .62) !important;
  background: rgba(255, 130, 0, .17) !important;
  color: #ffb15a !important;
  box-shadow: inset 3px 0 0 #ff8200 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .system-switch {
  display: grid !important;
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .system-switch.hidden,
.admin-body:has(#dashboard:not(.hidden)) .admin-more-tabs.hidden {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .system-switch label {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) #adminSidebarChats {
  display: grid !important;
  gap: 5px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .sidebar-chat-compact {
  min-height: 35px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom {
  align-self: end !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .portal-sidebar-logout {
  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard > .tab-panel:not(.hidden) {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 14px clamp(14px, 2vw, 26px) !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(#adminToast, #incidentBanner) {
  grid-column: 2 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-kpis {
  display: flex !important;
  flex-wrap: wrap !important;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-kpi {
  flex: 1 1 112px !important;
  min-width: 0 !important;
  width: 100% !important;
}

@media (max-width: 900px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard {
    grid-template-columns: 164px minmax(0, 1fr) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
    padding-inline: 8px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs button:not(.portal-sidebar-logout),
  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .sidebar-chat-compact,
  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs select {
    min-height: 31px !important;
    padding: 6px 7px !important;
    font-size: 11px !important;
  }
}

/* App polish 2026-07-21: laatste laag voor de laptop-app en donkere beheeromgeving. */
.admin-body:has(#dashboard:not(.hidden)) {
  --panel-bg: rgba(9, 30, 52, .92);
  --panel-bg-strong: rgba(12, 38, 64, .96);
  --panel-line: rgba(255, 255, 255, .14);
  --panel-text: #f8fafc;
  --panel-muted: rgba(248, 250, 252, .72);
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard {
  grid-template-columns: clamp(172px, 13vw, 218px) minmax(0, 1fr) !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard > .tab-panel:not(.hidden) {
  padding: 12px 16px !important;
  overflow-x: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(
  .admin-cockpit,
  .servicecenter-cockpit,
  .finance-workspace,
  .assistant-workspace,
  .branch-workspace,
  .security-workspace,
  .audit-workspace,
  .benchmark-workspace,
  .community-workspace,
  .communication-workspace,
  .staff-console,
  .staff-dossier,
  .staff-sessions,
  .workspace,
  .request-list,
  .staff-chat-list,
  .staff-chat-room,
  .chat-panel,
  .customer-request-list
) {
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(
  .cockpit-head,
  .cockpit-block,
  .summary-card,
  .metric-card,
  .metrics article,
  .servicecenter-ticket,
  .servicecenter-ticket-main,
  .servicecenter-mini-list,
  .servicecenter-kpi,
  .request-item,
  .staff-table-row,
  .staff-table-head,
  .staff-subpanel,
  .staff-document-row,
  .staff-chat-channel,
  .staff-chat-messages article,
  .communication-kpis button,
  .badge-queue-list article,
  .community-kpis article,
  .branch-mini-metrics,
  .staffing-grid label,
  .request-card,
  .customer-request-card,
  .chat-messages article
) {
  border-color: var(--panel-line) !important;
  background: linear-gradient(180deg, var(--panel-bg-strong), var(--panel-bg)) !important;
  color: var(--panel-text) !important;
  box-shadow: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(
  .servicecenter-ticket-main,
  .request-item,
  .staff-table-row,
  .staff-chat-channel,
  .communication-kpis button
) {
  min-width: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(
  .cockpit-head,
  .cockpit-block,
  .servicecenter-ticket,
  .request-item,
  .staff-table-row,
  .staff-chat-channel
) :where(strong, h2, h3, b) {
  color: #fff !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(
  .cockpit-head,
  .cockpit-block,
  .servicecenter-ticket,
  .servicecenter-kpi,
  .request-item,
  .staff-table-row,
  .staff-chat-channel,
  .chat-messages article
) :where(p, span, small, em) {
  color: var(--panel-muted) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .metrics,
.admin-body:has(#dashboard:not(.hidden)) .cockpit-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

.admin-body:has(#dashboard:not(.hidden)) .metric-card,
.admin-body:has(#dashboard:not(.hidden)) .cockpit-kpis .summary-card {
  min-height: 54px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .metric-card span,
.admin-body:has(#dashboard:not(.hidden)) .cockpit-kpis .summary-card strong {
  color: #ffb15a !important;
  font-size: clamp(19px, 1.8vw, 26px) !important;
  line-height: 1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .metric-card strong,
.admin-body:has(#dashboard:not(.hidden)) .cockpit-kpis .summary-card span {
  color: #f7efe5 !important;
  font-size: 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-kpis {
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)) !important;
  display: grid !important;
  overflow: visible !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-kpi {
  min-height: 48px !important;
  min-width: 0 !important;
  padding: 8px 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-kpi strong {
  color: #ffb15a !important;
  font-size: 18px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-kpi span {
  color: #f7efe5 !important;
  font-size: 11px !important;
  white-space: normal !important;
}

.login-panel .login-help {
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
  line-height: 1.35 !important;
}

.login-panel #loginMessage:not(:empty) {
  margin-top: 10px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(255, 130, 0, .25) !important;
  border-radius: 7px !important;
  background: rgba(255, 130, 0, .10) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-layout {
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket-main {
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  min-height: 42px !important;
  padding: 7px 9px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket-main :where(strong, small, em) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket-actions {
  flex-wrap: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-guide {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, .9fr) auto !important;
  gap: 6px !important;
  align-items: center !important;
  margin-top: 2px !important;
  padding: 5px 7px !important;
  border: 1px solid rgba(255, 130, 0, .22) !important;
  border-radius: 7px !important;
  background: rgba(255, 130, 0, .08) !important;
  min-width: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-guide strong {
  color: #ffb15a !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-guide span {
  color: rgba(248, 250, 252, .78) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-timer {
  justify-self: end !important;
  min-width: max-content !important;
  padding: 2px 6px !important;
  border: 1px solid rgba(255, 130, 0, .28) !important;
  border-radius: 999px !important;
  background: rgba(255, 130, 0, .13) !important;
  color: #ffb15a !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-timer.urgent,
.admin-body:has(#dashboard:not(.hidden)) .servicecenter-timer.expired {
  border-color: rgba(248, 113, 113, .42) !important;
  background: rgba(127, 29, 29, .38) !important;
  color: #fecaca !important;
}

.admin-body:has(#dashboard:not(.hidden)) .button.compact,
.admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket-actions .button {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
}

@media (max-width: 1200px) {
  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard {
    grid-template-columns: 154px minmax(0, 1fr) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #dashboard > .tab-panel:not(.hidden) {
    padding: 10px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-guide {
    grid-template-columns: 1fr !important;
  }
}

.admin-body:has(#dashboard:not(.hidden)) .callback-context {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 10px 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .callback-context article {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  padding: 8px 9px !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(12, 38, 64, .94), rgba(8, 27, 47, .94)) !important;
  color: #f8fafc !important;
}

.admin-body:has(#dashboard:not(.hidden)) .callback-context span {
  color: #ffb15a !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.admin-body:has(#dashboard:not(.hidden)) .callback-context strong {
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .callback-context small,
.admin-body:has(#dashboard:not(.hidden)) .callback-context em {
  color: rgba(248, 250, 252, .72) !important;
  font-size: 10.5px !important;
  font-style: normal !important;
  line-height: 1.25 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .callback-context :where(strong, small, em) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) .callback-history {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .callback-history b {
  color: #f8fafc !important;
  margin-right: 5px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-regie-strip {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(150px, .75fr)) !important;
  gap: 8px !important;
  margin: 10px 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-regie-strip article,
.admin-body:has(#dashboard:not(.hidden)) .ticket-timeline {
  min-width: 0 !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(12, 38, 64, .96), rgba(7, 25, 44, .96)) !important;
  color: #f8fafc !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-regie-strip article {
  display: grid !important;
  gap: 3px !important;
  align-content: start !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-regie-strip article.primary {
  border-color: rgba(255, 130, 0, .34) !important;
  background: linear-gradient(180deg, rgba(43, 35, 24, .94), rgba(12, 38, 64, .96)) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-regie-strip span,
.admin-body:has(#dashboard:not(.hidden)) .ticket-timeline .panel-head span {
  color: #ffb15a !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-regie-strip strong {
  color: #fff !important;
  font-size: 12.5px !important;
  line-height: 1.22 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-regie-strip small {
  color: rgba(248, 250, 252, .72) !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-regie-strip :where(strong, small) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-regie-strip .servicecenter-timer {
  justify-self: start !important;
  margin-top: 2px !important;
}

.admin-body .ticket-detail-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

.admin-body .detail .info-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}

.admin-body .detail .info-grid p,
.admin-body .ticket-progress,
.admin-body .ticket-progress li,
.admin-body .ticket-next-action {
  border-color: rgba(255, 255, 255, .12) !important;
  background: linear-gradient(180deg, rgba(13, 39, 66, .96), rgba(7, 25, 44, .96)) !important;
  color: rgba(248, 250, 252, .86) !important;
}

.admin-body .detail .info-grid :where(strong, span, small, p),
.admin-body .ticket-progress :where(strong, span, small, p),
.admin-body .ticket-next-action :where(strong, span, small, p) {
  color: inherit !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.admin-body .detail .info-grid strong,
.admin-body .ticket-progress strong {
  color: #fff !important;
}

.admin-body .ticket-progress {
  position: static !important;
  margin-top: 12px !important;
}

.admin-body .ticket-progress ol {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}

.admin-body .ticket-progress li {
  align-items: center !important;
}

.admin-body .ticket-progress li.done {
  border-color: rgba(255, 130, 0, .38) !important;
  background: linear-gradient(180deg, rgba(52, 36, 18, .94), rgba(14, 42, 67, .94)) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-timeline {
  margin-top: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-timeline-list {
  display: grid !important;
  gap: 5px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-timeline-list article {
  display: grid !important;
  grid-template-columns: 132px minmax(130px, .55fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 6px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .10) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-timeline-list article:first-child {
  border-top: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-timeline-list span {
  color: rgba(248, 250, 252, .58) !important;
  font-size: 10.5px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-timeline-list strong {
  color: #fff !important;
  font-size: 11.5px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-timeline-list small {
  color: rgba(248, 250, 252, .72) !important;
  font-size: 10.5px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .ticket-timeline-list :where(span, strong, small) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 1180px) {
  .admin-body:has(#dashboard:not(.hidden)) .callback-context {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .ticket-regie-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .admin-body:has(#dashboard:not(.hidden)) .ticket-regie-strip,
  .admin-body:has(#dashboard:not(.hidden)) .callback-context {
    grid-template-columns: 1fr !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .ticket-timeline-list article {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
}
/* Launch polish: aanmeld- en loginpagina's volgen dezelfde rustige ProFix24-look als de app. */
.signup-look .admin-shell,
.login-entry .admin-shell {
  min-height: calc(100vh - 72px);
  align-items: start;
  background:
    radial-gradient(circle at 78% 6%, rgba(255, 130, 0, 0.16), transparent 28%),
    linear-gradient(135deg, rgba(5, 20, 38, 0.98), rgba(7, 31, 56, 0.96));
}

.signup-look .portal-shell,
.login-entry .portal-shell {
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.signup-look .login-panel,
.login-entry .login-panel {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: linear-gradient(180deg, rgba(16, 36, 59, 0.96), rgba(8, 24, 43, 0.96)) !important;
  color: #f7efe5 !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.30) !important;
}

.signup-look .login-panel h1,
.signup-look .login-panel h2,
.signup-look .login-panel strong,
.signup-look .login-panel label,
.signup-look .login-panel label span,
.login-entry .login-panel h1,
.login-entry .login-panel strong,
.login-entry .login-panel label,
.login-entry .login-panel label span {
  color: #fff !important;
  hyphens: manual;
}

.signup-look .form-message,
.signup-look .login-panel p,
.signup-look .login-panel small,
.signup-look .login-panel span,
.login-entry .form-message,
.login-entry .login-panel p,
.login-entry .login-panel small,
.login-entry .login-panel span {
  color: rgba(247, 239, 229, 0.78) !important;
}

.signup-look form {
  gap: 9px;
}

.signup-look input,
.signup-look select,
.signup-look textarea,
.login-entry .login-panel input,
.login-entry .login-panel select,
.login-entry .login-panel textarea {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.signup-look input::placeholder,
.signup-look textarea::placeholder,
.login-entry input::placeholder,
.login-entry textarea::placeholder {
  color: rgba(247, 239, 229, 0.48) !important;
}

.signup-look select option,
.login-entry select option {
  background: #07182d !important;
  color: #fff !important;
}

.signup-look .pro-value,
.test-login-panel {
  border: 1px solid rgba(255, 130, 0, 0.24) !important;
  background: rgba(255, 130, 0, 0.09) !important;
}

.signup-look .portal-shell .login-panel + .login-panel {
  margin-top: 0;
}

.signup-look .button.primary,
.login-entry .button.primary {
  background: #ff8200 !important;
  color: #07182d !important;
}

.signup-look .button.secondary,
.login-entry .button.secondary,
.login-entry .quiet-link {
  border-color: rgba(255, 130, 0, 0.36) !important;
  background: rgba(255, 130, 0, 0.10) !important;
  color: #ffd29d !important;
}

@media (min-width: 880px) {
  .signup-look .portal-shell:has(.login-panel + .login-panel) {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.8fr);
    align-items: start;
  }
}

/* Laatste dashboardcorrectie: servicecenter gebruikt de volledige werkruimte. */
.admin-body:has(#dashboard:not(.hidden)) #overviewPanel.overview-grid > .servicecenter-cockpit {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-cockpit {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-cockpit .cockpit-head {
  width: 100% !important;
  max-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-cockpit .servicecenter-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  overflow: visible !important;
}

.integration-status-card {
  margin: 10px 0 14px;
}

.integration-status-card .settings-help {
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 130, 0, 0.22);
  border-radius: 8px;
  background: rgba(255, 130, 0, 0.08) !important;
  color: rgba(247, 239, 229, 0.84) !important;
}

.integration-status-grid {
  display: grid;
  gap: 8px;
}

.integration-status-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(92px, max-content) minmax(180px, 0.8fr) minmax(240px, 1.15fr);
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 3px solid rgba(255, 130, 0, 0.75);
  border-radius: 8px;
  background: rgba(6, 22, 39, 0.54);
  color: #fff;
}

.integration-status-row strong,
.integration-status-row b {
  color: #fff;
}

.integration-status-row small,
.integration-status-row em {
  display: block;
  color: rgba(247, 239, 229, 0.72);
  font-style: normal;
  line-height: 1.25;
}

.integration-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.integration-meta small {
  padding-left: 8px;
  border-left: 2px solid rgba(255, 130, 0, 0.34);
}

.integration-status-row b {
  justify-self: start;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.18);
  color: #ffb15c;
}

.integration-status-row.is-live {
  border-left-color: #29c76f;
}

.integration-status-row.is-live b {
  background: rgba(41, 199, 111, 0.18);
  color: #8df0b5;
}

.integration-status-row.is-waiting {
  border-left-color: #e76262;
}

.integration-status-row.is-waiting b {
  background: rgba(231, 98, 98, 0.18);
  color: #ffb4b4;
}

.data-sharing-card {
  margin-top: 12px;
}

.data-sharing-card .settings-card-head,
.data-sharing-summary {
  grid-column: 1 / -1;
}

.data-sharing-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
  align-items: stretch;
}

.data-sharing-summary span {
  display: grid;
  gap: 2px;
  min-height: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  background: rgba(6, 22, 39, 0.50);
}

.data-sharing-summary strong {
  color: #ffb15c;
  font-size: 1.02rem;
}

.data-sharing-summary small {
  color: rgba(247, 239, 229, 0.72);
}

.data-sharing-grid {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.data-sharing-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(92px, max-content) repeat(3, minmax(150px, 1fr));
  gap: 10px;
  align-items: start;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 3px solid rgba(255, 130, 0, 0.75);
  border-radius: 8px;
  background: rgba(6, 22, 39, 0.54);
  color: #fff;
}

.data-sharing-row strong,
.data-sharing-row b {
  color: #fff;
}

.data-sharing-row small,
.data-sharing-row p {
  margin: 0;
  color: rgba(247, 239, 229, 0.72);
  line-height: 1.25;
}

.data-sharing-row em {
  color: #ffb15c;
  font-style: normal;
  font-weight: 900;
}

.data-sharing-row b {
  justify-self: start;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.18);
  color: #ffb15c;
}

.data-sharing-row.is-live {
  border-left-color: #29c76f;
}

.data-sharing-row.is-live b {
  background: rgba(41, 199, 111, 0.18);
  color: #8df0b5;
}

.data-sharing-row.is-waiting {
  border-left-color: #e76262;
}

.data-sharing-row.is-waiting b {
  background: rgba(231, 98, 98, 0.18);
  color: #ffb4b4;
}

.role-feature-matrix-card {
  margin-top: 12px;
}

.role-feature-matrix-card .settings-card-head,
.role-feature-legend,
.role-feature-matrix {
  grid-column: 1 / -1;
}

.role-feature-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.role-feature-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  background: rgba(6, 22, 39, 0.46);
  color: rgba(247, 239, 229, 0.78);
  font-size: 0.78rem;
  font-weight: 900;
}

.role-feature-matrix {
  display: grid;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 3px;
}

.role-feature-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.2fr) repeat(5, minmax(112px, 0.72fr));
  gap: 5px;
  min-width: 820px;
}

.role-feature-row > span,
.role-feature-row > strong {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  background: rgba(6, 22, 39, 0.46);
  color: rgba(247, 239, 229, 0.88);
  font-size: 0.8rem;
  font-weight: 900;
}

.role-feature-head > strong {
  background: rgba(255, 130, 0, 0.14);
  color: #ffb15c;
}

.role-feature-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.role-feature-cell small {
  overflow: hidden;
  color: rgba(247, 239, 229, 0.70);
  font-size: 0.68rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-feature-dot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #ffb020;
  box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.13);
}

.role-feature-dot.green {
  background: #29c76f;
  box-shadow: 0 0 0 3px rgba(41, 199, 111, 0.13);
}

.role-feature-dot.orange {
  background: #ffb15c;
  box-shadow: 0 0 0 3px rgba(255, 130, 0, 0.14);
}

.role-feature-dot.blue {
  background: #62a8ff;
  box-shadow: 0 0 0 3px rgba(98, 168, 255, 0.13);
}

.role-feature-dot.red {
  background: #e76262;
  box-shadow: 0 0 0 3px rgba(231, 98, 98, 0.13);
}

.offline-status {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-areas: "dot title" "dot note";
  align-items: center;
  column-gap: 9px;
  min-width: 190px;
  max-width: min(320px, calc(100vw - 28px));
  padding: 10px 12px;
  border: 1px solid rgba(255, 130, 0, 0.38);
  border-radius: 10px;
  background: rgba(7, 19, 34, 0.94);
  color: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  text-align: left;
  cursor: pointer;
}

.offline-status.hidden {
  display: none;
}

.offline-status .offline-dot {
  grid-area: dot;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #ffb15c;
  box-shadow: 0 0 0 4px rgba(255, 130, 0, 0.12);
}

.offline-status strong {
  grid-area: title;
  color: #ffb15c;
  font-size: 0.88rem;
  line-height: 1.1;
}

.offline-status small {
  grid-area: note;
  color: rgba(247, 239, 229, 0.76);
  font-size: 0.74rem;
  line-height: 1.2;
}

.offline-status.is-offline {
  border-color: rgba(231, 98, 98, 0.58);
}

.offline-status.is-offline .offline-dot {
  background: #ff7676;
  box-shadow: 0 0 0 4px rgba(231, 98, 98, 0.15);
}

.offline-status.is-offline strong {
  color: #ffb4b4;
}

.customer-integration-strip span {
  display: grid;
  gap: 2px;
}

.customer-integration-strip em {
  color: rgba(247, 239, 229, 0.65);
  font-size: 0.78rem;
  font-style: normal;
}

@media (max-width: 860px) {
  .integration-status-row,
  .data-sharing-row {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1280px) {
  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-cockpit .servicecenter-layout {
    grid-template-columns: minmax(620px, 1.35fr) minmax(320px, .65fr) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-cockpit .servicecenter-ticket {
    grid-template-columns: minmax(0, 1fr) max-content !important;
  }
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket-list {
  display: grid !important;
  gap: 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket-main {
  display: grid !important;
  grid-template-columns: minmax(52px, 72px) minmax(0, 1fr) max-content !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 8px !important;
  text-align: left !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket-main :where(strong, small, em) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket-actions {
  display: flex !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
}

@media (max-width: 760px) {
  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket,
  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket-main {
    grid-template-columns: 1fr !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-ticket-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

/* Finance uses the full work area; the generic dashboard card grid must not halve it. */
.admin-body:has(#dashboard:not(.hidden)) #financePanel > .finance-workspace {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}

.admin-intake-safety,
.admin-intake-preview {
  display: grid;
  gap: 8px;
}

.admin-intake-safety {
  position: fixed;
  top: 14px;
  left: calc(clamp(178px, 18vw, 238px) + 16px);
  right: 16px;
  z-index: 20;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 138, 0, 0.48);
  border-left: 4px solid #ff8a00;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(82, 22, 12, 0.88), rgba(36, 14, 10, 0.88));
  color: #fff7ed;
  pointer-events: none;
}

.admin-intake-safety.hidden {
  display: none !important;
}

.admin-intake-preview {
  grid-column: 1 / -1;
}

.admin-intake-safety strong {
  color: #ffb15a;
  font-size: 15px;
}

.admin-intake-safety span,
.admin-intake-safety li {
  color: rgba(255, 247, 237, 0.86);
  font-size: 13px;
  font-weight: 700;
}

.admin-intake-safety ol {
  margin: 0;
  padding-left: 18px;
}

.admin-intake-safety button {
  pointer-events: auto;
  justify-self: start;
}

.admin-intake-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(15, 35, 58, 0.94), rgba(8, 23, 39, 0.94));
  color: #f7efe5;
}

.admin-intake-card.danger {
  border-color: rgba(255, 138, 0, 0.5);
}

.admin-intake-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
}

.admin-intake-card-head span {
  color: rgba(247, 239, 229, 0.68);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-intake-card-head strong {
  color: #fff;
  font-size: 18px;
}

.admin-intake-card-head em {
  grid-row: span 2;
  align-self: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 138, 0, 0.16);
  color: #ffb15a;
  font-style: normal;
  font-weight: 900;
}

.admin-intake-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-intake-card-grid p,
.admin-intake-card-warning,
.admin-intake-components-preview span {
  margin: 0;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(247, 239, 229, 0.84);
  font-size: 12px;
  font-weight: 750;
}

.admin-intake-card-grid b,
.admin-intake-card-warning b,
.admin-intake-components-preview b {
  display: block;
  margin-bottom: 3px;
  color: #ffb15a;
  font-size: 11px;
}

.admin-intake-card-warning {
  border-color: rgba(255, 138, 0, 0.36);
  background: rgba(255, 138, 0, 0.11);
}

.admin-intake-card-warning span {
  color: rgba(255, 247, 237, 0.86);
}

.admin-intake-components-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

@media (max-width: 1180px) {
  .admin-intake-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .admin-intake-card-grid,
  .admin-intake-card-head {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 981px) {
  .admin-body:has(#dashboard:not(.hidden)) #financePanel .finance-summary-strip {
    grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #financePanel .finance-priority-grid,
  .admin-body:has(#dashboard:not(.hidden)) #financePanel .finance-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 981px) and (max-width: 1240px) {
  .admin-body:has(#dashboard:not(.hidden)) #financePanel .finance-columns {
    grid-template-columns: 1fr !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #financePanel .bookkeeping-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* App canvas: benut brede schermen zonder dashboards in een smalle kolom te persen. */
@media (min-width: 981px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard,
  .portal-active .dashboard {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #dashboard {
    padding-left: 258px !important;
    padding-right: clamp(16px, 2vw, 34px) !important;
  }

  .portal-active .dashboard {
    padding-left: 258px !important;
    padding-right: clamp(16px, 2vw, 34px) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #dashboard > :not(.admin-tabs):not(.system-switch),
  .portal-active .dashboard > :not(.portal-section-nav):not(.professional-section-nav) {
    width: 100% !important;
    max-width: 1560px !important;
    min-width: 0 !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #overviewPanel,
  .admin-body:has(#dashboard:not(.hidden)) #financePanel,
  .admin-body:has(#dashboard:not(.hidden)) #requestsPanel,
  .admin-body:has(#dashboard:not(.hidden)) #staffPanel,
  .admin-body:has(#dashboard:not(.hidden)) #professionalsPanel,
  .admin-body:has(#dashboard:not(.hidden)) #communicationsPanel,
  .admin-body:has(#dashboard:not(.hidden)) #benchmarksPanel,
  .portal-active .professional-section,
  .portal-active .customer-section,
  .portal-active .customer-request-card {
    justify-self: stretch !important;
  }

  .admin-body .cockpit-kpis,
  .admin-body .servicecenter-kpis,
  .portal-active .professional-cockpit,
  .portal-active .customer-cockpit {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    overflow: visible !important;
  }

  .admin-body .servicecenter-layout,
  .admin-body .cockpit-sections {
    grid-template-columns: minmax(520px, 1.15fr) minmax(340px, 0.85fr) !important;
  }

  .admin-body .servicecenter-ticket {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .admin-body .servicecenter-ticket-main {
    grid-template-columns: 42px minmax(0, 1fr) minmax(110px, auto) !important;
  }

  .admin-body .servicecenter-ticket-main strong,
  .admin-body .servicecenter-ticket-main small,
  .admin-body .servicecenter-ticket-main em {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .portal-active :where(.readiness-step, .professional-next-action, .professional-cockpit article, .customer-cockpit article) {
    border-color: rgba(255, 255, 255, 0.13) !important;
    background: linear-gradient(180deg, rgba(16, 36, 59, 0.96), rgba(9, 25, 43, 0.96)) !important;
    color: #f7efe5 !important;
  }

  .portal-active :where(.readiness-step.done, .readiness-step.warning, .readiness-step.action, .professional-next-action.warning, .professional-next-action.neutral) {
    border-color: rgba(255, 130, 0, 0.28) !important;
    background: linear-gradient(180deg, rgba(32, 45, 61, 0.98), rgba(12, 28, 47, 0.98)) !important;
  }

  .portal-active :where(.readiness-step small, .professional-next-action small, .professional-cockpit article span, .customer-cockpit article span) {
    color: rgba(247, 239, 229, 0.74) !important;
  }

  .portal-active :where(.readiness-step strong, .professional-next-action strong, .professional-cockpit article strong, .customer-cockpit article strong) {
    color: #fff !important;
  }
}

@media (min-width: 981px) and (max-width: 1280px) {
  .admin-body .servicecenter-layout,
  .admin-body .cockpit-sections {
    grid-template-columns: 1fr !important;
  }

  .admin-body .servicecenter-ticket,
  .admin-body .servicecenter-ticket-main {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-body .servicecenter-ticket-actions {
    justify-content: flex-start !important;
    min-width: 0 !important;
  }
}

/* Multi-scherm werkplek: aparte vensters voor intake, planning, chat en finance. */
.portal-workscreen-actions {
  display: grid;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.screen-switcher {
  width: 100%;
}

.screen-switcher summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 130, 0, 0.26);
  border-radius: 6px;
  background: rgba(255, 130, 0, 0.10);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.screen-switcher summary::-webkit-details-marker {
  display: none;
}

.screen-switcher summary::after {
  content: "+";
  margin-left: auto;
  color: #ff9b2f;
  font-size: 15px;
  line-height: 1;
}

.screen-switcher[open] summary::after {
  content: "-";
}

.screen-switcher-icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 12px;
  border: 2px solid #ff9b2f;
  border-radius: 3px;
  box-shadow: inset 0 -3px 0 rgba(255, 155, 47, 0.20);
}

.screen-switcher-icon::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -5px;
  height: 2px;
  background: #ff9b2f;
  border-radius: 999px;
}

.screen-switcher-grid {
  display: grid;
  gap: 6px;
  padding-top: 6px;
}

.portal-workscreen-actions > span {
  color: rgba(247, 239, 229, 0.62) !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.admin-nav-screens button,
.portal-workscreen-actions button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 130, 0, 0.28) !important;
  border-radius: 6px;
  background: rgba(255, 130, 0, 0.10) !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.portal-workscreen-actions button svg,
.admin-nav-screens button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.admin-nav-screens button:hover,
.portal-workscreen-actions button:hover {
  background: rgba(255, 130, 0, 0.18) !important;
}

.portal-action-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}

.portal-action-row .button {
  display: grid !important;
  align-content: center;
  gap: 2px;
  min-height: 44px !important;
  padding: 9px 11px !important;
  text-decoration: none !important;
  text-align: left !important;
}

.portal-action-row .button strong {
  color: inherit !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
}

.portal-action-row .button span {
  color: rgba(247, 239, 229, 0.72) !important;
  font-size: 11px !important;
  line-height: 1.18 !important;
}

.portal-action-row .button.primary span {
  color: rgba(6, 17, 31, 0.72) !important;
}

.portal-active .request-workspace {
  align-content: start !important;
}

.portal-active .portal-request-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

.portal-active .request-core-card,
.portal-active .request-photo-uploader,
.portal-active .smart-intake-support {
  display: grid !important;
  gap: 12px !important;
  padding: 14px !important;
  border: 1px solid rgba(184, 207, 230, 0.16) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(12, 33, 55, 0.96), rgba(7, 23, 40, 0.96)) !important;
  color: var(--pf24-text) !important;
}

.portal-active .request-core-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(184, 207, 230, 0.13);
}

.portal-active .request-core-head span {
  color: #ffad4d !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.portal-active .request-core-head strong {
  color: #fff !important;
  font-size: 17px !important;
}

.portal-active .request-core-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.portal-active .request-core-grid .wide,
.portal-active .service-search-picker {
  grid-column: 1 / -1;
}

.portal-active .service-search-picker {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
  gap: 8px;
  align-items: end;
}

.portal-active .service-search-picker label {
  margin: 0 !important;
}

.portal-active .service-search-selected {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255, 130, 0, 0.32) !important;
  border-radius: 7px;
  background: rgba(255, 130, 0, 0.12) !important;
  color: #ffd2a1 !important;
  font-weight: 950;
}

.portal-active .service-search-results {
  grid-column: 1 / -1;
  max-height: 240px;
  overflow: auto;
}

.portal-active .request-core-grid textarea {
  min-height: 96px !important;
  resize: vertical;
}

.portal-active .request-photo-uploader {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.portal-active .request-photo-uploader strong,
.portal-active .smart-intake-head strong {
  color: #fff !important;
  font-size: 15px !important;
}

.portal-active .request-photo-uploader span,
.portal-active .smart-intake-head span {
  color: rgba(247, 239, 229, 0.72) !important;
  font-size: 12px !important;
}

.portal-active .photo-pick-button {
  min-height: 38px !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(255, 130, 0, 0.36) !important;
  border-radius: 7px !important;
  background: rgba(255, 130, 0, 0.13) !important;
  color: #fff !important;
  cursor: pointer;
}

.portal-active .smart-intake-support {
  border-color: rgba(184, 207, 230, 0.12) !important;
  background: linear-gradient(180deg, rgba(9, 27, 46, 0.92), rgba(5, 18, 32, 0.92)) !important;
}

.portal-active .smart-intake-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.portal-active .smart-intake-actions span {
  color: rgba(247, 239, 229, 0.62) !important;
  font-size: 12px !important;
}

.portal-active .smart-advice,
.portal-active .smart-question-list button {
  border-color: rgba(255, 130, 0, 0.24) !important;
  background: rgba(255, 130, 0, 0.08) !important;
  color: var(--pf24-text) !important;
}

.portal-active .customer-request-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

.portal-active .professional-section#professional-workorders.customer-request-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)) !important;
}

.portal-active .job-card {
  gap: 12px !important;
  padding: 14px !important;
}

.portal-active .job-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px !important;
  align-items: start !important;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(184, 207, 230, 0.14);
}

.portal-active .job-card-head h2 {
  margin: 0 !important;
  font-size: clamp(18px, 1.6vw, 23px) !important;
}

.portal-active .job-card-head .eyebrow {
  margin: 0 0 3px !important;
  color: #ffad4d !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.portal-active .job-card .description {
  max-height: 7.8em;
  overflow: auto;
  margin: 0 !important;
  padding: 10px 11px;
  border: 1px solid rgba(184, 207, 230, 0.12);
  border-radius: 7px;
  background: rgba(2, 13, 25, 0.34);
  color: rgba(247, 239, 229, 0.86) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.portal-active .job-card .info-grid {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important;
  gap: 8px !important;
}

.portal-active .job-card .info-grid p {
  min-height: 54px;
  margin: 0 !important;
  padding: 8px 9px !important;
  border: 1px solid rgba(184, 207, 230, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(247, 239, 229, 0.84) !important;
  font-size: 12px !important;
}

.portal-active .job-card .info-grid strong {
  display: block;
  margin-bottom: 3px;
  color: #ffad4d !important;
  font-size: 10px !important;
  text-transform: uppercase;
}

.portal-active .approval-panel {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 2px !important;
}

.portal-active .planning-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
  gap: 10px !important;
}

.portal-active .planning-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 11px 12px !important;
  border: 1px solid rgba(184, 207, 230, 0.15) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(13, 35, 58, 0.96), rgba(7, 23, 39, 0.96)) !important;
  color: var(--pf24-text) !important;
}

.portal-active .planning-card small {
  display: block;
  color: #ffad4d !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  text-transform: uppercase;
}

.portal-active .planning-card strong {
  display: block;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1.16 !important;
}

.portal-active .planning-card span {
  display: block;
  color: rgba(247, 239, 229, 0.68) !important;
  font-size: 12px !important;
}

.portal-active .planning-card b {
  display: block;
  color: #fff !important;
  font-size: 13px !important;
  text-align: right;
}

.portal-active .planning-card em {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 130, 0, 0.28);
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.12);
  color: #ffd2a1 !important;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.portal-active #professional-team.professional-foldout {
  gap: 12px !important;
}

.portal-active #professional-team .team-summary-strip {
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)) !important;
  gap: 8px !important;
}

.portal-active #professional-team .team-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
  gap: 10px !important;
}

.portal-active #professional-team .team-row {
  border-radius: 8px !important;
  overflow: hidden !important;
}

.portal-active #professional-team .team-row > summary {
  min-height: 68px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 11px !important;
  cursor: pointer;
}

.portal-active #professional-team .team-row > summary .entity-avatar {
  width: 42px !important;
  height: 42px !important;
}

.portal-active #professional-team .team-row > summary strong {
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1.12 !important;
}

.portal-active #professional-team .team-row > summary small {
  color: rgba(247, 239, 229, 0.66) !important;
  font-size: 11px !important;
  line-height: 1.22 !important;
}

.portal-active #professional-team .team-edit-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 8px !important;
  padding: 12px !important;
  border-top: 1px solid var(--line);
}

.portal-active #professional-team .team-edit-sections {
  grid-template-columns: 1fr !important;
}

.portal-active #professional-team .team-edit-section {
  border-color: var(--line) !important;
  background: var(--surface) !important;
}

.portal-active #professional-team .team-edit-section > summary {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

.portal-active #professional-team .team-edit-section > summary strong {
  color: var(--text) !important;
}

.portal-active #professional-team .team-edit-section > summary small {
  color: var(--muted) !important;
}

.portal-active #professional-team .team-edit-section-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
}

.portal-active #professional-team .team-edit-grid .wide,
.portal-active #professional-team .team-permission-field,
.portal-active #professional-team .team-personnel-field,
.portal-active #professional-team .team-document-field,
.portal-active #professional-team .team-invite-actions {
  grid-column: 1 / -1 !important;
}

.portal-active #professional-team .team-permission-field,
.portal-active #professional-team .team-personnel-field {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 8px !important;
  padding: 11px !important;
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
}

.portal-active #professional-team .team-permission-field legend,
.portal-active #professional-team .team-personnel-field legend {
  padding-inline: 6px !important;
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  text-transform: uppercase;
}

.portal-active #professional-team .team-invite-actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px !important;
}

.portal-active #professional-team .professional-time-admin,
.portal-active #professional-team .professional-hr-admin {
  margin-top: 10px !important;
  border-color: rgba(255, 130, 0, 0.18) !important;
}

.portal-active #professional-team .professional-time-admin > summary,
.portal-active #professional-team .professional-hr-admin > summary {
  background: rgba(255, 130, 0, 0.06) !important;
}

.portal-active #professional-team :is(
  .badge-order-panel,
  .employment-panel,
  .professional-time-admin,
  .professional-hr-admin
) > summary {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.portal-active #professional-team :is(
  .badge-order-panel,
  .employment-panel,
  .professional-time-admin,
  .professional-hr-admin
) > summary > span {
  min-width: 0;
}

.portal-active #professional-team .hr-admin-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
  gap: 10px !important;
  padding: 10px 0 !important;
}

.portal-active #professional-team .staff-subpanel {
  padding: 0 !important;
  overflow: hidden;
}

.portal-active #professional-team .staff-subpanel summary {
  padding: 10px 11px !important;
  color: #fff !important;
  font-weight: 900 !important;
  cursor: pointer;
}

.portal-active #professional-team .compact-table {
  display: grid !important;
  gap: 7px !important;
  padding: 9px !important;
}

.portal-active #professional-team .compact-table button {
  display: grid !important;
  gap: 2px;
  width: 100%;
  min-height: 54px;
  padding: 8px 9px !important;
  border: 1px solid rgba(184, 207, 230, 0.12) !important;
  border-radius: 7px !important;
  background: rgba(2, 13, 25, 0.36) !important;
  color: var(--pf24-text) !important;
  text-align: left !important;
}

.portal-active #professional-team .compact-table button strong {
  color: #fff !important;
  font-size: 13px !important;
}

.portal-active #professional-team .compact-table button span,
.portal-active #professional-team .compact-table button small {
  color: rgba(247, 239, 229, 0.68) !important;
  font-size: 11px !important;
}

.portal-active #professional-team .professional-time-entry-form,
.portal-active #professional-team .professional-hr-record-form {
  display: grid !important;
  gap: 9px !important;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgba(184, 207, 230, 0.13);
  border-radius: 8px;
  background: rgba(2, 13, 25, 0.32);
}

@media (max-width: 1180px) {
  .portal-active .request-core-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .portal-active .request-core-grid,
  .portal-active .service-search-picker,
  .portal-active .request-photo-uploader {
    grid-template-columns: 1fr;
  }
}

body.workscreen-mode .topbar,
body.workscreen-mode .admin-tabs,
body.workscreen-mode .portal-section-nav,
body.workscreen-mode .professional-section-nav {
  display: none !important;
}

body.workscreen-mode .admin-shell,
body.workscreen-mode.portal-active .admin-shell {
  padding: 18px !important;
  min-height: 100vh;
}

body.workscreen-mode #dashboard,
body.workscreen-mode.portal-active .dashboard {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

body.workscreen-mode #dashboard > *,
body.workscreen-mode.portal-active .dashboard > * {
  max-width: none !important;
}

body.workscreen-mode .tab-panel:not(.hidden),
body.workscreen-mode .professional-section.portal-view-active,
body.workscreen-mode .customer-section.portal-view-active,
body.workscreen-mode .customer-request-card.portal-view-active {
  display: grid !important;
  width: 100% !important;
}

body.workscreen-mode .metrics {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}

/* Professionele werkkaart-laag: rustiger portalen zonder witte vlakken of mega-blokken. */
:root {
  --pf24-panel: rgba(10, 31, 52, 0.96);
  --pf24-panel-2: rgba(15, 39, 64, 0.96);
  --pf24-line: rgba(184, 207, 230, 0.16);
  --pf24-line-strong: rgba(255, 130, 0, 0.34);
  --pf24-text: #f7efe5;
  --pf24-muted: rgba(247, 239, 229, 0.72);
  --pf24-orange: #ff8200;
}

.admin-body:has(#dashboard:not(.hidden)),
.portal-active {
  background:
    radial-gradient(circle at 82% 8%, rgba(255, 130, 0, 0.08), transparent 30rem),
    linear-gradient(135deg, #06111f 0%, #08223a 52%, #061728 100%) !important;
  color: var(--pf24-text) !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard,
.portal-active .dashboard {
  gap: 14px !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(
  .panel,
  .settings-card,
  .summary-card,
  .request-card,
  .customer-request-card,
  .professional-section,
  .customer-section,
  .professional-next-action,
  .professional-cockpit article,
  .customer-cockpit article,
  .staff-card,
  .staff-subpanel,
  .staff-chat-room,
  .staff-chat-list,
  .finance-block,
  .finance-table-block,
  .finance-priority,
  .finance-priority-card,
  .finance-chart-block,
  .launch-scenario-card,
  .acceptance-item,
  .branch-card,
  .value-editor-panel,
  .bookkeeping-checklist article,
  .integration-row,
  .data-sharing-card,
  .admin-intake-card
),
.portal-active :where(
  .panel,
  .settings-card,
  .summary-card,
  .request-card,
  .customer-request-card,
  .professional-section,
  .customer-section,
  .professional-next-action,
  .professional-cockpit article,
  .customer-cockpit article,
  .readiness-step,
  .staff-card,
  .finance-block,
  .finance-table-block,
  .wallet-card,
  .workorder-card,
  .mileage-card,
  .property-card,
  .tenant-card,
  .module-card,
  .inventory-card
) {
  border: 1px solid var(--pf24-line) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, var(--pf24-panel-2), var(--pf24-panel)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
  color: var(--pf24-text) !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(
  input,
  select,
  textarea,
  .search-input,
  .form-control
),
.portal-active :where(
  input,
  select,
  textarea,
  .search-input,
  .form-control
) {
  min-height: 38px !important;
  border: 1px solid rgba(184, 207, 230, 0.22) !important;
  border-radius: 7px !important;
  background: rgba(2, 13, 25, 0.72) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(input, select, textarea)::placeholder,
.portal-active :where(input, select, textarea)::placeholder {
  color: rgba(247, 239, 229, 0.48) !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(input, select, textarea):focus,
.portal-active :where(input, select, textarea):focus {
  border-color: var(--pf24-orange) !important;
  outline: 2px solid rgba(255, 130, 0, 0.18) !important;
  outline-offset: 1px !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(label, legend, .field-label),
.portal-active :where(label, legend, .field-label) {
  color: rgba(247, 239, 229, 0.84) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(p, small, em, span),
.portal-active :where(p, small, em, span) {
  hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.panel-head, .settings-card-head, .finance-head, .card-head),
.portal-active :where(.panel-head, .settings-card-head, .finance-head, .card-head) {
  gap: 8px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(184, 207, 230, 0.14) !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(h1, h2, h3, h4),
.portal-active :where(h1, h2, h3, h4) {
  color: #fff !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.panel-head p, .settings-card-head p, .finance-head p, .empty),
.portal-active :where(.panel-head p, .settings-card-head p, .finance-head p, .empty) {
  color: var(--pf24-muted) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.button, button),
.portal-active :where(.button, button) {
  border-radius: 7px !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.button.primary, button.primary, .primary-action),
.portal-active :where(.button.primary, button.primary, .primary-action) {
  border-color: rgba(255, 130, 0, 0.82) !important;
  background: linear-gradient(180deg, #ff9b24, #ff8200) !important;
  color: #06111f !important;
  font-weight: 950 !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.button.secondary, button.secondary),
.portal-active :where(.button.secondary, button.secondary) {
  border-color: rgba(184, 207, 230, 0.22) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #fff !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.metric-card, .summary-card, .finance-stat),
.portal-active :where(.summary-card, .professional-cockpit article, .customer-cockpit article) {
  min-height: 74px !important;
  padding: 12px 14px !important;
  align-content: center !important;
}

.admin-body:has(#dashboard:not(.hidden)) .metric-card span,
.portal-active :where(.summary-card strong, .professional-cockpit article strong, .customer-cockpit article strong) {
  color: #ffad4d !important;
  font-size: clamp(20px, 2vw, 30px) !important;
  line-height: 1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .metric-card strong,
.portal-active :where(.summary-card span, .professional-cockpit article span, .customer-cockpit article span) {
  color: rgba(247, 239, 229, 0.86) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.finance-row, .finance-line, .staff-table-row, .acceptance-row, .notification-row),
.portal-active :where(.finance-row, .finance-line, .staff-table-row, .request-row, .workorder-row, .wallet-row) {
  border-color: rgba(184, 207, 230, 0.13) !important;
  background: rgba(3, 18, 33, 0.42) !important;
  color: var(--pf24-text) !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.finance-row:hover, .staff-table-row:hover, .request-card:hover),
.portal-active :where(.request-card:hover, .customer-request-card:hover, .workorder-card:hover) {
  border-color: rgba(255, 130, 0, 0.34) !important;
  background: rgba(255, 130, 0, 0.075) !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.status-pill, .badge, .pill),
.portal-active :where(.status-pill, .badge, .pill) {
  border: 1px solid rgba(255, 130, 0, 0.28) !important;
  background: rgba(255, 130, 0, 0.12) !important;
  color: #ffd2a1 !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.overview-grid, .finance-columns, .finance-summary-strip, .finance-priority-grid),
.portal-active :where(.portal-card-grid, .professional-cockpit, .customer-cockpit, .request-grid, .wallet-grid) {
  gap: 12px !important;
}

@media (min-width: 1180px) {
  .admin-body:has(#dashboard:not(.hidden)) #overviewPanel.overview-grid {
    grid-template-columns: minmax(420px, 0.9fr) minmax(520px, 1.1fr) !important;
  }

  .portal-active .professional-section.portal-view-active,
  .portal-active .customer-section.portal-view-active {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    align-items: start !important;
  }

  .portal-active .professional-section.portal-view-active > *,
  .portal-active .customer-section.portal-view-active > * {
    grid-column: span 6 !important;
  }

  .portal-active .professional-section.portal-view-active > :where(.wide, .full-width, .portal-full, .panel-head, form),
  .portal-active .customer-section.portal-view-active > :where(.wide, .full-width, .portal-full, .panel-head, form) {
    grid-column: 1 / -1 !important;
  }

  .portal-active .professional-section.transport-regie-panel.portal-view-active > :where(.transport-workspace-tabs, .transport-workspace-panel) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 980px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard,
  .portal-active .dashboard {
    padding-inline: 12px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) :where(.metric-card, .summary-card, .finance-stat),
  .portal-active :where(.summary-card, .professional-cockpit article, .customer-cockpit article) {
    min-height: 62px !important;
  }
}

/* Definitieve portal-zijbalk: ingelogde klant/professional werkt vanuit een echte app-layout. */
.portal-sidebar-brand {
  display: none;
}

@media (min-width: 720px) {
  .portal-active .topbar {
    display: none !important;
  }

  .portal-active .admin-shell {
    min-height: 100vh !important;
    display: block !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    padding: 0 !important;
  }

  .portal-active .portal-shell {
    display: none !important;
  }

  .portal-active #portalDashboard.dashboard {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 16px clamp(14px, 2vw, 28px) 28px 260px !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .portal-active #portalDashboard > :not(.portal-section-nav):not(.professional-section-nav) {
    width: 100% !important;
    max-width: 1560px !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }

  .portal-active #portalDashboard > .portal-section-nav,
  .portal-active #portalDashboard > .professional-section-nav {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 30 !important;
    width: 244px !important;
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 9px !important;
    padding: 14px 12px !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 0 !important;
    background: rgba(5, 15, 27, 0.98) !important;
    box-shadow: none !important;
    overflow-y: auto !important;
  }

  .portal-active #portalDashboard > .portal-section-nav::before,
  .portal-active #portalDashboard > .professional-section-nav::before {
    content: none !important;
  }

  .portal-sidebar-brand {
    display: grid !important;
    gap: 9px;
    margin: 0 0 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .portal-sidebar-brand img {
    width: 100%;
    height: 74px;
    object-fit: contain;
    padding: 10px;
    border-radius: 7px;
    background: #fff;
  }

  .portal-sidebar-brand span {
    display: block;
    color: rgba(247, 239, 229, 0.72) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
  }

  .professional-sidebar-brand {
    padding: 11px !important;
    border: 1px solid rgba(255, 130, 0, 0.18) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.94) !important;
  }

  .professional-sidebar-brand img {
    height: 58px;
    padding: 6px;
    background: transparent;
  }

  .professional-sidebar-brand span {
    color: #061a33 !important;
    text-align: center;
  }

  .professional-brand-fallback {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto;
    border-radius: 12px;
    background: #061a33;
    color: #ff8200;
    font-size: 26px;
    font-weight: 950;
  }

  .portal-active .portal-nav-links {
    width: 100% !important;
    display: grid !important;
    flex: 0 0 auto !important;
    gap: 7px !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .portal-active .portal-section-nav a,
  .portal-active .professional-section-nav a {
    width: 100% !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: rgba(247, 239, 229, 0.84) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
  }

  .portal-active .portal-section-nav a.active,
  .portal-active .professional-section-nav a.active {
    border-color: rgba(255, 130, 0, 0.52) !important;
    background: rgba(255, 130, 0, 0.16) !important;
    color: #fff !important;
  }

  .portal-active .portal-nav-count {
    flex: 0 0 auto !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.13) !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .portal-active a.active .portal-nav-count {
    background: var(--pf24-orange) !important;
    color: #06111f !important;
  }

  .portal-active .portal-workscreen-actions {
    flex: 0 0 auto;
    margin-top: auto !important;
    padding-top: 10px !important;
  }

  .portal-active .sidebar-chat-compact,
  .portal-active .portal-sidebar-logout {
    flex: 0 0 auto;
  }

  .portal-active .portal-sidebar-logout {
    width: 100% !important;
    min-height: 38px !important;
    margin-top: 6px !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(255, 130, 0, 0.42) !important;
    border-radius: 7px !important;
    background: rgba(255, 130, 0, 0.13) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    text-align: left !important;
  }

  .portal-active .panel-head.customer-head {
    margin: 0 0 14px !important;
  }
}

@media (min-width: 720px) and (max-width: 1040px) {
  .portal-active #portalDashboard.dashboard {
    padding-left: 238px !important;
    padding-right: 14px !important;
  }

  .portal-active #portalDashboard > .portal-section-nav,
  .portal-active #portalDashboard > .professional-section-nav {
    width: 224px !important;
    padding: 12px 10px !important;
  }

  .portal-sidebar-brand img {
    height: 66px;
  }
}

/* Definitieve beheercentrum-layout: geen lege strook links, geen smalle dashboardkolom. */
@media (min-width: 720px) {
  .admin-body:has(#dashboard:not(.hidden)) .topbar {
    display: none !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-shell {
    min-height: 100vh !important;
    display: block !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    padding: 0 !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #dashboard {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 12px clamp(14px, 2vw, 28px) 28px 260px !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #dashboard > :not(.admin-tabs):not(.system-switch):not(#adminToast):not(#incidentBanner) {
    width: 100% !important;
    max-width: 1560px !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1200 !important;
    width: 244px !important;
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 104px 12px 12px !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 0 !important;
    background: rgba(5, 15, 27, 0.98) !important;
    box-shadow: none !important;
    overflow-y: auto !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 12px;
    right: 12px;
    height: 74px;
    border-radius: 7px;
    background: #fff url("assets/profix24-header.png") center / calc(100% - 24px) auto no-repeat;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs button:not(.portal-sidebar-logout),
  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch a,
  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .sidebar-chat-compact,
  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs select {
    width: 100% !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: rgba(247, 239, 229, 0.86) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-align: left !important;
    box-shadow: none !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs button.active:not(.portal-sidebar-logout),
  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch a.active {
    border-color: rgba(255, 130, 0, 0.52) !important;
    background: rgba(255, 130, 0, 0.16) !important;
    color: #fff !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-more-tabs,
  .admin-body:has(#dashboard:not(.hidden)) .system-switch {
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs :where(label, .admin-more-tabs > span, .system-switch label) {
    color: rgba(247, 239, 229, 0.58) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    text-transform: uppercase;
  }

  .admin-body:has(#dashboard:not(.hidden)) #adminSidebarChats,
  .admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom {
    margin-top: auto !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .portal-sidebar-logout {
    width: 100% !important;
    min-height: 38px !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(255, 130, 0, 0.42) !important;
    border-radius: 7px !important;
    background: rgba(255, 130, 0, 0.13) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    text-align: left !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #overviewPanel,
  .admin-body:has(#dashboard:not(.hidden)) #overviewPanel > *,
  .admin-body:has(#dashboard:not(.hidden)) .admin-cockpit,
  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-cockpit {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .cockpit-kpis,
  .admin-body:has(#dashboard:not(.hidden)) .servicecenter-kpis {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
    overflow: visible !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) :where(.cockpit-kpis .summary-card, .servicecenter-kpi, .metric-card) {
    min-width: 0 !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) :where(.cockpit-kpis .summary-card strong, .cockpit-kpis .summary-card span, .servicecenter-kpi strong, .servicecenter-kpi span, .metric-card strong, .metric-card span) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (min-width: 720px) and (max-width: 1320px) {
  .admin-body:has(#dashboard:not(.hidden)) #overviewPanel.overview-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #overviewPanel .cockpit-kpis,
  .admin-body:has(#dashboard:not(.hidden)) #overviewPanel .servicecenter-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Communicatie moet leesbaar blijven in de laptop/app-breedte. */
.admin-body:has(#dashboard:not(.hidden)) #communicationsPanel,
.admin-body:has(#dashboard:not(.hidden)) #communicationsPanel * {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .communication-workspace,
.admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .communication-head,
.admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .staff-chat-workspace,
.admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .staff-chat-room,
.admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .communication-kpis,
.admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-table,
.admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-summary-line,
.admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-row {
  width: 100% !important;
  max-width: 100% !important;
}

.admin-body:has(#dashboard:not(.hidden)) #communicationsPanel :where(.communication-head p, .staff-chat-channel small, .staff-chat-room p, .outbox-row small, .outbox-message strong, .outbox-message small) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .chat-head-actions,
.admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

.admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-actions .button,
.admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .chat-head-actions .button {
  min-height: 32px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  white-space: normal !important;
}

@media (min-width: 720px) and (max-width: 1320px) {
  .admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .staff-chat-workspace {
    grid-template-columns: minmax(210px, 0.42fr) minmax(0, 1fr) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .communication-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-row {
    grid-template-columns: minmax(120px, 0.9fr) minmax(180px, 1.35fr) minmax(150px, 1fr) minmax(90px, 0.65fr) minmax(130px, 0.9fr) !important;
    gap: 8px !important;
  }
}

@media (max-width: 980px) {
  .admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .staff-chat-workspace,
  .admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-head-row {
    display: none !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .chat-head-actions,
  .admin-body:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-actions {
    justify-content: flex-start !important;
  }
}

@media (min-width: 720px) and (max-width: 1040px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard {
    padding-left: 238px !important;
    padding-right: 14px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
    width: 224px !important;
    padding-inline: 10px !important;
  }
}

/* Eindlaag leesbaarheid: tekst mag niet meer afkappen of witte stroken trekken. */
.admin-body:has(#dashboard:not(.hidden)) :where(
  .ticket-detail-layout,
  .ticket-main,
  .ticket-regie-strip,
  .ticket-regie-strip article,
  .callback-context,
  .servicecenter-guide,
  .action-tile,
  .integration-status-grid,
  .assistant-permissions,
  .assistant-permissions label,
  .security-event-row,
  .staff-id-card,
  .staff-id-main,
  .staff-id-meta,
  .staff-card-form,
  .staff-card-form label,
  .finance-grid,
  .finance-card,
  .wallet-card,
  .module-card
),
.portal-active :where(
  .request-core-card,
  .request-core-head,
  .request-core-grid,
  .request-core-grid > *,
  .service-search-picker,
  .service-search-results,
  .address-book-row,
  .property-manager-workspace,
  .property-card,
  .property-card *,
  .property-room-card,
  .tenant-card,
  .inline-check,
  .professional-card,
  .professional-card *,
  .planning-card,
  .planning-card *
) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(
  .ticket-regie-strip,
  .callback-context,
  .servicecenter-guide,
  .integration-status-grid
) {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(
  .assistant-permissions,
  .integration-status-grid
) {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-card-form {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
  align-items: start !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-card-form .staff-subpanel {
  width: 100% !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-card-form > .staff-personal-panel,
.admin-body:has(#dashboard:not(.hidden)) .staff-card-form > .staff-subpanel:nth-of-type(2) {
  grid-column: 1 / -1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-personal-panel .staff-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

@media (max-width: 760px) {
  .admin-body:has(#dashboard:not(.hidden)) .staff-card-form {
    grid-template-columns: 1fr !important;
  }
}

.admin-body:has(#dashboard:not(.hidden)) :where(
  .servicecenter-guide strong,
  .servicecenter-guide span,
  .action-tile strong,
  .action-tile span,
  .ticket-regie-strip strong,
  .ticket-regie-strip span,
  .ticket-regie-strip small,
  .integration-status-grid strong,
  .integration-status-grid span,
  .assistant-permissions span,
  .assistant-permissions small,
  .security-event-row span,
  .security-event-row small,
  .staff-id-card small,
  .staff-id-card span,
  .staff-id-card b
),
.portal-active :where(
  .request-core-head span,
  .request-core-head strong,
  .service-search-selected,
  .service-search-results button,
  .address-book-row span,
  .address-book-row small,
  .property-card b,
  .property-card span,
  .property-card small,
  .property-room-card b,
  .property-room-card span,
  .tenant-card b,
  .tenant-card span,
  .tenant-card small,
  .inline-check,
  .professional-card b,
  .professional-card span,
  .planning-card b,
  .planning-card span
) {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: none !important;
}

.portal-active :where(.property-room-card, .property-room-card span) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.portal-active .property-room-card b {
  display: block !important;
  min-width: 72px !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(small, .mini-empty, .muted, .empty) {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.action-tile, .servicecenter-guide article, .ticket-regie-strip article) {
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.action-tile strong, .ticket-regie-strip strong) {
  line-height: 1.1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(
  .servicecenter-guide strong,
  .servicecenter-guide span,
  .action-tile strong,
  .action-tile span,
  .ticket-regie-strip strong,
  .ticket-regie-strip span
) {
  display: block !important;
  width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-more-tabs {
  max-width: 100% !important;
}

.admin-body:has(#dashboard:not(.hidden)) .action-grid {
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-guide {
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)) !important;
  align-items: start !important;
}

.admin-body:has(#dashboard:not(.hidden)) .servicecenter-guide strong,
.admin-body:has(#dashboard:not(.hidden)) .servicecenter-guide span,
.admin-body:has(#dashboard:not(.hidden)) .action-tile strong,
.admin-body:has(#dashboard:not(.hidden)) .action-tile span {
  width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(input, select, textarea),
.portal-active :where(input, select, textarea) {
  min-width: 0 !important;
  max-width: 100% !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(input[type="checkbox"], input[type="radio"]),
.portal-active :where(input[type="checkbox"], input[type="radio"]) {
  width: auto !important;
  min-width: 14px !important;
  max-width: 18px !important;
  flex: 0 0 auto !important;
}

@media (min-width: 720px) and (max-width: 1320px) {
  .admin-body:has(#dashboard:not(.hidden)) :where(.ticket-detail-layout, .request-detail-grid, .finance-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) :where(.ticket-regie-strip, .servicecenter-guide, .integration-status-grid) {
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)) !important;
  }
}

.signup-look .topbar {
  overflow: hidden !important;
}

.signup-look .brand {
  min-width: 0 !important;
  max-width: 100% !important;
}

.signup-look .brand .admin-title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Publieke aanmeldformulieren: vriendelijker, lichter en duidelijk per doelgroep. */
.public-site.signup-look {
  background:
    linear-gradient(105deg, rgba(5, 20, 38, 0.88), rgba(5, 20, 38, 0.52)),
    url("assets/profix24-regiecentrum-hero.webp") 74% center/cover fixed no-repeat,
    #061a33 !important;
}

.public-site.signup-look .admin-shell {
  background:
    linear-gradient(180deg, rgba(246, 249, 252, 0.08), rgba(6, 26, 51, 0.18)) !important;
}

.public-site.signup-look .portal-shell {
  width: min(1080px, 100%) !important;
}

.public-site.signup-look .login-panel {
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 252, 0.94)) !important;
  color: #061a33 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22) !important;
}

.public-site.signup-look .login-panel h1,
.public-site.signup-look .login-panel h2,
.public-site.signup-look .login-panel strong,
.public-site.signup-look .login-panel label,
.public-site.signup-look .login-panel label span {
  color: #061a33 !important;
}

.public-site.signup-look .form-message,
.public-site.signup-look .login-panel p,
.public-site.signup-look .login-panel small,
.public-site.signup-look .login-panel span {
  color: #46586b !important;
}

.public-site.signup-look .signup-context-pill {
  width: fit-content;
  margin: 0 0 10px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 130, 0, 0.34);
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.10);
  color: #9b5100 !important;
}

.public-site.signup-look form {
  gap: 12px !important;
}

.public-site.signup-look input,
.public-site.signup-look select,
.public-site.signup-look textarea {
  min-height: 42px;
  border: 1px solid rgba(6, 26, 51, 0.16) !important;
  background: rgb(251, 252, 253) !important;
  color: #061a33 !important;
  box-shadow: inset 0 1px 0 rgba(6, 26, 51, 0.03) !important;
}

.public-site.signup-look input::placeholder,
.public-site.signup-look textarea::placeholder {
  color: #8291a1 !important;
}

.public-site.signup-look select option {
  background: rgb(251, 252, 253) !important;
  color: #061a33 !important;
}

.public-site.signup-look .pro-value,
.public-site.signup-look .test-login-panel {
  border: 1px solid rgba(6, 26, 51, 0.12) !important;
  background: #f7fafc !important;
  color: #061a33 !important;
}

.public-site.signup-look .button.primary {
  border: 1px solid rgba(185, 88, 0, 0.72) !important;
  background: linear-gradient(135deg, #ff8200, #ffad4d) !important;
  color: #061a33 !important;
  box-shadow: 0 14px 30px rgba(255, 130, 0, 0.20) !important;
}

.public-site.signup-look .button.secondary,
.public-site.signup-look .quiet-link {
  border-color: rgba(6, 26, 51, 0.14) !important;
  background: rgb(251, 252, 253) !important;
  color: #061a33 !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.admin-more-tabs, .admin-nav-block, .admin-tabs) {
  overflow-x: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs,
.admin-body:has(#dashboard:not(.hidden)) .admin-nav-secondary,
.admin-body:has(#dashboard:not(.hidden)) .admin-more-tabs {
  overflow: visible !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary {
  overflow: hidden auto !important;
}

.staff-time-admin-panel {
  margin: 10px 0 14px !important;
}

.staff-time-admin-grid {
  display: grid;
  grid-template-columns: minmax(240px, .85fr) minmax(360px, 1.15fr);
  gap: 10px;
}

.staff-time-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(7, 24, 42, .72);
  color: #f7efe5;
}

.staff-time-card h3 {
  margin: 0;
  color: #fff;
  font-size: 14px;
}

.staff-time-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.staff-time-summary article {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 7px;
  background: rgba(255, 255, 255, .045);
}

.staff-time-summary article strong,
.staff-time-summary article span {
  display: block;
  min-width: 0;
}

.staff-time-summary article strong {
  color: #fff;
  font-size: 15px;
}

.staff-time-summary article span {
  color: rgba(247, 239, 229, .66);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.staff-time-user-list,
.staff-session-list.compact {
  display: grid;
  gap: 6px;
  max-height: 235px;
  overflow: hidden auto;
  padding-right: 2px;
}

.staff-time-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 7px;
  background: rgba(255, 255, 255, .045);
  color: #f7efe5;
  text-align: left;
}

.staff-time-user.active {
  border-color: rgba(255, 130, 0, .62);
  background: rgba(255, 130, 0, .14);
}

.staff-time-user span {
  min-width: 0;
}

.staff-time-user strong,
.staff-time-user small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-time-user small {
  color: rgba(247, 239, 229, .66);
  font-size: 11px;
}

.staff-time-user b {
  color: #ffb15a;
  white-space: nowrap;
}

.staff-time-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.staff-payroll-warnings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

.staff-payroll-warnings span {
  border: 1px solid rgba(255, 143, 23, 0.45);
  background: rgba(255, 143, 23, 0.12);
  color: #ffd8a6;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 0.82rem;
  font-weight: 800;
}

.staff-time-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.staff-time-form-grid .wide {
  grid-column: span 3;
}

.staff-time-form :where(input, select) {
  min-width: 0;
}

.staff-time-entry-row {
  grid-template-columns: minmax(170px, 1fr) minmax(240px, 1.35fr) auto;
  align-items: center;
}

.staff-time-entry-row.is-excluded {
  border-style: dashed;
  opacity: .78;
}

.staff-time-entry-row.is-deleted {
  opacity: .58;
}

.staff-time-entry-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.staff-time-modal {
  width: min(760px, calc(100vw - 28px)) !important;
}

.staff-time-modal form {
  display: grid;
  gap: 12px;
}

.staff-time-modal .staff-time-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.staff-time-modal .inline-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.staff-time-modal .inline-check input {
  width: 18px;
  min-height: 18px;
  margin: 0;
}

.staff-time-modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

html[data-theme="light"] .staff-time-modal {
  background: #f7f5f0 !important;
  color: #102235 !important;
}

html[data-theme="light"] .staff-time-modal :where(label, h2, strong) {
  color: #102235 !important;
}

html[data-theme="light"] .admin-body .staff-time-modal .market-competitor-modal-head h2,
html[data-theme="light"] .admin-body .staff-time-modal .market-competitor-modal-head .eyebrow,
html[data-theme="light"] .admin-body .staff-time-modal label {
  color: #102235 !important;
}

html[data-theme="light"] .admin-body .staff-time-modal input::placeholder {
  color: #667485 !important;
  opacity: 1;
}

html[data-theme="light"] .staff-time-card {
  border-color: #d9e0e7;
  background: #f7f5f0;
  color: #102235;
}

html[data-theme="light"] .staff-time-card :where(h3, label, strong) {
  color: #102235;
}

html[data-theme="light"] .staff-time-card .form-message,
html[data-theme="light"] .staff-time-user small,
html[data-theme="light"] .staff-time-summary article span {
  color: #5b6978;
}

html[data-theme="light"] .staff-time-user,
html[data-theme="light"] .staff-time-summary article {
  border-color: #d9e0e7;
  background: #fff;
  color: #102235;
}

html[data-theme="light"] .staff-time-user.active {
  border-color: rgba(224, 102, 0, .55);
  background: #fff3e3;
}

html[data-theme="light"] .staff-time-user b {
  color: #a84900;
}

html[data-theme="light"] .staff-time-summary article strong {
  color: #102235;
}

@media (max-width: 1050px) {
  .staff-time-admin-grid {
    grid-template-columns: 1fr;
  }

  .staff-time-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-time-form-grid .wide {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .staff-time-entry-row {
    grid-template-columns: 1fr auto;
  }

  .staff-time-entry-row > div:nth-child(2) {
    grid-column: 1 / -1;
  }

  .staff-time-modal .staff-time-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Laat menu's scrollen zonder zichtbare scrollbar in browser en laptop-app. */
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs,
.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary,
.portal-active #portalDashboard > .portal-section-nav,
.portal-active #portalDashboard > .professional-section-nav,
.portal-active .portal-nav-links {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs::-webkit-scrollbar,
.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary::-webkit-scrollbar,
.portal-active #portalDashboard > .portal-section-nav::-webkit-scrollbar,
.portal-active #portalDashboard > .professional-section-nav::-webkit-scrollbar,
.portal-active .portal-nav-links::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Portalmenu: het logo blijft zichtbaar, alleen de menulijst scrolt. */
@media (min-width: 720px) {
  .portal-active #portalDashboard > .portal-section-nav,
  .portal-active #portalDashboard > .professional-section-nav {
    overflow: hidden !important;
  }

  .portal-active #portalDashboard > .portal-section-nav .portal-sidebar-brand,
  .portal-active #portalDashboard > .professional-section-nav .portal-sidebar-brand {
    flex: 0 0 auto !important;
    position: relative;
    z-index: 2;
  }

  .portal-active #portalDashboard > .portal-section-nav .portal-nav-links,
  .portal-active #portalDashboard > .professional-section-nav .portal-nav-links {
    flex: 1 1 auto !important;
    min-height: 120px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 2px !important;
  }
}

/* Personeel & uren: dossierachtig, standaard rustig ingeklapt. */
.admin-body:has(#dashboard:not(.hidden)) #staffPanel {
  max-width: 1560px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-console {
  gap: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-kpi-strip {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
  gap: 7px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-workspace {
  display: grid !important;
  grid-template-columns: minmax(255px, 0.34fr) minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-list,
.admin-body:has(#dashboard:not(.hidden)) .staff-dossier {
  min-width: 0 !important;
  max-width: 100% !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-table-head,
.admin-body:has(#dashboard:not(.hidden)) .staff-table-row {
  grid-template-columns: minmax(120px, 1.3fr) minmax(88px, .75fr) minmax(68px, .45fr) minmax(46px, .32fr) !important;
  gap: 7px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-table-row {
  min-height: 50px !important;
  padding: 8px 9px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-id-card {
  grid-template-columns: minmax(210px, 1fr) minmax(120px, .46fr) minmax(130px, .5fr) minmax(108px, auto) 68px !important;
  gap: 8px !important;
  padding: 9px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-id-main h3 {
  font-size: 18px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-id-actions {
  min-width: 108px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-id-avatar {
  width: 68px !important;
  height: 78px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-onboarding-strip {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
  gap: 6px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-onboarding-strip .button {
  min-height: 32px !important;
  padding: 6px 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-card-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-subpanel {
  min-width: 0 !important;
  overflow: hidden !important;
  border-color: rgba(184, 207, 230, 0.14) !important;
  background: rgba(5, 20, 36, 0.74) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-subpanel > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 36px !important;
  padding: 8px 10px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  list-style-position: inside !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-subpanel > summary small,
.admin-body:has(#dashboard:not(.hidden)) .staff-subpanel > summary span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(247, 239, 229, 0.68) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-subpanel[open] > summary {
  border-bottom: 1px solid rgba(255, 130, 0, 0.22) !important;
  background: rgba(255, 130, 0, 0.075) !important;
  color: #ffb15c !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-form-grid,
.admin-body:has(#dashboard:not(.hidden)) .staff-personal-panel .staff-form-grid,
.admin-body:has(#dashboard:not(.hidden)) .staff-access-grid,
.admin-body:has(#dashboard:not(.hidden)) .staff-shortcut-grid {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-split {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 9px !important;
  padding: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-card-form fieldset {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid rgba(184, 207, 230, 0.14) !important;
  border-radius: 8px !important;
  background: rgba(2, 13, 25, 0.32) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-card-form legend {
  padding-inline: 6px !important;
  color: #ffb15c !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-card-form label,
.admin-body:has(#dashboard:not(.hidden)) .staff-card-form .checkbox-line {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-card-form input,
.admin-body:has(#dashboard:not(.hidden)) .staff-card-form select,
.admin-body:has(#dashboard:not(.hidden)) .staff-card-form textarea {
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 34px !important;
  font-size: 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-photo-field,
.admin-body:has(#dashboard:not(.hidden)) .staff-photo-hint,
.admin-body:has(#dashboard:not(.hidden)) .staff-card-form > label,
.admin-body:has(#dashboard:not(.hidden)) .staff-card-form > .form-message,
.admin-body:has(#dashboard:not(.hidden)) .staff-card-form .staff-subpanel > label,
.admin-body:has(#dashboard:not(.hidden)) .staff-badge-panel .form-message,
.admin-body:has(#dashboard:not(.hidden)) .staff-training-panel .form-message,
.admin-body:has(#dashboard:not(.hidden)) .staff-shortcuts-panel .form-message {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-document-list,
.admin-body:has(#dashboard:not(.hidden)) .staff-access-switches,
.admin-body:has(#dashboard:not(.hidden)) .staff-activity-list,
.admin-body:has(#dashboard:not(.hidden)) .staff-session-list {
  padding: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-document-row {
  grid-template-columns: minmax(120px, .8fr) minmax(140px, .7fr) minmax(160px, 1fr) !important;
  gap: 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-card-actions {
  position: sticky !important;
  bottom: 8px !important;
  z-index: 5 !important;
  padding: 8px 10px !important;
  border: 1px solid #d8e1eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #07182d !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-card-actions span {
  color: #526173 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-admin-foldout > .staff-time-admin-grid {
  padding: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-time-admin-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 9px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-time-card {
  min-width: 0 !important;
  padding: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-time-summary {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-time-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .staff-time-form-grid .wide {
  grid-column: 1 / -1 !important;
}

@media (max-width: 1180px) {
  .admin-body:has(#dashboard:not(.hidden)) .staff-workspace {
    grid-template-columns: 1fr !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .staff-id-card {
    grid-template-columns: minmax(0, 1fr) 68px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .staff-id-meta,
  .admin-body:has(#dashboard:not(.hidden)) .staff-id-actions {
    grid-column: 1 / -1 !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .staff-id-avatar {
    grid-row: 1 / span 2 !important;
    grid-column: 2 !important;
  }
}

/* Navigatie mag scrollen, maar zonder zichtbare scrollbalken. */
.admin-body:has(#dashboard:not(.hidden)) :where(.admin-tabs, .admin-nav-primary, .admin-nav-secondary, .admin-nav-screens, .admin-nav-communication),
.portal-active :where(#portalDashboard > .portal-section-nav, #portalDashboard > .professional-section-nav, .portal-nav-links) {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.admin-tabs, .admin-nav-primary, .admin-nav-secondary, .admin-nav-screens, .admin-nav-communication)::-webkit-scrollbar,
.portal-active :where(#portalDashboard > .portal-section-nav, #portalDashboard > .professional-section-nav, .portal-nav-links)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Admin leesbaarheid: vaste contrastregels voor menu, dropdowns en statuspagina. */
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
  background: linear-gradient(180deg, #071827 0%, #06111d 100%) !important;
  color: #f8fafc !important;
  border-right-color: rgba(148, 163, 184, 0.24) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-caption,
.admin-body:has(#dashboard:not(.hidden)) .admin-more-tabs {
  color: #cbd5e1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs button[hidden],
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs details[hidden] {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs button:not(.portal-sidebar-logout),
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .sidebar-chat-compact,
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs select,
.admin-body:has(#dashboard:not(.hidden)) .admin-more-tabs summary,
.admin-body:has(#dashboard:not(.hidden)) .screen-switcher summary {
  border-color: rgba(203, 213, 225, 0.18) !important;
  background: rgba(15, 23, 42, 0.74) !important;
  color: #f8fafc !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs button:not(.portal-sidebar-logout):hover,
.admin-body:has(#dashboard:not(.hidden)) .admin-more-tabs summary:hover,
.admin-body:has(#dashboard:not(.hidden)) .screen-switcher summary:hover {
  border-color: rgba(255, 130, 0, 0.42) !important;
  background: rgba(30, 41, 59, 0.92) !important;
  color: #ffffff !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs button.active:not(.portal-sidebar-logout),
.admin-body:has(#dashboard:not(.hidden)) .admin-more-flyout button.active {
  border-color: rgba(255, 130, 0, 0.78) !important;
  background: rgba(255, 130, 0, 0.18) !important;
  color: #ffd7a6 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs select option {
  background: #0f172a !important;
  color: #f8fafc !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.admin-more-flyout, .screen-switcher-grid, .nav-dropdown-panel) {
  border-color: rgba(203, 213, 225, 0.22) !important;
  background: #0f172a !important;
  color: #f8fafc !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.admin-more-flyout, .screen-switcher-grid, .nav-dropdown-panel) :where(button, a, span, strong, small) {
  color: #f8fafc !important;
}

.module-readable-section {
  display: grid;
  gap: 12px;
}

.module-readable-section > summary {
  cursor: pointer;
  list-style: none;
}

.module-readable-section > summary::-webkit-details-marker {
  display: none;
}

.module-readable-section > summary::after {
  content: "Open";
  align-self: start;
  padding: 6px 9px;
  border: 1px solid rgba(255, 130, 0, 0.26);
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.10);
  color: #ffd0a0;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.module-readable-section[open] > summary::after {
  content: "Sluit";
}

.module-catalog-panel {
  padding: 14px;
  border: 1px solid rgba(184, 207, 230, 0.15);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(11, 34, 56, 0.94), rgba(5, 19, 34, 0.94));
  color: #f7efe5;
}

.module-catalog-panel > summary {
  margin-bottom: 2px;
}

html[data-theme="light"] .module-status-head,
html[data-theme="light"] .module-standard-card,
html[data-theme="light"] .module-quality-guards,
html[data-theme="light"] .mobile-parity-panel,
html[data-theme="light"] .quality-suite-panel,
html[data-theme="light"] .module-status-actions,
html[data-theme="light"] .module-status-card,
html[data-theme="light"] .module-status-kpi article,
html[data-theme="light"] .launch-readiness-panel,
html[data-theme="light"] .demo-scenario-panel,
html[data-theme="light"] .integration-impact-panel,
html[data-theme="light"] .module-catalog-panel {
  border-color: rgba(15, 23, 42, 0.12) !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .module-status-shell :where(h2, h3, strong, b),
html[data-theme="light"] .module-status-card-head strong,
html[data-theme="light"] .module-status-money strong,
html[data-theme="light"] .module-status-meta strong {
  color: #0f172a !important;
}

html[data-theme="light"] .module-status-shell :where(p, span, small, li),
html[data-theme="light"] .module-status-head p,
html[data-theme="light"] .module-status-actions p,
html[data-theme="light"] .module-standard-card span,
html[data-theme="light"] .module-quality-guards p,
html[data-theme="light"] .quality-suite-panel :where(span, small),
html[data-theme="light"] .module-status-card p {
  color: #475569 !important;
}

html[data-theme="light"] .module-quality-guard {
  border-color: rgba(15, 23, 42, 0.10) !important;
  background: var(--surface-soft) !important;
}

html[data-theme="light"] .mobile-parity-card {
  border-color: rgba(15, 23, 42, 0.10) !important;
  background: var(--surface-soft) !important;
}

html[data-theme="light"] .mobile-parity-card.warning {
  border-color: rgba(234, 88, 12, 0.22) !important;
  background: #fff7ed !important;
}

html[data-theme="light"] .module-quality-icon {
  background: rgba(14, 116, 144, 0.10) !important;
  color: #0e7490 !important;
}

html[data-theme="light"] .quality-suite-command {
  background: #eff6ff !important;
  border-color: rgba(37, 99, 235, 0.16) !important;
}

html[data-theme="light"] .quality-suite-command code {
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .quality-suite-check {
  background: #f0fdf4 !important;
  border-color: rgba(22, 163, 74, 0.16) !important;
}

html[data-theme="light"] .quality-suite-panel.warning .quality-suite-command,
html[data-theme="light"] .quality-suite-check.warning {
  background: #fff7ed !important;
  border-color: rgba(234, 88, 12, 0.22) !important;
}

html[data-theme="light"] .quality-suite-check b {
  color: #0f172a !important;
}

html[data-theme="light"] .module-quality-guard small {
  color: #047857 !important;
}

html[data-theme="light"] .mobile-parity-card :where(strong, b) {
  color: #0f172a !important;
}

html[data-theme="light"] .mobile-parity-card :where(small, p) {
  color: #475569 !important;
}

html[data-theme="light"] .mobile-parity-card em {
  border-color: rgba(37, 99, 235, 0.16) !important;
  background: #eff6ff !important;
  color: #1e3a8a !important;
}

html[data-theme="light"] .production-start-card,
html[data-theme="light"] .production-start-table span {
  border-color: rgba(15, 23, 42, 0.10) !important;
  background: var(--surface-soft) !important;
}

html[data-theme="light"] .production-start-card :where(strong, b) {
  color: #0f172a !important;
}

html[data-theme="light"] .production-start-card :where(p, span, small, em) {
  color: #475569 !important;
}

html[data-theme="light"] .production-start-command code {
  background: rgba(15, 23, 42, 0.08) !important;
  color: #0e7490 !important;
}

html[data-theme="light"] .module-status-shell :where(.badge, .module-status-card-head b, .launch-readiness-card b, .demo-readiness-modules b) {
  border-color: rgba(255, 130, 0, 0.26) !important;
  background: rgba(255, 130, 0, 0.10) !important;
  color: #9a4d00 !important;
}

html[data-theme="light"] .module-status-shell :where(.launch-readiness-card, .demo-readiness-card, .integration-impact-card, .module-decision-advice, .module-status-money span, .module-status-meta span, .module-readiness-row span) {
  border-color: rgba(15, 23, 42, 0.10) !important;
  background: var(--surface-soft) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .module-status-next {
  background: rgba(255, 130, 0, 0.08) !important;
}

html[data-theme="light"] .module-status-next strong,
html[data-theme="light"] .launch-readiness-card a,
html[data-theme="light"] .integration-impact-card span b {
  color: #9a4d00 !important;
}

/* Aanvragen cockpit: compact, schermvullend en zonder pagina-scroll. */
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"].workspace {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: calc(100vh - 108px) !important;
  min-height: 0 !important;
  max-height: calc(100vh - 108px) !important;
  overflow: hidden !important;
  border-radius: 9px !important;
  background: rgba(7, 24, 42, 0.82) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  max-height: 228px !important;
  overflow: hidden !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(184, 207, 230, 0.16) !important;
  background: rgba(5, 18, 31, 0.72) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .panel-head {
  min-height: 0 !important;
  padding: 14px !important;
  gap: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .panel-head h2 {
  color: #f8fafc !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .panel-head select {
  max-width: 148px !important;
  min-height: 34px !important;
  font-size: 12px !important;
}

.request-queue-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 11px 12px;
  border-bottom: 0;
}

.request-account-filter-chip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--orange) 46%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--orange) 12%, var(--admin-card, var(--surface)));
  color: var(--admin-text, var(--text));
  text-align: left;
  cursor: pointer;
}

.request-account-filter-chip em {
  color: var(--admin-muted, var(--muted));
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.request-account-filter-chip strong {
  min-width: 0;
  overflow: hidden;
  color: var(--admin-text, var(--text)) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-account-filter-chip b,
.request-account-filter-chip i {
  color: var(--admin-text, var(--text));
  font-size: 12px;
  font-style: normal;
}

.request-queue-stats span,
.request-queue-stat {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(184, 207, 230, 0.13);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.055);
  color: #cbd5e1;
  text-align: left;
  cursor: pointer;
}

.request-queue-stat:hover,
.request-queue-stat.active {
  border-color: rgba(255, 130, 0, 0.48);
  background: rgba(255, 130, 0, 0.14);
}

.request-queue-stats strong,
.request-queue-stat strong {
  color: #ffb15a !important;
  font-size: 16px;
  line-height: 1;
}

.request-queue-stats small,
.request-queue-stat small {
  color: #cbd5e1 !important;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(250px, 310px) !important;
  grid-template-columns: none !important;
  align-content: stretch !important;
  gap: 10px !important;
  min-height: 0 !important;
  overflow: auto hidden !important;
  padding: 0 12px 14px !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list::-webkit-scrollbar {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item {
  gap: 8px !important;
  min-height: 0 !important;
  padding: 12px !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, 0.68) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-meta,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-target,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-tags {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top {
  justify-content: space-between !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top strong {
  min-width: 0 !important;
  color: #f8fafc !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top b {
  flex: 0 0 auto;
  max-width: 112px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.14);
  color: #ffd0a0;
  font-size: 10px;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-meta {
  justify-content: space-between !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-meta small {
  min-width: 0 !important;
  color: #cbd5e1 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-tags {
  flex-wrap: wrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-tags i {
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.13);
  color: #dbeafe;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .risk-line {
  max-width: 100% !important;
  padding: 4px 7px !important;
  font-size: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden auto !important;
  padding: 16px !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail::-webkit-scrollbar {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-detail-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main {
  display: grid !important;
  gap: 14px !important;
  min-width: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress {
  order: 20 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail-head {
  padding: 16px !important;
  border: 1px solid rgba(184, 207, 230, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.64);
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail-head h2 {
  margin: 0 !important;
  font-size: clamp(18px, 2vw, 23px) !important;
  line-height: 1.12 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(.info-grid, .update-form, .quote-lines-form) {
  gap: 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(.quote-box, .notes, .description, .execution-monitor, .dispatch-panel, .planning-chat-panel, .dispute-panel, .platform-contribution-panel, .payment-correction-panel, .ticket-timeline) {
  margin: 0 !important;
  padding: 14px !important;
  border-radius: 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress {
  position: static !important;
  top: auto !important;
  display: grid !important;
  gap: 8px !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 12px !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress::-webkit-scrollbar {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress-head {
  min-height: 32px !important;
  padding-bottom: 6px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-next-action {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px 10px !important;
  max-width: none !important;
  min-height: 42px !important;
  padding: 8px 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-next-action strong {
  font-size: 11px !important;
  text-transform: uppercase !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-next-action span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-next-action small {
  grid-column: 2 !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress ol {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress li {
  grid-template-columns: 22px minmax(0, 1fr) !important;
  min-height: 54px !important;
  padding: 7px !important;
  gap: 6px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress li strong {
  font-size: 11px !important;
  line-height: 1.12 !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress li small {
  font-size: 10px !important;
  line-height: 1.15 !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

@media (max-width: 1320px) {
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress ol {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1120px) {
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"].workspace {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
    max-height: 280px !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-detail-layout {
    grid-template-columns: 1fr !important;
  }
}

/* Aanvragen cockpit: opdracht boven proces zichtbaar houden. */
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"].workspace {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
  max-height: 196px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  padding: 14px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-detail-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main {
  align-self: stretch !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden auto !important;
  padding-right: 6px !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main::-webkit-scrollbar {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress {
  align-self: end !important;
  max-height: 188px !important;
  border-top: 1px solid rgba(184, 207, 230, 0.13) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress-head {
  min-height: 26px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress ol {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress li {
  min-height: 38px !important;
  padding: 5px 6px !important;
}

@media (max-width: 1320px) {
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress {
    max-height: 196px !important;
  }
}

/* Aanvragenlijst: brede compacte regels in plaats van scroll-kaarten. */
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
  grid-template-rows: auto auto auto !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .panel-head {
  padding: 6px 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stats {
  padding: 0 12px 4px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stats span {
  padding: 3px 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stat {
  padding: 3px 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stats strong {
  font-size: 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stats small {
  font-size: 9px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 2px !important;
  max-height: 112px !important;
  overflow: hidden auto !important;
  padding: 0 12px 8px !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list::-webkit-scrollbar {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item {
  display: grid !important;
  grid-template-columns: minmax(190px, 1fr) minmax(170px, 0.78fr) minmax(150px, 0.62fr) minmax(80px, 0.34fr) minmax(86px, auto) !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 20px !important;
  padding: 2px 8px !important;
  border-radius: 7px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-meta,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-target,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-tags {
  min-height: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top strong {
  font-size: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top b,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-tags i,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .risk-line {
  font-size: 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-target {
  display: grid !important;
  gap: 0 !important;
  justify-items: start !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-target small {
  color: #93a4b8 !important;
  font-size: 7px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-target strong {
  max-width: 100% !important;
  color: #f8fafc !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-meta small {
  font-size: 9px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-tags {
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-tags i {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .risk-line {
  justify-self: end !important;
  white-space: nowrap !important;
}

@media (max-width: 1180px) {
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item {
    grid-template-columns: minmax(170px, 1fr) minmax(150px, 0.8fr) minmax(120px, 0.72fr) minmax(68px, auto) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item .risk-line {
    display: none !important;
  }
}

/* Datakwaliteit: cockpit voor opschonen en controle. */
.admin-body:has(#dashboard:not(.hidden)) .quality-workspace {
  max-width: 1500px !important;
}

.data-quality-console {
  display: grid;
  gap: 10px;
}

.data-quality-hero,
.data-quality-panel,
.data-quality-score,
.data-quality-metric {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 36, 59, 0.96), rgba(7, 22, 39, 0.96));
  color: var(--admin-text);
  box-shadow: none;
}

.data-quality-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px;
}

.data-quality-hero h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1.05;
}

.data-quality-hero p {
  margin: 4px 0 0;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 800;
}

.data-quality-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.data-quality-score-strip {
  display: grid;
  grid-template-columns: minmax(160px, 1.15fr) repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.data-quality-score,
.data-quality-metric {
  display: grid;
  gap: 3px;
  min-height: 82px;
  padding: 10px;
}

.data-quality-score span,
.data-quality-metric span,
.data-quality-score small,
.data-quality-metric small {
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 900;
}

.data-quality-score strong,
.data-quality-metric strong {
  color: #fff;
  font-size: 24px;
  line-height: 1;
}

.data-quality-score.positive,
.data-quality-metric.positive {
  border-color: rgba(34, 197, 94, 0.28);
}

.data-quality-score.warning,
.data-quality-metric.warning {
  border-color: rgba(255, 130, 0, 0.34);
}

.data-quality-score.negative,
.data-quality-metric.negative {
  border-color: rgba(248, 113, 113, 0.32);
}

.data-quality-score.warning strong,
.data-quality-metric.warning strong,
.data-quality-score.positive strong,
.data-quality-metric.positive strong {
  color: var(--orange);
}

.data-quality-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.55fr);
  gap: 10px;
  align-items: start;
}

.data-quality-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  min-width: 0;
}

.data-quality-side {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.data-quality-issue-list,
.data-cleanup-plan,
.data-storage-list,
.data-quality-safeguards {
  display: grid;
  gap: 7px;
}

.data-quality-issue-list > button,
.data-cleanup-row,
.data-storage-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.2fr) auto minmax(150px, 0.7fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--admin-text);
  text-align: left;
}

.data-quality-issue-list.compact > button {
  min-height: 46px;
}

.data-quality-issue-list span,
.data-quality-issue-list small,
.data-quality-issue-list em,
.data-cleanup-row span,
.data-cleanup-row small,
.data-storage-row span,
.data-storage-row small {
  min-width: 0;
  color: var(--admin-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.data-quality-issue-list span,
.data-cleanup-row b,
.data-storage-row b {
  display: grid;
  gap: 2px;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

.data-quality-issue-list > button > small,
.data-quality-issue-list em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-quality-issue-list strong,
.data-cleanup-row strong,
.data-storage-row strong {
  color: var(--orange);
  font-size: 17px;
  font-weight: 950;
  white-space: nowrap;
}

.data-cleanup-row,
.data-storage-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.data-storage-row {
  position: relative;
  padding-bottom: 12px;
}

.data-storage-row i {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 5px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.data-storage-row i::before {
  content: "";
  display: block;
  width: var(--value, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--orange);
}

.data-quality-foldout {
  padding: 10px;
}

.data-quality-panel.data-quality-foldout {
  padding: 0;
}

.data-quality-foldout summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
  color: #fff;
  font-weight: 950;
}

.data-quality-foldout summary small {
  color: var(--admin-muted);
  font-weight: 850;
}

.data-quality-foldout[open] > .data-quality-issue-list,
.data-quality-foldout[open] > .data-quality-safeguards {
  padding: 0 10px 10px;
}

.data-quality-safeguards span {
  padding: 8px 9px;
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 7px;
  background: rgba(34, 197, 94, 0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 1150px) {
  .data-quality-score-strip,
  .data-quality-layout {
    grid-template-columns: 1fr;
  }

  .data-quality-issue-list > button {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .data-quality-issue-list > button > small,
  .data-quality-issue-list em {
    grid-column: 1 / -1;
  }
}

/* Public signup simplification override - 2026-07-22 */
.public-site .topbar .brand {
  min-height: 0;
}

.public-site .topbar .brand img[src*="profix24-logo"] {
  width: 178px;
  height: auto;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgb(255, 255, 255);
  object-fit: contain;
}

.public-site .homepage-nav {
  display: flex;
  width: 100%;
}

.public-site .homepage-login-link {
  border-color: rgba(255, 130, 0, 0.46);
  background: rgba(255, 130, 0, 0.18);
  color: #fff;
}

.public-site.signup-look .portal-shell {
  width: min(720px, calc(100% - 32px));
  grid-template-columns: 1fr;
  align-items: start;
}

.public-site.signup-look .login-panel {
  padding: 24px;
}

.public-site.signup-look form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.public-site.signup-look label {
  min-width: 0;
}

.public-site.signup-look label[hidden],
.public-site.signup-look [hidden] {
  display: none !important;
}

.public-site.signup-look input {
  min-height: 44px;
}

.public-site.signup-look .button.primary {
  min-height: 46px;
}

.business-lookup-results {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.business-lookup-result {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 130, 0, 0.36);
  border-radius: 6px;
  background: rgba(255, 130, 0, 0.12);
  color: #f7efe5;
  text-align: left;
  cursor: pointer;
}

.business-lookup-result span,
.business-lookup-results p {
  color: rgba(247, 239, 229, 0.76);
}

.form-message a {
  color: #ff9a2e;
  font-weight: 900;
}

@media (max-width: 760px) {
  .public-site.signup-look form {
    grid-template-columns: 1fr;
  }
}

/* Spraakcommando-laag voor ondernemers/planning: compact, bevestigbaar en goedkoop in gebruik. */
.voice-command-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(143, 178, 214, 0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(20, 48, 76, 0.92), rgba(7, 24, 40, 0.96));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.voice-command-head,
.voice-command-actions,
.voice-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.voice-command-head span,
.voice-result-head span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.voice-command-head strong,
.voice-result-head strong {
  color: #ffffff;
  font-size: 0.98rem;
}

.voice-command-head small,
.voice-result-head small,
.voice-command-actions .form-message,
.voice-command-examples button,
.voice-command-result li,
.voice-command-result p {
  color: rgba(226, 236, 247, 0.82);
}

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

.voice-command-form textarea {
  min-height: 54px;
  resize: vertical;
}

.voice-command-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.voice-command-examples button {
  border: 1px solid rgba(143, 178, 214, 0.25);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  min-height: 34px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.voice-command-examples button:hover,
.voice-command-examples button:focus-visible {
  border-color: #f58220;
  background: rgba(245, 130, 32, 0.16);
  color: #ffffff;
}

.voice-command-result {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(126, 192, 238, 0.34);
  border-radius: 8px;
  padding: 10px;
  background: rgba(2, 13, 26, 0.72);
}

.voice-command-result.applied {
  border-color: rgba(86, 211, 139, 0.45);
}

.voice-assistant-insights {
  display: grid;
  gap: 6px;
}

.voice-assistant-insight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-left: 3px solid #75a7d1;
  border-radius: 5px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.07);
}

.voice-assistant-insight.hoog {
  border-left-color: #ef6a67;
}

.voice-assistant-insight.middel {
  border-left-color: #f0b24d;
}

.voice-assistant-insight span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.voice-assistant-insight strong {
  color: #ffffff;
  font-size: 0.84rem;
}

.voice-assistant-insight small {
  color: rgba(226, 236, 247, 0.76);
  line-height: 1.35;
}

.voice-assistant-insight a {
  color: #ffab5a;
  font-size: 0.78rem;
  font-weight: 900;
}

.voice-result-navigation {
  justify-self: start;
}

.assistant-target-highlight {
  outline: 3px solid #f58220;
  outline-offset: 3px;
  animation: assistant-target-pulse 1.2s ease-in-out 2;
}

.assistant-improvement-backlog {
  margin: 10px 0;
  border: 1px solid rgba(143, 178, 214, 0.24);
  border-radius: 7px;
  background: rgba(6, 24, 40, 0.62);
}

.assistant-improvement-backlog > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
}

.assistant-improvement-backlog > summary span,
.assistant-improvement-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.assistant-improvement-backlog > summary small,
.assistant-improvement-row small,
.assistant-improvement-row em {
  color: rgba(226, 236, 247, 0.74);
  font-size: 0.76rem;
}

.assistant-improvement-row em {
  font-style: normal;
}

.assistant-improvement-list {
  display: grid;
  gap: 6px;
  padding: 0 10px 10px;
}

.assistant-improvement-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 110px) minmax(120px, 0.65fr) auto;
  align-items: center;
  gap: 7px;
  border-top: 1px solid rgba(143, 178, 214, 0.16);
  padding-top: 7px;
}

.assistant-improvement-backlog,
.assistant-improvement-list,
.assistant-improvement-row,
.assistant-improvement-row > *,
.document-status-grid,
.document-status-card,
.document-status-card > div {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.assistant-improvement-row :where(input, select, button),
.document-status-card :where(strong, small) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.assistant-improvement-row .form-message {
  grid-column: 1 / -1;
  min-height: 0;
}

@keyframes assistant-target-pulse {
  50% { box-shadow: 0 0 0 7px rgba(245, 130, 32, 0.18); }
}

.voice-result-grid,
.voice-candidate-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.voice-result-grid span,
.voice-candidate-list span {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
}

.voice-result-grid small,
.voice-candidate-list small {
  color: rgba(226, 236, 247, 0.72);
}

.voice-result-grid strong,
.voice-candidate-list strong {
  color: #ffffff;
}

html[data-theme="light"] .voice-command-panel {
  background: #ffffff;
  border-color: rgba(12, 47, 82, 0.16);
  box-shadow: 0 10px 24px rgba(12, 47, 82, 0.08);
}

html[data-theme="light"] .assistant-improvement-backlog {
  border-color: rgba(12, 47, 82, 0.16);
  background: #f4f7fb;
}

html[data-theme="light"] .assistant-improvement-backlog > summary small,
html[data-theme="light"] .assistant-improvement-row small,
html[data-theme="light"] .assistant-improvement-row em {
  color: #536579;
}

html[data-theme="light"] .voice-command-head strong,
html[data-theme="light"] .voice-result-head strong,
html[data-theme="light"] .voice-result-grid strong,
html[data-theme="light"] .voice-candidate-list strong,
html[data-theme="light"] .voice-assistant-insight strong {
  color: #102235;
}

html[data-theme="light"] .voice-command-head small,
html[data-theme="light"] .voice-result-head small,
html[data-theme="light"] .voice-command-actions .form-message,
html[data-theme="light"] .voice-command-examples button,
html[data-theme="light"] .voice-command-result li,
html[data-theme="light"] .voice-command-result p,
html[data-theme="light"] .voice-result-grid small,
html[data-theme="light"] .voice-candidate-list small,
html[data-theme="light"] .voice-assistant-insight small {
  color: #536579;
}

html[data-theme="light"] .voice-command-examples button,
html[data-theme="light"] .voice-command-result,
html[data-theme="light"] .voice-result-grid span,
html[data-theme="light"] .voice-candidate-list span,
html[data-theme="light"] .voice-assistant-insight {
  background: #f4f7fb;
}

@media (max-width: 720px) {
  .voice-command-head,
  .voice-command-actions,
  .voice-result-head {
    align-items: stretch;
    flex-direction: column;
  }

  .voice-command-head .button,
  .voice-command-actions .button {
    width: 100%;
  }

  .voice-command-examples {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .voice-assistant-insight {
    grid-template-columns: 1fr;
  }

  .voice-result-grid,
  .voice-candidate-list {
    grid-template-columns: 1fr;
  }

  .assistant-improvement-row {
    grid-template-columns: 1fr;
  }
}

/* Public nav theme control fit fix - keep at end. */
.public-site .topbar {
  align-items: center;
}

.public-site .topbar .site-nav {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.public-site .topbar .theme-select-wrap {
  flex: 0 1 auto !important;
  max-width: 100% !important;
  margin-left: 2px !important;
}

.public-site .topbar .theme-select-field {
  min-width: 0 !important;
}

.public-site .topbar .theme-select-field span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

.public-site .topbar .theme-select-field select {
  width: 94px !important;
  min-width: 94px !important;
  max-width: 94px !important;
}

.public-site .topbar .style-image-picker summary {
  min-width: 52px !important;
  padding-right: 10px !important;
  text-align: center !important;
}

@media (max-width: 1180px) {
  .public-site .topbar {
    min-height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .public-site .topbar .site-nav {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .public-site .topbar .theme-select-wrap {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .public-site .topbar .theme-select-field select,
  .public-site .topbar .style-image-picker summary {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Contracten & juridische status */
.contract-shell {
  display: grid;
  gap: 16px;
}

.contract-head,
.contract-section,
.contract-export-card {
  border: 1px solid rgba(143, 178, 214, 0.22);
  border-radius: 8px;
  background: rgba(8, 30, 52, 0.82);
  padding: 16px;
}

.contract-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.contract-kpi-strip article {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(143, 178, 214, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  padding: 12px;
}

.contract-kpi-strip strong {
  color: #ff9f2f;
  font-size: 1.5rem;
  line-height: 1;
}

.contract-kpi-strip span,
.contract-export-card strong,
.contract-document-card strong,
.contract-flow-row strong,
.contract-log-row strong,
.contract-risk-lock strong {
  color: #ffffff;
}

.contract-kpi-strip small,
.contract-export-card span,
.contract-document-card p,
.contract-document-card small,
.contract-flow-row small,
.contract-flow-row em,
.contract-log-row small,
.contract-log-row em,
.contract-log-empty,
.contract-risk-lock p {
  color: rgba(226, 236, 247, 0.76);
}

.contract-export-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.contract-export-card > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

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

.contract-document-grid,
.contract-lock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.contract-document-card,
.contract-risk-lock {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(143, 178, 214, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  padding: 12px;
}

.contract-document-card.review,
.contract-risk-lock.attention {
  border-color: rgba(255, 159, 47, 0.42);
}

.contract-risk-lock.ok {
  border-color: rgba(84, 214, 145, 0.4);
}

.contract-document-head,
.contract-document-meta,
.contract-flow-row,
.contract-log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.contract-document-head span,
.contract-flow-row span,
.contract-log-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.contract-document-head b,
.contract-risk-lock span,
.contract-flow-row em,
.contract-log-row em {
  border-radius: 999px;
  background: rgba(255, 159, 47, 0.16);
  color: #ffd7aa;
  padding: 5px 8px;
  font-size: 0.78rem;
  font-style: normal;
  white-space: nowrap;
}

.contract-flow-list,
.contract-log-list {
  display: grid;
  gap: 8px;
}

.contract-flow-row,
.contract-log-row,
.contract-log-empty {
  align-items: flex-start;
  border: 1px solid rgba(143, 178, 214, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  padding: 10px;
}

.contract-log-row {
  grid-template-columns: 1.4fr 1fr 1fr auto;
}

html[data-theme="light"] .contract-head,
html[data-theme="light"] .contract-section,
html[data-theme="light"] .contract-export-card,
html[data-theme="light"] .contract-kpi-strip article,
html[data-theme="light"] .contract-document-card,
html[data-theme="light"] .contract-risk-lock,
html[data-theme="light"] .contract-flow-row,
html[data-theme="light"] .contract-log-row,
html[data-theme="light"] .contract-log-empty {
  background: #ffffff;
  border-color: rgba(14, 47, 82, 0.14);
}

html[data-theme="light"] .contract-kpi-strip span,
html[data-theme="light"] .contract-export-card strong,
html[data-theme="light"] .contract-document-card strong,
html[data-theme="light"] .contract-flow-row strong,
html[data-theme="light"] .contract-log-row strong,
html[data-theme="light"] .contract-risk-lock strong {
  color: #102235;
}

html[data-theme="light"] .contract-kpi-strip small,
html[data-theme="light"] .contract-export-card span,
html[data-theme="light"] .contract-document-card p,
html[data-theme="light"] .contract-document-card small,
html[data-theme="light"] .contract-flow-row small,
html[data-theme="light"] .contract-flow-row em,
html[data-theme="light"] .contract-log-row small,
html[data-theme="light"] .contract-log-row em,
html[data-theme="light"] .contract-log-empty,
html[data-theme="light"] .contract-risk-lock p {
  color: #536579;
}

@media (max-width: 860px) {
  .contract-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contract-export-card,
  .contract-document-head,
  .contract-document-meta,
  .contract-flow-row,
  .contract-log-row {
    align-items: stretch;
    flex-direction: column;
  }

  .contract-export-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .contract-kpi-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .portal-active #professional-team .team-edit-sections,
  .portal-active #professional-team .team-edit-section-grid,
  .portal-active #professional-team .team-permission-field,
  .portal-active #professional-team .team-personnel-field {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .portal-active #professional-team :where(
    .team-row,
    .team-edit-grid,
    .team-edit-section,
    .team-edit-section-grid,
    .team-permission-field,
    .team-personnel-field,
    input,
    select,
    textarea
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Admin header restore 2026-07-29: logo en thema-keuze blijven zichtbaar in het beheercentrum. */
.admin-body:has(#dashboard:not(.hidden)) .topbar {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 1600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 62px !important;
  height: 62px !important;
  padding: 8px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(6, 22, 39, 0.98) !important;
  color: #f8fafc !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
  box-sizing: border-box !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 244px !important;
  width: 244px !important;
  min-width: 0 !important;
  max-width: 244px !important;
  color: #f8fafc !important;
  text-decoration: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar .brand img {
  display: block !important;
  width: 100% !important;
  max-width: 220px !important;
  height: 44px !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
  background: var(--logo-tile-bg, rgba(255, 255, 255, 0.96)) !important;
  object-fit: contain !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar .admin-title {
  color: #f8fafc !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar nav a,
.admin-body:has(#dashboard:not(.hidden)) .topbar .theme-select-field,
.admin-body:has(#dashboard:not(.hidden)) .topbar .style-image-picker summary {
  color: #f8fafc !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar select,
.admin-body:has(#dashboard:not(.hidden)) .topbar .style-image-picker summary {
  min-height: 34px !important;
  border: 1px solid rgba(203, 213, 225, 0.22) !important;
  border-radius: 7px !important;
  background: rgba(15, 23, 42, 0.96) !important;
  color: #f8fafc !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar .theme-select-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-shell {
  padding-top: 62px !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard {
  min-height: calc(100vh - 62px) !important;
  padding-top: 14px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
  top: 62px !important;
  bottom: 0 !important;
  height: calc(100vh - 62px) !important;
  min-height: calc(100vh - 62px) !important;
  padding-top: 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs::before {
  display: none !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .topbar {
  border-bottom-color: rgba(6, 26, 51, 0.12) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: #07182d !important;
  box-shadow: 0 10px 28px rgba(6, 26, 51, 0.08) !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .topbar .admin-title,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .topbar nav a,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .topbar .theme-select-field,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .topbar .style-image-picker summary {
  color: #07182d !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .topbar select,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .topbar .style-image-picker summary {
  border-color: rgba(6, 26, 51, 0.18) !important;
  background: var(--control-bg, rgba(255, 255, 255, 0.98)) !important;
  color: #07182d !important;
}

@media (max-width: 820px) {
  .admin-body:has(#dashboard:not(.hidden)) .topbar {
    height: auto !important;
    min-height: 62px !important;
    flex-wrap: wrap !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .topbar .brand img {
    width: 142px !important;
    max-width: 44vw !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .topbar .admin-title,
  .admin-body:has(#dashboard:not(.hidden)) .theme-select-field span {
    display: none !important;
  }
}

/* Admin menu/footer en aanvragenproces fix 2026-07-29. */
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
  gap: 8px !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-workspace {
  grid-row: 1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary {
  grid-row: 2 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-secondary {
  grid-row: 3 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-communication {
  grid-row: 4 !important;
  max-height: 92px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom {
  grid-row: 5 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary,
.admin-body:has(#dashboard:not(.hidden)) .admin-nav-communication {
  min-height: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary::-webkit-scrollbar,
.admin-body:has(#dashboard:not(.hidden)) .admin-nav-communication::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-secondary {
  min-height: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom {
  display: grid !important;
  gap: 8px !important;
  align-self: end !important;
  margin-top: 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
  background: linear-gradient(180deg, rgba(6, 17, 29, 0), rgba(6, 17, 29, 0.98) 22%) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom .admin-nav-screens {
  width: 100% !important;
  margin: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom .screen-switcher {
  position: relative !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom .screen-switcher-grid {
  max-height: 154px !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom .screen-switcher-grid::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  border: 1px solid rgba(203, 213, 225, 0.18) !important;
  border-radius: 7px !important;
  background: rgba(15, 23, 42, 0.74) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme span {
  color: #dbe7f3 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 28px !important;
  padding: 4px 22px 4px 8px !important;
  border: 1px solid rgba(203, 213, 225, 0.16) !important;
  border-radius: 6px !important;
  background: rgba(6, 17, 29, 0.92) !important;
  color: #f8fafc !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme {
  border-color: rgba(6, 26, 51, 0.14) !important;
  background: rgba(255, 255, 255, 0.84) !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme span {
  color: #334155 !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme select {
  border-color: rgba(6, 26, 51, 0.14) !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

.admin-powered-by {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 7px 8px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

.admin-powered-by span {
  color: rgba(226, 232, 240, 0.72) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.admin-powered-by img {
  display: block !important;
  width: 94px !important;
  max-width: 100% !important;
  height: 26px !important;
  padding: 3px 5px !important;
  border-radius: 5px !important;
  background: var(--logo-tile-bg, rgba(255, 255, 255, 0.96)) !important;
  object-fit: contain !important;
  justify-self: end !important;
}

.admin-powered-by small {
  grid-column: 1 / -1 !important;
  color: rgba(226, 232, 240, 0.58) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-align: right !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  max-height: calc(100vh - 282px) !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-detail-layout {
  grid-template-rows: minmax(0, 1fr) minmax(112px, 184px) !important;
  gap: 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress {
  align-self: stretch !important;
  min-height: 0 !important;
  max-height: 184px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress::-webkit-scrollbar,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress ol::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress ol {
  max-height: 118px !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

html[data-theme="light"] .admin-powered-by {
  border-color: rgba(6, 26, 51, 0.13) !important;
  background: rgba(255, 255, 255, 0.84) !important;
}

html[data-theme="light"] .admin-powered-by span {
  color: #536579 !important;
}

html[data-theme="light"] .admin-powered-by small {
  color: #6b7c8f !important;
}

/* Aanvragen: proces altijd zichtbaar en contrast aangescherpt 2026-07-29. */
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-detail-layout {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  gap: 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main {
  flex: 1 1 auto !important;
  min-height: 190px !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress {
  flex: 0 0 auto !important;
  order: 50 !important;
  display: grid !important;
  min-height: 132px !important;
  max-height: min(210px, 30vh) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-top: 1px solid rgba(255, 130, 0, 0.28) !important;
  background: linear-gradient(180deg, rgba(10, 31, 53, 0.98), rgba(7, 20, 36, 0.98)) !important;
  box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.12) !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  margin: -10px -10px 4px !important;
  padding: 9px 10px 7px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
  background: rgba(7, 20, 36, 0.98) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress ol {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)) !important;
  max-height: none !important;
  overflow: visible !important;
  gap: 7px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress li {
  min-height: 48px !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress :where(strong, span) {
  color: #f8fafc !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress :where(small, p) {
  color: #cbd5e1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(.detail, .ticket-main, .ticket-progress, .request-list)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.admin-nav-caption, .system-switch label, .admin-tabs label, .admin-tabs small, .admin-powered-by span, .admin-powered-by small) {
  color: #dbe7f3 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs :where(button, summary, select) {
  color: #f8fafc !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress {
  border-color: rgba(15, 23, 42, 0.14) !important;
  border-top-color: rgba(255, 130, 0, 0.36) !important;
  background: #ffffff !important;
  box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress-head {
  background: var(--panel-bg, rgba(255, 255, 255, 0.98)) !important;
  border-bottom-color: rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress li {
  border-color: rgba(15, 23, 42, 0.12) !important;
  background: var(--surface-soft) !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress :where(strong, span),
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-tabs :where(button, summary, select) {
  color: #0f172a !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress :where(small, p),
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) :where(.admin-nav-caption, .system-switch label, .admin-tabs label, .admin-tabs small, .admin-powered-by span, .admin-powered-by small) {
  color: #334155 !important;
}

/* Admin footer/menu herstel 2026-07-29: footer hoort onderaan de pagina, niet als gat in het menu. */
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-workspace,
.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary,
.admin-body:has(#dashboard:not(.hidden)) .admin-nav-secondary,
.admin-body:has(#dashboard:not(.hidden)) .admin-nav-communication,
.admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom {
  grid-row: auto !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary {
  flex: 1 1 auto !important;
  min-height: 160px !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-secondary,
.admin-body:has(#dashboard:not(.hidden)) .admin-nav-communication {
  flex: 0 0 auto !important;
  max-height: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-communication {
  overflow: visible !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom {
  flex: 0 0 auto !important;
  display: grid !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
  background: linear-gradient(180deg, rgba(6, 17, 29, 0), rgba(6, 17, 29, 0.98) 24%) !important;
}

.admin-page-footer {
  position: fixed !important;
  right: 18px !important;
  bottom: 8px !important;
  z-index: 1500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-height: 30px !important;
  max-width: calc(100vw - 280px) !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 7px !important;
  background: rgba(6, 22, 39, 0.72) !important;
  color: rgba(226, 232, 240, 0.82) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
}

.admin-page-footer span,
.admin-page-footer small {
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.admin-page-footer img {
  display: block !important;
  width: 86px !important;
  height: 24px !important;
  padding: 3px 5px !important;
  border-radius: 5px !important;
  background: var(--logo-tile-bg, rgba(255, 255, 255, 0.96)) !important;
  object-fit: contain !important;
}

html[data-theme="light"] .admin-page-footer {
  border-color: rgba(6, 26, 51, 0.12) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #536579 !important;
  box-shadow: 0 10px 24px rgba(6, 26, 51, 0.08) !important;
}

.admin-body:not(:has(#dashboard:not(.hidden))) .admin-page-footer {
  display: none !important;
}

@media (max-width: 820px) {
  .admin-page-footer {
    left: 10px !important;
    right: 10px !important;
    bottom: 8px !important;
    max-width: none !important;
    justify-content: center !important;
  }
}

/* Instellingen leesbaar en incidentstand bruikbaar 2026-07-29. */
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] {
  color: #f8fafc !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .settings-shell {
  display: grid !important;
  gap: 12px !important;
  max-width: 1560px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .settings-summary {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .settings-summary article,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .settings-card {
  border-color: rgba(148, 163, 184, 0.22) !important;
  background: linear-gradient(180deg, rgba(15, 39, 64, 0.96), rgba(7, 24, 43, 0.96)) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] :where(.settings-card h3, .settings-summary strong, .settings-card strong) {
  color: #ffffff !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] :where(.settings-card-head span, .settings-help, .settings-summary span, .settings-summary small, .settings-card p) {
  color: #cbd5e1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .settings-card label {
  border-color: rgba(148, 163, 184, 0.18) !important;
  background: rgba(255, 255, 255, 0.065) !important;
  color: #dbe7f3 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] :where(input, select, textarea) {
  border-color: rgba(203, 213, 225, 0.18) !important;
  background: rgba(6, 17, 29, 0.9) !important;
  color: #f8fafc !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] :where(input:disabled, select:disabled, textarea:disabled) {
  opacity: 1 !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  background: rgba(15, 23, 42, 0.78) !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}

.incident-mode-card {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr) !important;
  border-color: rgba(255, 130, 0, 0.32) !important;
  background: linear-gradient(180deg, rgba(32, 44, 56, 0.98), rgba(8, 24, 43, 0.98)) !important;
}

.incident-mode-card .settings-card-head,
.incident-mode-card .incident-mode-options,
.incident-mode-card .wide,
.incident-mode-card .settings-help {
  grid-column: 1 / -1 !important;
}

.incident-mode-options {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.incident-mode-options button {
  display: grid !important;
  gap: 3px !important;
  min-height: 62px !important;
  padding: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, 0.72) !important;
  color: #f8fafc !important;
  text-align: left !important;
  cursor: pointer !important;
}

.incident-mode-options button strong {
  color: #ffffff !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.incident-mode-options button span {
  color: #cbd5e1 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.incident-mode-options button.active {
  border-color: rgba(255, 130, 0, 0.78) !important;
  background: rgba(255, 130, 0, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 130, 0, 0.26) !important;
}

.incident-mode-options button:disabled {
  cursor: default !important;
  opacity: 1 !important;
}

.incident-mode-card .compact-select-field {
  max-width: 280px !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .settings-summary article,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .settings-card {
  border-color: rgba(15, 23, 42, 0.12) !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] :where(.settings-card h3, .settings-summary strong, .settings-card strong) {
  color: #0f172a !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] :where(.settings-card-head span, .settings-help, .settings-summary span, .settings-summary small, .settings-card p) {
  color: #475569 !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .settings-card label,
html[data-theme="light"] .incident-mode-options button {
  border-color: rgba(15, 23, 42, 0.12) !important;
  background: var(--surface-soft) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] :where(input, select, textarea) {
  border-color: rgba(15, 23, 42, 0.14) !important;
  background: var(--control-bg, rgba(255, 255, 255, 0.98)) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] :where(input:disabled, select:disabled, textarea:disabled) {
  background: #eef3f8 !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}

html[data-theme="light"] .incident-mode-options button strong {
  color: #0f172a !important;
}

html[data-theme="light"] .incident-mode-options button span {
  color: #475569 !important;
}

html[data-theme="light"] .incident-mode-options button.active {
  border-color: rgba(255, 130, 0, 0.64) !important;
  background: #fff3e5 !important;
}

@media (max-width: 980px) {
  .incident-mode-card,
  .incident-mode-options {
    grid-template-columns: 1fr !important;
  }
}

/* Vergunningen & ontheffingen voor professionals. */
.permit-application-panel {
  border-color: rgba(255, 130, 0, 0.24) !important;
  background: rgba(8, 28, 48, 0.72) !important;
}

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

.permit-form-grid .wide {
  grid-column: 1 / -1;
}

.permit-form-grid label {
  min-width: 0;
}

.permit-form-grid input,
.permit-form-grid select {
  min-height: 38px;
}

.permit-form-grid select[multiple] {
  min-height: 118px;
}

.permit-application-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.permit-application-card {
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) minmax(150px, 0.8fr) minmax(130px, 0.75fr) minmax(130px, 0.75fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 35, 55, 0.86);
}

.permit-application-card.ready {
  border-color: rgba(34, 197, 94, 0.34);
}

.permit-application-card.attention {
  border-color: rgba(255, 184, 77, 0.4);
}

.permit-application-card strong,
.permit-application-card b {
  display: block;
  color: #ffffff;
  line-height: 1.15;
}

.permit-application-card small {
  display: block;
  margin-top: 3px;
  color: #cbd5e1;
  line-height: 1.25;
}

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

html[data-theme="light"] .permit-application-panel {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] .permit-application-card {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .permit-application-card strong,
html[data-theme="light"] .permit-application-card b {
  color: #0f172a;
}

html[data-theme="light"] .permit-application-card small {
  color: #475569;
}

@media (max-width: 1100px) {
  .permit-form-grid,
  .permit-application-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .permit-application-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .permit-form-grid,
  .permit-application-card {
    grid-template-columns: 1fr;
  }
}

/* Bedrijfsmail, social inbox en reviewmonitor voor professionals. */
.email-automation-panel,
.social-monitoring-panel {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(8, 28, 48, 0.74);
  padding: 10px;
}

.email-automation-panel > summary,
.social-monitoring-panel > summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: #ffffff;
}

.email-automation-panel > summary span,
.social-monitoring-panel > summary span {
  font-weight: 850;
}

.email-automation-panel > summary small,
.social-monitoring-panel > summary small {
  color: #cbd5e1;
}

.email-automation-form {
  margin-top: 10px;
}

.email-automation-form textarea {
  font-family: inherit;
  line-height: 1.35;
}

.email-automation-preview,
.social-monitoring-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.email-automation-preview article,
.social-monitoring-preview article {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 35, 55, 0.88);
  padding: 10px;
}

.email-automation-preview article.positive,
.social-monitoring-preview article.positive {
  border-color: rgba(34, 197, 94, 0.36);
}

.email-automation-preview article.warning,
.social-monitoring-preview article.warning {
  border-color: rgba(255, 184, 77, 0.42);
}

.email-automation-preview strong,
.social-monitoring-preview strong {
  display: block;
  color: #ffffff;
}

.email-automation-preview span,
.social-monitoring-preview span {
  display: block;
  margin-top: 5px;
  color: #ffb24d;
  font-weight: 800;
}

.email-automation-preview small,
.social-monitoring-preview small {
  display: block;
  margin-top: 5px;
  color: #cbd5e1;
  line-height: 1.35;
}

html[data-theme="light"] .email-automation-panel,
html[data-theme="light"] .social-monitoring-panel,
html[data-theme="light"] .email-automation-preview article,
html[data-theme="light"] .social-monitoring-preview article {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .email-automation-panel > summary,
html[data-theme="light"] .social-monitoring-panel > summary,
html[data-theme="light"] .email-automation-preview strong,
html[data-theme="light"] .social-monitoring-preview strong {
  color: #0f172a;
}

html[data-theme="light"] .email-automation-panel > summary small,
html[data-theme="light"] .social-monitoring-panel > summary small,
html[data-theme="light"] .email-automation-preview small,
html[data-theme="light"] .social-monitoring-preview small {
  color: #475569;
}

@media (max-width: 900px) {
  .email-automation-preview,
  .social-monitoring-preview {
    grid-template-columns: 1fr;
  }
}

/* Admin menu compact: scanbaar zonder grote tegelknoppen. */
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
  gap: 8px !important;
  padding: 74px 10px 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-block {
  gap: 5px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-caption {
  margin: 4px 2px 3px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs button:not(.portal-sidebar-logout),
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch a,
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .screen-switcher summary,
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .admin-more-tabs summary {
  min-height: 32px !important;
  height: auto !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs button.active:not(.portal-sidebar-logout) {
  box-shadow: inset 3px 0 0 #ff8a00 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch {
  padding: 8px !important;
  border-radius: 7px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch label {
  font-size: 10px !important;
  margin-bottom: 4px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch select,
.admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme select {
  min-height: 32px !important;
  padding: 6px 8px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom {
  gap: 7px !important;
  padding-top: 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 6px !important;
  align-items: center !important;
  padding: 6px 8px !important;
  border-radius: 7px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme span {
  font-size: 12px !important;
  font-weight: 800 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .portal-sidebar-logout {
  min-height: 34px !important;
  padding: 8px 10px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
}

/* Footer en onderruimte herstel: niets mag achter de onderkant verdwijnen. */
.admin-body:has(#dashboard:not(.hidden)) {
  --admin-footer-height: 52px;
}

.admin-body:has(#dashboard:not(.hidden)) .dashboard {
  padding-bottom: calc(var(--admin-footer-height) + 22px) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .tab-panel {
  padding-bottom: calc(var(--admin-footer-height) + 18px) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-detail-layout {
  min-height: 0 !important;
  max-height: calc(100vh - 250px) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress {
  margin-bottom: 8px !important;
}

.admin-page-footer {
  left: 244px !important;
  right: 0 !important;
  bottom: 0 !important;
  min-height: 52px !important;
  max-width: none !important;
  width: auto !important;
  justify-content: flex-end !important;
  padding: 8px 18px !important;
  border-radius: 0 !important;
  border-left: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  background: rgba(6, 22, 39, 0.94) !important;
}

.admin-page-footer img {
  width: 78px !important;
  height: 23px !important;
}

.admin-page-footer span,
.admin-page-footer small {
  font-size: 10px !important;
  text-transform: lowercase !important;
}

@media (max-width: 820px) {
  .admin-page-footer {
    left: 0 !important;
    right: 0 !important;
    min-height: 54px !important;
  }
}

/* Tab-isolatie: voorkom dat aanvraagcontent zichtbaar blijft op Instellingen of andere tabs. */
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab] > .tab-panel {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="overview"] > [data-tab-panel="overview"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="assistant"] > [data-tab-panel="assistant"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="branches"] > [data-tab-panel="branches"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] > [data-tab-panel="intake"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="calculator"] > [data-tab-panel="calculator"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="finance"] > [data-tab-panel="finance"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="staff"] > [data-tab-panel="staff"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="professionals"] > [data-tab-panel="professionals"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="module-status"] > [data-tab-panel="module-status"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="contracts"] > [data-tab-panel="contracts"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="benchmarks"] > [data-tab-panel="benchmarks"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="market-monitor"] > [data-tab-panel="market-monitor"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="analytics"] > [data-tab-panel="analytics"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="communications"] > [data-tab-panel="communications"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="community"] > [data-tab-panel="community"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="data-quality"] > [data-tab-panel="data-quality"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="acceptance"] > [data-tab-panel="acceptance"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="security"] > [data-tab-panel="security"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="audit"] > [data-tab-panel="audit"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="settings"] > [data-tab-panel="settings"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Instellingen compacter: samenvatting en accountkorting naast elkaar. */
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .settings-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr) !important;
  align-items: start !important;
  gap: 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .panel-head,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] #websiteToolsSwitchboardPanel,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] #integrationCenter,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] #settingsForm {
  grid-column: 1 / -1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] #settingsSummary {
  grid-column: 1 / 2 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] #accountDiscountPanel {
  grid-column: 2 / 3 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .account-discount-card {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) .account-discount-card > summary {
  cursor: pointer !important;
  padding: 12px !important;
  list-style: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .account-discount-card > summary::-webkit-details-marker {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .account-discount-card > summary::after {
  content: "Open" !important;
  align-self: center !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 130, 0, 0.16) !important;
  color: #ffb24d !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .account-discount-card[open] > summary::after {
  content: "Sluit" !important;
}

.admin-body:has(#dashboard:not(.hidden)) .account-discount-form {
  padding: 0 12px 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .account-discount-form label,
.admin-body:has(#dashboard:not(.hidden)) .account-discount-scope {
  padding: 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .account-discount-active-list {
  padding: 0 12px 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.website-tools-switchboard-card {
  padding: 0 !important;
  overflow: hidden;
}

.website-tools-switchboard-card > summary {
  cursor: pointer;
  padding: 12px;
  list-style: none;
}

.website-tools-switchboard-card > summary::-webkit-details-marker {
  display: none;
}

.website-tools-switchboard-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

.switchboard-status-strip,
.website-tools-features,
.website-tools-switchboard-form .wide {
  grid-column: 1 / -1;
}

.switchboard-status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.switchboard-status-strip span {
  display: grid;
  gap: 2px;
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(8, 28, 48, 0.56);
}

.switchboard-status-strip strong {
  color: #ffffff;
  font-size: 13px;
}

.switchboard-status-strip small {
  color: #cbd5e1;
  font-size: 11px;
}

.website-tools-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
}

.website-tools-features legend {
  padding: 0 6px;
  color: #e5eef8;
  font-size: 12px;
  font-weight: 900;
}

.website-tools-switchboard-form .checkbox-line {
  min-height: 44px;
  align-items: flex-start;
}

.website-tools-switchboard-form .checkbox-line span {
  display: grid;
  gap: 2px;
}

.website-tools-switchboard-form .checkbox-line small {
  color: #aebccc;
  font-size: 11px;
  line-height: 1.25;
}

.website-tools-switchboard-form .checkbox-line.caution {
  border-color: rgba(245, 158, 11, 0.42);
  background: rgba(245, 158, 11, 0.08);
}

.website-widget-embed-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 9px;
  background: rgba(14, 165, 233, 0.08);
}

.website-widget-embed-box strong {
  color: var(--text-strong);
  font-weight: 950;
}

.website-widget-embed-box small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.website-widget-embed-box code {
  display: block;
  max-width: 100%;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.38);
  color: #e8f4ff;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

html[data-theme="light"] .switchboard-status-strip span,
html[data-theme="light"] .website-tools-features {
  background: #ffffff;
  border-color: #d8e0ea;
}

html[data-theme="light"] .switchboard-status-strip strong,
html[data-theme="light"] .website-tools-features legend {
  color: #172033;
}

html[data-theme="light"] .website-widget-embed-box {
  background: #f0f8ff;
  border-color: #c9e4f7;
}

html[data-theme="light"] .website-widget-embed-box code {
  background: #ffffff;
  border-color: #d6e0eb;
  color: #12324f;
}

html[data-theme="light"] .switchboard-status-strip small,
html[data-theme="light"] .website-tools-switchboard-form .checkbox-line small {
  color: #526176;
}

@media (max-width: 1180px) {
  .website-tools-switchboard-form,
  .switchboard-status-strip,
  .website-tools-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .website-tools-switchboard-form,
  .switchboard-status-strip,
  .website-tools-features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .settings-shell {
    grid-template-columns: 1fr !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] #settingsSummary,
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] #accountDiscountPanel {
    grid-column: 1 / -1 !important;
  }
}

/* Koppelhub compacter en overzichtelijker. */
.admin-body:has(#dashboard:not(.hidden)) .integration-status-card .integration-status-grid {
  display: none !important;
}

.integration-hub-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.integration-hub-kpis span,
.integration-category-group,
.integration-status-row {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(8, 28, 48, 0.64);
}

.integration-hub-kpis span {
  display: grid;
  gap: 2px;
  padding: 9px;
}

.integration-hub-kpis strong {
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
}

.integration-hub-kpis small {
  color: #cbd5e1;
  font-size: 11px;
}

.integration-accordion {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.integration-category-group {
  overflow: hidden;
}

.integration-category-group > summary,
.integration-status-row > summary {
  cursor: pointer;
  display: grid;
  align-items: center;
  gap: 10px;
  list-style: none;
}

.integration-category-group > summary {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
  background: rgba(15, 35, 55, 0.78);
}

.integration-category-group > summary::-webkit-details-marker,
.integration-status-row > summary::-webkit-details-marker {
  display: none;
}

.integration-category-group > summary strong,
.integration-status-row > summary strong {
  color: #ffffff;
}

.integration-category-group > summary span,
.integration-status-row > summary small,
.integration-status-row > summary em {
  color: #cbd5e1;
  font-size: 11px;
}

.integration-compact-list {
  display: grid;
  gap: 6px;
  padding: 8px;
}

.integration-status-row > summary {
  grid-template-columns: minmax(190px, 1fr) 120px minmax(140px, 0.7fr);
  padding: 8px 10px;
}

.integration-status-row > summary b {
  color: #ffb24d;
  font-size: 12px;
}

.integration-row-detail {
  display: grid;
  gap: 4px;
  padding: 0 10px 10px;
}

.integration-row-detail p {
  margin: 0;
  color: #d7e1ec;
  font-size: 12px;
  line-height: 1.35;
}

html[data-theme="light"] .integration-hub-kpis span,
html[data-theme="light"] .integration-category-group,
html[data-theme="light"] .integration-status-row,
html[data-theme="light"] .integration-category-group > summary {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .integration-hub-kpis strong,
html[data-theme="light"] .integration-category-group > summary strong,
html[data-theme="light"] .integration-status-row > summary strong {
  color: #0f172a;
}

html[data-theme="light"] .integration-hub-kpis small,
html[data-theme="light"] .integration-category-group > summary span,
html[data-theme="light"] .integration-status-row > summary small,
html[data-theme="light"] .integration-status-row > summary em,
html[data-theme="light"] .integration-row-detail p {
  color: #475569;
}

@media (max-width: 900px) {
  .integration-hub-kpis,
  .integration-status-row > summary {
    grid-template-columns: 1fr;
  }
}

/* Market monitor country and compliance readiness */
.market-country-panel,
.market-compliance-panel,
.market-country-card,
.market-compliance-card {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 36, 59, 0.96), rgba(9, 25, 43, 0.96));
  color: #f7efe5;
}

.market-country-panel,
.market-compliance-panel {
  display: grid;
  gap: 10px;
  padding: 13px;
}

.market-country-head,
.market-country-title,
.market-country-actions {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.market-country-head h3 {
  margin: 0 0 4px;
  color: #fff;
}

.market-country-head p,
.market-country-panel small,
.market-compliance-panel small,
.market-country-card p,
.market-country-card small,
.market-compliance-card small {
  margin: 0;
  color: var(--pf24-muted);
  font-weight: 800;
}

.market-country-head > span,
.market-country-title > span {
  border: 1px solid rgba(255, 139, 26, 0.45);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 139, 26, 0.13);
  color: var(--orange);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.market-country-grid,
.market-compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.market-compliance-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.market-country-card,
.market-compliance-card {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 11px;
}

.market-country-card.positive,
.market-compliance-card.positive {
  border-color: rgba(20, 184, 166, 0.45);
}

.market-country-card.warning,
.market-compliance-card.warning {
  border-color: rgba(255, 139, 26, 0.48);
}

.market-country-title strong {
  display: block;
  color: #fff;
  font-size: 15px;
}

.market-country-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.market-country-card dl > div {
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(148, 163, 184, 0.23);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
}

.market-country-card dt,
.market-country-card dd {
  margin: 0;
}

.market-country-card dt {
  color: var(--pf24-muted);
  font-size: 11px;
  font-weight: 900;
}

.market-country-card dd {
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.market-country-actions form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.market-country-actions select {
  min-height: 30px;
  max-width: 116px;
}

.market-country-card em {
  color: #ffd9a8;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.market-compliance-card ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.market-compliance-card li {
  padding: 6px 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 820;
}

.market-country-note {
  display: block;
  padding: 7px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="light"] .market-country-panel,
html[data-theme="light"] .market-compliance-panel,
html[data-theme="light"] .market-country-card,
html[data-theme="light"] .market-compliance-card {
  border-color: rgba(15, 23, 42, 0.12);
  background: #fff;
  color: #0f172a;
}

html[data-theme="light"] .market-country-head h3,
html[data-theme="light"] .market-country-title strong,
html[data-theme="light"] .market-country-card dd {
  color: #0f172a;
}

html[data-theme="light"] .market-country-head p,
html[data-theme="light"] .market-country-panel small,
html[data-theme="light"] .market-compliance-panel small,
html[data-theme="light"] .market-country-card p,
html[data-theme="light"] .market-country-card small,
html[data-theme="light"] .market-compliance-card small,
html[data-theme="light"] .market-country-card dt {
  color: #475569;
}

html[data-theme="light"] .market-country-card dl > div,
html[data-theme="light"] .market-compliance-card li {
  border-color: rgba(15, 23, 42, 0.12);
  background: #f8fafc;
  color: #0f172a;
}

@media (max-width: 1180px) {
  .market-country-grid,
  .market-compliance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .market-country-grid,
  .market-compliance-grid,
  .market-country-card dl {
    grid-template-columns: 1fr;
  }
}

/* Admin logo exact gelijk aan menubreedte. */
.admin-body:has(#dashboard:not(.hidden)) .topbar {
  padding-left: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar .brand {
  flex: 0 0 244px !important;
  width: 244px !important;
  min-width: 244px !important;
  max-width: 244px !important;
  height: 62px !important;
  padding: 8px 10px !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar .brand img {
  width: 100% !important;
  max-width: none !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  object-fit: contain !important;
  box-sizing: border-box !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar .admin-title {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
  padding-top: 74px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs::before {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 62px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: #fff url("assets/profix24-header.png") center / calc(100% - 20px) auto no-repeat !important;
}

/* Status & afbouw: 20 nieuwe koppelpunten compact zichtbaar. */
.module-action-backlog {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 36, 59, 0.96), rgba(9, 25, 43, 0.96));
  color: #f7efe5;
}

.module-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.module-action-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.module-action-card.high {
  border-color: rgba(255, 139, 26, 0.44);
}

.module-action-card.medium {
  border-color: rgba(96, 165, 250, 0.34);
}

.module-action-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.module-action-head > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255, 139, 26, 0.16);
  color: #ffb24d;
  font-size: 12px;
  font-weight: 950;
}

.module-action-card strong {
  display: block;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
}

.module-action-card small,
.module-action-card p {
  margin: 0;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.35;
}

.module-action-meta {
  display: grid;
  gap: 5px;
}

.module-action-meta span {
  display: grid;
  gap: 2px;
  padding: 6px 7px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.42);
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 760;
}

.module-action-meta b {
  color: #ffb24d;
  font-size: 10px;
  text-transform: uppercase;
}

html[data-theme="light"] .module-action-backlog,
html[data-theme="light"] .module-action-card {
  border-color: rgba(15, 23, 42, 0.12);
  background: #fff;
  color: #0f172a;
}

html[data-theme="light"] .module-action-card strong {
  color: #0f172a;
}

html[data-theme="light"] .module-action-card small,
html[data-theme="light"] .module-action-card p,
html[data-theme="light"] .module-action-meta span {
  color: #475569;
}

html[data-theme="light"] .module-action-meta span {
  border-color: rgba(15, 23, 42, 0.1);
  background: #f8fafc;
}

@media (max-width: 1280px) {
  .module-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .module-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .module-action-grid {
    grid-template-columns: 1fr;
  }
}

/* Brede visuele polish 2026-07-29: compact, leesbaar en rolbreed toepasbaar. */
:where(.admin-body, .portal-active, .login-entry, .public-site) {
  --pf24-compact-font: 13px;
  --pf24-compact-small: 11px;
  --pf24-control-height: 34px;
  --pf24-panel-gap: 10px;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs button:not(.portal-sidebar-logout),
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .sidebar-chat-compact,
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .screen-switcher summary,
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .admin-more-tabs summary,
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .system-switch a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 31px !important;
  max-height: 38px !important;
  height: auto !important;
  padding: 6px 9px !important;
  font-size: 12.5px !important;
  line-height: 1.12 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary {
  gap: 4px !important;
  align-content: start !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs select,
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs input,
.admin-body:has(#dashboard:not(.hidden)) .admin-tabs textarea {
  min-height: 31px !important;
  font-size: 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-caption {
  font-size: 9.5px !important;
  letter-spacing: 0.03em !important;
}

:where(.admin-body, .portal-active, .login-entry, .public-site) :where(input, select, textarea) {
  min-height: var(--pf24-control-height) !important;
  max-width: 100% !important;
  font-size: var(--pf24-compact-font) !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

:where(.admin-body, .portal-active, .login-entry, .public-site) textarea {
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

:where(.admin-body, .portal-active, .login-entry, .public-site) textarea::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

:where(.admin-body, .portal-active, .login-entry, .public-site) :where(button, .button, summary) {
  font-size: var(--pf24-compact-font) !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

:where(.admin-body, .portal-active, .login-entry, .public-site) :where(label, small, .badge, .pill, .status-pill) {
  font-size: var(--pf24-compact-small) !important;
}

:where(.admin-body, .portal-active, .login-entry, .public-site) :where(section, article, form, details) {
  min-width: 0 !important;
}

:where(.admin-body, .portal-active, .login-entry, .public-site) :where(.panel-head, .compact-head, .settings-card-head, .module-status-card-head, .market-card-head) {
  gap: 8px !important;
}

:where(.admin-body, .portal-active, .login-entry, .public-site) :where(.panel-head h2, .panel-head h3, .compact-head h3) {
  margin-bottom: 3px !important;
  line-height: 1.14 !important;
}

:where(.admin-body, .portal-active, .login-entry, .public-site) :where(.panel-head p, .compact-head p, .settings-help, .empty) {
  line-height: 1.35 !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.quote-box, .summary-card, .dashboard-card, .settings-card, .request-detail-card, .ticket-main, .ticket-progress, .profile-section, .finance-panel) {
  overflow: visible !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.quote-box, .summary-card, .dashboard-card, .settings-card, .request-detail-card) {
  padding: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.request-item) {
  display: grid !important;
  min-height: 42px !important;
  max-height: 54px !important;
  padding: 6px 8px !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.request-item strong, .request-item span, .request-item small) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.request-list, .request-queue-list, .ticket-main, .ticket-progress, .detail) {
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.request-list, .request-queue-list, .ticket-main, .ticket-progress, .detail)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

:where(.admin-body, .portal-active) :where(.form-grid, .settings-grid, .calculator-grid, .profile-grid, .professional-form-grid, .request-edit-form, .warehouse-form-grid) {
  gap: 8px !important;
}

:where(.admin-body, .portal-active) :where(.form-grid label, .settings-card label, .profile-section label, .calculator-panel label, .request-edit-form label, .professional-form-grid label) {
  padding: 7px !important;
  gap: 4px !important;
  min-width: 0 !important;
}

:where(.admin-body, .portal-active) :where(.button.primary, .button.secondary, button.primary, button.secondary) {
  min-height: 33px !important;
  padding: 7px 10px !important;
}

:where(.admin-body, .portal-active) :where(.icon-btn, .plain-btn) {
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 5px 8px !important;
}

:where(.admin-body, .portal-active) .role-action-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  min-width: 15px;
  margin-inline-end: 6px;
  vertical-align: -0.18em;
  pointer-events: none;
}

:where(.admin-body, .portal-active) .role-action-icon-only .role-action-icon {
  width: 17px;
  height: 17px;
  min-width: 17px;
  margin-inline-end: 0;
  vertical-align: middle;
}

:where(.admin-body, .portal-active) .has-role-action-icon {
  align-items: center;
}

:where(.admin-body, .portal-active) .has-role-action-icon:where(button, a) {
  gap: 0;
}

html[data-theme="light"] :where(.admin-body, .portal-active, .login-entry, .public-site) :where(input, select, textarea) {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active, .login-entry, .public-site) :where(input::placeholder, textarea::placeholder) {
  color: #64748b !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(.button.secondary, button.secondary, .plain-btn) {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}

@media (max-width: 980px) {
  :where(.admin-body, .portal-active, .login-entry, .public-site) {
    --pf24-compact-font: 12.5px;
    --pf24-compact-small: 10.5px;
  }
}

.admin-body:has(#dashboard:not(.hidden)) #calculatorPanel .business-calculator-grid {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
}

.admin-body:has(#dashboard:not(.hidden)) #calculatorPanel .business-calculator-card {
  min-width: 0 !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) #calculatorPanel .business-row {
  grid-template-columns: minmax(70px, 1fr) repeat(2, minmax(30px, 38px)) repeat(2, minmax(50px, 60px)) !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) #calculatorPanel .business-row-head {
  font-size: 9.5px !important;
}

.admin-body:has(#dashboard:not(.hidden)) #calculatorPanel .business-row strong {
  font-size: 11.5px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) #calculatorPanel .business-row input {
  min-height: 28px !important;
  padding: 4px 5px !important;
  font-size: 11.5px !important;
}

/* Admin rustlaag 2026-07-29: een vaste, leesbare basis over alle menu-pagina's. */
.admin-body:has(#dashboard:not(.hidden)) {
  --admin-sidebar-width: 244px;
  --admin-topbar-height: 62px;
  --admin-footer-height: 48px;
  --admin-page-bg: #071827;
  --admin-panel-bg: #0d2438;
  --admin-panel-soft: #102b42;
  --admin-border: rgba(185, 205, 225, 0.16);
  --admin-text: #f8fafc;
  --admin-muted: #c6d3df;
  --admin-accent: #ff8a00;
  background: var(--admin-page-bg) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-shell {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: var(--admin-topbar-height) 0 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard {
  display: grid !important;
  grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: calc(100vh - var(--admin-topbar-height)) !important;
  height: calc(100vh - var(--admin-topbar-height)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--admin-page-bg) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar {
  height: var(--admin-topbar-height) !important;
  min-height: var(--admin-topbar-height) !important;
  padding: 8px 16px !important;
  background: #061525 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar .brand {
  flex: 0 0 var(--admin-sidebar-width) !important;
  width: var(--admin-sidebar-width) !important;
  max-width: var(--admin-sidebar-width) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar .brand img {
  width: calc(var(--admin-sidebar-width) - 24px) !important;
  max-width: calc(var(--admin-sidebar-width) - 24px) !important;
  height: 44px !important;
  object-fit: contain !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
  position: fixed !important;
  inset: var(--admin-topbar-height) auto 0 0 !important;
  z-index: 1200 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
  width: var(--admin-sidebar-width) !important;
  min-width: var(--admin-sidebar-width) !important;
  height: calc(100vh - var(--admin-topbar-height)) !important;
  min-height: 0 !important;
  padding: 10px !important;
  gap: 8px !important;
  overflow: hidden !important;
  border-right: 1px solid var(--admin-border) !important;
  background: #071827 !important;
  box-shadow: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs::before {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-block {
  min-width: 0 !important;
  gap: 5px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary,
.admin-body:has(#dashboard:not(.hidden)) .admin-nav-communication {
  min-height: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary::-webkit-scrollbar,
.admin-body:has(#dashboard:not(.hidden)) .admin-nav-communication::-webkit-scrollbar {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-caption {
  margin: 2px 2px 3px !important;
  color: #9fb2c5 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs :where(button:not(.portal-sidebar-logout), .sidebar-chat-compact, summary, .system-switch a) {
  min-height: 30px !important;
  max-height: 34px !important;
  padding: 6px 8px !important;
  border: 1px solid rgba(185, 205, 225, 0.12) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #e7eef6 !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs button.active:not(.portal-sidebar-logout) {
  border-color: rgba(255, 138, 0, 0.48) !important;
  background: rgba(255, 138, 0, 0.15) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--admin-accent) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .system-switch,
.admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme {
  padding: 7px !important;
  border: 1px solid rgba(185, 205, 225, 0.13) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .system-switch label,
.admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme span {
  color: #c6d3df !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs :where(select, input) {
  min-height: 30px !important;
  padding: 5px 7px !important;
  border-radius: 6px !important;
  background: #0d2438 !important;
  color: #f8fafc !important;
  border-color: rgba(185, 205, 225, 0.2) !important;
  font-size: 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom {
  align-self: end !important;
  gap: 7px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(185, 205, 225, 0.14) !important;
  background: #071827 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .portal-sidebar-logout {
  min-height: 32px !important;
  padding: 7px 9px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: calc(100vh - var(--admin-topbar-height)) !important;
  max-height: calc(100vh - var(--admin-topbar-height)) !important;
  margin: 0 !important;
  padding: 16px 18px calc(var(--admin-footer-height) + 16px) !important;
  overflow: auto !important;
  scrollbar-width: none !important;
  background: var(--admin-page-bg) !important;
  color: var(--admin-text) !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace)::-webkit-scrollbar {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab] > :where(.tab-panel, .workspace) {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="overview"] > [data-tab-panel="overview"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="assistant"] > [data-tab-panel="assistant"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="branches"] > [data-tab-panel="branches"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] > [data-tab-panel="intake"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="calculator"] > [data-tab-panel="calculator"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="finance"] > [data-tab-panel="finance"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="staff"] > [data-tab-panel="staff"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="professionals"] > [data-tab-panel="professionals"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="module-status"] > [data-tab-panel="module-status"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="contracts"] > [data-tab-panel="contracts"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="benchmarks"] > [data-tab-panel="benchmarks"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="market-monitor"] > [data-tab-panel="market-monitor"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="analytics"] > [data-tab-panel="analytics"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="communications"] > [data-tab-panel="communications"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="community"] > [data-tab-panel="community"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="data-quality"] > [data-tab-panel="data-quality"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="acceptance"] > [data-tab-panel="acceptance"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="security"] > [data-tab-panel="security"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="audit"] > [data-tab-panel="audit"],
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="settings"] > [data-tab-panel="settings"] {
  display: block !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.overview-grid, .metrics, .assistant-workspace, .branch-workspace, .finance-workspace, .staff-panel, .pro-list, .community-workspace, .benchmark-workspace, .market-monitor-workspace, .quality-workspace, .communication-workspace, .settings-shell, .security-workspace, .audit-list, .acceptance-panel, .contract-workspace, #calculatorPanel, #moduleStatusPanel) {
  max-width: 1680px !important;
  margin-inline: auto !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.panel-head, .dashboard-card, .summary-card, .settings-card, .quality-panel, .document-review-panel, .professional-admin-list, .quote-box, .notes, .ticket-timeline, .ticket-progress, .ticket-main, .profile-section, .finance-panel, .module-status-card, .market-country-panel, .market-compliance-panel) {
  border: 1px solid var(--admin-border) !important;
  border-radius: 8px !important;
  background: var(--admin-panel-bg) !important;
  color: var(--admin-text) !important;
  box-shadow: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.panel-head, .compact-head, .settings-card-head) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 11px 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.panel-head h1, .panel-head h2, .panel-head h3, .settings-card h3, .summary-card strong, .dashboard-card strong) {
  color: var(--admin-text) !important;
  line-height: 1.14 !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.panel-head p, .settings-help, .empty, small, .summary-card span, .dashboard-card span, .dashboard-card p) {
  color: var(--admin-muted) !important;
  line-height: 1.35 !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.dashboard-card, .summary-card, .settings-card, .quality-panel, .document-review-panel, .professional-admin-list, .module-status-card) {
  padding: 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(input, select, textarea) {
  min-height: 34px !important;
  max-width: 100% !important;
  border: 1px solid rgba(185, 205, 225, 0.22) !important;
  border-radius: 7px !important;
  background: #0b2032 !important;
  color: #f8fafc !important;
  font-size: 13px !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(button, .button) {
  min-height: 32px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(.form-grid, .settings-grid, .settings-form, .intake-form, .pro-form, .update-form, .quote-lines-form, .staff-form-grid) {
  gap: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) :where(label, .checkbox-line) {
  min-width: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-page-footer {
  left: var(--admin-sidebar-width) !important;
  right: 0 !important;
  min-height: var(--admin-footer-height) !important;
  padding: 8px 16px !important;
  border-radius: 0 !important;
  background: #061525 !important;
}

/* Aanvragen: geen circus, maar lijst -> opdracht -> proces. */
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"].workspace {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  height: calc(100vh - var(--admin-topbar-height)) !important;
  max-height: calc(100vh - var(--admin-topbar-height)) !important;
  overflow: hidden !important;
  background: var(--admin-page-bg) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  max-height: 178px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 8px !important;
  background: var(--admin-panel-bg) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue .panel-head {
  border: 0 !important;
  border-bottom: 1px solid rgba(185, 205, 225, 0.12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 8px 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 7px 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stat {
  min-height: 28px !important;
  padding: 5px 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
  display: grid !important;
  grid-auto-rows: 28px !important;
  gap: 3px !important;
  max-height: 145px !important;
  min-height: 0 !important;
  padding: 0 10px 9px !important;
  overflow: hidden auto !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list::-webkit-scrollbar {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item {
  display: grid !important;
  grid-template-columns: minmax(160px, 1.35fr) minmax(170px, 1fr) minmax(115px, 0.55fr) 84px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(185, 205, 225, 0.12) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item.active {
  border-color: rgba(255, 138, 0, 0.55) !important;
  background: rgba(255, 138, 0, 0.13) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item :where(.request-item-top, .request-item-meta, .request-item-target, .request-item-tags) {
  display: flex !important;
  min-width: 0 !important;
  gap: 5px !important;
  align-items: center !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item :where(strong, b, small, i) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item b,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item i {
  flex: 0 0 auto !important;
  max-width: 92px !important;
  padding: 3px 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffd7a6 !important;
  font-style: normal !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item .risk-line,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item > small:not(.risk-line) {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  min-height: 0 !important;
  height: 100% !important;
  max-height: calc(100vh - var(--admin-topbar-height) - 178px - var(--admin-footer-height) - 48px) !important;
  overflow: hidden auto !important;
  padding: 0 0 calc(var(--admin-footer-height) + 20px) !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail::-webkit-scrollbar {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-detail-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 12px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 10px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main > * {
  grid-column: span 6 !important;
  min-width: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main > :where(.detail-head, .ticket-regie-strip, .info-grid, .description, .edit-toolbar, .ticket-timeline, .notes) {
  grid-column: 1 / -1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main > :where(.update-form, .quote-box, .platform-contribution-panel, .payment-correction-panel, .dispute-panel, .planning-chat-panel, .dispatch-panel, .execution-monitor) {
  grid-column: span 6 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-regie-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-regie-strip article,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(.detail-head, .info-grid, .description, .quote-box, .notes, .ticket-timeline, .update-form, .dispute-panel, .planning-chat-panel, .dispatch-panel, .execution-monitor, .platform-contribution-panel, .payment-correction-panel) {
  border: 1px solid var(--admin-border) !important;
  border-radius: 8px !important;
  background: var(--admin-panel-bg) !important;
  padding: 10px !important;
  color: var(--admin-text) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress {
  order: 2 !important;
  position: static !important;
  display: grid !important;
  gap: 8px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px !important;
  overflow: visible !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 8px !important;
  background: var(--admin-panel-bg) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress ol {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress li {
  min-height: 48px !important;
  padding: 7px !important;
  border: 1px solid rgba(185, 205, 225, 0.13) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress li :where(strong, small) {
  line-height: 1.15 !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) {
  --admin-page-bg: #f3f6fa;
  --admin-panel-bg: #ffffff;
  --admin-panel-soft: #f8fafc;
  --admin-border: rgba(15, 23, 42, 0.12);
  --admin-text: #0f172a;
  --admin-muted: #475569;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .topbar,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-tabs,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-page-footer {
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-tabs :where(button:not(.portal-sidebar-logout), .sidebar-chat-compact, summary, .system-switch a),
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .system-switch,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) :where(input, select, textarea) {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-nav-caption,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .system-switch label,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme span {
  color: #475569 !important;
}

@media (max-width: 1200px) {
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main > *,
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main > :where(.update-form, .quote-box, .platform-contribution-panel, .payment-correction-panel, .dispute-panel, .planning-chat-panel, .dispatch-panel, .execution-monitor) {
    grid-column: 1 / -1 !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-regie-strip,
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress ol {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .admin-body:has(#dashboard:not(.hidden)) {
    --admin-sidebar-width: 0px;
  }

  .admin-body:has(#dashboard:not(.hidden)) #dashboard {
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: 42vh !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #dashboard > .tab-panel {
    grid-column: 1 !important;
    height: auto !important;
    max-height: none !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item :where(.request-item-target, .request-item-tags) {
    display: none !important;
  }
}
.parking-garage-panel {
  display: grid;
  gap: 12px;
}

.parking-summary-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.parking-garage-grid {
  display: grid;
  gap: 12px;
}

.parking-garage-card {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: var(--panel-bg, rgba(15, 23, 42, 0.72));
  padding: 12px;
  display: grid;
  gap: 10px;
}

.parking-garage-card-head,
.parking-floor-row,
.parking-incident-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(80px, auto));
  gap: 10px;
  align-items: center;
}

.parking-garage-card-head {
  grid-template-columns: minmax(180px, 1fr) auto;
}

.parking-kpi-row,
.parking-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.parking-kpi-row span,
.parking-detail-grid span {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.045);
  min-width: 0;
}

.parking-kpi-row b,
.parking-detail-grid strong,
.parking-garage-card strong {
  color: var(--text-strong, #f8fafc);
}

.parking-kpi-row small,
.parking-detail-grid small,
.parking-garage-card small {
  display: block;
  color: var(--muted, #94a3b8);
  font-size: 0.78rem;
  line-height: 1.35;
}

.parking-floor-list,
.parking-incident-list {
  display: grid;
  gap: 6px;
}

.parking-floor-row,
.parking-incident-row {
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  padding: 6px 0;
  font-size: 0.9rem;
}

.parking-subpanel {
  margin: 0;
}

body.light-theme .parking-garage-card,
body.theme-light .parking-garage-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
}

body.light-theme .parking-kpi-row span,
body.light-theme .parking-detail-grid span,
body.theme-light .parking-kpi-row span,
body.theme-light .parking-detail-grid span {
  background: #f8fafc;
}

body.light-theme .parking-kpi-row b,
body.light-theme .parking-detail-grid strong,
body.light-theme .parking-garage-card strong,
body.theme-light .parking-kpi-row b,
body.theme-light .parking-detail-grid strong,
body.theme-light .parking-garage-card strong {
  color: #0f172a;
}

@media (max-width: 900px) {
  .parking-summary-strip,
  .parking-kpi-row,
  .parking-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .parking-garage-card-head,
  .parking-floor-row,
  .parking-incident-row {
    grid-template-columns: 1fr;
  }
}

/* Definitieve admin-navigatie polish 2026-07-29.
   Houdt het menu rustig: logo op menubreedte, vaste onderknoppen,
   scrollbare hoofdknoppen zonder zichtbare scrollbar en footer buiten het menu. */
.admin-body:has(#dashboard:not(.hidden)) {
  --admin-sidebar-width: 244px;
  --admin-topbar-height: 62px;
  --admin-footer-height: 46px;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar {
  height: var(--admin-topbar-height) !important;
  padding: 0 18px 0 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar .brand {
  width: var(--admin-sidebar-width) !important;
  min-width: var(--admin-sidebar-width) !important;
  height: var(--admin-topbar-height) !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  justify-content: center !important;
  border-right: 1px solid rgba(148, 163, 184, 0.18) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar .brand img {
  width: 100% !important;
  max-width: 224px !important;
  height: 44px !important;
  object-fit: contain !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar .brand .admin-title {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
  display: grid !important;
  grid-template-rows: auto minmax(116px, 1fr) auto auto auto !important;
  width: var(--admin-sidebar-width) !important;
  min-width: var(--admin-sidebar-width) !important;
  height: calc(100vh - var(--admin-topbar-height)) !important;
  padding: 8px !important;
  gap: 6px !important;
  align-content: stretch !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  place-content: stretch !important;
  overflow: hidden !important;
  background: #071827 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-workspace,
.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary,
.admin-body:has(#dashboard:not(.hidden)) .admin-nav-secondary,
.admin-body:has(#dashboard:not(.hidden)) .admin-nav-communication,
.admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom {
  align-content: start !important;
  justify-content: stretch !important;
  place-content: start stretch !important;
  align-items: stretch !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 4px !important;
  margin: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-workspace {
  grid-row: 1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary {
  grid-row: 2 !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary::-webkit-scrollbar,
.admin-body:has(#dashboard:not(.hidden)) .screen-switcher-grid::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-secondary {
  grid-row: 3 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-communication {
  grid-row: 4 !important;
  overflow: visible !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom {
  grid-row: 5 !important;
  display: grid !important;
  gap: 6px !important;
  align-self: end !important;
  padding: 7px 0 0 !important;
  border-top: 1px solid rgba(185, 205, 225, 0.14) !important;
  background: #071827 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-nav-caption,
.admin-body:has(#dashboard:not(.hidden)) .system-switch label,
.admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme span {
  margin: 0 2px 2px !important;
  color: #aebdca !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

.admin-body:has(#dashboard:not(.hidden)) .system-switch,
.admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px !important;
  border: 1px solid rgba(185, 205, 225, 0.13) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .system-switch {
  grid-template-columns: 1fr !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs :where(button:not(.portal-sidebar-logout), .sidebar-chat-compact, summary) {
  min-height: 28px !important;
  max-height: 32px !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  line-height: 1.05 !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-tabs :where(select, input) {
  min-height: 28px !important;
  padding: 4px 24px 4px 8px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .screen-switcher-grid {
  max-height: 132px !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .sidebar-chat-compact {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 7px !important;
}

.admin-body:has(#dashboard:not(.hidden)) .sidebar-chat-compact b {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-body:has(#dashboard:not(.hidden)) .portal-sidebar-logout {
  min-height: 30px !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) {
  grid-column: 2 !important;
  height: calc(100vh - var(--admin-topbar-height)) !important;
  max-height: calc(100vh - var(--admin-topbar-height)) !important;
  padding-bottom: calc(var(--admin-footer-height) + 14px) !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-page-footer {
  position: fixed !important;
  left: var(--admin-sidebar-width) !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-height: var(--admin-footer-height) !important;
  max-width: none !important;
  padding: 8px 18px !important;
  border: 0 !important;
  border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 0 !important;
  background: #061525 !important;
  color: rgba(226, 232, 240, 0.86) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .admin-page-footer img {
  width: 78px !important;
  height: 23px !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-tabs,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom {
  background: #ffffff !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .system-switch,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-tabs :where(button:not(.portal-sidebar-logout), .sidebar-chat-compact, summary, select, input) {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-nav-caption,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .system-switch label,
html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-menu-theme span {
  color: #475569 !important;
}

html[data-theme="light"] .admin-body:has(#dashboard:not(.hidden)) .admin-page-footer {
  background: #ffffff !important;
  color: #475569 !important;
  border-top-color: rgba(15, 23, 42, 0.12) !important;
}

@media (max-width: 820px) {
  .admin-body:has(#dashboard:not(.hidden)) {
    --admin-sidebar-width: 100vw;
  }

  .admin-body:has(#dashboard:not(.hidden)) .topbar .brand {
    width: auto !important;
    min-width: 0 !important;
    max-width: 56vw !important;
    border-right: 0 !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
    width: 100% !important;
    height: auto !important;
    max-height: 44vh !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) .admin-page-footer {
    left: 0 !important;
    justify-content: center !important;
  }
}

/* Final page-specific guard: keep planning and warehouse add screens calm despite older broad form rules. */
.portal-active #professional-labels .warehouse-add-card .warehouse-object-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.portal-active #professional-labels .warehouse-add-card .warehouse-object-form .warehouse-form-group {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.portal-active #professional-labels .warehouse-add-card .warehouse-object-form .warehouse-form-group-primary,
.portal-active #professional-labels .warehouse-add-card .warehouse-object-form .warehouse-form-submit {
  grid-column: 1 / -1 !important;
}

.portal-active #professional-labels .warehouse-add-card .warehouse-object-form .warehouse-form-group-primary {
  grid-template-columns: minmax(240px, 1.2fr) minmax(220px, 1fr) minmax(160px, .7fr) minmax(160px, .7fr) !important;
}

.portal-active #professional-planning .professional-foldout-body {
  display: grid !important;
}

.onboarding-api-manager {
  display: grid;
  gap: 12px;
}

.onboarding-api-manager .settings-card-head > div {
  display: grid;
  gap: 3px;
}

.onboarding-api-manager .settings-card-head span {
  color: rgba(226, 232, 240, 0.72);
  font-size: .82rem;
  font-weight: 500;
}

html[data-theme="light"] .onboarding-api-manager .settings-card-head span {
  color: #475569;
}

.onboarding-api-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
}

.onboarding-api-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .34fr);
  gap: 12px;
  align-items: start;
}

.onboarding-api-source-list,
.onboarding-api-batches,
.onboarding-api-next {
  display: grid;
  gap: 8px;
}

.onboarding-api-source {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  overflow: clip;
}

html[data-theme="light"] .onboarding-api-source {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.08);
}

.onboarding-api-source > summary {
  display: grid;
  grid-template-columns: 32px minmax(170px, 1fr) minmax(120px, .5fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 8px 10px;
  cursor: pointer;
}

.onboarding-api-source > summary::-webkit-details-marker {
  display: none;
}

.onboarding-api-source .module-icon {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(249, 115, 22, 0.16);
  color: #fdba74;
}

.onboarding-api-source .module-icon svg {
  width: 17px;
  height: 17px;
}

html[data-theme="light"] .onboarding-api-source .module-icon {
  background: #ffedd5;
  color: #c2410c;
}

.onboarding-api-source > summary strong {
  color: #f8fafc;
  font-size: .91rem;
}

.onboarding-api-source > summary small {
  color: rgba(226, 232, 240, 0.68);
  font-size: .78rem;
}

.onboarding-api-source > summary b {
  justify-self: end;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.13);
  color: #e2e8f0;
  font-size: .74rem;
}

html[data-theme="light"] .onboarding-api-source > summary strong {
  color: #0f172a;
}

html[data-theme="light"] .onboarding-api-source > summary small {
  color: #64748b;
}

html[data-theme="light"] .onboarding-api-source > summary b {
  background: #e2e8f0;
  color: #334155;
}

.onboarding-api-source.is-live > summary b {
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
}

.onboarding-api-source.is-sandbox > summary b {
  background: rgba(59, 130, 246, 0.16);
  color: #93c5fd;
}

.onboarding-api-source.is-blocked > summary b {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
}

html[data-theme="light"] .onboarding-api-source.is-live > summary b {
  background: #dcfce7;
  color: #166534;
}

html[data-theme="light"] .onboarding-api-source.is-sandbox > summary b {
  background: #dbeafe;
  color: #1d4ed8;
}

html[data-theme="light"] .onboarding-api-source.is-blocked > summary b {
  background: #fee2e2;
  color: #991b1b;
}

.onboarding-api-source-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 9px;
  padding: 0 10px 10px;
}

.onboarding-api-source-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: rgba(226, 232, 240, 0.74);
  font-size: .76rem;
}

html[data-theme="light"] .onboarding-api-source-form label {
  color: #475569;
}

.onboarding-api-source-form label.wide,
.onboarding-api-source-meta {
  grid-column: 1 / -1;
}

.onboarding-api-source-form :where(input, select) {
  min-width: 0;
  width: 100%;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  font-size: .82rem;
}

.onboarding-api-source-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.onboarding-api-source-meta span,
.onboarding-api-next span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.24);
  color: rgba(226, 232, 240, 0.76);
  font-size: .75rem;
}

html[data-theme="light"] .onboarding-api-source-meta span,
html[data-theme="light"] .onboarding-api-next span {
  background: #e2e8f0;
  color: #334155;
}

.onboarding-api-side {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.28);
}

html[data-theme="light"] .onboarding-api-side {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.08);
}

.onboarding-api-batches article {
  display: grid;
  gap: 3px;
  padding: 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  font-size: .8rem;
}

html[data-theme="light"] .onboarding-api-batches article {
  background: #ffffff;
}

.onboarding-api-batches span,
.onboarding-api-batches small {
  color: rgba(226, 232, 240, 0.68);
}

html[data-theme="light"] .onboarding-api-batches span,
html[data-theme="light"] .onboarding-api-batches small {
  color: #64748b;
}

.company-onboarding-import-panel {
  margin: 12px 0;
}

.company-import-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.74);
  color: #e5eef8;
}

html[data-theme="light"] .company-import-card {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.company-import-form {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(220px, .9fr) minmax(0, 1.6fr);
  gap: 10px;
  align-items: end;
}

.company-import-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  font-size: .78rem;
  color: inherit;
}

.company-import-form label.wide {
  grid-column: 1 / -1;
}

.company-import-form :where(input, select, textarea) {
  width: 100%;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  font-size: .84rem;
}

.company-import-form textarea {
  resize: vertical;
  min-height: 108px;
  font-family: Consolas, "Liberation Mono", monospace;
  line-height: 1.35;
}

.company-import-actions,
.company-import-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.company-import-empty {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(125, 211, 252, 0.08);
  color: inherit;
}

.company-import-empty span {
  color: rgba(226, 232, 240, 0.74);
  font-size: .86rem;
}

html[data-theme="light"] .company-import-empty span {
  color: #475569;
}

.company-import-source-note,
.company-import-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.16);
  font-size: .82rem;
}

.company-import-source-note span,
.company-import-hints span {
  color: rgba(226, 232, 240, 0.78);
}

.company-import-source-note em {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.16);
  color: #fde68a;
  font-style: normal;
  font-weight: 700;
}

html[data-theme="light"] .company-import-source-note,
html[data-theme="light"] .company-import-hints {
  background: #eff6ff;
  border-color: #bfdbfe;
}

html[data-theme="light"] .company-import-source-note span,
html[data-theme="light"] .company-import-hints span {
  color: #334155;
}

html[data-theme="light"] .company-import-source-note em {
  background: #fef3c7;
  color: #92400e;
}

.company-import-log {
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  padding-top: 8px;
}

.company-import-log summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: inherit;
  font-weight: 700;
}

.company-import-preview.compact {
  max-height: 210px;
  margin-top: 8px;
}

.company-import-preview.compact .company-import-row {
  grid-template-columns: 52px 110px minmax(180px, 1fr) minmax(170px, 1fr) minmax(130px, auto);
}

.company-import-preview {
  display: grid;
  gap: 6px;
  max-height: 340px;
  overflow: auto;
  scrollbar-width: none;
}

.company-import-preview::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.company-import-row {
  display: grid;
  grid-template-columns: 32px 96px minmax(180px, 1fr) minmax(200px, 1.2fr) minmax(160px, .9fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  font-size: .82rem;
}

html[data-theme="light"] .company-import-row {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.08);
}

.company-import-row > span,
.company-import-row small,
.company-import-row em {
  color: rgba(226, 232, 240, 0.72);
  font-style: normal;
}

html[data-theme="light"] .company-import-row > span,
html[data-theme="light"] .company-import-row small,
html[data-theme="light"] .company-import-row em {
  color: #64748b;
}

.company-import-row.needs-review em {
  color: #fbbf24;
  font-weight: 700;
}

.company-import-row.is-ready em {
  color: #86efac;
  font-weight: 700;
}

html[data-theme="light"] .company-import-row.is-ready em {
  color: #15803d;
}

@media (max-width: 1180px) {
  .portal-active #professional-labels .warehouse-add-card .warehouse-object-form {
    grid-template-columns: 1fr !important;
  }

  .company-import-form,
  .company-import-row,
  .onboarding-api-kpis,
  .onboarding-api-layout,
  .onboarding-api-source > summary,
  .onboarding-api-source-form,
  .professional-filter-bar,
  .professional-admin-row > summary,
  .professional-admin-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .portal-active #professional-labels .warehouse-add-card .warehouse-object-form .warehouse-form-group,
  .portal-active #professional-labels .warehouse-add-card .warehouse-object-form .warehouse-form-group-primary {
    grid-template-columns: 1fr !important;
  }
}

/* Warehouse home: daily actions first, specialist administration folded away. */
.portal-active #professional-labels {
  gap: 10px !important;
}

.portal-active #professional-labels .warehouse-home-actions {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  gap: 8px;
  align-items: end;
}

.portal-active #professional-labels .warehouse-home-search {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.portal-active #professional-labels .warehouse-home-search span,
.portal-active #professional-labels .warehouse-quick-scan label span {
  color: var(--pf24-muted) !important;
  font-size: .74rem;
  font-weight: 700;
}

.portal-active #professional-labels .warehouse-home-actions .button {
  min-height: 40px;
  margin: 0;
}

.portal-active #professional-labels .warehouse-quick-scan {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) minmax(155px, 1fr) 82px minmax(145px, .9fr) auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 8px;
  background: rgba(15, 23, 42, .36);
}

.portal-active #professional-labels .warehouse-quick-scan label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.portal-active #professional-labels .warehouse-quick-scan :where(input, select, button) {
  min-height: 40px;
  margin: 0;
}

.portal-active #professional-labels :where(.warehouse-work-status, .warehouse-advanced-tools, .warehouse-location-tools, .warehouse-operational-tools) {
  border: 1px solid rgba(148, 163, 184, .17);
  border-radius: 8px;
  background: rgba(15, 23, 42, .28);
  overflow: clip;
}

.portal-active #professional-labels :where(.warehouse-work-status, .warehouse-advanced-tools, .warehouse-location-tools, .warehouse-operational-tools) > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 11px;
  color: #e8eef6 !important;
  cursor: pointer;
  font-weight: 700;
}

.portal-active #professional-labels :where(.warehouse-work-status, .warehouse-location-tools) > summary span {
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(148, 163, 184, .16);
  color: #e8eef6 !important;
  font-size: .74rem;
}

.portal-active #professional-labels :where(.warehouse-work-status, .warehouse-advanced-tools, .warehouse-location-tools, .warehouse-operational-tools)[open] > summary {
  border-bottom: 1px solid rgba(148, 163, 184, .14);
}

.portal-active #professional-labels .warehouse-advanced-tools .warehouse-enterprise-grid,
.portal-active #professional-labels .warehouse-location-tools .warehouse-control-grid,
.portal-active #professional-labels .warehouse-operational-tools .warehouse-ops-grid {
  padding: 10px;
}

.portal-active #professional-labels .warehouse-operational-tools .warehouse-replenishment-card {
  margin: 10px 10px 0;
}

.portal-active #professional-labels .warehouse-inventory-list {
  display: grid;
  gap: 7px;
}

.portal-active #professional-labels .warehouse-inventory-list > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.portal-active #professional-labels .warehouse-inventory-list > header > div {
  display: grid;
  gap: 2px;
}

.portal-active #professional-labels .warehouse-inventory-list > header small {
  color: var(--pf24-muted) !important;
  font-size: .74rem;
}

.portal-active #professional-labels .inventory-list-row {
  display: grid !important;
  grid-template-columns: minmax(190px, 1.6fr) minmax(110px, .7fr) minmax(95px, .55fr) auto auto !important;
  gap: 9px !important;
  align-items: center;
  min-height: 54px;
  padding: 8px 10px !important;
}

.portal-active #professional-labels .inventory-list-main,
.portal-active #professional-labels .inventory-list-stock {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.portal-active #professional-labels .inventory-list-main :where(strong, small) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-active #professional-labels .inventory-list-stock {
  text-align: right;
}

.portal-active #professional-labels .inventory-list-stock strong {
  font-size: 1rem;
}

.portal-active #professional-labels .inventory-row-more {
  position: relative;
}

.portal-active #professional-labels .inventory-row-more > summary {
  display: grid;
  place-items: center;
  min-width: 54px;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 6px;
  color: #e8eef6 !important;
  cursor: pointer;
  list-style: none;
  font-size: .75rem;
}

.portal-active #professional-labels .inventory-row-more > summary::-webkit-details-marker {
  display: none;
}

.portal-active #professional-labels .inventory-row-more > div {
  grid-column: 1 / -1;
  padding-top: 8px;
}

.portal-active #professional-labels .inventory-row-more[open] {
  grid-column: 1 / -1;
}

.portal-active #professional-labels .inventory-row-more p {
  margin: 0 0 7px;
  color: var(--pf24-muted) !important;
  font-size: .76rem;
}

.portal-active #professional-labels .warehouse-camera-panel {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 1500;
  width: min(620px, calc(100vw - 24px));
  transform: translate(-50%, -50%);
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .36);
  border-radius: 8px;
  background: #071426;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}

.portal-active #professional-labels .warehouse-camera-panel video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: #000;
  object-fit: cover;
}

.portal-active #professional-labels .warehouse-camera-panel > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 9px 2px 0;
}

.portal-active #professional-labels .warehouse-camera-panel > div span {
  color: #aebed0 !important;
  font-size: .76rem;
}

.portal-active #professional-labels .warehouse-camera-panel .button {
  grid-column: 2;
  grid-row: 1 / 3;
}

html[data-theme="light"] .portal-active #professional-labels :where(.warehouse-quick-scan, .warehouse-work-status, .warehouse-advanced-tools, .warehouse-location-tools, .warehouse-operational-tools) {
  border-color: #cbd5e1;
  background: #f8fafc;
}

html[data-theme="light"] .portal-active #professional-labels :where(.warehouse-work-status, .warehouse-advanced-tools, .warehouse-location-tools, .warehouse-operational-tools) > summary,
html[data-theme="light"] .portal-active #professional-labels .inventory-row-more > summary {
  color: #10243a !important;
}

html[data-theme="light"] .portal-active #professional-labels :where(.warehouse-work-status, .warehouse-location-tools) > summary span {
  background: #e2e8f0;
  color: #10243a !important;
}

html[data-theme="light"] .portal-active #professional-labels :where(input, select, textarea) {
  border-color: #b8c6d5 !important;
  background: #f7fafc !important;
  color: #10243a !important;
}

html[data-theme="light"] .portal-active #professional-labels :where(input, textarea)::placeholder {
  color: #66788b !important;
  opacity: 1;
}

html[data-theme="light"] .portal-active #professional-labels .button.secondary {
  border-color: #c96a00 !important;
  background: #fff4e8 !important;
  color: #743800 !important;
}

html[data-theme="light"] .portal-active #professional-labels .button:disabled {
  border-color: #cbd5e1 !important;
  background: #eef2f6 !important;
  color: #64748b !important;
  opacity: 1;
}

html[data-theme="light"] .portal-active #professional-labels .inventory-list-row {
  border-color: #cbd5e1 !important;
  background: #f7fafc !important;
  color: #10243a !important;
  box-shadow: 0 2px 7px rgba(15, 23, 42, .05);
}

html[data-theme="light"] .portal-active #professional-labels .inventory-list-row:hover {
  border-color: #d97706 !important;
  background: #fffaf5 !important;
}

html[data-theme="light"] .portal-active #professional-labels .inventory-list-row :where(strong, small) {
  color: #10243a !important;
}

html[data-theme="light"] .portal-active #professional-labels .inventory-list-row small {
  color: #5b6d80 !important;
}

html[data-theme="light"] .portal-active #professional-labels .inventory-list-row code {
  border-color: #f0c28f !important;
  background: #fff4e8 !important;
  color: #743800 !important;
}

html[data-theme="light"] .portal-active #professional-labels .warehouse-add-card,
html[data-theme="light"] .portal-active #professional-labels .warehouse-add-card > summary {
  border-color: #cbd5e1 !important;
  background: #eef4f8 !important;
  color: #10243a !important;
}

html[data-theme="light"] .portal-active #professional-labels .warehouse-add-card > summary :where(span, small) {
  color: #10243a !important;
}

@media (max-width: 980px) {
  .portal-active #professional-labels .warehouse-quick-scan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-active #professional-labels .warehouse-quick-scan .button {
    grid-column: 1 / -1;
  }

  .portal-active #professional-labels .inventory-list-row {
    grid-template-columns: minmax(170px, 1fr) minmax(90px, auto) auto auto !important;
  }

  .portal-active #professional-labels .inventory-list-stock {
    display: none;
  }
}

@media (max-width: 620px) {
  .portal-active #professional-labels .warehouse-home-actions,
  .portal-active #professional-labels .warehouse-quick-scan {
    grid-template-columns: 1fr;
  }

  .portal-active #professional-labels .warehouse-home-actions .button,
  .portal-active #professional-labels .warehouse-quick-scan .button {
    grid-column: auto;
    width: 100%;
  }

  .portal-active #professional-labels .team-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .portal-active #professional-labels .inventory-list-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .portal-active #professional-labels .inventory-list-row > code {
    grid-column: 1;
  }

  .portal-active #professional-labels .inventory-list-row > .status-pill {
    grid-column: 2;
    grid-row: 1;
  }

  .portal-active #professional-labels .inventory-row-more {
    grid-column: 2;
    grid-row: 2;
  }

  .portal-active #professional-labels .warehouse-inventory-list > header {
    align-items: stretch;
    flex-direction: column;
  }

  .portal-active #professional-labels .warehouse-camera-panel > div {
    grid-template-columns: 1fr;
  }

  .portal-active #professional-labels .warehouse-camera-panel .button {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Barcodecamera final override */
.portal-active #professional-labels .warehouse-camera-panel {
  width: min(440px, calc(100vw - 24px));
  padding: 9px;
}

.portal-active #professional-labels .warehouse-camera-panel .warehouse-camera-preview {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  border-radius: 6px;
  background: #000;
}

.portal-active #professional-labels .warehouse-camera-panel .warehouse-camera-preview video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  object-fit: cover;
}

.portal-active #professional-labels .warehouse-camera-preview > span {
  position: absolute;
  inset: 34% 8%;
  border: 2px solid #ff8200;
  border-radius: 6px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .2);
  pointer-events: none;
}

.portal-active #professional-labels .warehouse-camera-panel .warehouse-camera-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 8px;
  align-items: center;
  padding: 9px 2px 0;
}

.portal-active #professional-labels .warehouse-camera-controls > strong {
  grid-column: 1 / -1;
  color: #f8fbff !important;
}

.portal-active #professional-labels .warehouse-camera-controls > span {
  color: #aebed0 !important;
  font-size: .76rem;
}

.portal-active #professional-labels .warehouse-camera-panel .warehouse-camera-controls .button {
  grid-column: auto;
  grid-row: auto;
}

.portal-active #professional-labels .warehouse-camera-file {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.portal-active #professional-labels .warehouse-camera-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.portal-active #professional-labels .warehouse-scan-message {
  grid-column: 1 / -1;
  min-height: 22px;
  margin: 0;
  padding: 5px 7px;
  border-radius: 5px;
  color: var(--pf24-muted) !important;
  font-size: .75rem;
}

.portal-active #professional-labels .warehouse-scan-message[data-tone="success"] {
  background: rgba(34, 197, 94, .12);
  color: #86efac !important;
}

.portal-active #professional-labels .warehouse-scan-message[data-tone="warning"] {
  background: rgba(245, 158, 11, .12);
  color: #fcd34d !important;
}

html[data-theme="light"] .portal-active #professional-labels .warehouse-scan-message[data-tone="success"] {
  background: #e8f7ee;
  color: #12653a !important;
}

html[data-theme="light"] .portal-active #professional-labels .warehouse-scan-message[data-tone="warning"] {
  background: #fff4df;
  color: #7a4100 !important;
}

@media (max-width: 520px) {
  .portal-active #professional-labels .warehouse-camera-panel .warehouse-camera-controls {
    grid-template-columns: 1fr 1fr;
  }

  .portal-active #professional-labels .warehouse-camera-controls > :where(strong, span) {
    grid-column: 1 / -1;
  }
}

/* Aanvragen definitief compact: werkvoorraad links, dossier rechts, archief pas op keuze. */
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
  grid-template-columns: minmax(360px, 0.34fr) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 12px !important;
  min-height: 0 !important;
  height: calc(100vh - var(--admin-topbar-height) - var(--admin-footer-height) - 10px) !important;
  max-height: calc(100vh - var(--admin-topbar-height) - var(--admin-footer-height) - 10px) !important;
  padding: 10px 12px 12px !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 8px !important;
  background: var(--admin-panel-bg) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue .panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.7fr) !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue .panel-head h2 {
  margin: 0 !important;
  font-size: 18px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 0 10px 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-account-filter-chip,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-note {
  grid-column: 1 / -1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-note {
  display: block !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  background: rgba(148, 163, 184, 0.10) !important;
  color: var(--admin-muted) !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
  display: grid !important;
  align-content: start !important;
  grid-auto-rows: auto !important;
  gap: 6px !important;
  max-height: none !important;
  padding: 0 10px 12px !important;
  overflow: hidden auto !important;
  scrollbar-width: thin !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list::-webkit-scrollbar {
  display: initial !important;
  width: 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "title status"
    "meta meta"
    "target tags" !important;
  min-height: 72px !important;
  max-height: none !important;
  gap: 6px 8px !important;
  padding: 9px !important;
  text-align: left !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top {
  grid-area: title !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top b {
  grid-area: status !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-meta {
  grid-area: meta !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-target {
  grid-area: target !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-tags {
  grid-area: tags !important;
  justify-content: end !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item :where(strong, b, small, i) {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top strong {
  font-size: 13px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  overflow: hidden auto !important;
  padding: 10px 10px calc(var(--admin-footer-height) + 20px) !important;
  scrollbar-width: thin !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-detail-layout {
  gap: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main {
  gap: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-progress ol {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}

@media (max-width: 1180px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: minmax(300px, 0.38fr) minmax(0, 1fr) !important;
  }
}

@media (max-width: 860px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
    max-height: 52vh !important;
  }
}

/* Intake definitief compact: eerst klant herkennen, dan melding invullen, rechts controleren. */
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] > [data-tab-panel="intake"] {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 10px !important;
  height: calc(100vh - var(--admin-topbar-height) - var(--admin-footer-height) - 10px) !important;
  max-height: calc(100vh - var(--admin-topbar-height) - var(--admin-footer-height) - 10px) !important;
  padding: 10px 12px 12px !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-head {
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-head p {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .guided-intake-form {
  display: grid !important;
  grid-template-columns: minmax(270px, 0.8fr) minmax(360px, 1.2fr) minmax(300px, 0.9fr) !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "contact request assistant"
    "customer request preview"
    "location request preview"
    "submit submit submit" !important;
  gap: 10px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-contact { grid-area: contact !important; }
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-customer { grid-area: customer !important; }
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-location { grid-area: location !important; }
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request { grid-area: request !important; }
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-assistant { grid-area: assistant !important; }
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-preview { grid-area: preview !important; }
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-submit-row { grid-area: submit !important; }

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card,
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-submit-row {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 10px !important;
  border-color: var(--admin-border) !important;
  border-radius: 8px !important;
  background: var(--admin-panel-bg) !important;
  color: var(--admin-text) !important;
  overflow: hidden auto !important;
  scrollbar-width: thin !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card::-webkit-scrollbar {
  width: 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card > strong {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 26px !important;
  color: #ff8200 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card > strong::before {
  display: inline-grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: rgba(255, 130, 0, 0.16) !important;
  color: #ff9d32 !important;
  font-size: 12px !important;
  content: "•" !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card label,
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card .wide,
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card .form-message {
  color: var(--admin-muted) !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card input,
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card select,
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card textarea {
  min-height: 36px !important;
  margin-top: 4px !important;
  padding: 8px 9px !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  border-radius: 6px !important;
  background: var(--admin-panel-soft, rgba(255, 255, 255, 0.06)) !important;
  color: var(--admin-text) !important;
  font-size: 12px !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-content: start !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request .admin-service-picker,
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request label:has(textarea),
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request > strong {
  grid-column: 1 / -1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request textarea {
  min-height: 138px !important;
  resize: vertical !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-preview {
  align-content: start !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .admin-intake-preview {
  display: grid !important;
  gap: 8px !important;
  min-height: 160px !important;
  padding: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 7px !important;
  background: var(--admin-panel-soft, rgba(255, 255, 255, 0.05)) !important;
  color: var(--admin-text) !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-customer-suggestions,
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .smart-intake {
  border-color: rgba(148, 163, 184, 0.2) !important;
  border-radius: 7px !important;
  background: var(--admin-panel-soft, rgba(255, 255, 255, 0.05)) !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-submit-row {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  overflow: visible !important;
}

@media (max-width: 1220px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .guided-intake-form {
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr) !important;
    grid-template-areas:
      "contact request"
      "customer request"
      "location request"
      "assistant preview"
      "submit submit" !important;
    overflow: hidden auto !important;
  }
}

@media (max-width: 860px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] > [data-tab-panel="intake"] {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .guided-intake-form {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "contact"
      "customer"
      "location"
      "request"
      "assistant"
      "preview"
      "submit" !important;
    overflow: visible !important;
  }
}

.portal-active .individual-request-workspace .request-core-grid,
.portal-active .individual-request-workspace #customerRequestForm {
  grid-template-columns: minmax(0, 1fr) !important;
}

.portal-active .individual-request-workspace .request-core-card {
  max-width: 780px;
}

.portal-active .individual-request-workspace .request-title-field input {
  min-height: 48px;
  font-size: 1rem;
}

/* Final form density guard: admin work forms must stay calm, compact and readable. */
body.admin-body:has(#dashboard:not(.hidden)) {
  --pf24-form-font: 12px;
  --pf24-form-label: 11px;
  --pf24-form-title: 13px;
  --pf24-form-control-height: 34px;
}

body.admin-body:has(#dashboard:not(.hidden)) :where(.request-form, .update-form, .settings-form, .intake-form, .pro-form, .staff-form-grid, .quote-lines-form) {
  font-size: var(--pf24-form-font) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) :where(.request-form, .update-form, .settings-form, .intake-form, .pro-form, .staff-form-grid, .quote-lines-form) :where(label, legend, .form-message, small, span, p) {
  font-size: var(--pf24-form-label) !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) :where(.request-form, .update-form, .settings-form, .intake-form, .pro-form, .staff-form-grid, .quote-lines-form) :where(strong, h3, h4) {
  font-size: var(--pf24-form-title) !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) :where(.request-form, .update-form, .settings-form, .intake-form, .pro-form, .staff-form-grid, .quote-lines-form) :where(input, select, textarea) {
  min-height: var(--pf24-form-control-height) !important;
  padding: 7px 9px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] > [data-tab-panel="intake"] {
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 8px 10px 10px !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-head {
  min-height: 0 !important;
  padding: 8px 10px !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-head h2 {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .admin-intake-safety.hidden {
  display: none !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .guided-intake-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr) !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "contact assistant"
    "customer preview"
    "location preview"
    "request preview"
    "submit submit" !important;
  gap: 8px !important;
  overflow: hidden !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-submit-row {
  display: grid !important;
  gap: 7px !important;
  align-content: start !important;
  padding: 9px !important;
  border-radius: 9px !important;
  overflow: visible !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-customer,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-location {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-contact,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-assistant,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-preview {
  grid-template-columns: 1fr !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card > strong {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  padding: 0 0 2px !important;
  color: var(--admin-text, #102033) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card > strong::before {
  display: none !important;
  content: none !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card label {
  display: grid !important;
  gap: 3px !important;
  margin: 0 !important;
  min-width: 0 !important;
  color: var(--admin-muted, #5b6778) !important;
  font-weight: 500 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card :where(.wide, .form-message, .admin-service-picker, label:has(textarea), .intake-customer-suggestions, .service-search-selected) {
  grid-column: 1 / -1 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request textarea {
  min-height: 92px !important;
  max-height: 150px !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-customer-suggestions,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .smart-intake,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .admin-intake-preview {
  padding: 8px !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-submit-row {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-submit-row .button {
  min-height: 36px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}

@media (max-width: 1180px) {
  body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .guided-intake-form {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "contact"
      "customer"
      "location"
      "request"
      "assistant"
      "preview"
      "submit" !important;
    overflow: auto !important;
  }
}

.portal-active .individual-request-workspace textarea[name="description"] {
  min-height: 150px;
}

.portal-active .individual-request-workspace .request-core-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.portal-active .individual-request-workspace .request-core-grid .wide,
.portal-active .individual-request-workspace .request-photo-uploader {
  grid-column: 1 / -1;
}

.portal-active .individual-request-workspace :where(input, textarea) {
  font-size: 15px;
}

.portal-active .clarification-panel {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: var(--panel-soft, rgba(255, 255, 255, 0.06));
}

.portal-active .clarification-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  cursor: pointer;
  color: var(--text-strong, inherit);
  font-weight: 700;
}

.portal-active .clarification-panel summary small {
  color: var(--muted, #64748b);
  font-weight: 600;
}

.portal-active .clarification-panel form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.portal-active .clarification-answer-list {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
}

.portal-active .clarification-answer-list p {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 7px;
  background: var(--panel, rgba(255, 255, 255, 0.72));
}

.portal-active .clarification-answer-list strong {
  font-size: 12px;
}

.portal-active .clarification-answer-list span {
  color: var(--text, #102033);
  font-size: 12px;
}

.portal-active .sales-document-line-head,
.portal-active .sales-document-line {
  grid-template-columns: minmax(170px, 1.4fr) minmax(70px, .45fr) minmax(100px, .6fr) minmax(92px, .55fr) minmax(150px, .8fr);
}

.portal-active .sales-document-gaccount-fields {
  display: grid;
  grid-template-columns: minmax(52px, .45fr) minmax(92px, 1fr);
  gap: 6px;
}

.portal-active .sales-document-gaccount-fields input {
  min-width: 0;
}

.portal-active .customer-clarification-panel {
  display: grid;
  gap: 10px;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.08);
}

.portal-active .customer-clarification-panel .compact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.login-entry .portal-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

body.login-entry .portal-nav.login-entry-nav {
  justify-content: end;
  min-width: 0;
}

body.login-entry .login-entry-links {
  display: flex;
  justify-content: end;
}

body.login-entry .login-entry-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
  border-radius: 8px;
  background: var(--panel-soft, rgba(255, 255, 255, 0.08));
}

body.login-entry .login-entry-links svg {
  width: 18px;
  height: 18px;
}

body.login-entry .login-scan-standby,
body.login-entry .login-scan-standby[hidden] {
  display: none !important;
}

body.login-entry .login-entry-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}

body.login-entry .login-entry-actions .button,
body.login-entry .login-entry-actions .quiet-link {
  width: 100%;
  justify-content: center;
  text-align: center;
}

@media (max-width: 640px) {
  body.login-entry .portal-topbar {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.login-entry .portal-nav.login-entry-nav,
  body.login-entry .login-entry-links {
    justify-content: stretch;
  }

  body.login-entry .login-entry-links a {
    width: 100%;
    justify-content: center;
  }
}

.workflow-settings-panel .workflow-settings-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
  border-radius: 8px;
  background: var(--panel-soft, rgba(255, 255, 255, 0.08));
}

.workflow-settings-intro strong {
  display: block;
  color: var(--text-strong, inherit);
  font-size: 1rem;
}

.workflow-settings-intro span {
  color: var(--muted, #64748b);
}

.workflow-settings-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.workflow-settings-kpis span {
  display: grid;
  min-width: 72px;
  padding: 8px 10px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
  border-radius: 8px;
  background: var(--panel, #fff);
}

.workflow-settings-kpis b {
  color: var(--accent, #f58220);
  font-size: 1.05rem;
  line-height: 1;
}

.workflow-settings-kpis small {
  color: var(--muted, #64748b);
  font-weight: 800;
}

.workflow-settings-grid textarea {
  min-height: 88px;
}

.workflow-settings-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.module-workflow-settings {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border, rgba(148, 163, 184, 0.25));
}

.module-workflow-settings h4 {
  margin: 0;
  color: var(--text-strong, inherit);
  font-size: 1rem;
}

.module-workflow-settings > p {
  margin: 0;
  color: var(--muted, #64748b);
}

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

.module-workflow-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
  border-radius: 8px;
  background: var(--panel-soft, rgba(255, 255, 255, 0.06));
}

.module-workflow-card header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.module-workflow-card header i,
.module-workflow-card header svg {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 999px;
  background: rgba(245, 130, 32, 0.14);
  color: var(--accent, #f58220);
}

.module-workflow-card header strong,
.module-workflow-card header small {
  display: block;
}

.module-workflow-card header small {
  color: var(--muted, #64748b);
  font-weight: 700;
}

.module-workflow-card textarea {
  min-height: 76px;
}

@media (max-width: 760px) {
  .workflow-settings-panel .workflow-settings-intro,
  .workflow-settings-options,
  .module-workflow-grid {
    grid-template-columns: 1fr;
  }

  .workflow-settings-kpis {
    justify-content: flex-start;
  }
}

/* Definitieve professional portal compactheid - 2026-08-08.
   Login.html laadt alleen styles.css, daarom staat deze vangrail hier. */
body.professional-portal-active.portal-active {
  background: var(--bg, #071827) !important;
}

body.professional-portal-active.portal-active .topbar {
  display: none !important;
}

body.professional-portal-active.portal-active .admin-shell {
  min-height: 100vh !important;
  padding: 0 !important;
}

body.professional-portal-active.portal-active #portalDashboard.dashboard {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 10px 14px 58px 214px !important;
  overflow-x: hidden !important;
}

body.professional-portal-active.portal-active #portalDashboard > .panel-head.customer-head {
  min-height: 54px !important;
  margin: 0 0 8px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
}

body.professional-portal-active.portal-active #portalDashboard > .panel-head.customer-head h1 {
  font-size: 22px !important;
  line-height: 1.05 !important;
}

body.professional-portal-active.portal-active #portalDashboard > .panel-head.customer-head p {
  margin-top: 3px !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
}

body.professional-portal-active.portal-active #portalDashboard > .professional-section-nav {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 40 !important;
  width: 198px !important;
  height: 100vh !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  padding: 8px !important;
  border: 0 !important;
  border-right: 1px solid rgba(184, 207, 230, 0.14) !important;
  border-radius: 0 !important;
  background: rgba(5, 15, 27, 0.98) !important;
  box-shadow: none !important;
  overflow-y: auto !important;
}

body.professional-portal-active.portal-active .professional-section-nav .portal-sidebar-brand {
  display: grid !important;
  gap: 4px !important;
  margin: 0 0 3px !important;
  padding: 6px !important;
  border: 1px solid rgba(255, 130, 0, 0.18) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

body.professional-portal-active.portal-active .professional-section-nav .portal-sidebar-brand img {
  width: 100% !important;
  height: 46px !important;
  max-height: 46px !important;
  object-fit: contain !important;
  padding: 4px !important;
  background: transparent !important;
}

body.professional-portal-active.portal-active .professional-section-nav .portal-sidebar-brand span {
  color: #061a33 !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

body.professional-portal-active.portal-active .professional-section-nav .portal-nav-links {
  display: grid !important;
  width: 100% !important;
  gap: 4px !important;
  overflow: visible !important;
}

body.professional-portal-active.portal-active .professional-section-nav .portal-nav-group {
  display: grid !important;
  gap: 4px !important;
}

body.professional-portal-active.portal-active .professional-section-nav .portal-nav-group-label {
  color: rgba(226, 236, 247, 0.62) !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

body.professional-portal-active.portal-active .professional-section-nav a {
  width: 100% !important;
  min-height: 31px !important;
  display: grid !important;
  grid-template-columns: 17px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 7px !important;
  border: 1px solid rgba(184, 207, 230, 0.14) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(247, 251, 255, 0.84) !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
}

body.professional-portal-active.portal-active .professional-section-nav a.active,
body.professional-portal-active.portal-active .professional-section-nav a[aria-current="page"] {
  border-color: rgba(255, 130, 0, 0.56) !important;
  background: rgba(255, 130, 0, 0.16) !important;
  color: #fff !important;
}

body.professional-portal-active.portal-active .professional-section-nav .portal-nav-icon,
body.professional-portal-active.portal-active .professional-section-nav .portal-nav-icon svg {
  width: 15px !important;
  height: 15px !important;
}

body.professional-portal-active.portal-active .professional-section-nav .portal-nav-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.professional-portal-active.portal-active .professional-section-nav .portal-nav-count {
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  font-size: 10px !important;
}

body.professional-portal-active.portal-active .professional-section-nav .portal-workscreen-actions,
body.professional-portal-active.portal-active .professional-section-nav .portal-app-download {
  margin-top: 3px !important;
  padding: 5px 0 0 !important;
}

body.professional-portal-active.portal-active .professional-section-nav .portal-app-download span,
body.professional-portal-active.portal-active .professional-section-nav .portal-app-download .button span,
body.professional-portal-active.portal-active .professional-section-nav .screen-switcher summary span {
  font-size: 9px !important;
  line-height: 1.1 !important;
}

body.professional-portal-active.portal-active .professional-section-nav .screen-switcher summary,
body.professional-portal-active.portal-active .professional-section-nav .portal-app-download .button,
body.professional-portal-active.portal-active .professional-section-nav .sidebar-chat-compact,
body.professional-portal-active.portal-active .professional-section-nav .portal-sidebar-logout {
  min-height: 30px !important;
  padding: 5px 7px !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
}

body.professional-portal-active.portal-active .professional-section-nav .portal-assistant-actions {
  display: grid !important;
  grid-template-columns: repeat(2, 36px) !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 2px 0 !important;
}

body.professional-portal-active.portal-active .professional-section-nav .portal-assistant-actions > button.voice-menu-icon-button {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
}

body.professional-portal-active.portal-active #portalDashboard > .professional-section:not(.portal-view-active),
body.professional-portal-active.portal-active #portalDashboard > .customer-section:not(.portal-view-active),
body.professional-portal-active.portal-active #portalDashboard > .portal-view-hidden {
  display: none !important;
}

body.professional-portal-active.portal-active .professional-section.portal-view-active {
  display: grid !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 1500px !important;
  min-width: 0 !important;
}

body.professional-portal-active.portal-active #professional-overview .readiness-panel {
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr) !important;
  gap: 7px !important;
  padding: 7px !important;
}

body.professional-portal-active.portal-active #professional-overview .readiness-status {
  gap: 3px !important;
  padding: 8px 10px !important;
}

body.professional-portal-active.portal-active #professional-overview .readiness-status strong {
  font-size: 15px !important;
}

body.professional-portal-active.portal-active #professional-overview .readiness-status span {
  font-size: 10.5px !important;
  line-height: 1.2 !important;
}

body.professional-portal-active.portal-active #professional-overview .readiness-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body.professional-portal-active.portal-active #professional-overview .readiness-step {
  min-height: 58px !important;
  gap: 2px !important;
  padding: 7px 8px !important;
}

body.professional-portal-active.portal-active #professional-overview :where(.professional-cockpit, .owner-comparison-kpis, .owner-organization-shortcuts) {
  gap: 7px !important;
}

body.professional-portal-active.portal-active #professional-overview :where(.owner-dashboard-toolbar, .owner-comparison-kpis article, .owner-organization-shortcuts a, .professional-regiecentrum, .professional-regie-item) {
  padding: 7px 9px !important;
  border-radius: 8px !important;
}

body.professional-portal-active.portal-active .portal-page-footer {
  position: fixed !important;
  left: 198px !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  z-index: 35 !important;
  min-height: 38px !important;
  padding: 5px 12px max(5px, env(safe-area-inset-bottom)) !important;
  justify-content: flex-end !important;
}

@media (max-width: 760px) {
  body.professional-portal-active.portal-active #portalDashboard.dashboard {
    padding: 74px 8px 58px !important;
  }

  body.professional-portal-active.portal-active #portalDashboard > .professional-section-nav {
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 66px !important;
    min-height: 66px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body.professional-portal-active.portal-active .professional-section-nav .portal-sidebar-brand,
  body.professional-portal-active.portal-active .professional-section-nav .portal-nav-group-label,
  body.professional-portal-active.portal-active .professional-section-nav .portal-workscreen-actions,
  body.professional-portal-active.portal-active .professional-section-nav .portal-app-download,
  body.professional-portal-active.portal-active .professional-section-nav .sidebar-chat-widget {
    display: none !important;
  }

  body.professional-portal-active.portal-active .professional-section-nav .portal-nav-links {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    width: auto !important;
  }

  body.professional-portal-active.portal-active .professional-section-nav .portal-nav-group {
    display: contents !important;
  }

  body.professional-portal-active.portal-active .professional-section-nav a {
    width: auto !important;
    min-width: 42px !important;
    grid-template-columns: 18px !important;
    justify-content: center !important;
  }

  body.professional-portal-active.portal-active .professional-section-nav .portal-nav-label,
  body.professional-portal-active.portal-active .professional-section-nav .portal-nav-count,
  body.professional-portal-active.portal-active .professional-section-nav .portal-sidebar-logout span {
    display: none !important;
  }

  body.professional-portal-active.portal-active #professional-overview .readiness-panel,
  body.professional-portal-active.portal-active #professional-overview .readiness-steps {
    grid-template-columns: 1fr !important;
  }

  body.professional-portal-active.portal-active .portal-page-footer {
    left: 0 !important;
  }
}

/* Normale app-schaal - geen kiosk/large-print typografie in de professional omgeving. */
body.professional-portal-active.portal-active #portalDashboard {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

body.professional-portal-active.portal-active #portalDashboard :where(h1) {
  font-size: 20px !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

body.professional-portal-active.portal-active #portalDashboard :where(h2) {
  font-size: 17px !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

body.professional-portal-active.portal-active #portalDashboard :where(h3) {
  font-size: 15px !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

body.professional-portal-active.portal-active #portalDashboard :where(h4, summary, label, legend) {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

body.professional-portal-active.portal-active #portalDashboard :where(p, span, small, li, td, th, input, select, textarea, button, a) {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body.professional-portal-active.portal-active #portalDashboard :where(strong, b) {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

body.professional-portal-active.portal-active #portalDashboard :where(.summary-card b, .professional-cockpit article b, .customer-cockpit article b, .metric-value, .stat-value) {
  font-size: 18px !important;
  line-height: 1.05 !important;
}

body.professional-portal-active.portal-active #portalDashboard :where(.badge, .status-pill, .pill, .workday-pill, .portal-nav-count) {
  min-height: 18px !important;
  padding: 3px 6px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}

body.professional-portal-active.portal-active #portalDashboard :where(.customer-request-card, .professional-foldout, .wallet-panel, .contact-request-panel, .summary-card, .professional-cockpit article, .customer-cockpit article, .planning-card, .module-card, .plan-choice) {
  padding: 10px !important;
  border-radius: 8px !important;
}

body.professional-portal-active.portal-active #portalDashboard :where(.panel-head, .compact-head) {
  min-height: 0 !important;
  padding: 8px 10px !important;
  gap: 8px !important;
}

body.professional-portal-active.portal-active #portalDashboard :where(.button, button, input, select, textarea) {
  min-height: 32px !important;
}

body.professional-portal-active.portal-active #professional-overview .readiness-status strong {
  font-size: 14px !important;
}

body.professional-portal-active.portal-active #professional-overview .readiness-step strong {
  font-size: 12px !important;
}

body.professional-portal-active.portal-active #professional-overview .readiness-step small,
body.professional-portal-active.portal-active #professional-overview .readiness-status span {
  font-size: 10.5px !important;
}

body.professional-portal-active.portal-active #professional-profile {
  gap: 9px !important;
}

body.professional-portal-active.portal-active #professional-profile .profile-command-center {
  display: grid;
  gap: 8px;
}

body.professional-portal-active.portal-active #professional-profile .profile-command-main {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, var(--accent-soft));
}

body.professional-portal-active.portal-active #professional-profile .profile-command-icon,
body.professional-portal-active.portal-active #professional-profile .profile-command-card > i,
body.professional-portal-active.portal-active #professional-profile .profile-option-card > i {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent-strong);
}

body.professional-portal-active.portal-active #professional-profile .profile-command-main strong {
  display: block;
}

body.professional-portal-active.portal-active #professional-profile .profile-command-main span {
  color: var(--muted);
}

body.professional-portal-active.portal-active #professional-profile .profile-command-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

body.professional-portal-active.portal-active #professional-profile .profile-command-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 3px 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  text-decoration: none;
  color: var(--text);
}

body.professional-portal-active.portal-active #professional-profile .profile-command-card b {
  grid-column: 2;
  width: fit-content;
  padding: 3px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-strong);
  font-size: 10px !important;
}

body.professional-portal-active.portal-active #professional-profile .profile-command-card small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.professional-portal-active.portal-active #professional-profile .profile-operating-model {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

body.professional-portal-active.portal-active #professional-profile .profile-operating-model > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

body.professional-portal-active.portal-active #professional-profile .profile-operating-model > header div {
  display: grid;
  gap: 2px;
}

body.professional-portal-active.portal-active #professional-profile .profile-operating-model > header span:not(.status-pill) {
  color: var(--muted);
}

body.professional-portal-active.portal-active #professional-profile .profile-operating-model > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

body.professional-portal-active.portal-active #professional-profile .profile-operating-model article {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 78%, var(--panel));
}

body.professional-portal-active.portal-active #professional-profile .profile-operating-model article b {
  color: var(--accent-strong);
}

body.professional-portal-active.portal-active #professional-profile .profile-operating-model article small {
  color: var(--muted);
  line-height: 1.25;
}

body.professional-portal-active.portal-active #professional-profile .profile-options-panel > summary {
  align-items: center;
}

body.professional-portal-active.portal-active #professional-profile .profile-edit-hint {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

body.professional-portal-active.portal-active #professional-profile .profile-edit-hint span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1px 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 84%, var(--panel));
}

body.professional-portal-active.portal-active #professional-profile .profile-edit-hint i,
body.professional-portal-active.portal-active #professional-profile .profile-edit-hint svg {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-strong);
}

body.professional-portal-active.portal-active #professional-profile .profile-edit-hint b {
  color: var(--text-strong);
  font-size: 12px;
}

body.professional-portal-active.portal-active #professional-profile .profile-edit-hint small {
  color: var(--muted);
  font-size: 11px;
}

body.professional-portal-active.portal-active #professional-profile .profile-option-group {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-soft) 68%, transparent);
}

body.professional-portal-active.portal-active #professional-profile .profile-option-group h4 {
  margin: 0;
  color: var(--text-strong);
  font-size: 13px;
}

body.professional-portal-active.portal-active #professional-profile .profile-option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

body.professional-portal-active.portal-active #professional-profile .profile-option-card {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 62px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

body.professional-portal-active.portal-active #professional-profile .profile-option-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body.professional-portal-active.portal-active #professional-profile .profile-option-card:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

body.professional-portal-active.portal-active #professional-profile .profile-option-card:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  transform: translateY(-1px);
}

body.professional-portal-active.portal-active #professional-profile .profile-option-card > i,
body.professional-portal-active.portal-active #professional-profile .profile-option-card > svg {
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-strong);
}

body.professional-portal-active.portal-active #professional-profile .profile-option-card strong,
body.professional-portal-active.portal-active #professional-profile .profile-option-card small {
  display: block;
}

body.professional-portal-active.portal-active #professional-profile .profile-option-card small {
  color: var(--muted);
}

body.professional-portal-active.portal-active #professional-profile .profile-option-card > b {
  align-self: start;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 35%, transparent);
  color: var(--muted);
  font-size: 10px;
}

body.professional-portal-active.portal-active #professional-profile .profile-option-card.is-selected > b,
body.professional-portal-active.portal-active #professional-profile .profile-option-card:has(input:checked) > b {
  background: var(--accent);
  color: var(--accent-contrast, #111827);
}

body.professional-portal-active.portal-active #professional-profile .module-workflow-choice-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.professional-portal-active.portal-active #professional-profile .module-workflow-choice-row label,
body.professional-portal-active.portal-active #professional-profile .module-workflow-options {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 8px;
  background: var(--panel);
}

body.professional-portal-active.portal-active #professional-profile .module-workflow-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.professional-portal-active.portal-active #professional-profile .module-workflow-options legend {
  grid-column: 1 / -1;
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 800;
}

body.professional-portal-active.portal-active #professional-profile .module-workflow-options .checkbox-line {
  min-height: 34px;
  margin: 0;
}

@media (max-width: 980px) {
  body.professional-portal-active.portal-active #professional-profile .profile-command-grid,
  body.professional-portal-active.portal-active #professional-profile .profile-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body.professional-portal-active.portal-active #professional-profile .profile-command-main {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  body.professional-portal-active.portal-active #professional-profile .profile-command-main .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  body.professional-portal-active.portal-active #professional-profile .profile-command-grid,
  body.professional-portal-active.portal-active #professional-profile .profile-edit-hint,
  body.professional-portal-active.portal-active #professional-profile .module-workflow-choice-row,
  body.professional-portal-active.portal-active #professional-profile .module-workflow-options,
  body.professional-portal-active.portal-active #professional-profile .profile-option-grid {
    grid-template-columns: 1fr;
  }
}

/* Admin aanvragen: detaildossier compact houden na selectie van een aanvraag. */
.admin-body [data-tab-panel="requests"] .ticket-detail-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

.admin-body [data-tab-panel="requests"] .ticket-main {
  display: grid !important;
  gap: 8px !important;
  min-width: 0;
}

.admin-body [data-tab-panel="requests"] .request-detail-foldout {
  overflow: hidden;
  border: 1px solid var(--admin-border, var(--border));
  border-radius: 8px;
  background: var(--admin-panel-bg, var(--panel));
  color: var(--admin-text, var(--text));
  box-shadow: none;
}

.admin-body [data-tab-panel="requests"] .request-detail-foldout > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.admin-body [data-tab-panel="requests"] .request-detail-foldout > summary::-webkit-details-marker {
  display: none;
}

.admin-body [data-tab-panel="requests"] .request-detail-foldout > summary span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.admin-body [data-tab-panel="requests"] .request-detail-foldout > summary strong {
  color: var(--admin-heading, var(--text-strong));
  font-size: 13px;
  line-height: 1.2;
}

.admin-body [data-tab-panel="requests"] .request-detail-foldout > summary small {
  overflow: hidden;
  color: var(--admin-muted, var(--muted));
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body [data-tab-panel="requests"] .request-detail-foldout > summary::after {
  content: "Openen";
  flex: 0 0 auto;
  min-width: 64px;
  padding: 5px 9px;
  border: 1px solid var(--admin-border, var(--border));
  border-radius: 999px;
  color: var(--admin-muted, var(--muted));
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.admin-body [data-tab-panel="requests"] .request-detail-foldout[open] > summary {
  border-bottom: 1px solid var(--admin-border, var(--border));
  background: var(--admin-panel-soft, var(--panel-soft));
}

.admin-body [data-tab-panel="requests"] .request-detail-foldout[open] > summary::after {
  content: "Sluiten";
  border-color: color-mix(in srgb, var(--accent) 50%, var(--admin-border, var(--border)));
  color: var(--accent-strong, var(--accent));
}

.admin-body [data-tab-panel="requests"] .request-detail-foldout-body {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.admin-body [data-tab-panel="requests"] .request-detail-foldout-body > section,
.admin-body [data-tab-panel="requests"] .request-detail-foldout-body > form,
.admin-body [data-tab-panel="requests"] .request-detail-foldout-body > div {
  max-width: 100%;
}

.admin-body [data-tab-panel="requests"] .ticket-progress-rail {
  position: static !important;
  max-height: none !important;
}

.admin-body [data-tab-panel="requests"] .request-action-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, .55fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--admin-border, var(--border));
  border-radius: 10px;
  background: var(--admin-panel-bg, var(--panel));
  color: var(--admin-text, var(--text));
}

.admin-body [data-tab-panel="requests"] .request-action-primary {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-body [data-tab-panel="requests"] .request-action-primary h2 {
  margin: 0;
  color: var(--admin-heading, var(--text-strong));
  font-size: 20px;
  line-height: 1.15;
}

.admin-body [data-tab-panel="requests"] .request-action-primary p:not(.eyebrow),
.admin-body [data-tab-panel="requests"] .request-action-next span,
.admin-body [data-tab-panel="requests"] .request-action-next small {
  margin: 0;
  color: var(--admin-muted, var(--muted));
  font-size: 12px;
  line-height: 1.35;
}

.admin-body [data-tab-panel="requests"] .request-action-status {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.admin-body [data-tab-panel="requests"] .request-action-status span {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: var(--admin-panel-soft, var(--panel-soft));
}

.admin-body [data-tab-panel="requests"] .request-action-status strong {
  color: var(--admin-muted, var(--muted));
  font-size: 10px;
  text-transform: uppercase;
}

.admin-body [data-tab-panel="requests"] .request-action-status small {
  color: var(--admin-heading, var(--text-strong));
  font-size: 12px;
  font-weight: 800;
}

.admin-body [data-tab-panel="requests"] .request-action-next,
.admin-body [data-tab-panel="requests"] .request-action-buttons {
  grid-column: 1 / -1;
}

.admin-body [data-tab-panel="requests"] .request-action-next {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, #ff8200) 10%, transparent);
}

.admin-body [data-tab-panel="requests"] .request-action-next strong {
  color: var(--admin-heading, var(--text-strong));
  font-size: 13px;
}

.admin-body [data-tab-panel="requests"] .request-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-body [data-tab-panel="requests"] .request-action-buttons .button {
  min-height: 34px;
  border-radius: 7px;
  font-size: 12px;
}

@media (max-width: 860px) {
  .admin-body [data-tab-panel="requests"] .request-action-summary {
    grid-template-columns: 1fr;
  }

  .portal-active .individual-request-workspace .request-core-grid {
    grid-template-columns: 1fr !important;
  }
}

html[data-theme="light"] .admin-body [data-tab-panel="requests"] .request-detail-foldout {
  background: #ffffff;
  border-color: #d9e3ea;
  color: #102033;
}

html[data-theme="light"] .admin-body [data-tab-panel="requests"] .request-detail-foldout[open] > summary {
  background: #f3f7fa;
}

html[data-theme="dark"] .admin-body [data-tab-panel="requests"] .request-detail-foldout {
  background: #0d2236;
  border-color: rgba(179, 205, 224, .22);
  color: #f5f8fb;
}

html[data-theme="dark"] .admin-body [data-tab-panel="requests"] .request-detail-foldout[open] > summary {
  background: rgba(255, 255, 255, .04);
}

/* Logo's: transparante asset gebruiken, geen witte tegel achter het merk. */
:where(.topbar .brand, .public-brand, .portal-sidebar-brand, .portal-page-footer, .app-powered-footer, .admin-page-footer) img[src*="profix24-logo-transparent"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

:where(.topbar .brand, .public-brand, .portal-sidebar-brand, .portal-page-footer, .app-powered-footer, .admin-page-footer) img[src*="profix24-logo-wordmark"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

:where(.topbar .brand, .public-brand, .portal-sidebar-brand, .portal-page-footer, .app-powered-footer, .admin-page-footer) img[src*="profix24-logo-transparent-light"] {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .42));
}

:where(.topbar .brand, .public-brand, .portal-sidebar-brand, .portal-page-footer, .app-powered-footer, .admin-page-footer) img[src*="profix24-logo-wordmark-light"] {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .42));
}

:where(.portal-page-footer, .app-powered-footer, .admin-page-footer) img[src*="profix24-logo-transparent"] {
  padding: 0 !important;
  object-fit: contain;
}

:where(.portal-page-footer, .app-powered-footer, .admin-page-footer) img[src*="profix24-logo-wordmark"] {
  padding: 0 !important;
  object-fit: contain;
}

html[data-theme="dark"] :where(.portal-page-footer, .app-powered-footer, .admin-page-footer) img[src*="profix24-logo-transparent"] {
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .22));
}

html[data-theme="dark"] :where(.portal-page-footer, .app-powered-footer, .admin-page-footer) img[src*="profix24-logo-wordmark"] {
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .22));
}

/* Definitieve app/admin menulaag: een consistente basis voor alle rollen en toekomstige opties. */
:where(.admin-body, .portal-active, .login-entry) {
  --pf24-nav-dark: #071522;
  --pf24-nav-surface: #0d2236;
  --pf24-nav-light: #eef4f8;
  --pf24-nav-light-text: #10243a;
  --pf24-nav-text: #f5f9fd;
  --pf24-nav-muted: #b8c8d8;
  --pf24-nav-accent: #ff8200;
}

html[data-theme="light"] :where(.admin-body, .portal-active, .login-entry) :where(.topbar, .portal-topbar) {
  background: #12314f !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

html[data-theme="dark"] :where(.admin-body, .portal-active, .login-entry) :where(.topbar, .portal-topbar) {
  background: #05111d !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

:where(.admin-body, .portal-active) :where(.admin-tabs, .professional-section-nav, .portal-section-nav) {
  background: var(--pf24-nav-dark) !important;
  color: var(--pf24-nav-text) !important;
  border-color: rgba(184, 207, 230, .16) !important;
}

html[data-theme="light"] :where(.admin-body, .portal-active) :where(.admin-tabs, .professional-section-nav, .portal-section-nav) {
  background: #e9f1f6 !important;
  color: var(--pf24-nav-light-text) !important;
  border-color: #cbd9e3 !important;
}

:where(.admin-body, .portal-active) :where(.admin-tabs, .professional-section-nav, .portal-section-nav) :where(button:not(.voice-menu-icon-button):not(.portal-sidebar-logout), a, summary, .sidebar-chat-compact, .portal-app-download .button) {
  min-height: 32px !important;
  padding: 6px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
}

:where(.admin-body, .portal-active) :where(.admin-tabs, .professional-section-nav, .portal-section-nav) :where(button:not(.voice-menu-icon-button):not(.portal-sidebar-logout):hover, a:hover, summary:hover, .sidebar-chat-compact:hover),
:where(.admin-body, .portal-active) :where(.admin-tabs, .professional-section-nav, .portal-section-nav) :where(button.active, a.active, a[aria-current="page"], details[open] > summary) {
  border-color: color-mix(in srgb, var(--pf24-nav-accent) 48%, transparent) !important;
  background: color-mix(in srgb, var(--pf24-nav-accent) 14%, transparent) !important;
  color: color-mix(in srgb, var(--pf24-nav-accent) 82%, currentColor) !important;
}

:where(.admin-body, .portal-active) :where(.admin-tabs, .professional-section-nav, .portal-section-nav) :where(svg, [data-lucide]) {
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2 !important;
}

:where(.admin-body, .portal-active) :where(.admin-tabs, .professional-section-nav, .portal-section-nav) :where(.portal-nav-label, button span, a span, summary span) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:where(.admin-body, .portal-active) :where(.screen-switcher-grid, .admin-more-flyout, .nav-dropdown-panel, .public-settings-panel, .style-image-panel) {
  z-index: 3000 !important;
  border: 1px solid var(--pf24-border, rgba(184, 207, 230, .24)) !important;
  border-radius: 8px !important;
  background: var(--pf24-surface, #ffffff) !important;
  color: var(--pf24-text, #10243a) !important;
  box-shadow: 0 16px 40px rgba(4, 17, 31, .22) !important;
}

html[data-theme="dark"] :where(.admin-body, .portal-active) :where(.screen-switcher-grid, .admin-more-flyout, .nav-dropdown-panel, .public-settings-panel, .style-image-panel) {
  background: #0d2236 !important;
  color: #f5f9fd !important;
  border-color: rgba(184, 207, 230, .22) !important;
}

:where(.admin-body, .portal-active) :where(.settings-card, .settings-summary article, .workflow-settings-panel, .company-branding-section, .module-workflow-settings) {
  border-radius: 8px !important;
}

:where(.admin-body, .portal-active) :where(.settings-card-head, .workflow-settings-intro, .company-branding-section > summary) {
  min-height: 40px !important;
  padding: 9px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

:where(.admin-body, .portal-active) :where(.settings-card-head svg, .workflow-settings-intro svg, .company-branding-section > summary svg) {
  width: 17px !important;
  height: 17px !important;
}

:where(.admin-body, .portal-active, .login-entry) :where(.topbar nav a, .portal-topbar nav a, .nav-links a, .portal-nav a) {
  min-height: 36px !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}

:where(.admin-body, .portal-active, .login-entry) :where(.topbar nav a:hover, .portal-topbar nav a:hover, .nav-links a:hover, .portal-nav a:hover) {
  background: rgba(255, 130, 0, .12) !important;
  color: #ff9a2f !important;
}

body.login-entry .portal-topbar .brand {
  max-width: min(240px, 52vw) !important;
  min-height: 48px !important;
}

body.login-entry .portal-topbar .brand img {
  max-width: 132px !important;
  height: 38px !important;
  object-fit: contain !important;
}

body.login-entry .portal-topbar .admin-title {
  font-size: 13px !important;
}

@media (max-width: 760px) {
  :where(.admin-body, .portal-active) :where(.admin-tabs, .professional-section-nav, .portal-section-nav) :where(button:not(.voice-menu-icon-button):not(.portal-sidebar-logout), a, summary, .sidebar-chat-compact) {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 7px !important;
  }
}

/* Definitieve login-opmaak: compact, uitgelijnd en leesbaar op laptop, tablet en telefoon. */
body.login-entry {
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 130, 0, 0.10), transparent 24%),
    linear-gradient(180deg, #f5f7fb 0%, #eaf0f7 100%) !important;
  color: #132238 !important;
}

body.login-entry .portal-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid #d8e2ee !important;
  box-shadow: 0 8px 22px rgba(19, 34, 56, 0.08) !important;
  backdrop-filter: blur(14px);
}

body.login-entry .brand img {
  height: 34px !important;
  width: auto !important;
  max-width: 150px !important;
  object-fit: contain !important;
}

body.login-entry .admin-title {
  color: #132238 !important;
  font-size: 0.94rem !important;
}

body.login-entry .login-entry-links a,
body.login-entry .nav-actions :where(button, select, a) {
  min-height: 36px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #132238 !important;
  box-shadow: none !important;
}

body.login-entry .admin-shell {
  min-height: calc(100vh - 110px) !important;
  display: grid !important;
  align-items: start !important;
  justify-items: center !important;
  padding: clamp(18px, 4vw, 42px) 14px 70px !important;
  background: transparent !important;
}

body.login-entry .portal-shell {
  width: min(940px, 100%) !important;
  margin: 0 auto !important;
}

body.login-entry .login-panel {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: grid !important;
  gap: 16px !important;
  padding: clamp(18px, 3vw, 26px) !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: #132238 !important;
  box-shadow: 0 20px 54px rgba(19, 34, 56, 0.13) !important;
}

body.login-entry .login-panel h1 {
  margin: 0 !important;
  color: #132238 !important;
  font-size: clamp(1.55rem, 2.4vw, 2rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

body.login-entry .login-panel :where(p, span, small, label, strong) {
  color: #40566f !important;
}

body.login-entry .login-panel :where(label, strong) {
  color: #132238 !important;
}

body.login-entry #portalCustomerForm {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: end !important;
}

body.login-entry #portalCustomerForm label {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  font-weight: 700 !important;
}

body.login-entry :where(input, select, textarea) {
  min-height: 42px !important;
  border: 1px solid #c8d5e3 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #132238 !important;
  box-shadow: none !important;
}

body.login-entry :where(input, select, textarea):focus {
  border-color: #ff8200 !important;
  outline: 3px solid rgba(255, 130, 0, 0.20) !important;
}

body.login-entry #portalCustomerForm .button.primary,
body.login-entry #portalCustomerForm .login-recovery-link {
  min-height: 42px !important;
  margin: 0 !important;
}

body.login-entry .button.primary {
  border: 1px solid #ff8200 !important;
  background: #ff8200 !important;
  color: #132238 !important;
  font-weight: 800 !important;
}

body.login-entry .button.secondary,
body.login-entry .quiet-link {
  border: 1px solid #d8e2ee !important;
  background: #ffffff !important;
  color: #214769 !important;
}

body.login-entry #portalCustomerForm .form-message {
  grid-column: 1 / -1 !important;
  min-height: 18px !important;
  margin: 0 !important;
}

body.login-entry .test-login-panel {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 10px !important;
  background: #f7fafc !important;
}

body.login-entry .test-login-panel > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #d8e2ee !important;
}

body.login-entry .test-login-panel > div:first-child strong {
  color: #132238 !important;
}

body.login-entry .test-login-panel > div:first-child span {
  max-width: 360px !important;
  color: #536b84 !important;
  text-align: right !important;
  font-size: 0.84rem !important;
}

body.login-entry .test-login-grid {
  max-height: min(42vh, 390px) !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 8px !important;
  padding-right: 4px !important;
  overflow: auto !important;
}

body.login-entry .test-login-controls {
  display: grid !important;
  gap: 10px !important;
}

body.login-entry .test-login-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

body.login-entry .test-login-filters button {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 7px 10px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #214769 !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

body.login-entry .test-login-filters button[aria-pressed="true"] {
  border-color: #ff8200 !important;
  background: #fff2df !important;
  color: #132238 !important;
}

body.login-entry .test-login-filters svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
}

body.login-entry .test-login-search {
  position: relative !important;
  margin: 0 !important;
}

body.login-entry .test-login-search svg {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  width: 17px !important;
  height: 17px !important;
  transform: translateY(-50%) !important;
  color: #607895 !important;
}

body.login-entry .test-login-search input {
  width: 100% !important;
  min-height: 40px !important;
  padding-left: 38px !important;
}

body.login-entry .test-login-choice {
  min-height: 74px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 3px 8px !important;
  align-items: center !important;
  padding: 10px 11px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #132238 !important;
  text-align: left !important;
  box-shadow: none !important;
}

body.login-entry .test-login-choice > svg {
  grid-row: 1 / span 3 !important;
  width: 22px !important;
  height: 22px !important;
  color: #ff8200 !important;
}

body.login-entry .test-login-choice:hover,
body.login-entry .test-login-choice:focus-visible {
  border-color: #ff8200 !important;
  background: #fff7ed !important;
  outline: none !important;
}

body.login-entry .test-login-choice strong {
  color: #132238 !important;
  font-size: 0.9rem !important;
  line-height: 1.14 !important;
  min-width: 0 !important;
}

body.login-entry .test-login-choice span {
  color: #40566f !important;
  font-size: 0.76rem !important;
  line-height: 1.15 !important;
  word-break: break-word !important;
  min-width: 0 !important;
}

body.login-entry .test-login-choice small {
  color: #6f8297 !important;
  font-size: 0.72rem !important;
  line-height: 1.15 !important;
  min-width: 0 !important;
}

body.login-entry .login-entry-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.login-entry .portal-page-footer {
  position: fixed !important;
  inset: auto 14px 10px auto !important;
  width: auto !important;
  min-height: 32px !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(216, 226, 238, 0.9) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #40566f !important;
  box-shadow: 0 8px 18px rgba(19, 34, 56, 0.10) !important;
}

body.login-entry .portal-page-footer img {
  height: 18px !important;
  width: auto !important;
}

html[data-theme="dark"] body.login-entry {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 130, 0, 0.14), transparent 25%),
    linear-gradient(180deg, #07182d 0%, #041120 100%) !important;
  color: #f7efe5 !important;
}

html[data-theme="dark"] body.login-entry .portal-topbar,
html[data-theme="dark"] body.login-entry .login-panel,
html[data-theme="dark"] body.login-entry .test-login-choice,
html[data-theme="dark"] body.login-entry .portal-page-footer,
html[data-theme="dark"] body.login-entry .login-entry-links a,
html[data-theme="dark"] body.login-entry .nav-actions :where(button, select, a) {
  border-color: rgba(184, 207, 230, 0.18) !important;
  background: rgba(8, 24, 43, 0.96) !important;
  color: #f7efe5 !important;
}

html[data-theme="dark"] body.login-entry .test-login-panel {
  border-color: rgba(184, 207, 230, 0.16) !important;
  background: rgba(5, 18, 34, 0.76) !important;
}

html[data-theme="dark"] body.login-entry :where(input, select, textarea) {
  border-color: rgba(184, 207, 230, 0.20) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] body.login-entry :where(h1, label, strong, .admin-title) {
  color: #ffffff !important;
}

html[data-theme="dark"] body.login-entry :where(p, span, small) {
  color: rgba(247, 239, 229, 0.76) !important;
}

html[data-theme="dark"] body.login-entry .test-login-choice:hover,
html[data-theme="dark"] body.login-entry .test-login-choice:focus-visible {
  background: rgba(255, 130, 0, 0.14) !important;
}

html[data-theme="dark"] body.login-entry .test-login-filters button,
html[data-theme="dark"] body.login-entry .test-login-search input {
  border-color: rgba(184, 207, 230, 0.18) !important;
  background: rgba(8, 24, 43, 0.96) !important;
  color: #f7efe5 !important;
}

html[data-theme="dark"] body.login-entry .test-login-filters button[aria-pressed="true"] {
  border-color: #ff8200 !important;
  background: rgba(255, 130, 0, 0.16) !important;
  color: #ffffff !important;
}

.security-regie-panel {
  display: grid !important;
  gap: 14px !important;
}

.security-regie-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
  gap: 8px !important;
}

.security-regie-kpis span,
.security-regie-card {
  border: 1px solid var(--border, #d8e2ee) !important;
  border-radius: 8px !important;
  background: var(--surface, #ffffff) !important;
  color: var(--text, #132238) !important;
  box-shadow: none !important;
}

.security-regie-kpis span {
  min-height: 66px !important;
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  padding: 10px !important;
}

.security-regie-kpis b {
  font-size: 1.2rem !important;
  color: var(--text, #132238) !important;
}

.security-regie-kpis small {
  color: var(--muted, #607895) !important;
}

.security-regie-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 10px !important;
}

.security-regie-card {
  display: grid !important;
  gap: 10px !important;
  padding: 13px !important;
}

.security-regie-card.wide {
  grid-column: 1 / -1 !important;
}

.security-regie-card header {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.security-regie-card header svg {
  width: 21px !important;
  height: 21px !important;
  color: #ff8200 !important;
  flex: 0 0 auto !important;
}

.security-regie-card header span,
.security-regie-card > span,
.security-object-row {
  min-width: 0 !important;
}

.security-regie-card > span,
.security-object-row {
  display: grid !important;
  gap: 3px !important;
  padding: 8px !important;
  border-radius: 7px !important;
  background: var(--subtle, #f5f8fb) !important;
}

.security-object-row {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr) !important;
  align-items: center !important;
  gap: 8px !important;
}

.security-regie-card strong,
.security-regie-card b {
  color: var(--text, #132238) !important;
}

.security-regie-card small,
.security-regie-card p {
  color: var(--muted, #607895) !important;
}

.security-check-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.security-check-list span {
  padding: 6px 8px !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  background: #eef6ee !important;
  color: #17623b !important;
}

.security-check-list span.missing {
  background: #fff2df !important;
  color: #8a4b00 !important;
}

html[data-theme="dark"] .security-regie-kpis span,
html[data-theme="dark"] .security-regie-card {
  border-color: rgba(184, 207, 230, 0.18) !important;
  background: rgba(8, 24, 43, 0.96) !important;
  color: #f7efe5 !important;
}

html[data-theme="dark"] .security-regie-card > span,
html[data-theme="dark"] .security-object-row {
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .security-regie-card :where(strong, b),
html[data-theme="dark"] .security-regie-kpis b {
  color: #ffffff !important;
}

html[data-theme="dark"] .security-regie-card :where(small, p),
html[data-theme="dark"] .security-regie-kpis small {
  color: rgba(247, 239, 229, 0.76) !important;
}

@media (max-width: 720px) {
  .security-object-row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  body.login-entry .portal-topbar {
    position: relative !important;
  }

  body.login-entry .admin-shell {
    min-height: auto !important;
    padding: 12px 10px 76px !important;
  }

  body.login-entry #portalCustomerForm {
    grid-template-columns: 1fr !important;
  }

  body.login-entry .test-login-panel > div:first-child {
    align-items: start !important;
    flex-direction: column !important;
  }

  body.login-entry .test-login-panel > div:first-child span {
    max-width: none !important;
    text-align: left !important;
  }

  body.login-entry .test-login-grid {
    grid-template-columns: 1fr !important;
    max-height: 42vh !important;
  }
}
/* Role-based work app: compact execution UI for field staff */
body.field-workapp-active.portal-active {
  background: var(--pf24-bg, #f5f7fb) !important;
}

body.field-workapp-active.portal-active #portalDashboard {
  display: block !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: max(10px, env(safe-area-inset-top)) 10px calc(68px + env(safe-area-inset-bottom)) !important;
}

.field-workapp-shell {
  min-height: 100dvh;
  color: var(--pf24-text, #102033);
}

.field-workapp-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
  padding: 8px 0 10px;
  background: color-mix(in srgb, var(--pf24-bg, #f5f7fb) 88%, transparent);
  backdrop-filter: blur(12px);
}

.field-workapp-avatar,
.field-workapp-logout {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
}

.field-workapp-avatar {
  background: #f58220;
  color: #fff;
  box-shadow: 0 8px 20px rgba(245, 130, 32, .22);
}

.field-workapp-logout {
  border: 1px solid var(--pf24-line, #d8e2ee);
  background: var(--pf24-surface, #fff);
  color: var(--pf24-text, #102033);
}

.field-workapp-header small,
.field-next-task small,
.field-card small {
  color: var(--pf24-muted, #64748b);
}

.field-workapp-header h1 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.1;
}

.field-workapp-header p {
  margin: 2px 0 0;
  color: var(--pf24-muted, #64748b);
  font-size: .78rem;
}

.field-workapp-section {
  display: none !important;
}

.field-workapp-section.portal-view-active,
.field-workapp-section:target {
  display: block !important;
}

.field-next-task,
.field-card,
.field-hint-grid span {
  border: 1px solid var(--pf24-line, #d8e2ee);
  background: var(--pf24-surface, #fff);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}

.field-next-task {
  padding: 14px;
}

.field-next-task h2 {
  margin: 6px 0 2px;
  font-size: 1.28rem;
  line-height: 1.15;
}

.field-next-task h3 {
  margin: 0 0 8px;
  font-size: .92rem;
}

.security-work-card .security-work-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 14px 0;
}

.security-work-card .security-work-meta span {
  display: grid;
  grid-template-columns: 28px minmax(82px, .42fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--pf24-line, #d8e2ee);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pf24-surface, #fff) 88%, var(--pf24-accent-soft, #fff3e6));
}

.security-work-card .security-work-meta svg {
  width: 19px;
  height: 19px;
  color: #f58220;
}

.security-work-card .security-work-meta b {
  font-size: .82rem;
}

.security-work-card .security-work-meta small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.security-work-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.incident-security-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, #f58220 34%, var(--pf24-line, #d8e2ee));
  border-radius: 14px;
  background: color-mix(in srgb, #fff8ef 72%, var(--pf24-surface, #fff));
}

.incident-security-context .mini-section-head,
.incident-security-context .wide {
  grid-column: 1 / -1;
}

@media (max-width: 560px) {
  .security-work-card .security-work-meta span,
  .incident-security-context {
    grid-template-columns: 1fr;
  }

  .security-work-actions {
    grid-template-columns: 1fr;
  }
}

.field-next-task p {
  margin: 0 0 14px;
  color: var(--pf24-muted, #64748b);
  font-size: .88rem;
  line-height: 1.42;
}

.field-next-task .button {
  width: 100%;
  min-height: 40px;
  justify-content: center;
}

.field-mini-map {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  min-height: 62px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--pf24-line, #d8e2ee) 78%, #f58220);
  border-radius: 12px;
  background:
    radial-gradient(circle at 82% 22%, rgba(245, 130, 32, .16), transparent 28%),
    linear-gradient(135deg, #f8fafc 0%, #eef4f8 100%);
  color: var(--pf24-text, #102033);
  overflow: hidden;
}

.field-mini-map svg {
  grid-row: span 2;
  width: 24px;
  height: 24px;
  color: #f58220;
}

.field-mini-map span,
.field-mini-map small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.field-mini-map span {
  font-size: .95rem;
  font-weight: 800;
}

.field-mini-map small {
  color: var(--pf24-muted, #64748b);
  font-size: .78rem;
}

.field-hint-grid,
.field-card-list,
.field-incident-buttons {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.field-hint-grid span,
.field-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
}

.field-card strong,
.field-card small {
  display: block;
}

.field-card svg,
.field-hint-grid svg {
  color: #f58220;
}

.field-day-hints {
  margin-top: 14px;
}

.field-incident-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-incident-buttons .button {
  min-height: 42px;
  padding: 9px 10px;
}

.driver-workapp-start > .field-next-task:not(.driver-task),
.driver-workapp-start > .field-hint-grid,
.driver-workapp-day > .field-card-list:not(.driver-day-summary),
.driver-workapp-day #professional-workday {
  display: none !important;
}

.driver-status-grid,
.driver-payment-box {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.driver-status-grid {
  grid-template-columns: 1fr;
}

.driver-payment-box {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--pf24-line, #d8e2ee);
  border-radius: 14px;
  background: color-mix(in srgb, var(--pf24-bg, #f5f7fb) 70%, var(--pf24-surface, #fff));
}

.driver-payment-box span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--pf24-muted, #64748b);
}

.driver-payment-box small {
  grid-column: 1 / -1;
  color: var(--pf24-muted, #64748b);
  font-size: .78rem;
}

.driver-passenger-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.driver-passenger-info :where(span, a) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #eef2f7;
  color: #334155;
  font-size: .76rem;
  text-decoration: none;
}

.driver-passenger-info small {
  flex-basis: 100%;
  color: var(--pf24-muted, #64748b);
  font-size: .78rem;
}

.driver-passenger-info svg {
  width: 14px;
  height: 14px;
}

.driver-payment-box b {
  color: var(--pf24-text, #102033);
}

.driver-ride-actions,
.driver-payment-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.driver-ride-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.driver-ride-actions .button,
.driver-payment-form .button {
  min-height: 38px;
  width: 100%;
  justify-content: center;
}

.driver-payment-form {
  padding: 10px;
  border: 1px solid var(--pf24-line, #d8e2ee);
  border-radius: 14px;
  background: var(--pf24-surface, #fff);
}

.driver-payment-form[hidden] {
  display: none !important;
}

.driver-payment-form label {
  display: grid;
  gap: 4px;
  color: var(--pf24-muted, #64748b);
  font-size: .78rem;
}

.driver-payment-form :where(input, select) {
  min-height: 36px;
  border: 1px solid var(--pf24-line, #d8e2ee);
  border-radius: 10px;
  padding: 7px 9px;
  background: #fff;
  color: var(--pf24-text, #102033);
  font: inherit;
}

.field-workapp-bottom {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 50;
  transform: translateX(-50%);
  width: min(520px, 100%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 6px 8px max(6px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--pf24-surface, #fff) 94%, transparent);
  border-top: 1px solid var(--pf24-line, #d8e2ee);
  box-shadow: 0 -10px 28px rgba(15, 23, 42, .10);
  backdrop-filter: blur(14px);
}

.field-workapp-bottom a {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 10px;
  color: var(--pf24-muted, #64748b) !important;
  text-decoration: none !important;
  font-size: .68rem;
  font-weight: 750;
}

.field-workapp-bottom a.active {
  color: #fff !important;
  background: #f58220;
}

.field-workapp-bottom svg {
  width: 18px;
  height: 18px;
}

body.field-workapp-active .professional-mobile-workday {
  display: block;
  padding: 0;
}

body.field-workapp-active .mobile-workday-phone {
  max-width: none;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

body.field-workapp-active .mobile-workday-status,
body.field-workapp-active .mobile-workday-head,
body.field-workapp-active .mobile-workday-tabs {
  display: none !important;
}

body.field-workapp-active .mobile-workday-body {
  border: 0;
  padding: 0;
  margin-top: 12px;
}

body.field-workapp-active .mobile-workday-side {
  display: none !important;
}

@media (max-width: 720px) {
  body.field-workapp-active.portal-active #portalDashboard {
    max-width: none !important;
    padding-inline: 10px !important;
  }

  .field-next-task h2 {
    font-size: 1.22rem;
  }
}

body.field-workapp-active.workapp-entry.portal-active .mobile-workday-head h2,
body.field-workapp-active.workapp-entry.portal-active .mobile-workday-subtitle,
body.field-workapp-active.workapp-entry.portal-active .mobile-workday-hero h3,
body.field-workapp-active.workapp-entry.portal-active .workday-check strong {
  font-size: inherit !important;
}

body.field-workapp-active.workapp-entry.portal-active .field-next-task .button,
body.field-workapp-active.workapp-entry.portal-active .field-workapp-bottom a,
body.field-workapp-active.workapp-entry.portal-active .field-card,
body.field-workapp-active.workapp-entry.portal-active .field-hint-grid span {
  font-size: .84rem !important;
}

/* Final role guard: chauffeurs zien geen generieke werkbonmockup in de werkapp. */
body.field-workapp-active .driver-workapp-start > .field-next-task:not(.driver-task),
body.field-workapp-active .driver-workapp-start > .field-hint-grid,
body.field-workapp-active .driver-workapp-day > .field-card-list:not(.driver-day-summary),
body.field-workapp-active .driver-workapp-day #professional-workday {
  display: none !important;
}

/* Final admin requests repair: readable logo and enough room for the selected request. */
.admin-body:has(#dashboard:not(.hidden)) .topbar {
  background: #071522 !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

.admin-body:has(#dashboard:not(.hidden)) .topbar .brand img[src*="profix24-logo"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .38)) !important;
  object-fit: contain !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
  grid-template-columns: clamp(285px, 28vw, 320px) minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
  width: auto !important;
  min-width: 0 !important;
  max-width: 320px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main {
  width: 100% !important;
}

@media (max-width: 1080px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item :where(.request-item-target, .request-item-tags) {
    display: none !important;
  }
}

@media (max-width: 820px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
    max-width: none !important;
  }
}

/* Laatste laag: particuliere/huurder omgeving blijft rustig en leesbaar. */
body.customer-portal-active.portal-active {
  --customer-nav-bg: color-mix(in srgb, var(--pf24-surface, #fff) 94%, transparent);
  --customer-nav-border: var(--pf24-line, #d8e2ee);
}

body.customer-portal-active.portal-active #portalDashboard.dashboard {
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) !important;
  align-items: start !important;
}

body.customer-portal-active.portal-active #portalDashboard > :not(.portal-section-nav):not(.professional-section-nav) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

body.customer-portal-active.portal-active .customer-section.portal-view-active,
body.customer-portal-active.portal-active .customer-section,
body.customer-portal-active.portal-active .customer-request-list,
body.customer-portal-active.portal-active .request-workspace {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

body.customer-portal-active.portal-active .customer-section.portal-view-active {
  display: grid !important;
  gap: 14px !important;
}

body.customer-portal-active.portal-active #portalDashboard > .panel-head.customer-head {
  color: var(--pf24-text, #102033) !important;
  background: var(--pf24-surface, #fff) !important;
  border: 1px solid var(--pf24-line, #d8e2ee) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .07) !important;
}

body.customer-portal-active.portal-active #portalDashboard > .panel-head.customer-head h1 {
  color: var(--pf24-text, #102033) !important;
  font-size: clamp(1.45rem, 2.4vw, 2.05rem) !important;
  line-height: 1.08 !important;
}

body.customer-portal-active.portal-active #portalDashboard > .panel-head.customer-head p,
body.customer-portal-active.portal-active .portal-section-nav :where(span, small, b) {
  color: var(--pf24-muted, #64748b) !important;
}

body.customer-portal-active.portal-active #portalDashboard > .portal-section-nav {
  background: var(--customer-nav-bg) !important;
  border: 1px solid var(--customer-nav-border) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08) !important;
}

body.customer-portal-active.portal-active .portal-section-nav .portal-nav-links {
  gap: 6px !important;
}

body.customer-portal-active.portal-active .portal-section-nav a.portal-nav-link {
  min-height: 44px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--pf24-text, #102033) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

body.customer-portal-active.portal-active .portal-section-nav a.portal-nav-link.active,
body.customer-portal-active.portal-active .portal-section-nav a.portal-nav-link:hover {
  border-color: rgba(245, 130, 32, .32) !important;
  background: color-mix(in srgb, #f58220 14%, var(--pf24-surface, #fff)) !important;
  color: var(--pf24-text, #102033) !important;
}

body.customer-portal-active.portal-active .portal-section-nav .portal-nav-icon,
body.customer-portal-active.portal-active .portal-section-nav svg {
  color: #f58220 !important;
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 auto !important;
}

body.customer-portal-active.portal-active .customer-overview-hero,
body.customer-portal-active.portal-active .customer-request-card,
body.customer-portal-active.portal-active .wallet-panel,
body.customer-portal-active.portal-active .need-to-know-assistant,
body.customer-portal-active.portal-active .account-context-panel,
body.customer-portal-active.portal-active .hospitality-offer-card,
body.customer-portal-active.portal-active .hospitality-group-panel,
body.customer-portal-active.portal-active .hospitality-group-order-card,
body.customer-portal-active.portal-active .hospitality-choice-list form,
body.customer-portal-active.portal-active .hospitality-fee-strip,
body.customer-portal-active.portal-active .hospitality-fee-options > span,
body.customer-portal-active.portal-active .hospitality-total-strip > span {
  color: var(--pf24-text, #102033) !important;
  background: var(--pf24-surface, #fff) !important;
  border: 1px solid var(--pf24-line, #d8e2ee) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

body.customer-portal-active.portal-active :where(.customer-overview-hero, .customer-request-card, .wallet-panel, .need-to-know-assistant, .account-context-panel, .hospitality-offer-card, .hospitality-group-panel, .hospitality-group-order-card, .hospitality-choice-list form, .hospitality-fee-strip, .hospitality-fee-options, .hospitality-total-strip) :where(h2, h3, h4, strong, b) {
  color: var(--pf24-text, #102033) !important;
}

body.customer-portal-active.portal-active :where(.customer-overview-hero, .customer-request-card, .wallet-panel, .need-to-know-assistant, .account-context-panel, .hospitality-offer-card, .hospitality-group-panel, .hospitality-group-order-card, .hospitality-choice-list form, .hospitality-fee-strip, .hospitality-fee-options, .hospitality-total-strip) :where(p, span, small, label, em) {
  color: var(--pf24-muted, #64748b) !important;
}

body.customer-portal-active.portal-active .customer-overview-hero {
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr) !important;
}

body.customer-portal-active.portal-active .hospitality-group-panel,
body.customer-portal-active.portal-active .hospitality-group-order-card {
  display: grid !important;
  gap: 12px !important;
  border-radius: 18px !important;
  padding: 16px !important;
}

body.customer-portal-active.portal-active .hospitality-participant-grid,
body.customer-portal-active.portal-active .hospitality-choice-list {
  display: grid !important;
  gap: 8px !important;
}

body.customer-portal-active.portal-active .hospitality-participant-row,
body.customer-portal-active.portal-active .hospitality-choice-list form {
  display: grid !important;
  grid-template-columns: auto minmax(160px, 1fr) minmax(90px, auto) !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 10px !important;
  border-radius: 14px !important;
}

body.customer-portal-active.portal-active .hospitality-choice-list form {
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.2fr) 72px minmax(160px, 1fr) auto auto !important;
}

body.customer-portal-active.portal-active .hospitality-fee-strip {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 4px 12px !important;
  align-items: center !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
}

body.customer-portal-active.portal-active .hospitality-fee-strip small {
  grid-column: 1 / -1 !important;
}

body.customer-portal-active.portal-active :where(input, select, textarea) {
  color: var(--pf24-text, #102033) !important;
  background: var(--pf24-surface, #fff) !important;
  border-color: var(--pf24-line, #d8e2ee) !important;
}

.food-info-fields {
  border: 1px solid var(--pf24-line, #d8e2ee);
  border-radius: 14px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--pf24-surface, #fff) 88%, var(--pf24-bg, #f5f7fb));
}

.food-info-fields summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--pf24-text, #102033);
}

.food-label-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.food-label-grid > strong {
  flex: 1 0 100%;
  color: var(--pf24-text, #102033);
}

.food-info-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.food-info-badges small {
  flex: 1 0 100%;
}

.food-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--pf24-line, #d8e2ee);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
}

.food-badge.positive {
  color: #166534 !important;
  background: #dcfce7;
  border-color: #86efac;
}

.food-badge.warning {
  color: #92400e !important;
  background: #fef3c7;
  border-color: #fbbf24;
}

@media (max-width: 1080px) {
  body.customer-portal-active.portal-active #portalDashboard.dashboard {
    grid-template-columns: 1fr !important;
    max-width: none !important;
  }

  body.customer-portal-active.portal-active #portalDashboard > .portal-section-nav {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.customer-portal-active.portal-active .portal-section-nav .portal-nav-links {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  }

  body.customer-portal-active.portal-active .hospitality-choice-list form {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 719px) {
  body.customer-portal-active.portal-active #portalDashboard.dashboard {
    max-width: none !important;
    padding: 10px 10px calc(92px + env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
  }

  body.customer-portal-active.portal-active #portalDashboard > .panel-head.customer-head {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  body.customer-portal-active.portal-active .customer-advanced-nav,
  body.customer-portal-active.portal-active .portal-sidebar-brand,
  body.customer-portal-active.portal-active .sidebar-chat-widget,
  body.customer-portal-active.portal-active .portal-sidebar-logout {
    display: none !important;
  }

  body.customer-portal-active.portal-active #portalDashboard > .portal-section-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 80 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 7px 8px max(8px, env(safe-area-inset-bottom)) !important;
    border-width: 1px 0 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    backdrop-filter: blur(16px) !important;
  }

  body.customer-portal-active.portal-active .portal-section-nav .portal-nav-links {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
    width: 100% !important;
  }

  body.customer-portal-active.portal-active .portal-section-nav a.portal-nav-link {
    display: grid !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 2px !important;
    min-height: 56px !important;
    padding: 6px 3px !important;
    font-size: .69rem !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  body.customer-portal-active.portal-active .portal-section-nav a.portal-nav-link:nth-child(n+6) {
    display: none !important;
  }

  body.customer-portal-active.portal-active .portal-section-nav a.portal-nav-link b {
    display: none !important;
  }

  body.customer-portal-active.portal-active .portal-section-nav .portal-nav-icon,
  body.customer-portal-active.portal-active .portal-section-nav svg {
    width: 22px !important;
    height: 22px !important;
  }

  body.customer-portal-active.portal-active .customer-overview-hero,
  body.customer-portal-active.portal-active .customer-status-strip,
  body.customer-portal-active.portal-active .customer-mobile-actions,
  body.customer-portal-active.portal-active .hospitality-offer-grid,
  body.customer-portal-active.portal-active .hospitality-participant-row,
  body.customer-portal-active.portal-active .hospitality-choice-list form,
  body.customer-portal-active.portal-active .hospitality-fee-strip,
  body.customer-portal-active.portal-active .business-shortcuts,
  body.customer-portal-active.portal-active .mini-job-grid {
    grid-template-columns: 1fr !important;
  }

  body.customer-portal-active.portal-active .customer-mobile-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.customer-portal-active.portal-active .customer-request-card,
  body.customer-portal-active.portal-active .wallet-panel,
  body.customer-portal-active.portal-active .need-to-know-assistant,
  body.customer-portal-active.portal-active .account-context-panel,
  body.customer-portal-active.portal-active .hospitality-offer-card,
  body.customer-portal-active.portal-active .hospitality-group-panel,
  body.customer-portal-active.portal-active .hospitality-group-order-card {
    border-radius: 18px !important;
    padding: 14px !important;
  }
}

/* Definitieve klantomgeving: volle breedte, consistente leesbaarheid en geen samengeperste formulieren. */
body.customer-portal-active.portal-active #portalDashboard.dashboard {
  width: min(100% - 24px, 1500px) !important;
  margin-inline: auto !important;
  overflow-x: hidden !important;
}

body.customer-portal-active.portal-active #portalDashboard > .customer-section {
  grid-column: 2 !important;
}

body.customer-portal-active.portal-active #portalDashboard > .customer-section.portal-view-active {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: start !important;
}

body.customer-portal-active.portal-active #portalDashboard > :where(.panel-head, .portal-notifications, .portal-section-nav, .customer-section) {
  min-width: 0 !important;
}

body.customer-portal-active.portal-active .customer-section.portal-view-active > *,
body.customer-portal-active.portal-active .customer-section.portal-view-active :where(.customer-request-card, .wallet-panel, .request-workspace, .planning-list, .customer-request-list, .customer-overview-list, .customer-cockpit, .customer-mobile-app, .need-to-know-assistant, .account-context-panel, .business-package-grid, .property-manager, .privacy-rights-panel, .customer-jobseeker-panel, .stay-assistant-panel, .stay-booking-list, .hospitality-offer-grid, .hospitality-group-panel, .hospitality-group-order-card, [data-stay-search-results]) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.customer-portal-active.portal-active .customer-section.portal-view-active :where(.request-core-grid, .freight-customer-grid, .compact-form, .profile-section-grid, .business-package-grid, .property-object-grid, .asset-grid, .employee-grid, .customer-status-strip, .business-shortcuts, .mini-job-grid, .customer-request-list, .planning-list) {
  min-width: 0 !important;
}

body.customer-portal-active.portal-active .customer-section.portal-view-active :where(p, span, small, strong, b, h1, h2, h3, h4, label, input, select, textarea, button, a) {
  overflow-wrap: anywhere !important;
}

body.customer-portal-active.portal-active .customer-section.portal-view-active :where(.badge, .pill, .status-pill, .button, button) {
  white-space: normal !important;
}

body.customer-portal-active.portal-active #customer-assistant,
body.customer-portal-active.portal-active #customer-assistant .stay-assistant-panel,
body.customer-portal-active.portal-active #customer-assistant .stay-booking-list,
body.customer-portal-active.portal-active #customer-assistant [data-stay-search-results] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

body.customer-portal-active.portal-active .stay-assistant-summary {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 10px !important;
}

body.customer-portal-active.portal-active .stay-assistant-summary span {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--pf24-line, #d8e2ee) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--pf24-surface, #fff) 92%, var(--pf24-bg, #f5f7fb)) !important;
}

body.customer-portal-active.portal-active .customer-section :where(.profile-section-grid, .stay-search-form, .hospitality-order-form, .hospitality-choice-list form, .request-form-grid, .customer-request-form) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

body.customer-portal-active.portal-active .customer-section :where(input, select, textarea, button, .button) {
  max-width: 100% !important;
}

body.customer-portal-active.portal-active .portal-notifications-compact article {
  background: #fff7ed !important;
  border-color: #fed7aa !important;
  color: #102033 !important;
}

body.customer-portal-active.portal-active .portal-notifications-compact :where(strong, span) {
  color: #102033 !important;
}

body.customer-portal-active.portal-active #customer-requests .customer-request-list,
body.customer-portal-active.portal-active #customer-planning .planning-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 10px !important;
}

body.customer-portal-active.portal-active #customer-new-request .request-core-card,
body.customer-portal-active.portal-active #customer-new-request .request-photo-uploader,
body.customer-portal-active.portal-active #customer-account .request-form,
body.customer-portal-active.portal-active #customer-property .request-form {
  background: var(--pf24-surface, #fff) !important;
}

@media (max-width: 1080px) {
  body.customer-portal-active.portal-active #portalDashboard > .customer-section {
    grid-column: 1 !important;
  }

  body.customer-portal-active.portal-active #customer-requests .customer-request-list,
  body.customer-portal-active.portal-active #customer-planning .planning-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 719px) {
  body.customer-portal-active.portal-active #portalDashboard.dashboard {
    width: 100% !important;
    padding-inline: 8px !important;
  }

  body.customer-portal-active.portal-active #portalDashboard > .panel-head.customer-head {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.customer-portal-active.portal-active .customer-section.portal-view-active {
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.customer-portal-active.portal-active .stay-assistant-summary,
  body.customer-portal-active.portal-active .customer-section :where(.profile-section-grid, .stay-search-form, .hospitality-order-form, .hospitality-choice-list form, .request-form-grid, .customer-request-form) {
    grid-template-columns: 1fr !important;
  }

  body.customer-portal-active.portal-active .customer-section :where(label, input, select, textarea, button, .button) {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.customer-portal-active.portal-active .customer-section.portal-view-active :where(.panel-head, .compact-head) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: start !important;
  }
}

/* Final mobile readability guard: keep every role usable on phone/tablet. */
@media (max-width: 760px) {
  html,
  body,
  :where(.admin-body, .portal-active, .login-entry, .public-site) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  :where(.admin-body, .portal-active, .login-entry) :where(.topbar, .portal-topbar) {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px 10px !important;
  }

  :where(.admin-body, .portal-active, .login-entry) :where(.topbar .brand, .portal-topbar .brand) {
    min-width: 0 !important;
    max-width: 48vw !important;
  }

  :where(.admin-body, .portal-active, .login-entry) :where(.topbar nav, .portal-topbar nav, .nav-links, .nav-actions) {
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  :where(.admin-body, .portal-active, .login-entry) :where(.topbar nav a, .portal-topbar nav a, .nav-links a, .portal-nav a, .nav-actions button, .nav-actions select) {
    min-width: 38px !important;
    max-width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  :where(.admin-body, .portal-active) :where(#dashboard, #portalDashboard, .dashboard, .admin-shell, .portal-shell, .workspace, [data-tab-panel], .professional-section, .customer-section) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  :where(.admin-body, .portal-active) :where(.workspace, .request-workspace, .ticket-layout, .detail-layout, .admin-grid, .profile-section-grid, .business-shortcuts, .settings-summary, .settings-grid) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  :where(.admin-body, .portal-active) :where(.queue, .detail, .ticket-main, .request-detail, .panel, .card, article, section, details, form) {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  :where(.admin-body, .portal-active) :where(.portal-page-footer, .app-powered-footer, .admin-page-footer) {
    min-height: 38px !important;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11px !important;
  }

  :where(.admin-body, .portal-active) :where(.portal-page-footer img, .app-powered-footer img, .admin-page-footer img) {
    max-height: 22px !important;
    max-width: 92px !important;
    width: auto !important;
  }
}

/* Definitive customer request page: compact readable case list, not a cramped card grid. */
body.customer-portal-active.portal-active #customer-requests {
  width: 100% !important;
  max-width: min(1180px, 100%) !important;
  margin-inline: auto !important;
}

body.customer-portal-active.portal-active #customer-requests .customer-request-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.customer-portal-active.portal-active #customer-requests .customer-request-foldout,
body.customer-portal-active.portal-active #customer-requests .customer-request-archive {
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid var(--pf24-line, #d8e2ee) !important;
  border-radius: 12px !important;
  background: var(--pf24-surface, #fff) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .05) !important;
  overflow: hidden !important;
}

body.customer-portal-active.portal-active #customer-requests .customer-request-foldout > summary,
body.customer-portal-active.portal-active #customer-requests .customer-request-archive > summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 12px 14px !important;
  cursor: pointer !important;
  color: var(--pf24-text, #102033) !important;
  list-style: none !important;
}

body.customer-portal-active.portal-active #customer-requests .customer-request-foldout > summary::-webkit-details-marker,
body.customer-portal-active.portal-active #customer-requests .customer-request-archive > summary::-webkit-details-marker {
  display: none !important;
}

body.customer-portal-active.portal-active #customer-requests .customer-request-foldout > summary strong {
  display: block !important;
  max-width: 100% !important;
  color: var(--pf24-text, #102033) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.customer-portal-active.portal-active #customer-requests .customer-request-foldout > summary small,
body.customer-portal-active.portal-active #customer-requests .customer-request-archive > summary small {
  display: block !important;
  margin-top: 3px !important;
  color: var(--pf24-muted, #64748b) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.customer-portal-active.portal-active #customer-requests .customer-request-foldout > summary b {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, #f58220 14%, var(--pf24-surface, #fff)) !important;
  color: #9a4a00 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.customer-portal-active.portal-active #customer-requests .customer-request-foldout[open] > summary {
  border-bottom: 1px solid var(--pf24-line, #d8e2ee) !important;
  background: color-mix(in srgb, var(--pf24-surface, #fff) 94%, #f58220) !important;
}

body.customer-portal-active.portal-active #customer-requests .customer-request-foldout > .customer-request-card.job-card {
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--pf24-surface, #fff) !important;
  padding: 14px !important;
  color: var(--pf24-text, #102033) !important;
}

body.customer-portal-active.portal-active #customer-requests .job-card-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

body.customer-portal-active.portal-active #customer-requests .job-card-head h2 {
  color: var(--pf24-text, #102033) !important;
  font-size: 18px !important;
  font-weight: 760 !important;
  line-height: 1.22 !important;
}

body.customer-portal-active.portal-active #customer-requests .job-card-meta {
  gap: 5px !important;
  margin-top: 7px !important;
}

body.customer-portal-active.portal-active #customer-requests .job-card-meta span {
  max-width: 220px !important;
  border-color: var(--pf24-line, #d8e2ee) !important;
  background: color-mix(in srgb, var(--pf24-surface, #fff) 88%, var(--pf24-bg, #f5f7fb)) !important;
  color: var(--pf24-muted, #64748b) !important;
  font-size: 11.5px !important;
  font-weight: 550 !important;
}

body.customer-portal-active.portal-active #customer-requests .job-card .description,
body.customer-portal-active.portal-active #customer-requests .job-card :where(p, span, small, label, em) {
  color: var(--pf24-muted, #64748b) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

body.customer-portal-active.portal-active #customer-requests .job-card :where(h2, h3, h4, strong, b) {
  color: var(--pf24-text, #102033) !important;
}

body.customer-portal-active.portal-active #customer-requests .job-card .info-grid {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
  gap: 8px !important;
}

body.customer-portal-active.portal-active #customer-requests .job-card .info-grid p,
body.customer-portal-active.portal-active #customer-requests .job-card :where(.asset-summary, .chat-panel, .approval-panel, .quote-lines-form, .completion-card, .payment-panel) {
  border: 1px solid var(--pf24-line, #d8e2ee) !important;
  background: color-mix(in srgb, var(--pf24-surface, #fff) 92%, var(--pf24-bg, #f5f7fb)) !important;
  color: var(--pf24-text, #102033) !important;
}

@media (max-width: 760px) {
  body.customer-portal-active.portal-active #customer-requests {
    max-width: 100% !important;
  }

  body.customer-portal-active.portal-active #customer-requests .customer-request-foldout > summary,
  body.customer-portal-active.portal-active #customer-requests .customer-request-archive > summary {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 11px 12px !important;
  }

  body.customer-portal-active.portal-active #customer-requests .customer-request-foldout > summary strong,
  body.customer-portal-active.portal-active #customer-requests .customer-request-foldout > summary small {
    white-space: normal !important;
  }

  body.customer-portal-active.portal-active #customer-requests .job-card-head,
  body.customer-portal-active.portal-active #customer-requests .job-card .info-grid {
    grid-template-columns: 1fr !important;
  }

  body.customer-portal-active.portal-active #customer-requests .job-card-meta span {
    max-width: 100% !important;
  }
}

/* Portal layout contract: desktop has a real sidebar, tablet/mobile has a real top/bottom nav. */
@media (min-width: 1081px) {
  body.portal-active #portalDashboard.dashboard {
    display: grid !important;
    grid-template-columns: minmax(220px, 252px) minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
    width: min(100% - 32px, 1480px) !important;
    max-width: 1480px !important;
    margin-inline: auto !important;
    padding: 16px 0 72px !important;
    overflow: visible !important;
  }

  body.portal-active #portalDashboard > :where(.portal-section-nav, .professional-section-nav) {
    position: sticky !important;
    top: 82px !important;
    z-index: 20 !important;
    grid-column: 1 !important;
    grid-row: 1 / span 40 !important;
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: calc(100vh - 110px) !important;
    max-height: calc(100vh - 96px) !important;
    padding: 14px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 14px !important;
    border: 1px solid var(--pf24-line, #d8e2ee) !important;
    background: var(--pf24-surface, #fff) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08) !important;
  }

  body.portal-active #portalDashboard > :not(.portal-section-nav):not(.professional-section-nav) {
    grid-column: 2 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.portal-active :where(.portal-section-nav, .professional-section-nav) :where(.portal-sidebar-brand, .portal-nav-group-label, .portal-workscreen-actions, .portal-app-download, .sidebar-chat-widget, .sidebar-chat-compact) {
    display: grid !important;
  }

  body.portal-active :where(.portal-section-nav, .professional-section-nav) .portal-nav-links {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  body.portal-active :where(.portal-section-nav, .professional-section-nav) .portal-nav-group {
    display: grid !important;
    gap: 6px !important;
  }

  body.portal-active :where(.portal-section-nav, .professional-section-nav) a.portal-nav-link,
  body.portal-active :where(.portal-section-nav, .professional-section-nav) .portal-nav-links a {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
    white-space: normal !important;
    text-align: left !important;
    color: var(--pf24-text, #102033) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
  }

  body.portal-active :where(.portal-section-nav, .professional-section-nav) a.portal-nav-link.active,
  body.portal-active :where(.portal-section-nav, .professional-section-nav) .portal-nav-links a.active {
    border-color: rgba(245, 130, 32, .35) !important;
    background: color-mix(in srgb, #f58220 13%, var(--pf24-surface, #fff)) !important;
    color: var(--pf24-text, #102033) !important;
    box-shadow: inset 3px 0 0 #f58220 !important;
  }

  body.portal-active :where(.portal-section-nav, .professional-section-nav) .portal-nav-icon,
  body.portal-active :where(.portal-section-nav, .professional-section-nav) svg {
    width: 20px !important;
    height: 20px !important;
    color: #f58220 !important;
  }

  body.portal-active :where(.portal-section-nav, .professional-section-nav) .portal-sidebar-logout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin-top: 6px !important;
    padding: 8px 10px !important;
    color: var(--pf24-text, #102033) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    border: 1px solid var(--pf24-line, #d8e2ee) !important;
    background: color-mix(in srgb, var(--pf24-surface, #fff) 90%, var(--pf24-bg, #f5f7fb)) !important;
    border-radius: 9px !important;
    overflow: visible !important;
  }

  body.portal-active :where(.portal-section-nav, .professional-section-nav) .portal-sidebar-logout::before {
    content: none !important;
  }
}

@media (min-width: 720px) and (max-width: 1080px) {
  body.portal-active #portalDashboard.dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: min(100% - 24px, 1180px) !important;
    margin-inline: auto !important;
    padding: 12px 0 70px !important;
  }

  body.portal-active #portalDashboard > :where(.portal-section-nav, .professional-section-nav) {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 54px !important;
    height: auto !important;
    padding: 8px !important;
    border-radius: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: var(--pf24-surface, #fff) !important;
    border: 1px solid var(--pf24-line, #d8e2ee) !important;
  }

  body.portal-active :where(.portal-section-nav, .professional-section-nav) :where(.portal-sidebar-brand, .portal-nav-group-label, .portal-workscreen-actions, .portal-app-download, .sidebar-chat-widget, .sidebar-chat-compact) {
    display: none !important;
  }

  body.portal-active :where(.portal-section-nav, .professional-section-nav) .portal-nav-links,
  body.portal-active :where(.portal-section-nav, .professional-section-nav) .portal-nav-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: auto !important;
  }

  body.portal-active :where(.portal-section-nav, .professional-section-nav) a.portal-nav-link,
  body.portal-active :where(.portal-section-nav, .professional-section-nav) .portal-nav-links a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 44px !important;
    min-height: 38px !important;
    padding: 7px 10px !important;
    white-space: nowrap !important;
  }
}

/* Final portal shell guard: navigation must never collapse into a broken side rail. */
@media (min-width: 1081px) {
  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
    width: min(100% - 32px, 1480px) !important;
    max-width: 1480px !important;
    margin-inline: auto !important;
    padding: 16px 0 72px !important;
    overflow: visible !important;
  }

  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > :where(.portal-section-nav, .professional-section-nav) {
    position: sticky !important;
    top: 82px !important;
    z-index: 40 !important;
    grid-column: 1 !important;
    grid-row: 1 / span 80 !important;
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    height: auto !important;
    min-height: calc(100vh - 112px) !important;
    max-height: calc(100vh - 96px) !important;
    padding: 14px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid var(--pf24-line, #d8e2ee) !important;
    border-radius: 14px !important;
    background: var(--pf24-surface, #fff) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08) !important;
    transform: none !important;
  }

  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > :not(.portal-section-nav):not(.professional-section-nav) {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) :where(.portal-section-nav, .professional-section-nav) :where(.portal-sidebar-brand, .portal-nav-group-label, .portal-workscreen-actions, .portal-app-download, .sidebar-chat-widget, .sidebar-chat-compact, .portal-sidebar-logout) {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) :where(.portal-section-nav, .professional-section-nav) .portal-nav-links,
  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) :where(.portal-section-nav, .professional-section-nav) .portal-nav-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) :where(.portal-section-nav, .professional-section-nav) :where(a.portal-nav-link, .portal-nav-links a, .portal-sidebar-logout) {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    color: var(--pf24-text, #102033) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) :where(.portal-section-nav, .professional-section-nav) :where(a.portal-nav-link.active, .portal-nav-links a.active) {
    border-color: rgba(245, 130, 32, .35) !important;
    background: color-mix(in srgb, #f58220 13%, var(--pf24-surface, #fff)) !important;
    color: var(--pf24-text, #102033) !important;
    box-shadow: inset 3px 0 0 #f58220 !important;
  }

  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) :where(.portal-section-nav, .professional-section-nav) :where(.portal-nav-icon, svg, [data-lucide]) {
    display: block !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    color: #f58220 !important;
  }
}

/* ProFix24 single UI contract: compact, readable app layer for every role. */
:root {
  --pf24-app-bg: #f4f7fa;
  --pf24-app-surface: #ffffff;
  --pf24-app-soft: #f8fafc;
  --pf24-app-line: #dbe4ee;
  --pf24-app-text: #122033;
  --pf24-app-muted: #64748b;
  --pf24-app-accent: #f58220;
  --pf24-app-accent-soft: #fff2e4;
  --pf24-app-radius: 10px;
  --pf24-light-sidebar: #ffffff;
}

html[data-theme="dark"] {
  --pf24-app-bg: #0b1624;
  --pf24-app-surface: #132236;
  --pf24-app-soft: #182b42;
  --pf24-app-line: #29415d;
  --pf24-app-text: #eef6ff;
  --pf24-app-muted: #b8c7d8;
  --pf24-app-accent-soft: rgba(245, 130, 32, .16);
}

:where(body.admin-body, body.portal-active, body.login-entry) {
  background: var(--pf24-app-bg) !important;
  color: var(--pf24-app-text) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

html[data-theme="light"] body.admin-body:has(#dashboard:not(.hidden)) .admin-tabs,
html[data-theme="light"] body.portal-active :where(.portal-section-nav, .professional-section-nav) {
  background: var(--pf24-light-sidebar) !important;
  color: #07182d !important;
  border-color: var(--pf24-app-line) !important;
}

:where(body.admin-body, body.portal-active, body.login-entry) :where(h1, h2, h3, h4, p, label, small, strong, span, button, input, select, textarea, a) {
  letter-spacing: 0 !important;
}

:where(body.admin-body, body.portal-active) :where(h1, .hero-title) {
  font-size: clamp(22px, 2vw, 32px) !important;
  line-height: 1.16 !important;
}

:where(body.admin-body, body.portal-active) :where(h2, .section-title, .panel-title) {
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
}

:where(body.admin-body, body.portal-active) :where(h3, h4, .card-title, .tile-title) {
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
}

:where(body.admin-body, body.portal-active) :where(.card, .panel, .professional-section, .customer-section, .portal-card, .admin-card, article, details, form, fieldset) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-color: var(--pf24-app-line) !important;
  border-radius: var(--pf24-app-radius) !important;
  background: var(--pf24-app-surface) !important;
  color: var(--pf24-app-text) !important;
}

:where(body.admin-body, body.portal-active) :where(.card, .panel, .professional-section, .customer-section, .portal-card, .admin-card) {
  padding: 12px !important;
}

:where(body.admin-body, body.portal-active) :where(.request-form, .update-form, .settings-form, .intake-form, .pro-form, .staff-form-grid, .quote-lines-form, .profile-section-grid, .team-edit-grid, .business-form, .customer-request-form, .request-form-grid, .warehouse-ops-form, .sales-document-form, .email-automation-form, .incident-report-form) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  align-items: start !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

:where(body.admin-body, body.portal-active) :where(label, .form-field, .field, .wide, .form-message) {
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--pf24-app-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}

:where(body.admin-body, body.portal-active) :where(label, .form-field, .field) {
  display: grid !important;
  gap: 4px !important;
}

:where(body.admin-body, body.portal-active) :where(.wide, label:has(textarea), .form-message, .service-search-selected, .service-search-results) {
  grid-column: 1 / -1 !important;
}

:where(body.admin-body, body.portal-active) :where(input, select, textarea) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: auto !important;
  padding: 7px 9px !important;
  color: var(--pf24-app-text) !important;
  background: var(--pf24-app-soft) !important;
  border: 1px solid var(--pf24-app-line) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

:where(body.admin-body, body.portal-active) textarea {
  min-height: 86px !important;
  resize: vertical !important;
}

:where(body.admin-body, body.portal-active) :where(button, .button, .btn, [role="button"]) {
  min-height: 34px !important;
  padding: 7px 11px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

:where(body.admin-body, body.portal-active) input[type="checkbox"],
:where(body.admin-body, body.portal-active) input[type="radio"] {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
}

@media (min-width: 1081px) {
  body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
    width: min(100% - 32px, 1480px) !important;
    max-width: 1480px !important;
    margin-inline: auto !important;
    padding: 16px 0 72px !important;
    overflow: visible !important;
  }

  body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > :where(.portal-section-nav, .professional-section-nav) {
    position: sticky !important;
    top: 82px !important;
    grid-column: 1 !important;
    grid-row: 1 / span 80 !important;
    display: grid !important;
    align-content: start !important;
    gap: 10px !important;
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    max-height: calc(100vh - 96px) !important;
    padding: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid var(--pf24-app-line) !important;
    border-radius: 12px !important;
    background: var(--pf24-app-surface) !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .08) !important;
  }

  body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > :not(.portal-section-nav):not(.professional-section-nav) {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

:where(body.portal-active, body.admin-body) :where(.portal-section-nav, .professional-section-nav, .admin-tabs) :where(a, button, summary, .portal-sidebar-logout) {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 7px 9px !important;
  color: var(--pf24-app-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

:where(body.portal-active, body.admin-body) :where(.portal-section-nav, .professional-section-nav, .admin-tabs) :where(a.active, button.active, summary.active) {
  background: var(--pf24-app-accent-soft) !important;
  border-color: rgba(245, 130, 32, .32) !important;
  box-shadow: inset 3px 0 0 var(--pf24-app-accent) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] > [data-tab-panel="intake"] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 10px !important;
  overflow: visible !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-head h2 {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .guided-intake-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr) !important;
  align-items: start !important;
  gap: 10px !important;
  width: min(100%, 1360px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-contact { grid-column: 1 !important; grid-row: 1 !important; }
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-customer { grid-column: 1 !important; grid-row: 2 !important; }
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-location { grid-column: 1 !important; grid-row: 3 !important; }
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request { grid-column: 1 !important; grid-row: 4 !important; }
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-assistant { grid-column: 2 !important; grid-row: 1 !important; }
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-preview { grid-column: 2 !important; grid-row: 2 / span 3 !important; }
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-submit-row { grid-column: 1 / -1 !important; grid-row: 5 !important; }

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-submit-row {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px !important;
  overflow: visible !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-assistant,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-preview,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-submit-row {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card > strong {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card > strong::before {
  content: none !important;
  display: none !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .admin-intake-preview,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .smart-intake,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-customer-suggestions {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 8px !important;
  overflow: visible !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-submit-row {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
}

@media (max-width: 1100px) {
  body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .guided-intake-form {
    grid-template-columns: 1fr !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card,
  body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-submit-row {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 760px) {
  :where(body.admin-body, body.portal-active, body.login-entry) {
    font-size: 13px !important;
    overflow-x: hidden !important;
  }

  :where(body.admin-body, body.portal-active) :where(#dashboard, #portalDashboard, .dashboard, [data-tab-panel], .professional-section, .customer-section, .admin-shell) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  :where(body.admin-body, body.portal-active) :where(.request-form, .update-form, .settings-form, .intake-form, .pro-form, .profile-section-grid, .team-edit-grid, .customer-request-form, .request-form-grid) {
    grid-template-columns: 1fr !important;
  }

  :where(body.admin-body, body.portal-active) :where(.topbar, .portal-topbar) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 8px 10px !important;
  }
}

/* App overflow guard: forms and operational widgets stay inside their workspace. */
:where(body.admin-body, body.portal-active) :where(.quote-lines, .quote-line, .quote-lines-form, .document-card, .approval-panel, .completion-card, .payment-panel) {
  min-width: 0 !important;
  max-width: 100% !important;
}

:where(body.admin-body, body.portal-active) .quote-line {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.5fr) minmax(82px, .55fr) minmax(92px, .65fr) minmax(120px, .75fr) minmax(104px, .65fr) auto !important;
  gap: 8px !important;
  align-items: end !important;
  width: 100% !important;
  overflow: visible !important;
}

:where(body.admin-body, body.portal-active) .quote-line :where(label, input, select, button) {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 1480px) {
  :where(body.admin-body, body.portal-active) .quote-line {
    grid-template-columns: repeat(3, minmax(140px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  :where(body.admin-body, body.portal-active) .quote-line {
    grid-template-columns: 1fr !important;
  }

  :where(body.portal-active, body.admin-body) :where(.professional-foldout-body, .portal-compact-foldout, .customer-request-card, .job-card, .workorder-card, .business-operations-director, .branch-monitor-workspace, .warehouse-slotting-tools, .wallet-panel, .professional-accounting-priority, .professional-fiscal-year, .compact-table, .planning-import-panel, .workorder-preparation-card, .workorder-preparation-form) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
  }

  :where(body.portal-active, body.admin-body) :where(.professional-foldout-body, .portal-compact-foldout, .customer-request-card, .job-card, .workorder-card, .business-operations-director, .branch-monitor-workspace, .wallet-panel) :where(.business-operations-head, .business-operations-title, .business-operations-metrics, .business-operations-costguard, .wallet-permission-strip, .wallet-summary-grid, .referral-share-row, .branch-monitor-kpis, .profile-section-grid, .planning-bulk-lines, .workorder-prep-checklist) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  :where(body.portal-active, body.admin-body) :where(.professional-foldout-body, .portal-compact-foldout, .customer-request-card, .job-card, .workorder-card, .business-operations-director, .branch-monitor-workspace, .wallet-panel) :where(strong, span, small, em, b, code, p, label, summary) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  :where(body.portal-active, body.admin-body) :where(.compact-table, .data-table, table) {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  :where(body.portal-active, body.admin-body) #professional-labels :where(.warehouse-map-grid, .warehouse-map-cell) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  :where(body.portal-active, body.admin-body) :where(input, select, textarea) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :where(body.portal-active, body.admin-body) :where(.panel-head.compact-head, .professional-business-structure, .business-structure-grid, #profile-options, .profile-option-group) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
  }

  :where(body.portal-active, body.admin-body) :where(.panel-head.compact-head > *, .profile-option-group > *, .professional-business-structure > *, .business-structure-grid > *) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  :where(body.portal-active, body.admin-body) :where(.badge, .status-pill, code) {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :where(body.portal-active, body.admin-body) #professional-labels .warehouse-map-grid {
    grid-template-columns: 1fr !important;
    transform: none !important;
  }

  :where(body.portal-active, body.admin-body) #professional-labels .warehouse-map-cell :where(strong, small) {
    transform: none !important;
  }
}

/* Public website/login contract: no button slabs, no blue-on-blue, no cramped portal. */
html body.public-site .site-nav > :where(a, details, .public-settings-menu),
html body.public-site .site-nav > .public-settings-menu[open] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.public-site .site-nav > :where(a, details > summary, .public-settings-menu > summary),
html body.public-site .site-nav > :where(a, details > summary, .public-settings-menu > summary):is(:hover, :focus, :focus-visible),
html body.public-site .site-nav > .public-settings-menu[open] > summary {
  min-height: 36px !important;
  padding: 6px 8px !important;
  color: #102033 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.public-site .site-nav > :where(a, details > summary, .public-settings-menu > summary),
html[data-theme="dark"] body.public-site .site-nav > :where(a, details > summary, .public-settings-menu > summary):is(:hover, :focus, :focus-visible),
html[data-theme="dark"] body.public-site .site-nav > .public-settings-menu[open] > summary {
  color: #eef6ff !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.public-site .site-nav > :where(a, details > summary, .public-settings-menu > summary)::before,
html body.public-site .site-nav > :where(a, details > summary, .public-settings-menu > summary)::after {
  content: none !important;
  display: none !important;
}

html body.public-site .public-settings-menu > summary,
html body.public-site .public-settings-menu > summary:is(:hover, :focus, :focus-visible) {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
  color: #102033 !important;
  background: transparent !important;
  border-color: transparent !important;
}

html[data-theme="dark"] body.public-site .public-settings-menu > summary,
html[data-theme="dark"] body.public-site .public-settings-menu > summary:is(:hover, :focus, :focus-visible) {
  color: #eef6ff !important;
}

html body.public-site .site-hero-overlay {
  color: #102033 !important;
  background: rgba(255, 255, 255, .95) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .12) !important;
}

html[data-theme="dark"] body.public-site .site-hero-overlay {
  color: #eef6ff !important;
  background: rgba(5, 17, 29, .88) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

body.login-entry:not(.portal-active) .portal-shell {
  width: min(100% - 24px, 480px) !important;
  max-width: 480px !important;
  margin-inline: auto !important;
}

html body.portal-active.login-entry #portalDashboard {
  width: min(100% - 32px, 1480px) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  overflow-x: hidden !important;
}

html body.portal-active .portal-page-footer {
  position: static !important;
  width: 100% !important;
  min-height: 56px !important;
  margin-top: 20px !important;
}

@media (max-width: 760px) {
  html body.public-site .site-nav > :where(a, details, .public-settings-menu) {
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.public-site .site-nav > :where(a, details > summary, .public-settings-menu > summary),
  html body.public-site .site-nav > :where(a, details > summary, .public-settings-menu > summary):is(:hover, :focus, :focus-visible) {
    font-size: 13px !important;
  }

  html body.public-site .public-settings-menu > summary,
  html body.public-site .public-settings-menu > summary:is(:hover, :focus, :focus-visible) {
    width: 36px !important;
    min-width: 36px !important;
  }

  html body.public-site .site-hero-overlay {
    background: rgba(255,255,255,.98) !important;
  }

  html[data-theme="dark"] body.public-site .site-hero-overlay {
    background: rgba(5,17,29,.92) !important;
  }

  html body.portal-active.login-entry #portalDashboard {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* Admin sidebar usability pass: readable controls, no duplicate process selector, visible AI icons and scroll. */
body.admin-body:has(#dashboard:not(.hidden)) .topbar nav {
  justify-content: flex-end !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .topbar .brand img[src*="profix24-logo"] {
  filter: none !important;
  opacity: 1 !important;
  max-width: 214px !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .system-switch label[for="workProcessSelect"],
body.admin-body:has(#dashboard:not(.hidden)) #workProcessSelect {
  display: none !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard {
  height: calc(100vh - var(--admin-topbar-height, 62px)) !important;
  overflow: hidden !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) {
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100, 116, 139, .45) transparent !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace)::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
  display: block !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace)::-webkit-scrollbar-thumb {
  border: 3px solid transparent !important;
  border-radius: 999px !important;
  background: rgba(100, 116, 139, .45) !important;
  background-clip: padding-box !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .portal-assistant-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 6px 0 7px !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .voice-menu-icon-button,
body.portal-active .voice-menu-icon-button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  background: #f58220 !important;
  border: 1px solid #d66d11 !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(245, 130, 32, .26) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .voice-menu-icon,
body.portal-active .voice-menu-icon {
  display: block !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  transform: none !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' x2='12' y1='19' y2='22'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' x2='12' y1='19' y2='22'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .voice-message-icon,
body.portal-active .voice-message-icon {
  display: block !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  transform: none !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .voice-listening-orb,
body.portal-active .voice-listening-orb {
  display: none;
}

body.admin-body:has(#dashboard:not(.hidden)) #analyzeIntakeBtn,
body.admin-body:has(#dashboard:not(.hidden)) #analyzeIntakeBtn:disabled {
  color: #122033 !important;
  background: #ffffff !important;
  border: 1px solid #d7e0ea !important;
  opacity: 1 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #analyzeIntakeBtn:disabled {
  color: #64748b !important;
  background: color-mix(in srgb, var(--surface-muted, #e5ecf4) 55%, #ffffff) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .sidebar-chat-compact {
  color: #122033 !important;
  background: #fff7ed !important;
  border: 1px solid rgba(245, 130, 32, .48) !important;
  box-shadow: none !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .sidebar-chat-compact :where(i, svg, b, em, small) {
  color: #122033 !important;
  fill: none !important;
  opacity: 1 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .sidebar-chat-compact em,
body.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .sidebar-chat-compact small {
  justify-self: end !important;
  color: #334155 !important;
}

html[data-theme="dark"] body.admin-body:has(#dashboard:not(.hidden)) .topbar .brand img[src*="profix24-logo"] {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28)) !important;
}

/* Admin scroll/readability correction: previous menu guards hid scrollbars and trapped long pages. */
body.admin-body:has(#dashboard:not(.hidden)) {
  overflow: hidden !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .admin-shell {
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100, 116, 139, .42) transparent !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .admin-tabs::-webkit-scrollbar,
body.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary::-webkit-scrollbar,
body.admin-body:has(#dashboard:not(.hidden)) .admin-nav-communication::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
  display: block !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .admin-tabs::-webkit-scrollbar-thumb,
body.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary::-webkit-scrollbar-thumb,
body.admin-body:has(#dashboard:not(.hidden)) .admin-nav-communication::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background: rgba(100, 116, 139, .46) !important;
  background-clip: padding-box !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary,
body.admin-body:has(#dashboard:not(.hidden)) .admin-nav-communication {
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100, 116, 139, .42) transparent !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard {
  display: grid !important;
  grid-template-columns: var(--admin-sidebar-width, 244px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  min-height: 0 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) {
  grid-column: 2 !important;
  align-self: stretch !important;
  height: 100% !important;
  max-height: none !important;
  padding-bottom: 86px !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel.hidden, .workspace.hidden) {
  display: none !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .admin-tabs :where(a, button, summary, select, .sidebar-chat-compact) {
  min-height: 38px !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] > [data-tab-panel="intake"] {
  display: block !important;
  grid-column: 2 !important;
  height: 100% !important;
  max-height: calc(100vh - var(--admin-topbar-height, 62px)) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 96px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100, 116, 139, .45) transparent !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] > [data-tab-panel="intake"]::-webkit-scrollbar {
  width: 10px !important;
  display: block !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] > [data-tab-panel="intake"]::-webkit-scrollbar-thumb {
  border: 3px solid transparent !important;
  border-radius: 999px !important;
  background: rgba(100, 116, 139, .45) !important;
  background-clip: padding-box !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #intakeForm .checkbox-line {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 7px 9px !important;
  line-height: 1.25 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #intakeForm .checkbox-line input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 3px !important;
  accent-color: #f58220 !important;
  transform: none !important;
}

/* Intake contact/readability final: keep suggestions, preview and helper lines readable. */
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] {
  --intake-card-bg: color-mix(in srgb, #ffffff 96%, #eef4fa);
  --intake-soft-bg: #f7fafd;
  --intake-line: #d8e2ec;
  --intake-text: #102033;
  --intake-muted: #526173;
  --intake-accent: #f58220;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card :where(.form-message, .service-search-selected, .intake-customer-suggestions, .admin-intake-preview, .smart-intake) {
  background: var(--intake-soft-bg) !important;
  border: 1px solid var(--intake-line) !important;
  border-radius: 7px !important;
  color: var(--intake-text) !important;
  box-shadow: none !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-customer-suggestions {
  display: grid !important;
  gap: 8px !important;
  padding: 9px !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-customer-suggestions > span,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .admin-intake-preview > span,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .smart-intake > span,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .form-message {
  color: var(--intake-muted) !important;
  font-size: 11.5px !important;
  font-weight: 550 !important;
  line-height: 1.35 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-customer-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-customer-list button,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-customer-picked {
  display: grid !important;
  gap: 3px !important;
  min-height: 0 !important;
  padding: 8px 9px !important;
  text-align: left !important;
  color: var(--intake-text) !important;
  background: var(--intake-card-bg) !important;
  border: 1px solid var(--intake-line) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-customer-list button:hover,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-customer-list button:focus-visible {
  border-color: color-mix(in srgb, var(--intake-accent) 70%, var(--intake-line)) !important;
  background: color-mix(in srgb, var(--intake-accent) 9%, #ffffff) !important;
  color: var(--intake-text) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-customer-list strong,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-customer-picked strong {
  color: var(--intake-text) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-customer-list small,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-customer-list em,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-customer-picked span,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-work-preview {
  color: var(--intake-muted) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .admin-intake-preview {
  display: grid !important;
  align-content: start !important;
  gap: 7px !important;
  min-height: 92px !important;
  padding: 9px !important;
  overflow: visible !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] #intakeForm .checkbox-line {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  min-height: 34px !important;
  padding: 7px 9px !important;
  color: var(--intake-text) !important;
  background: var(--intake-soft-bg) !important;
  border: 1px solid var(--intake-line) !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

@media (max-width: 720px) {
  body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-customer-list {
    grid-template-columns: 1fr !important;
  }
}

/* Admin panel readability final: keep every servicecenter page calm and legible. */
body.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) {
  color: #102033 !important;
  font-size: 12px !important;
  line-height: 1.38 !important;
  background: #eef4fa !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) :where(h1, h2, h3, h4, strong, b, label, summary) {
  color: #102033 !important;
  letter-spacing: 0 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) :where(h2) {
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) :where(h3) {
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) :where(p, small, span, em, li, td, th) {
  color: #526173 !important;
  font-size: 12px !important;
  line-height: 1.38 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) :where(.panel-head, .acceptance-head, .acceptance-summary, .acceptance-priority, .acceptance-group, .acceptance-item, .acceptance-auto, .acceptance-steps, .metric-card, .kpi-card, .analytics-card, .dashboard-card, .stat-card, .overview-card, article, details) {
  background: color-mix(in srgb, #ffffff 96%, #eef4fa) !important;
  border: 1px solid #d8e2ec !important;
  border-radius: 8px !important;
  color: #102033 !important;
  box-shadow: none !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="analytics"] > [data-tab-panel="analytics"],
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="acceptance"] > [data-tab-panel="acceptance"] {
  display: block !important;
  grid-column: 2 !important;
  height: 100% !important;
  max-height: calc(100vh - var(--admin-topbar-height, 62px)) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 96px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100, 116, 139, .45) transparent !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="analytics"] :where(.metrics, .overview-grid, #analyticsPanel),
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="acceptance"] :where(.acceptance-panel, .acceptance-summary, .acceptance-groups, .acceptance-list) {
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 10px !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="acceptance"] .acceptance-head,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="acceptance"] .acceptance-summary,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="acceptance"] .acceptance-priority,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="acceptance"] .acceptance-group {
  padding: 12px !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="acceptance"] .acceptance-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) auto !important;
  gap: 10px !important;
  align-items: start !important;
  padding: 10px !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="acceptance"] .acceptance-actions,
body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="acceptance"] .acceptance-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="acceptance"] .acceptance-auto {
  padding: 8px !important;
  min-width: 0 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard :where(input, select, textarea, button, .button) {
  font-size: 12px !important;
  line-height: 1.3 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard :where(input::placeholder, textarea::placeholder) {
  color: #8a97a8 !important;
  opacity: 1 !important;
}

@media (max-width: 980px) {
  body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="acceptance"] .acceptance-item {
    grid-template-columns: 1fr !important;
  }
}

/* Release UI contract: one light, compact operating style across roles. */
html,
html[data-theme="dark"],
html[data-theme="light"] {
  color-scheme: light !important;
  --pf24-page: #eef4fa;
  --pf24-panel: color-mix(in srgb, #ffffff 96%, #eef4fa);
  --pf24-panel-soft: #f7fafd;
  --pf24-line: #d8e2ec;
  --pf24-text: #102033;
  --pf24-muted: #526173;
  --pf24-orange: #f58220;
}

html[data-theme="dark"] {
  background: var(--pf24-page) !important;
}

:where(.theme-select-wrap, .theme-select-field, select[data-theme-select], button[data-theme-choice]) {
  display: none !important;
}

:where(body.admin-body, body.portal-active, body.login-entry, body.public-site, body.workapp-entry, body.klantapp-entry) {
  color: var(--pf24-text) !important;
  background: var(--pf24-page) !important;
  font-size: 13px !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;
}

:where(body.admin-body, body.portal-active, body.login-entry, body.public-site, body.workapp-entry, body.klantapp-entry) :where(h1, h2, h3, h4, h5, h6, p, span, small, em, strong, b, label, legend, summary, li, td, th, a, button) {
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

:where(body.admin-body, body.portal-active, body.login-entry, body.public-site, body.workapp-entry, body.klantapp-entry) :where(h1) {
  color: var(--pf24-text) !important;
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
}

:where(body.admin-body, body.portal-active, body.login-entry, body.public-site, body.workapp-entry, body.klantapp-entry) :where(h2) {
  color: var(--pf24-text) !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 780 !important;
}

:where(body.admin-body, body.portal-active, body.login-entry, body.public-site, body.workapp-entry, body.klantapp-entry) :where(h3, h4, strong, b, summary, label) {
  color: var(--pf24-text) !important;
  font-size: 13px !important;
  line-height: 1.28 !important;
  font-weight: 700 !important;
}

:where(body.admin-body, body.portal-active, body.login-entry, body.public-site, body.workapp-entry, body.klantapp-entry) :where(p, span, small, em, li, td, th, .form-message, .help-text, .settings-help, .muted, .empty) {
  color: var(--pf24-muted) !important;
  font-size: 12px !important;
  line-height: 1.38 !important;
  font-weight: 500 !important;
}

:where(body.admin-body, body.portal-active, body.login-entry, body.public-site, body.workapp-entry, body.klantapp-entry) :where(.panel, .portal-panel, .content-card, .dashboard-card, .metric-card, .stat-card, .overview-card, .settings-card, .form-card, .module-card, .package-card, .pricing-card, .acceptance-item, .acceptance-auto, .request-card, .request-detail-card, .communication-card, .message-card, .professional-card, .customer-card, .work-card, fieldset, details, article) {
  color: var(--pf24-text) !important;
  background: var(--pf24-panel) !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

:where(body.admin-body, body.portal-active, body.login-entry, body.public-site, body.workapp-entry, body.klantapp-entry) :where(input, select, textarea, .search-input, .form-control) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 7px 9px !important;
  color: var(--pf24-text) !important;
  background: var(--pf24-panel-soft) !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
}

:where(body.admin-body, body.portal-active, body.login-entry, body.public-site, body.workapp-entry, body.klantapp-entry) :where(input::placeholder, textarea::placeholder) {
  color: #8996a8 !important;
  opacity: 1 !important;
}

:where(body.admin-body, body.portal-active, body.login-entry, body.public-site, body.workapp-entry, body.klantapp-entry) :where(button, .button, a.button, summary) {
  min-height: 34px !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

:where(body.admin-body, body.portal-active, body.login-entry, body.public-site, body.workapp-entry, body.klantapp-entry) :where(.suggestion-list, .service-search-results, .business-lookup-results, .nav-dropdown-panel, .admin-more-flyout, .screen-switcher-grid, .public-settings-panel, .style-image-panel, [role="listbox"]) {
  color: var(--pf24-text) !important;
  background: var(--pf24-panel) !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .12) !important;
}

:where(body.admin-body, body.portal-active, body.login-entry, body.public-site, body.workapp-entry, body.klantapp-entry) :where(.suggestion-list *, .service-search-results *, .business-lookup-results *, .nav-dropdown-panel *, .admin-more-flyout *, .screen-switcher-grid *, .public-settings-panel *, .style-image-panel *) {
  color: var(--pf24-text) !important;
  font-size: 12px !important;
}

:where(body.admin-body, body.portal-active) :where(.topbar, .portal-topbar, .admin-tabs, .portal-section-nav, .professional-section-nav, .admin-page-footer, .portal-page-footer) {
  color: var(--pf24-text) !important;
  background: color-mix(in srgb, #ffffff 94%, #e7eef6) !important;
  border-color: var(--pf24-line) !important;
  box-shadow: none !important;
}

:where(body.admin-body, body.portal-active) :where(.admin-tabs a, .admin-tabs button, .admin-tabs summary, .portal-section-nav a, .professional-section-nav a, .sidebar-chat-compact, .portal-sidebar-logout) {
  color: var(--pf24-text) !important;
  background: transparent !important;
  border-color: transparent !important;
}

:where(body.admin-body, body.portal-active) :where(.admin-tabs a.active, .admin-tabs button.active, .portal-section-nav a.active, .professional-section-nav a.active, .sidebar-chat-compact.active) {
  color: var(--pf24-text) !important;
  background: color-mix(in srgb, var(--pf24-orange) 10%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--pf24-orange) 45%, var(--pf24-line)) !important;
}

/* Release device modes: desktop and mobile use different layout rules instead of squeezing one UI everywhere. */
body.admin-body:has(#dashboard:not(.hidden)) .topbar {
  height: var(--admin-topbar-height, 62px) !important;
  min-height: var(--admin-topbar-height, 62px) !important;
  color: var(--pf24-text) !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--pf24-line) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .topbar .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  color: var(--pf24-text) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .topbar .brand img[src*="profix24-logo"] {
  width: 168px !important;
  max-width: 168px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: none !important;
  background: transparent !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .topbar :where(.admin-title, nav a[href*="index"], .language-select, .settings-icon-btn, .public-settings-toggle) {
  color: var(--pf24-text) !important;
  background: transparent !important;
  border-color: var(--pf24-line) !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .topbar nav a[href*="index"] {
  display: none !important;
}

body.admin-body:has(#dashboard:not(.hidden)) :where(.voice-menu-icon-button, .portal-assistant-actions .voice-menu-icon-button) {
  display: inline-grid !important;
  place-items: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  color: #ffffff !important;
  background: var(--pf24-orange) !important;
  border: 1px solid #d66d11 !important;
  border-radius: 999px !important;
}

body.admin-body:has(#dashboard:not(.hidden)) :where(.voice-menu-icon, .voice-message-icon) {
  position: static !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  place-self: center !important;
  transform: none !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .sidebar-chat-compact {
  color: var(--pf24-text) !important;
  background: transparent !important;
  border-color: var(--pf24-line) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) .admin-tabs .sidebar-chat-compact:is(.active, :hover, :focus-visible) {
  background: color-mix(in srgb, var(--pf24-orange) 10%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--pf24-orange) 42%, var(--pf24-line)) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) :where(.screen-switcher summary, .portal-sidebar-logout, .admin-tabs a, .admin-tabs button) {
  color: var(--pf24-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  color: var(--pf24-text) !important;
  background: var(--pf24-page) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) :where(.metric-value, .kpi-value, .stat-number, .dashboard-number, .finance-total, .counter-value) {
  font-size: 17px !important;
  line-height: 1.15 !important;
  font-weight: 750 !important;
  color: var(--pf24-text) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) :where(.metric-card strong, .kpi-card strong, .stat-card strong, .overview-card strong, .finance-card strong, .finance-summary strong, .staff-id-avatar, .entity-avatar) {
  font-size: 15px !important;
  line-height: 1.18 !important;
  font-weight: 750 !important;
  color: var(--pf24-text) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) :where(.staff-id-avatar, .entity-avatar) {
  display: inline-grid !important;
  place-items: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  overflow: hidden !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard :where(.servicecenter-map-canvas, .leaflet-container) {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard :where(.leaflet-container, .leaflet-pane, .leaflet-map-pane, .leaflet-tile-pane, .leaflet-overlay-pane, .leaflet-marker-pane, .leaflet-tooltip-pane, .leaflet-popup-pane, .leaflet-control-container) {
  contain: layout paint !important;
  max-width: 100% !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard :where(.overview-grid, .metrics, .kpi-grid, .analytics-grid, .finance-grid, .staff-list, .integration-status-grid, .integration-compact-list, .acceptance-list, .acceptance-groups, .request-list, .detail, .ticket-main, .settings-grid) {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard :where(.staff-list, .staff-card, .staff-row, .integration-status-row, .integration-category-group, .integration-compact-list, .switchboard-status-strip, #branchProfileReleaseForm) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard :where(.staff-list, .integration-compact-list, .switchboard-status-strip) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard :where(.integration-status-row, .switchboard-status-strip, .staff-row, .staff-card, .acceptance-item) {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard :where(.integration-status-row summary, .switchboard-status-strip summary, .staff-row *, .staff-card *, .request-card strong, .request-item strong) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="security"] :where(input, select, textarea) {
  max-width: 100% !important;
  min-width: 0 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard :where(.overview-grid, .metrics, .kpi-grid, .analytics-grid, .finance-grid, .settings-grid) {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard :where(.guided-intake-form, .intake-step-card, .intake-field-grid, .form-grid, .compact-form-grid) {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard :where(.intake-field-grid, .form-grid, .compact-form-grid) {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] :where(.guided-intake-form) {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .74fr) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] :where(.intake-card-contact, .intake-card-customer, .intake-card-location, .intake-card-request, .intake-card-assistant, .intake-card-preview, .intake-submit-row) {
  min-width: 0 !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] :where(.admin-intake-preview, .intake-customer-suggestions, .smart-intake, .form-message) {
  color: var(--pf24-text) !important;
  background: var(--pf24-panel-soft) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .form-message {
  color: var(--pf24-muted) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] #intakeForm .checkbox-line {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  color: var(--pf24-text) !important;
}

body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] #intakeForm .checkbox-line input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 820px) {
  body.admin-body:has(#dashboard:not(.hidden)) {
    overflow: auto !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) .admin-shell {
    display: block !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 8px 10px !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) .topbar .brand img[src*="profix24-logo"] {
    width: 132px !important;
    max-width: 38vw !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) .topbar nav {
    gap: 6px !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) .topbar .language-select {
    width: min(42vw, 160px) !important;
    min-width: 0 !important;
    height: 34px !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) #dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) .admin-tabs {
    position: sticky !important;
    top: 52px !important;
    z-index: 40 !important;
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 42dvh !important;
    padding: 8px 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--pf24-line) !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) .admin-nav-primary :where(a, button) {
    min-height: 34px !important;
    padding: 7px 8px !important;
    font-size: 12px !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) .admin-nav-communication {
    display: grid !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) .portal-assistant-actions {
    justify-content: flex-start !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) .admin-nav-bottom {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) {
    grid-column: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 10px 88px !important;
    overflow: visible !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] > [data-tab-panel="intake"] {
    grid-column: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 10px 10px 88px !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .guided-intake-form,
  body.admin-body:has(#dashboard:not(.hidden)) #dashboard :where(.guided-intake-form, .request-dashboard-grid, .finance-layout, .communications-layout, .settings-layout) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 10px !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] :where(.intake-card-contact, .intake-card-customer, .intake-card-location, .intake-card-request, .intake-card-assistant, .intake-card-preview, .intake-submit-row) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) #dashboard :where(.intake-field-grid, .form-grid, .compact-form-grid, .overview-grid, .metrics, .kpi-grid, .analytics-grid, .finance-grid, .settings-grid, .acceptance-item) {
    grid-template-columns: 1fr !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) #dashboard :where(.panel, .dashboard-card, .metric-card, .stat-card, .overview-card, .intake-step-card, .form-card, details, article) {
    padding: 10px !important;
  }

  body.admin-body:has(#dashboard:not(.hidden)) #dashboard :where(input, select, textarea, button, .button) {
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  :where(body.admin-body, body.portal-active, body.login-entry, body.public-site) {
    font-size: 12.5px !important;
  }

  :where(body.admin-body, body.portal-active, body.login-entry, body.public-site) :where(h1) {
    font-size: 22px !important;
  }

  :where(body.admin-body, body.portal-active, body.login-entry, body.public-site) :where(h2) {
    font-size: 17px !important;
  }
}

/* Final mobile admin lock: never create the old desktop second column on phones. */
@media (max-width: 820px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard > .admin-tabs {
    position: sticky !important;
    top: 52px !important;
    box-sizing: border-box !important;
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    height: auto !important;
    max-height: 42dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard > :where(section.tab-panel, div.tab-panel, div.workspace, section.workspace):not(.admin-tabs) {
    display: block !important;
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 10px 88px !important;
    overflow: visible !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard > :where(section.tab-panel.hidden, div.tab-panel.hidden, div.workspace.hidden, section.workspace.hidden):not(.admin-tabs) {
    display: none !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(.guided-intake-form, .request-dashboard-grid, .queue, .detail, .ticket-main, .finance-layout, .communications-layout, .settings-layout, .analytics-layout, .staff-layout, .data-quality-layout) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(.panel-head, .finance-head, .communication-head, .data-quality-hero, .settings-card, .compact-form-panel, .request-queue-stat, .finance-periods, .finance-head-actions, .communication-kpis) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(input, select, textarea, button, .button, summary) {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(strong, b, span, small, p, h2, h3, label) {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }
}

/* Final compact overflow cleanup for launch audit. */
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard,
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard * {
  box-sizing: border-box !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(input, select, textarea) {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(.callback-context, .callback-context-wide, .badge, .staff-list, .staff-table-head, .staff-table-row, .staff-document-list, .staff-document-row, #accountDiscountForm, .branch-release-content, .settings-actions.wide) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(.callback-context, .callback-context-wide, .staff-table-head, .staff-table-row, .staff-document-row) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(.callback-context *, .callback-context-wide *, .staff-table-head *, .staff-table-row *, .staff-document-row *, .branch-release-content *, .settings-actions.wide *) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where([data-tab-panel="finance"] strong, .finance-panel strong, .finance-summary strong, .finance-grid strong, .finance-card strong, .metric-card strong, .kpi-card strong, .stat-card strong) {
  font-size: 15px !important;
  line-height: 1.18 !important;
  font-weight: 750 !important;
}

@media (max-width: 820px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(.role-feature-matrix, .role-feature-row, .role-feature-cell) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(.finance-periods, .finance-head-actions, .communication-kpis, .settings-actions.wide) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(.finance-periods > *, .finance-head-actions > *, .communication-kpis > *, .settings-actions.wide > *) {
    flex: 1 1 140px !important;
  }
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(.quote-box, #quoteLinesForm, #quoteLines, .quote-line, .request-detail-foldout-body, .integration-row-detail) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(.quote-line) {
  display: grid !important;
  grid-template-columns: minmax(150px, 1.15fr) minmax(54px, .35fr) minmax(66px, .45fr) minmax(82px, .5fr) minmax(82px, .5fr) minmax(100px, .65fr) minmax(72px, .45fr) 30px !important;
  gap: 6px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(code, pre) {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="requests"] :where(strong, b, small, span, article, .request-detail-foldout-body, .quote-box) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard > :where(.tab-panel.hidden, .workspace.hidden, [hidden]) {
  display: none !important;
  visibility: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] :where(.integration-status-row, .integration-row-detail, .checkbox-line, summary) {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] :where(.integration-status-row *, .integration-row-detail *, .checkbox-line *, summary *) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] .checkbox-line {
  display: grid !important;
  grid-template-columns: 16px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] .checkbox-line input[type="checkbox"] {
  flex: 0 0 16px !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] #accountDiscountForm .checkbox-line,
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] .account-discount-scope .checkbox-line {
  display: grid !important;
  grid-template-columns: 16px minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 7px !important;
  overflow: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] :where(#accountDiscountForm, .account-discount-form, .account-discount-scope) {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 8px !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] :where(#accountDiscountForm, .account-discount-form, .account-discount-scope) > * {
  flex: 1 1 180px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] .account-discount-scope > label.checkbox-line {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] .account-discount-scope {
  flex: 1 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

@media (max-width: 820px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] .account-discount-scope > label.checkbox-line {
    flex: 1 1 140px !important;
    min-width: 0 !important;
  }
}

/* Absolute final guard: inactive admin panels must never leak into another screen. */
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard > .tab-panel.hidden,
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard > .workspace.hidden,
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard > [data-tab-panel].hidden {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Final light contrast pass for admin business panels. */
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
  [data-tab-panel="overview"],
  [data-tab-panel="calculator"],
  [data-tab-panel="data-quality"],
  [data-tab-panel="staff"]
) {
  color: #07182d !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
  [data-tab-panel="overview"],
  [data-tab-panel="calculator"],
  [data-tab-panel="data-quality"],
  [data-tab-panel="staff"]
) :where(
  .cockpit-head,
  .servicecenter-cockpit,
  .servicecenter-kpi,
  .daily-priority,
  .action-dossier,
  .action-dossier-main,
  .action-dossier-details,
  .summary-card,
  .metric-card,
  .stat-card,
  .finance-card,
  .finance-panel,
  .calculator-card,
  .calculator-result,
  .data-quality-card,
  .module-quality-guard,
  .staff-subpanel,
  .staff-card,
  .staff-card-form,
  .staff-table-row,
  .staff-document-row,
  .staff-chat-room,
  .staff-chat-channel,
  .staff-time-card,
  .settings-help,
  .badge,
  .warning
) {
  border-color: #d8e1eb !important;
  background: #ffffff !important;
  color: #07182d !important;
  box-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
  [data-tab-panel="overview"],
  [data-tab-panel="calculator"],
  [data-tab-panel="data-quality"],
  [data-tab-panel="staff"]
) :where(
  h1,
  h2,
  h3,
  h4,
  strong,
  b,
  label,
  summary,
  button,
  .button,
  .as-button,
  .servicecenter-kpi strong,
  .action-dossier-main strong
) {
  color: #07182d !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
  [data-tab-panel="overview"],
  [data-tab-panel="calculator"],
  [data-tab-panel="data-quality"],
  [data-tab-panel="staff"]
) :where(
  p,
  small,
  span,
  em,
  li,
  td,
  th,
  .servicecenter-kpi span,
  .action-dossier-main small,
  .action-dossier-main b,
  .action-dossier-main em,
  .daily-priority span,
  .daily-priority small,
  .daily-priority em,
  .settings-help,
  .badge,
  .warning
) {
  color: #526173 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
  [data-tab-panel="overview"],
  [data-tab-panel="calculator"],
  [data-tab-panel="data-quality"],
  [data-tab-panel="staff"]
) :where(.servicecenter-kpi.warning, .daily-priority, .action-dossier.priority-high, .action-dossier.priority-medium, .badge, .warning) {
  border-color: #f5b46b !important;
  background: #fff7ed !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
  [data-tab-panel="overview"],
  [data-tab-panel="calculator"],
  [data-tab-panel="data-quality"],
  [data-tab-panel="staff"]
) :where(.daily-priority.critical, .action-dossier.priority-critical) {
  border-color: #f2a6a6 !important;
  background: #fff5f5 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
  [data-tab-panel="overview"],
  [data-tab-panel="calculator"],
  [data-tab-panel="data-quality"],
  [data-tab-panel="staff"]
) :where(.daily-priority.low, .action-tile.positive) {
  border-color: #9bd8cb !important;
  background: #f0fdfa !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
  [data-tab-panel="overview"],
  [data-tab-panel="calculator"],
  [data-tab-panel="data-quality"],
  [data-tab-panel="staff"]
) :where(.filter-tabs button, .segmented button, .tab-chip, .staff-chat-channel) {
  border: 1px solid #d8e1eb !important;
  background: #f7fafd !important;
  color: #07182d !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
  [data-tab-panel="overview"],
  [data-tab-panel="calculator"],
  [data-tab-panel="data-quality"],
  [data-tab-panel="staff"]
) :where(.filter-tabs button.active, .segmented button.active, .tab-chip.active, .staff-chat-channel.active) {
  border-color: #ff8200 !important;
  background: #fff1df !important;
  color: #07182d !important;
}

/* Phone-specific admin cockpit: readable app layout instead of squeezed desktop columns. */
@media (max-width: 820px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;
    max-height: 56px !important;
    padding: 8px 10px !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .brand {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 40px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .brand img,
  html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .brand img[src*="profix24-logo"] {
    width: 118px !important;
    max-width: 42vw !important;
    height: auto !important;
    max-height: 34px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .brand .admin-title {
    display: none !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar nav {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 40px !important;
    overflow: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .language-select {
    width: min(180px, 44vw) !important;
    min-width: 0 !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard > .admin-tabs {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    padding: 10px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(.admin-nav-block, .admin-nav-primary, .admin-nav-workspace, .admin-nav-communication, .admin-nav-bottom, .admin-tab-group, .admin-tab-list, .admin-tabs-list, nav, .communication-actions, .system-switch) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 6px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-primary {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(button, a, select, details, summary) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    white-space: normal !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #overviewPanel,
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="overview"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    .servicecenter-cockpit,
    .servicecenter-cockpit > *,
    .servicecenter-layout,
    .servicecenter-queue,
    .servicecenter-side,
    .servicecenter-routing-card,
    .landlord-first-card,
    .servicecenter-live-map-card,
    .servicecenter-ticket-list,
    .servicecenter-map-strip
  ) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    .cockpit-head,
    .panel-head,
    .compact-head,
    .servicecenter-routing-grid,
    .servicecenter-kpis,
    .live-map-tools,
    .live-map-legend
  ) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    .servicecenter-kpi,
    .servicecenter-routing-tile,
    .servicecenter-ticket,
    .servicecenter-ticket-main,
    .servicecenter-map-row,
    .daily-priority,
    .action-dossier,
    .summary-card,
    .metric-card,
    .stat-card
  ) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 9px !important;
    gap: 4px !important;
    overflow: hidden !important;
    text-align: left !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    .servicecenter-kpi *,
    .servicecenter-routing-tile *,
    .servicecenter-ticket *,
    .servicecenter-ticket-main *,
    .servicecenter-map-row *,
    .daily-priority *,
    .action-dossier *,
    .summary-card *,
    .metric-card *,
    .stat-card *
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    .servicecenter-routing-tile b,
    .servicecenter-kpi strong
  ) {
    justify-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 16px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(.servicecenter-live-map) {
    min-height: 260px !important;
    height: 280px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(.servicecenter-map-canvas, .leaflet-container) {
    min-height: 260px !important;
    height: 280px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    #calculatorPanel,
    .calculator-shell,
    #businessCalculatorForm,
    #businessCalculatorResult,
    .calculator-capacity
  ) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard .calculator-capacity :where(span, small, b, em) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-footer {
    position: relative !important;
    padding: 10px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) :where(.admin-page-footer, .admin-footer, footer) {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 10px !important;
  }
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard .servicecenter-map-row span {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  text-overflow: clip !important;
}

/* Hard guard: servicecenter routing tiles may never squeeze descriptions into the badge column. */
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard .servicecenter-routing-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard .servicecenter-routing-tile {
  grid-template-columns: minmax(180px, 1fr) auto !important;
  align-items: start !important;
  overflow: visible !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard .servicecenter-routing-tile > span {
  min-width: 180px !important;
  max-width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard .servicecenter-routing-tile > :where(em, small) {
  grid-column: 1 / -1 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

@media (max-width: 820px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard .servicecenter-routing-grid {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard .servicecenter-routing-tile {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard .servicecenter-routing-tile > span {
    min-width: 0 !important;
  }
}

/* Admin menu completion: mail and administration must be easy to find without long noisy pages. */
html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct-actions {
  display: grid !important;
  gap: 6px !important;
  padding: 8px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 7px 8px !important;
  color: var(--pf24-text) !important;
  background: var(--pf24-panel-soft) !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct:hover,
html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct:focus-visible {
  border-color: rgba(245, 130, 32, .55) !important;
  background: #fff7ed !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--pf24-text) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct b {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 22px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid var(--pf24-line) !important;
  color: var(--pf24-text) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .portal-assistant-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .voice-menu-icon-button {
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  overflow: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .voice-menu-icon-button :where(.voice-menu-icon, .voice-message-icon) {
  position: static !important;
  inset: auto !important;
  display: block !important;
  place-self: center !important;
  margin: 0 !important;
  transform: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .voice-menu-status {
  display: block !important;
  width: 100% !important;
  margin-top: 6px !important;
  padding: 6px 8px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--pf24-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  white-space: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .voice-menu-status.hidden {
  display: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .voice-command-panel,
html body.admin-body.active:has(#dashboard:not(.hidden)) .voice-command-result {
  border: 1px solid var(--pf24-line) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: var(--pf24-text) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(.voice-command-head strong, .voice-result-head strong) {
  color: var(--pf24-heading) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(.voice-command-head small, .voice-result-head small, .voice-command-actions .form-message, .voice-command-result p, .voice-command-result li) {
  color: var(--pf24-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .voice-command-examples button {
  min-height: 30px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--pf24-text) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .voice-command-examples button:hover,
html body.admin-body.active:has(#dashboard:not(.hidden)) .voice-command-examples button:focus-visible {
  border-color: rgba(245, 130, 32, .55) !important;
  background: #fff7ed !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .voice-result-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .voice-result-grid span {
  min-width: 0 !important;
  padding: 8px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 8px !important;
  background: var(--pf24-soft) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .voice-result-grid small {
  display: block !important;
  color: var(--pf24-muted) !important;
  font-size: 11px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .voice-result-grid strong {
  display: block !important;
  color: var(--pf24-heading) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-workspace,
html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-document-launchpad {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-folder-tabs,
html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-document-actions,
html body.admin-body.active:has(#dashboard:not(.hidden)) .document-quick-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-folder-tabs button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 32px !important;
  padding: 6px 9px !important;
  color: var(--pf24-text) !important;
  background: var(--pf24-panel-soft) !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-folder-tabs button.active {
  background: #fff7ed !important;
  border-color: rgba(245, 130, 32, .55) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-folder-tabs button b {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 22px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--pf24-text) !important;
  font-size: 11px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-row-list {
  display: grid !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-row-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto minmax(190px, auto) !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 9px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 10px !important;
  background: var(--pf24-panel-soft) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-row-card.active,
html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-row-card.unread {
  border-color: rgba(255, 130, 0, .5) !important;
  background: #fff8ef !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-row-card.read:not(.active) {
  background: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-row-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-row-card :where(strong, small, span) {
  min-width: 0 !important;
  color: var(--pf24-text) !important;
  overflow-wrap: anywhere !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-row-card small {
  display: block !important;
  color: var(--pf24-muted) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-read-pane {
  display: grid !important;
  gap: 10px !important;
  margin-top: 10px !important;
  padding: 12px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: var(--pf24-text) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-read-pane.empty {
  background: var(--pf24-panel-soft) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-read-pane header,
html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-read-actions,
html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-delivery-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-read-pane header strong {
  display: block !important;
  color: var(--pf24-heading) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-read-pane :where(p, small, span, label) {
  color: var(--pf24-text) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-read-body {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-read-body p {
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 10px !important;
  background: var(--pf24-panel-soft) !important;
  white-space: pre-wrap !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-delivery-list span {
  display: grid !important;
  gap: 2px !important;
  min-width: 120px !important;
  padding: 7px 8px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-draft-editor {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 130, 0, .32) !important;
  border-radius: 10px !important;
  background: #fff8ef !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-draft-editor label {
  display: grid !important;
  gap: 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-read-actions {
  justify-content: flex-start !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-read-actions .button,
html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-row-actions .button {
  color: var(--pf24-text) !important;
  background: #ffffff !important;
  border: 1px solid var(--pf24-line) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-read-actions .danger-soft {
  border-color: #f4b0a6 !important;
  background: #fff3f1 !important;
  color: #8a281e !important;
}

@media (max-width: 980px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-row-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-row-actions {
    justify-content: flex-start !important;
  }
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-quick-draft {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
  gap: 10px !important;
  align-items: start !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-quick-context {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-quick-context strong {
  color: var(--pf24-text) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-quick-context small {
  color: var(--pf24-muted) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-quick-draft label {
  display: grid !important;
  gap: 4px !important;
  color: var(--pf24-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-quick-draft > label,
html body.admin-body.active:has(#dashboard:not(.hidden)) .document-quick-context,
html body.admin-body.active:has(#dashboard:not(.hidden)) .document-line-builder,
html body.admin-body.active:has(#dashboard:not(.hidden)) .document-quick-actions,
html body.admin-body.active:has(#dashboard:not(.hidden)) .generated-document-list {
  grid-column: 1 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-live-preview {
  grid-column: 2 !important;
  grid-row: 1 / span 7 !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-line-builder {
  display: grid !important;
  gap: 7px !important;
  padding: 9px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-line-head,
html body.admin-body.active:has(#dashboard:not(.hidden)) .document-quick-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-lines {
  display: grid !important;
  gap: 6px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-line-row {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.4fr) minmax(72px, .45fr) minmax(78px, .45fr) minmax(92px, .55fr) minmax(92px, .55fr) 32px !important;
  gap: 6px !important;
  align-items: end !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-line-row .icon-button {
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-sheet {
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-sheet header,
html body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-sheet footer {
  display: grid !important;
  gap: 4px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-sheet strong,
html body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-sheet b {
  color: var(--pf24-text) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-sheet small {
  color: var(--pf24-muted) !important;
  font-size: 11px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-lines {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 5px 9px !important;
  font-size: 12px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-lines span {
  min-width: 0 !important;
  color: var(--pf24-text) !important;
  overflow-wrap: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-sheet footer {
  grid-template-columns: 1fr !important;
  border-top: 1px solid var(--pf24-line) !important;
  padding-top: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-sheet footer span {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .generated-document-list {
  display: grid !important;
  gap: 6px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .generated-document-list > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .generated-document-list > header span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .generated-document-list > header small {
  color: var(--pf24-muted) !important;
  font-size: 11px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .generated-document-list > header b {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 26px !important;
  height: 22px !important;
  border-radius: 999px !important;
  border: 1px solid var(--pf24-line) !important;
  background: #ffffff !important;
  color: var(--pf24-text) !important;
  font-size: 11px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-agent-panel {
  display: grid !important;
  gap: 6px !important;
  padding: 8px !important;
  border: 1px solid rgba(245, 130, 32, .45) !important;
  border-radius: 10px !important;
  background: #fff7ed !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-agent-panel.ok {
  border-color: var(--pf24-line) !important;
  background: var(--pf24-panel-soft) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-agent-panel span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-agent-panel :where(strong, b, small) {
  color: var(--pf24-text) !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .document-agent-panel small {
  color: var(--pf24-muted) !important;
  font-size: 11px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .generated-document-list article {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.2fr) minmax(120px, .7fr) minmax(90px, .55fr) minmax(120px, .65fr) minmax(92px, .55fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 8px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 10px !important;
  background: var(--pf24-panel-soft) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .generated-document-list article > span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .generated-document-list article :where(b, small) {
  color: var(--pf24-text) !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .generated-document-list article small {
  color: var(--pf24-muted) !important;
  font-size: 11px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .finance-priority :where(h3, p, strong, span, small, b),
html body.admin-body.active:has(#dashboard:not(.hidden)) .finance-priority-card :where(strong, span, small, b) {
  color: var(--pf24-text) !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitoring-center {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-role-lanes {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-role-lanes button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 7px 9px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 9px !important;
  background: var(--pf24-panel-soft) !important;
  color: var(--pf24-text) !important;
  text-align: left !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-role-lanes strong {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 24px !important;
  height: 22px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid var(--pf24-line) !important;
  color: var(--pf24-text) !important;
  font-size: 12px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-role-lanes span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--pf24-text) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 10px !important;
  background: var(--pf24-panel-soft) !important;
  color: var(--pf24-text) !important;
  text-align: left !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-card.warning,
html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-card.action {
  border-color: rgba(245, 130, 32, .45) !important;
  background: #fff7ed !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-card.critical {
  border-color: rgba(185, 28, 28, .35) !important;
  background: #fff5f5 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-card.positive {
  border-color: rgba(22, 101, 52, .25) !important;
  background: #f0fdf4 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-card > span {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-card > span:last-child {
  justify-items: end !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-card :where(strong, b, small, em) {
  color: var(--pf24-text) !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-card strong {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-card small,
html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-card em {
  color: var(--pf24-muted) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-style: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .internal-monitor-card b {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 28px !important;
  height: 24px !important;
  padding: 0 7px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  font-size: 12px !important;
}

/* Production layout guard: forms and cards may never collapse into unreadable columns. */
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
  .guided-intake-form,
  .intake-field-grid,
  .admin-intake-card-grid,
  .intake-customer-list,
  .request-dashboard-grid,
  .finance-layout,
  .finance-grid,
  .finance-summary-grid,
  .finance-kpi-grid,
  .finance-ledger-grid,
  .finance-reconciliation-grid,
  .payout-list,
  .payout-row,
  .settlement-row,
  .settings-layout,
  .settings-grid,
  .settings-form,
  #settingsForm,
  .calculator-shell,
  .calculator-grid,
  .calculator-scenario-grid,
  .calculator-capacity,
  .data-quality-layout,
  .data-quality-grid,
  .staff-layout,
  .staff-grid
) {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
  .calculator-scenario-grid,
  .calculator-capacity,
  .finance-summary-grid,
  .finance-kpi-grid,
  .data-quality-grid,
  .staff-grid
) {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
  .calculator-capacity > *,
  .calculator-scenario-grid > *,
  .finance-summary-grid > *,
  .finance-kpi-grid > *,
  .data-quality-grid > *,
  .staff-grid > *,
  .payout-row > *,
  .settlement-row > *
) {
  min-width: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

@media (max-width: 900px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) .mail-row-card,
  html body.admin-body.active:has(#dashboard:not(.hidden)) .document-quick-draft {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .portal-assistant-actions {
    justify-content: center !important;
  }
}

/* Final anti-squeeze pass for every admin tab, including legacy grid class names. */
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
  [data-tab-panel="calculator"] [class*="grid"],
  [data-tab-panel="calculator"] [class*="capacity"],
  [data-tab-panel="finance"] [class*="grid"],
  [data-tab-panel="finance"] [class*="row"],
  [data-tab-panel="settings"] [class*="grid"],
  [data-tab-panel="settings"] [class*="scope"],
  [data-tab-panel="settings"] #accountDiscountForm
) {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
  [data-tab-panel="calculator"] [class*="grid"] > *,
  [data-tab-panel="calculator"] [class*="capacity"] > *,
  [data-tab-panel="finance"] [class*="grid"] > *,
  [data-tab-panel="finance"] [class*="row"] > *,
  [data-tab-panel="settings"] [class*="grid"] > *,
  [data-tab-panel="settings"] [class*="scope"] > *,
  [data-tab-panel="settings"] #accountDiscountForm > *,
  [data-tab-panel="data-quality"] button
) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] :where(.checkbox-line, label) {
  width: 100% !important;
  min-width: 160px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] :where(.checkbox-line span, label span) {
  width: auto !important;
  min-width: 0 !important;
}

@media (max-width: 820px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    [data-tab-panel]:not(.hidden) form,
    [data-tab-panel]:not(.hidden) fieldset,
    [data-tab-panel]:not(.hidden) [class*="grid"],
    [data-tab-panel]:not(.hidden) [class*="layout"],
    [data-tab-panel]:not(.hidden) [class*="row"],
    [data-tab-panel]:not(.hidden) [class*="list"],
    [data-tab-panel]:not(.hidden) [class*="matrix"]
  ) {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    [data-tab-panel]:not(.hidden) form > *,
    [data-tab-panel]:not(.hidden) fieldset > *,
    [data-tab-panel]:not(.hidden) [class*="grid"] > *,
    [data-tab-panel]:not(.hidden) [class*="layout"] > *,
    [data-tab-panel]:not(.hidden) [class*="row"] > *,
    [data-tab-panel]:not(.hidden) [class*="list"] > *,
    [data-tab-panel]:not(.hidden) [class*="matrix"] > *
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    [data-tab-panel]:not(.hidden) label,
    [data-tab-panel]:not(.hidden) input,
    [data-tab-panel]:not(.hidden) select,
    [data-tab-panel]:not(.hidden) textarea,
    [data-tab-panel]:not(.hidden) button
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    .guided-intake-form,
    .intake-field-grid,
    .admin-intake-card-grid,
    .intake-customer-list,
    .request-dashboard-grid,
    .finance-layout,
    .finance-grid,
    .finance-summary-grid,
    .finance-kpi-grid,
    .finance-ledger-grid,
    .finance-reconciliation-grid,
    .payout-list,
    .payout-row,
    .settlement-row,
    .settings-layout,
    .settings-grid,
    .settings-form,
    #settingsForm,
    .calculator-shell,
    .calculator-grid,
    .calculator-scenario-grid,
    .calculator-capacity,
    .data-quality-layout,
    .data-quality-grid,
    .staff-layout,
    .staff-grid,
    .role-feature-matrix,
    .role-feature-row,
    .acceptance-list,
    .acceptance-item
  ) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    .guided-intake-form > *,
    .intake-field-grid > *,
    .admin-intake-card-grid > *,
    .request-dashboard-grid > *,
    .finance-layout > *,
    .finance-grid > *,
    .finance-summary-grid > *,
    .finance-kpi-grid > *,
    .finance-ledger-grid > *,
    .finance-reconciliation-grid > *,
    .payout-list > *,
    .payout-row > *,
    .settlement-row > *,
    .settings-layout > *,
    .settings-grid > *,
    .settings-form > *,
    #settingsForm > *,
    .calculator-shell > *,
    .calculator-grid > *,
    .calculator-scenario-grid > *,
    .calculator-capacity > *,
    .data-quality-layout > *,
    .data-quality-grid > *,
    .staff-layout > *,
    .staff-grid > *,
    .role-feature-row > *,
    .acceptance-list > *,
    .acceptance-item > *
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    input,
    select,
    textarea,
    button,
    .button,
    .plain-btn,
    .secondary-action,
    label,
    summary
  ) {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(.checkbox-line, .switch-line) {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 8px !important;
    min-height: 32px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(.checkbox-line input[type="checkbox"], .switch-line input[type="checkbox"]) {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
  }
}

/* Actual final guard: this must stay last so legacy admin layouts cannot win again. */
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard {
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
  [data-tab-panel="calculator"] [class*="row"],
  [data-tab-panel="calculator"] [class*="grid"],
  [data-tab-panel="calculator"] [class*="capacity"],
  [data-tab-panel="settings"] .settings-shell,
  [data-tab-panel="settings"] #accountDiscountForm,
  [data-tab-panel="settings"] #websiteToolsSwitchboardForm,
  [data-tab-panel="settings"] #integrationCenter,
  [data-tab-panel="settings"] .website-tools-features,
  [data-tab-panel="settings"] .data-sharing-grid,
  [data-tab-panel="settings"] .data-sharing-row
) {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] :where(
  label,
  .checkbox-line,
  fieldset,
  legend,
  button,
  section,
  div
) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] :where(.checkbox-line, fieldset label) {
  display: grid !important;
  grid-template-columns: auto minmax(130px, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] :where(.checkbox-line input[type="checkbox"], fieldset label input[type="checkbox"]) {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
}

@media (max-width: 820px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    [data-tab-panel]:not(.hidden) form,
    [data-tab-panel]:not(.hidden) fieldset,
    [data-tab-panel]:not(.hidden) label,
    [data-tab-panel]:not(.hidden) [class*="grid"],
    [data-tab-panel]:not(.hidden) [class*="row"],
    [data-tab-panel]:not(.hidden) [class*="list"],
    [data-tab-panel]:not(.hidden) [class*="layout"],
    [data-tab-panel]:not(.hidden) [class*="matrix"],
    [data-tab-panel]:not(.hidden) [class*="scope"],
    [data-tab-panel]:not(.hidden) [class*="features"],
    [data-tab-panel]:not(.hidden) [class*="capacity"]
  ) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    [data-tab-panel]:not(.hidden) form > *,
    [data-tab-panel]:not(.hidden) fieldset > *,
    [data-tab-panel]:not(.hidden) label > *,
    [data-tab-panel]:not(.hidden) [class*="grid"] > *,
    [data-tab-panel]:not(.hidden) [class*="row"] > *,
    [data-tab-panel]:not(.hidden) [class*="list"] > *,
    [data-tab-panel]:not(.hidden) [class*="layout"] > *,
    [data-tab-panel]:not(.hidden) [class*="matrix"] > *,
    [data-tab-panel]:not(.hidden) [class*="scope"] > *,
    [data-tab-panel]:not(.hidden) [class*="features"] > *,
    [data-tab-panel]:not(.hidden) [class*="capacity"] > *
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    [data-tab-panel]:not(.hidden) input,
    [data-tab-panel]:not(.hidden) select,
    [data-tab-panel]:not(.hidden) textarea,
    [data-tab-panel]:not(.hidden) button,
    [data-tab-panel]:not(.hidden) .plain-btn,
    [data-tab-panel]:not(.hidden) .button
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    [data-tab-panel]:not(.hidden) .checkbox-line,
    [data-tab-panel]:not(.hidden) .switch-line
  ) {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard :where(
    [data-tab-panel]:not(.hidden) .checkbox-line input[type="checkbox"],
    [data-tab-panel]:not(.hidden) .switch-line input[type="checkbox"]
  ) {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
  }
}

/* Last source-of-truth corrections for remaining desktop admin squeeze. */
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm.business-calculator-grid {
  grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr) !important;
  align-items: start !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .compact-input-card {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm :where(.calculator-lines, .calculator-lines .business-row, .calculator-lines .business-row-head) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 7px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .calculator-ai-savings {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .calculator-ai-savings > span {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] #branchProfileReleaseForm.branch-release-form,
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] .integration-compact-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] #branchProfileReleaseForm .settings-actions {
  display: grid !important;
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] #branchProfileReleaseForm .settings-actions button {
  width: auto !important;
  min-width: 220px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] .integration-status-row > summary {
  display: grid !important;
  grid-template-columns: minmax(230px, 1.3fr) minmax(220px, 1fr) minmax(140px, auto) !important;
  gap: 8px !important;
  align-items: center !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] .integration-status-row > summary :where(span, small, strong, b) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

/* Overflow kill-switch for the two remaining desktop legacy panels. */
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .calculator-lines,
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .calculator-lines * {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .calculator-lines :where(.business-row, .business-row-head) {
  grid-template-columns: 1fr !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] #branchProfileReleaseForm.branch-release-form,
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] #branchProfileReleaseForm .switchboard-status-strip,
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] #branchProfileReleaseForm .settings-actions,
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] .integration-status-row > summary {
  grid-template-columns: 1fr !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] #branchProfileReleaseForm .settings-actions button {
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 820px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm.business-calculator-grid,
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .compact-input-card,
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm :where(.calculator-lines, .calculator-lines .business-row, .calculator-lines .business-row-head),
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .calculator-ai-savings,
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] #branchProfileReleaseForm .settings-actions,
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] .integration-status-row > summary {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] #branchProfileReleaseForm .settings-actions button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Final-final: long technical calculator and integration labels must wrap inside their cards. */
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .calculator-lines,
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard #businessCalculatorForm .calculator-lines * {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  white-space: normal !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] :where(.integration-category-group, .integration-compact-list, .integration-status-row, .integration-status-row > summary) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="settings"] .integration-status-row > summary :where(span, small, strong, b) {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  white-space: normal !important;
}

/* Module status/backlog cards must use real card widths in the role sweep. */
html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="module-status"] :where(
  .module-action-grid,
  .module-status-grid,
  .module-status-kpi,
  .launch-readiness-grid,
  .demo-readiness-grid,
  .integration-impact-grid
) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="module-status"] :where(
  .module-action-card,
  .module-action-head,
  .module-status-card,
  .launch-readiness-card,
  .demo-readiness-card,
  .integration-impact-card
) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="module-status"] :where(
  .module-action-card *,
  .module-action-head *,
  .module-status-card *,
  .launch-readiness-card *,
  .demo-readiness-card *,
  .integration-impact-card *
) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="module-status"] :where(
  [class*="grid"],
  [class*="row"],
  [class*="list"],
  [class*="card"],
  [class*="item"],
  [class*="panel"],
  article,
  details,
  section
) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="module-status"] :where(
  [class*="grid"],
  [class*="list"]
) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="module-status"] :where(
  [class*="row"],
  [class*="card"],
  [class*="item"],
  article
) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard [data-tab-panel="module-status"] :where(strong, b, span, small, p, li) {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

/* Release guardian: never let compact cards turn text into vertical columns. */
:where(body.admin-body, body.portal-active, body.login-entry, body.public-site, body.workapp-entry, body.klantapp-entry)
  :where(h1, h2, h3, h4, h5, h6, p, span, small, em, strong, b, label, legend, summary, li, td, th, a, button) {
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard
  :where(.metrics, .overview-grid, .finance-grid, .kpi-grid, .analytics-grid, .contract-kpi-strip, .contract-document-grid, .contract-lock-grid) {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard
  :where(.contract-shell, .contract-section, .contract-export-card, .contract-document-grid, .contract-lock-grid, .contract-flow-list, .contract-log-list, .contract-document-card, .contract-risk-lock, .contract-flow-row, .contract-log-row, .contract-log-empty) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard
  :where(.contract-document-card, .contract-risk-lock, .contract-flow-row, .contract-log-row) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard
  :where(.contract-document-head, .contract-document-meta, .contract-flow-row, .contract-log-row) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard
  :where(.contract-document-card *, .contract-risk-lock *, .contract-flow-row *, .contract-log-row *, .contract-log-empty *) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  white-space: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard
  :where(.metric-card strong, .kpi-card strong, .stat-card strong, .overview-card strong, .finance-card strong, .finance-summary strong, .contract-kpi-strip strong) {
  font-size: 15px !important;
  line-height: 1.18 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard
  :where(.finance-workspace, [data-tab-panel="finance"], .finance-summary-strip, .finance-priority-grid, .finance-columns, .finance-chart-block, .finance-beta-results)
  :where(strong, b, .amount, .total, .value, [class*="amount"], [class*="total"], [class*="value"]) {
  font-size: 15px !important;
  line-height: 1.18 !important;
  font-weight: 750 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard
  :where(.branch-workspace, [data-tab-panel="branches"]) :where(span, small, strong, b, p, li) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard
  :where(.community-workspace, .community-main, [data-tab-panel="community"] *) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

@media (max-width: 820px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard
    :where(.metrics, .overview-grid, .finance-grid, .kpi-grid, .analytics-grid, .contract-kpi-strip, .contract-document-grid, .contract-lock-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard
    :where(.contract-document-head, .contract-document-meta, .contract-flow-row, .contract-log-row) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* Customer local services and home dossier: compact consumer workflow. */
body.customer-portal-active.portal-active :where(.individual-home-panel, .local-entrepreneurs-panel) {
  display: grid;
  gap: 12px;
}

body.customer-portal-active.portal-active :where(.home-maintenance-grid, .local-service-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

body.customer-portal-active.portal-active :where(.home-maintenance-grid article, .local-service-card) {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(19, 40, 58, .12);
  border-radius: 8px;
  background: #fff;
  color: #13283a;
}

body.customer-portal-active.portal-active :where(.home-maintenance-grid article.attention) {
  border-color: rgba(245, 130, 32, .5);
  background: #fff8ef;
}

body.customer-portal-active.portal-active :where(.home-maintenance-grid svg, .local-service-card > svg) {
  width: 22px;
  height: 22px;
  color: #f58220;
}

body.customer-portal-active.portal-active :where(.home-maintenance-grid span, .local-service-card div) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body.customer-portal-active.portal-active :where(.home-maintenance-grid strong, .local-service-card strong) {
  font-size: .96rem;
  line-height: 1.25;
}

body.customer-portal-active.portal-active :where(.home-maintenance-grid small, .home-maintenance-grid em, .local-service-card small, .local-service-card span, .local-service-card em) {
  font-size: .82rem;
  line-height: 1.35;
  color: #52677a;
  font-style: normal;
}

body.customer-portal-active.portal-active .local-service-card form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

body.customer-portal-active.portal-active .local-service-card form .wide {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  body.customer-portal-active.portal-active :where(.home-maintenance-grid, .local-service-grid) {
    grid-template-columns: 1fr;
  }

body.customer-portal-active.portal-active .local-service-card form {
    grid-template-columns: 1fr;
  }
}

/* Definitieve lichte compacte werkruimte - brede audit 2026-08-12.
   Deze laag voorkomt dat oude detailregels tekst opnieuw in verticale kolommen persen. */
html[data-theme],
html {
  color-scheme: light !important;
}

html :where(body.admin-body, body.portal-active, body.login-entry, body.workapp-entry, body.klantapp-entry) {
  --pf24-bg: #f4f8fb;
  --pf24-panel: #ffffff;
  --pf24-panel-soft: #f8fbfd;
  --pf24-soft: #eef5fa;
  --pf24-line: #d9e4ed;
  --pf24-heading: #0a2036;
  --pf24-text: #1d3348;
  --pf24-muted: #637487;
  --pf24-orange: #ff8200;
  background: var(--pf24-bg) !important;
  color: var(--pf24-text) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

html :where(body.admin-body, body.portal-active, body.login-entry, body.workapp-entry, body.klantapp-entry) *,
html :where(body.admin-body, body.portal-active, body.login-entry, body.workapp-entry, body.klantapp-entry) *::before,
html :where(body.admin-body, body.portal-active, body.login-entry, body.workapp-entry, body.klantapp-entry) *::after {
  box-sizing: border-box !important;
}

html :where(body.admin-body, body.portal-active, body.login-entry, body.workapp-entry, body.klantapp-entry)
  :where(h1, h2, h3, h4, h5, h6, p, span, small, em, strong, b, label, legend, summary, li, td, th, a, button, input, select, textarea) {
  min-width: 0 !important;
  max-width: 100% !important;
  color: inherit;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  white-space: normal !important;
  letter-spacing: 0 !important;
}

html :where(body.admin-body, body.portal-active, body.login-entry) :where(h1, h2, h3) {
  color: var(--pf24-heading) !important;
  font-weight: 760 !important;
  line-height: 1.18 !important;
}

html :where(body.admin-body, body.portal-active, body.login-entry) h1 { font-size: 24px !important; }
html :where(body.admin-body, body.portal-active, body.login-entry) h2 { font-size: 20px !important; }
html :where(body.admin-body, body.portal-active, body.login-entry) h3 { font-size: 16px !important; }

html :where(body.admin-body, body.portal-active, body.login-entry)
  :where(.topbar, .portal-topbar) {
  background: #ffffff !important;
  border-bottom: 1px solid var(--pf24-line) !important;
  color: var(--pf24-text) !important;
  box-shadow: 0 8px 24px rgba(7, 26, 47, .06) !important;
}

html :where(body.admin-body, body.portal-active, body.login-entry) :where(.brand, .public-brand, .portal-sidebar-brand, .professional-sidebar-brand) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  overflow: visible !important;
  background: transparent !important;
}

html :where(body.admin-body, body.portal-active, body.login-entry) :where(.brand img, .portal-sidebar-brand img, .professional-sidebar-brand img) {
  display: block !important;
  width: auto !important;
  max-width: 178px !important;
  height: auto !important;
  max-height: 54px !important;
  object-fit: contain !important;
  object-position: center !important;
  overflow: visible !important;
  background: transparent !important;
  filter: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell {
  display: block !important;
  width: 100% !important;
  min-height: calc(100vh - 64px) !important;
  overflow: visible !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
  display: grid !important;
  grid-template-columns: 236px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - 64px) !important;
  overflow: visible !important;
  padding: 14px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
  position: sticky !important;
  top: 78px !important;
  align-self: start !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 236px !important;
  max-width: 236px !important;
  max-height: calc(100vh - 96px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(.admin-nav-block, .admin-nav-bottom, .admin-nav-primary, .admin-nav-direct-actions) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-caption {
  display: block !important;
  color: var(--pf24-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(a, button, summary, select, .admin-nav-direct, .portal-sidebar-logout) {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 34px !important;
  padding: 7px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--pf24-text) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(a.active, a[aria-current="page"], button.active, details[open] > summary) {
  border-color: rgba(255, 130, 0, .38) !important;
  background: #fff3e4 !important;
  color: var(--pf24-heading) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(svg, i[data-lucide]) {
  width: 16px !important;
  height: 16px !important;
  color: currentColor !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(.admin-nav-block, .admin-nav-primary, .admin-nav-communication, .admin-nav-direct-actions, .admin-nav-bottom) {
  max-height: none !important;
  overflow: visible !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .portal-assistant-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(.voice-menu-icon-button, .portal-assistant-actions .voice-menu-icon-button),
html body.portal-active :where(.voice-menu-icon-button, .portal-assistant-actions .voice-menu-icon-button) {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid #df6e00 !important;
  background: var(--pf24-orange) !important;
  color: #102438 !important;
  overflow: hidden !important;
}

html :where(body.admin-body, body.portal-active) :where(.voice-menu-icon, .voice-message-icon) {
  position: static !important;
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  min-height: 21px !important;
  margin: 0 !important;
  transform: none !important;
  place-self: center !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 21px 21px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .tab-panel:not(.hidden) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html :where(body.admin-body.active:has(#dashboard:not(.hidden)), body.portal-active) :where(
  .metrics,
  .overview-grid,
  .request-dashboard-grid,
  .finance-grid,
  .kpi-grid,
  .analytics-grid,
  .contract-kpi-strip,
  .contract-document-grid,
  .contract-lock-grid,
  .business-operations-grid,
  .business-domain-grid,
  .internal-monitor-grid,
  .mail-row-list,
  .package-grid,
  .customer-request-grid,
  .professional-dashboard-grid
) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html :where(body.admin-body.active:has(#dashboard:not(.hidden)), body.portal-active) :where(
  article,
  section,
  details,
  fieldset,
  form,
  .card,
  .panel,
  .metric-card,
  .overview-card,
  .dashboard-card,
  .summary-card,
  .stat-card,
  .finance-card,
  .request-card,
  .customer-request-card,
  .professional-card,
  .business-domain-chip,
  .business-operations-action,
  .internal-monitor-card,
  .mail-row-card
) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  color: var(--pf24-text) !important;
}

html :where(body.admin-body.active:has(#dashboard:not(.hidden)), body.portal-active) :where(
  article *,
  section *,
  details *,
  fieldset *,
  form *,
  .card *,
  .panel *,
  .metric-card *,
  .overview-card *,
  .dashboard-card *,
  .summary-card *,
  .stat-card *,
  .finance-card *,
  .request-card *,
  .customer-request-card *,
  .professional-card *,
  .business-domain-chip *,
  .business-operations-action *,
  .internal-monitor-card *,
  .mail-row-card *
) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

html :where(body.admin-body.active:has(#dashboard:not(.hidden)), body.portal-active) :where(input, select, textarea) {
  width: 100% !important;
  min-height: 36px !important;
  border: 1px solid var(--pf24-line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--pf24-text) !important;
  font-size: 13px !important;
}

html :where(body.admin-body.active:has(#dashboard:not(.hidden)), body.portal-active) :where(button, .button, .plain-btn) {
  min-height: 34px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

@media (max-width: 860px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(a, button, summary, select, .admin-nav-direct, .portal-sidebar-logout) {
    min-height: 38px !important;
  }

  html :where(body.admin-body.active:has(#dashboard:not(.hidden)), body.portal-active) :where(
    .metrics,
    .overview-grid,
    .request-dashboard-grid,
    .finance-grid,
    .kpi-grid,
    .analytics-grid,
    .contract-kpi-strip,
    .contract-document-grid,
    .contract-lock-grid,
    .business-operations-grid,
    .business-domain-grid,
    .internal-monitor-grid,
    .mail-row-list,
    .customer-request-grid,
    .professional-dashboard-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Requests hotfix from real Chrome screenshot - 2026-08-12 */
html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct-actions {
  order: 2 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-communication {
  order: 3 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-bottom {
  order: 4 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct-actions .admin-nav-direct,
html body.admin-body.active:has(#dashboard:not(.hidden)) .sidebar-chat-compact {
  min-height: 38px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #1d3348 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct-actions .admin-nav-direct:hover,
html body.admin-body.active:has(#dashboard:not(.hidden)) .sidebar-chat-compact:hover {
  border-color: #ffd3a0 !important;
  background: #fff4e7 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-detail-layout,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main {
  overflow: visible !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(
  .detail-head,
  .ticket-regie-strip,
  .ticket-regie-strip article,
  .info-grid,
  .info-grid p,
  .admin-request-process-grid,
  .admin-request-process-grid p,
  .request-detail-foldout,
  .request-detail-foldout > summary,
  .request-detail-foldout-body,
  .description,
  .quote-box,
  .notes,
  .ticket-timeline,
  .update-form,
  .dispute-panel,
  .planning-chat-panel,
  .dispatch-panel,
  .execution-monitor,
  .platform-contribution-panel,
  .payment-correction-panel,
  .ticket-progress,
  .callback-context,
  .callback-context-wide
) {
  position: static !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  border-color: #d8e2ee !important;
  background: #ffffff !important;
  color: #132238 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(
  .detail-head *,
  .ticket-regie-strip *,
  .info-grid *,
  .admin-request-process-grid *,
  .request-detail-foldout *,
  .request-detail-foldout-body *,
  .description *,
  .quote-box *,
  .notes *,
  .ticket-timeline *,
  .update-form *,
  .dispute-panel *,
  .planning-chat-panel *,
  .dispatch-panel *,
  .execution-monitor *,
  .platform-contribution-panel *,
  .payment-correction-panel *,
  .ticket-progress *,
  .callback-context *,
  .callback-context-wide *
) {
  color: #132238 !important;
  opacity: 1 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-regie-strip article {
  display: grid !important;
  gap: 4px !important;
  padding: 10px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 10px !important;
  background: #f8fbfd !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-process-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-process-grid p {
  display: grid !important;
  gap: 3px !important;
  padding: 10px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 10px !important;
  background: #f8fbfd !important;
  line-height: 1.3 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-detail-foldout {
  display: grid !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-detail-foldout > summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  background: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-detail-foldout-body {
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border-top: 1px solid #d8e2ee !important;
  background: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .notes {
  display: grid !important;
  gap: 8px !important;
  padding: 12px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .notes p {
  display: grid !important;
  gap: 4px !important;
  padding: 10px !important;
  border: 1px solid #e7eef6 !important;
  border-radius: 8px !important;
  background: #f8fbfd !important;
}

@media (max-width: 520px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-primary {
    grid-template-columns: 1fr !important;
  }
}

/* Centrale login, taal en instellingen - 2026-08-12 */
html :where(body.admin-body, body.portal-active, body.login-entry, body.public-site) .language-select {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  min-height: 36px !important;
  padding: 6px 22px 6px 8px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  color: #132238 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

html body.public-site .public-settings-menu,
html body.public-site .public-settings-menu > summary,
html body.admin-body .topbar :where(.settings-icon-btn, .public-settings-toggle),
html body.login-entry .login-entry-links a,
html body.login-entry .nav-actions :where(button, select, a) {
  border: 1px solid #d8e2ee !important;
  background: #ffffff !important;
  color: #132238 !important;
  box-shadow: none !important;
}

html body.public-site .public-settings-menu > summary {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

html body.public-site .public-settings-menu > summary::-webkit-details-marker {
  display: none !important;
}

html body.public-site .public-settings-menu > summary svg {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

html body.public-site .public-settings-panel {
  width: min(260px, calc(100vw - 28px)) !important;
  right: 0 !important;
  left: auto !important;
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #132238 !important;
  box-shadow: 0 18px 40px rgba(19, 34, 56, 0.15) !important;
}

html body.public-site .public-language-field,
html body.public-site .public-display-note {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #40566f !important;
  font-size: 13px !important;
}

html body.public-site .public-language-field span {
  grid-column: 1 / 3 !important;
  color: #132238 !important;
  font-weight: 800 !important;
}

html body.public-site .public-language-field .language-select {
  grid-column: 3 !important;
}

html body.public-site .public-display-note {
  grid-template-columns: 22px minmax(0, 1fr) !important;
  min-height: 34px !important;
  padding: 8px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 8px !important;
  background: #f7fafc !important;
}

html body.public-site .public-display-note svg {
  width: 17px !important;
  height: 17px !important;
  color: #ff8200 !important;
}

html body.login-entry {
  color-scheme: light !important;
  min-height: 100dvh !important;
  background: linear-gradient(180deg, #f7fafc 0%, #e8eff7 100%) !important;
  color: #132238 !important;
}

html body.login-entry .portal-topbar {
  min-height: 76px !important;
  padding: 12px clamp(16px, 4vw, 34px) !important;
  border-bottom: 1px solid #d8e2ee !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

html body.login-entry .brand img {
  height: 42px !important;
  max-width: 180px !important;
  object-fit: contain !important;
  filter: none !important;
}

html body.login-entry .admin-title {
  color: #132238 !important;
  font-size: 0.92rem !important;
  font-weight: 850 !important;
}

html body.login-entry .admin-shell {
  min-height: calc(100dvh - 76px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 28px 16px 72px !important;
}

html body.login-entry .portal-shell {
  width: min(100%, 620px) !important;
}

html body.login-entry .login-panel.portal-panel {
  width: 100% !important;
  gap: 14px !important;
}

html body.login-entry .login-panel h1 {
  font-size: 1.45rem !important;
  line-height: 1.15 !important;
}

html body.login-entry .login-entry-note {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 10px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 8px !important;
  background: #f7fafc !important;
  color: #40566f !important;
  font-size: 0.82rem !important;
  line-height: 1.25 !important;
}

html body.admin-body #loginPanel .login-help {
  color: #40566f !important;
  font-size: 0.86rem !important;
  line-height: 1.35 !important;
}

html body.admin-body #loginPanel .login-help a {
  color: #0f4c81 !important;
  font-weight: 800 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .appearance-settings-card .theme-choice-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .appearance-settings-card [data-theme-choice] {
  justify-content: flex-start !important;
  border-color: #d8e2ee !important;
  background: #ffffff !important;
  color: #132238 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .appearance-settings-card [data-theme-choice][aria-pressed="true"] {
  border-color: #ff8200 !important;
  background: #fff4e7 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #calculatorPanel :where(h2, h3) {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .branch-release-row > summary {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .branch-release-row > summary > div {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .branch-release-row > summary :where(strong, small) {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

@media (max-width: 720px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .branch-release-row > summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .branch-release-mode {
    width: fit-content !important;
  }
}

@media (max-width: 720px) {
  html body.login-entry .portal-topbar {
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  html body.login-entry .portal-nav {
    justify-content: stretch !important;
  }

  html body.login-entry #portalCustomerForm {
    grid-template-columns: 1fr !important;
  }

  html body.login-entry .login-entry-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* Servicecenter requests: rustige lijst/detail-indeling - 2026-08-12 */
html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
  grid-template-columns: 268px minmax(0, 1fr) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
  width: 268px !important;
  max-width: 268px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct-actions .admin-nav-direct {
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  min-height: 36px !important;
  border: 1px solid #d8e2ee !important;
  background: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct-actions .admin-nav-direct :where(span, b) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-communication #adminSidebarChats {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .sidebar-chat-compact {
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  border: 1px solid #d8e2ee !important;
  background: #ffffff !important;
  color: #132238 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"].workspace {
  display: grid !important;
  grid-template-columns: minmax(360px, 0.42fr) minmax(560px, 1fr) !important;
  align-items: start !important;
  gap: 14px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #132238 !important;
  box-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
  position: sticky !important;
  top: 78px !important;
  max-height: calc(100vh - 100px) !important;
  overflow: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue .panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px !important;
  border-bottom: 1px solid #d8e2ee !important;
  background: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue .panel-head h2 {
  margin: 0 !important;
  font-size: 17px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] #statusFilter {
  width: 172px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid #edf2f7 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stat {
  min-height: 44px !important;
  padding: 7px 8px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 8px !important;
  background: #f8fbfd !important;
  color: #132238 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stat.active {
  border-color: #ff8200 !important;
  background: #fff4e7 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
  display: grid !important;
  grid-auto-rows: auto !important;
  gap: 8px !important;
  max-height: calc(100vh - 250px) !important;
  min-height: 280px !important;
  padding: 12px !important;
  overflow: auto !important;
  scrollbar-width: thin !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list::-webkit-scrollbar {
  display: initial !important;
  width: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "top"
    "meta"
    "target"
    "tags" !important;
  gap: 5px !important;
  min-height: 72px !important;
  max-height: none !important;
  padding: 10px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #132238 !important;
  text-align: left !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item.active {
  border-color: #ff8200 !important;
  background: #fff7ed !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top { grid-area: top !important; }
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-meta { grid-area: meta !important; }
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-target { grid-area: target !important; }
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-tags { grid-area: tags !important; }

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item :where(.request-item-top, .request-item-meta, .request-item-target, .request-item-tags) {
  display: flex !important;
  min-width: 0 !important;
  width: 100% !important;
  gap: 6px !important;
  align-items: center !important;
  overflow: visible !important;
  white-space: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item :where(.request-item-meta, .request-item-target) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item :where(strong, b, small, i) {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #132238 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top strong {
  display: block !important;
  width: 100% !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-tags {
  justify-content: flex-start !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item b,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item i {
  flex: 0 0 auto !important;
  max-width: 120px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: #eef5fa !important;
  color: #40566f !important;
  font-style: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  padding: 12px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-detail-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main > * {
  grid-column: auto !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main > :where(.detail-head, .ticket-regie-strip, .info-grid, .description, .edit-toolbar, .ticket-timeline, .notes) {
  grid-column: 1 / -1 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(.detail-head, .info-grid, .description, .quote-box, .notes, .ticket-timeline, .update-form, .dispute-panel, .planning-chat-panel, .dispatch-panel, .execution-monitor, .platform-contribution-panel, .payment-correction-panel, .ticket-progress) {
  border: 1px solid #d8e2ee !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #132238 !important;
  padding: 12px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-regie-strip {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .branch-release-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="settings"] .branch-release-row > summary {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

@media (max-width: 1100px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"].workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
    max-height: 50vh !important;
  }
}

@media (max-width: 860px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "top" "meta" "target" "tags" !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] #statusFilter {
    width: 100% !important;
  }
}

/* Requests screen hardening after visual Chrome review - 2026-08-12 */
html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  height: calc(100vh - 76px) !important;
  max-height: calc(100vh - 76px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(.admin-nav-primary, .admin-nav-direct-actions, .admin-nav-communication, .admin-nav-bottom) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  max-height: none !important;
  overflow: visible !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct-actions {
  order: 2 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-primary {
  order: 1 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-communication {
  order: 3 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-bottom {
  order: 4 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct-actions .admin-nav-direct {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #132238 !important;
  box-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct-actions .admin-nav-direct :where(span, b) {
  min-width: 0 !important;
  color: #132238 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"].workspace {
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 14px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
  position: static !important;
  top: auto !important;
  align-self: start !important;
  max-height: calc(100vh - 116px) !important;
  overflow: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  align-self: start !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
  max-height: calc(100vh - 306px) !important;
  min-height: 340px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  align-items: start !important;
  gap: 8px !important;
  min-height: 124px !important;
  height: auto !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: start !important;
  width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top strong {
  display: block !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  color: #132238 !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top b {
  width: auto !important;
  max-width: 116px !important;
  justify-self: end !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: #eef5fa !important;
  color: #40566f !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-meta,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-target {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  align-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 18px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-meta small,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-target small,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-target i {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  color: #40566f !important;
  font-size: 12px !important;
  line-height: 1.18 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-target small {
  font-weight: 800 !important;
  text-transform: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-target i {
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: #eef5fa !important;
  font-style: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main > * {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-column: auto !important;
}

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.6fr) !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-route,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-next,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-buttons {
  grid-column: 1 / -1 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-route {
  display: grid !important;
  gap: 3px !important;
  padding: 9px 10px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 8px !important;
  background: #f8fbfd !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 7px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts span {
  display: flex !important;
  min-width: 0 !important;
  gap: 6px !important;
  align-items: center !important;
  padding: 7px 8px !important;
  border: 1px solid #e7eef6 !important;
  border-radius: 8px !important;
  background: #f8fbfd !important;
  color: #40566f !important;
  font-size: 12px !important;
  overflow-wrap: anywhere !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-regie-strip,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-process-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-detail-foldout,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .notes {
  position: static !important;
  z-index: auto !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

@media (max-width: 1180px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"].workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
    max-height: none !important;
    overflow: visible !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
    max-height: none !important;
  }
}

@media (max-width: 720px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
    height: auto !important;
    max-height: none !important;
  }

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

html body.admin-body #loginPanel {
  display: grid !important;
  gap: 12px !important;
}

html body.admin-body #loginPanel .central-login-link {
  justify-self: start !important;
  min-height: 40px !important;
  padding: 10px 14px !important;
  color: #102438 !important;
}

html body.admin-body:not(.admin-fallback-login) #loginPanel .admin-fallback-form {
  display: none !important;
}

html body.admin-body.admin-fallback-login #loginPanel .central-login-link {
  display: none !important;
}

html body.admin-body #loginPanel code {
  color: inherit !important;
  font-size: 0.85em !important;
  background: rgba(6, 26, 51, 0.08) !important;
  border-radius: 5px !important;
  padding: 1px 4px !important;
}

/* Topbar assistant controls: global help belongs next to language/settings, not inside the sidebar menu. */
html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .topbar-assistant-actions {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: auto !important;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .topbar-assistant-actions .voice-menu-icon-button {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid #df6e00 !important;
  background: #ff8200 !important;
  color: #102438 !important;
  box-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .topbar-assistant-actions .voice-menu-icon-button :where(.voice-menu-icon, .voice-message-icon) {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  place-self: center !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .topbar-assistant-actions .voice-listening-orb,
html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .topbar-assistant-actions .voice-menu-status {
  display: none !important;
}

/* Rustige typografie: niet elke regel hoeft als waarschuwing te voelen. */
html :where(body.admin-body, body.portal-active, body.login-entry, body.workapp-entry, body.klantapp-entry) {
  --pf24-action-accent: var(--company-accent, var(--pf24-orange, #ff8200));
  --pf24-action-on-accent: var(--company-on-accent, #102438);
}

html :where(body.admin-body, body.login-entry) .topbar-assistant-actions {
  display: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .topbar-assistant-actions {
  display: flex !important;
}

html :where(body.admin-body, body.portal-active, body.login-entry, body.workapp-entry, body.klantapp-entry) :where(strong, b) {
  font-weight: 640 !important;
}

html :where(body.admin-body, body.portal-active, body.login-entry, body.workapp-entry, body.klantapp-entry) :where(h1, h2, h3) {
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html :where(body.admin-body, body.portal-active, body.login-entry, body.workapp-entry, body.klantapp-entry) :where(h1) {
  font-size: clamp(1.25rem, 1.35vw + 0.85rem, 1.75rem) !important;
}

html :where(body.admin-body, body.portal-active, body.login-entry, body.workapp-entry, body.klantapp-entry) :where(h2) {
  font-size: clamp(1.05rem, 0.75vw + 0.8rem, 1.28rem) !important;
}

html :where(body.admin-body, body.portal-active, body.login-entry, body.workapp-entry, body.klantapp-entry) :where(h3) {
  font-size: 0.98rem !important;
}

html :where(body.admin-body, body.portal-active, body.login-entry, body.workapp-entry, body.klantapp-entry) :where(button, .button, .admin-nav-direct, .admin-tabs a, .admin-tabs summary) {
  font-weight: 650 !important;
}

html :where(body.admin-body, body.portal-active, body.login-entry, body.workapp-entry, body.klantapp-entry) :where(.badge, .pill, .status-pill, .request-item-target small, .request-item-target i) {
  font-weight: 600 !important;
}

html body.portal-active[data-company-brand="active"] :where(.button.primary, button.primary, .nav-actions .primary),
html body.workapp-entry[data-company-brand="active"] :where(.button.primary, button.primary),
html body.klantapp-entry[data-company-brand="active"] :where(.button.primary, button.primary) {
  background: var(--pf24-action-accent) !important;
  border-color: color-mix(in srgb, var(--pf24-action-accent) 74%, #0a2036) !important;
  color: var(--pf24-action-on-accent) !important;
}

/* Logout is altijd een echte knop met zichtbaar icoon; geen oude pseudo-pijlen of nul-brede SVG's. */
html :where(body.admin-body, body.portal-active) :where(.admin-tabs, .portal-section-nav, .professional-section-nav) .portal-sidebar-logout {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 8px !important;
}

html :where(body.admin-body, body.portal-active) :where(.admin-tabs, .portal-section-nav, .professional-section-nav) .portal-sidebar-logout::before {
  content: none !important;
  display: none !important;
}

html :where(body.admin-body, body.portal-active) :where(.admin-tabs, .portal-section-nav, .professional-section-nav) .portal-sidebar-logout svg {
  display: block !important;
  grid-column: 1 !important;
  width: 17px !important;
  min-width: 17px !important;
  max-width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  max-height: 17px !important;
  justify-self: center !important;
  align-self: center !important;
}

@media (max-width: 760px) {
  html body.portal-active :where(.portal-section-nav, .professional-section-nav) .portal-sidebar-logout {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    place-items: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
  }

  html body.portal-active :where(.portal-section-nav, .professional-section-nav) .portal-sidebar-logout span {
    display: none !important;
  }

  html body.portal-active :where(.portal-section-nav, .professional-section-nav) .portal-sidebar-logout svg {
    grid-column: 1 !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
  }
}

/* Admin stability guard: fallback login is never part of an authenticated work screen. */
html body.admin-body #loginPanel.hidden,
html body.admin-body:has(#dashboard:not(.hidden)) #loginPanel,
html body.admin-body:not(.admin-fallback-login) #loginPanel {
  display: none !important;
}

html body.admin-body.admin-fallback-login #loginPanel:not(.hidden) {
  display: grid !important;
}

html body.admin-body,
html body.admin-body main.admin-shell {
  min-height: 100vh !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body.admin-body:has(#dashboard:not(.hidden)) {
  padding-bottom: 72px !important;
}

html body.admin-body:has(#dashboard:not(.hidden)) main.admin-shell,
html body.admin-body:has(#dashboard:not(.hidden)) #dashboard.dashboard {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html body.admin-body:has(#dashboard:not(.hidden)) .topbar .brand img {
  width: auto !important;
  max-width: 178px !important;
  max-height: 54px !important;
  object-fit: contain !important;
}

html:has(body.admin-body),
html body.admin-body.admin-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html body.admin-body.admin-body:has(#dashboard:not(.hidden)) {
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
}

/* Admin final layout: one light, compact shell for all admin work pages. */
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) {
  --pf24-admin-bg: #eef4f9;
  --pf24-admin-surface: #ffffff;
  --pf24-admin-soft: #f7fafc;
  --pf24-admin-line: #d8e2ee;
  --pf24-admin-text: #102033;
  --pf24-admin-muted: #53657a;
  background: var(--pf24-admin-bg) !important;
  color: var(--pf24-admin-text) !important;
  font-size: 14px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
  display: grid !important;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 16px !important;
  width: 100% !important;
  min-height: auto !important;
  padding: 16px !important;
  overflow: visible !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
  position: sticky !important;
  top: 94px !important;
  z-index: 20 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-self: start !important;
  width: 100% !important;
  max-height: calc(100dvh - 122px) !important;
  padding: 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid var(--pf24-admin-line) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(
  .admin-nav-block,
  .admin-nav-primary,
  .admin-nav-direct-actions,
  .admin-nav-communication,
  #adminSidebarChats,
  .admin-nav-bottom
) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  width: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-caption {
  display: block !important;
  padding: 3px 2px !important;
  color: #586a7f !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .system-switch {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .system-switch label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(
  a[data-admin-tab],
  .admin-nav-direct,
  .sidebar-chat-compact,
  .screen-switcher > summary,
  .portal-sidebar-logout,
  select
) {
  position: static !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 36px !important;
  padding: 7px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--pf24-admin-text) !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  white-space: normal !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(
  a[data-admin-tab].active,
  .admin-nav-direct.active,
  .sidebar-chat-compact.active,
  .screen-switcher[open] > summary
) {
  border-color: #ffbd73 !important;
  background: #fff3e4 !important;
  color: var(--pf24-admin-text) !important;
  box-shadow: inset 3px 0 0 #ff8200 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(svg, i[data-lucide]) {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  color: currentColor !important;
  stroke-width: 2 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(.admin-nav-direct b, .sidebar-chat-compact b) {
  justify-self: end !important;
  min-width: 26px !important;
  padding: 2px 7px !important;
  border: 1px solid var(--pf24-admin-line) !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  color: var(--pf24-admin-text) !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .topbar-assistant-actions {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .topbar-assistant-actions .voice-menu-icon-button {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #df6e00 !important;
  border-radius: 999px !important;
  background: #ff8200 !important;
  color: #102438 !important;
  box-shadow: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .topbar-assistant-actions .voice-menu-icon-button :where(.voice-menu-icon, .voice-message-icon, svg) {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  place-self: center !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .topbar-assistant-actions .voice-listening-orb,
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .topbar-assistant-actions .voice-menu-status {
  display: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  .finance-head,
  .finance-priority,
  .admin-document-launchpad,
  .document-composer-window,
  .finance-chart-block,
  .finance-block,
  .finance-table-block,
  .finance-stat,
  .finance-priority-card,
  .finance-row,
  .finance-line,
  .finance-beta-results,
  .finance-beta-grid article,
  .document-quick-draft,
  .document-live-preview,
  .generated-document-list article,
  .overview-card,
  .summary-card,
  .metric-card,
  .panel,
  .settings-card,
  .dashboard-card,
  .profile-section,
  .quote-box,
  .notes,
  .ticket-main,
  .ticket-progress,
  .request-detail-card,
  .admin-doc-row,
  .document-line-row
) {
  border-color: var(--pf24-admin-line) !important;
  background: var(--pf24-admin-surface) !important;
  color: var(--pf24-admin-text) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-document-launchpad {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 12px !important;
  padding: 14px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-document-launchpad .admin-document-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-document-launchpad .generated-document-list {
  grid-column: 1 / -1 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-composer-window {
  display: grid !important;
  gap: 12px !important;
  padding: 14px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-composer-head {
  display: flex !important;
  align-items: start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--pf24-admin-line) !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-composer-head h3,
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-composer-head p {
  margin: 0 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-quick-draft {
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 520px) !important;
  gap: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-quick-draft > :where(.document-quick-context, label, .document-line-builder, .document-quick-actions) {
  grid-column: 1 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-line-row {
  grid-template-columns: minmax(180px, 1.3fr) 76px 78px 98px 98px 34px !important;
  gap: 7px !important;
  padding: 8px !important;
  box-shadow: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-live-preview {
  grid-column: 2 !important;
  grid-row: 1 / span 8 !important;
  padding: 10px !important;
  background: #eef4f9 !important;
  box-shadow: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-sheet {
  width: min(100%, 420px) !important;
  min-height: 594px !important;
  aspect-ratio: 210 / 297 !important;
  margin: 0 auto !important;
  padding: 24px !important;
  align-content: start !important;
  gap: 14px !important;
  border: 1px solid #cfd9e5 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #102033 !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12) !important;
  font-size: 11px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #102033 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-header img {
  width: 130px !important;
  height: auto !important;
  object-fit: contain !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-header strong {
  display: block !important;
  font-size: 20px !important;
  line-height: 1 !important;
  text-align: right !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-header small {
  display: block !important;
  margin-top: 5px !important;
  text-align: right !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-meta {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-meta section,
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-meta span,
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-facts span,
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-vat span,
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-total span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-facts,
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-vat,
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-total {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 10.5px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-table :where(th, td) {
  padding: 6px 5px !important;
  border-bottom: 1px solid #d8e2ee !important;
  color: #102033 !important;
  text-align: left !important;
  vertical-align: top !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-table :where(th:nth-child(n+2), td:nth-child(n+2)) {
  text-align: right !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-total {
  grid-template-columns: 1fr !important;
  justify-self: end !important;
  width: min(100%, 220px) !important;
  padding-top: 10px !important;
  border-top: 1px solid #102033 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-total span {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-note {
  margin: 0 !important;
  padding-top: 8px !important;
  border-top: 1px solid #d8e2ee !important;
  color: #53657a !important;
  font-size: 10.5px !important;
}

@media (max-width: 1180px) {
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-quick-draft {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-live-preview {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 760px) {
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-document-launchpad,
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-meta,
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-facts,
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-vat {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-document-launchpad .admin-document-actions {
    justify-content: flex-start !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-line-row {
    grid-template-columns: 1fr !important;
  }
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  .finance-head *,
  .finance-priority *,
  .finance-chart-block *,
  .finance-block *,
  .finance-table-block *,
  .finance-stat *,
  .finance-priority-card *,
  .finance-row *,
  .finance-line *,
  .document-quick-draft *,
  .document-live-preview *,
  .generated-document-list *,
  .admin-doc-row *,
  .document-line-row *
) {
  color: inherit !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  .finance-head p,
  .finance-head small,
  .finance-priority p,
  .finance-chart-block p,
  .finance-stat span,
  .finance-stat small,
  .finance-priority-card span,
  .finance-priority-card small,
  .finance-row span,
  .finance-row small,
  .finance-line span,
  .finance-line small,
  .document-quick-draft p,
  .document-live-preview p,
  .empty
) {
  color: var(--pf24-admin-muted) !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) :where(input, select, textarea, .search-input, .form-control) {
  border-color: var(--pf24-admin-line) !important;
  background: #ffffff !important;
  color: var(--pf24-admin-text) !important;
  box-shadow: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) :where(input, textarea)::placeholder {
  color: #8b98a8 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .finance-periods {
  border-color: var(--pf24-admin-line) !important;
  background: var(--pf24-admin-soft) !important;
  box-shadow: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .finance-periods button {
  color: var(--pf24-admin-muted) !important;
  background: transparent !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .finance-periods button.active {
  color: var(--pf24-admin-text) !important;
  background: #fff3e4 !important;
  box-shadow: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) :where(.button.secondary, button.secondary) {
  border-color: var(--pf24-admin-line) !important;
  background: #ffffff !important;
  color: var(--pf24-admin-text) !important;
  box-shadow: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  .finance-priority-card.warning,
  .finance-stat.warning,
  .finance-line.warning,
  .finance-row.warning
) {
  border-color: #ffbd73 !important;
  background: #fff7ed !important;
  color: var(--pf24-admin-text) !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  .finance-priority-card.positive,
  .finance-stat.positive,
  .finance-line.positive,
  .finance-row.positive
) {
  border-color: #a7d8bd !important;
  background: #f0fdf4 !important;
  color: var(--pf24-admin-text) !important;
}

@media (max-width: 900px) {
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
    position: static !important;
    max-height: none !important;
  }
}

/* Admin compact menu density: keep all important navigation visible without crowding. */
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
  grid-template-columns: minmax(218px, 250px) minmax(0, 1fr) !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
  top: 88px !important;
  gap: 7px !important;
  max-height: calc(100dvh - 108px) !important;
  padding: 10px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(
  .admin-nav-block,
  .admin-nav-primary,
  .admin-nav-direct-actions,
  .admin-nav-communication,
  #adminSidebarChats,
  .admin-nav-bottom
) {
  gap: 3px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-caption {
  padding: 5px 2px 2px !important;
  font-size: 10px !important;
  letter-spacing: 0 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(
  a[data-admin-tab],
  .admin-nav-direct,
  .sidebar-chat-compact,
  .screen-switcher > summary,
  .portal-sidebar-logout,
  select
) {
  grid-template-columns: 16px minmax(0, 1fr) auto !important;
  gap: 7px !important;
  min-height: 30px !important;
  padding: 5px 7px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 560 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(svg, i[data-lucide]) {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(.admin-nav-direct b, .sidebar-chat-compact b) {
  min-width: 22px !important;
  padding: 1px 6px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .system-switch {
  gap: 4px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .system-switch select {
  min-height: 32px !important;
  padding-right: 24px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) #adminSidebarChats {
  display: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-communication .sidebar-chat-compact {
  display: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-communication {
  gap: 0 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-communication::after {
  content: "Berichten via knop rechtsboven";
  display: block;
  padding: 4px 2px 2px;
  color: #6a7a8e;
  font-size: 10px;
  line-height: 1.2;
}

@media (max-width: 900px) {
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
    grid-template-columns: 1fr !important;
  }
}

/* Admin compact document workspace: final overrides for readable finance and smaller navigation. */
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar {
  min-height: 72px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
  grid-template-columns: minmax(205px, 235px) minmax(0, 1fr) !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
  top: 78px !important;
  max-height: calc(100dvh - 96px) !important;
  padding: 8px !important;
  gap: 5px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(
  a[data-admin-tab],
  .admin-nav-direct,
  .screen-switcher > summary,
  .portal-sidebar-logout,
  select
) {
  min-height: 28px !important;
  padding: 4px 6px !important;
  gap: 6px !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
  line-height: 1.15 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-caption {
  padding: 4px 1px 1px !important;
  font-size: 9.5px !important;
  line-height: 1.1 !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(svg, i[data-lucide]) {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(.admin-nav-direct b, .sidebar-chat-compact b) {
  min-width: 20px !important;
  padding: 1px 5px !important;
  font-size: 10.5px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) :where(.finance-head, .data-quality-hero, .audit-hero, .staff-hero) {
  border: 1px solid var(--pf24-admin-line) !important;
  background: #ffffff !important;
  color: var(--pf24-admin-text) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) :where(.finance-head *, .data-quality-hero *, .audit-hero *, .staff-hero *) {
  color: inherit !important;
  text-shadow: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) :where(.finance-head p, .data-quality-hero p, .audit-hero p, .staff-hero p) {
  color: var(--pf24-admin-muted) !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .finance-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 12px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .finance-head-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .finance-head-actions :where(button, .button) {
  min-height: 30px !important;
  padding: 5px 9px !important;
  font-size: 11.5px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-document-launchpad {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-document-launchpad .admin-document-actions {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, max-content)) !important;
  justify-content: start !important;
  align-items: center !important;
  gap: 7px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-document-launchpad .admin-document-actions :where(button, .button) {
  min-height: 31px !important;
  padding: 6px 10px !important;
  font-size: 11.5px !important;
  white-space: nowrap !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .generated-document-list {
  display: grid !important;
  gap: 7px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-doc-row {
  grid-template-columns: minmax(220px, 1.6fr) minmax(120px, .9fr) minmax(120px, .9fr) minmax(120px, .9fr) minmax(86px, .6fr) auto !important;
  gap: 10px !important;
  padding: 8px 10px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-quick-draft {
  grid-template-columns: minmax(430px, 1fr) minmax(520px, 620px) !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-live-preview {
  overflow: auto !important;
  max-width: 100% !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-sheet {
  width: 520px !important;
  min-width: 520px !important;
  padding: 22px !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-sheet :where(*, th, td, span, strong, small) {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-table {
  table-layout: fixed !important;
  font-size: 9.5px !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-table th:nth-child(1),
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-table td:nth-child(1) {
  width: 42% !important;
  text-align: left !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-table th:nth-child(2),
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-table td:nth-child(2),
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-table th:nth-child(4),
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-table td:nth-child(4) {
  width: 10% !important;
}

html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-table th:nth-child(3),
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-table td:nth-child(3),
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-table th:nth-child(5),
html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-table td:nth-child(5) {
  width: 19% !important;
}

@media (max-width: 1180px) {
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-quick-draft {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-live-preview {
    grid-column: 1 !important;
  }
}

@media (max-width: 760px) {
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar {
    min-height: 58px !important;
    padding: 8px 12px !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .brand img {
    max-height: 34px !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar-assistant-actions .voice-menu-icon-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .language-select,
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar button[aria-label*="instelling"],
  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .topbar .settings-button {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 12px !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
    padding: 8px !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .system-switch select {
    min-height: 36px !important;
    font-size: 13px !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(
    a[data-admin-tab],
    .admin-nav-direct,
    .screen-switcher > summary,
    .portal-sidebar-logout
  ) {
    min-height: 34px !important;
    padding: 5px 8px !important;
    font-size: 13px !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard h2 {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard h3 {
    font-size: 15px !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard :where(p, small, label, input, select, textarea, button, .button) {
    font-size: 12px !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-document-launchpad .admin-document-actions {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-document-launchpad .admin-document-actions > :first-child {
    grid-column: auto !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-document-launchpad .admin-document-actions :where(button, .button) {
    width: 100% !important;
    justify-content: center !important;
    min-height: 30px !important;
    height: 30px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-document-launchpad .admin-document-actions :where(svg, .role-action-icon, i[data-lucide]) {
    display: none !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .admin-doc-row {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-live-preview {
    padding: 8px !important;
  }

  html body.admin-body.admin-body.active:has(#dashboard:not(.hidden)) .document-preview-sheet {
    width: 520px !important;
    min-width: 520px !important;
  }
}

/* Admin workspace compact override must stay last: header metrics, short menu, light overview. */
html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 62px !important;
  padding: 8px 18px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .brand img {
  max-height: 42px !important;
  width: auto !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar nav {
  justify-self: end !important;
  gap: 7px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(72px, 1fr)) !important;
  gap: 5px !important;
  margin: 0 !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card {
  display: grid !important;
  align-content: center !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 4px 7px !important;
  border: 1px solid #d5e1ec !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #102033 !important;
  box-shadow: none !important;
  text-align: left !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card span {
  color: #102033 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card strong {
  overflow: hidden !important;
  color: #526276 !important;
  font-size: 9.5px !important;
  font-weight: 560 !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
  top: 72px !important;
  max-height: calc(100dvh - 88px) !important;
  padding: 7px !important;
  gap: 4px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .system-switch label {
  display: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .system-switch select {
  min-height: 28px !important;
  height: 28px !important;
  padding: 3px 22px 3px 7px !important;
  font-size: 11px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(a[data-admin-tab], .admin-nav-direct, .screen-switcher > summary, .portal-sidebar-logout) {
  min-height: 26px !important;
  height: 26px !important;
  padding: 3px 6px !important;
  gap: 6px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 560 !important;
  line-height: 1.1 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(svg, i[data-lucide]) {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-caption {
  padding: 3px 1px 1px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-communication,
html body.admin-body.active:has(#dashboard:not(.hidden)) #adminSidebarChats {
  display: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #overviewPanel :where(.action-center, .daily-priority, .action-dossier, .action-row, .admin-cockpit, .cockpit-head) {
  border-color: #d5e1ec !important;
  background: #ffffff !important;
  color: #102033 !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #overviewPanel :where(.action-center *, .daily-priority *, .action-dossier *, .action-row *, .admin-cockpit *, .cockpit-head *) {
  color: inherit !important;
  text-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #overviewPanel :where(h2) {
  font-size: 18px !important;
  line-height: 1.15 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #overviewPanel :where(p, small, span) {
  font-size: 12px !important;
  line-height: 1.3 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .cockpit-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .cockpit-kpis .summary-card {
  min-height: 52px !important;
  padding: 8px 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .cockpit-kpis .summary-card span {
  font-size: 13px !important;
  line-height: 1.05 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .cockpit-kpis .summary-card strong {
  font-size: 12px !important;
  line-height: 1.1 !important;
}

@media (max-width: 1280px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar {
    grid-template-columns: 190px minmax(0, 1fr) auto !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics {
    grid-template-columns: repeat(3, minmax(70px, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
    position: static !important;
    max-height: none !important;
  }
}

@media (max-width: 520px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 54px !important;
    padding: 7px 10px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .brand img {
    max-height: 30px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    order: 3 !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card:nth-child(n+4) {
    display: none !important;
  }
}

/* Admin header status chips: compact, meaningful, not a second dashboard. */
html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card {
  display: grid !important;
  grid-template-columns: auto auto !important;
  align-items: baseline !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 150px !important;
  min-height: 24px !important;
  height: 24px !important;
  padding: 3px 8px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: #102033 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card span {
  font-size: 11px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card strong {
  overflow: hidden !important;
  max-width: 92px !important;
  font-size: 10px !important;
  font-weight: 560 !important;
  line-height: 1 !important;
  color: #526276 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #overviewPanel .cockpit-kpis {
  display: none !important;
}

@media (max-width: 1280px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card:nth-child(n+5) {
    display: none !important;
  }
}

@media (max-width: 720px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics {
    grid-column: 1 / -1 !important;
    order: 3 !important;
    width: 100% !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card {
    max-width: none !important;
    flex: 1 1 calc(50% - 5px) !important;
  }
}

/* Final admin production shell: one compact light layout for every admin role. */
html body.admin-body.active:has(#dashboard:not(.hidden)),
html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-shell,
html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  color: #102033 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-shell {
  padding: 10px 10px 58px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #loginPanel.hidden {
  display: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  grid-template-columns: 190px minmax(0, 1fr) auto !important;
  min-height: 60px !important;
  padding: 7px 16px !important;
  border-bottom: 1px solid #d8e2ee !important;
  background: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .brand {
  display: flex !important;
  justify-content: center !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .brand img {
  max-width: 148px !important;
  max-height: 36px !important;
  object-fit: contain !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-title {
  display: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
  max-width: 760px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 142px !important;
  min-height: 22px !important;
  height: 22px !important;
  padding: 2px 8px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #102033 !important;
  box-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card span {
  color: #102033 !important;
  font-size: 10.5px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card strong {
  overflow: hidden !important;
  max-width: 86px !important;
  color: #526276 !important;
  font-size: 9.5px !important;
  font-weight: 560 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar-assistant-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar-assistant-actions .voice-menu-icon-button {
  display: inline-grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar-assistant-actions .voice-menu-icon,
html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar-assistant-actions .voice-message-icon {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .language-select,
html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar :where(.settings-toggle, .settings-button, button[aria-label*="instelling"], button[aria-label*="Instelling"]) {
  min-height: 34px !important;
  height: 34px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #102033 !important;
  box-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
  grid-template-columns: 210px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 10px !important;
  align-items: start !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
  position: sticky !important;
  top: 72px !important;
  z-index: 30 !important;
  width: 210px !important;
  max-height: calc(100dvh - 86px) !important;
  overflow-y: auto !important;
  padding: 7px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(.admin-nav-block, .admin-nav-primary, .admin-nav-direct-actions, .admin-nav-bottom) {
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(a[data-admin-tab], .admin-nav-direct, .screen-switcher > summary, .portal-sidebar-logout) {
  display: flex !important;
  align-items: center !important;
  min-height: 24px !important;
  height: 24px !important;
  padding: 2px 7px !important;
  gap: 6px !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
  font-weight: 560 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(svg, i[data-lucide]) {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-caption {
  margin: 6px 0 2px !important;
  padding: 0 !important;
  color: #536476 !important;
  font-size: 8.5px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .system-switch {
  display: grid !important;
  gap: 4px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .system-switch label {
  display: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .system-switch select {
  min-height: 26px !important;
  height: 26px !important;
  padding: 2px 24px 2px 7px !important;
  border-color: #d8e2ee !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct b {
  margin-left: auto !important;
  padding: 1px 6px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel.hidden, .workspace.hidden) {
  display: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
  display: grid !important;
  grid-template-columns: clamp(275px, 25vw, 340px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  min-height: calc(100dvh - 96px) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
  position: sticky !important;
  top: 72px !important;
  max-height: calc(100dvh - 88px) !important;
  overflow: hidden !important;
  padding: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue .panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 130px !important;
  gap: 7px !important;
  align-items: center !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue .panel-head h2 {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue .panel-head select {
  min-height: 28px !important;
  height: 28px !important;
  padding: 3px 24px 3px 7px !important;
  font-size: 11px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
  margin: 0 0 7px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stats > * {
  min-height: 34px !important;
  padding: 5px 7px !important;
  border: 1px solid #e2e9f1 !important;
  border-radius: 6px !important;
  background: #f8fafc !important;
  color: #102033 !important;
  font-size: 10.5px !important;
  line-height: 1.1 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
  display: grid !important;
  gap: 6px !important;
  max-height: calc(100dvh - 222px) !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list button,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-card {
  min-height: 58px !important;
  padding: 7px 8px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #102033 !important;
  box-shadow: none !important;
  text-align: left !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list button.active,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-card.active {
  border-color: #ff8a1c !important;
  background: #fff4e6 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list :where(strong, b, span, small, em, p) {
  overflow: hidden !important;
  max-width: 100% !important;
  color: #102033 !important;
  font-size: 10.5px !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  max-height: calc(100dvh - 88px) !important;
  overflow: auto !important;
  padding: 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-detail-layout,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main > * {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 0 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(.detail-head, .admin-request-route-card, .admin-request-quickfacts, .admin-request-chips, .info-grid, .quote-box, .notes, .request-detail-foldout, .request-detail-foldout-body, .ticket-timeline, .ticket-progress, .update-form) {
  border-color: #d8e2ee !important;
  background: #ffffff !important;
  color: #102033 !important;
  box-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(h2, h3, h4, strong, b, label, summary) {
  color: #102033 !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] h2 {
  font-size: 18px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(p, span, small, em, li, input, select, textarea, button, .button) {
  color: #526276 !important;
  font-size: 11px !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(input, select, textarea) {
  min-height: 30px !important;
  padding: 5px 8px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #102033 !important;
  box-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .button,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] button {
  min-height: 30px !important;
  padding: 5px 9px !important;
  border-radius: 6px !important;
  font-weight: 650 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-process-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-process-grid p {
  min-height: 44px !important;
  padding: 7px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-detail-foldout {
  overflow: hidden !important;
  border-radius: 7px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-detail-foldout > summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
  background: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-detail-foldout-body {
  padding: 10px !important;
  background: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .quote-lines-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .quote-lines {
  display: grid !important;
  gap: 7px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .quote-line {
  display: grid !important;
  grid-template-columns: minmax(150px, 1.15fr) minmax(54px, .35fr) minmax(66px, .45fr) minmax(82px, .5fr) minmax(82px, .5fr) minmax(100px, .65fr) minmax(72px, .45fr) 30px !important;
  gap: 6px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 7px !important;
  border: 1px solid #e2e9f1 !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  overflow: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .quote-line > :where(input, select) {
  width: 100% !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .quote-line .offer-gaccount-fields {
  display: grid !important;
  grid-template-columns: minmax(42px, .35fr) minmax(56px, .65fr) !important;
  gap: 5px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .quote-line .offer-gaccount-fields > input {
  width: 100% !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .quote-line [data-remove-line] {
  display: inline-grid !important;
  place-items: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  color: #102033 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .g-account-admin-note {
  display: grid !important;
  grid-template-columns: minmax(190px, 1fr) 130px minmax(190px, 1fr) !important;
  gap: 8px !important;
  align-items: end !important;
  padding: 8px !important;
  border: 1px solid #f8b56b !important;
  border-radius: 7px !important;
  background: #fff7ed !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .g-account-admin-note div {
  display: grid !important;
  gap: 2px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .quote-total {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 6px 0 !important;
  text-align: right !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .quote-total strong {
  font-size: 13px !important;
}

@media (max-width: 1280px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar {
    grid-template-columns: 170px minmax(0, 1fr) auto !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card:nth-child(n+5) {
    display: none !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
    grid-template-columns: 190px minmax(0, 1fr) !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
    width: 190px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: 300px minmax(0, 1fr) !important;
  }
}

@media (max-width: 980px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard,
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs,
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue,
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
    max-height: none !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .quote-line,
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .g-account-admin-note {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 560px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    justify-items: stretch !important;
    align-items: center !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 8px !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .brand {
    justify-content: flex-start !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .brand img {
    max-width: 118px !important;
    max-height: 28px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar nav {
    justify-self: end !important;
    gap: 5px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar-assistant-actions {
    gap: 5px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar-assistant-actions .voice-menu-icon-button {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .language-select {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 2px 18px 2px 6px !important;
    font-size: 10px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .topbar :where(.settings-toggle, .settings-button, button[aria-label*="instelling"], button[aria-label*="Instelling"]) {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 4px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card:nth-child(n+4) {
    display: none !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card {
    flex: 1 1 calc(33.333% - 4px) !important;
    max-width: none !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 2px 6px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card span,
  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-header-metrics .metric-card strong {
    font-size: 9px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard.dashboard {
    gap: 8px !important;
    padding: 8px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
    display: grid !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-primary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-direct-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(a[data-admin-tab], .admin-nav-direct, .screen-switcher > summary, .portal-sidebar-logout) {
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-caption {
    grid-column: 1 / -1 !important;
    margin: 3px 0 1px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-bottom {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-bottom .admin-nav-block {
    min-width: 0 !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue .panel-head,
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-process-grid,
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .quote-line,
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .g-account-admin-note {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
    height: auto !important;
    overflow: visible !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
    max-height: 420px !important;
    overflow-y: auto !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
    height: auto !important;
    overflow: visible !important;
  }
}

/* Keep admin work panels light and readable unless a page explicitly renders a map/camera canvas. */
html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) :where(
  .panel-head,
  .dashboard-card,
  .summary-card,
  .kpi-card,
  .stat-card,
  .overview-card,
  .finance-panel,
  .admin-cockpit,
  .cockpit-head,
  .action-center,
  .daily-priority,
  .document-card,
  .quote-box,
  .settings-card,
  .quality-panel,
  .acceptance-item,
  .market-country-panel,
  .market-compliance-panel,
  .business-operations-director,
  .staff-panel,
  .data-quality-layout article
) {
  border-color: #d8e2ee !important;
  background: #ffffff !important;
  color: #102033 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) :where(
  .panel-head,
  .dashboard-card,
  .summary-card,
  .kpi-card,
  .stat-card,
  .overview-card,
  .finance-panel,
  .admin-cockpit,
  .cockpit-head,
  .action-center,
  .daily-priority,
  .document-card,
  .quote-box,
  .settings-card,
  .quality-panel,
  .acceptance-item,
  .market-country-panel,
  .market-compliance-panel,
  .business-operations-director,
  .staff-panel,
  .data-quality-layout article
) * {
  color: inherit !important;
  text-shadow: none !important;
}

/* Mobile admin hard stop: compact menu and no crowded header metrics on phones. */
@media screen and (max-width: 560px) {
  body.admin-body .topbar .admin-header-metrics {
    display: none !important;
  }

  body.admin-body .topbar .voice-menu-icon-button {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
  }

  body.admin-body .topbar .language-select {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 2px 18px 2px 7px !important;
    font-size: 10px !important;
  }

  body.admin-body .topbar :where(.settings-toggle, .settings-button, button[aria-label*="instelling"], button[aria-label*="Instelling"]) {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 6px 8px !important;
    overflow: visible !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar .brand {
    justify-self: start !important;
    justify-content: flex-start !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar .brand img {
    width: auto !important;
    max-width: 124px !important;
    max-height: 28px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar .admin-header-metrics {
    display: none !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar nav {
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar button.voice-menu-icon-button {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar .language-select {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 2px 18px 2px 7px !important;
    font-size: 10px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar :where(.settings-toggle, .settings-button, button[aria-label*="instelling"], button[aria-label*="Instelling"]) {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard > .admin-tabs {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    padding: 8px !important;
    gap: 7px !important;
    overflow: visible !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard > .admin-tabs .admin-nav-primary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard > .admin-tabs .admin-nav-direct-actions,
  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard > .admin-tabs .admin-nav-bottom {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard > .admin-tabs :where(a[data-admin-tab], .admin-nav-direct, .screen-switcher > summary, .portal-sidebar-logout) {
    min-height: 28px !important;
    height: 28px !important;
    padding: 3px 7px !important;
    gap: 5px !important;
    font-size: 10.5px !important;
    font-weight: 580 !important;
    line-height: 1 !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard > .admin-tabs :where(a[data-admin-tab], .admin-nav-direct, .screen-switcher > summary, .portal-sidebar-logout) :where(span, b) {
    font-size: 10.5px !important;
    line-height: 1 !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard > .admin-tabs :where(svg, i[data-lucide]) {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) main.admin-shell #dashboard.dashboard > .admin-tabs .admin-nav-caption {
    margin: 3px 0 1px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) :where(h1, h2) {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) :where(h3, h4, strong, b, label, summary) {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace) :where(p, span, small, em, li, input, select, textarea, button, .button) {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard > :where(.tab-panel, .workspace),
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace,
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(.queue, .detail) {
    box-sizing: border-box !important;
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }
}

/* Final useful header stats: compact role signals, never wide dashboard cards. */
html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar .admin-header-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, max-content) !important;
  grid-auto-rows: 22px !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 4px 6px !important;
  width: fit-content !important;
  max-width: min(760px, calc(100vw - 620px)) !important;
  margin-right: auto !important;
  overflow: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar .admin-header-metrics .metric-card {
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 154px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 2px 8px !important;
  border: 1px solid #d9e3ef !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #102033 !important;
  box-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar .admin-header-metrics .metric-card span,
html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar .admin-header-metrics .metric-card strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar .admin-header-metrics .metric-card span {
  max-width: 66px !important;
  color: #102033 !important;
  font-size: 10px !important;
  font-weight: 760 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar .admin-header-metrics .metric-card strong {
  max-width: 82px !important;
  color: #526276 !important;
  font-size: 9px !important;
  font-weight: 560 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar .admin-header-metrics .metric-card.metric-ok {
  border-color: #b8dfd4 !important;
  background: #f2fbf8 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar .admin-header-metrics .metric-card.metric-warning {
  border-color: #ffbd78 !important;
  background: #fff6ea !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar .admin-header-metrics .metric-card.metric-danger {
  border-color: #f7a3a3 !important;
  background: #fff1f1 !important;
}

@media screen and (min-width: 561px) and (max-width: 1240px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar .admin-header-metrics {
    grid-template-columns: repeat(3, max-content) !important;
    max-width: min(520px, calc(100vw - 500px)) !important;
  }
}

@media screen and (max-width: 560px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) header.topbar .admin-header-metrics {
    display: none !important;
  }
}

/* Klantapp shell: desktop must be a clean customer portal, phone may be app-like. */
html body.klantapp-entry.portal-active {
  background: #f4f8fb !important;
  color: #102033 !important;
  overflow-x: hidden !important;
}

html body.klantapp-entry.portal-active .portal-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  min-height: 62px !important;
  padding: 8px 18px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #d9e4ed !important;
  box-shadow: none !important;
}

html body.klantapp-entry.portal-active .portal-topbar .brand img {
  max-width: 172px !important;
  max-height: 42px !important;
}

html body.klantapp-entry.portal-active main.admin-shell {
  width: 100% !important;
  min-height: calc(100dvh - 62px) !important;
  padding: 0 0 64px !important;
  overflow: visible !important;
}

@media (min-width: 761px) {
  html body.klantapp-entry.portal-active #portalDashboard.dashboard {
    display: grid !important;
    grid-template-columns: 248px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    width: min(100% - 28px, 1420px) !important;
    max-width: 1420px !important;
    margin: 0 auto !important;
    padding: 14px 0 72px !important;
    overflow: visible !important;
  }

  html body.klantapp-entry.portal-active #portalDashboard > .portal-section-nav {
    position: sticky !important;
    top: 76px !important;
    grid-column: 1 !important;
    grid-row: 1 / span 60 !important;
    display: grid !important;
    align-content: start !important;
    gap: 10px !important;
    width: 248px !important;
    max-width: 248px !important;
    min-height: calc(100dvh - 92px) !important;
    max-height: calc(100dvh - 92px) !important;
    padding: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid #d9e4ed !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html body.klantapp-entry.portal-active #portalDashboard > :not(.portal-section-nav) {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body.klantapp-entry.portal-active .portal-section-nav .portal-sidebar-brand {
    display: grid !important;
    justify-items: start !important;
    gap: 4px !important;
    padding: 0 2px 8px !important;
    border-bottom: 1px solid #edf2f6 !important;
    background: transparent !important;
  }

  html body.klantapp-entry.portal-active .portal-section-nav .portal-sidebar-brand img {
    display: block !important;
    width: 150px !important;
    max-width: 150px !important;
    max-height: 40px !important;
    object-fit: contain !important;
  }

  html body.klantapp-entry.portal-active .portal-section-nav .portal-sidebar-wordmark {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 0 !important;
    color: #001f3f !important;
    font-size: 21px !important;
    font-weight: 880 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  html body.klantapp-entry.portal-active .portal-section-nav .portal-sidebar-wordmark strong {
    color: #ff8200 !important;
    font: inherit !important;
  }

  html body.klantapp-entry.portal-active .portal-section-nav .portal-nav-links,
  html body.klantapp-entry.portal-active .portal-section-nav .portal-nav-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    width: 100% !important;
  }

  html body.klantapp-entry.portal-active .portal-section-nav a.portal-nav-link,
  html body.klantapp-entry.portal-active .portal-section-nav .portal-sidebar-logout {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding: 7px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #102033 !important;
    font-size: 12px !important;
    font-weight: 620 !important;
    line-height: 1.15 !important;
    text-align: left !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  html body.klantapp-entry.portal-active .portal-section-nav a.portal-nav-link.active {
    border-color: rgba(255, 130, 0, .38) !important;
    background: #fff3e4 !important;
    box-shadow: inset 3px 0 0 #ff8200 !important;
  }

  html body.klantapp-entry.portal-active .portal-section-nav :where(svg, .portal-nav-icon) {
    width: 17px !important;
    height: 17px !important;
    color: #ff8200 !important;
  }

  html body.klantapp-entry.portal-active .customer-advanced-nav {
    display: none !important;
  }

  html body.klantapp-entry.portal-active .sidebar-chat-widget {
    display: none !important;
  }

  html body.klantapp-entry.portal-active .panel-head.customer-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid #d9e4ed !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #102033 !important;
  }

  html body.klantapp-entry.portal-active .panel-head.customer-head h1 {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  html body.klantapp-entry.portal-active .panel-head.customer-head p {
    margin: 3px 0 0 !important;
    font-size: 11px !important;
    color: #5f7184 !important;
  }

  html body.klantapp-entry.portal-active #portalDashboard > .customer-section.portal-view-active {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.klantapp-entry.portal-active .customer-section.portal-view-active :where(.customer-overview-hero, .customer-overview-list, .customer-request-card, .wallet-panel, .account-context-panel, .need-to-know-assistant, .business-package-grid, .property-manager, .stay-assistant-panel, .hospitality-offer-card) {
    background: #ffffff !important;
    color: #102033 !important;
    border-color: #d9e4ed !important;
    box-shadow: none !important;
  }

  html body.klantapp-entry.portal-active .customer-section.portal-view-active :where(.customer-overview-hero article, .customer-overview-hero > div, .customer-overview-list article, .account-context-panel article, .business-package-grid article, .property-manager article, .hospitality-offer-card, .need-to-know-assistant) {
    background: #f7fafc !important;
    color: #102033 !important;
    border: 1px solid #d9e4ed !important;
    box-shadow: none !important;
  }

  html body.klantapp-entry.portal-active .customer-section.portal-view-active :where(.customer-overview-hero *, .customer-overview-list *, .customer-request-card *, .wallet-panel *, .account-context-panel *, .need-to-know-assistant *) {
    color: inherit !important;
  }

  html body.klantapp-entry.portal-active .customer-section.portal-view-active :where(.customer-overview-hero small, .customer-overview-list small, .customer-request-card small, .wallet-panel small, .account-context-panel small) {
    color: #5f7184 !important;
  }

  html body.klantapp-entry.portal-active .customer-section.portal-view-active :where(.customer-next-action, .customer-status-strip article, .business-shortcuts a, .mini-job-grid article, .mini-job-card, .customer-regelhulp-grid a) {
    background: #ffffff !important;
    color: #102033 !important;
    border: 1px solid #d9e4ed !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  html body.klantapp-entry.portal-active .customer-section.portal-view-active .customer-next-action.warning {
    background: #fff6ea !important;
    border-color: #ffbd78 !important;
  }

  html body.klantapp-entry.portal-active .customer-section.portal-view-active :where(.customer-next-action *, .customer-status-strip article *, .business-shortcuts a *, .mini-job-grid article *, .mini-job-card *, .customer-regelhulp-grid a *) {
    color: inherit !important;
    opacity: 1 !important;
  }

  html body.klantapp-entry.portal-active .customer-section.portal-view-active :where(.customer-next-action small, .customer-status-strip article span, .business-shortcuts a span, .mini-job-grid article small, .mini-job-card small, .customer-regelhulp-grid a span) {
    color: #5f7184 !important;
  }
}

.third-party-quote-check-panel {
  display: grid;
  gap: 12px;
}

.third-party-quote-check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.third-party-quote-check-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d9e4ed;
  border-radius: 8px;
  background: #ffffff;
}

.third-party-quote-check-card.has-saving {
  border-color: #ff9f43;
  background: #fff7ed;
}

.third-party-quote-check-card strong {
  display: block;
  margin: 2px 0;
}

.third-party-quote-check-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.third-party-quote-check-card dl div {
  padding: 8px;
  border: 1px solid #d9e4ed;
  border-radius: 8px;
  background: #f7fafc;
}

.third-party-quote-check-card dt {
  font-size: 11px;
  color: #5f7184;
}

.third-party-quote-check-card dd {
  margin: 2px 0 0;
  font-weight: 700;
  color: #102033;
}

.quote-check-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quote-check-tags span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef5fb;
  color: #3d5064;
  font-size: 12px;
}

@media (max-width: 760px) {
  html body.klantapp-entry.portal-active #portalDashboard.dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 8px 76px !important;
    overflow-x: hidden !important;
  }

  html body.klantapp-entry.portal-active #portalDashboard > .portal-section-nav {
    display: none !important;
  }

  html body.klantapp-entry.portal-active #portalDashboard > .customer-section.portal-view-active {
    grid-column: 1 !important;
    width: 100% !important;
  }

  .third-party-quote-check-card dl {
    grid-template-columns: 1fr !important;
  }
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(#quoteLinesForm, #quoteLines, .quote-box, .request-detail-foldout-body) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(#quoteLinesForm .wide, #quoteLines.wide, .quote-line-tax-note, #addLineBtn, .g-account-admin-note.wide) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .quote-line {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) 32px !important;
  align-items: end !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .quote-line > :where(input, select, .offer-gaccount-fields, button) {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .quote-line > input[name="lineDescription"] {
  grid-column: span 2 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .quote-line > .offer-gaccount-fields {
  grid-column: span 2 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .quote-line [data-remove-line] {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  justify-self: end !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .profix-operating-panel {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--pf24-line, #d8e2ee);
  border-radius: 12px;
  background: var(--pf24-surface, #fff);
  box-shadow: 0 8px 24px rgba(16, 32, 51, .05);
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .profix-operating-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .profix-operating-head h3 {
  margin: 0;
  color: var(--pf24-text, #102033);
  font-size: 16px;
  line-height: 1.2;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .profix-operating-head p {
  margin: 4px 0 0;
  max-width: 760px;
  color: var(--pf24-muted, #5f7184);
  font-size: 12px;
  line-height: 1.35;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .profix-operating-panel .badge.warning {
  border-color: #ff9f43;
  background: #fff7ed;
  color: #8a4a00;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .profix-operating-panel .badge.danger {
  border-color: #ef4444;
  background: #fff1f2;
  color: #991b1b;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .profix-operating-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .profix-operating-kpis button {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--pf24-line, #d8e2ee);
  border-radius: 10px;
  background: #f8fbfd;
  color: var(--pf24-text, #102033);
  text-align: left;
  cursor: pointer;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .profix-operating-kpis strong {
  font-size: 15px;
  line-height: 1.1;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .profix-operating-kpis span {
  color: var(--pf24-muted, #5f7184);
  font-size: 11px;
  line-height: 1.2;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .profix-operating-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .profix-guard-list {
  display: grid;
  gap: 6px;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .profix-guard-list span {
  padding: 7px 9px;
  border: 1px solid var(--pf24-line, #d8e2ee);
  border-radius: 9px;
  background: #f8fbfd;
  color: var(--pf24-text, #102033);
  font-size: 12px;
  line-height: 1.25;
}

@media (max-width: 980px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) .profix-operating-grid {
    grid-template-columns: 1fr;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .profix-operating-head {
    display: grid;
  }
}

/* Definitive long-page subtabs: one compact component for every role/workspace. */
html :where(body.portal-active, body.admin-body) .inline-subtabs {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

html :where(body.portal-active, body.admin-body) .long-page-subtabs {
  margin: 0 0 14px;
}

html :where(body.portal-active, body.admin-body) .inline-subtab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--pf24-line, #d8e2ee);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pf24-surface, #fff) 88%, var(--pf24-bg, #f5f7fb));
}

html :where(body.portal-active, body.admin-body) .inline-subtab-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--pf24-muted, #64748b);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
}

html :where(body.portal-active, body.admin-body) .inline-subtab-nav button.active,
html :where(body.portal-active, body.admin-body) .inline-subtab-nav button[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--pf24-accent, #ff8200) 42%, var(--pf24-line, #d8e2ee));
  background: color-mix(in srgb, var(--pf24-accent, #ff8200) 12%, var(--pf24-surface, #fff));
  color: var(--pf24-text, #102033);
}

html :where(body.portal-active, body.admin-body) .inline-subtab-nav svg,
html :where(body.portal-active, body.admin-body) .inline-subtab-nav i[data-lucide] {
  width: 15px;
  height: 15px;
  color: var(--pf24-accent, #ff8200);
}

html :where(body.portal-active, body.admin-body) .inline-subtab-panels,
html :where(body.portal-active, body.admin-body) .inline-subtab-panel {
  width: 100%;
  min-width: 0;
}

html :where(body.portal-active, body.admin-body) .inline-subtab-panel[hidden] {
  display: none !important;
}

html :where(body.portal-active, body.admin-body) .inline-subtab-panel > * {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 760px) {
  html :where(body.portal-active, body.admin-body) .inline-subtab-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  html :where(body.portal-active, body.admin-body) .inline-subtab-nav button {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 6px 9px;
    font-size: 11px;
  }
}
.compact-alert-list {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.compact-alert {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border, #d9e3ee);
  border-radius: 8px;
  background: #fff8ef;
  color: var(--text, #102033);
  font-size: 0.9rem;
}

.compact-alert small {
  grid-column: 1 / -1;
  color: var(--muted, #5c6b7a);
  line-height: 1.35;
}

.compact-alert-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.compact-scope-select {
  min-height: 30px;
  max-width: min(260px, 100%);
  border: 1px solid var(--border, #d9e3ee);
  border-radius: 8px;
  background: #fff;
  color: var(--text, #102033);
  padding: 4px 28px 4px 9px;
  font-size: 0.82rem;
  font-weight: 750;
}

.compact-alert.is-warning {
  background: #fff4f0;
  border-color: #ffb199;
}

/* Public demo readiness: keep the header logo fully visible on every viewport. */
body.public-site .topbar {
  min-height: 76px !important;
  overflow: visible !important;
}

body.public-site .topbar .brand,
body.public-site .public-brand {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 56px !important;
  overflow: visible !important;
}

body.public-site .topbar .brand img,
body.public-site .public-brand img,
body.public-site .public-brand-logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: min(260px, 42vw) !important;
  max-height: 56px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

html[data-theme="light"] body.public-site .public-brand-logo-dark-mode,
html:not([data-theme="dark"]) body.public-site .public-brand-logo-dark-mode {
  display: none !important;
}

html[data-theme="dark"] body.public-site .public-brand-logo-light-mode {
  display: none !important;
}