/*
====================================================================================================
CUSTOM.CSS - NWR/Joomla Styling
====================================================================================================
Hauptstyles für Boxen, Tabellen, Tooltips mit Light/Dark-Mode Support
Verwendung: Bootstrap 5.3+ mit data-bs-theme="dark" Unterstützung
====================================================================================================
*/

/* 
====================================================================================================
1. CSS-VARIABLEN (FARBSCHEMAS)
====================================================================================================
*/

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   LIGHT MODE (Standard)
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
:root {
    /* Box-Komponenten */
    --box-bg: #b7d1ec;
    --box-header-bg: #e4eef8;
    --box-text: #1f2937;
    --box-link: #1f4788;
    --box-border: #a0a0a0;
    
    /* Tabellen (Infobereich Legacy) */
    --table-cell-bg: #e4eef8;
    --table-border: #1f2937;
    
    /* Tooltips */
    --tooltip-fg: #000000;
    --tooltip-bg: #ffebe6;
    --tooltip-border: #c32e04;
    
    /* Headlines */
    --headline-bg: #b7d1ec;
    
    /* Globale Tabellen */
    --tbl-text: #1f2937;
    --tbl-border: #1f4788;
    --tbl-bg: #ffffff;
    --tbl-stripe-even: #f2f2f2;
    --tbl-stripe-odd: #ffffff;
    --tbl-header-bg: #e4eef8;
    --tbl-header-text: #1f2937;
    --tbl-hover: #e9f2fb;
    --tbl-focus-ring: rgba(31, 71, 136, 0.35);
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   DARK MODE (Bootstrap data-bs-theme="dark") - VERBESSERTE KONTRASTE
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
html[data-bs-theme="dark"] {
    /* Box-Komponenten */
    --box-bg: #1f2a37;
    --box-header-bg: #111827;
    --box-text: #e5e7eb;
    --box-link: #93c5fd;
    --box-border: #374151;
    
    /* Tabellen (Infobereich Legacy) */
    --table-cell-bg: #111827;
    --table-border: #4b5563;
    
    /* Tooltips */
    --tooltip-fg: #e5e7eb;
    --tooltip-bg: #1f2937;
    --tooltip-border: #6b7280;
    
    /* Headlines */
    --headline-bg: #1f2a37;
    
    /* Globale Tabellen - DEUTLICHERE ZEBRA-FARBEN */
    --tbl-text: #e5e7eb;
    --tbl-border: #4b5563;
    --tbl-bg: #0f172a;
    --tbl-stripe-even: #374151;  /* Deutlich heller für besseren Kontrast */
    --tbl-stripe-odd: #1f2937;   /* Mittlerer Grauton */
    --tbl-header-bg: #1f2937;
    --tbl-header-text: #e5e7eb;
    --tbl-hover: #475569;        /* Deutlicher Hover-Effekt */
    --tbl-focus-ring: rgba(147, 197, 253, 0.35);
}

/* 
====================================================================================================
2. BOX-KOMPONENTEN (BoxLarge, BoxSmall, Infobereich)
====================================================================================================
*/

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Basis-Layout für alle Box-Typen
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
div.BoxLarge,
div.BoxSmall,
div.infobereich {
    box-shadow: 1px 1px 6px var(--box-border);
    background-color: var(--box-bg);
    color: var(--box-text);
    border-radius: 5px;
    font-size: 0.9em;
    font-family: arial, system-ui, -apple-system, "Segoe UI", Roboto, 
                 "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Spezifische Dimensionen */
div.BoxLarge { 
    width: 38em; 
    min-height: 250px; 
    margin: 13px; 
    float: left; 
}

div.BoxSmall { 
    width: 38em; 
    min-height: 200px; 
    margin: 13px; 
    float: left; 
}

div.infobereich { 
    margin: 13px; 
    width: 95%; 
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Box-Header
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
.BoxHeader,
.infobereich .HeaderRow {
    margin: 0;
    padding: 5px;
    font-size: 1.7em;
    font-weight: bold;
    background-color: var(--box-header-bg);
    color: var(--box-text);
}

.BoxHeader a { 
    text-decoration: underline !important; 
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Box-Content
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
.BoxContent { 
    padding: 15px; 
    font-size: 1.2em; 
    background-color: var(--box-bg); 
}

.BoxContent img { 
    vertical-align: middle; 
}

.BoxContent a, 
.BoxHeader a, 
.infobereich a { 
    color: var(--box-link); 
    text-decoration: underline; 
}

/* 
====================================================================================================
3. LEGACY INFOBEREICH-TABELLEN
====================================================================================================
*/

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Basis-Tabellenstyles (Infobereich spezifisch)
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
.infobereich table.infobereich {
    border-collapse: collapse;
    width: 100%;
    color: var(--box-text);
    background-color: var(--tbl-bg);
}

.infobereich td, 
.infobereich th {
    border: 1px solid var(--table-border);
    background-color: transparent; /* Wichtig: damit Zebra-Streifen funktionieren */
    padding: 5px;
}

.infobereich .headline td, 
.infobereich .headline th {
    background-color: var(--headline-bg) !important;
    font-weight: bold;
}

/* 
====================================================================================================
4. TOOLTIP-SYSTEM
====================================================================================================
*/

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Tooltip-Trigger
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
.tltip { 
    color: var(--box-link); 
    text-decoration: underline; 
    font-family: Oswald, sans-serif; 
    cursor: help; 
    position: relative; 
}

.tltip span[role="tltip"] { 
    display: none; 
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Tooltip-Content (Hover-Zustand)
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
.tltip:hover span[role="tltip"] {
    display: block;
    position: relative;
    left: 10em;
    width: 12em;
    padding: 0.5em;
    z-index: 100;
    color: var(--tooltip-fg);
    background-color: var(--tooltip-bg);
    border: solid 1px var(--tooltip-border);
    border-radius: 0.2em;
}

/* 
====================================================================================================
5. GLOBALE TABELLEN-STYLES (Zebra-Streifen & Modern Layout)
====================================================================================================
*/

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Basis-Tabellenlayout
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
table { 
    border-collapse: separate; 
    border-spacing: 0; 
    background-color: var(--tbl-bg); 
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Zellen-Grundstyles - KEINE DEFAULT-HINTERGRÜNDE
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
table td {
    border: 1px solid var(--tbl-border);
    padding: 5px;
    color: var(--tbl-text);
    background-color: transparent; /* Explizit transparent für Zebra */
}

table th {
    border: 1px solid var(--tbl-border);
    padding: 5px;
    color: var(--tbl-text);
    background-color: transparent; /* Wird später überschrieben */
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Tabellen-Header (hohe Spezifität) - für erste Zeile wenn keine th-Tags
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
table thead th,
table tr:first-child td {
    background-color: var(--tbl-header-bg) !important;
    color: var(--tbl-header-text) !important;
    font-weight: 600;
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   ZEBRA-STREIFEN (Light-Mode) - Mit tbody
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
table tbody tr:nth-child(even) td {
    background-color: var(--tbl-stripe-even) !important;
}

table tbody tr:nth-child(odd) td {
    background-color: var(--tbl-stripe-odd) !important;
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   ZEBRA-STREIFEN Fallback (Ohne tbody)
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
table:not(:has(tbody)) tr:nth-child(even):not(:first-child) td {
    background-color: var(--tbl-stripe-even) !important;
}

table:not(:has(tbody)) tr:nth-child(odd):not(:first-child) td {
    background-color: var(--tbl-stripe-odd) !important;
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Interaktions-States (Hover, Focus)
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
table tbody tr:hover td {
    background-color: var(--tbl-hover) !important;
}

table a:focus, 
table button:focus, 
table [tabindex]:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--tbl-focus-ring);
    border-radius: 2px;
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Abgerundete Ecken
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
table tr:first-child td:first-child,
table thead tr:first-child th:first-child { 
    border-top-left-radius: 8px; 
}

table tr:first-child td:last-child,
table thead tr:first-child th:last-child { 
    border-top-right-radius: 8px; 
}

table tr:last-child td:first-child,
table tfoot tr:last-child td:first-child { 
    border-bottom-left-radius: 8px; 
}

table tr:last-child td:last-child,
table tfoot tr:last-child td:last-child { 
    border-bottom-right-radius: 8px; 
}

/* 
====================================================================================================
6. DARK-MODE ZEBRA-VERSTÄRKUNG (MAXIMALE SPEZIFITÄT)
====================================================================================================
Verstärkte Selektoren mit direktem Dark-Mode-Targeting für garantierte Zebra-Streifen
*/

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Dark-Mode Zebra-Streifen (Globale Tabellen) - MAXIMALE SPEZIFITÄT
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
html[data-bs-theme="dark"] table tbody tr:nth-child(even) td {
    background-color: #374151 !important; /* Direkter Hex-Wert für Sicherheit */
    color: #e5e7eb !important;
}

html[data-bs-theme="dark"] table tbody tr:nth-child(odd) td {
    background-color: #1f2937 !important; /* Direkter Hex-Wert für Sicherheit */
    color: #e5e7eb !important;
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Dark-Mode Zebra-Streifen (Fallback ohne tbody)
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
html[data-bs-theme="dark"] table:not(:has(tbody)) tr:nth-child(even):not(:first-child) td {
    background-color: #374151 !important;
    color: #e5e7eb !important;
}

html[data-bs-theme="dark"] table:not(:has(tbody)) tr:nth-child(odd):not(:first-child) td {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Dark-Mode Hover-Enforcement
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
html[data-bs-theme="dark"] table tbody tr:hover td {
    background-color: #475569 !important;
    color: #e5e7eb !important;
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Dark-Mode Header-Enforcement (erste Zeile falls keine th-Tags)
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
html[data-bs-theme="dark"] table thead th,
html[data-bs-theme="dark"] table tr:first-child td {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    font-weight: 600;
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Dark-Mode Infobereich-Tabellen (spezifische Regeln)
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
html[data-bs-theme="dark"] .infobereich table tbody tr:nth-child(even) td {
    background-color: #374151 !important;
}

html[data-bs-theme="dark"] .infobereich table tbody tr:nth-child(odd) td {
    background-color: #1f2937 !important;
}

html[data-bs-theme="dark"] .infobereich .headline td, 
html[data-bs-theme="dark"] .infobereich .headline th {
    background-color: #1f2a37 !important;
    font-weight: bold;
}

/* 
====================================================================================================
7. INLINE-STYLE OVERRIDES (Legacy-Kompatibilität)
====================================================================================================
*/

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Alte Inline-Styles neutralisieren - aber Zebra respektieren
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
table td[style*="background"] {
    background: transparent !important;
}

table td[style*="color"], 
table th[style*="color"] {
    color: var(--tbl-text) !important;
}

table td[style*="border"], 
table th[style*="border"] {
    border-color: var(--tbl-border) !important;
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   Durchgestrichene Zeilen (lesbar halten)
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
table tr[style*="line-through"] td,
table tr.s-cancelled td {
    opacity: 0.9;
    color: var(--tbl-text);
}

/* 
====================================================================================================
8. TH-SPEZIFISCHE FORMATIERUNG (HÖCHSTE PRIORITÄT - NACH ALLEN ANDEREN REGELN)
====================================================================================================
Diese Regeln stehen am Ende um maximale Spezifität zu gewährleisten
*/

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   TH-LIGHT-MODE FORMATIERUNG (Überschreibt alle vorherigen Regeln)
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
table th,
table thead th,
table tbody th,
table tfoot th {
    background-color: #d1e7f5 !important; /* Helleres Blau */
    color: #1f2937 !important;
    font-weight: 600 !important;
    text-align: center !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   TH-DARK-MODE FORMATIERUNG (Überschreibt alle vorherigen Dark-Mode-Regeln)
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
html[data-bs-theme="dark"] table th,
html[data-bs-theme="dark"] table thead th,
html[data-bs-theme="dark"] table tbody th,
html[data-bs-theme="dark"] table tfoot th,
html[data-bs-theme="dark"] .infobereich table th {
    background-color: #475569 !important; /* Deutlich heller als Zebra-Streifen */
    color: #f1f5f9 !important; /* Hellerer Text */
    font-weight: 600 !important;
    text-align: center !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————————
   TH in Zebra-Bereichen - Explizite Überschreibung
   —————————————————————————————————————————————————————————————————————————————————————————————————— */
table tbody tr:nth-child(even) th,
table tbody tr:nth-child(odd) th {
    background-color: #d1e7f5 !important; /* Light-Mode TH-Farbe */
    color: #1f2937 !important;
}

html[data-bs-theme="dark"] table tbody tr:nth-child(even) th,
html[data-bs-theme="dark"] table tbody tr:nth-child(odd) th {
    background-color: #475569 !important; /* Dark-Mode TH-Farbe */
    color: #f1f5f9 !important;
}

/*
====================================================================================================
ENDE: custom.css - TH-Regeln am Ende mit höchster Priorität für garantierte Formatierung
====================================================================================================
*/