/* ============================================================================
   mobile-tune.css — samlet mobil-UI-tuning (2026-08). Loades SIDST i index.php
   → overrider via cascade. KUN visuelle/interaktions-fixes; ingen data/logik.
   Nemt at reverte: fjern denne fil + dens <link>. Klasser bekræftet mod DOM.
   ============================================================================ */

/* 1) ⚠ MASKINE MED ÅBENT PROBLEM ------------------------------------------------
   Badgen (⚠N) alene var for diskret på mobil (lille, wrappede under lange navne).
   Tilføjer en tydelig orange kant-markør på HELE kortet + større badge på touch. */
@media (hover: none), (max-width: 820px) {
    .prob-badge { font-size: 12px !important; padding: 2px 7px !important; }
    .tasks-card:has(.prob-badge) { box-shadow: inset 4px 0 0 #e8912f; }
    /* Board-kort: orange kant via ::before (kortet er position:relative). KOMPONERER med
       kortets øvrige box-shadow-tilstande (selected / card-search-hit / card-banner-highlight
       locate-flash) i stedet for at overskrive dem med et !important box-shadow. Kun mobil/
       touch — på desktop er ⚠N-badgen tydelig nok. */
    .card.has-problem::before {
        content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
        background: #e8912f; border-radius: 12px 0 0 12px; pointer-events: none; z-index: 3;
    }
}

/* 2) SCAN-KNAPPEN dækker modal-knapper/dialoger → skjul mens en popup er åben. */
body:has(#card-modal-overlay.active) .scan-fab,
body:has(.dwz-overlay) .scan-fab,
body:has(.pp-form-overlay) .scan-fab,
body:has(.pf-dialog-overlay) .scan-fab { display: none !important; }

/* 3) KORT-MODAL på mobil ---------------------------------------------------------
   a) Faner (Detaljer/Labels/Historik/Problemer) som BOBLER/pills i stedet for
      understregede tekst-faner — mere touch-venligt + matcher chip-stilen andre
      steder. Kan stadig scrolles vandret hvis de ikke er plads.
   b) Modal-krop scroller LODRET og rydder den faste bund-nav (så nederste felter +
      Gem-knappen kan nås — de blev før klippet af/skjult bag nav'en).
   c) Footer-knapperne (Slet/Vis i Inventory · Annullér/Gem) WRAPPER: primær-rækken
      (Annullér/Gem) får sin egen fulde bredde-linje → Gem ryger aldrig ud af skærmen. */
@media (hover: none), (max-width: 820px) {
    /* Kort-faner som BOBLER/pills */
    /* Fane-pillerne: FULD BREDDE (negativ margin æder modal-paddingen) så en afklippet
       knap fortsætter helt ud til skærmkanten = naturligt scroll-hint — mens indvendig
       padding giver første knap sin margin ved scroll-start (indtil man scroller). */
    .card-modal-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-bottom: none; gap: 8px; margin: -4px -28px 14px; padding: 2px 28px; }
    .card-modal-tabs::-webkit-scrollbar { display: none; }
    .card-tab { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--rule-2); border-radius: 999px; padding: 7px 15px; background: rgba(255,255,255,.04); margin-bottom: 0; text-transform: none; letter-spacing: 0.3px; }
    .card-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

    /* ALLE delte .modal-overlay-modaler (Rediger kort/bord, Location, Floorplan, Projekt-
       wizard, bekræft): (1) løft OVER den faste bund-nav (nav er z-index 200; overlayet var
       z-index 100 → Gem/Næste/Opret blev malet BAG nav'en på alle andre modaler end kort).
       (2) top-justér — align-items:center KLIPPER toppen af høje modaler → "kan ikke scrolle
       op". (3) modal-højde rydder de 58px nav. (dwz/pp-wizards ligger allerede på z 7000.) */
    .modal-overlay { z-index: 250; align-items: flex-start; padding-top: 12px; }
    .modal { max-height: calc(100dvh - 24px - 58px - env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    /* Footer-knapper wrapper (fælles) → primær-knap ryger aldrig ud i højre kant. */
    .modal-actions { flex-wrap: wrap; row-gap: 8px; }

    /* Kort-footer: Annullér/Gem får egen fuld-bredde linje (store, nemme tap-mål). */
    .card-modal-footer > .btn { flex: 1 1 auto; }
    .card-modal-footer .modal-actions-right { width: 100%; margin-left: 0; gap: 8px; }
    .card-modal-footer .modal-actions-right .btn { flex: 1 1 auto; }

    /* Floorplan bulk-værktøjslinje lå oven i bund-nav (board-tvillingen blev flyttet til 70px,
       floorplan blev glemt). */
    .fp-bulk-toolbar { bottom: 70px; }

    /* Kamera-knappen bor nu i bund-nav'en (se app.js) → skjul den flydende FAB helt, så den
       ikke længere står i vejen for tekst/knapper på nogen visning. */
    .scan-fab { display: none !important; }
}

/* 4) FLOORPLAN-HEADER: titlen "Fløj 2B /" brækkede grimt over 2 linjer; tætnere top. */
@media (max-width: 700px) {
    .floorplan-header { flex-wrap: wrap; row-gap: 4px; padding: 12px 16px 10px; }
    .floorplan-header h1 { font-size: 19px; white-space: nowrap; }
    .floorplan-header .info { gap: 8px; font-size: 9.5px; }
}

/* 5) PERSONER-tabel: 3. kolonne blev skåret af i højre kant — stram padding. */
@media (max-width: 700px) {
    .people-table { table-layout: auto; width: 100%; }
    .people-table thead th, .people-table tbody td { padding-left: 8px; padding-right: 8px; }
}

/* 6) BOARD-HEADER (Klargøring): "Kompakt" + "Vælg flere" var klemte på smal skærm. */
@media (max-width: 460px) {
    /* ── Kort-modalen: fuld top+sider, bund-gab m. fritsvævende Annullér ──
       Panelet gaar helt til kanterne (udnytter skaermen); i bunden efterlades et stykke
       synlig baggrund hvor Annullér bor som REN TEKST — det bekraefter designet: man
       "trykker udenfor popup'en", og den lukker (overlay-klik annullerer allerede). */
    #card-modal-overlay { padding-top: 0; align-items: stretch; }
    #card-modal-overlay .modal {
        width: 100%; max-width: 100%;
        margin: 0;
        border-radius: 0 0 18px 18px;
        border-left: none; border-right: none; border-top: none;
        height: calc(100dvh - 74px - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 74px - env(safe-area-inset-bottom, 0px));
    }
    /* Annullér ud af panelet: fritsvævende, afdæmpet tekst i bund-gabet */
    #card-modal-overlay #card-cancel-btn {
        /* absolute ift. overlayet (inset:0) — immun over for iOS' fixed-i-scroller-klipning */
        position: absolute;
        left: 50%; transform: translateX(-50%);
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        background: none; border: none; box-shadow: none;
        color: var(--cream-mute, #a9a293); font-size: 15px; letter-spacing: .08em;
        padding: 8px 22px; z-index: 260;
    }
    #card-modal-overlay #card-cancel-btn:active { color: var(--cream, #f0ece2); }
    /* Glideren fylder footer-bredden nu hvor Annullér er flyttet ud */
    #card-modal-overlay .modal-actions-right { flex: 1 1 auto; }

    /* ── "Swipe for at gemme"-glider (gammel iPhone slide-to-unlock-stil) ── */
    .slide-gem-skjult { display: none !important; }
    .slide-gem {
        position: relative; flex: 1 1 auto; min-width: 170px; height: 44px;
        border-radius: 22px; overflow: hidden;
        background: var(--ink-4, #23201b); border: 1px solid var(--rule-2, #3a352d);
        display: flex; align-items: center; justify-content: center;
        touch-action: none;   /* knop-trækket må ikke blive til scroll */
        user-select: none; -webkit-user-select: none;
    }
    .slide-gem-tekst {
        font-size: 13px; letter-spacing: .04em; color: var(--cream-mute, #a9a293);
        /* ÆGTE centreret i hele skinnen (klassisk unlock-stil) — ingen knop-padding;
           skinnen er footer-bred, så teksten kolliderer ikke med knoppen i hvile */
        background: linear-gradient(90deg, var(--cream-mute) 40%, #fff 50%, var(--cream-mute) 60%);
        background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: slide-gem-skimmer 2.2s linear infinite;   /* klassisk unlock-skimmer */
        pointer-events: none;
    }
    @keyframes slide-gem-skimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
    .slide-gem-knop {
        /* top: calc(50% - h/2) — transform er optaget af selve trækket (translateX),
           saa lodret centrering skal ske uden transform. Aflang pille, samme buede ender. */
        position: absolute; left: 4px; top: calc(50% - 19px); width: 58px; height: 38px;
        border-radius: 19px; background: var(--accent, #d9482c); color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 22px; font-weight: 700; line-height: 1;
        box-shadow: 0 1px 6px rgba(0,0,0,.45);
        transition: transform .25s ease;
        touch-action: none; cursor: grab;
    }
    .slide-gem-naesten { border-color: var(--accent, #d9482c); }
    .slide-gem-naesten .slide-gem-tekst { animation: none; -webkit-text-fill-color: var(--cream, #f0ece2); }

    /* Opgaver-header: 3 linjer → 2. Kompakt op på Planify-linjen (højre side, frigiver
       en hel linje); tæller + Alle opgaver på linje 2. display:contents lader metaens
       børn deltage direkte i headerens flex-ombrydning. */
    .tasks-header { flex-wrap: wrap; align-items: center; gap: 10px; row-gap: 8px; margin-bottom: 12px; }
    .tasks-meta { display: contents; }
    .tasks-header h1 { order: 0; }
    #tasks-toggle-compact { order: 1; margin-left: auto; }   /* auto-margin fylder linje 1 → resten ombrydes */
    .tasks-count { order: 2; }
    #tasks-toggle { order: 3; }

    /* ── Tryk-mål: usynlig udvidelse til ~44px (Apples anbefaling) ──────────────
       MÅLT på 390px-skærm: '+' var 22×22, '⋮' 30×30, '▶ Start' 47×19, lane-chips
       og Kompakt/Vælg flere 28-29 høje — deraf de "knapper der ikke rammer helt".
       Pseudo-elementet udvider KUN hit-arealet; layout og udseende er uændret.
       Vandret udvidelse gives kun til isolerede knapper — knapper der står på
       RÆKKE udvides lodret alene, så naboer ikke stjæler hinandens tryk.
       ⋮-knapperne er i forvejen position:absolute (top/right på kortet) — de må
       IKKE sættes til relative, så mister de deres placering og falder ned i
       tekstflowet øverst til venstre, oven i asset-tagget. */
    .lane-add-btn, .card-wf-btn,
    .board-bulk-toggle, .board-lane-jump { position: relative; }

    /* Isolerede ikon-knapper: fuldt 44×44 i begge retninger */
    .lane-add-btn::after, .card-menu-btn::after, .tasks-card-menu::after {
        content: ''; position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 44px; height: 44px;
    }
    /* Knapper i række/kolonne: kun LODRET udvidelse (undgår nabo-overlap) */
    .card-wf-btn::after, .board-bulk-toggle::after, .board-lane-jump::after {
        content: ''; position: absolute; left: 0; right: 0;
        top: 50%; transform: translateY(-50%);
        height: 42px;
    }

    /* Opgaver: fri af den fixed bund-nav (samme klarering som #panel-board) */
    .tasks-panel { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

    .board-header { flex-wrap: wrap; row-gap: 8px; gap: 8px;
        /* Bliv siddende under scroll: panelet er scroll-containeren, saa sticky virker her.
           Solid baggrund + hoej z-index, ellers skinner kortene igennem bag knapperne. */
        position: sticky; top: 0; z-index: 40; background: var(--ink); }
    #board-compact-toggle, #board-bulk-toggle { padding: 6px 10px; font-size: 12px; }
}

/* 7) PROJEKTER-toolbar: "Efter ansvarlig"/"Alle projekter" blev skåret af i højre kant —
   gør knap-rækken vandret scrollbar i stedet for at klippe. */
@media (max-width: 700px) {
    #projects-view-toggle { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    #projects-view-toggle::-webkit-scrollbar { display: none; }
    #projects-view-toggle > button { flex: 0 0 auto; white-space: nowrap; }
}

/* 8) FLOORPLAN placerings-bjælke ("Viser placering for …") på mobil --------------
   Bjælken er position:fixed oven på floorplanen. På smal skærm brækkede den lange
   sætning + de to TEKST-knapper den op i et højt blok, der dækkede både etage-navnet
   (= "hvilken sal er jeg på?") og etage-vælgeren. Her: ÉN kompakt linje i fuld bredde,
   knapperne vises som ikoner alene (fuld tekst ligger i title=), og selve labelen
   forkortes med ellipse i stedet for at brække. Etage-navnet står nu også I bjælken
   (se floorplan.js), så informationen aldrig går tabt bag den. */
@media (hover: none), (max-width: 820px) {
    /* Bjælken var position:fixed og lå OVEN PÅ søgefelt/header. På mobil er panelet
       en flex-kolonne (se punkt 11), så her lægges bjælken ind i selve flowet som
       første flex-element: den skubber alt under sig ned, og .floorplan-wrapper
       (flex:1) afgiver præcis den højde — altså bliver plantegningen en anelse
       mindre i stedet for at få noget lagt hen over sig. Ingen overlap kan opstå. */
    .floorplan-back-banner {
        position: static;
        left: auto; right: auto; top: auto; transform: none;
        flex: 0 0 auto;
        margin: 6px 8px 0;
        border-radius: 10px;
        padding: 4px 8px; gap: 6px; font-size: 12px; flex-wrap: nowrap;
    }
    .floorplan-back-banner .fpbb-txt { display: none; }
    .floorplan-back-banner .fpbb-link,
    .floorplan-back-banner .fpbb-replay {
        flex: 0 0 auto; padding: 6px 10px; font-size: 14px; line-height: 1;
    }
    /* Bjælken holdes lav, så den ikke klipper etage-vælgeren under sig — men
       tryk-arealet udvides usynligt lodret (knapperne står på række, så kun
       lodret; ellers ville naboerne stjæle hinandens tryk). */
    .floorplan-back-banner .fpbb-link,
    .floorplan-back-banner .fpbb-replay,
    .floorplan-back-banner .fpbb-close { position: relative; }
    .floorplan-back-banner .fpbb-link::after,
    .floorplan-back-banner .fpbb-replay::after,
    .floorplan-back-banner .fpbb-close::after {
        content: ''; position: absolute; left: 0; right: 0;
        top: 50%; transform: translateY(-50%); height: 42px;
    }
    /* Labelen tager den resterende plads og forkortes — bjælken vokser aldrig i højden. */
    .floorplan-back-banner .fpbb-label { flex: 1 1 auto; min-width: 0; overflow: hidden; }
    /* Én linje var for lidt: "M4-MacMini-67 · Fløj 2B · Lars Dalhby" fylder mere end
       de ~240px labelen har, så personnavnet blev klippet. To linjer er stadig en
       kompakt bjælke (~50px mod det oprindelige høje blok) og rummer hele teksten;
       line-clamp holder den fra at løbe videre ved meget lange navne. */
    .floorplan-back-banner .fpbb-title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.25;
        font-size: 11.5px;
        word-break: break-word;
    }
    .floorplan-back-banner .fpbb-close { flex: 0 0 auto; padding: 7px 5px; }
    /* Undtagelse: FLYT-ruten (FRA → TIL) er selve opgaven — den må gerne bryde. */
    .floorplan-back-banner .fpbb-route { flex-wrap: wrap; }
}

/* 9) BOARD-KOLONNER fyldte kun deres indhold på mobil ---------------------------
   .board-container har align-items:flex-start og .lane har max-height:calc(100% - 40px)
   → kolonnerne stoppede ved sidste kort og efterlod et stort ubrugt gab ned til
   bund-nav'en. På mobil skal hver kolonne fylde resthøjden, så kort-listen scroller
   internt helt ned. (Desktop er urørt — der er flex-start med vilje.) */
@media (hover: none), (max-width: 820px) {
    #panel-board.active .board-container { align-items: stretch; }
    #panel-board.active .lane { max-height: none; height: auto; }
}

/* 10) FLOORPLAN-VÆRKTØJSLINJE: tre linjer på telefon (lokation / etaner / standard)
    → to. Lokations-dropdownen får lov at krympe, og ⭐-knappen rykker op ved siden af
    den via order; etage-fanerne falder ned på linje 2. */
@media (max-width: 700px) {
    .fp-toolbar { gap: 8px; padding: 8px 16px; }
    .fp-location-group { order: 1; flex: 1 1 140px; min-width: 0; }
    .fp-location-select { width: 100%; min-width: 0; }
    .fp-default-btn { order: 2; flex: 0 0 auto; font-size: 11px; padding: 5px 9px; white-space: nowrap; }
    .fp-floor-tabs { order: 3; }
    .fp-plan-pills { order: 4; }
    .fp-plan-admin { order: 5; }
}

/* 11) FLOORPLAN-SIDEN skal kunne ses PÅ ÉN SKÆRM uden at scrolle -----------------
    Panelet scrollede selv (nærmeste scroll-container var .panel), så kort + zoom-
    knapper + lås lå delvis under skærmkanten. Samme mønster som #panel-board: lås
    panelet til viewporten, lad canvas fylde resthøjden via flex, og skær den 28px
    desktop-padding ned til 8 — den kostede ~17% af bredden, og fit-zoomen er
    breddebegrænset, så det gør planen mærkbart større. */
@media (hover: none), (max-width: 820px) {
    #panel-floorplan.active {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        box-sizing: border-box;
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }
    #panel-floorplan.active .floorplan-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;          /* afløser calc(100% - 140px), som ikke passer længere */
        padding: 8px;
        gap: 8px;
    }
    /* min-height:400px kan overstige resthøjden på små skærme → canvas ville skubbe
       zoom-knapperne ud af skærmen igen. */
    #panel-floorplan.active .floorplan-canvas { min-height: 0; }
}

/* 12) HJEMMESKÆRMS-GENVEJEN (PWA, fuld skærm) --------------------------------------
    I Safari skubber browserens egen bjælke indholdet fri af uret/hakket — i standalone
    starter appen ved pixel 0, og toppen (lane-chips, headere) blev skåret af. Bunden
    var allerede håndteret (env-padding på nav'en), men der fandtes IKKE ét eneste
    safe-area-inset-TOP i hele appen. Gated på display-mode, så Safari er urørt. */
@media all and (display-mode: standalone) {
    body { padding-top: env(safe-area-inset-top, 0px); }
    /* De viewport-låste paneler måler 100dvh — kroppens top-padding skal trækkes fra,
       ellers rager de env-top ud under bund-nav'en og gemmer indhold bag den. */
    #panel-board.active,
    #panel-floorplan.active {
        height: calc(100vh - env(safe-area-inset-top, 0px));
        height: calc(100dvh - env(safe-area-inset-top, 0px));
    }
    /* Login-overlayet er sin egen flade — giv den samme frihøjde til logoet. */
    .login-overlay { padding-top: env(safe-area-inset-top, 0px); }
}