/*
 * responsive.css — VolleyDesk
 * Globalna responsywność dla wszystkich stron używających styl2.css
 * Dołącz po styl2.css: <link rel="stylesheet" href="/assets/css/responsive.css">
 *
 * Breakpointy:
 *   xs:  < 480px  — telefon pionowy (mały)
 *   sm:  < 640px  — telefon pionowy
 *   md:  < 900px  — telefon poziomy / mały tablet
 *   lg:  < 1100px — tablet
 */

/* ===================================================================
   GLOBALNE POPRAWKI (wszystkie rozmiary)
   =================================================================== */

/* Zapobiegaj poziomemu scrollowi */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Przyciski — minimalna wielkość dotyku */
.btn, button {
  min-height: 36px;
  touch-action: manipulation;
}

/* Tabele — base */
table {
  width: 100%;
}

/* ===================================================================
   TABLET (< 1100px)
   =================================================================== */
@media (max-width: 1100px) {
  .wrap, .container {
    padding: 0 16px;
  }

  /* Nawigacja topbar — zawijaj */
  .topbar nav {
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* ===================================================================
   MAŁY TABLET / TELEFON POZIOMY (< 900px)
   =================================================================== */
@media (max-width: 900px) {
  /* Wrap */
  .wrap, .container {
    padding: 0 12px;
  }
  main.container {
    padding-top: 1.2rem;
    padding-bottom: 1.5rem;
  }

  /* Siatka 2-kolumnowa → 1 kolumna */
  .grid-2,
  .grid2,
  [class*="grid-2"] {
    grid-template-columns: 1fr !important;
  }

  /* Stats grid → 2 kolumny */
  .stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }

  /* Topbar */
  .topbar .bar,
  header.topbar .bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Bar akcji → zawijaj */
  .bar:not(.topbar .bar) {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Tabele — poziomy scroll */
  .table-wrap,
  .tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r, 14px);
  }

  table {
    min-width: 500px;
  }

  /* Karty — mniejszy padding */
  .card {
    padding: 1rem !important;
    border-radius: 10px !important;
  }

  /* Modals — pełna szerokość */
  .modal .modal-content,
  .modal .box {
    width: 96vw !important;
    max-width: 100% !important;
    margin: 10px auto;
  }
}

/* ===================================================================
   TELEFON PIONOWY (< 640px)
   =================================================================== */
@media (max-width: 640px) {

  /* ─── TOPBAR ─── */
  .topbar,
  header.topbar {
    padding: 0.5rem 0 !important;
  }

  .topbar .bar,
  header.topbar .bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0 12px;
  }

  .topbar .bar b,
  header.topbar .logo a {
    font-size: 1.2rem !important;
  }

  /* Nawigacja nav — scroll poziomy */
  .topbar nav,
  header.topbar nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    width: 100%;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .topbar nav::-webkit-scrollbar { display: none; }

  .topbar nav a,
  header.topbar nav a {
    font-size: 0.75rem !important;
    padding: 5px 10px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ─── WRAP ─── */
  .wrap, .container {
    padding: 0 10px;
  }
  main.container {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  /* ─── NAGŁÓWKI ─── */
  h1 { font-size: 1.4rem !important; }
  h2 { font-size: 1.15rem !important; }
  h3 { font-size: 1rem !important; }

  /* ─── KARTY ─── */
  .card {
    padding: 0.85rem !important;
    border-radius: 10px !important;
    margin-bottom: 10px;
  }

  .card .head {
    font-size: 0.85rem;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ─── PRZYCISKI ─── */
  .btn {
    font-size: 0.8rem !important;
    padding: 8px 12px !important;
    min-height: 40px;
  }

  /* Bar z przyciskami — kolumna lub zawijanie */
  .bar:not(.topbar .bar):not(header.topbar .bar) {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Przyciski w barze — pełna szerokość na xs */
  .bar .btn,
  .bar a.btn {
    flex: 1 1 calc(50% - 3px);
    min-width: 120px;
    text-align: center;
    justify-content: center;
  }

  /* ─── STATS ─── */
  .stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }

  .stats .stat {
    padding: 0.75rem !important;
  }

  .stats .stat .val,
  .stats .num {
    font-size: 1.6rem !important;
  }

  /* ─── TABELE ─── */
  .table-wrap,
  .tbl-wrap,
  .card .body table,
  .card table {
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
  }

  thead th {
    font-size: 0.72rem !important;
    padding: 8px 8px !important;
    white-space: nowrap;
  }

  tbody td {
    font-size: 0.8rem !important;
    padding: 8px 8px !important;
  }

  /* ─── FORMULARZE ─── */
  .inp, input[type="text"], input[type="number"],
  input[type="email"], input[type="password"],
  select, textarea {
    font-size: 16px !important; /* zapobiega auto-zoom na iOS */
    min-height: 44px;
    padding: 10px 12px !important;
  }

  /* ─── MODALE ─── */
  .modal-backdrop {
    padding: 10px !important;
    align-items: flex-end !important;
  }

  .modal .modal-content,
  .modal .box,
  .modal .content {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* ─── GRID 3 → 1 ─── */
  .grid3,
  .grid-3,
  [class*="grid-3"] {
    grid-template-columns: 1fr !important;
  }

  /* ─── KV (key-value pairs) ─── */
  .kv > div {
    flex-direction: column;
    gap: 2px;
  }

  /* ─── PILL / BADGE ─── */
  .pill {
    font-size: 0.7rem !important;
    padding: 2px 7px !important;
  }

  /* ─── MSG ─── */
  .msg {
    font-size: 0.85rem;
    padding: 10px 12px;
  }
}

/* ===================================================================
   MAŁY TELEFON (< 400px)
   =================================================================== */
@media (max-width: 400px) {
  .btn {
    font-size: 0.75rem !important;
    padding: 7px 10px !important;
  }

  .bar .btn,
  .bar a.btn {
    flex: 1 1 100%;
  }

  h1 { font-size: 1.2rem !important; }

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

  .stats .stat .val {
    font-size: 1.4rem !important;
  }
}

/* ===================================================================
   MODUŁY SPECYFICZNE
   =================================================================== */

/* ─── DASHBOARD ─── */
@media (max-width: 640px) {
  .tournament-list .row,
  .tournament-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .tournament-actions {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }

  .tournament-actions .btn {
    flex: 1 1 calc(50% - 3px);
  }
}

/* ─── TERMINARZ / SCHEDULE ─── */
@media (max-width: 640px) {
  /* Tabela meczów — scroll poziomy */
  .schedule-table {
    display: block;
    overflow-x: auto;
  }

  /* Kolumna akcji — pionowo */
  .match-actions {
    flex-direction: column;
    gap: 4px;
  }
}

/* ─── TURNIEJ: BRACKET ─── */
@media (max-width: 640px) {
  .bracket-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── BEACH SCHEDULE (styl2) ─── */
@media (max-width: 640px) {
  /* Tabela terminatza — scroll */
  table.beach-schedule {
    min-width: 580px;
  }

  /* Przyciski QR / Tablet */
  .js-qr-live,
  .js-send,
  .js-coach {
    padding: 6px 8px !important;
    font-size: 0.75rem !important;
  }
}

/* ─── PANEL TRENERA (coach.html) — już responsywny, pomijamy ─── */

/* ─── SUPERADMIN ─── */
@media (max-width: 640px) {
  .tbl-wrap {
    font-size: 0.78rem;
  }
}

/* ===================================================================
   DRUKOWANIE — ukryj nawigację
   =================================================================== */
@media print {
  .topbar,
  header.topbar,
  .bar:first-child,
  .btn-back,
  nav {
    display: none !important;
  }

  .wrap, .container {
    padding: 0;
    max-width: 100%;
  }

  .card {
    break-inside: avoid;
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #000 !important;
  }
}