/* Panel d'administration : reprend les couleurs du jeu (styles.css). */
.admin .brand { text-decoration: none; color: var(--gold); font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.brand-sub { color: var(--muted); font-weight: 600; letter-spacing: 0; margin-left: .5rem; font-size: .85em; }
.admin .me { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.chip.live { display: inline-flex; align-items: center; gap: .4rem; }
.chip.live .dot { width: 8px; height: 8px; border-radius: 50%; background: #3fbf7f; box-shadow: 0 0 0 3px rgba(63,191,127,.2); }
.chip.live.stale .dot { background: var(--gold); box-shadow: none; }

.admin-main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid; gap: 16px; }
.admin h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.admin-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: start; }
/* Les tableaux défilent dans leur carte au lieu d'élargir la page. */
.admin-main > *, .admin-grid > * { min-width: 0; }

.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.kpi .label { color: var(--muted); font-size: .82rem; }
.kpi .value { font-size: 1.7rem; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .sub { color: var(--muted); font-size: .8rem; margin-top: 2px; }
.kpi .sub strong { color: var(--text); font-weight: 600; }
.kpi.gold .value { color: var(--gold); }

.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button { background: none; border: 0; color: var(--muted); padding: 6px 12px; border-radius: 7px; cursor: pointer; font: inherit; font-size: .88rem; }
.seg button[aria-selected="true"] { background: var(--gold); color: var(--gold-ink); font-weight: 700; }

.chart { height: 220px; }
.chart svg { width: 100%; height: 100%; display: block; }
.chart .bar { fill: var(--gold); }
.chart .bar:hover { fill: #ffd47a; }
.chart .axis { fill: var(--muted); font-size: 11px; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .val { fill: var(--text); font-size: 11px; font-weight: 600; }

.settings { display: grid; gap: 14px; margin-top: 12px; }
.settings label { display: grid; gap: 6px; font-size: .9rem; color: var(--muted); }
.field { display: flex; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
.field:focus-within { border-color: var(--gold); }
.field input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); padding: 10px 12px; font: inherit; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.field input:focus { outline: none; }
.field .unit { padding: 0 12px; color: var(--muted); }
.hint { font-size: .78rem; }
.example { margin: 0; padding: 10px 12px; border-left: 3px solid var(--gold); background: rgba(242,181,68,.08); border-radius: 0 8px 8px 0; font-size: .9rem; }

.money { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 12px 0; }
.money dt { color: var(--muted); }
.money dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.money dd.neg { color: #ff8a80; }

#user-search { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 9px 12px; font: inherit; min-width: min(320px, 100%); }
.table-wrap { overflow-x: auto; }
.table-wrap.tall { max-height: 420px; overflow-y: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; background: var(--panel); }
table.data td { padding: 9px 10px; border-bottom: 1px solid rgba(36,69,58,.5); white-space: nowrap; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.pos { color: #6fdc9c; }
table.data td.neg { color: #ff8a80; }
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3fbf7f; margin-left: 6px; vertical-align: middle; }
.badge { font-size: .72rem; border: 1px solid var(--gold); color: var(--gold); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
tr.adjust-row td { background: var(--panel-2); white-space: normal; }
.adjust { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.adjust input { background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; font: inherit; }
.adjust input[name="amount"] { width: 130px; }
.adjust input[name="reason"] { flex: 1; min-width: 200px; }
.btn.small { padding: 6px 10px; font-size: .85rem; }

.audit { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; max-height: 420px; overflow-y: auto; }
.audit li { border-left: 2px solid var(--line); padding-left: 10px; font-size: .9rem; }
.audit .when { color: var(--muted); font-size: .78rem; }
.empty { color: var(--muted); text-align: center; padding: 18px; }

@media (max-width: 640px) {
  .brand-sub { display: none; }
  .admin .topbar { flex-wrap: wrap; gap: 8px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi { padding: 12px; }
  .kpi:last-child:nth-child(odd) { grid-column: span 2; }
  .card-head .seg { width: 100%; }
  .seg button { flex: 1; padding: 6px 4px; }
  #user-search { width: 100%; }
  .kpi .value { font-size: 1.4rem; }
}

/* Onglets */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a { color: var(--muted); text-decoration: none; padding: 10px 14px; border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 600; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.tab { display: grid; gap: 16px; }
.tab[hidden] { display: none; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters input, .filters select { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 9px 12px; font: inherit; }
.filters input { min-width: min(260px, 100%); }
table.data.clickable tbody tr { cursor: pointer; }
table.data.clickable tbody tr:hover td, table.data.clickable tbody tr:focus td { background: var(--panel-2); }
table.data.clickable tbody tr:focus { outline: none; }
table.data td.wrap { white-space: normal; min-width: 180px; }
table.data .small { font-size: .8rem; }
.link { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.link:hover { color: var(--gold); text-decoration-color: var(--gold); }
.back { color: var(--muted); text-decoration: none; font-size: .9rem; justify-self: start; }
.back:hover { color: var(--gold); }

.detail-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.detail-head h1 { margin: 0 0 4px; font-size: 1.5rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.facts { display: grid; grid-template-columns: auto auto; gap: 4px 16px; margin: 0; font-size: .9rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.chip.on { border-color: #3fbf7f; color: #6fdc9c; }
code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; letter-spacing: .1em; }

.kind { font-size: .78rem; border-radius: 6px; padding: 2px 7px; border: 1px solid var(--line); white-space: nowrap; }
.kind-corat { border-color: #d98a3a; color: #f0b072; }
.kind-double_corat { border-color: #e06666; color: #ff9a9a; }
.kind-tapis { border-color: var(--gold); color: var(--gold); }

ul.plain { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
ul.members { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* Grilles : une colonne qui ne s'élargit jamais au-delà de l'écran. */
.admin-main, .tab { grid-template-columns: minmax(0, 1fr); }
.tab > *, .tab .admin-grid > * { min-width: 0; }
.filters { flex-wrap: nowrap; }
.filters input { width: 260px; min-width: 0; }
@media (max-width: 640px) {
  .filters { flex-wrap: wrap; width: 100%; }
  .filters input, .filters select { width: 100%; }
  .detail-head .facts { width: 100%; }
}