/* ==========================================================================
   Bauhaus Component Library — shared primitives (Button / Badge / Card / ...)
   Tokens come from tokens.css (loaded globally before this file).
   New BEM-style modifiers; coexists with legacy .btn-primary / .card classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Button — single-dash modifiers. The variant/size colors live in base.css
   (.btn-primary / .btn-secondary / .btn-danger / .btn-ghost / .btn-sm); the
   <Button> component emits the same single-dash class names so hand-rolled
   markup and the component render identically. Only the sizes/state base.css
   lacks (md, lg, loading) plus the component's spinner/label live here.
   -------------------------------------------------------------------------- */

.btn-md {
  padding: var(--s-sm) var(--s-md);
  font-size: var(--text-xs);
}

.btn-lg {
  padding: var(--s-md) var(--s-lg);
  font-size: var(--text-sm);
}

.btn-loading {
  cursor: progress;
}

.btn__spinner {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

.btn__label {
  display: inline-block;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Badge — small inline label.
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-sm);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  line-height: 1.4;
  border: 2px solid var(--black);
  border-radius: 0;
  background: var(--white);
  color: var(--black);
}

.badge--primary {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--black);
}

.badge--info {
  background: var(--white);
  border-color: var(--blue);
  color: var(--blue);
}

.badge--warning {
  background: var(--bg-pending);
  border-color: var(--yellow);
  color: var(--dark-gray);
}

.badge--danger {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.badge--neutral {
  background: var(--white);
  border-color: var(--mid-gray-light);
  color: var(--mid-gray);
}

/* --------------------------------------------------------------------------
   Card surface — fully-bordered container (distinct from legacy .card which
   uses a single top border for stacked-list layouts).
   -------------------------------------------------------------------------- */

.card-surface {
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 0;
  padding: var(--s-lg);
}

/* Top-border-only variant for stacked-list layouts: matches the visual of
   the legacy .card (single top border, vertical-only padding so content
   aligns flush with the surrounding container's horizontal edges). */
.card-surface--border-top {
  border: none;
  border-top: 2px solid var(--black);
  padding: var(--s-lg) 0;
}

.card-surface--border-top:last-child {
  border-bottom: 2px solid var(--black);
}

.card-surface--interactive {
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.card-surface--interactive:hover {
  background: var(--warm-gray);
}

.card-surface--interactive:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.card-surface--selected {
  background: var(--warm-gray);
  border-color: var(--blue);
}

/* --------------------------------------------------------------------------
   FormField — wraps a labelled input with optional help/error text.
   -------------------------------------------------------------------------- */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  margin-bottom: var(--s-md);
}

.form-field__label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--mid-gray);
  margin: 0;
}

.form-field__required {
  color: var(--red);
  margin-left: 2px;
}

.form-field__control {
  display: block;
}

.form-field__help {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--mid-gray);
}

.form-field__error {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--red);
  font-weight: 500;
}

.form-field--error .text-input {
  border-color: var(--red);
}

/* --------------------------------------------------------------------------
   TextInput — base input styled distinctly from the global attribute selector
   so it can be used inside FormField without inheriting form-group spacing.
   -------------------------------------------------------------------------- */

.text-input {
  width: 100%;
  padding: var(--s-sm);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--black);
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 0;
  transition: border-color var(--transition);
}

.text-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: var(--focus-ring);
}

.text-input:disabled {
  background: var(--warm-gray);
  cursor: not-allowed;
  opacity: 0.7;
}

.text-input--invalid {
  border-color: var(--red);
}

.text-input--invalid:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 2px var(--red-focus-ring);
}

/* --------------------------------------------------------------------------
   Toggle — Bauhaus switch (sharp corners, 2px black border).
   -------------------------------------------------------------------------- */

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  cursor: pointer;
}

.toggle--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.toggle__track {
  position: relative;
  width: 36px;
  height: 20px;
  padding: 0;
  border: 2px solid var(--black);
  background: var(--white);
  cursor: pointer;
  transition: background var(--transition);
}

.toggle__track:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.toggle__track:disabled {
  cursor: not-allowed;
}

.toggle__track--on {
  background: var(--blue);
}

.toggle__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--black);
  transition: transform var(--transition);
}

.toggle__track--on .toggle__thumb {
  background: var(--white);
  transform: translateX(16px);
}

.toggle__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--black);
}

/* --------------------------------------------------------------------------
   Modal — size modifiers + body slot. Reuses base.css `.modal-overlay`,
   `.modal`, `.modal-header`, `.modal-close`.
   -------------------------------------------------------------------------- */

/* `.modal.modal--*` (compound selector) raises specificity above base.css's
   `.modal { max-width: 480px; min-width: 320px }` so size modifiers actually
   win. Drop these prefixes only if base.css's `.modal` rule is also removed. */
.modal.modal--sm { max-width: 360px; min-width: 280px; }
.modal.modal--md { max-width: 480px; min-width: 320px; }
.modal.modal--lg { max-width: 720px; min-width: 320px; }

.modal__body {
  font-family: var(--font-sans);
  color: var(--black);
}

/* --------------------------------------------------------------------------
   ConfirmDialog
   -------------------------------------------------------------------------- */

.confirm-dialog__message {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--dark-gray);
  line-height: 1.5;
  margin: 0 0 var(--s-lg);
}

.confirm-dialog__actions {
  display: flex;
  gap: var(--s-sm);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Tabs — generalized from the legacy `.sequence-player-tabs` / `.tab-btn`
   pattern. Distinct class names so existing pages keep their markup.
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  flex-direction: column;
}

.tabs__bar {
  display: flex;
  gap: var(--s-xs);
  border-bottom: 2px solid var(--black);
  margin-bottom: var(--s-md);
}

.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  padding: var(--s-sm) var(--s-md);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  background: transparent;
  border: 2px solid transparent;
  border-bottom: none;
  color: var(--mid-gray);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
  margin-bottom: -2px;
}

.tabs__tab:hover {
  color: var(--black);
}

.tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.tabs__tab--active {
  color: var(--black);
  background: var(--white);
  border-color: var(--black);
}

.tabs__badge {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-xs);
  min-width: 1.2em;
  height: 1.2em;
  font-size: var(--text-xs);
  background: var(--blue);
  color: var(--white);
}

.tabs__panel {
  flex: 1;
}

/* --------------------------------------------------------------------------
   UpdateGamesPanel — Management-page fan-out trigger. One button updates
   every tracked profile in parallel; the list above is a per-profile
   "last sync" readout.
   -------------------------------------------------------------------------- */

.update-games-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}

.update-games-panel__profiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
}

.update-games-panel__profile {
  display: flex;
  gap: var(--s-md);
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.update-games-panel__profile-name {
  color: var(--black);
  font-weight: 600;
}

.update-games-panel__profile-last-sync {
  color: var(--mid-gray);
}

.update-games-panel__actions {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Range Slider — Bauhaus (sharp corners, 2px black track, square thumb).
   Style-guide §6.12. Filled portion + thumb use --blue (interaction).
   -------------------------------------------------------------------------- */

.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.range:focus-visible {
  outline: none;
}

.range:focus-visible::-webkit-slider-runnable-track {
  box-shadow: var(--focus-ring);
}

.range:focus-visible::-moz-range-track {
  box-shadow: var(--focus-ring);
}

/* WebKit */
.range::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--warm-gray);
  border: 2px solid var(--black);
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -7px;
  background: var(--blue);
  border: 2px solid var(--black);
  border-radius: 0;
}

/* Firefox */
.range::-moz-range-track {
  height: 6px;
  background: var(--warm-gray);
  border: 2px solid var(--black);
}

.range::-moz-range-progress {
  height: 6px;
  background: var(--blue);
}

.range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--blue);
  border: 2px solid var(--black);
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Segmented Control — Bauhaus filter-chip pattern as a button group.
   Inactive 2px --mid-gray; hover --black; active inverts to --black/--white.
   -------------------------------------------------------------------------- */

.segmented {
  display: inline-flex;
}

.segmented__btn {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-normal);
  color: var(--dark-gray);
  background: transparent;
  border: 2px solid var(--mid-gray);
  border-right-width: 0;
  padding: var(--s-xs) var(--s-md);
  cursor: pointer;
  transition: all var(--transition);
}

.segmented__btn:last-child {
  border-right-width: 2px;
}

.segmented__btn:hover {
  border-color: var(--black);
  color: var(--black);
}

.segmented__btn--active {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.segmented__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}