/* Component styles for BADNITY. Uses tokens from tokens.css. See docs/07-ui-design-system.md. */

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-6);
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.spacer { flex: 1; }
.muted { color: var(--color-text-muted); }
.pad { padding: var(--space-4); max-width: 96vw; margin: 0 auto; }

.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  max-width: 480px;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-primary-hover); }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.btn-warning {
  background: var(--color-warning);
  color: #fff;
  border: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.btn-mini {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
  cursor: pointer;
  margin-left: var(--space-1);
}
.btn-mini-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-mini-ok { background: var(--color-success); color: #fff; border-color: var(--color-success); }

/* Outlined button (e.g. auto-match in queue) */
.btn-outline { background: var(--color-bg); color: var(--color-primary);
  border: 1px solid var(--color-primary); border-radius: var(--radius-sm); cursor: pointer; }

/* Pastel level chips */
.lvl { border-radius: 999px; padding: 1px var(--space-2); font-weight: 600; font-size: var(--fs-caption); color: #1d1d1f; }
.lvl-1 { background: #D6EAF8; } /* BB */
.lvl-2 { background: #D5F5E3; } /* BG */
.lvl-3 { background: #E8F8D0; } /* BG+ */
.lvl-4 { background: #FCF3CF; } /* N- */
.lvl-5 { background: #FDEBD0; } /* N */
.lvl-6 { background: #FADBD8; } /* N/S */
.lvl-7 { background: #E8DAEF; } /* S */

.amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.amount.is-paid { color: var(--color-success); }
.disc { color: var(--color-danger); font-size: var(--fs-caption); margin-left: 4px; }
.games { font-size: var(--fs-caption); color: var(--color-text-muted); white-space: nowrap; }
.games .fa-table-tennis-paddle-ball { color: var(--color-primary); }

/* Match history */
.match-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-1);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.match-row .mno { font-weight: 700; color: var(--color-primary); min-width: 60px; }
.match-row .mcourt { font-size: var(--fs-caption); color: var(--color-text-muted); min-width: 60px; }
.match-row .mteams { flex: 1; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.match-row .vs { color: var(--color-text-muted); font-size: var(--fs-caption); }

/* Sort bar */
.sortbar { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.sort-btn { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 2px var(--space-2); font-size: var(--fs-caption); cursor: pointer; }
.sort-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Roster rows: wait + amount columns align */
.roster .wait { min-width: 60px; text-align: right; }
.bad-qrow { flex-wrap: wrap; }

/* Horizontal scroll for the roster (mobile): keep each row on one line,
   name stretches so the rest stays right-aligned (as before). */
#bad-players, #bad-paid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.roster { min-width: 100%; width: max-content; }
.roster .bad-row { width: 100%; flex-wrap: nowrap; white-space: nowrap; }
.roster .bad-row .nm { flex: 1 0 auto; }
.roster .acts { flex-wrap: nowrap; flex: 0 0 auto; }

/* Searchable roster select (SweetAlert2 popup) */
.rs-search, .rs-level { width: 100%; margin-bottom: var(--space-2); }
.rs-list { max-height: 260px; overflow-y: auto; text-align: left; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: var(--space-2); }
.rs-item { display: flex; align-items: center; gap: var(--space-2); padding: 4px 2px; }
.rs-item .rs-lvl { color: var(--color-primary); font-size: var(--fs-caption); margin-left: auto; }
.rs-count { margin-top: var(--space-2); font-size: var(--fs-caption); color: var(--color-text-muted); }
.rs-disabled { opacity: .4; }

/* PromptPay QR */
.pp-qr { display: flex; justify-content: center; padding: var(--space-3); }
.pp-qr img, .pp-qr canvas { margin: 0 auto; }

/* Courts & queue blocks (no card) */
.courts-block, .queue-block { margin-bottom: var(--space-4); }
.cost-section > summary { cursor: pointer; list-style: revert; user-select: none; margin-bottom: 0; }
.cost-section > summary h3 { display: inline; }
.cost-section[open] > summary { margin-bottom: var(--space-3); }
.sub-title { margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-body); color: var(--color-text-muted);
  border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
#bad-paid .bad-row { opacity: .7; }
.row-form { margin-top: var(--space-4); }
.btxt { font-size: var(--fs-caption); }
@media (max-width: 520px) { .btxt { display: none; } }

.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-caption); color: var(--color-text-muted); }

input, select {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}

.sess-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.sess-head h2 { margin: 0; font-size: var(--fs-h1); }

/* Summary strip */
.summary { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 auto 0 var(--space-4); }
.sess-head { flex-wrap: wrap; }
.summary span { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 999px; padding: var(--space-1) var(--space-3); font-size: var(--fs-caption); }
.summary b { color: var(--color-primary); }

/* Sections as cards */
.section { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4); }
.sec-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); }
.sec-head h3 { margin: 0; font-size: var(--fs-title); }

.row-form { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.row-form input[name="name"] { flex: 1; min-width: 160px; }

.cols { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
@media (min-width: 820px) { .cols { grid-template-columns: 1fr 1fr; } }
.cols .section { margin-bottom: 0; }

/* Queue groups (คิวที่ N) */
.qgroup { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.qgroup-h { font-weight: 700; color: var(--color-primary); min-width: 64px; }
.qgroup-players { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1; }
.qp { background: var(--color-surface); border-radius: var(--radius-sm); padding: 2px var(--space-2); font-size: var(--fs-caption); }
.qgroup-actions { display: flex; gap: var(--space-2); }
.btn-sm { font-size: var(--fs-caption); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  border: none; cursor: pointer; }
.st-queued { color: var(--color-primary); }

.bad-list, .bad-queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.bad-queue { counter-reset: none; }

.bad-row, .bad-qrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.bad-row .nm, .bad-qrow .nm { flex: 1; }
.bad-row .lvl, .bad-qrow .lvl { text-align: center; }
.pos { font-weight: 700; min-width: 22px; text-align: center; }
.wait { font-size: var(--fs-caption); }

.courts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
@media (max-width: 380px) { .courts { grid-template-columns: 1fr; } }

.court {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.court.playing { border-color: var(--color-success); }
.court-h { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.timer { font-variant-numeric: tabular-nums; color: var(--color-success); font-weight: 700; }
.teams { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.team { flex: 1; min-width: 90px; }
.vs { color: var(--color-text-muted); font-size: var(--fs-caption); }

.st { font-size: var(--fs-caption); padding: 2px var(--space-2); border-radius: var(--radius-sm); }
.st-waiting { color: var(--color-primary); }
.st-playing { color: var(--color-success); }
.st-resting { color: var(--color-warning); }
.st-left { color: var(--color-text-muted); }
.acts { display: flex; }

.remark { display: block; font-size: var(--fs-caption); color: var(--color-text-muted); font-style: italic; }
.court-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.shuttle { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-caption); }
.shuttle b { min-width: 16px; text-align: center; }

.row-check { flex-direction: row !important; align-items: center; gap: var(--space-2); }

.paysec { margin-top: var(--space-6); }
.paysec h3 { font-size: var(--fs-body); margin: 0 0 var(--space-2); }
.pay-totals { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3);
  padding: var(--space-3); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.pay-totals .outstanding { color: var(--color-text-muted); }