/* =============================================================
   user.css - load AFTER style.css and brand.css
   Visual-only restyle of user.html. No behaviour is changed.
   ============================================================= */
body.user-body {
    --u-bg: #0f1216; --u-surface: #171b21; --u-surface2: #1d2229; --u-line: #262c34;
    --u-text: #e6e9ed; --u-muted: #8b94a0; --u-gold: #d4b155; --u-gold-fg: #1b1608;
    --u-tint: rgba(212,177,85,.10);
    background: var(--u-bg) !important; color: var(--u-text);
}
body.user-body.light-mode {
    --u-bg: #f3f4f7; --u-surface: #ffffff; --u-surface2: #faf7ec; --u-line: #e2e6ec;
    --u-text: #1f2328; --u-muted: #6a737d; --u-gold: #a37b1b; --u-gold-fg: #fff;
    --u-tint: rgba(163,123,27,.09);
}
.user-body svg.dx-i { flex: 0 0 auto; }
.user-body .tm-container { max-width: 1140px; padding-bottom: 24px; }

/* ---------- Top bar ---------- */
body.user-body .navbar.user-nav { background: #0b0e12 !important; border-bottom: 1px solid #1c2128; margin-bottom: 28px !important; padding: 10px 0; }
.user-nav .navbar-brand { font-weight: 800; letter-spacing: .5px; color: #f0d58a !important; }
.user-nav-home { align-items: center; gap: 7px; color: #aeb6c0; text-decoration: none; font-size: .9rem; padding: 7px 12px; border-radius: 999px; }
.user-nav-home:hover { color: #fff; background: #161b21; }
.user-menu-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(212,177,85,.12); color: #f0d58a; border: 1px solid rgba(212,177,85,.35); border-radius: 999px; padding: 7px 15px; font-weight: 600; font-size: .9rem; transition: background .15s; }
.user-menu-pill:hover { background: rgba(212,177,85,.22); }

/* ---------- Offcanvas (dark in both themes) ---------- */
body.user-body .offcanvas.user-offcanvas { background: #0b0e12 !important; color: #fff; border-left: 1px solid #1c2128; }
.user-offcanvas .offcanvas-header { border-bottom: 1px solid #1c2128; padding: 16px; }
.user-offcanvas .side-brand { display: flex; align-items: center; gap: 12px; }
.user-offcanvas .side-logo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; letter-spacing: 1px; color: #1b1608; background: linear-gradient(135deg, #e6c978, #b48c2c); }
.user-offcanvas .offcanvas-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #fff !important; }
.user-offcanvas .side-sub { font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; color: #d4b155; }
.user-offcanvas .side-nav { gap: 2px; }
.user-offcanvas .side-label { list-style: none; font-size: .66rem; letter-spacing: 1.8px; text-transform: uppercase; color: #6d7681; padding: 14px 12px 6px; font-weight: 700; }
body.user-body .user-offcanvas .nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #aeb6c0 !important; font-weight: 500; border-left: 3px solid transparent; transition: background .15s, color .15s; }
body.user-body .user-offcanvas .nav-link.text-danger { color: #e8776a !important; }
body.user-body .user-offcanvas .nav-link:hover { background: #161b21 !important; color: #fff !important; }
body.user-body .user-offcanvas .nav-link.active { background: rgba(212,177,85,.12) !important; color: #f0d58a !important; border-left-color: #d4b155; font-weight: 600; }
.user-offcanvas .nav-link * { pointer-events: none; }
.user-offcanvas .nav-ico { display: inline-flex; width: 20px; justify-content: center; opacity: .85; }
.user-offcanvas .nav-link.active .nav-ico { color: #d4b155; opacity: 1; }

/* ---------- Page header ---------- */
.user-body .tm-page-header { margin-bottom: 22px; }
.user-body .tm-page-title { position: relative; padding-left: 16px; font-weight: 800; font-size: 1.7rem; color: var(--u-text) !important; margin-bottom: 4px; }
.user-body .tm-page-title::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 5px; border-radius: 4px; background: linear-gradient(180deg, #e6c978, #b48c2c); }
.user-body .tm-page-subtitle { padding-left: 16px; color: var(--u-muted) !important; margin: 0; }

/* ---------- Registration stepper ---------- */
.reg-steps { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: s; }
.reg-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--u-surface); border: 1px solid var(--u-line); border-radius: 14px; }
.reg-steps .n { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; background: var(--u-gold); color: var(--u-gold-fg); }
.reg-steps b { display: block; font-size: .92rem; color: var(--u-text); line-height: 1.25; }
.reg-steps small { display: block; color: var(--u-muted); font-size: .78rem; margin-top: 2px; line-height: 1.35; }
@media (max-width: 991.98px) { .reg-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .reg-steps { grid-template-columns: 1fr; } }

.reg-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 575.98px) { .reg-choices { grid-template-columns: 1fr; } }
.user-body .reg-choice { margin: 0; padding: 0; border: 1px solid var(--u-line); border-radius: 12px; background: var(--u-surface2); position: relative; transition: border-color .15s, background .15s; }
.user-body .reg-choice .form-check-input { position: absolute; top: 16px; left: 14px; margin: 0; }
.user-body .reg-choice .form-check-label { display: block; padding: 13px 14px 13px 42px; cursor: pointer; color: var(--u-text); width: 100%; }
.user-body .reg-choice:has(input:checked) { border-color: var(--u-gold); background: var(--u-tint); box-shadow: 0 0 0 1px var(--u-gold) inset; }
.user-body .reg-choice small { color: var(--u-muted); }
.user-body .reuse-note, .user-body .roster-cap { font-size: .86rem; color: var(--u-muted); }

/* ---------- Cards ---------- */
body.user-body .tm-card { background: var(--u-surface) !important; border: 1px solid var(--u-line) !important; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.12); color: var(--u-text); }
body.user-body .tm-card-header { background: var(--u-surface2) !important; border-bottom: 1px solid var(--u-line) !important; padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.user-body .tm-card-title { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; color: var(--u-text) !important; }
.user-body .tm-card-title svg { color: var(--u-gold); }
.user-body .tm-card-hint { color: var(--u-muted) !important; font-size: .82rem; }
.user-body .tm-card-body { padding: 18px; }
.user-body .tm-card-body-flush { padding: 0; }
.user-body .form-group-title { display: flex; align-items: center; gap: 10px; font-size: .74rem; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 800; color: var(--u-gold); margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--u-line); }
.user-body .form-group-title:first-child { margin-top: 0; }

/* ---------- Forms ---------- */
body.user-body .form-label, body.user-body .tm-form-label { color: var(--u-text) !important; font-weight: 600; font-size: .86rem; }
body.user-body .form-control, body.user-body .form-select, body.user-body.light-mode .form-control, body.user-body.light-mode .form-select {
    background-color: var(--u-surface2) !important; color: var(--u-text) !important; border: 1px solid var(--u-line) !important; border-radius: 10px; padding: 9px 12px;
}
body.user-body .form-control::placeholder { color: var(--u-muted) !important; opacity: .8; }
body.user-body .form-control:focus, body.user-body .form-select:focus { border-color: var(--u-gold) !important; box-shadow: 0 0 0 3px var(--u-tint) !important; outline: 0; }
body.user-body .form-check-input:checked { background-color: var(--u-gold); border-color: var(--u-gold); }
body.user-body .form-check-input:focus { box-shadow: 0 0 0 3px var(--u-tint); border-color: var(--u-gold); }
.user-body .field-error { color: #e0675a; font-size: .8rem; margin-top: 4px; }
.user-body .form-text, .user-body .text-muted { color: var(--u-muted) !important; }

/* ---------- Buttons ---------- */
body.user-body .btn { border-radius: 10px; font-weight: 600; }
body.user-body .btn-gold, body.user-body .btn-warning { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--u-gold) !important; color: var(--u-gold-fg) !important; border: 0 !important; }
body.user-body .btn-gold:hover, body.user-body .btn-warning:hover { filter: brightness(1.1); transform: translateY(-1px); }
body.user-body .btn-outline-secondary, body.user-body .btn-outline-warning { background: transparent !important; color: var(--u-text) !important; border: 1px solid var(--u-line) !important; display: inline-flex; align-items: center; gap: 7px; }
body.user-body .btn-outline-secondary:hover, body.user-body .btn-outline-warning:hover { border-color: var(--u-gold) !important; color: var(--u-gold) !important; background: var(--u-tint) !important; }
body.user-body .btn-sm.btn-outline-danger { border-radius: 8px; }

/* ---------- Hero ---------- */
body.user-body .tm-hero.user-hero {
    position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
    padding: 26px 28px; margin-bottom: 20px; border-radius: 20px; border: 1px solid var(--u-line);
    background: radial-gradient(520px 220px at 100% 0%, rgba(212,177,85,.20), transparent 70%), var(--u-surface) !important; color: var(--u-text);
}
.user-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, #e6c978, #b48c2c); }
.user-hero .tm-hero-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.user-hero .tm-hero-logo { width: 84px; height: 84px; object-fit: cover; border-radius: 18px; border: 2px solid var(--u-gold); background: var(--u-surface2); }
.user-hero .user-emblem { width: 84px; height: 84px; border-radius: 18px; display: grid; place-items: center; color: var(--u-gold); background: var(--u-tint); border: 1px solid rgba(212,177,85,.35); }
.user-hero #teamLogo[style*="display: block"] + .user-emblem { display: none; }
.user-hero .tm-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; color: var(--u-gold) !important; }
.user-hero .eyebrow-ico { display: inline-flex; }
.user-hero .tm-hero-name { font-size: clamp(1.4rem, 3.4vw, 2.1rem); font-weight: 800; margin: 4px 0; color: var(--u-text) !important; overflow-wrap: anywhere; }
.user-hero .tm-hero-meta { margin: 0; color: var(--u-muted) !important; }
.user-hero .tm-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.user-hero .tm-switcher { min-width: 180px; }

/* ---------- Stat tiles ---------- */
.user-body .tm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 991.98px) { .user-body .tm-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .user-body .tm-stats { grid-template-columns: 1fr; } }
body.user-body .tm-stat { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--u-surface) !important; border: 1px solid var(--u-line) !important; border-radius: 16px; transition: transform .15s, border-color .15s; }
body.user-body .tm-stat:hover { transform: translateY(-2px); border-color: var(--u-gold) !important; }
.user-body .tm-stat-icon { flex: 0 0 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--u-tint); color: var(--u-gold); }
.user-body .tm-stat-label { font-size: .72rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--u-muted) !important; font-weight: 700; }
.user-body .tm-stat-value { font-size: 1.55rem; font-weight: 800; color: var(--u-text) !important; line-height: 1.2; }
.user-body .tm-stat-value-sm { font-size: 1.1rem; }
.user-body .tm-stat-value small { font-size: .78rem; font-weight: 500; color: var(--u-muted); }
.user-body .tm-stat-sub { font-size: .8rem; color: var(--u-muted) !important; }
.user-body .tm-stat-content { min-width: 0; }

/* ---------- Tables ---------- */
body.user-body .tm-table, body.user-body .table { --bs-table-bg: transparent; --bs-table-color: var(--u-text); color: var(--u-text) !important; margin: 0; }
body.user-body .tm-table thead th { background: var(--u-surface2) !important; color: var(--u-muted) !important; font-size: .72rem; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--u-line) !important; padding: 12px 16px; white-space: nowrap; }
body.user-body .tm-table td { padding: 12px 16px; border-color: var(--u-line) !important; color: var(--u-text) !important; vertical-align: middle; background: transparent !important; }
body.user-body .tm-table tbody tr:hover td { background: var(--u-tint) !important; }
body.user-body .table-responsive { border-radius: 0; }

/* ---------- Badges (tinted pills) ---------- */
body.user-body .badge { border-radius: 999px; padding: .38em .8em; font-weight: 700; font-size: .72rem; letter-spacing: .3px; border: 1px solid transparent; }
body.user-body .badge.bg-success { background: rgba(63,164,103,.16) !important; color: #3fa467 !important; border-color: rgba(63,164,103,.4); }
body.user-body .badge.bg-danger { background: rgba(208,88,74,.16) !important; color: #d0584a !important; border-color: rgba(208,88,74,.4); }
body.user-body .badge.bg-warning { background: rgba(212,177,85,.16) !important; color: var(--u-gold) !important; border-color: rgba(212,177,85,.45); }
body.user-body .badge.bg-secondary { background: rgba(138,147,158,.16) !important; color: var(--u-muted) !important; border-color: rgba(138,147,158,.35); }
body.user-body .badge.bg-info { background: rgba(77,163,214,.16) !important; color: #4da3d6 !important; border-color: rgba(77,163,214,.4); }
body.user-body.light-mode .badge.bg-success { color: #23804a !important; }
body.user-body.light-mode .badge.bg-danger { color: #b23b2f !important; }
body.user-body.light-mode .badge.bg-info { color: #1f78a8 !important; }

/* ---------- Key/value (payment) ---------- */
.user-body .tm-kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--u-line); }
.user-body .tm-kv:last-child { border-bottom: 0; }
.user-body .tm-kv-label { color: var(--u-muted) !important; font-size: .86rem; }
.user-body .tm-kv-value { color: var(--u-text) !important; font-weight: 600; text-align: right; }
.user-body .tm-kv-value-lg { font-size: 1.25rem; color: var(--u-gold) !important; font-weight: 800; }
.user-body .tm-kv-value-muted { color: var(--u-muted) !important; font-weight: 500; }

/* ---------- Banners injected by user.js ---------- */
body.user-body .tm-banner { border-radius: 14px; border: 1px solid rgba(212,177,85,.4); background: var(--u-tint) !important; color: var(--u-text) !important; padding: 12px 16px; margin-bottom: 14px; }
body.user-body .tm-banner * { color: inherit; }

/* ---------- Help card, other teams ---------- */
body.user-body .tm-card-help { background: linear-gradient(135deg, var(--u-tint), transparent), var(--u-surface) !important; border-color: rgba(212,177,85,.35) !important; }
.user-body .tm-help-title { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--u-text) !important; margin-bottom: 6px; }
.user-body .tm-help-title svg { color: var(--u-gold); }
.user-body .tm-help-text { color: var(--u-muted) !important; font-size: .88rem; margin: 0; }
.user-body .tm-other-team { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--u-line); }
.user-body .tm-other-team:last-child { border-bottom: 0; }
.user-body .tm-other-team-name { font-weight: 700; color: var(--u-text); }
.user-body .tm-other-team-meta { font-size: .82rem; color: var(--u-muted); margin-top: 2px; }
.user-body .tm-add-player-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }

/* ---------- Settings ---------- */
.user-body .settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--u-line); }
.user-body .settings-toggle-row:last-child { border-bottom: 0; }
.user-body .settings-label { font-weight: 600; color: var(--u-text); }
.user-body .settings-sub, .user-body .settings-hint { font-size: .82rem; color: var(--u-muted); }
.user-body .form-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
.user-body .pw-strength-bar { height: 6px; border-radius: 6px; background: var(--u-line); overflow: hidden; }
.user-body .pw-strength-label { font-size: .78rem; color: var(--u-muted); }
.user-body .pw-rules { list-style: none; padding: 0; margin: 8px 0 0; font-size: .82rem; color: var(--u-muted); }

/* ---------- Footer ---------- */
.user-body .site-footer { margin-top: 36px; padding: 28px 0 34px; border-top: 1px solid var(--u-line); text-align: center; color: var(--u-muted); background: transparent; }
.user-body .site-footer a { color: var(--u-gold); }
.user-body .soc-row-center { justify-content: center; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* ---------- Mobile ---------- */
@media (max-width: 575.98px) {
    body.user-body .tm-hero.user-hero { padding: 20px 18px 20px 22px; }
    .user-hero .tm-hero-left { flex-direction: column; align-items: flex-start; }
    .user-hero .tm-hero-actions { width: 100%; }
    .user-hero .tm-switcher { flex: 1 1 100%; }
    .user-body .tm-card-body { padding: 14px; }
    .user-body .tm-page-title { font-size: 1.4rem; }
}

/* keep the top bar dark in both themes so the brand name stays readable */
body.user-body.light-mode .navbar.user-nav .navbar-brand { color: #f0d58a !important; }
body.user-body.light-mode .navbar.user-nav { background: #0b0e12 !important; border-bottom: 1px solid #1c2128 !important; }
body.user-body.light-mode .user-nav-home { color: #aeb6c0 !important; }
body.user-body.light-mode .user-menu-pill { color: #f0d58a !important; background: rgba(212,177,85,.12) !important; border-color: rgba(212,177,85,.35) !important; }
body.user-body.light-mode .tm-banner { background: rgba(163,123,27,.10) !important; border-color: rgba(163,123,27,.4) !important; }

/* registration choice radios: style.css turns every .form-check-input into a switch, so restore real radios here */
body.user-body .reg-choice .form-check-input[type="radio"] {
    -webkit-appearance: none; appearance: none; width: 20px !important; height: 20px !important; margin: 0 !important;
    border: 2px solid var(--u-muted) !important; border-radius: 50% !important; background: transparent !important; position: absolute; top: 15px; left: 14px; float: none;
}
body.user-body .reg-choice .form-check-input[type="radio"]::before { display: none !important; content: none !important; }
body.user-body .reg-choice .form-check-input[type="radio"]:checked { border-color: var(--u-gold) !important; background: radial-gradient(circle, var(--u-gold) 0 45%, transparent 50%) !important; }
.user-body .form-group-title { margin-top: 28px; margin-bottom: 8px; }