/* ============================================================
   CRM 系统公共样式（专业版）
   设计原则：克制、留白、单一强调色、无装饰性元素
   ============================================================ */

:root {
    --crm-primary: #285da8;
    --crm-primary-dark: #204b88;
    --crm-text: #182536;
    --crm-text-secondary: #617083;
    --crm-border: #dfe6ee;
    --crm-bg: #f3f6fa;
    --crm-card: #ffffff;
    --crm-sidebar: #172b45;
    --crm-sidebar-muted: #b9c7d8;
    --crm-success: #17834f;
    --crm-warning: #a96208;
    --crm-danger: #b93838;
    --crm-info: #2866ad;
    --crm-radius: 12px;
    --crm-shadow: 0 3px 12px rgba(24, 46, 73, .045);
    --crm-sidebar-width: 232px;
}

* {
    font-family: -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC",
        "Helvetica Neue", Arial, sans-serif;
    box-sizing: border-box;
}

body {
    background: var(--crm-bg);
    color: var(--crm-text);
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
}

/* ===== 登录页 ===== */
.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
    padding: 16px;
    background: #f0f2f5;
}
.login-card {
    width: min(400px, 100%);
    background: #fff;
    border-radius: 12px;
    padding: 48px 44px;
    border: 1px solid var(--crm-border);
    box-shadow: 0 4px 24px rgba(15, 23, 42, .06);
}
.login-card .login-logo {
    font-size: 22px;
    font-weight: 700;
    color: var(--crm-text);
    text-align: center;
    margin-bottom: 6px;
}
.login-card .login-sub {
    text-align: center;
    color: var(--crm-text-secondary);
    font-size: 13px;
    margin-bottom: 32px;
}
.login-card .form-label { font-weight: 500; color: #374151; }
.login-filing {
    padding-top: 12px;
    text-align: center;
    font-size: 13px;
}
.login-filing a { color: var(--crm-text-secondary); }

/* ===== 布局 ===== */
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--crm-sidebar-width);
    background: #fff;
    border-right: 1px solid var(--crm-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 100;
}
.sidebar .brand {
    padding: 22px 24px;
    font-size: 16px;
    font-weight: 700;
    color: var(--crm-text);
    border-bottom: 1px solid var(--crm-border);
    letter-spacing: .5px;
}
.sidebar .brand span { color: var(--crm-primary); }
.sidebar nav { padding: 12px; flex: 1; }
.sidebar .nav-item {
    padding: 10px 14px;
    color: #4b5563;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    border-radius: 8px;
    margin-bottom: 2px;
    transition: background .12s, color .12s;
}
.sidebar .nav-item svg { flex-shrink: 0; opacity: .75; }
.sidebar .nav-item.active svg { opacity: 1; }
.sidebar .nav-item:hover { background: #f3f4f6; color: var(--crm-text); }
.sidebar .nav-item.active {
    background: #eff6ff;
    color: var(--crm-primary);
    font-weight: 600;
}
.sidebar .sidebar-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--crm-border);
    font-size: 13px;
    color: var(--crm-text-secondary);
}
.sidebar .sidebar-footer a {
    color: var(--crm-text-secondary);
    text-decoration: none;
    margin-left: 12px;
}
.sidebar .sidebar-footer a:hover { color: #dc2626; }

.main-content {
    flex: 1;
    margin-left: var(--crm-sidebar-width);
    padding: 32px 36px 48px;
    max-width: 1560px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.topbar h4 {
    margin: 0;
    font-weight: 700;
    font-size: 20px;
    color: var(--crm-text);
}

/* ===== 顶栏右侧：待办铃铛 + 用户菜单 ===== */
.topbar-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--crm-border);
    border-radius: 8px;
    color: #4b5563;
    background: #fff;
}
.topbar-bell:hover { color: var(--crm-primary); border-color: var(--crm-primary); }
.bell-badge {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 17px; height: 17px;
    background: #dc2626;
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    line-height: 17px;
    text-align: center;
    padding: 0 4px;
    font-weight: 600;
}

/* ===== 角色徽章 ===== */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 500;
    background: #f3f4f6;
    color: #374151;
}
.role-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.role-admin::before { background: #111827; }
.role-sales::before { background: #2563eb; }
.role-mortgage::before { background: #059669; }

/* ===== 卡片 ===== */
.card {
    background: var(--crm-card);
    border: 1px solid var(--crm-border);
    border-radius: 10px;
    box-shadow: none;
    margin-bottom: 24px;
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--crm-border);
    font-weight: 600;
    font-size: 15px;
    color: var(--crm-text);
    border-radius: 10px 10px 0 0 !important;
    padding: 16px 24px;
}
.card-body { padding: 24px; }

/* ===== 指标卡 ===== */
.metric-card {
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: 10px;
    padding: 20px 22px;
    height: 100%;
}
.metric-card .metric-label {
    font-size: 13px;
    color: var(--crm-text-secondary);
    margin-bottom: 8px;
}
.metric-card .metric-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--crm-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.metric-card .metric-value.text-primary { color: var(--crm-primary); }
.metric-card .metric-value.text-success { color: #059669; }
.metric-card .metric-value.text-danger { color: #dc2626; }
.metric-card .metric-value.text-warning { color: #b45309; }

/* ===== 表格 ===== */
.table { font-size: 14px; margin-bottom: 0; }
.table thead th {
    background: #f9fafb;
    color: var(--crm-text-secondary);
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid var(--crm-border);
    white-space: nowrap;
    padding: 12px 16px;
}
.table tbody td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #f3f4f6;
}
.table tbody tr:hover { background: #f9fafb; }
.table a { color: var(--crm-primary); text-decoration: none; }
.table a:hover { text-decoration: underline; }

/* ===== 状态徽章（中性底 + 色点，不再整片彩色） ===== */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 500;
    background: #f3f4f6;
    color: #374151;
    white-space: nowrap;
}
.badge-status::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #9ca3af;
}
/* 客户状态 */
.st-初步接触::before { background: #60a5fa; }
.st-跟进中::before { background: #2563eb; }
.st-在途::before { background: #d97706; }
.st-已回款::before { background: #059669; }
.st-已流失::before { background: #d1d5db; }
/* 订单状态 */
.st-待付款::before { background: #dc2626; }
.st-部分回款::before { background: #d97706; }
.st-已完成::before { background: #059669; }
.st-已取消::before { background: #d1d5db; }
/* 按揭状态 */
.st-待匹配::before { background: #dc2626; }
.st-进件中::before { background: #d97706; }
.st-已批款::before { background: #2563eb; }
.st-已放款::before { background: #059669; }
/* 产品进件状态 */
.st-待进件::before { background: #9ca3af; }
.st-已拒件::before { background: #dc2626; }

/* ===== 图表容器 ===== */
.chart-box { width: 100%; height: 300px; }

/* ===== 跟进时间线 ===== */
.timeline { position: relative; padding-left: 20px; }
.timeline::before {
    content: "";
    position: absolute;
    left: 4px; top: 6px; bottom: 6px;
    width: 1px;
    background: var(--crm-border);
}
.timeline-item { position: relative; padding-bottom: 20px; }
.timeline-item::before {
    content: "";
    position: absolute;
    left: -19px; top: 8px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--crm-primary);
}
.timeline-item .timeline-meta {
    font-size: 12px;
    color: var(--crm-text-secondary);
    margin-bottom: 6px;
}
.timeline-item .timeline-content {
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 8px;
    padding: 12px 16px;
}

/* ===== 快速新增条 ===== */
.quick-add-bar {
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.quick-add-bar .quick-label {
    color: var(--crm-text);
    font-weight: 600;
    font-size: 14px;
    margin-right: 4px;
}

/* ===== 筛选栏 ===== */
.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.filter-bar .form-control, .filter-bar .form-select { max-width: 190px; }

/* ===== 提示条 ===== */
.alert { border-radius: 10px; font-size: 14px; border: 1px solid transparent; }
.alert-todo { margin-bottom: 24px; }
.alert-primary { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-light { background: #fff; border-color: var(--crm-border); color: var(--crm-text-secondary); }
.alert a { color: inherit; font-weight: 600; }

/* ===== 导入向导 ===== */
.import-steps { display: flex; gap: 10px; margin-bottom: 24px; }
.import-step {
    flex: 1;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--crm-border);
    color: var(--crm-text-secondary);
    font-size: 14px;
    font-weight: 500;
}
.import-step.active {
    background: var(--crm-primary);
    border-color: var(--crm-primary);
    color: #fff;
}
.import-step.done {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}
.drop-zone {
    border: 1.5px dashed #d1d5db;
    border-radius: 10px;
    padding: 56px 24px;
    text-align: center;
    cursor: pointer;
    transition: all .15s;
    background: #fafafa;
}
.drop-zone:hover { border-color: var(--crm-primary); background: #eff6ff; }
.drop-zone .drop-zone-title { font-size: 16px; font-weight: 600; color: var(--crm-text); }
.drop-zone .drop-zone-sub { font-size: 13px; color: var(--crm-text-secondary); margin-top: 6px; }

/* ===== 数字 ===== */
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ===== 分页 ===== */
.pagination { margin-bottom: 0; }
.pagination .page-link {
    color: #4b5563;
    border-color: var(--crm-border);
    padding: 6px 13px;
}
.pagination .page-link:hover { background: #f3f4f6; color: var(--crm-primary); }
.pagination .active .page-link {
    background: var(--crm-primary);
    border-color: var(--crm-primary);
    color: #fff;
}

/* ===== 按钮微调 ===== */
.btn { border-radius: 8px; font-size: 14px; padding: 8px 16px; }
.btn-sm { padding: 4px 12px; font-size: 13px; border-radius: 6px; }
.btn-primary { background: var(--crm-primary); border-color: var(--crm-primary); }
.btn-primary:hover { background: var(--crm-primary-dark); border-color: var(--crm-primary-dark); }
.btn-lg { padding: 10px 24px; }

/* ===== 表单 ===== */
.form-control, .form-select {
    border-radius: 8px;
    border-color: #d1d5db;
    font-size: 14px;
    padding: 8px 12px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--crm-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.form-label { font-size: 13px; color: #374151; margin-bottom: 6px; }

/* ===== 弹窗 ===== */
.modal-content { border-radius: 12px; border: none; }
.modal-header { padding: 20px 24px 12px; border-bottom: none; }
.modal-body { padding: 12px 24px; }
.modal-footer { padding: 12px 24px 20px; border-top: none; }

/* ===== Toast ===== */
#toast-container {
    position: fixed;
    top: 24px; right: 24px;
    z-index: 9999;
}

/* ===== 客户详情：备注/资质分段显示 ===== */
.remark-block {
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
    margin-top: 4px;
}
.remark-segment {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.6;
}
.remark-tag {
    flex-shrink: 0;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 4px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
}

/* ===== 手机端适配（≤768px） ===== */
.menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--crm-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 18px;
    color: var(--crm-text);
    margin-right: 12px;
    cursor: pointer;
    line-height: 1;
}
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 99;
}

@media (max-width: 768px) {
    /* 侧边栏默认收起，点汉堡按钮滑出 */
    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
    }
    .sidebar.open { transform: translateX(0); box-shadow: 4px 0 16px rgba(0,0,0,.12); }
    .sidebar-overlay.show { display: block; }
    .menu-toggle { display: inline-block; }

    .main-content {
        flex: 1 1 0%;
        margin-left: 0;
        width: 100%;
        min-width: 0;
        padding: 16px 14px 40px;
        max-width: 100%;
    }
    #page-body { min-width: 0; width: 100%; }
    .topbar { margin-bottom: 16px; }
    .topbar h4 { font-size: 17px; }

    /* 表格横向滑动，不挤压 */
    .card-body { overflow-x: auto; }
    .card-body .table { min-width: 640px; }

    /* 指标卡一行两个 */
    .metric-card { padding: 12px 14px; }
    .metric-value { font-size: 20px; }

    /* 筛选栏控件占满一行 */
    .filter-bar { flex-direction: column; align-items: stretch !important; width: 100%; min-width: 0; }
    .filter-bar .form-control,
    .filter-bar .form-select,
    .filter-bar .btn { width: 100% !important; max-width: none !important; min-width: 0; margin-left: 0 !important; }

    /* 快速新增条换行 */
    .quick-add-bar { flex-wrap: wrap; min-width: 0; }
    .quick-add-bar .form-control,
    .quick-add-bar .form-select { max-width: 100% !important; min-width: 0; width: 100%; flex: 1 1 100%; }
    .quick-add-bar .btn { min-width: 0; width: 100%; flex: 1 1 100%; }

    /* 弹窗贴近全屏，方便填写 */
    .modal-dialog { margin: 8px; }

    /* 标签栏手机端横向滑动，不换行 */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link { white-space: nowrap; }
}

/* ===== 数据看板：智能建议 ===== */
.insight-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
}
.insight-item:last-child { border-bottom: none; }
.insight-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 7px;
}
.insight-item a { color: var(--crm-text); text-decoration: none; font-weight: 600; }
.insight-item a:hover { color: var(--crm-primary); }
.insight-level {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
}

/* ===== 待办中心计数 ===== */
.todo-count {
    display: inline-block;
    min-width: 20px;
    text-align: center;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 0 6px;
    font-size: 12px;
    color: var(--crm-text-secondary);
}
.nav-link.active .todo-count { background: #dbeafe; color: var(--crm-primary); }

/* ===== 列表多选批量操作条 ===== */
.batch-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 14px;
}

/* ===== 手机客户卡片 ===== */
.customer-cards { display: grid; gap: 12px; margin-top: 12px; }
.customer-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--crm-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}
.customer-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}
.customer-card-name {
    flex: 1 1 100%;
    min-width: 0;
    color: var(--crm-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
    text-decoration: none;
}
.customer-card-select { display: inline-flex; align-items: center; gap: 6px; color: var(--crm-text-secondary); font-size: 13px; }
.customer-card-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 14px 0;
}
.customer-card-details > div { min-width: 0; }
.customer-card-details dt { color: var(--crm-text-secondary); font-size: 12px; font-weight: 500; }
.customer-card-details dd { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.customer-card-details a { color: inherit; text-decoration: none; }
.customer-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.customer-empty {
    padding: 28px 16px;
    border: 1px dashed var(--crm-border);
    border-radius: 12px;
    background: #fff;
    color: var(--crm-text-secondary);
    text-align: center;
}
@media (max-width: 380px) {
    .customer-card { padding: 12px; }
    .customer-card-details { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .pagination { flex-wrap: wrap; justify-content: flex-end; }
    .pagination .page-link { padding: 6px 9px; }
}

/* ===== 折叠面板链接 ===== */
.collapse-link {
    color: var(--crm-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
}
.collapse-link:hover { color: var(--crm-primary); }

/* ===== 合同照片墙 ===== */
#contract-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.contract-item {
    border: 1px solid var(--crm-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.contract-thumb {
    width: 100%;
    height: 90px;
    object-fit: cover;
    cursor: pointer;
    display: block;
    background: #f9fafb;
}
.contract-thumb:hover { opacity: .85; }
.contract-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--crm-text-secondary);
}
.contract-name {
    font-size: 12px;
    padding: 6px 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contract-item .d-flex { padding: 0 8px 6px; }

/* ===== 历史版本快照 ===== */
.snapshot-item {
    border: 1px solid var(--crm-border);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: #f9fafb;
}
.snapshot-detail {
    margin-top: 6px;
    background: #fff;
    border-radius: 6px;
    padding: 6px;
}


/* ===== Niotiof_crm 体验规范 v1：清晰层级、低干扰、桌面与触屏一致 ===== */
:root {
    color-scheme: light;
    --bs-primary: var(--crm-primary);
    --bs-primary-rgb: 40, 93, 168;
    --bs-link-color: var(--crm-primary);
    --bs-link-hover-color: var(--crm-primary-dark);
}

body { font-size: 14px; line-height: 1.6; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid rgba(40, 93, 168, .38); outline-offset: 2px; }

.sidebar { background: var(--crm-sidebar); border-right: 0; box-shadow: 2px 0 12px rgba(15, 35, 58, .08); }
.sidebar .brand { color: #fff; border-bottom-color: rgba(255,255,255,.12); padding: 22px 20px; letter-spacing: .2px; }
.sidebar .brand span { color: #8fc0ff; }
.sidebar nav { padding: 14px 10px; overflow-y: auto; }
.sidebar .nav-item { color: var(--crm-sidebar-muted); min-height: 42px; gap: 11px; border-radius: 8px; margin: 2px 0; transition: background-color .12s ease, color .12s ease; }
.sidebar .nav-item svg { opacity: .9; }
.sidebar .nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .nav-item.active { color: #fff; background: #294d76; box-shadow: inset 3px 0 #78b4ff; }
.sidebar .sidebar-footer { color: var(--crm-sidebar-muted); border-top-color: rgba(255,255,255,.12); padding: 15px 18px; }
.sidebar .sidebar-footer a { color: #fff; }

.main-content { padding: 28px 32px 48px; max-width: 1680px; }
.topbar { min-height: 44px; margin-bottom: 22px; }
.topbar h4 { font-size: 21px; letter-spacing: -.25px; }
.topbar-bell { width: 40px; height: 40px; }
.card { border-color: var(--crm-border); border-radius: var(--crm-radius); box-shadow: var(--crm-shadow); margin-bottom: 18px; }
.card-header { padding: 15px 20px; border-color: #e8edf3; border-radius: var(--crm-radius) var(--crm-radius) 0 0 !important; }
.card-body { padding: 20px; }
.metric-card { border-radius: 11px; padding: 18px 20px; box-shadow: 0 2px 8px rgba(24,46,73,.035); transition: border-color .12s ease, transform .12s ease; }
.metric-card:hover { border-color: #c5d4e5; }
.executive-metric { display:block; height:100%; color:inherit; text-decoration:none; }
.executive-metric:focus-visible { outline:2px solid var(--crm-primary); outline-offset:3px; border-radius:12px; }
.executive-metric:hover .metric-card { border-color:#b8cbe0; }
.metric-card .metric-label { letter-spacing: .1px; }
.metric-card .metric-value { font-size: 27px; letter-spacing: -.35px; }

.table { --bs-table-hover-bg: #f4f8fc; color: #253448; }
.table thead th { background: #f4f7fb; color: #526276; font-size: 12px; letter-spacing: .15px; border-bottom-color: #d9e2ec; }
.table tbody td { border-bottom-color: #edf1f5; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-responsive { border-radius: 8px; scrollbar-color: #b7c5d5 #f1f4f8; scrollbar-width: thin; }
.table-responsive:focus-visible { outline-offset: -2px; }
.preview-scroll-region:focus-visible { outline: 2px solid var(--crm-primary); outline-offset: 2px; }
.preview-scroll-hint { display: none; color: var(--crm-text-secondary); font-size: 12px; padding: 0 0 8px; }
.table tbody tr:has(.row-check:checked) { --bs-table-bg: #edf5ff; }
.table tbody tr:has(.row-check:checked) td { background: #edf5ff; }
.num, .metric-value, .todo-count { font-variant-numeric: tabular-nums; }

.btn { min-height: 40px; border-radius: 8px; font-weight: 550; transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease; }
.btn-sm { min-height: 36px; padding: 6px 12px; }
.btn-primary { background: var(--crm-primary); border-color: var(--crm-primary); }
.btn-primary:hover { background: var(--crm-primary-dark); border-color: var(--crm-primary-dark); }
.btn:disabled, .btn.disabled { cursor: wait; opacity: .72; }
.form-control, .form-select { min-height: 42px; border-color: #cbd5e1; border-radius: 8px; color: #243448; }
.form-control::placeholder { color: #8996a6; }
.form-label { color: #344458; font-weight: 550; }
.form-check-input { width: 1.1em; height: 1.1em; border-color: #9aa9ba; }
.form-check-input:checked { background-color: var(--crm-primary); border-color: var(--crm-primary); }

.nav-tabs { border-bottom-color: var(--crm-border); gap: 4px; }
.nav-tabs .nav-link { color: #5b6b7f; border-radius: 8px 8px 0 0; }
.nav-tabs .nav-link.active { color: var(--crm-primary-dark); font-weight: 650; border-color: var(--crm-border) var(--crm-border) #fff; }
.alert { border-radius: 10px; }
.alert-primary { color: #204b7b; background: #edf5ff; border-color: #c8def6; }
.alert-danger { color: #8f3030; }
.pagination .page-link { min-width: 38px; min-height: 38px; display: grid; place-items: center; border-radius: 7px; margin: 0 2px; }

.import-step { border-radius: 10px; font-weight: 600; }
.import-step.active { background: #eaf2fc; border-color: #9dbde1; color: #204b7b; box-shadow: inset 0 -3px var(--crm-primary); }
.import-step.done { background: #edf8f1; border-color: #b9dec7; color: #176742; }
.drop-zone { border-color: #afc1d5; background: #f8fafd; border-radius: 12px; }
.drop-zone:hover, .drop-zone:focus-within { border-color: var(--crm-primary); background: #edf5ff; }
#dup-card .card-header { color: #80520b; background: #fffaf0; }
#prob-card .card-header { color: #963b3b; background: #fff5f4; }
#dup-card tbody tr { background: #fffbf2; }
#prob-card tbody tr { background: #fff8f7; }

#toast-container { top: 18px; right: 18px; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); }
.crm-toast { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; color: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(20,38,61,.2); font-size: 14px; line-height: 1.5; animation: crm-toast-in .16s ease-out; }
.crm-toast-success { background: #176b45; }
.crm-toast-error { background: #a83232; }
.crm-toast-warning { background: #8b570b; }
.crm-toast-info { background: #24558e; }
.crm-toast-icon { flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-items: center; font-weight: 800; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; font-size: 12px; }
@keyframes crm-toast-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.spinner-border-sm { width: .9rem; height: .9rem; border-width: 2px; vertical-align: -.12em; }

.ui-state { display: grid; justify-items: start; gap: 5px; padding: 24px; border: 1px dashed var(--crm-border); border-radius: 10px; background: #f9fbfd; color: var(--crm-text-secondary); }
.ui-state strong { color: var(--crm-text); font-size: 14px; }
.ui-state-loading { border-style: solid; background: #f7faff; }
.ui-state-error { border-color: #e8bcbc; background: #fff8f7; }
.ui-state .btn { margin-top: 8px; }
.todo-list { display: grid; gap: 10px; }
.todo-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--crm-border); border-radius: 10px; background: #fff; transition: border-color .12s ease, background-color .12s ease; }
.todo-item:hover { border-color: #c2d3e5; background: #fbfdff; }
.todo-main { min-width: 0; }
.todo-main > a { font-size: 15px; font-weight: 650; color: #254b78; text-decoration: none; }
.todo-main > a:hover { text-decoration: underline; }
.todo-meta { margin-top: 5px; color: var(--crm-text-secondary); font-size: 13px; overflow-wrap: anywhere; }
.todo-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.customer-phone { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.customer-phone a { color: #254b78 !important; font-variant-numeric: tabular-nums; }
.customer-copy { min-height: 30px; padding: 2px 8px; border: 1px solid #d5dfeb; border-radius: 6px; background: #f8fafd; color: #41546a; font-size: 12px; }
.customer-copy:hover { border-color: var(--crm-primary); color: var(--crm-primary-dark); background: #edf5ff; }

@media (max-width: 1024px) {
    .main-content { padding: 24px 22px 40px; }
}
@media (max-width: 768px) {
    .sidebar { background: var(--crm-sidebar); }
    .main-content { padding: 12px 12px calc(28px + env(safe-area-inset-bottom)); }
    .topbar { position: sticky; top: 0; z-index: 30; min-height: 54px; margin: -12px -12px 14px; padding: 8px 12px; background: rgba(243,246,250,.96); border-bottom: 1px solid rgba(220,228,237,.9); backdrop-filter: blur(10px); }
    .topbar h4 { font-size: 17px; }
    .menu-toggle { min-width: 42px; min-height: 42px; margin-right: 8px; padding: 7px 10px; background: #fff; }
    .topbar .dropdown-toggle { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .card { margin-bottom: 12px; border-radius: 11px; }
    .card-header { padding: 13px 15px; }
    .card-body { padding: 15px; }
    .card-body.p-0 { padding: 0; }
    .card-body .table { min-width: 680px; }
    .table-responsive { max-width: 100%; overscroll-behavior-x: contain; }
    .table thead th, .table tbody td { padding: 10px 12px; }
    .metric-card { padding: 13px 14px; }
    .metric-card .metric-value { font-size: 21px; }
    .preview-scroll-hint { display: block; }
    .filter-bar { gap: 9px; }
    .btn, .form-control, .form-select { min-height: 44px; }
    .btn-sm { min-height: 40px; }
    .modal-dialog { margin: 8px; }
    .modal-content { max-height: calc(100dvh - 16px); overflow-y: auto; }
    .modal-header { padding: 17px 18px 10px; }
    .modal-body { padding: 12px 18px; }
    .modal-footer { padding: 10px 18px 16px; gap: 8px; }
    .modal-footer > * { margin: 0; }
    .import-steps { gap: 6px; margin-bottom: 14px; }
    .import-step { padding: 9px 5px; font-size: 12px; }
    #toast-container { top: calc(10px + env(safe-area-inset-top)); right: 10px; width: calc(100vw - 20px); }
    .batch-bar { align-items: stretch; }
    .batch-bar .btn, .batch-bar .form-select { flex: 1 1 100%; max-width: none !important; }
    .todo-item { align-items: flex-start; flex-direction: column; gap: 12px; padding: 14px; }
    .todo-actions { width: 100%; }
    .todo-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.refund-status { display:inline-flex; align-items:center; padding:4px 9px; border-radius:999px; font-size:12px; font-weight:650; white-space:nowrap; background:#f1f4f8; color:#526276; }
.refund-待审批 { background:#fff4dc; color:#89560d; }
.refund-已批准 { background:#eaf6ee; color:#176b45; }
.refund-已拒绝 { background:#fff0ef; color:#9a3934; }
.refund-pending { background:#fff4dc; color:#89560d; }
.refund-approved { background:#eaf6ee; color:#176b45; }
.refund-rejected { background:#fff0ef; color:#9a3934; }
.refund-card-list { display:none; }
@media (max-width: 767.98px) {
    .refund-desktop-list { display:none; }
    .refund-card-list { display:grid; gap:12px; }
    .refund-mobile-card { border:1px solid #dfe6ee; border-radius:12px; background:#fff; padding:14px; }
    .refund-mobile-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
    .refund-mobile-customer { font-weight:700; color:#1c2c42; overflow-wrap:anywhere; }
    .refund-mobile-amount { font-size:22px; line-height:1.25; font-weight:750; color:#14263d; margin:12px 0; font-variant-numeric:tabular-nums; }
    .refund-mobile-details { display:grid; gap:10px; margin:0; }
    .refund-mobile-details > div { display:grid; grid-template-columns:72px minmax(0,1fr); gap:8px; }
    .refund-mobile-details dt { color:#718096; font-size:12px; font-weight:600; }
    .refund-mobile-details dd { margin:0; color:#34445a; overflow-wrap:anywhere; }
    .refund-mobile-actions { display:flex; gap:8px; border-top:1px solid #e8edf3; margin-top:12px; padding-top:12px; }
    .refund-mobile-actions .btn { flex:1; min-height:42px; }
    .refund-mobile-empty { padding:24px 12px; color:#718096; text-align:center; border:1px dashed #cbd5e1; border-radius:12px; }
}

.payment-mobile-content { display:none; }
.payment-mobile-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; color:#52647a; font-size:13px; }
.payment-mobile-heading strong { color:#34445a; font-weight:650; }
.payment-mobile-heading span { padding:3px 8px; border-radius:999px; background:#f1f5f9; color:#52647a; }
.payment-mobile-net { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:12px 0; color:#718096; font-size:13px; }
.payment-mobile-net strong { color:#14263d; font-size:22px; line-height:1.25; font-variant-numeric:tabular-nums; }
.payment-mobile-details { display:grid; gap:9px; margin:0; }
.payment-mobile-details > div { display:grid; grid-template-columns:74px minmax(0,1fr); gap:8px; }
.payment-mobile-details dt { color:#718096; font-size:12px; font-weight:600; }
.payment-mobile-details dd { min-width:0; margin:0; color:#34445a; overflow-wrap:anywhere; }
.payment-mobile-actions { display:flex; gap:8px; border-top:1px solid #e8edf3; margin-top:12px; padding-top:12px; }
.payment-mobile-actions .btn { flex:1; min-height:42px; }
.payment-mobile-select-all { display:none; }
@media (max-width: 767.98px) {
    .payment-list-table-wrap { overflow:visible; border-radius:0; }
    .card-body .payment-list-table { width:100%; min-width:0; margin:0; }
    .payment-mobile-select-all { display:block; margin:0 0 10px; }
    .payment-mobile-select-all[hidden] { display:none !important; }
    .payment-mobile-select-all label { display:inline-flex; align-items:center; gap:8px; min-height:40px; color:#52647a; font-size:13px; }
    .payment-mobile-select-all input { width:19px; height:19px; margin:0; }
    #pagination { flex-wrap:wrap; gap:2px; }
    .payment-list-table-wrap + .d-flex { flex-wrap:wrap; gap:8px; }
    .payment-list-table-wrap + .d-flex nav { max-width:100%; }
    .payment-list-table thead { display:none; }
    .payment-list-table tbody { display:grid; gap:12px; width:100%; }
    .payment-list-table tbody tr.payment-record-row { display:grid; grid-template-columns:30px minmax(0,1fr); width:100%; margin:0; overflow:hidden; border:1px solid #dfe6ee; border-radius:12px; background:#fff; }
    .payment-list-table tbody tr.payment-record-row > td { display:none; border:0; }
    .payment-list-table tbody tr.payment-record-row > td.payment-select-cell { display:flex; align-items:flex-start; justify-content:center; grid-column:1; padding:16px 0 12px 5px; }
    .payment-select-cell .row-check { width:19px; height:19px; margin:0; }
    .payment-list-table tbody tr.payment-record-row > td.payment-mobile-content { display:block; grid-column:2; min-width:0; padding:13px 13px 13px 7px; }
    .payment-list-table tbody tr.payment-empty-row { display:block; width:100%; border:1px dashed #cbd5e1; border-radius:12px; }
    .payment-list-table tbody tr.payment-empty-row > td { display:block; width:100%; border:0; }
}

.dense-table-scroll-hint { display:none; }
.dense-table-region { overflow-x:visible; }
.dense-table-region:focus-visible { outline:2px solid var(--crm-primary); outline-offset:-2px; }
@media (max-width: 767.98px) {
    .dense-table-region { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .dense-table-scroll-hint { display:block; padding:8px 12px; color:var(--crm-text-secondary); background:#f8fafc; border-bottom:1px solid var(--crm-border); font-size:12px; line-height:1.4; }
}