/**
 * OptionFinder - Scanner Styles: VOLATILITY
 * 
 * Diese Datei enthält NUR Styles für Spalten der Kategorie "Volatilität":
 * - IV Rank Heatmap (4-Stufen Ampel)
 * - Badge Mode & Full-Cell Mode
 * - Display Mode Toggle Buttons
 * - Color Checkboxen für IV-Filter
 * - Filter Color Section
 * 
 * NICHT hier: Layout, Tabellen-Basis, andere Kategorien
 * 
 * @package OptionFinder_Member_Area
 * @version 3.4.1
 * @since 3.4.1 - FIX: Hint-Text Zeilenumbruch für IV und IV/HV Filter
 * @since 3.4.0 - NEU: IV und IV/HV Ratio Filter mit Schnellauswahl-Buttons, Farben und Dark Mode
 * @since 3.3.1 - FIX: Legende graue Quadrate ausgeblendet (::before), farbige auf 8x8px
 * @since 3.3.0 - Legende: Farbige Quadrate (legend-swatch) + schwarzer Text
 * @since 3.2.1 - FIX: IV Rank Grid vereinfacht - 3 Spalten, 4. Button automatisch linksbündig
 * @since 3.2.0 - IV Rank Grid: 3 Buttons pro Zeile, 4. Button linksbündig
 * @since 3.1.0 - NEU: IV Rank Quickselect Filter mit farbigen Buttons, Legende und Hint
 * @since 3.0.0 - Aufgeteilt aus dashboard-starter.css
 * 
 * @see dashboard-starter-base.css für Grundstruktur
 */

/* =====================================================
   IV RANK HEATMAP - 4-Stufen Ampel
   ===================================================== */

/* Basis fuer alle IV-Rank Zellen - IDENTISCH mit .viz-badge (Aktien-Scanner) */
.ivrank-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-align: center;
    min-width: 32px;
    min-height: 24px;
    line-height: 1.4;
    letter-spacing: 0.025em;
    white-space: nowrap;
    color: #ffffff;
}

/* ===== BADGE MODE - Gleiche Farben wie Aktien-Scanner ===== */

/* 0-29: Rot (zu niedrig, Praemien mager) */
.ivrank-cell--low {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(239, 68, 68, 0.3);
}

/* 51-80: Orange (erhoeht, Vorsicht) */
.ivrank-cell--medium-low {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.3);
}

/* 30-50: Gruen (Sweet Spot) */
.ivrank-cell--optimal {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.3);
}

/* 81+: Gelb/Warning (extrem, Event-getrieben) */
.ivrank-cell--high {
    background: linear-gradient(135deg, #eab308 0%, #fde047 100%);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(253, 224, 71, 0.3);
}

/* Transparent - wenn Farbfilter deaktiviert */
.ivrank-cell--transparent {
    background: transparent;
    color: inherit;
    font-weight: 500;
}

/* ===== FULL-CELL MODE - GLEICHE KRAEFTIGE FARBEN WIE BADGE ===== */

td.ivrank-fullcell {
    padding: 0 !important;
}

td.ivrank-fullcell .ivrank-cell {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0;
    margin: 0;
    font-size: 0.8125rem;
    background: transparent;
}

/* Full-Cell: Rot - KRAEFTIG (gleich wie Badge) */
td.ivrank-fullcell--low {
    background: #ef4444 !important;
}
td.ivrank-fullcell--low .ivrank-cell {
    color: #ffffff;
}

/* Full-Cell: Orange - KRAEFTIG (gleich wie Badge) */
td.ivrank-fullcell--medium-low {
    background: #f97316 !important;
}
td.ivrank-fullcell--medium-low .ivrank-cell {
    color: #ffffff;
}

/* Full-Cell: Gruen - KRAEFTIG (gleich wie Badge) */
td.ivrank-fullcell--optimal {
    background: #10b981 !important;
}
td.ivrank-fullcell--optimal .ivrank-cell {
    color: #ffffff;
}

/* Full-Cell: Gelb - KRAEFTIG (gleich wie Badge) */
td.ivrank-fullcell--high {
    background: #fde047 !important;
}
td.ivrank-fullcell--high .ivrank-cell {
    color: #ffffff;
}

/* ===== FILTER COLOR SECTION ===== */

.filter-color-section {
    padding: 0.75rem;
    border-top: 1px solid var(--ofma-color-slate-200);
}

.filter-color-section__title {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ofma-color-slate-500);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== DISPLAY MODE TOGGLE BUTTONS ===== */

.filter-display-mode {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ofma-color-slate-200);
}

.filter-display-mode__btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ofma-color-slate-300);
    border-radius: 4px;
    background: var(--ofma-color-white);
    color: var(--ofma-color-slate-600);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.filter-display-mode__btn:hover {
    border-color: var(--ofma-color-primary);
    color: var(--ofma-color-primary);
}

.filter-display-mode__btn.active {
    background: var(--ofma-color-primary);
    border-color: var(--ofma-color-primary);
    color: #ffffff;
}

.filter-display-mode__btn svg {
    width: 14px;
    height: 14px;
}

/* ===== COLOR CHECKBOXES für IV-Filter ===== */

/* Swatch-Farben (kraeftig wie Badges) */
.filter-color-option__swatch--low {
    background: #ef4444;
}

.filter-color-option__swatch--medium-low {
    background: #f97316;
}

.filter-color-option__swatch--optimal {
    background: #10b981;
}

.filter-color-option__swatch--high {
    background: #fde047;
}

/* =====================================================
   DARK MODE - VOLATILITY
   ===================================================== */
[data-theme="dark"] .filter-color-section {
    border-top-color: var(--ofma-color-slate-600);
}

[data-theme="dark"] .filter-color-section__title {
    color: var(--ofma-color-slate-400);
}

[data-theme="dark"] .filter-display-mode {
    border-bottom-color: var(--ofma-color-slate-600);
}

[data-theme="dark"] .filter-display-mode__btn {
    background: var(--ofma-color-slate-700);
    border-color: var(--ofma-color-slate-600);
    color: var(--ofma-color-slate-300);
}

[data-theme="dark"] .filter-display-mode__btn:hover {
    border-color: var(--ofma-color-primary);
    color: var(--ofma-color-primary);
}

[data-theme="dark"] .filter-display-mode__btn.active {
    background: var(--ofma-color-primary);
    border-color: var(--ofma-color-primary);
    color: #ffffff;
}

/* =====================================================
   IV RANK QUICKSELECT FILTER (v3.1.0)
   Stillhalter-Perspektive: Höhere IV = BESSER
   ===================================================== */

.filter-ivrank {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.filter-ivrank__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ofma-color-slate-700);
    margin-bottom: 0.25rem;
}

.filter-ivrank__quickselect {
    border-top: 1px solid var(--ofma-color-slate-200);
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.filter-ivrank__quickselect-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ofma-color-slate-600);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Kachel-Container - 3 Buttons oben, 1 Button unten links (gleiche Breite) */
.filter-ivrank__quickselect-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
}

/* Vierter Button: linksbündig, gleiche Breite wie die anderen */
.filter-ivrank__radio:nth-child(4) {
    grid-column: 1 / 2;
}

/* Kachel-Design */
.filter-ivrank__radio {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--ofma-color-slate-200);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--ofma-color-slate-50);
    text-align: center;
}

.filter-ivrank__radio:hover {
    background: var(--ofma-color-slate-200) !important;
    border-color: var(--ofma-color-slate-400) !important;
}

.filter-ivrank__radio input[type="radio"] {
    display: none;
}

.filter-ivrank__radio-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ofma-color-slate-700);
}

/* 0-20: Niedrig (Rot) - SCHLECHT fuer Stillhalter */
.filter-ivrank__radio--low {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.filter-ivrank__radio--low .filter-ivrank__radio-label {
    color: #ef4444;
}

/* 20-40: Maessig (Orange) */
.filter-ivrank__radio--medium-low {
    border-color: #f97316;
    background: rgba(249, 115, 22, 0.08);
}

.filter-ivrank__radio--medium-low .filter-ivrank__radio-label {
    color: #f97316;
}

/* 40-70: Optimal (Gruen) - GUT fuer Stillhalter */
.filter-ivrank__radio--optimal {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.filter-ivrank__radio--optimal .filter-ivrank__radio-label {
    color: #10b981;
}

/* 70-100: Sehr hoch (Gelb/Gold) - SEHR GUT fuer Stillhalter */
.filter-ivrank__radio--high {
    border-color: #fde047;
    background: rgba(253, 224, 71, 0.08);
}

.filter-ivrank__radio--high .filter-ivrank__radio-label {
    color: #eab308;
}

/* Checked States */
.filter-ivrank__radio--low:has(input:checked) {
    background: rgba(239, 68, 68, 0.2);
    box-shadow: inset 0 0 0 2px #ef4444;
}

.filter-ivrank__radio--medium-low:has(input:checked) {
    background: rgba(249, 115, 22, 0.2);
    box-shadow: inset 0 0 0 2px #f97316;
}

.filter-ivrank__radio--optimal:has(input:checked) {
    background: rgba(16, 185, 129, 0.2);
    box-shadow: inset 0 0 0 2px #10b981;
}

.filter-ivrank__radio--high:has(input:checked) {
    background: rgba(253, 224, 71, 0.2);
    box-shadow: inset 0 0 0 2px #fde047;
}

/* =====================================================
   IV RANK LEGENDE
   ===================================================== */

.filter-quickselect__legend--ivrank {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ofma-color-slate-200);
}

.filter-quickselect__legend--ivrank .filter-quickselect__legend-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--ofma-color-slate-700);
}

/* Graue Standard-Quadrate ausblenden für IV Rank Legende */
.filter-quickselect__legend--ivrank .filter-quickselect__legend-item::before {
    display: none;
}

/* Farbige Quadrate für Legende - gleiche Größe wie Standard (8x8px) */
.legend-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-swatch--low {
    background: #ef4444;
}

.legend-swatch--medium-low {
    background: #f97316;
}

.legend-swatch--optimal {
    background: #10b981;
}

.legend-swatch--high {
    background: #fde047;
}

/* =====================================================
   IV RANK HINT
   ===================================================== */

.filter-ivrank__hint {
    font-size: 0.6875rem;
    color: var(--ofma-color-success, #10b981);
    margin-top: 0.75rem;
    padding: 0.375rem 0.5rem;
    background: rgba(16, 185, 129, 0.08);
    border-radius: var(--ofma-radius-sm);
    line-height: 1.4;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.filter-ivrank__hint-icon {
    font-size: 0.75rem;
    margin-right: 0.25rem;
}

/* =====================================================
   DARK MODE - IV RANK QUICKSELECT
   ===================================================== */

[data-theme="dark"] .filter-ivrank__label {
    color: var(--ofma-color-slate-300);
}

[data-theme="dark"] .filter-ivrank__quickselect {
    border-top-color: var(--ofma-color-slate-600);
}

[data-theme="dark"] .filter-ivrank__quickselect-label {
    color: var(--ofma-color-slate-400);
}

[data-theme="dark"] .filter-ivrank__radio {
    background: var(--ofma-color-slate-700);
    border-color: var(--ofma-color-slate-600);
}

[data-theme="dark"] .filter-ivrank__radio-label {
    color: var(--ofma-color-slate-200);
}

/* Dark Mode - Button Farben */
[data-theme="dark"] .filter-ivrank__radio--low {
    background: rgba(239, 68, 68, 0.15);
    border-color: #f87171;
}

[data-theme="dark"] .filter-ivrank__radio--low .filter-ivrank__radio-label {
    color: #f87171;
}

[data-theme="dark"] .filter-ivrank__radio--medium-low {
    background: rgba(249, 115, 22, 0.15);
    border-color: #fb923c;
}

[data-theme="dark"] .filter-ivrank__radio--medium-low .filter-ivrank__radio-label {
    color: #fb923c;
}

[data-theme="dark"] .filter-ivrank__radio--optimal {
    background: rgba(16, 185, 129, 0.15);
    border-color: #34d399;
}

[data-theme="dark"] .filter-ivrank__radio--optimal .filter-ivrank__radio-label {
    color: #34d399;
}

[data-theme="dark"] .filter-ivrank__radio--high {
    background: rgba(253, 224, 71, 0.15);
    border-color: #fde047;
}

[data-theme="dark"] .filter-ivrank__radio--high .filter-ivrank__radio-label {
    color: #fde047;
}

/* Dark Mode Checked States */
[data-theme="dark"] .filter-ivrank__radio--low:has(input:checked) {
    background: rgba(239, 68, 68, 0.3);
    box-shadow: inset 0 0 0 2px #f87171;
}

[data-theme="dark"] .filter-ivrank__radio--medium-low:has(input:checked) {
    background: rgba(249, 115, 22, 0.3);
    box-shadow: inset 0 0 0 2px #fb923c;
}

[data-theme="dark"] .filter-ivrank__radio--optimal:has(input:checked) {
    background: rgba(16, 185, 129, 0.3);
    box-shadow: inset 0 0 0 2px #34d399;
}

[data-theme="dark"] .filter-ivrank__radio--high:has(input:checked) {
    background: rgba(253, 224, 71, 0.3);
    box-shadow: inset 0 0 0 2px #fde047;
}

/* Dark Mode - Legende */
[data-theme="dark"] .filter-quickselect__legend--ivrank {
    border-top-color: var(--ofma-color-slate-600);
}

[data-theme="dark"] .filter-quickselect__legend--ivrank .filter-quickselect__legend-item {
    color: var(--ofma-color-slate-300);
}

/* Graue Standard-Quadrate auch im Dark Mode ausblenden */
[data-theme="dark"] .filter-quickselect__legend--ivrank .filter-quickselect__legend-item::before {
    display: none;
}

[data-theme="dark"] .filter-ivrank__hint {
    background: rgba(16, 185, 129, 0.15);
    color: var(--ofma-color-success-light, #34d399);
}

/* =====================================================
   IV FILTER QUICKSELECT (v3.4.0)
   ===================================================== */

.filter-iv {
    width: 100%;
    max-width: 100%;
}

.filter-iv__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ofma-color-slate-700);
    margin-bottom: 0.25rem;
}

.filter-iv__quickselect {
    border-top: 1px solid var(--ofma-color-slate-200);
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.filter-iv__quickselect-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ofma-color-slate-600);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-iv__quickselect-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
}

.filter-iv__radio:nth-child(4) {
    grid-column: 1 / 2;
}

.filter-iv__radio {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--ofma-color-slate-200);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--ofma-color-slate-50);
}

.filter-iv__radio:hover {
    background: var(--ofma-color-slate-200) !important;
    border-color: var(--ofma-color-slate-400) !important;
}

.filter-iv__radio input[type="radio"] {
    display: none;
}

.filter-iv__radio-label {
    font-size: 0.75rem;
    font-weight: 500;
}

/* IV Farben - Stillhalter Perspektive */
.filter-iv__radio--low {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}
.filter-iv__radio--low .filter-iv__radio-label { color: #ef4444; }

.filter-iv__radio--normal {
    border-color: #f97316;
    background: rgba(249, 115, 22, 0.08);
}
.filter-iv__radio--normal .filter-iv__radio-label { color: #f97316; }

.filter-iv__radio--high {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}
.filter-iv__radio--high .filter-iv__radio-label { color: #10b981; }

.filter-iv__radio--veryhigh {
    border-color: #fde047;
    background: rgba(253, 224, 71, 0.08);
}
.filter-iv__radio--veryhigh .filter-iv__radio-label { color: #eab308; }

/* IV Checked States */
.filter-iv__radio--low:has(input:checked) {
    background: rgba(239, 68, 68, 0.2);
    box-shadow: inset 0 0 0 2px #ef4444;
}
.filter-iv__radio--normal:has(input:checked) {
    background: rgba(249, 115, 22, 0.2);
    box-shadow: inset 0 0 0 2px #f97316;
}
.filter-iv__radio--high:has(input:checked) {
    background: rgba(16, 185, 129, 0.2);
    box-shadow: inset 0 0 0 2px #10b981;
}
.filter-iv__radio--veryhigh:has(input:checked) {
    background: rgba(253, 224, 71, 0.2);
    box-shadow: inset 0 0 0 2px #fde047;
}

/* IV Legende */
.filter-quickselect__legend--iv {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ofma-color-slate-200);
}

.filter-quickselect__legend--iv .filter-quickselect__legend-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--ofma-color-slate-700);
}

.filter-quickselect__legend--iv .filter-quickselect__legend-item::before {
    display: none;
}

.legend-swatch--iv-low { background: #ef4444; }
.legend-swatch--iv-normal { background: #f97316; }
.legend-swatch--iv-high { background: #10b981; }
.legend-swatch--iv-veryhigh { background: #fde047; }

/* IV Hint */
.filter-iv__hint {
    font-size: 0.6875rem;
    color: var(--ofma-color-success, #10b981);
    margin-top: 0.75rem;
    padding: 0.375rem 0.5rem;
    background: rgba(16, 185, 129, 0.08);
    border-radius: var(--ofma-radius-sm);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.filter-iv__hint-icon {
    margin-right: 0.25rem;
}

/* =====================================================
   IV/HV RATIO FILTER QUICKSELECT (v3.4.0)
   ===================================================== */

.filter-ivhv {
    width: 100%;
    max-width: 100%;
}

.filter-ivhv__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ofma-color-slate-700);
    margin-bottom: 0.25rem;
}

.filter-ivhv__quickselect {
    border-top: 1px solid var(--ofma-color-slate-200);
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.filter-ivhv__quickselect-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ofma-color-slate-600);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-ivhv__quickselect-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
}

.filter-ivhv__radio:nth-child(4) {
    grid-column: 1 / 2;
}

.filter-ivhv__radio {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--ofma-color-slate-200);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--ofma-color-slate-50);
}

.filter-ivhv__radio:hover {
    background: var(--ofma-color-slate-200) !important;
    border-color: var(--ofma-color-slate-400) !important;
}

.filter-ivhv__radio input[type="radio"] {
    display: none;
}

.filter-ivhv__radio-label {
    font-size: 0.75rem;
    font-weight: 500;
}

/* IV/HV Farben - Stillhalter Perspektive (IV > HV = GUT) */
.filter-ivhv__radio--bad {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}
.filter-ivhv__radio--bad .filter-ivhv__radio-label { color: #ef4444; }

.filter-ivhv__radio--neutral {
    border-color: var(--ofma-color-slate-400);
    background: rgba(100, 116, 139, 0.08);
}
.filter-ivhv__radio--neutral .filter-ivhv__radio-label { color: var(--ofma-color-slate-600); }

.filter-ivhv__radio--good {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}
.filter-ivhv__radio--good .filter-ivhv__radio-label { color: #10b981; }

.filter-ivhv__radio--excellent {
    border-color: #059669;
    background: rgba(5, 150, 105, 0.08);
}
.filter-ivhv__radio--excellent .filter-ivhv__radio-label { color: #059669; }

/* IV/HV Checked States */
.filter-ivhv__radio--bad:has(input:checked) {
    background: rgba(239, 68, 68, 0.2);
    box-shadow: inset 0 0 0 2px #ef4444;
}
.filter-ivhv__radio--neutral:has(input:checked) {
    background: rgba(100, 116, 139, 0.2);
    box-shadow: inset 0 0 0 2px var(--ofma-color-slate-400);
}
.filter-ivhv__radio--good:has(input:checked) {
    background: rgba(16, 185, 129, 0.2);
    box-shadow: inset 0 0 0 2px #10b981;
}
.filter-ivhv__radio--excellent:has(input:checked) {
    background: rgba(5, 150, 105, 0.2);
    box-shadow: inset 0 0 0 2px #059669;
}

/* IV/HV Legende */
.filter-quickselect__legend--ivhv {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ofma-color-slate-200);
}

.filter-quickselect__legend--ivhv .filter-quickselect__legend-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--ofma-color-slate-700);
}

.filter-quickselect__legend--ivhv .filter-quickselect__legend-item::before {
    display: none;
}

.legend-swatch--ivhv-bad { background: #ef4444; }
.legend-swatch--ivhv-neutral { background: var(--ofma-color-slate-400); }
.legend-swatch--ivhv-good { background: #10b981; }
.legend-swatch--ivhv-excellent { background: #059669; }

/* IV/HV Hint */
.filter-ivhv__hint {
    font-size: 0.6875rem;
    color: var(--ofma-color-success, #10b981);
    margin-top: 0.75rem;
    padding: 0.375rem 0.5rem;
    background: rgba(16, 185, 129, 0.08);
    border-radius: var(--ofma-radius-sm);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.filter-ivhv__hint-icon {
    margin-right: 0.25rem;
}

/* =====================================================
   DARK MODE - IV & IV/HV FILTER
   ===================================================== */

[data-theme="dark"] .filter-iv__label,
[data-theme="dark"] .filter-ivhv__label {
    color: var(--ofma-color-slate-300);
}

[data-theme="dark"] .filter-iv__quickselect,
[data-theme="dark"] .filter-ivhv__quickselect {
    border-top-color: var(--ofma-color-slate-600);
}

[data-theme="dark"] .filter-iv__quickselect-label,
[data-theme="dark"] .filter-ivhv__quickselect-label {
    color: var(--ofma-color-slate-400);
}

[data-theme="dark"] .filter-iv__radio,
[data-theme="dark"] .filter-ivhv__radio {
    background: var(--ofma-color-slate-700);
    border-color: var(--ofma-color-slate-600);
}

[data-theme="dark"] .filter-quickselect__legend--iv,
[data-theme="dark"] .filter-quickselect__legend--ivhv {
    border-top-color: var(--ofma-color-slate-600);
}

[data-theme="dark"] .filter-quickselect__legend--iv .filter-quickselect__legend-item,
[data-theme="dark"] .filter-quickselect__legend--ivhv .filter-quickselect__legend-item {
    color: var(--ofma-color-slate-300);
}

[data-theme="dark"] .filter-iv__hint,
[data-theme="dark"] .filter-ivhv__hint {
    background: rgba(16, 185, 129, 0.15);
    color: var(--ofma-color-success-light, #34d399);
}

/* Dark Mode IV Button Farben */
[data-theme="dark"] .filter-iv__radio--low {
    background: rgba(239, 68, 68, 0.15);
    border-color: #f87171;
}
[data-theme="dark"] .filter-iv__radio--low .filter-iv__radio-label { color: #f87171; }

[data-theme="dark"] .filter-iv__radio--normal {
    background: rgba(249, 115, 22, 0.15);
    border-color: #fb923c;
}
[data-theme="dark"] .filter-iv__radio--normal .filter-iv__radio-label { color: #fb923c; }

[data-theme="dark"] .filter-iv__radio--high {
    background: rgba(16, 185, 129, 0.15);
    border-color: #34d399;
}
[data-theme="dark"] .filter-iv__radio--high .filter-iv__radio-label { color: #34d399; }

[data-theme="dark"] .filter-iv__radio--veryhigh {
    background: rgba(253, 224, 71, 0.15);
    border-color: #fde047;
}
[data-theme="dark"] .filter-iv__radio--veryhigh .filter-iv__radio-label { color: #fde047; }

/* Dark Mode IV/HV Button Farben */
[data-theme="dark"] .filter-ivhv__radio--bad {
    background: rgba(239, 68, 68, 0.15);
    border-color: #f87171;
}
[data-theme="dark"] .filter-ivhv__radio--bad .filter-ivhv__radio-label { color: #f87171; }

[data-theme="dark"] .filter-ivhv__radio--neutral {
    background: rgba(100, 116, 139, 0.15);
    border-color: var(--ofma-color-slate-500);
}
[data-theme="dark"] .filter-ivhv__radio--neutral .filter-ivhv__radio-label { color: var(--ofma-color-slate-400); }

[data-theme="dark"] .filter-ivhv__radio--good {
    background: rgba(16, 185, 129, 0.15);
    border-color: #34d399;
}
[data-theme="dark"] .filter-ivhv__radio--good .filter-ivhv__radio-label { color: #34d399; }

[data-theme="dark"] .filter-ivhv__radio--excellent {
    background: rgba(5, 150, 105, 0.15);
    border-color: #10b981;
}
[data-theme="dark"] .filter-ivhv__radio--excellent .filter-ivhv__radio-label { color: #10b981; }

/* =====================================================
   IV/HV RATIO ZELLEN-DARSTELLUNG (v3.4.0)
   ===================================================== */

.ivhv-ratio {
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.8125rem;
}

/* Sehr gut: > 25% - Starke Ueberbewertung */
.ivhv-ratio--excellent {
    color: #059669;
    background: rgba(5, 150, 105, 0.12);
}

/* Gut: 10-25% - Moderate Ueberbewertung */
.ivhv-ratio--good {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}

/* Neutral: 0-10% - Fair bewertet */
.ivhv-ratio--neutral {
    color: var(--ofma-color-slate-600);
    background: rgba(100, 116, 139, 0.08);
}

/* Schlecht: < 0% - IV unter HV */
.ivhv-ratio--bad {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

/* Dark Mode */
[data-theme="dark"] .ivhv-ratio--excellent {
    color: #10b981;
    background: rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .ivhv-ratio--good {
    color: #34d399;
    background: rgba(52, 211, 153, 0.15);
}

[data-theme="dark"] .ivhv-ratio--neutral {
    color: var(--ofma-color-slate-400);
    background: rgba(100, 116, 139, 0.15);
}

[data-theme="dark"] .ivhv-ratio--bad {
    color: #f87171;
    background: rgba(248, 113, 113, 0.2);
}