/* ============================================================
   LEAGUES — My Team's inline leagues panel (lgs-/lgh-row-*) and the
   /leagues/create + /leagues/join pair (lgh-form-page): Create <-> Join
   are two states of the very same single-composition pattern Login
   <-> Register already use (login__welcome/login-page__*/login__divider/
   login__btn-secondary), just with the primary/secondary roles swapped.
   /leagues itself is only an entry redirect, no landing screen of its
   own. -- all in the app's own shell like every other real page.
   Class prefix: lgh- / lgs-
   ============================================================ */

/* ---------- Leagues section wrapper (My Team / hub) -- full-width like
   everything else on those pages. ---------- */
.lgs-wrap { max-width:600px; margin:20px auto 0; }
.lgs-header { margin-bottom:10px; }
.lgs-title { font-size:13px; font-weight:800; color:#1e293b; }
.lgs-empty { text-align:center; color:#94a3b8; font-size:13px; padding:22px 0; background:#f8fafc; border-radius:12px; }
.lgs-slots-hint { text-align:center; font-size:12px; color:#94a3b8; margin:10px 0 0; }

/* ---------- League list (hub page + My Team) ---------- */
.lgh-list { display:flex; flex-direction:column; gap:10px; }

/* The row is a fixed-size "viewport": .lgh-row__slider holds the normal
   row and its confirm panel side by side (each exactly the row's own
   width) and slides horizontally between them -- no popup, no
   expand-downward, just the confirm state sliding in from the right
   over the same card. */
.lgh-row {
  position:relative; overflow:hidden;
  border:1px solid #e2e8f0; border-radius:12px; background:#fff;
  transition:border-color 0.15s, box-shadow 0.15s;
}
.lgh-row:hover { border-color:#cbd5e1; box-shadow:0 4px 12px rgba(15,23,42,0.06); }
/* Was transform 0.25s ease (felt too snappy/abrupt to register as a
   deliberate reveal); slowed to 0.4s ease-out so the confirm panel is
   clearly perceived sliding in without feeling heavy. */
.lgh-row__slider { display:flex; width:200%; transition:transform 0.4s ease-out; }
.lgh-row--confirming .lgh-row__slider { transform:translateX(-50%); }

/* Read-only rows (Other Team's own leagues list) have no slider/confirm
   -- just the row's normal content directly, no actions to arm. */
.lgh-row--readonly { display:flex; align-items:center; gap:12px; padding:12px; text-decoration:none; }

.lgh-row__main {
  display:flex; align-items:center; gap:12px;
  width:50%; flex-shrink:0; box-sizing:border-box;
  padding:12px;
}
.lgh-row__avatar { width:38px; height:38px; font-size:15px; flex-shrink:0; }
.lgh-row__info { flex:1; min-width:0; }
.lgh-row__name { font-size:14px; font-weight:700; color:#1e293b; display:flex; align-items:center; gap:6px; }
.lgh-row__name-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lgh-owner-tag {
  flex-shrink:0; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em;
  color:var(--color-primary); background:rgba(var(--color-primary-rgb),0.1);
  border-radius:999px; padding:2px 7px;
}
.lgh-row__meta { font-size:12px; color:#94a3b8; margin-top:1px; }
.lgh-row__pos { flex-shrink:0; font-size:15px; font-weight:800; color:var(--color-primary); text-align:center; min-width:34px; }
.lgh-row__actions { flex-shrink:0; display:flex; align-items:center; gap:4px; }
.lgh-row__action {
  border:none; background:#f8fafc; color:#64748b;
  font-size:11px; font-weight:700; border-radius:999px; padding:6px 10px;
  cursor:pointer; display:flex; align-items:center; gap:4px; white-space:nowrap;
}
.lgh-row__action:hover { background:#f1f5f9; }
.lgh-row__action--danger { background:#fef2f2; color:#dc2626; }
.lgh-row__action--danger:hover { background:#fee2e2; }

/* Single, taller CTA into the /leagues landing -- deliberately more
   prominent than the plain .st-cta-btn pill (this is the one action
   that opens a whole other page, not an inline row action). */
.lgh-manage-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; box-sizing:border-box; margin-top:14px; padding:11px;
  border-radius:10px; font-size:13px; font-weight:700; color:var(--color-primary);
  background:#fff; border:1.5px solid var(--color-primary);
  text-decoration:none; transition:background 0.15s;
}
.lgh-manage-btn:hover { background:rgba(var(--color-primary-rgb),0.06); }
.lgh-manage-btn__icon { font-size:15px; }

/* ---------- Inline row confirm (leave/delete) -- slides in over the
   same card from the right, no popup/overlay: tapping Leave/Delete
   arms .lgh-row--confirming, which slides the whole row's content out
   to the left while this panel slides in to take its place, so the
   destructive action still can't fire on a single tap. ---------- */
.lgh-row__confirm {
  display:flex; align-items:center; gap:10px;
  width:50%; flex-shrink:0; box-sizing:border-box;
  padding:12px;
}
.lgh-row__confirm-text { flex:1; display:flex; flex-direction:column; }
.lgh-row__confirm-title { font-size:13px; font-weight:700; color:#1e293b; line-height:1.3; }
.lgh-row__confirm-sub { font-size:12px; color:#64748b; line-height:1.3; margin-top:1px; }
.lgh-row__confirm-btns { flex-shrink:0; display:flex; gap:8px; }

/* ---------- Create / Join form pages -- the narrow centered column is
   literally login__auth-inner's own max-width (400px); heading reuses
   login__welcome-title, fields/button reuse .login-page__* (base.css).
   No bordered card, no shadow -- same borderless white panel Login
   itself uses, just sitting under this page's own header/nav instead of
   Login's blue hero. ---------- */
.lgh-form-page { max-width:400px; margin:0 auto; padding:8px 0 40px; }
.lgh-form-page .login-page__back { margin-bottom:22px; }
.lgh-form__input--code { text-transform:uppercase; letter-spacing:0.2em; text-align:center; font-weight:700; }

.lgh-success { text-align:center; }
.lgh-success__title { font-size:15px; font-weight:800; color:#16a34a; margin-bottom:4px; }
.lgh-success__name { font-size:13px; color:#64748b; margin-bottom:14px; }
.lgh-success__code {
  display:inline-block; font-size:24px; font-weight:800; letter-spacing:0.15em;
  color:#1e293b; background:#fff; border:1px solid var(--color-primary);
  border-radius:10px; padding:10px 20px; cursor:pointer;
}
.lgh-success__hint { font-size:12px; color:#94a3b8; margin:10px 0 18px; }
.lgh-success__owner { font-size:11px; font-weight:700; color:var(--color-primary); background:rgba(var(--color-primary-rgb),0.1); border-radius:999px; padding:4px 10px; display:inline-block; margin-bottom:14px; }

@media (max-width:480px) {
  .lgh-row__meta { font-size:11px; }
  .lgh-row__action span.lgh-row__action-label { display:none; }
  .lgh-row__action { padding:8px; }
}