/* ============================================================
   parquet-vault-20260717.css — LA PEAU PARQUET (système dozka), étape ②.
   Suite de parquet-20260717c.css (étape ① = Bot + coquille) : ici LE VAULT.
   Mêmes tokens EXACTS httpbratz/dozka-panel-kit, aucune valeur inventée :
     canvas #131313 · panel #090909 · elevated #0c0c0c · sunken #050505
     lines #1a1a1a / #262626 · ink #fafafa · muted #a3a3a3 · faint #525252
     hot #f79009 · UN bleu #0a84ff chirurgical (marqueurs uniquement)
     2px partout · sélection = BLANC INVERSÉ · FLAT : zéro dégradé, zéro
     glow, zéro verre, zéro pilule.
   ------------------------------------------------------------
   SCOPE : .tg-admin:has(.tg-vault-adminbody)
     .tg-admin est PARTAGÉ avec « Gérer l'équipe » (TgAdmin) → sans le
     :has(), la peau fuirait sur l'équipe. Le fond #131313 est déjà posé
     par l'étape ① (html.tr-on.sos-on .tg-admin) : on ne le retouche pas.
   ⚠️ NE TOUCHE JAMAIS au display / grid / aspect-ratio / content-visibility
   de .tg-vault-grid et .tg-vault-cell : elles se cassent (avertissement
   explicite de chat-vault-pro). Ici : couleurs, bordures, rayons, typo.
   Chargé APRÈS parquet-20260717c.css.
   ============================================================ */

/* ── tokens de l'app rebranchés sur dozka (le CSS existant suit) ── */
.tg-admin:has(.tg-vault-adminbody) {
  --color-bg:            #131313;
  --color-surface:       #0c0c0c;
  --color-border:        #1a1a1a;
  --color-border-strong: #262626;
  --color-text:          #fafafa;
  --color-muted:         #a3a3a3;
  --color-faint:         #525252;
  --color-accent:        #0a84ff;   /* déjà la couleur de l'app : inchangée */
  --brq-mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
  background: #131313;
}

/* ── carré 2px sur tout l'outil (règle de base du cockpit dozka) ── */
.tg-admin:has(.tg-vault-adminbody),
.tg-admin:has(.tg-vault-adminbody) *,
.tg-admin:has(.tg-vault-adminbody) *::before,
.tg-admin:has(.tg-vault-adminbody) *::after {
  border-radius: 2px !important;
}

/* ── en-tête : pas de bande, pas de voile ───────────────────────── */
.tg-admin:has(.tg-vault-adminbody) .tg-admin-head {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #1a1a1a;
  padding: 10px 14px;
}
.tg-admin:has(.tg-vault-adminbody) .tg-admin-title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fafafa;
}
.tg-admin:has(.tg-vault-adminbody) .tg-icon {
  background: transparent;
  border: 0;
  color: #525252;
}
.tg-admin:has(.tg-vault-adminbody) .tg-icon:hover {
  background: #0c0c0c;
  color: #fafafa;
}

/* ── titres & aides ─────────────────────────────────────────────── */
.tg-admin:has(.tg-vault-adminbody) h2,
.tg-admin:has(.tg-vault-adminbody) h3 {
  color: #fafafa;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 8px;
}
.tg-admin:has(.tg-vault-adminbody) .tg-dim,
.tg-admin:has(.tg-vault-adminbody) .tg-vault-hint {
  color: #525252;
  font-size: 11px;
  font-style: normal;
}

/* ── onglets : segmented dozka (actif = surface élevée + barre bleue) ── */
.tg-admin:has(.tg-vault-adminbody) .tg-vault-tabs {
  gap: 2px;
  padding: 0 14px;
  border-bottom: 1px solid #1a1a1a;
}
.tg-admin:has(.tg-vault-adminbody) .tg-vtab {
  position: relative;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: #a3a3a3;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.tg-admin:has(.tg-vault-adminbody) .tg-vtab:hover {
  background: #0c0c0c;
  color: #fafafa;
}
.tg-admin:has(.tg-vault-adminbody) .tg-vtab.is-on {
  background: #0c0c0c;
  color: #fafafa;
  border-color: transparent;
}
.tg-admin:has(.tg-vault-adminbody) .tg-vtab.is-on::after {
  content: '';
  position: absolute;
  left: 4px; right: 4px; bottom: 0;
  height: 2px;
  background: #0a84ff;
  border-radius: 1px !important;
}

/* ── fil d'ariane ───────────────────────────────────────────────── */
.tg-admin:has(.tg-vault-adminbody) .tg-vcrumb {
  color: #a3a3a3;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 8px;
}
.tg-admin:has(.tg-vault-adminbody) .tg-vcrumb:hover {
  background: #0c0c0c;
  color: #fafafa;
}
.tg-admin:has(.tg-vault-adminbody) .tg-vcrumb.is-here { color: #fafafa; }
.tg-admin:has(.tg-vault-adminbody) .tg-vcrumb-sep { color: #262626; }
/* cible de glisser-déposer : bordure, PAS de glow (dozka = flat) */
.tg-admin:has(.tg-vault-adminbody) .tg-vcrumb.is-drop,
.tg-admin:has(.tg-vault-adminbody) .tg-vfolder.is-drop {
  background: #0c0c0c !important;
  color: #fafafa !important;
  border: 1px solid #0a84ff !important;
  box-shadow: none !important;
}

/* ── les puits : plus sombres que la page, définis par la bordure ── */
.tg-admin:has(.tg-vault-adminbody) .tg-vault-ppvcfg,
.tg-admin:has(.tg-vault-adminbody) .tg-presta-mrow,
.tg-admin:has(.tg-vault-adminbody) .tg-vault-foldertile,
.tg-admin:has(.tg-vault-adminbody) .tg-vault-selbar,
.tg-admin:has(.tg-vault-adminbody) .card {
  background: #090909;
  border: 1px solid #1a1a1a;
  box-shadow: none;
  backdrop-filter: none;
}
.tg-admin:has(.tg-vault-adminbody) .tg-vault-foldertile:hover,
.tg-admin:has(.tg-vault-adminbody) .tg-presta-mrow:hover {
  border-color: #262626;
}
.tg-admin:has(.tg-vault-adminbody) .tg-presta-mrow.is-dragover {
  border-color: #0a84ff;
  border-style: dashed;
}

/* ── champs : le puits le plus sombre ───────────────────────────── */
.tg-admin:has(.tg-vault-adminbody) input:not([type="checkbox"]):not([type="radio"]),
.tg-admin:has(.tg-vault-adminbody) select,
.tg-admin:has(.tg-vault-adminbody) textarea,
.tg-admin:has(.tg-vault-adminbody) .tg-vault-movesel {
  background: #050505;
  border: 1px solid #262626;
  color: #fafafa;
  font-family: inherit;
  font-size: 12.5px;
}
.tg-admin:has(.tg-vault-adminbody) input:focus,
.tg-admin:has(.tg-vault-adminbody) select:focus,
.tg-admin:has(.tg-vault-adminbody) textarea:focus {
  border-color: #0a84ff;
  outline: 0;
  box-shadow: none;   /* dozka : zéro glow, la bordure suffit */
}
.tg-admin:has(.tg-vault-adminbody) input[type="checkbox"],
.tg-admin:has(.tg-vault-adminbody) input[type="radio"] {
  accent-color: #0a84ff;
}
.tg-admin:has(.tg-vault-adminbody) ::placeholder { color: #525252; }

/* ── boutons ────────────────────────────────────────────────────── */
.tg-admin:has(.tg-vault-adminbody) .btn,
.tg-admin:has(.tg-vault-adminbody) .tg-vfolder-add {
  background: #0c0c0c;
  border: 1px solid #262626;
  color: #a3a3a3;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 7px 12px;
}
.tg-admin:has(.tg-vault-adminbody) .btn:hover,
.tg-admin:has(.tg-vault-adminbody) .tg-vfolder-add:hover {
  background: #050505;
  border-color: #262626;
  color: #fafafa;
}
/* primaire dozka = BLANC INVERSÉ (pas de bouton bleu) */
.tg-admin:has(.tg-vault-adminbody) .btn.btn-primary {
  background: #fafafa;
  border-color: #fafafa;
  color: #131313;
}
.tg-admin:has(.tg-vault-adminbody) .btn.btn-primary:hover {
  background: #fff;
  border-color: #fff;
  color: #131313;
}
.tg-admin:has(.tg-vault-adminbody) .btn:disabled { opacity: .4; }
.tg-admin:has(.tg-vault-adminbody) .tg-vault-delbtn,
.tg-admin:has(.tg-vault-adminbody) .tg-vfolder-x { color: #a3a3a3; }
.tg-admin:has(.tg-vault-adminbody) .tg-vault-delbtn:hover,
.tg-admin:has(.tg-vault-adminbody) .tg-vfolder-x:hover { color: #ff453a; }

/* ── SÉLECTION = BLANC INVERSÉ (signature dozka) ────────────────── */
.tg-admin:has(.tg-vault-adminbody) .tg-vault-cell.is-sel {
  outline: 2px solid #fafafa;
  outline-offset: -2px;
}
.tg-admin:has(.tg-vault-adminbody) .tg-vault-check {
  border: 1px solid #525252;
  background: #050505;
  color: #fafafa;
}
.tg-admin:has(.tg-vault-adminbody) .tg-vault-cell.is-sel .tg-vault-check {
  background: #fafafa;
  border-color: #fafafa;
  color: #131313;
}
.tg-admin:has(.tg-vault-adminbody) .tg-vault-seln {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fafafa;
}

/* ── prestations ────────────────────────────────────────────────── */
/* compteurs & rangs : mono + chiffres alignés (dozka) */
.tg-admin:has(.tg-vault-adminbody) .tg-presta-rank,
.tg-admin:has(.tg-vault-adminbody) .tg-presta-sales,
.tg-admin:has(.tg-vault-adminbody) .tg-presta-row-price,
.tg-admin:has(.tg-vault-adminbody) .vkx-cnt {
  font-family: var(--brq-mono);
  font-variant-numeric: tabular-nums;
}
.tg-admin:has(.tg-vault-adminbody) .tg-presta-rank { color: #525252; font-size: 11px; }
.tg-admin:has(.tg-vault-adminbody) .tg-presta-row-nm {
  font-size: 12.5px;
  font-weight: 600;
  color: #fafafa;
}
.tg-admin:has(.tg-vault-adminbody) .tg-presta-row-desc { color: #525252; }
/* prix : on garde le vert (sémantique argent), juste dégraissé */
.tg-admin:has(.tg-vault-adminbody) .tg-presta-row-price { font-size: 13px; }
/* badge de ventes : puits sombre ; "hot" = orange dozka #f79009 */
.tg-admin:has(.tg-vault-adminbody) .tg-presta-sales {
  background: #050505;
  border: 1px solid #1a1a1a;
  color: #a3a3a3;
  font-size: 10px;
  font-weight: 600;
}
.tg-admin:has(.tg-vault-adminbody) .tg-presta-sales.is-hot {
  color: #f79009;
  background: #050505;
  border-color: #1a1a1a;
}
/* interrupteur actif/inactif : ON = blanc inversé (primary dozka) */
.tg-admin:has(.tg-vault-adminbody) .tg-presta-toggle {
  background: #0c0c0c;
  border: 1px solid #1a1a1a;
  color: #a3a3a3;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tg-admin:has(.tg-vault-adminbody) .tg-presta-toggle:hover { border-color: #262626; color: #fafafa; }
.tg-admin:has(.tg-vault-adminbody) .tg-presta-toggle.is-on {
  background: #fafafa;
  border-color: #fafafa;
  color: #131313;
}
.tg-admin:has(.tg-vault-adminbody) .tg-presta-grip { color: #525252; }

/* ── sidebar "collections" (posée par chat-vault-pro) ───────────── */
.tg-admin:has(.tg-vault-adminbody) .vkx-side {
  background: #090909;
  border-right: 1px solid #1a1a1a;
  backdrop-filter: none;
}
.tg-admin:has(.tg-vault-adminbody) .vkx-side-h {
  color: #525252;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}
.tg-admin:has(.tg-vault-adminbody) .vkx-item {
  position: relative;
  color: #a3a3a3;
  font-size: 12.5px;
  border: 0;
  background: transparent;
}
.tg-admin:has(.tg-vault-adminbody) .vkx-item:hover { background: #0c0c0c; color: #fafafa; }
/* actif : texte blanc + barre bleue 2px à gauche (comme #sos .sos-item.act) */
.tg-admin:has(.tg-vault-adminbody) .vkx-item.is-on {
  background: #0c0c0c;
  color: #fafafa;
}
.tg-admin:has(.tg-vault-adminbody) .vkx-item.is-on::before {
  content: '';
  display: block;
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  background: #0a84ff;
  border-radius: 1px !important;
}
.tg-admin:has(.tg-vault-adminbody) .vkx-cnt {
  background: #050505;
  border: 1px solid #1a1a1a;
  color: #a3a3a3;
  font-size: 10px;
}
/* chips filtre Photo/Vidéo : carrées, sélection = blanc inversé */
.tg-admin:has(.tg-vault-adminbody) .vkx-chip {
  background: #0c0c0c;
  border: 1px solid #1a1a1a;
  color: #a3a3a3;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
}
.tg-admin:has(.tg-vault-adminbody) .vkx-chip:hover { border-color: #262626; color: #fafafa; }
.tg-admin:has(.tg-vault-adminbody) .vkx-chip.is-active {
  background: #fafafa;
  border-color: #fafafa;
  color: #131313;
}
.tg-admin:has(.tg-vault-adminbody) .vkx-search input {
  background: #050505;
  border: 1px solid #262626;
}
.tg-admin:has(.tg-vault-adminbody) .vkx-empty { color: #525252; font-size: 11px; }
.tg-admin:has(.tg-vault-adminbody) .vkx-bar { background: transparent; border-bottom: 1px solid #1a1a1a; }

/* ── aperçu plein écran : flat ──────────────────────────────────── */
.tg-admin:has(.tg-vault-adminbody) .tg-vault-preview { background: rgba(0,0,0,.92); }
.tg-admin:has(.tg-vault-adminbody) .tg-vault-preview img,
.tg-admin:has(.tg-vault-adminbody) .tg-vault-preview video {
  box-shadow: none;
  border: 1px solid #1a1a1a;
}
.tg-admin:has(.tg-vault-adminbody) .tg-vault-preview-x {
  background: #0c0c0c;
  border: 1px solid #262626;
  color: #a3a3a3;
}
.tg-admin:has(.tg-vault-adminbody) .tg-vault-preview-x:hover { background: #050505; color: #fafafa; }

/* ── ascenseur ──────────────────────────────────────────────────── */
.tg-admin:has(.tg-vault-adminbody) .scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.tg-admin:has(.tg-vault-adminbody) .scroll::-webkit-scrollbar-track { background: transparent; }
.tg-admin:has(.tg-vault-adminbody) .scroll::-webkit-scrollbar-thumb {
  background: #262626;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.tg-admin:has(.tg-vault-adminbody) .scroll::-webkit-scrollbar-thumb:hover {
  background: #525252;
  background-clip: padding-box;
}