/* assets/ilc-bl.css — ILC BL/CAT (Neo Green Glow) */

:root{
  --bg:#05070b;
  --card:#0b101a;
  --line:#1a2638;

  --text:#d7e1f0;
  --muted:#8aa0c2;

  /* ✅ CHARTE ILC (VERT) */
  --accent:#22ff7a;     /* glow */
  --accent2:#00c85f;    /* vert profond */
  --danger:#ff3b3b;

  --shadow:0 20px 60px rgba(0,0,0,.65);
  --radius:18px;

  --glass:rgba(12,18,30,.55);
  --glass2:rgba(12,18,30,.35);
}

*{box-sizing:border-box}
html,body{height:100%}

body.ilc{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(34,255,122,.18), transparent 60%),
    radial-gradient(900px 500px at 85% 15%, rgba(0,200,95,.10), transparent 55%),
    radial-gradient(900px 600px at 50% 110%, rgba(34,255,122,.10), transparent 60%),
    var(--bg);
}

.bg-grid{
  position:fixed; inset:0;
  background-image:
    linear-gradient(to right, rgba(26,38,56,.28) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,38,56,.28) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
  opacity:.50;

  /* ✅ fade doux au lieu du mask (évite la bande) */
  background-repeat:repeat;
  -webkit-mask-image: radial-gradient(circle at 50% 20%, rgba(0,0,0,1) 0 52%, rgba(0,0,0,.2) 70%, rgba(0,0,0,0) 85%);
          mask-image: radial-gradient(circle at 50% 20%, rgba(0,0,0,1) 0 52%, rgba(0,0,0,.2) 70%, rgba(0,0,0,0) 85%);
}

.wrap{max-width:980px;margin:0 auto}
.pad{padding:18px 14px 40px}

.glass{
  background:linear-gradient(180deg, var(--glass), var(--glass2));
  border:1px solid rgba(26,38,56,.9);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
}

.card{padding:16px}

.topbar{
  position:sticky; top:0; z-index:20;
  margin:10px 10px 0;
  padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between;
}

.top-left{display:flex; gap:10px; align-items:center}
.top-logo{width:42px;height:auto}
.top-title{font-weight:800; letter-spacing:.4px}
.small{font-size:.85rem}

.brand{display:flex; gap:12px; align-items:center; margin-bottom:12px}
.brand-logo{width:60px;height:auto}
.h1{font-size:1.3rem;font-weight:900}
.muted{color:var(--muted)}
.foot{margin-top:10px;text-align:center;font-size:.85rem}

.form{display:flex;flex-direction:column;gap:10px}
.lbl{font-weight:700; font-size:.92rem; margin-top:4px}

.inp{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(26,38,56,.95);
  background:rgba(5,7,11,.55);
  color:var(--text);
  outline:none;
  box-shadow:0 0 0 rgba(34,255,122,0);
  transition:.18s;
}

.inp:focus{
  border-color:rgba(34,255,122,.85);
  box-shadow:0 0 0 4px rgba(34,255,122,.12);
}

.ta{min-height:120px;resize:vertical}

.upper{ text-transform: uppercase; }

.grid2{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:760px){
  .pad{padding:22px 18px 60px}
  .card{padding:18px}
  .grid2{grid-template-columns:1fr 1fr}
}

.btn{
  border:none;
  border-radius:14px;
  padding:12px 14px;
  font-weight:800;
  cursor:pointer;
  color:var(--text);
  background:rgba(26,38,56,.8);
  border:1px solid rgba(26,38,56,.95);
  transition:.18s;
}

.btn:hover{transform:translateY(-1px)}

.btn.primary{
  background:linear-gradient(180deg, rgba(34,255,122,.20), rgba(34,255,122,.07));
  border-color:rgba(34,255,122,.55);
  box-shadow:0 0 22px rgba(34,255,122,.14);
}

.btn.ghost{
  background:transparent;
  border-color:rgba(26,38,56,.95);
}

.btn.danger{
  background:linear-gradient(180deg, rgba(255,59,59,.25), rgba(255,59,59,.08));
  border-color:rgba(255,59,59,.45);
}

.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:8px;
}

.alert{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,59,59,.35);
  background:rgba(255,59,59,.08);
  color:var(--text);
}

.chkline{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(26,38,56,.95);
  background:rgba(5,7,11,.35);
}

.seg{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

@media (min-width:760px){
  .seg{grid-template-columns:repeat(4,1fr)}
}

.segitem{
  display:flex; align-items:center; justify-content:center;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(26,38,56,.95);
  background:rgba(5,7,11,.35);
  font-weight:800;
  cursor:pointer;
  user-select:none;
}

.segitem input{display:none}

.segitem:has(input:checked){
  border-color:rgba(34,255,122,.55);
  box-shadow:0 0 18px rgba(34,255,122,.14);
  background:rgba(34,255,122,.08);
}

.sig{
  padding:10px;
  border-radius:16px;
}

.sig canvas{
  width:100%;
  height:160px;
  border-radius:14px;
  background:rgba(0,0,0,.25);
  border:1px dashed rgba(34,255,122,.35);
  touch-action:none; /* crucial mobile */
}

.sigbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:8px;
}

.hide{display:none!important}
.stack{display:flex;flex-direction:column;gap:10px}
/* ===== FIX HARD: supprimer la "bande" de background ===== */

/* 1) On simplifie le background du body (uniquement base) */
body.ilc{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: var(--bg);
  position:relative;
  overflow-x:hidden;
}

/* 2) Glow néon sur un layer séparé (plus de palier/bande) */
body.ilc::before{
  content:"";
  position:fixed;
  inset:-120px;
  pointer-events:none;
  z-index:-2;

  background:
    radial-gradient(900px 520px at 18% 8%, rgba(34,255,122,.18), transparent 62%),
    radial-gradient(900px 520px at 86% 14%, rgba(0,200,95,.12), transparent 60%),
    radial-gradient(1200px 700px at 50% 120%, rgba(34,255,122,.14), transparent 68%);
  filter: blur(2px);
  opacity: 1;
}

/* 3) Grille: pas de mask, fade doux + opacité plus basse */
.bg-grid{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;

  background-image:
    linear-gradient(to right, rgba(26,38,56,.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,38,56,.22) 1px, transparent 1px);
  background-size:40px 40px;
  opacity:.35;

  /* fade vertical + radial -> supprime l'effet "ligne" */
  -webkit-mask-image:
    radial-gradient(circle at 50% 10%, rgba(0,0,0,1) 0 55%, rgba(0,0,0,0) 82%),
    linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.7) 55%, rgba(0,0,0,0) 100%);
          mask-image:
    radial-gradient(circle at 50% 10%, rgba(0,0,0,1) 0 55%, rgba(0,0,0,0) 82%),
    linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.7) 55%, rgba(0,0,0,0) 100%);
}

/* ===== LOGIN CENTER FIX (garanti) ===== */
.center{
  min-height: 100vh;
  min-height: 100dvh;          /* ✅ vrai viewport (mobile + desktop) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px;
}

/* évite que des margins "poussent" le layout */
.center > * { margin: 0; }

/* optionnel: card login plus clean */
.login-card{
  width: min(860px, 94vw);
}
/* ===== Logout red glow ===== */
.btn-logout{
  border-color: rgba(255,59,59,.45);
  color: #ff6b6b;
  background: rgba(255,59,59,.05);
  box-shadow: 0 0 12px rgba(255,59,59,.12);
}

.btn-logout:hover{
  border-color: rgba(255,59,59,.75);
  background: rgba(255,59,59,.12);
  box-shadow: 0 0 22px rgba(255,59,59,.22);
  transform: translateY(-1px);
}

/* ===== Delete tech button (red glow) ===== */
.btn-del-tech{
  border-color: rgba(255,59,59,.45);
  color: #ff6b6b;
  background: rgba(255,59,59,.06);
  box-shadow: 0 0 12px rgba(255,59,59,.12);
}

.btn-del-tech:hover{
  border-color: rgba(255,59,59,.75);
  background: rgba(255,59,59,.14);
  box-shadow: 0 0 22px rgba(255,59,59,.25);
  transform: translateY(-1px);
}

/* ===== Bouton Unifier sortie stock ===== */
.btn-stock{
  border-color: rgba(34,255,122,.45);
  color: #22ff7a;
  background: rgba(34,255,122,.06);
  box-shadow: 0 0 12px rgba(34,255,122,.12);
}

.btn-stock:hover{
  border-color: rgba(34,255,122,.75);
  background: rgba(34,255,122,.14);
  box-shadow: 0 0 22px rgba(34,255,122,.25);
  transform: translateY(-1px);
}

/* ===== Modale stock ===== */
.modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal{
  width: min(600px, 94vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.modal-title{
  font-weight: 800;
  font-size: 1.05rem;
}

.modal-close{
  font-size: 1.2rem;
  padding: 6px 10px;
  line-height: 1;
}

.modal-body{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.modal-footer{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

/* ===== Stock list items ===== */
.stock-check-all{
  margin-bottom: 10px;
  border-color: rgba(34,255,122,.35);
  background: rgba(34,255,122,.04);
}

.stock-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stock-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(26,38,56,.95);
  background: rgba(5,7,11,.35);
  cursor: pointer;
  transition: .18s;
}

.stock-item:has(input:checked){
  border-color: rgba(34,255,122,.55);
  background: rgba(34,255,122,.06);
  box-shadow: 0 0 14px rgba(34,255,122,.10);
}

.stock-item input[type="checkbox"]{
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: #22ff7a;
}

.stock-info{
  flex: 1;
  min-width: 0;
}

.stock-material{
  font-weight: 700;
  font-size: .92rem;
  word-break: break-word;
}

.stock-qty{
  color: #22ff7a;
  font-weight: 800;
}

.stock-meta{
  margin-top: 2px;
  font-size: .78rem;
  word-break: break-all;
}

/* ===== Mobile tweaks modale ===== */
@media (max-width: 600px){
  .modal-overlay{
    align-items: flex-end;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .modal{
    width: 100%;
    max-height: 75vh;
    max-height: 75dvh;
    border-radius: 18px 18px 0 0;
  }

  .modal-footer{
    flex-direction: column;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .modal-footer .btn{
    width: 100%;
    text-align: center;
  }
}