/* Streamer-Portal — baut auf pixel-theme.css auf (muss davor eingebunden
   werden, siehe portal.ejs), gleicher Pixel-/Minecraft-Look wie die
   öffentliche Streamer-Seite (streamers.css) und die OBS-Overlays. */

/* ── Login-Screen ── */
#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-box {
  padding: 40px 36px;
  width: 380px;
  max-width: 100%;
}

.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo .logo-icon {
  width: 88px; height: 88px;
  object-fit: cover;
  display: block;
  margin: 0 auto 16px;
  image-rendering: pixelated;
  border: 3px solid var(--gold-outline);
  padding: 4px;
}
.login-logo h1 {
  font-family: var(--font-display);
  font-size: 20px; color: var(--gold-bright);
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 #000;
  margin-bottom: 4px;
}

.error-msg { color: var(--red); font-size: 12px; margin-top: 12px; min-height: 18px; text-shadow: 1px 1px 0 #000; }

/* ── App-Screen / Layout ── */
#app-screen { min-height: 100vh; }
.main { display: flex; flex-direction: column; min-width: 0; }
.content { padding: 24px; max-width: 800px; margin: 0 auto; width: 100%; }

/* ── Topbar ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: var(--panel-bg);
  border-bottom: 3px solid var(--gold);
  flex-wrap: wrap;
}
.topbar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-logo {
  width: 36px; height: 36px;
  object-fit: cover;
  image-rendering: pixelated;
  border: 2px solid var(--gold-outline);
  flex-shrink: 0;
}
.topbar-title { font-family: var(--font-display); font-size: 15px; color: var(--gold-bright); text-shadow: 1px 1px 0 #000; letter-spacing: 1px; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ── Panels ── */
.panel-box {
  background: var(--panel-bg);
  border: 3px solid var(--gold-outline);
  margin-bottom: 20px;
}
.panel-header {
  padding: 12px 18px;
  border-bottom: 2px solid var(--gold-outline);
  background: var(--panel-bg2);
  display: flex; align-items: center; justify-content: space-between;
}
.panel-title { font-family: var(--font-display); font-size: 13px; color: var(--gold-bright); text-shadow: 1px 1px 0 #000; display: flex; align-items: center; gap: 8px; }
.panel-body { padding: 16px 18px; }

.helptext { font-size: 12px; color: var(--tan); text-shadow: 1px 1px 0 #000; line-height: 1.6; }
.helptext strong { color: var(--gold-bright); }

ol { margin-left: 18px; }
li { margin-bottom: 4px; }
code {
  background: var(--panel-bg2);
  border: 1px solid var(--gold-outline);
  padding: 1px 6px;
  color: var(--gold-bright);
  font-family: var(--font-body);
}

/* ── Formfelder ── */
.field-label { font-size: 12px; color: var(--tan); text-shadow: 1px 1px 0 #000; margin-bottom: 6px; }

input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 9px 10px;
  background: var(--panel-bg2);
  border: 2px solid var(--gold-outline);
  color: var(--tan);
  font-family: var(--font-body);
  font-size: 13px;
  margin-bottom: 14px;
  outline: none;
  transition: border-color 0.1s;
}
input::placeholder, textarea::placeholder { color: var(--tan-dim); }
input:focus, textarea:focus, select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(200,168,75,0.2);
}
textarea { resize: vertical; }

input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--gold);
  margin: 0;
}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }

hr { border: none; border-top: 2px solid var(--gold-outline); margin: 16px 0; }
.mb12 { margin-bottom: 12px; }
.mt8  { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.gap8 { gap: 8px; }
.flex { display: flex; align-items: center; }
.flex1 { flex: 1; }

/* ── Buttons (nutzt das .pixel-btn-Grundgerüst aus pixel-theme.css unter
   dem bestehenden Klassennamen ".btn", damit die Portal-Markup/JS
   unverändert bleiben kann) ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  background: #4a4a4a;
  border: none;
  box-shadow: inset 2px 2px 0 #6e6e6e, inset -2px -2px 0 #232323, 0 0 0 1px #000;
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 13px;
  text-shadow: 1px 1px 0 #000;
  cursor: pointer;
  transition: filter 0.1s;
  text-decoration: none;
}
.btn:hover:not(:disabled) { filter: brightness(1.2); }
.btn:active:not(:disabled) { box-shadow: inset -2px -2px 0 #6e6e6e, inset 2px 2px 0 #232323, 0 0 0 1px #000; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.full { width: 100%; justify-content: center; }
.btn.sm { padding: 6px 11px; font-size: 11px; }
.btn.ghost {
  background: transparent; color: var(--tan);
  box-shadow: 0 0 0 2px var(--gold-outline) inset;
}
.btn.ghost:hover:not(:disabled) { color: var(--gold-bright); box-shadow: 0 0 0 2px var(--gold) inset; filter: none; }
.btn.danger  { background: #4a2020; color: var(--red);   box-shadow: inset 2px 2px 0 #6e3a3a, inset -2px -2px 0 #230f0f, 0 0 0 1px #000; }
.btn.success { background: #204a20; color: var(--green); box-shadow: inset 2px 2px 0 #3a6e3a, inset -2px -2px 0 #0f230f, 0 0 0 1px #000; }

/* ── Tabelle (Twitch-Trigger-Übersicht) ── */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; padding: 8px 12px;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold-bright); background: var(--panel-bg2);
  border-bottom: 2px solid var(--gold-outline);
}
td {
  text-align: left; padding: 8px 12px;
  font-size: 12px; color: var(--tan);
  border-bottom: 1px solid var(--gold-outline);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(200,168,75,0.05); }

/* ── Badges (Mod-Status, Trigger-Status) ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 0 #000;
}
.badge.green  { background: #0e1e0e; color: var(--green);  border: 2px solid var(--green); }
.badge.red    { background: #2a0e0e; color: var(--red);    border: 2px solid var(--red); }
.badge.yellow { background: #2a2008; color: var(--yellow); border: 2px solid var(--yellow); }
.badge.teal   { background: #0e1e0e; color: var(--green);  border: 2px solid var(--green); }
.badge.blue   { background: #0e1a2a; color: var(--blue);   border: 2px solid var(--blue); }
.badge.purple { background: #1e0e2a; color: var(--purple); border: 2px solid var(--purple); }
.badge.muted  { background: var(--panel-bg2); color: var(--tan-dim); border: 2px solid var(--gold-outline); }

/* ── Toasts ── */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--panel-bg);
  border: 2px solid var(--gold-outline);
  box-shadow: 0 0 0 1px #000, 3px 3px 0 #000;
  font-size: 12px;
  color: var(--tan);
  text-shadow: 1px 1px 0 #000;
  min-width: 240px; max-width: 380px;
  pointer-events: all;
  animation: toastIn 0.2s ease forwards;
}
.toast.out { animation: toastOut 0.15s ease forwards; }
.toast.success { border-color: var(--green); }
.toast.error   { border-color: var(--red); }
.toast.info    { border-color: var(--gold); }
.toast.warning { border-color: var(--yellow); }
.toast-icon { flex-shrink: 0; }
.toast.success .toast-icon { color: var(--green); }
.toast.error   .toast-icon { color: var(--red); }
.toast.info    .toast-icon { color: var(--gold-bright); }
.toast.warning .toast-icon { color: var(--yellow); }
.toast-msg { flex: 1; }
@keyframes toastIn  { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; } }

@media (max-width: 480px) {
  .topbar { padding: 12px 16px; }
  .content { padding: 16px; }
}