/* ══════════════════════════════════════════════════════════════
   ipad.css — iPad-/nettbrettlag for event-dashboardet
   ══════════════════════════════════════════════════════════════
   Presentasjonslag etter samme filosofi som live-touch.js: gjenbruker
   desktop-DOM-en fra app-dashboard.js uendret og legger kun touch-
   ergonomi oppå. Hver eneste regel er skopet under body.ipad-modus,
   som settes av app-ipad.js utelukkende på touch-enheter bredere enn
   mobilgrensa (768px — der eier app-mobile.js visningen). Uten den
   klassen har denne fila null effekt: web-/desktop-visningen er urørt.

   Struktur:
     1 · Grunnleggende touch-ergonomi (mål, scrolling, fokus)
     2 · Handlinger som er skjult bak hover gjøres alltid synlige
     3 · Topbar
     4 · Portrett: sidebar som skuff (drawer) + hamburger + bakteppe
     5 · Fane-spesifikke justeringer
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Grunnleggende touch-ergonomi ───────────────────────── */

body.ipad-modus #event-dashboard-screen,
body.ipad-modus #event-dashboard-screen button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Momentum-scroll i alle rullende flater i dashboardet */
body.ipad-modus .db-content,
body.ipad-modus #db-side-nav,
body.ipad-modus .lv-split-left,
body.ipad-modus .lv-split-mid,
body.ipad-modus .lv-split-right,
body.ipad-modus .fkpx-tablewrap,
body.ipad-modus .bem-gantt-scroll,
body.ipad-modus .anx-tabellwrap,
body.ipad-modus .tp-wrap {
  -webkit-overflow-scrolling: touch;
}

/* Litt luft nederst så innhold ikke gjemmer seg bak hjem-indikatoren
   (PWA-standalone). max() faller tilbake til 20px i vanlig Safari. */
body.ipad-modus .db-content {
  padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
}

/* Fanevalg i sidemenyen: 44px-mål à la Apple HIG */
body.ipad-modus #db-side-nav .orgp-nav-btn {
  min-height: 44px;
  padding: 10px 11px;
  font-size: 14px;
  border-radius: 9px;
}
body.ipad-modus #db-side-nav .orgp-nav-btn svg {
  width: 16px;
  height: 16px;
}
body.ipad-modus #db-side-nav #db-nav-soek-input {
  font-size: 16px; /* <16px gir auto-zoom ved fokus på iOS */
  min-height: 38px;
}
body.ipad-modus #db-side-nav .orgp-nav-footer-logout {
  min-width: 42px;
  min-height: 42px;
}

/* Primærknapper og fane-/modusvelgere i innholdet */
body.ipad-modus .db-content .db-ny-btn,
body.ipad-modus .db-content .db-btn-primary,
body.ipad-modus .db-content .db-btn-ghost,
body.ipad-modus .db-content .kobl-modus-btn,
body.ipad-modus .db-content .lv-narrow-tab,
body.ipad-modus .db-content .bem-subnav button,
body.ipad-modus .db-content .sk-subnav button {
  min-height: 38px;
}
body.ipad-modus .db-content input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* Skjemafelter i dashboard-modaler: unngå iOS-fokuszoom */
body.ipad-modus .pers-modal input,
body.ipad-modus .pers-modal select,
body.ipad-modus .pers-modal textarea {
  font-size: 16px;
}

/* ── 2 · Hover-avsløringer alltid synlige ───────────────────── */
/* Touch har ingen hover: radhandlinger i kjøreplan og oppgaveliste
   ligger ellers på opacity:0 til peker svever over raden. */

body.ipad-modus .kp-rad .kp-aksjoner,
body.ipad-modus .kp-rad .kp-drag,
body.ipad-modus .oppgave-rad .oppgave-knapper {
  opacity: 1 !important;
}

/* ── 3 · Topbar ─────────────────────────────────────────────── */

body.ipad-modus .db-topbar .orgp-kbd { display: none; } /* ⌘K-hint uten tastatur */
body.ipad-modus .db-topbar .orgp-support-btn,
body.ipad-modus .db-topbar .kpd-tilbake-btn,
body.ipad-modus .db-topbar #db-til-tidslinje {
  min-height: 38px;
}
body.ipad-modus .db-topbar #db-topbar-soek { font-size: 16px; }

@media (orientation: portrait) {
  /* Trangt om plassen: ikon-knapper uten tekst, org-pille kun avatar,
     tittel med ellipse. Varsel-badgen (.orgp-badge) skal bestå. */
  body.ipad-modus .db-topbar .orgp-support-btn span:not(.orgp-badge) { display: none; }
  body.ipad-modus .db-topbar .orgp-org-pille-navn,
  body.ipad-modus .db-topbar .orgp-org-pille-sep,
  body.ipad-modus .db-topbar .orgp-org-pille-meta { display: none; }
  body.ipad-modus .db-topbar .orgp-tittel {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  body.ipad-modus .db-topbar .orgp-header-soek {
    min-width: 0;
    flex: 0 1 210px;
  }
}

/* ── 4 · Portrett: sidebar som skuff ────────────────────────── */
/* I portrett (744–1024px innholdsbredde) spiser den faste 232px-
   sidemenyen for mye plass. Den løftes ut som skuff over innholdet;
   hamburger-knappen (injisert av app-ipad.js) åpner. I landskap
   beholdes sidemenyen synlig som på desktop. z-indeks 3999/4000
   ligger over alt innhold, men under modaler (.pers-modal-overlay
   ligger på 9000). */

#ipad-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
}
#ipad-nav-toggle:active { background: rgba(255, 255, 255, 0.22); }

#ipad-nav-backdrop { display: none; }

@media (orientation: portrait) {
  body.ipad-modus #ipad-nav-toggle { display: inline-flex; }

  body.ipad-modus #db-side-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 82vw;
    z-index: 4000;
    transform: translateX(-103%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.33, 1);
    padding-top: max(14px, env(safe-area-inset-top));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  body.ipad-modus.ipad-nav-aapen #db-side-nav {
    transform: translateX(0);
    box-shadow: 0 0 44px rgba(0, 0, 0, 0.28);
  }

  body.ipad-modus.ipad-nav-aapen #ipad-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 3999;
    background: rgba(0, 0, 0, 0.35);
    touch-action: none;
  }

  /* Blokker interaksjon med innholdet bak mens skuffen er åpen
     (sidemenyen er selv barn av .db-body og re-aktiveres). */
  body.ipad-modus.ipad-nav-aapen .db-body { pointer-events: none; }
  body.ipad-modus.ipad-nav-aapen #db-side-nav { pointer-events: auto; }
}

/* ── 5 · Fane-spesifikke justeringer ────────────────────────── */

/* Race Sim: SVG-flaten har fast attributt-bredde (760px)
   men viewBox + preserveAspectRatio, så den kan skaleres fritt. */
body.ipad-modus #db-racesim svg {
  max-width: 100%;
  height: auto;
}

/* Kart & plan: touch-vennlige verktøyknapper og 16px-inputs
   (unngår iOS-autozoom); sidepanelet litt smalere i portrett. */
body.ipad-modus .plt-verktoy-btn { width: 42px; height: 42px; }
body.ipad-modus .plt-ikonknapp { width: 36px; height: 36px; }
body.ipad-modus .plt-felt input,
body.ipad-modus .plt-felt select,
body.ipad-modus .plt-felt textarea,
body.ipad-modus .plt-banner-rad input { font-size: 16px; }
body.ipad-modus .plt-bib-mer { width: 28px; height: 28px; font-size: 15px; }
body.ipad-modus .plt-bib-ny { padding: 5px 12px; font-size: 11px; }
@media (orientation: portrait) {
  body.ipad-modus .plt-sidepanel { width: 224px; }
}

/* Bemanning: medarbeider-tabellen er bred — rull horisontalt i stedet
   for å sprenge fanen. */
body.ipad-modus .bem-tabell {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tidsplan: fase-barer dras/strekkes med pointer events — uten
   touch-action ville Safari kapret bevegelsen til scrolling. */
body.ipad-modus .tp-bar { touch-action: none; }

/* Gjennomføring: kjøresentralens handlinger brukes under live-kjøring,
   ofte i farten — 40px-mål på alt som trykkes. Tid-feltet i status-
   dialogen må være 16px så iOS ikke auto-zoomer ved fokus. */
body.ipad-modus .gj-dag-pill { min-height: 40px; }
body.ipad-modus .gj-refresh { min-height: 38px; }
body.ipad-modus .gj-status-btn {
  min-height: 40px;
  padding-top: 9px;
  padding-bottom: 9px;
}
body.ipad-modus .gj-dialog-input {
  font-size: 16px;
  min-height: 40px;
  width: 120px;
}
body.ipad-modus .gj-dialog-bekreft,
body.ipad-modus .gj-dialog-avbryt { min-height: 40px; }
body.ipad-modus button.gj-besok-chip,
body.ipad-modus .gj-besok-modus-btn { min-height: 40px; }
body.ipad-modus button.gj-notat-btn { width: 40px; height: 40px; }
body.ipad-modus .gj-notat-felt { font-size: 16px; }
body.ipad-modus .gj-forsink-mini { width: 40px; height: 40px; min-height: 40px; }

/* Lokasjoner: rediger/slett-knappene på sted- og områdekort er 26px
   på desktop — for smått for fingre. Skjema-felt 16px mot fokuszoom. */
body.ipad-modus .lok-icon-btn { width: 36px; height: 36px; border-radius: 8px; }
body.ipad-modus .lok-sted-toggle-btn { min-height: 36px; }
body.ipad-modus .lok-input { font-size: 16px; min-height: 40px; }
body.ipad-modus .lok-avbryt-btn,
body.ipad-modus .lok-lagre-btn { min-height: 40px; }
body.ipad-modus .lok-farge-boks { width: 28px; height: 28px; }

/* Analyse: filter-nedtrekk 16px (unngå fokuszoom) + 38px-mål.
   Detaljtabellen ruller vannrett (momentum satt i seksjon 1). */
body.ipad-modus .anx-sel {
  font-size: 16px;
  min-height: 38px;
}
body.ipad-modus .anx-nullstill { min-height: 38px; }
body.ipad-modus .anx-tom-btn { min-height: 44px; }

@media (orientation: portrait) {
  /* Lokasjoner/Koblinger: smalere hendelses-sidebar gir områdenettet rom */
  body.ipad-modus .lok-hend-sidebar { width: 272px; }

  /* Program-split: venstrelista litt smalere i portrett */
  body.ipad-modus .lv-split-left {
    width: 38%;
    min-width: 232px;
  }
}