/* ============================================================
   KINGH 国际空运货代系统 · 统一设计系统 (theme.css)
   视觉对标：深墨绿 (ink #102b23) + 品牌橙 (orange #ed7138)
   字体：Manrope (拉丁/数字) + PingFang SC (中文回退)
   ------------------------------------------------------------
   说明：业务页面样式 100% 来自 Tailwind 工具类 + Element Plus，
        本文件负责：(1) 本地字体  (2) 品牌 CSS 变量
        (3) Element Plus 主色/组件暖色覆写  (4) 登录页/通用辅助类
   ============================================================ */

/* ---------------- 1. 本地字体 Manrope (latin 子集, 5 字重) ---------------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/vendor/fonts/manrope/manrope-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/vendor/fonts/manrope/manrope-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/vendor/fonts/manrope/manrope-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/vendor/fonts/manrope/manrope-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('/assets/vendor/fonts/manrope/manrope-800.ttf') format('truetype');
}

/* ---------------- 2. 品牌 CSS 变量 ---------------- */
:root {
  --ink:        #102b23;   /* 主墨绿（最深） */
  --ink-2:      #174438;   /* 墨绿次深 */
  --ink-3:      #1f574a;   /* 墨绿中 */
  --orange:     #ed7138;   /* 品牌橙 */
  --orange-dark:#d95a23;   /* 橙深（hover） */
  --orange-soft:#fdeae0;   /* 橙浅底 */
  --paper:      #fffdf8;   /* 米纸底 */
  --sand:       #f2efe7;   /* 沙色分区底 */
  --line:       #e3ddd0;   /* 暖边框 */
  --line-2:     #d3ccbc;   /* 暖边框深 */
  --muted:      #6d7872;   /* 次级文字 */
  --text:       #273029;   /* 主文字 */
  --text-soft:  #4a554e;
  --success:    #087443;
  --danger:     #b42318;
  --warn:       #c77700;

  --radius:     10px;
  --radius-sm:  8px;
  --shadow:     0 1px 2px rgba(16,43,35,.06), 0 1px 3px rgba(16,43,35,.05);
  --shadow-md:  0 6px 18px rgba(16,43,35,.10);
  --shadow-lg:  0 18px 48px rgba(16,43,35,.22);

  --sidebar-bg:     #102b23;
  --sidebar-hover:  #16352b;
  --sidebar-active: #ed7138;
  --sidebar-text:   #b9c7bf;
  --sidebar-title:  #7d9389;

  /* Element Plus 主色（橙） */
  --el-color-primary: #ed7138;
  --el-color-primary-light-3: #f08e5b;
  --el-color-primary-light-5: #f4a87f;
  --el-color-primary-light-7: #f9c9ab;
  --el-color-primary-light-8: #fbdcc4;
  --el-color-primary-light-9: #fdeae0;
  --el-color-primary-dark-2:  #d95a23;
  --el-border-radius-base: 8px;
}

/* ---------------- 3. 基础排版 ---------------- */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--text); }

/* 选区高亮 */
::selection { background: rgba(237,113,56,.22); }

/* 滚动条（暖色） */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cfc7b6; border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: #b9af9b; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------------- 4. Element Plus 暖色覆写 ---------------- */
/* 主按钮圆角/字号统一 */
.el-button { border-radius: var(--radius-sm); font-weight: 500; }
.el-button--primary { --el-button-bg-color: var(--orange); --el-button-border-color: var(--orange);
  --el-button-hover-bg-color: var(--orange-dark); --el-button-hover-border-color: var(--orange-dark);
  --el-button-active-bg-color: var(--orange-dark); --el-button-active-border-color: var(--orange-dark); }

/* 表格：表头暖中性、行 hover 浅橙 */
.el-table th.el-table__cell { background: #f6f3ec !important; color: var(--text-soft);
  font-weight: 600; border-bottom: 1px solid var(--line) !important; }
.el-table td.el-table__cell { border-bottom: 1px solid #f0ece2 !important; }
.el-table .el-table__row:hover > td.el-table__cell { background: #fdf3ec !important; }
.el-table .el-table__row.current-row > td.el-table__cell { background: #fdeae0 !important; }

/* 分页主色 */
.el-pagination.is-background .el-pager li.is-active { background: var(--orange); border-color: var(--orange); }
.el-pagination.is-background .el-pager li:not(.is-disabled):hover { color: var(--orange); }

/* Tabs 选中橙 */
.el-tabs__item.is-active { color: var(--orange); }
.el-tabs__active-bar { background: var(--orange); }
.el-tabs__item:hover { color: var(--orange-dark); }

/* 输入框聚焦橙边 */
.el-input__wrapper.is-focus, .el-textarea__inner:focus { box-shadow: 0 0 0 1px var(--orange) inset !important; }

/* 卡片圆角 */
.el-card { border-radius: var(--radius); border-color: var(--line); }

/* 下拉菜单选中/悬浮 */
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { background: var(--orange-soft); color: var(--orange-dark); }

/* 消息/通知 */
.el-message-box__title { color: var(--ink); font-weight: 700; }

/* ---------------- 5. 登录页（双栏，墨绿 + 橙） ---------------- */
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
@media (max-width: 880px) { .auth-layout { grid-template-columns: 1fr; } .brand-stage { display: none; } }

.brand-stage {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 600px at 18% 12%, rgba(237,113,56,.20), transparent 60%),
    radial-gradient(700px 500px at 88% 92%, rgba(31,87,74,.55), transparent 60%),
    linear-gradient(135deg, #0c231d 0%, #102b23 48%, #143a30 100%);
  color: #eaf1ec; padding: 48px 52px; display: flex; flex-direction: column; justify-content: space-between;
}
.brand-stage .glow { position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(237,113,56,.32), transparent 70%); filter: blur(8px); }
.brand-stage .glow.a { top: -90px; right: -60px; }
.brand-stage .glow.b { bottom: -120px; left: -70px; background: radial-gradient(circle, rgba(31,87,74,.7), transparent 70%); }
.brand-logo { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.brand-logo .mark { width: 46px; height: 46px; border-radius: 12px; flex: none;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 22px;
  box-shadow: 0 8px 22px rgba(237,113,56,.35); }
.brand-logo .name { font-size: 18px; font-weight: 800; letter-spacing: .4px; }
.brand-logo .name small { display: block; font-size: 11px; font-weight: 500; color: #9fb3a8; letter-spacing: 2px; }
.brand-hero { position: relative; z-index: 1; }
.brand-hero h2 { font-size: 30px; line-height: 1.35; font-weight: 800; margin: 0 0 14px; }
.brand-hero h2 .accent { color: var(--orange); }
.brand-hero p { color: #b6c6bd; font-size: 14px; line-height: 1.8; max-width: 420px; }
.brand-points { position: relative; z-index: 1; display: grid; gap: 12px; margin-top: 28px; }
.brand-points .pt { display: flex; gap: 12px; align-items: center; font-size: 13px; color: #cfe0d8; }
.brand-points .pt .ic { width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: rgba(237,113,56,.16); color: var(--orange); display: flex; align-items: center; justify-content: center; }
.brand-foot { position: relative; z-index: 1; font-size: 11px; color: #6f857a; }
/* 登录页 LOGO 自适应：随视口宽度等比例缩放，不溢出、不变形；浏览器缩放即时跟随 */
.brand-logo-img { width: clamp(72px, 13vw, 196px); height: auto; max-width: 100%; object-fit: contain; display: block; }
.auth-logo-img { width: clamp(52px, 8vw, 128px); height: auto; max-width: 100%; object-fit: contain; display: block; }
.brand-logo-fallback { width: clamp(46px, 7vw, 64px); height: clamp(46px, 7vw, 64px); border-radius: 14px; flex: none;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: clamp(22px, 3vw, 30px);
  box-shadow: 0 8px 22px rgba(237,113,56,.35); }

/* 登录页顶部品牌区块：LOGO 居左 + 英文上/中文下，整体等比例自适应缩放。
   所有尺寸以容器基准字号（em）表达，JS 按登录卡宽度计算基准字号并限制上下限，
   保证 LOGO 图片、中英文文字、间距比例恒定，不拉伸变形。 */
.login-brand {
  display: flex; align-items: center; justify-content: center; gap: 0.55em;
  margin: 0 auto 22px; font-size: 16px; line-height: 1;
}
.login-brand__logo { flex: none; display: flex; align-items: center; }
.login-brand__img {
  width: 3.4em; height: 3.4em; box-sizing: border-box; object-fit: contain; display: block; border-radius: 8px;
}
.login-brand__fallback {
  width: 3.4em; height: 3.4em; border-radius: 12px; flex: none; box-sizing: border-box;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 2em;
  box-shadow: 0 8px 22px rgba(237,113,56,.35);
}
.login-brand__text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.login-brand__en {
  font-size: 1.35em; font-weight: 800; letter-spacing: .3px; color: var(--ink);
  line-height: 1.15; white-space: nowrap;
}
.login-brand__cn {
  font-size: 0.9em; font-weight: 600; letter-spacing: 2px; color: var(--muted);
  line-height: 1.2; margin-top: 0.12em; white-space: nowrap;
}
/* 小屏：间距收紧、留白收敛，避免压缩模糊 */
@media (max-width: 480px) {
  .login-brand { gap: 0.5em; margin-bottom: 18px; }
}

/* 全站 LOGO 展示框（跟随 siteConfig.siteLogoStyle）：保证等比例缩放、不拉伸；
   方形 / 横版 / 透明底 无背景，简约白底 加白底圆角与描边 */
.logo-frame { display: block; border-radius: 8px; flex-shrink: 0; background: transparent; }
.logo-frame--square { background: transparent; }
.logo-frame--horizontal { background: transparent; }
.logo-frame--transparent { background: transparent; }
.logo-frame--whiteBg { background: #ffffff; border: 1px solid #e5e7eb; padding: 4px 8px; }

.auth-stage { position: relative; background:
    linear-gradient(var(--paper), var(--paper)),
    repeating-linear-gradient(0deg, transparent, transparent 26px, rgba(16,43,35,.035) 27px),
    repeating-linear-gradient(90deg, transparent, transparent 26px, rgba(16,43,35,.035) 27px);
  display: flex; align-items: center; justify-content: center; padding: 32px; }
.auth-stage::before { content: 'SECURE ACCESS'; position: absolute; bottom: 22px; right: 28px;
  font-size: 11px; letter-spacing: 3px; color: rgba(16,43,35,.18); font-weight: 700; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card .welcome { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 4px; }
.auth-card .sub { font-size: 12px; color: var(--muted); margin: 0 0 22px; }

.method-tabs { display: flex; gap: 8px; margin-bottom: 22px; }
.method-button { flex: 1; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: #fff; color: var(--text-soft); font-size: 13px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: all .15s; }
.method-button:hover { border-color: var(--orange); color: var(--orange-dark); }
.method-button.active { background: var(--orange); border-color: var(--orange); color: #fff;
  box-shadow: 0 8px 18px rgba(237,113,56,.28); }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--orange-dark); margin-bottom: 7px; }
.input-shell { display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 0 12px; transition: all .15s; }
.input-shell:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(237,113,56,.14); }
.input-shell .ic { color: var(--orange); flex: none; }
.input-shell input { flex: 1; border: none; outline: none; padding: 11px 0; font-size: 14px; background: transparent; color: var(--text); }
.password-submit { width: 100%; margin-top: 8px; padding: 12px; border: none; border-radius: var(--radius-sm);
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: 8px; }
.password-submit:hover { background: var(--ink-2); }
.password-submit:disabled { opacity: .6; cursor: not-allowed; }
.auth-error { color: var(--danger); font-size: 12px; min-height: 18px; margin: 10px 0 0; }
.auth-tips { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.auth-tips .tip-title { font-size: 11px; color: var(--muted); margin-bottom: 8px; letter-spacing: .5px; }
.auth-tips .tip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.auth-tips .tip-grid span { font-size: 11px; color: var(--orange-dark); background: var(--orange-soft);
  padding: 5px 9px; border-radius: 6px; cursor: pointer; }
.auth-tips .tip-grid span:hover { background: #fbdcc4; }
.sso-box { text-align: center; padding: 28px 8px; }
.sso-box .big { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 16px;
  background: var(--orange-soft); color: var(--orange); display: flex; align-items: center; justify-content: center; }
.sso-box p { color: var(--muted); font-size: 13px; line-height: 1.7; }

/* ---------------- 6. 通用辅助类 ---------------- */
/* 面包屑 */
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.crumbs .sep { color: #c3bcac; }
.crumbs .cur { color: var(--text); font-weight: 600; }

/* 用户下拉 */
.user-menu { position: relative; }
.user-menu .trigger { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 5px 8px 5px 5px;
  border-radius: 999px; transition: background .15s; }
.user-menu .trigger:hover { background: #f3efe6; }
.user-menu .avatar { width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ink-3), var(--ink)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.user-menu .meta b { display: block; font-size: 13px; color: var(--text); line-height: 1.2; }
.user-menu .meta span { font-size: 11px; color: var(--muted); }
.user-menu .pop { position: absolute; right: 0; top: calc(100% + 8px); width: 220px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px;
  z-index: 60; }
.user-menu .pop .head { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-menu .pop .item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
  font-size: 13px; color: var(--text-soft); cursor: pointer; }
.user-menu .pop .item:hover { background: #f6f3ec; color: var(--ink); }
.user-menu .pop .item.danger { color: var(--danger); }
.user-menu .pop .item.danger:hover { background: #fdecea; }

/* 顶部快捷按钮 */
.top-action { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: #fff;
  color: var(--text-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; position: relative; }
.top-action:hover { border-color: var(--orange); color: var(--orange-dark); background: var(--orange-soft); }
.top-action .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange); border: 2px solid #fff; }

/* 左侧收起按钮 */
.collapse-btn { width: 28px; height: 28px; border-radius: 8px; color: var(--sidebar-title);
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; }
.collapse-btn:hover { background: var(--sidebar-hover); color: #fff; }

/* 卡片统一规范（供页面内 .panel 使用） */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel + .panel { margin-top: 14px; }

/* 区块标题左侧橙标 */
.section-bar { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink);
  margin: 4px 0 12px; }
.section-bar::before { content: ''; width: 4px; height: 15px; border-radius: 3px; background: var(--orange); }

/* 空状态 */
.empty-state { padding: 56px 20px; text-align: center; color: var(--muted); }
.empty-state .ic { font-size: 40px; opacity: .5; }
.empty-state p { margin: 10px 0 0; font-size: 13px; }

/* 加载遮罩 */
.app-loading { position: fixed; inset: 0; background: var(--paper); display: flex; align-items: center;
  justify-content: center; flex-direction: column; gap: 14px; z-index: 9999; }
.app-loading .spin { width: 40px; height: 40px; border: 3px solid #e7e1d4; border-top-color: var(--orange);
  border-radius: 50%; animation: spin .8s linear infinite; }
.app-loading .txt { font-size: 13px; color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 四、运单收发货人信息：输入框统一布局规范 ===== */
.wb-waybill .el-form-item { margin-bottom: 16px; }
.wb-waybill .el-form-item__label {
  font-size: 13px; color: #334155; font-weight: 500; line-height: 1.4; padding-bottom: 4px;
}
.wb-waybill .el-input,
.wb-waybill .el-select { width: 100%; }
/* 统一高度 / 内边距 / 圆角 */
.wb-waybill .el-input__wrapper {
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
}
/* 长英文保持单行、超出横向滚动、不截断 */
.wb-waybill .el-input__inner {
  font-size: 13px;
  line-height: 38px;
  white-space: nowrap;
  text-overflow: clip;
  overflow-x: auto;
}

/* ===== 顶部信息展示栏（TopInfoBar）：实时时间 + 实时汇率 ===== */
.top-infobar { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 64px; z-index: 15; }
.infobar-scroll { display: flex; align-items: center; gap: 16px; padding: 6px 20px; overflow-x: auto; white-space: nowrap; }
.infobar-scroll::-webkit-scrollbar { height: 6px; }
.infobar-scroll::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 3px; }
.infobar-group { display: flex; align-items: center; gap: 10px; }
.infobar-label { font-size: 11px; color: #94a3b8; font-weight: 700; letter-spacing: .06em; flex-shrink: 0; }
.infobar-chips { display: flex; align-items: center; gap: 8px; }
.infobar-chip { display: flex; align-items: center; gap: 6px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; padding: 3px 10px; flex-shrink: 0; }
.infobar-chip .chip-icon { font-size: 13px; line-height: 1; }
.chip-icon.is-day { color: #f59e0b; }
.chip-icon.is-night { color: #6366f1; }
.chip-text { display: flex; flex-direction: column; line-height: 1.15; }
.chip-name { font-size: 10px; color: #94a3b8; }
.chip-val { font-size: 13px; font-weight: 700; color: #1f2937; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.infobar-chip.rate { background: #fff7ed; border-color: #fed7aa; }
.infobar-chip.rate .chip-val { color: #c2410c; }
.infobar-chip.rate .chip-code { font-size: 10px; color: #9a3412; background: #ffedd5; border-radius: 4px; padding: 1px 5px; margin-left: 2px; }
.infobar-divider { width: 1px; height: 24px; background: #e5e7eb; flex-shrink: 0; }
.infobar-updated { font-size: 10px; color: #cbd5e1; margin-left: 4px; flex-shrink: 0; }
@media (max-width: 640px) { .infobar-label { display: none; } }