/* Planner Billy: snel, groot, één hand op de telefoon. */
:root { --zwart: #000; --vlak: #141414; --rand: #2b2b2b; --bot: #eee9e1; --staal: #9a9a9a; --rood: #d7141a; --oranje: #ff6a13; --groen: #2fbf5b; --kop: 'Big Shoulders Display', Impact, sans-serif; --tekst: 'Archivo', system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #000; color: var(--bot); font: 400 16px/1.45 var(--tekst); padding-bottom: env(safe-area-inset-bottom); }
:focus-visible { outline: 3px solid var(--oranje); outline-offset: 2px; }
h1, h2 { font-family: var(--kop); font-weight: 900; text-transform: uppercase; color: #fff; line-height: 1; margin: 0 0 6px; }
h1 { font-size: 40px; } h2 { font-size: 28px; margin-top: 28px; } h3 { font-size: 16px; margin: 22px 0 8px; color: #fff; }
.merk { font: 900 26px/1 var(--kop); color: #fff; margin: 0; } .merk span { color: var(--rood); }
.pkop { position: sticky; top: 0; z-index: 10; background: #000; border-bottom: 1px solid var(--rand); padding: 12px 16px 0; padding-top: max(12px, env(safe-area-inset-top)); }
.tabs { display: flex; gap: 4px; overflow-x: auto; margin-top: 10px; }
.tabs button { flex: 1; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--staal); font: 600 15px var(--tekst); padding: 10px 6px; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: #fff; border-color: var(--rood); }
main { padding: 16px; max-width: 760px; margin: 0 auto; }
.laden, .leeg { color: var(--staal); }
.fout { color: #ff8b8b; }
.weekbalk { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; }
.pijl { background: none; border: 0; color: #fff; font-size: 30px; width: 34px; cursor: pointer; }
.weekdagen { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wd { background: var(--vlak); border: 2px solid transparent; color: var(--bot); padding: 6px 0; border-radius: 4px; cursor: pointer; text-align: center; font: 600 12px var(--tekst); }
.wd b { display: block; font: 900 24px/1 var(--kop); color: #fff; }
.wd i { display: block; font-style: normal; color: var(--oranje); min-height: 14px; font-weight: 700; }
.wd.vandaag span { color: var(--oranje); }
.wd.actief { border-color: var(--rood); }
.daghoofd { margin-bottom: 14px; }
.daghoofd p { margin: 0 0 12px; color: var(--staal); }
.dagknoppen, .knoprij { display: flex; gap: 8px; flex-wrap: wrap; }
.kn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 16px; background: var(--rood); color: #fff; border: 2px solid var(--rood); border-radius: 4px; font: 700 15px var(--tekst); text-decoration: none; cursor: pointer; }
.kn.rand { background: none; border-color: var(--rand); color: var(--bot); }
.kn.rood { background: #3a0507; border-color: var(--rood); }
.lijst-dag, .klantlijst, .logboek, .tegoedlijst { list-style: none; padding: 0; margin: 0; }
.rij { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rand); }
.rij .tijd { font: 900 22px var(--kop); color: #fff; }
.wie b { display: block; color: #fff; }
.wie span { color: var(--staal); font-size: 14px; }
.rij.vrij .tijd { color: #555; } .rij.vrij .wie span { color: #555; }
.rij.blok { background: repeating-linear-gradient(45deg, #111, #111 8px, #181818 8px, #181818 16px); }
.rij.afspr { border-left: 4px solid var(--rood); padding-left: 8px; }
.rij.st-aanwezig { border-left-color: var(--groen); }
.rij.st-noshow { border-left-color: #666; opacity: .7; }
.acties { display: flex; gap: 6px; align-items: center; }
.acties button { min-width: 44px; height: 44px; border-radius: 4px; border: 2px solid var(--rand); background: none; color: var(--bot); font-size: 18px; cursor: pointer; padding: 0 10px; }
.acties .ok { border-color: var(--groen); color: var(--groen); }
.acties .nee { border-color: #555; color: #aaa; }
.acties .meer { font-size: 14px; font-weight: 600; }
.label { font-size: 13px; color: var(--staal); }
.paneel { position: fixed; inset: 0; z-index: 30; background: #000b; display: flex; align-items: flex-end; justify-content: center; }
.paneel[hidden] { display: none; }
.paneel-binnen { position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: #0e0e0e; border-top: 3px solid var(--rood); padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 10px 10px 0 0; }
@media (min-width: 700px) { .paneel { align-items: center; } .paneel-binnen { border-radius: 6px; } }
.sluit { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; background: none; border: 0; color: #fff; font-size: 20px; cursor: pointer; }
label { display: block; margin: 12px 0; font-weight: 600; color: #fff; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; background: var(--vlak); border: 2px solid var(--rand); color: #fff; font: 400 16px var(--tekst); padding: 11px 12px; border-radius: 4px; }
.vink { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.vink input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--rood); }
.klein { font-size: 14px; color: var(--staal); }
.zoek { margin-top: 8px; }
.klantlijst li { border-bottom: 1px solid var(--rand); }
.klantlijst button, .klantlijst a { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: 14px 0; text-decoration: none; cursor: pointer; font: inherit; }
.klantlijst b { display: block; color: #fff; }
.klantlijst span { color: var(--staal); font-size: 14px; }
.tegoedlijst li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.tegoedlijst .vink { margin: 0; }
.tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tegel { background: var(--vlak); padding: 14px; border-left: 3px solid var(--rood); }
.tegel b { display: block; font: 900 32px/1 var(--kop); color: #fff; }
.tegel span { color: var(--staal); font-size: 13px; }
.logboek li { padding: 6px 0; border-bottom: 1px solid #1d1d1d; font-size: 14px; }
.logboek span { color: var(--staal); margin-right: 6px; }
.roosterrij { display: grid; grid-template-columns: 1.3fr 1fr auto 1fr; gap: 8px; align-items: center; border-bottom: 1px solid var(--rand); padding: 6px 0; }
.roosterrij .vink { margin: 0; } .roosterrij input[type=time] { margin: 0; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; background: #fff; color: #000; padding: 12px 18px; border-radius: 4px; font-weight: 700; box-shadow: 0 8px 30px #000; }
.toast.fout { background: var(--rood); color: #fff; }
.toast[hidden] { display: none; }
body.login { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.loginkaart { width: 100%; max-width: 360px; background: #0e0e0e; border-top: 3px solid var(--rood); padding: 28px 22px; }
.loginkaart button { width: 100%; min-height: 50px; background: var(--rood); color: #fff; border: 0; font: 700 16px var(--tekst); border-radius: 4px; cursor: pointer; margin-top: 8px; }
.tg-acties { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.klein-kn { min-height: 34px; padding: 0 10px; font-size: 13px; }
.status { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.status li { background: var(--vlak); padding: 12px 14px; border-left: 4px solid #555; }
.status li.aan { border-color: var(--groen); }
.status li.uit { border-color: var(--oranje); }
.status b { display: block; color: #fff; }
.status span { color: var(--staal); font-size: 14px; }
.uitleg { background: var(--vlak); padding: 14px; border-left: 3px solid var(--oranje); margin: 12px 0; }
.uitleg h2 { margin-top: 0; font-size: 22px; }
.accrij { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; }
.accrij > span b { display: block; color: #fff; }
.accrij > span span { color: var(--staal); font-size: 14px; }
.tabs button { flex: 1 0 auto; }
/* Computer: breder, meer naast elkaar */
@media (min-width: 900px) {
  .pkop { display: flex; align-items: flex-end; gap: 32px; padding: 16px 32px 0; }
  .pkop .tabs { margin-top: 0; flex: 1; max-width: 640px; }
  main { max-width: 1080px; padding: 28px 32px 48px; }
  h1 { font-size: 52px; }
  .tegels { grid-template-columns: repeat(3, 1fr); }
  .klantlijst { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .rij { grid-template-columns: 72px 1fr auto; padding: 14px 8px; }
  .wd { padding: 10px 0; } .wd b { font-size: 30px; }
  .lijst-dag .rij.vrij { opacity: .8; }
  .rooster, [data-extra] { max-width: 720px; }
}

/* 3 nov 2026: checklist */
.cl-voortgang{margin:8px 0 14px}.cl-balk{height:8px;background:#222;border-radius:4px;overflow:hidden}.cl-balk i{display:block;height:100%;background:#d7141a}
.cl-voortgang p{margin:8px 0 0;font-size:14px;color:#aaa}.cl-voortgang b{color:#fff}
.cl-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}.cl-filter button{background:none;border:1px solid #333;color:#ccc;padding:7px 12px;border-radius:999px;font:600 13px inherit;cursor:pointer}.cl-filter button.actief{background:#fff;color:#000;border-color:#fff}
.cl-groep{margin:22px 0 6px;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#888}
.cl-lijst{list-style:none;margin:0;padding:0;border-top:1px solid #222}
.cl-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #222}
.cl-vink{flex:0 0 28px;height:28px;border-radius:6px;border:2px solid #555;background:none;color:#fff;font:700 15px/1 inherit;cursor:pointer;margin-top:1px}
.cl-item.bezig .cl-vink{border-color:#f0a020;color:#f0a020}.cl-item.klaar .cl-vink{border-color:#2fb35a;background:#2fb35a}
.cl-tekst{flex:1;cursor:pointer;min-width:0}.cl-tekst b{display:block;font-weight:600;line-height:1.35}.cl-tekst span{display:block;font-size:13px;color:#888;margin-top:2px}.cl-tekst em{display:block;font-style:normal;font-size:13px;color:#bbb;margin-top:4px;white-space:pre-wrap}
.cl-item.klaar .cl-tekst b{color:#aaa}
.cl-form label{display:block;margin-bottom:12px}.cl-form textarea,.cl-form input,.cl-form select{width:100%}
@media (max-width: 520px) { .tabs { gap: 0; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs button { font-size: 14px; padding: 10px 7px; } }
/* 5 nov 2026: tab Webshop */
.ws-sub { margin-bottom: 14px; }
.ws-btab { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0 14px; }
.ws-btab th, .ws-btab td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.ws-btab td:not(:first-child), .ws-btab th:not(:first-child) { text-align: right; white-space: nowrap; }
.ws-btab tr.vet td { font-weight: 700; color: #fff; }
.ws-ptab td:nth-child(3), .ws-ptab td:nth-child(4), .ws-ptab td:nth-child(5) { text-align: center; }
.ws-ink { width: 82px; background: #0c0c0c; border: 1px solid var(--rand); color: #fff; padding: 6px; font: inherit; }
.ws-maand { background: var(--vlak); margin-bottom: 8px; padding: 10px 12px; }
.ws-maand summary { cursor: pointer; }
.ws-blijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ws-blijst li { display: flex; justify-content: space-between; gap: 8px; background: var(--vlak); padding: 10px 12px; border-left: 4px solid #555; }
.ws-blijst li.st-betaald { border-color: var(--oranje); } .ws-blijst li.st-besteld, .ws-blijst li.st-verzonden { border-color: #3b82f6; } .ws-blijst li.st-afgerond { border-color: var(--groen); }
.ws-blijst li > button { all: unset; cursor: pointer; flex: 1; } .ws-blijst li > button span, .ws-blijst li span { color: var(--staal); font-size: 14px; }
.ws-blijst li button[data-dk], .ws-blijst li button[data-du] { background: none; border: 0; color: var(--staal); cursor: pointer; font-size: 18px; }
.ws-test { background: var(--oranje); color: #000; font-size: 11px; padding: 1px 6px; font-weight: 700; }
.ws-form { display: grid; gap: 10px; margin-bottom: 10px; }
.ws-form label, .paneel-binnen label { display: grid; gap: 4px; font-size: 14px; color: var(--staal); }
.ws-form input, .ws-form select, .paneel-binnen select, .ws-pzoek input { background: #0c0c0c; border: 1px solid var(--rand); color: #fff; padding: 10px; font: inherit; }
.ws-form button, .ws-pzoek button { padding: 12px; font: 600 15px var(--tekst); border: 0; cursor: pointer; }
.ws-form .ws-vink { display: flex; align-items: center; gap: 10px; color: #fff; }
.knop-rood { background: var(--rood); color: #fff; }
.ws-pzoek { display: flex; gap: 6px; margin: 10px 0; } .ws-pzoek input { flex: 1; }
.ws-let { background: #1d1405; border-left: 4px solid var(--oranje); padding: 10px 12px; font-size: 14px; }
.status a { color: #fff; }
#wsInhoud { overflow-x: auto; }
@media (max-width: 480px) { .ws-btab { font-size: 12.5px; } .ws-btab th, .ws-btab td { padding: 6px 3px; } }
.rij.st-voorlopig { border-left-color: var(--oranje); background: #1d1405; } .rij .vl { display: block; font: 600 12px var(--tekst); color: var(--oranje); font-style: normal; } .rij .ok[data-st=gepland] { font: 700 13px var(--tekst); padding: 0 10px; }

/* 6 nov 2026: Webshop-tab — per shop, geld, overeenkomst, marge */
.ws-shops { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 8px 0 16px; }
.ws-shop { background: #141414; border: 1px solid #2a2a2a; border-top: 3px solid #d7141a; padding: 12px 14px; display: grid; gap: 4px; }
.ws-shop b { font-size: 15px; } .ws-shop span { color: #9a9a9a; font-size: 13px; } .ws-shop .ws-groot { font: 900 26px 'Big Shoulders Display', Impact, sans-serif; color: #fff; }
.ws-shop-de { border-top-color: #ffcc00; } .ws-shop-com { border-top-color: #19B9C5; } .ws-shop-be { border-top-color: #ff6a13; }
.ws-shopbadge { font-size: 11px; padding: 1px 6px; border-radius: 99px; background: #2a2a2a; color: #ddd; vertical-align: middle; }
.ws-shopbadge.ws-shop-de { background: #ffcc00; color: #000; } .ws-shopbadge.ws-shop-com { background: #19B9C5; color: #000; } .ws-shopbadge.ws-shop-be { background: #ff6a13; color: #000; }
.ws-shopfilter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ws-shopfilter a { padding: 5px 12px; border: 1px solid #2a2a2a; border-radius: 99px; text-decoration: none; font-size: 13px; color: #ddd; }
.ws-shopfilter a[aria-current] { background: #d7141a; border-color: #d7141a; color: #fff; }
.ws-geld td { vertical-align: top; } .ws-geld .gs-gepland td { color: #c9c9c9; font-style: italic; } .ws-geld .gs-open td:nth-child(5) { color: #ff6a13; font-weight: 700; }
.ws-geld .gsoort-omzet td:nth-child(5), .ws-geld .gsoort-betaling td:nth-child(5) { color: #2fbf5b; }
.ws-geld select { background: #0c0c0c; color: #fff; border: 1px solid #2a2a2a; padding: 4px; font: inherit; font-size: 13px; }
.ws-geld button { background: none; border: 0; color: #9a9a9a; cursor: pointer; }
.ws-ov { width: 100%; height: 78vh; border: 1px solid #2a2a2a; background: #fff; margin-top: 12px; }
.ws-marge { white-space: nowrap; }
@media (max-width: 700px) { .ws-geld { font-size: 13px; } .ws-ov { height: 60vh; } }