/* ============================================================================
   equal-txadmin.css — het txAdmin-webpaneel (React/Tailwind/shadcn) in de
   Equal-huisstijl. Wordt door patch.js als LAATSTE stylesheet in
   monitor/panel/index.html gezet (als equal-<hash>.v800.css).

   Huisstijl (fivem/ontwikkeling/equal-stijl/ONTWERP.md): zwart, plat, vierkant,
   haarlijnen; wit = actief; rood (#ec2403) alleen voor gevaar/offline;
   koppen/knoppen/labels in Bahnschrift HOOFDLETTERS, gewone tekst Segoe UI.

   Aanpak: 1) de shadcn-variabelen (--background, --primary, ...) overschrijven,
   daarmee kleurt bijna alles vanzelf om; 2) gerichte regels voor wat met vaste
   kleuren, rondingen, schaduwen of het txAdmin-logo werkt.
   url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTA1IDIwMCIgd2lkdGg9IjExMDUiIGhlaWdodD0iMjAwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDE1NnYyOGgtMTU2ek0wIDg2aDE1NnYyOGgtMTU2ek0wIDE3MmgxNTZ2MjhoLTE1NnpNMjA0IDBoMjh2MjAwaC0yOHpNMzg2IDBoMjh2MjAwaC0yOHpNMjMyIDBoMTU0djI4aC0xNTR6TTIzMiAxNzJoMTU0djI4aC0xNTR6TTM4NiAxNzJoNTh2MjhoLTU4ek00NzcgMGgyOHYyMDBoLTI4ek02MzkgMGgyOHYyMDBoLTI4ek01MDUgMTcyaDEzNHYyOGgtMTM0ek03MTUgMGgyOHYyMDBoLTI4ek04NzcgMGgyOHYyMDBoLTI4ek03NDMgMGgxMzR2MjhoLTEzNHpNNzQzIDg2aDEzNHYyOGgtMTM0ek05NTMgMGgyOHYyMDBoLTI4ek05ODEgMTcyaDEyNHYyOGgtMTI0eiIvPjwvc3ZnPgo=") / url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGgxMDB2OGgtMTAwek0wIDkyaDEwMHY4aC0xMDB6TTAgOGg4djg0aC04ek05MiA4aDh2ODRoLTh6TTI0IDMyaDUydjEyaC01MnpNMjQgNTZoNTJ2MTJoLTUyeiIvPjwvc3ZnPgo=") vult patch.js in met het logo (data-URI).
   ============================================================================ */

/* ── 1. Variabelen (licht én donker hetzelfde: Equal is altijd zwart) ─────── */
:root,
.dark,
html.dark,
html.light {
  --background: 0 0% 0%;              /* #000 */
  --foreground: 0 0% 100%;
  --card: 0 0% 2.4%;                  /* #060606 */
  --card-foreground: 0 0% 100%;
  --popover: 0 0% 5.1%;               /* #0d0d0d */
  --popover-foreground: 0 0% 100%;
  --primary: 0 0% 100%;               /* wit = aan */
  --primary-foreground: 0 0% 0%;
  --secondary: 0 0% 8.2%;             /* #151515 */
  --secondary-foreground: 0 0% 100%;
  --muted: 0 0% 8.2%;
  --muted-foreground: 0 0% 55%;       /* #8c8c8c */
  --accent: 0 0% 100%;
  --accent-foreground: 0 0% 0%;
  --border: 0 0% 14.9%;               /* #262626 */
  --input: 0 0% 22%;                  /* #383838 */
  --ring: 0 0% 100%;
  --destructive: 8.5 97.5% 46.9%;     /* #ec2403 */
  --destructive-foreground: 0 0% 100%;
  --destructive-hint: 9 100% 6%;
  --destructive-inline: 8.5 100% 56%;
  /* waarschuwing/succes/info: geen kleur in de huisstijl → wit/grijs */
  --warning: 0 0% 85%;
  --warning-foreground: 0 0% 0%;
  --warning-hint: 0 0% 5.1%;
  --warning-inline: 0 0% 85%;
  --success: 0 0% 100%;
  --success-foreground: 0 0% 0%;
  --success-hint: 0 0% 5.1%;
  --success-inline: 0 0% 100%;
  --info: 0 0% 85%;
  --info-foreground: 0 0% 0%;
  --info-hint: 0 0% 5.1%;
  --info-inline: 0 0% 85%;
  --font-sans: 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --radius: 2px;

  --eq-caps: 'Bahnschrift', 'Segoe UI', 'Arial Narrow', sans-serif;
  --eq-line: #1c1c1c;
  --eq-line2: #262626;
  --eq-line3: #383838;
  --eq-rood: #ec2403;
  color-scheme: dark;
}

html, body {
  background: #000 !important;
  color: #fff;
  font-family: var(--font-sans);
}
html { scrollbar-color: #383838 #000; }
::selection { background: #fff; color: #000; }

/* ── 2. Plat en vierkant ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-shadow: none !important;
  text-shadow: none !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}
[class*="backdrop-blur"], [class*="backdrop-filter"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl,
[class*="rounded-t-"], [class*="rounded-b-"], [class*="rounded-l-"], [class*="rounded-r-"],
[class*="xs:rounded"], [class*="sm:rounded"], [class*="md:rounded"], [class*="lg:rounded"] {
  border-radius: 2px !important;
}
/* Rond mag alleen voor statusbolletjes, avatars en de switch-knop. */
[class*="bg-gradient"], [class*="from-\["], [class*="to-\["] { background-image: none !important; }
[class*="hover\:scale"]:hover, [class*="group-hover\:scale"] { transform: none !important; }
:focus-visible { outline: 1px solid #fff !important; outline-offset: 1px; }

/* ── 3. Letters ──────────────────────────────────────────────────────────── */
body, input, textarea, select, button { font-family: var(--font-sans); }
.font-mono, code, kbd, pre, .xterm { font-family: 'JetBrains Mono Variable', 'Cascadia Mono', Consolas, monospace; }

/* Hoofdletterfont voor knoppen, navigatie, tabbladen, labels, tabelkoppen en kaarttitels. */
button.inline-flex,
a.inline-flex,
nav a, nav button,
[role="tab"],
[role="menuitem"],
th,
label,
.tx-sidebar h2,
header nav,
[data-radix-collection-item][role="tab"] {
  font-family: var(--eq-caps) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
}
/* Knoppen met alleen een icoon of met namen/ID's niet in hoofdletters dwingen. */
button.font-mono, .font-mono button { text-transform: none; letter-spacing: normal; font-family: inherit !important; }
h1, h2, h3 { font-family: var(--eq-caps); letter-spacing: .08em; text-transform: uppercase; }
.prose h1, .prose h2, .prose h3 { text-transform: none; letter-spacing: normal; }

/* ── 4. Header + logo ────────────────────────────────────────────────────── */
header.sticky {
  background: #000 !important;
  border-bottom: 1px solid var(--eq-line2) !important;
}
/* txAdmin-logo's (inline SVG) vervangen door het Equal-logo. Het SVG blijft staan
   (zelfde maat), we verbergen alleen de inhoud en tekenen ons logo als achtergrond. */
svg[viewBox="0 0 1115 288"],
svg[viewBox="0 0 288 288"] {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTA1IDIwMCIgd2lkdGg9IjExMDUiIGhlaWdodD0iMjAwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDE1NnYyOGgtMTU2ek0wIDg2aDE1NnYyOGgtMTU2ek0wIDE3MmgxNTZ2MjhoLTE1NnpNMjA0IDBoMjh2MjAwaC0yOHpNMzg2IDBoMjh2MjAwaC0yOHpNMjMyIDBoMTU0djI4aC0xNTR6TTIzMiAxNzJoMTU0djI4aC0xNTR6TTM4NiAxNzJoNTh2MjhoLTU4ek00NzcgMGgyOHYyMDBoLTI4ek02MzkgMGgyOHYyMDBoLTI4ek01MDUgMTcyaDEzNHYyOGgtMTM0ek03MTUgMGgyOHYyMDBoLTI4ek04NzcgMGgyOHYyMDBoLTI4ek03NDMgMGgxMzR2MjhoLTEzNHpNNzQzIDg2aDEzNHYyOGgtMTM0ek05NTMgMGgyOHYyMDBoLTI4ek05ODEgMTcyaDEyNHYyOGgtMTI0eiIvPjwvc3ZnPgo=") center / contain no-repeat;
}
svg[viewBox="0 0 288 288"] { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGgxMDB2OGgtMTAwek0wIDkyaDEwMHY4aC0xMDB6TTAgOGg4djg0aC04ek05MiA4aDh2ODRoLTh6TTI0IDMyaDUydjEyaC01MnpNMjQgNTZoNTJ2MTJoLTUyeiIvPjwvc3ZnPgo="); }
svg[viewBox="0 0 1115 288"] > *,
svg[viewBox="0 0 288 288"] > * { display: none !important; }
header svg[viewBox="0 0 1115 288"] { height: 1.5rem !important; width: 8.5rem; }
/* Klein "txAdmin"-creditje onder het logo (MIT-software, credit blijft). */
header a:has(> svg[viewBox="0 0 1115 288"]) { position: relative; display: inline-block; }
header a:has(> svg[viewBox="0 0 1115 288"])::after {
  content: 'TXADMIN';
  position: absolute; left: 0; right: 0; bottom: -0.9rem;
  text-align: center;
  font: 600 .55rem/1 var(--eq-caps);
  letter-spacing: .35em;
  color: #4a4a4a;
}

/* Header-knoppen (Server/Menu/Spelers op smalle schermen) */
header button[class*="bg-zinc"], header button[class*="dark:bg-zinc"] {
  background: #000 !important; border-color: var(--eq-line3) !important; color: #fff !important;
}
header button[class*="bg-zinc"]:hover { background: #fff !important; color: #000 !important; }

/* Hoofdnavigatie: wit = actief */
header nav a, header nav button {
  border-radius: 2px !important;
  color: #d9d9d9;
  font-size: .8rem;
}
header nav a:hover, header nav button:hover,
header nav button[data-state="open"] {
  background: #151515 !important; color: #fff !important;
}
header nav a[data-active], header nav a.bg-secondary, header nav a[aria-current="page"] {
  background: #fff !important; color: #000 !important;
}
/* Uitklapmenu "Systeem" */
[data-radix-navigation-menu-viewport], .origin-top-center {
  background: #0d0d0d !important;
  border: 1px solid var(--eq-line3) !important;
  border-radius: 2px !important;
}

/* ── 5. Kaarten, zijbalken, panelen ──────────────────────────────────────── */
.bg-card { background-color: #060606 !important; }
.border, .border-b, .border-t, .border-l, .border-r, .border-x, .border-y { border-color: var(--eq-line2); }
.tx-sidebar > div.rounded-xl,
.rounded-xl.border.bg-card {
  border: 1px solid var(--eq-line2) !important;
  background: #060606 !important;
}
.tx-sidebar h2, .tx-sidebar h3 { text-transform: uppercase; }

/* Zijbalkmenu (Dashboard / Live console / ...): hover = witte balk links, actief = wit vlak */
.tx-sidebar a.inline-flex, .tx-sidebar a.flex {
  border-radius: 2px !important;
  font-size: .78rem;
  color: #d9d9d9;
  border-left: 3px solid transparent;
}
.tx-sidebar a.inline-flex:hover { background: #151515 !important; color: #fff !important; border-left-color: #fff; }
.tx-sidebar a.bg-secondary, .tx-sidebar a[data-active], .tx-sidebar a[aria-current="page"] {
  background: #fff !important; color: #000 !important; border-left-color: #fff;
}
.tx-sidebar a.bg-secondary svg { color: #000; }

/* Status-badges (ONLINE / UIT / ...) */
.tx-sidebar [class*="rounded"][class*="text-xs"], .tx-sidebar .font-mono.rounded {
  border-radius: 2px !important;
  font-family: var(--eq-caps) !important;
  letter-spacing: .08em;
}

/* Hosting-advertenties: zwart-wit (huisstijlregel 9). */
img[src*="advert-"], img[src*="discord.png"], img[src*="zap_"] { filter: grayscale(1) brightness(.9); }
img[src*="advert-"]:hover, img[src*="discord.png"]:hover { filter: grayscale(1) brightness(1.1); }

/* ── 6. Knoppen ──────────────────────────────────────────────────────────── */
button.inline-flex, a.inline-flex { border-radius: 2px !important; font-size: .78rem; }
.bg-primary { background-color: #fff !important; color: #000 !important; }
.bg-primary:hover, .hover\:bg-primary\/75:hover { background-color: #d9d9d9 !important; }
.bg-secondary { background-color: #151515 !important; }
/* shadcn markeert de gekozen tab/menuknop met bg-secondary: in de huisstijl is dat wit */
button.bg-secondary.text-secondary-foreground, a.bg-secondary.text-secondary-foreground {
  background-color: #fff !important; color: #000 !important; border-color: #fff !important;
}
button.bg-secondary.text-secondary-foreground svg, a.bg-secondary.text-secondary-foreground svg { color: #000 !important; }
.bg-muted { background-color: #0d0d0d !important; }
/* Omlijnde knoppen: haarlijn, hover wordt wit vlak */
button.border, button[class*="border-input"], button[class*="outline"] { border-color: var(--eq-line3) !important; }
button.inline-flex:not(.bg-primary):not(.bg-destructive):hover,
button[class*="hover:bg-primary"]:hover,
a[class*="hover:bg-primary"]:hover {
  background-color: #fff !important; color: #000 !important; border-color: #fff !important;
}
button.inline-flex:not(.bg-primary):not(.bg-destructive):hover svg { color: #000; }
/* Gevaarlijke knoppen blijven rood */
.bg-destructive { background-color: var(--eq-rood) !important; color: #fff !important; }
.text-destructive, .text-destructive-inline { color: #ff3b1a !important; }
button[class*="text-destructive"]:hover, button[class*="hover:bg-destructive"]:hover {
  background-color: var(--eq-rood) !important; color: #fff !important; border-color: var(--eq-rood) !important;
}
/* Vaste kleurknoppen (Discord, cfx.re, groen/roze accenten) */
.bg-discord, .hover\:bg-discord-active:hover, .cfxrebtn, .dark .cfxrebtn {
  background: #fff !important; color: #000 !important; border: 1px solid #fff !important;
}
.bg-discord *, .cfxrebtn * { color: #000 !important; }
.cfxrebtn:hover { background: #d9d9d9 !important; }
.bg-pink-500, .bg-pink-600, .bg-fuchsia-600, .bg-green-600, .bg-green-800, .bg-blue-800, .bg-emerald-300\/75,
.xs\:bg-green-500, .sm\:bg-green-500, .md\:bg-green-500, .lg\:bg-green-500, .xl\:bg-green-500 {
  background-color: #fff !important; color: #000 !important;
}
.bg-red-500, .bg-red-600, .bg-rose-800 { background-color: var(--eq-rood) !important; color: #fff !important; }
.text-pink-500, .text-sky-600, .text-violet-600, .text-emerald-600, .text-green-500, .text-yellow-600, .text-amber-600,
.dark\:text-amber-300:is(.dark *), .dark\:text-emerald-300:is(.dark *), .dark\:text-sky-300:is(.dark *), .dark\:text-violet-300:is(.dark *) {
  color: #fff !important;
}
.text-red-500, .text-red-800, .text-rose-600, .dark\:text-rose-300:is(.dark *) { color: #ff3b1a !important; }
.border-pink-600, .hover\:border-fuchsia-500:hover { border-color: #fff !important; }
.border-red-500, .border-red-800, .border-red-500\/50 { border-color: var(--eq-rood) !important; }
.bg-zinc-100, .bg-zinc-200, .bg-zinc-200\/90, .bg-zinc-300\/75, .dark\:bg-zinc-900:is(.dark *), .dark\:bg-zinc-800:is(.dark *),
.dark\:bg-zinc-700:is(.dark *), .dark\:bg-zinc-800\/90:is(.dark *), .bg-zinc-900\/75, .bg-\[\#1E1E1E\] {
  background-color: #0d0d0d !important;
}
.dark\:border-zinc-800:is(.dark *), .border-zinc-200 { border-color: var(--eq-line3) !important; }

/* ── 7. Formulieren ──────────────────────────────────────────────────────── */
input, textarea, select, [role="combobox"], button[role="combobox"] {
  background-color: #000 !important;
  border-color: var(--eq-line3) !important;
  border-radius: 2px !important;
  color: #fff;
}
input:focus, textarea:focus, [role="combobox"]:focus { border-color: #fff !important; }
input::placeholder, textarea::placeholder { color: #4a4a4a !important; }
kbd, .tx-playerlist kbd { background: #151515 !important; border: 1px solid var(--eq-line3) !important; border-radius: 2px !important; color: #8c8c8c; }
/* Switch: vierkant, aan = wit */
button[role="switch"] { border-radius: 2px !important; border: 1px solid var(--eq-line3) !important; }
button[role="switch"] > span { border-radius: 1px !important; }
button[role="switch"][data-state="checked"] { background-color: #fff !important; }
button[role="switch"][data-state="checked"] > span { background-color: #000 !important; }
button[role="switch"][data-state="unchecked"] { background-color: #151515 !important; }
button[role="switch"][data-state="unchecked"] > span { background-color: #8c8c8c !important; }
/* Checkbox / radio */
button[role="checkbox"] { border-radius: 2px !important; border-color: var(--eq-line3) !important; }
button[role="checkbox"][data-state="checked"] { background: #fff !important; color: #000 !important; }
button[role="radio"] { border-color: #8c8c8c !important; }

/* ── 8. Tabellen, lijsten, tabbladen ─────────────────────────────────────── */
table { border-color: var(--eq-line2); }
thead, thead tr { background: #0d0d0d !important; }
th { font-size: .72rem !important; color: #8c8c8c !important; font-weight: 600 !important; }
tbody tr { border-color: var(--eq-line) !important; }
tbody tr:hover { background: #0d0d0d !important; }
[role="tablist"] { background: #000 !important; border: 1px solid var(--eq-line2); border-radius: 2px !important; }
[role="tab"] { border-radius: 2px !important; font-size: .75rem; color: #8c8c8c; }
[role="tab"]:hover { color: #fff; }
[role="tab"][data-state="active"], [role="tab"][aria-selected="true"] {
  background: #fff !important; color: #000 !important;
}
[role="tab"][data-state="active"] svg { color: #000; }

/* Spelerslijst rechts */
.tx-playerlist .player { border-left: 3px solid transparent; border-radius: 0 !important; }
.tx-playerlist .player:hover { background: #151515 !important; border-left-color: #fff; }
.tx-playerlist .pid-badge { background: #000 !important; border-color: var(--eq-line3) !important; color: #8c8c8c !important; border-radius: 2px !important; }

/* ── 9. Dialogen, menu's, meldingen ──────────────────────────────────────── */
[role="dialog"], [role="alertdialog"], [role="menu"], [data-radix-popper-content-wrapper] > div, [role="listbox"] {
  background-color: #0d0d0d !important;
  border: 1px solid var(--eq-line3) !important;
  border-radius: 2px !important;
}
[role="menuitem"], [role="option"] { border-radius: 2px !important; font-size: .78rem; }
[role="menuitem"]:hover, [role="menuitem"][data-highlighted], [role="option"][data-highlighted], [role="option"]:hover {
  background: #fff !important; color: #000 !important;
}
[role="menuitem"][data-highlighted] svg { color: #000; }
/* Donkere laag achter dialogen */
.bg-black\/80, .bg-black\/60, [data-state="open"].fixed.inset-0 { background-color: rgba(0, 0, 0, .82) !important; }
/* Tooltips */
[data-radix-popper-content-wrapper] [data-side] { border-radius: 2px !important; }
/* Toasts */
.prose-toast, [data-sonner-toast], .animate-toastbar-enter > div, .animate-toastbar-leave > div {
  border-radius: 2px !important;
}

/* ── 10. Waarschuwingsbalk boven (verbinding kwijt, update, ...) ──────────── */
.bg-destructive-hint { background-color: #1a0400 !important; }
.bg-warning-hint, .bg-info-hint, .bg-success-hint { background-color: #0d0d0d !important; }
.border-warning\/70, .border-info\/70, .border-success\/70 { border-color: var(--eq-line3) !important; }

/* ── 11. Inlogscherm ─────────────────────────────────────────────────────── */
.pattern-dots, .dark .pattern-dots {
  background-color: #000 !important;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}
.pattern-dots svg[viewBox="0 0 1115 288"] { width: 15rem !important; height: 3rem; }
.pattern-dots .bg-card\/40, .pattern-dots [class*="bg-card"] {
  background: #060606 !important;
  border: 1px solid var(--eq-line2) !important;
}
/* Kop van de inlogkaart (servernaam + "log in om verder te gaan"): mag meegroeien */
.pattern-dots h3 { height: auto !important; min-height: 3.5rem; letter-spacing: .06em; padding: .25rem 0; }
.pattern-dots h3 * { letter-spacing: .06em; line-height: 1.25; }
/* Labels (Gebruikersnaam/Wachtwoord) zijn in het Nederlands langer: 3 van de 8 kolommen */
.pattern-dots .grid-cols-8 > label { grid-column: span 3 / span 3 !important; white-space: nowrap; font-size: .75rem; letter-spacing: .05em; }
.pattern-dots .grid-cols-8 > label + * { grid-column: span 5 / span 5 !important; }

/* ── 12. Live console / logs ─────────────────────────────────────────────── */
.xterm, .xterm .xterm-viewport, .xterm-screen { background-color: #000 !important; }
.xterm .xterm-viewport::-webkit-scrollbar-thumb { background: #383838; }

/* ── 13. Grafieken (dashboard) ───────────────────────────────────────────── */
/* SVG-lijnen in de prestatie- en dropgrafieken: geen kleur behalve rood voor fouten.
   (De grafiekkleuren zelf zitten in de JS; we laten ze, ze zijn data.) */

/* ── 14. Overig ──────────────────────────────────────────────────────────── */
.text-accent { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
.bg-accent { background-color: #fff !important; color: #000 !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #262626; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #383838; }

/* ── 15. Servericoon (inlogscherm/kop): zwart-wit, geen gloed ────────────── */
img[src*="icon-"][class*="size-"], img[src*="server-icon"], .pattern-dots img[class*="rounded-md"] { filter: grayscale(1); border-radius: 2px !important; }
img[class*="blur"], [class*="blur-lg"], [class*="animate-pulse"][class*="blur"] { display: none !important; }