/*
 * Gemeinsames Dark-Mode-Stylesheet fuer die ganze PFM-Seite.
 * Folgt automatisch der Systemeinstellung des Geraets (prefers-color-scheme) -
 * kein manueller Umschalter, kein JavaScript noetig. Wechselt der Nutzer das
 * Systemschema, aktualisiert sich die Seite live, auch waehrend sie offen ist.
 *
 * Prinzip: dicke schwarze Rahmen/Schatten bleiben schwarz (Bauhaus-Signatur),
 * nur Flaechen (Hintergrund) und Fliesstext wechseln auf dunkel/hell.
 */

@media (prefers-color-scheme: dark) {

    /* ---------- Grundflaechen ---------- */
    body {
        background-color: #14151a !important;
        color: #eaeaea !important;
    }

    h1, h2, h3, h4, label, p,
    .score-board,
    .dashboard-title,
    .page-title,
    .snippet-title,
    .environment-badge {
        color: #eaeaea;
    }

    .main-header {
        background-color: #1c1d22 !important;
    }

    .logo-box {
        background-color: #eaeaea !important;
    }

    .logo-text,
    .site-logo,
    .main-nav a {
        color: #eaeaea !important;
    }

    .site-footer {
        background-color: #1a1b20 !important;
        border-top-color: #33343a !important;
    }

    .footer-credits { color: #a9acb3 !important; }
    .footer-nav a { color: #c7c9cf !important; }

    /* ---------- Karten / weisse Flaechen ---------- */
    .login-container,
    .grid-card,
    .snippet-card,
    .snippet-form-panel,
    .search-filter-bar,
    .panel-section,
    .hyrox-summary-card,
    .card,
    .page-item,
    .result-view,
    .studio-table,
    .hyrox-grid-table,
    .success-container,
    .verify-container,
    .unsubscribe-container {
        background-color: #1e1f24 !important;
        color: #eaeaea !important;
    }

    .studio-table td,
    .hyrox-grid-table td,
    .studio-table tr:nth-child(even) td,
    .hyrox-grid-table tr:nth-child(even) {
        background-color: #23242a !important;
        color: #eaeaea !important;
    }

    .discipline-num {
        background-color: #2b2c33 !important;
        color: #eaeaea !important;
    }

    .result-meta,
    .card-card p,
    .page-title {
        color: #a9acb3 !important;
    }

    .card-icon {
        color: #eaeaea !important;
    }

    /* ---------- Formularelemente ---------- */
    input[type="text"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        background-color: #24252b !important;
        color: #eaeaea !important;
        border-color: #eaeaea !important;
    }

    input::placeholder,
    textarea::placeholder {
        color: #7d8087 !important;
    }

    input:focus,
    textarea:focus,
    select:focus {
        background-color: #2b2c33 !important;
    }

    /* ---------- Weisse Buttons (kein eigener Akzent) ---------- */
    .btn-index,
    .btn-pfm,
    .btn-card,
    .btn-cancel,
    .btn-action {
        background-color: #1e1f24 !important;
        color: #eaeaea !important;
    }

    .btn-card:hover {
        background-color: #eaeaea !important;
        color: #14151a !important;
    }

    /* Reine Text-Links ohne eigenen Hintergrund */
    .action-copy,
    .action-open,
    .action-edit {
        color: #6fb3ff !important;
    }

    /* ---------- Bookmark-Hub (per JS mit inline-style erzeugt) ---------- */
    #bookmark-container a {
        background-color: #1e1f24 !important;
        color: #eaeaea !important;
        border-color: #eaeaea !important;
    }

    #bookmark-container input,
    #bookmark-container select {
        background-color: #24252b !important;
        color: #eaeaea !important;
    }

    #bookmark-container > div[style] {
        background-color: transparent !important;
    }

    /* ---------- Snippet-Code-Block bleibt dunkel (schon dunkel gestaltet) ---------- */
    .snippet-body pre {
        background-color: #111318 !important;
    }

    /* ---------- Alerts / Nachrichten ---------- */
    .msg-box {
        background-color: #1e1f24 !important;
    }

    .alert {
        color: #14151a !important;
    }

    /* ---------- Aktenverzeichnis-Liste ---------- */
    .akten-row,
    .modal-box {
        background-color: #1e1f24 !important;
        color: #eaeaea !important;
    }

    .akten-nummer {
        background-color: #2b2c33 !important;
        color: #eaeaea !important;
    }

    .akten-infos {
        color: #cfd1d6 !important;
    }

    .akten-count {
        color: #a9acb3 !important;
    }

    .akten-row-detail {
        border-top-color: #33343a !important;
    }

    .az-index a {
        border-color: #eaeaea !important;
        color: #eaeaea !important;
    }

    .az-index a:hover {
        background-color: #eaeaea !important;
        color: #14151a !important;
    }

    .empty-state {
        border-color: #33343a !important;
        color: #7d8087 !important;
    }

    .btn-cancel-modal {
        background-color: #1e1f24 !important;
        color: #eaeaea !important;
    }

    input[readonly] {
        background-color: #2b2c33 !important;
    }

    /* ---------- Stammbaum-Verwaltung & Statistik ---------- */
    .user-row,
    .summary-card {
        background-color: #1e1f24 !important;
        color: #eaeaea !important;
    }

    .user-username {
        background-color: #2b2c33 !important;
        color: #eaeaea !important;
    }

    .user-meta,
    .summary-label,
    .rank-count {
        color: #a9acb3 !important;
    }

    .rank-bar-track {
        background-color: #2b2c33 !important;
    }

    .activity-table td {
        background-color: #1e1f24 !important;
        color: #eaeaea !important;
    }

    .activity-table tr:nth-child(even) td {
        background-color: #23242a !important;
    }
}