/* Page d'administration (/admin) : complète style.css (couleurs, fenêtres, formulaires, onglets). */
:root {
  --surface: #111413;
  --surface-2: #161a19;
  --hover: rgba(255, 255, 255, .06);
  --danger: #ff9b9b;
  --grid: #242826;
  --axis: #3a3f3c;
}
body.admin { min-height: 100vh; }
body.admin::before { z-index: 0; }
.admin h1 { margin: 6px 0 0; font-size: 30px; line-height: 1.1; letter-spacing: -.05em; }
.admin h2 { margin: 0 0 14px; font-size: 17px; letter-spacing: -.03em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Boutons */
.button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 4px; color: #080909; background: var(--coral); font: 700 13px var(--sans); cursor: pointer; white-space: nowrap; transition: opacity .2s; }
.button:hover { opacity: .88; }
.button:disabled { opacity: .5; cursor: default; }
.button-small { padding: 7px 12px; font-size: 12px; }
.button-ghost { border: 1px solid var(--line); color: var(--ink); background: transparent; }
.button-ghost:hover { background: var(--hover); opacity: 1; }
.button-danger { color: #080909; background: var(--danger); }
.icon-ghost { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; cursor: pointer; }
.icon-ghost:hover:not(:disabled) { background: var(--hover); }
.icon-ghost:disabled { opacity: .35; cursor: default; }
.link-button { align-self: center; padding: 4px; border: 0; color: var(--muted); background: transparent; font: 600 12px var(--sans); text-decoration: underline; cursor: pointer; }
.admin .form-submit { min-height: 44px; }
.admin .account-form textarea, .admin .account-form select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: rgba(255,255,255,.08); font: 14px/1.5 var(--sans); outline: none; resize: vertical; }
.admin .account-form textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(30, 215, 96, .18); }
.admin .account-form input:disabled { opacity: .55; }
.form-fields { display: flex; flex-direction: column; gap: 14px; }
.field-hint { color: var(--muted); font: 400 11px/1.5 var(--sans); }

/* Connexion */
.admin-login { position: relative; z-index: 1; display: grid; min-height: 100vh; place-items: center; padding: 16px; }
.login-card { width: min(380px, 100%); padding: 28px 24px; border: 1px solid var(--line); border-top: 2px solid var(--coral); border-radius: 6px; background: var(--surface); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.login-brand, .sidebar-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-brand img, .sidebar-brand img { width: 40px; height: 40px; }
.login-brand span, .sidebar-brand span { display: flex; flex-direction: column; gap: 2px; }
.login-brand strong, .sidebar-brand strong { color: var(--coral); font-size: 16px; letter-spacing: -.03em; }
.login-brand small, .sidebar-brand small { color: var(--muted); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.login-help { margin: 0; color: #c4bfb8; font-size: 13px; line-height: 1.55; }
.login-help i { color: var(--coral); }
.login-note { color: var(--muted); font-size: 11px; }
#codeForm input { font: 500 22px var(--mono); letter-spacing: .3em; text-align: center; }

/* Mise en page */
.admin-shell { position: relative; z-index: 1; display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 22px 14px; border-right: 1px solid var(--line); background: rgba(17, 20, 19, .92); }
.sidebar-brand { padding: 0 8px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav button { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 5px; color: #c4bfb8; background: transparent; font: 600 13px var(--sans); text-align: left; cursor: pointer; }
.sidebar-nav button i { width: 18px; color: var(--muted); text-align: center; }
.sidebar-nav button:hover { color: var(--ink); background: var(--hover); }
.sidebar-nav button.active { color: var(--ink); background: rgba(30, 215, 96, .12); }
.sidebar-nav button.active i { color: var(--coral); }
.nav-badge { margin-left: auto; min-width: 20px; padding: 2px 6px; border-radius: 99px; color: #080909; background: var(--coral); font: 700 10px/1.4 var(--mono); text-align: center; }
.sidebar-foot { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.sidebar-foot small { overflow: hidden; padding: 0 12px 6px; color: var(--muted); font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.sidebar-foot a, .sidebar-foot button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font: 600 12px var(--sans); text-decoration: none; cursor: pointer; }
.sidebar-foot a:hover, .sidebar-foot button:hover { color: var(--ink); background: var(--hover); }
.admin-main { min-width: 0; padding: 30px clamp(16px, 3vw, 40px) 60px; }
.view { max-width: 1180px; margin: 0 auto; animation: slide-in .2s both; }
.view-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.view-head .count { color: var(--muted); font: 400 16px var(--mono); letter-spacing: 0; }
.view-note { max-width: 760px; margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.view-note:empty { display: none; }
.view-note.warning { color: var(--yellow); }
.empty { padding: 36px 16px; border: 1px dashed rgba(255,255,255,.2); border-radius: 6px; color: var(--muted); font-size: 13px; text-align: center; }
.banner { display: flex; align-items: center; gap: 12px; max-width: 1180px; margin: 0 auto 22px; padding: 12px 16px; border: 1px solid rgba(185, 242, 39, .35); border-radius: 6px; color: #e6f5b8; background: rgba(185, 242, 39, .07); font-size: 13px; }
.banner i { color: var(--yellow); }
.banner .button { margin-left: auto; }

/* Barres d'outils */
.toolbar, .filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-tabs { display: inline-grid; grid-template-columns: auto auto; margin: 0; }
.admin-tabs .tab { padding: 8px 14px; }
.admin-tabs .tab span { opacity: .7; font-family: var(--mono); font-weight: 400; }
.search { display: flex; align-items: center; gap: 8px; flex: 0 1 280px; min-width: 180px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.05); }
.search i { color: var(--muted); font-size: 12px; }
.search input { width: 100%; min-width: 0; padding: 9px 0; border: 0; outline: none; color: var(--ink); background: transparent; font: 13px var(--sans); }
.search:focus-within { border-color: var(--coral); }
.select select { padding: 9px 30px 9px 12px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2399958f' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; font: 13px var(--sans); appearance: none; -webkit-appearance: none; cursor: pointer; }
.select select option { background: #111413; }
.segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: 5px; background: rgba(255,255,255,.06); }
.segmented button { padding: 7px 14px; border: 0; border-radius: 3px; color: var(--muted); background: transparent; font: 700 12px var(--sans); cursor: pointer; }
.segmented button[aria-checked="true"] { color: #080909; background: var(--coral); }
.period-nav { display: flex; align-items: center; gap: 10px; }
.period-nav strong { min-width: 190px; font-size: 14px; text-align: center; }

/* Tableaux */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tbody tr:hover { background: rgba(255,255,255,.025); }
.data-table thead th { color: var(--muted); font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.data-table .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.data-table .muted { color: var(--muted); }
.data-table .wrap { min-width: 220px; max-width: 560px; color: #c4bfb8; line-height: 1.5; }
.data-table .nowrap { white-space: nowrap; }
.data-table .actions { width: 48px; padding: 6px 10px; text-align: right; }
.data-table strong { font-weight: 700; }
.sort-button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; color: inherit; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.sort-button:hover { color: var(--ink); }
.sort-button i { font-size: 9px; opacity: .35; }
th[aria-sort="ascending"] .sort-button, th[aria-sort="descending"] .sort-button { color: var(--coral); }
th[aria-sort="ascending"] .sort-button i, th[aria-sort="descending"] .sort-button i { opacity: 1; }
.num .sort-button { flex-direction: row-reverse; }
.more-button { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border: 1px solid transparent; border-radius: 5px; color: var(--muted); background: transparent; cursor: pointer; }
.more-button:hover, .more-button[aria-expanded="true"] { border-color: var(--line); color: var(--ink); background: var(--hover); }
.more-button:disabled { cursor: wait; }
.chip-label { display: inline-block; padding: 2px 7px; border-radius: 99px; color: #080909; background: var(--coral); font: 700 10px var(--mono); vertical-align: 1px; }
.chip-label.neutral { color: var(--ink); background: rgba(255,255,255,.12); }
.chip-label.warn { background: var(--yellow); }
.chip-label.danger { background: var(--danger); }
.streak-cell small { margin-left: 6px; color: var(--muted); font: 11px var(--mono); }

/* Menu « … » des lignes */
.row-menu { position: fixed; z-index: 20; min-width: 230px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: #151918; box-shadow: 0 16px 40px rgba(0,0,0,.55); animation: slide-in .14s both; }
.row-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 4px; color: var(--ink); background: transparent; font: 600 13px var(--sans); text-align: left; cursor: pointer; }
.row-menu button i { width: 16px; color: var(--muted); text-align: center; }
.row-menu button:hover:not(:disabled), .row-menu button:focus-visible { background: var(--hover); outline: none; }
.row-menu button.danger, .row-menu button.danger i { color: var(--danger); }
.row-menu button:disabled { opacity: .4; cursor: default; }
.row-menu hr { margin: 5px 0; border: 0; border-top: 1px solid var(--line); }

/* Audience */
.audience { display: flex; flex-direction: column; gap: 18px; transition: opacity .2s; }
.audience.loading { opacity: .5; pointer-events: none; }
.kpi-group h2 { margin-bottom: 10px; color: var(--muted); font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.kpi-label { color: var(--muted); font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.kpi-value { font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; }
.kpi-value small { margin-left: 6px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.kpi-delta { color: var(--muted); font-size: 11px; }
.kpi-delta i { margin-right: 3px; font-size: 9px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.card { min-width: 0; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.card-wide { grid-column: 1 / -1; }
.card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head h2 { margin: 0; }
.card-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.legend-row { display: flex; flex-wrap: wrap; gap: 6px 16px; color: #c4bfb8; font-size: 12px; }
.legend-row span { display: inline-flex; align-items: center; gap: 6px; }
.legend-row i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.legend-row i.line { height: 2px; border-radius: 1px; }
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; }
.chart .tick { fill: var(--muted); font: 10px var(--mono); font-variant-numeric: tabular-nums; }
.chart .hit { fill: transparent; cursor: default; outline: none; }
.chart .hit:hover, .chart .hit:focus-visible { fill: rgba(255,255,255,.04); }
.chart .crosshair { stroke: rgba(255,255,255,.35); stroke-width: 1; pointer-events: none; }
.chart .end-label { fill: var(--ink); font: 600 11px var(--sans); }
.chart-empty { padding: 50px 0; color: var(--muted); font-size: 12px; text-align: center; }
.chart-tooltip { position: fixed; z-index: 30; min-width: 150px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: #1b201e; box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 12px; pointer-events: none; }
.chart-tooltip .tt-title { margin-bottom: 6px; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.chart-tooltip .tt-row { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.chart-tooltip .tt-row i { display: inline-block; width: 12px; height: 2px; border-radius: 1px; }
.chart-tooltip .tt-row strong { min-width: 28px; font-variant-numeric: tabular-nums; }
.chart-tooltip .tt-row span { color: #c4bfb8; }
.data-view { margin-top: 10px; }
.data-view summary { color: var(--muted); font-size: 11px; cursor: pointer; }
.data-view summary:hover { color: var(--ink); }
.data-view .table-wrap { max-height: 280px; margin-top: 8px; overflow: auto; }
.data-view .data-table th, .data-view .data-table td { padding: 6px 10px; font-size: 12px; }
.bar-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bar-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 12px; }
.bar-list .bar-label { overflow: hidden; color: #c4bfb8; text-overflow: ellipsis; white-space: nowrap; }
.bar-list .bar-value { font-variant-numeric: tabular-nums; font-weight: 700; }
.bar-list .bar-value small { margin-left: 4px; color: var(--muted); font-weight: 400; }
.bar-list .bar-track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.05); }
.bar-list .bar-fill { height: 100%; min-width: 2px; border-radius: 0 3px 3px 0; }

/* Messages */
.messages { display: flex; flex-direction: column; gap: 10px; }
.message { position: relative; padding: 16px 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.message.unread { border-left: 3px solid var(--coral); }
.message-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-right: 40px; }
.message-head strong { font-size: 14px; }
.message-head small { color: var(--muted); font: 11px var(--mono); }
.message-body { margin: 10px 0 0; color: #c4bfb8; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.message .more-button { position: absolute; top: 12px; right: 12px; }

/* Paramètres */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.card p { color: #c4bfb8; font-size: 13px; line-height: 1.6; }
.status-line { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 700; }
.status-line i { font-size: 16px; }
.status-ok, .card .status-ok { color: var(--coral); }
.status-warn, .card .status-warn { color: var(--yellow); }
.status-off, .card .status-off { color: var(--danger); }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qr { display: grid; place-items: center; width: 200px; height: 200px; margin: 12px 0; padding: 10px; border-radius: 6px; background: #fff; }
.qr svg { width: 100%; height: 100%; }
.secret { display: block; margin: 8px 0 14px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 4px; font: 13px var(--mono); letter-spacing: .08em; word-break: break-all; user-select: all; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 12px 0; padding: 0; list-style: none; }
.recovery-codes li { padding: 8px; border: 1px solid var(--line); border-radius: 4px; font: 14px var(--mono); text-align: center; }
.system-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 24px; margin: 0; }
.system-list div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.system-list dt { color: var(--muted); }
.system-list dd { margin: 0; font-weight: 700; text-align: right; }

/* Fenêtres */
.admin .modal { width: min(460px, calc(100% - 32px)); }
.admin .modal-wide { width: min(720px, calc(100% - 32px)); }
.admin .modal h2 { margin-bottom: 16px; }
.info-artist { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.info-artist img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.info-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 13px; }
.info-list dt { color: var(--muted); }
.info-list dd { margin: 0; }
.info-section { margin: 18px 0 8px; color: var(--muted); font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 900px) {
  .admin-shell { display: block; }
  .sidebar { position: sticky; z-index: 5; flex-direction: row; align-items: center; gap: 8px; height: auto; padding: 8px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-brand { display: none; }
  .sidebar-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .sidebar-nav button { flex: 0 0 auto; padding: 9px 11px; }
  .sidebar-nav button span { display: none; }
  .sidebar-nav button.active span { display: inline; }
  .sidebar-foot { flex-direction: row; margin: 0 0 0 auto; padding: 0; border: 0; }
  .sidebar-foot small, .sidebar-foot a { display: none; }
  .sidebar-foot button { padding: 9px; font-size: 0; }
  .sidebar-foot button i { font-size: 14px; }
  .admin-main { padding: 22px 16px 48px; }
}
@media (max-width: 560px) {
  .admin h1 { font-size: 25px; }
  .period-nav { width: 100%; justify-content: space-between; }
  .period-nav strong { min-width: 0; }
  .search { flex: 1 1 100%; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi-value { font-size: 22px; }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .banner { flex-wrap: wrap; }
}

/* Fiche artiste : champs manquants et liens */
.missing-list { display: grid; gap: 6px; margin: 0 0 14px; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.info-list + .status-line { margin-top: 16px; }
.report-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.report-links a { text-decoration: none; }

/* Historique des propositions (alertes anti-triche) */
.info-section .link-button { margin-left: 8px; padding: 0; font: 600 11px var(--sans); letter-spacing: 0; text-transform: none; }
.guess-days { display: grid; gap: 10px; }
.guess-day { padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.guess-day.flagged { border-color: var(--yellow); }
.guess-day header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.guess-day header span:not(.chip-label) { color: var(--muted); }
.guess-meta { margin: 4px 0 8px; color: var(--muted); font: 11px var(--mono); }
.guess-list { display: grid; gap: 3px; margin: 0; padding-left: 22px; font-size: 13px; }
.guess-list li.won { color: var(--coral); font-weight: 700; }
.guess-list li.offline { color: var(--muted); font-style: italic; }
.guess-time { display: inline-block; min-width: 64px; margin-right: 8px; color: var(--muted); font: 11px var(--mono); }
.guess-notes { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.6; }