/* Horga-style frame on desktop: top header bar + horizontal icon menu, no left sidebar. Mobile keeps its own layout. */
@media (min-width:601px){
  :root{--topbar-h:56px;--menubar-h:68px}
  body .shell{margin-left:0!important;padding-top:calc(var(--topbar-h) + var(--menubar-h))}
  /* top header bar */
  body .shell>header{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--topbar-h)!important;margin:0!important;padding:0 24px 0 210px!important;background:#1b3a63!important;border-bottom:0!important;color:#fff}
  body .shell>header .breadcrumb{color:#c9d7ea}body .shell>header .breadcrumb b{color:#fff}body .shell>header .breadcrumb-property{display:none}body .shell>header .breadcrumb>span:not(.breadcrumb-property){display:none}
  body .shell>header .today{color:#dbe6f5}
  body .shell>header .icon-btn{color:#fff;background:transparent;border-color:#ffffff40}
  /* menu bar (the old sidebar) */
  body aside{position:fixed!important;top:var(--topbar-h)!important;left:0!important;right:0!important;bottom:auto!important;width:auto!important;height:var(--menubar-h)!important;padding:0 12px!important;display:flex!important;flex-direction:row!important;align-items:stretch;gap:0;z-index:39;background:#0f2442!important;border-right:0!important;border-bottom:1px solid #08162a;box-shadow:0 2px 8px #0b1a3022;overflow:visible;z-index:41!important}
  body aside .brand{position:fixed!important;top:0;left:20px;height:var(--topbar-h);display:flex!important;align-items:center;margin:0!important;padding:0!important;z-index:41;font-size:20px}
  body aside .brand .koko-wordmark{display:inline!important}body aside .brand .koko-initials{display:none!important}
  body aside .property,body aside .aside-bottom,body aside .mnav,body aside .nav-label{display:none!important}
  body aside nav#nav{display:flex!important;flex-direction:row!important;align-items:stretch;gap:2px;flex:1;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;margin:0!important;padding:0!important}
  body aside nav#nav button{position:relative;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;flex:0 0 auto;min-width:78px;width:auto!important;height:100%!important;margin:0!important;padding:8px 10px!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:#b9c7dc!important;font-size:12.5px!important;text-align:center!important;border-bottom:3px solid transparent!important}
  body aside nav#nav button .nav-icon{font-size:20px;line-height:1;width:auto;margin:0}
  body aside nav#nav button .nav-text{display:block!important;white-space:nowrap;font-size:12.5px}
  body aside nav#nav button:hover{background:#ffffff10!important;color:#fff!important}
  body aside nav#nav button.active{background:#2550c8!important;color:#fff!important;border-bottom-color:#9fc0ff!important}
  body aside nav#nav button .count{display:inline-block!important;position:absolute;top:6px;right:8px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#e5484d;color:#fff;font-size:11px;line-height:18px}
  /* content width like Horga */
  body .shell>.gs-bar,body .shell>main#app{max-width:1440px;margin-left:auto;margin-right:auto}
}
@media (min-width:601px) and (max-width:1100px){body .shell>header{padding-left:170px!important}body aside nav#nav button{min-width:66px;padding:8px 6px!important}}