/* Martha 3D — werkpaneel: overzicht, agenda, inplannen, planner (19-10-2026, klus "Martha 3D schetsen bouwen").
   Zelfde stijl als de rest: witte vakken met dikke zwarte rand, gele linten, harde onderschaduw zonder blur,
   rond lettertype. Geen clip-path en geen backdrop-filter (het paneel beweegt mee in 3D). */
.pl { --w: #DDEBFF; --h: #E3F7E8; font-family: var(--rond); font-weight: 600; color: var(--ink); padding-top: 2px; }
.pl button { font: inherit; color: inherit; cursor: pointer; }
.pl small { display: block; color: var(--text-dim); font-size: 11px; font-weight: 600; line-height: 1.3; }

.pl-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 18px; }
.pl-tab { min-width: 0; padding: 6px 0; font-size: 12px !important; font-weight: 800 !important; background: var(--paper-2); border: 1px solid var(--ax-rand); border-radius: 12px; }
.pl-tab.aan { background: var(--yellow); box-shadow: 0 3px 0 var(--yellow-lo); }

/* Let op: in deze kantelende 3D-laag komen tikken op elementen met position: relative/absolute niet aan
   (Chromium-hittest, gemeten 19-10-2026). Alles wat je aantikt staat daarom in de gewone opmaak (flex/grid). */
.pl-paneel { display: block; background: var(--paper); border: 1px solid var(--ax-rand); border-radius: 16px;
  box-shadow: 0 0 0 1.5px var(--yellow), 0 5px 0 #333; margin: 0 0 22px; padding: 22px 10px 10px; }
.pl-lint { display: block; width: max-content; max-width: calc(100% - 16px); margin: -37px 0 8px 2px; background: var(--yellow); border: 1px solid var(--ax-rand); border-radius: 10px;
  padding: 1px 10px; font-size: 13px; font-weight: 800; line-height: 1.3; box-shadow: 0 3px 0 var(--yellow-lo); white-space: nowrap; }

.pl-top { display: flex; align-items: center; gap: 12px; }
.pl-top > span:last-child { min-width: 0; }
.pl-naam { display: block; font-size: 19px; font-weight: 800; line-height: 1.2; }
.pl-sub { display: block; margin: 0 0 6px; color: var(--text-dim); font-size: 12px; font-weight: 600; line-height: 1.35; }
.pl-top .pl-sub { margin: 0; }
.pl-ava { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ax-rand-sterk); background: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 800; line-height: 1; }
.pl-ava.groot { width: 54px; height: 54px; font-size: 24px; background: var(--yellow); }
.pl-ava.nieuw { background: var(--paper-2); border-style: dashed; }

.pl-schakel, .pl-dagen { display: flex; gap: 6px; margin-top: 10px; }
.pl-k { flex: 1; min-width: 0; padding: 5px 2px; font-size: 12px !important; font-weight: 800 !important; line-height: 1.25; background: var(--paper-2);
  border: 1px solid var(--ax-rand); border-radius: 11px; white-space: nowrap; }
.pl-k.aan { background: var(--yellow); box-shadow: 0 3px 0 var(--yellow-lo); }
.pl-k:active { background: var(--yellow-hi); box-shadow: none; }   /* geen transform bij indrukken: dan valt de klik in de 3D-laag naast de knop */
.pl-k:disabled { cursor: default; }
.pl-dagen .pl-k { font-size: 11.5px !important; }

.pl-martha { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.pl-bol { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ax-rand-sterk); background: radial-gradient(circle at 35% 30%, var(--yellow-hi), var(--yellow-lo)); }
.pl-ballon { flex: 1; min-width: 0; background: var(--paper-2); border: 1px solid var(--ax-rand); border-radius: 13px; padding: 7px 9px; font-size: 13px; line-height: 1.4; }
.pl-ballon .toch { display: block; width: 100%; margin-top: 7px; }

.pl-rij, .pl-pr { display: flex; align-items: center; gap: 9px; background: var(--paper-2); border: 1px solid var(--ax-rand); border-radius: 12px; padding: 6px 8px; margin-top: 7px; font-size: 13px; line-height: 1.3; }
.pl-rij.jij { background: #fff; margin-left: 30px; }
.pl-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--ax-rand); background: var(--yellow); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.pl-t { flex: 1; min-width: 0; overflow-wrap: break-word; }
.pl-tag, .pl-st { flex: none; border: 1.5px solid var(--ax-rand-sterk); border-radius: 8px; padding: 1px 7px; font-size: 11px; font-weight: 800; line-height: 1.35; white-space: nowrap; }
.pl-tag.w { background: var(--w); } .pl-tag.h { background: var(--h); }
.pl-st.op { background: var(--w); } .pl-st.vrij { background: var(--h); } .pl-st.ziek { background: #FFD9DB; }
.pl-zeg, .pl-ok, .pl-leeg { margin: 10px 0 0; text-align: center; color: var(--text-dim); font-size: 12px; line-height: 1.35; }
.pl-ok { color: var(--ink); background: var(--h); border: 1.5px solid var(--ax-rand-sterk); border-radius: 10px; padding: 6px 8px; }
.pl-leeg { margin-top: 4px; }

.pl-team { display: flex; gap: 6px; }
.pl-mw { flex: 1; min-width: 0; text-align: center; font-size: 11.5px; line-height: 1.25; }
.pl-mw .pl-ava { width: 40px; height: 40px; margin: 0 auto 5px; font-size: 17px; }

/* agenda */
.pl-dagkop { margin: 12px 0 2px; font-size: 15px; font-weight: 800; }
.pl-uur { display: flex; gap: 8px; align-items: stretch; margin-top: 7px; }
.pl-tijd { flex: none; width: 40px; padding-top: 7px; font-size: 13px; font-weight: 800; }
.pl-blok { flex: 1; min-width: 0; border: 1px solid var(--ax-rand); border-radius: 12px; padding: 5px 9px; font-size: 13px; line-height: 1.3; }
.pl-blok b { display: block; font-weight: 800; }
.pl-blok.bw { background: var(--w); } .pl-blok.bh { background: var(--h); }
.pl-blok.nieuw, .pl-wie .nieuw { box-shadow: 0 0 0 2px var(--yellow); }
.pl-wie { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.pl-wie span { border: 1.5px solid var(--ax-rand-sterk); border-radius: 20px; padding: 0 8px; font-size: 11px; font-weight: 700; background: #fff; }
.pl-wie span.nieuw { background: var(--yellow); }
.pl-leg { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }

/* inplannen */
.pl-veld { display: block; margin-top: 10px; }
.pl-form .pl-veld:first-of-type { margin-top: 4px; }
.pl-lab { display: block; margin-bottom: 4px; color: #555; font-size: 12px; font-weight: 800; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-k.chip { flex: none; padding: 4px 11px; border-radius: 18px; font-size: 12.5px !important; }
.pl-k.chip.uit { text-decoration: line-through; border-style: dashed !important; }   /* AX-09: was opacity .45 (2,62); doorgestreept + stippelrand zegt al "kan niet" */
.pl-veld .pl-dagen { margin-top: 0; }
.pl-twee { display: flex; gap: 8px; }
.pl-twee > label { flex: 1; min-width: 0; }
.pl-inv { display: block; box-sizing: border-box; width: 100%; min-width: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink);
  background: var(--paper-2); border: 1.5px solid var(--ax-rand-sterk); border-radius: 11px; padding: 6px 9px; outline: none; }
.pl-inv:focus { background: #fff; box-shadow: 0 0 0 2px var(--yellow); }
.pl-let { margin-top: 12px; border: 1px solid var(--ax-rand); border-radius: 12px; padding: 7px 9px; font-size: 12.5px; line-height: 1.35; background: #FFF3C4; }
.pl-let.ok { background: var(--h); }
.pl-let.dubbel, .pl-let.ziek, .pl-let.fout { background: #FFD9DB; }
.pl-groot { display: block; width: 100%; margin-top: 12px; padding: 9px; font-size: 17px !important; font-weight: 800 !important; background: var(--yellow);
  border: 1px solid var(--ax-rand); border-radius: 14px; box-shadow: 0 4px 0 var(--yellow-lo); }
.pl-groot:active { background: var(--yellow-hi); box-shadow: none; }
.pl-groot:disabled { opacity: .45; cursor: default; }
.pl-k.pl-vb { display: block; width: 100%; white-space: normal; text-align: left; padding: 6px 9px; font-weight: 700 !important; }
.pl-chatin { display: flex; gap: 6px; margin-top: 10px; }
.pl-chatin .pl-inv { flex: 1; }
.pl-chatin .pl-k { flex: none; padding: 0 12px; }

/* planner (gantt) */
.pl-sam { display: flex; gap: 6px; margin-top: 10px; }
.pl-sam span { flex: 1; text-align: center; border: 1px solid var(--ax-rand); border-radius: 12px; padding: 4px 0; font-size: 11.5px; background: var(--paper-2); }
.pl-sam b { display: block; font-size: 19px; line-height: 1.2; }
.pl-gantt { margin-top: 12px; }
.pl-as { position: relative; margin: 0 8px 0 54px; height: 18px; font-size: 11px; color: #555; }
.pl-as span { position: absolute; transform: translateX(-50%); }
.pl-gr { display: flex; align-items: center; min-height: 40px; border-top: 2px solid #ddd; }
.pl-gn { flex: none; width: 54px; font-size: 12.5px; font-weight: 800; }
.pl-gb { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); grid-auto-rows: 28px; row-gap: 3px;
  align-items: stretch; padding: 2px 0; margin: 2px 8px 2px 0; cursor: pointer; border-radius: 6px;
  background: repeating-linear-gradient(90deg, #f6f4ee 0, #f6f4ee calc(100% / 6 - 2px), #e2dfd6 calc(100% / 6 - 2px), #e2dfd6 calc(100% / 6)); }
.pl-bar { min-width: 0; box-sizing: border-box; padding: 0 4px; border: 1px solid var(--ax-rand); border-radius: 8px;
  font-size: 11px !important; font-weight: 800 !important; line-height: 1; white-space: nowrap; overflow: hidden; text-align: left; }
.pl-bar.gekozen { box-shadow: 0 0 0 3px var(--yellow), var(--ax-diep); }
.pl-bar.dubbel { border-color: var(--red); }
.pl-bar.nieuw { border-style: dashed; }
.pl-bar.thuis { cursor: default; }
.pl-los { grid-row: 1; grid-column: 1 / span 12; justify-self: start; align-self: center; margin-left: 6px; }
.pl-bewerk { margin-top: 10px; border: 1px solid var(--ax-rand); border-radius: 12px; background: #FFF3C4; padding: 7px 8px; font-size: 13px; }
.pl-bewerk .pl-schakel { margin-top: 7px; }

/* 19-10-2026 (knoppenbalk en personeel): Privé en Eigen bedrijf, en per plek een eigen vakje Personeel.
   AI-hulpen krijgen een geel rondje, collega's (echte mensen) een wit, zodat je ze niet door elkaar haalt. */
.pl-ava.ai { background: var(--yellow); }
.pl-st.wacht { background: #FFF3C4; }
.pl-ic.pl-uurtje { width: auto; min-width: 28px; box-sizing: border-box; padding: 0 5px; font-size: 11px; }
.pl-k.pl-kort { flex: none; padding: 4px 11px; }
.pl-bar { text-overflow: clip; }

/* 19-10-2026 (klus "Martha 3D verbeteren voor levering"): Privé met de vijf blokken van Alex, en tikdoelen van minstens 44 px hoog
   (Apple HIG 44 pt, Material 48 dp). Alles in de gewone opmaak (geen position op wat je aantikt, zie boven). */
.pl-k, .pl-tab, .pl-groot, .pl-inv { min-height: 44px; }
.pl-gr { min-height: 50px; }
.pl-gb { grid-auto-rows: 44px; }
.pl-privekop { margin: 0 0 22px; }
/* 20-10-2026 (1.2.0): .pl-hulpkop (raster van twee bovenaan Privé) weg, de hulpen staan onderaan in Personeel */
.pl-voortgang { display: block; height: 8px; margin-top: 5px; border: 1.5px solid var(--ax-rand-sterk); border-radius: 5px; background: #fff; overflow: hidden; }
.pl-voortgang i { display: block; height: 100%; background: var(--green); transform-origin: 0 50%; }
.pl-tel { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border: 1.5px solid var(--ax-rand-sterk); border-radius: 9px; background: #fff; font-size: 10.5px; line-height: 1.3; }
.pl-todo { width: 100%; min-height: 44px; text-align: left; font: inherit; }
.pl-todo.af .pl-t { text-decoration: line-through; color: var(--text-dim); }
.pl-vink { flex: none; width: 24px; height: 24px; border: 1.5px solid var(--ax-rand-sterk); border-radius: 7px; background: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 800; line-height: 1; }
.pl-todo.af .pl-vink { background: var(--green); color: #fff; }
.pl-tijdlijn { border-left: 1px solid var(--ax-rand); margin: 2px 0 0 6px; padding-left: 12px; }
.pl-logdag { margin: 10px 0 2px; font-size: 13px; font-weight: 800; }
.pl-logdag:first-child { margin-top: 2px; }
.pl-log { display: flex; gap: 8px; margin-top: 6px; font-size: 13px; line-height: 1.3; }
.pl-log .pl-tijd { width: 40px; padding-top: 0; font-size: 12px; }

/* 1.3.0: Werk aanpassen (vinkje bij een taak) en het account in Instellingen */
.pl-vink { flex: none; width: 44px; height: 44px; margin: -4px 0; border: 1.5px solid var(--ax-rand-sterk); border-radius: 10px; background: #fff; font-size: 20px; font-weight: 900; line-height: 1; color: var(--ink); }
.pl-vink.aan { background: var(--yellow); }
.pl-rij.af .pl-t { opacity: .55; text-decoration: line-through; }
.m3d-account { background: var(--paper); border: 1px solid var(--ax-rand); border-radius: 16px; padding: 10px 12px; margin-top: 10px; }
.m3d-a-kop { margin: 0; font-weight: 900; font-size: 14px; }
.m3d-a-t { margin: 6px 0 0; font-size: 13px; line-height: 1.35; }
.m3d-a-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.m3d-a-k { min-height: 44px; width: 100%; margin-top: 8px; }
.m3d-a-form .m3d-a-k { margin-top: 0; }
.m3d-a-fout { margin: 6px 0 0; font-size: 13px; font-weight: 800; color: #B3261E; }

/* 1.3.1 (20-10-2026): één doorzichtig tikvak over een groepje korte thuisbalken, minstens 44 px breed (planning.js thuisBalken).
   Zelfde uiterlijk; de balken eronder zijn alleen beeld. */
.pl-thuistik { width: 100%; min-width: 44px; justify-self: center; margin: 0; padding: 0; border: 0; background: transparent; cursor: default; z-index: 1; }

/* 22-10-2026 (klus "Ailex werelden", werelden.js): formuliertje onder een tegelblok; datum naast de titel, knoppen eronder */
.w-form { flex-wrap: wrap; gap: 6px; }
.w-form .pl-inv { flex: 1 1 60%; min-width: 0; }
.w-form .w-datum { flex: 0 1 38%; }
.w-form .pl-k { flex: 1 1 40%; }
.w-fout { color: var(--text); }