/* ── Layout ─────────────────────────────────────────────────────── */
html, body { height: 100%; margin: 0; }

.admin-shell {
    display: flex;
    height: 100vh;
    height: 100dvh; /* mobile : tient compte de la barre d'URL */
    overflow: hidden;
}

.sidebar {
    width: 220px;
    min-width: 220px;
    background: #0d1117;
    border-right: 1px solid #21262d;
    overflow-y: auto;
}

.sidebar-brand { font-size: 1rem; }

.admin-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    background: #0d1117;
}

/* Barre mobile + fond du tiroir : inertes en bureau. */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

/* ── Mobile (< lg) : sidebar en tiroir off-canvas ouvert par le burger ── */
@media (max-width: 991.98px) {
    .admin-shell { flex-direction: column; }

    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .5rem .75rem;
        background: #0d1117;
        border-bottom: 1px solid #21262d;
        flex-shrink: 0;
    }

    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 1045;
        width: 250px;
        min-width: 250px;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 0 0 24px rgba(0, 0, 0, .6);
    }
    body.nav-open .sidebar { transform: translateX(0); }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, .55);
    }
    body.nav-open .sidebar-backdrop { display: block; }

    .admin-content { padding: 1rem; }

    /* Tables : lignes-cartes empilées — chaque ligne devient un bloc, les cellules coulent
       en ligne et reviennent à la ligne (badges compris), au lieu d'un défilement latéral
       pénible. Les en-têtes disparaissent : dates, durées, ids et badges se lisent seuls. */
    .admin-table { display: block; }
    .admin-table thead { display: none; }
    .admin-table tbody { display: block; }
    .admin-table tbody tr {
        display: block;
        padding: .55rem .25rem;
        white-space: normal;
    }
    .admin-table td {
        display: inline-block;
        border: none;
        padding: .1rem .45rem .1rem 0;
        white-space: normal;
        vertical-align: middle;
    }

    .page-header {
        flex-wrap: wrap;
        gap: .5rem;
    }
}

/* ── Nav pills ──────────────────────────────────────────────────── */
.sidebar .nav-link {
    color: #8b949e;
    font-size: .875rem;
    padding: .4rem .75rem;
    border-radius: .375rem;
    transition: background .15s, color .15s;
}
.sidebar .nav-link:hover  { background: #21262d; color: #e6edf3; }
.sidebar .nav-link.active { background: #1f6feb20; color: #58a6ff; }

/* ── Stat cards ─────────────────────────────────────────────────── */
.stat-card {
    background: #161b22;
    border: 1px solid #21262d;
    border-radius: .75rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.stat-card .stat-icon {
    font-size: 1.75rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
}
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.stat-card .stat-label { font-size: .8rem; color: #8b949e; margin-top: .2rem; }

/* ── Tables ─────────────────────────────────────────────────────── */
.admin-table { font-size: .85rem; }
/* Les joueurs affichés sont des liens vers leur fiche : rends-les identifiables. */
.admin-table a, .admin-table a code {
    color: #58a6ff;
    text-decoration: none;
}
.admin-table a:hover, .admin-table a:hover code { text-decoration: underline; color: #79b8ff; }
.admin-table thead th {
    background: #161b22;
    color: #8b949e;
    font-weight: 500;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .05em;
    border-bottom: 1px solid #21262d;
}
.admin-table tbody tr { border-bottom: 1px solid #21262d; }
.admin-table tbody tr:hover { background: #161b22; }
.admin-table td { vertical-align: middle; color: #e6edf3; }

/* ── Page header ────────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.page-header h1 { font-size: 1.25rem; font-weight: 600; margin: 0; }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge-google  { background: #1a73e820; color: #58a6ff; }
.badge-email   { background: #2ea04320; color: #3fb950; }
.badge-guest   { background: #8b949e20; color: #8b949e; }

/* ── SPARQL editor ──────────────────────────────────────────────── */
.sparql-editor {
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: .85rem;
    background: #0d1117;
    color: #e6edf3;
    border: 1px solid #21262d;
    border-radius: .5rem;
    resize: vertical;
    min-height: 160px;
}
.sparql-editor:focus { outline: none; border-color: #1f6feb; box-shadow: 0 0 0 3px #1f6feb30; }

/* ── Loading spinner ────────────────────────────────────────────── */
.loading-overlay {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #8b949e;
    padding: 3rem 0;
}

/* ── Login page ─────────────────────────────────────────────────── */
.login-wrapper {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background: #0d1117;
}
.login-card {
    background: #161b22;
    border: 1px solid #21262d;
    border-radius: 1rem;
    padding: 2.5rem;
    width: 100%;
    max-width: 380px;
}