/* --- BASIS LAYOUT --- */
body {
    font-family: system-ui, -apple-system, sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding-bottom: 50px; /* Platz unten */

    /* Flex-Column sorgt dafür, dass alle Kinder untereinander und zentriert sind */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

/* --- HEADER (Passt sich der Eingabe-Breite an) --- */
.header {
    width: 90vw;
    max-width: 1000px; /* Gleiche Breite wie das Formular */
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.logo {
    max-width: 220px;
    height: auto;
    display: block;
    margin: 0 auto 1rem auto;
}

/* --- CONTAINER LOGIK --- */

/* Standard Container für Eingabe und Ergebnis */
.container-narrow {
    width: 90vw;
    max-width: 1000px;
    box-sizing: border-box;
}

/* Breiter Container NUR für die Tabelle */
.container-wide {
    width: 90vw;
    /* Kein max-width oder sehr groß, damit die Tabelle Platz hat */
    max-width: 1800px;
    box-sizing: border-box;
}

/* Versteckt Sektionen standardmäßig (wird per JS eingeblendet) */
.view-section {
    display: none;
    /* Animation beim Einblenden */
    animation: fadeIn 0.3s ease-out;
}

/* Explizit: Wenn die ID aktiv ist, wird sie als Block angezeigt */
/* Das JS setzt style="display: block", das überschreibt dies, aber gut als Fallback */

/* --- FORMULAR STYLING (Dein bestehendes Design) --- */
fieldset {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

legend {
    font-weight: 700;
    background-color: #b39962;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
}

input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Wichtig damit Padding nicht die Breite sprengt */
}

input[readonly] {
    background-color: #f9f9f9;
    color: #666;
    border-color: #e0e0e0;
    cursor: default;
}

/* Grid System für Formulare */
.grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
}

/* Responsive: Auf Handys untereinander */
@media (max-width: 700px) {
    .grid-2x2 {
        grid-template-columns: 1fr;
    }
}

/* --- SEGMENTED CONTROL (Navigation) --- */
.segmented-control {
    display: inline-flex;
    background: #e0e0e0;
    padding: 4px;
    border-radius: 8px;
    margin: 10px auto;
}

.segmented-control input[type="radio"] {
    display: none;
}

.segmented-control label {
    padding: 8px 24px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    margin: 0;
    font-weight: 600;
    color: #555;
}

.segmented-control input[type="radio"]:checked + label {
    background: #b39962;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- TABELLEN STYLING (Das optimierte von vorhin) --- */
#table-container {
    display: block;
    width: 100%; /* Füllt den container-wide */
    max-height: 75vh;
    overflow: auto;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 4px;
    position: relative;
}

#detail-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    font-size: 0.85em;
    font-family: system-ui, sans-serif;
}

#detail-table th, #detail-table td {
    width: 150px;
    min-width: 150px;
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Sticky Header */
#detail-table thead th {
    position: sticky;
    top: 0;
    z-index: 30;
    background-color: #b39962;
    color: white;
}

/* Sticky Erste Spalte */
#detail-table tbody td:first-child,
#detail-table thead th:first-child {
    position: sticky;
    left: 0;
    border-right: 2px solid #b39962;
}

#detail-table tbody td:first-child {
    z-index: 20;
    background-color: #f9f9f9; /* Deckende Farbe */
    font-weight: bold;
}

#detail-table thead th:first-child {
    z-index: 40;
    background-color: #b39962;
}

/* Hover Fix (Deckend bleiben) */
#detail-table tbody tr:hover td { background-color: rgba(179, 153, 98, 0.15); }
#detail-table tbody tr:hover td:first-child { background-color: #e8e4d9; }


/* --- LIQUIDITÄTS TABELLEN (Ergebnisse) --- */
.liquidity-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.liquidity-table td { padding: 6px 8px; border-bottom: 1px solid #eee; }
.liquidity-table input { text-align: right; border: none; background: transparent; font-weight: 600; }
.liquidity-table .negative { color: #d9534f; }
.liquidity-table .positive-bold { color: #28a745; font-size: 1.1em; font-weight: bold; }
.liquidity-table .total-row { border-top: 2px solid #333; }
.text-right { text-align: right; }
.subtitle-top { font-size: 0.85em; color: #777; margin-top: -10px; margin-bottom: 15px; display: block;}

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

/* --- CONTAINER --- */
#table-container {
    display: block;
    width: 100%;
    max-height: 75vh;

    /* WICHTIG für Chrome:
       'scroll' erzwingt, dass der Schacht (Track) IMMER da ist,
       auch wenn gerade nicht gescrollt wird.
       'auto' blendet ihn oft aus. */
    overflow-x: scroll;
    overflow-y: auto;

    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 4px;
    position: relative;

    /* Firefox Support */
    scrollbar-width: auto;
    scrollbar-color: #b39962 #f0f0f0;
}

/* --- SCROLLBAR STYLING (Chrome, Edge, Safari) --- */

#table-container::-webkit-scrollbar {
    -webkit-appearance: none; /* Schaltet natives Mac/Windows Overlay-Verhalten aus */
    width: 18px;              /* Vertikale Breite */
    height: 18px;             /* Horizontale Höhe (für dich wichtig) */
}

#table-container::-webkit-scrollbar-track {
    background: #f0f0f0;      /* Die Rinne ist nun immer sichtbar */
    border-radius: 0px;       /* Eckig lassen, sieht professioneller aus bei Tabellen */
    border-top: 1px solid #ddd; /* Trennlinie zum Inhalt */
}

#table-container::-webkit-scrollbar-thumb {
    background-color: #b39962; /* Dein Gold-Ton */
    border-radius: 9px;
    border: 4px solid #f0f0f0; /* Weißer Rand für "Schwebe-Effekt" */

    /* Wichtig für sauberes Rendering in Chrome: */
    background-clip: content-box;
    min-height: 50px;          /* Griff ist immer gut greifbar */
    min-width: 50px;
}

#table-container::-webkit-scrollbar-thumb:hover {
    background-color: #927d50; /* Dunkler beim Hover */
    border-width: 3px;         /* Wird etwas dicker beim Drüberfahren */
}

/* Die kleine Ecke unten rechts, wo sich X und Y treffen */
#table-container::-webkit-scrollbar-corner {
    background-color: #e0e0e0;
}

#detail-table tbody tr:nth-child(20) td,
#detail-table tbody tr:nth-child(30) td,
#detail-table tbody tr:nth-child(40) td{
    /* Ein dickerer, doppelter Boden in Akzentfarbe */
    border-bottom: 4px double #b39962;
}

/* --- ZELLEN (Zentriert & Gleich breit) --- */
#detail-table th,
#detail-table td {
    width: 150px;
    min-width: 150px;
    padding: 10px 8px;
    text-align: center; /* WICHTIG: Alle Inhalte zentrieren */
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    cursor: default; /* Zeigt, dass man hier hovern kann */
    position: relative; /* Nötig für z-index Spielereien */
}

/* --- NEGATIVE ZAHLEN (Sanftes Rot) --- */
.negative-num {
    color: #e57373; /* Sanftes, aber gut lesbares Rot */
    /* font-weight: bold; */ /* Optional, falls gewünscht */
}

/* --- SPALTEN HIGHLIGHT (Wird per JS gesteuert) --- */
.hover-col {
    background-color: rgba(179, 153, 98, 0.1) !important; /* Helles Gold, !important überschreibt Zebra */
}

/* Damit die Schnittmenge (Zeile + Spalte) etwas dunkler wirkt */
#detail-table tbody tr:hover td.hover-col {
    background-color: rgba(179, 153, 98, 0.25) !important;
}

/* Fix für die sticky erste Spalte, damit sie ihre Deckkraft behält */
#detail-table tbody td.hover-col:first-child {
    background-color: #eae6db !important; /* Deckendes Beige statt transparent */
}