:root {
    --border: rgba(255, 255, 255, 0.12);
    --text: #e6e6e6;
    --text-dim: #9a9a9e;
    --accent: #4f8cff;
    --accent-hover: #6ea0ff;
}

* { box-sizing: border-box; }

/* Background is owned by CSS/themes.css (theme-dependent gradient) —
   this file only sets text/layout defaults.
   Sticky-footer layout: body is a full-height flex column so the footer is
   pinned to the bottom of the viewport on short pages instead of floating
   right after <main>'s content. */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
}

main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ── Buttons / forms ─────────────────────────────────────────────────── */
button, .btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.9rem;
    cursor: pointer;
}
button:hover, .btn:hover { background: var(--accent-hover); }

input[type="text"], input[type="email"], input[type="password"] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 8px 10px;
    width: 100%;
    font-size: 0.95rem;
}

form label { display: block; margin: 12px 0 4px; font-size: 0.85rem; color: var(--text-dim); }

.error-message {
    display: none;
    color: #ff6b6b;
    font-size: 0.85rem;
    margin-top: 8px;
}

.card {
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #fff;
    border-radius: 10px;
    padding: 20px;
}

/* ── Generic tables (records, admin, etc.) ──────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}
th, td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
}
th { color: var(--text-dim); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.empty-cell { text-align: center; color: var(--text-dim); font-style: italic; }

/* ── Team Anarchy ladder — styled to match RDL's Duos ladder (#ladder-duos):
   dark outer-container with a thick white border, borderless transparent
   table, centered stat columns, left-aligned team name, and a gold glow on
   the #1 rank cell. Scoped to #ladder-team so the generic table rules above
   (used by records/admin/etc.) are untouched. */
.outer-container {
    position: relative;
    background-color: rgba(0, 0, 0, 0.75);
    border: 5px solid #fff;
    border-radius: 15px;
    padding: 16px;
    margin-top: 16px;
    overflow: hidden;
}

#ladder-team {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    font-size: 1.1rem;
}
#ladder-team th, #ladder-team td {
    border: none;
    padding: 8px 10px;
    text-align: center;
    color: #fff;
    background: transparent;
}
#ladder-team th {
    font-weight: bold;
    text-transform: none;
    letter-spacing: normal;
}
#ladder-team th:nth-child(2), #ladder-team td:nth-child(2) {
    text-align: left;
    padding-left: 20px;
}
#ladder-team tbody tr:hover td { background-color: rgba(255, 255, 255, 0.05); }
#ladder-team tbody tr:first-child td:first-child {
    font-weight: bold;
    color: #FFD700;
    text-shadow: 0 0 5px #FFD700;
}
#ladder-team td:nth-child(n+3) { font-size: 1rem; font-weight: 500; }
.team-members-row td { color: #999; font-size: 0.85rem; padding-top: 0; }

.free-agents-section {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.free-column {
    flex: 1;
    min-width: 220px;
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 8px;
}
.free-column h3 {
    color: #aaa;
    font-size: 0.82rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid #2a2a2a;
}
.free-column ul { list-style: none; padding: 0; margin: 0; }
.free-column li {
    padding: 5px 6px;
    border-bottom: 1px solid #222;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #ccc;
}
.free-column li:last-child { border-bottom: none; }

/* Create Team / Invite / Request Join — RDL uses one small blue chip for
   every team-formation action in the free-agents panel. */
.team-action-btn,
.join-team-action {
    background: #2a6496;
    color: #fff;
    border: none;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.team-action-btn:hover,
.join-team-action:hover { background: #235579; }

/* In the column headers the button is pushed to the right edge (RDL). */
.free-column h3 {
    display: flex;
    align-items: center;
}
.free-column h3 .team-action-btn { margin-left: auto; }

/* The Duo's panel reuses the Team Anarchy free-agents layout. */
.duos-free-columns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.ladder-actions { display: flex; gap: 12px; margin: 16px 0; }

/* ── Duo's / Solo's ladder tables — same borderless/centered treatment as
   #ladder-team above, just scoped to their own ids. */
#ladder-duos, #ladder-solo {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    font-size: 1.1rem;
}
#ladder-duos th, #ladder-duos td,
#ladder-solo th, #ladder-solo td {
    border: none;
    padding: 8px 10px;
    text-align: center;
    color: #fff;
    background: transparent;
}
#ladder-duos th, #ladder-solo th {
    font-weight: bold;
    text-transform: none;
    letter-spacing: normal;
}
#ladder-duos th:nth-child(2), #ladder-duos td:nth-child(2),
#ladder-solo th:nth-child(2), #ladder-solo td:nth-child(2) {
    text-align: left;
    padding-left: 20px;
}
#ladder-duos tbody tr:hover td, #ladder-solo tbody tr:hover td { background-color: rgba(255, 255, 255, 0.05); }
#ladder-duos tbody tr:first-child td:first-child,
#ladder-solo tbody tr:first-child td:first-child {
    font-weight: bold;
    color: #FFD700;
    text-shadow: 0 0 5px #FFD700;
}
#ladder-duos td:nth-child(n+3), #ladder-solo td:nth-child(n+3) { font-size: 1rem; font-weight: 500; }

/* ── Duo's invite/partner panel ── */
.duos-panel { margin-top: 20px; }
.duos-mine {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.duos-invite-form {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.duos-invite-form label { color: #aaa; font-size: 0.85rem; }
.duos-invites-columns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.duos-invites-columns > div {
    flex: 1;
    min-width: 220px;
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 8px;
}
.duos-invites-columns h4 {
    color: #aaa;
    font-size: 0.82rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid #2a2a2a;
}
.duos-invites-columns ul { list-style: none; padding: 0; margin: 0; }
.duos-invites-columns li {
    padding: 5px 6px;
    border-bottom: 1px solid #222;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.9rem;
    color: #ccc;
}
.duos-invites-columns li:last-child { border-bottom: none; }
.duos-invites-columns li .btn { font-size: 0.75rem; padding: 2px 8px; }

/* ── Main ladder tab switcher — ported from RDL's .ladder-switch pill
   design (RDL CSS/style.css ~L1035). RDL's version carries a lot of extra
   per-division "coming soon" pseudo-elements for divisions Overload doesn't
   have; only the base structure + a hover/checked accent per tab survive
   here. Colors echo RDL's own mapping: Team Anarchy takes D1's orange (the
   default/main ladder), Duo's keeps RDL's duos green, Solo's takes D2's
   cobalt blue. */
.ladder-switch {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 30px;
    padding: 4px;
    position: relative;
    max-width: 500px;
    margin: 12px auto;
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}
.ladder-switch input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}
.ladder-switch label {
    flex: 0 0 auto;
    width: 130px;
    text-align: center;
    padding: 10px 5px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    z-index: 2;
    margin: 2px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid transparent;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.7);
}
.ladder-switch label:hover { transform: translateY(-2px); }

.ladder-switch label[for="team-switch"]:hover,
.ladder-switch input[type="radio"]:checked + label[for="team-switch"] {
    border-color: #FF8C00;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.4);
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.ladder-switch label[for="duos-switch"]:hover,
.ladder-switch input[type="radio"]:checked + label[for="duos-switch"] {
    border-color: #00CC00;
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 200, 0, 0.4);
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.ladder-switch label[for="solo-switch"]:hover,
.ladder-switch input[type="radio"]:checked + label[for="solo-switch"] {
    border-color: #0047AB;
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 71, 171, 0.4);
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .ladder-switch label {
        width: 100px;
        font-size: 12px;
        padding: 8px 5px;
    }
    .ladder-switch { max-width: 95%; }
}