#appView .topbar{display:flex!important;align-items:center!important;gap:12px!important;min-height:72px!important;padding:8px 20px!important;overflow:visible!important} #appView .eshraq-user-area{display:flex!important;align-items:center!important;gap:7px!important;position:relative!important;margin-inline-start:auto!important;direction:rtl!important;flex:0 0 auto!important} #appView .eshraq-user-profile{display:flex!important;align-items:center!important;gap:8px!important;min-height:46px!important;padding:5px 9px!important;border:1px solid #dbe7e1!important;border-radius:14px!important;background:#fff!important;color:#173f37!important;cursor:pointer!important;box-shadow:0 5px 14px rgba(35,68,57,.05)!important} #appView .eshraq-user-avatar-visual{width:36px!important;height:36px!important;border-radius:50%!important;display:block!important;overflow:hidden!important;flex:0 0 36px!important} #appView .eshraq-user-avatar-img,#appView .eshraq-user-avatar-fallback{width:36px!important;height:36px!important;border-radius:50%!important;display:block!important} #appView .eshraq-user-avatar-img{object-fit:cover!important;border:2px solid #d7eadf!important} #appView .eshraq-user-avatar-fallback{display:grid!important;place-items:center!important;background:linear-gradient(145deg,#dff3e9,#f7e8b8)!important;color:#0b6b5e!important;font-weight:900!important;font-size:.82rem!important;border:1px solid #d4e3db!important} #appView .eshraq-user-copy{display:grid!important;text-align:right!important;line-height:1.15!important;min-width:78px!important} #appView .eshraq-user-copy b{font-size:.82rem!important;white-space:nowrap!important;max-width:160px!important;overflow:hidden!important;text-overflow:ellipsis!important} #appView .eshraq-user-copy small{font-size:.66rem!important;color:#718078!important;font-weight:800!important} #appView .eshraq-top-action{width:38px!important;height:38px!important;border-radius:11px!important;border:1px solid #d6e5dd!important;background:#f3faf6!important;color:#14735f!important;display:grid!important;place-items:center!important;cursor:pointer!important;position:relative!important;flex:0 0 38px!important} #appView .eshraq-top-action:hover{background:#e8f6ef!important;transform:translateY(-1px)!important} #appView .eshraq-top-action .eshraq-nav-svg{width:18px!important;height:18px!important} #appView .eshraq-notify-top{background:#fffaf0!important;border-color:#ead9a8!important;color:#b07a08!important;display:grid!important;visibility:visible!important;opacity:1!important} #appView .eshraq-notify-top:hover{background:#fff4d7!important} #appView .eshraq-notify-top .dot{position:absolute!important;top:4px!important;right:4px!important;margin:0!important} #appView .eshraq-global-search{position:relative!important;flex:1 1 380px!important;max-width:560px!important;min-width:240px!important;margin-inline:auto!important;z-index:80!important} #appView .eshraq-global-search input{width:100%!important;height:44px!important;border:1px solid #d9e5df!important;border-radius:14px!important;background:#fff!important;padding:0 44px 0 14px!important;color:#183f37!important;font:inherit!important;font-size:.84rem!important;outline:none!important;box-shadow:0 5px 16px rgba(30,70,58,.05)!important} #appView .eshraq-global-search input:focus{border-color:#8fc5b4!important;box-shadow:0 0 0 3px rgba(52,145,116,.1),0 6px 18px rgba(30,70,58,.08)!important} #appView .eshraq-search-icon{position:absolute!important;right:14px!important;top:50%!important;transform:translateY(-50%)!important;color:#0d7562!important;z-index:2!important;pointer-events:none!important} #appView .eshraq-search-icon .eshraq-nav-svg{width:19px!important;height:19px!important} #appView .eshraq-global-search-results{position:absolute!important;top:calc(100% + 7px)!important;right:0!important;left:0!important;background:#fff!important;border:1px solid #dce7e2!important;border-radius:15px!important;padding:6px!important;box-shadow:0 18px 42px rgba(26,64,53,.16)!important;max-height:360px!important;overflow:auto!important;z-index:200!important} #appView .eshraq-search-result{width:100%!important;display:flex!important;align-items:center!important;gap:10px!important;border:0!important;background:transparent!important;border-radius:10px!important;padding:10px 11px!important;color:#163f36!important;text-align:right!important;cursor:pointer!important} #appView .eshraq-search-result:hover{background:#eef8f3!important} #appView .eshraq-search-result span{font-size:.65rem!important;font-weight:900!important;color:#936e10!important;background:#fff3cb!important;border-radius:999px!important;padding:3px 7px!important;flex:0 0 auto!important} #appView .eshraq-search-result b{font-size:.82rem!important;line-height:1.35!important} #appView .eshraq-search-empty{padding:13px!important;text-align:center!important;color:#75817c!important;font-size:.8rem!important} #appView .eshraq-nav-svg{width:22px;height:22px;display:block;stroke-width:2.1} #appView .bottom-nav button span{overflow:hidden!important} #appView .bottom-nav button[data-page="home"] span{background:linear-gradient(145deg,#dff4e9,#cceadb)!important;color:#0b735d!important} #appView .bottom-nav button[data-page="services"] span{background:linear-gradient(145deg,#fff1bd,#ffe08a)!important;color:#a86d00!important} #appView .bottom-nav button[data-page="appointments"] span{background:linear-gradient(145deg,#dcf5ef,#c7ebe2)!important;color:#057865!important} #appView .bottom-nav button[data-page="requests"] span{background:linear-gradient(145deg,#e6efff,#d4e3fa)!important;color:#356cac!important} #appView .bottom-nav button[data-eshraq-web*="team"] span{background:linear-gradient(145deg,#e1f4ea,#cfeadb)!important;color:#147259!important} #appView .bottom-nav button[data-eshraq-web*="blog"] span{background:linear-gradient(145deg,#eaedff,#dfe5ff)!important;color:#4f5fae!important} #appView .bottom-nav button[data-eshraq-web*="donate"] span{background:linear-gradient(145deg,#ffe8eb,#ffd6db)!important;color:#cf4354!important} #appView .bottom-nav button[data-page="more"] span{background:linear-gradient(145deg,#edf3e9,#dfe9d9)!important;color:#55725e!important} #appView .eshraq-rail-brand img{opacity:0!important;transition:opacity .12s ease!important} #appView .eshraq-rail-brand img.eshraq-brand-ready{opacity:1!important} #appView .eshraq-rail-brand strong,#appView .eshraq-rail-brand-copy,#appView .eshraq-rail-brand small{display:none!important} #appView .eshraq-rail-divider-toggle{width:100%!important;height:56px!important;display:block!important;padding:0!important;margin:0!important;box-sizing:border-box!important;position:relative!important;z-index:5!important;flex:0 0 56px!important;background:#0b6b5e!important} #appView .eshraq-rail-divider-line{position:absolute!important;top:50%!important;height:1px!important;background:#d8b34c!important;transform:translateY(-50%)!important;width:calc(50% - 36px)!important} #appView .eshraq-rail-divider-line-start{right:12px!important}#appView .eshraq-rail-divider-line-end{left:12px!important} #appView .eshraq-rail-divider-slot{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:44px!important;height:44px!important;margin:0!important;padding:0!important} #appView .eshraq-rail-divider-toggle .eshraq-rail-toggle{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;border-radius:50%!important;padding:0!important;margin:0!important;background:#f7d36f!important;color:#705100!important;border:2px solid #fff3c6!important;box-shadow:0 0 0 2px #d8b34c,0 6px 16px rgba(0,0,0,.16)!important;z-index:6!important;line-height:0!important;font-size:0!important;text-indent:0!important;overflow:hidden!important} #appView .eshraq-rail-divider-toggle .eshraq-rail-toggle::before,#appView .eshraq-rail-divider-toggle .eshraq-rail-toggle::after{content:none!important;display:none!important} #appView .eshraq-rail-divider-toggle .eshraq-rail-toggle .eshraq-rail-chevron{position:absolute!important;left:50%!important;top:50%!important;width:18px!important;height:18px!important;margin:0!important;display:block!important;transform:translate(-50%,-50%)!important;overflow:visible!important} #appView .eshraq-rail-divider-toggle .eshraq-rail-toggle svg path{vector-effect:non-scaling-stroke!important} @media(min-width:901px){ #appView.app-shell{padding-right:252px!important;transition:padding-right .2s ease!important} #appView .bottom-nav{width:252px!important;background:#0b6b5e!important;border-left:0!important;padding:10px 14px 24px!important;overflow-x:hidden!important;transition:width .2s ease,padding .2s ease!important} #appView .bottom-nav::before{display:none!important;content:none!important} #appView .bottom-nav>button{color:#fff!important;background:transparent!important;border-color:transparent!important;font-size:.9rem!important;font-weight:820!important;min-height:52px!important;transition:background .15s ease,width .2s ease,padding .2s ease!important} #appView .bottom-nav>button small{font-size:.9rem!important;font-weight:850!important;line-height:1.18!important;opacity:1!important;max-width:150px!important;overflow:hidden!important;white-space:nowrap!important;transition:opacity .12s ease,max-width .2s ease!important} #appView .bottom-nav>button span{width:40px!important;height:40px!important;min-width:40px!important;flex:0 0 40px!important;border-radius:11px!important} #appView .bottom-nav>button:hover{background:rgba(255,255,255,.09)!important} #appView .bottom-nav>button.on,#appView .bottom-nav>button.active{background:rgba(255,255,255,.15)!important;border:1px solid rgba(255,255,255,.22)!important;color:#fff!important} #appView .bottom-nav .eshraq-rail-brand{width:100%!important;height:92px!important;min-height:92px!important;flex:0 0 92px!important;margin:0!important;padding:0!important;display:grid!important;place-items:center!important;background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important} #appView .bottom-nav .eshraq-rail-brand img{width:84px!important;height:84px!important;max-width:84px!important;max-height:84px!important;object-fit:contain!important;margin:0!important;padding:0!important;border:0!important;border-radius:18px!important;background:transparent!important;box-shadow:none!important;filter:none!important;transform:none!important} #appView.eshraq-rail-collapsed.app-shell{padding-right:88px!important} #appView.eshraq-rail-collapsed .bottom-nav{width:88px!important;padding:10px 10px 24px!important;align-items:center!important} #appView.eshraq-rail-collapsed .bottom-nav .eshraq-rail-brand{width:100%!important;height:64px!important;min-height:64px!important;flex-basis:64px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important} #appView.eshraq-rail-collapsed .bottom-nav .eshraq-rail-brand img{width:56px!important;height:56px!important;max-width:56px!important;max-height:56px!important;margin:0!important} #appView.eshraq-rail-collapsed .eshraq-rail-divider-toggle{width:68px!important;flex:0 0 52px!important;height:52px!important} #appView.eshraq-rail-collapsed .eshraq-rail-divider-line{display:none!important} #appView.eshraq-rail-collapsed .bottom-nav>button{width:56px!important;min-width:56px!important;padding:6px 8px!important;justify-content:center!important;gap:0!important} #appView.eshraq-rail-collapsed .bottom-nav>button small{opacity:0!important;max-width:0!important;width:0!important;overflow:hidden!important;pointer-events:none!important} #appView.eshraq-rail-collapsed .bottom-nav>button span{margin:0!important} } @media(max-width:1100px){#appView .eshraq-global-search{max-width:430px!important;flex-basis:280px!important}} @media(max-width:900px){#appView.app-shell{padding-right:0!important}#appView .eshraq-rail-divider-toggle{display:none!important}#appView .topbar{padding:8px 12px!important;gap:7px!important;flex-wrap:wrap!important;overflow:visible!important}#appView .eshraq-user-area{margin-inline-start:0!important;gap:6px!important}#appView .eshraq-user-copy b{max-width:118px!important}#appView .eshraq-top-action{width:36px!important;height:36px!important;flex-basis:36px!important}#appView .eshraq-global-search{order:8!important;flex:1 1 100%!important;max-width:none!important;min-width:0!important;width:100%!important;margin:2px 0 0!important}#appView .eshraq-global-search input{height:42px!important}} /* V251 approved reference UI */ @media(min-width:901px){ #appView.app-shell{padding-right:112px!important} #appView .bottom-nav{width:112px!important;padding:12px 9px 18px!important;align-items:center!important;gap:8px!important} #appView .bottom-nav .eshraq-rail-brand{height:78px!important;min-height:78px!important;flex-basis:78px!important} #appView .bottom-nav .eshraq-rail-brand img{width:68px!important;height:68px!important;max-width:68px!important;max-height:68px!important;border-radius:16px!important} #appView .eshraq-rail-divider-toggle{height:50px!important;flex-basis:50px!important} #appView .eshraq-rail-divider-line{display:none!important} #appView .bottom-nav>button{width:88px!important;min-height:70px!important;padding:7px 5px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:5px!important;text-align:center!important;border-radius:16px!important} #appView .bottom-nav>button span{width:42px!important;height:42px!important;min-width:42px!important;flex-basis:42px!important} #appView .bottom-nav>button small{display:block!important;max-width:82px!important;font-size:.74rem!important;line-height:1.1!important;text-align:center!important;white-space:normal!important} #appView.eshraq-rail-collapsed.app-shell{padding-right:82px!important} #appView.eshraq-rail-collapsed .bottom-nav{width:82px!important} } #appView .topbar{min-height:86px!important;padding:12px 24px!important;background:#fff!important;border-bottom:1px solid #edf0ec!important} #appView .topbar .brand{display:flex!important;align-items:center!important;gap:10px!important;min-width:250px!important} #appView .topbar .brand img{width:60px!important;height:60px!important;object-fit:contain!important;border-radius:14px!important;background:#fffaf0!important;padding:4px!important} #appView .topbar .brand b{font-size:1.12rem!important;color:#0d4d41!important} #appView .topbar .brand small{font-size:.74rem!important;color:#6e7b76!important} #appView .eshraq-global-search{max-width:600px!important} #appView .eshraq-global-search input{height:48px!important;border-radius:24px!important;font-size:.92rem!important;padding-right:48px!important} #appView .eshraq-user-profile{min-height:52px!important;border-radius:18px!important;padding:5px 10px!important} #appView .eshraq-user-avatar-visual,#appView .eshraq-user-avatar-img,#appView .eshraq-user-avatar-fallback{width:42px!important;height:42px!important} #appView .eshraq-user-avatar-visual{flex-basis:42px!important} #appView .eshraq-user-copy b{font-size:.9rem!important} #appView .eshraq-user-copy small{font-size:.72rem!important} #appView .content{max-width:none!important;padding:24px 26px 70px!important} @media(max-width:900px){ #appView .topbar .brand{min-width:0!important} #appView .topbar .brand img{width:48px!important;height:48px!important} #appView .content{padding:14px 12px 92px!important} } /* V251 final reference composition */ #appView{background:#fbfaf6!important} #appView .topbar{ position:sticky!important;top:0!important;z-index:500!important; min-height:86px!important;padding:10px 22px!important; background:rgba(255,255,255,.98)!important;border-bottom:1px solid #ecefe9!important; box-shadow:0 2px 14px rgba(32,68,56,.035)!important; } #appView .topbar .brand{order:1!important;margin-inline:0!important;min-width:255px!important;justify-content:flex-start!important} #appView .topbar .brand img{width:66px!important;height:66px!important;padding:2px!important;border-radius:16px!important;background:#fff!important;object-fit:contain!important} #appView .topbar .brand b{font-size:1.16rem!important;font-weight:950!important} #appView .topbar .brand small{font-size:.73rem!important;font-weight:750!important;color:#77847e!important} #appView .eshraq-global-search{order:2!important;max-width:600px!important;flex:1 1 520px!important} #appView .eshraq-global-search input{height:48px!important;border-radius:25px!important;background:#fff!important;border-color:#dde6e1!important;box-shadow:0 4px 16px rgba(33,73,59,.035)!important} #appView .eshraq-user-area{order:3!important;margin-inline-start:0!important;margin-inline-end:auto!important} #appView .eshraq-user-profile{min-height:54px!important;border-radius:18px!important;padding:5px 11px!important} #appView .eshraq-user-avatar-visual,#appView .eshraq-user-avatar-img,#appView .eshraq-user-avatar-fallback{width:44px!important;height:44px!important} #appView .eshraq-user-avatar-visual{flex-basis:44px!important} #appView .content{ max-width:none!important; padding:24px 24px 70px!important; background:linear-gradient(180deg,#fbfaf6 0%,#f9f7ef 100%)!important; } #appView #home{gap:20px!important} #appView .eshraq-hero-credit{ position:absolute!important;left:18px!important;bottom:10px!important; font-size:.62rem!important;color:rgba(45,70,61,.68)!important;font-weight:700!important; background:rgba(255,255,255,.64)!important;padding:3px 7px!important;border-radius:999px!important; } /* الخدمات الرئيسية */ #appView #home>.quick-grid.eshraq-approved-quick{ grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;margin:0!important; } #appView #home>.quick-grid .quick{ min-height:118px!important;padding:18px 18px!important;border-radius:20px!important; background:#fff!important;border:1px solid #e3e9e4!important; box-shadow:0 8px 22px rgba(34,69,57,.055)!important; display:grid!important;grid-template-columns:52px 1fr!important; grid-template-areas:"icon title" "icon note"!important; align-items:center!important;text-align:right!important;column-gap:14px!important;row-gap:2px!important; } #appView #home>.quick-grid .quick span{ grid-area:icon!important;width:52px!important;height:52px!important;border-radius:16px!important; display:grid!important;place-items:center!important;background:#e2f4eb!important;color:#0b765f!important; font-size:1.35rem!important; } #appView #home>.quick-grid .quick:nth-child(2) span{background:#fbe9dc!important;color:#d57535!important} #appView #home>.quick-grid .quick:nth-child(3) span{background:#fff0c9!important;color:#d39708!important} #appView #home>.quick-grid .quick:nth-child(4) span{background:#e8efff!important;color:#466da8!important} #appView #home>.quick-grid .quick b{grid-area:title!important;font-size:1.02rem!important;align-self:end!important} #appView #home>.quick-grid .quick small{grid-area:note!important;font-size:.78rem!important;color:#75817c!important;align-self:start!important} /* الأقسام السفلية مثل المرجع */ #appView .eshraq-v190-section-head{align-items:center!important;margin-bottom:4px!important} #appView .eshraq-v190-section h3{font-size:1.32rem!important} #appView .eshraq-home-services-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important} #appView .eshraq-home-service{min-height:170px!important;padding:18px!important;border-radius:20px!important} #appView .eshraq-home-knowledge{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)!important;gap:18px!important} #appView .eshraq-home-article-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important} #appView .eshraq-home-article:nth-child(n+3){display:none!important} #appView .eshraq-home-article-media{height:145px!important;min-height:145px!important} #appView .eshraq-home-support{min-height:100%!important;border-radius:22px!important} #appView .eshraq-home-support-visual{height:150px!important;min-height:150px!important} #appView .eshraq-home-specialists-grid{gap:14px!important} #appView .eshraq-home-specialist{min-height:98px!important;padding:13px 14px!important} #appView #home>.card:not(.hero){display:none!important} /* Rail المرجعي */ @media(min-width:901px){ #appView.app-shell,#appView.eshraq-rail-collapsed.app-shell{padding-right:112px!important} #appView .bottom-nav,#appView.eshraq-rail-collapsed .bottom-nav{ width:112px!important;padding:10px 8px 16px!important;gap:7px!important; background:linear-gradient(180deg,#087161 0%,#0b6b5e 100%)!important; box-shadow:-8px 0 24px rgba(24,79,63,.11)!important; } #appView .bottom-nav .eshraq-rail-brand, #appView.eshraq-rail-collapsed .bottom-nav .eshraq-rail-brand{ width:100%!important;height:78px!important;min-height:78px!important;flex-basis:78px!important; } #appView .bottom-nav .eshraq-rail-brand img, #appView.eshraq-rail-collapsed .bottom-nav .eshraq-rail-brand img{ width:68px!important;height:68px!important;max-width:68px!important;max-height:68px!important; border-radius:16px!important;background:#fffdf5!important;padding:3px!important; } #appView .eshraq-rail-divider-toggle{display:none!important} #appView .bottom-nav>button, #appView.eshraq-rail-collapsed .bottom-nav>button{ width:88px!important;min-width:88px!important;min-height:68px!important; padding:6px 5px!important;display:flex!important;flex-direction:column!important; justify-content:center!important;gap:5px!important;border-radius:16px!important; } #appView .bottom-nav>button small, #appView.eshraq-rail-collapsed .bottom-nav>button small{ display:block!important;opacity:1!important;width:auto!important;max-width:82px!important; font-size:.73rem!important;line-height:1.15!important;text-align:center!important;white-space:normal!important; } #appView .bottom-nav>button.on,#appView .bottom-nav>button.active{ background:#fff!important;color:#0b6b5e!important;border-color:#fff!important; box-shadow:0 7px 18px rgba(0,0,0,.11)!important; } } /* استجابة الشاشات */ @media(max-width:1180px) and (min-width:901px){ #appView .eshraq-home-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:900px){ #appView .topbar{min-height:74px!important;padding:8px 12px!important} #appView .topbar .brand{order:1!important;min-width:0!important} #appView .topbar .brand img{width:48px!important;height:48px!important} #appView .eshraq-user-area{order:2!important;margin-inline-end:auto!important} #appView .eshraq-global-search{order:8!important} #appView #home>.quick-grid.eshraq-approved-quick{grid-template-columns:1fr 1fr!important} #appView .eshraq-home-services-grid{grid-template-columns:1fr 1fr!important} #appView .eshraq-home-knowledge{grid-template-columns:1fr!important} #appView .eshraq-home-article-grid{display:grid!important;grid-template-columns:1fr 1fr!important;overflow:visible!important} } @media(max-width:560px){ #appView #home>.quick-grid.eshraq-approved-quick,#appView .eshraq-home-services-grid,#appView .eshraq-home-article-grid{grid-template-columns:1fr!important} } #appView .eshraq-main-services-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:2px 2px -2px!important} #appView .eshraq-main-services-title h3{margin:0!important;font-size:1.45rem!important;color:#0f4f43!important;font-weight:950!important} #appView .eshraq-main-services-title p{margin:0!important;color:#77847f!important;font-size:.84rem!important} #appView #eshraqHomeServices190{display:none!important} @media(max-width:900px){#appView .eshraq-main-services-title{align-items:flex-start;flex-direction:column;gap:3px}} /* V262 approved visual shell — canonical final authority */ #appView{ background:#fbfaf6!important; } /* Top bar — reference layout: brand right, search center, beneficiary + bell left */ #appView .topbar{ position:sticky!important; top:0!important; z-index:500!important; min-height:88px!important; display:flex!important; align-items:center!important; gap:18px!important; padding:9px 24px!important; background:#fff!important; border-bottom:1px solid #e7ece8!important; box-shadow:0 4px 18px rgba(31,68,56,.05)!important; overflow:visible!important; } #appView .topbar .brand{ order:1!important; min-width:270px!important; display:flex!important; align-items:center!important; gap:13px!important; direction:rtl!important; } #appView .topbar .brand img{ width:72px!important; height:72px!important; max-width:72px!important; max-height:72px!important; padding:2px!important; border-radius:16px!important; background:#fff!important; object-fit:contain!important; } #appView .topbar .brand b{ font-size:1.08rem!important; color:#0b4e42!important; font-weight:950!important; } #appView .topbar .brand small{ color:#6e7d76!important; font-size:.74rem!important; font-weight:800!important; } #appView .eshraq-global-search{ order:2!important; flex:1 1 520px!important; max-width:620px!important; min-width:260px!important; margin-inline:auto!important; } #appView .eshraq-global-search input{ height:48px!important; border:1px solid #dbe5df!important; border-radius:24px!important; background:#fff!important; box-shadow:0 5px 18px rgba(34,72,58,.05)!important; } #appView .eshraq-user-area{ order:3!important; margin-inline-start:auto!important; margin-inline-end:0!important; display:flex!important; align-items:center!important; gap:8px!important; direction:ltr!important; } #appView .eshraq-user-profile{ order:1!important; direction:rtl!important; min-height:54px!important; padding:5px 11px!important; border-radius:18px!important; } #appView .eshraq-notify-top{ order:2!important; display:grid!important; visibility:visible!important; opacity:1!important; width:44px!important; height:44px!important; flex:0 0 44px!important; border-radius:14px!important; background:#fffaf0!important; border-color:#ead9a8!important; color:#a8750b!important; } #appView .eshraq-refresh-top{order:3!important} #appView .eshraq-user-avatar-visual, #appView .eshraq-user-avatar-img, #appView .eshraq-user-avatar-fallback{ width:44px!important; height:44px!important; } #appView .eshraq-user-avatar-visual{flex-basis:44px!important} #appView .eshraq-user-copy b{max-width:180px!important;font-size:.9rem!important} #appView .eshraq-user-copy small{font-size:.72rem!important} /* Content sizing */ #appView .content{ max-width:none!important; padding:24px 28px 72px!important; background:linear-gradient(180deg,#fbfaf6 0%,#f8f6ef 100%)!important; } #appView #home{gap:20px!important} /* Desktop rail — compact by default, expandable with the existing gold control. */ @media(min-width:901px){ #appView.app-shell{padding-right:220px!important;transition:padding-right .2s ease!important} #appView .bottom-nav{ width:220px!important; padding:12px 12px 20px!important; gap:7px!important; align-items:stretch!important; background:linear-gradient(180deg,#075f53 0%,#0b6b5e 58%,#07564c 100%)!important; border-left:0!important; box-shadow:-10px 0 28px rgba(20,70,57,.14)!important; overflow-x:visible!important; } #appView .bottom-nav .eshraq-rail-brand{ width:100%!important; height:90px!important; min-height:90px!important; flex:0 0 90px!important; margin:0!important; padding:7px!important; display:grid!important; place-items:center!important; border:0!important; border-radius:20px!important; background:rgba(255,255,255,.96)!important; box-shadow:0 8px 24px rgba(0,0,0,.10)!important; overflow:hidden!important; } #appView .bottom-nav .eshraq-rail-brand img{ width:78px!important; height:78px!important; max-width:78px!important; max-height:78px!important; padding:0!important; margin:0!important; border:0!important; border-radius:16px!important; background:transparent!important; object-fit:contain!important; filter:none!important; } #appView .bottom-nav>button{ width:100%!important; min-width:0!important; min-height:52px!important; padding:7px 9px!important; display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; gap:10px!important; border-radius:14px!important; color:#fff!important; background:transparent!important; border:1px solid transparent!important; } #appView .bottom-nav>button span{ width:38px!important; height:38px!important; min-width:38px!important; flex:0 0 38px!important; margin:0!important; border-radius:11px!important; } #appView .bottom-nav>button small{ display:block!important; opacity:1!important; overflow:visible!important; max-width:none!important; white-space:normal!important; text-overflow:clip!important; font-size:.86rem!important; line-height:1.2!important; font-weight:850!important; color:inherit!important; text-align:right!important; } #appView .bottom-nav>button.on, #appView .bottom-nav>button.active{ background:#fff!important; color:#0b6b5e!important; border-color:#fff!important; box-shadow:0 7px 18px rgba(0,0,0,.11)!important; } #appView .bottom-nav>button:hover{background:rgba(255,255,255,.09)!important} /* Folded state matches the approved screenshot 4. */ #appView.eshraq-rail-collapsed.app-shell{padding-right:94px!important} #appView.eshraq-rail-collapsed .bottom-nav{ width:94px!important; padding:10px 9px 18px!important; align-items:center!important; gap:7px!important; } #appView.eshraq-rail-collapsed .bottom-nav .eshraq-rail-brand{ width:76px!important; height:76px!important; min-height:76px!important; flex:0 0 76px!important; border-radius:50%!important; padding:4px!important; background:transparent!important; box-shadow:none!important; } #appView.eshraq-rail-collapsed .bottom-nav .eshraq-rail-brand img{ width:68px!important; height:68px!important; max-width:68px!important; max-height:68px!important; border-radius:50%!important; background:#fff!important; box-shadow:0 4px 14px rgba(0,0,0,.12)!important; } #appView .eshraq-rail-divider-toggle{ display:grid!important; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr)!important; align-items:center!important; gap:5px!important; width:100%!important; height:54px!important; position:relative!important; flex:0 0 54px!important; padding:0 4px!important; margin:6px 0 8px!important; background:transparent!important; } #appView .eshraq-rail-divider-line{ display:block!important; width:100%!important; height:1px!important; background:linear-gradient(90deg,rgba(225,189,84,.18),rgba(225,189,84,.92),rgba(225,189,84,.18))!important; border-radius:999px!important; } #appView .eshraq-rail-divider-slot{ position:relative!important; left:auto!important; top:auto!important; transform:none!important; width:44px!important; height:44px!important; display:grid!important; place-items:center!important; } #appView .eshraq-rail-divider-toggle .eshraq-rail-toggle{ position:relative!important; inset:auto!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; padding:0!important; margin:0!important; border-radius:50%!important; background:#f2c95d!important; color:#725206!important; border:2px solid #fff3c6!important; box-shadow:0 0 0 2px #d8b34c,0 6px 16px rgba(0,0,0,.16)!important; } #appView.eshraq-rail-collapsed .bottom-nav>button{ width:70px!important; min-width:70px!important; min-height:58px!important; padding:7px!important; justify-content:center!important; border-radius:15px!important; } #appView.eshraq-rail-collapsed .bottom-nav>button small{display:none!important} #appView.eshraq-rail-collapsed .bottom-nav>button:hover::after, #appView.eshraq-rail-collapsed .bottom-nav>button:focus-visible::after{ opacity:1!important; } } /* Main quick actions keep the approved 4-card rhythm. */ #appView #home>.quick-grid.eshraq-approved-quick{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:16px!important; margin:0!important; } #appView #home>.quick-grid .quick{ min-height:116px!important; padding:17px 18px!important; border-radius:20px!important; background:#fff!important; border:1px solid #e4e9e5!important; box-shadow:0 8px 22px rgba(34,69,57,.055)!important; } /* Articles/support — remove the broken black media block and keep content readable. */ #appView .eshraq-home-knowledge{ display:grid!important; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr)!important; gap:18px!important; align-items:stretch!important; } #appView .eshraq-home-article-grid{ display:grid!important; grid-template-columns:1fr!important; gap:12px!important; min-height:0!important; } #appView .eshraq-home-article{ display:grid!important; grid-template-columns:170px minmax(0,1fr)!important; min-height:150px!important; border-radius:20px!important; } #appView .eshraq-home-article:nth-child(n+3){display:none!important} #appView .eshraq-home-article-media{ width:170px!important; height:100%!important; min-height:150px!important; } #appView .eshraq-home-support{ display:flex!important; flex-direction:column!important; justify-content:center!important; visibility:visible!important; opacity:1!important; min-height:100%!important; padding:26px!important; border:1px solid #e4e9e5!important; border-radius:22px!important; background:linear-gradient(145deg,#fffdf8,#f3f8f4)!important; box-shadow:0 10px 28px rgba(46,69,59,.06)!important; } #appView .eshraq-home-support-visual{display:none!important} #appView .eshraq-home-support-content{ padding:0!important; background:transparent!important; } #appView .eshraq-home-support-content button{ align-self:flex-start!important; border:0!important; border-radius:12px!important; background:#e8f6ef!important; color:#0b6b5e!important; padding:9px 14px!important; font-weight:900!important; } /* Toasts always above sheets/modals. */ body>#toast{ position:fixed!important; inset:auto 50% 24px auto!important; transform:translateX(50%)!important; z-index:2147483000!important; max-width:min(92vw,560px)!important; } .eshraq-modal-toast{z-index:2147483001!important} /* Responsive */ @media(max-width:1180px) and (min-width:901px){ #appView .eshraq-home-knowledge{grid-template-columns:1fr!important} #appView .eshraq-home-support{min-height:auto!important} } @media(max-width:900px){ #appView.app-shell, #appView.eshraq-rail-collapsed.app-shell{padding-right:0!important} #appView .topbar{ min-height:74px!important; padding:8px 12px!important; gap:8px!important; flex-wrap:wrap!important; } #appView .topbar .brand{order:1!important;min-width:0!important;flex:1 1 auto!important} #appView .topbar .brand img{width:50px!important;height:50px!important} #appView .eshraq-user-area{order:2!important;margin-inline-start:auto!important} #appView .eshraq-global-search{ order:8!important; flex:1 1 100%!important; width:100%!important; max-width:none!important; min-width:0!important; margin:2px 0 0!important; } #appView .content{padding:14px 12px 94px!important} #appView #home>.quick-grid.eshraq-approved-quick{grid-template-columns:1fr 1fr!important} #appView .eshraq-home-knowledge{grid-template-columns:1fr!important} #appView .eshraq-home-article{ grid-template-columns:120px minmax(0,1fr)!important; min-height:130px!important; } #appView .eshraq-home-article-media{width:120px!important;min-height:130px!important} body>#toast{inset:auto 12px 88px 12px!important;transform:none!important;max-width:none!important} } @media(max-width:560px){ #appView .topbar .brand div{display:none!important} #appView .eshraq-user-copy b{max-width:108px!important} #appView #home>.quick-grid.eshraq-approved-quick{grid-template-columns:1fr!important} } /* V266 final rail authority — exact center line, transparent logo and More. */ @media(min-width:901px){ #appView .bottom-nav .eshraq-rail-brand, #appView.eshraq-rail-collapsed .bottom-nav .eshraq-rail-brand{ background:transparent!important; background-image:none!important; border:0!important; box-shadow:none!important; overflow:visible!important; } #appView .bottom-nav .eshraq-rail-brand img, #appView.eshraq-rail-collapsed .bottom-nav .eshraq-rail-brand img{ background:transparent!important; border:0!important; box-shadow:none!important; } #appView .eshraq-rail-divider-toggle, #appView.eshraq-rail-collapsed .eshraq-rail-divider-toggle{ display:block!important; position:relative!important; width:100%!important; height:54px!important; flex:0 0 54px!important; margin:4px 0 6px!important; padding:0!important; background:transparent!important; } #appView .eshraq-rail-divider-line{ display:block!important; position:absolute!important; top:50%!important; transform:translateY(-50%)!important; height:1px!important; width:calc(50% - 30px)!important; opacity:1!important; visibility:visible!important; background:#d8b34c!important; } #appView .eshraq-rail-divider-line-start{right:4px!important;left:auto!important} #appView .eshraq-rail-divider-line-end{left:4px!important;right:auto!important} #appView .eshraq-rail-divider-slot{ position:absolute!important; left:50%!important; top:50%!important; transform:translate(-50%,-50%)!important; width:44px!important; height:44px!important; display:grid!important; place-items:center!important; margin:0!important; padding:0!important; } #appView .eshraq-rail-divider-toggle .eshraq-rail-toggle{ position:absolute!important; left:50%!important; top:50%!important; transform:translate(-50%,-50%)!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; display:grid!important; place-items:center!important; margin:0!important; padding:0!important; border-radius:50%!important; background:#f2c95d!important; color:#725206!important; border:2px solid #fff3c6!important; box-shadow:0 0 0 2px #d8b34c,0 5px 14px rgba(0,0,0,.14)!important; z-index:2!important; } #appView .bottom-nav>button[data-page="more"].on, #appView .bottom-nav>button[data-page="more"].active{ background:transparent!important; border-color:transparent!important; color:#fff!important; box-shadow:none!important; } #appView .bottom-nav>button[data-page="more"].on span, #appView .bottom-nav>button[data-page="more"].active span{ background:transparent!important; color:#fff!important; } } /* V275 — single Home Hero authority. No layered Hero overrides below this point. */ #appView #home{overflow-anchor:none!important} #appView #home .eshraq-hero-pillars{ grid-area:pillars!important; display:flex!important; flex-wrap:wrap!important; justify-content:flex-end!important; gap:8px!important; max-width:360px!important; margin:0!important; } #appView #home .eshraq-hero-pillars span{ display:inline-flex!important; align-items:center!important; gap:5px!important; font-size:.78rem!important; } #appView #home .eshraq-hero-pillars i{ width:30px!important; height:30px!important; border-radius:10px!important; display:grid!important; place-items:center!important; } #appView .content{overflow-anchor:none!important} #appView #eshraqHomeArticles190, #appView #eshraqHomeSpecialistsGrid190, #appView .eshraq-home-support{overflow-anchor:none!important} @media(max-width:760px){ #appView #home .eshraq-hero-pillars{ justify-content:flex-start!important; max-width:none!important; } } @media(max-width:900px){ } /* V276 — single Home/Topbar authority. Legacy Hero/logout selectors removed above. */ #appView #home{ overflow-anchor:none!important; gap:18px!important; } #appView #home>.hero.eshraq-approved-hero{ display:block!important; position:relative!important; isolation:isolate!important; width:100%!important; min-height:0!important; height:auto!important; aspect-ratio:auto!important; margin:0!important; padding:0!important; overflow:hidden!important; border:0!important; border-radius:26px!important; background:#f7f3ea!important; box-shadow:0 14px 34px rgba(35,70,58,.10)!important; } #appView #home>.hero.eshraq-approved-hero>.eshraq-hero-art{ display:block!important; position:static!important; z-index:auto!important; width:100%!important; max-width:none!important; height:auto!important; max-height:none!important; aspect-ratio:1499/382!important; margin:0!important; padding:0!important; object-fit:cover!important; object-position:center!important; visibility:visible!important; opacity:1!important; transform:none!important; clip:auto!important; clip-path:none!important; border:0!important; border-radius:0!important; background:#f7f3ea!important; } #appView #eshraqHomeWelcome276.eshraq-home-welcome{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:16px!important; width:100%!important; min-height:64px!important; margin:0!important; padding:12px 18px!important; border:1px solid rgba(11,107,94,.13)!important; border-radius:18px!important; background:linear-gradient(135deg,#fffdf8,#f3faf6)!important; box-shadow:0 7px 20px rgba(36,66,55,.055)!important; direction:rtl!important; } #appView #eshraqHomeWelcome276 .eshraq-home-welcome-copy{ display:grid!important; gap:3px!important; min-width:0!important; } #appView #eshraqHomeWelcome276 #welcomeName{ display:block!important; margin:0!important; padding:0!important; color:#0b5f50!important; font-size:clamp(.96rem,1.3vw,1.12rem)!important; line-height:1.45!important; font-weight:950!important; white-space:normal!important; } #appView #eshraqHomeWelcome276 small{ color:#718078!important; font-size:.76rem!important; font-weight:800!important; } #appView #eshraqHomeWelcome276 .progress-wrap{ flex:0 1 420px!important; width:min(420px,42vw)!important; max-width:420px!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; } #appView .eshraq-user-area{ direction:ltr!important; } #appView .eshraq-logout-top{ order:1!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:40px!important; padding:7px 12px!important; border:1px solid #e6c7c3!important; border-radius:11px!important; background:#fff4f2!important; color:#a23f35!important; font-size:.8rem!important; font-weight:900!important; cursor:pointer!important; white-space:nowrap!important; visibility:visible!important; opacity:1!important; } #appView .eshraq-notify-top{order:2!important} #appView .eshraq-refresh-top{order:3!important} #appView .eshraq-user-profile{order:4!important} #appView .eshraq-logout-top:hover{background:#fde9e6!important} @media(max-width:900px){ #appView #eshraqHomeWelcome276.eshraq-home-welcome{ align-items:flex-start!important; flex-direction:column!important; min-height:0!important; padding:11px 14px!important; } #appView #eshraqHomeWelcome276 .progress-wrap{ width:100%!important; max-width:none!important; flex-basis:auto!important; } #appView .eshraq-logout-top{ min-height:36px!important; padding:6px 9px!important; font-size:.74rem!important; } }