/* 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;
}