/* Mise en page : menu latéral sombre au début de la ligne (droite en arabe), contenu clair à côté.
   Propriétés logiques partout pour que le français (LTR) et l'arabe (RTL) fonctionnent avec le même code. */
:root{
  --bg:#f3f5f9; --surface:#fff; --ink:#172033; --muted:#6b7689; --line:#e4e8f0;
  --side:#0f1b2d; --side-ink:#c5cfdf; --side-line:#1d2c44;
  --accent:#e5484d; --accent-ink:#fff; --accent-soft:#fdeceb;
  --blue:#2f6bff; --blue-soft:#e8efff; --green:#12a36a; --green-soft:#e0f6ec; --amber:#d98200; --amber-soft:#fdf1d9; --violet:#7a47e0; --violet-soft:#efe8fd; --red:#d6333a; --red-soft:#fde8e9;
  --font:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5}
h1,h2,h3{margin:0;font-weight:700}
h2{font-size:20px} h3{font-size:16px}
button,input,select,textarea{font:inherit}
a{color:var(--blue)}
bdi.ltr{direction:ltr;unicode-bidi:isolate}
.app{display:flex;min-height:100%}
.side{width:236px;flex:none;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
.logo{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;color:#fff;font-weight:700;font-size:17px;line-height:1.2}
.logo i{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent);flex:none}
.logo small{display:block;font-weight:400;font-size:12px;color:var(--side-ink)}
.menu{display:flex;flex-direction:column;gap:4px;flex:1}
.menu button{display:flex;align-items:center;gap:12px;border:0;background:transparent;color:var(--side-ink);padding:10px 12px;border-radius:10px;cursor:pointer;text-align:start;font-weight:600}
.menu button:hover{background:var(--side-line)}
.menu button.on{background:var(--accent);color:#fff}
.menu .badge{margin-inline-start:auto;background:#fff;color:var(--accent);border-radius:99px;font-size:12px;padding:0 8px;font-weight:700}
.menu button.on .badge{background:#fff}
.sideuser{border-top:1px solid var(--side-line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.sideuser .who{color:#fff;font-weight:700}
.sideuser .who small{display:block;font-weight:400;color:var(--side-ink)}
.sideuser button{display:flex;align-items:center;gap:10px;border:1px solid var(--side-line);background:transparent;color:var(--side-ink);padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:600}
.sideuser button:hover{background:var(--side-line)}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:4}
.topbar .date{color:var(--muted);font-weight:600}
.topbar .sp{flex:1}
.burger{display:none;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:6px 8px;cursor:pointer;color:var(--ink)}
.seg{display:flex;background:var(--bg);border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;color:var(--muted);font-weight:700;padding:4px 12px;border-radius:8px;cursor:pointer}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
main{padding:24px;display:flex;flex-direction:column;gap:20px;max-width:1280px;width:100%;margin-inline:auto}
.hello h1{font-size:24px}
.hello p{margin:2px 0 0;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.kpi .top{display:flex;justify-content:space-between;align-items:center}
.kpi .n{font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.kpi .l{color:var(--muted);font-weight:600}
.kpi .ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center}
.kpi a{border-top:1px solid var(--line);padding-top:8px;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}
.c-blue{color:var(--blue)} .bg-blue{background:var(--blue-soft)}
.c-green{color:var(--green)} .bg-green{background:var(--green-soft)}
.c-amber{color:var(--amber)} .bg-amber{background:var(--amber-soft)}
.c-violet{color:var(--violet)} .bg-violet{background:var(--violet-soft)}
.c-red{color:var(--red)} .bg-red{background:var(--red-soft)}
.c-orange{color:#c24e00} .bg-orange{background:#ffe6d0} .c-yellow{color:#7a5c00} .bg-yellow{background:#fff1a8} .c-teal{color:#0b7a76} .bg-teal{background:#d6f2ef}
.grid2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card>h3{display:flex;justify-content:space-between;align-items:center}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.grow{flex:1 1 170px}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th{text-align:start;font-size:13px;color:var(--muted);font-weight:600;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
td.n,th.n{text-align:end}
tbody tr.click{cursor:pointer} tbody tr.click:hover{background:var(--bg)}
tr.tot td{font-weight:700;border-top:2px solid var(--line)}
input,select,textarea{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:0}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
label{font-size:13px;font-weight:600;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.btn{font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:8px 16px;border-radius:10px;cursor:pointer}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ok{background:var(--green);border-color:var(--green);color:#fff}
.btn.bad{color:var(--red);border-color:var(--red)}
.btn.sm{padding:4px 10px;font-size:13px}
.btn.lg{padding:12px 18px;font-size:16px}
.btn:disabled{opacity:.5;cursor:default}
.pill{display:inline-block;padding:1px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.pill.ok{background:var(--green-soft);color:var(--green)} .pill.warn{background:var(--amber-soft);color:var(--amber)}
.pill.bad{background:var(--red-soft);color:var(--red)} .pill.info{background:var(--blue-soft);color:var(--blue)} .pill.mut{background:var(--bg);color:var(--muted)}
.pill.orange{background:#ffe6d0;color:#c24e00} .pill.yellow{background:#fff1a8;color:#7a5c00} .pill.teal{background:#d6f2ef;color:#0b7a76} .pill.grey{background:#dde1e7;color:#444c58} .pill.violet{background:var(--violet-soft);color:var(--violet)}
.muted{color:var(--muted)} .small{font-size:13px}
.amt{font-weight:700;white-space:nowrap}
.donutwrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}
.legend{display:flex;flex-direction:column;gap:6px;min-width:130px;flex:1}
.legend div{display:flex;align-items:center;gap:8px}
.legend i{width:10px;height:10px;border-radius:50%;flex:none}
.legend b{margin-inline-start:auto;font-variant-numeric:tabular-nums}
.perf{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pcard{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.pcard .nm{font-weight:700;font-size:16px}
.pcard .ln{display:flex;justify-content:space-between;gap:8px}
.bar{height:8px;border-radius:99px;background:var(--bg);overflow:hidden}
.bar i{display:block;height:100%;background:var(--green);border-radius:99px}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.qt{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;gap:12px;align-items:center}
.qt .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none}
.qt b{display:block;font-size:20px;line-height:1.1;font-variant-numeric:tabular-nums}
.scanbox input{font-size:24px;padding:14px;width:100%;letter-spacing:.5px}
.feed{display:flex;flex-direction:column;gap:6px}
.feed div{padding:8px 12px;border-radius:10px;font-weight:600}
.feed .ok{background:var(--green-soft);color:var(--green)} .feed .warn{background:var(--amber-soft);color:var(--amber)} .feed .bad{background:var(--red-soft);color:var(--red)}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.ocard{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.ocard .head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.ocard .big{font-size:20px;font-weight:700}
.hold{font-size:36px;font-weight:700;color:var(--green);line-height:1.1;font-variant-numeric:tabular-nums}
.empty{padding:28px;text-align:center;color:var(--muted)}
.login{min-height:100%;display:grid;place-items:center;padding:20px;background:var(--side)}
.login .card{width:min(400px,100%);padding:24px;gap:14px}
.login .logo{color:var(--ink);padding:0}
.err{color:var(--red);font-weight:600}
.modalbg{position:fixed;inset:0;background:rgba(15,27,45,.55);display:grid;place-items:center;padding:16px;z-index:30}
.modal{background:var(--surface);border-radius:16px;padding:20px;width:min(520px,100%);max-height:90vh;overflow:auto;display:flex;flex-direction:column;gap:12px}
.tl{display:flex;flex-direction:column;gap:6px;border-inline-start:2px solid var(--line);padding-inline-start:12px}
.pager{display:flex;gap:8px;align-items:center;justify-content:center}
.toast{position:fixed;inset-inline:0;bottom:20px;margin-inline:auto;width:fit-content;background:var(--ink);color:#fff;padding:10px 18px;border-radius:12px;font-weight:600;z-index:40;max-width:90vw}
@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  .side{position:fixed;inset-block:0;inset-inline-start:0;z-index:20;transform:translateX(-100%);transition:transform .2s;height:100%}
  [dir=rtl] .side{transform:translateX(100%)}
  .app.open .side{transform:none}
  .app.open::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:10}
  .burger{display:block}
  main{padding:14px} .topbar{padding:10px 14px}
  .topbar .date{display:none}
}
@media (prefers-reduced-motion:reduce){.side{transition:none}}

.modal.wide{width:min(880px,100%)} .modal .kpis{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))} .lnk{cursor:pointer;font-weight:600;text-decoration:none} .lnk:hover{text-decoration:underline}
a.tel{color:inherit;text-decoration:underline;text-underline-offset:2px}
a.tel:hover{color:var(--brand,#e5484d)}
.logo i.li{background:none;overflow:hidden;width:42px;height:42px;border-radius:11px}
.logo i.li img{width:100%;height:100%;display:block;object-fit:cover}
.login .biglogo{display:block;width:150px;height:150px;border-radius:22px;margin:0 auto 14px}
a.wa{display:inline-flex;align-items:center;gap:4px;margin-inline-start:8px;padding:2px 9px;border-radius:999px;background:#e8f7ee;color:#0d7a3a;font-size:12px;font-weight:700;text-decoration:none;vertical-align:middle}
a.wa:hover{background:#d3f0de}
.chipsel{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chipb{border:1.5px solid var(--line,#e3e9e5);background:#fff;border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.chipb.on{background:#16a34a;border-color:#16a34a;color:#fff}

/* Couleurs des états : pastilles pleines, bien visibles */
.pill.st{color:#fff;padding:2px 11px}
.pill.st.ok{background:#16a34a;color:#fff}
.pill.st.orange{background:#f97316;color:#fff}
.pill.st.bad{background:#dc2626;color:#fff}
.pill.st.grey{background:#6b7280;color:#fff}
.pill.st.info{background:#2563eb;color:#fff}
.pill.st.yellow{background:#facc15;color:#422006}
.pill.st.teal{background:#0d9488;color:#fff}
.pill.st.violet{background:#7c3aed;color:#fff}
.pill.st.mut{background:#e5e7eb;color:#374151}
.pwwrap{position:relative;display:flex} .pwwrap input{flex:1;padding-inline-end:40px}
.pweye{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);background:none;border:none;padding:4px;display:flex;align-items:center;color:var(--muted,#6b7280);cursor:pointer}
.camov{position:fixed;inset:0;background:rgba(0,0,0,.85);display:grid;place-items:center;z-index:40}
.cambox{display:flex;flex-direction:column;gap:12px;align-items:center;padding:16px;width:min(480px,94vw)}
.cambox video{width:100%;border-radius:12px;background:#000}