/* ==========================================================================
 * VBUY AI Workbench · 视觉皮肤层「精炼蓝」
 *
 * 这是一层**纯外观覆盖**，排在所有既有样式表之后加载。思路是不换品牌，
 * 只把现在这套蓝色收敛干净：拉开背景与卡片的明度差、统一圆角/描边/阴影口径、
 * 数字改等宽、把邮箱模块那套橙青色归位到品牌蓝。
 *
 * 定位：纯外观层。不改 DOM、不改路由 id、不改表单 id、不改状态类名。
 * 载入：排在 email-workspace.css 之后（index.html 最后一个 <link>）。
 * 回退：删掉那一个 <link> 就回到原样，其它文件一行都不用动。
 *
 * 改动这里的注意事项（两个已经踩过的坑）：
 *  1. 不要动 .topbar 的 88px 高度。它被
 *   .route--orders { height: calc(100vh - 88px) } 硬编码耦合着，
 *     改高度就得同步改订单页高度，属于结构改动，不该藏在皮肤里。
 *  2. --sidebar-soft 同时被"我发出的邮件气泡"（.message--user .message__content）
 *     用着，必须是实色，不能改成半透明。
 *
 * 改完这里记得升版本号（npm run bump:pwa <新版本>）：
 * Service Worker 对 css 是缓存优先，地址不变就永远拿旧的。
 *
 * 预览：node preview/render.mjs（另见 preview/compare.html）
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 0 · 设计令牌
 * ------------------------------------------------------------------------ */
:root {
  --brand: #1a63d8;
  --brand-dark: #1450a8;
  --brand-deep: #0f3474;
  --brand-soft: #e9f1fe;
  --brand-line: #c6d9f8;
  --primary-soft: #e9f1fe;

  --ink: #0f1b2d;
  --ink-2: #344054;
  --muted: #66748a;
  --faint: #98a4b8;
  --line: #e4e9f2;
  --line-soft: #eef1f7;
  --paper: #ffffff;
  --canvas: #eef1f7;   /* 比原来的 #f3f6fb 再压深一档：白卡才浮得起来 */
  --cream: #f7f9fd;

  --teal: #0e7c86;
  --green: #0f8a5f;
  --green-soft: #e6f6ef;
  --amber: #b26a06;
  --amber-soft: #fdf3e2;
  --red: #d92d20;
  --red-soft: #fdeceb;

  --sidebar: #0c1930;
  --sidebar-top: #132644;
  --sidebar-soft: #1b3563;   /* 注意：这个变量同时被"我发出的邮件气泡"用着，必须是实色 */

  --shadow-sm: 0 1px 2px rgba(16, 32, 64, .06);
  --shadow: 0 1px 2px rgba(16, 32, 64, .05), 0 10px 22px -12px rgba(16, 32, 64, .18);
  --shadow-strong: 0 2px 6px rgba(16, 32, 64, .07), 0 22px 40px -20px rgba(16, 32, 64, .3);
  --ring: 0 0 0 3px rgba(26, 99, 216, .16);

  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
}

/* --------------------------------------------------------------------------
 * 1 · 基础：字体质感 / 滚动条 / 焦点环
 * ------------------------------------------------------------------------ */
body {
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  color: #0a3c85;
  background: #dbe8fd;
}

/* 金额、数量、单号、日期：等宽数字，表格里的列才对得齐 */
.order-table,
.admin-table,
.order-detail-table,
.exchange-history__table,
.order-overview__stats,
.admin-stats,
.quote-commercial-card,
.order-panel,
.today-label,
.world-clock-popover {
  font-variant-numeric: tabular-nums;
}

/* 细滚动条：系统那条 17px 的灰槽是"廉价感"的主要来源之一 */
* {
  scrollbar-width: thin;
  scrollbar-color: #c8d2e2 transparent;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: #c8d2e2;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #aab8cf;
  background-clip: content-box;
}

:focus-visible {
  outline: 2px solid rgba(26, 99, 216, .55);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * 2 · 登录页
 * ------------------------------------------------------------------------ */
.login-brand {
  background:
    radial-gradient(880px 520px at 86% -12%, rgba(26, 99, 216, .38), transparent 62%),
    linear-gradient(160deg, #0a1730 0%, #122647 60%, #17325e 100%);
}

.login-brand::after {
  background: linear-gradient(150deg, var(--brand) 0%, #2f7ef0 100%);
  opacity: .3;
}

.login-brand__copy {
  color: rgba(255, 255, 255, .7);
}

.login-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-strong);
}

/* --------------------------------------------------------------------------
 * 3 · 应用框架：侧边栏 + 顶栏
 * ------------------------------------------------------------------------ */
.sidebar {
  padding: 22px 14px 16px;
  background: linear-gradient(180deg, var(--sidebar-top) 0%, var(--sidebar) 100%);
}

.sidebar__brand {
  min-height: 58px;
  padding: 0 6px 20px;
  border-bottom-color: rgba(255, 255, 255, .08);
}

.sidebar__brand small {
  color: rgba(255, 255, 255, .42);
  letter-spacing: .1em;
}

.navigation {
  padding-top: 18px;
}

.navigation__label {
  margin: 0 12px 8px;
  color: rgba(255, 255, 255, .28);
  font-size: 9.5px;
  letter-spacing: .2em;
}

.nav-item {
  height: 44px;
  padding: 0 12px;
  gap: 11px;
  border-radius: 10px;
  color: rgba(255, 255, 255, .62);
  font-size: 13px;
  transition: background .16s ease, color .16s ease;
}

.nav-item svg {
  width: 18px;
  opacity: .9;
}

.nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, .06);
}

.nav-item.is-active {
  color: #fff;
  background: linear-gradient(90deg, rgba(59, 121, 226, .34) 0%, rgba(59, 121, 226, .12) 100%);
  box-shadow: inset 0 0 0 1px rgba(126, 172, 255, .16);
}

.nav-item.is-active::before {
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: #5b9bff;
  box-shadow: 0 0 10px rgba(91, 155, 255, .5);
}

.sidebar__future {
  border-color: rgba(255, 255, 255, .13);
  border-radius: 11px;
  background: rgba(255, 255, 255, .026);
}

.user-menu {
  border-top-color: rgba(255, 255, 255, .08);
}

.avatar {
  border-radius: 9px;
  background: linear-gradient(150deg, #3a83f2, var(--brand));
  font-weight: 700;
}

/* 顶栏：高度保持 88px（订单页高度耦合着它），只换描边和质感 */
.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(16px) saturate(1.5);
}

.topbar h2 {
  font-size: 17px;
  letter-spacing: -.022em;
}

.topbar__kicker {
  color: var(--faint);
  font-size: 9.5px;
  letter-spacing: .19em;
}

.topbar__right {
  gap: 18px;
  color: var(--muted);
  font-size: 12px;
}

.system-status i {
  width: 7px;
  height: 7px;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(15, 138, 95, .14);
}

.today-label {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.world-clock-toggle {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.pwa-install-button {
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
 * 4 · 首页模块卡：把那个没画完的同心圆换成一条品牌色"顶轨"
 * ------------------------------------------------------------------------ */
.route--home {
  padding-bottom: 40px;
}

.home-intro h1 {
  font-size: clamp(21px, 1.9vw, 27px);
  letter-spacing: -.035em;
}

.module-grid {
  gap: 18px;
}

.module-card {
  min-height: 248px;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s ease, border-color .18s ease;
}

.module-card:hover,
.module-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--brand-line);
  box-shadow: var(--shadow-strong);
  outline: 0;
}

.module-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  color: var(--brand);
  background: var(--brand-soft);
}

.module-card h3 {
  margin-bottom: 9px;
  font-size: 19.5px;
  letter-spacing: -.026em;
}

.module-card p:not(.module-card__number) {
  max-width: 40ch;
  font-size: 12.5px;
  line-height: 1.75;
}

.module-card__number {
  margin-bottom: 6px;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
}

.module-card__action {
  gap: 12px;
  font-size: 13px;
  font-weight: 650;
  border-bottom-color: var(--brand-line);
}

.module-card__action span {
  color: var(--brand);
}

.module-state {
  font-size: 11.5px;
}

/* 原来的 140px 同心圆（看起来像"没画完"）→ 一条 3px 的渐变顶轨 */
.module-card__accent {
  right: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(90deg, var(--brand) 0%, rgba(26, 99, 216, .06) 100%);
}

.module-card--quote .module-card__accent {
  background: linear-gradient(90deg, #df9312 0%, rgba(223, 147, 18, .06) 100%);
}

.module-card--summary .module-card__accent,
.module-card--exchange .module-card__accent {
  background: linear-gradient(90deg, #12a06b 0%, rgba(18, 160, 107, .06) 100%);
}

.module-card--summary .module-icon,
.module-card--exchange .module-icon {
  color: #0b7a55;
  background: var(--green-soft);
}

.module-card--quote .module-icon {
  color: #a15f04;
  background: var(--amber-soft);
}

.module-card--future {
  min-height: 126px;
  background: rgba(255, 255, 255, .55);
  border-color: #cfd8e8;
  box-shadow: none;
}

.module-card--future:hover {
  transform: none;
  border-color: #cfd8e8;
  box-shadow: none;
}

.home-todo {
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #f3f8ff 0%, #fff 100%);
  box-shadow: var(--shadow-sm);
}

.home-todo__icon {
  background: var(--brand);
}

/* --------------------------------------------------------------------------
 * 5 · 通用面板 / 区块
 * ------------------------------------------------------------------------ */
.tool-panel,
.order-panel,
.quote-form-panel,
.quote-history-panel,
.quote-intake-panel,
.inquiry-list-panel,
.inquiry-detail-panel,
.inquiry-action-panel,
.inquiry-overview {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.tool-panel__header {
  border-bottom-color: var(--line-soft);
}

.tool-panel__header h3,
.exchange-section-title h3 {
  letter-spacing: -.018em;
}

.tool-panel__header p,
.exchange-section-title p {
  color: var(--muted);
}

.section-index {
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}

.section-index--muted {
  color: var(--brand);
  background: var(--brand-soft);
}

/* --------------------------------------------------------------------------
 * 6 · 按钮 / 表单 / 徽标
 * ------------------------------------------------------------------------ */
.primary-button {
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  background: linear-gradient(180deg, #2a6ddd 0%, var(--brand) 100%);
  box-shadow: 0 1px 2px rgba(16, 32, 64, .14), 0 8px 18px -10px rgba(26, 99, 216, .6);
  transition: background .16s ease, box-shadow .16s ease, transform .12s ease;
}

.primary-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #2560cd 0%, var(--brand-dark) 100%);
  transform: none;
}

.primary-button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(16, 32, 64, .16);
}

.secondary-button {
  min-height: 36px;
  border-color: var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-weight: 600;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.secondary-button:hover {
  border-color: var(--brand-line);
  color: var(--brand);
  background: #f7faff;
}

.icon-button {
  border-radius: 9px;
}

.icon-button:hover {
  background: rgba(16, 32, 64, .06);
}

/* 输入框：原来那条带 !important，得用 !important 才盖得住 */
input,
select,
textarea {
  border-color: var(--line) !important;
  border-radius: var(--radius-sm) !important;
  /* 只写 background-color：用 background 简写会把 background-image 一起清掉，
     日期框那个自绘日历图标就没了。 */
  background-color: #fff !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: #ccd7e8 !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: var(--ring) !important;
}

.input-wrap {
  border-color: var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}

.input-wrap:focus-within {
  border-color: var(--brand);
  box-shadow: var(--ring);
}

.field > span {
  color: var(--ink-2);
  font-weight: 650;
}

.form-error {
  color: var(--red);
}

.quote-status-badge,
.email-badge,
.inquiry-stage-pill,
.inquiry-priority-pill,
.quote-from-inquiry {
  border-radius: 999px;
  font-weight: 650;
}

/* --------------------------------------------------------------------------
 * 7 · 表格
 * ------------------------------------------------------------------------ */
.order-table,
.admin-table,
.order-detail-table,
.exchange-history__table {
  font-size: 13px;
}

.order-table thead th,
.admin-table thead th,
.order-detail-table thead th {
  padding-top: 11px;
  padding-bottom: 11px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}

.order-table tbody td,
.admin-table tbody td,
.order-detail-table tbody td {
  border-bottom: 1px solid var(--line-soft);
}

.order-table tbody tr:hover,
.admin-table tbody tr:hover,
.order-detail-table tbody tr:hover {
  background: #f7f9fd;
}

.order-table__order-no {
  color: var(--brand);
  font-weight: 650;
}

.order-table__price {
  font-weight: 650;
}

.order-overview__stats article,
.admin-stats article,
.inquiry-stats article {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #fbfcfe 0%, #fff 100%);
  box-shadow: var(--shadow-sm);
}

.order-overview__stats strong,
.admin-stats strong,
.inquiry-stats strong {
  color: var(--ink);
  letter-spacing: -.02em;
}

.order-overview__header,
.order-overview__footer {
  border-color: var(--line-soft);
}

/* --------------------------------------------------------------------------
 * 8 · 报价与规格 / 汇率与时差 / 商机 / 获客
 * ------------------------------------------------------------------------ */
.quote-helper-card,
.quote-missing-card,
.quote-commercial-card,
.quote-history-card,
.quote-parse-state,
.quote-recent,
.quote-draft-item,
.exchange-history__panel,
.world-clock-card,
.world-clock-popover {
  border-color: var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.quote-helper-card__icon {
  border-radius: 9px;
}

.exchange-history__table thead th {
  color: var(--faint);
  font-size: 11px;
  letter-spacing: .06em;
  background: #f8fafc;
}

.exchange-history__table tbody tr:hover {
  background: #f7f9fd;
}

.inquiry-overview {
  background: linear-gradient(110deg, #fff 0%, #f7faff 72%, #eef4fe 100%);
}

.inquiry-list-item:hover {
  background: #f7faff;
}

.inquiry-list-item.is-active {
  background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* --------------------------------------------------------------------------
 * 9 · AI 邮箱助手：把模块自己那套"橙 + 青"收回到品牌蓝
 *      （全站最明显的一处不一致：别的页面是蓝，点进邮箱就变橙）
 * ------------------------------------------------------------------------ */
.route--email {
  --brand: #1a63d8;
  --brand-dark: #1450a8;
  --brand-soft: #e9f1fe;
  --teal: #0e7c86;
  --teal-soft: #e6f4f6;
  --green-soft: #e6f6ef;
  --amber: #b26a06;
  --amber-soft: #fdf3e2;
  --red: #d92d20;
  --red-soft: #fdeceb;
  --faint: #98a4b8;
  --line: #e4e9f2;
  --line-soft: #eef1f7;
  --paper: #ffffff;
  --canvas: #eef1f7;
  --cream: #f7f9fd;
}

.route--email .email-toolbar {
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.route--email .email-toolbar__text {
  color: var(--muted);
}

.route--email .email-toolbar__text b {
  color: var(--ink-2);
}

.route--email .email-btn {
  min-height: 34px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.route--email .email-btn--ghost {
  border-color: var(--line);
  background: #fff;
  color: var(--ink-2);
}

.route--email .email-btn--ghost:hover {
  border-color: var(--brand-line);
  background: #f7faff;
  color: var(--brand);
}

.route--email .email-btn--primary {
  background: linear-gradient(180deg, #2a6ddd 0%, var(--brand) 100%);
}

.route--email .email-btn--primary:hover {
  background: linear-gradient(180deg, #2560cd 0%, var(--brand-dark) 100%);
}

.route--email .email-btn--teal {
  background: var(--brand-deep);
}

.route--email .email-btn--teal:hover {
  background: #0b2a5c;
}

.route--email .email-overview {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(110deg, #fff 0%, #f7faff 72%, #edf3fe 100%);
  box-shadow: var(--shadow);
}

.route--email .email-overview .kicker {
  color: var(--brand);
}

.route--email .email-overview h3 {
  color: var(--ink);
  font-size: 21px;
  letter-spacing: -.03em;
}

.route--email .email-overview > div > span {
  color: var(--muted);
}

.route--email .email-inbox-panel,
.route--email .email-message-panel,
.route--email .email-ai-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.route--email .email-inbox-panel,
.route--email .email-message-panel,
.route--email .email-ai-panel,
.route--email .email-workspace {
  background: #fff;
}

.route--email .email-inbox-toolbar {
  border-radius: 13px 13px 0 0;
  background: linear-gradient(180deg, #16294a 0%, #12233f 100%);
}

.route--email .email-inbox-toolbar .secondary-button {
  border-color: rgba(255, 255, 255, .22);
  color: #eaf1fb;
  background: rgba(255, 255, 255, .09);
  box-shadow: none;
}

.route--email .email-smart-views {
  background: #f7f9fd;
}

.route--email .email-smart-views button.is-active {
  color: #fff;
  background: var(--brand);
}

.route--email .email-list-item {
  border-bottom: 1px solid var(--line-soft);
  background: #fff;
}

.route--email .email-list-item:hover {
  background: #f7faff;
}

.route--email .email-list-item.is-active {
  background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
}

.route--email .email-message__header {
  background: linear-gradient(180deg, #fff 0%, #f9fbfe 100%);
}

.route--email .email-message__header h3 {
  color: var(--ink);
  letter-spacing: -.018em;
}

.route--email .email-sender strong {
  color: var(--brand);
}

.route--email .email-language-toolbar {
  background: #fbfcfe;
}

.route--email .email-body {
  color: var(--ink-2);
  line-height: 1.95;
}

.route--email .email-ai-panel {
  border-top: 3px solid var(--brand);
}

.route--email .email-ai-title > span {
  background: var(--brand);
}

.route--email .email-analysis section p {
  background: #f4f8fe;
}

.route--email .email-review-banner[data-status="pending"] {
  border-color: #d8e4f8;
  background: #f5f9ff;
  color: #2c5aa5;
}

/* --------------------------------------------------------------------------
 * 10 · 空状态 / 弹窗 / 提示条
 * ------------------------------------------------------------------------ */
.order-table__empty,
.quote-history-empty,
.exchange-history__empty,
.collect-empty,
.email-chat-empty,
.empty-chat,
.summary-empty,
.inquiry-loading,
.inquiry-empty-state,
.inquiry-action-empty {
  color: var(--muted);
}

.summary-empty__paper,
.empty-chat__visual,
.inquiry-empty-state > span {
  border-color: var(--line);
  background: var(--cream);
}

.quote-preview-dialog,
.order-form-dialog {
  border-radius: 16px;
  box-shadow: var(--shadow-strong);
}

.quote-preview-backdrop {
  background: rgba(10, 22, 42, .5);
  backdrop-filter: blur(3px);
}

.quote-preview-dialog__footer {
  border-top: 1px solid var(--line-soft);
  background: var(--cream);
}

.toast {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-strong);
}

/* --------------------------------------------------------------------------
 * 14 · 下拉框
 *
 * 原生 <select> 展开的那一层是**浏览器自己画的菜单**，CSS 碰不到它 ——
 * 这就是"点开就变成一个方方正正的系统菜单"的原因，跟页面配不配它根本不管。
 *
 * Chromium 135+ 提供了 appearance: base-select：把弹层变成 ::picker(select)，
 * 可以像普通元素一样加圆角、阴影、悬停底色和勾选标记。
 * 这里整段包在 @supports 里：支持的系统换成自绘弹层，不支持的（Firefox / Safari）
 * 继续用原生弹层 —— 也就是说最差情况就是维持现状，不会更难看。
 *
 * 箭头用 mask + currentColor 画：深色工具条里的小下拉也能自动跟着文字色走，
 * 不用为"深底浅字"另写一套。
 * ------------------------------------------------------------------------ */
:root {
  --chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

@supports (appearance: base-select) {
  select,
  select::picker(select) {
    appearance: base-select;
  }

  /* 关闭态：文字和箭头一行居中。箭头交给 ::picker-icon，不再用系统那个。 */
  select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease;
  }

  select:hover:not(:disabled) {
    border-color: #ccd7e8;
  }

  select:open,
  select:focus-visible {
    border-color: var(--brand);
    box-shadow: var(--ring);
    outline: 0;
  }

  select::picker-icon {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    margin: 0;
    border: 0;
    background: currentColor;
    -webkit-mask: no-repeat center / 13px 13px var(--chevron-down);
    mask: no-repeat center / 13px 13px var(--chevron-down);
    opacity: .55;
    transition: rotate .18s ease, opacity .18s ease;
  }

  /* 展开时箭头翻过来，跟常见下拉的反馈一致 */
  select:open::picker-icon {
    rotate: 180deg;
    opacity: .85;
  }

  /* 弹层本体：圆角面板 + 柔和阴影，宽度跟着内容走（窄筛选框里长选项不会被截） */
  select::picker(select) {
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    box-shadow: var(--shadow-strong);
    max-height: min(320px, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  select option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--ink-2);
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
  }

  select option:hover,
  select option:focus-visible {
    color: var(--brand);
    background: var(--brand-soft);
    outline: 0;
  }

  /* 当前选中的那一条：不加底色，只用一个勾和品牌色文字，避免整行发蓝压过别的项 */
  select option:checked {
    color: var(--brand);
    font-weight: 650;
    background: transparent;
  }

  select option:checked:hover {
    background: var(--brand-soft);
  }

  select option::checkmark {
    order: 1;
    margin: 0 0 0 auto;
    color: var(--brand);
    content: "\2713";
    font-size: 12px;
    font-weight: 700;
  }
}

/* --------------------------------------------------------------------------
 * 15 · 日期选择
 *
 * 下拉框能靠 appearance: base-select 接管弹层，**日期不行** ——
 * <input type="date"> 弹出的日历是浏览器/系统直接画的，CSS 没有任何入口。
 * 所以这里有两条路：
 *   1. 藏掉原生那个小图标、换成自己画的，并且让整块输入框都可点；
 *   2. 弹层由 public/date-picker.js 自绘（下面 .date-pop 那一组）。
 * 触屏设备不做这两件事，继续用系统日历 —— 手机上系统那个更好用。
 *
 * 这里的 !important 是被逼的：各模块给日期框写了许多更具体的选择器
 * （例如 .exchange-date-row input[type="date"] 用 background 简写，
 * 会把 background-image 一起清成 none），不这样压不住。
 * ------------------------------------------------------------------------ */
:root {
  --calendar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8797' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 9.5h17M8 3.5v3.5M16 3.5v3.5'/%3E%3C/svg%3E");
}

@media (pointer: fine) {
  input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
  }

  input[type="date"] {
    padding-right: 34px !important;
    background-image: var(--calendar-icon) !important;
    background-repeat: no-repeat !important;
    background-position: right 11px center !important;
    background-size: 15px 15px !important;
    cursor: pointer;
  }
}

.date-pop {
  position: fixed;
  z-index: 260;              /* 弹窗是 130、提示条是 200，日历要压在它们上面 */
  width: 268px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shadow-strong);
  color: var(--ink);
  font-size: 13px;
  user-select: none;
}

.date-pop:focus {
  outline: 0;
}

.date-pop__head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px 8px;
}

.date-pop__title {
  flex: 1 1 auto;
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
}

.date-pop__title:hover {
  color: var(--brand);
  background: var(--brand-soft);
}

.date-pop__nav {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.date-pop__nav:hover {
  color: var(--brand);
  background: var(--brand-soft);
}

.date-pop__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 2px 4px;
}

.date-pop__week span {
  color: var(--faint);
  font-size: 11.5px;
  text-align: center;
}

.date-pop__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.date-pop__day {
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.date-pop__day:hover {
  color: var(--brand);
  background: var(--brand-soft);
}

.date-pop__day.is-out {
  color: #b9c2d0;
}

.date-pop__day.is-today {
  color: var(--brand);
  font-weight: 650;
  box-shadow: inset 0 0 0 1px var(--brand-line);
}

.date-pop__day.is-selected {
  color: #fff;
  font-weight: 650;
  background: var(--brand);
}

.date-pop__day.is-selected:hover {
  color: #fff;
  background: var(--brand-dark);
}

.date-pop__day.is-cursor {
  box-shadow: inset 0 0 0 2px var(--brand);
}

.date-pop__months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.date-pop__month {
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.date-pop__month:hover {
  color: var(--brand);
  background: var(--brand-soft);
}

.date-pop__month.is-selected {
  color: var(--brand);
  background: var(--brand-soft);
  font-weight: 650;
}

.date-pop__foot {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding: 8px 4px 0;
  border-top: 1px solid var(--line-soft);
}

.date-pop__link {
  border: 0;
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.date-pop__link:hover {
  text-decoration: underline;
}

/* 时间选择（datetime-local）暂时还归系统管 —— 但它那个小图标也跟着换掉，
   免得同一排里一个是我们画的、一个是系统画的。 */
@media (pointer: fine) {
  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .62;
  }
}

/* --------------------------------------------------------------------------
 * 16 · 历史订单筛选行
 *
 * 原来是「10px 粗体标签 + 11px 输入文字」：在 1440 的屏幕上偏小，而且标签比
 * 输入文字小一档还更粗，看着像两层拼接来的界面。这里把两者拉到同一档，
 * 高度统一成 40px，跟页面里其它表单控件对齐。
 * ------------------------------------------------------------------------ */
.order-overview__filters label > span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.order-overview__filters input,
.order-overview__filters select {
  height: 40px;
  padding: 0 11px;
  font-size: 12.5px;
}

.order-overview__filters input::placeholder {
  font-size: 12.5px;
}

.order-overview__filters .primary-button {
  min-height: 40px;
  font-size: 12.5px;
}

/* --------------------------------------------------------------------------
 * 17 · 历史订单「按订单看」的一行
 *
 * 两件事：
 *   1. 整行可点。以前只有左右两张单据卡是按钮，单号那一排点了没反应 ——
 *      但业务员心里的一行就是"这一笔生意"，应该整行都能进详情。
 *   2. 悬停提示原来只有一层 #f7f9fd 的浅灰蓝，几乎看不出可点。现在加上
 *      左侧品牌色竖条 + 单号下划线，鼠标在行内任何位置都能看出"这里能点进去"。
 * ------------------------------------------------------------------------ */
.order-pair__row {
  cursor: pointer;
}

.order-pair__row > td {
  transition: background .16s ease, box-shadow .16s ease;
}

.order-pair__row:hover > td {
  background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
}

.order-pair__row:hover .order-table__order-no {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.order-pair__row:hover .order-pair__side:not(.is-empty) {
  border-color: var(--brand-line);
  /* 卡片本身也淡淡染一下：只染外圈的话会被这两块白卡盖住，看着还是"没反应" */
  background: #f7faff;
}

.order-pair__row:hover .order-pair__side:not(.is-empty):hover {
  border-color: var(--brand);
}

/* 客户侧原来用的是旧版的青绿 #1d6f70，是全站统一到品牌蓝之后漏掉的一处 */
.order-pair__side.is-sell {
  border-left: 3px solid var(--brand);
}

.order-pair__side.is-buy {
  border-left: 3px solid #c98a20;
}

/* 订单状态标签：台账里同时躺着在产的单和走完的单，标出来才不会被问"这单怎么在这" */
.order-status-chip {
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}

.order-status-chip.is-open {
  color: var(--brand);
  background: var(--brand-soft);
}

.order-status-chip.is-done {
  color: var(--green);
  background: var(--green-soft);
}

.order-status-chip.is-off {
  color: var(--muted);
  background: var(--line-soft);
}

/* 「这一笔生意」的整体状态：跟着单号走，比两侧的单据状态更高一层。
   跟踪中用描边实底，一眼能挑出还要管的单；已结束压成灰底，不抢注意力
   （"已结束"包含已取消，所以不能用绿色——绿色会被读成"做成了"）。 */
.order-deal-chip {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.order-deal-chip.is-live {
  color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand-line);
}

.order-deal-chip.is-done {
  color: var(--muted);
  background: var(--line-soft);
}

/* --------------------------------------------------------------------------
 * 18 · 订单详情里的「进度」
 *
 * 三件事：方块做小、字号提到看得清、标题和方块排成一行。
 * （一开始试过"九等分铺满一行"，格子被拉得很宽、中间大片空白，反而更难看，
 *   所以还是让方块按内容自适应，只保证最小宽度一致。）
 *
 * 只作用于**订单详情**（.order-detail-block 里），跟踪页表格里那排方块不动 ——
 * 那边每格本来就窄，跟着放大反而会溢出。
 * ------------------------------------------------------------------------ */
.order-detail-block .track-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.order-detail-block .track-step {
  min-width: 42px;
  min-height: 30px;
  justify-content: center;
  padding: 3px 7px;
  border-color: var(--line);
  color: var(--muted);
  background: #fbfcfe;
}

/* 详情里的方块是纯展示（渲染成 span 而不是 button），不是能点的东西 */
.order-detail-block .track-step.is-readonly {
  cursor: default;
}

.order-detail-block .track-step > b {
  font-size: 10px;
  letter-spacing: 0;
}

.order-detail-block .track-step > i {
  font-size: 9px;
}

.order-detail-block .track-step.is-done {
  border-style: solid;
  border-color: #cfe6da;
  color: #1f6b4f;
  background: var(--green-soft);
}

.order-detail-block .track-step.is-planned {
  border-color: #ebdfc6;
  color: #8a5a1f;
  background: var(--amber-soft);
}

.order-detail-block .track-step.is-overdue {
  border-color: #ecc9c1;
  color: #a8402c;
  background: var(--red-soft);
}

.order-detail-block .track-step.is-today {
  border-color: var(--brand-line);
  color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand-line);
}

/* 够宽的时候，标题和方块排成同一行：
     进度（1 / 9 步）  [定金 9/22][辅料][面料 9/28]……
   标题只是这排方块的标签，单独占一行会把整块高度翻倍。 */
@media (min-width: 1081px) {
  .order-detail-block--progress {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
  }

  .order-detail-block--progress > h3 {
    margin: 0;
    white-space: nowrap;
  }
}

/* 详情里各块之间统一留 18px。
   进度块下面紧跟着就是「客户侧 / 工厂侧」那块面板，而那个容器自己没有上边距，
   于是两块是贴在一起的（贴到只有几个像素）。这里按"相邻子元素"统一给间距，
   不用逐个容器去补。 */
#order-detail-body > * + * {
  margin-top: 18px;
}

@media (max-width: 760px) {
  .order-detail-block .track-step {
    min-width: 38px;
    padding: 3px 6px;
  }
}

@media (max-width: 760px) {
  .order-detail-block .track-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}