/* ==========================================================================
   JKCRM 移动端适配样式 (admin_mobile.css)
   仅针对 <=768px 视口生效，桌面端不受影响。
   说明：不修改第三方包，本文件通过 app/Admin/bootstrap.php 注入。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 列表表格：让内容横向滚动，避免中文逐字竖向换行导致表格不可读
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }

    .table-wrapper > .table,
    .table-wrapper .table {
        width: max-content;
        min-width: 100%;
    }

    .table-wrapper .table > thead > tr > th,
    .table-wrapper .table > tbody > tr > td {
        white-space: nowrap;
    }

    /* 表格单元格留白收紧，节省横向空间 */
    .table-wrapper .table > thead > tr > th,
    .table-wrapper .table > tbody > tr > td {
        padding: .55rem .6rem;
    }
}

/* --------------------------------------------------------------------------
   2. 顶部导航栏：紧凑排布，避免欢迎语/服务期限/语言选择相互挤压重叠
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .header-navbar {
        font-size: 12px;
    }

    .header-navbar .navbar-container {
        padding-left: 6px;
        padding-right: 6px;
    }

    .header-navbar .navbar-collapse {
        flex-wrap: nowrap;
        min-width: 0;
        justify-content: flex-end !important;
    }

    /* 左侧欢迎语信息在移动端非必要，隐藏以给操作区让位（桌面端不受影响） */
    .header-navbar .navbar-left {
        display: none !important;
    }

    /* 右侧区域整体收紧 */
    .header-navbar .navbar-right {
        flex-wrap: nowrap;
        min-width: 0;
        margin-left: auto;
    }

    .header-navbar .navbar-right > ul.nav {
        min-width: 0;
        overflow: hidden;
        flex-wrap: nowrap;
    }

    .header-navbar .navbar-right > ul.nav > li {
        min-width: 0;
    }

    .header-navbar .navbar-right > ul.nav > li > a {
        padding-left: 2px;
        padding-right: 2px;
        display: flex;
        align-items: center;
    }

    /* 服务期限提示文字：缩小字号并省略号截断，避免撑破导航栏 */
    .header-navbar .navbar-right > ul.nav > li > a > span {
        font-size: 11px;
        line-height: 1.15;
        display: inline-block;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }

    .header-navbar .navbar-right > ul.nav > li > a > i.feather {
        font-size: 1rem !important;
        margin-right: 2px;
    }

    /* 语言选择框 */
    .header-navbar #navbar_lang {
        width: auto;
        max-width: 70px;
        height: 30px;
        padding: 2px 4px;
        font-size: 12px;
        line-height: 1.2;
    }

    /* 头像缩小 */
    .header-navbar .dropdown-user-link .round {
        width: 30px !important;
        height: 30px !important;
    }

    .header-navbar .bookmark-wrapper .menu-toggle {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* --------------------------------------------------------------------------
   3. 页面头部（标题 / 描述 / 面包屑）
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .content-header {
        padding: 8px 12px 0;
    }

    .content-header .breadcrumbs-top > h1 {
        float: none !important;
        display: block;
        font-size: 1.4rem;
        margin-bottom: 2px;
    }

    .content-header .breadcrumbs-top > h1 small {
        display: block;
        font-size: .85rem;
        margin-top: 2px;
    }

    .content-header .breadcrumb-wrapper {
        float: none !important;
        text-align: right;
    }

    .content-header .breadcrumb {
        margin-bottom: 4px;
        font-size: .8rem;
    }
}

/* --------------------------------------------------------------------------
   4. 卡片 / 内容区域
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .content-wrapper {
        padding-left: 6px;
        padding-right: 6px;
    }

    .card {
        margin-bottom: 10px;
    }

    /* 详情顶部工具栏按钮组换行不溢出 */
    .content-body .row [class^="col-"] {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* --------------------------------------------------------------------------
   5. 客户 / 公海详情顶部信息区
   -------------------------------------------------------------------------- */
.customer-detail-top {
    padding: 8px 10px;
}

.customer-detail-top .customer-detail-name {
    margin: 0 0 6px;
    font-size: 1.4rem;
    word-break: break-all;
}

.customer-detail-top .detail-more-buttons {
    margin-bottom: 6px;
}

.customer-detail-top .detail-more-buttons .btn {
    margin-bottom: 4px;
}

.customer-detail-top .detail-info-row > [class*="col-"] {
    margin-bottom: 6px;
}

.customer-detail-top .detail-info-label {
    display: block;
    color: #8a94a6;
    font-size: 12px;
    line-height: 1.3;
}

.customer-detail-top .detail-info-value {
    display: block;
    font-weight: 600;
    margin-top: 2px;
    word-break: break-all;
}

@media (max-width: 767.98px) {
    .customer-detail-top {
        padding: 10px;
    }

    .customer-detail-top .detail-info-row {
        border-top: 1px solid #eef0f5;
        padding-top: 10px;
        margin-top: 4px;
    }

    .customer-detail-top .detail-info-row > [class*="col-"] {
        border-bottom: 1px dashed #eef0f5;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    .customer-detail-top .detail-more-buttons {
        text-align: left !important;
    }

    .customer-detail-top .detail-more-buttons .btn {
        margin-right: 6px;
    }
}