/* ============================================================
 * 品宏外贸CRM系统 - 主布局样式
 * 包含：应用框架、侧边栏、主内容区、顶部栏、用户信息
 * ============================================================ */

/* ===== CSS变量默认值（与系统设置默认值一致，避免页面加载时跳动） ===== */
:root{
  --sidebar-width:160px;
  --sidebar-width-mobile:60px;
  --logo-size:117px;
  --title-size:16px;
  --title-color:#ffffff;
  --logout-btn-width:80px;
  --sidebar-bg-color:#1a1a2e;
  --sidebar-footer-bg-color:#1a1a2e;
}

/* ===== 应用框架 ===== */
.app-layout{display:none;min-height:100vh;}
.app-layout.active{display:flex;}

/* ===== 侧边栏 ===== */
.sidebar{width:var(--sidebar-width);background:var(--sidebar-bg-color,#1a1a2e);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;}
.sidebar-header{padding:18px 16px;border-bottom:1px solid rgba(255,255,255,0.1);text-align:center;}
.sidebar-logo{width:100%;max-width:var(--logo-size);height:auto;aspect-ratio:117/68;display:block;margin:0 auto 8px auto;object-fit:contain;}
.sidebar-header h2{font-size:var(--title-size);font-weight:700;color:var(--title-color,#fff);letter-spacing:1px;margin:0;display:none;}
.sidebar-nav{flex:1;padding:12px 0;overflow-y:auto;}
.nav-item{display:flex;align-items:center;gap:10px;padding:11px 20px;color:rgba(255,255,255,0.7);font-size:13px;cursor:pointer;transition:all 0.2s;border-left:3px solid transparent;}
.nav-item:hover{background:rgba(255,255,255,0.05);color:#fff;}
.nav-item.active{background:rgba(233,69,96,0.15);color:#e94560;border-left-color:#e94560;font-weight:500;}
.nav-item svg{width:18px;height:18px;flex-shrink:0;}
.nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;background:#28a745;color:#fff;font-size:11px;font-weight:700;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sidebar-footer{padding:16px;border-top:1px solid rgba(255,255,255,0.1);background:var(--sidebar-footer-bg-color,transparent);}

/* ===== 侧边栏底部用户信息 ===== */
.user-info{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e94560,#0f3460);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#fff;}
.user-name{font-size:13px;color:#fff;}
.user-role{font-size:11px;color:rgba(255,255,255,0.5);}
.logout-btn{display:flex;align-items:center;justify-content:center;width:calc(100% - 16px);max-width:calc(100% - 16px);height:36px;margin:8px auto 0 auto;padding:0;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.8);border:none;border-radius:6px;font-size:13px;line-height:1;cursor:pointer;transition:background 0.2s;}
.logout-btn:hover{background:rgba(233,69,96,0.3);color:#fff;}

/* ===== 侧边栏折叠/展开按钮 ===== */
.sidebar-toggle{
  display:flex;align-items:center;justify-content:center;
  width:calc(100% - 16px);height:36px;margin:8px auto 0 auto;padding:0;
  background:#28a745;border:none;border-radius:6px;
  color:#fff;font-size:18px;cursor:pointer;
  transition:background 0.2s;
}
.sidebar-toggle:hover{background:#218838;}
.sidebar-toggle svg{width:20px;height:20px;}

/* ===== 侧边栏折叠状态（只显示图标和徽标） ===== */
.sidebar.collapsed{
  width:var(--sidebar-width-mobile,60px) !important;
}
.sidebar.collapsed .sidebar-header{display:none !important;}
.sidebar.collapsed .nav-item{
  justify-content:center;padding:12px 0;position:relative;
}
.sidebar.collapsed .nav-item span:not(.nav-badge){display:none !important;}
.sidebar.collapsed .nav-item svg{width:22px;height:22px;}
.sidebar.collapsed .nav-badge{
  margin-left:0;position:absolute;top:4px;right:4px;
  min-width:18px;height:18px;font-size:10px;padding:0 5px;
}
.sidebar.collapsed .sidebar-footer{padding:8px 0;}
.sidebar.collapsed .user-info{display:none !important;}
.sidebar.collapsed .logout-btn{display:none !important;}

/* 折叠状态下主内容区margin调整 */
body.has-collapsed-sidebar .main-content{
  margin-left:calc(var(--sidebar-width-mobile,60px) + 6px) !important;
}

/* ===== 主内容区 ===== */
.main-content{margin-left:calc(var(--sidebar-width) + 6px);flex:1;min-height:100vh;overflow-x:hidden;padding:0;box-sizing:border-box;}
.topbar{background:#fff;padding:14px 28px;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;justify-content:space-between;position:sticky;top:6px;z-index:50;border-radius:8px 8px 0 0;margin:6px 6px 0 0;}
.topbar-title{font-size:17px;font-weight:600;color:#1a1a2e;}
.topbar-right{display:flex;align-items:center;gap:16px;}
.topbar-badge{background:#e94560;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;}
.page-content{padding:20px 24px;background:#fff;border-radius:0 0 8px 8px;min-height:calc(100vh - 80px);margin:0 6px 6px 0;}

/* ===== 手机端适配：JS自动控制折叠状态，这里只设置折叠时的宽度变量 ===== */
@media (max-width: 767px) {
  :root {
    --sidebar-width: var(--sidebar-width-mobile, 60px);
  }
}