/* Block Trade Scanner - Custom Styles
   All styles scoped to #block-scanner-container to avoid affecting main app
   NOTE: Dash CSS files in assets/ are loaded globally, so we MUST scope
*/

/* ============================================
   NEW TRADE HIGHLIGHTING (scanner-specific class)
   ============================================ */

.scanner-new-trade-row {
    background-color: rgba(34, 197, 94, 0.15) !important;
    animation: scanner-fade-highlight 5s ease-out forwards;
}

@keyframes scanner-fade-highlight {
    from { background-color: rgba(34, 197, 94, 0.3); }
    to { background-color: transparent; }
}

/* ============================================
   SCANNER TOGGLE STYLING (scanner-specific class)
   ============================================ */

.scanner-toggle-row {
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.scanner-toggle-row:hover {
    background-color: rgba(23, 162, 184, 0.1);
}

/* ============================================
   SCANNER RESULTS TABLE
   Scoped by specific ID
   ============================================ */

#results-table .dash-cell {
    padding: 2px 6px !important;
}

#results-table .dash-header {
    padding: 4px 6px !important;
}

#results-table tbody tr {
    cursor: pointer;
}

#results-table tbody tr:hover td {
    background-color: #2a2f4a !important;
}

/* Compact row height - must target multiple selectors */
#results-table .dash-spreadsheet-container .dash-spreadsheet-inner tr {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
}

#results-table .dash-spreadsheet-container .dash-spreadsheet-inner tr td {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    line-height: 20px !important;
}

#results-table .dash-spreadsheet-container .dash-spreadsheet-inner tr td div {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    line-height: 20px !important;
    overflow: hidden;
}

#results-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.dash-cell div.dash-cell-value {
    height: 20px !important;
    line-height: 20px !important;
}

/* ============================================
   SCANNER SIDE INDICATOR COLORS (scanner-specific class)
   ============================================ */

.scanner-side-buy {
    color: #22c55e !important;
    font-weight: 600;
}

.scanner-side-sell {
    color: #ef4444 !important;
    font-weight: 600;
}

/* ============================================
   SCANNER WIDGET PANELS (scanner-specific class)
   ============================================ */

.scanner-widget-panel {
    background-color: #1f2937;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
}

.scanner-widget-title {
    font-size: 10px;
    text-transform: uppercase;
    color: #17a2b8;
    margin-bottom: 4px;
    font-weight: 600;
}

.scanner-widget-value {
    font-size: 18px;
    font-weight: 700;
    color: #e0e0e0;
}

.scanner-widget-value.bullish {
    color: #22c55e;
}

.scanner-widget-value.bearish {
    color: #ef4444;
}

.scanner-widget-label {
    font-size: 9px;
    color: #9ca3af;
    text-transform: uppercase;
}

/* ============================================
   SCANNER MODAL INPUT STYLING
   Force dark theme for inputs in scanner modals
   ============================================ */

#modal-new-list .form-control,
#modal-new-list input.form-control,
#modal-new-list textarea.form-control,
#modal-list-manager .form-control,
#modal-list-manager input.form-control,
#modal-new-scanner .form-control,
#modal-new-scanner input.form-control,
#modal-new-scanner select.form-select {
    background-color: #1a1f3a !important;
    color: #e0e6ed !important;
    border: 1px solid #444 !important;
}

#modal-new-list .form-control:focus,
#modal-new-list input.form-control:focus,
#modal-new-list textarea.form-control:focus,
#modal-list-manager .form-control:focus,
#modal-new-scanner .form-control:focus,
#modal-new-scanner select.form-select:focus {
    background-color: #1a1f3a !important;
    color: #e0e6ed !important;
    border-color: #4a9eff !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 158, 255, 0.25) !important;
}

#modal-new-list .form-control::placeholder,
#modal-new-scanner .form-control::placeholder {
    color: #6c757d !important;
}

/* Scanner modal select dropdowns */
#modal-new-scanner .form-select {
    background-color: #1a1f3a !important;
    color: #e0e6ed !important;
    border: 1px solid #444 !important;
}