:root {
  --ss-color-hero: #c63c77;
  --ss-color-primary: #1E74E0;
  --ss-color-accent: #4B2A8A;
  --ss-color-accent-dark: #3B0F5C;

  --ss-color-bg: #EDF0F5;
  --ss-color-surface: #FFFFFF;
  --ss-color-border: #D5DCE6;

  --ss-color-text: #16202A;
  --ss-color-text-soft: #5F6B7A;
  --ss-color-text-on-dark: #FFFFFF;

  --ss-color-success: #2FA96B;
  --ss-color-warning: #F59E0B;
  --ss-color-danger: #E5484D;

  /* "ink"-varianten: donkere leesbare tekstkleur op lichte tint (AA op wit).
     De heldere hues hierboven zijn voor vullingen/ruggengraat/knoppen; kleine
     tekst gebruikt deze. (PM-651 fris & contrast) */
  --ss-color-success-ink: #0B6E4F;
  --ss-color-warning-ink: #8A5A00;
  --ss-color-danger-ink: #C0362F;
  /* De ink-familie miste haar blauwe lid, en dat viel pas op toen de chips op
     klantoppervlak kwamen te staan: `--ss-color-primary` haalt op de lichte
     info-tint maar 3.84:1 -- onder de 4.5:1 die kleine tekst nodig heeft,
     terwijl success/warning/danger daar ruim overheen komen. Dit is dus geen
     nieuwe kleur maar het dichten van een gat: 5.32:1 op de info-tint van
     `.ss-chip--info`, gelijk aan wat success-ink op zijn eigen tint doet.
     (Gemeten in de browser, niet geschat.) */
  --ss-color-primary-ink: #1A5FB4;

  --ss-space-1: 4px;
  --ss-space-2: 8px;
  --ss-space-3: 12px;
  --ss-space-4: 16px;
  --ss-space-5: 24px;
  --ss-space-6: 32px;
  --ss-space-7: 48px;

  --ss-radius-sm: 8px;
  --ss-radius-md: 12px;
  --ss-radius-lg: 16px;
  --ss-radius-xl: 20px;

  --ss-shadow-sm: 0 1px 2px rgba(16, 42, 68, 0.10), 0 2px 8px rgba(16, 42, 68, 0.06);
  --ss-shadow-md: 0 8px 24px rgba(15, 42, 68, 0.08);

  --ss-container: 1200px;
  --ss-container-narrow: 920px;

  --ss-transition: 160ms ease;

  /* Mono voor data (tijdstippen, IDs, serials, tellers). Fira Code komt uit
     Twenty Twenty-Five (al geladen); systeem-mono als fallback. Platform-breed. */
  --ss-font-mono: "Fira Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
}

/* ── Platform-breed lettertype (PM-651 fris & contrast) ───────────────────────
   Het parent-theme Twenty Twenty-Five zet Manrope via z'n global-styles:
   body { font-family: var(--wp--preset--font-family--manrope) }.
   In plaats van die regel te bevechten, overschrijven we de VARIABELE zelf met
   !important. Elke plek die de preset gebruikt (body → en dus alles wat erft)
   valt zo terug op de systeemfont uit het ontwerpvoorstel. Bron-niveau fix, geldt
   overal waar deze portal-stylesheet laadt (= het hele portal-platform). */
:root {
  --wp--preset--font-family--manrope: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif !important;
}

/* Mono-utility voor data (tijdstippen, IDs, serials, tellers) — platform-breed
   binnen de portal-shell. Gebruik class="ss-mono" of <code>/<kbd>. */
body.ss-portal-shell .ss-mono,
body.ss-portal-shell .ss-num,
body.ss-portal-shell code,
body.ss-portal-shell kbd {
  font-family: var(--ss-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Werkbank: panelen vlak (PM-651 fris & contrast) ──────────────────────────
   De systeemfont wordt platform-breed geregeld via de Manrope-variabele-override
   hierboven; een werkbank-specifieke font-forcering is daardoor niet meer nodig
   (verwijderd zodat de mono-toets op data-elementen kan renderen).
   Vlakke panelen: geen slagschaduw, alleen haarlijn + het ene lichtgrijs. */
body.ss-portal-shell .sdt-bar,
body.ss-portal-shell .sdt-list,
body.ss-portal-shell .sdt-detail {
  box-shadow: none;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body.ss-portal-shell {
  margin: 0;
  background: var(--ss-color-bg);
  color: var(--ss-color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  /* WAAROM HIER EEN GEWICHT STAAT (vervolg op PM-663).
     Twenty Twenty-Five zet in zijn global-styles `body{font-weight:300}` met
     `letter-spacing:-0.1px`. PM-663 ving daarvan alleen de font-FAMILY af (via de
     Manrope-preset-variabele); het gewicht bleef staan. Gevolg: elk element in het
     hele portaal dat niet zelf een gewicht declareert, rendert in LIGHT. Dat is de
     dunne, ijle indruk die op een telefoonscherm het sterkst opvalt -- juist bij
     onderregels, lege staten en hints, want dat zijn precies de plekken waar geen
     expliciet gewicht stond. De werkbank ontsnapte eraan doordat vrijwel elke
     `.sdt-*`-regel zelf een gewicht zet; dat was compensatie, geen oplossing.
     400 is de bron-niveau-fix, op dezelfde plek en in dezelfde geest als PM-663.
     `letter-spacing: normal` hoort erbij: -0.1px is ontworpen voor Manrope in een
     grote display-maat, niet voor systeemfont op 13px. */
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
}

body.ss-portal-shell img {
  max-width: 100%;
  height: auto;
}

/* LINKKLEUR = ink, niet de heldere hue. Dezelfde regel die het ONTWERPSYSTEEM
   al voor groen/oranje/rood stelt -- "de heldere hues zijn voor vullingen,
   ruggengraat en knoppen; kleine tekst gebruikt de ink-variant" -- gold nog niet
   voor blauw, omdat de blauwe ink pas bestaat sinds de uitrol naar Customer.
   Gemeten: `--ss-color-primary` haalt op de grijze paginabodem 3.97:1, onder de
   4.5:1 voor tekst; de ink-variant 5.1:1. Dit raakt elke gewone link in het
   portaal, en dat is de bedoeling -- het was overal dezelfde tekortkoming. */
body.ss-portal-shell a {
  color: var(--ss-color-primary-ink);
  text-decoration: none;
  transition:
    color var(--ss-transition),
    opacity var(--ss-transition),
    border-color var(--ss-transition),
    background-color var(--ss-transition),
    box-shadow var(--ss-transition);
}

body.ss-portal-shell a:hover {
  color: var(--ss-color-accent);
}

.ss-app-shell {
  min-height: 100vh;
  background:
    linear-gradient(
      180deg,
      var(--ss-color-hero) 0,
      var(--ss-color-hero) 188px,
      var(--ss-color-bg) 188px,
      var(--ss-color-bg) 100%
    );
}

.ss-app-main {
  width: 100%;
  max-width: var(--ss-container);
  margin: 0 auto;
  padding: 24px var(--ss-space-5) var(--ss-space-7);
}

.ss-app-main--narrow {
  max-width: var(--ss-container-narrow);
}

/* Per-pagina breedte-optie (PM-631 §5): master-detail-surfaces (werkbank) willen de
   volle viewport-breedte; aan te vragen via ssp_render_portal_open(['width'=>'wide']). */
.ss-app-main--wide {
  max-width: none;
}

.ss-page-hero {
  margin-bottom: 22px;
}

.ss-page-hero--compact {
  margin-bottom: 18px;
}

.ss-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
}

.ss-page-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.02;
  font-weight: 800;
  color: var(--ss-color-text-on-dark);
}

.ss-page-title--dark {
  color: var(--ss-color-accent-dark);
}

.ss-page-subtitle {
  max-width: 760px;
  margin: 10px 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
}

.ss-page-subtitle strong {
  color: #ffffff;
}

.ss-page-subtitle--dark {
  color: var(--ss-color-text-soft);
}

.ss-section-title {
  margin: 0 0 var(--ss-space-3);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--ss-color-accent-dark);
}

.ss-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-space-4);
  margin-bottom: var(--ss-space-4);
  padding: var(--ss-space-4) var(--ss-space-5);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(135deg, var(--ss-color-accent-dark) 0%, var(--ss-color-accent) 100%);
  box-shadow: var(--ss-shadow-sm);
}

.ss-section-header__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--ss-color-text-on-dark);
}

.ss-section-header__meta {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
}

.ss-card,
.ss-panel,
.ss-form-card,
.ss-portal-card,
.ss-login-card {
  background: var(--ss-color-surface);
  border: 1px solid var(--ss-color-border);
  border-radius: var(--ss-radius-lg);
  box-shadow: var(--ss-shadow-md);
}

.ss-card,
.ss-panel {
  padding: var(--ss-space-5);
}

.ss-portal-grid,
.ss-portal-wrap .ss-portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.ss-portal-card {
  padding: 22px 24px 24px;
}

.ss-portal-card__kicker {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ss-color-accent);
}

.ss-portal-card__title {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.12;
  font-weight: 800;
  color: var(--ss-color-accent-dark);
}

.ss-portal-card__title a {
  color: inherit;
}

.ss-portal-card__title a:hover {
  color: var(--ss-color-primary);
}

.ss-portal-card__meta {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--ss-color-text-soft);
}

.ss-portal-card__actions,
.ss-portal-actions,
.ss-inline-actions,
.ss-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ss-portal-card__actions,
.ss-portal-actions,
.ss-inline-actions {
  justify-content: flex-start;
}

.ss-form-actions {
  justify-content: flex-end;
  padding-top: var(--ss-space-5);
  border-top: 1px solid var(--ss-color-border);
}

.ss-portal-card__actions .ss-btn,
.ss-portal-actions .ss-btn,
.ss-inline-actions .ss-btn,
.ss-form-actions .ss-btn {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
}

.ss-portal-wrap {
  width: 100%;
  max-width: var(--ss-container);
  margin: 0 auto;
  padding: var(--ss-space-6) var(--ss-space-5) var(--ss-space-7);
}

.ss-portal-header {
  margin-bottom: var(--ss-space-6);
}

.ss-portal-header h1,
.ss-portal-wrap > h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.06;
  font-weight: 800;
  color: var(--ss-color-text-on-dark);
}

.ss-portal-intro {
  max-width: 760px;
  margin: var(--ss-space-3) 0 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.92);
}

.ss-portal-pilot-title {
  margin: 0 0 var(--ss-space-2);
  font-size: 26px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--ss-color-accent-dark);
}

.ss-portal-pilot-title a {
  color: inherit;
}

.ss-portal-pilot-title a:hover {
  color: var(--ss-color-primary);
}

.ss-portal-notice {
  margin-bottom: var(--ss-space-5);
  padding: var(--ss-space-4);
  border-radius: var(--ss-radius-md);
  font-size: 14px;
}

.ss-portal-notice-error {
  border: 1px dashed rgba(229, 72, 77, 0.30);
  background: rgba(229, 72, 77, 0.08);
  color: var(--ss-color-danger-ink);
}

.ss-portal-notice-success {
  border: 1px dashed rgba(47, 169, 107, 0.30);
  background: rgba(47, 169, 107, 0.10);
  color: var(--ss-color-success-ink);
}

.ss-btn,
.ss-btn:link,
.ss-btn:visited,
button.ss-btn,
input[type="submit"].ss-btn,
.wp-element-button.ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: var(--ss-fs-sub);
  /* 500 was de laatste maat buiten 400/700 op het hele platform (Ron, besluit bij
     de uitrol naar Customer). Het ONTWERPSYSTEEM kent bewust maar twee gewichten:
     een derde trap is op een telefoonscherm niet te onderscheiden en leest als
     vaagheid. Een knoplabel is een actie, dus 700. Raakt elke knop platform-breed. */
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--ss-transition),
    box-shadow var(--ss-transition),
    background-color var(--ss-transition),
    border-color var(--ss-transition),
    color var(--ss-transition);
}

.ss-btn:hover,
button.ss-btn:hover,
input[type="submit"].ss-btn:hover,
.wp-element-button.ss-btn:hover {
  transform: translateY(-1px);
}

a.ss-btn,
a.ss-btn:link,
a.ss-btn:visited,
a.ss-btn:hover,
a.ss-btn:focus {
  text-decoration: none;
}

.ss-btn--primary,
.ss-btn-primary {
  background: var(--ss-color-primary);
  border-color: var(--ss-color-primary);
  color: var(--ss-color-text-on-dark);
  box-shadow: 0 8px 18px rgba(30, 115, 190, 0.22);
}

a.ss-btn--primary,
a.ss-btn--primary:link,
a.ss-btn--primary:visited,
a.ss-btn--primary:hover,
a.ss-btn--primary:focus,
a.ss-btn-primary,
a.ss-btn-primary:link,
a.ss-btn-primary:visited,
a.ss-btn-primary:hover,
a.ss-btn-primary:focus {
  color: var(--ss-color-text-on-dark);
}

.ss-btn--primary:hover,
.ss-btn-primary:hover {
  background: #1766aa;
  border-color: #1766aa;
  color: var(--ss-color-text-on-dark);
}

.ss-btn--secondary,
.ss-btn-secondary {
  background: var(--ss-color-surface);
  border-color: var(--ss-color-border);
  color: var(--ss-color-accent-dark);
}

a.ss-btn--secondary,
a.ss-btn--secondary:link,
a.ss-btn--secondary:visited,
a.ss-btn--secondary:hover,
a.ss-btn--secondary:focus,
a.ss-btn-secondary,
a.ss-btn-secondary:link,
a.ss-btn-secondary:visited,
a.ss-btn-secondary:hover,
a.ss-btn-secondary:focus {
  color: var(--ss-color-accent-dark);
}

.ss-btn--secondary:hover,
.ss-btn-secondary:hover {
  border-color: var(--ss-color-primary);
  color: var(--ss-color-primary);
  background: #fbfdff;
}

a.ss-btn--secondary:hover,
a.ss-btn-secondary:hover {
  color: var(--ss-color-primary);
}

.ss-btn--accent {
  background: var(--ss-color-accent);
  border-color: var(--ss-color-accent);
  color: var(--ss-color-text-on-dark);
  box-shadow: 0 8px 18px rgba(75, 42, 138, 0.20);
}

a.ss-btn--accent,
a.ss-btn--accent:link,
a.ss-btn--accent:visited,
a.ss-btn--accent:hover,
a.ss-btn--accent:focus {
  color: var(--ss-color-text-on-dark);
}

.ss-btn--accent:hover {
  background: var(--ss-color-accent-dark);
  border-color: var(--ss-color-accent-dark);
  color: var(--ss-color-text-on-dark);
}

.ss-btn--full {
  width: 100%;
}

.ss-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ss-color-border);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--ss-color-text-soft);
  white-space: nowrap;
}

.ss-badge--primary {
  background: rgba(30, 116, 224, 0.16);
  border-color: rgba(30, 116, 224, 0.28);
  color: var(--ss-color-primary);
}

.ss-badge--accent {
  background: rgba(75, 42, 138, 0.16);
  border-color: rgba(75, 42, 138, 0.28);
  color: var(--ss-color-accent);
}

.ss-badge--success {
  background: rgba(47, 169, 107, 0.16);
  border-color: rgba(47, 169, 107, 0.28);
  color: var(--ss-color-success-ink);
}

.ss-badge--warning {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.34);
  color: var(--ss-color-warning-ink);
}

.ss-badge--danger {
  background: rgba(229, 72, 77, 0.16);
  border-color: rgba(229, 72, 77, 0.28);
  color: var(--ss-color-danger-ink);
}

/* ── Generieke portaltabel ────────────────────────────────────────────────────
   Stond nergens gestyled in deze (dominante) stylesheet — alleen .ss-intake-table
   in ss-intake.css. Surfaces die ss-intake.css niet laden (bv. /pilots/, de legacy
   ss_pilot_core-shortcode) kregen daardoor een kale, randloze tabel waarin de cellen
   tegen elkaar plakten. Deze regels gelden voor elke class="ss-table". */
.ss-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 0.25rem;
  font-size: 0.95rem;
}
.ss-table thead th {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 2px solid var(--ss-color-border);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ss-color-text-soft);
  white-space: nowrap;
}
.ss-table tbody td {
  padding: 0.65rem 0.7rem;
  border-bottom: 1px solid #f0f1f3;
  vertical-align: middle;
}
.ss-table tbody tr:last-child td { border-bottom: 0; }
.ss-table tbody tr:hover { background: #f9fafb; }
.ss-table .ss-num { text-align: right; font-variant-numeric: tabular-nums; }
.ss-table .ss-nowrap { white-space: nowrap; }
.ss-table .ss-col-actions { text-align: right; white-space: nowrap; }
.ss-table code {
  font-size: 12px;
  background: #f4f5f7;
  padding: 2px 6px;
  border-radius: 5px;
}
/* Horizontale scroll op smalle schermen i.p.v. de pagina laten uitrekken. */
.ss-table-wrap { overflow-x: auto; }

/* Filter-chips-rij (o.a. pilot-overzicht) — nette tussenruimte i.p.v. losse spaties. */
.ss-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0.5rem 0 1rem;
}

/* Pilot-overzicht: titel-link iets prominenter dan een gewone celink. */
.ss-pilots-title { font-weight: 700; }

.ss-form-card {
  width: 100%;
  max-width: var(--ss-container-narrow);
  margin: 0 auto;
  padding: var(--ss-space-6);
}

.ss-form-grid {
  display: grid;
  gap: var(--ss-space-5);
}

.ss-form-grid > * {
  min-width: 0;
}

.ss-form-row {
  display: grid;
  gap: var(--ss-space-4);
}

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

.ss-field-group {
  display: grid;
  gap: var(--ss-space-2);
  min-width: 0;
}

.ss-field-group label,
.ss-form-card label {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ss-color-text-soft);
}

.ss-help-text,
.ss-field-help {
  margin: 0;
  font-size: 12px;
  color: var(--ss-color-text-soft);
}

.ss-form-card input[type="text"],
.ss-form-card input[type="email"],
.ss-form-card input[type="url"],
.ss-form-card input[type="number"],
.ss-form-card input[type="password"],
.ss-form-card input[type="date"],
.ss-form-card input[type="file"],
.ss-form-card select,
.ss-form-card textarea,
.ss-login-card input[type="text"],
.ss-login-card input[type="password"],
.ss-login-card input[type="email"] {
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ss-color-border);
  border-radius: var(--ss-radius-md);
  background: #fff;
  color: var(--ss-color-text);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--ss-transition), box-shadow var(--ss-transition), background-color var(--ss-transition);
}

.ss-form-card textarea {
  min-height: 140px;
  resize: vertical;
  padding-top: 12px;
}

.ss-form-card input[type="file"] {
  padding: 10px 12px;
  background: #fbfcfe;
}

.ss-form-card input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 12px;
  border: 1px solid var(--ss-color-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ss-color-accent-dark);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ss-form-card input:focus,
.ss-form-card select:focus,
.ss-form-card textarea:focus,
.ss-login-card input:focus {
  outline: none;
  border-color: var(--ss-color-primary);
  box-shadow: 0 0 0 3px rgba(30, 115, 190, 0.12);
}

.ss-repeater-block,
.ss-attachment-block,
.ss-evidence-block {
  display: grid;
  gap: var(--ss-space-4);
}

.ss-repeater-row {
  padding: var(--ss-space-4);
  border: 1px solid var(--ss-color-border);
  border-radius: var(--ss-radius-md);
  background: #fbfcfe;
}

.ss-repeater-row--accent {
  background: #fcf8ff;
  border-color: rgba(75, 42, 138, 0.14);
}

.ss-attachment-block .ss-repeater-row,
.ss-evidence-block .ss-repeater-row {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.ss-form-actions .ss-btn {
  min-width: 150px;
}

/* =========================================================================
   FORMS UX-UNIFICATIE (PM-xxx, Fase 2+3)
   Trekt de standalone forms (new-update / new-issue, ss-form-*) gelijk met de
   intake-look: zelfde label-stijl + echte add/remove-repeaters i.p.v. vaste
   rijen. Save-path onaangeroerd (attachment_*[] / evidence_*[] iteratie blijft).
   ========================================================================= */

/* labels gelijk aan de intake (uppercase, klein, gedempt) */
.ss-field-group label,
.ss-form-card label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6f7f93;
}

/* echte repeater */
.ss-form-repeater {
  display: grid;
  gap: var(--ss-space-4);
}

.ss-form-repeater__rows {
  display: grid;
  gap: var(--ss-space-3);
}

.ss-repeater-row__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--ss-space-3);
}

.ss-repeater-row__remove {
  appearance: none;
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid #e3c2c9;
  border-radius: var(--ss-radius-md);
  background: #ffffff;
  color: #9e1d31;
  font-size: 12px;
  font-weight: 700;
}

.ss-repeater-row__remove:hover,
.ss-repeater-row__remove:focus {
  background: #fdf2f4;
  border-color: #d6a3ad;
}

.ss-form-repeater__add {
  justify-self: start;
}

.ss-note-box {
  padding: var(--ss-space-4);
  border: 1px dashed rgba(75, 42, 138, 0.18);
  border-radius: var(--ss-radius-md);
  background: #faf7ff;
  color: var(--ss-color-text-soft);
  font-size: 14px;
}

.ss-login-wrap {
  min-height: calc(100vh - 120px);
  display: grid;
  place-items: center;
}

.ss-login-card {
  width: 100%;
  max-width: 460px;
  padding: 30px;
}

.ss-login-copy {
  margin: var(--ss-space-3) 0 var(--ss-space-5);
  color: var(--ss-color-text-soft);
  font-size: 15px;
}

.ss-login-card form {
  display: grid;
  gap: var(--ss-space-4);
}

.ss-login-card p {
  margin: 0;
}

.ss-login-card label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ss-color-text-soft);
}

.ss-login-card .login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ss-login-card .login-remember label {
  margin: 0;
  font-weight: 600;
}

.ss-login-card .login-remember input {
  width: auto;
  min-height: 0;
  margin: 0;
}

.ss-login-card input[type="submit"] {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-color-primary);
  color: var(--ss-color-text-on-dark);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(30, 115, 190, 0.22);
  transition: transform var(--ss-transition), background-color var(--ss-transition), box-shadow var(--ss-transition);
}

.ss-login-card input[type="submit"]:hover {
  transform: translateY(-1px);
  background: #1766aa;
}

.ss-login-card .login-lost-password,
.ss-login-card .forgot-password {
  font-size: 13px;
  color: var(--ss-color-text-soft);
}

.ss-stack {
  display: grid;
  gap: var(--ss-space-5);
}

.ss-stack--sm {
  gap: var(--ss-space-3);
}

.ss-muted {
  color: var(--ss-color-text-soft);
}

.ss-surface-accent {
  background: linear-gradient(135deg, var(--ss-color-accent-dark) 0%, var(--ss-color-accent) 100%);
  color: var(--ss-color-text-on-dark);
}

.ss-surface-hero {
  background: linear-gradient(135deg, #c41266 0%, var(--ss-color-hero) 100%);
  color: var(--ss-color-text-on-dark);
}

.ss-divider {
  height: 1px;
  background: var(--ss-color-border);
  margin: var(--ss-space-5) 0;
}

.ss-activity-card,
.ss-thread-item,
.ss-reply-card {
  border-radius: var(--ss-radius-md);
}

.ss-activity-card {
  background: var(--ss-color-surface);
  border: 1px solid var(--ss-color-border);
  box-shadow: var(--ss-shadow-sm);
}

.ss-thread-item,
.ss-reply-card {
  background: #f9fbfd;
  border: 1px solid var(--ss-color-border);
}

@media (max-width: 860px) {
  .ss-app-main,
  .ss-portal-wrap {
    padding: var(--ss-space-5) var(--ss-space-4) var(--ss-space-6);
  }

  .ss-form-card {
    padding: var(--ss-space-5);
  }

  .ss-form-row--2 {
    grid-template-columns: 1fr;
  }

  .ss-section-header {
    padding: var(--ss-space-4);
  }
}

@media (max-width: 640px) {
  .ss-app-shell {
    background:
      linear-gradient(
        180deg,
        var(--ss-color-hero) 0,
        var(--ss-color-hero) 164px,
        var(--ss-color-bg) 164px,
        var(--ss-color-bg) 100%
      );
  }

  .ss-app-main,
  .ss-portal-wrap {
    padding: var(--ss-space-4) var(--ss-space-3) var(--ss-space-6);
  }

  .ss-page-title,
  .ss-portal-header h1,
  .ss-portal-wrap > h1 {
    font-size: 28px;
  }

  .ss-page-subtitle,
  .ss-portal-intro {
    font-size: 15px;
  }

  .ss-card,
  .ss-panel,
  .ss-portal-card,
  .ss-form-card,
  .ss-login-card {
    padding: var(--ss-space-4);
  }

  .ss-login-wrap {
    min-height: auto;
    padding-top: var(--ss-space-5);
  }

  .ss-form-actions {
    justify-content: flex-start;
  }

  .ss-form-actions .ss-btn {
    min-width: 0;
  }
}

.ss-app-shell--flat {
  background: var(--ss-color-bg);
}

/* ═══════════════════════════════════════════════════════════════
   Shared Platform Header — v0.8.11 (PM-236 Fase 1)
   Scope: .ssp-platform-hdr, .ssp-platform-nav
   Used on: Portal pages + Fleet Dashboard
   ═══════════════════════════════════════════════════════════════ */

.ssp-platform-hdr {
  background: #c63c77;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.ssp-platform-hdr__top {
  display: flex;
  align-items: center;
  padding: 12px 24px 8px;
  gap: 16px;
  min-height: 54px;
}

.ssp-platform-hdr__logo {
  height: 34px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.ssp-platform-hdr__brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ssp-platform-hdr__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ssp-platform-hdr__sub {
  font-size: 11px;
  opacity: .75;
  color: #fff;
  letter-spacing: .01em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ssp-platform-hdr__spacer {
  flex: 1;
}

.ssp-platform-hdr__user {
  font-size: 12px;
  opacity: .85;
  flex-shrink: 0;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ssp-platform-hdr__user a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ssp-platform-hdr__user a:hover {
  opacity: .75;
}

.ssp-platform-nav {
  display: flex;
  padding: 0 20px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.ssp-platform-nav__tab {
  display: inline-block;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  letter-spacing: .01em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ssp-platform-nav__tab:hover {
  color: #fff;
}

.ssp-platform-nav__tab--active {
  color: #fff;
  border-bottom-color: #fff;
}

/* Override portal link colour for nav tabs */
body.ss-portal-shell .ssp-platform-nav__tab,
body.ss-portal-shell .ssp-platform-nav__tab:hover {
  color: rgba(255, 255, 255, .72);
}

body.ss-portal-shell .ssp-platform-nav__tab:hover,
body.ss-portal-shell .ssp-platform-nav__tab--active {
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   Portal Landing — hero-overlap pattern (PM-238)
   Scope: body.ss-portal-shell
   ═══════════════════════════════════════════════════════════════ */

body.ss-portal-shell .ss-app-main {
  padding-top: 0;
}

body.ss-portal-shell .ss-app-shell {
  background: linear-gradient(
    180deg,
    #c63c77 0,
    #c63c77 140px,
    var(--ss-color-bg) 140px,
    var(--ss-color-bg) 100%
  );
}

.ss-portal-hero-bar {
  max-width: var(--ss-container);
  margin: 0 auto;
  padding: 0 var(--ss-space-5) 40px;
}

.ss-portal-hero-bar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 10px;
  gap: 16px;
}

body.ss-portal-shell .ss-portal-hero-bar__top > .ss-eyebrow {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #fff;
  letter-spacing: -.01em;
  text-transform: none;
  margin-bottom: 0;
}

body.ss-portal-shell .ss-portal-grid,
body.ss-portal-shell .ss-form-card {
  position: relative;
  z-index: 3;
}
/* De -40px band-overlap zit sinds R-20261007-13 centraal in de shell
   (ss-ontwerpsysteem.css deel 4, ONTWERPSYSTEEM.md §5.1 a). Alleen de oude
   pilot-singles (update/issue, eigen kop zonder shell-header) houden hem hier. */
body.ss-pilot-single .ss-portal-grid {
  margin-top: -40px;
}

/* ═══════════════════════════════════════════════════════════════
   Portal Header Elements — ss-portal-hdr__* (PM-242 BEM cleanup)
   Scope: body.ss-portal-shell
   ═══════════════════════════════════════════════════════════════ */

body.ss-portal-shell .ss-portal-hdr__logo {
  height: 34px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.ss-portal-hdr__brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ss-portal-hdr__title {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ss-portal-hdr__sub {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 11px;
  opacity: .75;
  color: #fff;
  letter-spacing: .01em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ss-portal-hdr__spacer {
  flex: 1;
}

.ss-portal-hdr__user {
  font-size: 12px;
  opacity: .85;
  flex-shrink: 0;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.ss-portal-shell .ss-portal-hdr__user a,
body.ss-portal-shell .ss-portal-hdr__user a:visited {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

body.ss-portal-shell .ss-portal-hdr__user a:hover {
  opacity: .75;
}

/* Form-card page header (compact hero pattern) */
.ss-form-card__header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ss-color-border);
}

.ss-form-card__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ss-color-text);
  line-height: 1.2;
  margin: 0 0 6px;
}

.ss-form-card__sub {
  font-size: 13px;
  color: var(--ss-color-text-soft);
  margin: 0;
}

.ss-portal-hdr__nav {
  display: flex;
  padding: 0 0 6px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.ss-portal-hdr__nav-tab {
  display: inline-block;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  letter-spacing: .01em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.ss-portal-shell .ss-portal-hdr__nav-tab {
  color: rgba(255, 255, 255, .72);
}

body.ss-portal-shell .ss-portal-hdr__nav-tab:hover,
body.ss-portal-shell .ss-portal-hdr__nav-tab--active {
  color: #fff;
}

.ss-portal-hdr__nav-tab--active {
  border-bottom-color: #fff;
}

.ss-portal-hdr__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================================
   PM-290 — Hamburger navigatie + responsive nav
   Breakpoint: ≤1024px (tablet landscape en kleiner)
   ============================================================ */

/* Rechter blok in header: user + hamburger naast elkaar */
.ss-portal-hdr__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Notificatiebel in de header (TODO #203, K5 2026-09-14) — leest ssp-notifications */
.ss-bell { position: relative; flex-shrink: 0; }
.ss-bell__btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; background: none; border: none; border-radius: 6px;
    color: rgba(255,255,255,.92); cursor: pointer; transition: background .15s ease;
}
.ss-bell__btn:hover, .ss-bell__btn[aria-expanded="true"] { background: rgba(255,255,255,.12); }
.ss-bell__n {
    position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: #C0286F; color: #fff; font: 700 10px/16px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: center; box-shadow: 0 0 0 2px rgba(0,0,0,.25);
}
.ss-bell__panel {
    position: absolute; right: 0; top: calc(100% + 8px); width: 360px; max-width: calc(100vw - 24px);
    background: #fff; color: #111827; border: 1px solid #E5E7EB; border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18); z-index: 1200; overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.ss-bell__head {
    display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
    font-size: 13px; font-weight: 700; border-bottom: 1px solid #E5E7EB; background: #F9FAFB;
}
.ss-bell__all { background: none; border: none; color: #1E73BE; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.ss-bell__all:hover { text-decoration: underline; }
.ss-bell__list { max-height: 60vh; overflow-y: auto; }
.ss-bell__item {
    display: block; padding: 10px 14px 10px 22px; border-bottom: 1px solid #F3F4F6; color: inherit;
    text-decoration: none; font-size: 13px; line-height: 1.35; position: relative;
}
.ss-bell__item:last-child { border-bottom: none; }
a.ss-bell__item:hover { background: #F3F4F6; }
.ss-bell__item.is-unread::before {
    content: ''; position: absolute; left: 9px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: #C0286F;
}
.ss-bell__item.is-unread .ss-bell__title { font-weight: 700; }
.ss-bell__title { display: block; }
.ss-bell__body { display: block; color: #4B5563; font-size: 12px; margin-top: 2px; }
.ss-bell__meta { display: block; color: #9CA3AF; font-size: 11px; margin-top: 3px; }
.ss-bell__empty { margin: 0; padding: 16px 14px; color: #6B7280; font-size: 13px; }

/* Hamburger knop — standaard verborgen op desktop */
.ss-portal-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.ss-portal-hamburger:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ss-portal-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

/* Geanimeerde X wanneer menu open is */
.ss-hamburger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ss-hamburger--open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ss-hamburger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Tablet en kleiner: hamburger tonen, nav verbergen */
@media (max-width: 1024px) {
    .ss-portal-hamburger {
        display: flex;
    }

    .ss-portal-hdr__user {
        display: none;
    }

    .ss-portal-hdr__nav {
        display: none;
        flex-direction: column;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 4px 0 8px;
        background: rgba(0, 0, 0, 0.18);
    }

    .ss-portal-hdr__nav.ss-nav-open {
        display: flex;
    }

    .ss-portal-hdr__nav .ss-portal-hdr__nav-tab {
        padding: 13px 20px;
        border-bottom: none;
        font-size: 14px;
        border-left: 3px solid transparent;
    }

    .ss-portal-hdr__nav .ss-portal-hdr__nav-tab--active {
        border-left-color: #E8960A;
        color: #fff;
        background: rgba(232, 150, 10, 0.1);
    }
}

/* Desktop: hamburger verbergen, nav altijd zichtbaar */
@media (min-width: 1025px) {
    .ss-portal-hamburger { display: none; }
    .ss-portal-hdr__nav  { display: flex; }
    .ss-portal-hdr__user { display: inline; }
}

/* ============================================================
   PM-257 — Login hero header (vereenvoudigd, geen nav/user)
   ============================================================ */

.ss-portal-hero-bar--login .ss-portal-hero-bar__top {
    justify-content: center;
    text-align: center;
}

.ss-portal-hero-bar--login .ss-portal-hdr__brand {
    text-align: center;
}

.ss-portal-hero-bar--login .ss-portal-hdr__title,
.ss-portal-hero-bar--login .ss-portal-hdr__sub {
    display: block;
    width: 100%;
    text-align: center;
}

/* PM-257 polish — Portal Home grid max 2 kolommen */
.ss-portal-grid--home {
    grid-template-columns: repeat(2, 1fr);
}

/* PM-290 — Klikbare cards: volledig klikbaar, geen text-decoration */
a.ss-portal-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

a.ss-portal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(26, 43, 74, 0.14);
    text-decoration: none;
    color: inherit;
}

/* Binnenkort-cards: niet liften (robots) */
a.ss-portal-card--robots {
    opacity: 0.72;
    cursor: default;
}

a.ss-portal-card--robots:hover {
    transform: none;
    box-shadow: var(--ss-shadow-md);
}

/* PM-290 — Gekleurde linkerkant + dot per kaarttype */
.ss-portal-card--pilots   { border-left: 3px solid #1E73BE; }
.ss-portal-card--fleet    { border-left: 3px solid #1A2B4A; }
.ss-portal-card--fae      { border-left: 3px solid #E8960A; background: linear-gradient(135deg, #FFFDF5 0%, #fff 60%); }
.ss-portal-card--robots   { border-left: 3px solid #A0B0C0; }
.ss-portal-card--settings { border-left: 3px solid #452079; }

/* Gekleurde dot vóór de titel */
.ss-portal-card--pilots .ss-portal-card__title::before,
.ss-portal-card--fleet  .ss-portal-card__title::before,
.ss-portal-card--fae    .ss-portal-card__title::before,
.ss-portal-card--robots .ss-portal-card__title::before,
.ss-portal-card--settings .ss-portal-card__title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.ss-portal-card--pilots   .ss-portal-card__title::before { background: #1E73BE; }
.ss-portal-card--fleet    .ss-portal-card__title::before { background: #1A2B4A; }
.ss-portal-card--fae      .ss-portal-card__title::before { background: #E8960A; }
.ss-portal-card--robots   .ss-portal-card__title::before { background: #A0B0C0; }
.ss-portal-card--settings .ss-portal-card__title::before { background: #452079; }

/* PM-290 — CTA-label onderaan elke card */
.ss-portal-card__cta {
    display: block;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ss-portal-card--pilots   .ss-portal-card__cta { color: #1E73BE; }
.ss-portal-card--fleet    .ss-portal-card__cta { color: #1A2B4A; }
.ss-portal-card--fae      .ss-portal-card__cta { color: #B8780A; }
.ss-portal-card--robots   .ss-portal-card__cta { color: #A0B0C0; }
.ss-portal-card--settings .ss-portal-card__cta { color: #452079; }

/* ═══════════════════════════════════════════════════════════════════
   MODUS-EERSTE NAVIGATIE-IA (PM-356) — modus-groepen + drill-down tegels,
   status-badges, "binnenkort"-tegels, nav-soon, fleet-modus-balk.
   ═══════════════════════════════════════════════════════════════════ */

.ss-portal-modi {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.ss-portal-modus__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin-bottom: 12px;
}
.ss-portal-modus__title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #1A2B4A;
}
.ss-portal-modus__meta {
    flex-basis: 100%;
    margin: 0;
    font-size: 13px;
    color: #5a6b85;
}

/* Per-modus accent op de groep-titel (linker-streep) */
.ss-portal-modus--field     .ss-portal-modus__title { border-left: 4px solid #10b981; padding-left: 10px; }
.ss-portal-modus--office    .ss-portal-modus__title { border-left: 4px solid #f59e0b; padding-left: 10px; }
.ss-portal-modus--customer  .ss-portal-modus__title { border-left: 4px solid #1E73BE; padding-left: 10px; }
.ss-portal-modus--strategie .ss-portal-modus__title { border-left: 4px solid #64748b; padding-left: 10px; }
.ss-portal-modus--studio    .ss-portal-modus__title { border-left: 4px solid #8b5cf6; padding-left: 10px; }
.ss-portal-modus--operations .ss-portal-modus__title { border-left: 4px solid #0d9488; padding-left: 10px; }

/* Grid van sub-view tegels binnen een modus-groep */
.ss-portal-grid--modus {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

/* Per-modus tegel-accent (sluit aan op de bestaande --pilots/--fleet stijl) */
.ss-portal-card--field      { border-left: 3px solid #10b981; }
.ss-portal-card--office     { border-left: 3px solid #f59e0b; }
.ss-portal-card--customer   { border-left: 3px solid #1E73BE; }
.ss-portal-card--strategie  { border-left: 3px solid #64748b; }
.ss-portal-card--studio     { border-left: 3px solid #8b5cf6; }
.ss-portal-card--operations { border-left: 3px solid #0d9488; }
.ss-portal-card--field      .ss-portal-card__cta { color: #0a8f6a; }
.ss-portal-card--office     .ss-portal-card__cta { color: #B8780A; }
.ss-portal-card--customer   .ss-portal-card__cta { color: #1E73BE; }
.ss-portal-card--strategie  .ss-portal-card__cta { color: #475569; }

/* "Binnenkort"-tegel: gedimd, niet klikbaar */
.ss-portal-card--soon {
    display: block;
    border-left: 3px solid #cbd5e1;
    opacity: 0.6;
    cursor: default;
    background: #f8fafc;
}
.ss-portal-card--soon .ss-portal-card__cta { color: #94a3b8; }

/* Status-badge naast de modus-titel */
.ss-portal-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ss-portal-badge--live      { background: #d1fae5; color: #065f46; }
.ss-portal-badge--build     { background: #fef3c7; color: #92400e; }
.ss-portal-badge--pilot     { background: #dbeafe; color: #1e40af; }
.ss-portal-badge--blueprint { background: #e2e8f0; color: #475569; }

/* "Binnenkort"-nav-item: gedimd span i.p.v. link */
.ss-portal-hdr__nav-tab--soon {
    opacity: 0.55;
    cursor: default;
}
.ss-portal-hdr__soon-badge {
    margin-left: 6px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    vertical-align: super;
}

/* Fleet-dashboard: behouden Werkplek/Monitor-modus-balk onder de globale header */
.ssp-fmode-bar {
    display: flex;
    justify-content: flex-end;
    padding: 10px 20px 0;
    max-width: 1500px;
    margin: 0 auto;
}

/* PM-257 polish — Login header: logo + brand gecentreerd */
.ss-portal-hero-bar--login .ss-portal-hero-bar__top {
    justify-content: center;
    gap: 20px;
}

/* ════════════════════════════════════════════════════════════════
   MEGAMENU NAV-IA v2 (PM-356 DEEL 2) — marker: ss-mega
   Brand-icoon + wordmark · gecentreerde ctx-titel · dichtheid-toggle
   · pijler-balk met hover/focus/tap megamenu-panelen.
   Scope: .ss-portal-hero-bar (portaal-breed; ook fleet/pilot na PR-C/D)
   ════════════════════════════════════════════════════════════════ */

/* ── Brand (icoon + wordmark links) ───────────────────────────── */
.ss-portal-hero-bar .ss-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    flex-shrink: 0;
}
.ss-portal-hero-bar .ss-brand__icon {
    height: 38px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.ss-portal-hero-bar .ss-brand__wm {
    display: flex;
    flex-direction: column;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: .04em;
    font-size: 15px;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.ss-portal-hero-bar .ss-brand__wm small {
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .02em;
    opacity: .82;
}

/* ── Gecentreerde context-titel ───────────────────────────────── */
.ss-portal-hero-bar .ss-portal-hdr__ctx {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
    min-width: 0;
    padding: 0 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Breadcrumb in de ctx-plek (laag 2→3, PM-356) ─────────────── */
.ss-portal-hero-bar .ss-portal-hdr__ctx .ss-crumb,
.ss-portal-hero-bar .ss-portal-hdr__ctx a.ss-crumb:link,
.ss-portal-hero-bar .ss-portal-hdr__ctx a.ss-crumb:visited {
    color: rgba(255,255,255,.72) !important;
    text-decoration: none;
    font-weight: 700;
}
.ss-portal-hero-bar .ss-portal-hdr__ctx a.ss-crumb:hover { color: #fff !important; }
.ss-portal-hero-bar .ss-portal-hdr__ctx .ss-crumb--current { color: #fff !important; }
.ss-portal-hero-bar .ss-portal-hdr__ctx .ss-crumb__sep { color: rgba(255,255,255,.5); margin: 0 8px; font-weight: 400; }

/* ── Dichtheid-toggle (echte schuif-switch links↔rechts) ───────── */
.ss-density-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255,255,255,.9);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.ss-density-toggle__track {
    position: relative;
    width: 30px; height: 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.30);
    transition: background .15s;
    flex-shrink: 0;
}
.ss-density-toggle__track::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}
.ss-density-toggle:hover .ss-density-toggle__track { background: rgba(255,255,255,.45); }
.ss-density-toggle[aria-pressed="true"] .ss-density-toggle__track { background: rgba(255,255,255,.95); }
.ss-density-toggle[aria-pressed="true"] .ss-density-toggle__track::after { transform: translateX(14px); background: #c63c77; }
@media (max-width: 1024px) { .ss-density-toggle { display: none; } }

/* ── Pijler-balk ──────────────────────────────────────────────── */
.ss-portal-hero-bar .ss-portal-hdr__nav {
    position: relative;
    z-index: 60;            /* megamenu's boven de -40px overlappende content */
    align-items: stretch;
    gap: 0;
    flex-wrap: nowrap;
}
.ss-pillar {
    position: relative;
    display: flex;
    align-items: stretch;
}
.ss-pillar--end { margin-left: auto; }   /* Instellingen uiterst rechts */

.ss-pillar__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    letter-spacing: .01em;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.ss-pillar__btn:hover,
.ss-pillar.is-active > .ss-pillar__btn { color: #fff; }
.ss-pillar.is-active > .ss-pillar__btn { border-bottom-color: #fff; }

/* gekleurde pijler-stip per modus */
.ss-pillar__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.ss-pillar--home .ss-pillar__dot,
.ss-pillar--settings .ss-pillar__dot { display: none; }
.ss-pillar--field      .ss-pillar__dot { background: #10b981; }
.ss-pillar--office     .ss-pillar__dot { background: #f59e0b; }
.ss-pillar--customer   .ss-pillar__dot { background: #3b82f6; }
.ss-pillar--strategie  .ss-pillar__dot { background: #a855f7; }
.ss-pillar--studio     .ss-pillar__dot { background: #94a3b8; }
.ss-pillar--operations .ss-pillar__dot { background: #14b8a6; }

/* blueprint-pijler: gedimd, niet-klikbaar — GEEN "binnenkort" in de balk */
.ss-pillar.is-soon > .ss-pillar__btn {
    color: rgba(255,255,255,.42);
    cursor: default;
}
.ss-pillar.is-soon > .ss-pillar__btn:hover { color: rgba(255,255,255,.55); }

/* Forceer witte pijler-tekst (globale link-kleur kleurde 'm blauw). Actief
   = witte onderlijn, niet de kleur. (Ron-feedback PR-A-fix) */
.ss-portal-hero-bar .ss-pillar__btn,
.ss-portal-hero-bar .ss-pillar__btn:link,
.ss-portal-hero-bar .ss-pillar__btn:visited { color: rgba(255,255,255,.82) !important; }
.ss-portal-hero-bar .ss-pillar__btn:hover,
.ss-portal-hero-bar .ss-pillar.is-active > .ss-pillar__btn { color: #fff !important; }
.ss-portal-hero-bar .ss-pillar.is-soon > .ss-pillar__btn,
.ss-portal-hero-bar .ss-pillar.is-soon > .ss-pillar__btn:hover { color: rgba(255,255,255,.45) !important; }
/* mega-items zijn donkere tekst op wit — niet door de witte override raken */
.ss-portal-hero-bar .ss-mega__item:link,
.ss-portal-hero-bar .ss-mega__item:visited { color: #0f172a !important; }
.ss-portal-hero-bar .ss-mega__item.is-soon { color: #94a3b8 !important; }

/* ── Megamenu-paneel ──────────────────────────────────────────── */
.ss-mega {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    min-width: 240px;
    max-width: 320px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15,23,42,.22);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
    z-index: 10;
}
.ss-pillar--end .ss-mega { left: auto; right: 0; }
.ss-pillar:hover > .ss-mega,
.ss-pillar:focus-within > .ss-mega,
.ss-pillar.is-open > .ss-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.ss-mega__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 4px;
}
.ss-mega__item {
    display: block;
    padding: 8px 10px;
    border-radius: 7px;
    text-decoration: none;
    color: #0f172a;
    transition: background .12s;
}
.ss-mega__item:hover { background: #f1f5f9; }
.ss-mega__lbl {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}
.ss-mega__item small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 400;
    color: #64748b;
    line-height: 1.35;
}
.ss-mega__item.is-soon { cursor: default; }
.ss-mega__item.is-soon .ss-mega__lbl,
.ss-mega__item.is-soon small { color: #94a3b8; }
.ss-mega__item.is-soon:hover { background: transparent; }
.ss-mega__item em {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: #cbd5e1;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 8px;
}

/* ── Megamenu-groepen (Office-binnenstructuur, PM-631/#148) ──────
   VISUELE ONDERVERDELING (PM-684, Ron 2026-09-07: "het is nu een grijze brij").
   Sinds de indeling op een enkele as staat (PM-680) draagt het paneel vijf
   groepen, maar het zag eruit als een doorlopende lijst: de groepskoppen stonden
   in #94a3b8 op 10px — lichter dan de toelichtingen eronder — en tussen de
   groepen zat 2px. Daardoor deed de kop niets en viel alles samen tot één vlak.

   Drie ingrepen, in de taal van PM-663 (haarlijnen + rustige tinten, geen
   versiering): de kop krijgt gewicht en een haarlijn zodat een groep bovenaan
   dichtgaat; er komt lucht tussen de groepen zodat ze uit elkaar vallen; en er
   loopt één verticale haarlijn tussen de kolommen zodat het oog weet waar de
   ene kolom ophoudt. De toelichtingen worden een tikje lichter zodat de labels
   de eerste leeslaag zijn in plaats van te concurreren met hun eigen uitleg. */
/* KOLOMMEN, GEEN GRID. Met `grid-template-columns: 1fr 1fr` liggen de groepen
   vast in RIJEN: Regie naast Signalen, Bijwerken naast Opzoeken. Omdat Opzoeken
   zes items telt en Bijwerken vier, rekt die rij mee en valt er een gat van een
   paar honderd pixels onder Bijwerken, terwijl Beheer onderaan blijft hangen.
   Kolommen laten de groepen gewoon doorstromen en balanceren zichzelf, en
   leveren de verticale scheiding als `column-rule` — native, dus altijd precies
   tussen de kolommen in plaats van op een geschatte 50%. */
.ss-mega--grouped {
    min-width: 560px;
    max-width: 680px;
    display: block;
    column-count: 2;
    column-gap: 26px;
    column-rule: 1px solid #eef2f7;
    padding: 8px 12px 12px;
}
.ss-mega--grouped > .ss-mega__head {
    column-span: all;
    margin-bottom: 10px;
}
/* Een groep mag nooit over een kolomgrens worden gebroken: een kop zonder items
   (of andersom) is erger dan een iets ongelijke kolomhoogte. */
.ss-mega__grp {
    min-width: 0;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 13px;
}
.ss-mega__grp:last-child { margin-bottom: 0; }
/* Compacter ritme BINNEN het gegroepeerde paneel. Het draagt 18 items met elk
   twee tot drie regels uitleg; met het ruimere ritme van de enkelvoudige menu's
   werd het paneel 963px hoog en paste het niet meer op een laptopscherm. Alleen
   hier aanpassen — de menu's van Field/Customer/Strategie zijn kort en houden
   hun rustiger maatvoering. */
.ss-mega--grouped .ss-mega__item { padding: 6px 10px; }
.ss-mega--grouped .ss-mega__item small { line-height: 1.3; margin-top: 1px; }

/* Drie kolommen zodra er ruimte is: dat halveert de hoogte in plaats van hem te
   verplaatsen. Pas vanaf 1280px, want het paneel hangt onder de Office-pijler en
   mag op een smaller scherm niet rechts buiten beeld lopen. */
@media (min-width: 1280px) {
    .ss-mega--grouped {
        min-width: 780px;
        max-width: 900px;
        column-count: 3;
    }
}
/* De groepskop onderscheidt zich door KLEUR en rol, niet door donkerte (Ron
   2026-09-07). In de vorige stap stond hij op #334155: kleiner dan de itemlabels
   maar bijna even donker, dus ze concurreerden en het onderscheid bleef zwak.
   De huisstijlroze uit de headerbalk maakt er een opschrift van in plaats van
   een zwaarder item — een andere tint leest als een andere rol, waar meer
   gewicht alleen maar meer nadruk geeft. De haarlijn eronder krijgt dezelfde
   tint, sterk verdund, zodat kop en grens één gebaar zijn. */
.ss-mega__grp-head {
    padding: 0 10px 5px;
    margin: 0 0 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ss-color-hero, #c63c77);
    border-bottom: 1px solid rgba(198, 60, 119, .22);
}
/* Binnen een groep mogen de toelichtingen een stap terug: het label is waar je
   op mikt, de uitleg is bevestiging achteraf. */
.ss-mega--grouped .ss-mega__item small { color: #7c8ba1; }
/* Geen extra gewicht op de labels: de kop verschilt nu op tint, dus zwaarder
   zetten zou alleen het contrast mét de toelichting vertroebelen. */

/* ── Dichtheid: compact = toelichtende teksten verbergen ───────── */
body.ss-density-compact .ss-mega__item small { display: none; }

/* ── Responsive: ≤1024px megamenu wordt accordion in de mobiele nav ── */
@media (max-width: 1024px) {
    .ss-portal-hero-bar .ss-portal-hdr__ctx { display: none; }
    .ss-portal-hero-bar .ss-portal-hdr__nav { flex-direction: column; z-index: 60; }
    .ss-pillar { flex-direction: column; align-items: stretch; }
    .ss-pillar--end { margin-left: 0; }
    .ss-pillar__btn { padding: 13px 20px; border-bottom: none; border-left: 3px solid transparent; }
    .ss-pillar.is-active > .ss-pillar__btn { border-left-color: #fff; background: rgba(255,255,255,.08); }
    .ss-mega {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        max-width: none;
        margin: 0 12px 6px;
        display: none;
    }
    /* Gegroepeerd paneel: op smal één kolom (accordion) */
    /* Eenkoloms: geen kolomscheiding, groepen onder elkaar. */
    .ss-mega--grouped { min-width: 0; column-count: 1; column-rule: none; }
    .ss-pillar.is-open > .ss-mega--grouped { display: grid; }
    .ss-pillar.is-open > .ss-mega { display: block; }
    .ss-pillar:hover > .ss-mega,
    .ss-pillar:focus-within > .ss-mega { display: none; }
    .ss-pillar.is-open > .ss-mega { display: block; }
}

/* ════════════════════════════════════════════════════════════════
   PORTAL-HOME MEGATEGELS (PM-356 DEEL 2, PR-B) — marker: ss-portal-tiles
   6 pijler-tegels met klikbare children-rijen; overlapt de roze header
   (-40px, identiek aan .ss-portal-grid); dichtheid-aware.
   ════════════════════════════════════════════════════════════════ */
.ss-portal-tiles {
    max-width: var(--ss-container);
    margin: 0 auto 32px;          /* band-overlap: centraal in de shell (R-20261007-13) */
    padding: 0 var(--ss-space-5);
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) { .ss-portal-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .ss-portal-tiles { grid-template-columns: 1fr; } }

/* ── Tegel = positionerings-wrapper (vaste celhoogte); .ss-tile__inner is
   de kaart die bij hover als ÉÉN geheel naar beneden groeit. ── */
.ss-tile { position: relative; min-height: 196px; }

.ss-tile__inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    border-top: 3px solid #cbd5e1;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
    padding: 15px 16px 12px;
    overflow: hidden;
    transition: box-shadow .15s;
}
.ss-tile--field      .ss-tile__inner { border-top-color: #10b981; }
.ss-tile--office     .ss-tile__inner { border-top-color: #f59e0b; }
.ss-tile--customer   .ss-tile__inner { border-top-color: #3b82f6; }
.ss-tile--strategie  .ss-tile__inner { border-top-color: #a855f7; }
.ss-tile--studio     .ss-tile__inner { border-top-color: #94a3b8; }
.ss-tile--operations .ss-tile__inner { border-top-color: #14b8a6; }
.ss-tile.is-soon .ss-tile__inner { background: #fbfcfe; }

/* hover/focus: kaart groeit naar beneden als één geheel (overlay → geen rij-jump) */
.ss-tile:hover, .ss-tile:focus-within { z-index: 30; }
.ss-tile:hover .ss-tile__inner,
.ss-tile:focus-within .ss-tile__inner {
    bottom: auto;
    height: auto;
    min-height: 100%;
    overflow: visible;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .20);
}
.ss-tile:hover .ss-tile__peek,
.ss-tile:focus-within .ss-tile__peek { display: none; }
.ss-tile:hover .ss-tile__full,
.ss-tile:focus-within .ss-tile__full { display: block; }

.ss-tile__head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.ss-tile__dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; }
.ss-tile--field      .ss-tile__dot { background: #10b981; }
.ss-tile--office     .ss-tile__dot { background: #f59e0b; }
.ss-tile--customer   .ss-tile__dot { background: #3b82f6; }
.ss-tile--strategie  .ss-tile__dot { background: #a855f7; }
.ss-tile--studio     .ss-tile__dot { background: #94a3b8; }
.ss-tile--operations .ss-tile__dot { background: #14b8a6; }
.ss-tile__title { font-size: 16px; font-weight: 800; margin: 0; color: #0f172a; letter-spacing: -.01em; }
.ss-tile__head .ss-portal-badge { margin-left: auto; }
.ss-tile__meta {
    font-size: 12px; color: #64748b; line-height: 1.4; margin: 0 0 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* subitems boven uitlijnen (géén margin-top:auto) */
.ss-tile__items { display: flex; flex-direction: column; gap: 2px; }
.ss-tile__full { display: none; }
.ss-tile__more { padding: 7px 10px; font-size: 12px; font-weight: 600; color: #94a3b8; cursor: default; }

.ss-tile__item {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #0f172a;
    transition: background .12s;
}
.ss-tile__item:hover { background: #f1f5f9; }
.ss-tile__lbl { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.ss-tile__item small {
    display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400;
    color: #64748b; line-height: 1.35;
}
.ss-tile__item.is-soon { cursor: default; }
.ss-tile__item.is-soon .ss-tile__lbl,
.ss-tile__item.is-soon small { color: #94a3b8; }
.ss-tile__item.is-soon:hover { background: transparent; }
.ss-tile__item em {
    font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #fff; background: #cbd5e1;
    padding: 1px 6px; border-radius: 8px; margin-left: 8px;
}

/* ── Compacte stand (schuif aan): álle items dicht-op-elkaar, geen
   toelichting, geen peek/overlay — dichtheidsoverzicht voor power-users. ── */
body.ss-density-compact .ss-tile { min-height: 0; }
body.ss-density-compact .ss-tile__inner { position: static; inset: auto; height: auto; overflow: visible; }
body.ss-density-compact .ss-tile__peek { display: none; }
body.ss-density-compact .ss-tile__full { display: block; }
body.ss-density-compact .ss-tile__item small,
body.ss-density-compact .ss-tile__meta { display: none; }
body.ss-density-compact .ss-tile__item { padding: 5px 10px; }
body.ss-density-compact .ss-portal-tiles { gap: 12px; align-items: stretch; }

/* ── Smal scherm: geen hover → alle items inline (zoals compact-layout) ── */
@media (max-width: 680px) {
    .ss-tile { min-height: 0; }
    .ss-tile__inner { position: static; inset: auto; height: auto; overflow: visible; }
    .ss-tile__peek { display: none; }
    .ss-tile__full { display: block; }
}

/* ════════════════════════════════════════════════════════════════
   GEDEELDE HEADER op eigen HTML-shells (fleet PR-C, pilot PR-D) —
   pagina's zonder .ss-app-shell-gradient krijgen de roze band hier.
   ════════════════════════════════════════════════════════════════ */
.ss-portal-hero-band { background: #c63c77; width: 100%; }
.ss-portal-hero-band .ss-portal-hero-bar { padding-bottom: 6px; }
/* Uitloggen-link wit ook zonder body.ss-portal-shell (fleet/pilot-shells) */
.ss-portal-hero-bar .ss-portal-hdr__user,
.ss-portal-hero-bar .ss-portal-hdr__user a,
.ss-portal-hero-bar .ss-portal-hdr__user a:link,
.ss-portal-hero-bar .ss-portal-hdr__user a:visited { color: #fff; }

/* ════════════════════════════════════════════════════════════════
   /portal/ pilot-kaarten — gelijkgetrokken met de portal-home tegels
   (PM-356 PR-D, punt 5). Gescopt op .ss-portal-grid--pilots zodat de
   generieke .ss-portal-card elders ongemoeid blijft.
   ════════════════════════════════════════════════════════════════ */
.ss-portal-grid--pilots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) { .ss-portal-grid--pilots { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .ss-portal-grid--pilots { grid-template-columns: 1fr; } }

.ss-portal-grid--pilots .ss-portal-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-top: 3px solid #3b82f6;          /* Customer-blauw, zoals de Customer-tegel */
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
    padding: 15px 16px 14px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ss-portal-grid--pilots .ss-portal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, .14);
}
.ss-portal-grid--pilots .ss-portal-card__title {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 4px;
    letter-spacing: -.01em;
}
.ss-portal-grid--pilots .ss-portal-card__title a {
    color: #0f172a;
    text-decoration: none;
}
.ss-portal-grid--pilots .ss-portal-card__title a:hover { color: #3b82f6; }
.ss-portal-grid--pilots .ss-portal-card__meta {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
    margin: 0 0 12px;
}
.ss-portal-grid--pilots .ss-portal-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ════════════════════════════════════════════════════════════════
   Office-admin content (contacten/deployments) — uitlijnen met de header
   én in de roze band laten steken, exact zoals portal-home (PM-356 PR-D).
   De wrappers waren 960px-centered met eigen padding → scheve uitlijning
   t.o.v. de container-brede header. Nu zelfde breedte + -40px overlap.
   ════════════════════════════════════════════════════════════════ */
body.ss-portal-shell .ssp-ct-wrap {
    max-width: var(--ss-container);
    margin: 0 auto 40px;          /* band-overlap: centraal in de shell (R-20261007-13) */
    padding: 0 var(--ss-space-5);
    position: relative;
    z-index: 3;
}
/* ONTWERPSYSTEEM-blok (Ron 2026-09-15) verhuisd naar assets/css/ss-ontwerpsysteem.css
   (R-20261007-02, TODO #236 stap 1). Dat bestand wordt direct ná dit bestand geladen,
   dus de cascade is ongewijzigd. Voeg hier geen gedeelde bouwstenen meer toe. */

/* SS-FORM-KOPPEL-KLANT-START
   Stijlrichtlijn formulieren stap 5, klantportaal (TODO #448, R-20261016-31;
   project-docs/STIJLRICHTLIJN-formulieren.md §3-§5). Koppelt /portal/new-issue/ en
   /portal/new-update/ (.ss-form-card) aan de formulierladder: alleen tokens uit
   ss-ontwerpsysteem.css deel 5, geen losse maten. Strikt gescoped op .ss-form-card,
   dus kaarten, lijsten en navigatie van het portaal veranderen niet. Staat onderaan
   zodat hij de oudere regels hierboven (11px KAPITALEN-labels, 14px invoer, 28px
   knoppen, knoppenrij links op mobiel) bij gelijke specificiteit overschrijft. */
.ss-form-card .ss-form-card__title { font-size: var(--ss-form-fs-blok); font-weight: var(--ss-fw-bold); line-height: 1.25; color: var(--ss-color-text); }
.ss-form-card .ss-form-card__sub { font-size: var(--ss-form-fs-hint); font-weight: var(--ss-fw-regular); line-height: 1.4; color: var(--ss-color-text-soft); }
.ss-form-card .ss-form-grid { gap: var(--ss-form-gap-field); }
.ss-form-card .ss-section-title { margin: calc(var(--ss-form-gap-par) - var(--ss-form-gap-field)) 0 var(--ss-space-3);
  font-size: var(--ss-form-fs-par); font-weight: var(--ss-fw-bold); line-height: 1.3; color: var(--ss-form-color-par); }
.ss-form-card .ss-field-group { gap: var(--ss-form-gap-label); }
.ss-form-card label { font-size: var(--ss-form-fs-label); font-weight: var(--ss-fw-semibold); line-height: 1.3;
  color: var(--ss-color-text); text-transform: none; letter-spacing: normal; }
.ss-form-card input[type="text"], .ss-form-card input[type="email"], .ss-form-card input[type="url"],
.ss-form-card input[type="number"], .ss-form-card input[type="password"], .ss-form-card input[type="date"],
.ss-form-card input[type="file"], .ss-form-card select, .ss-form-card textarea {
  min-height: var(--ss-tap); font-size: var(--ss-form-fs-input); font-weight: var(--ss-fw-regular); line-height: 1.45; }
.ss-form-card ::placeholder { color: var(--ss-color-placeholder); font-size: var(--ss-form-fs-input); opacity: 1; }
.ss-form-card .ss-btn, .ss-form-card .ss-repeater-row__remove {
  box-sizing: border-box; height: var(--ss-form-btn-h); min-height: 0; padding: var(--ss-form-btn-pad);
  font-size: var(--ss-form-btn-fs); font-weight: var(--ss-fw-bold); line-height: 1; border-radius: var(--ss-radius-sm); }
.ss-form-card .ss-form-actions { justify-content: center; gap: var(--ss-space-2); padding-top: var(--ss-form-gap-actions); }
.ss-form-card .ss-form-actions .ss-btn { min-width: 0; }
.ss-form-card .ss-form-repeater { gap: var(--ss-form-gap-actions); }
.ss-form-card .ss-form-repeater__add { justify-self: center; }
.ss-form-card .ss-repeater-row__actions { justify-content: center; margin-top: var(--ss-form-gap-actions); }
/* SS-FORM-KOPPEL-KLANT-END */