/* Global styles for body and html */
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /* Ensures padding and border are included in width and height calculations */
    height: 100%;  /* Ensure body and html take up full height */
    width: 100%;   /* Ensure body and html take up full width */
    font-family: Arial, sans-serif; /* Set a default font */
    overflow-x: hidden; /* Prevent horizontal scrolling if content overflows */
}

/* Ensure that all elements use the border-box model */
*, *::before, *::after {
    box-sizing: inherit;
}

/* General tab styles */
.custom-tab {
    opacity: 0.7;  /* 70% opacity for inactive tabs */
    border: 1px solid rgba(0, 0, 0, 0.7); /* 70% border opacity */
    /* transition: background-color 0.3s ease, opacity 0.3s ease; Smooth transition */
    padding: 10px !important; /* Remove padding */
    margin: 0;   /* Remove margin */
    height: 40px;  /* Set the height explicitly to 40px */
    display: flex;  /* Use flexbox for centering */
    justify-content: center;  /* Horizontally center the tab text */
    align-items: center;  /* Vertically center the tab text */
    box-sizing: border-box;  /* Ensure borders are included in the size calculation */
    overflow: hidden;  /* Prevent text overflow */
    font-size: 14px;  /* Adjust font size */
    line-height: normal;  /* Ensure no strange line-height issues */
}

/* Specific rounding for the first tab */
.custom-tab:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

/* Specific rounding for the last tab */
.custom-tab:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* No border-radius for middle tabs */
.custom-tab:not(:first-child):not(:last-child) {
    border-radius: 0;
}

/* Styles for the selected (active) tab */
.custom-tab--selected {
    opacity: 1 !important; /* Full opacity for active tab */
    background-color: #007bff !important; /* Blue background for active tab */
    color: white !important; /* White text for active tab */
    border-color: rgba(0, 0, 0, 1); /* Full border opacity for active tab */
}

/* Hover effect for inactive tabs */
.custom-tab:hover {
    opacity: 1; /* Hover effect to show full opacity */
}

/* Styling for the tabs container */
.dash-tabs {
    border-radius: 10px;  /* Keep the container rounded */
    padding: 10px;  /* Remove padding around the container */
    background-color: transparent;  /* Make the container background transparent */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 40px;  /* Set the container height to match the tabs */
    display: flex;  /* Flexbox ensures tabs are displayed in a row */
}

/* Add a delay to the loading spinner for smoother transitions */
._dash-loading-callback {
    animation: spinnerDelay 0.3s forwards; /* Adjust delay time here */
    transition: opacity 0.5s ease-in-out; /* Smooth in/out effect */
}

@keyframes spinnerDelay {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Container for Analysis and Download Filters */
.analysis-filters-container,
.download-filters-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto; /* Centers the container */
}

/* Individual Filter Tile for Analysis */
.analysis-filter-tile {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 8px; /* Increased border-radius for better aesthetics */
    padding: 15px; /* Increased padding for better spacing */
    margin: 5px 5px; /* Adjusted margin for better spacing */
    width: 95%; /* Approximately one-third of 100% minus margins */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    background-color: #ffffff;
    box-sizing: border-box; /* Ensures padding and border are included in the width */
}

/* Individual Filter Tile for Download */
.download-filter-tile {
    border: 1px solid #ccc;
    border-radius: 8px; 
    padding: 20px; 
    margin: 10px 5px; 
    width: 48%; /* Approximately half of 100% minus margins */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    background-color: #ffffff;
    box-sizing: border-box; 
}
.dash-spinner-container {
    z-index: 5000 !important;
}
/* Responsive Design: Stack tiles vertically on medium screens */
@media (max-width: 1024px) {
    .analysis-filter-tile {
        width: 100%; /* Two tiles per row */
    }
    .download-filter-tile {
        width: 100%; /* Full width on medium screens */
    }
}

/* Responsive Design: Stack tiles vertically on small screens */
@media (max-width: 768px) {
    .analysis-filter-tile,
    .download-filter-tile {
        width: 100%;
        margin-left: 40px; /* Full width on small screens */
    }
}

.funding-row {
  gap: 24px;
}
.funding-col {
  text-align: left;
  padding: 8px 12px;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .funding-row {
    flex-direction: column;
    align-items: center;
  }
  .funding-col {
    min-width: 220px;
    width: 100%;
    text-align: center;
  }
}

/* Hover Effects for Tiles */
.analysis-filter-tile:hover,
.download-filter-tile:hover {
    box-shadow: 4px 4px 12px rgba(0,0,0,0.2);
    transition: box-shadow 0.3s ease;
}

/* Button Styling for Apply Filters and Download */
#apply-filters-button,
#download-button {
    padding: 10px 20px; 
    font-size: 16px; 
    background-color: #008CBA; /* Adjust color as needed */
    color: white; 
    border: none; 
    border-radius: 5px;
    cursor: pointer;
    width: 90%;
}

#apply-filters-button:hover,
#download-button:hover {
    background-color: #005f6a; /* Darker shade on hover */
    transition: background-color 0.3s ease;
}

/* Container for Current Pollution Tiles */
.current-pollution-tile-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;  /* Align tiles to the left */
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Current Pollution Tile */
.current-pollution-tile-container > div {
    border: 1px solid #ccc; 
    border-radius: 8px; 
    padding: 10px; 
    margin: 10px; 
    width: 250px; /* Adjust width as needed */
    background: linear-gradient(to right, #e0eafc, #cfdef3);
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.header-bar {
  width: 100%;
  height: 40px;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 12px;
  box-sizing: border-box;
  z-index: 3000;
  position: fixed;   /* <--- make it fixed */
  top: 0;            /* <--- stick it to the top */
  left: 0;
}
.page-body {
    max-width: 900px;
    margin: 3rem auto;
    padding: 40px 1rem 4rem;  /* top padding = header height + margin */
    line-height: 1.6;
}

/* Pollutant Name and Icon */
.pollutant-content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.pollutant-content img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

/* Pollution Value */
.pollutant-value {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.fullscreen-loader {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  display: flex; justify-content: center; align-items: center;
  background: rgba(0,0,0,0.7);     /* dim background */
  z-index: 2500;                   /* higher than overlay (2000) */
}

/* Container for Time Series Plots */
.time-series-plots-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;  /* Align tiles to the left */
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Time Series Plot Tile */
.time-series-plots-container > div {
    border: 1px solid #ccc; 
    border-radius: 8px; 
    padding: 10px; 
    margin: 10px; 
    width: 500px; /* Adjust width as needed */
    background-color: #f9f9f9;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}

/* Container for Statistical Plots */
.statistical-plots-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;  /* Align tiles to the left */
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Statistical Plot Tile */
.statistical-plots-container > div {
    border: 1px solid #ccc; 
    border-radius: 8px; 
    padding: 10px; 
    margin: 10px; 
    width: 300px; /* Adjust width as needed */
    background-color: #f9f9f9;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}

/* Pollutant Tiles (if used elsewhere) */
.pollutant-tile {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    margin: 10px;
    width: 30%;
    background: linear-gradient(to right, #e0eafc, #cfdef3);
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Footer Styles */
.footer {
    padding: 20px;
    background-color: black;
    color: white;
    text-align: center;
}

/* Legend Styles */
.legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin: 5px 10px;
}

.legend-color-box {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #000; /* Default color, override as needed */
    margin-right: 5px;
    border: 1px solid #000; /* Adds a border for better visibility */
}

.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,.7); display: flex; justify-content: center; align-items: center;
  z-index: 2500;
}
.modal-body {
  width: 380px; background: #fff; border-radius: 8px; padding: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.primary-btn   { background:#008CBA; color:#fff; border:none; padding:6px 14px; cursor:pointer; border-radius:4px;}
.secondary-btn { background:#ccc;   border:none; padding:6px 14px; cursor:pointer; border-radius:4px;}

/* better spacing between inputs */
.modal-body input {
  margin-top: 10px;
}

/* header row with title + close-X */
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.modal-header h3 { margin: 0; }
.modal-close {
  background: none; border: none; color: #666; font-size: 20px;
  cursor: pointer; padding: 0 4px;
}
.modal-close:hover { color: #000; }

.modal-body markdown {
  height: 40vh; overflow-y: auto;
}
.header-link {
    color: #eee;
    text-decoration: none;
}

.header-btn {                   /* used by auth callback */
    background: #0066cc;
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.header-btn + .header-btn { margin-left: 6px; }
#account-box span { margin-right: 6px; font-weight: 600; }

.header-bar {
  width: 100%; height: 40px;
  background: #000; color: #fff;
  display: flex; align-items: center;
  padding: 0 12px; box-sizing: border-box;
  z-index: 3000; position: relative;
}
.header-link { color: #fff; text-decoration: none; font-weight: 600; margin-right: 12px; }
.header-btn  { background:#222; color:#fff; border:none; padding:6px 14px;
               margin-left:6px; cursor:pointer; border-radius:4px; }

#prof-open { font-family: inherit; }

.primary-btn:disabled,
.secondary-btn:disabled {
    background-color: #9e9e9e !important;   /* grey */
    cursor: not-allowed;
    opacity: .6;
}

/* ======== footer ======== */
#site-footer {
  background:#0d0d0d;
  color:#eee;
  font-size:14px;
  line-height:1.5;
  padding:32px 8%;
}
#site-footer a {color:#aad8ff; text-decoration:none;}
#site-footer a:hover {text-decoration:underline;}

.footer-row {
  display:flex; flex-wrap:wrap; gap:40px;
  justify-content:space-between;
}
.footer-col {flex:1 1 180px; min-width:160px;}
.footer-list {list-style:none; padding:0; margin:8px 0 0 0;}
.footer-list li {margin-top:4px;}

.social-bar {margin-top:8px;}
.social-icon img {height:28px; width:28px; margin-right:10px; opacity:.8;}
.social-icon img:hover {opacity:1;}

.eu-fund {
  display:flex; align-items:center;
  justify-content:flex-start;
  margin:16px 0;
  font-size:15px;
}

@media (max-width:600px){
  .footer-row {flex-direction:column; gap:24px;}
  .eu-fund {justify-content:center; text-align:center;}
}

.copy­right-line {
  font-size:12px; color:#bbb; text-align:center; margin-top:18px;
}

.page-body {
  max-width: 900px;
  margin: 3rem auto;     /* centres horizontally */
  padding: 0 1rem 4rem;  /* side + bottom breathing space */
  line-height: 1.6;
}
.page-body h2 { text-align: center; margin-top: 0; }

/* Responsive adjustments */
@media (max-width: 1080px) {
    .pollutant-tile,
    .current-pollution-tile-container > div,
    .time-series-plots-container > div,
    .statistical-plots-container > div {
        width: 45%; /* Two tiles per row */
    }
}

@media (max-width: 1080px) {
    .pollutant-tile,
    .current-pollution-tile-container > div,
    .time-series-plots-container > div,
    .statistical-plots-container > div {
        width: 100%; /* Single tile per row */
    }
}