/* Same shared controls and DOM nodes across menus; resize never resets state. */
.variant-workspace{container-name:huplix-shell;container-type:inline-size}
html[data-nav-variant=b] .variant-workspace>.topbar{display:flex;flex-wrap:wrap;gap:12px;margin:0;width:100%;padding:12px 20px;min-width:0;box-sizing:border-box;position:relative}
html[data-nav-variant=b] .variant-workspace .header-controls{display:flex;flex:1 1 700px;flex-wrap:wrap;gap:8px;min-width:0;width:auto;margin-left:auto;align-items:center}
html[data-nav-variant=b] .header-controls .search-wrap{display:flex;flex:1 1 180px;min-width:140px;min-height:44px;max-width:none;width:auto;box-sizing:border-box}
.header-controls .search-wrap input{min-width:0;width:100%}
html[data-nav-variant=b] .header-controls :is(select,button){min-height:44px;max-width:100%}
html[data-nav-variant=b] .header-controls>select{flex:0 1 150px;min-width:120px}
html[data-nav-variant=b] .header-controls #addBtn{white-space:nowrap}
.header-controls :focus-visible,.auth-card :focus-visible,.security-history-controls :focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@container huplix-shell (max-width:1000px){
  html[data-nav-variant=b] .ap-workspace-title{flex:1 0 100%}
  html[data-nav-variant=b] .variant-workspace .header-controls{flex-basis:100%;justify-content:flex-start}
  html[data-nav-variant=b] .header-controls .search-wrap{flex:1 0 100%;width:100%;min-width:0}
  html[data-nav-variant=b] .header-controls #themeTopbarBtn{width:44px;min-width:44px;flex:0 0 44px;padding:8px}
  html[data-nav-variant=b] .header-controls #themeTopbarBtn .ap-theme-label{display:none}
}
@container huplix-shell (max-width:520px){
  html[data-nav-variant=b] .variant-workspace>.topbar{padding:12px}
  html[data-nav-variant=b] .variant-workspace .header-controls{gap:6px}
  html[data-nav-variant=b] .header-controls>select{flex:1 1 calc(50% - 8px);min-width:0;width:calc(50% - 8px)}
  html[data-nav-variant=b] .header-controls #themeTopbarBtn{width:44px;min-width:44px;flex:0 0 44px}
  html[data-nav-variant=b] .header-controls #themeTopbarBtn .ap-theme-label{display:none}
  html[data-nav-variant=b] .header-controls #refreshBtn{flex:1 1 84px;min-width:84px;padding:8px 6px}
  html[data-nav-variant=b] .header-controls #addBtn{flex:1 1 92px;min-width:92px;padding:8px 6px}
}
.auth-card[hidden],.auth-card form[hidden],.auth-picker[hidden]{display:none!important}
.auth-card{max-width:min(460px,calc(100vw - 32px));box-sizing:border-box}
.auth-card h1{letter-spacing:-.035em}
.huplix-auth-brand{display:inline-flex;align-items:center;gap:12px;color:var(--text);font-size:28px;font-weight:700;line-height:1.2;text-decoration:none;max-width:100%}
.huplix-auth-brand img{display:block;width:40px;height:auto;flex:0 0 40px}
.auth-card>a.huplix-auth-brand{margin-bottom:20px;color:var(--text)}
.auth-card a{color:var(--blue)}
.security-history-controls{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0;align-items:end}
.security-history-controls label{display:grid;gap:6px;min-width:130px;font-size:13px}
.security-history-controls :is(input,select){font:inherit;padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);min-height:44px}
.security-history-list{display:grid;gap:8px;margin:12px 0}
.security-history-row{display:grid;gap:6px;padding:14px;border:1px solid var(--border);border-radius:8px;overflow-wrap:anywhere}
.security-history-row small{color:var(--muted);line-height:1.5}

/* Shared neon branding on every menu and recovery/onboarding screen. */
.huplix-auth-brand{font-size:32px}.huplix-auth-brand img{width:60px;flex-basis:60px;aspect-ratio:985/900;object-fit:contain}
html[data-nav-variant=b] .variant-sidebar-head{height:52px}
html[data-nav-variant=b] .variant-sidebar-brand{gap:8px}
html[data-nav-variant=b] .variant-sidebar-brand>img.nav-brand-symbol{width:38px;height:35px;flex-basis:38px;object-fit:contain}
html[data-nav-variant=b] .ap-tenant-symbol{width:24px;height:23px;object-fit:contain}

/* Shared rail branding/account presentation applies to every workspace menu. */
html[data-nav-variant=b] .variant-sidebar-brand>img.nav-brand-symbol{width:44px;height:40px;flex-basis:44px}
html[data-nav-variant=b] .sidebar-account{width:100%;margin:0 0 8px}
html[data-nav-variant=b] .sidebar-account #userMenuBtn{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 8px;border:0;border-radius:8px;background:transparent;color:var(--text);text-align:left}
html[data-nav-variant=b] .sidebar-account #userMenuBtn:hover{background:var(--surface-2)}
html[data-nav-variant=b] .sidebar-account #userMenuBtn .user-name{display:block;flex:1;min-width:0;max-width:none}
html[data-nav-variant=b] .sidebar-account #userMenuBtn>svg{display:block;flex-shrink:0;transform:rotate(-90deg)}
html[data-nav-variant=b] .sidebar-account .user-avatar{width:32px;height:32px;flex:0 0 32px}
html[data-nav-variant=b].nav-is-collapsed .sidebar-account #userMenuBtn{padding:6px 0;justify-content:center}
html[data-nav-variant=b].nav-is-collapsed .sidebar-account #userMenuBtn :is(.user-name,svg){display:none}
html[data-nav-variant=b] .sidebar-account-menu{position:fixed;right:auto;bottom:auto;width:220px;min-width:0;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;box-sizing:border-box;z-index:100}
.sidebar-account-menu .menu-item{min-height:44px}
.sidebar-account :focus-visible,.sidebar-account-menu :focus-visible{outline:2px solid var(--blue);outline-offset:2px}