/* ═══════════════════════════════════════════════════════════════
   Dashboard C — route & group-by dropdowns (react-select v1)
   ══════════════════════════════════════════════════════════════ */
#c-route-dropdown .Select-control,
#c-groupby-dropdown .Select-control {
    background-color: #1e2537 !important;
    border-color: #3a4258 !important;
    color: #e8eaf0 !important;
}
#c-route-dropdown .Select-value-label,
#c-groupby-dropdown .Select-value-label,
#c-route-dropdown .Select-placeholder,
#c-groupby-dropdown .Select-placeholder {
    color: #c5cad6 !important;
}
#c-route-dropdown .Select-multi-value-wrapper,
#c-groupby-dropdown .Select-multi-value-wrapper { color: #e8eaf0 !important; }
#c-route-dropdown .Select-arrow-zone .Select-arrow,
#c-groupby-dropdown .Select-arrow-zone .Select-arrow { border-top-color: #8892a4 !important; }
#c-route-dropdown .Select-menu-outer,
#c-groupby-dropdown .Select-menu-outer {
    background-color: #1e2537 !important;
    border-color: #3a4258 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.55) !important;
    z-index: 9999 !important;
}
#c-route-dropdown .Select-option,
#c-groupby-dropdown .Select-option {
    background-color: #1e2537 !important;
    color: #c5cad6 !important;
}
#c-route-dropdown .Select-option.is-focused,
#c-groupby-dropdown .Select-option.is-focused {
    background-color: #2d3548 !important;
    color: #e8eaf0 !important;
}
#c-route-dropdown .Select-option.is-selected,
#c-groupby-dropdown .Select-option.is-selected {
    background-color: #1e4a8a !important;
    color: #4a9eff !important;
}
#c-route-dropdown .Select-input > input,
#c-groupby-dropdown .Select-input > input { color: #e8eaf0 !important; }
/* multi-value tags */
#c-route-dropdown .Select-value {
    background-color: #2a5bd7 !important;
    border-color: #2a5bd7 !important;
    color: #fff !important;
}
#c-route-dropdown .Select-value-icon { border-right-color: rgba(255,255,255,0.3) !important; color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════
   Payslip page — restore Bootstrap light theme
   ══════════════════════════════════════════════════════════════ */
/* Force the entire payslip page into browser light-mode rendering */
.hi-payslip {
    background-color: #f5f7fa !important;
    color: #212529 !important;
    color-scheme: light;            /* makes native inputs/selects render in light mode */
}
/* Card */
.hi-payslip .card        { background-color: #fff !important; color: #212529 !important; }
.hi-payslip .card-body   { background-color: #fff !important; color: #212529 !important; }
/* Bootstrap form controls */
.hi-payslip .form-control  { background-color: #fff !important; border-color: #ced4da !important; color: #212529 !important; }
.hi-payslip .form-control:focus { background-color: #fff !important; color: #212529 !important; }
.hi-payslip .form-control::placeholder { color: #6c757d !important; }
.hi-payslip .text-muted  { color: #6c757d !important; }
/* Dash dcc.Dropdown (React Select) — force light appearance */
.hi-payslip .Select-control           { background-color: #fff !important; border-color: #ced4da !important; color: #212529 !important; }
.hi-payslip .Select-value-label       { color: #212529 !important; }
.hi-payslip .Select-placeholder       { color: #6c757d !important; }
.hi-payslip .Select-input > input     { color: #212529 !important; background: transparent !important; }
.hi-payslip .Select-menu-outer        { background-color: #fff !important; border-color: #ced4da !important; color: #212529 !important; }
.hi-payslip .Select-option            { background-color: #fff !important; color: #212529 !important; }
.hi-payslip .Select-option.is-focused { background-color: #e9ecef !important; }
.hi-payslip .Select-option.is-selected{ background-color: #0d6efd !important; color: #fff !important; }
.hi-payslip .Select-arrow-zone .Select-arrow { border-top-color: #495057 !important; }
/* Buttons */
.hi-payslip .btn-outline-secondary { color: #6c757d !important; border-color: #6c757d !important; background-color: transparent !important; }
.hi-payslip .border  { border-color: rgba(0,0,0,.2) !important; }

/* FEAT-002 — Log Viewer */
.logs-tab-row          { display: flex; gap: 8px; flex-wrap: wrap; }
.logs-tab-btn          { padding: 6px 18px; border-radius: 6px; border: 1px solid #444;
                         background: #1e2130; color: #adb5bd; cursor: pointer; font-size: 13px; }
.logs-tab-btn:hover    { border-color: #e8734a; color: #fff; }
.logs-tab-active       { background: #e8734a !important; border-color: #e8734a !important; color: #fff !important; }

.logs-filter-bar       { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.logs-file-drop        { flex: 1; min-width: 200px; }
/* BUG-035: explicit text colour for file picker — Dash Select defaults to grey */
.logs-file-drop .Select-control       { color: #e8eaf0 !important; }
.logs-file-drop .Select-value-label   { color: #e8eaf0 !important; }
.logs-file-drop .Select-placeholder   { color: #8892a4 !important; }
.logs-file-drop .Select-option        { color: #e8eaf0 !important; }
/* BUG-036: dropdown popup needs dark background in dark theme — BUG-035 set text color
   but Dash Select's .Select-menu-outer defaults to white bg making text invisible */
.logs-file-drop .Select-menu-outer       { background-color: #1e2130 !important; border: 1px solid #444 !important; }
.logs-file-drop .Select-menu             { background-color: #1e2130 !important; }
.logs-file-drop .Select-option           { background-color: #1e2130 !important; }
/* BUG-036 dark theme — hover state (BUG-037: add VirtualizedSelect mirror) */
.logs-file-drop .Select-option.is-focused,
.logs-file-drop .VirtualizedSelectFocusedOption  { background-color: #2a2f45 !important; color: #e8eaf0 !important; }
/* BUG-036 dark theme — selected state (BUG-037: add VirtualizedSelect mirror) */
.logs-file-drop .Select-option.is-selected,
.logs-file-drop .VirtualizedSelectSelectedOption { background-color: #2d3250 !important; color: #ffffff !important; }
.logs-level-group      { display: flex; gap: 4px; }
.logs-lvl-btn          { padding: 5px 12px; border-radius: 4px; border: 1px solid #444;
                         background: #1e2130; color: #adb5bd; cursor: pointer; font-size: 12px; }
.logs-lvl-btn:hover    { border-color: #adb5bd; }
.logs-lvl-active       { background: #e8734a !important; border-color: #e8734a !important; color: #fff !important; }
.logs-lvl-error        { color: #e8734a !important; }
.logs-search           { flex: 1; min-width: 140px; padding: 5px 10px; border-radius: 4px;
                         border: 1px solid #444; background: #1e2130; color: #fff; font-size: 13px; }
.logs-lines-drop       { width: 130px; }
.logs-refresh-btn      { padding: 5px 14px; border-radius: 4px; border: 1px solid #444;
                         background: #1e2130; color: #adb5bd; cursor: pointer; font-size: 13px; }
.logs-refresh-btn:hover { border-color: #e8734a; color: #e8734a; }
.logs-status-bar       { font-size: 11px; color: #6c757d; margin-bottom: 6px; }
.logs-output           { background: #0d1117; border: 1px solid #2a2f45; border-radius: 6px;
                         padding: 12px; font-family: 'Courier New', monospace; font-size: 12px;
                         max-height: 65vh; overflow-y: auto; overflow-x: auto;
                         white-space: pre; word-break: normal; }
@media (max-width: 576px) {
    .logs-output    { max-height: 50vh; font-size: 11px; }
    .logs-file-drop { min-width: 100%; }
    .logs-search    { min-width: 100%; }
    .logs-lines-drop { width: 100%; }
}

/* BUG-007 — Log Viewer light-theme overrides (terminal output stays dark intentionally) */
body[data-theme="light"] .logs-tab-btn          { background: #f8f9fa; color: #495057; border-color: #ced4da; }
body[data-theme="light"] .logs-tab-btn:hover    { border-color: #e8734a; color: #e8734a; }
body[data-theme="light"] .logs-lvl-btn          { background: #f8f9fa; color: #495057; border-color: #ced4da; }
body[data-theme="light"] .logs-lvl-btn:hover    { border-color: #adb5bd; color: #495057; }
body[data-theme="light"] .logs-search           { background: #fff; color: #212529; border-color: #ced4da; }
body[data-theme="light"] .logs-refresh-btn      { background: #f8f9fa; color: #495057; border-color: #ced4da; }

/* BUG-035: light-theme file picker overrides */
body[data-theme="light"] .logs-file-drop .Select-control     { color: #212529 !important; }
body[data-theme="light"] .logs-file-drop .Select-value-label { color: #212529 !important; }
body[data-theme="light"] .logs-file-drop .Select-placeholder { color: #6c757d !important; }
body[data-theme="light"] .logs-file-drop .Select-option      { color: #212529 !important; }

/* BUG-036: restore white popup bg in light theme (bare rules above are dark-only defaults) */
body[data-theme="light"] .logs-file-drop .Select-menu-outer       { background-color: #fff !important; border-color: #ced4da !important; }
body[data-theme="light"] .logs-file-drop .Select-menu             { background-color: #fff !important; }
body[data-theme="light"] .logs-file-drop .Select-option           { background-color: #fff !important; }
/* BUG-036 light theme — hover state (BUG-037: add VirtualizedSelect mirror) */
body[data-theme="light"] .logs-file-drop .Select-option.is-focused,
body[data-theme="light"] .logs-file-drop .VirtualizedSelectFocusedOption  { background-color: #e9ecef !important; color: #212529 !important; }
/* BUG-036 light theme — selected state (BUG-037: add VirtualizedSelect mirror) */
body[data-theme="light"] .logs-file-drop .Select-option.is-selected,
body[data-theme="light"] .logs-file-drop .VirtualizedSelectSelectedOption { background-color: #0d6efd !important; color: #fff !important; }

/* BUG-024: prevent long filenames wrapping inside Log Viewer file picker */
.logs-file-drop .VirtualizedSelectOption,
.logs-file-drop .Select-option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.logs-file-drop .Select-value-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* BUG-028 — Log Viewer mobile layout: stack file picker + level buttons vertically */
/* MUST BE LAST — overrides BUG-024 unconditional white-space:nowrap on ≤480px viewports */
@media (max-width: 480px) {
    /* Stack the entire filter bar as a vertical column */
    .logs-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    /* Move level-filter buttons ABOVE the file picker (order: -1) so that when
       the dropdown opens downward it cannot overlap the level buttons */
    .logs-level-group {
        order: -1;
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
    }

    /* File picker: full width, after level buttons in visual order */
    .logs-file-drop {
        width: 100%;
        min-width: 100%;
        order: 0;
    }

    /* Search and lines drop already covered by 576px rule; reinforce full width */
    .logs-search     { width: 100%; }
    .logs-lines-drop { width: 100%; }

    /* Refresh button full width */
    .logs-refresh-btn { width: 100%; }

    /* Override BUG-024 ellipsis: allow menu items to wrap on mobile so the
       full "filename  [folder]" label from BUG-025 is readable without truncation */
    .logs-file-drop .VirtualizedSelectOption,
    .logs-file-drop .Select-option {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}