/* -------------------------------------------------- */
/* MOBILE.CSS (override) – STRUKTURA
   Pravidlo: každá sekce má jasný komentář: stránka + cíl + selektory
   Breakpoint: max-width 980px (sjednoceno s aktuálním layoutem)
*/
/* -------------------------------------------------- */

/* -------------------------------------------------- */
/* PC POJISTKA
   Cíl: mobilní prvky nesmí ovlivnit desktop layout
   Selektory: .m-burger, .m-overlay, .m-topbar
*/
/* -------------------------------------------------- */

.m-burger{ display: none; }
.m-overlay{ display: none; }
.m-topbar{ display: none; }

/* -------------------------------------------------- */

@media (max-width: 980px){

  /* ==================================================
     1.) GLOBAL – základ mobilního chování
     Cíl: opravit scroll a viewport (mobilní použitelnost)
     Selektory: html, body, .wrap
  ================================================== */
  html, body{ height: auto; }

	body.view-home{
	  overflow: auto;
	  -webkit-overflow-scrolling: touch;

	  padding: 0;
	  box-sizing: border-box;
	}

  .wrap{
    height: auto;
    min-height: 100dvh;
  }

  /* ==================================================
     2.) STRÁNKA: LOGIN (stranka_nasmh.css + 2fa_login.php)
     Cíl: žádný scroll, ale nesmí se to rozbít na mobilu (klávesnice, safe-area)
     Selektory: body, .login-container, .auth-box, .auth-form
  ================================================== */

/* 2.1.) LOGIN: nahoře (bez centrování) */
body{
body.view-login{
  overflow: hidden;

  min-height: 100dvh;
  display: block;

  padding-top: calc(18px + env(safe-area-inset-top));
  padding-right: calc(12px + env(safe-area-inset-right));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  padding-left: calc(12px + env(safe-area-inset-left));
  box-sizing: border-box;
}

  /* 2.2.) LOGIN BOX: vycentrovaný a rozumně široký */
  .login-container{
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;

    width: min(92vw, 420px);
    margin: 0;

    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;

    padding: 14px 14px;
  }

  /* 2.3.) 2FA BOX: také centrovaně a responsivně */
  .auth-box{
    min-width: 0;
    width: min(92vw, 420px);
    padding: 16px 16px;
  }

  /* 2.3.1.) 2FA FORM: na mobilu pod sebe */
  .auth-form{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    justify-items: stretch;
  }

  /* 2.4.) LOGIN INPUTY: sjednotit výšku username + password (včetně hesla v pass-wrap) */
  .login-container input[type="text"],
  .login-container input[type="password"],
  .pass-wrap input[type="password"],
  .pass-wrap input[type="text"]{
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    font-size: 18px;
    line-height: 46px;
    padding: 0 12px;
    border-radius: 8px;
  }

  /* 2.5.) HESLO: rezervovat místo pro "oko" (jen heslo) */
  .pass-wrap input[type="password"],
  .pass-wrap input[type="text"]{
    padding-right: 44px;
  }

  /* 2.6.) LOGIN: tlačítko je na loginu tvořené JS jako button.login-submit */
  .login-submit{
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
  }

  /* 2.7.) 2FA: input kódu + tlačítko */
  .auth-code{
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    font-size: 18px;
    line-height: 46px;
    padding: 0 12px;
    border-radius: 8px;
    letter-spacing: 3px;
  }

  .auth-submit{
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
  }

  /* ==================================================
     3.) LAYOUT PO PŘIHLÁŠENÍ – hlavička + obsah
     Cíl: mobilní scroll (bez zasekávání), oprava výšek, čitelnost a spacing
     Selektory: body, .wrap, .layout, .main, .main-head, .main-body
  ================================================== */

  /* 3.1.) Povolit scroll na mobilu (po přihlášení) */
  body{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 3.2.) Zrušit pevné výšky, které na mobilu řežou obsah */
  .wrap{
    height: auto;
    min-height: 100dvh;
  }

  /* 3.3.) Layout: ať se to skládá přirozeně a netvoří nested-scroll */
  .layout{
    height: auto;
    min-height: 100dvh;
  }

  /* 3.4.) Main část: bez vynucené výšky */
  .main{
    height: auto;
    min-height: auto;
  }

  /* 3.5.) Obsah: zrušit “scroll jen v pravém panelu” (na mobilu je lepší body scroll) */
  .main-body{
    height: auto;
    max-height: none;
    overflow: visible;
  }

  /* 3.6.) Mobilní paddingy */
  .main-head{
    padding: 12px 12px;
  }

  .main-body{
    padding: 12px 12px 18px 12px;
  }

  /* 3.7.) MOBILE TOPBAR: uživatel + role vždy nahoře (vizuálně jako sidebar header)
     Cíl: stejný "look" jako .sb-head (bílé pozadí, dot-online, role pod jménem)
     Selektory: .m-topbar, .m-topbar__brand, .m-topbar__user, .m-topbar__role, .wrap
  */
  .m-topbar{
    display: flex;
    flex-direction: column;
    justify-content: center;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;

	height: 56px;
	padding: 0 14px;

    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    z-index: 1200;
  }

.m-topbar__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

  .m-topbar__brand{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

.m-topbar .dot-online{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.22);
  flex: 0 0 auto;
}
  /* TOPBAR: větší text */
  .m-topbar__user{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 72vw;
	font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.2px;
  }

  .m-topbar__role{
    margin-top: 0px;
    font-size: 14px;
    line-height: 1;
    color: rgba(0,0,0,0.6);
    white-space: nowrap;
  }

  /* posunout celý obsah dolů pod topbar */
  .wrap{
    padding-top: calc(56px + env(safe-area-inset-top));
  }

/* 3.8.) MOBIL: využít víc šířku obsahu (override proti main/prava_strana)
   Cíl: odstranit velké boční mezery v obsahu
   Selektory: .wrap, .layout, .main, .main-head, .main-body
*/
.wrap{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.layout{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.main{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

.main .main-head{
  padding-left: calc(6px + env(safe-area-inset-left)) !important;
  padding-right: calc(6px + env(safe-area-inset-right)) !important;
}

.main .main-body{
  padding-left: calc(6px + env(safe-area-inset-left)) !important;
  padding-right: calc(6px + env(safe-area-inset-right)) !important;
}

  /* ==================================================
     4.) SIDEBAR / MENU – drawer (hamburger)
     Cíl: burger vlevo nahoře, sidebar jako drawer, overlay jen při otevření
     Selektory: .m-burger, .m-burger__bar, .m-overlay, .sidebar, .sidebar.is-open, .layout
  ================================================== */

/* 4.1.) Burger v topbaru (ne fixed) */
.m-burger{
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  width: 52px !important;
  height: 52px !important;

  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: pointer !important;
  border-radius: 10px !important;

  position: static !important;
}

/* čárky na bílém topbaru */
.m-burger__bar{
  display: block !important;
  width: 26px !important;
  height: 3px !important;
  margin: 0 !important;
  background: #111 !important;
  border-radius: 3px !important;
}

  /* 4.2.) Overlay – výchozí stav skrytý přes [hidden] */
  .m-overlay{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1500;
  }

  /* když je [hidden], musí být pryč */
  .m-overlay[hidden]{
    display: none !important;
  }

  /* 4.3.) Sidebar jako drawer */
  .sidebar{
    position: fixed;
    left: 0;
    top: 0;

    width: min(86vw, 320px);
    height: 100dvh;

    transform: translateX(-110%);
    transition: transform 180ms ease;

    z-index: 1600;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar.is-open{
    transform: translateX(0);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
  }

  /* 4.4.) Na mobilu nechceme sidebar v gridu zabírat místo */
  .layout{
    grid-template-columns: 1fr;
  }

/* 5.1.) PODSEKCE: menší “buňky” v pravém obsahu (mobil)
   Cíl: zmenšit zbytečnou výšku řádků / položek
   Selektory: .main-body, p, .row, label, input, select, textarea, button, .btn, .card, table
*/
.main-body{
  line-height: 1.25;
}

/* textové bloky */
.main-body p{
  margin: 8px 0;
}

/* formulářové řádky (často .row) */
.main-body .row{
  margin: 10px 0;
}

/* labely */
.main-body label{
  margin-bottom: 6px;
  display: block;
  line-height: 1.2;
}

/* inputy / selecty / textarea – menší výška */
.main-body input[type="text"],
.main-body input[type="password"],
.main-body input[type="number"],
.main-body input[type="email"],
.main-body input[type="search"],
.main-body select,
.main-body textarea{
  min-height: 40px;
  padding: 8px 10px;
  line-height: 1.2;
}

/* tlačítka */
.main-body button,
.main-body .btn{
  min-height: 40px;
  padding: 8px 12px;
  line-height: 1.1;
}

/* karty */
.main-body .card{
  padding: 12px;
}

/* tabulky */
.main-body table{
  font-size: 14px;
}
.main-body th,
.main-body td{
  padding: 8px 10px;
  vertical-align: top;
}
/* 5.2.) PODSEKCE (IP Adresy apod.): odstranit obří prázdno v “buňce”
   Cíl: na mobilu se pravý panel/karta přizpůsobí obsahu, bez zbytečné výšky
   Pozn.: žádná změna font-size, jen výšky + marginy
   Selektory: .layout, .main, .main-body, .sec-block, p, p.sub
*/
.layout{
  height: auto !important;
  min-height: 0 !important;
}

.main{
  height: auto !important;
  min-height: 0 !important;
}

.main-body{
  height: auto !important;
  min-height: 0 !important;
}

/* pokud je obsah v blocích (např. Kompletní přehled), zmenšit obal */
.sec-block{
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  padding: 8px !important;
  margin: 0 0 10px 0 !important;
}

/* kompaktnější řádky (bez změny velikosti písma) */
.wrap .layout > .main p{
  margin: 0 0 3px 0 !important;
  padding: 0 !important;
}

.wrap .layout > .main p.sub{
  margin: 0 0 3px 0 !important;
  padding: 0 !important;
}

/* 6.0.) LIVE (mobil): náhledy kamer musí vyplnit celý rámeček (portrait)
   Cíl: odstranit “video jen v půlce rámečku” na výšku
   Pozn.: PC se nemění (je to jen v @media)
*/
.livecams__grid > *{
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

/* pokud je kamera v iframe, ať iframe vyplní celý tile */
.livecams__grid iframe{
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}

.livecams__grid video{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;   /* bez ořezu */
  background: #000;      /* pruhy budou černé */
}