:root { --ink: #172554; --muted: #475569; --paper: #f8fafc; --surface: #fff; --line: #dbeafe; --brand: #1e40af; --brand-dark: #1e3a8a; --alert: #b45309; --focus: #d97706; --danger: #b91c1c; --shadow: 0 10px 30px #1e3a8a0d; }
* { box-sizing: border-box; }
.purchase-entry { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(100px, 1fr) minmax(140px, 1fr) auto; gap: 1rem; align-items: start; }
.purchase-entry > button { margin-top: 1.8rem; }
.purchase-filters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; }
#purchase-lines input { min-width: 100px; width: 100%; }
.purchase-total { text-align: right; font-size: 1.2rem; margin-top: 1rem; }
.purchase-detail { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
/* 維修單：兩欄等寬且可縮小（minmax(0, …)），避免右側清單表格把整頁撐出畫面。 */
@media (min-width: 701px) { .repair-page > .forms { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.repair-page .table-wrap table { min-width: 0; }
.repair-page #repair-list td { padding: .7rem .5rem; font-size: .9rem; word-break: keep-all; }
.repair-page #repair-list td:nth-child(n+4) { white-space: nowrap; }
.repair-page table:has(#repair-list) th { padding: .7rem .5rem; white-space: nowrap; }
.repair-page #repair-list button { margin-right: 0; }
/* 故障、處理說明預設約五行高，可往下拉大。 */
#repair-issue, #repair-diagnosis { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
/* 用料：品項選單獨佔一列，數量／單價／加入放第二列，欄位不再擠在一起。 */
.repair-material-entry { display: grid; grid-template-columns: minmax(6rem, 1fr) minmax(8rem, 1.4fr) auto; gap: .6rem .75rem; align-items: end; margin-bottom: .75rem; }
.repair-material-entry .field:first-child { grid-column: 1 / -1; }
.repair-material-entry button { min-height: 2.8rem; white-space: nowrap; }
.repair-material-entry .field { margin-bottom: 0; }
.repair-detail { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; overflow-wrap: anywhere; }
.repair-detail button { margin: .5rem .5rem 0 0; }
.repair-detail select[multiple] { min-height: 8rem; margin-bottom: .75rem; }
.repair-detail label { display: block; margin: .75rem 0 .25rem; font-weight: 700; }
.repair-print { max-width: 190mm; padding: 8mm; color: #111; }
.repair-print table { width: 100%; }
@media (max-width: 760px) { .purchase-entry, .purchase-filters { grid-template-columns: 1fr; } .purchase-entry > button { margin-top: 0; } }
[hidden] { display: none !important; }
body { margin: 0; background: linear-gradient(135deg, #eff6ff 0, var(--paper) 42%, #fffaf0 100%); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Noto Sans TC", sans-serif; }
button, input, select, textarea { font: inherit; }
button, .button { display: inline-flex; justify-content: center; align-items: center; min-height: 2.7rem; border: 0; border-radius: .5rem; padding: .55rem 1rem; background: var(--brand); box-shadow: 0 2px 5px #1e3a8a26; color: #fff; cursor: pointer; text-decoration: none; transition: background .16s ease, box-shadow .16s ease, transform .16s ease; }
button:hover, .button:hover { background: var(--brand-dark); box-shadow: 0 5px 12px #1e3a8a30; }
button:active, .button:active { transform: translateY(1px); box-shadow: none; }
button:disabled { background: #cbd5e1; box-shadow: none; color: #64748b; cursor: not-allowed; }
button.secondary, .button.secondary { background: #e8eefc; box-shadow: none; color: var(--brand-dark); }
button.danger { background: var(--danger); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.page { width: min(1160px, calc(100% - 2rem)); margin: 0 auto; padding: 2.5rem 0 4rem; }
.auth-page { min-height: 100vh; display: grid; place-items: center; }.auth-panel { width: min(100%, 420px); }.account-bar { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; margin-top: 2rem; color: var(--muted); font-size: .9rem; }
.hero, .section-heading, .form-actions { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.hero { align-items: flex-start; border-bottom: 1px solid var(--line); padding: 0 0 1.75rem; }
h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: .25rem; font-size: clamp(1.8rem, 3vw, 2.35rem); letter-spacing: -.035em; } h2 { font-size: 1.25rem; letter-spacing: -.015em; } h3 { font-size: 1rem; }
.eyebrow { margin-bottom: .4rem; color: var(--brand); font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
.hero p:not(.eyebrow) { color: var(--muted); margin-bottom: 0; }.backup-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.status { min-height: 1.5rem; color: var(--brand-dark); font-weight: 600; margin: 1rem 0; }.status.error, .form-error { color: var(--danger); }
.page-nav { display: flex; gap: .35rem; width: fit-content; margin: 1.25rem 0 0; padding: .3rem; background: #e8eefc; border-radius: .7rem; }.page-tab { min-height: 2.4rem; background: transparent; box-shadow: none; color: var(--muted); }.page-tab:hover { background: #d9e6ff; box-shadow: none; }.page-tab[aria-current="page"] { background: var(--surface); box-shadow: 0 2px 6px #1e3a8a1a; color: var(--brand-dark); }
.page-nav { max-width: 100%; flex-wrap: wrap; }
section { margin-top: 2.25rem; }.cards, .grid { display: grid; gap: 1rem; }.cards { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }.card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: .8rem; padding: 1.1rem; box-shadow: var(--shadow); }.card { border-top: 3px solid var(--brand); }.card span, .card small { color: var(--muted); display: block; }.card small { font-size: .78rem; }.card strong { display: block; font-size: 2.15rem; line-height: 1.1; margin: .4rem 0 .55rem; }.card.warning { border-top-color: var(--alert); }.card.warning strong { color: var(--alert); }.two-columns, .forms { grid-template-columns: repeat(2, 1fr); }
.plain-list { margin: 0; padding: 0; list-style: none; }.plain-list li { border-top: 1px solid var(--line); padding: .65rem 0; }.plain-list li:first-child { border-top: 0; padding-top: 0; }.empty { color: var(--muted); }
.field { display: grid; gap: .3rem; margin-bottom: .8rem; }.field label { font-size: .9rem; font-weight: 700; }.split-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } input, select, textarea { width: 100%; border: 1px solid #b6c4dd; border-radius: .5rem; padding: .6rem .7rem; background: #fff; color: var(--ink); } input:hover, select:hover, textarea:hover { border-color: #7b9ce2; }.form-actions { justify-content: flex-start; }.form-error { margin: -.1rem 0 .8rem; font-size: .9rem; font-weight: 700; }
.search { width: min(320px, 100%); }.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: .8rem; box-shadow: var(--shadow); } table { width: 100%; border-collapse: collapse; min-width: 760px; } th, td { padding: .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } th { position: sticky; top: 0; z-index: 1; background: #eff6ff; color: var(--muted); font-size: .8rem; letter-spacing: .03em; } tbody tr { transition: background .16s ease; } tbody tr:hover { background: #f8fbff; } td.actions { white-space: nowrap; }.table-wrap button { min-height: 2.15rem; padding: .35rem .6rem; margin-right: .35rem; }.low { color: var(--alert); font-weight: 800; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.scan-result { display: grid; gap: .15rem; padding: .65rem; border: 1px solid var(--line); border-radius: .5rem; background: #f8fbff; }.scan-result span { color: var(--muted); font-size: .9rem; }
.sale-panel { border-top: 3px solid var(--brand); }.sale-panel .section-heading { align-items: flex-start; }.sale-panel h2 { margin-bottom: 0; }.sale-hint { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }.sale-scanner { display: grid; grid-template-columns: minmax(0, 1fr) 7rem auto; align-items: end; gap: .75rem; padding: 1rem; border: 1px solid #bfdbfe; border-radius: .7rem; background: #eff6ff; }.sale-scanner .field { margin-bottom: 0; }.sale-cart-wrap { margin-top: 1rem; }.sale-cart-wrap tbody .empty { padding: 1.25rem .8rem; text-align: center; }.sale-cart-wrap tfoot { background: #f8fbff; }.sale-cart-wrap tfoot th { position: static; color: var(--ink); font-size: .95rem; }.sale-checkout { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .85rem 1rem; border: 1px solid #bfdbfe; border-radius: .7rem; background: #f8fbff; color: var(--muted); }.sale-checkout button { min-width: 9rem; font-weight: 800; }
.sale-customer { max-width: 28rem; margin-top: 1rem; }.warranty-page > .grid { align-items: start; }.warranty-filters { display: grid; grid-template-columns: 1fr minmax(10rem, .55fr); gap: .75rem; }.warranty-state { font-weight: 700; }
dialog { width: min(420px, calc(100% - 2rem)); border: 1px solid var(--line); border-radius: .8rem; box-shadow: 0 20px 55px #17255440; color: var(--ink); padding: 1.25rem; } dialog::backdrop { background: #17255466; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }
@media (max-width: 700px) { .page { width: min(100% - 1.25rem, 1160px); padding-top: 1.25rem; }.hero, .section-heading, .sale-checkout { align-items: stretch; flex-direction: column; }.page-nav { width: 100%; }.page-tab { flex: 1; }.page-tab:not([data-mobile-page]) { display: none; }.cards, .two-columns, .forms, .sale-scanner, .warranty-filters, .repair-material-entry { grid-template-columns: 1fr; }.split-fields { grid-template-columns: 1fr; }.backup-actions { width: 100%; }.backup-actions > * { flex: 1; }.backup-actions .desktop-only { display: none; }.search, .sale-checkout button { width: 100%; } }
.barcode-label { width: 58mm; padding: 3mm; text-align: center; }.barcode-label strong, .barcode-label span { display: block; }.barcode-label svg { display: block; width: 100%; margin: 3mm 0 0; }.qr-code { display: flex; justify-content: center; }.barcode-label .qr-code svg { width: 38mm; }.barcode-label .barcode-number { font-family: monospace; letter-spacing: .18em; }
@media print { body { background: #fff; } .page > * { display: none !important; } .print-document { display: none !important; margin: 0; border: 0; box-shadow: none; } body:not(.printing-barcode):not(.printing-repair) .page > .app-page[data-page="quotations"] { display: block !important; } body:not(.printing-barcode):not(.printing-repair) .app-page[data-page="quotations"] > :not(.print-document) { display: none !important; } body:not(.printing-barcode):not(.printing-repair) #quotation-detail:not([hidden]), body.printing-barcode #qr-label, body.printing-repair #repair-print { display: block !important; } .print-document .no-print { display: none !important; } .print-document table { min-width: 0; } }
.sale-picker { margin: 1rem 0; padding: 1rem; border: 1px solid #bfdbfe; border-radius: .7rem; min-width: 0; }
.sale-picker legend { font-weight: 700; padding: 0 .4rem; }
.sale-picker .field { min-width: 0; }
.sale-picker select { width: 100%; }
.serial-panel { grid-column: 1 / -1; }
.serial-box { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line, #cbd5e1); border-radius: .7rem; min-width: 0; }
.serial-box select[multiple] { min-height: 8rem; }
.serial-panel textarea, .serial-box textarea { font-family: inherit; }
.auth-page { width: 100%; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; background: #f4f6f8; color: #0f172a; }
.auth-brand { width: min(100%, 460px); }
.auth-brand .eyebrow { color: #475569; }
.auth-brand h1 { font-size: 1.9rem; }
.auth-brand p:last-child { margin: 0; color: #475569; }
.auth-panel { width: min(100%, 460px); margin: 0; padding: 2rem; border-color: #cbd5e1; border-radius: 10px; box-shadow: 0 12px 30px #0f172a0d; }
.auth-panel h1 { font-size: 1.55rem; }
.auth-panel > p { color: #475569; }
.auth-panel .field { gap: .45rem; margin-bottom: 1.1rem; }
.auth-panel input { min-height: 46px; border-color: #cbd5e1; color: #0f172a; }
.auth-panel #login-submit { width: 100%; min-height: 46px; background: #334155; }
.auth-panel #login-submit:disabled { background: #475569; color: #fff; }
.login-progress { display: grid; gap: .25rem; margin-top: 1rem; padding: 1rem; border: 1px solid #a7f3d0; border-radius: 8px; background: #ecfdf5; color: #065f46; font-size: .9rem; }
.auth-panel .auth-help { margin: 1.25rem 0 0; font-size: .85rem; color: #64748b; }
.monthly-sales-page { color: #0f172a; }
.monthly-sales-page .section-heading { margin-bottom: 1rem; }
.monthly-month-field { display: grid; gap: .3rem; font-size: .85rem; font-weight: 700; color: #475569; }
.monthly-month-field input { min-height: 46px; border-color: #cbd5e1; }
.monthly-summary { margin-bottom: 1.5rem; }
.monthly-summary .card { border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 4px 14px #0f172a0a; }
.monthly-summary .card strong { margin-bottom: 0; color: #0f172a; }
.monthly-summary .monthly-total-card { background: #334155; border-color: #334155; }
.monthly-summary .monthly-total-card span, .monthly-summary .monthly-total-card strong { color: #fff; }
.monthly-detail-title { margin-bottom: .75rem; }
@media (max-width: 700px) {
  .auth-panel { padding: 1.5rem; }
  #app-shell:has(.monthly-sales-page:not([hidden])) .hero .backup-actions { display: none; }
  .monthly-sales-page .section-heading { gap: .75rem; }
  .monthly-sales-page .section-heading h2 { margin: 0; font-size: 1.5rem; }
  .monthly-month-field, .monthly-month-field input { width: 100%; }
  .monthly-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .monthly-summary .monthly-total-card { grid-column: 1 / -1; }
  .monthly-summary .card { min-width: 0; padding: 1rem; }
  .monthly-summary .card strong { font-size: 1.75rem; overflow-wrap: anywhere; }
  .monthly-table-wrap, .monthly-performance-wrap { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  .monthly-table-wrap table, .monthly-performance-wrap table { display: block; min-width: 0; }
  .monthly-table-wrap thead, .monthly-performance-wrap thead { display: none; }
  .monthly-table-wrap tbody, .monthly-performance-wrap tbody { display: grid; gap: .75rem; }
  .monthly-table-wrap tbody tr, .monthly-performance-wrap tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: 1rem; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; }
  .monthly-table-wrap tbody td, .monthly-performance-wrap tbody td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
  .monthly-table-wrap tbody td::before, .monthly-performance-wrap tbody td::before { content: attr(data-label); display: block; margin-bottom: .2rem; color: #64748b; font-size: .75rem; font-weight: 700; }
  .monthly-table-wrap tbody td:first-child, .monthly-table-wrap tbody td:nth-child(2), .monthly-table-wrap tbody td:nth-child(7), .monthly-table-wrap tbody td:nth-child(8), .monthly-performance-wrap tbody td:first-child { grid-column: 1 / -1; }
  .monthly-table-wrap tbody td:nth-child(2) { font-size: 1.05rem; font-weight: 700; }
  .monthly-table-wrap tbody td:nth-child(6) { font-weight: 800; }
  .monthly-table-wrap tbody td .empty { padding: 0; }
  .monthly-table-wrap tbody td select { margin-bottom: .5rem; }
  .monthly-table-wrap tbody td button { min-height: 44px; }
  #monthly-performance-panel { margin-top: 1.5rem; background: #ecfdf5; border-color: #a7f3d0; }
}

/* ===== 2026-10 企業系統風格：深色頂欄、底線分頁、平面灰底（所有頁面共用外框） ===== */
body { background: #f1f5f9; color: #0f172a; }
.page { padding-top: 0; }
.hero { margin: 0 calc(50% - 50vw); padding: 1.1rem calc(50vw - 50%); background: #0f172a; border: 0; align-items: center; }
.hero .eyebrow { color: #94a3b8; font-size: .7rem; letter-spacing: .16em; margin-bottom: .2rem; }
.hero h1 { color: #fff; font-size: 1.35rem; letter-spacing: 0; margin: 0; }
.hero p:not(.eyebrow) { color: #94a3b8; font-size: .82rem; }
.hero .backup-actions button, .hero .backup-actions .button { min-height: 2.6rem; padding: .5rem 1.1rem; border-radius: 6px; font-size: 1rem; background: transparent; border: 1px solid #334155; color: #e2e8f0; box-shadow: none; }
.hero .backup-actions button:hover, .hero .backup-actions .button:hover { background: #1e293b; }
.status { margin: .75rem 0; }
.status:empty { display: none; }
@media (min-width: 701px) {
  .page-nav { width: auto; max-width: none; flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(50% - 50vw); padding: 0 calc(50vw - 50%); gap: 0; background: #fff; border-bottom: 1px solid #e2e8f0; border-radius: 0; }
  .page-tab { flex: none; min-height: 3.25rem; padding: 0 1rem; border-radius: 0; color: #475569; font-size: 1.05rem; border-bottom: 2px solid transparent; }
  .page-tab:hover { background: #f8fafc; }
  .page-tab[aria-current="page"] { background: transparent; box-shadow: none; color: #0f172a; font-weight: 700; border-bottom-color: #0f172a; }
}

/* 銷售結帳：左側加入商品、右側訂單摘要（桌面兩欄；窄螢幕自動改為一欄） */
.sale-page { --sale-ink: #0f172a; --sale-muted: #64748b; --sale-line: #e2e8f0; --sale-soft: #f8fafc; --sale-accent: #1e3a8a; color: var(--sale-ink); }
.sale-heading { align-items: flex-end; margin-bottom: 1rem; }
.sale-heading h2 { margin: 0; font-size: 1.5rem; }
.sale-heading .sale-hint { max-width: 26rem; text-align: right; }
.sale-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(22rem, .85fr); gap: 1.25rem; align-items: start; }
.sale-page .panel { border: 1px solid var(--sale-line); border-radius: 12px; box-shadow: 0 1px 2px #0f172a0a, 0 8px 24px #0f172a08; padding: 1.4rem; }
.sale-step { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; font-size: 1.05rem; }
.sale-step-number { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--sale-ink); color: #fff; font-size: .8rem; font-weight: 800; }
.sale-page .field label { color: #334155; font-size: .85rem; }
.sale-page input, .sale-page select { min-height: 2.75rem; border-color: #cbd5e1; border-radius: 8px; }
.sale-page small { color: var(--sale-muted); font-size: .8rem; }
.sale-page .sale-hint { color: var(--sale-muted); font-size: .85rem; margin: .5rem 0 0; }
.sale-page .sale-scanner { grid-template-columns: minmax(0, 1fr) 6rem auto; padding: 1rem; border: 1px solid var(--sale-line); border-radius: 10px; background: var(--sale-soft); }
.sale-page #sale-barcode { min-height: 3.1rem; font-size: 1.05rem; border-width: 2px; }
.sale-page #sale-barcode:focus { border-color: var(--sale-accent); box-shadow: 0 0 0 4px #1e3a8a1f; }
.sale-page .sale-scanner button { min-height: 3.1rem; min-width: 5.5rem; }
.sale-page #sale-item-info { margin-top: .75rem; }
.sale-page .sale-picker { margin: 1.25rem 0 0; padding: 1rem; border: 1px solid var(--sale-line); border-radius: 10px; }
.sale-page .sale-picker legend { color: #334155; font-size: .85rem; }
.sale-picker-actions { display: grid; grid-template-columns: 8rem auto; gap: .75rem; align-items: end; }
.sale-picker-actions .field { margin-bottom: 0; }
.sale-picker-actions button { min-height: 2.75rem; justify-self: start; }
.sale-page button { border-radius: 8px; font-weight: 700; }
.sale-page button:not(.secondary):not(.danger) { background: var(--brand); box-shadow: none; }
.sale-page button:not(.secondary):not(.danger):hover { background: var(--brand-dark); }
.sale-page button.secondary { background: #fff; border: 1px solid #cbd5e1; color: var(--sale-ink); }
.sale-page button.secondary:hover { background: var(--sale-soft); }
.sale-page button:disabled, .sale-page button.secondary:disabled { background: #f1f5f9; border-color: #e2e8f0; color: #94a3b8; }
.sale-summary { position: sticky; top: 1rem; }
.sale-page .sale-cart-wrap { margin: 0 0 1.1rem; border: 1px solid var(--sale-line); border-radius: 10px; box-shadow: none; max-height: 22rem; overflow-y: auto; }
.sale-page .sale-cart-wrap table { min-width: 0; font-variant-numeric: tabular-nums; }
.sale-page .sale-cart-wrap th { background: var(--sale-soft); color: var(--sale-muted); font-size: .75rem; padding: .6rem .7rem; }
.sale-page .sale-cart-wrap td { padding: .7rem; border-bottom-color: var(--sale-line); font-size: .92rem; vertical-align: middle; }
.sale-page .sale-cart-wrap .num, #sale-cart td:nth-child(2), #sale-cart td:nth-child(3), #sale-cart td:nth-child(4) { text-align: right; white-space: nowrap; }
#sale-cart td:nth-child(4) { font-weight: 700; }
#sale-cart td:first-child { overflow-wrap: anywhere; font-weight: 600; }
#sale-cart .sale-serials { display: block; overflow-wrap: normal; word-break: keep-all; margin-top: .2rem; color: var(--sale-muted); font-size: .78rem; font-weight: 400; }
#sale-cart tr:last-child td { border-bottom: 0; }
#sale-cart td.empty { padding: 2.25rem 1rem; color: var(--sale-muted); text-align: center; }
#sale-cart td:last-child { width: 1%; white-space: nowrap; }
#sale-cart button.danger { min-height: auto; margin: 0; padding: .25rem .4rem; background: transparent; box-shadow: none; color: #b91c1c; font-size: .82rem; font-weight: 600; }
#sale-cart button.danger:hover { background: #fef2f2; }
.sale-page .sale-customer { max-width: none; margin-top: 0; }
.sale-page .sale-checkout { display: grid; justify-content: stretch; align-items: stretch; gap: .9rem; margin-top: 1.1rem; padding: 1.1rem 0 0; border: 0; border-top: 1px dashed #cbd5e1; border-radius: 0; background: transparent; }
.sale-total { display: flex; align-items: baseline; justify-content: space-between; color: var(--sale-muted); font-weight: 700; }
.sale-total strong { color: var(--sale-ink); font-size: 2rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sale-page .sale-checkout button { width: 100%; min-height: 3.25rem; font-size: 1.05rem; }
@media (max-width: 960px) { .sale-layout { grid-template-columns: 1fr; } .sale-summary { position: static; } .sale-heading { align-items: stretch; flex-direction: column; } .sale-heading .sale-hint { text-align: left; } }
@media (max-width: 700px) { .sale-page .sale-scanner, .sale-picker-actions { grid-template-columns: 1fr; } }
/* 銷售頁：企業風格細節 */
.sale-page { margin-top: 1.5rem; }
.sale-page .eyebrow { display: none; }
.sale-heading h2 { font-size: 1.35rem; }
.sale-page .panel { border-radius: 8px; box-shadow: none; border-color: #e2e8f0; }
.sale-step { padding-bottom: .9rem; border-bottom: 1px solid #e2e8f0; font-size: .95rem; text-transform: none; }
.sale-step-number { border-radius: 4px; width: 1.4rem; height: 1.4rem; font-size: .75rem; }
.sale-page input, .sale-page select, .sale-page button, .sale-page .sale-scanner, .sale-page .sale-picker, .sale-page .sale-cart-wrap { border-radius: 6px; }
.sale-page .sale-scanner { background: #fff; }
.sale-page .sale-cart-wrap th { text-transform: none; letter-spacing: .02em; }
.sale-page .sale-checkout { border-top-style: solid; }
.sale-total strong { font-size: 1.75rem; }
/* 序號管理：品項總覽與序號彈出視窗 */
.serial-overview-title { margin: 1.5rem 0 .75rem; padding-top: 1.25rem; border-top: 1px solid #e2e8f0; }
.serial-overview-table td:nth-child(n+3):nth-child(-n+6), .serial-overview-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.serial-overview-table td:last-child { width: 1%; white-space: nowrap; }
dialog.serial-dialog { width: min(900px, calc(100% - 2rem)); max-height: min(85vh, 860px); padding: 1.25rem 1.4rem; }
.serial-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.serial-dialog-head h2 { margin: 0; font-size: 1.2rem; }
.serial-dialog-table { max-height: 55vh; overflow-y: auto; box-shadow: none; }
.serial-dialog-table table { min-width: 0; }
/* 序號表底部：筆數與「顯示更多」 */
.serial-list-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; color: #64748b; font-size: .9rem; }
.serial-list-footer button { min-height: 2.4rem; }
/* 品項庫存：分類按鈕 */
.category-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.category-tab { min-height: 2.5rem; padding: .4rem 1rem; gap: .5rem; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; box-shadow: none; color: #334155; font-weight: 600; }
.category-tab:hover { background: #f1f5f9; box-shadow: none; }
.category-tab[aria-pressed="true"] { border-color: #0f172a; background: #0f172a; color: #fff; }
.category-tab-low { padding: .05rem .45rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .75rem; font-weight: 700; }

/* 分紅管理 */
.bonus-fieldset { margin: .75rem 0; padding: .75rem; border: 1px solid var(--line); border-radius: 8px; }
.check-list { display: grid; gap: .35rem; max-height: 14rem; overflow-y: auto; }
.check-item { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 400; cursor: pointer; }
.check-item input[type="checkbox"] { flex: none; width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; padding: 0; }
.staff-roles { display: grid; gap: .5rem; margin: .75rem 0; padding: .75rem; border: 1px solid var(--line); border-radius: 8px; }
.staff-roles .check-item { flex-wrap: wrap; font-weight: 700; }
.staff-roles .check-item small { flex-basis: 100%; margin-left: 1.6rem; color: #64748b; font-weight: 400; }
.bonus-costs-wrap { max-height: 22rem; overflow-y: auto; }
.bonus-page .warning { color: #b45309; font-weight: 700; }
.bonus-report { margin-top: 1.25rem; }
.bonus-report .table-wrap + .table-wrap { margin-top: 1rem; }

/* 營運總覽的店長區塊（較上月、趨勢、熱銷） */
.monthly-summary .dashboard-change { margin-top: .35rem; }
.dashboard-change { font-weight: 700; }
.dashboard-change[data-trend="up"] { color: #15803d; }
.dashboard-change[data-trend="down"] { color: var(--danger); }
.monthly-total-card .dashboard-change { color: #e2e8f0; }
.monthly-total-card .dashboard-change[data-trend="up"] { color: #86efac; }
.monthly-total-card .dashboard-change[data-trend="down"] { color: #fca5a5; }
.dashboard-trend-panel { margin-bottom: 1.5rem; }
.dashboard-trend { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; align-items: end; min-height: 13rem; }
.dashboard-bar-column { display: grid; grid-template-rows: auto 10rem auto; gap: .35rem; text-align: center; min-width: 0; }
.dashboard-bar-value { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.dashboard-bar-track { display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid #cbd5e1; }
.dashboard-bar { width: min(3rem, 70%); min-height: 2px; background: #94a3b8; border-radius: 6px 6px 0 0; }
.dashboard-bar-column.current .dashboard-bar { background: var(--brand); }
.dashboard-bar-column.current .dashboard-bar-label, .dashboard-bar-column.current .dashboard-bar-value { color: var(--brand-dark); font-weight: 800; }
.dashboard-bar-label { color: var(--muted); font-size: .85rem; }
.dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.5rem; align-items: start; }
.dashboard-grid .panel h3 { margin-top: 0; }
.dashboard-note { margin: -.4rem 0 .5rem; color: var(--muted); font-size: .85rem; }
.dashboard-table { min-width: 0; }
.dashboard-table td:nth-child(n+3), .dashboard-table th:nth-child(n+3) { text-align: right; }
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } }
.dashboard-hbar { display: grid; gap: .65rem; }
.dashboard-hbar-row { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.dashboard-hbar-name { overflow-wrap: anywhere; font-weight: 700; font-size: .9rem; }
.dashboard-hbar-track { height: .9rem; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.dashboard-hbar-bar { height: 100%; min-width: 2px; background: var(--brand); border-radius: 999px; }
.dashboard-hbar-value { color: var(--muted); font-size: .85rem; white-space: nowrap; }
#monthly-performance-panel, #monthly-months-panel { margin-bottom: 1.5rem; }
#monthly-months-list tr.current { background: #eff6ff; }
.monthly-detail-heading { align-items: center; }
.monthly-detail-heading .monthly-detail-title { margin: 0 0 .75rem; }
@media (max-width: 700px) { .dashboard-hbar-row { grid-template-columns: 1fr auto; } .dashboard-hbar-track { grid-column: 1 / -1; grid-row: 2; } }

/* ===== 2026-10 UI 審查修正（UI UX Pro Max） ===== */
/* 頁首：品牌小字至少 12px；右側放「匯出備份」與「登入者＋登出」，登出不再藏在頁面最底部。 */
.hero .eyebrow { font-size: .75rem; }
.hero-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 1rem; }
.hero .account-bar { margin: 0; gap: .6rem; color: #cbd5e1; font-size: .9rem; white-space: nowrap; }
.hero .account-bar button { min-height: 2.6rem; padding: .5rem 1.1rem; border: 1px solid #334155; border-radius: 6px; background: transparent; box-shadow: none; color: #e2e8f0; font-size: 1rem; }
.hero .account-bar button:hover { background: #1e293b; }
@media (max-width: 700px) { .hero-actions { width: 100%; justify-content: space-between; } .hero .account-bar { width: 100%; justify-content: space-between; } }
/* 大字金額：「NT$」縮小，數字不會在手機上被擠到第二行。 */
.money-figure { white-space: nowrap; }
.card .money-figure span { display: inline; color: inherit; }
.money-figure .currency { margin-right: .1em; font-size: .55em; font-weight: 700; }

/* 表頭一律不換行，避免「姓名」「狀態」被擠成直排。 */
th { white-space: nowrap; }

/* 「左表單＋右清單」頁面：表單固定寬，清單吃剩下空間；minmax(0, …) 讓清單不會撐破頁面。 */
@media (min-width: 701px) {
  .app-page[data-page="suppliers"].forms, .app-page[data-page="customers"].forms, .warranty-page > .grid.forms { grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr); }
  .app-page[data-page="suppliers"] table, .app-page[data-page="customers"] table, .warranty-page table { min-width: 0; }
}
/* 短欄位不換行（編號、姓名、電話、狀態、日期），長文字（地址、備註）才換行。 */
#supplier-list td:nth-child(3), #supplier-list td:nth-child(5), #supplier-list td:nth-child(7), #customer-list td:nth-child(-n+3), #customer-list td:nth-child(7), #warranty-list td:nth-child(1), #warranty-list td:nth-child(n+4) { white-space: nowrap; }
#customer-list td:nth-child(4) { word-break: keep-all; }
.app-page[data-page="customers"] :is(th, td) { padding: .7rem .55rem; }
#customer-list td:nth-child(5) { min-width: 8rem; }
/* 兩欄小欄位（例如購買日期／到期日期）可縮小，不會把日期框推出卡片外。 */
@media (min-width: 701px) { .split-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.split-fields input { min-width: 0; }

/* 列內的危險按鈕（刪除／停用）平常用白底紅字外框，不再一整排紅色；真正刪除前仍有確認視窗。 */
.table-wrap button.danger { border: 1px solid #fca5a5; background: #fff; box-shadow: none; color: var(--danger); }
.table-wrap button.danger:hover { border-color: var(--danger); background: #fef2f2; }

/* 數字欄（金額、數量）靠右對齊＋等寬數字，上下比較位數更容易。手機卡片版不套用。 */
@media (min-width: 701px) {
  :is(
    table:has(#item-list) :is(th, td):is(:nth-child(5), :nth-child(6), :nth-child(7)),
    table:has(#purchase-lines) :is(th, td):nth-child(5),
    table:has(#purchase-list) :is(th, td):nth-child(3),
    .purchase-detail-table :is(th, td):is(:nth-child(4), :nth-child(5), :nth-child(6)),
    table:has(#quotation-lines) :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9)),
    table:has(#quotation-list) :is(th, td):nth-child(5),
    table:has(#warranty-replacement-list) :is(th, td):nth-child(3),
    table:has(#repair-lines) :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4)),
    table:has(#repair-list) :is(th, td):nth-child(5),
    table:has(#bonus-costs) :is(th, td):nth-child(3),
    table:has(#bonus-summary) :is(th, td):is(:nth-child(3), :nth-child(4)),
    table:has(#bonus-detail) :is(th, td):is(:nth-child(5), :nth-child(6)),
    table:has(#monthly-performance-list) :is(th, td):is(:nth-child(2), :nth-child(3)),
    table:has(#monthly-months-list) :is(th, td):nth-child(2),
    table:has(#monthly-sales-list) :is(th, td):is(:nth-child(4), :nth-child(5), :nth-child(6))
  ) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
}

/* ===== 2026-10 UI 審查修正（第二批） ===== */
/* 低庫存文字標籤（與分類按鈕上的「低庫存 n」同一種樣式）。 */
.low-badge { display: block; width: fit-content; margin: .2rem 0 0 auto; padding: .05rem .4rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .72rem; font-weight: 700; }
/* 標籤放在數字下一行，庫存欄不會變寬；分類（機車／零件）不換行。 */
#item-list td:nth-child(2) { white-space: nowrap; }
/* 區塊間距：統計卡片與下方提示、建立帳號按鈕與帳號表格不再貼在一起。 */
.app-page[data-page="list"] .cards + .grid { margin-top: 1rem; }
form:has(#staff-create-submit) + .table-wrap, .table-wrap + #staff-link-form { margin-top: 1.25rem; }
/* 工時費率只是一個數字，輸入框不需要橫跨整頁。 */
#shop-hourly-rate { max-width: 12rem; }
/* 空表格提示置中、淡色。 */
#quotation-lines .empty, #repair-lines .empty { padding: 1rem .8rem; color: var(--muted); text-align: center; }
@media (max-width: 700px) {
  /* 手機只開放營運總覽，單一分頁按鈕看起來像能按卻沒作用，所以隱藏。 */
  .page-nav { display: none; }
  /* 長條圖數值改顯示短格式（12.7萬）。 */
  .dashboard-bar-value { font-size: 0; white-space: nowrap; }
  .dashboard-bar-value::after { content: attr(data-short); font-size: .75rem; }
}

/* ===== 2026-10 品牌：電小二 Volt Buddy ===== */
/* 頁首：深色底用白字版標誌，右邊接系統名稱；中間一條細線分隔。 */
.hero-brand { display: flex; align-items: center; gap: 1rem; }
.hero-logo { display: block; width: auto; height: 3.25rem; flex: none; }
.hero-brand > div { padding-left: 1rem; border-left: 1px solid #334155; }
/* 登入頁：淺色底用深色字版標誌。 */
.auth-logo { display: block; width: auto; height: 4.5rem; margin-bottom: .75rem; }
@media (max-width: 700px) {
  .hero-logo { height: 2.5rem; }
  .hero-brand { gap: .75rem; }
  .hero-brand > div { padding-left: .75rem; }
}

/* ===== 售價加成 ===== */
.price-lock { margin: -.25rem 0 .25rem; }
.price-hint { display: block; min-height: 1.2em; margin-bottom: .75rem; color: var(--muted); font-size: .85rem; }
.markup-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.markup-grid input { max-width: 9rem; }
@media (max-width: 900px) { .markup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== 特惠組合 ===== */
.promotions-page .panel + .panel { margin-top: 1rem; }
.promo-head-fields { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: .75rem; }
.promo-items { margin: .5rem 0 1rem; padding: .75rem 1rem 1rem; border: 1px solid var(--line); border-radius: .6rem; }
.promo-item-entry { display: grid; grid-template-columns: minmax(0, 1fr) 7rem auto; gap: .75rem; align-items: end; margin-bottom: .75rem; }
.promo-item-entry .field { margin-bottom: 0; }
.promo-summary { margin: .75rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.promo-summary.warning { color: var(--alert); }
#promo-lines .empty, #promo-list .empty { padding: 1rem .8rem; color: var(--muted); text-align: center; }
.promo-state { font-weight: 700; white-space: nowrap; }
.promo-state-active { color: #15803d; }
.promo-state-upcoming { color: var(--brand); }
.promo-state-expired, .promo-state-inactive { color: var(--muted); }
#promo-list td:nth-child(2), #promo-list td:nth-child(n+5):nth-child(-n+8) { white-space: nowrap; }
#promo-list td:first-child { min-width: 9rem; }
/* 銷售結帳的特惠組合區：偵測提示（藍）、已套用（綠）、手動挑選。 */
.sale-promos { display: grid; gap: .6rem; margin: 1rem 0; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .7rem; }
.sale-promo-suggestions, .sale-promo-applied { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.sale-promo-suggestion, .sale-promo-applied-item { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: .55rem; }
.sale-promo-suggestion { border: 1px solid #bfdbfe; background: #eff6ff; color: #1e3a8a; }
.sale-promo-applied-item { border: 1px solid #bbf7d0; background: #f0fdf4; color: #14532d; }
.sale-promo-suggestion span, .sale-promo-applied-item span { flex: 1; min-width: 0; }
.sale-promo-applied-item strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sale-promo-suggestion button, .sale-promo-applied-item button { flex: none; min-height: 2.25rem; padding: .35rem .9rem; }
.sale-promo-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: end; }
.sale-promo-picker .field { margin-bottom: 0; }
.promo-hint:empty { display: none; }
/* 優惠代碼設定 */
.coupon-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.coupon-fields small { color: var(--muted); font-size: .8rem; }
#coupon-list td.coupon-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
#coupon-list td:nth-child(3), #coupon-list td:nth-child(4), #coupon-list td:nth-child(6), #coupon-list td:nth-child(7) { white-space: nowrap; }
#coupon-list .empty { padding: 1rem .8rem; color: var(--muted); text-align: center; }
@media (min-width: 701px) { table:has(#coupon-list) :is(th, td):nth-child(7) { text-align: right; font-variant-numeric: tabular-nums; } }
@media (max-width: 900px) { .coupon-fields { grid-template-columns: 1fr 1fr; } }
#sale-promo-coupon-code { text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.promo-hint.error { color: var(--danger); }
.sale-breakdown { display: grid; gap: .25rem; margin: 0; color: var(--sale-muted, var(--muted)); font-variant-numeric: tabular-nums; }
.sale-breakdown div { display: flex; justify-content: space-between; }
.sale-breakdown dd { margin: 0; }
.sale-breakdown div:not(:first-child) dd { color: #15803d; font-weight: 700; }
.sale-line-discount { display: block; color: #15803d; font-size: .8rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 700px) { .sale-promo-picker { grid-template-columns: 1fr; } .sale-promo-suggestion, .sale-promo-applied-item { flex-wrap: wrap; } }
@media (min-width: 701px) {
  table:has(#promo-lines) :is(th, td):is(:nth-child(3), :nth-child(4)),
  table:has(#promo-list) :is(th, td):is(:nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8)) { text-align: right; font-variant-numeric: tabular-nums; }
}
@media (max-width: 900px) { .promo-head-fields { grid-template-columns: 1fr 1fr; } }
/* 批次匯入品項（CSV） */
.item-import-panel { grid-column: 1 / -1; }
.import-guide { margin: .5rem 0 1rem; color: var(--muted); }
.import-guide summary { cursor: pointer; font-weight: 700; color: var(--brand); }
.import-guide ul { margin: .5rem 0 0; padding-left: 1.25rem; line-height: 1.7; }
.import-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.import-file { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.import-file input { width: auto; }
#item-import-rows tr.import-error { background: #fef2f2; }
#item-import-rows .import-state-error { color: var(--danger); font-weight: 700; }
#item-import-rows .import-state-ok { color: #15803d; font-weight: 700; }
@media (min-width: 701px) { table:has(#item-import-rows) :is(th, td):is(:nth-child(1), :nth-child(5), :nth-child(6), :nth-child(7)) { text-align: right; font-variant-numeric: tabular-nums; } }
#item-import-preview .form-actions { margin-top: 1rem; }