/* Admin console — calme, lisible et dense sans perdre l’identité du site. */
.admin-page {
    --admin-accent: #315d4b;
    --admin-accent-soft: rgba(49, 93, 75, .10);
    --admin-line: var(--border-strong);
    width: min(1440px, 100%);
    max-width: 1440px;
    gap: clamp(22px, 3vw, 36px);
}

.admin-page .top-nav {
    min-height: 48px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--admin-line);
}

.admin-page .back-link,
.admin-logout {
    min-height: 40px;
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.admin-page .back-link {
    padding: 9px 13px;
    color: var(--text-muted);
    background: var(--surface);
}

.admin-page .back-link:hover { transform: none; }
.admin-logout-form { margin: 0; }
.admin-logout {
    padding: 8px 12px;
    color: var(--text-muted);
    font-family: inherit;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.admin-logout:hover {
    color: var(--danger);
    border-color: var(--border);
    background: var(--surface);
}
.admin-logout:focus-visible,
.admin-page a:focus-visible,
.admin-page button:focus-visible,
.admin-page input:focus-visible,
.admin-page select:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--gold) 55%, transparent);
    outline-offset: 2px;
}

.admin-hero {
    display: grid;
    gap: 10px;
    max-width: 760px;
    padding-block: clamp(2px, 1vw, 10px) 2px;
}
.admin-hero .eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--admin-accent);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .12em;
}
.admin-hero .eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--admin-accent);
    box-shadow: 0 0 0 4px var(--admin-accent-soft);
}
.admin-hero h1 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 720;
    letter-spacing: -.045em;
    line-height: 1.08;
}
.admin-hero p:last-child {
    max-width: 62ch;
    color: var(--text-muted);
    font-size: .98rem;
    line-height: 1.65;
}

#historyPanel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.admin-toolbar {
    display: grid;
    grid-template-columns: minmax(250px, 1.5fr) repeat(2, minmax(150px, .7fr)) auto;
    align-items: end;
    gap: 12px;
    padding: 18px;
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
}
.admin-toolbar label,
.admin-toolbar .search-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: none;
}
.admin-toolbar input,
.admin-toolbar select {
    width: 100%;
    min-height: 43px;
    padding: 10px 38px 10px 12px;
    color: var(--text);
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: .88rem;
}
.admin-toolbar input[type="search"] { padding-right: 12px; }
.admin-toolbar input::placeholder { color: var(--input-placeholder); }
.admin-toolbar .btn {
    width: auto;
    min-width: 112px;
    min-height: 43px;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: .74rem;
    letter-spacing: .045em;
    text-transform: none;
}

.history-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(350px, .92fr);
    gap: 16px;
    align-items: start;
}
.history-card,
.detail-card {
    min-width: 0;
    padding: 22px;
    gap: 16px;
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
}
.history-heading {
    min-height: 48px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
}
.history-heading h2,
.detail-card > .section-header h2 {
    font-size: 1.08rem;
    font-weight: 680;
    letter-spacing: -.015em;
}
.history-heading h2::before,
.detail-card > .section-header h2::before { content: none; }
.history-heading p,
.detail-card .section-header p {
    margin-top: 5px;
    font-size: .8rem;
}
.loading-status {
    min-height: 18px;
    color: var(--text-muted);
    font-size: .76rem;
    white-space: nowrap;
}

.games-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.game-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 13px 14px;
    color: var(--text);
    text-align: left;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.game-row:hover {
    border-color: var(--border-strong);
    background: var(--surface-inset);
}
.game-row.selected {
    border-color: color-mix(in srgb, var(--admin-accent) 45%, var(--border));
    background: var(--admin-accent-soft);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--admin-accent) 12%, transparent) inset;
}
.game-row-main,
.game-row-meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}
.game-row-main strong { font-size: .88rem; font-weight: 670; }
.game-row-main span {
    overflow: hidden;
    color: var(--text-muted);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.game-row-meta {
    align-items: flex-end;
    color: var(--text-muted);
    font-size: .72rem;
    white-space: nowrap;
}
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 680;
}
.status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.status-active { color: #805c18; background: #f7edcf; border-color: #eddfb5; }
.status-completed { color: #276546; background: #e4f1e8; border-color: #d3e8da; }
.status-abandoned { color: #8e2b3f; background: #f7e8eb; border-color: #efd3d9; }
@media (prefers-color-scheme: dark) {
    .admin-page { --admin-accent: #a8c9b5; --admin-accent-soft: rgba(131, 183, 151, .12); }
    .status-active { color: #e2c47d; background: rgba(176, 125, 42, .15); border-color: rgba(226, 196, 125, .18); }
    .status-completed { color: #93d0a9; background: rgba(47, 125, 91, .18); border-color: rgba(147, 208, 169, .16); }
    .status-abandoned { color: #e4a0ad; background: rgba(182, 35, 58, .16); border-color: rgba(228, 160, 173, .16); }
}

.games-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}
.games-pagination span { color: var(--text-muted); font-size: .78rem; }
.games-pagination .btn {
    width: auto;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: .7rem;
    letter-spacing: 0;
    text-transform: none;
}
.games-pagination .btn:disabled { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }

.detail-card { position: sticky; top: 18px; }
.detail-content { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.detail-summary { display: grid; gap: 0; }
.detail-summary > div {
    display: grid;
    grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr);
    align-items: start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--divider);
}
.detail-summary dt { color: var(--text-muted); font-size: .75rem; }
.detail-summary dd { min-width: 0; color: var(--text); text-align: right; font-size: .8rem; overflow-wrap: anywhere; }
.game-id-link {
    color: var(--admin-accent);
    font: 600 .72rem/1.5 var(--mono);
    text-decoration-color: color-mix(in srgb, var(--admin-accent) 48%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.game-id-link:hover { text-decoration-thickness: 2px; }
.detail-card h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 2px;
    font-size: .86rem;
    font-weight: 680;
}
.detail-card h3 span {
    display: inline-grid;
    min-width: 25px;
    min-height: 25px;
    place-items: center;
    padding-inline: 6px;
    color: var(--text-muted);
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
}
.round-list {
    display: flex;
    max-height: min(48vh, 500px);
    flex-direction: column;
    gap: 7px;
    overflow: auto;
    list-style: none;
    padding-right: 2px;
}
.round-list li {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 10px 11px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.round-index {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .68rem;
    font-weight: 700;
}
.round-list code {
    display: block;
    color: var(--text-muted);
    font: .7rem/1.5 var(--mono);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.empty-detail {
    padding: 16px;
    color: var(--text-muted);
    background: var(--surface-inset);
    border: 1px dashed var(--border-strong);
    border-radius: 9px;
    font-size: .82rem;
    line-height: 1.55;
}
.admin-error {
    padding: 13px 15px;
    color: #8e2b3f;
    background: #f7e8eb;
    border: 1px solid #efd3d9;
    border-radius: 10px;
    font-size: .86rem;
}
.login-card { max-width: 600px; }
.login-card .section-header h2::before { content: none; }
.admin-login {
    align-self: flex-start;
    width: auto;
    padding: 12px 18px;
    border-radius: 9px;
    font-size: .76rem;
    letter-spacing: .03em;
    text-decoration: none;
}
.admin-page + footer,
.admin-page footer { color: var(--text-muted); font-size: .77rem; }
.hidden { display: none !important; }

@media (max-width: 980px) {
    .admin-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-toolbar .search-field { grid-column: 1 / -1; }
    .admin-toolbar .btn { width: 100%; }
    .history-layout { grid-template-columns: minmax(0, 1fr) minmax(290px, .82fr); }
    .detail-card { position: static; }
}
@media (max-width: 720px) {
    .admin-page { padding-inline: 18px; }
    .admin-page .top-nav { padding-bottom: 13px; }
    .admin-hero h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); }
    .admin-toolbar { padding: 15px; }
    .history-layout { grid-template-columns: 1fr; }
    .history-card,
    .detail-card { padding: 17px; }
    .round-list { max-height: 42vh; }
}
@media (max-width: 480px) {
    .admin-toolbar { grid-template-columns: 1fr; }
    .admin-toolbar .search-field { grid-column: auto; }
    .game-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .game-row-meta { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 8px 12px; }
    .game-row-meta time { width: 100%; }
    .detail-summary > div { grid-template-columns: 1fr; gap: 4px; }
    .detail-summary dd { text-align: left; }
    .history-heading { align-items: flex-start; }
}