/* =========================================================================
   Skydinse Dashboard — Pterodactyl-Design
   -------------------------------------------------------------------------
   Liegt ueber styles.css und ersetzt nur das Aussehen: flache, ruhige
   Flaechen in Schiefergrau statt Glas, eine durchgehende Leiste oben,
   Karten mit dunkler Kopfzeile. Markup und app.js bleiben unveraendert.
   Zurueck zum alten Design: den <link> auf ptero.css in index.html entfernen.
   ========================================================================= */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Grautoene wie im Panel */
  --p-900: #1f2933;
  --p-850: #27323d;
  --p-800: #323f4b;
  --p-700: #3e4c59;
  --p-600: #52606d;
  --p-500: #616e7c;
  --p-400: #7b8794;
  --p-300: #9aa5b1;
  --p-200: #cbd2d9;
  --p-100: #e4e7eb;
  --p-50: #f5f7fa;

  --primary: #0967d2;
  --primary-hover: #2186eb;
  --primary-tief: #0552b5;
  --akzent: #38bec9;

  /* Bestehende Tokens auf die neue Palette umbiegen */
  --bg: var(--p-800);
  --ink: var(--p-50);
  --ink-2: var(--p-200);
  --ink-3: var(--p-400);
  --linie: rgba(255, 255, 255, .08);
  --linie-stark: var(--p-500);

  --blau: var(--primary-hover);
  --blau-fuellung: var(--primary);
  --blau-hover: var(--primary-hover);

  --glass-oben: var(--p-700);
  --glass-unten: var(--p-700);
  --glass-rand-hell: transparent;
  --glass-rand-matt: rgba(255, 255, 255, .06);
  --glass-glanz: transparent;
  --glass-schatten: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .2);

  --feld: var(--p-600);
  --feld-fokus: var(--p-600);

  --ok: #3ebd93;
  --ok-bg: rgba(62, 189, 147, .15);
  --warn: #f0b429;
  --warn-bg: rgba(240, 180, 41, .15);
  --danger: #ef4e4e;
  --danger-bg: rgba(239, 78, 78, .15);

  --r-sm: 4px;
  --r-md: 4px;
  --r-lg: 6px;

  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --topbar: 56px;
  --sidebar: 248px;
}

/* ----------------------------- Grundflaeche ----------------------------- */

html { overflow-x: clip; }

body {
  background: var(--p-800);
  letter-spacing: 0;
  font-size: 14px;
}

.bg,
.spot { display: none !important; }

/* Hell/Dunkel gibt es im Panel-Design nicht */
.schalter { display: none; }

.glass,
.card,
.topbar,
.sidebar,
.workspace-header,
.role-panel {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.glass::before,
.glass::after,
.card::before,
.card::after,
.topbar::after,
.sidebar::after,
.workspace-header::after { content: none !important; }

h1, h2, h3 { letter-spacing: 0; font-weight: 600; }
h4 { color: var(--p-300); letter-spacing: .05em; }

.eyebrow,
.section-kicker,
.nav-label,
.server-box label {
  letter-spacing: .1em;
  color: var(--p-400);
}

:focus-visible { outline-color: var(--primary-hover); }

::selection { background: var(--primary); }

/* ----------------------------- Keine Pixel-Icons ------------------------ */
/* Die Icons kommen aus icons.js (.pix). Sie werden komplett ausgeblendet,
   ebenso die Kaestchen, die nur fuer ein Icon da sind. */

.pix,
.card-icon,
.nav .ico,
.am-rule-icon,
.brand-mark { display: none !important; }

.nav button { gap: 0; }
.user-chip { gap: 0; }

/* Der Abmelde-Knopf war nur ein Icon - jetzt steht dort Text */
.topbar-user button.ghost::after {
  content: "Abmelden";
  font-size: .8125rem;
}

/* -------------------------------- Topbar -------------------------------- */

.shell { padding-top: 0; }

.topbar {
  position: sticky;
  top: 0;
  min-height: var(--topbar);
  margin: 0 calc(50% - 50vw) 24px;
  padding: 0 max(16px, calc(50vw - (var(--shell) / 2) + 16px));
  border-radius: 0;
  background: var(--p-900);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: var(--primary);
  box-shadow: none;
}

.brand h1 { font-size: 1.0625rem; font-weight: 600; color: var(--p-50); }
.brand .eyebrow { color: var(--p-400); }

.user-chip {
  border-radius: 4px;
  background: var(--p-800);
  color: var(--p-100);
}

/* Buttons oben wie die Icon-Links im Panel: flach, hell beim Drueberfahren */
.topbar .button:not(.primary),
.topbar button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--p-300);
}

.topbar .button:not(.primary):hover,
.topbar button.ghost:hover {
  background: var(--p-800);
  color: var(--p-50);
}

/* ------------------------------- Sidebar -------------------------------- */

.app { gap: 24px; }

.sidebar {
  top: calc(var(--topbar) + 24px);
  padding: 12px 0;
  gap: 8px;
  border-radius: 6px;
  background: var(--p-900);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  max-height: calc(100vh - var(--topbar) - 48px);
}

.server-box { padding: 4px 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); }

.nav { gap: 0; }

.nav-label { margin: 16px 0 4px; padding: 0 16px; }

.nav button {
  padding: 9px 16px;
  border-radius: 0;
  border-left: 3px solid transparent;
  color: var(--p-300);
  font-weight: 500;
}

.nav button:hover {
  background: var(--p-850);
  color: var(--p-50);
}

.nav button[aria-current="page"] {
  background: var(--p-800);
  color: var(--p-50);
  border-left-color: var(--akzent);
  box-shadow: none;
}

.nav button[aria-current="page"] .pix { color: var(--akzent); }
.nav button:hover .pix { transform: none; }
.nav button:active { transform: none; }

/* ---------------------------- Arbeitsbereich ---------------------------- */

.workspace { gap: 24px; }

.workspace-header {
  padding: 20px 24px;
  border-radius: 6px;
  background: var(--p-900);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  border-left: 3px solid var(--primary);
}

.workspace-header h2 { font-size: 1.5rem; color: var(--p-50); }
.workspace-header p:last-of-type { color: var(--p-300); }

.save-state { border-radius: 4px; }

/* Karten wie die grauen Boxen im Panel: dunkle Kopfzeile, graue Flaeche */
.card {
  --pad: 20px;
  padding: var(--pad);
  border-radius: 6px;
  background: var(--p-700);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .2);
  overflow: visible;
}

.card > .card-heading:first-child {
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) var(--pad);
  padding: 12px var(--pad);
  background: var(--p-900);
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.card-heading h3 {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--p-100);
}

.card-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--p-800);
  color: var(--p-300);
}

.card-icon .pix { --icon: 18px; }

.section-grid { gap: 24px; }

/* ------------------------------- Formulare ------------------------------ */

label { color: var(--p-200); font-weight: 500; }
.help { color: var(--p-400); }
.muted { color: var(--p-300); }

input,
select,
textarea,
.role-summary {
  border: 2px solid var(--p-500);
  border-radius: 4px;
  background-color: var(--p-600);
  color: var(--p-100);
}

input::placeholder,
textarea::placeholder { color: var(--p-400); }

input:hover,
select:hover,
textarea:hover,
.role-summary:hover { border-color: var(--p-400); }

input:focus,
select:focus,
textarea:focus,
.role-picker[open] .role-summary {
  border-color: var(--primary-hover);
  background-color: var(--p-600);
  box-shadow: 0 0 0 2px rgba(33, 134, 235, .3);
}

option { background: var(--p-700); color: var(--p-100); }

input[type="checkbox"] { accent-color: var(--primary); }

/* Buttons: eckig und ruhig wie im Panel */
button.primary,
.button.primary,
button.small,
button.ghost,
.button,
button.danger {
  border-radius: 4px;
  padding: 9px 18px;
  font-weight: 500;
  letter-spacing: .02em;
  box-shadow: none;
}

button.primary,
.button.primary {
  background: var(--primary);
  border-color: var(--primary);
}

button.primary:hover,
.button.primary:hover {
  filter: none;
  transform: none;
  background: var(--primary-tief);
  border-color: var(--primary-tief);
}

button.small,
button.ghost,
.button {
  background: var(--p-600);
  border: 1px solid var(--p-500);
  color: var(--p-50);
}

button.small:hover,
button.ghost:hover,
.button:hover { background: var(--p-500); }

button.danger {
  background: #cf1124;
  border-color: #cf1124;
}

button.danger:hover { background: #ab091e; }

button:active { transform: none; }

/* Auswahl- und Rechte-Bloecke */
.checkbox-list label,
.permission-group,
.metric-card,
.role-chip,
.status-badge {
  border-radius: 4px;
  background: var(--p-800);
}

.checkbox-list label:hover { background: var(--p-850); }

/* Gruppierte Bloecke (Kategorie-Rechte, Meilensteine, Voice-Stufen) nebeneinander */
.permission-list {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 12px;
}

.permission-group {
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  border: 1px solid rgba(255, 255, 255, .05);
}

.role-panel {
  border: 1px solid var(--p-500);
  border-radius: 4px;
  background: var(--p-700);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}

.role-option { border-radius: 4px; }
.role-option:hover { background: var(--p-600); }

/* Kennzahlen wie die Server-Kacheln im Panel: linker Farbstreifen */
.metric-card {
  border-left: 3px solid var(--primary);
  background: var(--p-800);
}

.metric-card strong { letter-spacing: 0; color: var(--p-50); }

/* Tabellen */
table { border-collapse: collapse; }
th {
  background: var(--p-900);
  color: var(--p-300);
  letter-spacing: .06em;
}
td { border-color: rgba(255, 255, 255, .06); }
tbody tr:hover { background: rgba(255, 255, 255, .03); }

/* Meldungen unten rechts */
.notice {
  border-radius: 4px;
  background: var(--p-900);
  color: var(--p-100);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.notice.success { border-left: 4px solid var(--ok); }
.notice.error { border-left: 4px solid var(--danger); }

/* Ladebalken oben in der Akzentfarbe */
.fortschritt { background: var(--akzent); }

/* Ausklapper */
.fold {
  border-radius: 4px;
  background: var(--p-800);
}

code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--p-900);
  color: var(--p-200);
}

/* ------------------------------- Mobil ---------------------------------- */

@media (max-width: 900px) {
  .sidebar {
    border-radius: 0;
    background: var(--p-900);
  }
}

/* Schmale Bildschirme: oben nur Logo und kompakte Knoepfe, sonst ueberlappt
   "Status verwalten" den Titel und der Abmelde-Knopf rutscht aus dem Bild. */
@media (max-width: 640px) {
  .topbar {
    gap: 8px;
    padding: 0 12px;
  }

  .brand .eyebrow { display: none; }
  .brand h1 { font-size: .9375rem; }

  .topbar-end { gap: 4px; min-width: 0; }

  #statusLink,
  .topbar button.ghost {
    padding: 6px 8px;
    font-size: .75rem;
  }

  /* Name ausblenden, Abmelden bleibt */
  .user-chip { display: none; }

  .topbar-user button.ghost::after { font-size: .75rem; }
}