/* ===========================================
   GLOBAL / RESET
   (keep defaults for non-mobile exactly as before)
   =========================================== */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: sans-serif;
}

:root {
    --menu-height: 36px;
    --banner-height: 56px; /* reduced from 72px */
}

/* === Base reset for map element (keeps original behaviour) === */
html,
body,
#map {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    flex: 2;
    height: 100%;
}

/* ===========================================
   BANNER / MENU
   =========================================== */
#top-menu-placeholder {
    display: none; /* remains hidden */
    width: 100%;
    height: var(--menu-height);
    background: #ffffff;
    border-bottom: 1px solid #e2e2e2;
    align-items: center;
    padding: 0 12px;
    font-size: 0.9rem;
    color: #444;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    z-index: 1700;
}

#mode-banner {
    width: 100%;
    height: var(--banner-height);
    background: linear-gradient(180deg, #fff, #fafafa);
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical centring */
    align-items: center; /* horizontal centring */
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    z-index: 1600;
    text-align: center; /* ensures text inside wraps/centres */
}

#banner-title {
    font-weight: 700;
    font-size: 1rem; /* slightly smaller */
    color: #222;
}

#banner-desc {
    font-size: 0.85rem; /* slightly smaller */
    color: #5a5a5a;
    margin-top: 2px; /* reduced spacing below title */
}

/* --- About modal --- */
.about-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.about-modal[hidden] {
    display: none;
}
.about-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.about-modal-panel {
    position: relative;
    z-index: 1;
    max-width: 720px;
    width: calc(100% - 40px);
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
}
.about-modal-panel header {
    margin-bottom: 8px;
}
.about-modal-body {
    font-size: 0.95rem;
    line-height: 1.45;
    color: #1e1e1e;
}

/* About button styling */
.about-button {
    flex-wrap: wrap;
    background: #f3f1ef;
    border: 1px solid #ddd;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
.about-button:focus {
    outline: 3px solid rgba(97, 144, 255, 0.18);
}

/* Hide zoom label visually but keep code live */
.zoom-level-label {
    display: none !important;
}

/* ===========================================
   MAIN CONTAINER
   =========================================== */
#main-container {
    display: flex;
    /*height: calc(100vh - var(--menu-height) - var(--banner-height));*/
    height: calc(100vh - var(--banner-height));
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* ===========================================
   SIDE PANEL
   =========================================== */
#side-panel {
    flex: 1;
    background: #fafafa;
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.1);
    padding: 16px 20px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: scroll;
}

/* Panel Header */
#side-panel h2 {
    margin: 0;
    font-size: 1.4rem;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    text-align: center;
    -webkit-overflow-scrolling: touch;
}

/* Toggle Button */
#panel-toggle {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-left: none;
    padding: 8px 10px;
    font-size: 18px;
    cursor: pointer;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    z-index: 1500;
    display: none; /* default hidden, visible only on mobile */
}

/* ===========================================
   INFO BOX / LEGEND / UI ELEMENTS
   =========================================== */
#info-box {
    position: absolute;
    bottom: 3%;
    left: 10px;
    background: white;
    padding: 8px;
    border-radius: 4px;
    z-index: 999;
    font-size: 14px;
}

/* Legend */
#legend {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 12px;
    bottom: 3%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    max-width: 160px;
    max-height: 60%;
    min-height: 35%;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    touch-action: pan-y;
    scroll-behavior: smooth;
}
.legend-title {
    text-align: center;
    margin-bottom: 6px;
}
.legend-gradient {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
}
.legend-labels {
    display: flex;
    align-items: center;
}

/* ===========================================
   MAP CONTROLS, DATE PICKER, PRESETS
   =========================================== */
#map-controls {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#sunmode-toggle {
    display: flex;
    gap: 6px;
}

.sunmode-option {
    background: white;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    flex: 1;
    border-right: 1px solid #ccc;
    transition: background 0.3s;
}
.sunmode-option:last-child {
    border-right: none;
}
.sunmode-option:hover:not(:disabled) {
    background: #eee;
}
.sunmode-option.selected {
    background: #2196f3;
    color: white;
    font-weight: bold;
}
.sunmode-option:disabled {
    background: #ddd;
    cursor: not-allowed;
}

/* Date picker + presets */
#date-picker-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
}
#date-picker {
    padding: 4px;
    font-size: 13px;
}
#date-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 8px; /* Adjust spacing between the input and button */
}

#date-presets {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: auto;
    padding-bottom: 2px;
    max-width: 100%;
}
#date-presets button {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 3px 6px;
    font-size: 0.75rem;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
#date-presets button:hover,
#date-presets button:focus {
    background-color: #ddd;
    outline: none;
}

/* Timezone toggle (desktop hidden by default) */
#timezone-toggle {
    display: none;
}

/* Make the Home button match Leaflet zoom controls (30x30) */
.home-widget {
    width: 34px;
    height: 34px;
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 2px 0 0 2px;
    cursor: pointer;
    margin-top: 2px; /* small spacing under zoom buttons */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    margin-left: 3px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
}

.home-widget svg {
    width: 20px;
    height: 20px;
    pointer-events: none; /* allow clicks to pass through to button */
}

.home-widget:hover,
.home-widget:focus {
    background: #f4f4f4;
    outline: none;
}

/* ===========================================
   ANALYSIS PANEL + BADGES
   =========================================== */
#mode-label,
#analysis-badges,
#scenario-separator,
#scenario-badges {
    display: none;
}

/* Toggle root - hidden by default until JS reveals it */
#scenario-toggle {
    display: none;
    width: 100%;
    margin: 8px 0;
    box-sizing: border-box;
    opacity: 0;
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

/* Visible state */
#scenario-toggle.visible {
    display: block;
    opacity: 1;
}

/* Button styled similar to .mode-label */
#scenario-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between; /* label left, status+arrow right */
    width: 100%;
    background: #f7efe3;
    color: #5a3e1b;
    border: 1px solid #e0d6c6;
    border-radius: 6px;
    padding: 8px 10px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 0.95rem;
    gap: 12px;
}

/* Left label (static) */
#scenario-toggle-btn .st-label {
    text-align: left;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right group contains status and arrow */
#scenario-toggle-btn .st-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Status "(Show)" / "(Hide)" */
#scenario-toggle-btn .st-status {
    font-weight: 600;
    font-size: 0.85rem;
    color: #4b4b4b;
    white-space: nowrap;
}

/* Arrow to the far right */
#scenario-toggle-btn .st-arrow {
    display: inline-block;
    transition: transform 220ms ease;
    font-size: 0.95rem;
    color: #5a3e1b;
    line-height: 1;
}

/* Rotate arrow when the button has .open class */
#scenario-toggle-btn.open .st-arrow {
    transform: rotate(180deg);
}

/* Collapsible container that holds the badges */
#scenario-badges-container {
    max-height: 0;
    display: none;
    transition:
        max-height 320ms ease,
        padding 220ms ease;
    padding: 0;
}

/* When open, allow content to show */
#scenario-badges-container.open {
    max-height: 1200px;
    padding-top: 8px;
    padding-bottom: 4px;
    display: block;
}

/* Hover/focus affordances */
#scenario-toggle-btn:hover {
    background: #f2eade;
    outline: none;
}
#scenario-toggle-btn:focus {
    box-shadow: 0 0 0 3px rgba(97, 144, 255, 0.15);
}

/* Toggle root - hidden by default until JS reveals it */
#sunchart-toggle {
    display: none;
    width: 100%;
    margin: 8px 0;
    box-sizing: border-box;
    opacity: 0;
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

/* Visible state */
#sunchart-toggle.visible {
    display: block;
    opacity: 1;
}

/* Button styled similar to .mode-label */
#sunchart-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between; /* label left, status+arrow right */
    width: 100%;
    background: #f7efe3;
    color: #5a3e1b;
    border: 1px solid #e0d6c6;
    border-radius: 6px;
    padding: 8px 10px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 0.95rem;
    gap: 12px;
}

/* Left label (static) */
#sunchart-toggle-btn .sc-label {
    text-align: left;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right group contains status and arrow */
#sunchart-toggle-btn .sc-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Status "(Show)" / "(Hide)" */
#sunchart-toggle-btn .sc-status {
    font-weight: 600;
    font-size: 0.85rem;
    color: #4b4b4b;
    white-space: nowrap;
}

/* Arrow to the far right */
#sunchart-toggle-btn .sc-arrow {
    display: inline-block;
    transition: transform 220ms ease;
    font-size: 0.95rem;
    color: #5a3e1b;
    line-height: 1;
}

/* Rotate arrow when the button has .open class */
#sunchart-toggle-btn.open .sc-arrow {
    transform: rotate(180deg);
}

/* Hover/focus affordances */
#sunchart-toggle-btn:hover {
    background: #f2eade;
    outline: none;
}
#sunchart-toggle-btn:focus {
    box-shadow: 0 0 0 3px rgba(97, 144, 255, 0.15);
}

/* Container for the sun chart — fixed height so the whole panel doesn't grow without bound */
#sun-analysis-container {
    height: 320px; /* total vertical size of the sun analysis block */
    min-height: 240px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#sun-analysis-container {
    display: none; /* hidden on page load */
}
#sun-analysis-container.open {
    display: block; /* shown when toggled */
}

/* Canvas should expand to fill the remaining container space but keep an explicit height as a fallback */
#sun-chart {
    width: 100% !important;
    height: 240px !important; /* chart drawing height — adjust as needed */
    flex: 1 1 auto;
    display: block;
}

/* Small accessibility / visual tweak for the meta row */
#sun-analysis-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#analysis-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* base badge: allow it to share space when there's more than one */
.analysis-badge {
    flex: 1 1 auto; /* was 1 1 100% */
    min-width: 120px; /* ensure they don’t get too narrow */
    display: flex;
    align-items: center;
    border-radius: 6px;
    padding: 10px 16px;
    box-sizing: border-box;
    gap: 12px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* sunrise theme */
.badge-sunrise {
    background: linear-gradient(135deg, #ffd580, #ffb347);
    color: #4b2e00;
}
.badge-sunrise .badge-utc-offset {
    color: #664600;
}

/* sunset theme */
.badge-sunset {
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
    color: #4a1f1f;
}
.badge-sunset .badge-utc-offset {
    color: #5c2a1e;
}

/* Symbol container */
.badge-symbol {
    width: 36px; /* adjust size as you want (24/28/36) */
    height: 36px; /* same as width to keep square */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    flex: 0 0 auto;
}

/* If an <img> or svg is used inside the symbol container, make it fill and stay crisp */
.badge-symbol img,
.badge-symbol svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.badge-icon-inline {
    display: inline-flex;
    align-items: center;
}
.badge-icon-inline svg {
    width: 23px;
    height: 23px;
    display: block;
}

/* Text container with time and offset */
.badge-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1;
    position: relative;
}

/* UTC offset smaller and bottom right */
.badge-utc-offset {
    font-weight: 600; /* Slightly bolder */
    font-size: 0.8rem; /* Back to original size */
    position: absolute;
    bottom: 2px;
    right: 2px;
    opacity: 1; /* Full opacity for max clarity */
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.8); /* Stronger white glow */
    color: inherit; /* Keeps your sunrise/sunset colours */
    background-color: rgba(255, 255, 255, 0.35); /* Subtle background for contrast */
    border-radius: 3px;
    padding: 0 4px;
}

/* Clicked Coords */
#clicked-coords {
    font-size: 1rem;
    color: #555;
    background: #fff;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Analysis Date */
#analysis-date {
    display: block;
    font-size: 1.2rem; /* larger */
    color: #333;
    text-align: center; /* centred */
    font-weight: 600;
    margin: 0; /* remove extra spacing */
}

.scenario-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Ensure the badge inside doesn’t try to share a row with anything else */
.scenario-group .analysis-badge {
    flex: 1 1 100%; /* full width of the group */
    min-width: auto; /* override the earlier 120px if needed */
}

/* Mode-dependent label */
.mode-label {
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 600;
    color: #5a3e1b; /* Warm dark brown */
    padding: 3px 6px; /* less padding */
    background: #f7efe3; /* Creamy background */
    border-left-width: 2px; /* thinner accent line */
    border-radius: 3px;
}

/* Shrink mode labels above scenario badges even more */
.scenario-group > .mode-label {
    font-size: 0.75rem; /* even smaller font size */
    padding: 2px 5px;
    border-left-width: 2px;
    color: #6a4f30; /* optionally a slightly softer colour */
}

.mode-description {
    font-size: 0.85em;
    color: #7a5b3e; /* Softer complementary brown */
    margin-top: 2px;
    display: block;
    line-height: 1.3em;
}

/* horizontal rule styling */
#scenario-separator {
    border: none;
    border-top: 1px solid #ddd;
    margin: 12px 0;
}

/* ———————————————— */
/* Shrink Scenario Badges (keeps original rules) */
/* ———————————————— */
#scenario-badges .analysis-badge {
    padding: 6px 12px; /* reduce vertical padding */
    font-size: 1.1rem; /* slightly smaller text */
    gap: 8px; /* slightly tighter gap between icon & text */
    min-width: 100px; /* allow them to shrink a bit more */
    margin-bottom: 7px;
}

/* If you have those side-by-side rows, shrink those too */
#scenario-badges .scenario-badges-row .analysis-badge {
    flex: 1 1 45%; /* let two sit comfortably in a row */
}

/* Optional: reduce symbol size in scenario badges only */
#scenario-badges .badge-symbol {
    width: 28px;
    height: 28px;
    font-size: 18px;
}

.scenario-badges-row {
    display: flex;
    gap: 8px;
}

.scenario-badges-row .analysis-badge {
    flex: 1 1 auto; /* allow badges to share space equally */
    min-width: auto; /* override min-width so they can shrink */
}

/* Slightly smaller text for polar conditions */
.badge-polar .badge-text {
    font-size: 1.1rem; /* shrink from 1.3rem down a bit */
}
.badge-polar .badge-utc-offset {
    font-size: 0.7rem; /* shrink the offset too */
    padding: 0 2px;
}

/* ===========================================
   POLAR GRADIENTS
   =========================================== */
.badge-polar.polar-night {
    /* Vibrant midnight blue → vivid purple */
    background: linear-gradient(135deg, #1e3a8a, #7c3aed);
    color: #eef2ff; /* very pale lavender-white */
}

.badge-polar.polar-day {
    /* Soft sky blue → pale lilac */
    background: linear-gradient(135deg, #e0f2fe, #f3e8ff);
    color: #334155; /* slate gray for contrast */
}

.badge-polar.polar-night .badge-utc-offset {
    color: rgba(238, 242, 255, 0.85);
}
.badge-polar.polar-day .badge-utc-offset {
    color: rgba(51, 65, 85, 0.85);
}

.badge-polar.polar-night .badge-utc-offset {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-weight: 600;
    font-size: 0.8rem;
    background-color: rgba(0, 0, 0, 0.6); /* darker backdrop */
    color: #ffffff; /* pure white text */
    padding: 0 4px;
    border-radius: 3px;
    opacity: 1; /* full opacity */
    text-shadow: none; /* remove glow for clarity */
}

/* Day-Length Badge */
#daylength-badge .analysis-badge {
    /* reuse badge base, but give it its own theme */
    background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
    color: #006064;
    padding: 6px 10px; /* less vertical padding */
    font-size: 1.1rem; /* slightly smaller text */
    gap: 8px; /* a tighter icon-text gap */
}

#daylength-badge .badge-symbol {
    font-size: 18px;
}
#daylength-badge .badge-utc-offset {
    display: none; /* we don’t need an offset on the day-length badge */
}

/* ===========================================
   CITY LABELS (keeps original rules for non-mobile)
   =========================================== */
.city-label .city-badge {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    width: 165px;
    height: 70px;
    position: relative;
    background: #f8f8f8;
    transition: transform 0.2s ease; /* smooth movement */
}

/* Top: City Name */
.city-badge .badge-header {
    background: #ffffff;
    color: #222;
    font-weight: 700;
    font-size: 0.7rem; /* slightly smaller font */
    padding: 4px 6px;
    border-bottom: 1px solid #ddd;
    position: relative;
    display: flex;
    align-items: flex-end; /* align content to bottom */
}

/* UTC offset placed inside header, bottom-right corner */
.city-badge .badge-header .badge-utc-offset {
    position: absolute;
    right: 8px;
    bottom: 6px;
    font-size: 0.55rem; /* smaller font */
    font-weight: 600;
    color: #444;
    background-color: rgba(255, 255, 255, 0.65);
    padding: 1px 4px;
    border-radius: 4px;
}

.city-badge .badge-row.sun-times {
    display: flex;
    justify-content: space-between;
    gap: 3px;
    padding: 5px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #333;
}

.city-badge .badge-row.sun-times > div {
    flex: 1; /* distribute space evenly */
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
}

.city-badge .badge-row.sun-times .sunrise {
    background: linear-gradient(to right, #ffe0a0, #ffc57a);
}

.city-badge .badge-row.sun-times .sunset {
    background: linear-gradient(to right, #ffd4d4, #ffa8a8);
}

.city-badge .badge-row.sun-times .icon {
    font-size: 0.9rem;
}

/* Symbol */
.badge-row .icon {
    font-size: 1rem; /* slightly smaller */
}

/* Mini polar badge inside city labels */
.city-badge .badge-row.sun-times.badge-polar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    margin-right: 8px;
    margin-left: 8px;
    padding-bottom: 7.609px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Day style */
.city-badge .badge-row.sun-times.badge-polar.polar-day {
    background: linear-gradient(135deg, #e0f2fe, #f3e8ff);
    color: #334155;
}

/* Night style */
.city-badge .badge-row.sun-times.badge-polar.polar-night {
    background: linear-gradient(135deg, #1e3a8a, #7c3aed);
    color: #eef2ff;
}

/* Icon tweaks */
.city-badge .badge-row.sun-times.badge-polar .icon {
    font-size: 1rem;
    line-height: 1;
}