/* === Gestion des produits en vente ===
   Design aligné sur la page Gestion du nommage (css/gestion-nommage.css). */

.page_gp {
  padding: 8px 10px;
  font-size: 10pt;
}

.header-gp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.header-gp h1 {
  font-size: 16pt;
  color: var(--main-bg-color);
  margin: 0;
}

/* Toolbar */
.gp-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 15px;
  background: #f8f9fa;
  border-bottom: 1px solid #ddd;
}

.gp-toolbar-left,
.gp-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.gp-search {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 10pt;
  width: 220px;
}

.gp-search-barcode {
  width: 110px;
}

/* Boutons toolbar */
.gp-btn {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10pt;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.gp-btn:hover { background: #f0f0f0; }
.gp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.gp-btn-settings { background: #e8f0fe; border-color: #4285f4; color: #1a73e8; }
.gp-btn-settings:hover { background: #d2e3fc; }

.gp-btn-applyall { background: #fff3e0; border-color: #fb8c00; color: #e65100; }
.gp-btn-applyall:hover { background: #ffe0b2; }

.gp-btn-save { background: #e8f5e9; border-color: #43a047; color: #2e7d32; }
.gp-btn-save:hover { background: #c8e6c9; }

/* Boutons de ligne */
.gp-btn-sm {
  padding: 3px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 8.5pt;
  background: #fff;
  white-space: nowrap;
}
.gp-btn-sm:hover { background: #f0f0f0; }
.gp-btn-sm:disabled { opacity: 0.4; cursor: not-allowed; }

.gp-btn-sm-apply { color: #2e7d32; border-color: #43a047; }
.gp-btn-sm-apply:hover { background: #e8f5e9; }
.gp-btn-sm-modified { background: #fff3e0 !important; border-color: #fb8c00 !important; color: #e65100 !important; font-weight: 600; }

.gp-btn-sm-danger { color: #c62828; border-color: #e57373; }
.gp-btn-sm-danger:hover { background: #ffebee; }

.gp-btn-sm-hv { color: #455a64; border-color: #90a4ae; }
.gp-btn-sm-hv:hover { background: #eceff1; }

.gp-btn-sm-print { color: #00838f; border-color: #00acc1; }
.gp-btn-sm-print:hover { background: #e0f7fa; }

.gp-badge-hv {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 9pt;
  background: #eceff1;
  color: #455a64;
  white-space: nowrap;
}

/* Table.
   ATTENTION : PAS d'overflow-x sur ce wrapper — un overflow non-visible sur un
   ancêtre ferait coller le thead sticky au wrapper (qui défile avec la page)
   au lieu du haut de la fenêtre. Le tableau est dimensionné pour tenir en largeur. */
.gp-table-wrapper {
  overflow-x: visible;
}

.gp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10pt;
}

.gp-table thead th {
  padding: 6px 4px;
  border-bottom: 2px solid #ddd;
  font-weight: 600;
  font-size: 8.5pt;
  line-height: 1.2;
  /* PAS de nowrap : les titres passent sur 2 lignes pour que les colonnes
     se compressent et que le tableau tienne SANS scroll horizontal */
  white-space: normal;
  text-align: center;
  vertical-align: middle;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Neutralise le style global de main.css (thead th, thead th a = fond couleur thème) */
.gp-table thead th,
.gp-table thead th a {
  background: #fff;
  color: #333;
}

.gp-table thead th a.filtre {
  cursor: pointer;
  text-decoration: none;
}
.gp-table thead th a.filtre:hover {
  color: var(--main-bg-color);
}

.gp-table tbody td {
  padding: 4px 6px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  text-align: center;
  font-size: 9.5pt;
}

.gp-table tbody tr:nth-child(even) { background: #fafafa; }
.gp-table tbody tr:hover { background: #f0f7ff !important; }

.gp-th-produit { min-width: 160px; }

.gp-table .warning { color: #c62828; font-weight: 600; }

/* Produit passé hors-vente (avant rechargement) */
.gp-row-hv td { text-decoration: line-through; color: #999; }
.gp-row-hv td:last-child { text-decoration: none; }

/* Modale paramètres */
.gp-modal-settings {
  max-width: 560px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.gp-form-section {
  font-size: 10pt;
  color: #555;
  margin: 15px 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #ddd;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gp-form-section:first-child { margin-top: 0; }

.gp-form-table {
  width: 100%;
  border-collapse: collapse;
}

.gp-form-table td {
  padding: 5px 6px;
  vertical-align: top;
  text-align: left;
}

.gp-form-label {
  font-weight: 600;
  font-size: 9pt;
  color: #555;
  white-space: nowrap;
  width: 170px;
  padding-top: 10px !important;
}

.gp-input {
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 10pt;
  box-sizing: border-box;
}

.gp-input:focus {
  border-color: #43a047;
  outline: none;
  box-shadow: 0 0 0 2px rgba(67, 160, 71, 0.15);
}

.gp-input-num { width: 80px; }

.gp-input-sites {
  width: 100%;
  font-family: monospace;
  font-size: 9.5pt;
  resize: vertical;
}

.gp-form-hint {
  display: block;
  font-size: 8pt;
  color: #888;
  margin-top: 2px;
}

.gp-form-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10pt;
  cursor: pointer;
  padding-top: 6px;
}

.gp-form-note {
  font-size: 8.5pt;
  color: #777;
  font-style: italic;
  margin-top: 12px;
}

.gp-modal-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 0 0 0;
}

/* Colonne Actions (boutons icônes) */
.gp-td-actions {
  white-space: nowrap;
}
.gp-td-actions .gp-btn-sm {
  margin: 0 2px;
}

/* Pagination */
.gp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 15px;
  background: #f8f9fa;
  border-top: 1px solid #ddd;
}

.gp-pagination-info {
  font-size: 10pt;
  color: #555;
  margin: 0 8px;
}

.gp-perpage-select {
  padding: 5px 8px;
}

/* Responsive : toolbar en colonne sur tablette */
@media (max-width: 992px) {
  .gp-toolbar { flex-direction: column; align-items: stretch; }
  .gp-toolbar-left, .gp-toolbar-right { justify-content: flex-start; }
  .gp-search { flex: 1; min-width: 140px; }
}

/* === Mise en évidence des colonnes === */

/* Produit : gras, aligné à gauche */
.gp-td-produit {
  text-align: left !important;
  font-weight: 600;
}

/* Valeurs importantes (Prix TTC actuel et new) */
.gp-td-strong {
  font-weight: 700;
}

/* Colonne Prix marché : fond bleuté + bordures verticales */
.gp-table thead th.gp-col-pm,
.gp-table tbody td.gp-col-pm {
  background: #eaf3fb;
  border-left: 2px solid #9ec5e8;
  border-right: 2px solid #9ec5e8;
}
.gp-table tbody tr:hover td.gp-col-pm {
  background: #dcebf8;
}

/* Bloc des colonnes (new) : fond ambré + bordure de fin de groupe
   (la bordure droite de Prix marché sert de séparation gauche du groupe) */
.gp-table thead th.gp-col-new,
.gp-table tbody td.gp-col-new {
  background: #fdf6e7;
}
.gp-table thead th.gp-col-new-last,
.gp-table tbody td.gp-col-new-last {
  border-right: 2px solid #e3c988;
}
.gp-table tbody tr:hover td.gp-col-new {
  background: #f8edd2;
}

/* Menu Colonnes : liste complète scrollable + reset */
.gp-cols-list {
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 4px;
}
.gp-cols-reset {
  margin-top: 8px;
  width: 100%;
  padding: 5px 8px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-size: 9pt;
}
.gp-cols-reset:hover {
  background: #e0e0e0;
}

/* Bouton d'analyse IA de toute la liste */
.gp-btn-bulk {
  background: #ede7f6;
  border-color: #7e57c2;
  color: #5e35b1;
}
.gp-btn-bulk:hover {
  background: #d1c4e9;
}

/* Filtre PMP + prix d'achat simultanés */
.gp-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10pt;
  cursor: pointer;
  white-space: nowrap;
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}
.gp-filter-check:hover { background: #f0f0f0; }

/* Tris secondaires « Écart € | % » dans l'en-tête Prix marché (discrets) */
.gp-th-subrow {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}
.gp-th-sub {
  font-size: 7.5pt;
  font-weight: 500;
  color: #777 !important;
  white-space: nowrap;
}
.gp-th-sub:hover {
  color: var(--main-bg-color) !important;
}

/* Colonne Diff (%)(new) : la colonne DÉCISIVE (recalcul de marge nécessaire ou non)
   → fond bleu-vert (teal) pâle, distinct du bleu Prix marché et de l'ambre du bloc (new),
   + valeurs en gras */
.gp-table thead th.gp-col-diff,
.gp-table tbody td.gp-col-diff {
  background: #e0f2f1;
}
.gp-table tbody td.gp-col-diff {
  font-weight: 700;
}
.gp-table tbody tr:hover td.gp-col-diff {
  background: #c8e6e4;
}

/* === Colonne EAN (extrafield mis_ean, édition inline) === */
.gp-td-ean {
  font-family: monospace;
  font-size: 8.5pt;
  color: #555;
  white-space: nowrap;
}

.gp-ean-value {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 4px;
}
.gp-ean-value:hover {
  background: #eef3fa;
  color: var(--main-bg-color);
}
.gp-ean-missing {
  color: #e65100;
  font-weight: 600;
}

.gp-ean-pen {
  font-size: 7pt;
  color: #aaa;
  opacity: 0;
  margin-left: 2px;
}
.gp-ean-value:hover .gp-ean-pen {
  opacity: 1;
}

.gp-ean-input {
  width: 120px;
  padding: 3px 6px;
  font-size: 9pt;
  font-family: monospace;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}
.gp-ean-input:focus {
  border-color: var(--main-bg-color);
}

.gp-ean-spin {
  color: var(--main-bg-color);
  font-size: 9pt;
}