/* WCC shell: top bar and sidebar (owner mockup, 2026-10-13).
   - The top bar spans the full page width at the top, above everything. Its row sits at the left in document order
     (call trees, directory, admin, company name, user pill, dark mode) behind the same gutter as the sidebar's own
     content (the FEATURES label), with the same padding closing the right end. No spacer, nothing right-aligned.
   - The Teleira logo lives at the top of the 220 px sidebar column (above FEATURES / the admin menu), below the bar;
     the sidebar no longer overlaps the bar's left 220 px.
   - The content area keeps its place (below the bar, right of the sidebar).
   The theme's own rules are nested with higher specificity, so layout-critical declarations are marked !important.
   The only right-aligned element in the UI is the detail strip on tree pages. */

/* top bar, full width; the row starts on the sidebar's FEATURES label line (16 px), 20 px closes the right end */
#header.top-header{left:0!important;right:0!important}
#header.top-header .top-nav{padding:0 20px 0 16px!important;margin:0!important;text-align:left}
#header.top-header .top-nav .nav-right.menu-header{display:inline-flex!important;float:none!important;position:static!important;justify-content:flex-start!important;margin:0!important;padding:0!important;width:auto!important;max-width:100%;text-align:left}
#header.top-header .top-nav .nav-right.menu-header>li{float:none!important}
#header.top-header .top-nav .nav-right.menu-header .menu-alpha>li:first-child{padding-left:0}
#header.top-header .top-nav .nav-right.menu-header .menu-alpha>li:first-child>a{padding-left:0!important}
#header.top-header .top-nav .nav-right.menu-header>li.user-profile ul.dropdown-menu{right:auto;left:0}
#header.top-header .top-nav .nav-right.menu-header>li.wcc-theme-toggle-item{display:flex;align-items:center;margin-left:10px;height:50px}
#header.top-header .top-nav .nav-right.menu-header>li.wcc-theme-toggle-item .wcc-theme-toggle,#header.top-header .top-nav .nav-right.menu-header>li.wcc-theme-toggle-item #wcc-theme-toggle{position:static!important;top:auto!important;right:auto!important;margin:0}

/* sidebar column below the bar, logo at its top */
@media (min-width:768px){
  #nav-container{top:50px!important;bottom:0!important}
  #nav-container .brand-image{display:block}
}
@media (max-width:767px){#header.top-header .top-nav{padding:50px 0 0!important}}