/*
 * Zentrales Design-System für checklisten.
 * Fluent/WinUI-Konventionen: Button-Reihenfolge (primär links, Abbrechen
 * außen rechts), Default-Button-Hervorhebung, Modal/Toast-Komponenten,
 * einheitliches Spacing-Raster. Wird von auth/view.php, cl_manage.html,
 * cl_edit.html und cl_run.html eingebunden.
 */

:root {
    /* Spacing-Raster (4px-Basis) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    --radius-sm: 6px;
    --radius-md: 9px;
    --radius-lg: 12px;
    --radius-xl: 14px;

    --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.18);
    --shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.35);

    /* Farbtokens (Namen aus den bestehenden Apps übernommen) */
    --color-primary: #667eea;
    --color-danger: #f44336;
    --color-success: #4CAF50;
    --border-color: #ddd;

    --btn-primary: #009EE0;
    --btn-secondary: #FFFFFF;
    --btn-success: #4CAF50;
    --btn-danger: #d32f2f;
    --btn-info: #2196F3;
    --btn-disabled: #cccccc;
    --btn-primary-hover: #0088c7;
    --btn-success-hover: #45a049;
    --btn-danger-hover: #a91f1f;
    --btn-info-hover: #0b7dda;

    --text-body: #1c2430;
    --text-muted: #526173;
}

/* ===== Buttons ===== */
.btn {
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.05s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    line-height: 1;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--btn-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--btn-primary-hover);
    box-shadow: 0 5px 15px rgba(0, 158, 224, 0.3);
}

.btn-secondary {
    background: var(--btn-secondary);
    color: #333;
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.btn-danger {
    background: var(--btn-danger);
    color: white;
}

.btn-danger:hover {
    background: var(--btn-danger-hover);
}

.btn-success {
    background: var(--btn-success);
    color: white;
}

.btn-success:hover {
    background: var(--btn-success-hover);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.btn-small {
    padding: var(--space-1) var(--space-2);
    font-size: 0.8em;
}

/*
 * Default-Button-Hervorhebung: der Button, den Enter auslösen würde.
 * Fester, gut sichtbarer Ring (nicht currentColor) - Primary/Danger haben
 * weiße Schrift, ein currentColor-Ring wäre dort unsichtbar.
 */
.btn-default {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #0088c7;
}

.btn:focus-visible {
    outline: 2px solid #0088c7;
    outline-offset: 2px;
}

/* ===== Modal ===== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    padding: var(--space-4) var(--space-5);
    font-size: 1.15em;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.modal-body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/*
 * Footer-Reihenfolge ist im Markup fest: primäre/bestätigende Aktion zuerst
 * (links), Abbrechen zuletzt (außen rechts) - siehe Regel 1. Beide Buttons
 * bilden dafür eine rechtsbündige, kompakte Gruppe (justify-content:flex-end
 * + reine DOM-Reihenfolge) - bewusst KEIN margin-left:auto-Trick auf dem
 * letzten Button: das würde mit den lokalen ".modal-footer{justify-
 * content:flex-end}"-Regeln in cl_manage.html/cl_edit.html kollidieren und
 * die Buttons auseinanderreißen (primäre Aktion ganz links, Abbrechen ganz
 * rechts am Fensterrand statt als Gruppe).
 */
.modal-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* ===== Toast / Flyout (Regel 4: nicht-kritische Rückmeldungen) ===== */
.toast-container {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 360px;
}

.toast {
    background: #1c2430;
    color: white;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.92em;
    animation: toast-in 0.2s ease;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.toast-success { background: #1f6b3a; }
.toast-error { background: #8a1f1f; }
.toast-info { background: #1c4fa2; }

.toast-message {
    flex: 1;
}

.toast-action {
    background: transparent;
    border: none;
    color: white;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    flex-shrink: 0;
}

.toast-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0;
    font-size: 1.1em;
    line-height: 1;
    flex-shrink: 0;
}

/* Feld-Hervorhebung für Validierungsfehler (Regel 5: nah am Inhalt) */
.field-invalid {
    outline: 2px solid var(--btn-danger) !important;
    outline-offset: 2px;
}

/*
 * Formular-Grundstile (aus auth/view.php zentralisiert). Bewusst nur auf
 * .ds-form (Auth-Seiten) und .modal-body (Dialoge) angewendet, NICHT global
 * - die bestehenden Fragen-/Options-Formulare in cl_edit.html/cl_run.html
 * haben eigenes, spezialisiertes Layout, das hier nicht angefasst wird.
 */
.ds-form .form-group,
.modal-body .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ds-form label,
.modal-body label {
    display: grid;
    gap: var(--space-1);
    font-weight: 600;
    color: var(--text-body);
}

.ds-form input[type="text"],
.ds-form input[type="password"],
.ds-form input[type="email"],
.modal-body input[type="text"],
.modal-body input[type="password"],
.modal-body input[type="email"] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-md);
    font-size: 1rem;
}

.ds-form {
    display: grid;
    gap: var(--space-3);
}

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