/* US Army TMGP — 1899 Color System
 *
 * Historische Grundlage:
 *   Dark Blue  — traditionelle Wollbluse (Dienstuniform)
 *   Sky Blue   — klassische Hosenpaspelierung
 *   Brass/Gold — Knöpfe, Tressen, Insignien
 *   Artillery Red — Waffenfarbe Artillerie (Gefahren/Aktionen)
 *   Dark Brown — Lederstiefel, Kampfmütze
 */

:root {
    /* ── DARK THEME: Nachtmarsch / Kampagne ── */

    /* Hintergründe: Tiefes Marineblau wie Nachtuniform */
    --bg-base:        #080e1c;
    --bg-surface:     #0f1a30;
    --bg-surface-2:   #162040;
    --bg-surface-3:   #1d2a52;

    /* Primärakzent: Messing (Knöpfe, Schnallen, Abzeichen) */
    --accent-primary: #c9a84c;
    --accent-hover:   #e0bf6a;

    /* Blau-Akzente: Himmelblau der Hosen & Details */
    --accent-blue:    #4a7ab5;
    --accent-blue-lt: #6b9fd4;

    /* Waffenfarben */
    --accent-red:     #9b2a2a;   /* Artillerie */
    --accent-gold:    #c9a84c;   /* Kavallerie */
    --accent-green:   #2e6b3e;   /* Infanterie (Grün-Detail) */

    /* Typografie: Creme auf Nachtblau */
    --text-primary:   #e8e4d8;
    --text-secondary: #8aaacb;
    --text-muted:     #3d5878;

    /* Rahmen */
    --border:         #1c2e52;
    --border-accent:  #2a4280;

    --sidebar-w:      260px;
    --header-h:       60px;
    --radius:         6px;
    --font-mono:      'Courier Prime', 'Courier New', monospace;
}

[data-theme="light"] {
    /* ── LIGHT THEME: Ausgehuniform / Parade ──
     * Heller Himmel über dem Exerzierplatz —
     * Dunkelblaue Uniform tritt aus Creme-/Papierweiß hervor. */

    /* Hintergründe: Blasses Papierblau (wie alte Militärkarten) */
    --bg-base:        #edf2f8;
    --bg-surface:     #dce8f2;
    --bg-surface-2:   #cad8ea;
    --bg-surface-3:   #b8cde0;

    /* Primärakzent: Dunkelblau der Uniform */
    --accent-primary: #1a2e6e;
    --accent-hover:   #0f1f4e;

    /* Blau-Akzente: Mittelblau */
    --accent-blue:    #2e5b9a;
    --accent-blue-lt: #4a7ab5;

    /* Waffenfarben */
    --accent-red:     #8b1a1a;
    --accent-gold:    #7a5800;
    --accent-green:   #1e5a2e;

    /* Typografie: Sehr dunkles Navy auf hellem Grund */
    --text-primary:   #080e1c;
    --text-secondary: #1e3a6a;
    --text-muted:     #5a7aaa;

    /* Rahmen */
    --border:         #8aaacb;
    --border-accent:  #5a80b0;

}

[data-theme="modern"] {
    /* ── MODERN THEME: US Army Official — army.mil Style ──
     * Jet-Black Command Center trifft auf Army Gold.
     * Inspiriert von der modernen army.mil Website. */

    /* Hintergründe: Ops-Schwarz + Charcoal */
    --bg-base:        #0a0a0a;
    --bg-surface:     #141414;
    --bg-surface-2:   #1e1e1e;
    --bg-surface-3:   #282828;

    /* Primärakzent: US Army Gold #FFB81C */
    --accent-primary: #FFB81C;
    --accent-hover:   #ffc83e;

    /* Blau: Service-Blau (Army Service Uniform) */
    --accent-blue:    #4169E1;
    --accent-blue-lt: #6495ED;

    /* Waffen- und Statusfarben */
    --accent-red:     #E8192C;
    --accent-gold:    #FFB81C;
    --accent-green:   #4CAF50;

    /* Typografie: Weißes Signal auf schwarzem Ops-Screen */
    --text-primary:   #FFFFFF;
    --text-secondary: #BBBBBB;
    --text-muted:     #666666;

    /* Rahmen: Subtiles Charcoal + Gold-Akzent */
    --border:         #2a2a2a;
    --border-accent:  #FFB81C;

    --sidebar-w:      260px;
    --header-h:       60px;
    --radius:         3px;
    --font-mono:      'Courier Prime', 'Courier New', monospace;
}

/* ── Modern Theme: Spezifische Overrides ─────────────────── */

/* Header: Reines Schwarz mit Gold-Unterstrich (wie army.mil) */
[data-theme="modern"] .app-header {
    background: #000000;
    border-bottom: 3px solid #FFB81C;
    box-shadow: none;
}

/* Logo: Gold Star + weiß */
[data-theme="modern"] .logo span {
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: .04em;
}

/* Sidebar: Fast-Schwarz mit Gold-Aktiv-Markierung */
[data-theme="modern"] .app-sidebar {
    background: #111111;
    border-right: 1px solid #1e1e1e;
}

[data-theme="modern"] .sidebar-nav a {
    color: #AAAAAA;
    border-left: 3px solid transparent;
    border-radius: 0;
    font-weight: 400;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: .76rem;
}

[data-theme="modern"] .sidebar-nav a:hover {
    background: #1e1e1e;
    color: #FFB81C;
    border-left-color: #FFB81C;
}

[data-theme="modern"] .sidebar-nav a.active {
    background: rgba(255,184,28,.08);
    color: #FFB81C;
    border-left-color: #FFB81C;
    font-weight: 700;
}

[data-theme="modern"] .sidebar-nav .nav-section-title {
    color: #444444;
    letter-spacing: .12em;
    font-size: .65rem;
}

/* Cards: Scharfe Ecken, dünner Gold-Hover-Rand */
[data-theme="modern"] .card {
    background: #141414;
    border: 1px solid #222222;
    border-radius: 3px;
    box-shadow: none;
}

[data-theme="modern"] .card-header {
    background: #000000;
    border-bottom: 1px solid #222222;
}

[data-theme="modern"] .card-title {
    color: #FFB81C;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .08em;
}

/* Buttons: Gold mit schwarzem Text (Army-Standard) */
[data-theme="modern"] .btn-primary {
    background: #FFB81C;
    border-color: #FFB81C;
    color: #000000;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 2px;
}

[data-theme="modern"] .btn-primary:hover {
    background: #ffc83e;
    border-color: #ffc83e;
    color: #000000;
}

[data-theme="modern"] .btn-ghost {
    color: #AAAAAA;
    border-color: #333333;
    border-radius: 2px;
}

[data-theme="modern"] .btn-ghost:hover {
    background: #1e1e1e;
    border-color: #FFB81C;
    color: #FFB81C;
}

/* Inputs */
[data-theme="modern"] .form-control {
    background: #0a0a0a;
    border-color: #333333;
    color: #FFFFFF;
    border-radius: 2px;
}

[data-theme="modern"] .form-control:focus {
    border-color: #FFB81C;
    box-shadow: 0 0 0 2px rgba(255,184,28,.15);
}

/* Badges */
[data-theme="modern"] .badge-primary {
    background: rgba(255,184,28,.15);
    color: #FFB81C;
    border-color: rgba(255,184,28,.35);
}

[data-theme="modern"] .badge-success {
    background: rgba(76,175,80,.12);
    color: #4CAF50;
    border-color: rgba(76,175,80,.3);
}

[data-theme="modern"] .badge-danger {
    background: rgba(232,25,44,.12);
    color: #E8192C;
    border-color: rgba(232,25,44,.3);
}

[data-theme="modern"] .badge-inactive {
    background: rgba(100,100,100,.12);
    color: #666666;
    border-color: rgba(100,100,100,.25);
}

/* Tabellen */
[data-theme="modern"] table thead th {
    background: #000000;
    color: #FFB81C;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .1em;
    border-bottom: 2px solid #FFB81C;
}

[data-theme="modern"] table tbody tr:hover {
    background: rgba(255,184,28,.04);
}

/* Alerts */
[data-theme="modern"] .alert-success {
    background: rgba(76,175,80,.08);
    border-color: #4CAF50;
    color: #4CAF50;
}

[data-theme="modern"] .alert-danger {
    background: rgba(232,25,44,.08);
    border-color: #E8192C;
    color: #E8192C;
}

/* Footer */
[data-theme="modern"] .app-footer {
    background: #000000;
    border-top: 1px solid #1e1e1e;
    color: #444444;
}

/* Theme-Toggle Button: Gold Ring im Modern-Mode */
[data-theme="modern"] .theme-toggle {
    color: #FFB81C;
    border-color: #333333;
}

[data-theme="modern"] .theme-toggle:hover {
    background: rgba(255,184,28,.1);
    border-color: #FFB81C;
}

/* Scrollbar: Gold Thumb auf Schwarz */
[data-theme="modern"] ::-webkit-scrollbar-track { background: #0a0a0a; }
[data-theme="modern"] ::-webkit-scrollbar-thumb { background: #333333; }
[data-theme="modern"] ::-webkit-scrollbar-thumb:hover { background: #FFB81C; }

/* Headings mit Gold-Unterstrich im Modern-Mode */
[data-theme="modern"] h1 {
    color: #FFFFFF;
    font-weight: 800;
    letter-spacing: .02em;
}

/* ── Modern Theme: System-UI Fonts (sauber, ohne Serife — wie army.mil) ── */
[data-theme="modern"] body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .01em;
}
[data-theme="modern"] h1,
[data-theme="modern"] h2,
[data-theme="modern"] h3,
[data-theme="modern"] h4 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}
[data-theme="modern"] .nav-section,
[data-theme="modern"] .nav-item,
[data-theme="modern"] .card-title,
[data-theme="modern"] .btn,
[data-theme="modern"] table {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; scroll-behavior: smooth; }

body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    /* Special Elite: Schreibmaschinen-Feel (ca. 1900, Remington-Ära) */
    font-family: 'Special Elite', 'Courier New', monospace;
    line-height: 1.65;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ── Typography ── */
h1, h2, h3, h4 {
    /* IM Fell English: historischer Buchdruck-Antiqua-Stil 1890er */
    font-family: 'IM Fell English', Georgia, serif;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    line-height: 1.3;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.4rem;  border-bottom: 1px solid var(--border); padding-bottom: 0.4rem; margin-bottom: 1rem; }
h3 { font-size: 1.15rem; }

/* Monospace-Elemente: Courier Prime (sauberer Schreibmaschinen-Look) */
code, .mono, .time-display, .telegram-nr {
    font-family: 'Courier Prime', 'Courier New', monospace;
}

a { color: var(--accent-gold); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* ── Layout ── */
.app-layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--header-h) 1fr;
    min-height: 100vh;
}

/* ── Header ── */
.app-header {
    grid-column: 1 / -1;
    background: var(--bg-surface);
    border-bottom: 2px solid var(--accent-primary);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-header .logo {
    font-family: 'IM Fell English', Georgia, serif;
    font-size: 1.25rem;
    font-weight: normal;
    color: var(--accent-gold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.app-header .logo img { height: 32px; }

.header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid var(--accent-primary);
    object-fit: cover;
    background: var(--bg-surface-2);
}

/* ── Sidebar ── */
.app-sidebar {
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 1rem 0;
}

.nav-section {
    padding: 0.75rem 1rem 0.25rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    font-family: 'IM Fell English', Georgia, serif;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.25rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
}

.nav-item:hover {
    background: var(--bg-surface-2);
    color: var(--text-primary);
    text-decoration: none;
    border-left-color: var(--accent-primary);
}

.nav-item.active {
    background: var(--bg-surface-2);
    color: var(--accent-gold);
    border-left-color: var(--accent-gold);
}

.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Main Content ── */
.app-main {
    padding: 1.75rem 2rem;
    overflow-y: auto;
}

/* ── Cards ── */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}

.card-title {
    font-family: 'IM Fell English', Georgia, serif;
    font-size: 0.95rem;
    font-weight: normal;
    color: var(--accent-gold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: 'IM Fell English', Georgia, serif;
    font-size: 0.9rem;
    font-weight: normal;
    letter-spacing: 0.06em;
    transition: background 0.15s, transform 0.1s;
    text-decoration: none;
}

.btn:hover { transform: translateY(-1px); text-decoration: none; }

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

.btn-success {
    background: var(--accent-blue);
    color: #e8e4d8;
}

.btn-danger {
    background: var(--accent-red);
    color: #f0e8c8;
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border-accent);
    color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--bg-surface-2); color: var(--text-primary); }

.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.8rem; }

/* ── Forms ── */
.form-group { margin-bottom: 1rem; }
.form-hint  { font-size: .75rem; color: var(--text-muted); margin-top: .25rem; }

.form-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.form-control {
    width: 100%;
    padding: 0.55rem 0.85rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.15s;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-primary);
}

select.form-control option { background: var(--bg-surface-2); }

/* ── Alerts ── */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border-left: 4px solid;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}
.alert-danger  { border-color: var(--accent-red);   background: rgba(155,42,42,0.15); }
.alert-success { border-color: var(--accent-blue);  background: rgba(74,122,181,0.12); }
.alert-info    { border-color: var(--accent-primary); background: rgba(201,168,76,0.1); }

/* ── Tables ── */
.table-wrapper { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

th {
    text-align: left;
    padding: 0.6rem 0.85rem;
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 2px solid var(--border);
}

td {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

tr:hover td { background: var(--bg-surface-2); }

/* ── Badges ── */
.badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.badge-active   { background: var(--accent-blue);    color: #e8e4d8; }
.badge-inactive { background: var(--border);         color: var(--text-muted); }
.badge-rank     { background: var(--accent-primary); color: #f0ead0; }
.badge-warning  { background: rgba(201,168,76,.15);  color: var(--accent-gold); border: 1px solid var(--accent-gold); }

/* ── Time Tracking Widget ── */
.time-tracker {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.time-display {
    font-size: 2rem;
    font-family: 'Courier Prime', 'Courier New', monospace;
    color: var(--accent-gold);
    letter-spacing: 0.08em;
    min-width: 120px;
}

/* ── Cookie Banner ── */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border-top: 2px solid var(--accent-primary);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    z-index: 9999;
    font-size: 0.85rem;
}

.cookie-banner p { flex: 1; color: var(--text-secondary); margin: 0; }

/* ── Login Page ── */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-base);
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 40px,
            rgba(74,122,181,0.04) 40px,
            rgba(74,122,181,0.04) 41px
        );
}

.login-box {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--accent-primary);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

.login-emblem {
    text-align: center;
    margin-bottom: 1.75rem;
}

.login-emblem h1 {
    font-family: 'IM Fell English', Georgia, serif;
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-gold);
}

.login-emblem p {
    color: var(--text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 0.25rem;
}

/* ── Ornamental divider ── */
.ornament {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    margin: 0.75rem 0;
}

/* ── Footer ── */
.app-footer {
    grid-column: 2;
    padding: 1rem 2rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* ── Theme Toggle ── */
.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 1.2rem;
    padding: .3rem .7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.theme-toggle:hover { background: var(--bg-surface-2); }

/* ── Notification Badge ── */
.notif-badge {
    background: var(--accent-red);
    color: white;
    border-radius: 50%;
    width: 18px; height: 18px;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    position: absolute;
    top: -4px; right: -4px;
}

/* ── Ticker ── */
.ticker-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.ticker-item:last-child { border-bottom: none; }
.ticker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-primary); flex-shrink: 0; }
.ticker-time { color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .app-layout {
        grid-template-columns: 1fr;
        grid-template-rows: var(--header-h) auto 1fr;
    }
    .app-sidebar { display: none; }
    .app-main { padding: 1rem; }
}

/* ── Utility ── */
.text-muted  { color: var(--text-muted); }
.text-accent { color: var(--accent-gold); }
.text-danger { color: var(--accent-red); }
.text-success { color: var(--accent-green); }
.text-sm     { font-size: 0.8rem; }
.text-xs     { font-size: 0.72rem; }
.text-upper  { text-transform: uppercase; letter-spacing: 0.1em; }
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-1       { gap: 0.5rem; }
.gap-2       { gap: 1rem; }
.ml-auto     { margin-left: auto; }
.mt-1        { margin-top: 0.5rem; }
.mt-2        { margin-top: 1rem; }
.mb-1        { margin-bottom: 0.5rem; }
.mb-2        { margin-bottom: 1rem; }
.w-full      { width: 100%; }
.hidden      { display: none !important; }
.relative    { position: relative; }

/* ── Light-Theme: Button & Badge Overrides ──────────────────
   Im Light-Theme ist --accent-primary dunkles Navy (#1a2e6e).
   Standard --text-primary ist fast schwarz → Text auf Buttons unsichtbar.
   Stattdessen: weißer Text auf dunklen Schaltflächen. */

[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-primary:hover {
    color: #fff;
}

[data-theme="light"] .badge-rank {
    color: #fff;
}

/* Im Light-Theme: badge-inactive hat mittelblau Hintergrund + mittelblau Text → schwer lesbar.
   Fix: dunkler Text. */
[data-theme="light"] .badge-inactive {
    color: var(--text-primary);
}

/* Im Light-Theme: badge-warning Goldfarbe auf hellem Hintergrund anpassen */
[data-theme="light"] .badge-warning {
    background: rgba(122,88,0,.1);
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}

/* Im Light-Theme: Duty-Timer grüner Text auf hellem Hintergrund sichtbar machen */
[data-theme="light"] .duty-timer {
    background: rgba(30,90,46,.15);
    color: #1a5a2a;
}
[data-theme="light"] .duty-dot {
    background: #1a5a2a;
}

/* Im Light-Theme: Alert-Farben anpassen */
[data-theme="light"] .alert-success {
    background: rgba(30,90,46,.12);
    border-color: var(--accent-green);
    color: var(--accent-green);
}
[data-theme="light"] .alert-danger {
    background: rgba(139,26,26,.1);
    border-color: var(--accent-red);
    color: var(--accent-red);
}

/* ── Vintage 1899 Fotographie-Effekt ────────────────────── */

/* Bild-Wrapper mit Vignetteneffekt */
.vintage-wrap {
    position: relative;
    display: block;
    line-height: 0;
    overflow: hidden;
}
.vintage-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) sepia(55%) contrast(1.3) brightness(0.78);
}
/* Vignette (dunkle Ränder wie bei alten Linsen) */
.vintage-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 38%, transparent 22%, rgba(6,3,0,0.78) 100%);
    z-index: 1;
    pointer-events: none;
}
/* Kratz-/Papiereffekt via SVG-Rauschen */
.vintage-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.1;
    mix-blend-mode: overlay;
    z-index: 2;
    pointer-events: none;
    animation: vintage-grain 10s steps(8) infinite;
}
@keyframes vintage-grain {
    0%,100% { transform: translate(0,0) }
    12%      { transform: translate(-2%,-3%) }
    25%      { transform: translate(2%,2%) }
    37%      { transform: translate(-1%,3%) }
    50%      { transform: translate(3%,-2%) }
    62%      { transform: translate(-3%,1%) }
    75%      { transform: translate(1%,-1%) }
    87%      { transform: translate(-2%,2%) }
}

/* Karton-Rahmen: Carte de Visite / Cabinet Card */
.photo-mount {
    background: linear-gradient(155deg, #ede4cf 0%, #dfd0a6 60%, #cfc090 100%);
    padding: 8px 8px 34px;
    position: relative;
    box-sizing: border-box;
    box-shadow:
        inset 0 0 0 1px rgba(100,70,20,.25),
        2px 2px 0 rgba(0,0,0,.18),
        4px 4px 12px rgba(0,0,0,.45);
}
.photo-mount-caption {
    position: absolute;
    bottom: 7px;
    left: 0; right: 0;
    text-align: center;
    font-size: 7px;
    color: #6a4a1e;
    font-family: 'Palatino Linotype','Palatino','Times New Roman',serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-style: italic;
}

/* Kleines Profilbild mit Vintage-Effekt */
.vintage-avatar {
    filter: grayscale(100%) sepia(45%) contrast(1.2) brightness(0.86);
}

/* Placeholder wenn kein Bild vorhanden */
.vintage-placeholder {
    background: linear-gradient(145deg, #c8bca0, #b0a488);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #7a6040;
    font-family: 'Palatino Linotype',serif;
    font-style: italic;
}

/* Upload-Dropzone */
.upload-dropzone {
    border: 2px dashed var(--border-accent);
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: var(--bg-surface);
}
.upload-dropzone:hover,
.upload-dropzone.dragover {
    border-color: var(--accent-primary);
    background: rgba(201,168,76,.06);
}
.upload-dropzone input[type="file"] {
    display: none;
}
.upload-dropzone-label {
    font-size: .82rem;
    color: var(--text-muted);
    cursor: pointer;
}