/* ============================================
   ORISHA DESIGN SYSTEM - MANAGER OVERRIDE
   Version: 2.0.0
   Based on OrishaUI 3.13.1 Design Tokens
   Extracted from SSMS-ODS Figma maquettes
   ============================================ */

/* ---------------------- FONT IMPORT ---------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ---------------------- DESIGN TOKENS ---------------------- */
:root {
  /* Colors */
  --oui-color-primary: #482882;
  --oui-color-primary-hover: #5a35a6;
  --oui-color-primary-active: #3a2070;
  --oui-color-primary-state-tint: #eae0fc;
  --oui-color-on-primary: #efeef2;
  --oui-color-secondary: #dbcafa;
  --oui-color-on-secondary: #2d2b36;
  --oui-color-surface: #ffffff;
  --oui-color-background: #efeef2;
  --oui-color-on-surface: #3d3a47;
  --oui-color-on-surface-variant: #484552;
  --oui-color-on-surface-subtle: #797389;
  --oui-color-outline: #9692a5;
  --oui-color-outline-subtle: rgba(72, 40, 130, 0.2);
  --oui-color-critical: #e8005f;
  --oui-color-positive: #00875a;
  --oui-color-warning: #f5a623;

  /* Typography */
  --oui-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --oui-font-size-xs: 12px;
  --oui-font-size-sm: 14px;
  --oui-font-size-md: 16px;
  --oui-font-size-lg: 18px;
  --oui-font-size-xl: 20px;
  --oui-font-size-2xl: 24px;
  --oui-line-height-xs: 15px;
  --oui-line-height-sm: 17.5px;
  --oui-line-height-md: 19px;
  --oui-line-height-lg: 22px;
  --oui-line-height-2xl: 29px;
  --oui-letter-spacing-sm: 0.2px;
  --oui-letter-spacing-md: 0.4px;

  /* Spacing */
  --oui-spacing-xs: 4px;
  --oui-spacing-sm: 8px;
  --oui-spacing-md: 12px;
  --oui-spacing-lg: 16px;
  --oui-spacing-xl: 24px;
  --oui-spacing-2xl: 32px;
  --oui-spacing-3xl: 48px;

  /* Border Radius */
  --oui-radius-sm: 4px;
  --oui-radius-md: 8px;
  --oui-radius-lg: 16px;
  --oui-radius-xl: 32px;

  /* Shadows — DS Elevation/Shadow: drop-shadow #8658E133 offset(0,5) blur 16 */
  --oui-shadow-sm: 0 2px 8px rgba(134, 88, 225, 0.1);
  --oui-shadow-md: 0 5px 16px rgba(134, 88, 225, 0.2);
  --oui-shadow-lg: 0 8px 24px rgba(134, 88, 225, 0.2);

  /* Transitions */
  --oui-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   PRESERVED ORIGINAL STYLES (from style.css — projet Manager)
   Ces règles restaurent le comportement structurel/fonctionnel
   de l'original. Elles sont placées AVANT les overrides Orisha
   afin que ces derniers gardent la priorité dans la cascade.
   Chemins d'images en ../images/ (spécifique Manager).
   Ne pas supprimer.
   ============================================================ */

/* --- Polices originales --- */
@font-face {
	font-family: 'opensans';
	src: url('./opensans-regular.ttf') format('truetype');
	font-weight: regular;
	font-style: regular;
}
@font-face {
	font-family: 'opensans-bold';
	src: url('./opensans-bold.ttf') format('truetype');
	font-weight: bold;
	font-style: bold;
}
@font-face {
	font-family: 'opensans-semibold';
	src: url('./opensans-semibold.ttf') format('truetype');
	font-weight: bold;
	font-style: bold;
}
@font-face {
	font-family: 'muli-bold';
	src: url('./muli-bold.ttf') format('truetype');
	font-weight: bold;
	font-style: bold;
}
@font-face {
	font-family: 'muli-regular';
	src: url('./muli-regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* --- Titres & typographie de base --- */
.ui-header h1 {
    font-weight: bold;
    font-size: 1em;
    min-height: 1.1em;
    text-align: center;
    display: block;
    margin: 0 30%;
    padding: 0.7em 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    outline: 0!important;
}
h3 {font-size:1.17em;font-weight:bold;margin-top:1em;margin-bottom:1em;}
p {font-weight:normal;}
th {text-align: -internal-center;text-align:center;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none;margin: 0;}
input[type=number] { -moz-appearance: textfield;}
.normal {font-weight:normal!important;}

/* --- Structure de page / conteneurs --- */
.ui-page-theme-a .ui-btn, .ui-page-theme-a .ui-btn:visited, html .ui-body-a .ui-btn {background-color:#ffffff;}
.ui-btn-icon-left {padding-left: .5625em;}
.container-blue {width:100%;padding:0;margin:0;background: linear-gradient(rgb(0, 135, 205) 0%, rgb(0, 74, 147) 100%);}
.height-100 {height:100%;min-height:calc(100vh - 20px);padding-bottom:20px;}
.container-blue h1 {font-size:1rem;font-weight:normal;color:#ffffff;text-shadow:none;margin:0;}
.ui-body-d {background-color:#ffffff;box-shadow:0 3px 5px 0 rgba(174,194,205,0.4);}
.ui-body-i {background-color:#ffffff;}
.ui-body-e p {color:#ffffff;}
.ui-body-f p {color:#ffffff;}
.ui-body-g p {color:#ffffff;}
.m-0 {margin:0;}
.ls-0 {letter-spacing:0;}

/* --- Boutons utilitaires --- */
.btn-g {background-color:#cb4c4c!important;box-shadow:0 3px 5px 0 rgba(174,194,205,0.4); color:#ffffff!important;border:none;text-shadow:none!important;}
.btn-h {background-color:#134e95!important;box-shadow:0 3px 5px 0 rgba(174,194,205,0.4); color:#ffffff!important;border:none;text-shadow:none!important;font-weight:normal!important;}
.ui-btn .btn-white {background-color:#ffffff;opacity: 1;font-size: 16px;text-indent: initial;color: #343939;border-color:#b1b6bd;}
.ui-btn .btn-blue {background-color: #134e95;opacity: 1;font-size: 16px;text-indent: initial;color: #fff;}
.ui-page-theme-a a {font-weight:normal!important;}

/* --- Recherche (icônes) --- */
.ui-input-search input {padding:17px 18px 17px 40px;}
.ui-input-search input::placeholder {color:#828787;opacity:1;}
.ui-input-search::after {left: 15px;margin-top: -8px;width: 16px;height: 16px;opacity: 1;background: url(../images/search.png) no-repeat;background-size:contain;}
.ui-input-search .ui-icon-delete::after {background: url(../images/search-delete.png) no-repeat;background-size:contain;width: 18px;height: 18px;margin-top: -9px;}

/* --- Focus / active jQuery Mobile --- */
.ui-page-theme-a .ui-btn:focus, html .ui-bar-a .ui-btn:focus, html .ui-body-a .ui-btn:focus, html body .ui-group-theme-a .ui-btn:focus, html head + body .ui-btn.ui-btn-a:focus, .ui-page-theme-a .ui-focus, html .ui-bar-a .ui-focus, html .ui-body-a .ui-focus, html body .ui-group-theme-a .ui-focus, html head + body .ui-btn-a.ui-focus, html head + body .ui-body-a.ui-focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  text-shadow: none;
}
.ui-page-theme-a .ui-btn.ui-btn-active, html .ui-bar-a .ui-btn.ui-btn-active, html .ui-body-a .ui-btn.ui-btn-active, html body .ui-group-theme-a .ui-btn.ui-btn-active, html head + body .ui-btn.ui-btn-a.ui-btn-active, .ui-page-theme-a .ui-checkbox-on::after, html .ui-bar-a .ui-checkbox-on::after, html .ui-body-a .ui-checkbox-on::after, html body .ui-group-theme-a .ui-checkbox-on::after, .ui-btn.ui-checkbox-on.ui-btn-a::after, .ui-page-theme-a .ui-flipswitch-active, html .ui-bar-a .ui-flipswitch-active, html .ui-body-a .ui-flipswitch-active, html body .ui-group-theme-a .ui-flipswitch-active, html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active, .ui-page-theme-a .ui-slider-track .ui-btn-active, html .ui-bar-a .ui-slider-track .ui-btn-active, html .ui-body-a .ui-slider-track .ui-btn-active, html body .ui-group-theme-a .ui-slider-track .ui-btn-active, html body div.ui-slider-track.ui-body-a .ui-btn-active {
  color:initial;
  text-shadow:none!important;
  background-color:#dfe3e8;
  border :none;
}
html .ui-page-theme-a .menu-index .ui-btn.ui-btn-active {background:none!important;}
.ui-listview > li p {
    text-overflow: initial;
    white-space: normal;
}

/* --- Accordéon collapse (chevron) --- */
.a-collapse {-webkit-border-bottom-right-radius: 0;border-bottom-right-radius: 0;-webkit-border-bottom-left-radius: 0;border-bottom-left-radius: 0;}
.a-collapse.collapsed {-webkit-border-bottom-right-radius: 5px;border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px;border-bottom-left-radius: 5px;}
.a-collapse:after {position:absolute;display:inline-block;content:"";border-radius: 0;width: 45px;height: 45px;top: 0;margin-top: 0;right: 0;background: url(../images/chevron-down.png) no-repeat center;background-size: 14px;}

/***** LOGIN (structure) *****/
.container-formulaire .ui-btn:hover {background-color:#134e95;border:none;color:#ffffff;text-shadow:none;}
.container-formulaire .ui-btn:active {background-color:#5d9bfd;border:none;color:#ffffff;text-shadow:none;}
.login .ui-input-text input {padding:5px 0 7px;}
.connexion span {display:inline-block;vertical-align:text-top;width:18px;height:18px;margin-right:10px;background: url(../images/power-off.png) no-repeat;background-size:contain;}
.serveur-name-login {padding:5px 0 5px;margin:0 0 20px;font-weight:normal;text-align:left;color:#333;}
.drapeau_last {margin-right:0;}
.shadow {box-shadow:0 3px 5px 3px rgba(174,194,205,0.4);}

/***** MENU (icônes & footer d'origine) *****/
.menu-index .ui-content {padding:22px;}
.menu-index ul.ui-shadow {box-shadow:none;}
.menu-index .ui-btn:after {left:0;}
.index-footer {position:absolute;bottom:22px;left:22px;}
.index-footer p, .index-footer a {color:#ffffff;font-size:14px;text-shadow:none;font-weight:normal;letter-spacing:0;opacity:0.75;margin:5px 0 0 0;}
.index-footer a {color:#ffffff !important;}
.iconestock {position:relative;}
.iconestock::after {content: "";background: url(../images/box-alt-blanc.png) no-repeat left;opacity:0.75;top: 0;left: 0;bottom: 0;right: 0;position: absolute;}
.iconejumelage {position:relative;}
.iconejumelage::after {content: "";width:20px;height:20px;background: url(../images/rss.png) no-repeat;background-size:contain;opacity:0.75;top:5px;left: 0;position: absolute;}
.iconeconnexion {position:relative;}
.iconeconnexion::after {content: "";width:20px;height:20px;background: url(../images/power-off.png) no-repeat;background-size:contain;opacity:0.75;top:9px;left: 0;;position: absolute;}
.iconeglobe {position:relative;}
.iconeglobe::after {content: "";width:20px;height:20px;background: url(../images/globe.png) no-repeat;background-size:contain;opacity:0.75;top:8x;left: 0;;position: absolute;}
.iconeuser {position:relative;}
.iconeuser::after {content: "";width:20px;height:20px;background: url(../images/user-circle.png) no-repeat left;background-size:contain;top: 0px;left: 0;position: absolute;}
.exclamation {display:inline-block;vertical-align:bottom;width:21px;height:21px;margin-right:10px;background: url(../images/exclamation-circle.png) no-repeat center;background-size:contain;opacity:0.8;}

/***** VENTE (structure & icônes) *****/
.count-stock {right: 30px;}
.iconerefresh {display:inline-block;width:21px;height:21px;margin-right:10px;background: url(../images/sync-alt.png) no-repeat center;background-size:contain;}
.iconecard {display:inline-block;vertical-align: text-top;width:21px;height:21px;margin-right:10px;background: url(../images/credit-card.png) no-repeat center;background-size:contain;}
.ui-page-theme-a .ui-btn.enregister {background:none;border:none;text-shadow:none;box-shadow:none;font-size:16px;color:#009c53;padding:8px 0;margin-right:10px;letter-spacing:-0.39px;}
.ui-page-theme-a .ui-btn.btn-back {background:none;border:none;text-shadow:none;box-shadow:none;font-size:16px;color:#343939;padding:8px 0;letter-spacing:-0.39px;}
.btn-back span {display:inline-block;width:9px;height:18px;background: url(../images/chevron-left.png) no-repeat right;background-size: contain;vertical-align:sub;margin-right:8px;}
.formulaire-create label {text-align: left;color: #828787;font-size: 13px;padding: 0;margin: 0;font-weight: normal;text-shadow: none;}
.formulaire-create .ui-input-text input {padding: 5px 0 7px;}
.formulaire-create .ui-input-text input::placeholder {color:#828787;opacity:1;}
.creer-panier .ui-input-text {margin-bottom:20px;}
.ui-page-theme-a .ui-btn.iconeclient {background: url(../images/user-alt.png) no-repeat 12px;background-size: 17px;}
.ui-page-theme-a .ui-btn.iconevendeur {background: url(../images/finger.png) no-repeat 12px;background-size: 17px;}
.modreg {margin:12px 0;}
.modreg .ui-btn {border:none!important;}
.modreg .ui-listview-inset {margin:4px 0;}
.modreg a {color:#4e5353;font-size:14px;line-height:20px;padding:19px 20px 17px 20px;}
.modreg .ui-icon-myicon::after {background: url(../images/trash-alt.png) no-repeat;background-size: 19px;border-radius:0;}
.modreg-montant .ui-block-a {width:40%;}
.modreg-montant .ui-block-b {width:60%;padding-left:5px;}
.modreg-montant .ui-block-a .ui-input-text {border:none!important;}
.modreg-montant .ui-block-b h2 a {line-height: 25px;border: none;background-color: #169c58;text-shadow: none;color: #fff;padding: 14px 20px 17px 20px;font-family:'muli-bold';font-weight:normal;}
.modreg-montant .ui-block-b h2 a::after {border-radius:0;width: 55px;height: 56px;top: 0;margin-top: 0;right: 0;border-left: 1px solid rgba(255,255,255,0.51);background: url(../images/chevron-down-white.svg) no-repeat center;background-size: 14px;}
.complete {display:block;width:45px;height:45px;background: url(../images/complete.svg) no-repeat center;background-size:contain;margin: 0 auto;}

/***** CLIENT (structure) *****/
.client-btn-creer {position:fixed;bottom:0;left:0;width:calc(100% - 44px);padding:15px 22px 20px 22px;background-color:#ffffff;z-index: 10;}
.client-btn-creer .ui-btn {padding-top: 18px;padding-bottom: 21px;}
.formulaire-create .ui-input-text {box-shadow:none;border-radius:0;border:1px solid #ffffff!important;border-bottom: 1px solid #b1b6bd!important;margin:0 0 12px;}
.formulaire-radio {display:flex;margin-top:15px;margin-bottom:15px;}
.formulaire-radio .ui-radio {width:50%;}
.formulaire-radio .ui-btn {border:none;text-shadow:none;box-shadow:none;}
.formulaire-radio .ui-radio label {padding-left:35px;font-size:16px;line-height: 22px;}
.creer-client .ui-radio input {opacity:0;}
.formulaire-radio .ui-btn-icon-left::after {left:0px;}
.creer-client .ui-input-text {margin-bottom:25px;}
.creer-client .ui-input-text input {padding: 5px 0 15px;}
.creer-client .ui-select {margin: 0 0 18px 0;}
.creer-client .ui-select .ui-btn {border:1px solid #ffffff!important;border-bottom: 1px solid #b1b6bd!important;box-shadow: none;border-radius: 0;padding: 10px 0 18px;text-align: left;}
.creer-client .ui-select .ui-btn::after {width: 18px;height: 18px;background: url(../images/chevron-down.png) no-repeat;background-size: contain;}
.ui-listview .ui-btn:focus {box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;}
html .creer-client .ui-focus {box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;border:1px solid #b1b6bd!important;}

/***** PANIER (structure) *****/
.contenu_panier {padding-right:70px!important;}
.contenu_panier p {margin:5px 0!important;}
.contenu_panier .ui-li-count {top: 26px;right: 40px;border:none!important;background:none!important;}
.iconesupprimer {display:inline-block;width:21px;height:21px;margin-right:10px;background: url(../images/trash-alt.png) no-repeat center;background-size:contain;}
.iconemoins {background: url(../images/icone-moins.svg) no-repeat 22px;background-size:contain;}
.iconeplus {background: url(../images/icone-plus.svg) no-repeat;background-size:contain;background-position: bottom 50% right 22px;}
.ui-btn.iconemoins:active, .ui-btn.iconeplus:active {background-color:#ffffff!important;}
.formulaire-change .ui-input-text {box-shadow:none!important;border:none!important;}
.input-change {padding:17px 18px!important;border:none!important;box-shadow:none!important;margin-bottom:20px!important;}

/* --- green-button-theme --- */
.ui-btn-up-g, .ui-btn-hover-g, .ui-btn-down-g
{
	color: white;
	font-weight: bold;
	text-decoration: none;
}
.ui-btn-up-g, .ui-btn-g
{
	border: 1px solid #397114;
	background: #5aab25;
	text-shadow: 0 -1px 1px #397114;
	background-image: -moz-linear-gradient(top, #7ec44f, #5aab25);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #87c45e), color-stop(1, #619e39));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7ec44f', EndColorStr='#5aab25')";
}
.ui-btn-hover-g
{
	border: 1px solid #2c6e00;
	background: #75b54a;
	text-shadow: 0 -1px 1px #2a6901;
	background-image: -moz-linear-gradient(top, #99d472, #75b54a);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #99d472), color-stop(1, #75b54a));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99d472', EndColorStr='#75b54a')";
}
.ui-btn-g:active
{
	border: 1px solid #457823;
	background: #7ec44f;
	text-shadow: 0 -1px 1px #457823;
	background-image: -moz-linear-gradient(top, #619e39, #7ec44f);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #619e39), color-stop(1, #7ec44f));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#619e39', EndColorStr='#7ec44f')";
}

/* --- Divers utilitaires --- */
.taille-right
{
    position: absolute;
    font-weight: 700;
    text-align: center;
    padding: 0 .48em;
    line-height: 1.6em;
    min-width: .64em;
    right: 0.8em;
    top: 50%;
    margin-top: -0.88em;
}
.ventepage
{
  max-height : 50vh;
  overflow : auto;
  display: block;
}
.iconepanier-vide
{
  right: 12px;
  top: 8px;
  padding:0;
  width:24px;
  height:24px;
  border-radius: 0 !important;
  background : url(../images/shopping-cart.svg) no-repeat center ;
  background-color: transparent!important;
  background-size:contain;
  box-shadow:none!important;
  border:none!important;
}
.iconepanier-empty
{
  right: 12px;
  top: 8px;
  padding:0;
  width:24px;
  height:24px;
  border-radius: 0 !important;
  background : url(../images/shopping-cart-empty.svg) no-repeat center ;
  background-color: transparent!important;
  background-size:contain;
  box-shadow:none!important;
  border:none!important;
}
.iconemenu
{
  left: 12px;
  top: 10px;
  padding:0;
  width:22px;
  height:22px;
  border-radius: 0 !important;
  background : url(../images/bars.svg) no-repeat center ;
  background-color: transparent!important;
  background-size:contain;
  box-shadow:none!important;
  border:none!important;
}
.iconeflecheright
{
  background: url(../images/chevron-right.png) no-repeat top 50% right 15px ;
  padding-right:30px;
  background-size: 8px;
}
.iconepoint
{
  background: url(../images/point-option.svg) no-repeat top 50% right 15px ;
  padding-right:30px;
  background-size: 25px;
}

/* --- Icônes menu Manager (CA, produits, vendeurs, négoce, comparaison, off) --- */
.iconeca::after {content: "";width:20px;height:20px;background: url(../images/ca.svg) no-repeat; background-size:contain;opacity:0.75;top:8px;left: 0;;position: absolute;}
.iconeproduit::after {content: "";width:20px;height:20px;background: url(../images/produit.svg) no-repeat; background-size:contain;opacity:0.75;top:8px;left: 0;;position: absolute;}
.iconevendeurs::after {content: "";width:20px;height:20px;background: url(../images/vendeurs.svg) no-repeat; background-size:contain;opacity:0.75;top:8px;left: 0;;position: absolute;}
.iconenegoce::after {content: "";width:20px;height:20px;background: url(../images/negoce.svg) no-repeat; background-size:contain;opacity:0.75;top:8px;left: 0;;position: absolute;}
.iconecompare::after {content: "";width:20px;height:20px;background: url(../images/compare.svg) no-repeat; background-size:contain;opacity:0.75;top:8px;left: 0;;position: absolute;}
.iconeoff::after {content: "";width:20px;height:20px;background: url(../images/off.svg) no-repeat; background-size:contain;opacity:0.75;top:8px;left: 0;;position: absolute;}

/* --- Date picker (structure d'origine) --- */
div.datedropper {
  --dd-color1: #169c58;
}
/* Datedropper -> violet Orisha (en-tête, jours, jour sélectionné, accents).
   La variable --dd-color1 couvre l'en-tête, le texte des jours et la sélection.
   Le bouton "OK" (.pick-submit) a une couleur en dur -> override explicite. */
div.datedropper,
div.datedropper.primary,
div.datedropper.picker-focused {
  --dd-color1: var(--oui-color-primary) !important;
}
div.datedropper .pick-submit {
  background-color: var(--oui-color-primary) !important;
}
div.datedropper .pick-submit:hover {
  background-color: var(--oui-color-primary-active) !important;
}
.datepicker .ui-input-text,.datepicker .ui-input-btn
{
  box-shadow : none;
}
.datepicker .custom-input
{
  text-align: center;
  font-size: 14px;
  padding-left:0;padding-right:0;
}
.trigroupe {display: flex !important;justify-content: center}
.datepicker .blockdate { margin-bottom : 15px;}
.iconeclose { background: none !important;border: none !important;padding: 20px 15px !important;}
.ui-listview, .line-link { font-size: 12px;}
.ui-flipswitch .ui-btn.ui-flipswitch-on { font-weight: bold !important;font-size: 16px;text-indent: -3.6em;}
.checkboxlabel { background: none !important;box-shadow: none !important; text-align: right !important; margin-right: 20px !important; position : absolute;}
.checkboxlabel:hover { color : #828787 !important;}
.checkboxlabel::after { display : none !important;}
.checkboxbasic {position: relative !important;left:calc(50% - 50px) !important;top: 5px !important;}
.ui-radio-on  { border : 1px solid #dfe3e8 !important;}
.validerdate .ui-btn {background-color: #134e95!important;color: #ffffff!important;text-shadow: none!important;font-family: 'muli-bold'!important;padding-top: 14px;padding-bottom: 17px;margin:0;font-size:16px;}
.validerdate input.ui-btn {opacity:0;}
.blockdate .ui-input-text { text-align: left; padding: 8px 8px 9px 30px; font-size: 13px; border-color: #b1b6bd!important;background : url(../images/calender.svg) no-repeat 10px; background-size : 20px;}
.datepicker .ui-block-a .ui-input-text {margin-top:0;margin-left:0;margin-right:.3125em;}
.datepicker .ui-block-b .ui-input-text {margin-top:0;margin-right:0;margin-left:.3125em;}

/* --- États de liens & prix --- */
.disableLink {
	pointer-events: none;
}
.enableLink {
	pointer-events: auto !important;
}
.mlPrix { color : red; }

/* --- STYLE TOOLTIP (version conservée) --- */
.ips-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
    color: #2196F3;
    font-family: Arial, sans-serif;
    font-size: 13px;
    margin-left: 8px;
    font-weight: 600;
    vertical-align: middle;
}
.ips-tooltip .ips-tooltiptext {
    display: none;
    min-width: 220px;
    background-color: #2c3e50;
    color: #ffffff;
    text-align: center;
    border-radius: 4px;
    padding: 10px;
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
    font-weight: normal;
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
}
.ips-tooltip .ips-tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #2c3e50 transparent transparent transparent;
}
.ips-tooltip:hover .ips-tooltiptext {
    display: block !important;
}

/* --- STYLE MODAL --- */
.ips-modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}
.ips-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    min-width: 400px;
    max-width: 650px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    font-family: Arial, sans-serif;
    color: #333;
}
.ips-modal-close {
    color: #aaa;
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    line-height: 20px;
}
.ips-modal-close:hover { color: #000; }
.ips-modal-body { margin-top: 15px; line-height: 1.6; font-size: 14px; }

/* ============================================================
   FIN DES STYLES ORIGINAUX PRÉSERVÉS
   Les overrides Orisha ci-dessous ont la priorité.
   ============================================================ */

/* ---------------------- BASE TYPOGRAPHY ---------------------- */
body {
  font-family: var(--oui-font-family) !important;
  letter-spacing: var(--oui-letter-spacing-sm) !important;
  color: var(--oui-color-on-surface) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, p, .ui-btn, input, button, label, select, a {
  font-family: var(--oui-font-family) !important;
}
h1 { font-weight: 600 !important; }
.bolder { font-family: var(--oui-font-family) !important; font-weight: 700 !important; }
.bold { font-family: var(--oui-font-family) !important; font-weight: 600 !important; }
.muli-bold { font-family: var(--oui-font-family) !important; font-weight: 500 !important; }
.muli-regular { font-family: var(--oui-font-family) !important; font-weight: 400 !important; }

/* ---------------------- PAGE BACKGROUND ---------------------- */
.ui-page { background-color: var(--oui-color-background) !important; }

/* ---------------------- HEADER / APP BAR ---------------------- */
/* DS AppBar: white surface, 56px height, border-bottom outline-subtle */
.ui-header {
  background-color: var(--oui-color-surface) !important;
  border-bottom: 1px solid var(--oui-color-outline-subtle) !important;
  box-shadow: none !important;
  height: 56px !important;
}
.ui-header h1 {
  color: var(--oui-color-on-surface) !important;
  font-size: var(--oui-font-size-md) !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  letter-spacing: var(--oui-letter-spacing-md) !important;
}
.ui-page-theme-a .ui-btn.btn-back {
  color: var(--oui-color-on-surface) !important;
  font-weight: 500 !important;
  font-size: var(--oui-font-size-sm) !important;
}
.ui-page-theme-a .ui-btn.enregister {
  color: var(--oui-color-primary) !important;
  font-weight: 600 !important;
  font-size: var(--oui-font-size-sm) !important;
}

/* ---------------------- LOGIN PAGE ---------------------- */
.container-blue {
  background: linear-gradient(160deg, var(--oui-color-primary) 0%, #2d1a54 100%) !important;
}
.header-login {
  margin-bottom: var(--oui-spacing-xl) !important;
  padding-top: var(--oui-spacing-2xl) !important;
}
.container-blue h1 {
  font-size: var(--oui-font-size-lg) !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: var(--oui-letter-spacing-md) !important;
  margin-top: var(--oui-spacing-sm) !important;
}
/* Login form card */
.container-formulaire {
  background-color: var(--oui-color-surface) !important;
  border-radius: var(--oui-radius-md) !important;
  border: 1px solid var(--oui-color-outline-subtle) !important;
  box-shadow: var(--oui-shadow-lg) !important;
  padding: var(--oui-spacing-xl) !important;
  max-width: 340px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Labels — DS Caption: Poppins Medium 12px */
.ui-mobile .login label,
.serveur-login {
  font-size: var(--oui-font-size-xs) !important;
  color: var(--oui-color-on-surface-variant) !important;
  font-weight: 500 !important;
  letter-spacing: var(--oui-letter-spacing-sm) !important;
  text-transform: none !important;
  margin-bottom: var(--oui-spacing-xs) !important;
}
/* Labels du formulaire login alignés à gauche (comme Mobile Sales).
   Le login Manager est enveloppé dans un <center> qui centre tout ;
   on force les labels ET le label "Serveur" (.serveur-login) à gauche,
   sans toucher aux inputs/boutons/drapeaux centrés. */
.container-formulaire label,
.container-formulaire .serveur-login,
.serveur-login {
  text-align: left !important;
  display: block !important;
}

/* DS TextField Medium: bordered box, radius 8px, border #9692a5, height ~40px */
.login .ui-input-text {
  border: 1px solid var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  margin: 0 0 var(--oui-spacing-md) !important;
  box-shadow: none !important;
  transition: border-color var(--oui-transition) !important;
  background-color: var(--oui-color-surface) !important;
  padding: 6px 12px !important;
}
.login .ui-input-text:focus-within {
  border-color: var(--oui-color-primary) !important;
  border-width: 2px !important;
}
.login .ui-input-text input {
  padding: 4px 0 !important;
  font-size: var(--oui-font-size-sm) !important; /* 14px — Medium size */
  color: var(--oui-color-on-surface) !important;
  font-weight: 400 !important;
  line-height: var(--oui-line-height-sm) !important; /* 17.5px */
  border: none !important;
  background: transparent !important;
  min-height: 24px !important;
}
.login .ui-input-text input::placeholder {
  color: var(--oui-color-on-surface-subtle) !important;
  opacity: 1 !important;
}

/* Server info */
.serveur-name-login {
  color: var(--oui-color-on-surface) !important;
  font-size: var(--oui-font-size-sm) !important;
  font-weight: 500 !important;
  margin-bottom: var(--oui-spacing-sm) !important; /* 8px : espace réduit avant la checkbox "Mémoriser" */
}
/* Réduire l'espace entre le nom du serveur et la checkbox "Mémoriser" */
.container-formulaire .ui-checkbox {
  margin-top: var(--oui-spacing-xs) !important; /* 4px */
}

/* DS Action Button primary: radius 32px (pill), Poppins Medium 14px */
.container-formulaire .ui-btn,
.connexion.ui-btn {
  background-color: var(--oui-color-primary) !important;
  border: none !important;
  border-radius: var(--oui-radius-xl) !important;
  color: var(--oui-color-on-primary) !important;
  font-weight: 500 !important;
  font-size: var(--oui-font-size-sm) !important;
  letter-spacing: var(--oui-letter-spacing-md) !important;
  padding: 16px 24px !important;
  box-shadow: none !important;
  transition: all var(--oui-transition) !important;
  text-shadow: none !important;
  text-transform: none !important;
  width: 100% !important;
  margin: var(--oui-spacing-sm) 0 !important;
  min-height: 48px !important;
}
.container-formulaire .ui-btn:hover,
.connexion.ui-btn:hover {
  background-color: var(--oui-color-primary-hover) !important;
}
.container-formulaire .ui-btn:active,
.connexion.ui-btn:active {
  background-color: var(--oui-color-primary-active) !important;
}
/* Hide the power-off icon span */
.connexion span { background: none !important; display: none !important; }

/* Privacy link & flags */
.container-formulaire a.external, a.external {
  color: var(--oui-color-on-surface-subtle) !important;
  font-size: var(--oui-font-size-xs) !important;
  text-decoration: none !important;
  margin-top: var(--oui-spacing-lg) !important;
  display: inline-block !important;
}
.drapeau {
  width: 32px !important; height: 22px !important;
  margin: var(--oui-spacing-lg) 12px 0 0 !important;
  border-radius: var(--oui-radius-sm) !important;
  opacity: 0.7;
  transition: transform var(--oui-transition), opacity var(--oui-transition) !important;
}
.drapeau:hover { opacity: 1; transform: scale(1.05); }
.drapeau.shadow {
  opacity: 1 !important;
  box-shadow: 0 2px 8px rgba(72, 40, 130, 0.3) !important;
  transform: scale(1.05);
}
.drapeau_last { margin-right: 0 !important; }

/* ---------------------- MENU / INDEX PAGE ---------------------- */
.menu-titre {
  padding: var(--oui-spacing-2xl) var(--oui-spacing-xl) var(--oui-spacing-xl) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.menu-titre p { color: #ffffff !important; font-weight: 400 !important; }
.menu-index .ui-btn {
  color: #ffffff !important;
  font-size: var(--oui-font-size-sm) !important;
  font-weight: 500 !important;
  border-radius: var(--oui-radius-lg) !important;
  transition: background-color var(--oui-transition) !important;
  text-shadow: none !important;
  background-color: transparent !important;
  border: none !important;
}
.menu-index .ui-btn:hover,
.menu-index .ui-btn:active {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
/* Menu buttons: padding renforcé (spécificité > .ui-listview .ui-btn)
   pour laisser la place à l'icône positionnée en absolu à gauche.
   Icône: left 16px + largeur 20px => texte à partir de ~48px. */
.menu-index .ui-listview .ui-btn,
.ui-page-theme-a .menu-index .ui-btn,
html .menu-index .ui-listview-inset .ui-btn {
  color: #ffffff !important;
  background-color: transparent !important;
  text-shadow: none !important;
  border: none !important;
  padding: 14px 16px 14px 48px !important;
  position: relative !important;
}
/* Menu icons — DS Orisha icons in white */
.menu-index .iconeca::after {
  content: "" !important;
  background: url(../images/icon-ca.svg) no-repeat center !important;
  background-size: 20px 20px !important;
  width: 20px !important;
  height: 20px !important;
  top: 50% !important;
  margin-top: -10px !important;
  left: 16px !important;
  right: auto !important;
  position: absolute !important;
  opacity: 1 !important;
}
.menu-index .iconecompare::after {
  content: "" !important;
  background: url(../images/icon-compare.svg) no-repeat center !important;
  background-size: 20px 20px !important;
  width: 20px !important;
  height: 20px !important;
  top: 50% !important;
  margin-top: -10px !important;
  left: 16px !important;
  right: auto !important;
  position: absolute !important;
  opacity: 1 !important;
}
.menu-index .iconeproduit::after {
  content: "" !important;
  background: url(../images/icon-produit.svg) no-repeat center !important;
  background-size: 20px 20px !important;
  width: 20px !important;
  height: 20px !important;
  top: 50% !important;
  margin-top: -10px !important;
  left: 16px !important;
  right: auto !important;
  position: absolute !important;
  opacity: 1 !important;
}
.menu-index .iconevendeurs::after {
  content: "" !important;
  background: url(../images/icon-vendeurs.svg) no-repeat center !important;
  background-size: 20px 20px !important;
  width: 20px !important;
  height: 20px !important;
  top: 50% !important;
  margin-top: -10px !important;
  left: 16px !important;
  right: auto !important;
  position: absolute !important;
  opacity: 1 !important;
}
.menu-index .iconenegoce::after {
  content: "" !important;
  background: url(../images/icon-negoce.svg) no-repeat center !important;
  background-size: 20px 20px !important;
  width: 20px !important;
  height: 20px !important;
  top: 50% !important;
  margin-top: -10px !important;
  left: 16px !important;
  right: auto !important;
  position: absolute !important;
  opacity: 1 !important;
}
.menu-index .iconeoff::after {
  content: "" !important;
  background: url(../images/icon-deconnexion.svg) no-repeat center !important;
  background-size: 20px 20px !important;
  width: 20px !important;
  height: 20px !important;
  top: 50% !important;
  margin-top: -10px !important;
  left: 16px !important;
  right: auto !important;
  position: absolute !important;
  opacity: 1 !important;
}
.index-footer p {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: var(--oui-font-size-xs) !important;
}
.index-footer a {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: var(--oui-font-size-xs) !important;
}

/* ---------------------- SEARCH INPUT ---------------------- */
.ui-input-search {
  background-color: var(--oui-color-surface) !important;
  border: 1px solid var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  box-shadow: none !important;
  transition: border-color var(--oui-transition) !important;
}
.ui-input-search:focus-within {
  border-color: var(--oui-color-primary) !important;
  border-width: 2px !important;
}
.ui-input-search input {
  font-size: var(--oui-font-size-sm) !important;
  padding: 14px 18px 14px 40px !important;
}

/* ---------------------- CARDS ---------------------- */
.ui-body-a {
  background-color: var(--oui-color-surface) !important;
  border: 1px solid var(--oui-color-outline-subtle) !important;
  border-radius: var(--oui-radius-md) !important;
  box-shadow: var(--oui-shadow-sm) !important;
}
.ui-shadow { box-shadow: var(--oui-shadow-sm) !important; }
.br-5 { border-radius: var(--oui-radius-md) !important; }
.p-33 { padding: var(--oui-spacing-xl) !important; }

/* ---------------------- GENERIC ACTION BUTTONS ---------------------- */
/* Primary action buttons (inline style override for bg:#134e95) */
.ui-btn[style*="background:#134e95"],
.ui-btn[style*="background-color:#134e95"] {
  background-color: var(--oui-color-primary) !important;
  border-radius: var(--oui-radius-xl) !important;
  font-weight: 500 !important;
  font-size: var(--oui-font-size-sm) !important;
  letter-spacing: var(--oui-letter-spacing-md) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Green action buttons (Réserver, Valider) */
.ui-btn[style*="background:#169c58"] {
  background-color: var(--oui-color-positive) !important;
  border-radius: var(--oui-radius-xl) !important;
  font-weight: 500 !important;
  font-size: var(--oui-font-size-sm) !important;
  letter-spacing: var(--oui-letter-spacing-md) !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}
/* Secondary outlined buttons */
.ui-btn[style*="border-color:#b1b6bd"] {
  border-color: var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  color: var(--oui-color-on-surface) !important;
  font-size: var(--oui-font-size-sm) !important;
}
/* DS btn-h (primary) */
.btn-h {
  background-color: var(--oui-color-primary) !important;
  border: none !important;
  border-radius: var(--oui-radius-xl) !important;
  box-shadow: none !important;
  color: var(--oui-color-on-primary) !important;
  font-weight: 500 !important;
}
.btn-h:hover { background-color: var(--oui-color-primary-hover) !important; }
/* DS btn-g (destructive) */
.btn-g {
  background-color: var(--oui-color-critical) !important;
  border: none !important;
  border-radius: var(--oui-radius-xl) !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* ---------------------- PRODUCT PAGE ---------------------- */
/* Price color — use DS positive green */
.ui-content p[style*="color:#30ac6c"] {
  color: var(--oui-color-positive) !important;
}
/* Quantity selector */
.ui-grid-b.br-5 {
  border: 1px solid var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  overflow: hidden;
}
.ui-grid-b .ui-btn.iconemoins,
.ui-grid-b .ui-btn.iconeplus {
  background-color: var(--oui-color-surface) !important;
  border: none !important;
}
.ui-grid-b .ui-btn.iconemoins:active,
.ui-grid-b .ui-btn.iconeplus:active {
  background-color: var(--oui-color-primary-state-tint) !important;
}

/* ---------------------- LISTVIEW (Search results, colors, paniers) ---------------------- */
.ui-listview-inset {
  border-radius: var(--oui-radius-md) !important;
  overflow: hidden;
}
.ui-listview .ui-btn {
  font-size: var(--oui-font-size-sm) !important;
  color: var(--oui-color-on-surface) !important;
  border-color: var(--oui-color-outline-subtle) !important;
  /* padding décomposé : ne pas écraser le padding-left/right spécifique
     des items de menu (icône) ou des items avec compteur (badge). */
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.ui-listview .ui-btn:active {
  background-color: var(--oui-color-primary-state-tint) !important;
}
/* Items de liste avec compteur (résultats, paniers) : réserver la place
   du badge .ui-li-count/.count-stock à droite pour éviter le chevauchement. */
.ui-li-has-count .ui-btn,
.ui-listview .ui-btn.contenu_panier {
  padding-right: 88px !important;
}
.contenu_panier p {
  font-size: var(--oui-font-size-sm) !important;
  color: var(--oui-color-on-surface) !important;
}

/* ---------------------- PAYMENT PAGE (ventePayer) ---------------------- */
.modreg a {
  color: var(--oui-color-on-surface) !important;
  font-size: var(--oui-font-size-sm) !important;
  border-radius: var(--oui-radius-md) !important;
}
.modreg .ui-listview-inset { margin: 4px 0; }
.modreg-montant .ui-block-b h2 a {
  background-color: var(--oui-color-positive) !important;
  border-radius: var(--oui-radius-xl) !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}
.modreg-montant .ui-block-b h2 .ui-btn:hover {
  background-color: var(--oui-color-positive) !important;
}
.modreg-montant .ui-block-a .ui-input-text {
  border: 1px solid var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  background-color: var(--oui-color-surface) !important;
}
#Montant {
  color: var(--oui-color-on-surface) !important;
  padding: 14px 16px !important;
  background-color: var(--oui-color-surface) !important;
  font-size: var(--oui-font-size-md) !important;
}

/* ---------------------- VENTE MENU PAGE ---------------------- */
/* Client/Vendeur buttons */
.ui-page-theme-a .ui-btn.iconeclient,
.ui-page-theme-a .ui-btn.iconevendeur {
  border: 1px solid var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  color: var(--oui-color-on-surface) !important;
  font-size: var(--oui-font-size-sm) !important;
  box-shadow: none !important;
}

/* ---------------------- CLIENT CREATION FORM ---------------------- */
.formulaire-create label,
.creer-client label {
  font-size: var(--oui-font-size-xs) !important;
  color: var(--oui-color-on-surface-variant) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: var(--oui-letter-spacing-sm) !important;
}
/* DS TextField for forms */
.formulaire-create .ui-input-text,
.creer-client .ui-input-text {
  border: 1px solid var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  background-color: var(--oui-color-surface) !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  margin: 0 0 var(--oui-spacing-md) !important;
  transition: border-color var(--oui-transition) !important;
}
.formulaire-create .ui-input-text:focus-within,
.creer-client .ui-input-text:focus-within {
  border-color: var(--oui-color-primary) !important;
  border-width: 2px !important;
}
.formulaire-create .ui-input-text input,
.creer-client .ui-input-text input {
  font-size: var(--oui-font-size-md) !important;
  color: var(--oui-color-on-surface) !important;
  border: none !important;
  background: transparent !important;
  padding: 4px 0 !important;
}
.formulaire-create .ui-input-text input::placeholder,
.creer-client .ui-input-text input::placeholder {
  color: var(--oui-color-on-surface-subtle) !important;
}
/* Select / Dropdown */
.creer-client .ui-select .ui-btn {
  border: 1px solid var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  box-shadow: none !important;
  color: var(--oui-color-on-surface) !important;
  font-size: var(--oui-font-size-md) !important;
}

/* Radio buttons & Checkboxes */
.formulaire-radio label,
.formulaire-check label,
.form-check-label {
  color: var(--oui-color-on-surface) !important;
  font-size: var(--oui-font-size-sm) !important;
  font-weight: 400 !important;
}
.form-check-input:checked {
  background-color: var(--oui-color-primary) !important;
  border-color: var(--oui-color-primary) !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--oui-color-primary-state-tint) !important;
  border-color: var(--oui-color-primary) !important;
}
/* Submit button in client form (inline style override) */
.creer-client .ui-btn[style*="background-color:#134e95"],
#submitButton {
  background-color: var(--oui-color-primary) !important;
  border-radius: var(--oui-radius-xl) !important;
  color: var(--oui-color-on-primary) !important;
  font-weight: 500 !important;
  font-size: var(--oui-font-size-sm) !important;
  letter-spacing: var(--oui-letter-spacing-md) !important;
  box-shadow: none !important;
  border: none !important;
}
/* Client bottom CTA bar */
.client-btn-creer {
  background-color: var(--oui-color-surface) !important;
  border-top: 1px solid var(--oui-color-outline-subtle) !important;
  box-shadow: none !important;
}
.client-btn-creer .ui-btn {
  background-color: var(--oui-color-primary) !important;
  border-radius: var(--oui-radius-xl) !important;
  color: var(--oui-color-on-primary) !important;
  font-weight: 500 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---------------------- STATUS COLORS ---------------------- */
.ui-body-e { background-color: var(--oui-color-positive) !important; border-radius: var(--oui-radius-sm) !important; box-shadow: none !important; }
.ui-body-f { background-color: var(--oui-color-warning) !important; border-radius: var(--oui-radius-sm) !important; box-shadow: none !important; }
.ui-body-g { background-color: var(--oui-color-critical) !important; border-radius: var(--oui-radius-sm) !important; box-shadow: none !important; }
.ui-body-h { background-color: var(--oui-color-primary) !important; border-radius: var(--oui-radius-sm) !important; box-shadow: none !important; }

/* ---------------------- LOADER ---------------------- */
.imgloader {
  border: 3px solid var(--oui-color-outline-subtle) !important;
  border-top: 3px solid var(--oui-color-primary) !important;
}

/* ---------------------- FOCUS & ACTIVE STATES ---------------------- */
.ui-page-theme-a .ui-btn:focus,
html .ui-bar-a .ui-btn:focus,
html .ui-body-a .ui-btn:focus {
  box-shadow: 0 0 0 3px var(--oui-color-primary-state-tint) !important;
  outline: none !important;
  text-shadow: none !important;
}
.ui-page-theme-a .ui-btn.ui-btn-active {
  background-color: var(--oui-color-primary-state-tint) !important;
  color: var(--oui-color-primary) !important;
  text-shadow: none !important;
}
html .ui-page-theme-a .menu-index .ui-btn.ui-btn-active {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---------------------- MISC OVERRIDES ---------------------- */
/* Remove old button active state colors */
.ui-page-theme-a .ui-btn.ui-btn-active,
html .ui-bar-a .ui-btn.ui-btn-active {
  background-color: var(--oui-color-primary-state-tint) !important;
  text-shadow: none !important;
}
/* Cart icon in header */
.iconepanier-vide, .iconepanier-empty {
  box-shadow: none !important;
  border: none !important;
}
/* Menu burger icon */
.iconemenu {
  box-shadow: none !important;
  border: none !important;
}

/* =====================================================
   MANAGER-SPECIFIC STYLES
   ===================================================== */

/* ---------------------- DATE PICKER ---------------------- */
.datepicker .ui-body-a {
  border: 1px solid var(--oui-color-outline-subtle) !important;
  border-radius: var(--oui-radius-md) !important;
  box-shadow: var(--oui-shadow-sm) !important;
}
.blockdate .ui-input-text {
  border: 1px solid var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  background-color: var(--oui-color-surface) !important;
  font-size: var(--oui-font-size-sm) !important;
}
.datepicker .custom-input {
  font-family: var(--oui-font-family) !important;
  font-size: var(--oui-font-size-sm) !important;
  color: var(--oui-color-on-surface) !important;
}
/* Valider button in date picker */
.validerdate .ui-btn {
  background-color: var(--oui-color-primary) !important;
  color: var(--oui-color-on-primary) !important;
  text-shadow: none !important;
  font-weight: 500 !important;
  font-family: var(--oui-font-family) !important;
  border-radius: var(--oui-radius-xl) !important;
  padding: 14px 24px !important;
  font-size: var(--oui-font-size-sm) !important;
  letter-spacing: var(--oui-letter-spacing-md) !important;
  border: none !important;
  box-shadow: none !important;
}
.validerdate input.ui-btn { opacity: 0; }

/* ---------------------- DATA TABLES (CA, Produits, Vendeurs) ---------------------- */
table {
  font-family: var(--oui-font-family) !important;
  font-size: var(--oui-font-size-xs) !important;
  color: var(--oui-color-on-surface) !important;
}
th {
  font-weight: 500 !important;
  color: var(--oui-color-on-surface-variant) !important;
  font-size: var(--oui-font-size-xs) !important;
}
td {
  font-size: var(--oui-font-size-xs) !important;
  color: var(--oui-color-on-surface) !important;
}

/* ---------------------- ENSEIGNES LIST (multi-enseigne) ---------------------- */
.ui-flipswitch .ui-btn.ui-flipswitch-on {
  font-family: var(--oui-font-family) !important;
  font-weight: 600 !important;
}

/* ---------------------- COLLAPSE ACCORDION ---------------------- */
.a-collapse {
  border-radius: var(--oui-radius-md) var(--oui-radius-md) 0 0 !important;
}
.a-collapse.collapsed {
  border-radius: var(--oui-radius-md) !important;
}

/* ---------------------- CHECKBOX ---------------------- */
/* DS Checkbox: 24x24, square with slight radius, border #9692a5 */
.checkboxlabel {
  font-family: var(--oui-font-family) !important;
  font-size: var(--oui-font-size-sm) !important;
  color: var(--oui-color-on-surface) !important;
  background: none !important;
  box-shadow: none !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  font-weight: 400 !important;
  line-height: var(--oui-line-height-md) !important;
  letter-spacing: var(--oui-letter-spacing-sm) !important;
  cursor: pointer !important;
}
.checkboxlabel:hover { color: var(--oui-color-on-surface) !important; }
.checkboxlabel::after { display: none !important; }
.ui-checkbox .checkboxlabel,
html .ui-checkbox .checkboxlabel.ui-btn {
  font-size: var(--oui-font-size-sm) !important;
  color: var(--oui-color-on-surface) !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}
/* Hide jQuery Mobile checkbox styling */
.ui-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 12px 0 !important;
}
.checkboxbasic {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  margin: 0 !important;
  opacity: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 2px solid var(--oui-color-outline) !important;
  border-radius: 4px !important;
  background-color: var(--oui-color-surface) !important;
  cursor: pointer !important;
  transition: all var(--oui-transition) !important;
}
.checkboxbasic:checked {
  background-color: var(--oui-color-primary) !important;
  border-color: var(--oui-color-primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12l5 5L19 7' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 16px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.checkboxbasic:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--oui-color-primary-state-tint) !important;
}

/* ---------------------- SEGMENTED CONTROL (radios "Trier par", "Oui/Non") ----------------------
   Les controlgroups horizontaux jQuery Mobile (.trigroupe) sont transformés
   en segmented control Orisha. Le pill (bordure violette) est appliqué sur
   .ui-controlgroup-controls uniquement, PAS sur le fieldset, pour que le
   tooltip "?" (.ips-tooltip) et sa modale restent HORS du cadre.
   Le fieldset est centré dans la fenêtre (comme à l'origine), et le tooltip
   est positionné en absolu à droite pour ne pas décaler le centrage du pill. */
.trigroupe.ui-controlgroup.ui-controlgroup-horizontal {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  margin: 0 auto !important;
  float: none !important;
}
/* Label "Trier par :" interne (produits.ips, vendeurs.ips) : affiché AU-DESSUS
   du pill, en 12px centré — même rendu que le <div> séparé de ca.ips. */
.trigroupe .ui-controlgroup-label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  float: none !important;
}
.trigroupe .ui-controlgroup-label legend {
  display: block !important;
  width: 100% !important;
  font-family: var(--oui-font-family) !important;
  font-size: var(--oui-font-size-xs) !important; /* 12px, comme ca.ips */
  font-weight: 400 !important;
  color: var(--oui-color-on-surface) !important;
  text-align: center !important;
  float: none !important;
  padding: 0 !important;
}
/* Le pill Orisha : uniquement sur le conteneur des boutons radio */
.trigroupe .ui-controlgroup-controls {
  display: inline-flex !important;
  border: 1px solid var(--oui-color-primary) !important;
  border-radius: var(--oui-radius-xl) !important;
  overflow: hidden !important;
  margin: 0 !important;
}
.trigroupe .ui-radio {
  margin: 0 !important;
}
/* Boutons segmentés — taille compacte */
.trigroupe .ui-radio .ui-btn {
  background-color: var(--oui-color-surface) !important;
  color: var(--oui-color-primary) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--oui-font-family) !important;
  font-size: var(--oui-font-size-xs) !important; /* 13px -> 12px token, compact */
  font-weight: 500 !important;
  letter-spacing: var(--oui-letter-spacing-sm) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 6px 14px !important;
  margin: 0 !important;
  min-width: 52px !important;
  text-align: center !important;
  line-height: 1.4 !important;
  transition: background-color var(--oui-transition), color var(--oui-transition) !important;
}
/* Séparateur fin entre les deux options (sur l'option de droite) */
.trigroupe .ui-radio + .ui-radio .ui-btn {
  border-left: 1px solid var(--oui-color-outline-subtle) !important;
}
/* Option sélectionnée */
.trigroupe .ui-radio .ui-btn.ui-radio-on,
.trigroupe .ui-radio .ui-btn.ui-btn-active {
  background-color: var(--oui-color-primary) !important;
  color: var(--oui-color-on-primary) !important;
  border-left-color: var(--oui-color-primary) !important;
}
/* Tooltip "?" : hors du pill, positionné en absolu JUSTE À DROITE du pill
   (et non au bord du fieldset) pour rester proche du segmented control tout
   en gardant le pill centré. 54px ≈ demi-largeur du pill "Oui/Non". */
.trigroupe > .ips-tooltip {
  position: absolute !important;
  left: calc(50% + 54px) !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 6px !important;
}

/* ---------------------- CHECKBOX TOGGLE "Voir les marges" (.switch-button) ----------------------
   Checkbox native transformée en Checkbox carrée du Design System Orisha :
   carré 20x20, radius 4px, bordure outline #9692a5 (2px), coche blanche
   (SVG) sur fond primary #482882 à l'état coché. États hover / focus DS.
   Sélecteur type+classe pour battre les styles jQuery Mobile / navigateur. */
input[type="checkbox"].switch-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-sm) !important;
  background-color: var(--oui-color-surface) !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  transition: all var(--oui-transition) !important;
}
input[type="checkbox"].switch-button:hover {
  border-color: var(--oui-color-primary) !important;
}
input[type="checkbox"].switch-button:checked {
  background-color: var(--oui-color-primary) !important;
  border-color: var(--oui-color-primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12l5 5L19 7' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 14px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
input[type="checkbox"].switch-button:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--oui-color-primary-state-tint) !important;
}