/* ============================================================
   船修宝·报价单编辑软件 — 原型设计系统（深色正式主题）
   设计基调：「船厂文书」工业工具风 · 深色版
   - 深海军蓝灰底 + 浅钢蓝文字 + 提亮海事蓝主色，橙为唯一强调色
   - 数据密集的表格工具，不做营销化装饰
   - 中文 UI 字体用系统栈（离线可用），靠字阶/字重拉开层级
   ============================================================ */
:root{
  /* 色板：深海军蓝灰体系，不用纯黑/纯白 */
  --ink:      #dbe4ee;   /* 主文字：浅钢蓝 */
  --ink-2:    #9db0c4;   /* 次文字 */
  --ink-3:    #6b7f93;   /* 弱文字/占位 */
  --paper:    #12181f;   /* 页面底：深海军蓝灰 */
  --card:     #1a2330;   /* 卡片底 */
  --well:     #141c26;   /* 输入框/凹槽底：比卡片更深 */
  --line:     #2a3746;   /* 分隔线 */
  --line-2:   #3a4a5c;   /* 强分隔线 */

  --navy:     #c7d8ea;   /* 标题/强调文字：浅海军蓝（深色下作文字色） */
  --navy-bg:  #0e1826;   /* 顶栏底：深海军蓝 */
  --blue:     #5a9bd8;   /* 主色：海事蓝（深色下提亮） */
  --blue-d:   #6fabdf;   /* 主色 hover/按下 */
  --blue-bg:  rgba(90,155,216,.14);   /* 主色半透明底 */
  --accent:   #e08a3c;   /* 强调橙：版本/关键动作 */
  --accent-bg:rgba(224,138,60,.14);

  --ok:       #4cb882;   /* 已成交/正常 */
  --ok-bg:    rgba(76,184,130,.13);
  --warn:     #e0604f;   /* 已作废/临期/未建档 */
  --warn-bg:  rgba(224,96,79,.13);
  --talk:     #a98ad9;   /* 洽谈中 */
  --talk-bg:  rgba(169,138,217,.14);
  --gray:     #8b9aa9;   /* 历史导入/草稿 */
  --gray-bg:  rgba(139,154,169,.12);

  /* 字阶 */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-num: 15px;        /* 表格金额 */

  --radius: 6px;
  --shadow: 0 1px 3px rgba(0,0,0,.35);
  --font: "Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif;
  --mono: "Consolas","Sarasa Mono SC",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}   /* hidden 属性优先于组件 display 规则（编辑表单/查重警告等初始隐藏） */
html{background:var(--paper)}
body{font-family:var(--font);color:var(--ink);font-size:var(--fs-md);line-height:1.55}
img{max-width:100%}

/* 深色滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:#2e3d4e;border-radius:5px;border:2px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:#3d5064}
*{scrollbar-width:thin;scrollbar-color:#2e3d4e var(--paper)}

/* ---------- 顶栏 ---------- */
.topbar{background:var(--navy-bg);color:#d5e2ef;display:flex;align-items:center;gap:18px;
  padding:0 20px;height:52px;position:sticky;top:0;z-index:50;
  border-bottom:1px solid #1d2c3d}
.topbar .logo{font-size:16px;font-weight:700;letter-spacing:1px;white-space:nowrap}
.topbar .logo em{font-style:normal;color:var(--accent);margin-left:6px;font-size:12px;font-weight:400}
.topbar nav{display:flex;gap:4px;flex:1}
.topbar nav a{color:#93a9bf;text-decoration:none;font-size:var(--fs-sm);padding:5px 12px;border-radius:var(--radius)}
.topbar nav a.on{background:rgba(90,155,216,.18);color:#e8f1fa}
.topbar nav a:hover{color:#e8f1fa}
.topbar .user{font-size:var(--fs-sm);color:#93a9bf;white-space:nowrap}
.topbar .user b{color:#e8f1fa;font-weight:600}

/* ---------- 页面容器 ---------- */
.page{max-width:1280px;margin:0 auto;padding:18px 20px 60px}
.page-title{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.page-title h1{font-size:var(--fs-xl);font-weight:700;color:var(--navy)}
.page-title .sub{color:var(--ink-3);font-size:var(--fs-sm)}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card + .card{margin-top:14px}
.card-hd{padding:10px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.card-hd h2{font-size:var(--fs-lg);font-weight:600;color:var(--navy)}
.card-hd .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.card-bd{padding:14px 16px}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:5px;font-family:var(--font);font-size:var(--fs-sm);
  padding:6px 14px;border-radius:var(--radius);border:1px solid var(--line-2);
  background:#212d3b;color:var(--ink-2);cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--blue);color:var(--blue)}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#0e1826;font-weight:600}
.btn.pri:hover{background:var(--blue-d)}
.btn.acc{background:var(--accent);border-color:var(--accent);color:#1a1208;font-weight:600}
.btn.acc:hover{filter:brightness(1.08)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--blue)}
.btn.sm{padding:3px 9px;font-size:var(--fs-xs)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- 表单 ---------- */
.input,.select,textarea.input{font-family:var(--font);font-size:var(--fs-sm);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:6px 10px;background:var(--well);outline:none}
.input:focus,.select:focus{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-bg)}
.input::placeholder{color:var(--ink-3)}
input[type="date"],input[type="datetime-local"],input[type="time"]{color-scheme:dark}
.select option{background:var(--card);color:var(--ink)}
.f-label{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:4px}

/* ---------- 状态徽标（深色半透明底 + 亮色文字） ---------- */
.st{display:inline-block;font-size:var(--fs-xs);padding:1px 9px;border-radius:9px;white-space:nowrap}
.st.draft  {background:var(--gray-bg);color:var(--gray)}
.st.quoted {background:var(--blue-bg);color:var(--blue)}
.st.talk   {background:var(--talk-bg);color:var(--talk)}
.st.deal   {background:var(--ok-bg);color:var(--ok)}
.st.void   {background:var(--warn-bg);color:var(--warn)}
.st.hist   {background:var(--gray-bg);color:var(--ink-3)}
.ver-tag{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);font-weight:700}
.miss{color:var(--warn);font-size:var(--fs-xs)}
.link{color:var(--blue);font-size:var(--fs-xs);text-decoration:none;cursor:pointer;white-space:nowrap}
.link:hover{text-decoration:underline}

/* ---------- 数据表格 ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tbl th{background:#202b3a;color:var(--ink-2);font-weight:600;text-align:left;
  padding:8px 10px;border-bottom:2px solid var(--line-2);white-space:nowrap}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:rgba(90,155,216,.06)}
.tbl .num{font-family:var(--mono);font-size:var(--fs-num);text-align:right;font-weight:600}
.tbl .orderno{font-weight:600;color:var(--navy);white-space:nowrap}
.tbl .actions{white-space:nowrap;text-align:right}
.tbl .actions .link{margin-left:10px}

/* ---------- 手机端响应式（≤768px，对照 docs/prototype/手机端.html） ---------- */
@media (max-width:768px){
  /* 顶栏：一行放不下时导航横滑（与手机端原型 m-topbar 同语义） */
  .topbar{flex-wrap:wrap;height:auto;min-height:52px;padding:6px 12px;gap:4px 12px}
  .topbar nav{order:3;flex:1 1 100%;overflow-x:auto;scrollbar-width:none}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar .user{margin-left:auto}

  /* 页面容器：去 max-width 留白，底部加高避让悬浮按钮 */
  .page{max-width:none;padding:12px 10px 72px}
  .page-title{flex-wrap:wrap;gap:4px 10px}
  .card-hd{flex-wrap:wrap;gap:6px 10px}

  /* 数据表格：横滑不挤压 */
  .tbl{display:block;overflow-x:auto}
}