/* --------------------------------------------------------------
   Mobile‑first overrides – they only kick in on narrow viewports
   -------------------------------------------------------------- */

/* 1️⃣ Base adjustments for any screen ≤ 768 px (phones & small tablets) */
@media (max-width: 768px) {

    /* Body & map – give a little breathing room on tiny screens */
    body {
        font-size: 14px;               /* slightly smaller text */
        line-height: 1.4;
    }
    #map {
        height: calc(100vh - 50px);    /* keep space for the top bar */
    }

    /* ----------------------------------------------------------------
       Top bar – stretch inputs, shrink buttons, keep everything on one line
       ---------------------------------------------------------------- */
    #topBar {
        flex-wrap: wrap;               /* allow wrapping on very narrow screens */
        height: auto;                  /* let it grow if needed */
        padding: 5px 10px;
        gap: 4px;
    }
    #topBar input[type=text] {
        flex: 1 1 100%;                /* full width on wrap */
        min-width: 0;                  /* allow shrinking */
        margin-bottom: 4px;
    }
    #topBar button {
        flex: 0 0 auto;
        padding: 4px 8px;
        font-size: 0.9rem;
    }
    #lastUpdated {
        order: 2;                      /* push to next line when wrapped */
        width: 100%;
        text-align: right;
        margin-top: 4px;
    }

    /* ----------------------------------------------------------------
       Export dropdown – make it easier to tap
       ---------------------------------------------------------------- */
    .export-wrapper {
        width: 100%;
    }
    #exportDropdown {
        width: 100%;
        left: 0;
        right: 0;
        margin-top: 4px;
    }
    #exportDropdown select,
    #exportDropdown button {
        font-size: 0.9rem;
        padding: 6px;
    }

    /* ----------------------------------------------------------------
       Settings sidebar – slide in from the right but start hidden off‑screen
       ---------------------------------------------------------------- */
    #settingsSidebar {
        width: 80%;                    /* take most of the screen */
        max-width: 300px;
        right: -80%;                   /* hide off‑canvas */
        top: 0;                        /* cover the whole viewport (including top bar) */
        height: 100vh;
        transition: right 0.3s ease;
    }
    #settingsSidebar.open {
        right: 0;                      /* slide fully into view */
    }
    #settingsToggle {
        top: 10px;                     /* bring the toggle up since the sidebar now covers the top bar */
        right: 10px;
    }

    /* ----------------------------------------------------------------
       Legend – move to bottom‑right corner, shrink icons
       ---------------------------------------------------------------- */
    #legend {
        bottom: 70px;                  /* give room for toast */
        right: 10px;
        left: auto;
        max-width: 180px;
        padding: 8px;
    }
    .legend-item {
        font-size: 0.85rem;
    }
    .legend-color {
        width: 12px;
        height: 12px;
    }

    /* ----------------------------------------------------------------
       “What is” info box – centre it and make it full‑width on tiny screens
       ---------------------------------------------------------------- */
    #whatIsDiv {
        left: 50%;
        top: 70px;
        transform: translateX(-50%);
        max-width: 90%;
        width: 100%;
        padding: 12px;
    }

    /* ----------------------------------------------------------------
       Toast – a bit larger for finger taps
       ---------------------------------------------------------------- */
    #toast {
        bottom: 30px;
        font-size: 0.9rem;
        padding: 12px 20px;
    }
}

/* --------------------------------------------------------------
   Extra fine‑tuning for ultra‑small phones (≤ 480 px)
   -------------------------------------------------------------- */
@media (max-width: 480px) {

    /* Reduce the height of the top bar to save vertical space */
    #topBar {
        height: 40px;
        padding: 4px 8px;
    }
    #topBar input[type=text] {
        font-size: 0.9rem;
        padding: 4px 6px;
    }
    #topBar button {
        font-size: 0.85rem;
        padding: 3px 6px;
    }

    /* Make the settings toggle a bit bigger for easier tapping */
    #settingsToggle {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    /* Legend becomes a compact badge */
    #legend {
        bottom: 60px;
        right: 5px;
        padding: 6px;
    }

    /* Toast stays centered but a tad higher */
    #toast {
        bottom: 20px;
    }
}

/* --------------------------------------------------------------
   Optional: Landscape orientation on phones – keep map full‑screen
   -------------------------------------------------------------- */
@media (orientation: landscape) and (max-width: 768px) {
    #map {
        height: calc(100vh - 40px);   /* top bar is thinner in landscape */
    }
    #topBar {
        flex-direction: row;
        justify-content: space-between;
    }
}