/* mobile.css — 全局手机端响应式（非业务相关） */

/* ===== 768px 平板 ===== */
@media (max-width: 768px) {
    /* 顶部导航 */
    .header .user-info span { display: none; }
    .header .user-info a[href="/logout"] { display: none; }
    .header { padding: 0 12px; height: 52px; }

    /* 侧边栏 */
    .sidebar {
        width: 240px;
        transform: translateX(-100%);
        top: 52px;
        z-index: 999;
        transition: transform 0.3s ease;
        box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    }
    .sidebar.open { transform: translateX(0); }

    .menu-toggle { display: flex !important; }

    /* 主内容区 */
    .main { margin-left: 0 !important; padding: 16px; }
    .container { padding-top: 52px; }

    /* 表格：横向滚动 */
    .table-card { border-radius: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table { min-width: 600px; }
    .data-table th, .data-table td { padding: 10px 12px; font-size: 13px; white-space: nowrap; }

    /* 统计卡片 */
    .stats-grid { grid-template-columns: 1fr; gap: 12px; }

    /* 页面标题 */
    .page-header h2 { font-size: 17px; }

    /* 欢迎横幅 */
    .welcome-banner { padding: 20px; margin-bottom: 16px; }
    .welcome-banner h2 { font-size: 18px; }
}

/* ===== 480px 手机 ===== */
@media (max-width: 480px) {
    .header { padding: 0 10px; height: 48px; }
    .header .header-logo { height: 32px; }
    .container { padding-top: 48px; }
    .sidebar { top: 48px; }
    .main { padding: 12px; }
}

/* ===== 汉堡菜单按钮（始终隐藏，媒体查询控制） ===== */
.menu-toggle {
    display: none;
    width: 36px; height: 36px;
    border: none; background: transparent;
    cursor: pointer; padding: 6px;
    flex-direction: column;
    justify-content: center; align-items: center;
    gap: 5px; margin-right: 8px;
}
.menu-toggle span {
    display: block; width: 22px; height: 2px;
    background: #333; border-radius: 2px;
    transition: all 0.3s;
}

/* 点击遮罩关闭侧边栏 */
.sidebar-backdrop {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 998;
}
.sidebar-backdrop.show { display: block; }