/* 移动端优化样式 */

/* 全局移动端基础设置 */
@media (max-width: 768px) {
    /* 确保页面完全适配屏幕宽度 */
    html {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* 确保所有元素不超出屏幕宽度 */
    * {
        box-sizing: border-box !important;
    }
    
    /* 防止任何容器超出屏幕 */
    .container,
    .container-fluid,
    .max-w-7xl,
    .main-content {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        box-sizing: border-box !important;
    }
    
    /* 防止任何元素超出视口宽度 */
    div, section, article, main, aside, header, footer, nav {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* 确保表格不超出屏幕 */
    table {
        max-width: 100% !important;
        table-layout: fixed !important;
        word-wrap: break-word !important;
    }
    
    /* 确保图片和媒体元素响应式 */
    img, video, iframe {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 防止预格式化文本超出 */
    pre, code {
        max-width: 100% !important;
        overflow-x: auto !important;
        word-wrap: break-word !important;
        white-space: pre-wrap !important;
    }

/* 基础移动端设置 */
    /* 财务分析页面关键指标卡片强制2列布局 - 最高优先级 */
    body .statistics-container .grid[class*="grid-cols-1"][class*="md:grid-cols-4"],
    body .grid[class*="grid-cols-1"][class*="md:grid-cols-4"],
    .grid.grid-cols-1 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    /* 通用移动端网格布局强制规则 */
    .grid[class*="grid-cols-1"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* 针对财务分析页面的特定规则 */
    [class*="statistics"] .grid,
    .statistics-container .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    /* 防止iOS缩放 */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important;
    }
    
    /* 触摸目标优化 */
    .btn,
    .nav-link,
    .form-control,
    .form-select,
    .table th,
    .table td {
        min-height: 44px;
    }
    
    /* 表格优化 */
    .table-responsive {
        font-size: 0.85rem;
    }
    
    .table th,
    .table td {
        padding: 0.5rem 0.25rem;
        vertical-align: middle;
    }
    
    /* 按钮组优化 */
    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    /* 卡片内边距优化 */
    .card-body {
        padding: 1rem;
    }
    
    /* 按钮大小优化 */
    .btn {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
    
    /* 分页优化 */
    .pagination {
        font-size: 0.9rem;
    }
    
    .pagination .page-link {
        padding: 0.5rem 0.75rem;
    }
    
    /* 表单间距优化 */
    .mb-3 {
        margin-bottom: 1rem !important;
    }
    
    /* 移动端侧边栏 */
    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: min(280px, 80vw) !important;
        max-width: 80vw !important;
        height: 100vh;
        z-index: 1050;
        transition: left 0.3s ease;
        overflow-y: auto;
        box-sizing: border-box !important;
    }
    
    .sidebar.show {
        left: 0;
    }
    
    /* 移动端导航栏样式 */
    nav.block {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: min(280px, 80vw) !important;
        max-width: 80vw !important;
        height: 100vh !important;
        z-index: 1050 !important;
        overflow-y: auto !important;
        transform: translateX(0) !important;
        transition: transform 0.3s ease !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    
    @media (max-width: 767px) {
        /* 移动端导航栏默认隐藏 */
        nav {
            transform: translateX(-100%) !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: min(280px, 80vw) !important;
            max-width: 80vw !important;
            height: 100vh !important;
            z-index: 1050 !important;
            overflow-y: auto !important;
            transition: transform 0.3s ease !important;
            box-sizing: border-box !important;
        }
        
        nav.hidden {
            transform: translateX(-100%) !important;
        }
        
        nav.block {
            transform: translateX(0) !important;
        }
        
        nav.md\:block {
            display: block !important;
        }
    }
    
    .main-content {
        margin-left: 0;
        width: 100%;
        background-color: #E6F3FF; /* 浅蓝色背景，匹配图片中的背景色 */
    }
    
    /* 移动端导航按钮 */
    .mobile-nav-toggle {
        display: block !important;
        position: fixed;
        bottom: 15px;
        left: 15px;
        z-index: 1060;
        background: linear-gradient(135deg, #00BFFF 0%, #0099CC 100%);
        border: none;
        border-radius: 8px;
        padding: 10px 12px;
        color: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    
    /* 移动端遮罩层 */
    .mobile-nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1030;
    }
    
    .mobile-nav-overlay.show {
        display: block;
    }
    
    /* 移动端头部 */
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
        background: linear-gradient(135deg, #00BFFF 0%, #0099CC 100%);
        color: white;
        margin-bottom: 20px;
        border-radius: 0 0 15px 15px;
    }
    
    .mobile-header h4 {
        margin: 0;
        font-size: 1.2rem;
    }
    
    /* 移动端导航栏整体优化 */
    @media (max-width: 767px) {
        nav .p-6 {
            padding: 1rem !important;
        }
        
        /* Logo区域优化 */
        nav .flex.flex-col.items-center.mb-3 {
            margin-bottom: 1rem !important;
        }
        
        nav .flex.flex-col.items-center.mb-3 .w-24 {
            width: 4rem !important;
            margin-bottom: 0.5rem !important;
        }
        
        nav .flex.flex-col.items-center.mb-3 .text-xl {
            font-size: 0.875rem !important;
            line-height: 1.2 !important;
            margin-bottom: 0.5rem !important;
        }
        
        /* 用户信息区域优化 */
        nav .mb-8.p-4 {
            margin-bottom: 1rem !important;
            padding: 0.75rem !important;
        }
        
        nav .mb-8.p-4 .flex.items-center.space-x-3 {
            gap: 0.5rem !important;
            margin-bottom: 0 !important;
        }
        
        nav .mb-8.p-4 .w-8.h-8 {
            width: 1.75rem !important;
            height: 1.75rem !important;
        }
        
        /* 用户名和角色信息在同一行显示 */
        nav .mb-8.p-4 .flex.items-center.space-x-3 > div {
            display: flex !important;
            align-items: left !important;
            gap: 0.5rem !important;
        }
        
        nav .mb-8.p-4 .font-medium {
            font-size: 0.875rem !important;
            line-height: 1.2 !important;
            margin: 0 !important;
        }
        
        nav .mb-8.p-4 .text-xs {
            font-size: 0.75rem !important;
            line-height: 1.1 !important;
            margin: 0 !important;
        }
        
        nav .mb-8.p-4 .text-xs i {
            font-size: 0.7rem !important;
            margin-right: 0.25rem !important;
        }
        
        /* 导航菜单间距优化 */
        nav .space-y-2 {
            gap: 0.5rem !important;
        }
        
        nav .space-y-2 a {
            padding: 0.75rem 1rem !important;
            font-size: 0.875rem !important;
        }
        
        nav .space-y-2 .pt-4.mt-4 {
            padding-top: 1rem !important;
            margin-top: 1rem !important;
        }
    }
    
    /* 移动端导航菜单项对齐优化 */
    nav .flex.items-center.space-x-3 {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }
    
    nav .flex.items-center.space-x-3 .w-5.h-5 {
        width: 1.25rem !important;
        height: 1.25rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    
    nav .flex.items-center.space-x-3 span {
        flex: 1 !important;
        line-height: 1.25rem !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* 确保图标垂直居中 */
    nav .flex.items-center.space-x-3 i {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        line-height: 1 !important;
    }
    
    /* 调整背景颜色为浅蓝色调 */
    .mobile-header, .sidebar {
        background: linear-gradient(135deg, #E6F3FF 0%, #CCE6FF 100%); /* 浅蓝色渐变，与背景协调 */
        color: #333; /* 深色文字，确保在浅背景上可读 */
    }
    
    h2, h4 {
        color: #333; /* 深色标题文字 */
        font-size: 1.25rem; /* 增加字体大小 */
        font-weight: bold; /* 加粗 */
    }

    .form-select {
        min-height: 50px; /* 增加触控区域 */
        font-size: 16px; /* 确保可读 */
        background-color: #ffffff; /* 白色背景以突出 */
        color: #333; /* 深色文字 */
    }
    /* 确保 JavaScript 触发的变化在移动端顺滑 */
    select.form-select option {
        padding: 10px; /* 增加选项间距 */
    }
    
    /* 财务分析页面移动端优化 */
    .statistics-container {
        padding: 0.5rem !important;
    }
    
    /* 收支记录页面移动端优化 */
    .transactions-container {
        padding: 0.5rem !important;
    }
    
    /* 页面标题区域优化 */
    .flex.items-center.justify-between.mb-8 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    
    .flex.items-center.justify-between.mb-8 > div:last-child {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    /* 筛选区域优化 */
     .grid[class*="grid-cols-1"][class*="md:grid-cols-3"] {
         grid-template-columns: 1fr !important;
         gap: 1rem !important;
     }
     
     /* 收支记录页面筛选按钮区域优化 */
     .transactions-container .flex.items-center.justify-between {
         flex-direction: row !important;
         align-items: center !important;
         justify-content: space-between !important;
         flex-wrap: wrap !important;
         gap: 0.75rem !important;
     }
     
     .transactions-container .flex.items-center.space-x-4 {
         display: flex !important;
         flex-direction: row !important;
         align-items: center !important;
         gap: 0.75rem !important;
         flex-shrink: 0 !important;
     }
     
     .transactions-container #filterBtn,
     .transactions-container #resetBtn {
         white-space: nowrap !important;
         flex-shrink: 0 !important;
         min-width: 5rem !important;
         padding: 0.5rem 1.25rem !important;
     }
     
     /* 筛选表单元素高度统一 */
     .transactions-container input[type="date"],
     .transactions-container select {
         height: 2.5rem !important;
         min-height: 2.5rem !important;
         max-height: 2.5rem !important;
         line-height: 1.5 !important;
         padding: 0.5rem 1rem !important;
         box-sizing: border-box !important;
         border: 1px solid #e5e7eb !important;
         vertical-align: top !important;
         -webkit-appearance: none !important;
         -moz-appearance: none !important;
         appearance: none !important;
     }
     
     /* 编辑收支记录页面表单元素高度统一 */
     .w-full.px-4.py-3.bg-white.border.border-gray-200.rounded-xl {
         height: 48px !important;
         min-height: 48px !important;
         padding: 12px 16px !important;
         box-sizing: border-box !important;
         display: flex !important;
         align-items: center !important;
     }
     
     /* 编辑页面日期输入框特殊处理 - 更高优先级 */
     form input[type="date"].w-full.px-4.py-3.bg-white.border.border-gray-200.rounded-xl,
     div input[type="date"].w-full.px-4.py-3.bg-white.border.border-gray-200.rounded-xl,
     input[type="date"].w-full.px-4.py-3.bg-white.border.border-gray-200.rounded-xl {
         height: 48px !important;
         min-height: 48px !important;
         padding: 12px 16px !important;
         line-height: 1.5 !important;
         width: 100% !important;
         max-width: 250px !important;
         box-sizing: border-box !important;
         flex-shrink: 1 !important;
     }
     
     /* 网格布局中的日期输入框宽度调整 - 更高优先级 */
     .grid div input[type="date"].w-full.px-4.py-3.bg-white.border.border-gray-200.rounded-xl,
     .grid input[type="date"].w-full.px-4.py-3.bg-white.border.border-gray-200.rounded-xl {
         width: 100% !important;
         max-width: 250px !important;
         min-width: 0 !important;
         flex: 1 !important;
     }
     
     /* 强制日期输入框宽度 - 最高优先级 */
     #date {
         max-width: 250px !important;
         width: 100% !important;
     }
     
     /* 移动端响应式调整 */
     @media (max-width: 768px) {
         input[type="date"] {
             max-width: 200px !important;
         }
         #date {
             max-width: 200px !important;
         }
     }
     
     /* 金额输入框特殊处理 - 带左侧图标 */
     input[type="number"].w-full.pl-8.pr-4.py-3.bg-white.border.border-gray-200.rounded-xl {
         height: 48px !important;
         min-height: 48px !important;
         padding: 12px 32px 12px 32px !important;
         line-height: 1.5 !important;
         width: 100% !important;
         max-width: 100% !important;
         box-sizing: border-box !important;
     }
     
     /* 确保所有表单输入框宽度一致 */
     .w-full.px-4.py-3.bg-white.border.border-gray-200.rounded-xl,
     select.w-full.px-4.py-3.bg-white.border.border-gray-200.rounded-xl,
     input.w-full.px-4.py-3.bg-white.border.border-gray-200.rounded-xl,
     input.w-full.pl-8.pr-4.py-3.bg-white.border.border-gray-200.rounded-xl,
     textarea.w-full.px-4.py-3.bg-white.border.border-gray-200.rounded-xl {
         width: 100% !important;
         max-width: 100% !important;
         min-width: 0 !important;
         box-sizing: border-box !important;
         height: 48px !important;
         min-height: 48px !important;
     }
     
     /* textarea特殊处理 - 允许多行 */
     textarea.w-full.px-4.py-3.bg-white.border.border-gray-200.rounded-xl {
         height: auto !important;
         min-height: 96px !important;
     }
     
     /* 网格布局中的表单元素宽度统一 */
     .grid.grid-cols-1.md\:grid-cols-2.gap-8 > div {
         width: 100% !important;
         max-width: 100% !important;
     }
     
     .grid.grid-cols-1.md\:grid-cols-2.gap-8 > div > input,
     .grid.grid-cols-1.md\:grid-cols-2.gap-8 > div > select,
     .grid.grid-cols-1.md\:grid-cols-2.gap-8 > div > textarea,
     .grid.grid-cols-1.md\:grid-cols-2.gap-8 > div > .relative > input,
     .grid.grid-cols-1.md\:grid-cols-2.gap-8 > div > .relative > select {
         width: 100% !important;
         max-width: 100% !important;
         box-sizing: border-box !important;
         height: 48px !important;
         min-height: 48px !important;
     }
     
     /* textarea在网格中的特殊处理 */
     .grid.grid-cols-1.md\:grid-cols-2.gap-8 > div > textarea,
     .grid.grid-cols-1.md\:grid-cols-2.gap-8 > div > .relative > textarea {
         height: auto !important;
         min-height: 96px !important;
     }
     
     /* 添加收支页面表单布局优化 - 与编辑页面保持一致 */
     #addRecordForm .grid.grid-cols-1.md\:grid-cols-2.gap-8 {
         grid-template-columns: 1fr !important;
         gap: 1.5rem !important;
     }
     
     /* 添加收支页面表单元素统一样式 */
     #addRecordForm input[type="date"] {
         width: 100% !important;
         max-width: 200px !important;
         height: 48px !important;
         min-height: 48px !important;
         padding: 12px 16px !important;
         box-sizing: border-box !important;
         border: 1px solid #e5e7eb !important;
         border-radius: 0.75rem !important;
         background-color: white !important;
         font-size: 14px !important;
     }
     
     #addRecordForm input[type="number"],
     #addRecordForm select,
     #addRecordForm textarea {
         width: 100% !important;
         max-width: 100% !important;
         height: 48px !important;
         min-height: 48px !important;
         padding: 12px 16px !important;
         box-sizing: border-box !important;
         border: 1px solid #e5e7eb !important;
         border-radius: 0.75rem !important;
         background-color: white !important;
         font-size: 14px !important;
     }
     
     /* 添加收支页面日期输入框特殊处理 - 确保与其他输入框一致 */
    #addRecordForm #date {
        width: 100% !important;
        max-width: 320px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 0.75rem !important;
        background-color: white !important;
        font-size: 14px !important;
    }
     
     /* 添加收支页面金额输入框特殊处理 */
     #addRecordForm input[type="number"].pl-8 {
         padding-left: 32px !important;
         padding-right: 16px !important;
     }
     
     /* 添加收支页面textarea特殊处理 */
     #addRecordForm textarea {
         height: auto !important;
         min-height: 96px !important;
         resize: none !important;
     }
     
     /* 添加收支页面单选框容器优化 */
     #addRecordForm .flex.space-x-4 {
         display: flex !important;
         flex-direction: row !important;
         align-items: left !important;
     }
     
     /* 添加收支页面单选框标签优化 */
     #addRecordForm .flex.items-center.space-x-3.cursor-pointer {
         display: flex !important;
         flex-direction: row !important;
         align-items: left !important;
         cursor: pointer !important;
     }
     
     /* 移动端响应式调整 - 添加收支页面 */
     @media (max-width: 768px) {
         #addRecordForm .grid.grid-cols-1.md\:grid-cols-2.gap-8 {
             gap: 1rem !important;
         }
     }
     
     /* 编辑收支页面表单布局优化 - 与添加页面保持一致 */
     #editRecordForm .grid.grid-cols-1.md\:grid-cols-2.gap-8 {
         grid-template-columns: 1fr !important;
         gap: 1.5rem !important;
     }
     
     /* 编辑收支页面表单元素统一样式 */
     #editRecordForm input[type="date"],
     #editRecordForm input[type="number"],
     #editRecordForm select,
     #editRecordForm textarea {
         width: 100% !important;
         max-width: 100% !important;
         height: 48px !important;
         min-height: 48px !important;
         padding: 12px 16px !important;
         box-sizing: border-box !important;
         border: 1px solid #e5e7eb !important;
         border-radius: 0.75rem !important;
         background-color: white !important;
         font-size: 14px !important;
     }
     
     /* 编辑收支页面日期输入框特殊处理 - 确保与其他输入框一致 */
     #editRecordForm #date {
         width: 100% !important;
         max-width: 320px !important;
         height: 48px !important;
         min-height: 48px !important;
         padding: 12px 16px !important;
         box-sizing: border-box !important;
         border: 1px solid #e5e7eb !important;
         border-radius: 0.75rem !important;
         background-color: white !important;
         font-size: 14px !important;
     }
     
     /* 编辑收支页面金额输入框特殊处理 */
     #editRecordForm input[type="number"].pl-8 {
         padding-left: 32px !important;
         padding-right: 16px !important;
     }
     
     /* 编辑收支页面textarea特殊处理 */
     #editRecordForm textarea {
         height: auto !important;
         min-height: 96px !important;
         resize: none !important;
     }
     
     /* 编辑收支页面单选框容器优化 */
     #editRecordForm .flex.space-x-4 {
         display: flex !important;
         flex-direction: row !important;
         gap: 8px !important;
         align-items: center !important;
     }
     
     /* 编辑收支页面单选框标签优化 */
     #editRecordForm .flex.items-center.space-x-3.cursor-pointer {
         display: flex !important;
         flex-direction: row !important;
         align-items: center !important;
         gap: 6px !important;
         cursor: pointer !important;
     }
     
     /* 移动端响应式调整 - 编辑收支页面 */
     @media (max-width: 768px) {
         #editRecordForm .grid.grid-cols-1.md\:grid-cols-2.gap-8 {
             gap: 1rem !important;
         }
     }
     
     /* 编辑页面单选框容器优化 */
     .flex.space-x-4 {
         display: flex !important;
         flex-direction: row !important;
         gap: 8px !important;
         align-items: center !important;
     }
     
     /* 编辑页面单选框标签优化 */
     .flex.items-center.space-x-3.cursor-pointer {
         display: flex !important;
         flex-direction: row !important;
         align-items: center !important;
         gap: 6px !important;
         cursor: pointer !important;
     }
     
     /* 编辑页面单选框文字样式 */
     .flex.items-center.space-x-3.cursor-pointer span {
         font-size: 14px !important;
         font-weight: 500 !important;
         color: #374151 !important;
         white-space: nowrap !important;
         order: 2 !important;
     }
     
     /* 编辑页面单选框图标容器 */
     .flex.items-center.space-x-3.cursor-pointer .relative {
         order: 1 !important;
         flex-shrink: 0 !important;
     }
     
     /* 确保下拉菜单箭头不影响高度 */
     .transactions-container select {
         background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>') !important;
         background-repeat: no-repeat !important;
         background-position: right 0.75rem center !important;
         background-size: 0.75rem !important;
         padding-right: 2.5rem !important;
     }
    
    /* 表格容器优化 */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* 表格优化 */
    table {
        font-size: 0.75rem !important;
        min-width: 600px !important;
        table-layout: fixed !important;
    }
    
    table th,
    table td {
        padding: 0.5rem 0.25rem !important;
        white-space: nowrap !important;
    }
    
    /* 移动端表格列宽优化 */
    .transactions-container table {
        width: 100% !important;
    }
    
    /* 日期列 */
    .transactions-container table th:nth-child(1),
    .transactions-container table td:nth-child(1) {
        width: 70px !important;
        max-width: 70px !important;
        padding: 0.5rem 0.2rem !important;
        font-size: 0.7rem !important;
    }
    
    /* 交易类型列 */
    .transactions-container table th:nth-child(2),
    .transactions-container table td:nth-child(2) {
        width: 50px !important;
        max-width: 50px !important;
        padding: 0.5rem 0.15rem 0.5rem 0.3rem !important;
        font-size: 0.7rem !important;
    }
    
    /* 分类列紧凑显示 */
    .transactions-container table th:nth-child(3),
    .transactions-container table td:nth-child(3) {
        width: 55px !important;
        max-width: 55px !important;
        padding: 0.5rem 0.15rem !important;
        font-size: 0.7rem !important;
    }
    
    /* 金额列紧凑显示 */
    .transactions-container table th:nth-child(4),
    .transactions-container table td:nth-child(4) {
        width: 65px !important;
        max-width: 65px !important;
        padding: 0.5rem 0.15rem !important;
        font-size: 0.7rem !important;
        text-align: right !important;
    }
    
    /* 操作列 */
    .transactions-container table th:nth-child(6),
    .transactions-container table td:nth-child(6) {
        width: 40px !important;
        max-width: 40px !important;
        padding: 0.15rem 0.15rem !important;
    }
    
    /* 备注列允许换行显示 */
    .transactions-container table td:nth-child(5) {
        white-space: normal !important;
        word-wrap: break-word !important;
        word-break: break-all !important;
        width: auto !important;
        min-width: 80px !important;
        line-height: 1.3 !important;
        vertical-align: top !important;
        padding: 0.5rem 0.3rem !important;
    }
    
    /* 备注列标题也允许换行 */
    .transactions-container table th:nth-child(5) {
        white-space: normal !important;
        word-wrap: break-word !important;
        vertical-align: top !important;
    }
    
    /* 操作列保持在一行显示 */
    .transactions-container table td:last-child {
        white-space: nowrap !important;
        vertical-align: top !important;
    }
    
    /* 操作按钮容器优化 */
    .transactions-container table td:last-child .flex {
        flex-wrap: nowrap !important;
        gap: 0.1rem !important;
        align-items: flex-start !important;
    }
    
    /* 确保其他列也垂直对齐到顶部 */
    .transactions-container table td {
        vertical-align: top !important;
    }
    
    /* 分类管理页面移动端优化 */
    
    /* 移动端显示/隐藏类 */
     @media (max-width: 768px) {
         .d-none-mobile {
             display: none !important;
         }
         
         .d-block-mobile {
             display: flex !important;
         }
     }
     
     @media (min-width: 769px) {
         .d-block-mobile {
             display: none !important;
         }
     }
    
    /* 分类管理页面悬浮按钮样式 */
    .categories-container .fab-button {
        bottom: 1.5rem !important;
        right: 1.5rem !important;
        width: 3.5rem !important;
        height: 3.5rem !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        transition: all 0.3s ease !important;
        background-color: #4f46e5 !important; /* indigo-600 */
        z-index: 50 !important;
    }
    
    .categories-container .fab-button:hover,
    .categories-container .fab-button:active {
        transform: scale(1.05) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
        background-color: #4338ca !important; /* indigo-700 */
    }
    
    .categories-container .fab-button i {
        font-size: 1.25rem !important;
        transition: transform 0.3s ease !important;
    }
    
    .categories-container .fab-button:hover i,
    .categories-container .fab-button:active i {
        transform: rotate(90deg) !important;
    }
    .categories-container {
        padding: 0.5rem !important;
    }
    
    /* 分类管理页面标题和操作区域优化 */
    .categories-container .mb-8 {
        margin-bottom: 1rem !important;
    }
    
    .categories-container .flex.items-center.justify-between.mb-8 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    
    .categories-container .flex.items-center.space-x-4 {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.75rem !important;
    }
    
    .categories-container #addCategoryBtn {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.75rem !important;
        font-size: 0.95rem !important;
    }
    
    .categories-container .relative {
        width: 100% !important;
    }
    
    .categories-container #typeFilter {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 0.95rem !important;
    }
    
    /* 分类列表表格转卡片布局 */
    .categories-container table {
        display: none !important;
    }
    
    .categories-container tbody {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .categories-container tr {
        display: block !important;
        background: white !important;
        border-radius: 1rem !important;
        padding: 1rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid #e5e7eb !important;
    }
    
    .categories-container td {
        display: block !important;
        padding: 0.5rem 0 !important;
        border: none !important;
        width: 100% !important;
    }
    
    /* 分类名称和图标 */
    .categories-container td:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        margin-bottom: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }
    
    .categories-container td:first-child .w-8.h-8 {
        width: 2.5rem !important;
        height: 2.5rem !important;
        flex-shrink: 0 !important;
    }
    
    .categories-container td:first-child .flex.items-center.space-x-3 {
        flex-direction: row !important;
        width: 100% !important;
    }
    
    /* 分类类型和颜色 */
    .categories-container td:nth-child(2),
    .categories-container td:nth-child(3) {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.5rem 0 !important;
        border-bottom: 1px solid #f3f4f6 !important;
        font-size: 0.9rem !important;
    }
    
    .categories-container td:nth-child(2)::before {
        content: "类型:" !important;
        font-weight: 600 !important;
        color: #374151 !important;
    }
    
    .categories-container td:nth-child(3)::before {
        content: "颜色:" !important;
        font-weight: 600 !important;
        color: #374151 !important;
    }
    
    /* 创建时间 */
    .categories-container td:nth-child(4) {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.5rem 0 !important;
        border-bottom: 1px solid #f3f4f6 !important;
        font-size: 0.9rem !important;
    }
    
    .categories-container td:nth-child(4)::before {
        content: "创建时间:" !important;
        font-weight: 600 !important;
        color: #374151 !important;
    }
    
    /* 操作按钮 */
    .categories-container td:last-child {
        margin-top: 0.75rem !important;
        padding-top: 0.75rem !important;
        border-top: 1px solid #f3f4f6 !important;
    }
    
    .categories-container td:last-child .flex {
        justify-content: center !important;
        gap: 1rem !important;
    }
    
    .categories-container td:last-child .w-8.h-8 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    /* 分类概览卡片优化 */
    .categories-container .mt-8 .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    .categories-container .mt-8 .p-6 {
        padding: 1rem !important;
    }
    
    .categories-container .mt-8 .w-12.h-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    /* 模态框优化 */
    .categories-container #categoryModal .max-w-md {
        max-width: 95vw !important;
        margin: 1rem !important;
    }
    
    .categories-container #categoryModal .p-8 {
        padding: 1.25rem !important;
    }
    
    /* 供应商管理页面移动端优化 */
    .suppliers-container {
        padding: 0.5rem !important;
        max-width: 100vw !important;
        width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* 搜索筛选栏优化 */
    .flex.flex-wrap.items-center.gap-4 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }
    
    .flex-1.min-w-64 {
        min-width: auto !important;
        width: 100% !important;
    }
    
    .flex.items-center.space-x-4 {
        flex-direction: column !important;
        space-x: 0 !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }
    
    /* 商品管理页面移动端优化 */
    /* 商品管理页面移动端优化 */
    .products-container {
        padding: 0.5rem !important;
        max-width: 100vw !important;
        width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* 覆盖Tailwind的container类 */
    .products-container.container {
        max-width: 100vw !important;
        width: 100vw !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .products-container * {
        box-sizing: border-box !important;
    }
    
    /* 防止任何元素超出容器宽度 */
    .products-container > * {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* 页面标题和操作栏优化 */
    .products-container .flex.items-center.justify-between.mb-6,
    .products-container .flex.items-center.justify-between.mb-8 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }
    
    .products-container .flex.items-center.justify-between.mb-6 > div:first-child,
    .products-container .flex.items-center.justify-between.mb-8 > div:first-child {
        text-align: left !important;
    }
    
    /* 商品管理页面标题区域样式 - 与供应商管理页面保持一致 */
    .products-container .mb-8 {
        margin-bottom: 1.5rem !important;
        padding: 0 0.5rem !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* 新增商品按钮 - 悬浮按钮样式 */
    .products-container #addProductBtn {
        position: fixed !important;
        bottom: 1.5rem !important;
        right: 1.5rem !important;
        width: 3.5rem !important;
        height: 3.5rem !important;
        border-radius: 50% !important;
        padding: 0 !important;
        z-index: 1000 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: auto !important;
        transition: all 0.3s ease !important;
    }
    
    .products-container #addProductBtn:hover {
        transform: scale(1.05) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    }
    
    .products-container #addProductBtn span {
        display: none !important;
    }
    
    .products-container #addProductBtn .w-4.h-4 {
        width: 1.25rem !important;
        height: 1.25rem !important;
        transition: transform 0.3s ease !important;
    }
    
    .products-container #addProductBtn:hover .w-4.h-4 {
        transform: rotate(90deg) !important;
    }
    
    .products-container #addProductBtn i {
        font-size: 1.25rem !important;
        transition: transform 0.3s ease !important;
    }
    
    .products-container #addProductBtn:hover i {
        transform: rotate(90deg) !important;
    }
    
    /* 搜索和筛选栏优化 - 1x2布局 */
    .products-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.p-6 {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* 确保所有内部容器不超出屏幕 */
    .products-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.shadow-lg {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .products-container .flex.flex-wrap.items-center.gap-4 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 1rem !important;
        align-items: stretch !important;
    }
    
    .products-container .flex-1.min-w-64 {
        min-width: auto !important;
        width: 100% !important;
        grid-row: 1 !important;
    }
    
    .products-container .flex.items-center.space-x-4 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
        grid-row: 2 !important;
        align-items: stretch !important;
    }
    
    .products-container .flex.items-center.space-x-4 > * {
        width: 100% !important;
        min-width: auto !important;
    }
    
    .products-container select {
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 0.75rem !important;
        width: 100% !important;
    }
    
    .products-container input[type="text"] {
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 0.75rem 1rem 0.75rem 2.75rem !important;
        width: 100% !important;
    }
    
    .products-container .relative .absolute {
        left: 0 !important;
        padding-left: 0.75rem !important;
        width: 2.5rem !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    .products-container .relative .absolute .w-5 {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    
    .products-container .relative .absolute i {
        font-size: 1rem !important;
        color: #9ca3af !important;
    }
    
    .products-container button {
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
        white-space: nowrap !important;
    }
    
    /* 商品表格 - 隐藏原始表格，使用卡片布局 */
    .products-container .overflow-x-auto {
        overflow-x: hidden !important;
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        box-sizing: border-box !important;
    }
    
    .products-container table {
        table-layout: fixed !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .products-container table.w-full {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .products-container thead {
        display: none !important;
    }
    
    .products-container .product-row {
        display: block !important;
        background: white !important;
        border-radius: 1rem !important;
        margin-bottom: 1rem !important;
        padding: 1rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid #e5e7eb !important;
        position: relative !important;
    }
    
    .products-container .product-row td {
        display: block !important;
        padding: 0.25rem 0 !important;
        border: none !important;
        width: 100% !important;
    }
    
    /* 复选框定位到右上角 */
    .products-container .product-row td:first-child {
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
        width: auto !important;
    }
    
    .products-container .product-row td:first-child input {
        transform: scale(1.2) !important;
    }
    
    /* 商品图片 */
    .products-container .product-row td:nth-child(2) {
        margin-bottom: 0.75rem !important;
    }
    
    .products-container .product-row td:nth-child(2) .w-16.h-16 {
        width: 4rem !important;
        height: 4rem !important;
        margin: 0 auto !important;
    }
    
    /* 商品名称 */
    .products-container .product-row td:nth-child(3) {
        margin-bottom: 0.75rem !important;
    }
    
    .products-container .product-row td:nth-child(3) .font-semibold {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        margin-bottom: 0.25rem !important;
    }
    
    .products-container .product-row td:nth-child(3) .text-sm {
        font-size: 0.8rem !important;
        color: #6b7280 !important;
    }
    
    /* 商品详细信息 */
    .products-container .product-row td:nth-child(4),
    .products-container .product-row td:nth-child(5),
    .products-container .product-row td:nth-child(6),
    .products-container .product-row td:nth-child(7) {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.5rem 0 !important;
        border-bottom: 1px solid #f3f4f6 !important;
        font-size: 0.9rem !important;
    }
    
    .products-container .product-row td:nth-child(4)::before {
        content: "分类:" !important;
        font-weight: 600 !important;
        color: #374151 !important;
    }
    
    .products-container .product-row td:nth-child(5)::before {
        content: "售价:" !important;
        font-weight: 600 !important;
        color: #374151 !important;
    }
    
    .products-container .product-row td:nth-child(6)::before {
        content: "库存:" !important;
        font-weight: 600 !important;
        color: #374151 !important;
    }
    
    .products-container .product-row td:nth-child(7)::before {
        content: "状态:" !important;
        font-weight: 600 !important;
        color: #374151 !important;
    }
    
    .products-container .product-row td:nth-child(7) {
        border-bottom: none !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* 操作按钮 */
    .products-container .product-row td:last-child {
        margin-top: 0.75rem !important;
        padding-top: 0.75rem !important;
        border-top: 1px solid #f3f4f6 !important;
    }
    
    .products-container .product-row td:last-child .flex {
        justify-content: center !important;
        gap: 0.5rem !important;
    }
    
    .products-container .product-row td:last-child button {
        width: 2.5rem !important;
        height: 2.5rem !important;
        min-height: auto !important;
        padding: 0 !important;
        font-size: 0.875rem !important;
    }
    
    /* 空状态优化 */
    .products-container tbody tr td[colspan] {
        display: table-cell !important;
        text-align: center !important;
        padding: 2rem 1rem !important;
    }
    
    /* 分页优化 */
    .products-container .px-6.py-4.border-t {
        padding: 1rem !important;
    }
    
    .products-container .flex.items-center.justify-between {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
    }
    
    .products-container .flex.items-center.space-x-2 {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.25rem !important;
    }
    
    /* 应收款管理页面移动端优化 */
    .receivables-container {
        padding: 0 0.5rem !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* 应收款总览卡片优化 */
     .receivables-container .grid[class*="grid-cols-1"][class*="md:grid-cols-4"] {
         grid-template-columns: repeat(2, 1fr) !important;
         gap: 0.5rem !important;
     }
     
     .receivables-container .grid[class*="grid-cols-1"][class*="md:grid-cols-4"] .bg-white {
         padding: 0.75rem !important;
     }
     
     .receivables-container .grid[class*="grid-cols-1"][class*="md:grid-cols-4"] .text-lg {
         font-size: 0.9rem !important;
         margin-bottom: 0.25rem !important;
     }
     
     .receivables-container .grid[class*="grid-cols-1"][class*="md:grid-cols-4"] .text-3xl {
         font-size: 1.25rem !important;
         line-height: 1.2 !important;
     }
     
     /* 应收款筛选功能卡片 - 4x2布局 */
      .receivables-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.p-6.shadow-lg.border.border-white\/20.mb-6 {
          padding: 0.75rem !important;
      }
      
      .receivables-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.p-6.shadow-lg.border.border-white\/20.mb-6 .flex.flex-wrap.items-center.gap-4 {
         display: grid !important;
         grid-template-columns: repeat(4, 1fr) !important;
         grid-template-rows: repeat(2, auto) !important;
         gap: 0.75rem !important;
     }
    
    .receivables-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.p-6.shadow-lg.border.border-white\/20.mb-6 .flex-1.min-w-64 {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 100% !important;
    }
    
    .receivables-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.p-6.shadow-lg.border.border-white\/20.mb-6 .flex.items-center.space-x-2 {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
    
    .receivables-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.p-6.shadow-lg.border.border-white\/20.mb-6 .flex.items-center.space-x-4 {
        display: contents !important;
    }
    
    .receivables-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.p-6.shadow-lg.border.border-white\/20.mb-6 .flex.items-center.space-x-2,
    .receivables-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.p-6.shadow-lg.border.border-white\/20.mb-6 select,
    .receivables-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.p-6.shadow-lg.border.border-white\/20.mb-6 #resetFilterBtn {
        width: 100% !important;
        margin: 0 !important;
        font-size: 0.85rem !important;
    }
    
    .receivables-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.p-6.shadow-lg.border.border-white\/20.mb-6 .flex.items-center.space-x-2 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
        justify-content: center !important;
        margin-bottom: 0.5rem !important;
    }
    
    .receivables-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.p-6.shadow-lg.border.border-white\/20.mb-6 .flex.items-center.space-x-2 input {
        width: 40% !important;
        padding: 0.5rem !important;
        font-size: 0.85rem !important;
    }
    
    .receivables-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.p-6.shadow-lg.border.border-white\/20.mb-6 .flex.items-center.space-x-2 span {
        width: auto !important;
        text-align: center !important;
        font-size: 0.8rem !important;
        padding: 0 0.1rem !important;
    }
    
    /* 应收款表格移动端优化 - 卡片式布局 */
    .receivables-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.shadow-lg.border.border-white\/20.overflow-hidden {
        overflow: visible !important;
        margin: 0 !important;
        border-radius: 0.5rem !important;
    }
    
    .receivables-container .overflow-x-auto {
        overflow: visible !important;
    }
    
    .receivables-container table {
        display: none !important;
    }
    
    .receivables-container thead {
        display: none !important;
    }
    
    .receivables-container tbody {
        display: block !important;
        padding: 0.5rem !important;
    }
    
    .receivables-container .receivable-row {
        display: block !important;
        background: white !important;
        border-radius: 0.5rem !important;
        margin-bottom: 0.75rem !important;
        padding: 0.75rem !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
        border: 1px solid #e5e7eb !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .receivables-container .receivable-row td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 复选框 - 右上角 */
    .receivables-container .receivable-row td:first-child {
        position: absolute !important;
        top: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        z-index: 10 !important;
    }
    
    /* 单号和日期 */
    .receivables-container .receivable-row td:nth-child(2) {
        margin-bottom: 0.5rem !important;
        padding-right: 2rem !important;
    }
    
    .receivables-container .receivable-row td:nth-child(2) .font-semibold {
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
    }
    
    .receivables-container .receivable-row td:nth-child(2) .text-sm {
        font-size: 0.75rem !important;
    }
    
    /* 客户信息 */
    .receivables-container .receivable-row td:nth-child(3) {
        margin-bottom: 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    .receivables-container .receivable-row td:nth-child(3) .font-semibold {
        font-weight: 600 !important;
        margin-bottom: 0.125rem !important;
    }
    
    .receivables-container .receivable-row td:nth-child(3):before {
        content: "客户: " !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
        font-size: 0.7rem !important;
    }
    
    /* 详细信息行 */
    .receivables-container .receivable-row td:nth-child(4),
    .receivables-container .receivable-row td:nth-child(5),
    .receivables-container .receivable-row td:nth-child(6),
    .receivables-container .receivable-row td:nth-child(7),
    .receivables-container .receivable-row td:nth-child(8) {
        display: block !important;
        margin-bottom: 0.375rem !important;
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
    }
    
    .receivables-container .receivable-row td:nth-child(4):before {
        content: "应收金额: " !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
        display: inline !important;
    }
    
    .receivables-container .receivable-row td:nth-child(5):before {
        content: "已收金额: " !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
        display: inline !important;
    }
    
    .receivables-container .receivable-row td:nth-child(6):before {
        content: "账期: " !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
        display: inline !important;
        margin-right: 0.25rem !important;
    }
    
    .receivables-container .receivable-row td:nth-child(7):before {
        content: "逾期天数: " !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
        display: inline !important;
        margin-right: 0.25rem !important;
    }
    
    .receivables-container .receivable-row td:nth-child(8):before {
        content: "状态: " !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
        display: inline !important;
        margin-right: 0.25rem !important;
    }
    
    /* 操作按钮 */
    .receivables-container .receivable-row td:last-child {
        margin-top: 0.5rem !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid #e5e7eb !important;
    }
    
    .receivables-container .receivable-row td:last-child .flex {
        justify-content: flex-start !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }
    
    .receivables-container .receivable-row td:last-child .w-8.h-8 {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    /* 应收款模态框移动端优化 */
    .receivables-container #receivableModal .max-w-4xl,
    .receivables-container #receivableDetailModal .max-w-5xl,
    .receivables-container #paymentModal .max-w-2xl,
    .receivables-container #collectionModal .max-w-2xl {
        max-width: 95vw !important;
        margin: 1rem !important;
    }
    
    .receivables-container #receivableModal .grid.grid-cols-1.md\:grid-cols-2,
    .receivables-container #receivableDetailModal .grid.grid-cols-1.md\:grid-cols-2,
    .receivables-container #receivableDetailModal .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    .receivables-container #receivableModal .max-h-\[90vh\],
    .receivables-container #receivableDetailModal .max-h-\[90vh\],
    .receivables-container #paymentModal .max-h-\[90vh\],
    .receivables-container #collectionModal .max-h-\[90vh\] {
        max-height: 85vh !important;
    }
    
    /* 分页区域优化 */
    .receivables-container .flex.items-center.justify-between {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }
    
    .receivables-container .flex.items-center.space-x-2 {
        justify-content: center !important;
    }
    
    /* 按钮组优化 */
    .flex.items-center.space-x-2 {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    /* 分页优化 */
     .flex.items-center.justify-between.mt-6 {
         flex-direction: column !important;
         gap: 1rem !important;
         align-items: center !important;
     }
     
     .flex.items-center.space-x-2 {
         flex-wrap: wrap !important;
         justify-content: center !important;
         gap: 0.25rem !important;
     }
     
     /* 卡片内容优化 */
     .bg-white\/60.backdrop-blur-lg {
         padding: 0.75rem !important;
         margin-bottom: 0.75rem !important;
     }
     
     /* 搜索和筛选区域优化 */
     .receivables-container .flex.flex-wrap.items-center.gap-4 {
         gap: 0.5rem !important;
     }
     
     .receivables-container .flex-1.min-w-64 {
         flex: 0 0 100% !important;
         margin-bottom: 0.5rem !important;
     }
     
     .receivables-container .flex.items-center.space-x-4 {
         width: 100% !important;
         gap: 0.5rem !important;
         flex-wrap: wrap !important;
     }
     
     .receivables-container .flex.items-center.space-x-2 input[type="date"] {
         flex: 1 !important;
         min-width: 0 !important;
     }
     
     /* 输入框和选择框优化 */
     input[type="text"],
     input[type="date"],
     input[type="number"],
     input[type="datetime-local"],
     select,
     textarea {
         min-height: 40px !important;
         font-size: 15px !important;
         padding: 0.5rem !important;
     }
     
     /* 搜索框特殊处理 */
     .receivables-container input[type="text"][placeholder*="搜索"] {
         padding-left: 2.25rem !important;
     }
     
     .receivables-container .absolute.inset-y-0.left-0.pl-3 {
         padding-left: 0.5rem !important;
     }
     
     .receivables-container .absolute.inset-y-0.left-0.pl-3 .w-5.h-5 {
         width: 1rem !important;
         height: 1rem !important;
     }
     
     /* 按钮优化 */
     .px-6.py-3 {
         padding: 0.5rem 0.75rem !important;
         font-size: 0.8rem !important;
         min-height: 40px !important;
     }
     
     .px-4.py-2 {
         padding: 0.375rem 0.5rem !important;
         font-size: 0.75rem !important;
         min-height: 36px !important;
     }
     
     /* 应收款页面按钮特殊处理 */
     .receivables-container button {
         white-space: nowrap !important;
     }
     
     .receivables-container .flex.items-center.justify-between button,
     .receivables-container .flex.items-center.space-x-4 button {
         flex-shrink: 0 !important;
     }
     
     /* 标题优化 */
     .text-3xl {
         font-size: 1.5rem !important;
         line-height: 1.3 !important;
     }
     
     .text-2xl {
         font-size: 1.25rem !important;
         line-height: 1.3 !important;
     }
     
     /* 应收款页面标题区域优化 */
    .receivables-container .flex.items-center.justify-between.mb-6 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .receivables-container .flex.items-center.justify-between.mb-6 h1 {
        margin-bottom: 0 !important;
    }
    
    .receivables-container .flex.items-center.justify-between.mb-6 > div:first-child,
    .receivables-container .flex.items-center.justify-between.mb-8 > div:first-child {
        text-align: left !important;
    }
     
     /* 新增应收款按钮 - 悬浮按钮样式 */
     .receivables-container #addReceivableBtn {
         position: fixed !important;
         bottom: 1.5rem !important;
         right: 1.5rem !important;
         width: 3.5rem !important;
         height: 3.5rem !important;
         border-radius: 50% !important;
         padding: 0 !important;
         z-index: 1000 !important;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
         min-width: auto !important;
         transition: all 0.3s ease !important;
     }
     
     .receivables-container #addReceivableBtn:hover {
         transform: scale(1.05) !important;
     }
     
     .receivables-container #addReceivableBtn span {
         display: none !important;
     }
     
     /* 间距优化 */
     .mb-8 {
         margin-bottom: 1.5rem !important;
     }
     
     .mb-6 {
         margin-bottom: 1rem !important;
     }
     
     .p-6 {
         padding: 1rem !important;
     }
     
     /* 网格间距优化 */
     .gap-6 {
         gap: 0.75rem !important;
     }
     
     .gap-4 {
         gap: 0.5rem !important;
     }
     
     /* 图标大小优化 */
     .w-12.h-12 {
         width: 2.5rem !important;
         height: 2.5rem !important;
     }
     
     .w-8.h-8 {
         width: 1.5rem !important;
         height: 1.5rem !important;
     }
     
     /* 状态标签优化 */
     .inline-flex.items-center {
         font-size: 0.75rem !important;
         padding: 0.25rem 0.5rem !important;
     }
     
     /* 搜索框优化 */
     .relative input {
         padding-left: 2.5rem !important;
     }
     
     /* 操作按钮优化 */
     .w-8.h-8.flex.items-center.justify-center {
         min-width: 44px !important;
         min-height: 44px !important;
     }
    
    /* 关键指标卡片优化 - 使用属性选择器匹配 */
    .statistics-container .grid[class*="grid-cols-1"][class*="md:grid-cols-4"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        max-width: 100% !important;
    }
    
    /* 确保在所有移动设备上都是2列布局 */
    @media (max-width: 767px) {
        .statistics-container .grid[class*="grid-cols-1"][class*="md:grid-cols-4"] {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 0.5rem !important;
        }
    }
    
    /* 超小屏幕优化 */
    @media (max-width: 480px) {
        .statistics-container .grid[class*="grid-cols-1"][class*="md:grid-cols-4"] {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 0.5rem !important;
        }
    }

    .statistics-container .grid[class*="grid-cols-1"][class*="md:grid-cols-4"] > div {
        padding: 1rem !important;
    }
    
    .statistics-container .grid[class*="grid-cols-1"][class*="md:grid-cols-4"] .text-2xl {
        font-size: 1.25rem !important;
    }
    
    .statistics-container .grid[class*="grid-cols-1"][class*="md:grid-cols-4"] .text-sm {
        font-size: 0.75rem !important;
    }
    
    /* 收支趋势分析区域优化 */
    .grid.grid-cols-1.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .lg\:col-span-2 {
        grid-column: span 1 !important;
    }
    
    /* 图表容器优化 */
    #trendChart {
        height: 250px !important;
    }
    
    #healthGauge {
        height: 150px !important;
    }
    
    #categoryChart {
        height: 200px !important;
        width: 100% !important;
    }
    
    #cashflowChart {
        height: 200px !important;
    }
    
    /* 财务健康度评估优化 */
    .grid.grid-cols-1.lg\:grid-cols-3 > div:last-child .space-y-3 {
        margin-top: 1rem;
    }
    
    /* 收支分类统计优化 */
    .grid.grid-cols-1.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .grid.grid-cols-1.lg\:grid-cols-2 .flex.items-center {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .grid.grid-cols-1.lg\:grid-cols-2 .flex.items-center > div:first-child {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    
    .grid.grid-cols-1.lg\:grid-cols-2 .flex.items-center .flex-1 {
        margin-left: 0 !important;
    }
    
    /* 月度对比分析表格优化 */
    .overflow-x-auto table {
        font-size: 0.75rem !important;
    }
    
    .overflow-x-auto th,
    .overflow-x-auto td {
        padding: 0.5rem 0.25rem !important;
        white-space: nowrap;
    }
    
    /* 按钮组优化 */
    #periodButtons {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
    }
    
    #periodButtons .period-btn {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
    }
    
    /* 导出按钮组优化 - 排除导航菜单和仪表板按钮组 */
    .flex.items-center.space-x-3:not(nav .flex.items-center.space-x-3):not(.nav-item):not(.bg-gray-100) {
        flex-direction: column !important;
        space-x: 0 !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }
    
    .flex.items-center.space-x-3:not(nav .flex.items-center.space-x-3):not(.nav-item):not(.bg-gray-100) button {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* 确保仪表板按钮组保持水平布局 */
    .flex.items-center.bg-gray-100.rounded-xl {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 仪表板图表容器按钮组强制水平布局并调整样式 */
    .chart-container .flex.items-center.bg-gray-100.rounded-xl,
    .charts-grid .flex.items-center.bg-gray-100.rounded-xl {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        display: flex !important;
        width: fit-content !important;
        margin-left: auto !important;
        padding: 0.25rem !important;
    }
    
    .chart-container .flex.items-center.bg-gray-100.rounded-xl button,
    .charts-grid .flex.items-center.bg-gray-100.rounded-xl button {
        flex: none !important;
        width: auto !important;
        min-width: auto !important;
    }
    
    /* 收支记录页面标题区域优化 */
    .transactions-container .flex.items-center.justify-between.mb-8 {
        flex-direction: row !important;
        align-items: flex-start !important;
    }
    
    .transactions-container .flex.items-center.justify-between.mb-8 > div:last-child {
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 0.5rem !important;
    }
    
    .transactions-container .flex.items-center.justify-between.mb-8 #exportBtn {
        order: -1 !important;
        margin-bottom: 0.5rem !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* 添加收支悬浮按钮 */
    .transactions-container #addTransactionBtn {
        position: fixed !important;
        bottom: 1.5rem !important;
        right: 1.5rem !important;
        width: 3.5rem !important;
        height: 3.5rem !important;
        border-radius: 50% !important;
        padding: 0 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        z-index: 1000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
    }
    
    .transactions-container #addTransactionBtn:hover {
        transform: scale(1.05) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    }
    
    .transactions-container #addTransactionBtn span {
        display: none !important;
    }
    
    .transactions-container #addTransactionBtn .w-4.h-4 {
        width: 1.25rem !important;
        height: 1.25rem !important;
        transition: transform 0.3s ease !important;
    }
    
    .transactions-container #addTransactionBtn:hover .w-4.h-4 {
        transform: rotate(90deg) !important;
    }
    
    .transactions-container #addTransactionBtn i {
        font-size: 1.25rem !important;
        transition: transform 0.3s ease !important;
    }
    
    .transactions-container #addTransactionBtn:hover i {
        transform: rotate(90deg) !important;
    }
    
    /* 供应商管理页面移动端优化 */
    .suppliers-container .flex.items-center.justify-between.mb-6 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }
    
    .suppliers-container .flex.items-center.justify-between.mb-6 > div:first-child {
        text-align: center !important;
    }
    
    /* 新增供应商按钮 - 悬浮按钮样式 */
    .suppliers-container #addSupplierBtn {
        position: fixed !important;
        bottom: 1.5rem !important;
        right: 1.5rem !important;
        width: 3.5rem !important;
        height: 3.5rem !important;
        border-radius: 50% !important;
        padding: 0 !important;
        z-index: 1000 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: auto !important;
        transition: all 0.3s ease !important;
    }
    
    .suppliers-container #addSupplierBtn:hover {
        transform: scale(1.05) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    }
    
    .suppliers-container #addSupplierBtn span {
        display: none !important;
    }
    
    .suppliers-container #addSupplierBtn .w-4.h-4 {
        width: 1.25rem !important;
        height: 1.25rem !important;
        transition: transform 0.3s ease !important;
    }
    
    .suppliers-container #addSupplierBtn:hover .w-4.h-4 {
        transform: rotate(90deg) !important;
    }
    
    .suppliers-container #addSupplierBtn i {
        font-size: 1.25rem !important;
        transition: transform 0.3s ease !important;
    }
    
    .suppliers-container #addSupplierBtn:hover i {
        transform: rotate(90deg) !important;
    }
    
    /* 搜索和筛选栏优化 - 1x2布局 */
    .suppliers-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.p-6 {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .suppliers-container .flex.flex-wrap.items-center.gap-4 {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: stretch !important;
    }
    
    .suppliers-container .flex-1.min-w-64 {
        width: 100% !important;
        min-width: auto !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .suppliers-container .flex-1.min-w-64 .relative {
        width: 100% !important;
    }
    
    .suppliers-container .flex-1.min-w-64 select {
        width: 100% !important;
        height: 3rem !important;
    }
    
    .suppliers-container .flex.items-center.space-x-4 {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }
    
    /* 供应商页面头部优化 */
    .suppliers-container .mb-8 {
        margin-bottom: 1.5rem !important;
        padding: 0 0.5rem !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    .suppliers-container .flex.items-center.justify-between.mb-6 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
        padding: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .suppliers-container .flex.items-center.justify-between.mb-6 > div:first-child,
    .suppliers-container .flex.items-center.justify-between.mb-8 > div:first-child {
        text-align: left !important;
    }
    
    .suppliers-container .text-3xl {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    .suppliers-container .text-gray-600 {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* 新增供应商按钮 - 悬浮按钮样式 */
    .suppliers-container #addSupplierBtn {
        position: fixed !important;
        bottom: 1.5rem !important;
        right: 1.5rem !important;
        width: 3.5rem !important;
        height: 3.5rem !important;
        border-radius: 50% !important;
        padding: 0 !important;
        z-index: 1000 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: auto !important;
        transition: all 0.3s ease !important;
        background-color: #4f46e5 !important; /* indigo-600 */
    }
    
    .suppliers-container #addSupplierBtn:hover {
        transform: scale(1.05) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
        background-color: #4338ca !important; /* indigo-700 */
    }
    
    .suppliers-container #addSupplierBtn span {
        display: none !important;
    }
    
    .suppliers-container #addSupplierBtn .w-4.h-4 {
        width: 1.25rem !important;
        height: 1.25rem !important;
        transition: transform 0.3s ease !important;
    }
    
    .suppliers-container #addSupplierBtn:hover .w-4.h-4 {
        transform: rotate(90deg) !important;
    }
    
    .suppliers-container #addSupplierBtn i {
        font-size: 1.25rem !important;
        transition: transform 0.3s ease !important;
    }
    
    .suppliers-container #addSupplierBtn:hover i {
        transform: rotate(90deg) !important;
    }
    
    /* 搜索和筛选栏优化 */
    .suppliers-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.p-6 {
        background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,250,252,0.9)) !important;
        backdrop-filter: blur(20px) !important;
        border-radius: 1.5rem !important;
        padding: 1rem !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
        border: 1px solid rgba(255,255,255,0.8) !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .suppliers-container .flex.flex-wrap.items-center.gap-4 {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .suppliers-container .flex-1.min-w-64 {
        width: 100% !important;
        min-width: auto !important;
        flex: none !important;
    }
    
    .suppliers-container .relative input {
        width: 100% !important;
        height: 3rem !important;
        padding: 0.75rem 0.75rem 0.75rem 2.5rem !important;
        border-radius: 0.75rem !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
        background: rgba(255,255,255,0.9) !important;
        font-size: 0.875rem !important;
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
    }
    
    .suppliers-container .relative .absolute {
        left: 0.75rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    .suppliers-container .relative .w-5.h-5 {
        width: 1.125rem !important;
        height: 1.125rem !important;
    }
    
    .suppliers-container .relative input:focus {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
    }
    
    .suppliers-container select {
        width: 100% !important;
        height: 3rem !important;
        padding: 0.75rem !important;
        border-radius: 0.75rem !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
        background: rgba(255,255,255,0.9) !important;
        font-size: 0.875rem !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
    }
    
    .suppliers-container .flex.items-center.space-x-4 {
        width: 100% !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin: 0 !important;
    }
    
    .suppliers-container .flex.items-center.space-x-4 > * {
        width: 100% !important;
        height: 3rem !important;
        min-width: auto !important;
        justify-content: center !important;
        padding: 0.75rem 1rem !important;
        border-radius: 0.75rem !important;
        font-weight: 500 !important;
        font-size: 0.875rem !important;
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .suppliers-container #advancedFilterBtn {
        background: linear-gradient(135deg, #f3f4f6, #e5e7eb) !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
        color: #374151 !important;
    }
    
    .suppliers-container #advancedFilterBtn:hover {
        background: linear-gradient(135deg, #e5e7eb, #d1d5db) !important;
        color: #374151 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    .suppliers-container #batchActionBtn {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.2)) !important;
        border: 1px solid rgba(139, 92, 246, 0.3) !important;
        color: #8b5cf6 !important;
    }
    
    .suppliers-container #batchActionBtn:hover {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
        color: white !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2) !important;
    }
    
    /* 供应商表格移动端优化 - 现代卡片式布局 */
    .suppliers-container {
        padding: 0.5rem !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 覆盖max-w-7xl和mx-auto类 */
    .suppliers-container.max-w-7xl {
        max-width: 100vw !important;
    }
    
    .suppliers-container.mx-auto {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .suppliers-container .bg-white\/60.backdrop-blur-lg.rounded-2xl.shadow-lg.border.border-white\/20.overflow-hidden {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .suppliers-container .overflow-x-auto {
        overflow: visible !important;
    }
    
    .suppliers-container table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .suppliers-container thead {
        display: none !important;
    }
    
    .suppliers-container tbody {
        display: block !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 1rem !important;
        box-sizing: border-box !important;
    }
    
    .suppliers-container .supplier-row {
        display: block !important;
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
        border-radius: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        padding: 0.75rem !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.08) !important;
        border: 1px solid rgba(255,255,255,0.8) !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        transition: all 0.3s ease !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .suppliers-container .supplier-row:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.15) !important;
    }
    
    .suppliers-container .supplier-row td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 复选框 - 右上角现代化设计 */
    .suppliers-container .supplier-row td:first-child {
        position: absolute !important;
        top: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        z-index: 10 !important;
    }
    
    .suppliers-container .supplier-row td:first-child input[type="checkbox"] {
        width: 1.25rem !important;
        height: 1.25rem !important;
        border-radius: 0.375rem !important;
        border: 2px solid #e5e7eb !important;
        background: white !important;
        transition: all 0.2s ease !important;
    }
    
    .suppliers-container .supplier-row td:first-child input[type="checkbox"]:checked {
        background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
        border-color: #3b82f6 !important;
    }
    
    /* 供应商名称 - 简化布局 */
    .suppliers-container .supplier-row td:nth-child(2) {
        margin-bottom: 0.75rem !important;
        padding-right: 2.5rem !important;
    }
    
    .suppliers-container .supplier-row td:nth-child(2) .font-semibold {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: #1f2937 !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* 信息网格布局 */
    .suppliers-container .supplier-row td:nth-child(3),
    .suppliers-container .supplier-row td:nth-child(4),
    .suppliers-container .supplier-row td:nth-child(5) {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 0.5rem !important;
        padding: 0.5rem !important;
        background: rgba(248, 250, 252, 0.5) !important;
        border-radius: 0.5rem !important;
        border: 1px solid rgba(226, 232, 240, 0.6) !important;
    }
    
    .suppliers-container .supplier-row td:nth-child(3):before {
        content: "联系人" !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 3rem !important;
        height: 1.5rem !important;
        background: #c4b5fd !important;
        color: white !important;
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        border-radius: 0.375rem !important;
        margin-right: 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    .suppliers-container .supplier-row td:nth-child(4):before {
        content: "电话" !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 3rem !important;
        height: 1.5rem !important;
        background: #c4b5fd !important;
        color: white !important;
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        border-radius: 0.375rem !important;
        margin-right: 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    .suppliers-container .supplier-row td:nth-child(5):before {
        content: "地址" !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 3rem !important;
        height: 1.5rem !important;
        background: #c4b5fd !important;
        color: white !important;
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        border-radius: 0.375rem !important;
        margin-right: 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    .suppliers-container .supplier-row td:nth-child(3) .text-gray-900,
    .suppliers-container .supplier-row td:nth-child(4),
    .suppliers-container .supplier-row td:nth-child(5) {
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        color: #374151 !important;
        flex: 1 !important;
    }
    
    /* 电话号码拨打按钮 - 仅在移动设备显示 */
    .phone-call-btn {
        display: none !important;
    }
    
    @media (max-width: 768px) {
        .phone-call-btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-width: 4rem !important;
            height: 1.8rem !important;
            background: #10b981 !important;
            color: white !important;
            font-size: 0.65rem !important;
            font-weight: 600 !important;
            border-radius: 0.375rem !important;
            margin-left: 0.5rem !important;
            text-decoration: none !important;
            border: none !important;
            cursor: pointer !important;
            transition: background-color 0.2s ease !important;
        }
        
        .phone-call-btn[style*="display: none"] {
            display: inline-flex !important;
        }
        
        .phone-call-btn:hover {
            background: #059669 !important;
        }
        
        .phone-call-btn:active {
            background: #047857 !important;
        }
    }
    
    .suppliers-container .supplier-row td:nth-child(5) .max-w-48 {
        max-width: none !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    
    /* 供应商类型显示 */
    .suppliers-container .supplier-row td:nth-child(6) {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 0.5rem !important;
        padding: 0.5rem !important;
        background: rgba(248, 250, 252, 0.5) !important;
        border-radius: 0.5rem !important;
        border: 1px solid rgba(226, 232, 240, 0.6) !important;
    }
    
    .suppliers-container .supplier-row td:nth-child(6):before {
        content: "类型" !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 3rem !important;
        height: 1.5rem !important;
        background: #c4b5fd !important;
        color: white !important;
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        border-radius: 0.375rem !important;
        margin-right: 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    .suppliers-container .supplier-row td:nth-child(6) .inline-flex {
        font-size: 0.8rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    /* 产品信息显示 */
    .suppliers-container .supplier-row td:nth-child(7) {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 0.5rem !important;
        padding: 0.5rem !important;
        background: rgba(248, 250, 252, 0.5) !important;
        border-radius: 0.5rem !important;
        border: 1px solid rgba(226, 232, 240, 0.6) !important;
    }
    
    .suppliers-container .supplier-row td:nth-child(7):before {
        content: "产品" !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 3rem !important;
        height: 1.5rem !important;
        background: #c4b5fd !important;
        color: white !important;
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        border-radius: 0.375rem !important;
        margin-right: 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    .suppliers-container .supplier-row td:nth-child(7) .text-gray-900 {
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        color: #374151 !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }
    
    /* 操作按钮 - 现代化设计 */
    .suppliers-container .supplier-row td:last-child {
        margin-top: 0.75rem !important;
        padding-top: 0.75rem !important;
        border-top: 1px solid rgba(226, 232, 240, 0.5) !important;
        position: relative !important;
    }
    
    .suppliers-container .supplier-row td:last-child:before {
        display: none !important;
    }
    
    .suppliers-container .supplier-row td:last-child .flex {
        justify-content: center !important;
        gap: 0.75rem !important;
        flex-wrap: nowrap !important;
        margin-top: 0.5rem !important;
    }
    
    .suppliers-container .supplier-row td:last-child .w-8.h-8 {
        width: 2rem !important;
        height: 2rem !important;
        border-radius: 0.5rem !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
        border: 1px solid transparent !important;
    }
    
    .suppliers-container .supplier-row td:last-child .bg-blue-100 {
        background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
        border-color: rgba(59, 130, 246, 0.2) !important;
    }
    
    .suppliers-container .supplier-row td:last-child .bg-blue-100:hover {
        background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
    }
    
    .suppliers-container .supplier-row td:last-child .bg-blue-100:hover i {
        color: white !important;
    }
    
    .suppliers-container .supplier-row td:last-child .bg-green-100 {
        background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
        border-color: rgba(34, 197, 94, 0.2) !important;
    }
    
    .suppliers-container .supplier-row td:last-child .bg-green-100:hover {
        background: linear-gradient(135deg, #22c55e, #16a34a) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
    }
    
    .suppliers-container .supplier-row td:last-child .bg-green-100:hover i {
        color: white !important;
    }
    
    .suppliers-container .supplier-row td:last-child .bg-red-100 {
        background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
        border-color: rgba(239, 68, 68, 0.2) !important;
    }
    
    .suppliers-container .supplier-row td:last-child .bg-red-100:hover {
        background: linear-gradient(135deg, #ef4444, #dc2626) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    }
    
    .suppliers-container .supplier-row td:last-child .bg-red-100:hover i {
        color: white !important;
    }
    
    .suppliers-container .supplier-row td:last-child .bg-gray-100 {
        background: linear-gradient(135deg, #f3f4f6, #e5e7eb) !important;
        border-color: rgba(107, 114, 128, 0.2) !important;
    }
    
    .suppliers-container .supplier-row td:last-child .bg-gray-100:hover {
        background: linear-gradient(135deg, #6b7280, #4b5563) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3) !important;
    }
    
    .suppliers-container .supplier-row td:last-child .bg-gray-100:hover i {
        color: white !important;
    }
    
    /* 供应商模态框移动端优化 */
    .suppliers-container #supplierModal .max-w-2xl {
        max-width: 95vw !important;
        margin: 1rem !important;
        border-radius: 1.5rem !important;
        background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
    }
    
    .suppliers-container #supplierModal .grid.grid-cols-1.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .suppliers-container #supplierModal .max-h-\[90vh\] {
        max-height: 85vh !important;
        overflow-y: auto !important;
    }
    
    /* 分页区域优化 */
    .suppliers-container .px-6.py-4.border-t {
        background: linear-gradient(135deg, rgba(248,250,252,0.9), rgba(241,245,249,0.9)) !important;
        border-top: 2px solid rgba(226, 232, 240, 0.6) !important;
        border-radius: 0 0 1.5rem 1.5rem !important;
        padding: 1.5rem !important;
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
        width: calc(100% - 1rem) !important;
        max-width: calc(100vw - 2rem) !important;
        box-sizing: border-box !important;
    }
    
    .suppliers-container .flex.items-center.justify-between {
        flex-direction: column !important;
        gap: 1.5rem !important;
        text-align: center !important;
    }
    
    .suppliers-container .text-sm.text-gray-700 {
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        color: #374151 !important;
        padding: 0.75rem 1rem !important;
        background: rgba(255,255,255,0.8) !important;
        border-radius: 0.75rem !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
    }
    
    .suppliers-container .flex.items-center.space-x-2 {
        justify-content: center !important;
        gap: 0.75rem !important;
        flex-wrap: wrap !important;
    }
    
    .suppliers-container .flex.items-center.space-x-2 button {
        padding: 0.75rem 1.5rem !important;
        border-radius: 0.75rem !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
        border: 2px solid rgba(226, 232, 240, 0.8) !important;
        background: rgba(255,255,255,0.9) !important;
    }
    
    .suppliers-container .flex.items-center.space-x-2 button:hover:not(:disabled) {
        background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
        color: white !important;
        border-color: #3b82f6 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
    }
    
    .suppliers-container .flex.items-center.space-x-2 button:disabled {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
        background: rgba(243, 244, 246, 0.8) !important;
    }
    
    /* 空状态优化 */
    .suppliers-container td[colspan="8"] {
        padding: 3rem 1.5rem !important;
    }
    
    .suppliers-container .flex.flex-col.items-center {
        gap: 1rem !important;
    }
    
    .suppliers-container .w-16.h-16 {
        width: 4rem !important;
        height: 4rem !important;
        background: linear-gradient(135deg, #f3f4f6, #e5e7eb) !important;
        border-radius: 1rem !important;
    }
    
    .suppliers-container .text-lg.font-semibold {
        font-size: 1.25rem !important;
        color: #1f2937 !important;
    }
    
    .suppliers-container .text-gray-600.mb-4 {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .suppliers-container .px-6.py-3.bg-primary {
        padding: 1rem 2rem !important;
        border-radius: 1rem !important;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3) !important;
        transition: all 0.3s ease !important;
        font-weight: 600 !important;
    }
    
    .suppliers-container .px-6.py-3.bg-primary:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4) !important;
    }
    
    /* 页面标题优化 */
    .text-3xl {
        font-size: 1.5rem !important;
    }
    
    .text-xl {
        font-size: 1.125rem !important;
    }
    
    /* 卡片内边距优化 */
    .p-8 {
        padding: 1rem !important;
    }
    
    .p-6 {
        padding: 0.75rem !important;
    }
    
    /* 间距优化 */
    .mb-8 {
        margin-bottom: 1rem !important;
    }
    
    .mb-6 {
        margin-bottom: 0.75rem !important;
    }
    
    /* 图标大小优化 */
      .w-8.h-8 {
          width: 1.5rem !important;
          height: 1.5rem !important;
      }
      
      /* 移动端触摸优化 */
      .period-btn,
      .overflow-x-auto table th,
      .overflow-x-auto table td {
          -webkit-tap-highlight-color: rgba(0,0,0,0.1);
          touch-action: manipulation;
      }
      
      /* 移动端滚动优化 */
      .overflow-x-auto {
          -webkit-overflow-scrolling: touch;
          scrollbar-width: thin;
      }
      
      /* 图表容器触摸优化 */
      #trendChart,
      #healthGauge,
      #categoryChart,
      #cashflowChart {
          touch-action: pan-x pan-y;
      }
      
      /* 移动端文字选择优化 */
      .statistics-container .text-2xl,
      .statistics-container .text-xl,
      .statistics-container .font-bold {
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
      }
      
      /* 移动端间距微调 */
      .statistics-container .space-y-3 > * + * {
          margin-top: 0.5rem !important;
      }
      
      /* 移动端按钮悬停效果禁用 */
      .period-btn:hover:not(.bg-primary) {
          background-color: inherit !important;
      }
      
      .period-btn.bg-primary:hover {
          background-color: var(--primary) !important;
      }
      
      /* 移动端按钮点击状态优化 */
      .period-btn:active,
      .period-btn:focus {
          outline: none !important;
      }
      
      .period-btn.bg-primary:active,
      .period-btn.bg-primary:focus {
          background-color: var(--primary) !important;
          color: white !important;
      }
      
      /* 强制确保选中按钮的样式 */
      .period-btn.bg-primary {
          background-color: var(--primary) !important;
          color: white !important;
          -webkit-tap-highlight-color: transparent !important;
      }
      
      /* 移动端触摸反馈优化 */
      .period-btn {
          -webkit-tap-highlight-color: transparent !important;
          -webkit-touch-callout: none !important;
          -webkit-user-select: none !important;
          user-select: none !important;
      }
     
     /* 仪表板移动端优化 */
    .dashboard-header {
        padding: 1rem;
    }
    
    .dashboard-header .flex.items-start {
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        position: relative;
    }
    
    .dashboard-header .button-group {
         justify-content: flex-end;
         gap: 0;
         flex-shrink: 0;
         position: absolute;
         top: 0;
         right: 0;
         width: auto;
         max-width: 140px;
         flex-direction: row !important;
         display: flex !important;
     }
     
     .dashboard-header .button-group button {
         display: inline-block;
         flex-shrink: 0;
     }
     
     .dashboard-header .button-group .bg-white\/60 {
         max-width: 120px;
     }
     
     .dashboard-header h1 {
         font-size: 1.5rem !important;
         margin-bottom: 0.25rem !important;
     }
     
     .dashboard-header p {
         font-size: 0.75rem !important;
         margin-top: 0.25rem !important;
     }
     
     /* 悬浮添加按钮移动端优化 */
     .fab-button {
        bottom: 1.5rem !important;
        right: 1.5rem !important;
        width: 3.5rem !important;
        height: 3.5rem !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        transition: all 0.3s ease !important;
    }
    
    .fab-button:hover {
        transform: scale(1.05) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    }
    
    .fab-button .w-4.h-4 {
        width: 1.25rem !important;
        height: 1.25rem !important;
        transition: transform 0.3s ease !important;
    }
    
    .fab-button:hover .w-4.h-4 {
        transform: rotate(90deg) !important;
    }
    
    .fab-button i {
        font-size: 1.25rem !important;
        transition: transform 0.3s ease !important;
    }
    
    .fab-button:hover i {
        transform: rotate(90deg) !important;
    }
    
    .stats-grid {
        padding: 0 0.5rem;
    }
    
    .charts-grid {
        padding: 0 0.5rem;
    }
    
    .table-container {
        margin: 0 0.5rem;
    }
    
    /* 图表容器优化 */
    #trendChart, #pieChart {
        min-height: 250px !important;
        height: 250px !important;
    }
    
    /* 按钮组在移动端的优化 */
    .button-group {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
        flex-wrap: nowrap;
    }
    
    .button-group .bg-white\/60 {
        flex-shrink: 0;
    }
    
    .button-group .bg-white\/60 button {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
    
    /* 期间切换按钮组 - 排除仪表板头部 */
    .button-group:not(.dashboard-header .button-group) .bg-white\/60 {
        width: 100%;
        justify-content: center;
    }
    
    .button-group:not(.dashboard-header .button-group) .bg-white\/60 button {
        flex: 1;
        text-align: center;
    }
    
    /* 添加收支按钮 */
    .button-group a {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1rem;
    }
    
    /* 统计卡片文字大小调整 */
    .stat-card .text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }
    
    .stat-card .text-sm {
        font-size: 0.75rem !important;
    }
    
    /* 交易卡片优化 */
    .transaction-card {
        margin: 0 0.5rem 0.75rem 0.5rem;
    }
    
    /* 防止内容溢出 */
    .max-w-7xl {
        max-width: 100% !important;
        overflow-x: hidden;
    }
    
    /* 确保容器不会超出屏幕 */
    .container, .main-content {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
}

/* 桌面端隐藏移动端元素 */
@media (min-width: 769px) {
    .mobile-nav-toggle,
    .mobile-nav-overlay,
    .mobile-header {
        display: none;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .nav-link,
    .form-control,
    .form-select {
        min-height: 44px;
    }
    
    .table th,
    .table td {
        min-height: 44px;
        vertical-align: middle;
    }
    
    /* 增加触摸反馈 */
    .btn:active,
    .nav-link:active {
        transform: scale(0.95);
        transition: transform 0.1s;
    }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
    .main-content {
        background-color: #1a1a1a;
        color: #ffffff;
    }
    
    .card {
        background-color: #2d2d2d;
        color: #ffffff;
    }
    
    .table {
        color: #ffffff;
    }
    
    .table-striped > tbody > tr:nth-of-type(odd) > td {
        background-color: rgba(255,255,255,0.05);
    }
    
    .form-control,
    .form-select {
        background-color: #3d3d3d;
        border-color: #555;
        color: #ffffff;
    }
    
    .form-control:focus,
    .form-select:focus {
        background-color: #4d4d4d;
        border-color: #667eea;
        color: #ffffff;
    }
}

/* 横屏优化 */
@media (orientation: landscape) and (max-height: 500px) {
    .sidebar {
        width: min(200px, 70vw) !important;
        max-width: 70vw !important;
    }
    
    .mobile-header {
        padding: 10px;
        margin-bottom: 10px;
    }
    
    .mobile-header h4 {
        font-size: 1rem;
    }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .card-body {
        padding: 0.75rem;
    }
    
    .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    
    .table-responsive {
        font-size: 0.8rem;
    }
    
    .pagination {
        font-size: 0.8rem;
    }
    
    .pagination .page-link {
        padding: 0.4rem 0.6rem;
    }
}

/* 动画优化 */
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .btn,
    .nav-link {
        transition: none;
    }
}

/* 用户管理页面手机端优化 */
@media (max-width: 768px) {
    /* 用户管理页面头部优化 */
    .users-page .max-w-7xl {
        padding: 0 1rem;
    }
    
    .users-page h1 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .users-page .mb-8:first-of-type {
        margin-bottom: 1.5rem;
    }
    
    /* 操作区域优化 */
    .users-page .flex.items-center.justify-between {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .users-page .flex.items-center.space-x-4 {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }
    
    /* 隐藏桌面端的添加用户按钮 */
    .users-page #addUserBtn:not(.fab-button) {
        display: none;
    }
    
    /* 搜索框优化 */
    .users-page .relative input[type="text"] {
        width: 100%;
        font-size: 0.875rem;
    }
    
    /* 角色筛选优化 */
    .users-page select {
        width: 100%;
        font-size: 0.875rem;
    }
    
    /* 用户表格优化 - 隐藏桌面端表格，显示移动端卡片 */
    .users-page .overflow-x-auto {
        display: none;
    }
    
    .users-page .mobile-users-list {
        display: block;
        padding: 1rem;
    }
    
    /* 用户卡片布局 */
    .users-page .user-mobile-card {
        background: white;
        border-radius: 0.75rem;
        padding: 1rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border: 1px solid rgba(255,255,255,0.2);
    }
    
    .users-page .user-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.75rem;
    }
    
    .users-page .user-info {
        flex: 1;
    }
    
    .users-page .user-avatar {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: 0.5rem;
    }
    
    .users-page .user-name {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }
    
    .users-page .user-email {
        font-size: 0.875rem;
        color: #6b7280;
    }
    
    .users-page .user-actions {
        display: flex;
        gap: 0.5rem;
    }
    
    .users-page .user-actions button {
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }
    
    .users-page .user-details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        font-size: 0.875rem;
        padding-top: 0.75rem;
        border-top: 1px solid #e5e7eb;
    }
    
    .users-page .user-detail-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .users-page .user-detail-label {
        color: #6b7280;
        font-size: 0.75rem;
    }
    
    .users-page .user-detail-value {
        font-weight: 500;
    }
    
    /* 悬浮添加按钮 - 使用与仪表板一致的样式 */
    .users-page .fab-button {
        border: none;
        cursor: pointer;
    }
    
    /* 模态框优化 */
    .users-page .fixed.inset-0 > div {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
    
    .users-page .fixed.inset-0 form {
        max-height: 60vh;
        overflow-y: auto;
    }
    
    /* 表单元素优化 */
    .users-page input[type="text"],
    .users-page input[type="email"],
    .users-page input[type="password"] {
        font-size: 1rem; /* 防止iOS缩放 */
    }
    
    /* 单选按钮组优化 */
    .users-page .flex.flex-col.space-y-3 {
        gap: 0.75rem;
    }
    
    .users-page .flex.space-x-4 {
        gap: 1rem;
    }
}

/* 桌面端用户管理页面样式 */
@media (min-width: 769px) {
    .users-page .mobile-users-list {
        display: none;
    }
    
    .users-page .overflow-x-auto {
        display: block;
    }
    
    .users-page .fab-button {
        display: none;
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    .btn-primary {
        border: 2px solid #000;
    }
    
    .card {
        border: 2px solid #000;
    }
    
    .table th {
        background-color: #000;
        color: #fff;
    }
}