/* ============================================
   货代小工具 — ④ 布局模式层 (Patterns)
   每页按任务性质选择模式，而非统一套两列卡片堆。
   ============================================ */

/* ---------- 应用外壳 ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: rgba(255, 255, 255, .88) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  /* 水平内边距交给内层容器，使 logo 与正文左缘严格对齐 */
  padding: .5rem 0;
  transition: box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

/* 头部内层与 .app-main 同宽同居中，水平内边距也与 .page-content 一致。
   否则 .app-main 有 1440px 上限而头部满宽，1920px 屏上
   logo 在 x=20 而正文在 x=264，偏差会随屏宽继续放大。 */
.app-header > .container-fluid {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* 滚动后加投影，由 common.js 的 initStickyHeader() 添加 */
.app-header.is-scrolled {
  border-bottom-color: var(--border-default);
  box-shadow: var(--shadow-sm);
}

.app-header .navbar-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -.01em;
  color: var(--gray-900) !important;
  text-decoration: none;
  padding: 0;
}

.app-header .navbar-brand:hover {
  text-decoration: none;
}

.app-header .brand-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--gray-900), var(--gray-700));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-size: var(--text-sm);
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}

/* 导航项：底部活动指示器取代蓝底色块 */
.app-header .nav-link {
  position: relative;
  color: var(--text-secondary) !important;
  font-weight: 500;
  font-size: var(--text-base);
  padding: .45rem .75rem !important;
  border-radius: var(--radius-md);
  transition: color var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}

.app-header .nav-link:hover {
  color: var(--text-primary) !important;
  background-color: var(--surface-hover);
}

.app-header .nav-link::after {
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .1rem;
  height: 2px;
  border-radius: var(--radius-full);
  background-color: var(--brand-600);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-base) var(--ease-out);
}

.app-header .nav-link.active {
  color: var(--text-primary) !important;
  background-color: transparent;
  font-weight: 600;
}

.app-header .nav-link.active::after {
  transform: scaleX(1);
}

.app-header .navbar-toggler {
  border-color: var(--border-default);
  padding: .3rem .5rem;
}

.app-header .navbar-toggler:focus {
  box-shadow: var(--shadow-focus);
}

.app-header .user-info {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.app-header .user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gray-800), var(--gray-600));
  color: var(--text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
}

.app-header .user-name {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
}

/* 内容区：修满宽贴边，加最大宽度容器 */
.app-main {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.page-content {
  padding: var(--space-6);
}

.page-content.page-content-flush {
  padding: 0;
}

/* ---------- 统一页头 ---------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-6);
}

.page-header .page-title {
  margin-bottom: 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -.02em;
  border-bottom: none;
  padding-bottom: 0;
  display: inline-block;
}

.page-subtitle {
  margin: .3rem 0 0;
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

/* 兼容旧结构：未改造页面里的 .page-title 直接出现时 */
.page-content > .page-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -.02em;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--space-6);
}

/* ---------- 首页：仪表盘 ---------- */
.dashboard-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  margin-bottom: var(--space-6);
  background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 55%, var(--gray-700) 100%);
  color: var(--text-inverse);
  border: 1px solid var(--gray-800);
}

/* 极淡网格纹理 */
.dashboard-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 100% at 70% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 70% 0%, #000 20%, transparent 75%);
  pointer-events: none;
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, .28), transparent 68%);
  pointer-events: none;
}

.dashboard-hero > * {
  position: relative;
  z-index: 1;
}

.dashboard-hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-300);
  margin-bottom: .5rem;
}

.dashboard-hero h1 {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--text-inverse);
  margin-bottom: .4rem;
}

.dashboard-hero p {
  margin: 0;
  color: var(--gray-300);
  font-size: var(--text-md);
  max-width: 52ch;
}

.dashboard-section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}

.dashboard-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--border-subtle);
}

/* 功能模块宫格
   用 flex + 居中换行而非 CSS Grid auto-fit：卡片数不是 2/3/6 的整数倍时
   （如 5 张），grid 的末行会留下一个孤零零的占位空档；flex 的
   justify-content:center 让末行自然居中，4/5/6 张都好看。 */
.dashboard-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

.dashboard-grid > .quick-entry {
  flex: 1 1 260px;
  max-width: 420px;
  /* 换成 flex 容器：flex 换行下百分比高度不可靠，
     让内部 .card 靠 align-items:stretch 撑满，而不是靠 height:100%。 */
  display: flex;
}

/* 首页模块卡 */
.quick-entry {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
  border-radius: var(--radius-lg);
}

.quick-entry:hover {
  text-decoration: none;
  color: inherit;
}

.quick-entry .card {
  text-align: left;
  padding: var(--space-5);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.quick-entry:hover .card {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
}

.quick-entry .card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.quick-entry:hover .card::after {
  transform: scaleX(1);
}

.quick-entry .entry-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: var(--space-4);
  color: var(--text-inverse);
}

.quick-entry .entry-icon .icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
}

.quick-entry .icon-primary { background: linear-gradient(135deg, var(--brand-600), var(--brand-400)); }
.quick-entry .icon-green   { background: linear-gradient(135deg, var(--success), #22d3ee); }
.quick-entry .icon-orange  { background: linear-gradient(135deg, #ea580c, #f97316); }
.quick-entry .icon-purple  { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.quick-entry .icon-teal    { background: linear-gradient(135deg, #0f766e, #2dd4bf); }

.quick-entry .entry-title {
  font-weight: 600;
  font-size: var(--text-md);
  margin-bottom: .2rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.quick-entry .entry-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.55;
}

.quick-entry .entry-arrow {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  color: var(--text-disabled);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.quick-entry:hover .entry-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--text-secondary);
}

/* 键盘导航时同样显示箭头（触屏无 hover，需保证焦点态也有方向暗示） */
.quick-entry:focus-visible .entry-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--text-secondary);
}

/* ---------- 分栏工作台（询价发送） ---------- */
.workbench {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-5);
  align-items: start;
}

.workbench-rail,
.workbench-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.workbench-rail > *,
.workbench-main > * {
  margin-bottom: 0 !important;
}

/* 主区预览面板吸顶：长表单滚动时邮件预览保持可见 */
.workbench-main .sticky-preview {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}

@media (max-width: 991.98px) {
  .workbench {
    grid-template-columns: minmax(0, 1fr);
  }
  .workbench-main .sticky-preview {
    position: static;
  }
}

/* ---------- 数据表页面（记录） ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--surface-sunken);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.filter-bar .form-label {
  margin-bottom: .3rem;
}

/* 筛选字段用 flex-basis 分配宽度，不要用 Bootstrap 的 .col-lg-*。
   .col-lg-* 是 width 百分比，三项合计 100% 再加 gap 就会超出容器宽度，
   flex-wrap 会把最后一项挤到第二行（桌面端可见的错位）。
   flex-basis 由 flex 算法在扣掉 gap 后分配，不会溢出。 */
.filter-field {
  flex: 1 1 220px;
  min-width: 0;
}

.filter-field-status {
  flex: 0 1 200px;
}

.filter-field-actions {
  flex: 0 0 116px;
}

.table-panel {
  overflow: hidden;
}

.table-panel .table-responsive {
  border-radius: 0;
}

/* 说明：此处刻意不做吸顶表头。
   .table-panel 的 overflow:hidden 与 Bootstrap .table-responsive 的
   overflow-x:auto 都会成为 th 最近的滚动容器，position:sticky 会相对
   容器而非视口定位，页面纵向滚动时不会吸顶（静默失效）。
   要真正吸顶需去掉这两个 overflow 容器，代价是圆角裁剪与窄屏横向滚动
   都要另行处理，留待浏览器实测后再定。 */

/* ---------- 表单页布局 ---------- */
.form-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 100%;
}

.form-sections-narrow {
  max-width: 880px;
  margin: 0 auto;
}

/* 吸底提交栏 */
.sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
  padding: var(--space-3) var(--space-5);
  margin: var(--space-5) calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
  background-color: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ---------- 空态 ---------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-secondary);
}

.empty-state .empty-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--surface-sunken);
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}

.empty-state .empty-icon .icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.5;
}

.empty-state .empty-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: .25rem;
}

.empty-state .empty-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 38ch;
  margin-bottom: var(--space-4);
}

/* 旧结构兼容：记录页原本的 .records-empty 就是纯文字块 */
.records-empty {
  padding: var(--space-12) var(--space-6);
  color: var(--text-tertiary);
  text-align: center;
  font-size: var(--text-base);
}

/* ---------- 骨架屏 ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--gray-200);
  border-radius: var(--radius-sm);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .65),
    transparent
  );
  animation: shimmer 1.4s ease-in-out infinite;
}

.skeleton-text {
  height: .75rem;
  margin-bottom: .5rem;
}

.skeleton-text-sm { height: .625rem; width: 60%; }

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
}

/* 表格骨架行 */
.skeleton-row td {
  padding: .85rem 1rem;
}

.skeleton-cell {
  height: .75rem;
  border-radius: var(--radius-sm);
}

.skeleton-cell-sm { width: 55%; }
.skeleton-cell-xs { width: 35%; }

@media (max-width: 1199.98px) {
  /* 折叠态（断点与 base.html 的 navbar-expand-xl 对齐：<1200px 折叠）：
     导航项改为竖排，底部的活动指示器不再适用，
     换成浅底高亮，避免出现一条横线挂在竖排菜单项下面。 */
  .app-header .navbar-collapse {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .app-header .nav-link::after {
    display: none;
  }

  .app-header .nav-link.active {
    background-color: var(--surface-hover);
  }

  .app-header .user-info {
    padding: var(--space-2) 0;
  }
}

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  .page-content {
    padding: var(--space-4);
  }
  .app-main .page-header {
    margin-bottom: var(--space-5);
  }
  .page-header .page-title,
  .page-content > .page-title {
    font-size: var(--text-xl);
  }
  .dashboard-hero {
    padding: var(--space-6) var(--space-4);
  }
  .dashboard-hero h1 {
    font-size: var(--text-2xl);
  }
  /* 窄屏头部内边距与 .page-content 对齐 */
  .app-header > .container-fluid {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .app-header .user-info .user-name {
    display: none;
  }
  .auth-card {
    max-width: 100%;
  }
  .filter-bar {
    padding: var(--space-3) var(--space-4);
  }
  /* 窄屏：筛选字段全部单列全宽，避免挤压 */
  .filter-field,
  .filter-field-status,
  .filter-field-actions {
    flex: 1 1 100%;
  }
}