/**
 * =============================================================================
 * TrueLabel — Data Trust Layer CSS
 * Datei: trust_layer.css
 * Version: 1.0.0
 * Erstellt: 2026-07-28
 *
 * Enthält:
 * - Trust-Badge (5 Farb-Varianten)
 * - Datenpunkt-Tabelle (dark mode, kompakt)
 * - Vertrauens-Balken (animiert)
 * - Stale-Warning / Toast (gelber Banner)
 * - Trust-Details Accordion (smooth expand)
 * - Mobile-optimiert
 * =============================================================================
 */

/* =============================================================================
 1. CSS CUSTOM PROPERTIES (Design Tokens)
 ============================================================================= */

:root {
 /* Trust-Level Farben */
 --trust-5-color: #22c55e; /* Verifiziert: grün */
 --trust-5-bg: #dcfce7;
 --trust-5-text: #15803d;
 --trust-5-border: #86efac;

 --trust-4-color: #3b82f6; /* Geprüft: blau */
 --trust-4-bg: #dbeafe;
 --trust-4-text: #1d4ed8;
 --trust-4-border: #93c5fd;

 --trust-3-color: #eab308; /* Plausibel: gelb */
 --trust-3-bg: #fef9c3;
 --trust-3-text: #a16207;
 --trust-3-border: #fde047;

 --trust-2-color: #f97316; /* Geschätzt: orange */
 --trust-2-bg: #ffedd5;
 --trust-2-text: #c2410c;
 --trust-2-border: #fdba74;

 --trust-1-color: #ef4444; /* Unsicher: rot */
 --trust-1-bg: #fee2e2;
 --trust-1-text: #b91c1c;
 --trust-1-border: #fca5a5;

 /* Neutrale Farben */
 --trust-neutral-bg: #1e1e2e; /* Dark background */
 --trust-surface: #252536;
 --trust-surface-2: #2d2d44;
 --trust-border: #3a3a52;
 --trust-text: #e2e8f0;
 --trust-text-muted: #94a3b8;
 --trust-text-dim: #64748b;

 /* Komponenten */
 --trust-radius: 8px;
 --trust-radius-sm: 5px;
 --trust-radius-lg: 12px;
 --trust-transition: 0.22s ease;
 --trust-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
 --trust-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
 --trust-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
 --trust-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Light-Mode Override */
@media (prefers-color-scheme: light) {
 :root {
 --trust-neutral-bg: #f8fafc;
 --trust-surface: #ffffff;
 --trust-surface-2: #f1f5f9;
 --trust-border: #e2e8f0;
 --trust-text: #1e293b;
 --trust-text-muted: #64748b;
 --trust-text-dim: #94a3b8;
 --trust-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
 --trust-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
 }
}

/* =============================================================================
 2. TRUST-BADGE KOMPONENTE
 ============================================================================= */

.trust-badge {
 display: inline-flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.35em;
 padding: 0.30em 0.70em;
 border-radius: var(--trust-radius-sm);
 font-family: var(--trust-font);
 font-size: 0.85rem;
 font-weight: 600;
 line-height: 1.4;
 border: 1px solid transparent;
 cursor: default;
 transition: box-shadow var(--trust-transition);
}

.trust-badge:hover {
 box-shadow: var(--trust-shadow-sm);
}

.trust-badge-icon {
 font-size: 1em;
 flex-shrink: 0;
}

.trust-badge-label {
 white-space: nowrap;
}

.trust-badge-pct {
 font-weight: 700;
 font-variant-numeric: tabular-nums;
 opacity: 0.9;
}

.trust-detail {
 display: block;
 width: 100%;
 font-size: 0.75em;
 font-weight: 400;
 opacity: 0.80;
 margin-top: 0.15em;
}

/* Badge Farb-Varianten */
.trust-badge.trust-level-5 { background: var(--trust-5-bg); color: var(--trust-5-text); border-color: var(--trust-5-border); }
.trust-badge.trust-level-4 { background: var(--trust-4-bg); color: var(--trust-4-text); border-color: var(--trust-4-border); }
.trust-badge.trust-level-3 { background: var(--trust-3-bg); color: var(--trust-3-text); border-color: var(--trust-3-border); }
.trust-badge.trust-level-2 { background: var(--trust-2-bg); color: var(--trust-2-text); border-color: var(--trust-2-border); }
.trust-badge.trust-level-1 { background: var(--trust-1-bg); color: var(--trust-1-text); border-color: var(--trust-1-border); }

/* =============================================================================
 3. TRUST-SECTION (Accordion-Container)
 ============================================================================= */

.trust-section {
 font-family: var(--trust-font);
 background: var(--trust-surface);
 border: 1px solid var(--trust-border);
 border-radius: var(--trust-radius-lg);
 overflow: hidden;
 box-shadow: var(--trust-shadow-sm);
 margin: 1rem 0;
}

/* ── Header ── */
.trust-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 padding: 0.85rem 1.1rem;
 background: var(--trust-surface-2);
 border-bottom: 1px solid var(--trust-border);
 flex-wrap: wrap;
}

.trust-header-left,
.trust-header-right {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 flex-wrap: wrap;
}

/* ── Overall Badge ── */
.trust-overall-badge {
 display: inline-flex;
 align-items: center;
 gap: 0.4em;
 padding: 0.35em 0.80em;
 border-radius: 20px;
 font-weight: 700;
 font-size: 0.95rem;
 border: 1.5px solid transparent;
 transition: box-shadow var(--trust-transition);
}

.trust-overall-badge:hover {
 box-shadow: var(--trust-shadow-sm);
}

.trust-overall-badge.trust-level-5 { background: var(--trust-5-bg); color: var(--trust-5-text); border-color: var(--trust-5-border); }
.trust-overall-badge.trust-level-4 { background: var(--trust-4-bg); color: var(--trust-4-text); border-color: var(--trust-4-border); }
.trust-overall-badge.trust-level-3 { background: var(--trust-3-bg); color: var(--trust-3-text); border-color: var(--trust-3-border); }
.trust-overall-badge.trust-level-2 { background: var(--trust-2-bg); color: var(--trust-2-text); border-color: var(--trust-2-border); }
.trust-overall-badge.trust-level-1 { background: var(--trust-1-bg); color: var(--trust-1-text); border-color: var(--trust-1-border); }

.trust-overall-icon { font-size: 1.15em; }
.trust-overall-pct { font-size: 1.1em; font-variant-numeric: tabular-nums; }
.trust-overall-label { font-size: 0.85em; font-weight: 500; opacity: 0.85; }

/* ── Details Button ── */
.trust-details-btn {
 display: inline-flex;
 align-items: center;
 gap: 0.30em;
 padding: 0.35em 0.75em;
 background: transparent;
 border: 1px solid var(--trust-border);
 border-radius: var(--trust-radius-sm);
 color: var(--trust-text-muted);
 font-family: var(--trust-font);
 font-size: 0.82rem;
 font-weight: 500;
 cursor: pointer;
 transition: background var(--trust-transition), color var(--trust-transition), border-color var(--trust-transition);
 white-space: nowrap;
}

.trust-details-btn:hover {
 background: var(--trust-border);
 color: var(--trust-text);
 border-color: var(--trust-text-dim);
}

.trust-details-btn:focus-visible {
 outline: 2px solid var(--trust-4-color);
 outline-offset: 2px;
}

.trust-chevron {
 font-size: 0.75em;
 transition: transform var(--trust-transition);
 display: inline-block;
}

.trust-details-btn[aria-expanded="true"] .trust-chevron {
 transform: rotate(180deg);
}

.trust-source-count {
 font-size: 0.78rem;
}

/* ── Details Panel (Accordion) ── */
.trust-details {
 padding: 1.1rem;
 display: flex;
 flex-direction: column;
 gap: 1.25rem;

 /* Smooth Expand */
 overflow: hidden;
 animation: trustExpand var(--trust-transition) ease-out;
}

.trust-details.hidden {
 display: none;
}

@keyframes trustExpand {
 from {
 opacity: 0;
 transform: translateY(-8px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

/* =============================================================================
 4. KATEGORIE-AUFSCHLÜSSELUNG
 ============================================================================= */

.trust-breakdown {
 background: var(--trust-surface-2);
 border: 1px solid var(--trust-border);
 border-radius: var(--trust-radius);
 padding: 0.85rem 1rem;
}

.trust-breakdown-title,
.trust-table-title,
.trust-legend-title {
 font-size: 0.78rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.07em;
 color: var(--trust-text-muted);
 margin: 0 0 0.70rem 0;
}

.trust-breakdown-item {
 display: grid;
 grid-template-columns: 120px 1fr 42px 55px;
 align-items: center;
 gap: 0.5rem;
 padding: 0.30rem 0;
 border-bottom: 1px solid var(--trust-border);
}

.trust-breakdown-item:last-child {
 border-bottom: none;
}

.trust-breakdown-item.trust-breakdown-missing {
 opacity: 0.55;
}

.trust-breakdown-label {
 font-size: 0.82rem;
 font-weight: 500;
 color: var(--trust-text);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.trust-breakdown-bar-wrap {
 height: 8px;
 background: var(--trust-border);
 border-radius: 4px;
 overflow: hidden;
}

.trust-breakdown-bar {
 display: block;
 height: 100%;
 border-radius: 4px;
 transition: width 0.5s ease;
 animation: trustBarGrow 0.6s ease-out;
}

.trust-breakdown-bar-empty {
 display: block;
 font-size: 0.72rem;
 color: var(--trust-text-dim);
 line-height: 8px;
 padding-left: 4px;
}

.trust-breakdown-score {
 font-size: 0.82rem;
 font-weight: 700;
 text-align: right;
 font-variant-numeric: tabular-nums;
}

.trust-breakdown-weight {
 font-size: 0.72rem;
 text-align: right;
}

/* Level-colored text */
.trust-level-5-text { color: var(--trust-5-text); }
.trust-level-4-text { color: var(--trust-4-text); }
.trust-level-3-text { color: var(--trust-3-text); }
.trust-level-2-text { color: var(--trust-2-text); }
.trust-level-1-text { color: var(--trust-1-text); }

/* =============================================================================
 5. DATENPUNKT-TABELLE
 ============================================================================= */

.trust-table-section {
 overflow: hidden;
}

.trust-table-wrapper {
 overflow-x: auto;
 border-radius: var(--trust-radius);
 border: 1px solid var(--trust-border);
 box-shadow: var(--trust-shadow-sm);
}

.trust-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.82rem;
 font-family: var(--trust-font);
 color: var(--trust-text);
 background: var(--trust-surface);
}

.trust-table thead tr {
 background: var(--trust-surface-2);
 border-bottom: 2px solid var(--trust-border);
}

.trust-table thead th {
 padding: 0.60rem 0.85rem;
 text-align: left;
 font-size: 0.75rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: var(--trust-text-muted);
 white-space: nowrap;
}

.trust-table tbody tr {
 border-bottom: 1px solid var(--trust-border);
 transition: background var(--trust-transition);
}

.trust-table tbody tr:last-child {
 border-bottom: none;
}

.trust-table tbody tr:hover {
 background: var(--trust-surface-2);
}

.trust-table tbody tr.trust-row-stale {
 opacity: 0.75;
}

.trust-table tbody tr.trust-row-stale:hover {
 opacity: 1;
}

.trust-table td {
 padding: 0.55rem 0.85rem;
 vertical-align: middle;
}

/* Spalten */
.trust-col-field { min-width: 160px; }
.trust-col-value { min-width: 80px; max-width: 150px; }
.trust-col-confidence { min-width: 130px; }
.trust-col-source { min-width: 100px; }
.trust-col-date { min-width: 90px; white-space: nowrap; }
.trust-col-age { min-width: 100px; white-space: nowrap; }

/* Feldname */
.trust-field-label {
 display: block;
 font-weight: 600;
 color: var(--trust-text);
}

.trust-field-key {
 display: block;
 color: var(--trust-text-dim);
 font-family: var(--trust-font-mono);
 font-size: 0.70rem;
 margin-top: 1px;
}

/* Einheit */
.trust-unit {
 color: var(--trust-text-muted);
 font-size: 0.80em;
 margin-left: 2px;
}

/* Quellenlink */
.trust-source-link {
 color: var(--trust-4-color);
 text-decoration: none;
 border-bottom: 1px dotted var(--trust-4-border);
 transition: color var(--trust-transition);
}

.trust-source-link:hover {
 color: var(--trust-4-text);
 border-bottom-style: solid;
}

/* =============================================================================
 6. VERTRAUENS-BALKEN (animiert)
 ============================================================================= */

.trust-bar-container {
 height: 7px;
 background: var(--trust-border);
 border-radius: 4px;
 overflow: hidden;
 margin-bottom: 3px;
}

.trust-bar-fill {
 height: 100%;
 border-radius: 4px;
 transition: width 0.5s ease;
 animation: trustBarGrow 0.7s ease-out;
}

@keyframes trustBarGrow {
 from { width: 0 !important; }
 to { /* width set via inline style */ }
}

.trust-bar-label {
 display: block;
 font-size: 0.72rem;
 font-weight: 600;
 font-variant-numeric: tabular-nums;
}

/* =============================================================================
 7. ALTER-INDIKATOREN
 ============================================================================= */

.trust-age {
 font-size: 0.80rem;
 color: var(--trust-text-muted);
}

.trust-age.trust-age-warn {
 color: var(--trust-3-text);
 font-weight: 600;
}

.trust-age.trust-age-critical {
 color: var(--trust-2-text);
 font-weight: 700;
}

/* =============================================================================
 8. STALE-WARNING TOAST
 ============================================================================= */

.trust-stale-toast {
 position: fixed;
 bottom: 1.25rem;
 left: 50%;
 transform: translateX(-50%);
 z-index: 9999;
 display: flex;
 align-items: center;
 gap: 0.75rem;
 padding: 0.75rem 1.25rem;
 background: #fef08a;
 color: #713f12;
 border: 1px solid #fde047;
 border-radius: var(--trust-radius);
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
 font-family: var(--trust-font);
 font-size: 0.88rem;
 font-weight: 500;
 max-width: min(560px, calc(100vw - 2rem));
 animation: trustToastIn 0.3s ease-out;
}

.trust-stale-toast.trust-toast-fade {
 animation: trustToastOut 0.4s ease-in forwards;
}

@keyframes trustToastIn {
 from { opacity: 0; transform: translateX(-50%) translateY(16px); }
 to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes trustToastOut {
 from { opacity: 1; transform: translateX(-50%) translateY(0); }
 to { opacity: 0; transform: translateX(-50%) translateY(12px); }
}

.trust-toast-msg {
 flex: 1;
 line-height: 1.4;
}

.trust-toast-close {
 flex-shrink: 0;
 background: transparent;
 border: none;
 font-size: 1rem;
 color: inherit;
 cursor: pointer;
 padding: 0.1em 0.3em;
 border-radius: 3px;
 opacity: 0.70;
 transition: opacity var(--trust-transition);
}

.trust-toast-close:hover {
 opacity: 1;
}

/* Stale Banner (inline, nicht als Toast) */
.trust-stale-banner {
 display: flex;
 align-items: center;
 gap: 0.60rem;
 padding: 0.65rem 1rem;
 background: #fef9c3;
 color: #a16207;
 border: 1px solid #fde047;
 border-radius: var(--trust-radius-sm);
 font-size: 0.85rem;
 font-weight: 500;
 line-height: 1.4;
}

/* =============================================================================
 9. TRUST-LEGENDE
 ============================================================================= */

.trust-legend {
 background: var(--trust-surface-2);
 border: 1px solid var(--trust-border);
 border-radius: var(--trust-radius);
 padding: 0.75rem 1rem;
}

.trust-legend-items {
 display: flex;
 flex-direction: column;
 gap: 0.45rem;
}

.trust-legend-item {
 display: flex;
 align-items: baseline;
 gap: 0.50rem;
 font-size: 0.80rem;
}

.trust-legend-icon {
 font-size: 1em;
 flex-shrink: 0;
}

.trust-legend-name {
 font-weight: 600;
 min-width: 80px;
}

.trust-legend-desc {
 font-size: 0.75em;
 opacity: 0.80;
 line-height: 1.3;
}

/* =============================================================================
 10. LEERE ZUSTÄNDE
 ============================================================================= */

.trust-table-empty {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 2rem;
 gap: 0.5rem;
 color: var(--trust-text-dim);
 font-size: 0.88rem;
 text-align: center;
}

.trust-table-empty span {
 font-size: 2rem;
}

/* =============================================================================
 11. UTILITY KLASSEN
 ============================================================================= */

.trust-muted {
 color: var(--trust-text-muted);
 font-size: 0.80em;
}

.hidden {
 display: none !important;
}

/* =============================================================================
 12. MOBILE OPTIMIERUNG (≤ 640px)
 ============================================================================= */

@media (max-width: 640px) {

 /* Header stapeln */
 .trust-header {
 flex-direction: column;
 align-items: flex-start;
 gap: 0.60rem;
 padding: 0.75rem;
 }

 .trust-header-right {
 width: 100%;
 justify-content: space-between;
 }

 /* Overall Badge kleiner */
 .trust-overall-badge {
 font-size: 0.88rem;
 padding: 0.30em 0.65em;
 }

 .trust-overall-label {
 display: none; /* Platz sparen auf Mobile */
 }

 /* Breakdown: 2-spaltig statt 4-spaltig */
 .trust-breakdown-item {
 grid-template-columns: 100px 1fr 38px;
 gap: 0.4rem;
 }

 .trust-breakdown-weight {
 display: none;
 }

 /* Tabelle: horizontales Scrollen erzwingen */
 .trust-table-wrapper {
 border-radius: 0;
 border-left: none;
 border-right: none;
 margin: 0 -1rem;
 }

 .trust-table {
 font-size: 0.76rem;
 }

 .trust-table thead th,
 .trust-table tbody td {
 padding: 0.45rem 0.65rem;
 }

 /* Spalten auf Mobile ausblenden (Alter & Datum zusammenfassen) */
 .trust-col-date {
 display: none;
 }

 .trust-col-field {
 min-width: 120px;
 }

 /* Details-Panel padding reduzieren */
 .trust-details {
 padding: 0.75rem;
 gap: 0.85rem;
 }

 /* Toast: volle Breite */
 .trust-stale-toast {
 left: 0.5rem;
 right: 0.5rem;
 bottom: 0.75rem;
 transform: none;
 max-width: none;
 }

 @keyframes trustToastIn {
 from { opacity: 0; transform: translateY(16px); }
 to { opacity: 1; transform: translateY(0); }
 }

 @keyframes trustToastOut {
 from { opacity: 1; transform: translateY(0); }
 to { opacity: 0; transform: translateY(12px); }
 }

 /* Legende kompakter */
 .trust-legend-item {
 flex-wrap: wrap;
 }

 .trust-legend-desc {
 display: none;
 }
}

/* =============================================================================
 13. MEDIUM SCREENS (641px – 1023px)
 ============================================================================= */

@media (min-width: 641px) and (max-width: 1023px) {

 .trust-col-date {
 display: none;
 }

 .trust-breakdown-item {
 grid-template-columns: 130px 1fr 45px 60px;
 }
}

/* =============================================================================
 14. PRINT STYLES
 ============================================================================= */

@media print {

 .trust-details.hidden {
 display: flex !important; /* Alles aufklappen beim Drucken */
 }

 .trust-details-btn {
 display: none;
 }

 .trust-stale-toast,
 .trust-stale-banner {
 border: 1px solid #999;
 background: #fff;
 color: #333;
 }

 .trust-bar-fill {
 print-color-adjust: exact;
 -webkit-print-color-adjust: exact;
 }

 .trust-breakdown-bar {
 print-color-adjust: exact;
 -webkit-print-color-adjust: exact;
 }

 .trust-overall-badge,
 .trust-badge {
 print-color-adjust: exact;
 -webkit-print-color-adjust: exact;
 border: 1px solid #ccc;
 }
}