/* ===== هيدر + فوتر أزرق موحّد لكل الموقع (hf-blue.css) =====
   بيتحمّل آخر CSS في: كل الصفحات العامة + الدخول/الفروع + صفحة التطبيقات + شاشات التطبيق + أدمن الاشتراكات.
   اللون من المتغيّرات تحت (--hf-bg) — غيّره من هنا بس. للتراجع: شيل سطر <link hf-blue.css> من الصفحات. */
:root{--hf-bg:linear-gradient(120deg,#1a94e6 0%,#0a85da 50%,#0078d0 100%);--hf-bg2:#0a85da;--hf-r:6px;--hf-h:56px;--hf-gap:14px;--hf-sh:0 6px 16px rgba(0,120,208,.28);--hf-on:#fff;--hf-soft:rgba(255,255,255,.18);--hf-panel:#fff;--hf-panel-ink:#1f2a44}
html.dark{--hf-bg:linear-gradient(120deg,#08327f 0%,#052063 55%,#031447 100%);--hf-bg2:#0a3a94;--hf-sh:0 4px 14px rgba(0,0,0,.4);--hf-panel:#1b2230;--hf-panel-ink:#e8eefc}
/* كل القواعد جوّه @layer: الـ!important في الـlayer بيغلب أي !important برّه الـlayer مهما كانت قوة الـselector (من غير تكديس :not) */
@layer hf{
html body header.nav{display:block!important;position:fixed!important;top:0!important;inset-inline:0!important;width:auto!important;max-width:none!important;margin:0!important;background:var(--hf-bg)!important;border:0!important;border-radius:0!important;box-shadow:var(--hf-sh)!important;backdrop-filter:none!important}
html body header.nav .nav-in{background:transparent!important;height:52px!important;min-height:52px!important}
html body header.nav .brand img, html body header.nav .eg-mark, html body header.nav .eg-word{filter:none!important}
html body header.nav .eg-mark{width:auto!important;height:34px!important;max-width:none!important}
html body header.nav .eg-word{width:auto!important;height:16px!important;max-width:none!important}
html body header.nav .btn.wt{background:#fff!important;color:#0a3fb0!important;border:1.5px solid #fff!important;box-shadow:none!important}
html body header.nav .btn.dk{background:#fff!important;color:#0a3fb0!important;border:1.5px solid #fff!important;box-shadow:none!important}
html body header.nav .burger i, html body header.nav .burger i:before, html body header.nav .burger i:after{background:#fff!important}
@media(min-width:861px){
html body header.nav .links a{color:#fff!important}
html body header.nav .links a:hover, html body header.nav .links a.on{background:var(--hf-soft)!important;color:#fff!important}
}
@media(max-width:860px){
html body header.nav.open .links{background:var(--hf-panel)!important;border-color:transparent!important;top:52px!important}
html body header.nav.open .links a{color:var(--hf-panel-ink)!important}
}
html.dark body header.nav{background:var(--hf-bg)!important;border:0!important}
html.dark body header.nav .btn.wt{background:#e3f0ff!important;color:#052063!important;border-color:#e3f0ff!important}
html.dark body header.nav .btn.dk{background:#e3f0ff!important;color:#052063!important;border-color:#e3f0ff!important}
html body .ft2{display:block!important;align-self:stretch!important;width:calc(100% - 2*var(--hf-gap))!important;max-width:none!important;box-sizing:border-box!important;margin:30px var(--hf-gap) var(--hf-gap)!important;background:var(--hf-bg)!important;color:#fff!important;border:0!important;border-radius:18px!important;box-shadow:var(--hf-sh)!important;overflow:hidden!important}
html body .ft2:before, html body .ft2:after{background:none!important;content:none!important}
html body .ft2 h3, html body .ft2 h4{color:#fff!important}
html body .ft2 li a, html body .ft2-brand p, html body .ft2-bot span{color:rgba(255,255,255,.92)!important}
html body .ft2 li a:hover{color:#fff!important}
html body .ft2 h3:after, html body .ft2 h4:after, html body .ft2 h3:before{background:rgba(255,255,255,.65)!important}
html body .ft2 .btn, html body .ft2 a.btn{background:#fff!important;color:#0a3fb0!important;border:1.5px solid #fff!important;box-shadow:none!important}
html body .ft2 li a::before{border-color:#fff!important}
html body .ft2-bot{box-shadow:none!important;clip-path:none!important;background:transparent!important;border-top:1px solid rgba(255,255,255,.35)!important}
html body .ft2 .eg-ft-logo img{filter:none!important;width:210px!important;height:auto!important}
html.dark body .ft2{background:var(--hf-bg)!important}
html body.lgpage .zhf-hd{display:flex!important;width:calc(100% - 2*var(--hf-gap))!important;margin:8px var(--hf-gap) 0!important;min-height:var(--hf-h)!important;padding:0 22px!important;background:var(--hf-bg)!important;color:#fff!important;border-radius:var(--hf-r)!important;box-shadow:var(--hf-sh)!important;box-sizing:border-box!important;align-items:center!important;justify-content:space-between!important}
html body.lgpage .zhf-hd b{font-size:18px!important;font-weight:700!important;color:#fff!important}
html body.lgpage .zhf-hd span{font-size:14px!important;color:rgba(255,255,255,.92)!important;direction:rtl!important}
html body.lgpage .lg-foot{display:block!important;width:calc(100% - 2*var(--hf-gap))!important;margin:auto var(--hf-gap) var(--hf-gap)!important;padding:20px 24px!important;background:var(--hf-bg)!important;color:#fff!important;border:0!important;border-radius:18px!important;box-shadow:var(--hf-sh)!important;box-sizing:border-box!important;font-size:14px!important;text-align:center!important}
html.dark body.lgpage .zhf-hd, html.dark body.lgpage .lg-foot{background:var(--hf-bg)!important}
html body :is(.ap-top,.topbar){background:var(--hf-bg)!important;border:0!important;border-bottom:0!important;border-radius:0!important;margin:0!important;width:auto!important;height:var(--hf-h)!important;min-height:var(--hf-h)!important;box-shadow:var(--hf-sh)!important;box-sizing:border-box!important;color:#fff!important}
html.dark body :is(.ap-top,.topbar){background:var(--hf-bg)!important}
html body :is(.ap-top,.topbar) :is(.tw-hi,.twh-it,.icon-btn,.menu-btn,.tw-bell,.tw-bell *,.twh-ic,.twh-lb,.ap-gear){color:#fff!important;background:transparent!important;border-color:transparent!important}
html body :is(.ap-top,.topbar) :is(.tw-hi,.twh-it,.icon-btn,.menu-btn,.tw-bell,.twh-ic,.twh-lb,.ap-gear) svg, html body :is(.ap-top,.topbar) .tw-bell svg{color:#fff!important;stroke:#fff!important}
html body :is(.ap-top,.topbar) :is(.tw-hi,.twh-ic,.icon-btn,.menu-btn,.tw-bell,.ap-gear) :is(path,circle,rect,line,polyline,polygon,ellipse){stroke:currentColor!important;color:#fff!important}
html body :is(.ap-top,.topbar) :is(.tw-hi,.twh-it,.icon-btn,.menu-btn,.tw-bell,.tw-co,.tw-ub,.twh-lb,.tw-ct,.tw-av,.page-title,.user-name){-webkit-text-fill-color:#fff!important;text-shadow:none!important}
html body :is(.ap-top,.topbar) :is(.tw-hi,.twh-it,.icon-btn,.menu-btn,.tw-bell):hover{background:var(--hf-soft)!important}
html body :is(.ap-top,.topbar) #twDarkTop .mn{fill:#fff!important;stroke:none!important}
html body .topbar :is(.tw-an-grid,.tw-an-app,.tw-an-ttl,.tw-an-b,.ap-ni){color:#fff!important;background:transparent!important;-webkit-text-fill-color:#fff!important}
html body .topbar :is(.tw-an-grid,.tw-an-app,.tw-an-ttl,.tw-an-b,.ap-ni) :is(svg,path,circle,rect,line,polyline){color:#fff!important;stroke:currentColor!important}
html body .topbar .tw-an-m.open>.tw-an-b, html body .topbar .tw-an-b:hover, html body .topbar .tw-an-grid:hover, html body .topbar .tw-an-m.cur>.tw-an-b{background:var(--hf-soft)!important;color:#fff!important}
html body .topbar .tw-an-d{color:var(--hf-panel-ink)!important}
html body :is(.ap-top,.topbar) .tw-co{background:transparent!important;border:2px solid #fff!important;color:#fff!important;border-radius:12px!important;box-shadow:none!important}
html body :is(.ap-top,.topbar) .tw-co .tw-ct, html body :is(.ap-top,.topbar) .tw-co *{color:#fff!important;font-weight:700!important}
html body :is(.ap-top,.topbar) .ap-tools{border-color:transparent!important;box-shadow:none!important}
html body :is(.ap-top,.topbar) .tw-co{min-height:40px!important;padding-inline:18px!important;display:inline-flex!important;align-items:center!important}
html body :is(.ap-top,.topbar) .tw-co .tw-ct{font-size:16px!important;max-width:none!important}
html body :is(.ap-top,.topbar) .tw-ub{background:rgba(255,255,255,.28)!important;border:2px solid rgba(255,255,255,.6)!important;color:#fff!important;box-shadow:none!important}
html body :is(.ap-top,.topbar) .tw-ub{width:42px!important;height:42px!important;border-radius:50%!important;background-image:none!important}
html body :is(.ap-top,.topbar) .tw-ub .tw-av{border-radius:50%!important;color:#fff!important;background:transparent!important}
html body .topbar .search{background:rgba(255,255,255,.2)!important;border:0!important;color:#fff!important}
html body .topbar .search input{color:#fff!important}
html body .topbar .search input::placeholder{color:rgba(255,255,255,.8)!important}
html body .topbar .search svg, html body .topbar .user .chev{color:#fff!important;stroke:#fff!important}
html body .topbar .user, html body .topbar .user .user-name{color:#fff!important;background:transparent!important;border-color:transparent!important}
html body .topbar .user .avatar{background:rgba(255,255,255,.28)!important;color:#fff!important;border:2px solid rgba(255,255,255,.6)!important}
html body .topbar .page-title, html body .topbar .crumbs, html body .topbar .crumbs a{color:#fff!important}
html body header.st-top{background:var(--hf-bg)!important;border-radius:var(--hf-r)!important;margin:8px var(--hf-gap)!important;padding:0 22px!important;min-height:var(--hf-h)!important;box-shadow:var(--hf-sh)!important;color:#fff!important}
html body header.st-top a, html body header.st-top a span{color:#fff!important;-webkit-text-fill-color:#fff!important}
html body header.st-top a svg{filter:brightness(0) invert(1)!important}
html.dark body header.st-top{background:var(--hf-bg)!important}
html body :is(.hv-foot,.hf-foot){display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;flex-wrap:wrap!important;width:auto!important;max-width:none!important;margin:28px var(--hf-gap) var(--hf-gap)!important;padding:0 28px!important;min-height:var(--hf-h)!important;background:var(--hf-bg)!important;color:#fff!important;border:0!important;border-radius:var(--hf-r)!important;box-shadow:var(--hf-sh)!important;box-sizing:border-box!important;font-size:14px!important;text-align:start!important}
html body :is(.hv-foot,.hf-foot) span{color:#fff!important;font-weight:inherit!important}
html body :is(.hv-foot,.hf-foot) span:last-child{font-weight:700!important}
html.dark body :is(.hv-foot,.hf-foot){background:var(--hf-bg)!important}
@media(max-width:640px){:root{--hf-gap:10px}
html body :is(.ap-top,.topbar){margin:6px var(--hf-gap)!important;padding-inline:10px!important}
html body :is(.hv-foot,.hf-foot){padding:12px 16px!important;justify-content:center!important;text-align:center!important}
html body .ft2{margin-top:22px!important}
}
}
@media print{.hf-foot{display:none!important}}

/* صفحة «تثبيت وحدة» (app/_apps.php): نفس الهيدر الأزرق */
@layer hf{
html body header.st-top{background:var(--hf-bg)!important;border:0!important;border-radius:0!important;margin:0!important;min-height:var(--hf-h)!important;padding:0 24px!important;box-shadow:var(--hf-sh)!important;box-sizing:border-box!important;color:#fff!important}
html body header.st-top a, html body header.st-top a span{color:#fff!important;-webkit-text-fill-color:#fff!important}
html body header.st-top svg{color:#fff!important}
html body header.st-top .st-back{opacity:.95}
html body header.st-top a:hover{opacity:.85}
html.dark body header.st-top{background:var(--hf-bg)!important}
@media(max-width:640px){html body header.st-top{padding:0 14px!important}}
}

/* ===== هيدر صفحة التطبيقات (.ap-top) — أزرق فاتح بدل الأزرق الغامق، والنص/الأيقونات بلون كحلي متناسق =====
   الوضع الليلي ما اتغيّرش. لتغيير اللون: عدّل المتغيّرات اللي تحت. للتراجع: امسح البلوك ده كله (من هنا لآخر الملف). */
:root{--aph-bg:linear-gradient(120deg,#d9e8fd 0%,#e6f0fe 50%,#f2f6ff 100%);--aph-ink:#1e3a66;--aph-accent:#1565c0;--aph-hover:rgba(21,101,192,.10);--aph-line:#b9d0f3;--aph-sh:0 1px 0 rgba(120,160,220,.30),0 6px 16px rgba(30,100,200,.08)}
@layer hf{
html:not(.dark) body .ap-top{background:var(--aph-bg)!important;box-shadow:var(--aph-sh)!important;color:var(--aph-ink)!important}
html:not(.dark) body .ap-top :is(.tw-hi,.twh-it,.icon-btn,.menu-btn,.tw-bell,.tw-bell *,.twh-ic,.twh-lb,.ap-gear){color:var(--aph-ink)!important;-webkit-text-fill-color:var(--aph-ink)!important;background:transparent!important;border-color:transparent!important}
html:not(.dark) body .ap-top :is(.tw-hi,.twh-it,.icon-btn,.menu-btn,.tw-bell,.twh-ic,.twh-lb,.ap-gear) svg, html:not(.dark) body .ap-top .tw-bell svg{color:var(--aph-ink)!important;stroke:var(--aph-ink)!important}
html:not(.dark) body .ap-top :is(.tw-hi,.twh-ic,.icon-btn,.menu-btn,.tw-bell,.ap-gear) :is(path,circle,rect,line,polyline,polygon,ellipse){stroke:currentColor!important;color:var(--aph-ink)!important}
html:not(.dark) body .ap-top :is(.tw-hi,.twh-it,.icon-btn,.menu-btn,.tw-bell):hover{background:var(--aph-hover)!important}
html:not(.dark) body .ap-top #twDarkTop .mn{fill:var(--aph-ink)!important;stroke:none!important}
html:not(.dark) body .ap-top .tw-co{background:rgba(255,255,255,.55)!important;border:1.5px solid var(--aph-accent)!important;color:var(--aph-accent)!important;box-shadow:none!important}
html:not(.dark) body .ap-top .tw-co .tw-ct, html:not(.dark) body .ap-top .tw-co *{color:var(--aph-accent)!important;-webkit-text-fill-color:var(--aph-accent)!important}
html:not(.dark) body .ap-top .tw-ub{background:#fff!important;background-image:none!important;border:2px solid var(--aph-line)!important;color:var(--aph-accent)!important;box-shadow:none!important}
html:not(.dark) body .ap-top .tw-ub .tw-av{color:var(--aph-accent)!important;-webkit-text-fill-color:var(--aph-accent)!important;background:transparent!important}
html:not(.dark) body .ap-top .page-title, html:not(.dark) body .ap-top .user-name{color:var(--aph-ink)!important;-webkit-text-fill-color:var(--aph-ink)!important}
}

/* ===== صفحة التطبيقات: القايمة الجانبية (فيها البحث) تطلع لاخر لغاية الهيدر (لازقة فيه) =====
   للتراجع: امسح البلوك ده كله (من هنا لآخر الملف). */
@layer hf{
@media(min-width:900px){
html body.hv2 .ap-shell{padding-top:0!important;align-items:flex-start!important}
html body.hv2 .ap-shell>.ap-wrap{padding-top:18px!important}
html body.hv2 .ap-shell>.ap-nav,html body.hv2 .ap-shell>.ap-nav.has-apps{margin-top:calc(-1*var(--hdr-mb,6px))!important;top:0!important;height:100vh!important;min-height:560px!important;border-top-width:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}
}
@media(max-width:899px){
html body.hv2 .ap-shell{padding-top:0!important}
html body.hv2 .ap-shell>.ap-nav{margin-top:calc(-1*var(--hdr-mb,6px))!important}
}
}

/* ===== نفس الأزرق الفاتح على هيدر كل صفحات النظام (.topbar) وهيدر الإعدادات (.st-top) — الليلي ما اتغيّرش =====
   اللون من نفس متغيرات --aph-*. للتراجع: امسح البلوك ده كله (من هنا لآخر الملف). */
@layer hf{
html:not(.dark) body :is(.topbar,header.st-top){background:var(--aph-bg)!important;box-shadow:var(--aph-sh)!important;color:var(--aph-ink)!important}
html:not(.dark) body :is(.topbar,header.st-top) :is(.tw-hi,.twh-it,.icon-btn,.menu-btn,.tw-bell,.tw-bell *,.twh-ic,.twh-lb,.ap-gear,.tw-an-grid,.tw-an-app,.tw-an-ttl,.tw-an-b,.tw-an-pt,.page-title,.user-name,.user){color:var(--aph-ink)!important;-webkit-text-fill-color:var(--aph-ink)!important;background:transparent!important;border-color:transparent!important}
html:not(.dark) body :is(.topbar,header.st-top) :is(.tw-hi,.twh-it,.icon-btn,.menu-btn,.tw-bell,.twh-ic,.twh-lb,.ap-gear) svg,html:not(.dark) body .topbar .tw-bell svg{color:var(--aph-ink)!important;stroke:var(--aph-ink)!important}
html:not(.dark) body :is(.topbar,header.st-top) :is(.tw-hi,.twh-ic,.icon-btn,.menu-btn,.tw-bell,.ap-gear) :is(path,circle,rect,line,polyline,polygon,ellipse){stroke:currentColor!important;color:var(--aph-ink)!important}
html:not(.dark) body :is(.topbar,header.st-top) :is(.tw-hi,.twh-it,.icon-btn,.menu-btn,.tw-bell,.tw-an-b,.tw-an-grid):hover{background:var(--aph-hover)!important}
html:not(.dark) body .topbar :is(.tw-an-m.open>.tw-an-b,.tw-an-m.cur>.tw-an-b){background:var(--aph-hover)!important;color:var(--aph-accent)!important}
html:not(.dark) body :is(.topbar,header.st-top) #twDarkTop .mn{fill:var(--aph-ink)!important;stroke:none!important}
html:not(.dark) body :is(.topbar,header.st-top) .tw-co{background:rgba(255,255,255,.55)!important;border:1.5px solid var(--aph-accent)!important;color:var(--aph-accent)!important;box-shadow:none!important}
html:not(.dark) body :is(.topbar,header.st-top) .tw-co .tw-ct,html:not(.dark) body :is(.topbar,header.st-top) .tw-co *{color:var(--aph-accent)!important;-webkit-text-fill-color:var(--aph-accent)!important}
html:not(.dark) body :is(.topbar,header.st-top) .tw-ub{background:#fff!important;background-image:none!important;border:2px solid var(--aph-line)!important;color:var(--aph-accent)!important;box-shadow:none!important}
html:not(.dark) body :is(.topbar,header.st-top) .tw-ub .tw-av,html:not(.dark) body .topbar .user .avatar{color:var(--aph-accent)!important;-webkit-text-fill-color:var(--aph-accent)!important;background:#fff!important;border:2px solid var(--aph-line)!important}
html:not(.dark) body .topbar .search{background:#fff!important;border:1px solid var(--aph-line)!important;color:var(--aph-ink)!important}
html:not(.dark) body :is(.ap-top,.topbar) :is(.ap-hd-logo,.twh-logo,.tw-logo,.brand) img{filter:brightness(0) saturate(100%) invert(18%) sepia(45%) saturate(1500%) hue-rotate(196deg) brightness(95%)!important}
}