/* ── EXPERIMENT: rotes UI-Theme (opt-in) ─────────────────────────────────────
   Nur aktiv, wenn .app-shell oder .login-shell die Klasse .theme-red trägt.
   Wird in default.php, login.php und Map/index.php geladen — bewusst getrennt
   von app.css/map.css, damit die Map-Seite nicht das komplette app.css ziehen
   muss (deren .app-shell-Regel mit der 3-Spalten-Variante in map.css kollidiert).
   CSS-Custom-Properties werden vom nächsten Vorfahren aufgelöst → das färbt
   alle Nachfahren (auch Komponenten, die in map.css definiert sind). Die höhere
   Spezifität (.app-shell.theme-red) schlägt die :root-Defaults. */
.app-shell.theme-red,
.login-shell.theme-red,
/* body-Scope für Dialoge, die im DOM OUTSIDE der .app-shell liegen
   (z.B. #newObjectDialog, #imgPickerDialog in Map/index.php) — sonst
   sehen sie die Theme-Vars nicht und bleiben grün. */
body.theme-red {
    /* Tiefes, sattes Rot (Bordeaux-Richtung) — dunkler statt grell, wirkt
       gedeckt/premium und ermüdet die Augen weniger als ein helles Signalrot. */
    --green:      #a83a36;
    --green-soft: rgba(168, 58, 54, 0.10);
    --green-mid:  rgba(168, 58, 54, 0.22);
    /* Beige → reduziertes Weiß (nicht reinweiß): Canvas leicht grau, Flächen
       nahe-weiß, Ränder neutral statt warm-beige. */
    --bg:           #f3f3f5;
    --panel:        #fcfcfc;
    --panel-2:      #f5f5f7;
    --border:       rgba(0, 0, 0, 0.10);
    --border-strong:rgba(0, 0, 0, 0.18);
    /* Mehr Text-Kontrast: Primärtext dunkler + neutral, Sekundärtext kräftiger
       (0.45 → 0.62), Faint hoch. Schriftgröße bleibt (noch) unverändert. */
    --ink:          #1c1e22;
    --ink-muted:    rgba(28, 30, 34, 0.62);
    --ink-faint:    rgba(28, 30, 34, 0.32);
    /* Rail 20% breiter (50→60px), Icons bleiben 40px (nur mehr Luft drumrum).
       Gesamt-Sidebar +10px, damit der Kategorie-Panel gleich breit bleibt. */
    --nav-rail:     60px;
    --sidebar-left: 322px;
    /* Body-BG (am :root) liegt unter der Shell → Shell-Fläche selbst füllen. */
    background: var(--bg);
}
/* Rote Nav-Rail mit hellen Icons (nur im Theme). Die große Fläche etwas tiefer
   als der Akzent → ruhiger, weniger Augenweh. */
.app-shell.theme-red .nav-rail {
    background: #8f2f2c;
    border-radius: var(--radius) 0 0 var(--radius);
}
.app-shell.theme-red .nav-item {
    color: rgba(255, 255, 255, 0.82);
}
.app-shell.theme-red .nav-item:hover,
.app-shell.theme-red .nav-item.is-active {
    background: rgba(255, 255, 255, 0.20);
    color: #fff;
    border-color: transparent;
}
.app-shell.theme-red .nav-item-divider {
    background: rgba(255, 255, 255, 0.30);
}
/* Form-Fields auf allen Theme-Red-Seiten (PDFs, Settings, Account, Setup,
   Printmaps, Map): weißer Hintergrund. background-color statt background,
   damit das Chevron-SVG der .form-select erhalten bleibt. */
.app-shell.theme-red .form-input,
.app-shell.theme-red .form-select,
.app-shell.theme-red .form-textarea,
.app-shell.theme-red .cat-manage-input,
.app-shell.theme-red .print-input,
/* Höher-spezifische Pendants für Inputs in Drawer/Dialog-Containern, deren
   Base-Rules das Tag-Selector mitführen (zusätzlicher c-Punkt würde sonst
   gegen die einfachere Form-Klassen-Variante gewinnen). */
.app-shell.theme-red .detail-body .form-group input:not(.form-color-input),
.app-shell.theme-red .detail-body .form-group select,
.app-shell.theme-red .detail-body .form-group textarea {
    background-color: #fff;
}
/* Login-Promo: dunkelrote Fläche im Nav-Rail-Rot (gleicher Wert wie die
   eingeloggte Rail), helle Schrift darauf. Die Feature-Cards heben sich als
   weiße Karten ab. */
.login-shell.theme-red .login-promo {
    background: #8f2f2c;
    color: #f4eceb;
}
.login-shell.theme-red .login-promo::before {
    background: none;
}
.login-shell.theme-red .promo-badge {
    color: rgba(244, 236, 235, 0.7);
}
.login-shell.theme-red .promo-badge::before {
    background: #f4eceb;
    box-shadow: 0 0 8px rgba(244, 236, 235, 0.4);
}
.login-shell.theme-red .promo-title {
    color: #f4eceb;
}
.login-shell.theme-red .promo-subtitle {
    color: rgba(244, 236, 235, 0.78);
}
/* Feature-Cards: weiße Karten auf dem roten Grund, dezenter Rand,
   Hover minimal getönt. */
.login-shell.theme-red .promo-feature {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.06);
}
.login-shell.theme-red .promo-feature:hover {
    background: #f4f1ea;
}
/* Feature-Icons: einheitliches Bordeaux-Bubble statt der bunten
   blau/grün/lila/gelb-Akzente — passt zum weißen Karten-Look. */
.login-shell.theme-red .promo-feature-icon.map,
.login-shell.theme-red .promo-feature-icon.edit,
.login-shell.theme-red .promo-feature-icon.widget,
.login-shell.theme-red .promo-feature-icon.globe {
    background: rgba(168, 58, 54, 0.14);
    color: var(--green);
}
/* Text in den weißen Karten dunkel halten. */
.login-shell.theme-red .promo-feature-text h3 {
    color: var(--ink);
}
.login-shell.theme-red .promo-feature-text p {
    color: var(--ink-muted);
}
.login-shell.theme-red .promo-signup {
    color: rgba(244, 236, 235, 0.78);
}
.login-shell.theme-red .promo-signup a {
    color: #ffffff;
}
.login-shell.theme-red .promo-signup a:hover {
    color: rgba(255, 255, 255, 0.8);
}
/* Primary-Buttons: dunkel statt Bordeaux. Damit bleibt Rot eindeutig für
   destructive Aktionen (.btn.danger, --red signal red) reserviert — Bordeaux
   bleibt die Brand-Farbe in Nav-Rail, Akzenten, Fokus-Ringen, Hover-Washes. */
.app-shell.theme-red .btn.primary,
.app-shell.theme-red .pool-btn.primary {
    background: #1c1e22;
    border-color: #1c1e22;
}
.app-shell.theme-red .btn.primary:hover,
.app-shell.theme-red .pool-btn.primary:hover {
    background: #2c2f34;
    border-color: #2c2f34;
}
.login-shell.theme-red .login-btn {
    background: #1c1e22;
}
.login-shell.theme-red .login-btn:hover:not(:disabled) {
    background: #2c2f34;
}
/* Disabled Primary-Variante: ohne extra opacity, sonst stapelt sich das
   bereits gemutete ink mit 0.35–0.6 und das Label wird unsichtbar. */
.app-shell.theme-red .btn.primary:disabled,
.app-shell.theme-red .pool-btn.primary:disabled {
    background: var(--border);
    border-color: var(--border-strong);
    color: var(--ink-muted);
    opacity: 1;
}
/* Form-Fields im Theme-Scope: weißer Hintergrund. */
.login-shell.theme-red .login-card .form-group input:not(.form-color-input),
.login-shell.theme-red .login-card .form-group select {
    background: #fff;
}
.login-shell.theme-red .login-card .form-group input:focus {
    box-shadow: 0 0 0 3px rgba(168, 58, 54, 0.14);
}
/* Erfolgs-Flash bleibt echtes Grün — auch im Bordeaux-Theme. Das globale
   Remapping von --green auf Bordeaux würde Erfolg (z. B. nach Tarifwechsel)
   und Fehler (rot, --red unverändert) ununterscheidbar machen; eine
   Erfolgsmeldung muss aber eindeutig grün signalisieren. */
.app-shell.theme-red .message.success {
    background: rgba(58, 125, 68, 0.10);
    border-color: rgba(58, 125, 68, 0.22);
    color: #3a7d44;
}

.job-status.is-completed {
    background: rgba(58, 125, 68, 0.10);
    border-color: rgba(58, 125, 68, 0.22);
    color: #3a7d44;
}