@font-face{font-family:"Reem Kufi";font-weight:700;font-display:swap;src:url(fonts/reem-kufi-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Alexandria";font-weight:600;font-display:swap;src:url(fonts/alexandria-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF}
@font-face{font-family:"Cairo";font-display:swap;font-weight:200 1000;src:url(fonts/cairo-arabic-wght-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E}
@font-face{font-family:"Cairo";font-display:swap;font-weight:200 1000;src:url(fonts/cairo-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
:root{
  /* Layout: fixed sidebar (inline-start) + scrolling work area of card blocks */
  --red:#E3141B;--red-d:#B80F15;--red-50:#FFF2F2;--red-100:#FFDCDD;
  --ink:#0F172A;--ink-2:#334155;--muted:#64748B;--line:#E6EAF0;--soft:#F5F7FA;--soft-2:#EDF1F6;--card:#fff;--bg:#F3F5F9;
  --good:#0E9F6E;--good-50:#E7F7F0;--warn:#D97706;--warn-50:#FEF3E2;--bad:#DC2626;--bad-50:#FDECEC;--info:#2563EB;--info-50:#EAF1FE;--navy:#1E293B;
  --s1:#2a78d6;--s2:#eb6834;
  --r:16px;--sh:0 1px 2px rgba(15,23,42,.04),0 8px 24px -14px rgba(15,23,42,.18);--sh-lg:0 2px 6px rgba(15,23,42,.05),0 24px 48px -20px rgba(15,23,42,.3);
  --font:"Cairo",system-ui,"Segoe UI",Tahoma,sans-serif;--side:268px;
  color-scheme:light
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.ic{width:20px;height:20px;flex:none}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:8px}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
[hidden]{display:none!important}

/* ---------- login ---------- */
.login{min-height:100%;display:grid;grid-template-columns:1fr 1fr;background:#fff}
.login .art{position:relative;background:url(img/team.jpg) center/cover;min-height:100vh}
.login .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(227,20,27,.15),rgba(15,23,42,.75))}
.login .art .q{position:absolute;z-index:1;bottom:48px;inset-inline:48px;color:#fff}
.login .art .q b{display:block;font-size:30px;font-weight:900;line-height:1.35;margin-bottom:8px}
.login .box{display:flex;flex-direction:column;justify-content:center;padding:48px max(24px,env(safe-area-inset-right,0px)) 48px max(24px,env(safe-area-inset-left,0px));max-width:620px;margin-inline:auto;width:100%}
.login .logo svg{height:52px;width:auto;margin-bottom:26px}
.login h1{font-size:28px;font-weight:900;margin-bottom:4px}
.login p.sub{color:var(--muted);margin-bottom:22px}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.role{display:flex;flex-direction:column;align-items:flex-start;gap:8px;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:12px;text-align:start;transition:.15s}
.role b{font-size:14px;line-height:1.4}
.role small{color:var(--muted);font-size:12px;line-height:1.5}
.role:hover{border-color:var(--red-100)}
.role.on{border-color:var(--red);background:var(--red-50)}
.role.on .tile{background:var(--red);color:#fff}
.demo-note{display:flex;gap:10px;align-items:flex-start;background:var(--warn-50);color:#8a4b04;border-radius:12px;padding:10px 14px;font-size:13.5px;margin-top:16px}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;align-self:start;overflow:auto;background:#fff;border-inline-end:1px solid var(--line);padding:16px 14px 24px;display:flex;flex-direction:column;gap:6px}
.side .brand{display:flex;align-items:center;gap:10px;padding:4px 6px 14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.side .brand svg{height:40px;width:auto}
.side .grp{font-size:12px;font-weight:800;color:var(--muted);padding:12px 8px 4px;letter-spacing:.02em}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:12px;font-weight:700;font-size:14.5px;color:var(--ink-2);transition:.15s}
.nav a .tile{width:34px;height:34px;border-radius:10px}
.nav a .tile .ic{width:18px;height:18px}
.nav a:hover{background:var(--soft)}
.nav a.on{background:var(--red-50);color:var(--red-d)}
.nav a.on .tile{background:var(--red);color:#fff}
.nav a .cnt{margin-inline-start:auto;background:var(--warn);color:#fff;font-size:11.5px;font-weight:800;border-radius:999px;padding:0 8px;min-width:22px;text-align:center}
.nav a .cnt.navy{background:var(--navy)}
.side .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;background:rgba(243,245,249,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .in{display:flex;align-items:center;gap:12px;padding:12px max(24px,env(safe-area-inset-right,0px)) 12px max(24px,env(safe-area-inset-left,0px))}
.burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;align-items:center;justify-content:center}
.search{flex:1;max-width:520px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 14px;color:var(--muted);font-weight:600;font-size:14px;text-align:start}
.search kbd{margin-inline-start:auto;font-family:inherit;font-size:11.5px;background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:0 6px;direction:ltr}
.top .sp{flex:1}
.iconbtn{position:relative;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center}
.iconbtn .dot{position:absolute;top:-4px;inset-inline-end:-4px;background:var(--warn);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:0 6px;border:2px solid var(--bg)}
.who{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:5px 12px 5px 6px}
html[dir=rtl] .who{padding:5px 6px 5px 12px}
.av{width:34px;height:34px;border-radius:10px;letter-spacing:-1px;background:var(--red);color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.av.n{background:var(--navy)}.av.g{background:var(--good)}.av.w{background:var(--warn)}.av.b{background:var(--info)}
.who b{font-size:13.5px;display:block;line-height:1.3}
.who small{font-size:12px;color:var(--muted);display:block;line-height:1.3}
.page{padding:24px max(24px,env(safe-area-inset-right,0px)) 48px max(24px,env(safe-area-inset-left,0px));display:grid;gap:20px;align-content:start}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ph h1{font-size:26px;font-weight:900;line-height:1.3}
.ph p{color:var(--muted)}
.ph .acts{display:flex;gap:8px;flex-wrap:wrap}
.crumb{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:2px}
.crumb a:hover{color:var(--red)}

/* ---------- atoms ---------- */
.tile{width:44px;height:44px;border-radius:12px;background:var(--red-50);color:var(--red);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:.15s}
.tile.sm{width:34px;height:34px;border-radius:10px}.tile.sm .ic{width:18px;height:18px}
.tile.lg{width:52px;height:52px;border-radius:14px}.tile.lg .ic{width:26px;height:26px}
.tile.solid{background:var(--red);color:#fff}
.tile.good{background:var(--good);color:#fff}.tile.warn{background:var(--warn);color:#fff}.tile.bad{background:var(--bad);color:#fff}.tile.info{background:var(--info);color:#fff}.tile.navy{background:var(--navy);color:#fff}
.tile.l-good{background:var(--good-50);color:var(--good)}.tile.l-warn{background:var(--warn-50);color:var(--warn)}.tile.l-bad{background:var(--bad-50);color:var(--bad)}.tile.l-info{background:var(--info-50);color:var(--info)}.tile.l-ink{background:var(--soft-2);color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:11px;font-weight:700;font-size:14px;border:1px solid transparent;transition:.15s;white-space:nowrap;line-height:1.4}
.btn .ic{width:18px;height:18px}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-d)}
.btn-w{background:#fff;border-color:var(--line)}.btn-w:hover{border-color:var(--red);color:var(--red)}
.btn-wa{background:#1FAF55;color:#fff}.btn-wa:hover{background:#178A43}
.btn-sm{padding:6px 11px;font-size:13px;border-radius:9px}
.btn-sm .ic{width:16px;height:16px}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:1px 10px;font-size:12.5px;font-weight:800;white-space:nowrap;line-height:1.8}
.pill .ic{width:14px;height:14px}
.p-good{background:var(--good-50);color:#05744f}.p-warn{background:var(--warn-50);color:#9a5503}.p-bad{background:var(--bad-50);color:#b11c1c}.p-info{background:var(--info-50);color:#1d4fc2}.p-ink{background:var(--soft-2);color:var(--ink-2)}.p-red{background:var(--red-50);color:var(--red-d)}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--soft);border:1px solid var(--line);border-radius:9px;padding:1px 9px;font-size:12.5px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.chip .ic{width:14px;height:14px;color:var(--red)}
.muted{color:var(--muted)}
.small{font-size:13px}
.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))}
.split{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.card.hov{transition:.18s}
.card.hov:hover,a.card:hover{box-shadow:var(--sh-lg);border-color:transparent}
.card h3{font-size:16.5px;font-weight:900;line-height:1.45}
.ch{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ch .t{flex:1;min-width:0}
.ch .t small{display:block;color:var(--muted);font-size:12.5px;font-weight:600}
.empty{text-align:center;color:var(--muted);padding:28px 10px}

/* KPI tiles (filled, status colored) */
.kpi{display:flex;gap:14px;align-items:center;cursor:pointer}
.kpi .v{font-size:24px;font-weight:900;line-height:1.2}
.kpi .l{color:var(--muted);font-weight:700;font-size:13.5px}
.kpi .d{font-size:12.5px;font-weight:700}
.kpi .d.up{color:var(--good)}.kpi .d.dn{color:var(--bad)}

/* alerts */
.alerts{display:grid;gap:10px}
.alert{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;transition:.15s}
.alert:hover{border-color:var(--red-100);box-shadow:var(--sh)}
.alert .tx{flex:1;min-width:0}
.alert b{display:block;font-size:14px;line-height:1.5}
.alert small{color:var(--muted);font-size:12.5px}

/* charts */
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .ax{fill:var(--muted);font-size:12.5px;font-weight:600}
.chart .lb{fill:var(--ink-2);font-size:13px;font-weight:700}
.chart .bar{fill:var(--red);transition:opacity .15s}
.chart .bar.alt{fill:#F87C80}
.chart .bar:hover,.chart .hit:hover+.bar{opacity:.8}
.chart .hit{fill:transparent;cursor:pointer}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-top:8px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-inline-end:6px;vertical-align:-1px}
.tip{position:fixed;z-index:100;pointer-events:none;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-lg);border-radius:10px;padding:7px 11px;font-size:12.5px;font-weight:700;color:var(--ink);opacity:0;transition:opacity .1s;white-space:nowrap}
.tip.on{opacity:1}
.tip small{display:block;color:var(--muted);font-weight:600}

/* lists as cards */
.rows{display:grid;gap:10px}
.rowc{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;transition:.15s;min-width:0}
.rowc:hover{border-color:var(--red-100);box-shadow:var(--sh)}
.rowc .tx{flex:1;min-width:0}
.rowc .tx b{display:block;font-size:14.5px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowc .tx small{color:var(--muted);font-size:12.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowc .end{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:end}
.sortbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sortbar button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:5px 12px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.sortbar button.on{border-color:var(--red);color:var(--red);background:var(--red-50)}
.sortbar .ic{width:15px;height:15px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;border-radius:9px;padding:5px 12px;font-weight:700;font-size:13px;color:var(--ink-2)}
.seg button.on{background:var(--red);color:#fff}
.inp{border:1px solid var(--line);border-radius:11px;padding:8px 12px;background:#fff;min-width:0}
.inp:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-50)}

/* kanban */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,1fr);gap:12px;overflow-x:auto;padding-bottom:10px;align-items:start}
.col{background:var(--soft-2);border-radius:16px;padding:10px;min-height:200px;display:flex;flex-direction:column;gap:8px}
.col.drop{outline:2px dashed var(--red);background:var(--red-50)}
.colh{display:flex;align-items:center;gap:8px;padding:4px 4px 6px}
.colh b{font-size:14px;flex:1}
.colh .sum{font-size:12px;color:var(--muted);font-weight:700}
.colh i{width:10px;height:10px;border-radius:50%;flex:none}
.kc{background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px;cursor:grab;display:grid;gap:7px;transition:.15s}
.kc:hover{box-shadow:var(--sh);border-color:var(--red-100)}
.kc.drag{opacity:.4}
.kc .t{font-weight:800;font-size:14px;line-height:1.5}
.kc .m{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);font-weight:700}
.kc .sy{display:flex;gap:4px;flex-wrap:wrap}
.heat{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800}
.heat.hot{color:var(--bad)}.heat.warm{color:var(--warn)}.heat.cold{color:var(--info)}
.heat .ic{width:14px;height:14px}

/* inbox */
.inbox{display:grid;grid-template-columns:330px minmax(0,1fr) 320px;gap:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;height:calc(100vh - 200px);min-height:560px}
.ilist{border-inline-end:1px solid var(--line);overflow:auto;display:flex;flex-direction:column}
.ilist .f{padding:10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:1}
.conv{display:flex;gap:10px;padding:12px;border-bottom:1px solid var(--soft-2);cursor:pointer;align-items:flex-start;text-align:start;background:none;border-inline:0;border-top:0;width:100%}
.conv:hover{background:var(--soft)}
.conv.on{background:var(--red-50)}
.conv .tx{flex:1;min-width:0}
.conv b{font-size:14px;display:flex;justify-content:space-between;gap:6px}
.conv b span{font-size:11.5px;color:var(--muted);font-weight:600}
.conv p{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-ic{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex:none;color:#fff}
.ch-ic .ic{width:16px;height:16px}
.ch-wa{background:#1FAF55}.ch-form{background:var(--red)}.ch-ph{background:var(--navy)}.ch-fb{background:#1877F2}.ch-ref{background:var(--warn)}.ch-tn{background:#7c3aed}
.chat{display:flex;flex-direction:column;min-width:0;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23e3e8ef'/%3E%3C/svg%3E")}
.chat .hd{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line)}
.chat .hd .tx{flex:1;min-width:0}
.msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:76%;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.65;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.msg small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.msg.in{background:#fff;align-self:flex-start;border-start-start-radius:4px}
.msg.out{background:#DDF7E5;align-self:flex-end;border-start-end-radius:4px}
.msg.sys{align-self:center;background:var(--warn-50);color:#8a4b04;font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 12px}
.compose{display:flex;gap:8px;padding:10px;background:#fff;border-top:1px solid var(--line);align-items:center;flex-wrap:wrap}
.compose input{flex:1;min-width:140px}
.tpls{display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px 0;background:#fff;border-top:1px solid var(--line)}
.tpls button{border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
.tpls button:hover{border-color:var(--red);color:var(--red)}
.ipanel{border-inline-start:1px solid var(--line);overflow:auto;padding:14px;display:grid;gap:12px;align-content:start}
.ai{border:1px solid var(--line);border-radius:14px;padding:12px;background:linear-gradient(180deg,#fff,var(--soft))}
.ai h4{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:8px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px}
.kv dt{color:var(--muted);font-weight:700}
.kv dd{font-weight:700}

/* opp / client detail */
.tl{display:grid;gap:0;position:relative}
.tl .it{display:flex;gap:12px;padding-bottom:14px;position:relative}
.tl .it::before{content:"";position:absolute;top:34px;bottom:0;inset-inline-start:16px;width:2px;background:var(--line)}
.tl .it:last-child::before{display:none}
.tl .it .tx{flex:1;min-width:0;font-size:13.5px}
.tl .it .tx b{display:block}
.steps{display:flex;gap:4px;flex-wrap:wrap}
.steps button{flex:1 1 90px;border:0;background:var(--soft-2);padding:8px 6px;font-size:12px;font-weight:800;color:var(--muted);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%);transition:.15s}
html[dir=rtl] .steps button{clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 50%,100% 100%,10px 100%,0 50%)}
.steps button.done{background:var(--red-100);color:var(--red-d)}
.steps button.cur{background:var(--red);color:#fff}
.steps button:hover{filter:brightness(.97)}
.quote{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.quote .tx{flex:1}
.party{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px}
.party small{display:block;color:var(--muted);font-size:12px;font-weight:700}

/* building systems map */
.bmap{display:grid;gap:16px}
.bmap .grp h4{display:flex;align-items:center;gap:8px;font-size:14.5px;margin-bottom:8px}
.bmap .cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cell{border:1.5px solid var(--line);border-radius:12px;padding:9px;display:flex;gap:8px;align-items:center;background:#fff;text-align:start;font-size:12.5px;font-weight:700;line-height:1.4;position:relative;min-height:52px}
.cell .tile{width:30px;height:30px;border-radius:9px}
.cell .tile .ic{width:16px;height:16px}
.cell.done{border-color:#9ee0c4;background:var(--good-50)}.cell.done .tile{background:var(--good);color:#fff}
.cell.maint{border-color:#a9c4fb;background:var(--info-50)}.cell.maint .tile{background:var(--info);color:#fff}
.cell.other{border-color:#f7cf98;background:var(--warn-50)}.cell.other .tile{background:var(--warn);color:#fff}
.cell.none{border-style:dashed;color:var(--muted)}.cell.none .tile{background:var(--soft-2);color:var(--muted)}
.cell.pick{outline:2px solid var(--red);outline-offset:1px}
.bmleg{display:flex;gap:10px;flex-wrap:wrap}

/* progress */
.prog{height:8px;border-radius:999px;background:var(--soft-2);overflow:hidden}
.prog i{display:block;height:100%;border-radius:999px;background:var(--red)}
.prog.g i{background:var(--good)}
.sysrow{display:grid;grid-template-columns:auto minmax(0,1fr) 54px;gap:10px;align-items:center;font-size:13.5px;font-weight:700}
.ms{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:13.5px;font-weight:700}
.ms .tx{flex:1}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .dh{font-size:12px;font-weight:800;color:var(--muted);text-align:center}
.cal .d{background:#fff;border:1px solid var(--line);border-radius:12px;min-height:96px;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0}
.cal .d.o{opacity:.45}
.cal .d.t{border-color:var(--red);box-shadow:0 0 0 2px var(--red-50)}
.cal .d .n{font-size:12px;font-weight:800;color:var(--muted)}
.cal .ev{font-size:11px;font-weight:700;border-radius:7px;padding:1px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.ev.ppm{background:var(--info-50);color:#1d4fc2}.ev.cm{background:var(--bad-50);color:#b11c1c}.ev.cd{background:var(--warn-50);color:#9a5503}.ev.done{background:var(--good-50);color:#05744f;text-decoration:line-through}

/* radar */
.rbuckets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rb{border-radius:16px;padding:14px;color:#fff;cursor:pointer;border:2px solid transparent}
.rb.on{border-color:var(--ink)}
.rb b{display:block;font-size:26px;font-weight:900;line-height:1.2}
.rb span{font-weight:700;font-size:13px;opacity:.95}
.rb small{display:block;font-size:12px;opacity:.9}

/* banners cms */
.bn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px}
.bthumbs{display:flex;gap:6px;align-items:flex-end}
.bthumbs img{width:200px;aspect-ratio:12/5;object-fit:cover;border-radius:10px;background:var(--soft);border:1px solid var(--line)}
.bthumbs img.m{width:56px;aspect-ratio:4/5}
.bacts{display:flex;flex-direction:column;gap:8px;align-items:center}
.flipv{transform:scaleY(-1)}
.btn[disabled]{opacity:.35;pointer-events:none}
.libi{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:12px;padding:6px;text-align:start;font-weight:700;font-size:13px;line-height:1.5}
.libi img{width:120px;aspect-ratio:12/5;object-fit:cover;border-radius:8px}
.libi:hover{border-color:var(--red);color:var(--red)}
.sizes{display:grid;grid-template-columns:3fr 1fr;gap:12px;align-items:end;margin-bottom:12px}
.sz{text-align:center;font-size:12.5px}
.sz .box{width:100%;border:2px dashed var(--red-100);background:var(--red-50);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;max-height:160px}
.sz .box span{font-weight:900;color:var(--red-d);font-size:13px}
.guide{list-style:none;display:grid;gap:7px;font-size:13.5px;color:var(--ink-2)}
.guide li{position:relative;padding-inline-start:16px}
.guide li::before{content:"";position:absolute;inset-inline-start:0;top:10px;width:6px;height:6px;border-radius:2px;background:var(--red);transform:rotate(45deg)}
.modal .box.wide{width:min(860px,100%)}
.chk{display:inline-flex;gap:6px;align-items:center;font-weight:700;font-size:14px}
.chk input{width:18px;height:18px;accent-color:var(--red)}
.slots{display:grid;grid-template-columns:3fr 1fr;gap:10px}
.slot{position:relative;display:flex;flex-direction:column;gap:6px;border:1.5px dashed var(--line);border-radius:14px;padding:8px;cursor:pointer;transition:.15s}
.slot:hover{border-color:var(--red)}
.slot img{width:100%;object-fit:cover;border-radius:10px;background:var(--soft)}
.slot.d img{aspect-ratio:12/5}.slot.m img{aspect-ratio:4/5}
.slot .sl{display:flex;justify-content:space-between;gap:6px;font-size:12.5px;align-items:center;flex-wrap:wrap}
.slot .sl small{color:var(--muted)}
.slot .warn{display:none;background:var(--warn-50);color:#8a4b04;border-radius:8px;padding:4px 8px;font-size:12px;font-weight:700}
.bn .tx b{display:block}
.handle{cursor:grab;color:var(--muted)}
.sw{position:relative;width:42px;height:24px;border-radius:999px;background:var(--soft-2);border:0;transition:.15s;flex:none}
.sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.15s}
.sw.on{background:var(--good)}
.sw.on::after{inset-inline-start:21px}

/* roles matrix */
.perm{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.perm .card ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* modal + toast + cmdk */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(15,23,42,.42)}
.modal .box{background:#fff;border-radius:20px;box-shadow:var(--sh-lg);width:min(620px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:22px}
.modal h3{font-size:19px;font-weight:900;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f{display:grid;gap:5px;min-width:0}
.f.full{grid-column:1/-1}
.f label{font-weight:800;font-size:13px}
.f input,.f select,.f textarea{border:1px solid var(--line);border-radius:11px;padding:9px 12px;background:var(--soft);width:100%}
.f textarea{min-height:80px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--red);background:#fff}
.mact{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.toast{position:fixed;z-index:120;bottom:max(20px,env(safe-area-inset-bottom,0px));inset-inline-start:50%;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:12px;padding:10px 16px;font-weight:700;font-size:14px;box-shadow:var(--sh-lg);display:flex;gap:8px;align-items:center;opacity:0;transition:.2s;pointer-events:none}
html[dir=rtl] .toast{transform:translateX(50%)}
.toast.on{opacity:1}
.cmdk .box{padding:0;width:min(640px,100%);align-self:flex-start;margin-top:10vh}
.cmdk input{width:100%;border:0;border-bottom:1px solid var(--line);padding:16px 18px;font-size:16px;outline:none;border-radius:20px 20px 0 0}
.cmdk .res{max-height:60vh;overflow:auto;padding:8px}
.cmdk .res a{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;font-weight:700;font-size:14px}
.cmdk .res a:hover,.cmdk .res a.on{background:var(--red-50)}
.cmdk .res small{color:var(--muted);font-weight:600;margin-inline-start:auto;font-size:12px}
.demobar{background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;padding:5px 16px;display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.demobar button,.demobar a{background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:7px;padding:1px 9px;font-weight:700;font-size:12px}

/* responsive */
@media (max-width:1280px){.inbox{grid-template-columns:300px minmax(0,1fr)}.ipanel{display:none}.split{grid-template-columns:1fr}}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.rbuckets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;z-index:80;top:0;bottom:0;inset-inline-start:0;width:min(300px,86vw);transform:translateX(100%);transition:.25s;box-shadow:var(--sh-lg)}
  html[dir=ltr] .side{transform:translateX(-100%)}
  .side.open{transform:none}
  .shade{position:fixed;inset:0;z-index:70;background:rgba(15,23,42,.35)}
  .burger{display:inline-flex}
  .who .tx{display:none}
  .login{grid-template-columns:1fr}.login .art{display:none}
}
@media (max-width:680px){
  .g2,.g3,.g4,.fg{grid-template-columns:1fr}
  .roles{grid-template-columns:1fr 1fr}
  .search kbd,.search span{display:none}
  .search{flex:0 0 auto;width:42px;height:42px;padding:0;justify-content:center}
  .inbox{grid-template-columns:1fr;height:auto}
  .inbox.chatting .ilist{display:none}
  .inbox:not(.chatting) .chat{display:none}
  .msgs{min-height:50vh}
  .bn{grid-template-columns:1fr}.bthumbs img{width:calc(100% - 62px)}.bacts{flex-direction:row;flex-wrap:wrap;justify-content:space-between}
  .slots{grid-template-columns:1fr 1fr}.slot.d{grid-column:1/-1}
  .sizes{grid-template-columns:2fr 1fr}
  .cal{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
  .cal .d{min-height:62px;padding:3px}
  .cal .ev{font-size:0;height:6px;padding:0}
  .page{padding-top:16px}
  .ph h1{font-size:22px}
  .rowc{flex-wrap:wrap}
  .rowc .end{flex-direction:row;align-items:center;width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.chk{white-space:nowrap}
/* files */
.drop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border:2px dashed var(--red-100);background:var(--red-50);border-radius:16px;padding:18px 12px;cursor:pointer;transition:.15s;margin-bottom:12px}
.drop:hover,.drop.over{border-color:var(--red);background:#fff}
.drop b{font-size:14px}.drop small{color:var(--muted);font-size:12px}
.drop select{margin-top:6px;max-width:100%}
.miss{display:flex;gap:8px;align-items:flex-start;background:var(--warn-50);color:#8a4b04;border-radius:12px;padding:8px 12px;font-size:12.5px;font-weight:700;margin-bottom:12px}
.miss .ic{width:16px;height:16px;margin-top:3px}
.fgrp{margin-bottom:12px}.fgrp h5{font-size:13px;font-weight:800;color:var(--ink-2);margin-bottom:6px;display:flex;gap:6px;align-items:center}
.flist{display:grid;gap:6px}
.fcard{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:7px;min-width:0}
.fcard .tx{flex:1;min-width:0}
.fcard .tx b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard .tx small{color:var(--muted);font-size:11.5px}
.fth{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--soft);flex:none}
.facts{display:flex;gap:4px}.facts .btn{padding:5px 7px}
.rot{transform:rotate(90deg)}
/* progress */
.sysblk{border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.sysblk .sysrow{grid-template-columns:auto minmax(0,1fr) auto}
.lastlog{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--ink-2);margin-top:8px;background:var(--soft);border-radius:10px;padding:6px 10px;line-height:1.6}
.lastlog .ic{width:14px;height:14px;margin-top:4px;color:var(--red)}
.lastlog.muted{color:var(--muted)}
.lphotos{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.lphotos button{border:0;padding:0;background:none;border-radius:8px;overflow:hidden}
.lphotos img{width:64px;height:48px;object-fit:cover;display:block;background:var(--soft)}
.ckgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;background:var(--soft);border-radius:12px;padding:10px}
input[type=range]{accent-color:var(--red);width:100%}
input[type=file]{font-size:13px}
a.tx{min-width:0;flex:1}
@media (max-width:680px){.ckgrid{grid-template-columns:1fr}.facts .btn{padding:4px 6px}}
/* ===== Nibras ERP — real estate additions ===== */
.nlogo{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.nlogo b{font-family:"Reem Kufi",var(--font);font-weight:700;font-size:28px;color:#0F2147;white-space:nowrap;line-height:1.15}
.nlogo b i{font-style:normal;color:#9A6D12}
.nlogo em{display:block;width:100%;height:2px;margin-top:3px;background:linear-gradient(90deg,rgba(212,165,72,0),#D4A548,rgba(212,165,72,0))}
.nlogo small{font-family:Alexandria,var(--font);font-weight:600;font-size:7.5px;letter-spacing:3.4px;color:#9A6D12;direction:ltr;margin-top:4px}
.login .logo .nlogo b{font-size:40px}.login .logo .nlogo small{font-size:10px;letter-spacing:4.6px}.login .logo{margin-bottom:22px}
.stk{padding:6px 0}.stk .sl{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:6px}.stk .sl span{color:var(--muted);font-weight:700;font-size:12.5px}
.bar3{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--soft-2)}.bar3 i{display:block;height:100%}
.pjtabs{flex-wrap:wrap}
.g2b{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.bld .ugrid{display:grid;gap:6px}
.fl{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;align-items:center}
.fl .fn{font-size:12px;font-weight:700;color:var(--muted)}
.fl .us{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.u{border:1.5px solid transparent;border-radius:10px;padding:6px 4px;text-align:center;line-height:1.25;display:flex;flex-direction:column;align-items:center;transition:.15s;min-height:44px;justify-content:center}
.u b{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}.u small{font-size:10.5px;opacity:.85;font-weight:700}
.u.sold{background:#E7F7F0;color:#0B7A55;border-color:#BFE8D6}
.u.reserved{background:#FEF3E2;color:#B45309;border-color:#FAD9A8}
.u.avail{background:#fff;color:#1D4ED8;border-color:#93B4F5;box-shadow:inset 0 0 0 1px #DCE7FD}
.u.avail:hover{background:#EAF1FE;transform:translateY(-1px)}
.u.hold{background:#F1F4F8;color:#64748B;border-color:#E2E8F0}
.u.dim{opacity:.18}
.uleg{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;font-weight:700;color:var(--muted);align-items:center}
.uleg span{display:inline-flex;gap:6px;align-items:center}.uleg i.u{width:16px;height:16px;min-height:0;padding:0;border-radius:5px;display:inline-block}
.umeta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.umeta div{background:var(--soft);border-radius:12px;padding:8px 12px}.umeta small{display:block;color:var(--muted);font-size:12px;font-weight:700}.umeta b{font-size:15px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.plan{border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:2px}
.plan b{font-size:14px}.plan span{font-size:20px;font-weight:900;color:var(--red)}.plan small{color:var(--muted);font-size:12.5px;font-weight:700}
.tblw{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:620px}
.tbl th{background:var(--soft);color:var(--muted);font-weight:800;font-size:12.5px;text-align:start;padding:9px 12px;white-space:nowrap}
.tbl td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:middle}
.tbl tr.overdue td{background:#FFF7F7}.tbl tr.paid td{color:var(--muted)}
.tbl .acts2{display:flex;gap:6px;justify-content:flex-end}
.rowc.tr{gap:14px}.rowc .w120{min-width:130px}
.av2{width:38px;height:38px;border-radius:50%;background:var(--red-50);color:var(--red);display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex:none}
.av2.big{width:48px;height:48px;font-size:15px}
.mini{gap:8px;text-align:center}.mini>div{background:var(--soft);border-radius:12px;padding:8px 6px}.mini small{display:block;color:var(--muted);font-size:12px;font-weight:700}.mini b{font-size:15px}
.qs{max-width:320px;flex:1}
.prog.w i{background:var(--warn)}
.cimg{height:150px;border-radius:12px;background:#ddd center/cover;position:relative}
.cimg .pill{position:absolute;top:10px;inset-inline-start:10px;background:#fff}
.clog{display:grid;gap:12px}.ce{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:start}
.ce img{width:120px;height:84px;object-fit:cover;border-radius:10px}.ce b{display:block;font-size:14px;line-height:1.6}.ce small{color:var(--muted);font-size:12.5px;font-weight:700}
.msl{display:grid;gap:8px}.msl .it{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.msl .it .tx b{display:block;font-size:13.5px}.msl .it .tx small{color:var(--muted);font-size:12px}.msl .it.cur{border-color:var(--warn);background:var(--warn-50)}
@media (max-width:900px){.g2b{grid-template-columns:1fr}.plans{grid-template-columns:1fr}.umeta{grid-template-columns:repeat(2,1fr)}.ce{grid-template-columns:90px 1fr}.ce img{width:90px;height:66px}}