/* ============================================================
   admin.css · l'administration, version 3 « vitrine »
   Même langage que le site public : display géant pour les titres, mono pour
   les libellés, panneaux de verre aux crochets HUD. Les identifiants et les
   classes que admin.js et admin-map.js attendent sont tous conservés.
   ============================================================ */

.admin-main { position: relative; z-index: 2; min-height: 100svh; }

/* ---------- Connexion ---------- */
.login { min-height: 100svh; display: grid; place-items: center; padding: calc(var(--nav-h) + 2vh) var(--hud-inset) 8vh; }
.login-card { width: min(460px, 100%); padding: 34px 36px 30px; display: grid; gap: 16px; }
.login-title { font-size: clamp(40px, 4.5vw, 64px); }
.login-text { margin: 0 0 6px; color: var(--ink-mid); font-size: 14px; line-height: 1.6; }
.error { min-height: 18px; margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: var(--danger-ink); }
.login-foot { margin: 0; }
.login.leaving { animation: view-out .3s var(--exit) forwards; }

/* ---------- Ossature ---------- */
/* minmax(0, 1fr) : sans le 0, un tableau large élargirait la colonne au-delà
   de l'écran et plus rien ne passerait à la ligne sur mobile. */
.admin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; padding: calc(var(--nav-h) + 48px) calc(var(--hud-inset) + 34px) 10vh; max-width: var(--max); margin: 0 auto; }
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; }
.sec-head { display: grid; gap: 12px; min-width: 0; }
.sec-title { font-size: clamp(34px, 5.5vw, 84px); overflow-wrap: anywhere; }
.view, .view > * { min-width: 0; }
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* état des modifications : la pastille s'allume en ambre quand rien n'est enregistré */
.status { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-meta); display: inline-flex; align-items: center; gap: 8px; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-ghost); }
.status.has { color: var(--ink-hi); }
.status.has::before { background: var(--warn); box-shadow: 0 0 8px var(--warn); }

.tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: .6rem 1.1rem; border: 1px solid var(--line-1); border-radius: 9999px; background: transparent; color: var(--ink-mid); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: all .25s var(--ease-out), transform .3s cubic-bezier(.34,1.5,.64,1); }
.tab svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab:hover { border-color: var(--line-2); color: var(--ink-hi); }
.tab:active { transform: scale(.94); }
.tab[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #050506; animation: tab-pop .45s cubic-bezier(.34,1.5,.64,1); }
@keyframes tab-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.tab-ext { color: var(--ink-meta); }
.nav-badge { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9999px; background: var(--red); color: #fff; font: 700 10px/1 var(--f-mono); display: grid; place-items: center; }

.view { display: grid; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .grid-2 { grid-template-columns: 1fr; } }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.help { margin: 0; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-meta); }
.help kbd { margin: 0 2px; }
.empty { margin: 0; padding: 40px; text-align: center; font-size: 13.5px; color: var(--ink-meta); }
.muted { color: var(--ink-meta); }

/* ---------- Table des prix ---------- */
.table-scroll { max-height: calc(100vh - 420px); min-height: 240px; }
.table-edit { min-width: 860px; }
.table tr.changed td { background: rgba(251,191,36,.06); }
.c-idx { width: 48px; color: var(--ink-decor); font: 500 11px var(--f-mono); }
.c-diff { width: 130px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; font-family: var(--f-mono); }
.c-act { width: 44px; text-align: right; }
.c-cat { width: 150px; }
.veh { display: flex; align-items: center; gap: 12px; }
.veh img { width: 60px; height: 34px; object-fit: contain; border-radius: 6px; background: var(--surface-1); border: 1px solid var(--line-0); flex: none; }
.veh-name { font-family: var(--f-display); font-style: italic; text-transform: uppercase; font-size: 13px; color: var(--ink-hi); }
.veh-model { font: 500 10.5px var(--f-mono); color: var(--ink-decor); }
/* pastilles de catégorie : douze teintes pour distinguer des familles dans un
   tableau dense, nulle part ailleurs */
.cat { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mid); }
.cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--ink-ghost)); }
.cat-sports { --c: #f87171; } .cat-super { --c: #fb923c; } .cat-muscle { --c: #a78bfa; } .cat-sports-classics { --c: #fbbf24; }
.cat-sedans { --c: #60a5fa; } .cat-coupes { --c: #22d3ee; } .cat-suvs { --c: #34d399; } .cat-compacts { --c: #a1a1aa; }
.cat-groupe-6 { --c: #a3e635; } .cat-mecano { --c: #818cf8; } .cat-taxi { --c: #fde047; } .cat-lust-resort { --c: #f472b6; }
.bar { height: 5px; border-radius: 3px; background: var(--surface-1); overflow: hidden; width: 120px; display: inline-block; vertical-align: middle; margin-left: 10px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, rgba(var(--red-lum), .4), var(--red)); }
.price-in { width: 130px; height: 34px; text-align: right; padding: 0 10px; border-radius: 9999px; background: #0000006b; border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 3px #0009; color: var(--ink-hi); outline: 0; font-family: var(--f-mono); font-variant-numeric: tabular-nums; -moz-appearance: textfield; transition: all var(--fast); }
.price-in::-webkit-outer-spin-button, .price-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-in:focus { border-color: var(--line-3); }
.price-in.dirty { border-color: rgba(251,191,36,.6); color: #fff; font-weight: 600; }
.diff-up { color: var(--bad); } .diff-down { color: var(--ok); } .diff-none { color: var(--ink-ghost); }
.row-reset { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-mid); cursor: pointer; display: inline-grid; place-items: center; visibility: hidden; }
.row-reset:hover { background: var(--hover); color: var(--ink); }
.row-reset svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
tr.changed .row-reset { visibility: visible; }

/* ---------- Carte et blips ---------- */
.blips-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.blips-layout { display: grid; grid-template-columns: 250px 1fr 300px; gap: 16px; min-height: 560px; }
.map-panel { position: relative; overflow: hidden; }
.admin-map-panel { min-height: 560px; height: calc(100vh - 380px); background: #0d2b4f; }
#admin-map { position: absolute; inset: 0; background: #0d2b4f; }
.hud #admin-coords { letter-spacing: .06em; text-transform: none; color: var(--ink-meta); }
.map-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 500; pointer-events: none; padding: 6px 12px; border-radius: 9999px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid); background: rgba(5,5,6,.75); border: 1px solid var(--line-1); backdrop-filter: blur(8px); white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
.palette-panel, .blips-panel { display: flex; flex-direction: column; max-height: calc(100vh - 380px); min-height: 560px; }
.palette-search { flex: none; padding: 10px 12px; border-bottom: 1px solid var(--line-0); }
.palette { flex: 1; overflow: auto; padding: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: start; }
.sprite { display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: var(--r-sm); border: 1px solid var(--line-0); background: var(--surface-1); cursor: grab; transition: border-color var(--fast), background var(--fast); }
.sprite:hover { border-color: var(--line-2); background: var(--hover); }
.sprite:active { cursor: grabbing; }
.sprite img { width: 28px; height: 28px; pointer-events: none; }
.sprite span { font-size: 9.5px; color: var(--ink-mid); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sprite small { font: 500 9px var(--f-mono); color: var(--ink-ghost); }
.sprite-more { grid-column: 1 / -1; margin: 6px 0; font-size: 12px; color: var(--ink-meta); text-align: center; }
.blip-list { flex: 1; overflow: auto; padding: 8px; display: grid; gap: 6px; align-content: start; }
.blip-row { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; padding: 10px; border-radius: var(--r-sm); border: 1px solid var(--line-0); background: var(--surface-1); cursor: pointer; transition: border-color var(--fast); }
.blip-row:hover { border-color: var(--line-2); }
.blip-row.active { border-color: var(--line-2); background: var(--hover); }
.blip-row.active::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 2px; border-radius: 9999px; background: var(--red-hi); box-shadow: var(--fil-bloom); }
.blip-row-icon { width: 30px; height: 30px; margin-top: 2px; }
.blip-row-fields { display: grid; gap: 5px; min-width: 0; }
.blip-in { height: 30px; padding: 0 9px; border-radius: 6px; background: #0000006b; border: 1px solid rgba(255,255,255,.08); color: var(--ink-hi); outline: 0; font-size: 13px; font-weight: 600; min-width: 0; }
.blip-in-sm { font-size: 12px; font-weight: 400; color: var(--ink-body); }
.blip-in:focus { border-color: var(--line-3); }
.blip-pos { font-size: 10.5px; color: var(--ink-meta); font-family: var(--f-mono); }
.blip-pos em { font-style: normal; color: var(--ink-ghost); }
.blip-row-actions { display: grid; gap: 4px; }
.blip-row-actions .icon-btn { width: 30px; height: 30px; }
.blip-row-actions .icon-btn svg { width: 14px; height: 14px; }
@media (max-width: 1200px) { .blips-layout { grid-template-columns: 220px 1fr; } .blips-panel { grid-column: 1 / -1; min-height: 0; max-height: 360px; } }
@media (max-width: 820px) { .admin { padding: calc(var(--nav-h) + 12px) var(--hud-inset) 8vh; } .sec-title { font-size: clamp(30px, 8.5vw, 60px); } .table-scroll { max-height: none; } .blips-layout { grid-template-columns: 1fr; } .palette-panel { min-height: 0; max-height: 320px; } .admin-map-panel { height: 60vh; min-height: 420px; } }

/* ---------- Blips (sprites FiveM) ---------- */
.blip-pin { width: 32px; height: 32px; position: relative; }
.blip-pin img { width: 32px; height: 32px; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)); transition: transform .15s; }
.blip-pin:hover img { transform: scale(1.15); }
.blip-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; padding: 3px 9px; border-radius: 9999px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(5,5,6,.85); border: 1px solid var(--line-1); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
.blip-pin:hover .blip-label, .blip-main .blip-label, .blip-selected .blip-label { opacity: 1; }
.blip-main img { width: 38px; height: 38px; margin: -3px; }
.blip-main::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: var(--red); opacity: .3; animation: pulse 1.8s ease-out infinite; z-index: -1; }
.blip-selected img { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 6px; }
.drop-hover { outline: 2px dashed var(--red); outline-offset: -2px; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } }
.leaflet-container { font-family: var(--f-body); }
.leaflet-bar { border: 1px solid var(--line-1) !important; border-radius: 9999px !important; overflow: hidden; }
.leaflet-bar a { background: rgba(5,5,6,.85) !important; color: var(--ink-hi) !important; border-bottom: 1px solid var(--line-0) !important; }
.leaflet-popup-content-wrapper { background: #0e0e10; color: var(--ink-body); border: 1px solid var(--line-1); border-radius: var(--r); }
.leaflet-popup-tip { background: #0e0e10; }

/* ---------- Transitions de vues ----------
   La vue sortante s'efface vers le haut, l'entrante arrive en cascade sur la
   courbe à rebond. Préfixées par .admin pour passer devant les arrivées par
   défaut ; les retards portent le même préfixe, sinon le raccourci animation
   les remettrait à zéro. */
.view { animation: view-in .45s var(--ease-out) both; }
.admin .view > * { animation: view-item var(--enter-ms) var(--enter) both; }
.admin .view > :nth-child(1) { animation-delay: .05s; } .admin .view > :nth-child(2) { animation-delay: .1s; } .admin .view > :nth-child(3) { animation-delay: .15s; } .admin .view > :nth-child(4) { animation-delay: .2s; }
.view .strip > div { animation: view-item var(--enter-ms) var(--enter) both; }
.view .strip > :nth-child(1) { animation-delay: .05s; } .view .strip > :nth-child(2) { animation-delay: .1s; } .view .strip > :nth-child(3) { animation-delay: .15s; } .view .strip > :nth-child(4) { animation-delay: .2s; }
.view .grid-2 > * { animation: view-item var(--enter-ms) var(--enter) both; }
.view .grid-2 > :nth-child(2) { animation-delay: .05s; }
.view .blips-layout > * { animation: view-item var(--enter-ms) var(--enter) both; }
.view .blips-layout > :nth-child(2) { animation-delay: .05s; } .view .blips-layout > :nth-child(3) { animation-delay: .1s; }
@keyframes view-in { from { opacity: 0; } }
@keyframes view-item { from { opacity: 0; transform: scale(var(--enter-scale, .96)) translateY(16px); filter: blur(6px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: none; } }
.view.leaving, .view.leaving > * { animation: view-out var(--exit-ms) var(--exit) forwards; }
@keyframes view-out { to { opacity: 0; transform: scale(.985) translateY(-10px); filter: blur(4px); } }
.sec-title.swap { animation: title-swap .5s var(--enter); }
.sec-label.swap { animation: title-swap .5s var(--enter) .05s both; }
@keyframes title-swap { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
.top-actions { animation: view-item var(--enter-ms) var(--enter) both; }
.login-card { animation: view-item var(--enter-ms) var(--enter) .1s both; }
.admin-head { animation: view-item var(--enter-ms) var(--enter) both; }
.tabs-row { animation: view-item var(--enter-ms) var(--enter) .05s both; }