/* Mobilne zobrazenie (telefon, maly tablet). Nacitava sa posledne, po theme.css. Desktop sa tymto suborom nemeni. */

.tscroll { overflow-x: auto; max-width: 100%; }

@media (max-width: 900px) {
  /* tabulky s mnohymi stlpcami sa neskracuju na nepouzitelnu sirku, ale posuvaju sa do strany (s tienom na okraji) */
  .tscroll, .tablewrap {
    -webkit-overflow-scrolling: touch;
    background-image:
      linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)), linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)),
      radial-gradient(farthest-side at 0 50%, rgba(23, 32, 51, .22), rgba(23, 32, 51, 0)),
      radial-gradient(farthest-side at 100% 50%, rgba(23, 32, 51, .22), rgba(23, 32, 51, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .tscroll > table:has(thead th:nth-child(4)), .tablewrap > table:has(thead th:nth-child(4)) { min-width: 600px; }
  .tscroll > table:has(thead th:nth-child(6)), .tablewrap > table:has(thead th:nth-child(6)) { min-width: 820px; }
  .tscroll > table:has(thead th:nth-child(8)), .tablewrap > table:has(thead th:nth-child(8)) { min-width: 1000px; }
}

@media (max-width: 720px) {
  /* menu Akcie v detaile zariadenia: spodny panel namiesto okna mimo obrazovky */
  .amenu-body { position: fixed; left: 10px; right: 10px; bottom: 10px; top: auto; width: auto; max-width: none; max-height: 75vh; overflow-y: auto; z-index: 80; }

  /* zalozky a filtre: jeden riadok s posuvom namiesto 3 riadkov */
  .gtabs, .gsub { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .gtabs::-webkit-scrollbar, .gsub::-webkit-scrollbar { display: none; }
  .gtab, .schip { flex: none; white-space: nowrap; }
  .gtab { padding: 10px 12px; }

  /* prehlad: statistika tiketov na 2 stlpce */
  .tstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tstats > div:nth-child(2n) { border-right: 0; }
  .tstats > div:nth-child(n+3) { border-top: 1px solid var(--border); }

  /* casova os / udalosti: text na vlastny riadok */
  .tlrow { gap: 6px 10px; }
  .tlrow .tlwhen { flex: 0 0 auto; }
  .tlrow .tltext { flex: 1 0 100%; order: 3; }

  /* formulare: polia na celu sirku, bez pevnych sirok */
  .app .ipgrid label > input, .app .ipgrid label > select, .app .ipgrid label > textarea,
  .app .ipgrid label > input[type=text], .app .ipgrid label > input[type=search], .app .ipgrid .srch input,
  .app .ipgrid label > input[type=number], .app .ipgrid label > input[type=time] { width: 100%; }
  .trow input[type=search], .trow .grow { width: 100%; min-width: 0; }
  .exform { min-width: 0; }
  .cardhead:has(> .hrow) { flex-wrap: wrap; }
  .cardhead:has(> .hrow) > * { flex: 1 1 100%; min-width: 0; }
  .hrow > form { padding-right: 0; width: 100%; }
  .hrow > form.hsep { border-left: 0; padding-left: 0; }

  /* dotykove ciele a pisma (iOS neprybli po kliknuti do pola, ak je pismo >= 16 px) */
  .btn, button.btn { min-height: 40px; }
  .schip { height: 36px; }
  select, textarea, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]) { min-height: 40px; font-size: 16px; }
  .topbar .navbtn { min-width: 40px; min-height: 40px; }

  /* plavajuce oznamenia nad spodnym okrajom */
  .act-stack { left: 10px; right: 10px; width: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

  /* ---- zoznam zariadeni ako karty ---- */
  .devtbl { min-width: 0 !important; width: 100%; }
  .devtbl thead { display: none; }
  .devtbl, .devtbl tbody { display: block; }
  .devtbl tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 14px; border-top: 1px solid var(--border); }
  .devtbl tr[hidden] { display: none; }
  .devtbl td { display: block; padding: 0; border: 0; min-width: 0; }
  .devtbl td:nth-child(1) { grid-column: 3; grid-row: 1; justify-self: end; white-space: nowrap; }
  .devtbl td:nth-child(2) { grid-column: 1 / 3; grid-row: 1; font-size: 16px; }
  .devtbl td:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .devtbl td:nth-child(4) { grid-column: 3; grid-row: 2; justify-self: end; }
  .devtbl td:nth-child(5) { grid-column: 1; grid-row: 3; }
  .devtbl td:nth-child(6) { grid-column: 2; grid-row: 3; }
  .devtbl td:nth-child(7) { grid-column: 3; grid-row: 3; }
  .devtbl td:nth-child(8) { grid-column: 1; grid-row: 4; }
  .devtbl td:nth-child(9) { grid-column: 2; grid-row: 4; }
  .devtbl td:nth-child(10) { grid-column: 3; grid-row: 4; justify-self: end; }
  .devtbl td:nth-child(n+5)::before { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .devtbl td:nth-child(5)::before { content: "CPU"; }
  .devtbl td:nth-child(6)::before { content: "RAM"; }
  .devtbl td:nth-child(7)::before { content: "Disk"; }
  .devtbl td:nth-child(8)::before { content: "Zabezp."; }
  .devtbl td:nth-child(9)::before { content: "Uptime"; }
  .devtbl td:nth-child(10)::before { content: "Naposledy"; text-align: right; }
  .devtbl meter { width: 100%; display: block; }
  /* detail tlaciarne: tabulky ako karty */
  .suptbl, .insttbl, .sctbl { min-width: 0 !important; width: 100%; }
  .suptbl thead, .insttbl thead, .sctbl thead { display: none; }
  .suptbl, .suptbl tbody, .insttbl, .insttbl tbody, .sctbl, .sctbl tbody { display: block; }
  .suptbl tr, .insttbl tr, .sctbl tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; padding: 10px 12px; border-top: 1px solid var(--border); }
  .suptbl td, .insttbl td, .sctbl td { display: block; padding: 0; border: 0; min-width: 0; }
  .suptbl tr { grid-template-columns: 1.6rem 1fr; }
  .suptbl td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .suptbl td:nth-child(2) { grid-column: 2; grid-row: 1; font-weight: 600; }
  .suptbl td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .suptbl td:nth-child(4) { grid-column: 2; grid-row: 3; }
  .insttbl td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 600; }
  .insttbl td:nth-child(2) { grid-column: 2; grid-row: 1; justify-self: end; }
  .insttbl td:nth-child(3), .insttbl td:nth-child(4) { grid-column: 1 / -1; }
  .insttbl td:nth-child(3):empty, .insttbl td:nth-child(4):empty { display: none; }
  .sctbl td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 600; }
  .sctbl td:nth-child(5) { grid-column: 2; grid-row: 1; justify-self: end; }
  .sctbl td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .sctbl td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  .sctbl td:nth-child(4) { grid-column: 1 / -1; grid-row: 4; font-size: 12.5px; color: var(--muted); }
  .sctbl td:nth-child(4)::before { content: "Účet: "; }
  .sctbl td:nth-child(6) { grid-column: 1 / -1; grid-row: 5; display: flex; gap: 8px; flex-wrap: wrap; }
  .wz .row { flex-wrap: wrap; }
  .wz .row input[type=text], .wz .row input[type=password] { flex: 1 1 100%; min-width: 0; }
  /* tlaciarne: vlastne stlpce */
  .prtbl td:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .prtbl td:nth-child(4) { grid-column: 1 / 3; grid-row: 3; font-size: 12.5px; color: var(--muted); }
  .prtbl td:nth-child(5) { grid-column: 3; grid-row: 3; justify-self: end; font-size: 12.5px; color: var(--muted); }
  .prtbl td:nth-child(6) { grid-column: 1 / -1; grid-row: 4; }
  .prtbl td:nth-child(7) { grid-column: 1 / -1; grid-row: 5; }
  .prtbl td:nth-child(7):has(.muted) { display: none; }
  .prtbl td:nth-child(8) { grid-column: 1; grid-row: 6; }
  .prtbl td:nth-child(9) { grid-column: 2 / -1; grid-row: 6; justify-self: end; text-align: right; }
  .prtbl td:nth-child(4)::before, .prtbl td:nth-child(5)::before { content: none; }
  .prtbl td:nth-child(6)::before { content: "Tonery"; }
  .prtbl td:nth-child(7)::before { content: "Hlásenia"; }
  .prtbl td:nth-child(8)::before { content: "Strán"; }
  .prtbl td:nth-child(9)::before { content: "Naposledy"; }
  .prtbl .tonerx { display: grid; grid-template-columns: 1.4rem 1fr 3rem; align-items: center; width: 100%; margin: 2px 0; }
  .prtbl .tonerx meter { width: 100%; }

  /* ---- zoznam problemov ako karty ---- */
  .probtbl { min-width: 0 !important; width: 100%; }
  .probtbl thead { display: none; }
  .probtbl, .probtbl tbody { display: block; }
  .probtbl tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; padding: 12px 14px; border-top: 1px solid var(--border); }
  .probtbl td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .probtbl td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .probtbl td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .probtbl td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .probtbl td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; font-size: 12.5px; color: var(--muted); }
  .probtbl td:nth-child(4)::before { content: "Trvá od: "; }
  .probtbl td:nth-child(5), .probtbl td:nth-child(6) { grid-column: 1 / -1; }
  .probtbl td:nth-child(5):empty, .probtbl td:nth-child(6):empty { display: none; }
  /* ---- vysledky skenera ako karty ---- */
  .scantbl { min-width: 0 !important; width: 100%; }
  .scantbl thead { display: none; }
  .scantbl, .scantbl tbody { display: block; }
  .scantbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border-top: 1px solid var(--border); }
  .scantbl td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .scantbl td:nth-child(1) { grid-column: 2; grid-row: 1; justify-self: end; }
  .scantbl td:nth-child(2) { grid-column: 1; grid-row: 1; }
  .scantbl td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .scantbl td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; font-size: 12.5px; color: var(--muted); }
  .scantbl td:nth-child(5) { grid-column: 1 / -1; grid-row: 4; font-size: 12.5px; color: var(--muted); }
  .scantbl td:nth-child(6) { grid-column: 1 / -1; grid-row: 5; }
  .scantbl td:nth-child(4):not(:empty)::before { content: "MAC: "; }
  .scantbl td:nth-child(5)::before { content: "Výrobca: "; }
  .scantbl td:nth-child(1):empty { display: none; }
  /* ---- zalohy ako karty ---- */
  .pkgtbl, .jobtbl { min-width: 0 !important; width: 100%; }
  .pkgtbl thead, .jobtbl thead { display: none; }
  .pkgtbl, .pkgtbl tbody, .jobtbl, .jobtbl tbody { display: block; }
  .pkgtbl tr, .jobtbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border-top: 1px solid var(--border); }
  .pkgtbl td, .jobtbl td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .pkgtbl td:nth-child(1) { grid-column: 1 / -1; }
  .pkgtbl td:nth-child(2) { grid-column: 1; }
  .pkgtbl td:nth-child(3) { grid-column: 2; justify-self: end; }
  .pkgtbl td:nth-child(4) { grid-column: 1 / -1; padding-top: 6px; }
  .pkgtbl td:nth-child(4) > *:not(dialog) { display: inline-block; margin-right: 8px; }
  .jobtbl td:nth-child(2) { grid-column: 1; grid-row: 1; font-weight: 600; }
  .jobtbl td:nth-child(5) { grid-column: 2; grid-row: 1; justify-self: end; }
  .jobtbl td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .jobtbl td:nth-child(1) { grid-column: 1; grid-row: 3; font-size: 12.5px; color: var(--muted); }
  .jobtbl td:nth-child(4) { grid-column: 1 / -1; grid-row: 4; font-size: 12.5px; color: var(--muted); }
}

/* ochrana proti presahu strany do sirky (Safari inak zmensi celu stranku a menu sa orezi) */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .shell > *, .shell main, .card { min-width: 0; max-width: 100%; }
  .side { height: 100vh; height: 100dvh; overflow-y: auto; }
  .card > table.tbl, .card > form > table.tbl { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  pre.aires, .card pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
}

/* ---- Sietove disky a zdielane priecinky (NAS) na mobile ---- */
@media (max-width: 720px) {
  .site-head { flex-wrap: wrap; gap: 8px; }
  .site-head > [data-modal], .site-head > .btn { flex: 1 1 100%; }
  .site-head .btn.primary { width: 100%; justify-content: center; }
  .ndh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .card code { overflow-wrap: anywhere; word-break: break-all; }
  .card .prewrap { overflow-wrap: anywhere; }

  /* tabulky ako karty */
  .ndtbl, .ndftbl, .ndjtbl, .ndstbl { min-width: 0 !important; width: 100%; display: block !important; overflow: visible !important; }
  .ndtbl thead, .ndftbl thead, .ndjtbl thead, .ndstbl thead { display: none; }
  .ndtbl tbody, .ndftbl tbody, .ndjtbl tbody, .ndstbl tbody { display: block; }
  .ndtbl tr, .ndftbl tr, .ndjtbl tr, .ndstbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; border-top: 1px solid var(--border); }
  .ndtbl tr:first-child, .ndftbl tr:first-child, .ndjtbl tr:first-child, .ndstbl tr:first-child { border-top: 0; }
  .ndtbl td, .ndftbl td, .ndjtbl td, .ndstbl td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }

  /* PC: zdielanie | stav disku | prepinac */
  .ndtbl td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .ndtbl td:nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
  .ndtbl td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .ndtbl td:nth-child(2):has(> span.muted:only-child) { display: none; }
  .ndtbl td:nth-child(3) .small { max-width: 11rem; text-align: right; }

  /* NAS: zdielane priecinky pre PC */
  .ndftbl td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .ndftbl td:nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; }
  .ndftbl td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; color: var(--muted); }
  .ndftbl td:nth-child(2)::before { content: "Pripojený na: "; }

  /* NAS: nove zdielania */
  .ndjtbl td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .ndjtbl td:nth-child(4) { grid-column: 2; grid-row: 1; justify-self: end; font-size: 12.5px; color: var(--muted); }
  .ndjtbl td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .ndjtbl td:nth-child(2) { grid-column: 1 / -1; grid-row: 3; font-size: 12.5px; color: var(--muted); }
  .ndjtbl td:nth-child(2)::before { content: "Zväzok: "; }

  /* NAS: prehlad zdielani (8 stlpcov) */
  .ndstbl tr { grid-template-columns: minmax(0, 1fr); }
  .ndstbl td { grid-column: 1; }
  .ndstbl td:nth-child(1) { grid-row: 1; font-size: 15px; }
  .ndstbl td:nth-child(2) { grid-row: 2; font-size: 12.5px; color: var(--muted); }
  .ndstbl td:nth-child(7) { grid-row: 3; }
  .ndstbl td:nth-child(4) { grid-row: 4; }
  .ndstbl td:nth-child(3) { grid-row: 5; }
  .ndstbl td:nth-child(5) { grid-row: 6; }
  .ndstbl td:nth-child(6) { grid-row: 7; }
  .ndstbl td:nth-child(8) { grid-row: 8; }
  .ndstbl td:nth-child(n+3)::before { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
  .ndstbl td:nth-child(3)::before { content: "Popis"; }
  .ndstbl td:nth-child(4)::before { content: "Prístup"; }
  .ndstbl td:nth-child(5)::before { content: "Kôš"; }
  .ndstbl td:nth-child(6)::before { content: "Viditeľnosť"; }
  .ndstbl td:nth-child(7)::before { content: "Pripojené na PC"; }
  .ndstbl td:nth-child(8)::before { content: "Detaily"; }
  .ndstbl td:nth-child(3):not(:has(*)):where(:empty), .ndstbl td:nth-child(7):has(> span.muted:only-child) { display: none; }

  /* prepinac: dostatocne velky dotykovy ciel */
  label.switch { min-height: 40px; display: inline-flex; align-items: center; }
  .swform .btn { width: auto; }

  /* vyber priecinka zo stromu: velke dotykove ciele, menej odsadenia */
  .pickbox { max-height: 46vh; max-height: 46dvh; padding: 4px 6px; font-size: 15px; -webkit-overflow-scrolling: touch; }
  .pickbox summary { padding: 8px 4px; }
  .pickbox details > summary::before { font-size: 16px; width: 20px; }
  .pickbox .pkshare > summary { padding: 10px 4px; font-size: 15px; }
  ul.pick { margin-left: 9px; padding-left: 6px; }
  ul.pick li > label.pk { margin-left: 20px; }
  .pick label.pk, .dbody-add .pick label.pk, .exform .pick label.pk { padding: 8px 6px; font-size: 15px; gap: 8px; }
  .pick label.pk input[type=radio] { width: 20px !important; height: 20px !important; min-width: 20px; }

  /* okna (spodny panel): scroll obsahu, pata s velkymi tlacidlami, bezpecny okraj */
  dialog.dlg-add { max-height: 94vh; max-height: 94dvh; }
  dialog.dlg-add > form, dialog.dlg-add > .dform { max-height: 94vh; max-height: 94dvh; }
  dialog.dlg-add .dbody { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 14px; }
  dialog.dlg-add .dfoot { flex-wrap: wrap; gap: 8px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  dialog.dlg-add .dfoot .grow { display: none; }
  dialog.dlg-add .dfoot .btn { flex: 1 1 40%; justify-content: center; }
  .dbody-add .exform > div:last-child .btn { width: 100%; justify-content: center; }
  .ndbox select { width: 100%; }
}