/* ==========================================================================
   Villa Admin: der Reiter Einstellungen
   Angelegt 12.09.2026, Sitzung d336ce82.
   Nur das Neue steht hier. Kaesten, Felder und Knoepfe kommen weiter aus
   dem Stil des Panels (adm-box, adm-field, adm-btn), damit nicht ein
   zweites Aussehen entsteht.
   ========================================================================== */

/* --- Die drei Zahlen oben nebeneinander und schmal ----------------------
   Gemessen am 12.09.2026: ohne diese Regeln standen "Anzahl Tische",
   "Plaetze pro Tisch" und "Davon im Innenraum" untereinander und jedes
   Feld ueber die ganze Breite. Eine einstellige Zahl in einem Feld von
   1000 Pixeln sieht nach Versehen aus. Bewusst nur unter #einst-inhalt,
   damit kein anderer Reiter etwas davon merkt. */
#einst-inhalt .adm-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
}

#einst-inhalt .adm-field-row .adm-field { flex: 0 0 auto; }
#einst-inhalt .adm-field input[type="number"] { max-width: 168px; }
.einst-zimmer .adm-field input[type="number"] { max-width: 104px; }

/* Der Knopf braucht Luft nach oben, sonst klebt er am Text darueber. */
#einst-inhalt .adm-box > .adm-btn { margin-top: 14px; }

@media (max-width: 490px) {
  #einst-inhalt .adm-field-row .adm-field { flex: 1 1 100%; }
  #einst-inhalt .adm-field input[type="number"] { max-width: none; }
}

/* --- Einzelne Tische, die anders sind ------------------------------------ */
.einst-auf { margin: 12px 0; }

.einst-auf > summary {
  /* 44 sind Hausregel, auch fuer eine Zeile, die man antippt. */
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-family: var(--vr-font-display, Georgia, serif);
  font-size: var(--vr-text-md, 1.125rem);
  color: var(--vr-burgund, #6E1A24);
}

.einst-auf > summary:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 2px; }

.einst-tische {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.einst-tisch { display: flex; align-items: center; gap: 8px; }

.einst-tisch label {
  flex: 0 0 auto;
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-muted, #6B5E50);
}

.einst-tisch input {
  width: 100%;
  min-width: 62px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-weiss, #FFFDF9);
  font-family: inherit;
  /* 16px, sonst zoomt iOS beim Antippen. */
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--vr-text-dunkel, #1A1410);
}

.einst-tisch input:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 2px; }

/* --- Zimmer -------------------------------------------------------------- */
.einst-zimmer-liste { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }

.einst-zimmer {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-left: 3px solid var(--vr-gold, #B8924A);
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-papier, #FBF7EE);
}

.einst-nr {
  flex: 0 0 auto;
  align-self: center;
  min-width: 26px;
  font-family: var(--vr-font-display, Georgia, serif);
  font-size: var(--vr-text-md, 1.125rem);
  color: var(--vr-text-muted, #6B5E50);
}

.einst-weit { flex: 1 1 auto; }

.einst-weg {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: 9999px;
  background: transparent;
  font-family: inherit;
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-burgund, #6E1A24);
  cursor: pointer;
}

.einst-weg:hover:not(:disabled) { border-color: var(--vr-burgund, #6E1A24); }
.einst-weg:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 2px; }
.einst-weg:disabled { opacity: 0.5; cursor: default; }

/* --- Welche Bereiche dieses Haus hat ------------------------------------- */
.einst-module {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 6px;
  margin: 12px 0;
}

.einst-modul {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 8px;
  border-radius: var(--vr-radius-sm, 4px);
  cursor: pointer;
}

.einst-modul:hover { background: var(--vr-creme-tief, #EFE6D2); }
.einst-modul input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--vr-burgund, #6E1A24); }

/* --- Meldungen ----------------------------------------------------------- */
.einst-hinweis {
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-creme-tief, #EFE6D2);
  font-size: var(--vr-text-sm, 0.875rem);
  line-height: 1.5;
  color: var(--vr-text-muted, #6B5E50);
}

.einst-hinweis--info { border-left: 3px solid var(--vr-gold, #B8924A); }
.einst-hinweis--fehler { background: #F6E3E5; color: var(--vr-burgund, #6E1A24); font-weight: 600; }
.einst-hinweis--gut { background: #E4EFE2; color: #2F5B2A; font-weight: 600; }

/* --- Dunkelfassung, dieselben Werte wie in den uebrigen Reitern ---------- */
html[data-theme="dark"] .einst-zimmer,
html[data-theme="dark"] .einst-tisch input,
html[data-theme="dark"] .einst-hinweis {
  background: #2A2520;
  border-color: #4A4035;
  color: #F5EFE0;
}

html[data-theme="dark"] .einst-auf > summary { color: #D4B070; }
html[data-theme="dark"] .einst-nr,
html[data-theme="dark"] .einst-tisch label { color: #B5A895; }
html[data-theme="dark"] .einst-weg { border-color: #4A4035; color: #D4B070; }
html[data-theme="dark"] .einst-modul:hover { background: #332B23; }
html[data-theme="dark"] .einst-hinweis--fehler { background: #3A2225; color: #E8A0AC; }
html[data-theme="dark"] .einst-hinweis--gut { background: #22301F; color: #A8D3A0; }

/* --- Schmale Schirme. Nur die drei Breakpunkte, die im Haus gelten. ------ */
@media (max-width: 768px) {
  .einst-zimmer { align-items: stretch; flex-wrap: wrap; }
  .einst-weit { flex: 1 1 100%; }
}

@media (max-width: 490px) {
  .einst-zimmer { flex-direction: column; align-items: stretch; }
  .einst-nr { align-self: flex-start; }
  .einst-weg { width: 100%; }
  .einst-tische { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
}