/* MIJN WINKEL (Home) — de CSS van het goedgekeurde ontwerp docs/ontwerp/mijn-winkel/01-mijn-winkel.html en 03-tegelwissel.html,
   klasse voor klasse overgenomen (12-10-2026). Alle klassen hebben het voorvoegsel mw- en staan onder .mw, zodat ze niets van
   de rest van de app raken; waarden (kleuren, afstanden, radius) zijn die van het ontwerp, niet die van de app-variabelen. */
.mw{ color:#17223A; display:flex; flex-direction:column; gap:18px; min-width:0 }
.mw a{ color:#2864AE } .mw a:hover{ color:#1E4F8C }
.mw button{ font:inherit }
.mw-k{ font-size:13px; color:#5D6675 }
.mw-tegel{ background:#fff; border-radius:16px; padding:18px 20px; box-shadow:0 1px 2px rgba(20,30,60,.06); display:flex; flex-direction:column; gap:6px; min-width:0; position:relative }
.mw-kaart{ background:#fff; border-radius:16px; padding:20px 22px; box-shadow:0 1px 2px rgba(20,30,60,.06); min-width:0; position:relative }
.mw-chip{ display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:3px 9px; font-size:12px; font-weight:600 }
.mw-up{ background:#DCFCE7; color:#166534 }
.mw-down{ background:#FEE2E2; color:#991B1B }
.mw-vlak{ background:#EEF0F5; color:#5D6675 }
.mw-sel{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid #e3e4e6; border-radius:6px; padding:9px 12px; font-size:13px; color:#17223A; min-height:40px; box-sizing:border-box; cursor:pointer; text-decoration:none }
.mw-sel:hover{ border-color:#B8BECC } .mw-sel:focus-visible,.mw-wissel:focus-visible,.mw-tab:focus-visible,.mw-optie:focus-visible{ outline:2px solid #2864AE; outline-offset:2px }
.mw-sel--klein{ min-height:34px; padding:6px 10px }
.mw-sel[aria-expanded="true"]{ border-color:#2864AE }
.mw-wissel{ width:32px; height:32px; border:1px solid #e3e4e6; border-radius:5px; background:#fff; display:inline-flex; align-items:center; justify-content:center; padding:0; cursor:pointer; color:#5D6675 }
.mw-wissel[aria-expanded="true"]{ border:1px solid #2864AE; border-radius:8px; background:#EAF1FA; color:#2864AE }
.mw-tab{ border:0; background:transparent; padding:8px 12px; border-radius:8px; font-size:13px; color:#17223A; cursor:pointer }
.mw-tab.bd-schakel-uit{ opacity:.45 }
.mw-tab.bd-schakel-uit .bd-schakel-punt{ background:#B8BECC !important }
.mw .bd-schakel{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; font-size:13px; color:#5D6675 }
.mw .bd-schakel-punt{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle }
.mw-i{ display:inline-block; width:14px; height:14px; border-radius:50%; border:1px solid #B8BECC; font-size:10px; text-align:center; line-height:13px; color:#5D6675; cursor:help }
.mw-neg{ color:#991B1B }
.mw table{ border-collapse:collapse; width:100%; font-size:13px }
.mw th{ text-align:right; font-weight:600; color:#5D6675; padding:10px 10px; border-bottom:1px solid #e3e4e6; white-space:nowrap }
.mw th:first-child,.mw td:first-child{ text-align:left }
.mw td{ text-align:right; padding:12px 10px; border-bottom:1px solid #EEF0F5; white-space:nowrap }
.mw th[data-sorteer]{ cursor:pointer } .mw th[data-sorteer]:hover{ color:#17223A }
.mw-pil{ background:#EAF1FA; color:#2864AE; border-radius:999px; padding:1px 7px; font-size:12px }
/* de rijen */
.mw-kop{ display:flex; flex-wrap:wrap; align-items:center; gap:10px }
.mw-kop h1{ margin:0; font-size:22px; font-weight:700; margin-right:auto }
.mw-tegels{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px }
.mw-duo{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px }
.mw-ring-rij{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:14px }
@media (max-width: 1000px){ .mw-ring-rij{ grid-template-columns:minmax(0, 1fr) } }
@media (max-width: 860px){ .mw-tegels{ grid-template-columns:repeat(2, minmax(0, 1fr)) } .mw-duo{ grid-template-columns:minmax(0, 1fr) } }
@media (max-width: 520px){ .mw-tegels{ grid-template-columns:minmax(0, 1fr) } }
/* uitklappers onder een knop: de keuzelijsten, de kalender, de kolommen */
.mw-wrap{ position:relative; display:inline-block }
.mw-menu{ position:absolute; top:calc(100% + 6px); left:0; z-index:40; background:#fff; border-radius:16px; box-shadow:0 12px 40px rgba(20,30,60,.22); padding:10px; min-width:230px; display:flex; flex-direction:column; gap:2px }
.mw-menu--rechts{ left:auto; right:0 }
.mw-menu-kop{ font-weight:700; font-size:14px; padding:4px 12px 8px }
.mw-optie{ display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:10px; border:1px solid transparent; cursor:pointer; background:transparent; text-align:left; width:100%; font:inherit; color:inherit }
.mw-optie:hover{ background:#F3F5F9 }
.mw-optie.aan{ background:#EAF1FA; border-color:#B9CFE9 }
.mw-optie[aria-disabled="true"]{ opacity:.5; cursor:default }
.mw-bol{ width:18px; height:18px; border-radius:50%; border:2px solid #B8BECC; flex:none; margin-top:2px; box-sizing:border-box }
.mw-bol.aan{ border-color:#2864AE; background:radial-gradient(#2864AE 45%, #fff 50%) }
.mw-vink{ width:18px; height:18px; border-radius:4px; border:2px solid #B8BECC; flex:none; margin-top:2px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:12px; line-height:1 }
.mw-vink.aan{ border-color:#2864AE; background:#2864AE }
.mw-scheid{ border-top:1px solid #EEF0F5; margin:6px 0 }
.mw-wissel-menu{ position:absolute; top:calc(100% - 6px); right:0; z-index:40; width:min(380px, 92vw); background:#fff; border-radius:16px; box-shadow:0 12px 40px rgba(20,30,60,.22); padding:14px; display:flex; flex-direction:column; gap:4px }
.mw-datums{ display:flex; flex-direction:column; gap:8px; padding:8px 12px }
.mw-datums input{ border:1px solid #e3e4e6; border-radius:6px; padding:8px 10px; font-size:13px; min-height:36px; box-sizing:border-box }
.mw-knop{ border:1px solid #2864AE; background:#2864AE; border-radius:5px; padding:6px 12px; font-size:12px; font-weight:600; color:#fff; cursor:pointer; min-height:34px }
/* de grafieken */
.mw-grafiek{ position:relative }
.mw-grafiek svg{ display:block; overflow:visible; max-width:100%; height:auto }   /* groeit met de kolom mee: een vaste hoogte liet de tekening smal en gecentreerd staan */
.mw-grafiek .bd-dag-lijn{ stroke:#2864AE; stroke-dasharray:3 3; stroke-width:1 }
.mw-grafiek .bd-dag-stip{ fill:#2864AE; stroke:#fff; stroke-width:2 }
.mw-grafiek .bd-dagkaart.mw-tip{ pointer-events:none; background:#17223A; color:#fff; border:0; border-radius:8px; box-shadow:none; padding:10px; font-size:11px; line-height:1.55; min-width:0; max-width:240px; white-space:nowrap }
.mw-grafiek .bd-dagkaart.mw-tip b{ font-size:11px }
.mw-grafiek:focus-visible{ outline:2px solid #2864AE; outline-offset:4px; border-radius:8px }
.mw-leeg{ padding:28px 8px; text-align:center }
.mw-laadt > :not(.mw-kop){ opacity:.6; transition:opacity .15s }

/* Productafbeelding in de Bestsellers-tabel (nawerk 12-10): 40 px, afgerond; zonder foto een grijs vak */
.mw-foto{ flex:none; width:40px; height:40px; border-radius:8px; background:#EEF0F5; overflow:hidden; display:inline-flex; align-items:center; justify-content:center }
.mw-foto img{ width:40px; height:40px; object-fit:contain; display:block }
.mw-foto--leeg{ border:1px solid #E6E9F0 }

/* De uitsplitsing van de winst (winst-detail klus 3): het paneel bij de tegel Totale winst en de hover per dag in de grafiek Winst.
   Kopjes vet met subtotaal, regels ingesprongen, Totale kosten en Totale winst onderaan. Alleen variabelen van het app-kader
   (public/css/bouwdoos.css): kleuren, lettermaten, radius en schaduw; tests/bouwdoos-waarden.test.js bewaakt dat winkel.css niet groeit. */
.mw-i--knop{ padding:0; background:var(--vlak); font:inherit; font-size:var(--tekst-bijschrift); cursor:pointer }
.mw-i--knop:hover,.mw-i--knop[aria-expanded="true"]{ border-color:var(--accent); color:var(--accent) }
.mw-i--knop:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.mw-uitspl{ position:absolute; top:calc(100% - 6px); right:0; z-index:40; width:min(460px, 92vw); max-height:min(78vh, 820px); overflow:auto; box-sizing:border-box; background:var(--vlak); color:var(--tekst);
  border-radius:var(--radius-laag); box-shadow:var(--schaduw-laag); padding:var(--a3) 18px; font-size:var(--tekst-tabel); line-height:1.45 }
.mw-uitspl--links{ left:0; right:auto }
.mw-ukop{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:var(--a1); font-size:var(--tekst-basis) }
.mw-uk{ display:flex; justify-content:space-between; gap:12px; font-weight:700; padding:9px 0 3px; border-top:1px solid var(--lijn); margin-top:4px }
.mw-ukop + .mw-uk{ border-top:0; margin-top:0 }
.mw-ur{ display:flex; justify-content:space-between; gap:12px; padding:2px 0 2px var(--a3) }
.mw-ur > span:last-child{ white-space:nowrap; font-variant-numeric:tabular-nums }
.mw-ur--verw{ color:var(--tekst-zacht) }
.mw-ur.mw-u0, .mw-ur.mw-u0 > span:last-child{ color:var(--tekst-zacht) }
.mw-ulabel{ font-style:normal; font-size:var(--tekst-bijschrift); color:var(--tekst-zacht); background:var(--achtergrond); border-radius:var(--radius-rond); padding:0 var(--a1); margin-left:4px }
.mw-un{ padding:0 0 3px var(--a3); font-size:var(--tekst-klein); color:var(--tekst-zacht) }
.mw-ut{ display:flex; justify-content:space-between; gap:12px; font-weight:700; padding:8px 0 2px; border-top:2px solid var(--lijn); margin-top:var(--a2) }
.mw-ut--winst{ border-top:0; margin-top:0; font-size:var(--tekst-voorstel); color:var(--accent) }
.mw-ublok{ margin-top:14px; padding-top:var(--a1); border-top:2px solid var(--lijn) }
.mw-uk--blok{ border-top:0; margin-top:0 }
.mw-ur--tot{ font-weight:700; border-top:1px solid var(--lijn); margin-top:4px; padding-top:4px }
/* in de grafiek: een wit paneel naast de grafiek, compact zodat alle regels erin passen */
.mw-grafiek .bd-dagkaart.mw-tip--uitspl{ background:var(--vlak); color:var(--tekst); border-radius:var(--radius-kaart); box-shadow:var(--schaduw-laag); padding:var(--a2) 14px; font-size:var(--tekst-bijschrift); line-height:1.4; white-space:normal;
  width:430px; max-width:430px; top:50%; transform:translateY(-50%); z-index:30 }
.mw-grafiek .bd-dagkaart.mw-tip--uitspl b{ font-size:var(--tekst-klein) }
.mw-tip--uitspl .mw-ukop{ font-size:var(--tekst-klein); padding-bottom:2px }
.mw-tip--uitspl .mw-uk{ padding:5px 0 1px; margin-top:2px }
.mw-tip--uitspl .mw-ur{ padding:0 0 0 12px; gap:8px }
.mw-tip--uitspl .mw-ur > span, .mw-tip--uitspl .mw-uk > span{ white-space:nowrap }
.mw-tip--uitspl .mw-k{ font-size:var(--tekst-bijschrift) }
.mw-tip--uitspl .mw-ut{ padding:5px 0 1px; margin-top:4px }
.mw-tip--uitspl .mw-ut--winst{ font-size:var(--tekst-klein) }