/*
 * Erbil Server – vereinheitlichte Admin-Shell
 * Die Admin-Funktionen bleiben unverändert; nur äußere Seitenstruktur,
 * Navigation, Breiten und responsive Darstellung werden angeglichen.
 */

body.admin-unified-page {
  overflow-x: hidden;
}

body.admin-unified-page .admin-unified-shell {
  width: min(100% - 56px, 1320px);
  max-width: 1320px;
  margin-inline: auto;
}

body.admin-unified-page .admin-unified-shell .topbar {
  width: min(100%, 1280px);
  height: 82px;
  min-height: 82px;
  margin-inline: auto;
}

body.admin-unified-page .admin-unified-shell .brand {
  min-width: 0;
}

body.admin-unified-page .admin-unified-shell .main-nav {
  min-width: 0;
}

/* Authentifizierungs-Steuerung ersetzt im Admin den öffentlichen Statusblock. */
body.admin-unified-page .admin-auth-slot {
  justify-self: end;
  min-width: 0;
  display: flex;
  align-items: center;
}

body.admin-unified-page .admin-auth-slot:empty {
  width: 44px;
  height: 44px;
}

body.admin-unified-page .admin-auth-tools {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  width: auto !important;
  max-width: 100% !important;
}

body.admin-unified-page .admin-auth-tools > * {
  margin: 0 !important;
}

body.admin-unified-page .admin-auth-tools button,
body.admin-unified-page .admin-auth-tools a {
  min-height: 44px;
}

/* Admin-Inhalt auf dieselbe Inhaltsbreite wie Dashboard/Auslastung bringen. */
body.admin-unified-page main {
  width: min(100% - 44px, 1280px) !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
}

body.admin-unified-page main .hero {
  margin-top: 0 !important;
  padding-top: 52px !important;
}

body.admin-unified-page main .hero h1,
body.admin-unified-page #page-title {
  max-width: 100%;
  line-height: .99;
  letter-spacing: -.045em;
}

/* Der große Leerraum zwischen Navigation und Admin-Hero wird entfernt. */
body.admin-unified-page .admin-shell,
body.admin-unified-page .admin-main,
body.admin-unified-page .admin-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Desktop: Shell und Adminbereich folgen derselben horizontalen Achse. */
@media (min-width: 761px) {
  body.admin-unified-page .admin-unified-shell .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
  }

  body.admin-unified-page .admin-unified-shell .brand {
    grid-column: 1;
    justify-self: start;
  }

  body.admin-unified-page .admin-unified-shell .main-nav {
    grid-column: 2;
    justify-self: center;
  }

  body.admin-unified-page .admin-auth-slot {
    grid-column: 3;
    justify-self: end;
  }
}

/* Handy/Tablet: identisches Muster wie Dashboard und Auslastung. */
@media (max-width: 760px) {
  body.admin-unified-page {
    max-width: 100%;
    overflow-x: clip;
  }

  /*
   * Mobile Content-Raster:
   * .admin-shell darf keine zweite Seitenbreite erzeugen.
   * main übernimmt allein die gemeinsame Mobile-Inhaltsbreite.
   */
  body.admin-unified-page .admin-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.admin-unified-page .admin-unified-shell,
  body.admin-unified-page main {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-top: 0 !important;
  }

  body.admin-unified-page .admin-unified-shell .topbar {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px 10px !important;
    padding: 18px 0 12px !important;
  }

  body.admin-unified-page .admin-unified-shell .topbar > .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    max-width: calc(100vw - 130px) !important;
  }

  body.admin-unified-page .admin-unified-shell .brand-copy {
    min-width: 0 !important;
  }

  body.admin-unified-page .admin-unified-shell .brand-copy strong {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
  }

  body.admin-unified-page .admin-unified-shell .brand-copy small {
    display: none !important;
  }

  body.admin-unified-page .admin-auth-slot {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  /* Benutzer-Pill auf Mobile ausblenden; Abmelden bleibt erreichbar. */
  body.admin-unified-page .admin-auth-tools > :not(:last-child) {
    display: none !important;
  }

  body.admin-unified-page .admin-auth-tools button,
  body.admin-unified-page .admin-auth-tools a {
    min-height: 42px !important;
    padding: 0 13px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  body.admin-unified-page .admin-unified-shell .main-nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px !important;
    margin: 0 !important;
    overflow: visible !important;
    border-radius: 14px !important;
  }

  body.admin-unified-page .admin-unified-shell .main-nav a {
    min-width: 0 !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 9px 5px !important;
  }

  /* Öffentliche Admin-Subnavigation auf Mobile */
  body.admin-unified-page
  .admin-unified-shell
  .dashboard-subnav {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin-top: 10px !important;
    padding: 4px !important;
    overflow: visible !important;
  }

  body.admin-unified-page
  .admin-unified-shell
  .dashboard-subnav > a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 9px 5px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-size: 13px !important;
  }

  body.admin-unified-page main .admin-hero {
    margin-top: 0 !important;
    padding-top: 32px !important;
  }

  body.admin-unified-page main .hero h1,
  body.admin-unified-page #page-title {
    font-size: clamp(38px, 10.5vw, 44px) !important;
    line-height: 1.03 !important;
    letter-spacing: -.045em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  /* Interne Admin-Navigation darf horizontal scrollen statt abgeschnitten zu werden. */
  body.admin-unified-page .server-tabs,
  body.admin-unified-page .game-tabs {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  body.admin-unified-page .server-tabs::-webkit-scrollbar,
  body.admin-unified-page .game-tabs::-webkit-scrollbar {
    display: none !important;
  }
}

@media (max-width: 410px) {
  body.admin-unified-page .admin-unified-shell,
  body.admin-unified-page main {
    width: calc(100% - 28px) !important;
  }

  body.admin-unified-page main .hero h1,
  body.admin-unified-page #page-title {
    font-size: 38px !important;
  }
}

/* ==========================================================
   MOBILE VISUAL AUDIT – ADMIN GAME TABS
   Interne Servernavigation auf kleinen Displays kompakter.
   Bei zusätzlichem Inhalt bleibt horizontales Scrollen möglich.
   Desktop bleibt unverändert.
   ========================================================== */

@media (max-width: 760px) {

  /*
   * Öffentlicher Header/Admin:
   * gleiche Hintergrund- und Navigationsfarben wie Dashboard.
   * Nur Mobile; Desktop bleibt unverändert.
   */
  body.admin-unified-page {
    background: radial-gradient(900px 520px at 12% -12%,rgba(46,133,178,.15),transparent 64%), radial-gradient(740px 460px at 96% 4%,rgba(37,105,82,.055),transparent 67%), var(--color-bg) !important;
  }

  body.admin-unified-page
  .admin-unified-shell .main-nav,
  body.admin-unified-page
  .admin-unified-shell .dashboard-subnav {
    border-color: var(--color-border) !important;
    background: rgba(255,255,255,.018) !important;
  }

  body.admin-unified-page
  .admin-unified-shell .main-nav > a {
    color: var(--color-text-secondary) !important;
    background: transparent !important;
    border-radius: 7px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
  }

  body.admin-unified-page
  .admin-unified-shell .main-nav > a.active,
  body.admin-unified-page
  .admin-unified-shell .main-nav > a[aria-current="page"] {
    color: var(--color-text) !important;
    background: rgba(255,255,255,.075) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset !important;
  }

  body.admin-unified-page
  .admin-unified-shell .dashboard-subnav > a {
    color: var(--color-text-muted) !important;
    background: transparent !important;
    line-height: 1.5 !important;
  }

  body.admin-unified-page
  .admin-unified-shell .dashboard-subnav > a.active,
  body.admin-unified-page
  .admin-unified-shell .dashboard-subnav > a[aria-current="page"] {
    color: var(--color-text) !important;
    background: rgba(255,255,255,.055) !important;
  }


  body.admin-unified-page .game-tabs,
  body.admin-unified-page .game-tabs-dynamic {
    display: flex !important;
    flex-wrap: nowrap !important;

    gap: 4px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;

    scrollbar-width: none;
  }

  body.admin-unified-page .game-tabs::-webkit-scrollbar,
  body.admin-unified-page .game-tabs-dynamic::-webkit-scrollbar {
    display: none;
  }

  body.admin-unified-page .game-tabs > a,
  body.admin-unified-page .game-tabs-dynamic > a {
    flex: 0 0 auto !important;

    min-height: 38px !important;
    padding: 7px 8px !important;

    gap: 6px !important;

    font-size: 12px !important;
    white-space: nowrap !important;

    scroll-snap-align: start;
  }
}