/* =============================================================================
   StiBus Terminál – mobile.css
   Doplněk k terminal.css – přidává/přepisuje pouze mobile-specific pravidla.
   Linkovat ZA terminal.css v template/index.phtml.
   ============================================================================= */

/* ── Obecné ─────────────────────────────────────────────────────────────── */
main {
  padding: 0 12px;        /* boční mezery na mobilu */
  box-sizing: border-box;
}

section {
  padding: 0 4px;
}

/* ── Navigace ────────────────────────────────────────────────────────────── */
.topnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}

/* Hamburger ikona – vždy viditelná, větší tapovací plocha */
.topnav a.icon {
  margin-left: auto;
  padding: 16px 20px;
  font-size: 1.2rem;
  display: none;          /* zobrazí se přes media query níže */
  color: #fff;
}

.topnav a.icon:hover {
  background-color: rgba(255,255,255,0.15);
}

/* Aktivní položka nav */
.topnav a.active {
  background-color: rgba(255,255,255,0.18);
  border-bottom: 3px solid #fff;
}

/* ── Tabulky ─────────────────────────────────────────────────────────────── */
.table-responsive {
  -webkit-overflow-scrolling: touch;  /* plynulý scroll na iOS */
  overflow-x: auto;
  max-height: none;                   /* zrušit omezení výšky */
  border-radius: 4px;
}

/* Sticky header při horizontálním scrollu */
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}

/* Akční tlačítka v tabulce – dostatečná tapovací plocha */
td .btn, td button, td a.btn {
  min-height: 38px;
  min-width: 38px;
  padding: 6px 10px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* ── Formuláře v adminu ──────────────────────────────────────────────────── */
.form-style-5 {
  width: 100%;
  max-width: 100%;
}

.form-style-5 input,
.form-style-5 select,
.form-style-5 textarea {
  min-height: 44px;       /* minimální výška pro touch */
  font-size: 16px;        /* zabrání auto-zoom na iOS */
}

/* ── Breakpoint: tablet ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  main { padding: 0 10px; }

  /* Tabulka – menší padding, ale stále tapnutelná */
  td, th {
    padding: 10px 6px !important;
    font-size: 13px !important;
  }

  td .btn, td button {
    padding: 5px 8px;
    font-size: 12px;
  }
}

/* ── Breakpoint: mobil ───────────────────────────────────────────────────── */
@media (max-width: 600px) {

  /* Navigace – hamburger */
  .topnav a:not(.icon):not(.active-page) { display: none; }
  .topnav a.icon { display: block; }

  .topnav.responsive {
    flex-direction: column;
    align-items: stretch;
  }

  .topnav.responsive a {
    display: block !important;
    float: none;
    text-align: left;
    padding: 14px 18px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
    border-top: none;
  }

  /* Header výška */
  .header { height: 60px; }
  .logo a, .logo a div { font-size: 26px; line-height: 60px; }

  /* Main obsah */
  main { padding: 0 6px; }

  h1 {
    font-size: 17px !important;
    margin: 16px 0 !important;
  }

  /* Tabulky na mobilu – scroll, nikdy nezlomit řádek v hlavičce */
  .table-responsive {
    margin: 0 -6px;       /* přesah přes padding hlavního elementu */
    border-radius: 0;
  }

  td, th {
    padding: 10px 8px !important;
    font-size: 12px !important;
  }

  /* Akční buňky – ikonky bez textu na mobilu */
  td .btn-text { display: none; }

  /* Velká tlačítka (submit, přidat apod.) */
  .btn-lg, button[type="submit"], input[type="submit"] {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    margin-top: 6px;
  }

  /* Vstupní pole – zamezit zoom na iOS */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* Modální okna */
  .modal-dialog { margin: 8px; }
  .modal-content { border-radius: 0 16px; }

  /* Případné inline formuláře vedle sebe → pod sebe */
  .d-inline-flex, .row.g-2 {
    flex-direction: column !important;
  }
}

/* ── Breakpoint: velmi malý mobil ────────────────────────────────────────── */
@media (max-width: 380px) {
  td, th { font-size: 11px !important; padding: 8px 4px !important; }
  .logo a, .logo a div { font-size: 22px; }
}