/* Vantage RP — Panel V2 : éléments communs à toutes les pages du panel (barre du haut, annonces du staff,
   lignes, fiche <dialog>, notification). Règles : DESIGN.md. Chargé après v2.css, avant la feuille de la page. */

/* ── Barre d'application (panel) ── */
body.app { min-height: 100dvh; }
.appbar { position: sticky; top: 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px); background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.appbar::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 1rem; background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent); pointer-events: none; }
.appbar-in { max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter); height: 2.75rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: .9375rem; }
.appbar .back { color: var(--violet-hi); display: inline-flex; align-items: center; min-height: 2.75rem; justify-self: start; }
.appbar .back::before { content: '‹'; font-size: 1.5rem; line-height: 1; margin-right: .25rem; transform: translateY(-1px); }
.appbar .title { font-weight: 600; letter-spacing: -.012em; opacity: 0; transition: opacity 200ms var(--ease-out); }
.appbar.scrolled .title { opacity: 1; }
.appbar .who { justify-self: end; color: var(--muted); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ── Messages du staff ── */
.ga-list { width: 100%; max-width: 72rem; margin: .75rem auto 0; padding: 0 var(--gutter); display: grid; gap: .5rem; }
.ga { display: flex; align-items: center; gap: .75rem; padding: .75rem .75rem .75rem 1rem; border-radius: var(--r-card); background: var(--tile); font-size: .9375rem; color: var(--text-2); box-shadow: inset 3px 0 0 var(--violet); }
.ga span { flex: 1; }
.ga-warning { box-shadow: inset 3px 0 0 var(--amber); } .ga-error { box-shadow: inset 3px 0 0 var(--red); } .ga-success { box-shadow: inset 3px 0 0 var(--green); }
.ga-x { position: relative; flex: none; width: 2rem; height: 2rem; border-radius: 50%; }
.ga-x::before, .ga-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: .625rem; height: 1.5px; background: var(--muted); }
.ga-x::before { transform: translate(-50%, -50%) rotate(45deg); } .ga-x::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Lignes cliquables (coffres, marchés, joueurs) */
button.row { width: 100%; text-align: left; cursor: pointer; transition: background-color 160ms ease; }
button.row:active { background: var(--tile-2); }
@media (hover: hover) and (pointer: fine) { button.row:hover { background: #17161B; } }
.row .ico .glyph { width: 55%; height: 55%; color: var(--text-2); }
.row .ico img { width: 72%; height: 72%; object-fit: contain; }
.row[aria-pressed="true"] { background: rgba(139,92,246,.14); }
.ac-red { color: var(--red); }
.empty { color: var(--muted); text-align: center; padding: 3rem 1rem; }

/* ── Feuille (dialog natif) : bas de l'écran sur mobile, centrée sur ordinateur ── */
.sheet-dlg { margin: auto; padding: 0; border: 0; background: transparent; color: var(--text); width: min(28rem, calc(100% - 2rem)); max-height: min(44rem, 90dvh); overflow: visible; }
.sheet-dlg::backdrop { background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dlg-in { position: relative; background: #161519; border-radius: 1.5rem; padding: 1.75rem; max-height: inherit; overflow-y: auto; overscroll-behavior: contain; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2rem 4rem rgba(0,0,0,.6); }
.sheet-dlg[open] .dlg-in { animation: dlg-in 240ms var(--ease-out); }
@keyframes dlg-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.dlg-x { position: absolute; top: .875rem; right: .875rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--tile-2); }
.dlg-x::before, .dlg-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: .75rem; height: 1.5px; background: var(--muted); border-radius: 1px; }
.dlg-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.dlg-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.dlg-x:active { transform: scale(.94); }
.d-top { display: flex; align-items: center; gap: 1rem; padding-right: 2rem; }
.d-ico { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 1.125rem; background: var(--tile); display: grid; place-items: center; }
.d-ico img { width: 70%; height: 70%; object-fit: contain; }
.d-ico .glyph { width: 50%; height: 50%; color: var(--text-2); }
.d-top .h3 { font-size: 1.375rem; }
.d-desc { margin-top: 1rem; color: var(--text-2); font-size: .9375rem; line-height: 1.5; }
.d-info { margin-top: 1.25rem; background: var(--tile); border-radius: var(--r-card); overflow: hidden; }
.d-info:empty { display: none; }
.d-info div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; font-size: .9375rem; }
.d-info div + div { box-shadow: inset 0 1px 0 var(--line); }
.d-info dt { color: var(--muted); }
.d-info dd { color: var(--text); text-align: right; overflow-wrap: anywhere; }
.d-actions { display: grid; gap: .5rem; margin-top: 1.5rem; }
.d-actions .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.dlg-in .group-title { margin-top: 1.5rem; }
.btn.danger { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1px rgba(255,69,58,.35); }
.btn[disabled] { opacity: .45; pointer-events: none; }
/* ── Toast ── */
.toast { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 120; max-width: calc(100% - 2rem); padding: .75rem 1.125rem; border-radius: var(--pill); background: rgba(40,39,44,.92); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 .75rem 2rem rgba(0,0,0,.5); font-size: .9375rem; color: var(--text); opacity: 0; transform: translate(-50%, .75rem); pointer-events: none; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.err { color: #FF8A80; }

/* ── Mobile : la fiche monte du bas de l'écran ── */
@media (max-width: 734px) {
  .sheet-dlg { width: 100%; max-width: none; max-height: 88dvh; margin: auto 0 0; }
  .dlg-in { border-radius: 1.5rem 1.5rem 0 0; padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
  .sheet-dlg[open] .dlg-in { animation: sheet-up 320ms var(--ease-drawer); }
  @keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .sheet-dlg[open] .dlg-in { animation: fade 160ms ease; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  .toast { transition: opacity 160ms ease; }
}
@media (prefers-reduced-transparency: reduce) {
  .appbar, .toast { background: #1C1C1E; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── Pages d'état (page fermée, accès staff, menotté, boutique en refonte…) : une carte centrée, un seul bouton ── */
.status-page { --t: var(--violet-hi); min-height: calc(100dvh - 2.75rem); display: grid; place-items: center; padding: 2rem var(--gutter) 4rem; }
.status-page[data-tone="red"] { --t: #FF6B61; } .status-page[data-tone="amber"] { --t: var(--amber); } .status-page[data-tone="blue"] { --t: #5AC8FA; } .status-page[data-tone="pink"] { --t: var(--pink); } .status-page[data-tone="green"] { --t: var(--green); }
.status-card { width: 100%; max-width: 28rem; padding: 2rem 1.75rem 1.75rem; border-radius: 1.5rem; text-align: center; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--tile); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.05), 0 2rem 4rem -2rem rgba(0,0,0,.8); }
.status-ico { width: 4rem; height: 4rem; margin: 0 auto 1.25rem; display: grid; place-items: center; border-radius: 1.25rem; color: var(--t); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--t) 26%, transparent), transparent 72%), #17161B; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 30%, transparent); }
.status-ico svg { width: 1.875rem; height: 1.875rem; }
.status-text { margin-top: .75rem; font-size: 1rem; line-height: 1.5; color: var(--text-2); }
.status-reason { margin-top: 1.25rem; padding: .875rem 1rem; border-radius: var(--r-card); background: #17161B; box-shadow: inset 3px 0 0 var(--t); text-align: left; }
.status-reason span { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.status-reason b { display: block; margin-top: .25rem; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.status-hint { margin-top: 1rem; font-size: .875rem; line-height: 1.5; color: var(--muted); }
.status-meta { margin-top: .75rem; font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.status-card .btn { margin-top: 1.5rem; }
.status-alt { display: inline-block; margin-top: 1rem; font-size: .9375rem; color: var(--violet-hi); }
.status-alt + .status-alt { margin-left: 1.25rem; }
/* Accès retiré d'un serveur : ouvrir un autre de ses serveurs (20/10/2026) */
.status-switch { width: 100%; margin: 1.75rem 0 .25rem; text-align: left; }
.status-switch .group-title { margin: 0 0 .625rem .25rem; }
.status-switch .row { width: 100%; text-align: left; color: inherit; font: inherit; background: transparent; border: 0; cursor: pointer; }
.status-switch .row:hover { background: var(--tile-2); }
.status-switch .row[disabled] { opacity: .5; cursor: default; }
.status-switch .row .ico { font-weight: 700; }
body:not(.has-pnav) .status-page { min-height: 100dvh; }

/* ── Documentation du panel (sommaire + article) ── */
.pdoc { width: 100%; max-width: 72rem; margin: 0 auto; padding: 1.75rem var(--gutter) calc(4rem + env(safe-area-inset-bottom, 0px)); }
.pdoc-head .h1 { font-size: 2.75rem; }
.pdoc-sub { margin-top: .5rem; max-width: 38rem; font-size: 1.0625rem; line-height: 1.47; color: var(--text-2); }
.pdoc-list { margin-top: 2rem; max-width: 52rem; }
.pdoc-list a.row { transition: background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .pdoc-list a.row:hover { background: #17161B; } }
.pdoc-help { margin-top: 1.5rem; }
.pdoc-help a, .pdoc .link { color: var(--violet-hi); }
.pdoc-title { margin-top: .5rem; font-size: clamp(2rem, 4vw, 2.75rem); }
.pdoc-layout { margin-top: 2rem; }
.pdoc .toc { top: 1.5rem; max-height: calc(100svh - 3rem); }
.pdoc .prose { max-width: 44rem; }
.pdoc-nav { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; max-width: 44rem; margin-top: 3rem; }
.pn { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.125rem; border-radius: var(--r-card); background: var(--tile); transition: background-color 160ms ease; }
.pn span { font-size: .8125rem; color: var(--muted); }
.pn b { font-weight: 600; color: var(--text); }
.pn.next { grid-column: 2; text-align: right; }
@media (hover: hover) and (pointer: fine) { .pn:hover { background: #17161B; } }
@media (max-width: 1199px) { .pdoc .toc { top: calc(2.75rem + 1.5rem); } }
@media (max-width: 734px) {
  .pdoc { padding-top: 1.25rem; }
  .pdoc-head .h1 { font-size: 2.125rem; }
  .pdoc-date { display: none; }
  .pdoc-nav { grid-template-columns: 1fr; }
  .pn.next { grid-column: auto; }
}