/* Telefony i tablety (do 900 px): menu boczne jako wysuwany panel, kompaktowy górny pasek,
   większe cele dotyku, tabele przewijane w poziomie we własnym pudełku. Ładowany po brand.css. */
.menu-toggle, .topbar-brand, .nav-backdrop { display: none; }
.x-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
/* pudełko z przewijaniem jest kontenerem dla sticky: nagłówek przyklejony pod górnym paskiem strony
   przesuwałby się w nim o wysokość paska i nachodził na pierwszy wiersz */
.x-scroll table.list thead th { top: 0; }

@media (max-width: 900px) {
  .app, :root[data-sidebar="collapsed"] .app { grid-template-columns: minmax(0, 1fr); }

  .sidebar, :root[data-sidebar="collapsed"] .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(86vw, 320px); height: 100%;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .5rem;
    padding: calc(.6rem + env(safe-area-inset-top, 0px)) .7rem calc(1rem + env(safe-area-inset-bottom, 0px)) calc(.7rem + env(safe-area-inset-left, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-105%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s;
    box-shadow: 0 0 40px rgba(5, 10, 20, .35);
  }
  :root.nav-open .sidebar { transform: none; visibility: visible; transition: transform .25s ease; }
  .sidebar nav, .nav-group, :root[data-sidebar="collapsed"] .sidebar .nav-group { flex-direction: column; flex-wrap: nowrap; }
  .sidebar .nav-label, :root[data-sidebar="collapsed"] .sidebar .nav-label { display: block; }
  :root[data-sidebar="collapsed"] .sidebar .brand-name,
  :root[data-sidebar="collapsed"] .sidebar .nav-item span { display: inline; }
  :root[data-sidebar="collapsed"] .sidebar .nav-item { justify-content: flex-start; }
  :root[data-sidebar="collapsed"] .sidebar .nav-group { padding-top: 0; border-top: 0; }
  .sidebar .nav-item { min-height: 44px; font-size: .98rem; }
  .collapse-btn { display: none; }
  .brand { min-height: 56px; padding: 0 .5rem; margin-bottom: .2rem; }

  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(5, 10, 20, .5); }
  .nav-backdrop[hidden] { display: none; }
  :root.nav-open, :root.nav-open body { overflow: hidden; }

  .topbar { height: 60px; min-height: 60px; gap: .5rem; padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); }
  .menu-toggle { display: grid; flex: none; }
  .topbar-brand { display: flex; align-items: center; flex: none; }
  .topbar-brand img { width: 30px; height: 30px; }
  .search-trigger { width: 44px; min-width: 0; height: 44px; padding: 0; justify-content: center; flex: none; margin-right: auto; }
  .search-trigger span, .search-trigger kbd { display: none; }
  .icon-btn, .menu-toggle { width: 44px; height: 44px; }
  .avatar { width: 40px; height: 40px; }
  .topbar-actions { gap: .4rem; }
  .topbar-actions .btn { min-height: 44px; }
  .menu-panel { max-width: calc(100vw - 24px); }
  .menu-panel a, .menu-link { min-height: 44px; }
  .topbar-brand { min-height: 44px; }

  .content { padding: 1rem max(12px, env(safe-area-inset-right, 0px)) 2.5rem max(12px, env(safe-area-inset-left, 0px)); }
  .btn { min-height: 44px; }
  /* siatki na telefonie: jedna kolumna, która nie rozpycha się do szerokości zawartości */
  .grid2, .grid3, .card3, .form-grid, .grid-main-side, .module-grid { grid-template-columns: minmax(0, 1fr); }
  .grid2 > *, .grid3 > *, .card3 > *, .form-grid > *, .grid-main-side > *, .module-grid > * { min-width: 0; }
  /* paski filtrów przewijane w poziomie zamiast poszerzać stronę */
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
  .seg > * { flex: none; }
  .filterbar { max-width: 100%; min-width: 0; flex-wrap: wrap; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 44px; font-size: 16px; }
  input, select, textarea { max-width: 100%; }
  .palette { margin-top: 8vh; }
}

@media (max-width: 480px) {
  .topbar-actions details.menu:first-child summary.btn { padding-inline: .7rem; font-size: 0; gap: 0; }
  .topbar-actions details.menu:first-child summary.btn svg { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none !important; }
}