/* Layout: zakelijke werkplek. Witte kopbalk met tabbladen, inhoud in twee kolommen op laptop, één kolom op telefoon.
   Neutraal grijs, één donkere hoofdkleur (antraciet), kleur alleen voor status. Panelen openen rechts of van onder. */
:root{
  --bg:#F4F5F6; --surface:#FFFFFF; --sunk:#F7F8F9; --ink:#1C2226; --muted:#5E6A71; --line:#E1E5E8; --line2:#CDD3D7;
  --ral:#2B3236; --onral:#FFFFFF; --accent:#2B3236; --accent-ink:#FFFFFF; --accent-soft:#F1F3F4; --link:#1F5F86;
  --warn:#B26A00; --warn-soft:#FFF6E5; --alert:#C0352B; --alert-soft:#FDECEA; --ok:#23784F; --ok-soft:#EAF5EF;
  --shade:rgba(15,20,23,.35);
  --f-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111416; --surface:#181C1F; --sunk:#1D2124; --ink:#E8ECEE; --muted:#9AA4AA; --line:#2A3034; --line2:#384046;
  --ral:#E8ECEE; --onral:#111416; --accent:#E8ECEE; --accent-ink:#111416; --accent-soft:#22272A; --link:#7DB6D9;
  --warn:#E0A33A; --warn-soft:#2E2617; --alert:#EC7A6E; --alert-soft:#33201E; --ok:#5FBF8C; --ok-soft:#1A2C23;
  --shade:rgba(0,0,0,.6); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111416; --surface:#181C1F; --sunk:#1D2124; --ink:#E8ECEE; --muted:#9AA4AA; --line:#2A3034; --line2:#384046;
  --ral:#E8ECEE; --onral:#111416; --accent:#E8ECEE; --accent-ink:#111416; --accent-soft:#22272A; --link:#7DB6D9;
  --warn:#E0A33A; --warn-soft:#2E2617; --alert:#EC7A6E; --alert-soft:#33201E; --ok:#5FBF8C; --ok-soft:#1A2C23;
  --shade:rgba(0,0,0,.6); color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);margin:0;line-height:1.25;letter-spacing:-.01em}
small{font-size:.85em}
.lbl{font-size:.78rem;font-weight:600;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.hint{font-size:.82rem;color:var(--muted)}
.hide-sm{}

/* status: tekst met bolletje */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:500;color:var(--muted);white-space:nowrap}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.chip.warn::before{background:var(--warn)} .chip.alert::before{background:var(--alert)} .chip.neutral::before{background:var(--line2)}
.chip.alert{color:var(--alert)}

/* knoppen */
.btn{all:unset;box-sizing:border-box;cursor:pointer;min-height:36px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:6px;font-weight:600;font-size:.88rem;white-space:nowrap;border:1px solid transparent}
.btn.pri{background:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{opacity:.9}
.btn.sec{background:var(--surface);border-color:var(--line2);color:var(--ink)}
.btn.sec:hover{background:var(--sunk)}
.btn.link{color:var(--link);padding:0 2px;min-height:30px;font-weight:500}
.btn.link:hover{text-decoration:underline}
.btn.sm{min-height:32px;padding:0 12px;font-size:.84rem}
.btn .ic{display:none}

/* kopbalk */
.top{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:15}
.top .in{max-width:1200px;margin:0 auto;padding:10px 16px 0;display:flex;flex-direction:column;gap:6px}
.top .r1{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.top h1{font-size:1.05rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.top .d{font-size:.85rem;color:var(--muted)}
.top .sp{flex:1}
.top .demo{font-size:.72rem;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
.rol{display:flex;align-items:center;gap:0;flex-wrap:wrap;font-size:.8rem}
.rol span{color:var(--muted);margin-right:8px}
.rol button{all:unset;cursor:pointer;padding:4px 10px;border:1px solid var(--line2);font-size:.8rem;color:var(--muted)}
.rol button+button{border-left:0}
.rol button:first-of-type{border-radius:5px 0 0 5px}
.rol button:last-of-type{border-radius:0 5px 5px 0}
.rol button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.nav{display:flex;gap:4px;overflow-x:auto;margin-top:2px}
.nav button{all:unset;cursor:pointer;padding:10px 12px;color:var(--muted);font-weight:500;font-size:.92rem;white-space:nowrap;border-bottom:2px solid transparent}
.nav button:hover{color:var(--ink)}
.nav button[aria-selected="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.nav .c{display:inline-block;margin-left:6px;min-width:18px;padding:0 5px;border-radius:9px;font-size:.72rem;font-weight:600;background:var(--sunk);color:var(--muted);text-align:center;border:1px solid var(--line)}
.nav .c.alert{background:var(--alert);color:#FFFFFF;border-color:var(--alert)}

/* indeling */
.main{max-width:1200px;margin:0 auto;padding-inline:16px;padding-block:20px 100px}
.view{display:flex;flex-direction:column;gap:16px}
.vhead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.vhead h2{font-size:1.35rem;font-weight:650}
.vhead p{margin:2px 0 0;color:var(--muted);font-size:.92rem}
.cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;min-width:0}
.phead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line)}
.phead h3{font-size:.95rem;font-weight:650}
.phead .n{font-size:.8rem;color:var(--muted)}
.side{display:flex;flex-direction:column;gap:16px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.tile{padding:12px 16px;display:flex;flex-direction:column;gap:2px}
.tile+.tile{border-left:1px solid var(--line)}
.tile b{font-size:1.4rem;font-weight:650;font-variant-numeric:tabular-nums;line-height:1.2}
.tile span{color:var(--muted);font-size:.82rem}
.tile.alert b{color:var(--alert)} .tile.warn b{color:var(--warn)} .tile.ok b{color:var(--ok)}

/* tijdwinst */
.won{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:6px;padding:10px 14px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:.9rem}
.won b{font-weight:650}
.won span{color:var(--muted)}

/* taken */
.tasks{display:flex;flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tasks>.lbl{padding:11px 14px;border-bottom:1px solid var(--line);font-size:.95rem;font-weight:650;color:var(--ink)}
.task{padding:14px;display:flex;flex-direction:column;gap:8px;border-left:3px solid var(--warn)}
.task+.task{border-top:1px solid var(--line)}
.task.alert{border-left-color:var(--alert)}
.task .tt{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.task .tt b{font-size:.98rem;font-weight:600}
.task .who{color:var(--muted);font-size:.86rem;margin-top:1px}
.why{margin:0;color:var(--ink);font-size:.88rem;opacity:.85}
.task .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:2px}
.ctx{display:grid;grid-template-columns:max-content 1fr;gap:3px 12px;font-size:.86rem}
.ctx dt{color:var(--muted)} .ctx dd{margin:0}
.alldone{padding:22px;text-align:center;color:var(--ok);font-weight:600}
.donelist{display:flex;flex-direction:column;gap:3px;font-size:.84rem;color:var(--muted);padding:10px 14px;border-top:1px solid var(--line)}
.donelist s{color:var(--ink)}

/* lijsten rechts */
.mini{list-style:none;margin:0;padding:6px 14px 10px;display:flex;flex-direction:column}
.mini li{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:6px 0;font-size:.88rem}
.mini li+li{border-top:1px solid var(--line)}
.mini .when{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.autol{list-style:none;margin:0;padding:8px 14px 12px;display:flex;flex-direction:column;gap:8px}
.autol li{display:grid;grid-template-columns:14px 1fr;gap:6px;font-size:.88rem}
.autol i{font-size:0;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-top:6px}
.autol small{display:block;color:var(--muted);font-size:.8rem}
.log{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.log li{display:grid;grid-template-columns:14px 64px 1fr;gap:8px;font-size:.86rem;align-items:baseline;padding:5px 0}
.log li+li{border-top:1px solid var(--line)}
.log .i{font-size:0}
.log .i::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--line2)}
.log .i.ok::before{background:var(--ok)}
.log .i.pl::before{background:transparent;border:1.5px solid var(--muted);width:6px;height:6px}
.log .d{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.log li.uit{opacity:.45;text-decoration:line-through}
.panel>.log{padding:0 14px 8px!important}

/* zoeken en filters */
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line2);border-radius:6px;padding:7px 10px;flex:1 1 220px;min-width:0;color:var(--muted)}
.search input{all:unset;width:100%;min-width:0;color:var(--ink)}
.filters{display:flex;gap:4px;overflow-x:auto}
.f{all:unset;cursor:pointer;white-space:nowrap;padding:5px 10px;border-radius:5px;font-size:.84rem;color:var(--muted);border:1px solid transparent}
.f:hover{background:var(--sunk)}
.f[aria-pressed="true"]{background:var(--accent-soft);color:var(--ink);font-weight:600;border-color:var(--line2)}
.f span{font-size:.75rem;opacity:.7;margin-left:4px}

/* tabellen */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-weight:600;font-size:.76rem;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--sunk)}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
tr.click{cursor:pointer} tr.click:hover td{background:var(--sunk)}
td .nm{font-weight:600;display:block} td small{color:var(--muted)}
.bar{display:grid;grid-template-columns:repeat(11,1fr);gap:2px;min-width:110px}
.bar i{height:4px;border-radius:1px;background:var(--line)}
.bar i.d{background:var(--ink);opacity:.55} .bar i.n{background:var(--ink)}
.days{position:relative;height:4px;border-radius:2px;background:var(--line);min-width:100px;overflow:hidden}
.days i{position:absolute;inset:0 auto 0 0;background:var(--ok)}
.days.warn i{background:var(--warn)} .days.alert i{background:var(--alert)}
.stripe{width:3px;padding:0!important}
.stripe span{display:block;width:3px;height:40px;background:transparent}
.stripe.warn span{background:var(--warn)} .stripe.alert span{background:var(--alert)}
.steps5{display:flex;gap:10px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.steps5 span{display:inline-flex;align-items:center;gap:5px}
.steps5 span::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--line2)}
.steps5 span.ok{color:var(--ink)}
.steps5 span.ok::before{background:var(--ok);border-color:var(--ok)}

/* planning */
.dayhead{font-weight:650;font-size:.88rem;padding:10px 14px 4px;border-top:1px solid var(--line);color:var(--muted)}
.dayhead:first-of-type{border-top:0}
.plan{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:8px 14px;font-size:.9rem}
.plan .when{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.job{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:12px}
.job .jt{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.job .when{font-size:.82rem;color:var(--muted);font-weight:600}
.job h3{font-size:1.1rem!important;font-weight:650}
.job .acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.job .acts .wide{grid-column:1 / -1}
.tasks .job{border:0;border-radius:0}
.tasks .job+.job{border-top:1px solid var(--line)}

/* paneel */
.shade{position:fixed;inset:0;background:var(--shade);z-index:20}
.sheet{position:fixed;top:0;right:0;bottom:0;z-index:21;width:min(520px,100%);background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.shead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.shead h3{font-size:1.15rem;font-weight:650}
.shead p{margin:2px 0 0;color:var(--muted);font-size:.86rem}
.x{all:unset;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:6px;color:var(--muted);flex:none}
.x:hover{background:var(--sunk);color:var(--ink)}
.sbody{overflow-y:auto;padding:16px 18px 24px;display:flex;flex-direction:column;gap:20px}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.next{border:1px solid var(--line2);border-left:3px solid var(--warn);border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.next b{font-weight:600}
.next small{display:block;color:var(--muted);font-size:.84rem;margin-top:2px}
.autonote{font-size:.86rem;color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:6px;padding:9px 12px}
.money{display:flex;flex-direction:column;margin-top:6px;border:1px solid var(--line);border-radius:6px}
.money div{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 10px;font-size:.88rem}
.money div+div{border-top:1px solid var(--line)}
.steps{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.steps button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:5px 6px;border-radius:5px;font-size:.88rem}
.steps button:hover{background:var(--sunk)}
.steps .m{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;font-size:.6rem;color:var(--surface)}
.steps .d .m{background:var(--ink);border-color:var(--ink)}
.steps .n .m{border-color:var(--ink);border-width:2px}
.steps .n{font-weight:600} .steps .t{color:var(--muted)}
.steps .dt{font-size:.75rem;color:var(--muted)}
.spec{font-size:.86rem;background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:9px 11px;display:flex;flex-direction:column;gap:2px;margin-top:6px}
.notes{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.note{border-left:2px solid var(--line2);padding:0 0 0 10px;font-size:.88rem}
.note .d{display:block;font-size:.75rem;color:var(--muted)}
textarea,input[type=text],input[type=tel],input[type=number]{width:100%;background:var(--surface);border:1px solid var(--line2);border-radius:6px;padding:8px 10px;resize:vertical}
.remind{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.planned{display:flex;flex-direction:column;margin-top:8px;font-size:.86rem;border:1px solid var(--line);border-radius:6px}
.planned div{display:flex;justify-content:space-between;gap:10px;padding:7px 10px}
.planned div+div{border-top:1px solid var(--line)}
.planned span:last-child{font-size:.78rem;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:5px}
.field label,.field .fl{font-weight:600;font-size:.86rem}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opts .f{border-color:var(--line2)}
.formfoot{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;background:var(--ink);color:var(--surface);border-radius:6px;padding:10px 14px;font-size:.88rem;width:min(460px,calc(100% - 32px));text-align:center}

/* inspreken */
.fab{all:unset;position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:16;cursor:pointer;display:flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:.92rem;padding:11px 16px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.fab .dot{width:9px;height:9px;border-radius:50%;background:var(--alert)}
.rec{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 16px;text-align:center}
.rec .big{width:64px;height:64px;border-radius:50%;background:var(--alert);display:grid;place-items:center;color:#FFFFFF;font-size:0;animation:puls 1.4s ease-in-out infinite}
@keyframes puls{50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.rec .big{animation:none}}
.rec .tijd{font-size:1.3rem;font-variant-numeric:tabular-nums}
.rec .tr{color:var(--muted);max-width:40ch}
.begrepen{border:1px solid var(--line2);border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.begrepen ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.begrepen li{display:grid;grid-template-columns:90px 1fr;gap:8px;font-size:.9rem;padding:5px 0}
.begrepen li+li{border-top:1px solid var(--line)}
.begrepen li span:first-child{font-size:.8rem;color:var(--muted)}
.who-tag{font-size:.75rem;color:var(--muted)}
.rights td,.rights th{text-align:center}
.rights td:first-child,.rights th:first-child{text-align:left}

/* automatisch */
.switch{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:.84rem;color:var(--muted)}
.switch i{width:32px;height:18px;border-radius:9px;background:var(--line2);position:relative;transition:background .15s}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#FFFFFF;transition:left .15s}
.switch[aria-checked="true"] i{background:var(--ok)}
.switch[aria-checked="true"] i::after{left:16px}
@media (prefers-reduced-motion:reduce){.switch i,.switch i::after{transition:none}}
.rules{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.rule{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.rule+.rule{border-top:1px solid var(--line)}
.rule .rh{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.rule .rh b{font-size:.94rem;font-weight:600}
.rule .rh small{display:block;color:var(--muted);font-size:.82rem}
.rule.off b{color:var(--muted)}
.mail{background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:12px 14px;font-size:.9rem;white-space:pre-line}
.mail .ph{background:var(--accent-soft);border:1px solid var(--line2);border-radius:3px;padding:0 4px;font-size:.84rem}

/* offertes */
.ofhead{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:6px;padding:10px 12px;font-size:.86rem;color:var(--muted)}
.ofhead b{color:var(--ink);font-weight:600}
.oftab{width:100%;border-collapse:collapse;font-size:.88rem}
.oftab th{font-size:.74rem;font-weight:600;color:var(--muted);text-align:left;padding:6px 4px;border-bottom:1px solid var(--line);background:none}
.oftab td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.oftab td.r,.oftab th.r{text-align:right}
.oftab input{width:80px;text-align:right;padding:5px 6px;font-variant-numeric:tabular-nums}
.oftab input.qty{width:50px}
.oftab input.leeg{border-color:var(--alert)}
.oftab .bron{display:block;font-size:.74rem;color:var(--muted);margin-top:2px}
.oftab .bron.leeg{color:var(--alert);font-weight:600}
.posten{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px}
.posten label{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;font-size:.88rem;padding:8px 10px;cursor:pointer}
.posten label+label{border-top:1px solid var(--line)}
.tot{display:grid;grid-template-columns:1fr auto;gap:4px 16px;font-size:.9rem;border-top:1px solid var(--line);padding-top:10px}
.tot span:nth-child(odd){color:var(--muted)}
.tot span:nth-child(even){text-align:right;font-variant-numeric:tabular-nums}
.tot .big{font-size:1.15rem;font-weight:700;color:var(--ink)}
.warnbar{border:1px solid var(--alert);border-left-width:3px;color:var(--alert);border-radius:6px;padding:8px 10px;font-size:.86rem}
.paper{background:#FFFFFF;color:#1C2226;border:1px solid var(--line2);border-radius:4px;padding:22px 20px;display:flex;flex-direction:column;gap:14px;font-size:.9rem}
.paper .brand{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;border-bottom:2px solid #1C2226;padding-bottom:10px}
.paper .brand b{font-size:1.15rem;letter-spacing:.06em}
.paper table{width:100%;border-collapse:collapse;font-size:.88rem}
.paper td{padding:6px 2px;border-bottom:1px solid #E1E5E8;vertical-align:top;background:none}
.paper td.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.paper .sm{color:#5E6A71;font-size:.8rem}
.paper .akk{border:1px solid #CDD3D7;border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:8px}
.paper .akk input[type=text]{background:#FFFFFF;color:#1C2226;border:1px solid #CDD3D7}
.paper .akk label{display:flex;gap:8px;align-items:flex-start;font-size:.86rem}
.paper .akk .btn.pri{background:#23784F;color:#FFFFFF}
.paper .done{border:1px solid #23784F;color:#23784F;border-radius:6px;padding:12px;font-weight:600}

@media (max-width:880px){
  .cols{grid-template-columns:1fr}
  .sheet{top:auto;left:0;width:100%;max-height:90%;border-left:0;border-top:1px solid var(--line);border-radius:10px 10px 0 0}
  .hide-sm{display:none}
}
@media (max-width:520px){
  .tiles{grid-template-columns:1fr}
  .tile+.tile{border-left:0;border-top:1px solid var(--line)}
  .quick{grid-template-columns:1fr 1fr 1fr}
}

/* ---- aanvullingen voor de echte app ---- */
.login{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px 16px;overflow-y:auto}
.lbox{width:min(400px,100%);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:28px 24px;display:flex;flex-direction:column;gap:16px}
.lbox .merk{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:1.05rem;border-bottom:2px solid var(--ink);padding-bottom:10px}
.lbox h2{font-size:1.3rem;font-weight:650}
.lbox p{color:var(--muted);font-size:.9rem;margin:0}
.lbox .btn{width:100%;min-height:42px;font-size:.95rem}
.mailok{border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:6px;padding:12px;font-size:.9rem}
.autocats{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;margin-top:6px}
.autocats label{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start;padding:8px 10px;font-size:.88rem;cursor:pointer}
.autocats label+label{border-top:1px solid var(--line)}
.autocats small{display:block;color:var(--muted);font-size:.78rem}
.autocats input{margin-top:3px}
select{width:100%;background:var(--surface);border:1px solid var(--line2);border-radius:6px;padding:8px 10px;font:inherit;color:inherit}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.goedk{border:1px solid var(--line2);border-left:3px solid var(--link);border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.goedk pre{margin:0;white-space:pre-wrap;font:inherit;font-size:.88rem;background:var(--sunk);border-radius:6px;padding:10px}
.leeg{padding:18px 14px;color:var(--muted);font-size:.9rem}
.fout{color:var(--alert);font-size:.86rem}
.laden{padding:40px 16px;text-align:center;color:var(--muted)}
.offrow{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin-top:6px}
.offrow .r1{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.btnrij{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Belletjes, instellingen ---------- */
.belknop{align-self:flex-start}
.recent{display:flex;flex-direction:column;gap:6px;background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:9px 11px}
.keuze{border:1px solid var(--line);border-radius:6px;margin:0;padding:0;display:flex;flex-direction:column}
.keuze legend{font-weight:600;font-size:.86rem;padding:0 6px;margin-left:8px}
.keuze label,.vink{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start;padding:8px 10px;font-size:.9rem;cursor:pointer}
.keuze label+label{border-top:1px solid var(--line)}
.keuze small,.vink small{display:block;color:var(--muted);font-size:.82rem}
.keuze input,.vink input{margin-top:3px}

/* inspreken: ronde knop rechtsonder en de opnameklok */
.mic{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:19;width:56px;height:56px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.mic:hover{opacity:.9}
.opn{text-align:center;align-items:center}
.opn-klok{display:inline-flex;align-items:center;gap:10px;font-size:2.2rem;font-weight:650;font-variant-numeric:tabular-nums;margin:28px 0 6px}
.opn-klok i{width:12px;height:12px;border-radius:50%;background:var(--alert);animation:opn 1.2s ease-in-out infinite}
@keyframes opn{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.opn-klok i{animation:none}}
details summary{cursor:pointer}

/* inspreken: acties in de werkstroom */
.acties{display:flex;flex-direction:column;gap:8px}
.actie{border:1px solid var(--line);border-radius:8px;padding:2px 8px 8px;background:var(--sunk)}
.actie .field{padding:0 10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:0 10px}
.grid3 .field{padding:0}
@media (max-width:600px){.grid3{grid-template-columns:1fr 1fr}.grid3 .field:last-child{grid-column:1 / -1}}

/* planning: compacte agendalijst */
.planlijst{padding:0}
.pdag{display:grid;grid-template-columns:96px 1fr;border-top:1px solid var(--line)}
.pdag:first-child{border-top:0}
.pdag-k{padding:12px 14px;display:flex;flex-direction:column;gap:1px;border-right:1px solid var(--line)}
.pdag-k b{text-transform:capitalize}
.pdag-k span{font-size:.82rem;color:var(--muted)}
.pdag-k em{font-style:normal;font-size:.72rem;font-weight:700;color:var(--ok);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.pdag.nu .pdag-k{box-shadow:inset 3px 0 0 var(--ok)}
.pdag.pleeg .pdag-k{padding:8px 14px}
.pdag.pleeg .pdag-l{padding:8px 14px}
.pdag-l{padding:4px 14px;display:flex;flex-direction:column;justify-content:center}
.afslijst{display:flex;flex-direction:column;padding:0 14px}
.afs{display:grid;grid-template-columns:118px 1fr auto;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line)}
.pdag-l .afs:first-child,.afslijst .afs:first-child{border-top:0}
.afs.klaar{opacity:.5}
.afs-t{font-variant-numeric:tabular-nums;font-weight:600;font-size:.9rem;white-space:nowrap}
.afs-i{min-width:0}
.afs-i small{display:block;color:var(--muted)}
.afs-m{color:var(--muted);font-size:.9rem}
.afs-k{padding:0;min-height:0;font-weight:600}
.afs-a{display:flex;gap:12px;white-space:nowrap}
.afs-a .btn.link{min-height:0;padding:0}
@media (max-width:640px){
  .pdag{grid-template-columns:64px 1fr}
  .pdag-k{padding:10px}
  .afs{grid-template-columns:1fr;gap:2px}
  .afs-a{margin-top:4px}
}

/* ---------- telefoon: rustiger en strakker ---------- */
.afs .afs-k{padding:0}
.sbody .afslijst{padding:0}
.field input,.field select{min-height:40px}
.pdag-k span{white-space:nowrap}
@media (max-width:640px){
  .top .in{padding:8px 12px 0;gap:2px}
  .top .r1{flex-wrap:nowrap;gap:8px}
  .top h1{font-size:.95rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #datum,#wie,.top .sp{display:none}
  .top .r1 .btn{min-height:32px;padding:0 10px;font-size:.82rem}
  .nav{gap:0;margin:0 -12px;padding:0 4px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav button{padding:10px 10px;font-size:.88rem}
  .main{padding-inline:12px;padding-block:14px 96px}
  .vhead h2{font-size:1.2rem}
  .pdag{grid-template-columns:70px 1fr}
  .pdag-k,.pdag.pleeg .pdag-k{padding:9px 10px}
  .pdag-l,.pdag.pleeg .pdag-l{padding:6px 12px}
  .pdag-k em{font-size:.62rem}
}

/* planning: weekrooster (laptop) en dagknoppen (telefoon) */
.legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--kleur)}
.s-inmeting{--kleur:#3B82C4}.s-montage{--kleur:#2F9E6A}.s-service{--kleur:#D08A1E}.s-anders{--kleur:#8A939A}
.rooster{display:grid;grid-template-columns:110px repeat(var(--dagen),minmax(0,1fr));overflow:hidden}
.rk{border-top:1px solid var(--line);border-left:1px solid var(--line);padding:8px;min-width:0}
.rk.hoek,.rk.kop{border-top:0;background:var(--sunk)}
.rk.hoek,.rk.wie{border-left:0}
.rk.kop{font-size:.85rem;color:var(--muted);text-transform:capitalize}
.rk.kop b{color:var(--ink)}
.rk.kop.nu{box-shadow:inset 0 -2px 0 var(--ok)}
.rk.kop.nu b{color:var(--ok)}
.rk.cel.nu{background:color-mix(in srgb,var(--ok) 5%,transparent)}
.rk.wie{font-weight:600;font-size:.9rem;display:flex;align-items:flex-start}
.rk.cel{display:flex;flex-direction:column;gap:6px;min-height:64px}
.leegrooster{grid-column:1 / -1;border-left:0;color:var(--muted);padding:18px 14px}
.blok{all:unset;cursor:pointer;box-sizing:border-box;display:flex;flex-direction:column;gap:1px;padding:6px 8px;border-radius:6px;background:var(--sunk);border:1px solid var(--line);border-left:4px solid var(--kleur);font-size:.8rem;line-height:1.3;min-width:0}
.blok:hover{border-color:var(--line2);border-left-color:var(--kleur)}
.blok:focus-visible{outline:2px solid var(--link)}
.blok b{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blok span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blok small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blok.klaar{opacity:.5}
.pmobiel{display:none}
.dagknoppen{display:flex;gap:6px;overflow-x:auto}
.dagknoppen button{all:unset;cursor:pointer;flex:1 0 54px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:.8rem;color:var(--muted)}
.dagknoppen button b{text-transform:capitalize;color:var(--ink);font-weight:600}
.dagknoppen button span{font-size:1.05rem;font-weight:650;color:var(--ink)}
.dagknoppen button i{font-style:normal;font-size:.72rem;min-height:1em;color:var(--link);font-weight:600}
.dagknoppen button.nu{border-color:var(--ok)}
.dagknoppen button.aan{background:var(--accent);border-color:var(--accent)}
.dagknoppen button.aan b,.dagknoppen button.aan span,.dagknoppen button.aan i{color:var(--accent-ink)}
@media (max-width:800px){
  .rooster{display:none}
  .pmobiel{display:flex;flex-direction:column;gap:12px}
}
.afs{border-left:4px solid var(--kleur,transparent);padding-left:10px}
.rk.kop{text-transform:none}
.rk.kop b{text-transform:capitalize}