/* ════════════════════════════════════════════════════════════════════════
   Capital CRM — Design System v1
   Tokens → Base → Layout → Components → Pages → Responsive
   كل الشاشات بتستخدم نفس التوكنز والمكونات. اتجاه الصفحة (RTL/LTR) بيتحدد من <html dir>
   وكل المسافات بخصائص logical (inline-start / inline-end) عشان الاتجاهين يشتغلوا من غير تعديل.
   ════════════════════════════════════════════════════════════════════════ */

/* ───────── 1. Tokens */
:root{
  /* الألوان */
  --navy:#172B4D; --navy-2:#22385F; --navy-soft:#E8ECF3;
  --blue:#3978C5; --blue-2:#2F66AB; --blue-soft:#EAF1FA;
  --bg:#F6F8FB; --surface:#FFFFFF; --subtle:#F9FAFC; --hover:#F2F5F9;
  --text:#202938; --text-2:#4A5568; --muted:#718096; --faint:#A0AEC0;
  --border:#E7EBF0; --border-2:#D9DFE7;
  --success:#16A37A; --success-soft:#E7F6F1;
  --warning:#E8A23A; --warning-soft:#FDF4E6; --warning-ink:#9A6512;
  --danger:#DC6262;  --danger-soft:#FCEDED;  --danger-ink:#B44444;
  --info:#3978C5;    --info-soft:#EAF1FA;
  --violet:#7C6BD6;  --violet-soft:#F0EEFB;
  /* بيانات الرسوم (بالترتيب) */
  --c1:#3978C5; --c2:#172B4D; --c3:#16A37A; --c4:#E8A23A; --c5:#9DB8DE; --c6:#CBD5E1;

  /* المسافات — نظام 8px */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:40px; --s-8:48px;
  /* الخطوط */
  --font:"Inter","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:24px;
  --lh:1.55;
  /* الحواف والظلال — هادية */
  --r-sm:6px; --r:8px; --r-lg:12px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(23,43,77,.05);
  --sh-2:0 1px 3px rgba(23,43,77,.06),0 4px 12px rgba(23,43,77,.04);
  --sh-pop:0 12px 32px rgba(23,43,77,.16);
  --ring:0 0 0 3px rgba(57,120,197,.18);
  /* المقاسات */
  --sidebar:248px; --sidebar-min:68px; --topbar:60px; --control:36px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ───────── 2. Base */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--font);font-size:var(--fs-md);line-height:var(--lh);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
h1,h2,h3,h4{margin:0;font-weight:600;color:var(--text);letter-spacing:-.005em}
p{margin:0}
a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
.hidden{display:none!important}
.muted{color:var(--muted)} .faint{color:var(--faint)} .xs{font-size:var(--fs-xs)} .sm{font-size:var(--fs-sm)} .lg{font-size:var(--fs-lg)}
.strong{font-weight:600} .nowrap{white-space:nowrap} .grow{flex:1} .end{margin-inline-start:auto}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
td.num,th.num{display:table-cell;direction:inherit} div.num{display:block;text-align:start}
.row{display:flex;align-items:center;gap:var(--s-2)} .row.wrap{flex-wrap:wrap} .row.between{justify-content:space-between}
.col-stack{display:grid;gap:var(--s-4);align-content:start} .col-stack.tight{gap:var(--s-2)}
.grid{display:grid;gap:var(--s-4)} .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))}
.split{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s-4);align-items:start}
.grid>*,.split>*,.col-stack>*{min-width:0}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.ico.sm{width:16px;height:16px} .ico.lg{width:22px;height:22px}
[dir=rtl] .flip,[dir=rtl] .flip-l{transform:scaleX(-1)} [dir=ltr] .flip-r{transform:scaleX(-1)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#D5DCE5;border-radius:10px;border:3px solid transparent;background-clip:padding-box}

/* ───────── 3. Layout */
.app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh;transition:grid-template-columns .2s var(--ease)}
.app.collapsed{grid-template-columns:var(--sidebar-min) minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;background:var(--navy);color:#C9D3E3;display:flex;flex-direction:column;padding:var(--s-3) var(--s-2);overflow-x:hidden;overflow-y:auto}
.brand{display:flex;align-items:center;gap:var(--s-2);height:44px;padding:0 var(--s-2);margin-bottom:var(--s-3);color:#fff;font-weight:600;font-size:var(--fs-lg);white-space:nowrap}
.brand-mark{width:28px;height:20px;flex:none;border-radius:10px 3px 10px 3px;background:linear-gradient(135deg,#5B9BE0,#3978C5);transform:skewX(-12deg)}
.nav-group{margin-top:var(--s-3)}
.nav-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:#7F90AE;padding:var(--s-1) var(--s-3);white-space:nowrap}
.nav-item{display:flex;align-items:center;gap:var(--s-3);height:38px;padding:0 var(--s-3);border-radius:var(--r);color:#C9D3E3;font-weight:500;white-space:nowrap;position:relative;transition:background .15s}
.nav-item:hover{background:rgba(255,255,255,.06);text-decoration:none;color:#fff}
.nav-item.on{background:rgba(255,255,255,.1);color:#fff}
.nav-item.on::before{content:"";position:absolute;inset-inline-start:-8px;top:8px;bottom:8px;width:3px;border-radius:3px;background:#5B9BE0}
.nav-item .cnt{margin-inline-start:auto;background:var(--danger);color:#fff;border-radius:var(--r-pill);font-size:10.5px;line-height:18px;min-width:18px;text-align:center;padding:0 5px}
.side-foot{margin-top:auto;display:grid;gap:var(--s-1);border-top:1px solid rgba(255,255,255,.08);padding-top:var(--s-2)}
.app.collapsed .nav-label,.app.collapsed .nav-item span:not(.cnt),.app.collapsed .brand span:not(.brand-mark){display:none}
.app.collapsed .nav-item{justify-content:center;padding:0} .app.collapsed .nav-item .cnt{position:absolute;top:3px;inset-inline-end:6px}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;height:var(--topbar);display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-5);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.crumbs{display:flex;align-items:center;gap:var(--s-1);color:var(--muted);font-size:var(--fs-sm);min-width:0;white-space:nowrap;overflow:hidden}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--text);text-decoration:none} .crumbs b{color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.crumbs .sep{opacity:.5}
.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--s-2)}
.search-trigger{display:flex;align-items:center;gap:var(--s-2);height:var(--control);min-width:260px;padding:0 var(--s-3);border:1px solid var(--border);border-radius:var(--r);background:var(--subtle);color:var(--muted);cursor:pointer}
.search-trigger:hover{border-color:var(--border-2)} .search-trigger span{flex:1;text-align:start}
kbd{font-family:var(--font);font-size:10.5px;color:var(--muted);background:#fff;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:0 5px;direction:ltr}
.content{padding:var(--s-5);display:grid;gap:var(--s-4);align-content:start;max-width:1560px;width:100%;margin:0 auto}
.content>*{min-width:0}
.page-head{display:flex;align-items:flex-end;gap:var(--s-3);flex-wrap:wrap}
.page-head h1{font-size:var(--fs-2xl);font-weight:600} .page-head .sub{color:var(--muted);font-size:var(--fs-sm);margin-top:2px}
.page-head .actions{margin-inline-start:auto;display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}
.section-title{font-size:var(--fs-sm);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* ───────── 4. Components */
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:var(--control);padding:0 var(--s-4);border-radius:var(--r);border:1px solid var(--border-2);background:var(--surface);color:var(--text);font-weight:500;font-size:var(--fs-md);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--hover);text-decoration:none}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff} .btn.primary:hover{background:var(--navy-2)}
.btn.accent{background:var(--blue);border-color:var(--blue);color:#fff} .btn.accent:hover{background:var(--blue-2)}
.btn.ghost{background:transparent;border-color:transparent} .btn.ghost:hover{background:var(--hover)}
.btn.danger{color:var(--danger-ink)} .btn.danger:hover{background:var(--danger-soft);border-color:#F2C9C9}
.btn.sm{height:30px;padding:0 var(--s-3);font-size:var(--fs-sm)} .btn.xs{height:26px;padding:0 var(--s-2);font-size:var(--fs-xs)}
.btn.icon{width:var(--control);padding:0} .btn.sm.icon{width:30px}
.btn.block{width:100%} .btn:disabled{opacity:.45;cursor:not-allowed}
.icon-btn{position:relative;display:grid;place-items:center;width:var(--control);height:var(--control);border-radius:var(--r);border:1px solid transparent;background:transparent;color:var(--text-2);cursor:pointer}
.icon-btn:hover{background:var(--hover)} .sidebar .icon-btn{color:#C9D3E3} .sidebar .icon-btn:hover{background:rgba(255,255,255,.06)}
.dot-count{position:absolute;top:3px;inset-inline-end:3px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill);background:var(--danger);color:#fff;font-size:10px;line-height:16px;text-align:center;font-weight:600;border:2px solid #fff;box-sizing:content-box}
.avatar{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--blue-soft);color:var(--blue-2);font-weight:600;font-size:var(--fs-sm);flex:none;border:none;cursor:pointer}
.avatar.lg{width:48px;height:48px;font-size:var(--fs-lg)}

/* Forms */
.input,input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;height:var(--control);padding:0 var(--s-3);border:1px solid var(--border-2);border-radius:var(--r);background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s;font-size:var(--fs-md)}
textarea{height:auto;padding:var(--s-2) var(--s-3);resize:vertical;min-height:72px}
select[multiple]{height:auto;padding:var(--s-1)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:var(--faint)}
.field{display:grid;gap:6px} .field>span{font-size:var(--fs-sm);color:var(--text-2);font-weight:500} .field .hint{font-size:var(--fs-xs);color:var(--muted)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-4)} .form .full{grid-column:1/-1}
.input-icon{position:relative} .input-icon .ico{position:absolute;inset-inline-start:var(--s-3);top:50%;transform:translateY(-50%);color:var(--faint)} .input-icon input{padding-inline-start:36px!important}
.check{display:inline-flex;align-items:center;gap:var(--s-2);cursor:pointer;font-size:var(--fs-md)} .check input{width:16px;height:16px;accent-color:var(--blue)}
.switch{display:inline-flex;align-items:center;gap:var(--s-2);cursor:pointer;font-size:var(--fs-md)}
.switch input{display:none} .switch i{width:34px;height:20px;border-radius:var(--r-pill);background:var(--border-2);position:relative;flex:none;transition:background .2s}
.switch i::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:inset-inline-start .2s var(--ease)}
.switch input:checked+i{background:var(--success)} .switch input:checked+i::after{inset-inline-start:16px}
.choice{display:flex;flex-wrap:wrap;gap:var(--s-2)} .choice input{display:none}
.choice label{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 var(--s-3);border-radius:var(--r);border:1px solid var(--border-2);cursor:pointer;font-size:var(--fs-sm);color:var(--text-2);background:var(--surface)}
.choice input:checked+label{background:var(--navy);border-color:var(--navy);color:#fff}

/* Card */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card-head{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-4) var(--s-4) 0;min-height:44px}
.card-head h3{font-size:var(--fs-lg);font-weight:600} .card-head .sub{color:var(--muted);font-size:var(--fs-sm)} .card-head .tools{margin-inline-start:auto;display:flex;gap:var(--s-2);align-items:center}
.card-body{padding:var(--s-4)} .card-body.flush{padding:0} .card-foot{padding:var(--s-3) var(--s-4);border-top:1px solid var(--border);display:flex;gap:var(--s-2);align-items:center}
.card.pad{padding:var(--s-4)}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s-3)}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-4);display:grid;gap:var(--s-1);box-shadow:var(--sh-1);min-width:0}
.kpi .k-head{display:flex;align-items:center;gap:var(--s-2);color:var(--text-2);font-size:var(--fs-sm);font-weight:500}
.kpi .k-ico{width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);margin-inline-start:auto}
.kpi .k-ico .ico{width:16px;height:16px}
.kpi .k-val{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .k-val small{font-size:var(--fs-sm);font-weight:500;color:var(--muted);margin-inline-start:4px}
.kpi .k-foot{font-size:var(--fs-xs);color:var(--muted);display:flex;gap:4px;align-items:center}
.trend{font-weight:600;display:inline-flex;align-items:center;gap:2px} .trend.up{color:var(--success)} .trend.down{color:var(--danger-ink)} .trend.flat{color:var(--muted)}
.kpi.tone-danger .k-ico{background:var(--danger-soft);color:var(--danger-ink)} .kpi.tone-danger .k-val{color:var(--danger-ink)}
.kpi.tone-success .k-ico{background:var(--success-soft);color:var(--success)} .kpi.tone-warning .k-ico{background:var(--warning-soft);color:var(--warning-ink)}
.kpi.tone-navy .k-ico{background:var(--navy-soft);color:var(--navy)}

/* Badges (حالات موحدة) */
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 var(--s-2);border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:600;white-space:nowrap;background:var(--hover);color:var(--text-2)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.badge.plain::before{display:none}
.b-blue{background:var(--blue-soft);color:var(--blue-2)} .b-navy{background:var(--navy-soft);color:var(--navy)} .b-green{background:var(--success-soft);color:#0F7E5E}
.b-amber{background:var(--warning-soft);color:var(--warning-ink)} .b-red{background:var(--danger-soft);color:var(--danger-ink)} .b-violet{background:var(--violet-soft);color:#5B4BB8} .b-gray{background:var(--hover);color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 var(--s-2);border-radius:var(--r-sm);border:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-2);background:var(--surface);white-space:nowrap}
.score{display:inline-grid;place-items:center;min-width:32px;height:22px;padding:0 6px;border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:700;direction:ltr}
.score.hi{background:var(--success-soft);color:#0F7E5E} .score.mid{background:var(--blue-soft);color:var(--blue-2)} .score.lo{background:var(--hover);color:var(--muted)}

/* Segmented / tabs */
.seg{display:inline-flex;padding:3px;gap:2px;background:var(--hover);border-radius:var(--r);border:1px solid var(--border)}
.seg button{height:28px;padding:0 var(--s-3);border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--text-2);font-size:var(--fs-sm);font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--sh-1)}
.tabs{display:flex;gap:var(--s-5);border-bottom:1px solid var(--border);overflow-x:auto}
.tabs button{border:none;background:none;padding:var(--s-3) 0;cursor:pointer;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.tabs button.on{color:var(--text);border-color:var(--navy)}

/* Toolbar / filters */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.toolbar>select,.toolbar>input{width:auto;min-width:150px}
.toolbar .search{min-width:240px}
.chip-filter{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 var(--s-3);border-radius:var(--r-pill);background:var(--blue-soft);color:var(--blue-2);font-size:var(--fs-sm);font-weight:500}
.chip-filter button{border:none;background:none;cursor:pointer;color:inherit;padding:0;display:grid}

/* Data table */
.dt{display:grid}
.dt-tools{display:flex;gap:var(--s-2);align-items:center;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--border);flex-wrap:wrap}
.dt-tools .search{max-width:260px}
.dt-wrap{overflow:auto;max-height:68vh}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-md)}
thead th{position:sticky;top:0;z-index:2;background:var(--subtle);color:var(--muted);font-weight:500;font-size:var(--fs-sm);text-align:start;padding:0 var(--s-4);height:40px;border-bottom:1px solid var(--border);white-space:nowrap;user-select:none}
th.sortable{cursor:pointer} th.sortable:hover{color:var(--text)} th .si{opacity:.35;margin-inline-start:4px;font-size:10px} th.sorted .si{opacity:1;color:var(--blue)}
tbody td{padding:0 var(--s-4);height:48px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--subtle)} tbody tr.clickable{cursor:pointer}
tbody tr.selected td{background:var(--blue-soft)}
td.n,th.n{text-align:end;font-variant-numeric:tabular-nums} td.c,th.c{text-align:center}
td .cell-main{font-weight:500;color:var(--text);white-space:nowrap} td .cell-sub{font-size:var(--fs-xs);color:var(--muted)}
.row-actions{display:flex;gap:4px;justify-content:flex-end;opacity:.6} tr:hover .row-actions{opacity:1}
tfoot td{padding:var(--s-3) var(--s-4);background:var(--subtle);font-weight:600;border-top:1px solid var(--border)}
.dt-foot{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-4);border-top:1px solid var(--border);color:var(--muted);font-size:var(--fs-sm)}
.dt-foot .pager{margin-inline-start:auto;display:flex;gap:4px;align-items:center}
.dt-bulk{display:flex;gap:var(--s-2);align-items:center;padding:var(--s-2) var(--s-4);background:var(--blue-soft);color:var(--blue-2);font-size:var(--fs-sm);font-weight:500}

/* Empty / skeleton */
.empty{display:grid;justify-items:center;gap:var(--s-2);padding:var(--s-7) var(--s-4);text-align:center;color:var(--muted)}
.empty .e-ico{width:48px;height:48px;border-radius:50%;background:var(--hover);display:grid;place-items:center;color:var(--faint)}
.empty .e-title{color:var(--text);font-weight:600}
.skel{border-radius:var(--r-lg);background:linear-gradient(90deg,#EEF2F6 25%,#F6F8FB 50%,#EEF2F6 75%);background-size:200% 100%;animation:skel 1.2s infinite linear}
@keyframes skel{to{background-position:-200% 0}}

/* Lists */
.list{display:grid}
.list-item{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--border);min-width:0}
.list-item:last-child{border-bottom:none} .list-item.clickable{cursor:pointer} .list-item.clickable:hover{background:var(--subtle)}
.list-item .li-ico{width:32px;height:32px;border-radius:var(--r);display:grid;place-items:center;flex:none;background:var(--hover);color:var(--text-2)}
.list-item .li-main{min-width:0;flex:1} .list-item .li-title{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .list-item .li-sub{font-size:var(--fs-xs);color:var(--muted)}
.li-ico.blue{background:var(--blue-soft);color:var(--blue)} .li-ico.red{background:var(--danger-soft);color:var(--danger-ink)} .li-ico.amber{background:var(--warning-soft);color:var(--warning-ink)} .li-ico.violet{background:var(--violet-soft);color:#5B4BB8} .li-ico.green{background:var(--success-soft);color:var(--success)}

/* Callout / insight */
.callout{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border-radius:var(--r);border:1px solid var(--border);background:var(--subtle);font-size:var(--fs-md)}
.callout .ico{margin-top:2px}
.callout.info{background:var(--blue-soft);border-color:#D3E2F4;color:#21497A} .callout.success{background:var(--success-soft);border-color:#C9EADF;color:#0F6B50}
.callout.warning{background:var(--warning-soft);border-color:#F4DDB5;color:var(--warning-ink)} .callout.danger{background:var(--danger-soft);border-color:#F2CFCF;color:var(--danger-ink)}

/* Progress / meters */
.meter{height:6px;border-radius:var(--r-pill);background:var(--hover);overflow:hidden;display:flex;gap:2px} .meter i{display:block;height:100%;border-radius:var(--r-pill)}
.meter.lg{height:10px}
.legend{display:flex;flex-wrap:wrap;gap:var(--s-3);font-size:var(--fs-sm);color:var(--text-2)}
.legend span{display:inline-flex;align-items:center;gap:6px} .legend span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c)}
.hbar{display:grid;grid-template-columns:minmax(90px,130px) 1fr 64px;gap:var(--s-3);align-items:center;font-size:var(--fs-sm);padding:6px 0}
.hbar .track{height:8px;background:var(--hover);border-radius:var(--r-pill);position:relative;overflow:hidden}
.hbar .track i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:var(--r-pill);background:var(--c1)} .hbar .track i.b{background:var(--c3)}
.hbar b{text-align:end;font-weight:500}
.ring{--p:50;--c:var(--blue);width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--hover) 0);display:grid;place-items:center;flex:none}
.ring b{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:var(--fs-xl);font-weight:600}
.chart{width:100%;height:220px;display:block;direction:ltr}

/* Popover / menu */
.pop{position:absolute;z-index:40;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-pop);min-width:220px;padding:var(--s-1);animation:in .12s var(--ease)}
.pop .pop-head{padding:var(--s-3) var(--s-3) var(--s-2);border-bottom:1px solid var(--border);margin-bottom:var(--s-1)}
.menu-item{display:flex;align-items:center;gap:var(--s-2);width:100%;height:36px;padding:0 var(--s-3);border:none;background:none;border-radius:var(--r-sm);cursor:pointer;color:var(--text);text-align:start;font-size:var(--fs-md)}
.menu-item:hover{background:var(--hover);text-decoration:none}
.menu-sep{height:1px;background:var(--border);margin:var(--s-1) 0}
.notif{display:grid;gap:2px;padding:var(--s-3);border-radius:var(--r);cursor:pointer} .notif:hover{background:var(--hover)}
.notif.unread{background:var(--blue-soft)} .notif b{font-weight:500}

/* Modal / drawer / palette / toast */
.overlay{position:fixed;inset:0;background:rgba(23,43,77,.36);display:grid;place-items:center;z-index:50;padding:var(--s-4);animation:fade .15s}
.modal-card{background:var(--surface);border-radius:var(--r-lg);width:min(640px,100%);max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--sh-pop);animation:in .18s var(--ease)}
.modal-card.sm{width:min(440px,100%)} .modal-card.lg{width:min(880px,100%)}
.modal-head{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--border)} .modal-head h3{font-size:var(--fs-lg)}
.modal-body{padding:var(--s-5);overflow:auto;display:grid;gap:var(--s-4)}
.modal-foot{display:flex;gap:var(--s-2);justify-content:flex-end;padding:var(--s-3) var(--s-5);border-top:1px solid var(--border);background:var(--subtle);border-radius:0 0 var(--r-lg) var(--r-lg)}
.palette{place-items:start center;padding-top:12vh}
.palette-card{width:min(620px,94vw);background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-pop);overflow:hidden;animation:in .14s var(--ease)}
.palette-card .p-input{display:flex;align-items:center;gap:var(--s-2);padding:0 var(--s-4);border-bottom:1px solid var(--border)}
.palette-card .p-input input{border:none;box-shadow:none;height:52px;font-size:var(--fs-lg);padding:0}
.p-res{max-height:52vh;overflow:auto;padding:var(--s-2)}
.p-group{font-size:var(--fs-xs);color:var(--muted);padding:var(--s-2) var(--s-3) var(--s-1);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.p-row{display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-3);height:40px;border-radius:var(--r);cursor:pointer} .p-row.sel,.p-row:hover{background:var(--blue-soft)}
.p-row .p-sub{margin-inline-start:auto;color:var(--muted);font-size:var(--fs-sm)}
.p-foot{display:flex;gap:var(--s-4);padding:var(--s-2) var(--s-4);border-top:1px solid var(--border);font-size:var(--fs-xs);color:var(--muted);background:var(--subtle)}
.toasts{position:fixed;bottom:var(--s-5);inset-inline-end:var(--s-5);z-index:70;display:grid;gap:var(--s-2)}
.toast{display:flex;align-items:center;gap:var(--s-2);min-width:260px;max-width:420px;padding:var(--s-3) var(--s-4);border-radius:var(--r);background:var(--navy);color:#fff;box-shadow:var(--sh-pop);animation:in .2s var(--ease);font-size:var(--fs-md)}
.toast.error{background:#8F2F2F} .toast.success .ico{color:#7EE0BE}
@keyframes fade{from{opacity:0}} @keyframes in{from{opacity:0;transform:translateY(6px)}}

/* ───────── 5. Pages */
/* Login */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);background:var(--surface)}
.login-panel{display:grid;place-items:center;padding:var(--s-6)}
.login-form{width:min(380px,100%);display:grid;gap:var(--s-4)}
.login-form h1{font-size:28px;margin-top:var(--s-6)}
.login-side{background:var(--navy);color:#fff;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:var(--s-8)}
.login-side svg.bg{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.login-side .quote{position:relative;max-width:440px;display:grid;gap:var(--s-2)} .login-side .quote h2{color:#fff;font-size:28px;line-height:1.3}
.login-side .quote p{color:#B9C6DB}
.login .brand{color:var(--navy);padding:0;margin:0}

/* Pipeline board */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:var(--s-3);overflow-x:auto;padding-bottom:var(--s-2)}
.lane{background:var(--subtle);border:1px solid var(--border);border-radius:var(--r-lg);display:flex;flex-direction:column;min-height:420px}
.lane-head{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-3) var(--s-2);font-weight:600}
.lane-head .badge{margin-inline-start:auto}
.lane-body{display:grid;gap:var(--s-2);padding:0 var(--s-2) var(--s-2);align-content:start;flex:1}
.lane.drop{border-color:var(--blue);background:var(--blue-soft)}
.deal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s-3);display:grid;gap:6px;cursor:grab;box-shadow:var(--sh-1);transition:border-color .15s,box-shadow .15s}
.deal:hover{border-color:var(--border-2);box-shadow:var(--sh-2)}
.deal.late{border-inline-start:3px solid var(--danger)}
.deal .d-top{display:flex;gap:var(--s-2);align-items:center} .deal .d-name{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deal .d-meta{display:flex;justify-content:space-between;gap:var(--s-2);font-size:var(--fs-xs);color:var(--muted)}

/* Profile header (عميل / موظف / فريق) */
.profile{display:flex;gap:var(--s-4);align-items:center;flex-wrap:wrap;padding:var(--s-4)}
.profile .p-name{font-size:var(--fs-xl);font-weight:600}
.profile .p-meta{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.profile .p-actions{margin-inline-start:auto;display:flex;gap:var(--s-2);flex-wrap:wrap}
.stepper{display:flex;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.stepper button{flex:1;min-width:84px;height:38px;border:none;background:none;border-inline-end:1px solid var(--border);cursor:pointer;font-size:var(--fs-sm);font-weight:500;color:var(--muted);white-space:nowrap}
.stepper button:last-child{border-inline-end:none}
.stepper button.done{background:var(--blue-soft);color:var(--blue-2)} .stepper button.on{background:var(--navy);color:#fff}
.stepper button.lost.on{background:var(--danger)}
.kv{display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--s-3) var(--s-4);font-size:var(--fs-md)} .kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.timeline{display:grid;max-height:560px;overflow:auto}
.tl-item{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--s-3);padding:var(--s-3) var(--s-4);position:relative}
.tl-item:not(:last-child)::after{content:"";position:absolute;inset-inline-start:calc(var(--s-4) + 15px);top:44px;bottom:-4px;width:1px;background:var(--border)}
.tl-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--hover);color:var(--text-2)} .tl-dot .ico{width:15px;height:15px}
.tl-head{display:flex;justify-content:space-between;gap:var(--s-2);font-size:var(--fs-sm)} .tl-head b{font-weight:600} .tl-head span{color:var(--muted);font-size:var(--fs-xs);white-space:nowrap}
.tl-body{font-size:var(--fs-md);color:var(--text-2);margin-top:2px}
.next-step{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-4);border-radius:var(--r);background:var(--blue-soft);border:1px solid #D3E2F4}
.next-step .ns-ico{width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;background:#fff;color:var(--blue);flex:none}
.next-step .ns-label{font-size:var(--fs-xs);color:var(--blue-2);font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* Projects & units */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s-3)}
.proj{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;box-shadow:var(--sh-1);transition:box-shadow .15s}
.proj:hover{box-shadow:var(--sh-2)}
.proj .art{height:96px;position:relative} .proj .art svg{width:100%;height:100%;display:block}
.proj .p-body{padding:var(--s-3) var(--s-4);display:grid;gap:var(--s-2)}
.proj .p-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);font-size:var(--fs-xs);color:var(--muted)} .proj .p-stats b{display:block;font-size:var(--fs-md);color:var(--text);font-weight:600}
.units-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s-3)}
.unit{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-1)}
.unit .art{height:88px;position:relative} .unit .art svg{width:100%;height:100%;display:block}
.unit .art .badge{position:absolute;top:var(--s-2);inset-inline-start:var(--s-2);background:#fff;box-shadow:var(--sh-1)}
.unit .u-body{padding:var(--s-3);display:grid;gap:var(--s-2);flex:1}
.unit .u-price{font-size:var(--fs-lg);font-weight:600}
.specs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.specs div{padding:6px;text-align:center;border-inline-start:1px solid var(--border)} .specs div:first-child{border-inline-start:none}
.specs b{display:block;font-size:var(--fs-md);font-weight:600} .specs span{font-size:var(--fs-xs);color:var(--muted)}
.code{font-family:ui-monospace,Consolas,monospace;font-size:var(--fs-xs);background:var(--subtle);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px var(--s-2);direction:ltr;text-align:left;word-break:break-all}

/* Calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-h{padding:var(--s-2) var(--s-3);font-size:var(--fs-sm);color:var(--muted);font-weight:500;border-bottom:1px solid var(--border);background:var(--subtle)}
.cal-d{min-height:118px;padding:6px;border-bottom:1px solid var(--border);border-inline-end:1px solid var(--border);display:grid;gap:3px;align-content:start;min-width:0}
.cal-d:nth-child(7n){border-inline-end:none} .cal-d.out{background:var(--subtle)} .cal-d.out .cal-n{color:var(--faint)}
.cal-n{font-size:var(--fs-sm);font-weight:600;width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
.cal-d.today .cal-n{background:var(--navy);color:#fff}
.cal-ev{display:block;font-size:11px;line-height:1.35;padding:2px 6px;border-radius:4px;background:var(--blue-soft);color:var(--blue-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-inline-start:2px solid var(--blue)}
.cal-ev:hover{text-decoration:none;filter:brightness(.97)} .cal-ev.visit{background:var(--violet-soft);color:#5B4BB8;border-color:var(--violet)}
.cal-ev.task{background:var(--warning-soft);color:var(--warning-ink);border-color:var(--warning)} .cal-ev.done{background:var(--success-soft);color:#0F7E5E;border-color:var(--success);text-decoration:line-through}

/* Print (عرض السعر) */
@media print{
  body{background:#fff} .sidebar,.topbar,.page-head,.toasts,#layer{display:none!important}
  .app{display:block} .content{padding:0;max-width:none} .card{box-shadow:none;border:none} .print-doc .card{border:1px solid var(--border)}
  .dt-wrap{max-height:none!important;overflow:visible} thead th{position:static}
}

/* Design guide */
.swatch{display:grid;gap:4px;font-size:var(--fs-xs)} .swatch i{display:block;height:56px;border-radius:var(--r);border:1px solid var(--border)}

/* ───────── 6. Responsive */
@media (max-width:1280px){ .split{grid-template-columns:1fr} .search-trigger{min-width:0} .search-trigger span,.search-trigger kbd{display:none} }
@media (max-width:960px){
  .app,.app.collapsed{grid-template-columns:1fr}
  .sidebar{position:fixed;inset-block:0;inset-inline-start:0;width:var(--sidebar);z-index:60;transform:translateX(100%);transition:transform .2s var(--ease)}
  [dir=ltr] .sidebar{transform:translateX(-100%)}
  .app.mobile-open .sidebar{transform:none}
  .app.collapsed .nav-label,.app.collapsed .nav-item span:not(.cnt),.app.collapsed .brand span:not(.brand-mark){display:revert}
  .app.collapsed .nav-item{justify-content:flex-start;padding:0 var(--s-3)}
  .topbar{padding:0 var(--s-3)} .content{padding:var(--s-4) var(--s-3) var(--s-7)}
  .g2,.g3,.g4,.form{grid-template-columns:1fr} .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .kpi .k-val{font-size:var(--fs-xl)}
  .login{grid-template-columns:1fr} .login-side{display:none}
  .crumbs{display:none} .hide-sm{display:none!important}
  .kv{grid-template-columns:110px minmax(0,1fr)}
}

/* ── المرحلة 3: الحجز المؤقت · الحجوزات · التحصيل */
.divider{height:1px;background:var(--border);margin:4px 0}
.callout.sm{font-size:var(--fs-sm);padding:8px 12px}
.callout.xs{font-size:var(--fs-xs);gap:6px;margin-top:8px}
.unit .callout{line-height:1.5}
.stepper button:disabled{opacity:1}
@media (max-width:640px){ .page-head .actions{max-width:100%;min-width:0} .page-head .actions .seg{max-width:100%;overflow-x:auto;scrollbar-width:none} .page-head .actions .seg button{flex:none} }
.print-doc .dt-wrap{max-height:none;overflow-y:visible}
/* اللوجو (لو الشركة رفعته) مكان علامة البراند */
.has-logo .brand-mark{background:var(--logo) center/contain no-repeat!important;transform:none!important;border-radius:0!important;width:40px!important;height:32px!important}
.sidebar .brand-mark{filter:none} .has-logo .sidebar .brand-mark{background-color:#fff!important;border-radius:6px!important;padding:2px}
.logo-prev{display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:48px;border:1px dashed var(--border);border-radius:var(--r);padding:4px}
.logo-prev img{max-height:40px;max-width:160px}
.sidebar .brand span:last-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
.toolbar label.sm{white-space:nowrap}

.inventory-projects { background: #192a36; color: #f4f8fb; border-radius: 14px; padding: 18px; margin-bottom: 16px; }
.inventory-project-head, .inventory-metrics { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.inventory-project-head h2 { margin: 0; font-size: 1.2rem; }
.inventory-metrics { font-size: .85rem; color: #d0dde6; }
.inventory-metrics b { color: #fff; }
.inventory-project-strip { display: flex; gap: 10px; overflow-x: auto; padding: 12px 2px 4px; }
.inventory-project { flex: 0 0 210px; display: grid; gap: 7px; text-align: start; padding: 12px; border: 1px solid #496172; border-radius: 10px; background: #2a4150; color: inherit; cursor: pointer; }
.inventory-project[aria-pressed="true"] { border-color: #e9bc6d; background: #334d5d; box-shadow: inset 0 0 0 1px #e9bc6d; }
.inventory-project > span { color: #d1e0ea; font-size: .8rem; }
.inventory-project:focus-visible, .inventory-floor button:focus-visible, .inventory-floors:focus-visible { outline: 2px solid #e9bc6d; outline-offset: -2px; }
.inventory-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-block: 12px; font-size: .8rem; }
.inventory-legend span { display: inline-flex; gap: 6px; align-items: center; }
.inventory-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--floor-color, #536473); }
.inventory-building { margin-bottom: 18px; }
.inventory-building h3 { margin-block: 0 8px; }
.inventory-floors { overflow-x: auto; background: #192a36; border-radius: 10px; padding: 7px; color: #f4f8fb; }
.inventory-floor { display: flex; gap: 6px; width: max-content; min-width: 100%; align-items: stretch; padding-block: 3px; }
.inventory-floor > b { position: sticky; inset-inline-start: 0; flex: 0 0 130px; display: grid; align-items: center; padding: 8px; font-size: .82rem; background: #192a36; z-index: 1; }
.inventory-floor-units { display: flex; gap: 5px; }
.inventory-floor button { display: grid; place-content: center; gap: 2px; flex: 0 0 82px; min-height: 49px; padding: 5px; border: 0; border-radius: 5px; color: #fff; background: var(--floor-color, #536473); cursor: pointer; overflow-wrap: anywhere; }
.inventory-floor button:hover { filter: brightness(1.17); }
.inventory-floor button span { font-size: .75rem; }
.inventory-floors [data-state="available"], .inventory-legend [data-state="available"] { --floor-color: #176848; }
.inventory-floors [data-state="hold"], .inventory-legend [data-state="hold"] { --floor-color: #7a5317; }
.inventory-floors [data-state="reserved"], .inventory-legend [data-state="reserved"] { --floor-color: #31578a; }
.inventory-floors [data-state="sold"], .inventory-legend [data-state="sold"] { --floor-color: #86474c; }
.inventory-floors [data-state="unavailable"], .inventory-legend [data-state="unavailable"] { --floor-color: #485665; }