/* ==================== VARIABLES ==================== */
/**
 * Color palette and key variables for consistent styling
 * The primary colors are:
 * - Blue (blauw): Main brand color for headings, buttons, borders
 * - Yellow (geel): Secondary color for accent elements
 * - White (wit): Background for tiles and content areas
 * - Gray (grijs): Page background and subtle elements
 */
:root {
    --wit: #ffffff;     /* White - used for tile backgrounds */
    --blauw: #003091;   /* Blue - primary brand color */
    --geel: #FFC917;    /* Yellow - accent color */
    --grijs: #E6E6E9;   /* Light gray - used for backgrounds */
}

/* ==================== BASE STYLES ==================== */
/**
 * Fundamental page structure and typography
 * Sets up the basic page layout and prevents overflow issues
 */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    overflow-x: hidden; /* Prevent horizontal scroll */
    background-color: var(--grijs);
}

/* ==================== LAYOUT COMPONENTS ==================== */
/**
 * Main container structure
 * The dashboard uses a flex-based layout system for responsive design
 */
/* Main container layout */
.container-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1rem;
}

/* Dashboard container - holds all dashboard components */
.dashboard-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Consistent spacing between elements */
}

/**
 * Common tile styling
 * All tiles share the same base appearance (background, radius, shadow)
 */
/* Header and footer tiles */
.header-tile, .footer-tile, .dashboard-info-tile, .year-selector-tile, .chart-tile {
    background: var(--wit);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/**
 * Header section styling
 * Contains logo, site title, and controls
 */
/* Header tile specific styles */
.header-tile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 3px solid var(--geel); /* Yellow accent on top */
}

/* Site branding group - logo and title */
.site-branding {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Logo styling */
.site-logo {
    height: 40px;
    width: auto;
}

/* Site title styling */
.site-title {
    color: var(--blauw);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
}

.site-title:hover {
    text-decoration: underline;
}

/* Container for dark mode toggle and GitHub link */
.controls-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/**
 * Info and year selector row
 * Contains dashboard title and year selection dropdown
 */
.info-year-row {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 75% for info, 25% for year selector */
    gap: 1.5rem;
}

/**
 * Dashboard info tile
 * Contains the dashboard title and description
 */
/* Dashboard info tile specific styles */
.dashboard-info-tile {
    border-left: 3px solid var(--geel); /* Yellow accent on left */
}

/* Dashboard title */
.dashboard-info-tile h1 {
    color: var(--blauw);
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
}

/* Dashboard description text */
.dashboard-description {
    color: #39394D;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

/**
 * Year selector tile
 * Contains dropdown for selecting the data year
 */
/* Year selector tile specific styles */
.year-selector-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Year selector label */
.year-selector-tile label {
    display: block;
    font-weight: bold;
    color: var(--blauw);
    margin-bottom: 0.5rem;
}

/**
 * Footer tile 
 * Contains attribution and copyright information
 */
/* Footer tile specific styles */
.footer-tile {
    text-align: center;
    border-bottom: 3px solid var(--geel); /* Yellow accent on bottom */
    margin-bottom: 1rem;
}

/* Footer text */
.footer-tile p {
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Footer links */
.footer-tile a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: inline-block;
    color: var(--blauw);
    text-decoration: none;
}

.footer-tile a:hover {
    text-decoration: underline;
}

/* ==================== CHART GRID LAYOUT ==================== */
/**
 * Chart grid layout
 * 2x2 grid on desktop, 1 column on mobile, with a fifth chart taking up 2 columns
 */
/* Main grid container */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns on desktop */
    gap: 1.5rem;
    flex: 1;
}

/* The fifth chart (duration) spans both columns and has extra height for all labels */
.chart-tile:nth-of-type(5) {
    grid-column: 1 / span 2; /* Span across both columns */
    height: 400px; /* Extra height for all labels */
}

/**
 * Individual chart tiles
 * Each chart is contained in a tile with consistent styling
 */
/* Individual chart tiles */
.chart-tile {
    display: flex;
    flex-direction: column;
    height: 300px; /* Fixed height for all tiles */
    overflow: hidden;
}

/* Causes per month chart needs more height to display properly */
.chart-tile:nth-of-type(4) {
    height: 350px; /* Taller than other charts for better visibility */
}

/* Railway map tile should have the same height as causes per month */
.chart-tile:nth-of-type(3) {
    height: 350px; /* Match height of causes per month chart */
}

/* Duration chart needs more height for horizontal bars */
.chart-tile:nth-of-type(5) {
    height: 350px; /* Taller for horizontal bar chart */
}

/* Chart tile heading */
.chart-tile h2 {
    color: var(--blauw);
    font-size: 1.2rem;
    margin: 0 0 0.5rem 0;
}

/**
 * Chart container styling
 * Ensures charts fill available space within their containers
 */
/* Chart container within tiles */
.chart-container {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    min-height: 200px; /* Ensure minimum height for all chart containers */
}

/* Ensure charts fill their containers */
.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
}

/**
 * Chart description styling
 * Text below the chart title explaining the visualization
 */
/* Chart description */
.chart-description {
    color: #39394D;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 1rem;
    max-width: 100%;
    height: auto;
    overflow: visible;
}

/* ==================== MAP STYLING ==================== */
/**
 * Map container and Leaflet styling
 * Ensures the map displays correctly within its container
 */
#mapContainer {
    height: 100%;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

/* Consistent font for map elements */
.leaflet-container {
    font-family: Arial, sans-serif;
}

/* ==================== INTERACTIVE ELEMENTS ==================== */
/**
 * Button styling
 * Consistent styling for all buttons with hover/active states
 */
/* Button styling */
button {
    background-color: var(--wit);
    color: var(--blauw);
    border: 2px solid var(--blauw);
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width: 100%;
    margin-bottom: 0.5rem;
}

/* Button hover state */
button:hover {
    background-color: #4D79B3; /* Lighter blue */
    color: var(--wit);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Button active/pressed state */
button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active button state (selected) */
button.active {
    background-color: var(--blauw);
    color: var(--wit);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/**
 * Special button variants
 * Modified button styles for specific use cases
 */
/* Dark mode toggle button */
.dark-mode-button {
    width: auto !important;
    margin-bottom: 0 !important;
}

/* GitHub link button */
.github-button {
    color: var(--blauw);
    font-size: 1.5rem;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.github-button:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* ==================== SELECTOR STYLING ==================== */
/**
 * Dropdown selector styling
 * Custom styling for select elements (year selector)
 */
.styled-select {
    appearance: none;
    background-color: var(--wit);
    border: 2px solid var(--blauw);
    border-radius: 6px;
    padding: 10px 35px 10px 15px;
    width: 100%;
    font-size: 1rem;
    color: var(--blauw);
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003091' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 1em;
}

/* Hover state for select dropdown */
.styled-select:hover {
    border-color: var(--blauw);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Focus state for select dropdown */
.styled-select:focus {
    outline: none;
    border-color: var(--blauw);
    box-shadow: 0 0 0 3px rgba(0, 48, 145, 0.25);
}

/* ==================== ACCENT STYLING ==================== */
/**
 * Accent border classes
 * Provides yellow accents to selected elements to draw attention
 */
/* Accent styles for tiles */
.accent-left {
    border-left: 3px solid var(--geel);
}

.accent-top {
    border-top: 3px solid var(--geel);
}

.accent-bottom {
    border-bottom: 3px solid var(--geel);
}

/* ==================== DARK MODE ==================== */
/**
 * Dark mode styles
 * Alternative color scheme for night viewing
 */
.dark-mode {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* Dark background for all tiles */
.dark-mode .header-tile,
.dark-mode .dashboard-info-tile,
.dark-mode .year-selector-tile,
.dark-mode .chart-tile,
.dark-mode .footer-tile {
    background: #2d2d2d;
}

/* Light text for headings in dark mode */
.dark-mode .site-title,
.dark-mode .dashboard-info-tile h1,
.dark-mode .chart-tile h2 {
    color: var(--wit);
}

/* Light gray text for descriptions in dark mode */
.dark-mode .dashboard-description,
.dark-mode .chart-description {
    color: #cccccc;
}

/* Yellow links in dark mode footer */
.dark-mode .footer-tile a {
    color: var(--geel);
}

/* Dark mode button styling */
.dark-mode button {
    background-color: #2d2d2d;
    color: var(--wit);
    border-color: var(--blauw);
}

/* Dark mode button hover state */
.dark-mode button:hover {
    background-color: #4D79B3;
    color: var(--wit);
}

/* Dark mode active button state */
.dark-mode button.active {
    background-color: var(--blauw);
    color: var(--wit);
}

/* GitHub icon in dark mode */
.dark-mode .github-button {
    color: var(--blauw);
}

/* Year selector label in dark mode */
.dark-mode .year-selector-tile label {
    color: var(--wit);
}

/**
 * Dark mode map styling
 * Ensures map elements are visible in dark mode
 */
/* Dark mode map popup styles */
.dark-mode .leaflet-popup-content-wrapper {
    background-color: #2d2d2d;
    color: #ffffff;
}

.dark-mode .leaflet-popup-tip {
    background-color: #2d2d2d;
}

/**
 * Dark mode select styling
 * Custom styling for select dropdowns in dark mode
 */
/* Dark mode styles for selectors */
.dark-mode .styled-select {
    background-color: #2d2d2d;
    color: var(--wit);
    border-color: var(--blauw);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

.dark-mode .styled-select:focus {
    box-shadow: 0 0 0 3px rgba(0, 48, 145, 0.5);
}

/* ==================== RESPONSIVE STYLES ==================== */
/**
 * Responsive adaptations
 * Adjusts layout and sizing for smaller screens (tablets and mobile)
 */

/* Medium size screens (tablets) */
@media screen and (max-width: 1024px) {
    .chart-tile {
        height: 330px; /* Slightly taller on tablets */
    }
    
    /* Causes per month chart needs more height */
    .chart-tile:nth-of-type(4) {
        height: 380px;
    }
    
    /* Railway map should match causes per month height */
    .chart-tile:nth-of-type(3) {
        height: 380px;
    }
    
    /* Duration chart needs more height for all labels */
    .chart-tile:nth-of-type(5) {
        height: 450px; /* Extra height on tablets */
    }
}

/* Small screens (mobile) */
@media screen and (max-width: 768px) {
    /* Tighter padding on small screens */
    .container-main {
        padding: 0.75rem;
    }
    
    /* Smaller padding for all tiles */
    .header-tile, .dashboard-info-tile, .year-selector-tile, .chart-tile, .footer-tile {
        padding: 1rem;
    }
    
    /* Stack header elements vertically */
    .header-tile {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    /* Full width controls */
    .controls-container {
        width: 100%;
        justify-content: flex-start;
    }
    
    /* Stack info and year selector */
    .info-year-row {
        grid-template-columns: 1fr; /* Stack vertically on mobile */
        gap: 1rem;
    }

    /* Smaller title on mobile */
    .dashboard-info-tile h1 {
        font-size: 1.5rem;
    }

    /* Single column layout for charts */
    .charts-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 1rem;
    }

    /* Smaller chart heights on mobile */
    .chart-tile {
        height: 250px; /* Smaller on mobile */
    }
    
    .chart-tile h2 {
        font-size: 1.1rem; /* Slightly smaller headings */
    }
    
    .chart-description {
        font-size: 0.8rem; /* Smaller description text */
        margin-bottom: 0.7rem; /* Less space below description */
    }
    
    /* Causes per month chart needs extra height on mobile */
    .chart-tile:nth-of-type(4) {
        height: 400px; /* Much taller on mobile to show multiple lines clearly */
    }
    
    /* Railway map should match causes per month height */
    .chart-tile:nth-of-type(3) {
        height: 400px; /* Match height of causes per month chart */
    }
    
    /* Duration chart needs extra height on mobile */
    .chart-tile:nth-of-type(5) {
        height: 450px; /* More height on mobile for better readability */
        grid-column: auto; /* Reset to default on mobile */
    }
    
    /* Larger touch targets for mobile */
    button, .styled-select {
        padding: 12px 20px;
    }

    /* Smaller footer text */
    .footer-tile p {
        font-size: 0.9rem;
    }
}

/* Extra small screens */
@media screen and (max-width: 480px) {
    .chart-tile {
        height: 270px; /* Slightly taller on very small screens */
    }
    
    /* Causes per month chart needs even more height on very small screens */
    .chart-tile:nth-of-type(4) {
        height: 420px;
    }
    
    /* Railway map should match causes per month height */
    .chart-tile:nth-of-type(3) {
        height: 420px;
    }
    
    /* Duration chart needs more height on very small screens */
    .chart-tile:nth-of-type(5) {
        height: 480px; /* Even more height on very small screens */
    }
}