:root {
    /* LIGHT MODE COLORS (Default) */
    --color-primary: #D82C2C; /* Warning Red */
    --color-secondary: #0077B6; /* Deep Blue */
    --color-background: #F4F4F9; /* Light Background */
    --color-surface: white; /* Card/Map Background */
    --color-text: #333333;
    --color-text-light: #555555;
    --color-border: #e0e0e0;
    --font-jp: 'Noto Sans JP', sans-serif;
}

/* --- DARK MODE DEFINITION --- */
body.dark-mode {
    --color-background: #121212; /* Dark Background */
    --color-surface: #1E1E1E; /* Dark Card/Map Background */
    --color-text: #E0E0E0; /* Light Text */
    --color-text-light: #A0A0A0;
    --color-border: #383838;
}

/* 1. Base and Universal Typography */
body {
    font-family: var(--font-jp);
    background-color: var(--color-background);
    color: var(--color-text);
    margin: 0;
    padding: 20px;
    transition: background-color 0.3s, color 0.3s;
}

header {
    text-align: center;
    padding-top: 10px;
    margin-bottom: 20px;
}

/* --- BUTTONS & INTERFACE --- */
#toggle-dark-mode, #toggle-lang {
    background-color: var(--color-secondary);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 8px;
    cursor: pointer;
    margin: 0 5px;
    transition: background-color 0.2s;
    font-weight: 700;
}

#toggle-dark-mode:hover, #toggle-lang:hover {
    background-color: #005f96;
}

body.dark-mode #toggle-dark-mode {
    background-color: #555;
}

body.dark-mode #toggle-dark-mode:hover {
    background-color: #777;
}

/* --- 2. FLEXIBLE LAYOUT: DASHBOARD --- */
#dashboard-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap; 
    min-height: 80vh; /* Tall enough on large monitors */
}

/* 3. MAP LAYOUT */
#map-container {
    flex-grow: 2; /* 2/3 of space on desktop */
    flex-basis: 60%; 
    min-width: 300px;

    height: 700px; /* Fixed height on desktop */

    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

body.dark-mode #map-container {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

#map {
    height: 100%;
}

/* 4. EVENT LIST LAYOUT */
#earthquake-list {
    flex-grow: 1; /* 1/3 of space on desktop */
    flex-basis: 30%; 
    min-width: 300px;

    max-height: 700px; /* Fixed height on desktop */
    overflow-y: auto;
    padding-right: 5px; 
}

/* Style for the scrollbar */
#earthquake-list::-webkit-scrollbar {
    width: 8px;
}
#earthquake-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}
#earthquake-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-light);
}


/* --- CARD STYLES --- */
.earthquake-card {
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
    padding: 15px;
    border-left: 5px solid; /* Dynamic color from JS */
    cursor: pointer; 
    transition: background-color 0.1s, box-shadow 0.3s;
}

.earthquake-card:hover {
    background-color: #f0f0f5;
}

body.dark-mode .earthquake-card {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

body.dark-mode .earthquake-card:hover {
    background-color: #2a2a2a;
}

.card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.card-title h2 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 700;
}

.magnitude {
    font-size: 1.4em;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 6px;
    background-color: transparent; /* The color is in the text */
}

.earthquake-card p {
    margin: 3px 0;
    font-size: 0.9em;
    color: var(--color-text-light);
}

/* --- LEAFLET STYLES --- */
.leaflet-container {
    background: var(--color-surface);
}
body.dark-mode .leaflet-popup-content-wrapper, 
body.dark-mode .leaflet-popup-tip {
    background: var(--color-surface);
    color: var(--color-text);
}

/* Style for the markers (Leaflet DivIcon) */
.magnitude-icon {
    border: none !important;
    background: transparent !important;
}

/* --- FOOTER --- */
footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
    font-size: 0.8em;
    color: var(--color-text-light);
    border-top: 1px solid var(--color-border);
}

/* --- RESPONSIVENESS (Tablet and Mobile) --- */
@media (max-width: 1200px) {
    #map-container,
    #earthquake-list {
        flex-basis: 100%; /* Components stack in a single column */
        max-width: 100%;
        margin: 0 auto;
    }
    
    #map-container {
        height: 500px; 
    }
    
    #earthquake-list {
        max-height: 400px; /* Limit the height of the list to show the map */
        margin-top: 20px;
    }
}

/* Small screens (Smartphone) */
@media (max-width: 600px) {
    body {
        padding: 10px; 
    }
    
    h1 {
        font-size: 1.5em;
    }

    #map-container {
        height: 350px; /* Further reduction for small screens */
    }

    .earthquake-card {
        padding: 10px;
    }
}

#toggle-lang {
    /* Maintain a consistent style with the switch */
    display: flex; 
    align-items: center;
    height: 34px;
}

/* --- TOGGLE SWITCH STYLES --- */

#controls-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; 
    margin-top: 15px; 
}

.toggle-switch-wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 34px;
    width: 65px; /* Optimized width */
    background-color: var(--color-border); /* Light Mode OFF background */
    border-radius: 34px;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.1); 
    transition: background-color 0.3s;
}

/* Dark Mode ON background (primary app color) */
body.dark-mode .toggle-switch-wrapper {
    background-color: var(--color-secondary); 
}

#dark-mode-toggle {
    opacity: 0;
    width: 0;
    height: 0;
}

#dark-mode-label {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: 0 5px; 
}

/* Style for the 'thumb' */
#dark-mode-label:before {
    content: '';
    position: absolute;
    height: 26px;
    width: 26px;
    left: 4px;
    /* CENTERING KEY: 34px (wrapper height) - 26px (thumb height) / 2 = 4px */
    bottom: 4px; 
    background-color: white; 
    transition: transform 0.4s, background-color 0.4s;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Movement of the thumb (Dark Mode: toggle ON) */
#dark-mode-toggle:checked + #dark-mode-label:before {
    transform: translateX(31px); /* 65px (width) - 4px (left) - 4px (right) - 26px (width) = 31px */
    background-color: white; 
}


/* --- SVG ICONS --- */
.icon-sun, .icon-moon {
    width: 24px;
    height: 24px;
    background-size: 18px 18px; /* Effective icon size */
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.3s;
    z-index: 1; /* Ensure icons are above the thumb */
}

/* Sun Icon (Light Mode) */
.icon-sun {
    /* SVG: Light sun (#FFFFFF) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M12 2a1 1 0 011 1v1a1 1 0 01-2 0V3a1 1 0 011-1zm6.9 3.1l-.7.7a1 1 0 01-1.4-1.4l.7-.7a1 1 0 011.4 1.4zM21 12a1 1 0 01-1 1h-1a1 1 0 010-2h1a1 1 0 011 1zM4 12a1 1 0 01-1 1H2a1 1 0 010-2h1a1 1 0 011 1zM7.1 18.9l-.7.7a1 1 0 01-1.4-1.4l.7-.7a1 1 0 011.4 1.4zM12 19a1 1 0 01-1 1v1a1 1 0 012 0v-1a1 1 0 01-1-1zm7.8-1.5l-.7-.7a1 1 0 011.4-1.4l.7.7a1 1 0 01-1.4 1.4zM5.1 7.1l-.7.7a1 1 0 01-1.4-1.4l.7-.7a1 1 0 011.4 1.4zM12 7a5 5 0 100 10 5 5 0 000-10zm0 8a3 3 0 110-6 3 3 0 010 6z'/%3E%3C/svg%3E");
    opacity: 1; 
}

/* Moon Icon (Dark Mode) */
.icon-moon {
    /* SVG: White moon (#FFFFFF) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M12 3a9 9 0 019 9c0 5-4 9-9 9s-9-4-9-9c0-2.3 1-4.5 2.5-6.1A9 9 0 0012 3zm0-2a11 11 0 00-7.8 18.8c.4.3 1 .2 1.3-.2a.9.9 0 000-1.2A9 9 0 0112 1c4.5 0 8.3 3.2 9.1 7.5a1 1 0 001 1.1 1 1 0 001-1c0-6-4.9-11-11-11z'/%3E%3C/svg%3E");
    opacity: 0;
}

/* Icon visibility logic */
#dark-mode-toggle:checked + #dark-mode-label .icon-sun {
    opacity: 0; /* Hide Sun in Dark Mode */
}

#dark-mode-toggle:checked + #dark-mode-label .icon-moon {
    opacity: 1; /* Show Moon in Dark Mode */
}

#dark-mode-toggle:not(:checked) + #dark-mode-label .icon-sun {
    opacity: 1; /* Show Sun in Light Mode */
}

#dark-mode-toggle:not(:checked) + #dark-mode-label .icon-moon {
    opacity: 0; /* Hide Moon in Light Mode */
}