/* ===== 全局 ===== */
:root {
    --brand-1: #1e3c72;
    --brand-2: #2a5298;
    --brand-deep: #16294d;
    --content-bg: #f0f2f5;
}
html, body { height: 100%; }
body { min-height: 100vh; background: var(--content-bg); }

/* ===== 整体布局：左侧侧边栏 + 主区 ===== */
.app-shell { display: flex; min-height: 100vh; }

/* 侧边栏（深蓝） */
.sidebar {
    width: 224px; min-width: 224px;
    background: linear-gradient(180deg, #1e3c72 0%, #1a3563 55%, #16294d 100%);
    color: #fff;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    z-index: 1030;
}
.sidebar-head { padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar-head .brand-name { font-size: 1.14rem; font-weight: 700; letter-spacing: .5px; color: #fff; }
.sidebar-head .brand-slogan { font-size: .72rem; color: rgba(255,255,255,.72); margin-top: 5px; line-height: 1.5; }
.sidebar-menu { list-style: none; margin: 0; padding: 14px 10px; flex: 1; }
.sidebar-menu li { margin-bottom: 3px; }
.sidebar-menu a {
    display: flex; align-items: center; gap: 10px;
    color: rgba(255,255,255,.85); padding: 11px 14px; border-radius: 8px;
    font-size: .92rem; text-decoration: none; transition: background .15s, color .15s;
}
.sidebar-menu a .mi { width: 20px; text-align: center; font-size: 1rem; }
.sidebar-menu a:hover { background: rgba(255,255,255,.10); color: #fff; }
.sidebar-menu a.active { background: rgba(255,255,255,.16); color: #fff; font-weight: 600;
    box-shadow: inset 3px 0 0 #ffc107; }
.sidebar-foot { padding: 14px 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; }
.sidebar-foot .user-box { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.sidebar-foot .user-avatar { width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem; }
.sidebar-foot .user-name { font-weight: 600; color: #fff; line-height: 1.2; }
.sidebar-foot .user-role { font-size: .72rem; color: rgba(255,255,255,.65); }
.sidebar-foot .foot-links { display: flex; gap: 14px; }
.sidebar-foot .foot-links a { color: rgba(255,255,255,.75); text-decoration: none; font-size: .82rem; }
.sidebar-foot .foot-links a:hover { color: #fff; }

/* 主区 */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
    display: flex; align-items: center; gap: 14px;
    background: #fff; padding: 10px 22px; border-bottom: 1px solid #e5e8ee;
    position: sticky; top: 0; z-index: 1020;
}
.topbar .topbar-date { color: #6b7280; font-size: .85rem; white-space: nowrap; }
.topbar .topbar-user { margin-left: auto; font-weight: 600; color: #334155; font-size: .9rem; }
.topbar .btn-theme { border: 1px solid #d5dbe4; background: transparent; border-radius: 6px;
    width: 34px; height: 34px; line-height: 1; cursor: pointer; }
.topbar .btn-theme:hover { background: #f1f4f8; }
.topbar .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #d5dbe4; background: transparent;
    border-radius: 6px; width: 34px; height: 34px; cursor: pointer; font-size: 1rem; }
.topbar .sidebar-toggle:hover { background: #f1f4f8; }

.main-content { padding: 20px 22px; }
.page-title { font-size: 1.28rem; font-weight: 700; color: #1f2937; margin-bottom: 16px; }

/* 侧边栏移动端遮罩 */
.sidebar-backdrop { display: none; }

/* ===== 按钮主色（商务蓝） ===== */
.btn-primary { background: #1e6bb8; border-color: #1e6bb8; }
.btn-primary:hover, .btn-primary:focus { background: #1a5da0; border-color: #1a5da0; }
.btn-success { background: #1f9d6c; border-color: #1f9d6c; }
.btn-success:hover, .btn-success:focus { background: #1a8a5f; border-color: #1a8a5f; }

/* ===== 认证页（登录/初始化） ===== */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh;
    background: linear-gradient(160deg, #f7f9fc 0%, #e9eef5 100%); }
.auth-wrap { width: 100%; max-width: 400px; padding: 20px; }
.auth-brand { text-align: center; margin-bottom: 22px; }
.auth-brand .brand-name { font-size: 1.5rem; font-weight: 800; color: var(--brand-1); letter-spacing: 1px; }
.auth-brand .brand-sub { font-size: .82rem; color: #8a93a6; margin-top: 6px; letter-spacing: .5px; }
.auth-card { background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(22,41,77,.10);
    padding: 30px 30px 26px; border: 1px solid #eef1f6; }
.auth-card .form-label { font-size: .86rem; color: #475569; }
.auth-slogan { text-align: center; margin-top: 16px; color: #8a93a6; font-size: .8rem; }
.auth-footer { text-align: center; color: #98a2b3; font-size: .82rem; margin-top: 18px; letter-spacing: .5px; }
[data-bs-theme="dark"] .auth-footer { color: #5c6779; }
.captcha-img { height: 40px; width: 120px; border-radius: 0 6px 6px 0; cursor: pointer;
    border: 1px solid #dfe4ec; border-left: 0; }

/* 暗黑模式 - 认证页 */
[data-bs-theme="dark"] .auth-body { background: linear-gradient(160deg, #141824 0%, #0f1420 100%); }
[data-bs-theme="dark"] .auth-card { background: #1a202c; border-color: #2a323d; }
[data-bs-theme="dark"] .auth-brand .brand-name { color: #cfe0ff; }

/* ===== Slogan ===== */
.slogan-text { font-style: italic; letter-spacing: .5px; }
.slogan-inline { font-size: .8rem; }

/* ===== 统计卡片（参考旧系统概览） ===== */
.stat-card { border-radius: 10px; border: none; box-shadow: 0 2px 12px rgba(30,60,114,.08); }
.stat-card .stat-label { color: #7b8794; font-size: .85rem; }
.stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--brand-2); line-height: 1.2; }

/* ===== 卡片（内容区通用） ===== */
.card { border-radius: 10px; border: 1px solid #e7ebf1; }
.card-header { border-bottom: 1px solid #eef1f6; }
.card-header .fw-bold { color: #1f2937; }

/* 缩略图 */
.thumb-img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #e5e9f0; }
.thumb-lg { max-width: 140px; max-height: 140px; border-radius: 8px; border: 1px solid #e5e9f0; object-fit: cover; }

/* 移动端卡片 */
.mobile-card { border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.mobile-card .btn { font-size: .75rem; }

/* 二维码 */
.qr-box { display: inline-block; padding: 10px; background: #fff; border-radius: 8px; }
.qr-box img, .qr-box canvas { width: 200px !important; height: 200px !important; }

/* 列表表格 */
.table > :not(caption) > * > * { padding: .5rem .6rem; }
.table td, .table th { white-space: normal; word-break: break-word; }

/* 表单弹窗滚动 */
.modal-dialog-scrollable .modal-body { max-height: 70vh; }

/* 勾选列表 */
.checklist .form-check { margin-right: 1rem; margin-bottom: .25rem; }
.checklist { max-height: 180px; overflow-y: auto; }

/* ===== 暗黑模式细节 ===== */
[data-bs-theme="dark"] .topbar { background: #1c222b; border-color: #2a323d; }
[data-bs-theme="dark"] .topbar .topbar-date { color: #9aa4b2; }
[data-bs-theme="dark"] .topbar .topbar-user { color: #d7dde6; }
[data-bs-theme="dark"] .topbar .btn-theme { border-color: #3a4552; color: #d7dde6; }
[data-bs-theme="dark"] .topbar .btn-theme:hover { background: #262e3a; }
[data-bs-theme="dark"] .sidebar { background: linear-gradient(180deg, #101c33 0%, #0d1728 100%); }
[data-bs-theme="dark"] .main-content { background: #14181f; }
[data-bs-theme="dark"] .page-title { color: #e5eaf2; }
[data-bs-theme="dark"] .card { background: #1a202c; border-color: #2a323d; }
[data-bs-theme="dark"] .card-header { border-bottom-color: #2a323d; }
[data-bs-theme="dark"] .card-header .fw-bold { color: #e5eaf2; }
[data-bs-theme="dark"] .stat-card { background: #1a202c; }
[data-bs-theme="dark"] .stat-card .stat-label { color: #9aa4b2; }
[data-bs-theme="dark"] .mobile-card { background: #1a202c; }
[data-bs-theme="dark"] .thumb-img, [data-bs-theme="dark"] .thumb-lg { border-color: #2a323d; }

/* ===== 移动端适配 ===== */
@media (max-width: 991.98px) {
    .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%);
        transition: transform .25s ease; box-shadow: 4px 0 20px rgba(0,0,0,.2); }
    .app-shell.sidebar-open .sidebar { transform: translateX(0); }
    /* 移动端：顶栏菜单按钮始终显示（PC 折叠 / 移动端抽屉共用） */
    .sidebar-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1029; }
    .app-shell.sidebar-open .sidebar-backdrop { display: block; }
    .main-content { padding: 14px; }
    .topbar { padding: 10px 14px; }
    .topbar .topbar-date { display: none; }
}

/* 表格空态占位保留 */

/* ===== 数据概览：统计面板与柱形图（纯 CSS，无外部依赖） ===== */
.stat-panel .stat-value-sm { font-size: 1.5rem; }
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-label { width: 42px; flex-shrink: 0; font-size: .82rem; color: #6b7280; text-align: right; }
.bar-track { flex: 1; height: 18px; background: #eef1f6; border-radius: 9px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 9px; transition: width .4s ease; min-width: 4px; }
.bar-val { width: 40px; flex-shrink: 0; font-weight: 700; font-size: .9rem; color: #334155; }
[data-bs-theme="dark"] .bar-track { background: #2a323d; }
[data-bs-theme="dark"] .bar-label { color: #9aa4b2; }
[data-bs-theme="dark"] .bar-val { color: #d7dde6; }

/* ===== 移动端列表表格（默认仅核心字段，其余展开） ===== */
.mobile-table { font-size: .82rem; }
.mobile-table th { white-space: nowrap; font-size: .78rem; color: #7b8794; }
.mobile-table td { vertical-align: middle; }
.mobile-actions .btn { font-size: .72rem; padding: .15rem .4rem; }
.mobile-detail-row td { background: #f8fafc; border-top: 0; }
[data-bs-theme="dark"] .mobile-detail-row td { background: #14181f; }

/* ===== 客户自助查询页表格 ===== */
.track-table td, .track-table th { white-space: nowrap; }

/* ==================== 侧边栏折叠（PC 收窄为图标栏） ==================== */
@media (min-width: 992px) {
    .app-shell.sidebar-collapsed .sidebar,
    html.sidebar-collapsed .app-shell .sidebar { width: 66px; min-width: 66px; }
    .app-shell.sidebar-collapsed .sidebar-head,
    html.sidebar-collapsed .app-shell .sidebar-head { padding: 16px 6px; text-align: center; }
    .app-shell.sidebar-collapsed .brand-name,
    .app-shell.sidebar-collapsed .brand-slogan,
    .app-shell.sidebar-collapsed .mi-text,
    .app-shell.sidebar-collapsed .user-name,
    .app-shell.sidebar-collapsed .user-role,
    .app-shell.sidebar-collapsed .foot-links,
    html.sidebar-collapsed .app-shell .brand-name,
    html.sidebar-collapsed .app-shell .brand-slogan,
    html.sidebar-collapsed .app-shell .mi-text,
    html.sidebar-collapsed .app-shell .user-name,
    html.sidebar-collapsed .app-shell .user-role,
    html.sidebar-collapsed .app-shell .foot-links { display: none; }
    .app-shell.sidebar-collapsed .sidebar-menu,
    html.sidebar-collapsed .app-shell .sidebar-menu { padding: 14px 8px; }
    .app-shell.sidebar-collapsed .sidebar-menu a,
    html.sidebar-collapsed .app-shell .sidebar-menu a { justify-content: center; padding: 11px 0; gap: 0; }
    .app-shell.sidebar-collapsed .sidebar-menu a .mi,
    html.sidebar-collapsed .app-shell .sidebar-menu a .mi { width: auto; }
    .app-shell.sidebar-collapsed .sidebar-foot,
    html.sidebar-collapsed .app-shell .sidebar-foot { padding: 12px 6px; text-align: center; }
    .app-shell.sidebar-collapsed .user-box,
    html.sidebar-collapsed .app-shell .user-box { justify-content: center; margin-bottom: 6px; }
}

/* ==================== 只读输入框灰色区分 ==================== */
.form-control[readonly] { background-color: #e9ecef !important; color: #6c757d !important; cursor: not-allowed; }
[data-bs-theme="dark"] .form-control[readonly] { background-color: #2a313d !important; color: #98a2b3 !important; }

/* ==================== 详情弹窗字段 ==================== */
.detail-item { background: #f2f5f9; border-radius: 8px; padding: 8px 12px; }
.detail-item .text-muted { margin-bottom: 2px; }
.detail-item .thumb-lg { max-height: 120px; border-radius: 6px; }
[data-bs-theme="dark"] .detail-item { background: #222a36; }

/* ==================== 图片大图弹窗 ==================== */
#imgModal .modal-content { background: transparent; box-shadow: none; }
#imgModal .modal-body { padding: 8px; }

/* ==================== 返修列表：按状态区分行背景色 ==================== */
.table > tbody > tr.row-status-in > td,
.mobile-table > tbody > tr.row-status-in > td { background-color: rgba(255, 193, 7, 0.09); }
.table > tbody > tr.row-status-returned > td,
.mobile-table > tbody > tr.row-status-returned > td { background-color: rgba(40, 167, 69, 0.08); }
[data-bs-theme="dark"] .table > tbody > tr.row-status-in > td,
[data-bs-theme="dark"] .mobile-table > tbody > tr.row-status-in > td { background-color: rgba(255, 193, 7, 0.10); }
[data-bs-theme="dark"] .table > tbody > tr.row-status-returned > td,
[data-bs-theme="dark"] .mobile-table > tbody > tr.row-status-returned > td { background-color: rgba(40, 167, 69, 0.10); }

/* ==================== 搜索栏：flex 紧凑布局（移动端按钮不再单独占行） ==================== */
.search-bar .search-input { flex: 1 1 170px; min-width: 150px; }
.search-bar .search-select { flex: 0 1 150px; min-width: 125px; width: auto; }
.search-bar .search-date { flex: 0 1 150px; min-width: 140px; }
.search-bar .select2-container { flex: 0 1 150px; min-width: 125px; width: auto !important; }
.search-bar .btn { white-space: nowrap; }

/* ==================== 弹窗美化（第八轮） ==================== */
.modal-content-custom { border: none; border-radius: 14px; box-shadow: 0 18px 50px rgba(15, 35, 70, 0.28); overflow: hidden; }
.modal-header-custom {
    background: linear-gradient(135deg, #1f3a76 0%, #2a5298 55%, #3560b0 100%);
    color: #fff;
    border-bottom: none;
    padding: 16px 20px;
}
.modal-header-custom .modal-title { font-weight: 600; letter-spacing: 0.3px; }
.modal-header-custom .btn-close { filter: invert(1); opacity: 0.85; }
#formModal .modal-body, #detailModal .modal-body { background: #f7f9fc; padding: 16px 18px; }
[data-bs-theme="dark"] #formModal .modal-body,
[data-bs-theme="dark"] #detailModal .modal-body { background: #1b222d; }
#formModal .modal-body .mb-3 {
    background: #fff; border: 1px solid #e6eaf1; border-radius: 10px; padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(20, 40, 80, 0.04);
}
[data-bs-theme="dark"] #formModal .modal-body .mb-3 { background: #232b38; border-color: #303a4a; }
#formModal .modal-body .mb-3 .form-label { font-weight: 600; color: #2a5298; }
[data-bs-theme="dark"] #formModal .modal-body .mb-3 .form-label { color: #8fb0ef; }
#formModal .modal-body .mb-3 .checklist { background: #f7f9fc; }
[data-bs-theme="dark"] #formModal .modal-body .mb-3 .checklist { background: #1b222d; }
/* 详情弹窗字段卡片 */
#detailModal .detail-item { background: #fff; border: 1px solid #e6eaf1; box-shadow: 0 1px 3px rgba(20, 40, 80, 0.04); }
[data-bs-theme="dark"] #detailModal .detail-item { background: #232b38; border-color: #303a4a; }
#detailModal .detail-item .text-muted { color: #7b8798 !important; }
/* 确认弹窗美化 */
.confirm-body { padding: 26px 20px 6px; }
.confirm-icon { line-height: 1; }
.modal-footer { border-top: 1px solid #e9edf3; }
[data-bs-theme="dark"] .modal-footer { border-top-color: #303a4a; }

/* ==================== 移动端滞留列表：操作列固定可见（第八轮） ==================== */
#retentionMobile .table { table-layout: fixed; font-size: 13px; }
#retentionMobile .table th:nth-child(1), #retentionMobile .table td:nth-child(1),
#retentionMobile .table th:nth-child(2), #retentionMobile .table td:nth-child(2),
#retentionMobile .table th:nth-child(3), #retentionMobile .table td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#retentionMobile .table th:nth-child(1), #retentionMobile .table td:nth-child(1) { width: 27%; }
#retentionMobile .table th:nth-child(2), #retentionMobile .table td:nth-child(2) { width: 29%; }
#retentionMobile .table th:nth-child(3), #retentionMobile .table td:nth-child(3) { width: 25%; }
#retentionMobile .table th:nth-child(4), #retentionMobile .table td:nth-child(4) { width: 19%; text-align: right; white-space: nowrap; overflow: visible; }
#retentionMobile .table td:nth-child(4) .btn { padding: 2px 8px; font-size: 12px; }

/* ==================== 移动端返修列表：6列紧凑布局（第九轮） ==================== */
/* 移动端返修列表：不固定列宽、不省略，所有内容完整显示（文字大小与其它移动端页面一致） */
#repairMobile .table { width: 100%; }
#repairMobile .table th, #repairMobile .table td { overflow: visible; white-space: normal; word-break: break-word; }
#repairMobile .table th:nth-child(7), #repairMobile .table td:nth-child(7) { width: 15%; text-align: right; white-space: nowrap; overflow: visible; }
#repairMobile .table td:nth-child(7) .btn { padding: 2px 8px; font-size: 12px; }

/* ===== select2 移动端搜索框修复：允许光标输入 ===== */
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    -webkit-user-select: text !important;
    user-select: text !important;
    cursor: text !important;
    -webkit-appearance: none;
    appearance: none;
}

/* ===== 客户手动输入 + 实时匹配建议（autocomplete） ===== */
.autocomplete-wrap { position: relative; }
.autocomplete-dropdown {
    position: absolute; z-index: 1080; left: 0; right: 0; top: 100%;
    max-height: 220px; overflow-y: auto; display: none;
    background: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.12); margin-top: 2px; padding: 4px 0;
}
[data-bs-theme="dark"] .autocomplete-dropdown { background: #212529; border-color: #495057; }
.autocomplete-item {
    padding: .45rem .75rem; cursor: pointer; font-size: .875rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.autocomplete-item:hover, .autocomplete-item.active { background: #e9ecef; }
[data-bs-theme="dark"] .autocomplete-item:hover, [data-bs-theme="dark"] .autocomplete-item.active { background: #343a40; }


/* ===== 数据概览：HUD 科技感板块（发光大数字 + 环形进度环 + 发光柱） ===== */
.hud-card {
  position: relative; overflow: hidden; border-radius: 1rem;
  background: linear-gradient(150deg, #0d1b33 0%, #122a52 55%, #0a1630 100%);
  border: 1px solid rgba(90, 140, 220, .45);
  box-shadow: 0 6px 22px rgba(10, 30, 70, .35), inset 0 0 40px rgba(30, 80, 160, .10);
  padding: 14px 16px;
}
[data-bs-theme="light"] .hud-card {
  background: linear-gradient(150deg, #eef4fc 0%, #dfeafe 55%, #e8f0fb 100%);
  border-color: rgba(40, 100, 200, .40);
  box-shadow: 0 6px 18px rgba(30, 70, 140, .18), inset 0 0 30px rgba(80, 150, 240, .08);
}
.hud-card .hud-grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(90,160,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,160,255,.08) 1px, transparent 1px);
  background-size: 22px 22px;
}
[data-bs-theme="light"] .hud-card .hud-grid-bg {
  background-image:
    linear-gradient(rgba(30,100,220,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,100,220,.06) 1px, transparent 1px);
}
.hud-card .hud-scan {
  position: absolute; left: 0; right: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(120,200,255,.55), transparent);
  animation: hudScan 5s linear infinite;
}
[data-bs-theme="light"] .hud-card .hud-scan {
  background: linear-gradient(90deg, transparent, rgba(40,120,240,.35), transparent);
}
@keyframes hudScan { 0% { top: -4%; } 100% { top: 104%; } }
.hud-corner { position: absolute; width: 16px; height: 16px; border: 2px solid rgba(120,190,255,.7); pointer-events: none; }
.hud-corner.c1 { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.hud-corner.c2 { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.hud-corner.c3 { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
.hud-corner.c4 { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
[data-bs-theme="light"] .hud-corner { border-color: rgba(50,120,230,.55); }
.hud-card .hud-head {
  position: relative; display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(120,190,255,.18);
}
[data-bs-theme="light"] .hud-card .hud-head { border-bottom-color: rgba(40,110,220,.20); }
.hud-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #37e0a6;
  box-shadow: 0 0 8px #37e0a6; animation: hudBlink 1.8s ease-in-out infinite;
}
[data-bs-theme="light"] .hud-dot { background: #1f9d6c; box-shadow: 0 0 6px #1f9d6c; }
@keyframes hudBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.hud-title { font-weight: 700; letter-spacing: 1px; color: #dbe9ff; }
[data-bs-theme="light"] .hud-title { color: #12376e; }
.hud-badge {
  margin-left: auto; font-size: .68rem; letter-spacing: 2px; color: #8fc3ff;
  border: 1px solid rgba(120,190,255,.35); border-radius: 4px; padding: 2px 6px;
}
[data-bs-theme="light"] .hud-badge { color: #2a6fd8; border-color: rgba(40,110,220,.35); }
.hud-label { font-size: .8rem; color: #8fb6e8; letter-spacing: .5px; }
[data-bs-theme="light"] .hud-label { color: #5b7ba8; }
.hud-value {
  font-size: 1.9rem; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums;
}
.hud-blue { color: #5fc3ff; text-shadow: 0 0 14px rgba(80,180,255,.75); }
.hud-green { color: #3ce6a4; text-shadow: 0 0 14px rgba(60,230,164,.75); }
.hud-gold { color: #ffd35e; text-shadow: 0 0 14px rgba(255,200,80,.75); }
[data-bs-theme="light"] .hud-blue { color: #1264c4; text-shadow: 0 0 8px rgba(30,120,230,.30); }
[data-bs-theme="light"] .hud-green { color: #0e8a5a; text-shadow: 0 0 8px rgba(20,160,100,.30); }
[data-bs-theme="light"] .hud-gold { color: #a97b00; text-shadow: 0 0 8px rgba(220,160,30,.30); }
.hud-flex { display: flex; align-items: center; gap: 16px; }
.hud-ring { position: relative; width: 118px; height: 118px; flex-shrink: 0; }
.hud-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(120,170,240,.16); stroke-width: 9; }
[data-bs-theme="light"] .ring-track { stroke: rgba(40,110,220,.14); }
.ring-bar {
  fill: none; stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 0 326.73; transition: stroke-dasharray 1.1s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 0 5px rgba(90,180,255,.8));
}
.ring-blue { stroke: #3aa0ff; }
.ring-green { stroke: #2fe0a0; }
[data-bs-theme="light"] .ring-blue { stroke: #1264c4; }
[data-bs-theme="light"] .ring-green { stroke: #0e8a5a; }
.ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.ring-pct { font-size: 1.45rem; font-weight: 800; color: #eaf4ff; text-shadow: 0 0 12px rgba(90,180,255,.6); font-variant-numeric: tabular-nums; }
[data-bs-theme="light"] .ring-pct { color: #12376e; text-shadow: 0 0 8px rgba(40,120,230,.25); }
.ring-cap { font-size: .72rem; color: #8fb6e8; letter-spacing: 1px; }
[data-bs-theme="light"] .ring-cap { color: #5b7ba8; }
.hud-bars { flex: 1; min-width: 0; }
.hud-card .bar-label, .hud-card .bar-val { color: #a9c8ef; }
.hud-card .bar-track { background: rgba(120,170,240,.15); }
.hud-card .bar-fill.tech {
  background-image: linear-gradient(90deg, rgba(255,255,255,.28), transparent 55%);
  box-shadow: 0 0 10px rgba(90,180,255,.65);
  position: relative; overflow: hidden;
}
.hud-card .bar-fill.tech::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 34px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: barShine 2.4s linear infinite;
}
@keyframes barShine { 0% { left: -40px; } 100% { left: 105%; } }
[data-bs-theme="light"] .hud-card .bar-label, [data-bs-theme="light"] .hud-card .bar-val { color: #43618a; }
[data-bs-theme="light"] .hud-card .bar-track { background: rgba(40,110,220,.12); }
[data-bs-theme="light"] .hud-card .bar-fill.tech { box-shadow: 0 0 8px rgba(40,120,240,.45); }
@media (max-width: 480px) {
  .hud-value { font-size: 1.5rem; }
  .hud-ring { width: 96px; height: 96px; }
  .hud-flex { gap: 10px; }
}

/* ===== 客户自助查询页美化（track.php） ===== */
.track-body { background: #eef3f9; min-height: 100vh; }
.track-banner {
  background: linear-gradient(135deg, #0d1b33 0%, #123a72 60%, #0d2b57 100%);
  box-shadow: 0 4px 16px rgba(10,30,70,.25);
}
.track-brand { display: flex; align-items: center; gap: 14px; }
.track-logo {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 0 18px rgba(90,180,255,.35);
}
.track-title { font-size: 1.35rem; font-weight: 800; color: #fff; letter-spacing: 1px; text-shadow: 0 0 12px rgba(90,180,255,.5); }
.track-slogan { font-size: .85rem; color: #9fc4ef; letter-spacing: 1px; }
.track-cust-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid #dce6f2; border-left: 5px solid #1a4f9c;
  border-radius: 14px; padding: 14px 18px; margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(20,60,120,.10);
}
.track-cust-label { font-size: .75rem; color: #7b8794; letter-spacing: 1px; margin-bottom: 2px; }
.track-cust-name { font-size: 1.25rem; font-weight: 800; color: #14325e; }
.track-total-badge {
  background: linear-gradient(135deg, #1a4f9c, #2f6fd8); color: #fff;
  font-weight: 700; font-size: .95rem; border-radius: 999px; padding: 8px 18px; white-space: nowrap;
  box-shadow: 0 3px 12px rgba(30,90,200,.35);
}
.track-card { border-radius: 14px; border: 1px solid #dce6f2; box-shadow: 0 4px 14px rgba(20,60,120,.08); overflow: hidden; }
.track-table thead th {
  background: #14325e; color: #fff; font-weight: 600; font-size: .85rem; letter-spacing: .5px;
  border-bottom: 0; white-space: nowrap;
}
.track-table tbody tr:hover { background: #f2f7fe; }
.track-item-name { font-weight: 600; color: #23303b; }
.track-qty {
  display: inline-block; min-width: 34px; text-align: center;
  background: #e8f0fc; color: #1a4f9c; font-weight: 700; border-radius: 999px; padding: 2px 10px;
}
.track-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .85rem; border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.track-status .dot { width: 7px; height: 7px; border-radius: 50%; }
.track-status.incoming { background: #fff3d6; color: #a06a00; }
.track-status.incoming .dot { background: #e0a52a; box-shadow: 0 0 6px rgba(224,165,42,.7); }
.track-status.returned { background: #dcf5ea; color: #0e7a4e; }
.track-status.returned .dot { background: #1f9d6c; box-shadow: 0 0 6px rgba(31,157,108,.7); }
.track-footer { letter-spacing: .5px; }
@media (max-width: 420px) {
  .track-cust-card { flex-direction: column; align-items: flex-start; }
  .track-total-badge { align-self: flex-start; }
}

/* ===== 产品快捷输入（返修表单） ===== */
/* 下拉列表定位基准：与客户 autocomplete 的 .autocomplete-wrap 对齐 */
.product-picker { position: relative; }