/* .input / .input.narrow leben jetzt in style.css (von Login + Admin genutzt) */
.error { color: var(--bad); min-height: 1.2rem; }

/* Admin-Panel: flexbox für sticky footer */
#adminPanel {
  display: flex;
  flex-direction: column;
}
.admin-footer {
  margin-top: auto;
  border-top: 1px solid #5a3a1a;
}

/* ---- Admin-Layout ---- */
.admin-main {
  /* explizite Breite noetig: #adminPanel ist ein Flex-Container (column,
     fuer den Sticky-Footer) und "margin: ... auto" hier setzt Auto-Margins
     auf der Cross-Achse -> das deaktiviert das automatische Stretch und
     .admin-main wuerde sich sonst auf die Inhaltsbreite schrumpfen (Ursache
     des mobilen Overflow-Bugs). Mit width:100% + max-width bleibt die
     Desktop-Zentrierung ab 1600px erhalten, aber darunter ist es immer
     exakt containerbreit. */
  width: 100%;
  max-width: 1600px;
  margin: 1.5rem auto;
  padding: 0 1.5rem;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem 0.6rem 0;
}
.tab {
  background: #6b4a28;
  border: 2px solid #5a3a1a;
  border-bottom: none;
  color: #d0be9c;
  padding: 0.5rem 1.1rem;
  border-radius: 8px 8px 0 0;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.tab.active {
  background: #d0be9c;
  color: var(--ink);
  font-weight: 800;
}
.pill { background: var(--bad); color: #fff; border-radius: 10px; padding: 0 0.4rem; font-size: 0.8rem; }
.pill:empty { display: none; }

/* Ko-fi-Button nur auf dem PIN-Gate zeigen, im entsperrten Eltern-Bereich
   ausblenden (stört dort v.a. mobil). Deckt Button-Wrap + Popup-Iframe ab. */
body.parent-unlocked [class*="floatingchat"],
body.parent-unlocked [class*="floating-chat"],
body.parent-unlocked [id*="kofi"] { display: none !important; }

.admin-body {
  background: #d0be9c;
  border: 2px solid #5a3a1a;
  border-radius: 0 8px 8px 8px;
  padding: 1rem 1.2rem;
  min-height: 200px;
  /* Sicherheitsnetz: falls Formularinhalte (z.B. Level-Kurven-Vorschau) minimal
     breiter rendern als der Viewport, hier abschneiden statt die ganze Seite
     horizontal scrollbar zu machen. Bewusst NUR hier (nicht auf #adminPanel),
     damit das eigene Scrollen der .tabs-Leiste (Geschwister, kein Nachfahre
     von .admin-body) unangetastet bleibt. */
  overflow-x: clip;
}

.tab-content { }
.card-list { display: flex; flex-direction: column; gap: 0.6rem; }
.budget-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }

/* Karten & Listeneinträge als Pergament-Slots (9-slice aus dem UI-Sheet) */
.card, .list-item {
  background: none;
  border: 12px solid transparent;
  border-image: var(--frame-slot) 14 fill / 12px stretch;
  image-rendering: pixelated;
  color: var(--ink);
}
.card { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.4rem 0.7rem; margin-bottom: 0.7rem;}
.list-item { display: flex; align-items: center; gap: 0.8rem; justify-content: space-between; padding: 0.5rem 0.7rem; min-height: 62px; }

.row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
/* Kinder-Statistik-Zeile: jede Gruppe = Icon + Label + Feld eng beieinander,
   größerer Abstand ZWISCHEN den Gruppen -> klar, welches Icon zu welchem Feld gehört. */
.kid-stats { gap: 1.9rem; }
.kid-stats label { display: inline-flex; align-items: center; gap: 0.4rem; }
.checkbox { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
/* Checkbox im selben Look wie die Wochentag-Toggles: inaktiv beige Box mit
   Navy-Rand, aktiv mit icon_check darüber (statt System-Default). */
.checkbox input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  flex-shrink: 0; margin: 0; cursor: pointer;
  width: 1.6rem; height: 1.6rem;
  background: #c2b083; border: 2px solid var(--navy); border-radius: 6px;
}
.checkbox input[type="checkbox"]:checked {
  background-image: url('/assets/ui/icons/icon_check.png');
  background-size: 1.1rem; background-position: center; background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* Wochentag-Auswahl */
.weekdays { display: flex; flex-direction: column; gap: 0.4rem; }
.wd-label { font-size: 0.9rem; color: var(--muted); }
.dow-choices { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.dow-toggle { position: relative; }
.dow-toggle input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.dow-toggle span {
  display: inline-block; min-width: 2.4rem; text-align: center;
  padding: 0.35rem 0.2rem; border-radius: 6px;
  background: #c2b083; color: var(--muted);
  border: 2px solid var(--navy); font-weight: 700; cursor: pointer;
}
.dow-toggle input:checked + span { background: var(--good); color: var(--ink); }

/* Ziel-Icon-Auswahl (Ziele-Tab) */
.icon-choices { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.icon-choice {
  width: 3rem; height: 3rem; padding: 0;
  background-color: #c2b083; background-size: 70%; background-position: center; background-repeat: no-repeat;
  border: 2px solid var(--navy); border-radius: 6px; cursor: pointer;
  image-rendering: pixelated;
}
.icon-choice.selected { outline: 3px solid var(--accent); outline-offset: -2px; }

/* Monster */
.monster-form-layout { display: flex; gap: 1rem; align-items: flex-start; }
.monster-form-fields { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; min-width: 0; }
.monster-preview { flex: 1; min-width: 160px; height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.char-form-top { display: flex; gap: 1rem; align-items: flex-start; }
.char-form-fields { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; min-width: 0; }
.char-name-preview { width: 160px; height: 160px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* Breite Einzelfelder in .row-Zeilen (Level-Kurve, Achievement-Schwellen):
   wollen auf Desktop eine Mindestbreite, müssen aber im Handy-Hochformat
   schrumpfen dürfen (siehe Portrait-Media-Query). */
.wide-field { flex: 1; min-width: 280px; }

/* Slider in .row-Zeilen (Namenshöhe/Farb-Deckkraft): "flex:1" allein reicht
   nicht -- Flex-Items haben standardmäßig min-width:auto, und der Slider
   fällt dabei auf seine UA-Default-Breite zurück statt zu schrumpfen. */
input[type="range"] { min-width: 0; max-width: 100%; }
/* Deckkraft-Slider (Farben-Formular) unter Farbfeld+Prozentzahl statt daneben
   -- neben dem 60px-Farbswatch blieb sonst kaum Platz, der Slider wirkte winzig. */
.opacity-slider { display: block; width: 100%; margin: 0.5rem 0 0; }

.hint { color: #5c4a2c; font-size: 0.85rem; margin: 0.2rem 0 0.8rem; }
#taskFormTitle { margin-bottom: 0.3rem; }
/* Kurzer Sterne-Tipp zwischen "Neue Mission"-Button und Liste: etwas Luft oben/unten. */
#levelInfoNote { margin: 0.9rem 0; }
.section-title { margin: 1.4rem 0 0.2rem; font-size: 1.1rem; color: var(--ink); }

/* ---- Settings-Panel: einheitlicher Pergament-Rahmen für Gruppen (z.B. im
   "Unlocks"-Tab), damit lose Einstellungsfelder und Formular+Liste-Blöcke
   gleich aussehen statt teils frei zu schweben, teils in .card zu stecken. */
.settings-panel {
  border: 12px solid transparent;
  border-image: var(--frame-slot) 14 fill / 12px stretch;
  image-rendering: pixelated;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
}
.settings-panel + .settings-panel { margin-top: 0; }
.panel-title {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.9rem; font-size: 1.15rem; font-weight: 800; color: var(--ink);
}
.panel-title .ico { width: 1.6em; height: 1.6em; }
/* Unterabschnitt INNERHALB eines Panels (z.B. Level-Kurve/Dropchance/Achievements
   innerhalb von "Spielbalance") -> dezenter als .section-title, kein Extra-Rahmen. */
.panel-sub {
  margin: 1.1rem 0 0.2rem; font-size: 0.95rem; font-weight: 700; color: var(--ink);
}
.panel-sub:first-child { margin-top: 0; }
.settings-panel hr { border: none; border-top: 2px dashed #a98a5c; margin: 1rem 0; }
.settings-panel .card-list { margin-top: 0.8rem; }
/* Unlock-Formulare (Charaktere/Farben) sitzen jetzt direkt im Panel -> kein
   eigener .card-Rahmen mehr nötig (sonst doppelte Umrandung). */
.unlock-form { display: flex; flex-direction: column; gap: 0.6rem; }

.li-main { display: flex; flex-direction: column; gap: 0.2rem; }
.li-title { font-weight: 700; }
.li-meta { font-size: 0.85rem; color: var(--muted); }
.li-actions { display: flex; gap: 0.5rem; }
.tag { background: rgba(44,40,64,0.15); color: var(--ink); border-radius: 6px; padding: 0.1rem 0.5rem; font-size: 0.75rem; }
.tag.auto { background: #3f7a2f; color: #fff; }

/* ---- Missions-Filterleiste (nur Querformat, siehe Portrait-Media-Query) ---- */
.task-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.7rem 0 0.9rem; }
.task-filters #taskSearch { flex: 1 1 200px; min-width: 160px; }

/* ---- Custom-Dropdown (stylebar, statt nativem <select>) ---- */
.dropdown { position: relative; display: inline-block; }
.dropdown-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #d0be9c; border: 2px solid var(--navy); border-radius: 6px;
  padding: 0.5rem 0.7rem; color: var(--ink); font: inherit; cursor: pointer;
}
.dropdown-caret {
  width: 0; height: 0; margin-left: auto;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--navy);
}
.dropdown-menu {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 100%;
  list-style: none; margin: 0; padding: 0.3rem;
  background: #d6c7a4; border: 2px solid var(--navy); border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  max-height: 280px; overflow-y: auto;
}
.dropdown-menu.hidden { display: none; }
.dropdown-menu li {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.7rem; border-radius: 5px; cursor: pointer;
  white-space: nowrap; color: var(--ink); font-weight: 600;
}
.dropdown-menu li:hover { background: #c2b083; }
.dropdown-menu li.sel { background: var(--good); }
/* Auswahl-Kästchen für das Multiselect-Dropdown (Wochentage). */
.dd-check { width: 14px; height: 14px; flex: 0 0 auto; border: 2px solid var(--navy); border-radius: 3px; background: #d0be9c; }
.dropdown-menu li.sel .dd-check { background: var(--ink); }

/* ---- Hochformat (Handy): Eltern-Bereich kompakter ---- */
@media (orientation: portrait) {
  /* Außenabstände/Padding deutlich reduzieren -> mehr nutzbare Breite. */
  .admin-main { margin: 0.5rem auto; padding: 0 0.4rem; }
  .admin-body { padding: 0.7rem 0.7rem; }

  /* Tabs: mehrzeilig umbrechen statt horizontal scrollen -- eine scrollbare
     Reihe mit 8 Tabs hat auf schmalen Screens die Breite der ganzen Seite
     nach oben durchgereicht (Layout-Bug). Umbruch ist zwar etwas höher,
     bleibt aber garantiert innerhalb der Viewport-Breite.
     Der "Aktenreiter"-Look (eckig unten, kein Rand unten) der Desktop-Version
     passt nicht mehr, sobald mehrere Zeilen "floaten" -- stattdessen ein
     durchgehendes Holz-Panel als Hintergrund, auf dem die Tabs als runde
     Pillen sitzen (aktiver Tab bleibt beige wie .admin-body darunter, damit
     die Verbindung optisch erhalten bleibt). */
  .tabs {
    flex-wrap: wrap;
    background: #5a3a1a;
    border-radius: 8px 8px 0 0;
    padding: 0.5rem 0.5rem 0.6rem;
  }
  .tab { flex: 0 1 auto; white-space: nowrap; padding: 0.4rem 0.8rem; font-size: 0.9rem; border-radius: 6px; border-bottom: 2px solid #5a3a1a; }
  .tab.active { border-radius: 6px; }
  .admin-body { border-radius: 0 0 8px 8px; }

  /* Listeneinträge stapeln: Aktion(en) unter den Text statt daneben ->
     Titel bekommt die volle Breite und bricht nicht mehr in viele Zeilen. */
  .list-item { flex-direction: column; align-items: stretch; gap: 0.5rem; min-height: 0; }
  .li-actions { flex-wrap: wrap; }

  /* Missions-Filter/Suche nur im Querformat zeigen (Wunsch: nicht auf Handy-Hochformat). */
  .task-filters { display: none; }

  /* Settings-Panels (Unlocks-Tab) etwas schlanker -> mehr Platz für Inhalt. */
  .settings-panel { padding: 0.8rem 0.7rem; }

  /* Breite Einzelfelder dürfen nicht mehr auf 280px bestehen -> sonst
     sprengen sie auf schmalen Screens die Zeile (siehe .wide-field oben). */
  .wide-field { min-width: 0; flex-basis: 100%; }

  /* Feste 140px-Breite reicht auf schmalen Screens oft nicht mehr neben
     anderen Feldern in derselben .row -> auf Formularbreite begrenzen statt
     starr, damit die Zeile umbricht statt seitlich überzulaufen. */
  .input.narrow { width: 100%; max-width: 140px; }

  /* Selects ohne "narrow" (Sprite/Sound/Achievement-Auswahl im Unlocks-Tab)
     sizen sich sonst am breitesten Options-Text -> kann auf schmalen Screens
     breiter sein als der Container und seitliches Scrollen erzwingen. */
  .settings-panel select.input,
  .settings-panel input.input:not(.narrow) { max-width: 100%; }

  /* Monster/Charakter-Formular: Vorschau + Felder nebeneinander sprengen auf
     Hochformat die Breite (feste Vorschau-Größe + Formularfelder mit
     Mindestbreite) -> stattdessen stapeln, Vorschau zentriert und kompakter. */
  .monster-form-layout, .char-form-top {
    flex-direction: column;
    align-items: stretch;
  }
  .monster-preview, .char-name-preview {
    width: 100%;
    max-width: 140px;
    height: 140px;
    min-width: 0;
    flex: 0 0 auto;
    align-self: center;
  }
}