/* ZERO SLACK — 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.
   Zelfde indeling als elke V2-tenant; alleen de huid is Zero Slack: papier #F4F3EF · carbon #0A0A0A · acid #C6F432,
   Archivo (letter) + JetBrains Mono (labels/cijfers), scherpe hoeken, harde schaduw i.p.v. glas.
   Licht = papier, Donker = carbon; acid is altijd het "nu/actie"-signaal, nooit tekstkleur op papier.
   Alles hangt aan html[data-merk="zeroslack"] — zonder die vlag doet dit bestand niets. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---------- 1. tokens ---------- */
html[data-merk="zeroslack"] {
  --zs-papier: #F4F3EF; --zs-papier-2: #EAE8E1; --zs-wit: #FBFAF7; --zs-carbon: #0A0A0A; --zs-grafiet: #2A2A27;
  --zs-acid: #C6F432; --zs-acid-zacht: rgba(198,244,50,.32);
  --md-letter: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --md-letter-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --m: 'JetBrains Mono', ui-monospace, Menlo, monospace; --font-mono: var(--m);
  --md-r-rond: 2px; --md-r-groep: 2px; --md-r-kaart: 3px; --md-r-vel: 4px; --md-r-venster: 3px; --md-r-icoon: 4px; --md-r-veld: 2px;
  --r1: 2px; --r2: 3px; --r3: 4px; --radius: 3px; --radius-lg: 4px;
  --md-blur-dun: 0px; --md-blur: 0px; --md-blur-dik: 0px; --md-verzadig: 100%;
  /* app-tegels: de huiskleuren in plaats van dertien tinten */
  /* app-tegels: één carbon tegel voor alles (de site kent geen dertien tinten; vinden gaat op naam + tekening) */
  --ik-teal: #0A0A0A; --ik-groen: #0A0A0A; --ik-olijf: #0A0A0A; --ik-oker: #0A0A0A; --ik-oranje: #0A0A0A;
  --ik-rood: #0A0A0A; --ik-roze: #0A0A0A; --ik-paars: #0A0A0A; --ik-blauw: #0A0A0A; --ik-petrol: #0A0A0A;
  --ik-indigo: #0A0A0A; --ik-grafiet: #0A0A0A; --ik-bruin: #0A0A0A;
}
html[data-merk="zeroslack"][data-thema="helder"] {
  --md-tint: #0A0A0A; --md-tint-2: #2A2A27; --md-tint-zacht: rgba(198,244,50,.38); --md-op-tint: #F4F3EF;
  --md-label: #0A0A0A; --md-label-2: rgba(10,10,10,.62); --md-label-3: rgba(10,10,10,.38);
  --md-fill: rgba(10,10,10,.07); --md-fill-2: rgba(10,10,10,.045);
  --md-sep: rgba(10,10,10,.16);
  --md-grond: #F4F3EF; --md-vlak: #FBFAF7; --md-vlak-2: #EFEDE7; --md-vlak-op-glas: #FBFAF7;
  --md-glas-dun: #FBFAF7; --md-glas: #F4F3EF; --md-glas-dik: #FBFAF7;
  --md-lichtrand: inset 0 0 0 1px rgba(10,10,10,.14);
  --md-schakel-uit: rgba(10,10,10,.16); --md-seg-aan: #0A0A0A;
  --md-schaduw-s: 0 0 0 1px rgba(10,10,10,.12);
  --md-schaduw-m: 0 0 0 1px rgba(10,10,10,.85), 3px 3px 0 #0A0A0A;
  --md-schaduw-l: 0 0 0 1.5px #0A0A0A, 6px 6px 0 #0A0A0A;
  --md-rand: #0A0A0A;
  --inkt3: rgba(10,10,10,.42); --lijn2: rgba(10,10,10,.24); --oker: #8A5A00; --groen: #3F6B00; --ok: #3F6B00; --warn: #C2361F;
  --sh-l: 0 0 0 1.5px #0A0A0A, 6px 6px 0 #0A0A0A;
  /* mia-taak (vraag-/taakvensters) */
  --mt-vlak: #FBFAF7; --mt-vlak-2: #EFEDE7; --mt-lijn: rgba(10,10,10,.16); --mt-lijn-sterk: rgba(10,10,10,.3);
  --mt-tekst: #0A0A0A; --mt-tekst-2: rgba(10,10,10,.66); --mt-tekst-3: rgba(10,10,10,.46);
  --mt-merk: #0A0A0A; --mt-merk-hover: #2A2A27; --mt-merk-zacht: rgba(198,244,50,.38); --mt-merk-tekst: #0A0A0A; --mt-op-merk: #F4F3EF;
  --mt-font: var(--md-letter);
  --ms-zacht: #EFEDE7;
}
html[data-merk="zeroslack"][data-thema="avond"] {
  --md-tint: #C6F432; --md-tint-2: #D6FA6A; --md-tint-zacht: rgba(198,244,50,.16); --md-op-tint: #0A0A0A;
  --md-label: #F4F3EF; --md-label-2: rgba(244,243,239,.64); --md-label-3: rgba(244,243,239,.36);
  --md-fill: rgba(244,243,239,.08); --md-fill-2: rgba(244,243,239,.05);
  --md-sep: rgba(244,243,239,.14);
  --md-grond: #0A0A0A; --md-vlak: #151514; --md-vlak-2: #1F1F1D; --md-vlak-op-glas: #1F1F1D;
  --md-glas-dun: #151514; --md-glas: #0A0A0A; --md-glas-dik: #151514;
  --md-lichtrand: inset 0 0 0 1px rgba(244,243,239,.12);
  --md-schakel-uit: rgba(244,243,239,.16); --md-seg-aan: #C6F432;
  --md-schaduw-s: 0 0 0 1px rgba(244,243,239,.1);
  --md-schaduw-m: 0 0 0 1px rgba(244,243,239,.22), 3px 3px 0 rgba(198,244,50,.55);
  --md-schaduw-l: 0 0 0 1px rgba(244,243,239,.3), 6px 6px 0 #C6F432;
  --md-rand: rgba(244,243,239,.6);
  --inkt3: rgba(244,243,239,.42); --lijn2: rgba(244,243,239,.22); --oker: #E0B44A; --groen: #9BD12A; --ok: #9BD12A; --warn: #FF7A5C;
  --sh-l: 0 0 0 1px rgba(244,243,239,.3), 6px 6px 0 #C6F432;
  --mt-vlak: #151514; --mt-vlak-2: #1F1F1D; --mt-lijn: rgba(244,243,239,.14); --mt-lijn-sterk: rgba(244,243,239,.26);
  --mt-tekst: #F4F3EF; --mt-tekst-2: rgba(244,243,239,.68); --mt-tekst-3: rgba(244,243,239,.46);
  --mt-merk: #C6F432; --mt-merk-hover: #D6FA6A; --mt-merk-zacht: rgba(198,244,50,.16); --mt-merk-tekst: #C6F432; --mt-op-merk: #0A0A0A;
  --mt-font: var(--md-letter);
  --ik-teal: #1C1C1A; --ik-groen: #1C1C1A; --ik-olijf: #1C1C1A; --ik-oker: #1C1C1A; --ik-oranje: #1C1C1A;
  --ik-rood: #1C1C1A; --ik-roze: #1C1C1A; --ik-paars: #1C1C1A; --ik-blauw: #1C1C1A; --ik-petrol: #1C1C1A;
  --ik-indigo: #1C1C1A; --ik-grafiet: #1C1C1A; --ik-bruin: #1C1C1A;
}
html[data-merk="zeroslack"] ::selection { background: #C6F432; color: #0A0A0A; }

/* ---------- 2. grond: vlak papier/carbon, geen teal-gloed ---------- */
html[data-merk="zeroslack"][data-thema] body { background: var(--md-grond) !important; letter-spacing: -.005em; }
html[data-merk="zeroslack"][data-thema] #grond.grond { background: none !important; }
html[data-merk="zeroslack"] body::before, html[data-merk="zeroslack"] body::after { display: none !important; }

/* ---------- 3. bovenbalk + woordmerk "ZERO SLACK" ---------- */
html[data-merk="zeroslack"][data-thema] .topbar {
  background: var(--md-grond) !important; border-radius: 0 !important;
  box-shadow: 0 1.5px 0 var(--md-label) !important;
}
html[data-merk="zeroslack"] .topbar .merk { gap: 10px; }
html[data-merk="zeroslack"] .topbar .merk > span { display: none; }
html[data-merk="zeroslack"] .topbar .merk::before,
html[data-merk="zeroslack"] .topbar .merk::after {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 17px; letter-spacing: -.045em; line-height: 1;
  text-transform: uppercase; color: var(--md-label); order: 2;
}
html[data-merk="zeroslack"] .topbar .merk::before { content: "ZERO"; margin-right: -5px; }
html[data-merk="zeroslack"] .topbar .merk::after { content: "SLACK"; order: 3; background: #C6F432; color: #0A0A0A; padding: 3px 4px 2px; }
html[data-merk="zeroslack"] .topbar .merk > svg { order: 1; border-radius: 2px; }
/* zoekveld: kaal veld met harde lijn */
html[data-merk="zeroslack"][data-thema] .topbar .zoek {
  background: var(--md-vlak) !important; border-radius: 2px !important;
  box-shadow: inset 0 0 0 1px var(--md-sep) !important;
}
html[data-merk="zeroslack"][data-thema] .topbar .zoek:hover { box-shadow: inset 0 0 0 1px var(--md-label) !important; }
html[data-merk="zeroslack"] .topbar .kbd { font-family: var(--m); border-radius: 2px !important; }
html[data-merk="zeroslack"] .topbar .avatar, html[data-merk="zeroslack"] .pm-av, html[data-merk="zeroslack"] .n2-avatar {
  border-radius: 2px !important; background: var(--md-label) !important; color: var(--md-grond) !important;
  font-family: 'Archivo', sans-serif; font-weight: 900;
}
html[data-merk="zeroslack"][data-thema="avond"] .topbar .avatar,
html[data-merk="zeroslack"][data-thema="avond"] .pm-av { background: #C6F432 !important; color: #0A0A0A !important; }

/* ---------- 4. Start: tegels, namen, knoppen ---------- */
html[data-merk="zeroslack"][data-thema] .ms-start .app-tile .app-icon,
html[data-merk="zeroslack"][data-thema] .ms-laag .app-tile .app-icon { border-radius: 3px !important; }
html[data-merk="zeroslack"][data-thema] .app-tile .app-icon[data-strak-kleur] {
  background-image: none !important;
  box-shadow: none !important;
}
html[data-merk="zeroslack"][data-thema] .app-tile:hover .app-icon[data-strak-kleur] {
  background-image: none !important; box-shadow: 3px 3px 0 #C6F432 !important; transform: translate(-1px, -1px);
}
html[data-merk="zeroslack"][data-thema="avond"] .app-icon[data-strak-kleur],
html[data-merk="zeroslack"][data-thema="avond"] .ms-mini[data-strak-kleur] { background: var(--ik) !important; color: #F4F3EF !important; box-shadow: inset 0 0 0 1px rgba(244,243,239,.16) !important; }
html[data-merk="zeroslack"][data-thema] .ms-start .app-tile-name, html[data-merk="zeroslack"][data-thema] .ms-laag .app-tile-name { font-weight: 500; letter-spacing: 0; line-height: 1.3; padding: 2px 3px 0; }
html[data-merk="zeroslack"] .page-dot { background: rgba(10,10,10,.22) !important; border-radius: 0 !important; }
html[data-merk="zeroslack"] .page-dot.on, html[data-merk="zeroslack"] .page-dot[aria-selected="true"] { background: #0A0A0A !important; width: 18px; }
html[data-merk="zeroslack"][data-thema="avond"] .page-dot { background: rgba(244,243,239,.25) !important; }
html[data-merk="zeroslack"][data-thema="avond"] .page-dot.on, html[data-merk="zeroslack"][data-thema="avond"] .page-dot[aria-selected="true"] { background: #C6F432 !important; }

/* ---------- 5. dock, chatknop, duim ---------- */
html[data-merk="zeroslack"][data-thema] .dock { border-radius: 3px !important; box-shadow: 0 0 0 1.5px var(--md-label), 4px 4px 0 var(--md-label) !important; background: var(--md-vlak) !important; }
html[data-merk="zeroslack"][data-thema] .chatknop {
  background: #0A0A0A !important; color: #C6F432 !important; border-radius: 3px !important;
  box-shadow: 4px 4px 0 #C6F432 !important; border: 1.5px solid #0A0A0A !important;
}
html[data-merk="zeroslack"][data-thema] .chatknop:hover { box-shadow: 6px 6px 0 #C6F432 !important; transform: translate(-1px, -1px); }
html[data-merk="zeroslack"][data-thema="avond"] .chatknop { background: #C6F432 !important; color: #0A0A0A !important; box-shadow: 4px 4px 0 #F4F3EF !important; border-color: #C6F432 !important; }
html[data-merk="zeroslack"][data-thema] .duim-zoek { border-radius: 3px !important; background: var(--md-vlak) !important; box-shadow: 0 0 0 1.5px var(--md-label) !important; }

/* ---------- 6. knoppen in de huisstijl: vierkant, primair = carbon (licht) / acid (donker) ---------- */
html[data-merk="zeroslack"] :is(button, input, select, textarea, .chip):not([role="switch"]) { border-radius: 2px !important; }
html[data-merk="zeroslack"] .md-knop, html[data-merk="zeroslack"] .builder-go,
html[data-merk="zeroslack"] .oo-knop, html[data-merk="zeroslack"] .pm-seg, html[data-merk="zeroslack"] .pm-seg button,
html[data-merk="zeroslack"] .ms-knop, html[data-merk="zeroslack"] .ms-seg, html[data-merk="zeroslack"] .ms-seg button { border-radius: 2px !important; }
html[data-merk="zeroslack"] .pm-seg button.on { background: var(--md-seg-aan) !important; color: var(--md-op-tint) !important; box-shadow: none !important; }

/* ---------- 7. vensters: kaal papier, harde rand en schaduw ---------- */
@media not all and (max-width: 759px) {
  html[data-merk="zeroslack"][data-thema] .window { box-shadow: 0 0 0 1.5px var(--md-label), 6px 6px 0 rgba(10,10,10,.14) !important; }
  html[data-merk="zeroslack"][data-thema] .window.focused { box-shadow: 0 0 0 1.5px var(--md-label), 8px 8px 0 #0A0A0A !important; }
  html[data-merk="zeroslack"][data-thema="avond"] .window.focused { box-shadow: 0 0 0 1px rgba(244,243,239,.5), 8px 8px 0 #C6F432 !important; }
  html[data-merk="zeroslack"][data-thema] .window-bar { background: var(--md-grond) !important; box-shadow: inset 0 -1px 0 var(--md-sep); }
  html[data-merk="zeroslack"][data-thema] .window-title { font-family: var(--m); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
  /* de verkeerslichten worden drie vierkantjes in de huisstijl */
  html[data-merk="zeroslack"] .win-lichten button { border-radius: 1px !important; background: #0A0A0A !important; color: #C6F432 !important; box-shadow: none !important; }
  html[data-merk="zeroslack"] .win-lichten .min { background: #8A8880 !important; color: #0A0A0A !important; }
  html[data-merk="zeroslack"] .win-lichten .max { background: #C6F432 !important; color: #0A0A0A !important; box-shadow: inset 0 0 0 1px #0A0A0A !important; }
  html[data-merk="zeroslack"][data-thema="avond"] .win-lichten button { background: #F4F3EF !important; color: #0A0A0A !important; }
  html[data-merk="zeroslack"][data-thema="avond"] .win-lichten .min { background: #77756D !important; }
  html[data-merk="zeroslack"][data-thema="avond"] .win-lichten .max { background: #C6F432 !important; box-shadow: none !important; }
}

/* ---------- 8. menu's, vellen, meldingen: papier met harde schaduw ---------- */
html[data-merk="zeroslack"] .pm-menu, html[data-merk="zeroslack"] .lv-pop, html[data-merk="zeroslack"] .md-menu,
html[data-merk="zeroslack"] .oo-nieuw, html[data-merk="zeroslack"] .oo-kaart, html[data-merk="zeroslack"] .widget-menu {
  border-radius: 3px !important; background: var(--md-vlak) !important;
  box-shadow: var(--md-schaduw-l) !important; border: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-merk="zeroslack"] .pm-naam { font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
html[data-merk="zeroslack"] .pm-sub { font-family: var(--m); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- 9. DM-paneel: kop in de huisstijl ---------- */
html[data-merk="zeroslack"] .dm-paneel { border-radius: 3px !important; box-shadow: var(--md-schaduw-l) !important; }
html[data-merk="zeroslack"] .dm-kop { background: var(--md-grond) !important; box-shadow: inset 0 -1.5px 0 var(--md-label) !important; }
html[data-merk="zeroslack"] .dm-titel b { font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; }
html[data-merk="zeroslack"] .dm-titel small { font-family: var(--m); font-size: 10.5px; letter-spacing: .04em; }
html[data-merk="zeroslack"] .dm-logo svg { border-radius: 2px; }

/* ---------- 10. focus ---------- */
html[data-merk="zeroslack"] :focus-visible { outline: 2px solid var(--md-label) !important; outline-offset: 2px; box-shadow: 0 0 0 5px var(--zs-acid-zacht); }

/* ---------- 11. inloggen: Zero Slack-poort ---------- */
html[data-merk="zeroslack"] .login { background: #0A0A0A !important; }
html[data-merk="zeroslack"] .login-card {
  background: #F4F3EF !important; color: #0A0A0A !important; border: 2px solid #0A0A0A !important; border-radius: 2px !important;
  box-shadow: 8px 8px 0 #C6F432 !important;
}
html[data-merk="zeroslack"] .login-card h1 { font-family: 'Archivo', sans-serif; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; color: #0A0A0A !important; }
html[data-merk="zeroslack"] #login-tenant { font-family: var(--m); letter-spacing: .14em; text-transform: uppercase; color: rgba(10,10,10,.6) !important; }
html[data-merk="zeroslack"] .login-card input { border: 1.5px solid #0A0A0A !important; border-radius: 2px !important; background: #FBFAF7 !important; color: #0A0A0A !important; }
html[data-merk="zeroslack"] .login-card input:focus { outline: none; box-shadow: 0 0 0 3px rgba(198,244,50,.7) !important; }
html[data-merk="zeroslack"] .login-card button {
  background: #0A0A0A !important; color: #F4F3EF !important; border: 1.5px solid #0A0A0A !important; border-radius: 2px !important;
  font-family: var(--m); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
html[data-merk="zeroslack"] .login-card button:hover { background: #C6F432 !important; color: #0A0A0A !important; }