/* CRM Call-Center مشاريع — palette COD Network : blanc, gris clair, orange. */
:root{
  --bg:#F2F3F5; --panel:#FFFFFF; --panel2:#F7F8FA; --peach:#FFF6EC; --line:#E1E4E8; --line2:#EEF0F3;
  --ink:#2A2F36; --ink2:#5C6570; --ink3:#8E979F;
  --orange:#E8891C; --orange-ink:#8A4B00; --orange-bg:#FFF1E0; --brown:#8B5A2B; --brown-bg:#F6EBDD;
  --blue:#4A90E2; --grey:#6C757D; --grey2:#B0B7C3; --green:#4CAF7D; --teal:#2A9D8F; --yellow:#F5C842; --red:#E05A5A;
  --side:#1F2733; --shadow:0 2px 10px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Nunito,Almarai,system-ui,sans-serif;font-size:14px;line-height:1.45;padding:12px 16px 40px}
.ar,[dir=rtl]{font-family:Almarai,Nunito,system-ui,sans-serif}
button{font-family:inherit;cursor:pointer}
button:disabled{opacity:.45;cursor:default}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px;width:100%}
input:focus,textarea:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
.wrap{max-width:1300px;margin:0 auto}
a{color:inherit}

/* login */
.login{min-height:90vh;display:grid;place-items:center}
.login form{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px 28px;width:min(360px,100%);display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.login .lg{font-weight:800;font-size:18px;display:flex;align-items:center;gap:10px;margin-bottom:6px}
.mk{background:var(--side);color:#fff;border-radius:6px;padding:4px 9px;font-family:Almarai;font-weight:800;font-size:14px}
.login label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink2);font-weight:700}
.err{color:var(--red);font-weight:700;margin:0;min-height:1em}

/* bandeau */
.app{background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.hd{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.world2{display:flex;gap:4px;background:var(--panel2);border:1px solid var(--line);padding:8px 8px 4px;border-radius:8px}
.world2 button{border:0;background:transparent;color:var(--ink2);padding:8px 14px;border-radius:6px;font-weight:800;font-size:13.5px;display:flex;align-items:center;gap:8px;position:relative;overflow:visible}
.world2 button b{position:absolute;top:-9px;right:-7px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#FF3B30;color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(255,59,48,.5);line-height:1}
.world2 button b:empty,.world2 button b.zero{display:none}
.world2 button.on{background:var(--orange);color:#fff}
.world2 button.on.bb{background:var(--brown)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1px solid var(--line);background:var(--panel2);color:var(--ink2);padding:7px 11px;border-radius:6px;font-weight:700;font-size:12.5px;display:flex;align-items:center;gap:7px}
.chips button b{color:#FF3B30;font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
.chips button small{font-weight:600;color:var(--ink3)}
.chips button.on{border-color:var(--orange);background:var(--orange-bg);color:var(--orange-ink)}
.next{border:0;background:var(--orange);color:#fff;font-weight:800;padding:10px 18px;border-radius:6px;font-size:14px;letter-spacing:.03em;display:flex;align-items:center;gap:8px;box-shadow:0 2px 6px rgba(232,137,28,.35);justify-content:center}
.next small{font-weight:600;opacity:.9;letter-spacing:0;font-size:11px}
.hd .who{font-size:12.5px;color:var(--ink2);font-weight:700}
.hd .who b{color:var(--ink)}
.hd .sub2{font-size:12px;color:var(--ink3);font-weight:600;width:100%;margin-top:-4px}

/* liste */
.listbar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:var(--panel2);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.listbar button{border:0;background:transparent;color:var(--orange-ink);font-weight:800;padding:4px 0}
.list{display:none;border-bottom:1px solid var(--line);max-height:60vh;overflow:auto}
.list.open{display:block}
.row{display:grid;grid-template-columns:76px 1fr auto;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line2)}
.row .w{font-weight:800;font-variant-numeric:tabular-nums;font-size:13px}
.row .w small{display:block;font-weight:600;color:var(--ink3);font-size:11px}
.row .n b{display:block;font-size:13.5px}
.row .n span{color:var(--ink2);font-size:12px}
.row .n .ar{direction:rtl;display:inline-block}
.row .o{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:6px 12px;font-weight:800;font-size:12px;color:var(--ink)}
.row.now{background:var(--orange-bg)}
.row.late{background:#FDECEC}
.row.locked{opacity:.55}
.tag{display:inline-block;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:4px;margin-inline-start:6px;text-transform:uppercase;letter-spacing:.03em}
.tag.cb{background:#E3EEFB;color:#2C5E9E}.tag.fu{background:var(--orange-bg);color:var(--orange-ink);border:1px solid var(--orange)}.tag.new{background:#EAE4F7;color:#5B3E9C}.tag.rt{background:#ECEEF1;color:#4E5560}.tag.ph{background:#FFF4D1;color:#6B4E00}.tag.late{background:var(--red);color:#fff}.tag.lock{background:#ECEEF1;color:#4E5560}
.empty{padding:60px 20px;text-align:center;color:var(--ink3);font-weight:700}

/* dossier */
.body{display:grid;grid-template-columns:320px 1fr;gap:14px;padding:14px;background:var(--bg)}
@media (max-width:860px){.body{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.idbar{display:flex;flex-wrap:wrap;gap:6px;padding:12px}
.idbar span{border:1px solid var(--line);background:var(--panel2);border-radius:6px;padding:7px 10px;font-weight:700;font-size:12.5px;color:var(--ink2)}
.idbar span.id{font-family:ui-monospace,Menlo,monospace;color:var(--ink)}
.badge{display:inline-block;margin:0 12px 10px;background:#5B3E9C;color:#fff;font-weight:800;font-size:12px;padding:7px 12px;border-radius:6px;letter-spacing:.04em}
.badge.fu{background:var(--orange)}.badge.cb{background:var(--blue)}.badge.rt{background:var(--grey)}.badge.ph{background:#B8860B}.badge.sold{background:var(--green)}
.kv{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.kv li{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line2);font-size:13px}
.kv li:nth-child(even){background:var(--peach)}
.kv li span{color:var(--ink2)}
.kv li b{font-weight:700;text-align:right;word-break:break-word}
.kv li b.ar{direction:rtl}
.kv li b.tel{font-family:ui-monospace,Menlo,monospace}
.pill{display:inline-block;padding:1px 8px;border-radius:4px;font-size:11.5px;font-weight:800}
.p-new{background:#EAE4F7;color:#5B3E9C}.p-no{background:#FDECEC;color:#B23B3B}.p-yes{background:#E3F5EA;color:#2E7D4F}.p-paid{background:#FFF4D1;color:#6B4E00}.p-grey{background:#ECEEF1;color:#4E5560}
.acts3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:12px}
.acts3 a,.acts3 button{border:1px solid var(--line);background:var(--panel2);border-radius:6px;padding:8px 6px;text-align:center;text-decoration:none;font-weight:800;font-size:12px;color:var(--ink)}
.acts3 .wa{background:#25D366;border-color:#25D366;color:#fff}
.sub{margin:0 12px 12px;padding:10px 12px;border-radius:6px;background:var(--panel2);border:1px dashed var(--line);font-size:12.5px}
.sub:empty{display:none}
.sub b{display:block}
.sub small{color:var(--ink2)}
.tabs{display:flex;gap:2px;padding:6px 8px 0;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{border:0;background:transparent;color:var(--ink2);padding:12px 16px;font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;border-bottom:3px solid transparent;white-space:nowrap;display:flex;gap:8px;align-items:center}
.tabs button.on{color:var(--orange);border-bottom-color:var(--orange)}
.tabs button b{color:#FF3B30;font-size:12.5px;font-weight:800}
.pane{display:none;padding:20px 22px 24px}
.pane.on{display:block}
.pane h2{margin:0 0 4px;font-size:24px;text-align:center;font-weight:800}
.pane .lead{text-align:center;color:var(--ink2);margin:0 auto 18px;padding-bottom:14px;border-bottom:1px solid var(--orange);max-width:640px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink2);font-weight:700}
.form label.full{grid-column:1/-1}
.form .hint{font-weight:600;color:var(--ink3);font-size:11.5px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:7px 12px;font-weight:700;color:var(--ink2);font-family:Almarai,Nunito,sans-serif}
.seg button.on{background:var(--orange);border-color:var(--orange);color:#fff}
.form textarea{min-height:76px;resize:vertical}
.saved{outline:2px solid var(--green)!important;border-color:var(--green)!important}
.why{background:var(--orange-bg);border:1px solid var(--orange);border-radius:6px;padding:12px 14px;margin-bottom:16px;display:flex;gap:12px;align-items:flex-start}
.why i{font-style:normal;font-size:22px}
.why b{display:block;margin-bottom:2px}
.why .q{direction:rtl;text-align:right;font-size:15px;font-weight:800;margin-top:6px}
.script{counter-reset:q;display:flex;flex-direction:column;gap:12px}
.script>div{border:1px solid var(--line);border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;background:var(--panel2)}
.script>div>b{counter-increment:q;font-size:13.5px}
.script>div>b::before{content:counter(q) '. ';color:var(--orange);font-weight:800}
.script .ar{direction:rtl;text-align:right;font-size:14.5px;color:var(--ink);font-weight:700}
.preview{margin-top:14px;border:1px solid var(--line);border-radius:6px;padding:12px 14px;background:var(--panel)}
.preview b{display:block;font-size:12px;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.preview p{margin:0;direction:rtl;text-align:right;font-family:Almarai;white-space:pre-line}
.tl{list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--line);margin-inline-start:8px}
.tl li{padding:0 0 14px 16px;position:relative}
.tl li::before{content:'';position:absolute;left:-7px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--orange)}
.tl li small{display:block;color:var(--ink3);font-size:12px}
.photos{display:flex;gap:12px;flex-wrap:wrap}
.photos img{width:140px;height:140px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.btn{border:0;border-radius:6px;padding:10px 14px;font-weight:800;background:var(--orange);color:#fff}
.btn.wa{background:#25D366}
.btn.ghost{background:var(--panel);border:1px solid var(--line);color:var(--ink)}

/* barre de statuts */
.statuts{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:12px 14px;background:var(--panel);border-top:1px solid var(--line)}
@media (max-width:900px){.statuts{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.statuts{grid-template-columns:repeat(2,1fr)}}
.statuts button{border:0;border-radius:5px;padding:13px 8px;font-weight:800;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:#fff;display:flex;flex-direction:column;align-items:center;gap:3px}
.statuts button small{font-weight:600;opacity:.92;font-size:10.5px;letter-spacing:0;text-transform:none}
.s-later{background:var(--blue)}.s-noreply{background:var(--grey)}.s-conf{background:var(--green)}.s-visit{background:var(--teal)}.s-wrong{background:var(--yellow);color:#3A2B00}.s-soft{background:var(--grey2);color:#2A2F36}.s-cancel{background:var(--red)}
.foot{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 14px;color:var(--ink2);font-size:12.5px;flex-wrap:wrap;gap:8px}
.foot button{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:9px 14px;font-weight:800;color:var(--ink)}
.foot .ok{color:var(--green);font-weight:800}
.foot .ko{color:var(--red);font-weight:800}

/* modal */
.modal{position:fixed;inset:0;background:rgba(20,24,30,.5);display:grid;place-items:center;z-index:50;padding:16px}
.modal .box{background:var(--panel);border-radius:12px;padding:20px 22px;width:min(440px,100%);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.modal h3{margin:0 0 12px;font-size:17px}
.modal .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.modal .ghost{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 14px;font-weight:700}
.modal .seg{margin-bottom:10px}
.busy{pointer-events:none;opacity:.6}

/* ----- monde contractors (brun) ----- */
.app.b .chips button.on{border-color:var(--brown);background:var(--brown-bg);color:var(--brown)}
.app.b .next{background:var(--brown);box-shadow:0 2px 6px rgba(139,90,43,.35)}
.app.b .listbar button{color:var(--brown)}
.app.b .row.now{background:var(--brown-bg)}
.app.b .tabs button.on{color:var(--brown);border-bottom-color:var(--brown)}
.app.b .pane .lead{border-bottom-color:var(--brown)}
.app.b .seg button.on{background:var(--brown);border-color:var(--brown)}
.app.b .script>div>b::before{color:var(--brown)}
.app.b .tl li::before{background:var(--brown)}
.app.b .why{background:var(--brown-bg);border-color:var(--brown)}
.app.b .btn{background:var(--brown)}.app.b .btn.wa{background:#25D366}.app.b .btn.ghost{background:var(--panel)}
.badge.new{background:#5B3E9C}.badge.q{background:var(--brown)}
.tag.pre{background:#DDF3F3;color:#0E6B6B}.tag.post{background:var(--brown-bg);color:var(--brown)}
.check{display:flex;flex-direction:column;gap:8px}
.check label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);font-weight:600;cursor:pointer}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--brown)}
.check .ar{display:block;font-weight:700;direction:rtl;text-align:right;color:var(--ink);margin-top:3px}
.offer{border:1px solid var(--line);border-radius:6px;background:var(--panel2);padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-bottom:10px}
.offer b{display:block;font-size:14px}
.offer small{color:var(--ink2)}
.offer button{border:0;border-radius:6px;padding:9px 14px;font-weight:800;background:var(--brown);color:#fff;white-space:nowrap}
.offer.done{border-color:var(--green);background:#E3F5EA}
.offer.done button{background:var(--green)}
.statuts.three{grid-template-columns:repeat(3,1fr)}
.statuts.one{grid-template-columns:1fr;max-width:320px}