/* ============================================================
   后台响应式适配（纯样式层，不改任何功能/接口/交互逻辑）
   引入：<link rel="stylesheet" href="/static/admin-responsive.css">
   断点：≤768px 手机抽屉侧栏 + 表单堆叠；769~1024px 平板压缩侧栏
   ============================================================ */

/* ==================== 中小桌面（992~1366px） ==================== */
/* 顶栏 Logo 列默认仅 16.7% 宽，此区间放不下完整标题会换行溢出顶栏，
   加宽到 30% 后标题完整显示；右侧按钮组为 absolute 定位不受影响 */
@media (min-width: 992px) and (max-width: 1366px) {
    .admin-header .layui-col-md2 { width: 30% !important; }
    .admin-logo { font-size: 16px; }
}

/* ==================== 平板（≤1024px） ==================== */
/* 注意：本文件在页面内联 <style> 之前加载，同等优先级会被后加载的内联样式覆盖，
   因此关键布局属性必须用 !important 才能生效（.admin-body 原始 left:220px 写在页面里） */
@media (max-width: 1024px) {
    .admin-side { width: 200px !important; }
    .admin-body { left: 200px !important; padding: 10px !important; }
}

/* ==================== 手机（≤768px） ==================== */
@media (max-width: 768px) {

    /* ---------- 主框架：侧边栏变抽屉，汉堡按钮出现 ---------- */
    .menu-toggle {
        display: inline-block !important;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 26px;
        line-height: 60px;
        padding: 0 12px;
        margin: 0;
        cursor: pointer;
        position: absolute;
        left: 8px;
        top: 0;
        z-index: 1001;
    }

    .admin-logo {
        font-size: 15px !important;
        text-align: left !important;
        padding-left: 52px !important;
        max-width: calc(100vw - 150px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .admin-header-right { right: 8px; }
    .admin-header-right a { padding: 0 6px; font-size: 13px; }
    /* 手机端顶栏空间有限：新订单提醒只留图标 */
    #notifyState { display: none; }

    .admin-side {
        width: 240px !important;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
    }

    body.side-open .admin-side { transform: translateX(0); }

    .admin-side-mask {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 998;
    }

    body.side-open .admin-side-mask { display: block; }

    /* 关键修复：页面内联样式 .admin-body { left:220px } 会覆盖本文件的普通规则，
       必须用 !important 才能真正取消内容区偏移，否则手机端主内容被顶到右侧只剩一半宽度 */
    .admin-body {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 8px !important;
    }

    /* ---------- 登录页：隐藏左图，表单全宽 ---------- */
    .login-container {
        width: 92% !important;
        max-width: 420px;
        height: auto;
        flex-direction: column;
    }
    .login-image { display: none; }
    .login-form { padding: 32px 24px; }

    /* ---------- 通用卡片与排版 ---------- */
    .layui-card-header, .admin-card-header { font-size: 15px; padding: 12px 10px; }
    .layui-card-body, .admin-card-body { padding: 8px; }
    /* 静态表格（欢迎页今日预约等）容器内横向滚动 */
    .admin-card-body { overflow-x: auto; }
    .stat-card { padding: 14px; margin-bottom: 10px; }
    .stat-icon { width: 46px; height: 46px; font-size: 20px; margin-right: 10px; }
    .stat-number { font-size: 20px; }

    /* ---------- 搜索/筛选表单：纵向堆叠，输入框全宽 ---------- */
    .layui-form .layui-inline {
        display: block;
        margin-right: 0 !important;
        margin-bottom: 8px;
    }
    .layui-form .layui-input-inline { width: 100%; margin-right: 0; }
    .layui-form .layui-form-label {
        width: auto;
        padding: 0 0 4px 0;
        text-align: left;
        display: block;
    }

    /* ---------- layui 数据表格：单元格收敛 + 容器不留白 ---------- */
    .layui-table-view { margin: 0 !important; }
    .layui-table-cell { padding: 0 8px; }
    .layui-table-tool-temp .layui-inline { margin-bottom: 4px; }

    /* ---------- 弹窗：不超出屏宽 ---------- */
    .layui-layer { max-width: 94vw !important; }
    .layui-layer-page { width: 94vw !important; }
    .layui-layer-title { font-size: 14px; padding: 0 12px; }
    .layui-layer-content { word-break: break-word; }
    .layui-layer-btn a { padding: 0 12px; }

    /* ---------- 分页：允许换行 ---------- */
    .layui-laypage { display: flex; flex-wrap: wrap; row-gap: 6px; }
    .layui-laypage > * { white-space: nowrap; }
}

/* 超小屏（≤400px）进一步收敛 */
@media (max-width: 400px) {
    .admin-logo { font-size: 13px; }
    .layui-card-header, .admin-card-header { font-size: 14px; }
    .layui-layer-page { width: 97vw !important; }
}