/* Ergaenzungen zum gemeinsamen GIMA-Stylesheet.
   Absichtlich klein: style.css ist in allen GIMA-Anwendungen dieselbe Datei
   (Vorlage: GIMA_CPMS), damit sie gleich aussehen. Hier steht nur, was es dort
   nicht gibt -- nichts, was das gemeinsame Aussehen veraendert. */

/* ── Formulare ─────────────────────────────────────────────────────────────
   Das gemeinsame Stylesheet gestaltet Eingabefelder nur INNERHALB von
   .form-group. Diese Anwendung setzt das Feld traditionell in ein <label>
   (auch im oeffentlichen Eingabeformular der Filialen). Bis die Formulare
   umgebaut sind, gelten die Regeln hier -- Werte aus dem gemeinsamen Satz. */
.card label {
    display: block;
    margin-bottom: 1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text);
}
.card label input[type=text],
.card label input[type=email],
.card label input[type=password],
.card label input[type=month],
.card label input[type=number],
.card label textarea,
.card label select {
    width: 100%;
    padding: .55rem .7rem;
    margin-top: .25rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 400;
}
.card label textarea { resize: vertical; }
.card label input:focus,
.card label select:focus,
.card label textarea:focus {
    outline: none;
    border-color: var(--gima-orange);
    box-shadow: 0 0 0 3px rgba(230,66,22,.12);
}
.inline-label { display: flex; align-items: center; gap: .5rem; }
.inline-label input { width: auto; margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }

/* ── Kleinkram, den es im gemeinsamen Satz nicht gibt ─────────────────────── */
.muted { color: var(--text-muted); }
.small { font-size: .85rem; }
.right { text-align: right; }
.mb    { margin-bottom: 1rem; }
.inline { display: inline-flex; align-items: flex-end; gap: .75rem; }
.inline label { margin-bottom: 0; }

/* Schaltflaeche, die wie ein Link aussieht (Loeschen, Erneut senden). */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--gima-orange);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.btn-link.danger { color: var(--danger); }
/* Der eine grosse Knopf im Eingabeformular der Filialen. */
.btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }

/* Schmale Karte fuer Anmeldung, Formulare und die Danke-Seite. */
.card-narrow { max-width: 560px; margin: 2rem auto; }
.card.center { text-align: center; }
.big-check { font-size: 3.5rem; color: var(--success); line-height: 1; margin-bottom: .5rem; }

/* ── Tabellen: nur, was ueber den gemeinsamen Satz hinausgeht ─────────────── */
.data-table.compact th,
.data-table.compact td { padding: .45rem .7rem; }
.col-verbrauch { background: var(--surface-2); }
.data-table thead th.col-verbrauch { background: var(--surface-2); }

/* ── Auswertung ───────────────────────────────────────────────────────────── */
.filter-form .filter-row {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}
.filter-form .filter-row label { flex: 1; min-width: 150px; }
.filter-form .filter-actions { margin-bottom: 1rem; }
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.section-head h2 { margin: 0; font-family: 'Poppins', sans-serif; font-size: 1.1rem; }
.export-buttons { display: flex; gap: .5rem; }

/* Kennzahl "vollstaendig gemeldet" -- gruen, wie im Rest des Hauses. */
.stat-card.ok .stat-value { color: var(--success); }

/* Beispielbild des Zaehlers im Eingabeformular. */
.zaehler-bild {
    display: block;
    width: 260px;
    height: 170px;
    object-fit: contain;
    margin: .25rem 0 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: .4rem;
}

/* Hinweiskasten im Eingabeformular der Filialen. */
.info-box {
    margin: .8rem 0 1.2rem;
    padding: .7rem .9rem;
    background: #fff8f2;
    border-left: 3px solid var(--gima-orange);
    border-radius: 4px;
}
[data-theme="dark"] .info-box { background: #33280f; }

/* Trenner zwischen zentraler Anmeldung und lokalem Formular. */
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; }
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-divider span { color: var(--text-muted); font-size: .8rem; white-space: nowrap; }

/* ── Entwicklermodus ──────────────────────────────────────────────────────
   Das blinkende Zeichen im gelben Band. Das Band selbst (.dev-banner-box)
   steht im gemeinsamen Stylesheet. */
.dev-banner-icon { display: inline-block; animation: blink 1.2s infinite; margin-right: .4rem; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ── Schmale Fenster ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .page-header { flex-direction: column; align-items: stretch; }
    .page-header .inline,
    .page-header form { width: 100%; }
    .form-actions,
    .export-buttons,
    .section-head,
    .bug-actions { flex-wrap: wrap; }
}
@media (max-width: 640px) {
    .grid-2 { grid-template-columns: 1fr; }
    .filter-form .filter-row { flex-direction: column; }
    .filter-form .filter-row label { min-width: 0; }
    /* Eingaben mit 16px, damit iOS beim Fokus nicht hineinzoomt. */
    .card label input,
    .card label textarea,
    .card label select { font-size: 16px; }
    .btn-lg { width: 100%; text-align: center; }
    .zaehler-bild { width: 100%; max-width: 260px; height: auto; }
}