/* تحصيل — luxury fintech, deep ink/navy + emerald. RTL, mobile-first. */
:root[data-theme="dark"]{
  --bg:#070b14; --bg-2:#0a1120;
  --bg-grad:radial-gradient(1100px 620px at 92% -8%, rgba(52,224,161,.10), transparent 58%),
            radial-gradient(900px 520px at -6% 104%, rgba(56,120,255,.09), transparent 55%);
  --panel:#0e1626; --panel-2:#111c30; --panel-3:#16233a;
  --line:#1d2a41; --line-soft:#18233850;
  --text:#eaf1fb; --text-2:#93a1ba; --text-3:#5f6f8a;
  --emerald:#34e0a1; --emerald-2:#12b3a6; --emerald-soft:rgba(52,224,161,.13);
  --amber:#f5b64c; --amber-soft:rgba(245,182,76,.14);
  --orange:#ef6d1e; --orange-soft:rgba(239,109,30,.16);
  --red:#f56b6b; --red-soft:rgba(245,107,107,.14);
  --blue:#5b9bff; --blue-soft:rgba(91,155,255,.14);
  --shadow:0 24px 60px rgba(0,0,0,.5); --shadow-sm:0 8px 22px rgba(0,0,0,.35);
  --chip:#0b1220; --row-hover:rgba(52,224,161,.05);
  --scrim:rgba(3,6,12,.66);
}
:root[data-theme="light"]{
  --bg:#eef2f8; --bg-2:#e7ecf5;
  --bg-grad:radial-gradient(1100px 620px at 92% -8%, rgba(18,179,166,.10), transparent 58%),
            radial-gradient(900px 520px at -6% 104%, rgba(56,120,255,.07), transparent 55%);
  --panel:#ffffff; --panel-2:#f6f9fd; --panel-3:#eef3fa;
  --line:#dde5f0; --line-soft:#e9eff7;
  --text:#0f1b2e; --text-2:#54627a; --text-3:#8b98ad;
  --emerald:#0f9e77; --emerald-2:#0c8f86; --emerald-soft:rgba(15,158,119,.11);
  --amber:#c9820e; --amber-soft:rgba(201,130,14,.12);
  --orange:#e0651a; --orange-soft:rgba(224,101,26,.12);
  --red:#d94747; --red-soft:rgba(217,71,71,.10);
  --blue:#2f6fe0; --blue-soft:rgba(47,111,224,.10);
  --shadow:0 20px 44px rgba(20,32,54,.12); --shadow-sm:0 8px 20px rgba(20,32,54,.08);
  --chip:#eef4fb; --row-hover:rgba(15,158,119,.05);
  --scrim:rgba(20,32,54,.4);
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}   /* beats .modal-scrim{display:grid} etc. */
html{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
body{
  font-family:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  background:var(--bg); background-image:var(--bg-grad); background-attachment:fixed;
  color:var(--text); min-height:100vh; font-size:14.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.num{font-variant-numeric:tabular-nums; letter-spacing:0}
::selection{background:var(--emerald-soft)}
button{font-family:inherit; cursor:pointer}
#app{max-width:1180px; margin:0 auto; padding:0 14px 90px}

/* ——— app bar ——— */
.appbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 4px 12px; margin-bottom:4px;
  background:linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 82%, transparent));
  backdrop-filter:blur(8px);
}
.brand{display:flex; align-items:center; gap:11px}
.logo{display:grid; place-items:center; filter:drop-shadow(0 6px 14px rgba(52,224,161,.28))}
.brand-t b{font-size:19px; font-weight:700; letter-spacing:-.01em; display:block; line-height:1.1}
.brand-t small{font-size:11px; color:var(--text-2); font-weight:500}
.appbar-actions{display:flex; gap:7px}
.ghost-btn{
  display:inline-flex; align-items:center; gap:6px; color:var(--text-2);
  background:var(--panel); border:1px solid var(--line); border-radius:11px;
  padding:8px 11px; font-size:12.5px; font-weight:600; transition:color .16s, border-color .16s, background .16s;
}
.ghost-btn .lbl{display:none}
@media(min-width:560px){ .ghost-btn .lbl{display:inline} }
.ghost-btn:hover{color:var(--text); border-color:var(--emerald-2); background:var(--panel-2)}
.ghost-btn.danger:hover{color:var(--red); border-color:var(--red)}
.private-badge{display:inline-flex; align-items:center; align-self:center; color:var(--amber); background:var(--amber-soft);
  border:1px solid var(--amber); border-radius:99px; padding:5px 11px; font-size:11px; font-weight:700; white-space:nowrap}
.ico-sun{display:none} :root[data-theme="light"] .ico-sun{display:block} :root[data-theme="light"] .ico-moon{display:none}

/* ——— seg nav ——— */
.segnav{
  display:flex; gap:4px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:5px; margin:6px 0 18px; box-shadow:var(--shadow-sm);
}
.seg{
  flex:1; border:0; background:transparent; color:var(--text-2);
  padding:10px 8px; border-radius:10px; font-size:13px; font-weight:600; transition:color .16s, background .16s;
}
.seg.active{background:linear-gradient(135deg,var(--emerald),var(--emerald-2)); color:#04140f; box-shadow:0 6px 16px rgba(18,179,166,.3)}
.seg:not(.active):hover{color:var(--text); background:var(--panel-2)}

/* ——— cards ——— */
.card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px 17px; box-shadow:var(--shadow-sm)}
.card + .card{margin-top:14px}
.card-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px}
.card-h h3{font-size:12.5px; font-weight:700; color:var(--text-2); text-transform:none; letter-spacing:.01em}
.card-h .hint{font-size:11px; color:var(--text-3); font-weight:500}

/* ——— KPI grid ——— */
.kpis{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px}
@media(min-width:720px){ .kpis{grid-template-columns:repeat(4,1fr)} }
.kpi{position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:15px 15px 14px; box-shadow:var(--shadow-sm)}
.kpi::before{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:var(--emerald)}
.kpi.warn::before{background:var(--amber)} .kpi.bad::before{background:var(--red)} .kpi.good::before{background:var(--emerald)}
.kpi .k-label{font-size:11.5px; color:var(--text-2); font-weight:600}
.kpi .k-val{font-size:20px; font-weight:700; margin-top:7px; letter-spacing:-.01em}
@media(min-width:720px){ .kpi .k-val{font-size:21px} }
.kpi .k-delta{font-size:10.5px; font-weight:600; margin-top:6px; display:inline-block; padding:2px 8px; border-radius:99px}
.k-delta.up{color:var(--emerald); background:var(--emerald-soft)}
.k-delta.down{color:var(--red); background:var(--red-soft)}
.k-delta.warn{color:var(--amber); background:var(--amber-soft)}
.kpi .k-spark{position:absolute; inset-inline-start:12px; bottom:10px; opacity:.85; color:var(--emerald)}

/* ——— aging buckets ——— */
.buckets{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media(min-width:720px){ .buckets{grid-template-columns:repeat(4,1fr)} }
.bucket{
  text-align:start; border:1px solid var(--line); background:var(--panel-2); border-radius:14px;
  padding:13px 13px; transition:border-color .16s, transform .16s, box-shadow .16s; position:relative;
}
.bucket:hover{border-color:var(--sev); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.bucket .b-top{display:flex; align-items:center; gap:7px; margin-bottom:9px}
.bucket .dot{width:9px; height:9px; border-radius:50%; background:var(--sev)}
.bucket .b-label{font-size:12px; font-weight:600; color:var(--text-2)}
.bucket .b-sum{font-size:16px; font-weight:700}
.bucket .b-count{font-size:11px; color:var(--text-3); margin-top:3px}
.bucket[data-sev="b30"]{--sev:var(--emerald)} .bucket[data-sev="b60"]{--sev:var(--amber)}
.bucket[data-sev="b90"]{--sev:var(--orange)} .bucket[data-sev="b90p"]{--sev:var(--red)}
.chart-wrap{overflow-x:auto; margin-top:4px}
.chart-wrap svg{display:block; min-width:320px}

/* ——— list / rows ——— */
.row{
  display:flex; align-items:center; gap:11px; padding:12px 6px; border-bottom:1px solid var(--line-soft);
  cursor:pointer; transition:background .14s;
}
.row:last-child{border-bottom:0}
.row:hover{background:var(--row-hover)}
.row .r-main{flex:1; min-width:0}
.row .r-co{font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .r-sub{font-size:11.5px; color:var(--text-2); margin-top:2px}
.row .r-amt{text-align:end; white-space:nowrap}
.row .r-amt b{font-size:14px; font-weight:700}
.row .r-amt small{display:block; font-size:10.5px; color:var(--text-3); margin-top:2px}
.avatar{width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font-weight:700; font-size:13px; background:var(--panel-3); color:var(--text-2); flex-shrink:0}

/* ——— status pills ——— */
.pill{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:11px; font-weight:700; white-space:nowrap}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.pill.due{color:var(--blue); background:var(--blue-soft)}
.pill.overdue{color:var(--amber); background:var(--amber-soft)}
.pill.esc1{color:var(--orange); background:var(--orange-soft)}
.pill.esc2{color:var(--red); background:var(--red-soft)}
.pill.legal{color:#fff; background:var(--red)}
.pill.paid{color:var(--emerald); background:var(--emerald-soft)}
.pill.paused{color:var(--text-2); background:var(--panel-3)}

/* ——— drawer ——— */
.drawer-scrim{position:fixed; inset:0; background:var(--scrim); z-index:40; backdrop-filter:blur(3px); animation:fade .2s}
.drawer{
  position:fixed; inset-block:0; inset-inline-start:0; z-index:41; width:min(560px,100%);
  background:var(--bg); background-image:var(--bg-grad); border-inline-end:1px solid var(--line);
  box-shadow:var(--shadow); overflow-y:auto; animation:slideIn .26s cubic-bezier(.2,.7,.2,1);
  padding:16px 16px 40px;
}
@keyframes slideIn{from{transform:translateX(-24px); opacity:.4} to{transform:none; opacity:1}}
:root[dir]{}
@keyframes fade{from{opacity:0} to{opacity:1}}
.drawer-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px}
.drawer-head .x{background:var(--panel); border:1px solid var(--line); border-radius:10px; color:var(--text-2); width:34px; height:34px; font-size:18px; flex-shrink:0}
.d-inv-num{font-size:12px; color:var(--text-2); font-weight:600}
.d-co{font-size:18px; font-weight:700; margin:3px 0 6px}
.d-meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center}

.d-amt-card{display:flex; gap:10px; margin:14px 0; }
.d-amt-card .box{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 13px}
.d-amt-card .box .l{font-size:11px; color:var(--text-2); font-weight:600}
.d-amt-card .box .v{font-size:17px; font-weight:700; margin-top:5px}
.d-amt-card .box.hl{border-color:var(--red); background:var(--red-soft)}

/* ——— action buttons ——— */
.actions{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:6px 0 16px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--line); background:var(--panel); color:var(--text);
  border-radius:12px; padding:12px 12px; font-size:13px; font-weight:700; transition:transform .15s, box-shadow .15s, border-color .15s;
}
.btn svg{width:16px; height:16px}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm)}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none}
.btn.pay{grid-column:1/-1; background:linear-gradient(135deg,var(--emerald),var(--emerald-2)); color:#04140f; border:0; box-shadow:0 8px 22px rgba(18,179,166,.32)}
.btn.ai{border-color:var(--blue); color:var(--blue)}
.btn.pause{border-color:var(--amber); color:var(--amber)}
.btn.esc{border-color:var(--orange); color:var(--orange)}
.btn.wa{border-color:var(--emerald-2); color:var(--emerald)}
.prewarn{grid-column:1/-1; display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--blue);
  background:var(--blue-soft); border:1px solid var(--blue-soft); border-radius:12px; padding:11px 13px}

/* ——— timeline ——— */
.timeline{position:relative; padding-inline-start:26px; margin:6px 0}
.timeline::before{content:""; position:absolute; inset-inline-start:9px; top:6px; bottom:6px; width:2px; background:var(--line)}
.tl-node{position:relative; padding:0 0 16px}
.tl-node:last-child{padding-bottom:0}
.tl-dot{position:absolute; inset-inline-start:-26px; top:1px; width:20px; height:20px; border-radius:50%; background:var(--panel-3); border:2px solid var(--line); display:grid; place-items:center}
.tl-node.reached .tl-dot{background:var(--emerald); border-color:var(--emerald); color:#04140f}
.tl-node.current .tl-dot{background:var(--orange); border-color:var(--orange); box-shadow:0 0 0 4px var(--orange-soft)}
.tl-dot svg{width:11px; height:11px}
.tl-state{font-size:13.5px; font-weight:700}
.tl-node.reached .tl-state{color:var(--text)}
.tl-node:not(.reached) .tl-state{color:var(--text-3)}
.tl-cond{font-size:11.5px; color:var(--text-2); margin-top:2px}
.tl-when{font-size:10.5px; color:var(--text-3); margin-top:3px}

/* ——— sub-cards inside drawer ——— */
.sub{margin-top:16px}
.sub h4{font-size:12.5px; font-weight:700; color:var(--text-2); margin-bottom:10px; display:flex; align-items:center; gap:7px}
.sub h4 .tag{font-size:10px; font-weight:600; color:var(--text-3); background:var(--panel-3); padding:2px 7px; border-radius:6px}

/* jobs list */
.job{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); margin-bottom:8px; transition:opacity .3s, background .3s}
.job .j-ico{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--panel-3); color:var(--text-2); flex-shrink:0}
.job .j-main{flex:1; min-width:0}
.job .j-label{font-size:12.5px; font-weight:600}
.job .j-sub{font-size:11px; color:var(--text-2); margin-top:2px}
.job .j-due{font-size:11px; font-weight:700; color:var(--emerald); white-space:nowrap}
.job.cancelled{opacity:.5}
.job.cancelled .j-label{text-decoration:line-through; text-decoration-color:var(--red); text-decoration-thickness:2px}
.job.cancelled .j-due{color:var(--red)}
.job.paused{border-style:dashed; opacity:.8}
.job.paused .j-due{color:var(--amber)}
.job.strike-anim{animation:strike .5s ease forwards}
@keyframes strike{0%{background:var(--red-soft)} 100%{background:var(--panel)}}

/* ledger */
.ledger-item{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-soft)}
.ledger-item:last-child{border-bottom:0}
.ledger-item .li-ch{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; font-size:13px}
.li-ch.whatsapp{background:var(--emerald-soft); color:var(--emerald)}
.li-ch.call{background:var(--blue-soft); color:var(--blue)}
.li-ch.system{background:var(--panel-3); color:var(--text-2)}
.ledger-item .li-body{flex:1; min-width:0}
.ledger-item .li-txt{font-size:12.5px}
.ledger-item .li-meta{font-size:10.5px; color:var(--text-3); margin-top:3px}
.dir-in{border-inline-start:2px solid var(--blue); padding-inline-start:8px}

/* ——— modal ——— */
.modal-scrim{position:fixed; inset:0; background:var(--scrim); z-index:60; display:grid; place-items:end center; backdrop-filter:blur(3px); animation:fade .2s}
@media(min-width:600px){ .modal-scrim{place-items:center} }
.modal{
  width:min(520px,100%); max-height:90vh; overflow-y:auto; background:var(--panel); border:1px solid var(--line);
  border-radius:20px 20px 0 0; box-shadow:var(--shadow); padding:20px 18px 22px; animation:slideUp .28s cubic-bezier(.2,.7,.2,1);
}
@media(min-width:600px){ .modal{border-radius:20px} }
@keyframes slideUp{from{transform:translateY(30px); opacity:.5} to{transform:none; opacity:1}}
.modal-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.modal-h h3{font-size:15px; font-weight:700}
.modal-h .x{background:var(--panel-2); border:1px solid var(--line); border-radius:9px; width:32px; height:32px; color:var(--text-2); font-size:17px}

/* dunning draft */
.tier-badge{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:99px; font-size:11.5px; font-weight:700}
.tier-friendly{background:var(--emerald-soft); color:var(--emerald)}
.tier-firm{background:var(--amber-soft); color:var(--amber)}
.tier-legal{background:var(--red-soft); color:var(--red)}
.src-badge{font-size:10px; font-weight:600; padding:3px 8px; border-radius:6px; background:var(--panel-3); color:var(--text-2)}
.src-badge.ai{color:var(--blue); background:var(--blue-soft)}
.src-badge.offline{color:var(--amber); background:var(--amber-soft)}
.draft-body{background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:15px 15px; font-size:14px; line-height:2.1; margin:12px 0; min-height:120px}
.type-caret{display:inline-block; width:2px; height:1.05em; background:var(--emerald); vertical-align:-2px; margin-inline-start:1px; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.chip{
  display:inline; font-weight:700; color:var(--emerald); background:var(--emerald-soft);
  padding:2px 8px; border-radius:7px; white-space:nowrap; box-shadow:inset 0 0 0 1px var(--emerald-soft);
  position:relative;
}
.chip::after{content:"◆"; font-size:7px; vertical-align:super; margin-inline-start:3px; opacity:.6}
.draft-legend{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-2); background:var(--emerald-soft); border-radius:10px; padding:9px 11px; margin-bottom:6px}
.draft-legend b{color:var(--emerald)}

/* wa policy */
.policy-list{list-style:none; margin:12px 0}
.policy-list li{display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:12.5px}
.policy-list li:last-child{border-bottom:0}
.policy-list .badge-meta{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--emerald-soft); color:var(--emerald); flex-shrink:0}
.wa-preview{background:#0b141a; color:#e6edf0; border-radius:14px 14px 14px 4px; padding:12px 13px; font-size:13px; line-height:1.9; margin:6px 0 4px; border:1px solid #1c2b33}
:root[data-theme="light"] .wa-preview{background:#dcf8c6; color:#111b21; border-color:#c5ecb0}

/* ——— toast ——— */
.toast-host{position:fixed; inset-block-end:18px; inset-inline:0; z-index:80; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none}
.toast{
  pointer-events:auto; background:var(--panel); border:1px solid var(--line); color:var(--text);
  border-radius:13px; padding:12px 16px; font-size:13px; font-weight:600; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:9px; max-width:92vw; animation:toastIn .3s;
}
@keyframes toastIn{from{transform:translateY(20px); opacity:0} to{transform:none; opacity:1}}
.toast.ok{border-color:var(--emerald); }
.toast.ok .t-ico{color:var(--emerald)}
.toast.err{border-color:var(--red)} .toast.err .t-ico{color:var(--red)}
.toast .t-ico{flex-shrink:0}

.empty{text-align:center; color:var(--text-3); padding:30px 10px; font-size:13px}
.spinner{width:18px; height:18px; border:2.5px solid var(--line); border-top-color:var(--emerald); border-radius:50%; animation:spin .7s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--panel-2),var(--panel-3),var(--panel-2)); background-size:200% 100%; animation:sk 1.3s infinite; border-radius:12px; height:64px; margin-bottom:10px}
@keyframes sk{to{background-position:-200% 0}}
.mini-note{font-size:11px; color:var(--text-3); margin-top:8px; display:flex; gap:6px; align-items:flex-start}

/* ——— copilot ——— */
.cp-fab{position:fixed; inset-block-end:18px; left:16px; z-index:30; display:inline-flex; align-items:center; gap:8px;
  color:#04140f; background:linear-gradient(135deg,var(--emerald),var(--emerald-2)); border:0; border-radius:16px;
  padding:13px 16px; font-family:inherit; font-size:13.5px; font-weight:700; box-shadow:0 10px 26px rgba(18,179,166,.4);
  transition:transform .15s, box-shadow .15s}
.cp-fab:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(18,179,166,.5)}
.cp-fab-lbl{display:none}
@media(min-width:480px){ .cp-fab-lbl{display:inline} }
.co-chat{display:flex; flex-direction:column; gap:9px; max-height:44vh; overflow-y:auto; margin-bottom:12px; min-height:60px}
.co-msg{max-width:88%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.9}
.co-msg.user{align-self:flex-start; background:var(--panel-3); border-bottom-inline-start-radius:4px}
.co-msg.bot{align-self:flex-end; background:var(--emerald-soft); border:1px solid var(--emerald-soft); border-bottom-inline-end-radius:4px}
.co-msg.bot b{color:var(--emerald)}
.co-chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px}
.co-chip{font-size:12px; font-weight:600; color:var(--text-2); background:var(--panel-2); border:1px solid var(--line);
  border-radius:99px; padding:7px 12px; transition:color .15s, border-color .15s}
.co-chip:hover{color:var(--emerald); border-color:var(--emerald-2)}
.co-input{display:flex; gap:8px}
.co-input input{flex:1; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--panel-2);
  color:var(--text); font-family:inherit; font-size:13.5px}
.co-input input:focus{outline:none; border-color:var(--emerald); box-shadow:0 0 0 3px var(--emerald-soft)}
.co-input button{width:46px; border:0; border-radius:12px; background:linear-gradient(135deg,var(--emerald),var(--emerald-2)); color:#04140f; display:grid; place-items:center; cursor:pointer}

/* driver.js theme tweaks */
.driver-popover{border-radius:14px !important; font-family:"IBM Plex Sans Arabic",sans-serif !important}
.driver-popover-title{font-size:15px !important}
.driver-popover-description{font-size:13px !important; line-height:1.8 !important}