/* BUY BACK YOUR WEEK — huisstijl voor de V2-schil van het OS (whitelabel-v2, 09-10-2026)
   Geserveerd als /theme-v2.css (config.brandTheme + shared/theme-v2.css), laadt als LAATSTE stylesheet.
   Altijd donker (config.brandMode "donker" → <html data-merk-modus="donker">, geen themakeuze in het profielmenu).
   Bron: bbyw-partner/branding/brand.json + de klassieke os-theme.css:
   canvas #0C0F12 · paneel #12161A · verhoogd #1D242B · inkt #F4F6F7 · gedempt #8C959E · lime #C8FF4D
   (alleen actie/actief; tekst óp lime is altijd #0C0F12) · IBM Plex Sans (romp), Space Grotesk (titels/woordmerk),
   IBM Plex Mono (status/cijfers) · radius 10/14 · matte grafiet met stille 1px-lijnen, schaduw alleen op zwevers.
   Alles hangt aan html[data-merk="bbyw"] — zonder die vlag doet dit bestand niets. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- 1. tokens (helder en avond gelijk: BBYW kent alleen donker) ---------- */
html[data-merk="bbyw"], html[data-merk="bbyw"][data-thema="helder"], html[data-merk="bbyw"][data-thema="avond"] {
  --bb-canvas: #0C0F12; --bb-paneel: #12161A; --bb-hoog: #1D242B; --bb-inkt: #F4F6F7; --bb-gedempt: #8C959E; --bb-lime: #C8FF4D;
  --md-letter: 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --md-letter-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --m: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --font-mono: var(--m);
  --md-r-groep: 10px; --md-r-kaart: 14px; --md-r-vel: 16px; --md-r-venster: 12px; --md-r-icoon: 24%; --md-r-veld: 8px;
  --r1: 6px; --r2: 10px; --r3: 14px; --radius: 10px; --radius-lg: 14px;
  --md-tint: #C8FF4D; --md-tint-2: #D9FF7A; --md-tint-zacht: rgba(200,255,77,.13); --md-op-tint: #0C0F12;
  --md-label: #F4F6F7; --md-label-2: #8C959E; --md-label-3: rgba(140,149,158,.62);
  --md-fill: rgba(244,246,247,.07); --md-fill-2: rgba(244,246,247,.045);
  --md-sep: rgba(244,246,247,.09);
  --md-grond: #0C0F12; --md-vlak: #12161A; --md-vlak-2: #1D242B; --md-vlak-op-glas: #1D242B;
  --md-glas-dun: rgba(29,36,43,.9); --md-glas: rgba(12,15,18,.86); --md-glas-dik: rgba(18,22,26,.92);
  --md-lichtrand: inset 0 0 0 1px rgba(244,246,247,.07);
  --md-dimlaag: rgba(0,0,0,.55);
  --md-schakel-uit: rgba(244,246,247,.14); --md-seg-aan: #1D242B;
  --md-groen: #3DD9A4; --md-oranje: #FFC24B; --md-rood: #FF6A45;
  --md-groen-tekst: #3DD9A4; --md-oranje-tekst: #FFC24B; --md-rood-tekst: #FF8A6B;
  --md-schaduw-s: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(244,246,247,.06);
  --md-schaduw-m: 0 10px 24px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(244,246,247,.08);
  --md-schaduw-l: 0 24px 56px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(244,246,247,.1);
  --md-rand: rgba(244,246,247,.5);
  --inkt3: rgba(140,149,158,.7); --lijn2: rgba(244,246,247,.14); --oker: #FFC24B; --groen: #3DD9A4; --ok: #3DD9A4; --warn: #FF6A45;
  --sh-l: 0 24px 56px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(244,246,247,.1);
  --glass: #12161A; --glass-strong: #1D242B;
  --mt-vlak: #12161A; --mt-vlak-2: #1D242B; --mt-lijn: rgba(244,246,247,.09); --mt-lijn-sterk: rgba(244,246,247,.16);
  --mt-tekst: #F4F6F7; --mt-tekst-2: #A9B1B9; --mt-tekst-3: #8C959E;
  --mt-merk: #C8FF4D; --mt-merk-hover: #D9FF7A; --mt-merk-zacht: rgba(200,255,77,.13); --mt-merk-tekst: #C8FF4D; --mt-op-merk: #0C0F12;
  --mt-font: var(--md-letter);
  /* app-tegels: verhoogd grafiet met een inkt-tekening; lime blijft voor wat actief is */
  --ik-teal: #1D242B; --ik-groen: #1D242B; --ik-olijf: #1D242B; --ik-oker: #1D242B; --ik-oranje: #1D242B;
  --ik-rood: #1D242B; --ik-roze: #1D242B; --ik-paars: #1D242B; --ik-blauw: #1D242B; --ik-petrol: #1D242B;
  --ik-indigo: #1D242B; --ik-grafiet: #1D242B; --ik-bruin: #1D242B;
  color-scheme: dark;
}
html[data-merk="bbyw"] ::selection { background: #C8FF4D; color: #0C0F12; }

/* ---------- 2. grond: mat canvas, geen gloed ---------- */
html[data-merk="bbyw"][data-thema] body { background: #0C0F12 !important; }
html[data-merk="bbyw"][data-thema] #grond.grond { background: none !important; }
html[data-merk="bbyw"] body::before, html[data-merk="bbyw"] body::after { display: none !important; }

/* ---------- 3. bovenbalk + woordmerk ---------- */
html[data-merk="bbyw"][data-thema] .topbar {
  background: rgba(12,15,18,.9) !important; box-shadow: 0 1px 0 rgba(244,246,247,.08) !important;
}
html[data-merk="bbyw"] .topbar .merk > span { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -.01em; }
html[data-merk="bbyw"][data-thema] .topbar .zoek { background: #12161A !important; box-shadow: inset 0 0 0 1px rgba(244,246,247,.08) !important; }
html[data-merk="bbyw"][data-thema] .topbar .zoek:hover { box-shadow: inset 0 0 0 1px rgba(244,246,247,.18) !important; }
html[data-merk="bbyw"] .topbar .avatar, html[data-merk="bbyw"] .pm-av, html[data-merk="bbyw"] .n2-avatar {
  background: #C8FF4D !important; color: #0C0F12 !important; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
}

/* ---------- 4. Start ---------- */
html[data-merk="bbyw"][data-thema] .ms-start .app-tile .app-icon,
html[data-merk="bbyw"][data-thema] .ms-laag .app-tile .app-icon { border-radius: calc(var(--ms-ikoon) * .24) !important; }
html[data-merk="bbyw"][data-thema] .app-icon[data-strak-kleur],
html[data-merk="bbyw"][data-thema] .ms-mini[data-strak-kleur] {
  background: #1D242B !important; background-image: none !important; color: #F4F6F7 !important;
  box-shadow: inset 0 0 0 1px rgba(244,246,247,.08), 0 1px 2px rgba(0,0,0,.4) !important;
}
html[data-merk="bbyw"][data-thema] .app-tile:hover .app-icon[data-strak-kleur] {
  background: #232C34 !important; background-image: none !important; color: #C8FF4D !important;
  box-shadow: inset 0 0 0 1px rgba(200,255,77,.45), 0 8px 18px -8px rgba(0,0,0,.6) !important;
}
html[data-merk="bbyw"][data-thema] .ms-start .app-tile-name, html[data-merk="bbyw"][data-thema] .ms-laag .app-tile-name { color: #F4F6F7; font-weight: 500; }
html[data-merk="bbyw"] .page-dot { background: rgba(244,246,247,.2) !important; }
html[data-merk="bbyw"] .page-dot.on, html[data-merk="bbyw"] .page-dot[aria-selected="true"] { background: #C8FF4D !important; }

/* ---------- 5. dock, chatknop, duim ---------- */
html[data-merk="bbyw"][data-thema] .dock { background: rgba(18,22,26,.94) !important; box-shadow: 0 0 0 1px rgba(244,246,247,.08), 0 18px 40px -12px rgba(0,0,0,.7) !important; }
html[data-merk="bbyw"][data-thema] .chatknop { background: #C8FF4D !important; color: #0C0F12 !important; box-shadow: 0 12px 28px -10px rgba(200,255,77,.45), 0 0 0 1px rgba(0,0,0,.2) !important; }
html[data-merk="bbyw"][data-thema] .chatknop:hover { background: #D9FF7A !important; }
html[data-merk="bbyw"][data-thema] .duim-zoek { background: #12161A !important; box-shadow: 0 0 0 1px rgba(244,246,247,.1) !important; color: #8C959E !important; }

/* ---------- 6. knoppen: primair = lime met canvas-tekst ---------- */
html[data-merk="bbyw"] .pm-seg button.on { background: #1D242B !important; color: #F4F6F7 !important; box-shadow: inset 0 -2px 0 #C8FF4D !important; }
html[data-merk="bbyw"] #pwa-push-yes { background: #C8FF4D !important; color: #0C0F12 !important; }

/* ---------- 7. vensters ---------- */
@media not all and (max-width: 759px) {
  html[data-merk="bbyw"][data-thema] .window { background: #12161A !important; box-shadow: 0 0 0 1px rgba(244,246,247,.09), 0 18px 44px -12px rgba(0,0,0,.65) !important; }
  html[data-merk="bbyw"][data-thema] .window.focused { box-shadow: 0 0 0 1px rgba(244,246,247,.14), 0 28px 64px -14px rgba(0,0,0,.8) !important; }
  html[data-merk="bbyw"][data-thema] .window-bar { background: #12161A !important; box-shadow: inset 0 -1px 0 rgba(244,246,247,.07); }
  html[data-merk="bbyw"][data-thema] .window.focused .window-bar { box-shadow: inset 0 -2px 0 #C8FF4D; }
  html[data-merk="bbyw"][data-thema] .window-title { font-family: var(--m); font-size: 12px; font-weight: 500; letter-spacing: .02em; }
}

/* ---------- 8. menu's, kaarten ---------- */
html[data-merk="bbyw"] .pm-menu, html[data-merk="bbyw"] .lv-pop, html[data-merk="bbyw"] .md-menu,
html[data-merk="bbyw"] .oo-nieuw, html[data-merk="bbyw"] .oo-kaart, html[data-merk="bbyw"] .widget-menu {
  background: #12161A !important; box-shadow: var(--md-schaduw-l) !important; border: 0 !important;
}
html[data-merk="bbyw"] .pm-naam, html[data-merk="bbyw"] .dm-titel b { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
html[data-merk="bbyw"] .pm-sub { font-family: var(--m); font-size: 11px; color: #8C959E !important; }

/* ---------- 9. DM-paneel ---------- */
html[data-merk="bbyw"] .dm-paneel { background: #12161A !important; box-shadow: var(--md-schaduw-l) !important; }
html[data-merk="bbyw"] .dm-kop { background: #12161A !important; box-shadow: inset 0 -1px 0 rgba(244,246,247,.08) !important; }
html[data-merk="bbyw"] .dm-titel small { color: #8C959E !important; }

/* ---------- 10. focus = één lime lijn ---------- */
html[data-merk="bbyw"] :focus-visible { outline: 2px solid #C8FF4D !important; outline-offset: 2px; }

/* ---------- 11. inloggen ---------- */
html[data-merk="bbyw"] .login { background: #0C0F12 !important; }
html[data-merk="bbyw"] .login-card { background: #12161A !important; color: #F4F6F7 !important; box-shadow: 0 0 0 1px rgba(244,246,247,.08), 0 30px 70px -20px rgba(0,0,0,.8) !important; border: 0 !important; }
html[data-merk="bbyw"] .login-card h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #F4F6F7 !important; }
html[data-merk="bbyw"] #login-tenant { color: #8C959E !important; }
html[data-merk="bbyw"] .login-card input { background: #0C0F12 !important; color: #F4F6F7 !important; border: 1px solid rgba(244,246,247,.12) !important; }
html[data-merk="bbyw"] .login-card input:focus { outline: none; border-color: #C8FF4D !important; box-shadow: 0 0 0 3px rgba(200,255,77,.18) !important; }
html[data-merk="bbyw"] .login-card button { background: #C8FF4D !important; color: #0C0F12 !important; border: 0 !important; font-weight: 600; }
html[data-merk="bbyw"] .login-card button:hover { background: #D9FF7A !important; }