/*==========================================================================
  DESKTOP GUARD — prikaz mobilne aplikacije na širokim ekranima
===========================================================================

  PROBLEM
  -------
  Ekrani su dizajnirani za telefon i sve dimenzije su u `vw` jedinicama
  (hex meni, footer nav). `vw` je UVEK relativno na viewport i ne može se
  ograničiti roditeljem — `max-width` na wrapperu tu ne pomaže. Na telefonu
  (~420 px) `40vw` je 168 px, ali na desktopu (1293 px) postaje 517 px, pa
  meni "eksplodira" preko celog ekrana.

  REŠENJE
  -------
  Iznad 560 px "zamrzavamo" layout na baznu širinu telefona od 420 px:
      1vw = 4.2px   →   Xvw = X * 4.2 px
  i centriramo kolonu. Ispod 560 px (pravi telefon) NIŠTA se ne menja —
  ceo fajl je unutar jednog media query-ja.

  ZAŠTO !important
  ----------------
  `<style>` blokovi iz .razor komponenti NISU scoped CSS — renderuju se kao
  obični <style> tagovi unutar <body>, dakle POSLE <head> linkova. Pri istoj
  specifičnosti kasniji pobeđuje, pa bi komponenta pregazila ovaj fajl.
  `!important` je i jedini način da se pobede inline `style="...vw"`
  atributi (tastature, logo).

  POZICIONIRANJE FIXED ELEMENATA
  ------------------------------
  Koristi se `calc(50% - 210px + Xpx)`, a NE `50vw`: kod `position: fixed`
  procenat se računa od viewporta BEZ scrollbara, dok `vw` uključuje
  scrollbar — pa bi fixed elementi bili pomereni ~8 px u odnosu na
  centrirani #page.

  BAZNE VREDNOSTI (1vw = 4.2px)
  -----------------------------
  34.64vw→145.5  40vw→168     32.64vw→137.1  38vw→159.6   15vw→63
  25vw→105       29vw→121.8   58vw→243.6     50vw→210     66.99vw→281.4
  84vw→352.8     100.63vw→422.6  117vw→491.4
  21.65vw→90.9   20.65vw→86.7 24vw→100.8     10.83vw→45.5
  18.75vw→78.75  37.5vw→157.5 56.25vw→236.25 75vw→315
========================================================================== */

@media (min-width: 560px) {

    /*------------------------------------------------------------------
      1) OKVIR — kolona širine telefona, centrirana, sa blagom senkom
         da se vidi granica "ekrana".
         #page je position:relative pa ga max-width normalno sužava.
         Fixed deca (.header, #footer-bar, overlayi) se NE sužavaju ovim —
         njih centriramo pojedinačno u sekciji 2.
    ------------------------------------------------------------------*/
    #page {
        max-width: 420px !important;
        margin: 0 auto !important;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 0 24px rgba(0,0,0,0.10) !important;
        min-height: 100vh !important;
    }

    /*------------------------------------------------------------------
      2) FIXED ELEMENTI KOLORA — left/right:0 → centriraj na 420px.
         Namerno se ne koristi transform: translateX(-50%) jer bi se
         sudario sa slide-in/slide-out animacijom nav-stack overlaya.
    ------------------------------------------------------------------*/
    .header,
    #footer-bar,
    .nav-stack-overlay {
        left: calc(50% - 210px) !important;
        right: auto !important;
        width: 420px !important;
    }

    /*------------------------------------------------------------------
      3) HEX MENI (HexMenu_Component) — .hex-menu-btn*
    ------------------------------------------------------------------*/
    .hex-menu-btn {
        height: 145.5px !important;
        width: 168px !important;
    }

    .hex-menu-btn.inner,
    .hex-menu-btn-disabled {
        height: 137.1px !important;
        width: 159.6px !important;
    }

    .hex-menu-btn-img {
        width: 63px !important;
    }

    /* Raspored:      1          (levo 29vw, vrh 50vw)
                   2     3       (0 / 58vw, 66.99vw)
                      H          (29vw, 84vw)
                   4     5       (0 / 58vw, 100.63vw)
                      6          (29vw, 117vw)                          */
    .hex-menu-btn-1 {
        left: calc(50% - 210px + 121.8px) !important;
        top: 210px !important;
    }

    .hex-menu-btn-2 {
        left: calc(50% - 210px) !important;
        top: 281.4px !important;
    }

    .hex-menu-btn-3 {
        left: calc(50% - 210px + 243.6px) !important;
        top: 281.4px !important;
    }

    .hex-menu-btn-H {
        left: calc(50% - 210px + 121.8px) !important;
        top: 352.8px !important;
    }

    .hex-menu-btn-4 {
        left: calc(50% - 210px) !important;
        top: 422.6px !important;
    }

    .hex-menu-btn-5 {
        left: calc(50% - 210px + 243.6px) !important;
        top: 422.6px !important;
    }

    .hex-menu-btn-6 {
        left: calc(50% - 210px + 121.8px) !important;
        top: 491.4px !important;
    }

    /*------------------------------------------------------------------
      4) HEX GLAVNI MENI (HexMainMenu_Component) — .hex-main-menu-btn*
         Identične vrednosti, samo drugi prefiks klase.
    ------------------------------------------------------------------*/
    .hex-main-menu-btn {
        height: 145.5px !important;
        width: 168px !important;
    }

    .hex-main-menu-btn.inner,
    .hex-main-menu-btn-disabled {
        height: 137.1px !important;
        width: 159.6px !important;
    }

    .hex-main-menu-btn-img {
        width: 63px !important;
    }

    .hex-main-menu-btn-1 {
        left: calc(50% - 210px + 121.8px) !important;
        top: 210px !important;
    }

    .hex-main-menu-btn-2 {
        left: calc(50% - 210px) !important;
        top: 281.4px !important;
    }

    .hex-main-menu-btn-3 {
        left: calc(50% - 210px + 243.6px) !important;
        top: 281.4px !important;
    }

    .hex-main-menu-btn-H {
        left: calc(50% - 210px + 121.8px) !important;
        top: 352.8px !important;
    }

    .hex-main-menu-btn-4 {
        left: calc(50% - 210px) !important;
        top: 422.6px !important;
    }

    .hex-main-menu-btn-5 {
        left: calc(50% - 210px + 243.6px) !important;
        top: 422.6px !important;
    }

    .hex-main-menu-btn-6 {
        left: calc(50% - 210px + 121.8px) !important;
        top: 491.4px !important;
    }

    /*------------------------------------------------------------------
      5) FOOTER NAV (BasicFooterNav_Component) — .footer-nav-btn*
         btn-1 u komponenti nema `left` (oslanja se na statičku poziciju),
         pa ga ovde postavljamo eksplicitno na početak kolone.
    ------------------------------------------------------------------*/
    .footer-nav-btn {
        height: 90.9px !important;
        width: 105px !important;
    }

        .footer-nav-btn.inner {
            height: 86.7px !important;
            width: 100.8px !important;
        }

    .footer-nav-btn-1 {
        left: calc(50% - 210px) !important;
        bottom: 0 !important;
    }

    .footer-nav-btn-2 {
        left: calc(50% - 210px + 78.75px) !important;
        bottom: 45.5px !important;
    }

    .footer-nav-btn-3 {
        left: calc(50% - 210px + 157.5px) !important;
        bottom: 0 !important;
    }

    .footer-nav-btn-4 {
        left: calc(50% - 210px + 236.25px) !important;
        bottom: 45.5px !important;
    }

    .footer-nav-btn-5 {
        left: calc(50% - 210px + 315px) !important;
        bottom: 0 !important;
    }

    /*------------------------------------------------------------------
      6) INLINE STILOVI SA vw — mogu se pobediti samo preko !important.
         Selektuju se po sadržaju style atributa jer nemaju svoju klasu.
    ------------------------------------------------------------------*/

    /* Logo iznad hex menija: style="height: 25vw"  →  105px */
    img[src="images/SpFLogoS.png"] {
        height: 105px !important;
    }

    /* Tastature (Keyboard_Decimal / _DecimalNull / _Integer):
       style="width: 100vw; height: 100vh; position: fixed; top: 0"
       Bez `left` bi fixed element pao na statičku poziciju → postavljamo ga. */
    div[style*="width: 100vw"] {
        width: 420px !important;
        left: calc(50% - 210px) !important;
    }

    /* Naslovi u Select_* komponentama: style="width: calc(100vw - 200px)" */
    .new-header-menu-title[style*="100vw"] {
        width: 220px !important;
    }
}