/* ================================================================
   DataTable Filter UX — Strategy Manager (port 8075)
   Dark-theme filter visibility, spacing, and active-filter highlighting
   ================================================================ */

/* --- Filter input text visibility --- */
.dash-filter input,
.dash-table-filter input,
.dash-spreadsheet input[type="text"] {
    color: #e6edf3 !important;
    background-color: #1e2a36 !important;
    border: 1px solid #4a5568 !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
    min-height: 28px !important;
}

/* Placeholder text */
.dash-filter input::placeholder,
.dash-table-filter input::placeholder {
    color: #8899aa !important;
    opacity: 1 !important;
}

/* Focus state */
.dash-filter input:focus,
.dash-table-filter input:focus {
    color: #ffffff !important;
    background-color: #263242 !important;
    border-color: #4cc9f0 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(76, 201, 240, 0.3) !important;
}

/* --- Dropdown select in filters (if any) --- */
.dash-filter select,
.dash-table-filter select {
    color: #e6edf3 !important;
    background-color: #1e2a36 !important;
    border: 1px solid #4a5568 !important;
    border-radius: 4px !important;
    font-size: 12px !important;
}

/* --- Filter row spacing --- */
.dash-spreadsheet-container .dash-spreadsheet-filter-row {
    line-height: 32px !important;
}

.dash-spreadsheet-container .dash-spreadsheet-filter-row > div {
    padding: 3px 4px !important;
}

/* --- Column header styling when filtered (active highlight) --- */
/* Dash DataTable adds --dash-filter-active to header cells above active filters */
.dash-header.--dash-filter-active {
    background-color: #1a6b8a !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

/* Also target the generic filter-active class variants */
.dash-table-container .dash-header[class*="filter-active"] {
    background-color: #1a6b8a !important;
    color: #ffffff !important;
}

/* --- Reset filter button styling (scoped to reset-filter buttons only) --- */
.btn-secondary[id^="btn-reset-"] {
    font-size: 11px !important;
    padding: 2px 10px !important;
}

/* --- General DataTable filter area spacing --- */
.dash-spreadsheet-container .dash-spreadsheet-inner .dash-filter {
    padding: 2px !important;
}