/* Administration — spécifique (esthétique Sensity) */

/* ---------- Connexion : panneau centré ---------- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 130px 0 60px; }
.login-card { width: min(420px, 100%); padding: 32px; display: grid; gap: 14px; }
.login-logo { width: 180px; margin: 0 auto 8px; }
.login-card h1 { margin: 0; text-align: center; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-hi); }
.login-text { margin: 0 0 8px; text-align: center; color: var(--ink-mid); font-size: 14px; }
.error { min-height: 18px; margin: 0; font-size: 13px; color: var(--danger-ink); text-align: center; }

/* ---------- Panel ---------- */
.admin { padding-top: 128px; padding-bottom: 80px; display: grid; gap: 24px; align-content: start; }
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-head .sec-head { margin-bottom: 0; }
.admin-head .sec-title { font-size: clamp(30px, 3.6vw, 42px); }
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status { font: 500 12.5px var(--mono); 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: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tab-ext { color: var(--ink-meta); }
.nav-badge { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9999px; background: var(--accent-2); color: #fff; font: 700 10.5px/1 var(--mono); display: grid; place-items: center; }
.tab[aria-current="page"] .nav-badge { background: var(--on-invert); color: #fff; text-shadow: 0 0 6px rgba(255,255,255,.6); }

.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; }
.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 12px var(--mono); }
.c-diff { width: 130px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; font-family: var(--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: cover; border-radius: 6px; background: #111; border: 1px solid var(--line-0); flex: none; }
.veh-name { font-size: 14px; font-weight: 600; color: var(--ink-hi); }
.veh-model { font: 500 11px var(--mono); color: var(--ink-decor); }
.cat { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; 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; }
.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(227,18,31,.4), var(--accent-2)); }
.price-in { width: 130px; height: 34px; text-align: right; padding: 0 10px; border-radius: 6px; background: var(--surface-1); border: 1px solid var(--line-1); color: var(--ink-hi); outline: 0; 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-edge-hi); background: var(--hover); }
.price-in.dirty { border-color: rgba(251,191,36,.6); color: #fff; font-weight: 600; }
.diff-up { color: #f87171; } .diff-down { color: #34d399; } .diff-none { color: var(--ink-ghost); }
.row-reset { width: 28px; height: 28px; border-radius: 6px; 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; }
.empty { margin: 0; padding: 40px; text-align: center; color: var(--ink-meta); }
.help { margin: 0; font-size: 12.5px; color: var(--ink-meta); }

/* ---------- Carte & 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; }
.admin-map-panel { position: relative; min-height: 560px; height: calc(100vh - 380px); background: #0d2b4f; }
#admin-map { position: absolute; inset: 0; background: #0d2b4f; }
.map-coords { position: absolute; top: 12px; right: 12px; z-index: 500; padding: 6px 10px; border-radius: 6px; font-size: 11.5px; color: var(--ink-hi); background: rgba(0,0,0,0.75); border: 1px solid var(--line-1); backdrop-filter: blur(8px); pointer-events: none; }
.map-coords:empty { display: none; }
.map-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 500; pointer-events: none; padding: 6px 12px; border-radius: 6px; font-size: 11.5px; color: var(--ink-mid); background: rgba(0,0,0,0.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 { 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(--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(--fil); 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: rgba(0,0,0,.4); border: 1px solid var(--line-1); 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-edge-hi); }
.blip-pos { font-size: 10.5px; color: var(--ink-meta); font-family: var(--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) { .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,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 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(0,0,0,0.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(--accent-2); opacity: .3; animation: pulse 1.8s ease-out infinite; z-index: -1; }
.blip-selected img { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; }
.drop-hover { outline: 2px dashed var(--accent-2); outline-offset: -2px; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---------- Transitions de vues (Tableau de bord → Prix → Carte → Avis) ---------- */
.view { animation: view-in .45s cubic-bezier(.22,1,.36,1) both; }
.view > * { animation: view-item .6s cubic-bezier(.22,1,.36,1) both; }
.view > :nth-child(1) { animation-delay: .04s; } .view > :nth-child(2) { animation-delay: .12s; } .view > :nth-child(3) { animation-delay: .2s; } .view > :nth-child(4) { animation-delay: .28s; }
.view .strip > div { animation: view-item .6s cubic-bezier(.22,1,.36,1) both; }
.view .strip > :nth-child(1) { animation-delay: .06s; } .view .strip > :nth-child(2) { animation-delay: .12s; } .view .strip > :nth-child(3) { animation-delay: .18s; } .view .strip > :nth-child(4) { animation-delay: .24s; }
.view .grid-2 > * { animation: view-item .6s cubic-bezier(.22,1,.36,1) both; }
.view .grid-2 > :nth-child(2) { animation-delay: .1s; }
.view .blips-layout > * { animation: view-item .6s cubic-bezier(.22,1,.36,1) both; }
.view .blips-layout > :nth-child(2) { animation-delay: .08s; } .view .blips-layout > :nth-child(3) { animation-delay: .16s; }
@keyframes view-in { from { opacity: 0; } }
@keyframes view-item { from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(4px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: blur(0); } }
.view.leaving, .view.leaving > * { animation: view-out .18s cubic-bezier(.4,0,.8,.4) forwards; }
@keyframes view-out { to { opacity: 0; transform: translateY(-10px) scale(.99); filter: blur(4px); } }
.sec-title.swap { animation: title-swap .5s cubic-bezier(.22,1,.36,1); }
.sec-label.swap { animation: title-swap .5s cubic-bezier(.22,1,.36,1) .05s both; }
@keyframes title-swap { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
.tab { transition: all var(--fast), transform .25s cubic-bezier(.34,1.5,.64,1); }
.tab:active { transform: scale(.94); }
.tab[aria-current="page"] { 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); } }
.top-actions { animation: view-item .5s cubic-bezier(.22,1,.36,1) both; }
.login.leaving { animation: view-out .3s cubic-bezier(.4,0,.8,.4) forwards; }
.login-card { animation: view-item .7s cubic-bezier(.22,1,.36,1) .1s both; }
.admin-head { animation: view-item .6s cubic-bezier(.22,1,.36,1) both; }
.tabs-row { animation: view-item .6s cubic-bezier(.22,1,.36,1) .08s both; }