/* results.css - Sortiert & Strukturiert */

/* =========================================
   1. FILTER TOOLBAR (Sticky Oben)
   ========================================= */
.filter-toolbar {
    background-color: var(--sidebar-bg-color, #144018); 
    background-image: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
    border: none;
    border-radius: 16px 16px 0 0; 
    padding: 15px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 1040;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Labels & Text in der Toolbar */
.filter-toolbar label, 
.filter-toolbar .input-group-text {
    color: #fff;
    border-color: rgba(255,255,255,0.3);
    background-color: rgba(255,255,255,0.1); 
}

/* -----------------------------------------
   Dropdowns & Inputs in der Toolbar (Einheitlich für Light & Dark Mode)
   ----------------------------------------- */

/* 1. Hintergrund des Menüs auf Hell zwingen (Light & Dark Mode) */
.filter-toolbar .bootstrap-select .dropdown-menu,
[data-bs-theme="dark"] .filter-toolbar .bootstrap-select .dropdown-menu {
    background-color: #f8f9fa !important;
}

/* 2. Textfarbe der Optionen auf Dunkel zwingen (Light & Dark Mode) */
.filter-toolbar .bootstrap-select .dropdown-menu li a,
.filter-toolbar .bootstrap-select .dropdown-menu li a span.text,
[data-bs-theme="dark"] .filter-toolbar .bootstrap-select .dropdown-menu li a,
[data-bs-theme="dark"] .filter-toolbar .bootstrap-select .dropdown-menu li a span.text {
    color: #212529 !important;
}

/* 3. Hover-Effekt auf Listenelemente (Helles Mintgrün) */
.filter-toolbar .bootstrap-select .dropdown-menu li a:hover,
.filter-toolbar .bootstrap-select .dropdown-menu li a:hover span.text,
[data-bs-theme="dark"] .filter-toolbar .bootstrap-select .dropdown-menu li a:hover,
[data-bs-theme="dark"] .filter-toolbar .bootstrap-select .dropdown-menu li a:hover span.text {
    background-color: rgba(46, 204, 113, 0.15) !important;
    color: #144018 !important;
}

/* 4. Aktives / Ausgewähltes Element (Grüner Hintergrund, dunkle Schrift) */
.filter-toolbar .bootstrap-select .dropdown-menu li.selected a,
.filter-toolbar .bootstrap-select .dropdown-menu li.active a,
[data-bs-theme="dark"] .filter-toolbar .bootstrap-select .dropdown-menu li.selected a,
[data-bs-theme="dark"] .filter-toolbar .bootstrap-select .dropdown-menu li.active a {
    background-color: rgba(46, 204, 113, 0.3) !important;
}

.filter-toolbar .bootstrap-select .dropdown-menu li.selected a span.text,
.filter-toolbar .bootstrap-select .dropdown-menu li.active a span.text,
[data-bs-theme="dark"] .filter-toolbar .bootstrap-select .dropdown-menu li.selected a span.text,
[data-bs-theme="dark"] .filter-toolbar .bootstrap-select .dropdown-menu li.active a span.text {
    color: #144018 !important; /* Text bleibt dunkelgrün, auch bei Auswahl */
}

/* 5. Der Blaue Haken - radikal auf Grün zwingen */
/* Bootstrap Select zeichnet den Haken oft über den Rahmen eines Pseudo-Elements (::after) */
.filter-toolbar .bootstrap-select .dropdown-menu li a .check-mark,
.filter-toolbar .bootstrap-select .dropdown-menu li a .check-mark::after,
[data-bs-theme="dark"] .filter-toolbar .bootstrap-select .dropdown-menu li a .check-mark,
[data-bs-theme="dark"] .filter-toolbar .bootstrap-select .dropdown-menu li a .check-mark::after {
    border-color: #2c5e32 !important; 
    color: #2c5e32 !important; 
}

/* 6. Alle/Keine Buttons (Kein Blau mehr!) */
.filter-toolbar .bootstrap-select .bs-actionsbox .btn,
[data-bs-theme="dark"] .filter-toolbar .bootstrap-select .bs-actionsbox .btn {
    color: #2c5e32 !important;
    background-color: transparent !important;
    border: none !important;
}
.filter-toolbar .bootstrap-select .bs-actionsbox .btn:hover,
[data-bs-theme="dark"] .filter-toolbar .bootstrap-select .bs-actionsbox .btn:hover {
    color: #144018 !important;
    text-decoration: underline !important;
}

/* --- SEARCH ICON BOX (Falls eine Suchleiste in der Toolbar ist) --- */
.search-icon-box { 
    border-color: rgba(255, 255, 255, 0.1) !important; 
    background-color: rgba(0, 0, 0, 0.25) !important; 
    color: #ffffff !important; 
}

/* =========================================
   2. TABELLEN-CONTAINER (Wrapper)
   ========================================= */
.table-container {
    position: relative;
    border: none; 
    border-radius: 0 0 16px 16px; 
    overflow: hidden; 
    background-color: var(--app-card-bg);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - 180px);
}


/* =========================================
   3. STICKY HEADERS & STRUKTUR
   ========================================= */

/* A. Der Header (Oben - Grün) */
.sticky-header th {
    position: sticky;
    top: 0;
    background-color: var(--sidebar-bg-color, #144018) !important; 
    color: #fff !important; 
    z-index: 100;
    border-bottom: 4px solid rgba(0,0,0,0.2); 
    border-right: 1px solid rgba(255,255,255,0.1); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

/* B. Die Namens-Spalte (Links - Fixiert) */
.col-sticky-left {
    position: sticky !important;
    left: 0;
    z-index: 110 !important; 
    background-color: var(--app-card-bg) !important;
    border-right: 2px solid var(--app-border) !important; 
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

/* C. Die "Super-Ecke" (Oben Links - Grün & Fixiert) */
.sticky-header th.col-sticky-left {
    z-index: 120 !important; 
    background-color: var(--sidebar-bg-color, #144018) !important;
    color: #fff !important;
    border-right: 1px solid rgba(255,255,255,0.2) !important;
}

/* D. Tabellen-Rahmen (Global) */
.table-results-compact,
.table-results-compact th,
.table-results-compact td {
    border-color: var(--app-border) !important; 
}

/* Dark Mode: Sticky & Header Fixes */
[data-bs-theme="dark"] .sticky-header th { 
    background-color: #0e2e11 !important; 
    color: #ecf0f1 !important; 
}
[data-bs-theme="dark"] .sticky-header th.col-sticky-left { 
    background-color: #0e2e11 !important; 
}


/* =========================================
   4. SPALTEN-DEFINITIONEN (Breite & Farbe)
   ========================================= */

/* Namens-Spalte */
.col-name {
    width: 160px; min-width: 160px; max-width: 160px;
    white-space: nowrap; overflow: hidden;
    background-color: var(--app-card-bg); 
    z-index: 10; 
}
.name-container { display: flex; flex-direction: column; justify-content: center; padding-left: 5px; }
.name-main { font-size: 0.9rem; font-weight: 700; line-height: 1.1; color: var(--app-text); }
.name-age { font-size: 0.8rem; color: var(--app-muted); margin-top: 1px; }

/* Disziplin & Schwimm Spalten (Heller Grünton) */
.col-discipline, 
.col-swimming {
    background-color: rgba(20, 64, 24, 0.03); 
    border-right: 1px solid var(--app-border); 
    vertical-align: middle; 
}
.col-discipline { width: 170px; min-width: 170px; text-align: center; }
.col-swimming { width: 100px; min-width: 100px; max-width: 100px; padding: 4px !important; }

/* Ergebnis Spalte */
.col-result {
    width: 90px; min-width: 90px; text-align: center;
    background-color: var(--app-card-bg); 
}
.col-hidden { display: none !important; }

/* Dark Mode: Spalten */
[data-bs-theme="dark"] .col-discipline, 
[data-bs-theme="dark"] .col-swimming {
    background-color: rgba(46, 204, 113, 0.05) !important; 
}


/* =========================================
   5. INPUT FIELDS IN ZELLEN
   ========================================= */
/* Wir nutzen jetzt zu 100% die dynamischen App-Variablen! */
.col-discipline .form-select,
.col-discipline .form-control,
.col-swimming .form-select {
    background-color: var(--input-bg); 
    border-color: var(--input-border);
    color: var(--input-text);
    transition: all 0.2s ease-in-out;
}

/* Grüner Fokus */
.col-discipline .form-select:focus,
.col-discipline .form-control:focus,
.col-swimming .form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--osa-green); 
    color: var(--input-text);
    box-shadow: 0 0 0 0.2rem var(--input-focus-shadow); 
}

/* Dark Mode: Select Dropdown Pfeil anpassen */
[data-bs-theme="dark"] .col-discipline .form-select,
[data-bs-theme="dark"] .col-swimming .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}


/* =========================================
   6. MEDAILLEN LOGIK & GESAMTPUNKTE
   ========================================= */
/* Die Grundbox des "Stempels" (Punkte / Gesamt) */
.result-badge-box {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 8px;
    width: 70px; 
    padding: 2px 4px;
    border: 1px solid #ced4da !important;
    
    background-color: #f8f9fa !important; 
    color: #212529 !important; 
    
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.badge-label-small {
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.5px;
    margin-bottom: -2px; text-transform: uppercase;
    color: #6c757d !important; /* Immer ein dunkles Grau für das Label */
}

.result-badge-box:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1);
}

tr.bg-gold-transparent td.col-sticky-left { border-left: 5px solid #ffdc2e !important; }
tr.bg-silver-transparent td.col-sticky-left { border-left: 5px solid #adb5bd !important; }
tr.bg-bronze-transparent td.col-sticky-left { border-left: 5px solid #d98a4e !important; }

/* Gold Stempel */
.medal-gold, .bg-gold-transparent { 
    background: linear-gradient(180deg, #ffed85 0%, #ffdc2e 100%) !important; 
    color: #5c4a00 !important; /* FIX: Immer dunkle Schrift */
    border: 1px solid #d4af37 !important; border-left: 4px solid #d4af37 !important; 
}
/* Silber Stempel */
.medal-silber, .medal-silver, .bg-silver-transparent { 
    background: linear-gradient(180deg, #ffffff 0%, #e9ecef 100%) !important; 
    color: #343a40 !important; /* FIX: Immer dunkle Schrift */
    border: 1px solid #adb5bd !important; border-left: 4px solid #adb5bd !important;
}
/* Bronze Stempel */
.medal-bronze, .bg-bronze-transparent { 
    background: linear-gradient(180deg, #f2b383 0%, #d98a4e 100%) !important; 
    color: #4a2a10 !important; /* FIX: Immer dunkle Schrift (Dunkelbraun) statt Weiß */
    border: 1px solid #a65e26 !important; border-left: 4px solid #a65e26 !important;
}

/* Hintergründe für Namen (Transparent) */
.bg-gold-transparent { background-color: rgba(255, 220, 46, 0.15) !important; border-left: 4px solid #ffdc2e !important; }
.bg-silver-transparent { background-color: rgba(233, 236, 239, 0.4) !important; border-left: 4px solid #adb5bd !important; }
.bg-bronze-transparent { background-color: rgba(217, 138, 78, 0.15) !important; border-left: 4px solid #d98a4e !important; }

/* Dark Mode: Transparente Medaillen-Reihen dimmen (aber Schrift dunkel lassen!) */
[data-bs-theme="dark"] .bg-gold-transparent { background-color: rgba(255, 220, 46, 0.15) !important; color: #5c4a00 !important;}
[data-bs-theme="dark"] .bg-silver-transparent { background-color: rgba(233, 236, 239, 0.2) !important; color: #343a40 !important;}
[data-bs-theme="dark"] .bg-bronze-transparent { background-color: rgba(217, 138, 78, 0.2) !important; color: #4a2a10 !important;}

/* =========================================
   7. UI HELFER (Schwimmen & Hinweise)
   ========================================= */

/* Schwimm-Container */
.swimming-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }

/* Checkmark Box */
.swim-badge-container { display: flex; flex-direction: column; align-items: center; color: var(--osa-green); }
.swim-info-text { font-size: 0.8rem; line-height: 1.1; white-space: normal; word-wrap: break-word; text-align: center; display: block; color: var(--app-text); }

/* Mülleimer Icon */
.btn-delete-swimming {
    border: none; background: transparent !important; color: #dc3545 !important; 
    opacity: 0.6; font-size: 0.9rem; cursor: pointer; padding: 2px 6px; margin-top: 4px; transition: all 0.2s;
}
.btn-delete-swimming:hover { opacity: 1; transform: scale(1.2); background: rgba(220, 53, 69, 0.1) !important; border-radius: 4px; }
.btn-delete-swimming-custom { font-size: 0.7rem; }

/* Anforderungen (kleine Zahlen unter Input) */
.req-hint { display: flex; justify-content: center; gap: 8px; font-size: 0.85rem; font-weight: 600; margin-top: 4px; color: var(--app-muted); }
.req-val-b { color: #d98a4e; }
.req-val-s { color: #7f8c8d; } 
.req-val-g { color: #b8860b; }
.req-unit { font-weight: normal; font-size: 0.75rem; color: var(--app-muted); margin-left: 2px; }

/* Dark Mode Hints */
[data-bs-theme="dark"] .req-val-s { color: #adb5bd; }
[data-bs-theme="dark"] .req-val-g { color: #ffda6a; }

/* Card Hover Effekt */
.exam-card { transition: transform 0.2s, box-shadow 0.2s; }
.exam-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }

/* Typografie Helfer */
.x-small { font-size: 0.7rem; letter-spacing: 0.5px; }

/* Medaillen Bubbles */
.medal-circle {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: bold; color: #fff; font-size: 1.1rem; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.bg-gold { background: linear-gradient(135deg, #f1c40f, #f39c12); color: #fff; }
.bg-silver { background: linear-gradient(135deg, #bdc3c7, #95a5a6); color: #fff; }
.bg-bronze { background: linear-gradient(135deg, #e67e22, #d35400); color: #fff; }