/* ================================================
   PRO AGENT — Layout (Sidebar, Topbar, Shell)
   ================================================ */

/* ===== APP SHELL ===== */
.app-shell{display:flex;min-height:100vh;}

/* ===== SIDEBAR ===== */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:100;transition:transform 0.3s ease;}
.sidebar-logo{padding:22px 18px 16px;border-bottom:1px solid var(--border);}
.sidebar-logo h1{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;}
.sidebar-logo h1 span{color:var(--accent-light);}
.sidebar-logo p{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;margin-top:3px;}
.sidebar-nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;}
.nav-section-label{font-size:9px;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);padding:14px 12px 6px;font-weight:600;}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);font-size:13px;color:var(--text-secondary);position:relative;text-decoration:none;}
.nav-item:hover{background:var(--bg-card);color:var(--text-primary);}
.nav-item.active{background:var(--accent-glow);color:var(--accent-light);font-weight:500;}
.nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--accent);border-radius:0 4px 4px 0;}
.nav-icon{width:18px;text-align:center;font-size:15px;flex-shrink:0;}
.nav-badge{margin-left:auto;background:var(--accent);color:white;font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;flex-shrink:0;}

/* Sidebar footer */
.sidebar-footer{border-top:1px solid var(--border);padding:8px 10px;}
.sidebar-logout{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition);}
.sidebar-logout:hover{background:rgba(255,107,107,0.1);color:var(--red);}
.sidebar-user{padding:12px 14px;display:flex;align-items:center;gap:10px;}
.user-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--green));display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;color:white;flex-shrink:0;}
.user-info .name{font-size:12px;font-weight:500;}
.user-info .role{font-size:10px;color:var(--text-muted);}

/* ===== MAIN AREA ===== */
.main{margin-left:260px;min-height:100vh;flex:1;}

/* ===== TOPBAR ===== */
.topbar{position:sticky;top:0;z-index:50;background:rgba(8,8,13,0.88);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;}
.topbar-left{display:flex;align-items:center;gap:12px;}
.topbar-left h2{font-family:'Playfair Display',serif;font-size:17px;font-weight:600;}
.mobile-menu-btn{display:none;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-secondary);cursor:pointer;font-size:18px;align-items:center;justify-content:center;}
.topbar-right{display:flex;align-items:center;gap:8px;}
.ai-status{display:flex;align-items:center;gap:6px;padding:5px 10px;background:var(--green-glow);border:1px solid rgba(0,210,160,0.3);border-radius:20px;font-size:11px;color:var(--green);font-weight:500;}
.ai-dot{width:7px;height:7px;background:var(--green);border-radius:50%;animation:pulse 2s infinite;}
.topbar-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-secondary);cursor:pointer;transition:all var(--transition);font-size:15px;position:relative;}
.topbar-btn:hover{background:var(--bg-card);color:var(--text-primary);}
.topbar-btn .notif-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;background:var(--red);border-radius:50%;border:2px solid var(--bg-primary);}

/* ===== CONTENT ===== */
.content{padding:24px;}

/* ===== TAB PAGES ===== */
.tab-page{display:none;animation:fadeIn 0.25s ease;}
.tab-page.active{display:block;}

/* ===== PAGE HEADER ===== */
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.page-header p{color:var(--text-muted);font-size:12px;}

/* ===== MOBILE SIDEBAR OVERLAY ===== */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:99;}
.sidebar-overlay.open{display:block;}

/* ===== MOBILE BOTTOM NAV ===== */
.mobile-bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:90;
  background:var(--bg-secondary);border-top:1px solid var(--border);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
}
.mobile-bottom-nav-inner{
  display:flex;justify-content:space-around;align-items:center;
}
.mobile-nav-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 8px;border-radius:var(--radius-sm);cursor:pointer;
  transition:all var(--transition);color:var(--text-muted);font-size:10px;
  min-width:52px;
}
.mobile-nav-item.active{color:var(--accent-light);}
.mobile-nav-item .m-icon{font-size:18px;}
.mobile-nav-item .m-badge{
  position:absolute;top:2px;right:8px;width:6px;height:6px;
  background:var(--red);border-radius:50%;
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);width:280px;}
  .sidebar.mobile-open{transform:translateX(0);}
  .main{margin-left:0;padding-bottom:72px;}
  .mobile-menu-btn{display:flex;}
  .topbar{padding:10px 16px;}
  .topbar-left h2{font-size:15px;}
  .ai-status .ai-label{display:none;}
  .content{padding:16px 14px;}
  .mobile-bottom-nav{display:block;}
}