/* ==== FORM === */
/* Rappel
   div border-color : #C5C5C5;
   div background-color: #F5F5F5; 
   input border-color: #9A9A9A; 
*/

.well {
  padding: 8px 10px;
  border: 1px solid #dce0e6;
  background-color: #FDFDFD;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

.well-prices {
  padding-right: 0px;
}

.well.well-white {
  background-color: #fff;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #aaa;
}

/* Place holder color for IE */
/* Modificaion du css Bootstrap*/
input,
textarea,
select {
  max-width: 255px;
  width: 96%;
}

input[type="checkbox"] {
  width: auto;
}

select,
.chosen-container-single {
  width: 96% !important;
  max-width: 265px;
}

.chosen-container-single .chosen-drop input {
  width: 230px !important;
}

.chosen-container-single a {
  height: 28px !important;
  line-height: 28px !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="range"]:focus,
textarea:focus {
  box-shadow: 0 0 6px #9a9a9a;
  border-color: #9a9a9a;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="range"]:focus,
#form textarea:focus,
#form select:focus,
#form input:hover,
#form textarea:hover,
#form select:hover {
  border-color: #9a9a9a;
}

input[type="checkbox"] {
  margin-bottom: 8px;
  margin-top: 8px;
}

/* Center align checkbox vertically */
label {
  display: inline-block;
  vertical-align: middle;
}

label.checkbox {
  margin-bottom: 0;
  padding-left: 6px;
}

input[type="checkbox"]~label {
  margin-bottom: 0;
  padding-left: 6px;
  cursor: pointer;
}

textarea {
  height: 55px;
}

.table-col-label-pointer tr td>label {
  cursor: pointer;
  margin: 0px;
  padding: 2px;
}

.table-col-label-pointer tr td:first-child {
  text-align: left;
}

.control-label {
  width: 100px !important;
}

.controls {
  margin-left: 110px !important;
}

#form .control-group,
.form .control-group {
  margin-top: 5px;
  margin-bottom: 5px;
}

#form .form-actions {
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: #FDFDFD;
}

.form-tab-limit-height {
  max-height: 450px;
  overflow-y: auto;
}

.form-actions-in-dialog {
  margin-top: 10px;
  padding: 5px;
}

.border {
  border: 1px solid #dce0e6;
}

#form .action_formulaire {
  margin: 0px;
  text-align: center;
}

form .range-slider {
  width: 150px;
  text-align: right;
}

/* Prix */
.produit-prix {
  margin-left: 0px !important;
}

/*Menu*/
#form.form-menu input[type="checkbox"] {
  margin-bottom: 0px;
  margin-top: 2px;
}

#form.form-menu .sous_categorie .title {
  margin-top: 5px;
  display: inline-block;
}

#form.form-menu .sous_categorie .title div {
  float: left;
}

#form.form-menu .title .libelle {
  font-size: 14px;
  font-weight: bold;
  color: #305496;
  margin-left: 10px;
  cursor: pointer;
}

#form.form-menu .sous_categorie img {
  cursor: pointer;
  margin: 0 2px 0 2px;
}

#form.form-menu .sous_categorie {
  display: block;
  position: relative;
  margin-bottom: 20px;
}

#form.form-menu .chosen-select .produit_disabled {
  color: red;
}

/* Navigation Tab */
.nav {
  margin-bottom: 5px;
}

/*Langue*/
.navigation_langue ul {
  margin-bottom: 0px;
  border-bottom: 1px solid #dce0e6;
}

.navigation_langue .nav-tabs .active a {
  background-color: #FDFDFD;
}

.navigation_langue .nav-tabs li a {
  padding: 7px 12px 6px 12px;
  border: 1px solid #dce0e6;
  border-bottom: 0px !important;
}

.navigation_langue .nav-tabs li a img {
  width: 21px;
  height: 21px;
}

.navigation_langue ul.error_list {
  list-style: none;
  margin: 0;
  border: 0px;
}

.navigation_langue .form-language {
  min-height: 20px;
  padding: 8px;
  margin-bottom: 15px;
  background-color: #FDFDFD;
  border: 1px solid #dce0e6;
  border-top: 0px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.navigation_langue a.btn {
  color: #333333 !important;
}

.navigation_langue .nav-tabs {
  margin-bottom: 0px;
}

.navigation_langue .wrapper_tabs {
  position: relative;
  overflow: hidden;
  height: 34.5px;
}

.navigation_langue .list {
  position: absolute;
  left: 0px;
  top: 0px;
  margin-top: 0px;
  min-width: 1000px;
}

.navigation_langue .tab-content {
  overflow: visible;
}

.navigation_langue .scroller-right {
  float: right;
}

.navigation_langue .scroller-left {
  float: left;
}

.navigation_langue .list li {
  display: table-cell;
  position: relative;
  text-align: center;
  cursor: grab;
  cursor: -webkit-grab;
  color: #efefef;
  vertical-align: middle;
}

.navigation_langue .scroller {
  text-align: center;
  cursor: pointer;
  display: none;
  padding: 5px 19px 5px 19px;
  line-height: 17.5px;
  padding-top: 11px;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #fff;
  border-bottom: 1px solid #dce0e6;
}

.btn:hover {
  background-position: 0;
}

/* Menu : liste chosen*/
#form .chosen-select input[type="text"]:focus {
  box-shadow: none;
}

#form .chosen-container-active .chosen-choices {
  box-shadow: 0 0 6px #9a9a9a;
  border-color: #9a9a9a;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px #9a9a9a;
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  transition: border linear 0.2s, box-shadow linear 0.2s;
}

#form .produit-list .chosen-container {
  width: 100% !important;
}

#form .chosen-container li.search-choice {
  /*width: 88%;*/
  font-size: 14px;
  border: 0px;
  background-image: none;
  margin-right: 5px;
}

#form .chosen-container .chosen-drop {
  font-size: 13px;
}

#form .chosen-container .chosen-choices {
  padding-bottom: 15px;
}

/* Dialog */
.ui-dialog {
  max-width: 80%;
}

#crop_dialog {
  padding-bottom: 0px
}

#dialog .footer {
  text-align: center;
}

#dialog .footer .btn-cancel {
  margin-left: 20px;
}

#dialog .footer .error {
  margin-bottom: 10px;
}

/* image rotation */
img.crop_img {
  transform-origin: top left;
  /* IE 10+, Firefox, etc. */
  -webkit-transform-origin: top left;
  /* Chrome */
  -ms-transform-origin: top left;
  /* IE 9 */
}

img.crop_img.rotate90 {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
  -ms-transform: rotate(90deg) translateY(-100%);
}

img.crop_img.rotate180 {
  transform: rotate(180deg) translate(-100%, -100%);
  -webkit-transform: rotate(180deg) translate(-100%, -100%);
  -ms-transform: rotate(180deg) translateX(-100%, -100%);
}

img.crop_img.rotate270 {
  transform: rotate(270deg) translateX(-100%);
  -webkit-transform: rotate(270deg) translateX(-100%);
  -ms-transform: rotate(270deg) translateX(-100%);
}

/* image rotation */

/* titre de l'item dans la page de consultation/modification (_form)*/
.form_page_header {
  font-size: 20px;
  font-weight: normal;
  line-height: 1;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dce0e6;
}

.form_page_header {
  display: none;
}

/* formulaire information */
#form .form_information .mce-edit-area {
  height: 250px !important;
}

/* formulaire de connexion : signin signup */
#login-page {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#login-page .form-horizontal {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

#login-page fieldset {
  text-align: left;
}

#login-page fieldset .control-group label.control-label {
  /*width: 140px !important;*/
}

#login-page fieldset .control-group .controls {
  /* margin-left: 150px !important; */
}

#login-page .control-group:not(.small-input) input,
#login-page .control-group:not(.small-input) select {
  width: 85% !important;
  max-width: 330px;
}

#login-page .login-form,
#login-page .login-form .well {
  padding: 20px;
}

#login-page h3,
#login-page h2 {
  font-weight: normal;
}

#login-page h3 {
  margin-bottom: 20px;
}

#login-page input {
  box-sizing: content-box;
}

#login-page .login-form-footer {
  margin-top: 20px;
}

/*Message d'erreur dans les formulaires*/
ul.error_list {
  list-style: none;
  margin: 0;
  border: 0px;
}

ul.error_list li {
  padding: 5px 0 0px 110px;
  color: #b94a48;
  font-size: 13px;
}

error {
  color: #b94a48;
  font-size: 13px;
}

div.no-padding ul.error_list li {
  padding: 0px;
}

/*certains input sont imbriqu�s dans 2 niveau de div*/
ul.error_list+label+div div input,
ul.error_list+label+div input,
ul.error_list+label+div textarea,
ul.error_list+label+div select {
  border-color: #b94a48;
}

.error {
  color: #b94a48;
}

.input_error {
  border-color: #b94a48 !important;
}

form .left {
  float: left;
}

form .right {
  float: right;
}

form .margin_left_15px {
  margin-left: 15px;
}

.input-append {
  white-space: nowrap;
  width: 100%;
}

.input-append input {
  position: inherit !important;
}

/* fix bug input price inside dialog */
.input_prix {
  width: 45px !important;
}

.input_very_small {
  width: 50px !important;
}

.input_small {
  width: 60px !important;
}

.input_large {
  width: 96% !important;
  max-width: 96% !important;
}

.input_ip {
  width: 180px !important;
}

.input_heure {
  width: 60px !important;
}

.input_minute {
  width: 50px !important;
}

.input_date {
  width: 90px !important;
}

.checkbox-days label {
  display: -webkit-inline-box;
  margin-right: 20px;
  margin-left: 0px;
  width: 45px;
  margin-bottom: 0px;
}

.control-group-label-150px span.control-label {
  width: 150px !important;
}

.control-group-label-150px .controls {
  margin-left: 160px !important;
}

.input-width-45 input,
.input-width-45 select {
  width: 45px !important;
}

.input-width-90 input,
.input-width-90 select {
  width: 90px !important;
}

.controls-input-switch {
  padding-top: 5px;
}

.controls-input-switch .onoffswitch {
  margin: 0px !important;
}

.max-height-600 {
  max-height: 600px;
  overflow: auto;
}

#form .data-collapse {
  margin-bottom: 15px;
}

/* Bloc des tarifs par horaire */
#form .form-prix-horaire label.control-label {
  width: 140px;
  margin-right: 10px;
}

td.option_commande label {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* limiter l'affichage des images � leur conteneur */
.div-img-fit img {
  max-width: 100%;
  max-height: 100%;
}

/* override */
.ui-widget-content {
  color: #333333 !important;
}

/* TinyMCE */
.mce-ico {
  font-size: 12px !important;
}

.mce-btn button {
  padding: 1px 2px !important;
}

/* border-radius: 3px; */
.mce-tinymce {
  width: auto !important;
  padding-right: 1px !important;
  margin-right: 8px !important;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-border-radius: 3px;
  moz-border-radius: 3px;
  -moz-border-radius: 3px;
}

.mce-tinymce:focus,
.mce-container-body:focus {
  box-shadow: 0 0 6px #9a9a9a;
  border-color: #9a9a9a;
}

.mce-tinymce iframe {
  height: 102px !important;
}

.mce-tinymce iframe[id^="information_traduction"] {
  height: 100% !important;
}

#information_html {
  width: 100% !important;
  height: 200px !important;
}

/* radio button */
#form li {
  list-style-type: none;
}

#form li label {
  margin-bottom: 0px;
}

/* photo upload */
.container_upload {
  padding: 10px;
}

.container_upload .upload_legend {
  font-size: 10px;
}

.container_upload .upload_control {
  padding-top: 5px;
}

/* =========================================================================
   Menu form — Bloc "Supplément conditionnel" placé sous le bouton "Add a section"
   (lié aux sections qui ont la case "Participates in menu conditional supplement")
   ========================================================================= */
#form.form-menu .menu-supplement-conditionnel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: #FDFDFD;
  border: 1px solid #dce0e6;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
}

#form.form-menu .menu-supplement-conditionnel-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 12px;
  color: #555;
  font-weight: 500;
}

#form.form-menu .menu-supplement-conditionnel .input-append {
  margin: 0;
}

#form.form-menu .menu-supplement-conditionnel .input-append input {
  margin: 0;
}

/* =========================================================================
   Bulle d'info réutilisable
   Utilisation : <span class="info-bubble" data-tooltip="texte">i</span>
   La tooltip elle-même est créée à la volée dans <body> par JS (cf. common.js
   ou formSuccess.php) → position: fixed → jamais coupée par un parent overflow.
   ========================================================================= */
.info-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 11px;
  font-weight: bold;
  font-family: serif;
  font-style: italic;
  color: #fff;
  background: #5a6678;
  border-radius: 50%;
  cursor: help;
  margin-left: 4px;
  vertical-align: middle;
  user-select: none;
  flex-shrink: 0;
}

.info-bubble:hover {
  background: #305496;
}

/* Override léger du plugin Bootstrap Tooltip (utilisé pour .info-bubble).
   Le plugin gère la position fixée dans body et le repositionnement automatique. */
.tooltip.info-bubble-tip {
  z-index: 10000;
}

.tooltip.info-bubble-tip .tooltip-inner {
  max-width: 280px;
  padding: 8px 12px;
  background: #2c3540;
  color: #fff;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.4;
  text-align: left;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.tooltip.info-bubble-tip.in {
  opacity: 1;
}

.tooltip.info-bubble-tip .tooltip-arrow {
  border-top-color: #2c3540;
}

/* Wrapper "(unavailable) i" : empêche la bulle de wrapper sur la ligne suivante */
.produit-disabled-tag-wrap {
  display: inline-block;
  white-space: nowrap;
}

/* =========================================================================
   Menu form — groupes (accordéon compact) + tableau de produits
   Refonte de l'onglet Composition (post-renommage MenuSousCategorie -> MenuGroupe).
   Les anciens styles .sous_categorie ci-dessus sont dorénavant inertes.
   ========================================================================= */

#form.form-menu .subForm.groupe {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  margin-bottom: 8px;
  background: #fff;
  position: relative;
}

/* ---------- Header ---------- */
#form.form-menu .groupe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 6px 4px;
  background: #f7f7f9;
  border-bottom: 1px solid #e5e5e5;
  border-radius: 4px 4px 0 0;
  min-height: 30px;
}

/* Drag handle pour réorganiser les groupes (à gauche, avant le chevron) */
#form.form-menu .groupe-header .groupe-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #bbb;
  font-size: 14px;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  margin-right: 2px;
}

#form.form-menu .groupe-header:hover .groupe-drag-handle {
  color: #5a6678;
}

#form.form-menu .groupe-header .groupe-drag-handle:active {
  cursor: grabbing;
}

/* Placeholder visible pendant le drag d'un groupe */
#subforms .groupe-sort-placeholder {
  background: #f5f9ff;
  border: 1px dashed #b9c8db;
  border-radius: 4px;
  margin-bottom: 8px;
  height: 38px;
  visibility: visible !important;
}

#form.form-menu .groupe-header-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  min-width: 0;
}

#form.form-menu .groupe-header-main .chevron {
  font-size: 18px;
  line-height: 1;
  color: #5a6678;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: transform 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
  cursor: pointer;
}

#form.form-menu .groupe-header-main:hover .chevron {
  background: #e1e6ee;
}

#form.form-menu .groupe-header-main.opened .chevron {
  transform: rotate(90deg);
}

/* Zone titre cliquable pour renommer (libellé + crayon ensemble, hover = signal visuel) */
#form.form-menu .groupe-header-main .groupe-title-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  margin-left: 4px;
  border-radius: 3px;
  cursor: text;
  transition: background 0.15s ease;
}

#form.form-menu .groupe-header-main .groupe-title-edit:hover {
  background: #e1e6ee;
}

#form.form-menu .groupe-header-main .subFormTitle.libelle {
  font-size: 14px;
  font-weight: 600;
  color: #305496;
  border-bottom: 1px dashed transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#form.form-menu .groupe-header-main .groupe-title-edit:hover .subFormTitle.libelle {
  border-bottom-color: #305496;
}

#form.form-menu .groupe-header-main .groupe-action-edit {
  width: 13px;
  height: 13px;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

#form.form-menu .groupe-header-main .groupe-title-edit:hover .groupe-action-edit {
  opacity: 1;
}

#form.form-menu .groupe-header-main .groupe-badge {
  display: inline-block;
  background: #e1e6ee;
  color: #5a6678;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  flex-shrink: 0;
  margin-left: 6px;
}

#form.form-menu .groupe-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

#form.form-menu .groupe-header-actions .groupe-action-icon {
  cursor: pointer;
  width: 16px;
  height: 16px;
  opacity: 0.55;
  transition: opacity 0.15s ease;
  margin: 0;
}

#form.form-menu .groupe-header-actions .groupe-action-icon:hover {
  opacity: 1;
}

#form.form-menu .groupe-header-actions .groupe-separator {
  width: 1px;
  height: 16px;
  background: #d0d0d0;
  margin: 0 4px;
}

#form.form-menu .groupe-header-actions .action-order {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
}

/* ---------- Body ---------- */
#form.form-menu .groupe-body {
  /* Bootstrap collapse manage display */
}

#form.form-menu .groupe-body-inner {
  padding: 10px 12px 12px 12px;
}

/* ---------- Paramètres du groupe (ligne principale + section avancée pliable) ---------- */
#form.form-menu .groupe-params {
  padding: 8px 10px;
  background: #f3f5f8;
  border: 1px solid #dce0e6;
  border-radius: 3px;
  margin-bottom: 10px;
  font-size: 12px;
}

#form.form-menu .groupe-params-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 4px 0;
}

/* Ligne principale : "More options" pousse à droite */
#form.form-menu .groupe-params-main {
  align-items: center;
}

#form.form-menu .groupe-params-main .groupe-params-toggle {
  margin-left: auto;
  font-size: 11px;
  color: #5a6678;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 3px;
  transition: background 0.15s ease;
}

#form.form-menu .groupe-params-main .groupe-params-toggle:hover {
  background: #e1e6ee;
  color: #305496;
  text-decoration: none;
}

#form.form-menu .groupe-params-main .groupe-params-toggle .chevron {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  width: 12px;
  transition: transform 0.15s ease;
  vertical-align: -1px;
}

#form.form-menu .groupe-params-main .groupe-params-toggle.opened .chevron {
  transform: rotate(90deg);
}

#form.form-menu .groupe-params-advanced {
  border-top: 1px dashed #ececec;
  margin-top: 4px;
  padding-top: 8px;
}

#form.form-menu .groupe-param {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}

#form.form-menu .groupe-param-label {
  color: #555;
  font-weight: 500;
}

/* Pas de largeur fixe imposée : on hérite des dimensions par défaut des inputs.
   La classe .input_prix (45px !important) pilote la largeur des champs supplément. */
#form.form-menu .groupe-param input[type="text"],
#form.form-menu .groupe-param select {
  margin: 0;
}

#form.form-menu .groupe-param select {
  width: 60px;
}

#form.form-menu .groupe-param .input-append {
  margin: 0;
}

#form.form-menu .groupe-param .controls-input-switch,
#form.form-menu .groupe-param .input_switch {
  margin: 0;
}

/* ---------- Tableau des produits (compact) ---------- */
#form.form-menu .groupe-produits-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}

#form.form-menu .groupe-produits-table thead th {
  background: #f0f0f0;
  font-weight: 600;
  color: #555;
  padding: 4px 8px;
  border-bottom: 1px solid #d9d9d9;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

#form.form-menu .groupe-produits-table thead .col-drag {
  width: 22px;
}

#form.form-menu .groupe-produits-table .col-suppl,
#form.form-menu .groupe-produits-table th.col-suppl {
  width: 110px;
  text-align: right !important;
  padding-right: 8px;
}

#form.form-menu .groupe-produits-table .col-del,
#form.form-menu .groupe-produits-table th.col-del {
  width: 36px;
  text-align: center;
  padding: 4px 6px;
}

/* Drag handle (1re colonne) — visible au hover de la ligne */
#form.form-menu .groupe-produits-table .col-drag {
  text-align: center;
  vertical-align: middle;
  width: 22px;
}

#form.form-menu .groupe-produits-table .drag-handle {
  display: inline-block;
  color: #bbb;
  font-size: 14px;
  line-height: 1;
  cursor: grab;
  padding: 4px 2px;
  user-select: none;
}

#form.form-menu .groupe-produits-table tr.subForm-produit:hover .drag-handle {
  color: #5a6678;
}

#form.form-menu .groupe-produits-table .drag-handle:active {
  cursor: grabbing;
}

/* État pendant le drag (jQuery UI) */
#form.form-menu .groupe-produits-table tr.ui-sortable-helper {
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

#form.form-menu .groupe-produits-table tr.ui-sortable-placeholder {
  visibility: visible !important;
  background: #f5f9ff;
  border: 1px dashed #b9c8db;
  height: 30px;
}

#form.form-menu .groupe-produits-table tbody.subforms-produits tr.subForm-produit td {
  padding: 4px 8px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

#form.form-menu .groupe-produits-table tbody.subforms-produits tr.subForm-produit:hover td {
  background: #fafafa;
}

#form.form-menu .groupe-produits-table .produit-libelle {
  display: inline;
}

#form.form-menu .groupe-produits-table .produit-categorie {
  color: #999;
  font-size: 11px;
}

#form.form-menu .groupe-produits-table .produit-separator {
  color: #ccc;
  margin: 0 4px;
}

#form.form-menu .groupe-produits-table .produit-nom {
  color: #333;
}

#form.form-menu .groupe-produits-table .produit-libelle.produit_disabled .produit-nom,
#form.form-menu .groupe-produits-table .produit-libelle.produit_disabled .produit-categorie {
  text-decoration: line-through;
  color: #aaa;
}

#form.form-menu .groupe-produits-table .produit-disabled-tag {
  color: #c00;
  font-size: 10px;
  font-style: italic;
  margin-left: 4px;
  text-decoration: none;
}

/* Input supplément par ligne — la classe .input_prix gère la largeur */
#form.form-menu .groupe-produits-table .col-suppl .input-append-suppl {
  display: inline-block;
  margin: 0;
  white-space: nowrap;
}

#form.form-menu .groupe-produits-table .col-suppl input {
  margin: 0;
  text-align: right;
}

/* Icônes d'action sur les lignes produits */
#form.form-menu .groupe-produits-table .col-del {
  text-align: center;
  white-space: nowrap;
}

#form.form-menu .groupe-produits-table .produit-action-icon {
  cursor: pointer;
  width: 14px;
  height: 14px;
  opacity: 0.55;
  transition: opacity 0.15s ease;
  margin: 0 1px;
}

#form.form-menu .groupe-produits-table .produit-action-icon:hover {
  opacity: 1;
}

/* Boutons "Add a product" / "Add a section" — secondary, gris, compacts */
#form.form-menu .groupe-produits-table tfoot .groupe-add-row {
  padding: 8px;
  border-top: 1px solid #ececec;
  text-align: left;
}

#form.form-menu .menu-add-btn {
  font-size: 12px;
}

#form.form-menu .menu-add-btn i {
  margin-right: 2px;
}

#form.form-menu #addSectionBtn.menu-add-btn {
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---------- Modale de recherche/ajout de plats ---------- */
/* IMPORTANT : ne PAS mettre display:flex sur #modalAddGroupeProduit directement.
   Bootstrap 2 utilise display:none par défaut sur .modal (et display:block quand ouvert via JS).
   Un display:flex sur l'ID écraserait le none → modale fantôme en position:fixed qui intercepte
   les touches mobile et bloque le scroll de la page derrière. */
#modalAddGroupeProduit {
  width: 760px;
  margin-left: -380px;
  /* On retire le centrage vertical (top:50% + margin-top:-250px) de Bootstrap 2 :
     avec une modale haute, ça plaçait la moitié inférieure sous la viewport et le
     bouton de validation pouvait être hors écran (surtout en zoom élevé). On ancre
     la modale à 20px du haut → le footer reste toujours visible. */
  top: 20px !important;
  margin-top: 0 !important;
  max-height: calc(100vh - 40px);
}

#modalAddGroupeProduit .modal-body {
  padding: 12px 15px;
  /* Hauteur du body bornée pour laisser place au header (~50px), footer (~60px)
     et marges (~40px). Garantit que le footer reste visible quelle que soit la
     hauteur du contenu / le niveau de zoom du navigateur. */
  max-height: calc(100vh - 190px);
  overflow-y: auto;
}

#modalAddGroupeProduit .modal-search-wrap {
  position: sticky;
  top: 0;
  background: #fff;
  padding-bottom: 10px;
  margin-bottom: 4px;
  z-index: 2;
  border-bottom: 1px solid #ececec;
}

#modalAddGroupeProduit_search {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  height: 44px;
  padding: 8px 14px;
  margin: 0;
  font-size: 16px;
  border-radius: 4px;
}

#modalAddGroupeProduit_table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}

#modalAddGroupeProduit_table thead th {
  background: #f7f7f9;
  font-weight: 600;
  color: #555;
  padding: 5px 8px;
  border-bottom: 1px solid #d9d9d9;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  position: sticky;
  top: 40px;
  /* sous le bandeau de recherche sticky */
  z-index: 1;
}

#modalAddGroupeProduit_table .col-check {
  width: 32px;
  text-align: center;
}

#modalAddGroupeProduit_table .col-cat {
  width: 35%;
  color: #777;
}

#modalAddGroupeProduit_table tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid #f3f3f3;
  vertical-align: middle;
}

#modalAddGroupeProduit_table tbody tr.modal-produit-row {
  cursor: pointer;
}

#modalAddGroupeProduit_table tbody tr.modal-produit-row:hover {
  background: #f5f9ff;
}

#modalAddGroupeProduit_table tbody tr.already-selected {
  background: #f0f0f0;
  color: #888;
  cursor: not-allowed;
}

#modalAddGroupeProduit_table tbody tr.already-selected td {
  color: #888;
}

#modalAddGroupeProduit_table tbody tr.produit_disabled .col-plat {
  text-decoration: line-through;
  color: #aaa;
}

#modalAddGroupeProduit_table tbody tr.produit_disabled .produit-disabled-tag {
  color: #c00;
  font-size: 10px;
  font-style: italic;
  margin-left: 4px;
  text-decoration: none;
  display: inline-block;
}

#modalAddGroupeProduit_empty {
  padding: 24px;
  text-align: center;
  color: #888;
  font-size: 13px;
  font-style: italic;
}

/* Mobile : modale étroite et bien positionnée sous 768px.
   Bootstrap 2 met par défaut: top:50%; left:50%; margin-left:-280px; margin-top:-250px.
   La marge négative de -280px sort la modale de l'écran sur petits écrans → on l'écrase. */
@media (max-width: 767px) {

  /* Padding-bottom défensif sur le form pour éviter que la barre basse du navigateur mobile
     (Chrome notamment) cache les derniers éléments quand on scrolle au max. */
  #form.form-menu {
    padding-bottom: 180px;
  }

  #modalAddGroupeProduit {
    width: auto;
    left: 10px !important;
    right: 10px !important;
    top: 5% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

  #modalAddGroupeProduit .modal-body {
    max-height: 70vh;
  }

  #modalAddGroupeProduit_table .col-cat {
    width: auto;
    font-size: 10px;
  }

  #form.form-menu .groupe-params {
    gap: 10px;
    font-size: 13px;
  }

  #form.form-menu .groupe-params .groupe-param input,
  #form.form-menu .groupe-params .groupe-param select {
    font-size: 13px;
  }

  #form.form-menu .groupe-produits-table .produit-categorie {
    display: block;
    font-size: 10px;
  }

  #form.form-menu .groupe-produits-table .produit-separator {
    display: none;
  }
}

/* =========================================================================
   Onglet POS Integration — sidebar verticale + tableaux de mapping
   ========================================================================= */
.pos-integration-wrapper {
  margin-top: 8px;
}

/* === Phase 2bis : button-group horizontal + tableau unifié 3 cas + orphans + pickers === */
.pos-entity-switcher {
  margin-bottom: 14px;
}

.pos-entity-switcher .btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Toolbar */
.pos-listing-panel .pos-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: nowrap;
  gap: 8px;
}

/* Le groupe de filtres = une seule rangée flex (les boutons ne se replient pas en interne,
   sinon le bloc Sync passe en dessous). */
.pos-listing-panel .pos-toolbar .pos-filter {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

/* Le bloc "Sync with POS" reste collé tout à droite, sur la même ligne. */
.pos-listing-panel .pos-toolbar .pos-toolbar-right {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Avant le 1er sync : seul le bouton "Sync with POS" est visible (+ une invite) */
.pos-listing-panel.pos-unsynced .pos-filter,
.pos-listing-panel.pos-unsynced .pos-section-title,
.pos-listing-panel.pos-unsynced .pos-mapping-table {
  display: none;
}

.pos-listing-panel.pos-unsynced .pos-toolbar {
  justify-content: flex-end;
}

.pos-sync-hint {
  display: none;
  margin: 18px 0;
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: #5a6b7b;
  background: #f5f8fb;
  border: 1px dashed #cdd9e5;
  border-radius: 4px;
}

.pos-listing-panel.pos-unsynced .pos-sync-hint {
  display: block;
}

.pos-sync-hint .icon-refresh {
  margin-right: 4px;
}

.pos-listing-panel .pos-filter .btn {
  font-size: 12px;
  padding: 4px 10px;
}

.pos-listing-panel .pos-filter .pos-status-dot.inline {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  vertical-align: middle;
  background: #ccc;
  border-radius: 50%;
}

.pos-listing-panel .pos-filter .pos-filter-matched .pos-status-dot.inline {
  background: #5cb85c;
}

.pos-listing-panel .pos-filter .pos-filter-diff .pos-status-dot.inline {
  background: #f0ad4e;
}

.pos-listing-panel .pos-filter .pos-filter-error .pos-status-dot.inline {
  background: #d9534f;
}

.pos-listing-panel .pos-filter .pos-filter-unmapped .pos-status-dot.inline {
  background: #b9b9b9;
}

.pos-listing-panel .pos-filter .pos-filter-new .pos-status-dot.inline {
  background: #5bc0de;
}

/* Badges de comptage directement dans les boutons de filtre */
.pos-listing-panel .pos-filter .pos-filter-badge {
  margin-left: 4px;
  background: #777;
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
}

.pos-listing-panel .pos-filter .pos-filter-matched .pos-filter-badge {
  background: #5cb85c;
}

.pos-listing-panel .pos-filter .pos-filter-diff .pos-filter-badge {
  background: #f0ad4e;
}

.pos-listing-panel .pos-filter .pos-filter-error .pos-filter-badge {
  background: #d9534f;
}

.pos-listing-panel .pos-filter .pos-filter-unmapped .pos-filter-badge {
  background: #b9b9b9;
}

.pos-listing-panel .pos-filter .pos-filter-new .pos-filter-badge {
  background: #5bc0de;
}

/* Ligne orpheline dans le tableau principal */
.pos-row-orphan .pos-cell-empty {
  color: #ccc;
}

.pos-row-orphan .pos-orphan-tag {
  color: #5bc0de;
  font-style: italic;
  font-size: 12px;
}

/* ===== Options de commande : vue groupée option → choix ===== */
.pos-table-options .pos-opt-toggle {
  cursor: pointer;
  color: #888;
  margin-right: 4px;
  font-size: 11px;
  vertical-align: middle;
}

.pos-table-options .pos-opt-toggle:hover {
  color: #333;
}

/* Lignes de choix : une vraie ligne <tr> par choix, alignée sur les colonnes de l'option.
   Fond légèrement teinté + texte plus petit pour les distinguer de la ligne d'option. */
.pos-opt-choice-row>td {
  background: #fbfcfd;
  font-size: 11px;
  border-top: 1px solid #f3f3f3;
}

.pos-opt-choice-row .pos-col-status {
  text-align: right;
  padding-right: 6px;
}

.pos-opt-choice-row .pos-choice-indent {
  padding-left: 26px;
}

/* aligné sous le chevron */
/* Décalage des choix par rapport au titre de l'option */
.pos-opt-choice-row .pos-choice-mt {
  color: #333;
  padding-left: 22px;
}

.pos-opt-choice-row .pos-choice-pos {
  color: #555;
  padding-left: 22px;
}

/* Liste de choix dans les modales Import / Pull (et picker) — indentée sous le titre */
.pos-opt-modal-list {
  margin: 4px 0 0 22px;
  padding-left: 14px;
}

.pos-opt-modal-list li {
  font-size: 11px;
  line-height: 1.6;
}

.pos-opt-modal-list li.pos-opt-new {
  color: #3c763d;
}

/* choix qui seront créés au Pull */

/* Picker option : chevron + sous-lignes de choix */
.pos-picker-toggle {
  cursor: pointer;
  color: #888;
  margin-right: 3px;
  font-size: 11px;
}

.pos-picker-toggle:hover {
  color: #333;
}

.pos-picker-values>td {
  background: #f7f9fb;
  padding-top: 0;
  padding-bottom: 4px;
}

.pos-picker-values .pos-opt-modal-list {
  margin-top: 0;
}

/* Pastilles de statut par choix (réutilise la palette des cas) */
.pos-status-dot.pos-choice-matched {
  background: #5cb85c;
}

.pos-status-dot.pos-choice-diff {
  background: #f0ad4e;
}

.pos-status-dot.pos-choice-error {
  background: #d9534f;
}

.pos-status-dot.pos-choice-unmapped {
  background: #b9b9b9;
}

.pos-status-dot.pos-choice-orphan {
  background: #5bc0de;
}

/* Largeur uniforme de TOUTES les modales du module POS : 65%, centrées. */
.pos-modal-picker-zelty,
.pos-modal-picker-option,
.pos-modal-picker-menu,
.pos-modal-import,
.pos-modal-import-all,
.pos-modal-pull,
.pos-modal-dissociate,
.pos-modal-delete-produit,
.pos-modal-opt-import,
.pos-modal-opt-import-all,
.pos-modal-opt-pull,
.pos-modal-opt-dissociate,
.pos-modal-opt-delete,
.pos-modal-menu-import,
.pos-modal-menu-import-all,
.pos-modal-menu-pull,
.pos-modal-menu-dissociate,
.pos-modal-menu-delete {
  width: 65% !important;
  left: 17.5% !important;
  margin-left: 0 !important;
}

/* Corps des modales POS toujours scrollable → le footer (boutons de validation) reste visible
   même si le contenu est long (résumé de Pull, longue liste de groupes/plats). Sur desktop le cap
   Bootstrap par défaut peut être neutralisé ailleurs dans l'app : on le ré-impose ici. */
[class*="pos-modal-"] .modal-body {
  /* la modale est à top:10% → ~90vh dispo ; on réserve ~120px pour l'en-tête + le footer */
  max-height: calc(90vh - 120px) !important;
  overflow-y: auto;
}
.pos-modal-picker-option .modal-body {
  max-height: 65vh;
  overflow-y: auto;
}

.pos-modal-picker-option .pos-picker-table .pos-picker-select {
  white-space: nowrap;
  min-width: 96px;
}

/* ===== Menus : vue groupée Menu → Groupe → Plat ===== */
.pos-table-menus .pos-menu-toggle,
.pos-table-menus .pos-mg-toggle {
  cursor: pointer;
  color: #888;
  margin-right: 4px;
  font-size: 11px;
  vertical-align: middle;
}

.pos-table-menus .pos-menu-toggle:hover,
.pos-table-menus .pos-mg-toggle:hover {
  color: #333;
}

.pos-mg-row>td {
  background: #fbfcfd;
  font-size: 12px;
  border-top: 1px solid #f3f3f3;
}

.pos-dish-row>td {
  background: #fdfdfe;
  font-size: 12px;
  border-top: 1px solid #f6f6f6;
}

.pos-indent-1 {
  padding-left: 26px !important;
  text-align: left !important;
}

.pos-indent-2 {
  padding-left: 56px !important;
  text-align: left !important;
}

/* Le libellé d'un groupe est légèrement en retrait ; celui d'un plat l'est nettement plus
   (le listing des plats apparaît bien indenté sous son groupe). */
.pos-mg-row .pos-choice-mt {
  padding-left: 8px;
}

.pos-dish-row .pos-choice-mt {
  padding-left: 36px;
}

.pos-indent-text {
  padding-left: 36px;
}

/* Bouton "Import all" en bordure cyan */
.pos-action-import-all,
.pos-opt-import-all,
.pos-menu-import-all {
  margin-right: 6px;
}

/* Icône rouge (croix de dissociation) */
.pos-icon-red {
  color: #d9534f !important;
}

/* Indication "déjà mappé à <X>" dans le picker POS */
.pos-already-mapped-hint {
  font-size: 11px;
  color: #c07820;
  margin-top: 2px;
}

.pos-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin: 16px 0 6px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #dce0e6;
}

/* Cellules produit (MenuTouch) / remote (POS) */
.pos-mapping-table .pos-cell-produit,
.pos-mapping-table .pos-cell-remote {
  font-size: 12px;
}

.pos-mapping-table .pos-cell-libelle {
  font-weight: 500;
  color: #333;
}

.pos-mapping-table .pos-cell-sub {
  font-size: 11px;
  color: #888;
}

.pos-mapping-table .pos-cell-remote-empty {
  color: #aaa;
  font-style: italic;
  font-size: 11px;
}

.pos-mapping-table .pos-match-ok {
  color: #4a9d4a;
  font-weight: 500;
}

.pos-mapping-table .pos-diff {
  color: #c07820;
  font-weight: 500;
}

.pos-mapping-table .pos-col-action {
  text-align: right;
  white-space: nowrap;
  width: 110px;
}

.pos-mapping-table .pos-col-id {
  width: 140px;
}

/* Badge POS ID lecture seule */
.pos-id-badge {
  background: #f3f5f8;
  color: #555;
  border: 1px solid #dce0e6;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-family: 'Courier New', monospace;
}

.pos-id-empty {
  color: #ccc;
}

/* Palette des cas */
.pos-row[data-case="pending"] .pos-status-dot {
  background: #999;
}

.pos-row[data-case="matched"] .pos-status-dot {
  background: #5cb85c;
}

.pos-row[data-case="matched"]>td {
  background-color: #f4faf4;
}

.pos-row[data-case="matched_with_diff"] .pos-status-dot {
  background: #f0ad4e;
}

.pos-row[data-case="matched_with_diff"]>td {
  background-color: #fff8eb;
}

.pos-row[data-case="error"] .pos-status-dot {
  background: #d9534f;
}

.pos-row[data-case="error"]>td {
  background-color: #fbf0f0;
}

.pos-row[data-case="unmapped"] .pos-status-dot {
  background: #b9b9b9;
}

.pos-row[data-case="unmapped"]>td {
  background-color: #fbfbfb;
}

.pos-row[data-case="orphan"] .pos-status-dot {
  background: #5bc0de;
}

.pos-row[data-case="orphan"]>td {
  background-color: #eff7fb;
}

/* Avertissement texte "POS ID not found" sur les lignes en erreur */
.pos-cell-remote-empty.pos-error-warning {
  color: #d9534f;
  font-style: normal;
  font-weight: 500;
}

.pos-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  vertical-align: middle;
}

/* Flash success après save */
.pos-row.flash-success>td {
  background-color: #eaf6ea !important;
  transition: background-color 0.3s;
}

/* (Largeur du picker Zelty gérée par la règle uniforme plus haut.) */
.pos-modal-picker-zelty .modal-body {
  max-height: 65vh;
  overflow-y: auto;
}

.pos-picker-search {
  width: 100% !important;
  max-width: 100% !important;
  height: 44px;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 6px 10px;
}

.pos-picker-table {
  width: 100%;
  font-size: 12px;
}

/* Bouton "Sélectionner" : ne pas tronquer sur 2 lignes */
.pos-picker-table .pos-picker-select {
  white-space: nowrap;
  min-width: 96px;
}

.pos-picker-table thead th {
  background: #f3f5f8;
  padding: 5px 8px;
  font-size: 11px;
  text-transform: uppercase;
  color: #555;
}

.pos-picker-table tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.pos-picker-empty {
  padding: 24px;
  text-align: center;
  color: #888;
  font-style: italic;
}

/* Modale Dissocier */
.pos-modal-dissociate .modal-dissociate-info {
  margin-top: 10px;
  padding: 8px 12px;
  background: #f3f5f8;
  border-left: 3px solid #f0ad4e;
  font-size: 12px;
}

/* (Largeur des modales Import / Import all / Pull gérée par la règle uniforme plus haut.) */

/* Import : intitulé + select alignés sur une ligne — IDENTIQUE pour Produits/Options (catégorie /
   sous-catégorie) et Menus (page). */
.pos-modal-import .control-group,
.pos-modal-import-all .control-group,
.pos-modal-menu-import .control-group,
.pos-modal-menu-import-all .control-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Menus : un peu d'air au-dessus du champ Page (le décale vers le bas). */
.pos-modal-menu-import .control-group,
.pos-modal-menu-import-all .control-group {
  margin-top: 14px;
}

.pos-modal-import .control-label,
.pos-modal-import-all .control-label,
.pos-modal-menu-import .control-label,
.pos-modal-menu-import-all .control-label {
  width: 140px;
  text-align: right;
  margin: 0;
  padding: 0;
  font-weight: 600;
  color: #555;
  line-height: 30px;
}

.pos-modal-import .controls,
.pos-modal-import-all .controls,
.pos-modal-menu-import .controls,
.pos-modal-menu-import-all .controls {
  margin: 0 0 0 0 !important;
  flex: 1;
}

.pos-modal-import .controls select,
.pos-modal-import-all .controls select,
.pos-modal-menu-import .controls select,
.pos-modal-menu-import-all .controls select {
  margin: 0;
  width: 100%;
}

/* Modale Import / Pull — tables */
.pos-modal-import .pos-import-data,
.pos-modal-pull .pos-pull-diff {
  width: 100%;
  margin: 10px 0;
}

.pos-modal-pull .pos-pull-diff td.lbl,
.pos-modal-pull .pos-pull-diff th {
  font-weight: 600;
  color: #666;
  padding: 5px 8px;
  font-size: 12px;
  width: 110px;
  background: #f5f5f5;
}

/* Table d'import : libellés à gauche SANS fond gris, pour que le zébrage traverse toute la ligne */
.pos-modal-import .pos-import-data td.lbl {
  font-weight: 600;
  color: #666;
  padding: 6px 10px;
  font-size: 12px;
  width: 130px;
}

.pos-modal-import .pos-import-data td.val {
  padding: 6px 10px;
  font-size: 13px;
}

/* Zébrage blanc / bleu clair appliqué à la LIGNE entière (les deux colonnes) */
.pos-modal-import .pos-import-data tr:nth-child(odd) td {
  background: #ffffff;
}

.pos-modal-import .pos-import-data tr:nth-child(even) td {
  background: #eef4fb;
}

.pos-modal-pull .pos-pull-diff td {
  padding: 5px 8px;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
}

.pos-modal-pull .pos-pull-diff thead th {
  text-align: center;
  background: #f3f5f8;
  font-size: 11px;
  text-transform: uppercase;
}

.pos-modal-pull .pos-pull-diff td.produit {
  background: #fafbfc;
  color: #888;
  text-decoration: line-through;
}

.pos-modal-pull .pos-pull-diff td.remote {
  background: #eaf6ea;
  color: #333;
  font-weight: 500;
}

.pos-modal-import .import-photo-preview,
.pos-modal-pull .pull-remote-photo,
.pos-modal-pull .pull-produit-photo {
  max-width: 120px;
  max-height: 120px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

/* Panneau de listing (à droite) */
.pos-listing-panel {
  background: #fff;
}

.pos-listing-panel .pos-listing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pos-listing-panel .pos-listing-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.pos-listing-panel .pos-listing-header .pos-count {
  color: #888;
  font-weight: normal;
  font-size: 12px;
  margin-left: 4px;
}

.pos-listing-panel .pos-sync-status {
  font-size: 11px;
  font-style: italic;
  color: #c07820;
  margin-bottom: 6px;
}

/* Tableau de mapping */
.pos-mapping-table {
  width: 100%;
  margin-bottom: 10px;
  font-size: 12px;
}

.pos-mapping-table thead th {
  background: #f3f5f8;
  border-bottom: 1px solid #dce0e6;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  color: #555;
  padding: 5px 8px;
}

.pos-mapping-table tbody td {
  padding: 4px 8px;
  vertical-align: middle;
  border-top: 1px solid #f0f0f0;
}

.pos-mapping-table tbody tr:hover td {
  background: #fafbfc;
}

.pos-mapping-table .pos-cell-cat {
  color: #888;
  font-size: 11px;
}

.pos-mapping-table .pos-col-prix {
  width: 70px;
  text-align: right;
  white-space: nowrap;
}

.pos-mapping-table .pos-col-id {
  width: 220px;
}

.pos-mapping-table .pos-col-status {
  width: 22px;
  text-align: center;
}

.pos-mapping-table .pos-remote-id-input {
  width: 100%;
  box-sizing: border-box;
  padding: 3px 6px;
  margin: 0;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* Statut visuel : pastille colorée */
.pos-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  vertical-align: middle;
}

.pos-row.pos-status-matched .pos-status-dot {
  background: #5cb85c;
  box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.15);
}

.pos-row.pos-status-mismatched .pos-status-dot {
  background: #d9534f;
  box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.15);
}

.pos-row.pos-status-unmapped .pos-status-dot {
  background: #f0ad4e;
  box-shadow: 0 0 0 2px rgba(240, 173, 78, 0.15);
}

.pos-row.pos-status-pending .pos-status-dot {
  background: #999;
}

/* Background subtil de la ligne entière selon le statut */
.pos-row.pos-status-matched td {
  background-color: #f4faf4;
}

.pos-row.pos-status-mismatched td {
  background-color: #fbf4f4;
}

/* Flash de feedback après save inline */
.pos-row.flash-success td {
  background-color: #eaf6ea !important;
  transition: background-color 0.3s;
}

.pos-row.flash-error td {
  background-color: #fbe9e7 !important;
  transition: background-color 0.3s;
}

/* Encart "Orphelins POS" */
.pos-orphans-panel {
  margin-top: 14px;
  padding: 10px 14px;
  background: #fff8e6;
  border: 1px solid #f0d28a;
  border-radius: 3px;
}

.pos-orphans-panel h5 {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #8a6d3b;
}

.pos-orphans-panel h5 small {
  color: #aa8852;
  font-weight: normal;
  margin-left: 6px;
}

.pos-orphans-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pos-orphans-list .pos-orphan-item {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed #f0d28a;
  font-size: 12px;
}

.pos-orphans-list .pos-orphan-item:last-child {
  border-bottom: 0;
}

.pos-orphans-list .pos-orphan-label {
  color: #333;
}

.pos-orphans-list .pos-orphan-id {
  color: #8a6d3b;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

/* Bouton de sync en cours */
.pos-sync-btn.btn-loading {
  opacity: 0.6;
  cursor: wait;
}

/* ==========================================================================
   MOBILE — module POS (≤ 640px)
   Tableaux desktop (5-6 colonnes) inadaptés : on passe en "cartes" (en-têtes
   masqués, colonnes secondaires cachées, contenu empilé) + barre de filtres compacte.
   ========================================================================== */
@media (max-width: 640px) {

  /* ---- Rester masqué tant qu'on n'a pas synchronisé (override des display:block mobile) ---- */
  .pos-listing-panel.pos-unsynced .pos-filter,
  .pos-listing-panel.pos-unsynced .pos-section-title,
  .pos-listing-panel.pos-unsynced .pos-mapping-table {
    display: none !important;
  }

  /* ---- Barre de filtres compacte ---- */
  .pos-listing-panel .pos-toolbar {
    flex-wrap: wrap;
  }

  .pos-listing-panel .pos-toolbar .pos-filter {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .pos-listing-panel .pos-filter .btn {
    font-size: 11px;
    padding: 3px 7px;
    line-height: 1.4;
  }

  .pos-listing-panel .pos-filter .pos-status-dot.inline {
    width: 7px;
    height: 7px;
  }

  .pos-listing-panel .pos-filter .pos-filter-badge {
    font-size: 9px;
    padding: 0 4px;
    margin-left: 2px;
  }

  /* le bloc Sync passe en dessous, pleine largeur */
  .pos-listing-panel .pos-toolbar .pos-toolbar-right {
    width: 100%;
    margin: 6px 0 0;
    display: flex;
    justify-content: flex-end;
  }

  /* ---- Tableaux en cartes ---- */
  .pos-listing-panel .pos-mapping-table,
  .pos-listing-panel .pos-mapping-table tbody {
    display: block;
    width: 100%;
  }

  .pos-listing-panel .pos-mapping-table thead {
    display: none;
  }

  /* plus d'en-têtes verticaux */
  .pos-listing-panel .pos-mapping-table tr {
    display: block;
  }

  .pos-listing-panel .pos-mapping-table td {
    display: block;
  }

  /* Colonnes secondaires masquées sur mobile */
  .pos-listing-panel .pos-mapping-table .pos-cell-cat,
  .pos-listing-panel .pos-mapping-table .pos-col-id {
    display: none !important;
  }

  /* Lignes principales = cartes. Par défaut boîte fermée (produits, ou menu/option REPLIÉE). */
  .pos-mapping-table tr.pos-row {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    margin: 12px 0 0;
    padding: 8px 10px;
    background: #fff !important;
  }
  /* Carte menu/option DÉPLIÉE (suivie d'une sous-ligne VISIBLE) : on ouvre le bas pour englober
     les enfants ; la dernière sous-ligne refermera la boîte. */
  .pos-mapping-table tr.pos-row:has(+ tr.pos-mg-row:not([style*="none"])),
  .pos-mapping-table tr.pos-row:has(+ tr.pos-opt-choice-row:not([style*="none"])) {
    border-bottom: none;
    border-radius: 5px 5px 0 0;
  }

  .pos-mapping-table tr.pos-row>td {
    border: none !important;
    padding: 1px 0 !important;
    background: transparent !important;
    width: auto !important;
    white-space: normal;
  }

  /* dot (+ chevron) inline, juste avant le libellé, sur la même ligne */
  .pos-mapping-table tr.pos-row>td.pos-col-status {
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px 0 0 !important;
  }

  .pos-mapping-table tr.pos-row>td.pos-cell-produit {
    display: inline-block;
    vertical-align: middle;
  }

  /* libellé de l'entité (produit / option / menu) bien visible */
  .pos-mapping-table tr.pos-row>td.pos-cell-produit .pos-cell-libelle {
    font-weight: 600;
  }

  /* donnée POS préfixée pour la lisibilité (plus d'en-tête de colonne) */
  .pos-mapping-table tr.pos-row>td.pos-cell-remote {
    color: #555;
  }

  .pos-mapping-table tr.pos-row>td.pos-cell-remote:before {
    content: "POS : ";
    color: #999;
    font-size: 11px;
  }

  /* action sous le contenu, alignée à droite */
  .pos-mapping-table tr.pos-row>td.pos-col-action {
    text-align: right;
    margin-top: 4px;
  }

  .pos-mapping-table tr.pos-row>td.pos-col-action .btn {
    font-size: 12px;
  }

  /* Sous-lignes : DANS la carte → pas de marge latérale, bords gauche/droite + filet BAS continus
     (ceux de la carte). La dernière sous-ligne VISIBLE referme ainsi la boîte ; les sous-lignes
     masquées (groupe replié) ne dessinent rien → robuste. Indentation = padding-gauche du contenu. */
  .pos-mapping-table tr.pos-mg-row,
  .pos-mapping-table tr.pos-opt-choice-row {
    margin: 0;
    padding: 4px 10px 4px 16px;
    background: #fbfcfd;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
  }
  .pos-mapping-table tr.pos-dish-row {
    margin: 0;
    padding: 3px 10px 3px 30px;
    background: #fcfdfe;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
  }
  /* Coins bas arrondis sur la toute dernière sous-ligne du tableau */
  .pos-mapping-table tr.pos-mg-row:last-child,
  .pos-mapping-table tr.pos-dish-row:last-child,
  .pos-mapping-table tr.pos-opt-choice-row:last-child {
    border-radius: 0 0 5px 5px;
  }

  .pos-mapping-table tr.pos-mg-row>td,
  .pos-mapping-table tr.pos-dish-row>td,
  .pos-mapping-table tr.pos-opt-choice-row>td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    white-space: normal;
  }

  /* On masque la colonne POS des sous-lignes (sinon "nous" + "POS" empilés = doublon visuel),
     ainsi que l'ID et l'action ; le statut reste lisible via la pastille. */
  .pos-mapping-table tr.pos-mg-row>td.pos-choice-pos,
  .pos-mapping-table tr.pos-dish-row>td.pos-choice-pos,
  .pos-mapping-table tr.pos-opt-choice-row>td.pos-choice-pos,
  .pos-mapping-table tr.pos-mg-row>td.pos-col-id,
  .pos-mapping-table tr.pos-dish-row>td.pos-col-id,
  .pos-mapping-table tr.pos-opt-choice-row>td.pos-col-id,
  .pos-mapping-table tr.pos-mg-row>td.pos-col-action,
  .pos-mapping-table tr.pos-dish-row>td.pos-col-action,
  .pos-mapping-table tr.pos-opt-choice-row>td.pos-col-action {
    display: none !important;
  }

  /* Dot inline juste avant le libellé (au lieu d'une ligne entière) */
  .pos-mapping-table tr.pos-mg-row>td.pos-col-status,
  .pos-mapping-table tr.pos-dish-row>td.pos-col-status,
  .pos-mapping-table tr.pos-opt-choice-row>td.pos-col-status {
    display: inline-block !important;
    width: auto !important;
    padding: 0 5px 0 0 !important;
    text-align: left !important;
  }
  .pos-mapping-table tr.pos-mg-row>td.pos-choice-mt,
  .pos-mapping-table tr.pos-dish-row>td.pos-choice-mt,
  .pos-mapping-table tr.pos-opt-choice-row>td.pos-choice-mt {
    display: inline-block !important;
    padding-left: 0 !important;
  }
  /* on neutralise les indentations desktop (gérées ici par les marges des sous-lignes) */
  .pos-indent-1, .pos-indent-2, .pos-indent-text { padding-left: 0 !important; }

  /* ---- Modales : (presque) pleine largeur sur mobile ---- */
  .pos-modal-picker-zelty,
  .pos-modal-picker-option,
  .pos-modal-picker-menu,
  .pos-modal-import,
  .pos-modal-import-all,
  .pos-modal-pull,
  .pos-modal-dissociate,
  .pos-modal-delete-produit,
  .pos-modal-opt-import,
  .pos-modal-opt-import-all,
  .pos-modal-opt-pull,
  .pos-modal-opt-dissociate,
  .pos-modal-opt-delete,
  .pos-modal-menu-import,
  .pos-modal-menu-import-all,
  .pos-modal-menu-pull,
  .pos-modal-menu-dissociate,
  .pos-modal-menu-delete {
    width: 94% !important;
    left: 3% !important;
    margin-left: 0 !important;
    top: 10px !important;
  }

  /* La modale tient dans l'écran : le corps scrolle, le footer (boutons de validation) reste visible */
  [class*="pos-modal-"] .modal-body {
    max-height: calc(100vh - 150px) !important;
    overflow-y: auto;
  }

  /* Pickers (tableau dans les modales Associer) → cartes, comme la page */
  [class*="pos-modal-"] .pos-picker-table,
  [class*="pos-modal-"] .pos-picker-table tbody,
  [class*="pos-modal-"] .pos-picker-table tr,
  [class*="pos-modal-"] .pos-picker-table td {
    display: block;
    width: auto;
  }
  [class*="pos-modal-"] .pos-picker-table thead {
    display: none;
  }
  [class*="pos-modal-"] .pos-picker-table tr.pos-picker-row {
    border: 1px solid #ececec;
    border-radius: 4px;
    margin-bottom: 6px;
    padding: 6px 8px;
  }
  [class*="pos-modal-"] .pos-picker-table tr.pos-picker-row>td {
    border: none !important;
    padding: 1px 0 !important;
  }
  /* le bouton "Sélectionner" en pleine largeur sous l'élément */
  [class*="pos-modal-"] .pos-picker-table .pos-picker-select {
    width: 100%;
    margin-top: 4px;
  }
  [class*="pos-modal-"] .pos-picker-values>td {
    padding: 0 0 6px 10px !important;
  }
}