/* ============================================================
   WBR base — reset, app shell layout, sidebar, topbar, responsive
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--wbr-font);-webkit-text-size-adjust:100%}
body.wbr-body{margin:0;background:var(--wbr-page);color:var(--wbr-text);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{font-weight:600}

/* ---- Topbar (sticky) ---- */
.wbr-topbar{position:fixed;top:0;left:0;right:0;height:var(--wbr-topbar-h);display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--wbr-card);border-bottom:1px solid var(--wbr-border);z-index:40}
.wbr-pagetitle{font-size:17px;font-weight:600}
.wbr-spacer{flex:1}
.wbr-iconbtn{width:36px;height:36px;border:none;background:transparent;color:var(--wbr-muted);border-radius:var(--wbr-radius);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:19px;position:relative}
.wbr-iconbtn:hover{background:var(--wbr-brand-tint);color:var(--wbr-brand)}
.wbr-bell .wbr-badge-dot{position:absolute;top:2px;right:2px;background:var(--wbr-danger);color:#fff;font-size:10px;font-weight:600;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.wbr-avatar{width:34px;height:34px;border-radius:50%;background:var(--wbr-brand);color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}

/* ---- Sidebar ---- */
.wbr-sidebar{position:fixed;top:var(--wbr-topbar-h);left:0;bottom:0;width:var(--wbr-sidebar-w);background:var(--wbr-card);border-right:1px solid var(--wbr-border);padding:14px 12px;display:flex;flex-direction:column;gap:3px;z-index:30;overflow-y:auto;transition:width .18s ease,transform .2s ease}
.wbr-brand{display:flex;align-items:center;gap:10px;padding:2px 8px 14px}
.wbr-logo{width:34px;height:34px;border-radius:var(--wbr-radius);background:var(--wbr-brand);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wbr-brandtxt{font-weight:600;font-size:15px;white-space:nowrap}
.wbr-nav{display:flex;flex-direction:column;gap:3px}
.wbr-navitem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--wbr-radius);color:var(--wbr-muted);font-size:14px;font-weight:500;white-space:nowrap}
.wbr-navitem i{font-size:20px;flex-shrink:0}
.wbr-navitem:hover{background:var(--wbr-brand-tint);color:var(--wbr-brand)}
.wbr-navitem.is-active{background:var(--wbr-brand-tint);color:var(--wbr-brand);font-weight:600}
.wbr-nav-foot{margin-top:auto;border-top:1px solid var(--wbr-border);padding-top:8px}

/* ---- Main content ---- */
.wbr-main{margin-left:var(--wbr-sidebar-w);margin-top:var(--wbr-topbar-h);padding:22px 26px;min-height:calc(100vh - var(--wbr-topbar-h));transition:margin-left .18s ease}
.wbr-container{max-width:1080px}

/* ---- Collapsed sidebar (desktop) ---- */
html.wbr-collapsed .wbr-sidebar{width:var(--wbr-sidebar-collapsed)}
html.wbr-collapsed .wbr-sidebar .wbr-brandtxt,
html.wbr-collapsed .wbr-sidebar .wbr-navitem span{display:none}
html.wbr-collapsed .wbr-navitem{justify-content:center}
html.wbr-collapsed .wbr-main{margin-left:var(--wbr-sidebar-collapsed)}

/* ---- Mobile drawer ---- */
.wbr-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:.2s;z-index:25}
@media(max-width:768px){
  .wbr-sidebar{transform:translateX(-100%)}
  html.wbr-drawer .wbr-sidebar{transform:translateX(0)}
  html.wbr-drawer .wbr-overlay{opacity:1;visibility:visible}
  .wbr-main,html.wbr-collapsed .wbr-main{margin-left:0}
  .wbr-main{padding:18px 16px}
}

/* ---- Smart-tab navigation progress bar ---- */
.wbr-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--wbr-brand);z-index:70;opacity:0;transition:width .3s ease,opacity .3s ease}