/* ==================== 1. 全局基础样式 ==================== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
body, html {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #F5F7FA; color: #333;
    height: 100%;}

/* ==================== 2. PC端 顶部用户信息栏 ==================== */
.top-user-bar {
    background: #fff; padding: 0 20px; height: 50px;
    display: flex; justify-content: flex-end; align-items: center;
    border-bottom: 1px solid #eee;
    font-size: 14px; color: #666;}
.logout-btn {
    margin-left: 15px; padding: 4px 12px;
    border: 1px solid #d9d9d9; border-radius: 4px;
    background: #fff; cursor: pointer;
    font-size: 12px; color: #333; text-decoration: none;}
.logout-btn:hover { color: #1890ff; border-color: #1890ff;}

/* ==================== 3. 布局框架 (PC默认) ==================== */
.main-container {
    display: flex;
    min-height: calc(100vh - 50px);}

/* 左侧侧边栏 */
.sidebar {
    width: 240px;
    background: #fff;
    border-right: 1px solid #e6e6e6;
    flex-shrink: 0;
    display: flex; flex-direction: column;}

.sidebar-title {
    height: 50px; line-height: 50px;
    padding-left: 20px;
    font-size: 18px; font-weight: bold;
    border-bottom: 1px solid #eee;
    color: #333; display: flex; align-items: center;}

/* 菜单项 */
.menu-item {
    padding: 15px 20px;
    cursor: pointer; color: #666; transition: all 0.3s;
    border-left: 3px solid transparent; font-size: 14px;}
.menu-item:hover { background-color: #f0f7ff; color: #1890ff;}
.menu-item.active { background-color: #e6f7ff; color: #1890ff; border-left-color: #1890ff;}

/* 右侧内容区 */
.content {
    flex: 1; padding: 20px; overflow-x: hidden; width: 100%;
    display: flex; flex-direction: column; position: relative;}

/* ==================== 4. 容器与 Iframe ==================== */
.table-card { background: #fff; padding: 20px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.1);}
#dynamic-layer { flex: 1; display: flex; flex-direction: column;}
#load-container { flex: 1; background: #fff; border-radius: 4px; overflow: hidden;}
.full-iframe { width: 100%; height: 100%; min-height: 80vh; border: none; display: block;}

/* ==================== 5. 表格与分页 (PC) ==================== */
table { width: 100%; border-collapse: collapse; margin-bottom: 20px;}
th, td { padding: 12px 10px; text-align: left; border-bottom: 1px solid #e8e8e8; font-size: 14px;}
th { background-color: #fafafa; font-weight: 600;}

.pagination-container { display: flex; justify-content: space-between; align-items: center; padding-top: 15px;}
.page-btn { border: 1px solid #d9d9d9; background: #fff; padding: 5px 12px; margin: 0 4px; cursor: pointer; border-radius: 2px;}
.page-btn.active { border-color: #1890ff; color: #1890ff;}
.page-btn:disabled { color: #ccc; cursor: not-allowed;}

/* ==================== 6. 移动端列表卡片样式 ==================== */
.mobile-list-container { display: none;} /* 默认隐藏 */

.m-card { background-color: #fff; border-radius: 8px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.03); border: 1px solid #eee;}
.m-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px;}
.m-card-title { font-size: 16px; font-weight: 600; color: #1a1a1a; line-height: 1.4; max-width: 70%;}
.m-status-badge { font-size: 12px; padding: 4px 8px; border-radius: 4px; font-weight: 500;}

/* 状态颜色 */
.status-wait { background-color: #FFF7E6; color: #FA8C16; border: 1px solid #FFD591;}
.status-fail { background-color: #FFF1F0; color: #F5222D; border: 1px solid #FFA39E;}
.status-success { background-color: #F6FFED; color: #52C41A; border: 1px solid #B7EB8F;}
.status-default { background-color: #f5f5f5; color: #666;}

.m-card-row { display: flex; align-items: center; margin-bottom: 6px; font-size: 13px; color: #666;}
.m-card-row .label { color: #999; margin-right: 8px; min-width: 60px;}
.m-card-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #999;}

.btn-view { cursor:pointer; color:#1890ff; background:none; border:none;}
.m-btn-view { padding: 4px 12px; border-radius: 14px; border: 1px solid;}
.btn-color-wait { color: #FA8C16; border-color: #FA8C16;}
.btn-color-fail { color: #F5222D; border-color: #F5222D;}
.btn-color-success { color: #52C41A; border-color: #52C41A;}
.btn-color-default { color: #1890ff; border-color: #1890ff;}

/* ==================== 7. 弹窗样式 ==================== */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 2000;}
.view-card { background: #fff; width: 800px; max-width: 95%; max-height: 90vh; border-radius: 8px; padding: 20px; position: relative; overflow-y: auto;}
.close-btn { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: #999;}
.view-title { font-size: 18px; font-weight: bold; margin-bottom: 15px; text-align: center;}
.view-input, .view-textarea { width: 100%; padding: 6px; border: 1px solid #d9d9d9; border-radius: 2px; background: #f5f5f5;}
.view-textarea { height: 80px; resize: none;}

/* ==================== 8. 手机端深度适配 (Media Query) ==================== */
@media screen and (max-width: 768px) {
    /* --- 0. 基础重置 --- */
    /* 强制去除外层容器(index)的间距，防止左右不对齐 */
    .index, .index > div { margin: 0 !important; padding: 0 !important;}
    
    /* 隐藏PC专用元素 */
    .top-user-bar { display: none;}
    .sidebar-title { display: none;}
    table thead, #table-body { display: none;} /* 隐藏PC表格 */
    
    /* 布局调整 */
    .main-container { flex-direction: column; min-height: auto;}
    .content { padding: 10px; padding-top: 10px !important; min-height: calc(100vh - 100px);}
    .table-card { padding: 0; background: transparent; box-shadow: none;}
    .mobile-list-container { display: block;} /* 显示手机列表 */

    /* --- 1. 强制控制【上方独立登录组件】的样式 (第一层吸顶) --- */
    .pc-global-header {
        height: 50px !important;
        background: #fff !important;
        /* 关键：覆盖原本的 40px，改为 15px 对齐 */
        padding: 0 15px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 1px solid #f5f5f5;
        
        position: sticky; position: -webkit-sticky;
        top: 0; z-index: 1001;}
    
    /* 登录组件内部元素调整 */
    .pc-global-header span { font-size: 14px !important; margin-right: 0 !important; font-weight: bold;}
    .pc-global-header .btn-logout {
        padding: 4px 12px !important; border-radius: 15px !important;
        font-size: 12px !important; border: 1px solid #ddd !important;
        color: #666 !important; background: #fff !important;}

    /* --- 2. 控制【导航栏】样式 (第二层吸顶) --- */
    .sidebar {
        width: 100%; height: 44px; border: none;
        display: flex; flex-direction: row;
        justify-content: center; /* 居中 */
        align-items: center;
        background: #fff;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        box-shadow: 0 4px 6px rgba(0,0,0,0.03);
        
        position: sticky; position: -webkit-sticky;
        position: static;
        top: 50px; /* 紧贴登录栏 */
        z-index: 1000;}

    .menu-item {
        flex: 0 0 auto; padding: 0 15px; margin: 0;
        height: 44px; line-height: 44px;
        font-size: 14px; border-left: none;
        border-bottom: 2px solid transparent; text-align: center;}
    .menu-item.active { background: transparent; color: #1890ff; border-bottom-color: #1890ff; font-weight: bold;}

    /* --- 3. 弹窗适配 --- */
    .view-card { width: 95%; padding: 15px; max-height: 80vh;}
    .custom-table, .custom-table tbody, .custom-table tr, .custom-table td { display: block; width: 100% !important; border: none !important;}
    .custom-table tr { margin-bottom: 10px; border: 1px solid #eee !important; border-radius: 4px; padding: 10px; background: #fff;}
    .custom-table td { padding: 5px 0 !important;}
    .label-cell { text-align: left !important; background: transparent !important; font-weight: bold; color: #333; margin-bottom: 2px;}
    
    #dynamic-layer { width: 100%; overflow-x: hidden;}
}