/*
 * style.css – Grundlayout und Komponenten von CSVFlow4School
 * Copyright (C) 2026 SLZ
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * Lizenztext: siehe Datei LICENSE
 */

/* ============================================================
   CSVFlow4School – Hauptstylesheet
   Copyright (C) 2026 SLZ
   Lizenz: AGPL-3.0-or-later (siehe LICENSE)
   ============================================================

   Aufbau:
   1. Grundlagen (Variablen, Schrift, Reset)
   2. Kopfbereich
   3. Karten und Schritte
   4. Dateiauswahl (inkl. Drag-and-Drop)
   5. Buttons und Links
   6. Statusmeldungen
   7. Export
   8. Dialog
   9. Fußbereich
   10. Responsives Verhalten
   ============================================================ */

/* ------------------------------------------------------------
   1. Grundlagen
   ------------------------------------------------------------ */

:root {
    /* Schrift: System-Schrift des jeweiligen Betriebssystems */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #1f2933;

    /* Farben */
    --color-bg: #f4f6f9;
    --color-surface: #ffffff;
    --color-border: #e1e5eb;
    --color-text-muted: #6b7280;
    --color-accent: #2457a6;
    --color-accent-hover: #1d4788;
    --color-accent-soft: #eaf1fb;
    --color-success: #247a42;
    --color-success-soft: #e8f5ec;
    --color-error: #a52828;
    --color-error-soft: #fbeaea;

    /* Abstände (8-px-Raster) */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;

    /* Form */
    --radius: 10px;
    --radius-small: 6px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
}

/* Sichtbarer Fokusrahmen für Tastaturbedienung */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   2. Kopfbereich
   ------------------------------------------------------------ */

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);

    padding: var(--space-3) var(--space-4);

    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.app-header h1 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 650;
}

.tagline {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.app-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.privacy-badge {
    padding: 4px 10px;

    border-radius: 999px;
    background: var(--color-success-soft);
    color: var(--color-success);

    font-size: 0.85rem;
    font-weight: 500;
}

.version {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* ------------------------------------------------------------
   3. Karten und Schritte
   ------------------------------------------------------------ */

.container {
    width: min(960px, calc(100% - 32px));
    margin: var(--space-4) auto;
}

.card {
    margin-bottom: var(--space-3);
    padding: var(--space-3);

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card-header {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    margin-bottom: var(--space-3);
}

.card-header h2 {
    margin: 0 0 4px 0;
    font-size: 1.2rem;
}

.card-header p {
    margin: 0;
}

/* Nummerierter Kreis für Schritt 1, 2, 3 */
.step-number {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);

    font-weight: 600;
}

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

/* ------------------------------------------------------------
   4. Dateiauswahl
   ------------------------------------------------------------ */

.file-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Hauptzeile: Titel und Status links, Aktionen rechts */
.file-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-2);
    align-items: center;

    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    transition: background-color 0.15s, outline-color 0.15s;
}

.file-item:last-child {
    border-bottom: none;
}

/* Drag-and-Drop: Zeile hervorheben, solange eine Datei darüber liegt */
.file-item.drag-over {
    background: var(--color-accent-soft);
    outline: 2px dashed var(--color-accent);
    outline-offset: -2px;
}

.file-main h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.status {
    margin: 2px 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Ausgewählte Datei: Status hervorheben */
.file-item.has-file .status {
    color: var(--color-success);
    font-weight: 500;
}

/* Fehlermeldung im Zeilenstatus (z. B. falscher Dateityp).
   Steht nach .has-file, damit die Fehlerfarbe Vorrang hat. */
.status.error,
.file-item.has-file .status.error {
    color: var(--color-error);
    font-weight: 500;
}

.file-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Entfernen-Link erscheint nur, wenn eine Datei gewählt ist */
.clear-file-button {
    display: none;
}

.file-item.has-file .clear-file-button {
    display: inline-flex;
}

/* Datei-Auswahl sieht aus wie ein Button, ist aber ein Label */
.file-button {
    position: relative;
    display: inline-block;
    padding: 8px 14px;

    border: 1px solid var(--color-accent);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-accent);

    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.file-button:hover {
    background: var(--color-accent-soft);
}

/* Das echte Eingabefeld wird visuell versteckt, bleibt aber per
   Tastatur und Screenreader erreichbar (anders als display: none). */
.file-button input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Sichtbarer Fokus am Label, wenn das Eingabefeld fokussiert ist */
.file-button:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Kennzeichnung: erforderlich / optional */
.badge-required,
.badge-optional {
    margin-left: 6px;
    padding: 1px 8px;

    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    vertical-align: middle;
}

.badge-required {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.badge-optional {
    background: #f1f3f5;
    color: var(--color-text-muted);
}

/* Erweiterte Optionen, standardmäßig eingeklappt */
.advanced {
    grid-column: 1 / -1;
    font-size: 0.85rem;
}

.advanced summary {
    cursor: pointer;
    color: var(--color-text-muted);
    width: fit-content;
}

.advanced summary:hover {
    color: var(--color-accent);
}

.field {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.field select {
    padding: 6px 10px;

    border: 1px solid #cfd3d8;
    border-radius: var(--radius-small);
    background: #fff;
    font-size: 0.9rem;
}

/* ------------------------------------------------------------
   5. Buttons und Links
   ------------------------------------------------------------ */

button {
    font: inherit;
    cursor: pointer;
}

.primary-button,
.secondary-button {
    padding: 10px 18px;

    border-radius: var(--radius-small);
    font-size: 0.95rem;
    font-weight: 500;
}

.primary-button {
    border: 1px solid var(--color-accent);
    background: var(--color-accent);
    color: #fff;
}

.primary-button:hover {
    background: var(--color-accent-hover);
}

.secondary-button {
    border: 1px solid #c5cad1;
    background: var(--color-surface);
    color: #1f2933;
}

.secondary-button:hover {
    background: #f2f3f5;
}

/* Textlink-Stil, z. B. für „Vorlage anzeigen“ und „Entfernen“ */
.link-button {
    padding: 0;
    border: none;
    background: none;

    color: var(--color-accent);
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link-button:hover {
    color: var(--color-accent-hover);
}

.clear-file-button {
    color: var(--color-error);
    margin-left: var(--space-1);
}

.clear-file-button:hover {
    color: #7d1e1e;
}

/* Deaktivierte Buttons */
button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Aktionsleiste unter den Dateifeldern:
   Hauptaktion links, destruktive Nebenaktion rechts außen. */
.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* Reset als zurückhaltender Textlink-Button.
   Bewusst nicht als gefüllter Button, damit er nicht mit der
   Hauptaktion konkurriert und seltener versehentlich getroffen wird. */
.link-button {
    background: none;
    border: none;
    padding: var(--space-1) 0;
    color: var(--color-text-muted);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.link-button:hover {
    color: var(--color-error);
}

.link-button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ------------------------------------------------------------
   6. Statusmeldungen
   ------------------------------------------------------------ */

.application-status {
    padding: var(--space-2);
    margin-bottom: var(--space-2);

    border-radius: var(--radius-small);
    border: 1px solid var(--color-border);
    background: #f8fafc;
    font-size: 0.95rem;
}

.application-status.info {
    border-color: #bfd4f2;
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
}

.application-status.success {
    border-color: #b7dfc4;
    background: var(--color-success-soft);
    color: var(--color-success);
}

.application-status.error {
    border-color: #efc0c0;
    background: var(--color-error-soft);
    color: var(--color-error);
}

/* Hauptmeldung und Detailzeilen innerhalb der Statusanzeige */
.application-status .status-main {
    margin: 0;
    font-weight: 600;
}

.application-status .status-details {
    margin: var(--space-1) 0 0 0;
    padding-left: var(--space-3);
    font-weight: 400;
}

.application-status .status-details li {
    margin: 2px 0;
}

.validation-success,
.validation-error {
    padding: var(--space-2);
    border-radius: var(--radius-small);
}

.validation-success {
    background: var(--color-success-soft);
}

.validation-error {
    background: var(--color-error-soft);
    color: var(--color-error);
}

.validation-success h3 {
    margin: var(--space-2) 0 4px 0;
    font-size: 1rem;
}

.validation-success p {
    margin: 0;
    font-size: 0.9rem;
}

/* ------------------------------------------------------------
   7. Export
   ------------------------------------------------------------ */

.export-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.export-buttons button {
    min-width: 180px;
}

/* ------------------------------------------------------------
   8. Dialog (Vorlagen)
   Die ausführliche Gestaltung steht in templates.css.
   ------------------------------------------------------------ */

.template-dialog {
    width: min(640px, calc(100% - 32px));
    padding: 0;

    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.template-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.template-dialog-content {
    padding: var(--space-3);
}

.template-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    justify-content: flex-end;
}

/* ------------------------------------------------------------
   9. Fußbereich
   ------------------------------------------------------------ */

.app-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);

    padding: var(--space-3) var(--space-4);

    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.footer-project strong {
    margin-right: var(--space-1);
    color: #1f2933;
}

.footer-meta {
    display: flex;
    gap: var(--space-2);
}

.app-footer a {
    color: var(--color-accent);
}

/* ------------------------------------------------------------
   10. Responsives Verhalten
   ------------------------------------------------------------ */

@media (max-width: 720px) {

    .app-header,
    .app-footer {
        padding: var(--space-2);
    }

    .container {
        width: calc(100% - 24px);
    }

    .card {
        padding: var(--space-2);
    }

    /* Dateizeile untereinander statt nebeneinander */
    .file-item {
        grid-template-columns: 1fr;
    }

    .file-actions {
        flex-wrap: wrap;
    }

    /* Auf schmalen Bildschirmen: Hauptbutton vollbreit oben,
       Reset-Link darunter zentriert. */
    .actions {
        flex-direction: column;
        align-items: stretch;
    }

    .actions .primary {
        width: 100%;
    }

    .actions .link-button {
        text-align: center;
    }

    .export-buttons button {
        flex: 1 1 100%;
    }

    .template-dialog-actions button {
        flex: 1 1 100%;
    }
}