/* TS3.PIZZA — Shared base styles for ALL dashboard pages
   Loaded: index, songs, games, admin, admin-ts6, login, uptime, logs, invite */

/* Self-hosted fonts (Inter + JetBrains Mono) */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fonts/inter.woff2) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/jetbrainsmono-400.woff2) format('woff2');}

:root{
  --bg:#0a0e14;
  --bg2:#101620;
  --bg3:#1a2230;
  --border:#2a3445;
  --text:#e0e6ed;
  --text-dim:#8899aa;
  --primary:#00e5ff;
  --primary-dim:rgba(0,229,255,0.08);
  --green:#00ff88;
  --green-dim:rgba(0,255,136,0.1);
  --amber:#ffaa00;
  --amber-dim:rgba(255,170,0,0.1);
  --red:#ff3355;
  --red-dim:rgba(255,51,85,0.1);
  --purple:#b060ff;
  --teal:#0dd1c5;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* Reset + Body */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--ui);
  font-size:15px;
  min-height:100vh;
  overflow-x:hidden;
}

/* === Shared Header (alle Seiten) === */
.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
  gap:12px;
}
.page-header .logo{
  display:flex;
  align-items:center;
  gap:14px;
}
.page-header .logo-icon{
  width:40px;
  height:40px;
  border:2px solid var(--primary);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  box-shadow:0 0 18px rgba(0,229,255,0.3);
  color:var(--primary);
  animation:pulse-border 3s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes pulse-border{
  0%,100%{box-shadow:0 0 18px rgba(0,229,255,0.3);}
  50%{box-shadow:0 0 30px rgba(0,229,255,0.5);}
}
.page-header h1{
  font-size:20px;
  letter-spacing:3px;
  text-transform:uppercase;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
}
.page-header h1 .accent{color:var(--primary);}
.page-header h1 .sub{
  color:var(--text-dim);
  font-size:11px;
  letter-spacing:2px;
  margin-left:6px;
  font-weight:600;
}

/* === Shared Nav (alle Seiten) === */
.page-nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.page-nav a{
  background:var(--bg3);
  border:1px solid var(--border);
  color:var(--text-dim);
  padding:8px 14px;
  border-radius:6px;
  text-decoration:none;
  font-family:var(--ui);
  font-size:12px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:all 0.2s;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.page-nav a:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-dim);}
.page-nav a.active{border-color:var(--primary);color:var(--primary);background:var(--primary-dim);}
.page-nav a.danger{border-color:rgba(255,51,85,0.3);color:var(--red);}
.page-nav a.danger:hover{border-color:var(--red);color:var(--red);background:var(--red-dim);}
.page-nav a.admin-only{display:none;}
body.admin-loaded .page-nav a.admin-only{display:inline-flex;}

/* Mobile */
@media(max-width:700px){
  .page-header{gap:8px;padding-bottom:12px;margin-bottom:16px;}
  .page-header .logo-icon{width:34px;height:34px;font-size:16px;}
  .page-header h1{font-size:15px;letter-spacing:2px;}
  .page-header h1 .sub{display:none;}
  .page-nav{gap:5px;width:100%;justify-content:flex-end;}
  .page-nav a{padding:5px 9px;font-size:10px;letter-spacing:0.5px;}
}

/* Bodies that wait for auth — opt-in via class to avoid hiding login/invite */
body.auth-required{visibility:hidden;}
body.auth-required.auth-loaded{visibility:visible;}

/* === Shared grid-pattern background — konsistent auf allen Seiten ===
   Subtle cyan grid (40px) hinter dem Content. Per-page overrides möglich
   (z.B. admin.html nutzt rot). .wrapper muss z-index:1 haben damit der
   Content über dem Pattern liegt. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:linear-gradient(rgba(0,229,255,0.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,229,255,0.03) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
  z-index:0;
}
.wrapper{position:relative;z-index:1;}