/*
 * ASG Bedrijfsbeheersysteem (BBS) v1.0 - Stylesheet
 * Huisstijl-conform per `250923_Huisstijl-Word-documents.docx`
 * Eigenaar huisstijl: Project & Veiligheids Coordinator (W.J. Plaisier)
 *
 * Bewerkingsregel: alle kleuren via CSS-variabelen in :root.
 * Geen hardcoded brand-kleuren. Tabellen ALTIJD met --asg-shade-light borders
 * en --asg-shade-1 header-background.
 *
 * Voor wijzigingen aan brand-tokens: overleg Communicatieverantwoordelijke.
 */

:root {
  /* === ASG BRAND COLORS (huisstijl bindend) === */
  --asg-orange:       #F05323;  /* RGB 240, 83, 53  - Brand Orange */
  --asg-orange-hover: #FF6B3D;  /* afgeleid - hover/active state */
  --asg-orange-deep:  #D4431A;  /* afgeleid - gradient eindpunt */
  --asg-navy:         #1D242C;  /* RGB 29, 36, 44 - Brand Grey (donker, voor topbar/hero) */
  --asg-text:         #000000;  /* RGB 0, 0, 0   - Text/Black bodytekst */

  /* === ASG SHADES (huisstijl bindend) === */
  --asg-shade-1:        #E7E6E6;  /* 1st Shade   - tabel-headers, sectie-dividers */
  --asg-shade-lightest: #E8E9EA;  /* Lightest    - lichte backgrounds */
  --asg-shade-light:    #BBBEC0;  /* Light       - tabel-borders, input-borders (1/2pt) */
  --asg-shade-medium:   #8E9296;  /* Medium      - placeholders, disabled */
  --asg-shade-dark:     #61666B;  /* Dark        - secundaire tekst, meta-info */
  --asg-shade-darkest:  #343B41;  /* Darkest     - hovers, donkere accenten */

  /* === STATUS COLORS (functioneel, niet brand) === */
  --status-red:    #c0392b;
  --status-green:  #27ae60;
  --status-blue:   #3498db;
  --status-amber:  #e67e22;
  --status-purple: #7d3c98;

  /* === LAYOUT === */
  --asg-bg:           #F5F5F6;  /* page background */
  --asg-card:         #FFFFFF;  /* card / cell background */
  --asg-shadow:       0 2px 8px rgba(26,39,68,0.08);
  --asg-shadow-hover: 0 4px 16px rgba(26,39,68,0.14);
  --asg-radius:       6px;
  --asg-border:       1px solid var(--asg-shade-light); /* huisstijl: 1/2pt = 1px op web */
}

* { margin:0; padding:0; box-sizing:border-box; }

/* === A11y: skip-to-content link (Fase 8) === */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px; overflow: hidden;
  background: var(--asg-orange);
  color: white;
  padding: 10px 16px;
  border-radius: 0 0 var(--asg-radius) 0;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  z-index: 9999;
}
.skip-to-content:focus {
  left: 0; top: 0; width: auto; height: auto;
  outline: 3px solid var(--asg-orange-hover);
  outline-offset: 2px;
}

/* === A11y: visible focus indicators voor toetsenbord-gebruikers === */
:focus { outline: 2px solid var(--asg-orange); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--asg-orange);
  outline-offset: 2px;
  border-radius: 2px;
}
.topbar-logo:focus-visible,
.topbar-nav a:focus-visible {
  outline-color: white;
  outline-width: 2px;
}
.topbar-search input:focus { outline: 2px solid var(--asg-orange-hover); outline-offset: 2px; }

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

/* Respecteer reduced-motion voorkeur */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: 'Aptos Display', 'Aptos', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--asg-bg);
  color: var(--asg-text);
  min-height: 100vh;
}

/* App vult de volledige schermhoogte; footer wordt naar de onderkant geduwd. */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* === TOP BAR === */
.topbar {
  background: var(--asg-navy);
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 52px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.topbar-logo img { height: 28px; }
.topbar-logo span {
  color: white;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
}
.topbar-search {
  margin-left: 32px;
  flex: 1;
  max-width: 420px;
  position: relative;
}
.topbar-search input {
  width: 100%;
  padding: 7px 14px 7px 36px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  background: rgba(255,255,255,0.12);
  color: white;
  outline: none;
  transition: background 0.2s;
}
.topbar-search input::placeholder { color: rgba(255,255,255,0.5); }
.topbar-search input:focus { background: rgba(255,255,255,0.2); }
.topbar-search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: rgba(255,255,255,0.5);
}
.topbar-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.topbar-nav a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 13px;
  transition: all 0.15s;
  cursor: pointer;
}
.topbar-nav a:hover, .topbar-nav a.active {
  color: white;
  background: rgba(255,255,255,0.1);
}
.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
}
.topbar-user .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--asg-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 13px;
}

/* === BREADCRUMB === */
.breadcrumb {
  padding: 10px 32px;
  font-size: 13px;
  color: var(--asg-shade-dark);
  background: white;
  border-bottom: 1px solid var(--asg-shade-light);
}
.breadcrumb a {
  color: var(--asg-orange);
  text-decoration: none;
  cursor: pointer;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 6px; color: var(--asg-shade-light); }

/* === PAGE CONTENT === */
.page { padding: 24px 40px; max-width: min(2000px, 95vw); width: 100%; box-sizing: border-box; margin: 0 auto; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* === HERO TILES (HOME) === */
.hero-welcome {
  background: linear-gradient(135deg, var(--asg-navy) 0%, var(--asg-shade-darkest) 100%);
  border-radius: 10px;
  padding: 28px 32px;
  margin-bottom: 24px;
  color: white;
}
.hero-welcome h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.hero-welcome p { font-size: 14px; opacity: 0.8; }

.dept-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.dept-tile {
  border-radius: var(--asg-radius);
  padding: 14px 16px;
  min-height: 74px;
  box-sizing: border-box;
  color: white;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
}
.dept-tile:hover { transform: translateY(-2px); box-shadow: var(--asg-shadow-hover); }
.dept-tile .tile-icon {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
/* Afdelingstegels in twee ASG-huisstijlkleuren (oranje + ASG-donker) — schaakbord,
 * zodat het beeld niet te oranje wordt. */
.dept-tile.directie,
.dept-tile.engineering,
.dept-tile.finance,
.dept-tile.bedrijfsbureau { background: linear-gradient(135deg, var(--asg-orange) 0%, var(--asg-orange-deep) 100%); opacity: 1; }
.dept-tile.projects,
.dept-tile.hseq,
.dept-tile.sales,
.dept-tile.hr { background: linear-gradient(135deg, var(--asg-navy) 0%, var(--asg-shade-darkest) 100%); opacity: 1; }

/* === QUICK ACCESS === */
.quick-access {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}
.quick-btn {
  background: white;
  border: 1px solid var(--asg-shade-light);
  border-radius: var(--asg-radius);
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  color: var(--asg-navy);
  font-size: 13px;
  font-weight: 600;
}
.quick-btn:hover { border-color: var(--asg-orange); color: var(--asg-orange); box-shadow: var(--asg-shadow); }
.quick-btn .q-icon { font-size: 22px; margin-bottom: 6px; }

/* === CARDS === */
.cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.cards-row.two { grid-template-columns: 2fr 1fr; }
.card {
  background: white;
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  overflow: hidden;
}
.card-header {
  padding: 14px 18px;
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1px solid var(--asg-shade-light);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-header .dot { width: 8px; height: 8px; border-radius: 50%; }
.card-header .dot.orange { background: var(--asg-orange); }
.card-header .dot.red { background: var(--status-red); }
.card-header .dot.green { background: var(--status-green); }
.card-body { padding: 14px 18px; }
.card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--asg-shade-light);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.1s;
}
.card-item:last-child { border-bottom: none; }
.card-item:hover { color: var(--asg-orange); }
.card-item .doc-code { color: var(--asg-orange); font-weight: 600; margin-right: 8px; }
.card-item .badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.badge.open { background: #fce4e4; color: var(--status-red); }
.badge.planned { background: #e8f4fd; color: var(--asg-orange); }
.badge.ok { background: #e8f8ef; color: var(--status-green); }
.card-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--asg-shade-light);
  text-align: center;
}
.card-footer a {
  color: var(--asg-orange);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.card-footer a:hover { text-decoration: underline; }

/* === PROCEDURE LIST === */
.proc-section { margin-bottom: 24px; }
.proc-section h2 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.proc-table {
  width: 100%;
  background: white;
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  border-collapse: collapse;
  overflow: hidden;
}
.proc-table th {
  background: var(--asg-shade-1);
  color: var(--asg-navy);
  padding: 10px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.proc-table td {
  padding: 10px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--asg-shade-light);
}
.proc-table tr { cursor: pointer; transition: background 0.1s; }
.proc-table tbody tr:hover { background: #f8f9fb; }
.proc-table .link { color: var(--asg-orange); font-weight: 600; }
.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.status-pill.released { background: #e8f8ef; color: var(--status-green); }
.status-pill.review { background: #fef3e2; color: var(--status-amber); }
.status-pill.concept { background: var(--asg-shade-1); color: var(--asg-shade-medium); }

/* === DEPT PAGE === */
.dept-hero {
  border-radius: 10px;
  padding: 28px 32px;
  margin-bottom: 24px;
  color: white;
}
.dept-hero h1 { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.dept-hero p { font-size: 14px; opacity: 0.85; }

.process-chips {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.process-chip {
  background: white;
  border: 2px solid var(--asg-shade-light);
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.process-chip:hover { border-color: var(--asg-orange); color: var(--asg-orange); }

/* === PROCEDURE DETAIL === */
.proc-detail-header {
  background: white;
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  padding: 24px;
  margin-bottom: 20px;
}
.proc-detail-header h1 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.proc-detail-header .subtitle { color: var(--asg-shade-dark); font-size: 14px; margin-bottom: 16px; }
.meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.meta-item { font-size: 13px; }
.meta-item .label { color: var(--asg-shade-dark); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.meta-item .value { font-weight: 600; }

.linked-docs {
  background: white;
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.linked-docs h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.linked-doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--asg-shade-light);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.1s;
}
.linked-doc-item:last-child { border-bottom: none; }
.linked-doc-item:hover { color: var(--asg-orange); }
.linked-doc-item .type-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}
.type-badge.wi { background: #e8f4fd; color: var(--asg-orange); }
.type-badge.fb { background: #fef3e2; color: var(--status-amber); }
.type-badge.tr { background: #f0e8fd; color: #7d3c98; }
.type-badge.reg { background: #fce4e4; color: var(--status-red); }

/* === REGISTER === */
.register-table {
  width: 100%;
  background: white;
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  border-collapse: collapse;
}
.register-table th {
  background: var(--asg-shade-1);
  color: var(--asg-navy);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.register-table td {
  padding: 10px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--asg-shade-light);
}
.register-table tbody tr:hover { background: #f8f9fb; }
.risk-high { color: var(--status-red); font-weight: 700; }
.risk-med { color: var(--status-amber); font-weight: 700; }
.risk-low { color: var(--status-green); font-weight: 700; }

/* === ISO DOCS PAGE === */
.iso-filter-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.iso-filter-bar select {
  padding: 8px 14px;
  border: 1px solid var(--asg-shade-light);
  border-radius: 4px;
  font-size: 13px;
  background: white;
  cursor: pointer;
}

/* === HELP / ONDERSTEUNING === */
.help-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.help-card {
  background: white;
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  padding: 24px;
}
.help-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.help-card p { font-size: 13px; color: var(--asg-shade-dark); line-height: 1.6; }
.help-card ul { list-style: none; padding: 0; }
.help-card ul li {
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--asg-shade-1);
}
.help-card ul li:last-child { border-bottom: none; }

/* === BACK BUTTON === */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--asg-orange);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 16px;
  font-weight: 600;
}
.back-btn:hover { text-decoration: underline; }

/* === PAGE TITLE === */
.page-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* === TABS === */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--asg-shade-light);
  margin-bottom: 20px;
}
.tab {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--asg-shade-dark);
  transition: all 0.15s;
}
.tab:hover { color: var(--asg-navy); }
.tab.active { color: var(--asg-orange); border-bottom-color: var(--asg-orange); }

/* === TOAST === */
.asg-toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  z-index: 2000;
  pointer-events: none;
}
.asg-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  max-width: 420px;
  padding: 12px 14px;
  background: var(--asg-card);
  border-left: 4px solid var(--asg-orange);
  border-radius: var(--asg-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  font-size: 13px;
  color: var(--asg-text);
  transform: translateX(20px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.asg-toast--show { transform: translateX(0); opacity: 1; }
.asg-toast--success { border-left-color: var(--status-green); }
.asg-toast--error   { border-left-color: var(--status-red);   }
.asg-toast--warn    { border-left-color: var(--status-amber); }
.asg-toast--info    { border-left-color: var(--status-blue);  }
.asg-toast-icon {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
  background: var(--asg-shade-1); color: var(--asg-shade-darkest);
}
.asg-toast--success .asg-toast-icon { background: var(--status-green); color: white; }
.asg-toast--error   .asg-toast-icon { background: var(--status-red);   color: white; }
.asg-toast--warn    .asg-toast-icon { background: var(--status-amber); color: white; }
.asg-toast--info    .asg-toast-icon { background: var(--status-blue);  color: white; }
.asg-toast-msg { flex: 1; line-height: 1.45; }
.asg-toast-close {
  background: none; border: none; cursor: pointer;
  color: var(--asg-shade-medium); font-size: 18px; line-height: 1;
  padding: 2px 4px; border-radius: 3px;
}
.asg-toast-close:hover { color: var(--asg-text); background: var(--asg-shade-1); }

/* === FORM ERROR STATES === */
.asg-field { display: block; }
.asg-field-label {
  font-size: 12px; font-weight: 600; color: var(--asg-shade-dark);
  display: block; margin-bottom: 4px;
}
.asg-field-label .req { color: var(--status-red); margin-left: 2px; }
.asg-input, .asg-select, .asg-textarea {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--asg-shade-light);
  border-radius: 4px; font-size: 13px;
  font-family: inherit;
  background: var(--asg-card);
  color: var(--asg-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.asg-input:focus, .asg-select:focus, .asg-textarea:focus {
  outline: none;
  border-color: var(--asg-orange);
  box-shadow: 0 0 0 2px rgba(240,83,35,0.15);
}
.asg-textarea { min-height: 80px; resize: vertical; }
.asg-field.has-error .asg-input,
.asg-field.has-error .asg-select,
.asg-field.has-error .asg-textarea {
  border-color: var(--status-red);
  background: #fff7f6;
}
.asg-field-hint {
  display: block; margin-top: 4px;
  font-size: 11px; color: var(--asg-shade-medium);
}
.asg-field-error {
  display: block; margin-top: 4px;
  font-size: 11px; color: var(--status-red);
  font-weight: 600;
}
.asg-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border: none; border-radius: 4px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s, transform 0.05s;
}
.asg-btn--primary { background: var(--asg-orange); color: white; }
.asg-btn--primary:hover { background: var(--asg-orange-hover); }
.asg-btn--primary:active { transform: translateY(1px); }
.asg-btn--primary[disabled] { background: var(--asg-shade-medium); cursor: not-allowed; }
.asg-btn--ghost {
  background: var(--asg-card); color: var(--asg-shade-dark);
  border: 1px solid var(--asg-shade-light);
}
.asg-btn--ghost:hover { color: var(--asg-text); border-color: var(--asg-shade-dark); }

/* === KPI CARDS (gebruikt in melding-pagina's) === */
.kpi-card {
  background: var(--asg-card);
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  padding: 18px 20px;
  border-top: 4px solid var(--asg-orange);
}
.kpi-card .kpi-value { font-size: 28px; font-weight: 700; line-height: 1.1; }
.kpi-card .kpi-label {
  font-size: 11px; color: var(--asg-shade-dark);
  text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px;
}
.kpi-card.orange { border-top-color: var(--status-amber); }
.kpi-card.green  { border-top-color: var(--status-green); }
.kpi-card.red    { border-top-color: var(--status-red);   }

/* === TOPBAR USER-BUTTON (v1.0.5) === */
button.topbar-user {
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  padding: 4px 6px;
  border-radius: var(--asg-radius);
  transition: background 0.12s;
}
button.topbar-user:hover { background: rgba(255,255,255,0.08); }
button.topbar-user:focus-visible { outline: 2px solid white; outline-offset: 2px; }

/* === LOGIN PAGE (v1.0.5) === */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--asg-navy) 0%, var(--asg-shade-darkest) 100%);
  padding: 20px;
}
.login-card {
  background: var(--asg-card);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.32);
  padding: 36px 40px;
  max-width: 480px;
  width: 100%;
}
.login-logo { text-align: center; margin-bottom: 18px; }
.login-logo img { height: 56px; }
.login-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: var(--asg-navy);
  margin-bottom: 6px;
}
.login-sub {
  font-size: 13px;
  color: var(--asg-shade-dark);
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.5;
}
.login-preview { margin-top: 16px; }
.login-preview-card {
  background: var(--asg-shade-1);
  border-radius: var(--asg-radius);
  padding: 14px 16px;
  font-size: 12px;
}
.login-preview-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
}
.login-preview-row .lpl {
  flex: 0 0 80px;
  font-weight: 600;
  color: var(--asg-shade-dark);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
}
.login-preview-row .lpv { flex: 1; color: var(--asg-text); }
.login-preview-roles { flex-wrap: wrap; }
.role-chip {
  display: inline-block;
  background: var(--asg-orange);
  color: white;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  margin: 2px 4px 2px 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.role-chip.secondary {
  background: var(--asg-shade-medium);
}
.login-footer {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--asg-shade-light);
  font-size: 11px;
  color: var(--asg-shade-medium);
  text-align: center;
  line-height: 1.6;
}
.login-footer strong { color: var(--asg-shade-dark); }

/* === PROFILE PAGE (v1.0.5) === */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.profile-card {
  background: var(--asg-card);
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  padding: 24px;
}
.profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--asg-shade-1);
  font-size: 13px;
}
.profile-row:last-child { border-bottom: none; }
.profile-row .pl { color: var(--asg-shade-dark); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; }
.profile-row .pv { color: var(--asg-text); }

/* === DASHBOARD HELPERS === */
.dash-progress {
  flex: 1;
  height: 8px;
  background: var(--asg-shade-1);
  border-radius: 4px;
  overflow: hidden;
  min-width: 80px;
}
.dash-progress-fill { height: 100%; transition: width 0.3s; }
.traffic-light {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
}
.tl-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.tl-dot.green,  .traffic-light.green  .tl-dot { background: var(--status-green); }
.tl-dot.orange, .traffic-light.orange .tl-dot { background: var(--status-amber); }
.tl-dot.red,    .traffic-light.red    .tl-dot { background: var(--status-red);   }

/* === GLOBAL SEARCH POPOVER === */
.asg-search-popover {
  position: fixed;
  background: var(--asg-card);
  border: 1px solid var(--asg-shade-light);
  border-radius: var(--asg-radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  max-height: 460px;
  overflow-y: auto;
  z-index: 1500;
  padding: 6px 0;
}
.asg-search-group {
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--asg-shade-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.asg-search-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s;
}
.asg-search-item:hover,
.asg-search-item.is-active {
  background: var(--asg-shade-1);
}
.asg-search-icon { font-size: 16px; flex-shrink: 0; width: 22px; }
.asg-search-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.asg-search-label {
  font-size: 13px; font-weight: 600; color: var(--asg-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asg-search-sub {
  font-size: 11px; color: var(--asg-shade-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asg-search-empty {
  padding: 14px;
  font-size: 13px; color: var(--asg-shade-medium);
  text-align: center;
}

/* Footer */
.footer {
  margin-top: auto;
  padding: 20px 32px;
  text-align: center;
  font-size: 12px;
  color: var(--asg-shade-medium);
  border-top: 1px solid var(--asg-shade-light);
}

/* === FUNCTIEHUIS-PAGINA (per afdeling) === */
.fh-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, var(--asg-orange) 0%, var(--asg-orange-deep) 100%);
  color: #fff;
  border-radius: 16px;
  padding: 26px 30px;
  margin-bottom: 22px;
  box-shadow: 0 8px 28px rgba(222,95,53,0.28);
}
.fh-hero-icon {
  font-size: 36px;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.18);
  border-radius: 16px;
  flex-shrink: 0;
}
.fh-hero-text { flex: 1; min-width: 0; }
.fh-hero-text h1 { font-size: 24px; font-weight: 700; margin: 0; }
.fh-hero-text p { font-size: 14px; opacity: 0.92; margin: 4px 0 0; }
.fh-hero-stat {
  text-align: center;
  background: rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 12px 22px;
  flex-shrink: 0;
}
.fh-hero-stat span { display: block; font-size: 28px; font-weight: 800; line-height: 1; }
.fh-hero-stat small { font-size: 10px; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.6px; }

.fh-note {
  background: #fff7ed;
  border: 1px solid var(--asg-orange);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--asg-navy);
  margin-bottom: 18px;
}
.fh-quicklinks { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.fh-ql {
  background: var(--asg-orange);
  border: 1px solid var(--asg-orange);
  border-radius: 4px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: var(--asg-shadow);
}
.fh-ql:hover { background: var(--asg-orange-hover); border-color: var(--asg-orange-hover); color: #fff; transform: translateY(-1px); }

/* Masonry-kolommen: kaarten vloeien naar beneden door en vullen de ruimte. */
.fh-groups {
  column-width: 360px;
  column-gap: 18px;
}
.fh-card {
  background: #fff;
  border: 1px solid var(--asg-shade-lightest);
  border-radius: 14px;
  box-shadow: var(--asg-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 0 18px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.fh-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--asg-shade-lightest);
}
.fh-card-icon { font-size: 18px; }
.fh-card-head h2 { font-size: 15px; font-weight: 700; margin: 0; flex: 1; color: var(--asg-navy); }
.fh-count {
  background: var(--asg-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 10px;
  min-width: 24px;
  text-align: center;
}
.fh-card-body { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.fh-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--asg-text);
  transition: background 0.12s;
}
.fh-doc[data-bbsdoc] { cursor: pointer; }
.fh-doc:hover { background: var(--asg-shade-lightest); }
.fh-doc-code { font-weight: 700; color: var(--asg-orange); font-size: 13px; flex-shrink: 0; min-width: 100px; }
.fh-doc-title { flex: 1; font-size: 13px; line-height: 1.3; }
.fh-doc-arrow { font-size: 11px; color: var(--asg-shade-medium); }
.fh-loading, .fh-empty {
  column-span: all;
  padding: 28px;
  text-align: center;
  color: var(--asg-shade-medium);
  font-size: 14px;
}

/* === PRIKBORD === */
.home-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.home-main { min-width: 0; }
.prikbord-rail, .delft-rail { position: sticky; top: 64px; }

/* Functiehuis-pagina: prikbord uiterst links, content rechts. */
.fh-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; align-items: start; }
.fh-main { min-width: 0; }
.fh-rail { position: sticky; top: 64px; }
.fh-rail .fh-prikbord-title { font-size: 15px; margin-bottom: 10px; }
.fh-rail .pb-compose-block, .fh-rail .pb-feed { max-width: none; }

.pb-rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pb-rail-title { font-weight: 700; color: var(--asg-navy); font-size: 15px; }
.pb-live { font-size: 11px; color: var(--asg-shade-medium); display: flex; align-items: center; gap: 6px; font-weight: 600; }
.pb-dot { width: 8px; height: 8px; border-radius: 50%; background: #2e9e6b; animation: pb-pulse 1.8s infinite; }
@keyframes pb-pulse { 0% { box-shadow: 0 0 0 0 rgba(46,158,107,.5); } 70% { box-shadow: 0 0 0 7px rgba(46,158,107,0); } 100% { box-shadow: 0 0 0 0 rgba(46,158,107,0); } }

.pb-toggle { width: 100%; background: var(--asg-orange); color: #fff; border: none; border-radius: 10px; padding: 10px; font-weight: 700; cursor: pointer; margin-bottom: 10px; font-family: inherit; font-size: 13px; transition: background .15s; }
.pb-toggle:hover { background: var(--asg-orange-hover); }

.pb-roll { overflow: hidden; height: calc(100vh - 240px); border-radius: 14px; background: var(--asg-navy); padding: 10px; box-shadow: var(--asg-shadow); }
.pb-track { display: flex; flex-direction: column; animation: pb-rollv var(--pb-dur, 40s) linear infinite; will-change: transform; }
.pb-roll.pb-static { height: auto; }
.pb-roll.pb-static .pb-track { animation: none; }
.pb-roll:hover .pb-track { animation-play-state: paused; }
@keyframes pb-rollv { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--pb-shift, 50%))); } }

.pb-tcard { background: #252e38; border-radius: 11px; padding: 11px 13px; border-left: 4px solid var(--accent, #888); margin-bottom: 10px; }
.pb-t-top { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.pb-badge { font-size: 10.5px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 12px; white-space: nowrap; }
.pb-t-house { font-size: 11px; color: #9aa6b2; margin-left: auto; }
.pb-t-title { color: #fff; font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.pb-t-text { color: #eef1f4; font-size: 13px; line-height: 1.35; }
.pb-t-foot { display: flex; gap: 8px; margin-top: 7px; font-size: 11px; color: #8e99a5; }
.pb-empty { padding: 18px; text-align: center; color: var(--asg-shade-medium); font-size: 13px; }

/* compose */
.pb-card { background: #fff; border: 1px solid var(--asg-shade-lightest); border-radius: 12px; padding: 12px; box-shadow: var(--asg-shadow); }
.pb-compose { margin-bottom: 10px; }
.pb-compose-types { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pb-chip { font-size: 12px; padding: 5px 10px; border-radius: 16px; cursor: pointer; border: 1.5px solid var(--asg-shade-light); background: #fff; color: var(--asg-shade-dark); font-weight: 600; user-select: none; transition: .12s; }
.pb-chip:hover { border-color: #cbd5e1; }
.pb-house { margin-bottom: 8px; width: 100%; }
.pb-msg { width: 100%; font-family: inherit; font-size: 13.5px; padding: 9px 11px; border: 1px solid var(--asg-shade-light); border-radius: 9px; background: #fafafa; resize: vertical; box-sizing: border-box; }
.pb-msg:focus { outline: 2px solid var(--asg-orange); background: #fff; }
.pb-compose-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pb-count { font-size: 11px; color: var(--asg-shade-medium); margin-left: auto; }

/* functiehuis-feed */
.fh-prikbord-wrap { margin-top: 28px; }
.fh-prikbord-title { font-size: 16px; font-weight: 700; color: var(--asg-navy); margin-bottom: 12px; }
.pb-compose-block { margin-bottom: 16px; max-width: 720px; }
.pb-block-head { font-weight: 700; color: var(--asg-navy); font-size: 14px; margin-bottom: 10px; }
.pb-feed { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.pb-post { background: #fff; border: 1px solid var(--asg-shade-lightest); border-radius: 12px; padding: 14px 16px; border-left: 5px solid var(--accent, #ccc); box-shadow: var(--asg-shadow); }
.pb-post-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pb-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--asg-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.pb-who { font-weight: 700; font-size: 14px; line-height: 1.1; }
.pb-meta { font-size: 12px; color: var(--asg-shade-medium); margin-top: 1px; }
.pb-post-title { font-weight: 700; margin-bottom: 4px; }
.pb-post-body { font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

/* === VANDAAG RONDOM DELFT (weer / nieuws / verkeer) === */
.dw-head { margin-bottom: 10px; }
.dw-title { font-weight: 700; color: var(--asg-navy); font-size: 15px; }
.dw-card { background: #fff; border: 1px solid var(--asg-shade-lightest); border-radius: 14px; box-shadow: var(--asg-shadow); padding: 12px 14px; margin-bottom: 12px; }
.dw-card-head { font-size: 13px; font-weight: 700; color: var(--asg-navy); margin-bottom: 8px; }
.dw-load, .dw-fail { font-size: 12px; color: var(--asg-shade-medium); padding: 6px 0; }
.dw-fail a { color: var(--asg-orange); font-weight: 600; text-decoration: none; }
.dw-weather { display: flex; align-items: center; gap: 12px; }
.dw-w-ico { font-size: 40px; line-height: 1; }
.dw-w-temp { font-size: 30px; font-weight: 800; color: var(--asg-navy); line-height: 1; }
.dw-w-lbl { font-size: 13px; color: var(--asg-shade-dark); }
.dw-w-stats { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 12px; color: var(--asg-shade-dark); }
.dw-roll { overflow: hidden; max-height: 230px; }
.dw-track { display: flex; flex-direction: column; animation: dw-rollv var(--dw-dur, 28s) linear infinite; }
.dw-roll:hover .dw-track { animation-play-state: paused; }
@keyframes dw-rollv { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.dw-news-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 2px; text-decoration: none; color: var(--asg-text); border-bottom: 1px solid var(--asg-shade-lightest); }
.dw-news-item:hover { color: var(--asg-orange); }
.dw-news-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--asg-orange); margin-top: 6px; flex-shrink: 0; }
.dw-news-title { font-size: 13px; line-height: 1.35; }
.dw-map { width: 100%; height: 150px; border: 0; border-radius: 10px; display: block; }
.dw-traffic-link { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--asg-orange); text-decoration: none; }
.dw-traffic-link:hover { text-decoration: underline; }

@media (max-width: 1500px) {
  .home-layout { grid-template-columns: 300px minmax(0, 1fr); }
  .delft-rail { grid-column: 1 / -1; position: static; }
}
@media (max-width: 1100px) {
  .home-layout, .fh-layout { grid-template-columns: 1fr; }
  .prikbord-rail, .delft-rail, .fh-rail { position: static; }
  .pb-roll { height: 360px; }
}

/* === CHATBOT === */
.chatbot-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--asg-orange) 0%, var(--asg-orange-deep) 100%);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(240,83,35,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 1000;
  transition: transform 0.2s, box-shadow 0.2s;
}
.chatbot-fab:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(240,83,35,0.5); }
.chatbot-fab.open { border-radius: 50%; background: var(--asg-navy); }
.chatbot-window {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 400px;
  max-height: 560px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: chatSlideUp 0.25s ease;
}
@keyframes chatSlideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.chatbot-header {
  background: linear-gradient(135deg, var(--asg-navy) 0%, var(--asg-shade-darkest) 100%);
  color: white;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chatbot-header .ch-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--asg-orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.chatbot-header .ch-info { flex:1; }
.chatbot-header .ch-name { font-size: 14px; font-weight: 700; }
.chatbot-header .ch-status { font-size: 11px; opacity: 0.7; }
.chatbot-header .ch-close {
  background: none; border: none; color: white; font-size: 20px;
  cursor: pointer; opacity: 0.7; padding: 4px;
}
.chatbot-header .ch-close:hover { opacity: 1; }
.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 300px;
  max-height: 380px;
  background: #f8f8f9;
}
.chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.chat-msg.bot {
  background: white;
  color: var(--asg-text);
  border: 1px solid var(--asg-shade-light);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.chat-msg.user {
  background: var(--asg-orange);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.chat-msg a { color: var(--asg-orange); font-weight: 600; text-decoration: underline; cursor: pointer; }
.chat-msg.bot a { color: var(--asg-orange); }
.chat-msg.user a { color: white; }
.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.chat-suggestion {
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid var(--asg-orange);
  color: var(--asg-orange);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: white;
  transition: all 0.15s;
}
.chat-suggestion:hover { background: var(--asg-orange); color: white; }
.chatbot-input {
  display: flex;
  padding: 12px 16px;
  gap: 8px;
  border-top: 1px solid var(--asg-shade-light);
  background: white;
}
.chatbot-input input {
  flex: 1;
  padding: 8px 14px;
  border: 1px solid var(--asg-shade-light);
  border-radius: 20px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.chatbot-input input:focus { border-color: var(--asg-orange); }
.chatbot-input button {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--asg-orange);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-typing { display: flex; gap: 4px; padding: 8px 0; align-self: flex-start; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #bbb;
  animation: chatDot 1.2s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatDot { 0%,60%,100% { opacity:0.3; } 30% { opacity:1; } }

/* === ORGANOGRAM === */

/* === PRIMARY PROCESS === */

/* === MANAGEMENT DASHBOARD === */
.dashboard-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.kpi-card {
  background: white;
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  padding: 18px;
  text-align: center;
  border-top: 4px solid var(--asg-shade-light);
}
.kpi-card.green { border-top-color: #27ae60; }
.kpi-card.orange { border-top-color: var(--status-amber); }
.kpi-card.red { border-top-color: #c0392b; }
.kpi-value { font-size: 32px; font-weight: 700; line-height: 1; }
.kpi-label { font-size: 12px; color: var(--asg-shade-dark); margin-top: 4px; }
.traffic-light {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}
.traffic-light.green { background: #e8f8ef; color: #27ae60; }
.traffic-light.orange { background: #fef3e2; color: var(--status-amber); }
.traffic-light.red { background: #fce4e4; color: #c0392b; }
.tl-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.tl-dot.green { background: #27ae60; }
.tl-dot.orange { background: #e67e22; }
.tl-dot.red { background: #c0392b; }
.dash-table {
  width: 100%;
  background: white;
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  border-collapse: collapse;
  overflow: hidden;
}
.dash-table th {
  background: var(--asg-shade-1);
  color: var(--asg-navy);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dash-table td {
  padding: 10px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--asg-shade-light);
}
.dash-table tr { cursor: pointer; transition: background 0.1s; }
.dash-table tbody tr:hover { background: #f8f9fb; }
.dash-progress {
  height: 8px;
  background: var(--asg-shade-1);
  border-radius: 4px;
  overflow: hidden;
  min-width: 80px;
}
.dash-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}
.process-flow {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding: 20px 0;
}
.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 180px;
  flex: 1;
  position: relative;
  cursor: pointer;
}
.process-step-box {
  background: white;
  border: 2px solid var(--asg-shade-light);
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
  width: 100%;
  transition: all 0.2s;
  box-shadow: var(--asg-shadow);
  position: relative;
  z-index: 2;
}
.process-step-box:hover {
  border-color: var(--asg-orange);
  box-shadow: var(--asg-shadow-hover);
  transform: translateY(-3px);
}
.process-step-box.active {
  border-color: var(--asg-orange);
  background: linear-gradient(135deg, var(--asg-orange) 0%, #f5892e 100%);
  color: white;
}
.process-step-box.active .ps-icon { opacity: 1; }
.process-step-box.active .ps-subtitle { color: rgba(255,255,255,0.8); }
.ps-icon { font-size: 28px; margin-bottom: 6px; }
.ps-title { font-size: 14px; font-weight: 700; }
.ps-subtitle { font-size: 11px; color: var(--asg-shade-dark); margin-top: 4px; }
.ps-number {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--asg-navy);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.process-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  color: var(--asg-orange);
  font-size: 24px;
  font-weight: 700;
  margin-top: 30px;
  flex-shrink: 0;
}
.process-detail-panel {
  background: white;
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  padding: 24px;
  margin-top: 20px;
  border-left: 4px solid var(--asg-orange);
  animation: fadeIn 0.2s ease;
}
.process-dept-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.process-dept-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid var(--asg-shade-light);
  background: white;
}
.process-dept-chip:hover { border-color: var(--asg-orange); color: var(--asg-orange); }
.process-dept-chip .chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.process-support-bar {
  background: linear-gradient(135deg, var(--asg-navy) 0%, var(--asg-shade-darkest) 100%);
  border-radius: var(--asg-radius);
  padding: 16px 24px;
  margin-top: 24px;
  color: white;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.process-support-bar .psb-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
  white-space: nowrap;
}
.process-support-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.12);
  cursor: pointer;
  transition: background 0.15s;
}
.process-support-chip:hover { background: rgba(255,255,255,0.25); }
.org-container { overflow-x: auto; padding: 20px 0; }
.org-tree { display: flex; flex-direction: column; align-items: center; }
.org-node {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.org-box {
  background: white;
  border: 2px solid var(--asg-shade-light);
  border-radius: 8px;
  padding: 10px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 140px;
  max-width: 180px;
  box-shadow: var(--asg-shadow);
  position: relative;
}
.org-box:hover { border-color: var(--asg-orange); box-shadow: var(--asg-shadow-hover); transform: translateY(-1px); }
.org-box .org-title { font-size: 12px; font-weight: 700; color: var(--asg-navy); line-height: 1.3; }
.org-box .org-dept { font-size: 10px; color: var(--asg-shade-dark); margin-top: 2px; }
.org-box.executive { border-left: 4px solid var(--asg-orange); }
.org-box.management { border-left: 4px solid var(--asg-orange); }
.org-box.staff { border-left: 4px solid var(--status-green); }
.org-children {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
  flex-wrap: wrap;
}
.org-connector {
  width: 2px;
  height: 20px;
  background: var(--asg-shade-light);
  margin: 0 auto;
}
.org-h-line {
  height: 2px;
  background: var(--asg-shade-light);
  margin: 0 auto;
}

/* Functiehuis list */
.functiehuis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.functiehuis-card {
  background: white;
  border: 1px solid var(--asg-shade-light);
  border-radius: var(--asg-radius);
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 12px;
}
.functiehuis-card:hover { border-color: var(--asg-orange); box-shadow: var(--asg-shadow-hover); }
.functiehuis-card .fc-level {
  width: 6px;
  height: 40px;
  border-radius: 3px;
  flex-shrink: 0;
}
.functiehuis-card .fc-level.executive { background: var(--asg-orange); }
.functiehuis-card .fc-level.management { background: var(--asg-orange); }
.functiehuis-card .fc-level.staff { background: var(--status-green); }
.functiehuis-card .fc-title { font-size: 13px; font-weight: 700; }
.functiehuis-card .fc-dept { font-size: 11px; color: var(--asg-shade-dark); }

/* Competentiematrix */
.comp-matrix {
  width: 100%;
  border-collapse: collapse;
}
.comp-matrix th {
  text-align: left;
  padding: 8px 14px;
  background: var(--asg-shade-1);
  color: var(--asg-navy);
  font-size: 12px;
  font-weight: 600;
}
.comp-matrix td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--asg-shade-light);
  font-size: 13px;
}
.comp-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.comp-dots {
  display: inline-flex;
  gap: 3px;
}
.comp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--asg-shade-light);
}
.comp-dot.filled { background: var(--asg-orange); border-color: var(--asg-orange); }
.comp-label {
  font-size: 11px;
  color: var(--asg-shade-dark);
  font-weight: 600;
}

/* ===== HR ZAKEN (rev 17) ===== */
.hr-hero {
  background: linear-gradient(135deg, var(--asg-shade-medium) 0%, #6d7176 100%);
  color: white;
  padding: 32px 28px;
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  margin-bottom: 20px;
}
.hr-hero h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.hr-hero p { font-size: 14px; opacity: 0.92; }

.hr-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.hr-kpi {
  background: white;
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  padding: 18px 18px;
  border-top: 3px solid var(--asg-orange);
}
.hr-kpi.green { border-top-color: #27ae60; }
.hr-kpi.red { border-top-color: #c0392b; }
.hr-kpi.blue { border-top-color: var(--status-blue); }
.hr-kpi .hr-kpi-label { font-size: 11px; color: var(--asg-shade-dark); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.hr-kpi .hr-kpi-value { font-size: 32px; font-weight: 700; color: var(--asg-navy); margin: 6px 0 2px; }
.hr-kpi .hr-kpi-sub { font-size: 12px; color: var(--asg-shade-dark); }

.hr-notif-card {
  background: white;
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-left: 4px solid var(--asg-shade-light);
  transition: box-shadow 0.15s, transform 0.15s;
}
.hr-notif-card:hover { box-shadow: var(--asg-shadow-hover); }
.hr-notif-card.urgent { border-left-color: #c0392b; }
.hr-notif-card.soon { border-left-color: var(--asg-orange); }
.hr-notif-card.planned { border-left-color: var(--status-blue); }
.hr-notif-card.done { border-left-color: #27ae60; opacity: 0.75; }
.hr-notif-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--asg-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.hr-notif-body { flex: 1; }
.hr-notif-body .hr-notif-title { font-size: 13px; font-weight: 700; color: var(--asg-navy); }
.hr-notif-body .hr-notif-detail { font-size: 12px; color: var(--asg-shade-dark); margin-top: 2px; }
.hr-notif-meta { font-size: 11px; color: var(--asg-shade-dark); text-align: right; flex-shrink: 0; }
.hr-notif-meta .hr-notif-date { font-weight: 700; color: var(--asg-navy); font-size: 12px; }

.hr-status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.hr-status-pill.urgent { background: #fde4df; color: #c0392b; }
.hr-status-pill.soon { background: #fdeee4; color: #d4431a; }
.hr-status-pill.planned { background: #e3f0fa; color: #2980b9; }
.hr-status-pill.done { background: #e0f4e7; color: #1e8449; }
.hr-status-pill.open { background: #f5f5f6; color: var(--asg-shade-dark); }

.hr-timeline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.hr-timeline-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.hr-timeline-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--asg-shade-light);
  background: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--asg-shade-dark);
  transition: all 0.15s;
}
.hr-timeline-step.done .hr-timeline-dot {
  background: #27ae60;
  border-color: #27ae60;
  color: white;
}
.hr-timeline-step.active .hr-timeline-dot {
  background: var(--asg-orange);
  border-color: var(--asg-orange);
  color: white;
  box-shadow: 0 0 0 3px rgba(240,83,35,0.2);
}
.hr-timeline-label { font-size: 10px; color: var(--asg-shade-dark); font-weight: 600; text-align: center; line-height: 1.2; }
.hr-timeline-step.done .hr-timeline-label { color: #27ae60; }
.hr-timeline-step.active .hr-timeline-label { color: var(--asg-orange); }
.hr-timeline-connector {
  flex: 0.5;
  height: 2px;
  background: var(--asg-shade-light);
  margin-top: -22px;
}
.hr-timeline-connector.done { background: #27ae60; }

.hr-verzuim-card {
  background: white;
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.hr-verzuim-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}
.hr-verzuim-header .v-name { font-size: 15px; font-weight: 700; color: var(--asg-navy); }
.hr-verzuim-header .v-sub { font-size: 12px; color: var(--asg-shade-dark); margin-top: 2px; }
.hr-verzuim-header .v-days {
  font-size: 13px; font-weight: 700;
  color: white;
  background: var(--asg-orange);
  padding: 4px 12px; border-radius: 12px;
}
.hr-verzuim-notes {
  font-size: 12px; color: var(--asg-shade-dark);
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--asg-shade-light);
  font-style: italic;
}

.hr-bday-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.hr-bday-card {
  background: white;
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 3px solid var(--asg-orange);
  transition: box-shadow 0.15s;
}
.hr-bday-card:hover { box-shadow: var(--asg-shadow-hover); }
.hr-bday-card.lustrum { border-top-color: var(--asg-orange); background: linear-gradient(180deg, #fff7f4 0%, #ffffff 24%); }
.hr-bday-card.urgent { border-top-color: #c0392b; }
.hr-bday-card .b-name { font-size: 14px; font-weight: 700; color: var(--asg-navy); }
.hr-bday-card .b-event { font-size: 12px; color: var(--asg-orange); font-weight: 700; }
.hr-bday-card .b-meta { font-size: 11px; color: var(--asg-shade-dark); display: flex; justify-content: space-between; }
.hr-bday-card .b-detail { font-size: 12px; color: var(--asg-navy); margin-top: 2px; }
.hr-bday-card .b-actions { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.hr-bday-check {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--asg-shade-light);
  background: white;
  border-radius: 12px;
  cursor: pointer;
  color: var(--asg-shade-dark);
}
.hr-bday-check:hover { border-color: var(--asg-orange); color: var(--asg-orange); }
.hr-bday-check.done { background: #27ae60; color: white; border-color: #27ae60; }
.hr-bday-card.done { opacity: 0.62; border-top-color: #27ae60; }

/* Medewerkers / personeelsdossier */
.mw-badge { display:inline-block; padding:2px 10px; border-radius:12px; font-size:11px; font-weight:700; }
.mw-badge.vast { background:#E7F4EC; color:#1E6B3A; }
.mw-badge.ing  { background:#FAEEDA; color:#633806; }
.hr-status-pill.ok { background:#E7F4EC; color:#1E6B3A; }

.hr-entry-block {
  background: linear-gradient(135deg, #ffffff 0%, #fdf7f4 100%);
  border: 1px solid var(--asg-shade-light);
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.hr-entry-block h2 { font-size: 15px; font-weight: 700; color: var(--asg-navy); margin-bottom: 12px; }
.hr-entry-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.hr-entry-chip {
  flex: 1; min-width: 200px;
  padding: 14px 16px;
  border: 2px solid var(--asg-orange);
  border-radius: var(--asg-radius);
  color: var(--asg-orange);
  background: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hr-entry-chip:hover { background: var(--asg-orange); color: white; box-shadow: var(--asg-shadow-hover); }
.hr-entry-chip .hr-entry-chip-icon { font-size: 18px; }
.hr-entry-chip .hr-entry-chip-badge {
  margin-left: auto;
  background: #c0392b; color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
}
.hr-entry-chip:hover .hr-entry-chip-badge { background: white; color: #c0392b; }

/* HR notifications widget (home + HR dept) */
.hr-notif-widget {
  background: white;
  border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.hr-notif-widget .hnw-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.hr-notif-widget .hnw-title { font-size: 14px; font-weight: 700; color: var(--asg-navy); display: flex; align-items: center; gap: 8px; }
.hr-notif-widget .hnw-link { font-size: 12px; color: var(--asg-orange); font-weight: 600; cursor: pointer; }
.hr-notif-widget .hnw-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  font-size: 12px;
  border-top: 1px solid var(--asg-shade-light);
}
.hr-notif-widget .hnw-item:first-of-type { border-top: none; }
.hr-notif-widget .hnw-item .hnw-what { color: var(--asg-navy); font-weight: 600; }
.hr-notif-widget .hnw-item .hnw-when { color: var(--asg-shade-dark); font-size: 11px; }

/* AVG banner bovenaan HR Zaken */
.hr-avg-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff7ed;
  border: 1px solid var(--asg-orange);
  border-left: 4px solid var(--asg-orange);
  border-radius: var(--asg-radius);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.hr-avg-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.hr-avg-body { flex: 1; }
.hr-avg-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--asg-navy);
  margin-bottom: 6px;
}
.hr-avg-text {
  font-size: 12px;
  color: var(--asg-navy);
  line-height: 1.55;
}
.hr-avg-text strong { color: #c0392b; }
.hr-avg-text em { font-style: italic; color: var(--asg-navy); }

/* HR Zaken invoerformulieren — modals */
.hr-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(29,36,44,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
  padding: 20px;
  animation: hrFadeIn 0.15s ease-out;
}
@keyframes hrFadeIn { from { opacity: 0; } to { opacity: 1; } }
.hr-modal {
  background: white;
  border-radius: var(--asg-radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.hr-modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--asg-shade-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky; top: 0; background: white; z-index: 2;
}
.hr-modal-header h2 { font-size: 17px; font-weight: 700; color: var(--asg-navy); }
.hr-modal-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 24px; color: var(--asg-shade-dark); line-height: 1;
  padding: 0; width: 30px; height: 30px;
}
.hr-modal-close:hover { color: var(--asg-navy); }
.hr-modal-body { padding: 20px 22px; }
.hr-modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--asg-shade-light);
  display: flex; gap: 10px; justify-content: flex-end;
  background: #fafafb;
  border-radius: 0 0 var(--asg-radius) var(--asg-radius);
  position: sticky; bottom: 0;
}
.hr-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.hr-form-field.full { grid-column: 1 / -1; }
.hr-form-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--asg-shade-dark);
  margin-bottom: 4px;
}
.hr-form-field .hint {
  display: block;
  font-size: 11px;
  color: var(--asg-shade-dark);
  margin-top: 4px;
  font-style: italic;
}
.hr-form-field input,
.hr-form-field select,
.hr-form-field textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--asg-shade-light);
  border-radius: 4px;
  font-size: 13px;
  background: white;
  color: var(--asg-navy);
  font-family: inherit;
}
.hr-form-field input:focus,
.hr-form-field select:focus,
.hr-form-field textarea:focus {
  outline: none;
  border-color: var(--asg-orange);
  box-shadow: 0 0 0 3px rgba(240,83,35,0.15);
}
.hr-form-field textarea { min-height: 70px; resize: vertical; }
.hr-form-avg-note {
  grid-column: 1 / -1;
  background: #fff7ed;
  border: 1px solid var(--asg-orange);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 11px;
  color: var(--asg-navy);
  line-height: 1.5;
}
.hr-form-avg-note strong { color: #c0392b; }
.hr-btn-primary {
  background: var(--asg-orange); color: white;
  border: none;
  padding: 9px 22px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.hr-btn-primary:hover { background: var(--asg-orange-hover); }
.hr-btn-secondary {
  background: white; color: var(--asg-shade-dark);
  border: 1px solid var(--asg-shade-light);
  padding: 9px 22px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.hr-btn-secondary:hover { color: var(--asg-navy); border-color: var(--asg-navy); }
.hr-new-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: var(--asg-orange); color: white;
  border: none; border-radius: 4px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.hr-new-btn:hover { background: var(--asg-orange-hover); }
.hr-new-btn-row {
  display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}

/* Toast bij succes */
.hr-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #27ae60;
  color: white;
  padding: 14px 20px;
  border-radius: var(--asg-radius);
  box-shadow: 0 10px 30px rgba(39,174,96,0.3);
  font-size: 13px;
  font-weight: 600;
  z-index: 3000;
  animation: hrSlideIn 0.25s ease-out;
  max-width: 420px;
}
@keyframes hrSlideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Responsive */
@media (max-width: 900px) {
  .dept-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-access { grid-template-columns: repeat(3, 1fr); }
  .cards-row { grid-template-columns: 1fr; }
  .meta-grid { grid-template-columns: repeat(2, 1fr); }
  .hr-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* Grote / externe schermen: tegels groter en schermvullend. */
@media (min-width: 1600px) {
  .hero-welcome { padding: 40px 44px; }
  .hero-welcome h1 { font-size: 28px; }
  .hero-welcome p { font-size: 16px; }

  .dept-grid { gap: 18px; }
  .dept-tile { min-height: 96px; font-size: 17px; gap: 16px; padding: 19px 22px; }
  .dept-tile .tile-icon { width: 52px; height: 52px; font-size: 23px; border-radius: 12px; }

  .home-action-grid { gap: 16px !important; }
  .home-action-grid > div { min-height: 140px; }

  .quick-access { gap: 16px; }
  .quick-btn { min-height: 96px; font-size: 15px; }
  .quick-btn .q-icon { font-size: 26px; }
}

@media (min-width: 2200px) {
  .dept-tile { min-height: 112px; font-size: 19px; }
  .dept-tile .tile-icon { width: 58px; height: 58px; font-size: 26px; }
  .home-action-grid > div { min-height: 160px; }
  .quick-btn { min-height: 110px; }
}

/* ============================================================
 *  RISICO- & KANSENREGISTER  (pages/risico.js) — scoped .risico-page
 * ============================================================ */
.risico-page { --r-laag:#2e7d32; --r-gem:#f9a825; --r-hoog:#ef6c00; --r-zeerhoog:#c62828; }
.risico-page .risico-banner { display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,var(--asg-orange) 0%,var(--asg-orange-deep) 100%); color:#fff; border-radius:var(--asg-radius); padding:18px 24px; box-shadow:var(--asg-shadow); margin-bottom:16px; }
.risico-page .risico-banner .ico { font-size:30px; }
.risico-page .risico-banner h1 { margin:0; font-size:22px; }
.risico-page .risico-banner p { margin:2px 0 0; font-size:13px; opacity:0.9; }
.risico-page .risico-banner .ident { margin-left:auto; font-size:12px; opacity:0.95; text-align:right; }
.risico-page .kam-badge { background:#fff; color:var(--asg-orange-deep); border-radius:6px; padding:1px 7px; font-weight:700; font-size:11px; }

.risico-page .risico-tabs { display:flex; gap:8px; border-bottom:2px solid var(--asg-border); margin-bottom:18px; }
.risico-page .r-tab { background:none; border:none; padding:10px 18px; font-size:14px; font-weight:600; color:var(--asg-shade-dark); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; }
.risico-page .r-tab.actief { color:var(--asg-orange); border-bottom-color:var(--asg-orange); }
.risico-page .badge-getal { background:var(--asg-navy); color:#fff; border-radius:10px; padding:1px 8px; font-size:11px; margin-left:4px; }

.risico-page .stepper { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.risico-page .stepper .step { flex:1; min-width:130px; display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--asg-border); border-radius:var(--asg-radius); font-size:13px; color:var(--asg-shade-dark); background:#fff; }
.risico-page .stepper .step .nr { width:22px; height:22px; border-radius:50%; background:var(--asg-shade-lightest); color:var(--asg-shade-dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.risico-page .stepper .step.active { border-color:var(--asg-orange); color:var(--asg-navy); font-weight:700; }
.risico-page .stepper .step.active .nr { background:var(--asg-orange); color:#fff; }
.risico-page .stepper .step.done .nr { background:var(--r-laag); color:#fff; }

.risico-page .r-stap { display:none; }
.risico-page .r-stap.active { display:block; }
.risico-page .info-blok { background:var(--asg-shade-lightest); border-left:3px solid var(--asg-orange); padding:10px 14px; border-radius:6px; font-size:13px; margin-bottom:16px; }
.risico-page .veld { margin-bottom:14px; }
.risico-page .veld > label { display:block; font-size:12px; font-weight:600; color:var(--asg-shade-dark); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.3px; }
.risico-page .veld > label.verplicht::after { content:' *'; color:var(--asg-orange); }
.risico-page input[type=text], .risico-page input[type=date], .risico-page textarea, .risico-page select { width:100%; padding:9px 11px; border:1px solid var(--asg-border); border-radius:6px; font:inherit; font-size:14px; background:#fff; color:var(--asg-text); }
.risico-page textarea { resize:vertical; }
.risico-page .hint { font-size:12px; color:var(--asg-shade-dark); margin-top:4px; }
.risico-page .rij { display:flex; gap:14px; flex-wrap:wrap; }
.risico-page .rij > .veld { flex:1; min-width:200px; }
.risico-page .radio-groep { display:flex; gap:16px; padding-top:4px; }
.risico-page .radio-groep label { font-weight:400; text-transform:none; font-size:14px; display:flex; align-items:center; gap:6px; }

.risico-page .acties { display:flex; justify-content:space-between; align-items:center; margin-top:20px; gap:10px; flex-wrap:wrap; }
.risico-page .btn-primair { background:var(--asg-orange); color:#fff; border:none; padding:10px 18px; border-radius:6px; font-weight:600; font-size:14px; cursor:pointer; }
.risico-page .btn-primair:hover { background:var(--asg-orange-deep); }
.risico-page .btn-primair:disabled { opacity:0.6; cursor:default; }
.risico-page .btn-secundair { background:#fff; color:var(--asg-navy); border:1px solid var(--asg-border); padding:9px 15px; border-radius:6px; font-weight:600; font-size:13px; cursor:pointer; }
.risico-page .btn-secundair:hover { border-color:var(--asg-orange); color:var(--asg-orange); }

.risico-page .berekening { background:var(--asg-shade-lightest); border-radius:var(--asg-radius); padding:14px 16px; margin-bottom:8px; }
.risico-page .berekening h3 { margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:0.4px; color:var(--asg-shade-dark); }
.risico-page .formule { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.risico-page .formule .blok { background:#fff; border:1px solid var(--asg-border); border-radius:6px; padding:6px 14px; text-align:center; font-size:11px; color:var(--asg-shade-dark); display:flex; flex-direction:column; }
.risico-page .formule .blok strong { font-size:20px; color:var(--asg-navy); }
.risico-page .formule .operator { font-size:18px; color:var(--asg-shade-dark); }
.risico-page .uitkomst { padding:6px 14px; border-radius:6px; font-weight:700; color:#fff; }
.risico-page .uitkomst.laag { background:var(--r-laag); } .risico-page .uitkomst.gemiddeld { background:var(--r-gem); } .risico-page .uitkomst.hoog { background:var(--r-hoog); } .risico-page .uitkomst.zeerhoog { background:var(--r-zeerhoog); }
.risico-page .suggestie { margin-top:10px; font-size:13px; }

.risico-page .vertrouwelijk-blok { border:1px dashed var(--asg-border); border-radius:8px; padding:12px 14px; margin-bottom:14px; background:var(--asg-shade-lightest); }
.risico-page .vink-rij { display:flex; align-items:center; gap:8px; font-size:14px; }
.risico-page .toelichting { font-size:12px; color:var(--asg-shade-dark); margin:6px 0; }

.risico-page .opvolg-lijst { display:flex; flex-direction:column; gap:10px; }
.risico-page .opvolg-kaart { border:1px solid var(--asg-border); border-radius:8px; padding:10px 12px; background:#fff; }
.risico-page .opvolg-kop { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.risico-page .opvolg-kaart .x { background:none; border:none; color:var(--asg-shade-dark); cursor:pointer; font-size:14px; }
.risico-page .opvolg-toevoegen { display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.risico-page .opvolg-toevoegen .label-knop { font-size:13px; color:var(--asg-shade-dark); }

.risico-page .preview-table, .risico-page .opvolg-preview { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:8px; }
.risico-page .preview-table th { text-align:left; width:160px; color:var(--asg-shade-dark); font-weight:600; padding:6px 8px; vertical-align:top; }
.risico-page .preview-table td, .risico-page .opvolg-preview td, .risico-page .opvolg-preview th { padding:6px 8px; border-top:1px solid var(--asg-border); text-align:left; }
.risico-page .r-subkop { margin:18px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:0.4px; color:var(--asg-shade-dark); }

.risico-page .register-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.risico-page .register-toolbar .ruimte { flex:1; }
.risico-page .opslag-status { font-size:12px; color:var(--asg-shade-dark); }
.risico-page .kpi-rij { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.risico-page .kpi { background:#fff; border:1px solid var(--asg-border); border-radius:var(--asg-radius); padding:12px 14px; box-shadow:var(--asg-shadow); }
.risico-page .kpi .label { font-size:11px; text-transform:uppercase; letter-spacing:0.3px; color:var(--asg-shade-dark); }
.risico-page .kpi .waarde { font-size:24px; font-weight:700; color:var(--asg-navy); }
.risico-page .kpi.hoog .waarde { color:var(--r-hoog); }
.risico-page .toolbar { display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap; align-items:center; }
.risico-page .toolbar input, .risico-page .toolbar select { width:auto; flex:0 0 auto; }
.risico-page .toolbar input[type=text] { flex:1; min-width:180px; }
.risico-page .toolbar .telling { font-size:12px; color:var(--asg-shade-dark); margin-left:auto; }

.risico-page .tabel-wrap { overflow-x:auto; border:1px solid var(--asg-border); border-radius:var(--asg-radius); }
.risico-page .register-tabel { width:100%; border-collapse:collapse; font-size:13px; background:#fff; }
.risico-page .register-tabel th { background:var(--asg-navy); color:#fff; text-align:left; padding:9px 10px; font-size:12px; font-weight:600; position:sticky; top:0; }
.risico-page .register-tabel td { padding:9px 10px; border-top:1px solid var(--asg-border); vertical-align:top; }
.risico-page .register-tabel tr.regel { cursor:pointer; }
.risico-page .register-tabel tr.regel:hover td { background:var(--asg-shade-lightest); }
.risico-page .register-tabel tr.regel.open td { background:var(--asg-shade-lightest); }
.risico-page .register-tabel tr.regel.nieuw td { animation:rFlash 2s ease; }
@keyframes rFlash { from { background:#fdebe2; } to { background:transparent; } }
.risico-page .cel-id { font-family:monospace; white-space:nowrap; color:var(--asg-shade-dark); }
.risico-page .cel-onderwerp { font-weight:600; min-width:200px; }
.risico-page .cel-score { text-align:center; font-weight:700; }
.risico-page .register-tabel .chevron { display:inline-block; transition:transform 0.15s; color:var(--asg-shade-dark); }
.risico-page .register-tabel tr.regel.open .chevron { transform:rotate(90deg); }
.risico-page .detail { display:none; }
.risico-page .detail.zichtbaar { display:table-row; }
.risico-page .detail > td { background:var(--asg-shade-lightest); padding:16px 18px; }
.risico-page .detail-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.risico-page .detail-bar .titel { font-weight:700; color:var(--asg-navy); }
.risico-page .btn-verwijder { background:#fff; border:1px solid var(--r-zeerhoog); color:var(--r-zeerhoog); border-radius:6px; padding:6px 12px; cursor:pointer; font-size:12px; font-weight:600; }
.risico-page .readonly-hint { font-size:12px; font-style:italic; color:var(--asg-shade-dark); }
.risico-page .detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px 16px; margin-bottom:12px; }
.risico-page .detail-grid .veld { margin:0; }
.risico-page .detail-grid .veld label { font-size:11px; }
.risico-page .detail-grid .waarde { font-size:13px; color:var(--asg-text); }
.risico-page .detail-grid select { padding:4px 8px; font-size:13px; }
.risico-page .herbeoordeel { display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:#fff; border:1px solid var(--asg-border); border-radius:8px; padding:8px 12px; margin-bottom:14px; }
.risico-page .herbeoordeel label { font-size:12px; font-weight:600; color:var(--asg-shade-dark); }
.risico-page .herbeoordeel select { width:auto; }
.risico-page .detail h4 { margin:14px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:0.4px; color:var(--asg-shade-dark); }
.risico-page .tekst-blok { background:#fff; border:1px solid var(--asg-border); border-radius:6px; padding:10px 12px; font-size:13px; white-space:pre-wrap; }
.risico-page .opvolging-tabel { width:100%; border-collapse:collapse; font-size:13px; background:#fff; border:1px solid var(--asg-border); border-radius:6px; }
.risico-page .opvolging-tabel th { text-align:left; padding:7px 9px; background:var(--asg-shade-lightest); font-size:11px; color:var(--asg-shade-dark); }
.risico-page .opvolging-tabel td { padding:7px 9px; border-top:1px solid var(--asg-border); }
.risico-page .opvolging-tabel select { padding:4px 6px; font-size:12px; }
.risico-page .resultaat-log { display:flex; flex-direction:column; gap:8px; }
.risico-page .resultaat-entry { background:#fff; border:1px solid var(--asg-border); border-left:3px solid var(--asg-orange); border-radius:6px; padding:8px 10px; }
.risico-page .resultaat-entry .meta { font-size:11px; color:var(--asg-shade-dark); margin-bottom:3px; }
.risico-page .resultaat-entry .tekst { font-size:13px; white-space:pre-wrap; }
.risico-page .resultaat-invoer { display:flex; gap:8px; margin-top:10px; align-items:flex-start; }
.risico-page .resultaat-invoer textarea { flex:1; }

.risico-page .badge { display:inline-block; padding:2px 9px; border-radius:10px; font-size:11px; font-weight:600; color:#fff; }
.risico-page .badge.risico { background:var(--r-zeerhoog); } .risico-page .badge.kans { background:var(--r-laag); }
.risico-page .badge.laag { background:var(--r-laag); } .risico-page .badge.gemiddeld { background:var(--r-gem); } .risico-page .badge.hoog { background:var(--r-hoog); } .risico-page .badge.zeerhoog { background:var(--r-zeerhoog); }
.risico-page .badge.open { background:var(--asg-shade-dark); } .risico-page .badge.bezig { background:var(--r-gem); } .risico-page .badge.gereed { background:var(--r-laag); }
.risico-page .badge.actie { background:var(--asg-navy); } .risico-page .badge.besluit { background:#6a4c93; } .risico-page .badge.communicatie { background:#2f7fd6; }
.risico-page .badge.vertrouwelijk { background:var(--asg-shade-dark); }

.risico-page .r-melding-banner { display:none; }
.risico-page .r-melding-banner.toon { display:block; padding:10px 14px; border-radius:6px; font-size:13px; margin-bottom:14px; }
.risico-page .r-melding-banner.fout { display:block; background:#fdebe2; color:var(--r-zeerhoog); border:1px solid var(--r-zeerhoog); }
.risico-page .r-melding-banner.succes { display:block; background:#e8f5e9; color:var(--r-laag); border:1px solid var(--r-laag); }
.risico-page .r-leeg { text-align:center; padding:40px 20px; color:var(--asg-shade-dark); }
.risico-page .r-leeg .ico { font-size:34px; margin-bottom:8px; }
.risico-page .r-leeg h3 { margin:0 0 6px; color:var(--asg-navy); }
@media (max-width:760px) { .risico-page .kpi-rij { grid-template-columns:repeat(2,1fr); } }

/* Overzichten-pagina: tabbladen. */
.ovz-tab { background:none; border:none; padding:9px 16px; font-size:14px; font-weight:600; color:var(--asg-shade-dark); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; }
.ovz-tab.actief { color:var(--asg-orange); border-bottom-color:var(--asg-orange); }
.ovz-tab:hover { color:var(--asg-orange); }

/* Bewerkbare status-dropdown in de registers (alleen voor beheerrollen). */
.reg-status-sel { font:inherit; font-size:12px; padding:3px 6px; border:1px solid var(--asg-border); border-radius:6px; background:#fff; color:var(--asg-text); cursor:pointer; max-width:160px; }
.reg-status-sel:hover { border-color:var(--asg-orange); }
.reg-status-sel:focus { outline:none; border-color:var(--asg-orange); box-shadow:0 0 0 2px rgba(240,83,35,0.15); }