/* ===== 主题（CSS 变量）===== */
:root, html[data-theme="classic"]{
  --ink:#1c1b19;
  --paper:#fbf9f5;
  --rule:#d9d4c8;
  --accent:#a14e2a;   /* burnt brick — 木工/装修 调色 */
  --accent-soft:#f1e2d6;
  --labor:#3c5a48;    /* 工种=绿，材料=砖红，做区分 */
  --labor-soft:#e3ebe5;
  --muted:#6b6760;
  --bg:#eee9df;
  --panel-head:#f6f3ec;
  --field-static:#f0ede6;
}
html[data-theme="navy"]{
  --ink:#152232;
  --paper:#f8fafc;
  --rule:#c9d6e3;
  --accent:#1f4e79;
  --accent-soft:#dbe7f3;
  --labor:#0e7490;
  --labor-soft:#d9eef2;
  --muted:#5f7186;
  --bg:#e4ebf2;
  --panel-head:#eef3f8;
  --field-static:#e9eff5;
}
html[data-theme="forest"]{
  --ink:#1d2a20;
  --paper:#f8fbf7;
  --rule:#c7d8c9;
  --accent:#2e6b46;
  --accent-soft:#dcefe2;
  --labor:#8a5a2b;
  --labor-soft:#f2e6d7;
  --muted:#5c6f5f;
  --bg:#e5eee6;
  --panel-head:#eff5ef;
  --field-static:#ebf2ea;
}
html[data-theme="plum"]{
  --ink:#2a1e33;
  --paper:#fbf9fc;
  --rule:#d8cce4;
  --accent:#5b3a8e;
  --accent-soft:#e9e0f5;
  --labor:#b45309;
  --labor-soft:#f7e9d2;
  --muted:#6f6480;
  --bg:#ece6f2;
  --panel-head:#f2edf7;
  --field-static:#efeaf5;
}
html[data-theme="mono"]{
  --ink:#232323;
  --paper:#fafafa;
  --rule:#d6d6d6;
  --accent:#2b2b2b;
  --accent-soft:#e8e8e8;
  --labor:#5b6670;
  --labor-soft:#e4e9ed;
  --muted:#6e6e6e;
  --bg:#e9e9e9;
  --panel-head:#f1f1f1;
  --field-static:#eeeeee;
}
html[data-theme="ocean"]{
  --ink:#132b30;
  --paper:#f6fbfb;
  --rule:#c5dde0;
  --accent:#0e7490;
  --accent-soft:#d7eef3;
  --labor:#b0566f;
  --labor-soft:#f6e3e9;
  --muted:#5b7479;
  --bg:#e2eef0;
  --panel-head:#ecf5f6;
  --field-static:#e8f2f3;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Helvetica Neue', Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.shell{
  max-width:1180px;
  margin:0 auto;
  padding:28px 20px 80px;
}
h1{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:26px;
  letter-spacing:0.5px;
  margin:0 0 4px;
  text-wrap:balance;
}
.tagline{
  color:var(--muted);
  font-size:13px;
  margin-bottom:20px;
}

/* ===== 顶部工具栏 ===== */
.toolbar{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:12px 16px;
  margin-bottom:20px;
}
.toolbar .spacer{flex:1;}
.tool-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted);
  margin:0;
}
.tool-item select{
  width:auto;
  padding:6px 8px;
  font-size:13px;
}
.ghost-btn{
  cursor:pointer;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:3px;
  color:var(--ink);
  padding:8px 12px;
  font-size:13px;
}
.ghost-btn:hover{border-color:var(--accent); color:var(--accent);}
.user-chip{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  padding:8px 12px;
  border-radius:16px;
  background:var(--labor-soft);
  color:var(--labor);
}
.auth-hint{font-size:12px; color:var(--muted);}

/* ===== 布局与面板 ===== */
.layout{
  display:grid;
  grid-template-columns: 380px minmax(0,1fr);
  gap:24px;
}
@media (max-width: 900px){
  /* minmax(0,1fr)：轨道最小值归零，816px 的 Letter 预览由 preview-wrap 内部滚动，不撑破页面 */
  .layout{grid-template-columns:minmax(0,1fr);}
}
/* 中间及窄宽度：收费项行太挤，名称+说明独占第一行，控件折到第二行 */
@media (max-width: 1100px){
  .item-row .name-desc{ grid-column: 2 / -1; grid-row: 1; }
}
.panel{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:4px;
  padding:18px 18px 22px;
}
.panel h2{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:var(--muted);
  margin:0 0 14px;
  border-bottom:1px solid var(--rule);
  padding-bottom:8px;
}
label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
  margin-top:12px;
}
input, select, textarea{
  width:100%;
  padding:8px 9px;
  font-size:14px;
  border:1px solid var(--rule);
  border-radius:3px;
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--accent);
  outline-offset:0;
}
/* 键盘操作时按钮/链接与输入框同一套焦点环（鼠标点击不触发 focus-visible） */
button:focus-visible, a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
textarea{resize:vertical; min-height:54px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}

/* 按单据类型显示/隐藏表单区块（body[data-doc-type] 由 app.js 同步） */
body:not([data-doc-type="invoice"]) .invoice-only{display:none !important;}
body:not([data-doc-type="invoice"]):not([data-doc-type="receipt"]) .receipt-only{display:none !important;}
body:not([data-doc-type="credit"]) .credit-only{display:none !important;}
body:not([data-doc-type="invoice"]):not([data-doc-type="quote"]):not([data-doc-type="proforma"]):not([data-doc-type="estimate"]) .discount-only{display:none !important;}
body:not([data-doc-type="invoice"]):not([data-doc-type="quote"]):not([data-doc-type="proforma"]):not([data-doc-type="estimate"]):not([data-doc-type="po"]) .due-only{display:none !important;}

/* ===== 收费项 ===== */
.item-row{
  display:grid;
  grid-template-columns: 26px minmax(0,1fr) 90px 70px 110px 90px 28px;
  gap:8px;
  align-items:start;
  padding:10px 0;
  border-bottom:1px dashed var(--rule);
}
.item-row:last-of-type{border-bottom:none;}
/* 网格子项允许收缩到列宽以下：输入框固有最小宽度会把 1fr 列（乃至整栏）撑出横向滚动 */
.item-row > *{min-width:0;}
.item-row input, .item-row select, .item-row textarea{min-width:0;}
.item-row label{margin-top:0;}
/* 收费项第一列：Services/Material 名称 + Description 说明（多行）两段输入 */
.name-desc label:not(:first-child){margin-top:8px;}
.name-desc input, .name-desc textarea{display:block;}   /* 阻止两个 width:100% 的 inline-block 输入框在固有宽度计算时并排，撑大整栏 */
/* Description 描述预计内容较多：默认约 4 行高，可纵向拖拽调整 */
textarea.item-desc{min-height:96px;}
#itemsContainer{overflow-x:auto;}  /* 极窄视口兜底：行内容超宽时面板内滚动，页面不横向溢出 */
/* Description 描述支持多行：换行在预览/打印 PDF/JPG 中原样保留 */
td.desc-cell{color:var(--muted); font-size:11.5px; white-space:pre-wrap;}
.tagpill{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  padding:2px 6px;
  border-radius:10px;
  margin-top:2px;
  text-align:center;
}
.pill-material{background:var(--accent-soft); color:var(--accent);}
.pill-labor{background:var(--labor-soft); color:var(--labor);}
select.type-select.material{border-color:var(--accent); color:var(--accent); font-weight:600;}
select.type-select.labor{border-color:var(--labor); color:var(--labor); font-weight:600;}

.add-btn, .action-btn{
  cursor:pointer;
  border:none;
  border-radius:3px;
  padding:10px 16px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.3px;
}
/* 交互态过渡：只声明具体属性（≤150ms，可中断），不使用 transition:all */
.add-btn, .action-btn, .ghost-btn, .mini-btn{
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease, transform .12s ease;
}
/* 按压反馈：轻微缩放让点击有手感 */
.add-btn:active, .action-btn:active, .ghost-btn:active, .mini-btn:active{
  transform:scale(0.96);
}
.add-btn{
  background:var(--ink);
  color:#fff;
  margin-top:14px;
  width:100%;
}
.add-btn:hover{opacity:0.9;}
.del-btn{
  position:relative;
  background:none;
  border:none;
  color:#b33;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:6px 0;
}
/* 视觉不变，命中区域向外扩 8px（正好到达网格间距，不与相邻可点区域重叠） */
.del-btn::after{
  content:'';
  position:absolute;
  inset:-8px;
}
.actions{
  display:flex;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}
.action-btn.pdf{background:var(--accent); color:#fff;}
.action-btn.jpg{background:var(--labor); color:#fff;}
.action-btn.save{background:var(--ink); color:#fff;}
.action-btn.share{background:var(--muted); color:#fff;}
.action-btn:hover{opacity:0.9;}
.pdf-hint{font-size:12px; color:var(--muted); margin-top:8px; line-height:1.5; text-wrap:pretty;}
.field-error{color:#b33; font-weight:600;}

/* 用户偏好减弱动效时，关闭全部过渡/动画（静态状态提示仍在：颜色/文案不变） */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition:none !important;
    animation:none !important;
  }
}

/* ===== 云端历史 ===== */
.history-list{display:flex; flex-direction:column;}
.history-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:9px 4px;
  border-bottom:1px dashed var(--rule);
  font-size:12.5px;
}
.history-item:last-of-type{border-bottom:none;}
.history-item.active{background:var(--accent-soft); border-radius:4px;}
.history-main{display:flex; align-items:center; gap:8px; min-width:0;}
.history-num{font-weight:700;}
.history-client{
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:110px;
}
.history-meta{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums;}
.mini-btn{
  position:relative;
  cursor:pointer;
  border:1px solid var(--rule);
  background:var(--paper);
  color:var(--ink);
  border-radius:3px;
  padding:6px 10px;
  font-size:11.5px;
}
/* 历史行较密：命中区域向外扩 4px（相邻两个 mini-btn 间距 8px，恰好相切不重叠） */
.mini-btn::after{
  content:'';
  position:absolute;
  inset:-4px;
}
.mini-btn:hover{border-color:var(--accent); color:var(--accent);}
.mini-btn.danger:hover{border-color:#b33; color:#b33;}
.history-empty{
  color:var(--muted);
  font-size:12.5px;
  padding:10px 2px;
}

/* ===== 发票/报价单预览（导出部分）===== */
/* 版面固定为 US Letter（8.5in × 11in）：屏幕预览与打印/PDF 输出同一版面，
   内容超出 11in 时由打印引擎自动分页（见下方 @media print 规则） */
#invoice{
  background:#fff;
  width:8.5in;
  min-height:11in;
  padding:0.5in;
  border:1px solid var(--rule);
  /* 纸张投影：把「纸」从面板上托起来，深度用分层透明阴影而非加重边框 */
  box-shadow:0 1px 2px rgba(0,0,0,0.05), 0 12px 32px rgba(0,0,0,0.08);
  font-family:Georgia, 'Times New Roman', serif;
  color:var(--ink);
}
.inv-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  border-bottom:3px solid var(--ink);
  padding-bottom:18px;
}
.inv-brand{font-size:24px; font-weight:bold; letter-spacing:0.5px;}
.inv-brand-sub{font-family:Arial, sans-serif; font-size:11px; color:var(--muted); margin-top:4px;}
.inv-meta{text-align:right; font-family:Arial, sans-serif; font-size:12px;}
.inv-meta .num{font-size:18px; font-weight:bold; font-family:Georgia, serif; letter-spacing:1px;}
.inv-parties{
  display:flex;
  justify-content:space-between;
  margin-top:24px;
  font-family:Arial, sans-serif;
  font-size:12.5px;
}
.inv-parties .block{max-width:44%;}
.inv-parties .label{
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:1px;
  color:var(--muted);
  margin-bottom:6px;
}
.inv-parties .name{font-weight:bold; font-size:14px; font-family:Georgia, serif;}

table.inv-table{
  width:100%;
  border-collapse:collapse;
  margin-top:28px;
  font-family:Arial, sans-serif;
  font-size:12.5px;
}
table.inv-table thead th{
  text-align:left;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:0.8px;
  color:var(--muted);
  border-bottom:2px solid var(--ink);
  padding:6px 4px 8px;
}
table.inv-table td{
  padding:9px 4px;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
table.inv-table td.num, table.inv-table th.num{text-align:right;}
/* 金额/数量列：等宽数字防跳动；Georgia 默认老式数字（3/4/5/7/9 下沉）在金额列改用等高数字 */
table.inv-table td.num, .inv-summary td.amt{font-variant-numeric:tabular-nums lining-nums;}
.type-tag{
  display:inline-block;
  font-size:9.5px;
  font-weight:700;
  padding:1px 6px;
  border-radius:8px;
  margin-top:3px;
}
.type-tag.material{background:var(--accent-soft); color:var(--accent);}
.type-tag.labor{background:var(--labor-soft); color:var(--labor);}

.inv-summary{
  display:flex;
  justify-content:flex-end;
  margin-top:6px;
}
.inv-summary table{
  font-family:Arial, sans-serif;
  font-size:12.5px;
  min-width:280px;
}
.inv-summary td{padding:5px 4px;}
.inv-summary td.label{color:var(--muted);}
.inv-summary td.amt{text-align:right; font-family:Georgia, serif;}
.inv-summary tr.total td{
  border-top:2px solid var(--ink);
  font-weight:bold;
  font-size:16px;
  padding-top:10px;
}
.inv-notes{
  margin-top:30px;
  font-family:Arial, sans-serif;
  font-size:11.5px;
  color:var(--muted);
  border-top:1px solid var(--rule);
  padding-top:14px;
  white-space:pre-wrap;
}
/* 报价单客户签名确认区（quote/proforma） */
.inv-acceptance{
  margin-top:34px;
  font-family:Arial, sans-serif;
  font-size:11.5px;
}
.inv-acceptance .accept-note{ color:var(--muted); margin-bottom:26px; line-height:1.5; }
.inv-acceptance .sig-row{ display:flex; gap:60px; }
.inv-acceptance .sig-slot{ flex:1; max-width:280px; text-align:center; }
.inv-acceptance .sig-line{ display:block; border-bottom:1px solid var(--ink); height:30px; }
.inv-acceptance .sig-cap{
  display:block; margin-top:5px;
  font-size:10px; color:var(--muted);
  text-transform:uppercase; letter-spacing:1px;
}
.inv-footer{
  margin-top:30px;
  text-align:center;
  font-family:Arial, sans-serif;
  font-size:10.5px;
  color:var(--muted);
  letter-spacing:0.4px;
}
.badge-status{
  display:inline-block;
  font-size:10px;
  font-weight:bold;
  padding:3px 8px;
  border-radius:10px;
}
.badge-status.paid{background:var(--labor-soft); color:var(--labor);}
.badge-status.partial{background:var(--accent-soft); color:var(--accent);}

/* 预览面板头部（非导出内容） */
.preview-head{
  padding:14px 18px;
  background:var(--panel-head);
  border-bottom:1px solid var(--rule);
  font-size:12px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
}
.preview-head .livetotal{font-weight:bold; color:var(--ink); font-variant-numeric:tabular-nums;}
.preview-wrap{padding:18px; overflow-x:auto;}
.line-total{background:var(--field-static); font-variant-numeric:tabular-nums;}
.inv-logo{max-height:64px; max-width:180px; display:block; margin-bottom:10px;}
.tax-hint{font-size:12px; color:var(--muted); margin-top:10px; line-height:1.5;}

/* ===== 打印 / 矢量 PDF 导出 =====
   只保留 #invoice（单据本体），由浏览器打印引擎输出矢量文本 PDF。
   页面尺寸 US Letter；垂直页边距由 @page margin 提供——
   元素自身的 padding 在分页时只作用于第一页顶部/最后一页底部，
   @page margin 才能保证每一页上下都有 0.5in 边距；水平边距用元素 padding。
   内容超过一页时自动分页：表格行不跨页截断，表头在每页重复。 */
@page{ size:Letter; margin:0.5in 0; }
@media print{
  body{ background:#fff; }
  .shell{ max-width:none; margin:0; padding:0; }
  h1, .tagline, .toolbar, .no-print, .preview-head{ display:none !important; }
  .layout{ display:block; }
  .layout > div:first-child{ display:none !important; }
  .layout .panel{ border:none; border-radius:0; padding:0; margin:0; overflow:visible !important; }
  .preview-wrap{ padding:0 !important; overflow:visible !important; }
  #invoice{
    border:none;
    box-shadow:none;
    transform:none !important;   /* 清除预览缩放，按真实 Letter 尺寸输出 */
    width:auto;          /* 页宽由 @page 决定 */
    min-height:auto;     /* 避免整页高度的最小值把空白顶成多出一页 */
    padding:0 0.5in;     /* 垂直边距交给 @page，每页生效 */
  }
  #invoiceScaler{ width:auto !important; height:auto !important; }
  table.inv-table thead{ display:table-header-group; }   /* 项目表头每页重复 */
  table tr{ break-inside:avoid; }                        /* 行不跨页截断 */
  .inv-head, .inv-parties, .inv-summary, .inv-notes, .inv-acceptance, .inv-footer{ break-inside:avoid; }
}