/* ─────────────────────────────────────────────────────────────────────────────
   PokéStock Live — Settings page styles
   Tabs (incl. grouped seller tabs), list items, toggle switches, batch grid.
   ───────────────────────────────────────────────────────────────────────────── */

/* ─── Tab row (Profile / Payments / Transactions / etc.) ─────────────────── */
.tab-row {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
  padding-bottom: 8px;
  overflow-x: auto;
}
.tab-btn {
  background: none;
  border: none;
  color: var(--mut);
  font-weight: bold;
  cursor: pointer;
  padding: 4px 8px;
  white-space: nowrap;
}
.tab-btn.active {
  color: var(--cool);
  border-bottom: 2px solid var(--cool);
}

/* ─── Grouped seller tabs (gold-tinted cluster within the tab row) ───────── */
.seller-group-wrapper {
  position: relative;
  margin-bottom: 0;
}
.seller-group-label {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.seller-tab-group {
  display: flex;
  gap: 8px;
  border: 1px solid rgba(255, 203, 69, 0.35); /* faint gold border */
  background: rgba(255, 203, 69, 0.08);       /* faint gold fill   */
  padding: 6px 14px 0 14px;
  border-radius: 12px 12px 0 0;
  border-bottom: none;
}
.tab-btn.seller-tab.active {
  color: var(--gold);
  border-bottom: 2px solid var(--gold);
}

/* ─── List items (transactions, etc.) ────────────────────────────────────── */
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.tx-amount { color: var(--gold); font-weight: bold; }
.set-view  { display: block; }

/* ─── Toggle switches ────────────────────────────────────────────────────── */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch input:checked + .slider           { background-color: var(--live); }
.switch input:checked + .slider:before    { transform: translateX(18px); }

.toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--line);
  transition: .3s;
  border-radius: 22px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}
.toggle input:checked + .slider        { background-color: var(--ok); }
.toggle input:checked + .slider:before { transform: translateX(18px); }

/* ─── Batches grid (seller store / lots) ─────────────────────────────────── */
.batch-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.batch-card {
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}

/* ─── Mobile select (hidden on desktop) ──────────────────────────────────── */
.settings-mobile-select {
  display: none;
}

/* ─── Mobile (≤ 640px) ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Settings page chrome */
  #settingsBody    { padding: 16px 12px 32px !important; }
  #settingsContent { padding: 0 !important; }

  /* Tab row: shrink padding, no flex trickery needed — just show the select */
  #settingsPage .tab-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 8px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    border-bottom: none !important;
  }

  /* Hide the tab buttons and seller tab group on mobile */
  .settings-tab-btns  { display: none !important; }
  .settings-seller-tabs { display: none !important; }

  /* Show the mobile select dropdown */
  .settings-mobile-select {
    display: block;
    width: 100%;
    background: var(--surf2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    margin-bottom: 12px;
    cursor: pointer;
  }

  /* Responsive grids: collapse to 1 column */
  .resp-2col { grid-template-columns: 1fr !important; }
  .resp-3col { grid-template-columns: 1fr !important; }
  /* .resp-1col is used on rows that combine inputs with an adjacent button
     (e.g. the schedule add-form's date + title + "+ Add stream" row in
     setSell). On mobile we stack everything vertically so the inputs get
     full width instead of being squeezed against the button. Referenced in
     auction.html since the previous CSS pass, but the rule itself was
     missing — without it the grid stayed at "1fr 1fr auto" on mobile and
     looked broken. */
  .resp-1col { grid-template-columns: 1fr !important; }

  /* Analytics KPI row exception. The KPI cards are compact (a small label
     + a number), so collapsing four cards to one column produces a lot of
     vertical scroll for nothing. Two columns on mobile keeps them scannable
     while still wrapping cleanly within the viewport. Targets only the
     four-up KPI grid via the inline-style template — anything else with
     class="resp-2col" stays single-column. */
  #anaContent .resp-2col[style*="repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Transaction search: stack filters */
  #txSearch { min-width: 0 !important; width: 100%; }

  /* Transaction table: hide on mobile, show card list instead */
  #setTxs .tx-table-wrap { display: none !important; }
  #setTxs .tx-cards-wrap { display: block !important; }
}