/**
 * mobile.css - 移动端适配样式
 * 仅包含响应式布局调整，视觉美化由 theme.css 负责
 */

/* ============================================
   全局触控优化
   ============================================ */
* {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* ============================================
   移动端适配 - 小屏幕 (< 768px)
   ============================================ */

@media screen and (max-width: 768px) {

    /* 全局容器 */
    .layui-fluid {
        padding: 10px !important;
    }

    /* ---- 头部导航优化 ---- */
    .layui-layout-admin .layui-header {
        height: 48px;
        padding: 0 8px;
    }

    .layui-layout-admin .layui-logo,
    .layui-layout-admin .layui-header .layui-nav .layui-nav-item {
        height: 48px;
        line-height: 48px;
    }

    .layui-layout-admin .layui-header .layui-nav-item {
        margin: 0 4px;
    }

    .layui-layout-admin .layui-header .layui-nav-item a {
        padding: 0 6px;
    }

    /* 页面标签区优化 */
    .layadmin-pagetabs {
        top: 48px;
        height: 36px;
        line-height: 36px;
        padding: 0 70px 0 30px;
    }

    .layadmin-pagetabs .layui-tab-title {
        height: 36px;
    }

    .layadmin-pagetabs .layui-tab-title li {
        line-height: 36px;
        max-width: 120px;
        font-size: 12px;
        padding-right: 30px;
    }

    .layadmin-pagetabs .layadmin-tabs-control {
        width: 30px;
    }

    /* 主体区域 */
    .layui-layout-admin .layui-body {
        top: 84px; /* 48px header + 36px tabs */
    }

    .layadmin-tabspage-none .layui-layout-admin .layui-body {
        top: 48px;
    }

    /* ---- 数据卡片网格 (2列) ---- */
    .layui-col-sm6.layui-col-md3 {
        width: 50%;
    }

    .layuiadmin-card-list {
        padding: 12px;
    }

    .layuiadmin-big-font {
        font-size: 22px !important;
        line-height: 26px !important;
    }

    .layuiadmin-card-list p {
        font-size: 12px;
    }

    .layuiadmin-span-color {
        font-size: 12px;
    }

    .layuiadmin-badge {
        font-size: 10px;
        padding: 1px 6px !important;
    }

    /* ---- 表单优化 ---- */
    .layui-form-label {
        width: auto !important;
        float: none !important;
        display: block;
        padding: 6px 0 !important;
        text-align: left !important;
        font-size: 14px;
    }

    .layui-input-block,
    .layui-input-inline {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .layui-form-item .layui-input-inline {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 8px;
    }

    .layui-form-item .layui-inline {
        width: 100%;
        margin-right: 0;
    }

    /* 增大输入框触摸区域 */
    .layui-input,
    .layui-textarea {
        height: 44px;
        line-height: 44px;
        font-size: 15px;
        padding: 0 12px;
    }

    .layui-textarea {
        height: auto;
        line-height: 1.6;
        padding: 10px 12px;
    }

    /* 增大按钮触摸区域 */
    .layui-btn {
        height: 44px;
        line-height: 44px;
        padding: 0 16px;
        font-size: 15px;
    }

    .layui-btn-xs {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        font-size: 12px;
    }

    .layui-btn-sm {
        height: 36px;
        line-height: 36px;
        padding: 0 12px;
        font-size: 13px;
    }

    /* ---- 表格移动端适配 ---- */
    .layui-table-view {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .layui-table-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .layui-table th,
    .layui-table td {
        padding: 8px 10px;
        font-size: 13px;
    }

    .layui-table-cell {
        padding: 8px 10px;
        font-size: 13px;
    }

    /* 表格工具栏适配 */
    .layui-table-tool {
        padding: 8px;
    }

    /* 表格分页适配 */
    .layui-table-page {
        padding: 8px;
    }

    .layui-laypage a,
    .layui-laypage span {
        margin: 2px;
        min-width: 32px;
        height: 32px;
        line-height: 32px;
    }

    /* ---- 搜索栏适配 ---- */
    .layuiadmin-card-header-auto .layui-form-item {
        margin-bottom: 10px;
    }

    .layuiadmin-card-header-auto .layui-inline {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .layuiadmin-card-header-auto .layui-inline .layui-input-block {
        margin-left: 0 !important;
    }

    .layuiadmin-card-header-auto .layui-inline .layui-form-label {
        display: block;
        width: auto !important;
        float: none;
        text-align: left;
        padding: 4px 0;
    }

    /* 搜索按钮全宽 */
    .layuiadmin-btn-useradmin {
        width: 100%;
    }

    /* ---- 日期筛选区优化 ---- */
    .layui-row.layui-col-space10 > .layui-col-md4 {
        width: 100%;
    }

    .layui-row.layui-col-space10 > .layui-col-md3 {
        width: 50%;
    }

    .layui-row.layui-col-space10 > .layui-col-md6 {
        width: 100%;
    }

    /* ---- 弹窗适配 ---- */
    .layui-layer {
        max-width: 95vw !important;
        min-width: auto !important;
    }

    .layui-layer-admin {
        width: 95vw !important;
    }

    .layui-layer-content {
        padding: 12px !important;
    }

    /* ---- 面包屑隐藏 ---- */
    .layadmin-header {
        display: none !important;
    }

    /* ---- 结算统计卡片适配 ---- */
    #settlement-stats {
        flex-wrap: wrap !important;
    }

    #settlement-stats .layui-col-md3 {
        width: 50%;
        margin-bottom: 10px;
    }

    #settlement-stats .layui-card {
        height: auto !important;
        min-height: 130px;
        padding: 12px !important;
    }

    #settlement-stats h2 {
        font-size: 20px;
    }

    #settlement-stats small {
        font-size: 11px;
    }

    /* ---- 结算操作按钮适配 ---- */
    #apply-settlement-btn,
    #export-settlement-btn {
        width: 100%;
        margin: 5px 0 !important;
    }

    /* ---- URL复制区域适配 ---- */
    .url-copy-item .layui-inline {
        flex-direction: column;
    }

    .url-copy-item .layui-inline .layui-input-inline {
        margin-right: 0;
        margin-bottom: 8px;
        width: 100%;
    }

    /* ---- 下拉菜单适配 ---- */
    .layui-nav-child {
        min-width: 150px;
    }

    /* ---- 侧边栏优化 ---- */
    .layui-side-menu .layui-nav .layui-nav-item a {
        padding: 0 15px 0 40px;
        font-size: 14px;
    }

    .layui-side-menu .layui-nav>.layui-nav-item .layui-icon:first-child {
        left: 15px;
    }

    /* ---- 输入框组适配 ---- */
    .layui-input-group {
        flex-direction: column;
    }

    .layui-input-group .layui-input {
        border-radius: 6px;
        margin-bottom: 8px;
    }

    .layui-input-suffix {
        width: 100%;
    }

    .layui-input-suffix .layui-btn {
        width: 100%;
    }

    /* ---- 表单辅助文字适配 ---- */
    .layui-form-mid {
        margin-left: 0 !important;
        padding: 6px 0;
    }

    /* ---- 提交按钮组 ---- */
    .layui-form-item .layui-input-block .layui-btn {
        margin-bottom: 8px;
    }

    /* ---- 卡片顶部彩线在小屏时更细 ---- */
    .layui-row > [class*="layui-col-"]:nth-child(n) .layui-card {
        border-top-width: 2px;
    }
}

/* ============================================
   移动端适配 - 超小屏幕 (< 480px)
   ============================================ */

@media screen and (max-width: 480px) {

    /* 数据卡片保持2列 */
    .layui-col-sm6.layui-col-md3 {
        width: 50%;
    }

    .layuiadmin-big-font {
        font-size: 18px !important;
        line-height: 22px !important;
    }

    /* 卡片头部字体缩小 */
    .layui-card-header {
        font-size: 13px;
        padding: 0 12px;
        height: 38px;
        line-height: 38px;
    }

    /* 结算统计卡片 */
    #settlement-stats .layui-col-md3 {
        width: 50%;
    }

    #settlement-stats h2 {
        font-size: 16px;
    }

    /* 弹窗全屏 */
    .layui-layer {
        width: 100vw !important;
        left: 0 !important;
        top: 0 !important;
        border-radius: 0 !important;
    }

    /* 页面标签更紧凑 */
    .layadmin-pagetabs .layui-tab-title li {
        max-width: 90px;
        font-size: 11px;
    }
}

/* ============================================
   移动端适配 - 中等屏幕平板 (768px - 992px)
   ============================================ */

@media screen and (min-width: 769px) and (max-width: 992px) {

    .layui-fluid {
        padding: 12px;
    }

    /* 表单优化 */
    .layui-form-label {
        width: 90px;
    }

    .layui-input-block {
        margin-left: 120px;
    }

    /* 结算统计卡片 */
    #settlement-stats .layui-col-md3 {
        width: 50%;
    }

    /* 日期筛选 */
    .layui-row.layui-col-space10 > .layui-col-md4 {
        width: 50%;
    }
}

/* ============================================
   安全区域适配 (iPhone X+ 等刘海屏)
   ============================================ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layui-layout-admin .layui-footer {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .layui-layout-admin .layui-body .layadmin-tabsbody-item {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ============================================
   横屏模式适配
   ============================================ */

@media screen and (max-height: 500px) and (orientation: landscape) {

    .layui-layout-admin .layui-header {
        height: 40px;
    }

    .layui-layout-admin .layui-logo,
    .layui-layout-admin .layui-header .layui-nav .layui-nav-item {
        height: 40px;
        line-height: 40px;
    }

    .layadmin-pagetabs {
        top: 40px;
        height: 32px;
        line-height: 32px;
    }

    .layui-layout-admin .layui-body {
        top: 72px;
    }
}