/* ==================================================================== */
/*  NINJA BOOST — mobile layer                                           */
/*  Loaded LAST (after modern.css). Desktop is untouched: every rule     */
/*  below sits in a media query, except the tiny shared helpers.         */
/*   - customer dashboard: see drawer.css (top bar + hamburger menu)    */
/*   - nothing overflows sideways; forms are touch sized                 */
/*   - secondary table columns drop out on phones                        */
/* ==================================================================== */

/* ---------- shared helpers (all sizes) ---------- */
.stack { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.rs-card, .rs-out, .rs-card > *, .rs-out > * { min-width: 0; }
.rs-card, .rs-out { grid-template-columns: minmax(0, 1fr); }
.rs-check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.rs-check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

/* ==================================================================== */
/*  Tablets and phones                                                   */
/* ==================================================================== */
@media (max-width: 820px) {
  /* iOS zooms the page when a field under 16px gets focus */
  input, select, textarea, .rs-input { font-size: 16px; }
  .btn { min-height: 40px; }
  .btn-mini, .btn-sm { min-height: 36px; }


  /* ---------------- reseller pages ---------------- */
  .rs-toolbar { flex-wrap: wrap; }
  .rs-toolbar .rs-input { max-width: none; flex: 1 1 100%; }
  .rs-row { gap: 10px; }
  .rs-row > .rs-field { flex: 1 1 100%; }
  .rs-row > .btn { flex: 1 1 100%; }
  .rs-card { padding: 14px; gap: 12px; }
  .rs-copy { flex-wrap: wrap; }
  .rs-copy .rs-input { flex: 1 1 100%; min-width: 0; }
  .rs-seg { display: flex; width: 100%; }
  .rs-seg button { flex: 1; padding: 9px 8px; font-size: 13px; }
  .rs-actions { gap: 8px; }
  .rs-actions .btn { flex: 1 1 auto; }

  /* KPI trio stays on one line, compact */
  .rs-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .rs-kpi { padding: 12px 10px; }
  .rs-kpi b { font-size: 19px; }
  .rs-kpi span { font-size: 11.5px; }
  .rs-kpi small { display: none; }

  /* tables scroll inside their card, never the page */
  .rs-table table { font-size: 12.5px; }
  .rs-table td, .rs-table th { padding: 8px 9px; }
  .rs-table td { white-space: nowrap; }
  .rs-table td.rs-mono, .rs-table td .rs-mono { white-space: nowrap; }

  /* ---------------- admin ---------------- */
  .view { padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); }
  .top { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .actions { gap: 8px; }
  .actions .btn { flex: 1 1 auto; }
  .row > * { flex: 1 1 100%; }
  .seg { display: flex; width: 100%; }
  .seg button { flex: 1; padding: 8px; }
  .tbl-wrap table { font-size: 12.5px; }
  td, th { padding-left: 8px; padding-right: 8px; }
}

/* ==================================================================== */
/*  Phones                                                               */
/* ==================================================================== */
@media (max-width: 640px) {
  .hide-sm { display: none !important; }
  .card, .sec-card { border-radius: 12px; }
  .card { padding: 14px; }

  /* admin KPIs: two per row instead of a very tall single column */
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px; }
  .kpi b { font-size: 21px; }
  .kpi small { font-size: 11px; }
  .grid .grid.g4 { gap: 8px; }
  .card .card.kpi { padding: 10px; }          /* KPIs nested in a card */
  .chart { max-height: 150px; }
}

@media (max-width: 380px) {
  .rs-kpi b { font-size: 17px; }
}


/* ==================================================================== */
/*  Mobile fixes                                                         */
/* ==================================================================== */
@media (max-width: 820px) {
  /* Toast: full width instead of a narrow box. */
  .toast {
    left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: auto; max-width: 520px; margin: 0 auto; transform: none;
    text-align: center; overflow-wrap: anywhere; z-index: 80;
  }

  /* Card header with an action button: let the button drop under the text. */
  .sec-head-split { flex-wrap: wrap; }
  .sec-head-split > .buy-pill { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 380px) {
  /* Public header (logo + two buttons) was 32px wider than a 320px screen. */
  .public-view .header { gap: 8px; padding: 10px 10px; }
  .public-view .logo { min-width: 0; gap: 8px; font-size: 17px; }
  .public-view .logo-word { overflow: hidden; text-overflow: ellipsis; }
  .public-view .header-right { gap: 6px; flex: none; }
  .public-view .header-right .btn { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 820px) {
  /* Filter pills (All / Unused / Redeemed / SellAuth / Premium…): wrap instead of being crushed */
  .seg, .rs-seg { flex-wrap: wrap; }
  .seg button, .rs-seg button { flex: 1 1 auto; white-space: nowrap; }
}