:root{--g:#1D4ED8;--g2:#2563EB;--bg:#F8FAFC;--card:#fff;--line:#E2E8F0;--txt:#0F172A;--mut:#64748B;--red:#c0392b;--orange:#d9822b;--blue:#2563eb}*{box-sizing:border-box}body{margin:0;font-family:"Cairo",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--txt)}button,input,select{font:inherit}button{cursor:pointer}.login{min-height:100vh;display:grid;place-items:center;padding:20px}.box{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 14px 38px rgba(15,23,42,.08);width:min(520px,100%)}.logo{width:74px;height:74px;border-radius:22px;background:linear-gradient(135deg,var(--g),#2563EB);display:grid;place-items:center;color:#fff;font-size:34px;margin:auto}.title{text-align:center;margin:12px 0 4px;font-weight:900;font-size:28px}.sub{text-align:center;color:var(--mut);margin-bottom:18px}.field{display:block;margin:10px 0}.field span{display:block;font-weight:800;margin-bottom:6px}.field input,.field select{width:100%;padding:13px;border:1px solid var(--line);border-radius:14px;background:#fff}.btn,.smallbtn{border:0;border-radius:14px;padding:12px 14px;background:var(--g);color:#fff;font-weight:900}.btn{width:100%;padding:14px 18px}.smallbtn{width:auto;margin:3px}.danger{background:#fee2e2;color:#991b1b}.ok{background:#dcfce7;color:#166534}.warn{background:#fff7ed;color:#9a3412}.demo{font-size:13px;color:var(--mut);line-height:1.8;background:#F8FAFC;border-radius:14px;padding:10px;margin-top:12px}.app{display:none;min-height:100vh}.top{height:64px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:sticky;top:0;z-index:3}.brand{display:flex;gap:10px;align-items:center;font-weight:900}.mark{width:38px;height:38px;border-radius:13px;background:var(--g);color:#fff;display:grid;place-items:center}.user{font-size:13px;color:var(--mut)}.layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 64px)}.side{background:var(--card);border-left:1px solid var(--line);padding:14px;position:sticky;top:64px;height:calc(100vh - 64px);overflow:auto}.nav{display:grid;gap:8px}.nav button{border:0;background:transparent;text-align:right;padding:13px;border-radius:14px;font-weight:800;color:#0F172A}.nav button.active,.nav button:hover{background:#DBEAFE;color:var(--g)}.main{padding:18px;overflow:auto}.cards{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:14px}.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px}.card .n{font-size:28px;font-weight:900;color:var(--g)}.card .l{color:var(--mut);font-weight:700}.grid-icons{display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:16px;margin-top:16px}.big{background:var(--card);border:1px solid var(--line);border-radius:26px;min-height:140px;padding:22px;display:grid;place-items:center;text-align:center;font-weight:900;font-size:21px;box-shadow:0 8px 20px rgba(15,23,42,.05)}.big .ico{font-size:44px;margin-bottom:8px}.table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:14px}.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}.table th{background:#DBEAFE}.row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.modal{position:fixed;inset:0;background:#0008;display:none;place-items:center;z-index:10;padding:16px}.modal.show{display:grid}.modal .box{max-width:560px}.pill{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900;background:#DBEAFE;color:var(--g)}.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}.search{max-width:320px;padding:11px;border:1px solid var(--line);border-radius:12px}.bottomnav{display:none}.alert-row{background:#fff7ed}.muted{color:var(--mut);font-size:13px}.opline{display:grid;grid-template-columns:1fr 110px 42px;gap:8px;margin:8px 0}.badgebar{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.badge{background:#DBEAFE;color:var(--g);border-radius:999px;padding:7px 11px;font-weight:900;font-size:12px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 8px}.mini{font-size:12px;color:var(--mut);font-weight:700}.statusbar{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;margin:12px 0}.statusbox{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px}.statusbox b{display:block;color:var(--g);font-size:22px}.notice{background:#f0fdf4;border:1px solid #BFDBFE;color:#166534;border-radius:16px;padding:12px;margin:10px 0;font-weight:800}.phase-panel{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:12px;margin:14px 0}.phase-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px}.phase-card b{display:block;font-size:20px;color:var(--g)}.photo-preview{max-width:100%;border-radius:14px;border:1px solid var(--line);margin-top:8px}.tenant-bar{display:flex;gap:10px;align-items:center;justify-content:center;background:#DBEAFE;border-bottom:1px solid #BFDBFE;padding:8px 12px;font-weight:900;color:var(--g)}.tenant-bar select{min-width:220px;padding:9px;border:1px solid #BFDBFE;border-radius:12px;background:#fff}@media(max-width:800px){.phase-panel{grid-template-columns:1fr}.grid-icons{grid-template-columns:1fr 1fr}} .label-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:12px}.barcode-label{background:#fff;border:1px dashed #94A3B8;border-radius:14px;padding:12px;text-align:center;min-height:96px}.barcode-label b{display:block;font-size:15px}.barcode-code{font-size:22px;letter-spacing:2px;font-weight:900;margin:8px 0;color:#0F172A}.progress{height:10px;background:#E2E8F0;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:#1D4ED8}.split-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.print-labels-only{display:none}@media(max-width:800px){.split-2{grid-template-columns:1fr}.label-grid{grid-template-columns:1fr 1fr}}@media print{body.print-labels .top,body.print-labels .side,body.print-labels .bottomnav,body.print-labels .toolbar,body.print-labels .no-print{display:none!important}body.print-labels .main{padding:0}.print-labels-only{display:block}.barcode-label{page-break-inside:avoid;border:1px solid #000;border-radius:4px}} .print-only{display:none}@media print{.top,.side,.bottomnav,.smallbtn,.btn{display:none!important}.main{padding:0}.table{font-size:12px}.print-only{display:block}}@media(max-width:800px){.layout{display:block}.side{display:none}.main{padding:14px 14px 86px}.bottomnav{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:#fffffff2;border-top:1px solid var(--line);padding:8px;z-index:5}.bottomnav button{border:0;border-radius:14px;background:#DBEAFE;color:var(--g);font-weight:900;padding:10px 6px;font-size:12px}.cards{grid-template-columns:repeat(2,1fr)}.grid-icons{grid-template-columns:repeat(2,1fr)}.big{min-height:128px;font-size:19px}.top{height:60px}.table{font-size:13px;display:block;overflow:auto}.row{grid-template-columns:1fr}} /* mobile layer */ body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent} .brand small{display:block;color:var(--mut);font-size:11px;font-weight:800;line-height:1}.menubtn{display:none;border:0;background:#DBEAFE;color:var(--g);border-radius:13px;width:42px;height:42px;font-size:22px;font-weight:900}.top-actions{display:flex;gap:8px;align-items:center}.install{background:#DBEAFE;color:#1D4ED8;border:1px solid #BFDBFE;display:inline-flex;align-items:center;justify-content:center}.shade{display:none}.net-status{display:none;position:fixed;top:64px;left:12px;right:12px;z-index:20;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;border-radius:16px;padding:10px 12px;text-align:center;font-weight:900;box-shadow:0 10px 25px #0001}.offline .net-status{display:block}.nav button{display:flex;align-items:center;gap:9px}.nav button span{width:26px;height:26px;display:grid;place-items:center;background:#DBEAFE;border-radius:9px}.bottomnav button{display:grid!important;gap:2px;place-items:center}.bottomnav span{font-size:18px;line-height:1}.bottomnav b{font-size:11px;white-space:nowrap}.main h2{margin-top:0}.table td .smallbtn,.table td button{min-height:34px}.cards .card,.phase-card,.big{transition:.15s transform ease}.cards .card:active,.phase-card:active,.big:active{transform:scale(.99)} @media(max-width:800px){body{background:#F8FAFC}.menubtn{display:grid;place-items:center}.top{height:62px;padding:0 10px;padding-top:env(safe-area-inset-top)}.brand{gap:8px}.mark{width:36px;height:36px;border-radius:12px}.top-actions{gap:5px}.top-actions .user{max-width:118px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}.top-actions .danger{padding:9px 10px}.layout{min-height:calc(100vh - 62px)}.side{display:block;position:fixed;top:0;bottom:0;right:0;width:min(84vw,330px);height:auto;z-index:30;transform:translateX(105%);transition:.22s transform ease;border-left:1px solid var(--line);box-shadow:-12px 0 35px #10291d26;padding-top:calc(76px + env(safe-area-inset-top))}.menu-open .side{transform:translateX(0)}.menu-open .shade{display:block;position:fixed;inset:0;background:#0006;z-index:25}.nav{gap:7px}.nav button{padding:14px 12px;background:#fbfdfc;border:1px solid #edf3ef}.main{padding:14px 12px calc(88px + env(safe-area-inset-bottom))}.toolbar{position:sticky;top:62px;z-index:2;background:#F8FAFCe8;backdrop-filter:blur(10px);padding:8px 0}.toolbar h2{font-size:20px}.btn,.smallbtn{min-height:44px}.field input,.field select,.search{min-height:46px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card{padding:14px;border-radius:18px}.card .n{font-size:22px}.card .l{font-size:12px}.grid-icons{gap:10px}.big{border-radius:22px;min-height:118px;padding:16px;font-size:17px}.big .ico{font-size:36px}.modal{align-items:end;padding:0}.modal .box{width:100%;max-width:100%;border-radius:24px 24px 0 0;max-height:86vh;overflow:auto;padding-bottom:calc(20px + env(safe-area-inset-bottom))}.row{grid-template-columns:1fr!important}.opline{grid-template-columns:1fr 82px 42px}.table{display:block;background:transparent;border:0;border-radius:0;overflow:visible}.table thead{display:none}.table tbody{display:grid;gap:10px}.table tr{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:0 8px 18px #10291d0a}.table td{display:flex;justify-content:space-between;gap:12px;padding:9px 6px;border-bottom:1px dashed #edf2ef;text-align:left;align-items:flex-start}.table td:last-child{border-bottom:0}.table td::before{content:attr(data-label);font-weight:900;color:var(--mut);text-align:right;min-width:92px}.bottomnav{padding-bottom:calc(8px + env(safe-area-inset-bottom));box-shadow:0 -8px 28px #10291d12}.bottomnav button{min-height:56px;border-radius:16px}.phase-panel,.statusbar{grid-template-columns:1fr 1fr}.notice{font-size:13px}.box{border-radius:22px}} @media(max-width:420px){.cards,.phase-panel,.statusbar{grid-template-columns:1fr 1fr}.card .n{font-size:20px}.bottomnav b{font-size:10px}.top-actions .user{display:none}.smallbtn{padding:10px 11px}.table td{font-size:13px}} @media(hover:none){button:active{filter:brightness(.96)}} .toast{position:fixed;left:14px;right:14px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:80;background:#1D4ED8;color:#fff;border-radius:16px;padding:13px 16px;font-weight:900;box-shadow:0 16px 36px #0002;transform:translateY(140%);opacity:0;transition:.22s}.toast.show{transform:translateY(0);opacity:1}.toast.err{background:#b91c1c}.toast.warn{background:#b45309}.loading-card{min-height:230px;background:#fff;border:1px solid var(--line);border-radius:22px;display:grid;place-items:center;text-align:center;gap:8px;color:var(--mut);box-shadow:0 10px 28px #10291d0d}.loading-card b{color:var(--g);font-size:20px}.spinner{width:42px;height:42px;border:4px solid #e5eee9;border-top-color:var(--g);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toolbar>div{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.toolbar .search{min-width:220px}.table tr{transition:.12s background ease}.table tr:hover{background:#fbfdfc}@media(max-width:800px){.toast{bottom:calc(92px + env(safe-area-inset-bottom))}.toolbar>div{width:100%;display:grid;grid-template-columns:1fr auto auto}.toolbar .search{min-width:0;width:100%}} /* cloud layer */ .top-refresh,.top-home{background:#DBEAFE;color:var(--g);border:1px solid #d9e8df}.bottomnav button.active{background:var(--g);color:#fff}.bottomnav button.active span{filter:grayscale(0)}.empty-state{background:#fff;border:1px dashed var(--line);border-radius:18px;padding:20px;text-align:center;color:var(--mut);font-weight:900}.screen-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.quick-strip{display:flex;gap:8px;overflow:auto;padding:2px 0 10px;margin-bottom:6px}.quick-strip button{white-space:nowrap;border:1px solid var(--line);background:#fff;color:var(--g);border-radius:999px;padding:9px 12px;font-weight:900}@media(max-width:800px){.top-home{display:none}.top-refresh{padding:9px 10px}.top-actions .install{padding:9px 10px}.main{scroll-margin-top:70px}.quick-strip{margin-left:-4px;margin-right:-4px;padding-right:2px}} /* screen layer */ .smart-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(135deg,#DBEAFE,#ffffff);border:1px solid #BFDBFE;border-radius:22px;padding:16px;margin:12px 0;box-shadow:0 10px 26px #2563EB0c}.smart-strip b{display:block;color:var(--g);font-size:18px}.smart-strip span{display:block;color:var(--mut);font-weight:700;margin-top:3px}.smart-strip.compact{padding:12px;margin:0 0 12px}.alert-board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}.alert-card{border-radius:22px;padding:18px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px #2563EB0b}.alert-card b,.alert-card span{display:block}.alert-card strong{display:block;font-size:34px;margin:8px 0}.alert-card.urgent{border-color:#fecaca;background:#fff7f7;color:#991b1b}.alert-card.follow{border-color:#fed7aa;background:#fffbeb;color:#9a3412}.alert-card.normal{border-color:#BFDBFE;background:#f0fdf4;color:#166534}.report-shell{background:#fff;border:1px solid var(--line);border-radius:24px;padding:14px;margin:12px 0}.report-filters{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;align-items:end}.report-cards{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:10px;margin-top:12px}.report-card{border:1px solid var(--line);background:#fbfdfc;border-radius:18px;padding:14px;text-align:right;font-weight:900;color:var(--txt)}.report-card span{font-size:22px;margin-left:6px}.report-card.active{background:#DBEAFE;border-color:#b7d8c8;color:var(--g)}.purchase-hero{display:grid;grid-template-columns:1fr 260px;gap:16px;align-items:center;background:linear-gradient(135deg,var(--g),#2563EB);color:#fff;border-radius:26px;padding:20px;margin:14px 0;box-shadow:0 14px 30px #2563EB24}.purchase-hero b{display:block;font-size:22px}.purchase-hero span{opacity:.9;font-weight:800}.purchase-hero .btn{background:#fff;color:var(--g)}.scan-box{background:#fff;border:1px solid var(--line);border-radius:26px;padding:18px;box-shadow:var(--shadow);margin:12px 0}.scan-input{font-size:22px;font-weight:900;text-align:center;letter-spacing:1px}.wizard-grid{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:12px}.wizard-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:0 10px 24px #2563EB0b}.wizard-card b{display:block;color:var(--g);font-size:18px}.wizard-card small{display:block;color:var(--mut);font-weight:800;margin-top:4px}@media(max-width:800px){.wizard-grid{grid-template-columns:1fr 1fr}.scan-input{font-size:18px}} @media(max-width:800px){.smart-strip{display:block}.smart-strip .smallbtn{margin-top:10px;width:100%}.alert-board,.report-filters,.report-cards{grid-template-columns:1fr}.purchase-hero{grid-template-columns:1fr}.purchase-hero .btn{margin-top:8px}.cards{grid-template-columns:1fr 1fr}.phase-panel{grid-template-columns:1fr 1fr}.table-actions{display:flex;flex-wrap:wrap;gap:4px}} @media(max-width:480px){.cards,.phase-panel{grid-template-columns:1fr}.grid-icons{grid-template-columns:1fr 1fr}.big{min-height:112px}} /* completion layer */ .pro-head{background:linear-gradient(135deg,#ffffff,#f0f9f4);border:1px solid var(--line);border-radius:22px;padding:14px 16px;margin-bottom:14px;box-shadow:0 10px 28px #2563EB0a}.pro-head h2{margin:0 0 4px}.pro-card{position:relative;overflow:hidden}.pro-card:before{content:"";position:absolute;inset:auto auto -35px -35px;width:92px;height:92px;border-radius:50%;background:#DBEAFE}.screen-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}.screen-guide>div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px}.screen-guide span{display:inline-flex;background:#DBEAFE;color:var(--g);border-radius:999px;padding:5px 10px;font-weight:900;font-size:12px}.screen-guide b{display:block;margin-top:8px}.screen-guide small{display:block;color:var(--mut);font-weight:700;margin-top:4px}.empty-state{background:#fff;border:1px dashed #cbd8d0;border-radius:20px;padding:24px;text-align:center;color:var(--mut);margin:14px 0}.empty-state b{display:block;color:var(--txt);font-size:18px;margin:6px 0}.empty-ico{font-size:36px}.table-actions{display:flex;gap:5px;flex-wrap:wrap}.loading-card{min-height:220px;display:grid;place-items:center;text-align:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px}.spinner{width:34px;height:34px;border-radius:50%;border:4px solid #e5eee9;border-top-color:var(--g);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}} @media(max-width:800px){.screen-guide{grid-template-columns:1fr}.pro-head{position:relative;top:auto}.pro-head>div:last-child{display:flex;gap:6px;overflow:auto;width:100%;padding-bottom:2px}.pro-head .search{min-width:180px}.table-actions .smallbtn{flex:1;min-width:90px}.empty-state{padding:20px 12px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}} .mobile-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:12px 0}.product-card,.stock-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;display:flex;gap:10px;align-items:center;box-shadow:0 8px 22px #10291d0d}.product-card>div:nth-child(2){flex:1}.product-card span,.product-card small,.stock-card span,.stock-card small{display:block;color:var(--mut);font-size:12px}.prod-img{width:54px;height:54px;border-radius:16px;background:#eef7f1;display:grid;place-items:center;font-size:26px;overflow:hidden}.prod-img img{width:100%;height:100%;object-fit:cover}.stock-card{display:block}.stock-card div{display:flex;align-items:center;justify-content:space-between;margin:8px 0}.stock-card strong{font-size:24px;color:var(--g)}.report-card.active{outline:2px solid var(--g)}@media(max-width:760px){.mobile-cards+.table{display:none}.product-card,.stock-card{border-radius:16px}.report-cards{grid-template-columns:repeat(2,1fr)!important}.toolbar.pro-head{align-items:stretch}.toolbar.pro-head>div:last-child{display:flex;gap:6px;flex-wrap:wrap}.search{width:100%}} /* professional polish */ :root{--shadow:0 18px 45px #2563EB12}.top{box-shadow:0 10px 30px #10291d08}.main{max-width:1440px;width:100%;margin-inline:auto}.card,.phase-card,.big,.box{box-shadow:var(--shadow)}.prod-ready{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin:14px 0}.ready-item{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px}.ready-item b{display:block;color:var(--g);font-size:24px}.ready-item span{color:var(--mut);font-weight:800;font-size:13px}.go-live-list{display:grid;gap:10px;margin-top:12px}.go-live-list div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;font-weight:800}.go-live-list small{display:block;color:var(--mut);font-weight:700;margin-top:3px}.table-actions{display:flex;gap:6px;flex-wrap:wrap}.top-home{background:#eef5ff;color:#1d4ed8}.top-refresh{background:#DBEAFE;color:#1D4ED8}@media(max-width:800px){.top-actions .top-home{display:none}.prod-ready{grid-template-columns:repeat(2,minmax(0,1fr))}.ready-item{padding:12px}.ready-item b{font-size:20px}.demo{display:none}.brand small{font-size:10px}.top-actions .install{max-width:76px;overflow:hidden}.main{max-width:none}} /* === MAKHZANY PHASE 1 PROFESSIONAL UI OVERRIDE === */ :root{--g:#2563EB;--g2:#08291f;--navy:#10233f;--navy2:#081827;--mint:#2563EB;--bg:#f3f6f5;--card:#ffffff;--line:#dfe7e3;--txt:#0F172A;--mut:#65746b;--shadow:0 18px 45px rgba(8,24,39,.10)} body{font-family:Cairo,system-ui,-apple-system,"Segoe UI",Tahoma,Arial;background:radial-gradient(circle at top right,#eaf7f1 0,#f6f8f7 36%,#eef3f1 100%);color:var(--txt)} button,input,select,textarea{font-family:inherit}.login{display:grid;place-items:stretch;min-height:100vh;padding:0;background:linear-gradient(135deg,#071827 0%,#2563EB 58%,#10233f 100%);overflow:hidden;position:relative}.login:before{content:"";position:absolute;inset:-25%;background:radial-gradient(circle at 22% 20%,rgba(22,163,109,.38),transparent 26%),radial-gradient(circle at 78% 75%,rgba(255,255,255,.13),transparent 26%);filter:blur(2px)}.login-wrap{position:relative;z-index:1;width:min(1180px,100%);margin:auto;padding:28px;display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}.login-hero{color:#fff;padding:34px}.login-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.20);padding:9px 14px;border-radius:999px;font-weight:900}.login-hero h1{font-size:54px;line-height:1.1;margin:22px 0 12px;font-weight:1000;letter-spacing:-1px}.login-hero p{font-size:18px;line-height:1.9;color:rgba(255,255,255,.82);margin:0 0 24px}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:560px}.hero-stat{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:16px}.hero-stat b{display:block;font-size:24px}.hero-stat span{font-size:13px;color:rgba(255,255,255,.74)}.login-card{background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.68);border-radius:34px;padding:34px;box-shadow:0 28px 70px rgba(0,0,0,.28);width:min(460px,100%);justify-self:center}.login-logo{width:78px;height:78px;border-radius:26px;background:linear-gradient(135deg,var(--navy),var(--g));display:grid;place-items:center;color:#fff;font-size:36px;box-shadow:0 18px 36px rgba(11,63,45,.28);margin:0 auto 16px}.login-title{text-align:center;font-size:31px;font-weight:1000;margin:0;color:var(--navy)}.login-sub{text-align:center;color:var(--mut);font-weight:800;margin:6px 0 22px}.login .field span{color:var(--navy);font-weight:900}.login .field input{border:1px solid #dbe6e1;background:#f8fbfa;border-radius:17px;padding:15px 16px;outline:none}.login .field input:focus{border-color:var(--mint);box-shadow:0 0 0 4px rgba(22,163,109,.10)}.login .btn{margin-top:8px;border-radius:18px;padding:16px 18px;background:linear-gradient(135deg,var(--g),var(--mint));box-shadow:0 14px 26px rgba(11,63,45,.22)}.secure-note{text-align:center;color:var(--mut);font-size:12px;font-weight:800;margin-top:16px}.top{height:72px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);box-shadow:0 10px 28px rgba(8,24,39,.06);border-bottom:1px solid rgba(223,231,227,.75);padding:0 18px}.brand .mark,.mark{background:linear-gradient(135deg,var(--navy),var(--g));box-shadow:0 10px 20px rgba(8,24,39,.12)}.brand b{font-size:18px;color:var(--navy)}.brand small{color:var(--mut)!important}.layout{grid-template-columns:282px 1fr}.side{background:linear-gradient(180deg,#fff,#f8fbfa);border-left:1px solid var(--line);box-shadow:-10px 0 28px rgba(8,24,39,.04);padding:18px}.nav button{border:1px solid transparent;background:transparent;border-radius:18px;color:#273a31;padding:13px 14px}.nav button.active,.nav button:hover{background:linear-gradient(135deg,#ecf8f2,#f6fbf8);border-color:#d7eee3;color:var(--g);box-shadow:0 8px 18px rgba(11,63,45,.07)}.nav button span{background:#eef7f3!important}.main{padding:24px}.pro-head{background:#fff;border:1px solid var(--line);border-radius:26px;padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow)}.pro-head h2{font-size:28px;color:var(--navy);font-weight:1000;margin:0 0 6px}.cards{grid-template-columns:repeat(4,minmax(160px,1fr));gap:16px}.card,.pro-card,.phase-card,.statusbox,.big{border:1px solid var(--line);box-shadow:var(--shadow);border-radius:26px}.card .n{color:var(--g);font-size:32px}.card .l{font-weight:900;color:#38483f}.mini,.muted{color:var(--mut)}.smallbtn{border-radius:14px;background:#edf5f1;color:var(--g);border:1px solid #d9ebe3;font-weight:900}.smallbtn:hover{filter:brightness(.98)}.smallbtn.ok,.ok{background:#e8f8ef;color:#087544;border-color:#c9ecd8}.smallbtn.danger,.danger{background:#feecec;color:#9f1d1d;border-color:#ffd0d0}.btn{background:linear-gradient(135deg,var(--g),var(--mint));border-radius:16px}.table{border-radius:24px;box-shadow:var(--shadow);overflow:hidden}.table th{background:#2563EB;color:#fff;border-bottom:0;font-weight:900}.table td{background:#fff}.pill{background:#edf8f2;color:var(--g);font-weight:900}.empty-state{background:#fff;border:1px dashed #cfded7;border-radius:26px;padding:34px;text-align:center;box-shadow:var(--shadow)}.empty-state span{display:block;color:var(--mut);margin-top:6px}.loading-card span,.demo,.screen-guide,.prod-ready .ready-item span{display:none!important}.notice{background:#eef8f3;border:1px solid #d3eee1;color:#0b5738;border-radius:20px;box-shadow:0 10px 24px rgba(11,63,45,.06)}.tenant-bar{background:#f0f8f4;color:var(--g)}.action-fab{background:linear-gradient(135deg,var(--g),var(--mint));box-shadow:0 14px 28px rgba(11,63,45,.25)} @media(max-width:900px){.login-wrap{grid-template-columns:1fr;padding:20px}.login-hero{padding:18px;text-align:center}.login-hero h1{font-size:38px}.hero-stats{grid-template-columns:1fr 1fr 1fr;margin:auto}.login-card{border-radius:28px;padding:26px}.layout{display:block}.main{padding:14px 14px 92px}.cards{grid-template-columns:repeat(2,1fr)}.top{height:64px}.side{padding-top:calc(82px + env(safe-area-inset-top))}.top-actions .top-refresh,.top-actions .top-home{display:none}.brand b{font-size:16px}.login-hero p{font-size:15px}}@media(max-width:520px){.hero-stats{grid-template-columns:1fr}.login-hero h1{font-size:34px}.login-card{padding:22px}.cards{grid-template-columns:1fr 1fr}.card{padding:14px}.card .n{font-size:24px}.login-wrap{padding:14px}} /* Phase 2 Production polish */ .clean-head{align-items:center;background:linear-gradient(135deg,#fff,#f8fcfa)!important} .clean-head .muted,.mini,.screen-guide,.prod-ready .ready-item span,.secure-note{display:none!important} .clean-empty{border-style:solid!important;min-height:120px;display:grid;place-items:center;color:#334155!important} .clean-empty b{font-size:18px;color:#10233f!important} .section-title{margin:22px 0 12px;color:#10233f;font-weight:1000} .card.pro-card{background:linear-gradient(180deg,#ffffff,#fbfefd);min-height:112px} .card.pro-card:before{opacity:.55} .card .n{letter-spacing:-.5px} .loading-card{min-height:180px!important} .login .secure-note{display:none!important} .notice small,.ready-item span,.empty-ico{display:none!important} @media(max-width:800px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}.card.pro-card{min-height:98px}.pro-head h2{font-size:22px!important}} /* ===== MAKHZANY PHASE 3 - Production Identity & Mobile UX ===== */ :root{--navy:#071827;--navy2:#10233f;--g:#0b5b3f;--mint:#2563EB;--soft:#f4f8f6;--line:#dfe8e3;--shadow:0 18px 42px rgba(8,24,39,.08)} body{font-family:"Cairo","Tajawal",system-ui,-apple-system,"Segoe UI",Tahoma,Arial!important;background:linear-gradient(180deg,#f6faf8,#DBEAFE)!important}.login-hero h1:after{content:"";display:block;width:86px;height:5px;border-radius:999px;background:#2563EB;margin-top:18px}.top{border-bottom:0!important}.brand small{display:block;font-size:12px;font-weight:800}.menubtn{border:0;background:#edf7f2;color:var(--g);border-radius:14px;width:40px;height:40px;font-weight:1000}.top-actions{display:flex;align-items:center;gap:8px}.smallbtn{box-shadow:0 7px 16px rgba(8,24,39,.07)}.danger{background:#fff1f2!important;color:#9f1239!important}.ok{background:#dcfce7!important;color:#166534!important}.pro-head.clean-head{background:linear-gradient(135deg,#ffffff,#f7fbf9);align-items:center}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:16px;margin-bottom:18px}.kpi-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:28px;padding:19px;box-shadow:var(--shadow);min-height:132px}.kpi-card:before{content:"";position:absolute;inset:auto -30px -45px auto;width:130px;height:130px;border-radius:50%;background:rgba(22,163,109,.10)}.kpi-ico{width:46px;height:46px;border-radius:17px;background:linear-gradient(135deg,#DBEAFE,#dff7eb);display:grid;place-items:center;font-size:24px;margin-bottom:14px}.kpi-val{font-size:31px;font-weight:1000;color:var(--navy);line-height:1}.kpi-lbl{color:#66766d;font-weight:900;margin-top:8px}.quick-grid{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:13px;margin:14px 0 22px}.quick-btn{border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f8fbfa);border-radius:25px;padding:18px 12px;min-height:112px;box-shadow:var(--shadow);font-weight:1000;color:var(--navy);display:grid;place-items:center;text-align:center}.quick-btn span{font-size:34px;display:block;margin-bottom:6px}.panel-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.clean-panel{background:#fff;border:1px solid var(--line);border-radius:28px;padding:18px;box-shadow:var(--shadow)}.clean-panel h3{margin:0 0 12px;color:var(--navy);font-size:19px}.table{box-shadow:var(--shadow);border-radius:24px!important}.table th{background:#f1f7f4!important;color:var(--navy);font-weight:1000}.table td,.table th{white-space:nowrap}.phase-panel{grid-template-columns:repeat(4,minmax(150px,1fr))}.phase-card{background:linear-gradient(180deg,#fff,#f9fcfa)}.phase-card b{font-size:28px!important;color:var(--navy)!important}.big{background:linear-gradient(180deg,#fff,#f8fbfa);transition:.15s transform,.15s box-shadow}.big:hover,.quick-btn:hover{transform:translateY(-2px);box-shadow:0 22px 46px rgba(8,24,39,.12)}.big .mini{display:none!important}.notice,.demo,.muted-guide,.screen-guide{display:none!important}.action-fab{position:fixed;left:18px;bottom:86px;width:58px;height:58px;border:0;border-radius:22px;background:linear-gradient(135deg,var(--g),var(--mint));color:#fff;font-size:28px;box-shadow:0 18px 36px rgba(11,63,45,.28);z-index:8;display:none}.action-sheet{display:none;position:fixed;left:12px;right:12px;bottom:82px;background:#fff;border:1px solid var(--line);border-radius:30px;padding:14px;box-shadow:0 30px 80px rgba(8,24,39,.25);z-index:9}.action-sheet.show{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.action-sheet button{border:1px solid var(--line);background:#f8fbfa;border-radius:22px;padding:16px;font-weight:1000}.bottomnav{box-shadow:0 -12px 34px rgba(8,24,39,.08)}.bottomnav button{display:grid;gap:2px}.bottomnav button span{font-size:20px}.nav button{display:flex;align-items:center;gap:11px}.nav button span{width:34px;height:34px;border-radius:13px;display:grid;place-items:center}.nav button b{font-weight:1000}.loading-card{min-height:240px;display:grid;place-items:center}.spinner{width:44px;height:44px;border:4px solid #dfe8e3;border-top-color:var(--g);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}} @media(max-width:1000px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.quick-grid{grid-template-columns:repeat(3,1fr)}.panel-grid{grid-template-columns:1fr}.phase-panel{grid-template-columns:repeat(2,1fr)}} @media(max-width:800px){.login-wrap{grid-template-columns:1fr;padding:18px}.login-hero{padding:18px 8px;text-align:center}.login-hero h1{font-size:42px}.login-hero h1:after{margin:14px auto 0}.hero-stats{grid-template-columns:repeat(3,1fr)}.login-card{border-radius:30px;padding:25px}.top-actions .top-refresh,.top-actions .top-home,.install{display:none!important}.main{padding:14px 12px 98px!important}.kpi-grid{grid-template-columns:repeat(2,1fr);gap:11px}.kpi-card{min-height:118px;padding:15px;border-radius:23px}.kpi-val{font-size:25px}.quick-grid{grid-template-columns:repeat(2,1fr);gap:11px}.quick-btn{min-height:104px;border-radius:23px}.phase-panel{grid-template-columns:repeat(2,1fr);gap:10px}.grid-icons{grid-template-columns:repeat(2,1fr)!important;gap:11px}.big{min-height:118px;border-radius:23px;font-size:17px}.big .ico{font-size:36px}.action-fab{display:block}.cards{grid-template-columns:repeat(2,1fr)!important}.pro-head h2{font-size:22px}.bottomnav{grid-template-columns:repeat(5,1fr)!important;border-radius:22px 22px 0 0}.bottomnav button{background:transparent!important;color:var(--navy)!important}.side{display:block;position:fixed;right:0;top:0;bottom:0;height:auto;width:286px;z-index:20;transform:translateX(105%);transition:.2s;background:#fff}.menu-open .side{transform:translateX(0)}.shade{display:none}.menu-open .shade{display:block;position:fixed;inset:0;background:rgba(8,24,39,.38);z-index:19}.table{box-shadow:none}} .notice,.smart-strip,.user{display:none!important}/* phase4-clean */ /* ===== MAKHZANY V1.2 PRODUCTION MOBILE FIRST UI - FINAL NAVY OVERRIDE ===== */ :root{ --g:#2563EB;--g2:#0F172A;--navy:#0F172A;--navy2:#1E293B;--mint:#06B6D4; --soft:#F8FAFC;--bg:#F8FAFC;--card:#FFFFFF;--line:#E2E8F0;--txt:#0F172A;--mut:#64748B; --shadow:0 18px 45px rgba(15,23,42,.10);--shadow2:0 8px 24px rgba(15,23,42,.08) } html{background:#F8FAFC} body{font-family:"Cairo","Tajawal",system-ui,-apple-system,"Segoe UI",Tahoma,Arial!important;background:linear-gradient(180deg,#F8FAFC 0%,#EEF2F7 100%)!important;color:var(--txt)!important} button,input,select,textarea{font-family:inherit!important} button{touch-action:manipulation}.smallbtn,.btn{background:linear-gradient(135deg,#2563EB,#0F172A)!important;color:#fff!important;border:0!important;box-shadow:0 10px 22px rgba(37,99,235,.18)}.smallbtn.ok,.ok{background:#ECFDF5!important;color:#1D4ED8!important;border:1px solid #A7F3D0!important;box-shadow:none}.smallbtn.warn,.warn{background:#FFF7ED!important;color:#C2410C!important;border:1px solid #FED7AA!important;box-shadow:none}.danger{background:#FEF2F2!important;color:#991B1B!important;border:1px solid #FECACA!important;box-shadow:none!important} .login{background:radial-gradient(circle at 15% 15%,rgba(6,182,212,.22),transparent 28%),radial-gradient(circle at 85% 70%,rgba(37,99,235,.22),transparent 28%),linear-gradient(135deg,#020617 0%,#0F172A 58%,#1E3A8A 100%)!important}.login:before{background:linear-gradient(120deg,rgba(255,255,255,.06),transparent)!important}.login-badge{background:rgba(6,182,212,.14)!important;border-color:rgba(125,211,252,.35)!important;color:#E0F2FE}.login-hero h1{font-size:58px!important;letter-spacing:-1.5px}.login-hero h1:after{background:linear-gradient(90deg,#06B6D4,#2563EB)!important}.login-hero p{color:#CBD5E1!important}.hero-stat{background:rgba(255,255,255,.08)!important;border-color:rgba(226,232,240,.18)!important}.login-card{border-radius:34px!important;border:1px solid rgba(226,232,240,.70)!important;box-shadow:0 35px 90px rgba(2,6,23,.35)!important}.login-logo{background:linear-gradient(135deg,#2563EB,#06B6D4)!important;box-shadow:0 20px 44px rgba(37,99,235,.32)!important}.login-title{color:#0F172A!important}.login .field input{background:#F8FAFC!important;border-color:#CBD5E1!important}.login .field input:focus{border-color:#2563EB!important;box-shadow:0 0 0 4px rgba(37,99,235,.12)!important}.login .btn{background:linear-gradient(135deg,#2563EB,#0F172A)!important} .top{height:72px!important;background:rgba(255,255,255,.86)!important;backdrop-filter:blur(18px)!important;border-bottom:1px solid rgba(226,232,240,.85)!important;box-shadow:0 8px 30px rgba(15,23,42,.06)!important}.brand .mark,.mark{background:linear-gradient(135deg,#0F172A,#2563EB)!important;box-shadow:0 14px 30px rgba(15,23,42,.18)!important}.brand b{color:#0F172A!important}.brand small{color:#64748B!important}.menubtn{background:#EFF6FF!important;color:#1D4ED8!important;border:1px solid #DBEAFE!important}.top-refresh,.top-home,.install{background:#EFF6FF!important;color:#1D4ED8!important;border:1px solid #DBEAFE!important;box-shadow:none!important}.layout{grid-template-columns:288px 1fr}.side{background:linear-gradient(180deg,#FFFFFF,#F8FAFC)!important;border-left:1px solid #E2E8F0!important;box-shadow:-12px 0 32px rgba(15,23,42,.04)!important}.nav button{border-radius:18px!important;color:#334155!important;border:1px solid transparent!important}.nav button span{background:#EFF6FF!important}.nav button.active,.nav button:hover{background:linear-gradient(135deg,#EFF6FF,#F8FAFC)!important;border-color:#BFDBFE!important;color:#1D4ED8!important;box-shadow:0 10px 22px rgba(37,99,235,.09)!important}.main{max-width:1440px;margin-inline:auto}.pro-head,.clean-head{background:linear-gradient(135deg,#FFFFFF,#F8FAFC)!important;border:1px solid #E2E8F0!important;box-shadow:var(--shadow2)!important;border-radius:28px!important}.pro-head h2{color:#0F172A!important;font-weight:1000!important}.kpi-grid{gap:16px!important}.kpi-card,.card,.phase-card,.statusbox,.clean-panel,.big,.table{border:1px solid #E2E8F0!important;box-shadow:var(--shadow2)!important;background:#fff!important}.kpi-card{border-radius:30px!important;min-height:134px!important}.kpi-card:before{background:rgba(37,99,235,.08)!important}.kpi-ico{background:linear-gradient(135deg,#EFF6FF,#E0F2FE)!important;color:#1D4ED8!important}.kpi-val,.card .n,.phase-card b{color:#0F172A!important}.kpi-lbl,.card .l{color:#64748B!important}.quick-grid{grid-template-columns:repeat(5,minmax(128px,1fr));gap:14px!important}.quick-btn{border:1px solid #E2E8F0!important;background:linear-gradient(180deg,#FFFFFF,#F8FAFC)!important;color:#0F172A!important;border-radius:28px!important;min-height:118px!important;box-shadow:var(--shadow2)!important}.quick-btn span{filter:drop-shadow(0 8px 14px rgba(37,99,235,.12))}.quick-btn:hover,.big:hover{transform:translateY(-2px);box-shadow:0 20px 45px rgba(15,23,42,.12)!important}.clean-panel{border-radius:30px!important}.clean-panel h3{color:#0F172A!important}.table{border-radius:26px!important;overflow:hidden!important}.table th{background:#F1F5F9!important;color:#0F172A!important;font-weight:1000!important}.table td{border-color:#E2E8F0!important}.big{background:linear-gradient(180deg,#FFFFFF,#F8FAFC)!important;border-radius:30px!important;min-height:155px!important;color:#0F172A!important}.big .ico{font-size:48px!important}.pill,.badge{background:#EFF6FF!important;color:#1D4ED8!important}.tenant-bar{background:#EFF6FF!important;color:#1D4ED8!important;border-bottom:1px solid #BFDBFE!important}.toast{background:#0F172A!important}.toast.err{background:#991B1B!important}.toast.warn{background:#C2410C!important}.spinner{border-color:#DBEAFE!important;border-top-color:#2563EB!important}.action-fab{background:linear-gradient(135deg,#2563EB,#06B6D4)!important;border-radius:24px!important;box-shadow:0 18px 42px rgba(37,99,235,.32)!important}.action-sheet{border-radius:32px!important;border:1px solid #E2E8F0!important;box-shadow:0 30px 80px rgba(15,23,42,.25)!important}.action-sheet button{background:#F8FAFC!important;border:1px solid #E2E8F0!important;color:#0F172A!important}.notice,.smart-strip,.screen-guide,.muted-guide{display:none!important} @media(max-width:900px){ .login-wrap{padding:16px!important;gap:14px!important}.login-hero{padding:14px 6px!important}.login-hero h1{font-size:42px!important}.login-hero p{font-size:15px!important;line-height:1.8!important}.hero-stats{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}.hero-stat{padding:12px 8px!important;border-radius:18px!important}.login-card{padding:24px!important;border-radius:30px!important}.top{height:64px!important;padding-inline:10px!important}.main{padding:14px 12px calc(104px + env(safe-area-inset-bottom))!important}.kpi-grid,.cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important}.kpi-card{min-height:116px!important;border-radius:24px!important;padding:15px!important}.kpi-ico{width:42px!important;height:42px!important;border-radius:16px!important;margin-bottom:10px!important}.kpi-val{font-size:25px!important}.kpi-lbl{font-size:12px!important}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important}.quick-btn{min-height:106px!important;border-radius:24px!important}.grid-icons{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important}.big{min-height:126px!important;border-radius:24px!important;padding:16px 10px!important;font-size:17px!important}.big .ico{font-size:38px!important}.panel-grid{grid-template-columns:1fr!important}.phase-panel,.statusbar{grid-template-columns:repeat(2,minmax(0,1fr))!important}.toolbar{top:64px!important;background:rgba(248,250,252,.90)!important;border-radius:0 0 22px 22px}.bottomnav{display:grid!important;grid-template-columns:repeat(5,1fr)!important;background:rgba(255,255,255,.94)!important;backdrop-filter:blur(16px)!important;border-top:1px solid #E2E8F0!important;border-radius:24px 24px 0 0!important;padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;box-shadow:0 -14px 38px rgba(15,23,42,.10)!important}.bottomnav button{background:transparent!important;color:#64748B!important;border-radius:18px!important;min-height:58px!important;padding:7px 4px!important}.bottomnav button.active{background:linear-gradient(135deg,#EFF6FF,#E0F2FE)!important;color:#1D4ED8!important}.bottomnav span{font-size:21px!important}.bottomnav b{font-size:10.5px!important}.side{width:min(86vw,318px)!important;box-shadow:-18px 0 50px rgba(15,23,42,.22)!important}.table{background:transparent!important;border:0!important;box-shadow:none!important}.table tbody{gap:11px!important}.table tr{border:1px solid #E2E8F0!important;border-radius:22px!important;box-shadow:var(--shadow2)!important}.table td{border-bottom:1px dashed #E2E8F0!important}.table td::before{color:#64748B!important}.top-actions .top-refresh,.top-actions .top-home,.install{display:none!important}.action-fab{display:block!important;bottom:calc(92px + env(safe-area-inset-bottom))!important}.action-sheet{bottom:calc(92px + env(safe-area-inset-bottom))!important} } @media(max-width:520px){.login-wrap{padding:12px!important}.hero-stats{grid-template-columns:1fr 1fr 1fr!important}.login-hero p{display:none}.login-card{padding:22px!important}.kpi-grid,.cards{grid-template-columns:repeat(2,1fr)!important}.quick-grid,.grid-icons{grid-template-columns:repeat(2,1fr)!important}.top-actions .user{display:none!important}.smallbtn{min-height:42px!important;padding:9px 10px!important}.pro-head h2{font-size:21px!important}.table td{font-size:13px!important}.table td::before{min-width:86px!important}} @media(max-width:360px){.bottomnav b{display:none}.bottomnav button{min-height:52px!important}.hero-stats{display:none!important}.login-hero h1{font-size:36px!important}.kpi-val{font-size:22px!important}} @media print{body{background:#fff!important}.top,.side,.bottomnav,.action-fab,.action-sheet,.smallbtn,.btn{display:none!important}.main{max-width:none!important;padding:0!important}.table{box-shadow:none!important;border:1px solid #CBD5E1!important}.table th{background:#0F172A!important;color:#fff!important}.card,.kpi-card,.clean-panel{box-shadow:none!important}} /* MAKHZANY V1.3 OFFICIAL GREEN UI RESTORE + MOBILE MODULES */ :root{--brand:#0F5B3F!important;--brand2:#073B2A!important;--accent:#16A36D!important;--bg2:#F3F7F5!important;--txt:#17231D!important;--mut:#637268!important;--line:#DCE8E1!important;--shadow:0 16px 38px rgba(15,91,63,.10)!important;--shadow2:0 8px 22px rgba(15,91,63,.08)!important} body{font-family:"Cairo","IBM Plex Sans Arabic","Tajawal",Tahoma,Arial,sans-serif!important;background:linear-gradient(180deg,#F7FAF8 0%,#EEF5F1 100%)!important;color:var(--txt)!important}.top{height:70px!important;background:rgba(255,255,255,.92)!important;border-bottom:1px solid var(--line)!important;box-shadow:0 8px 30px rgba(15,91,63,.06)!important}.brand .mark,.mark,.login-logo,.logo{background:linear-gradient(135deg,var(--brand),var(--accent))!important;box-shadow:0 14px 30px rgba(15,91,63,.22)!important}.brand b{font-weight:1000!important;color:#12251B!important;font-size:20px!important}.brand small{color:var(--mut)!important}.smallbtn,.btn{background:linear-gradient(135deg,var(--brand),var(--brand2))!important;color:#fff!important;border:0!important;box-shadow:0 10px 22px rgba(15,91,63,.16)!important}.danger{background:#FEF2F2!important;color:#991B1B!important;border:1px solid #FECACA!important;box-shadow:none!important}.install,.top-refresh,.top-home,.menubtn{background:#ECFDF5!important;color:var(--brand)!important;border:1px solid #BBF7D0!important;box-shadow:none!important}.layout{grid-template-columns:286px 1fr!important}.side{background:linear-gradient(180deg,#FFFFFF,#F8FCFA)!important;border-left:1px solid var(--line)!important;box-shadow:-10px 0 28px rgba(15,91,63,.04)!important}.nav{gap:10px!important}.nav button{display:flex!important;align-items:center!important;gap:11px!important;padding:14px 13px!important;border-radius:18px!important;background:transparent!important;border:1px solid transparent!important;color:#263A2F!important;font-weight:900!important;text-align:right!important}.nav button span{width:34px!important;height:34px!important;display:grid!important;place-items:center!important;background:#EEF8F2!important;border-radius:12px!important;font-size:18px!important}.nav button b{font:inherit!important}.nav button.active,.nav button:hover{background:linear-gradient(135deg,#EAF7F0,#FFFFFF)!important;border-color:#BFE8D0!important;color:var(--brand)!important;box-shadow:0 10px 24px rgba(15,91,63,.10)!important}.main{max-width:1480px!important;margin-inline:auto!important;padding:22px!important}.pro-head,.clean-head{border-radius:28px!important;background:linear-gradient(135deg,#FFFFFF,#F8FCFA)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow2)!important;padding:16px 18px!important}.pro-head h2{color:#12251B!important;font-size:27px!important;font-weight:1000!important}.kpi-grid{display:grid!important;grid-template-columns:repeat(4,minmax(160px,1fr))!important;gap:16px!important}.kpi-card,.card,.clean-panel,.big,.quick-btn,.phase-card,.statusbox{background:#fff!important;border:1px solid var(--line)!important;box-shadow:var(--shadow2)!important}.kpi-card{border-radius:28px!important;min-height:132px!important;padding:18px!important;position:relative!important;overflow:hidden!important}.kpi-card:after{content:"";position:absolute;inset:auto -30px -45px auto;width:110px;height:110px;border-radius:999px;background:rgba(22,163,109,.08)}.kpi-ico{width:48px!important;height:48px!important;border-radius:17px!important;background:linear-gradient(135deg,#ECFDF5,#D1FAE5)!important;color:var(--brand)!important;font-size:25px!important;display:grid!important;place-items:center!important}.kpi-val,.card .n,.phase-card b{color:#12251B!important}.kpi-lbl,.card .l{color:var(--mut)!important}.quick-grid,.grid-icons{display:grid!important;grid-template-columns:repeat(5,minmax(130px,1fr))!important;gap:14px!important;margin-top:16px!important}.quick-btn,.big{border-radius:30px!important;min-height:145px!important;color:#12251B!important;font-size:20px!important;font-weight:1000!important;transition:.15s ease!important}.quick-btn span,.big .ico{font-size:44px!important;margin-bottom:8px!important}.quick-btn:hover,.big:hover{transform:translateY(-2px)!important;box-shadow:0 20px 45px rgba(15,91,63,.14)!important}.clean-panel{border-radius:30px!important;padding:16px!important}.clean-panel h3{margin-top:0!important;color:#12251B!important;font-weight:1000!important}.table{border:1px solid var(--line)!important;border-radius:24px!important;box-shadow:var(--shadow2)!important;overflow:hidden!important}.table th{background:#EAF7F0!important;color:#12251B!important;font-weight:1000!important}.table td{border-color:var(--line)!important}.pill,.badge{background:#EAF7F0!important;color:var(--brand)!important}.toast{background:var(--brand2)!important}.toast.err{background:#991B1B!important}.action-fab{background:linear-gradient(135deg,var(--brand),var(--accent))!important;box-shadow:0 18px 42px rgba(15,91,63,.30)!important}.notice,.smart-strip,.screen-guide,.muted-guide{display:none!important}.login{background:radial-gradient(circle at 15% 15%,rgba(22,163,109,.22),transparent 28%),radial-gradient(circle at 82% 70%,rgba(15,91,63,.25),transparent 30%),linear-gradient(135deg,#06281D 0%,#0F5B3F 60%,#16A36D 100%)!important}.login .btn{background:linear-gradient(135deg,var(--brand),var(--accent))!important}.login-badge{background:rgba(236,253,245,.14)!important;border-color:rgba(187,247,208,.35)!important;color:#ECFDF5!important}.login-hero h1:after{background:linear-gradient(90deg,#A7F3D0,#16A36D)!important} @media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.quick-grid,.grid-icons{grid-template-columns:repeat(3,minmax(0,1fr))!important}} @media(max-width:800px){.top{height:64px!important;padding-inline:10px!important}.layout{display:block!important}.main{padding:14px 12px calc(104px + env(safe-area-inset-bottom))!important}.kpi-grid,.cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important}.kpi-card{min-height:118px!important;border-radius:24px!important;padding:15px!important}.kpi-ico{width:42px!important;height:42px!important;border-radius:15px!important;font-size:22px!important}.kpi-val{font-size:25px!important}.kpi-lbl{font-size:12px!important}.quick-grid,.grid-icons{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important}.quick-btn,.big{min-height:122px!important;border-radius:24px!important;font-size:17px!important}.quick-btn span,.big .ico{font-size:36px!important}.side{display:block!important;position:fixed!important;top:0!important;bottom:0!important;right:0!important;width:min(86vw,320px)!important;height:auto!important;z-index:30!important;transform:translateX(105%)!important;transition:.22s transform ease!important;box-shadow:-18px 0 50px rgba(15,91,63,.22)!important;padding-top:calc(76px + env(safe-area-inset-top))!important}.menu-open .side{transform:translateX(0)!important}.menu-open .shade{display:block!important;position:fixed!important;inset:0!important;background:#0006!important;z-index:25!important}.bottomnav{display:grid!important;grid-template-columns:repeat(5,1fr)!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(16px)!important;border-top:1px solid var(--line)!important;border-radius:24px 24px 0 0!important;padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;box-shadow:0 -14px 38px rgba(15,91,63,.10)!important}.bottomnav button{background:transparent!important;color:#667A70!important;border:0!important;border-radius:18px!important;min-height:58px!important;padding:7px 4px!important;display:grid!important;place-items:center!important;gap:2px!important}.bottomnav button.active{background:linear-gradient(135deg,#EAF7F0,#ECFDF5)!important;color:var(--brand)!important}.bottomnav span{font-size:21px!important;line-height:1!important}.bottomnav b{font-size:10.5px!important;white-space:nowrap!important}.table{background:transparent!important;border:0!important;box-shadow:none!important}.table tbody{display:grid!important;gap:11px!important}.table tr{display:block!important;background:#fff!important;border:1px solid var(--line)!important;border-radius:22px!important;box-shadow:var(--shadow2)!important;padding:8px!important}.table td{display:flex!important;justify-content:space-between!important;gap:10px!important;border-bottom:1px dashed var(--line)!important}.table td:last-child{border-bottom:0!important}.toolbar{top:64px!important;background:rgba(247,250,248,.92)!important;border-radius:0 0 22px 22px!important}.top-actions .top-refresh,.top-actions .top-home,.install{display:none!important}.top-actions .user{display:none!important}} @media(max-width:420px){.brand b{font-size:18px!important}.kpi-grid,.quick-grid,.grid-icons{grid-template-columns:repeat(2,minmax(0,1fr))!important}.pro-head h2{font-size:21px!important}.smallbtn{min-height:42px!important;padding:9px 10px!important}.bottomnav b{font-size:10px!important}} /* OFFICIAL UI HOTFIX V1.4 - Professional Arabic mobile-first */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap'); :root{--brand:#14523E!important;--brand2:#0B2F24!important;--brand3:#1E7B58!important;--bg:#F4F7F5!important;--surface:#FFFFFF!important;--line:#E1E8E4!important;--txt:#14251D!important;--muted:#667A70!important;--shadow:0 18px 45px rgba(20,82,62,.10)!important;--shadow2:0 8px 22px rgba(20,82,62,.07)!important;--g:var(--brand)!important;--g2:var(--brand2)!important;--mut:var(--muted)!important} *{font-family:'Cairo',Tahoma,Arial,sans-serif!important;letter-spacing:0!important}body{background:radial-gradient(circle at top right,#EAF5EF 0,#F7FAF8 35%,#F4F7F5 100%)!important;color:var(--txt)!important}.login{background:linear-gradient(135deg,#0B2F24,#14523E 55%,#1E7B58)!important}.login-wrap{width:min(1120px,100%);display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch}.login-hero,.login-card{background:rgba(255,255,255,.96)!important;border:1px solid rgba(255,255,255,.35)!important;border-radius:34px!important;box-shadow:0 24px 70px rgba(0,0,0,.18)!important;padding:34px!important}.login-hero h1{font-size:52px!important;margin:8px 0 8px!important;color:var(--brand2)!important;font-weight:900!important}.login-hero p{font-size:18px!important;color:#40584D!important;line-height:2!important}.login-badge,.secure-note,.notice,p.muted,.login-sub{display:none!important}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.hero-stat{background:#F2F7F4;border:1px solid var(--line);border-radius:20px;padding:16px;text-align:center}.hero-stat b{display:block;font-size:20px;color:var(--brand)}.hero-stat span{color:var(--muted);font-weight:700}.login-logo,.mark{background:linear-gradient(135deg,var(--brand),var(--brand3))!important;box-shadow:0 12px 24px rgba(20,82,62,.18)!important}.login-title{font-size:30px!important;color:var(--brand2)!important}.field span{color:var(--txt)!important}.field input,.field select,.search{border:1px solid var(--line)!important;background:#FBFDFB!important;border-radius:16px!important;box-shadow:inset 0 1px 0 #fff!important}.btn,.smallbtn{background:linear-gradient(135deg,var(--brand),var(--brand2))!important;color:#fff!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 10px 20px rgba(20,82,62,.13)!important}.smallbtn.danger,.danger{background:#FFF1F1!important;color:#A11A1A!important;border:1px solid #FFD2D2!important;box-shadow:none!important}.smallbtn.ok,.ok{background:#EAF7F0!important;color:var(--brand)!important;border:1px solid #CFE7DA!important;box-shadow:none!important}.top{height:70px!important;background:rgba(255,255,255,.94)!important;backdrop-filter:blur(16px)!important;box-shadow:0 10px 30px rgba(20,82,62,.06)!important}.brand b{font-size:22px!important;color:var(--brand2)!important}.brand small{color:var(--muted)!important}.side{background:rgba(255,255,255,.94)!important;box-shadow:-8px 0 28px rgba(20,82,62,.05)!important}.nav button{font-size:16px!important;border:1px solid transparent!important;color:#25392F!important}.nav button span{background:#F1F7F4!important;color:var(--brand)!important}.nav button.active,.nav button:hover{background:linear-gradient(135deg,#EAF7F0,#F4FBF7)!important;border-color:#CFE7DA!important;color:var(--brand)!important;box-shadow:0 8px 18px rgba(20,82,62,.08)!important}.main{padding:24px!important}.toolbar,.pro-head{background:transparent!important;border:0!important;box-shadow:none!important}.pro-head h2,.toolbar h2{font-size:28px!important;color:var(--brand2)!important;font-weight:900!important}.kpi-card,.card,.clean-panel,.phase-card,.big,.quick-btn{background:rgba(255,255,255,.97)!important;border:1px solid var(--line)!important;border-radius:28px!important;box-shadow:var(--shadow2)!important}.kpi-card{padding:18px!important;min-height:132px!important}.kpi-ico{background:#EAF7F0!important;color:var(--brand)!important}.kpi-val,.card .n,.phase-card b{color:var(--brand)!important}.kpi-lbl,.card .l,.mini{color:var(--muted)!important}.quick-btn,.big{color:var(--brand2)!important;font-weight:900!important}.quick-btn span,.big .ico{filter:saturate(.95)}.table{border-radius:24px!important;box-shadow:var(--shadow2)!important}.table th{background:#EAF3EE!important;color:var(--brand2)!important;font-weight:900!important}.pill{background:#EAF7F0!important;color:var(--brand)!important}.action-fab{background:linear-gradient(135deg,var(--brand),var(--brand2))!important;box-shadow:0 16px 32px rgba(20,82,62,.25)!important}.action-sheet{border:1px solid var(--line)!important;box-shadow:var(--shadow)!important}.empty-state{background:#fff!important;border:1px dashed #CFE7DA!important;color:var(--muted)!important}.loading-card{background:#fff!important;border:1px solid var(--line)!important;border-radius:28px!important;box-shadow:var(--shadow2)!important}.toast{font-family:'Cairo',Tahoma,Arial,sans-serif!important;border-radius:18px!important}.toast.err{background:#FFF1F1!important;color:#A11A1A!important;border:1px solid #FFD2D2!important}.toast.ok{background:#EAF7F0!important;color:var(--brand)!important;border:1px solid #CFE7DA!important} @media(max-width:900px){.login-wrap{grid-template-columns:1fr}.login-hero{display:none}.login-card{padding:28px;border-radius:30px}.top{height:64px!important}.main{padding:14px 12px calc(104px + env(safe-area-inset-bottom))!important}.pro-head h2,.toolbar h2{font-size:22px!important}.kpi-grid,.cards,.quick-grid,.grid-icons{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.bottomnav{display:grid!important;grid-template-columns:repeat(5,1fr)!important;background:rgba(255,255,255,.97)!important;backdrop-filter:blur(18px)!important;border-top:1px solid var(--line)!important;border-radius:24px 24px 0 0!important;box-shadow:0 -14px 34px rgba(20,82,62,.10)!important}.bottomnav button{background:transparent!important;color:#6A7A72!important}.bottomnav button.active{background:#EAF7F0!important;color:var(--brand)!important}.top-actions .top-refresh,.top-actions .top-home,.install,.top-actions .user{display:none!important}.side{top:0!important}.table tr{border-radius:22px!important}.modal .box{border-radius:28px 28px 0 0!important}} @media(max-width:420px){.kpi-grid,.cards,.quick-grid,.grid-icons{grid-template-columns:repeat(2,minmax(0,1fr))!important}.kpi-card{min-height:118px!important;padding:14px!important}.quick-btn,.big{min-height:118px!important;font-size:16px!important}.brand b{font-size:19px!important}.bottomnav b{font-size:10px!important}} /* MAKHZANY CLEAN BASE IDENTITY */ :root{--g:#1D4ED8;--g2:#2563EB;--bg:#F8FAFC;--card:#FFFFFF;--line:#E2E8F0;--txt:#0F172A;--mut:#64748B;--blue:#2563EB} html,body,*:not(svg):not(path){font-family:"Cairo",Tahoma,Arial,sans-serif} .card,.phase-card,.statusbox,.big,.box{background:#FFFFFF;border-color:#E2E8F0} .card{border-top:5px solid #1D4ED8} .table th{background:#1D4ED8;color:#FFFFFF} .nav button.active{background:#1D4ED8;color:#FFFFFF} .nav button:hover:not(.active){background:#DBEAFE;color:#1D4ED8} .nav button.active span{background:rgba(255,255,255,.18);color:#FFFFFF} .btn,.smallbtn:not(.danger):not(.ok):not(.warn){background:#1D4ED8;color:#FFFFFF;border:1px solid #1D4ED8} /* ===================================================== LIGHT ROYAL BLUE ENTERPRISE DESIGN SYSTEM v2026 FINAL AUTHORITATIVE IDENTITY LAYER - CLEAN BASE ===================================================== */ :root{ --primary:#163A70!important; --primary-dark:#0F2C5C!important; --primary-hover:#1D4ED8!important; --primary-light:#DBEAFE!important; --success:#10B981!important; --success-light:#D1FAE5!important; --warning:#F59E0B!important; --warning-light:#FEF3C7!important; --danger:#EF4444!important; --danger-light:#FEE2E2!important; --info:#3B82F6!important; --info-light:#DBEAFE!important; --bg-page:#F8FAFC!important; --bg-main:#F4F7FB!important; --bg-card:#FFFFFF!important; --bg-sidebar:#FFFFFF!important; --bg-header:#FFFFFF!important; --text-main:#0F172A!important; --text-secondary:#64748B!important; --text-light:#94A3B8!important; --text-white:#FFFFFF!important; --border:#D9E1EC!important; --border-light:#E5EAF2!important; --shadow-sm:0 4px 10px rgba(15,44,92,.05)!important; --shadow-md:0 10px 26px rgba(15,44,92,.07)!important; --shadow-lg:0 20px 50px rgba(15,44,92,.12)!important; --radius-sm:10px!important; --radius-md:16px!important; --radius-lg:22px!important; --radius-xl:30px!important; --sidebar-width:250px!important; /* compatibility with old variable names */ --g:#163A70!important; --g2:#2563EB!important; --blue:#2563EB!important; --brand:#163A70!important; --brand2:#0F2C5C!important; --navy:#0F2C5C!important; --bg:#F8FAFC!important; --card:#FFFFFF!important; --line:#D9E1EC!important; --txt:#0F172A!important; --mut:#64748B!important; --muted:#64748B!important; --red:#EF4444!important; --orange:#F59E0B!important; --shadow:0 10px 26px rgba(15,44,92,.07)!important; --shadow2:0 10px 26px rgba(15,44,92,.07)!important; } *{box-sizing:border-box!important} html,body{background:var(--bg-page)!important;color:var(--text-main)!important;font-family:'Cairo',Tahoma,Arial,sans-serif!important;overflow-x:hidden!important} body,button,input,select,textarea,table{font-family:'Cairo',Tahoma,Arial,sans-serif!important} button{cursor:pointer!important;transition:.25s ease!important} /* Header / top bar */ .top,.header,.toolbar,.pro-head,.clean-head{ background:var(--bg-header)!important; border-color:var(--border)!important; box-shadow:var(--shadow-sm)!important; } .top{height:70px!important;padding:0 25px!important} .brand h1,.header-title,.pro-head h2,.clean-head h2,.title{color:var(--primary)!important;font-weight:900!important;letter-spacing:-.3px!important} .brand .mark,.logo{ background:linear-gradient(135deg,var(--primary),var(--primary-hover))!important; color:var(--text-white)!important; box-shadow:0 16px 34px rgba(22,58,112,.20)!important; } /* Sidebar */ .side,.sidebar{ width:var(--sidebar-width)!important; background:var(--bg-sidebar)!important; border-left:1px solid var(--border)!important; box-shadow:var(--shadow-sm)!important; } .nav{gap:8px!important} .nav button,.sidebar-item{ min-height:48px!important; border-radius:14px!important; display:flex!important; align-items:center!important; gap:12px!important; padding:0 15px!important; background:transparent!important; border:1px solid transparent!important; color:var(--primary)!important; font-weight:800!important; text-align:right!important; } .nav button span,.sidebar-item i{ color:var(--primary)!important; background:var(--primary-light)!important; border-radius:10px!important; } .nav button:hover:not(.active),.sidebar-item:hover:not(.active){ background:var(--primary-light)!important; border-color:#BFDBFE!important; color:var(--primary)!important; } .nav button.active,.sidebar-item.active{ background:var(--primary)!important; color:var(--text-white)!important; border-color:var(--primary)!important; box-shadow:0 14px 30px rgba(22,58,112,.20)!important; } .nav button.active span,.sidebar-item.active i{ background:rgba(255,255,255,.18)!important; color:var(--text-white)!important; } /* Main content */ .main,.content{background:var(--bg-page)!important;padding:25px!important} .layout,.app{background:var(--bg-page)!important} /* Cards */ .cards{gap:20px!important} .card,.kpi-card,.pro-card,.phase-card,.statusbox,.clean-panel,.big,.box,.table-box,.quick-btn{ background:var(--bg-card)!important; border:1px solid var(--border-light)!important; border-radius:20px!important; box-shadow:var(--shadow-md)!important; color:var(--text-main)!important; } .card,.kpi-card,.pro-card{position:relative!important;overflow:hidden!important;border-top:0!important;padding:22px!important} .card:before,.kpi-card:before,.pro-card:before{ content:""!important;position:absolute!important;top:0!important;right:0!important;left:0!important;height:5px!important;background:var(--primary)!important;opacity:1!important; } .card .n,.kpi-val,.card-value,.phase-card b{font-size:36px!important;font-weight:900!important;color:var(--primary)!important;margin-top:8px!important} .card .l,.kpi-lbl,.card-title,.mini,.muted,.sub{color:var(--text-secondary)!important;font-weight:700!important} .quick-btn,.big{color:var(--primary)!important;font-weight:900!important} .quick-btn:hover,.big:hover,.phase-card:hover{background:var(--primary-light)!important;border-color:#BFDBFE!important;color:var(--primary)!important;transform:translateY(-1px)!important} /* Buttons */ .btn,.smallbtn,.btn-primary,.primary{ min-height:42px!important;border:0!important;border-radius:12px!important;padding:0 20px!important;background:var(--primary)!important;color:var(--text-white)!important;font-weight:800!important;box-shadow:none!important; } .btn:hover,.smallbtn:hover,.btn-primary:hover,.primary:hover{background:var(--primary-dark)!important;color:var(--text-white)!important} .btn-secondary,.secondary,.ghost,.outline{background:#fff!important;border:1px solid var(--border)!important;color:var(--primary)!important} .btn-secondary:hover,.secondary:hover,.ghost:hover,.outline:hover{background:var(--primary-light)!important;color:var(--primary)!important} .ok,.btn-success{background:var(--success)!important;color:#fff!important}.ok:hover,.btn-success:hover{background:#059669!important;color:#fff!important} .warn,.btn-warning{background:var(--warning)!important;color:#fff!important}.warn:hover,.btn-warning:hover{background:#D97706!important;color:#fff!important} .danger,.btn-danger{background:var(--danger)!important;color:#fff!important}.danger:hover,.btn-danger:hover{background:#DC2626!important;color:#fff!important} /* Tables */ .table-box,.table{background:#fff!important;border:1px solid var(--border)!important;border-radius:20px!important;overflow:hidden!important;box-shadow:var(--shadow-md)!important} table,.table{width:100%!important;border-collapse:collapse!important} thead,.table thead{background:var(--primary)!important} thead th,.table th{background:var(--primary)!important;color:#fff!important;padding:15px!important;font-weight:900!important;border-bottom:0!important;text-align:right!important} tbody td,.table td{padding:14px!important;border-bottom:1px solid var(--border-light)!important;background:#fff!important;color:var(--text-main)!important;text-align:right!important} tbody tr:nth-child(even) td,.table tbody tr:nth-child(even) td{background:#F8FAFD!important} tbody tr:hover td,.table tbody tr:hover td{background:var(--primary-light)!important} /* Inputs */ .input,input,select,textarea{ min-height:42px!important;border:1px solid var(--border)!important;border-radius:12px!important;padding:0 15px!important;background:#fff!important;color:var(--text-main)!important;box-shadow:none!important; } textarea{padding:12px 15px!important} .input:focus,input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--primary)!important;box-shadow:0 0 0 4px rgba(22,58,112,.10)!important} /* Modals */ .modal{background:rgba(15,23,42,.42)!important;backdrop-filter:blur(4px)!important;z-index:50!important} .modal .box,.modal-card{background:#fff!important;border-radius:24px!important;box-shadow:var(--shadow-lg)!important;border:1px solid var(--border-light)!important;padding:25px!important} /* Badges / pills */ .badge,.pill{padding:6px 12px!important;border-radius:999px!important;font-size:12px!important;font-weight:800!important;background:var(--info-light)!important;color:var(--primary)!important} .badge-success,.pill.ok{background:var(--success-light)!important;color:#047857!important} .badge-warning,.pill.warn{background:var(--warning-light)!important;color:#B45309!important} .badge-danger,.pill.danger{background:var(--danger-light)!important;color:#B91C1C!important} /* Bottom mobile nav */ .bottomnav{background:#fff!important;border-top:1px solid var(--border)!important;box-shadow:0 -10px 26px rgba(15,44,92,.07)!important} .bottomnav button{color:var(--primary)!important;border-radius:16px!important} .bottomnav button.active{background:var(--primary)!important;color:#fff!important} /* Toasts */ .toast{background:var(--primary-dark)!important;color:#fff!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:var(--shadow-lg)!important;border-radius:16px!important} /* Mobile */ @media(max-width:800px){ .top{height:64px!important;padding:0 14px!important} .side,.sidebar{width:100%!important;height:auto!important;position:relative!important;top:0!important;display:flex!important;overflow:auto!important;border-left:0!important;border-bottom:1px solid var(--border)!important} .main,.content{margin-right:0!important;padding:14px 12px calc(92px + env(safe-area-inset-bottom))!important} .cards,.quick-grid,.grid-icons{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} .card,.kpi-card,.pro-card{padding:16px!important;border-radius:18px!important} .card .n,.kpi-val,.card-value{font-size:24px!important} .table{display:block!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important} .table thead{display:none!important} .table tbody{display:grid!important;gap:11px!important} .table tr{display:block!important;background:#fff!important;border:1px solid var(--border)!important;border-radius:22px!important;box-shadow:var(--shadow-md)!important;padding:8px!important} .table td{display:flex!important;justify-content:space-between!important;gap:10px!important;border-bottom:1px dashed var(--border-light)!important;background:#fff!important;font-size:13px!important} .table td:last-child{border-bottom:0!important} .table td::before{content:attr(data-label)!important;color:var(--text-secondary)!important;font-weight:900!important;min-width:86px!important} .modal{align-items:end!important;padding:0!important} .modal .box{width:100%!important;max-width:100%!important;border-radius:28px 28px 0 0!important;max-height:86vh!important;overflow:auto!important} } @media(max-width:480px){.cards,.quick-grid,.grid-icons{grid-template-columns:1fr 1fr!important}.card .n{font-size:22px!important}.brand h1{font-size:20px!important}} @media(max-width:360px){.cards,.quick-grid,.grid-icons{grid-template-columns:1fr!important}} .pipeline{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.pipeline>div{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:12px}.mobile-actions .big{min-height:120px}@media(max-width:900px){.pipeline{grid-template-columns:1fr}} /* ===== V2.0 GROUPED NAV + LOGIN IDENTITY ===== */ .module-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 18px;background:#fff;border:1px solid var(--border,#E2E8F0);border-radius:22px;padding:8px;box-shadow:0 10px 24px rgba(15,44,92,.05)} .module-tabs button{border:1px solid transparent;background:#F8FAFC;color:#0F2C5C;border-radius:16px;padding:10px 14px;font-weight:900;display:flex;align-items:center;gap:7px} .module-tabs button.active,.module-tabs button:hover{background:#1D4ED8;color:#fff;box-shadow:0 10px 20px rgba(29,78,216,.16)} .module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:14px 0} .module-card{background:#fff;border:1px solid var(--border,#E2E8F0);border-radius:24px;padding:16px;min-height:118px;display:flex;align-items:center;gap:12px;box-shadow:0 12px 28px rgba(15,44,92,.06);cursor:pointer;transition:.15s ease} .module-card:hover{transform:translateY(-2px);border-color:#BFDBFE;box-shadow:0 18px 34px rgba(29,78,216,.12)} .module-card .mi{width:48px;height:48px;border-radius:18px;background:#DBEAFE;color:#1D4ED8;display:grid;place-items:center;font-size:25px;flex:0 0 auto} .module-card b{display:block;color:#0F2C5C;font-size:16px}.module-card small{display:block;color:#64748B;font-weight:800;margin-top:3px}.side .nav:before{content:'القوائم الرئيسية';display:block;color:#64748B;font-size:12px;font-weight:900;margin:4px 8px 8px}.nav button{justify-content:flex-start}.nav button b{font-size:15px}.nav button.active{background:#1D4ED8!important;color:#fff!important;box-shadow:0 12px 24px rgba(29,78,216,.18)!important}.nav button.active span{background:rgba(255,255,255,.18)!important;color:#fff!important} @media(max-width:800px){.module-tabs{overflow:auto;flex-wrap:nowrap}.module-tabs button{white-space:nowrap}.module-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.module-card{border-radius:20px;padding:13px;min-height:105px;display:block;text-align:center}.module-card .mi{margin:0 auto 8px}.module-card small{display:none}} /* ===== MOBILE EXPERIENCE PATCH v2.1 - Clear Phone UX ===== */ @media (max-width: 800px){ html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;-webkit-text-size-adjust:100%!important;touch-action:manipulation!important} body{background:#F8FAFC!important} .top{position:sticky!important;top:0!important;height:60px!important;padding:0 10px!important;z-index:40!important;box-shadow:0 8px 22px rgba(15,44,92,.07)!important} .brand{gap:8px!important;min-width:0!important}.brand .mark{width:38px!important;height:38px!important;border-radius:14px!important}.brand b{font-size:16px!important;line-height:1.1!important}.brand small{font-size:10px!important;white-space:nowrap!important}.menubtn{display:grid!important;place-items:center!important;min-width:42px!important;min-height:42px!important;background:#DBEAFE!important;color:#163A70!important}.top-actions{gap:6px!important}.top-actions .user{display:none!important}.top-actions .smallbtn:not(.danger):not(.install){display:none!important}.top-actions .danger{min-height:38px!important;padding:0 12px!important;border-radius:14px!important;font-size:12px!important} .layout{display:block!important;min-height:auto!important}.main{width:100%!important;max-width:100%!important;margin:0!important;padding:12px 10px calc(98px + env(safe-area-inset-bottom))!important;overflow:visible!important}.main h2{font-size:20px!important;line-height:1.3!important;margin:0!important}.pro-head,.toolbar.clean-head{border-radius:22px!important;padding:14px!important;display:flex!important;align-items:flex-start!important;gap:10px!important}.pro-head>div:last-child{display:flex!important;gap:6px!important;flex-wrap:wrap!important}.pro-head .smallbtn{min-height:40px!important;padding:8px 12px!important;border-radius:14px!important;font-size:12px!important} .side,.sidebar{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:min(82vw,300px)!important;height:100dvh!important;z-index:60!important;display:block!important;transform:translateX(105%)!important;transition:transform .22s ease!important;padding:72px 12px 16px!important;background:#fff!important;border-left:1px solid #E2E8F0!important;border-bottom:0!important;box-shadow:-18px 0 45px rgba(15,44,92,.16)!important;overflow:auto!important}.menu-open .side,.menu-open .sidebar{transform:translateX(0)!important}.shade{display:none!important}.menu-open .shade{display:block!important;position:fixed!important;inset:0!important;background:rgba(15,23,42,.38)!important;z-index:55!important;backdrop-filter:blur(2px)!important}.nav{gap:9px!important}.side .nav:before{font-size:13px!important;margin-bottom:10px!important}.nav button{min-height:48px!important;border-radius:16px!important;padding:11px 12px!important;font-size:14px!important}.nav button span{width:34px!important;height:34px!important;border-radius:12px!important;font-size:17px!important}.nav button b{font-size:14px!important;white-space:normal!important} .kpi-grid,.cards,.quick-grid,.grid-icons,.report-cards,.module-grid,.phase-panel,.statusbar,.panel-grid,.row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.card,.kpi-card,.pro-card,.statusbox,.module-card,.quick-btn,.big{border-radius:20px!important;box-shadow:0 10px 24px rgba(15,44,92,.06)!important}.card,.kpi-card,.pro-card,.statusbox{padding:13px!important;min-height:96px!important}.kpi-val,.card .n,.statusbox b{font-size:22px!important;line-height:1.1!important}.kpi-lbl,.card .l{font-size:12px!important;line-height:1.35!important}.quick-btn,.big{min-height:92px!important;padding:14px 8px!important;font-size:14px!important}.quick-btn span,.big .ico{font-size:27px!important;margin-bottom:5px!important}.module-tabs{overflow-x:auto!important;flex-wrap:nowrap!important;scroll-snap-type:x mandatory!important;border-radius:18px!important;padding:7px!important;margin:10px 0 12px!important}.module-tabs button{white-space:nowrap!important;min-height:42px!important;scroll-snap-align:start!important}.module-card{min-height:98px!important;padding:12px 9px!important;text-align:center!important;display:grid!important;place-items:center!important}.module-card .mi{width:44px!important;height:44px!important;margin:0 auto 7px!important}.module-card b{font-size:13px!important;line-height:1.3!important}.module-card small{display:none!important} .table{display:block!important;width:100%!important;margin-top:12px!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}.table thead{display:none!important}.table tbody{display:grid!important;gap:10px!important}.table tr{display:block!important;background:#fff!important;border:1px solid #E2E8F0!important;border-radius:20px!important;padding:8px 10px!important;box-shadow:0 10px 24px rgba(15,44,92,.06)!important}.table td{display:grid!important;grid-template-columns:minmax(84px,38%) 1fr!important;align-items:center!important;gap:8px!important;padding:9px 2px!important;border:0!important;border-bottom:1px dashed #E5EAF2!important;background:transparent!important;text-align:right!important;font-size:13px!important;word-break:break-word!important}.table td:last-child{border-bottom:0!important}.table td::before{content:attr(data-label)!important;color:#64748B!important;font-weight:900!important;font-size:12px!important}.table td:not([data-label])::before{content:'إجراء'!important}.table-actions,.table td:last-child{gap:6px!important;flex-wrap:wrap!important}.table td .smallbtn,.table td button{min-height:38px!important;border-radius:13px!important;padding:7px 10px!important;font-size:12px!important} input,select,textarea,.search{width:100%!important;max-width:100%!important;min-height:44px!important;border-radius:14px!important;font-size:16px!important}.opline{grid-template-columns:1fr!important;gap:7px!important}.toolbar{align-items:stretch!important}.toolbar .search{flex:1 1 100%!important}.smallbtn,.btn,button{min-height:42px!important}.btn{width:100%!important;border-radius:16px!important}.modal{align-items:end!important;padding:0!important;z-index:90!important}.modal .box,.modal-card{width:100%!important;max-width:100%!important;max-height:88dvh!important;overflow:auto!important;border-radius:28px 28px 0 0!important;padding:18px!important}.modal .box h2{font-size:19px!important;margin-bottom:12px!important} .bottomnav{position:fixed!important;right:0!important;left:0!important;bottom:0!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:3px!important;z-index:45!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(16px)!important;border-top:1px solid #E2E8F0!important;border-radius:22px 22px 0 0!important;padding:7px 7px calc(7px + env(safe-area-inset-bottom))!important;box-shadow:0 -14px 36px rgba(15,44,92,.12)!important}.bottomnav button{min-height:54px!important;border-radius:16px!important;padding:5px 2px!important;background:transparent!important;color:#64748B!important;border:0!important}.bottomnav button span{font-size:20px!important;line-height:1!important}.bottomnav button b{font-size:10px!important;line-height:1.15!important;white-space:nowrap!important}.bottomnav button.active{background:#163A70!important;color:#fff!important}.action-fab{right:14px!important;bottom:calc(78px + env(safe-area-inset-bottom))!important;width:56px!important;height:56px!important;border-radius:20px!important;z-index:44!important}.action-sheet{left:10px!important;right:10px!important;bottom:calc(88px + env(safe-area-inset-bottom))!important;border-radius:24px!important;grid-template-columns:repeat(3,1fr)!important;padding:12px!important}.action-sheet button{min-height:78px!important;border-radius:18px!important} } @media (max-width:430px){.main{padding-left:8px!important;padding-right:8px!important}.kpi-grid,.cards,.quick-grid,.grid-icons,.report-cards,.module-grid,.phase-panel,.statusbar,.panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.card,.kpi-card,.pro-card,.statusbox{padding:11px!important}.kpi-val,.card .n{font-size:20px!important}.quick-btn,.big{min-height:86px!important;font-size:13px!important}.bottomnav button b{font-size:9px!important}.table tr{border-radius:18px!important}.table td{grid-template-columns:minmax(78px,40%) 1fr!important;font-size:12px!important}} @media (max-width:360px){.brand small{display:none!important}.kpi-grid,.cards,.quick-grid,.grid-icons,.report-cards,.module-grid,.phase-panel,.statusbar,.panel-grid{grid-template-columns:1fr!important}.bottomnav button b{display:none!important}.bottomnav button{min-height:48px!important}.action-sheet{grid-template-columns:repeat(2,1fr)!important}} /* ===== ENTERPRISE SCREEN POLISH PATCH v2.2 ===== */ .pro-hero{background:linear-gradient(135deg,#163A70,#1D4ED8);color:#fff;border-radius:28px;padding:22px;margin:0 0 16px;box-shadow:0 18px 38px rgba(22,58,112,.18);display:flex;align-items:center;justify-content:space-between;gap:16px;overflow:hidden;position:relative} .pro-hero:after{content:"";position:absolute;inset:auto -40px -80px auto;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.10)} .pro-hero h2{margin:0 0 4px!important;color:#fff!important;font-size:26px!important}.pro-hero p{margin:0;color:#DBEAFE;font-weight:800}.pro-hero .hero-icon{width:74px;height:74px;border-radius:26px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:38px;flex:0 0 auto;z-index:1}.pro-hero>*{z-index:1} .pro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:14px 0}.pro-tile{background:#fff;border:1px solid var(--border,#E2E8F0);border-radius:24px;padding:18px;box-shadow:0 12px 28px rgba(15,44,92,.06);position:relative;overflow:hidden}.pro-tile:before{content:"";position:absolute;top:0;right:0;left:0;height:5px;background:#1D4ED8}.pro-tile b{display:block;color:#0F2C5C;font-size:18px;margin-bottom:4px}.pro-tile span{color:#64748B;font-weight:800;font-size:13px}.pro-tile .tile-n{font-size:32px;font-weight:900;color:#1D4ED8;margin-top:10px;line-height:1} .drop-zone{border:2px dashed #BFDBFE;background:#F8FAFC;border-radius:28px;min-height:190px;display:grid;place-items:center;text-align:center;padding:22px;color:#0F2C5C;font-weight:900;box-shadow:inset 0 0 0 6px rgba(219,234,254,.35)}.drop-zone .dz-icon{font-size:46px;margin-bottom:8px}.mapping-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0}.map-card{background:#fff;border:1px solid #E2E8F0;border-radius:18px;padding:12px}.map-card b{display:block;color:#163A70;margin-bottom:4px}.map-card small{color:#64748B;font-weight:800}.screen-split{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}.role-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.role-tabs button{border:1px solid #BFDBFE;background:#fff;color:#1D4ED8;border-radius:16px;padding:10px 14px;font-weight:900}.role-tabs button.active{background:#1D4ED8;color:#fff}.perm-matrix{display:grid;gap:10px}.perm-row{background:#fff;border:1px solid #E2E8F0;border-radius:18px;padding:12px;display:grid;grid-template-columns:170px 1fr;gap:12px;align-items:center}.perm-title{font-weight:900;color:#0F2C5C}.perm-checks{display:grid;grid-template-columns:repeat(6,minmax(70px,1fr));gap:8px}.perm-checks label{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:14px;padding:8px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:800;color:#64748B}.company-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.company-card{background:#fff;border:1px solid #E2E8F0;border-radius:26px;padding:18px;box-shadow:0 14px 30px rgba(15,44,92,.07)}.company-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}.company-logo{width:48px;height:48px;border-radius:18px;background:#DBEAFE;color:#1D4ED8;display:grid;place-items:center;font-size:24px;font-weight:900}.usage-line{margin:10px 0}.usage-line small{display:flex;justify-content:space-between;color:#64748B;font-weight:900;margin-bottom:5px}.plan-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.plan-card{background:#fff;border:1px solid #E2E8F0;border-radius:28px;padding:22px;box-shadow:0 14px 30px rgba(15,44,92,.07);position:relative;overflow:hidden}.plan-card.featured{border-color:#1D4ED8;box-shadow:0 18px 42px rgba(29,78,216,.16)}.plan-card h3{margin:0;color:#0F2C5C}.plan-price{font-size:34px;font-weight:900;color:#1D4ED8;margin:10px 0}.feature-list{display:grid;gap:8px;margin-top:12px}.feature-list div{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:14px;padding:9px;font-weight:800;color:#334155}.mobile-status{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.mobile-status .status-pill{background:#fff;border:1px solid #E2E8F0;border-radius:20px;padding:14px;text-align:center;box-shadow:0 10px 22px rgba(15,44,92,.05)}.mobile-status b{display:block;color:#1D4ED8;font-size:22px}.mobile-actions .big{background:linear-gradient(180deg,#fff,#F8FAFC)!important;border-radius:28px!important}.activity-bars{display:grid;gap:10px}.activity-bar{background:#fff;border:1px solid #E2E8F0;border-radius:18px;padding:12px}.activity-bar .bar-top{display:flex;justify-content:space-between;font-weight:900;color:#0F2C5C}.activity-bar .bar-track{height:10px;background:#E2E8F0;border-radius:999px;overflow:hidden;margin-top:8px}.activity-bar .bar-fill{height:100%;background:#1D4ED8;border-radius:999px}.sys-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.sys-check{background:#fff;border:1px solid #E2E8F0;border-radius:22px;padding:16px;box-shadow:0 10px 24px rgba(15,44,92,.05);display:flex;gap:12px;align-items:center}.sys-dot{width:42px;height:42px;border-radius:16px;background:#D1FAE5;color:#047857;display:grid;place-items:center;font-size:22px;font-weight:900}.sys-check.warn .sys-dot{background:#FEF3C7;color:#B45309}.sys-check b{display:block;color:#0F2C5C}.sys-check span{color:#64748B;font-size:13px;font-weight:800} @media(max-width:800px){.pro-hero{border-radius:22px;padding:18px}.pro-hero h2{font-size:22px!important}.pro-hero .hero-icon{width:58px;height:58px;border-radius:20px;font-size:30px}.screen-split{grid-template-columns:1fr}.perm-row{grid-template-columns:1fr}.perm-checks{grid-template-columns:repeat(2,1fr)}.mobile-status{grid-template-columns:repeat(3,1fr)}.company-cards,.plan-cards{grid-template-columns:1fr}.drop-zone{min-height:150px}} /* ================= V2.3 ENTERPRISE POLISH LAYER ================= */ .enterprise-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0F2C5C,#1D4ED8);color:#fff;border-radius:26px;padding:24px;margin-bottom:16px;box-shadow:0 18px 42px rgba(15,44,92,.18)} .enterprise-hero:after{content:"";position:absolute;inset:auto -50px -70px auto;width:210px;height:210px;background:rgba(255,255,255,.12);border-radius:50%}.enterprise-hero h2{margin:0 0 4px;font-size:28px}.enterprise-hero p{margin:0;color:#EAF2FF;font-weight:700}.enterprise-hero .hero-ico{position:absolute;left:22px;top:22px;font-size:46px;opacity:.9}.enterprise-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}.enterprise-tabs button{border:1px solid var(--border);background:#fff;color:var(--primary);border-radius:999px;padding:10px 14px;font-weight:900}.enterprise-tabs button.active,.enterprise-tabs button:hover{background:var(--primary);color:#fff}.pro-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:14px 0}.pro-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:18px;box-shadow:var(--shadow-md);position:relative;overflow:hidden}.pro-card:before{content:"";position:absolute;top:0;right:0;left:0;height:5px;background:var(--primary)}.pro-card h3{margin:8px 0 6px;color:var(--primary-dark)}.pro-card .num{font-size:28px;font-weight:900;color:var(--primary)}.pro-card .meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.pro-chip{background:#DBEAFE;color:#163A70;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900}.progress-line{height:9px;background:#E5EAF2;border-radius:999px;overflow:hidden;margin:10px 0}.progress-line i{display:block;height:100%;background:linear-gradient(90deg,#1D4ED8,#3B82F6);border-radius:999px}.screen-split{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}.premium-list{display:grid;gap:10px}.premium-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:18px;padding:13px}.premium-row .dot{width:40px;height:40px;border-radius:14px;background:#DBEAFE;color:#163A70;display:grid;place-items:center;font-weight:900}.premium-row b{display:block;color:#0F2C5C}.premium-row span{display:block;color:#64748B;font-size:12px;font-weight:700}.health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.health-card{background:#fff;border:1px solid var(--border);border-radius:22px;padding:16px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow-sm)}.health-card.warn{background:#FFF7ED;border-color:#FED7AA}.health-icon{width:46px;height:46px;border-radius:16px;background:#D1FAE5;color:#166534;display:grid;place-items:center;font-weight:900}.health-card.warn .health-icon{background:#FEF3C7;color:#92400E}.bar-row{display:grid;grid-template-columns:120px 1fr 50px;gap:10px;align-items:center;margin:10px 0}.bar-track{height:12px;background:#E5EAF2;border-radius:999px;overflow:hidden}.bar-track i{display:block;height:100%;background:#1D4ED8;border-radius:999px}.mobile-preview{max-width:390px;margin:auto;background:#0F172A;border-radius:34px;padding:12px;box-shadow:0 22px 50px rgba(15,23,42,.18)}.mobile-screen{background:#F8FAFC;border-radius:26px;padding:16px;min-height:520px}.mobile-screen .top-mini{height:44px;background:#fff;border-radius:18px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;margin-bottom:12px;font-weight:900;color:#163A70}.mobile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.mobile-btn{border:0;border-radius:20px;background:#fff;min-height:110px;padding:14px;font-weight:900;color:#0F2C5C;box-shadow:var(--shadow-sm)}.mobile-btn div{font-size:30px;margin-bottom:8px}.import-steps{display:grid;gap:10px}.step-card{border:1px solid var(--border);background:#fff;border-radius:18px;padding:12px;display:flex;gap:10px}.step-card b{width:32px;height:32px;border-radius:12px;background:#DBEAFE;color:#163A70;display:grid;place-items:center}.drop-zone{border:2px dashed #BFDBFE;background:#F8FAFF;border-radius:24px;padding:22px;text-align:center}.drop-zone.drag{background:#DBEAFE}.supplier-card .balance{font-size:24px;font-weight:900;color:#163A70}.table-wrap{overflow:auto;border-radius:24px}.table-wrap .table{min-width:760px;margin-top:0}@media(max-width:900px){.screen-split{grid-template-columns:1fr}.enterprise-hero{padding:20px}.enterprise-hero .hero-ico{position:static;margin-bottom:8px}.bar-row{grid-template-columns:90px 1fr 40px}.mobile-preview{max-width:100%}.pro-card-grid{grid-template-columns:1fr}.premium-row{grid-template-columns:auto 1fr}.premium-row .pro-chip{grid-column:1/-1;width:max-content}.table-wrap{margin:0 -4px}.enterprise-tabs{overflow:auto;flex-wrap:nowrap;padding-bottom:4px}.enterprise-tabs button{white-space:nowrap}} /* === V2.5 MOBILE SCROLL + PLATFORM ADMIN ROYAL BLUE FIX === */ html,body{min-height:100%;height:auto;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch} .app{min-height:100dvh;overflow-x:hidden;overflow-y:auto} .main{min-height:calc(100dvh - 64px);overflow-y:visible;-webkit-overflow-scrolling:touch} @media(max-width:800px){ html,body{height:auto!important;min-height:100dvh!important;overflow-y:auto!important;touch-action:pan-y} body.menu-open{overflow:hidden!important} .app{display:block;min-height:100dvh;overflow-y:auto!important} .layout{display:block;min-height:auto!important;overflow:visible!important} .main{display:block;min-height:calc(100dvh - 62px);height:auto!important;overflow:visible!important;padding-bottom:calc(112px + env(safe-area-inset-bottom))!important} .toolbar{position:relative!important;top:auto!important;z-index:1} .side{overflow-y:auto!important;-webkit-overflow-scrolling:touch} .modal .box{overflow-y:auto!important;-webkit-overflow-scrolling:touch} } .saas-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#10233f 0%,#1D4ED8 58%,#2563EB 100%);color:#fff;border-radius:28px;padding:22px;margin:0 0 16px;box-shadow:0 22px 48px rgba(29,78,216,.22)} .saas-hero:before{content:"";position:absolute;inset:-35% auto auto -12%;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.12)} .saas-hero .saas-title{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .saas-hero h2{margin:0;font-size:28px;font-weight:900}.saas-hero p{margin:6px 0 0;opacity:.9;font-weight:800}.saas-hero .smallbtn{background:#fff;color:#1D4ED8}.saas-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.saas-tabs button{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.26);border-radius:14px;padding:10px 14px;font-weight:900}.saas-tabs button.active{background:#fff;color:#1D4ED8}.saas-kpis{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:12px;margin:14px 0}.saas-kpi{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:0 14px 34px rgba(29,78,216,.10);position:relative;overflow:hidden}.saas-kpi:before{content:"";position:absolute;top:0;right:0;left:0;height:4px;background:#1D4ED8}.saas-kpi b{display:block;color:#1D4ED8;font-size:30px;line-height:1}.saas-kpi span{display:block;color:var(--mut);font-weight:900;margin-top:8px}.saas-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}.saas-panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:16px;box-shadow:0 14px 34px rgba(15,23,42,.07)}.saas-panel h3{margin:0 0 12px}.saas-mini-list{display:grid;gap:10px}.saas-mini{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:16px;padding:12px;font-weight:900}.saas-mini small{display:block;color:var(--mut);font-weight:800}.saas-progress{height:10px;background:#E2E8F0;border-radius:999px;overflow:hidden;margin-top:8px}.saas-progress span{display:block;height:100%;background:#1D4ED8;border-radius:999px}.company-cards,.plan-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:14px 0}.company-card,.plan-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:16px;box-shadow:0 14px 34px rgba(15,23,42,.07)}.company-top{display:flex;gap:10px;align-items:center;margin-bottom:12px}.company-logo{width:48px;height:48px;border-radius:16px;background:#DBEAFE;color:#1D4ED8;display:grid;place-items:center;font-weight:900;font-size:22px}.usage-line{margin:10px 0}.usage-line>div:first-child{display:flex;justify-content:space-between;color:var(--mut);font-weight:900;font-size:12px}.plan-card.featured{border-color:#1D4ED8;box-shadow:0 18px 42px rgba(29,78,216,.16)}.plan-price{font-size:34px;font-weight:900;color:#1D4ED8}.feature-list{display:grid;gap:8px;margin-top:12px;color:var(--txt);font-weight:900} @media(max-width:800px){.saas-hero{border-radius:22px;padding:18px}.saas-hero h2{font-size:22px}.saas-tabs{display:grid;grid-template-columns:1fr 1fr}.saas-tabs button{width:100%}.saas-kpis{grid-template-columns:1fr 1fr}.saas-grid{grid-template-columns:1fr}.saas-kpi{padding:14px}.saas-kpi b{font-size:24px}.company-cards,.plan-cards{grid-template-columns:1fr}} @media(max-width:420px){.saas-kpis{grid-template-columns:1fr}.saas-tabs{grid-template-columns:1fr}} .company-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.company-actions .smallbtn{padding:9px 10px;font-size:12px}.saas-lock-note{margin-top:10px;color:#64748B;font-weight:800;text-align:center}@media(max-width:800px){.company-actions .smallbtn{width:100%;margin:2px 0}.saas-tabs{overflow-x:auto;white-space:nowrap}.saas-tabs button{min-width:max-content}} /* ===================================================== MAKHZANY V3.2.10 PRODUCTION FIX - LIGHT ROYAL BLUE fixes: login identity, large error bar, mobile-safe layout ===================================================== */ :root{ --g:#1D4ED8!important; --g2:#2563EB!important; --navy:#163A70!important; --navy2:#0F2C5C!important; --mint:#3B82F6!important; --bg:#F8FAFC!important; --card:#FFFFFF!important; --line:#E2E8F0!important; --border:#E2E8F0!important; --border-light:#EEF2F7!important; --txt:#0F172A!important; --mut:#64748B!important; --shadow:0 18px 45px rgba(29,78,216,.10)!important; --shadow-md:0 12px 28px rgba(29,78,216,.08)!important; --shadow-lg:0 24px 60px rgba(15,44,92,.12)!important; } html,body{background:#F8FAFC!important;color:#0F172A!important;font-family:"Cairo",Tahoma,Arial,sans-serif!important;} .login{ background: radial-gradient(circle at 18% 18%,rgba(219,234,254,.95),transparent 28%), radial-gradient(circle at 82% 78%,rgba(191,219,254,.72),transparent 32%), linear-gradient(135deg,#FFFFFF 0%,#F8FAFC 48%,#EFF6FF 100%)!important; min-height:100dvh!important;overflow:auto!important; } .login:before{display:none!important;content:none!important;} .login-wrap{grid-template-columns:.95fr 1.05fr!important;gap:24px!important;max-width:1120px!important;} .login-hero,.login-card{ background:rgba(255,255,255,.96)!important;border:1px solid #E2E8F0!important;color:#0F172A!important; border-radius:34px!important;box-shadow:0 24px 64px rgba(15,44,92,.12)!important; } .login-hero{padding:38px!important;order:1!important;} .login-card{order:2!important;} .login-badge{display:none!important;} .login-hero h1{color:#163A70!important;font-weight:1000!important;font-size:56px!important;margin-top:0!important;} .login-hero h1:after{background:#22C55E!important;width:86px!important;height:5px!important;} .login-hero p{color:#334155!important;font-weight:700!important;} .hero-stat{background:#F8FAFC!important;border:1px solid #EEF2F7!important;color:#163A70!important;box-shadow:0 12px 30px rgba(15,44,92,.05)!important;} .hero-stat span{color:#64748B!important;} .login-logo,.mark,.brand .mark{background:linear-gradient(135deg,#163A70,#1D4ED8)!important;box-shadow:0 16px 36px rgba(29,78,216,.18)!important;} .login-title,.brand b,.pro-head h2,.section-title{color:#163A70!important;} .login .field input{background:#F8FAFC!important;border:1px solid #CBD5E1!important;color:#0F172A!important;box-shadow:none!important;} .login .field input:focus{border-color:#1D4ED8!important;box-shadow:0 0 0 4px rgba(29,78,216,.12)!important;} .btn,.smallbtn:not(.danger):not(.ok):not(.warn){background:linear-gradient(135deg,#163A70,#1D4ED8)!important;color:#FFFFFF!important;border:1px solid #1D4ED8!important;} body:not(.offline) .net-status{display:none!important;} .net-status{ top:auto!important;right:18px!important;left:auto!important;bottom:18px!important;width:auto!important;max-width:min(420px,calc(100vw - 36px))!important; padding:10px 14px!important;border-radius:16px!important;background:#FEF2F2!important;color:#991B1B!important;border:1px solid #FECACA!important; text-align:right!important;box-shadow:0 16px 36px rgba(153,27,27,.12)!important; } .toast{ left:auto!important;right:18px!important;bottom:18px!important;width:auto!important;max-width:min(420px,calc(100vw - 36px))!important; padding:11px 15px!important;border-radius:16px!important;text-align:right!important;transform:translateY(140%)!important; box-shadow:0 18px 42px rgba(15,44,92,.16)!important; } .toast.show{transform:translateY(0)!important;opacity:1!important;} .toast.err{background:#FEF2F2!important;color:#991B1B!important;border:1px solid #FECACA!important;} .toast.ok,.toast:not(.err):not(.warn){background:#EFF6FF!important;color:#163A70!important;border:1px solid #BFDBFE!important;} .toast.warn{background:#FFFBEB!important;color:#92400E!important;border:1px solid #FDE68A!important;} .top{background:rgba(255,255,255,.96)!important;border-bottom:1px solid #E2E8F0!important;box-shadow:0 10px 28px rgba(15,44,92,.06)!important;} .side{background:#FFFFFF!important;border-left:1px solid #E2E8F0!important;box-shadow:-10px 0 28px rgba(15,44,92,.04)!important;} .nav button{color:#0F172A!important;background:transparent!important;} .nav button span{background:#DBEAFE!important;color:#1D4ED8!important;} .nav button.active,.nav button:hover{background:#1D4ED8!important;color:#FFFFFF!important;border-color:#1D4ED8!important;} .nav button.active span,.nav button:hover span{background:rgba(255,255,255,.18)!important;color:#FFFFFF!important;} .card,.pro-card,.phase-card,.statusbox,.big,.module-card,.saas-panel,.company-card,.plan-card{background:#FFFFFF!important;border-color:#E2E8F0!important;box-shadow:0 12px 30px rgba(15,44,92,.06)!important;} .table th{background:#163A70!important;color:#FFFFFF!important;} .table td{background:#FFFFFF!important;} @media(max-width:900px){ .login-wrap{grid-template-columns:1fr!important;padding:16px!important;gap:14px!important;} .login-hero{display:block!important;padding:24px!important;text-align:center!important;} .login-hero h1{font-size:42px!important;} .login-hero p{font-size:14px!important;line-height:1.8!important;} .hero-stats{grid-template-columns:repeat(3,1fr)!important;gap:8px!important;} .hero-stat{padding:11px 8px!important;border-radius:18px!important;} .hero-stat b{font-size:18px!important;} .hero-stat span{font-size:11px!important;} .login-card{padding:24px!important;border-radius:28px!important;} .toast,.net-status{right:12px!important;bottom:calc(88px + env(safe-area-inset-bottom))!important;max-width:calc(100vw - 24px)!important;} } @media(max-width:520px){ .login{place-items:start!important;} .login-wrap{padding:12px!important;} .login-hero{padding:20px 16px!important;} .login-hero h1{font-size:36px!important;margin-bottom:8px!important;} .login-hero p{display:block!important;margin-bottom:12px!important;} .hero-stats{grid-template-columns:repeat(3,1fr)!important;} .hero-stat span{display:none!important;} } /* === MAKHZANA LOGO BRAND PATCH === */ .login-logo{width:120px;height:120px;border-radius:28px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 40px rgba(15,44,92,.14);overflow:hidden;margin:0 auto 14px} .login-logo img{width:108px;height:108px;object-fit:contain;display:block} .brand .mark{width:52px;height:52px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(15,44,92,.12);overflow:hidden;flex:0 0 auto} .brand .mark img{width:46px;height:46px;object-fit:contain;display:block} @media(max-width:700px){.login-logo{width:96px;height:96px;border-radius:22px}.login-logo img{width:88px;height:88px}.brand .mark{width:44px;height:44px}.brand .mark img{width:39px;height:39px}} /* === V3.2.10 MOBILE COMPANY LOGIN FIX === */ body:not(.is-authenticated) #app, body:not(.is-authenticated) #bottomnav, body:not(.is-authenticated) #actionFab, body:not(.is-authenticated) #actionSheet{display:none!important;} body:not(.is-authenticated) .login{display:grid!important;} @media(max-width:800px){ body:not(.is-authenticated) .login{min-height:100dvh!important;padding:12px!important;place-items:center!important;overflow:auto!important;} body:not(.is-authenticated) .login-wrap{width:100%!important;max-width:440px!important;display:grid!important;grid-template-columns:1fr!important;gap:0!important;padding:0!important;margin:0 auto!important;} body:not(.is-authenticated) .login-hero{display:none!important;} body:not(.is-authenticated) .login-card{width:100%!important;padding:26px 22px!important;border-radius:30px!important;margin:0!important;box-shadow:0 18px 46px rgba(15,44,92,.12)!important;} body:not(.is-authenticated) .login-logo{width:96px!important;height:96px!important;margin:0 auto 14px!important;border-radius:24px!important;background:#fff!important;box-shadow:0 14px 34px rgba(29,78,216,.14)!important;} body:not(.is-authenticated) .login-logo img{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:22px!important;} body:not(.is-authenticated) .login-title{font-size:36px!important;line-height:1.25!important;margin:8px 0 18px!important;text-align:center!important;} body:not(.is-authenticated) .field{margin:12px 0 18px!important;} body:not(.is-authenticated) .field span{font-size:18px!important;margin-bottom:8px!important;} body:not(.is-authenticated) .field input{height:56px!important;border-radius:18px!important;font-size:18px!important;} body:not(.is-authenticated) .login .btn{height:62px!important;border-radius:20px!important;font-size:20px!important;margin-top:8px!important;} #companyHint{border-radius:16px!important;margin-bottom:14px!important;padding:10px 12px!important;font-size:14px!important;} } @media(max-width:380px){ body:not(.is-authenticated) .login{padding:8px!important;} body:not(.is-authenticated) .login-card{padding:22px 18px!important;border-radius:26px!important;} body:not(.is-authenticated) .login-logo{width:86px!important;height:86px!important;} body:not(.is-authenticated) .login-title{font-size:32px!important;} } /* V3.2.21 - Dashboard mobile layout + faster navigation */ .dashboard-stack{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;margin-top:16px!important;align-items:start!important} .dashboard-stack>.dashboard-section{min-width:0!important;width:100%!important} .dashboard-stack .clean-panel{width:100%!important;margin:0!important} .dashboard-admin-icons{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important} @media(max-width:800px){ .dashboard-stack{gap:12px!important;margin-top:12px!important} .dashboard-admin-icons{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} .dashboard-admin-icons .big{min-height:106px!important;padding:12px 8px!important;font-size:14px!important;line-height:1.25!important} .dashboard-admin-icons .big .ico{font-size:30px!important;margin-bottom:5px!important;filter:none!important} .dashboard-stack .table tbody{gap:8px!important} .dashboard-stack .table tr{box-shadow:0 6px 14px rgba(15,44,92,.05)!important} .side,.sidebar{transition:transform .08s linear!important;will-change:transform!important} .shade{backdrop-filter:none!important} body:not(.menu-open) .shade{display:none!important} } @media(max-width:360px){.dashboard-admin-icons{grid-template-columns:1fr!important}} .main,.side,.modal .box{-webkit-overflow-scrolling:touch;scroll-behavior:auto!important} .clean-panel,.kpi-card,.quick-btn,.big{content-visibility:auto;contain-intrinsic-size:1px 140px} /* V3.2.22 - Bottom mobile navigator instant switching */ @media (max-width:900px){ .bottomnav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;will-change:auto!important;contain:layout paint!important;transform:translateZ(0)!important} .bottomnav button{touch-action:manipulation!important;-webkit-tap-highlight-color:transparent!important;transition:none!important;user-select:none!important} .bottomnav button.active{transition:none!important;box-shadow:none!important} .bottomnav *{pointer-events:auto!important} } /* V3.5.0 Production Clean CRUD UI */ .crud-table{width:100%!important;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden} .crud-table .actions-col{min-width:220px!important;width:220px!important;text-align:center!important;white-space:nowrap!important} .table-actions{min-width:220px!important;text-align:center!important;vertical-align:middle!important;white-space:normal!important;visibility:visible!important;opacity:1!important} .table-actions .smallbtn{display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:2px!important;min-height:34px!important;padding:7px 9px!important;border-radius:10px!important;font-size:12px!important;font-weight:800!important;white-space:nowrap!important} .toolbar{gap:8px;flex-wrap:wrap}.toolbar .search{min-width:210px} @media(max-width:768px){.crud-table .actions-col{width:190px!important;min-width:190px!important}.table-actions{min-width:190px!important}.table-actions .smallbtn{font-size:12px!important;padding:6px 7px!important}.toolbar .search{width:100%;min-width:0}} /* MAKHZANY V3.5.2 OFFICIAL REPORTING UI */ .official-date-filter{display:inline-flex!important;align-items:center!important;gap:7px!important;background:#fff!important;border:1px solid var(--border)!important;border-radius:14px!important;padding:6px 8px!important;margin-inline-end:8px!important;box-shadow:var(--shadow-sm)!important;vertical-align:middle!important} .official-date-filter span{font-size:12px!important;color:var(--text-secondary)!important;font-weight:900!important} .official-date-filter input[type=date]{height:34px!important;border:1px solid var(--border)!important;border-radius:10px!important;background:#F8FAFC!important;color:var(--text-main)!important;padding:0 8px!important;min-width:135px!important} @media(max-width:760px){.official-date-filter{width:100%!important;display:grid!important;grid-template-columns:auto 1fr auto 1fr!important;margin:6px 0!important}.official-date-filter button{grid-column:auto/span 2!important}.toolbar,.pro-head{gap:8px!important}.toolbar>div:last-child,.pro-head>div:last-child{display:flex!important;flex-wrap:wrap!important;gap:7px!important;width:100%!important}} @media print{.official-date-filter,.no-print,button,input.search,.bottomnav,.side,.top,.action-fab,.action-sheet{display:none!important}@page{size:A4 landscape;margin:7mm}body{background:#fff!important}.main{padding:0!important}.table{box-shadow:none!important;border-collapse:collapse!important;width:100%!important}.table th{background:#163A70!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.table td,.table th{border:1px solid #D9E1EC!important;padding:5px!important}.table-actions,td[data-label="الإجراءات"]{display:none!important}.clean-panel,.card,.kpi-card{box-shadow:none!important;break-inside:avoid!important}} /* ===================================================== V3.5.9 Desktop action buttons fix يمنع قص نص الأزرار داخل الجداول على الكمبيوتر مع الحفاظ على شكل الموبايل ===================================================== */ .table th:last-child, .table td.table-actions{ min-width:210px; width:210px; } .table-actions{ display:flex!important; flex-wrap:wrap!important; gap:6px!important; align-items:center!important; justify-content:flex-start!important; overflow:visible!important; white-space:normal!important; } .table-actions .smallbtn, .company-actions .smallbtn, .toolbar .smallbtn, .top-actions .smallbtn{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:62px!important; width:auto!important; max-width:none!important; padding:9px 13px!important; line-height:1.25!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; flex:0 0 auto!important; } .table-actions .smallbtn.danger{ min-width:52px!important; } @media(max-width:800px){ .table th:last-child, .table td.table-actions{ min-width:0!important; width:auto!important; } .table-actions{ justify-content:flex-start!important; } .table-actions .smallbtn, .company-actions .smallbtn{ min-width:72px!important; width:auto!important; padding:10px 12px!important; } } /* === MAKHZANY V3.5.10 BARCODE + CAIRO PRINT HARDENING === */ .inline-field{display:flex;gap:8px;align-items:center}.inline-field input{flex:1}.barcode-svg{display:block;max-width:100%;height:auto}.barcode-label .barcode-svg{height:52px}.product-card .barcode-svg{background:#fff;border-radius:6px;padding:3px} @media print{*{font-family:'Cairo',Tahoma,Arial,sans-serif!important}.barcode-svg{height:14mm!important}.barcode-code{direction:ltr;letter-spacing:1px}} /* === V3.5.21 Workflow ordered hub actions === */ .workflow-actions .hub-actions-head{align-items:flex-start!important;gap:12px!important} .workflow-actions .hub-actions-head>div{display:flex;flex-direction:column;gap:3px} .workflow-actions .hub-actions-head small{color:#64748b;font-size:12px;font-weight:600} .workflow-grid{counter-reset:workflow-step} .workflow-btn{position:relative!important;display:grid!important;grid-template-columns:42px 1fr!important;grid-template-areas:"num icon" "num title" "num desc"!important;align-items:center!important;text-align:right!important;min-height:104px!important;padding:16px 18px 16px 12px!important;border-inline-start:4px solid #163A70!important;overflow:visible!important} .workflow-btn em{grid-area:num;align-self:stretch;display:flex;align-items:center;justify-content:center;width:34px;height:100%;min-height:68px;border-radius:14px;background:#EFF6FF;color:#163A70;font-style:normal;font-weight:900;font-size:14px;direction:ltr} .workflow-btn span{grid-area:icon;font-size:25px;line-height:1;margin-bottom:4px} .workflow-btn b{grid-area:title;font-size:15px;line-height:1.45} .workflow-btn small{grid-area:desc;line-height:1.55;color:#64748b} .workflow-btn:not(:last-child)::after{content:'↓';position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);z-index:2;background:#fff;border:1px solid #D9E1EC;color:#163A70;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;box-shadow:0 5px 14px rgba(15,23,42,.10)} @media(min-width:801px){.workflow-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;gap:18px!important}.workflow-btn:not(:last-child)::after{content:'←';left:-18px;right:auto;top:50%;bottom:auto;transform:translateY(-50%)}.workflow-grid .workflow-btn:nth-child(1)::after{content:'←'}} @media(max-width:800px){.workflow-grid{display:flex!important;flex-direction:column!important;gap:18px!important}.workflow-btn{grid-template-columns:46px 1fr!important;min-height:92px!important}.workflow-btn:not(:last-child)::after{bottom:-24px}.workflow-actions .hub-actions-head{padding-inline:2px}.workflow-actions .hub-actions-head small{font-size:11px}} /* V3.5.25 - clear labels for every operation line */ .labeled-line{ display:grid !important; grid-template-columns:minmax(180px,1.5fr) minmax(120px,.7fr) minmax(120px,.7fr) auto; gap:10px; align-items:end; padding:10px; margin:8px 0; border:1px solid var(--border,#d9e2ef); border-radius:14px; background:#fff; } .labeled-line .mini-field{margin:0;min-width:0;display:flex;flex-direction:column;gap:6px} .labeled-line .mini-field>span{font-size:12px;font-weight:800;color:#1f2937;line-height:1.2} .labeled-line .mini-field input,.labeled-line .mini-field select{width:100%;min-height:42px} .labeled-line .smallbtn{min-height:42px;white-space:nowrap} #opLines,#poLines,#prodLines{display:block;width:100%} @media(max-width:700px){ .labeled-line{grid-template-columns:1fr 1fr;gap:8px;padding:10px} .labeled-line .mini-field:first-child{grid-column:1/-1} .labeled-line .smallbtn{grid-column:1/-1;width:100%} }