/* =================================================================
   GTnet Mobile CSS v2.0
   Wszystkie reguły w @media — zero wpływu na desktop (>768px)
================================================================= */

@media (max-width: 768px) {

/* ════════════════════════════════════════════════════════════
   1. STRONY TEKSTOWE (użytkownicy, statystyki, dashboard, login)
      — te strony używają min-height:100vh więc scrollują same.
      — NIE ruszamy body na stronach z mapą!
   ════════════════════════════════════════════════════════════ */

  /* Strony z klasą .page mogą swobodnie scrollować */
  .page {
    padding: 12px !important;
    overflow-y: auto !important;
  }

  /* Strony bez mapy — body może rosnąć */
  body:not(:has(#mapa-iframe)):not(:has(#map-wrapper)) {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }


/* ════════════════════════════════════════════════════════════
   2. TOPBAR — wszystkie panele
   ════════════════════════════════════════════════════════════ */

  #topbar {
    height: auto !important;
    min-height: 48px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .logo span { display: none !important; }

  .topbar-btn, .btn-logout, .btn-back {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  .topnav {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .topnav-right {
    width: 100% !important;
    justify-content: flex-end !important;
  }


/* ════════════════════════════════════════════════════════════
   3. PANEL HANDLOWIEC — sidebar + mapa w iframe
      Sidebar: 38vh góra, iframe mapy: reszta (62vh minus topbar)
   ════════════════════════════════════════════════════════════ */

  /* Układ główny — kolumna */
  #layout {
    flex-direction: column !important;
    overflow: hidden !important;
    height: calc(100vh - 48px) !important;
  }

  /* Sidebar — górna część, scrollowalny */
  #sidebar {
    width: 100% !important;
    max-width: 100% !important;
    height: 38vh !important;
    min-height: 38vh !important;
    max-height: 38vh !important;
    flex-shrink: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid #2a2d3a !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Zakładki w sidebarze */
  #tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-shrink: 0 !important;
  }

  .tab {
    min-height: 40px !important;
    padding: 10px 8px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* IFRAME MAPY (handlowiec) — zajmuje całą resztę */
  #mapa-iframe {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    border: none !important;
    display: block !important;
  }


/* ════════════════════════════════════════════════════════════
   4. MAPA SIECI — pełnoekranowa mapa Leaflet
   ════════════════════════════════════════════════════════════ */

  /* Wrapper mapy — pełna wysokość po topbarze */
  #map-wrapper {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    position: relative !important;
  }

  /* Kontener Leaflet */
  #map {
    width: 100% !important;
    height: 100% !important;
    min-height: 60vh !important;
  }

  /* Kontrolki zoomu Leaflet — większe dla palca */
  .leaflet-control-zoom a {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 20px !important;
  }

  /* Panel boczny mapy sieci */
  #mapa-sidebar, .map-sidebar {
    width: 100% !important;
    max-height: 35vh !important;
    overflow-y: auto !important;
    border-right: none !important;
    border-bottom: 1px solid #2a2d3a !important;
  }


/* ════════════════════════════════════════════════════════════
   5. FORMULARZE
   ════════════════════════════════════════════════════════════ */

  .row2 { grid-template-columns: 1fr !important; }
  .row3 { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }

  .field input,
  .field select,
  .field textarea {
    padding: 11px 14px !important;
    font-size: 16px !important;
    min-height: 44px !important;
  }

  .btn, .btn-primary, .btn-secondary,
  .btn-ghost, .btn-add, .tab-btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }

  .search-box {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 44px !important;
  }

  .filter-select {
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  .toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .toolbar-left { flex-wrap: wrap !important; gap: 8px !important; }


/* ════════════════════════════════════════════════════════════
   6. SIATKI I KARTY
   ════════════════════════════════════════════════════════════ */

  .users-grid { grid-template-columns: 1fr !important; }

  .stats-strip {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .stats-strip .stat-card {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
  }

  .panels {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .card { padding: 14px 12px !important; }
  .card-icon { font-size: 22px !important; margin-bottom: 8px !important; }
  .card-name { font-size: 13px !important; }
  .card-desc { font-size: 11px !important; }


/* ════════════════════════════════════════════════════════════
   7. TABELE (dashboard zatwierdzania)
   ════════════════════════════════════════════════════════════ */

  .table-wrap, table {
    width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
    -webkit-overflow-scrolling: touch !important;
  }

  table tbody tr td {
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
  }

  table thead tr th {
    font-size: 11px !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }


/* ════════════════════════════════════════════════════════════
   8. HARMONOGRAM — kalendarz
   ════════════════════════════════════════════════════════════ */

  .calendar-grid, .cal-grid {
    min-width: 320px !important;
    overflow-x: auto !important;
  }

  .faza-card, .phase-card {
    padding: 10px 12px !important;
  }


/* ════════════════════════════════════════════════════════════
   9. MODALE
   ════════════════════════════════════════════════════════════ */

  .modal, .modal-box {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    margin: 20px auto !important;
    border-radius: 12px !important;
  }


/* ════════════════════════════════════════════════════════════
   10. DROBNE ELEMENTY
   ════════════════════════════════════════════════════════════ */

  .welcome h1 { font-size: 20px !important; }
  .welcome p  { font-size: 13px !important; }

  .user-badge { gap: 8px !important; }
  .user-badge > div > div:last-child { display: none !important; }

  #toast {
    bottom: 24px !important;
    left: 12px !important;
    right: 12px !important;
    text-align: center !important;
    font-size: 13px !important;
  }

} /* koniec @media 768px */


/* Bardzo małe ekrany < 380px */
@media (max-width: 380px) {
  .panels { grid-template-columns: 1fr !important; }
  .stats-strip .stat-card { flex: 1 1 100% !important; }
  .tab { font-size: 9px !important; padding: 8px 5px !important; }
  #sidebar {
    height: 35vh !important;
    min-height: 35vh !important;
    max-height: 35vh !important;
  }
}