/* ============================================================
   報價系統 UI — 設計系統與樣式
   淺色專業風、密集表格；僅供介面原型使用
   ============================================================ */
:root{
  --bg:#f4f6fa; --panel:#ffffff; --line:#dfe3ec; --line-2:#eef1f7;
  --ink:#1b2130; --ink-2:#5a6478; --ink-3:#8b95a8;
  --brand:#4f46e5; --brand-2:#eef0ff;
  --ok:#0f9d58; --ok-2:#e7f6ee; --warn:#c77700; --warn-2:#fdf3e3;
  --bad:#d63b3b; --bad-2:#fdeceb; --nav:#1d2333;
  --radius:8px; --shadow:0 1px 2px rgba(20,30,60,.06),0 4px 12px rgba(20,30,60,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5;
  font-family:system-ui,-apple-system,"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:600}
h1{font-size:20px} h2{font-size:16px} h3{font-size:14px}

/* ---------- 版面 ---------- */
.app{display:flex;min-height:100vh}
.side{
  width:196px;flex:0 0 196px;background:var(--nav);color:#c9cfdd;padding:14px 0;
  position:sticky;top:0;height:100vh;overflow:auto;
}
.side .brand{padding:6px 16px 14px;color:#fff;font-weight:700;font-size:15px;letter-spacing:.3px}
.side .brand small{display:block;color:#8b95a8;font-weight:400;font-size:11px;margin-top:2px}
.side a{
  display:flex;align-items:center;gap:8px;padding:9px 16px;color:#c9cfdd;font-size:13px;
  border-left:3px solid transparent;
}
.side a:hover{background:rgba(255,255,255,.06);text-decoration:none;color:#fff}
.side a.on{background:rgba(79,70,229,.22);border-left-color:var(--brand);color:#fff;font-weight:600}
.side .grp{padding:14px 16px 6px;font-size:13px;font-weight:normal;color:#c9cfdd;letter-spacing:normal}
/* 系統設定底下的子選項：縮排顯示，字體小於系統設定，背景與側欄一致 */
.side a.sub{padding:7px 16px 7px 30px;font-size:12px;color:#9aa5b9;background:transparent;border-bottom:none}
.side a.sub:hover{background:rgba(255,255,255,.06);color:#fff}
.side a.sub.on{background:rgba(79,70,229,.22);border-left-color:var(--brand);color:#fff;font-weight:600}
.main{flex:1;min-width:0;padding:18px 22px 60px}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.pagehead .sub{color:var(--ink-2);font-size:12.5px;margin-top:3px}

/* ---------- 卡片 ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px}
.card>header{
  padding:10px 14px;border-bottom:1px solid var(--line-2);display:flex;
  align-items:center;justify-content:space-between;gap:10px;
}
.card>header h2{font-size:13.5px;color:var(--ink)}
.card>header .hint{font-size:11.5px;color:var(--ink-3)}
.card .body{padding:14px}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:1fr 1fr}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.quote-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
@media (max-width:1180px){.quote-layout{grid-template-columns:1fr}}

/* ---------- 表單 ---------- */
label.f{display:block;margin-bottom:10px}
label.f>span{display:block;font-size:12px;color:var(--ink-2);margin-bottom:4px}
input,select,textarea,button{font:inherit;color:inherit}
input[type=text],input[type=number],input[type=date],select,textarea{
  width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:#fff;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-2);border-color:var(--brand)}
textarea{min-height:96px;resize:vertical;line-height:1.7}
input.num{text-align:right;font-variant-numeric:tabular-nums}
.inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.inline>*{flex:0 0 auto}
.inline .grow{flex:1 1 180px;min-width:150px}

/* 輸入框與同列按鈕（如「客戶 + 管理客戶」）
   注意：不可用 <span class="inline"> 包在 label.f 內 —— label.f>span 的 display:block
   權重高於 .inline 的 display:flex，會導致按鈕被擠到下一行、欄高不一致而版面歪掉。 */
.f-row{display:flex;gap:6px;flex-wrap:nowrap;align-items:stretch}
.f-row>select,.f-row>input{flex:1 1 auto;min-width:0}
.f-row>.btn{flex:0 0 auto;padding:7px 12px}

/* ---------- 按鈕 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:6px;
  border:1px solid var(--line);background:#fff;cursor:pointer;font-size:13px;white-space:nowrap;
}
.btn:hover{background:#f7f8fc}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:#4338ca}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.ghost{border-color:transparent;background:transparent;color:var(--brand)}
.btn.sm{padding:3px 8px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- 表格 ---------- */
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th,table.t td{padding:7px 9px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:middle}
table.t thead th{
  background:#fafbfe;color:var(--ink-2);font-weight:600;font-size:12px;position:sticky;top:0;z-index:1;
}
table.t tbody tr:hover{background:#fafbff}
table.t td.n,table.t th.n{text-align:right;font-variant-numeric:tabular-nums}
table.t td.mono,table.t td.c{font-variant-numeric:tabular-nums}
table.t tfoot td{background:#fafbfe;font-weight:600}
.tbl-wrap{overflow:auto;max-height:none}

/* ---------- 標籤 ---------- */
.tag{display:inline-block;padding:1px 7px;border-radius:99px;font-size:11px;line-height:18px;border:1px solid transparent;white-space:nowrap}
.tag.material{background:#eef3ff;color:#2b4fd8;border-color:#d8e2ff}
.tag.product{background:#f2ecff;color:#6b34c9;border-color:#e6dbff}
.tag.labor{background:var(--warn-2);color:var(--warn);border-color:#f3e0bf}
.tag.fee{background:#eaf7f1;color:#0b7a45;border-color:#cceada}
.tag.virtual{background:#f1f2f5;color:#6b7488;border-color:#e3e5ea}
.tag.draft{background:#f1f2f5;color:#5a6478}
.tag.sent{background:#eef3ff;color:#2b4fd8}
.tag.won{background:var(--ok-2);color:var(--ok)}
.tag.lost{background:var(--bad-2);color:var(--bad)}
.tag.void{background:#f1f2f5;color:#8b95a8;border-color:#d1d5db;text-decoration:line-through}
.tr-void{opacity:.55;background:#fafafc}
.tag.warn{background:var(--warn-2);color:var(--warn)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}

/* ---------- 疊明細 ---------- */
.lines{font-size:13px}
.lrow{display:grid;grid-template-columns:26px minmax(180px,2fr) 74px 56px 92px 104px 26px;gap:6px;align-items:center;padding:6px 8px;border-bottom:1px solid var(--line-2)}
.lrow.head{background:#fafbfe;color:var(--ink-2);font-size:12px;font-weight:600}
.lrow .nm{cursor:pointer}
.lrow .nm:hover{color:var(--brand)}
.lines .sub{background:#fbfcff;border-bottom:1px solid var(--line-2);padding:6px 8px 8px 34px}
.lines .sub h4{margin:2px 0 6px;font-size:12px;color:var(--ink-2)}
.lines .sub .srow{display:grid;grid-template-columns:minmax(150px,2fr) 64px 52px 86px 96px;gap:6px;padding:3px 0;align-items:center}
.lines .sub .srow.h{color:var(--ink-3);font-size:11.5px;font-weight:600}
.lines .sub .labor-row{display:grid;grid-template-columns:minmax(120px,1.6fr) 64px 64px 70px 92px 92px;gap:6px;align-items:center;padding:3px 0}
.lines .sub input,.lines .sub select{padding:3px 6px;font-size:12.5px}
.warnline{background:var(--warn-2);border-left:3px solid #e0a33c;padding:7px 10px;border-radius:4px;font-size:12.5px;color:#7a4d00;margin:8px 0}
.okline{background:var(--ok-2);border-left:3px solid var(--ok);padding:7px 10px;border-radius:4px;font-size:12.5px;color:#0b5c34;margin:8px 0}

/* ---------- 總計區 ---------- */
.totals{font-size:13px}
.totals .r{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--line-2)}
.totals .r b{font-variant-numeric:tabular-nums}
.totals .r.big{border-bottom:none;padding-top:10px;font-size:16px}
.totals .r.big b{color:var(--brand);font-size:19px}
.totals .r.minor{color:var(--ink-2);font-size:12.5px}
.totals .r.sub{display:none}

/* ---------- 其他 ---------- */
.kv{display:grid;grid-template-columns:110px 1fr;gap:4px 10px;font-size:13px}
.kv dt{color:var(--ink-2)} .kv dd{margin:0}
.muted{color:var(--ink-3)}
.small{font-size:12px}
.right{text-align:right}
.toast{
  position:fixed;right:18px;bottom:18px;background:#1d2333;color:#fff;padding:10px 14px;border-radius:8px;
  font-size:13px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:.18s;z-index:99;max-width:420px;
}
.toast.on{opacity:1;transform:none}
.modal{position:fixed;inset:0;background:rgba(20,26,40,.45);display:none;align-items:center;justify-content:center;z-index:80;padding:24px}
.modal.on{display:flex}
.modal .box{background:#fff;border-radius:10px;max-width:680px;width:100%;max-height:86vh;overflow:auto;box-shadow:0 18px 50px rgba(15,20,40,.35)}
.modal .box>header{padding:12px 16px;border-bottom:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center}
.modal .box .body{padding:16px}
.bar{height:6px;background:var(--line-2);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--brand)}
.empty{padding:26px;text-align:center;color:var(--ink-3);font-size:13px}
.chip{display:inline-flex;align-items:center;gap:5px;background:#f4f6fa;border:1px solid var(--line);border-radius:99px;padding:2px 9px;font-size:12px;margin:2px 4px 2px 0}
.chip.match{background:var(--ok-2);border-color:#cceada;color:#0b5c34}
.chip.unmatch{background:var(--warn-2);border-color:#f3e0bf;color:#7a4d00}
.chip .q{color:var(--ink-3)}

/* ---------- 雷切報價單：右側內嵌視窗（不離開報價系統） ---------- */
.embed{position:fixed;left:196px;right:0;top:0;bottom:0;z-index:70;background:var(--bg);display:none;flex-direction:column}
.embed.open{display:flex}
.embed>header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.embed>header .inline{align-items:center;gap:10px}
.embed>header h2{font-size:14px;white-space:nowrap}
.embed>header .hint{font-size:11.5px;color:var(--ink-3)}
.embed iframe{flex:1 1 auto;width:100%;border:0;background:#fff;display:block}
@media (max-width:860px){.embed{left:0}.embed>header .hint{display:none}}