/* ================================================================
   NEXERA BIS — Mobilni sloj (iOS / Android)

   Učitava se POSLIJE main.css i samo nadograđuje. main.css već nosi
   dva bloka: `@media (pointer: coarse)` (16px polja — spriječava iOS
   auto-zoom pri fokusu) i `@media (max-width: 900px)` (nav drawer,
   veći touch targeti, gušća tipografija). Ovdje je ono što je ostalo:
   viewport visina, prelivanje ustranu i telefonski raspored (≤600px).

   Prelomna tačka je namjerno 600px, ne 900px — na 900px već radi
   tablet raspored iz main.css i ne želimo se boriti s njim.

   NAPOMENA: `viewport-fit=cover` NIJE uključen (index.html drži
   podrazumijevani viewport). Bez njega iOS sam uvlači stranicu izvan
   notcha i home indikatora, pa nijedan fiksni element ne treba
   env(safe-area-inset-*). Ako se ikad doda cover, safe-area padding
   moraju dobiti #topnav, #topnav-secondary, #modal-overlay,
   .modal-footer i .assistant-fab-btn — svi odjednom.
   ================================================================ */

/* ---------------------------------------------------------------
   1. Visina viewporta — iOS/Android adresna traka

   Ljuska je fiksna (body/#app = 100vh, overflow:hidden) i skrola
   samo #content. Na mobilnom Safariju/Chromeu 100vh je VIŠA od
   stvarno vidljivog dijela, pa dno #content-a (paginacija, "Sačuvaj")
   završi ispod adresne trake i ne može se dosegnuti.

   dvh prati traku dok se skriva/pokazuje. Deklaracija stoji sama, bez
   fallbacka: preglednik koji ne zna dvh je odbacuje kao nevažeću i
   ostaje na 100vh iz main.css — upravo željeno ponašanje.
   --------------------------------------------------------------- */
body            { height: 100dvh; }
#app            { height: 100dvh; }
#login-screen   { min-height: 100dvh; }
#modal-box      { max-height: 90dvh; }
.assistant-panel { max-height: calc(100dvh - 130px); }

/* ---------------------------------------------------------------
   2. Prelivanje ustranu

   <body> je overflow:hidden, pa stranica sama nikad ne klizi ustranu.
   Problem je #content: overflow-y:auto povlači overflow-x na auto, pa
   preširoka tabela pomjera CIJELI sadržaj — naslov sekcije i dugmad
   nestanu s ekrana dok se traži zadnja kolona. Tabele sada automatski
   dobijaju .table-wrap (app.js `_enhanceTable`) i klizanje ostaje u
   tabeli; ovdje mu se doda inercija i spriječi prelijevanje na
   roditelja (iOS scroll chaining).
   --------------------------------------------------------------- */
.table-wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Dugi neprelomljivi nizovi (email, JMBG, URL nalaza, ime datoteke)
   inače razvuku ćeliju i s njom cijelu tabelu. */
td, .kv-val, .card-body { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------
   3. Panel obavještenja

   .notif-panel je position:absolute (360px) unutar .topnav-right,
   koji na ≤900px postaje overflow-x:auto. Overflow kontejner ga
   REŽE — na telefonu bi panel završio zarobljen u traci visokoj
   50px. Fixed ga vadi iz tog konteksta i lijepi pod header.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .notif-panel {
    position: fixed;
    top: 56px;
    right: 8px;
    left: auto;
    width: auto;
    min-width: 0;
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* ---------------------------------------------------------------
   4. Telefonski raspored (≤600px)
   --------------------------------------------------------------- */
@media (max-width: 600px) {

  /* Naslov sekcije + dugmad akcija: na uskom ekranu se dugmad inače
     stisnu uz desnu ivicu i tekst im se prelomi na dva reda. */
  .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  /* Stranice stavljaju dugmad u <div style="display:flex;gap:8px"> — inline
     style drži display/gap, odavde dolazi samo prelom u novi red. */
  .section-header > div { flex-wrap: wrap; }

  /* Zaglavlje kartice — isti problem, ali naslov ostaje u redu s
     ikonicom, pa se samo dozvoli prelom. */
  .card-header { flex-wrap: wrap; row-gap: 8px; }

  /* Grid s 3 kolone na 390px daje ćelije od ~110px — jedna kolona čita se. */
  .three-col { grid-template-columns: 1fr; }

  /* Touch target: iOS HIG traži 44px. main.css na ≤900px podiže .btn na
     38px (tablet), što je na telefonu premalo za palac u rukavici. */
  .btn     { min-height: 44px; padding: 10px 14px; }
  .btn-sm  { min-height: 40px; }
  .btn-xs  { min-height: 36px; }
  .btn-icon-only { min-width: 44px; min-height: 44px; }
  .tab-btn { padding: 12px 16px; }

  /* Modal preko cijelog ekrana. Namjerno NIJE bottom-sheet
     (align-items:flex-end): okvir prilijepljen uz dno viewporta završi
     tačno tamo gdje iOS podiže tastaturu. Ostaje centriran i pun. */
  #modal-overlay { padding: 0; align-items: center; }
  #modal-box {
    /* !important je ovdje nužan, ne nemar: UI.modal() postavlja širinu
       INLINE (`box.style.width = opts.width || '640px'`, vrijednosti
       400–860px po stranici). main.css-ov `max-width:100%` obuzda široke
       modale, ali uski (400px) bi na telefonu ostali plutajuća pločica
       umjesto prikaza preko cijelog ekrana. Inline stil se pobjeđuje
       samo ovako. */
    width: 100% !important;
    max-width: 100%;
    max-height: 100dvh;
    border-radius: 0;
    overscroll-behavior: contain;   /* ne skrolaj #content ispod modala */
    -webkit-overflow-scrolling: touch;
  }

  /* KLJUČNO: footer prestaje biti sticky na telefonu.
     `position:sticky; bottom:0` iz main.css pribija dugmad za dno
     skrol-okvira. Kad iOS otvori tastaturu, vidljivi viewport se smanji,
     to dno završi ISPOD tastature — a pošto je sticky, skrolanje ga ne
     može izvući: uvijek se vrati na (skriveno) dno. Svaki BIS modal je
     forma sa "Sačuvaj" tu dolje. Statičan footer jednostavno stoji na
     kraju sadržaja i doskrola se iznad tastature. */
  .modal-footer {
    position: static;
    flex-wrap: wrap;
  }
  .modal-footer .btn { flex: 1 1 auto; justify-content: center; }

  /* Login — 44px padding na 390px ekranu pojede pola širine. */
  .login-card { padding: 32px 22px; }
}

/* ---------------------------------------------------------------
   5. Dodir općenito (svaki touch uređaj, bez obzira na širinu)
   --------------------------------------------------------------- */
@media (pointer: coarse) {
  /* Sivi bljesak preko cijelog reda pri tapu na Androidu. */
  * { -webkit-tap-highlight-color: transparent; }

  /* Ukloni 300ms čekanje na double-tap-zoom kod klikabilnih elemenata. */
  .btn, .nav-item, .nav-direct, .nav-group-btn, .tab-btn,
  tr[onclick], [role="button"] { touch-action: manipulation; }

  /* Safari u landscape-u sam uveća tekst i razbije gustu tabelu. */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* #content je jedini skrol u ljusci — daj mu inerciju i spriječi da
     pull-to-refresh na vrhu liste ponovo učita SPA i pojede unos. */
  #content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
}

/* ---------------------------------------------------------------
   6. Header koji STVARNO stane na telefon

   Izmjereno na 393px (iPhone 16): #topnav je bio širok 761px — skoro
   dvostruko. Fiksni dio (hamburger 36 + logo 87 + ustanova 26 + razmaci)
   uzima ~159px, pa .topnav-right smije biti najviše ~234px. Bio je 578:

       .header-search   150   ← skinuto (pretraga postoji na str. Pacijenti)
       .dark-toggle      34
       .notif-bell-wrap  34
       .topnav-user     330   ← ime+uloga i dugmad za jezik skinuti

   Posljedica starog stanja nije bila kozmetička: obavještenja, 2FA i
   ODJAVA su ležali izvan ekrana, u traci koja se ne da doskrolati prstom.
   Nakon ovoga .topnav-right je ~184px i sve staje u jedan red.

   Jezik nije izgubljen — preseljen je u nav drawer (.nav-drawer-langs).
   --------------------------------------------------------------- */
@media (max-width: 600px) {
  .header-search  { display: none; }
  .topnav-user-id { display: none; }   /* ime + uloga: ukras, ne funkcija */
  /* !important: element nosi inline `style="display:flex;..."` iz index.html,
     a inline stil se iz stylesheeta obara jedino ovako. Isti razlog kao kod
     #modal-box širine. Bez njega je traka ostajala 117px preširoka i odjava
     je i dalje visila van ekrana. */
  .topnav-langs   { display: none !important; }   /* isti dugmadi žive u draweru */
  .topnav-user    { padding-left: 8px; gap: 6px; }
  .topnav-facility { max-width: 84px; margin-left: 8px; }

  /* Ikone u headeru — 18px glif u 44px metu za palac. */
  .topnav-user > i { font-size: 20px; padding: 10px 4px; }
}

/* Jezik u draweru — skriven na desktopu, gdje dugmad stoje u headeru. */
.nav-drawer-langs { display: none; }
@media (max-width: 600px) {
  .nav-drawer-langs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.75);
    font-size: 13px;
  }
  .nav-drawer-langs > div { display: flex; gap: 6px; }
  .nav-drawer-langs .lang-btn { min-width: 42px; min-height: 38px; }
}

/* ---------------------------------------------------------------
   7. Kontrolna tabla — kartice koje ne troše cijeli ekran

   .stats-grid je `repeat(auto-fill, minmax(195px, 1fr))`: na 365px
   raspoloživih stane samo JEDNA kolona, pa je svaka kartica bila
   365×153px. Osam kartica = ~1200px skrola za osam brojeva. Dvije
   kolone i niža kartica daju cijelu tablu na jedan-dva ekrana.
   --------------------------------------------------------------- */
@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .stat-card   { padding: 12px 12px 10px; }
  .stat-value  { font-size: 21px; }
  .stat-label  { font-size: 10.5px; }
  .stat-card .stat-icon,
  .stat-card > i { font-size: 16px; }

  /* Podnožje: dvoredni copyright na 393px jede ~40px korisnog prostora. */
  #app > footer { padding: 4px 10px; font-size: 9.5px; line-height: 1.35; }
}