/* ============================================================
 * admin-mobile.css  —  管理后台「桌面美化 + 移动端适配」增强层
 * 加载在 style.css / galaxy-ui.css 之后，只做增强与响应式覆盖，
 * 不改动任何业务模板结构。断点：
 *   ≤1024px 平板：统计卡 2 列、收紧间距
 *   ≤768px  手机：侧栏变抽屉、表格横滑、筛选/表单纵向铺满
 * 设计延续暖色极简：画布 #F7F6F3 / 卡片白 / 主色 #111
 * ============================================================ */

/* ============ 一、全端桌面美化（细腻度提升） ============ */
:root {
    --shadow-card: 0 1px 2px rgba(17,17,17,.04), 0 4px 16px rgba(17,17,17,.04);
    --shadow-drawer: 4px 0 24px rgba(17,17,17,.18);
}
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(17,17,17,.12); }

/* 细滚动条（全局） */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #d4d4d2; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #bdbdbb; }
*::-webkit-scrollbar-track { background: transparent; }

/* 侧栏：更清晰的层级与选中态 */
.sidebar { transition: transform .28s cubic-bezier(.4,0,.2,1); }
.nav-item, .nav-subitem { -webkit-tap-highlight-color: transparent; }
.nav-item.active { box-shadow: 0 2px 8px rgba(17,17,17,.18); }

/* 顶栏：桌面端轻微吸顶 + 毛玻璃 */
.topbar {
    position: sticky; top: 0; z-index: 20;
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    background: rgba(255,255,255,.86);
}

/* 卡片/面板/统计卡统一柔和阴影与动效 */
.panel, .table-container, .stat-card { box-shadow: var(--shadow-card); }
.stat-card { border-radius: 14px; }
.gx-card { border-radius: 16px; }

/* 表格行高与可读性 */
.data-table th, .account-table th { white-space: nowrap; }
.data-table td, .account-table td { vertical-align: middle; }

/* 可点击元素触控更友好 */
.btn, .gx-btn, .btn-action, .pagination-btn, .nav-item, .nav-subitem {
    -webkit-tap-highlight-color: transparent;
}

/* 手机抽屉的遮罩（桌面隐藏） */
.sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(17,17,17,.42);
    z-index: 1090;
    opacity: 0;
    transition: opacity .25s ease;
}
body.sidebar-open .sidebar-backdrop { display: block; opacity: 1; }

/* 汉堡按钮（桌面隐藏，手机显示） */
.nav-toggle {
    display: none;
    width: 38px; height: 38px;
    margin-right: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 8px;
    font-size: 18px; line-height: 1;
    cursor: pointer; color: var(--text-strong);
    align-items: center; justify-content: center;
}
.topbar-title-row { display: flex; align-items: center; min-width: 0; }
.topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ 二、平板（≤1024px） ============ */
@media (max-width: 1024px) {
    .content-body { padding: 18px; }
    .content-body .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
    .stat-card { padding: 16px; gap: 12px; }
    .stat-icon { width: 44px; height: 44px; font-size: 22px; }
    .stat-value { font-size: 22px !important; }
}

/* ============ 三、手机（≤768px） ============ */
@media (max-width: 768px) {
    /* —— 侧栏变左侧抽屉 —— */
    .sidebar {
        width: 264px !important;
        transform: translateX(-100%);
        z-index: 1100;
        box-shadow: var(--shadow-drawer);
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .main-content { margin-left: 0 !important; width: 100%; }

    .nav-toggle { display: inline-flex; }

    .topbar { padding: 12px 14px; }
    .topbar h1 { font-size: 16px; }
    .topbar-right span { font-size: 12px; }
    .topbar-right .hide-mobile { display: none; }
    .content-body { padding: 14px 12px 28px; }

    /* 顶部渐变信息条收紧 */
    .user-info-bar { padding: 14px 16px !important; border-radius: 10px !important; }
    .user-info-bar .info strong { font-size: 15px !important; }

    /* 统计卡：两列 */
    .content-body .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-bottom: 14px !important; }
    .stat-card { padding: 12px !important; gap: 10px !important; border-radius: 12px !important; flex-direction: row; }
    .stat-icon { width: 40px !important; height: 40px !important; font-size: 20px !important; border-radius: 10px !important; }
    .stat-value { font-size: 19px !important; }
    .stat-label { font-size: 11px !important; }

    /* 面板/卡片 */
    .panel, .table-container { border-radius: 12px; }
    .panel-header {
        flex-direction: column; align-items: flex-start !important;
        gap: 10px; padding: 14px 16px !important;
    }
    .panel-header > * { width: 100%; }

    /* —— 宽表格：父容器横向滚动，避免列被压扁（无需逐页包裹） —— */
    .panel, .table-container, .panel-body,
    .content-body > div { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .content-body table { min-width: 100%; border-collapse: collapse; }
    .data-table, .account-table { min-width: 560px; }
    .data-table th, .account-table th { padding: 10px 12px !important; }
    .data-table td, .account-table td { padding: 10px 12px !important; white-space: nowrap; }

    /* —— 筛选/搜索条：纵向铺满 —— */
    .filter-bar { flex-direction: column !important; align-items: stretch !important; padding: 14px !important; gap: 10px !important; }
    .filter-bar form { width: 100% !important; flex-direction: column !important; align-items: stretch !important; }
    .search-form { flex-direction: column; align-items: stretch; }
    .filter-bar input, .filter-bar select,
    .search-form input, .search-form select,
    .form-input { width: 100% !important; }
    .filter-bar .btn-filter, .filter-bar .btn-reset,
    .search-form .btn { width: 100%; text-align: center; }

    /* 表单/按钮：避免拥挤、最小触控高度 */
    .btn, .gx-btn { min-height: 38px; }
    .btn-sm, .gx-btn-small { min-height: 30px; }
    .modal-content { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
    .modal-footer { flex-wrap: wrap; }
    .modal-footer .btn, .modal-footer .gx-btn { flex: 1; }

    /* 分页可横滑/换行，不溢出 */
    .pagination-container { flex-wrap: wrap; gap: 6px; }
    .pagination-btn { padding: 7px 11px; }

    /* 登录页适配（固定 400px 会在小屏溢出） */
    .login-container { padding: 16px; }
    .login-container > .gx-card,
    .login-box { width: 100% !important; max-width: 420px; padding: 28px 22px !important; }

    /* 通用工具：小屏隐藏 */
    .hidden-mobile { display: none !important; }
}

/* ============ 四、窄屏手机（≤420px）统计卡单列更宽松 ============ */
@media (max-width: 420px) {
    .content-body .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .topbar-right { display: none; } /* 极窄屏顶栏只留标题，用户信息在侧栏底部可见 */
}

/* ============================================================
 * 五、菜单栏精修（桌面/手机抽屉通用）
 * ============================================================ */
.sidebar { background: linear-gradient(180deg, #ffffff 0%, #fafaf8 100%); }
.sidebar-logo { padding: 22px 18px 16px; }
.sidebar-logo h2 {
    font-size: 15px; font-weight: 800; letter-spacing: .5px;
    display: flex; align-items: center; gap: 9px; color: #111;
}
.sidebar-logo h2::before {
    content: ''; width: 7px; height: 18px; border-radius: 4px;
    background: linear-gradient(180deg, #111 0%, #555 100%);
}
.sidebar-nav { padding: 8px 0; }
.sidebar .nav-item {
    margin: 2px 10px; padding: 10px 14px; border-radius: 9px;
    color: #4b5563; font-size: 13.5px; font-weight: 500;
    transition: background .18s, color .18s, transform .12s, box-shadow .18s;
}
.sidebar .nav-item > span:first-child { font-size: 15px; width: 20px; text-align: center; }
.sidebar .nav-item:hover { background: #f1f1f4; color: #111; transform: translateX(2px); }
.sidebar .nav-item.active {
    background: linear-gradient(135deg, #111 0%, #3a3a3a 100%);
    color: #fff; font-weight: 600;
    box-shadow: 0 3px 10px rgba(17,17,17,.22);
}
.sidebar .nav-item.active:hover { transform: none; background: linear-gradient(135deg,#111,#3a3a3a); }
.sidebar .nav-item.active .arrow { color: #d1d5db; }
/* 子菜单：浅灰圆角容器，覆盖模板内联的深色背景（提高选择器优先级） */
.sidebar .nav-submenu {
    background: #f4f4f2 !important;
    border-radius: 9px; margin: 0 10px 3px; padding: 3px 0;
}
.sidebar .nav-subitem {
    padding: 8px 14px 8px 42px; margin: 1px 6px; border-radius: 7px;
    font-size: 12.5px; color: #6b7280; border-left: none !important;
    transition: background .15s, color .15s;
}
.sidebar .nav-subitem:hover { background: #e9e9ee; color: #111; }
.sidebar .nav-subitem.active { background: #e3e9fb; color: #1d4ed8; font-weight: 600; }
/* 底部用户卡 */
.sidebar-footer { border-top: 1px solid var(--border); background: rgba(0,0,0,.015); }
.user-avatar {
    background: linear-gradient(135deg, #111 0%, #444 100%) !important;
    box-shadow: 0 2px 6px rgba(17,17,17,.25);
}
.btn-logout { border-radius: 9px; font-weight: 600; transition: all .18s; }
.btn-logout:hover { transform: translateY(-1px); }