/* =======================
   Variables brandables
   ======================= */
:root{
  /* Couleurs (modifiable pour chaque client) */
  --ysvc-color-primary: #111;   /* Noir des boutons / états actifs */
  --ysvc-color-text:    #111;   /* Couleur globale du texte */
  --ysvc-color-border:  #e5e7eb;/* Bordures */
  --ysvc-color-bg-lite: #f6f7f8;/* Fond gris clair */

  /* Dimensions / tokens */
  --ysvc-qty-width:110px;
  --ysvc-qty-h:36px;
  --ysvc-qty-fs:15px;

  /* Boutons / icônes (poubelle & inventaire alignés) */
  --ysvc-btn-size:34px;
  --ysvc-icon-size:18px;

  /* Rayons / ombre / transitions */
  --ysvc-radius-sm:8px;
  --ysvc-radius-md:10px;
  --ysvc-radius-lg:12px;
  --ysvc-border-w:1px;
  --ysvc-shadow:0 10px 30px rgba(0,0,0,.15);
  --ysvc-dur:.25s;
  --ysvc-ease:cubic-bezier(.2,.7,.2,1);

  /* Module + modal */
  --ysvc-module-h:600px;
  --ysvc-modal-bg:rgba(17,17,17,.45);
}

.ysvc-wrapper,.ysvc-wrapper *{box-sizing:border-box;}
.ysvc-wrapper{
  overflow:visible;
  color:var(--ysvc-color-text);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* A11y focus */
.ysvc-wrapper :focus-visible{
  outline:2px solid var(--ysvc-color-primary);
  outline-offset:2px;
}

/* Motion safe */
@media (prefers-reduced-motion:reduce){
  .ysvc-wrapper *{transition:none !important;animation:none !important;}
}

/* ============ Layout colonnes ============ */
.ysvc-wrapper .ysvc-inner{
  display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:stretch;
}
@media (max-width:900px){
  .ysvc-wrapper .ysvc-inner{grid-template-columns:1fr;display:block;}
}
.ysvc-wrapper .ysvc-left,.ysvc-wrapper .ysvc-right{
  display:flex;flex-direction:column;min-height:100%;
}

/* ============ En-têtes (sticky + marge 32px) ============ */
.ysvc-wrapper .ysvc-left-header,
.ysvc-wrapper .ysvc-tabs-row,
.ysvc-wrapper .ysvc-inventory-header{
  position:sticky;top:32px;z-index:10;background:#fff;
}
.ysvc-wrapper .ysvc-left-header{border-bottom:var(--ysvc-border-w) solid var(--ysvc-color-border);padding:8px 8px 10px;}
.ysvc-wrapper .ysvc-inventory-header{
  border-bottom:var(--ysvc-border-w) solid var(--ysvc-color-border);padding:10px 12px;
  display:flex;align-items:center;justify-content:space-between;
}

/* ============ Zones scrollables ============ */
.ysvc-wrapper .ysvc-left-body,.ysvc-wrapper .ysvc-inventory-body{
  flex:1 1 auto;overflow:auto;padding:8px 10px;
}

/* ============ Barre de recherche + bouton inventaire ============ */
.ysvc-wrapper .ysvc-searchbar{display:flex;gap:8px;align-items:center;}
.ysvc-wrapper .ysvc-search{
  flex:1;border:var(--ysvc-border-w) solid var(--ysvc-color-border);border-radius:var(--ysvc-radius-md);padding:10px 12px;outline:none;
}
.ysvc-wrapper .ysvc-search:focus{box-shadow:none;}
.ysvc-wrapper .ysvc-search::-webkit-search-cancel-button{
  -webkit-appearance:none;height:14px;width:14px;cursor:pointer;
  /* Gardé en noir par défaut (icône "X") */
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center center;
}

/* Bouton inventaire (aligné sur poubelle) */
.ysvc-wrapper .ysvc-cart-btn{
  display:none !important;align-items:center;justify-content:center;
  width:var(--ysvc-btn-size);height:var(--ysvc-btn-size);
  border:var(--ysvc-border-w) solid var(--ysvc-color-primary);
  border-radius:var(--ysvc-radius-sm);
  background:#fff;color:var(--ysvc-color-primary);
  cursor:pointer;transition:all var(--ysvc-dur) var(--ysvc-ease);
}
.ysvc-wrapper .ysvc-cart-btn:hover{background:var(--ysvc-color-bg-lite);}
.ysvc-wrapper .ysvc-cart-btn svg,
.ysvc-wrapper .ysvc-cart-btn svg *{stroke:currentColor !important;fill:none !important;}
.ysvc-wrapper .ysvc-cart-btn svg{width:var(--ysvc-icon-size);height:var(--ysvc-icon-size);}
@media (hover:hover){
  .ysvc-wrapper .ysvc-cart-btn:hover,
  .ysvc-wrapper .ysvc-cart-btn.is-open,
  .ysvc-wrapper .ysvc-cart-btn:active{
    background:var(--ysvc-color-primary) !important;color:#fff !important;border-color:var(--ysvc-color-primary) !important;
  }
}

/* ============ Catégories ============ */
.ysvc-wrapper .ysvc-tabs-row{display:flex;align-items:center;justify-content:space-between;margin-top:16px;margin-bottom:16px;min-width:0;}
.ysvc-wrapper .ysvc-tabs{
  display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;min-width:0;
}
.ysvc-wrapper .ysvc-tab{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;border:var(--ysvc-border-w) solid var(--ysvc-color-primary) !important;border-radius:var(--ysvc-radius-md);
  background:#fff !important;color:var(--ysvc-color-primary) !important;cursor:pointer;white-space:nowrap;transition:all var(--ysvc-dur) var(--ysvc-ease);
}
.ysvc-wrapper .ysvc-tab:hover{background:var(--ysvc-color-primary) !important;color:#fff !important;}
.ysvc-wrapper .ysvc-tab.is-active{background:var(--ysvc-color-primary) !important;color:#fff !important;border-color:var(--ysvc-color-primary) !important;}
.ysvc-wrapper .ysvc-cat-select-wrap{display:none;width:100%;}

/* Tabs → Select + inventaire masqué en ≤900px */
@media (max-width:900px){
  .ysvc-wrapper .ysvc-tabs{display:none !important;}
  .ysvc-wrapper .ysvc-cat-select-wrap{display:block !important;margin-top:16px;background:#fff;}
  .ysvc-wrapper .ysvc-cat-select{
    width:100%;border:var(--ysvc-border-w) solid var(--ysvc-color-border);border-radius:var(--ysvc-radius-md);padding:8px 10px;margin-top:8px;margin-bottom:16px;color:var(--ysvc-color-text);background:#fff;
  }
  .ysvc-wrapper .ysvc-right{
    display:none !important;height:auto !important;min-height:0 !important;padding:0 !important;
  }
  .ysvc-wrapper .ysvc-cart-btn{
    display:inline-flex !important; /* visible en mobile quand la colonne est masquée */
  }
}

/* ============ Grille des items ============ */
.ysvc-wrapper .ysvc-items-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
@media (max-width:900px){.ysvc-wrapper .ysvc-items-grid{grid-template-columns:1fr;}}
.ysvc-wrapper .ysvc-item-card{
  border:var(--ysvc-border-w) solid var(--ysvc-color-border);border-radius:var(--ysvc-radius-lg);padding:16px;background:#fff;color:var(--ysvc-color-text);
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;transition:background var(--ysvc-dur) var(--ysvc-ease);
}
.ysvc-wrapper .ysvc-item-card:hover{background:var(--ysvc-color-bg-lite);}
.ysvc-wrapper .ysvc-item-card:active{background:var(--ysvc-color-bg-lite);}

/* ============ Contrôles quantité ============ */
.ysvc-wrapper .ysvc-qty{
  display:grid;grid-template-columns:34px 1fr 34px;width:var(--ysvc-qty-width);align-items:center;gap:6px;
}
.ysvc-wrapper .ysvc-qty-value{
  height:var(--ysvc-qty-h);display:flex;align-items:center;justify-content:center;font-size:var(--ysvc-qty-fs);font-weight:700;color:var(--ysvc-color-text);
}
.ysvc-wrapper .ysvc-btn{
  display:flex;align-items:center;justify-content:center;height:var(--ysvc-qty-h);
  border:var(--ysvc-border-w) solid var(--ysvc-color-primary) !important;background:#fff !important;color:var(--ysvc-color-primary) !important;border-radius:var(--ysvc-radius-sm);padding:0;font-weight:700;cursor:pointer;transition:all var(--ysvc-dur) var(--ysvc-ease);
}
.ysvc-wrapper .ysvc-btn:hover{background:var(--ysvc-color-primary) !important;color:#fff !important;}
.ysvc-wrapper .ysvc-btn:active{background:#000 !important;color:#fff !important;}
.ysvc-wrapper .ysvc-btn:focus{outline:none;box-shadow:none;}

/* ============ Inventaire : items + espacement ============ */
.ysvc-wrapper .ysvc-inv-row{
  display:grid;grid-template-columns:1fr var(--ysvc-qty-width);align-items:center;gap:10px;
  border:var(--ysvc-border-w) solid var(--ysvc-color-border);border-radius:var(--ysvc-radius-lg);padding:16px;background:#fff;color:var(--ysvc-color-text);
}
.ysvc-wrapper .ysvc-inv-left{display:flex;gap:12px;align-items:center;}
.ysvc-wrapper .ysvc-inventory-body{display:flex;flex-direction:column;gap:16px;padding-top:16px;}

/* ============ Poubelle ============ */
.ysvc-wrapper .ysvc-trash{
  min-width:var(--ysvc-btn-size);height:var(--ysvc-btn-size);
  border:var(--ysvc-border-w) solid var(--ysvc-color-primary) !important;background:#fff !important;border-radius:var(--ysvc-radius-sm);
  display:flex;align-items:center;justify-content:center;color:var(--ysvc-color-primary) !important;padding:0 10px;transition:all .18s ease;gap:8px;outline:none !important;box-shadow:none !important;
}
.ysvc-wrapper .ysvc-trash:hover{background:var(--ysvc-color-bg-lite) !important;color:var(--ysvc-color-primary) !important;}
.ysvc-wrapper .ysvc-trash:active{background:var(--ysvc-color-primary) !important;color:#fff !important;border-color:var(--ysvc-color-primary) !important;}
.ysvc-wrapper .ysvc-trash.is-confirm{background:var(--ysvc-color-primary) !important;color:#fff !important;border-color:var(--ysvc-color-primary) !important;padding:0 12px 0 10px;}
.ysvc-wrapper .ysvc-trash .ysvc-trash-label{display:none;font-weight:700;}
.ysvc-wrapper .ysvc-trash.is-confirm .ysvc-trash-label{display:inline;}

/* ============ Barre Total / CTA ============ */
.ysvc-wrapper .ysvc-totalbar{
  margin-top:16px !important;border:var(--ysvc-border-w) solid var(--ysvc-color-border);background:#fff;border-radius:var(--ysvc-radius-lg);
}
.ysvc-wrapper .ysvc-totalbar-content{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;
}
.ysvc-wrapper .ysvc-total-label{font-size:11px;letter-spacing:.06em;color:#666;}
.ysvc-wrapper .ysvc-total-value{font-size:18px;color:var(--ysvc-color-text);}
.ysvc-wrapper .ysvc-cta{
  border:var(--ysvc-border-w) solid var(--ysvc-color-primary);background:var(--ysvc-color-primary);color:#fff;border-radius:var(--ysvc-radius-md);
  padding:10px 14px;font-weight:700;cursor:pointer;transition:all var(--ysvc-dur) var(--ysvc-ease);
}
.ysvc-wrapper .ysvc-cta:hover{background:#fff;color:var(--ysvc-color-primary);border-color:var(--ysvc-color-primary);}
.ysvc-wrapper .ysvc-cta:active{transform:translateY(0);box-shadow:none;}

/* ============ Modal inventaire (mobile) ============ */
.ysvc-wrapper .ysvc-modal{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:var(--ysvc-modal-bg);z-index:9999;
}
.ysvc-wrapper .ysvc-modal.is-open{display:flex;}
.ysvc-wrapper .ysvc-modal-panel{
  width:min(720px,92vw);max-height:80vh;overflow:hidden;background:#fff;border-radius:14px;box-shadow:var(--ysvc-shadow);display:flex;flex-direction:column;
}
.ysvc-wrapper .ysvc-modal-header{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:var(--ysvc-border-w) solid #f1f5f9;
}
.ysvc-wrapper .ysvc-modal-title{font-size:20px;font-weight:800;color:var(--ysvc-color-text);}
.ysvc-wrapper .ysvc-modal-close{
  width:var(--ysvc-btn-size);height:var(--ysvc-btn-size);border:var(--ysvc-border-w) solid var(--ysvc-color-primary);background:#fff;border-radius:var(--ysvc-radius-sm);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ysvc-color-primary);
}
.ysvc-wrapper .ysvc-modal-close svg,
.ysvc-wrapper .ysvc-modal-close path,
.ysvc-wrapper .ysvc-modal-close use{fill:currentColor;stroke:currentColor;}
.ysvc-wrapper .ysvc-modal-close img{filter:none;}
.ysvc-wrapper .ysvc-modal-close:hover{background:var(--ysvc-color-bg-lite);}
.ysvc-wrapper .ysvc-modal-body{padding:10px 14px;overflow:auto;}

/* ============ Mobile: typo / tailles ============ */
@media (max-width:900px){
  :root{--ysvc-qty-fs:14px;--ysvc-module-h:540px;}
  .ysvc-wrapper,
  .ysvc-wrapper .ysvc-item-card,
  .ysvc-wrapper .ysvc-item-name,
  .ysvc-wrapper .ysvc-qty-value,
  .ysvc-wrapper .ysvc-btn,
  .ysvc-wrapper .ysvc-inv-row{font-size:14px !important;}
}

/* ============ Hauteur du module + scroll internes ============ */
.ysvc-wrapper .ysvc-left,.ysvc-wrapper .ysvc-right{height:var(--ysvc-module-h);}
.ysvc-wrapper .ysvc-left{display:grid;grid-template-rows:auto 1fr;min-height:0;}
.ysvc-wrapper .ysvc-right{display:grid;grid-template-rows:auto 1fr auto;min-height:0;}
.ysvc-wrapper .ysvc-left-body,.ysvc-wrapper .ysvc-inventory-body{overflow:auto !important;min-height:0;}
.ysvc-wrapper .ysvc-totalbar{margin-top:16px !important;}

/* ============ Colonne inventaire (desktop) : fond gris uniforme ============ */
.ysvc-wrapper .ysvc-right{
  background:var(--ysvc-color-bg-lite);border-radius:16px;display:grid;grid-template-rows:auto 1fr auto;height:var(--ysvc-module-h);padding:0;
}
.ysvc-wrapper .ysvc-inventory-header{
  background:var(--ysvc-color-bg-lite);border-bottom:var(--ysvc-border-w) solid var(--ysvc-color-border);border-top-left-radius:16px;border-top-right-radius:16px;padding:12px 16px;
}
.ysvc-wrapper .ysvc-inventory-body{
  background:var(--ysvc-color-bg-lite);flex:1 1 auto;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:auto;border-bottom-left-radius:16px;border-bottom-right-radius:16px;
}

/* ============ Ajustements modal en ≤900px ============ */
@media (max-width:900px){
  .ysvc-wrapper .ysvc-left-header,
  .ysvc-wrapper .ysvc-tabs-row,
  .ysvc-wrapper .ysvc-cat-select-wrap{background:#fff !important;}

  .ysvc-wrapper .ysvc-modal-panel{max-height:88vh;}
  .ysvc-wrapper .ysvc-modal-body{padding:12px !important;background:#fff !important;}
  .ysvc-wrapper .ysvc-modal .ysvc-inventory-body{
    background:#fff !important;padding:0 !important;gap:12px !important;border-radius:0 !important;overflow:auto !important;
  }
  .ysvc-wrapper .ysvc-modal .ysvc-inv-row{
    background:#fff !important;margin:0 !important;border:var(--ysvc-border-w) solid var(--ysvc-color-border) !important;border-radius:var(--ysvc-radius-lg) !important;
  }
}