/* Two independent sidebars and a white horizontal header: user reference 2. */
body:has(#appPanel:not(.hidden)){background:#f3f7fb}
body:has(#appPanel:not(.hidden)) .hero{background:#fff;color:#173557;border-color:#e4ebf3;border-radius:0;box-shadow:0 2px 9px #1735570b;padding:0}
body:has(#appPanel:not(.hidden)) .hero .wrap{padding:0 12px}
body:has(#appPanel:not(.hidden)) .brandrow{gap:12px;align-items:stretch}
body:has(#appPanel:not(.hidden)) .brand-lockup{background:#051d32;width:250px;min-height:86px;box-sizing:border-box;padding:16px 12px;margin:0;justify-content:center}
body:has(#appPanel:not(.hidden)) .brand{font-size:17px;color:#f2f6fc}
body:has(#appPanel:not(.hidden)) .brand-symbol{width:36px;height:42px}
body:has(#appPanel:not(.hidden)) .brand-symbol svg{width:34px;height:40px}
.layout-topbar{align-items:center;gap:9px;color:#25486b;min-width:0;padding:8px 10px}
.layout-topbar>.layout-nav-item,.layout-topbar>.home-logout{color:#284460;min-height:61px;justify-content:center;border-radius:8px;font-weight:600}
.layout-topbar>.layout-nav-item:hover,.layout-topbar>.home-logout:hover{background:#edf5ff;color:#0062df}
.layout-topbar .layout-icon{color:#1872db}
.layout-topbar [data-layout-action="utilities"] .layout-icon{color:#20ac75}
.layout-topbar .layout-clock{background:#eef5ff;border-color:#d9e8fa;color:#225891;font-size:20px;min-width:100px}
.layout-calendar{color:#345c87}
.layout-global-search{background:#eff4fa!important;border:1px solid #e8eff7!important;color:#294e75!important;border-radius:25px!important}
.layout-global-search::placeholder{color:#8ea1b9}
.layout-search-wrap{flex-basis:240px}
.mainwrap:has(#appPanel:not(.hidden)){margin-top:12px}
.layout-side.saleh-left{background:linear-gradient(160deg,#051d32,#03182a);border:1px solid #0a2945;min-height:calc(100vh - 112px);border-radius:0 0 13px 13px;color:#d5e3f0;padding:0 9px 15px}
.saleh-left .layout-side-title{color:#eaf4ff;background:#08243e;border-color:#153550;font-size:18px!important;padding:12px}
.saleh-left .layout-nav-item{background:transparent;border-color:transparent;color:#d6e2ee;font-size:14px;font-weight:500;min-height:44px;border-radius:8px}
.saleh-left .layout-nav-item:hover{background:#123958;border-color:#204868;color:#fff}
.saleh-left .layout-nav-item[data-layout-action="home"]{background:linear-gradient(100deg,#006aff,#03468f);border-color:#0d62b8;color:#fff;box-shadow:0 4px 11px #00000015}
.saleh-left .layout-icon,.saleh-left .layout-nav-item:first-of-type .layout-icon{color:#48a8ff;background:transparent;border:0}
.saleh-left [data-layout-action="home"] .layout-icon{color:#fff}
.saleh-left [data-layout-action="academy"] .layout-icon{color:#45a7ff}
.saleh-left [data-layout-action="software"] .layout-icon{color:#bc52ff}
.saleh-left [data-layout-action="games"] .layout-icon{color:#9873ff}
.saleh-left [data-layout-action="workspace"] .layout-icon{color:#ffbe52}
.saleh-left [data-layout-action="documents"] .layout-icon{color:#40c8d7}
.saleh-left [data-layout-action="image"] .layout-icon{color:#56c995}
.saleh-left [data-layout-action="reader"] .layout-icon{color:#b694ef}
.saleh-left .layout-nav-group{border:0;border-top:1px solid #18354d;border-radius:0;background:transparent;padding:9px 3px 5px;margin-top:9px}
.saleh-left .layout-nav-group>summary{color:#eef5fc;font-size:15px;min-height:40px;padding:5px 0}
.saleh-left .layout-nav-group>summary .layout-icon{color:#3bd09b}
.saleh-left .layout-nav-group>.layout-nav-item{background:transparent;border:0;color:#b9ccdf;font-size:12px!important;padding:6px 9px!important;min-height:36px;font-weight:400}
.saleh-left .layout-nav-group>.layout-nav-item:hover{background:#123958;color:#fff}
.saleh-left .layout-nav-group>.layout-nav-item .layout-icon{background:transparent;color:#61aeeb}
.saleh-left .layout-nav-group summary::marker{color:#7194b6}
.layout-side.cafe-right{background:#f8fbff;border-color:#e4edf6;box-shadow:none;padding:0 9px 12px}
.cafe-right .layout-side-title{background:#fff;border-color:#e5edf7;color:#12385c}
.cafe-right .layout-nav-group{background:#fff;border-color:#e5edf7;border-radius:12px;margin-top:12px;padding:8px 7px;box-shadow:0 3px 8px #20476b05}
.cafe-right .layout-nav-group>summary{color:#254561;font-size:15px}
.cafe-right .layout-nav-item{background:#fff;border-color:#e8eff6;color:#47617c;min-height:43px}
.cafe-right .layout-nav-group>.layout-nav-item{background:#f2f7fd;color:#486781;padding:8px!important;font-size:12px!important;margin-top:5px;min-height:36px}
.cafe-right .layout-icon,.cafe-right .layout-nav-group>.layout-nav-item .layout-icon{color:#167ae0;background:#eaf4ff;border-color:#daeafa}
.cafe-right .layout-nav-item:hover{background:#eaf4ff;border-color:#bddbfa;color:#1264b7}
.home-dashboard{background:#fff!important}
.layout-service-card{box-shadow:0 3px 10px #294c7005}
.home-orders,.home-notes{background:#fff;border-color:#e7eef6}
@media(min-width:801px) and (max-width:1300px){body:has(#appPanel:not(.hidden)) .brand-lockup{width:210px}body:has(#appPanel:not(.hidden)) .brand{font-size:15px}}
@media(min-width:801px) and (max-width:1050px){body:has(#appPanel:not(.hidden)) .brand-lockup{width:180px;padding:12px 8px}body:has(#appPanel:not(.hidden)) .brand{font-size:13px}.layout-topbar{gap:5px;padding:7px 0}.layout-topbar>.layout-nav-item,.layout-topbar>.home-logout{min-width:48px}.layout-topbar .layout-clock{min-width:80px;font-size:17px}}
@media(max-width:800px){body:has(#appPanel:not(.hidden)) .brandrow{gap:0}body:has(#appPanel:not(.hidden)) .brand-lockup{width:100%;min-height:66px;justify-content:flex-start;padding:12px 17px;border-radius:0}.layout-topbar{padding:7px 6px;box-sizing:border-box;min-height:67px}.layout-topbar .layout-clock{min-width:78px;font-size:16px}.layout-side.saleh-left{min-height:0;border-radius:12px}.saleh-left .layout-side-title{font-size:17px!important}}
@media(max-width:600px){.layout-topbar>.layout-nav-item,.layout-topbar>.home-logout{font-size:9px;min-width:40px;min-height:50px;padding:3px}.saleh-left .layout-nav-group>summary{font-size:13px}.saleh-left .layout-nav-group>.layout-nav-item{font-size:11px!important;padding:7px!important}.layout-calendar[open]{top:135px}}