/* Backtest-Tabellen der Projektdetailansicht (Ergebnisse + Quartale × Hebel).
   Eigene Datei statt Tailwind-Utilities im PHP-String: Der Admin laeuft ohne
   kompiliertes Filament-Theme, deshalb existieren beliebige Utility-Klassen im
   ausgelieferten CSS nicht und wurden wirkungslos gerendert. Gleiches Muster
   wie project-environment-rows.css — Filament-Variablen plus .dark-Praefix. */

.bt-scroll {
    overflow-x: auto;
}

/* E344: Grid-Items duerfen unter ihre Inhaltsbreite schrumpfen. Ohne das
   uebertragen nowrap-Inhalte (Quartalstabelle, Stale-Badge) ihre Mindest-
   breite auf die ganze Spalte (min-width:auto) — auf Mobile lief dadurch
   JEDE Sektion samt Fliesstext ueber den Viewport hinaus, statt dass die
   Tabelle intern scrollt. */
.fi-grid-col {
    min-width: 0;
}

/* E344: Das Stale-Badge traegt einen ganzen Satz — als nowrap-Badge sprengte
   es auf Mobile die Sektionsbreite. */
.bt-stale .fi-badge {
    white-space: normal;
    text-align: left;
    height: auto;
}

/* E344: Lesemass fuer Fliesstext-Eintraege (Verdict, Reifegrad, Methodik,
   Einordnung) — volle Panelbreite ergibt >150 Zeichen je Zeile. */
.bt-prose {
    max-width: 80ch;
}

.bt-table {
    width: 100%;
    /* separate statt collapse: sonst verlieren die sticky-Zellen der ersten
       Spalte ihre Rahmen (E163). Die Trenner sind alle einseitig gesetzt,
       optisch aendert der Wechsel nichts. */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.bt-table th,
.bt-table td {
    padding: 0.4rem 0.75rem;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bt-table th {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
    border-bottom: 1px solid color-mix(in srgb, var(--gray-500) 25%, transparent);
}

.bt-table th:first-child,
.bt-table td:first-child {
    text-align: left;
    padding-left: 0;
}

.bt-table th:last-child,
.bt-table td:last-child {
    padding-right: 0;
}

.bt-table tbody tr + tr td {
    border-top: 1px solid color-mix(in srgb, var(--gray-500) 12%, transparent);
}

.bt-table tbody tr:hover td {
    background-color: color-mix(in srgb, var(--gray-500) 6%, transparent);
}

.dark .bt-table th {
    color: var(--gray-400);
}

/* Zeilentitel mit Zeitraum darunter — der Zeitraum traegt die Teiljahr-Info. */
.bt-row-label {
    font-weight: 600;
}

.bt-row-window {
    display: block;
    margin-top: 0.0625rem;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
    color: var(--gray-500);
}

.dark .bt-row-window {
    color: var(--gray-400);
}

.bt-total td {
    font-weight: 700;
    border-top: 1px solid color-mix(in srgb, var(--gray-500) 35%, transparent) !important;
}

.bt-value {
    font-weight: 600;
}

.bt-pos {
    color: var(--success-600);
}

.bt-neg {
    color: var(--danger-600);
}

.bt-none {
    color: var(--gray-400);
}

.dark .bt-pos {
    color: var(--success-400);
}

.dark .bt-neg {
    color: var(--danger-400);
}

/* Quartalsverlauf als Chips: Label klein, Wert dominant. */
.bt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.bt-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    border-radius: 0.25rem;
    padding: 0.0625rem 0.375rem;
    font-variant-numeric: tabular-nums;
}

.bt-chip-label {
    font-size: 0.6875rem;
    opacity: 0.75;
}

.bt-chip--pos {
    background-color: color-mix(in srgb, var(--success-100) 70%, transparent);
    color: var(--success-700);
}

.bt-chip--neg {
    background-color: color-mix(in srgb, var(--danger-100) 70%, transparent);
    color: var(--danger-700);
}

.bt-chip--none {
    background-color: color-mix(in srgb, var(--gray-500) 10%, transparent);
    color: var(--gray-500);
}

.dark .bt-chip--pos {
    background-color: color-mix(in srgb, var(--success-950) 60%, transparent);
    color: var(--success-400);
}

.dark .bt-chip--neg {
    background-color: color-mix(in srgb, var(--danger-950) 60%, transparent);
    color: var(--danger-400);
}

.dark .bt-chip--none {
    background-color: color-mix(in srgb, var(--gray-500) 18%, transparent);
    color: var(--gray-400);
}

.bt-note {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500);
}

.dark .bt-note {
    color: var(--gray-400);
}

/* Hebelspalte des Projekts hervorheben (Markierung „•"). */
.bt-own-lev {
    background-color: color-mix(in srgb, var(--primary-500) 8%, transparent);
}

/* Mit zehn Hebelspalten (E163) scrollt die Tabelle waagrecht; die erste
   Spalte bleibt stehen, sonst weiss man beim Scrollen nicht mehr, welches
   Quartal man liest. Drei Dinge gehoeren dazu:
   1. Ein DECKENDER Hintergrund in der Panel-Farbe — sonst scheinen die
      wegscrollenden Zellen durch die klebende Spalte durch.
   2. `border-collapse: separate` (oben gesetzt): mit `collapse` verlieren
      sticky-Zellen ihre Rahmen, die Zeilentrenner brechen ab.
   3. Der Hover-Hintergrund muss fuer die klebende Spalte wiederholt werden,
      weil der deckende Hintergrund die Regel von oben sonst ueberdeckt. */
.bt-table th:first-child,
.bt-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    padding-right: 0.75rem;
    background-color: white;
    border-right: 1px solid color-mix(in srgb, var(--gray-500) 12%, transparent);
}

.dark .bt-table th:first-child,
.dark .bt-table td:first-child {
    background-color: var(--gray-900);
}

.bt-table tbody tr:hover td:first-child {
    background-color: color-mix(in srgb, var(--gray-500) 6%, white);
}

.dark .bt-table tbody tr:hover td:first-child {
    background-color: color-mix(in srgb, var(--gray-500) 6%, var(--gray-900));
}

/* Signalstand als Kachel-Grid (E343): Label und Wert stehen beieinander,
   statt an den entgegengesetzten Raendern einer vollbreiten Tabelle. Kacheln
   fuellen die Breite responsiv; Satz-Werte spannen die ganze Zeile. */
.sig-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.5rem;
}

.sig-item {
    border: 1px solid color-mix(in srgb, var(--gray-500) 15%, transparent);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: color-mix(in srgb, var(--gray-500) 4%, transparent);
    min-width: 0;
}

.sig-item--wide {
    grid-column: 1 / -1;
}

.sig-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.dark .sig-label {
    color: var(--gray-400);
}

.sig-value {
    margin-top: 0.125rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.375rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.sig-value--pos {
    color: var(--success-600);
}

.sig-value--neg {
    color: var(--danger-600);
}

.sig-value--warn {
    color: var(--warning-600);
}

.dark .sig-value--pos {
    color: var(--success-400);
}

.dark .sig-value--neg {
    color: var(--danger-400);
}

.dark .sig-value--warn {
    color: var(--warning-400);
}

.sig-hint {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500);
}

.dark .sig-hint {
    color: var(--gray-400);
}

.sig-meta {
    margin-top: 0.625rem;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.dark .sig-meta {
    color: var(--gray-400);
}

/* Startquartal-Filter der Backtest-Evidenz (E166). */
.bt-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bt-filter {
    font-size: 0.8125rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid color-mix(in srgb, var(--gray-500) 30%, transparent);
    background-color: transparent;
    color: inherit;
}

.bt-filter-note {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.dark .bt-filter-note {
    color: var(--gray-400);
}