/* ══════════════════════════════════════════════════════════════
   Man & Mach — Planning v2
   Brand-aesthetic CSS (rood #b3174a + groen #1d3d2a).
   Bevat: CSS-variabelen (light/dark), brand-classes én
   de utility-subset die alle bestaande templates gebruiken.
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── BRAND TOKENS ─────────────────────────────────────────── */
:root{
  /* brand */
  --red:     #b3174a;
  --red-d:   #8e1139;
  --red-l:   #f9e8ee;
  --red-b:   #e9b0c2;
  --green:   #1d3d2a;
  --green-d: #122619;
  --green-l: #e8f0eb;
  --green-b: #a8c4b0;

  /* surfaces (light) */
  --bg:       #f5f5f2;
  --surface:  #ffffff;
  --card:     #ffffff;
  --border:   #e3e3df;
  --border2:  #ccccc8;
  --text:     #141412;
  --text2:    #3a3a36;
  --muted:    #666663; /* 5,8:1 contrast op wit (was #828280, 3,9:1) */
  --light:    #ededea;

  /* semantic */
  --ok:       #1a7a4a;   --ok-l:  #eaf6ef;   --ok-b:  #a8d8bc;
  --warn:     #b45309;   --warn-l:#fffbeb;   --warn-b:#fde68a;
  --err:      #c0392b;   --err-l: #fdf0ee;   --err-b: #f5b8b0;
  --info:     #1d6fb5;   --info-l:#eef4fd;   --info-b:#b8d2f2;

  --r:   6px;
  --r-sm:4px;
  --r-lg:10px;
  --sh:  0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.03);
  --sh2: 0 4px 16px rgba(0,0,0,.08);

  /* Aliases voor templates (naam-consistentie) */
  --brand-red: var(--red);
  --surface-2: var(--light);

  /* Werk-type kleuren (gedempt, print-vriendelijk, getest in grayscale)
     Onderzoek: Float/Resource Guru raden gedempte verzadiging aan
     omdat fluor-kleuren slecht printen en op scherm vermoeien. */
  --type-cont:    #B91C1C;   --type-cont-bg:    #FEF2F2;
  --type-deco:    #B45309;   --type-deco-bg:    #FFFBEB;
  --type-rk1:     #1E40AF;   --type-rk1-bg:     #EFF6FF;
  --type-mini:    #6D28D9;   --type-mini-bg:    #F5F3FF;
  --type-keuring: #0E7490;   --type-keuring-bg: #ECFEFF;
  --type-kantoor: #475569;   --type-kantoor-bg: #F1F5F9;

  /* Aliases voor backwards compat met huidige risk_class waarden */
  --risk-3:  var(--type-cont);
  --risk-2a: var(--type-deco);
  --risk-2:  var(--type-rk1);
  --risk-1:  var(--type-kantoor);
  --risk-0:  var(--type-keuring);

  /* Diagonale strepen-pattern voor feestdagen (Float-stijl) */
  --pattern-holiday: repeating-linear-gradient(
      45deg,
      rgba(234,88,12,.08) 0,
      rgba(234,88,12,.08) 6px,
      rgba(234,88,12,.18) 6px,
      rgba(234,88,12,.18) 12px
  );
  --pattern-leave: repeating-linear-gradient(
      45deg,
      rgba(148,163,184,.10) 0,
      rgba(148,163,184,.10) 6px,
      rgba(148,163,184,.22) 6px,
      rgba(148,163,184,.22) 12px
  );
}

/* ─── DARK MODE ─────────────────────────────────────────────── */
html[data-theme="dark"]{
  --bg:       #111411;
  --surface:  #1a1e1b;
  --card:     #1f2420;
  --border:   #2c3a2e;
  --border2:  #3d5040;
  --text:     #f5f5f2;
  --text2:    #e8f0ea;
  --muted:    #c0d0c4;
  --light:    #222d24;

  /* Werk-type backgrounds in dark mode — semi-transparant */
  --type-cont-bg:    rgba(185,28,28,.14);
  --type-deco-bg:    rgba(180,83,9,.14);
  --type-rk1-bg:     rgba(30,64,175,.16);
  --type-mini-bg:    rgba(109,40,217,.16);
  --type-keuring-bg: rgba(14,116,144,.16);
  --type-kantoor-bg: rgba(71,85,105,.20);

  --red-l:    rgba(179,23,74,.18);
  --red-b:    rgba(179,23,74,.40);
  --green-l:  rgba(29,61,42,.28);
  --green-b:  rgba(168,196,176,.40);

  --ok:       #7eb88a;   --ok-l: rgba(29,122,74,.18);   --ok-b: rgba(126,184,138,.40);
  --warn:     #fbbf24;   --warn-l:rgba(245,158,11,.14); --warn-b:rgba(251,191,36,.40);
  --err:      #f08080;   --err-l: rgba(192,57,43,.18);  --err-b: rgba(240,128,128,.40);
  --info:     #7ab3f0;   --info-l:rgba(29,111,181,.18); --info-b:rgba(122,179,240,.40);

  --sh:  0 2px 8px rgba(0,0,0,.40), 0 4px 20px rgba(0,0,0,.30);
  --sh2: 0 8px 40px rgba(0,0,0,.50);
  color-scheme: dark;
}

/* ─── RESET ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid var(--border)}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  font-feature-settings:"cv11","ss01";
  transition: background .25s, color .25s;
}
.tabnum{font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font:inherit;color:inherit;background:transparent}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--red);color:#fff}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* ══════════════════════════════════════════════════════════════
   TOPBAR + SIDEBAR LAYOUT
   ══════════════════════════════════════════════════════════════ */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--surface); border-bottom:1px solid var(--border);
  height:56px; padding:0 18px;
  display:flex; align-items:center; gap:14px;
  transition: background .25s, border-color .25s;
}

/* split M&M logo */
.logo-mark{display:inline-flex;gap:3px;flex-shrink:0}
.logo-mark .lm-r,.logo-mark .lm-g{
  width:26px;height:26px;display:grid;place-items:center;
  font-family:inherit;font-weight:800;color:#fff;font-size:.82rem;letter-spacing:-.02em;
}
.logo-mark .lm-r{background:var(--red);border-radius:5px 0 0 5px}
.logo-mark .lm-g{background:var(--green);border-radius:0 5px 5px 0}
.logo-mark.big .lm-r,.logo-mark.big .lm-g{width:48px;height:48px;font-size:1.35rem;border-radius:9px 0 0 9px}
.logo-mark.big .lm-g{border-radius:0 9px 9px 0}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-brand{font-size:.86rem;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.logo-sub{font-size:.63rem;color:var(--green);font-weight:600;letter-spacing:.02em;margin-top:2px}
html[data-theme="dark"] .logo-sub{color:var(--green-b)}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}

.user-chip{
  font-size:.76rem;font-weight:600;
  background:var(--red-l);border:1px solid var(--red-b);color:var(--red);
  border-radius:999px;padding:4px 12px;white-space:nowrap;
}
.week-chip{
  font-size:.7rem;font-weight:700;letter-spacing:.04em;
  background:var(--green-l);border:1px solid var(--green-b);color:var(--green);
  border-radius:999px;padding:3px 11px;text-transform:uppercase;
}
html[data-theme="dark"] .week-chip{color:var(--green-b)}

.icon-btn{
  width:36px;height:36px;border-radius:10px;
  background:var(--light);border:1px solid var(--border);
  display:inline-grid;place-items:center;color:var(--text2);
  transition:background .15s, border-color .15s, transform .1s;
}
.icon-btn:hover{background:var(--border);color:var(--text)}
.icon-btn:active{transform:scale(.96)}
.icon-btn svg{width:16px;height:16px}
.icon-btn.active{background:var(--red-l);border-color:var(--red-b);color:var(--red)}

html:not([data-theme="dark"]) .icon-btn .icon-sun{display:none}
html[data-theme="dark"] .icon-btn .icon-moon{display:none}

.btn-logout{
  background:transparent;border:1px solid var(--border);
  color:var(--text2);font-size:.78rem;font-weight:600;
  padding:7px 13px;border-radius:9px;
  transition:background .15s,border-color .15s,color .15s;
}
.btn-logout:hover{background:var(--red-l);border-color:var(--red-b);color:var(--red)}

/* ── Layout shell ───────────────────────────────────────────── */
.shell{display:flex;min-height:calc(100vh - 56px)}
.sidebar{
  width:220px;flex-shrink:0;
  background:var(--surface);border-right:1px solid var(--border);
  padding:16px 10px;
  display:flex;flex-direction:column;gap:2px;
  transition:background .25s,border-color .25s;
}
.sidebar-heading{
  font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);padding:10px 12px 6px;
}
.nav-btn{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:10px;
  font-size:.86rem;font-weight:500;color:var(--muted);
  width:100%;text-align:left;
  transition:background .12s,color .12s,padding .12s;
}
.nav-btn:hover{background:var(--light);color:var(--text)}
.nav-btn.active{
  background:var(--red-l);color:var(--red);font-weight:700;
  border-left:3px solid var(--red);padding-left:9px;
}
.nav-icon{width:20px;height:20px;flex-shrink:0;display:inline-grid;place-items:center}
.nav-icon svg{width:17px;height:17px}

.content{flex:1;min-width:0;padding:26px 28px;overflow-x:auto}

/* mobiele nav drawer */
.nav-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.nav-backdrop.open{opacity:1;pointer-events:auto}

@media (max-width: 900px){
  .sidebar{
    position:fixed; top:56px; left:0; bottom:0; z-index:70;
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:var(--sh2);
  }
  .sidebar.open{transform:translateX(0)}
  .content{padding:18px 14px}
}

/* ══════════════════════════════════════════════════════════════
   PANEL TITLES, CARDS, BUTTONS
   ══════════════════════════════════════════════════════════════ */
.panel-title{font-size:1.45rem;font-weight:700;letter-spacing:-.03em;margin-bottom:4px;color:var(--text)}
.panel-sub{font-size:.86rem;color:var(--muted);margin-bottom:22px}
.section-head{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);margin-bottom:10px;padding-bottom:8px;
  border-bottom:1px solid var(--border);font-weight:700;
}
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:16px;
  transition:background .25s,border-color .15s,box-shadow .15s;
}
.card:hover{box-shadow:var(--sh)}
.card-lg{padding:22px}
.card-tight{padding:12px}
.card.clickable{cursor:pointer}
.card.clickable:hover{border-color:var(--red)}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:9px;
  font-size:.84rem;font-weight:600;
  border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s,transform .1s;
  white-space:nowrap;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-d);border-color:var(--red-d)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--red);color:var(--red)}
.btn-danger{background:var(--err-l);color:var(--err);border-color:var(--err-b)}
.btn-danger:hover{background:var(--err);color:#fff}
.btn-sm{padding:6px 11px;font-size:.78rem;border-radius:7px}

.pill{
  display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 8px;border-radius:6px;
  border:1px solid transparent;
}
.pill-red{background:var(--red-l);color:var(--red);border-color:var(--red-b)}
.pill-green{background:var(--green-l);color:var(--green);border-color:var(--green-b)}
.pill-info{background:var(--info-l);color:var(--info);border-color:var(--info-b)}
.pill-warn{background:var(--warn-l);color:var(--warn);border-color:var(--warn-b)}
.pill-err{background:var(--err-l);color:var(--err);border-color:var(--err-b)}
.pill-muted{background:var(--light);color:var(--muted);border-color:var(--border2)}

/* tabellen */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.84rem}
thead th{
  text-align:left;padding:10px 14px;font-weight:800;
  font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  background:var(--bg);border-bottom:2px solid var(--border);position:sticky;top:0;
}
tbody td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:hover td{background:rgba(179,23,74,.05)}
tbody tr:last-child td{border-bottom:none}
.table-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}

/* flash */
.flash-ok,.flash-err,.flash-info{
  margin-bottom:14px;padding:11px 15px;border-radius:10px;
  font-size:.86rem;border:1px solid transparent;
}
.flash-ok{background:var(--ok-l);color:var(--ok);border-color:var(--ok-b)}
.flash-err{background:var(--err-l);color:var(--err);border-color:var(--err-b)}
.flash-info{background:var(--info-l);color:var(--info);border-color:var(--info-b)}

/* ══════════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════════ */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field>label,label.field-label{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],
input[type=search],input[type=number],input[type=tel],input[type=url],select,textarea{
  width:100%;padding:10px 13px;
  background:var(--surface);color:var(--text);
  border:1.5px solid var(--border);border-radius:9px;
  font-family:inherit;font-size:.9rem;
  outline:none;transition:border-color .15s,box-shadow .15s,background .25s;
}
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=time],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] input[type=url],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background:var(--card)}
input:focus,select:focus,textarea:focus{
  border-color:var(--red); box-shadow:0 0 0 3px rgba(179,23,74,.15);
}
::placeholder{color:var(--muted);opacity:.7}

/* ══════════════════════════════════════════════════════════════
   LOGIN
   ══════════════════════════════════════════════════════════════ */
.login-page{
  min-height:100vh;background:var(--bg);color:var(--text);
  display:flex;align-items:center;justify-content:center;padding:20px;
  position:relative;
}
html[data-theme="dark"] .login-page{
  background:linear-gradient(180deg,#0d100d 0%, #141714 100%);
}
.login-wrap{width:100%;max-width:400px}
.login-header{text-align:center;margin-bottom:26px}
.login-brand{
  font-size:1.35rem;font-weight:800;letter-spacing:-.03em;margin-top:14px;
  color:var(--red);
}
.login-brand span{color:var(--green)}
html[data-theme="dark"] .login-brand span{color:var(--green-b)}
.login-tagline{font-size:.8rem;color:var(--muted);margin-top:3px}

.login-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:28px 30px 26px;box-shadow:var(--sh2);
}
.login-card h2{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.login-card .login-sub{font-size:.82rem;color:var(--muted);margin-bottom:20px}

.btn-login{
  width:100%;padding:12px;border:none;border-radius:10px;
  background:var(--red);color:#fff;
  font-family:inherit;font-size:.92rem;font-weight:700;
  cursor:pointer;margin-top:8px;
  transition:background .15s,transform .1s;
}
.btn-login:hover{background:var(--red-d)}
.btn-login:active{transform:scale(.98)}

.login-hint{
  margin-top:16px;padding:12px 14px;border-radius:10px;
  background:var(--green-l);border:1px solid var(--green-b);
  color:var(--green);font-size:.76rem;line-height:1.6;
}
html[data-theme="dark"] .login-hint{color:var(--green-b)}
.login-hint strong{font-weight:700}

/* ══════════════════════════════════════════════════════════════
   UTILITY-SUBSET (Tailwind-achtig) — nodig voor bestaande views
   ══════════════════════════════════════════════════════════════ */

/* sizing */
.h-full{height:100%}.min-h-full{min-height:100%}.min-h-\[6rem\]{min-height:6rem}
.max-w-7xl{max-width:80rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-lg{max-width:32rem}.max-w-\[40rem\]{max-width:40rem}
.w-full{width:100%}.w-10{width:2.5rem}.w-8{width:2rem}.w-2{width:.5rem}
.h-10{height:2.5rem}.h-8{height:2rem}.h-14{height:3.5rem}
.mx-auto{margin-left:auto;margin-right:auto}.ml-auto{margin-left:auto}.ml-2{margin-left:.5rem}.mr-1{margin-right:.25rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-6{margin-top:1.5rem}.mt-12{margin-top:3rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-0{padding:0}
.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.px-1\.5{padding-left:.375rem;padding-right:.375rem}.pt-2{padding-top:.5rem}

/* display/flex/grid */
.flex{display:flex}.inline-flex{display:inline-flex}.inline-block{display:inline-block}
.block{display:block}.grid{display:grid}.hidden{display:none}.inline{display:inline}
.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}
.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}
.grid>*{min-width:0}.grid.place-items-center{place-items:center}
.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}
.whitespace-nowrap{white-space:nowrap}

/* rounds, borders, rings, shadows */
.rounded{border-radius:.375rem}.rounded-md{border-radius:.5rem}.rounded-lg{border-radius:.625rem}.rounded-xl{border-radius:.875rem}.rounded-full{border-radius:9999px}
.border{border-width:1px;border-style:solid}.border-b{border-bottom-width:1px;border-bottom-style:solid}.border-t{border-top-width:1px;border-top-style:solid}
.border-slate-100{border-color:var(--border)}.border-slate-200{border-color:var(--border)}
.border-slate-300{border-color:var(--border2)}.border-slate-400{border-color:var(--muted)}
.border-sky-400{border-color:var(--info)}
.border-emerald-200{border-color:var(--ok-b)}.border-emerald-300{border-color:var(--ok-b)}
.border-rose-200{border-color:var(--err-b)}.border-rose-300{border-color:var(--err-b)}
.border-amber-200{border-color:var(--warn-b)}.border-amber-300{border-color:var(--warn-b)}
.border-orange-300{border-color:var(--warn-b)}
.divide-y>*+*{border-top-width:1px;border-top-style:solid}
.divide-slate-100>*+*{border-color:var(--border)}
.ring-2{box-shadow:0 0 0 3px rgba(179,23,74,.15)}
.shadow{box-shadow:var(--sh)}.shadow-xl{box-shadow:var(--sh2)}
.hover\:shadow:hover{box-shadow:var(--sh)}

/* text + font */
.text-xs{font-size:.72rem;line-height:1rem}.text-\[11px\]{font-size:11px}
.text-sm{font-size:.82rem;line-height:1.25rem}.text-lg{font-size:1.08rem;line-height:1.6rem}
.text-2xl{font-size:1.4rem;line-height:1.8rem}.text-3xl{font-size:1.75rem;line-height:2.1rem}
.text-6xl{font-size:3.5rem;line-height:1}
.font-mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}
.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}
.leading-tight{line-height:1.25}.antialiased{-webkit-font-smoothing:antialiased}

/* text kleuren (via brand tokens) */
.text-white{color:#fff}
.text-slate-100{color:#f1f5f9}.text-slate-300{color:var(--muted)}
.text-slate-400{color:var(--muted)}.text-slate-500{color:var(--muted)}
.text-slate-600{color:var(--text2)}.text-slate-700{color:var(--text2)}.text-slate-900{color:var(--text)}
.text-emerald-700{color:var(--ok)}.text-emerald-800{color:var(--ok)}
.text-rose-600{color:var(--err)}.text-rose-700{color:var(--err)}.text-rose-800{color:var(--err)}
.text-amber-600{color:var(--warn)}.text-amber-700{color:var(--warn)}
.text-sky-700{color:var(--info)}.text-indigo-700{color:#4338ca}
.text-orange-700{color:var(--warn)}
html[data-theme="dark"] .text-indigo-700{color:#a5b4fc}

/* backgrounds (via brand tokens) */
.bg-white{background:var(--surface)}
.bg-slate-50{background:var(--bg)}
.bg-slate-100{background:var(--light)}
.bg-slate-700{background:#334155}
.bg-slate-800{background:#1e293b}
.bg-slate-900{background:#0f172a}

.bg-emerald-50{background:var(--ok-l)}.bg-emerald-100{background:var(--ok-l)}.bg-emerald-200{background:var(--ok-l)}
.bg-emerald-400{background:#34d399}.bg-emerald-600{background:var(--ok)}.bg-emerald-700{background:var(--ok)}
.bg-rose-50{background:var(--err-l)}.bg-rose-100{background:var(--err-l)}.bg-rose-500{background:var(--err)}
.bg-rose-600{background:var(--err)}.bg-rose-700{background:var(--err)}
.bg-amber-50{background:var(--warn-l)}.bg-amber-100{background:var(--warn-l)}.bg-amber-500{background:var(--warn)}
.bg-orange-100{background:var(--warn-l)}.bg-orange-400{background:#fb923c}
.bg-sky-50{background:var(--info-l)}.bg-sky-100{background:var(--info-l)}
.bg-indigo-50{background:rgba(99,102,241,.10)}

.hover\:bg-slate-50:hover{background:var(--light)}
.hover\:bg-slate-700:hover{background:#334155}
.hover\:bg-slate-800:hover{background:#1e293b}
.hover\:bg-emerald-700:hover{background:var(--ok)}
.hover\:bg-rose-700:hover{background:var(--err)}

.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--g1,var(--red)),var(--g2,var(--red-d)),var(--g3,var(--green-d)))}
.from-slate-900{--g1:#0f172a}.via-slate-800{--g2:#1e293b}.to-slate-700{--g3:#334155}

/* misc */
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}
.transition{transition:box-shadow .15s, background-color .15s, color .15s, border-color .15s}
.grid-cols-subgrid{grid-template-columns:subgrid}
.hover\:underline:hover{text-decoration:underline}
.hover\:text-slate-900:hover{color:var(--text)}
.min-w-\[12rem\]{min-width:12rem}

/* focus for tailwind focus-rings */
input.focus\:border-slate-900:focus{border-color:var(--red)}
input.focus\:ring-slate-900:focus{box-shadow:0 0 0 3px rgba(179,23,74,.15)}

/* dialog */
dialog{border:0;padding:0;background:var(--surface);color:var(--text);border-radius:var(--r-lg);max-width:90vw;box-shadow:var(--sh2)}
dialog::backdrop{background:rgba(0,0,0,.55)}

/* ══════════════════════════════════════════════════════════════
   PAGE HEADER  — gebruikt door alle pagina's voor consistentie
   ══════════════════════════════════════════════════════════════ */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{font-size:1.45rem;font-weight:700;letter-spacing:-.02em;color:var(--text);line-height:1.2}
.page-head .sub{font-size:.84rem;color:var(--muted);margin-top:2px}
.page-head .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.crumb{display:inline-block;font-size:.74rem;color:var(--muted);margin-bottom:6px}
.crumb:hover{color:var(--red)}

/* Subtiele meta-stripe onder een card-head */
.section-meta{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}

/* ══════════════════════════════════════════════════════════════
   PLANNING-MATRIX — DTA × dag (Float/Resource Guru-stijl)
   ══════════════════════════════════════════════════════════════ */

/* Legenda balk bovenin */
.legend{
    display:flex;flex-wrap:wrap;gap:14px;align-items:center;
    padding:10px 14px;margin-bottom:14px;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
    font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;
}
.legend-item{display:inline-flex;align-items:center;gap:6px;color:var(--text2);font-weight:500}
.legend-swatch{width:11px;height:11px;border-radius:2px;flex-shrink:0}
.legend-swatch.holiday{background:var(--pattern-holiday);border:1px solid rgba(234,88,12,.3)}
.legend-swatch.leave  {background:var(--pattern-leave);border:1px solid rgba(148,163,184,.4)}

/* Density toggle */
.density-toggle{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.density-toggle a{padding:6px 12px;font-size:.72rem;font-weight:600;color:var(--muted);text-decoration:none;border-right:1px solid var(--border)}
.density-toggle a:last-child{border-right:none}
.density-toggle a.on{background:var(--text);color:var(--surface)}
.density-toggle a:not(.on):hover{background:var(--light);color:var(--text)}

/* De matrix zelf */
.matrix-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow-x:auto;overflow-y:visible}
.matrix{width:100%;border-collapse:separate;border-spacing:0;font-size:.82rem;font-variant-numeric:tabular-nums}
.matrix thead th{
    text-align:left;padding:9px 12px;font-weight:600;
    font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
    background:var(--bg);border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:2;
}
.matrix thead th .day-num{color:var(--text);font-weight:500;text-transform:none;letter-spacing:0;margin-left:5px;font-size:.78rem}
.matrix thead th.today{color:var(--red);background:var(--red-l)}
.matrix thead th.today .day-num{color:var(--red)}
.matrix thead th.holiday-head{background:var(--pattern-holiday);color:#9a3412}
.matrix thead th.holiday-head .day-num{color:#9a3412}
.matrix thead th .holiday-name{display:block;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:none;color:#9a3412;margin-top:1px}

.matrix tbody td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:top;min-width:180px}
.matrix tbody td.today{background:rgba(179,23,74,.025)}
.matrix tbody td.holiday-cell{background:var(--pattern-holiday)}
.matrix tbody tr:last-child td{border-bottom:none}
.matrix tbody tr:hover td:not(.holiday-cell):not(.leave-cell){background:var(--light)}
.matrix tbody tr:hover td.today{background:rgba(179,23,74,.06)}

/* Sticky linker-kolom: naam + telefoon */
.matrix .name-col{
    background:var(--surface);position:sticky;left:0;z-index:3;
    min-width:185px;border-right:1px solid var(--border2);padding:8px 12px;
}
.matrix tbody tr:hover .name-col{background:var(--light)}
.matrix .name-col .name{color:var(--text);font-weight:600;text-decoration:none;display:block;font-size:.86rem;letter-spacing:-.01em}
.matrix .name-col .name:hover{color:var(--red)}
.matrix .name-col .phone{color:var(--muted);font-size:.7rem;margin-top:1px;font-variant-numeric:tabular-nums}
.matrix thead th.name-col{background:var(--bg)}

/* Empty cel */
.matrix .empty{color:var(--border2);text-align:left;padding:4px 2px;font-size:.86rem}

/* Hele-week verlof/ziek strook */
.matrix td.leave-cell{
    background:var(--pattern-leave);
    text-align:center;font-size:.74rem;font-weight:600;
    color:#475569;text-transform:uppercase;letter-spacing:.06em;
    vertical-align:middle;
}
html[data-theme="dark"] .matrix td.leave-cell{color:#cbd5e1}

/* Klus-tegel */
.tile{
    display:block;text-decoration:none;color:var(--text);
    background:var(--type-bg);border-left:3px solid var(--type);
    padding:5px 8px;border-radius:var(--r-sm);line-height:1.3;
    transition:background .1s;
}
.tile + .tile{margin-top:4px}
.tile:hover{filter:brightness(.97)}
.tile-type{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--type);margin-bottom:2px}
.tile-addr{font-weight:600;font-size:.78rem;color:var(--text);line-height:1.25}
.tile-city{color:var(--muted);font-size:.7rem;font-weight:400}
.tile-team{margin-top:3px;color:var(--text2);font-size:.7rem;line-height:1.3}
.tile-team span{white-space:nowrap}
.tile-team span:not(:last-child)::after{content:" · ";color:var(--border2);margin:0 2px}
.tile-bon{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:.62rem;margin-left:4px;font-variant-numeric:tabular-nums}

.tile.t-cont    { --type: var(--type-cont);    --type-bg: var(--type-cont-bg) }
.tile.t-deco    { --type: var(--type-deco);    --type-bg: var(--type-deco-bg) }
.tile.t-rk1     { --type: var(--type-rk1);     --type-bg: var(--type-rk1-bg) }
.tile.t-mini    { --type: var(--type-mini);    --type-bg: var(--type-mini-bg) }
.tile.t-keuring { --type: var(--type-keuring); --type-bg: var(--type-keuring-bg) }
.tile.t-kantoor { --type: var(--type-kantoor); --type-bg: var(--type-kantoor-bg) }
.tile.t-werk    { --type: var(--green);        --type-bg: var(--green-l) }

/* Density modes */
.density-compact .matrix tbody td{padding:3px 6px;min-width:160px}
.density-compact .matrix .tile{padding:3px 6px;font-size:.74rem}
.density-compact .matrix .tile-addr{font-size:.74rem}
.density-compact .matrix .tile-team{font-size:.66rem}
.density-compact .matrix .name-col{padding:5px 10px}
.density-compact .matrix .name-col .name{font-size:.78rem}

.density-spacious .matrix tbody td{padding:10px 12px;min-width:210px}
.density-spacious .matrix .tile{padding:8px 12px}

/* Capaciteit-strook onder de matrix */
.cap-row{display:grid;grid-template-columns:185px repeat(5, minmax(180px,1fr));gap:0;font-size:.7rem;
         background:var(--bg);border:1px solid var(--border);border-top:none;
         border-radius:0 0 var(--r) var(--r);overflow:hidden}
.cap-row .cap{padding:6px 10px;border-right:1px solid var(--border);color:var(--muted);font-variant-numeric:tabular-nums}
.cap-row .cap:last-child{border-right:none}
.cap-row .cap strong{color:var(--text);font-weight:600}

/* Verlof/ziek-chip — losse chip voor non-week leaves */
.leave-chip{display:inline-block;padding:2px 7px;border-radius:var(--r-sm);font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.leave-chip.verlof{background:rgba(22,163,74,.12);color:#15803d}
.leave-chip.ziek  {background:rgba(220,38,38,.12);color:#b91c1c}
.leave-chip.nb    {background:var(--light);color:var(--muted)}
html[data-theme="dark"] .leave-chip.verlof{background:rgba(34,197,94,.16);color:#4ade80}
html[data-theme="dark"] .leave-chip.ziek  {background:rgba(248,113,113,.16);color:#f87171}

/* ══════════════════════════════════════════════════════════════
   GENERIEKE PAGINA-COMPONENTEN
   Volgens onderzoek (B2B SaaS dashboard 2026):
   - KPI cards in F-pattern row, max 4-5
   - Filter-bar consistent boven tabellen
   - Status-table met sortable columns
   - Empty states helpful, niet alleen "geen data"
   ══════════════════════════════════════════════════════════════ */

/* KPI-grid: 4-koloms statistiek-row bovenaan dashboards */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:22px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;
     display:flex;flex-direction:column;gap:4px;transition:border-color .12s}
.kpi:hover{border-color:var(--border2)}
.kpi-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--muted)}
.kpi-value{font-size:1.6rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.kpi-trend{font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
.kpi-trend.up{color:#15803d}
.kpi-trend.down{color:#b91c1c}
.kpi a{color:inherit;text-decoration:none;display:block}

/* Filter-bar: zoeken + select + button row boven lijsten */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.filter-bar input[type=search],.filter-bar input[type=text],.filter-bar select{
    margin:0;padding:7px 11px;font-size:.82rem;
    border:1px solid var(--border);border-radius:var(--r-sm);
    background:var(--surface);color:var(--text);
}
.filter-bar input[type=search]{flex:1;min-width:200px;max-width:340px}
.filter-bar select{max-width:200px}
.filter-bar .check-inline{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}

/* Directory-card grid — voor /collega's, /klanten cards */
.directory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.directory-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
    padding:14px 16px;text-decoration:none;color:var(--text);
    transition:border-color .12s,box-shadow .12s;
    display:flex;flex-direction:column;gap:6px;
}
.directory-card:hover{border-color:var(--red);box-shadow:var(--sh)}
.directory-card .name{font-weight:600;font-size:.96rem;color:var(--text);letter-spacing:-.01em}
.directory-card .sub{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.directory-card .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;font-size:.72rem}
.directory-card .meta a{color:var(--red);text-decoration:none}
.directory-card .badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}

/* Data-table card-stijl — gebruikt voor /medewerkers, /verlof */
.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.84rem;
            background:var(--surface);font-variant-numeric:tabular-nums}
.data-table thead th{
    text-align:left;padding:10px 14px;font-weight:600;font-size:.66rem;
    letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
    background:var(--bg);border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:1;
}
.data-table tbody td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)}
.data-table tbody tr:hover td{background:var(--light)}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody td a{color:var(--text);font-weight:500;text-decoration:none}
.data-table tbody td a:hover{color:var(--red)}
.data-table .num{font-variant-numeric:tabular-nums;text-align:right}
.data-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow-x:auto}

/* Empty state — informatief, niet alleen "geen data" */
.empty-state{
    padding:48px 24px;text-align:center;color:var(--muted);
    background:var(--surface);border:1px dashed var(--border);border-radius:var(--r);
}
.empty-state h3{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:6px}
.empty-state p{font-size:.86rem;line-height:1.5;max-width:420px;margin:0 auto 14px}
.empty-state .btn{margin:0 auto}

/* Status-pill — generiek, voor leave/job/project status */
.status-pill{display:inline-block;padding:2px 8px;border-radius:var(--r-sm);
             font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.status-pill.ok{background:rgba(22,163,74,.12);color:#15803d}
.status-pill.warn{background:rgba(202,138,4,.16);color:#a16207}
.status-pill.err{background:rgba(220,38,38,.12);color:#b91c1c}
.status-pill.info{background:rgba(30,64,175,.12);color:#1e40af}
.status-pill.muted{background:var(--light);color:var(--muted)}
html[data-theme="dark"] .status-pill.ok{background:rgba(34,197,94,.16);color:#4ade80}
html[data-theme="dark"] .status-pill.warn{background:rgba(251,191,36,.18);color:#fbbf24}
html[data-theme="dark"] .status-pill.err{background:rgba(248,113,113,.16);color:#f87171}
html[data-theme="dark"] .status-pill.info{background:rgba(122,179,240,.18);color:#7ab3f0}

/* Activity-feed — kleine bullets onder een sectie-heading */
.activity-list{list-style:none;padding:0;margin:0}
.activity-list li{padding:10px 16px;border-bottom:1px solid var(--border);
                  display:flex;align-items:center;gap:12px;font-size:.84rem;color:var(--text)}
.activity-list li:last-child{border-bottom:none}
.activity-list li:hover{background:var(--light)}
.activity-list li a{color:var(--text);text-decoration:none;flex:1;font-weight:500}
.activity-list li a:hover{color:var(--red)}
.activity-list .meta{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Section met card-header */
.section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.section-hd{padding:11px 16px;border-bottom:1px solid var(--border);background:var(--bg);
            display:flex;justify-content:space-between;align-items:center;gap:12px}
.section-hd h2{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text2);margin:0}
.section-hd .more{font-size:.72rem;color:var(--muted);text-decoration:none}
.section-hd .more:hover{color:var(--red)}

/* ══════════════════════════════════════════════════════════════
   PROJECT- en LOCATIE-LIJSTEN  (gebruikt op /projecten en /projecten/{id})
   ══════════════════════════════════════════════════════════════ */
.proj-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .12s}
.proj-card:hover{border-color:var(--red)}
.proj-card .head{
    display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
    padding:14px 18px;background:var(--bg);border-bottom:1px solid var(--border);
}
.proj-card .head .name{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.proj-card .head .bar{width:4px;height:30px;border-radius:2px;flex-shrink:0;background:var(--risk)}
.proj-card .head .title{font-weight:600;font-size:1rem;color:var(--text);text-decoration:none}
.proj-card .head .title:hover{color:var(--red)}
.proj-card .head .meta{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.proj-card .head .stats{font-size:.78rem;color:var(--muted);white-space:nowrap}
.proj-card .head .stats strong{color:var(--text);font-weight:600}

.proj-card.risk-3  { --risk: var(--risk-3) }
.proj-card.risk-2a { --risk: var(--risk-2a) }
.proj-card.risk-2  { --risk: var(--risk-2) }
.proj-card.risk-1  { --risk: var(--risk-1) }
.proj-card.risk-0  { --risk: var(--risk-0) }

.loc-row{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:10px 18px;border-bottom:1px solid var(--border);font-size:.84rem;
    color:var(--text);text-decoration:none;
}
.loc-row:last-child{border-bottom:none}
.loc-row:hover{background:var(--light)}
.loc-row .l-main{flex:1;min-width:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.loc-row .l-addr{font-weight:500;color:var(--text)}
.loc-row .l-city{color:var(--muted);font-size:.78rem}
.loc-row .l-side{color:var(--muted);font-size:.74rem;white-space:nowrap;text-align:right}
.loc-row .l-side strong{color:var(--text);font-weight:600}
.loc-empty{padding:18px;text-align:center;color:var(--muted);font-size:.84rem}
.more-link{display:block;padding:9px 18px;text-align:center;font-size:.78rem;color:var(--red);text-decoration:none;border-top:1px solid var(--border)}
.more-link:hover{background:var(--red-l)}

/* responsive */
@media (min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sm\:col-span-1{grid-column:span 1/span 1}
  .sm\:inline{display:inline}
  .sm\:p-8{padding:2rem}
}
@media (min-width:768px){
  .md\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}
  .md\:hidden{display:none}
  .md\:flex{display:flex}
}
@media (min-width:1024px){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:col-span-2{grid-column:span 2/span 2}
}

/* ══════════════════════════════════════════════════════════════
   PRINT — A4 landscape, optimized voor de wekelijkse uitprint
   ══════════════════════════════════════════════════════════════ */
@media print{
  @page{size:A4 landscape;margin:8mm 6mm}

  /* Verberg alle interactieve UI */
  .topbar,.sidebar,.icon-btn,.btn-logout,.btn,.density-toggle,
  .actions,dialog,.flash-ok,.flash-err,.flash-info,
  .cap-row,.no-print{display:none!important}

  body{background:#fff;color:#000;font-size:9pt;line-height:1.3}
  .content{padding:0;overflow:visible}
  .shell{display:block}

  .page-head{margin-bottom:6mm;page-break-after:avoid}
  .page-head h1{font-size:14pt;font-weight:700;color:#000}
  .page-head .sub{font-size:9pt;color:#444}

  /* Legenda compact bovenaan */
  .legend{padding:4px 8px;margin-bottom:4mm;border:.5pt solid #999;border-radius:0;
          background:none;font-size:8pt;page-break-inside:avoid;page-break-after:avoid}
  .legend-item{color:#000}
  .legend-swatch{width:8pt;height:8pt;border:.5pt solid #999}

  /* Matrix volledig zwart-wit + bordered */
  .matrix-wrap{border:.5pt solid #000;border-radius:0;overflow:visible;background:#fff}
  .matrix{font-size:8pt;color:#000}
  .matrix thead th{background:#eee!important;color:#000;border-bottom:1pt solid #000;
                   padding:4px 6px;letter-spacing:0;font-size:7pt;font-weight:700;
                   -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .matrix thead th .day-num{font-size:8pt;color:#000}
  .matrix thead th.today{background:#fcd!important;color:#000;
                         -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .matrix thead th.holiday-head{background:#fed7aa!important;color:#000;
                                -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .matrix tbody td{padding:3px 5px;border-bottom:.5pt solid #999;color:#000;min-width:0}
  .matrix tbody td.holiday-cell{background:#fff7ed!important;
                                -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .matrix tbody td.leave-cell{background:#f1f5f9!important;color:#475569;
                              -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .matrix tbody tr{page-break-inside:avoid}
  .matrix .name-col{position:static;background:#fff;border-right:.5pt solid #000;padding:3px 6px}
  .matrix .name-col .name{font-size:9pt;color:#000;font-weight:700}
  .matrix .name-col .phone{font-size:7pt;color:#444}

  /* Tegels: behoud kleur, dunne border */
  .tile{padding:2px 5px;border-radius:0;border:.5pt solid var(--type);border-left-width:2pt;
        background:var(--type-bg)!important;color:#000;
        -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tile + .tile{margin-top:2px}
  .tile-type{font-size:6pt;color:var(--type)!important}
  .tile-addr{font-size:8pt;color:#000;font-weight:700}
  .tile-city{font-size:7pt;color:#444}
  .tile-team{font-size:7pt;color:#222}
  .tile-bon{font-size:6pt;color:#666}

  .leave-chip{padding:1pt 4pt;border:.5pt solid #999;background:#f1f5f9!important;color:#000;
              -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .leave-chip.ziek{background:#fee2e2!important;color:#7f1d1d}
  .leave-chip.verlof{background:#dcfce7!important;color:#14532d}
}

/* ══════════════════════════════════════════════════════════════
   MOBIEL & TABLET (2026-10-16)
   ══════════════════════════════════════════════════════════════ */

/* iPhone-notch / thuisbalk: geïnstalleerde app (viewport-fit=cover) */
.topbar{
  height:calc(56px + env(safe-area-inset-top, 0px));
  padding-top:env(safe-area-inset-top, 0px);
  padding-left:max(18px, env(safe-area-inset-left, 0px));
  padding-right:max(18px, env(safe-area-inset-right, 0px));
}
.content{padding-bottom:calc(26px + env(safe-area-inset-bottom, 0px))}

/* Menuknop tot en met 900px tonen — daar zit de zijbalk nog uitgeklapt-buiten-beeld
   (zonder dit was er tussen 768 en 900px geen menu) */
@media (max-width:900px){
  #btn-menu.md\:hidden{display:inline-grid}
  .sidebar{top:calc(56px + env(safe-area-inset-top, 0px));padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px))}
}
@media (min-width:901px){
  #btn-menu{display:none}
}

/* Smalle telefoons (360–480px): topbalk mag niet overlopen */
@media (max-width:480px){
  .topbar{gap:8px;padding-left:max(10px, env(safe-area-inset-left, 0px));padding-right:max(10px, env(safe-area-inset-right, 0px))}
  .logo-text{display:none}
  .btn-logout{padding:7px 10px}
}

/* iOS zoomt in op invoervelden kleiner dan 16px */
@media (max-width:640px){
  input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],
  input[type=search],input[type=number],input[type=tel],input[type=url],select,textarea{font-size:16px}
}

/* Dialogen nooit breder dan het scherm */
dialog{max-width:calc(100vw - 24px)}
dialog form{max-width:100%}

/* Grote, makkelijk te raken knoppen in het medewerkersportaal */
.tap-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:6px 14px;margin-top:6px;
  border:1px solid var(--red-b);border-radius:10px;background:var(--red-l);
  color:var(--red);font-size:.82rem;font-weight:700;text-decoration:none;
}
.tap-btn:active{transform:scale(.98)}

/* Ontbrekende utility-classes die de templates wel gebruiken */
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-pre-line{white-space:pre-line}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.mt-4{margin-top:1rem}
.pt-3{padding-top:.75rem}
.space-y-1>*+*{margin-top:.25rem}
.space-y-2>*+*{margin-top:.5rem}
.space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem}
@media (min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:inline-flex{display:inline-flex}
}
@media (min-width:1280px){
  .xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* Het hidden-attribuut wint altijd (ook van inline display:flex) */
[hidden]{display:none!important}


/* Meewerken bij een andere DTA: lichtere, gestippelde tegel */
.tile.t-assist{--type:var(--muted);--type-bg:transparent;border:1px dashed var(--border2)}
.tile.t-assist .tile-type{text-transform:none;letter-spacing:0;font-size:.7rem;color:var(--muted)}

/* Slepen op het planbord */
.drag-chip{cursor:grab;border-radius:6px;padding:1px 6px;background:var(--surface);border:1px solid var(--border);display:inline-block;margin:2px 3px 0 0;font-size:.72rem;color:var(--text2);user-select:none}
.drag-chip:hover{border-color:var(--red-b);color:var(--red)}
.drag-chip.dragging{opacity:.4}
.tile-team .drag-chip{margin:0}
.drop-over{outline:2px dashed var(--red);outline-offset:2px;background:var(--red-l)!important}
.unplanned-row{margin-top:8px}
.unplanned-row .cap{line-height:1.9}

/* ══════════════════════════════════════════════════════════════
   VORMGEVING V3 (2026-10-16) — strakker en sterker
   - groene bovenbalk in huisstijl, witte kaarten met zachte schaduw
   - grotere, vettere letters, echte iconen, grote knoppen
   - eigen telefoonweergave: Mijn planning (mm-*) en planbord (mob-*)
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#eef0eb;
  --border:#e0e3dc;
  --border2:#c8ccc3;
  --r:10px; --r-sm:6px; --r-lg:14px;
  --sh:0 1px 2px rgba(16,32,22,.06),0 4px 12px rgba(16,32,22,.05);
  --sh2:0 14px 36px rgba(16,32,22,.18);
  --topbar:#003e23;
  --g-strong:#003e23; --g-strong-2:#00301b; --g-text:#003e23;
  --accent:#b90448;
  --row-hover:#f6f8f4; --today-col:#f3f7f4; --today-hover:#ebf2ed;
}
html[data-theme="dark"]{
  --topbar:#003e23;
  --g-strong:#0f5c37; --g-strong-2:#0b4d2d; --g-text:#9fd0b0;
  --accent:#f0457f;
  --row-hover:#1f2521; --today-col:#1b241e; --today-hover:#222c25;
  --sh:0 1px 2px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.28);
}

.ico{flex-shrink:0;vertical-align:-3px}

/* ── Bovenbalk ─────────────────────────────────────────────── */
.topbar{
  background:var(--topbar);border-bottom:0;color:#fff;gap:12px;
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 6px 18px rgba(12,32,20,.16);
}
.topbar .logo-mark{background:#fff;padding:3px;border-radius:9px;gap:2px}
.topbar .logo-mark .lm-r,.topbar .logo-mark .lm-g{width:25px;height:25px;font-size:.8rem}
.topbar .logo-mark .lm-r{border-radius:6px 2px 2px 6px}
.topbar .logo-mark .lm-g{border-radius:2px 6px 6px 2px}
.topbar .logo-brand{color:#fff;font-size:.98rem;font-weight:800;letter-spacing:-.015em}
.topbar .logo-sub,html[data-theme="dark"] .topbar .logo-sub{color:rgba(255,255,255,.62);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
.topbar .week-chip,html[data-theme="dark"] .topbar .week-chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.16);color:#fff;font-size:.72rem;padding:5px 12px}
.topbar .user-chip{background:transparent;border-color:rgba(255,255,255,.28);color:#fff;font-size:.8rem;padding:5px 12px}
.topbar .icon-btn{width:40px;height:40px;background:transparent;border-color:transparent;color:rgba(255,255,255,.92);position:relative}
.topbar .icon-btn svg{width:20px;height:20px}
.topbar .icon-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.topbar .icon-btn.active{background:rgba(255,255,255,.14);border-color:transparent;color:#fff}
.topbar #btn-notify.active::after{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 2px var(--topbar)}
.topbar .btn-logout{border-color:rgba(255,255,255,.3);color:#fff;font-weight:700;border-radius:10px}
.topbar .btn-logout:hover{background:#fff;border-color:#fff;color:var(--green)}

/* ── Zijmenu ───────────────────────────────────────────────── */
.sidebar{padding:16px 12px;gap:3px}
.sidebar-heading{font-size:.64rem;letter-spacing:.14em;padding:6px 12px 8px}
.nav-btn{font-size:.9rem;font-weight:600;color:var(--text2);padding:10px 12px;border-radius:11px;gap:12px}
.nav-btn:hover{background:var(--light);color:var(--text)}
.nav-btn.active{background:var(--g-strong);color:#fff;font-weight:700;border-left:0;padding-left:12px;box-shadow:0 3px 10px rgba(29,61,42,.22)}
.nav-btn.active:hover{background:var(--g-strong-2);color:#fff}
.nav-icon svg{width:18px;height:18px}
.sb-foot{margin-top:auto;padding:14px 4px 2px;border-top:1px solid var(--border)}
.sb-user{display:flex;align-items:center;gap:10px;padding:0 6px;min-width:0}
.sb-user>div{min-width:0}
.sb-name{font-size:.88rem;font-weight:700;color:var(--text);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-role{font-size:.72rem;font-weight:600;color:var(--muted);margin-top:1px}
.sb-actions{display:none;gap:8px;margin-top:12px}
.sb-actions form{flex:1;display:flex}
.sb-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:12px;border:1px solid var(--border2);background:var(--surface);font-size:.88rem;font-weight:700;color:var(--text)}
.sb-btn:active{transform:scale(.98)}
.sb-btn.logout{color:var(--err);border-color:var(--err-b)}
html:not([data-theme="dark"]) .sb-btn .icon-sun{display:none}
html[data-theme="dark"] .sb-btn .icon-moon{display:none}

.avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:inline-grid;place-items:center;
  background:var(--green-l);color:var(--g-text);font-size:.74rem;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}

/* ── Inhoud ────────────────────────────────────────────────── */
.content{padding:28px 32px calc(32px + env(safe-area-inset-bottom,0px))}
.page-head{margin-bottom:20px;gap:14px 18px}
.page-head h1{font-size:1.65rem;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.page-head .sub{font-size:.9rem;margin-top:4px;font-weight:500}
.eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}

.card,.section,.table-card,.data-table-wrap,.kpi,.directory-card,.proj-card,.matrix-wrap{border-color:var(--border);box-shadow:var(--sh);border-radius:var(--r-lg)}
.card:hover{box-shadow:var(--sh)}
.section-hd{background:var(--surface);padding:13px 18px}
.section-hd h2{font-size:.74rem;font-weight:800;letter-spacing:.09em;color:var(--text)}
.kpi{padding:16px 18px}
.kpi-label{font-size:.68rem;font-weight:800;letter-spacing:.08em}
.kpi-value{font-size:1.9rem;font-weight:800;letter-spacing:-.03em}
.directory-card{padding:16px 18px}
.directory-card .name{font-weight:700;font-size:1rem}
.directory-card:hover{border-color:var(--border2);box-shadow:var(--sh2)}
.empty-state{border-radius:var(--r-lg);border-color:var(--border2)}
.activity-list li{padding:12px 18px}
.data-table thead th,thead th{font-weight:800}

.btn{min-height:40px;padding:9px 16px;border-radius:10px;font-size:.86rem;font-weight:700;justify-content:center;gap:7px}
.btn-sm{min-height:36px;padding:7px 13px;font-size:.82rem;border-radius:10px}
.btn-primary{box-shadow:0 2px 6px rgba(179,23,74,.22)}
.btn-ghost{border-color:var(--border2);background:var(--surface);color:var(--text)}
.btn-ghost:hover{border-color:var(--text2);color:var(--text);background:var(--light)}
.btn-green{background:var(--g-strong);border-color:var(--g-strong);color:#fff;box-shadow:0 2px 6px rgba(29,61,42,.22)}
.btn-green:hover{background:var(--g-strong-2);border-color:var(--g-strong-2)}

.density-toggle{border:1px solid var(--border2);border-radius:11px;background:var(--surface);padding:3px;gap:3px}
.density-toggle a{border-right:0;border-radius:8px;padding:6px 12px;font-size:.8rem;font-weight:700;color:var(--muted)}
.density-toggle a:last-child{border-right:0}
.density-toggle a.on{background:var(--g-strong);color:#fff}

.flash-ok,.flash-err,.flash-info{border-radius:12px;padding:12px 16px;font-size:.9rem;font-weight:500}
dialog{border-radius:16px}
dialog h3{font-weight:800;letter-spacing:-.01em}

/* Weeknavigatie als één knoppengroep */
.week-nav{display:inline-flex}
.week-nav .btn{border-radius:0;margin-left:-1px}
.week-nav .btn:first-child{border-radius:10px 0 0 10px;margin-left:0}
.week-nav .btn:last-child{border-radius:0 10px 10px 0}

/* ── Planbord (computer) ───────────────────────────────────── */
.legend{background:transparent;border:0;padding:2px 2px 12px;margin-bottom:0;font-size:.78rem}
.legend-item{font-weight:600}
.legend-swatch{width:12px;height:12px;border-radius:3px}

.matrix{font-size:.86rem}
.matrix thead th{padding:11px 12px;font-size:.7rem;font-weight:800;letter-spacing:.1em;color:var(--text);background:var(--surface);border-bottom:2px solid var(--border)}
.matrix thead th .day-num{font-size:.82rem;font-weight:600;color:var(--muted);margin-left:6px}
.matrix thead th.today{background:var(--g-strong);color:#fff;border-bottom-color:var(--g-strong)}
.matrix thead th.today .day-num{color:rgba(255,255,255,.8)}
.matrix thead th.today .holiday-name{color:#fed7aa}
.matrix thead th.name-col{background:var(--surface)}
.matrix tbody td{padding:8px;border-right:1px solid var(--light)}
.matrix tbody td:last-child{border-right:0}
.matrix tbody td.today{background:var(--today-col)}
.matrix tbody tr:hover td:not(.holiday-cell):not(.leave-cell){background:var(--row-hover)}
.matrix tbody tr:hover td.today{background:var(--today-hover)}
.matrix .name-col{padding:10px 12px;border-right:1px solid var(--border)}
.matrix .name-col .name{font-size:.92rem;font-weight:700}
.matrix .name-col .phone{font-size:.76rem;margin-top:2px}
.dta-cell{display:flex;align-items:center;gap:10px;min-width:0}
.dta-cell>div{min-width:0}
.matrix .empty{color:var(--border2);font-size:1rem}
.conflict{display:flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;color:var(--err);margin:4px 0}

.tile{border-left-width:4px;border-radius:8px;padding:8px 10px;line-height:1.35}
.tile + .tile{margin-top:6px}
.tile-type{font-size:.62rem;font-weight:800;letter-spacing:.08em;margin-bottom:3px}
.tile-addr{font-size:.86rem;font-weight:700;line-height:1.3}
.tile-city{font-size:.76rem;font-weight:500}
.tile-team{margin-top:7px;display:flex;flex-wrap:wrap;gap:4px;font-size:.74rem}
.tile-team span{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:1px 7px;font-weight:600;color:var(--text2);white-space:nowrap}
.tile-team span:not(:last-child)::after{content:none}
html[data-theme="dark"] .tile-team span{background:rgba(255,255,255,.06)}
.leave-chip{border-radius:6px;padding:3px 8px;font-size:.68rem;font-weight:800;letter-spacing:.05em}

.cap-row{background:var(--surface);font-size:.76rem;border-color:var(--border);border-radius:0 0 var(--r-lg) var(--r-lg)}
.matrix-wrap:has(+ .cap-row){border-radius:var(--r-lg) var(--r-lg) 0 0}
.cap-row .cap{padding:8px 12px}
.unplanned-row{border-top:1px solid var(--border);border-radius:var(--r-lg);margin-top:12px;box-shadow:var(--sh)}

/* ── Planbord (telefoon): dag-voor-dag ─────────────────────── */
.mob-switch,.mob-plan{display:none}
.mob-switch{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:3px;gap:3px;margin-bottom:10px;box-shadow:var(--sh)}
.mob-switch button{flex:1;min-height:34px;border-radius:8px;font-weight:700;font-size:.84rem;color:var(--muted)}
.mob-switch button.on{background:var(--g-strong);color:#fff;box-shadow:0 2px 6px rgba(29,61,42,.22)}

.mob-days{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 12px;margin:0 -2px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mob-days::-webkit-scrollbar{display:none}
.mob-day-tab{flex:1 0 50px;min-height:58px;border-radius:12px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text);padding:6px 2px}
.mob-day-tab .t-dow{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mob-day-tab .t-num{font-size:1.1rem;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.mob-day-tab .t-count{min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:var(--light);font-size:.66rem;font-weight:800;line-height:18px;color:var(--text2)}
.mob-day-tab.is-today .t-dow{color:var(--accent)}
.mob-day-tab.is-holiday{border-color:#fdba74}
.mob-day-tab.on{background:var(--g-strong);border-color:var(--g-strong);color:#fff;box-shadow:0 4px 12px rgba(29,61,42,.28)}
.mob-day-tab.on .t-dow{color:rgba(255,255,255,.8)}
.mob-day-tab.on .t-count{background:rgba(255,255,255,.2);color:#fff}

.mob-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:4px 2px 12px}
.mob-panel-head h2{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.mob-panel-head .sub{font-size:.82rem;color:var(--muted);font-weight:600;margin-top:2px}
.mob-hint{font-size:.8rem;color:var(--muted);margin:-4px 2px 12px}

.mob-card,.mob-group{background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--sh);margin-bottom:8px;overflow:hidden}
.mob-card-head{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 12px}
.mob-card-head .avatar{width:30px;height:30px;font-size:.68rem}
.mob-card-name{flex:1;min-width:0;font-weight:800;font-size:.92rem;letter-spacing:-.01em;line-height:1.25}
.mob-card-name small{display:block;font-size:.74rem;font-weight:600;color:var(--muted);letter-spacing:0;margin-top:1px}
.mob-call{width:34px;height:34px;border-radius:10px;background:var(--green-l);color:var(--g-text);display:grid;place-items:center;flex-shrink:0}
.mob-call:active{transform:scale(.96)}
.mob-warn{display:flex;align-items:center;gap:6px;margin:0 14px 10px;padding:7px 10px;border-radius:9px;background:var(--err-l);color:var(--err);font-size:.8rem;font-weight:700}

.mob-job{display:block;position:relative;padding:9px 36px 10px 16px;border-top:1px solid var(--border);color:var(--text);--type:var(--green)}
.mob-job::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--type)}
.mob-job:active{background:var(--light)}
.mob-job.t-kantoor{--type:var(--type-kantoor)} .mob-job.t-cont{--type:var(--type-cont)} .mob-job.t-deco{--type:var(--type-deco)}
.mob-job.t-rk1{--type:var(--type-rk1)} .mob-job.t-keuring{--type:var(--type-keuring)} .mob-job.t-assist{--type:var(--border2)}
html[data-theme="dark"] .mob-job.t-werk{--type:#5fa77a}
.mob-job-kicker{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.mob-job-addr{font-size:.92rem;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.mob-job-city{font-size:.8rem;color:var(--muted);font-weight:500;margin-top:1px}
.mob-chev{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--border2);display:flex}
.mob-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.mob-chip{background:var(--light);border-radius:7px;padding:2px 7px;font-size:.74rem;font-weight:600;color:var(--text2);white-space:nowrap}
.mob-chip em{font-style:normal;font-weight:700;margin-left:4px;opacity:.8}
.mob-chip.sick{background:var(--err-l);color:var(--err)}
.mob-chip.leave{background:var(--info-l);color:var(--info)}
.mob-group{padding:10px 12px}
.mob-group h3{display:flex;align-items:center;gap:7px;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.mob-group .mob-chips{margin-top:8px}
.mob-group .mob-job{margin:0 -12px}
.mob-group h3 + .mob-job{margin-top:8px}
.mob-group .mob-job:last-child{margin-bottom:-10px}
.mob-group.warn{border-color:var(--warn-b);background:var(--warn-l)}
.mob-group.warn h3{color:var(--warn)}
.mob-muted{font-size:.86rem;color:var(--muted);margin-top:6px}
.mob-badge{display:inline-flex;align-items:center;gap:5px;border-radius:8px;padding:4px 9px;font-size:.78rem;font-weight:700;white-space:nowrap}
.mob-badge.holiday{background:#fff1e6;color:#9a3412}
html[data-theme="dark"] .mob-badge.holiday{background:rgba(234,88,12,.16);color:#fdba74}
.mob-empty{text-align:center;padding:18px 14px;color:var(--muted);font-weight:600;background:var(--surface);border:1px dashed var(--border2);border-radius:16px;margin-bottom:12px}

@media (max-width:767px){
  .mob-switch{display:flex}
  .plan-root[data-view="dag"] .mob-plan{display:block}
  .plan-root[data-view="dag"] .desk-only{display:none!important}
  .plan-head .density-toggle,.plan-head .print-btn{display:none}
  .plan-head{margin-bottom:14px}
  .plan-head .actions{width:100%}
  .plan-head .week-nav{flex:1 1 100%}
  .plan-head .week-nav .btn{flex:1}
  .plan-head .actions>.btn{flex:1 1 0}
}

/* ── Mijn planning + Complete planning (medewerkers) — compact ── */
.mm-wrap{max-width:700px;margin:0 auto}
.mm-head{margin:0 2px 10px}
.mm-head .eyebrow{margin-bottom:2px}
.mm-head h1{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.mm-dates{font-size:.9rem;color:var(--muted);font-weight:600;letter-spacing:0;margin-left:6px;white-space:nowrap}

.mm-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;margin-bottom:12px;
  background:var(--surface);border:1px solid var(--border);border-radius:11px;box-shadow:var(--sh)}
.mm-seg a{min-height:34px;display:grid;place-items:center;border-radius:8px;font-size:.84rem;font-weight:700;color:var(--muted);text-align:center;padding:0 4px}
.mm-seg a.on{background:var(--g-strong);color:#fff}

.mm-pill{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;flex-shrink:0;
  font-size:.76rem;font-weight:700;line-height:1;white-space:nowrap;background:var(--green-l);color:var(--g-text);border:1px solid transparent;text-decoration:none}
.mm-pill:active{transform:scale(.97)}
.mm-pill.outline{background:var(--surface);border-color:var(--border2);color:var(--text2)}

.mm-banner,.mm-notice{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-radius:12px;padding:9px 12px;margin-bottom:10px;font-size:.84rem;font-weight:600;line-height:1.4}
.mm-banner{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--g-strong);box-shadow:var(--sh)}
.mm-banner #push-banner-text{flex:1;min-width:160px}
.mm-banner-ico{width:30px;height:30px;border-radius:9px;background:var(--green-l);color:var(--g-text);display:grid;place-items:center;flex-shrink:0}
.mm-notice{align-items:flex-start;flex-wrap:nowrap;background:var(--info-l);border:1px solid var(--info-b);color:var(--text);font-weight:500}
.mm-notice .ico{color:var(--info);margin-top:1px}

.mm-daylist{display:flex;flex-direction:column;gap:8px}
.mm-day{display:grid;grid-template-columns:50px 1fr;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--sh);overflow:hidden}
.mm-day-date{display:flex;flex-direction:column;align-items:center;padding:10px 2px 8px;background:var(--light);border-right:1px solid var(--border);text-align:center;line-height:1.1}
.mm-dow{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mm-dnum{font-size:1.25rem;font-weight:800;letter-spacing:-.03em;color:var(--text);margin:1px 0}
.mm-mon{font-size:.64rem;font-weight:700;color:var(--muted)}
.mm-day.is-today{border-color:var(--g-strong);box-shadow:0 0 0 1px var(--g-strong),var(--sh)}
.mm-day.is-today .mm-day-date{background:var(--g-strong);border-right-color:var(--g-strong)}
.mm-day.is-today .mm-dow,.mm-day.is-today .mm-mon{color:rgba(255,255,255,.8)}
.mm-day.is-today .mm-dnum{color:#fff}
.mm-day-body{padding:10px 12px;min-width:0}
.mm-day.is-off .mm-day-date{padding:7px 2px 6px}
.mm-day.is-off .mm-dnum{font-size:1.05rem}
.mm-day.is-off .mm-day-body{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 12px}
.mm-free{font-size:.84rem;font-weight:600;color:var(--muted)}

.mm-badge{display:inline-flex;align-items:center;gap:5px;border-radius:8px;padding:3px 8px;font-size:.74rem;font-weight:700;margin:0 4px 6px 0}
.mm-day.is-off .mm-badge{margin:0}
.mm-badge.holiday{background:#fff1e6;color:#9a3412}
.mm-badge.leave{background:var(--info-l);color:var(--info)}
.mm-badge.sick{background:var(--err-l);color:var(--err)}
html[data-theme="dark"] .mm-badge.holiday{background:rgba(234,88,12,.16);color:#fdba74}

.mm-job + .mm-job{border-top:1px dashed var(--border2);margin-top:10px;padding-top:10px}
.mm-job-top{display:flex;align-items:flex-start;gap:10px}
.mm-job-top>div{flex:1;min-width:0}
.mm-job-addr{font-size:1rem;font-weight:800;letter-spacing:-.015em;line-height:1.25;color:var(--text);overflow-wrap:anywhere}
.mm-job-city{font-size:.84rem;font-weight:600;color:var(--muted);margin-top:1px}
.mm-job-dta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:6px;font-size:.82rem;font-weight:600;color:var(--text2)}
.mm-job-dta .ico{color:var(--muted)}
.mm-job-dta .mm-pill{height:24px;padding:0 8px;font-size:.72rem;margin-left:2px}
.mm-job-dta.mm-role,.mm-job-dta.mm-role .ico{color:var(--g-text);font-weight:800}
.mm-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.mm-chip{background:var(--light);border:1px solid var(--border);border-radius:7px;padding:2px 7px;font-size:.76rem;font-weight:600;color:var(--text2);white-space:nowrap}
.mm-chip.me{background:var(--green-l);border-color:var(--green-b);color:var(--g-text);font-weight:800}
.mm-notes{display:flex;gap:7px;align-items:flex-start;margin-top:8px;padding:6px 9px;border-radius:9px;background:var(--warn-l);border:1px solid var(--warn-b);font-size:.8rem;color:var(--text);white-space:pre-line}
.mm-notes .ico{color:var(--warn);margin-top:1px}
.mm-more{display:inline-flex;align-items:center;gap:3px;margin-top:7px;font-size:.76rem;font-weight:700;color:var(--muted)}
.mm-more:hover{color:var(--text)}

.mm-past{margin-bottom:8px}
.mm-past>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:11px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh);font-size:.82rem;font-weight:700;color:var(--text2)}
.mm-past>summary::-webkit-details-marker{display:none}
.mm-past>summary .mm-past-count{margin-left:auto;background:var(--light);border-radius:999px;padding:1px 8px;font-size:.72rem}
.mm-past>summary .chev{transition:transform .15s;color:var(--muted)}
.mm-past[open]>summary .chev{transform:rotate(90deg)}
.mm-past[open]>summary{margin-bottom:8px}
.mm-day.is-past{opacity:.72}
.mm-empty{text-align:center;padding:20px 16px;background:var(--surface);border:1px dashed var(--border2);border-radius:13px}
.mm-empty h3{font-size:.98rem;font-weight:800;margin-bottom:3px}
.mm-empty p{color:var(--muted);font-size:.86rem;margin-bottom:10px}

.mm-footer-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mm-card{background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--sh);padding:12px 14px;margin-top:14px}
.mm-card-title{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.mm-leave-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.mm-leave-list li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.84rem;font-weight:600}
.mm-leave-list form{margin-left:auto}

/* Complete planning: harmonica per DTA */
.acc-list{display:flex;flex-direction:column;gap:8px}
.acc{background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--sh);overflow:hidden}
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 12px;-webkit-tap-highlight-color:transparent}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary .avatar{width:32px;height:32px;font-size:.7rem}
.acc-main{flex:1;min-width:0;display:flex;flex-direction:column}
.acc-name{font-size:.94rem;font-weight:800;letter-spacing:-.01em;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-me{font-style:normal;font-size:.68rem;font-weight:800;color:var(--g-text);background:var(--green-l);border-radius:999px;padding:1px 7px;margin-left:4px;vertical-align:1px}
.acc-sub{font-size:.76rem;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-chev{color:var(--muted);transition:transform .15s}
.acc[open]{border-color:var(--border2)}
.acc[open]>summary{border-bottom:1px solid var(--border)}
.acc[open] .acc-chev{transform:rotate(90deg)}
.acc-body{padding:2px 12px 10px}
.acc-assist{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:1px}

@media (max-width:480px){
  .mm-head h1{font-size:1.4rem}
  .mm-day{grid-template-columns:46px 1fr}
}

/* ── Klus-pagina: eenvoudig (adres, ploeg, wijzig per persoon) ── */
.job-wrap{max-width:1040px}
.job-back{display:inline-flex;align-items:center;gap:3px;font-size:.84rem;font-weight:700;color:var(--muted);margin-bottom:6px}
.job-back:hover{color:var(--text)}
.job-head{margin-bottom:14px}
.job-head h1{font-size:1.5rem;font-weight:800;letter-spacing:-.025em;line-height:1.2;overflow-wrap:anywhere}
.job-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.9rem;color:var(--muted);font-weight:600;margin-top:3px}
.job-grid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
@media (min-width:900px){.job-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}}
.job-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh);padding:12px 14px 14px}
.job-card-title{display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.job-card-title span{background:var(--light);color:var(--text2);border-radius:999px;padding:0 8px;letter-spacing:0;font-size:.72rem;line-height:1.6}

.crew-row{border-top:1px solid var(--border)}
.job-card-title + .crew-row,.job-card-title + .job-empty{border-top:0}
.crew-row>summary,.crew-row.static,.crew-row.no-dta{display:flex;align-items:center;gap:10px;padding:10px 2px;list-style:none}
.crew-row>summary{cursor:pointer;-webkit-tap-highlight-color:transparent}
.crew-row>summary::-webkit-details-marker{display:none}
.crew-row .avatar{width:32px;height:32px;font-size:.7rem}
.crew-row.is-dta .avatar{background:var(--g-strong);color:#fff}
.crew-row.no-dta .avatar{background:var(--warn-l);color:var(--warn)}
.crew-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.crew-name{font-size:.95rem;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crew-role{font-size:.74rem;font-weight:700;color:var(--muted)}
.crew-row.is-dta .crew-role{color:var(--g-text);font-weight:800}
.crew-row.no-dta .crew-role{color:var(--warn)}
.crew-row.no-dta select{margin-top:4px;padding:8px 10px;font-size:.88rem}
.crew-edit{display:inline-flex;align-items:center;gap:2px;font-size:.78rem;font-weight:700;color:var(--muted);flex-shrink:0}
.crew-chev{transition:transform .15s}
.crew-row[open]>summary .crew-edit{color:var(--text)}
.crew-row[open] .crew-chev{transform:rotate(90deg)}
.crew-panel{margin:0 0 12px 42px;padding:10px 12px;background:var(--light);border-radius:11px;display:flex;flex-direction:column;gap:10px}
.crew-act{display:flex;flex-direction:column;gap:4px}
.crew-act label{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.crew-act select{padding:8px 10px;font-size:.88rem;background:var(--surface)}
.crew-hint{font-size:.74rem;color:var(--muted)}
.crew-btns{display:flex;flex-wrap:wrap;gap:6px}
.mm-pill.danger{color:var(--err);border-color:var(--err-b)}
.crew-row.static .mob-call{width:32px;height:32px;border-radius:9px}

.job-add{margin-top:6px;padding-top:12px;border-top:1px solid var(--border)}
.job-add select{font-weight:700;color:var(--g-text);border-style:dashed;border-color:var(--border2);background:var(--surface);cursor:pointer}
.job-empty{font-size:.86rem;color:var(--muted);padding:8px 2px;border-top:1px solid var(--border)}

.job-form{margin-top:6px}
.job-form .field{margin-bottom:10px}
.job-form-row{display:grid;grid-template-columns:1fr;gap:0 10px}
@media (min-width:480px){.job-form-row{grid-template-columns:1.4fr 1fr}}
.job-delete{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.job-link-danger{font-size:.82rem;font-weight:700;color:var(--err)}
.job-link-danger:hover{text-decoration:underline}
.job-facts{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.job-facts dt{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.job-facts dd{font-size:.92rem;font-weight:600;white-space:pre-line}

@media (max-width:480px){
  .crew-panel{margin-left:0}
}

/* ── Reistijd & wekker ── */
.mm-trip{display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px;margin:0 0 9px;padding:6px 10px;border-radius:9px;
  background:var(--green-l);color:var(--g-text);font-size:.8rem;font-weight:700;line-height:1.35}
.mm-trip>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.mm-trip .mm-wake{margin-left:auto;font-weight:800}
.mm-trip.big{margin-bottom:12px;padding:10px 12px;font-size:.86rem;border:1px solid var(--green-b)}
.mm-trip .mm-trip-where{flex-basis:100%;white-space:normal;font-weight:800}
.mm-day.is-past .mm-trip{display:none}
.mm-setup{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:9px 12px;border-radius:12px;background:var(--surface);
  border:1px solid var(--border);border-left:3px solid var(--accent);box-shadow:var(--sh);font-size:.84rem;font-weight:700;color:var(--text)}
.mm-setup>span:nth-child(2){flex:1}
.mm-setup .mm-banner-ico{background:var(--red-l);color:var(--accent)}
.mm-attrib{margin-top:10px;font-size:.72rem;color:var(--muted);text-align:right}
.mm-attrib a{text-decoration:underline;text-underline-offset:2px}

.prefs-form{margin-top:0}
.prefs-form .mm-card-title{margin-top:6px}
.prefs-form .mm-card-title ~ .mm-card-title{margin-top:18px}
.prefs-form .field{margin-bottom:10px}
.prefs-row{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.prefs-note{font-size:.78rem;color:var(--muted);margin:-2px 0 4px;line-height:1.45}
.prefs-check{display:flex;gap:10px;align-items:flex-start;margin:16px 0 14px;padding:10px 12px;border-radius:11px;background:var(--light);font-size:.82rem;color:var(--text2);line-height:1.45;cursor:pointer}
.prefs-check input{width:20px;height:20px;margin-top:1px;flex-shrink:0;accent-color:var(--g-strong)}
.prefs-check strong{display:block;color:var(--text);font-size:.88rem}

.maps-card{max-width:640px;margin-top:16px;padding:20px}
.maps-card h2{font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.maps-sub{font-size:.84rem;color:var(--muted);margin:4px 0 12px}
.maps-status{padding:9px 12px;border-radius:10px;font-size:.84rem;margin-bottom:12px}
.maps-status.on{background:var(--ok-l);color:var(--ok)}
.maps-status.off{background:var(--light);color:var(--text2)}
.maps-err{margin-top:4px;color:var(--err);font-weight:600}
.maps-ok{margin-top:4px;font-weight:600}
.maps-form{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.maps-row{display:flex;gap:8px;flex-wrap:wrap}
.maps-row input{flex:1;min-width:220px}
.maps-remove{display:flex;gap:8px;align-items:center;font-size:.8rem;color:var(--muted);margin-top:4px}
.maps-help{margin-top:14px;font-size:.84rem}
.maps-help summary{cursor:pointer;font-weight:700;color:var(--text2)}
.maps-help ol{margin:8px 0 0 18px;display:flex;flex-direction:column;gap:5px;color:var(--text2)}
.maps-help a{color:var(--accent);text-decoration:underline}
@media (max-width:420px){.prefs-row{grid-template-columns:1fr}}

/* ── Wekker per dag (schakelaar) + wekker-link ── */
.mm-alarm{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:inherit;background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
.mm-switch{position:relative;width:30px;height:18px;border-radius:999px;background:var(--border2);transition:background .15s;flex-shrink:0;margin-left:2px}
.mm-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.mm-alarm.on .mm-switch{background:var(--g-strong)}
.mm-alarm.on .mm-switch::after{transform:translateX(12px)}
.mm-trip.alarm-off{background:var(--light);color:var(--muted)}
.mm-alarm-all{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:10px;padding:8px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh);font-size:.8rem;font-weight:700;color:var(--text2)}
.mm-alarm-all form{display:inline-flex}
.mm-alarm-all-label{display:inline-flex;align-items:center;gap:6px;margin-right:2px}
.mm-alarm-setup{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.prefs-alarm{margin-top:14px}
.prefs-alarm .maps-status{margin:10px 0}
#alarm-link{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.78rem}
.maps-help ol ul{margin:6px 0 2px 16px;list-style:disc;display:flex;flex-direction:column;gap:4px}
.maps-help code,.prefs-note code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.78rem;background:var(--light);border-radius:4px;padding:0 4px}
.prefs-alarm .maps-help{margin-top:10px}
.prefs-alarm form{margin-top:12px}

.alarm-test{margin-top:14px;padding:12px 14px;border-radius:12px;border:1px dashed var(--border2);background:var(--surface)}
.alarm-test h3{font-size:.9rem;font-weight:800;margin-bottom:4px}
.alarm-test-run{font-size:.84rem;line-height:1.45;color:var(--text);background:var(--warn-l);border:1px solid var(--warn-b);border-radius:10px;padding:8px 10px}
.alarm-test-btns{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 8px}
.alarm-test-btns form{margin:0;display:inline-flex}
.alarm-test .mm-alarm-setup{display:inline-block;margin-left:0}

/* ── Weer per klus + adres aanvullen ── */
.wx-line{display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;margin:0 0 8px;font-size:.78rem;font-weight:700;color:var(--text2)}
.wx{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.wx .ico{color:var(--muted)}
.wx-warn{display:inline-flex;align-items:center;gap:4px;background:var(--warn-l);color:var(--warn);border:1px solid var(--warn-b);border-radius:7px;padding:1px 7px;font-size:.72rem;font-weight:800;white-space:nowrap}
.mob-job .wx-line{margin:6px 0 0}
.tile-wx{display:flex;align-items:center;gap:4px;margin-top:5px;font-size:.68rem;font-weight:700;color:var(--muted);line-height:1.2}
.tile-wx.warn{color:var(--warn)}
.wx-detail{margin:2px 0 12px;padding:9px 11px;border-radius:11px;background:var(--light);font-size:.84rem;color:var(--text2)}
.wx-detail.warn{background:var(--warn-l);border:1px solid var(--warn-b)}
.wx-detail-main{display:flex;align-items:center;gap:7px;color:var(--text)}
.wx-detail-sub{margin-top:3px;font-size:.8rem}
.wx-detail-warn{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
@media print{.tile-wx{color:#444!important}}

.adres-wrap{position:relative}
.adres-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;list-style:none;margin:0;padding:4px;background:var(--surface);
  border:1px solid var(--border2);border-radius:10px;box-shadow:var(--sh2);max-height:260px;overflow-y:auto}
.adres-list li{padding:8px 10px;border-radius:7px;font-size:.88rem;cursor:pointer;line-height:1.3;color:var(--text)}
.adres-list li:hover,.adres-list li.on{background:var(--green-l);color:var(--g-text)}
dialog:has(.adres-list:not([hidden])){overflow:visible}

/* ── Mijn planning: rustige dagkaart (weer in de datumkolom, wekker als vaste onderregel) ── */
.mm-day-wx{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:9px;padding-top:8px;border-top:1px solid var(--border);width:72%;font-size:.78rem;font-weight:800;color:var(--text2);line-height:1}
.mm-day-wx .ico{color:var(--muted)}
.mm-day-wx.warn,.mm-day-wx.warn .ico{color:var(--warn)}
.mm-day.is-today .mm-day-wx{border-top-color:rgba(255,255,255,.25);color:#fff}
.mm-day.is-today .mm-day-wx .ico{color:rgba(255,255,255,.85)}
.mm-day.is-today .mm-day-wx.warn,.mm-day.is-today .mm-day-wx.warn .ico{color:#fed7aa}
.mm-warns{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.mm-alarmbar{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;row-gap:1px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.mm-alarmbar-main{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;font-weight:800;color:var(--g-text);white-space:nowrap}
.mm-alarmbar-sub{grid-column:1;font-size:.76rem;font-weight:600;color:var(--muted);padding-left:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-alarmbar .mm-alarm{grid-column:2;grid-row:1/span 2;padding:6px 0 6px 8px}
.mm-alarmbar.off .mm-alarmbar-main{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Mensen op een klus: naam per persoon, DTA voorop (tik = bellen), jijzelf rustig gemarkeerd ── */
.pp-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.pp{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--light);border:1px solid var(--border2);
  font-size:.8rem;font-weight:700;color:var(--text2);white-space:nowrap;text-decoration:none;line-height:1.2}
.pp-tag{font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pp-dta{border-color:var(--green-b);color:var(--text);padding:3px 10px 3px 3px;gap:7px}
.pp-dta .pp-name{font-weight:800}
.pp-role{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;background:var(--g-strong);color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.08em;line-height:1.5}
.pp-me{border-color:var(--red-b);color:var(--text)}
.pp-me .pp-tag{color:var(--accent)}
.pp-call{display:inline-flex;align-items:center;color:var(--g-text);margin-left:1px}
a.pp:active{transform:scale(.97)}

/* Vandaag / morgen bij de datum */
.mm-rel{display:block;margin:-3px 0 4px;padding:1px 6px;border-radius:999px;font-size:.58rem;font-weight:800;line-height:1.5;background:var(--red-l);color:var(--accent)}
.mm-day.is-today .mm-rel{background:rgba(255,255,255,.2);color:#fff}

/* Zonder initialen-rondjes: wijzig-paneel op de klus-pagina niet meer inspringen */
.crew-panel{margin-left:0}

/* Balk "Wekker zetten voor …": kruisje om te sluiten; knoppen ook op Reistijd & wekker */
.mm-alarm-all{position:relative;padding-right:40px}
.mm-alarm-close{position:absolute;top:4px;right:4px;margin:0}
.mm-alarm-close button{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--muted)}
.mm-alarm-close button:hover{background:var(--light);color:var(--text)}
.alarm-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:12px 0 4px;font-size:.84rem;font-weight:700;color:var(--text2)}
.alarm-bulk form{margin:0;display:inline-flex}

/* Datumkolom in Mijn planning: groter, in verhouding met adres en namen */
.mm-day{grid-template-columns:62px 1fr}
.mm-day-date{padding:12px 2px 10px}
.mm-dow{font-size:.74rem}
.mm-dnum{font-size:1.7rem;margin:2px 0}
.mm-mon{font-size:.76rem}
.mm-day.is-off .mm-day-date{padding:9px 2px 8px}
.mm-day.is-off .mm-dnum{font-size:1.3rem}
.mm-rel{font-size:.62rem;padding:1px 7px}
.mm-day-wx{font-size:.95rem;gap:4px;margin-top:10px;padding-top:9px}
.mm-day-wx .ico{width:22px;height:22px}
@media (max-width:480px){
  .mm-day{grid-template-columns:56px 1fr}
  .mm-dnum{font-size:1.55rem}
}

/* Wekkerregel onderaan de dagkaart: één rustige regel, wektijd vet, vertrek klein ernaast */
.mm-alarmbar{display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px 0 0;background:none;border:0;border-top:1px solid var(--border);border-radius:0}
.mab-ico{display:inline-flex;color:var(--g-text)}
.mab-wake{font-size:1.12rem;font-weight:800;letter-spacing:-.01em;color:var(--g-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.mab-sub{flex:1;min-width:0;font-size:.8rem;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-alarmbar .mm-alarm{padding:6px 0 6px 6px}
.mm-alarmbar .mm-switch{width:36px;height:22px}
.mm-alarmbar .mm-switch::after{width:18px;height:18px}
.mm-alarmbar .mm-alarm.on .mm-switch::after{transform:translateX(14px)}
.mm-alarmbar.off .mab-ico,.mm-alarmbar.off .mab-wake{color:var(--muted)}
.mm-alarmbar.off .mab-wake{font-size:.9rem}

/* Verversknop in de bovenbalk: draait even tijdens het laden */
@keyframes mm-spin{to{transform:rotate(360deg)}}
#btn-refresh.spin svg{animation:mm-spin .8s linear infinite}
@media print{#btn-refresh{display:none}}

/* Straat en plaats op één regel; dagkaart als kolom (onderste regel onderaan) */
.mm-day-wx{flex-direction:row;justify-content:center;gap:4px;width:84%;margin-top:8px;padding-top:8px;font-size:.88rem}
.mm-day-wx .ico{width:19px;height:19px}
.mm-day:not(.is-off) .mm-day-body{display:flex;flex-direction:column}
.mm-day:not(.is-off) .mm-day-body > .mm-job{margin-bottom:12px}
.mm-day:not(.is-off) .mm-alarmbar{margin-top:auto}
.mm-job-addr{flex:1;min-width:0}
.mm-job-place{font-weight:600;color:var(--muted)}

/* Linkerkolom (datum) rustiger: "vandaag/morgen" als woordje, weer zonder lijntje */
.mm-rel{background:none;padding:0;margin:-2px 0 3px;font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.mm-day.is-today .mm-rel{background:none;color:rgba(255,255,255,.85)}
.mm-day-wx{border-top:0;padding-top:0;margin-top:7px;font-size:.8rem;font-weight:700;color:var(--muted)}
.mm-day-wx .ico{width:16px;height:16px}

/* Datumkolom: weer iets duidelijker (groter icoon, temperatuur vet en donker) */
.mm-day-wx{width:auto;gap:3px;margin-top:8px;font-size:.92rem;font-weight:800;color:var(--text)}
.mm-day-wx .ico{width:20px;height:20px;color:var(--text2)}

/* Dagkaart: adres, namen en reistijd samen in het midden van de hoogte
   (de datumkolom is vaak hoger; eerst zakte de reistijdregel naar onderen met een gat erboven) */
.mm-day:not(.is-off) .mm-day-body{justify-content:center}
.mm-day:not(.is-off) .mm-alarmbar{margin-top:0}
.mm-day:not(.is-off) .mm-day-body > .mm-job:last-child{margin-bottom:0}

/* Dagkaart: tekst ook links-rechts in het midden (adres, namen, notitie, reistijd/wekker) */
.mm-day:not(.is-off) .mm-day-body{text-align:center}
.mm-day:not(.is-off) .mm-job-top{justify-content:center;flex-wrap:wrap}
.mm-day:not(.is-off) .mm-job-addr{flex:0 1 auto}
.mm-day:not(.is-off) .pp-row,
.mm-day:not(.is-off) .mm-warns,
.mm-day:not(.is-off) .mm-notes,
.mm-day:not(.is-off) .mm-alarmbar{justify-content:center}
.mm-day:not(.is-off) .mm-badge{align-self:center;margin:0 0 6px}
.mm-day:not(.is-off) .mab-sub{flex:0 1 auto}

/* Route-knop vooraan in de onderste regel, voor het autootje of de wekker (niet meer in de datumkolom).
   Zonder reistijd of wekker staat hij er alleen, met "Route" erachter. Past de regel niet, dan loopt hij door op een tweede regel. */
.mm-route-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;flex-shrink:0;margin-right:4px;
  background:var(--g-strong);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18);text-decoration:none}
.mm-route-btn .ico{width:18px;height:18px}
a.mm-route-btn:active,.mm-alarmbar.route-only:active .mm-route-btn{transform:scale(.95)}
.mm-alarmbar.route-only,.mm-alarmbar.route-only:hover{color:inherit;text-decoration:none}
.mm-alarmbar.route-only .mm-route-btn{margin-right:0}
.mm-day:not(.is-off) .mm-alarmbar{flex-wrap:wrap;row-gap:4px}

/* Weer in de datumkolom: icoon boven de temperatuur */
.mm-day-wx{flex-direction:column;gap:2px}
.mm-day-wx .ico{width:22px;height:22px}

/* Datumkolom groter nu de Route-knop eruit is: dag, dagnummer en maand */
.mm-day{grid-template-columns:66px 1fr}
.mm-dow{font-size:.8rem}
.mm-dnum{font-size:2rem;margin:1px 0}
.mm-mon{font-size:.82rem}
.mm-rel{font-size:.62rem}
.mm-day.is-off .mm-dnum{font-size:1.45rem}
@media (max-width:480px){
  .mm-day{grid-template-columns:60px 1fr}
  .mm-dnum{font-size:1.85rem}
}

/* Adres in de dagkaart: groen en vet, straat én plaats (licht thema helderder groen, donker thema = kleur van de vertrektijd) */
:root{--addr:#256b45}
html[data-theme="dark"]{--addr:var(--g-text)}
.mm-job-addr{color:var(--addr)}
.mm-job-place{font-weight:700;color:var(--addr)}

/* Kleuren en logo van Man & Mach (rood #b90448 en groen #003e23, uit het logo):
   bovenbalk in het logogroen met het echte logo, "vandaag" in het logorood */
:root{--brand-red:#b90448;--brand-green:#003e23;--red:#b90448;--green:#003e23}
.logo-mark.is-img{gap:0}
.logo-mark.is-img img{display:block;height:26px;width:auto}
.topbar .logo-mark.is-img{padding:3px 4px}
.login-header .logo-mark.big.is-img{padding:6px 8px}
.login-header .logo-mark.big.is-img img{height:56px}
.mm-day.is-today{border-color:var(--brand-red);box-shadow:0 0 0 1px var(--brand-red),var(--sh)}
.mm-day.is-today .mm-day-date{background:var(--brand-red);border-right-color:var(--brand-red)}

/* Bovenbalk in het grijs van de planning (geen groen vlak); logo zonder wit vlak, één geheel met de balk.
   iPhone-app in licht thema: donkere strook achter de statusbalk, anders is de witte klok onleesbaar. */
.topbar{background:var(--bg);color:var(--text);border-bottom:1px solid var(--border);box-shadow:none}
html:not([data-theme="dark"]) .topbar{box-shadow:inset 0 env(safe-area-inset-top,0px) 0 0 #111411}
.topbar .logo-mark.is-img{background:none;padding:0;border-radius:0}
.topbar .logo-mark.is-img img{height:30px}
.topbar .logo-brand{color:var(--text)}
.topbar .logo-sub,html[data-theme="dark"] .topbar .logo-sub{color:var(--muted)}
.topbar .week-chip,html[data-theme="dark"] .topbar .week-chip{background:var(--surface);border-color:var(--border);color:var(--text2)}
.topbar .user-chip{border-color:var(--border2);color:var(--text2)}
.topbar .icon-btn{color:var(--text2)}
.topbar .icon-btn:hover,.topbar .icon-btn.active{background:var(--light);color:var(--text)}
.topbar #btn-notify.active::after{box-shadow:0 0 0 2px var(--bg)}
.topbar .btn-logout{border-color:var(--border2);color:var(--text2)}
.topbar .btn-logout:hover{background:var(--g-strong);border-color:var(--g-strong);color:#fff}

/* Complete planning: elke dag in dezelfde vorm als Mijn planning (datumkolom met weer, adres groen en vet,
   alles in het midden, Route-knop onderaan). In de harmonica zonder eigen kaartrand: dagen onder elkaar met een lijn. */
.acc-body{padding:0}
.acc .mm-day{border:0;border-radius:0;box-shadow:none;border-top:1px solid var(--border)}
.acc .mm-day:first-child{border-top:0}
.acc .mm-day.is-today{border-color:var(--border);box-shadow:none}
.acc .acc-assist{text-align:center;margin-bottom:3px}

/* Complete planning: Route-knop in de datumkolom (onder datum en weer; op "vandaag" wit), bellen naast de naam van de DTA */
.acc .mm-day-route{display:block;margin-top:8px;text-decoration:none}
.acc .mm-day-route .mm-route-btn{margin-right:0}
.acc .mm-day-route:active .mm-route-btn{transform:scale(.95)}
.acc .mm-day.is-today .mm-route-btn{background:#fff;color:var(--brand-green)}
.acc>summary .acc-call{flex-shrink:0}

/* Voor jou (alleen beheerder): weeralarm bij alle klussen van de komende 7 dagen */
.mm-foryou{background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--sh);padding:12px 14px 10px;margin-bottom:12px}
.fy-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin-bottom:6px}
.fy-tag{flex-basis:100%;font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.fy-head h2{margin:0;font-size:1.02rem;font-weight:800;letter-spacing:-.01em;color:var(--text)}
.fy-sub{font-size:.76rem;font-weight:600;color:var(--muted)}
.fy-list{list-style:none;margin:0;padding:0}
.fy-list li{display:grid;grid-template-columns:78px 1fr;gap:8px;padding:8px 0;border-top:1px solid var(--border)}
.fy-day{font-size:.84rem;font-weight:800;color:var(--text);padding-top:1px}
.fy-it{display:block;font-size:.84rem;line-height:1.45;color:var(--text2)}
.fy-it+.fy-it{margin-top:3px}
.fy-it b{color:var(--warn);font-weight:800}
.fy-it .ico{color:var(--warn);vertical-align:-2px}
.fy-calm{display:flex;align-items:center;gap:6px;margin:2px 0 4px;font-size:.86rem;font-weight:600;color:var(--muted)}
.fy-calm .ico{color:var(--g-text)}
.fy-more{display:inline-flex;align-items:center;gap:3px;margin-top:6px;font-size:.78rem;font-weight:700;color:var(--muted);text-decoration:none}
.fy-more:hover{color:var(--text)}

/* Label "gewijzigd": na het publiceren veranderd, tot de medewerker op OK tikt */
.mm-day.is-changed{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--sh)}
.mm-changed{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-basis:100%;margin:-2px 0 10px;padding:7px 8px 7px 10px;border-radius:10px;background:rgba(185,4,72,.08);text-align:left}
html[data-theme="dark"] .mm-changed{background:rgba(240,69,127,.14)}
.mc-tag{font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:999px;padding:3px 8px;flex-shrink:0}
.mc-text{flex:1;min-width:0;font-size:.84rem;line-height:1.35;color:var(--text)}
.mc-text b{font-weight:800}
.mc-more{color:var(--muted);font-weight:600;white-space:nowrap}
.mc-ok{flex-shrink:0;min-height:30px;padding:0 12px;border:1px solid var(--accent);border-radius:8px;background:transparent;color:var(--accent);font-family:inherit;font-size:.8rem;font-weight:800;cursor:pointer}
.mc-ok:hover{background:var(--accent);color:#fff}
.mm-day.is-off .mm-changed{margin:0}

/* Reistijd & wekker: keuze navigatie-app */
.prefs-nav{margin-top:14px}
.prefs-opts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:4px}
.prefs-opt{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.95rem;cursor:pointer}
.prefs-opt input{width:18px;height:18px;accent-color:var(--g-strong)}

/* ── Telefoon: bovenbalk en menu ───────────────────────────── */
@media (max-width:900px){
  .content{padding:18px 14px calc(28px + env(safe-area-inset-bottom,0px))}
  .sidebar{width:min(300px,86vw);padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));overflow-y:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:640px){
  .topbar #btn-theme,.topbar .btn-logout{display:none}
  .sb-actions{display:flex}
  .page-head h1{font-size:1.45rem}
}
@media (max-width:480px){
  .topbar{gap:6px}
  .logo-text{display:flex}
  dialog .grid-cols-2{grid-template-columns:1fr}
  form .grid-cols-3{grid-template-columns:1fr 1fr}
  form .grid-cols-3>:first-child{grid-column:1/-1}
}

/* ── Inloggen ──────────────────────────────────────────────── */
.login-page,html[data-theme="dark"] .login-page{background:var(--topbar)}
.login-wrap>p{color:rgba(255,255,255,.6)!important}
.login-header .login-brand,.login-header .login-brand span,html[data-theme="dark"] .login-brand span{color:#fff}
.login-header .login-tagline{color:rgba(255,255,255,.7)}
.login-header .logo-mark.big{background:#fff;padding:4px;border-radius:14px;gap:3px}
.login-card{border-radius:18px;border:0}
.login-card h2{font-weight:800}
.btn-login{min-height:48px;border-radius:12px;background:var(--g-strong);font-weight:800}
.btn-login:hover{background:var(--g-strong-2)}
.login-page>.icon-btn{background:rgba(255,255,255,.12);border-color:transparent;color:#fff}

@media print{
  .mob-plan,.mob-switch,.sb-actions{display:none!important}
  .matrix thead th.today,.matrix thead th.today .day-num,.matrix thead th.today .holiday-name{color:#000}
}