/* ══════════════════════════════════════════════════════
   ADMIN FIA — Design v2 (APEX control room)
══════════════════════════════════════════════════════ */
:root {
    --f1-red:      #ff1801;
    --f1-red-dark: #c70f00;
    --f1-dark:     #11131c;
    --f1-carbon:   #181b27;
    --accent-tq:   #16d6c8;
    --white:       #ffffff;
    --ink:         #11131c;
    --gray:        #6b7689;
    --line:        #e6e9f0;
    --page:        #0a0b11;
    --font-main:   'Montserrat', sans-serif;
    --font-numbers:'Teko', sans-serif;
}

* { box-sizing: border-box; }

:focus-visible { outline: 3px solid var(--f1-red); outline-offset: 2px; border-radius: 6px; }

body {
    font-family: var(--font-main);
    background: var(--page);
    background-image:
        radial-gradient(circle at 10% -5%, rgba(255,24,1,0.10) 0%, transparent 34%),
        radial-gradient(circle at 100% 0%, rgba(22,214,200,0.07) 0%, transparent 30%);
    background-attachment: fixed;
    color: var(--ink);
    margin: 0; padding: 0;
    min-height: 100vh;
}

h2, h3 { margin-top: 0; font-weight: 800; text-transform: uppercase; }
h2 em { color: var(--f1-red); font-style: italic; }
.text-center { text-align: center; }
.text-red { color: var(--f1-red); font-weight: 800; }
.subtitle { color: var(--gray); font-size: 0.85rem; margin: 0 0 15px; line-height: 1.5; }

/* ── LOGIN ── */
#login-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; position: relative; }
.login-deco { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(-52deg, transparent 0 48px, rgba(255,24,1,0.03) 48px 50px); }
.login-wrapper { max-width: 460px; width: 100%; padding: 20px; position: relative; z-index: 1; }
.page-title { font-size: 2.6rem; font-weight: 800; margin-bottom: 28px; color: #fff; letter-spacing: -1px; }
.page-title span { color: var(--f1-red); font-style: italic; }
.login-box { margin: 0 auto 20px; border-top: 3px solid var(--f1-red); }
.login-sub { margin-bottom: 20px; font-weight: 700; color: var(--gray); }
.login-back { color: #6b7689; font-weight: 600; text-decoration: none; }
.login-back:hover { color: #aebbd0; }

/* ── HEADER ── */
.admin-header-fixed {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 36px; background: rgba(17,19,28,0.85);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: sticky; top: 0; z-index: 50;
}
.admin-header-fixed h2 { color: #fff; margin: 0; font-size: 1.3rem; letter-spacing: 0.5px; }

/* ── GRID : 3 colonnes explicites (placement maîtrisé) ── */
.admin-grid {
    max-width: 1560px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px 32px 40px;
}
.admin-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (max-width: 1080px) {
    .admin-grid { flex-wrap: wrap; }
    .admin-col { flex: 1 1 340px; }
}
@media (max-width: 760px) {
    .admin-header-fixed { padding: 16px 20px; }
    .admin-grid { flex-direction: column; padding: 20px; }
}

/* ── CARD ── */
.card {
    background: var(--white);
    border-radius: 16px;
    padding: 18px 20px;
    border-top: 4px solid var(--accent, var(--f1-dark));
    box-shadow: 0 18px 44px rgba(0,0,0,0.4);
    width: 100%;
}
.card h3 { font-size: 1.05rem; letter-spacing: 0.3px; margin-bottom: 6px; }
.subtitle { margin-bottom: 12px; }
.danger-zone { background: #fff6f6; }

/* ── INPUTS ── */
input[type="text"], input[type="email"], input[type="password"], input[type="datetime-local"], .admin-input, .admin-select {
    width: 100%; padding: 12px 14px; margin-bottom: 12px;
    border: 1px solid var(--line); border-radius: 10px;
    font-family: var(--font-main); font-weight: 600; font-size: 0.9rem;
    color: var(--ink); background: #fff; transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, .admin-select:focus, .admin-input:focus { outline: none; border-color: var(--f1-red); box-shadow: 0 0 0 3px rgba(255,24,1,0.1); }
.admin-select.sm { margin-bottom: 8px; padding: 10px 12px; }
.field-label { display: block; font-size: 0.74rem; font-weight: 800; color: var(--gray); text-transform: uppercase; letter-spacing: 0.4px; margin: 4px 0 6px; }

/* ── BUTTONS ── */
.btn {
    background: var(--f1-red); color: #fff; border: none;
    padding: 13px 20px; font-weight: 800; border-radius: 10px; cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.5px; font-family: var(--font-main);
    font-size: 0.85rem; transition: filter 0.2s, transform 0.1s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.98); }
.btn:disabled { background: #aab2c2; cursor: not-allowed; }
.btn-green { background: #1db96a; }
.btn-gold  { background: #fbbf24; color: #1a1a1a; }
.btn-outline {
    background: transparent; color: var(--accent, var(--ink));
    border: 2px solid var(--accent, var(--ink)); padding: 9px 15px;
    font-weight: 800; border-radius: 10px; cursor: pointer; text-transform: uppercase;
    font-size: 0.76rem; font-family: var(--font-main); transition: background 0.2s;
}
.btn-outline:hover { background: rgba(0,0,0,0.04); }
.admin-header-fixed .btn-outline { color: #fff; border-color: rgba(255,255,255,0.3); }
.admin-header-fixed .btn-outline:hover { background: rgba(255,255,255,0.1); border-color: var(--f1-red); }

/* ── SHORTCUTS ── */
.shortcuts-grid { display: flex; flex-direction: column; gap: 10px; }
.shortcut-btn { text-align: center; padding: 13px; border-radius: 10px; text-decoration: none; font-weight: 800; color: #fff; text-transform: uppercase; font-size: 0.85rem; transition: transform 0.15s, filter 0.2s; }
.shortcut-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.sheets-btn { background: #0f9d58; }
.firebase-btn { background: #f57c00; }

/* ── GESTION PARIS ── */
.info-banner { background: rgba(22,214,200,0.08); border: 1px solid rgba(22,214,200,0.25); color: #0e7c74; padding: 10px 12px; border-radius: 10px; font-size: 0.78rem; font-weight: 600; margin-bottom: 15px; line-height: 1.5; }
.podium-input-box { background: rgba(251,191,36,0.08); padding: 15px; border-radius: 12px; border: 1px solid rgba(251,191,36,0.3); margin-bottom: 15px; }
.bets-list { min-height: 150px; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fafbfc; }

/* ── RÉSOLUTION AVANCÉE (details) ── */
.adv-block { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.adv-block > summary { cursor: pointer; padding: 10px 12px; font-size: 0.78rem; font-weight: 800; color: var(--gray); text-transform: uppercase; letter-spacing: 0.3px; list-style: none; user-select: none; }
.adv-block > summary::-webkit-details-marker { display: none; }
.adv-block > summary:hover { color: var(--ink); }
.adv-block[open] > summary { border-bottom: 1px solid var(--line); }
#full-order-grid, #troll-results-grid { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.order-row, .troll-res-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; }
.troll-res-row { grid-template-columns: 1fr 130px; }
.order-row label, .troll-res-row label { font-size: 0.78rem; font-weight: 700; color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── SCROLLABLE ── */
.scrollable-content::-webkit-scrollbar { width: 7px; }
.scrollable-content::-webkit-scrollbar-track { background: transparent; }
.scrollable-content::-webkit-scrollbar-thumb { background: #ccd3df; border-radius: 4px; }

/* ── CHAT IA ── */
.chat-window { background: #f6f8fb; border: 1px solid var(--line); border-radius: 12px; padding: 15px; display: flex; flex-direction: column; gap: 10px; min-height: 300px; max-height: 420px; overflow-y: auto; margin-bottom: 12px; }
.message { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 0.85rem; line-height: 1.45; }
.user-message { background: var(--f1-dark); color: #fff; align-self: flex-end; border-bottom-right-radius: 2px; }
.ai-message { background: #eafaf3; color: #14794e; align-self: flex-start; border-bottom-left-radius: 2px; border-left: 3px solid #1db96a; }
.chat-input-area { display: flex; gap: 10px; align-items: center; }
.chat-input-area input { margin-bottom: 0; flex: 1; }

/* ── AUDIT LOG ── */
.log-window { background: #0b0e14; color: #36d399; border-radius: 12px; padding: 15px; font-family: monospace; font-size: 0.78rem; display: flex; flex-direction: column; gap: 7px; min-height: 200px; max-height: 320px; overflow-y: auto; }
.log-entry { border-bottom: 1px solid #1c2230; padding-bottom: 4px; }
.log-time { color: #5b6b82; font-size: 0.7rem; margin-right: 8px; }

/* ── ÉDITEUR PARIS SPÉCIAUX ── */
.troll-editor {
    width: 100%; min-height: 220px; max-height: 360px; resize: vertical;
    background: #0b0e14; color: #b8e6df;
    border: 1px solid var(--line); border-radius: 10px; padding: 12px;
    font-family: monospace; font-size: 0.76rem; line-height: 1.5;
}
.troll-editor:focus { outline: none; border-color: var(--accent-tq); }

/* ── NOTIF ── */
.notif-status { font-size: 0.8rem; font-weight: 700; text-align: center; margin-top: 8px; min-height: 1.2em; }