@import "tokens.css";
@import "sd-ui.css";
@import "sd-theme-blauw.css";
/* SuperDoggo — site-brede polish: donker thema, toegankelijkheid, skeletons,
   confetti, install-banner, onboarding-tour. Geladen op elke pagina via build_polish.py.
   Werkt door op de gedeelde CSS-variabelen (--paper/--card/--ink/--muted/--border/--accent). */

/* ---------- 1. Donker thema (site-breed) ---------- */
html[data-theme="dark"]{
  --paper:#14181a;--card:#1d2326;--ink:#e9ede7;--muted:#9aa49b;--border:#2c3438;
  --accent:#ef7a4e;--accent-ink:#ffa471;--open:#43b87a;--blue:#5b8fc7;--seasonal:#d6a24a;--closed:#e0594a;
  --shadow:0 10px 28px -14px rgba(0,0,0,.66);
  color-scheme:dark;
}
html[data-theme="dark"] body{background:var(--paper);
  background-image:radial-gradient(120% 60% at 50% -10%,#1b2327 0%,var(--paper) 55%);}
/* met de hand lichte vlakken (hardcoded #fff / color-mix naar wit) donker maken */
html[data-theme="dark"] .result{background:#222f39;border-color:#2d4150;color:var(--ink);}
html[data-theme="dark"] .fact{background:#1d2a33;border-color:#274050;color:#cfe2f2;}
html[data-theme="dark"] .note{background:#16302f;border-color:#22504c;color:#bfe3df;}
html[data-theme="dark"] .chip{background:var(--card);color:var(--ink);}
html[data-theme="dark"] .chip.on{background:var(--accent);color:#1a1410;border-color:var(--accent);}
html[data-theme="dark"] .btn{background:var(--card);color:var(--ink);}
html[data-theme="dark"] .btn.primary{color:#1a1410;}
html[data-theme="dark"] .badge{color:#ffd9a8;}
html[data-theme="dark"] input:not([type=range]):not([type=checkbox]):not([type=radio]),
html[data-theme="dark"] select,html[data-theme="dark"] textarea{
  background:var(--card);color:var(--ink);border-color:var(--border);}
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip{background:var(--card);color:var(--ink);}

/* ---------- 2. Toegankelijkheid ---------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:8px;}
.sd-fab button:focus-visible{outline-offset:3px;}

/* ---------- 3. Skeleton-laadstaat ---------- */
.sd-skel{position:relative;overflow:hidden;background:var(--border);border-radius:10px;min-height:14px;}
.sd-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:sdshim 1.2s infinite;}
@keyframes sdshim{100%{transform:translateX(100%);}}

/* ---------- 4. Zwevende knoppen (thema / hulp) ---------- */
.sd-fab{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;z-index:1200;}
.sd-fab button{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);
  background:var(--card);color:var(--ink);box-shadow:var(--shadow);cursor:pointer;font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;line-height:1;transition:transform .12s;}
.sd-fab button:hover{transform:translateY(-1px);}

/* ---------- 5. Install-banner ---------- */
.sd-install{position:fixed;left:0;right:0;bottom:0;z-index:1300;background:var(--card);
  border-top:1px solid var(--border);box-shadow:0 -8px 24px -14px rgba(0,0,0,.35);
  padding:11px 14px;display:flex;gap:12px;align-items:center;transform:translateY(115%);transition:transform .26s;}
.sd-install.on{transform:none;}
.sd-install .ic{font-size:1.4rem;}
.sd-install .tx{font-size:.92rem;line-height:1.3;}
.sd-install .tx b{font-weight:700;}
.sd-install .go{font:inherit;font-weight:700;padding:8px 14px;border-radius:10px;border:1px solid var(--accent);
  background:var(--accent);color:#fff;cursor:pointer;margin-left:auto;white-space:nowrap;}
.sd-install .x{background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--muted);padding:4px 6px;}

/* ---------- 6. Onboarding-tour (spotlight) ---------- */
.sd-tour{position:fixed;inset:0;z-index:1400;display:none;}
.sd-tour.on{display:block;}
.sd-tour .spot{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(8,12,10,.62);
  transition:all .25s ease;pointer-events:none;}
.sd-tour .pop{position:absolute;max-width:300px;width:calc(100vw - 32px);background:var(--card);color:var(--ink);
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:15px 16px;}
.sd-tour .pop h4{margin:0 0 6px;font-size:1.02rem;font-family:"Bricolage Grotesque",sans-serif;}
.sd-tour .pop p{margin:0 0 12px;color:var(--muted);font-size:.93rem;line-height:1.5;}
.sd-tour .pop .row{display:flex;gap:10px;align-items:center;justify-content:space-between;}
.sd-tour .pop .dots{display:flex;gap:5px;}
.sd-tour .pop .dot{width:7px;height:7px;border-radius:50%;background:var(--border);}
.sd-tour .pop .dot.on{background:var(--accent);}
.sd-tour .pop button{font:inherit;font-weight:600;font-size:.9rem;padding:7px 13px;border-radius:10px;cursor:pointer;}
.sd-tour .pop .next{background:var(--accent);color:#fff;border:1px solid var(--accent);}
.sd-tour .pop .skip{background:none;border:none;color:var(--muted);}
/* tekst-variant (modal) */
.sd-tourtext{position:fixed;inset:0;z-index:1400;display:none;align-items:center;justify-content:center;padding:18px;}
.sd-tourtext.on{display:flex;}
.sd-tourtext .veil{position:absolute;inset:0;background:rgba(8,12,10,.6);}
.sd-tourtext .box{position:relative;max-width:460px;width:100%;max-height:84vh;overflow:auto;background:var(--card);
  color:var(--ink);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:22px;}
.sd-tourtext .box h3{margin:0 0 10px;font-family:"Bricolage Grotesque",sans-serif;}
.sd-tourtext .box li{margin:0 0 10px;}
.sd-tourtext .box b{display:block;}
.sd-tourtext .box .cl{margin-top:8px;background:var(--accent);color:#fff;border:none;border-radius:10px;
  padding:9px 16px;font:inherit;font-weight:700;cursor:pointer;}

/* ---------- 7. Confetti ---------- */
.sd-confetti{position:fixed;inset:0;z-index:1500;pointer-events:none;}

/* ---------- 8. Interactieve states (hover/actief) — site-breed ----------
   Lage specificiteit (:where) zodat pagina-eigen stijlen altijd winnen. Professioneel voelt
   vooral aan de states: all