/* Load Funnel Display */
@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300;400;500;600;700;800&display=swap');

/* Global */
html, body {
    font-family: 'Funnel Display', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Dash Dropdowns */
.Select-control,
.Select-menu-outer,
.Select-option,
.Select-value,
.Select-placeholder {
    font-family: 'Funnel Display', sans-serif !important;
    font-weight: 500;
}

/* Dropdown menu items */
.VirtualizedSelectOption {
    font-family: 'Funnel Display', sans-serif !important;
}

/* Plotly text */
.js-plotly-plot {
    font-family: 'Funnel Display', sans-serif !important;
}


.filters-accordion .accordion-button {
    padding: 8px 12px;   /* was ~16px 20px */
    font-size: 16px;
    font-weight: 600;
}


.filters-accordion .accordion-body {
    padding: 10px 12px;
}


.shadow-button {
  box-shadow: 0 6px 16px rgba(0,0,0,0.95);
}

/* Optional: Add a different shadow on hover for interactivity */
.shadow-button:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.7);
}


.view-mode-btn {
    padding: 4px 14px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    margin: 0 -10px;
}

/* ===================================
   NEW DASH DROPDOWN STYLING (Mantine)
   =================================== */

/* Main dropdown input */
.mantine-MultiSelect-input,
.mantine-Select-input {
    background-color: #1f2328 !important;
    border-color: #2a2a2a !important;
    color: #eaeaea !important;
}

/* Placeholder text */
.mantine-MultiSelect-input::placeholder,
.mantine-Select-input::placeholder {
    color: #888888 !important;
}

/* Dropdown menu */
.mantine-MultiSelect-dropdown,
.mantine-Select-dropdown {
    background-color: #1f2328 !important;
    border-color: #2a2a2a !important;
}

/* Search input inside dropdown */
.mantine-MultiSelect-searchInput {
    background-color: #1f2328 !important;
    color: #eaeaea !important;
    border-color: #2a2a2a !important;
}

/* Individual options */
.mantine-MultiSelect-item,
.mantine-Select-item {
    background-color: #1f2328 !important;
    color: #eaeaea !important;
}

/* Hover state */
.mantine-MultiSelect-item:hover,
.mantine-Select-item:hover {
    background-color: #2a2d32 !important;
}

/* Selected items */
.mantine-MultiSelect-item[data-selected="true"],
.mantine-Select-item[data-selected="true"] {
    background-color: #3a3d42 !important;
}

/* Selected value pills/chips */
.mantine-MultiSelect-value {
    background-color: #2a2d32 !important;
    color: #eaeaea !important;
}

/* Select All / Deselect All buttons */
.mantine-MultiSelect-selectAll,
.mantine-MultiSelect-deselectAll {
    color: #b0b0b0 !important;
}

.mantine-MultiSelect-selectAll:hover,
.mantine-MultiSelect-deselectAll:hover {
    color: #eaeaea !important;
    background-color: #2a2d32 !important;
}

/* Dropdown arrow icon */
.mantine-Select-rightSection,
.mantine-MultiSelect-rightSection {
    color: #eaeaea !important;
}

/* Target the ACTUAL input wrapper that's visible */
div[class*="mantine-Input-wrapper"] {
    background-color: #1f2328 !important;
}

/* Target the input field itself */
div[class*="mantine-Input-input"] {
    background-color: #1f2328 !important;
    border-color: #2a2a2a !important;
    color: #eaeaea !important;
}

/* More specific targeting for Select components */
.dash-dropdown,
.dash-dropdown .Select-control {
    background-color: #1f2328 !important;
    border-color: #2a2a2a !important;
}

/* Nuclear option - target ANY input that Dash creates */
input[class*="mantine"],
div[class*="mantine"][class*="input"] {
    background-color: #1f2328 !important;
    color: #eaeaea !important;
}

/* Nuclear option - override ALL Mantine inputs */
*[class*="mantine-Input-input"],
* [class*="mantine-Select-input"],
* [class*="mantine-MultiSelect-input"] {
    background-color: #1f2328 !important;
    color: #eaeaea !important;
    border-color: #2a2a2a !important;
}

/* The wrapper too */
* [class*="mantine-Input-wrapper"] {
    background-color: #1f2328 !important;
}

/* Dropdown options menu */
* [class*="mantine-Popover-dropdown"] {
    background-color: #1f2328 !important;
    border-color: #2a2a2a !important;
}


/* Placeholder text color */
*[class*="mantine-Input-input"]::placeholder,
*[class*="mantine-Select-input"]::placeholder,
*[class*="mantine-MultiSelect-input"]::placeholder {
    color: #b0b0b0 !important;  /* text_secondary */
    opacity: 1 !important;
}

/* Also target the actual placeholder wrapper that Mantine uses */
*[class*="mantine-Input-placeholder"],
*[class*="mantine-Select-placeholder"],
*[class*="mantine-MultiSelect-placeholder"] {
    color: #b0b0b0 !important;
}



/* Force placeholder text color - more specific selectors */
input[class*="mantine"]::placeholder,
div[class*="mantine"] input::placeholder {
    color: #b0b0b0 !important;
    opacity: 1 !important;
}

/* Target the section that shows the placeholder */
*[class*="Placeholder"] {
    color: #b0b0b0 !important;
}

/* Sometimes Mantine renders placeholder as a separate div */
div[class*="placeholder"] {
    color: #b0b0b0 !important;
}


/* Override ALL text inside dropdown inputs */
*[class*="mantine-Input"] *,
*[class*="mantine-Select"] *,
*[class*="mantine-MultiSelect"] * {
    color: #b0b0b0 !important;
}



/* Multi-select placeholder specifically */
div[class*="MultiSelect-input"]::placeholder {
    color: #b0b0b0 !important;
    opacity: 1 !important;
}

/* The placeholder text when nothing is selected */
div[class*="MultiSelect"] input[placeholder]::placeholder {
    color: #b0b0b0 !important;
}

/* Sometimes the placeholder is rendered as a span */
span[class*="placeholder"] {
    color: #b0b0b0 !important;
}

/* Nuclear option for MultiSelect */
div[class*="MultiSelect"] * {
    color: #b0b0b0 !important;
}


/* The "X selected" text that appears when items are selected */
div[class*="MultiSelect-input"] {
    color: #b0b0b0 !important;
}

/* Target the actual text node inside the input */
div[class*="MultiSelect"] input {
    color: #b0b0b0 !important;
}

/* Specific targeting for the value display */
*[class*="MultiSelect"] *[class*="value"] {
    color: #b0b0b0 !important;
    background-color: #2a2d32 !important;
}


/* Fix the "X selected" text color */
.dash-dropdown-value-count {
    color: #b0b0b0 !important;
}


/* Dropdown popup background */
.dash-dropdown-content {
    background-color: #1f2328 !important;
    border-color: #2a2a2a !important;
}

/* Search input inside dropdown */
.dash-dropdown-search {
    background-color: #1f2328 !important;
    color: #eaeaea !important;
    border-color: #2a2a2a !important;
}

/* Search placeholder */
.dash-dropdown-search::placeholder {
    color: #b0b0b0 !important;
}

/* Options list */
.dash-options-list,
.dash-dropdown-options {
    background-color: #1f2328 !important;
}

/* Individual option items */
.dash-dropdown-option {
    background-color: #1f2328 !important;
    color: #eaeaea !important;
}

/* Option hover state */
.dash-dropdown-option:hover {
    background-color: #2a2d32 !important;
}

/* Selected option */
.dash-dropdown-option.selected {
    background-color: #3a3d42 !important;
}

/* Option text */
.dash-options-list-option-text {
    color: #eaeaea !important;
}



/* Select All / Deselect All buttons */
.dash-dropdown-action-button {
    color: #b0b0b0 !important;
    background-color: transparent !important;
}

.dash-dropdown-action-button:hover {
    color: #eaeaea !important;
    background-color: #2a2d32 !important;
}

/* Search container background */
.dash-dropdown-search-container {
    background-color: #1f2328 !important;
}

/* Search icon color */
.dash-dropdown-search-icon {
    color: #b0b0b0 !important;
}

.view-mode-btn {
    padding: 4px 14px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    margin: 0 -10px;
    min-width: 75px;
    text-align: center;
}



.zone-size-btn {
    font-size: 12px !important;
    padding: 2px 14px !important;
    border-radius: 6px !important;
}


/* ============================================
   DatePickerRange – Dark Mode (Dash 3.x)
   ============================================ */

/* --- Outer input wrapper --- */
.dark-date-picker.dash-datepicker-input-wrapper {
    background-color: #1f2328 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 10px;
    padding: 6px 10px;
    color: #eaeaea;
    overflow: hidden;
}

/* Kill any white background on inner divs inside the wrapper */
.dark-date-picker.dash-datepicker-input-wrapper > div,
.dark-date-picker.dash-datepicker-input-wrapper div {
    background-color: transparent !important;
}

/* --- Input fields --- */
.dark-date-picker .dash-datepicker-input {
    background-color: transparent !important;
    color: #eaeaea !important;
    border: none !important;
    outline: none !important;
    font-size: 14px;
    font-weight: 600;
    caret-color: #a32fba;
}
.dark-date-picker .dash-datepicker-input::placeholder {
    color: #888888;
}

/* --- Arrow & caret icons --- */
.dark-date-picker .dash-datepicker-range-arrow,
.dark-date-picker .dash-datepicker-caret-icon {
    color: #b0b0b0;
}

/* Focus state – match the purple accent without white bleed */
.dark-date-picker.dash-datepicker-input-wrapper:focus-within {
    border-color: #a32fba !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Radix open state */
.dark-date-picker.dash-datepicker-input-wrapper[data-state="open"] {
    border-color: #a32fba !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Kill any outline/ring that could cause white edges */
.dark-date-picker.dash-datepicker-input-wrapper:focus,
.dark-date-picker.dash-datepicker-input-wrapper *:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* ============================================
   Calendar popup wrapper
   ============================================ */

.dash-datepicker-calendar-wrapper {
    background-color: #1a1d21 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 0 !important;
}

/* --- Controls bar (nav arrows, month dropdown, year input) --- */
.dash-datepicker-controls {
    background-color: #1a1d21 !important;
    color: #eaeaea;
}

/* Month nav arrows */
.dash-datepicker-month-nav {
    background: #1f2328 !important;
    border: 1px solid #2a2a2a !important;
    color: #eaeaea !important;
    border-radius: 6px;
}
.dash-datepicker-month-nav:hover:not(:disabled) {
    background: #2a2a2a !important;
}
.dash-datepicker-month-nav:disabled {
    opacity: 0.3;
}
.dash-datepicker-month-nav svg {
    color: #eaeaea;
}

/* Month dropdown button */
.dash-datepicker-controls .dash-dropdown {
    background-color: #1f2328 !important;
    border: 1px solid #2a2a2a !important;
    color: #eaeaea !important;
    border-radius: 6px;
}
.dash-datepicker-controls .dash-dropdown-value,
.dash-datepicker-controls .dash-dropdown-value-item,
.dash-datepicker-controls .dash-dropdown-trigger-icon {
    color: #eaeaea !important;
}

/* Month sizers */
.dash-datepicker-month-sizer {
    color: transparent;
}

/* Year input */
.dash-datepicker-controls .dash-input-container,
.dash-datepicker-controls .dash-input {
    background-color: #1f2328 !important;
    border: 1px solid #2a2a2a !important;
    color: #eaeaea !important;
    border-radius: 6px;
}
.dash-datepicker-controls .dash-input-element {
    background-color: transparent !important;
    color: #eaeaea !important;
    border: none !important;
}

/* Year stepper buttons */
.dash-datepicker-controls .dash-input-stepper {
    background-color: #1f2328 !important;
    border-color: #2a2a2a !important;
    color: #eaeaea !important;
}
.dash-datepicker-controls .dash-input-stepper:hover:not(:disabled) {
    background-color: #2a2a2a !important;
}


/* ============================================
   Calendar tables
   ============================================ */

.dash-datepicker-calendar-container {
    background-color: #1a1d21 !important;
}

.dash-datepicker-calendar {
    background-color: #1a1d21 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 0 !important;
    border-collapse: collapse;
}

.dash-datepicker-calendar-month-header {
    background-color: #1a1d21 !important;
    color: #b0b0b0 !important;
    font-weight: 600;
}

.dash-datepicker-calendar thead th {
    color: #888888 !important;
    background-color: #1a1d21 !important;
}

.dash-datepicker-calendar-week {
    background-color: #1a1d21 !important;
}

.dash-datepicker-calendar td {
    background-color: #1a1d21 !important;
    color: #eaeaea !important;
    border: none !important;
}

.dash-datepicker-calendar-padding {
    background-color: #1a1d21 !important;
}

.dash-datepicker-calendar-date-inside {
    color: #b0b0ff !important;
    cursor: pointer;
}
.dash-datepicker-calendar-date-inside:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

.dash-datepicker-calendar-date-highlighted {
    color: #b0b0ff !important;
}

.dash-datepicker-calendar-date-selected {
    background-color: #a32fba !important;
    color: #ffffff !important;
    border-radius: 4px;
}
.dash-datepicker-calendar-date-selected span {
    color: #ffffff !important;
}

.dash-datepicker-calendar td[aria-disabled="true"] {
    color: #444444 !important;
    background-color: #1a1d21 !important;
}


/* ============================================
   Radix popover layer
   ============================================ */

[data-radix-popper-content-wrapper] {
    z-index: 9999 !important;
}

[data-radix-popper-content-wrapper] > * {
    background-color: #1a1d21 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 0 !important;
}

.dash-datepicker-controls [data-radix-popper-content-wrapper] > * {
    background-color: #1f2328 !important;
    border: 1px solid #2a2a2a !important;
}