/* ---------- Variáveis ---------- */

:root {
    --bg: #ffffff;
    --bg-soft: #fafafa;
    --bg-softer: #f5f5f5;
    --text: #222222;
    --text-muted: #555555;
    --text-subtle: #777777;
    --border: #eeeeee;
    --border-strong: #dddddd;
    --link: #0066cc;
    --link-hover: #004999;
    --accent: #d4a017;

    --error: #b00020;
    --error-bg: #fbe9eb;
    --notice: #2a6a44;
    --notice-bg: #e8f5ec;

    --sport-go-bg: #d8efe0;
    --sport-go-fg: #2a6a44;
    --sport-xadrez-bg: #e6e0ef;
    --sport-xadrez-fg: #6633aa;

    --champion-bg: #fdf3d1;
    --champion-fg: #8a5a00;
    --champion-border: #d4a017;

    --runnerup-bg: #ecf0f5;
    --runnerup-fg: #445a70;
    --runnerup-border: #9aabbd;

    --filter-active-bg: #0066cc;
    --filter-active-fg: #ffffff;

    --card-bg: #ffffff;
    --shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

[data-theme="dark"] {
    --bg: #16171a;
    --bg-soft: #1c1d21;
    --bg-softer: #26282d;
    --text: #e6e6e6;
    --text-muted: #aaaaaa;
    --text-subtle: #888888;
    --border: #2a2c31;
    --border-strong: #3a3d44;
    --link: #6ab4ff;
    --link-hover: #8cc6ff;
    --accent: #e0b53b;

    --error: #ff8a8a;
    --error-bg: #3a1f21;
    --notice: #7ee0a3;
    --notice-bg: #1e3328;

    --sport-go-bg: #1e3a2b;
    --sport-go-fg: #7ee0a3;
    --sport-xadrez-bg: #2c2440;
    --sport-xadrez-fg: #b8a6e6;

    --champion-bg: #3d2f0a;
    --champion-fg: #f0cd63;
    --champion-border: #6b5010;

    --runnerup-bg: #2a2f36;
    --runnerup-fg: #b7c5d3;
    --runnerup-border: #4a5666;

    --filter-active-bg: #4a9eff;
    --filter-active-fg: #0d1117;

    --card-bg: #1c1d21;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

body {
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
    transition: background-color .15s, color .15s;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

/* ---------- Header e footer ---------- */

header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: .6rem;
    margin-bottom: 1.5rem;
}

.brand {
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.brand-icon { color: var(--accent); }

header nav a {
    margin-left: 1rem;
    text-decoration: none;
    color: var(--link);
}
header nav a:hover { text-decoration: underline; }

.header-search {
    display: flex;
    gap: .3rem;
    margin-left: auto;
}
.header-search input[type=text] {
    padding: .3rem .5rem;
    font-size: .9rem;
    width: 200px;
    background: var(--bg-soft);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: 4px;
}
.header-search button {
    padding: .3rem .6rem;
    font-size: .9rem;
}

footer {
    border-top: 1px solid var(--border);
    margin-top: 3rem;
    padding-top: 1rem;
    color: var(--text-subtle);
}

/* ---------- Toggle de tema ---------- */

.theme-toggle {
    background: none;
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: 4px;
    padding: .25rem .5rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    margin-left: .5rem;
}
.theme-toggle:hover { background: var(--bg-softer); }

/* ---------- Tipografia ---------- */

h1 { margin-bottom: 1rem; }
h2 { margin: 0 0 .3rem; font-size: 1.1rem; }
h2 a { text-decoration: none; color: var(--link); }
h2 a:hover { text-decoration: underline; }
h3 { margin: 1.2rem 0 .3rem; font-size: 1rem; }

h2.section-title {
    font-size: 1.3rem;
    margin: 1.5rem 0 .6rem;
    padding-bottom: .3rem;
    border-bottom: 2px solid var(--border-strong);
}
h2.section-title:first-of-type { margin-top: 0; }

p.back { margin-top: 0; }
p.description { color: var(--text-muted); }
small { color: var(--text-subtle); }
code {
    background: var(--bg-softer);
    padding: 0 .3rem;
    border-radius: 2px;
    font-size: .9em;
}

/* ---------- Erro / aviso ---------- */

.error {
    color: var(--error);
    background: var(--error-bg);
    border-left: 3px solid var(--error);
    padding: .4rem .8rem;
    margin: .5rem 0;
    border-radius: 2px;
}
.notice {
    color: var(--notice);
    background: var(--notice-bg);
    border-left: 3px solid var(--notice);
    padding: .4rem .8rem;
    margin: .5rem 0;
    border-radius: 2px;
}

/* ---------- Esporte (chip) ---------- */

.sport {
    display: inline-block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .1rem .45rem;
    border-radius: 3px;
    background: var(--bg-softer);
    color: var(--text-muted);
    vertical-align: middle;
    margin-left: .4rem;
}
.sport-go     { background: var(--sport-go-bg);     color: var(--sport-go-fg); }
.sport-xadrez { background: var(--sport-xadrez-bg); color: var(--sport-xadrez-fg); }

/* ---------- Cards (home) ---------- */

.competition-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .8rem 1rem;
    margin-bottom: .8rem;
    background: var(--card-bg);
    box-shadow: var(--shadow);
}
.competition-card .edition { color: var(--text-muted); font-size: .9rem; margin: .2rem 0 .4rem; }
.competition-card .champions { margin: .3rem 0; }
.competition-card .champions.empty { color: var(--error); font-style: italic; }

/* ---------- Meta (lista inline) ---------- */

ul.meta {
    list-style: none;
    padding-left: 0;
    color: var(--text-muted);
    font-size: .95rem;
    margin: 0 0 1rem;
}
ul.meta li { display: inline-block; margin-right: 1rem; }

/* ---------- Lista de competições (Go/Xadrez) ---------- */

ul.competition-list {
    list-style: none;
    padding-left: 0;
}
ul.competition-list li {
    padding: .5rem 0;
    border-bottom: 1px solid var(--border);
}
ul.competition-list a { text-decoration: none; font-weight: 500; }
ul.competition-list a:hover { text-decoration: underline; }
ul.competition-list small { color: var(--text-subtle); }

/* ---------- Filtros ---------- */

nav.filters {
    margin: 1rem 0;
    font-size: .95rem;
}
nav.filters a {
    display: inline-block;
    margin-right: .5rem;
    padding: .15rem .5rem;
    border-radius: 3px;
    text-decoration: none;
    color: var(--link);
}
nav.filters a:hover { background: var(--bg-softer); }
nav.filters a.active {
    background: var(--filter-active-bg);
    color: var(--filter-active-fg);
}

/* ---------- Histórico ---------- */

table.history {
    width: 100%;
    border-collapse: collapse;
    margin-top: .3rem;
    font-size: .95rem;
}
table.history th,
table.history td {
    text-align: left;
    vertical-align: top;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--border);
}
table.history th { background: var(--bg-soft); }
table.history small { color: var(--text-subtle); }

th.col-champion {
    background: var(--champion-bg);
    color: var(--champion-fg);
    border-bottom: 2px solid var(--champion-border);
}
th.col-runner-up {
    background: var(--runnerup-bg);
    color: var(--runnerup-fg);
    border-bottom: 2px solid var(--runnerup-border);
}

.history-controls {
    margin: 1rem 0 .5rem;
    font-size: .9rem;
    color: var(--text-muted);
}
.history-controls .sep { margin: 0 .3rem; color: var(--border-strong); }
.history-controls a { text-decoration: none; }
.history-controls a:hover { text-decoration: underline; }
.history-controls strong { color: var(--text); }

section.decade { margin-bottom: 2rem; }
h2.decade-title {
    font-size: 1.1rem;
    margin: 1.2rem 0 .4rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: .03em;
}
h2.decade-title::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 14px;
    background: var(--accent);
    margin-right: .5rem;
    vertical-align: middle;
    border-radius: 1px;
}

/* ---------- Badges (campeão / vice) ---------- */

.role-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .1rem .45rem;
    border-radius: 3px;
    vertical-align: middle;
}
.role-badge.role-champion {
    background: var(--champion-bg);
    color: var(--champion-fg);
    border: 1px solid var(--champion-border);
}
.role-badge.role-runner-up {
    background: var(--runnerup-bg);
    color: var(--runnerup-fg);
    border: 1px solid var(--runnerup-border);
}

/* ---------- Busca ---------- */

.toolbar {
    display: flex;
    gap: .5rem;
    margin: 1rem 0;
    max-width: 500px;
}
.toolbar input[type=text] {
    flex: 1;
    padding: .4rem .6rem;
    font-size: 1rem;
    background: var(--bg-soft);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: 4px;
}

table.search-results {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
table.search-results th,
table.search-results td {
    text-align: left;
    padding: .4rem .6rem;
    border-bottom: 1px solid var(--border);
}
table.search-results th { background: var(--bg-soft); }
table.search-results td:first-child {
    width: 120px;
    color: var(--text-subtle);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* ---------- Membros / aliases ---------- */

p.aliases { color: var(--text-muted); }
ul.members {
    list-style: none;
    padding-left: 0;
    columns: 3;
    column-gap: 2rem;
}
ul.members li { padding: .1rem 0; break-inside: avoid; }

/* ---------- Inputs ---------- */

input[type=text],
input[type=number],
input[type=date],
select,
textarea,
button {
    font: inherit;
    color: var(--text);
    background: var(--bg-soft);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: .3rem .5rem;
}
button {
    cursor: pointer;
    background: var(--bg-softer);
}
button:hover { background: var(--border); }

.pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: .9rem;
}
.pagination a {
    text-decoration: none;
    padding: .25rem .6rem;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
}
.pagination a:hover { background: var(--btn-hover); }
.pagination-disabled {
    color: var(--text-subtle);
    padding: .25rem .6rem;
}
.pagination-info { color: var(--text-muted); }

th a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
}
th a:hover { text-decoration: underline; }