style.css

/* ===========================================================
   OnShift — style.css
   Alle styling: variabelen, donker thema, inklapbare kaarten,
   statusstip met hover-bridge, formulier-indeling, etc.
   =========================================================== */

  :root{
    /* Native controls (selects, datum-/tijdkiezers, scrollbars) in donker
       renderen -> leesbare iconen en pop-ups. */
    color-scheme: dark;

    /* ===========================================================
       THEMA — opgebouwd rond de twee logo-kleuren:
         teal-groen  #6fa693  (primair, interactie)
         amber       #e0a568  (secundair, warme accenten / aandacht)
       Basis is een diep, licht-warm neutraal donker.
       =========================================================== */

    /* Oppervlakken */
    --bg:          #15171a;
    --bg-raised:   #1d2023;
    --card:        #23272c;
    --border:      #363b41;
    --border-soft: #2b3035;
    --hairline:    rgba(255, 255, 255, 0.055);

    /* Tekst */
    --title:      #ffffff;
    --text:       #e9ebee;
    --text-soft:  #abb0b6;
    --text-faint: #737980;
    --meta:       #9aa1a8;
    --meta-dim:   #6c7278;

    /* Primair — logo groen/teal */
    --accent:      #6fa693;
    --accent-text: #9fd2be;
    --accent-soft: rgba(111, 166, 147, 0.15);
    --accent-line: rgba(111, 166, 147, 0.32);
    --on-accent:   #0f1f19;

    /* Secundair — logo amber */
    --gold:        #e0a568;
    --gold-text:   #eec297;
    --gold-soft:   rgba(224, 165, 104, 0.15);
    --gold-line:   rgba(224, 165, 104, 0.30);
    --on-gold:     #241708;

    /* Merk-gradient — exact de logo-gradient (groen -> amber) */
    --brand-gradient: linear-gradient(100deg, #6fa693 0%, #e0a568 100%);

    /* Status */
    --warn:      var(--gold);
    --warn-soft: var(--gold-soft);
    --slate:      #8496a8;
    --slate-soft: rgba(132, 150, 168, 0.15);
    --on-slate:   #17202a;
    --danger:      #db7a6b;
    --danger-text: #ec9f94;
    --danger-soft: rgba(219, 122, 107, 0.16);
    --danger-line: #6a3a33;
    --on-danger:   #2a120e;

    /* Aliassen zodat oudere selectors blijven werken */
    --violet: var(--slate);
    --violet-soft: var(--slate-soft);

    /* Vorm & schaduw */
    --radius: 10px;
    --radius-sm: 7px;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-pill: 9999px;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.34), 0 20px 44px -22px rgba(0,0,0,0.6);
    --shadow-pop: 0 14px 34px -10px rgba(0,0,0,0.62);
    --tap-min: 44px;
  }

  *{ box-sizing: border-box; }

  html, body{ height: 100%; margin: 0; padding: 0; }

  body{
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img{ max-width: 100%; }

  input::placeholder,
  textarea::placeholder{ color: var(--meta); opacity: 1; }

  /* Native select-uitklap + datum/tijd-pop-ups leesbaar op donker
     (color-scheme: dark zet de kiezer-iconen al licht). */
  select option,
  select optgroup{
    background: var(--bg-raised);
    color: var(--text);
  }
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator{
    opacity: 0.9;
    cursor: pointer;
    transition: opacity .12s ease;
  }
  input[type="date"]:hover::-webkit-calendar-picker-indicator,
  input[type="time"]:hover::-webkit-calendar-picker-indicator{ opacity: 1; }

  ::-webkit-scrollbar{ width: 9px; height: 9px; }
  ::-webkit-scrollbar-track{ background: transparent; }
  ::-webkit-scrollbar-thumb{ background: #3a3d41; border-radius: 100px; }
  ::-webkit-scrollbar-thumb:hover{ background: #47494e; }

  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  a:focus-visible,
  [tabindex]:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }
  }

  .app{ display: flex; align-items: flex-start; width: 100%; min-height: 100vh; }

  /* ---------- Sidebar (vaste navigatie links) ---------- */
  .sidebar{
    position: sticky;
    top: 0;
    flex-shrink: 0;
    width: 240px;
    height: 100vh;
    overflow-y: auto;
    background: var(--card);
    border-right: 1px solid var(--border);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    z-index: 60;
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar{ display: none; }

  .sidebar-brand{ display: flex; align-items: center; gap: 12px; padding: 2px 6px 0; }

  /* Woordmerk in de logo-gradient (groen -> amber) */
  .brand-name{
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.022em;
    color: var(--accent-text);
  }
  @supports ((-webkit-background-clip: text) or (background-clip: text)){
    .brand-name,
    .splash-title,
    .lock-logo-text{
      background: var(--brand-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
  }

  /* ---------- Interactieve lock-switch (logo = vergrendelknop) ---------- */
  .lock-switch{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    padding: 9px;
    margin: -9px 0 -9px -9px;
    background: none;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, transform .12s ease;
  }
  .lock-switch:hover{ background: var(--bg-raised); }
  .lock-switch:active{ transform: scale(.94); }
  .lock-switch:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

  .lock-switch-svg{ width: 58px; height: auto; display: block; overflow: visible; }

  .lock-switch .ls-knob{ transform: translateX(0); }
  .lock-switch .ls-arc-top,
  .lock-switch .ls-arc-bottom{
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    stroke-linecap: butt;
  }
  .lock-switch .ls-arc-top{ stroke: #9b8868; stroke-width: 18.3; }
  .lock-switch .ls-arc-bottom{ stroke: #e9be94; stroke-width: 20.4; }

  /* Reverse van de opstart-switch. Volgorde:
     1. de twee halve cirkels (bogen) trekken zich terug en faden,
     2. dan schuift de knop naar rechts ('aan' -> 'uit'),
     3. de track dimt mee; daarna vergrendelt de app (app.js). */
  .lock-switch.is-locking{ pointer-events: none; }

  .lock-switch.is-locking .ls-arc-bottom{
    animation: lsArcHide .30s ease forwards;
  }
  .lock-switch.is-locking .ls-arc-top{
    animation: lsArcHide .30s ease .12s forwards;
  }
  .lock-switch.is-locking .ls-knob{
    animation: lsKnobOff .46s cubic-bezier(0.22, 0.9, 0.28, 1) .44s forwards;
  }
  .lock-switch.is-locking .ls-track{
    animation: lsTrackDim .5s ease .44s forwards;
  }

  @keyframes lsArcHide{
    0%{ stroke-dashoffset: 0; opacity: 1; }
    100%{ stroke-dashoffset: 100; opacity: 0; }
  }
  @keyframes lsKnobOff{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(170px); }
  }
  @keyframes lsTrackDim{
    0%{ opacity: 1; filter: saturate(1); }
    100%{ opacity: .5; filter: saturate(.35); }
  }

  /* 'Verminder beweging': de vergrendel-feedback blijft (functioneel, geen
     sier), maar ingekort tot een korte, rustige beweging. */
  @media (prefers-reduced-motion: reduce){
    .lock-switch.is-locking .ls-arc-bottom{ animation-duration: .18s !important; animation-delay: 0s !important; }
    .lock-switch.is-locking .ls-arc-top{ animation-duration: .18s !important; animation-delay: .08s !important; }
    .lock-switch.is-locking .ls-knob{ animation-duration: .26s !important; animation-delay: .2s !important; }
    .lock-switch.is-locking .ls-track{ animation-duration: .3s !important; animation-delay: .2s !important; }
  }

  .sidebar-nav{ display: flex; flex-direction: column; gap: 4px; }

  .sidebar-nav .tab-btn{
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-soft);
    padding: 10px 12px;
    min-height: 44px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s ease, color .14s ease;
  }
  .sidebar-nav .tab-btn{ position: relative; color: var(--meta); }
  .sidebar-nav .tab-btn:hover{ background: var(--bg-raised); color: var(--text); }
  .sidebar-nav .tab-btn.active{ background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
  .sidebar-nav .tab-btn.active::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-gradient);
  }

  .nav-ico{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  .nav-ico svg{ width: 20px; height: 20px; display: block; }
  .nav-label{ overflow: hidden; text-overflow: ellipsis; }

  .sidebar-footer{
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
  }
  .sidebar-footer .reset-btn{
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 12px;
    background: none;
    border: 1px solid var(--border-soft);
    color: var(--meta);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
  }
  .sidebar-footer .reset-btn:hover{
    background: var(--danger-soft);
    color: var(--danger);
    border-color: transparent;
  }

  .nav-backdrop{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 55;
    opacity: 0;
    transition: opacity .2s ease;
  }

  /* ---------- Main + topbar ---------- */
  /* De inhoud groeit niet oneindig mee: er zijn 3 vaste layout-maten
     (1 / 2 / 3 kolommen). Tussen de breekpunten blijft de kolombreedte
     gelijk; extra schermruimte wordt marge, geen uitgerekte kaarten. */
  .main{
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 664px;                 /* mode 1: één kolom */
    margin-inline: auto;
    /* Veilige zones meerekenen: notch / punch-hole / statusbalk (top),
       gebogen schermranden (left/right), home-indicator (bottom). */
    padding:
      calc(22px + env(safe-area-inset-top))
      calc(22px + env(safe-area-inset-right))
      calc(52px + env(safe-area-inset-bottom))
      calc(22px + env(safe-area-inset-left));
  }

  .topbar{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
  }

  .topbar-lead{ display: flex; align-items: center; gap: 12px; min-width: 0; }
  .topbar-title{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }

  .topbar-eyebrow{
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gold-text);
  }

  .topbar .sub{
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--title);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.012em;
    line-height: 1.15;
  }

  .nav-toggle{
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    padding: 0 11px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
  }
  .nav-toggle span{ display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--text-soft); }

  /* Reset-knop staat nu rustig onderin de sidebar (.sidebar-footer) */
  .reset-btn{
    flex-shrink: 0;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }

  /* ---------- Tab-panels + Bento (masonry via multicol) ---------- */
  .tab-panel{ display: none; }
  .tab-panel.active{ display: block; }

  /* Kaarten stromen kolomsgewijs — geen lege gaten onder korte kaarten. */
  .panel-grid.tab-panel.active{ column-gap: 20px; }

  .panel-grid .card{
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 20px;
  }
  .panel-grid > footer.hint{
    break-inside: avoid;
    column-span: all;
    margin: 8px 0 0;
  }
  .card-wide{ /* masonry kent geen kolom-spans meer */ }

  /* mode 2: twee kolommen (tablet t/m laptop) */
  @media (min-width: 768px){
    .main{ max-width: 1040px; padding-left: 24px; padding-right: 24px; }
    .panel-grid.tab-panel.active{ column-count: 2; }
    /* leesweergaven (kalender, bewonerslijst) houden een rustige kolom */
    #panelBewoners.tab-panel.active{ max-width: 780px; margin-inline: auto; }
  }

  /* mode 3: drie kolommen voor de kaartrijke tabbladen op ruime schermen */
  @media (min-width: 1200px){
    .main{ max-width: 1320px; }
    #panelDashboard.panel-grid.tab-panel.active,
    #panelBeheer.panel-grid.tab-panel.active{ column-count: 3; }
    #panelBewoners.tab-panel.active{ max-width: 860px; }
  }

  /* ---------- Card / section (Bento-eiland) ---------- */
  .card{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.03);
  }

  .card-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .card-head[data-panel]{
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .card-chevron{
    font-size: 11px;
    color: var(--text-faint);
    transition: transform .18s ease;
    flex-shrink: 0;
  }

  .card-head-right{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

  .card-body{ overflow: hidden; transition: max-height .25s ease; }

  .card-title{ font-size: 1.1rem; font-weight: 600; color: var(--title); display: flex; align-items: center; gap: 8px; letter-spacing: -0.014em; line-height: 1.25; }
  .card-title .dot{ display: none; }
  .card-sub{ font-size: 0.8rem; color: var(--meta); margin: -4px 0 12px; }

  .count-pill{
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    background: var(--bg-raised);
    border: 1px solid var(--border-soft);
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }

  .link-btn{
    background: none;
    border: none;
    color: var(--gold-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    font-family: inherit;
  }

  .link-btn:hover{ text-decoration: underline; }

  /* ---------- Overdracht ---------- */
  textarea#handoverNote{
    width: 100%;
    min-height: 84px;
    resize: vertical;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 13px 14px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--text);
    background: var(--bg-raised);
    outline: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }

  textarea#handoverNote:focus{
    border-color: var(--accent);
    background: var(--card);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  textarea#handoverNote::placeholder{ color: var(--meta); }

  .save-hint{ font-size: 11px; color: var(--text-faint); margin-top: 5px; min-height: 14px; }

  /* ---------- Checklist ---------- */
  .task-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

  .task-list{ gap: 3px; }

  .task-row{ display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: var(--radius-md); transition: background .12s ease; }
  .task-row:hover{ background: var(--bg-raised); }

  .task-row input[type="checkbox"]{ width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }

  .task-label{ flex: 1; font-size: 13.5px; color: var(--text); cursor: pointer; word-break: break-word; }
  .task-row.done .task-label{ color: var(--text-faint); text-decoration: line-through; }

  .remove-btn{
    background: var(--bg-raised);
    border: 1px solid var(--border-soft);
    color: var(--text-faint);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 9px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    opacity: 1;
    transition: color .12s ease, background .12s ease, border-color .12s ease;
  }

  .remove-btn:hover{ color: var(--danger-text); background: var(--danger-soft); border-color: var(--danger-line); }

  .add-row{ display: flex; gap: 8px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--hairline); flex-wrap: wrap; }

  .add-row input[type="text"],
  .add-row input[type="date"],
  .add-row input[type="time"],
  .add-row input[type="tel"],
  .add-row input[type="email"],
  .add-row input[type="password"],
  .add-row input[type="file"],
  .add-row select{
    flex: 1;
    min-width: 110px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 13px;
    min-height: var(--tap-min);
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    background: var(--bg-raised);
    color: var(--text);
  }

  .add-row input:focus, .add-row select:focus{ border-color: var(--accent); }

  .add-row button{
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius-md);
    padding: 11px 18px;
    min-height: var(--tap-min);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: filter .15s ease;
  }

  .add-row button:hover{ filter: brightness(1.12); }

  .add-row button.secondary{
    background: var(--bg-raised);
    color: var(--text-soft);
    border: 1px solid var(--border);
  }
  .add-row button.secondary:hover{ color: var(--text); border-color: var(--text-faint); filter:none; }

  /* ---------- Hulpklassen ----------
     Vervangen de voormalige inline style="" attributen, zodat de CSP
     'style-src 'self'' kan zijn (geen 'unsafe-inline'). */
  .is-hidden{ display: none; }
  .stack-gap-top{ margin-top: 8px; }
  .add-row.flush{ border-top: none; padding-top: 0; margin-top: 0; }
  .af-row .af-title{ flex: 1; min-width: 0; }
  #newResidentRoom{ max-width: 120px; }
  #newResidentClientnr{ max-width: 150px; }
  #newResidentLocker{ max-width: 110px; }
  #exportPasswordInput{ min-width: 220px; }

  /* ---------- Agenda: verticaal invoerformulier (titel / tijd+bewoner / knop) ---------- */
  .agenda-form{
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
  }

  .af-title{
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 13px;
    min-height: var(--tap-min);
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    background: var(--bg-raised);
    color: var(--text);
  }

  .af-title:focus{ border-color: var(--accent); }
  .af-title::placeholder{ color: var(--meta); }

  .af-row{ display: flex; flex-wrap: wrap; gap: 8px; }

  .af-time{
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 100%;
    min-width: 220px;
    min-height: var(--tap-min);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 12px;
    background: var(--bg-raised);
    transition: border-color .12s ease;
  }

  .af-time:focus-within{ border-color: var(--accent); }

  .af-clock-icon{ color: var(--text-faint); flex-shrink: 0; display: flex; align-items: center; }

  .af-time select{
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    padding: 8px 0;
  }

  .af-time select.af-hour{ flex: 1 1 auto; min-width: 84px; }
  .af-time select.af-minute{ flex: 0 0 auto; min-width: 40px; }

  .af-time select:disabled{ color: var(--text-faint); cursor: not-allowed; }
  .af-colon{ color: var(--text-faint); font-size: 13px; flex-shrink: 0; }

  .af-resident{
    flex: 1;
    min-width: 170px;
    min-height: var(--tap-min);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    background: var(--bg-raised);
    color: var(--text);
  }

  .af-resident:focus{ border-color: var(--accent); }

  .af-submit{
    width: 100%;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    min-height: var(--tap-min);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease;
  }

  .af-submit:hover{ filter: brightness(1.12); }

  /* ---------- Bewoners: aanwezigheid als Bento-stat-tegels ---------- */
  .resident-summary{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
  }

  .stat-tile{
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-raised);
    border: 1px solid var(--border-soft);
    border-top: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 13px 14px;
  }
  .stat-tile.st-seen{ border-top-color: var(--accent-line); }
  .stat-tile.st-unseen{ border-top-color: var(--gold-line); }
  .stat-tile.st-absent{ border-top-color: var(--slate-soft); }

  .stat-num{
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--title);
    font-variant-numeric: tabular-nums;
  }
  .stat-tile.st-seen .stat-num{ color: var(--accent-text); }
  .stat-tile.st-unseen .stat-num{ color: var(--gold-text); }
  .stat-tile.st-absent .stat-num{ color: var(--slate); }

  .stat-label{ font-size: 0.75rem; font-weight: 500; color: var(--meta); line-height: 1.3; }
  .stat-total{
    grid-column: 1 / -1;
    font-size: 0.75rem;
    color: var(--meta-dim);
    margin-top: 2px;
  }

  .resident-controls{ display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-bottom: 16px; }

  .resident-search-wrap{ position: relative; width: 100%; }

  /* Zoekbalk: strak, filled, geen dubbele omranding — 'ademt' in de kaart */
  #residentSearch{
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 12px 40px 12px 14px;
    min-height: var(--tap-min);
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    background: var(--bg-raised);
    color: var(--text);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }

  #residentSearch:focus{
    border-color: var(--accent);
    background: var(--card);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  #residentSearch::placeholder{ color: var(--meta); }

  .search-clear-btn{
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--text-faint);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    z-index: 5;
    transition: color .12s ease, background .12s ease;
  }

  .search-clear-btn.visible{ display: flex; }
  .search-clear-btn:hover{ color: var(--text); background: var(--card); }

  .resident-dropdown{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    max-height: 240px;
    overflow-y: auto;
    z-index: 20;
    display: none;
    box-shadow: var(--shadow-pop);
  }

  .resident-dropdown.open{ display: block; }

  .resident-option{
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    border-bottom: 1px solid var(--hairline);
  }

  .resident-option:last-child{ border-bottom: none; }
  .resident-option:hover{ background: var(--bg-raised); }
  .resident-option.selected{ background: var(--accent-soft); }

  .rdot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .rdot.st-unseen{ background: transparent; border: 1px solid var(--text-faint); }
  .rdot.st-seen{ background: var(--accent); }
  .rdot.st-absent{ background: var(--warn); }

  .roname{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .roroom{ font-size: 11px; color: var(--text-faint); flex-shrink: 0; }

  .resident-dropdown-empty{ padding: 12px 10px; font-size: 12.5px; color: var(--text-faint); }

  .sort-dropdown-wrap{ position: relative; flex-shrink: 0; align-self: flex-start; }

  /* 'Naam'-filter: rustige tekstknop zonder eigen kader (geen dubbele rand) */
  .sort-dropdown-btn{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 1px solid transparent;
    color: var(--meta);
    font-size: 0.8rem;
    font-family: inherit;
    padding: 8px 10px;
    min-height: 38px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
  }

  .sort-dropdown-btn:hover{ background: var(--bg-raised); color: var(--text); }
  .sort-icon{ color: currentColor; flex-shrink: 0; opacity: .8; }
  .sort-dropdown-label{ font-weight: 600; color: var(--text); }
  .sort-dropdown-caret{ font-size: 10px; color: var(--meta); margin-left: 1px; }

  .sort-dropdown-menu{
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 5px;
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
    z-index: 25;
    box-shadow: var(--shadow-pop);
  }

  .sort-dropdown-menu.open{ display: flex; }

  .sort-dropdown-option{
    display: flex;
    align-items: center;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 7px 9px;
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
  }

  .sort-dropdown-option:hover{ background: var(--bg-raised); }
  .sort-dropdown-option.active{ background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }

  /* ---------- Bewoners: detailkaart ---------- */
  .resident-detail-empty{
    font-size: 0.8rem;
    color: var(--text-faint);
    padding: 18px 12px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
  }

  .resident-detail-card{
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    padding: 14px;
    transition: background .15s ease, border-color .15s ease;
  }

  .resident-detail-card.st-seen{ background: var(--accent-soft); border-color: var(--accent); }
  .resident-detail-card.st-absent{ background: var(--warn-soft); border-color: var(--warn); }

  /* In de bewonerslijst: geen dubbele kop, alleen de bewerkvelden. */
  .resident-detail-card.in-list{ background: var(--card); border-color: var(--border-soft); }
  .resident-detail-actions{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

  .resident-detail-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  .resident-detail-name-wrap{ display: flex; align-items: center; gap: 8px; min-width: 0; }

  .resident-detail-name{
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .resident-detail-room{
    font-size: 11px;
    color: var(--text-faint);
    background: var(--card);
    border: 1px solid var(--border-soft);
    padding: 1px 7px;
    border-radius: 100px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }

   .zorgned-badge{
    font: inherit;
    line-height: normal;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    font-size: 11px;
    color: var(--accent-text);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    padding: 1px 7px;
    border-radius: 100px;
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease;
  }

  .zorgned-badge-icon{ width: 12px; height: 12px; flex-shrink: 0; display: block; }


  .zorgned-badge:hover{ filter: brightness(1.15); text-decoration: underline; }

  .resident-nav{ display: flex; gap: 4px; flex-shrink: 0; }

  .resident-nav-btn{
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-soft);
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .resident-nav-btn:hover{ color: var(--text); border-color: var(--text-faint); }
  .zorgned-icon-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 7px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .12s ease, background .12s ease;
  }
  .zorgned-icon-btn img{ width: 15px; height: 15px; display: block; }
  .zorgned-icon-btn:hover{ border-color: var(--accent); background: var(--accent-soft); }

  /* ---------- Bewoners: volledige lijst (tabblad Bewoners) ---------- */
  .resident-full-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

  .resident-full-row{
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .12s ease;
  }

  .resident-full-row:last-child{ border-bottom: none; }
  .resident-full-row:hover{ background: var(--bg-raised); }

  .resident-full-main{ flex: 1; min-width: 0; }

  .resident-full-top{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

  .resident-full-name{ font-size: 13.5px; font-weight: 600; color: var(--text); }

  .resident-full-room{
    font-size: 11px;
    color: var(--text-faint);
    background: var(--card);
    border: 1px solid var(--border-soft);
    padding: 1px 7px;
    border-radius: 100px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }

  .resident-full-note{
    font-size: 12px;
    color: var(--text-soft);
    margin-top: 3px;
    word-break: break-word;
  }

  .resident-full-arrow{ color: var(--text-faint); font-size: 15px; flex-shrink: 0; }
  .resident-full-row-expanded{ background: var(--bg-raised); }
  .resident-full-expanded-wrap{ list-style: none; padding: 6px 4px 12px; }

  /* ---------- Status-indicator (3-staps, alleen stip, klik + hover-popover) ---------- */
  .status-indicator-wrap{ position: relative; display: inline-flex; flex-shrink: 0; }

  .status-dot-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
  }

  .status-dot-btn:hover{ background: var(--card); border-color: var(--border); }

  .status-dot-visual{ width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
  .status-dot-visual.st-unseen{ background: transparent; border: 1.5px solid var(--text-faint); }
  .status-dot-visual.st-seen{ background: var(--accent); }
  .status-dot-visual.st-absent{ background: var(--warn); }

  .status-popover{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 35;
    min-width: 175px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.42);
  }

  /* Onzichtbare brug die de ruimte tussen stip en pop-up overbrugt, zodat :hover
     niet wegvalt terwijl de muis van de knop naar het menu beweegt. */
  .status-popover::before{
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 6px;
    background: transparent;
  }

  .status-indicator-wrap:hover .status-popover{ display: flex; }

  .status-popover-option{
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 7px 9px;
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
  }

  .status-popover-option:hover{ background: var(--bg-raised); }

  .resident-note{
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 12.5px;
    font-family: inherit;
    background: var(--card);
    color: var(--text);
    outline: none;
  }

  .resident-note::placeholder{ color: var(--meta); }
  .resident-note:focus{ border-color: var(--accent); }

  /* ---------- Beheer lijst-rijen ---------- */
  .manage-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 380px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #3a3d41 transparent;
  }

  .manage-list::-webkit-scrollbar{ width: 8px; }
  .manage-list::-webkit-scrollbar-track{ background: transparent; }
  .manage-list::-webkit-scrollbar-thumb{ background: #3a3d41; border-radius: 100px; }
  .manage-list::-webkit-scrollbar-thumb:hover{ background: #47494e; }

  .manage-row{ display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
  .manage-row:last-child{ border-bottom: none; }

  .edit-row{ display: flex; gap: 6px; flex: 1; min-width: 200px; flex-wrap: wrap; }

  .edit-row input{
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 12.5px;
    font-family: inherit;
    background: var(--bg-raised);
    color: var(--text);
    outline: none;
  }

  .edit-row input:focus{ border-color: var(--accent); }
  .edit-row .f-main{ flex: 1.5; min-width: 110px; }
  .edit-row .f-side{ flex: 0.6; min-width: 70px; }

  .edit-row select{
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 12.5px;
    font-family: inherit;
    background: var(--bg-raised);
    color: var(--text);
    outline: none;
  }

  .edit-row select:focus{ border-color: var(--accent); }

  .empty-note{ font-size: 12.5px; color: var(--text-faint); padding: 6px 4px; }

  /* ---------- Noodcontacten (dashboard weergave) ---------- */
  .contact-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

  .contact-row{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--hairline); }
  .contact-row:last-child{ border-bottom: none; }
  .contact-name{ font-size: 13px; color: var(--text); }
  .contact-number{ font-size: 13px; font-weight: 600; color: var(--accent-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .contact-row.urgent .contact-number{ color: var(--danger); }

  .contact-number-link{ text-decoration: none; cursor: pointer; }
  .contact-number-link:hover{ text-decoration: underline; }

  /* ---------- Stadsteam Backup (dashboard) ---------- */
  .filter-pills{ display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }

  .filter-pill{
    background: var(--bg-raised);
    border: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 0.8rem;
    padding: 8px 14px;
    min-height: 38px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: inherit;
    transition: all .12s ease;
  }

  .filter-pill:hover{ border-color: var(--text-faint); color: var(--text); }
  .filter-pill.active{ background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
  .stadsteam-search-wrap{ position: relative; margin-bottom: 12px; }
  .stadsteam-search-wrap .af-title{ padding-right: 38px; margin-bottom: 0; border-radius: var(--radius-pill); }

  #stadsteamFilters .filter-pill.active[data-team="volwassenen"],
  #stadsteamFiltersTab .filter-pill.active[data-team="volwassenen"]{
    background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  }
  #stadsteamFilters .filter-pill.active[data-team="jongvolwassenen"],
  #stadsteamFiltersTab .filter-pill.active[data-team="jongvolwassenen"]{
    background: var(--slate); border-color: var(--slate); color: var(--on-slate);
  }
  #stadsteamFilters .filter-pill.active[data-team="veldwerkers"],
  #stadsteamFiltersTab .filter-pill.active[data-team="veldwerkers"]{
    background: var(--gold); border-color: var(--gold); color: var(--on-gold);
  }

  .stadsteam-list{
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .stadsteam-item{ padding: 9px 4px; border-bottom: 1px solid var(--hairline); }
  .stadsteam-item:last-child{ border-bottom: none; }

  .stadsteam-item-top{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
  .stadsteam-name{ font-size: 13px; font-weight: 600; color: var(--text); }

  .team-label{
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 100px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .team-label.team-volwassenen{ background: var(--accent-soft); color: var(--accent-text); }
  .team-label.team-jongvolwassenen{ background: var(--slate-soft); color: var(--slate); }
  .team-label.team-veldwerkers{ background: var(--gold-soft); color: var(--gold-text); }

  .stadsteam-item-contact{ display: flex; flex-wrap: wrap; gap: 4px 12px; }

  .stadsteam-link{
    font-size: 12px;
    color: var(--text-soft);
    text-decoration: none;
  }

  .stadsteam-link:hover{ color: var(--accent-text); text-decoration: underline; }

  .stadsteam-text{
    font-size: 12px;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
  }

  .stadsteam-empty{ font-size: 12.5px; color: var(--text-faint); padding: 10px 4px; }

  /* ---------- Agenda: compact (dashboard) ---------- */
  .agenda-mini-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
  .agenda-mini-item{ display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
  .agenda-mini-item:last-child{ border-bottom: none; }

  .agenda-empty{ font-size: 12.5px; color: var(--text-faint); padding: 6px 4px; }

  .agenda-time{ font-size: 12.5px; font-weight: 600; color: var(--accent-text); min-width: 40px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
  .agenda-time.notime{ color: var(--text-faint); font-weight: 400; }

  .agenda-title{ flex: 1; font-size: 13.5px; color: var(--text); word-break: break-word; min-width: 90px; }

  .agenda-resident-tag{
    font-size: 11px;
    color: var(--accent-text);
    background: var(--accent-soft);
    border: 1px solid var(--border-soft);
    padding: 2px 8px;
    border-radius: 100px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* ---------- Agenda tab: view switch ---------- */
  .view-switch{ display: inline-flex; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px; gap: 2px; }

  .view-switch button{
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-faint);
    padding: 8px 16px;
    min-height: 36px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all .12s ease;
  }

  .view-switch button.active{ background: var(--accent); color: var(--on-accent); }

  /* ---------- Kalender maandweergave ---------- */
  /* Compact gehouden zodat de hele maand zonder scrollen op het scherm past. */
  #panelAgenda.tab-panel.active{ max-width: 620px; margin-inline: auto; }
  #monthView, #dayView{ max-width: 520px; margin-left: auto; margin-right: auto; }

  .cal-toolbar{ display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
  .cal-nav{ display: flex; align-items: center; gap: 6px; }

  .cal-nav-btn{
    background: var(--bg-raised);
    border: 1px solid var(--border);
    color: var(--text-soft);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s ease, color .12s ease;
  }

  .cal-nav-btn:hover{ background: var(--card); color: var(--text); }

  .cal-month-label{ font-size: 13.5px; font-weight: 600; color: var(--text); min-width: 150px; text-align: center; }

  .cal-weekdays{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
  .cal-weekdays span{ text-align: center; font-size: 10.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; padding-bottom: 4px; }

  .cal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

  .cal-cell{
    aspect-ratio: 1 / 0.86;
    border-radius: 12px;
    border: 1px solid transparent;
    background: var(--bg-raised);
    color: var(--text);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px;
    transition: background .12s ease, border-color .12s ease;
  }

  .cal-cell:hover{ background: var(--card); border-color: var(--border); }
  .cal-cell.empty{ background: transparent; cursor: default; pointer-events: none; }
  .cal-cell.today{ border-color: var(--gold-line); color: var(--gold-text); font-weight: 700; }
  .cal-cell.selected{ background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
  .cal-cell.today.selected{ border-color: var(--accent); }
  .cal-cell{ font-variant-numeric: tabular-nums; }

  .cal-dot{ font-size: 9px; line-height: 1; color: var(--bg); background: var(--accent); border-radius: 100px; min-width: 6px; height: 6px; padding: 0; }
  .cal-dot.multi{ min-width: 14px; height: 13px; padding: 0 3px; font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

  /* ---------- Kalender dagweergave ---------- */
  .day-toolbar{ display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 10px; flex-wrap: wrap; }
  .day-label-wrap{ display: flex; align-items: center; gap: 6px; }
  .day-label{ font-size: 13.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
  .day-label.today-label{ color: var(--gold-text); }

  .day-agenda-list{ display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
  .day-agenda-item{ display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
  .day-agenda-item:last-child{ border-bottom: none; }

  /* ---------- Gegevensbeheer & back-up ---------- */
  #importPanel{ margin-top: 10px; }

  textarea.import-textarea{
    width: 100%;
    min-height: 90px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 11px 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--text);
    background: var(--bg-raised);
    outline: none;
  }

  textarea.import-textarea:focus{ border-color: var(--accent); }

  /* ---------- Modal ---------- */
  .modal-overlay{ position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 200; }
  .modal-overlay.open{ display: flex; }

  .modal-box{ background: var(--card); border-radius: var(--radius-lg); padding: 22px 20px 18px; max-width: 340px; width: 100%; border: 1px solid var(--border); box-shadow: var(--shadow-pop); }
  .modal-box h3{ margin: 0 0 8px; font-size: 1.1rem; font-weight: 600; color: var(--text); }
  .modal-box p{ margin: 0 0 18px; font-size: 13px; color: var(--text-soft); }

  .modal-actions{ display: flex; justify-content: flex-end; gap: 8px; }
  .modal-actions button{ font-size: 0.85rem; font-weight: 500; padding: 11px 18px; min-height: var(--tap-min); border-radius: var(--radius-pill); cursor: pointer; font-family: inherit; }

  .modal-cancel{ background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-soft); }
  .modal-confirm{ background: var(--danger); border: 1px solid var(--danger); color: var(--on-danger); font-weight: 600; }
  .modal-confirm:hover{ filter: brightness(1.1); }
  .modal-cancel:hover{ background: var(--card); }

  footer.hint{ text-align: center; font-size: 11px; color: var(--text-faint); margin-top: 4px; }

  /* ---------- Aandachtsdossiers (badges + dashboardkaart) ---------- */
  .attention-flag-badge{
    font-size: 11px;
    color: var(--danger);
    background: var(--danger-soft);
    border: 1px solid var(--danger);
    padding: 1px 7px;
    border-radius: 100px;
    flex-shrink: 0;
  }

  .attention-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

  .attention-row{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--hairline);
  }
  .attention-row:last-child{ border-bottom: none; }

  .attention-row-main{ flex: 1; min-width: 0; }
  .attention-row-name{ font-size: 13px; font-weight: 600; color: var(--text); }
  .attention-row-note{ font-size: 12px; color: var(--text-soft); margin-top: 3px; word-break: break-word; }

  .attention-toggle-wrap{ margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); }

  .attention-toggle-label{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-soft);
    cursor: pointer;
  }

  .attention-toggle-label input[type="checkbox"]{ width: 16px; height: 16px; accent-color: var(--danger); cursor: pointer; }

  .attention-note-input{ margin-top: 8px; }

  /* ---------- Bewoners-tab: waarschuwingsbadge ---------- */
  .warning-count-badge{
    font-size: 11px;
    font-weight: 600;
    color: var(--warn);
    background: var(--warn-soft);
    border: 1px solid var(--warn);
    padding: 1px 7px;
    border-radius: 100px;
    flex-shrink: 0;
    cursor: pointer;
    font-family: inherit;
  }
  .warning-count-badge:hover{ filter: brightness(1.15); }

  /* ---------- Sancties: Officiële waarschuwingen ---------- */
  .warnings-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; max-height: 380px; overflow-y: auto; }

  .warning-row{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    transition: background .5s ease;
  }
  .warning-row:last-child{ border-bottom: none; }
  .warning-row-highlight{ background: var(--warn-soft); }

  .warning-row-main{ flex: 1; min-width: 0; }
  .warning-row-top{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .warning-row-name{ font-size: 13px; font-weight: 600; color: var(--text); }

  .warning-level-badge{
    font-size: 10.5px;
    font-weight: 600;
    color: var(--warn);
    background: var(--warn-soft);
    padding: 1px 8px;
    border-radius: 100px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .warning-row-date{ font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
  .warning-row-note{ font-size: 12px; color: var(--text-soft); margin-top: 3px; word-break: break-word; }

  /* ---------- Sancties: Pandverboden & Schorsingen ---------- */
  .bans-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; max-height: 380px; overflow-y: auto; }

  .ban-row{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--hairline);
    border-left: 3px solid transparent;
  }
  .ban-row:last-child{ border-bottom: none; }
  .ban-row.ban-active{ border-left-color: var(--danger); }
  .ban-row.ban-expired{ opacity: 0.55; }

  .ban-row-main{ flex: 1; min-width: 0; }
  .ban-row-top{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .ban-row-name{ font-size: 13px; font-weight: 600; color: var(--text); }

  .ban-status-badge{ font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 100px; flex-shrink: 0; white-space: nowrap; }
  .ban-status-active{ color: var(--danger); background: var(--danger-soft); }
  .ban-status-expired{ color: var(--text-faint); background: var(--bg-raised); }

  .ban-row-reason{ font-size: 12px; color: var(--text-soft); margin-top: 3px; word-break: break-word; }
  .ban-row-until{ font-size: 11px; color: var(--text-faint); margin-top: 2px; font-variant-numeric: tabular-nums; }

  /* ---------- Zoekbalk: actief-pandverbod-waarschuwing ---------- */
  .resident-dropdown-ban-warning{
    background: var(--danger-soft);
    color: var(--danger);
    border-bottom: 1px solid var(--danger);
    padding: 9px 10px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
  }

  /* ---------- Beveiliging (Beheer-tab) ---------- */
  .security-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    flex-wrap: wrap;
  }
  .security-label{ font-size: 13px; color: var(--meta); }
  .security-row select{
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 13px;
    min-height: var(--tap-min);
    font-size: 13px;
    font-family: inherit;
    background: var(--bg-raised);
    color: var(--text);
    outline: none;
  }

  /* 'Vergrendel dienst nu' — rustige secundaire knop i.p.v. wit UA-default */
  .security-row button,
  #lockNowBtn{
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 10px 16px;
    min-height: var(--tap-min);
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    color: var(--text-soft);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .security-row button:hover,
  #lockNowBtn:hover{
    background: var(--accent-soft);
    color: var(--accent-text);
    border-color: var(--accent);
  }

  .security-divider{ height: 1px; background: var(--hairline); margin: 12px 0; }

  /* ---------- Vergrendelscherm (pincode) ---------- */
  .lock-overlay{
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding:
      max(20px, env(safe-area-inset-top))
      max(20px, env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left));
    overflow-y: auto;
  }
  .lock-overlay.open{ display: flex; }

  .lock-box{
    width: 100%;
    max-width: 340px;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 28px 22px 24px;
    box-shadow: var(--shadow-card);
  }

  .lock-logo{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
  }
  .lock-logo-text{ color: var(--accent-text); }

  .lock-logo-img{ width: 56px; height: 56px; object-fit: contain; border-radius: 12px; mix-blend-mode: lighten; }

  .lock-box h3{ margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; color: var(--text); }
  .lock-sub{ font-size: 0.8rem; color: var(--text-faint); margin: 0 0 18px; line-height: 1.55; }

  .lock-input{
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 13px 14px;
    min-height: 48px;
    font-size: 16px;
    font-family: inherit;
    background: var(--bg-raised);
    color: var(--text);
    outline: none;
    margin-bottom: 10px;
    text-align: center;
    letter-spacing: 0.15em;
  }
  .lock-input:focus{ border-color: var(--accent); }
  .lock-input::placeholder{ letter-spacing: normal; color: var(--text-faint); }

  .lock-btn{
    width: 100%;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius-md);
    padding: 13px 16px;
    min-height: 48px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease;
  }
  .lock-btn:hover{ filter: brightness(1.12); }

  .lock-error{
    min-height: 16px;
    font-size: 12px;
    color: var(--danger);
    margin-top: 10px;
  }

  /* ---------- Responsief: sidebar-drawer + mobiel ---------- */
  @media (max-width: 1023px){
    .nav-toggle{ display: flex; }

    .sidebar{
      position: fixed;
      top: 0;
      left: -288px;
      width: 268px;
      max-width: 82vw;
      box-shadow: var(--shadow-pop);
      transition: none;
      /* Drawer-inhoud (schakelaar-logo, navigatie) onder de statusbalk uit. */
      padding-top: calc(20px + env(safe-area-inset-top));
      padding-bottom: calc(20px + env(safe-area-inset-bottom));
      padding-left: calc(14px + env(safe-area-inset-left));
    }
    .app.nav-open .sidebar{ left: 0; }

    .nav-backdrop{ display: block; pointer-events: none; transition: none; }
    .app.nav-open .nav-backdrop{ opacity: 1; pointer-events: auto; }

    .main{
      padding:
        calc(18px + env(safe-area-inset-top))
        calc(20px + env(safe-area-inset-right))
        calc(44px + env(safe-area-inset-bottom))
        calc(20px + env(safe-area-inset-left));
    }
  }

  @media (max-width: 1023px) and (prefers-reduced-motion: no-preference){
    .sidebar{ transition: left .24s ease; }
    .nav-backdrop{ transition: opacity .2s ease; }
  }

  @media (max-width: 767px){
    .main{
      padding:
        calc(16px + env(safe-area-inset-top))
        calc(14px + env(safe-area-inset-right))
        calc(40px + env(safe-area-inset-bottom))
        calc(14px + env(safe-area-inset-left));
    }
    .topbar{ margin-bottom: 18px; }
    .card{ padding: 18px 16px; border-radius: 18px; }
    .card-title{ font-size: 1.02rem; }

    .add-row input[type="text"],
    .add-row input[type="date"],
    .add-row input[type="time"],
    .add-row input[type="tel"],
    .add-row input[type="email"],
    .add-row input[type="password"],
    .add-row input[type="file"],
    .add-row select,
    .add-row button{ flex: 1 1 100%; min-width: 0; width: 100%; }
    .edit-row{ min-width: 0; }
    .edit-row input, .edit-row select{ flex: 1 1 100%; min-width: 0; }
    .sort-dropdown-menu{ left: 0; right: auto; }
  }

  @media (max-width: 380px){
    .main{
      padding:
        calc(13px + env(safe-area-inset-top))
        calc(11px + env(safe-area-inset-right))
        calc(32px + env(safe-area-inset-bottom))
        calc(11px + env(safe-area-inset-left));
    }
    .cal-month-label{ min-width: 100px; font-size: 12.5px; }
  }
  
        /* ---------- Splash screen (koude start) ---------- */
  .splash-overlay{
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .splash-fade-out{
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    pointer-events: none;
  }

  .splash-content{ display: flex; flex-direction: column; align-items: center; }

  .splash-logo-svg{ overflow: hidden; }

  .splash-track{
    animation: splashTrackIn 0.45s ease-out both;
  }

  .splash-knob{
    animation: splashKnobIn 0.55s cubic-bezier(0.22, 0.9, 0.28, 1) 0.35s both;
  }

  .splash-arc-top,
  .splash-arc-bottom{
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    stroke-linecap: butt;
  }

  .splash-arc-top{
    stroke: #9b8868;
    stroke-width: 18.3;
    animation: splashArcDraw 0.35s linear 0.95s both;
  }

  .splash-arc-bottom{
    stroke: #e9be94;
    stroke-width: 20.4;
    animation: splashArcDraw 0.35s linear 1.25s both;
  }

  .splash-title{
    margin-top: 14px;
    font-size: 17px;
    font-weight: 700;
    color: var(--accent-text);
    letter-spacing: -0.01em;
    animation: splashTitleAnim 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 1.6s both;
  }

  @keyframes splashTrackIn{
    0%{ opacity: 0; }
    100%{ opacity: 1; }
  }

     @keyframes splashKnobIn{
    0%{ transform: translateX(170px); }
    100%{ transform: translateX(0); }
  }

  @keyframes splashArcDraw{
    0%{ stroke-dashoffset: 100; }
    100%{ stroke-dashoffset: 0; }
  }

  @keyframes splashTitleAnim{
    0%{ transform: translateY(4px); opacity: 0; }
    100%{ transform: translateY(0); opacity: 1; }
  }

  /* ===========================================================
     Onboarding-rondleiding (spotlight + popover)
     =========================================================== */
  .tour{ position: fixed; inset: 0; z-index: 10050; }
  .tour[hidden]{ display: none !important; }

  /* Transparante laag die klikken op de app blokkeert tijdens de tour.
     De verduistering zelf komt van de box-shadow van .tour-spot. */
  .tour-backdrop{ position: absolute; inset: 0; background: transparent; }

  .tour-spot{
    position: absolute;
    top: 0; left: 0; width: 0; height: 0;
    border-radius: 16px;
    box-shadow:
      0 0 0 9999px rgba(10, 11, 13, 0.74),
      0 0 0 2px var(--accent),
      0 0 24px 6px rgba(111, 166, 147, 0.32);
    pointer-events: none;
    transition: top .24s ease, left .24s ease, width .24s ease, height .24s ease;
  }

  .tour-card{
    position: absolute;
    top: 0; left: 0;
    width: min(340px, calc(100vw - 24px));
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    padding: 18px 18px 14px;
    pointer-events: auto;
  }

  .tour-step{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 8px;
  }
  .tour-title{ margin: 0 0 6px; font-size: 1.04rem; font-weight: 700; color: var(--title); letter-spacing: -0.01em; }
  .tour-text{ margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--text-soft); }

  .tour-actions{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .tour-skip{
    background: none; border: none; padding: 8px 2px;
    font-family: inherit; font-size: 12.5px; color: var(--meta);
    cursor: pointer; min-height: var(--tap-min);
  }
  .tour-skip:hover{ color: var(--text-soft); }
  .tour-next{
    background: var(--brand-gradient); color: var(--on-accent);
    font-family: inherit; font-size: 13px; font-weight: 650;
    border: none; border-radius: var(--radius-pill);
    padding: 10px 20px; min-height: var(--tap-min); cursor: pointer;
    transition: filter .15s ease;
  }
  .tour-next:hover{ filter: brightness(1.07); }

  /* Mobiel / smalle viewport: kaart als onderste sheet, altijd gecentreerd. */
  .tour-card.is-sheet{
    position: fixed;
    left: calc(12px + env(safe-area-inset-left));
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    top: auto;
    width: auto;
  }

  @media (max-width: 1023px){
    .tour-card{
      position: fixed;
      left: calc(12px + env(safe-area-inset-left));
      right: calc(12px + env(safe-area-inset-right));
      bottom: calc(12px + env(safe-area-inset-bottom));
      top: auto;
      width: auto;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .tour-spot{ transition: none; }
  }