/*
 * Stylesheet for the South Pole Expedition web application. This file
 * contains layout definitions for the header, navigation, slider, map
 * container and modal dialogs. Colours and spacing aim for a clean,
 * professional appearance suited to a scientific expedition context.
 */

/* Ensure consistent box-sizing across all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

/*
 * Set up a flex container on the body so that the map and data
 * panels can stack vertically and the lower panel can stick to
 * the bottom of the viewport.  Height: 100vh ensures the
 * combined height fills the viewport; overflow-y is hidden to
 * prevent the page itself from scrolling while allowing the
 * data panel to scroll internally.
 */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #FFF; /* light parchment background */
    color: #1A2E3C; /* charcoal navy text */
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* prevent global scroll */
    max-width: 100vw;
    touch-action: pan-x pan-y; /* allow normal touch panning and pinch-zoom */
}

/* Header containing the logo and main navigation */
/* Header containing the logo and main navigation */
.header {
    display: flex;
    align-items: center;
    color: #FFF;
    padding: 1em 1.5em;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
    box-sizing: border-box;
}

.logo {
    display: flex;
    align-items: center;
    padding-right: 1em;
}

.logo-img {
    height: 120px;
    width: auto;
    display: block;
}

/* Reduce header size and prevent horizontal scroll on mobile */
@media (max-width: 768px) {
    .header {
        padding: 0.5em 1em;
    }

    .logo-img {
        height: 60px !important;
    }

    /* Prevent horizontal scrolling on mobile */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    /* Ensure all content respects viewport width */
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Prevent horizontal scroll on containers */
    .container, .modal-content, .slider-wrapper {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Prevent horizontal scroll on tables and data displays */
    table, .backend-table, .data-entry-table {
        overflow-x: auto !important;
        max-width: 100vw !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    /* Ensure images don't overflow */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Prevent horizontal scroll on main content areas */
    #cesiumContainer, .cesium-viewer {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Ensure text doesn't cause horizontal overflow */
    .modal-body, .accordion-body, .data-display {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
}


.main-nav {
    display: flex;
    /* Increase horizontal spacing between menu items for better separation */
    gap: 1.6em;
    margin-right:1rem;

}

/* Webcam link - on desktop it's part of nav, on mobile it's separate */
.webcam-outside {
    /* On desktop, behave like nav link */
    color: #FFF;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.4em;
    padding: 0.4em 0.6em;
    transition: background-color 0.2s, color 0.2s;
    border-radius: 4px;
}
.webcam-outside:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #C5412E;
}

/* Hamburger button - hidden on desktop */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 1em;
    padding: 0.5em;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 3px;
    background: #FFF;
    margin: 4px 0;
    transition: all 0.3s;
}

/* Mobile nav behavior */
@media (max-width: 900px) {
    .header {
        flex-wrap: nowrap;
    }
    
    .logo {
        z-index: 1000001; /* Above the mobile menu */
    }

    .hamburger {
        display: inline-block;
        margin-left: auto;
        margin-right: 0;
        z-index: 1000001; /* Above the mobile menu */
        position: relative;
    }
    
    /* Transform hamburger to X when menu is open */
    .hamburger.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .hamburger.open span:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.open span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    .webcam-outside {
        /* Keep visible, positioned before hamburger */
        font-size: 1.2em;
        padding: 0.3em 0.5em;
        margin-left: auto;
        margin-right: 0.5em;
    }
    
    .main-nav {
        /* Full screen overlay with iOS safe area support */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        /* Use iOS safe area insets for proper full height */
        height: calc(100vh - env(safe-area-inset-bottom));
        height: calc(100vh - constant(safe-area-inset-bottom)); /* fallback for older iOS */
        background: rgba(26, 46, 60, 0.98);
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1.5em;
        z-index: 1000000; /* Above header z-index: 999999 */
        padding-left: 2em;
        padding-top: 120px; /* Space for header */
        /* Add bottom padding for safe area */
        padding-bottom: calc(env(safe-area-inset-bottom) + 2em);
        padding-bottom: calc(constant(safe-area-inset-bottom) + 2em); /* fallback */
        /* Enable scrolling within the menu itself */
        overflow-y: auto;
        /* Prevent scrolling from bubbling to body */
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    
    .main-nav.open {
        display: flex;
    }

    /* Prevent body scrolling when mobile menu is open */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100vh;
        /* Prevent iOS Safari bounce scrolling */
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
    }
    
    .main-nav a {
        font-size: 1.8em;
        padding: 0.5em 1em;
    }
    
    /* Hide close button - we use hamburger transform instead */
    .mobile-menu-close {
        display: none;
    }

    /* Modal properly positioned on mobile */
    .modal {
        position: fixed !important;
        top: 10vh !important;
        left: 2.5vw !important;
        right: 2.5vw !important;
        bottom: 10vh !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        transform: none !important;
        margin: 0 !important;
        border-radius: 8px;
        overflow-y: auto;
    }

    .modal-header {
        padding: 1em;
    }

    .modal-content {
        padding: 1em;
        height: calc(80vh - 60px); /* Adjust for top/bottom margins and header */
        overflow-y: auto;
    }
}

/* Navigation links */
.main-nav a {
    color: #FFF;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.4em;
    padding: 0.4em 0.6em;
    transition: background-color 0.2s, color 0.2s;
    border-radius: 4px;
}
.main-nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #C5412E; /* polar red on hover */
}

/* Style the Science text like a navigation link even though it's not an anchor */
.main-nav .science-text {
    color: #FFF;
    font-weight: 500;
    font-size: 1.4em;
    padding: 0.4em 0.6em;
    border-radius: 4px;
    cursor: default;
    /* Match link hover style so the Science item feels like a menu item */
    transition: background-color 0.2s, color 0.2s;
}

/* Hover effect for Science item to mirror other navigation links */
.main-nav .science-text:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #C5412E;
}

/* Social media links in header */
.social-media-links {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-left: auto;
    margin-right: 1em;
}

.social-media-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #FFFFFF;
    transition: color 0.2s ease;
    border-radius: 4px;
    padding: 4px;
}

.social-media-links a:hover {
    color: #C5412E;
    background-color: rgba(255, 255, 255, 0.1);
}

.social-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Mobile styles for social media links */
@media (max-width: 768px) {
    .social-media-links {
        display: none;
    }

    /* Social media links in mobile menu */
    .social-media-mobile {
        margin-top: 2em;
        padding-bottom: 1em;
    }

    .social-media-mobile a {
        display: flex;
        align-items: center;
        gap: 0.6em;
        padding: 0.6em 1em;
        color: #FFFFFF;
        text-decoration: none;
        font-size: 1.2em;
        border-radius: 6px;
        transition: background-color 0.2s ease;
    }

    .social-media-mobile a:hover {
        background-color: rgba(247, 243, 228, 0.1);
    }

    .social-media-mobile .social-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    /* Hide zoom controls on mobile to prevent overlay issues */
    .zoom-controls {
        display: none !important;
    }
}

/* Hide social media mobile section on desktop */
@media (min-width: 769px) {
    .social-media-mobile {
        display: none;
    }
}

/* Countdown banner displayed when the expedition has not yet begun */
/* Countdown banner displayed when the expedition has not yet begun */
.countdown {
    text-align: center;
    padding: 0.5em;
    background-color: #C5412E; /* polar red */
    color: #FFFFFF;
    border-bottom: 1px solid #C5412E;
    font-weight: bold;
}

/* Countdown overlay displayed over the map when the expedition has not
   yet started.  It covers the upper portion of the map and centres
   its text.  The overlay is hidden by default via the "hidden"
   class; JavaScript removes this class when a countdown is active. */
.countdown-overlay {
    /* Use fixed positioning so the overlay remains centred over
       the map regardless of scroll.  The overlay covers the
       width of the viewport and is vertically offset from the
       top by 25%. */
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    text-align: center;
    font-weight: bold;
    pointer-events: none;
    width: 100%;
    max-width: 100%;
}
.countdown-overlay .countdown-title {
    font-size: 2.2em;
    color: #C5412E;
    text-shadow: 0 0 4px rgba(0,0,0,0.4);
    margin-bottom: 0.3em;
}
.countdown-overlay .countdown-time {
    font-size: 2.6em;
    color: #C5412E;
    text-shadow: 0 0 4px rgba(0,0,0,0.4);
}

/* Cesium container occupies a large portion of the viewport. A fixed
   height ensures consistent behaviour regardless of content height. */
.cesium-container {
    flex: 1 1 auto;
    min-height: 49vh;
    max-height:65vh;
    width: 100%;
    position: relative; /* enable positioning of overlay elements like slider */
}

/* Zoom controls overlay */
.zoom-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 5;
}
.zoom-controls button {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background-color: #1F537E;
    color: #FFFFFF;
    font-size: 1.2em;
    line-height: 1;
    cursor: pointer;
}
.zoom-controls button:hover {
    background-color: #315E8A;
}

/* Animation controls styling */
.animation-controls {
    position: absolute;
    bottom: 20px;
    right: 70px;
    z-index: 1010; /* Above modals and tooltips */
}
.animation-controls button {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background-color: #1F537E;
    color: #FFFFFF;
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s;
}
.animation-controls button:hover {
    background-color: #315E8A;
}
.animation-controls button.active {
    background-color: #C5412E;
}

/* Hide animation controls on mobile */
@media (max-width: 900px) {
    .animation-controls {
        display: none;
    }
}

/* Pulsating red dot marker used in trip heading and slider marker */
.current-dot-inline, .current-day-marker {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #C5412E;
    animation: pulse 1s infinite;
}

/* Live stream indicator label shown in the navigation when a stream is live */
.live-label {
    display: none;
    margin-left: 0.4em;
    padding: 0.1em 0.4em;
    background-color: #C5412E;
    color: #FFFFFF;
    border-radius: 4px;
    font-size: 0.8em;
    animation: pulseLabel 1s infinite;
    vertical-align: middle;
}

/* Smaller marker for slider bar */
.current-day-marker {
    position: absolute;
    /* Place marker vertically centred relative to the slider wrapper.  Left
       will be set dynamically via JavaScript while top remains at
       50%.  The transform ensures the marker is centred on both axes. */
    /* The marker will be positioned via JavaScript to align with the
       slider track.  Only the horizontal transform is applied here to
       centre the marker over its calculated left coordinate. */
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}

@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.4; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
}

/* Pulse animation for the LIVE label that does not include translation.
   This scales the label slightly and animates opacity. */
@keyframes pulseLabel {
    0% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 0.9; }
}

/* Hide Cesium selection indicator and info box thoroughly */
.cesium-viewer .cesium-infoBox,
.cesium-viewer .cesium-infoBox-title,
.cesium-viewer .cesium-infoBox-defaultHeader,
.cesium-viewer .cesium-selectionIndicator,
.cesium-viewer .cesium-selection-indicator,
.cesium-viewer .cesium-selectionIndicatorContainer {
    display: none !important;
}

/* Hide Cesium's default selection indicator and info box (green crop corners and title) */
.cesium-viewer .cesium-infoBox,
.cesium-viewer .cesium-selection-indicator {
    display: none !important;
}

/* Hide Cesium compass and navigation widgets */
.cesium-viewer-navigationHelpButtonContainer,
.cesium-navigationHelpButton,
.cesium-compass,
.cesium-viewer .cesium-viewer-toolbar,
.cesium-viewer .cesium-navigation-help,
.cesium-viewer-bottom {
    display: none !important;
}

/* Top gradient overlay to improve menu readability */
.top-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
    z-index: 2;
}

/* Slider overlay and day information */
/* Slider overlay is positioned over the bottom of the map. It uses a
   reversed gradient similar to the header for readability. */
.slider-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Reduce vertical padding so the slider sits tightly against the gradient */
    /* Increase padding to provide breathing room for the slider and
       day label.  The first value applies to the top, giving more
       space above the slider track. */
    padding: 1.5em 1em 1em;
    color: #FFFFFF;
    z-index: 2;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}
/* Additional class to distinguish slider overlay from potential future wrappers */
/* .slider-overlay inherits positioning from .slider-wrapper */

/* Customise the slider track colour using accent-color (modern browsers) */
#daySlider {
    width: 80%;
    max-width: 600px;
    accent-color: #C5412E; /* polar red for high contrast on dark gradient */
    background: none;
}

/* Custom slider styling for WebKit browsers */
#daySlider::-webkit-slider-runnable-track {
    height: 8px;
    background: #ffffff;
    border-radius: 4px;
}
#daySlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #C5412E;
    border: none;
    margin-top: -7px; /* centre thumb on track */
    cursor: pointer;
}
/* Custom slider styling for Firefox */
#daySlider::-moz-range-track {
    height: 8px;
    background: #ffffff;
    border-radius: 4px;
}
#daySlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #C5412E;
    border: none;
    cursor: pointer;
}

/* Day information next to the slider */
.day-display {
    margin-top: 0.3em;
    font-weight: bold;
    font-size: 1em;
    color: #FFFFFF;
    text-align: center;
}

/* Reduce day label font size on mobile */
@media (max-width: 768px) {
    .day-display {
        font-size: 0.8em !important; /* Keep normal size for slider labels */
    }

    /* Reduce countdown overlay font sizes on mobile */
    .countdown-overlay .countdown-title {
        font-size: 1.4em !important; /* Smaller title on mobile */
    }

    .countdown-overlay .countdown-time {
        font-size: 1.8em !important; /* Smaller time on mobile */
    }
}

/* Modal overlay dims the page when a modal is open */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000001;
}

/* Hide elements by adding the 'hidden' class */
.hidden {
    display: none;
}

/* Overlay for map labels. Displays selected day information near the
   current marker. We use a semi‑transparent background for readability. */
.map-label {
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    color: #1A2E3C;
    padding: 0.3em 0.6em;
    border-radius: 4px;
    font-size: 0.9em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

@media (max-width: 900px) {
    .map-label {
        z-index: 1; /* Below mobile menu */
        font-size: 0.6em !important;
    }
    .top-gradient {
        height:100px;
    }
}

/* Expedition finished overlay */
.expedition-finished-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.finished-message {
    position: relative;
    background: linear-gradient(135deg, #1a2e3c, #2a4a5a);
    border: 2px solid #c5412e;
    border-radius: 15px;
    padding: 2em;
    text-align: center;
    color: #f7f3e4;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    max-width: 500px;
    margin: 1em;
}

.finished-message h2 {
    margin: 0 0 1em 0;
    font-size: 2.2em;
    color: #c5412e;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.close-finished-overlay {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2em;
    color: #f7f3e4;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.close-finished-overlay:hover {
    opacity: 1;
}

.finished-message p {
    margin: 0.5em 0;
    font-size: 1.2em;
    line-height: 1.4;
}

/* Backend data entry section */
.data-entry-section {
    margin: 1em 0;
    overflow-x: auto;
}

.data-entry-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.9em;
}

.data-entry-table thead th {
    background-color: #315E8A;
    color: #FFFFFF;
    font-weight: bold;
    padding: 0.75em 0.5em;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 10;
}

.data-entry-table tbody td {
    padding: 0.5em;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}

.data-entry-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.data-entry-table tbody tr:hover {
    background-color: #e9ecef;
}

.category-cell {
    background-color: #315E8A !important;
    color: #FFFFFF !important;
    font-weight: bold;
    width: 120px;
    white-space: nowrap;
}

/* Removed category-specific row colors - using standard alternating white/grey */

/* Input styling for better UX */
.data-entry-table input[type="number"] {
    width: 80px;
    padding: 0.25em 0.5em;
    border: 1px solid #ced4da;
    border-radius: 3px;
    text-align: center;
}

.data-entry-table input[type="time"] {
    width: 100px;
    padding: 0.25em 0.5em;
    border: 1px solid #ced4da;
    border-radius: 3px;
}

.data-entry-table input[type="text"] {
    width: 100px;
    padding: 0.25em 0.5em;
    border: 1px solid #ced4da;
    border-radius: 3px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .data-entry-table {
        font-size: 0.8em;
    }

    .category-cell {
        width: 100px;
    }

    .data-entry-table input {
        width: 70px;
    }
}

/* Modal dialog styling */
/* Modal dialog styling */
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000002;
    box-sizing: border-box;
    /* Allow modals to occupy more horizontal space up to a maximum of
       1000px.  The width defaults to 90% of the viewport.  Height is
       dynamic; overflow-y is enabled if content exceeds the available
       space. */
    max-width: 1000px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    color: #1A2E3C;
}

/* Tabs inside static modals */
.tabs {
    display: flex;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 0.5em;
}
.tabs .tab-link {
    background: #e9ecef;
    border: 1px solid #dee2e6;
    border-bottom: none;
    padding: 0.4em 0.8em;
    margin-right: 0.2em;
    cursor: pointer;
    color: #1A2E3C;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.tabs .tab-link.active {
    background: #315E8A;
    color: #FFFFFF;
}
.tab-content {
    display: none;
    padding: 0.5em 0;
}
.tab-content.active {
    display: block;
}

/* Accordion styling */
.accordion {
    border-top: 1px solid #dee2e6;
}
.accordion-header {
    width: 100%;
    background: #e9ecef;
    border: 1px solid #dee2e6;
    border-bottom: none;
    padding: 0.4em 0.6em;
    text-align: left;
    cursor: pointer;
    font-weight: normal;
    font-size: 1.1em;
    color: #1A2E3C;

    /* Create space for plus/minus indicator */
    position: relative;
    padding-right: 2em;
}

/* Display a plus sign on accordion headers.  When the header has the
   ``active`` class (added via JavaScript when the section is open),
   the symbol changes to a minus sign. */
.accordion-header::after {
    content: '+';
    position: absolute;
    right: 0.6em;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: #1A2E3C;
}
.accordion-header.active::after {
    content: '−';
}
.accordion-body {
    padding: 0.4em 0.6em;
    border: 1px solid #dee2e6;
    border-top: none;
    display: none;
    background: #ffffff;
    color: #1A2E3C;
}

/* Modal header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 1em;
    border-bottom: 1px solid #dee2e6;
    background-color: #315E8A;
    color: #FFF;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5em;
}

/* Close modal button */
.close-modal {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #FFFFFF;
}

.modal-content {
    padding: 1em;
    font-size: 1.15em;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th, .data-table td {
    text-align: left;
    padding: 0.4em 0.5em;
    border-bottom: 1px solid #dee2e6;
}

.data-table th {
    background-color: #f8f9fa;
    font-weight: bold;
}

/* Mark cells where values are missing or estimated */
.estimate {
    color: #6c757d;
    font-style: italic;
}

.missing {
    color: #adb5bd;
    font-style: italic;
}

/* Small information buttons next to field names. These buttons appear as
   subtle, circular icons with a lower contrast to avoid distracting from
   the primary data. The title attribute on each button displays the
   description when hovered. */
/* Small information buttons next to field names */
/*
 * Small information buttons next to field names.  Increase the size and
 * adjust padding so the icon is clearly visible.  Use a polar red
 * background by default for high contrast against the parchment
 * background.  The tooltip is displayed via the ::after pseudo‑element.
 */
.info-button {
    margin-left: 0.3em;
    border: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 0.9em;
    text-align: center;
    cursor: help;
    color: #FFFFFF;
    padding: 0 3px;
    position: relative;
    background-color: #a0a0a0; /* polar red for visibility */
}
.info-button:hover {
    background-color: #315E8A;
}

/* Tooltip for info buttons. The description is stored in data-tooltip and
   displayed on hover.  Position the tooltip below the button and center it
   horizontally.  The max-width prevents overflow on small screens. */
.info-button::after {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    top: 130%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #315E8A;
    color: #FFFFFF;
    padding: 0.4em 0.6em;
    border-radius: 2px;
    font-size: 14px;
    white-space: normal;
    min-width: 150px;
    z-index: 1000;
    
}
.info-button:hover::after {
    display: block;
}

/* Style for the heading above the data display */
.data-heading {
    margin: 0 0 0.5em 0;
    font-size: 1.2em;
    font-weight: bold;
    color: #1F537E;
}

/* Limit body map height to a maximum of 500px */
.body-map {
    max-height: 500px;
    max-width: 250px;
    margin-left: auto; /* right-align the body map within its container */
}

/* Data display area between map and slider */
/* Data display area between map and slider */
/*
 * The data display panel sits underneath the map and grows to
 * fill the remaining vertical space.  We apply flex: 1 so it
 * occupies all available height left after the map (60vh) and the
 * slider overlay.  Horizontal overflow is hidden and vertical
 * overflow scrolls inside the panel.
 */
.data-display {
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
    background: #ffffff;
    border: 0px;
    border-radius: 4px;
    padding: 0.9em 0.9em 0 0.9em!important;
    box-shadow: 0;
    display: flex;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap;
    color: #1A2E3C;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    box-sizing: border-box;
    z-index:90;
}

/* Stack panels on mobile/tablet */
@media (max-width: 900px) {
    .data-display {
        flex-direction: row;
        flex-wrap: wrap;
        max-height: none;
        overflow-y: visible;
    }
    .trip-data {
        flex: 1 1 100%!important;
        width: 100%;
        order: 1;
    }
    .biometric-values {
        flex: 0 0 30%;
        width: 30%;
        order: 2;
        display: flex;
        flex-direction: column;
    }
    .body-map-container {
        flex: 0 0 70%;
        width: 70%;
        order: 3;
        align-items: flex-end;
        display: flex;
        flex-direction: column;
    }
    .body-map {
        max-width: 250px;
        width: 100%;
    }
    .trip-field {
        flex: 0 1 31%!important;
    }
    .bio-field {
        flex: 0 1 47%!important;
    }
}

/* Trip data (left pane) */
/* Trip data (left pane: 50% width) */
.trip-data {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.trip-category h4 {
    margin: 0 0 0.3em 0;
    font-size: 1.1em;
    color: #1F537E;
}

.trip-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em 0.6em;
}

.trip-field {
    display: flex;
    flex-direction: column;
    background-color: #F7F6F3;
    border-radius: 4px;
    padding: 0.3em 0.4em;
    /* Give each field a flexible width of roughly 10% of the row so
       several fields can fit per row without causing horizontal
       scrolling.  The min-width of 0 allows the browser to shrink
       fields as necessary when space is tight. */
    flex: 0 1 17%;
    min-width: 0;
}

.trip-field .field-name {
    font-weight: bold;
    color: #1A2E3C;
    font-size: 0.75em;
}
.trip-field .field-value {
    font-size: 1em;
    color: #C5412E;
}
.trip-field .field-unit {
    font-size: 0.75em;
    color: #6c757d;
}

/* Biometric values pane (middle 28%) */
.biometric-values {
    flex: 1 1 28%;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

/* Body map container (rightmost 8%) */
.body-map-container {
    flex: 1 1 8%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.body-map {
    position: relative;
    width: 100%;
    aspect-ratio: 348 / 717;
    /* The height adjusts automatically based on width to match the
       silhouette image proportion. */
    margin-bottom: 0.5em;
    /* Use custom silhouette image for the body map.  No background
       colour or border is applied, allowing the image itself to
       define the visual area. */
    background-image: url('silhouette.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: transparent;
    border: none;
    border-radius: 0;
}

/* Body map info button positioned to the left of the head */
.body-map-info-button {
    position: absolute !important;
    top: 4% !important; /* Same as head position */
    left: 25% !important; /* To the left of head (head is at 50%) */
    margin: 0 !important; /* Reset any inherited margins */
    border: none !important;
    border-radius: 50% !important;
    width: 15px !important;
    height: 15px !important;
    line-height: 16px !important;
    font-weight: bold !important;
    font-size: 0.8em !important;
    font-family: inherit !important;
    text-align: center !important;
    cursor: help !important;
    color: #FFFFFF !important;
    padding: 0 3px !important;
    background-color: #a0a0a0 !important;
    display: inline-block !important;
    vertical-align: baseline !important;
    box-sizing: border-box !important;
    transform: none !important;
    flex-shrink: 0 !important;
}

.garmin-link {
    cursor: pointer;
}

.body-map-info-button:hover {
    background-color: #315E8A !important;
}

/* Tooltip for body map info button - identical to info-button */
.body-map-info-button::after {
    content: attr(data-tooltip) !important;
    display: none !important;
    position: absolute !important;
    top: 130% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: #315E8A !important;
    color: #FFFFFF !important;
    padding: 0.4em 0.6em !important;
    border-radius: 2px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    white-space: normal !important;
    min-width: 150px !important;
    max-width: none !important;
    z-index: 1000 !important;
    border: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.body-map-info-button:hover::after {
    display: block !important;
}

.body-part {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #315E8A; /* default medium blue */
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65em;
    color: #FFF;
}

/* Positioning of individual body parts (approximate) */
/* Adjusted positions to better match the provided body silhouette */
/* Updated positions to better align with the provided silhouette.  These values
   are approximate but place markers closer to the anatomical locations on
   the figure.  The percentages refer to top and left relative to the
   container size. */
.head { top: 4%; left: 50%; }
.neck { top: 13%; left: 50%; }
.left-shoulder { top: 18%; left: 30%; }
.right-shoulder { top: 18%; left: 70%; }
.left-elbow { top: 39%; left: 24%; }
.right-elbow { top: 39%; left: 76%; }
.left-hand { top: 51%; left: 17%; }
.right-hand { top: 51%; left: 83%; }
.center-back { top: 30%; left: 50%; }
.center-stomach { top: 42%; left: 50%; }
.center-lower-back { top: 50%; left: 50%; }
.left-hip { top: 56%; left: 37%; }
.right-hip { top: 56%; left: 64%; }
.left-knee { top: 75%; left: 39%; }
.right-knee { top: 75%; left: 61%; }
.left-foot { top: 95%; left: 43%; }
.right-foot { top: 95%; left: 58%; }

/* Biometric table */
.biometric-category h4 {
    margin: 0 0 0.3em 0;
    font-size: 1.1em;
    color: #1F537E;
}
/* Allow biometric category list to expand within the 40% column */
.biometric-data .biometric-category {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.biometric-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em 0.6em;
}
.bio-field {
    display: flex;
    flex-direction: column;
    background-color: #F7F6F3;
    border-radius: 4px;
    padding: 0.3em 0.4em;
    /* Allocate a flexible width so biometric fields wrap elegantly and
       do not trigger horizontal scrolling.  Each field gets roughly
       10% of the row width. */
    flex: 0 1 32%;
    min-width: 0;
}

@media (max-width: 900px) {
    .bio-field {
        flex: 0 0 45%; /* Two columns on mobile */
    }
}
.bio-field .field-name {
    font-weight: bold;
    color: #1A2E3C;
    font-size: 0.75em;
}
.bio-field .field-value {
    font-size: 1.0em;
    color: #C5412E;
}
.bio-field .field-unit {
    font-size: 0.7em;
    color: #6c757d;
}

/* Backend data entry table category separators */
.category-separator .category-header {
    background-color: #315E8A;
    color: #FFF;
    font-weight: bold;
    text-align: left;
    padding: 0.75em 1em;
    font-size: 1.1em;
    border: none;
    border-bottom: 2px solid #dee2e6;
}

.category-separator {
    border-top: 3px solid #315E8A;
}

/* Make mood emoji bigger in frontend */
.bio-field .field-value.emoji {
    font-size: 1.5em;
    line-height: 1;
}

/* Custom Tooltip Styles */
.custom-tooltip {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    border: 0px solid #1A2E3C;
    border-radius: 8px;
    padding: 15px;
    max-width: 280px;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000003;
    pointer-events: all;
    backdrop-filter: blur(5px);
}

.custom-tooltip.hidden {
    display: none;
}

.close-tooltip {
    position: absolute;
    top: 5px;
    right: 8px;
    background: none;
    border: none;
    font-size: 18px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-tooltip:hover {
    background-color: #f0f0f0;
    color: #333;
}

.tooltip-content {
    font-family: Arial, sans-serif;
    color: #1A2E3C;
}

.tooltip-content h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: bold;
}

.tooltip-content p {
    margin: 6px 0;
    font-size: 14px;
    line-height: 1.4;
}

.tooltip-content strong {
    color: #1A2E3C;
}

/* Reduce tooltip size on mobile */
@media (max-width: 768px) {
    .custom-tooltip {
        padding: 8px !important;
        max-width: 180px !important;
        min-width: 130px !important;
    }

    .tooltip-content h3 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    .tooltip-content p {
        font-size: 12px !important;
        margin: 4px 0 !important;
        line-height: 1.3 !important;
    }

    .close-tooltip {
        font-size: 16px !important;
        top: 3px !important;
        right: 6px !important;
    }
}

/* Adjust body map height for shorter desktop windows to prevent scrolling in dataDisplay */
@media (min-width: 901px) and (max-height: 1299px) {
    .data-display {
        min-height: 42vh;
    }
    .body-map {
        max-height: 39vh; /* Limit to 35% of viewport height for shorter screens */
        height: auto;
    }
    .trip-field .field-name {
        font-size: 0.65em;
    }
      .trip-field .field-value {
        font-size:0.8em
      }
      .trip-category h4 {
        font-size:0.9em
      }
}