/* =============================================================
   GameVault — mobile.css
   Full mobile responsive overrides for all screens:
   login, navbar, library grid, filter bar, detail panel,
   add game modal (search, results, step 2, manual entry), stats
   Load AFTER theme-light.css in gamevault.html
============================================================= */

/* ── Global: prevent horizontal overflow on all elements ───── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

@media (max-width: 768px) {

  /* =========================================================
     NAVBAR
  ========================================================= */
  .navbar {
    padding: 0 12px;
    gap: 8px;
    height: 52px;
  }
  .game-count { display: none; }
  .logo { font-size: 18px; }
  .navbar-center { gap: 2px; }
  .nav-tab { padding: 5px 12px; font-size: 12px; }
  .navbar-right { gap: 6px; flex-shrink: 0; }
  .btn-add { padding: 6px 10px; font-size: 12px; gap: 5px; }
  .btn-logout { font-size: 11px; padding: 4px 8px; }

  /* =========================================================
     FILTER BAR — horizontal scroll, no wrap
  ========================================================= */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    gap: 6px;
    padding: 8px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100vw;
    width: 100%;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-input,
  .filter-select {
    flex-shrink: 0;
    font-size: 12px;
    padding: 5px 8px;
    height: 32px;
  }
  .search-wrap { flex-shrink: 0; }
  .search-input { width: 130px; }
  .filter-checkbox { flex-shrink: 0; font-size: 12px; white-space: nowrap; }

  /* =========================================================
     STATUS TABS — horizontal scroll
  ========================================================= */
  .status-tabs {
    padding: 8px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100vw;
  }
  .status-tabs::-webkit-scrollbar { display: none; }
  .status-tab { flex-shrink: 0; font-size: 11px; padding: 4px 12px; }

  /* =========================================================
     GAME GRID — 2 columns
  ========================================================= */
  .game-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px;
    width: 100%;
    max-width: 100vw;
  }
  .card-cover { height: 100px; }
  .card-name { font-size: 12px; }
  .card-meta { font-size: 10px; }
  .card-store { font-size: 10px; }
  .card-myrating { font-size: 10px; }

  /* =========================================================
     DETAIL PANEL — full width slide-over
  ========================================================= */
  .detail-panel {
    width: 100%;
    max-width: 100vw;
    left: 0;
    right: 0;
    overflow-x: hidden;
  }
  .panel-cover { height: 150px; }
  .panel-body { padding: 14px 16px; }
  .panel-title { font-size: 17px; }
  .panel-subtitle { font-size: 12px; }
  .panel-meta { font-size: 12px; }
  .meta-row { padding: 8px 12px; font-size: 12px; }
  .meta-val {
    font-size: 12px;
    max-width: 52vw;
    word-break: break-word;
    text-align: right;
  }
  .field-select,
  .field-input { width: 100%; font-size: 13px; }
  .panel-fields { gap: 12px; }
  .panel-actions { gap: 8px; }
  .btn-save { font-size: 13px; padding: 9px; }
  .btn-delete { font-size: 13px; padding: 9px 12px; }

  /* =========================================================
     ADD GAME MODAL — constrained, centered, scrollable
  ========================================================= */
  .modal-overlay {
    padding: 16px;
    align-items: center;
    overflow: hidden;
  }
  .modal {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    max-height: 88vh;
    border-radius: var(--radius-xl);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .modal-header { padding: 14px 16px 12px; }
  .modal-title { font-size: 16px; }
  .modal-step {
    padding: 14px 16px;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  /* Search row */
  .modal-search-row {
    display: flex;
    gap: 6px;
    width: 100%;
    overflow: hidden;
  }
  .modal-search-input {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    padding: 8px 10px;
  }
  .btn-search {
    flex-shrink: 0;
    font-size: 12px;
    padding: 8px 10px;
    white-space: nowrap;
  }

  /* Search results */
  .modal-results { width: 100%; overflow: hidden; }
  .result-row {
    width: 100%;
    overflow: hidden;
    gap: 8px;
    padding: 8px 10px;
  }
  .result-cover {
    width: 34px;
    height: 46px;
    flex-shrink: 0;
    font-size: 16px;
  }
  .result-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .result-name {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .result-sub {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .result-score {
    flex-shrink: 0;
    width: 52px;
    min-width: 52px;
    text-align: right;
  }
  .result-score-val { font-size: 12px; white-space: nowrap; color: var(--accent); }
  .result-score-lbl { font-size: 10px; white-space: nowrap; }

  /* "Add manually" trigger */
  .modal-no-results { font-size: 12px; }

  /* Step 2 — game confirm + form */
  .modal-game-confirm {
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    font-size: 12px;
    padding: 10px 12px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .confirm-label { font-size: 11px; }
  .confirm-val   { font-size: 12px; word-break: break-word; }

  .modal-form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .field-group--deck { grid-column: auto; }
  .field-group { gap: 5px; }
  .field-label { font-size: 10px; }
  .field-select,
  .field-input { font-size: 13px; padding: 8px 10px; width: 100%; }

  .modal-footer {
    padding-top: 12px;
    gap: 8px;
  }
  .btn-cancel,
  .btn-add-confirm { font-size: 13px; padding: 9px 14px; }

  /* Manual entry form */
  #modalManual { overflow-x: hidden; }
  #modalManual input { width: 100%; }

  /* =========================================================
     STATS VIEW
  ========================================================= */
  .stats-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px 12px 0;
  }
  .summary-card { padding: 12px 14px; }
  .summary-value { font-size: 22px; }
  .summary-label { font-size: 10px; }

  .charts-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }
  .chart-card,
  .chart-card--wide,
  .chart-card--full {
    grid-column: auto;
    padding: 14px 16px;
  }
  .chart-title { font-size: 11px; }
  .bar-row-header { font-size: 11px; }
  .hist-label { font-size: 9px; }
  .legend-item { font-size: 11px; }

  /* =========================================================
     LOGIN SCREEN
  ========================================================= */
  .login-overlay { padding: 20px; }
  .login-box { padding: 28px 20px; gap: 16px; max-width: 100%; }
  .login-logo { font-size: 24px; }
  .login-sub { font-size: 12px; }
  .login-input { font-size: 14px; padding: 9px 12px; }
  .login-btn { font-size: 14px; padding: 11px; }

  /* =========================================================
     EMPTY STATE
  ========================================================= */
  .empty-state { padding: 48px 16px; }
  .empty-icon { font-size: 36px; }
  .empty-title { font-size: 16px; }
  .empty-sub { font-size: 12px; }

}