/* =========================
   Global
========================= */
body{
  margin:0;
  padding:0;
  font-family: Arial, sans-serif;
  background:#f0f0f0;
  text-align:center;
}

#appWrapper{
  width:100%;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  box-sizing:border-box;
}

/* =========================
   ✅ BOUTONS PP - CORRECTION PRINCIPALE
========================= */

/* État normal des boutons PP */
.pp-btn{
  flex:1;
  min-width:0;
  background-color:#9a9a9a;   /* gris (comme tes material-btn) */
  color:white;
  font-weight:bold;
  border:none;
  border-radius:8px;
  padding:10px 8px;
  cursor:pointer;
  white-space:normal;
  line-height:1.1;
}

/* État sélectionné - VIOLET */
/* PP (dans le bloc PASSE-PARTOUT) : sélection ORANGE */
.pp-btn.selected{
  background-color: orange !important;
  color: white !important;
  border-color: orange !important;
  font-weight: bold !important;
}

/* Optionnel : hover orange aussi */
.pp-btn.selected:hover{
  background-color: orange !important;
}


/* ✅ LAYERS PP - Contrôle de l'affichage */
.pp-layer-row {
  /* PAS de display:table-row !important ici */
}

.pp-layer-row[data-layer="2"],
.pp-layer-row[data-layer="3"] {
  display: none !important;
}

/* Force l'affichage quand jQuery utilise .show() */
.pp-layer-row[style*="display: table-row"],
.pp-layer-row[style*="display: block"] {
  display: table-row !important;
}

/* =========================
   Grille Client + Infos
========================= */
#parentGrid{
  width:720px;
  display:grid;
  grid-template-columns:350px 350px;
  gap:20px;
  margin:20px auto;
  align-items:start;
}

/* (si tu as encore un vieux bouton id=btnPassePartout dans certains écrans) */
#btnPassePartout{ background-color:#f0f0f0; border:1px solid #ccc; }
#btnPassePartout.active{ background-color:blue; color:white; }

/* =========================
   Popup recherche client
========================= */
#clientSearchPopup{
  display:none;
  position:fixed;
  top:30%;
  left:50%;
  transform:translate(-50%, -30%);
  background:#fff;
  border:2px solid #007BFF;
  padding:20px;
  z-index:10000;
  width:400px;
  box-shadow:0 0 10px rgba(0,0,0,0.5);
}
#clientSearchPopup h4{ margin-top:0; }
#clientResults{ max-height:200px; overflow-y:auto; margin-top:10px; }
#clientResults .client-item{ padding:5px; border-bottom:1px solid #ddd; cursor:pointer; }
#clientResults .client-item:hover{ background:#f0f0f0; }

/* =========================
   En-têtes
========================= */
.block-header{
  background:black;
  color:white;
  font-weight:bold;
  font-size:16pt;
  text-align:center;
  padding:5px;
  border-radius:8px;
  margin-bottom:10px;
}

/* =========================
   Bloc Client
========================= */
.top-info{
  background:#fff;
  padding:10px;
  border:1px solid #000;
  border-radius:10px;
  box-shadow:1px 1px 3px rgba(0,0,0,0.1);
  text-align:left;
  margin-bottom:20px;
}
.top-info input{
  width:100%;
  padding:5px;
  font-size:16px;
  margin-bottom:10px;
  border:1px solid #ccc;
  border-radius:4px;
}

/* =========================
   Bloc Informations
========================= */
.top-delais{
  background:#fff;
  padding:10px;
  border:1px solid #000;
  border-radius:10px;
  box-shadow:1px 1px 3px rgba(0,0,0,0.1);
  text-align:left;
  margin-bottom:20px;
}

.delais-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.date-label{ font-weight:bold; }
.date-input{ width:200px; padding:5px; font-size:14px; }
.selected-date{
  font-size:20px;
  font-weight:bold;
  text-align:center;
  margin:10px 0;
}
.vendeur-info{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:10px;
}
.vendeur-label{ font-weight:bold; }

.vendeur-input {
  width: 70%;
  padding: 5px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.magasin-label {
  font-size: 11px;
  color: #999;
  text-align: center;
  margin-top: -8px;
  margin-bottom: 8px;
  font-style: italic;
}


/* =========================
   Bloc PRIX (desktop)
========================= */
.top-price#priceBlock{
  position:fixed;
  top:20px;
  right:20px;
  width:350px;
  height:calc(100vh - 40px);
  background:#fff;
  padding:10px;
  border:1px solid #000;
  border-radius:10px;
  box-shadow:1px 1px 3px rgba(0,0,0,0.1);
  font-size:12px;
  z-index:999;
  overflow-y:auto;
}

.grid-price table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:8px;
  overflow:hidden;
}
.grid-price thead th{
  background:orange;
  color:white;
  font-weight:bold;
  padding:8px;
  border:1px solid white;
  font-size:14px;
}
.grid-price tbody td{
  background:#ccc;
  padding:6px;
  border:1px solid white;
  font-size:12px;
}

.line-total{ font-weight:bold; }
#totalTTC{ font-size:18px; font-weight:bold; text-align:center; margin-top:10px; }
.montant-remise{ font-size:12px; font-weight:bold; font-style:italic; text-align:center; margin-top:5px; color:#333; }
.tarif-remise{ text-align:center; color:red; font-size:20px; font-weight:bold; margin-top:5px; }

.global-qte button.qte-btn{
  width:30px;
  height:30px;
  border-radius:50%;
  background:orange;
  color:white;
  font-weight:bold;
  border:none;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  margin:2px;
  cursor:pointer;
  font-size:14px;
}

.material-btn.passe-partout-btn.selected{
  background-color:#9400D3 !important;
  color:white !important;
}

.export-options{ text-align:center; margin-top:10px; }
.export-options label{ margin-right:10px; font-size:14px; }
.export-options button{
  background-color:orange;
  color:white;
  font-weight:bold;
  border:none;
  border-radius:8px;
  padding:10px 20px;
  cursor:pointer;
  font-size:16px;
  margin-top:10px;
}
.export-options button:disabled{ background-color:grey; }
.grid-price table th:nth-child(3), .grid-price table td:nth-child(3){ width:50px; }
.grid-price table th:nth-child(4), .grid-price table td:nth-child(4){ width:70px; }

/* =========================
   Bloc CADRE
========================= */
.bottomBlock.grid-cadre{
  width:720px;
  margin:20px auto;
  background:#fff;
  padding:10px;
  border:1px solid #000;
  border-radius:10px;
  box-shadow:1px 1px 3px rgba(0,0,0,0.1);
  font-size:13px;
  text-align:left;
}
/* Bloc CADRE - Desktop */
.grid-cadre .form-row{
  display:grid;
  grid-template-columns:auto auto 1fr auto auto; /* L | H | Réf | Prix | Btn */
  gap:5px;
  align-items:center;
}
.grid-cadre .lh-input{
  width:60px;
  height:40px;
  font-size:16px;
  font-weight:bold;
  text-align:center;
}
.grid-cadre .reference-field{
  height:40px;
  font-size:16px;
  padding:5px;
  font-weight:bold;
}
.grid-cadre .price-field{
  width:60px;
  height:40px;
  font-size:16px;
  text-align:center;
}

.lh-input{
  width:60px;
  height:40px;
  font-size:16px;
  font-weight:bold;
  text-align:center;
}
.reference-field{
  flex:1;
  height:40px;
  font-size:16px;
  padding:5px;
  font-weight:bold;
}
.price-field{
  width:60px;
  height:40px;
  font-size:16px;
  text-align:center;
}
#cadreError{ color:red; margin-top:5px; font-weight:bold; }
#popupRechercherCadre{
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:white;
  border:2px solid #007BFF;
  padding:20px;
  z-index:9999;
}

/* =========================
   Bloc OPTION
========================= */
.bottomBlock.grid-option{
  width:720px;
  margin:20px auto;
  background:#fff;
  padding:10px;
  border:1px solid #000;
  border-radius:10px;
  box-shadow:1px 1px 3px rgba(0,0,0,0.1);
  font-size:13px;
  text-align:left;
}
.materials-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  width:100%;
}

/* boutons générés par le JS */
.material-btn{
  width:100%;
  height:60px;
  font-size:14px;
  font-weight:bold;
  border:none;
  background-color:grey;
  color:white;
  border-radius:8px;
  box-shadow:2px 2px 5px rgba(0,0,0,0.2);
  cursor:pointer;
  text-align:center;
}
.material-btn.selected{ background-color:orange !important; }

/* si certains écrans utilisent encore option-btn */
.option-btn{
  width:100%;
  height:60px;
  font-size:14px;
  font-weight:bold;
  border:none;
  background-color:grey;
  color:white;
  border-radius:8px;
  box-shadow:2px 2px 5px rgba(0,0,0,0.2);
  cursor:pointer;
  text-align:center;
}


/* =========================
   Bloc PASSE-PARTOUT
========================= */
.bottomBlock.grid-full-passe{
  width:720px;
  margin:20px auto;
  background:#fff;
  padding:10px;
  border:1px solid #000;
  border-radius:10px;
  box-shadow:1px 1px 3px rgba(0,0,0,0.1);
  font-size:13px;
  text-align:left;
}

/* L/H/Orientation sur la MÊME ligne en desktop */
.pp-top-row{
  display:grid;
  grid-template-columns:1fr 1fr 2fr; /* L | H | Orientation */
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
.pp-top-row .lh-input{
  width:100%;
  height:40px;
  font-size:16px;
  font-weight:bold;
  text-align:center;
  box-sizing:border-box;
}
.pp-orient-group{
  display:flex;
  align-items:center;
  gap:8px;
}
.pp-orient-label{ font-weight:bold; white-space:nowrap; }
.fen-orientation{ flex:1; height:40px; font-size:14px; }

/* Table layers */
.pp-layers{
  width:100%;
  margin:10px auto;
  border-collapse:collapse;
  border:1px solid #ccc;
}
.pp-layers th,
.pp-layers td{
  padding:8px;
  border:1px solid #ccc;
  text-align:center;
}
.pp-field-label{
  font-weight:bold;
  margin-right:6px;
  white-space:nowrap;
}

/* Boutons : 3 sur une ligne */
.pp-btn-group{
  display:flex;
  gap:6px;
  width:100%;
}

/* Inputs */
.pp-color,
.pp-filet{
  width:100%;
  max-width:140px;
  padding:4px;
  font-size:14px;
  box-sizing:border-box;
}

/* Actions */
.passe-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:10px 0;
}
.action-btn{
  background-color:orange;
  color:white;
  font-weight:bold;
  border:none;
  border-radius:8px;
  padding:10px 20px;
  cursor:pointer;
  font-size:16px;
}

/* Iframe schéma */
.pp-canvas-wrap{ width:100%; }
#passeFrame{
  width:100%;
  height:570px;
  border:none;
  overflow:hidden;
  display:block;
}
/* Bouton Ajouter PP */
.pp-add-controls{
  text-align:center;
  margin:10px 0;
}
.pp-add-btn{
  background:#28a745;
  color:white;
  font-weight:bold;
  border:none;
  border-radius:8px;
  padding:10px 20px;
  cursor:pointer;
  font-size:15px;
}
.pp-add-btn:hover{ background:#218838; }
.pp-add-btn:disabled{
  background:#ccc;
  cursor:not-allowed;
}
/* Bouton supprimer layer */
.pp-remove-btn{
  background:#dc3545;
  color:white;
  font-weight:bold;
  border:none;
  border-radius:50%;
  width:32px;
  height:32px;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:0;
}
.pp-remove-btn:hover{ background:#c82333; }
.pp-remove-btn:disabled{
  background:#ccc;
  cursor:not-allowed;
  opacity:0.5;
}

/* =========================
   Bloc COMMENTAIRES
========================= */
.bottomBlock.grid-full-com{
  width:720px;
  margin:20px auto;
  background:#fff;
  padding:10px;
  border:1px solid #000;
  border-radius:10px;
  box-shadow:1px 1px 3px rgba(0,0,0,0.1);
  font-size:13px;
  text-align:left;
}
.comment-area{ display:flex; gap:10px; margin-bottom:10px; }
#commentInput{ width:80%; font-size:14px; padding:5px; resize:none; }
#addComment{ width:20%; background:orange; border:none; color:white; font-weight:bold; border-radius:8px; }
.commentaire-list{ margin-top:10px; }
.comment{ border:1px solid black; padding:5px; margin-bottom:5px; position:relative; }
.comment .delete-comment{
  position:absolute;
  top:3px;
  right:3px;
  background:red;
  color:white;
  border:none;
  border-radius:50%;
  width:20px;
  height:20px;
  cursor:pointer;
  font-weight:bold;
  text-align:center;
  line-height:20px;
}
.commentaire{
  background-color:#fff !important;
  border:1px solid #000;
  border-radius:10px;
  padding:10px;
}

/* =========================
   Popups génériques
========================= */
.popup-overlay{
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  border:2px solid #007BFF;
  z-index:9999;
}
.popup-content{
  background:#fff;
  padding:20px;
  border-radius:10px;
  width:300px;
  text-align:center;
  box-shadow:0 0 10px rgba(0,0,0,0.5);
}

/* Inputs number sans flèches */
.lh-input{ -moz-appearance:textfield; }
.lh-input::-webkit-outer-spin-button,
.lh-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* =========================
   Responsive
========================= */

/* ≤ 1024px : une colonne pour la grille (prix inchangé) */
@media (max-width:1024px){
  #parentGrid{
    width:100%;
    grid-template-columns:1fr;
    gap:15px;
    margin:10px;
  }
  .bottomBlock, .top-info, .top-delais{ width:100% !important; }
}

/* ≤ 768px : mobile */
@media (max-width:768px){
  #appWrapper{ padding:10px; }

  /* Ordre : commentaires avant, prix tout en bas */
  .bottomBlock.grid-full-com{ order:1; }
  #priceBlock{
    order:2;
    position:static !important;
    width:100% !important;
    height:auto !important;
    margin-top:auto;
  }

  #parentGrid{
    width:100%;
    grid-template-columns:1fr;
    gap:10px;
    margin:0;
  }

  .bottomBlock, .top-info, .top-delais{
    width:100% !important;
    margin:10px 0;
  }

  .materials-grid{
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  }

  /* CADRE: L et H pleine largeur, puis réf, puis prix+btn */
  .grid-cadre .form-row{
    display:grid;
    grid-template-columns:1fr 1fr; /* L et H */
    grid-template-areas:
      "l h"
      "ref ref"
      "price btn";
    gap:8px;
  }
  .grid-cadre .form-row .lh-input:nth-child(1){ grid-area:l; width:100%; }
  .grid-cadre .form-row .lh-input:nth-child(2){ grid-area:h; width:100%; }
  .grid-cadre .form-row .reference-field{ grid-area:ref; width:100%; max-width:100%; }
  .grid-cadre .form-row .price-field{ grid-area:price; width:100%; }
  .grid-cadre .form-row .btn-primary{ grid-area:btn; width:100%; }

  /* PP: L/H sur la même ligne */
  .pp-top-row{
    grid-template-columns:1fr 1fr; /* L et H */
    grid-template-areas:
      "l h"
      "orient orient";
    gap:8px;
  }
  .pp-top-row .lh-input:nth-child(1){ grid-area:l; }
  .pp-top-row .lh-input:nth-child(2){ grid-area:h; }
  .pp-orient-group{ grid-area:orient; }
  
  .pp-top-row .lh-input{
    width:100%;
    height:42px;
    font-size:16px;
  }
  .fen-orientation{ height:42px; }

  /* Layers PP responsive */
  .pp-layers tbody tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "buttons buttons"
      "color filet";
    gap:8px;
    padding:8px 0;
    border-bottom:1px solid #ddd;
  }
  .pp-layers tbody tr td{ border:none; padding:0; }

  .pp-layers tbody tr td:nth-child(1){ grid-area:buttons; }
  .pp-layers tbody tr td:nth-child(2){ grid-area:color; text-align:left; }
  .pp-layers tbody tr td:nth-child(3){ grid-area:filet; text-align:left; }

  .pp-btn{ font-size:13px; padding:8px 6px; }
  .pp-color, .pp-filet{ max-width:none; width:100%; }

  /* Actions wrap */
  .passe-actions{ flex-wrap:wrap; gap:6px; }
  .action-btn{ flex:1; min-width:110px; padding:10px 12px; }

  /* Iframe schéma (plus petit sur mobile) */
  #passeFrame{ height:320px; }

  /* commentaire wrap */
  .comment-area{ flex-wrap:wrap; }
  #commentInput{ width:100%; }
  #addComment{ width:100%; }

  /* Anti-zoom mobile */
  input, select, textarea{ font-size:16px; }
}

/* ≤ 480px : extra small */
@media (max-width:480px){
  .pp-top-row{ flex-wrap:wrap; justify-content:center; }
  #passeFrame{ height:260px; }
}