/* ===================================
   橙欣ERP系统响应式布局CSS
   Responsive Layout for Chengxin ERP System
   =================================== */

/* ===================================
   基础响应式设置
   =================================== */
@media (max-width: 1200px) {
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 991px) {
    .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media (max-width: 767px) {
    .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    /* 移动端基础字体调整 */
    h1, .h1 { font-size: 24px; }
    h2, .h2 { font-size: 20px; }
    h3, .h3 { font-size: 18px; }
    h4, .h4 { font-size: 16px; }
    h5, .h5 { font-size: 14px; }
    h6, .h6 { font-size: 13px; }
    
    .main-footer {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .container-fluid {
        padding-left: 3px;
        padding-right: 3px;
    }
    
    /* 全局字体大小调整，使触屏手机更容易阅读和操作 */
    html {
        font-size: 14px;
    }
    
    body {
        font-size: 14px;
    }
}

/* ===================================
   顶部导航栏响应式
   =================================== */
.main-header .mlogo {
    display:none;
}
@media (max-width: 991px) {
    .navbar-collapse.pull-left + .navbar-custom-menu {
        right: 0;
    }
}
@media (max-width: 767px) {
    /* 顶部导航栏 */
    .main-header .navbar-nav > li > a {
        padding: 15px 20px;
        font-size: 13px;
        color: #fff !important;
    }
    
    .main-header .navbar-nav > li > a:hover,
    .main-header .navbar-nav > li > a:focus,
    .main-header .navbar-nav > li > a:active {
        color: #f6f6f6 !important;
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    .main-header .navbar-nav > li > a .fa {
        font-size: 18px;
        color: #fff !important;
    }
    
    .navbar-nav > .user-menu .user-image {
        margin-top: -4px;
    }
    /* 隐藏部分导航项文字，只显示图标 */
    .main-header .navbar-nav > li > a .hidden-xs {
        display: none !important;
    }
    
    /* 顶部按钮组 */
    #dberp-menu-top {
        margin: 10px 0;
        text-align: center;
    }
    
    #dberp-menu-top .btn {
        margin: 2px;
        font-size: 13px;
        padding: 6px 10px;
    }
    
    #dberp-menu-top.dberp-top-menu {
        margin: 0;
        padding: 10px 0;
    }
    /* Logo调整 */
    .main-header .logo {
        display: none;
    }
    
    .main-header .mlogo {
        color: #fff;
        line-height: 50px;
        margin-left: 10px;
        display: inline-block;
        font-size: 16px;
    }

    /* 顶部导航下拉菜单修复 */
    .main-sidebar {
        padding-top: 50px;
    }
    .main-header .navbar-nav .dropdown-menu {
        background-color: #605ca8 !important;
        border: 1px solid #4a4a8a !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        margin-top: 5px !important;
        min-width: 150px !important;
    }
    
    .main-header .navbar-nav .dropdown-menu > li > a {
        color: #fff !important;
        padding: 10px 15px !important;
        font-size: 13px !important;
        transition: all 0.2s ease !important;
    }
    
    .main-header .navbar-nav .dropdown-menu > li > a:hover,
    .main-header .navbar-nav .dropdown-menu > li > a:focus {
        color: #fff !important;
        background-color: #4a4a8a !important;
        text-decoration: none !important;
    }
    
    .main-header .navbar-nav .dropdown-menu > li:last-child > a {
        border-bottom: none !important;
    }
    
    /* 子菜单样式 */
    .main-header .navbar-nav .dropdown-menu .dropdown-menu {
        background-color: #4a4a8a !important;
        border: 1px solid #3a3a7a !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        border-radius: 6px !important;
    }
    
    .main-header .navbar-nav .dropdown-menu .dropdown-menu > li > a {
        color: #fff !important;
        padding: 8px 15px 8px 25px !important;
        font-size: 13px !important;
        border-bottom: 1px solid #3a3a7a !important;
    }
    
    .main-header .navbar-nav .dropdown-menu .dropdown-menu > li > a:hover,
    .main-header .navbar-nav .dropdown-menu .dropdown-menu > li > a:focus {
        background-color: #3a3a7a !important;
    }
    
    /* 下拉菜单箭头 */
    .main-header .navbar-nav .dropdown-menu .dropdown-toggle::after {
        border-left-color: #fff !important;
    }
    
    /* 移动端下拉菜单位置调整 */
    .main-header .navbar-nav .dropdown-menu {
        top: 50px !important;
        right: 0px !important;
        left: auto !important;
        max-width: calc(100vw - 20px) !important;
        z-index: 1050 !important;
        padding-bottom: 15px;
    }
    
    .main-header .navbar-nav .dropdown-menu .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .main-header .navbar-nav .dropdown-menu .row {
        color:#fff;
    }
}

@media (max-width: 480px) {
    .main-header .navbar-nav > li > a {
        padding: 15px 13px;
        font-size: 11px;
        color: #fff !important;
    }
    
    .main-header .navbar-nav > li > a:hover,
    .main-header .navbar-nav > li > a:focus,
    .main-header .navbar-nav > li > a:active {
        color: #f6f6f6 !important;
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    #dberp-menu-top .btn {
        font-size: 12px;
        padding: 5px 8px;
        margin: 1px;
    }
    
    .main-header .logo-lg {
        font-size: 16px;
    }

    /* 480px断点下拉菜单样式 */
    .main-header .navbar-nav .dropdown-menu {
        right: 5px !important;
        max-width: calc(100vw - 25px) !important;
    }
    
    .main-header .navbar-nav .dropdown-menu > li > a {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    .main-header .navbar-nav .dropdown-menu .dropdown-menu > li > a {
        padding: 6px 12px 6px 20px !important;
        font-size: 12px !important;
    }
}

/* ===================================
   左侧菜单响应式
   =================================== */

/* 确保菜单文字颜色在所有设备上都正确显示 */
.sidebar-menu > li > a {
    color: #b8c7ce !important;
}

.sidebar-menu > li > a:hover,
.sidebar-menu > li > a:focus {
    color: #fff !important;
    background-color: #1e282c !important;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
    color: #fff !important;
    background-color: #1e282c !important;
}

.sidebar-menu .treeview-menu > li > a {
    color: #8aa4af !important;
}

.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li > a:focus {
    color: #fff !important;
}

.sidebar-menu .treeview-menu > li.active > a {
    color: #fff !important;
}

/* 确保顶部导航文字颜色在所有设备上都正确显示 */
.main-header .navbar-nav > li > a {
    color: #fff !important;
}

.main-header .navbar-nav > li > a:hover,
.main-header .navbar-nav > li > a:focus,
.main-header .navbar-nav > li > a:active {
    color: #f6f6f6 !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.main-header .navbar-nav > li > a .fa {
    color: #fff !important;
}

/* 全局下拉菜单样式修复 */
.main-header .navbar-nav .dropdown-menu {
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.main-header .navbar-nav .dropdown-menu > li > a {
    transition: all 0.2s ease !important;
}

.main-header .navbar-nav .dropdown-menu > li > a:hover,
.main-header .navbar-nav .dropdown-menu > li > a:focus {
    text-decoration: none !important;
}

/* 子菜单样式 */
.main-header .navbar-nav .dropdown-menu .dropdown-menu {
    background-color: #4a4a8a !important;
    border: 1px solid #3a3a7a !important;
}

.main-header .navbar-nav .dropdown-menu .dropdown-menu > li > a {
    color: #fff !important;
}

.main-header .navbar-nav .dropdown-menu .dropdown-menu > li > a:hover,
.main-header .navbar-nav .dropdown-menu .dropdown-menu > li > a:focus {
    background-color: #3a3a7a !important;
}

/* 移动端菜单颜色强制覆盖 */
@media (max-width: 767px) {
    /* 使用更高优先级的选择器 */
    body .sidebar-menu > li > a,
    body .main-sidebar .sidebar-menu > li > a {
        color: #b8c7ce !important;
    }
    
    body .sidebar-menu > li > a:hover,
    body .sidebar-menu > li > a:focus,
    body .main-sidebar .sidebar-menu > li > a:hover,
    body .main-sidebar .sidebar-menu > li > a:focus {
        color: #fff !important;
        background-color: #1e282c !important;
    }
    
    body .sidebar-menu > li.active > a,
    body .sidebar-menu > li.menu-open > a,
    body .main-sidebar .sidebar-menu > li.active > a,
    body .main-sidebar .sidebar-menu > li.menu-open > a {
        color: #fff !important;
        background-color: #1e282c !important;
    }
    
    body .sidebar-menu .treeview-menu > li > a,
    body .main-sidebar .sidebar-menu .treeview-menu > li > a {
        color: #8aa4af !important;
    }
    
    body .sidebar-menu .treeview-menu > li > a:hover,
    body .sidebar-menu .treeview-menu > li > a:focus,
    body .main-sidebar .sidebar-menu .treeview-menu > li > a:hover,
    body .main-sidebar .sidebar-menu .treeview-menu > li > a:focus {
        color: #fff !important;
    }
    
    body .sidebar-menu .treeview-menu > li.active > a,
    body .main-sidebar .sidebar-menu .treeview-menu > li.active > a {
        color: #fff !important;
    }
    
    body .main-header .navbar-nav > li > a,
    body .main-header .navbar .navbar-nav > li > a {
        color: #fff !important;
    }
    
    body .main-header .navbar-nav > li > a:hover,
    body .main-header .navbar-nav > li > a:focus,
    body .main-header .navbar-nav > li > a:active,
    body .main-header .navbar .navbar-nav > li > a:hover,
    body .main-header .navbar .navbar-nav > li > a:focus,
    body .main-header .navbar .navbar-nav > li > a:active {
        color: #f6f6f6 !important;
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    body .main-header .navbar-nav > li > a .fa,
    body .main-header .navbar .navbar-nav > li > a .fa {
        color: #fff !important;
    }
}
@media (max-width: 767px) {
    /* 左侧菜单容器 */
    .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span{
        padding: 12px 0px;
        margin-left: -15px;
        width: 100px !important;
    }
    .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
        left: 5px !important;
        top: -2px !important;
    }
    .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
        top: 0px;
        margin-left: 0;
        width: 150px;
        left: 160px;
    }
    .main-sidebar.sidebar-open {
        left: 0;
    }
    
    /* 用户信息面板 */
    .user-panel {
        padding: 15px;
        text-align: center;
    }
    
    .user-panel .info {
        float: none;
        text-align: center;
    }
    
    /* 菜单项 */
    .sidebar-menu > li > a {
        padding: 12px 15px;
        font-size: 14px;
        color: #b8c7ce !important;
    }
    
    .sidebar-menu > li > a:hover,
    .sidebar-menu > li > a:focus {
        color: #fff !important;
        background-color: #1e282c !important;
    }
    
    .sidebar-menu > li.active > a,
    .sidebar-menu > li.menu-open > a {
        color: #fff !important;
        background-color: #1e282c !important;
    }
    
    .sidebar-menu .treeview-menu > li > a {
        padding: 10px 15px 10px 45px;
        font-size: 14px;
        color: #8aa4af !important;
    }
    
    .sidebar-menu .treeview-menu > li > a:hover,
    .sidebar-menu .treeview-menu > li > a:focus {
        color: #fff !important;
    }
    
    .sidebar-menu .treeview-menu > li.active > a {
        color: #fff !important;
    }
    
    /* 菜单展开箭头 */
    .sidebar-menu .pull-right-container {
        position: absolute;
        right: 15px;
        top: 50%;
    }
    
    /* 移动端菜单遮罩 */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    
    .sidebar-overlay.show {
        display: block;
    }
}

@media (max-width: 480px) {
    .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span{
        padding: 10px 0px;
        margin-left: -18px;
    }
    .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
        left: 2px !important;
        top: -1px !important;
    }
    .sidebar-menu > li > a {
        padding: 10px 12px;
        font-size: 14px;
        color: #b8c7ce !important;
    }
    
    .sidebar-menu > li > a:hover,
    .sidebar-menu > li > a:focus {
        color: #fff !important;
        background-color: #1e282c !important;
    }
    
    .sidebar-menu > li.active > a,
    .sidebar-menu > li.menu-open > a {
        color: #fff !important;
        background-color: #1e282c !important;
    }
    
    .sidebar-menu .treeview-menu > li > a {
        padding: 8px 12px 8px 40px;
        font-size: 13px;
        color: #8aa4af !important;
    }
    
    .sidebar-menu .treeview-menu > li > a:hover,
    .sidebar-menu .treeview-menu > li > a:focus {
        color: #fff !important;
    }
    
    .sidebar-menu .treeview-menu > li.active > a {
        color: #fff !important;
    }
    
    /* 480px断点顶部导航颜色覆盖 */
    body .main-header .navbar-nav > li > a,
    body .main-header .navbar .navbar-nav > li > a {
        color: #fff !important;
    }
    
    body .main-header .navbar-nav > li > a:hover,
    body .main-header .navbar-nav > li > a:focus,
    body .main-header .navbar-nav > li > a:active,
    body .main-header .navbar .navbar-nav > li > a:hover,
    body .main-header .navbar .navbar-nav > li > a:focus,
    body .main-header .navbar .navbar-nav > li > a:active {
        color: #f6f6f6 !important;
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    body .main-header .navbar-nav > li > a .fa,
    body .main-header .navbar .navbar-nav > li > a .fa {
        color: #fff !important;
    }
}

/* ===================================
   主内容区域响应式
   =================================== */
@media (max-width: 767px) {
    /* 主内容区域 */
    .content-wrapper {
        margin-left: 0;
        padding: 10px;
    }
    
    /* 面包屑导航 */
    .content-header {
        padding: 10px 0;
    }
    
    .content-header h1 {
        font-size: 20px;
        margin: 10px 0;
        text-align: center;
    }
    
    /* 内容区域 */
    .content {
        padding: 10px 0;
        margin-top: 30px;
    }
    
    /* 卡片容器 */
    .box {
        margin-bottom: 15px;
        border-radius: 8px;
    }
    
    .box-header {
        padding: 12px 15px;
    }
    
    .box-body {
        padding: 15px;
    }
    
    .box-title {
        font-size: 16px;
        margin: 0;
    }
    
    .box-footer{
        text-align: center;
    }
}

@media (max-width: 480px) {
    .content-wrapper {
        padding: 5px;
    }
    
    .content-header h1 {
        font-size: 18px;
    }
    
    .box-header {
        padding: 10px 12px;
    }
    
    .box-header .box-title{
        display:block;
    }
    
    .box-header button{
        margin-top:10px;
    }
    
    .box-body {
        padding: 12px;
    }
}

/* ===================================
   表单响应式
   =================================== */
@media (max-width: 767px) {
    /* 表单组 */
    .form-group {
        margin-bottom: 15px;
    }
    
    /* 表单标签 */
    .control-label {
        text-align: left;
        margin-bottom: 5px;
        font-weight: 600;
        color: #333;
    }
    
    /* 表单输入框 */
    .form-control {
        height: 40px;
        font-size: 14px;
        border-radius: 6px;
        border: 1px solid #ddd;
    }
    
    .form-control:focus {
        border-color: #605ca8;
        box-shadow: 0 0 0 2px rgba(96, 92, 168, 0.2);
    }
    
    /* 文本域 */
    textarea.form-control {
        height: auto;
        min-height: 80px;
        resize: vertical;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 所有textarea在移动端强制100%宽度 */
    textarea {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 必填项标记 */
    .must_add_value {
        color: #e74c3c;
        font-weight: bold;
    }
    
    /* 错误信息 */
    .error-message {
        color: #e74c3c;
        font-size: 12px;
        margin-top: 3px;
        display: block;
    }
    
    /* 表单行布局调整 */
    .form-horizontal .form-group {
        margin-left: 0;
        margin-right: 0;
    }
    
    .form-horizontal .control-label {
        float: none;
        width: 100%;
        padding-top: 0;
        margin-bottom: 8px;
    }
    
    .form-horizontal .col-sm-2,
    .form-horizontal .col-sm-3,
    .form-horizontal .col-sm-4,
    .form-horizontal .col-sm-6 {
        float: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    
    /* 搜索表单 */
    .table > thead > tr > th .form-control {
        margin-bottom: 5px;
        font-size: 13px;
        height: 35px;
    }
    
    /* 输入组 */

    .input-group .input-group-addon {
        border-radius: 6px 0 0 6px;
        background-color: #f8f9fa;
        border-color: #ddd;
        color: #666;
    }
}

@media (max-width: 480px) {
    .form-control {
        height: 38px;
        font-size: 13px;
    }
    
    textarea.form-control {
        min-height: 70px;
    }
    
    .form-group {
        margin-bottom: 12px;
    }
    
    .control-label {
        font-size: 14px;
        margin-bottom: 4px;
    }

}

/* ===================================
   表格响应式
   =================================== */
@media (max-width: 767px) {
    /* 表格容器 */
    .table-responsive {
        border: none;
        margin-bottom: 15px;
    }
    
    /* 表格基础样式 */
    .table {
        margin-bottom: 0;
    }
    
    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: 8px 6px;
        vertical-align: middle;
        border-top: 1px solid #f4f4f4;
    }
    
    /* 表头 */
    .table > thead > tr > th {
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        font-weight: 600;
        color: #495057;
    }
    
    .erp-bg-thead > th {
        background-color: #605ca8 !important;
        color: white !important;
        border-color: #605ca8 !important;
    }
    
    /* 表格行 */
    .table > tbody > tr:hover {
        background-color: #f8f9fa;
    }
    
    /* 表格中的按钮 */
    .table .btn {
        padding: 4px 8px;
        margin: 1px;
    }
    
    .table .btn-xs {
        padding: 3px 6px;
    }
    
    /* 搜索表单行 */
    .table > thead > tr:last-child > th {
        padding: 8px 4px;
        background-color: #f8f9fa;
        border-top: 1px solid #dee2e6;
    }
    
    /* 表格中的输入框 */
    .table .form-control {
        height: 32px;
        font-size: 12px;
        padding: 4px 8px;
    }
    
    /* 表格中的选择框 */
    .table select.form-control {
        padding-right: 25px;
        background-size: 12px;
    }
    
    /* 移动端表格横向滚动 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 表格列宽调整 */
    .table th[width],
    .table td[width] {
        min-width: 60px;
    }
    
    .table th[width="2%"],
    .table td[width="2%"] {
        min-width: 40px;
        width: 40px;
    }
    
    .table th[width="4%"],
    .table td[width="4%"] {
        min-width: 50px;
        width: 50px;
    }
    
    .table th[width="6%"],
    .table td[width="6%"] {
        min-width: 60px;
        width: 60px;
    }
    
    .table th[width="8%"],
    .table td[width="8%"] {
        min-width: 70px;
        width: 70px;
    }
    
    .table th[width="10%"],
    .table td[width="10%"] {
        min-width: 80px;
        width: 80px;
    }
    
    .table th[width="12%"],
    .table td[width="12%"] {
        min-width: 90px;
        width: 90px;
    }
    
    .table th[width="15%"],
    .table td[width="15%"] {
        min-width: 110px;
        width: 110px;
    }
    
    .table th[width="18%"],
    .table td[width="18%"] {
        min-width: 130px;
        width: 130px;
    }
    
    .table th[width="20%"],
    .table td[width="20%"] {
        min-width: 140px;
        width: 140px;
    }
    
    .table th[width="25%"],
    .table td[width="25%"] {
        min-width: 180px;
        width: 180px;
    }
    
    .table th[width="30%"],
    .table td[width="30%"] {
        min-width: 210px;
        width: 210px;
    }

    .table th[width="35%"],
    .table td[width="35%"] {
        min-width: 260px;
        width: 260px;
    }
    
    .table th[width="40%"],
    .table td[width="40%"] {
        min-width: 300px;
        width: 300px;
    }
    
    .table th[width="45%"],
    .table td[width="45%"] {
        min-width: 360px;
        width: 360px;
    }
}

@media (max-width: 480px) {
    .table {
        font-size: 13px;
    }
    
    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: 6px 4px;
    }
    
    .table .btn {
        padding: 5px 10px;
        font-size: 13px;
        margin: 2px;
    }
    
    .table .btn-xs {
        padding: 4px 8px;
        font-size: 12px;
    }
    
    .table .form-control {
        height: 30px;
        font-size: 12px;
        padding: 3px 6px;
    }
}

/* ===================================
   按钮响应式
   =================================== */
@media (max-width: 767px) {
    /* 按钮基础样式 */
    .btn {
        font-size: 14px;
        padding: 9px 14px;
        border-radius: 6px;
    }
    
    .btn-sm {
        padding: 7px 12px;
        font-size: 13px;
    }
    
    .btn-xs {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    .btn-group .btn {
        min-width: 80px;
    }
}

@media (max-width: 480px) {
    .btn {
        font-size: 14px;
        padding: 9px 14px;
    }
    
    .btn-sm {
        padding: 7px 12px;
        font-size: 13px;
    }
    
    .btn-xs {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    .btn-group .btn {
        min-width: 80px;
    }
}

/* ===================================
   分页响应式
   =================================== */
@media (max-width: 767px) {
    .pagination {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px;
        margin: 15px 0;
    }
    
    .pagination > li > a,
    .pagination > li > span {
        padding: 8px 12px;
        font-size: 13px;
        border-radius: 6px;
        border: 1px solid #dee2e6;
        color: #605ca8;
        background-color: #fff;
    }
    
    .pagination > li > a:hover,
    .pagination > li > a:focus {
        background-color: #605ca8;
        border-color: #605ca8;
        color: #fff;
    }
    
    .pagination > .active > a,
    .pagination > .active > a:hover,
    .pagination > .active > a:focus {
        background-color: #605ca8;
        border-color: #605ca8;
    }
    
    .pagination > .disabled > a,
    .pagination > .disabled > a:hover,
    .pagination > .disabled > a:focus {
        color: #6c757d;
        background-color: #fff;
        border-color: #dee2e6;
    }
}

/* ===================================
   模态框响应式
   =================================== */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .modal-content {
        border-radius: 12px;
        border: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
    
    .modal-header {
        padding: 15px 20px;
        border-bottom: 1px solid #e9ecef;
        border-radius: 12px 12px 0 0;
    }
    
    .modal-title {
        font-size: 18px;
        font-weight: 600;
    }
    
    .modal-body {
        padding: 20px;
        max-height: 70vh;
        overflow-y: auto;
    }
    
    .modal-footer {
        padding: 15px 20px;
        border-top: 1px solid #e9ecef;
        border-radius: 0 0 12px 12px;
    }
    
    .modal-footer .btn {
        margin: 0 5px;
    }
}

/* ===================================
   面包屑导航响应式
   =================================== */
@media (max-width: 767px) {
    .breadcrumb {
        background: transparent;
        padding: 8px 0;
        margin-bottom: 10px;
        font-size: 12px;
    }
    
    .breadcrumb > li + li:before {
        content: ">";
        color: #6c757d;
        padding: 0 8px;
    }
    
    .breadcrumb > li > a {
        color: #605ca8;
        text-decoration: none;
    }
    
    .breadcrumb > li.active {
        color: #6c757d;
    }
}

/* ===================================
   消息提示响应式
   =================================== */
@media (max-width: 767px) {
    .alert {
        padding: 12px 15px;
        margin-bottom: 15px;
        border-radius: 8px;
        border: none;
        font-size: 13px;
    }
    
    .alert-success {
        background-color: #d4edda;
        color: #155724;
        border-left: 4px solid #28a745;
    }
    
    .alert-danger {
        background-color: #f8d7da;
        color: #721c24;
        border-left: 4px solid #dc3545;
    }
    
    .alert-warning {
        background-color: #fff3cd;
        color: #856404;
        border-left: 4px solid #ffc107;
    }
    
    .alert-info {
        background-color: #d1ecf1;
        color: #0c5460;
        border-left: 4px solid #17a2b8;
    }
}

/* ===================================
   特殊组件响应式
   =================================== */
@media (max-width: 767px) {
    /* 复选框和单选框 */
    .icheckbox_minimal,
    .iradio_minimal {
        width: 18px;
        height: 18px;
    }
    
    /* Select2 下拉框 */
    .select2-container {
        width: 100% !important;
    }
    
    .select2-container--default .select2-selection--single {
        height: 40px;
        border-radius: 6px;
        border: 1px solid #ddd;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 35px;
        font-size: 13px;
        margin-top: -5px;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 35px;
    }
    
    /* 日期选择器 */
    .laydate-icon {
        height: 40px;
        line-height: 38px;
        font-size: 14px;
        border-radius: 6px;
        border: 1px solid #ddd;
        padding: 0 12px;
    }
    
    /* 数字输入框 */
    .number-input {
        text-align: center;
        font-weight: 600;
        color: #605ca8;
    }
    
    /* 状态标签 */
    .label {
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 4px;
    }
    
    /* 徽章 */
    .badge {
        font-size: 10px;
        padding: 3px 6px;
        border-radius: 10px;
    }
}

/* ===================================
   打印样式优化
   =================================== */
@media print {
    .main-header,
    .main-sidebar,
    .content-header,
    .btn,
    .pagination,
    .breadcrumb {
        display: none !important;
    }
    
    .content-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .box {
        border: none !important;
        box-shadow: none !important;
    }
    
    .table {
        border: 1px solid #000 !important;
    }
    
    .table th,
    .table td {
        border: 1px solid #000 !important;
    }
}

/* ===================================
   触摸设备优化
   =================================== */
@media (hover: none) and (pointer: coarse) {
    /* 触摸设备上的链接 */
    a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ===================================
   高分辨率屏幕优化
   =================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .btn,
    .form-control,
    .table {
        border-width: 0.5px;
    }
}

/* ===================================
   深色模式支持
   =================================== */
@media (prefers-color-scheme: dark) {
    /* 这里可以添加深色模式的样式 */
    /* 由于系统使用AdminLTE主题，暂时保持原有样式 */
}

/* ===================================
   无障碍访问优化
   =================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===================================
   特定页面优化
   =================================== */
@media (max-width: 767px) {
    /* 销售订单页面 */
    .customer_title_short {
        max-width: 15ch;
    }
    
    .huopinCSS {
        font-size: 12px;
    }
    
    .huopinCSS p {
        margin: 0 0 4px;
    }
    
    /* 各类订单添加/编辑页面 */
    .box-body .col-xs-4, .box-body .col-xs-5, .box-body .col-xs-6, .box-body .col-xs-8 {
        width: 100%;
        margin-bottom: 15px;
    }

    .box-body .form-group {
        margin-bottom: 20px;
    }

    .box-body .col-sm-4, .box-body .col-sm-5, .box-body .col-sm-6, .box-body .col-sm-8, .box-body .col-sm-12 {
        padding-left: 0;
        padding-right: 0;
    }
    
    .box-body .tianjia {
        text-align: center;
        max-width: 50px;
        padding: 0;
    }
    
    .box-body .tianjia .btn {
        width: 100%;
        margin: 0;
        padding: 10px 0;
    }
    
    .box-body #supplierIdSelect,
    .box-body #customerIdSelect,
    .box-body #logisticsIdSelect {
        width: calc(100% - 50px)!important;
        margin-bottom: 10px;
    }
    
    .box-body .new-kehu,
    .box-body .new-shouhuo {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .box-body .new-kehu input,
    .box-body .new-shouhuo input {
        margin-bottom: 8px;
    }

    .box-body .lockinput input[type="checkbox"] {
        margin-right: 5px;
        width: 12px !important;
    }
    
    /* 货品列表 */
    .box-body #itemsList {
        margin-top: 15px;
    }
    
    .box-body .item-container {
        flex-direction: column;
        margin-bottom: 15px;
        padding: 15px;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        background-color: #f8f9fa;
    }
    
    .box-body .item-container .delete-btn {
        width: 100%;
        margin: 10px 0 0 0;
        text-align: center;
    }
    
    /* 货品信息textarea宽度修复 */
    .box-body textarea,
    .box-body .item-container textarea {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 货品信息输入框宽度修复 */
    .box-body .item-container input[type="text"],
    .box-body .item-container input[type="number"],
    .box-body .item-container select {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* ===================================
        全站表单响应式优化 - 无需修改PHTML
        =================================== */
    
    /* 所有表单中的Bootstrap列类在移动端优化 */
    .form-horizontal .col-xs-1,
    .form-horizontal .col-xs-2,
    .form-horizontal .col-xs-3,
    .form-horizontal .col-xs-4,
    .form-horizontal .col-xs-5,
    .form-horizontal .col-xs-6,
    .form-horizontal .col-xs-7,
    .form-horizontal .col-xs-8,
    .form-horizontal .col-xs-9,
    .form-horizontal .col-xs-10,
    .form-horizontal .col-xs-11 {
        width: 100% !important;
        margin-bottom: 15px;
    }
    
    /* 表单组优化 */
    .form-horizontal .form-group {
        margin-bottom: 20px !important;
    }
    
    /* 表单中的按钮组优化 */
    .form-horizontal .col-xs-2 .btn,
    .form-horizontal .col-xs-3 .btn {
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    /* 表单中的选择器容器优化 */
    .form-horizontal .col-xs-10,
    .form-horizontal .col-xs-8 {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    /* 表单中的textarea优化 */
    .form-horizontal .col-xs-8 textarea,
    .form-horizontal .col-xs-12 textarea,
    .form-horizontal textarea {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 表单中的input优化 */
    .form-horizontal .col-xs-4 input:not([type="checkbox"]),
    .form-horizontal .col-xs-6 input:not([type="checkbox"]),
    .form-horizontal .col-xs-8 input:not([type="checkbox"]),
    .form-horizontal .col-xs-12 input:not([type="checkbox"]) {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 表单中的select优化 */
    .form-horizontal .col-xs-4 select,
    .form-horizontal .col-xs-6 select,
    .form-horizontal .col-xs-8 select,
    .form-horizontal .col-xs-12 select {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 表单中的checkbox和radio优化 */
    .form-horizontal .col-xs-4 .checkbox,
    .form-horizontal .col-xs-4 .radio,
    .form-horizontal .col-xs-6 .checkbox,
    .form-horizontal .col-xs-6 .radio,
    .form-horizontal .col-xs-8 .checkbox,
    .form-horizontal .col-xs-8 .radio {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
    
    /* 表单中的错误信息优化 */
    .form-horizontal .help-block {
        margin-top: 5px !important;
        margin-bottom: 0 !important;
    }
    
    /* 表单中的输入组优化 */
    .form-horizontal .input-group {
        width: 100% !important;
    }
    
    .form-horizontal .input-group .form-control {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 表单中的标签优化 */
    .form-horizontal .control-label {
        text-align: left !important;
        margin-bottom: 8px !important;
        font-weight: 600 !important;
    }
    
    /* 表单中的行间距优化 */
    .form-horizontal .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .form-horizontal .row > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    

    

    
    /* 表单中的复选框和单选框优化 */
    .form-horizontal .checkbox.inline,
    .form-horizontal .radio.inline {
        display: block;
        margin-bottom: 10px;
        text-align: center;
    }
    
    .form-horizontal .checkbox.inline label,
    .form-horizontal .radio.inline label {
        text-align: center;
        padding: 10px 10px 10px 30px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background-color: #f8f9fa;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .form-horizontal .checkbox.inline label:hover,
    .form-horizontal .radio.inline label:hover {
        background-color: #e9ecef;
        border-color: #605ca8;
    }
    
    /* 表单中的必填项标记优化 */
    .form-horizontal .must_add_value {
        color: #e74c3c;
        font-weight: bold;
        font-size: 14px;
    }
    
    /* 表单中的错误信息优化 */
    .form-horizontal .error-message {
        color: #e74c3c;
        font-size: 12px;
        margin-top: 5px;
        display: block;
        text-align: center;
    }
    
    /* 客户管理页面 */
    .new-kehu,
    .new-shouhuo {
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* 库存管理页面 */
    .stock-info {
        font-size: 12px;
    }
    
    /* 财务管理页面 */
    .finance-amount {
        font-weight: 600;
        color: #605ca8;
    }
    
    /* 报表页面 */
    .report-chart {
        height: 300px;
        margin-bottom: 20px;
    }
    

    
    /* 客户列表页面 */
    .customer-list .table-responsive {
        margin-bottom: 20px;
    }
    
    .customer-list .table th,
    .customer-list .table td {
        padding: 8px 4px;
        font-size: 12px;
    }
    
    .customer-list .table .btn-group {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    
    .customer-list .table .btn-group .btn {
        width: 100%;
        margin: 0;
        text-align: center;
    }
    
    /* 商品管理页面 */
    .goods-form .form-group {
        margin-bottom: 20px;
    }
    
    .goods-form .col-sm-2,
    .goods-form .col-sm-3,
    .goods-form .col-sm-4,
    .goods-form .col-sm-6 {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .goods-form .control-label {
        text-align: left;
        margin-bottom: 8px;
    }
    
    /* 商品列表页面 */
    .goods-list .table-responsive {
        margin-bottom: 20px;
    }
    
    .goods-list .table th,
    .goods-list .table td {
        padding: 8px 4px;
        font-size: 12px;
    }
    
    .goods-list .table .btn-group {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    
    .goods-list .table .btn-group .btn {
        width: 100%;
        margin: 0;
        text-align: center;
    }
    
    .goods-list .table th[width="6%"],
    .goods-list .table td[width="6%"] {
        min-width: 50px;
        width: 50px;
    }
    
    .goods-list .table th[width="7%"],
    .goods-list .table td[width="7%"] {
        min-width: 60px;
        width: 60px;
    }
    
    .goods-list .table th[width="8%"],
    .goods-list .table td[width="8%"] {
        min-width: 70px;
        width: 70px;
    }
    
    .goods-list .table th[width="10%"],
    .goods-list .table td[width="10%"] {
        min-width: 80px;
        width: 80px;
    }
    
    .goods-list .table th[width="12%"],
    .goods-list .table td[width="12%"] {
        min-width: 90px;
        width: 90px;
    }
    
    .goods-list .table th[width="20%"],
    .goods-list .table td[width="20%"] {
        min-width: 120px;
        width: 120px;
    }
    
    /* 库存查询页面 */
    .stock-query .search-form {
        margin-bottom: 20px;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 8px;
    }
    
    .stock-query .search-form .form-group {
        margin-bottom: 15px;
    }
    
    .stock-query .search-form .btn {
        width: 100%;
        margin-top: 10px;
    }
    
    /* 财务页面 */
    .finance-page .amount-display {
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .finance-page .form-group {
        margin-bottom: 20px;
    }
    
    /* 报表页面 */
    .report-page .chart-container {
        height: 300px;
        margin-bottom: 20px;
    }
    
    .report-page .filter-form {
        margin-bottom: 20px;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 8px;
    }
    
    .report-page .filter-form .form-group {
        margin-bottom: 15px;
    }
    
    .report-page .filter-form .btn {
        width: 100%;
        margin-top: 10px;
    }
}

/* ===================================
   工具类
   =================================== */
@media (max-width: 767px) {
    /* 隐藏元素 */
    .hidden-mobile {
        display: none !important;
    }
    
    /* 显示元素 */
    .visible-mobile {
        display: block !important;
    }
    
    /* 文本对齐 */
    .text-center-mobile {
        text-align: center !important;
    }
    
    .text-left-mobile {
        text-align: left !important;
    }
    
    .text-right-mobile {
        text-align: right !important;
    }
    
    /* 边距调整 */
    .no-margin-mobile {
        margin: 0 !important;
    }
    
    .no-padding-mobile {
        padding: 0 !important;
    }
    
    /* 宽度调整 */
    .full-width-mobile {
        width: 100% !important;
    }
    
    .half-width-mobile {
        width: 50% !important;
    }
}

/* ===================================
   动画效果
   =================================== */
@media (max-width: 767px) {
    /* 淡入效果 */
    .fade-in {
        animation: fadeIn 0.3s ease-in;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    /* 滑入效果 */
    .slide-in {
        animation: slideIn 0.3s ease-out;
    }
    
    @keyframes slideIn {
        from { transform: translateX(-100%); }
        to { transform: translateX(0); }
    }
    
    /* 缩放效果 */
    .scale-in {
        animation: scaleIn 0.2s ease-out;
    }
    
    @keyframes scaleIn {
        from { transform: scale(0.9); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
}

/* ===================================
   性能优化
   =================================== */
@media (max-width: 767px) {
    /* 硬件加速 */
    .hardware-accelerated {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
    }
    
    /* 平滑滚动 */
    html {
        scroll-behavior: smooth;
    }
    
    /* 优化触摸 */
    .touch-optimized {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ===================================
   兼容性处理
   =================================== */
@media (max-width: 767px) {
    /* IE兼容性 */
    .ie-fallback {
        display: block;
    }
    
    /* 旧版浏览器支持 */
    .legacy-support {
        display: block;
    }
    
    /* 现代浏览器优化 */
    .modern-browser {
        display: block;
    }
}

/* ===================================
   响应式网格系统补充
   =================================== */
@media (max-width: 767px) {
    .row {
        margin-left: -5px;
        margin-right: -5px;
        padding-bottom: 0!important;
    }
    
    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4,
    .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8,
    .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    /* 移动端列宽调整 */
    .col-xs-12 {
        width: 100%;
    }
    
    .col-xs-6 {
        width: 50%;
    }
    
    .col-xs-4 {
        width: 33.33333333%;
    }
    
    .col-xs-3 {
        width: 50%;
    }
    
    .col-xs-2 {
        width: 16.66666667%;
    }
    
    .col-xs-1 {
        width: 8.33333333%;
    }
}

@media (max-width: 480px) {
    .row {
        margin-left: -3px;
        margin-right: -3px;
    }
    
    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4,
    .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8,
    .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
        padding-left: 3px;
        padding-right: 3px;
    }
    
    .col-xs-3 {
        width: 100%;
    }
    
    .form-horizontal .col-xs-2 .btn, .form-horizontal .col-xs-3 .btn {
        line-height: 1.25;
    }
}


/* ===================================
   首页
   =================================== */
@media (max-width: 767px) {
    .home-grid {
        padding-left:5px;
        padding-right:5px;
    }
}