/* ===== dieStaemmeDb – Theme ============================================= */
/* Design Tokens (Light) */
:root{
    --ds-primary:#5865F2;
    --ds-accent:#00B894;
    --ds-warning:#f39c12;
    --ds-danger:#e74c3c;
    --ds-muted:#6c757d;

    --surface-0:#ffffff;
    --surface-1:#f8f9fa;
    --text-0:#212529;
    --border-0:rgba(0,0,0,.08);

    --radius-card:1rem;
    --radius-sm:.65rem;
    --shadow-1:0 8px 26px rgba(0,0,0,.05);
}

/* Dark Mode */
:root[data-bs-theme="dark"]{
    --surface-0:#0f1115;
    --surface-1:#151922;
    --text-0:#e9ecef;
    --border-0:rgba(255,255,255,.08);
    --shadow-1:0 10px 28px rgba(0,0,0,.35);
}

/* ===== Primitives / Utilities ========================================== */
body{
    color:var(--text-0);
    background:var(--surface-1);
}

.navbar{
    border-bottom:1px solid var(--border-0);
}

.ds-card{
    border-radius:var(--radius-card) !important;
    background:var(--surface-0);
    border:1px solid var(--border-0);
    box-shadow:var(--shadow-1);
}

/* Card-Header konsistent */
.ds-card .card-header{
    background: rgba(0,0,0,.04);
    border-bottom: 1px solid rgba(255,255,255,.06);
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
    padding:.6rem .9rem;
}
:root[data-bs-theme="light"] .ds-card .card-header{
    background: rgba(0,0,0,.02);
    border-bottom-color: rgba(0,0,0,.06);
}

/* Icon-Abstand in Titeln */
.card .card-title i,
.ds-card .card-header i{ opacity:.9; margin-right:.35rem; }

/* Hero-Hintergrund – subtiler, ruhiger */
.ds-hero{
    border-radius:var(--radius-card);
    border:1px solid rgba(0,0,0,.05);
    background:
            radial-gradient(1200px 400px at 10% -10%, rgba(88,101,242,0.12) 0, transparent 60%),
            radial-gradient(900px 300px at 90% 0,  rgba(0,184,148,0.10) 0, transparent 60%);
}

/* Stat-Zeilen */
.ds-stat{
    display:flex; align-items:center; justify-content:space-between;
    padding:.45rem .6rem;
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,.03);
    margin:.35rem 0;
}
:root[data-bs-theme="dark"] .ds-stat{
    background: rgba(255,255,255,.03);
}
.ds-stat .label{
    color: var(--ds-muted);
    font-weight:600;
    letter-spacing:.01em;
}

/* Soft-Badges (z. B. Welt) */
.ds-badge-soft{
    display:inline-block; padding:.25rem .75rem; border-radius:999px;
    background: rgba(88,101,242,.1); color:#3f4ae0; border:1px solid rgba(88,101,242,.15);
}
:root[data-bs-theme="dark"] .ds-badge-soft{
    color:#97a0ff; background: rgba(88,101,242,.12); border-color: rgba(88,101,242,.22);
}

/* Live-Badge (Dashboard) */
.ds-badge-live{
    display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .75rem; border-radius:999px;
    background: rgba(0,184,148,.12); color:#0aa57a; border:1px solid rgba(0,184,148,.18);
}
.ds-dot{
    width:.55rem; height:.55rem; border-radius:50%; background:#0aa57a; display:inline-block;
    box-shadow:0 0 0 .2rem rgba(10,165,122,.15);
}

/* Status-Badges für Insert */
.badge.ds-badge{ border:1px solid transparent; border-radius:.5rem; padding:.25rem .5rem; }
.ds-badge.ready  { background: rgba(108,117,125,.15); color:#adb5bd; border-color: rgba(108,117,125,.25); }
.ds-badge.saving { background: rgba(88,101,242,.12); color:#7c86f5; border-color: rgba(88,101,242,.20); }
.ds-badge.ok     { background: rgba(0,184,148,.12);  color:#0aa57a; border-color: rgba(0,184,148,.20); }
.ds-badge.error  { background: rgba(231,76,60,.12);  color:#e74c3c; border-color: rgba(231,76,60,.20); }

/* Quick Links / Ghost-Buttons */
.quick-links .btn{ border-radius:.9rem; }
.ds-btn-ghost{
    background:rgba(0,0,0,.04);
    border:1px solid rgba(0,0,0,.06);
    border-radius:.9rem;
}
:root[data-bs-theme="dark"] .ds-btn-ghost{
    background:rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
}

/* Textareas (Rohdaten angenehmer) */
.form-control.ds-input{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:.95rem;
    background: rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.10);
    color: inherit;
}
:root[data-bs-theme="light"] .form-control.ds-input{
    background:#fff; border-color: rgba(0,0,0,.12);
}
.form-control.ds-input:focus{
    border-color: rgba(88,101,242,.55);
    box-shadow: 0 0 0 .2rem rgba(88,101,242,.25);
}

/* Link-Hinweis, Bilder, Chat */
.link-external::after{ content:"↗"; margin-left:.25rem; font-size:.85em; opacity:.7; }

#chat-messages{
    background:
            linear-gradient(180deg, rgba(88,101,242,.06), transparent 140px),
            linear-gradient(0deg, rgba(0,0,0,.04), rgba(0,0,0,.04)) top / 100% 1px no-repeat;
    border-radius:.75rem;
}
:root[data-bs-theme="dark"] #chat-messages{
    background:
            linear-gradient(180deg, rgba(88,101,242,.12), transparent 140px),
            linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,.06)) top / 100% 1px no-repeat;
}
.chat-line{ margin-bottom:.45rem; line-height:1.35; }
.chat-name{ font-weight:700; }
.chat-time{ color:var(--ds-muted); }

.ds-img{
    border-radius:.75rem; border:1px solid rgba(0,0,0,.06);
    box-shadow:var(--shadow-1);
}

/* Fokus klar sichtbar (A11y) */
:where(a,button,.btn,.form-control,.dropdown-item):focus{
    outline:2px solid rgba(88,101,242,.55) !important;
    outline-offset:2px;
    box-shadow:none !important;
}