/**
 * Andonick ERP-CRM 2026 v8
 * Feuille de style principale
 * ============================================================
 */


:root{
  --v:#7B2D8B;--vd:#5A1F68;--vm:#9B4DAB;--vl:#E8D5F0;--vb:#F5EDF8;
  --tl:#0F7B6C;--gr:#1A9E5A;--grl:#C8F0DC;
  --or:#D4690B;--orl:#FDEBD0;--rd:#B91C1C;--rdl:#FEE2E2;
  --bl:#1E293B;--bll:#E0F2FE;--navy:#1E3A8A;
  --w:#FFFFFF;--gl:#F9FAFB;--gm:#E5E7EB;--gd:#6B7280;--bk:#111827;
  --ink:#0F172A;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow:0 4px 16px rgba(0,0,0,.1);
  --shadow-lg:0 12px 40px rgba(0,0,0,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:#3B1252;min-height:100vh;color:var(--bk);-webkit-font-smoothing:antialiased}


/* ── NOUVEAUX MODULES V5 ──────────────────────────────────── */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.ph-left h2{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:4px}
.ph-sub{font-size:12px;color:var(--gd);font-style:italic}
.ph-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-primary{background:var(--v);color:white;border:none;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.btn-primary:hover{background:var(--vd);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--v);border:2px solid var(--v);padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.btn-outline:hover{background:var(--vl)}

/* KPI Row */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.kpi-card{background:white;border-radius:12px;padding:16px;box-shadow:var(--shadow-sm);border-left:4px solid var(--gm);text-align:center}
.kpi-card.kpi-blue{border-left-color:#2563EB}
.kpi-card.kpi-green{border-left-color:var(--gr)}
.kpi-card.kpi-orange{border-left-color:var(--or)}
.kpi-card.kpi-red{border-left-color:var(--rd)}
.kpi-card.kpi-purple{border-left-color:var(--v)}
.kc-val{font-size:22px;font-weight:800;color:var(--ink);margin-bottom:4px}
.kc-lbl{font-size:11px;color:var(--gd);font-weight:500;text-transform:uppercase;letter-spacing:.5px}

/* Pipeline Funnel */
.pipeline-funnel{display:flex;align-items:center;gap:6px;background:white;border-radius:12px;padding:16px 20px;margin-bottom:16px;box-shadow:var(--shadow-sm);flex-wrap:wrap;overflow-x:auto}
.funnel-step{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 16px;border-radius:8px;background:var(--gl);cursor:pointer;transition:all .2s;min-width:80px}
.funnel-step:hover{background:var(--vl);transform:translateY(-2px)}
.funnel-step.win{background:#DCFCE7}
.funnel-step.lost{background:#FEE2E2}
.fs-icon{font-size:20px}
.fs-label{font-size:11px;font-weight:600;color:var(--gd)}
.fs-count{font-size:20px;font-weight:800;color:var(--ink)}
.funnel-arrow{font-size:20px;color:var(--gm);flex-shrink:0}

/* Filter Bar */
.filter-bar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.search-input{flex:1;min-width:200px;padding:8px 12px;border:1px solid var(--gm);border-radius:8px;font-size:13px;font-family:inherit}
.search-input:focus{outline:none;border-color:var(--v)}
.filter-select{padding:8px 12px;border:1px solid var(--gm);border-radius:8px;font-size:13px;font-family:inherit;background:white;cursor:pointer}
.filter-select:focus{outline:none;border-color:var(--v)}

/* Table Wrap */
.table-wrap{overflow-x:auto;border-radius:10px;box-shadow:var(--shadow-sm)}
.data-table{width:100%;border-collapse:collapse;background:white;font-size:13px}
.data-table th{background:var(--ink);color:white;padding:10px 12px;text-align:left;font-weight:600;font-size:12px;white-space:nowrap;position:sticky;top:0;z-index:5}
.data-table td{padding:9px 12px;border-bottom:1px solid var(--gm);vertical-align:middle}
.data-table tr:hover td{background:var(--vb)}
.data-table tr:last-child td{border-bottom:none}

/* Status Badges */
.status-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.sb-green{background:#DCFCE7;color:#166534}
.sb-blue{background:#DBEAFE;color:#1E40AF}
.sb-orange{background:#FEF3C7;color:#92400E}
.sb-red{background:#FEE2E2;color:#991B1B}
.sb-gray{background:var(--gm);color:var(--gd)}
.sb-purple{background:var(--vl);color:var(--vd)}
.sb-yellow{background:#FEF9C3;color:#713F12}

/* Progress Bar */
.cycle-progress-bar{display:flex;align-items:center;gap:12px;background:white;border-radius:10px;padding:14px 20px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.cpb-label{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.cpb-track{flex:1;height:12px;background:var(--gm);border-radius:6px;overflow:hidden}
.cpb-fill{height:100%;background:linear-gradient(90deg,var(--gr),#22C55E);border-radius:6px;transition:width .5s ease}
.cpb-pct{font-size:16px;font-weight:800;color:var(--gr);white-space:nowrap}

/* AO Cycle Bar */
.ao-cycle-bar{display:flex;align-items:center;gap:4px;background:white;border-radius:10px;padding:12px 20px;margin-bottom:16px;box-shadow:var(--shadow-sm);flex-wrap:wrap;overflow-x:auto}
.acb-step{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;background:var(--gl);color:var(--gd);white-space:nowrap}
.acb-step.active{background:var(--v);color:white}
.acb-arrow{font-size:14px;color:var(--gm)}

/* Alertes */
.alert-section{margin-bottom:16px;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm)}
.as-header{padding:12px 16px;font-size:13px;font-weight:700;color:white}
.as-red{background:var(--rd)}
.as-orange{background:var(--or)}
.as-blue{background:#2563EB}
.as-purple{background:var(--v)}
.alert-list{background:white}
.alert-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--gm);font-size:13px}
.alert-item:last-child{border-bottom:none}
.alert-item:hover{background:var(--gl)}
.ai-ico{font-size:20px;flex-shrink:0}
.ai-text{flex:1}
.ai-action{color:var(--v);font-weight:600;font-size:12px;cursor:pointer;white-space:nowrap}
.empty-alert{padding:16px;text-align:center;color:var(--gd);font-size:13px}

/* Tabs Mini */
.tabs-mini{display:flex;gap:4px;margin-bottom:16px;background:var(--gl);padding:4px;border-radius:10px;width:fit-content}
.tab-mini{padding:8px 18px;border:none;background:transparent;font-size:13px;font-weight:600;cursor:pointer;border-radius:8px;color:var(--gd);font-family:inherit;transition:all .2s}
.tab-mini.active{background:white;color:var(--ink);box-shadow:var(--shadow-sm)}
.tab-mini:hover:not(.active){background:rgba(255,255,255,.5)}

/* Pointage */
.hebdo-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.ptab-content{animation:fadeIn .2s ease}
.ptg-input{width:60px;padding:4px 6px;border:1px solid var(--gm);border-radius:4px;font-size:12px;text-align:center;font-family:inherit}
.ptg-input:focus{outline:none;border-color:var(--v);background:var(--vb)}

/* Classement Podium */
.classement-podium{display:flex;justify-content:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.podium-card{background:white;border-radius:12px;padding:16px;text-align:center;min-width:130px;box-shadow:var(--shadow-sm)}
.podium-card:nth-child(1){border-top:3px solid gold;transform:scale(1.05)}
.podium-card:nth-child(2){border-top:3px solid silver}
.podium-card:nth-child(3){border-top:3px solid #CD7F32}
.pod-rank{font-size:24px;margin-bottom:6px}
.pod-name{font-size:13px;font-weight:700;color:var(--ink)}
.pod-ca{font-size:14px;font-weight:600;color:var(--v);margin:4px 0}
.pod-pct{font-size:12px;color:var(--gd)}

/* Action Buttons */
.action-btn{padding:4px 10px;border:none;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.ab-view{background:var(--bll);color:#1E40AF}
.ab-edit{background:var(--vl);color:var(--vd)}
.ab-del{background:var(--rdl);color:var(--rd)}
.ab-conv{background:#DCFCE7;color:#166534}
.ab-view:hover{background:#BFDBFE}
.ab-edit:hover{background:#D8B4FE}
.ab-del:hover{background:#FECACA}

/* Responsive Mobile */
@media (max-width:768px){
  .pipeline-funnel{gap:4px;padding:10px}
  .funnel-step{min-width:60px;padding:6px 8px}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .ph-actions{width:100%}
  .page-header{flex-direction:column}
  .filter-bar{flex-direction:column}
  .search-input{min-width:0}
  .data-table{font-size:11px}
  .data-table th,.data-table td{padding:6px 8px}
  .ao-cycle-bar{gap:2px}
  .acb-step{padding:4px 8px;font-size:11px}
  .classement-podium{gap:8px}
  .podium-card{min-width:100px;padding:12px}
}
@media (max-width:480px){
  .kpi-row{grid-template-columns:1fr 1fr}
  .kc-val{font-size:18px}
  .tabs-mini{flex-wrap:wrap}
}

/* Responsive idem sidebar */
@media (min-width:769px) and (max-width:900px){
  /* Tablet: sidebar collapsed, expands on hover */
  .sidebar{width:52px;overflow:hidden}
  .sidebar:hover{width:220px}
  .nav-item{padding:10px 0;justify-content:center}
  .sidebar:hover .nav-item{justify-content:flex-start;padding:10px 14px}
  .nav-group-label,.ni-badge,.nav-group-label{display:none}
  .sidebar:hover .nav-group-label,.sidebar:hover .ni-badge{display:block}
}

/* Reporting */
.reporting-section{background:white;border-radius:12px;padding:20px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.reporting-section h3{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--gm)}

/* Contrat SLA Breach */
.sla-breach{background:#FEE2E2;color:#991B1B;font-weight:700;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}

/* Cycle Bar générique */
.cycle-bar{display:flex;gap:4px;margin-bottom:16px;overflow-x:auto;padding:4px 0}
.cs{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;background:var(--gl);color:var(--gd);white-space:nowrap;border:2px solid transparent}
.cs.active{background:var(--v);color:white;border-color:var(--vd)}
.cs.done{background:#DCFCE7;color:#166534;border-color:#BBF7D0}

/* Contact Card view */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;padding:4px}
.contact-card{background:white;border-radius:12px;padding:16px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px;transition:transform .2s}
.contact-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.cc-header{display:flex;align-items:center;gap:12px}
.cc-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--v),var(--vm));display:flex;align-items:center;justify-content:center;color:white;font-size:16px;font-weight:700;flex-shrink:0}
.cc-name{font-size:14px;font-weight:700;color:var(--ink)}
.cc-company{font-size:12px;color:var(--gd)}
.cc-info{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.cci{font-size:12px;color:var(--gd);display:flex;align-items:center;gap:4px}
.cci-val{color:var(--ink);font-weight:500}
.cc-type{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700}
.cc-type-client{background:var(--bll);color:#1E40AF}
.cc-type-fourn{background:#FEF3C7;color:#92400E}

/* Modal overlay */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.modal-box{background:white;border-radius:16px;padding:28px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-box h3{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid var(--gm)}
.modal-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mf-full{grid-column:1/-1}
.form-label{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:4px;display:block}
.form-input,.form-select,.form-textarea{width:100%;padding:9px 12px;border:1.5px solid var(--gm);border-radius:8px;font-size:13px;font-family:inherit;transition:border .2s}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--v);box-shadow:0 0 0 3px var(--vb)}
.form-textarea{min-height:80px;resize:vertical}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--gm)}

/* ── TOPBAR ─────────────────────────────────────────────────── */
.topbar{
  background:linear-gradient(135deg,#3B0D55 0%,#5A1F68 50%,#6B2A7A 100%);
  display:flex;align-items:center;gap:0;
  height:58px;border-bottom:1px solid rgba(255,255,255,.1);
  position:sticky;top:0;z-index:300;
  box-shadow:0 2px 20px rgba(0,0,0,.3);
}
.tb-logo{
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;flex-shrink:0;
  border-right:1px solid rgba(255,255,255,.1);
}
.tb-logo img{width:40px;height:40px;object-fit:contain}
.tb-brand{padding:0 16px;border-right:1px solid rgba(255,255,255,.1)}
.tb-brand h1{color:white;font-size:13px;font-weight:800;letter-spacing:.3px}
.tb-brand span{color:rgba(255,255,255,.5);font-size:10px;font-weight:400}
.tb-tabs{display:flex;padding:0 8px;gap:2px;flex:1}
.tb-tab{
  padding:6px 16px;border:none;background:transparent;
  color:rgba(255,255,255,.55);font-size:12.5px;font-weight:600;
  cursor:pointer;transition:all .2s;border-radius:6px;
  font-family:inherit;display:flex;align-items:center;gap:6px;
}
.tb-tab:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.85)}
.tb-tab.active{background:rgba(255,255,255,.15);color:white;font-weight:700}
.tb-tab .badge{
  background:rgba(255,255,255,.2);color:white;
  font-size:9px;font-weight:800;padding:1px 6px;border-radius:10px;
}
.tb-tab.active .badge{background:var(--v);color:white}
.tb-actions{display:flex;gap:8px;padding:0 16px;align-items:center}
.tb-sync{
  display:flex;align-items:center;gap:6px;
  background:rgba(26,158,90,.15);border:1px solid rgba(26,158,90,.3);
  border-radius:6px;padding:4px 10px;color:#6EE7A8;font-size:10.5px;font-weight:600;
}
.tb-sync .dot{width:6px;height:6px;border-radius:50%;background:#22C55E;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}
.act-btn{
  padding:7px 14px;border:none;border-radius:7px;cursor:pointer;
  font-size:12px;font-weight:700;display:flex;align-items:center;gap:5px;
  transition:all .15s;font-family:inherit;white-space:nowrap;
}
.act-btn:hover{transform:translateY(-1px);filter:brightness(1.1)}
.act-btn:active{transform:translateY(0)}
.btn-pdf{background:var(--v);color:white;padding:8px 18px;font-size:13px;font-weight:800}
.btn-save{background:var(--gr);color:white}
.btn-rst{background:var(--or);color:white}
.btn-new{background:rgba(255,255,255,.1);color:white;border:1px solid rgba(255,255,255,.2);font-size:11px}

/* ── TABS ───────────────────────────────────────────────────── */
.tc{display:none}.tc.active{display:flex;flex-direction:column;flex:1}

/* ── CTRL BAR ───────────────────────────────────────────────── */
.ctrl-bar{
  background:white;padding:10px 24px;
  border-bottom:2px solid var(--vl);
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  box-shadow:var(--shadow-sm);
}
.cg{display:flex;flex-direction:column;gap:3px;min-width:145px}
.cg label{font-size:9px;font-weight:800;color:var(--vd);text-transform:uppercase;letter-spacing:.6px}
.cg select,.cg input[type=text],.cg input[type=date]{
  padding:6px 10px;border:1.5px solid var(--gm);border-radius:6px;
  font-size:12px;color:var(--bk);background:white;outline:none;
  transition:border .15s;min-width:155px;font-family:inherit;
}
.cg select:focus,.cg input:focus{border-color:var(--v);box-shadow:0 0 0 3px rgba(123,45,139,.08)}

/* ── HELP BAR ───────────────────────────────────────────────── */
.help-bar{
  padding:7px 24px;font-size:11px;color:var(--navy);
  background:linear-gradient(90deg,#EEF2FF,#F5EDF8);
  border-bottom:1px solid var(--vl);display:flex;align-items:center;gap:8px;
}

/* ── PAGE WRAPPER ───────────────────────────────────────────── */
.pw{
  display:flex;justify-content:center;padding:24px 16px 70px;
  background:radial-gradient(ellipse at top,#5A1F68 0%,#2D0A40 60%,#1A0526 100%);
  flex:1;
}

/* ── A4 ─────────────────────────────────────────────────────── */
.a4{
  width:800px;min-height:1130px;background:white;
  padding:32px 40px 32px;
  box-shadow:0 20px 80px rgba(0,0,0,.5);
  position:relative;
}
.a4::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--vd) 0%,var(--v) 50%,var(--vm) 100%);
}

/* DOC HEADER */
.dh{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--vl);
}
.hl{display:flex;align-items:flex-start;gap:16px}
.logo-doc{
  width:90px;height:90px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;overflow:hidden;
  border:1.5px solid var(--vl);
}
.logo-doc img{width:86px;height:86px;object-fit:contain}
.co h2{
  font-size:14px;font-weight:900;color:var(--vd);
  margin-bottom:3px;letter-spacing:.3px;
}
.co p{font-size:9px;color:var(--gd);line-height:1.75}
.co .co-highlight{color:var(--vd);font-weight:700}
.hr2{text-align:right;min-width:210px}
.doc-badge{
  display:inline-block;padding:5px 20px;border-radius:5px;
  font-size:20px;font-weight:900;letter-spacing:3px;
  color:white;margin-bottom:9px;
}
.mt{width:100%;border-collapse:collapse;font-size:10px}
.mt td{padding:2.5px 5px}
.mt td:first-child{color:var(--gd);text-align:right;font-weight:600;white-space:nowrap}
.mt td:last-child{font-weight:700;color:var(--bk)}
.num-v{font-size:13px;font-weight:900}

/* CLIENT BLOCKS */
.cs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.cblk{
  border-radius:7px;padding:11px 13px;border:1.5px solid var(--gm);
  background:var(--gl);
}
.bt{
  font-size:8.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.9px;border-bottom:1px solid var(--vl);
  padding-bottom:4px;margin-bottom:7px;color:var(--v);
}
.cn{font-size:12.5px;font-weight:800;color:var(--bk);margin-bottom:3px}
.cblk p{font-size:9.5px;color:var(--gd);line-height:1.75}
.id-row{
  display:flex;align-items:center;gap:7px;
  background:var(--vb);border-radius:5px;
  padding:4px 8px;border:1.5px solid var(--vl);margin-bottom:6px;
}
.id-lbl{font-size:8.5px;font-weight:700;color:var(--vd);white-space:nowrap}
.id-sel{
  border:none;background:transparent;font-size:11px;font-weight:800;
  color:var(--v);outline:none;flex:1;cursor:pointer;font-family:inherit;
}
.id-badge{
  background:var(--v);color:white;font-size:8.5px;
  font-weight:800;padding:2px 7px;border-radius:10px;
}

/* ARTICLES TABLE */
.at{width:100%;border-collapse:collapse;font-size:11px}
.at thead tr{background:var(--bl);color:white}
.at thead th{
  padding:8px 7px;text-align:center;font-size:9px;font-weight:700;
  border:1px solid rgba(255,255,255,.1);letter-spacing:.3px;
}
.at thead th.tl{text-align:left}
.at tbody tr{border-bottom:1px solid #F1F5F9}
.at tbody tr:nth-child(even){background:#FAFBFC}
.at tbody tr.sw{background:#FFF7ED!important}
.at tbody tr.sr{background:#FEF2F2!important}
.at td{padding:5px 7px;border:1px solid #F1F5F9;vertical-align:middle}
.at td.tc_{text-align:center}.at td.tr_{text-align:right}
.at td.ref select{
  color:var(--v);font-weight:700;font-size:10px;border:none;
  background:transparent;width:100%;outline:none;cursor:pointer;font-family:inherit;
}
.at td input{
  border:none;background:transparent;font-size:11px;
  font-family:inherit;color:var(--bk);outline:none;width:100%;
}
.at td input:focus{background:rgba(123,45,139,.06);border-radius:3px}
.at td.qty input{width:42px;text-align:center}
.at td.rem input{width:34px;text-align:center}
.at td.mht{font-weight:800;color:var(--navy);text-align:right}
.sb{font-size:8px;font-weight:700;padding:2px 6px;border-radius:10px}
.sb.ok{background:#DCFCE7;color:#15803D}
.sb.wn{background:#FEF3C7;color:#92400E}
.sb.rp{background:#FEE2E2;color:#991B1B}
.add-row td{background:var(--vb)!important;text-align:center;padding:5px}
.add-row button{
  padding:4px 14px;border-radius:6px;border:1.5px dashed var(--vm);
  background:transparent;color:var(--v);font-size:10.5px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .15s;
}
.add-row button:hover{background:var(--vb)}
.del-btn{
  border:none;background:none;cursor:pointer;color:var(--rd);
  font-size:12px;padding:2px;opacity:.4;transition:opacity .15s;
}
.del-btn:hover{opacity:1}
.fcfa{font-size:8px;color:var(--gd);font-weight:400}

/* TOTALS */
.tw{display:flex;justify-content:flex-end;border-top:2px solid var(--gm)}
.tt{width:290px;border-collapse:collapse;font-size:11px}
.tt tr td{padding:5px 10px;border-bottom:1px solid #F1F5F9}
.tt tr td:first-child{color:var(--gd);font-weight:600;text-align:right}
.tt tr td:last-child{text-align:right;font-weight:700;min-width:125px}
.tt .rht{background:var(--vl)}
.tt .rht td:first-child{color:var(--vd);font-weight:800}
.tt .rht td:last-child{color:var(--vd);font-size:12.5px}
.tt .rtva td:last-child{color:var(--gd)}
.tt .rttc{background:var(--bl)}
.tt .rttc td{padding:9px 10px;border-bottom:none}
.tt .rttc td:first-child{color:white;font-size:11px;font-weight:800}
.tt .rttc td:last-child{color:white;font-size:15px;font-weight:900}
.rrem td:last-child input{
  width:52px;text-align:right;border:1px solid var(--gm);
  border-radius:5px;padding:2px 6px;font-size:11px;background:var(--vb);
  font-family:inherit;
}

/* DOC FOOTER */
.df{
  margin-top:16px;display:grid;grid-template-columns:1fr 1fr;
  gap:14px;padding-top:12px;border-top:1px solid var(--gm);
}
.fb h4{
  font-size:9px;font-weight:800;color:var(--v);
  text-transform:uppercase;letter-spacing:.8px;
  border-bottom:1px solid var(--vl);padding-bottom:4px;margin-bottom:6px;
}
.fb p,.fb li{font-size:9px;color:var(--gd);line-height:1.8}
.fb ul{padding-left:12px}
.fb strong{color:var(--bk)}
.sig-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.sig{border:1px dashed var(--gm);border-radius:5px;padding:7px;min-height:50px}
.sig label{font-size:8.5px;font-weight:700;color:var(--gd);display:block}
.lgl{margin-top:12px;padding:7px 11px;background:var(--gl);border-radius:5px;font-size:7.5px;color:var(--gd);line-height:1.75;border-top:3px solid var(--vl)}
.legal{
  margin-top:12px;padding:7px 11px;background:var(--gl);border-radius:5px;
  font-size:7.5px;color:var(--gd);line-height:1.75;border-top:3px solid var(--vl);
}
.btm-bar{
  margin-top:9px;color:white;text-align:center;padding:6px;
  font-size:8.5px;border-radius:4px;font-weight:600;
  background:linear-gradient(90deg,var(--vd),var(--v));
}

/* DOC ACTIONS (hidden when printing) */
.da{margin:13px 0 0;display:flex;gap:9px;padding:10px;background:var(--vb);border-radius:8px;border:1.5px dashed var(--vl);align-items:center}
.dp,.ds,.dr{padding:9px 18px;border:none;border-radius:7px;cursor:pointer;font-size:12px;font-weight:800;display:flex;align-items:center;gap:6px;transition:all .15s;font-family:inherit;color:white}
.ds{background:var(--gr)} .dr{background:var(--or)}
.doc-acts{
  margin:13px 0 0;display:flex;gap:9px;padding:10px;
  background:var(--vb);border-radius:8px;
  border:1.5px dashed var(--vl);align-items:center;
}
.da{
  padding:9px 18px;border:none;border-radius:7px;cursor:pointer;
  font-size:12px;font-weight:800;display:flex;align-items:center;
  gap:6px;transition:all .15s;font-family:inherit;
}
.da:hover{transform:translateY(-1px);filter:brightness(1.08)}
.da-pdf{background:var(--v);color:white;flex:1;justify-content:center;font-size:13px}
.da-save{background:var(--gr);color:white}
.da-rst{background:var(--or);color:white}
.da-hint{font-size:9px;color:var(--gd);font-style:italic;margin-left:auto}

/* ── DASHBOARD ──────────────────────────────────────────────── */
.dash{padding:24px;max-width:1200px;margin:0 auto;width:100%}
.dash-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;margin-bottom:24px;
}
.kpi{
  background:white;border-radius:12px;padding:18px;
  box-shadow:var(--shadow);border-top:4px solid var(--v);
  position:relative;overflow:hidden;
}
.kpi::after{
  content:'';position:absolute;top:-20px;right:-20px;
  width:80px;height:80px;border-radius:50%;
  background:rgba(123,45,139,.06);
}
.kpi .kpi-label{font-size:10px;font-weight:700;color:var(--gd);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.kpi .kpi-val{font-size:26px;font-weight:900;color:var(--vd);line-height:1}
.kpi .kpi-sub{font-size:10.5px;color:var(--gd);margin-top:3px}
.kpi.green{border-top-color:var(--gr)} .kpi.green .kpi-val{color:var(--gr)}
.kpi.orange{border-top-color:var(--or)} .kpi.orange .kpi-val{color:var(--or)}
.kpi.blue{border-top-color:var(--navy)} .kpi.blue .kpi-val{color:var(--navy)}

.section-card{
  background:white;border-radius:12px;padding:20px;
  box-shadow:var(--shadow);margin-bottom:16px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.section-card h3{
  font-size:13px;font-weight:800;color:var(--vd);
  margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.section-card h3 .cnt{
  background:var(--vb);color:var(--v);font-size:10px;
  font-weight:800;padding:2px 8px;border-radius:10px;
}

/* DATA TABLES */
.dtbl{width:100%;border-collapse:collapse;font-size:12px}
.dtbl thead tr{background:var(--vb)}
.dtbl thead th{
  padding:9px 12px;text-align:left;font-size:10px;
  font-weight:800;color:var(--vd);letter-spacing:.3px;
  border-bottom:2px solid var(--vl);
}
.dtbl tbody tr{border-bottom:1px solid #F1F5F9;transition:background .1s}
.dtbl tbody tr:hover{background:#FAFBFC}
.dtbl td{padding:9px 12px;color:var(--bk)}
.pill{
  display:inline-block;padding:2px 9px;border-radius:10px;
  font-size:9.5px;font-weight:700;
}
.pill-v{background:var(--vb);color:var(--vd)}
.pill-g{background:#DCFCE7;color:#15803D}
.pill-o{background:#FEF3C7;color:#92400E}
.pill-r{background:#FEE2E2;color:#991B1B}
.pill-b{background:#EFF6FF;color:#1E40AF}

/* ADD FORMS */
.form-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  padding:16px;background:var(--gl);border-radius:8px;
  border:1.5px dashed var(--gm);margin-top:14px;
}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group label{font-size:10px;font-weight:700;color:var(--vd)}
.form-group input,.form-group select{
  padding:7px 10px;border:1.5px solid var(--gm);border-radius:6px;
  font-size:12px;font-family:inherit;outline:none;transition:border .15s;
}
.form-group input:focus,.form-group select:focus{border-color:var(--v)}
.form-btn{
  padding:8px 16px;border:none;border-radius:6px;cursor:pointer;
  font-size:12px;font-weight:700;font-family:inherit;transition:all .15s;
}
.form-btn-add{background:var(--v);color:white}
.form-btn-add:hover{background:var(--vd)}
.form-btn-cancel{background:var(--gl);color:var(--gd);border:1px solid var(--gm)}
.toggle-form{
  padding:7px 14px;border:1.5px solid var(--vl);border-radius:6px;
  background:transparent;color:var(--v);font-size:11.5px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .15s;
  display:flex;align-items:center;gap:6px;
}
.toggle-form:hover{background:var(--vb)}
.edit-btn{
  padding:3px 8px;border:1px solid var(--vl);border-radius:4px;
  background:transparent;color:var(--v);font-size:10px;font-weight:600;
  cursor:pointer;font-family:inherit;
}
.edit-btn:hover{background:var(--vb)}
.del-row-btn{
  padding:3px 8px;border:1px solid var(--rdl);border-radius:4px;
  background:transparent;color:var(--rd);font-size:10px;font-weight:600;
  cursor:pointer;font-family:inherit;
}
.del-row-btn:hover{background:#FEE2E2}

/* ── SAVED LIST ─────────────────────────────────────────────── */
.saved-section{padding:20px;max-width:1000px;margin:0 auto;width:100%}
.doc-row{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:white;border-radius:8px;margin-bottom:6px;
  box-shadow:var(--shadow-sm);border:1px solid var(--gm);
  transition:box-shadow .15s;
}
.doc-row:hover{box-shadow:var(--shadow)}
.doc-num{font-size:11.5px;font-weight:800;color:var(--v);min-width:100px}
.doc-client{font-size:11.5px;color:var(--bk);flex:1}
.doc-ttc{font-size:11.5px;font-weight:700;color:var(--navy);min-width:120px;text-align:right}
.doc-date{font-size:10px;color:var(--gd);min-width:75px;text-align:right}
.doc-load{padding:4px 10px;border:1px solid var(--v);border-radius:5px;background:transparent;color:var(--v);font-size:10px;font-weight:700;cursor:pointer;font-family:inherit}
.doc-load:hover{background:var(--vb)}
.doc-del{padding:4px 8px;border:1px solid var(--rdl);border-radius:5px;background:transparent;color:var(--rd);font-size:10px;cursor:pointer;font-family:inherit}
.doc-del:hover{background:#FEE2E2}

/* ── TOAST ─────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:20px;right:20px;z-index:9999;
  background:white;border-radius:12px;padding:14px 18px;
  box-shadow:0 8px 32px rgba(0,0,0,.2);border-left:4px solid var(--gr);
  min-width:270px;transform:translateY(100px);opacity:0;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  display:flex;align-items:flex-start;gap:10px;
}
.toast.show{transform:translateY(0);opacity:1}
.t-ico{font-size:18px;flex-shrink:0}
.t-ttl{font-size:12.5px;font-weight:800;color:var(--bk);margin-bottom:2px}
.t-msg{font-size:11px;color:var(--gd);line-height:1.5}

/* ── PRINT ─────────────────────────────────────────────────── */
@media print{
  @page{size:A4 portrait;margin:10mm 14mm 10mm 14mm}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body,html{background:none!important}
  .topbar,.ctrl-bar,.help-bar,.add-row,.doc-acts,
  .del-btn,.del-col,.stk-col{display:none!important}
  .tc{display:none!important}
  .tc.active.print-me{display:flex!important;flex-direction:column}
  .pw{display:block!important;padding:0!important;background:none!important}
  .a4{width:100%!important;min-height:0!important;padding:0!important;box-shadow:none!important}
  .a4::before{display:none!important}
  .at td input,.at td select,input,select{border:none!important;background:transparent!important}
}

/* ═══════════════════════════════════════════════════════
   AUTH SYSTEM
═══════════════════════════════════════════════════════ */
#auth-overlay{
  position:fixed;inset:0;z-index:9000;
  background:linear-gradient(135deg,#2D0A40 0%,#5A1F68 50%,#3B1252 100%);
  display:flex;align-items:center;justify-content:center;
}
.auth-card{
  background:white;border-radius:18px;padding:40px 44px;
  width:420px;box-shadow:0 24px 80px rgba(0,0,0,.45);
  position:relative;overflow:hidden;
}
.auth-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--vd),var(--v),var(--vm));
}
.auth-logo{
  width:72px;height:72px;background:var(--v);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;box-shadow:0 6px 24px rgba(123,45,139,.4);
  overflow:hidden;
}
.auth-logo img{width:100%;height:100%;object-fit:contain}
.auth-card h1{
  text-align:center;font-size:20px;font-weight:900;
  color:var(--vd);margin-bottom:4px;
}
.auth-card .auth-sub{
  text-align:center;font-size:12px;color:var(--gd);margin-bottom:28px;
}
.auth-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.auth-field label{
  font-size:10px;font-weight:800;color:var(--vd);
  text-transform:uppercase;letter-spacing:.6px;
}
.auth-field input{
  padding:11px 14px;border:2px solid var(--gm);border-radius:8px;
  font-size:13px;font-family:inherit;outline:none;transition:border .15s;
  color:var(--bk);background:var(--gl);
}
.auth-field input:focus{border-color:var(--v);background:var(--vb)}
.auth-btn{
  width:100%;padding:13px;background:var(--v);color:white;
  border:none;border-radius:9px;font-size:14px;font-weight:800;
  cursor:pointer;font-family:inherit;transition:all .2s;margin-top:6px;
}
.auth-btn:hover{background:var(--vd);transform:translateY(-1px)}
.auth-btn:active{transform:translateY(0)}
.auth-error{
  background:var(--rdl);color:var(--rd);border-radius:7px;
  padding:9px 12px;font-size:11.5px;font-weight:600;
  margin-top:10px;display:none;text-align:center;
}
.auth-error.show{display:block}
.auth-footer{
  text-align:center;margin-top:18px;font-size:10px;color:var(--gd);
}
/* Role badge in topbar */
.role-badge{
  padding:3px 10px;border-radius:12px;font-size:10px;font-weight:800;
  letter-spacing:.3px;
}
.role-admin{background:var(--v);color:white}
.role-user{background:var(--tl);color:white}
.role-guest{background:var(--or);color:white}
.role-superadmin{background:#3D0D50;color:white;border:1px solid var(--vm)}
/* User info in topbar */
.user-info{
  display:flex;align-items:center;gap:7px;
  padding:4px 10px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);border-radius:7px;
  cursor:pointer;transition:background .15s;
}
.user-info:hover{background:rgba(255,255,255,.18)}
.user-avatar{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:white;flex-shrink:0;
}
.user-name{font-size:11px;font-weight:700;color:white}
/* Admin panel */
.admin-panel{
  position:fixed;top:64px;right:16px;z-index:500;
  background:white;border-radius:12px;padding:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.2);min-width:220px;
  border-top:3px solid var(--v);display:none;
}
.admin-panel.show{display:block}
.admin-panel h4{
  font-size:11px;font-weight:800;color:var(--vd);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;
}
.admin-item{
  display:flex;align-items:center;gap:8px;padding:7px 8px;
  border-radius:6px;cursor:pointer;transition:background .15s;
  font-size:12px;font-weight:600;color:var(--bk);
}
.admin-item:hover{background:var(--vb)}
.admin-item.danger{color:var(--rd)}
.admin-item.danger:hover{background:var(--rdl)}
/* Sheet connect modal */
#sheet-modal{
  position:fixed;inset:0;z-index:8000;
  background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;
}
#sheet-modal.show{display:flex}
.sheet-modal-card{
  background:white;border-radius:14px;padding:32px 36px;
  width:520px;box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.sheet-modal-card h3{
  font-size:16px;font-weight:900;color:var(--vd);margin-bottom:6px;
}
.sheet-modal-card p{font-size:12px;color:var(--gd);margin-bottom:20px;line-height:1.6}
.sheet-input{
  width:100%;padding:10px 13px;border:2px solid var(--gm);border-radius:7px;
  font-size:12px;font-family:inherit;outline:none;margin-bottom:10px;
}
.sheet-input:focus{border-color:var(--v)}
.sheet-btns{display:flex;gap:10px;margin-top:6px}
.sheet-btn-conn{
  flex:1;padding:10px;background:var(--v);color:white;border:none;
  border-radius:7px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;
}
.sheet-btn-conn:hover{background:var(--vd)}
.sheet-btn-cancel{
  padding:10px 16px;background:var(--gl);color:var(--gd);
  border:1px solid var(--gm);border-radius:7px;font-size:13px;
  font-weight:600;cursor:pointer;font-family:inherit;
}
.sheet-status{
  margin-top:10px;padding:9px 12px;border-radius:6px;
  font-size:11.5px;font-weight:600;display:none;
}
.sheet-status.ok{background:var(--grl);color:#1A5E30;display:block}
.sheet-status.err{background:var(--rdl);color:var(--rd);display:block}
.sheet-status.loading{background:var(--bll);color:var(--navy);display:block}
/* Permission locks */
.locked{opacity:.4;pointer-events:none;cursor:not-allowed!important}
.perm-hidden{display:none!important}


/* ═══════════════════════════════════════════════
   EMAIL SYSTEM
═══════════════════════════════════════════════ */
/* Email modal */
#email-modal{
  position:fixed;inset:0;z-index:8200;
  background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;
}
#email-modal.show{display:flex}
.email-card{
  background:white;border-radius:14px;padding:28px 34px;
  width:520px;box-shadow:0 20px 60px rgba(0,0,0,.3);
  position:relative;overflow:hidden;
}
.email-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--vd),var(--v),var(--vm));
}
.email-card h3{
  font-size:16px;font-weight:900;color:var(--vd);
  margin-bottom:5px;display:flex;align-items:center;gap:8px;
}
.email-card .sub{font-size:11.5px;color:var(--gd);margin-bottom:20px;line-height:1.5}
.ef{display:flex;flex-direction:column;gap:4px;margin-bottom:13px}
.ef label{font-size:10px;font-weight:800;color:var(--vd);text-transform:uppercase;letter-spacing:.5px}
.ef input,.ef textarea,.ef select{
  padding:9px 12px;border:1.5px solid var(--gm);border-radius:7px;
  font-size:12.5px;font-family:inherit;outline:none;transition:border .15s;
  color:var(--bk);background:var(--gl);resize:vertical;
}
.ef input:focus,.ef textarea:focus,.ef select:focus{border-color:var(--v);background:var(--vb)}
.email-btns{display:flex;gap:9px;margin-top:6px}
.ebtn-send{
  flex:1;padding:11px;background:var(--v);color:white;border:none;
  border-radius:8px;font-size:13px;font-weight:800;cursor:pointer;
  font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px;
}
.ebtn-send:hover{background:var(--vd);transform:translateY(-1px)}
.ebtn-send:disabled{background:var(--gm);cursor:not-allowed;transform:none}
.ebtn-cancel{
  padding:11px 16px;background:var(--gl);color:var(--gd);border:1px solid var(--gm);
  border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
}
.email-status{
  margin-top:10px;padding:9px 12px;border-radius:6px;
  font-size:11.5px;font-weight:600;display:none;
}
.email-status.ok{background:var(--grl);color:#1A5E30;display:block}
.email-status.err{background:var(--rdl);color:var(--rd);display:block}
.email-status.loading{background:var(--bll);color:var(--navy);display:block}

/* EmailJS config banner */
.emailjs-banner{
  background:var(--orl);border:1.5px solid #FAD7A0;border-radius:8px;
  padding:10px 13px;margin-bottom:14px;font-size:11px;color:#7B3F00;
  display:none;
}
.emailjs-banner.show{display:block}
.emailjs-banner a{color:var(--or);font-weight:700}

/* Forgot password modal */
#forgot-modal{
  position:fixed;inset:0;z-index:9100;
  background:rgba(0,0,0,.5);display:none;
  align-items:center;justify-content:center;
}
#forgot-modal.show{display:flex}
.forgot-card{
  background:white;border-radius:14px;padding:28px 34px;
  width:420px;box-shadow:0 16px 48px rgba(0,0,0,.3);
}
.forgot-card h3{font-size:15px;font-weight:900;color:var(--vd);margin-bottom:5px}
.forgot-card p{font-size:11.5px;color:var(--gd);margin-bottom:18px;line-height:1.6}

/* Send email button on doc */
.btn-email-doc{
  padding:9px 18px;border:none;border-radius:6px;cursor:pointer;
  font-size:12px;font-weight:800;display:flex;align-items:center;
  gap:6px;transition:all .15s;font-family:inherit;
  background:#1A237E;color:white;
}
.btn-email-doc:hover{background:#0D1B6E;transform:translateY(-1px)}

/* EmailJS setup modal */
#emailjs-setup-modal{
  position:fixed;inset:0;z-index:8300;
  background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;
}
#emailjs-setup-modal.show{display:flex}
.setup-card{
  background:white;border-radius:14px;padding:28px 34px;
  width:560px;max-height:85vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.setup-card h3{font-size:16px;font-weight:900;color:var(--vd);margin-bottom:6px}
.setup-step{
  display:flex;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--gm);
}
.setup-step:last-child{border-bottom:none}
.step-num{
  width:26px;height:26px;border-radius:50%;background:var(--v);
  color:white;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.step-txt{font-size:11.5px;color:var(--bk);line-height:1.6}
.step-txt strong{color:var(--vd)}
.step-txt code{
  background:var(--bll);color:var(--navy);padding:1px 6px;
  border-radius:4px;font-size:10.5px;font-family:monospace;
}


/* Settings fields */
.sf{display:flex;flex-direction:column;gap:4px}
.sl{font-size:10px;font-weight:800;color:var(--vd);text-transform:uppercase;letter-spacing:.5px}
.si{padding:9px 12px;border:1.5px solid var(--gm);border-radius:7px;
    font-size:12.5px;font-family:inherit;outline:none;transition:border .15s;
    color:var(--bk);background:var(--gl);resize:vertical;}
.si:focus{border-color:var(--v);background:var(--vb)}


/* ═══════════════════════════════════════════════════════
   BONS DE COMMANDE / LIVRAISON / FOURNISSEURS
═══════════════════════════════════════════════════════ */
/* Doc BC — same base as A4 but with teal accent */
.a4-bc{
  width:800px;min-height:1123px;background:white;
  padding:32px 40px;box-shadow:0 12px 48px rgba(0,0,0,.45);
  position:relative;font-size:11.5px;
}
.a4-bc::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#0A5A50,var(--tl),#1DB88A);
}
.a4-bl::before{
  background:linear-gradient(90deg,#1A237E,#2563EB,#3B82F6);
}
.a4-frs::before{
  background:linear-gradient(90deg,#92400E,var(--or),#F59E0B);
}
/* Tab content flex */
.tab-doc-wrap{
  display:flex;justify-content:center;padding:22px 16px 70px;
  background:radial-gradient(ellipse at top,#5A1F68 0%,#2D0A40 60%,#1A0526 100%);
  flex:1;
}
/* BC ctrl bar */
.bc-ctrl{
  background:white;padding:10px 24px;border-bottom:2px solid #D1FAE5;
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.bc-ctrl .cg select,.bc-ctrl .cg input{border-color:#A7F3D0}
.bc-ctrl .cg select:focus,.bc-ctrl .cg input:focus{border-color:var(--tl)}
/* BC type toggle */
.type-toggle{
  display:flex;gap:6px;align-items:center;
  background:#F0FDF4;border:1.5px solid #A7F3D0;
  border-radius:8px;padding:5px 8px;
}
.type-btn{
  padding:5px 14px;border:none;border-radius:6px;cursor:pointer;
  font-size:11.5px;font-weight:700;font-family:inherit;transition:all .15s;
  background:transparent;color:var(--gd);
}
.type-btn.active{background:var(--tl);color:white}
/* Delivery address box */
.livraison-box{
  background:#F0FDF4;border:1.5px solid #A7F3D0;border-radius:8px;
  padding:12px 14px;margin-bottom:14px;
}
.livraison-box h4{
  font-size:9px;font-weight:800;color:var(--tl);text-transform:uppercase;
  letter-spacing:.7px;margin-bottom:8px;
}
.livraison-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;
}
.lv-field{display:flex;flex-direction:column;gap:3px}
.lv-field label{font-size:8.5px;font-weight:700;color:var(--gd);text-transform:uppercase}
.lv-field input,.lv-field select,.lv-field textarea{
  padding:6px 9px;border:1.5px solid var(--gm);border-radius:5px;
  font-size:11.5px;font-family:inherit;outline:none;
  transition:border .15s;background:white;
}
.lv-field input:focus,.lv-field select:focus{border-color:var(--tl)}
/* Fournisseurs table */
.frs-card{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:white;border-radius:8px;margin-bottom:7px;
  box-shadow:0 2px 8px rgba(0,0,0,.07);border:1.5px solid var(--gm);
  transition:box-shadow .15s;
}
.frs-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}
.frs-avatar{
  width:42px;height:42px;border-radius:10px;background:var(--or);
  display:flex;align-items:center;justify-content:center;
  color:white;font-size:14px;font-weight:900;flex-shrink:0;
}
.frs-nom{font-size:13px;font-weight:800;color:var(--bk);margin-bottom:2px}
.frs-info{font-size:10.5px;color:var(--gd);line-height:1.6}
.note-stars{color:#F59E0B;font-size:13px}
/* Status pills */
.pill-bc-cli{background:#D1FAE5;color:#065F46}
.pill-bc-frs{background:#FEF3C7;color:#92400E}
.pill-bl-liv{background:#DBEAFE;color:#1E40AF}
.pill-bl-rec{background:#EDE9FE;color:#5B21B6}
/* BC doc header accent */
.bc-doc-badge-cli{background:var(--tl);color:white}
.bc-doc-badge-frs{background:var(--or);color:white}
.bc-doc-badge-bl{background:#1E40AF;color:white}


/* Employes */
.emp-avatar{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:white;flex-shrink:0;
}


/* Edit modal fields */
.em-field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.em-field label{font-size:10px;font-weight:800;color:var(--vd);
                text-transform:uppercase;letter-spacing:.5px}
.em-field input,.em-field select,.em-field textarea{
  padding:9px 12px;border:1.5px solid var(--gm);border-radius:7px;
  font-size:12.5px;font-family:inherit;outline:none;transition:border .15s;
  color:var(--bk);background:var(--gl);resize:vertical}
.em-field input:focus,.em-field select:focus,.em-field textarea:focus{
  border-color:var(--v);background:var(--vb)}
.em-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Edit button */
.edit-item-btn{
  padding:3px 9px;border:1px solid var(--vl);border-radius:5px;
  background:transparent;color:var(--v);font-size:10px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .15s;margin-right:4px}
.edit-item-btn:hover{background:var(--vb)}


/* ══ NOUVELLE NAVIGATION — SIDEBAR ════════════════════════════ */
body{display:flex;flex-direction:column;min-height:100vh;background:#F0EBF5}

/* Topbar épurée */
.topbar{
  height:52px;min-height:52px;
  background:linear-gradient(90deg,#3B0D55 0%,#5A1F68 60%,#6B2A7A 100%);
  display:flex;align-items:center;gap:0;
  border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky;top:0;z-index:400;
  box-shadow:0 2px 16px rgba(0,0,0,.3);
  flex-shrink:0;
}
.tb-logo{
  width:52px;height:52px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;
  border-right:1px solid rgba(255,255,255,.08);
}
.tb-logo img{width:34px;height:34px;object-fit:contain}
.tb-brand{padding:0 14px;border-right:1px solid rgba(255,255,255,.08);flex-shrink:0}
.tb-brand h1{color:white;font-size:12.5px;font-weight:800;letter-spacing:.2px;line-height:1.2}
.tb-brand span{color:rgba(255,255,255,.45);font-size:9.5px}

/* Centre topbar : recherche */
.tb-center{flex:1;display:flex;align-items:center;justify-content:center;padding:0 16px}
.search-wrap{position:relative;width:100%;max-width:420px}
.search-wrap input{
  width:100%;padding:7px 14px 7px 36px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  border-radius:20px;font-size:12px;color:white;outline:none;
  font-family:inherit;transition:all .2s;
}
.search-wrap input::placeholder{color:rgba(255,255,255,.45)}
.search-wrap input:focus{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);width:100%}
.search-wrap .si{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  font-size:13px;pointer-events:none;opacity:.6;
}

/* Droite topbar */
.tb-right{display:flex;align-items:center;gap:6px;padding:0 12px;flex-shrink:0}
.sync-pill{
  display:flex;align-items:center;gap:5px;
  background:rgba(26,158,90,.12);border:1px solid rgba(26,158,90,.25);
  border-radius:20px;padding:3px 10px;font-size:10px;color:#6EE7A8;font-weight:700;
}
.sync-pill .dot{width:5px;height:5px;border-radius:50%;background:#22C55E;
               animation:pulse 2s infinite}

/* LAYOUT principal */
.app-shell{display:flex;flex:1;overflow:hidden;height:calc(100vh - 52px)}

/* SIDEBAR */
.sidebar{
  width:220px;flex-shrink:0;
  background:linear-gradient(180deg,#2D0840 0%,#3D1155 100%);
  overflow-y:auto;overflow-x:hidden;
  border-right:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;
}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}

/* Groupe de navigation */
.nav-group{padding:16px 10px 4px}
.nav-group-label{
  font-size:8.5px;font-weight:800;color:rgba(255,255,255,.35);
  text-transform:uppercase;letter-spacing:1.2px;
  padding:0 8px;margin-bottom:4px;
}
.nav-item{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:8px;cursor:pointer;
  color:rgba(255,255,255,.65);font-size:12px;font-weight:600;
  transition:all .15s;border:none;background:transparent;
  font-family:inherit;width:100%;text-align:left;
  position:relative;
}
.nav-item:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.9)}
.nav-item.active{
  background:rgba(255,255,255,.14);color:white;font-weight:700;
}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:60%;background:var(--vm);border-radius:0 2px 2px 0;
}
.nav-item .ni-ico{font-size:15px;flex-shrink:0;width:20px;text-align:center}
.nav-item .ni-badge{
  margin-left:auto;background:rgba(255,255,255,.15);color:white;
  font-size:9px;font-weight:800;padding:1px 6px;border-radius:10px;
  min-width:18px;text-align:center;
}
.nav-item.active .ni-badge{background:var(--v);color:white}
.nav-sep{height:1px;background:rgba(255,255,255,.06);margin:8px 10px}

/* SETTINGS at bottom of sidebar */
.nav-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.06);padding:10px}

/* CONTENT AREA */
.app-content{
  flex:1;overflow-y:auto;overflow-x:hidden;
  background:radial-gradient(ellipse at top,#5A1F68 0%,#2D0A40 60%,#1A0526 100%);
  display:flex;flex-direction:column;
}
.tc{display:none;flex-direction:column;flex:1;min-height:0}
.tc.active{display:flex}

/* Override old .pw and A4 padding */
.pw{
  display:flex;justify-content:center;
  padding:20px 16px 60px;flex:1;background:transparent;
}

/* BC subtype tabs */
.bc-subtabs{
  display:flex;gap:0;background:rgba(255,255,255,.05);
  border-radius:8px;overflow:hidden;margin:10px 16px 0;
  border:1px solid rgba(255,255,255,.1);
  width:fit-content;
}
.bc-subtab{
  padding:7px 20px;border:none;background:transparent;
  color:rgba(255,255,255,.6);font-size:11.5px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .15s;
}
.bc-subtab.active{background:rgba(255,255,255,.15);color:white}

/* Page header inside content */
.page-hdr{
  padding:16px 22px 0;display:flex;align-items:center;
  justify-content:space-between;
}
.page-hdr h2{
  font-size:18px;font-weight:900;color:white;display:flex;align-items:center;gap:9px;
}
.page-hdr p{font-size:11px;color:rgba(255,255,255,.5);margin-top:2px}


/* ═══ SETTINGS TAB RESPONSIVE ══════════════════════════════════════ */
@media (max-width: 768px) {
  .stab-btn { padding: 7px 10px !important; font-size: 11px !important; }
  #stab-societe input, #stab-societe select,
  #stab-sync input, #stab-sync select,
  #stab-docs input, #stab-email input, #stab-email select,
  #stab-security input, #stab-referentiels textarea {
    font-size: 16px !important; /* Prevent iOS zoom */
  }
  #stab-societe [style*="grid-template-columns:1fr 1fr"],
  #stab-societe [style*="grid-template-columns:1fr 1fr 1fr"],
  #stab-sync [style*="grid-template-columns"],
  #stab-docs [style*="grid-template-columns"],
  #stab-referentiels [style*="grid-template-columns"],
  #stab-security [style*="grid-template-columns"],
  #stab-backup [style*="grid-template-columns"],
  #stab-email [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}
/* Touch targets iOS */
@media (max-width: 480px) {
  .stab-btn { min-height: 40px; }
  button { min-height: 40px; }
}

/* iOS font-size fix (prevents auto-zoom on focus) */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="url"],
  select, textarea {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE PORTRAIT ANDROID — Fixes majeurs
═══════════════════════════════════════════════════════════ */

/* Base: sidebar cachée en portrait, topbar compacte */
@media (max-width: 768px) {

  /* Topbar */
  .topbar { padding: 0 8px !important; gap: 4px !important; }
  .tb-logo { font-size: 11px !important; }
  .tb-logo span { display: none; }
  #topbar-sync-pill { display: none !important; }
  .user-info .ui-role { display: none !important; }

  /* Sidebar — position FIXED pour ne pas pousser le contenu */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 270px !important;
    transform: translateX(-100%) !important;
    transition: transform .25s ease !important;
    z-index: 600 !important;
    overflow-y: auto !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.5) !important;
  }
  /* app-content prend toute la largeur (sidebar est en overlay) */
  .app-content { width: 100% !important; }
  .main-content { margin-left: 0 !important; width: 100% !important; padding: 8px !important; }
  /* Overlay sombre derrière la sidebar ouverte */
  .sidebar-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 599;
    background: rgba(0,0,0,.45);
  }
  .sidebar.open ~ .sidebar-overlay,
  .sidebar-open .sidebar-overlay { display: block !important; }

  /* Tabs content */
  .tc { padding: 8px 4px !important; }
  .dash { padding: 4px !important; }

  /* KPI cards — une colonne en portrait */
  .kpi-grid, .kpis, [class*="kpi-row"], .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Tables — scroll horizontal */
  .dtbl, table.dtbl {
    font-size: 11px !important;
    min-width: 500px !important;
  }
  .dtbl th, .dtbl td { padding: 6px 8px !important; }
  
  /* Wrapper de table avec scroll */
  .section-card { overflow-x: auto !important; }
  .section-card > table,
  .section-card > div > table { min-width: 500px !important; }

  /* Formulaires */
  .form-grid { grid-template-columns: 1fr !important; }
  .ctrl-bar { flex-direction: column !important; gap: 6px !important; }
  .ctrl-bar input, .ctrl-bar select {
    width: 100% !important; font-size: 15px !important;
  }

  /* Modals */
  .modal-box { width: 96vw !important; max-height: 90vh !important; padding: 14px !important; }
  .modal-form { grid-template-columns: 1fr !important; }
  .mf-full { grid-column: 1 !important; }

  /* Buttons */
  .action-btn { padding: 6px 8px !important; font-size: 11px !important; }

  /* Dashboard cards */
  .dash-cards { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .dash-card { padding: 10px !important; }
  .dash-card .dc-val { font-size: 22px !important; }

  /* Sidebar overlay when open */
  .sidebar-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 499;
    background: rgba(0,0,0,.4);
  }
  .sidebar.open ~ .sidebar-overlay { display: block; }

  /* Toggle sidebar button on mobile */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px; cursor: pointer;
    font-size: 16px; color: white; flex-shrink: 0;
  }
}

/* Portrait intermédiaire (tablets portrait) */
@media (min-width: 601px) and (max-width: 900px) {
  .sidebar { width: 200px !important; }
  .main-content { margin-left: 200px !important; padding: 12px !important; }
  .dtbl { font-size: 12px !important; }
  .kpi-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .dash-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .modal-form { grid-template-columns: 1fr 1fr !important; }
}

/* Fix: sections with overflow-x scroll wrapper */
.tbl-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-scroll-wrap table { min-width: 500px; }

/* Fix: inputs on mobile (prevent iOS zoom AND improve Android UX) */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .form-select, .form-input { width: 100% !important; }
}

/* Hamburger menu button — hidden on desktop */
.mobile-menu-btn { display: none; }

/* Settings sub-tabs */
.stab-content { display: none; }
.stab-content.stab-active { display: block; }
.stab-btn { transition: all .15s; }