/* =====================================================================
   Feuerwehr Einsatzberichte - Design-Tokens
   Leitidee: "Einsatzakte" statt SaaS-Dashboard - schmale farbige
   Seitenlinien statt Schatten/Karten, scharfe Kanten, eine dunkle
   "Leitstellen"-Kopfzeile. Leuchtgelb ist ausschliesslich Aktiv-/
   Fokus-Farbe, nie Dekoration.
   ===================================================================== */

:root {
    --ink: #171a1d;
    --muted: #5e6670;
    --paper: #eff1ef;
    --surface: #ffffff;
    --hairline: #dcdfd9;

    --rot: #b3171d;
    --rot-dark: #8a1016;
    --leuchtgelb: #c9d94a;
    --leuchtgelb-ink: #4b5417;
    --slate: #22262c;

    --error-bg: #fbeae9;
    --error-ink: #8a1016;
    --ok-ink: #1c6b3c;

    --radius: 3px;
    --font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
}

h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0 0 0.6em; }
h1 { font-size: 1.6rem; }

a { color: var(--rot); }

:focus-visible {
    outline: 2px solid var(--leuchtgelb);
    outline-offset: 2px;
}

.mono { font-family: var(--font-mono); }

/* --- App-Kopfzeile: dunkle "Leitstelle" --- */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.75rem;
    background: var(--slate);
    color: #f1f1ef;
}

.app-header__brand {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-decoration: none;
    color: inherit;
}

.app-header__title {
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.005em;
}

.app-header__org {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(241, 241, 239, 0.58);
}

.app-header__user {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.85rem;
    color: rgba(241, 241, 239, 0.85);
}

.role-badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    padding: 0.15rem 0.45rem;
    border: 1px solid rgba(241, 241, 239, 0.4);
    border-radius: 2px;
    color: rgba(241, 241, 239, 0.9);
}

.app-header__logout {
    color: var(--leuchtgelb);
    text-decoration: none;
}
.app-header__logout:hover { text-decoration: underline; }

/* --- Hauptbereich --- */
.app-main {
    max-width: 760px;
    margin: 2.5rem auto;
    padding: 0 1.5rem 3rem;
}

.app-main--wide { max-width: 1060px; }

.step-indicator {
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: -0.5rem;
    margin-bottom: 1.5rem;
}

.case-number { font-family: var(--font-mono); }
h1 .btn-link { font-size: 0.8rem; font-weight: 400; vertical-align: 0.15em; }

.case-number-edit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -0.75rem 0 1.25rem;
}
.case-number-edit input {
    font-family: var(--font-mono);
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    font-size: 0.9rem;
}

.dashboard-links { line-height: 2.1; padding-left: 1.1rem; }
.dashboard-links em { color: var(--muted); font-style: normal; font-size: 0.85rem; }

/* --- Panels: Hairline-Border statt Schatten --- */
.auth-box,
.report-summary,
.drafts-sidebar,
.editor-main,
.archive-filters,
#entity-dialog {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
}

/* --- Login / Setup --- */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    background: var(--paper);
}

.auth-box { padding: 2rem; width: 100%; max-width: 380px; }

.auth-mark {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 0.3rem;
}

.auth-box h1 { font-size: 1.3rem; margin: 0 0 1.5rem; }

form label {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0.8rem 0 0.3rem;
}

form input,
form select,
form textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
    color: var(--ink);
}

form button[type="submit"],
.auth-box button {
    margin-top: 1.5rem;
    width: 100%;
    padding: 0.65rem;
    background: var(--rot);
    color: #fff;
    border: 1px solid var(--rot);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
}
.auth-box button:hover { background: var(--rot-dark); border-color: var(--rot-dark); }

.alert {
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius);
    font-size: 0.88rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--ink);
}

.alert-error {
    background: var(--error-bg);
    color: var(--error-ink);
    border-left-color: var(--error-ink);
    border-color: var(--error-bg);
}

/* --- Tabs (admin.php) --- */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 1.5rem;
}

.tab-btn {
    padding: 0.65rem 1.1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.92rem;
    color: var(--muted);
}

.tab-btn.active {
    color: var(--ink);
    border-bottom-color: var(--rot);
    font-weight: 600;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* --- Tabellen --- */
.panel-toolbar { margin-bottom: 0.85rem; }

.panel-toolbar > button {
    padding: 0.5rem 1rem;
    background: var(--rot);
    color: #fff;
    border: 1px solid var(--rot);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}
.panel-toolbar > button:hover { background: var(--rot-dark); }

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.91rem;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 0.65rem 0.85rem;
}

.data-table th {
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--muted);
    border-bottom: 2px solid var(--rot);
}

.data-table td { border-bottom: 1px solid var(--hairline); }
.data-table tr:last-child td { border-bottom: none; }
.data-table td:first-child { font-family: var(--font-mono); font-size: 0.88rem; }

.data-table tr.is-inactive td { color: var(--muted); }
.data-table__empty { color: var(--muted); text-align: center; font-family: var(--font-sans); }
.data-table__actions { white-space: nowrap; }

.btn-link {
    background: none;
    border: none;
    color: var(--rot);
    padding: 0;
    margin-right: 0.75rem;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }
.btn-link--danger { color: var(--error-ink); }

.inline-form { display: inline; }

/* --- Dialog (Stammdaten anlegen/bearbeiten) --- */
#entity-dialog {
    padding: 1.6rem;
    width: 100%;
    max-width: 420px;
}
#entity-dialog::backdrop { background: rgba(23, 26, 29, 0.45); }
#entity-dialog h2 { font-size: 1.1rem; margin-top: 0; }

.form-field { margin-bottom: 0.9rem; }
.form-field label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.3rem; }
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: inherit;
}

.dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin: 1.1rem 0 0; padding: 0; }

.dialog-actions button {
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--hairline);
    background: #fff;
    font: inherit;
    cursor: pointer;
}

.dialog-actions button[type="submit"] {
    background: var(--rot);
    color: #fff;
    border-color: var(--rot);
}
.dialog-actions button[type="submit"]:hover { background: var(--rot-dark); }

/* --- Einsatzbericht-Formular --- */
.report-form fieldset {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--rot);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.25rem;
}

.report-form legend { font-weight: 600; padding: 0 0.45rem; font-size: 0.95rem; }

.form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.checkbox-group { margin-bottom: 1rem; }
.checkbox-group__title { font-weight: 600; font-size: 0.9rem; margin: 0 0 0.45rem; }

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 1.25rem 0.4rem 0;
    font-size: 0.9rem;
}
.checkbox-label--strong { font-weight: 600; }

.form-actions { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; }

.form-actions button {
    padding: 0.7rem 1.4rem;
    background: var(--rot);
    color: #fff;
    border: 1px solid var(--rot);
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}
.form-actions button:hover { background: var(--rot-dark); }

/* --- Review-Zusammenfassung --- */
.report-summary-collapsible { margin-bottom: 1.5rem; }
.report-summary-collapsible summary {
    cursor: pointer;
    color: var(--rot);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}
.report-summary-collapsible .report-summary { margin-top: 0.75rem; }

.report-summary { padding: 1.25rem 1.5rem; }
.report-summary dt { font-size: 0.78rem; color: var(--muted); margin-top: 1rem; }
.report-summary dt:first-child { margin-top: 0; }
.report-summary dd { margin: 0.15rem 0 0; font-size: 0.95rem; }
.report-summary__notes { white-space: pre-line; }

/* --- Editor-Layout (Review-Seite) --- */
.editor-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 800px) { .editor-layout { grid-template-columns: 1fr; } }

.drafts-sidebar { padding: 1rem; }
.drafts-sidebar > button {
    width: 100%;
    padding: 0.6rem;
    background: var(--rot);
    color: #fff;
    border: 1px solid var(--rot);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
}
.drafts-sidebar > button:hover { background: var(--rot-dark); }
.drafts-sidebar > button:disabled { opacity: 0.55; cursor: default; }

.muted { color: var(--muted); font-size: 0.8rem; }

#drafts-list { margin-top: 1rem; }

.draft-item {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--ink);
}
.draft-item strong { font-size: 0.73rem; color: var(--muted); }
.draft-item__body { font-weight: normal; color: var(--muted); }
.draft-item.active { border-color: var(--hairline); border-left: 3px solid var(--leuchtgelb); }

.headline-field { padding: 1rem 1rem 0; }
.headline-field label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.3rem; }
.headline-field input {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    font-size: 1.05rem;
    font-weight: 600;
    font-family: inherit;
}

#editor { min-height: 320px; font-size: 1rem; }

.editor-main .form-actions {
    padding: 1rem;
    border-top: 1px solid var(--hairline);
    margin-top: 0;
}

.save-info--ok { color: var(--ok-ink); font-size: 0.85rem; }
.save-info--error { color: var(--error-ink); font-size: 0.85rem; }

/* --- Export --- */
.export-section {
    padding: 0 1rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
}
.export-section span { color: var(--muted); }
.export-section[hidden] { display: none; }

/* --- Gefahrenzone (Bericht löschen) --- */
.danger-zone { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--hairline); }

.btn-danger {
    padding: 0.55rem 1rem;
    background: #fff;
    color: var(--error-ink);
    border: 1px solid var(--error-ink);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
}
.btn-danger:hover { background: var(--error-bg); }

/* --- Archiv --- */
.archive-filters {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto;
    gap: 0.75rem;
    align-items: end;
    padding: 1.1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .archive-filters { grid-template-columns: 1fr 1fr; } }

.archive-filters label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.25rem; }
.archive-filters input,
.archive-filters select {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    font-size: 0.9rem;
}

.archive-filters__actions { display: flex; align-items: center; gap: 0.75rem; }
.archive-filters__actions button {
    padding: 0.55rem 1rem;
    background: var(--rot);
    color: #fff;
    border: 1px solid var(--rot);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
}
.archive-filters__actions button:hover { background: var(--rot-dark); }

.pagination { display: flex; justify-content: space-between; margin-top: 1.25rem; }