/* Filters — unified filter form styles */

/* Compact rows for selects */
.filter-row {
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 3px; flex-wrap: wrap;
}
.filter-row select,
.filter-row input[type="text"] {
    flex: 1; min-width: 0;
}
.filter-row .btn { white-space: nowrap; }

.filter-preset-row {
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 6px;
}
.filter-preset-row select {
    flex: 1 1 0; min-width: 0; font-size: 0.85rem;
}
.filter-preset-row .btn { white-space: nowrap; flex-shrink: 0; }

/* Date widget */
.filter-date-row {
    display: flex; align-items: center; gap: var(--spacing-xs);
    margin-bottom: 4px; flex-wrap: wrap;
}
.filter-date-label {
    font-size: 0.8rem; color: var(--color-gray-500);
    min-width: 70px; text-align: right;
}
.filter-date-sep {
    font-size: 0.75rem; color: var(--color-gray-400);
}
.filter-date-widget {
    display: inline-flex; align-items: center; gap: 4px;
}
.filter-date-widget select {
    font-size: 0.82rem; padding: 3px 6px; max-width: 170px;
}
.filter-date-widget input[type="number"] {
    font-size: 0.82rem; padding: 3px 6px;
}
.filter-date-widget input[type="date"] {
    font-size: 0.82rem; padding: 3px 6px;
}
.filter-date-rel {
    display: inline-flex; align-items: center; gap: 4px;
}

/* Active filter highlight */
select.filter-active,
input.filter-active {
    background-color: #fef3c7;
    border-color: #f59e0b;
}

/* Save button push right */
.filter-save-btn {
    margin-left: auto;
}

/* Modal overlay for save/edit filter */
.modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.modal-overlay .modal {
    background: #fff; border-radius: var(--radius);
    padding: var(--spacing-lg); width: 100%;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.modal-overlay .modal h3 {
    margin: 0 0 var(--spacing-md); font-size: 1.1rem;
}

/* Mobile */
@media (max-width: 768px) {
    .filter-row { gap: 3px; }
    .filter-row select { font-size: 0.78rem; min-width: 80px; }
    .filter-date-row {
        flex-direction: column; align-items: stretch;
    }
    .filter-date-label {
        text-align: left; min-width: auto;
    }
    .filter-date-widget { flex-wrap: wrap; }
    .filter-date-widget select { max-width: 100%; }
    .filter-preset-row { flex-wrap: wrap; }
}