/* Versie 2 van de indeling, alleen voor de echte app (index.html heeft class="v2"; de demo laadt dit bestand niet).
   Licht, menu links op laptop, menubalk onderin op telefoon, kaartjes bovenaan Vandaag. */
html.v2{
  --bg:#F6F7F9; --sunk:#F2F4F7; --line:#E4E7EC; --line2:#D0D5DD;
  --accent:#2563EB; --accent-ink:#FFFFFF; --accent-soft:#EAF1FE; --link:#1D4ED8;
  --zijbalk:236px;
  --ico-vandaag:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9' rx='1.5'/><rect x='14' y='3' width='7' height='5' rx='1.5'/><rect x='14' y='12' width='7' height='9' rx='1.5'/><rect x='3' y='16' width='7' height='5' rx='1.5'/></svg>");
  --ico-planning:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>");
  --ico-klanten:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='4'/><path d='M2 21c0-4 3-6 7-6s7 2 7 6M16 4a4 4 0 0 1 0 8M22 21c0-3-2-5-4-5.5'/></svg>");
  --ico-werkbonnen:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4' width='14' height='17' rx='2'/><path d='M9 4V3h6v1M9 11l2 2 4-4M9 17h6'/></svg>");
  --ico-offertes:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h9l4 4v14H6z'/><path d='M14 3v5h5M9 13h7M9 17h5'/></svg>");
  --ico-team:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 4-6 8-6s8 2 8 6'/></svg>");
  --ico-instellingen:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9 7 7M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1'/></svg>");
}
html.v2 body{background:var(--bg)}

/* ---------- menu links (laptop) ---------- */
html.v2 .top{position:fixed;top:0;left:0;bottom:0;width:var(--zijbalk);border-bottom:0;border-right:1px solid var(--line);z-index:15;overflow-y:auto}
html.v2 .top .in{max-width:none;margin:0;padding:18px 12px 14px;min-height:100%;display:flex;flex-direction:column;gap:20px}
html.v2 .merk{padding:2px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
html.v2 .merk h1{font-size:.95rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;overflow-wrap:anywhere}
html.v2 .merk .d{font-size:.8rem;color:var(--muted)}
html.v2 .nav{flex-direction:column;gap:2px;overflow:visible;margin:0;padding:0}
html.v2 .nav button{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;border-bottom:0;font-size:.93rem;font-weight:500;color:var(--ink)}
html.v2 .nav button::before{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
html.v2 .nav button:hover{background:var(--sunk)}
html.v2 .nav button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
html.v2 .nav .c{margin-left:auto}
html.v2 .nav button[aria-selected="true"] .c:not(.alert){background:rgba(255,255,255,.2);color:#FFFFFF;border-color:transparent}
html.v2 .nav [data-tab="vandaag"]{--ico:var(--ico-vandaag)}
html.v2 .nav [data-tab="planning"]{--ico:var(--ico-planning)}
html.v2 .nav [data-tab="klanten"]{--ico:var(--ico-klanten)}
html.v2 .nav [data-tab="werkbonnen"]{--ico:var(--ico-werkbonnen)}
html.v2 .nav [data-tab="offertes"]{--ico:var(--ico-offertes)}
html.v2 .nav [data-tab="team"]{--ico:var(--ico-team)}
html.v2 .nav [data-tab="instellingen"]{--ico:var(--ico-instellingen)}
html.v2 .voet{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:12px 4px 0;border-top:1px solid var(--line)}
html.v2 .voet #wie{font-size:.82rem;color:var(--muted);padding:0 8px}
html.v2 .voet .btn{width:100%;justify-content:center}

/* ---------- inhoud ---------- */
html.v2 .main{margin:0 0 0 var(--zijbalk);max-width:none;padding:28px clamp(16px,3.5vw,44px) 100px}
html.v2 .view{max-width:1180px;margin:0 auto}
html.v2 .vhead h2{font-size:1.55rem;font-weight:700}
html.v2 .panel{border-radius:10px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
html.v2 .phead{padding:13px 16px}

/* kaartjes bovenaan Vandaag */
.kaartjes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kaartje{all:unset;box-sizing:border-box;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 2px rgba(16,24,40,.04);display:flex;flex-direction:column}
.kaartje:hover{border-color:var(--line2)}
.kaartje:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.kaartje h3{font-size:.92rem;font-weight:650;padding:11px 14px;border-bottom:1px solid var(--line)}
.kaartje .w{display:grid;grid-template-columns:1fr 1fr;flex:1}
.kaartje .w > div{padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.kaartje .w > div + div{border-left:1px solid var(--line)}
.kaartje .w span{font-size:.78rem;color:var(--muted)}
.kaartje .w b{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.kaartje.alert .w b:first-of-type{color:var(--alert)}
@media (max-width:1100px){.kaartjes{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- telefoon: balk bovenin, menu onderin ---------- */
@media (max-width:800px){
  html.v2 .top{position:sticky;top:0;bottom:auto;width:auto;border-right:0;border-bottom:1px solid var(--line);overflow:visible}
  html.v2 .top .in{flex-direction:row;align-items:center;gap:10px;padding:10px 14px;min-height:0}
  html.v2 .merk{flex:1;padding:0}
  html.v2 .merk h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.v2 #datum,html.v2 #wie{display:none}
  html.v2 .voet{margin:0;flex-direction:row;align-items:center;gap:6px;padding:0;border-top:0}
  html.v2 .voet .btn{width:auto;min-height:32px;padding:0 10px;font-size:.82rem}
  html.v2 .nav{position:fixed;left:0;right:0;bottom:0;z-index:16;flex-direction:row;gap:2px;background:var(--surface);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  html.v2 .nav button{position:relative;flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:3px;padding:6px 2px;border-radius:10px;font-size:.66rem;text-align:center}
  html.v2 .nav button::before{width:22px;height:22px}
  html.v2 .nav button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}
  html.v2 .nav button:hover{background:transparent}
  html.v2 .nav button[aria-selected="true"]:hover{background:var(--accent-soft)}
  html.v2 .nav .c{position:absolute;top:1px;left:calc(50% + 5px);margin:0;font-size:.6rem;min-width:16px;padding:0 4px}
  html.v2 .nav button[aria-selected="true"] .c:not(.alert){background:var(--accent);color:#FFFFFF}
  html.v2 .main{margin:0;padding:16px 14px 150px}
  html.v2 .vhead h2{font-size:1.3rem}
  html.v2 .mic{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  html.v2 .toast{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .kaartjes{gap:10px}
  .kaartje h3{padding:9px 12px;font-size:.86rem}
  .kaartje .w > div{padding:8px 12px}
  .kaartje .w b{font-size:1.05rem}
}

/* kop van de takenlijst met de knop + Taak */
html.v2 .tasks>.lbl{display:flex;justify-content:space-between;align-items:center;gap:10px}
html.v2 #nieuwtaak .kort{display:none}
@media (max-width:800px){html.v2 #nieuwtaak .lang{display:none}html.v2 #nieuwtaak .kort{display:inline}}