:root {
    --sylcast-spring: #8DA939;
    --sylcast-spring-transparent: #8da939;
    --sylcast-summer: #13381C;
    --sylcast-september: #E0B84C;
    --sylcast-october: #A86E27;
    --body-text-color: #36454F;
  }

body, html, #react-entry-point {
    height: 100%;
    width: 100%;
    margin: 0;
}

* {
    font-family: Helvetica, sans-serif;
}

.custom-card:hover {
    transform: translateY(-5px); /* Lifts the card up slightly */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important; /* Deepens the shadow */
    border-color: #007bff; /* Optional: changes border to primary color */
    cursor: pointer;
}

/* Sensor details: fixed-height image area so cards have consistent layout */
.sensor-card-img-wrapper {
    border-radius: var(--bs-card-border-radius) 0 0 var(--bs-card-border-radius);
}

.sensor-card-img-wrapper img {
    display: block;
}

/* Map view: full visible height on mobile (100dvh = dynamic viewport, avoids address-bar overflow) */
.map-view-main-window {
    position: relative;
    height: calc(100vh - 3.5rem);
    height: calc(100dvh - 3.5rem);
    min-height: calc(100vh - 3.5rem);
    min-height: calc(100dvh - 3.5rem);
}

/* Map point modal: only cover the map area (main window), not the navbar */
.map-view-main-window .modal-backdrop {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
}
.map-point-modal-below-navbar.modal {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1055;
}
.map-point-modal-below-navbar .modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100%;
}
.map-point-modal-below-navbar .modal-content {
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    background-color: rgb(248, 248, 240);
}
.map-point-modal-below-navbar .modal-header,
.map-point-modal-below-navbar .modal-body {
    background-color: rgb(248, 248, 240);
}
.map-point-modal-below-navbar .modal-body {
    flex: 1;
    min-height: 0;
}
/* Loading wrapper and body must fill modal body so graph/spinner use full height */
.map-point-modal-below-navbar .modal-body > div {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.map-point-modal-below-navbar #map-point-modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.map-point-modal-below-navbar #map-point-modal-body .js-plotly-plot,
.map-point-modal-below-navbar #map-point-modal-body .plotly {
    flex: 1;
    min-height: 0;
}
.map-point-modal-below-navbar #map-point-modal-body > div {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Navbar and its collapse must sit above map iframe (position:absolute) on mobile */
#navbar {
    position: relative;
    z-index: 1050;
    box-shadow: 0 1px 1px var(--sylcast-spring-transparent);
}

.navbar-nav .nav-link {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.navbar-nav .form-select {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Language selector EN | FR: underline active, hover for inactive */
a.locale-link:hover {
    text-decoration: underline !important;
}

/* Page content: thin scrollbar so it uses minimal horizontal space */
.page-content-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}
.page-content-scroll::-webkit-scrollbar {
    width: 6px;
}
.page-content-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.page-content-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
}
.page-content-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

/* Overview layout: responsive padding and margin for mobile */
.overview-container {
    box-sizing: border-box;
}

@media (max-width: 767.98px) {
    .overview-container {
        padding: 12px 10px !important;
    }
}

@media (min-width: 768px) {
    .overview-container {
        min-width: 0; /* allow flex/grid children to shrink */
    }
}