/* =============================================================
   [ASY] 全站响应式适配层 —— PC / 手机自适应浏览
   -------------------------------------------------------------
   加载顺序：必须放在 global.css / control.css / layui.css 之后
   作用：不改变原有桌面视觉，仅在小屏下覆盖固定宽度与固定定位
   注意：global.css 中 `body .layui-main{width:1000px}` 声明在
        原有 @media(max-width:768px) 之后，会把移动端宽度重新撑回
        1000px，本文件用同等/更高特异性 + 后置加载来修正该问题。
   ============================================================= */

/* ---------- 0. 基础：盒模型与媒体元素流体化（全尺寸生效） ---------- */
*, *::before, *::after { box-sizing: border-box; }

img, video, canvas, svg, iframe {
    max-width: 100%;
    height: auto;
}

/* 长串文本/URL 不撑破容器 */
body, .layui-body, .main {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---------- 1. 平板及以下（≤992px）：容器流体化 ---------- */
@media (max-width: 992px) {

    /* 修正被 body .layui-main{width:1000px} 覆盖的宽度 */
    .main,
    body .layui-main,
    .wrap,
    .wrapper,
    .main_visual {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* 数据表格：改为横向滚动，避免撑破布局 */
    table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table thead, table tbody { display: table; width: 100%; }

    /* layui 表单：小屏占满一行 */
    .layui-form-item .layui-input-inline { width: auto !important; display: block; margin-left: 0 !important; }
}

/* ---------- 2. 手机（≤768px）：后台式布局改为纵向堆叠 ---------- */
@media (max-width: 768px) {

    /* 侧边栏：取消固定定位，落到内容上方 */
    .layui-layout-admin .layui-side,
    .layui-layout-admin .layui-side-menu,
    .layui-side.layui-side-menu {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        overflow: visible !important;
        z-index: auto !important;
        background: transparent !important;
    }
    .layui-layout-admin .layui-side-scroll {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    /* 侧边栏导航树：纵向平铺 */
    .layui-side .layui-nav-tree { width: 100% !important; }
    .layui-side .layui-nav-tree .layui-nav-item { display: block; width: 100% !important; }
    .layui-side .layui-nav-tree .layui-nav-child { display: block; position: static !important; width: 100% !important; }
    .layui-side .layui-nav-tree .layui-nav-child dd { display: block; width: 100% !important; }

    /* 主体内容：取消左侧留白与绝对定位 */
    .layui-layout-admin .layui-body,
    .layui-body {
        position: static !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        padding: 10px !important;
        overflow: visible !important;
    }

    /* 顶栏：取消固定高度与定位 */
    .layui-layout-admin .layui-header,
    .layui-header {
        position: static !important;
        height: auto !important;
        padding: 8px 10px !important;
    }
    .layui-header .layui-nav { display: block; padding: 0 !important; }
    .layui-header .layui-nav .layui-nav-item { display: inline-block; }
    .layui-header .layui-nav.layui-layout-left,
    .layui-header .layui-nav.layui-layout-right {
        float: none !important;
        left: auto !important;
        right: auto !important;
        position: static !important;
        text-align: left;
    }

    /* logo */
    .layui-logo { width: 100% !important; text-align: left !important; padding: 8px 10px !important; }

    /* 通用栅格：小屏单列 */
    .layui-row > [class*="layui-col-"] { width: 100% !important; float: none !important; }

    /* 表单：控件与按钮占满，触控友好 */
    .layui-input, .layui-select, .layui-textarea {
        width: 100% !important;
        height: 44px !important;      /* 触控目标 ≥44px */
        font-size: 16px !important;   /* 防止 iOS 自动缩放 */
    }
    .layui-textarea { height: auto !important; min-height: 88px !important; }
    .layui-btn { min-height: 44px !important; line-height: 30px !important; }
    .layui-form-label { display: block !important; float: none !important; width: auto !important; text-align: left !important; padding: 8px 0 !important; }
    .layui-input-block { margin-left: 0 !important; width: 100% !important; }

    /* 弹层：小屏不溢出屏幕 */
    .layui-layer { max-width: 96% !important; }
    .layui-layer-content { overflow-x: auto; }

    /* 隐藏桌面专属装饰，避免错位 */
    .layui-hide-xs { display: none !important; }
}

/* ---------- 3. 超小屏（≤480px）：进一步压缩留白 ---------- */
@media (max-width: 480px) {
    .main, body .layui-main, .layui-body {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .layui-tab-title li { font-size: 13px !important; }
    .layui-table td, .layui-table th { padding: 6px 4px !important; font-size: 12px !important; }
}

/* ---------- 4. 打印：隐藏导航 ---------- */
@media print {
    .layui-header, .layui-side, .layui-footer { display: none !important; }
}