/* SYS-CLOUD-9550 — EasySafe-Design für die Coder-Oberfläche, nach der Website easy-safe.eu:
 * dunkler Grund #3c3c3c, Flächen #464646, Linien #5a5a5a, Text weiß, gedämpft #c8c8c8,
 * Akzent #95c01f (Hover #b6dd47), Knöpfe grün mit Text #1e1e1e, Open Sans, Radius 6 px.
 * Coder färbt über HSL-Token (--content-*, --surface-*, --border-*) auf html.dark / html.light;
 * sie werden hier auf diese Werte gesetzt. MUI-Teile (Emotion) kennen die Token nicht → .Mui*-Regeln. */

@font-face {
  font-family: "Open Sans";
  src: url("/easysafe-theme/fonts/OpenSans-Variable.ttf") format("truetype");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #3c3c3c;
  --bg-2: #333333;
  --bg-3: #2b2b2b;
  --panel: #464646;
  --line: #5a5a5a;
  --text: #ffffff;
  --muted: #c8c8c8;
  --dim: #9a9a9a;
  --green: #95c01f;
  --green-2: #b6dd47;
  --green-dim: rgba(149, 192, 31, .18);
  --ink: #1e1e1e;
  --radius: 6px;
}

/* Coder-Token (HSL-Tripel, Coder setzt sie in hsl(var(--x)) ein) — hell und dunkel gleich */
html, html.light, html.dark {
  --content-primary: 0 0% 100%;           /* #ffffff */
  --content-secondary: 0 0% 78%;          /* #c8c8c8 */
  --content-link: 76 69% 57%;             /* #b6dd47 — Links */
  --content-invert: 0 0% 12%;             /* #1e1e1e — Text auf grünen Knöpfen */
  --content-disabled: 0 0% 60%;           /* #9a9a9a */
  --content-success: 76 72% 44%;
  --content-warning: 42 87% 55%;          /* #f0b429 */
  --content-destructive: 354 81% 57%;     /* #ea384c */
  --surface-primary: 0 0% 24%;            /* #3c3c3c */
  --surface-secondary: 0 0% 27%;          /* #464646 */
  --surface-tertiary: 0 0% 31%;
  --surface-quaternary: 0 0% 35%;         /* #5a5a5a */
  --surface-invert-primary: 76 72% 44%;   /* #95c01f — Hauptknöpfe */
  --surface-invert-secondary: 76 69% 57%; /* #b6dd47 — Hover */
  --surface-destructive: 354 50% 22%;
  --surface-green: 76 40% 22%;
  --surface-grey: 0 0% 27%;
  --surface-orange: 42 50% 22%;
  --surface-sky: 196 40% 22%;
  --surface-red: 354 50% 22%;
  --surface-purple: 240 30% 26%;
  --surface-magenta: 291 30% 24%;
  --border-default: 0 0% 35%;             /* #5a5a5a */
  --border-secondary: 0 0% 45%;
  --border-success: 76 72% 44%;
  --border-warning: 42 87% 55%;
  --border-destructive: 354 81% 57%;
  --border-sky: 194 70% 55%;
  --border-green: 76 72% 44%;
  --border-purple: 240 76% 75%;           /* #8f8ff0 */
  --border-magenta: 292 80% 70%;
  --overlay-default: 0 0% 15% / 80%;
  --highlight-green: 76 69% 57%;
  --highlight-purple: 240 76% 75%;
  --highlight-orange: 42 87% 55%;
  --highlight-sky: 194 70% 60%;
  --highlight-red: 354 81% 57%;
  --highlight-magenta: 292 80% 70%;
  --border: 0 0% 35%;
  --input: 0 0% 35%;
  --ring: 76 72% 44%;
  --background: var(--surface-primary);
  --foreground: var(--content-primary);
  --muted: var(--surface-secondary);
  --muted-foreground: var(--content-secondary);
  --primary: var(--content-link);
  --primary-foreground: var(--surface-primary);
  color-scheme: dark;
}

html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important;
}
body * { font-family: inherit; }
code, kbd, pre, .font-mono, [class*="font-mono"] { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace !important; }

/* Eingaben: dunkler als die Fläche, Linie, weißer Text */
input, textarea, select { background: var(--bg-2) !important; color: var(--text) !important; border-color: var(--line) !important; }
input::placeholder, textarea::placeholder { color: var(--dim) !important; }

/* MUI-Teile (Emotion): Flächen, Kopfzeile, Tabellen, Menüs, Dialoge, Statusleiste */
.MuiPaper-root, .MuiAppBar-root, .MuiTableContainer-root, .MuiTableHead-root, .MuiTableRow-root,
.MuiMenu-paper, .MuiPopover-paper, .MuiDialog-paper, .MuiDrawer-paper, .MuiAlert-root, .MuiTooltip-tooltip,
.MuiCard-root, .MuiAccordion-root {
  background-color: var(--panel) !important;
  background-image: none !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.MuiTableCell-root { border-color: var(--line) !important; color: var(--text) !important; }
.MuiTypography-root, .MuiFormLabel-root, .MuiInputBase-root, .MuiListItemText-root, .MuiMenuItem-root { color: var(--text) !important; }
.MuiOutlinedInput-notchedOutline { border-color: var(--line) !important; }
.MuiInputBase-root { background: var(--bg-2) !important; }
.MuiButton-outlined, .MuiButton-text { color: var(--text) !important; border-color: var(--line) !important; }
.MuiButton-contained { background: var(--green) !important; color: var(--ink) !important; font-weight: 700 !important; }
.MuiButton-contained:hover { background: var(--green-2) !important; }
.MuiLink-root { color: var(--green-2) !important; }
.MuiDivider-root { border-color: var(--line) !important; }

/* Harte Tailwind-Farben, die Coder neben den Token nutzt */
.bg-black, .bg-zinc-950, .bg-zinc-900, .bg-gray-950, .bg-gray-900, [class*="bg-zinc-9"], [class*="bg-gray-9"] { background-color: var(--panel) !important; }
.bg-white, .bg-zinc-50, .bg-gray-50 { background-color: var(--panel) !important; }
.text-black, .text-zinc-950, .text-gray-950 { color: var(--text) !important; }
[class*="text-zinc-"], [class*="text-gray-"] { color: var(--muted) !important; }
[class*="border-zinc-"], [class*="border-gray-"] { border-color: var(--line) !important; }

/* Knöpfe wie auf der Website: grün, dunkle Schrift, fett, 6 px */
.bg-surface-invert-primary, [class*="bg-surface-invert-primary"] { background-color: var(--green) !important; color: var(--ink) !important; font-weight: 700 !important; border-radius: var(--radius) !important; }
.bg-surface-invert-primary:hover, [class*="bg-surface-invert-primary"]:hover { background-color: var(--green-2) !important; }
button, a[type="submit"], [role="button"] { border-radius: var(--radius) !important; }

/* Kopfzeile und Seitenköpfe: Coders Token-Farben (kein eigener Block hinter der Navigation), Logo links */
header, nav { background: transparent !important; }
svg.es-coder-logo { display: none !important; }
img.es-logo { height: 26px; width: auto; display: block; }
img.es-login-logo { height: 48px; width: auto; margin: 0 auto 10px; display: block; }

/* Login-Seite: nur „Cloud" unter dem Logo, groß wie die Website-Überschriften */
h1.es-cloud-heading { font-size: 40px !important; font-weight: 700 !important; color: var(--text) !important; letter-spacing: .01em; margin: 0 0 28px !important; }

/* Link zur Kurzanleitung unter der Überschrift (SYS-CLOUD-9570) */
a.es-guide { display: block; text-align: center; margin: -16px 0 22px; color: var(--green-2); font-size: 15px; font-weight: 600; text-decoration: none; }
a.es-guide:hover { text-decoration: underline; }

/* Fußzeile „Copyright © … Coder Technologies / Version" (theme.js markiert sie) */
.es-coder-footer { display: none !important; }

/* Kein Rastermuster hinter dem Workspace-Inhalt, Flächen flach */
[style*="radial-gradient"], [class*="bg-[radial-gradient"] { background-image: none !important; }