/* ==========================================================================
   Global Styles & Resets
   ========================================================================== */

   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Use border-box for easier sizing */
  }
  
  body {
    font-family: 'Montserrat', sans-serif; /* Primary font */
    background-color: #f0f2f5; /* Light grey background */
    display: flex; /* Used for centering the container */
    flex-direction: column;
    align-items: center;
    min-height: 100vh; /* Ensure body takes at least full viewport height */
    padding: 20px; /* Padding around the main container */
  }
  
  /* Main container for the entire dashboard */
  .dashboard-container {
    max-width: 1200px; /* Max width for larger screens */
    width: 100%; /* Full width up to max-width */
    margin: 0 auto; /* Center the container */
  }
  
  /* ==========================================================================
     Loading Indicator Styles
     ========================================================================== */
  
  /* Styles for the loading message shown initially */
  .loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
  }
  
  /* Spinning animation element */
  .loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1); /* Light grey base */
    width: 36px;
    height: 36px;
    border-radius: 50%; /* Make it a circle */
    border-left-color: #de2934; /* Red color for spinning part */
    animation: spin 1s linear infinite; /* Apply spinning animation */
    margin-bottom: 15px; /* Space below spinner */
  }
  
  /* Keyframe animation for the spinner */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* Placeholder styles for elements while loading (Optional, if needed) */
  /* .loading-state selectors removed as they weren't directly used for the main indicator */
  /* If you need pulsing text on specific stats during load, add this back */
  /* @keyframes blink { 50% { opacity: 0; } } */
  
  
  /* ==========================================================================
     Header Section
     ========================================================================== */
  
  .header {
    background-color: #011e41; /* Dark blue background */
    color: white; /* White text */
    padding: 12px 24px; /* Padding inside header */
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Push text left, logos right */
    align-items: center; /* Vertically center content */
    gap: 20px; /* Space between text block and logo container */
  }
  
  /* Container for title and subtitle */
  .header-text {
    position: relative; /* Needed for the ::before pseudo-element */
    padding-left: 15px; /* Space for the red bar */
    flex-shrink: 1; /* Allow text block to shrink if needed */
  }
  
  /* Red accent bar on the left of the header text */
  .header-text:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px; /* Width of the red bar */
    background-color: #de2934; /* Red color */
    border-radius: 0px; /* Square corners */
  }
  
  /* Container for the logos on the right */
  .header-logos-container {
    display: flex; /* Arrange logos side-by-side */
    align-items: center; /* Vertically align logos */
    gap: 15px; /* Space between the two logos */
    flex-shrink: 0; /* Prevent logos from shrinking */
  }
  
  /* Individual logo image styling */
  .header-logo {
    height: 45px; /* Control logo size primarily by height */
    width: auto; /* Maintain aspect ratio */
    max-width: 100px; /* Prevent overly wide logos */
    object-fit: contain; /* Ensure logo scales nicely within bounds */
  }
  
  /* Main title */
  .header-text h1 {
    font-size: 26px; /* Larger font size for main title */
    font-weight: bold;
    margin-bottom: 4px;
  }
  
  /* Subtitle (Country/Event) */
  .header-text h3 {
    font-size: 17px; /* Smaller font size */
    border-bottom: 2px solid #de2934; /* Red underline */
    padding-bottom: 2px;
    margin-bottom: 4px;
    width: fit-content; /* Only underline the text width */
  }
  
  /* Update date text */
  .header-text p {
    font-size: 12px; /* Smallest text */
    font-style: italic;
  }
  
  /* ==========================================================================
     Filter Controls
     ========================================================================== */
  
  .filter-controls {
    display: flex;
    flex-wrap: wrap; /* Allow filters to wrap on smaller screens */
    gap: 8px; /* Space between filter elements */
    margin-bottom: 10px; /* Space below filters */
    background-color: #f5f5f5; /* Light grey background */
    padding: 10px; /* Padding around filters */
    border-radius: 8px; /* Rounded corners */
  }
  
  /* Styling for dropdowns and search input */
  .filter-controls select,
  .filter-controls input {
    padding: 6px 10px; /* Inner padding */
    border: 1px solid #ddd; /* Light border */
    border-radius: 4px; /* Slightly rounded corners */
    font-family: 'Montserrat', sans-serif; /* Match body font */
    flex: 1; /* Allow elements to grow and fill space */
    min-width: 150px; /* Minimum width before wrapping */
  }
  
  /* ==========================================================================
     Main Stats Section (People Reached, Volunteers)
     ========================================================================== */
  
  .main-stats {
    background-color: #f5f5f5; /* Light grey background */
    padding: 12px 20px; /* Padding */
    text-align: center; /* Center text within boxes */
    display: flex; /* Arrange boxes side-by-side */
    justify-content: space-around; /* Distribute space */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 10px; /* Space between stat boxes */
    margin-bottom: 10px; /* Space below this section */
  }
  
  /* Individual box for each main stat */
  .main-stat-box {
    flex: 1; /* Allow boxes to grow equally */
    min-width: 180px; /* Minimum width before wrapping (adjusted from 120px for better balance) */
    padding: 8px; /* Padding inside box */
    /* Removed margin: 10px; replaced by gap on parent */
  }
  
  /* Styling for the main numbers (Total & Volunteers) */
  .main-stats .total,
  .main-stats .volunteers {
    font-size: 28px; /* Size of the number */
    font-weight: bold;
    color: #de2934; /* Red color */
    margin-bottom: 2px; /* Space below number */
  }
  
  /* Styling for the labels (Total & Volunteers) */
  .main-stats .total-label,
  .main-stats .volunteers-label {
    font-size: 14px; /* Size of the label */
    color: #333; /* Dark grey color */
  }
  
  /* ==========================================================================
     Stats Grid Section (Detailed KPIs)
     ========================================================================== */
  
  .stats-grid {
    padding: 15px 20px; /* Padding around the grid */
    /* border-top: 1px solid #e1e1e1; */ /* Optional top border */
  }
  
  /* Grid layout container */
  .grid {
    display: grid;
    /* 6 columns on large screens, adjusts via media queries */
    grid-template-columns: repeat(6, 1fr);
    gap: 10px; /* Space between grid items */
  }
  
  /* Individual stat item in the grid */
  .stat-item {
    display: flex;
    flex-direction: column; /* Stack icon, number, label vertically */
    align-items: center; /* Center items horizontally */
    padding: 6px; /* Padding inside item */
    background-color: #f9f9f9; /* Very light background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
    transition: transform 0.3s ease; /* Smooth hover effect */
    /* margin-bottom: 10px; */ /* Removed, using grid gap now */
  }
  
  /* Hover effect for stat items */
  .stat-item:hover {
    transform: translateY(-5px); /* Lift item slightly on hover */
  }
  
  /* Container for the icon */
  .icon-container {
    width: 45px;
    height: 45px;
    position: relative; /* Needed for absolute positioning of icon */
    margin-bottom: 6px; /* Space below icon */
  }
  
  /* Inner div for precise icon centering if needed */
  .icon {
    position: absolute;
    inset: 0; /* Fill the container */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Icon styling (color, size) */
  .icon i {
    color: #de2934; /* Red color */
    font-size: 30px; /* Icon size */
  }
  
  /* Number display in the stat item */
  .stat-number {
    font-size: 18px;
    font-weight: bold;
    color: #de2934; /* Red color */
    margin-bottom: 3px; /* Space below number */
  }
  
  /* Label display in the stat item */
  .stat-label {
    text-align: center; /* Center text if it wraps */
    font-size: 12px;
    color: #333; /* Dark grey color */
    line-height: 1.3; /* Adjust line spacing */
  }
  
  /* ==========================================================================
     Tabbed Dashboard Section
     ========================================================================== */
  
  /* Container for tabs and content */
  .dashboard-section {
    margin-top: 0px; /* Adjust space above tabs if needed */
    width: 100%;
  }
  
  /* Tab navigation bar */
  .tabs {
    display: flex;
    border-bottom: 1px solid #ddd; /* Underline below tabs */
    margin-bottom: 20px; /* Space below tabs */
  }
  
  /* Individual tab button */
  .tab {
    padding: 10px 20px; /* Padding inside tab */
    cursor: pointer;
    border-bottom: 3px solid transparent; /* Placeholder for active state */
    font-weight: 600; /* Bold text */
    color: #666; /* Default grey color */
    transition: color 0.2s ease, border-bottom-color 0.2s ease; /* Smooth transition */
  }
  
  /* Active tab style */
  .tab.active {
    border-bottom-color: #de2934; /* Red underline for active tab */
    color: #011e41; /* Dark blue text for active tab */
  }
  
  /* Tab content panels (hidden by default) */
  .tab-content {
    display: none;
  }
  
  /* Active tab content panel (shown) */
  .tab-content.active {
    display: block;
  }
  
  /* Generic row container for cards within tabs (used in Sector tab) */
  .dashboard-row {
    display: flex;
    flex-wrap: wrap; /* Allow cards to wrap */
    gap: 20px; /* Space between cards */
    margin-bottom: 20px; /* Space below row */
  }
  
  /* Standard card styling used across tabs */
  .dashboard-card {
    flex: 1; /* Allow cards to grow */
    min-width: 300px; /* Minimum width before wrapping */
    background-color: white; /* White background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Subtle shadow */
    padding: 20px; /* Padding inside card */
    margin-bottom: 20px; /* Space below card (unless overridden) */
  }
  
  /* Card title styling */
  .dashboard-card h3 {
    color: #011e41; /* Dark blue title text */
    padding-bottom: 10px; /* Space below title */
    border-bottom: 2px solid #de2934; /* Red underline */
    margin-bottom: 15px; /* Space below underline */
    font-size: 18px; /* Title font size */
  }
  
  /* ==========================================================================
     Overview Tab Layout (Map & Charts)
     ========================================================================== */
  
  /* Container for the two-column layout (Map, Charts) */
  .map-and-charts-container {
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    gap: 20px; /* Space between columns */
    align-items: stretch; /* Make columns equal height */
    margin-top: 20px; /* Space above this section */
  }
  
  /* Left column containing the map */
  .map-column {
    flex: 1; /* Allow column to grow */
    min-width: 45%; /* Define approximate width */
  }
  
  /* Styling for the map card specifically */
  .map-column .dashboard-card {
    display: flex; /* Use flex to control inner elements */
    flex-direction: column; /* Stack title and map vertically */
    height: 100%; /* Make card fill the column height */
    margin-bottom: 0; /* Rely on parent gap */
    /* Inherits background, border-radius, shadow, padding */
  }
  
  /* Container div for the Leaflet map */
  .map-column .map-container,
  .map-container { /* Applied globally for safety */
    flex: 1; /* Allow map container to fill remaining space in card */
    height: 600px; /* Explicit height for the map */
    width: 100%;
    border-radius: 6px; /* Slightly rounded corners for map */
    overflow: hidden; /* Hide anything spilling out */
    min-height: 400px; /* Minimum height */
  }
  
  /* Right column containing the two charts */
  .charts-column {
    flex: 1; /* Allow column to grow */
    min-width: 45%; /* Define approximate width */
    display: flex; /* Use flex to control inner cards */
    flex-direction: column; /* Stack chart cards vertically */
    gap: 20px; /* Space between the two chart cards */
  }
  
  /* Styling for the chart cards specifically */
  .charts-column .dashboard-card {
    flex: 1; /* Make both chart cards share vertical space equally */
    display: flex; /* Use flex to control inner elements */
    flex-direction: column; /* Stack title and chart vertically */
    margin-bottom: 0; /* Rely on parent gap */
    /* Inherits background, border-radius, shadow, padding */
  }
  
  /* Styling for chart titles within the charts column */
  .charts-column .dashboard-card h3 {
    margin-bottom: 8px; /* Reduce space below title */
    font-size: 16px; /* Slightly smaller title */
  }
  
  /* Container div for the Chart.js canvas */
  .charts-column .chart-container,
  .chart-container { /* Applied globally */
    flex: 1; /* Allow chart container to fill remaining space in card */
    position: relative; /* Required by Chart.js */
    width: 100%;
    min-height: 150px; /* Prevent charts collapsing too much */
    /* height: 300px; */ /* Removed fixed height, using flex now */
  }
  
  
  /* ==========================================================================
     Data Table Styles (Data Tab)
     ========================================================================== */
  
  /* Container to allow vertical scrolling for the table */
  .table-container {
    max-height: 400px; /* Max height before scrolling */
    overflow-y: auto; /* Enable vertical scrollbar */
    margin-top: 20px; /* Space above table */
  }
  
  /* Main table styling */
  .data-table {
    width: 100%; /* Full width */
    border-collapse: collapse; /* Remove space between cells */
    font-size: 14px; /* Base font size for table */
  }
  
  /* Table header (th) and data cell (td) styling */
  .data-table th,
  .data-table td {
    padding: 10px; /* Cell padding */
    text-align: left; /* Align text left */
    border-bottom: 1px solid #ddd; /* Horizontal lines between rows */
  }
  
  /* Table header specific styling */
  .data-table th {
    background-color: #011e41; /* Dark blue background */
    color: white; /* White text */
    position: sticky; /* Make header stick during scroll */
    top: 0; /* Stick to the top of the scroll container */
    z-index: 1; /* Ensure header stays above scrolling content */
  }
  
  /* Row hover effect */
  .data-table tbody tr:hover {
    background-color: #f5f5f5; /* Light grey background on hover */
  }
  
  /* ==========================================================================
     Timeline Styles (Timeline Tab)
     ========================================================================== */
  
  .timeline {
    margin-top: 20px; /* Space above timeline */
    position: relative; /* Needed for positioning lines/dots if added later */
  }
  
  /* Container for a single timeline entry */
  .timeline-entry {
    display: flex; /* Arrange date and content side-by-side */
    margin-bottom: 15px; /* Space between entries */
    position: relative; /* Needed for positioning lines/dots */
  }
  
  /* Date part of the timeline entry */
  .timeline-date {
    min-width: 80px; /* Fixed width for alignment */
    padding-right: 15px; /* Space between date and content */
    text-align: right; /* Align date to the right */
    font-weight: 600; /* Bold date */
    color: #011e41; /* Dark blue color */
  }
  
  /* Content part of the timeline entry */
  .timeline-content {
    border-left: 2px solid #de2934; /* Red vertical line */
    padding-left: 15px; /* Space left of content */
    padding-bottom: 10px; /* Space below content */
  }
  
  /* Title within timeline content */
  .timeline-content h4 {
    margin-bottom: 5px;
    color: #333; /* Dark grey */
  }
  
  /* Description/details within timeline content */
  .timeline-content p {
    color: #666; /* Lighter grey */
    font-size: 14px;
  }
  
  /* ==========================================================================
     Responsive Styles
     ========================================================================== */
  
  /* Adjustments for Medium Screens (Tablets, smaller laptops) */
  @media (max-width: 1200px) {
    /* Stats Grid: 3 columns */
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
  
    /* Overview Tab: Stack Map and Charts columns */
    .map-and-charts-container {
        flex-direction: column;
    }
  
    /* Make map and chart columns full width when stacked */
    .map-column, .charts-column {
        width: 100%;
    }
  
    /* Adjust map height for stacked view */
    .map-container { /* Use .map-column .map-container if specificity needed */
      height: 500px;
    }
  
    /* Adjust chart container height (might need tweaking based on map height) */
    .charts-column .chart-container {
      /* If charts should fill remaining space, keep flex:1; if fixed height desired, set it */
       height: 250px; /* Example fixed height for stacked view */
       /* flex: 1; */ /* Comment out if using fixed height */
    }
  }
  
  /* Adjustments for Small Screens (Tablets portrait, large phones) */
  @media (max-width: 768px) {
    /* Body padding reduced */
    body {
      padding: 10px;
    }
    /* Stats Grid: 2 columns */
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px; /* Slightly larger gap for touch */
    }
  
    /* Header: Stack elements vertically */
    .header {
        flex-direction: column;
        gap: 15px;
        text-align: center; /* Center align text block */
        padding: 15px; /* Adjust padding */
    }
    .header-text {
        padding-left: 0; /* Remove left padding */
        text-align: center; /* Ensure text is centered */
    }
    .header-text:before {
        display: none; /* Hide red accent bar */
    }
    .header-text h3 {
        margin: 0 auto 8px auto; /* Center subtitle */
    }
    .header-logos-container {
        justify-content: center; /* Center logos within their container */
        margin-top: 10px; /* Add space above logos */
    }
  
    /* Main Stats: Adjust font sizes for emphasis */
    .main-stats .total { font-size: 36px; } /* Slightly larger total */
    .main-stats .volunteers { font-size: 30px; } /* Slightly smaller volunteers */
  
    /* Dashboard Cards: Make full width */
    .dashboard-card {
        min-width: 100%;
        margin-bottom: 15px; /* Reduce bottom margin */
    }
  }
  
  /* Adjustments for Extra Small Screens (Phones) */
  @media (max-width: 480px) {
    /* Stats Grid: 1 column */
    .grid {
        grid-template-columns: repeat(1, 1fr);
    }
  
    /* Header: Reduce text size further */
    .header-text h1 { font-size: 20px; }
    .header-text h3 { font-size: 16px; }
  
    /* Reduce logo size */
    .header-logo { height: 35px; }
    .header-logos-container { gap: 10px; }
  
    /* Further reduce main stat font size */
    .main-stats .total { font-size: 30px; }
    .main-stats .volunteers { font-size: 26px; }
  
    /* Reduce filter padding */
    .filter-controls { padding: 8px; gap: 6px; }
    .filter-controls select, .filter-controls input { padding: 5px 8px; }
  
    /* Reduce card padding */
    .dashboard-card { padding: 15px; }
    .dashboard-card h3 { font-size: 16px; margin-bottom: 10px; }
  
    /* Reduce tab padding */
    .tab { padding: 8px 12px; font-size: 14px; }
  
    /* Reduce table font size and padding */
    .data-table { font-size: 12px; }
    .data-table th, .data-table td { padding: 6px 8px; }
  }