/* public/assets/css/style.css (base modele_app + petits ajouts Sofit-inv) */
:root{
  --bg1:#3c1b50;
  --bg2:#6a1c6b;
  --pink:#ff4fa0;

  --white: #fff;
  --white-rgb: 255,255,255;
  --black: #000;
  --black-rgb: 0,0,0;
  --pink-rgb: 255,79,160;
  --accent: #2da5ff;
  --accent-rgb: 45,165,255;
  --dark-modal-rgb: 20,20,28;
  --hotpink-rgb: 255,105,180;
  --toast-success-rgb: 20,120,80;
  --toast-error-rgb: 160,40,70;

  --glass: rgba(var(--white-rgb),.10);
  --glass2: rgba(var(--white-rgb),.14);
  --text: rgba(var(--white-rgb),.92);
  --muted: rgba(var(--white-rgb),.72);
  --line: rgba(var(--white-rgb),.14);
  --shadow: 0 10px 30px rgba(var(--black-rgb),.28);
  --radius: 16px;
  --radius2: 18px;
  --safe: env(safe-area-inset-bottom, 0px);
  --safeTop: env(safe-area-inset-top, 0px);

  --success: #33d17a;
  --green: #4cd964;
  --danger: #ff3b30;
  --warn: #ffd60a;

  --accent2: #1c74c5;
  --accent-hover: #1a8be0;

  --primary: #6b1b8e;

  --gray-ccc: #ccc;
  --gray-eee: #eee;
  --gray-ddd: #ddd;

  --light-bg: #f9f9f9;
  --light-bg2: #f5f5f5;
  --light-blue: #d9edf7;

  --blue: #1a73e8;

  --pink-hot: #ff2aa0;
  --pink-soft: #ff82c5;
  --pink2: #e91e63;

  --magenta: #ff3d8e;
  --magenta2: #d81b60;
  --pink3: #ff7096;

  --dark-1: #1c1c1c;
  --dark-2: #1e1e1e;
  --dark-3: #2b2b2b;
  --dark-line: #444;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background: linear-gradient(75deg, var(--bg1) 0%, var(--bg2) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

.app{min-height:100%;display:flex;flex-direction:column}
.header{
  padding: calc(14px + var(--safeTop)) 16px 12px;
  background: rgba(var(--black-rgb),.18);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.headerRow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.4px}
.brand .logo{
  width:44px;height:22px;border-radius:999px;
  background: linear-gradient(90deg, var(--pink), rgba(var(--white-rgb),.35));
  box-shadow: 0 6px 14px rgba(var(--pink-rgb),.35);
}
.headerTitle{margin-top:10px;font-size:28px;font-weight:900}
.iconBtn{
  width:40px;height:40px;border-radius:12px;
  border:1px solid var(--line);
  background: rgba(var(--white-rgb),.06);
  color:var(--text);
  display:grid;place-items:center;
}
.main{padding:16px 16px calc(92px + var(--safe));flex:1}

.card{
  background: linear-gradient(180deg, rgba(var(--white-rgb),.11), rgba(var(--white-rgb),.06));
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}
.card + .card{margin-top:14px}
.cardPad{padding:14px}
.cardTitle{display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px}
.cardSub{margin-top:4px;color:var(--muted);font-size:13px}
.cardActionRow{margin-top:10px;display:flex;justify-content:flex-end;gap:10px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 14px;border-radius:12px;
  border:1px solid rgba(var(--white-rgb),.18);
  background: linear-gradient(75deg, rgba(var(--pink-rgb),.75), rgba(var(--pink-rgb),.95));
  color:var(--white);
  box-shadow: 0 10px 20px rgba(var(--black-rgb),.22);
}
.btn.secondary{background: rgba(var(--white-rgb),.08)}
.btn.danger{background: linear-gradient(75deg, rgba(255,59,48,.75), rgba(255,59,48,.95));}
.btn.full{width:100%;height:46px;border-radius:14px;font-size:16px;font-weight:900}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  background: rgba(var(--black-rgb),.22);
  border:1px solid var(--line);
  padding:8px 12px;border-radius:999px;
  color: var(--muted);font-size:13px;
}
.pill .dot{width:10px;height:10px;border-radius:99px;background:var(--success)}

.input, .select{
  width:100%;height:44px;padding:0 14px;border-radius: 12px;
  border:1px solid var(--line);background: rgba(var(--white-rgb),.08);
  color: var(--text);outline:none;
}
.select{appearance:none}
.field{margin-top:10px}
.label{font-size:13px;color:var(--muted);margin:0 0 6px 2px}
.row{display:flex;gap:10px}
.row > *{flex:1}
.smallLink{color: rgba(var(--white-rgb),.70); font-size:13px; text-align:right; margin-top:8px}

.list{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.item{
  display:flex;gap:10px;align-items:center;
  padding:12px 12px;border-radius: 14px;
  background: rgba(var(--white-rgb),.10);
  border: 1px solid rgba(var(--white-rgb),.14);
}
.avatar{width:40px;height:40px;border-radius:999px;background: rgba(var(--white-rgb),.20);flex:none;display:grid;place-items:center;font-weight:900}
.itemMain{flex:1;min-width:0}
.itemTitle{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itemMeta{margin-top:2px;color:var(--muted);font-size:13px}
.chev{opacity:.7;font-size:20px;flex:none}

.sectionTitleRow{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.sectionTitle{font-weight:900;font-size:18px}

.bottomNav{
  position:fixed;left:0;right:0;bottom:0;
  padding: 10px 10px calc(10px + var(--safe));
  background: rgba(var(--black-rgb),.25);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  display:flex;gap:6px;justify-content:space-between;
}
.navItem{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color: rgba(var(--white-rgb),.70);
  padding:8px 6px;border-radius: 14px;border:1px solid transparent;
  background: transparent;
}
.navItem .ico{font-size:18px}
.navItem span:last-child{font-size:12px;font-weight:800}
.navItem.active{
  color:var(--white);border-color: rgba(var(--white-rgb),.16);
  background: rgba(var(--pink-rgb),.18);
}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom: calc(92px + var(--safe));
  background: rgba(var(--black-rgb),.62);
  color:var(--white);padding:10px 12px;border-radius: 14px;
  border:1px solid rgba(var(--white-rgb),.14);
  opacity:0;transition:opacity .25s ease;
}
.toast.show{opacity:1}
.toast.success{background: rgba(var(--toast-success-rgb),.70)}
.toast.error{background: rgba(var(--toast-error-rgb),.70)}

/* --- Ajouts Sofit-inv (tables, inventaire) --- */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid rgba(var(--white-rgb),.14);
  border-radius: 14px;
  background: rgba(var(--white-rgb),.06);
}
.table th, .table td{
  padding:10px 10px;
  border-bottom:1px solid rgba(var(--white-rgb),.10);
  text-align:left;
  font-size:14px;
}
.table th{font-weight:900;color:rgba(var(--white-rgb),.85);font-size:12px;letter-spacing:.2px;text-transform:uppercase}
.table tr:last-child td{border-bottom:none}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  border:1px solid rgba(var(--white-rgb),.14);
  background: rgba(var(--black-rgb),.18);
  font-size:12px;color:rgba(var(--white-rgb),.80);
}
.badge.ok{background: rgba(20,120,80,.25)}
.badge.warn{background: rgba(255,214,10,.18)}
.badge.bad{background: rgba(160,40,70,.25)}

.invRow{display:flex;align-items:center;gap:10px;justify-content:space-between;}
.invLabel{font-weight:800}
.invCtrl{display:flex;align-items:center;gap:8px;}
.invCtrl button{
  width:38px;height:38px;border-radius:12px;
  border:1px solid rgba(var(--white-rgb),.18);
  background: rgba(var(--white-rgb),.08);
  color:var(--white);
}
.invCtrl input{
  width:68px;height:38px;border-radius:12px;text-align:center;
  border:1px solid rgba(var(--white-rgb),.18);
  background: rgba(var(--white-rgb),.08);
  color:var(--white);
}
.groupTitle{margin-top:10px;font-weight:900;opacity:.9}
.hr{height:1px;background:rgba(var(--white-rgb),.12);margin:10px 0}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;}

@media (max-width: 420px){
  .invCtrl input{width:58px}
}