/* Cykelkartan — flytande UI (pills), adressök + cykelrutt.
   Mobile-first. Inga solida barer: allt är flytande element ovanpå kartan.
   Följer designriktlinjerna: kommungrön bas, system/Inter-font, 4px-system, mjuka skuggor. */

:root {
    --accent: #00a01e;
    --accent-strong: #006e1e;
    --route: #1769ff;
    --text: #2b2b2b;
    --text-soft: #555555;
    --text-light: #787575;
    --border: #e3e3e3;
    --bg-hover: #f2f4f3;
    --white: #ffffff;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --pill: 999px;
    --edge: 14px;            /* avstånd från kanten för flytande element */
    --pill-h: 46px;          /* höjd på flytande pills */
    --ease: cubic-bezier(.4,0,.2,1);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* iPhone: notch/hemindikator (0 där safe areas saknas) */
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

[hidden] { display: none !important; }

/* Appens reset saknar border-box; utan den blir width:100% + padding bredare än
   skärmen på mobil (paneler/sheets klipptes på iPhone). Scopat till cy-UI:t så
   den gamla kartans element inte påverkas. */
.cy-float-top, .cy-float-top *,
#cyRoutePanel, #cyRoutePanel *,
#cyLayersPanel, #cyLayersPanel *,
.cy-legend, .cy-legend *,
.cy-popup, .cy-popup *,
.cy-dropdown, .cy-dropdown * { box-sizing: border-box; }

/* iOS: ingen 300ms-fördröjning/dubbeltapp-zoom eller grå tap-blink på knappar */
.cy-pill-btn, .cy-icon-btn, .cy-btn-ghost, .cy-route-alt, .cy-drop-item,
.cy-legend__header, .cy-layer-row, .cy-switch input, .cy-popup-close, .mapButton {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 22px; line-height: 1; user-select: none;
}

body { font-family: var(--font); }

/* ---- Karta i hela vyn; befintliga kontroller flyttas nedre höger ---- */
#map { top: 0; }

#LegendButton { display: none; }          /* ersatt av dynamisk legend */
.mapButton {
    border: 0;
    box-shadow: var(--shadow-md);
    z-index: 1200;
}
.mapButton:hover { background: #f4f4f4; }
#ZoomPlus   { top: auto; bottom: calc(72px + var(--sab));  right: calc(var(--edge) + var(--sar)); }
#ZoomMinus  { top: auto; bottom: calc(26px + var(--sab));  right: calc(var(--edge) + var(--sar)); }
#FullScreen { top: auto; bottom: calc(126px + var(--sab)); right: calc(var(--edge) + var(--sar)); }
#GPS        { top: auto; bottom: calc(174px + var(--sab)); right: calc(var(--edge) + var(--sar)); }
#GPS.active { background: var(--accent); }

.Umea { top: auto; bottom: calc(12px + var(--sab)); left: calc(14px + var(--sal)); opacity: .9; z-index: 1100; }

/* POI-info (cykelpump/ställ) — ligger under de flytande pillsen */
#MarkerInfo { top: calc(72px + var(--sat)); border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
/* Stäng-X:et låg på 10,10 (mobil) resp 60px (desktop) — gömt under/kant-i-kant med
   brand-pillen. Flytta med panelen (72px) så det hamnar ovanpå panelinnehållet. */
#MarkerInfo #CloseMarkerInfo { top: calc(82px + var(--sat)); }

/* ---- Läsbarhetsgradient i toppen ---- */
.cy-topgrad {
    position: fixed; top: 0; left: 0; right: 0; height: calc(120px + var(--sat));
    background: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,0));
    pointer-events: none; z-index: 4000;
}

/* ============================ FLYTANDE TOPP-PILLS ============================ */
.cy-float-top {
    position: fixed;
    top: calc(var(--edge) + var(--sat));
    left: calc(var(--edge) + var(--sal));
    right: calc(var(--edge) + var(--sar));
    z-index: 5000;
    display: grid;
    /* minmax(0,1fr): låt kolumnerna krympa under min-content så inget rinner utanför skärmen */
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);  /* brand | sök (centrerad) | actions */
    align-items: center; gap: 10px;
    pointer-events: none;
}
.cy-float-top > * { pointer-events: auto; }
.cy-brand-pill { justify-self: start; }
.cy-search-pill { justify-self: center; width: min(440px, 100%); }
.cy-actions { justify-self: end; }

.cy-brand-pill {
    display: flex; align-items: center; gap: 9px;
    height: var(--pill-h);
    padding: 0 16px 0 10px;
    background: var(--white);
    border-radius: var(--pill);
    box-shadow: var(--shadow-md);
    flex: 0 0 auto;
}
.cy-brand-ic {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 19px;
}
.cy-brand-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--text); white-space: nowrap; }

.cy-search-pill {
    position: relative;
    display: flex; align-items: center;
    height: var(--pill-h);
    padding: 0 8px 0 14px;
    background: var(--white);
    border-radius: var(--pill);
    box-shadow: var(--shadow-md);
    transition: box-shadow .15s var(--ease);
}
.cy-search-pill:focus-within { box-shadow: var(--shadow-md), 0 0 0 3px rgba(0,160,30,.18); }
.cy-search-icon { color: var(--text-light); font-size: 20px; }
.cy-search-pill input {
    flex: 1 1 auto; min-width: 0;
    border: 0; outline: 0; background: transparent;
    /* 16px: under 16 zoomar iOS Safari in hela sidan när fältet fokuseras */
    font-family: inherit; font-size: 16px; color: var(--text);
    padding: 0 8px;
}
.cy-search-pill input::placeholder { color: var(--text-light); }

.cy-actions { display: flex; align-items: center; gap: 8px; }

.cy-pill-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: var(--pill-h); padding: 0 18px;
    background: var(--white);
    border: 0; border-radius: var(--pill);
    box-shadow: var(--shadow-md);
    color: var(--text-soft);
    font-family: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.cy-pill-btn .material-symbols-outlined { font-size: 20px; }
.cy-pill-btn:hover { background: #f6f7f6; }
.cy-pill-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }

.cy-icon-btn {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border: 0; background: transparent; border-radius: 50%;
    color: var(--text-light); cursor: pointer; flex: 0 0 auto;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.cy-icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.cy-icon-btn .material-symbols-outlined { font-size: 20px; }

/* ============================ DROPDOWN ============================ */
.cy-dropdown {
    position: absolute;
    top: calc(100% + 8px); left: 0; right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden auto; max-height: 320px;
    z-index: 6000;
    animation: cy-drop-in .14s var(--ease);
}
@keyframes cy-drop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cy-drop-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f3f3f3; }
.cy-drop-item:last-child { border-bottom: 0; }
.cy-drop-item:hover, .cy-drop-item.cy-active { background: var(--bg-hover); }
.cy-drop-item .material-symbols-outlined { color: var(--accent-strong); font-size: 20px; flex: 0 0 auto; }
.cy-drop-text { min-width: 0; }
.cy-drop-title { font-size: 14px; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cy-drop-sub { font-size: 12px; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cy-drop-empty { padding: 14px; font-size: 13px; color: var(--text-light); text-align: center; }
/* Grupprubrik per kommundel (HOLMSUND, UMEÅ …) — som i Busskortskollen */
.cy-drop-group { padding: 11px 14px 5px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-light); }
.cy-drop-group:not(:first-child) { border-top: 1px solid #ececec; margin-top: 2px; }
.cy-drop-group + .cy-drop-item { border-top: 0; }

/* ============================ RUTT-KORT (flytande) ============================ */
#cyRoutePanel {
    position: fixed;
    top: calc(var(--edge) + var(--pill-h) + 10px);
    left: var(--edge);
    width: 348px; max-width: calc(100vw - 2*var(--edge));
    max-height: calc(100vh - var(--pill-h) - 3*var(--edge));   /* fallback för äldre iOS */
    max-height: calc(100dvh - var(--pill-h) - 3*var(--edge));
    z-index: 4700;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 16px 16px 18px;
    overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
#cyRoutePanel.cy-show { transform: none; opacity: 1; visibility: visible; }

.cy-route-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cy-route-head-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(0,160,30,.10); color: var(--accent-strong); font-size: 20px; }
.cy-route-head h2 { flex: 1 1 auto; font-size: 16px; font-weight: 700; color: var(--text); }

.cy-route-fields { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.cy-route-rail { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding-top: 17px; height: 92px; }
.cy-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.cy-dot-start { background: var(--accent); box-shadow: 0 0 0 3px rgba(0,160,30,.18); }
.cy-dot-end { background: var(--route); box-shadow: 0 0 0 3px rgba(23,105,255,.18); }
.cy-rail-line { flex: 1 1 auto; width: 2px; background: var(--border); margin: 6px 0; }

.cy-field-group { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cy-field { position: relative; display: flex; align-items: center; height: 44px; padding: 0 6px 0 12px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.cy-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,160,30,.14); }
.cy-field input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 16px; color: var(--text); }
.cy-field input::placeholder { color: var(--text-light); }

.cy-swap { position: absolute; right: -2px; top: 50%; transform: translateY(-50%); background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.cy-swap:hover { background: var(--white); color: var(--accent-strong); }

.cy-route-summary { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-md); background: rgba(0,160,30,.07); border: 1px solid rgba(0,160,30,.18); }
.cy-route-summary-row { display: flex; align-items: baseline; gap: 18px; }
.cy-route-metric { display: flex; flex-direction: column; }
.cy-route-metric b { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.cy-route-metric span { font-size: 12px; color: var(--text-light); }
.cy-route-note { margin-top: 10px; font-size: 12px; color: var(--text-soft); line-height: 1.45; }
.cy-route-alt { display: flex; align-items: center; gap: 9px; margin-top: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); font-family: inherit; font-size: 13px; color: var(--text-soft); cursor: pointer; text-align: left; transition: background .15s var(--ease); }
.cy-route-alt:hover { background: var(--bg-hover); }
.cy-route-alt b { color: var(--text); font-weight: 600; }
.cy-alt-line { flex: 0 0 auto; width: 24px; height: 0; border-top: 3px dashed #8a8f96; }
.cy-alt-txt { flex: 1 1 auto; }
.cy-alt-go { flex: 0 0 auto; color: var(--accent-strong); font-weight: 600; }

.cy-route-status { margin-top: 14px; font-size: 13px; color: var(--text-light); min-height: 18px; }
.cy-route-status.cy-error { color: #c8283a; }
.cy-spin { display: inline-block; width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; border: 2px solid rgba(0,160,30,.25); border-top-color: var(--accent-strong); border-radius: 50%; animation: cy-spin .7s linear infinite; }
@keyframes cy-spin { to { transform: rotate(360deg); } }

.cy-btn-ghost { margin-top: 16px; width: 100%; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); color: var(--text-soft); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s var(--ease); }
.cy-btn-ghost:hover { background: var(--bg-hover); }

/* drag-handtag (visas bara som bottom sheet på mobil) */
.cy-sheet-handle { display: none; }

/* ============================ MOBIL (mobile-first finputs) ============================ */
@media (max-width: 760px) {
    :root { --pill-h: 44px; --edge: 10px; }

    .cy-float-top { grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; }

    .cy-brand-pill { padding: 0; width: 44px; justify-content: center; }
    .cy-brand-ic { width: 44px; height: 44px; font-size: 21px; }
    .cy-brand-name { display: none; }

    .cy-search-pill { width: auto; justify-self: stretch; }

    .cy-actions { gap: 8px; }
    .cy-pill-btn { width: 44px; padding: 0; justify-content: center; }
    .cy-pill-label { display: none; }

    /* Rutt-kort blir bottom sheet */
    #cyRoutePanel {
        top: auto; left: 0; right: 0; bottom: 0;
        width: 100%; max-width: none;
        max-height: 72vh;       /* fallback för äldre iOS */
        max-height: 72dvh;
        border-radius: 18px 18px 0 0;
        padding: 8px 16px calc(20px + var(--sab));
        transform: translateY(110%); opacity: 1;
    }
    #cyRoutePanel.cy-show { transform: none; }
    /* synlig stapel 40x4 men generös träffyta för drag (content-box + clip) */
    #cyRoutePanel .cy-sheet-handle {
        display: block; box-sizing: content-box;
        width: 40px; height: 4px;
        padding: 10px 44px 8px; margin: -4px auto 0;
        border-radius: 99px;
        background: #d6d6d6; background-clip: content-box;
        cursor: grab;
    }
    #cyRoutePanel .cy-sheet-handle, #cyRoutePanel .cy-route-head {
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }

    /* Peek-läge efter beräknad rutt: bara handtag + rubrik + resultat — kartan med
       rutten syns ovanför. Dra/tappa handtaget för att växla till fullt läge. */
    #cyRoutePanel.cy-peek .cy-route-fields,
    #cyRoutePanel.cy-peek .cy-route-status,
    #cyRoutePanel.cy-peek .cy-btn-ghost { display: none; }
    #cyRoutePanel.cy-peek { padding-bottom: calc(14px + var(--sab)); }
    #cyRoutePanel.cy-peek .cy-route-head { margin-bottom: 8px; }
    #cyRoutePanel.cy-peek .cy-route-summary { margin-top: 4px; }

    /* zoom-knappar lite större och högre upp så de inte krockar med sheet */
    #ZoomMinus  { bottom: calc(22px + var(--sab)); }
    #ZoomPlus   { bottom: calc(70px + var(--sab)); }
    #FullScreen { display: none; } /* fullskärm sällan relevant på mobil */
    #GPS        { bottom: calc(118px + var(--sab)); }
}