/* Pogodynka.eu — Mobile polish (global)
   Cel: wszystkie podstrony czytelne na telefonie, bez psucia logiki JS.
*/
@media (max-width: 980px){
  :root{ --navH: 60px; }

  html, body{ overflow-x:hidden; -webkit-text-size-adjust: 100%; }
  .main{ width:100%; overflow-x:clip; }

  /* Navbar */
  .navbar__inner{ padding: 0 10px; gap: 10px; }
  .brand__icon{ width:34px; height:34px; border-radius: 12px; }
  .brand__text{ font-size: 15px; }
  .nav{ justify-content:flex-start; gap: 6px; }
  .nav__link{ padding: 8px 10px; border-radius: 12px; font-size: 14px; }
  .clock{ display:none; } /* na mobile zostawiamy miejsce na menu */
  .navBtn{ padding: 8px 12px; border-radius: 12px; }

  /* Global spacing */
  .page, .wrap, .container{ padding-left: 12px; padding-right: 12px; }
  h1{ font-size: 26px; }
  h2{ font-size: 20px; }
  .card{ border-radius: 18px; min-width: 0; }

  /* Media / embedded content */
  img, video, canvas, svg, iframe{ max-width:100%; }

  /* Forms / inputs */
  input, select, textarea{ font-size: 16px; } /* iOS zoom fix */
  .btn, button{ min-height: 42px; }

  /* Tables and horizontal-heavy blocks */
  .tableWrap, .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; }

  /* Common grids used across podstrony + admin */
  .grid-2,
  .grid-3,
  .grid-4,
  .chartGrid,
  .toolGrid,
  .vpsGrid{ grid-template-columns: 1fr !important; }

  /* Cards/blocks with fixed sidebars should stack */
  .sidebar, .panel, .right, .aside{ width:100%; max-width:100%; }

  /* Maps/canvas: wymuś sensowną wysokość gdy rodzic nie daje (0px bug) */
  #map, .map, .leaflet-container{ min-height: 56vh; }

  /* Leaflet controls - większe dotykowe */
  .leaflet-control-zoom a{ width: 38px; height: 38px; line-height: 38px; }

  /* Admin specifics */
  .admin-page{ padding-left: 10px !important; padding-right: 10px !important; }
  .admin-page .admin-actions{ width:100%; justify-content:flex-start; }
  .admin-page .card{ padding: 12px; }

  /* Global hardening (overflow + fixed widths) */
  .nav{ overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .nav__link{ flex: 0 0 auto; }

  .page, .wrap, .container,
  .card, .panel, .legend, .controls,
  .leaflet-control-container,
  .admin-page, .admin-shell, .admin-main{
    max-width:100% !important;
    min-width:0 !important;
  }

  .admin-page .row{ flex-wrap:wrap; }
  .admin-page #adminRouteSearch{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
  }

  .table, .table table{ min-width: 620px; }

  [style*="min-width:320px"],
  [style*="min-width: 320px"],
  [style*="min-width:520px"],
  [style*="min-width: 520px"]{
    min-width:0 !important;
    max-width:100% !important;
  }
}

@media (max-width: 560px){
  :root{ --navH: 56px; }
  h1{ font-size: 24px; }
  .nav__link{ padding: 8px 9px; font-size: 13px; }
  .card{ border-radius: 16px; }

  .page, .wrap, .container{ padding-left: 10px; padding-right: 10px; }

  /* very small screens */
  .navBtn{ padding: 8px 10px; font-size: 13px; }
  #map, .map, .leaflet-container{ min-height: 52vh; }
}

/* 2026-03-11 Mobile Navbar Refresh */
@media (max-width: 980px){
  :root{ --navH: 62px; }

  .navbar__inner{
    padding: 8px 10px;
    gap: 8px;
  }

  .brand{
    gap: 10px;
    padding-right: 0;
  }

  .brand__icon{
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }

  .brand__title{
    font-size: 15px;
  }

  .brand__tag{
    font-size: 10px;
    letter-spacing: 0.07em;
  }

  .navWrap{
    gap: 4px;
  }

  #topNav.nav{
    gap: 7px;
    padding: 1px 0;
  }

  .nav__link{
    min-height: 38px;
    padding: 0 11px;
    font-size: 12.5px;
    border-radius: 12px;
  }

  .navArrow{
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .navFade{
    width: 18px;
  }

  .navFade--left{
    left: 34px;
  }

  .navFade--right{
    right: 34px;
  }

  .navRight{
    gap: 8px;
    padding-left: 0;
  }

  .navBtn{
    min-height: 38px;
    padding: 0 12px;
    font-size: 12.5px;
    border-radius: 12px;
  }
}

@media (max-width: 560px){
  :root{ --navH: 58px; }

  .navbar__inner{
    padding: 8px;
  }

  .brand__icon{
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .brand__tag{
    display: none;
  }

  .nav__link{
    min-height: 36px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 11px;
  }

  .navArrow{
    width: 28px;
    height: 28px;
  }

  .navFade--left{
    left: 30px;
  }

  .navFade--right{
    right: 30px;
  }

  .navBtn{
    min-height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }
}

@media (max-width: 420px){
  .brand__copy{
    display: none;
  }

  .navWrap{
    min-width: 0;
  }

  .navBtn{
    padding: 0 9px;
  }
}
/* 2026-03-11 Extra Compact Mobile */
@media (max-width: 980px){
  :root{ --navH: 56px; }

  .navbar__inner{
    padding: 6px 8px;
    gap: 6px;
  }

  .brand__icon{
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .brand__title{
    font-size: 13px;
  }

  #topNav.nav{
    gap: 5px;
  }

  .nav__link{
    min-height: 32px;
    padding: 0 9px;
    font-size: 11px;
    border-radius: 10px;
  }

  .navArrow{
    width: 26px;
    height: 26px;
  }

  .navBtn{
    min-height: 32px;
    padding: 0 10px;
    font-size: 11px;
  }
}

@media (max-width: 560px){
  :root{ --navH: 52px; }

  .brand__icon{
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .nav__link{
    min-height: 30px;
    padding: 0 8px;
    font-size: 10.5px;
  }

  .navBtn{
    min-height: 30px;
    padding: 0 9px;
    font-size: 10.5px;
  }
}