/* ═══════════════════════════════════════════════════════════════════════════
 *  ZorX · de ontwerplaag
 *
 *  Dit bestand is de ENIGE plek waar het uiterlijk van onze schermen staat.
 *  Elk script laadt het als:
 *
 *      <link rel="stylesheet" href="nui://zorx-lib/web/zorx.css">
 *
 *  Verander je hier een kleur, dan verandert hij overal -- in het staffmenu,
 *  in de garages, en in alles wat we daarna nog maken. Dat is het hele punt:
 *  een script hoort alleen zijn EIGEN dingen te weten, niet hoe een knop
 *  eruitziet.
 *
 *  Een script mag hier onderaan zijn eigen regels bij zetten voor wat alleen
 *  bij hem hoort. Maar geen kleuren, geen randen, geen knoppen -- die staan
 *  hier, en alleen hier.
 *
 *  ── waarom er geen backdrop-filter in staat ──
 *
 *  In de browser van FiveM (Chromium) maakt `backdrop-filter` op een
 *  doorzichtige pagina een ZWART vlak achter het element: er is niets om te
 *  vervagen, en de compositor vult dat op met zwart. Dat kostte een avond
 *  zoeken. Diepte komt hier daarom uit LAGEN:
 *
 *      lijf    #101216   waar iets in ligt
 *      paneel  #14161b   de doos zelf
 *      kaart   #1a1d24   iets hoger, daar doe je iets
 *      knop    #23272f   het hoogste, dat raak je aan
 *
 *  Elke laag iets lichter dan de vorige, met een haarlijn ertussen. Dat leest
 *  als diepte en kan nergens fout gaan.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── lagen ── */
  --zx-lijf:    #0a0b0d;
  --zx-paneel:  #111214;
  --zx-kaart:   #17181b;
  --zx-knop:    #232529;
  --zx-knop-op: #2c2e33;

  --zx-rand:    rgba(255, 255, 255, 0.07);
  --zx-rand-op: rgba(255, 255, 255, 0.14);

  /* ── tekst ── */
  --zx-inkt:    #ffffff;
  --zx-gedempt: #a3a5ab;
  --zx-zwak:    #6a6c72;

  /* ── betekenis ──
     Eén accent. De andere drie betekenen iets en worden nergens anders
     gebruikt: groen is goed, geel is let op, rood is onomkeerbaar. */
  --zx-accent:    #4b8dff;
  --zx-goed:      #4ec98a;
  --zx-let:       #e2b14f;
  --zx-gevaar:    #e56a6a;

  /* ── maten ── */
  --zx-r-groot: 14px;
  --zx-r:       10px;
  --zx-r-klein:  8px;

  --zx-schaduw: 0 1px 0 rgba(255,255,255,.04) inset,
                0 24px 70px rgba(0,0,0,.55),
                0 2px 8px rgba(0,0,0,.4);
}

/* ═══════════════════════════════ grond */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: transparent;          /* het spel blijft zichtbaar */
  overflow: hidden;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--zx-inkt);
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

.zx-verborgen { display: none !important; }
.zx-rek { flex: 1; }

/* De vormenbank van zorx.js staat in de pagina maar neemt niets in. */
#zx-vormen { position: absolute; width: 0; height: 0; overflow: hidden; }

svg { width: 16px; height: 16px; flex: none; }
svg use, svg path, svg circle, svg rect, svg line {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ═══════════════════════════════ het paneel */

.zx-paneel {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 820px; max-width: 92vw;
  height: 560px; max-height: 88vh;
  background: var(--zx-paneel);
  border: 1px solid var(--zx-rand);
  border-radius: var(--zx-r-groot);
  box-shadow: var(--zx-schaduw);
  display: flex; flex-direction: column; overflow: hidden;
  animation: zx-op .16s cubic-bezier(.2, .8, .2, 1);
}
.zx-paneel.zx-breed { width: 900px; }
.zx-paneel.zx-smal  { width: 620px; height: 480px; }

@keyframes zx-op {
  from { opacity: 0; transform: translate(-50%, -49%) scale(.985); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── kop ── */

.zx-kop {
  display: flex; align-items: center; gap: 13px;
  min-height: 52px; padding: 0 16px; flex: none;
  border-bottom: 1px solid var(--zx-rand);
}
/* ═══ het merk voor elke paneeltitel ═══
 *
 * Eén regel hier en elk paneel dat `.zx-merk` gebruikt heeft het logo -- dat
 * zijn er elf. Per script een SVG in de HTML plakken zou elf keer hetzelfde
 * zijn, en dan staat er over een jaar op tien plekken een oude versie.
 *
 * Als achtergrondplaatje en niet als <img>: een bestand moet apart in
 * fxmanifest.lua staan van elke resource, en dat gaat een keer mis. Dit zit in
 * de stijl die ze toch al laden.
 *
 * De bron staat in D:\PinguScripts\_merk\merk.svg -- verander je die, pas dan
 * ook dit aan.
 */
.zx-merk {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 800; letter-spacing: .4px;
}
.zx-merk::before {
  content: "";
  width: 22px; height: 18px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='.7' y2='1'%3E%3Cstop offset='0' stop-color='%238ec0ff'/%3E%3Cstop offset='.5' stop-color='%233d8bff'/%3E%3Cstop offset='1' stop-color='%231a5fd0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='skewX(-9) translate(9 0)' fill='url(%23a)'%3E%3Cpath d='M44 6L66 6L110 94L86 94Z'/%3E%3Cpath d='M40 6L56 6L26 94L8 94Z'/%3E%3Cpath d='M33 6L37 6L5 94L1 94Z' opacity='.6'/%3E%3Cpath d='M34 62L84 62L90 76L30 76Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.zx-merk span { color: var(--zx-accent); }

/* Een paneel dat helemaal geen woord nodig heeft zet `.zx-alleen-merk` erbij:
   dan blijft het logo staan en verdwijnt de tekst. */
.zx-merk.zx-alleen-merk { font-size: 0; gap: 0; }
.zx-scheiding { width: 1px; height: 16px; background: var(--zx-rand); flex: none; }
.zx-kop h1 { font-size: 14px; font-weight: 600; letter-spacing: -.1px; }
.zx-kop .zx-onder { font-size: 12px; color: var(--zx-gedempt); display: block; margin-top: 1px; }

/* Een vierkantje met een pictogram, vooraan in de kop. */
.zx-teken {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: rgba(75, 141, 255, .13);
  border: 1px solid rgba(75, 141, 255, .3);
  color: var(--zx-accent);
}
.zx-teken svg { width: 19px; height: 19px; }
.zx-teken.zx-is-gevaar {
  background: rgba(229, 106, 106, .13);
  border-color: rgba(229, 106, 106, .3); color: var(--zx-gevaar);
}
.zx-teken.zx-is-goed {
  background: rgba(78, 201, 138, .13);
  border-color: rgba(78, 201, 138, .3); color: var(--zx-goed);
}

/* ── lijf en voet ── */

.zx-lijf { flex: 1; min-height: 0; display: flex; }
.zx-blad { flex: 1; overflow-y: auto; padding: 16px 18px; min-height: 0; }
.zx-blad.zx-diep { background: var(--zx-lijf); }

.zx-voet {
  display: flex; justify-content: space-between; align-items: center;
  height: 34px; padding: 0 16px; flex: none;
  border-top: 1px solid var(--zx-rand);
  font-size: 11px; color: var(--zx-zwak);
}
.zx-voet .zx-naam {
  color: var(--zx-accent); font-weight: 700;
  font-size: 10.5px; letter-spacing: 1.4px; opacity: .65;
}

/* ── zijkolom ── */

.zx-rail {
  width: 268px; flex: none;
  background: var(--zx-lijf);
  border-right: 1px solid var(--zx-rand);
  display: flex; flex-direction: column; min-height: 0;
}
.zx-railkop {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 16px 8px;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--zx-zwak); font-weight: 600;
}
.zx-raillijst { flex: 1; overflow-y: auto; padding: 0 8px 12px; }

/* ── schuifbalken ──
   Bij het paneel, niet bij de browser. */

.zx-blad::-webkit-scrollbar, .zx-raillijst::-webkit-scrollbar { width: 8px; }
.zx-blad::-webkit-scrollbar-track, .zx-raillijst::-webkit-scrollbar-track { background: transparent; }
.zx-blad::-webkit-scrollbar-thumb, .zx-raillijst::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.09); border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
}
.zx-blad::-webkit-scrollbar-thumb:hover, .zx-raillijst::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.16); background-clip: content-box;
}

/* ═══════════════════════════════ kaarten */

.zx-kaart {
  background: var(--zx-kaart);
  border: 1px solid var(--zx-rand);
  border-radius: var(--zx-r);
  padding: 13px 14px 14px;
  margin-bottom: 10px;
}
.zx-kaart:last-child { margin-bottom: 0; }

/* Een streep aan de zijkant voor de kaart waar iets onomkeerbaars gebeurt.
   Niet als sier -- dat mag je zien voor je klikt. */
.zx-kaart.zx-streng {
  border-left: 2px solid rgba(229, 106, 106, .4);
  padding-left: 13px;
}

.zx-titel {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--zx-zwak); font-weight: 600; margin-bottom: 10px;
}
.zx-uitleg {
  font-size: 12.5px; color: var(--zx-gedempt); line-height: 1.55;
  margin: -4px 0 10px;
}

/* ═══════════════════════════════ knoppen */

.zx-knop, button.zx-knop, a.zx-knop {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--zx-knop);
  border: 1px solid var(--zx-rand);
  border-radius: var(--zx-r-klein);
  color: var(--zx-inkt);
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  padding: 8px 14px; cursor: pointer; text-decoration: none;
  transition: background .11s ease, border-color .11s ease, transform .06s ease;
}
.zx-knop:hover { background: var(--zx-knop-op); border-color: var(--zx-rand-op); }
.zx-knop:active { transform: translateY(1px); }
.zx-knop svg { color: var(--zx-gedempt); }
.zx-knop:hover svg { color: var(--zx-inkt); }

.zx-knop.zx-hoofd {
  background: var(--zx-accent); border-color: var(--zx-accent);
  color: #06121f; font-weight: 600;
}
.zx-knop.zx-hoofd:hover { background: var(--zx-accent); filter: brightness(1.08); }
.zx-knop.zx-hoofd svg { color: #06121f; }

.zx-knop.zx-let { color: var(--zx-let); border-color: rgba(226,177,79,.26); }
.zx-knop.zx-let svg { color: var(--zx-let); }
.zx-knop.zx-let:hover { background: rgba(226,177,79,.12); border-color: rgba(226,177,79,.45); }

.zx-knop.zx-gevaar { color: var(--zx-gevaar); border-color: rgba(229,106,106,.26); }
.zx-knop.zx-gevaar svg { color: var(--zx-gevaar); }
.zx-knop.zx-gevaar:hover { background: rgba(229,106,106,.12); border-color: rgba(229,106,106,.45); }

.zx-knop.zx-klein { padding: 5px 10px; font-size: 11.5px; }

.zx-knop[disabled], .zx-knop:disabled { opacity: .32; cursor: not-allowed; }
.zx-knop[disabled]:hover { background: var(--zx-knop); border-color: var(--zx-rand); transform: none; }

/* Een kaal pictogramknopje, bijvoorbeeld het kruisje in de kop. */
.zx-ikoon {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: none; border: none; border-radius: var(--zx-r-klein);
  color: var(--zx-zwak); cursor: pointer;
}
.zx-ikoon:hover { background: var(--zx-knop); color: var(--zx-inkt); }

.zx-knoppen { display: flex; flex-wrap: wrap; gap: 7px; }

/* ═══════════════════════════════ invoer */

/* Alleen de klasse, geen `input[type=text].zx-veld` erbij. Dat laatste heeft
   een HOGERE specificiteit en won daardoor van `.zx-zoekbak .zx-veld` -- met
   als gevolg dat het zoekpictogram over de tekst heen viel. Zulke fouten
   verstop je in een lange keuzelijst; met één klasse kan het niet. */
.zx-veld {
  width: 100%;
  background: var(--zx-knop);
  border: 1px solid transparent;
  border-radius: var(--zx-r-klein);
  color: var(--zx-inkt);
  font-family: inherit; font-size: 13px;
  padding: 9px 12px; outline: none;
}
.zx-veld::placeholder { color: var(--zx-zwak); }
.zx-veld:focus { border-color: rgba(75,141,255,.5); background: var(--zx-knop-op); }
textarea.zx-veld { min-height: 90px; resize: vertical; line-height: 1.5; }

/* Een veld met een pictogram erin, bijvoorbeeld zoeken. */
.zx-zoekbak { position: relative; }
.zx-zoekbak svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--zx-zwak); pointer-events: none;
}
.zx-zoekbak .zx-veld { padding-left: 33px; }

/* Een label boven een veld. */
.zx-label { display: block; margin-bottom: 12px; }
.zx-label > span {
  display: block;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--zx-zwak); font-weight: 600; margin-bottom: 6px;
}
.zx-label em {
  font-style: normal; color: var(--zx-zwak);
  text-transform: none; letter-spacing: 0; font-weight: 400;
}

/* ── schakelaar ── */

.zx-schakel {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.zx-schakel:last-child { border-bottom: none; }
.zx-schakel .zx-tekst { flex: 1; }
.zx-schakel .zx-tekst b { display: block; font-size: 13.5px; font-weight: 550; margin-bottom: 3px; }
.zx-schakel .zx-tekst span { font-size: 12.5px; color: var(--zx-gedempt); line-height: 1.5; }

.zx-knopje { position: relative; width: 38px; height: 22px; flex: none; margin-top: 2px; }
.zx-knopje input { position: absolute; opacity: 0; width: 0; height: 0; }
.zx-knopje i {
  position: absolute; inset: 0; border-radius: 99px;
  background: var(--zx-knop); border: 1px solid var(--zx-rand);
  transition: background .14s ease, border-color .14s ease;
}
.zx-knopje i::after {
  content: ""; position: absolute; left: 3px; top: 3px;
  width: 14px; height: 14px; border-radius: 99px;
  background: var(--zx-zwak);
  transition: transform .14s ease, background .14s ease;
}
.zx-knopje input:checked + i { background: rgba(75,141,255,.2); border-color: rgba(75,141,255,.5); }
.zx-knopje input:checked + i::after { transform: translateX(16px); background: var(--zx-accent); }

/* ═══════════════════════════════ rijen en lijsten */

.zx-rij {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: var(--zx-r);
  border: 1px solid transparent;
}
.zx-rij.zx-klikbaar { cursor: pointer; }
.zx-rij.zx-klikbaar:hover { background: rgba(255,255,255,.04); }
.zx-rij.zx-aan {
  background: rgba(75,141,255,.11);
  border-color: rgba(75,141,255,.22);
}
.zx-rij .zx-naam { flex: 1; min-width: 0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zx-rij .zx-bij { font-size: 11px; color: var(--zx-zwak); font-variant-numeric: tabular-nums; }

/* Een dikkere rij, met een vlak eromheen. Voor lijsten waar per regel iets
   te doen valt. */
.zx-blok {
  display: flex; align-items: center; gap: 13px;
  background: var(--zx-kaart); border: 1px solid var(--zx-rand);
  border-radius: var(--zx-r); padding: 12px 14px; margin-bottom: 8px;
}
.zx-blok:last-child { margin-bottom: 0; }

/* Een rondje met een letter of pictogram. */
.zx-bol {
  width: 34px; height: 34px; flex: none; border-radius: 99px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
  background: var(--zx-knop); border: 1px solid var(--zx-rand);
  color: var(--zx-gedempt);
}
.zx-bol.zx-vierkant { border-radius: 9px; }
.zx-bol.zx-groot { width: 44px; height: 44px; font-size: 17px; }
.zx-bol.zx-klein { width: 28px; height: 28px; font-size: 11.5px; }
.zx-bol.zx-is-goed {
  background: rgba(78,201,138,.14); border-color: rgba(78,201,138,.35); color: var(--zx-goed);
}
.zx-bol.zx-is-accent {
  background: rgba(75,141,255,.14); border-color: rgba(75,141,255,.35); color: var(--zx-accent);
}
.zx-bol.zx-is-gevaar {
  background: rgba(229,106,106,.14); border-color: rgba(229,106,106,.35); color: var(--zx-gevaar);
}

/* ═══════════════════════════════ merkjes en stippen */

.zx-merkje {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px;
  font-weight: 600; border-radius: 99px; padding: 3px 9px;
  background: var(--zx-knop); border: 1px solid var(--zx-rand);
  color: var(--zx-gedempt); white-space: nowrap;
}
.zx-merkje.zx-is-goed   { color: var(--zx-goed);   border-color: rgba(78,201,138,.3);  background: rgba(78,201,138,.1); }
.zx-merkje.zx-is-let    { color: var(--zx-let);    border-color: rgba(226,177,79,.3);  background: rgba(226,177,79,.1); }
.zx-merkje.zx-is-gevaar { color: var(--zx-gevaar); border-color: rgba(229,106,106,.3); background: rgba(229,106,106,.1); }
.zx-merkje.zx-is-accent { color: var(--zx-accent); border-color: rgba(75,141,255,.3);  background: rgba(75,141,255,.1); }

.zx-stip { width: 7px; height: 7px; border-radius: 99px; background: var(--zx-zwak); flex: none; }
.zx-stip.zx-aan { background: var(--zx-goed); box-shadow: 0 0 8px rgba(78,201,138,.7); }

.zx-punt { width: 3px; height: 3px; border-radius: 99px; background: var(--zx-zwak); flex: none; }

/* Een kenteken. Hoort er als een kenteken uit te zien. */
.zx-kenteken {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px; letter-spacing: 1px; font-weight: 700;
  background: #d8d8d0; color: #14161b;
  border-radius: 3px; padding: 2px 7px;
}

.zx-toets {
  font-family: inherit; font-size: 10px;
  background: var(--zx-knop); border: 1px solid var(--zx-rand);
  border-bottom-width: 2px; border-radius: 4px;
  padding: 1px 5px; color: var(--zx-gedempt);
}

/* ═══════════════════════════════ leeg en balken */

.zx-leeg {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 44px 20px; text-align: center;
}
.zx-leeg .zx-vorm {
  width: 46px; height: 46px; border-radius: var(--zx-r);
  border: 1.5px dashed var(--zx-rand-op); margin-bottom: 2px;
}
.zx-leeg b { font-size: 14px; font-weight: 550; color: var(--zx-gedempt); }
.zx-leeg span { font-size: 12.5px; color: var(--zx-zwak); }

.zx-balk {
  display: flex; align-items: flex-start; gap: 11px;
  border-radius: var(--zx-r); padding: 13px 15px; margin-bottom: 12px;
  font-size: 13px; line-height: 1.55;
}
.zx-balk svg { margin-top: 1px; }
.zx-balk.zx-is-let    { background: rgba(226,177,79,.09);  border: 1px solid rgba(226,177,79,.26); }
.zx-balk.zx-is-let svg { color: var(--zx-let); }
.zx-balk.zx-is-goed   { background: rgba(78,201,138,.09);  border: 1px solid rgba(78,201,138,.26); }
.zx-balk.zx-is-goed svg { color: var(--zx-goed); }
.zx-balk.zx-is-gevaar { background: rgba(229,106,106,.09); border: 1px solid rgba(229,106,106,.26); }
.zx-balk.zx-is-gevaar svg { color: var(--zx-gevaar); }

/* ═══════════════════════════════ meldingen
 *
 * Worden door zorx.js gemaakt. Elk script gebruikt dezelfde, zodat een melding
 * er overal hetzelfde uitziet -- ook dat is ontwerp. */

#zx-meldingen {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; z-index: 9999;
}
.zx-melding {
  display: flex; align-items: center; gap: 10px;
  background: var(--zx-paneel);
  border: 1px solid var(--zx-rand);
  border-left: 3px solid var(--zx-accent);
  border-radius: var(--zx-r-klein); padding: 10px 16px;
  font-size: 12.5px; color: var(--zx-inkt);
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  animation: zx-schuif .18s ease;
  transition: opacity .4s ease;
}
.zx-melding.zx-is-goed   { border-left-color: var(--zx-goed); }
.zx-melding.zx-is-goed svg { color: var(--zx-goed); }
.zx-melding.zx-is-let    { border-left-color: var(--zx-let); }
.zx-melding.zx-is-let svg { color: var(--zx-let); }
.zx-melding.zx-is-gevaar { border-left-color: var(--zx-gevaar); }
.zx-melding.zx-is-gevaar svg { color: var(--zx-gevaar); }
@keyframes zx-schuif {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════ raster */

.zx-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zx-drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) { .zx-twee, .zx-drie { grid-template-columns: 1fr; } }