/*
 * Leihdex – Verwaltungsseiten (/verwaltung, /konto). Ergänzt leihdex.css; eingebunden über verwaltung/_assets.blade.php.
 * Handy zuerst, ab 700 px mehr Platz.
 */

/* ---------- Übersicht: Kacheln ---------- */

.kacheln { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 16px; }
.kachel {
    display: block; padding: 16px; background: var(--flaeche); border: 1px solid var(--linie);
    border-radius: var(--radius); box-shadow: var(--schatten); color: var(--text); text-decoration: none;
}
a.kachel:hover { border-color: var(--akzent); background: var(--akzent-hell); color: var(--text); }
.kachel__titel { display: block; font-size: 1.1rem; font-weight: 700; color: var(--akzent-dunkel); margin-bottom: 4px; }
.kachel__text { display: block; color: var(--text-leise); font-size: 0.9rem; }
.kachel__zahl { display: block; font-size: 1.6rem; font-weight: 800; margin-top: 8px; }
.kachel--hinweis { background: var(--hintergrund); box-shadow: none; }
.kachel code, .befehl {
    display: inline-block; background: #eef1f4; border: 1px solid var(--linie); border-radius: 4px;
    padding: 1px 6px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.85rem; word-break: break-all;
}

/* ---------- Zahlen und Marken in Listen ---------- */

.mengen { display: flex; flex-wrap: wrap; gap: 4px; }
.formular-gruppe { border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 16px 4px; margin: 0 0 16px; }
.formular-gruppe legend { font-weight: 700; padding: 0 6px; }
.versandzeile { display: grid; grid-template-columns: 1fr; gap: 0 12px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.versandzeile:last-child { border-bottom: 0; }
.versandzeile .feld { margin-bottom: 8px; }

/* ---------- Preisregel ---------- */

.json-feld {
    width: 100%; min-height: 18rem; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.85rem; line-height: 1.4; tab-size: 2; white-space: pre; overflow: auto;
}
.regel { margin: 0; padding: 0; list-style: none; }
.regel__zeile { padding: 4px 0; border-bottom: 1px solid var(--linie); }
.regel__zeile:last-child { border-bottom: 0; }
.regel__name { color: var(--text-leise); font-size: 0.85rem; }
.regel__wert { font-weight: 600; }
.regel .regel { margin: 4px 0 4px 12px; padding-left: 12px; border-left: 3px solid var(--linie); }
.doku { background: var(--hintergrund); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 12px; font-size: 0.9rem; }
.doku dt { color: var(--text-leise); font-size: 0.8rem; margin-top: 6px; }
.doku dt:first-child { margin-top: 0; }
.doku dd { margin: 0; }

/* ---------- Exemplare ---------- */

.exemplar-form { display: grid; gap: 8px; grid-template-columns: 1fr; align-items: end; }
.exemplar-form .feld { margin-bottom: 0; }
.nummer { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700; }
.zeile-gesperrt td { background: #fbf3f3; }

/* ---------- Protokoll ---------- */

.protokoll { list-style: none; margin: 0; padding: 0; }
.protokoll li { padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: 0.9rem; }
.protokoll li:last-child { border-bottom: 0; }

/* ---------- Etiketten (Druck) ---------- */

.etiketten { display: grid; grid-template-columns: 1fr; gap: 12px; }
.etikett {
    break-inside: avoid; page-break-inside: avoid; background: #fff; border: 2px dashed var(--linie-stark);
    border-radius: 6px; padding: 14px 12px; text-align: center;
}
.etikett__nummer {
    display: block; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 800;
    font-size: 2.6rem; line-height: 1.1; letter-spacing: 0.04em; word-break: break-all;
}
.etikett__gruppe { display: block; margin-top: 6px; font-size: 1.1rem; font-weight: 600; }
.etikett__detail { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--text-leise); }

@media (min-width: 700px) {
    .kacheln { grid-template-columns: repeat(2, 1fr); }
    .exemplar-form { grid-template-columns: repeat(3, 1fr); }
    .versandzeile { grid-template-columns: 12rem 1fr 1fr; align-items: center; }
    .etiketten { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
    .kacheln { grid-template-columns: repeat(3, 1fr); }
}

@media print {
    .nur-bildschirm { display: none !important; }
    .etiketten { grid-template-columns: repeat(2, 1fr); gap: 8mm; }
    .etikett { border: 1px dashed #666; padding: 8mm 4mm; }
    .etikett__nummer { font-size: 30pt; }
    .inhalt { padding: 0; }
    .seitenkopf h1 { font-size: 14pt; }
}

.verw-speichern { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 32px; }

/* Stammdaten eines Exemplars ändern (aufklappbar unter der Inventarnummer) */
.exemplar-stamm { margin-top: 8px; }
.exemplar-stamm > summary { cursor: pointer; font-size: 0.875rem; color: var(--akzent); min-height: 44px; display: flex; align-items: center; }
.exemplar-stamm__form { display: grid; gap: 8px; grid-template-columns: 1fr; padding: 8px 0; }
.exemplar-stamm__form .feld { margin-bottom: 0; }
@media (min-width: 720px) {
    .exemplar-stamm__form { grid-template-columns: repeat(2, 1fr); }
    .exemplar-stamm__breit { grid-column: 1 / -1; }
}

/* Beschriftung von Status/Zustand je Gerät (sichtbar, damit klar ist, was welches Feld ist) */
.exemplar-form__label { display: block; margin-bottom: 2px; font-size: 0.8rem; font-weight: 600; color: var(--text-leise); }
.vorlage-wahl select { max-width: 40rem; }

/* =====================================================================================================================
   Erklärungen auf den Verwaltungsseiten (Hilfe-System, docs/HILFE.md): Einleitung, Checkliste, Kachelgruppen, Vorschau.
   ===================================================================================================================== */

/* Kurzanleitung oben auf der Seite: „Wozu ist diese Seite?“ und „Was tun Sie hier?“ */
.verw-einleitung {
    margin: 0 0 16px; padding: 12px 16px; background: var(--akzent-hell); border: 1px solid #c3d8ec; border-radius: var(--radius);
}
.verw-einleitung p { margin: 0 0 6px; }
.verw-einleitung p:last-child { margin-bottom: 0; }
.verw-folge { margin: 12px 0 0; }
.verw-legende { margin: 8px 0 16px; }
.verw-kartentext { margin: 0; padding: 12px 16px 0; }
.verw-trenner { margin: 16px 0; border: 0; border-top: 1px solid var(--linie); }

/* Checkliste „Einrichtung abgeschlossen?“ */
.einrichtung { list-style: none; margin: 0 0 12px; padding: 0; }
.einrichtung__punkt {
    display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linie);
}
.einrichtung__punkt:last-child { border-bottom: 0; }
.einrichtung__marke { justify-self: start; min-width: 7.5rem; text-align: center; white-space: nowrap; }
.einrichtung__text { display: flex; flex-direction: column; gap: 2px; }
.einrichtung__punkt .knopf { grid-column: 2; justify-self: start; }
@media (min-width: 700px) {
    .einrichtung__punkt { grid-template-columns: 9rem 1fr auto; }
    .einrichtung__punkt .knopf { grid-column: 3; }
}

/* Kachelgruppen: Zuerst einrichten / Danach / Im Alltag / Für die Technik */
.kachelgruppe { margin: 24px 0 4px; font-size: 1.15rem; }
.kachelgruppe__text { margin: 0 0 10px; }
.kachel { position: relative; }
.kachel__nummer {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: 6px;
    border-radius: 50%; background: var(--akzent); color: #fff; font-weight: 700; font-size: 0.95rem;
}
.kachel__wann { display: block; margin-top: 8px; font-size: 0.85rem; color: var(--text); }
.kachel .knopf, .kachel form { margin-top: 10px; }
.kachel__text + .kachel__text { margin-top: 8px; }
.kachel__technik { margin-top: 10px; font-size: 0.85rem; }
.kachel__technik summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--akzent); }

/* Rollen erklärt (Benutzer) */
.rollenliste { margin: 0 0 16px; display: grid; grid-template-columns: 1fr; gap: 2px 16px; }
.rollenliste dt { font-weight: 700; margin-top: 8px; }
.rollenliste dd { margin: 0; color: var(--text-leise); font-size: 0.9rem; }
@media (min-width: 700px) {
    .rollenliste { grid-template-columns: 10rem 1fr; }
    .rollenliste dt, .rollenliste dd { margin-top: 0; padding: 6px 0; border-bottom: 1px solid var(--linie); }
}
.rechteliste { list-style: none; margin: 0; padding: 0; }
.rechteliste li { padding: 6px 0; border-bottom: 1px solid var(--linie); }
.rechteliste li:last-child { border-bottom: 0; }
.rechteliste .ja { color: var(--ok-text); }
.rechteliste .nein { color: var(--text-leise); }

/* Firma: Formular links, Vorschau rechts (am Handy untereinander) */
.firma-seite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; align-items: start; }
@media (min-width: 1100px) {
    .firma-seite { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
    .firma-seite__vorschau { position: sticky; top: 12px; }
}
.standort { margin-bottom: 12px; }
.standort > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.standort__formular { margin-top: 12px; }
.standort__neu { margin: 24px 0 8px; font-size: 1.05rem; }

/* Briefkopf-Vorschau: ein verkleinertes Blatt */
.briefvorschau {
    background: #fff; color: #111; border: 1px solid var(--linie-stark); border-radius: 4px; padding: 14px 14px 10px;
    font-size: 0.8rem; line-height: 1.35; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); overflow-wrap: anywhere;
}
.briefvorschau [hidden] { display: none; }
.briefvorschau__kopf {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 6px; margin-bottom: 10px;
    border-bottom: 2px solid #111;
}
.briefvorschau__firma { font-size: 1.3em; font-weight: 700; }
.briefvorschau__daten { text-align: right; font-size: 0.9em; }
.briefvorschau__fehlt { margin: 0 0 8px; padding: 4px 6px; background: var(--warn-hell); color: var(--warn-text); border-radius: 4px; font-size: 0.85em; }
.briefvorschau__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.briefvorschau__adresse { flex: 1 1 10rem; }
.briefvorschau__absenderzeile { font-size: 0.7em; color: #444; text-decoration: underline; margin-bottom: 4px; min-height: 1em; }
.briefvorschau__info { margin: 0; display: grid; grid-template-columns: auto auto; gap: 1px 10px; align-content: start; font-size: 0.9em; }
.briefvorschau__info dt { color: #444; }
.briefvorschau__info dd { margin: 0; font-weight: 600; text-align: right; }
.briefvorschau__inhalt { margin: 4px 0 10px; }
.briefvorschau__balken { height: 7px; margin-bottom: 5px; background: #e5e8ec; border-radius: 3px; }
.briefvorschau__balken--kurz { width: 60%; }
.briefvorschau__zahlung { margin: 0 0 10px; }
.briefvorschau__fuss { border-top: 1px solid #999; padding-top: 6px; font-size: 0.85em; color: #333; }
.briefvorschau__fusstext { white-space: pre-line; margin-bottom: 4px; }
.briefvorschau__bank span { margin-right: 10px; white-space: nowrap; }
.briefvorschau__hinweis { margin: 10px 0 0; }

/* Legende (Shop-Import, Export) */
.legende { margin: 0; padding: 12px 16px; display: grid; grid-template-columns: 1fr; gap: 2px 16px; }
.legende dt { font-weight: 700; margin-top: 8px; }
.legende dd { margin: 0; color: var(--text-leise); font-size: 0.9rem; }
.legende__titel { margin: 12px 0 0; font-size: 1rem; }
@media (min-width: 800px) {
    .legende { grid-template-columns: 15rem 1fr; }
    .legende dt, .legende dd { margin-top: 0; padding: 6px 0; border-bottom: 1px solid var(--linie); }
}

/* Export für die Buchhaltung */
.export-status__zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
.export-status__zeile .export-status__eintrag { margin-bottom: 0; }
.export-merkhilfe { margin: 8px 0 12px; padding-left: 1.25em; }
.export-spalten > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--akzent); font-weight: 600; }

/* Anmeldeseite: Untertitel und Handy-Hilfe */
.anmeldung__untertitel { margin: -4px 0 16px; text-align: center; }
.login-handy { margin-top: 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.login-handy > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; padding: 0 16px; font-weight: 600; color: var(--akzent); }
.login-handy__inhalt { padding: 0 16px 12px; }
.login-handy__inhalt ol { margin: 0 0 8px; padding-left: 1.25em; }
.login-handy__inhalt li { margin-bottom: 6px; }

/* Überarbeitung 15.10.2026: Einleitung kurz, „Was tun Sie hier?“ eingeklappt */
.verw-tun > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--akzent-dunkel); }
.verw-tun[open] > summary { margin-bottom: 2px; }
.verw-tun p { margin: 0 0 6px; }
.rollenbeschreibung { margin: -4px 0 14px; padding: 8px 12px; border-left: 4px solid var(--akzent); background: var(--akzent-hell); border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.95rem; }
.rollenbeschreibung:empty { display: none; }
.hilfe-kurz .rollenbeschreibung { display: block; } /* Fehlermeldung-nah, keine Einleitung: bleibt im Kurzmodus */
.verw-mehr > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--akzent-dunkel); }

/* Export: Zusatztext eingeklappt hinter „Mehr“ (Überarbeitung 15.10.2026) */
.export-mehr { margin: 4px 0 12px; }
.export-mehr > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--akzent-dunkel); }