/* Ny klient — stylesheet fra bunden. Erstatter inc/dk.css. Bygges op fase for
   fase; Fase 1 dækker kort-laget (fylde skærmen, zone-labels, klik-popups). */

/* DOT's brandfont, self-hostet woff2 (web-familie "AtB Digital"). */
@font-face {
    font-family: "AtB Digital";
    src: url("fonts/AtB2-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "AtB Digital";
    src: url("fonts/AtB2-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "AtB Digital";
    src: url("fonts/AtB2-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Brandfarver (DOT designmanual). Ringpaletten kommer fra config (Fase 4). */
:root {
    --dot-blue: #0019ff;
    --dot-blue-dark: #002273;
    --dot-red: #ca002d;
    --dot-grey: #4d4e56;
    --focus-ring: #0019ff;
}

* { box-sizing: border-box; }

html, body, main, #map {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: "AtB Digital", Helvetica, Arial, sans-serif;
    color: #1a1a1a;
}

#map {
    height: 100%;
}

/* Synligt fokus overalt (F-1 / WCAG 2.4.7). */
:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Skjult visuelt, men tilgængeligt for skærmlæsere (skip-link + h1). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Skip-link bliver synlig ved fokus. */
.skip-link {
    position: absolute;
    left: 8px;
    top: -48px;
    z-index: 1000;
    background: var(--dot-blue-dark);
    color: #fff;
    padding: 8px 14px;
    border-radius: 4px;
    text-decoration: none;
    transition: top .15s ease;
}
.skip-link:focus {
    top: 8px;
}

/* Leaflet-UI (labels, attribution, kontroller, popups) på DOT's brandfont.
   Indlæses efter leaflet.css, så denne vinder over Leaflets egen font-stak. */
.leaflet-container {
    font-family: "AtB Digital", Helvetica, Arial, sans-serif;
}
/* Attribution i samme størrelse som den nuværende app (11px). */
.leaflet-control-attribution {
    font-size: 11px;
}

/* Permanente zone-nummer-labels på kortet (porteret .my-labels). */
.leaflet-tooltip.my-labels {
    background-color: transparent;
    border: transparent;
    box-shadow: none;
    font-weight: 400;
    font-size: 12px;
    color: #1a1a1a;
}
/* Zoomet ind (detaljeret baggrundskort): gør zone-numrene fede så de ikke drukner.
   Klassen sættes af map.js ved zoom >= 11 (screendump-niveauet er zoom 10). */
#map.labels-bold .leaflet-tooltip.my-labels {
    font-weight: 700;
}

/* Klik-på-zone popup (vælg fra-/til-adresse). */
.choose-adr-box {
    min-width: 260px;
}
.choose-adr-text {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.4;
}
.choose-adr-btn {
    display: block;
    width: 100%;
    min-height: 36px;
    margin-top: 6px;
    padding: 8px 12px;
    border: 0;
    border-radius: 4px;
    background: var(--dot-blue-dark);
    color: #fff;
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.choose-adr-btn:hover {
    background: var(--dot-blue);
}

/* ======================================================================
   Popup (flydende infoboks) + combobox
   ====================================================================== */

.dot-popup {
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 1200;
    width: min(340px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    font-size: 14px;
    color: #1a1a1a;
}

/* Header-bjælke: grip · titel · minimér */
.dot-popup__bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #fff;
    border-bottom: 1px solid #e6e8ee;
}
/* Mobil-drag-håndtag ("grabber"-pille): skjult på desktop. */
.dot-popup__grabber { display: none; }
.dot-popup__grip {
    border: 0;
    background: transparent;
    color: var(--dot-grey);
    font-size: 16px;
    line-height: 1;
    min-width: 28px;
    min-height: 28px;
    cursor: grab;
    touch-action: none;
}
.dot-popup__grip:active { cursor: grabbing; }
.dot-popup__title {
    flex: 1;
    font-weight: 400;
    color: var(--dot-blue-dark);
}
.dot-popup__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--dot-blue-dark);
    min-width: 28px;
    min-height: 28px;
    cursor: pointer;
    border-radius: 4px;
}
.dot-popup__toggle svg { display: block; }
.dot-popup__toggle:hover { background: #eef1ff; }

/* Minimeret bjælke */
.dot-popup__min {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    /* Centreret: kortere placeholder-tekster ("Vælg adresser…"/"Vælg zoner"/
       "Ringzonekort") holdes væk fra telefonens afrundede skærmhjørner, hvor
       venstrestillet tekst ellers blev klippet. */
    text-align: center;
}
.dot-min-metro { color: var(--dot-grey); }

.dot-popup__body {
    padding: 10px;
    overflow-y: auto;
}

/* Tabs (segmenteret fuldbredde-kontrol) */
.dot-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.dot-tab {
    flex: 1;
    min-height: 36px;
    padding: 6px 8px;
    border: 1px solid var(--dot-blue);
    background: #fff;
    color: var(--dot-blue);
    font: inherit;
    font-weight: 400;
    cursor: pointer;
    border-radius: 6px;
}
.dot-tab[aria-selected="true"] {
    background: var(--dot-blue);
    color: #fff;
}

/* Felter */
.dot-field { margin-bottom: 10px; }
.dot-field__label {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #33373f;
    margin-bottom: 3px;
    /* Flugt med feltets venstre kant, ikke A/B-ikonets: badge 22px + gap 6px. */
    margin-left: 28px;
}
.dot-field__wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dot-endpoint {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    font-weight: 400;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
}
.dot-endpoint--a { background: var(--dot-blue); }
.dot-endpoint--b { background: var(--dot-red); }
.dot-field__input {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #b9bec8;
    border-radius: 6px;
    font: inherit;
}
.dot-field__input::placeholder { color: #5b616b; }
.dot-field__input:disabled { background: #f2f3f5; color: #6b7078; }
/* Fokus på felter: blå kant på selve feltet i stedet for en kraftig ydre
   outline-boks (som gik op i labelen). Contained via inset box-shadow — ingen
   ydre boks, ingen layout-forskydning. Gælder alle felter med .dot-field__input,
   også fremadrettet (zone-builder, ringzone-centrum m.fl.). */
.dot-field__input:focus-visible {
    outline: none;
    border-color: var(--dot-blue);
    box-shadow: inset 0 0 0 1px var(--dot-blue);
}
/* iOS Safari zoomer automatisk ind på et fokuseret input hvis feltets
   skriftstørrelse er UNDER 16px — det forstørrer hele siden og skubber popup'en
   ud over højre kant når tastaturet kommer op. Mindst 16px på touch-enheder
   forhindrer zoomet (og er samtidig mere læsbart på små skærme). */
@media (pointer: coarse) {
    .dot-field__input { font-size: 16px; }
}

/* Combobox-dropdown (overlejrer indholdet nedenunder) */
.cb-listbox {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #b9bec8;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.cb-option {
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f0f1f4;
}
.cb-option:last-child { border-bottom: 0; }
.cb-option--active,
.cb-option[aria-selected="true"] {
    background: #eef1ff;
}

/* Knapper */
.dot-btn {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-weight: 400;
    cursor: pointer;
}
.dot-btn--primary {
    background: var(--dot-blue-dark);
    color: #fff;
}
.dot-btn--primary:hover { background: var(--dot-blue); }
.dot-btn:disabled { opacity: 0.75; cursor: default; }

.dot-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dot-spin 0.7s linear infinite;
}
@keyframes dot-spin { to { transform: rotate(360deg); } }
/* Ingen bevægelse hvis brugeren fravælger animation: skjul ringen, vis blot teksten. */
@media (prefers-reduced-motion: reduce) {
    .dot-spinner { display: none; }
}

/* Fejl-/tom-tilstand (DOT's ordlyd) */
.dot-error {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fdecee;
    border: 1px solid var(--dot-red);
    border-radius: 6px;
    color: #8a0020;
    font-weight: 400;
}

/* Resultater */
.dot-results { margin-top: 10px; }
.dot-results__note { margin: 0 0 8px; font-size: 12px; color: #4d4e56; }
.dot-results__more { margin: 8px 0 0; font-size: 13px; }
.dot-results__more a { color: var(--dot-blue-dark); }
.dot-result {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
    padding: 9px 11px;
    border: 1px solid #ccd2dc;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    cursor: pointer;
}
.dot-result:hover { border-color: var(--dot-blue); }
.dot-result--selected {
    border: 2px solid var(--dot-blue);
    background: #eef1ff;
}
.dot-result__line { display: block; line-height: 1.5; }
.dot-result__metro { color: var(--dot-grey); }

/* Zone-builder ("Vælg zoner") */
.zb-announce {
    margin: 0 0 10px;
    padding: 8px 10px;
    background: #eef1ff;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--dot-blue-dark);
}
.zb-announce:empty { display: none; }
.zb-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}
.zb-count { margin: 0; font-size: 13px; color: #33373f; }
.zb-clear {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--dot-blue-dark);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    padding: 2px 4px;
    min-height: 24px;
}
.zb-clear:hover { color: var(--dot-blue); }
.zb-chips {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.zb-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 3px 3px 10px;
    background: #eef1ff;
    border: 1px solid var(--dot-blue);
    border-radius: 15px;
    font-size: 13px;
    line-height: 1.2;
}
.zb-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dot-blue-dark);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.zb-chip__x:hover { background: rgba(0, 25, 255, 0.12); }
.zb-price { margin-top: 10px; }
.zb-price__min { margin: 0; font-size: 13px; color: #4d4e56; }
.zb-price__note { margin: 0 0 6px; font-size: 12px; color: #4d4e56; }
.zb-price__main { margin: 0; font-size: 15px; }
.zb-price__metro { margin: 4px 0 0; font-size: 14px; color: var(--dot-grey); }

/* Ringzone-popup: centrum-felt (farveprøve + lup) + ring-oversigt */
.rz-swatch {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid #000;
    background: transparent;
}
.rz-magnifier {
    flex: 0 0 auto;
    color: var(--dot-grey);
}
.rz-overview { margin-top: 12px; }
.rz-ring {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid #eceef2;
}
.rz-ring__swatch {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 3px;
    border: 1px solid #000;
}
.rz-ring__body { display: flex; flex-direction: column; min-width: 0; }
.rz-ring__label { font-size: 13px; color: #1a1a1a; }
.rz-ring__zones { font-size: 12px; color: #4d4e56; line-height: 1.45; }
.rz-ring--rest { align-items: center; color: #4d4e56; }
.rz-ring--rest .rz-ring__label { color: #4d4e56; }

/* ======================================================================
   Mobil / smal iframe: popup'en bliver en bund-dokket bottom sheet
   ====================================================================== */
@media (max-width: 640px) {
    .dot-popup {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
    }
    /* Mobil: hele headeren er drag-håndtag (bottom sheet). Skjul flyt-grebet, vis en
       grabber-pille, og centrér titlen. Træk op = fold ud, ned = minimér, tap = skift. */
    .dot-popup__grip { display: none; }
    .dot-popup__bar {
        padding-top: 16px;
        cursor: grab;
        touch-action: none;
        justify-content: center;
    }
    .dot-popup__bar:active { cursor: grabbing; }
    .dot-popup__title { text-align: center; }
    .dot-popup__grabber {
        display: block;
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 2px;
        background: #c8ccd6;
    }
    /* Minimér/maksimér-knappen skjules visuelt på mobil (touch bruger drag-håndtaget),
       men bevares fokuserbar for tastatur/skærmlæser og dukker op ved fokus. */
    .dot-popup__toggle {
        position: absolute;
        width: 1px; height: 1px; min-width: 0; min-height: 0; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .dot-popup__toggle:focus, .dot-popup__toggle:focus-visible {
        position: absolute; top: 4px; right: 6px;
        width: auto; height: auto; min-width: 28px; min-height: 28px;
        padding: 4px; margin: 0; overflow: visible; clip: auto; white-space: normal;
        background: #eef1ff; z-index: 1;
    }
    .dot-popup--mnotitle .dot-popup__title { display: none; }

    /* Søge-tilstand: aktivt felt i toppen af det synlige areal, forslag fylder nedad
       (faner skjules for at give plads). JS (popupshell.js) sætter top/left/width fra
       visualViewport, så toppen sidder over tastaturet og bredden ikke løber ud over
       kanten. HØJDEN styres derimod af height:100% (hele layout-viewporten = ned til
       skærmbunden, bag tastatur + browserens nederste URL-linje) — ellers ville iOS'
       visualViewport.height, der udelader URL-linjen, efterlade et synligt bånd af
       kortet mellem popup-bund og tastatur. --vvh begrænser kun forslagslistens højde. */
    .dot-popup--searching {
        top: 0;
        bottom: auto;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
    .dot-popup--searching .dot-popup__body { flex: 1 1 auto; min-height: 0; }
    .dot-popup--searching .dot-tabs { display: none; }
    .dot-popup--searching .cb-listbox { max-height: calc(var(--vvh, 100vh) - 108px); }
}