/* ============================================================
   Vervul Afspraken — UI
   ============================================================ */
:root{
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --primary-light:#dbeafe;

  --bg:#f5f6fa;
  --surface:#ffffff;
  --surface-alt:#fafbfd;
  --border:#e5e7eb;
  --border-strong:#d1d5db;

  --text:#111827;
  --muted:#6b7280;

  --ok:#16a34a;
  --warn:#d97706;
  --err:#dc2626;

  --radius:12px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.04);

  --topbar-h:56px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  font-size:14px;
  -webkit-text-size-adjust:100%;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

h1{margin:0 0 1rem;font-size:1.6rem;font-weight:700}
h2{margin:0 0 .75rem;font-size:1.2rem;font-weight:600}
h3{margin:0 0 .5rem;font-size:1.05rem;font-weight:600}

.muted{color:var(--muted)}
.small{font-size:.85rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

/* ---------- Alerts ---------- */
.alert{padding:.75rem 1rem;border-radius:var(--radius-sm);margin:0 0 1rem;border:1px solid var(--border)}
.alert.ok  {background:#dcfce7;color:#166534;border-color:#bbf7d0}
.alert.warn{background:#fef3c7;color:#92400e;border-color:#fde68a}
.alert.err {background:#fee2e2;color:#991b1b;border-color:#fecaca}

/* ---------- Layout ---------- */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{
  background:var(--surface);
  border-right:1px solid var(--border);
  padding:1rem;
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.brand{font-weight:800;font-size:1.25rem;color:var(--primary)}
.brand span{color:var(--text)}
.brand.small{font-size:1.05rem;margin-bottom:0;color:var(--text)}
.brand.small + ::before{content:""}

.sidebar nav{display:flex;flex-direction:column;gap:2px;margin-top:1rem;flex:1;overflow-y:auto}
.sidebar nav a{
  padding:.55rem .75rem;
  border-radius:var(--radius-sm);
  color:var(--text);
  font-size:.9rem;
  font-weight:500;
  display:flex;align-items:center;gap:.55rem;
}
.sidebar nav a:hover{background:var(--surface-alt);text-decoration:none}
.sidebar nav a.active{background:var(--primary);color:#fff}
.nav-icon{font-size:1rem;width:1.1rem;text-align:center}

.sidebar-foot{
  border-top:1px solid var(--border);
  padding-top:1rem;margin-top:1rem;
  display:flex;flex-direction:column;gap:.4rem;font-size:.85rem
}

.content{padding:1.5rem 2rem;min-width:0}

/* Mobile topbar — verborgen op desktop */
.mtopbar{display:none}
.side-overlay{display:none}
.hamburger{display:none}

/* ---------- Cards & grids ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
  margin-bottom:1rem;
  box-shadow:var(--shadow-sm);
}
.grid{display:grid;gap:1rem;margin-bottom:1rem}
.grid.stats   {grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.grid.cards-3 {grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.grid-2  {grid-template-columns:2fr 1fr}

.stat span{display:block;color:var(--muted);font-size:.8rem;font-weight:500}
.stat b{font-size:1.6rem;display:block;margin-top:.25rem;font-weight:700}

.price{font-size:1.4rem;font-weight:700;color:var(--primary);margin:.25rem 0}
.kpis{display:flex;gap:.75rem;margin-top:.5rem;font-size:.85rem;color:var(--muted)}
.avatar{
  width:48px;height:48px;border-radius:50%;
  background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;margin-bottom:.5rem;
}

/* ---------- Buttons ---------- */
.btn,.btn-primary,.btn-mini{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.5rem .9rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);
  background:#fff;color:var(--text);
  cursor:pointer;font-size:.85rem;font-weight:500;
  text-decoration:none;
  transition:background .12s ease,transform .1s ease;
  font-family:inherit;
}
.btn:hover{background:var(--surface-alt);text-decoration:none}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark);color:#fff;text-decoration:none}
.btn-mini{padding:.3rem .65rem;font-size:.75rem}
.btn-mini.danger{color:var(--err);border-color:#fca5a5}
.btn-mini.danger:hover{background:#fee2e2}

/* ---------- Tables ---------- */
.tbl-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--radius-sm);
}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{
  padding:.65rem .65rem;
  text-align:left;
  border-bottom:1px solid var(--border);
  font-size:.88rem;
}
.tbl th{
  background:var(--surface-alt);
  font-weight:600;color:var(--muted);
  font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;
}
.tbl tr:hover td{background:var(--surface-alt)}

/* ---------- Badges ---------- */
.badge{
  display:inline-block;
  padding:.15rem .55rem;
  border-radius:999px;
  background:#e5e7eb;color:#374151;
  font-size:.75rem;font-weight:600;
}
.badge.ok  {background:#dcfce7;color:#166534}
.badge.warn{background:#fef3c7;color:#92400e}
.badge-sick{background:#fee2e2;color:#991b1b}
.badge-off {background:#e5e7eb;color:#374151}

.actions{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}

/* ---------- Tabs ---------- */
.tabs{
  display:flex;gap:.25rem;
  border-bottom:1px solid var(--border);
}
.tab{
  padding:.55rem 1rem;
  font-size:.9rem;font-weight:500;
  color:var(--muted);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  text-decoration:none;
  transition:color .12s ease,border-color .12s ease;
}
.tab:hover{color:var(--text);text-decoration:none}
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}

/* ---------- Toolbar ---------- */
.toolbar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:1rem;gap:.5rem;flex-wrap:wrap;
}
.toolbar-right{display:flex;gap:.4rem}
.agenda-nav{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.agenda-nav input[type=date]{
  padding:.4rem .55rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm)
}

/* ---------- Forms ---------- */
.form label{display:block;margin:.6rem 0;font-size:.85rem;font-weight:500}
.form input,.form select,.form textarea{
  width:100%;padding:.55rem .65rem;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  font-size:.9rem;font-family:inherit;background:#fff;
  margin-top:.25rem;
}
.form textarea{min-height:90px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:2px solid var(--primary-light);border-color:var(--primary);
}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.form .check{display:flex;align-items:center;gap:.5rem}
.form .check input{width:auto;margin:0}
.form-actions{display:flex;gap:.5rem;align-items:center;margin-top:.5rem;flex-wrap:wrap}

/* ---------- Modal ---------- */
.modal{
  border:none;border-radius:var(--radius);
  padding:1.5rem;max-width:500px;width:90%;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.modal::backdrop{background:rgba(15,23,42,.5)}
.modal h3{margin-top:0}
.modal label{display:block;margin:.6rem 0;font-size:.85rem;font-weight:500}
.modal input,.modal select,.modal textarea{
  width:100%;padding:.55rem .65rem;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  font-size:.9rem;font-family:inherit;background:#fff;margin-top:.25rem;
}
.modal .row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.modal .check{display:flex;align-items:center;gap:.5rem}
.modal .check input{width:auto;margin:0}
.modal menu{
  display:flex;justify-content:flex-end;gap:.5rem;
  padding:0;margin:1.25rem 0 0;
}
.modal menu button{
  padding:.5rem 1rem;border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);background:#fff;
  cursor:pointer;font-weight:500;font-family:inherit;
}
.modal menu .btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ============================================================
   Drag-and-drop agenda — STICKY TIJDKOLOM
   ============================================================ */
.agenda-wrap{padding:0;overflow:hidden}
.agenda-hint{padding:.5rem 1rem;margin:0;border-top:1px solid var(--border);background:var(--surface-alt)}
#agenda-dnd{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Belangrijk: minimaal 1 vaste kolom (tijden) + scroll voor de rest */
.dnd-grid{
  display:grid;
  gap:0;
  background:var(--surface);
  position:relative;
}

/* Header-cellen */
.dnd-corner,
.dnd-emp-head{
  position:sticky;top:0;
  background:var(--surface-alt);
  padding:.65rem .75rem;
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  font-weight:600;font-size:.9rem;text-align:center;
  z-index:5;
}
.dnd-emp-head:last-child{border-right:none}

/* Linker hoek-cel: sticky horizontaal én verticaal */
.dnd-corner{
  position:sticky;
  top:0;left:0;
  background:#f3f4f6;
  z-index:7;
  box-shadow:1px 0 0 var(--border);
}

/* Tijdkolom: blijft staan bij horizontaal scrollen */
.dnd-times{
  position:sticky;
  left:0;
  background:var(--surface-alt);
  border-right:1px solid var(--border);
  z-index:4;
  box-shadow:1px 0 0 var(--border);
}
.dnd-time{
  position:absolute;left:0;right:0;
  padding:2px 6px;font-size:.7rem;color:var(--muted);
  border-top:1px solid var(--border);text-align:right;
  background:var(--surface-alt);
}

/* Medewerker-kolommen */
.dnd-col{
  position:relative;
  border-right:1px solid var(--border);
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,transparent 71px,
    #f3f4f6 71px,#f3f4f6 72px
  );
}
.dnd-col:last-child{border-right:none}
.dnd-line{position:absolute;left:0;right:0;height:1px;background:#f1f5f9;pointer-events:none}

/* Afspraak-blokken */
.dnd-app{
  position:absolute;left:4px;right:4px;
  background:var(--primary);color:#fff;
  border-left:3px solid var(--primary-dark);
  border-radius:6px;padding:4px 6px;
  font-size:.78rem;line-height:1.25;
  cursor:grab;overflow:hidden;
  display:flex;flex-direction:column;gap:1px;
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease,box-shadow .12s ease;
  z-index:2;
}
.dnd-app:hover{transform:translateY(-1px);box-shadow:var(--shadow);z-index:3}
.dnd-app:active{cursor:grabbing;opacity:.75}
.dnd-app b    {font-size:.8rem;font-weight:600}
.dnd-app small{opacity:.85;font-size:.7rem}
.dnd-app .t   {font-size:.68rem;opacity:.9;margin-top:auto}

.dnd-break{
  position:absolute;left:4px;right:4px;
  background:repeating-linear-gradient(45deg,#e5e7eb,#e5e7eb 6px,#f3f4f6 6px,#f3f4f6 12px);
  color:var(--muted);
  border-radius:6px;font-size:.75rem;
  padding:4px 6px;font-style:italic;
  border:1px dashed var(--border-strong);
  z-index:1;
}

/* ---------- Personeel kaarten ---------- */
.legend{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  margin:0 0 1rem;
}
.emp-dot{
  display:inline-block;
  width:10px;height:10px;border-radius:50%;
  margin-right:.35rem;vertical-align:middle;
}
.dot-active{background:var(--ok)}
.dot-off   {background:#9ca3af}
.dot-sick  {background:var(--err)}
.dot-former{background:#6b7280}

.emp-card{
  display:flex;flex-direction:column;align-items:flex-start;
  text-decoration:none;color:inherit;
  position:relative;
  transition:transform .12s ease,box-shadow .12s ease;
}
.emp-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  text-decoration:none;
}
.emp-card-head{
  display:flex;width:100%;
  justify-content:space-between;align-items:flex-start;
}
.emp-card-head .emp-dot{margin:0;width:12px;height:12px}

.emp-card.is-active{border-left:4px solid var(--ok)}
.emp-card.is-off   {border-left:4px solid #9ca3af}
.emp-card.is-sick  {border-left:4px solid var(--err)}
.emp-card.is-former{border-left:4px solid #6b7280;opacity:.7}

/* ---------- Diensten kaarten ---------- */
.svc-card{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  transition:transform .12s ease,box-shadow .12s ease;
}
.svc-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  text-decoration:none;
}
.svc-card h3{margin-bottom:.25rem}
.svc-card .btn-mini{margin-top:auto;align-self:flex-start}
.svc-desc{margin:.4rem 0 0;line-height:1.4}

/* ---------- Plan cards ---------- */
.plan-card{display:flex;flex-direction:column;gap:.5rem}
.plan-card.is-current{border:2px solid var(--primary)}
.plan-features{padding-left:1.2rem;color:#475569;margin:.25rem 0;flex:1}
.plan-features li{margin:.2rem 0}

/* ---------- Reviews ---------- */
.review-item{
  border-top:1px solid var(--border);
  padding:.75rem 0;
}
.review-item:first-child{border-top:none;padding-top:0}
.stars-empty{color:#d1d5db}

/* ---------- Readonly textareas ---------- */
textarea[readonly]{
  font-family:ui-monospace,Menlo,Monaco,"Courier New",monospace;
  font-size:.8rem;background:var(--surface-alt);
}

/* ============================================================
   Responsive — TABLET / MOBIEL (≤900px) — hamburger menu
   ============================================================ */
@media (max-width:900px){
  /* Mobiele topbar zichtbaar */
  .mtopbar{
    display:flex;align-items:center;gap:.5rem;
    height:var(--topbar-h);
    padding:0 .75rem;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    position:fixed;          /* fixed = altijd zichtbaar bovenaan */
    top:0;left:0;right:0;
    z-index:60;              /* boven sidebar én overlay */
    box-shadow:var(--shadow-sm);
  }
  .mtopbar-title{
    flex:1;display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  .mtopbar-title .brand{
    font-size:1.05rem;margin:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .mtopbar-action{
    width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    border-radius:8px;font-size:1.2rem;text-decoration:none;color:var(--text);
    flex-shrink:0;
  }
  .mtopbar-action:hover{background:var(--surface-alt)}

  /* Hamburger knop */
  .hamburger{
    display:flex;flex-direction:column;justify-content:center;
    width:40px;height:40px;padding:0;
    background:transparent;border:none;cursor:pointer;
    border-radius:8px;gap:5px;align-items:center;
    flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
  }
  .hamburger:hover{background:var(--surface-alt)}
  .hamburger span{
    display:block;width:22px;height:2px;
    background:var(--text);border-radius:2px;
    transition:transform .25s ease,opacity .2s ease;
    transform-origin:center;
  }
  .hamburger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburger.is-active span:nth-child(2){opacity:0}
  .hamburger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Layout volledig 1 kolom + ruimte voor de fixed topbar */
  .app{
    grid-template-columns:1fr;
    padding-top:var(--topbar-h);
  }

  /* Sidebar als slide-in drawer */
  .sidebar{
    position:fixed;top:0;left:0;
    height:100dvh;width:82%;max-width:300px;
    padding:1rem .85rem max(1rem, env(safe-area-inset-bottom));
    transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    z-index:55;              /* onder topbar (60), boven overlay (50) */
    box-shadow:4px 0 16px rgba(0,0,0,.1);
    overflow-y:auto;
    flex-direction:column;
    border-right:1px solid var(--border);
  }
  .sidebar.is-open{transform:translateX(0)}

  .sidebar .brand{
    font-size:1.25rem;margin-bottom:.5rem;
    padding-bottom:.75rem;border-bottom:1px solid var(--border);
  }
  .sidebar nav{
    flex-direction:column;gap:2px;
    margin-top:.75rem;flex:1;overflow-y:auto;
  }
  .sidebar nav a{
    padding:.85rem 1rem;font-size:.95rem;
    min-height:46px;border-radius:10px;
  }
  .sidebar-foot{display:flex}

  /* Overlay */
  .side-overlay{
    display:block;position:fixed;inset:0;
    background:rgba(15,23,42,.45);
    opacity:0;pointer-events:none;
    transition:opacity .2s ease;
    z-index:50;
  }
  .side-overlay.is-visible{
    opacity:1;
    pointer-events:auto;
  }

  /* Voorkomt scroll van pagina als menu open is */
  body.menu-open{overflow:hidden}

  /* Content */
  .content{padding:1rem}
  .form .row,.modal .row,.row{grid-template-columns:1fr}
  .grid.grid-2{grid-template-columns:1fr}

  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .tab{white-space:nowrap}
}

/* ============================================================
   Responsive — mobile (≤768px)
   ============================================================ */
@media (max-width:768px){
  body{font-size:15px}

  .content{padding:.85rem .85rem max(2rem, env(safe-area-inset-bottom))}
  .card{padding:1rem;margin-bottom:.75rem;border-radius:10px}

  h1{font-size:1.35rem}
  h2{font-size:1.1rem}
  h3{font-size:1rem}

  .btn,.btn-primary{padding:.7rem 1rem;font-size:.92rem;min-height:44px}
  .btn-mini{padding:.5rem .75rem;font-size:.8rem;min-height:38px}

  .form input,.form select,.form textarea,
  .modal input,.modal select,.modal textarea,
  .agenda-nav input[type=date]{
    padding:.7rem .75rem;font-size:16px;
  }
  .form label{font-size:.88rem}

  .stat b{font-size:1.25rem}
  .stat span{font-size:.75rem}

  .toolbar{gap:.6rem;align-items:stretch}
  .toolbar-right{width:100%;display:flex;flex-direction:column;gap:.4rem}
  .toolbar-right .btn,
  .toolbar-right .btn-primary{width:100%;justify-content:center}

  .agenda-nav{width:100%;flex-wrap:nowrap}
  .agenda-nav input[type=date]{flex:1;min-width:0}

  /* Modal als bottom-sheet */
  .modal{
    padding:1.1rem 1rem 1.25rem;max-width:100%;width:100%;
    border-radius:14px 14px 0 0;
    margin:0;position:fixed;left:0;right:0;bottom:0;top:auto;
    max-height:92vh;overflow-y:auto;
  }
  .modal menu{flex-direction:column-reverse;gap:.5rem;margin-top:1rem}
  .modal menu button{width:100%;padding:.85rem;min-height:46px;font-size:1rem}

  .actions{gap:.4rem}
  .review-item{padding:1rem 0}
  .tbl th,.tbl td{padding:.55rem .5rem;font-size:.82rem}

  .plan-card{padding:1rem}
  .plan-card .price{font-size:1.2rem}
}

/* ============================================================
   Responsive — kleine telefoons (≤600px)
   ============================================================ */
@media (max-width:600px){
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar > div{display:flex;flex-wrap:wrap;gap:.4rem}
  .legend{font-size:.8rem;gap:.6rem}
}

/* ============================================================
   Responsive — extra klein (≤480px)
   ============================================================ */
@media (max-width:480px){
  .grid.stats,.grid.cards-3{grid-template-columns:1fr 1fr;gap:.6rem}
  .grid.stats .stat,.grid.cards-3 .card{padding:.85rem}
  .stat b{font-size:1.15rem}

  .tbl th,.tbl td{padding:.5rem .4rem;font-size:.78rem}

  .modal h3{font-size:1rem}
  .modal label{font-size:.85rem}

  .auth-box{margin:1rem;padding:1.25rem;max-width:none}

  .btn-mini.danger{min-width:38px;justify-content:center}
  .row,.form .row,.modal .row{grid-template-columns:1fr !important}

  #pwa-install-banner,#pwa-ios-banner{
    bottom:max(12px, env(safe-area-inset-bottom));
  }
}

/* ============================================================
   Landing & auth
   ============================================================ */
.landing .topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 2rem;background:#fff;border-bottom:1px solid var(--border)
}
.landing .topbar nav{display:flex;gap:1rem;align-items:center}
.landing .hero{
  padding:4rem 2rem;text-align:center;max-width:780px;margin:0 auto;
}
.landing .hero h1{font-size:2.2rem;margin-bottom:1rem}
.landing .features{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;padding:2rem;max-width:1100px;margin:0 auto;
}
.landing footer{text-align:center;padding:2rem;color:var(--muted)}

.auth{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:1rem;background:var(--bg);
}
.auth-box{
  background:#fff;padding:2rem;border-radius:var(--radius);
  border:1px solid var(--border);box-shadow:var(--shadow);
  max-width:420px;width:100%;
}
.auth-box h1{font-size:1.5rem;margin-bottom:1rem}
.auth-box label{display:block;margin:.75rem 0;font-size:.9rem;font-weight:500}
.auth-box input{
  width:100%;padding:.65rem .75rem;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);font-size:1rem;margin-top:.25rem;font-family:inherit;
}
.auth-box button{width:100%;margin-top:.5rem;padding:.75rem;font-size:1rem}

@media (max-width:480px){
  .landing .topbar{padding:.75rem 1rem;flex-wrap:wrap;gap:.5rem}
  .landing .hero{padding:2rem 1rem}
  .landing .hero h1{font-size:1.5rem}
  .landing .features{padding:1rem}
}

/* ============================================================
   Public booking page
   ============================================================ */
.public{background:var(--bg)}
.pub-hero{
  background:#fff;padding:2rem;text-align:center;
  border-bottom:1px solid var(--border);
}
.pub-widget{max-width:780px;margin:1rem auto;padding:0 1rem}

/* ============================================================
   Logboek (personeel)
   ============================================================ */
.log-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:.6rem;margin-bottom:1rem;
}
.log-stat{
  padding:.85rem 1rem;border-radius:10px;
  border:1px solid var(--border);background:#fff;
  display:flex;align-items:center;gap:.65rem;
}
.log-stat .ico{font-size:1.4rem;line-height:1}
.log-stat .v{font-weight:700;font-size:1.3rem;line-height:1.1}
.log-stat .l{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
.log-stat.warn{border-color:#fde68a;background:#fffbeb}
.log-stat.err {border-color:#fecaca;background:#fef2f2}

.log-list{list-style:none;padding:0;margin:0}
.log-item{
  display:flex;gap:.85rem;padding:.85rem 0;
  border-bottom:1px solid var(--border);
}
.log-item:last-child{border-bottom:0}
.log-badge{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  background:#f1f5f9;
}
.log-late      .log-badge{background:#fef3c7}
.log-sick      .log-badge{background:#fee2e2}
.log-complaint .log-badge{background:#fed7aa}
.log-absence   .log-badge{background:#e0e7ff}
.log-positive  .log-badge{background:#dcfce7}
.log-body{flex:1;min-width:0}
.log-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin-bottom:.15rem}
.log-type{font-weight:600;font-size:.85rem}
.log-meta{color:var(--muted);font-size:.78rem}
.log-desc{
  color:var(--text);font-size:.92rem;line-height:1.4;
  white-space:pre-wrap;word-break:break-word;
}
.log-actions form{margin:0}

@media (max-width:600px){
  .log-stats{grid-template-columns:repeat(2,1fr)}
  .log-stat .v{font-size:1.1rem}
}

/* ============================================================
   Misc helpers
   ============================================================ */
.feed{list-style:none;padding:0;margin:0}
.feed li{padding:.4rem 0;border-bottom:1px solid var(--border);font-size:.88rem}
.feed li:last-child{border:0}

.ok{color:var(--ok)}