/* ================================================================
   QRuser 响应式样式 - 参考腾讯云/阿里云控制台规范
   断点设计：
     - xl: >=1200px (桌面)
     - lg: 992px-1199px (小桌面)
     - md: 768px-991px (平板)
     - sm: 576px-767px (大手机)
     - xs: <576px (小手机)
   ================================================================ */

/* ==================== 基础工具类 ==================== */
.table td,
.table thead th,
.box_nowrap {
    white-space: nowrap;
}

.module_chart_date {
    display: flex;
    align-items: center;
}

.btn-group.btn-group-toggle {
    display: -webkit-inline-box !important;
}

.btn-group-toggle > .btn {
    margin-bottom: 8px !important;
}

/* login_right/zdlogin 样式已移至各页面内联样式 */

.normalhide {
    display: none;
}

/* ==================== 超小屏幕 (<576px) ==================== */
@media screen and (max-width: 575.98px) {
    /* 全局间距收缩 — padding-top由JS动态计算（fixTopbarOverlap） */
    .page-content {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .container-fluid {
        padding: 0 6px;
    }

    /* 重置主内容区：手机端隐藏左侧sidebar后必须清除margin和overflow */
    .main-content {
        margin-left: 0 !important;
        overflow: visible !important;
    }

    .vertical-menu {
        display: none !important;
    }

    /* 卡片内边距收缩 */
    .card-body {
        padding: 12px 10px;
    }

    /* 表格横向滚动 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        min-width: 560px;
    }

    /* 表格头部/底部竖向排列 */
    .table-header,
    .table-footer,
    .table-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .table-filter,
    .table-tools,
    .table-pageinfo {
        margin-bottom: 0.5rem;
        width: 100%;
    }

    .table-search {
        width: 100%;
    }

    .table-search .selectpicker {
        width: 100% !important;
    }

    /* 分页居中 */
    .table-pagination {
        justify-content: center;
    }

    /* 安全中心项竖向排列 */
    .security-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 0;
    }

    .security-item-icon {
        margin-bottom: 10px;
    }

    .security-item-info {
        flex-direction: column;
        width: 100%;
    }

    .security-item-text {
        margin-bottom: 10px;
    }

    .security-item-title {
        font-size: 13px;
    }

    .security-item-title small {
        margin-left: 0 !important;
        display: inline-block;
        margin-top: 4px;
    }

    /* 安全中心头部竖向 */
    .security-header .row {
        flex-direction: column;
    }

    .security-header .col-sm-2,
    .security-header .col-sm-3,
    .security-header .col-sm-5 {
        max-width: 100%;
        margin-left: 0 !important;
        margin-bottom: 10px;
    }

    .security-avatar {
        display: none;
    }

    /* 登录页调整（已移至login.tpl内联样式） */

    /* 详情页表单 */
    .card-body.px-5 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* 隐藏桌面元素 */
    .bglogo,
    .navbar-brand-box,
    .phonehide {
        display: none !important;
    }

    .normalhide {
        display: block;
    }

    /* 级联选择器适配 */
    .zd-cascader-menu {
        min-width: 80px !important;
    }

    .zd-cascader-node {
        padding: 0 10px !important;
    }

    .zd-cascader-node__postfix {
        right: 20px !important;
    }

    /* 日期模块竖向 */
    .module_chart_date {
        display: block;
    }

    /* 按钮组适配 */
    .btn-group-toggle > .btn {
        margin-bottom: 6px;
        font-size: 12px;
    }

    /* 状态盒子 */
    .ststus-box .card-body {
        padding: 0 !important;
    }

    .ststus-box .card-body .container-fluid {
        margin: 0 !important;
    }

    /* 用户中心首页适配 */
    .funds-items {
        flex-direction: column;
    }

    .funds-item-info {
        width: 100%;
        border-bottom: 1px solid #e5e6eb;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .funds-item-other {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0;
    }

    .funds-item {
        font-size: 16px;
        padding: 10px 8px;
        border-left: none;
        border-bottom: 1px solid #e5e6eb;
    }

    .funds-item-header {
        font-size: 11px;
    }

    /* 用户头像区 */
    .zdusertx {
        width: 20%;
    }

    .zduxx {
        width: 80%;
    }

    .zdusertx .user-center_header {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .zduserxx span {
        font-size: 11px;
    }

    .user-center_name {
        font-size: 13px;
        max-width: 45%;
    }

    .zduserxx .zdyhz {
        width: auto;
        font-size: 10px;
    }

    /* 安全中心网格 */
    .app-overview-col {
        width: 50% !important;
    }

    /* 产品网格 */
    .user-center_product_grid {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 6px;
    }

    .user-center_product {
        padding: 8px 10px;
        font-size: 12px;
    }

    /* 待办事项 */
    .zddbsx a div {
        font-size: 16px;
    }

    .card-title {
        font-size: 13px;
    }

    /* 主内容区全宽 */
    .col-md-8,
    .col-md-4,
    .col-xl-8,
    .col-xl-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .b-1,
    .b-2 {
        margin-top: 0;
    }

    section {
        padding: 0 4px;
    }

    /* ECharts 容器 */
    #balanceCharts {
        height: 140px !important;
    }

    /* 弹窗适配 */
    .modal-dialog {
        margin: 6px;
    }

    .modal-body {
        padding: 12px;
    }

    /* 表单行适配 */
    .form-group.row {
        flex-direction: column;
    }

    .form-group.row > label {
        width: 100%;
        margin-bottom: 4px;
    }

    .form-group.row > div {
        width: 100%;
    }
}

/* ==================== 小屏幕 (576px-767px) ==================== */
@media screen and (min-width: 576px) and (max-width: 767.98px) {
    /* 重置主内容区 */
    .main-content {
        margin-left: 0 !important;
        overflow: visible !important;
    }

    .vertical-menu {
        display: none !important;
    }

    .table-header,
    .table-footer,
    .table-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .table-filter,
    .table-tools,
    .table-pageinfo {
        margin-bottom: 0.5rem;
    }

    .security-item-desc,
    .navbar-brand-box,
    .phonehide {
        display: none !important;
    }

    .normalhide {
        display: block;
    }

    .zd-cascader-menu {
        min-width: 80px !important;
    }

    /* 登录页调整（已移至login.tpl内联样式） */

    /* 用户中心首页 */
    .funds-items {
        flex-direction: column;
    }

    .funds-item-info {
        width: 100%;
        border-bottom: 1px solid #e5e6eb;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .funds-item-other {
        width: 100%;
    }

    .col-md-8,
    .col-md-4,
    .col-xl-8,
    .col-xl-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .app-overview-col {
        width: 50% !important;
    }

    .user-center_product_grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==================== 平板 (768px-991px) ==================== */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    /* 平板端也重置主内容区 */
    .main-content {
        margin-left: 0 !important;
        overflow: visible !important;
    }

    .vertical-menu {
        display: none !important;
    }

    .security-item-desc,
    .navbar-brand-box,
    .phonehide {
        display: none !important;
    }

    /* 登录页调整（已移至login.tpl内联样式） */

    /* 用户中心首页 */
    .funds-items {
        flex-direction: row;
    }

    .funds-item-info {
        width: 35%;
    }

    .funds-item-other {
        width: 65%;
    }

    .zdusertx {
        width: 20%;
    }

    .zduxx {
        width: 80%;
    }

    .funds-item {
        font-size: 20px;
        padding: 8px 12px;
    }

    /* 产品网格 */
    .user-center_product_grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 安全中心两列 */
    .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-sm-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-sm-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ==================== 小桌面 (992px-1199px) ==================== */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    .security-item-desc {
        display: none !important;
    }

    /* 登录页调整（已移至login.tpl内联样式） */

    .funds-item {
        font-size: 22px;
    }
}

/* ==================== 大桌面 (1200px-1365px) ==================== */
@media screen and (min-width: 1200px) and (max-width: 1365px) {
    /* 登录页调整（已移至login.tpl内联样式） */
}

/* ==================== 超大桌面 (<1366px 兼容旧规则) ==================== */
@media screen and (max-width: 1366px) {
    /* 登录页调整（已移至login.tpl内联样式） */
}

/* ==================== 打印样式 ==================== */
@media print {
    .navbar-header,
    .vertical-menu,
    .footer,
    .pls-back2top,
    #tthetop {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .page-content {
        padding: 0 !important;
    }
}