/* ════════════════════════════════════════════════════════════════
   SCHOONGENOEG — UI Fixes & Enhancements v4.81
   ════════════════════════════════════════════════════════════════
   Fixes:
   1. Modal close buttons — always clickable, visible
   2. Dashboard timer widget — lighter background
   3. Role-based nav visibility
   4. Back-navigation helpers
   5. Accounts section polish
   ════════════════════════════════════════════════════════════════ */

/* ── 1. MODAL CLOSE BUTTONS ───────────────────────────────────── */
/* Ensure close buttons are always on top and clickable */
.modal-close {
  position: relative;
  z-index: 10;
  pointer-events: all !important;
  cursor: pointer !important;
  background: rgba(0,0,0,.05) !important;
  border: none !important;
  border-radius: 8px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  color: #374151 !important;
  transition: background .15s, color .15s !important;
  flex-shrink: 0 !important;
}
.modal-close:hover {
  background: rgba(239,68,68,.12) !important;
  color: #dc2626 !important;
}
.modal-close i {
  pointer-events: none;
  font-size: .9rem !important;
}

/* Modal header — always flex with close btn aligned right */
.modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.modal-header h3,
.modal-header .modal-title {
  flex: 1 !important;
  margin: 0 !important;
}

/* ── 2. MODAL OVERLAY ─────────────────────────────────────────── */
.modal-overlay {
  z-index: 9000 !important;
  pointer-events: all !important;
}
.modal-overlay .modal {
  pointer-events: all !important;
}

/* ── 3. DASHBOARD TIMER WIDGET — simpele witte kaart ─────────────────────────────── */
/* Hover-effect staat hieronder bij sectie A (regel ~1270), deze sectie is opruiming */

/* ── 4. QUICK ACTION CARDS — icon visibility ──────────────────── */
.quick-action-card .qa-icon {
  filter: brightness(1.1);
}

/* ── 5. ROLE VISIBILITY INDICATOR ────────────────────────────── */
#sidebarRoleBar {
  transition: background .3s, color .3s, border-color .3s;
}

/* ── 6. NAV ITEMS — rol-gebaseerde verberging (bulletproof) ────── */
/*
  PROBLEEM: style.css bevat '.nav-item { display: flex !important }' wat
            JS-style.display='none' overschrijft.
  OPLOSSING: Drie-lagen aanpak — één of meer van deze ZULLEN altijd winnen:
    Laag 1: attribuut-selector [style*="display: none"] — hogere specificiteit (0,2,0) vs (0,1,0)
    Laag 2: .sg-nav-hidden klasse — expliciete CSS klasse met !important
    Laag 3: .hidden klasse — al aanwezig in style.css met display:none!important
    Laag 4: .sg-admin-only — admin-only items standaard verborgen
*/

/* Laag 1: inline style override via attribuut-selector */
.nav-item[style*="display: none"],
.nav-item[style*="display:none"],
.sidebar-nav-section[style*="display: none"],
.sidebar-nav-section[style*="display:none"] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Laag 2: CSS klasse .sg-nav-hidden */
.sg-nav-hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Laag 4: Admin-only items ALTIJD verborgen tenzij JS ze toont voor admin */
/* Standaard verborgen via CSS — JS onthult ze voor admin/developer */
.sg-admin-only {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Admin/developer onthulling via JS (klasse wordt verwijderd) */
.sg-admin-visible {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
  margin: 1px 6px !important;
  padding: 11px 16px !important;
}

/* ── 7. BACK NAVIGATION BUTTON ────────────────────────────────── */
.sg-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  margin-bottom: 12px;
}
.sg-back-btn:hover {
  background: var(--bg);
  color: var(--primary);
  border-color: var(--primary);
}
.sg-back-btn i {
  font-size: .8rem;
}

/* ── 8. ACCOUNTS SECTION ──────────────────────────────────────── */
#sec-accounts .section-header {
  margin-bottom: 0 !important;
}
#sgAccountsContainer {
  padding-bottom: 24px;
}

/* ── 9. SUBSCRIPTION TIER CARDS — responsive ──────────────────── */
@media (max-width: 480px) {
  #sgAccountsContainer [style*="grid-template-columns:1fr 1fr"] {
    display: grid;
    grid-template-columns: 1fr !important;
  }
}

/* ── 10. SECTION TABS — active state ─────────────────────────── */
.sub-tab.active,
.tab-btn.active {
  background: var(--accent) !important;
  color: white !important;
  font-weight: 700 !important;
}
.sub-tab {
  cursor: pointer;
  transition: all .15s;
}

/* ── 11. OVERFLOW FIX for long text in sidebar ───────────────── */
.sidebar-role-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

/* ── 12. AFSPRAAK MODAL CLOSE — inline JS close button ──────── */
#afspraakModal .modal-close,
#newProjectModal .modal-close,
#projectDetailModal .modal-close,
#editProjectModal .modal-close {
  z-index: 20 !important;
}

/* ── 13. RICHTING PANEL (sg-navigate) close ──────────────────── */
#sgNavSheet .sg-nav-close,
#sgNavSheet button[onclick*="remove"] {
  z-index: 10 !important;
  pointer-events: all !important;
}

/* ── 14. TOAST POSITION fix ──────────────────────────────────── */
#sgToast {
  z-index: 99999 !important;
}

/* ── 15. ACCOUNTS ROLE TAG ────────────────────────────────────── */
.sg-role-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.sg-role-tag--og   { background: #fef2f2; color: #b91c1c; border: 1.5px solid #fca5a5; }
.sg-role-tag--zzp  { background: #f0fdf4; color: #15803d; border: 1.5px solid #86efac; }
.sg-role-tag--free { background: rgba(227,6,19,.08); color: #e30613; border: 1.5px solid rgba(227,6,19,.30); }

/* ── 16. CONNECTION LIMIT BADGE ───────────────────────────────── */
.sg-conn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: .72rem;
  font-weight: 700;
  color: #475569;
}
.sg-conn-badge.unlimited {
  background: #ecfdf5;
  border-color: #86efac;
  color: #15803d;
}

/* ── 17. SECTION HEADER BACK ARROW ──────────────────────────── */
.section-header .sg-back-btn {
  margin-bottom: 0 !important;
  margin-right: 8px;
}

/* ── 18. DARK CLOCK ICON FIX in quick-action grid ───────────── */
.quick-action-icon-wrap {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}

/* ── 19. WAGENPARK / GPS — ensure proper stacking ────────────── */
#sec-gpstracker,
#sec-wagenpark {
  z-index: 90;
}

/* ── 20. E-LEARNING CARD GRIDS ────────────────────────────────── */
.el-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
@media (max-width: 600px) {
  .el-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════
   v4.81 — Visuele verbeteringen o.b.v. screenshots
   1. Datumkiezer — lichte kleurenschema, betere contrast
   2. Planningspagina — waarschuwingskaart, projectkaarten, datumselector
   3. Wagenparkpagina — voertuigkaarten, actieknoppen, rooster
   4. Beschikbaarheid modal — spacing, tabs, typografie
   5. Topbar — verbeterde icon-spacing
   ════════════════════════════════════════════════════════════════ */

/* ── 1. DATUMKIEZER — geforceerd licht thema + rode accentkleur ── */
/* Voorkomt donkere Android-achtige pickers die onleesbaar zijn.
   accent-color zorgt dat de native klok (Android/Chrome tijdkiezer)
   rood wordt i.p.v. cyaan/blauw. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  color-scheme: light !important;
  accent-color: #e30613 !important;
  background: #ffffff !important;
  color: #111827 !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: .9rem !important;
  font-family: inherit !important;
  outline: none;
  transition: border-color .15s;
}
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus {
  border-color: #e30613 !important;
  box-shadow: 0 0 0 3px rgba(227,6,19,.12) !important;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0) !important;
  opacity: 0.6;
  cursor: pointer;
  color-scheme: light !important;
  width: 18px;
  height: 18px;
}
/* color-scheme ALLEEN op datum/tijdpickers — NIET op modals of form-groups.
   Anders worden alle tekst-inputs in donkere modals wit (zichtbaar als lichte
   achtergrond in een donker dialoogvenster). */
/* Intentioneel leeg gelaten — was: color-scheme: light op .modal-body */

/* ── 2. PLANNING — waarschuwingskaart ───────────────────────── */
/* Minder druk, duidelijker hiërarchie */
#planAlertsContainer .alert-banner,
.plan-alert-banner,
[id*="planAlert"] {
  border-radius: 12px !important;
  border-left-width: 4px !important;
  padding: 12px 14px !important;
}

/* Planning date strip — betere leesbaarheid */
.tp-week-strip .tp-day-btn,
.plan-day-btn,
.week-strip-day {
  min-width: 42px;
  padding: 8px 6px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: .78rem !important;
}
.tp-week-strip .tp-day-btn.active,
.plan-day-btn.active,
.week-strip-day.active {
  background: var(--wl-primary,#e30613) !important;
  color: white !important;
  box-shadow: 0 3px 10px rgba(227,6,19,.35) !important;
}
/* Weekend dag markering */
.tp-week-strip .tp-day-btn.weekend,
.plan-day-btn.weekend {
  color: #dc2626 !important;
}

/* Planning filter chips */
.plan-filter-chip,
.tp-filter-btn {
  border-radius: 20px !important;
  padding: 5px 12px !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  transition: all .15s !important;
}
.plan-filter-chip.active,
.tp-filter-btn.active {
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}

/* Project items in planning — betere kaart-weergave */
.tp-project-card,
.plan-project-card {
  border-radius: 12px !important;
  padding: 12px 14px !important;
  border: 1.5px solid #e2e8f0 !important;
  transition: box-shadow .15s !important;
}
.tp-project-card:hover,
.plan-project-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
}

/* ── 3. WAGENPARK — cleaner voertuigkaarten ─────────────────── */
/* Verwijder herhaalde status-filter rij (visueel) voor elke kaart */
#wagenparkList .card {
  border-radius: 14px !important;
  padding: 16px !important;
  margin-bottom: 10px !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
  transition: box-shadow .2s !important;
}
#wagenparkList .card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
}

/* Voertuig kenteken — beter leesbaar */
#wagenparkList strong[style*="font-size:1rem"],
#wagenparkList strong[style*="font-size: 1rem"] {
  font-size: 1.1rem !important;
  letter-spacing: 1px !important;
  color: #0f172a !important;
}

/* Wagenpark metadata grid — meer witruimte */
#wagenparkList [style*="grid-template-columns:repeat(auto-fill,minmax(100px"] {
  gap: 8px !important;
}
#wagenparkList [style*="padding:6px 8px"] {
  padding: 8px 10px !important;
  border-radius: 10px !important;
}

/* Actieknoppen — kleiner en rechts gegroepeerd */
#wagenparkList .btn-xs {
  padding: 6px 8px !important;
  border-radius: 8px !important;
  font-size: .75rem !important;
}

/* Status-wisselbalk onder voertuigkaart — compacter */
#wagenparkList [style*="border-top:1px solid var(--border)"] {
  padding-top: 8px !important;
  margin-top: 8px !important;
  gap: 6px !important;
}

/* Wagenparkstats boven de lijst */
#wagenparkStats > div {
  border-radius: 12px !important;
  padding: 12px !important;
  border: 1.5px solid #e2e8f0 !important;
}

/* Inzetrooster — beter leesbare tabel */
.wagenpark-rooster,
#wagenparkRooster,
[id*="rooster"] table {
  font-size: .78rem !important;
}

/* ── 4. BESCHIKBAARHEID MODAL — spacing & tabs ──────────────── */
#zelfPlannenModal .modal {
  max-height: calc(100vh - 60px) !important;
}
#zelfPlannenModal .modal-body {
  padding: 16px !important;
}
/* Profielkaart */
#zpProfielKaart {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe) !important;
  border: 1.5px solid #bae6fd !important;
  border-radius: 14px !important;
  padding: 14px !important;
}
/* Tab-knoppen */
#zelfPlannenModal .tab-btn {
  flex: 1;
  justify-content: center !important;
  font-size: .82rem !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
}
/* Beschikbaarheids-weekdag knoppen */
#zpWeekdagenGrid button {
  flex: 1;
  min-width: 36px;
  text-align: center;
}
/* Project-kaarten in modal */
#zpIngeplandList > div,
#zpTab-ingepland > div > div {
  border-radius: 12px !important;
  padding: 12px 14px !important;
}

/* ── 5. TOPBAR — betere icon-spacing ────────────────────────── */
.topbar-actions {
  gap: 6px !important;
}
.topbar-icon-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── 6. ZELF-PLANNEN MODAL — ingepland kaarten ──────────────── */
#zpIngeplandList .ingepland-project-card,
#zpIngeplandList [style*="border-radius:10px"] {
  border-radius: 12px !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  padding: 12px 14px !important;
}

/* ── Status badges — licht én donker leesbaar ─────────────────── */
.status-badge {
  font-size: .72rem !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  letter-spacing: .02em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  border: 1.5px solid transparent !important;
}
/* Licht-modus kleuren */
.status-badge.green  { background: #dcfce7 !important; color: #14532d !important; border-color: #86efac !important; }
.status-badge.blue   { background: rgba(227,6,19,.1) !important; color: #9b0000 !important; border-color: rgba(227,6,19,.3) !important; }
.status-badge.orange { background: #fef3c7 !important; color: #92400e !important; border-color: #fcd34d !important; }
.status-badge.red    { background: #fee2e2 !important; color: #991b1b !important; border-color: #fca5a5 !important; }
.status-badge.gray   { background: #f1f5f9 !important; color: #334155 !important; border-color: #cbd5e1 !important; }
.status-badge.purple { background: #f3e8ff !important; color: #5b21b6 !important; border-color: #c4b5fd !important; }
/* Donkere modus — volledig leesbaar */
.sg-theme-dark .status-badge.green  { background: rgba(21,128,61,.22)  !important; color: #86efac !important; border-color: rgba(134,239,172,.35) !important; }
.sg-theme-dark .status-badge.blue   { background: rgba(37,99,235,.2)   !important; color: #93c5fd !important; border-color: rgba(147,197,253,.35) !important; }
.sg-theme-dark .status-badge.orange { background: rgba(217,119,6,.22)  !important; color: #fcd34d !important; border-color: rgba(252,211,77,.35)  !important; }
.sg-theme-dark .status-badge.red    { background: rgba(185,28,28,.22)  !important; color: #fca5a5 !important; border-color: rgba(252,165,165,.35) !important; }
.sg-theme-dark .status-badge.gray   { background: rgba(71,85,105,.25)  !important; color: #cbd5e1 !important; border-color: rgba(203,213,225,.25) !important; }
.sg-theme-dark .status-badge.purple { background: rgba(124,58,237,.22) !important; color: #c4b5fd !important; border-color: rgba(196,181,253,.35) !important; }
/* Kaartweergave status pills — ook beter leesbaar */
.pcv2-status-pill { font-size: .67rem !important; font-weight: 800 !important; padding: 3px 10px !important; border-radius: 20px !important; white-space: nowrap !important; border: 1.5px solid currentColor !important; opacity: 1 !important; }
.sg-theme-dark .pcv2-status-pill { opacity: 1 !important; }

/* ── 7. FORM GROUPS — consistente spacing ───────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.form-group label {
  font-size: .78rem !important;
  font-weight: 700 !important;
  color: #374151 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
}
/* Light-modus: witte achtergrond voor inputs */
.form-group input,
.form-group select,
.form-group textarea {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: .88rem !important;
  background: #fff !important;
  color: #111827 !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #e30613 !important;
  box-shadow: 0 0 0 3px rgba(227,6,19,.12) !important;
  outline: none !important;
}
/* Dark-modus: inputs passen zich aan het thema aan
   NB: het thema staat op <html> als .sg-theme-dark */
html.sg-theme-dark .form-group input:not([type="date"]):not([type="time"]):not([type="datetime-local"]):not([type="month"]):not([type="checkbox"]):not([type="radio"]),
html.sg-theme-dark .form-group select,
html.sg-theme-dark .form-group textarea,
html.sg-theme-dark .modal-body input:not([type="date"]):not([type="time"]):not([type="datetime-local"]):not([type="month"]):not([type="checkbox"]):not([type="radio"]),
html.sg-theme-dark .modal-body select,
html.sg-theme-dark .modal-body textarea {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.12) !important;
}
html.sg-theme-dark .form-group input:focus,
html.sg-theme-dark .form-group select:focus,
html.sg-theme-dark .form-group textarea:focus,
html.sg-theme-dark .modal-body input:focus,
html.sg-theme-dark .modal-body select:focus,
html.sg-theme-dark .modal-body textarea:focus {
  border-color: #e30613 !important;
  box-shadow: 0 0 0 3px rgba(227,6,19,.18) !important;
}
html.sg-theme-dark .form-group label {
  color: #94a3b8 !important;
}
html.sg-theme-dark .modal-body label {
  color: #94a3b8 !important;
}

/* ════════════════════════════════════════════════════════════════
   POST BOARD — Dashboard widget v1.0
   ════════════════════════════════════════════════════════════════ */

/* Hover effect op post-rijen */
.pb-rij:hover { background: #f8fafc !important; }

/* PostBoard widget container */
#pbWidget {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
}

/* Volledig-scherm modal scrollable lijst */
#pbVolledigLijst {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Dark-mode aanpassingen PostBoard */
html.sg-theme-dark #pbWidget {
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

/* Categorie chip hover */
#pbFullCatBar button:hover {
  border-color: #f59e0b !important;
  color: #92400e !important;
  background: #fef3c7 !important;
}

/* ════════════════════════════════════════════════════════════════
   JURIDISCH PLATFORM — Interne juridische omgeving v1.0
   ════════════════════════════════════════════════════════════════ */

/* Sectie-container */
#sec-juridisch {
  padding-bottom: 40px;
}

/* Tab-balk scrolbaar op mobiel */
#jurTabs {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#jurTabs::-webkit-scrollbar { display: none; }

/* Tab-knop hover */
#jurTabs button:hover {
  filter: brightness(0.95);
}

/* AV artikelen — hover highlight */
.jur-artikel-rij:hover {
  background: #f0f9ff !important;
  cursor: pointer;
}

/* Juridisch content container */
#sec-juridisch-content {
  padding: 0;
}

/* Link lijst — hover */
#jurContent a:hover {
  text-decoration: underline !important;
  opacity: .85;
}

/* Notitie kaarten */
.jur-notitie-kaart {
  transition: box-shadow .15s;
}
.jur-notitie-kaart:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
}

/* Dark mode aanpassingen Juridisch */
html.sg-theme-dark #sec-juridisch-content {
  color: #e2e8f0;
}

/* ════════════════════════════════════════════════════════════════
   ZZP PRO NETWERK & MARKTPLAATS — aanvullende fixes
   ════════════════════════════════════════════════════════════════ */

/* ZZP Pro badge in netwerk cards */
.zzp-pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 5px;
  font-size: .6rem;
  font-weight: 800;
  padding: 2px 6px;
  letter-spacing: .03em;
}

/* Credits badge op nav */
.sg-credits-badge {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  border-radius: 10px;
  font-size: .6rem;
  font-weight: 800;
  padding: 2px 7px;
  margin-left: 4px;
}

/* QR modal schaduwen */
#sgZzpProQRModal,
#sgZzpScanModal {
  backdrop-filter: blur(4px) !important;
}

/* ZZP chat bubble fixes */
.zzp-chat-bubble-out {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: white !important;
  border-radius: 16px 16px 4px 16px !important;
}
.zzp-chat-bubble-in {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-radius: 16px 16px 16px 4px !important;
}

/* Marktplaats tab aandacht-indicator */
.markt-tab-nieuw {
  position: relative;
}
.markt-tab-nieuw::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e30613;
  border: 1.5px solid white;
}

/* ── 8. SECTIE HEADER — consistentere stijl ─────────────────── */
.section-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: -.3px !important;
  color: #0f172a !important;
}

/* ── 9. CARD — basis padding consistent ─────────────────────── */
.card {
  border-radius: 14px !important;
  border: 1.5px solid var(--sg-border, #e2e8f0) !important;
}
html.sg-theme-light .card {
  background:   var(--sg-card, #ffffff) !important;
  border-color: var(--sg-border, #e2e2e2) !important;
  color:        var(--sg-text, #111111) !important;
}
html.sg-theme-dark .card {
  background:   var(--sg-card, #1a1a1a) !important;
  border-color: var(--sg-border, rgba(255,255,255,.1)) !important;
  color:        var(--sg-text, #f5f5f5) !important;
}

/* ── 10. BOTTOM NAV — 48px definitief (v9.14.1) ─────────────── */
/* Hoogte en overflow worden gestuurd door #sgBottomNavFix in index.html.
   Hier alleen de thema/kleur/transitie-regels die NIET conflicteren. */
.bottom-nav {
  background: white;
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}

/* ── NOTITIE-knop in bottom-nav (vervangt zwevende FAB) ── */
#bottomNavNotitieBtn i {
  color: #8b5cf6;
  transition: color .15s, transform .15s;
}
#bottomNavNotitieBtn:active {
  transform: scale(.90);
}
html.sg-theme-dark #bottomNavNotitieBtn i {
  color: #a78bfa !important;
}
html.sg-theme-dark #bottomNavNotitieBtn span {
  color: #94a3b8 !important;
}
html.sg-theme-dark .bottom-nav {
  background: #111827 !important;
  border-top-color: rgba(255,255,255,.07) !important;
}
html.sg-theme-dark .bottom-nav-btn {
  color: #94a3b8 !important;
}
html.sg-theme-dark .bottom-nav-btn span {
  color: #94a3b8 !important;
}
html.sg-theme-dark .bottom-nav-btn.active {
  color: #e30613 !important;
}
html.sg-theme-dark .bottom-nav-btn.active span {
  color: #e30613 !important;
}
.bottom-nav-btn {
  position: relative;
  transition: color .15s, transform .12s;
}
.bottom-nav-btn i {
  transition: transform .15s;
}
.bottom-nav-btn.active i {
  transform: scale(1.06);
}
.bottom-nav-btn:active { transform: scale(.90); }

/* ════════════════════════════════════════════════════════════════
   v4.83 — Chat universeel + rol-navigatie verbeteringen
   ════════════════════════════════════════════════════════════════ */

/* ── 21. TEAM CHAT NAV ITEM — accent kleur in sidebar ─────────── */
.nav-item[data-section="team"] {
  position: relative;
}
.nav-item[data-section="team"] i {
  color: #22c55e !important;
}
.nav-item[data-section="team"].active {
  background: rgba(34, 197, 94, 0.12) !important;
  border-left: 3px solid #22c55e !important;
}
.nav-item[data-section="team"].active i {
  color: #16a34a !important;
}

/* ── 22. BOTTOM NAV CHAT BUTTON — groene accent ────────────────── */
.bottom-nav-btn[data-section="team"] i {
  color: #22c55e;
}
.bottom-nav-btn[data-section="team"].active {
  color: #16a34a !important;
}
.bottom-nav-btn[data-section="team"].active i {
  color: #16a34a !important;
}

/* ── 23+24. SIDEBAR: beheerd door style.css — geen overrides hier ── */

/* ── 25. QUICK ACTION CARD — chat card accent ────────────────────── */
.quick-action-card[data-action*="Chat"],
.quick-action-card[data-action*="team"] {
  border-color: rgba(34, 197, 94, 0.2) !important;
}

/* ── 26. ROLE INDICATOR BAR — betere weergave voor alle rollen ── */
#sidebarRoleBar {
  border-radius: 10px !important;
  padding: 8px 12px !important;
  margin: 8px 12px !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
}

/* ── 27. NAV BADGE — mooier afgerond ─────────────────────────────── */
.nav-badge {
  font-size: .62rem !important;
  font-weight: 800 !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 8px !important;
  padding: 0 4px !important;
}
.nav-badge.green {
  background: #22c55e !important;
  color: white !important;
}

/* ════════════════════════════════════════════════════════════════
   v4.90 — Performance & UI verbeteringen
   1. InfoBot badge — nooit geclipped
   2. Alert cards — betere typografie
   3. Splash progress bar
   4. Will-change hints voor animaties
   ════════════════════════════════════════════════════════════════ */

/* ── 28. INFOBOT BADGE — zeker zichtbaar, nooit geclipped ───────── */
#sgInfoBotBadge {
  /* Geeft de badge ruimte buiten de knop */
  position: absolute !important;
  top: -7px !important;
  right: -7px !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  overflow: visible !important;
}
/* Wrapper div — verberg NOOIT overflow */
#sgInfoBotTopbarBtn {
  overflow: visible !important;
}

/* ── 29. ALERT CARDS — verbeterde leesbaarheid ──────────────────── */
.alert-item strong {
  font-size: .83rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}
.alert-item .btn-xs {
  box-shadow: 0 2px 6px rgba(0,0,0,.2) !important;
  font-weight: 700 !important;
}
.alert-item.red .btn-xs:active,
.alert-item.orange .btn-xs:active,
.alert-item.green .btn-xs:active {
  opacity: .8 !important;
  transform: scale(.96) !important;
}

/* ── 30. PERFORMANCE — GPU acceleration hints ───────────────────── */
/* Voorkomt layout-thrashing door compositing te activeren op animerende elementen */
.splash-loader div,
#sgLoadBar {
  will-change: transform, width;
}
.card,
.nav-item,
.modal {
  transform: translateZ(0); /* GPU layer */
}

/* ── 31. SPLASH PROGRESS BAR ────────────────────────────────────── */
#sgLoadProgress {
  width: 200px;
  margin: 0 auto;
}
#sgLoadBar {
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

/* ── 32. TOPBAR-RIGHT — overflow altijd visible ─────────────────── */
.topbar-right {
  overflow: visible !important;
}

/* ── 33. TOPBAR ICOON-KNOPPEN v16.9.177 ────────────────────────── */
/* Matcht screenshot 1: QR (goud), Bellen (rood), Chat (grijs), Bot (grijs+badge), Hitte */
.topbar-icon-btn {
  position: relative;
  padding: 0 !important;
  background: none !important;
  border: none;
  border-radius: 10px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .12s, opacity .12s;
}
.topbar-icon-btn:active { transform: scale(.9); opacity: .75; }

.topbar-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
  transition: background .15s;
}

/* QR — semi-transparant wit op donkere topbar (FIX134: NOOIT volledig wit) */
.topbar-icon-qr {
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255,255,255,.28) !important;
}
.topbar-icon-btn:hover .topbar-icon-qr { background: rgba(255,255,255,.24) !important; }

/* Bellen — rood — donkere topbar */
.topbar-icon-bel {
  background: rgba(227,6,19,.2);
  color: #f87171;
  border: 1.5px solid rgba(227,6,19,.35);
}
.topbar-icon-btn:hover .topbar-icon-bel { background: rgba(227,6,19,.3); }

/* Chat — blauw — donkere topbar */
.topbar-icon-chat {
  background: rgba(99,102,241,.2);
  color: #a5b4fc;
  border: 1.5px solid rgba(99,102,241,.35);
}
.topbar-icon-btn:hover .topbar-icon-chat { background: rgba(99,102,241,.3); }

/* Bot — paars — donkere topbar */
.topbar-icon-bot {
  background: rgba(139,92,246,.2);
  color: #c4b5fd;
  border: 1.5px solid rgba(139,92,246,.35);
}
.topbar-icon-btn:hover .topbar-icon-bot { background: rgba(139,92,246,.3); }

/* Hitte — oranje */
.topbar-icon-hitte {
  background: linear-gradient(135deg, #f9731622, #f9731633);
  color: #ea580c;
  border: 1.5px solid #f9731644;
}

/* Rode badge (chat + bot teller) */
.topbar-red-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #e30613;
  color: #fff;
  font-size: .55rem;
  font-weight: 900;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  line-height: 1;
  pointer-events: none;
}

/* Dark mode — alle topbar icoon-wraps goed zichtbaar */
html.sg-theme-dark .topbar-icon-qr,
html.sg-theme-dark #topbarQRBtn .topbar-icon-qr,
html.sg-theme-dark #topbarQRIconWrap   { background: rgba(255,255,255,.14) !important; background-color: rgba(255,255,255,.14) !important; color: #ffffff !important; border-color: rgba(255,255,255,.28) !important; }
html.sg-theme-dark .topbar-icon-bel  { background: rgba(227,6,19,.2)    !important; color: #f87171 !important; border-color: rgba(227,6,19,.35)   !important; }
html.sg-theme-dark .topbar-icon-chat { background: rgba(99,102,241,.2)   !important; color: #a5b4fc !important; border-color: rgba(99,102,241,.35)  !important; }
html.sg-theme-dark .topbar-icon-bot  { background: rgba(139,92,246,.2)   !important; color: #c4b5fd !important; border-color: rgba(139,92,246,.35)  !important; }
html.sg-theme-dark .topbar-red-badge { border-color: #1e293b; }

/* Responsief: op heel klein scherm icoon-tekst weglaten */
@media (max-width: 360px) {
  .topbar-icon-wrap { width: 30px; height: 30px; font-size: .8rem; }
}

/* ── 28. BOTTOM NAV BADGE — visible position ────────────────────── */
.bottom-nav-btn .badge {
  position: absolute;
  top: 2px;
  right: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  font-size: .6rem;
  font-weight: 800;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

/* ── 29. SECTIE KNOPPEN — consistente stijl voor rol-specifieke weergave ─ */
.sidebar-nav {
  padding-bottom: 8px !important;
}

/* ── 30. TEAM CHAT EMPTY STATE ───────────────────────────────────── */
#tcConvList .tc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #94a3b8;
}
#tcConvList .tc-empty i {
  font-size: 3rem;
  margin-bottom: 12px;
  color: #22c55e;
  opacity: 0.5;
}

/* ════════════════════════════════════════════════════════════════
   v4.84 — Uitnodiging modal verbeteringen
   ════════════════════════════════════════════════════════════════ */

/* ── 31. INVITE ROLE GRID CARDS ──────────────────────────────────── */
#inviteRoleGrid [data-role] {
  user-select: none;
}
#inviteRoleGrid [data-role].selected {
  transform: scale(1.01);
}
#inviteRoleGrid [data-role]:active {
  transform: scale(0.97);
}

/* Invite modal — grotere modal op desktop */
#inviteModal .modal.large {
  max-width: 560px;
}

/* ════════════════════════════════════════════════════════════════
   v4.85 — Planning Board Mode Tabs + Thema-toggle
   ════════════════════════════════════════════════════════════════ */

/* ── Planning mode tabs balk (Team Planning / Touchboard) ─────── */
/* ══════════════════════════════════════════════════════════════
   PLANNING MODE TABS — v2.0
   Mooie card-knoppen met kleur per tab, active indicator,
   hover-animatie. Werkt in licht én donker thema.
══════════════════════════════════════════════════════════════ */

/* ── Balk container ── */
/* v4.0 — tab-balk wordt door JS naar body verplaatst (position:fixed)
   bij Touchboard/A3 modus zodat hij NOOIT achter visibility:hidden valt */
:root { --plan-tabs-h: 62px; }

.planning-mode-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: #0f172a;
  border-bottom: 2px solid #1e2d45;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  align-items: stretch;
  /* Normale flow positie (team-modus) */
  position: relative;
  z-index: 10001;
}
.planning-mode-tabs::-webkit-scrollbar { display: none; }

/* ── Touchboard: paneel begint ONDER de tab-balk ── */
/* tbInlineStyle zet top:var(--plan-tabs-h,62px) — CSS versterkt dit */
body.tbib-board-active #planTouchboardWrap {
  top: var(--plan-tabs-h, 62px) !important;
  height: calc(100svh - var(--plan-tabs-h, 62px)) !important;
}

/* ── A3 Weekplanning: paneel begint ONDER de tab-balk ── */
#sga3PanelContainer {
  top: var(--plan-tabs-h, 62px) !important;
  height: calc(100svh - var(--plan-tabs-h, 62px)) !important;
}

/* ── Tab-balk in fixed modus (JS verplaatst naar <body> bij board/a3) ── */
/* Donker thema (default) */
body > #planningModeTabs {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 10001 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: #0f172a !important;
  border-bottom: 2px solid #1e2d45 !important;
  /* overflow:visible zodat sluit-knop niet wordt afgesneden */
  overflow: visible !important;
}

/* ── Swipe HUD: standaard verborgen, ALLEEN zichtbaar als planning actief ── */
/* Root cause: _injectSwipeHud() maakt de HUD aan bij init(), vóór login.
   De HUD staat nu standaard op display:none (fix in sg-planboard-lock.js).
   Dit CSS-vangnet voorkomt dat een toekomstige JS-wijziging de HUD toch
   terug toont op het loginscherm of buiten de planning-sectie. */
#sgPbSwipeHud {
  display: none !important;
}
/* Alleen tonen als planning-sectie zichtbaar EN in team-modus
   (JS overschrijft display:none met display:flex via inline style wanneer passend) */
body.sg-planning-team-actief #sgPbSwipeHud {
  display: flex !important;
}

/* Lock-badge: zelfde logica — verborgen buiten planning */
#sgPbLockBadge {
  /* Lock-badge mag altijd zichtbaar zijn (zit op vaste positie rechtsboven),
     maar moet WEL verborgen zijn op het loginscherm */
}
/* Loginscherm-vangnet: als login-card zichtbaar is, badge verbergen */
body:has(.login-card:not([style*="display: none"])) #sgPbLockBadge,
body:has(.login-card:not([style*="display:none"])) #sgPbLockBadge {
  display: none !important;
}

/* ── Sluit-knop (✕) bij board/a3 modus ── */
/* Aparte position:fixed div — NIET in de scrollbare tab-balk.
   Hangt rechts naast de balk, zelfde hoogte als --plan-tabs-h.
   JS zet hem op body via _voegSluitKnopToe() / verwijdert bij team. */
#sgTabsSluitKnop {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  height: var(--plan-tabs-h, 62px) !important;
  width: 50px !important;
  z-index: 10002 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-left: 1.5px solid rgba(239,68,68,.3) !important;
  font-size: .95rem !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
  pointer-events: auto !important;
}
#sgTabsSluitKnop:active {
  transform: scale(.92) !important;
}
/* Licht thema — balk op body-niveau */
html.sg-theme-light body > #planningModeTabs {
  background: #f1f5f9 !important;
  border-bottom: 2px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}

/* Lichte modus balk */
.sg-theme-light .planning-mode-tabs {
  background: #f1f5f9 !important;
  border-bottom: 2px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}

/* ── Tab knoppen — card-stijl ── */
.plan-mode-tab {
  flex: 1;
  min-width: 72px;
  padding: 9px 10px 8px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-size: .71rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s,
              transform .12s, box-shadow .18s;
  font-family: inherit;
  overflow: hidden;
  position: relative;
  letter-spacing: .01em;
}
.plan-mode-tab:active { transform: scale(.96); }

/* Icoon iets groter */
.plan-mode-tab i {
  font-size: 1rem;
  flex-shrink: 0;
  transition: color .18s;
}

/* ── ACTIEVE tab — rode gradient card ── */
.plan-mode-tab--active {
  background: linear-gradient(135deg, #e30613, #9b0000) !important;
  color: white !important;
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: 0 4px 14px rgba(227,6,19,.45), 0 1px 3px rgba(0,0,0,.3) !important;
  transform: translateY(-1px);
}
.plan-mode-tab--active i {
  color: white !important;
}
.plan-mode-tab--active:hover {
  background: linear-gradient(135deg, #c5000f, #800000) !important;
  box-shadow: 0 6px 18px rgba(227,6,19,.5) !important;
}

/* Actieve tab — kleine witte lijn-indicator onderkant */
.plan-mode-tab--active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20%;
  width: 60%;
  height: 2px;
  background: rgba(255,255,255,.6);
  border-radius: 2px 2px 0 0;
}

/* ── INACTIEVE tabs — donker thema ── */
.plan-mode-tab--inactive {
  background: rgba(255,255,255,.05);
  color: #94a3b8;
  border-color: rgba(255,255,255,.08);
}
.plan-mode-tab--inactive i { color: #64748b; }
.plan-mode-tab--inactive:hover {
  background: rgba(255,255,255,.1);
  color: #e2e8f0;
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.plan-mode-tab--inactive:hover i { color: #cbd5e1; }

/* ── INACTIEVE tabs — licht thema ── */
.sg-theme-light .plan-mode-tab--inactive {
  background: #ffffff !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}
.sg-theme-light .plan-mode-tab--inactive i { color: #94a3b8 !important; }
.sg-theme-light .plan-mode-tab--inactive:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.09) !important;
}
.sg-theme-light .plan-mode-tab--inactive:hover i { color: #475569 !important; }

/* ── Per-tab kleuraccenten bij hover (donker) ── */
/* Planning tab — rood */
#planTabTeam.plan-mode-tab--inactive:hover  { border-color: rgba(227,6,19,.4) !important; }
#planTabTeam.plan-mode-tab--inactive:hover i { color: #e30613 !important; }

/* Touchboard tab — blauw */
#planTabBoard.plan-mode-tab--inactive:hover  { border-color: rgba(37,99,235,.4) !important; }
#planTabBoard.plan-mode-tab--inactive:hover i { color: #3b82f6 !important; }

/* Weekplanning tab — groen */
#planTabA3.plan-mode-tab--inactive:hover  { border-color: rgba(16,185,129,.4) !important; }
#planTabA3.plan-mode-tab--inactive:hover i { color: #10b981 !important; }

/* Extern scherm tab — paars */
#planTabExtern.plan-mode-tab--inactive:hover  { border-color: rgba(124,58,237,.4) !important; }
#planTabExtern.plan-mode-tab--inactive:hover i { color: #8b5cf6 !important; }

/* Licht thema hover-kleuren */
.sg-theme-light #planTabTeam.plan-mode-tab--inactive:hover   { border-color: #fca5a5 !important; }
.sg-theme-light #planTabTeam.plan-mode-tab--inactive:hover i  { color: #e30613 !important; }
.sg-theme-light #planTabBoard.plan-mode-tab--inactive:hover   { border-color: #93c5fd !important; }
.sg-theme-light #planTabBoard.plan-mode-tab--inactive:hover i  { color: #2563eb !important; }
.sg-theme-light #planTabA3.plan-mode-tab--inactive:hover      { border-color: #6ee7b7 !important; }
.sg-theme-light #planTabA3.plan-mode-tab--inactive:hover i     { color: #059669 !important; }
.sg-theme-light #planTabExtern.plan-mode-tab--inactive:hover   { border-color: #c4b5fd !important; }
.sg-theme-light #planTabExtern.plan-mode-tab--inactive:hover i { color: #7c3aed !important; }

/* Actieve tab licht thema — zelfde rode gradient */
.sg-theme-light .plan-mode-tab--active {
  background: linear-gradient(135deg, #e30613, #9b0000) !important;
  color: white !important;
  border-color: rgba(227,6,19,.3) !important;
  box-shadow: 0 4px 14px rgba(227,6,19,.3) !important;
}

/* ── Tab badge (optioneel, toekomstig gebruik) ── */
.plan-mode-tab-badge {
  background: rgba(255,255,255,.25);
  color: white;
  font-size: .56rem;
  padding: 1px 5px;
  border-radius: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.4;
}
.plan-mode-tab--inactive .plan-mode-tab-badge {
  background: #e30613;
  color: white;
}

/* ── Thema-toggle knop in planning balk ───────────────────────── */
.plan-mode-theme-btn {
  flex-shrink: 0;
  width: 44px;
  border: none;
  background: rgba(165,180,252,.12);
  color: #a5b4fc;
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, transform .15s;
  border-left: 1px solid rgba(255,255,255,.08);
  font-family: inherit;
}
.plan-mode-theme-btn:hover {
  background: rgba(165,180,252,.22);
  color: #c7d2fe;
}
.plan-mode-theme-btn:active {
  transform: scale(.9);
  background: rgba(165,180,252,.32);
}

/* Lichte modus: thema knop wordt goudgeel */
.sg-theme-light .plan-mode-theme-btn {
  background: rgba(245,158,11,.1) !important;
  color: #d97706 !important;
  border-left-color: #e2e8f0 !important;
}
.sg-theme-light .plan-mode-theme-btn:hover {
  background: rgba(245,158,11,.18) !important;
  color: #b45309 !important;
}

/* ── Touchboard inline: thema-aware overrides ─────────────────── */

/* Subheader balk */
.sg-theme-light #tbIB_subheader {
  background: #ffffff !important;
  border-bottom-color: #e2e8f0 !important;
}
.sg-theme-light .tbib-date-nav {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}
.sg-theme-light #tbIB_dayName { color: #64748b !important; }
.sg-theme-light #tbIB_dateStr { color: #0f172a !important; }
.sg-theme-light .tbib-save-btn {
  background: #f8fafc !important;
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}
.sg-theme-light .tbib-nav-btn {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}
.sg-theme-light .tbib-nav-btn:active { background: #e2e8f0 !important; }
.sg-theme-light .tbib-close-btn {
  background: rgba(239,68,68,.08) !important;
  border-color: rgba(239,68,68,.2) !important;
  color: #dc2626 !important;
}

/* Touchboard scroll- en body-gebied */
.sg-theme-light #tbIB_fullscreen {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
.sg-theme-light #tbIB_body,
.sg-theme-light #tbIB_scroll,
.sg-theme-light #planTouchboardWrap {
  background: #f1f5f9 !important;
}

/* Tijdblokken en rijen */
.sg-theme-light .tbib-row,
.sg-theme-light [class*="tbib-time"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
.sg-theme-light .tbib-time-label {
  color: var(--wl-primary,#e30613) !important;
  font-weight: 800 !important;
}
.sg-theme-light .tbib-cell {
  background: #f8fafc !important;
  border-color: #e8ecf0 !important;
}
.sg-theme-light .tbib-cell:hover { background: rgba(227,6,19,.06) !important; }
.sg-theme-light .tbib-chip {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

/* Bank (onderbalk met items) */
.sg-theme-light #tbIB_bank {
  background: #ffffff !important;
  border-top-color: #e30613 !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08) !important;
}

/* Tab balk onderaan Touchboard */
.sg-theme-light #tbIB_bankTabs {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}
.sg-theme-light .tbib-tab { color: #94a3b8 !important; }
.sg-theme-light .tbib-tab:active { background: rgba(0,0,0,.04) !important; }
.sg-theme-light .tbib-tab.active.mw { color: var(--wl-primary,#e30613) !important; }
.sg-theme-light .tbib-tab.active.vt { color: #d97706 !important; }
.sg-theme-light .tbib-tab.active.mc { color: #e30613 !important; }
.sg-theme-light .tbib-tab.active.pr { color: #16a34a !important; }
.sg-theme-light .tbib-tab.active.info { color: #475569 !important; }
.sg-theme-light .tbib-tab-ct {
  background: #e2e8f0 !important;
  color: #475569 !important;
}
.sg-theme-light .tbib-tab.active.mw .tbib-tab-ct { background: var(--wl-primary,#e30613) !important; color: white !important; }
.sg-theme-light .tbib-tab.active.vt .tbib-tab-ct { background: #f59e0b !important; color: white !important; }
.sg-theme-light .tbib-tab.active.mc .tbib-tab-ct { background: #e30613 !important; color: white !important; }
.sg-theme-light .tbib-tab.active.pr .tbib-tab-ct { background: #22c55e !important; color: white !important; }

/* Scrollbar licht */
.sg-theme-light #tbIB_scroll::-webkit-scrollbar-thumb { background: #cbd5e1 !important; }
.sg-theme-light #tbIB_scroll::-webkit-scrollbar { background: #f1f5f9 !important; }

/* Ploeg-rij kaarten licht */
.sg-theme-light .tbib-ploeg-row,
.sg-theme-light [class*="tbib-ploeg"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
.sg-theme-light .tbib-ploeg-hdr {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}

/* ════════════════════════════════════════════════════════════════
   v5.00 — SG-kleur fixes: timer, planningsbalk, invoerbalken,
           dag/nacht-knop
   ════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   A. UREN-TIMER WIDGET — simpele kaart stijl
   ────────────────────────────────────────────────────────────── */
/* Reisbalk: rood (reizen = semantisch) */
#dashTimerBarTravel { background: #e30613 !important; }

/* Werkbalk: groen (werk = semantisch) */
#dashTimerBarWork   { background: #16a34a !important; }

/* Start-knop: rood */
#dashTimerStartBtn {
  background: #e30613 !important;
  color: white !important;
  border: none !important;
  box-shadow: none !important;
}
#dashTimerStartBtn:hover { background: #b50010 !important; }
#dashTimerStartBtn.running {
  background: rgba(227,6,19,.35) !important;
  box-shadow: 0 4px 14px rgba(227,6,19,.35) !important;
  border: 1.5px solid rgba(227,6,19,.6) !important;
}

/* Actieve dot — groen */
#dashTimerDot.active {
  background: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.2) !important;
}

/* Stat-chips — lichtgrijs */
.timer-stat-chip {
  background: #f5f5f5 !important;
  border-color: #e8e8e8 !important;
  transition: background .15s !important;
}
.timer-stat-chip:hover { background: #eeeeee !important; }

/* ──────────────────────────────────────────────────────────────
   B. PLANNINGSBALK — planning-mode-tabs (in planning board)
   ────────────────────────────────────────────────────────────── */
.planning-mode-tabs {
  background: #0a0f1a !important;
  border-bottom: 2px solid #e30613 !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,.3) !important;
}

/* Actieve tab: SG-rood */
.plan-mode-tab--active {
  background: #e30613 !important;
  color: #ffffff !important;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.2) !important;
}
.plan-mode-tab--active:hover { background: #c5000f !important; }

/* Inactieve tabs in donkere modus */
.plan-mode-tab--inactive {
  background: #0d1526 !important;
  color: #64748b !important;
}
.plan-mode-tab--inactive:hover {
  background: #162036 !important;
  color: #cbd5e1 !important;
}

/* Lichte modus — planningsbalk */
.sg-theme-light .planning-mode-tabs {
  background: #ffffff !important;
  border-bottom: 2px solid #e30613 !important;
  box-shadow: 0 -1px 8px rgba(0,0,0,.07) !important;
}
.sg-theme-light .plan-mode-tab--inactive {
  background: #f8fafc !important;
  color: #475569 !important;
}
.sg-theme-light .plan-mode-tab--inactive:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Thema-toggle knop in planningsbalk: rood tint ipv paars */
.plan-mode-theme-btn {
  background: rgba(227,6,19,.1) !important;
  color: #f87171 !important;
  border-left: 1px solid rgba(227,6,19,.2) !important;
}
.plan-mode-theme-btn:hover {
  background: rgba(227,6,19,.2) !important;
  color: #fca5a5 !important;
}
.sg-theme-light .plan-mode-theme-btn {
  background: rgba(245,158,11,.1) !important;
  color: #d97706 !important;
  border-left-color: #e2e8f0 !important;
}
.sg-theme-light .plan-mode-theme-btn:hover {
  background: rgba(245,158,11,.18) !important;
  color: #b45309 !important;
}

/* ──────────────────────────────────────────────────────────────
   C. INVOERBALKEN — correcte SG-kleur
   Standaard inputs in lichte modus: lichtgrijs achtergrond,
   donkere rand + focus in SG-rood.
   Inputs in donkere modus: donkerblauw achtergrond.
   ────────────────────────────────────────────────────────────── */

/* — Lichte modus: tekst-inputs (buiten modal, niet datum/checkbox/range) — */
html.sg-theme-light input[type="text"],
html.sg-theme-light input[type="number"],
html.sg-theme-light input[type="email"],
html.sg-theme-light input[type="tel"],
html.sg-theme-light input[type="password"],
html.sg-theme-light input[type="search"],
html.sg-theme-light input[type="url"],
html.sg-theme-light input:not([type]),
html.sg-theme-light select,
html.sg-theme-light textarea {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #d1d5db !important;
}
html.sg-theme-light input[type="text"]:focus,
html.sg-theme-light input[type="number"]:focus,
html.sg-theme-light input[type="email"]:focus,
html.sg-theme-light input[type="tel"]:focus,
html.sg-theme-light input[type="password"]:focus,
html.sg-theme-light input[type="search"]:focus,
html.sg-theme-light input:not([type]):focus,
html.sg-theme-light select:focus,
html.sg-theme-light textarea:focus {
  border-color: #e30613 !important;
  box-shadow: 0 0 0 3px rgba(227,6,19,.12) !important;
  background: #ffffff !important;
  outline: none !important;
}
html.sg-theme-light input::placeholder,
html.sg-theme-light textarea::placeholder {
  color: #94a3b8 !important;
}

/* — Donkere modus: tekst-inputs (ook buiten modal) — */
html.sg-theme-dark input[type="text"],
html.sg-theme-dark input[type="number"],
html.sg-theme-dark input[type="email"],
html.sg-theme-dark input[type="tel"],
html.sg-theme-dark input[type="password"],
html.sg-theme-dark input[type="search"],
html.sg-theme-dark input[type="url"],
html.sg-theme-dark input:not([type]),
html.sg-theme-dark select,
html.sg-theme-dark textarea {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.14) !important;
}
html.sg-theme-dark input[type="text"]:focus,
html.sg-theme-dark input[type="number"]:focus,
html.sg-theme-dark input[type="email"]:focus,
html.sg-theme-dark input[type="tel"]:focus,
html.sg-theme-dark input[type="password"]:focus,
html.sg-theme-dark input[type="search"]:focus,
html.sg-theme-dark input:not([type]):focus,
html.sg-theme-dark select:focus,
html.sg-theme-dark textarea:focus {
  border-color: #e30613 !important;
  box-shadow: 0 0 0 3px rgba(227,6,19,.2) !important;
  background: #0a1628 !important;
  outline: none !important;
}
html.sg-theme-dark input::placeholder,
html.sg-theme-dark textarea::placeholder {
  color: #4b5e7a !important;
}

/* Hardcoded witte inputs in donkere modus — extra vangnet */
html.sg-theme-dark input[style*="background:#fff"],
html.sg-theme-dark input[style*="background: #fff"],
html.sg-theme-dark input[style*="background:white"],
html.sg-theme-dark input[style*="background: white"],
html.sg-theme-dark textarea[style*="background:#fff"],
html.sg-theme-dark textarea[style*="background: white"],
html.sg-theme-dark select[style*="background:#fff"],
html.sg-theme-dark select[style*="background: white"] {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* Datumpickers bewust LICHT houden (leesbaarheid Android/iOS) — ook in dark mode */
html.sg-theme-dark input[type="date"],
html.sg-theme-dark input[type="time"],
html.sg-theme-dark input[type="datetime-local"],
html.sg-theme-dark input[type="month"] {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(255,255,255,.2) !important;
  color-scheme: light !important;
}

/* ──────────────────────────────────────────────────────────────
   D. DAG/NACHT KNOP — correcte iconen en kleuren
   In DONKER: toont zon-icoon (om naar licht te gaan)
   In LICHT:  toont maan-icoon (om naar donker te gaan)
   ────────────────────────────────────────────────────────────── */

/* Topbar thema-knop donker: subtiele paarsblauwe tint */
html.sg-theme-dark .topbar-theme-btn {
  background: rgba(165,180,252,.12) !important;
  border-color: rgba(165,180,252,.28) !important;
  color: #a5b4fc !important;
}
html.sg-theme-dark .topbar-theme-btn:hover {
  background: rgba(165,180,252,.22) !important;
  color: #c7d2fe !important;
}

/* Topbar thema-knop licht: maan — zichtbaar op donkere topbar */
html.sg-theme-light .topbar-theme-btn {
  background: rgba(251,191,36,.15) !important;
  border-color: rgba(251,191,36,.35) !important;
  color: #fbbf24 !important;
}
html.sg-theme-light .topbar-theme-btn:hover {
  background: rgba(251,191,36,.28) !important;
  color: #ffffff !important;
}

/* ── Lichtmodus topbar: iconen WIT op donkere balk ── */
html.sg-theme-light .topbar .icon-btn {
  color: rgba(255,255,255,.85) !important;
}
html.sg-theme-light .topbar .icon-btn:hover {
  background: rgba(255,255,255,.1) !important;
  color: #ffffff !important;
}
html.sg-theme-light .menu-btn {
  color: #ffffff !important;
}
/* QR-scanner knop lichtmodus: goud op wit */
html.sg-theme-light .topbar-qr-btn {
  background: rgba(245,158,11,.12) !important;
  border-color: rgba(245,158,11,.28) !important;
  color: #b45309 !important;
}
html.sg-theme-light .topbar-qr-btn:hover {
  background: rgba(245,158,11,.22) !important;
}
/* Gemiste oproepen knop lichtmodus: rood */
html.sg-theme-light .topbar-call-btn {
  color: #dc2626 !important;
}
/* Infobot / rode knop lichtmodus */
html.sg-theme-light .topbar-right .icon-btn[style*="background"] {
  /* behoudt inline stijl, tekst zwart voor leesbaarheid */
}
/* Topbar greeting text lichtmodus */
html.sg-theme-light #topbarGreeting {
  color: #64748b !important;
}

/* ══════════════════════════════════════════════════════════════
   v5.27 — DASHBOARD WELKOMST-TEKST DARK MODE FIX
   Probleem: #dashboardGreeting heeft color:#0f172a !important in style.css
   → zwart op zwarte kaart = onleesbaar in dark mode
   Oplossing: dark mode override met lichte kleuren
══════════════════════════════════════════════════════════════ */
html.sg-theme-dark #dashboardGreeting {
  color: #f1f5f9 !important;   /* helder wit — max leesbaar op donker */
}
html.sg-theme-dark #dashboardSubGreeting {
  color: #94a3b8 !important;   /* zacht grijs — leesbaar subtitel */
}
/* Lichtmodus: behoud donker voor goede leesbaarheid op wit */
html.sg-theme-light #dashboardGreeting {
  color: #0f172a !important;
}
html.sg-theme-light #dashboardSubGreeting {
  color: #64748b !important;
}
/* Geen thema-klasse (standaard): ook lichte tekst als fallback */
:not(html.sg-theme-light) #dashboardGreeting {
  color: #f1f5f9 !important;
}
:not(html.sg-theme-light) #dashboardSubGreeting {
  color: #94a3b8 !important;
}
/* Topbar badge border lichtmodus: wit i.p.v. donker */
html.sg-theme-light .notif-btn .badge,
html.sg-theme-light .topbar-red-badge {
  border-color: #ffffff !important;
}

/* FAB thema-knop (drijvend rechtsonder) */
html.sg-theme-dark .sg-theme-toggle-fab {
  background: linear-gradient(135deg, #1a0608, #2d0a0e) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5), 0 0 0 1.5px rgba(227,6,19,.3) !important;
  color: #f87171 !important;
}
html.sg-theme-light .sg-theme-toggle-fab {
  background: linear-gradient(135deg, #fef3c7, #fffbeb) !important;
  box-shadow: 0 4px 20px rgba(245,158,11,.25), 0 0 0 1.5px rgba(245,158,11,.3) !important;
  color: #d97706 !important;
}

/* Animatie bij thema-wissel: knop pulseert kort */
[data-theme-toggle]:active {
  transform: scale(.88) !important;
  transition: transform .1s !important;
}

/* Column headers (START / PLOEG / VOERTUIG / MACHINE) licht */
.sg-theme-light .tbib-col-hdr,
.sg-theme-light [class*="tbib-col-header"],
.sg-theme-light .tb-col-label {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}

/* Naam-badges en items */
.sg-theme-light .tbib-name-chip,
.sg-theme-light [class*="tbib-person"] {
  background: rgba(227,6,19,.08) !important;
  color: var(--wl-primary,#e30613) !important;
  border-color: rgba(227,6,19,.25) !important;
}
.sg-theme-light [class*="tbib-vehicle"],
.sg-theme-light [class*="tbib-voertuig"] {
  background: #fefce8 !important;
  color: #a16207 !important;
  border-color: #fde68a !important;
}
.sg-theme-light [class*="tbib-machine"],
.sg-theme-light [class*="tbib-mach"] {
  background: rgba(227,6,19,.07) !important;
  color: #e30613 !important;
  border-color: rgba(227,6,19,.2) !important;
}

/* Ploeg toevoegen knop licht */
.sg-theme-light .tbib-add-btn {
  background: #e30613 !important;
  color: white !important;
}

/* sgThemeFAB: verberg wanneer Touchboard actief (board heeft eigen knop) */
body.tbib-board-active #sgThemeFab { display: none !important; }

/* ── Touchboard rijen en cellen licht ────────────────────────── */
.sg-theme-light .tbib-col-hdr {
  background: #f1f5f9 !important;
  border-bottom-color: #e30613 !important;
}
.sg-theme-light .tbib-ch {
  color: #475569 !important;
  border-right-color: #e2e8f0 !important;
}
.sg-theme-light .tbib-row {
  background: #ffffff !important;
  border-bottom-color: #e8ecf0 !important;
}
.sg-theme-light .tbib-row:hover { background: #f8fafc !important; }
.sg-theme-light .tbib-row.tb-selected {
  background: rgba(227,6,19,.05) !important;
  border-left-color: #e30613 !important;
  box-shadow: inset 0 0 0 1px rgba(227,6,19,.1) !important;
}
.sg-theme-light .tbib-cell { border-right-color: #e8ecf0 !important; }
.sg-theme-light .tbib-time { color: #0f172a !important; }
.sg-theme-light .tbib-time::placeholder { color: #94a3b8 !important; }
.sg-theme-light .tbib-txt {
  border-bottom-color: #cbd5e1 !important;
  color: #0f172a !important;
}
.sg-theme-light .tbib-txt::placeholder { color: #94a3b8 !important; }
.sg-theme-light .tbib-area {
  border-bottom-color: #cbd5e1 !important;
  color: #334155 !important;
}
.sg-theme-light .tbib-area::placeholder { color: #94a3b8 !important; }
.sg-theme-light .tbib-dz {
  border-color: #cbd5e1 !important;
  color: #94a3b8 !important;
}
.sg-theme-light .tbib-dz.over {
  border-color: var(--wl-primary,#e30613) !important;
  background: rgba(227,6,19,.06) !important;
}
.sg-theme-light .tbib-dz.filled {
  border-color: transparent !important;
  background: rgba(0,0,0,.04) !important;
  color: #0f172a !important;
}
.sg-theme-light .tbib-placed-name { color: #0f172a !important; }
.sg-theme-light .tbib-placed-rm { color: #94a3b8 !important; }
.sg-theme-light .tbib-klus {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
.sg-theme-light .tbib-mtype { color: #94a3b8 !important; }

/* Bank body items licht */
.sg-theme-light .tbib-bank-item,
.sg-theme-light [class*="tbib-bank-"] {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}
.sg-theme-light .tbib-bank-item:hover { background: rgba(227,6,19,.06) !important; }

/* ── Thema-knop ook IN de touchboard subheader ──────────────── */
#tbIB_themeBtn {
  background: rgba(165,180,252,.12);
  border: 1px solid rgba(165,180,252,.25);
  color: #a5b4fc;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: .78rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 700;
  transition: all .15s;
  font-family: inherit;
}
#tbIB_themeBtn:hover { background: rgba(165,180,252,.22); }
#tbIB_themeBtn:active { transform: scale(.92); }
.sg-theme-light #tbIB_themeBtn {
  background: rgba(245,158,11,.12) !important;
  border-color: rgba(245,158,11,.3) !important;
  color: #d97706 !important;
}

/* Invite modal body scrollable */
#inviteModalBody {
  max-height: 60vh;
  overflow-y: auto;
}

/* ════════════════════════════════════════════════════════════════
   v9.26.3 — MOBIELE UI FIXES
   1. Bottom nav: hoogte + tekst centrering
   2. Actie-knoppen: minder dominant rood
   3. Laadlijst tab: slot visueel versterkt
   ════════════════════════════════════════════════════════════════ */

/* ── 1. BOTTOM NAV — hoogte NIET hier instellen, wordt geregeld door sgBottomNavFix in index.html ── */
/* .bottom-nav height/padding: zie <style id="sgBottomNavFix"> in index.html (42px) */

/* ── 2. ACTIE-KNOPPEN — minder agressief rood ───────────────── */
/* Primaire actie-knoppen: gradient met verminderde saturatie */
.btn-primary,
[class*="btn-primary"],
.lc-login-btn,
.lc-vervanger-btn {
  background: linear-gradient(135deg, #c5000f, #9b0000) !important;
  box-shadow: 0 3px 10px rgba(180,0,20,.22) !important;
}
.btn-primary:hover,
[class*="btn-primary"]:hover,
.lc-login-btn:hover {
  background: linear-gradient(135deg, #a8000d, #7a000a) !important;
}

/* Inline rode knoppen (inline style background:#e30613) → dempen via filter */
[style*="background:#e30613"],
[style*="background: #e30613"] {
  filter: saturate(.82) brightness(.95);
}
[style*="background:linear-gradient(135deg,#e30613"],
[style*="background: linear-gradient(135deg, #e30613"] {
  filter: saturate(.8) brightness(.93);
}

/* Tekst altijd gecentreerd in knoppen */
button {
  text-align: center !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── 3. LAADLIJST TAB SLOT — visueel versterkt ──────────────── */
/* Wanneer de module vergrendeld is (data-addon-locked attribuut) */
[data-addon-locked="laadlijsten"] {
  opacity: .45 !important;
  filter: grayscale(.65) !important;
  position: relative;
  cursor: not-allowed !important;
}
/* Extra slot-overlay achter de tab */
[data-addon-locked="laadlijsten"]::after {
  content: '🔒';
  position: absolute;
  top: 2px; right: 3px;
  font-size: .55rem;
  line-height: 1;
  pointer-events: none;
}

/* Invite role desc box */
#inviteRoleDesc {
  transition: background .2s, color .2s;
}

/* ── 32. MODAL FOOTER KNOPPEN — betere hiërarchie ────────────────── */
.modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  padding: 12px 16px;
}
.modal-footer .btn-secondary {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  font-size: .86rem !important;
}
.modal-footer .btn-secondary:hover {
  background: #e2e8f0 !important;
}
.modal-footer .btn-primary {
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
  font-size: .86rem !important;
  box-shadow: 0 4px 12px rgba(227,6,19,.25) !important;
}

/* ── 33. FORM GROUP INPUTS — betere focus styling ────────────────── */
#inviteModalBody input[type="email"]:focus,
#inviteModalBody textarea:focus {
  border-color: #e30613 !important;
  box-shadow: 0 0 0 3px rgba(227,6,19,.12) !important;
  outline: none !important;
}
#inviteModalBody textarea {
  resize: vertical;
  min-height: 60px;
  max-height: 120px;
}

/* ── 34. MODAL HEADER GRADIENT ICON ──────────────────────────────── */
#inviteModal .modal-header {
  padding: 16px 16px 14px;
}

/* ══════════════════════════════════════════════════════════════════
   35b. ALARM MINUTEN KNOPPEN — in timer alarm instellingen modal
   ══════════════════════════════════════════════════════════════════ */
.alarm-min-btn {
  background: var(--bg, #f1f5f9);
  border: 1.5px solid var(--border, #e2e8f0);
  color: var(--text, #1e293b);
  border-radius: 9px;
  padding: 8px 4px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
  font-family: inherit;
}
.alarm-min-btn:hover {
  border-color: #e30613;
  color: #e30613;
  background: #fef2f2;
}
.alarm-min-btn.active {
  background: #e30613;
  border-color: #e30613;
  color: #fff;
  box-shadow: 0 2px 8px rgba(227,6,19,.3);
}
html.sg-theme-dark .alarm-min-btn {
  background: #0f1e35;
  border-color: rgba(255,255,255,.12);
  color: #e2e8f0;
}
html.sg-theme-dark .alarm-min-btn.active {
  background: #e30613;
  border-color: #e30613;
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   35. TIMER MINI-PILL — zweeft boven bottom-nav als timer loopt
       op de achtergrond (modal gesloten maar timer actief)
   ══════════════════════════════════════════════════════════════════ */
#timerMiniPill {
  position: fixed;
  bottom: calc(var(--bottom-h, 48px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 8500;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 8px 12px;
  border-radius: 50px;
  background: linear-gradient(135deg, #e30613, #9b1c1c);
  box-shadow: 0 4px 20px rgba(227,6,19,.45), 0 2px 8px rgba(0,0,0,.3);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-family: inherit;
  border: 1.5px solid rgba(255,255,255,.15);
  transition: transform .15s, box-shadow .15s, bottom .2s;
  white-space: nowrap;
}
#timerMiniPill:hover {
  transform: translateX(-50%) scale(1.04);
  box-shadow: 0 6px 24px rgba(227,6,19,.55), 0 2px 8px rgba(0,0,0,.35);
}
#timerMiniPill:active {
  transform: translateX(-50%) scale(.97);
}

/* Pulserende dot */
#timerMiniPill .tmp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  opacity: .9;
}
#timerMiniPill .tmp-dot.pulse {
  animation: tmpPulse 1.2s ease-in-out infinite;
}
@keyframes tmpPulse {
  0%,100% { opacity: .9; transform: scale(1); }
  50%      { opacity: .5; transform: scale(1.5); }
}

/* Klok */
#timerMiniPill .tmp-clock {
  font-size: .88rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}

/* Label (Reist / Werkt / Pauze) */
#timerMiniPill .tmp-label {
  font-size: .7rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 2px 7px;
}

/* Donkere modus — iets transparanter achtergrond */
html.sg-theme-dark #timerMiniPill {
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 4px 20px rgba(227,6,19,.35), 0 2px 8px rgba(0,0,0,.5);
}

/* ════════════════════════════════════════════════════════════════
   v4.82 — Fixes op basis van screenshots (dark/light modus)
   35. Snelle-actie knoppen (sg-qa-btn) — thema-aware
   36. Planning Controle kaart — dark-mode tekst
   37. Meldingen tab — dark-mode leesbaarheid
   ════════════════════════════════════════════════════════════════ */

/* ── 35. SNELLE ACTIE KNOPPEN (dashboard) ───────────────────────── */
/* Vervangt de inline btn-secondary stijl die var() niet oplost in
   inline-style onmouseout handlers, waardoor kaders zwart bleven. */
.sg-qa-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  padding: 11px 10px;
  border-radius: 12px;
  font-size: .8rem;
  font-family: inherit;
  background: var(--card, #ffffff);
  color: var(--text, #0f172a);
  border: 1.5px solid var(--border, #e2e8f0);
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
  width: 100%;
  min-height: 44px;
  text-align: left;
}
.sg-qa-btn:hover {
  background: var(--bg, #f1f5f9);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.sg-qa-btn:active {
  transform: scale(.97);
}
.sg-qa-sub {
  font-size: .7rem;
  color: var(--text-light, #64748b);
  margin-top: 1px;
}

/* ── 36. PLANNING CONTROLE KAART + OK KAART ────────────────────── */
.sg-plan-ok-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(22,163,74,.08);
  border-radius: 14px;
  border: 1.5px solid rgba(22,163,74,.25);
}
.sg-plan-ok-btn {
  margin-left: auto;
  padding: 5px 11px;
  border-radius: 8px;
  border: 1.5px solid #bbf7d0;
  background: white;
  color: #15803d;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
}
.sg-plan-controle-card {
  background: var(--card, #ffffff);
  border-radius: 16px;
  border: 1.5px solid #fecdd3;
  padding: 14px;
  box-shadow: 0 2px 10px rgba(239,68,68,.08);
}
.sg-plan-controle-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #fef2f2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sg-plan-alert-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  background: rgba(0,0,0,.03);
  border: 1.5px solid rgba(0,0,0,.06);
  border-radius: 11px;
}

/* ════════════════════════════════════════════════════════════════
   v5.10 — Profiel-knoppen & Stijlkiezer fixes
   1. .sg-theme-option  — thema-keuze knoppen in Instellingen
   2. Profiel-sectie    — Opslaan / PIN-knop zichtbaar & klikbaar
   3. Avatar upload     — Foto uploaden label als knop
   4. Dark-mode profiel — leesbaarheid tekstvelden
   ════════════════════════════════════════════════════════════════ */

/* ── 1. THEMA-KEUZE KNOPPEN (.sg-theme-option) ─────────────────────
   Gebruikt in sec-instellingen → Weergave kaart.
   Knoppen tonen Lichte / Donkere modus keuze naast elkaar.
   ─────────────────────────────────────────────────────────────── */
.sg-theme-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid var(--border, #e2e8f0);
  background: var(--card, #ffffff);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .18s, box-shadow .18s, background .18s;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.sg-theme-option:hover {
  border-color: #94a3b8;
  box-shadow: 0 3px 12px rgba(0,0,0,.08);
}
.sg-theme-option:active {
  transform: scale(.98);
}
/* Actieve staat — geselecteerd thema krijgt gekleurde rand + achtergrond */
.sg-theme-option.active {
  border-color: #e30613 !important;
  background: rgba(227,6,19,.04) !important;
  box-shadow: 0 0 0 3px rgba(227,6,19,.12), 0 3px 12px rgba(0,0,0,.08) !important;
}
/* Vinkje zichtbaar bij actieve optie */
.sg-theme-option.active .fa-check-circle {
  display: inline-block !important;
  color: #e30613 !important;
}
/* Donkere modus: kaart-achtergrond aanpassen */
html.sg-theme-dark .sg-theme-option {
  background: #0f1e35 !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #e2e8f0 !important;
}
html.sg-theme-dark .sg-theme-option:hover {
  border-color: rgba(255,255,255,.25) !important;
  background: #1e2d45 !important;
}
html.sg-theme-dark .sg-theme-option.active {
  border-color: #e30613 !important;
  background: rgba(227,6,19,.1) !important;
  box-shadow: 0 0 0 3px rgba(227,6,19,.2), 0 3px 14px rgba(0,0,0,.3) !important;
}

/* ── 2. PROFIEL SECTIE — knoppen zichtbaar & klikbaar ─────────────
   saveProfile(), openPinChangeModal(), handleAvatarUpload() en
   removeProfilePhoto() knoppen in sec-profile.
   ─────────────────────────────────────────────────────────────── */
#sec-profile .btn-primary,
#sec-profile .btn-secondary,
#sec-profile .btn-small {
  pointer-events: all !important;
  opacity: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
/* Opslaan-knop: SG-rood accent */
#sec-profile .btn-primary {
  background: #e30613 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  box-shadow: 0 4px 14px rgba(227,6,19,.25) !important;
  transition: background .15s, box-shadow .15s !important;
}
#sec-profile .btn-primary:hover {
  background: #c5000f !important;
  box-shadow: 0 6px 18px rgba(227,6,19,.35) !important;
}
#sec-profile .btn-primary:active {
  transform: scale(.97) !important;
}
/* PIN-wijzigen knop: secundair grijs */
#sec-profile .btn-secondary {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1.5px solid #e2e8f0 !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
#sec-profile .btn-secondary:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
}
/* Kleine knoppen (Foto uploaden / Foto verwijderen) */
#sec-profile .btn-small {
  padding: 7px 13px !important;
  font-size: .8rem !important;
  border-radius: 9px !important;
}

/* ── 3. AVATAR UPLOAD LABEL — ziet eruit als knop ─────────────────
   De <label> wrapping de file-input krijgt dezelfde stijl als btn-small.
   ─────────────────────────────────────────────────────────────── */
#profileAvatarLarge { cursor: pointer; }
#sec-profile label[style*="cursor:pointer"] span.btn-small,
#sec-profile label span.btn-small {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 13px !important;
  border-radius: 9px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1.5px solid #e2e8f0 !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background .15s !important;
  white-space: nowrap !important;
}
#sec-profile label span.btn-small:hover {
  background: #e2e8f0 !important;
}

/* ── 4. PROFIEL INVOERVELDEN — beter leesbaar ─────────────────────
   Naam / Bedrijf / Telefoon / Adres inputs in profiel-kaart.
   ─────────────────────────────────────────────────────────────── */
#profielNaam, #profielBedrijf, #profielTelefoon,
#profielAdres, #profielEmail {
  width: 100%;
  padding: 10px 13px !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 10px !important;
  font-size: .88rem !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-family: inherit !important;
  transition: border-color .15s, box-shadow .15s !important;
}
#profielNaam:focus, #profielBedrijf:focus,
#profielTelefoon:focus, #profielAdres:focus {
  border-color: #e30613 !important;
  box-shadow: 0 0 0 3px rgba(227,6,19,.1) !important;
  outline: none !important;
}
/* Readonly e-mail veld: visueel grijs */
#profielEmail[readonly] {
  background: #f8fafc !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
}
/* Dark mode profiel-inputs */
html.sg-theme-dark #profielNaam,
html.sg-theme-dark #profielBedrijf,
html.sg-theme-dark #profielTelefoon,
html.sg-theme-dark #profielAdres {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.14) !important;
}
html.sg-theme-dark #profielNaam:focus,
html.sg-theme-dark #profielBedrijf:focus,
html.sg-theme-dark #profielTelefoon:focus,
html.sg-theme-dark #profielAdres:focus {
  border-color: #e30613 !important;
  box-shadow: 0 0 0 3px rgba(227,6,19,.2) !important;
}

/* ── 5. PROFIEL AVATAR — cirkel beter zichtbaar ───────────────────
   Profielkaart centreert de grote avatar-cirkel.
   ─────────────────────────────────────────────────────────────── */
.profile-avatar {
  width: 72px !important;
  height: 72px !important;
  font-size: 1.5rem !important;
  border: 3px solid #e30613 !important;
  box-shadow: 0 4px 16px rgba(227,6,19,.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  /* ── background GESPLITST in losse properties (GEEN shorthand!) ─────────
     background: shorthand reset background-image naar none — dat kapot te
     maken via JS inline style. Gesplitst = veilig. */
  background-color: #e30613 !important;
  background-image: none !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: white !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
/* Zodra JS .has-foto toevoegt: rode achtergrondkleur weg + img zichtbaar */
.profile-avatar.has-foto {
  background-color: transparent !important;
  border-color: rgba(227,6,19,.35) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.15) !important;
}
/* <img> die JS injecteert in de profielcirkel */
.profile-avatar > img.sg-av-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  z-index: 1 !important;
}
/* initialen-span achter de foto */
.profile-avatar > span {
  position: relative !important;
  z-index: 0 !important;
}

/* ── SIDEBAR AVATAR FIX v5.4 ─────────────────────────────────────
   Probleem: background-image werd geblokkeerd door CSS !important
   regels op .sidebar-user .user-avatar.large. Oorzaak: zowel
   background-color als background-size stonden op !important.
   Oplossing v5.4: JS injecteert nu een <img> tag (position:absolute,
   100%×100%) i.p.v. background-image — immune voor CSS conflicts.
   CSS zorgt voor: correcte afmeting, overflow:hidden, initialen-span
   centrering, en verberging van de span als foto aanwezig is.
   ──────────────────────────────────────────────────────────────── */
#sidebarAvatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  background-color: #e30613 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  transition: box-shadow .2s !important;
  /* Reset conflicterende .user-avatar.large regels */
  background-image: none !important;
  background-size: auto !important;
}
#sidebarAvatar:hover {
  box-shadow: 0 0 0 3px rgba(227,6,19,.35) !important;
}
/* Initialen-span: groot, vet, gecentreerd, altijd zichtbaar zonder foto */
#sidebarAvatar span,
#sidebarAvatar #sidebarInitials {
  font-size: 1rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  letter-spacing: .02em !important;
  position: relative !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
/* Foto-<img> die JS injecteert: dekt de volledige cirkel af */
#sidebarAvatar img.sg-av-img {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  z-index: 2 !important;
  display: block !important;
}
/* Als foto aanwezig: achtergrond transparant + span verbergen */
#sidebarAvatar.has-foto {
  background-color: transparent !important;
}
#sidebarAvatar.has-foto span,
#sidebarAvatar.has-foto #sidebarInitials {
  display: none !important;
}
/* .sidebar-user .user-avatar.large override — mag NIET de sidebar-avatar verstoren */
.sidebar-user #sidebarAvatar {
  width: 40px !important;
  height: 40px !important;
  font-size: 1rem !important;
}

/* ── 6. INSTELLINGEN SECTIE — sec-instellingen zichtbaar ──────────
   Themakaart en module-overzicht consistent weergeven.
   ─────────────────────────────────────────────────────────────── */
#themaInstellingCard {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
/* Thema-opties container */
#themaInstellingCard > div:last-of-type {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* ── 7. DARK MODE PROFIEL-SECTIE — tekst leesbaarheid ─────────────
   Profilenaam, bedrijf en beschrijvingen aanpassen aan donker thema.
   ─────────────────────────────────────────────────────────────── */
html.sg-theme-dark #sec-profile .card {
  background: #0d1a2e !important;
  border-color: rgba(255,255,255,.1) !important;
}
html.sg-theme-dark #sec-profile .section-title,
html.sg-theme-dark #profileName,
html.sg-theme-dark #profielNaam {
  color: #e2e8f0 !important;
}
html.sg-theme-dark #sec-profile label {
  color: #94a3b8 !important;
}
html.sg-theme-dark #sec-profile .btn-primary {
  background: #e30613 !important;
  color: #fff !important;
}
html.sg-theme-dark #sec-profile .btn-secondary {
  background: #1e2d45 !important;
  color: #cbd5e1 !important;
  border-color: rgba(255,255,255,.12) !important;
}
html.sg-theme-dark #sec-profile .btn-secondary:hover {
  background: #253650 !important;
}
html.sg-theme-dark #sec-profile label span.btn-small {
  background: #1e2d45 !important;
  color: #cbd5e1 !important;
  border-color: rgba(255,255,255,.12) !important;
}
html.sg-theme-dark #sec-profile label span.btn-small:hover {
  background: #253650 !important;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR v5.0 — Volledig herbouwd header + hamburger menu
   ════════════════════════════════════════════════════════════════ */

/* ── Sidebar positie t.o.v. topbar ───────────────────────────── */
.sidebar {
  top: 0 !important;          /* vanaf helemaal boven */
  padding-top: 0 !important;  /* geen extra padding — eigen topbalk */
  border-radius: 0 18px 18px 0; /* rechts afgerond */
  box-shadow: 4px 0 32px rgba(0,0,0,.35);
}

/* ── Sidebar topbalk (logo + sluiten) ───────────────────────── */
.sidebar-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
  min-height: 56px;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
}
.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.sidebar-brand-name {
  font-size: .84rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
}
.sidebar-brand-name span { color: #e30613; }
.sidebar-brand-sub {
  font-size: .58rem;
  color: rgba(255,255,255,.3);
  letter-spacing: .03em;
}

/* ── Sluiten-knop ────────────────────────────────────────────── */
.sidebar-close-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .85rem;
  flex-shrink: 0;
  transition: background .15s, color .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-close-btn:hover {
  background: rgba(255,255,255,.14);
  color: #fff;
}
.sidebar-close-btn:active {
  transform: scale(.93);
  background: rgba(255,255,255,.2);
}

/* ── Gebruikersblok in sidebar ──────────────────────────────── */
.sidebar-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  flex-shrink: 0;
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.06);
  transition: background .15s;
}
.sidebar-user:hover {
  background: rgba(255,255,255,.09);
}

/* Avatar in sidebar */
.sidebar-user .user-avatar.large,
#sidebarAvatar.user-avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,.15) !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

/* Gebruikersnaam + rol */
.sidebar-user .user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sidebar-user strong,
#sidebarUsername {
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.3;
}
#sidebarRoleBadge.role-badge {
  font-size: .6rem !important;
  color: rgba(255,255,255,.45) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rol-badge (de gekleurde badge van sg-nav-engine) */
#sgSidebarRolBadge {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  font-size: .56rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  margin-top: 2px !important;
  letter-spacing: .04em;
  flex-shrink: 0;
  align-self: flex-start;
}

/* ── Loading state in nav ─────────────────────────────────── */
.sidebar-nav-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  color: rgba(255,255,255,.3);
  font-size: .78rem;
}
.sidebar-nav-loading i {
  font-size: .82rem;
  color: rgba(255,255,255,.25);
}

/* ── Hamburger menu-knop verbeterd ──────────────────────────── */
.menu-btn {
  background: none !important;
  border: none !important;
  color: #ffffff;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 6px 8px !important;
  border-radius: 9px !important;
  flex-shrink: 0;
  transition: background .15s, transform .12s !important;
  -webkit-tap-highlight-color: transparent;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.menu-btn:hover {
  background: rgba(0,0,0,.07) !important;
}
.menu-btn:active {
  background: rgba(0,0,0,.12) !important;
  transform: scale(.93) !important;
}
html.sg-theme-dark .menu-btn {
  color: rgba(255,255,255,.85) !important;
}
html.sg-theme-dark .menu-btn:hover {
  background: rgba(255,255,255,.1) !important;
}

/* ── Sidebar overlay verbeterd ──────────────────────────────── */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  pointer-events: none;
  z-index: 299;
  transition: background .28s cubic-bezier(.4,0,.2,1), backdrop-filter .28s;
  backdrop-filter: blur(0px);
}
.sidebar-overlay.active {
  background: rgba(0,0,0,.5) !important;
  pointer-events: all;
  backdrop-filter: blur(2px);
}

/* ── Sidebar animatie ────────────────────────────────────────── */
.sidebar {
  transition: left .28s cubic-bezier(.22,.68,0,1.05),
              box-shadow .28s ease !important;
}
.sidebar.open {
  left: 0 !important;
  box-shadow: 6px 0 40px rgba(0,0,0,.45) !important;
}

/* ── Sidebar overflow: ALTIJD hidden op de sidebar zelf ────────
   overflow:visible zou sidebar-content buiten het scherm laten
   overlopen en alle klikken op main-content blokkeren.
   De footer wordt zichtbaar gehouden via flex + min-height.     */
.sidebar {
  overflow: hidden !important;
}
/* Sidebar-nav scrollt intern, neemt beschikbare ruimte */
.sidebar-nav {
  flex: 1 1 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
}

/* ── Sidebar footer (uitloggen) — altijd onderaan via flex ───── */
.sidebar-footer {
  flex-shrink: 0 !important;
  padding: 6px 0 calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  /* margin-top:auto werkt in flex-column — duwt footer naar onder */
  margin-top: auto !important;
  background: linear-gradient(180deg, #111827 0%, #0d1117 100%);
  z-index: 2;
}
/* Uitlog-knop kleur in dark sidebar */
#sidebarLogoutBtn {
  color: rgba(248,113,113,.8) !important;
}
#sidebarLogoutBtn:hover,
#sidebarLogoutBtn:active {
  color: #f87171 !important;
  background: rgba(248,113,113,.1) !important;
  border-left-color: rgba(248,113,113,.45) !important;
}

/* ── Sidebar footer thema-rij ───────────────────────────────── */
.sidebar-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 6px;
  gap: 8px;
}
.sidebar-footer-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255,255,255,.45);
}
.sidebar-footer-label i { font-size: .7rem; }

/* Thema toggle pill in sidebar-footer */
.sidebar-theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.7);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: inherit;
  flex-shrink: 0;
}
.sidebar-theme-toggle:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.25);
  color: #fff;
}
.sidebar-theme-icon-wrap {
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Standaard: toon maan (donker actief), verberg zon */
#sidebarThemeIconSun  { display: none; color: #fbbf24; }
#sidebarThemeIconMoon { display: block; color: rgba(255,255,255,.6); font-size: .8rem; }

/* Licht-thema: omgekeerd */
html.sg-theme-light #sidebarThemeIconSun  { display: block; }
html.sg-theme-light #sidebarThemeIconMoon { display: none; }
html.sg-theme-light #sidebarThemeLabel    { /* tekst via JS */ }

/* Licht-thema sidebar footer tekst */
html.sg-theme-light .sidebar-footer-label { color: rgba(15,23,42,.4); }
html.sg-theme-light .sidebar-theme-toggle {
  border-color: rgba(15,23,42,.12);
  background: rgba(15,23,42,.05);
  color: rgba(15,23,42,.65);
}
html.sg-theme-light .sidebar-theme-toggle:hover {
  background: rgba(15,23,42,.09);
  color: #0f172a;
}

/* ── Topbar thema-knop — altijd geel/goud, helder ───────────── */
.topbar-icon-theme {
  background: transparent !important;
  color: #fbbf24 !important;
  border: none !important;
}
.topbar-icon-btn:hover .topbar-icon-theme { background: transparent !important; }
/* Icoon per thema: licht = gele maan, donker = witte zon */
html.sg-theme-light #topbarThemeIcon { color: #fbbf24 !important; }
html.sg-theme-dark  .topbar-icon-theme { background: transparent !important; color: #ffffff !important; }
html.sg-theme-dark  #topbarThemeIcon   { color: #ffffff !important; }

/* ── Dark mode aanpassingen ─────────────────────────────────── */
html.sg-theme-dark .sidebar-top-bar {
  background: rgba(0,0,0,.35);
}

/* ── Sidebar nav loading state ───────────────────────────────── */

/* Verberg loading spinner zodra nav-items aanwezig zijn */
#sidebarNav:has(.nav-item) .sidebar-nav-loading {
  display: none !important;
}
#sidebarNav .nav-item ~ .sidebar-nav-loading,
#sidebarNav .sidebar-nav-section ~ .sidebar-nav-loading {
  display: none !important;
}

/* Als sidebar NAV leeg is EN geen gebruiker: toon nette "Niet ingelogd" boodschap */
#app.hidden ~ * #sidebarNav .sidebar-nav-loading,
#app:not(.hidden) #sidebarNav:not(:has(.nav-item)) .sidebar-nav-loading {
  display: flex !important;
}

/* Geen loading spinner als gebruiker WEL ingelogd is maar nav leeg (veiligheidsnet) */
#sidebarNav:empty + * { display: none; }

/* Username "Laden..." — kleiner en minder opvallend als niet geladen */
#sidebarUsername:empty::after,
#sidebarUsername:only-child {
  content: '';
}

/* ── Sidebar gebruikersnaam placeholder-animatie ─────────────── */
#sidebarUsername.sg-loading {
  background: rgba(255,255,255,.08);
  border-radius: 6px;
  color: transparent !important;
  animation: sgSkeletonPulse 1.4s ease-in-out infinite;
  min-width: 80px;
  height: 14px;
  display: block;
}
@keyframes sgSkeletonPulse {
  0%, 100% { opacity: .4; }
  50%       { opacity: .8; }
}
#sidebarRoleBadge.sg-loading {
  background: rgba(255,255,255,.05);
  border-radius: 4px;
  color: transparent !important;
  animation: sgSkeletonPulse 1.4s ease-in-out .2s infinite;
  min-width: 50px;
  height: 10px;
  display: block;
}

/* ── 8. THEMA CHECKMARK ICON — altijd zichtbaar als actief ────────
   Vinkje in de thema-optie knop.
   ─────────────────────────────────────────────────────────────── */
#themaCheckLicht,
#themaCheckDonker {
  flex-shrink: 0;
  font-size: 1rem;
  transition: opacity .15s;
}

/* ── 9. PROFIEL SNEL-ACTIE KAARTEN — beschikbaarheid ─────────────
   Paarse en groene snelkoppeling-kaarten.
   ─────────────────────────────────────────────────────────────── */
#sec-profile [onclick*="SGAgenda"] {
  cursor: pointer !important;
  pointer-events: all !important;
  transition: box-shadow .15s !important;
}
#sec-profile [onclick*="SGAgenda"]:hover {
  box-shadow: 0 4px 16px rgba(124,58,237,.2) !important;
}
#sec-profile [onclick*="vault"] {
  cursor: pointer !important;
  pointer-events: all !important;
  transition: box-shadow .15s !important;
}
#sec-profile [onclick*="vault"]:hover {
  box-shadow: 0 4px 16px rgba(124,58,237,.15) !important;
}

/* ════════════════════════════════════════════════════════════════
   v5.22 — NETWERK EIGEN PROFIEL-KAART — v16.9.43
   Bewerkbare eigen profiel-kaart bovenaan "Mijn Netwerk" tab
   ════════════════════════════════════════════════════════════════ */

/* ── Wrapper ──────────────────────────────────────────────────── */
.nw-ep-wrap {
  margin-bottom: 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--card, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: box-shadow .2s;
}
.nw-ep-wrap:focus-within {
  box-shadow: 0 4px 18px rgba(227,6,19,.12);
  border-color: #e30613;
}

/* ── Compacte kaart (weergave) ────────────────────────────────── */
.nw-ep-kaart {
  padding: 14px 16px 10px;
  position: relative;
  transition: background .2s;
}
.nw-ep-kaart--editing {
  background: var(--surface, #f8fafc);
}

.nw-ep-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.nw-ep-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.nw-ep-info {
  flex: 1;
  min-width: 0;
}
.nw-ep-naam {
  font-size: .95rem;
  font-weight: 800;
  color: var(--text, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-bottom: 2px;
}
.nw-ep-rol {
  font-size: .75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.nw-ep-bedrijf {
  color: var(--text-muted, #64748b);
  font-weight: 500;
}
.nw-ep-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 5px;
}

/* ── Sync & volledigheid badges ──────────────────────────────── */
.nw-ep-sync, .nw-ep-volledig {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.nw-ep-sync--cloud    { background: #dcfce7; color: #15803d; }
.nw-ep-sync--local    { background: #f1f5f9; color: #475569; }
.nw-ep-volledig--compleet   { background: #dcfce7; color: #15803d; }
.nw-ep-volledig--incompleet { background: #fef9c3; color: #92400e; }

/* ── Bewerk-knop rechts ──────────────────────────────────────── */
.nw-ep-bewerk-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--surface, #f8fafc);
  color: var(--text-muted, #64748b);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.nw-ep-bewerk-btn:hover {
  background: #fef2f2;
  color: #e30613;
  border-color: #fca5a5;
}

/* ── Contact-rij onder profiel ───────────────────────────────── */
.nw-ep-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #f1f5f9);
}
.nw-ep-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .73rem;
  color: var(--text-muted, #475569);
  font-weight: 500;
}

/* ── Bewerkformulier ─────────────────────────────────────────── */
.nw-ep-form {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #f8fafc);
  animation: nwEpSlideIn .2s ease;
}
@keyframes nwEpSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nw-ep-form-title {
  font-size: .8rem;
  font-weight: 800;
  color: var(--text, #1e293b);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.nw-ep-form-hint {
  font-size: .67rem;
  font-weight: 400;
  color: var(--text-muted, #94a3b8);
  margin-left: auto;
}

.nw-ep-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .nw-ep-form-grid { grid-template-columns: 1fr; }
}

.nw-ep-veld {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nw-ep-veld--full {
  grid-column: 1 / -1;
}
.nw-ep-veld label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.nw-ep-veld input {
  height: 36px;
  padding: 0 10px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: .82rem;
  color: var(--text, #1e293b);
  background: var(--card, #fff);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.nw-ep-veld input:focus {
  border-color: #e30613;
  box-shadow: 0 0 0 3px rgba(227,6,19,.1);
}

/* ── Actiebalk opslaan ───────────────────────────────────────── */
.nw-ep-form-acties {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.nw-ep-opslaan-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: #e30613;
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, opacity .15s;
}
.nw-ep-opslaan-btn:hover   { background: #c00; }
.nw-ep-opslaan-btn:disabled { opacity: .65; cursor: default; }

.nw-ep-annuleer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  color: var(--text-muted, #64748b);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 9px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.nw-ep-annuleer-btn:hover { background: var(--surface, #f1f5f9); color: var(--text, #1e293b); }

.nw-ep-status {
  font-size: .73rem;
  font-weight: 600;
  margin-left: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity .3s;
}

/* ── Dark mode ───────────────────────────────────────────────── */
html.sg-theme-dark .nw-ep-wrap {
  background: #1e293b;
  border-color: rgba(255,255,255,.08);
}
html.sg-theme-dark .nw-ep-kaart--editing,
html.sg-theme-dark .nw-ep-form {
  background: #0f172a;
}
html.sg-theme-dark .nw-ep-naam     { color: #f1f5f9; }
html.sg-theme-dark .nw-ep-bedrijf  { color: #94a3b8; }
html.sg-theme-dark .nw-ep-contact-item { color: #94a3b8; }
html.sg-theme-dark .nw-ep-contact-row  { border-top-color: rgba(255,255,255,.07); }
html.sg-theme-dark .nw-ep-form-title   { color: #f1f5f9; }
html.sg-theme-dark .nw-ep-bewerk-btn {
  background: #1e293b;
  border-color: rgba(255,255,255,.12);
  color: #94a3b8;
}
html.sg-theme-dark .nw-ep-bewerk-btn:hover { background: #2d1b1b; color: #f87171; }
html.sg-theme-dark .nw-ep-veld label   { color: #94a3b8; }
html.sg-theme-dark .nw-ep-veld input {
  background: #1e293b;
  border-color: rgba(255,255,255,.1);
  color: #f1f5f9;
}
html.sg-theme-dark .nw-ep-veld input:focus { border-color: #e30613; }
html.sg-theme-dark .nw-ep-annuleer-btn { border-color: rgba(255,255,255,.1); color: #94a3b8; }
html.sg-theme-dark .nw-ep-annuleer-btn:hover { background: #1e293b; }
html.sg-theme-dark .nw-ep-sync--cloud  { background: rgba(21,128,61,.2); color: #4ade80; }
html.sg-theme-dark .nw-ep-sync--local  { background: rgba(71,85,105,.3); color: #94a3b8; }
html.sg-theme-dark .nw-ep-volledig--compleet   { background: rgba(21,128,61,.2); color: #4ade80; }
html.sg-theme-dark .nw-ep-volledig--incompleet { background: rgba(146,64,14,.2); color: #fcd34d; }

/* ════════════════════════════════════════════════════════════════
   v5.21 — NETWERK MODULE — volledig herontworpen
   Professionele header, compacte tab-balk, cleane kaarten
   ════════════════════════════════════════════════════════════════ */

/* ── Pagina-header ─────────────────────────────────────────────── */
.nw-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid #f1f5f9;
}
.nw-page-header__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.nw-page-header__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e30613, #b30000);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(227,6,19,.25);
}
.nw-page-header__icon i { color: #fff; font-size: .95rem; }
.nw-page-header__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text, #0f172a);
  line-height: 1.2;
}
.nw-page-header__sub {
  font-size: .72rem;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.nw-page-header__actions {
  display: flex;
  gap: 7px;
  flex-shrink: 0;
}
.nw-hdr-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 9px;
  border: none;
  font-family: inherit;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .1s;
  white-space: nowrap;
}
.nw-hdr-btn:active { transform: scale(.96); }
.nw-hdr-btn--ghost {
  background: #f1f5f9;
  color: #475569;
  border: 1.5px solid #e2e8f0;
}
.nw-hdr-btn--ghost:hover { background: #e2e8f0; }
.nw-hdr-btn--primary {
  background: #e30613;
  color: #fff;
  box-shadow: 0 2px 8px rgba(227,6,19,.25);
}
.nw-hdr-btn--primary:hover { background: #c0000e; }

/* Dark-mode header */
html.sg-theme-dark .nw-page-header { border-bottom-color: rgba(255,255,255,.06); }
html.sg-theme-dark .nw-page-header__title { color: #f1f5f9; }
html.sg-theme-dark .nw-page-header__sub  { color: #64748b; }
html.sg-theme-dark .nw-hdr-btn--ghost    { background: rgba(255,255,255,.06); color: #94a3b8; border-color: rgba(255,255,255,.1); }
html.sg-theme-dark .nw-hdr-btn--ghost:hover { background: rgba(255,255,255,.1); }

/* ── Tab-balk ─────────────────────────────────────────────────── */
.nw-tab-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: #f1f5f9;
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 16px;
}

.nw-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  color: #64748b;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  font-family: inherit;
  position: relative;
}
.nw-tab i {
  font-size: .85rem;
  line-height: 1;
}
.nw-tab span:not(.nw-tab-badge) {
  font-size: .64rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.nw-tab:hover {
  background: rgba(255,255,255,.7);
  color: #334155;
}
.nw-tab.active {
  background: #fff;
  color: #e30613;
  box-shadow: 0 1px 6px rgba(0,0,0,.1);
}
.nw-tab.active i { color: #e30613; }
.nw-tab-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  background: #e30613;
  color: #fff;
  border-radius: 20px;
  font-size: .56rem;
  font-weight: 900;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
}
.nw-tab.active .nw-tab-badge {
  background: #e30613;
  color: #fff;
  box-shadow: 0 1px 4px rgba(227,6,19,.4);
}

/* Dark-mode tab-balk */
html.sg-theme-dark .nw-tab-bar  { background: #0d1a2e; }
html.sg-theme-dark .nw-tab      { color: #64748b; }
html.sg-theme-dark .nw-tab:hover { background: rgba(255,255,255,.06); color: #cbd5e1; }
html.sg-theme-dark .nw-tab.active {
  background: #1e293b;
  color: #e30613;
  box-shadow: 0 1px 6px rgba(0,0,0,.35);
}
html.sg-theme-dark .nw-tab.active i { color: #e30613; }

/* ── Actie-knoppen balk (Mijn Netwerk onderaan) ──────────────── */
.nw-acties-bar {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1.5px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nw-acties-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.nw-actie-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-sizing: border-box;
}
.nw-actie-btn:active { transform: scale(.97); }
.nw-actie-btn--red {
  background: #e30613;
  color: #fff;
  box-shadow: 0 2px 8px rgba(227,6,19,.2);
}
.nw-actie-btn--red:hover { background: #c0000e; }
.nw-actie-btn--dark {
  background: #0f172a;
  color: #fff;
}
.nw-actie-btn--dark:hover { background: #1e293b; }
.nw-actie-btn--light {
  background: #f1f5f9;
  color: #334155;
  border: 1.5px solid #e2e8f0;
}
.nw-actie-btn--light:hover { background: #e2e8f0; }
.nw-actie-btn--purple {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  box-shadow: 0 2px 8px rgba(124,58,237,.2);
}
.nw-actie-btn--purple:hover { background: linear-gradient(135deg, #6d28d9, #5b21b6); }

/* Dark-mode actie-knoppen */
html.sg-theme-dark .nw-acties-bar { border-top-color: rgba(255,255,255,.07); }
html.sg-theme-dark .nw-actie-btn--light {
  background: rgba(255,255,255,.06);
  color: #cbd5e1;
  border-color: rgba(255,255,255,.1);
}
html.sg-theme-dark .nw-actie-btn--light:hover { background: rgba(255,255,255,.1); }
html.sg-theme-dark .nw-actie-btn--dark { background: #1e293b; }
html.sg-theme-dark .nw-actie-btn--dark:hover { background: #334155; }

/* ════════════════════════════════════════════════════════════════
   v5.23 — CHAT PROFIEL-SHEET — v16.9.44
   Slide-up bottom-sheet voor eigen profiel vanuit tcNavMeBar
   ════════════════════════════════════════════════════════════════ */

.tc-prof-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9100;
  animation: tcProfFadeIn .2s ease;
}
@keyframes tcProfFadeIn { from { opacity: 0; } to { opacity: 1; } }

.tc-prof-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9101;
  background: var(--card, #fff);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -6px 32px rgba(0,0,0,.18);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,1,.36,1);
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Trekgreep ───────────────────────────────────────────────── */
.tc-prof-handle {
  width: 40px; height: 4px;
  background: var(--border, #e2e8f0);
  border-radius: 2px;
  margin: 10px auto 4px;
  flex-shrink: 0;
}

/* ── Header (avatar + naam + sluit) ─────────────────────────── */
.tc-prof-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.tc-prof-avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  letter-spacing: .02em;
}
.tc-prof-header-info { flex: 1; min-width: 0; }
.tc-prof-naam {
  font-size: .96rem; font-weight: 800;
  color: var(--text, #1e293b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.tc-prof-rol {
  font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.tc-prof-bedrijf { color: var(--text-muted, #64748b); font-weight: 500; }
.tc-prof-badges  { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }

/* ── Sync / volledigheid badges ──────────────────────────────── */
.tc-prof-sync, .tc-prof-volledig {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .65rem; font-weight: 700;
  padding: 2px 7px; border-radius: 20px;
  white-space: nowrap;
}
.tc-prof-sync--cloud  { background: #dcfce7; color: #15803d; }
.tc-prof-sync--local  { background: #f1f5f9; color: #475569; }
.tc-prof-volledig--ok  { background: #dcfce7; color: #15803d; }
.tc-prof-volledig--inc { background: #fef9c3; color: #92400e; }

/* ── Sluit-knop ─────────────────────────────────────────────── */
.tc-prof-sluit {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--surface, #f8fafc);
  color: var(--text-muted, #64748b);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .78rem; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.tc-prof-sluit:hover { background: #fef2f2; color: #e30613; }

/* ── Formulier ───────────────────────────────────────────────── */
.tc-prof-form { padding: 14px 16px 6px; }

.tc-prof-form-titel {
  font-size: .8rem; font-weight: 800;
  color: var(--text, #1e293b);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.tc-prof-form-hint {
  font-size: .67rem; font-weight: 400;
  color: var(--text-muted, #94a3b8);
  margin-left: auto;
}

.tc-prof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
@media (max-width: 480px) { .tc-prof-grid { grid-template-columns: 1fr; } }

.tc-prof-veld { display: flex; flex-direction: column; gap: 4px; }
.tc-prof-veld--full { grid-column: 1 / -1; }
.tc-prof-veld label {
  font-size: .67rem; font-weight: 700;
  color: var(--text-muted, #64748b);
  text-transform: uppercase; letter-spacing: .04em;
}
.tc-prof-veld input {
  height: 36px; padding: 0 10px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px; font-size: .82rem;
  color: var(--text, #1e293b);
  background: var(--card, #fff);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  outline: none; width: 100%; box-sizing: border-box;
}
.tc-prof-veld input:focus {
  border-color: #e30613;
  box-shadow: 0 0 0 3px rgba(227,6,19,.1);
}

/* ── Actiebalk ────────────────────────────────────────────────── */
.tc-prof-acties {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; flex-wrap: wrap;
}
.tc-prof-opslaan {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  background: #e30613; color: #fff;
  border: none; border-radius: 9px;
  font-size: .8rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: background .15s, opacity .15s;
}
.tc-prof-opslaan:hover    { background: #c00; }
.tc-prof-opslaan:disabled { opacity: .65; cursor: default; }

.tc-prof-instellingen {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: transparent; color: var(--text-muted, #64748b);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 9px; font-size: .8rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s;
}
.tc-prof-instellingen:hover { background: var(--surface, #f1f5f9); color: var(--text, #1e293b); }

.tc-prof-status {
  font-size: .73rem; font-weight: 600;
  display: flex; align-items: center; gap: 4px;
  margin-left: 4px; transition: opacity .3s;
}

/* ── Snelle status-balk onderaan ─────────────────────────────── */
.tc-prof-status-balk {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border, #e2e8f0);
  margin-top: 6px;
  display: flex; flex-direction: column; gap: 8px;
}
.tc-prof-status-knoppen {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.tc-prof-stat-btn {
  padding: 5px 11px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 20px;
  background: var(--surface, #f8fafc);
  color: var(--sc, #475569);
  font-size: .72rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.tc-prof-stat-btn:hover {
  background: color-mix(in srgb, var(--sc) 12%, transparent);
  border-color: var(--sc);
}

/* ── Dark mode ────────────────────────────────────────────────── */
html.sg-theme-dark .tc-prof-sheet        { background: #1e293b; }
html.sg-theme-dark .tc-prof-handle       { background: rgba(255,255,255,.15); }
html.sg-theme-dark .tc-prof-header       { border-bottom-color: rgba(255,255,255,.08); }
html.sg-theme-dark .tc-prof-naam         { color: #f1f5f9; }
html.sg-theme-dark .tc-prof-bedrijf      { color: #94a3b8; }
html.sg-theme-dark .tc-prof-sluit        { background: #1e293b; border-color: rgba(255,255,255,.12); color: #94a3b8; }
html.sg-theme-dark .tc-prof-sluit:hover  { background: #2d1b1b; color: #f87171; }
html.sg-theme-dark .tc-prof-form-titel   { color: #f1f5f9; }
html.sg-theme-dark .tc-prof-veld label   { color: #94a3b8; }
html.sg-theme-dark .tc-prof-veld input   { background: #0f172a; border-color: rgba(255,255,255,.1); color: #f1f5f9; }
html.sg-theme-dark .tc-prof-veld input:focus { border-color: #e30613; }
html.sg-theme-dark .tc-prof-instellingen { border-color: rgba(255,255,255,.1); color: #94a3b8; }
html.sg-theme-dark .tc-prof-instellingen:hover { background: #1e293b; }
html.sg-theme-dark .tc-prof-status-balk  { border-top-color: rgba(255,255,255,.08); }
html.sg-theme-dark .tc-prof-stat-btn     { background: #0f172a; border-color: rgba(255,255,255,.1); }
html.sg-theme-dark .tc-prof-sync--cloud  { background: rgba(21,128,61,.2); color: #4ade80; }
html.sg-theme-dark .tc-prof-sync--local  { background: rgba(71,85,105,.3); color: #94a3b8; }
html.sg-theme-dark .tc-prof-volledig--ok  { background: rgba(21,128,61,.2); color: #4ade80; }
html.sg-theme-dark .tc-prof-volledig--inc { background: rgba(146,64,14,.2); color: #fcd34d; }

/* ══════════════════════════════════════════════════════════════
   v5.24 — PERSONEELSZAKEN HUB — v16.9.45
   Klassen: .pz-* (personeelszaken)
══════════════════════════════════════════════════════════════ */

/* ── Geen-toegang state ─────────────────────────────────── */
.pz-geen-toegang {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  color: var(--text-muted, #94a3b8);
}
.pz-lock-icon {
  font-size: 2.8rem;
  margin-bottom: 16px;
  opacity: .35;
}
.pz-geen-toegang h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text, #0f172a);
  margin: 0 0 8px;
}
.pz-geen-toegang p { font-size: .8rem; margin: 0; }

/* ── Hub wrap ────────────────────────────────────────────── */
.pz-hub-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
  background: var(--bg, #f8fafc);
}

/* ── Header ──────────────────────────────────────────────── */
.pz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
  color: white;
  gap: 12px;
  flex-shrink: 0;
}
.pz-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pz-avatar {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.2);
}
.pz-header-title {
  font-size: .9rem;
  font-weight: 800;
  white-space: nowrap;
}
.pz-header-sub {
  font-size: .7rem;
  color: rgba(255,255,255,.6);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pz-rol-chip {
  display: inline-block;
  background: rgba(255,255,255,.15);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .65rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
}
.pz-header-right { flex-shrink: 0; }

/* ── Credits widget (header) ─────────────────────────────── */
.pz-credits-widget-wrap { display: flex; align-items: center; }
.pz-credits-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background .15s;
}
.pz-credits-badge:hover { background: rgba(255,255,255,.2); }
.pz-credits-coin { color: #fbbf24; font-size: .8rem; }
.pz-credits-num  { font-weight: 800; font-size: .82rem; color: white; }
.pz-credits-lbl  { font-size: .65rem; color: rgba(255,255,255,.65); }
.pz-credits-divider { color: rgba(255,255,255,.35); font-size: .75rem; }
.pz-credits-slots { font-size: .72rem; color: rgba(255,255,255,.75); font-weight: 700; }

/* ── Stats row ───────────────────────────────────────────── */
.pz-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--bg-card, #fff);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.pz-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  gap: 5px;
  cursor: pointer;
  border-right: 1px solid var(--border, #e2e8f0);
  transition: background .12s;
  user-select: none;
}
.pz-stat-card:last-child { border-right: none; }
.pz-stat-card:hover { background: var(--bg-hover, #f8fafc); }
.pz-stat-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem;
}
.pz-stat-num {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text, #0f172a);
  line-height: 1;
}
.pz-stat-lbl {
  font-size: .62rem;
  color: var(--text-muted, #94a3b8);
  text-align: center;
  font-weight: 600;
}

/* ── Tab balk ────────────────────────────────────────────── */
.pz-tabs {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-card, #fff);
  border-bottom: 2px solid var(--border, #e2e8f0);
  gap: 0;
  scrollbar-width: none;
}
.pz-tabs::-webkit-scrollbar { display: none; }
.pz-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  font-family: inherit;
  margin-bottom: -2px;
}
.pz-tab i { font-size: .72rem; }
.pz-tab.active {
  color: #e30613;
  border-bottom-color: #e30613;
}
.pz-tab:hover:not(.active) { color: var(--text, #0f172a); }

/* ── Tab content ─────────────────────────────────────────── */
.pz-tab-content {
  flex: 1;
  padding: 14px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

/* ── Kaart ───────────────────────────────────────────────── */
.pz-kaart {
  background: var(--bg-card, #fff);
  border-radius: 14px;
  padding: 14px;
  border: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.pz-kaart-info { background: #f0f9ff; border-color: #bae6fd; }
.pz-kaart-titel {
  font-size: .8rem;
  font-weight: 800;
  color: var(--text, #0f172a);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ── Credits kaart (overzicht) ───────────────────────────── */
.pz-credits-kaart { background: linear-gradient(135deg, #fefce8 0%, #fff7ed 100%); border-color: #fde68a; }
.pz-credits-full-widget {
  min-height: 44px;
  background: rgba(255,255,255,.6);
  border-radius: 10px;
  border: 1px solid rgba(251,191,36,.3);
  padding: 10px 12px;
  display: flex;
  align-items: center;
}

/* ── Actie knoppen ───────────────────────────────────────── */
.pz-actie-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: opacity .12s, transform .1s;
}
.pz-actie-btn:active { transform: scale(.97); }
.pz-actie-prim { background: #e30613; color: white; }
.pz-actie-prim:hover { background: #c00; }
.pz-actie-sec  { background: var(--bg, #f1f5f9); color: var(--text, #334155); border: 1.5px solid var(--border, #e2e8f0); }
.pz-actie-sec:hover { background: var(--bg-hover, #e8edf3); }

/* ── Snelle acties grid ──────────────────────────────────── */
.pz-acties-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 380px) { .pz-acties-grid { grid-template-columns: repeat(2, 1fr); } }
.pz-actie-kaart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--bg, #f8fafc);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, transform .1s, box-shadow .15s;
  text-align: center;
}
.pz-actie-kaart:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.pz-actie-kaart:active { transform: scale(.97); }
.pz-actie-ico { font-size: 1.2rem; display: block; }
.pz-actie-nm  { font-size: .72rem; font-weight: 800; color: var(--text, #0f172a); }
.pz-actie-sub { font-size: .62rem; color: var(--text-muted, #94a3b8); }
.pz-actie-rood  { border-color: #fee2e2; } .pz-actie-rood  .pz-actie-ico { color: #e30613; }
.pz-actie-geel  { border-color: #fef3c7; } .pz-actie-geel  .pz-actie-ico { color: #d97706; }
.pz-actie-blauw { border-color: #dbeafe; } .pz-actie-blauw .pz-actie-ico { color: #2563eb; }
.pz-actie-groen { border-color: #dcfce7; } .pz-actie-groen .pz-actie-ico { color: #16a34a; }
.pz-actie-paars { border-color: #ede9fe; } .pz-actie-paars .pz-actie-ico { color: #7c3aed; }
.pz-actie-grijs { border-color: #f1f5f9; } .pz-actie-grijs .pz-actie-ico { color: #64748b; }

/* ── Status pills ────────────────────────────────────────── */
.pz-status-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pz-status-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
}
.pz-st-concept  { background: #f1f5f9; color: #475569; }
.pz-st-open, .pz-st-verzonden { background: #fef3c7; color: #92400e; }
.pz-st-getekend { background: #dcfce7; color: #166534; }
.pz-st-verlopen { background: #fee2e2; color: #991b1b; }
.pz-ls-badge    { background: #fef3c7; color: #92400e; }

/* ── Recente items ───────────────────────────────────────── */
.pz-recente-lijst { display: flex; flex-direction: column; gap: 6px; }
.pz-recente-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border, #f1f5f9);
}
.pz-recente-item:last-child { border-bottom: none; }
.pz-ri-avatar {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: #e30613;
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800;
  flex-shrink: 0;
}
.pz-av-geel { background: #d97706 !important; }
.pz-ri-info { flex: 1; min-width: 0; }
.pz-ri-naam { font-size: .8rem; font-weight: 700; color: var(--text, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-ri-sub  { font-size: .68rem; color: var(--text-muted, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-ri-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

/* ── Contract rij ────────────────────────────────────────── */
.pz-contract-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border, #f1f5f9);
  transition: background .1s;
}
.pz-contract-rij:last-child { border-bottom: none; }
.pz-cr-avatar {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: #e30613;
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800;
  flex-shrink: 0;
}
.pz-cr-info  { flex: 1; min-width: 0; }
.pz-cr-naam  { font-size: .8rem; font-weight: 700; color: var(--text, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-cr-meta  { font-size: .67rem; color: var(--text-muted, #94a3b8); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-cr-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pz-cr-status { font-size: .64rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.pz-cr-acties { display: flex; gap: 4px; }

/* ── Mini knoppen ────────────────────────────────────────── */
.pz-mini-btn {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--bg, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; cursor: pointer;
  color: var(--text-muted, #64748b);
  transition: background .12s, color .12s;
}
.pz-mini-btn:hover { background: var(--border, #e2e8f0); color: var(--text, #0f172a); }
.pz-mini-plus { background: #e30613 !important; color: white !important; border-color: #e30613 !important; }

/* ── Filter strip ────────────────────────────────────────── */
.pz-filter-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.pz-filter-btn {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: .71rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--bg, #f8fafc);
  color: var(--text-muted, #64748b);
  font-family: inherit;
  transition: all .12s;
}
.pz-filter-btn.active { background: #e30613; color: white; border-color: #e30613; }
.pz-filter-btn:hover:not(.active) { border-color: #e30613; color: #e30613; }

/* ── CAO info grid ───────────────────────────────────────── */
.pz-cao-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 420px) { .pz-cao-grid { grid-template-columns: repeat(3, 1fr); } }
.pz-cao-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  background: rgba(255,255,255,.7);
  border-radius: 8px;
  border: 1px solid rgba(186,230,253,.6);
}
.pz-cao-item span { font-size: .65rem; color: #64748b; }
.pz-cao-item strong { font-size: .78rem; color: #0f172a; font-weight: 800; }

/* ── Leeg state ──────────────────────────────────────────── */
.pz-leeg-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 20px;
  color: var(--text-muted, #94a3b8);
}
.pz-leeg-ico  { font-size: 2.2rem; margin-bottom: 12px; opacity: .3; }
.pz-leeg-titel { font-size: .88rem; font-weight: 700; color: var(--text, #0f172a); margin-bottom: 5px; }
.pz-leeg-sub  { font-size: .76rem; }

/* ── Loonstrook persoon kaart ────────────────────────────── */
.pz-loon-persoon-kaart {
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}
.pz-lp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.pz-lp-info  { flex: 1; min-width: 0; }
.pz-lp-naam  { font-size: .82rem; font-weight: 800; color: var(--text, #0f172a); }
.pz-lp-meta  { font-size: .67rem; color: var(--text-muted, #94a3b8); }
.pz-lp-rows  { padding: 6px 12px; }
.pz-lp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border, #f8fafc);
  font-size: .74rem;
}
.pz-lp-row:last-child { border-bottom: none; }
.pz-lp-periode { color: var(--text-muted, #64748b); min-width: 60px; }
.pz-lp-bruto   { font-weight: 700; color: var(--text, #0f172a); }
.pz-lp-netto   { font-size: .71rem; }

/* ── Personeel groepen ───────────────────────────────────── */
.pz-personeel-groep { margin-bottom: 14px; }
.pz-pg-header {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Uitnodigen grid ─────────────────────────────────────── */
.pz-uitnodig-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pz-uitnodig-kaart {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--bg, #f8fafc);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .12s, transform .1s;
}
.pz-uitnodig-kaart:hover { transform: translateX(2px); border-color: #e30613; }
.pz-uk-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.pz-uk-body  { flex: 1; min-width: 0; }
.pz-uk-titel { font-size: .82rem; font-weight: 800; color: var(--text, #0f172a); }
.pz-uk-sub   { font-size: .7rem; color: var(--text-muted, #64748b); margin-top: 2px; }
.pz-uk-tags  { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.pz-uk-chevron { color: #94a3b8; font-size: .75rem; flex-shrink: 0; }
.pz-tag      { padding: 2px 7px; border-radius: 4px; font-size: .62rem; font-weight: 700; }
.pz-tag-rood  { background: #fee2e2; color: #991b1b; }
.pz-tag-blauw { background: #dbeafe; color: #1e40af; }
.pz-tag-groen { background: #dcfce7; color: #166534; }
.pz-tag-grijs { background: #f1f5f9; color: #475569; }

/* ── Credits banner (uitnodigen tab) ─────────────────────── */
.pz-credits-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fefce8, #fff7ed);
  border: 1.5px solid #fde68a;
  border-radius: 12px;
  margin-bottom: 14px;
}
.pz-cb-ico { font-size: 1.4rem; color: #f59e0b; }
.pz-cb-info { flex: 1; min-width: 0; }
.pz-cb-title { font-size: .72rem; font-weight: 700; color: var(--text, #0f172a); }
.pz-cb-val   { font-size: .8rem; font-weight: 800; color: #d97706; margin-top: 2px; }
.pz-cb-btn   { flex-shrink: 0; }

/* ══ DARK MODE ══════════════════════════════════════════════ */
html.sg-theme-dark .pz-hub-wrap          { background: #0f172a; }
html.sg-theme-dark .pz-header            { background: linear-gradient(135deg, #020617 0%, #0f172a 100%); }
html.sg-theme-dark .pz-stats-row,
html.sg-theme-dark .pz-tabs             { background: #1e293b; border-color: rgba(255,255,255,.08); }
html.sg-theme-dark .pz-stat-card        { border-color: rgba(255,255,255,.08); }
html.sg-theme-dark .pz-stat-card:hover  { background: #0f172a; }
html.sg-theme-dark .pz-stat-num         { color: #f8fafc; }
html.sg-theme-dark .pz-kaart            { background: #1e293b; border-color: rgba(255,255,255,.08); }
html.sg-theme-dark .pz-kaart-info       { background: #0c1a2e; border-color: rgba(186,230,253,.2); }
html.sg-theme-dark .pz-credits-kaart    { background: linear-gradient(135deg, #1a150a, #1a1000); border-color: rgba(251,191,36,.2); }
html.sg-theme-dark .pz-credits-full-widget { background: rgba(255,255,255,.05); border-color: rgba(251,191,36,.15); }
html.sg-theme-dark .pz-kaart-titel      { color: #f1f5f9; }
html.sg-theme-dark .pz-actie-sec        { background: #0f172a; color: #cbd5e1; border-color: rgba(255,255,255,.1); }
html.sg-theme-dark .pz-actie-kaart      { background: #0f172a; border-color: rgba(255,255,255,.08); }
html.sg-theme-dark .pz-actie-nm         { color: #f1f5f9; }
html.sg-theme-dark .pz-mini-btn         { background: #0f172a; border-color: rgba(255,255,255,.1); color: #94a3b8; }
html.sg-theme-dark .pz-mini-btn:hover   { background: #1e293b; color: #f1f5f9; }
html.sg-theme-dark .pz-filter-btn       { background: #0f172a; border-color: rgba(255,255,255,.1); color: #94a3b8; }
html.sg-theme-dark .pz-contract-rij,
html.sg-theme-dark .pz-recente-item     { border-color: rgba(255,255,255,.07); }
html.sg-theme-dark .pz-cr-naam,
html.sg-theme-dark .pz-ri-naam,
html.sg-theme-dark .pz-lp-naam          { color: #f1f5f9; }
html.sg-theme-dark .pz-loon-persoon-kaart { border-color: rgba(255,255,255,.1); }
html.sg-theme-dark .pz-lp-header        { background: #0f172a; border-color: rgba(255,255,255,.08); }
html.sg-theme-dark .pz-lp-row           { border-color: rgba(255,255,255,.07); }
html.sg-theme-dark .pz-uitnodig-kaart   { background: #0f172a; border-color: rgba(255,255,255,.1); }
html.sg-theme-dark .pz-uitnodig-kaart:hover { border-color: #e30613; }
html.sg-theme-dark .pz-uk-titel         { color: #f1f5f9; }
html.sg-theme-dark .pz-credits-banner   { background: linear-gradient(135deg, #1a150a, #1a1000); border-color: rgba(251,191,36,.25); }
html.sg-theme-dark .pz-cao-item         { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
html.sg-theme-dark .pz-cao-item span    { color: #94a3b8; }
html.sg-theme-dark .pz-cao-item strong  { color: #f1f5f9; }
html.sg-theme-dark .pz-st-concept       { background: #1e293b; color: #94a3b8; }
html.sg-theme-dark .pz-status-pill.pz-st-open,
html.sg-theme-dark .pz-status-pill.pz-st-verzonden { background: rgba(217,119,6,.2); color: #fcd34d; }
html.sg-theme-dark .pz-status-pill.pz-st-getekend  { background: rgba(22,163,74,.2); color: #4ade80; }

/* ══════════════════════════════════════════════════════════════
   v5.25 — NETWERK OMGEVINGS-KAARTEN — v16.9.46
   Klanten · ZZP-ers · Sub & Pro
   Klassen: .nwok-* (netwerk omgevings-kaart)
══════════════════════════════════════════════════════════════ */

/* ── Basis kaart ─────────────────────────────────────────── */
.nwok-kaart {
  background: var(--bg-card, #fff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
}
.nwok-kaart--zzp  { border-color: #fde68a; }
.nwok-kaart--sub  { border-color: #cbd5e1; }

/* ── Header ──────────────────────────────────────────────── */
.nwok-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
  gap: 10px;
}
.nwok-header-links {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.nwok-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #0ea5e918;
  color: #0ea5e9;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.nwok-icon--zzp { background: #fef3c7; color: #d97706; }
.nwok-icon--sub { background: #f1f5f9; color: #475569; }
.nwok-titel {
  font-size: .85rem;
  font-weight: 800;
  color: var(--text, #0f172a);
}
.nwok-sub {
  font-size: .68rem;
  color: var(--text-muted, #94a3b8);
  margin-top: 1px;
}
.nwok-uitklap-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-muted, #94a3b8);
  font-size: .72rem;
  transition: background .12s;
  flex-shrink: 0;
}
.nwok-uitklap-btn:hover { background: var(--border, #e2e8f0); }

/* ── Body ────────────────────────────────────────────────── */
.nwok-body {
  padding: 10px 12px 4px;
}

/* ── Leeg state ──────────────────────────────────────────── */
.nwok-leeg {
  text-align: center;
  padding: 20px 16px;
  color: var(--text-muted, #94a3b8);
  font-size: .78rem;
}
.nwok-leeg-ico {
  font-size: 1.6rem;
  display: block;
  margin-bottom: 8px;
  opacity: .3;
}

/* ── Item (persoon-rij) ──────────────────────────────────── */
.nwok-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #f1f5f9);
  cursor: pointer;
  transition: background .1s;
  position: relative;
}
.nwok-item:last-of-type { border-bottom: none; }
.nwok-item:hover { background: var(--bg-hover, #f8fafc); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 10px; }

/* ── Avatar ──────────────────────────────────────────────── */
.nwok-avatar {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800;
  color: white;
  flex-shrink: 0;
  position: relative;
}
.nwok-avatar--sub {
  background: #1e293b !important;
}

/* ── Dubbele-rol dot ─────────────────────────────────────── */
.nwok-dubbel-dot {
  position: absolute;
  bottom: -3px; right: -3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #7c3aed;
  color: white;
  font-size: .52rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid white;
  line-height: 1;
}
.nwok-dubbel-klant { background: #0ea5e9; }
.nwok-pro-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: #f59e0b;
  color: white;
  font-size: .48rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 5px;
  border: 1.5px solid white;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Info blok ───────────────────────────────────────────── */
.nwok-info {
  flex: 1;
  min-width: 0;
}
.nwok-naam {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text, #0f172a);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.nwok-email {
  font-size: .67rem;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
}

/* ── Rol chips ───────────────────────────────────────────── */
.nwok-rol-rij {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.nwok-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: .65rem;
  font-weight: 700;
  background: #f1f5f9;
  color: #475569;
}
.nwok-chip i { font-size: .58rem; }
.nwok-chip--klant       { background: #e0f2fe; color: #0369a1; }
.nwok-chip--sub         { background: #f1f5f9; color: #334155; }
.nwok-chip--team        { background: #ede9fe; color: #6d28d9; }
.nwok-chip--beschikbaar { background: #dcfce7; color: #166534; }
.nwok-chip--beschikbaar i { color: #16a34a; }
.nwok-beschikbaar       { background: #dcfce7 !important; color: #166534 !important; }
.nwok-onbeschikbaar     { background: #fee2e2 !important; color: #991b1b !important; }
.nwok-onbeschikbaar i   { color: #ef4444 !important; }

/* ── Live badge ──────────────────────────────────────────── */
.nwok-live-badge {
  display: inline-flex;
  align-items: center;
  background: #dcfce7;
  color: #15803d;
  border-radius: 20px;
  padding: 1px 6px;
  font-size: .58rem;
  font-weight: 700;
}

/* ── Projecten strip ─────────────────────────────────────── */
.nwok-projecten-strip {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.nwok-proj-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  background: #f0fdf4;
  color: #166534;
  border-radius: 5px;
  font-size: .63rem;
  font-weight: 700;
  border: 1px solid #bbf7d0;
}
.nwok-proj-chip i { font-size: .55rem; }
.nwok-proj-meer {
  font-size: .62rem;
  color: var(--text-muted, #94a3b8);
  padding: 2px 4px;
  align-self: center;
}

/* ── Contracten strip ────────────────────────────────────── */
.nwok-contracten-strip {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.nwok-contract-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 5px;
  font-size: .63rem;
  font-weight: 600;
  border: 1px solid #fde68a;
}
.nwok-contract-chip i   { font-size: .55rem; }
.nwok-contract-chip strong { color: #15803d; margin-left: 2px; }

/* ── Tarief rij ──────────────────────────────────────────── */
.nwok-tarief-rij {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.nwok-tarief-header {
  font-size: .65rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  display: flex;
  align-items: center;
  gap: 4px;
}
.nwok-tarief-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: var(--bg, #f8fafc);
  border-radius: 6px;
  border: 1px solid var(--border, #e2e8f0);
}
.nwok-tarief-proj {
  font-size: .69rem;
  color: var(--text, #334155);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nwok-tarief-val {
  font-size: .72rem;
  font-weight: 800;
  color: #15803d;
  white-space: nowrap;
}
.nwok-tarief-edit {
  width: 22px; height: 22px;
  border-radius: 5px;
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem;
  cursor: pointer;
  color: var(--text-muted, #94a3b8);
  flex-shrink: 0;
  transition: all .12s;
}
.nwok-tarief-edit:hover { background: #dcfce7; color: #15803d; border-color: #86efac; }
.nwok-tarief-nieuw {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #f0fdf4;
  color: #15803d;
  border: 1px dashed #86efac;
  border-radius: 7px;
  font-size: .69rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}
.nwok-tarief-nieuw:hover { background: #dcfce7; }

/* ── Acties kolom ────────────────────────────────────────── */
.nwok-acties {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.nwok-actie-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--bg, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  cursor: pointer;
  color: var(--text-muted, #64748b);
  transition: all .12s;
}
.nwok-actie-btn:hover { background: var(--border, #e2e8f0); color: var(--text, #0f172a); }
.nwok-actie-contract:hover { background: #fee2e2; color: #e30613; border-color: #fca5a5; }

/* ── Footer ──────────────────────────────────────────────── */
.nwok-footer {
  display: flex;
  gap: 8px;
  padding: 10px 0 6px;
  border-top: 1px solid var(--border, #f1f5f9);
  flex-wrap: wrap;
}
.nwok-uitnodig-btn {
  flex: 1;
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: .74rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: #0ea5e9;
  color: white;
  font-family: inherit;
  transition: opacity .12s;
}
.nwok-uitnodig-btn:hover { opacity: .88; }
.nwok-uitnodig-zzp  { background: #f59e0b; }
.nwok-uitnodig-sec  { background: var(--bg, #f1f5f9); color: var(--text, #334155); border: 1.5px solid var(--border, #e2e8f0); }
.nwok-uitnodig-sec:hover { background: var(--border, #e2e8f0); opacity: 1; }

/* ── Admin-config info-regel ─────────────────────────────── */
.nwok-admin-info {
  font-size: .67rem;
  color: #475569;
  background: #f1f5f9;
  border-top: 1px solid #e2e8f0;
  padding: 7px 12px;
  margin: 4px -12px -4px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  line-height: 1.5;
  border-radius: 0 0 14px 14px;
}
.nwok-admin-info i  { color: #94a3b8; font-size: .62rem; flex-shrink: 0; }
.nwok-admin-info strong { color: #0f172a; font-weight: 800; }

/* ══════════════════════════════════════════════════════════════
   v5.26 — LEESBAARHEIDSFIX netwerk-kaarten (light mode)
   Probleem: lichte tekst (#94a3b8 / wit) op lichte kaartachtergrond
   Oplossing: donkere, krachtige kleuren voor alle tekstelementen
══════════════════════════════════════════════════════════════ */

/* ── Subtitel onder titel (was #94a3b8 op wit = onleesbaar) ─ */
.nwok-sub {
  font-size: .68rem;
  color: #475569 !important;   /* was var(--text-muted,#94a3b8) — te licht */
  margin-top: 1px;
}

/* ── Email-regel onder naam ──────────────────────────────── */
.nwok-email {
  font-size: .67rem;
  color: #475569 !important;   /* was #94a3b8 — te licht op wit */
  margin-top: 2px;
}

/* ── Tarief project-naam ─────────────────────────────────── */
.nwok-tarief-proj {
  font-size: .69rem;
  color: #334155 !important;   /* was var(--text,#334155) — ok maar versterken */
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tarief header label ─────────────────────────────────── */
.nwok-tarief-header {
  font-size: .65rem;
  font-weight: 700;
  color: #334155 !important;   /* was var(--text-muted,#64748b) — te licht */
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Lege state tekst ────────────────────────────────────── */
.nwok-leeg {
  text-align: center;
  padding: 20px 16px;
  color: #475569 !important;   /* was var(--text-muted,#94a3b8) — te licht */
  font-size: .78rem;
}
.nwok-leeg > div:last-of-type {
  font-size: .72rem;
  color: #64748b !important;   /* subline licht, maar niet wit-op-wit */
  margin-top: 3px;
}

/* ── Uitklap-knop ────────────────────────────────────────── */
.nwok-uitklap-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: none;
  border: 1px solid #cbd5e1;   /* was var(--border) = te licht zichtbaar */
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #475569 !important;   /* was var(--text-muted,#94a3b8) — te licht */
  font-size: .72rem;
  transition: background .12s;
  flex-shrink: 0;
}

/* ── Chip standaard (lichtgrijs op wit = probleem) ────────── */
.nwok-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: .65rem;
  font-weight: 700;
  background: #e2e8f0;         /* was #f1f5f9 — te licht */
  color: #334155 !important;   /* was #475569 — versterkt */
}
.nwok-chip--sub {
  background: #e2e8f0;
  color: #1e293b !important;   /* was #334155 — maximaal contrast */
}

/* ── Actie-knop ──────────────────────────────────────────── */
.nwok-actie-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;   /* was var(--border,#e2e8f0) — meer zichtbaar */
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  cursor: pointer;
  color: #334155 !important;   /* was var(--text-muted,#64748b) — te licht */
  transition: all .12s;
}

/* ── Bedrijfsnaam onder naam (was 64748b op wit) ─────────── */
.nwok-item [style*="color:var(--text-muted,#64748b)"],
.nwok-item [style*="color: var(--text-muted, #64748b)"] {
  color: #475569 !important;
}

/* ── Tarief-edit knop icoon ──────────────────────────────── */
.nwok-tarief-edit {
  width: 22px; height: 22px;
  border-radius: 5px;
  background: none;
  border: 1px solid #cbd5e1;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem;
  cursor: pointer;
  color: #475569 !important;   /* was var(--text-muted,#94a3b8) */
  flex-shrink: 0;
  transition: all .12s;
}

/* ══ DARK MODE ══════════════════════════════════════════════ */
html.sg-theme-dark .nwok-kaart           { background: #1e293b; border-color: rgba(255,255,255,.08); }
html.sg-theme-dark .nwok-kaart--zzp      { border-color: rgba(251,191,36,.25); }
html.sg-theme-dark .nwok-kaart--sub      { border-color: rgba(100,116,139,.3); }
html.sg-theme-dark .nwok-header          { background: #0f172a; border-color: rgba(255,255,255,.08); }
html.sg-theme-dark .nwok-uitklap-btn     { border-color: rgba(255,255,255,.1); color: #94a3b8; }
html.sg-theme-dark .nwok-uitklap-btn:hover { background: #1e293b; }
html.sg-theme-dark .nwok-titel           { color: #f1f5f9; }
html.sg-theme-dark .nwok-naam            { color: #f1f5f9; }
html.sg-theme-dark .nwok-item:hover      { background: #0f172a; }
html.sg-theme-dark .nwok-dubbel-dot      { border-color: #1e293b; }
html.sg-theme-dark .nwok-pro-badge       { border-color: #1e293b; }
html.sg-theme-dark .nwok-chip            { background: #0f172a; color: #94a3b8; }
html.sg-theme-dark .nwok-chip--klant     { background: rgba(14,165,233,.15); color: #38bdf8; }
html.sg-theme-dark .nwok-chip--team      { background: rgba(109,40,217,.15); color: #a78bfa; }
html.sg-theme-dark .nwok-beschikbaar     { background: rgba(22,163,74,.2) !important; color: #4ade80 !important; }
html.sg-theme-dark .nwok-onbeschikbaar   { background: rgba(220,38,38,.15) !important; color: #f87171 !important; }
html.sg-theme-dark .nwok-tarief-item     { background: #0f172a; border-color: rgba(255,255,255,.08); }
html.sg-theme-dark .nwok-tarief-proj     { color: #cbd5e1; }
html.sg-theme-dark .nwok-actie-btn       { background: #0f172a; border-color: rgba(255,255,255,.1); color: #94a3b8; }
html.sg-theme-dark .nwok-actie-btn:hover { background: #1e293b; color: #f1f5f9; }
html.sg-theme-dark .nwok-tarief-edit     { border-color: rgba(255,255,255,.1); }
html.sg-theme-dark .nwok-proj-chip       { background: rgba(22,163,74,.1); color: #4ade80; border-color: rgba(22,163,74,.2); }
html.sg-theme-dark .nwok-contract-chip   { background: rgba(217,119,6,.1); color: #fcd34d; border-color: rgba(217,119,6,.2); }
html.sg-theme-dark .nwok-footer          { border-color: rgba(255,255,255,.07); }
html.sg-theme-dark .nwok-uitnodig-sec    { background: #0f172a; color: #94a3b8; border-color: rgba(255,255,255,.1); }
html.sg-theme-dark .nwok-tarief-nieuw    { background: rgba(22,163,74,.08); color: #4ade80; border-color: rgba(22,163,74,.25); }
/* ── Dark mode: leesbaarheidsfix overrides ── */
html.sg-theme-dark .nwok-sub            { color: #94a3b8 !important; }
html.sg-theme-dark .nwok-email          { color: #64748b !important; }
html.sg-theme-dark .nwok-tarief-proj    { color: #cbd5e1 !important; }
html.sg-theme-dark .nwok-tarief-header  { color: #94a3b8 !important; }
html.sg-theme-dark .nwok-leeg           { color: #64748b !important; }
html.sg-theme-dark .nwok-uitklap-btn    { border-color: rgba(255,255,255,.12); color: #94a3b8 !important; }
html.sg-theme-dark .nwok-chip           { background: #0f172a; color: #94a3b8 !important; }
html.sg-theme-dark .nwok-chip--sub      { background: rgba(100,116,139,.15); color: #94a3b8 !important; }
html.sg-theme-dark .nwok-actie-btn      { background: #0f172a; border-color: rgba(255,255,255,.1); color: #94a3b8 !important; }
html.sg-theme-dark .nwok-tarief-edit    { border-color: rgba(255,255,255,.1); color: #64748b !important; }
html.sg-theme-dark .nwok-admin-info     { background: #0f172a; border-color: rgba(255,255,255,.07); color: #64748b; }
html.sg-theme-dark .nwok-admin-info strong { color: #e2e8f0; }

/* ── Netwerk contact-kaart bottom-sheet ──────────────────────── */
.nwck-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1200;
  animation: nwckFadeIn .2s ease;
}
@keyframes nwckFadeIn { from { opacity:0 } to { opacity:1 } }

.nwck-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1201;
  background: var(--card, #fff);
  border-radius: 20px 20px 0 0;
  padding: 8px 16px 32px;
  box-shadow: 0 -4px 32px rgba(0,0,0,.18);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
  max-height: 90vh;
  overflow-y: auto;
}
.nwck-handle {
  width: 40px;
  height: 4px;
  background: #cbd5e1;
  border-radius: 2px;
  margin: 0 auto 14px;
}
.nwck-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.nwck-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
}
.nwck-header-info { flex: 1; min-width: 0; }
.nwck-naam {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text, #0f172a);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  line-height: 1.3;
}
.nwck-rol {
  font-size: .78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}
.nwck-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  color: #64748b;
  margin-top: 3px;
}
.nwck-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nwck-dot--green { background: #22c55e; }
.nwck-dot--red   { background: #ef4444; }
.nwck-live-badge {
  background: #dcfce7;
  color: #15803d;
  border-radius: 20px;
  font-size: .62rem;
  font-weight: 800;
  padding: 1px 6px;
  margin-left: 3px;
}
.nwck-sluit {
  background: #f1f5f9;
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  font-size: .85rem;
  flex-shrink: 0;
}
.nwck-contact-blok {
  background: var(--bg, #f8fafc);
  border-radius: 12px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.nwck-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border, #f1f5f9);
  font-size: .84rem;
  color: var(--text, #0f172a);
}
.nwck-rij:last-child { border-bottom: none; }
.nwck-rij i { width: 16px; text-align: center; flex-shrink: 0; }
.nwck-actie-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background .15s;
}
.nwck-actie-btn--blue   { background: #eff6ff; color: #2563eb; }
.nwck-actie-btn--green  { background: #f0fdf4; color: #16a34a; }
.nwck-actie-btn--purple { background: linear-gradient(135deg,#7c3aed,#6d28d9); color: #fff; }
.nwck-actie-btn--blue:hover   { background: #dbeafe; }
.nwck-actie-btn--green:hover  { background: #dcfce7; }
.nwck-actie-btn--purple:hover { background: linear-gradient(135deg,#6d28d9,#5b21b6); }

/* Dark mode contact-kaart */
html.sg-theme-dark .nwck-sheet    { background: #0d1a2e; }
html.sg-theme-dark .nwck-handle   { background: rgba(255,255,255,.15); }
html.sg-theme-dark .nwck-naam     { color: #f1f5f9; }
html.sg-theme-dark .nwck-sluit    { background: rgba(255,255,255,.08); color: #94a3b8; }
html.sg-theme-dark .nwck-contact-blok { background: #1e293b; }
html.sg-theme-dark .nwck-rij      { color: #e2e8f0; border-bottom-color: rgba(255,255,255,.07); }
html.sg-theme-dark .nwck-actie-btn--blue  { background: rgba(37,99,235,.15); color: #93c5fd; }
html.sg-theme-dark .nwck-actie-btn--green { background: rgba(22,163,74,.15); color: #86efac; }

/* ── Zoekbalk (Personen-tab) ──────────────────────────────────── */
.nw-search-wrap {
  position: relative;
  margin-bottom: 10px;
}
.nw-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: .82rem;
  pointer-events: none;
}
.nw-search-input {
  width: 100%;
  padding: 10px 12px 10px 34px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: var(--card, #fff);
  color: var(--text, #0f172a);
  font-family: inherit;
  font-size: .84rem;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.nw-search-input:focus {
  outline: none;
  border-color: #e30613;
  box-shadow: 0 0 0 3px rgba(227,6,19,.08);
}
.nw-chip-row {
  margin-bottom: 14px;
}
html.sg-theme-dark .nw-search-input {
  background: #0d1a2e;
  border-color: rgba(255,255,255,.1);
  color: #e2e8f0;
}
html.sg-theme-dark .nw-search-input:focus {
  border-color: #e30613;
}

/* ── Lege staat ──────────────────────────────────────────────── */
.nw-leeg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #94a3b8;
  gap: 8px;
}
.nw-leeg i {
  font-size: 2.2rem;
  opacity: .35;
  margin-bottom: 6px;
}
.nw-leeg strong {
  color: #475569;
  font-size: .95rem;
}
.nw-leeg p {
  font-size: .82rem;
  color: #94a3b8;
  margin: 0;
  max-width: 260px;
}

/* ── Stat-chips (bovenaan Mijn Netwerk) ──────────────────────── */
.nw-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.nw-stat-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid;
}
.nw-stat-chip i {
  font-size: 1rem;
  flex-shrink: 0;
}
.nw-stat-chip > div { display: flex; flex-direction: column; }
.nw-stat-chip strong {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.1;
}
.nw-stat-chip span {
  font-size: .68rem;
  font-weight: 600;
  opacity: .75;
}
.nw-stat-chip--blue  { background: rgba(227,6,19,.08); border-color: rgba(227,6,19,.25); color: #e30613; }
.nw-stat-chip--green { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.nw-stat-chip--orange{ background: #fffbeb; border-color: #fcd34d; color: #b45309; }

/* Dark mode stat-chips */
html.sg-theme-dark .nw-stat-chip--blue  { background: rgba(227,6,19,.15); border-color: rgba(227,6,19,.35); color: #f87171; }
html.sg-theme-dark .nw-stat-chip--green { background: #052e16; border-color: #16a34a; color: #86efac; }
html.sg-theme-dark .nw-stat-chip--orange{ background: #1c1200; border-color: #b45309; color: #fcd34d; }

/* ── Netwerk groepen (Mijn Netwerk tab) ──────────────────────── */
.nw-groep {
  margin-bottom: 16px;
}
.nw-groep-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid #f1f5f9;
}
.nw-groep-count {
  background: #f1f5f9;
  color: #64748b;
  border-radius: 20px;
  font-size: .65rem;
  font-weight: 800;
  padding: 1px 7px;
  /* margin-left:auto verplaatst naar groepen zonder toegangs-knop via JS */
}

/* ── Klant-groep: aparte stijl met blauw accent ──────────────── */
.nw-groep--klant .nw-groep-header {
  color: #0284c7;
  border-bottom-color: #bae6fd;
}
.nw-groep--klant .nw-relatie-kaart {
  border-color: #bae6fd;
  background: #f0f9ff;
}
.nw-groep--klant .nw-relatie-kaart:hover {
  border-color: #0ea5e9;
  box-shadow: 0 2px 10px rgba(14,165,233,.12);
}

/* ── Relatie-kaart (rij in Mijn Netwerk) ─────────────────────── */
.nw-relaties-lijst {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nw-relatie-kaart {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card, #fff);
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.nw-relatie-kaart:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  border-color: #cbd5e1;
}
.nw-relatie-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .88rem;
  color: #fff;
  flex-shrink: 0;
}
.nw-relatie-info { flex: 1; min-width: 0; }
.nw-relatie-naam {
  font-weight: 700;
  font-size: .88rem;
  color: var(--text, #0f172a);
  /* v15.4.0: geen hard nowrap meer zodat Live-badge zichtbaar blijft */
  white-space: normal;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  line-height: 1.3;
}
.nw-relatie-rol {
  font-size: .75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.nw-relatie-email {
  font-size: .7rem;
  color: #94a3b8;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nw-relatie-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.nw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.nw-dot--green { background: #22c55e; box-shadow: 0 0 0 2px #dcfce7; }
.nw-dot--red   { background: #ef4444; box-shadow: 0 0 0 2px #fee2e2; }
.nw-dot--grey  { background: #94a3b8; box-shadow: 0 0 0 2px #e2e8f0; }
.nw-tarief {
  font-size: .72rem;
  font-weight: 700;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 1px 6px;
}

/* Dark mode relatie-kaart */
html.sg-theme-dark .nw-relatie-kaart {
  background: #0d1a2e;
  border-color: rgba(255,255,255,.08);
}
html.sg-theme-dark .nw-relatie-kaart:hover {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
html.sg-theme-dark .nw-relatie-naam { color: #e2e8f0; }
html.sg-theme-dark .nw-groep-header { border-bottom-color: rgba(255,255,255,.07); }
html.sg-theme-dark .nw-groep-count  { background: rgba(255,255,255,.08); color: #94a3b8; }

/* ── Personen grid (Tab 2) ───────────────────────────────────── */
.network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.network-card {
  background: var(--card, #fff);
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 12px 12px;
  cursor: pointer;
  transition: box-shadow .15s, transform .12s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.network-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.network-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 2px;
}
.network-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .95rem;
  color: #fff;
  flex-shrink: 0;
}
.network-card h4 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text, #0f172a);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.network-role {
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.network-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.network-tag {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: .62rem;
  font-weight: 600;
  padding: 2px 7px;
}
.availability {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  color: #64748b;
  width: 100%;
  justify-content: center;
}
.avail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.avail-dot.green { background: #22c55e; }
.avail-dot.red   { background: #ef4444; }
.verified-icon   { font-size: .8rem; color: #16a34a; }

/* Dark mode network-card */
html.sg-theme-dark .network-card {
  background: #0d1a2e;
  border-color: rgba(255,255,255,.08);
}
html.sg-theme-dark .network-card:hover {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
html.sg-theme-dark .network-card h4 { color: #e2e8f0; }
html.sg-theme-dark .network-tag {
  background: rgba(255,255,255,.07);
  color: #94a3b8;
  border-color: rgba(255,255,255,.08);
}

/* ── Uitnodigingen (Tab 4) ───────────────────────────────────── */
.nw-uitn-compose {
  background: var(--card, #fff);
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.nw-uitn-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 480px) {
  .nw-uitn-form .form-row { grid-template-columns: 1fr; }
}
.nw-uitn-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nw-uitn-form label {
  font-size: .72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.nw-uitn-form input,
.nw-uitn-form select {
  padding: 9px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 9px;
  font-size: .85rem;
  font-family: inherit;
  background: #f8fafc;
  color: #0f172a;
  outline: none;
  transition: border-color .15s;
}
.nw-uitn-form input:focus,
.nw-uitn-form select:focus {
  border-color: #e30613;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(227,6,19,.08);
}

.nw-uitn-sectie {
  margin-bottom: 14px;
}
.nw-uitn-sectie-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 800;
  color: #475569;
  margin-bottom: 8px;
  padding: 6px 0 8px;
  border-bottom: 1.5px solid #f1f5f9;
}
.nw-uitn-kaart {
  border: 1.5px solid;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: box-shadow .15s;
}
.nw-uitn-kaart:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
}

/* Dark mode uitnodigingen */
html.sg-theme-dark .nw-uitn-compose {
  background: #0d1a2e;
  border-color: rgba(255,255,255,.08);
}
html.sg-theme-dark .nw-uitn-form input,
html.sg-theme-dark .nw-uitn-form select {
  background: #0f1e35;
  color: #e2e8f0;
  border-color: rgba(255,255,255,.12);
}
html.sg-theme-dark .nw-uitn-sectie-header {
  color: #94a3b8;
  border-bottom-color: rgba(255,255,255,.07);
}
html.sg-theme-dark .nw-uitn-form label { color: #64748b; }

/* ── Netwerk sectie header knop ──────────────────────────────── */
#sec-netwerk .section-header .btn-xs {
  background: #e30613 !important;
  color: #fff !important;
  border-color: #e30613 !important;
  font-weight: 700 !important;
}
#sec-netwerk .section-header .btn-xs:hover {
  background: #c5000f !important;
}

/* ── Responsief: kleine schermen ─────────────────────────────── */
@media (max-width: 380px) {
  .nw-tab { min-width: 64px; font-size: .68rem; padding: 7px 6px; }
  .nw-stats-row { grid-template-columns: repeat(3,1fr); gap: 6px; }
  .nw-stat-chip { padding: 8px 8px; gap: 6px; }
  .nw-stat-chip strong { font-size: .95rem; }
  .network-grid { grid-template-columns: repeat(2,1fr); }
}

/* ── Account-overzicht kaart (Netwerk → Mijn Netwerk voor developer) */
.nw-account-overzicht {
  background: linear-gradient(135deg, #0f172a, #1e2d45);
  border: 1.5px solid #e30613;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  color: #e2e8f0;
}
.nw-account-overzicht-titel {
  font-size: .82rem;
  font-weight: 800;
  color: #f87171;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nw-account-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: .78rem;
}
.nw-account-row:last-child { border-bottom: none; }
.nw-account-avatar-mini {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .65rem;
  color: #fff;
  flex-shrink: 0;
}
.nw-account-email { color: #94a3b8; font-size: .72rem; }
.nw-account-rol-badge {
  margin-left: auto;
  font-size: .62rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Network chip (filter) ───────────────────────────────────── */
#sec-netwerk .chip {
  background: #f1f5f9;
  color: #475569;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
}
#sec-netwerk .chip:hover {
  background: #e2e8f0;
  color: #334155;
}
#sec-netwerk .chip.active {
  background: #e30613;
  color: #fff;
  border-color: #e30613;
  box-shadow: 0 2px 8px rgba(227,6,19,.2);
}

/* Dark mode chips */
html.sg-theme-dark #sec-netwerk .chip {
  background: rgba(255,255,255,.06);
  color: #94a3b8;
  border-color: rgba(255,255,255,.1);
}
html.sg-theme-dark #sec-netwerk .chip.active {
  background: #e30613;
  color: #fff;
  border-color: #e30613;
}

/* ── search-bar in netwerk ────────────────────────────────────── */
#sec-netwerk .search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card, #fff);
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 9px 12px;
  transition: border-color .15s;
}
#sec-netwerk .search-bar:focus-within {
  border-color: #e30613;
  box-shadow: 0 0 0 3px rgba(227,6,19,.08);
}
#sec-netwerk .search-bar input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: .88rem;
  color: var(--text, #0f172a);
}
#sec-netwerk .search-bar i { color: #94a3b8; font-size: .85rem; }

/* ═══════════════════════════════════════════════════════════════
   CHAT CONTACTEN PANEEL — netwerk contacten in chat
   ═══════════════════════════════════════════════════════════════ */
#chatNetwerkContacten {
  width: 260px;
  min-width: 220px;
  max-width: 280px;
  border-right: 1px solid var(--border, #e2e8f0);
  display: flex;
  flex-direction: column;
  background: var(--card, #fff);
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
  transition: width .2s;
}
.chat-contact-groep {}
.chat-contact-rij {
  transition: background .1s;
}
.chat-contact-rij:active { background: #f1f5f9 !important; }

/* Mobiel: contacten-paneel verberg standaard, toon via toggle */
@media (max-width: 640px) {
  #chatNetwerkContacten {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    z-index: 50;
    transform: translateX(-100%);
    width: 260px !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.14);
  }
  #chatNetwerkContacten.open {
    transform: translateX(0);
  }
}

/* Donkere modus contacten */
html.sg-theme-dark #chatNetwerkContacten {
  background: #0d1a2e;
  border-right-color: rgba(255,255,255,.08);
}
html.sg-theme-dark .chat-contact-rij:hover { background: rgba(255,255,255,.05) !important; }

/* ═══════════════════════════════════════════════════════════════
   QR UITNODIGING — animaties
   ═══════════════════════════════════════════════════════════════ */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.15); }
}

/* QR volledig scherm overlay */
#qrVolSchermOverlay {
  animation: fadeInQR .25s ease-out;
}
@keyframes fadeInQR {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* QR modal */
#qrUitnodigingModal > div {
  animation: slideUpQR .22s ease-out;
}
@keyframes slideUpQR {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   OG CONTACT INSTELLINGEN MODAL
   ═══════════════════════════════════════════════════════════════ */
#ogContactInstModal > div {
  animation: slideUpModal .22s ease-out;
}
@keyframes slideUpModal {
  from { transform: translateY(50px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Checkbox toggle visueel */
#ogContactInstModal [id^="chk_std_"],
#ogContactInstModal [id^="chk_deel_"] {
  transition: background .15s, border-color .15s;
}

/* Dark mode contact instellingen */
html.sg-theme-dark #ogContactInstModal > div {
  background: #0d1a2e;
}
html.sg-theme-dark #ogContactInstModal .sticky {
  background: #0d1a2e !important;
}

/* ═══════════════════════════════════════════════════════════════
   UITNODIGINGSKAART VERBETERINGEN
   ═══════════════════════════════════════════════════════════════ */
.nw-uitn-kaart {
  transition: box-shadow .15s, transform .1s;
}
.nw-uitn-kaart:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.09);
  transform: translateY(-1px);
}

/* Uitnodiging QR + Mail knop rij */
.nw-uitn-actie-rij {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(0,0,0,.07);
}

/* Snelknoppen bovenaan uitnodigingen-tab */
.nw-uitn-snelknoppen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 360px) {
  .nw-uitn-snelknoppen { grid-template-columns: 1fr; }
}

/* Dark mode uitnodigingen verbeteringen */
html.sg-theme-dark .nw-uitn-kaart {
  border-color: rgba(255,255,255,.1) !important;
}

/* ═══════════════════════════════════════════════════════════════
   NETWERK ACTIE KNOPPEN ONDERAAN (Mijn Netwerk)
   ═══════════════════════════════════════════════════════════════ */
.nw-actie-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 360px) {
  .nw-actie-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE NETWERK ALGEMEEN
   ═══════════════════════════════════════════════════════════════ */
html.sg-theme-dark .nw-uitn-compose {
  background: #0d1a2e;
  border-color: rgba(255,255,255,.08);
}

/* ════════════════════════════════════════════════════════════════
   v5.40 — LOGINSCHERM OPSCHONEN & COMPACTER
   ════════════════════════════════════════════════════════════════ */

/* ── Login header: compacter op kleine schermen ── */
.lc-header {
  padding: 22px 24px 20px !important;
}
.lc-logo-wrap {
  width: 60px !important;
  height: 60px !important;
  border-radius: 14px !important;
  margin: 0 auto 10px !important;
}
.lc-logo-img {
  width: 44px !important;
  height: 44px !important;
}
.lc-brand {
  font-size: 1.3rem !important;
}
.lc-tagline {
  font-size: .64rem !important;
  letter-spacing: 1.4px !important;
  margin-top: 3px !important;
}

/* ── Formulier: minder verticale ruimte ── */
.lc-form {
  padding: 16px 20px 6px !important;
  gap: 10px !important;
}
.lc-login-btn {
  padding: 12px !important;
  margin-top: 2px !important;
}
.lc-forgot {
  margin-top: -2px !important;
}

/* ── Account hint wrapper: geen eigen box ── */
.lc-account-hint {
  margin: 6px 20px 10px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* ── Toggle-knop (inklapbaar) ── */
.lc-accounts-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s !important;
}
.lc-accounts-toggle:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

/* ── Uitgeklapte body: eigen card ── */
#lcAccountsBody {
  margin-top: 6px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
}
#lcAccountsBody::-webkit-scrollbar { width: 3px; }
#lcAccountsBody::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }

/* ── Godmode knop: iets minder ruimte ── */
.lc-godmode-btn {
  padding: 4px 10px 8px !important;
}

/* ══════════════════════════════════════════════════════════════
   PLANNING DASHBOARD STAT-KAARTEN — Dark-mode safe v16.9.15
   ══════════════════════════════════════════════════════════════ */

/* Basis kaart: achtergrond en border via CSS-variabelen → volgt automatisch dark/light */
.tp-dash-stat {
  flex: 1;
  min-width: 100px;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: var(--card, #fff);
  border: 1.5px solid var(--border, #e2e8f0);
  transition: transform .1s, box-shadow .1s;
  box-sizing: border-box;
}
.tp-dash-stat:active { transform: scale(.97); }

/* Gekleurde linkerbalk per type */
.tp-dash-stat-blauw { border-left: 3px solid #3b82f6 !important; }
.tp-dash-stat-groen { border-left: 3px solid #22c55e !important; }
.tp-dash-stat-amber { border-left: 3px solid #f59e0b !important; }

/* Icon wrapper */
.tp-dash-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

/* Getal */
.tp-dash-num {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
}

/* Label */
.tp-dash-lbl {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 1px;
}

/* Dark mode: iets helderder achtergrond voor de kaarten */
html.sg-theme-dark .tp-dash-stat {
  background: #0f1e35;
  border-color: rgba(255,255,255,.1);
}
html.sg-theme-dark .tp-dash-stat-blauw { border-left-color: #3b82f6 !important; }
html.sg-theme-dark .tp-dash-stat-groen { border-left-color: #22c55e !important; }
html.sg-theme-dark .tp-dash-stat-amber { border-left-color: #f59e0b !important; }

/* ── Planning Alert Banner — dark-mode safe ── */
#planOverzichtAlertBanner .plan-alert-card {
  background: var(--card, #fff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-left: 4px solid #ef4444;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
html.sg-theme-dark #planOverzichtAlertBanner .plan-alert-card {
  background: #1a0a0a;
  border-color: rgba(239,68,68,.25);
  border-left-color: #ef4444;
}

/* ══════════════════════════════════════════════════════════════
   PROFIEL SECTIE — Mobiele fixes v16.9.14
   ══════════════════════════════════════════════════════════════ */

/* Zorg dat de profiel sectie geen horizontale overflow krijgt */
#sec-profile {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#sec-profile .card,
#sec-profile > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* form-row in profiel sectie: altijd 1 kolom op smalle schermen */
@media (max-width: 520px) {
  #sec-profile .form-row {
    grid-template-columns: 1fr !important;
  }
  /* Beschikbaarheid grid: zorg dat de 'auto' kolom niet te breed wordt */
  #sec-profile [style*="grid-template-columns:1fr auto"] {
    grid-template-columns: 1fr auto !important;
  }
  /* Rol-kaarten: max 2 per rij maar compacter */
  #profielRolKaarten {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }
}

/* Telefoon + Opslaan rij: wrap op smal scherm */
@media (max-width: 400px) {
  #sec-profile [style*="display:flex;gap:8px;align-items:center"] {
    flex-wrap: wrap;
  }
  #sec-profile [style*="display:flex;gap:8px;align-items:center"] button {
    width: 100%;
  }
}

/* ── Tabs in de body ── */
#lcAccountsBody .lc-tabs-bar {
  margin-bottom: 8px;
}
#lcAccountsBody .lc-tab-pane {
  padding: 0 !important;
}
#lcAccountsBody .lc-pw-badge {
  margin-bottom: 6px;
}

/* ── Geen scroll op de login-card zelf als content past ── */
.login-card {
  max-height: 94vh !important;
}

/* ════════════════════════════════════════════════════════════════
   LOGIN OPGESCHOOND — nieuwe compacte structuur
   ════════════════════════════════════════════════════════════════ */

/* ── Tabs: alleen 2 tabs (Test + Echt), volle breedte ── */
.lc-account-hint .lc-tabs-bar {
  background: #f1f5f9;
  border-radius: 10px;
  padding: 3px;
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.lc-account-hint .lc-tab-btn {
  flex: 1;
  padding: 7px 4px;
  font-size: .72rem;
  font-weight: 700;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  background: transparent;
  color: #94a3b8;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background .15s, color .15s;
}
.lc-account-hint .lc-tab-btn.active {
  background: #fff;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
}
.lc-account-hint .lc-tab-btn:hover:not(.active) {
  background: rgba(255,255,255,.5);
  color: #475569;
}

/* ── Tab pane: scrollbaar als er veel accounts zijn ── */
.lc-account-hint .lc-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
}
.lc-account-hint .lc-tab-pane::-webkit-scrollbar { width: 3px; }
.lc-account-hint .lc-tab-pane::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }

/* ── pw-badge in tab pane ── */
.lc-account-hint .lc-pw-badge {
  margin-bottom: 4px;
}

/* ── "Meer rollen" uitklapper ── */
.lc-meer-rollen {
  margin-top: 2px;
}
.lc-meer-rollen summary {
  font-size: .68rem;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 7px;
  transition: background .15s, color .15s;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.lc-meer-rollen summary::-webkit-details-marker { display: none; }
.lc-meer-rollen summary:hover {
  background: #f1f5f9;
  color: #475569;
}
.lc-meer-rollen[open] summary {
  color: #475569;
}
.lc-meer-rollen[open] summary .fa-chevron-down {
  transform: rotate(180deg);
}
.lc-meer-rollen summary .fa-chevron-down {
  transition: transform .2s;
  font-size: .58rem;
}
.lc-meer-rollen-inhoud {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
  border-top: 1px solid #f1f5f9;
  margin-top: 4px;
}

/* ── Onderste links: SSO + App Store compact ── */
.lc-bottom-links {
  margin: 4px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lc-bottom-link-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 11px;
  border: 1.5px solid rgba(99,102,241,.25);
  background: linear-gradient(135deg, rgba(99,102,241,.05), rgba(124,58,237,.05));
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  color: inherit;
  transition: background .15s, border-color .15s;
}
.lc-bottom-link-btn:hover {
  background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(124,58,237,.10));
  border-color: rgba(99,102,241,.45);
}
.lc-bottom-link-red {
  border-color: rgba(227,6,19,.2) !important;
  background: linear-gradient(135deg, rgba(227,6,19,.05), rgba(234,88,12,.05)) !important;
}
.lc-bottom-link-red:hover {
  background: linear-gradient(135deg, rgba(227,6,19,.09), rgba(234,88,12,.09)) !important;
  border-color: rgba(227,6,19,.35) !important;
}
.lc-blb-icons {
  font-size: .95rem;
  letter-spacing: -.1em;
  flex-shrink: 0;
}
.lc-blb-icon-single {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.lc-blb-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lc-blb-text strong {
  font-size: .78rem;
  font-weight: 800;
  color: #111;
  display: block;
}
.lc-blb-text small {
  font-size: .66rem;
  color: #6b7280;
}
.lc-bottom-link-btn .fa-arrow-right {
  color: #e30613;
  font-size: .7rem;
  flex-shrink: 0;
}

/* ── God Mode knop: discreet onderaan ── */
.lc-godmode-wrap {
  text-align: center;
  margin-bottom: 6px;
}
.lc-godmode-btn {
  background: none !important;
  border: none !important;
  font-size: .65rem !important;
  color: #cbd5e1 !important;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 10px !important;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .15s, background .15s !important;
  font-weight: 600;
  letter-spacing: .04em;
}
.lc-godmode-btn:hover {
  color: #94a3b8 !important;
  background: #f8fafc !important;
}

/* ════════════════════════════════════════════════════════════════
   PLANNING SECTIE ISOLATIE
   Probleem: position:sticky kinderen van #sec-planning.hidden
   ontsnappen aan display:none van de parent en zweven over het
   loginscherm. Elk element apart targeten wint van generieke regels.
   ════════════════════════════════════════════════════════════════ */
#sec-planning.hidden #planningModeTabs,
#sec-planning.hidden #tpHeader,
#sec-planning.hidden #tpFilterBar,
#sec-planning.hidden #planTeamWrap,
#sec-planning.hidden #tpBody,
#sec-planning.hidden #planTouchboardWrap,
#sec-planning.hidden #tbIB_bouwPanel,
#sec-planning.hidden #tbIB_toasts,
#sec-planning.hidden #tbIB_milieuModal,
#sec-planning.hidden .planning-mode-tabs,
#sec-planning.hidden .tp-header,
#sec-planning.hidden .tp-filter-bar,
#sec-planning.hidden .tp-body,
#sec-planning.hidden .plan-mode-theme-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: static !important;
}

/* ════════════════════════════════════════════════════════════════
   v5.30 — LOGINSCHERM ISOLATIE (veilige methode)
   ────────────────────────────────────────────────────────────────
   PROBLEEM: inline-planning-board.js injecteert een <style>-blok
   (#tbInlineStyle) met:
     #planTouchboardWrap { position:fixed!important; inset:0;
                           z-index:9999!important; }
   Dit zweeft over het loginscherm omdat het element een fixed
   positie heeft die de parent-stacking negeert.

   OPLOSSING: #planTouchboardWrap is standaard ALTIJD verborgen via
   display:none. Alleen als body.tbib-board-active actief is
   (= gebruiker heeft Touchboard 3.0 geopend) wordt het zichtbaar.
   Die klasse wordt gezet door switchPlanningMode('board') in JS.

   VEILIG: raakt NIETS aan de topbar, bottom-nav of .main-content.
   ════════════════════════════════════════════════════════════════ */

/* ── planTouchboardWrap: verborgen tenzij .tbib-active class aanwezig ──
   CSS only werkt NIET omdat tbInlineStyle (JS) altijd wint via !important.
   De echte fix zit in inline-planning-board.js:
   - boardWrap.classList.add('tbib-active') bij openen
   - boardWrap.classList.remove('tbib-active') bij sluiten
   - De JS-style is aangepast naar: body.tbib-board-active #planTouchboardWrap { position:fixed }
   - En: #planTouchboardWrap:not(.tbib-active) { display:none !important }
   CSS hier als extra vangnet (werkt als tbInlineStyle nog niet geladen is):
*/
#planTouchboardWrap:not(.tbib-active) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* floating board-panels: ook verbergen buiten board-modus */
#tbIB_bouwPanel,
#tbIB_toasts,
#tbIB_milieuModal {
  display: none !important;
}
body.tbib-board-active #tbIB_bouwPanel.open {
  display: flex !important;
}
body.tbib-board-active #tbIB_toasts {
  display: flex !important;
}
body.tbib-board-active #tbIB_milieuModal {
  display: flex !important;
}

/* ════════════════════════════════════════════════════════════════
   v5.40 — SEC-GPSTRACKER & SEC-VERKOOPPAGINA DISPLAY FIX
   ────────────────────────────────────────────────────────────────
   PROBLEEM: Deze secties hebben inline style="display:flex" in de
   HTML. Inline styles winnen altijd van externe CSS — ook van
   .section.hidden { display:none !important; }.
   Resultaat: de GPS-header (.gpt-header, position:sticky, z-index:400)
   en verkooppagina-header zweefden zichtbaar over het loginscherm.

   OPLOSSING:
   1. Inline display:flex verwijderd uit de HTML (sec-gpstracker, sec-verkooppagina)
   2. gps-tracker.css: #sec-gpstracker { display:flex } → :not(.hidden) selector
   3. Extra CSS-vangnet hieronder voor elk floating child-element
   ════════════════════════════════════════════════════════════════ */

/* GPS Tracker: sticky header & alle kinderen verbergen als sectie hidden is */
#sec-gpstracker.hidden,
#sec-gpstracker.hidden * {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Verkooppagina: zelfde vangnet */
#sec-verkooppagina.hidden,
#sec-verkooppagina.hidden * {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Extra vangnet: .gpt-header buiten actieve GPS-sectie nooit floating */
#sec-gpstracker.hidden .gpt-header,
#sec-gpstracker.hidden #gptHeader {
  display: none !important;
  position: static !important;
  z-index: -1 !important;
}

/* ════════════════════════════════════════════════════════════════
   UNIVERSELE SECTIE-ISOLATIE (v5.41)
   ────────────────────────────────────────────────────────────────
   Alle kinderen van een .section.hidden die position:sticky of
   position:fixed gebruiken (planning-headers, GPS-header, etc.)
   worden geforceerd verborgen. Dit is het definitieve vangnet.
   ════════════════════════════════════════════════════════════════ */
.section.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  /* overflow:hidden zorgt dat sticky-children niet ontsnappen */
  overflow: hidden !important;
  /* height:0 + max-height:0 als extra barrière voor flex-secties */
  max-height: 0 !important;
  height: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   CHAT — EMOJI PICKER & HEADER FIXES (v5.42)
   ────────────────────────────────────────────────────────────────
   FIX 1: Emoji-picker verschijnt nu correct boven het invoerveld.
           De picker staat in de position:relative tekstveld-rij,
           zodat bottom:calc(100% + 4px) correct berekend wordt.

   FIX 2: Chat-header (Terug + naam + knoppen) valt op groot scherm
           niet meer achter de linkerzijbalk. De overlay vult de
           volledige main-content breedte.

   FIX 3: sec-team overflow:visible zodat emoji-picker boven de
           onderrand uitsteekt zonder afgekapt te worden.
   ════════════════════════════════════════════════════════════════ */

/* ── Emoji picker: altijd zichtbaar, nooit afgekapt ── */
#tcNavEmojiPicker {
  /* z-index hoger dan alles in de chat overlay */
  z-index: 9999 !important;
  /* Vaste breedte zodat hij niet breder is dan de chat */
  max-width: 100%;
}

/* ════════════════════════════════════════════════════════════════
   CHAT OVERLAY — DEFINITIEVE POSITIE-FIX (v5.44)
   ────────────────────────────────────────────────────────────────
   Strategie:
   • Mobiel  : overlay is position:absolute binnen #sec-team (geen sidebar)
   • Desktop : overlay is position:FIXED zodat de sidebar er NOOIT over heen
               kan vallen — left gaat naar rechts van de sidebar
   ════════════════════════════════════════════════════════════════ */

/* ── Chat berichten: eigen scroll ── */
#tcChatMessages {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ── Chat header: altijd zichtbaar, nooit afgekapt ── */
#tcChatHeader {
  position: relative;
  z-index: 10;
  overflow: visible !important;
  flex-shrink: 0;
}

/* Header-content (naam + knoppen) ── flex rij met scroll op kleine schermen */
#tcChatHeaderContent {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

/* Actie-rij (Locatie, GPS …) ── horizontaal scrollbaar, scrollbar verborgen */
#tcChatExtraActions {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#tcChatExtraActions::-webkit-scrollbar { display: none; }

/* ── Emoji-picker in de invoer-rij: boven alles ── */
#tcNavEmojiPicker {
  z-index: 9999 !important;
  max-width: 100% !important;
}

/* ── Gesprekkenlijst vult het scherm minus topbar en bottom-nav ── */
#tcConvList {
  height: calc(100vh - var(--topbar-h, 56px) - var(--bottom-h, 48px));
}

/* ── sec-team: positie-anker voor de absolute chat-overlay ──────── */
/* KRITIEK: #tcChatOverlay heeft position:absolute — de parent      */
/* (#sec-team) MOET position:relative hebben anders positioneert    */
/* de overlay t.o.v. een hoger element en verdwijnt de chat-inhoud. */
#sec-team {
  position: relative !important;
  padding: 0 !important;  /* geen sectie-padding — chat vult zelf de ruimte */
}

/* ── Mobiel: overlay vult #sec-team volledig ── */
#tcChatOverlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: visible;   /* emoji-picker mag uitsteken */
  z-index: 50;
}

/* ── Desktop: FIXED overlay — linker grens = rechts van sidebar ── */
@media (min-width: 900px) {
  /* Gesprekkenlijst: geen bottom-nav op desktop */
  #tcConvList {
    height: calc(100vh - var(--topbar-h, 56px)) !important;
  }

  /* sec-team: normaal overflow, geen clip */
  #sec-team {
    overflow: visible !important;
    min-width: 0;
  }

  /* Overlay: FIXED zodat sidebar er NOOIT over heen valt
     z-index ladder: topbar=400 > sidebar=300 > overlay=250 > content=100 */
  #tcChatOverlay {
    position: fixed !important;
    top: var(--topbar-h, 56px) !important;
    left: var(--sidebar-w, 264px) !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 250 !important;
    overflow: visible !important;  /* emoji-picker mag uitsteken */
  }

  /* Emoji-picker: vult breedte van de overlay */
  #tcNavEmojiPicker {
    left: 0 !important;
    right: 0 !important;
  }

  /* Input-bar: geen extra padding (geen bottom-nav op desktop) */
  #tcChatInputBar {
    padding-bottom: 0 !important;
    overflow: visible !important;  /* emoji-picker uitsteken */
  }
}

/* ════════════════════════════════════════════════════════════════
   KRITIEKE LAYOUT FIXES (v5.44)
   ────────────────────────────────────────────────────────────────
   1. Topbar z-index: 400 — ALTIJD boven sidebar (300) en bottom-nav (200)
   2. Chat overlay: op desktop position:fixed zodat sidebar hem nooit overlapt
   3. Nav-badge in sidebar: altijd 9+ cap, nooit meer dan 2 cijfers breed
   4. Tooltip ballon (title-attribuut) mag sidebar niet uitsteken
   ════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Topbar ALTIJD boven sidebar ── */
.topbar {
  z-index: 400 !important;   /* sidebar=300, bottom-nav=200 */
}

/* ── FIX 2: Chat overlay — al definitief opgelost in blok hierboven ── */
/* (Geen dubbele regels meer — see "DEFINITIEVE POSITIE-FIX" sectie) */

/* ── FIX 3: Nav-badge sidebar — altijd compact, max 2 tekens ── */
.nav-badge {
  max-width: 28px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── FIX 4: Sidebar nav-items — labels mogen wrappen (fix mobiele afkapping) ── */
/*
  PROBLEEM (v5.44): overflow:hidden + text-overflow:ellipsis op .nav-item zelf
  kapte lange labels af ("Abonnement &…", "Uitbreiding aa…", "OPDRACHTGEVE…").
  OPLOSSING: overflow:visible op het button-element; label-span handelt
  wrapping af via -webkit-line-clamp (max 2 regels) — zie style.css.
  De ::after pseudo-tooltip krijgt alleen een max-width op desktop.
*/
.nav-item {
  overflow: visible !important;   /* FIX: geen knip meer op button-niveau */
}
/* Label-span: wrap toestaan, max 2 regels — zie style.css voor volledige definitie */
.nav-item > span:not(.nav-badge) {
  white-space:        normal    !important;
  overflow:           hidden    !important;
  text-overflow:      clip      !important;   /* ellipsis werkt niet met line-clamp */
  display:            -webkit-box !important;
  -webkit-line-clamp: 2         !important;
  -webkit-box-orient: vertical  !important;
  word-break:         break-word !important;
}
/* Zorg dat de tooltip niet buiten de sidebar steekt op desktop */
@media (min-width: 900px) {
  .sidebar .nav-item::after {
    max-width: calc(100vw - var(--sidebar-w, 264px) - 20px);
    white-space: normal;
  }
}

/* ════════════════════════════════════════════════════════════════
   VERBINDINGS-QR TOPBAR KNOP (v5.43)
   ────────────────────────────────────────────────────────────────
   De sgConnectQRBtn knop in de topbar toont een rode badge bij
   openstaande verbindingsverzoeken. De badge positioneert absoluut
   t.o.v. de knop (position:relative al inline gezet).
   ════════════════════════════════════════════════════════════════ */

/* Verbindings-QR knop — donkermodus: blauw accent */
html.sg-theme-dark #sgConnectQRBtn {
  background: rgba(99,102,241,.18) !important;
  border: 1.5px solid rgba(99,102,241,.35) !important;
  color: #a5b4fc !important;
  transition: background .18s, color .18s, border-color .18s;
}
html.sg-theme-dark #sgConnectQRBtn:hover,
html.sg-theme-dark #sgConnectQRBtn:focus {
  background: rgba(99,102,241,.30) !important;
  border-color: rgba(99,102,241,.55) !important;
  color: white !important;
}
html.sg-theme-dark #sgConnectQRBtn:active {
  background: rgba(99,102,241,.45) !important;
  color: white !important;
}

/* Verbindings-QR knop — lichtmodus: donker slate op witte topbar */
html.sg-theme-light #sgConnectQRBtn {
  background: rgba(15,23,42,.07) !important;
  border: 1.5px solid rgba(15,23,42,.15) !important;
  color: #475569 !important;
  transition: background .18s, color .18s, border-color .18s;
}
html.sg-theme-light #sgConnectQRBtn:hover,
html.sg-theme-light #sgConnectQRBtn:focus {
  background: rgba(15,23,42,.12) !important;
  border-color: rgba(15,23,42,.25) !important;
  color: #0f172a !important;
}
html.sg-theme-light #sgConnectQRBtn:active {
  background: rgba(227,6,19,.1) !important;
  border-color: rgba(227,6,19,.3) !important;
  color: #e30613 !important;
}

/* Badge: rood bolletje rechtsboven op de knop */
#sgConnectQRBadge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #e30613;
  color: white;
  font-size: .55rem;
  font-weight: 800;
  border-radius: 8px;
  padding: 1px 5px;
  min-width: 14px;
  text-align: center;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(227,6,19,.45);
  animation: badgePop .22s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes badgePop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════
   LOGIN SCREEN Z-INDEX FIX (v5.50)
   ────────────────────────────────────────────────────────────────
   PROBLEEM: .screen { position:fixed } had geen z-index → op mobiel
   (Chrome Android) zweefde de topbar (z:400), sidebar (z:300) en
   bottomnav (z:200) BOVEN het loginscherm. Gebruiker zag dashboard-
   fragmenten zichtbaar door/achter het loginformulier.

   OPLOSSING: loginScreen / .screen krijgt z-index:99980 — boven
   alle app-elementen (topbar 400, modals 99999 vangen we apart op).
   .app.hidden → display:none !important zodat de 760KB app-DOM
   NIET meegerenderd wordt als loginScreen zichtbaar is.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. LoginScreen altijd BOVEN alle app-elementen ── */
#loginScreen,
.screen {
  z-index: 99980 !important;
  isolation: isolate;
}

/* ── 2. App helemaal verborgen zolang loginScreen actief is ── */
.app.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── 3. Splash altijd zichtbaar tot hij weggaat ── */
.splash {
  z-index: 99990 !important;
}

/* ── 4. Als #app hidden is: geen enkel kind mag doorprikken ── */
#app.hidden {
  overflow: hidden !important;
  max-height: 0 !important;
  height: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   GROEPSCHAT HEADER ACTIE-KNOPPEN (v5.43)
   ────────────────────────────────────────────────────────────────
   De nieuwe extern-toevoegen en QR-delen knoppen in de groepschat
   header (#tcNavChatActions) zijn 34×34 px rondom cirkel.
   Op kleine schermen schuift het rij-element scrollbaar.
   ════════════════════════════════════════════════════════════════ */

/* Header-actie-knoppen: nooit afgekapt op kleine schermen */
#tcNavChatActions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  max-width: calc(100% - 160px); /* ruimte laten voor naam */
}
#tcNavChatActions::-webkit-scrollbar { display: none; }

/* Desktop: meer ruimte voor actie-knoppen */
@media (min-width: 600px) {
  #tcNavChatActions {
    max-width: none;
    overflow-x: visible;
  }
}

/* ════════════════════════════════════════════════════════════════
   PROEFPERIODE BANNER IN DASHBOARD (v5.43)
   ════════════════════════════════════════════════════════════════ */
#sgProefBanner {
  margin: 8px 0 4px;
  border-radius: 12px;
  overflow: hidden;
  animation: fadeInUp .3s ease both;
}

/* ════════════════════════════════════════════════════════════════
   v16.9.68 — PROJECT-DETAIL TABS COMPLETE FIX
   ────────────────────────────────────────────────────────────────
   PROBLEEM 1: .tab-content elementen hebben class="tab-content hidden"
   in de HTML. .hidden { display:none !important } uit style.css r.37
   wint van .tab-content.active { display:block } omdat !important
   altijd wint, ook al is de selector specifieker.

   OPLOSSING: .tab-content.active ALTIJD display:block met !important
   zodat ook de .hidden class overreden wordt.

   PROBLEEM 2: .tab-btn.active gebruikt var(--primary) = #0f172a
   (donkerblauw/zwart) in sommige CSS blokken. var(--accent) = #e30613
   (rood) is de juiste kleur.

   OPLOSSING: Hard-code #e30613 in de definitieve override hier.

   PROBLEEM 3: DocumentControles kaart — lichte achtergrond
   (rgba(227,6,19,.04)) maar tekst hardcoded color:white op
   lichte sub-elementen.

   OPLOSSING: Zorg dat alle tekst in lichte overview-kaarten
   dark text colour heeft.
   ════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Tab content — active wint ALTIJD van .hidden ───────── */
.tab-content.active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Chat tab heeft flex-layout nodig */
#tab-chat.tab-content.active {
  display: flex !important;
  flex-direction: column;
  gap: 0;
}

/* ── FIX 2: Actieve tab-knop — altijd rood (#e30613) ───────────── */
#projectTabsRow .tab-btn.active,
.tabs .tab-btn.active,
.tab-btn.active {
  background: #e30613 !important;
  color: white !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(227,6,19,.35) !important;
  border: none !important;
}

/* ── FIX 3: DocumentControles & overview-kaarten — lichte cards ── */
/* De lichte gradient kaarten (rgba(227,6,19,.04)) hebben altijd donkere tekst */
#pdDocControleCard .doc-controle-row,
#pdDocControleCard p,
#pdDocControleCard div:not([style*="color:white"]):not([style*="color:#"]) {
  color: var(--text, #1e293b);
}

/* Werkposten-kaart: cijfers in lichte vakken hebben al expliciete kleur,
   maar de labels moeten donker zijn */
#pdWerkPostenCard .kaart-label,
#pdWerkPostenCard [style*="font-size:.68rem"] {
  color: #475569 !important;
}

/* ── FIX 4: Voorbereiding tab container altijd zichtbaar als actief ─ */
#tab-voorbereiding.active,
#tab-team.active,
#tab-annotations.active,
#tab-route.active,
#tab-subprojects.active,
#tab-chat.active,
#tab-docs.active,
#tab-elearning.active,
#tab-moasure.active,
#tab-laadlijst.active {
  display: block !important;
}

/* ── FIX 5: Werkposten stat-tiles — tekst altijd leesbaar ──────── */
/* De lichte tiles (#f0f9ff, #f0fdf4, #fef9c3) mogen GEEN witte tekst krijgen */
[style*="background:#f0f9ff"] strong,
[style*="background:#f0f9ff"] div,
[style*="background:#f0fdf4"] strong,
[style*="background:#f0fdf4"] div,
[style*="background:#fef9c3"] strong,
[style*="background:#fef9c3"] div,
[style*="background:#e0f2fe"] strong,
[style*="background:#e0f2fe"] div {
  /* Behoud expliciete kleur als die al gezet is, anders donker */
  color: inherit;
}

/* De kaart-statistieken MOGEN hun eigen kleur houden (#0369a1, #15803d etc.) */

/* ── FIX 6: Aantekeningen & privé content altijd leesbaar ─────── */
#pdAnnotationsContent textarea,
#pdAnnotationsContent input {
  color: var(--text, #1e293b) !important;
  background: var(--card, #fff) !important;
}

/* ── FIX 7: Tab-scroll op mobiel — actieve tab altijd in beeld ─── */
#projectTabsRow {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
#projectTabsRow .tab-btn {
  scroll-snap-align: center;
}

/* SGConnectQR modal overlay: backdrop */
#sgCQROverlay {
  animation: fadeIn .18s ease;
}

/* Scrollable modal sheets gaan altijd tot het einde */
#sgCQROverlay > div {
  max-height: 92dvh;
  overflow-y: auto;
}

/* ════════════════════════════════════════════════════════════════
   PERSOONLIJKE QR — UITNODIGINGSBANNER (v5.45)
   ────────────────────────────────────────────────────────────────
   Wanneer iemand via een persoonlijke QR-link naar landing.html
   wordt doorgestuurd, toont een vaste banner bovenaan de pagina
   de uitnodiging. Op mobiel comprimeert de banner netjes.
   ════════════════════════════════════════════════════════════════ */

/* Banner slide-in animatie (geladen via inline style in landing.html) */
@keyframes sqrSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* QR-code canvas: altijd zichtbaar, nooit afgekapt */
#sgMijnQRCanvas canvas,
#sgGroepQRCanvas canvas {
  display: block;
  max-width: 100%;
  height: auto !important;
  border-radius: 10px;
}

/* QR wrapper: centreren + padding */
#sgMijnQRCanvas,
#sgGroepQRCanvas {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  border: 1.5px solid #f1f5f9;
  margin: 0 auto;
}

/* ── Rol-keuze overlay voor QR-registratie ── */
#sqrRolOverlay {
  font-family: 'Inter', sans-serif;
}

/* Rol-kaarten hover animatie */
#sqrRolOverlay button[onclick*="_sqrRegistreer"] {
  transition: border-color .18s, background .18s, transform .12s;
}
#sqrRolOverlay button[onclick*="_sqrRegistreer"]:hover {
  transform: translateY(-2px);
}

/* Formulier inputs in overlay */
#sqrRegForm input {
  transition: border-color .18s;
}

/* ── Inkomend verzoek popup: mooier op mobiel ── */
@media (max-width: 480px) {
  #sgCQROverlay > div {
    border-radius: 18px 18px 0 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* ── QR-modal inhoud: QR-code altijd netjes zichtbaar ── */
#sgCQROverlay canvas {
  display: block;
  image-rendering: pixelated;  /* Scherpe pixels, geen blur */
  border-radius: 8px;
}

/* ── Deel-knoppen rij ── */
.sqr-deel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
@media (min-width: 380px) {
  .sqr-deel-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Token-info tekst (klein, grijs) ── */
.sqr-token-info {
  font-size: .68rem;
  color: #94a3b8;
  text-align: center;
  padding: 4px 0;
  font-style: italic;
}

/* ── QR-uitnodiging 'Persoonlijk' badge in modal ── */
.sqr-personal-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: .65rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
  margin-top: 6px;
}

/* ════════════════════════════════════════════════════════════════
   AVATAR PROFIELFOTO FIXES (v5.51)
   ────────────────────────────────────────────────────────────────
   1. Topbar avatar (#topbarAvatarCircle): <img> tag via setAvatarEl
      — fa-user icoon wordt verborgen, foto vult de cirkel volledig.
   2. Chat mijn-profiel avatar (#tcNavMeAvatar): status-dot moet
      BOVEN de foto-<img> zichtbaar blijven (z-index hoger dan img).
   3. Contactenlijst avatars: <img> tags in de lijst-items.
   ════════════════════════════════════════════════════════════════ */

/* Topbar avatar cirkel: foto vult de ruimte, geen overflow */
#topbarAvatarCircle {
  position: relative !important;
  overflow: hidden !important;
}
/* fa-user icoon verbergen als foto aanwezig (.has-foto) */
#topbarAvatarCircle.has-foto #topbarAvatarIcon {
  display: none !important;
}
/* Topbar foto <img>: vult de cirkel volledig */
#topbarAvatarCircle img.sg-av-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  z-index: 2 !important;
}

/* Chat onderste balk — eigen avatar: status-dot altijd zichtbaar boven foto */
#tcNavMeAvatar {
  position: relative !important;
  overflow: hidden !important;
}
#tcNavMeAvatar img.sg-av-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  z-index: 2 !important;
}
/* Status-dot altijd bovenop de foto */
#tcNavStatusDot {
  z-index: 3 !important;
  position: absolute !important;
}

/* Sidebar avatar: foto vult ook hier de ruimte */
#sidebarAvatar img.sg-av-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  z-index: 2 !important;
}

/* ── Welkomst-notificatie na QR-registratie ── */
.sqr-welcome-toast {
  position: fixed;
  bottom: calc(var(--bottom-h, 56px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: white;
  border-radius: 12px;
  padding: 12px 18px;
  font-size: .82rem;
  font-weight: 700;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  animation: sqrToastIn .3s cubic-bezier(.23,1,.32,1) both, sqrToastOut .3s ease 4s both;
  white-space: nowrap;
}
@keyframes sqrToastIn  { from { opacity:0; transform:translateX(-50%) translateY(12px); } }
@keyframes sqrToastOut { to   { opacity:0; transform:translateX(-50%) translateY(8px);  } }

/* Sidebar-overlay: altijd volledig scherm (niet ingekort door andere stijlen) */
.sidebar-overlay {
  width: 100vw !important;
  max-width: 100vw !important;
}

/* Sidebar nav-item layout: zie inline <style id="sgSidebarNavFix"> in index.html */

/* ════════════════════════════════════════════════════════════════
   SGModuleGate — MODULE UIT BANNER & DOM-GATE  (v5.46)
   ────────────────────────────────────────────────────────────────
   Banner die verschijnt als een sectie bezocht wordt terwijl de
   bijbehorende module uitgeschakeld is (via SGModuleGate).
   ════════════════════════════════════════════════════════════════ */

/* Banner animatie */
.sg-module-uit-banner {
  animation: sgModBannerIn .25s cubic-bezier(.23,1,.32,1) both;
}
@keyframes sgModBannerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Donkere modus */
html.sg-theme-dark .sg-module-uit-banner {
  background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(251,191,36,.08)) !important;
  border-color: rgba(245,158,11,.35) !important;
}
html.sg-theme-dark .sg-module-uit-banner div[style*="font-weight:700"] {
  color: #fcd34d !important;
}
html.sg-theme-dark .sg-module-uit-banner div[style*="font-size:.8rem"] {
  color: #fbbf24 !important;
}

/* Elementen met data-module-vereist: transitie bij tonen/verbergen */
[data-module-vereist] {
  transition: opacity .15s ease;
}

/* Marktplaats in basis: altijd toegankelijk via normale nav */
/* (geen extra CSS nodig — marktplaats_basis heeft basis:true) */

/* ════════════════════════════════════════════════════════════════
   SG-NAV FIX v5.47 — SECTIE-WEERGAVE WATERTIGHT
   ────────────────────────────────────────────────────────────────
   PROBLEEM: .section containers met .sg-view-actief tonen soms
   geen content omdat andere regels (height, visibility, display)
   die via .hidden waren ingesteld NIET altijd worden opgeheven.

   OORZAAK: CSS-cascade volgorde. sg-router-styles wordt RUNTIME
   in <head> geïnjecteerd (lage cascade-prioriteit). sg-fixes.css
   is een externe stylesheet — maar laadt ná style.css. Conflicten
   kunnen optreden bij gelijktijdig .hidden + .sg-view-actief.

   OPLOSSING: Expliciete override voor .section.sg-view-actief
   die ALLE display/visibility/height blokkades opruimt.
   Hogere specificiteit dan .section.hidden (ook 2 klassen).
   ════════════════════════════════════════════════════════════════ */

/* Actieve sectie: ALTIJD volledig zichtbaar — geen enkele regel mag dit overschrijven */
.section.sg-view-actief,
#mainContent .section.sg-view-actief,
.main-content .section.sg-view-actief {
  display:          block !important;
  visibility:       visible !important;
  opacity:          1 !important;
  height:           auto !important;
  max-height:       none !important;
  min-height:       0 !important;
  overflow:         visible !important;
  content-visibility: visible !important;
  pointer-events:   auto !important;
  position:         relative !important;
  z-index:          1 !important;
}

/* ── Sidebar-overlay: nooit pointer-events als sidebar dicht is ──
   Voorkomt "onzichtbare overlay blokkeert main-content" bug.
   .sidebar-overlay zonder .active heeft pointer-events:none (style.css)
   maar extra vangnet via .sidebar:not(.open) context.              */
.sidebar:not(.open) ~ .sidebar-overlay,
.sidebar:not(.open) + .sidebar-overlay {
  pointer-events: none !important;
  background: transparent !important;
}

/* ── Skeleton: altijd zichtbaar op alle themes ────────────────── */
.sg-view-skeleton {
  min-height: 200px !important;
  background: var(--card, #f8fafc) !important;
  border-radius: 12px;
  padding: 24px !important;
}

/* ── Nav-item knoppen: altijd klikbaar, nooit geblokkeerd ────── */
.sidebar-nav .nav-item {
  pointer-events: auto !important;
  cursor:         pointer !important;
  position:       relative !important;
  z-index:        1 !important;
}

/* ── Sidebar gesloten: nooit visible buiten het scherm ────────── */
.sidebar:not(.open) {
  pointer-events: none !important;
}
.sidebar.open {
  pointer-events: auto !important;
}

/* ════════════════════════════════════════════════════════════════
   CHAT FIX v5.48 — TEAM CHAT MODULE WEERGAVE
   ────────────────────────────────────────────────────────────────
   PROBLEEM: #tcConvList en #tcChatOverlay renderen niet correct
   wanneer #sec-team .sg-view-actief is.

   OORZAAK 1: .section.sg-view-actief forceert display:block maar
   #tcConvList heeft height:calc(100vh - ...) + display:flex
   nodig. display:block !important overschrijft dit.

   OORZAAK 2: #tcChatOverlay is een sibling van #tcConvList maar
   moet de volledige sectie bedekken bij .tc-open — vereist
   position:absolute op de parent (#sec-team).

   OPLOSSING: Override display voor sec-team naar contents, zodat
   de child-containers hun eigen display-regels volgen. Maak
   #tcChatOverlay absoluut gepositioneerd over de volledige sectie.
   ════════════════════════════════════════════════════════════════ */

/* sec-team: gebruik display:contents zodat tcConvList flex kan zijn */
#sec-team.sg-view-actief,
#sec-team.section.sg-view-actief {
  display:        block !important;
  height:         calc(100vh - var(--topbar-h, 56px) - var(--bottom-h, 60px)) !important;
  max-height:     none !important;
  overflow:       hidden !important;
  position:       relative !important;
  padding:        0 !important;
}

/* Gesprekkenlijst: vul de volledige sectie-hoogte */
#sec-team #tcConvList {
  display:        flex !important;
  flex-direction: column !important;
  height:         100% !important;
  width:          100% !important;
  overflow:       hidden !important;
}

/* Chat-overlay: bedek de hele sectie als het open is */
#tcChatOverlay {
  position: absolute !important;
  top:      0 !important;
  left:     0 !important;
  right:    0 !important;
  bottom:   0 !important;
  z-index:  50 !important;
}

/* Overlay zichtbaar als .tc-open of display:flex via JS */
#tcChatOverlay.tc-open {
  display: flex !important;
  flex-direction: column !important;
}

/* Gesprekkenlijst: contactlijst-scroll netjes */
#tcNavContactList {
  flex:       1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* Profiel-balk (eigen naam/status) onderaan: altijd zichtbaar */
#tcNavMeBar {
  flex-shrink: 0 !important;
}

/* Status-popup: correct gepositioneerd boven de balk */
#tcStatusPopup {
  z-index: 9999 !important;
}

/* Chat input expand: scroll correct binnen de overlay */
#tcChatMessages {
  flex:       1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* Verstuur-knop animatie */
#tcVerstuurKnop {
  transition: transform .15s !important;
}
#tcVerstuurKnop:active {
  transform: scale(.92) !important;
}

/* ════════════════════════════════════════════════════════════════
   CHAT LAYOUT FIX v5.49 — berichten scrollen naar boven + zwarte invoervelden
   ────────────────────────────────────────────────────────────────
   ROOT CAUSE 1: #tcChatHeader heeft GEEN flex-shrink:0 in CSS (alleen inline).
   Als de overlay opent via JS/class wisselt, kan inline-style wegvallen of
   conflicteren. Header krimpt mee → berichten worden naar boven geduwd en
   scrollen buiten viewport.

   ROOT CAUSE 2: #tcChatMessages heeft flex:1 maar geen max-height:none +
   de outer #tcChatOverlay heeft positie top:0/bottom:0 maar geen expliciete
   height:100% — sommige browsers berekenen 100% niet correct via top/bottom
   zonder expliciete height op de positioned ancestor.

   ROOT CAUSE 3: --chat-pill:#1a2540 (dark) → #tcChatInput background zwart.
   Invoervelden moeten altijd var(--card) / var(--bg) background krijgen,
   NOOIT --chat-pill (die is bedoeld voor pill-knoppen, niet inputs).

   FIX: Alle kritieke flex-shrink:0, height:100%, en input-kleur overrides.
   ════════════════════════════════════════════════════════════════ */

/* Overlay: altijd volledige hoogte + flex-column (ook zonder .tc-open class) */
#tcChatOverlay {
  height: 100% !important;
}
#tcChatOverlay[style*="display: flex"],
#tcChatOverlay[style*="display:flex"],
#tcChatOverlay.tc-open {
  display:        flex !important;
  flex-direction: column !important;
  height:         100% !important;
  overflow:       hidden !important;
}

/* Header: nooit krimpen, altijd zichtbaar bovenaan */
#tcChatOverlay #tcChatHeader,
#tcChatHeader {
  flex-shrink:  0 !important;
  flex-grow:    0 !important;
  min-height:   0 !important;
  overflow:     visible !important;
}

/* Welcome-balk (indien zichtbaar): ook niet krimpen */
#tcNavWelcome {
  flex-shrink: 0 !important;
}

/* Berichten-gebied: vult resterende ruimte, scrollt INTERN */
#tcChatOverlay #tcChatMessages,
#tcChatMessages {
  flex:       1 1 0% !important;   /* flex-basis:0 = begint bij 0, groeit mee */
  overflow-y: auto !important;
  min-height: 0 !important;        /* cruciaal: voorkomt dat flex-item groeit voorbij container */
  max-height: none !important;     /* geen externe cap die mis kan gaan */
}

/* Invoerbalk: vaste hoogte onderaan, nooit krimpen */
#tcChatOverlay #tcChatInputBar,
#tcChatInputBar {
  flex-shrink: 0 !important;
  flex-grow:   0 !important;
  background:  var(--chat-card, var(--card, #ffffff)) !important;
}

/* ── INPUT VELD: altijd leesbaar in BEIDE thema's ──────────────────
   --chat-pill is voor pill-knoppen (donkerblauw in dark mode).
   Het invoerveld moet var(--bg) of var(--card) gebruiken, NIET --chat-pill.
   Extra: -webkit-text-fill-color overschrijft autofill-kleur in Safari/Chrome. */
#tcChatInput {
  background:                var(--bg, #f8fafc) !important;
  color:                     var(--text, #111827) !important;
  -webkit-text-fill-color:   var(--text, #111827) !important;
  border-color:              var(--border, #e2e8f0) !important;
}

/* Dark mode: invoerveld expliciet donker-maar-leesbaar */
.sg-theme-dark #tcChatInput {
  background:                var(--card, #1e293b) !important;
  color:                     var(--chat-text, #e2e8f0) !important;
  -webkit-text-fill-color:   var(--chat-text, #e2e8f0) !important;
  border-color:              rgba(255,255,255,.15) !important;
}
.sg-theme-dark #tcChatInput::placeholder {
  color: var(--chat-text-light, #64748b) !important;
  opacity: 1 !important;
}

/* Extra-acties pills (Locatie/GPS/Bellen/WhatsApp/Bestand):
   geen overflow-x scroll probleem door flex-shrink */
#tcChatExtraActions {
  flex-shrink: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   CHAT BALLOON FIX v5.52 — eigen berichten zwart i.p.v. rood
   ────────────────────────────────────────────────────────────────
   ROOT CAUSE: sg-teamchat-extra.js gebruikte var(--primary,#e30613)
   voor eigen berichten. MAAR --primary = #0f172a (near-black, SG
   brand donkerblauw) in style.css lijn 8. De fallback #e30613 wordt
   nooit bereikt omdat --primary altijd bestaat.

   FIX: JS gebruikt nu var(--accent,#e30613). Daarnaast CSS-override
   zodat .tc-bubble-me altijd rood (#e30613) is — dubbele garantie
   ook als de JS-variabele toch --primary oplevert.

   VERDWIJNEN FIX: tcRenderMessages() rendert de #tcChatMessages
   container. Als de container #tcNavMsgList heeft als child (v16.9.175
   team.html structuur), moet de render ook dat element invullen.
   CSS-guard: nooit lege container tonen als er berichten verwacht worden.
   ════════════════════════════════════════════════════════════════ */

/* Eigen berichten: altijd SG rood (#e30613), nooit zwart */
.tc-bubble-me {
  background: #e30613 !important;
  color: white !important;
  border: none !important;
}
/* Dark mode: iets donkerder rood voor contrast */
.sg-theme-dark .tc-bubble-me {
  background: #c0000e !important;
  color: white !important;
}

/* Berichten van anderen: altijd card-kleur, nooit donker */
.tc-bubble-other {
  background: var(--chat-card, var(--card, #ffffff)) !important;
  color: var(--chat-text, var(--text, #111827)) !important;
  border: 1.5px solid var(--border, #e2e8f0) !important;
}
.sg-theme-dark .tc-bubble-other {
  background: var(--card, #1e293b) !important;
  color: var(--chat-text, #e2e8f0) !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* Emoji-picker: boven de invoerbalk, niet buiten de overlay */
#tcNavEmojiPicker {
  max-height: 200px !important;
  overflow-y: auto !important;
}

/* ════════════════════════════════════════════════════════════════
   TOAST FIX v5.51 — meldingen buiten beeld (rechts afgeknipt)
   ────────────────────────────────────────────────────────────────
   ROOT CAUSE 1: sg-smooth.css heeft een toastSlideIn animatie die
   begint met translateX(24px) — dit schuift de toast rechts buiten
   het scherm. De animatie conflicteert met #toastContainer die
   left:50%;transform:translateX(-50%) gebruikt.

   ROOT CAUSE 2: Op smalle mobiele schermen (< 360px) kan
   left:50%;transform:translateX(-50%) exact uitkomen op een punt
   waar de container net buiten de viewport uitsteekt als de
   max-width berekening net 1px te breed is.

   FIX: Pin de container met left+right i.p.v. left+transform.
   Override de toastSlideIn animatie voor .toast items BINNEN
   #toastContainer zodat ze geen translateX doen.
   ════════════════════════════════════════════════════════════════ */

/* Container: altijd volledig binnen viewport — geen transform-trick */
#toastContainer {
  left:      12px !important;
  right:     12px !important;
  transform: none !important;             /* geen left:50% translateX(-50%) meer */
  width:     auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Individuele toasts: nooit breder dan container, tekst nooit afgeknipt */
#toastContainer .toast,
#toastContainer > .toast {
  width:      100% !important;
  max-width:  100% !important;
  box-sizing: border-box !important;
  word-break: break-word !important;

  /* Override sg-smooth.css toastSlideIn: geen translateX (schuift rechts buiten scherm) */
  animation: sgToastIn .35s cubic-bezier(.34,1.56,.64,1) both !important;
}
#toastContainer .toast.out,
#toastContainer > .toast.out {
  animation: sgToastOut .25s ease forwards !important;
}

/* Veilige animatie: fade+scale omhoog, GEEN translateX */
@keyframes sgToastIn  { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sgToastOut { to   { opacity: 0; transform: translateY(8px)  scale(.95); } }

/* ════════════════════════════════════════════════════════════════
   Fix176 — DASHBOARD TEGELS: wit op wit — hardcoded #ffffff
   v16.9.276

   Probleem: views/dashboard.html gebruikt background:#ffffff en
   color:#111111 hardcoded in alle tegels (timer, planning, beschikbaar-
   heid, prullenbak, alerts, etc.). In dark-mode = witte tegel met witte
   tekst → volledig onleesbaar.

   Oplossing: CSS-overrides voor alle bekende dashboard-tegels die
   hardcoded #ffffff achtergrond hebben.
   ════════════════════════════════════════════════════════════════ */

/* ── Timer widget ── */
html.sg-theme-dark #dashTimerWidget {
  background: var(--card, #0f2137) !important;
  border-color: var(--border, rgba(255,255,255,.1)) !important;
  color: var(--text, #f1f5f9) !important;
}
html.sg-theme-dark #dashTimerWidget .timer-stat-chip {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html.sg-theme-dark #dashTimerWidget #dashTimerTodayH,
html.sg-theme-dark #dashTimerWidget #dashTimerWeekH,
html.sg-theme-dark #dashTimerWidget #dashTimerKm,
html.sg-theme-dark #dashTimerWidget #dashTimerDisplay {
  color: var(--text, #f1f5f9) !important;
}
html.sg-theme-dark #dashTimerWidget [style*="color:#111111"],
html.sg-theme-dark #dashTimerWidget [style*="color: #111111"] {
  color: var(--text, #f1f5f9) !important;
}
html.sg-theme-dark #dashTimerWidget [style*="color:#888888"],
html.sg-theme-dark #dashTimerWidget [style*="color: #888888"] {
  color: var(--text-light, #94a3b8) !important;
}
html.sg-theme-dark #dashTimerWidget [style*="background:#f5f5f5"],
html.sg-theme-dark #dashTimerWidget [style*="background: #f5f5f5"] {
  background: rgba(255,255,255,.06) !important;
}
/* Timer actie-knoppen naast "timer starten" */
html.sg-theme-dark #dashTimerWidget button[style*="background:#ffffff"],
html.sg-theme-dark #dashTimerWidget button[style*="background: #ffffff"] {
  background: var(--card, #0f2137) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: var(--text, #f1f5f9) !important;
}

/* ── Shifts vandaag ── */
html.sg-theme-dark #dashShiftsVandaag {
  background: var(--card, #0f2137) !important;
  border-color: var(--border, rgba(255,255,255,.1)) !important;
}
html.sg-theme-dark #dashShiftsLijst {
  background: var(--card, #0f2137) !important;
}

/* ── Planning bar ── */
html.sg-theme-dark #dashPlanningBar {
  background: var(--card, #0f2137) !important;
  border-color: var(--border, rgba(255,255,255,.1)) !important;
}
html.sg-theme-dark #dashPlanningBar [style*="color:#111111"],
html.sg-theme-dark #dashPlanningBar [style*="color: #111111"] {
  color: var(--text, #f1f5f9) !important;
}
html.sg-theme-dark #dashPlanningBar [style*="color:#666666"],
html.sg-theme-dark #dashPlanningBar [style*="color: #666666"] {
  color: var(--text-light, #94a3b8) !important;
}

/* ── Beschikbaarheid + Team overzicht tegels (grid 1fr 1fr) ── */
html.sg-theme-dark #sec-dashboard [style*="background:#ffffff"][style*="border:1.5px solid #e0e0e0"],
html.sg-theme-dark #sec-dashboard [style*='background:#ffffff'][style*='border:1.5px solid #e0e0e0'] {
  background: var(--card, #0f2137) !important;
  border-color: var(--border, rgba(255,255,255,.1)) !important;
}

/* Generieke override: alle inline background:#ffffff + border #e0e0e0 elementen in dashboard */
html.sg-theme-dark #sec-dashboard [style*="background:#ffffff"] {
  background: var(--card, #0f2137) !important;
}
html.sg-theme-dark #sec-dashboard [style*="border:1.5px solid #e0e0e0"],
html.sg-theme-dark #sec-dashboard [style*="border: 1.5px solid #e0e0e0"],
html.sg-theme-dark #sec-dashboard [style*="border:1px solid #e0e0e0"],
html.sg-theme-dark #sec-dashboard [style*="border: 1px solid #e0e0e0"] {
  border-color: var(--border, rgba(255,255,255,.1)) !important;
}

/* Tekst in dashboard tegels: donker zwart → licht */
html.sg-theme-dark #sec-dashboard [style*="color:#111111"],
html.sg-theme-dark #sec-dashboard [style*="color: #111111"] {
  color: var(--text, #f1f5f9) !important;
}
html.sg-theme-dark #sec-dashboard [style*="color:#666666"],
html.sg-theme-dark #sec-dashboard [style*="color: #666666"],
html.sg-theme-dark #sec-dashboard [style*="color:#888888"],
html.sg-theme-dark #sec-dashboard [style*="color: #888888"] {
  color: var(--text-light, #94a3b8) !important;
}
html.sg-theme-dark #sec-dashboard [style*="color:#555555"],
html.sg-theme-dark #sec-dashboard [style*="color: #555555"] {
  color: var(--text-light, #94a3b8) !important;
}
html.sg-theme-dark #sec-dashboard [style*="color:#333333"],
html.sg-theme-dark #sec-dashboard [style*="color: #333333"] {
  color: var(--text, #f1f5f9) !important;
}

/* ── Alerts sectie ── */
html.sg-theme-dark #alertsSection {
  background: var(--card, #0f2137) !important;
  border-color: var(--border, rgba(255,255,255,.1)) !important;
}
html.sg-theme-dark #alertsSection [style*="border-bottom:1px solid #f0f0f0"],
html.sg-theme-dark #alertsSection [style*="border-bottom: 1px solid #f0f0f0"] {
  border-bottom-color: rgba(255,255,255,.07) !important;
}

/* ── Missed calls card ── */
html.sg-theme-dark #missedCallsCard {
  background: var(--card, #0f2137) !important;
  border-color: var(--border, rgba(255,255,255,.1)) !important;
}

/* ── Lichtgrijze backgrounds in dashboard chips/subtegelss ── */
html.sg-theme-dark #sec-dashboard [style*="background:#f5f5f5"],
html.sg-theme-dark #sec-dashboard [style*="background: #f5f5f5"],
html.sg-theme-dark #sec-dashboard [style*="background:#f8fafc"],
html.sg-theme-dark #sec-dashboard [style*="background: #f8fafc"] {
  background: rgba(255,255,255,.05) !important;
}
html.sg-theme-dark #sec-dashboard [style*="border:1px solid #e8e8e8"],
html.sg-theme-dark #sec-dashboard [style*="border: 1px solid #e8e8e8"] {
  border-color: rgba(255,255,255,.08) !important;
}

/* ════════════════════════════════════════════════════════════════
   Fix175 — FORMULIER LEESBAARHEID: datepicker + adres-autocomplete
   v16.9.275 — Wit-op-wit en grijs-op-wit problemen opgelost

   Problemen:
   1. Native browser datepicker popup: kalender-grid bijna onzichtbaar
      (licht grijs op wit achtergrond)
   2. SGAddress autocomplete dropdown: tekst '#1e293b' + '#94a3b8'
      verschijnt als grijs-op-wit — onleesbaar
   3. Formulier inputs in dark-mode: tekst soms nauwelijks zichtbaar
   4. Datum/tijd inputs: native popup altijd in donker-schema mee
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Native datepicker inputs: forceer licht schema + leesbaar contrast ── */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  color-scheme: light !important;
  color: #111827 !important;
  background: #ffffff !important;
}

/* Dark-mode: datepicker popup forceer leesbaar licht schema */
html.sg-theme-dark input[type="date"],
html.sg-theme-dark input[type="time"],
html.sg-theme-dark input[type="datetime-local"],
html.sg-theme-dark input[type="month"] {
  color-scheme: light !important;
  background: #ffffff !important;
  color: #111827 !important;
  border: 1.5px solid #d1d5db !important;
}

/* ── 2. SGAddress autocomplete dropdown — donker thema override ── */
/* Achtergrond: donker */
.sg-adres-lijst {
  background: #1e293b !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.45) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX181 — TOGGLE SWITCH SYSTEEM (globaal herbruikbaar)
   Gebruik: <label class="sg-toggle"><input type="checkbox"><span class="sg-toggle-slider"></span></label>
   Kleuren via data-kleur="blauw|groen|rood|oranje|paars|geel"
═══════════════════════════════════════════════════════════════ */
.sg-toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}
.sg-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.sg-toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: 34px;
  background: #cbd5e1;
  transition: background .22s;
  cursor: pointer;
}
.sg-toggle-slider::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 5px rgba(0,0,0,.25);
  transition: transform .22s;
}
.sg-toggle input:checked + .sg-toggle-slider { background: #2563eb; }
.sg-toggle input:checked + .sg-toggle-slider::after { transform: translateY(-50%) translateX(22px); }

/* Kleur-varianten */
.sg-toggle[data-kleur="groen"]  input:checked + .sg-toggle-slider { background: #16a34a; }
.sg-toggle[data-kleur="rood"]   input:checked + .sg-toggle-slider { background: #e30613; }
.sg-toggle[data-kleur="oranje"] input:checked + .sg-toggle-slider { background: #f59e0b; }
.sg-toggle[data-kleur="paars"]  input:checked + .sg-toggle-slider { background: #7c3aed; }
.sg-toggle[data-kleur="geel"]   input:checked + .sg-toggle-slider { background: #ca8a04; }
.sg-toggle[data-kleur="cyaan"]  input:checked + .sg-toggle-slider { background: #0891b2; }

/* Focus ring voor toegankelijkheid */
.sg-toggle input:focus-visible + .sg-toggle-slider {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* ── Project instellingen rij (formulier + detail) ── */
.sg-instelling-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--card, white);
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.sg-instelling-rij:hover {
  border-color: #94a3b8;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.sg-instelling-rij.sg-inst--aan {
  border-color: currentColor;
}
.sg-instelling-icoon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  flex-shrink: 0;
}
.sg-instelling-tekst {
  flex: 1;
  min-width: 0;
}
.sg-instelling-titel {
  font-size: .83rem;
  font-weight: 700;
  color: var(--text, #1e293b);
  line-height: 1.3;
}
.sg-instelling-sub {
  font-size: .71rem;
  color: var(--text-light, #64748b);
  margin-top: 2px;
  line-height: 1.35;
}

/* ── Project detail hero-header ── */
.sg-pd-hero {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  position: relative;
}
.sg-pd-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
@media (min-width: 480px) {
  .sg-pd-stat-grid { grid-template-columns: repeat(3, 1fr); }
}
.sg-pd-stat-kaart {
  background: var(--bg, #f8fafc);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 11px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.sg-pd-stat-kaart:hover {
  border-color: var(--wl-primary, #e30613);
  transform: translateY(-1px);
}
.sg-pd-stat-label {
  font-size: .64rem;
  font-weight: 800;
  color: var(--text-light, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sg-pd-stat-waarde {
  font-size: .92rem;
  font-weight: 800;
  color: var(--text, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-pd-stat-sub {
  font-size: .67rem;
  color: var(--text-light, #94a3b8);
  margin-top: 2px;
}
.sg-pd-actie-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.sg-pd-actie-btn {
  flex: 1;
  min-width: 100px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--bg, #f1f5f9);
  color: var(--text, #374151);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .15s;
}
.sg-pd-actie-btn:hover {
  background: var(--card, white);
  border-color: #94a3b8;
}
.sg-pd-actie-btn.sg-pd-actie--primair {
  background: var(--wl-primary, #e30613);
  color: white;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(227,6,19,.3);
}
.sg-pd-actie-btn.sg-pd-actie--primair:hover {
  background: #c0000f;
}

/* Dark-mode aanpassingen voor project-detail */
html.sg-theme-dark .sg-pd-stat-kaart { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1) !important; }
html.sg-theme-dark .sg-instelling-rij { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1) !important; }

/* ── Fix181: Overview tab V2 — dark mode aanpassingen ──────── */
/* Overzicht kop-kaart kleurband: behoudt projectkleur in dark mode */
html.sg-theme-dark #tab-overview .sg-pd-stat-kaart {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.1) !important;
}
/* Actie knoppen dark mode in overview-tab */
html.sg-theme-dark #tab-overview .sg-pd-actie-btn {
  background: rgba(255,255,255,.07) !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.1) !important;
}
html.sg-theme-dark #tab-overview .sg-pd-actie-btn.sg-pd-actie--primair {
  background: var(--wl-primary,#e30613) !important;
  color: white !important;
  border-color: transparent !important;
}
/* Kop-kaart dark mode */
html.sg-theme-dark #tab-overview [style*="border-radius:14px"] {
  background: rgba(255,255,255,.04) !important;
}
html.sg-theme-dark #tab-overview h3 {
  color: #f1f5f9 !important;
}

/* Items: hover donkerder */
.sg-adres-item {
  border-bottom-color: rgba(255,255,255,.06) !important;
}
.sg-adres-item:hover,
.sg-adres-item:focus {
  background: #273549 !important;
  outline: none !important;
}

/* Hoofd-tekst: wit en leesbaar */
.sg-adres-main {
  color: #f1f5f9 !important;
  font-weight: 600 !important;
}

/* Sub-tekst: lichtgrijs — goed leesbaar op donkere achtergrond */
.sg-adres-sub {
  color: #94a3b8 !important;
}

/* Spinner en lege staat */
.sg-adres-spinner,
.sg-adres-leeg {
  color: #94a3b8 !important;
}

/* Locatie-icoon: rood blijft rood */
.sg-adres-icon {
  color: #e30613 !important;
}

/* ── 3. Formulier labels in het "Nieuw project" modal ── */
/* Labels boven velden: goed leesbaar */
#sgNieuwProjectModal label,
[id*="newProject"] label,
[id*="NieuwProject"] label,
.sg-np-modal label {
  color: #94a3b8 !important;
}

/* ── 4. Formulier selects (Status, Kaartkleur, etc.) ── */
/* Selects met dark achtergrond: tekst zichtbaar */
select#npStatus,
select#npKleur,
select#npProjectType,
select[id^="np"] {
  color: var(--text, #f1f5f9) !important;
  background: var(--bg, #0f1e35) !important;
  border-color: var(--border, rgba(255,255,255,.14)) !important;
}

/* ── 5. Modal formulier: alle inputs donker en leesbaar ── */
/* Zorg dat input placeholder zichtbaar is */
input#npName::placeholder,
input#npClient::placeholder,
input[id^="np"]::placeholder {
  color: rgba(148,163,184,.6) !important;
}

/* Formulier inputs in de modal altijd leesbaar */
input#npName,
input#npClient,
input[id^="npLocatie"],
input[id^="npAdres"] {
  color: var(--text, #f1f5f9) !important;
  background: var(--bg, #0f1e35) !important;
}

/* ── 6. Dropdown optie-tekst (select options) donker thema ── */
/* Opties in <select> zijn OS-gerenderd, maar tekst moet leesbaar zijn */
html.sg-theme-dark select option {
  background: #1e293b;
  color: #f1f5f9;
}

/* ── 7. Light-mode override: autocomplete dropdown licht ── */
html.sg-theme-light .sg-adres-lijst {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}
html.sg-theme-light .sg-adres-item:hover,
html.sg-theme-light .sg-adres-item:focus {
  background: #f8fafc !important;
}
html.sg-theme-light .sg-adres-main {
  color: #1e293b !important;
}
html.sg-theme-light .sg-adres-sub {
  color: #64748b !important;
}

/* ── 8. Webkit calendar-picker indicator altijd zichtbaar ── */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: none !important;
  opacity: 0.8 !important;
  cursor: pointer !important;
}

/* ── 9. Datepicker popup kalender grid — maximaal contrast ── */
/* Forceer via color-scheme dat de systeempicker altijd leesbaar is */
::-webkit-datetime-edit { color: #111827 !important; }
::-webkit-datetime-edit-fields-wrapper { background: transparent !important; }
::-webkit-datetime-edit-text { color: #374151 !important; }
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field {
  color: #111827 !important;
  background: transparent !important;
}
::-webkit-datetime-edit-month-field:focus,
::-webkit-datetime-edit-day-field:focus,
::-webkit-datetime-edit-year-field:focus,
::-webkit-datetime-edit-hour-field:focus,
::-webkit-datetime-edit-minute-field:focus {
  background: #e30613 !important;
  color: #ffffff !important;
  border-radius: 3px !important;
}

/* ════════════════════════════════════════════════════════════════
   Fix182 — PROJECT DETAIL TAB-BAR → HAMBURGER-MENU STIJL
   ────────────────────────────────────────────────────────────────
   PROBLEEM: #projectTabBar werd getoond als horizontale pill-lijst
   (overflowende knoppen). Koen wil de stijl van het hamburger-menu
   (sidebar .nav-item): verticale kolom, icoon links, border-left
   accent bij actief item, donkere achtergrond.

   OPLOSSING:
   1. #sec-projectDetail → flex-row (tab-sidebar naast content)
   2. #projectTabBar → verticale sidebar-kolom (nav-item stijl)
   3. .tab-content area → flex:1, scrollbaar
   4. Op smal mobiel (≤ 600px): tab-bar inklapbaar boven de content
      via twee states:
        • standaard: tab-bar max-height gecomprimeerd, 1 regel pills
        • na tap op "alle tabs": uitklappen naar volledige lijst
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Project-detail sectie: flex-column (header bovenaan, body eronder) ─ */
#sec-projectDetail {
  display:        flex !important;
  flex-direction: column !important;    /* header boven, #sg-pd-body eronder */
  align-items:    stretch !important;
  height:         calc(100dvh - var(--topbar-h, 56px) - var(--bottom-h, 0px)) !important;
  overflow:       hidden !important;
  padding:        0 !important;
}

/* De header (Terug + titel + acties) bovenaan, altijd zichtbaar */
#sec-projectDetail #projectDetailHeader {
  display:        flex !important;
  flex-direction: row !important;
  align-items:    center !important;
  padding:        10px 14px !important;
  gap:            10px !important;
  border-bottom:  1px solid rgba(255,255,255,.08) !important;
  flex-shrink:    0 !important;
  width:          100% !important;
  box-sizing:     border-box !important;
}

/* #sg-pd-body: tabbar (sidebar) + content-area naast elkaar */
#sg-pd-body {
  display:        flex !important;
  flex-direction: row !important;
  flex:           1 !important;
  min-height:     0 !important;
  overflow:       hidden !important;
}

/* #sg-pd-content: rechter kolom — alle tab-content divs */
#sg-pd-content {
  flex:           1 !important;
  min-width:      0 !important;
  overflow:       hidden !important;
  position:       relative !important;
}

/* ── 2. Tab-bar: verticale sidebar kolom (hamburger-menu stijl) ─ */
#projectTabBar {
  display:          flex !important;
  flex-direction:   column !important;
  flex-shrink:      0 !important;
  width:            160px !important;
  min-width:        140px !important;
  max-width:        180px !important;
  background:       #0f1623 !important;
  border-right:     1px solid rgba(255,255,255,.07) !important;
  padding:          8px 0 !important;
  overflow-y:       auto !important;
  overflow-x:       hidden !important;
  scrollbar-width:  none !important;
  gap:              1px !important;
  /* Verwijder de oude horizontale scroll-bar stijlen */
  flex-wrap:        nowrap !important;
  white-space:      normal !important;
}
#projectTabBar::-webkit-scrollbar { display: none !important; }

/* ── 3. Tab-knoppen: kopieer exacte .nav-item stijl ──────────── */
#projectTabBar .tab-btn {
  display:          flex !important;
  flex-direction:   row !important;
  align-items:      center !important;
  justify-content:  flex-start !important;
  gap:              9px !important;
  padding:          9px 12px !important;
  margin:           1px 6px !important;
  width:            calc(100% - 12px) !important;
  box-sizing:       border-box !important;
  background:       transparent !important;
  border:           none !important;
  border-left:      2.5px solid transparent !important;
  border-radius:    8px !important;
  color:            rgba(255,255,255,.6) !important;
  cursor:           pointer !important;
  font-family:      inherit !important;
  font-size:        .78rem !important;
  font-weight:      500 !important;
  text-align:       left !important;
  white-space:      normal !important;
  word-break:       break-word !important;
  transition:       background .15s ease, color .15s ease, border-color .15s ease !important;
  flex-shrink:      0 !important;
  /* Reset scroll-snap */
  scroll-snap-align: none !important;
  /* Overschrijf dark-mode pill stijl */
  box-shadow:       none !important;
}

/* Icoon: vaste breedte, bovenaan bij 2-regels label */
#projectTabBar .tab-btn i {
  width:       18px !important;
  min-width:   18px !important;
  text-align:  center !important;
  font-size:   .82rem !important;
  flex-shrink: 0 !important;
  align-self:  flex-start !important;
  margin-top:  1px !important;
  color:       rgba(255,255,255,.45) !important;
  transition:  color .15s, transform .15s !important;
}

/* Label-span: flex-1 zodat hij de rest van de ruimte neemt */
#projectTabBar .tab-btn span {
  flex:          1 1 auto !important;
  min-width:     0 !important;
  overflow:      hidden !important;
  display:       -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  text-overflow: clip !important;
  line-height:   1.25 !important;
}

/* Hover-staat */
#projectTabBar .tab-btn:hover:not(.active) {
  background:         rgba(255,255,255,.07) !important;
  color:              rgba(255,255,255,.9) !important;
  border-left-color:  rgba(227,6,19,.4) !important;
}
#projectTabBar .tab-btn:hover:not(.active) i {
  color:     rgba(255,255,255,.75) !important;
  transform: translateX(1px) !important;
}

/* Actief-staat: rode border-left + lichte achtergrond (exact nav-item.active) */
#projectTabBar .tab-btn.active {
  background:         rgba(227,6,19,.15) !important;
  color:              #ffffff !important;
  font-weight:        600 !important;
  border-left-color:  #e30613 !important;
  box-shadow:         none !important;
}
#projectTabBar .tab-btn.active i {
  color:  #f87171 !important;
  filter: brightness(1.3) drop-shadow(0 0 3px rgba(227,6,19,.5)) !important;
}

/* Tab-kleur-klassen: icon-kleuren bewaren (zelfde als kleur-klassen elders) */
#projectTabBar .tab-btn.tab-rood   i { color: #f87171 !important; }
#projectTabBar .tab-btn.tab-oranje i { color: #fb923c !important; }
#projectTabBar .tab-btn.tab-amber  i { color: #fbbf24 !important; }
#projectTabBar .tab-btn.tab-blauw  i { color: #60a5fa !important; }
#projectTabBar .tab-btn.tab-paars  i { color: #c084fc !important; }
#projectTabBar .tab-btn.tab-groen  i { color: #34d399 !important; }
#projectTabBar .tab-btn.tab-roze   i { color: #f9a8d4 !important; }

/* ── 4. Tab-content area: vult #sg-pd-content via absolute positie ─
   Elke tab-content is standaard hidden (display:none). Bij .active
   vult hij de volledige #sg-pd-content rechter kolom.               */
/* (Gedetailleerde regels staan in sectie 7 hieronder)               */

/* ── 5. Light-mode kleuren voor tab-sidebar ──────────────────── */
html:not(.sg-theme-dark) #projectTabBar {
  background:    #1a2336 !important;
  border-right:  1px solid rgba(0,0,0,.1) !important;
}

/* ── 6. Mobiel (≤ 600px): tab-bar boven content, compacte weergave */
@media (max-width: 600px) {
  #sec-projectDetail {
    flex-direction: column !important;
    height:         auto !important;
    overflow:       visible !important;
  }

  /* Tabbar op mobiel: horizontale scroll (compact, 1 rij) */
  #sg-pd-body {
    flex-direction: column !important;
  }

  #projectTabBar {
    flex-direction:   row !important;
    flex-wrap:        nowrap !important;
    width:            100% !important;
    min-width:        0 !important;
    max-width:        100% !important;
    height:           auto !important;
    overflow-x:       auto !important;
    overflow-y:       hidden !important;
    padding:          6px 4px !important;
    gap:              3px !important;
    border-right:     none !important;
    border-bottom:    1px solid rgba(255,255,255,.08) !important;
    scrollbar-width:  none !important;
    /* Scroll-snap terug op mobiel */
    scroll-snap-type: x mandatory !important;
  }
  #projectTabBar::-webkit-scrollbar { display: none !important; }

  #projectTabBar .tab-btn {
    flex-direction:   column !important;
    align-items:      center !important;
    justify-content:  center !important;
    gap:              3px !important;
    padding:          7px 10px !important;
    margin:           0 !important;
    width:            auto !important;
    min-width:        62px !important;
    max-width:        85px !important;
    border-left:      none !important;
    border-bottom:    2.5px solid transparent !important;
    border-radius:    8px !important;
    flex-shrink:      0 !important;
    scroll-snap-align: center !important;
    white-space:      nowrap !important;
  }
  #projectTabBar .tab-btn span {
    display:            block !important;
    -webkit-line-clamp: 1 !important;
    font-size:          .68rem !important;
    text-align:         center !important;
    white-space:        nowrap !important;
    overflow:           hidden !important;
    text-overflow:      ellipsis !important;
    max-width:          80px !important;
  }
  #projectTabBar .tab-btn i {
    align-self:  center !important;
    margin-top:  0 !important;
    font-size:   .9rem !important;
  }
  #projectTabBar .tab-btn.active {
    border-left-color:   transparent !important;
    border-bottom-color: #e30613 !important;
    background:          rgba(227,6,19,.15) !important;
  }

  /* Content-wrapper op mobiel: normale hoogte */
  #sg-pd-content {
    position: relative !important;
    flex: 1 !important;
    min-height: 300px !important;
  }
}

/* ── 7. Tab-content: vult #sg-pd-content volledig ──────────────
   Elke tab-content div vult de rechter kolom (#sg-pd-content).
   Alleen de .active tab is zichtbaar en scrollbaar.             */
/* Directe children van #sg-pd-content zijn de hoofd-tabs */
#sg-pd-content > .tab-content {
  display:    none !important;
  position:   absolute !important;
  inset:      0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding:    14px !important;
  box-sizing: border-box !important;
}
#sg-pd-content > .tab-content.active {
  display:  block !important;
  position: absolute !important;
  inset:    0 !important;
}

/* Chat-tab heeft flex-column layout nodig */
#sg-pd-content > #tab-chat.active {
  display:        flex !important;
  flex-direction: column !important;
  padding:        0 !important;
  overflow:       hidden !important;
}

/* Docs-tab: ook flex-column */
#sg-pd-content > #tab-docs.active {
  display:        flex !important;
  flex-direction: column !important;
  overflow:       hidden !important;
  padding:        0 !important;
}

/* Mobiel: content niet meer absoluut */
@media (max-width: 600px) {
  #sg-pd-content > .tab-content {
    position:   relative !important;
    inset:      auto !important;
    height:     auto !important;
    min-height: 300px !important;
  }
  #sg-pd-content > .tab-content.active {
    position: relative !important;
    inset:    auto !important;
  }
}

/* ── 8. Light-mode: header border kleur aanpassen ─────────────── */
html:not(.sg-theme-dark) #sec-projectDetail #projectDetailHeader {
  border-bottom-color: rgba(0,0,0,.08) !important;
}

/* ── 9. sg-view-actief override: flex-column bewaren ────────────
   .sg-view-actief forceert display:block — overschrijf voor
   #sec-projectDetail zodat onze flex-column layout bewaard blijft. */
#sec-projectDetail.sg-view-actief,
#sec-projectDetail.section.sg-view-actief {
  display:        flex !important;
  flex-direction: column !important;
}

/* ════════════════════════════════════════════════════════════════
   Fix182 — DARK MODE OVERRIDES voor project-detail tab-nav
   ────────────────────────────────────────────────────────────────
   sg-dark-fixes.css regel 6639 stelt .tab-bar → background:var(--card)
   in. Onze #projectTabBar heeft eigen donkerder achtergrond nodig
   die overeenkomt met de sidebar (#0f1623).
   ════════════════════════════════════════════════════════════════ */

/* Tab-bar sidebar: donkerdere achtergrond dan card, zoals de sidebar */
html.sg-theme-dark #projectTabBar,
html.sg-theme-dark #sg-pd-body #projectTabBar {
  background:   #0f1623 !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.07) !important;
}

/* Tab-knoppen in dark: transparant op donkere sidebar */
html.sg-theme-dark #projectTabBar .tab-btn {
  background:        transparent !important;
  color:             rgba(255,255,255,.58) !important;
  border:            none !important;
  border-left:       2.5px solid transparent !important;
  box-shadow:        none !important;
}
html.sg-theme-dark #projectTabBar .tab-btn i {
  color: rgba(255,255,255,.4) !important;
}
html.sg-theme-dark #projectTabBar .tab-btn:hover:not(.active) {
  background:         rgba(255,255,255,.07) !important;
  color:              rgba(255,255,255,.88) !important;
  border-left-color:  rgba(227,6,19,.4) !important;
}
html.sg-theme-dark #projectTabBar .tab-btn:hover:not(.active) i {
  color: rgba(255,255,255,.7) !important;
}

/* Actief: rode border-left, rode icon glow */
html.sg-theme-dark #projectTabBar .tab-btn.active {
  background:         rgba(227,6,19,.18) !important;
  color:              #ffffff !important;
  font-weight:        600 !important;
  border-left-color:  #e30613 !important;
  box-shadow:         none !important;
}
html.sg-theme-dark #projectTabBar .tab-btn.active i {
  color:  #f87171 !important;
  filter: brightness(1.3) drop-shadow(0 0 4px rgba(227,6,19,.6)) !important;
}

/* Icon-kleuren per type in dark */
html.sg-theme-dark #projectTabBar .tab-btn.tab-rood   i { color: #f87171 !important; }
html.sg-theme-dark #projectTabBar .tab-btn.tab-oranje i { color: #fb923c !important; }
html.sg-theme-dark #projectTabBar .tab-btn.tab-amber  i { color: #fbbf24 !important; }
html.sg-theme-dark #projectTabBar .tab-btn.tab-blauw  i { color: #60a5fa !important; }
html.sg-theme-dark #projectTabBar .tab-btn.tab-paars  i { color: #c084fc !important; }
html.sg-theme-dark #projectTabBar .tab-btn.tab-groen  i { color: #34d399 !important; }
html.sg-theme-dark #projectTabBar .tab-btn.tab-roze   i { color: #f9a8d4 !important; }

/* Header border in dark */
html.sg-theme-dark #sec-projectDetail #projectDetailHeader {
  border-bottom-color: rgba(255,255,255,.07) !important;
  background: transparent !important;
}

/* sg-pd-body body: geen background van zichzelf */
html.sg-theme-dark #sg-pd-body {
  background: transparent !important;
}

/* sg-pd-content: donkere maar niet pikzwarte achtergrond */
html.sg-theme-dark #sg-pd-content {
  background: var(--bg, #0d1829) !important;
}

/* Mobiel dark: tab-bar horizontaal blijft donker */
@media (max-width: 600px) {
  html.sg-theme-dark #projectTabBar {
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    border-right: none !important;
  }
}