/* Shared styles for the login/permission system (header nav, auth & admin pages) */

/* Website-eigener Ersatz für native confirm()-Dialoge (siehe header_partial.php,
   coreConfirmSubmit()) - sonst rendern die im Browser-/OS-Chrome-Stil statt im Website-Design. */
.core-confirm-overlay{
  /* !important nötig: gleiche body-Kind-Regel wie bei .core-topbar (siehe oben). */
  position:fixed !important; inset:0 !important; z-index:9500 !important;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
}
.core-confirm-overlay.hidden{ display:none !important; }
.core-confirm-box{ width:100%; max-width:380px; text-align:center; }
.core-confirm-box p{ margin:0 0 20px; color:var(--text); line-height:1.5; }
.core-confirm-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.core-confirm-actions .core-btn{ width:auto; padding:11px 22px; }

.core-topbar{
  /* !important nötig: style.css hat eine Regel "body > *:not(#id)..." mit
     ID-Selektoren in :not(), die höhere Spezifität hat und sonst position/
     z-index dieses Elements auf relative/2 zurücksetzen würde. */
  position:fixed !important;
  top:0; left:0; right:0;
  z-index:9000 !important;
  background:rgba(7,13,26,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
  font-family:"Segoe UI",Inter,system-ui,-apple-system,Arial,sans-serif;
}
.core-topbar-inner{
  max-width:1150px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 22px;
  min-height:44px;
}
.core-topbar-spacer{ height:68px; }

.core-topbar-brand{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.02em;
  flex-shrink:0;
}
.core-topbar-brand img{ height:30px; width:auto; filter:drop-shadow(0 0 10px rgba(24,224,232,0.35)); }

.core-topbar-nav{
  display:flex; align-items:center; gap:6px;
  flex:1; flex-wrap:wrap;
  overflow-x:auto;
}
.core-topbar-nav a{
  display:inline-flex; align-items:center;
  padding:8px 14px;
  border-radius:999px;
  color:var(--muted); text-decoration:none;
  font-size:14px; font-weight:600;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.core-topbar-nav a:hover{
  color:var(--text);
  background:rgba(255,255,255,0.06);
}

/* display:flex noetig, seit die Glocke als zweites Kind dazukam - vorher war der Nutzername-
   Button das einzige Kind und stand automatisch allein in seiner Zeile, sodass das Fehlen von
   display:flex hier nie aufgefallen ist. Ohne das stapeln zwei <details>-Bloecke sich
   untereinander statt nebeneinander und blaehen die Topbar-Hoehe unnoetig auf. */
.core-topbar-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }

.core-login-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#08131a; font-weight:700; text-decoration:none;
  box-shadow:0 8px 24px rgba(24,224,232,0.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.core-login-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(24,224,232,0.45); }

.core-usermenu{ position:relative; }
.core-usermenu summary{ list-style:none; cursor:pointer; }
.core-usermenu summary::marker{ content:""; }
.core-usermenu summary::-webkit-details-marker{ display:none; }

.core-usermenu-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px;
  border-radius:999px;
  background:rgba(21,26,34,0.75);
  border:1px solid var(--border);
  color:var(--text); font-weight:600;
  backdrop-filter: blur(10px);
}
.core-usermenu-btn::after{
  content:"▾";
  color:var(--muted);
  font-size:12px;
  margin-left:2px;
  transition:transform .15s ease;
}
.core-usermenu[open] .core-usermenu-btn::after{ transform:rotate(180deg); }
.core-usermenu-dot{ font-size:16px; }

.core-usermenu-panel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:230px;
  padding:14px;
  display:flex; flex-direction:column; gap:4px;
  border-radius:16px;
  /* Ohne z-index malt das im DOM spaeter stehende Konto-Menu (gleiche Stacking-Ebene wie die
     Glocke daneben, beide z-index:auto) ueber ein geoeffnetes Glocken-Panel drueber - dadurch
     war z.B. der "Alle gelesen"-Button vom Nutzernamen-Button verdeckt. */
  z-index:50;
  /* .glass-card selbst ist nur ~55% deckend (var(--card)) - passt fuer Karten innerhalb des
     kuratierten Seitenhintergrunds, aber dieses Dropdown schwebt UEBER beliebigem, ggf. hellem/
     buntem Seiteninhalt (wo immer man gerade hingescrollt hat) und war dadurch teils schwer
     lesbar. Deutlich deckender + staerkerer Blur, gleiches Muster wie .core-bottomnav-sheet. */
  background:rgba(10,14,22,0.96) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}

.core-usermenu-section-title{
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin:2px 4px 4px;
}

.core-usermenu-panel a{
  display:block; padding:8px 10px; border-radius:10px;
  color:var(--text); text-decoration:none; font-size:14px;
}
.core-usermenu-panel a:hover{ background:rgba(255,255,255,0.06); color:var(--primary); }

.core-usermenu-empty{ padding:6px 10px; font-size:13px; }

.core-usermenu-divider{ height:1px; background:var(--border); margin:8px 4px; }

.core-usermenu-logout{
  width:100%; text-align:left;
  padding:8px 10px; border-radius:10px;
  background:none; border:none; cursor:pointer;
  color:#ff8080; font-size:14px; font-family:inherit;
}
.core-usermenu-logout:hover{ background:rgba(255,90,90,0.12); }

/* Centered auth pages (login, account, forgot/reset password, 403) */
.core-center-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:40px 16px; position:relative; z-index:2;
}
/* Fuer Seiten mit mehreren Karten (z.B. account.php: Konto+Passwort UND Benachrichtigungen) -
   .core-center-page selbst ist absichtlich eine Row (default), damit alle bestehenden
   Ein-Karten-Seiten (Login, Passwort vergessen, 403) unveraendert bleiben. Mehrere Karten
   brauchen diesen Wrapper, sonst landen sie als Flex-Row nebeneinander statt untereinander. */
.core-center-stack{
  display:flex; flex-direction:column; align-items:center; gap:24px; width:100%;
}
.core-card{
  width:100%; max-width:420px;
  padding:32px;
  border-radius:20px;
  text-align:center;
}
.core-card h1{ margin-top:0; font-size:26px; }
.core-card .muted{ margin-bottom:20px; }

.core-field{ text-align:left; margin-bottom:16px; }
.core-field label{ display:block; margin-bottom:6px; font-size:14px; color:var(--muted); }
.core-field input{
  width:100%; padding:11px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.05);
  color:var(--text); font-size:15px;
}
.core-field input:focus{ outline:2px solid var(--primary); outline-offset:1px; }

.core-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px 18px;
  border-radius:12px; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#08131a; font-weight:700; font-size:15px;
  text-decoration:none;
}
.core-btn:hover{ filter:brightness(1.05); }

.core-btn-secondary{
  background:rgba(255,255,255,0.06);
  color:var(--text);
  border:1px solid var(--border);
}

.core-alert{
  padding:10px 14px; border-radius:10px; margin-bottom:16px; font-size:14px;
  background:rgba(255,90,90,0.12); color:#ff9d9d; text-align:left;
}
.core-alert-success{
  background:rgba(24,224,232,0.12); color:var(--primary);
}

.core-links{ margin-top:16px; font-size:14px; }
.core-links a{ color:var(--muted); text-decoration:underline; }
.core-links a:hover{ color:var(--primary); }

.core-onetime-box{
  background:rgba(255,163,26,0.1);
  border:1px dashed var(--accent);
  border-radius:10px;
  padding:12px 14px;
  font-family:ui-monospace,Consolas,monospace;
  font-size:16px; letter-spacing:.04em;
  word-break:break-all;
  margin:10px 0;
}

/* Admin panel */
.core-admin-wrap{ max-width:1100px; margin:0 auto; padding:100px 20px 60px; position:relative; z-index:2; }
.core-admin-wrap h1{ margin-bottom:4px; }
/* Beide Admin-Tabellen (Nutzerliste, Berechtigungs-Matrix) sind zu breit, um auf Mobile in
   Spalten zu reflowen - hier horizontal scrollbar statt unlesbar gequetscht oder (durch unser
   globales overflow-x:hidden) unsichtbar rechts abgeschnitten. */
.core-table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:20px; }
.core-admin-table{ width:100%; border-collapse:collapse; font-size:14px; }
.core-admin-table th, .core-admin-table td{
  padding:10px 12px; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle;
  white-space:nowrap;
}
.core-admin-table th{ color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.core-admin-table td.core-perm-cell{ text-align:center; }
.core-badge{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; }
.core-badge-admin{ background:rgba(255,163,26,0.18); color:var(--accent); }
.core-badge-inactive{ background:rgba(255,90,90,0.15); color:#ff9d9d; }
.core-badge-must-change{ background:rgba(24,224,232,0.15); color:var(--primary); }
.core-badge-online{ background:rgba(24,224,232,0.15); color:var(--primary); }
.core-badge-offline{ background:rgba(255,90,90,0.15); color:#ff9d9d; }
.core-badge-unknown{ background:rgba(154,164,175,0.18); color:var(--muted); }
.core-admin-section{ margin-top:36px; }
.core-inline-form{ display:inline; }
.core-mini-btn{
  padding:5px 12px; border-radius:8px; border:1px solid var(--border);
  background:rgba(255,255,255,0.05); color:var(--text); cursor:pointer; font-size:12.5px;
}
.core-mini-btn:hover{ border-color:var(--primary); color:var(--primary); }
.core-newuser-form{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.core-newuser-form input, .core-newuser-form select{
  padding:9px 12px; border-radius:8px; border:1px solid var(--border);
  background:rgba(255,255,255,0.05); color:var(--text); font:inherit;
}
.core-server-form input[name="port"]{ width:100px; }
.core-drag-handle{ cursor:grab; color:var(--muted); text-align:center; user-select:none; width:28px; }
.core-server-row.dragging{ opacity:.4; }
.core-server-row{ transition:opacity .15s ease; }

/* Glocke im Header: In-App-Inbox aller Benachrichtigungen, ueber alle Seiten hinweg (siehe
   header_partial.php). Nutzt dasselbe details/summary-Muster wie .core-usermenu daneben. */
.core-notifbell-btn{ position:relative; font-size:16px; padding:9px 14px; }
.core-notifbell-badge{
  position:absolute; top:2px; right:2px;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:#ff5a5a; color:#fff;
  font-size:10px; font-weight:800; line-height:16px; text-align:center;
}
.core-notif-panel{ width:340px; max-width:min(340px,90vw); padding:14px; }
.core-notif-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
  font-weight:700; margin-bottom:10px;
}
.core-notif-markall-btn{
  background:none; border:none; cursor:pointer; padding:2px 0;
  color:var(--primary); font-size:12.5px; font-weight:600; text-decoration:underline;
}
.core-notif-markall-btn:hover{ opacity:.8; }
.core-notif-list{
  display:flex; flex-direction:column; gap:6px;
  max-height:360px; overflow-y:auto; overflow-x:hidden;
}
.core-notif-empty{ padding:14px 4px; font-size:13px; color:var(--muted); text-align:center; }
.core-notif-row{
  display:block; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,0.03); color:inherit; text-decoration:none;
}
.core-notif-row:hover{ background:rgba(255,255,255,0.07); }
.core-notif-row.unread{ background:rgba(24,224,232,0.08); border-left:3px solid var(--primary); }
.core-notif-row-title{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap;
  font-weight:700; font-size:13.5px;
}
.core-notif-row-time{ font-size:11px; color:var(--muted); opacity:.75; white-space:nowrap; }
.core-notif-row-body{ font-size:13px; color:var(--muted); margin-top:2px; }

/* Benachrichtigungs-Einstellungen (Account-Seite): pro Thema ein Email- und ein
   Push-Schalter. Custom Toggle statt accent-color, da native Checkboxen auf iOS
   inkonsistent/zu groß gerendert werden (bewährtes Muster, siehe bezahlt.css). */
.notify-topics{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.notify-topic-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  flex-wrap:wrap;
}
.notify-topic-name{ font-weight:700; flex:1; min-width:110px; }
.notify-toggle-group{ display:flex; gap:16px; flex-wrap:wrap; }
.notify-toggle{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.notify-switch{ position:relative; width:40px; height:22px; flex-shrink:0; }
.notify-switch input{ opacity:0; width:0; height:0; position:absolute; }
.notify-switch span{
  position:absolute; inset:0; background:rgba(255,255,255,0.15); border-radius:999px;
  transition:background .15s ease; cursor:pointer;
}
.notify-switch span::before{
  content:''; position:absolute; width:16px; height:16px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:transform .15s ease;
}
.notify-switch input:checked + span{ background:linear-gradient(135deg,var(--primary),var(--accent)); }
.notify-switch input:checked + span::before{ transform:translateX(18px); }
.notify-switch input:disabled + span{ opacity:.35; cursor:not-allowed; }

/* Mobile Bottom-Nav: MiAu-Logo mittig, tippen öffnet ein Sheet mit den Seiten darüber.
   Nur auf schmalen Viewports aktiv - auf Desktop bleibt die vorhandene Topbar-Nav führend. */
.core-bottomnav{ display:none; }
.core-bottomnav-sheet{ display:none; }

@media (max-width:760px){
  .core-topbar-nav{ display:none; }

  /* Markenname-Text ausblenden (nur Logo bleibt) - seit die Glocke als drittes Element in die
     Zeile dazukam, passen "MiAu Community"-Text + Glocke + Nutzername-Button nicht mehr
     nebeneinander auf schmale Screens, der Nutzername-Button wurde dadurch rechts abgeschnitten. */
  .core-topbar-brand span{ display:none; }

  /* Reserviert Scroll-Platz am Seitenende, damit Inhalte (z.B. der letzte Benachrichtigungs-
     Schalter auf account.php) nicht hinter dem fixen Bottom-Nav-Button hängen bleiben. */
  .core-center-page{ padding-bottom:calc(110px + env(safe-area-inset-bottom, 0px)); }

  /* Das Glocken-Panel ist normalerweise relativ zum kleinen Glocken-Icon positioniert (right:0
     davon) - auf schmalen Screens sitzt das Icon aber nicht am Bildschirmrand (Nutzername-Button
     daneben), wodurch das 340px breite Panel links abgeschnitten wirken kann. Auf Mobile daher
     fest am Viewport verankert statt relativ zum Icon. */
  .core-notif-panel{
    position:fixed !important;
    top:76px; left:12px; right:12px;
    width:auto; max-width:none;
    max-height:min(420px,70vh);
  }

  .core-bottomnav{
    display:flex !important; justify-content:center;
    /* !important nötig: style.css hat eine Regel "body > *:not(#id)..." mit
       ID-Selektoren in :not(), die höhere Spezifität hat und sonst position/
       z-index dieses Elements auf relative/2 zurücksetzen würde. */
    position:fixed !important; left:0 !important; right:0 !important;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:9200 !important;
    pointer-events:none;
  }
  .core-bottomnav-toggle{
    pointer-events:auto;
    width:60px; height:60px; border-radius:50%;
    border:1px solid var(--border);
    background:rgba(7,13,26,0.92);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    box-shadow:0 10px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(24,224,232,0.18);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; padding:0;
    transition:box-shadow .15s ease, transform .15s ease;
  }
  .core-bottomnav-toggle:active{ transform:scale(.94); }
  .core-bottomnav-toggle[aria-expanded="true"]{ box-shadow:0 10px 28px rgba(0,0,0,0.45), 0 0 0 2px rgba(24,224,232,0.55); }
  .core-bottomnav-toggle img{ width:36px; height:36px; }

  .core-bottomnav-sheet.hidden{ display:none !important; }
  .core-bottomnav-sheet{
    display:block !important;
    position:fixed !important; left:14px !important; right:14px !important;
    bottom:calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:9190 !important;
    padding:14px;
    border-radius:20px;
    background:rgba(7,13,26,0.95);
    border:1px solid var(--border);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    box-shadow:0 24px 60px rgba(0,0,0,0.55);
    max-height:min(420px,60vh);
    overflow-y:auto;
  }
  .core-bottomnav-sheet-inner{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
  }
  .core-bottomnav-item{
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding:16px 6px; border-radius:14px; min-height:56px;
    background:rgba(255,255,255,0.04);
    color:var(--muted); text-decoration:none;
    font-size:12.5px; font-weight:700;
  }
  .core-bottomnav-item:active{ background:rgba(24,224,232,0.12); }
  .core-bottomnav-item.active{
    color:var(--primary);
    background:rgba(24,224,232,0.14);
    border:1px solid rgba(24,224,232,0.35);
  }
}

/* Profil-Seite: "Immer dabei"-Packliste (Gegenstaende, die automatisch bei jedem Urlaub auf
   die persoenliche Packliste wandern, siehe urlaub.js ensurePersonalPackList()). */
.pack-item-list{
  display:flex; flex-direction:column; gap:6px; margin-bottom:12px;
  max-height:280px; overflow-y:auto; overflow-x:hidden;
}
.pack-item-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border-radius:10px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
}
.pack-item-row span{ word-break:break-word; text-align:left; }
.pack-item-row form{ margin:0; }
.pack-item-remove{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--border); background:rgba(255,255,255,0.04);
  color:var(--muted); cursor:pointer; font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
.pack-item-remove:hover{ border-color:rgba(255,90,90,.4); color:#ff9b9b; background:rgba(255,90,90,.08); }
.pack-item-add-form{ display:flex; gap:8px; flex-wrap:wrap; }
.pack-item-add-form input[type=text]{
  flex:1 1 160px; min-width:0; padding:11px 13px;
  background:#111a2a; border:1px solid var(--border); border-radius:11px;
  color:#fff; font:inherit; outline:none;
}
.pack-item-add-form input[type=text]:focus{ border-color:rgba(24,224,232,.55); box-shadow:0 0 0 3px rgba(24,224,232,.10); }

/* Zusammenklappbare Abschnitte im Admin-Panel. Kam mit der TeamSpeak-Zuordnung dazu:
   der Server meldet dutzende Identitaeten (Karteileichen, Bots), die offen ausgeklappt
   die Seite unbenutzbar lang machen wuerden. */
.core-collapse{ border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.02); }
.core-collapse > summary{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:16px 18px; cursor:pointer; list-style:none; font-weight:900; font-size:19px;
}
.core-collapse > summary::-webkit-details-marker{ display:none; }
/* Eigener Pfeil, damit er in beiden Zustaenden gleich sitzt und mitdreht. */
.core-collapse > summary::after{
  content:"▾"; margin-left:auto; font-size:14px; color:var(--muted);
  transition:transform .18s ease; order:3;
}
.core-collapse[open] > summary::after{ transform:rotate(180deg); }
.core-collapse > summary:hover{ color:#fff; }
.core-collapse-meta{ font-size:12px; font-weight:800; color:var(--muted); letter-spacing:.02em; }
.core-collapse-body{ padding:0 18px 18px; }
.core-collapse-inner{ margin-top:22px; background:transparent; }
.core-collapse-inner > summary{ font-size:15px; padding:12px 14px; }
.core-collapse-inner .core-collapse-body{ padding:0 14px 14px; }
/* Lange Listen bekommen einen eigenen Scrollbereich statt die Seite zu strecken. */
.core-table-capped{ max-height:420px; overflow-y:auto; }
.core-subhead{ margin:22px 0 0; font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
@media(max-width:600px){
  .core-collapse > summary{ padding:14px; font-size:17px; }
  .core-collapse-body{ padding:0 14px 14px; }
  .core-table-capped{ max-height:320px; }
}

/* Suchfeld ueber der Liste der noch nicht zugeordneten TeamSpeak-Identitaeten. */
.core-ts-search{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.core-ts-search input{
  flex:1; min-width:220px; padding:10px 13px; background:#111a2a;
  border:1px solid var(--border); border-radius:11px; color:#fff; font:inherit; outline:none;
}
.core-ts-search input:focus{ border-color:rgba(24,224,232,.55); box-shadow:0 0 0 3px rgba(24,224,232,.10); }