/* ============================================================
   Shared components for inner pages (auth, dashboard, tournament...)
   Extends the visual language already defined in style.css
   ============================================================ */

/* ---------- Auth shell ---------- */
.auth-shell {
  position: relative;
  min-height: calc(100dvh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 2.5rem 1rem;
}
.auth-card {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 26rem;
  border-radius: 1.25rem;
  border: 1px solid #262B33;
  background: linear-gradient(180deg, rgba(27,31,38,.9), rgba(20,23,28,.9));
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
  padding: 2rem 1.5rem;
  animation: authIn .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes authIn {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(242,169,59,.35), transparent 30%, transparent 70%, rgba(124,92,252,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Form fields ---------- */
.field-label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  margin-bottom: .5rem;
}
.field-input {
  width: 100%;
  border-radius: .75rem;
  border: 1px solid #262B33;
  background: #0A0C0F;
  padding: .75rem 1rem;
  font-size: .875rem;
  color: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field-input::placeholder { color: rgba(255,255,255,.28); }
.field-input:focus {
  outline: none;
  border-color: #F2A93B;
  box-shadow: 0 0 0 3px rgba(242,169,59,.15);
  background: #0d1013;
}
.field-input.field-error { border-color: #B3273A; box-shadow: 0 0 0 3px rgba(179,39,58,.15); }
.field-hint { font-size: .7rem; color: rgba(255,255,255,.35); margin-top: .4rem; }
.field-error-text { font-size: .7rem; color: #f38ba8; margin-top: .4rem; }

.btn-primary {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  border-radius: .75rem;
  background: #F2A93B;
  color: #0A0C0F;
  font-weight: 900;
  padding: .85rem 1rem;
  transition: filter .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn-primary:hover { filter: brightness(1.1); box-shadow: 0 0 30px -6px #F2A93B; color: #0A0C0F; }
.btn-primary:active { transform: scale(.985); }
.btn-primary:disabled { opacity: .5; filter: none; box-shadow: none; cursor: not-allowed; }

.btn-ghost {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  border-radius: .75rem;
  border: 1px solid #262B33;
  color: rgba(255,255,255,.8);
  font-weight: 700;
  padding: .8rem 1rem;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.btn-ghost:hover { border-color: rgba(255,255,255,.3); color: #fff; background: rgba(255,255,255,.03); }

/* strength meter */
.pw-meter { height: 4px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.pw-meter-fill { height: 100%; border-radius: 999px; transition: width .3s ease, background .3s ease; }

/* OTP boxes */
.otp-box {
  width: 3rem; height: 3.4rem;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 900;
  border-radius: .75rem;
  border: 1px solid #262B33;
  background: #0A0C0F;
  color: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.otp-box:focus { outline:none; border-color:#F2A93B; box-shadow:0 0 0 3px rgba(242,169,59,.15); }

/* ---------- App shell (dashboard / profile / wallet / team) ---------- */
.app-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) { .app-layout { grid-template-columns: 15rem 1fr; align-items: start; } }

.app-sidebar {
  border: 1px solid #262B33;
  background: #14171C;
  border-radius: 1.25rem;
  padding: 1rem;
  position: sticky;
  top: 5.5rem;
}

/* profile header */
.sidebar-profile {
  text-align: center;
  padding-bottom: 1.1rem;
  margin-bottom: .85rem;
  border-bottom: 1px solid #262B33;
}
.avatar-upload-btn {
  position: absolute;
  bottom: -4px;
  left: -4px;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 9999px;
  background: #F2A93B;
  color: #0A0C0F;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid #14171C;
  cursor: pointer;
  transition: filter .2s ease, transform .15s ease;
}
.avatar-upload-btn svg { width: .9rem; height: .9rem; }
.avatar-upload-btn:hover { filter: brightness(1.12); transform: scale(1.08); }
.avatar-upload-btn:active { transform: scale(.95); }
.avatar-upload-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.sidebar-divider { height: 1px; background: #262B33; margin: .6rem 0; }

.app-nav-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .6rem;
  border-radius: .75rem;
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  transition: background .18s ease, color .18s ease;
}
.app-nav-icon {
  width: 2.1rem; height: 2.1rem;
  border-radius: .65rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04);
  color: inherit;
  flex-shrink: 0;
  transition: background .18s ease, color .18s ease;
}
.app-nav-link:hover { color: #fff; }
.app-nav-link:hover .app-nav-icon { background: rgba(255,255,255,.08); }
.app-nav-link.is-active { color: #F2A93B; background: rgba(242,169,59,.07); }
.app-nav-link.is-active .app-nav-icon { background: rgba(242,169,59,.16); color: #F2A93B; }
.app-nav-link--danger { color: rgba(179,39,58,.75); }
.app-nav-link--danger:hover { color: #f38ba8; background: rgba(179,39,58,.08); }
.app-nav-link--danger:hover .app-nav-icon { background: rgba(179,39,58,.14); color: #f38ba8; }

.stat-tile {
  border-radius: 1rem;
  border: 1px solid #262B33;
  background: #14171C;
  padding: 1.1rem 1.2rem;
  transition: transform .25s ease, border-color .25s ease;
}
.stat-tile:hover { transform: translateY(-3px); border-color: rgba(242,169,59,.35); }

/* badges */
.badge { display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; padding:.3rem .75rem; font-size:.68rem; font-weight:800; border:1px solid transparent; }
.badge-live   { background: rgba(52,211,153,.1); color:#6ee7b7; border-color: rgba(52,211,153,.3); }
.badge-soon   { background: rgba(255,255,255,.05); color: rgba(255,255,255,.5); border-color: rgba(255,255,255,.12); }
.badge-danger { background: rgba(179,39,58,.12); color:#f38ba8; border-color: rgba(179,39,58,.3); }
.badge-gold   { background: rgba(242,169,59,.1); color:#F2A93B; border-color: rgba(242,169,59,.3); }
.badge-violet { background: rgba(124,92,252,.1); color:#b3a2ff; border-color: rgba(124,92,252,.3); }

/* table */
.data-row { transition: background .2s ease; }
.data-row:hover { background: rgba(255,255,255,.025); }

/* toggle switch */
.switch { position: relative; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: #262B33; transition: background .2s ease; flex-shrink:0; }
.switch.is-on { background: #F2A93B; }
.switch-dot { position:absolute; top:2px; right:2px; width:1.2rem; height:1.2rem; border-radius:50%; background:#fff; transition: transform .2s ease; }
.switch.is-on .switch-dot { transform: translateX(-1.1rem); }

/* team roster slot */
.roster-slot { border: 1px dashed #262B33; border-radius: 1rem; padding: 1rem; display:flex; align-items:center; gap:.75rem; }
.roster-slot.filled { border-style: solid; background: rgba(255,255,255,.02); }

/* copy field */
.copy-field { display:flex; align-items:center; gap:.5rem; border:1px solid #262B33; background:#0A0C0F; border-radius:.75rem; padding:.6rem .6rem .6rem 1rem; }

/* bracket */
.bracket-wrap { overflow-x: auto; padding-bottom: 1rem; }
.bracket-row { display:flex; gap: 2.5rem; min-width: max-content; }
.bracket-col { display:flex; flex-direction:column; justify-content: space-around; gap: 1rem; position: relative; }
.bracket-match {
  width: 13rem;
  border-radius: .85rem;
  border: 1px solid #262B33;
  background: #14171C;
  overflow: hidden;
  position: relative;
}
.bracket-match.winner-top .bm-top { color: #F2A93B; font-weight: 900; }
.bracket-match.winner-bottom .bm-bottom { color: #F2A93B; font-weight: 900; }
.bm-team { display:flex; align-items:center; justify-content:space-between; padding:.55rem .8rem; font-size:.78rem; }
.bm-team + .bm-team { border-top: 1px solid #262B33; }
.bracket-col::before {
  content:'';
  position:absolute; right:-1.25rem; top:0; bottom:0; width:1px;
}

/* upload dropzone */
.dropzone { border: 1.5px dashed #262B33; border-radius: 1rem; padding: 2rem 1rem; text-align:center; transition: border-color .2s ease, background .2s ease; }
.dropzone:hover { border-color: rgba(242,169,59,.5); background: rgba(242,169,59,.03); }

/* misc */
.divider-text { display:flex; align-items:center; gap: .75rem; color: rgba(255,255,255,.3); font-size: .7rem; }
.divider-text::before, .divider-text::after { content:''; flex:1; height:1px; background: #262B33; }

.error-code {
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #F2A93B, #B3273A 60%, #7C5CFC);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}