:root{
  /* Thème */
  --bg:#384454;
  --fg:#eaf2ff;
  --muted:#c8d2e3;
  --card:#2f3a48;
  --line:#223043;
  --brand:#b6d8f2;
  --note: #E1A624;
  
  --white:#ffffff;

  --ok:#2ecc71; --warn:#f59e0b; --err:#ef4444;


  --accent: #0086d6;                 /* ton bleu */
  --accent-40: rgba(0,134,214,.40);
  --accent-25: rgba(0,134,214,.25);
  --accent-00: rgba(0,134,214,0);
  --white-60: rgba(255,255,255,.60);
  --white-00: rgba(255,255,255,0);  

  
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'Manrope',system-ui,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
}

.hidden{display:none!important}
.small{font-size:12px}
.muted{opacity:.8}

/* Header */
.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:var(--bg); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:8px; background:transparent; border:0; cursor:pointer; color:var(--fg)}
.brand-logo{width:35px;height:35px;border-radius:8px}
.brand-name{font-weight:900; letter-spacing:.4px; font-size:20px}
.user{position:relative}
.user-badge{background:transparent;border:0;color:var(--muted);cursor:pointer}
.menu{position:absolute; right:0; top:36px}
.menu-card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px; width:220px; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.menu-title{font-weight:700; margin-bottom:8px}
.menu-actions{display:flex; gap:8px; justify-content:flex-end}

/* Layout */
.content{padding:16px; padding-bottom:110px}
.screen{display:none}
.screen.active{display:block}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; margin-top: 10px; }
.center{text-align:center}
.title{margin:10px 0 10px}
.app-logo{width:92px;height:92px;object-fit:contain;display:block;margin:8px auto 6px}
.app-name{text-align:center;font-weight:900;letter-spacing:.4px;margin-bottom:6px;opacity:.9;font-size:28px}

/* Buttons */
.btn{background:#233041;color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:10px 14px;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn-accent{background:var(--accent);border-color:var(--accent)}
.btn.danger{background:#b91c1c;border-color:#991b1b}
.btn.big{font-size:18px;padding:12px 18px}
.btn .mdi{margin-right:6px}

/* Forms */
.form label{display:block;margin:10px 0}
.form input,.form select{width:100%;border-radius:10px;border:1px solid var(--line);background:#233041;color:var(--fg);padding:8px 10px}

/* Inventory */
.inventory-tools{display:flex;gap:10px;margin:8px 0 10px}
#searchInventory{flex:1;background:#233041;color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:10px}

.item{display:flex;align-items:flex-start;gap:10px;padding:10px;border-bottom:1px solid var(--muted)}
.item:last-child{border-bottom:0}
.item .meta{flex:1;cursor:pointer}

/* .color-line{margin:4px 0 2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap; color: var(--white);  } */
.color-name{font-size:13px;opacity:.95}
.color-ref{font-size:12px;color:var(--muted)}
.color-dot{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.25)}
.color-dot.big{width:22px;height:22px}

.meter-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.meter{height:7px;border-radius:8px;background:#1f2a38;border:1px solid var(--line);overflow:hidden;flex:1}
.meter .fill{height:100%;width:0;display:block;transition:width .25s ease}
.meter .fill.ok{background:var(--ok)}
.meter .fill.warn{background:var(--warn)}
.meter .fill.err{background:var(--err)}
.meter-label{font-size:12px}
.date-badge{
  font-size:12px;
  color:var(--white);
  margin-top:2px;

}

/* Dock */
.dock{
  position:fixed; left:0; right:0; bottom:0; height:78px; background:var(--bg);
  display:flex; align-items:center; justify-content:center; gap:12px; padding:12px 14px; z-index:10; border-top:1px solid var(--line);
}
.dock-btn{flex:1; min-height:54px; border-radius:14px; border:1px solid var(--line); background:#233041; color:var(--fg); display:flex; align-items:center; justify-content:center; gap:8px; font-weight:800; letter-spacing:.3px; cursor:pointer}
.dock-btn .mdi{font-size:20px}

/* Detail */
.row-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}


/* Dock accent & ordering */
.dock-btn.accent{ background: var(--accent); border-color: var(--accent); }

/* Optional: ensure buttons can be ordered */
.dock-btn{ order: 0; }


.note-badge{
  font-size:12px;
  color:var(--note);
  margin-top:2px;
  word-break:break-word;
}

/* Detail summary */
.detail-summary{margin-bottom:10px}
.detail-summary .titleline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.detail-summary .brandmat{font-weight:800}
.detail-summary .colorline{margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.detail-summary .meter-row{margin-top:6px}

/* Tech specs card (v6 add-on) */
.tech-specs{margin:10px 0;padding:12px}
.tech-specs .specs-grid{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:560px){.tech-specs .specs-grid{grid-template-columns:1fr 1fr}}
.kv{display:flex;gap:8px}
.kv .k{min-width:180px;opacity:.85}
.kv .v{flex:1}








/* ========================= Scan Animation ========================= */
.scan-area {
  position: relative;
  margin: 32px auto;
  width: 120px;
  height: 120px;
}

.scan-circle {
  width: 120px;
  height: 120px;
  border: 3px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.scan-circle.scanning {
  border-color: var(--accent);
  animation: pulse 1.6s ease-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 var(--accent-40), /* anneau bleu compact */
      0 0 0 0 var(--white-60);  /* léger halo blanc */
  }
  35% {
    transform: scale(1.03);
    box-shadow:
      0 0 0 10px var(--accent-25),
      0 0 14px 0 var(--white-60);
  }
  70% {
    transform: scale(1.06);
    box-shadow:
      0 0 0 24px var(--accent-00),
      0 0 0 16px var(--white-00);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 var(--accent-00),
      0 0 0 0 var(--white-00);
  }
}

.scan-icon {
  font-size: 48px;
  color: var(--muted);
}

.scan-circle.scanning .scan-icon {
  color: var(--accent);
}

#homeStatus {
  margin-top: 10px;
}


/* === Inventaire v2 : cercle à gauche + infos à droite === */

.item:last-child{border-bottom:0}

.item .left{
  display:flex;
  align-items:center;
  justify-content:center;
}


@media (min-width:560px){
  .item{ grid-template-columns:75px 1fr; }
  .color-avatar{ width:75px; height:75px; }
}

/* petits ajustements visuels */
.item .meta{ flex:1; cursor:pointer }
.item .meta strong{ font-weight:800 }


.data-material{
	color: var(--white); 
}


.item{
  display:grid;
  grid-template-columns:70px 1fr;
  align-items:center;
  gap:14px;
  padding:6px;
  border-bottom:1px solid var(--line);
}
.color-avatar{
  width:70px;
  height:70px;
  border-radius:30%;
  box-shadow:0 2px 10px rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.05);
}
.color-line{
  margin:4px 0 2px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap; /* ça permet le retour à la ligne */
	color: var(--accent);  
  /* background-color: var();  */
}


/* ===== Inventaire : nouvelle mise en page ===== */
.item .row1{ font-weight:700; line-height:1.2; }
.item .row1 .color-name{ font-weight:800; }
.item .row2{ margin-top:2px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.item .row3{ margin-top:6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.brand-chip{
  display:inline-block; padding:3px 9px;
  border-radius:999px; background:#233041; border:1px solid var(--line);
  font-size:12px; font-weight:800; letter-spacing:.2px; opacity:.95;
}

.note-pill{
  display:inline-block; padding:4px 10px; border-radius:10px;
  background: linear-gradient(90deg, var(--accent), #00a2ff);
  color:#fff; font-weight:900; box-shadow:0 2px 8px rgba(0,0,0,.25);
}

.color-name{ 
  word-break:break-word;
  color: var(--white);
  /* font-weight: bold; */
} /* permet le retour à la ligne dans la couleur */

/* ===== Détail : ordre des infos + note voyante ===== */
.detail-summary .ds-wrap{ display:grid; gap:6px; }
.detail-summary .ds-line1{ font-weight:800; font-size:16px; line-height:1.25; }
.detail-summary .ds-brand{ opacity:.95; }
.detail-summary .ds-date{ font-size:12px; color:var(--muted); }
.detail-summary .ds-note{
  margin-top:6px; padding:8px 12px; border-radius:12px;
  background: linear-gradient(90deg, var(--accent), #00a2ff);
  color:#fff; font-weight:900; display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}

/* Dans style.css */
.detail-summary .item { border-bottom: 0; }



/* Titres de section (h2.section-title) */
.section-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:19px;
  font-weight:bold;
  letter-spacing:.2px;
  color:var(--fg);
  /* justify-content: center; */
}



/* Floating Action Buttons */
.fab{
  position: fixed;
  bottom: 100px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--accent, #222);
  color: var(--on-accent, #fff);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  border: none;
  cursor: pointer;
  z-index: 50;
  opacity: 0.95;
}
.fab-right{ right: 24px; }
.fab-left{ left: 24px; }
.fab.hidden{ display:none; }

/* Status dot */
.status-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; background:var(--warn); }
.status-dot.green{ background:var(--ok); }
.status-dot.red{ background:var(--err); }

/* Balance adaptations */
#btnBalanceUpdatePoids{ margin-top:10px; width:100%; }
#balanceApiKey{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }





/* Détail : top en 2 colonnes + barre en dessous */
.detail-summary .ds-wrap { display: grid; gap: 8px; }
.detail-summary .ds-top {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  align-items: center;
}
.detail-summary .ds-left  { display: flex; justify-content: center; }
.detail-summary .ds-right { display: grid; }
.detail-summary .ds-progress .meter-row {
  margin-top: 2px;
}
.detail-summary .weight-grams { 
  font-size: 12px; 
  margin: 4px 0 2px;
}
.detail-summary .weight-grams .mdi { margin-right: 6px; }



/* ===== Fiche technique : nouveau visuel ===== */
#d_specs.specs-modern, #d_specs { /* garde compat si classe non ajoutée */
  padding: 12px;
}

#d_specs .specs-wrap { display: grid; gap: 12px; }

#d_specs .spec-badges {
  display: flex; gap: 8px; flex-wrap: wrap;
}
#d_specs .badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  background: #233041; border: 1px solid var(--line); color: var(--fg);
  font-size: 12px;
}
#d_specs .badge b { font-weight: 800; }
#d_specs .badge .mdi { font-size: 16px; }

#d_specs .specs-grid2 {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
  grid-template-columns: 1fr;                 /* mobile */
}
@media (min-width: 560px) {
  #d_specs .specs-grid2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  #d_specs .specs-grid2 { grid-template-columns: 1fr 1fr 1fr; } /* 3 colonnes desktop */
}

#d_specs .specit {
  background: #233041; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; min-height: 72px;
  display: grid; gap: 6px;
}
#d_specs .speck {
  font-size: 12px; opacity: .85; letter-spacing: .2px;
  display: inline-flex; align-items: center; gap: 8px;
}
#d_specs .speck .mdi { font-size: 18px; }
#d_specs .specv {
  font-weight: 800; line-height: 1.35;
  word-break: break-word;
}

/* option : améliorer les retours à la ligne issus de specs multi-lignes */
#d_specs .specv br { line-height: 14px; }


/* ===== Fiche technique — sections groupées ===== */
#d_specs .specs-grouped { display: grid; gap: 14px; }

/* section */
#d_specs .spec-section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

/* en-tête de section */
#d_specs .spec-sec-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  font-weight: 800; letter-spacing: .2px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--line);
}
#d_specs .spec-sec-head .mdi { font-size: 18px; opacity: .9; }

/* table des lignes */
#d_specs .spec-table { display: grid; }
#d_specs .spec-row {
  display: grid; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}
#d_specs .spec-row:first-child { border-top: 0; }
#d_specs .spec-k { opacity: .85; }
#d_specs .spec-v { font-weight: 800; line-height: 1.35; }

/* responsive : 2 colonnes dès 560px */
@media (min-width:560px){
  #d_specs .spec-row{
    grid-template-columns: 220px 1fr;
    align-items: center;
  }
}

/* chips (listes : plateau, séchage…) */
#d_specs .chips { display:flex; gap:8px; flex-wrap:wrap; }
#d_specs .chip {
  display:inline-flex; align-items:center; padding:6px 10px;
  border-radius: 8px;
  background:#233041; border:1px solid var(--line); color:var(--fg);
  font-size:12px; font-weight:800;
}

/* pills (états courts : OUI / NON / OPTIONNEL / vitesses courtes) */
#d_specs .pill{
  display:inline-flex; align-items:center; padding:4px 10px;
  border-radius:999px; font-size:12px; font-weight:900;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
}
#d_specs .pill.ok   { background: rgba(46,204,113,.16); border-color: rgba(46,204,113,.4); }
#d_specs .pill.info { background: rgba(0,134,214,.20);  border-color: rgba(0,134,214,.45); }
#d_specs .pill.err  { background: rgba(239,68,68,.18);  border-color: rgba(239,68,68,.45); }

/* petite amélioration des br dans les valeurs multi-lignes */
#d_specs .spec-v br { line-height: 14px; }


/* ===== Fiche technique : edge-to-edge sans card imbriquée ===== */
#d_specs { --pad: 12px; } /* padding latéral de la card parent */

#d_specs .specs-edge { display: grid; gap: 12px; }

/* Section sans fond ni bordure : on s'appuie sur des entêtes et des séparateurs */
#d_specs .spec-section { background: transparent; border: 0; border-radius: 0; }

/* Entête de section : pleine largeur (jusqu'aux bords de la card) */
#d_specs .spec-sec-head{
  margin: 0 calc(-1 * var(--pad));
  padding: 10px var(--pad);
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; letter-spacing: .2px;
  background: rgba(255,255,255,.04);
  border-top: 1px solid var(--line);
}
#d_specs .spec-section:first-child .spec-sec-head{ border-top: 0; }
#d_specs .spec-sec-head .mdi{ font-size: 18px; opacity: .9; }

/* Lignes label/valeur : pleines largeur + séparateurs discrets */
#d_specs .spec-row{
  margin: 0 calc(-1 * var(--pad));
  padding: 10px var(--pad);
  display: grid; gap: 8px;
  border-top: 1px solid var(--line);
}
@media (min-width:560px){
  #d_specs .spec-row{ grid-template-columns: 240px 1fr; align-items: center; }
}
#d_specs .spec-k{ opacity: .85; }
#d_specs .spec-v{ font-weight: 800; line-height: 1.35; }

/* Chips & Pills */
#d_specs .chips{ display:flex; gap:8px; flex-wrap:wrap; }
#d_specs .chip{
  display:inline-flex; align-items:center; padding:6px 10px;
  border-radius: 8px; font-size:12px; font-weight:800;
  background:#233041; border:1px solid var(--line); color:var(--fg);
}
#d_specs .pill{
  display:inline-flex; align-items:center; padding:4px 10px;
  border-radius:999px; font-size:12px; font-weight:900;
  border:1px solid var(--line); background: rgba(255,255,255,.06);
}
#d_specs .pill.ok   { background: rgba(46,204,113,.16); border-color: rgba(46,204,113,.4); }
#d_specs .pill.info { background: rgba(0,134,214,.20);  border-color: rgba(0,134,214,.45); }
#d_specs .pill.err  { background: rgba(239,68,68,.18);  border-color: rgba(239,68,68,.45); }

/* Petits retours à la ligne agréables */
#d_specs .spec-v br { line-height: 14px; }


#d_tagUrl { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }


.btnCreateWriteNFC{
  background-color: var(--accent);
}


/* Actions côte à côte sur desktop, stack sur mobile */
.row-actions.two{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 520px){
  .row-actions.two{ grid-template-columns: 1fr; }
}

/* Lisibilité des lignes d'info dans la carte mesure */
#balanceMeasureCard .meter-row{ margin-top: 8px; }
#balanceMeasureCard .muted.small{ margin-top: 6px; display: block; }


/* ===== Section Balance ===== */
#screen-balance .measure-card { display: grid; gap: 10px; }

#screen-balance .kvline{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  align-items: center;
}
#screen-balance .kvline .k{ opacity:.85; }
#screen-balance .kvline .v{ font-weight: 800; }

/* pile les boutons : Tare puis MAJ avec espace */
#screen-balance .actions-vertical{
  display: grid;
  gap: 25px;            /* <-- espace entre les deux boutons */
  margin-top: 6px;
}
#screen-balance #btnBalanceTare{ width:100%; }
#screen-balance #btnBalanceUpdatePoids{ width:100%; }

/* jauge + lisibilité */
#screen-balance .meter-row{ display:flex; align-items:center; gap:8px; margin-top: 2px; }
#screen-balance .meter{ height:8px; border-radius:8px; background:#1f2a38; border:1px solid var(--line); overflow:hidden; flex:1; }
#screen-balance .meter .fill{ height:100%; display:block; transition:width .25s ease; }
#screen-balance .meter .fill.ok{ background:var(--ok); }
#screen-balance .meter .fill.warn{ background:var(--warn); }
#screen-balance .meter .fill.err{ background:var(--err); }
#screen-balance .meter-label{ font-size:12px; opacity:.9; min-width:34px; text-align:right; }

/* statut & apikey */
#screen-balance #balanceApiKey{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* responsive : empiler proprement les labels/valeurs */
@media (max-width:560px){
  #screen-balance .kvline{ grid-template-columns: 1fr; }
}


.inventory-tools{
  display:flex;
  gap:10px;
  margin:8px 0 10px;
  align-items:center;
}

.btn-icon{
  padding:8px 10px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn-toggle-view{
  /* margin-left:8px; */
  /* padding:4px 10px; */
  /* border-radius:999px; */
  border:1px solid var(--line);
  background:#233041;
  color:var(--muted);
  /* font-size:11px; */
  /* display:inline-flex; */
  /* align-items:center; */
  /* gap:4px; */
  cursor:pointer;
}
.btn-toggle-view .mdi{
  margin-right:0;
  font-size:14px;
}
.btn-toggle-view.mode-stock{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

/* Animation bordure bleue qui pulse pendant le scan */
@keyframes scanPulse {
  0% {
    box-shadow:
      0 0 0 0 var(--accent-40), /* anneau bleu compact */
      0 0 0 0 var(--white-60);  /* léger halo blanc */
  }
  35% {
    box-shadow:
      0 0 0 10px var(--accent-25),
      0 0 14px 0 var(--white-60);
  }
  70% {
    box-shadow:
      0 0 0 24px var(--accent-00),
      0 0 0 16px var(--white-00);
  }
  100% {
    box-shadow:
      0 0 0 0 var(--accent-00),
      0 0 0 0 var(--white-00);
  }
}

#btnInventoryScan{
  border: 2px solid var(--line);
  border-radius: 12px;
  transition: border-color .2s ease;
}

/* état “scanning” */
#btnInventoryScan.scanning{
  border-color: var(--accent); /* bleu */
  animation: scanPulse 1.6s ease-in-out infinite;
}




/* 2 boutons côte à côte */
.inventory-actions{
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  margin-top: 8px;
}
.inventory-actions > *{
  flex: 1 1 0;
}
.inventory-actions #btnInventoryScan i{
  margin-right: 6px;
}


/* Style le bouton annuler natif du champ search (WebKit/Chromium/Edge/Safari) */
#searchInventory::-webkit-search-cancel-button{
  -webkit-appearance: none;
  appearance: none;
  height: 30px;
  width: 30px;
  cursor: pointer;
  background: no-repeat center/30px 30px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='red'><path d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7a1 1 0 1 0-1.41 1.41L10.59 12l-4.9 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.9a1 1 0 0 0 1.41-1.41L13.41 12l4.9-4.89a1 1 0 0 0-.01-1.4z'/></svg>");
  opacity: 1; /* certains browsers le grisent sinon */
}