/* RAW Roleplay: Design des txAdmin-Panels (gleiche Sprache wie die RAW-Website).
   Weiss/Grau auf Schwarz, Outfit als Schrift, grosse Radien, dünne Linien. Rot bleibt Fehlern vorbehalten.
   Die Farben kommen ueber die Variablen des Panels, damit wirklich jede Seite, jeder Dialog und jedes Menue folgt. */

@font-face { font-family: 'Outfit'; font-weight: 300 700; font-display: swap; src: url('./raw-Outfit-latin-ext.v800.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F; }
@font-face { font-family: 'Outfit'; font-weight: 300 700; font-display: swap; src: url('./raw-Outfit-latin2.v800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------------------------------------------------------------- Farben und Masse (Hell/Dunkel/eigene Themes: alles dunkel) */
:root, .dark, .light, [class*="theme-"] {
	color-scheme: dark;
	--background: 0 0% 4%;
	--foreground: 0 0% 100%;
	--card: 0 0% 6.3%;
	--card-foreground: 0 0% 100%;
	--popover: 0 0% 5.9%;
	--popover-foreground: 0 0% 100%;
	--primary: 0 0% 96%;
	--primary-foreground: 0 0% 5%;
	--secondary: 0 0% 13%;
	--secondary-foreground: 0 0% 96%;
	--muted: 0 0% 8.5%;
	--muted-foreground: 0 0% 63%;
	--accent: 0 0% 86%;
	--accent-foreground: 0 0% 5%;
	--border: 0 0% 16%;
	--input: 0 0% 18%;
	--ring: 0 0% 55%;
	--radius: 0.75rem;
	--font-sans: "Outfit", "Inter Variable";
	--font-mono: "JetBrains Mono Variable", ui-monospace, monospace;
}

html { background-color: #0a0a0a; }
body { background-color: transparent !important; color: #fff; }
body { font-family: "Outfit", "Inter Variable", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(214, 214, 214, 0.28); color: #fff; }

/* Gitter und Lichtschein wie auf der Website */
body::before {
	content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(55% 40% at 62% 0%, rgba(214, 214, 214, 0.08), transparent 72%),
		radial-gradient(50% 35% at 50% 100%, rgba(214, 214, 214, 0.05), transparent 72%),
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 48px 48px;
	-webkit-mask-image: radial-gradient(85% 95% at 50% 35%, #000 25%, transparent 100%);
	mask-image: radial-gradient(85% 95% at 50% 35%, #000 25%, transparent 100%);
}

/* ---------------------------------------------------------------- Menues: Treffer/Fokus dezent statt farbig */
.hover\:bg-accent:hover, .focus\:bg-accent:focus, .data-\[state\=open\]\:bg-accent[data-state=open] { background-color: rgba(255, 255, 255, 0.09); }
.focus\:text-accent-foreground:focus { color: #fff; }

/* ---------------------------------------------------------------- Kopfleiste */
header.sticky {
	background: rgba(10, 10, 11, 0.82) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07); box-shadow: none !important;
}
/* aktiver Menuepunkt wie die Reiter der Website: weiss mit dunkler Schrift */
a.bg-secondary.text-secondary-foreground { background: #fff !important; color: #0b0b0b !important; }
a.bg-secondary.text-secondary-foreground svg { color: #0b0b0b; }

/* Logo: RAW-Marke statt txAdmin-Schriftzug */
svg[viewBox="0 0 1115 288"], svg[viewBox="0 0 288 288"] {
	width: auto !important; aspect-ratio: 1 / 1; height: 4.6rem; margin: -1rem 0;
	background: url('./raw-mark.v800.png') center / contain no-repeat; filter: drop-shadow(0 0 12px rgba(214, 214, 214, 0.18));
}
svg[viewBox="0 0 1115 288"] > *, svg[viewBox="0 0 288 288"] > * { display: none; }

/* ---------------------------------------------------------------- Flaechen */
.bg-card { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 60%); }
.rounded-lg.border, .rounded-xl.border { border-color: rgba(255, 255, 255, 0.09); }
.rounded-lg.border.bg-card, .rounded-xl.border.bg-card { box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.7); }
.bg-popover, [role="dialog"], [role="menu"], [role="listbox"] { border-color: rgba(255, 255, 255, 0.1); }
[role="dialog"], [role="menu"], [role="listbox"] { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }

/* Eingabefelder wie auf der Website */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, [role="combobox"] {
	background-color: #0b0b0b; border-color: rgba(255, 255, 255, 0.09); transition: border-color 0.25s ease;
}
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, [role="combobox"]:focus { border-color: rgba(214, 214, 214, 0.42); }
input::placeholder, textarea::placeholder { color: #6f6f75; }

/* Schaltflaechen: weisse Hauptaktion, ruhige Nebenaktionen */
button, [role="button"] { letter-spacing: 0; }
.bg-primary { background-image: linear-gradient(90deg, #f4f4f4, #b8b8b8); }

/* Tabellen und Trennlinien */
table { border-color: rgba(255, 255, 255, 0.07); }
tr, td, th, .border-b, .border-t { border-color: rgba(255, 255, 255, 0.07); }

/* Schmale, dunkle Scrollleisten */
* { scrollbar-width: thin; scrollbar-color: #2c2c30 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2c2c30; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #3c3c42; background-clip: padding-box; border: 2px solid transparent; }

/* Konto-Avatar: neutral statt zufaelliger Farbe */
span[class*="rounded-md"][style*="background-color"] { background-color: #1a1a1c !important; color: #fff; border: 1px solid rgba(255, 255, 255, 0.14); }