/* ================================================================
 * ProVsup Design System — pv-table.css
 * Tableaux de données réutilisables.
 *
 * Structure :
 *   .pv-table-wrap         — conteneur scrollable
 *   .pv-table              — <table> principal
 *   .pv-table thead th     — cellule d'en-tête
 *   .pv-table tbody tr     — ligne de données
 *   .pv-table td           — cellule de données
 *   .pv-table-actions      — cellule actions (icônes gauche)
 *   .pv-drag-handle        — poignée de réordonnancement par glisser-déposer
 *   .pv-row-dragging       — état visuel de la ligne en cours de glisser
 *   .pv-table-btn          — bouton icône inline neutre
 *   .pv-table-btn--danger  — variante rouge (suppression)
 *   .pv-table-input        — input transparent inline dans cellule
 *   .pv-table-link-row     — ligne flex (select/input + bouton bascule) pour la cellule Lien
 *   .pv-table-add-row      — ligne finale « Ajouter » (pointillés)
 *   .pv-table-add-btn      — bouton pleine largeur de cette ligne
 *
 * Panel de prévisualisation (navEditor) :
 *   .pv-nav-preview        — panneau latéral fixe
 *   .pv-nav-preview-title  — titre du panneau
 *   .pv-nav-preview-body   — zone scrollable
 * ================================================================ */


/* ── Conteneur scrollable ────────────────────────────────────── */

.pv-theme .pv-table-wrap {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  width: 100%;
}


/* ── Table ───────────────────────────────────────────────────── */

.pv-theme .pv-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text);
}


/* ── En-tête ─────────────────────────────────────────────────── */

.pv-theme .pv-table thead tr {
  border-bottom: 2px solid var(--border);
}

.pv-theme .pv-table thead th {
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--surface);
  text-align: left;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.pv-theme .pv-table thead th.text-center {
  text-align: center;
}


/* ── Lignes de données ───────────────────────────────────────── */

.pv-theme .pv-table tbody tr {
  border-bottom: 1px solid var(--divider);
  transition: background 0.10s;
}

.pv-theme .pv-table tbody tr:last-child {
  border-bottom: none;
}

.pv-theme .pv-table tbody tr:hover {
  background: var(--surface-2);
}

.pv-theme .pv-table tbody td {
  padding: 6px 12px;
  vertical-align: middle;
}


/* ── Cellule actions (delete/up/down) ────────────────────────── */

.pv-theme .pv-table-actions {
  white-space: nowrap;
  padding: 4px 8px !important;
}

.pv-theme .pv-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  color: var(--faint);
  cursor: grab;
  font-size: 13px;
  transition: background 0.10s, color 0.10s;
}

.pv-theme .pv-drag-handle:hover {
  background: var(--surface-3);
  color: var(--text);
}

.pv-theme .pv-drag-handle:active {
  cursor: grabbing;
}

.pv-theme tr.pv-row-dragging {
  position: relative;
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  background: var(--accent-soft);
}

.pv-theme tr.pv-row-dragging > td {
  background: transparent;
  opacity: 0.8;
}

.pv-theme .pv-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.10s, color 0.10s;
  padding: 0;
  font-size: 13px;
}

.pv-theme .pv-table-btn:hover {
  background: var(--surface-3);
  color: var(--text);
}

.pv-theme .pv-table-btn--danger {
  color: var(--stop);
  opacity: 0.55;
}

.pv-theme .pv-table-btn--danger:hover {
  background: var(--stop-soft);
  color: var(--stop);
  opacity: 1;
}


/* ── Cellule Lien (select/input + bouton bascule) ────────────── */

.pv-theme .pv-table-link-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pv-theme .pv-table-link-row > ui-select,
.pv-theme .pv-table-link-row > input {
  flex: 1;
  min-width: 0;
}

.pv-theme .pv-table-link-row > .pv-table-btn {
  flex: none;
}


/* ── Ligne finale « Ajouter » (pointillés) ────────────────────── */

.pv-theme .pv-table-add-row > td {
  padding: 6px 8px !important;
  border: none !important;
}

.pv-theme .pv-table-add-trigger {
  display: flex;
}

.pv-theme .pv-table-add-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 1.5px dashed var(--border-2);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.pv-theme .pv-table-add-btn:hover {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
  color: var(--accent);
}


/* ── Input inline transparent ────────────────────────────────── */

.pv-theme .pv-table-input {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  background: var(--field-bg);
  border: 1.5px solid var(--field-border);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--text);
  transition: border-color 0.12s, box-shadow 0.12s;
  outline: none;
  box-sizing: border-box;
}

.pv-theme .pv-table-input:hover {
  border-color: var(--border-2);
}

.pv-theme .pv-table-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.pv-theme .pv-table-input::placeholder {
  color: var(--faint);
}


/* ── Cellule autorisation ────────────────────────────────────── */
/* Seul le padding de la cellule est défini ici (spécifique table).
   La hauteur et le comportement du select viennent de pv-select.css. */

.pv-theme .pv-table-auth-cell {
  padding: 4px 8px !important;
}


/* ── Dark mode ───────────────────────────────────────────────── */

:root[data-theme="dark"] .pv-theme .pv-table thead th {
  background: var(--surface);
}

:root[data-theme="dark"] .pv-theme .pv-table-input:focus {
  background: var(--field-bg);
}


/* ════════════════════════════════════════════════════════════════
   ICON PICKER — sélecteur d'icônes custom (navEditor)
   ════════════════════════════════════════════════════════════════ */

/* Overlay transparent pour fermer au clic dehors */
.pv-icon-overlay {
  position: fixed;
  inset: 0;
  z-index: 1049;
}

/* ── Trigger ─────────────────────────────────────────── */

.pv-theme .pv-icon-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 34px;
  padding: 0 8px;
  background: var(--field-bg);
  border: 1.5px solid var(--field-border);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-family: var(--font-ui);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s;
}

.pv-theme .pv-icon-trigger:hover {
  border-color: var(--border-2);
}

.pv-theme .pv-icon-trigger-label {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
}

.pv-theme .pv-icon-trigger-placeholder {
  flex: 1;
  color: var(--faint);
  font-size: 13px;
}

.pv-theme .pv-icon-trigger-caret {
  flex: none;
  color: var(--muted);
  font-size: 11px;
}

/* ── Dropdown (position: fixed) ──────────────────────── */

.pv-theme .pv-icon-dropdown {
  position: fixed;
  z-index: 1050;
  width: 332px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ── Onglets catégories ──────────────────────────────── */

.pv-theme .pv-icon-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.pv-theme .pv-icon-tab {
  flex: 1;
  height: 26px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-ui);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.10s, color 0.10s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.pv-theme .pv-icon-tab:hover {
  background: var(--surface-3);
  color: var(--text);
}

.pv-theme .pv-icon-tab.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}


/* ── Search ──────────────────────────────────────────── */

.pv-theme .pv-icon-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.pv-theme .pv-icon-search-icon {
  color: var(--muted);
  font-size: 13px;
  flex: none;
}

.pv-theme .pv-icon-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--text);
}

.pv-theme .pv-icon-search-input::placeholder {
  color: var(--faint);
}

/* ── Grille d'icônes ─────────────────────────────────── */

.pv-theme .pv-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px;
  max-height: 224px;
  overflow-y: auto;
}

.pv-theme .pv-icon-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-2);
  transition: background 0.10s, color 0.10s;
  padding: 0;
}

.pv-theme .pv-icon-item:hover {
  background: var(--surface-3);
  color: var(--text);
}

.pv-theme .pv-icon-item--active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ── Footer pagination ───────────────────────────────── */

.pv-theme .pv-icon-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}

.pv-theme .pv-icon-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  color: var(--text-2);
  font-size: 12px;
  transition: background 0.10s, color 0.10s;
}

.pv-theme .pv-icon-nav-btn:hover:not([disabled]) {
  background: var(--surface-3);
  color: var(--text);
}

.pv-theme .pv-icon-nav-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.pv-theme .pv-icon-page-info {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
}


/* ════════════════════════════════════════════════════════════════
   PANNEAU PRÉVISUALISATION — navEditor
   ════════════════════════════════════════════════════════════════ */

.pv-theme .pv-nav-preview {
  width: 210px;
  flex: none;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--surface);
}

.pv-theme .pv-nav-preview-title {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  flex: none;
}

.pv-theme .pv-nav-preview-body {
  overflow: hidden;
  overflow-y: auto;
  flex: 1;
  background: var(--rail-bg);
  padding: 6px;
}

.pv-theme .pv-nav-preview-body .pv-nav-list {
  list-style: none;
  padding: 4px 0;
  margin: 0;
}

.pv-theme .pv-nav-preview-body .pv-nav-item {
  list-style: none;
}

.pv-theme .pv-nav-preview-body pre {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  padding: 8px;
  margin: 0;
  background: transparent;
  border: none;
  white-space: pre-wrap;
  word-break: break-all;
}


/* ════════════════════════════════════════════════════════════════
   PATTERN 2 LIGNES PAR ONGLET — paramNavEditor
   tr.pv-table-onglet-row  : nom + type + droits
   tr.pv-table-content-row : contenu (source ou sous-tableau)
   ════════════════════════════════════════════════════════════════ */

.pv-theme .pv-table .pv-table-onglet-row {
  border-bottom: none !important;
}

.pv-theme .pv-table .pv-table-content-row {
  background: var(--surface-2);
}

.pv-theme .pv-table .pv-table-content-row:hover {
  background: var(--surface-2);
}

.pv-theme .pv-table .pv-table-content-cell {
  padding-top: 6px !important;
  padding-bottom: 10px !important;
}


/* ════════════════════════════════════════════════════════════════
   TOGGLE LIEN / MENU — paramNavEditor
   ════════════════════════════════════════════════════════════════ */

.pv-theme .pv-toggle-group {
  display: inline-flex;
  height: 34px;
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.pv-theme .pv-toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-ui);
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.10s, color 0.10s;
  margin: 0;
  white-space: nowrap;
}

.pv-theme .pv-toggle-btn + .pv-toggle-btn {
  border-left: 1.5px solid var(--border);
}

.pv-theme .pv-toggle-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.pv-theme .pv-toggle-btn:hover:not(.active) {
  background: var(--surface-3);
  color: var(--text);
}


/* ════════════════════════════════════════════════════════════════
   CARTE IMBRIQUÉE — encapsule le contenu d'un onglet (mode Menu)
   Radius : --r-sm pour cohérence avec modales + boutons navbar.
   ════════════════════════════════════════════════════════════════ */

.pv-theme .pv-nested-card {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
}

.pv-theme .pv-nested-card-footer {
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}


/* ════════════════════════════════════════════════════════════════
   PANNEAU DEBUG JSON — panel latéral pour l'affichage du JSON brut.
   Utilise --surface / --text (lisible en light ET dark mode).
   Distinct de pv-nav-preview qui utilise --rail-bg (toujours sombre).
   ════════════════════════════════════════════════════════════════ */

.pv-theme .pv-debug-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border-left: 1px solid var(--border);
  background: var(--surface);
}

.pv-theme .pv-debug-panel-title {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  flex: none;
}

.pv-theme .pv-debug-panel-body {
  overflow: hidden;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.pv-theme .pv-debug-panel-body pre {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  padding: 12px 14px;
  margin: 0;
  background: var(--surface-2);
  border: none;
  white-space: pre-wrap;
  word-break: break-all;
  min-height: 100%;
}


/* ════════════════════════════════════════════════════════════════
   TABLE IMBRIQUÉE — sous-tableau items dans mode Menu
   ════════════════════════════════════════════════════════════════ */

.pv-theme .pv-table--nested {
  width: 100%;
}

.pv-theme .pv-table--nested thead tr {
  border-bottom: 1px solid var(--border);
}

.pv-theme .pv-table--nested thead th {
  position: static;
  background: transparent;
  padding: 6px 12px;
  font-size: 10px;
}

.pv-theme .pv-table--nested tbody td {
  padding: 6px 12px;
}

.pv-theme .pv-table--nested tbody tr:last-child {
  border-bottom: none;
}