/* mobile-scorekaart.css — mobiele optimalisaties voor scorekaart- en rondes-pagina's
   Geladen NA app.css. Alleen @media-regels (en helper-classes). */

/* ============================================================
   GLOBAAL (≤ 720px) — geldt voor alle scorekaart-bladen.
   Focus: iOS-zoom voorkomen, touch targets, compactere padding.
   ============================================================ */
@media (max-width: 720px) {

  /* --- Container & cards compacter --- */
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 16px !important;
    /* Extra ruimte onderaan voor sticky action bar + autosave indicator */
    padding-bottom: 120px !important;
  }
  .card { padding: 12px 14px !important; }
  .card.qx-sheet,
  .card.sw-sheet,
  .card.wt-sheet,
  .card.kk-sheet,
  .card.sj-sheet,
  .card.f7-sheet,
  .card.cs-sheet,
  .card.n9-sheet { padding: 12px 12px !important; }

  /* --- Page header compacter --- */
  .page-header h1 { font-size: 24px !important; }

  /* --- Alle inputs: voorkom iOS zoom, vergroot touch target --- */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
  }
  /* Specifiek voor cel-inputs binnen tabellen / score-grids: ook 16px,
     iets ruimer padding zodat 44px touch height haalbaar is */
  .rk-table td input,
  .sj-table td input,
  .f7-table td input,
  .wz-table td input,
  .sk-table td input,
  .kj-table input.kj-num,
  .kj-table select.kj-sel,
  .sw-grid input.sw-in,
  .sw-sci-lbl input,
  .wt-block input,
  .cs-grid input.cs-in,
  .lc-in,
  .tc-table td input[type=text],
  .tc-table td select,
  .n9-cell input {
    font-size: 16px !important;
    padding: 8px 8px !important;
    min-height: 40px !important;
  }
  /* Cell-inputs die heel smal waren — geef ze wat meer breedte op mobiel */
  .sw-grid input.sw-in,
  .cs-grid input.cs-in,
  .wt-block input,
  .sw-sci-lbl input {
    width: 72px !important;
  }
  .lc-in { width: 64px !important; }
  .kj-table input.kj-num { width: 72px !important; }

  /* Number-spinners helemaal weg (we hebben ±-knoppen / inputmode=numeric) */
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  input[type="number"] { -moz-appearance: textfield; }

  /* --- Touch targets: ± / kk-btn / sign-knoppen --- */
  .cs-in-wrap .cs-sign,
  .lc-sign {
    min-width: 36px !important;
    min-height: 40px !important;
    font-size: 18px !important;
  }
  .kk-counter .kk-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
  }
  .kk-counter .kk-val {
    min-width: 36px !important;
    font-size: 20px !important;
  }

  /* --- Knoppen: minimaal 40px touch hoogte --- */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; padding: 6px 12px; }

  /* --- Tabellen: compactere cell-padding, kleinere header-tekst --- */
  .rk-table th, .rk-table td,
  .sj-table th, .sj-table td,
  .f7-table th, .f7-table td,
  .wz-table th, .wz-table td,
  .sk-table th, .sk-table td,
  .tc-table th, .tc-table td {
    padding: 6px 6px !important;
  }
  .kj-table th, .kj-table td { padding: 8px 6px !important; }
  .kj-table thead th { padding: 6px 4px !important; font-size: 10px !important; }
  .kj-table tfoot th { padding: 10px 8px !important; font-size: 17px !important; }

  /* Sticky linker-kolom (ronde-label) zodat speler-kolommen rechts kunnen scrollen */
  .rk-table th:first-child,
  .rk-table td:first-child,
  .sj-table th:first-child,
  .sj-table td:first-child,
  .f7-table th:first-child,
  .f7-table td:first-child,
  .wz-table th:first-child,
  .wz-table td:first-child,
  .sk-table th:first-child,
  .sk-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 2;
    min-width: 56px !important;
    max-width: 80px;
  }
  .rk-table thead th:first-child,
  .sj-table thead th:first-child,
  .f7-table thead th:first-child,
  .wz-table thead th:first-child,
  .sk-table thead th:first-child,
  .rk-table tfoot th:first-child,
  .sj-table tfoot th:first-child,
  .f7-table tfoot th:first-child,
  .wz-table tfoot th:first-child,
  .sk-table tfoot th:first-child {
    background: var(--bg);
    z-index: 3;
  }

  /* Totaal-rij groter en goed leesbaar */
  .rk-table tfoot th,
  .sj-table tfoot th,
  .f7-table tfoot th,
  .wz-table tfoot th,
  .sk-table tfoot th {
    font-size: 18px !important;
  }

  /* --- Speler-naam inputs: max-width opheffen, full-width op mobiel --- */
  #rk-player-inputs .rk-pname,
  #sj-player-inputs .sj-pname,
  #f7-player-inputs .f7-pname,
  #wz-player-inputs .wz-pname,
  #sk-player-inputs .sk-pname,
  .qx-sheet .qx-name,
  .sw-sheet .sw-name,
  .wt-sheet .wt-name,
  .kk-sheet .kk-name,
  .n9-sheet .n9-name,
  .cs-sheet .cs-name,
  .lc-pname {
    max-width: none !important;
    flex: 1 1 140px;
  }

  /* --- Grids met auto-fit minmax(180-220px,1fr): zet naar 1 of 2 kolommen op mobiel --- */
  .cs-grid,
  .sw-grid,
  .wt-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .cs-grid label,
  .sw-grid label,
  .wt-block label {
    font-size: 15px !important;
  }

  /* --- Qwixx: cellen groter (touch) en scroll-container --- */
  .qx-cell {
    width: 40px !important;
    height: 40px !important;
    font-size: 15px !important;
  }
  .qx-pen-cells .qx-cell {
    width: 32px !important;
    height: 32px !important;
  }
  .qx-row { gap: 5px !important; padding-bottom: 4px; }
  .qx-row-label { min-width: 44px !important; }

  /* --- Keer-op-keer: counters groter --- */
  .kk-grid { gap: 10px 12px !important; }

  /* --- NMBR 9: 5 kolommen i.p.v. 10 op smal scherm --- */
  .n9-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 8px !important; }
  .n9-cell .n9-num { font-size: 20px !important; }
  .n9-cell input { font-size: 16px !important; padding: 6px !important; min-height: 36px; }

  /* --- Skull King / Wizard: drie inputs naast elkaar werd te smal --- */
  .sk-cell, .wz-cell {
    flex-wrap: wrap !important;
    gap: 3px !important;
    min-width: 120px;
  }
  .sk-cell input, .wz-cell input {
    width: 44px !important;
    min-width: 36px !important;
  }
  .sk-score, .wz-score { min-width: 100% !important; font-size: 15px !important; text-align: right !important; }

  /* --- Tichu: declaratie-kolom compacter --- */
  .tc-decl { font-size: 12px !important; gap: 3px 6px !important; }
  .tc-decl select { min-height: 36px; min-width: 48px; }

  /* --- Klaverjassen team-boxes stapelen --- */
  .kj-team-boxes { gap: 8px !important; }
  .kj-vs { transform: rotate(90deg); padding: 4px 0 !important; }
  .kj-table { font-size: 14px !important; }
  .kj-table .kj-rscore { font-size: 15px !important; }
  .kj-player-card { padding: 12px 14px !important; }
  .kj-player-card .kj-pname-input { font-size: 16px !important; }

  /* --- Challenges grid: cellen groter (touch) --- */
  .challenge-grid {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important;
    gap: 6px !important;
  }
  .ch-cell { font-size: 17px !important; min-height: 48px; }

  /* --- Lost Cities: 2 spelers naast elkaar wordt 1 kolom op smal scherm --- */
  .lc-board { grid-template-columns: 1fr !important; }
  .lc-round-card { padding: 14px 14px !important; }
  .lc-colors { grid-template-columns: 1fr 1fr !important; gap: 6px 10px !important; }
  .lc-final-score { font-size: 40px !important; }

  /* --- 7 Wonders: science-block niet meer full-width op grid (grid is 1-kol) --- */
  .sw-science { grid-column: 1 / -1 !important; }

  /* --- Restore-banner & autosave-indicator: niet over sticky bottom-bar heen --- */
  #sk-restore-banner { font-size: 13px; }
  #sk-save-indicator {
    bottom: auto !important;
    top: 12px !important;
    right: 12px !important;
    font-size: 12px !important;
  }

  /* --- Sticky bottom action bar voor groep-scorekaart & groep-rondes-kaart --- */
  .sk-mobile-actionbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(33, 37, 46, 0.96);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--border);
    margin: 0 !important;
  }
  .sk-mobile-actionbar .btn {
    flex: 1;
    min-height: 44px;
    justify-content: center;
    font-size: 15px;
  }

  /* Form-grid (gespeeld op + notities) stapelen */
  .form-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* ============================================================
   EXTRA SMAL (≤ 420px) — extreem compact, voor kleine telefoons.
   ============================================================ */
@media (max-width: 420px) {
  .container { padding-left: 8px !important; padding-right: 8px !important; }
  .card { padding: 10px 12px !important; }
  .page-header h1 { font-size: 22px !important; }

  /* Qwixx nog steeds tikbaar maar iets compacter */
  .qx-cell { width: 36px !important; height: 36px !important; font-size: 14px !important; }

  /* Cel-inputs iets smaller om scroll te beperken */
  .rk-table td input,
  .sj-table td input,
  .f7-table td input { width: 56px !important; }
  .sk-cell input, .wz-cell input { width: 40px !important; }

  /* NMBR 9: 4 kolommen op heel kleine schermen, of houd op 5 — laten we 5 houden */

  /* Klaverjassen rondes-tabel scrollt al horizontaal — verklein cell-padding extra */
  .kj-table th, .kj-table td { padding: 6px 4px !important; }
}

/* ============================================================
   HORIZONTALE SCROLL: zorg dat tabel-wrappers altijd scrollen
   (geldt overall — geen media-query nodig, want overflow-x staat al
   inline op de wrappers, dit is extra veiligheid).
   ============================================================ */
.rk-table, .sj-table, .f7-table, .wz-table, .sk-table, .tc-table, .kj-table {
  min-width: 100%;
}