/* ALSI Basketball — components: buttons, cards, chips, avatars, rows, meters,
   inputs, sheets, flash, dividers, empty states, skeletons. */

/* ---- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-4);
  font-family: var(--font-heading); font-weight: 700; font-size: var(--step-0);
  border-radius: var(--r-md); border: 2px solid transparent; cursor: pointer;
  background: var(--paper-100); color: var(--ink-900);
  transition: transform .08s ease, background .15s ease;
  text-decoration: none; line-height: 1;
}
.btn svg { width: 20px; height: 20px; }
.btn:active { transform: scale(.98); }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--orange-500); color: #fff; }
.btn--primary:hover { background: var(--orange-600); }
.btn--hero { background: var(--sun-500); color: var(--ink-900); }
.btn--hero:hover { background: var(--sun-400); }
.btn--outline { background: transparent; border-color: var(--ink-900); color: var(--ink-900); }
.btn--ghost { background: transparent; color: var(--orange-600); min-height: 40px; padding: 0 var(--sp-2); }
.btn--danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: var(--danger-100); }
.btn--sm { min-height: 36px; font-size: var(--step--1); padding: 0 var(--sp-3); }
.btn--block { display: flex; width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-sticky {
  position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 10;
  margin-top: var(--sp-4);
}

/* ---- cards ---------------------------------------------------------------- */
.card {
  background: var(--paper-0); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4);
}
.card + .card { margin-top: var(--sp-4); }
.card--pad-lg { padding: var(--sp-6); }
.card__title { font-family: var(--font-heading); font-weight: 800; font-size: var(--step-1); margin: 0 0 var(--sp-1); }

/* ---- chips / badges ------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: var(--step--1); font-weight: 700; line-height: 1.2;
  white-space: nowrap;
}
.chip--cat { background: var(--cat-100); color: var(--cat-500); }
.chip--status { background: var(--paper-100); color: var(--ink-700); }
.chip--ok { background: var(--ok-100); color: var(--ok); }
.chip--warn { background: var(--warn-100); color: var(--warn); }
.chip--danger { background: var(--danger-100); color: var(--danger); }
.chip--info { background: var(--info-100); color: var(--info); }
.chip--captain { background: var(--orange-500); color: #fff; }
.chip__dot { width: 7px; height: 7px; border-radius: var(--r-full); background: currentColor; }
.chip svg { width: 14px; height: 14px; }

/* ---- avatar --------------------------------------------------------------- */
.avatar {
  --sz: 44px;
  width: var(--sz); height: var(--sz); flex: none; position: relative;
  border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; color: #fff;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--paper-0), 0 0 0 4px var(--cat-500, var(--ink-300));
}
.avatar--lg { --sz: 72px; font-size: 1.6rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar__initials {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: hsl(var(--hue,30) 45% 45%);
}

/* ---- player row ----------------------------------------------------------- */
.prow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
}
.prow:last-child { border-bottom: none; }
.prow__body { flex: 1; min-width: 0; }
.prow__name { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.prow__meta { font-size: var(--step--1); color: var(--ink-500); display: flex; gap: 8px; flex-wrap: wrap; }
.prow__actions { flex: none; display: flex; gap: var(--sp-2); }
.jersey {
  font-family: var(--font-mono); font-weight: 700; color: var(--ink-500);
  font-size: var(--step--1);
}

/* ---- roster meter --------------------------------------------------------- */
.meter { display: flex; flex-direction: column; gap: 6px; }
.meter__label { display: flex; justify-content: space-between; font-size: var(--step--1); font-weight: 700; }
.meter__label .mono { font-size: var(--step-0); }
.meter__bar { display: flex; gap: 4px; }
.meter__seg {
  flex: 1; height: 8px; border-radius: 4px; background: var(--paper-100);
}
.meter__seg.is-filled { background: var(--cat-500, var(--ok)); }
.meter__seg.is-short.is-filled { background: var(--warn); }

/* ---- inputs --------------------------------------------------------------- */
.field { display: block; margin-bottom: var(--sp-4); }
.field__label { display: block; font-weight: 700; font-size: var(--step--1); margin-bottom: 6px; }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 0 var(--sp-3);
  font-family: inherit; font-size: var(--step-0); color: var(--ink-900);
  background: var(--paper-0); border: 1.5px solid var(--line); border-radius: var(--r-md);
}
.textarea { padding: var(--sp-3); min-height: 88px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--orange-500); box-shadow: 0 0 0 3px var(--orange-400); }
.input--error { border-color: var(--danger); }
.field__error { color: var(--danger); font-size: var(--step--1); margin-top: 6px; font-weight: 600; }
.field__hint { color: var(--ink-500); font-size: var(--step--1); margin-top: 6px; }

.input-phone { position: relative; }
.input-phone__prefix {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-weight: 700; color: var(--ink-500); pointer-events: none;
}
.input-phone .input { padding-left: 48px; }

.input-pass { position: relative; }
.input-pass .input { padding-right: 52px; }
.input-pass__toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: none; background: none; color: var(--ink-500); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-full);
}

/* segmented control (category picker) */
.segmented { display: grid; gap: var(--sp-2); }
.segmented__opt {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border: 1.5px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; background: var(--paper-0);
}
.segmented__opt input { position: absolute; opacity: 0; }
.segmented__opt:has(input:checked) { border-color: var(--cat-500); background: var(--cat-100); }
.segmented__swatch { width: 14px; height: 28px; border-radius: 4px; background: var(--cat-500); flex: none; }
.segmented__label { font-weight: 700; }
.segmented__sub { font-size: var(--step--1); color: var(--ink-500); }

/* ---- bottom sheet (native <dialog>) --------------------------------------- */
dialog.sheet {
  width: 100%; max-width: 680px; margin: 0 auto auto; padding: 0;
  border: none; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--paper-0); color: var(--ink-900);
  position: fixed; bottom: 0; top: auto;
  box-shadow: var(--shadow-2);
}
dialog.sheet::backdrop { background: rgba(36,26,18,.45); }
.sheet__body { padding: var(--sp-6) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom)); }
.sheet__grip { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: var(--sp-3) auto 0; }
.sheet__title { font-family: var(--font-heading); font-weight: 800; font-size: var(--step-1); margin: 0 0 var(--sp-4); }
@media (min-width: 481px) {
  dialog.sheet { margin: auto; border-radius: var(--r-lg); max-width: 460px; bottom: auto; top: 50%; transform: translateY(-50%); }
}

/* ---- flash / toast -------------------------------------------------------- */
.flash-wrap { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.flash {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  font-weight: 600; font-size: var(--step--1);
  border-left: 4px solid var(--info);
  background: var(--info-100); color: var(--ink-900);
}
.flash--ok { border-color: var(--ok); background: var(--ok-100); }
.flash--warn { border-color: var(--warn); background: var(--warn-100); }
.flash--danger { border-color: var(--danger); background: var(--danger-100); }
.flash svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* ---- bolt divider --------------------------------------------------------- */
.bolt { display: block; width: 100%; height: 12px; color: var(--sun-500); margin: var(--sp-4) 0; }
.bolt svg { display: block; width: 100%; height: 100%; }

/* ---- empty state ---------------------------------------------------------- */
.empty { text-align: center; padding: var(--sp-8) var(--sp-4); }
.empty__art { width: 132px; height: 132px; margin: 0 auto var(--sp-4); opacity: .78; }
.empty__line { font-family: var(--font-script); color: var(--grass-500); font-size: 1.6rem; line-height: 1.1; margin-bottom: var(--sp-4); }
.empty__sub { color: var(--ink-500); margin-bottom: var(--sp-4); }

/* ---- skeleton ------------------------------------------------------------- */
.skeleton { background: linear-gradient(90deg, var(--paper-100) 25%, var(--paper-50) 37%, var(--paper-100) 63%); background-size: 400% 100%; animation: shimmer 1.2s ease infinite; border-radius: var(--r-md); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .btn:active { transform: none; }
}