/* static/css/panneau_moyenne_mobile_simple.css */

/* Héritage police global des pancartes */
#smaPanel, #smaBody, .smaCard, .smaRow { 
  font-family: inherit;
}

/* IMPORTANT : police + box-sizing */
/* IMPORTANT : police + box-sizing (sans forcer la couleur sur tous les enfants) */
#smaBody,
#smaBody *{
  font-size: 12px;
  line-height: 1.2;
  box-sizing: border-box;
}

/* La couleur du texte vient du body (héritage naturel) */
#smaBody{
  color: var(--ia-panels-body-fg);
}


/* Body */
#smaBody{
  background: var(--ia-panels-body-bg) !important;
  color: var(--ia-panels-body-fg) !important;

  padding: 10px !important;
  padding-right: 14px !important;
  /* ✅ marge de confort en bas pour les menus déroulants */
  padding-bottom: 80px !important;
  overflow-y: auto !important;

  min-height: 0 !important;
  flex: 1 1 auto !important;
}

/* ✅ Carte : UNE seule bordure (comme frames) */
.smaCard{
  border: 1px solid var(--ia-panels-body-border-soft);
  border-radius: 10px;
  padding: 12px;
  background: var(--ia-panels-body-bg);
  box-shadow: none;
  position: relative;
}

/* ❌ SUPPRIMER la bordure intérieure (double bordure) */
/* .smaCard::after { ... }  ==> supprimé */

/* Ancien header (conservé pour compat) */
.smaHeaderRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 8px;
}

.smaTopActions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-bottom: 8px;
}

.smaHeaderTitle{
  font-size: 13px;
  font-weight: 800;
  /* ✅ pas de couleur fixe */
}

/* Bouton + */
.smaAddBtn{
  width: 22px;
  height: 22px;
  border-radius: 6px;

  border: 1px solid rgba(0,0,0,0.25);   /* ✅ comme Apparence */
  background: var(--ia-panels-btn-bg);
  color: var(--ia-panels-btn-fg);

  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;

  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0;
}
.smaAddBtn:hover{
  background: var(--ia-panels-btn-hover-bg);
  color: var(--ia-panels-btn-hover-fg);
}

/* Liste SMA : espace harmonisé */
.smaList{
  display:flex;
  flex-direction:column;
  gap: 8px;                /* ✅ plus compact */
}



/* Titre ligne + corbeille */
.smaRowHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 6px;
}

.smaRowTitle{
  font-weight: 800;
  font-size: 12px;
  /* ✅ pas de couleur fixe */
}

/* Corbeille */
.smaTrashBtn{
  width: 28px;
  height: 28px;
  border-radius: 8px;

  border: 1px solid rgba(0,0,0,0.25);   /* ✅ comme Apparence */
  background: var(--ia-panels-btn-bg);
  color: var(--ia-panels-btn-fg);

  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0;
}
.smaTrashBtn:hover{
  background: var(--ia-panels-btn-hover-bg);
  color: var(--ia-panels-btn-hover-fg);
}
.smaTrashBtn:disabled{
  opacity: 0.35;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ✅ Icône corbeille stable (plus d'emoji variable) */
.smaTrashIcon{
  font-size: 14px;
  line-height: 1;
}

/* Controls */
.smaControls{
  display:flex;
  align-items:center;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;  
}

#smaPanel .smaCurveGrid{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

#smaPanel .smaCurveLine{
  display: grid;
  align-items: center;
  column-gap: 6px;
}

#smaPanel .smaCurveLine--period{
  grid-template-columns: 58px 46px;
}

#smaPanel .smaCurveLine--color{
  grid-template-columns: 58px 42px;
}

#smaPanel .smaCurveLine--trait{
  grid-template-columns: 58px 80px 80px;
}

#smaPanel .smaLineLabel{
  font-weight: 400;
  font-size: 12px;
  color: var(--ia-panels-body-fg);
  white-space: nowrap;
}

/* ✅ Boxes : bordure comme Apparence (1px) + hauteur */
.smaBox{
  height: 18px;
  border: 1px solid rgba(0,0,0,0.25);   /* ✅ identique aux champs Apparence */
  border-radius: 0;                      /* ✅ carré comme Apparence */
  background: transparent;

  display:flex;
  align-items:center;
  justify-content:center;

  min-width: auto;
}

/* 1) période */
.smaBoxPeriod{
  width: 46px;
  flex: 0 0 46px;          /* ✅ ne rétrécit plus */
  min-width: 46px;         /* ✅ sécurité */
}

/* 2) couleur */
.smaBoxColor{
  width: 42px;
  flex: 0 0 42px;
  min-width: 42px;
}

/* ✅ 3) épaisseur */
.smaBoxWidth{
  width: 80px;
  flex: 0 0 80px;
  min-width: 80px;

  justify-content: space-between;
  padding: 0 4px;
  gap: 6px;
}

/* ✅ 4) type de trait */
.smaBoxStyle{
  width: 80px;
  flex: 0 0 80px;
  min-width: 80px;

  justify-content: center;
  padding: 0;
  gap: 0;
}


/* Input période */
.smaPeriodInput{
  width: 100%;
  height: 100%;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;

  text-align: center;
  font-weight: 500;
  font-size: 12px;
  padding: 0 4px;

  color: var(--ia-panels-body-fg) !important; /* ✅ */
}

/* Sélecteur numérique réutilisable (période/écart-type) */
#smaPanel .iaNumStepper{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 12px;
  align-items: stretch;
}
#smaPanel .iaNumStepper .smaPeriodInput{
  padding-right: 2px;
}
#smaPanel .iaNumArrows{
  border-left: 1px solid rgba(0,0,0,0.20);
  display: grid;
  grid-template-rows: 1fr 1fr;
}
#smaPanel .iaNumBtn{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--ia-panels-body-fg);
  cursor: pointer;
  font-size: 8px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#smaPanel .iaNumBtn:hover{
  background: rgba(0,0,0,0.08);
}

/* Masque les spinners natifs pour garder un seul style cohérent */
#smaPanel .smaPeriodInput::-webkit-outer-spin-button,
#smaPanel .smaPeriodInput::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Color picker */
.smaColorInput{
  width: 100%;
  height: 100%;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  cursor: pointer;
}
.smaColorInput::-webkit-color-swatch-wrapper{ padding: 0; }
.smaColorInput::-webkit-color-swatch{ border: 0; }

/* Selects */
.smaWidthSelect,
.smaStyleSelect{
  border: 0 !important;
  outline: none !important;
  background: transparent !important;

  font-weight: 800;
  font-size: 12px;
  cursor: pointer;

  height: 100%;
  padding: 0;
  margin: 0;

  color: var(--ia-panels-body-fg) !important; /* ✅ texte piloté */
}

/* ✅ largeurs : épaisseur compacte / style large */
.smaWidthSelect{ width: 34px; }          /* chiffre */
.smaStyleSelect{
  flex: 1 1 auto;
  min-width: 0;
  text-overflow: ellipsis;
}

/* Preview */
.smaLinePreview{
  width: 34px;
  height: 10px;
  border-radius: 2px;
  position: relative;
  flex: 0 0 auto;
}
.smaLinePreview::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-top-width: var(--sma-prev-w, 3px);
  border-top-style: var(--sma-prev-style, solid);
  border-top-color: var(--sma-prev-c, #ff00ff);
}
/* Fallback : si selecteur_type_trait.css n'est pas chargé, on garde le trait */
.ia-type-trait .ia-tt-preview::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  transform: translateY(-50%);
  border-top-width: var(--tt-prev-w, 3px);
  border-top-style: var(--tt-prev-style, solid);
  border-top-color: var(--tt-prev-c, #ff00ff);
}

/* ✅ Séparateur entre SMA (comme .iaLegendLine) */
/* Chaque SMA : pas de margin-bottom (sinon double espace) */
.smaRow{
  padding: 0 2px;          /* ✅ compact */
  margin: 0;               /* ✅ supprime le double espace */
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

/* séparation légère + cohérente */
.smaRow{
  padding-bottom: 8px;
}
.smaRow:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

/* Quand ça wrap, on préfère couper avant les 2 derniers */
.smaBoxWidth{ order: 3; }
.smaBoxStyle{ order: 4; }

.smaLabelsRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.12);
}

.smaLabelsLabel{
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}

.smaBoxLabels{
  flex: 1 1 auto;
  height: 28px;
  border-radius: 0;
  padding: 0;
}

.smaLinkRow{
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Chainette "réglages indicateur" = même gabarit que reset (22x22) */
#smaPanel .smaTopActions .iaBtnChainette,
#smaPanel .smaLinkRow .iaBtnChainette{
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
#smaPanel .smaTopActions .iaBtnChainette svg,
#smaPanel .smaLinkRow .iaBtnChainette svg{
  width: 14px;
  height: 14px;
}

/* Cadre Options d’affichage (même esprit que iaLegendFrame) */
#smaPanel .smaFrame{
  border: 1px solid var(--ia-panels-body-border-soft);
  border-radius: 10px;
  padding: 12px;
  margin-top: 12px;
  background: var(--ia-panels-body-bg);
}

#smaPanel .smaFrameTitle{
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 12px;
}

#smaPanel .smaOptRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#smaPanel .smaOptLabel{
  font-weight: 700;
  font-size: 13px;
}

#smaPanel .smaOptLine{
  border-top: 1px solid var(--ia-panels-body-border-soft);
  margin: 10px 0;
}

/* Bouton corbeille : look clean */
.smaTrashBtn{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.25);
  background: var(--ia-panels-btn-bg);
  color: var(--ia-panels-btn-fg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0;
}

/* SVG : même style partout */
.smaTrashSvg{
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.smaTrashBtn:hover .smaTrashSvg{
  opacity: 1;
}

/* ===========================================================
   ✅ SMA : boutons pilotés par Apparence (mêmes variables)
   - corrige aussi l'écrasement possible via "#smaBody * { color: ... }"
   =========================================================== */

/* 1) Base : on force les boutons SMA à utiliser les variables "boutons pancartes" */
#smaPanel .smaAddBtn,
#smaPanel .smaTrashBtn{
  /* ⚠️ IMPORTANT : !important pour battre "#smaBody * { color: ... }" */
  background: var(--ia-panels-btn-bg, var(--ia-panels-buttons-bg, #ffffff)) !important;
  color:      var(--ia-panels-btn-fg, var(--ia-panels-buttons-fg, #111111)) !important;

  /* si tu as une variable de bordure côté Apparence, elle sera utilisée, sinon fallback */
  border-color: var(--ia-panels-btn-border, rgba(0,0,0,0.25)) !important;
}

/* 2) Hover : mêmes variables hover que le sélecteur */
#smaPanel .smaAddBtn:hover,
#smaPanel .smaTrashBtn:hover{
  background: var(--ia-panels-btn-hover-bg, var(--ia-panels-buttons-hover-bg, #f0f0f0)) !important;
  color:      var(--ia-panels-btn-hover-fg, var(--ia-panels-buttons-hover-fg, #111111)) !important;
}

/* 3) Disabled : on garde ton comportement */
#smaPanel .smaTrashBtn:disabled{
  opacity: 0.35;
  cursor: not-allowed;
}

/* 4) SVG : suit currentColor => suivra la variable du bouton */
#smaPanel .smaTrashSvg{
  stroke: currentColor !important;
}

.ia-sma-overlay {
  color: #ccc;
  background: rgba(0,0,0,0.35);
  padding: 4px 8px;
  border-radius: 6px;
}