/**
 * OptionFinder - Scanner Styles: PRICES & DATES
 * 
 * Diese Datei enthält NUR Styles für Spalten der Kategorie "Preise & Laufzeit":
 * - DTE-Filter (Days to Expiration)
 * - Verfall-Datums-Filter
 * - Spread-Filter (Bid-Ask)
 * - Distance-Filter (Abstand Strike %)
 * - Schnellauswahl-Legende (gemeinsam genutzt)
 * 
 * NICHT hier: Layout, Tabellen-Basis, andere Kategorien
 * 
 * @package OptionFinder_Member_Area
 * @version 3.0.0
 * @since 3.0.0 - Aufgeteilt aus dashboard-starter.css
 * 
 * @see dashboard-starter-base.css für Grundstruktur
 */

/* =====================================================
   DTE-FILTER (Days to Expiration)
   ===================================================== */

.filter-dte {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

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

.filter-dte__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 */
.filter-dte__quickselect-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

/* Kachel-Design */
.filter-dte__radio {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    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-dte__radio:hover {
    background: var(--ofma-color-slate-100);
    border-color: var(--ofma-color-slate-300);
}

.filter-dte__radio input[type="radio"] {
    margin-right: 0.375rem;
    accent-color: var(--ofma-color-primary);
}

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

/* Empfohlene Option hervorheben (30-45, 45-60) */
.filter-dte__radio--recommended {
    border-color: var(--ofma-color-primary);
    background: rgba(59, 130, 246, 0.05);
}

.filter-dte__radio--recommended .filter-dte__radio-label {
    color: var(--ofma-color-primary);
    font-weight: 600;
}

/* Hinweistext für empfohlene DTE */
.filter-dte__hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    color: var(--ofma-color-primary);
    margin-top: 0.75rem;
    padding: 0.375rem 0.5rem;
    background: rgba(59, 130, 246, 0.08);
    border-radius: var(--ofma-radius-sm);
}

.filter-dte__hint-icon {
    font-size: 0.75rem;
}

/* Ausgewaehlte Radio Option */
.filter-dte__radio:has(input:checked) {
    background: var(--ofma-color-primary);
    border-color: var(--ofma-color-primary);
}

.filter-dte__radio:has(input:checked) .filter-dte__radio-label {
    color: white;
}

/* Dark Mode - DTE Filter */
[data-theme="dark"] .filter-dte__label {
    color: var(--ofma-color-slate-300);
}

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

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

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

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

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

[data-theme="dark"] .filter-dte__radio--recommended {
    border-color: var(--ofma-color-primary);
    background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .filter-dte__radio--recommended .filter-dte__radio-label {
    color: var(--ofma-color-primary-light, #60a5fa);
}

[data-theme="dark"] .filter-dte__hint {
    background: rgba(59, 130, 246, 0.15);
    color: var(--ofma-color-primary-light, #60a5fa);
}

/* =====================================================
   DATUMS-FILTER (Verfall) mit Schnellauswahl
   ===================================================== */

.filter-date-range {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filter-date-range__quickselect {
    margin-bottom: 0.5rem;
}

.filter-date-range__quickselect-label,
.filter-date-range__custom-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-date-range__quickselect-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.filter-date-range__radio {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    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-date-range__radio:hover {
    background: var(--ofma-color-slate-100);
    border-color: var(--ofma-color-slate-300);
}

.filter-date-range__radio input[type="radio"] {
    margin-right: 0.375rem;
    accent-color: var(--ofma-color-primary);
}

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

/* Empfohlene Optionen hervorheben */
.filter-date-range__radio--recommended {
    border-color: var(--ofma-color-primary);
    background: rgba(59, 130, 246, 0.05);
}

.filter-date-range__radio--recommended .filter-date-range__radio-label {
    color: var(--ofma-color-primary);
}

/* Ausgewaehlte Radio Option */
.filter-date-range__radio:has(input:checked) {
    background: var(--ofma-color-primary);
    border-color: var(--ofma-color-primary);
}

.filter-date-range__radio:has(input:checked) .filter-date-range__radio-label {
    color: white;
}

/* Hinweistext */
.filter-date-range__hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    color: var(--ofma-color-primary);
    margin-top: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: rgba(59, 130, 246, 0.08);
    border-radius: var(--ofma-radius-sm);
}

.filter-date-range__hint-icon {
    font-size: 0.75rem;
}

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

.filter-date-range__inputs {
    display: flex;
    gap: 1rem;
}

.filter-date-range__input {
    flex: 1;
}

.filter-date-range__input label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ofma-color-slate-600);
    margin-bottom: 0.375rem;
}

.filter-date-range__input input[type="date"] {
    width: 100%;
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    border: 1px solid var(--ofma-color-slate-300);
    border-radius: 6px;
    background: white;
    color: var(--ofma-color-slate-700);
    cursor: pointer;
}

.filter-date-range__input input[type="date"]:hover {
    border-color: var(--ofma-color-slate-400);
}

.filter-date-range__input input[type="date"]:focus {
    outline: none;
    border-color: var(--ofma-color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Dark Mode - Datums-Filter */
[data-theme="dark"] .filter-date-range__quickselect-label,
[data-theme="dark"] .filter-date-range__custom-label {
    color: var(--ofma-color-slate-400);
}

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

[data-theme="dark"] .filter-date-range__radio:hover {
    background: var(--ofma-color-slate-600);
    border-color: var(--ofma-color-slate-500);
}

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

[data-theme="dark"] .filter-date-range__radio--recommended {
    border-color: var(--ofma-color-primary);
    background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .filter-date-range__hint {
    background: rgba(59, 130, 246, 0.15);
    color: var(--ofma-color-primary-light, #60a5fa);
}

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

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

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

[data-theme="dark"] .filter-date-range__input input[type="date"]:hover {
    border-color: var(--ofma-color-slate-500);
}

[data-theme="dark"] .filter-date-range__input input[type="date"]:focus {
    border-color: var(--ofma-color-primary);
}

/* =====================================================
   SPREAD-FILTER (Bid-Ask) mit Schnellauswahl
   ===================================================== */

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

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

.filter-spread__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, 2 Buttons unten */
.filter-spread__quickselect-options {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.375rem;
}

/* Erste Reihe: 3 Buttons je 2 Spalten */
.filter-spread__radio:nth-child(1),
.filter-spread__radio:nth-child(2),
.filter-spread__radio:nth-child(3) {
    grid-column: span 2;
}

/* Zweite Reihe: 2 Buttons links */
.filter-spread__radio:nth-child(4) {
    grid-column: 1 / 3;
}

.filter-spread__radio:nth-child(5) {
    grid-column: 3 / 5;
}

/* Kachel-Design */
.filter-spread__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-spread__radio:hover {
    background: var(--ofma-color-slate-100);
    border-color: var(--ofma-color-slate-300);
}

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

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

/* Excellent - Sehr eng (dunkelgruen) */
.filter-spread__radio--excellent {
    border-color: #059669;
    background: rgba(5, 150, 105, 0.08);
}

.filter-spread__radio--excellent .filter-spread__radio-label {
    color: #059669;
    font-weight: 600;
}

/* Recommended - Empfohlen (gruen) */
.filter-spread__radio--recommended {
    border-color: var(--ofma-color-success, #10b981);
    background: rgba(16, 185, 129, 0.05);
}

.filter-spread__radio--recommended .filter-spread__radio-label {
    color: var(--ofma-color-success, #10b981);
    font-weight: 600;
}

/* Wide - Weit (orange/warning) */
.filter-spread__radio--wide {
    border-color: var(--ofma-color-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.05);
}

.filter-spread__radio--wide .filter-spread__radio-label {
    color: var(--ofma-color-warning, #f59e0b);
}

/* Hinweistext */
.filter-spread__hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    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);
}

.filter-spread__hint-icon {
    font-size: 0.75rem;
}

/* Ausgewaehlte Radio Option */
.filter-spread__radio:has(input:checked) {
    background: var(--ofma-color-primary);
    border-color: var(--ofma-color-primary);
}

.filter-spread__radio:has(input:checked) .filter-spread__radio-label {
    color: white;
}

/* Dark Mode - Spread Filter */
[data-theme="dark"] .filter-spread__label {
    color: var(--ofma-color-slate-300);
}

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

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

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

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

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

[data-theme="dark"] .filter-spread__radio--excellent {
    border-color: #6ee7b7;
    background: rgba(110, 231, 183, 0.12);
}

[data-theme="dark"] .filter-spread__radio--excellent .filter-spread__radio-label {
    color: #6ee7b7;
}

[data-theme="dark"] .filter-spread__radio--recommended {
    border-color: var(--ofma-color-success, #10b981);
    background: rgba(16, 185, 129, 0.1);
}

[data-theme="dark"] .filter-spread__radio--recommended .filter-spread__radio-label {
    color: var(--ofma-color-success-light, #34d399);
}

[data-theme="dark"] .filter-spread__radio--wide {
    border-color: var(--ofma-color-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] .filter-spread__radio--wide .filter-spread__radio-label {
    color: var(--ofma-color-warning-light, #fbbf24);
}

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

/* =====================================================
   DISTANCE-FILTER (Abstand Strike %) mit Schnellauswahl
   ===================================================== */

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

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

.filter-distance__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, 2 Buttons unten */
.filter-distance__quickselect-options {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.375rem;
}

/* Erste Reihe: 3 Buttons je 2 Spalten */
.filter-distance__radio:nth-child(1),
.filter-distance__radio:nth-child(2),
.filter-distance__radio:nth-child(3) {
    grid-column: span 2;
}

/* Zweite Reihe: 2 Buttons links */
.filter-distance__radio:nth-child(4) {
    grid-column: 1 / 3;
}

.filter-distance__radio:nth-child(5) {
    grid-column: 3 / 5;
}

/* Kachel-Design */
.filter-distance__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-distance__radio:hover {
    background: var(--ofma-color-slate-100);
    border-color: var(--ofma-color-slate-300);
}

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

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

/* Risky - Nah am Geld (orange) */
.filter-distance__radio--risky {
    border-color: var(--ofma-color-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.05);
}

.filter-distance__radio--risky .filter-distance__radio-label {
    color: var(--ofma-color-warning, #f59e0b);
}

/* Recommended - Empfohlen (blau) */
.filter-distance__radio--recommended {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

.filter-distance__radio--recommended .filter-distance__radio-label {
    color: #3b82f6;
    font-weight: 600;
}

/* Safe - Sicher (gruen) */
.filter-distance__radio--safe {
    border-color: var(--ofma-color-success, #10b981);
    background: rgba(16, 185, 129, 0.05);
}

.filter-distance__radio--safe .filter-distance__radio-label {
    color: var(--ofma-color-success, #10b981);
}

/* Very Safe - Sehr sicher (dunkelgruen) */
.filter-distance__radio--very-safe {
    border-color: #059669;
    background: rgba(5, 150, 105, 0.08);
}

.filter-distance__radio--very-safe .filter-distance__radio-label {
    color: #059669;
    font-weight: 600;
}

/* Hinweistext */
.filter-distance__hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    color: var(--ofma-color-primary);
    margin-top: 0.75rem;
    padding: 0.375rem 0.5rem;
    background: rgba(20, 184, 166, 0.08);
    border-radius: var(--ofma-radius-sm);
}

.filter-distance__hint-icon {
    font-size: 0.75rem;
}

/* Ausgewaehlte Radio Option */
.filter-distance__radio:has(input:checked) {
    background: var(--ofma-color-primary);
    border-color: var(--ofma-color-primary);
}

.filter-distance__radio:has(input:checked) .filter-distance__radio-label {
    color: white;
}

/* Dark Mode - Distance Filter */
[data-theme="dark"] .filter-distance__label {
    color: var(--ofma-color-slate-300);
}

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

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

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

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

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

[data-theme="dark"] .filter-distance__radio--risky {
    border-color: var(--ofma-color-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] .filter-distance__radio--risky .filter-distance__radio-label {
    color: var(--ofma-color-warning-light, #fbbf24);
}

[data-theme="dark"] .filter-distance__radio--recommended {
    border-color: #60a5fa;
    background: rgba(96, 165, 250, 0.12);
}

[data-theme="dark"] .filter-distance__radio--recommended .filter-distance__radio-label {
    color: #60a5fa;
}

[data-theme="dark"] .filter-distance__radio--safe {
    border-color: var(--ofma-color-success, #10b981);
    background: rgba(16, 185, 129, 0.1);
}

[data-theme="dark"] .filter-distance__radio--safe .filter-distance__radio-label {
    color: var(--ofma-color-success-light, #34d399);
}

[data-theme="dark"] .filter-distance__radio--very-safe {
    border-color: #6ee7b7;
    background: rgba(110, 231, 183, 0.12);
}

[data-theme="dark"] .filter-distance__radio--very-safe .filter-distance__radio-label {
    color: #6ee7b7;
}

[data-theme="dark"] .filter-distance__hint {
    background: rgba(20, 184, 166, 0.1);
    color: var(--ofma-color-primary-light, #5eead4);
}

/* =====================================================
   SCHNELLAUSWAHL LEGENDE (für alle Filter)
   ===================================================== */

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

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

.filter-quickselect__legend-item::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--ofma-color-slate-300);
}

.filter-quickselect__legend-item--warning::before {
    background: var(--ofma-color-warning, #f59e0b);
}

.filter-quickselect__legend-item--primary::before {
    background: var(--ofma-color-primary);
}

.filter-quickselect__legend-item--blue::before {
    background: #3b82f6;
}

.filter-quickselect__legend-item--success::before {
    background: var(--ofma-color-success, #10b981);
}

.filter-quickselect__legend-item--success-dark::before {
    background: #059669;
}

.filter-quickselect__legend-item--neutral::before {
    background: var(--ofma-color-slate-400);
}

.filter-quickselect__legend-item--danger::before {
    background: var(--ofma-color-danger, #ef4444);
}

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

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

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

[data-theme="dark"] .filter-quickselect__legend-item--warning::before {
    background: var(--ofma-color-warning-light, #fbbf24);
}

[data-theme="dark"] .filter-quickselect__legend-item--primary::before {
    background: var(--ofma-color-primary-light, #5eead4);
}

[data-theme="dark"] .filter-quickselect__legend-item--blue::before {
    background: #60a5fa;
}

[data-theme="dark"] .filter-quickselect__legend-item--success::before {
    background: var(--ofma-color-success-light, #34d399);
}

[data-theme="dark"] .filter-quickselect__legend-item--success-dark::before {
    background: #6ee7b7;
}

[data-theme="dark"] .filter-quickselect__legend-item--neutral::before {
    background: var(--ofma-color-slate-400);
}

[data-theme="dark"] .filter-quickselect__legend-item--danger::before {
    background: #f87171;
}