/* Layout: Notion-achtige werkruimte. Zijbalk op desktop, tabbalk onderin op de telefoon, één rustige paginakolom. */
:root{
  --bg:#ffffff; --side:#f7f7f5; --fg:#37352f; --muted:#787774; --faint:#a5a29c; --line:#ebebea;
  --hover:rgba(55,53,47,.06); --press:rgba(55,53,47,.1); --callout:#f1f1ef; --sheet:#ffffff;
  --accent:#2383e2; --accent-fg:#ffffff; --danger:#e03e3e; --today:#eb5757; --scrim:rgba(15,15,15,.45);
  --shadow:0 0 0 1px rgba(15,15,15,.05),0 3px 6px rgba(15,15,15,.1),0 9px 24px rgba(15,15,15,.2);
  --t-fg:#32302c;
  --t-gray:#e3e2e0; --t-brown:#eee0da; --t-orange:#fadec9; --t-yellow:#fdecc8; --t-green:#dbeddb;
  --t-blue:#d3e5ef; --t-purple:#e8deee; --t-pink:#f5e0e9; --t-red:#ffe2dd;
  --d-gray:#9b9a97; --d-brown:#64473a; --d-orange:#d9730d; --d-yellow:#dfab01; --d-green:#0f7b6c;
  --d-blue:#0b6e99; --d-purple:#6940a5; --d-pink:#ad1a72; --d-red:#e03e3e;
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#191919; --side:#202020; --fg:#d9d9d8; --muted:#9b9b9b; --faint:#6b6b6b; --line:#2f2f2f;
  --hover:rgba(255,255,255,.055); --press:rgba(255,255,255,.1); --callout:#252525; --sheet:#252525;
  --accent:#2e8ae6; --accent-fg:#ffffff; --danger:#ff7369; --today:#eb5757; --scrim:rgba(0,0,0,.6);
  --shadow:0 0 0 1px rgba(255,255,255,.06),0 3px 6px rgba(0,0,0,.3),0 9px 24px rgba(0,0,0,.5);
  --t-fg:#ebebea;
  --t-gray:#4a4a4a; --t-brown:#603b2c; --t-orange:#854c1d; --t-yellow:#89632a; --t-green:#2b593f;
  --t-blue:#28456c; --t-purple:#492f64; --t-pink:#69314c; --t-red:#6e3630;
  --d-gray:#979a9b; --d-brown:#937264; --d-orange:#ffa344; --d-yellow:#ffdc49; --d-green:#4dab9a;
  --d-blue:#529cca; --d-purple:#9a6dd7; --d-pink:#e255a1; --d-red:#ff7369;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#191919; --side:#202020; --fg:#d9d9d8; --muted:#9b9b9b; --faint:#6b6b6b; --line:#2f2f2f;
  --hover:rgba(255,255,255,.055); --press:rgba(255,255,255,.1); --callout:#252525; --sheet:#252525;
  --accent:#2e8ae6; --accent-fg:#ffffff; --danger:#ff7369; --today:#eb5757; --scrim:rgba(0,0,0,.6);
  --shadow:0 0 0 1px rgba(255,255,255,.06),0 3px 6px rgba(0,0,0,.3),0 9px 24px rgba(0,0,0,.5);
  --t-fg:#ebebea;
  --t-gray:#4a4a4a; --t-brown:#603b2c; --t-orange:#854c1d; --t-yellow:#89632a; --t-green:#2b593f;
  --t-blue:#28456c; --t-purple:#492f64; --t-pink:#69314c; --t-red:#6e3630;
  --d-gray:#979a9b; --d-brown:#937264; --d-orange:#ffa344; --d-yellow:#ffdc49; --d-green:#4dab9a;
  --d-blue:#529cca; --d-purple:#9a6dd7; --d-pink:#e255a1; --d-red:#ff7369;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--fg);font:16px/1.5 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
svg{display:block}

.app{display:flex;min-height:100%}
.side{display:none}
.main{flex:1;min-width:0}
.page{max-width:720px;margin:0 auto;padding-block:24px 128px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Zijbalk (desktop) */
@media (min-width:860px){
  .side{display:flex;flex-direction:column;gap:2px;width:240px;flex-shrink:0;background:var(--side);
    position:sticky;top:0;height:100vh;padding:12px 8px;border-right:1px solid var(--line);overflow-y:auto}
  .page{padding-block:64px 96px;padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px))}
  .tabs{display:none!important}
}
.ws{display:flex;align-items:center;gap:8px;padding:6px 10px 12px;font-weight:600;font-size:14px}
.ws-logo{width:22px;height:22px;border-radius:5px;background:var(--fg);color:var(--bg);display:grid;place-items:center;font-size:12px;font-weight:700}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:5px 10px;border-radius:6px;font-size:14px;font-weight:500;color:var(--muted)}
.nav-item:hover{background:var(--hover)}
.nav-item.active{background:var(--press);color:var(--fg)}
.nav-item svg{width:18px;height:18px;flex-shrink:0}
.side-label{font-size:12px;font-weight:500;color:var(--faint);padding:18px 10px 4px}
.side-k{display:flex;align-items:center;gap:8px;width:100%;padding:4px 10px;border-radius:6px;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden}
.side-k:hover{background:var(--hover)}
.side-k.active{background:var(--press);color:var(--fg)}
.side-k span:last-child{overflow:hidden;text-overflow:ellipsis}
.side-k .kicon{width:20px;height:20px;font-size:11px;border-radius:4px}

/* Tabbalk (telefoon) */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0;font-size:11px;font-weight:500;color:var(--faint);text-align:center}
.tab svg{width:23px;height:23px}
.tab.active{color:var(--fg)}

/* Typografie */
.eyebrow{font-size:14px;color:var(--muted)}
h1{font-size:32px;line-height:1.2;font-weight:700;margin:2px 0 0;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
h2{font-size:20px;line-height:1.3;font-weight:600;margin:0;text-wrap:balance}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.block{margin-top:36px}
.block-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.block-head .count{margin-right:auto}
.count{font-size:14px;color:var(--faint);font-variant-numeric:tabular-nums}
.dayhead{font-size:14px;font-weight:600;color:var(--muted);margin:18px 0 2px}
.empty{color:var(--faint);font-size:15px;margin:6px 0}
.callout{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:6px;background:var(--callout);font-size:15px;margin-top:20px}
.callout svg{width:20px;height:20px;flex-shrink:0;margin-top:1px;color:var(--muted)}
.callout.warn svg{color:var(--danger)}
.loading{color:var(--faint);font-size:14px;margin-top:16px}

/* Knoppen */
.btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--accent);color:var(--accent-fg)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{color:var(--muted)}
.btn.ghost:hover{background:var(--hover)}
.btn.line{box-shadow:inset 0 0 0 1px var(--line);color:var(--fg)}
.btn.line:hover{background:var(--hover)}
.btn.danger{color:var(--danger)}
.icon-btn{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;color:var(--muted)}
.icon-btn:hover{background:var(--hover)}
.icon-btn svg{width:18px;height:18px}

/* Labels */
.tag{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:3px;font-size:13px;line-height:20px;color:var(--t-fg);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.t-gray{background:var(--t-gray)} .t-brown{background:var(--t-brown)} .t-orange{background:var(--t-orange)}
.t-yellow{background:var(--t-yellow)} .t-green{background:var(--t-green)} .t-blue{background:var(--t-blue)}
.t-purple{background:var(--t-purple)} .t-pink{background:var(--t-pink)} .t-red{background:var(--t-red)}
.b-gray{background:var(--d-gray)} .b-brown{background:var(--d-brown)} .b-orange{background:var(--d-orange)}
.b-yellow{background:var(--d-yellow)} .b-green{background:var(--d-green)} .b-blue{background:var(--d-blue)}
.b-purple{background:var(--d-purple)} .b-pink{background:var(--d-pink)} .b-red{background:var(--d-red)}

/* Rijen */
.row{display:flex;align-items:flex-start;gap:6px;padding:5px 6px;margin-inline:-6px;border-radius:6px}
.row:hover{background:var(--hover)}
.check{width:28px;height:28px;margin:-2px 0 -2px -5px;display:grid;place-items:center;flex-shrink:0}
.check .box{width:18px;height:18px;border:1.5px solid var(--faint);border-radius:3px;display:grid;place-items:center;color:#fff}
.check .box svg{width:14px;height:14px}
.done .check .box{background:var(--accent);border-color:var(--accent)}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:1px}
.row-title{font-size:16px;overflow-wrap:anywhere}
.done .row-title{color:var(--faint);text-decoration:line-through}
.row-meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:13px;color:var(--muted)}
.row-meta:empty{display:none}
.due{display:inline-flex;align-items:center;gap:4px}
.due svg{width:13px;height:13px}
.due-late{color:var(--danger)}
.prio{color:var(--danger);font-weight:700;margin-right:6px}
.row-x{width:28px;height:28px;display:grid;place-items:center;color:var(--faint);border-radius:4px;flex-shrink:0;font-size:13px;white-space:nowrap}
.row-x svg{width:14px;height:14px}
.row-x[data-armed="1"]{width:auto;padding:0 8px;color:var(--danger);background:var(--hover)}
@media (hover:hover){.row .row-x{opacity:0}.row:hover .row-x,.row .row-x:focus-visible,.row .row-x[data-armed="1"]{opacity:1}}

.event{display:flex;gap:10px;align-items:stretch;width:calc(100% + 12px);padding:6px;margin-inline:-6px;border-radius:6px}
.event:hover{background:var(--hover)}
.ev-time{width:62px;flex-shrink:0;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:1px}
.ev-bar{width:3px;border-radius:2px;flex-shrink:0}
.ev-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}

.quick{display:flex;align-items:center;gap:6px;padding:5px 0;color:var(--faint)}
.quick .plus{width:18px;display:grid;place-items:center;flex-shrink:0}
.quick .plus svg{width:16px;height:16px}
.quick input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--fg);outline:none;padding:2px 0}
.quick input::placeholder{color:var(--faint)}
.add-link{display:inline-flex;align-items:center;gap:6px;padding:5px 0;color:var(--faint);font-size:16px}
.add-link:hover{color:var(--muted)}
.add-link svg{width:16px;height:16px;margin-left:1px}

details.more{margin-top:8px}
details.more summary{cursor:pointer;color:var(--muted);font-size:14px;padding:4px 0;list-style:none;display:flex;align-items:center;gap:6px}
details.more summary::-webkit-details-marker{display:none}
details.more summary svg{width:14px;height:14px;transition:transform .15s}
details.more[open] summary svg{transform:rotate(90deg)}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.seg{display:inline-flex;padding:2px;border-radius:7px;background:var(--callout);gap:2px}
.seg button{padding:4px 10px;border-radius:5px;font-size:14px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--bg);color:var(--fg);box-shadow:0 1px 2px rgba(15,15,15,.12)}
.select{font:inherit;font-size:16px;color:var(--fg);background:var(--callout);border:0;border-radius:6px;height:32px;padding:0 8px;max-width:100%}
.group-head{display:flex;align-items:center;gap:8px;margin:28px 0 4px}

/* Agenda */
.cal-head{display:flex;align-items:center;gap:2px;margin-top:20px}
.cal-title{font-size:16px;font-weight:600;margin-right:auto}
.wds{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:8px}
.wds span{font-size:12px;color:var(--muted);text-align:center;padding:4px 0}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cell{min-height:58px;min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:4px}
.cell:hover{background:var(--hover)}
.cell .num{font-size:14px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-variant-numeric:tabular-nums}
.cell.out .num{color:var(--faint)}
.cell.sel{background:var(--press)}
.cell.sel .num{font-weight:700}
.cell.today .num{background:var(--today);color:#fff}
.dots{display:flex;gap:3px;flex-wrap:wrap;justify-content:center}
.dot{width:6px;height:6px;border-radius:50%}
.dot.task{background:none;box-shadow:inset 0 0 0 1.5px var(--faint)}
.cell-evs{display:none}
@media (min-width:860px){
  .cell{min-height:100px;align-items:stretch;padding:4px}
  .cell .num{align-self:flex-end}
  .dots{display:none}
  .cell-evs{display:flex;flex-direction:column;gap:2px;width:100%}
  .cell-ev{font-size:12px;line-height:18px;padding:0 4px;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t-fg)}
  .cell-more{font-size:12px;color:var(--muted);padding-left:4px}
}

/* Klanten */
.klist{margin-top:20px;border-top:1px solid var(--line)}
.krow{display:flex;align-items:center;gap:12px;width:100%;padding:12px 6px;border-bottom:1px solid var(--line)}
.krow:hover{background:var(--hover)}
.kicon{width:36px;height:36px;border-radius:6px;display:grid;place-items:center;font-weight:600;font-size:14px;color:var(--t-fg);flex-shrink:0;letter-spacing:.02em}
.kicon.big{width:64px;height:64px;font-size:24px;border-radius:10px}
.kmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.kname{font-weight:600;overflow-wrap:anywhere}
.ksub{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kright{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:13px;color:var(--muted);flex-shrink:0;font-variant-numeric:tabular-nums}
.crumb{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--muted);padding:2px 6px;margin-left:-6px;border-radius:4px}
.crumb:hover{background:var(--hover)}
.crumb svg{width:14px;height:14px}
.k-head{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.props{margin-top:16px;display:flex;flex-direction:column}
.prop{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;padding:5px 0;font-size:15px;align-items:baseline}
.prop>.pl{color:var(--muted);font-size:14px}
.prop .leeg{color:var(--faint)}
.prop .pv{overflow-wrap:anywhere}
@media (max-width:480px){.prop{grid-template-columns:112px minmax(0,1fr)}}
.notes{display:block;width:100%;min-height:140px;border:0;background:none;font:inherit;font-size:16px;line-height:1.6;color:var(--fg);resize:vertical;outline:none;padding:0}
.notes::placeholder{color:var(--faint)}
.saved{font-size:13px;color:var(--faint)}
.progress{height:4px;border-radius:2px;background:var(--line);overflow:hidden;flex:1;max-width:120px}
.progress i{display:block;height:100%;background:var(--d-green)}

/* Sheet */
.sheet-back{position:fixed;inset:0;background:var(--scrim);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--sheet);width:100%;max-height:92%;overflow-y:auto;border-radius:14px 14px 0 0;box-shadow:var(--shadow);
  padding:20px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  animation:sheetUp .22s ease}
@keyframes sheetUp{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media (min-width:640px){.sheet-back{align-items:center;padding:24px}.sheet{max-width:540px;border-radius:10px;padding:24px 28px}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}details.more summary svg{transition:none}}
.sheet-kind{font-size:13px;color:var(--muted)}
.sheet-title{display:block;width:100%;border:0;background:none;font:inherit;font-size:26px;font-weight:700;line-height:1.25;color:var(--fg);outline:none;padding:2px 0 8px}
.sheet-title::placeholder{color:var(--faint)}
.sheet .prop{align-items:center;padding:2px 0}
.sheet .prop input,.sheet .prop select{font:inherit;font-size:16px;color:var(--fg);background:none;border:0;border-radius:4px;padding:5px 6px;margin-left:-6px;width:100%;min-width:0;outline:none;min-height:34px}
.sheet .prop input:hover,.sheet .prop select:hover,.sheet .prop input:focus,.sheet .prop select:focus{background:var(--hover)}
.sheet .prop input::placeholder{color:var(--faint)}
.note-field{display:block;width:100%;min-height:84px;margin-top:12px;border:0;border-top:1px solid var(--line);padding:12px 0 0;background:none;font:inherit;font-size:16px;color:var(--fg);outline:none;resize:vertical}
.note-field::placeholder{color:var(--faint)}
.sheet-actions{display:flex;gap:8px;align-items:center;margin-top:16px;flex-wrap:wrap}
.spacer{flex:1}
.sheet-hint{font-size:13px;color:var(--muted);margin-top:8px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:50;
  background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:8px;font-size:14px;max-width:calc(100% - 32px);box-shadow:var(--shadow)}
@media (min-width:860px){.toast{bottom:24px}}

/* ---------- Eigen app (buiten claude.ai) ---------- */
html{height:100%}
body{margin:0;min-height:100%;padding-top:env(safe-area-inset-top,0px)}
[hidden]{display:none!important}
img{max-width:100%}
.side{top:env(safe-area-inset-top,0px);height:calc(100vh - env(safe-area-inset-top,0px))}
.side-foot{margin-top:auto}
body.uitgelogd .side,body.uitgelogd .tabs{display:none!important}

.account{margin-top:48px;font-size:13px;color:var(--faint)}
.account button{color:var(--muted);text-decoration:underline;text-underline-offset:2px}

.login{max-width:360px;margin:12vh auto 0;display:flex;flex-direction:column;gap:6px}
.login-logo{border-radius:12px;margin-bottom:12px}
.login h1{font-size:28px}
.login-sub{color:var(--muted);margin:0 0 20px}
.login-form{display:flex;flex-direction:column;gap:14px}
.login-veld{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)}
.login-veld input{font:inherit;font-size:16px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:6px;height:40px;padding:0 10px;outline:none}
.login-veld input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.login-fout{color:var(--danger);font-size:14px;margin:0}
.login-knop{height:40px;justify-content:center;font-size:15px}
.login-knop[disabled]{opacity:.6;cursor:default}

/* ---------- Uitbreiding: content, leads, cijfers, betalingen, meldingen ---------- */
.cap{}
.muted{color:var(--muted);font-weight:400}
.dot.sq,.ev-bar.sq{border-radius:1px}
.ev-bar.sq{width:3px}
.legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:8px 0 0}
.legenda span{display:inline-flex;align-items:center;gap:5px}
.hint{font-size:14px;color:var(--muted);margin:12px 0 0;max-width:65ch}
.knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pv a{color:var(--accent);text-decoration:none}
.pv a:hover{text-decoration:underline}

.menu{margin-top:20px;border-top:1px solid var(--line)}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 6px;border-bottom:1px solid var(--line);color:var(--fg)}
.menu-item:hover{background:var(--hover)}
.menu-item>svg{width:20px;height:20px;flex-shrink:0;color:var(--muted)}
.menu-item>svg:last-child{width:16px;height:16px;color:var(--faint)}

.tbl-wrap{overflow-x:auto;margin:4px 0 6px;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums;min-width:420px}
.tbl th{font-weight:500;color:var(--muted);text-align:right;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{text-align:right;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:left;padding-left:0}
.tbl tr[data-act]{cursor:pointer}
.tbl tr[data-act]:hover td{background:var(--hover)}
.up{color:var(--d-green);font-size:12px}
.down{color:var(--danger);font-size:12px}

.money{font-variant-numeric:tabular-nums;font-size:15px;color:var(--muted);padding-top:2px;flex-shrink:0}
.row.paid .check .box{background:var(--d-green);border-color:var(--d-green)}
.row.paid .money{color:var(--fg)}

@media (max-width:420px){ .tab{font-size:10px} }