/* Layout für admin.php (Moderationsbereich) */
/* Grundfarben (--teal, --slate, --muted, --line, --bg, --red, --red-l) kommen
   jetzt aus style.css (gemeinsames Layout über layout.php/layout_template.html).
   Hier nur noch die admin-spezifischen Zusatzfarben. */
  :root {
    --amber:  #b45309;
    --amber-l:#fef3c7;
    --green:  #166534;
    --green-l:#dcfce7;
  }

  /* Login */
  .login-wrap {
    min-height: calc(100vh - 33px);
    display: flex; align-items: center; justify-content: center;
  }
  .login-box {
    background:#fff; border:1px solid var(--line); border-radius:14px;
    padding: 40px 36px; width:100%; max-width:360px;
  }
  .login-icon {
    width:48px; height:48px; border-radius:12px;
    background:var(--slate); display:flex; align-items:center;
    justify-content:center; font-size:22px; margin-bottom:20px;
  }
  .login-box h1 { font-size:20px; margin:0 0 4px; }
  .login-box p  { font-size:14px; color:var(--muted); margin:0 0 24px; }

  /* Bögen/Messungen/Verwaltung-Navigation und Statistik: Inhalt des
     "Aktion"-Sidebar-Slots (siehe $sidebarAktionen in admin.php). Struktur
     und Optik der Sidebar selbst (.sidebar, .nav-group, .nav-label,
     .sidebar nav a, …) kommen jetzt aus style.css (gemeinsames Layout über
     layout.php/layout_template.html, identisch zu bewertung.php/messwerte.php). */
  .badge-offen { display:inline-block; background:var(--amber-l); color:var(--amber);
                 font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px; }

  .main-content h2 { font-size:17px; margin:0 0 16px; }

  /* Karten / Tabellen */
  .card { background:#fff; border:1px solid var(--line); border-radius:12px;
          padding:20px; margin-bottom:16px; }
  label  { display:block; font-size:13px; font-weight:600; color:#334155; margin:0 0 4px; }
  input[type=password], input[type=text], select {
    width:100%; padding:9px 11px; font-size:14px;
    border:1px solid #cbd5e1; border-radius:8px;
    background:#fff;
  }
  input:focus, select:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,118,110,.15); }

  button, .btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 16px; font-size:13px; font-weight:600;
    border-radius:8px; border:1px solid transparent; cursor:pointer;
    text-decoration:none;
  }
  .btn-primary  { background:var(--teal);  color:#fff; }
  .btn-primary:hover { background:var(--teal-d); }
  .btn-approve  { background:var(--green-l); color:var(--green); border-color:#bbf7d0; }
  .btn-approve:hover { background:#bbf7d0; }
  .btn-reject   { background:var(--red-l);   color:var(--red);   border-color:#fecaca; }
  .btn-reject:hover  { background:#fecaca; }
  .btn-ghost    { background:#fff; color:#334155; border-color:#cbd5e1; }
  .btn-ghost:hover   { background:var(--bg); }
  .btn-sm { padding:5px 10px; font-size:12px; }

  table { width:100%; border-collapse:collapse; font-size:13px; }
  th, td { text-align:left; padding:9px 10px; border-top:1px solid var(--line); }
  thead th { border-top:none; background:#f8fafc; font-size:11px; text-transform:uppercase;
             letter-spacing:.04em; color:#64748b; font-weight:700; }
  .num { text-align:right; font-variant-numeric:tabular-nums; }
  .pill { font-size:12px; color:var(--muted); }
  td .actions { display:flex; gap:6px; }

  .flash { padding:10px 14px; border-radius:8px; font-size:14px; margin-bottom:20px; }
  .flash-ok  { background:var(--green-l); color:var(--green); }
  .flash-err { background:var(--red-l);   color:var(--red); }
  .flash-warn{ background:var(--amber-l); color:var(--amber); }

  .empty { color:var(--muted); font-size:13px; padding:20px 0; text-align:center; }

  .tabs { display:flex; gap:2px; margin-bottom:20px; border-bottom:2px solid var(--line); }
  .tab  { padding:9px 16px; font-size:13px; font-weight:600; color:var(--muted);
          cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; background:none; border-top:0; border-left:0; border-right:0; }
  .tab.active { color:var(--teal); border-bottom-color:var(--teal); }
  .tab-panel  { display:none; }
  .tab-panel.active { display:block; }

  .setup-hint { background:var(--amber-l); border:1px solid #fcd34d; border-radius:10px;
                padding:16px 18px; font-size:13px; color:var(--amber); line-height:1.6; }
  .setup-hint code { background:#fef9c3; padding:2px 6px; border-radius:4px;
                     font-family:monospace; font-size:12px; }

/* Passwort-Felder: Augen-Umschalter (anzeigen/verbergen) */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 42px; }
.pw-eye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer;
  padding: 2px 4px; margin: 0; font-size: 16px; line-height: 1;
  color: #64748b; border-radius: 6px;
}
.pw-eye:hover { color: #334155; background: rgba(0,0,0,.05); }

/* Sortierbare Spaltenköpfe (tabelleInitSort in tabelle.js) */
.sort-th { all:unset; cursor:pointer; font:inherit; font-weight:600;
            display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.sort-th:hover { color:var(--teal); }
.sort-th::after { content:'⇅'; font-size:.75em; opacity:.35; }
.sort-th[data-dir=asc]::after  { content:'▲'; opacity:1; color:var(--teal); }
.sort-th[data-dir=desc]::after { content:'▼'; opacity:1; color:var(--teal); }

/* Karten-Container (Leaflet): gemeinsame Optik + festes 4:3 (analog style.css
   in bewertung.php). Betrifft die Koordinaten-Picker #ms-karte und #gew-karte.
   Auf Handy/schmalen Screens KEIN festes 4:3 – sonst wird die Karte (volle
   Breite × ¾) sehr hoch, geht „über den Bildschirm" und erschwert das Scrollen;
   stattdessen aspect-ratio aus und moderate feste Höhe. Die Handy-Regel steht
   bewusst NACH der Basisregel, damit sie bei gleicher Spezifität per
   Quellreihenfolge gewinnt. */
.karte-box { border-radius:10px; border:1px solid var(--line); }
.karte-box--4zu3 { aspect-ratio: 4 / 3; }
@media (max-width: 760px) {
  .karte-box--4zu3 { aspect-ratio: auto; height: 260px; }
}