/* Telefon — jedno mesto za pravila koja važe na SVAKOM ekranu.
 *
 * TRAŽIO KORISNIK (21.09.2026): „prođi kroz celu aplikaciju… doteraj mobilni
 * prikaz da je pregledan… i kao pacijent i kao doktor i kao lab i kao service i
 * kao tech i kao admin i kao svako."
 *
 * ZAŠTO JEDAN LIST, A NE PEDESET PET STRANICA. Aplikacija ima tri ljuske
 * (`cl.css` za upravu, `operational-ui.css` za šaltere, `main.css` za javni
 * deo) i pedesetak stranica sa sopstvenim `<style>` blokom. Da se telefon
 * doteruje po stranici, isto pravilo bi stajalo na pedeset mesta i razišlo bi
 * se prvom izmenom — a već se jednom desilo da ista boja na dva ekrana znači
 * različito.
 *
 * SVE JE UNUTAR `@media`. Nijedno pravilo odavde ne sme da dotakne stoni
 * računar: na 32" je sve već dobro i ne popravlja se.
 *
 * ŠTA JE OVDE „PREGLEDNO" NA TELEFONU:
 *   1. Ništa se ne kliza ustranu. Vodoravni skrol na celoj stranici znači da
 *      se pola sadržaja ne vidi, a čovek ne zna da postoji.
 *   2. Tabela kliza U SVOM OKVIRU, ne vuče stranicu za sobom.
 *   3. Prst ima 44px. Manje od toga je promašaj, a promašaj na naplati ili na
 *      nalazu nije sitnica.
 *   4. Meni od 28 stavki ne stoji iznad sadržaja nego u fioci.
 *   5. Prozor (modal) zauzima ceo ekran — polovina ekrana sa sopstvenim
 *      skrolom unutar skrola je najgori oblik koji forma ume da ima.
 */

/* =====================================================================
   1. TELEFON — do 767.98px
   ===================================================================== */
@media (max-width: 767.98px) {

  /* --- ništa ne beži ustranu ----------------------------------------
     Uzrok je uvek isti: jedan širok element (tabela, mreža sa fiksnim
     kolonama, slika) razvuče stranicu, pa ceo ekran krene da se kliza i
     natpisi izađu iz vidnog polja. Ovde se seče na korenu; širina koja
     zaista treba da postoji dobija svoj okvir sa skrolom (tačka 2). */
  html, body {
    max-width: 100%;
    /* `clip`, NE `hidden`. `overflow-x: hidden` pravi od stranice okvir koji
       se kliza — a to gasi svaki `position: sticky` u njoj: zaglavlje tabele,
       traka sa menijem, ime lekara u rasporedu. `clip` seče isto, ali ne
       pravi okvir. Stariji pregledač ga ne razume i pravilo jednostavno
       preskoči — ostane kako je i bilo, ništa se ne pokvari. */
    overflow-x: clip;
  }

  /* --- 2. tabela kliza u svom okviru --------------------------------
     `display:block` pretvara tabelu u blok koji sme da kliza; `nowrap`
     čuva da se kolone ne zgnječe u dve reči po redu. Zaglavlje ostaje
     iznad svojih kolona jer se kliza zajedno sa telom. */
  /* Tabela koja NEMA svoj okvir dobija skrol na sebi. `display:block`
     pretvara je u blok koji sme da kliza, a `nowrap` čuva da se kolone ne
     zgnječe u dve reči po redu. */
  table.mg,
  .service-table,
  .lab-table,
  .admin-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table.mg > thead,
  .service-table > thead,
  .lab-table > thead,
  .admin-table > thead {
    /* Bez ovoga `display:block` odvoji zaglavlje od tela, pa se kolone
       raziđu — glava kaže jedno, red ispod pokazuje drugo. */
    display: table-header-group;
  }
  table.mg > tbody,
  .service-table > tbody,
  .lab-table > tbody,
  .admin-table > tbody {
    display: table-row-group;
  }
  /* TABELA KOJA VEĆ IMA SVOJ OKVIR SE NE DIRA. Dva skrola jedan u drugom
     poništavaju `position: sticky` na prvoj koloni — a baš tu stoji ime
     lekara u rasporedu i u učinku. Ovo je ovde da se ne izgubi pri
     sledećoj izmeni gornjeg pravila. */
  .scrolly table.mg,
  .table-responsive table.mg,
  .uc-okvir table,
  .rd-okvir table {
    display: table;
    overflow: visible;
    white-space: normal;
  }
  /* Okvir koji već postoji samo dobija meko klizanje prstom. */
  .scrolly,
  .table-responsive,
  .uc-okvir,
  .rd-okvir {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- 3. prst ima 44px ---------------------------------------------
     Mera je iz pristupačnosti (WCAG 2.5.5), ne iz ukusa. Polja i dugmad
     se ne smanjuju ispod nje ni kad ih je mnogo u redu. */
  .btn,
  button:not(.btn-close):not(.navbar-toggler),
  .form-control,
  .form-select,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  .side-link,
  .nav-group a {
    min-height: 44px;
  }
  /* Kvačica i tačkica ostaju svoje veličine, ali im se povećava ono što
     se dodiruje — natpis pored njih. */
  .form-check {
    min-height: 30px;
    padding-top: 2px;
  }
  .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
  }
  .form-check-label {
    padding-left: 4px;
    line-height: 1.45;
  }

  /* Veze koje SU dugmad, ali nisu označene kao dugmad.
     Merenje 25.09.2026 na javnom sajtu: „Detaljnije" i „Pročitaj više" su
     299x24, veze u podnožju 49x14. Pravilo od 44px iznad hvata `.btn` i
     `button`; ovo su obične `<a>` veze, pa ih ne dohvata.
     POVEĆAVA SE ONO ŠTO SE DODIRUJE, NE SLOVA — veličina teksta ostaje
     onakva kakvu je dizajn odredio. */
  .dk-detail,
  .footer ul li a,
  .footer-links a,
  /* Broj telefona i e-pošta su na telefonu NAJVAŽNIJE mete na sajtu —
     čovek ih otvara da pozove kliniku, a bile su 16px visoke. */
  a[href^="tel:"],
  a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* --- 5. prozor zauzima ceo ekran ----------------------------------
     Modal na pola ekrana ima svoj skrol unutar skrola stranice; na
     telefonu se tada ne zna šta se kliza, a dugme „Sačuvaj" ume da
     ostane van dohvata. */
  /* PROZOR: PUNA SIRINA, PRIRODNA VISINA, PRISLONJEN UZ VRH.
     
     Prvo je ovde stajala PUNA VISINA — i to je bila greska koju je korisnik
     odmah video: telo prozora je najcesce `display:grid`, pa visak visine
     razvuce redove. Dugmad „Otkazi" i „Potvrdi" narasla su na pola ekrana, a
     izmedju polja su zjapile praznine. Prozor se ne pravi visokim; pusta se
     da bude onoliko visok koliko mu treba, a secen je ekranom.

     SREDINA SE I DALJE GASI. `modal-dialog-centered` centrira po visini; cim
     sadrzaj preraste ekran, sredina gurne VRH iznad vidnog polja i do njega
     se ne dolazi skrolom. Ista zamka je oborila 5. korak zakazivanja.

     `!important` je nuzan: stranice doteruju svoje prozore preko oznake
     (`#registerModal .modal-dialog`), a oznaka je jaca od razreda. Vazi samo
     na telefonu i samo za MERU; boje i oblik stranica odredjuje sama. */
  .modal-dialog,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl,
  .modal-dialog.modal-dialog-centered {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100dvh !important;
    display: flex !important;
    align-items: flex-start !important;
  }
  .modal-content {
    width: 100%;
    /* `auto`, ne `100dvh`: kratak prozor ostaje kratak. */
    height: auto !important;
    max-height: 100dvh !important;
    border-radius: 0 0 16px 16px !important;
    border: 0;
  }
  .modal-body {
    /* Kliza se telo prozora, ne stranica ispod njega. `min-height: 0` je
       uslov da se telo u uspravnom `flex`-u uopste sme smanjiti — bez njega
       ne kliza nego gura podnozje sa ekrana. */
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-header,
  .modal-footer {
    position: sticky;
    z-index: 3;
    flex-shrink: 0;
    background: #ffffff;
  }
  /* PODNOŽJE SE NE RASTEŽE. Dugmad u podnožju su `align-items: stretch` po
     pravilu `flex`-a: ako podnožje iz bilo kog razloga naraste, dugmad rastu
     sa njim. Upravo to se videlo — „Otkaži" i „Potvrdi" veličine pola ekrana. */
  .modal-footer {
    align-items: center;
  }
  .modal-footer > .btn {
    flex: 0 1 auto;
    align-self: center;
  }
  /* Isto važi i za dugmad koja stoje u TELU prozora, u mreži od dve kolone —
     tako su složena na potvrdi prijave. Visina im je mera dugmeta, ne mera
     prostora koji je ostao. */
  .modal-body .btn {
    height: auto;
    align-self: start;
  }
  .modal-header { top: 0; }
  .modal-footer {
    bottom: 0;
    /* Ispod dugmadi stoji traka pregledača; bez ovoga se „Sačuvaj" nađe
       tačno ispod nje. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* --- forme idu u jednu kolonu -------------------------------------
     Dve kolone na 360px daju polja od po 150px — u njih ne staje ni
     datum ni ime. */
  .frm-row,
  .grid2,
  .grid3,
  .row-cols-2,
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- brojke u zaglavlju (`.stats`) --------------------------------
     Pet kartica na 360px daje po 62px — u toliko ne staje ni broj ni
     natpis ispod njega.

     ZAŠTO OVDE, A NE U `cl.css`. Pet ekrana (finansije, magacin,
     laboratorija, audit trag, komandni centar) ne učitava `cl.css` nego
     nosi SVOJU kopiju ljuske u `<style>` bloku — pa su i ostali bez
     mobilnog pravila za ovo. Ovaj list ih pokriva sve odjednom, jer se
     učitava poslednji. */
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* --- naslovi i razmaci -------------------------------------------- */
  h1 { font-size: 1.32rem; }
  h2 { font-size: 1.14rem; }
  h3 { font-size: 1.04rem; }
  .hero { padding: 16px 14px; }
  .hero h1 { font-size: 1.24rem; }

  /* Bootstrap-ov `col-6` je pola širine na SVAKOJ širini — nije mobilna
     varijanta, nego „uvek pola". Na telefonu od 360px to daje polja od
     150px, u koja ne staje ni datum ni ime i prezime. Pogađa samo kolone
     BEZ tačke preloma (`col-md-6` je namera, `col-6` je previd). */
  .panel .row > [class~="col-6"],
  .panel .row > [class~="col-4"],
  .panel .row > [class~="col-3"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Dugmad u redu: kad ih ima više nego što stane, prelamaju se umesto
     da se stisnu u nečitljive pravougaonike. */
  .phead,
  .modal-footer,
  .service-recent-actions,
  .appointment-actions {
    flex-wrap: wrap;
  }

  /* ...ali se prelama i red UNUTAR zaglavlja panela.
     Nađeno merenjem 26.09.2026: na „Naplata po izvorima" stoje dva polja za
     datum sa upisanih 150px i dugme „Prikaži" — 398px na ekranu od 390px.
     Dugme je bilo ODSEČENO, ne skrolabilno: stranica stoji na `overflow-x:
     clip`, pa se do njega nije moglo ni prevlačenjem. `.phead` se prelamao,
     njegov unutrašnji red nije. */
  .phead > .d-flex {
    flex-wrap: wrap;
  }
  /* Širina polja za datum upisana je u sam element, pa je samo `!important`
     nadjačava. Na telefonu polje deli red, na stonom ostaje 150px. */
  .phead input[type="date"] {
    width: auto !important;
    flex: 1 1 140px;
    min-width: 0;
  }
}

/* =====================================================================
   2. FIOKA SA MENIJEM — ekrani uprave (`.side`), do 991.98px
   =====================================================================
   Bočni meni ima 28 stavki. Do sada se na telefonu pretvarao u zid linkova
   IZNAD sadržaja: da bi se videla prva brojka, prelistavalo se preko dva
   ekrana menija. Sada stoji u fioci, a iznad sadržaja ostaje samo traka sa
   imenom stranice i dugmetom.

   Fioka se crta ovde, a otvara u `mobilni.js` — stil i ponašanje na istom
   mestu za sve ekrane uprave. */
@media (max-width: 991.98px) {
  .mb-traka {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 1080;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    background: linear-gradient(#232c3e, #232c3e);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  }
  .mb-meni {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(255, 255, 255,.22);
    border-radius: 12px;
    background: rgba(255, 255, 255,.1);
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1;
  }
  .mb-meni:active { background: rgba(255, 255, 255,.2); }
  .mb-naslov {
    font-weight: 700;
    font-size: 1rem;
    /* Dugačak naslov se skraćuje sa tri tačke umesto da gura dugme sa
       ekrana. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell > .side {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1095;
    width: min(86vw, 320px);
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0 20px 20px 0;
    overflow-y: auto;
    transform: translateX(-102%);
    transition: transform .22s ease;
  }
  body.mb-fioka-otvorena .shell > .side {
    transform: translateX(0);
  }
  .mb-zastor {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(21, 26, 36,.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  body.mb-fioka-otvorena .mb-zastor {
    opacity: 1;
    pointer-events: auto;
  }
  /* Dok je fioka otvorena, sadržaj iza nje se ne kliza — inače se prstom
     pomeri stranica umesto menija. */
  body.mb-fioka-otvorena {
    overflow: hidden;
  }
  /* Meni u fioci je spisak, ne mreža od dve kolone: u dve kolone se
     natpisi „Struktura pacijenata" i „Kodovi za popust" prelamaju. */
  .shell > .side .nav-group {
    grid-template-columns: 1fr !important;
    display: grid;
  }
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Traka se crta samo na telefonu i tablet-širinama; na stonom računaru
   bočni meni stoji i traka nema šta da radi. */
@media (min-width: 992px) {
  .mb-traka,
  .mb-zastor { display: none !important; }
}

/* =====================================================================
   3. NAJUŽI TELEFONI — do 479.98px
   =====================================================================
   Ispod ove širine dve kolone prestaju da budu čitljive: broj i natpis
   ispod njega se prelamaju u tri reda. */
@media (max-width: 479.98px) {
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero {
    flex-direction: column;
    align-items: flex-start;
  }
}