/* =====================================================================
   Filter modal components – dark styling for modern Dash dcc.Dropdown/
   dcc.RangeSlider to match Cyborg theme
   ===================================================================== */

.filter-modal-body .dash-dropdown,
.filter-modal-body .dash-dropdown-content {
    background: var(--lbi-surface) !important;
    background-color: var(--lbi-surface) !important;
    border-color: var(--lbi-secondary) !important;
    color: var(--lbi-fg) !important;
}

.filter-modal-body .dash-dropdown-trigger {
    min-height: 32px;
}

.filter-modal-body .dash-dropdown:focus,
.filter-modal-body .dash-dropdown-search-container:focus-within {
    border-color: var(--lbi-primary) !important;
    outline-color: var(--lbi-primary) !important;
    box-shadow: 0 0 0 2px rgba(42, 159, 214, 0.25) !important;
}

.filter-modal-body .dash-dropdown-value,
.filter-modal-body .dash-dropdown-search,
.filter-modal-body .dash-dropdown-option,
.filter-modal-body .dash-options-list-option-text {
    color: var(--lbi-fg) !important;
}

.filter-modal-body .dash-dropdown-placeholder,
.filter-modal-body .dash-dropdown-action-button {
    color: var(--lbi-muted) !important;
}

.filter-modal-body .dash-dropdown-value-count,
.filter-modal-body .dash-dropdown-trigger-icon,
.filter-modal-body .dash-dropdown-clear,
.filter-modal-body .dash-dropdown-search-icon {
    color: var(--lbi-fg) !important;
    fill: var(--lbi-fg) !important;
}

.filter-modal-body .dash-dropdown-option,
.filter-modal-body .dash-options-list-option {
    background: var(--lbi-surface) !important;
}

.filter-modal-body .dash-dropdown-option:hover,
.filter-modal-body .dash-options-list-option:hover,
.filter-modal-body .dash-options-list-option:focus-within,
.filter-modal-body .dash-options-list-option.selected {
    background: var(--lbi-primary) !important;
    color: var(--lbi-white) !important;
}

.filter-modal-body .dash-options-list-option.selected {
    background: var(--lbi-primary) !important;
    color: var(--lbi-white) !important;
}

.filter-modal-body .dash-options-list-option.selected .dash-options-list-option-text,
.filter-modal-body .dash-options-list-option.selected .dash-dropdown-option {
    color: var(--lbi-white) !important;
}

@media (hover: none), (pointer: coarse) {
    .filter-modal-body .dash-dropdown-option:not(.selected):hover,
    .filter-modal-body .dash-options-list-option:not(.selected):hover,
    .filter-modal-body .dash-options-list-option:not(.selected):focus-within {
        background: var(--lbi-surface) !important;
        color: var(--lbi-fg) !important;
    }

    .filter-modal-body .dash-options-list-option:not(.selected):hover .dash-options-list-option-text,
    .filter-modal-body .dash-options-list-option:not(.selected):focus-within .dash-options-list-option-text {
        color: var(--lbi-fg) !important;
    }
}

.filter-modal-body .dash-dropdown-clear:hover,
.filter-modal-body .dash-dropdown-action-button:hover,
.filter-modal-body .dash-dropdown-search-container:focus-within .dash-dropdown-search-icon {
    color: var(--lbi-primary) !important;
    fill: var(--lbi-primary) !important;
}

.filter-modal-body .dash-options-list-option-checkbox {
    accent-color: var(--lbi-primary);
}

.filter-modal-body .dash-options-list-option-checkbox {
    display: none !important;
}

.filter-modal-body .dash-dropdown-value {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    white-space: normal;
}

.filter-modal-body .dash-dropdown-value-item {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--lbi-primary);
    border-radius: 0.35rem;
    background: var(--lbi-primary);
    color: var(--lbi-white) !important;
    line-height: 1.25;
}

.filter-modal-body .dash-dropdown-value-item:not(:first-child)::before {
    content: "" !important;
}

.filter-modal-body .dash-range-slider-inputs,
.filter-modal-body .dash-range-slider-min-input,
.filter-modal-body .dash-range-slider-max-input {
    display: none !important;
}

.funding-input-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem;
    align-items: flex-end;
}

.funding-input-col {
    flex: 0 0 auto;
    width: clamp(7rem, 34vw, 8.75rem);
}

.filter-modal-body .funding-input-col .form-label {
    color: var(--lbi-fg) !important;
}

.filter-modal-body .funding-number-input {
    background-color: var(--lbi-surface) !important;
    border: 1px solid var(--lbi-secondary) !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--lbi-secondary) !important;
    border-radius: 0.375rem !important;
    color: var(--lbi-secondary) !important;
    box-shadow: none !important;
}

.filter-modal-body .funding-number-input:focus {
    background-color: var(--lbi-surface) !important;
    border-color: var(--lbi-primary) !important;
    box-shadow: 0 0 0 2px rgba(42, 159, 214, 0.25) !important;
}

.filter-modal-body .funding-number-input-default {
    color: var(--lbi-muted) !important;
    border-color: var(--lbi-secondary) !important;
}

.filter-modal-body .funding-number-input-user {
    color: var(--lbi-primary) !important;
    border-color: var(--lbi-primary) !important;
}

.filter-modal-body .funding-number-input::placeholder {
    color: var(--lbi-muted) !important;
}

#filter-year-range,
#filter-total-raised-range {
    padding-left: 16px;
    padding-right: 16px;
}

.filter-slider-with-tooltips {
    position: relative;
    padding-top: 1.7rem;
}

.filter-slider-tooltip-badge {
    position: absolute;
    top: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    background-color: var(--lbi-primary);
    color: var(--lbi-white);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    pointer-events: none;
}

#filter-year-range .dash-slider-track,
#filter-total-raised-range .dash-slider-track {
    background-color: var(--lbi-secondary) !important;
}

#filter-year-range .dash-slider-range,
#filter-total-raised-range .dash-slider-range {
    background-color: var(--lbi-primary) !important;
}

#filter-year-range .dash-slider-thumb,
#filter-total-raised-range .dash-slider-thumb {
    background-color: var(--lbi-primary) !important;
    border-color: var(--lbi-white) !important;
}

#filter-year-range .dash-slider-thumb:hover,
#filter-year-range .dash-slider-thumb:focus,
#filter-total-raised-range .dash-slider-thumb:hover,
#filter-total-raised-range .dash-slider-thumb:focus {
    box-shadow: 0 0 5px var(--lbi-primary) !important;
    outline-color: var(--lbi-accent-light) !important;
}

#filter-year-range .dash-slider-mark,
#filter-total-raised-range .dash-slider-mark {
    color: var(--lbi-fg) !important;
}

#filter-year-range .dash-slider-mark-outside-selection,
#filter-total-raised-range .dash-slider-mark-outside-selection {
    color: var(--lbi-muted) !important;
}

#filter-year-range .dash-slider-tooltip,
#filter-total-raised-range .dash-slider-tooltip {
    background-color: var(--lbi-primary) !important;
    color: var(--lbi-white) !important;
    box-shadow: none !important;
}

#filter-year-range .dash-slider-tooltip > div,
#filter-total-raised-range .dash-slider-tooltip > div {
    color: var(--lbi-white) !important;
}

/* =====================================================================
   Filter modal body – allow dropdown menus to overflow the modal
   ===================================================================== */

.filter-modal-body {
    overflow: visible !important;
    --Dash-Fill-Interactive-Strong: var(--lbi-primary);
    --Dash-Fill-Interactive-Weak: rgba(42, 159, 214, 0.14);
    --Dash-Fill-Primary-Active: var(--lbi-primary);
    --Dash-Fill-Inverse-Strong: var(--lbi-surface);
    --Dash-Fill-Inverse-strong: var(--lbi-surface);
    --Dash-Text-Primary: var(--lbi-fg);
    --Dash-Text-Strong: var(--lbi-fg);
    --Dash-Text-Weak: var(--lbi-fg-weak);
    --Dash-Text-Disabled: var(--lbi-muted);
    --Dash-Fill-Disabled: var(--lbi-secondary);
    --Dash-Stroke-Strong: var(--lbi-secondary);
    --Dash-Stroke-Weak: rgba(85, 85, 85, 0.35);
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.55);
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.3);
}

/* =====================================================================
   Filter action buttons
   ===================================================================== */

.filter-launch-btn {
    min-width: 7.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.45rem 1.2rem;
    border-width: 1px;
    border-color: var(--lbi-primary) !important;
    background-color: var(--lbi-primary) !important;
    color: var(--lbi-white) !important;
    box-shadow: 0 0 0 1px rgba(143, 233, 255, 0.12), 0 8px 18px rgba(42, 159, 214, 0.18);
}

.filter-launch-btn:hover,
.filter-launch-btn:focus {
    border-color: var(--lbi-primary-hover) !important;
    background-color: var(--lbi-primary-hover) !important;
    color: var(--lbi-white) !important;
    box-shadow: 0 0 0 2px rgba(143, 233, 255, 0.18), 0 10px 22px rgba(42, 159, 214, 0.24);
}

.filter-launch-row {
    position: sticky;
    top: 0.75rem;
    margin: 1rem 0 0.75rem;
    padding: 0.25rem 0;
    z-index: 1040;
}

.filter-reset-btn,
.filter-reset-btn.btn-outline-secondary {
    color: var(--lbi-fg-weak) !important;
    border-color: var(--lbi-muted) !important;
}

.filter-reset-btn:hover,
.filter-reset-btn:focus,
.filter-reset-btn.btn-outline-secondary:hover,
.filter-reset-btn.btn-outline-secondary:focus {
    color: var(--lbi-white) !important;
    border-color: var(--lbi-neutral-hover) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.lollipop-scale-toggle {
    position: absolute;
    bottom: 0.65rem;
    left: 0.85rem;
    z-index: 3;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--lbi-secondary);
    border-radius: 0.4rem;
    background: rgba(6, 6, 6, 0.72);
    backdrop-filter: blur(1px);
}

.lollipop-scale-toggle .form-check {
    margin-bottom: 0;
    min-height: auto;
}

.lollipop-scale-toggle .form-check-label {
    color: var(--lbi-fg);
    font-size: 0.82rem;
    line-height: 1.1;
}

.lollipop-scale-toggle .form-check-input {
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .filter-launch-row {
        top: 0.5rem;
        margin: 0.85rem 0 0.75rem;
    }
}

/* =====================================================================
   Plotly hover labels
   ===================================================================== */

@media (hover: none), (pointer: coarse) {
    .js-plotly-plot .plotly .hoverlayer {
        display: none !important;
    }
}

/* =====================================================================
   Detail modal DataTable sorting UX
   ===================================================================== */

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:hover {
    background-color: var(--lbi-table-header-hover-bg) !important;
    color: var(--lbi-white) !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th [class*="sort"] {
    color: var(--lbi-primary) !important;
    opacity: 1 !important;
}

/* =====================================================================
   Custom spinner (LBI branded)
   ===================================================================== */

.lbi-spinner-container {
  position: relative;
  width: 60px;
  height: 60px;
  margin: auto;
}

/* Outer rotating ring */
.lbi-spinner-ring {
  width: 100%;
  height: 100%;
  border: 4px solid rgba(42, 159, 214, 0.2);
    border-top: 4px solid var(--lbi-primary);
  border-radius: 50%;
  animation: lbi-spin 1s linear infinite;
}

/* Center logo */
.lbi-spinner-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
}

/* Animation */
@keyframes lbi-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =====================================================================
   Initial page loader overlay
   ===================================================================== */

#page-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--lbi-black);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

#page-loader-overlay.page-loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.page-loader-text {
    color: var(--lbi-fg);
    font-size: 1rem;
}