/* /Layout/MainLayout.razor.rz.scp.css */
/* ========================================== */
/* 💻 1. 全局与 PC 端基础结构 */
/* ========================================== */
.gems-layout[b-fm3cfsi7yk] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}
.gems-main[b-fm3cfsi7yk] {
    flex: 1;
    margin: 0;
    padding: 0;
}

/* 头部主区域 */
.gems-header[b-fm3cfsi7yk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    background: #1f2937;
    color: white;
    
    /* 下面这两行是关键 */
    position: relative; 
    z-index: 1000; /* 🚀 赋予头部最高层级，防止下拉菜单被主体内容遮挡 */
}
.logo-area[b-fm3cfsi7yk] {
    font-size: 20px;
    font-weight: bold;
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 中间导航链接 */
.main-nav a[b-fm3cfsi7yk] {
    color: #d1d5db;
    text-decoration: none;
    margin: 0 15px;
    font-size: 15px;
}
.main-nav a.active[b-fm3cfsi7yk], .main-nav a:hover[b-fm3cfsi7yk] {
    color: white;
}

/* 右侧验证区域 */
.auth-area[b-fm3cfsi7yk] {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 1001; /* 🚀 确保验证和语言切换区域绝对在最顶层 */
}
.welcome-msg[b-fm3cfsi7yk] {
    font-size: 14px;
    color: #9ca3af;
}

/* 头像圆圈 */
.user-avatar[b-fm3cfsi7yk] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* 各类按钮样式 */
.btn-login[b-fm3cfsi7yk] { background: #ea580c; color: white; padding: 8px 20px; text-decoration: none; border-radius: 4px; font-weight: bold; }
.btn-sso[b-fm3cfsi7yk] { padding: 6px 15px; text-decoration: none; border-radius: 4px; font-size: 13px; font-weight: bold; color: white; margin-left: 5px;}
.btn-sso.admin[b-fm3cfsi7yk] { background: #dc2626; }
.btn-sso.supplier[b-fm3cfsi7yk] { background: #ea580c; }
.btn-sso.erp[b-fm3cfsi7yk] { background: #2563eb; }
.btn-logout[b-fm3cfsi7yk] { background: transparent; border: 1px solid #4b5563; color: #d1d5db; padding: 6px 15px; border-radius: 4px; cursor: pointer; margin-left: 5px;}
.btn-logout:hover[b-fm3cfsi7yk] { color: white; border-color: white; }

/* PC 端默认隐藏手机控件 */
.mobile-only[b-fm3cfsi7yk] { display: none; }
.mobile-dropdown[b-fm3cfsi7yk] { display: none; }


/* ========================================== */
/* 📱 2. 移动端极简主义拦截 (768px 以下) */
/* ========================================== */
@media (max-width: 768px) {
    /* 缩小内边距，给手机省空间 */
    .gems-header[b-fm3cfsi7yk] { padding: 12px 15px; }
    
    /* 让 Logo 文字变小，或者也可以改成缩写 */
    .logo-area[b-fm3cfsi7yk] { font-size: 16px; }

    /* 暴力隐藏 PC 端专享内容 */
    .desktop-only[b-fm3cfsi7yk] { display: none !important; }
    .main-nav[b-fm3cfsi7yk] { display: none !important; }

    /* 唤醒手机端专享内容 */
    .mobile-only[b-fm3cfsi7yk] { display: block; }
    
    /* 汉堡按钮的样式 */
    .mobile-toggle[b-fm3cfsi7yk] {
        background: transparent;
        border: none;
        padding: 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    /* 手机端下拉菜单 UI 设计 */
    .mobile-dropdown[b-fm3cfsi7yk] {
        display: flex;
        flex-direction: column;
        background-color: #111827; /* 比头部更深的颜色 */
        width: 100%;
        position: absolute;
        top: 60px; /* 紧贴在头部下方 */
        left: 0;
        z-index: 999;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    }
    
    .dropdown-item[b-fm3cfsi7yk] {
        padding: 15px 20px;
        color: #d1d5db;
        text-decoration: none;
        font-size: 16px;
        border-bottom: 1px solid #1f2937;
    }
    .dropdown-item:active[b-fm3cfsi7yk] { background-color: #374151; }
    
    /* 分割线 */
    .dropdown-divider[b-fm3cfsi7yk] { height: 1px; background-color: #374151; margin: 5px 0; }
    
    /* 重点操作按钮的手机版变体 */
    .highlight-orange[b-fm3cfsi7yk] { color: #f59e0b; font-weight: bold; }
    .highlight-blue[b-fm3cfsi7yk] { color: #60a5fa; font-weight: bold; }
    
    /* 登出按钮 */
    .logout-item[b-fm3cfsi7yk] {
        background: transparent;
        border: none;
        text-align: left;
        width: 100%;
        cursor: pointer;
        color: #ef4444; /* 红色醒目警示 */
    }
}