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

    :root {
      --c-header: #1E3A6E;
      --c-accent: #2E6DB4;
      --c-bg:     #EEF3FA;
      --c-bg2:    #E6EEF8;
      --c-border: #D0DCF0;
      --c-dim:    #4A6A90;
      --c-urgent: #B03A2E;
      --base:     16px;
    }

    html { font-size: var(--base); }

    body {
      font-family: 'Segoe UI', Arial, sans-serif;
      background: var(--c-bg);
      color: #1A2A3A;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      user-select: none;
    }

    /* ── Login overlay ── */
    #login-overlay {
      position: fixed; inset: 0;
      background: var(--c-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999;
      transition: background 0.5s, opacity 0.5s;
    }

    .login-box {
      background: white;
      border-radius: 16px;
      padding: 36px 32px;
      width: 90%;
      max-width: 360px;
      box-shadow: 0 4px 24px rgba(30,58,110,0.12);
      text-align: center;
      transition: background 0.4s, box-shadow 0.4s;
    }

    /* Groene successtatus */
    #login-overlay.succes { background: #c8f0c8; }
    .login-box.succes {
      background: #eefaee;
      box-shadow: 0 4px 32px rgba(40,160,40,0.25);
    }
    .succes-ikoon {
      font-size: 3.5rem; margin-bottom: 10px;
      animation: pop-in 0.4s cubic-bezier(0.34,1.56,0.64,1);
    }
    @keyframes pop-in {
      from { transform: scale(0); opacity: 0; }
      to   { transform: scale(1); opacity: 1; }
    }
    .succes-tekst {
      font-size: 1.3rem; font-weight: 700; color: #1a6a1a;
    }

    .login-box h1 { font-size: 1.6rem; color: var(--c-header); margin-bottom: 6px; }
    .login-box p  { font-size: 0.9rem; color: #888; margin-bottom: 24px; }

    .login-veld { margin-bottom: 14px; text-align: left; }
    .login-veld label {
      display: block; font-size: 0.78rem; font-weight: 700;
      color: #888; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px;
    }
    .login-veld input {
      width: 100%; border: 2px solid var(--c-border);
      border-radius: 8px; padding: 11px 12px;
      font-size: 1rem; font-family: inherit; color: #1A2A3A;
      background: #FAFCFF; transition: border-color 0.15s;
    }
    .login-veld input:focus { outline: none; border-color: var(--c-accent); }

    .login-fout {
      background: #FDECEA; color: #B03A2E;
      border-radius: 8px; padding: 10px; font-size: 0.85rem;
      margin-bottom: 14px; display: none; text-align: left;
    }

    .btn-login {
      width: 100%; background: var(--c-accent); color: white;
      border: none; border-radius: 8px; padding: 13px;
      font-size: 1.05rem; font-weight: 600; cursor: pointer;
      font-family: inherit; transition: opacity 0.15s;
    }
    .btn-login:hover { opacity: 0.88; }
    .btn-login:disabled { opacity: 0.5; cursor: default; }

    /* ── Header ── */
    #header {
      background: var(--c-header);
      color: white;
      text-align: center;
      padding: 28px 20px 20px;
      flex-shrink: 0;
      position: relative;
    }

    #btn-uitloggen {
      display: none; /* standaard verborgen, zichtbaar via instelling */
      position: absolute;
      top: 10px; right: 12px;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 6px;
      color: rgba(255,255,255,0.45);
      font-size: 0.7rem;
      padding: 4px 8px;
      cursor: pointer;
      font-family: inherit;
      transition: opacity 0.2s, color 0.2s, border-color 0.2s;
    }
    #btn-uitloggen:hover { color: white; border-color: rgba(255,255,255,0.7); opacity: 1; }

    #klok {
      font-size: 5rem;
      font-weight: 300;
      letter-spacing: 4px;
      line-height: 1;
    }

    #datum {
      font-size: 1.6rem;
      font-weight: 400;
      margin-top: 8px;
      opacity: 0.82;
      text-transform: capitalize;
    }

    /* ── Countdown ── */
    #countdown-banner {
      background: var(--c-accent);
      color: white;
      text-align: center;
      padding: 12px 20px;
      font-size: 1.3rem;
      font-weight: 600;
      display: none;
      flex-shrink: 0;
      animation: pulse 2s infinite;
    }

    @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.82; } }

    #countdown-banner.urgent {
      background: var(--c-urgent);
      animation: pulse 1s infinite;
    }

    /* ── Body ── */
    #body { display: flex; flex: 1; overflow: hidden; }

    .dag-kolom {
      flex: 1; padding: 22px 26px; overflow-y: auto;
      border-right: 1px solid var(--c-border);
    }

    .dag-kolom:last-child { border-right: none; background: var(--c-bg2); }

    .dag-titel {
      font-size: 1.1rem; font-weight: 700; color: var(--c-accent);
      margin-bottom: 14px; padding-bottom: 8px;
      border-bottom: 2px solid var(--c-border);
      text-transform: uppercase; letter-spacing: 1.5px;
    }

    .dag-kolom:last-child .dag-titel { color: var(--c-dim); }

    /* ── Afspraak kaart ── */
    .afspraak {
      display: flex; align-items: center; gap: 14px;
      background: white; border-radius: 14px;
      padding: 14px 16px; margin-bottom: 12px;
      box-shadow: 0 1px 6px rgba(30,58,110,0.09);
      border-left: 4px solid var(--c-accent);
    }

    .dag-kolom:last-child .afspraak { border-left-color: var(--c-dim); }
    .afspraak.voorbij   { opacity: 0.35; border-left-color: #C0C8D4; }
    .afspraak.binnenkort { border-left-color: var(--c-header); background: var(--c-bg2); }

    .afspraak-foto {
      width: 52px; height: 52px; border-radius: 50%;
      object-fit: cover; flex-shrink: 0; border: 2px solid var(--c-border);
    }

    .afspraak-initiaal {
      width: 52px; height: 52px; border-radius: 50%;
      background: var(--c-bg2); color: var(--c-dim);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 1.3rem; flex-shrink: 0;
    }

    .afspraak-info { flex: 1; }

    .afspraak-tijd {
      font-size: 1.45rem; font-weight: 700;
      color: var(--c-accent); line-height: 1.1;
    }

    .dag-kolom:last-child .afspraak-tijd { color: var(--c-dim); }
    .afspraak.voorbij .afspraak-tijd     { color: #A0AABA; }
    .afspraak.binnenkort .afspraak-tijd  { color: var(--c-header); }

    .afspraak-beschrijving {
      font-size: 1.35rem; font-weight: 500;
      line-height: 1.25; color: #1A2A3A; margin-top: 2px;
    }

    .afspraak-contact-naam { font-size: 0.95rem; color: #7A8A9A; margin-top: 3px; }

    .contact-knoppen { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

    .contact-knop {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px; border-radius: 8px;
      font-size: 1rem; font-weight: 600; font-family: inherit;
      cursor: pointer; border: none; color: white;
      background: var(--c-accent); transition: opacity 0.15s;
    }

    .contact-knop:hover { opacity: 0.85; }
    .contact-knop.adres { background: var(--c-dim); }

    .leeg {
      color: #8899AA; font-size: 1.1rem;
      font-style: italic; margin-top: 10px;
    }

    /* ── Modal ── */
    #modal-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.55); z-index: 100;
      align-items: center; justify-content: center;
    }

    #modal-overlay.open { display: flex; }

    #modal {
      background: white; border-radius: 18px;
      padding: 28px; width: 90%; max-width: 480px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.25);
      position: relative;
    }

    #modal-sluit {
      position: absolute; top: 14px; right: 16px;
      background: none; border: none; font-size: 1.6rem;
      cursor: pointer; color: #AAA; line-height: 1;
    }

    #modal-titel {
      font-size: 1.3rem; font-weight: 700;
      color: var(--c-header); margin-bottom: 16px; padding-right: 24px;
    }

    #modal-telefoon-nummer {
      font-size: 2.2rem; font-weight: 300; letter-spacing: 2px;
      color: var(--c-accent); text-align: center; padding: 16px 0;
    }

    #modal-adres-tekst {
      font-size: 1.1rem; color: #444; margin-bottom: 14px; line-height: 1.5;
    }

    #modal-kaart {
      width: 100%; height: 240px;
      border-radius: 10px; overflow: hidden; margin-bottom: 8px;
    }

    #kaart-status {
      font-size: 0.85rem; color: #999; text-align: center; padding: 4px 0 8px;
    }

    /* ── Footer ── */
    #footer {
      background: var(--c-bg2); text-align: center;
      padding: 7px; font-size: 0.78rem; color: #8899AA;
      flex-shrink: 0; border-top: 1px solid var(--c-border);
    }

    /* ── Dementieklok ── */
    .d-dag     { display: block; font-size: 3.8rem; font-weight: 800; }
    .d-dagdeel { display: block; font-size: 2.2rem; font-weight: 600; opacity: 0.9; margin-top: 2px; }
    .d-tijd    { display: block; font-size: 2rem;   font-weight: 300; margin-top: 6px; }
    .d-datum   { display: block; font-size: 1.3rem; font-weight: 400; opacity: 0.75; margin-top: 4px; }

    /* ── Analoge klok ── */
    .analoog-svg { width: 175px; height: 175px; max-width: 90%; }

    /* ── Nachtmodus (23u–06u) ── */
    body.nachtmodus                          { background: #080818 !important; }
    body.nachtmodus #header                  { background: #10102a; }
    body.nachtmodus .dag-kolom               { background: #10102a; border-color: #20204a; }
    body.nachtmodus .afspraak                { background: #181830; border-left-color: #30305a; }
    body.nachtmodus .afspraak-beschrijving,
    body.nachtmodus .dag-titel,
    body.nachtmodus .afspraak-tijd           { color: #6868a0; }
    body.nachtmodus #countdown-banner        { background: #1a2a40; }
    body.nachtmodus #footer                  { background: #10102a; color: #40406a; }

    /* ── Mobiel ── */
    @media (max-width: 640px) {
      body { overflow: auto; }

      #klok  { font-size: 3.5rem; letter-spacing: 2px; }
      #datum { font-size: 1.1rem; }
      #header { padding: 18px 14px 14px; }

      #btn-uitloggen { font-size: 0.65rem; padding: 3px 7px; }

      /* Kolommen stapelen onder elkaar */
      #body {
        flex-direction: column;
        overflow: visible;
        height: auto;
      }
      .dag-kolom {
        overflow-y: visible;
        border-right: none;
        border-bottom: 4px solid var(--c-border);
        padding: 16px 14px;
      }
      .dag-kolom:last-child { border-bottom: none; }

      .afspraak { padding: 11px 12px; gap: 10px; }
      .afspraak-foto, .afspraak-initiaal { width: 42px; height: 42px; font-size: 1.1rem; }
      .afspraak-tijd { font-size: 1.2rem; }
      .afspraak-beschrijving { font-size: 1.1rem; }

      /* Modal fullscreen op telefoon */
      #modal {
        width: 96%; padding: 20px 16px;
        max-height: 90vh; overflow-y: auto;
      }
      #modal-kaart { height: 180px; }
      #modal-telefoon-nummer { font-size: 1.8rem; }

      #countdown-banner { font-size: 1rem; padding: 10px 14px; }
    }