/* =====================================================================
   panel-mobile.css — responsywność panelu „Ptasie Radio".
   Ładowany PO panel.css (nadpisuje; !important tylko tam, gdzie panel
   ma style inline — np. grid-template w .pcards).
   Breakpointy: 768px (tablet) + 480px (telefon). Test: 375px.
   Obszary: FUNDAMENT · PANEL-LAYOUT · PANEL-TABELE · PANEL-INTERAKCJE
   ===================================================================== */

/* ===== OBSZAR: FUNDAMENT — „porządek" na wąskich ekranach ===== */
/* Kluczowe: dzieci grid/flex mają domyślnie min-width:auto (=min-content),
   co rozpycha layout i ucina treść. Zerujemy to globalnie w panelu. */
.pnl-main { min-width: 0; }
.pnl-work { min-width: 0; }
.pnl-sec { min-width: 0; }
.prow > *, .prow.even > *,
.pcards > *,
.prompt-grid > *, .kb-grid > *, .media-grid > *, .kc-grid > *,
.menu-grid > *, .care-grid > * { min-width: 0; }
.tile, .pcard, .kpi2 { min-width: 0; }
.ptable-wrap { max-width: 100%; }          /* tabele scrollują się w środku */
.kpi2__val { overflow-wrap: anywhere; }    /* długie liczby/kwoty nie rozpychają */

/* ===== OBSZAR: PANEL-LAYOUT (tablet i mniej) ===== */
@media (max-width: 768px) {
  /* Topbar — skracamy, by nie rozpychał szerokości */
  .pnl-top { padding: 12px 16px; gap: 10px; }
  .pnl-top h1 { font-size: 1.12rem; min-width: 0; }
  .pnl-top .sync { display: none; }
  .pnl-user small { display: none; }

  /* Karty / KPI — !important bije style inline (repeat(3/4,1fr)) */
  .pcards { grid-template-columns: repeat(2, 1fr) !important; }
  .prow, .prow.even { grid-template-columns: 1fr; }
  .prompt-grid, .kb-grid, .kc-grid { grid-template-columns: 1fr; }
  .kan { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr 1fr; }

  /* Formularze 1-kolumnowo */
  .field-row { grid-template-columns: 1fr; }

  /* Toolbar/segmenty: zawijanie zamiast wypychania */
  .ptoolbar { gap: 10px; }
  .pseg { flex-wrap: wrap; }
}

/* ===== OBSZAR: PANEL-LAYOUT (telefon) ===== */
@media (max-width: 480px) {
  .pnl-work { padding: 16px 14px 64px; }
  .pcards { grid-template-columns: 1fr !important; }
  .menu-grid { grid-template-columns: 1fr; }
  .pnl-h { font-size: 1.05rem; }
  .hero-hi { flex-direction: column; text-align: center; padding: 18px; }
  .hero-hi .bird { width: 64px; height: 64px; }

  /* Topbar minimal: zostaje burger + tytuł + avatar */
  .pnl-user b { display: none; }
  .pnl-top h1 { font-size: 1.02rem; }

  /* Modale niemal pełnoekranowe */
  .modal { padding: 0; align-items: flex-end; }
  .modal__card { max-width: 100%; width: 100%; max-height: 94vh; border-radius: 22px 22px 0 0; }
  /* Modal plannera (edycja posta) — też bottom-sheet + zawijana stopka (4 przyciski) */
  .pl-modal { padding: 0; align-items: flex-end; }
  .pl-modal__card { width: 100%; max-width: 100%; max-height: 94vh; border-radius: 22px 22px 0 0; }
  .pl-modal__foot { flex-wrap: wrap; }
  .pl-modal__foot .pbtn { flex: 1 1 auto; justify-content: center; }
  /* Kreator postów — siatka 1-kol. + pasek zakładek bez zawijania */
  .kc-grid { grid-template-columns: 1fr; }
  .pl-tabs { overflow-x: auto; scrollbar-width: none; }
  .pl-tabs button { padding: 10px 12px; font-size: .82rem; white-space: nowrap; flex: none; }
  .pl-tabs svg { width: 15px; height: 15px; }
}

/* ===== OBSZAR: PANEL-TABELE ===== */
/* Tabele zawsze przewijają się poziomo w swoim wrapperze; na telefonie
   lżejszy padding, bez zawijania nagłówków (czytelność + brak skoków). */
@media (max-width: 768px) {
  .ptable { font-size: .84rem; }
  .ptable th, .ptable td { padding: 10px 12px; white-space: nowrap; }
  .ptable td .pbar { min-width: 90px; }
}

/* ===== OBSZAR: PANEL-INTERAKCJE (cele dotykowe ≥ 44px) ===== */
@media (max-width: 768px) {
  .pnl-nav > button, .pnl-group__list button { padding: 12px 12px; }
  .pnl-group__h { padding: 14px 12px 7px; }
  .pbtn { min-height: 42px; }
  .pbtn--sm { min-height: 34px; }
  .pseg button { padding: 8px 14px; }
  .pchip { padding: 8px 14px; }
  .task__chk { width: 26px; height: 26px; }
  .field input, .field select, .field textarea { font-size: 16px; } /* iOS: brak auto-zoom */
  .psearch input, .prompt-search input { font-size: 16px; }
}
@media (max-width: 480px) {
  .pbtn { min-height: 44px; }
  .pnl-burger { width: 44px; height: 44px; }
}