/* CSS Variables */
:root {
    --body-font: "Inter", sans-serif;
    --transition: all 0.5s ease-in-out;
    --p1: 86, 37, 210;
    --n2: 84, 90, 121;
    --n9: 255, 255, 255;
}

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    background-color: rgb(var(--n9));
    color: rgb(var(--n2));
    font-size: 18px;
    line-height: 150%;
    margin: 0;
    padding: 0;
    font-weight: 400;
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.hero-section {
    flex: 1;
}

footer.footer {
    background-color: #f8f9fa;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    color: #6c757d;
}

a, p, button, span, label, li {
    font-size: 18px;
    line-height: 150%;
    color: rgba(var(--n2), 1);
    font-family: var(--body-font);
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--body-font);
    color: rgba(var(--n2), 1);
    font-weight: 700;
    margin: 0;
    line-height: 120%;
    display: block;
}

h1 { font-size: 76px; }
h2 { font-size: 57px; }
h3 { font-size: 43px; }
h4 { font-size: 32px; }
h5 { font-size: 24px; }
h6 { font-size: 18px; }

@media (max-width: 991px) {
    h1 { font-size: 52px; }
    h2 { font-size: 40px; }
    h3 { font-size: 32px; }
    h4 { font-size: 24px; }
    h5 { font-size: 20px; }
    h6 { font-size: 16px; }
    .pt-120 { padding-top: 60px; }
    .pb-120 { padding-bottom: 60px; }
}

a {
    text-decoration: none;
    color: rgba(var(--n2), 1);
    transition: var(--transition);
}

a:hover {
    color: rgba(var(--p1), 1);
}

/* Scroll To Top Button */
.scrollToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    background-color: rgba(var(--n9), 1);
    color: rgba(var(--p1), 1);
    font-size: 24px;
    text-align: center;
    cursor: pointer;
    transform: translateY(100%);
    transition: all 0.5s ease-in-out;
    z-index: 9;
}

.scrollToTop.active {
    transform: translateY(0%);
}

/* Date Picker */
.date-picker-container {
    width: 400px;
    margin: 20px auto;
    font-weight: bold;
    color: rgb(var(--p1));
    text-align: center;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.date-picker-container label {
    margin-right: 10px;
    color: rgb(var(--p1));
}
#dateSelector {
    display: block;  /* Ensure the date selector is displayed */
    margin: 10px 0;  /* Optional: Add some spacing around the element */
    width: auto;     /* Set the width to auto to avoid any layout conflicts */
    height: auto;    /* Set the height to auto to maintain normal size */
}
#dateSelector {
    display: block !important;  /* Override any conflicting display property */
    visibility: visible !important;  /* Ensure the visibility is set */
}

#dateSelector {
    font-size: 16px;
    padding: 3px;
    border: 1px solid rgb(var(--p1));
    color: rgb(var(--p1));
    border-radius: 3px;
}

@media (max-width: 600px) {
    .date-picker-container {
        width: 100%;
        padding: 0px;
    }

    #dateSelector {
        font-size: 14px;
        padding: 5px;
    }
}

/* Copyright Section */
.copyright {
    font-size: 16px;
    color: rgb(var(--p1));
    text-align: center;
    margin: 10px 0;
    font-family: var(--body-font);
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 140px;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2px;
    transition: opacity 0.5s;
}

.modal-content {
    background-color: #fff;
    margin: 20px;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 650px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;
    z-index: 10001;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    background-color: #f00;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10002;
}

/* Map Container Styles */
#map {
    height: 1000px;
    width: 100%;
    z-index: 1;
}

@media (max-width: 768px) {
    #map {
        height: 500px;
    }
}

/* Plot Div */
#plotDiv {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

@media (max-width: 600px) {
    #plotDiv {
        width: 100%;
        height: auto;
    }
}

/* Tab Container */
.tab-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Tab Header */
.tab-header {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

/* Tab Links */
.tab-link {
    padding: 10px 20px;
    cursor: pointer;
    background-color: rgba(var(--n2), 0.2);
    border: none;
    font-family: var(--body-font);
    font-size: 16px;
    color: rgb(var(--n2));
    transition: background-color 0.3s ease;
}

.tab-link.active {
    background-color: rgba(var(--p1), 0.8);
    color: rgb(var(--n9));
}

.tab-link:not(.active):hover {
    background-color: rgba(var(--n2), 0.4);
}

/* Tab Content */
.tab-content {
    display: none;
    width: 100%;
    padding: 20px;
}

.tab-content.active {
    display: block;
}

/* Table Container Styles with Sticky Header */
.table-container {
    max-height: 400px;
    overflow-y: auto;
    position: relative;
    border: 1px solid #ddd;
    touch-action: pan-x pan-y; /* Allow both horizontal and vertical gestures */
}

.table-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: left;
}

.table-container thead th {
    background-color: #007bff;
    color: #ffffff;
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: center;
    /* Add some box shadow for better visibility when scrolling */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.table-container tbody td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: center;
}

.table-container tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

.table-container tbody tr:hover {
    background-color: #ddd;
}

/* Style for Station Code and Date in Table Headers */
.station-code {
    color: rgb(var(--p1)); /* Primary color (blue) */
    font-weight: bold;
}

.event-date {
    color: rgb(40, 167, 69); /* Success color (green) */
    font-weight: bold;
}

/* Scrollable table for Stats Tab */
#statsTitle {
    margin-bottom: 20px;
}

#tab2 .table-container, #tab3 .table-container {
    max-height: 400px; /* Make it scrollable */
    overflow-y: auto;
    touch-action: pan-x pan-y; /* Allow both horizontal and vertical gestures */
}

/* Adjust title styles for Correlated Events similar to station code and date */
#relatedEventsTitle {
    margin-bottom: 20px;
}

#relatedEventsTitle span {
    font-weight: bold;
}

#relatedEventsTitle .station-code {
    color: #007bff; /* Same blue as the correlated event station codes */
}

#relatedEventsTitle .event-date {
    color: #28a745; /* Same green as the correlated event date */
}

/* Preloader Container */
#preloader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg); /* Background color for preloader */
  z-index: 9999; /* High z-index to overlay on top */
}

/* SVG Animation */
.pl,
.pl__worm {
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.pl {
  animation-name: bump;
  animation-timing-function: linear;
  width: 8em;
  height: 8em;
}

.pl__ring {
  stroke: hsla(var(--hue),10%,10%,0.1);
  transition: stroke 0.3s;
}

.pl__worm {
  animation-name: worm;
  animation-timing-function: cubic-bezier(0.42, 0.17, 0.75, 0.83);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue),10%,10%);
    --fg: hsl(var(--hue),10%,90%);
  }
  .pl__ring {
    stroke: hsla(var(--hue),10%,90%,0.1);
  }
}

/* Animations */
@keyframes bump {
  from,
  42%,
  46%,
  51%,
  55%,
  59%,
  63%,
  67%,
  71%,
  74%,
  78%,
  81%,
  85%,
  88%,
  92%,
  to {
    transform: translate(0, 0);
  }
  44% {
    transform: translate(1.33%, 6.75%);
  }
  53% {
    transform: translate(-16.67%, -0.54%);
  }
  61% {
    transform: translate(3.66%, -2.46%);
  }
  69% {
    transform: translate(-0.59%, 15.27%);
  }
  76% {
    transform: translate(-1.92%, -4.68%);
  }
  83% {
    transform: translate(9.38%, 0.96%);
  }
  90% {
    transform: translate(-4.55%, 1.98%);
  }
}

@keyframes worm {
  from {
    stroke-dashoffset: 10;
  }
  25% {
    stroke-dashoffset: 295;
  }
  to {
    stroke-dashoffset: 1165;
  }
}

/* Modal Content - Responsive Width */
.modal-content {
    width: 45%; /* Reduce width for better balance on desktop */
    max-width: 600px; /* Set a maximum width to avoid excessive size on large screens */
    padding: 20px; /* Maintain padding for consistent spacing */
    font-size: 16px; /* Adjust font size for desktop readability */
    overflow-y: auto; /* Enable vertical scrolling */
}

/* Modal Content for Larger Screens */
@media (min-width: 1200px) {
    .modal-content {
        width: 60%; /* Further reduce width for large desktops */
        max-width: 800px; /* Allow wider modal on very large screens */
    }
}

/* Modal Content for Mobile */
@media (max-width: 768px) {
    .modal-content {
        width: 90%; /* Full-width on smaller screens */
        max-width: 100%; /* Remove max-width for small devices */
        padding: 10px; /* Reduce padding to save space */
        font-size: 14px; /* Smaller font for mobile readability */
    }
}

}

/* Tab Content for Mobile */
@media (max-width: 600px) {
    .tab-content {
        font-size: 12px; /* Smaller font for tabs */
    }

    .table-container {
        overflow-x: auto; /* Enable horizontal scrolling */
        touch-action: pan-x pan-y; /* Allow both horizontal and vertical gestures */
    }

    .table-container table {
        font-size: 10px; /* Reduce table font size */
    }

    .tab-header {
        flex-wrap: wrap; /* Stack buttons on smaller screens */
        justify-content: space-around;
    }

    .tab-link {
        flex: 1 1 30%; /* Flexible sizing for tab buttons */
        font-size: 12px;
    }
}

@media (max-width: 600px) {
    .js-plotly-plot .modebar {
        justify-content: flex-start !important; /* Align the modebar to the left */
        padding-left: 10px; /* Add some spacing from the left */
        transform: translateX(-20px); /* Adjust if overlapping with the plot */
    }
}
/* Prevent body scrolling when modal is open */
body.modal-open {
    overflow: hidden; /* Disable body scrolling */
}

.dragging {
    cursor: grabbing; /* Change cursor when dragging */
}