/* =========================================================
   ADMIN PANEL — im Holo-Design (Präfix "ad-")
   ========================================================= */

#admin-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 7vh 16px 16px;
  background: rgba(0, 4, 6, .72);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .3s ease;
  color: var(--silver-pure);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 14px;
}
#admin-panel[hidden] { display: none; }
#admin-panel.is-open { opacity: 1; }

.ad-shell {
  width: min(760px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: rgba(3, 9, 12, .94);
  border: 1px solid rgba(92, 160, 171, .3);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .7);
  transform: translateY(10px) scale(.98);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
#admin-panel.is-open .ad-shell { transform: none; }

.ad-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(92, 160, 171, .22);
}
.ad-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--silver-bright);
}
.ad-head button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
.ad-back, .ad-close { color: var(--accent-light); font-size: 16px; padding: 4px 8px; }
.ad-back:hover, .ad-close:hover { color: var(--silver-bright); }
.ad-back[hidden], .ad-logout[hidden] { display: none; }
.ad-logout { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--silver); }
.ad-logout:hover { color: var(--silver-bright); }

.ad-body {
  overflow-y: auto;
  padding: 18px;
  display: grid;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(92, 160, 171, .3) transparent;
}

/* ---------- Login ---------- */

.ad-login { display: grid; gap: 12px; width: min(320px, 100%); margin: 24px auto; }
.ad-login-title { text-align: center; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--silver); }

.ad-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(92, 160, 171, .3);
  border-radius: 10px;
  outline: none;
}
.ad-input:focus { border-color: var(--accent-light); }

.ad-msg { min-height: 16px; font-size: 12px; color: var(--silver); }
.ad-msg.is-err { color: #ff5f6d; }

/* ---------- Buttons ---------- */

.ad-btn {
  padding: 9px 18px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--silver-bright);
  background: rgba(0, 73, 83, .55);
  border: 1px solid var(--accent-light);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
.ad-btn:hover { background: rgba(42, 111, 122, .7); box-shadow: 0 0 14px rgba(92, 160, 171, .35); }
.ad-btn:disabled { opacity: .5; cursor: default; }
.ad-btn-danger { background: transparent; border-color: rgba(255, 95, 109, .5); color: #ff8b95; }
.ad-btn-danger:hover { background: rgba(255, 95, 109, .15); box-shadow: none; }

/* ---------- Dashboard ---------- */

.ad-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(92, 160, 171, .25);
  border-radius: 14px;
  background: rgba(0, 73, 83, .1);
}
.ad-card-head { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-light); }
.ad-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.ad-stat { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.ad-stat b { display: block; font-size: 26px; font-weight: 600; color: var(--silver-bright); }
.ad-stat span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--silver); }
.ad-stat.is-alert b { color: #e8c46a; }
.ad-card .ad-btn { justify-self: start; }

/* ---------- Listen ---------- */

.ad-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(92, 160, 171, .22); }
.ad-tab {
  padding: 9px 14px;
  font: inherit;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--silver);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.ad-tab.is-active { color: var(--accent-light); border-bottom-color: var(--accent-light); }

.ad-list { display: grid; gap: 10px; margin-top: 12px; }

.ad-row {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(92, 160, 171, .2);
  border-radius: 12px;
}
.ad-row.is-open { border-color: rgba(232, 196, 106, .45); background: rgba(232, 196, 106, .05); }
.ad-row-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ad-row-meta { font-size: 12px; color: var(--silver); }
.ad-stars { color: #e8c46a; }
.ad-badge {
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(92, 160, 171, .35);
  border-radius: 999px;
  color: var(--accent-light);
}
.ad-badge.is-alert { border-color: rgba(232, 196, 106, .6); color: #e8c46a; }
.ad-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ad-tag { font-size: 10px; padding: 2px 6px; border: 1px solid rgba(92, 160, 171, .25); border-radius: 4px; color: var(--accent-light); }
.ad-note { font-size: 12px; font-style: italic; line-height: 1.5; color: var(--silver); }
.ad-link { font-size: 12px; color: var(--accent-light); text-decoration: none; }
.ad-link:hover { text-decoration: underline; }
.ad-coords { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ad-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ad-empty { padding: 28px 12px; text-align: center; color: var(--silver); }

/* Beim geöffneten Panel nichts dahinter anklicken */
body.admin-open #nav-bar,
body.admin-open #bg-controls { pointer-events: none; }