/* Import Poppins and Manrope fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

/* Apply Poppins font to all headings globally */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
}

/* Apply Manrope font to all body text globally */
body, p, div, span, li, a, input, button {
    font-family: 'Manrope', sans-serif;
}

/* Active accordion header (when opened) */
.accordion-button {
    background-color: #E4E2DE !important;  /* Dark background for active item */
    color: #202020 !important;  /* Light text color for active item */
    border-color: #202020 !important;  /* Border color matching the background */
}

/* Non-active accordion header (when closed) */
.accordion-button.collapsed {
    background-color: #FFFFFF !important;  /* Light background for non-active item */
    color: #202020 !important;  /* Dark text color for non-active item */
    border-color: #F4F0EC !important;  /* Border color matching the background */
}

/* Remove focus outline */
.accordion-button:focus {
    box-shadow: none !important;
}

/* The overall track of the slider */
.rc-slider-track {
    background-color: #FF9A3D !important;  /* Color of the active range track */
    opacity: 0.5
}

/* The slider handle (the circles that you drag) */
.rc-slider-handle {
    border-color: #FF9A3D !important;  /* Border color of the handles */
    background-color: #F4F0EC !important;  /* Background color of the handles */
    opacity: 0.88
}

/* The slider rail (the inactive part of the track) */
.rc-slider-rail {
    background-color: #E4E2DE !important;  /* Color of the inactive range track */
}

/* The hover and focus state of the handles */
.rc-slider-handle:hover,
.rc-slider-handle:focus {
    border-color: #202020 !important;  /* Border color when hovered or focused */
    background-color: #FF9A3D !important;  /* Background color when hovered or focused */
}

/* Optional: Tooltip color (if tooltips are enabled) */
.rc-slider-tooltip-inner {
    background-color: #202020 !important;  /* Tooltip background color */
    color: #F4F0EC !important;  /* Tooltip text color */
}

.rc-slider-handle:active,
.rc-slider-handle:focus,
.rc-slider-handle-click-focused {
    border-color: #FF9A3D !important; /* Ensure border color matches your custom color */
    box-shadow: none !important; /* Remove any blue shadow around the handle */
}

.rc-slider-dot {
    background-color: #E4E2DE !important; /* Light grey for inactive dots */
    border-color: #E4E2DE !important;
    opacity: 0.8;
}

/* Style for when the tick is within the selected range */
.rc-slider-dot-active {
    background-color: #FF9A3D !important; /* Set the color of active minor tick marks */
    border-color: #FF9A3D !important;
}

/* Remove any default hover or focus color for dots */
.rc-slider-dot:hover {
    background-color: #FF9A3D !important;
    border-color: #FF9A3D !important;
}

/* dcc.Loading component with transparent background */
/* this defines a style for a Loading component with parent_className='loading-wrapper' */
.loading_wrapper > div {
    visibility: visible !important;
}

/* removes transparency of plotly hoverbox, see https://community.plotly.com/t/setting-background-colour-for-hoverbox-extra/79272 */
.plotly .hoverlayer .hovertext rect {
  /* fill: white !important; */
  fill-opacity: 1 !important;
}

/* sets text color for plotly hoverbox */
.plotly .hoverlayer .hovertext text {
  fill: black !important;
}

/* customizing backdrop of offcanvas (bootstrap) component to have higher opacity (default is 0.5) */
.custom_offcanvas_backdrop {
    opacity: 0.3 !important;
}

/* disable offcanvas on small screens (mobile) */
@media (max-width: 576px) {
  .offcanvas.offcanvas-start.show {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* shrink (vertically) disclaimer modal on mobile so that "Understood" button is visible */
@media (max-width: 576px) {
  .disclaimer-modal-body {
     max-height: 60vh; /* 60% of viewport height */
     overflow-y: scroll; /* Enables vertical scrolling if content exceeds max height */
  }
}

a {
    color: #FF9A3D; /* Change this to the color you want */
    text-decoration: underline; /* Optional: remove underline */
}

a:hover {
    color: #ce6f14; /* Optional: Change color on hover */
    text-decoration: underline; /* Optional: add underline on hover */
}

#status-tabs-map_or_table .nav-link {
    color: #ce6f14 !important;  /* Inactive tab color */
}

#status-tabs-map_or_table .nav-link.active {
    color: black !important; /* Active tab color */
}

#project-offcanvas .offcanvas-header .offcanvas-title {
    color: #202020; /* Example color */
    font-size: 26px; /* Example font size */
    font-weight: bold; /* Example font weight */
    text-align: center; /* Center the title */
    margin-top: 15px;
}

input[type="checkbox"]:checked {
    background-color: #FF9A3D;
    border-color: #FF9A3D;
}

input[type="checkbox"] {
    accent-color: #FF9A3D;  /* This property changes the color for checked and unchecked states in modern browsers */
}

input[type="radio"]:checked {
    background-color: #FF9A3D;
    border-color: #FF9A3D;
}

input[type="radio"] {
    accent-color: #FF9A3D;
}

#home-tabs-map_or_table .nav-link {
    color: #ce6f14 !important;  /* Inactive tab color */
}

#home-tabs-map_or_table .nav-link.active {
    color: black !important; /* Active tab color */
}

/* Global style for buttons */
.btn {
    background-color: #FF9A3D;
    color: white; /* Ensures text is visible */
    border-color: #FF9A3D;
}

/* Hover effect for buttons */
.btn:hover {
    background-color: #ce6f14;
    border-color: #ce6f14;
}

.alert {
    background-color: rgba(252, 239, 210, 0.5); /* Background color with adjustable transparency */
    color: black; /* Text color for readability */
    border-color: rgba(252, 239, 210, 0.9); /* Border color matches background */
}

/* making dbc.Tooltip wider to fit more text (responsive width, only applied if needed) */
.tooltip-inner {
    max-width: 900px;
}