/* =============================================
   RMA ERP - SPA LAYOUT
   Sidebar, Header, Main Content Shell
   ============================================= */

/* ---- App Shell ---- */
.app-shell{display:flex;min-height:100vh}

/* ---- Sidebar ---- */
.sidebar{width:var(--sidebar-w);height:100vh;position:fixed;top:0;left:0;background:var(--white);border-right:1px solid var(--gray-100);display:flex;flex-direction:column;z-index:var(--z-sticky);transition:width var(--transition-base),transform var(--transition-base);overflow:hidden}
.sidebar-header{padding:var(--sp-5);display:flex;align-items:center;gap:var(--sp-3);border-bottom:1px solid var(--gray-100);min-height:var(--header-h);flex-shrink:0}
.sidebar-logo{width:36px;height:36px;background:var(--primary);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:var(--fw-bold);font-size:var(--fs-sm);flex-shrink:0}
.sidebar-brand{overflow:hidden}
.sidebar-brand h2{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--gray-900);white-space:nowrap}
.sidebar-brand span{font-size:var(--fs-xs);color:var(--gray-400);white-space:nowrap}
.sidebar-nav{flex:1;overflow-y:auto;padding:var(--sp-3)}
.sidebar-section{margin-bottom:var(--sp-4)}
.sidebar-section-title{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--gray-400);text-transform:uppercase;letter-spacing:.05em;padding:var(--sp-2) var(--sp-3);white-space:nowrap;overflow:hidden}
.nav-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-lg);color:var(--gray-600);font-size:var(--fs-sm);font-weight:var(--fw-medium);transition:all var(--transition-fast);white-space:nowrap;position:relative;cursor:pointer;margin-bottom:2px}
.nav-item:hover{background:var(--gray-50);color:var(--gray-900)}
.nav-item.active{background:var(--primary-lightest);color:var(--primary)}
.nav-item.active::before{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:24px;background:var(--primary);border-radius:0 4px 4px 0}
.nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}
.nav-label{flex:1;overflow:hidden;text-overflow:ellipsis}
.nav-badge{background:var(--danger);color:var(--white);font-size:10px;font-weight:var(--fw-bold);padding:2px 6px;border-radius:var(--radius-full);line-height:1.2}
.nav-arrow{transition:transform var(--transition-fast)}
.nav-item.expanded .nav-arrow{transform:rotate(90deg)}
.nav-submenu{display:none;padding-left:var(--sp-8)}
.nav-submenu.show{display:block}
.sidebar-footer{padding:var(--sp-4);border-top:1px solid var(--gray-100);flex-shrink:0}
.sidebar-user{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2);border-radius:var(--radius-lg);cursor:pointer;transition:background var(--transition-fast)}
.sidebar-user:hover{background:var(--gray-50)}
.sidebar-user-info{flex:1;overflow:hidden}
.sidebar-user-name{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--gray-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-role{font-size:var(--fs-xs);color:var(--gray-400);white-space:nowrap}

/* Collapsed Sidebar */
.sidebar.collapsed{width:var(--sidebar-collapsed-w)}
.sidebar.collapsed .sidebar-brand,.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-badge,.sidebar.collapsed .nav-arrow,.sidebar.collapsed .sidebar-section-title,.sidebar.collapsed .sidebar-user-info{display:none}
.sidebar.collapsed .nav-item{justify-content:center;padding:var(--sp-2)}
.sidebar.collapsed .nav-item.active::before{left:0}
.sidebar.collapsed .sidebar-user{justify-content:center}

/* ---- Main Content ---- */
.main-content{flex:1;margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;transition:margin-left var(--transition-base)}
.sidebar.collapsed~.main-content,.main-content.expanded{margin-left:var(--sidebar-collapsed-w)}

/* ---- Header ---- */
.header{height:var(--header-h);background:var(--glass-bg);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-6);position:sticky;top:0;z-index:var(--z-sticky)}
.header-left{display:flex;align-items:center;gap:var(--sp-4)}
.menu-toggle{display:none;width:40px;height:40px;border-radius:var(--radius-lg);align-items:center;justify-content:center;color:var(--gray-600);transition:background var(--transition-fast)}
.menu-toggle:hover{background:var(--gray-100)}
.sidebar-toggle{width:36px;height:36px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--gray-500);transition:all var(--transition-fast);background:none;border:none;cursor:pointer}
.sidebar-toggle:hover{background:var(--gray-100);color:var(--gray-700)}
.header-search{position:relative}
.header-search input{width:280px;padding:.5rem 1rem .5rem 2.5rem;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-lg);font-size:var(--fs-sm);transition:all var(--transition-fast)}
.header-search input:focus{width:340px;background:var(--white);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-lightest)}
.header-search .search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--gray-400)}
.header-search .search-shortcut{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:var(--white);border:1px solid var(--gray-200);padding:2px 6px;font-size:10px;color:var(--gray-400);border-radius:4px;font-family:var(--font-mono)}
.header-right{display:flex;align-items:center;gap:var(--sp-2)}
.header-action{width:40px;height:40px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--gray-500);transition:all var(--transition-fast);position:relative;cursor:pointer;background:none;border:none}
.header-action:hover{background:var(--gray-100);color:var(--gray-700)}
.header-action .notification-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;background:var(--danger);border-radius:var(--radius-full);border:2px solid var(--white)}
.header-user{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-lg);cursor:pointer;transition:background var(--transition-fast);margin-left:var(--sp-2)}
.header-user:hover{background:var(--gray-50)}
.header-user-name{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--gray-700)}

/* ---- Page Content ---- */
.page-content{flex:1;padding:var(--sp-6);max-width:var(--content-max);width:100%}
.page-header{margin-bottom:var(--sp-6)}
.page-title{font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:var(--gray-900)}
.page-subtitle{font-size:var(--fs-sm);color:var(--gray-500);margin-top:var(--sp-1)}

/* ---- Mobile Overlay ---- */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:calc(var(--z-sticky) - 1)}

/* ---- Responsive ---- */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);width:var(--sidebar-w)}
  .sidebar.mobile-open{transform:translateX(0)}
  .sidebar-overlay.active{display:block}
  .main-content,.main-content.expanded{margin-left:0}
  .menu-toggle{display:flex}
  .header-search input{width:200px}
  .header-search input:focus{width:240px}
  .header-search .search-shortcut{display:none}
  .page-content{padding:var(--sp-4)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .header-user-name{display:none}
}
@media(max-width:425px){
  .page-content{padding:var(--sp-3)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .stat-card{padding:var(--sp-4)}
  .stat-value{font-size:var(--fs-xl)}
  .page-title{font-size:var(--fs-xl)}
  .header{padding:0 var(--sp-4)}
  .header-search{display:none}
}
@media(max-width:375px){
  .card-body{padding:var(--sp-4)}
  .card-header{padding:var(--sp-3) var(--sp-4);flex-wrap:wrap;gap:var(--sp-2)}
}