*{box-sizing:border-box} body{margin:0} a{color:#0E7A45;text-decoration:none}a:hover{color:#0B5E35} /* Brand tokens live on :root (not scoped to .app) so anything appended directly to - modals, confirm dialogs, toasts - still resolves var(--surface) etc. correctly even though it's outside the .app div. */ :root{--primary:#65feab;--primary-2:#46e793;--ink:#132029;--muted:#647787;--line:#E4EBEE;--bg:#F3F6F7;--surface:#FFFFFF;--accent:#65feab} body{font-family:'IBM Plex Sans Arabic',sans-serif;color:var(--ink);background:var(--bg);font-size:14px;line-height:1.6} .app{height:100vh;overflow:hidden;display:flex} /* SIDEBAR */ .sidebar{width:262px;flex-shrink:0;background:var(--surface);border-left:1px solid var(--line);color:var(--ink);display:flex;flex-direction:column;padding:20px 14px;gap:6px;height:100%;overflow-y:auto} .side-brand{display:flex;align-items:center;gap:12px;padding:6px 8px 22px;margin-bottom:2px;border-bottom:1px solid var(--line)} .side-brand .logo-chip{width:46px;height:46px;background:#F3F6F7;border:1px solid var(--line);border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .side-brand .logo-chip img{width:32px;height:32px} .side-brand .bt{font-weight:700;font-size:15px;line-height:1.3;color:var(--ink)} .side-brand .bs{font-size:11px;color:var(--muted);font-weight:500} .side-sec{font-size:10.5px;color:#9AA5B1;font-weight:700;padding:16px 10px 6px;letter-spacing:.03em} .nav-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;color:#4B5563;font-weight:600;cursor:pointer;transition:.15s;font-size:13.5px} .nav-item svg{color:#9AA5B1} .nav-item:hover{background:var(--bg);color:var(--ink)} .nav-item:hover svg{color:var(--ink)} .nav-item.active{background:#E4FBEF;color:#0C7A45;font-weight:700} .nav-item.active svg{color:#0C7A45} .nav-item svg{width:19px;height:19px;flex-shrink:0} .side-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)} .side-user{display:flex;align-items:center;gap:11px;padding:10px;border-radius:12px;background:var(--bg)} .side-user .av{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#08301C;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0} .side-user .un{font-weight:700;font-size:13px;color:var(--ink)} .side-user .ur{font-size:11px;color:var(--muted)} /* MAIN */ .main{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;overflow:hidden} .topbar{height:66px;flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:30} .tb-title{font-weight:700;font-size:18px} .tb-sub{font-size:12px;color:var(--muted);font-weight:500} .tb-right{display:flex;align-items:center;gap:8px} .icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);position:relative} .icon-btn:hover{background:var(--bg)} .icon-btn svg{width:20px;height:20px} /* The logout icon's arrow points right (exiting) by default, correct for English — mirror it in Arabic so it exits toward the left as expected there. */ [dir="rtl"] #logoutBtn svg{transform:scaleX(-1)} .badge-dot{position:absolute;top:7px;left:8px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#E4574C;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center} .content{padding:26px;overflow:auto;flex:1} /* NOTIF PANEL */ .notif-wrap{position:relative} .notif-panel{position:absolute;top:50px;inset-inline-end:0;width:340px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(19,32,41,.16);overflow:hidden;z-index:40} .notif-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between} .notif-item{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;gap:11px;align-items:flex-start} .notif-item:last-child{border-bottom:none} .notif-item[data-name]:hover{background:var(--bg)} .nch{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .nch svg{width:16px;height:16px} .nch.mail{background:#E7F1FB;color:#2B76C9}.nch.plat{background:#E4FBEF;color:#0C7A45} .notif-item .ntx{font-size:12.5px;font-weight:500} .notif-item .ntm{font-size:11px;color:var(--muted);margin-top:2px} .unreadbg{background:#EEF9F2} /* CARDS */ .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;min-width:0} .card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px} .card-t{font-weight:700;font-size:15px} .card-s{font-size:12px;color:var(--muted)} .kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px} .kpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;position:relative;overflow:hidden;transition:.15s;display:flex;align-items:center;gap:14px} .kpi:hover{box-shadow:0 8px 24px rgba(19,32,41,.08);transform:translateY(-2px)} .kpi::after{content:'';position:absolute;top:0;bottom:0;right:0;width:4px;background:var(--kc,#65feab)} .kpi .kico{width:46px;height:46px;border-radius:13px;background:var(--kbg,#E7F7EE);color:var(--kc,#0C7A45);display:flex;align-items:center;justify-content:center;flex-shrink:0} .kpi .kico svg{width:22px;height:22px} .kpi .kbody{min-width:0} .kpi .kl{font-size:12px;color:var(--muted);font-weight:600} .kpi .kv{font-size:26px;font-weight:800;margin-top:3px;line-height:1;letter-spacing:-.01em} .kpi .kt{font-size:11px;color:var(--muted);margin-top:5px} .dfilter{display:flex;gap:6px} .dstepgrp{display:flex;gap:6px} .dstep{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:9px;background:var(--surface);overflow:hidden} .dstep button{border:none;background:none;width:24px;height:28px;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;font-family:inherit} .dstep button:hover{background:var(--bg);color:var(--ink)} .dstep button svg{width:14px;height:14px} .dstep span{min-width:52px;text-align:center;font-size:11px;font-weight:700;padding:0 2px;color:var(--ink)} .dfsel{border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--ink);background:var(--surface);cursor:pointer} .dfsel:focus{outline:none;border-color:var(--accent)} .grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:18px} .grid-2b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:18px} /* CHART */ .bars{display:flex;align-items:flex-end;gap:14px;height:170px;padding-top:10px} .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;height:100%;justify-content:flex-end} .bar-track{width:100%;display:flex;align-items:flex-end;justify-content:center;flex:1} .bar-fill{width:60%;max-width:44px;background:linear-gradient(180deg,#65feab,#37dd86);border-radius:7px 7px 0 0;min-height:4px} .bar-lb{font-size:11.5px;color:var(--muted);font-weight:500;text-align:center} .bar-vl{font-size:12px;font-weight:700} .hbars{display:flex;flex-direction:column;gap:16px;padding-top:6px} .hbar{display:flex;flex-direction:column;gap:7px} .hbar .hbtop{display:flex;align-items:center;justify-content:space-between;gap:8px} .hbar .hbl{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .hbar .hbt{width:100%;height:12px;border-radius:999px;background:var(--bg);overflow:hidden} .hbar .hbf{height:100%;border-radius:999px;background:linear-gradient(90deg,#37dd86,#65feab);min-width:6px;transition:width .4s} .hbar .hbv{font-size:13px;font-weight:800;color:#0C7A45;flex-shrink:0} .perf-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)} .perf-row:last-child{border-bottom:none} .perf-row .rnk{width:22px;height:22px;border-radius:7px;background:var(--bg);color:var(--muted);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0} .perf-row .pinfo{flex:1;min-width:0} .perf-row .pn{font-weight:700;font-size:13px} .perf-row .pt{font-size:11px;color:var(--muted)} .perf-stats{display:flex;gap:14px;flex-shrink:0} .perf-stats .ps{text-align:center} .perf-stats .psv{font-size:13.5px;font-weight:800} .perf-stats .psv.hrs{color:#0C7A45} .perf-stats .psl{font-size:10px;color:var(--muted);margin-top:1px} .exp-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)} .exp-row:last-child{border-bottom:none} .exp-ic{width:38px;height:38px;border-radius:11px;background:#FEF2E0;color:#C9821E;display:flex;align-items:center;justify-content:center;flex-shrink:0} .exp-ic svg{width:18px;height:18px} .exp-row .einfo{flex:1;min-width:0} .exp-row .en{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .exp-row .ed{font-size:11px;color:var(--muted);margin-top:1px} .tbl tbody tr.zebra:hover td{background:#F7FBF8} .mbars{display:flex;align-items:flex-end;gap:5px;height:120px} .mbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-end;height:100%} .mbar-fill{width:100%;background:#CDEBEF;border-radius:4px 4px 0 0;min-height:3px} .mbar-lb{font-size:9.5px;color:var(--muted)} /* TABLE */ .tbl{width:100%;border-collapse:collapse} .tbl th{text-align:start;font-size:11.5px;color:var(--muted);font-weight:600;padding:0 12px 11px;border-bottom:1px solid var(--line)} .tbl td{padding:13px 12px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle} .tbl tr:last-child td{border-bottom:none} .tbl tr.clickable{cursor:pointer} .tbl tr.clickable:hover td{background:#F5FBF7} .tbl td.row-actions{text-align:end;white-space:nowrap} .tbl td.row-actions .ct-del + .ct-del{margin-inline-start:8px} .t-code{font-family:'IBM Plex Sans Arabic';font-weight:700;color:#0C7A45;font-size:12.5px} .t-strong{font-weight:600} .tfoot td{font-weight:700;background:#F5FBF7;border-top:2px solid var(--line)} /* PILLS */ .pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:600;white-space:nowrap} .pill .pd{width:6px;height:6px;border-radius:50%;background:currentColor} .st-new{background:#E7F1FB;color:#2B6FC9}.st-prog{background:#FEF2E0;color:#C9821E}.st-res{background:#e3f9ee;color:#189B6B}.st-closed{background:#EEF1F3;color:#647787} .pr-high{background:#FCEAE8;color:#D6473B}.pr-med{background:#FEF2E0;color:#C9821E}.pr-low{background:#EEF1F3;color:#647787}.pr-none{background:#EEF1F3;color:#8A97A3} .cv-in{background:#E3F9EE;color:#0C7A45}.cv-out{background:#FEF2E0;color:#C9821E}.cv-oos{background:#FCEAE8;color:#D6473B} .inv-paid{background:#E3F9EE;color:#0C7A45}.inv-unpaid{background:#FCEAE8;color:#D6473B} .file-row{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--line);background:var(--bg);border-radius:11px;padding:10px 12px;margin-top:10px;font-family:inherit;text-align:right;cursor:pointer} .file-row:hover{border-color:#65feab} .file-row>svg{width:20px;height:20px;color:#0C7A45;flex-shrink:0} .pkg{background:#E4FBEF;color:#0C7A45} /* BUTTONS */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);color:#08301C;border:none;border-radius:11px;padding:11px 20px;font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;transition:.15s} .btn:hover{background:var(--primary-2)} .btn svg{width:17px;height:17px} .btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)} .btn-ghost:hover{background:var(--bg)} .btn-sm{padding:8px 14px;font-size:12.5px} .btn-block{width:100%} .btn:disabled{opacity:.5;cursor:not-allowed} @keyframes wow-spin{to{transform:rotate(360deg)}} .btn-spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(8,48,28,.3);border-top-color:#08301C;border-radius:50%;animation:wow-spin .6s linear infinite} .btn-ghost .btn-spinner,.btn-danger .btn-spinner{border-color:rgba(12,122,69,.25);border-top-color:var(--primary)} .btn-danger .btn-spinner{border-color:rgba(255,255,255,.35);border-top-color:#fff} /* FIELDS */ .field{margin-bottom:15px} .label{display:block;font-size:12.5px;font-weight:600;margin-bottom:7px} .input,.textarea,.select{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--surface)} .input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(101,254,171,.5)} .textarea{min-height:110px;resize:vertical} .input-wrap{position:relative} .input-wrap .input{padding-inline-end:42px} .pw-toggle{-webkit-appearance:none;appearance:none;position:absolute;top:50%;inset-inline-end:4px;transform:translateY(-50%);width:34px;height:34px;border:none;background:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:9px;padding:0;z-index:2} .pw-toggle:hover{background:var(--bg);color:var(--ink)} .pw-toggle svg{width:18px;height:18px;pointer-events:none} .pw-toggle .eye-off{display:none} .pw-toggle.showing .eye{display:none} .pw-toggle.showing .eye-off{display:block} /* Suppress native browser reveal/clear affordances so they can't collide with our own toggle button (Edge/IE reveal+clear, Chrome's credentials auto-fill icon). Firefox's built-in reveal control has no standard CSS hook, so the input keeps extra left padding clear of that corner too. */ .input-wrap .input::-ms-reveal, .input-wrap .input::-ms-clear{display:none} .input-wrap .input::-webkit-credentials-auto-fill-button{visibility:hidden;pointer-events:none;position:absolute;right:0} .input-wrap .input::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;position:absolute;right:0} .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .muted{color:var(--muted)} .hint{font-size:12px;color:var(--muted);margin-top:5px} /* LOGIN */ .login{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;background:#EEF2F5;padding:24px} .login-card{width:100%;max-width:820px;background:var(--surface);border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.28);display:grid;grid-template-columns:1fr 1fr} .login-side{background:linear-gradient(165deg,#0F1720,#182A24);color:#fff;padding:40px 34px;display:flex;flex-direction:column} .login-top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px} .login-side .logo-chip{width:78px;height:78px;background:#fff;border-radius:18px;display:flex;align-items:center;justify-content:center} .login-side .logo-chip img{width:56px;height:56px} .lang-pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:999px;padding:8px 16px;font-family:inherit;font-weight:700;font-size:12.5px;cursor:pointer} .lang-pill:hover{background:rgba(255,255,255,.22)} .login-side h1{font-size:24px;font-weight:700;margin:0;line-height:1.35} .login-main{padding:40px 34px;display:flex;flex-direction:column;justify-content:center} .login-main h2{font-size:19px;font-weight:700;margin:0 0 4px} .login-main .lm-s{font-size:13px;color:var(--muted);margin-bottom:22px} .role-card{display:flex;align-items:center;gap:14px;border:1.5px solid var(--line);border-radius:14px;padding:15px;cursor:pointer;transition:.15s;margin-bottom:12px} .role-card:hover{border-color:var(--accent);background:#F5FBF7;transform:translateY(-1px)} .role-card .ric{width:46px;height:46px;border-radius:12px;background:#65feab;color:#08301C;display:flex;align-items:center;justify-content:center;flex-shrink:0} .role-card .ric svg{width:23px;height:23px} .role-card .rt{font-weight:700;font-size:14.5px} .role-card .rd{font-size:12px;color:var(--muted)} .role-card .rar{margin-right:auto;color:var(--muted)} .auth-err{display:flex;align-items:center;gap:8px;background:#FCEAE8;color:#D6473B;border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:600;margin-bottom:12px} .auth-err svg{width:16px;height:16px;flex-shrink:0} .auth-link{text-align:center;color:#0C7A45;font-size:12.5px;font-weight:600;cursor:pointer;margin-top:14px} .auth-link:hover{text-decoration:underline} .demo-box{margin-top:20px;border:1px dashed var(--line);border-radius:12px;padding:12px;background:#F7FBF8} .demo-t{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:8px} .demo-r{display:flex;flex-direction:column;gap:1px;padding:7px 9px;border-radius:8px;cursor:pointer} .demo-r:hover{background:#E7F7EE} .demo-r b{font-size:12px;font-weight:700} .demo-r span{font-size:11px;color:var(--muted);direction:ltr;text-align:right} .auth-ok{text-align:center} .auth-ok-ic{width:60px;height:60px;border-radius:50%;background:#E4FBEF;color:#0C7A45;display:flex;align-items:center;justify-content:center;margin:0 auto 14px} .auth-ok-ic svg{width:28px;height:28px} .auth-ok-t{font-size:17px;font-weight:700;margin-bottom:6px} /* CONTRACT */ .contract-hero{background:linear-gradient(135deg,#0F1720,#123528);color:#fff;border-radius:20px;padding:26px 28px;margin-bottom:18px;display:flex;flex-direction:column;gap:22px;position:relative;overflow:hidden} .ch-glow{position:absolute;top:-90px;left:-40px;width:300px;height:300px;background:radial-gradient(circle,rgba(101,254,171,.22),transparent 70%);pointer-events:none} .ch-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:20px;position:relative;z-index:1} .ch-main{display:flex;gap:16px;align-items:flex-start} .ch-icon{width:56px;height:56px;border-radius:16px;background:rgba(101,254,171,.14);border:1px solid rgba(101,254,171,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0} .ch-icon svg{width:28px;height:28px;color:#65feab} .ch-pkg{font-size:12px;color:#8FEEBB;font-weight:600} .ch-name{font-size:23px;font-weight:700;margin-top:3px} .ch-status{display:inline-flex;align-items:center;gap:7px;background:rgba(101,254,171,.16);color:#8FEEBB;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;margin-top:12px} .ch-status .pd{width:7px;height:7px;border-radius:50%;background:#65feab;box-shadow:0 0 0 3px rgba(101,254,171,.25)} .ch-dates{display:flex;gap:10px;flex-wrap:wrap} .ch-date{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:10px 14px;min-width:120px} .ch-date svg{width:17px;height:17px;color:#8FEEBB;flex-shrink:0} .ch-date .dl{font-size:10.5px;color:#93A0AC} .ch-date .dv{font-size:14.5px;font-weight:700;margin-top:1px} .ch-date.rem .dv{color:#65feab} .ch-progress{position:relative;z-index:1} .ch-prog-head{display:flex;justify-content:space-between;font-size:11.5px;color:#93A0AC;font-weight:600;margin-bottom:8px} .ch-prog-head b{color:#fff;font-weight:700} .ch-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden} .ch-bar-fill{height:100%;background:linear-gradient(90deg,#37dd86,#65feab);border-radius:999px} .feat-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px} .feat-list li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;font-weight:500} .feat-list li svg{width:20px;height:20px;color:#0C7A45;flex-shrink:0;margin-top:1px} .usage-bar{height:9px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:10px} .usage-fill{height:100%;background:linear-gradient(90deg,#65feab,#37dd86);border-radius:999px} .dev-banner{background:linear-gradient(135deg,#2a1a5e,#592bc2);color:#fff;border-radius:20px;padding:22px 24px;margin-bottom:18px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;position:relative;overflow:hidden} .dev-banner .dg{position:absolute;top:-70px;right:-30px;width:240px;height:240px;background:radial-gradient(circle,rgba(147,110,240,.5),transparent 70%);pointer-events:none} .dev-main{display:flex;align-items:center;gap:14px;position:relative;z-index:1} .dev-ic{width:48px;height:48px;border-radius:13px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0} .dev-ic svg{width:24px;height:24px;color:#d6c4ff} .dev-l{font-size:12px;color:#d6c4ff;font-weight:600} .dev-remain{font-size:26px;font-weight:800;line-height:1.1;margin-top:2px} .dev-remain small{font-size:13px;font-weight:600;color:#d6c4ff} .dev-meta{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1} .dev-chip{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:9px 13px} .dev-chip svg{width:16px;height:16px;color:#d6c4ff;flex-shrink:0} .dev-chip .dl{font-size:11px;color:#d6c4ff} .dev-chip .dv{font-size:13px;font-weight:700;margin-top:1px} .dev-bar{width:100%;height:8px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:12px;position:relative;z-index:1} .dev-bar-fill{height:100%;background:linear-gradient(90deg,#c9b6ff,#8f6bff);border-radius:999px} .modal-tabs{display:flex;gap:6px;background:#F1F4F6;border-radius:12px;padding:5px;margin-bottom:18px} .mtab{flex:1;text-align:center;padding:9px;border-radius:9px;font-family:inherit;font-size:13px;font-weight:600;border:none;background:none;cursor:pointer;color:var(--muted)} .mtab.on{background:#fff;color:var(--primary);box-shadow:0 2px 6px rgba(19,32,41,.08)} .dev-toggle{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;margin-bottom:16px;cursor:pointer} .dev-toggle .sw{width:42px;height:24px;border-radius:999px;background:var(--line);flex-shrink:0;position:relative;transition:.15s} .dev-toggle .sw::after{content:'';position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s} .dev-toggle.on .sw{background:#592bc2} .dev-toggle.on .sw::after{right:21px} .dev-req-card{background:#F7F3FF;border:1px solid #E0D2FB;border-radius:14px;padding:16px;margin-bottom:16px} .dev-req-card .drt{font-weight:700;font-size:14px;color:#4b2a9e;display:flex;align-items:center;gap:8px;margin-bottom:10px} .dev-req-card .drt svg{width:18px;height:18px} .ledger-h{color:#592bc2} .led-hours{font-weight:700;color:#592bc2} /* DETAIL */ .detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start} .detail-grid.mgr{grid-template-columns:1.35fr .95fr 1fr} .detail-grid.mgr .card{padding:16px} .detail-grid.mgr .meta-row{padding:8px 0;font-size:12.5px} .detail-grid.mgr .dt-head{padding:18px 20px 16px} .detail-grid.mgr .dt-title{font-size:19px;margin-bottom:12px} .detail-grid.mgr .dt-desc{padding:14px 20px 2px} .detail-grid.mgr .thread{padding:6px 20px 0;gap:10px} .detail-grid.mgr .reply-box{padding:12px 20px 16px} .act-sec{padding:12px 0;border-bottom:1px solid var(--line)} .act-sec:first-child{padding-top:0} .act-sec:last-child{border-bottom:none;padding-bottom:0} .act-l{font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:8px} .act-row{display:flex;gap:8px} .act-row .select{flex:1;padding:9px 11px;font-size:12.5px} .act-row .btn{padding:9px 14px;font-size:12.5px;flex-shrink:0} .back-btn{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-weight:600;font-size:13px;cursor:pointer;margin-bottom:14px;background:none;border:none;font-family:inherit} .back-btn:hover{color:var(--ink)} .back-btn svg{width:17px;height:17px} /* The icon points right (back-in-rtl-reading-order), which is correct for Arabic — mirror it in English so "back" points left as expected there. */ [dir="ltr"] .back-btn svg{transform:scaleX(-1)} .meta-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px} .meta-row:last-child{border-bottom:none} .meta-row .mk{color:var(--muted)} .meta-row .mv{font-weight:600} .thread{display:flex;flex-direction:column;gap:14px;margin:16px 0} .msg{display:flex;gap:11px} .msg .mav{width:34px;height:34px;border-radius:50%;background:#65feab;color:#08301C;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0} .msg .mbody{background:var(--bg);border-radius:12px;padding:11px 14px;flex:1} .msg .mhead{display:flex;align-items:center;gap:8px;margin-bottom:3px} .msg .man{font-weight:700;font-size:12.5px} .msg .mrole{font-size:11px;color:var(--muted)} .msg .mtx{font-size:13px} .msg.me .mbody{background:#E7F7EE} .reply-box{display:flex;gap:10px;align-items:flex-end;border-top:1px solid var(--line);padding-top:14px} .reply-wrap{border-top:1px solid var(--line);padding-top:14px} .reply-wrap .reply-box{border-top:none;padding-top:0} .detail-main .reply-wrap,.detail-grid.mgr .reply-wrap{border-top:1px solid var(--line)} .detail-main .reply-wrap .reply-box,.detail-grid.mgr .reply-wrap .reply-box{border-top:none} .attach-btn{width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);background:var(--surface);border-radius:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted)} .attach-btn:hover{border-color:#65feab;color:var(--primary)} .attach-btn svg{width:19px;height:19px} .reply-file-chip{display:inline-flex;align-items:center;gap:8px;background:#E7F7EE;color:#0C7A45;border-radius:9px;padding:6px 8px 6px 11px;font-size:12px;font-weight:600;margin-bottom:10px} .reply-file-chip>svg{width:15px;height:15px} .rf-x{background:none;border:none;cursor:pointer;color:#0C7A45;display:flex;padding:2px;border-radius:5px} .rf-x:hover{background:rgba(12,122,69,.14)} .rf-x svg{width:13px;height:13px} .msg-file{display:inline-flex;align-items:center;gap:7px;margin-top:8px;background:#fff;border:1px solid #CDEFDA;border-radius:8px;padding:5px 10px;font-size:11.5px;font-weight:600;color:#0C7A45;text-decoration:none;cursor:pointer} .msg-file:hover{border-color:#65feab} .msg-file svg{width:14px;height:14px;flex-shrink:0} .msg-file svg:last-child{margin-inline-start:2px} .status-actions{display:flex;gap:8px;flex-wrap:wrap} .chip-btn{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:7px 12px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink)} .chip-btn:hover{border-color:var(--accent);background:#F5FBF7} .chip-btn.picked{background:#E4FBEF;border-color:#65feab;color:#0C7A45;font-weight:700} /* MODAL */ .overlay{position:fixed;inset:0;background:rgba(19,32,41,.5);display:flex;align-items:center;justify-content:center;z-index:60;padding:24px} .modal{background:var(--surface);border-radius:20px;width:100%;max-width:520px;max-height:90vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.3)} .modal-h{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--surface)} .modal-h .mt{font-weight:700;font-size:16px} .modal-b{padding:22px 24px} .modal-f{padding:16px 24px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-start} /* TOAST */ .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:#132029;color:#fff;padding:13px 22px;border-radius:12px;font-size:13px;font-weight:500;box-shadow:0 14px 40px rgba(0,0,0,.3);z-index:80;display:flex;align-items:center;gap:10px;max-width:90vw} .toast svg{width:18px;height:18px;color:#65feab;flex-shrink:0} .page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px} .page-head .ph-t{font-weight:700;font-size:19px} .page-head .ph-s{font-size:12.5px;color:var(--muted)} .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} .fchip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--muted)} .fchip.on{background:var(--primary);color:#08301C;border-color:var(--primary)} /* Toolbar row: tabs anchored to the reading-start side, pagination to the end side — flips sides automatically between rtl/ltr since it's a plain flex row (start=right in rtl, right=left in ltr, per the dir attribute). */ .svc-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px} .pg-wrap{display:flex;align-items:center;gap:6px} .pg-btn{width:30px;height:30px;padding:0;border-radius:9px;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);font-family:inherit} .pg-btn:hover:not(:disabled){background:var(--bg)} .pg-btn:disabled{opacity:.4;cursor:not-allowed} .pg-btn svg{width:16px;height:16px} [dir="rtl"] .pg-btn svg{transform:scaleX(-1)} .pg-num{min-width:30px;height:30px;padding:0 8px;border-radius:9px;border:1px solid var(--line);background:var(--surface);font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer} .pg-num:hover{background:var(--bg)} .pg-num.on{background:var(--primary);border-color:var(--primary);color:#08301C} .pg-ellipsis{color:var(--muted);font-size:12.5px;padding:0 2px} .empty{text-align:center;padding:50px 20px;color:var(--muted)} .empty svg{width:44px;height:44px;color:var(--line);margin-bottom:12px} .note-pt{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;padding:8px 11px;margin-top:8px;background:var(--surface);cursor:grab;font-size:13px} .note-pt:active{cursor:grabbing} .note-pt.dragover{border-color:#65feab;background:#F1FBF5} .dev-item-row{border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-top:9px} .dev-item-main{display:flex;align-items:center;gap:10px;font-size:13px} .dev-item-btns{display:flex;gap:8px;margin-top:9px} .di-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:7px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;color:var(--muted)} .di-btn svg{width:14px;height:14px} .di-btn.acc.on{background:#E4FBEF;border-color:#0C7A45;color:#0C7A45} .di-btn.rej.on{background:#FCEAE8;border-color:#D6473B;color:#D6473B} .di-btn:hover{border-color:var(--muted)} .note-pt .grip{color:#9AA5B1;flex-shrink:0;display:flex} .note-pt .grip svg{width:15px;height:15px} .note-pt .del{margin-right:auto;background:none;border:none;color:#9AA5B1;cursor:pointer;padding:2px;display:flex} .note-pt .del:hover{color:#D6473B} .note-pt .del svg{width:15px;height:15px} .notes-ul{margin:0;padding-right:16px;font-size:12px;color:var(--muted)} .notes-ul li{margin-bottom:3px} .cost-pills{display:flex;flex-direction:column;gap:5px;align-items:flex-start} .cp-used{background:#FEF2E0;color:#C9821E} .cp-left{background:#E3F9EE;color:#0C7A45} .cp-over{background:#FCEAE8;color:#D6473B} .ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px} .ct-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:14px;transition:.15s;position:relative;overflow:hidden} .ct-card:hover{box-shadow:0 10px 30px rgba(19,32,41,.08);transform:translateY(-2px)} .ct-card.dim{opacity:.72} .ct-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .ct-dates{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ct-date{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:11px;padding:9px 11px;min-width:0} .ct-date.wide{grid-column:1/-1} .ct-date svg{width:16px;height:16px;color:#0C7A45;flex-shrink:0} .ct-date .dl{font-size:10px;color:var(--muted)} .ct-date .dv{font-size:12.5px;font-weight:700;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ct-foot{border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:flex-end;margin-top:auto} .ct-del{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:7px 13px;font-family:inherit;font-size:12px;font-weight:600;color:#8A97A3;cursor:pointer;transition:.15s} .ct-del svg{width:15px;height:15px} .ct-del:hover{color:#D6473B;border-color:#F3C8C4;background:#FCEAE8} .ct-bar{height:7px;border-radius:999px;background:var(--line);overflow:hidden;margin-bottom:9px} .ct-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#F5B43F,#E89B1C)} .ct-bar-fill.over{background:linear-gradient(90deg,#E4574C,#D6473B)} .cost-pills-row{display:flex;gap:6px;flex-wrap:wrap} .ct-notes{border-top:1px dashed var(--line);padding-top:11px} .ct-notes-l{font-size:10.5px;font-weight:700;color:#9AA5B1;margin-bottom:6px;letter-spacing:.02em} .del-contract{width:34px;height:34px;color:#9AA5B1} .del-contract:hover{color:#D6473B;border-color:#F3C8C4;background:#FCEAE8} .confirm-modal{background:var(--surface);border-radius:20px;width:100%;max-width:420px;box-shadow:0 30px 80px rgba(0,0,0,.3);padding:28px 26px;text-align:center} .confirm-ic{width:64px;height:64px;border-radius:50%;background:#FCEAE8;color:#D6473B;display:flex;align-items:center;justify-content:center;margin:0 auto 16px} .confirm-ic svg{width:30px;height:30px} .confirm-t{font-size:17px;font-weight:700;margin-bottom:8px} .confirm-s{font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:6px} .confirm-s b{color:var(--ink)} .confirm-warn{display:inline-flex;align-items:center;gap:7px;background:#FEF2E0;color:#C9821E;border-radius:999px;padding:6px 14px;font-size:11.5px;font-weight:700;margin:6px 0 18px} .confirm-warn svg{width:14px;height:14px} .confirm-actions{display:flex;gap:10px;justify-content:center} .btn-danger{background:#D6473B;color:#fff} .btn-danger:hover{background:#B93A2F} .confirm-ic.ok{background:#E4FBEF;color:#0C7A45} .cost-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)} .cost-row:last-child{border-bottom:none} .cost-row .cn{font-weight:600;font-size:13px;width:190px;flex-shrink:0} .cost-row .cbar{flex:1;height:8px;border-radius:999px;background:var(--line);overflow:hidden} .cost-row .cbar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#37dd86,#65feab)} .cost-row .cbar-fill.over{background:linear-gradient(90deg,#E4574C,#D6473B)} .cost-row .cv{font-size:12px;font-weight:600;width:170px;text-align:left;flex-shrink:0} .cost-row .cv .muted{font-weight:500} .avatar-sm{width:30px;height:30px;border-radius:50%;background:#65feab;color:#08301C;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px} .cell-user{display:flex;align-items:center;gap:9px} /* compact */ .compact .content{padding:18px} .compact .card{padding:15px} .compact .kpi{padding:14px} .compact .tbl td{padding:9px 10px} .detail-main{padding:0;overflow:hidden} .detail-grid .card{box-shadow:0 4px 18px rgba(19,32,41,.05)} .detail-grid .card-t{display:flex;align-items:center;gap:8px} .detail-grid .card-t::before{content:'';width:4px;height:16px;border-radius:99px;background:linear-gradient(180deg,#65feab,#37dd86)} .dt-head{background:linear-gradient(135deg,#F1FBF5,#E7F7EE);border-bottom:1px solid var(--line);padding:22px 24px 20px;position:relative} .dt-head::before{content:'';position:absolute;top:0;right:0;left:0;height:4px;background:#65feab} .dt-head-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .dt-code{font-weight:700;color:#0C7A45;font-size:12.5px;background:#fff;border:1px solid var(--line);padding:4px 13px;border-radius:999px} .dt-title{font-size:22px;font-weight:700;margin:0 0 15px;line-height:1.4} .dt-metastrip{display:flex;flex-wrap:wrap;gap:8px} .dt-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;color:var(--ink)} .dt-chip svg{width:14px;height:14px;color:#0C7A45} .dt-desc{padding:18px 24px 2px} .dt-desc-l{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:6px;letter-spacing:.02em} .dt-desc p{margin:0;font-size:14px;line-height:1.85} .detail-main .thread{padding:8px 24px 0} .detail-main .reply-box{padding:16px 24px 20px;margin:0} .msg .mbody{background:#fff;border:1px solid var(--line);box-shadow:0 2px 8px rgba(19,32,41,.04)} .msg.me .mbody{background:#E7F7EE;border-color:#CDEFDA} @media(max-width:900px){ .sidebar{display:none} .detail-grid,.grid-2,.grid-2b,.kpi-grid{grid-template-columns:1fr} .login-card{grid-template-columns:1fr}.login-side{display:none} .mobnav{display:flex} } .mobnav{display:none;position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);z-index:35;justify-content:space-around;padding:8px} .mobnav .mn{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--muted);cursor:pointer;padding:4px 8px} .mobnav .mn.active{color:#0C7A45;font-weight:700} .mobnav .mn svg{width:20px;height:20px} /* SUPPORT SERVICES */ .svc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px} .svc-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;position:relative;overflow:hidden;transition:.15s} .svc-card:hover{box-shadow:0 10px 28px rgba(19,32,41,.09)} .svc-card::before{content:'';position:absolute;top:0;bottom:0;right:0;width:4px;background:#0C7A45} .svc-card.warn::before{background:#C9821E} .svc-card.crit::before{background:#D6473B} .svc-top{display:flex;align-items:center;gap:12px;margin-bottom:14px} .svc-ic{width:42px;height:42px;border-radius:12px;background:#E7F7EE;color:#0C7A45;display:flex;align-items:center;justify-content:center;flex-shrink:0} .svc-ic svg{width:20px;height:20px} .svc-id{min-width:0;flex:1} .svc-name{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .svc-sub{font-size:11.5px;color:var(--muted);margin-top:2px} .svc-body{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin-bottom:12px} .svc-f{display:flex;flex-direction:column;gap:2px;min-width:0} .svc-f .sl{font-size:10.5px;color:var(--muted);font-weight:600} .svc-f .sv{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .svc-bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden} .svc-bar-fill{height:100%;border-radius:999px;background:#0C7A45} .svc-bar-fill.warn{background:#C9821E} .svc-bar-fill.crit{background:#D6473B} .svc-note{font-size:11.5px;color:var(--muted);background:var(--bg);border-radius:8px;padding:8px 10px;margin-top:10px} .svc-foot{display:flex;gap:8px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);flex-wrap:wrap} .svc-foot .ct-del{margin-right:auto} .svc-exp{background:#EEF1F3;color:#647787}