/* EGGnium designsystem — ontstaan in Sprint 04 (UI/UX-vernieuwing).
   Wordt NA egwcrm.css geladen. Bevat: tokens, app-shell en een uniforme opmaak van de bestaande (legacy)
   componentklassen, zodat alle schermen dezelfde knoppen, labels, meldingen, tabellen en formulieren krijgen
   zonder de markup of het gedrag te wijzigen. Nieuwe markup gebruikt de egw-*-componenten. Geen !important. */

/* ===================== 1. Tokens ===================== */
:root {
  --egw-navy-950: #071122; --egw-navy-900: #0b1a33; --egw-navy-800: #152e50;
  --egw-blue-700: #133f91; --egw-blue-600: #174daf; --egw-blue-500: #2563d4; --egw-blue-100: #e3ecfb; --egw-blue-50: #f2f6fd;
  --egw-teal-600: #0b8a9c; --egw-teal-500: #0da3b8; --egw-teal-100: #d9f3f6;
  --egw-orange-600: #d97706; --egw-orange-500: #f39200; --egw-orange-100: #fff1dc;
  --egw-green-500: #2fbf87;
  --egw-gray-950: #111827; --egw-gray-800: #1f2937; --egw-gray-700: #374151; --egw-gray-600: #4b5563; --egw-gray-500: #6b7280;
  --egw-gray-400: #9ca3af; --egw-gray-300: #d1d5db; --egw-gray-200: #e5e7eb; --egw-gray-100: #f1f3f6; --egw-gray-50: #f7f8fa;
  --egw-success-text: #0f6b45; --egw-success-bg: #e6f6ee; --egw-success-border: #a7dfc2;
  --egw-warning-text: #8a4b00; --egw-warning-bg: #fff4e0; --egw-warning-border: #f3cf8b;
  --egw-danger-text: #a61b1b;  --egw-danger-bg: #fdecec;  --egw-danger-border: #f2b8b8;
  --egw-info-text: #0d4d8f;    --egw-info-bg: #e8f1fc;    --egw-info-border: #b5cff2;
  --egw-neutral-text: #374151; --egw-neutral-bg: #eef0f3; --egw-neutral-border: #d5d9df;
  --egw-bg: var(--egw-gray-50); --egw-surface: #fff; --egw-border: var(--egw-gray-200); --egw-border-strong: var(--egw-gray-300);
  --egw-text: var(--egw-gray-950); --egw-text-muted: var(--egw-gray-600); --egw-text-subtle: var(--egw-gray-500);
  --egw-primary: var(--egw-blue-600); --egw-primary-hover: var(--egw-blue-700); --egw-accent: var(--egw-orange-500); --egw-focus: #3b82f6;
  --egw-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --egw-fs-12: .75rem; --egw-fs-13: .8125rem; --egw-fs-14: .875rem; --egw-fs-16: 1rem; --egw-fs-18: 1.125rem; --egw-fs-22: 1.375rem; --egw-fs-28: 1.75rem;
  --egw-s1: 4px; --egw-s2: 8px; --egw-s3: 12px; --egw-s4: 16px; --egw-s5: 24px; --egw-s6: 32px; --egw-s7: 48px;
  --egw-radius-sm: 4px; --egw-radius: 8px; --egw-radius-pill: 999px;
  --egw-shadow-raised: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --egw-shadow-dialog: 0 20px 48px rgba(7,17,34,.28);
  --egw-shell-h: 56px;

  /* Legacy-variabelen uit egwcrm.css koppelen aan de tokens: alle bestaande schermen volgen mee. */
  --color-primary: var(--egw-blue-600);
  --color-primary-dark: var(--egw-blue-700);
  --color-background: var(--egw-bg);
  --color-panel: var(--egw-surface);
  --color-border: var(--egw-border);
  --color-text: var(--egw-text);
  --color-muted: var(--egw-text-muted);
  --color-danger: var(--egw-danger-text);
  --page-width-standard: 1440px;
  --page-width-wide: 1760px;
  --page-width-narrow: 1040px;
}

/* ===================== 2. Basis ===================== */
body { font-family: var(--egw-font); font-size: var(--egw-fs-14); line-height: 1.45; background: var(--egw-bg); color: var(--egw-text); }
h1, h2, h3, h4 { color: var(--egw-gray-950); line-height: 1.25; }
h1 { font-size: var(--egw-fs-22); }
h2 { font-size: var(--egw-fs-18); font-weight: 600; }
h3 { font-size: var(--egw-fs-16); font-weight: 600; }
a { color: var(--egw-primary); }
:focus-visible { outline: 2px solid var(--egw-focus); outline-offset: 2px; }
.muted { color: var(--egw-text-muted); }
.sr-only, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===================== 3. App-shell ===================== */
.egw-shell { position: sticky; top: 0; z-index: 100; min-height: var(--egw-shell-h); display: flex; align-items: center; gap: var(--egw-s5); padding: 0 var(--egw-s5); background: var(--egw-navy-900); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.egw-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 4px 0; border-radius: var(--egw-radius-sm); text-decoration: none; }
.egw-brand:hover { text-decoration: none; opacity: .92; }
.egw-brand-symbool { height: 40px; width: auto; display: block; border-radius: 50%; background: radial-gradient(circle at 52% 52%, rgba(255,255,255,.22) 0 42%, rgba(255,255,255,0) 66%); filter: drop-shadow(0 0 1px rgba(255,255,255,.25)); }
.egw-brand-woordmerk { display: block; color: #fff; font-size: 1.65rem; font-weight: 800; line-height: 1; letter-spacing: .035em; }
.egw-nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.egw-nav > a, .egw-nav .egw-menu > button { display: inline-flex; align-items: center; gap: 6px; color: #c9d6ea; font: inherit; font-size: var(--egw-fs-14); font-weight: 500; padding: 8px 12px; border-radius: var(--egw-radius-sm); background: none; border: 0; cursor: pointer; white-space: nowrap; text-decoration: none; margin: 0; }
.egw-nav > a:hover, .egw-nav .egw-menu > button:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.egw-nav > a.active, .egw-nav .egw-menu > button.active { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 -2px 0 var(--egw-accent); }
.egw-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: var(--egw-radius-pill); background: var(--egw-accent); color: var(--egw-navy-950); font-size: var(--egw-fs-12); font-weight: 700; line-height: 18px; text-align: center; }
.egw-shell-right { display: flex; align-items: center; gap: var(--egw-s2); margin-left: auto; }
.egw-icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: var(--egw-radius-sm); border: 0; background: none; color: #c9d6ea; cursor: pointer; }
.egw-icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.egw-icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.egw-user { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; margin: 0; border-radius: var(--egw-radius-pill); border: 0; background: rgba(255,255,255,.06); color: #fff; font: inherit; font-weight: 500; cursor: pointer; }
.egw-user:hover { background: rgba(255,255,255,.12); }
.egw-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--egw-teal-500); color: var(--egw-navy-950); font-weight: 700; font-size: var(--egw-fs-12); }
.egw-user-text { display: grid; text-align: left; line-height: 1.15; }
.egw-user-text small { color: #9fb3d1; font-size: var(--egw-fs-12); font-weight: 400; }
.egw-menu { position: relative; }
.egw-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 120; min-width: 240px; padding: 6px; background: var(--egw-surface); color: var(--egw-text); border: 1px solid var(--egw-border); border-radius: var(--egw-radius); box-shadow: var(--egw-shadow-dialog); display: none; }
.egw-nav .egw-menu-panel { left: 0; right: auto; }
.egw-menu[data-open] > .egw-menu-panel { display: grid; }
.egw-menu-panel a, .egw-menu-panel button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; margin: 0; border-radius: var(--egw-radius-sm); color: var(--egw-text); background: none; border: 0; font: inherit; font-weight: 400; cursor: pointer; text-decoration: none; }
.egw-menu-panel a:hover, .egw-menu-panel button:hover, .egw-menu-panel a.active { background: var(--egw-gray-100); text-decoration: none; }
.egw-menu-panel a.active { font-weight: 600; box-shadow: inset 3px 0 0 var(--egw-accent); }
.egw-menu-panel form { display: block; margin: 0; }
.egw-menu-panel hr { border: 0; border-top: 1px solid var(--egw-border); margin: 6px 0; }
.egw-menu-label { padding: 6px 10px 2px; font-size: var(--egw-fs-12); color: var(--egw-text-subtle); text-transform: uppercase; letter-spacing: .4px; }
.egw-menu-identity { padding: 8px 10px; display: grid; }
.egw-menu-identity small { color: var(--egw-text-subtle); }
.egw-nav-toggle { display: none; }
.menu-count-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: var(--egw-radius-pill); background: var(--egw-accent); color: var(--egw-navy-950); font-size: var(--egw-fs-12); line-height: 18px; text-align: center; }

/* Pagina en meldingen */
.page-shell { width: auto; max-width: var(--page-width-standard); padding: var(--egw-s5); }
.page-shell-wide { max-width: var(--page-width-wide); }
.egw-flash { display: grid; gap: var(--egw-s2); margin-bottom: var(--egw-s4); }
.egw-flash:not(:has(.message)) { display: none; }
.screen-help-toolbar { display: none; }

/* ===================== 4. Panelen, kaarten, koppen ===================== */
.panel { border-radius: var(--egw-radius); border-color: var(--egw-border); box-shadow: var(--egw-shadow-raised); padding: var(--egw-s5); }
.panel h1 { font-size: var(--egw-fs-22); margin: 0 0 4px; }
.panel p { color: var(--egw-text-muted); }

/* ===================== 5. Knoppen ===================== */
button { background: var(--egw-primary); border: 1px solid var(--egw-primary); border-radius: var(--egw-radius-sm); color: #fff; font-weight: 600; padding: 8px 14px; line-height: 1.2; }
button:hover { background: var(--egw-primary-hover); }
.btn, a.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--egw-radius-sm); border: 1px solid transparent; font: inherit; font-weight: 600; font-size: var(--egw-fs-14); line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s; }
.btn:hover { text-decoration: none; }
.btn-primary, a.btn-primary, button.btn-primary { background: var(--egw-primary); border-color: var(--egw-primary); color: #fff; }
.btn-primary:hover { background: var(--egw-primary-hover); border-color: var(--egw-primary-hover); color: #fff; }
.btn-secondary, .btn-outline-secondary, .button-secondary, a.btn-secondary, a.btn-outline-secondary, button.btn-secondary, button.btn-outline-secondary { background: var(--egw-surface); color: var(--egw-gray-800); border-color: var(--egw-border-strong); }
.btn-secondary:hover, .btn-outline-secondary:hover, .button-secondary:hover { background: var(--egw-gray-100); color: var(--egw-gray-950); }
.btn-danger, .btn-outline-danger, button.btn-danger, button.btn-outline-danger { background: var(--egw-surface); color: var(--egw-danger-text); border-color: var(--egw-danger-border); }
.btn-danger:hover, .btn-outline-danger:hover { background: var(--egw-danger-bg); color: var(--egw-danger-text); }
.btn-danger-solid, button.btn-danger-solid { background: #c62828; border-color: #c62828; color: #fff; }
.btn-danger-solid:hover { background: #a61b1b; color: #fff; }
.btn-success, button.btn-success { background: var(--egw-success-bg); color: var(--egw-success-text); border-color: var(--egw-success-border); }
.btn-success:hover, button.btn-success:hover { background: #d3efe1; color: var(--egw-success-text); }
.btn-sm, a.btn-sm, button.btn-sm { min-height: 30px; padding: 0 10px; font-size: var(--egw-fs-13); }
.btn[disabled], .btn[aria-disabled="true"], button[disabled] { opacity: .55; cursor: not-allowed; }
.button-link { text-decoration: none; }

/* ===================== 6. Statuslabels ===================== */
.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 1px 8px; border-radius: var(--egw-radius-pill); border: 1px solid var(--egw-neutral-border); background: var(--egw-neutral-bg); color: var(--egw-neutral-text); font-size: var(--egw-fs-12); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.badge-neutral, .badge-normal, .badge-low { background: var(--egw-neutral-bg); color: var(--egw-neutral-text); border-color: var(--egw-neutral-border); }
.badge-high, .badge-warning { background: var(--egw-warning-bg); color: var(--egw-warning-text); border-color: var(--egw-warning-border); }
.badge-danger { background: var(--egw-danger-bg); color: var(--egw-danger-text); border-color: var(--egw-danger-border); }
.badge-success { background: var(--egw-success-bg); color: var(--egw-success-text); border-color: var(--egw-success-border); }
.badge-info { background: var(--egw-info-bg); color: var(--egw-info-text); border-color: var(--egw-info-border); }
.relation-phase-badge--lead { background: var(--egw-info-bg); color: var(--egw-info-text); border-color: var(--egw-info-border); }
.relation-phase-badge--prospect { background: var(--egw-teal-100); color: var(--egw-teal-600); border-color: #9fdde6; }
.relation-phase-badge--customer { background: var(--egw-success-bg); color: var(--egw-success-text); border-color: var(--egw-success-border); }
.status-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 8px; border-radius: var(--egw-radius-pill); border: 1px solid var(--egw-neutral-border); background: var(--egw-neutral-bg); color: var(--egw-neutral-text); font-size: var(--egw-fs-12); font-weight: 600; white-space: nowrap; }
.status-pill.status-voldoet, .status-pill.status-actief, .status-pill.status-ok, .status-pill.status-geslaagd { background: var(--egw-success-bg); color: var(--egw-success-text); border-color: var(--egw-success-border); }
.status-pill.status-waarschuwing, .status-pill.status-handmatig_controleren, .status-pill.status-controle, .status-pill.status-gepland { background: var(--egw-warning-bg); color: var(--egw-warning-text); border-color: var(--egw-warning-border); }
.status-pill.status-voldoet_niet, .status-pill.status-fout, .status-pill.status-mislukt { background: var(--egw-danger-bg); color: var(--egw-danger-text); border-color: var(--egw-danger-border); }
.da-pill { border-radius: var(--egw-radius-pill); font-size: var(--egw-fs-12); font-weight: 600; }
.da-pill-success { background: var(--egw-success-bg); color: var(--egw-success-text); border: 1px solid var(--egw-success-border); }
.da-pill-info { background: var(--egw-info-bg); color: var(--egw-info-text); border: 1px solid var(--egw-info-border); }
.da-pill-neutral { background: var(--egw-neutral-bg); color: var(--egw-neutral-text); border: 1px solid var(--egw-neutral-border); }
.da-pill-danger { background: var(--egw-danger-bg); color: var(--egw-danger-text); border: 1px solid var(--egw-danger-border); }
.da-pill-warning { background: var(--egw-warning-bg); color: var(--egw-warning-text); border: 1px solid var(--egw-warning-border); }
.work-status { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 8px; border-radius: var(--egw-radius-pill); font-size: var(--egw-fs-12); font-weight: 600; background: var(--egw-neutral-bg); color: var(--egw-neutral-text); border: 1px solid var(--egw-neutral-border); }
.work-status--niet_bellen { background: var(--egw-danger-bg); color: var(--egw-danger-text); border-color: var(--egw-danger-border); }
.work-status--kan_bellen { background: var(--egw-success-bg); color: var(--egw-success-text); border-color: var(--egw-success-border); }
.work-status--data_analyse { background: var(--egw-info-bg); color: var(--egw-info-text); border-color: var(--egw-info-border); }

/* ===================== 7. Meldingen ===================== */
.message, .alert { display: block; margin: 0 0 var(--egw-s4); padding: var(--egw-s3) var(--egw-s4); border: 1px solid var(--egw-info-border); border-left-width: 4px; border-radius: var(--egw-radius); background: var(--egw-info-bg); color: var(--egw-info-text); }
.message.info, .alert-info { background: var(--egw-info-bg); color: var(--egw-info-text); border-color: var(--egw-info-border); }
.message.success, .alert-success { background: var(--egw-success-bg); color: var(--egw-success-text); border-color: var(--egw-success-border); }
.message.warning, .alert-warning { background: var(--egw-warning-bg); color: var(--egw-warning-text); border-color: var(--egw-warning-border); }
.message.error, .alert-danger, .alert-error { background: var(--egw-danger-bg); color: var(--egw-danger-text); border-color: var(--egw-danger-border); }
p.warning, .warning-text { color: var(--egw-warning-text); }
.empty-state, .relation-empty-state { color: var(--egw-text-muted); }

/* ===================== 8. Formulieren ===================== */
input, textarea, select { border-color: var(--egw-border-strong); border-radius: var(--egw-radius-sm); font-size: var(--egw-fs-14); }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select { min-height: 36px; padding: 6px 10px; }
textarea { padding: 8px 10px; }
label { color: var(--egw-gray-700); font-size: var(--egw-fs-13); }
input:focus, textarea:focus, select:focus { border-color: var(--egw-focus); box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.field-error { color: var(--egw-danger-text); }
.form-control { width: 100%; }
.row { display: flex; flex-wrap: wrap; gap: var(--egw-s2); align-items: flex-end; }
.row > .col { flex: 1 1 240px; min-width: 0; }
.row > .col-auto { flex: 0 0 auto; }

/* Filterbalken */
.filter-toolbar, .filter-bar, .search-form { gap: var(--egw-s3); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--egw-s3); margin: 0 0 var(--egw-s4); padding: var(--egw-s3); background: var(--egw-gray-50); border: 1px solid var(--egw-border); border-radius: var(--egw-radius); }
.filter-bar label { margin: 0; }
.toolbar-more > summary { min-height: 36px; border-radius: var(--egw-radius-sm); }
.toolbar-more-panel { border-radius: var(--egw-radius); box-shadow: var(--egw-shadow-dialog); border-color: var(--egw-border); }

/* ===================== 9. Tabellen ===================== */
.data-table, .table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--egw-fs-14); }
.data-table th, .table th { background: var(--egw-gray-50); color: var(--egw-gray-600); font-size: var(--egw-fs-12); font-weight: 600; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--egw-border); white-space: nowrap; }
.data-table th a, .table th a { color: var(--egw-gray-700); text-decoration: none; }
.data-table th a:hover { color: var(--egw-primary); }
.data-table td, .table td { padding: 10px 12px; border-bottom: 1px solid var(--egw-gray-100); vertical-align: middle; }
.data-table tbody tr:hover td, .table-hover tbody tr:hover td { background: var(--egw-blue-50); }
.table-striped tbody tr:nth-child(odd) td { background: transparent; }
.table-wrap { border: 1px solid var(--egw-border); border-radius: var(--egw-radius); background: var(--egw-surface); }

/* ===================== 10. Tabs ===================== */
.dossier-tabs, .systeem-tabs, .datascout-subnav { display: flex; gap: 2px; border-bottom: 1px solid var(--egw-border); overflow-x: auto; }
.dossier-tab, .systeem-tabs a, .datascout-subnav a { padding: 10px 14px; color: var(--egw-gray-600); font-weight: 600; text-decoration: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-radius: 0; white-space: nowrap; }
.dossier-tab:hover, .systeem-tabs a:hover, .datascout-subnav a:hover { color: var(--egw-gray-950); text-decoration: none; background: none; }
.dossier-tab.is-active, .systeem-tabs a.active, .systeem-tabs a.is-active, .datascout-subnav a.active { color: var(--egw-primary); border-bottom-color: var(--egw-accent); background: none; }

/* ===================== 11. Dashboardtegels ===================== */
.dashboard-tile { border-left: 1px solid var(--egw-border); border-radius: var(--egw-radius); box-shadow: var(--egw-shadow-raised); min-height: 0; padding: var(--egw-s4); gap: 4px; }
.dashboard-tile:hover, .dashboard-tile:focus-visible { border-color: var(--egw-blue-500); transform: none; box-shadow: 0 6px 16px rgba(23,77,175,.12); }
.dashboard-tile-title { min-height: 0; color: var(--egw-gray-600); font-size: var(--egw-fs-13); }
.dashboard-tile-value { color: var(--egw-gray-950); font-size: var(--egw-fs-28); margin: 2px 0; }
.dashboard-tile-link { color: var(--egw-primary); padding-top: 8px; }
.dashboard-tile--aandacht { border-left: 3px solid var(--egw-accent); }

/* ===================== 12. Dialogen, notificaties, tooltips ===================== */
dialog { border-radius: 10px; border: 0; box-shadow: var(--egw-shadow-dialog); }
dialog::backdrop { background: rgba(7,17,34,.45); }
.egw-dialog { padding: 0; width: min(480px, calc(100vw - 32px)); }
.egw-dialog-body { padding: var(--egw-s5); display: grid; gap: var(--egw-s3); }
.egw-dialog-body h2 { margin: 0; font-size: var(--egw-fs-18); }
.egw-dialog-body p { margin: 0; color: var(--egw-gray-700); }
.egw-dialog-footer { display: flex; justify-content: flex-end; gap: var(--egw-s2); padding: var(--egw-s3) var(--egw-s5); background: var(--egw-gray-50); border-top: 1px solid var(--egw-border); border-radius: 0 0 10px 10px; }
.egw-dialog-footer button { margin: 0; }
.egw-dialog fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.egw-dialog .egw-choice { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--egw-border); border-radius: var(--egw-radius-sm); margin: 0; font-weight: 400; color: var(--egw-text); }
.egw-dialog .egw-choice small { display: block; color: var(--egw-text-subtle); }
.egw-dialog .egw-dialog-error { color: var(--egw-danger-text); font-size: var(--egw-fs-13); }
.egw-toasts { position: fixed; right: var(--egw-s5); bottom: var(--egw-s5); z-index: 300; display: grid; gap: var(--egw-s2); width: min(400px, calc(100vw - 32px)); }
.egw-toast { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: var(--egw-s3); align-items: start; padding: var(--egw-s3) var(--egw-s4); background: var(--egw-gray-950); color: #fff; border-radius: var(--egw-radius); box-shadow: var(--egw-shadow-dialog); animation: egw-in .18s ease-out; }
.egw-toast strong { display: block; }
.egw-toast small { display: block; color: #c9d6ea; font-size: var(--egw-fs-13); }
.egw-toast--success .egw-icon { color: var(--egw-green-500); }
.egw-toast--danger .egw-icon { color: #ff8a8a; }
.egw-toast--warning .egw-icon { color: var(--egw-orange-500); }
.egw-toast button { background: none; border: 0; color: #c9d6ea; padding: 0; margin: 0; cursor: pointer; }
.egw-toast .egw-toast-action { color: #fff; text-decoration: underline; font-weight: 600; }
@keyframes egw-in { from { transform: translateY(8px); opacity: 0; } }
[role="tooltip"], .field-tooltip, .egw-tooltip { background: var(--egw-gray-950); color: #fff; border-radius: var(--egw-radius-sm); font-size: var(--egw-fs-12); line-height: 1.45; box-shadow: var(--egw-shadow-raised); }

/* Foutpagina */
.egw-error { display: grid; gap: var(--egw-s4); max-width: 760px; }
.egw-error-head { display: flex; gap: var(--egw-s3); align-items: flex-start; }
.egw-error-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--egw-danger-bg); color: var(--egw-danger-text); }
.egw-error-ref { font-family: ui-monospace, Consolas, monospace; background: var(--egw-gray-100); border-radius: var(--egw-radius-sm); padding: 2px 6px; }
.egw-error details { border: 1px solid var(--egw-border); border-radius: var(--egw-radius); padding: var(--egw-s3) var(--egw-s4); }
.egw-error details > summary { cursor: pointer; font-weight: 600; }
.egw-error .status-list { margin-top: var(--egw-s3); }
.egw-error-actions { display: flex; flex-wrap: wrap; gap: var(--egw-s2); }

/* Terugknop */
.egw-back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--egw-fs-13); font-weight: 600; color: var(--egw-text-muted); text-decoration: none; }
.egw-back:hover { color: var(--egw-primary); text-decoration: none; }

/* ===================== 13. Responsief ===================== */
@media (max-width: 1240px) { .egw-user-text { display: none; } }
@media (max-width: 1100px) {
  .egw-shell { gap: var(--egw-s3); }
  .egw-nav { display: none; position: fixed; inset: var(--egw-shell-h) 0 auto 0; flex-direction: column; align-items: stretch; padding: var(--egw-s2); background: var(--egw-navy-900); box-shadow: var(--egw-shadow-dialog); max-height: calc(100vh - var(--egw-shell-h)); overflow: auto; }
  .egw-nav[data-open] { display: flex; }
  .egw-nav .egw-menu-panel { position: static; box-shadow: none; margin: 4px 0 4px 12px; }
  .egw-nav-toggle { display: inline-grid; }
}
@media (max-width: 640px) {
  .egw-shell { padding: 0 var(--egw-s3); }
  .egw-brand-woordmerk { font-size: 1.25rem; }
  .egw-brand-symbool { height: 30px; }
  .page-shell { padding: var(--egw-s4) var(--egw-s3); }
  .panel { padding: var(--egw-s4); }
  .egw-toasts { right: var(--egw-s3); bottom: var(--egw-s3); }
}

/* ===================== 14. Inlogscherm ===================== */
.egw-auth { max-width: 420px; margin: var(--egw-s6) auto; padding: var(--egw-s6) var(--egw-s5) var(--egw-s5); border-radius: 12px; box-shadow: var(--egw-shadow-raised); }
.egw-auth-merk { display: grid; justify-items: center; gap: 6px; margin-bottom: var(--egw-s5); }
.egw-auth-merk img { height: 150px; width: auto; }
.egw-auth-merk p { margin: 0; font-size: var(--egw-fs-12); letter-spacing: .12em; text-transform: uppercase; color: var(--egw-text-subtle); }
.egw-auth h1 { font-size: var(--egw-fs-18); text-align: center; }
.egw-auth button[type="submit"] { width: 100%; min-height: 40px; }
.egw-auth label { margin-bottom: 0; }
.work-status { white-space: normal; border-radius: 6px; line-height: 1.3; }
.btn-outline-danger { background: transparent; }

/* Sprint 04 (UI): foutpagina — referentie en subtitel */
.egw-error-ref { font-family: inherit; background: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--egw-s2); margin: 0; }
.egw-error-ref code { font-family: ui-monospace, Consolas, monospace; background: var(--egw-gray-100); border-radius: var(--egw-radius-sm); padding: 2px 6px; }
.egw-error-head h1 { margin: 0; }
.egw-error-titel { margin: 2px 0 0; color: var(--egw-text-muted); font-weight: 600; }
.egw-error .inline-form { display: inline; margin: 0; }
/* Omgevingslabel buiten LIVE (demo 17-10). */
.egw-env-badge { align-self: center; margin-left: 10px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(251,191,36,.6); background: rgba(251,191,36,.15); color: #fcd34d; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.egw-env-kort { display: none; }
@media (max-width: 480px) { .egw-env-badge { font-size: 10px; padding: 1px 6px; margin-left: 6px; } .egw-env-lang { display: none; } .egw-env-kort { display: inline; } }
@media print { .egw-env-badge { display: none; } }