/* ==============================================
   Bayern News — Bavaria Entertainment
   Tool-spezifische Ergänzungen über Tinte (Bavaria Design System)
   ----------------------------------------------
   Die Farben, Typografie, Pico-Tokens, Karten, Tabellen, Buttons und
   Badges kommen aus static/css/bavaria-theme.css (NACH Pico, VOR dieser
   Datei eingebunden). Hier liegen nur tool-eigene Bausteine: Brand-Chrome
   (Header/Tab-Nav/Footer), KPI-/Stat-Kacheln, tool-spezifische Status- und
   Ergebnis-Layouts. Alle Werte hängen an den --t-*-Tokens und sind damit
   automatisch Light-/Dark-Mode-fest.
   ============================================== */

/* --- Legacy-Alias-Schicht: --be-* zeigen auf die Tinte-Tokens (--t-*) ---
   Bestehende Klassen/Templates referenzieren noch --be-*; statt sie alle
   anzufassen, mappen wir sie auf die Tinte-Tokens. So erbt jede Regel den
   Dark-Mode automatisch (die --t-* werden in bavaria-theme.css je Theme
   umdefiniert). Schrittweise durch direkte --t-*-Referenzen ersetzbar. */
:root {
    --be-teal:           var(--t-teal);
    --be-teal-hover:     var(--t-teal-light);
    --be-teal-focus:     var(--t-teal-hi-tint);
    --be-header-bg:      var(--t-card);
    --be-footer-bg:      var(--t-card);
    --be-card-bg:        var(--t-card);
    --be-card-border:    var(--t-rule);
    --be-body-bg:        var(--t-bg);
    --be-text:           var(--t-ink);
    --be-text-muted:     var(--t-muted);
    --be-badge-green:    var(--t-green);
    --be-badge-green-bg: var(--t-green-tint);
    --be-badge-yellow:   var(--t-amber);
    --be-badge-yellow-bg:var(--t-amber-tint);
    --be-badge-red:      var(--t-red);
    --be-badge-red-bg:   var(--t-red-tint);
    --be-radius:         8px;
}


/* ========================================
   TAB NAVIGATION — tool-eigene Ergänzungen
   ----------------------------------------
   Header, Brand, Tab-Nav-Grundlayout und Theme-Toggle kommen jetzt
   kanonisch aus css/tinte-base.css (.site-header/.site-header__inner/
   .site-header__top/.brand-mark/.tab-nav/a.tab-btn/.tab-theme). Hier bleibt
   nur, was der Kanon nicht kennt: der Trenner zwischen Bayern-News-eigenen
   Nav-Gruppen. `.tab-show`/`.tab-logout` erben bewusst das kanonische
   a.tab-btn-Aussehen (keine eigenen Regeln nötig).
   ======================================== */

/* Vertikaler Trenner zwischen Nav-Gruppen (Shows | Bereiche | Abmelden).
   Auf die kanonische Tab-Baseline ausgerichtet: Tabs haben 14px Bottom-
   Padding, der Trenner endet mit gleichem Bottom-Abstand über der
   Header-Unterkante. */
.tab-sep {
    align-self: stretch;
    width: 0;
    padding: 0;
    background: none;
    border-left: 1px solid var(--t-rule);
    margin: 0 12px 14px;
}


/* ========================================
   FOOTER (Brand-Chrome)
   ======================================== */

.site-footer {
    background-color: var(--t-card);
    color: var(--t-muted);
    margin-top: 3rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--t-rule);
    font-size: 0.78rem;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-logo {
    height: 28px;
    width: auto;
}

.footer-name {
    font-weight: 500;
    color: var(--t-ink-soft);
    font-size: 0.85rem;
}

.footer-links {
    display: flex;
    gap: 1.25rem;
}

.footer-links a {
    color: var(--t-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--t-teal);
}

.footer-copy small {
    color: var(--t-faint);
    font-size: 0.78rem;
}

/* ========================================
   LOGIN
   ======================================== */

.login-container {
    max-width: 420px;
    margin: 4rem auto;
}

.login-brand {
    text-align: center;
    margin-bottom: 2rem;
}

.login-brand .ds-brandmark {
    margin-bottom: 0.75rem;
    transform: scale(1.4);
}

.login-title {
    font-size: 2rem;
    margin: 0.4rem 0 0.3rem;
}

.login-error {
    background: var(--t-red-tint);
    color: var(--t-red);
    border-left: 4px solid var(--t-red);
    padding: 0.6rem 1rem;
    border-radius: var(--be-radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* ========================================
   ALLGEMEIN
   ======================================== */

body {
    background-color: var(--t-bg);
}

/* KPI-/Stat-Kacheln (Tinte: ruhige Karte, Serif-Zahl, leises Label). */
.grid-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.25rem;
}

.stat-card {
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: var(--be-radius);
    box-shadow: 0 1px 2px rgba(15, 29, 34, 0.03);
    padding: 1rem;
    text-align: center;
}

.stat-card .number {
    font-family: var(--f-serif);
    font-size: 1.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--t-teal);
    line-height: 1.1;
}

.stat-card .label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--t-muted);
    margin-top: 0.2rem;
}

/* Badges — Pill-Form wie .ds-badge, semantische Farbpaare Light/Dark-fest. */
.badge {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.badge-green  { background: var(--t-green-tint); color: var(--t-green); }
.badge-yellow { background: var(--t-amber-tint); color: var(--t-amber); }
.badge-red    { background: var(--t-red-tint);   color: var(--t-red); }
.badge-gray   { background: var(--t-hairline);   color: var(--t-muted); }
.badge-small  { font-size: 0.68rem; }

/* Dark-Mode-Kontrast: die hellen Tint-Hintergründe und die mittleren
   Textfarben sind im Dunkeln zu schwach. Kräftigere, eigene Paare. */
:root[data-theme="dark"] .badge-green  { background: rgba(46, 125, 50, 0.22);  color: #8fd694; }
:root[data-theme="dark"] .badge-yellow { background: rgba(184, 116, 42, 0.24);  color: #e7b277; }
:root[data-theme="dark"] .badge-red    { background: rgba(162, 58, 44, 0.26);   color: #e89a8e; }
:root[data-theme="dark"] .badge-gray   { background: rgba(255, 255, 255, 0.06); color: var(--t-faint); }

.warning-box {
    background: var(--t-amber-tint);
    border-left: 4px solid var(--t-amber);
    padding: 0.8rem 1rem;
    margin: 1rem 0;
    border-radius: var(--be-radius);
    font-size: 0.9rem;
    color: var(--t-amber);
}
:root[data-theme="dark"] .warning-box { background: rgba(184, 116, 42, 0.18); color: #e7b277; }

.hidden { display: none !important; }

.hint-text {
    font-size: 0.85rem;
    color: var(--t-muted);
}
.hint-text.hint-success {
    color: var(--t-green);
    font-weight: 600;
}
.sort-active { font-weight: 700; color: var(--t-teal); }


/* ========================================
   DOSSIER- / SCOUT-STATUS
   ======================================== */

.status { margin: 1rem 0; padding: 0.7rem 1rem; border-radius: var(--be-radius); font-weight: 600; border: 1px solid transparent; }
.status.loading { background: var(--t-teal-tint); color: var(--t-teal); }
.status.success { background: var(--t-green-tint); color: var(--t-green); }
.status.error   { background: var(--t-red-tint);   color: var(--t-red); }
.status.warning { background: var(--t-amber-tint); color: var(--t-amber); }
:root[data-theme="dark"] .status.success { color: #8fd694; }
:root[data-theme="dark"] .status.error   { color: #e89a8e; }
:root[data-theme="dark"] .status.warning { color: #e7b277; }

.log-entry       { padding: 0.3rem 0; color: var(--t-green); }
.log-entry-error { padding: 0.3rem 0; color: var(--t-red); }
.log-entry-warn  { padding: 0.3rem 0; color: var(--t-amber); }

.result-row { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--t-rule); }
.result-row.waiting { color: var(--t-faint); }
.result-row.active  { color: var(--t-teal); font-weight: 600; }
.result-row.done    { color: var(--t-green); }
.result-row.error   { color: var(--t-red); }

.result-name { flex: 1; }
.result-status { text-align: right; }
.result-time { margin-right: 0.5rem; font-size: 0.85rem; color: var(--t-muted); font-variant-numeric: tabular-nums; }
.result-download { font-weight: 600; }

.download-btn { display: block; text-align: center; width: 100%; margin: 0.5rem 0; }
/* Download-Hinweis als hervorgehobener Warn-Kasten (BENT-827) — temporärer Link darf nicht übersehen werden */
.download-hint {
    background: var(--t-red-tint);
    border-left: 4px solid var(--t-red);
    color: var(--t-red);
    font-weight: 600;
    text-align: left;
    padding: 0.8rem 1rem;
    margin: 0.5rem 0;
    border-radius: var(--be-radius);
    font-size: 0.9rem;
}
:root[data-theme="dark"] .download-hint { background: rgba(162, 58, 44, 0.18); color: #e89a8e; }
/* Fortschrittsbereich (BENT-827) -- ersetzt vormaligen Inline-Style */
.progress-box { margin: 1rem 0; }

/* Batch-Fortschrittszähler (BENT-1024) */
.batch-progress {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-radius: var(--be-radius);
    background: var(--t-teal-tint, rgba(42, 157, 143, 0.1));
    border: 1px solid var(--t-teal, #2a9d8f);
}
.batch-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
}
.batch-progress-timer {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--t-faint);
}
.batch-progress progress {
    width: 100%;
    height: 6px;
}
.batch-progress-done {
    border-color: var(--t-green, #57b74a);
    background: var(--t-green-tint, rgba(87, 183, 74, 0.1));
}
:root[data-theme="dark"] .batch-progress {
    background: rgba(42, 157, 143, 0.15);
}
:root[data-theme="dark"] .batch-progress-done {
    background: rgba(87, 183, 74, 0.15);
}

.abort-btn { color: var(--t-red); border-color: var(--t-red); }


/* ========================================
   LAYOUT-HILFSKLASSEN
   ======================================== */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.button-row { display: flex; gap: 0.5rem; margin: 1rem 0; flex-wrap: wrap; }
.full-width { width: 100%; }
.text-center { text-align: center; }
.btn-small { font-size: 0.78rem; padding: 0.25rem 0.6rem; }

.history-row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--t-rule);
}


/* ========================================
   THEMEN-ERGEBNIS
   ======================================== */

.refill-bar { display: flex; gap: 0.5rem; align-items: flex-end; margin: 1rem 0; }
.refill-bar input, .refill-bar button, .refill-bar span { margin-bottom: 0; }
.refill-bar button { white-space: nowrap; }
.refill-bar .refill-count { width: 4rem; text-align: center; }
.refill-bar .refill-input { flex: 1; }
.refill-bar .refill-status { white-space: nowrap; margin-bottom: 0.5rem; }

.thema-card { position: relative; }
.thema-card.newly-nominated { border-left: 4px solid var(--t-teal); background: var(--t-teal-tint); }
.thema-card .thema-title { margin-bottom: 0.3rem; padding-right: 14rem; font-family: var(--f-serif); }
.thema-card .thema-subtitle { margin: 0; font-style: italic; color: var(--t-muted); }

.thema-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.like-btn { cursor: pointer; font-size: 1.1rem; user-select: none; }
.like-count { font-size: 0.85rem; color: var(--t-muted); }

.teaser-box {
    background: var(--t-teal-tint);
    padding: 0.6rem;
    border-radius: 4px;
    border-left: 3px solid var(--t-teal);
    font-size: 0.9rem;
}

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .button-row { flex-direction: column; }
    .button-row button { width: 100%; }
    .refill-bar { flex-wrap: wrap; }
    .refill-bar .refill-input { min-width: 100%; }
    .thema-controls { position: static; margin-top: 0.5rem; }
    .thema-card .thema-title { padding-right: 0; }
    .footer-content { flex-direction: column; text-align: center; }
}