/* ==============================================
   DGZS Dossier-Generator — Bavaria Entertainment
   Custom Styles über Pico CSS

   Token-Quelle: Design-Direction A (Familie mit bavaria-entertainment/transkriptor).
   Siehe transkriptor/docs/redesign/README.md.
   ============================================== */

/* --- Design Tokens (Direction A) --- */
:root {
    /* Farben */
    --t-ink:          #0f1d22;
    --t-ink-soft:     #3a4a4f;
    --t-muted:        #6b7a7e;
    --t-faint:        #a4b0b3;
    --t-rule:         #e3e7e6;
    --t-hairline:     #eef1f0;
    --t-bg:           #f6f4ee;
    --t-card:         #ffffff;
    --t-teal:         #1b6d7c;
    --t-teal-soft:    #8cb8ba;
    --t-teal-hi:      #2a9d8f;
    --t-teal-tint:    rgba(27, 109, 124, 0.08);
    --t-teal-hi-tint: rgba(42, 157, 143, 0.10);
    --t-amber:        #b8742a;
    --t-amber-tint:   #fbf3e6;
    --t-red:          #a23a2c;
    --t-red-tint:     #fbeae8;
    --t-green:        #2e7d32;
    --t-green-tint:   #e8f5e9;

    /* Typografie */
    --f-serif: "Source Serif 4", Georgia, serif;
    --f-sans:  Inter, system-ui, sans-serif;
    --f-mono:  "JetBrains Mono", ui-monospace, monospace;

    /* --- Legacy Aliases (--be-*): bestehende Styles brechen nicht, Migration schrittweise --- */
    --be-teal:              var(--t-teal-hi);
    --be-teal-hover:        #238b7e;
    --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-hover: #256d29;
    --be-badge-green-bg:    var(--t-green-tint);
    --be-badge-red:         var(--t-red);
    --be-badge-red-bg:      var(--t-red-tint);
    --be-radius:            8px;
}

/* --- Pico CSS Overrides --- */
:root[data-theme="light"] {
    --pico-primary:                  var(--be-teal);
    --pico-primary-hover:            var(--be-teal-hover);
    --pico-primary-focus:            var(--be-teal-focus);
    --pico-primary-background:       var(--be-teal);
    --pico-primary-hover-background: var(--be-teal-hover);
    --pico-background-color:         var(--be-body-bg);
    --pico-card-background-color:    var(--be-card-bg);
    --pico-card-border-color:        var(--be-card-border);
    --pico-border-radius:            var(--be-radius);
}


/* ========================================
   HEADER — Sticky, Card-BG, zwei Reihen
   (Brand + Status/User · Tab-Bar)
   ======================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--t-card);
    border-bottom: 1px solid var(--t-rule);
    padding: 0;
    margin-bottom: 0;
}

.site-header__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 640px) {
    .site-header__inner { padding: 0 18px; }
}

/* Top-Row: Brand links + Status rechts */
.site-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 18px 0 0;
    flex-wrap: wrap;
}

.page-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 32px 60px;
}

@media (max-width: 640px) {
    .page-main { padding: 18px 18px 40px; }
}

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--t-ink);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    transition: color .15s ease;
}

.brand-link:hover,
.brand-link:focus-visible {
    text-decoration: none;
    color: var(--t-ink);
}

.brand-logo {
    height: 44px;
    width: auto;
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brand-title {
    font-family: var(--f-serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--t-ink);
    text-transform: none;
    white-space: nowrap;
    margin: 0;
}

.brand-link:hover .brand-title,
.brand-link:focus-visible .brand-title {
    color: var(--t-teal);
}

/* Right side: Status-Pill */
.site-header__user {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--t-muted);
    font-size: 13px;
    flex-wrap: wrap;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--t-green);
}


/* ========================================
   TABS — Feature Navigation (im Header)
   ======================================== */

.tab-nav {
    padding: 20px 0 0;
}

.tab-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 28px;
}

a.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0 0 14px 0;
    font-weight: 500;
    color: var(--t-muted);
    cursor: pointer;
    font-family: var(--f-sans);
    font-size: 14px;
    letter-spacing: -0.005em;
    text-decoration: none;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .15s, border-color .15s;
}

a.tab-btn:hover,
a.tab-btn:focus-visible {
    color: var(--t-ink);
    text-decoration: none;
}

a.tab-btn.active {
    color: var(--t-ink);
    font-weight: 600;
    border-bottom-color: var(--t-teal-hi);
}

@media (max-width: 480px) {
    .tab-nav ul {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 18px;
    }

    a.tab-btn {
        font-size: 13px;
        padding-bottom: 12px;
        white-space: nowrap;
    }
}


/* ========================================
   FOOTER — Mark · Versions-Info · Links
   ======================================== */

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

.site-footer__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 640px) {
    .site-footer__inner { padding: 0 18px; }
}

.footer-version {
    color: var(--t-faint);
}

.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: 36px;
    width: auto;
}

.footer-name {
    font-weight: 600;
    color: var(--be-text);
    font-size: 0.9rem;
}

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

.footer-links a {
    color: var(--be-text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

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

.footer-copy small {
    color: var(--be-text-muted);
    font-size: 0.8rem;
}

@media (max-width: 576px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}


/* ========================================
   GENERAL / TYPOGRAFIE
   ======================================== */

.hidden { display: none !important; }

body {
    background-color: var(--t-bg);
    color: var(--t-ink);
    font-family: var(--f-sans);
}

h1, h2, h3 {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--t-ink);
}

h1 { font-size: 1.75rem; font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }

a { color: var(--be-teal); transition: color 0.2s ease; }
a:hover { color: var(--be-teal-hover); }

/* Display-Headlines (Direction A) — opt-in für Templates */
.display {
    font-family: var(--f-serif);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-transform: none;
    color: var(--t-ink);
}

.display em {
    color: var(--t-teal-hi);
    font-style: italic;
}

.eyebrow {
    font-family: var(--f-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t-muted);
    line-height: 1;
}

.mono,
.tabular {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
}


/* ========================================
   CARDS
   ======================================== */

.card {
    background-color: var(--be-card-bg);
    border: 1px solid var(--be-card-border);
    border-radius: var(--be-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.card header {
    padding: 0;
    margin-bottom: 1rem;
    border-bottom: none;
}

.card header h1 { margin-bottom: 0.25rem; }
.card header p { color: var(--be-text-muted); margin: 0; }


/* ========================================
   BUTTONS
   ======================================== */

button[type="submit"],
[role="button"]:not(.outline) {
    background-color: var(--be-teal);
    border-color: var(--be-teal);
    color: #ffffff;
}

button[type="submit"]:hover,
[role="button"]:not(.outline):hover {
    background-color: var(--be-teal-hover);
    border-color: var(--be-teal-hover);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
    outline: 2px solid var(--be-teal);
    outline-offset: 2px;
}


/* ========================================
   STATUS
   ======================================== */

.status {
    padding: 0.75rem;
    border-radius: var(--be-radius);
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 1rem;
}

.status:empty { display: none; }
.status.loading { background: #eff6ff; color: #1e40af; }
.status.success { background: var(--be-badge-green-bg); color: var(--be-badge-green); }
.status.error { background: var(--be-badge-red-bg); color: var(--be-badge-red); }
.status.warning { background: #fff8e1; color: #f57f17; }
/* BENT-715: Issue-Listen in Status-Boxen linksbündig (sonst hängen die Bullets
   in der Mitte, weil .status text-align:center hat). */
.status ul { text-align: left; padding-left: 1.4rem; margin: .3rem 0 0; }
.status ul li { margin-bottom: .25rem; }

/* BENT-657: Buzz-Insights-Pill — sichtbar machen, dass der Dossier-Generator
   den Presse-Spiegel aus dgzs-buzz integriert hat. Amber-Token signalisiert
   „Cross-Tool-Anreicherung", visuell zwischen Status und Download. */
.buzz-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    margin-bottom: 0.75rem;
    background: var(--t-amber-tint);
    color: var(--t-amber);
    border: 1px solid var(--t-rule);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
}
.buzz-pill--empty {
    background: var(--t-hairline);
    color: var(--t-muted);
}

.hint-text {
    font-size: 0.875rem;
    color: var(--be-text-muted);
    margin-top: 0.5rem;
    margin-bottom: 0;
}


/* ========================================
   LOG
   ======================================== */

.log-entry {
    font-size: 0.85rem;
    color: var(--be-text);
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.log-entry:last-child { border-bottom: none; }


/* ========================================
   DOWNLOAD BUTTON
   ======================================== */

.download-btn {
    width: 100%;
    padding: 0.75rem;
    background: var(--be-badge-green);
    color: #fff;
    border: none;
    border-radius: var(--be-radius);
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.download-btn:hover {
    background: var(--be-badge-green-hover);
    color: #fff;
}


/* ========================================
   BATCH RESULTS
   ======================================== */

textarea {
    font-family: inherit;
    resize: vertical;
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.9rem;
}

.result-row:last-child { border-bottom: none; }
.result-name { font-weight: 600; }

.result-row.waiting .result-status { color: var(--be-text-muted); }
.result-row.active .result-status { color: #1e40af; }
.result-row.done .result-status { color: var(--be-badge-green); }
.result-row.error .result-status { color: var(--be-badge-red); }

.result-time { font-size: 0.8rem; color: var(--be-text-muted); }

.result-download {
    background: var(--be-badge-green);
    color: #fff;
    padding: 0.25rem 0.6rem;
    border-radius: 3px;
    text-decoration: none;
    font-size: 0.8rem;
}

.result-download:hover {
    background: var(--be-badge-green-hover);
    color: #fff;
}


/* ========================================
   RESET & MISC
   ======================================== */

.reset-btn {
    width: 100%;
    margin-top: 0.5rem;
}

.upload-disabled-hint {
    font-size: 0.875rem;
    color: var(--be-text-muted);
}

.batch-preview {
    margin-top: 0.5rem;
}

.failed-textarea {
    font-size: 0.8rem;
    background: var(--be-badge-red-bg);
    border-color: var(--be-badge-red);
    margin-top: 0.5rem;
}

.retry-btn {
    width: 100%;
    margin-top: 0.5rem;
}

.abort-btn {
    width: 100%;
    margin-top: 0.5rem;
    border-color: var(--be-badge-red);
    color: var(--be-badge-red);
}

.abort-btn:hover {
    background-color: var(--be-badge-red);
    border-color: var(--be-badge-red);
    color: #fff;
}

.download-hint {
    text-align: center;
}


/* ========================================
   MOBILE
   ======================================== */

/* --- Dropzone --- */
.dropzone {
    border: 2px dashed var(--be-card-border);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    margin-bottom: 1rem;
}
.dropzone:hover,
.dropzone.dragover {
    border-color: var(--be-teal);
    background: var(--be-teal-focus);
}
.dropzone p { margin: 0 0 0.25rem; }
.dropzone small { color: var(--be-text-muted); }
.file-list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    text-align: left;
}
.file-list li {
    padding: 0.25rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--be-card-border);
}
.file-list li a {
    color: var(--be-text-muted);
    margin-left: 0.5rem;
    text-decoration: none;
}
.file-list li a:hover { color: #c62828; }

/* ========================================
   HISTORY
   ======================================== */

.dossier-history {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dossier-history li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.dossier-history li:last-child { border-bottom: none; }

.history-entry {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.history-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.history-meta {
    color: var(--be-text-muted);
    font-size: 0.8rem;
}

.history-actions {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
}

.history-link {
    background: var(--be-teal);
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    text-decoration: none;
    font-size: 0.8rem;
}

.history-link:hover {
    background: var(--be-teal-hover);
    color: #fff;
}


/* ========================================
   PITCH BUTTON
   ======================================== */

.pitch-generate-btn {
    width: 100%;
    margin-top: 0.5rem;
}


@media (max-width: 768px) {
    h1 { font-size: 1.35rem; }
    .card { padding: 1rem; }
}


/* ========================================
   MODBUCH-INDEX: Download-Buttons, Log, Status
   BENT-679
   ======================================== */

.download-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.btn-download,
.btn-download-secondary {
    display: inline-block;
    padding: 0.55rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.btn-download {
    background: var(--t-teal, #1b6d7c);
    color: #fff;
}

.btn-download:hover {
    background: var(--t-teal-hi, #2a9d8f);
    color: #fff;
}

.btn-download-secondary {
    background: var(--t-hairline, #eef1f0);
    color: var(--t-ink, #0f1d22);
    border: 1px solid var(--t-rule, #e3e7e6);
}

.btn-download-secondary:hover {
    background: var(--t-teal-tint, rgba(27, 109, 124, 0.08));
    color: var(--t-teal, #1b6d7c);
}

/* Log-Einträge */
#log-entries p {
    margin: 0.15rem 0;
    font-size: 0.85rem;
    font-family: JetBrains Mono, monospace;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

.log-status { color: var(--t-ink-soft, #3a4a4f); }
.log-ok     { color: var(--t-green, #2e7d32); background: var(--t-green-tint, #e8f5e9); }
.log-warn   { color: var(--t-amber, #b8742a); background: var(--t-amber-tint, #fbf3e6); }
.log-error  { color: var(--t-red, #a23a2c); background: var(--t-red-tint, #fbeae8); }

/* Status-Bar */
.status { min-height: 1.5rem; padding: 0.4rem 0; font-size: 0.9rem; }
.status--running { color: var(--t-teal, #1b6d7c); }
.status--ok      { color: var(--t-green, #2e7d32); font-weight: 600; }
.status--warn    { color: var(--t-amber, #b8742a); }
.status--error   { color: var(--t-red, #a23a2c); font-weight: 600; }

/* hidden-Helfer */
.hidden { display: none !important; }

/* Qualitätszusammenfassung */
#quality-summary {
    margin-top: 1rem;
    font-size: 0.85rem;
}

#quality-summary details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--t-amber, #b8742a);
}

#quality-summary ul {
    margin-top: 0.5rem;
    padding-left: 1.2rem;
}

#quality-summary li {
    margin-bottom: 0.3rem;
    line-height: 1.4;
}

/* --- Session-Login + Logout (BENT-856, übernommen aus dgzs-dossiers) --- */
a.logout-link {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border: 1px solid var(--t-rule, #d8d8d8);
    border-radius: 999px;
    font-size: 13px;
    color: var(--t-ink, #222);
    text-decoration: none;
    background: var(--t-card, #fff);
}

a.logout-link:hover,
a.logout-link:focus-visible {
    border-color: var(--t-teal, #1b6d7c);
    color: var(--t-teal, #1b6d7c);
}

.login-main {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
}

.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--t-card, #fff);
    border: 1px solid var(--t-rule, #e2e2e2);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    text-align: center;
}

.login-logo {
    height: 40px;
    width: auto;
    margin-bottom: 8px;
}

.login-card form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-error {
    color: var(--t-red, #b3261e);
    background: rgba(179, 38, 30, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
    font-size: 14px;
    text-align: center;
}