:root{--side:220px;--sideCollapsed:72px;--bg:#f7f6f2;--sideBg:#fbfaf7;--line:#e4e2dc;--ink:#17191c;--ink2:#364152;--muted:#7b8490}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Arial,"Noto Sans Arabic",sans-serif;color:var(--ink)}
.appShell{width:100%;height:100vh;direction:rtl}
.appSide{position:fixed;top:0;right:0;width:var(--side);height:100vh;padding:20px 12px 12px;background:var(--sideBg);border-left:1px solid var(--line);z-index:50;display:flex;flex-direction:column;overflow:hidden}
.brand{margin:0 8px 18px}.brand b{display:block;font-size:16px;font-weight:800}.brand small{display:block;margin-top:5px;font-size:12px;color:var(--muted)}
.brand [hidden],.mobileBrand [hidden]{display:none!important}.brandLogo{display:block;max-width:100%;max-height:64px;object-fit:contain;object-position:right center}.brand.hasLogo .brandText{display:none}.brand.hasLogo small{margin-top:8px}
.mobileLogo{display:block;height:28px;max-width:110px;object-fit:contain}
.appNav{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;gap:4px;overflow:auto;padding-bottom:10px;scrollbar-width:thin}
.appNav a{display:flex;align-items:center;gap:10px;min-height:42px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ink2);font-weight:600;line-height:1.35}
.appNav a:hover{background:#f1f0ec;color:var(--ink)}
.appNav a.on{background:#1d4f91;color:#fff}
.navIcon{width:22px;height:22px;display:grid;place-items:center;flex:0 0 22px}.navIcon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.navDivider{height:1px;background:var(--line);margin:5px 8px}
.appNav [hidden]{display:none!important}.appNav>*{flex-shrink:0}
.sideFooter{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.collapseBtn{width:100%;min-height:42px;border:1px solid #1d4f91;border-radius:10px;background:#1d4f91;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-weight:700}
.collapseBtn:hover{background:#172131}
.appMain{position:fixed;top:0;right:var(--side);bottom:0;left:0;background:var(--bg);overflow:hidden}
#appFrame{display:block;width:100%;height:100%;border:0;background:var(--bg)}
.routeProgress{position:absolute;z-index:4;top:0;right:0;height:2px;width:0;background:#1d4f91;opacity:0;transition:width .18s ease,opacity .18s ease}
.routeProgress.loading{width:68%;opacity:.55}.routeProgress.done{width:100%;opacity:0}
html.sidebarCollapsed .appSide{width:var(--sideCollapsed);padding-inline:8px}
html.sidebarCollapsed .appMain{right:var(--sideCollapsed)}
html.sidebarCollapsed .brand small,html.sidebarCollapsed .navLabel,html.sidebarCollapsed .collapseLabel{display:none}
html.sidebarCollapsed .brand{margin-inline:0;text-align:center}html.sidebarCollapsed .brand.hasLogo .brandLogo{max-height:34px;margin:0 auto}html.sidebarCollapsed .brand b{font-size:0}html.sidebarCollapsed .brand b::after{content:"SBT";font-size:12px}
html.sidebarCollapsed .appNav a{justify-content:center;padding-inline:0}
body.authPending .appSide,body.authOnly .appSide{visibility:hidden;pointer-events:none}
body.authPending .appMain,body.authOnly .appMain{right:0}
.mobileBar,.scrim{display:none}
@media(max-width:980px){
  .mobileBar{display:flex;position:fixed;top:0;right:0;left:0;height:56px;z-index:60;align-items:center;gap:10px;padding:0 12px;background:var(--sideBg);border-bottom:1px solid var(--line)}
  .menuBtn{width:42px;height:42px;flex:0 0 42px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer}
  .menuBtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
  .mobileTitle{flex:1;min-width:0;font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobileBrand{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.5px}
  .appSide,html.sidebarCollapsed .appSide{width:min(300px,86vw);padding:18px 12px 12px;z-index:70;transform:translateX(100%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
  html.navOpen .appSide{transform:none;visibility:visible;box-shadow:-14px 0 40px rgba(15,18,22,.18);transition:transform .22s ease,visibility 0s}
  .scrim{display:block;position:fixed;inset:0;z-index:65;background:rgba(15,18,22,.38);opacity:0;pointer-events:none;transition:opacity .2s ease}
  html.navOpen .scrim{opacity:1;pointer-events:auto}
  .appMain,html.sidebarCollapsed .appMain{top:56px;right:0}
  .collapseBtn{display:none}
  html.sidebarCollapsed .brand small,html.sidebarCollapsed .navLabel{display:inline}
  html.sidebarCollapsed .brand{margin:0 8px 18px;text-align:right}html.sidebarCollapsed .brand b{font-size:16px}html.sidebarCollapsed .brand b::after{content:none}html.sidebarCollapsed .brand.hasLogo .brandLogo{max-height:64px;margin:0}
  html.sidebarCollapsed .appNav a{justify-content:flex-start;padding-inline:10px}
  .appNav a{min-height:46px}
  body.authPending .mobileBar,body.authOnly .mobileBar{visibility:hidden}
  body.authPending .appMain,body.authOnly .appMain{top:0}
}
@media(max-width:980px) and (prefers-reduced-motion:reduce){.appSide,.scrim{transition:none}}