/* HOODI-tema, delfil: mobile. Indlæses af hoodi-theme-links.php. Telefon og tablet under 992 px. */

@media (max-width: 991.98px) {
  /* Topbjælken med logo og burger skjules; topbanneret (foreningsnavn + klokke) er sidens hoved som i iPhone-mockups */
  nav.navbar.fixed-top.d-lg-none { display: none !important; }
  .hoodi-safetop { display: none !important; }
  .app-wrapper { margin-top: 0 !important; padding-top: 0 !important; }
  .topbanner-name {
    position: sticky; top: 0; z-index: 1040;
    font-size: 17px !important; font-weight: 700 !important;
  }
  .topbanner-bell { right: 16px; }
  .topbanner-bell-btn { width: 44px; height: 44px; }
  .topbanner-bell-btn .fi { font-size: 24px; }
  /* Sikker zone i toppen (appens safe-top, f.eks. statuslinjen og kamera-udskæringen på iPhone): banneret er sidens hoved
     og klæber ved top 0, så det skal selv holde zonen fri. "body" foran, fordi delfilerne indlæses før hovedfilen, hvis
     .topbanner-name (padding 0 72px !important, min-height 47 px) og .topbanner-bell (top 50 %) ellers vinder; indtil
     06-11-2026 lå banneret derfor oppe under statuslinjen. Under zonen er banneret hovedfilens 47 px, og klokken
     centreres i dem. min-height skal have !important: båndreglen div.text-center.fw-bold.p-3.fs-7[class*="bg-"]
     (min-height 47 px) er mere specifik, så banneret blev kun tekstens højde (ca. 22 px) under zonen, og navnet sad
     klemt mod bannerets underkant (iPhone Air 06-11-2026). De klæbende værktøjslinjer i editorerne lægger sig under
     banneret inklusive zonen. */
  body .topbanner-name {
    padding-top: var(--hoodi-safe-top, 0px) !important;
    min-height: calc(var(--hoodi-topbanner-h) + var(--hoodi-safe-top, 0px)) !important;
  }
  body .topbanner-bell { top: calc(50% + var(--hoodi-safe-top, 0px) / 2); }
  body .page-toolbar, body .description-toolbar { top: calc(var(--hoodi-topbanner-h) + var(--hoodi-safe-top, 0px)) !important; }

  /* Inde i en gruppe er banneret gruppens hoved (topbanner.php, Patrick 06-11-2026): gruppens farve som baggrund, gruppens
     navn i midten i stedet for foreningens, tilbage-chevron til venstre (ud af gruppen) og klokken til højre. Farve og tekst
     kommer som variabler fra gruppens farvenavn (--bs-<farve> og --bs-<farve>-inverse); primary og dark er petrol med hvid
     tekst som sidemenuens gruppeflise (.hoodi-grouptile). Den lange selektor skal til, fordi bånd-reglen
     div.text-center.fw-bold.p-3.fs-7.bg-primary i hovedfilen ellers vinder. Klokkens tæller vendes om (tekstfarve på
     gruppens farve), ellers forsvinder den petrol tæller på et petrol hoved. */
  body div.text-center.fw-bold.p-3.fs-7.topbanner-name.topbanner-gruppe {
    --bs-primary-inverse: var(--hoodi-hvid); --bs-dark-inverse: var(--hoodi-hvid);
    background-color: var(--topbanner-gruppefarve) !important; color: var(--topbanner-gruppetekst) !important;
  }
  .topbanner-gruppe .topbanner-assoc { display: none !important; }
  .topbanner-gruppenavn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbanner-tilbage {
    position: absolute; left: 16px; top: calc(50% + var(--hoodi-safe-top, 0px) / 2); transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 999px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .topbanner-tilbage .fi { font-size: 24px; line-height: 1; display: inline-flex; }
  body .topbanner-gruppe .topbanner-bell-btn, body .topbanner-gruppe .topbanner-bell-btn:hover, .topbanner-tilbage:hover { color: inherit; }
  body .topbanner-gruppe .topbanner-bell-btn:hover, .topbanner-tilbage:hover { background: rgba(255, 255, 255, 0.15); }
  body .topbanner-gruppe .topbanner-bell-count { background: var(--topbanner-gruppetekst); color: var(--topbanner-gruppefarve); }

  /* Indlæsningsskærmen starter under topbanneret (bannerets højde + sikker zone), ikke under den gamle topbjælke (85 px);
     !important, fordi header.php skriver top: 85 px + safe-top inline i appen */
  .page-loader { top: calc(var(--hoodi-topbanner-h) + var(--hoodi-safe-top, 0px)) !important; bottom: calc(var(--hoodi-tabbar-h) + var(--hoodi-safe-bottom, 0px)) !important; background-color: var(--hoodi-graa) !important; }

  /* Skuffen (sidemenuen) skal ligge over topbanneret (z 1040) og fanelinjen (1041), ellers klippes logoet af banneret.
     Fanen "Mere" åbner siden /more/ siden 02-11-2026, ikke skuffen; reglerne bliver, hvis skuffen åbnes ad anden vej. */
  #kt_aside.drawer.drawer-on { z-index: 1046 !important; }
  .drawer-overlay { z-index: 1045 !important; }

  /* Plads til fanelinjen i bunden */
  body { padding-bottom: calc(var(--hoodi-tabbar-h) + var(--hoodi-safe-bottom, 0px)) !important; }
  /* AI-boblen (Spørg HOODI) skjules, når fanelinjen vises (Patrick 02-11-2026): den lå hen over kort og fanelinje.
     iPhone-mockups viser ellers en 56 px boble 16 px fra kanten; chatten åbnes på telefon fra Menu-sidens "Spørg HOODI"-felt,
     som klikker på knappen i JS (virker også skjult), og lukkes med chevronen i panelets hoved, der gør det samme. */
  body #wg-launcher { display: none !important; }
  #wg-panel { bottom: calc(150px + var(--hoodi-safe-bottom, 0px)) !important; }

  /* Fanelinjen: hvid, 49 px + sikker zone, fem punkter med 20 px ikon og 12 px tekst; aktiv er petrol (ikke fed, Patrick 04-11-2026).
     Mål som Danske Banks app (iPhone Air, 06-11-2026, Patrick: vores var for høj, og ikonerne for store): linjen 49 px over
     hjemmelinjens zone (72 før), ikonet ca. 20 px (24 før) med overkant 9 px under stregen, teksten slutter 2 px over zonen.
     Punkterne lægges derfor fra toppen med 7 px luft (ikonfeltet er 24 px, ikonet 20) i stedet for at centreres. */
  .hoodi-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1041;
    display: flex; align-items: stretch; justify-content: space-around;
    height: calc(var(--hoodi-tabbar-h) + var(--hoodi-safe-bottom, 0px)); padding: 0 8px var(--hoodi-safe-bottom, 0px);
    background: var(--hoodi-hvid); border-top: 1px solid var(--hoodi-skillelinje);
  }
  /* Fanerne deler den ledige plads ligeligt oven i deres tekstbredde (flex-basis auto), så der er samme luft mellem alle
     tekster. Med lige brede faner (flex-basis 0) fyldte "Begivenheder" (77 px) hele sin fane på 393 px, og teksten løb sammen
     med "Dokumenter" (Patrick 06-11-2026, ny hovedmenu). */
  .hoodi-tab { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding-top: 7px; color: var(--hoodi-tekst2); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .hoodi-tab:hover, .hoodi-tab:active { color: var(--hoodi-petrol); }
  .hoodi-tab-ikon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
  .hoodi-tab-ikon .fi { font-size: 20px; line-height: 1; display: inline-flex; }
  .hoodi-tab-tekst { font-size: 12px; font-weight: 500; line-height: 1; }
  .hoodi-tab-aktiv { color: var(--hoodi-petrol); }
  .hoodi-tab-taeller { position: absolute; top: -4px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--hoodi-petrol); color: var(--hoodi-hvid); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }

  /* Sidetitel og højre knapper: titlen 32 px, vælgeren (Alle/Fokuseret) under titlen i stedet for ved siden af */
  /* .app-content foran, fordi delfilerne @import'es øverst i hoodi-theme.css: hovedfilens regel med samme selektor (36 px) kom
     senere og vandt, så telefonen viste 36 px indtil 02-11-2026 (målt på Mere-siden). Mockups (Mere, Min bolig) måler 30/800. */
  .app-content span.fw-bolder.fs-1, .app-content td.fw-bolder.fs-1, .app-content td.fw-bolder.fs-1 > input.form-control.fw-bolder.fs-1 { font-size: 28px !important; line-height: 44px; }   /* 32 -> 30 -> 28 i takt med desktop 36 -> 34 -> 32 (iPhone-mockups måler 30) (02-11-2026) */
  .app-container.container-xxl { padding-left: 16px !important; padding-right: 16px !important; }
  .card { border-radius: var(--hoodi-r-kort); }

  /* Indholdets øverste luft: topbanneret er hovedet, og titlens blæk skal begynde 43 px under det (målt i iPhone-mockups
     Mere og Min bolig, 2x: 212 -> 298/299). Metronic giver 20 px på #kt_app_content, og den tomme sidekolonne (col-xl-1 mb-5)
     lægger 15 px oven i, så beholderen får 22 px: 22 + 15 = 37 px til titlens linjeboks, blækket ca. 6 px længere nede.
     Målt 02-11-2026 (før: 16 + 20 + 15 = 51 px til boksen, blækket 56 px nede). */
  /* Sidetitlen skal stå ens på alle sider: blækket 43 px under banneret (iPhone-mockups Mere, Min bolig, Tilbud om bolig).
     Siderne er bygget forskelligt (tom sidekolonne med mb-5 = 15 px over hovedkolonnen på listesiderne, pt-1 på
     titelcellen, tilbageknap i egen kolonne på detaljesiderne), så her nulstilles forskellene: den tomme sidekolonne
     skjules, tilbageknappen står over titlen med 16 px luft, og beholderen får 33 px over. Målt 02-11-2026: 68-127 px -> 83. */
  .app-container.pt-5 { padding-top: 33px !important; }   /* 33 + 4 px fra titlens 44 px linjehøjde = som før (titelblæk 43 px under banneret) */
  .app-content .row > [class*="col-xl-1"]:not(:has(*)) { display: none !important; }
  /* Tilbageknappen står OVER titlen på små skærme (Bootstrap-stablingen af col-sm-12 col-xl-1): kolonnen beholder sin
     fulde bredde, og knappen får 16 px luft ned til titlen. En absolut placering til venstre for titlen (02-11-2026 kl. 14:42)
     tog stablingen væk; fjernet igen samme dag, Patrick: "tilbage-knappen blev flyttet op over overskriften på små skærme".
     Kolonnen beholder rækkens gutter til siderne som hovedkolonnen ved siden af, så knappen flugter med titlen og kortene;
     med padding 0 sad den en halv gutter (ca. 10 px) længere ude mod kanten (Patrick 06-11-2026, iPhone-skærmbillede). */
  .app-content .row > [class*="col-xl-1"]:has(> #backButtonClick) { display: block; width: 100%; margin: 0 0 16px 0 !important; padding: 0 calc(var(--bs-gutter-x) * .5) !important; }
  #backButtonClick { display: inline-block; }
  #backButtonClick > .symbol-label { width: 40px; height: 40px; }
  #kt_app_content.app-content { padding-top: 0 !important; }
}

@media (max-width: 767.98px) {
  /* Titelrækken (table.mb-5 med titel + højrecelle): titlen og plusset på første linje, vælgeren på sin egen linje under.
     Højrecellen opløses (display: contents), så dens børn bliver flex-børn i rækken. */
  tr:has(> td.text-end > .btn-toggle-container) { display: flex; flex-wrap: wrap; align-items: center; }
  tr:has(> td.text-end > .btn-toggle-container) > td:first-child { display: block; flex: 1 1 auto; min-width: 0; height: auto; min-height: 50px; }   /* som blok er height fast, så titelcellens 50 px bliver en mindstehøjde (lange titler ombrydes) */
  tr:has(> td.text-end > .btn-toggle-container) > td.text-end { display: contents; }
  tr:has(> td.text-end > .btn-toggle-container) > td.text-end > a.symbol { float: none !important; order: 2; margin-left: 8px !important; margin-top: 0 !important; }   /* vælgeren står ikke ved siden af her, så skrivebordets 4 px ned til pillen udgår: plusset står som på sider uden vælger (04-11-2026: 87 mod 85 px) */
  /* "..."-menuen i sin indpakning (e-Boks, Beskeder) står på plussets plads med samme afstand og uden skrivebordets 4 px (05-11-2026) */
  tr:has(> td.text-end > .btn-toggle-container) > td.text-end > div:has(> .symbol[data-kt-menu-trigger]) { order: 2; }
  tr:has(> td.text-end > .btn-toggle-container) > td.text-end > div > .symbol[data-kt-menu-trigger] { margin: 0 0 0 8px !important; }
  /* Vælgeren fylder kun sit indhold (flex-basis: 100 % gjorde den fuld bredde, Patrick 02-11-2026); linjeskiftet før den
     kommer fra et tomt flex-barn i fuld bredde (::after med order 3), så den står på egen linje til venstre under titlen. */
  tr:has(> td.text-end > .btn-toggle-container)::after { content: ""; flex-basis: 100%; height: 0; order: 3; }
  tr:has(> td.text-end > .btn-toggle-container) > td.text-end > .btn-toggle-container { float: none !important; order: 4; flex: 0 0 auto; width: fit-content; max-width: 100%; margin-top: 10px; }
  .btn-toggle-container .btn-toggle { min-height: 36px; padding: 0 14px !important; font-size: 14px !important; }   /* som fanepillerne nedenfor */
  /* Fanepiller: smallere, så tre faner er på skærmen */
  .menu-container .custom-scrollbar > .d-flex .btn { padding: 0 14px !important; font-size: 14px !important; min-height: 36px; }
}

@media (max-width: 991.98px) {
  html, body { overflow-x: hidden; }   /* intet må gøre siden bredere end skærmen (fanelinjen følger ellers med ud) */
}

/* Siden må ikke gynge, når man trækker ned i toppen på touchskærme, men gerne i bunden (Patrick 06-11-2026). CSS kan ikke
   skelne de to ender, så gyngningen er slået fra, og hoodi-theme.js (punkt 11) sætter klassen hoodi-scrolled på html, når
   siden er rullet væk fra toppen; så gynger den igen i bunden. Sat på både html og body, så det virker, uanset hvilken af
   dem browseren lader styre sidens rulning. Fjerner også browsernes "træk for at genindlæse" (Safari og Chrome). Virker fra
   iOS 16; rullefelter inde i siden gynger stadig selv. */
@media (pointer: coarse) {
  html, body { overscroll-behavior-y: none; }
  html.hoodi-scrolled, html.hoodi-scrolled body { overscroll-behavior-y: auto; }
}

/* Fanerækken: sidernes egen CSS (home/menu.php, finance/menu.php m.fl., til 720 px) trækker rullefeltet ud til skærmkanten
   med negativ margen på var(--bs-gutter-x), så pillen startede helt ude i kanten. Samme mål som polstring inde i rullefeltet
   får pillen til at starte ved indholdets margen og kunne stadig rulles ud til kanten (Patrick 04-11-2026). */
@media (max-width: 720px) {
  .menu-container .custom-scrollbar { padding-left: var(--bs-gutter-x, .75rem); padding-right: var(--bs-gutter-x, .75rem); }
}

@media (min-width: 992px) {
  .hoodi-tabbar { display: none !important; }
  /* Gruppens hoved i banneret er kun til små skærme; her viser sidemenuen gruppen, og banneret er foreningens */
  .topbanner-tilbage, .topbanner-gruppenavn { display: none !important; }
}

@media (max-width: 767.98px) {
  /* Modaler som ark fra bunden (iPhone-mockup "Skift forening"): fuld bredde, runde hjørner foroven, lille håndtag */
  .modal.fade .modal-dialog:not(.modal-fullscreen-sm-down) { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; width: 100%; max-width: 100%; transform: translateY(24px); }
  .modal.fade.show .modal-dialog:not(.modal-fullscreen-sm-down) { transform: translateY(0); }
  .modal-dialog:not(.modal-fullscreen-sm-down) .modal-content { border-radius: 28px 28px 0 0 !important; max-height: calc(100dvh - 40px); overflow-y: auto; padding-bottom: calc(16px + var(--hoodi-safe-bottom, 0px)); }
  .modal-dialog:not(.modal-fullscreen-sm-down) .modal-content::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 999px; background: var(--hoodi-linje); margin: 10px auto 0; }
  .modal-dialog:not(.modal-fullscreen-sm-down) .modal-content .modal-header { padding: 16px 16px 0 16px !important; }
  .modal-dialog:not(.modal-fullscreen-sm-down) .modal-content .modal-body { padding: 16px 16px 20px 16px !important; }
  /* Alle modaler (også fuldskærm, f.eks. Skift forening) har sidernes margen på 16 px til siderne, ikke skrivebordets 32 px
     (Patrick 06-11-2026). ".modal" foran: delfilen indlæses før hovedfilen, hvis ".modal-content .modal-body" ellers vinder. */
  .modal .modal-content .modal-header, .modal .modal-content .modal-body, .modal .modal-content .modal-footer { padding-left: 16px !important; padding-right: 16px !important; }
  /* Fuldskærmsmodaler på små skærme (modal-fullscreen-sm-down) beholder deres opførsel, men får sikker zone foroven */
  .modal-fullscreen-sm-down .modal-content { padding-top: var(--hoodi-safe-top, 0px); }
}