/* iphone.css — Fase 9 (29. sep 2026): systematisk iPhone-gennemgang af ALLE sider (JARVIS-STIL §6).
   Indlæses allersidst (efter bevaegelse.css). Kun regler under desktop-bredden — desktop er uændret.
   Målt af tests/e2e/iphone-enhed.spec.js i 390×844, 375×667 og 430×932:
     - trykmål ≥ 48×48 px (knapper, links, piller, faner, felter, luk-knapper, prikker)
     - safe areas (notch/Dynamic Island top, hjem-bjælken bund, landskab venstre/højre)
     - 16 px i alle felter (ingen iOS-zoom), ingen vandret scroll, ingen scroll-lås
     - små dialoger er bottom sheets på mobil; tastaturet dækker aldrig feltet (src/mobil.js sætter --vv-*) */

@media (max-width: 1023.98px) {
    /* ---------- Trykmål ≥ 48 px ---------- */
    .knap, .knap--lille { min-height: var(--touch-min); }
    .knap--ikon { width: var(--touch-min); min-width: var(--touch-min); }
    .pille, .piller--smaa .pille, .app--skal .log-chip, .app--skal .filer__fane { min-height: 48px; min-width: 48px; justify-content: center; }
    .app-header__logo, .app-sidebar__logo { display: inline-flex; align-items: center; min-height: 48px; }
    .budget--kompakt .budget__indikator, .budget__indikator { min-height: 48px; min-width: 48px; }
    summary, .kc-teknisk > summary, .rg-kilder summary, .motor-log summary, .dashboard__kc-summary { min-height: 48px; align-content: center; }   /* align-content: centrering uden at miste pilen */

    /* Forsiden */
    .forside .projekt-kort { min-height: 48px; }
    .forside .projekt-kort--tilfoej { width: 48px; height: 48px; }
    .forside .ph__status { min-height: 48px; }
    /* Prikken er lille — trykfladen er 48×48 og overlapper naboerne en smule (negativ margen), så rækken ikke bliver bredere */
    .ph__prik, .forside .ph__prik { position: relative; width: 48px; height: 48px; margin-inline: -15px; }
    .ph__prikker { gap: 0; }
    .forside__projekt { max-width: 100%; }
    .forside .projekt-kort { min-width: 0; }
    .sb { height: 48px; }
    .sb__del { min-height: 48px; }
    .forside__se-alt { min-height: 48px; display: inline-flex; align-items: center; }
    .kc-oversigt__prik { min-height: 48px; }

    /* Boblen */
    .boble__samtale-knap, .boble__samtale-ny, .boble__samtale-punkt, .boble__ikon-knap { min-height: 48px; }
    .boble__ikon-knap { width: 48px; }
    .boble .knap--ikon, .boble__hoved .knap { min-width: 48px; min-height: 48px; }
    .besked-boble__kopier { width: 48px; height: 48px; }
    .md__blok-kopier, .besked-boble__svar-knap { min-height: 48px; }
    .boble-ark--aaben .boble-ark__luk { width: 48px; height: 48px; }

    /* Kontrolrummet */
    .kc-chip, .kc-side .kc-chip, .kc-side .kc-vis-flere, .kc-side .kc-topbar__vaelger, .kc-side .motor-runner__knapper .knap, .kc-side .fejl__aabn { min-height: 48px; }
    .kc-skuffe__luk { min-width: 48px; min-height: 48px; }

    /* Hele systemet (universkortet) */
    .uk-node { min-height: 48px; }
    .uk-filter__knap, .uk-zoom__knap { min-height: 48px; min-width: 48px; }
    .uk-detalje__luk { width: 48px; height: 48px; }

    /* Rådgivere */
    .rg-handling { min-height: 48px; }
    .rg-input__felt { min-height: 48px; }
    .rg-samtale, .rg-skuffe .knap { min-height: 48px; }

    /* Historik, Mine filer, Kunder, Personer */
    .log-panel__luk, .fil-panel__luk { width: 48px; height: 48px; }
    a.info-raekke__vaerdi { display: inline-flex; align-items: center; min-height: 48px; }
    .person__email a { display: inline-flex; align-items: center; min-height: 48px; }

    /* Login-siderne: alle links er rigtige trykflader */
    .auth-link, .auth-kort a, .auth-side__fod a { display: inline-flex; align-items: center; min-height: 48px; }

    /* ---------- Ingen vandret scroll ---------- */
    .support-hjaelpelinje__venstre, #support-kanal-piller, .hjaelpelinje > div { min-width: 0; max-width: 100%; }

    /* ---------- Safe areas (notch/Dynamic Island, hjem-bjælken, landskab) ---------- */
    .app-header { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    .side, .app--skal .akt-side, .app--skal .log-side, .app--skal .uk-side, .app--skal .kc-side, .app--skal #filer {
        padding-left: max(var(--side-pad), env(safe-area-inset-left));
        padding-right: max(var(--side-pad), env(safe-area-inset-right));
    }
    .app-sidebar { padding-left: env(safe-area-inset-left); }
}

/* ---------- Skuffen har sin egen luk-knap (burgeren i headeren ligger under skuffen, når den er åben) ---------- */
.app-sidebar__luk { display: none; }
@media (max-width: 1023.98px) {
    .app-sidebar__top { position: relative; }
    .app-sidebar__luk {
        position: absolute;
        top: var(--trin-4);
        right: var(--trin-2);
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        color: var(--farve-tekst-daempet);
        transition: background-color var(--bev-hover) var(--bev-ud), color var(--bev-hover) var(--bev-ud);
    }
    .app-sidebar__luk:hover { background: rgba(14, 58, 93, .06); color: var(--farve-navy); }
    .app-sidebar__luk:focus-visible { outline: 2px solid var(--farve-blaa); outline-offset: -2px; }
}

/* ---------- Felter: altid 16 px på touch (ingen iOS-zoom ved fokus) ---------- */
@media (max-width: 1023.98px), (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: max(16px, 1em); }
}

/* ---------- Formular-dialoger (opret kunde, ny sag, ny mappe, planer …) er bottom sheets på mobil.
   components.css' mobil-regel stod FØR desktop-reglen (width: min(600px, 92vw)) og tabte derfor — den var centreret. ---------- */
@media (max-width: 639.98px) {
    .kc-skuffe.dialog-form {
        inset: auto 0 0 0;
        margin: auto 0 0;
        width: 100vw;
        max-width: 100vw;
        height: auto;
        max-height: calc(100dvh - 24px - env(safe-area-inset-top));
        border-radius: 20px 20px 0 0;
    }
    .kc-skuffe.dialog-form[open] { animation: bev-ark-op var(--bev-ark) var(--bev-fjeder); }
    .dialog-form .kc-skuffe__hoved { padding-top: var(--trin-5); }
}

/* Detalje-modaler er fuld skærm på mobil — også de smalle (sag, plan), hvis desktop-bredde ellers vandt */
@media (max-width: 639.98px) {
    dialog.kc-skuffe.detalje, dialog.kc-skuffe.detalje.detalje--smal.support-skuffe, dialog.kc-skuffe.detalje.detalje--smal.plan-skuffe {
        inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0;
    }
}

/* ---------- Små dialoger bliver bottom sheets på mobil (STOP ALT, genstart, budget, nyt projekt, rådgiver) ---------- */
@media (max-width: 639.98px) {
    dialog.styring-dialog, dialog.budget-dialog, dialog.projekt-dialog, dialog.rg-dialog, dialog.filer__mappe-dialog {
        margin: auto 0 0;
        inset: auto 0 0 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: calc(100dvh - 24px - env(safe-area-inset-top));
        border-radius: 20px 20px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
        animation: bev-ark-op var(--bev-ark) var(--bev-fjeder);
    }
    dialog.styring-dialog .styring-dialog__knapper { flex-direction: column-reverse; }
    dialog.styring-dialog .styring-dialog__knapper .knap { width: 100%; min-height: 48px; }
    dialog.styring-dialog--fare { border-top-width: 5px; }
}

/* ---------- Tastaturet: src/mobil.js sætter --vv-top/--vv-hoejde når tastaturet er ude ---------- */
@media (max-width: 1023.98px) {
    html.tastatur-aaben .dashboard__boble.boble-ark--aaben {
        top: calc(var(--vv-top, 0px) + 8px);
        bottom: auto;
        height: calc(var(--vv-hoejde, 100dvh) - 8px);
    }
    html.tastatur-aaben dialog[open]:modal { max-height: var(--vv-hoejde, 100dvh); }
}
@media (max-width: 639.98px) {
    /* Bottom sheets løftes op over tastaturet og krymper til det synlige område — feltet kan så rulles frem */
    /* !important: en midlertidig tilstand (kun mens tastaturet er ude) der skal vinde over alle dialogers egne mål */
    html.tastatur-aaben dialog[open]:modal:not(.palet) {
        top: auto !important;
        bottom: var(--tastatur, 0px) !important;
        margin-bottom: 0 !important;
        max-height: calc(var(--vv-hoejde, 100dvh) - 8px) !important;
    }
    html.tastatur-aaben dialog.kc-skuffe.detalje[open] { height: calc(var(--vv-hoejde, 100dvh) - 8px) !important; }
    html.tastatur-aaben .boble-fab { opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
    dialog.styring-dialog, dialog.budget-dialog, dialog.projekt-dialog, dialog.rg-dialog, dialog.filer__mappe-dialog, .kc-skuffe.dialog-form[open] { animation: none; }
}