/*
 * 全系统紧凑视觉层（仅 CSS）
 * 目标：统一信息层级、减少无效留白、提高表格与表单密度、改善移动端排版。
 * 不隐藏业务字段、不改变元素 display 状态、不覆盖交互状态和数据逻辑。
 */
:root {
  --ui-brand: #365fc7;
  --ui-brand-dark: #24499f;
  --ui-ink: #263449;
  --ui-muted: #718096;
  --ui-line: #e5eaf1;
  --ui-soft: #f6f8fb;
  --ui-page: #f3f6fa;
  --ui-radius: 12px;
  --ui-shadow: 0 2px 9px rgba(20, 38, 70, .045);
}

html { scroll-behavior: smooth; }
body {
  color: var(--ui-ink);
  background: var(--ui-page);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  line-height: 1.48;
  letter-spacing: 0;
}

/* 主框架：收窄侧栏和页面边距，释放有效工作区 */
:root { --sidebar-width: 244px; --page-max-width: 1720px; }
.sidebar {
  width: var(--sidebar-width);
  background: linear-gradient(180deg, #17243a 0%, #111d31 100%);
  box-shadow: 3px 0 16px rgba(15, 23, 42, .10);
}
.sidebar-brand {
  min-height: 62px;
  padding: 14px 17px;
  gap: 10px;
  font-size: 1.02rem;
  letter-spacing: 0;
}
.sidebar-brand i { font-size: 1.45rem; }
.sidebar-nav { padding: 10px 9px; }
.sidebar-nav a {
  min-height: 37px;
  padding: 8px 11px;
  margin-bottom: 2px;
  gap: 10px;
  border-radius: 8px;
  font-size: .82rem !important;
  line-height: 1.3;
}
.sidebar-nav a i { width: 20px; font-size: 1rem; }
.sidebar-group { margin: 1px 0; }
.sidebar-group .sidebar-nav-section {
  padding: 8px 10px 5px;
  font-size: .78rem !important;
  line-height: 1.3;
}
.sidebar-subnav { padding-bottom: 3px; }
.sidebar-subnav a {
  min-height: 33px;
  padding: 7px 9px 7px 31px !important;
  font-size: .78rem !important;
}
.sidebar-user { padding: 10px 13px; gap: 9px; font-size: .78rem; }
.sidebar-user .avatar { width: 32px; height: 32px; font-size: .8rem; }
.main-content { padding: 18px 22px; }
#pageContainer { width: min(100%, var(--page-max-width)); }

/* 页面标题和操作区：标题更清晰，按钮紧凑且允许换行 */
.page-header {
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 14px;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--ui-line);
}
.page-header h4 {
  margin: 0;
  color: #1f2e43;
  font-size: 1.22rem;
  line-height: 1.35;
  font-weight: 750;
  letter-spacing: -.015em;
}
.page-subtitle { margin-top: 3px; color: var(--ui-muted); font-size: .76rem; line-height: 1.5; }
.eyebrow { margin-bottom: 3px; color: #8290a4; font-size: .66rem; font-weight: 750; letter-spacing: .045em; }
.page-actions, .page-header .d-flex { gap: 7px; flex-wrap: wrap; }

/* 卡片和区块：统一圆角、边框、阴影及内部间距 */
.app-card, .card.app-card, .card, .setting-card, .role-card,
.mapping-section-card, .mapping-preview-card, .mapping-platform-sidebar-card,
.image-manager-card, .table-shelf-group {
  border-color: var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow) !important;
}
.app-card { margin-bottom: 12px; }
.card { --bs-card-border-radius: var(--ui-radius); }
.card-header, .card-footer {
  padding: 10px 13px;
  background: #fafbfd;
  border-color: var(--ui-line);
}
.card-body { padding: 13px 14px; }
.app-card > .card-body { padding: 13px 14px; }
.settings-section-title { margin-bottom: 10px; }
.empty-state { padding: 28px 14px; color: var(--ui-muted); }

/* 按钮：统一高度和视觉，不改变 disabled/loading 状态 */
.btn {
  min-height: 35px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: .78rem;
  line-height: 1.25;
  font-weight: 600;
  box-shadow: none;
}
.btn-sm { min-height: 29px; padding: 5px 8px; border-radius: 7px; font-size: .71rem; }
.btn-lg { min-height: 40px; padding: 9px 15px; font-size: .86rem; }
.btn i { vertical-align: -1px; }
.btn-group > .btn { min-height: 34px; }

/* 表单：标签、输入框、筛选器保持一致；不修改字段宽度和校验 */
.form-label { margin-bottom: 4px; color: #526176; font-size: .75rem; font-weight: 650; }
.form-control, .form-select {
  min-height: 36px;
  padding: 7px 10px;
  border-color: #dce3ec;
  border-radius: 8px;
  color: #29384d;
  font-size: .8rem;
  line-height: 1.35;
}
.form-control:focus, .form-select:focus {
  border-color: #8aa7eb;
  box-shadow: 0 0 0 3px rgba(54, 95, 199, .10);
}
.form-control::placeholder { color: #a0aaba; }
.form-text, .form-help, .setting-desc, .setting-help { color: #8793a5; font-size: .7rem; line-height: 1.5; }
.input-group-text { padding: 6px 9px; border-color: #dce3ec; background: #f7f9fc; color: #64748b; font-size: .78rem; }
.form-check { min-height: 1.2rem; }
.form-check-label { font-size: .77rem; }

/* 数据表：缩短行高但保留可读性、原生表格、排序和拖拽能力 */
.table-responsive {
  border-color: var(--ui-line);
  border-radius: 10px;
  box-shadow: none;
}
.table { color: #344256; font-size: .76rem; }
.table thead th {
  padding: 9px 10px;
  background: #f5f7fa;
  color: #536176;
  border-bottom-color: #e4e9f0;
  font-size: .7rem;
  font-weight: 750;
  line-height: 1.35;
}
.table tbody td {
  padding: 8px 10px;
  border-color: #edf0f4;
  font-size: .75rem;
  line-height: 1.4;
  vertical-align: middle;
}
.table tbody tr:hover > * { background-color: #f8faff; }
.table .btn { min-height: 28px; padding: 4px 7px; font-size: .69rem; }
.table small, .table .small { font-size: .67rem; }
.table .badge { font-size: .66rem; }
.pagination { gap: 3px; margin-bottom: 0; }
.pagination .page-link { min-width: 30px; padding: 5px 8px; border-radius: 7px; font-size: .73rem; }

/* 指标卡片：减少高度，统一数字和说明层级 */
.stat-card { min-height: 82px; padding: 13px 14px; gap: 11px; border-radius: 12px; }
.stat-card .icon { width: 40px; height: 40px; border-radius: 10px; font-size: 1.25rem; }
.stat-card .value { font-size: 1.42rem; line-height: 1.15; }
.stat-card .label { font-size: .73rem; }
.status-summary-card { padding: 9px 11px; border-radius: 9px; }

/* 模态框和提示：缩小空白，不改变显示/隐藏或交互 */
.modal-content { border: 1px solid var(--ui-line); border-radius: 13px; box-shadow: 0 18px 55px rgba(15, 23, 42, .18); }
.modal-header, .modal-footer { padding: 11px 14px; border-color: var(--ui-line); }
.modal-header .modal-title { font-size: .98rem; font-weight: 750; }
.modal-body { padding: 14px; }
.modal-footer { gap: 7px; }
.alert { padding: 10px 12px; border-radius: 9px; font-size: .78rem; }
.badge { font-weight: 650; }

/* 业务模块常见网格和工具栏：只调整间距，不重排业务字段 */
.toolbar, .filter-toolbar, .list-toolbar, .table-toolbar { gap: 8px; }
.filter-card, .search-panel, .filter-panel { padding: 12px 13px; border-radius: 11px; }
.product-image-gallery { gap: 9px; }
.product-image-gallery figure { padding: 7px; border-radius: 9px; }
.role-grid { gap: 10px; }
.role-card { padding: 13px; }
.role-card-icon { width: 36px; height: 36px; margin-bottom: 9px; }
.role-card p { min-height: 0; margin: 6px 0 9px; }

/* 货架仍保留卡片触控尺寸，只微调空隙 */
.shelf-section { margin-bottom: 14px; border-radius: 12px; }
.shelf-header { padding: 11px 15px; font-size: .88rem; }
.shelf-body { padding: 12px; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.shelf-card { min-height: 94px; padding: 10px 8px; border-radius: 10px; }

/* 固定操作栏、抽屉和浮层维持原定位，只统一外观 */
.global-dialog { border-radius: 13px; }
.global-dialog-actions { gap: 7px; }
.global-toast-container { max-width: min(420px, calc(100vw - 24px)); }

@media (max-width: 1100px) {
  .main-content { padding: 15px 16px; }
  #pageContainer { width: 100%; }
  .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .main-content { padding: 11px 10px 82px !important; }
  .page-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 11px;
    padding-bottom: 9px;
  }
  .page-header h4 { font-size: 1.08rem; }
  .page-subtitle { font-size: .72rem; }
  .page-header .d-flex, .page-actions { width: 100%; max-width: 100%; }
  .page-header .btn { width: auto; flex: 0 0 auto; }
  .page-actions { display: flex; flex-wrap: wrap; }
  .app-card { margin-bottom: 9px; }
  .card-body, .app-card > .card-body { padding: 11px; }
  .table-responsive { border-radius: 8px; }
  .table thead th { padding: 8px; }
  .table tbody td { padding: 7px 8px; }
  .modal-dialog { margin: 10px; }
  .modal-body { padding: 11px; }
  .role-grid { grid-template-columns: 1fr; }
  .shelf-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 9px; }
  .shelf-card { min-height: 88px; }
  .stat-card { min-height: 72px; padding: 10px; }
  .mobile-bottom-nav { border-radius: 13px; }
}
@media (max-width: 480px) {
  body { font-size: 12.5px; }
  .main-content { padding-left: 8px !important; padding-right: 8px !important; }
  .page-header .btn { min-height: 32px; padding: 6px 8px; font-size: .72rem; }
  .btn { min-height: 34px; }
  .stat-card .value { font-size: 1.22rem; }
  .shelf-card { min-height: 82px; }
}

/* 尊重系统减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* 商品图片入口统一：采购价、定价及货盘报表 */
.purchase-image-actions,.pricing-image-actions,.cargo-image-actions{display:inline-flex;align-items:center;gap:5px;position:relative}
.purchase-add-image,.pricing-image-actions>.btn,.cargo-image-actions>.btn{font-size:18px;font-weight:700;line-height:1;min-width:22px;color:#4f46e5;text-decoration:none}
.purchase-image-btn.is-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:54px;min-height:54px;color:#64748b;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:9px}
.purchase-image-btn img{width:52px;height:52px;object-fit:contain}
.product-image-gallery-card{width:min(760px,94vw);max-height:88vh;overflow:auto;background:#fff;border-radius:22px;padding:22px;box-shadow:0 24px 80px #0f172a33}
.product-image-gallery-card>header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.product-image-gallery-card>header strong{display:block;font-size:20px}
.product-image-gallery-card>header small{display:block;color:#64748b;margin-top:4px}
.product-image-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:12px}
.product-image-gallery-item{border:1px solid #e2e8f0;background:#fff;border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;min-width:0}
.product-image-gallery-item img{width:100%;height:130px;object-fit:contain}
.product-image-gallery-item span{font-size:12px;color:#475569}
@media(max-width:600px){.product-image-gallery-card{padding:14px}.product-image-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-image-gallery-item img{height:110px}}

/* 全站商品图片统一：以商品列表 .table-product-image-btn 为唯一视觉标准 */
.table-product-image-btn{
 display:inline-flex!important;position:relative!important;align-items:center!important;justify-content:center!important;
 width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important;
 padding:3px!important;border:1px solid #dfe5ee!important;border-radius:10px!important;
 background:#fff!important;overflow:hidden!important;cursor:pointer!important;vertical-align:middle!important;
}
.table-product-image-btn img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;background:#fff!important}
.table-product-image-btn.is-empty{flex-direction:column!important;gap:2px!important;border:1px dashed #cbd5e1!important;background:#f8fafc!important;color:#94a3b8!important}
.table-product-image-btn.is-empty i{font-size:21px!important;line-height:1!important}
.table-product-image-btn.is-empty small{font-size:10px!important;line-height:1.2!important}
.table-product-image-btn>span:not(.image-load-placeholder){position:absolute!important;right:2px!important;bottom:2px!important;padding:1px 5px!important;border-radius:8px!important;background:#4f46e5!important;color:#fff!important;font-size:10px!important}
.table-product-image-btn.image-load-failed{color:#94a3b8!important;font-size:11px!important}

/* 三级菜单层级视觉规范 */
#sidebarNav .menu-depth-2>.sidebar-subnav{padding-left:12px}
#sidebarNav .menu-depth-3>.sidebar-subnav{padding-left:14px}
#sidebarNav .menu-depth-2>.sidebar-group-toggle{font-size:13px}
#sidebarNav .menu-depth-3>.sidebar-group-toggle{font-size:12px;opacity:.94}
#sidebarNav .menu-depth-3>a{padding-left:18px;font-size:12px}
#moduleSettingsList .module-setting-row{display:grid;grid-template-columns:auto auto minmax(120px,1fr) minmax(160px,1.2fr) minmax(150px,1fr) minmax(180px,1.2fr);gap:8px;align-items:center;padding:10px;border-bottom:1px solid var(--bs-border-color,#e5e7eb)}
#moduleSettingsList .module-depth-2{padding-left:22px}
#moduleSettingsList .module-depth-3{padding-left:44px}
@media(max-width:800px){#moduleSettingsList .module-setting-row{grid-template-columns:auto auto 1fr;}.module-name-preview{grid-column:1/-1}}