/* SAMAH SARL – Logiciel de gestion */
:root{
  --rouge:#E2001D; --rouge-f:#B80018; --rouge-c:#FDE8EB;
  --vert:#009C63; --vert-f:#007A4D; --vert-c:#E2F5EC;
  --encre:#16181D; --texte:#2B2F36; --gris:#6B7280; --gris-c:#9CA3AF;
  --ligne:#E6E8EC; --fond:#F5F6F8; --blanc:#fff; --jaune:#F59E0B; --jaune-c:#FEF3C7; --bleu:#2563EB; --bleu-c:#DBEAFE;
  --r:12px; --ombre:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.08); --ombre-l:0 20px 50px rgba(16,24,40,.18);
  --side:248px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:14px;color:var(--texte);background:var(--fond);-webkit-font-smoothing:antialiased}
a{color:var(--rouge);text-decoration:none}
h1,h2,h3{color:var(--encre);margin:0;letter-spacing:-.01em}
h1{font-size:22px;font-weight:800}h2{font-size:17px;font-weight:700}h3{font-size:15px;font-weight:700}
.muted{color:var(--gris)}.small{font-size:12px}.right{text-align:right}.center{text-align:center}.nowrap{white-space:nowrap}.bold{font-weight:700}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.hidden{display:none!important}

/* ---------- Connexion ---------- */
#login{min-height:100%;display:grid;place-items:center;padding:20px;background:
  radial-gradient(1200px 600px at -10% -10%,rgba(226,0,29,.10),transparent 60%),
  radial-gradient(900px 600px at 110% 110%,rgba(0,156,99,.12),transparent 60%),var(--fond)}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:20px;padding:36px 32px;box-shadow:var(--ombre-l)}
.login-card img{height:96px;display:block;margin:0 auto 8px}
.login-card h1{text-align:center;font-size:19px;margin-bottom:4px}
.login-card p{text-align:center;margin:0 0 22px}
.login-band{display:flex;height:5px;border-radius:5px;overflow:hidden;margin:18px 0 0}.login-band i{flex:1;background:var(--rouge)}.login-band i+i{background:var(--vert)}

/* ---------- Structure ---------- */
#app{display:flex;min-height:100%}
#side{width:var(--side);background:#14161B;color:#C9CDD4;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:30;transition:transform .2s}
#side .brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
#side .brand img{width:44px;height:auto;background:#fff;border-radius:10px;padding:4px}
#side .brand b{color:#fff;font-size:15px;display:block;letter-spacing:.02em}#side .brand span{font-size:11px;color:#8A9099}
#nav{flex:1;overflow-y:auto;padding:10px 10px 20px}
#nav .grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:#6B7280;padding:14px 10px 6px;font-weight:700}
#nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:#C9CDD4;font-weight:500;margin:1px 0}
#nav a:hover{background:rgba(255,255,255,.06);color:#fff}
#nav a.on{background:var(--rouge);color:#fff;font-weight:600}
#nav a .ic{width:20px;text-align:center;font-size:15px}
#nav a .pill{margin-left:auto;background:var(--vert);color:#fff;font-size:11px;border-radius:20px;padding:1px 7px;font-weight:700}
#nav a.caisse-r1.on{background:var(--vert)}
#side .me{padding:12px 14px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px;font-size:13px}
#side .me .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--rouge),var(--vert));color:#fff;display:grid;place-items:center;font-weight:800}
#side .me b{color:#fff;display:block;font-size:13px}#side .me small{color:#8A9099}
#side .me button{margin-left:auto;display:flex;align-items:center;gap:6px;background:rgba(226,0,29,.14);border:1px solid rgba(226,0,29,.35);color:#FF8A96;cursor:pointer;font:inherit;font-size:12px;font-weight:700;border-radius:9px;padding:7px 9px;flex-shrink:0}
#side .me button:hover{background:var(--rouge);color:#fff;border-color:var(--rouge)}
#side .me>div:nth-child(2){min-width:0;overflow:hidden}#side .me b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#main{flex:1;margin-left:var(--side);min-width:0;display:flex;flex-direction:column}
#top{height:58px;background:#fff;border-bottom:1px solid var(--ligne);display:flex;align-items:center;gap:12px;padding:0 22px;position:sticky;top:0;z-index:20}
#top .burger{display:none;background:none;border:0;font-size:22px;cursor:pointer}
#top .titre{font-weight:700;color:var(--encre);font-size:16px}
#top .sp{flex:1}
#top .date{color:var(--gris);font-size:13px}
#view{padding:22px;flex:1}
.page-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.page-head .sp{flex:1}

/* ---------- Composants ---------- */
.card{background:#fff;border:1px solid var(--ligne);border-radius:var(--r);box-shadow:var(--ombre)}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ligne)}
.card-h .sp{flex:1}.card-b{padding:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi{padding:16px;position:relative;overflow:hidden}
.kpi .l{font-size:12px;color:var(--gris);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kpi .v{font-size:24px;font-weight:800;color:var(--encre);margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .s{font-size:12px;color:var(--gris);margin-top:4px}
.kpi.rdc{border-top:3px solid var(--rouge)}.kpi.r1{border-top:3px solid var(--vert)}.kpi.tot{border-top:3px solid var(--encre)}
.bq-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px}
.bq-RDC{background:var(--rouge-c);color:var(--rouge-f)}.bq-R1{background:var(--vert-c);color:var(--vert-f)}.bq-commun{background:#EEF0F3;color:#4B5563}
.badge{display:inline-block;padding:3px 8px;border-radius:20px;font-size:11.5px;font-weight:700;background:#EEF0F3;color:#4B5563;white-space:nowrap}
.badge.ok{background:var(--vert-c);color:var(--vert-f)}.badge.ko{background:var(--rouge-c);color:var(--rouge-f)}.badge.warn{background:var(--jaune-c);color:#92400E}.badge.info{background:var(--bleu-c);color:#1E40AF}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border-radius:10px;border:1px solid var(--ligne);background:#fff;color:var(--texte);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}
.btn:hover{background:#F3F4F6}
.btn.p{background:var(--rouge);border-color:var(--rouge);color:#fff}.btn.p:hover{background:var(--rouge-f)}
.btn.v{background:var(--vert);border-color:var(--vert);color:#fff}.btn.v:hover{background:var(--vert-f)}
.btn.d{color:var(--rouge-f);border-color:#F5C2C9}.btn.d:hover{background:var(--rouge-c)}
.btn.sm{padding:5px 9px;font-size:12.5px;border-radius:8px}.btn.lg{padding:14px 20px;font-size:16px;border-radius:12px}
.btn.ghost{border-color:transparent;background:transparent}.btn.ghost:hover{background:#F3F4F6}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btns{display:flex;gap:8px;flex-wrap:wrap}

input,select,textarea{font:inherit;color:var(--texte);border:1px solid #D5D8DE;border-radius:10px;padding:9px 11px;background:#fff;width:100%;outline:none;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{border-color:var(--rouge);box-shadow:0 0 0 3px rgba(226,0,29,.12)}
input[type=checkbox]{width:auto;accent-color:var(--rouge)}
textarea{min-height:70px;resize:vertical}
label.f{display:block}label.f>span{display:block;font-size:12px;font-weight:600;color:#4B5563;margin-bottom:5px}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}.form .full{grid-column:1/-1}
.form3{grid-template-columns:repeat(3,minmax(0,1fr))}
.chk{display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters input,.filters select{width:auto;min-width:140px;padding:8px 10px}
.filters input[type=search]{min-width:220px}

table.t{width:100%;border-collapse:collapse}
.t th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--gris);font-weight:700;text-align:left;padding:10px 12px;border-bottom:1px solid var(--ligne);background:#FAFBFC;position:sticky;top:0}
.t td{padding:10px 12px;border-bottom:1px solid #F0F1F4;vertical-align:middle}
.t tr:hover td{background:#FAFBFC}.t tr.click{cursor:pointer}
.t tfoot td{font-weight:800;background:#FAFBFC;border-top:2px solid var(--ligne)}
.tw{overflow:auto;max-height:calc(100vh - 230px)}
.empty{padding:40px;text-align:center;color:var(--gris)}
.thumb{width:38px;height:38px;border-radius:8px;object-fit:cover;background:#F3F4F6;display:grid;place-items:center;font-size:18px}
.low{color:var(--rouge);font-weight:700}

/* ---------- Modale / toasts ---------- */
.ov{position:fixed;inset:0;background:rgba(17,19,24,.5);display:grid;place-items:center;padding:16px;z-index:100;animation:fd .15s}
.mod{background:#fff;border-radius:16px;box-shadow:var(--ombre-l);width:100%;max-width:640px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;animation:up .18s}
.mod.lg{max-width:920px}.mod.sm{max-width:440px}
.mod-h{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--ligne)}.mod-h h2{flex:1}
.mod-h button{background:none;border:0;font-size:22px;cursor:pointer;color:var(--gris)}
.mod-b{padding:20px;overflow:auto}.mod-f{padding:14px 20px;border-top:1px solid var(--ligne);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
@keyframes fd{from{opacity:0}}@keyframes up{from{transform:translateY(12px);opacity:0}}
#toasts{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--encre);color:#fff;padding:12px 16px;border-radius:10px;box-shadow:var(--ombre-l);max-width:380px;animation:up .2s;font-weight:500}
.toast.err{background:var(--rouge)}.toast.ok{background:var(--vert)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--ligne);margin-bottom:16px;overflow-x:auto}
.tabs a{padding:10px 14px;color:var(--gris);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--rouge);border-color:var(--rouge)}
.spin{width:28px;height:28px;border:3px solid #eee;border-top-color:var(--rouge);border-radius:50%;animation:sp .7s linear infinite;margin:40px auto}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- Caisse (POS) ---------- */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;height:calc(100vh - 58px - 44px - 52px);min-height:520px}
.pos-left{display:flex;flex-direction:column;min-height:0}
.pos-bar{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.pos-bar input{font-size:16px;padding:12px 14px;border-radius:12px}
.pos-cats{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:6px}
.pos-cats button{border:1px solid var(--ligne);background:#fff;border-radius:30px;padding:7px 13px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.pos-cats button.on{background:var(--encre);color:#fff;border-color:var(--encre)}
.pos-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;align-content:start;padding:2px}
.pp{background:#fff;border:1px solid var(--ligne);border-radius:12px;padding:10px;cursor:pointer;text-align:left;font:inherit;display:flex;flex-direction:column;gap:6px;transition:transform .08s,box-shadow .12s;position:relative}
.pp:hover{box-shadow:var(--ombre-l);transform:translateY(-1px)}.pp:active{transform:scale(.98)}
.pp .im{height:84px;border-radius:8px;background:#F3F4F6 center/cover no-repeat;display:grid;place-items:center;font-size:30px}
.pp .n{font-weight:600;font-size:13px;line-height:1.25;color:var(--encre);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px}
.pp .pr{font-weight:800;color:var(--rouge);font-variant-numeric:tabular-nums}
.pp .st{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.92);padding:2px 6px;border-radius:6px}
.pp.out{opacity:.45}
.pos-cart{background:#fff;border:1px solid var(--ligne);border-radius:14px;display:flex;flex-direction:column;min-height:0;box-shadow:var(--ombre)}
.pos-cart .hd{padding:12px 14px;border-bottom:1px solid var(--ligne);display:flex;align-items:center;gap:8px}
.pos-lines{flex:1;overflow-y:auto}
.pl{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 14px;border-bottom:1px solid #F0F1F4}
.pl .n{font-weight:600;color:var(--encre)}.pl .u{font-size:12px;color:var(--gris)}
.pl .tt{font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.qty{display:flex;align-items:center;gap:4px}
.qty button{width:28px;height:28px;border-radius:8px;border:1px solid var(--ligne);background:#fff;cursor:pointer;font-size:15px;font-weight:700}
.qty input{width:58px;text-align:center;padding:4px}
.pos-sum{padding:12px 14px;border-top:1px solid var(--ligne);display:grid;gap:6px}
.pos-sum .r{display:flex;justify-content:space-between}
.pos-sum .tot{font-size:26px;font-weight:800;color:var(--encre);font-variant-numeric:tabular-nums}
.pos-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.pos-head .bq{font-size:18px;font-weight:800}
.pay-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.pay-modes button{padding:14px 6px;border:2px solid var(--ligne);border-radius:12px;background:#fff;font:inherit;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.pay-modes button span{font-size:22px}.pay-modes button.on{border-color:var(--rouge);background:var(--rouge-c);color:var(--rouge-f)}
.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.quick button{padding:8px 10px;border:1px solid var(--ligne);border-radius:8px;background:#fff;font:inherit;font-weight:700;cursor:pointer}
.big-total{font-size:34px;font-weight:800;text-align:center;color:var(--encre);margin:4px 0 16px;font-variant-numeric:tabular-nums}
.rendu{font-size:22px;font-weight:800;color:var(--vert);text-align:center;margin-top:12px}
.open-box{max-width:420px;margin:40px auto;text-align:center}

/* ---------- Ticket / impression ---------- */
.ticket{font-family:'Courier New',monospace;font-size:12px;color:#000;width:72mm;margin:0 auto;background:#fff;padding:6px}
.ticket.w58{width:50mm;font-size:10.5px}
.ticket .c{text-align:center}.ticket img{height:46px;display:block;margin:0 auto 4px}
.ticket hr{border:0;border-top:1px dashed #000;margin:6px 0}
.ticket table{width:100%;border-collapse:collapse}.ticket td{padding:1px 0;vertical-align:top}
.ticket .tot{font-size:15px;font-weight:bold}
#print-area{display:none}
@media print{
  body *{visibility:hidden}
  #print-area,#print-area *{visibility:visible}
  #print-area{display:block;position:absolute;left:0;top:0;width:100%}
  @page{margin:4mm}
}
.doc{color:#111;font-size:13px}
.doc .doc-h{display:flex;align-items:center;gap:14px;border-bottom:3px solid var(--rouge);padding-bottom:10px;margin-bottom:14px}
.doc .doc-h img{height:56px}.doc h2{font-size:18px}
.doc table{width:100%;border-collapse:collapse;margin:8px 0}.doc th,.doc td{border:1px solid #ccc;padding:6px 8px;text-align:left}.doc th{background:#f3f3f3}

.chart-box{position:relative;height:280px}
.list-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F0F1F4}.list-row:last-child{border:0}
.list-row .sp{flex:1;min-width:0}
.status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--gris-c)}.status-dot.on{background:var(--vert);box-shadow:0 0 0 3px var(--vert-c)}

.pay-modes button{font-size:13px;text-align:center}
@media (max-width:1100px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.pos{grid-template-columns:1fr 340px}}
@media (max-width:860px){
  #side{transform:translateX(-100%)}#side.open{transform:none}
  #main{margin-left:0}#top .burger{display:block}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}.form{grid-template-columns:1fr}
  .pos{grid-template-columns:1fr;height:auto}.pos-grid{max-height:50vh}.pos-cart{min-height:60vh}
  #view{padding:14px}
}