html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ===== SwanOne Phase 0 styles ===== */
.empty-layout { min-height: 100vh; display: grid; place-items: center;
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%); }
.login-wrap { width: 100%; max-width: 420px; padding: 1rem; }
.login-card { background: #fff; border-radius: 14px; padding: 2rem; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login-card .brand { display: flex; gap: .9rem; align-items: center; margin-bottom: 1.4rem; }
.login-card .brand-mark { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
    background: #2c5282; color: #fff; font-weight: 800; font-size: 1.2rem; }
.login-card h1 { font-size: 1.25rem; margin: 0; }
.login-card .tagline { margin: 0; color: #718096; font-size: .85rem; }
.login-card label { display: block; margin: .8rem 0 .3rem; font-size: .85rem; color: #4a5568; }
.login-card input { width: 100%; padding: .6rem .7rem; border: 1px solid #cbd5e0; border-radius: 8px; }
.login-card button { width: 100%; margin-top: 1.2rem; padding: .65rem; border: 0; border-radius: 8px;
    background: #2c5282; color: #fff; font-weight: 600; cursor: pointer; }
.login-card button:hover { background: #234065; }
.login-card .hint { margin-top: 1.2rem; font-size: .78rem; color: #718096; line-height: 1.6; }
.alert-error { background: #fed7d7; color: #742a2a; padding: .6rem .8rem; border-radius: 8px; margin-bottom: 1rem; }
.alert-info { background: #e6fffa; color: #234e52; padding: .6rem .8rem; border-radius: 8px; margin: 1rem 0; }
.alert-warn { background: #feebc8; color: #7b341e; padding: .6rem .8rem; border-radius: 8px; margin: 1rem 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.1rem 1.2rem; }
/* 卡片格線：數個區塊並排填滿寬度，避免內容全擠在左邊、右側留白又得往下捲。
   .full 讓該塊獨佔一整列（例如很長的網址欄）。 */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .8rem; align-items: start; }
.cardgrid .full { grid-column: 1 / -1; }
.card-h { margin: 0 0 .5rem; font-size: 1rem; }
/* 勾選項：點文字也能勾。原本只在 .form-row／.fgrid .f 底下才有樣式，卡片等其他版面也要能用 */
label.chk { display: inline-flex; gap: .45rem; align-items: center; }
label.chk input[type=checkbox], label.chk input[type=radio] { width: auto; margin: 0; }
.card-label { font-size: .8rem; color: #718096; }
.card-value { font-size: 1.5rem; font-weight: 700; color: #1a202c; margin: .2rem 0; }
.card-sub { font-size: .75rem; color: #a0aec0; }

.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid #edf2f7; }
.grid thead th { font-size: .78rem; color: #718096; text-transform: none; }
.grid tr.current { background: #ebf8ff; }
.grid tr.row-off td { color: #a0aec0; }
.grid tr.row-warn td { background: #fffaf0; }
.att-filter { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin: 1rem 0; }
.att-filter label { display: flex; flex-direction: column; font-size: .8rem; color: #4a5568; gap: .25rem; }
.att-filter select { padding: .4rem .6rem; border: 1px solid #cbd5e0; border-radius: 8px; min-width: 6rem; }
/* 可輸入篩選的下拉（combobox） */
.combo { position: relative; }
.combo-input { padding: .4rem .6rem; border: 1px solid #cbd5e0; border-radius: 8px; width: 14rem; }
.combo-input:focus { outline: none; border-color: #2c5282; }
.combo-list {
    position: absolute; top: calc(100% + .2rem); left: 0; z-index: 40; width: 16rem; max-height: 15rem;
    overflow-y: auto; background: #fff; border: 1px solid #cbd5e0; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
/* StdCombo：表單內通用的可輸入篩選下拉（寬度跟隨欄位） */
.std-combo { position: relative; width: 100%; }
.std-combo .combo-input { width: 100%; box-sizing: border-box; padding: .4rem .5rem; border: 1px solid #cbd5e0; border-radius: 6px; background: #fff; }
.std-combo.disabled .combo-input { background: #f7fafc; color: #a0aec0; }
.std-combo .combo-list { max-height: 16rem; width: max(100%, 20rem); }
/* 明細表格內的可搜尋下拉：容器不裁切，清單才能完整浮出（明細表不需橫向捲軸） */
.stdscroll.no-clip { overflow: visible; }
.std-combo .combo-input { padding-right: 1.8rem; }
.std-combo .combo-arrow { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #4a5568; cursor: pointer; padding: 0 .3rem; font-size: .9rem; line-height: 1; }
.std-combo .combo-arrow:disabled { color: #cbd5e0; cursor: default; }
/* 出貨單狀態：已出貨（已列印） */
.badge-done { display:inline-block; font-size:.75rem; background:#bee3f8; color:#2a4365; border-radius:999px; padding:.1rem .55rem; font-weight:600; }
.combo-item { padding: .45rem .6rem; cursor: pointer; font-size: .9rem; }
.combo-item:hover { background: #ebf8ff; }
.combo-item.sel { background: #2c5282; color: #fff; }
/* 鍵盤游標所在的那一列（↑↓ 移動）。與 .sel（目前選中的）分開，兩者可能不是同一列 */
.combo-item.active { background: #bee3f8; }
.combo-item.sel.active { background: #2b6cb0; color: #fff; }
.combo-empty { padding: .5rem .6rem; color: #a0aec0; font-size: .85rem; }
.form-row label.chk { display: inline-flex; gap: .4rem; align-items: center; }
.badge { background: #2c5282; color: #fff; border-radius: 6px; padding: .1rem .5rem; font-size: .75rem; }
.muted { color: #718096; font-size: .85rem; }
.inline { display: inline; }
.link-btn { background: none; border: 0; color: #2c5282; cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.btn { background: #2c5282; color: #fff; border: 0; border-radius: 6px; padding: .35rem .8rem; cursor: pointer; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.top-row { gap: 1rem; align-items: center; }
.top-tenant { font-weight: 600; color: #2c5282; }
.top-user { color: #4a5568; }
.top-manual { color: #2c5282; text-decoration: none; font-size: .9rem; }
.top-manual:hover { text-decoration: underline; }

/* ===== 功能說明（PageHelp）ⓘ 圖示 + modal ===== */
.page-help-btn { border: none; background: none; color: #3182ce; font-size: 1rem; line-height: 1; cursor: pointer; vertical-align: middle; margin-left: .4rem; padding: 0; font-weight: 400; }
.page-help-btn:hover { color: #2b6cb0; }
.page-help-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1080; font-size: .95rem; font-weight: 400; line-height: 1.6; color: #2d3748; text-align: left; }
/* 桌面約佔畫面 2/3 寬、手機近全寬；段落留行距與空行，長說明較好讀 */
.page-help-modal { background: #fff; width: min(1100px, 66vw); max-height: 84vh; overflow-y: auto; border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
@media (max-width: 900px) { .page-help-modal { width: 94vw; } }
.page-help-head { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid #edf2f7; }
.page-help-title { font-weight: 700; }
.page-help-close { border: none; background: none; font-size: 1rem; cursor: pointer; color: #718096; }
.page-help-body { padding: 1.1rem 1.4rem 1.3rem; font-size: .95rem; line-height: 1.75; }
.page-help-body p { margin-bottom: .7rem; white-space: pre-line; }
.page-help-body p.mb0 { margin-bottom: 0; }
.page-help-body p.ph-p { margin: 0 0 .55rem; white-space: normal; }
.page-help-body h4.ph-h { font-size: .92rem; font-weight: 700; color: #2c5282; margin: .95rem 0 .35rem; padding-left: .5rem; border-left: 3px solid #90cdf4; }
.page-help-body h4.ph-h:first-child { margin-top: 0; }
.page-help-body .ph-list { margin: .1rem 0 .7rem 1.35rem; padding: 0; }
.page-help-body .ph-list li { margin: .18rem 0; }
.page-help-body .ph-logic { background: #f7fafc; border: 1px dashed #cbd5e0; border-radius: 8px; padding: .6rem .8rem; font-size: .86rem; color: #4a5568; }
.page-help-label { font-size: .78rem; color: #a0aec0; margin: .8rem 0 .3rem; }
.page-help-label:first-child { margin-top: 0; }
.page-help-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .5rem; }
.page-help-flow .flow-chip { background: #ebf4ff; border: 1px solid #c3dafe; color: #2c5282; border-radius: 999px; padding: .2rem .7rem; font-size: .82rem; white-space: nowrap; }
.page-help-flow .flow-arrow { color: #a0aec0; }

/* ===== 使用手冊 ===== */
.manual { max-width: 900px; }
.manual-hero { margin-bottom: 1.2rem; }
.manual-hero h1 { margin-bottom: .4rem; }
.manual-hero p { color: #4a5568; }
.manual-toc { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.manual-toc a { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border: 1px solid #e2e8f0; border-radius: 999px; color: #2c5282; text-decoration: none; font-size: .85rem; }
.manual-toc a:hover { background: #ebf8ff; }
.manual-toc a span { background: #2c5282; color: #fff; width: 1.3rem; height: 1.3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; }
.manual-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.2rem 1.4rem; margin-bottom: 1rem; }
.manual-card h4 { margin: 0 0 .8rem; display: flex; align-items: center; gap: .5rem; }
.manual-card h4::before { content: attr(data-no); background: #2c5282; color: #fff; padding: .1rem .55rem; border-radius: 6px; font-size: .85rem; }
.manual-card p { color: #2d3748; margin-bottom: .6rem; }
.manual-card ul, .manual-card ol { margin: 0 0 .3rem 1.2rem; }
.manual-card li { margin-bottom: .35rem; color: #2d3748; }
.manual-card .ic { color: #3182ce; }
.manual .flow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .3rem 0 .9rem; }
.manual .flow span { background: #ebf4ff; border: 1px solid #c3dafe; color: #2c5282; border-radius: 999px; padding: .25rem .8rem; font-size: .85rem; }
.manual .flow i { color: #a0aec0; font-style: normal; }
.manual-dl dt { font-weight: 700; color: #2c5282; margin-top: .5rem; }
.manual-dl dd { margin: 0 0 .3rem; color: #2d3748; }

/* 修改密碼 */
.pw-wrap { display: flex; justify-content: center; padding: 2rem 1rem; }
.pw-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.6rem 1.8rem; box-shadow: 0 2px 8px rgba(0,0,0,.08); width: min(420px, 100%); }
.pw-card h1 { margin: 0 0 1rem; font-size: 1.4rem; }
.pw-form { display: flex; flex-direction: column; gap: .3rem; }
.pw-form label { font-size: .85rem; color: #4a5568; margin-top: .6rem; }
.pw-form input { padding: .55rem .7rem; border: 1px solid #cbd5e0; border-radius: 8px; }
.pw-form button { margin-top: 1.1rem; }

/* 我的薪資單 */
.payslip { max-width: 680px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.3rem 1.5rem; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.payslip-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #2c5282; padding-bottom: .8rem; margin-bottom: 1rem; }
.ps-name { font-size: 1.3rem; font-weight: 700; }
.ps-period { font-size: 1.1rem; font-weight: 600; color: #2c5282; }
.ps-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 560px) { .ps-cols { grid-template-columns: 1fr; } }
.ps-box h4 { margin: 0 0 .5rem; font-size: .95rem; color: #2c5282; border-bottom: 1px solid #edf2f7; padding-bottom: .3rem; }
.ps-row { display: flex; justify-content: space-between; padding: .25rem 0; font-size: .9rem; font-variant-numeric: tabular-nums; }
.ps-row span:last-child { font-weight: 500; }
.ps-total { border-top: 1px solid #cbd5e0; margin-top: .3rem; padding-top: .4rem; font-weight: 700; }
.ps-net { display: flex; justify-content: space-between; align-items: center; background: #2c5282; color: #fff; border-radius: 8px; padding: .7rem 1.1rem; margin: 1.1rem 0; font-size: 1.15rem; font-weight: 700; }
.ps-detail { border-top: 1px solid #edf2f7; padding-top: .8rem; }
.ps-detail h4 { margin: 0 0 .4rem; font-size: .9rem; color: #718096; }
.ps-detail .ps-row span:first-child { color: #718096; min-width: 3rem; }
.ps-detail .ps-row span:last-child { text-align: right; font-weight: 400; }

/* 員工設定：卡片欄位排列 + 多選 */
.edit-cols { display: flex; flex-direction: column; gap: 1rem; max-width: 760px; }
.form-row select.multi { width: 100%; padding: .3rem; border: 1px solid #cbd5e0; border-radius: 8px; }

/* ===== 組織圖（純 CSS box tree） ===== */
.org-scroll { overflow-x: auto; padding: 1rem .5rem 1.5rem; }
.org-tree { display: inline-block; min-width: 100%; }
.org-tree ul { display: flex; justify-content: center; padding-top: 20px; position: relative; margin: 0; list-style: none; }
.org-tree li { list-style: none; text-align: center; position: relative; padding: 20px 10px 0; }
/* 連接線 */
.org-tree li::before, .org-tree li::after {
    content: ''; position: absolute; top: 0; right: 50%;
    border-top: 2px solid #cbd5e0; width: 50%; height: 20px;
}
.org-tree li::after { right: auto; left: 50%; border-left: 2px solid #cbd5e0; }
.org-tree li:only-child::before, .org-tree li:only-child::after { display: none; }
.org-tree li:only-child { padding-top: 0; }
.org-tree li:first-child::before, .org-tree li:last-child::after { border: 0 none; }
.org-tree li:last-child::before { border-right: 2px solid #cbd5e0; border-radius: 0 6px 0 0; }
.org-tree li:first-child::after { border-radius: 6px 0 0 0; }
.org-tree ul ul::before {
    content: ''; position: absolute; top: 0; left: 50%;
    border-left: 2px solid #cbd5e0; width: 0; height: 20px;
}
.org-node {
    display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
    border: 1px solid #cbd5e0; border-radius: 8px; padding: .45rem .8rem; background: #fff;
    text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.06); min-width: 6rem; position: relative;
}
.org-node:hover { border-color: #2c5282; background: #f7fafc; }
.org-node.off { opacity: .55; }
.org-dept { font-size: .68rem; color: #718096; font-weight: 600; background: #edf2f7; border-radius: 4px; padding: 0 .3rem; }
.org-title { font-size: .74rem; color: #2c5282; font-weight: 700; }
.org-name { font-size: .9rem; color: #1a202c; font-weight: 500; }
.org-multi { position: absolute; top: -.4rem; right: -.3rem; color: #dd6b20; font-weight: 700; }

/* HR 單據唯讀明細（請假／加班檢視） */
.docview { display: flex; flex-direction: column; gap: .1rem; }
.dv-row { display: flex; gap: .6rem; padding: .45rem .2rem; border-bottom: 1px solid #edf2f7; font-size: .9rem; }
.dv-row > span:first-child { flex: 0 0 5.5rem; color: #718096; }
.dv-row > b { color: #1a202c; font-weight: 500; white-space: pre-line; }
.dv-doc { display: flex; gap: .6rem; padding: .5rem .2rem; }
.dv-doc > span:first-child { flex: 0 0 5.5rem; color: #718096; }
.dv-img { max-width: 100%; max-height: 460px; border: 1px solid #cbd5e0; border-radius: 8px; }
.line-table tr.row-invalid td { background: #fef2f2; }
/* 圖片裁切對話框（StdImageUpload / js/imgcrop.js） */
.imgcrop-ov { position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 12px; }
.imgcrop-box { background: #fff; border-radius: 10px; width: min(960px, 100%); max-height: 96vh; display: flex; flex-direction: column; overflow: hidden; }
.imgcrop-head { padding: .6rem .9rem; font-weight: 600; border-bottom: 1px solid #e2e8f0; }
.imgcrop-head .muted { font-weight: 400; font-size: .8rem; margin-left: .5rem; }
.imgcrop-body { flex: 1; min-height: 240px; max-height: 70vh; background: #111; }
.imgcrop-body img { display: block; max-width: 100%; }
.imgcrop-foot { display: flex; gap: .4rem; flex-wrap: wrap; padding: .6rem .9rem; border-top: 1px solid #e2e8f0; }
.swancam-body { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.swancam-video { display: block; margin: 0 auto; max-width: 100%; max-height: 70vh; background: #111; }
.swancam-video[hidden] { display: none; }
.swancam-msg { color: #fff; text-align: center; padding: 1.6rem; font-size: .95rem; line-height: 1.8; max-width: 32rem; }
.swancam-msg[hidden] { display: none; }
.swancam-pick { margin-left: .5rem; font-size: .8rem; padding: .15rem .35rem; border: 1px solid #cbd5e0; border-radius: 6px; max-width: 16rem; vertical-align: middle; }
.swancam-pick[hidden] { display: none; }
.swancam-strip { display: flex; gap: .4rem; overflow-x: auto; padding: .5rem .9rem; background: #f7fafc; border-top: 1px solid #e2e8f0; }
.swancam-strip[hidden] { display: none; }
.swancam-thumb { position: relative; flex: 0 0 auto; }
.swancam-thumb img { height: 56px; width: auto; border: 1px solid #cbd5e0; border-radius: 4px; display: block; }
.swancam-del { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; line-height: 16px; text-align: center;
    border: 0; border-radius: 50%; background: #d60000; color: #fff; font-size: 11px; cursor: pointer; padding: 0; }
.swancam-count { font-size: .82rem; font-variant-numeric: tabular-nums; }
.swancam-crop { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: #4a5568; cursor: pointer; }
.std-upload { display: inline-flex; align-items: center; flex-wrap: wrap; }
/* 零用金帳戶卡 */
.pc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; margin-top: .6rem; }
.pc-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: .7rem .9rem; background: #fff; }
.pc-card.off { opacity: .6; }
.pc-card .pc-name { font-weight: 600; }
.pc-card .pc-bal { font-size: 1.5rem; font-weight: 700; margin: .15rem 0; }
.pc-card .pc-bal.neg { color: #dc2626; }
.pc-card .pc-meta { font-size: .78rem; color: #718096; }
.pc-card .pc-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; align-items: center; }
.pc-card .pc-actions .btn-secondary { padding: .22rem .6rem; font-size: .8rem; }
.attach-thumb { max-width: 140px; max-height: 140px; border: 1px solid #cbd5e0; border-radius: 8px; margin-top: .3rem; display: block; }
.att-ok { color: #2f855a; }
.att-bad { color: #c53030; font-weight: 600; }
/* 打卡日彙總 */
.att-daily .btn-link { background:none; border:none; cursor:pointer; padding:0; color:#006bb7; font-size:.82rem; }
.att-detail-row > td { background:#f7fafc; padding:.35rem .6rem; }
.att-detail { margin:.2rem 0; background:#fff; }
.att-detail th, .att-detail td { font-size:.82rem; padding:.3rem .5rem; }
.badge-ok { display:inline-block; font-size:.75rem; background:#c6f6d5; color:#22543d; border-radius:999px; padding:.1rem .55rem; font-weight:600; }
.badge-incomplete { display:inline-block; font-size:.75rem; background:#fed7d7; color:#c53030; border-radius:999px; padding:.1rem .55rem; font-weight:600; cursor:help; }
/* 事後補單（請假／外出事情過了才補申請）：橘色，比錯誤輕、但要看得見 */
.badge-late { display:inline-block; font-size:.72rem; background:#feebc8; color:#9c4221; border-radius:999px; padding:.05rem .5rem; font-weight:600; cursor:help; white-space:nowrap; }
.tag-svc { display:inline-block; margin-top:.3rem; font-size:.75rem; background:#e9d8fd; color:#6b46c1; border-radius:999px; padding:.1rem .6rem; }
.tag-stk { display:inline-block; margin-top:.3rem; font-size:.75rem; background:#bee3f8; color:#2c5282; border-radius:999px; padding:.1rem .6rem; }
.sl-remain { background: #fff5f5; border: 1px solid #feb2b2; color: #c53030; border-radius: 8px; padding: .5rem .8rem; margin-bottom: .7rem; font-size: .9rem; }
.sl-remain b { color: #9b2c2c; }

/* 員工薪資單（重現舊系統） */
.payslip { max-width: 900px; margin: .2rem auto; color: #1a202c; font-size: 13px; }
.ps-title { text-align: center; border-bottom: 2px solid #1a202c; padding-bottom: .3rem; margin-bottom: .6rem; }
.ps-title .ps-co { font-size: 12px; color: #4a5568; }
.ps-title h2 { margin: .2rem 0 0; font-size: 15px; letter-spacing: .12rem; }
.ps-grid { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.ps-grid th, .ps-grid td { border: 1px solid #718096; padding: .3rem .5rem; font-size: 12px; }
.ps-grid th { background: #edf2f7; text-align: left; white-space: nowrap; font-weight: 600; width: 1%; }
.ps-grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ps-grid td.neg { color: #c53030; }
.ps-grid td.big { font-size: 16px; }
.ps-grid tr.ps-final th { background: #2c5282; color: #fff; }
.ps-sl { padding: .25rem .1rem; font-size: 12px; margin-bottom: .4rem; color: #2d3748; }
.ps-sl b { color: #c53030; }
.ps-log-title { font-weight: 700; margin: .4rem 0 .2rem; border-left: 4px solid #2c5282; padding-left: .4rem; }
.ps-log { width: 100%; border-collapse: collapse; }
.ps-log th, .ps-log td { border: 1px solid #cbd5e0; padding: .15rem .4rem; font-size: 11.5px; text-align: center; }
.ps-log th { background: #edf2f7; }
.ps-log td.neg { color: #c53030; font-weight: 600; }
.ps-log td.pos { color: #2f855a; font-weight: 600; }
.ps-log-note { font-size: 10.5px; color: #718096; margin-top: .3rem; }

/* 出貨行事曆 */
.cal-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin: .6rem 0; }
.cal-nav { display: flex; align-items: center; gap: .4rem; }
.cal-title { font-size: 1.1rem; margin-left: .3rem; }
.cal-legend { display: flex; align-items: center; gap: .6rem; }
.badge-overdue { background: #fed7d7; color: #c53030; border-radius: 999px; padding: .2rem .7rem; font-weight: 600; font-size: .85rem; }
.badge-month { background: #bee3f8; color: #2c5282; border-radius: 999px; padding: .2rem .7rem; font-weight: 600; font-size: .85rem; }
.overdue-box { border: 1px solid #feb2b2; border-radius: 8px; padding: .4rem .6rem; margin-bottom: .8rem; background: #fffafa; }
.overdue-box summary { cursor: pointer; font-weight: 600; color: #c53030; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #cbd5e0; border: 1px solid #cbd5e0; border-radius: 8px; overflow: hidden; }
.cal-dow { background: #2c5282; color: #fff; text-align: center; padding: .35rem 0; font-size: .82rem; font-weight: 600; }
.cal-cell { background: #fff; min-height: 92px; padding: .25rem; display: flex; flex-direction: column; gap: .12rem; }
.cal-cell.off { background: #f7fafc; }
.cal-cell.today { background: #ebf8ff; outline: 2px solid #4299e1; outline-offset: -2px; }
.cal-daynum { font-size: .78rem; color: #718096; font-weight: 600; }
.cal-cell.off .cal-daynum { color: #cbd5e0; }
.cal-chip { display: block; font-size: .74rem; background: #ebf8ff; color: #2b6cb0; border-radius: 4px; padding: .08rem .3rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip:hover { background: #bee3f8; }
.cal-chip.late { background: #fff5f5; color: #c53030; }
.cal-more { font-size: .7rem; color: #718096; }
@media (max-width: 640px) { .cal-cell { min-height: 66px; } .cal-chip { font-size: .68rem; } }
.ps-log tr.hol { background: #f7fafc; color: #a0aec0; }
.ps-log tr.bad { background: #fff5f5; }
.ps-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; font-size: 12px; border-top: 1px solid #cbd5e0; padding-top: .4rem; }
@media print {
    .no-print { display: none; }
    /* 列印一律白底：.empty-layout 原有藍色漸層背景，使用者若開「列印背景圖形」會印出藍底，故在此清掉。 */
    .empty-layout { display: block; min-height: 0; padding: 0; place-items: initial; background: #fff !important; }
    .payslip { margin: 0; max-width: 100%; font-size: 13px; padding: 0 .7rem; box-shadow: none; border: 0; }
    .ps-title { margin-top: 0; padding-top: 0; }
    .ps-title h2 { font-size: 18px; letter-spacing: .12rem; margin-top: 0; }
    .ps-grid th, .ps-grid td { font-size: 12px; padding: .28rem .5rem; }
    .ps-grid td.big { font-size: 15px; }
    .ps-sl { font-size: 12px; padding: .12rem 0; margin-bottom: .3rem; }
    .ps-log th, .ps-log td { font-size: 11px; padding: .11rem .4rem; line-height: 1.2; }
    .ps-foot { font-size: 12px; margin-top: .7rem; }
    @page { size: A4 portrait; margin: 8mm 10mm; }
}

/* 簽核流程設定：單據類型切換 */
.doc-tabs { display: flex; gap: .5rem; margin: 1rem 0; }
.doc-tab { padding: .4rem 1rem; border: 1px solid #cbd5e0; border-radius: 8px; background: #fff; cursor: pointer; font-size: .9rem; color: #2d3748; }
.doc-tab:hover { background: #f7fafc; }
.doc-tab.active { background: #2c5282; color: #fff; border-color: #2c5282; }

/* ===== 儀錶板 KPI ===== */
.dash-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.dash-head-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dash-monthnav { display: inline-flex; align-items: center; gap: .4rem; }
.mnav-btn { width: 2rem; height: 2rem; border: 1px solid #cbd5e0; background: #fff; border-radius: 8px; cursor: pointer; color: #2c5282; font-size: .9rem; line-height: 1; }
.mnav-btn:hover:not(:disabled) { background: #ebf8ff; border-color: #2c5282; }
.mnav-btn:disabled { opacity: .5; cursor: not-allowed; }
.mnav-label { min-width: 6.5rem; text-align: center; font-weight: 700; color: #2c5282; }
.mnav-today { border: 0; background: #edf2f7; color: #2d3748; border-radius: 8px; padding: .35rem .7rem; cursor: pointer; font-size: .82rem; }
.mnav-today:hover:not(:disabled) { background: #e2e8f0; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1rem; }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kpi-grid { grid-template-columns: 1fr; } }
.kpi { display: block; border-radius: 12px; padding: 1.1rem 1.2rem; color: #fff; text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: transform .08s; }
.kpi:hover { transform: translateY(-2px); }
.kpi-value { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.kpi-label { font-size: .9rem; margin-top: .35rem; opacity: .95; }
.kpi-sub { font-size: .82rem; opacity: .95; }
.kpi.c-cyan { background: #17a2b8; }
.kpi.c-amber { background: #e0a800; }
.kpi.c-red { background: #dc3545; }
.kpi.c-green { background: #2f855a; }
.kpi.c-blue { background: #2b6cb0; }
.kpi.c-slate { background: #4a5568; }

/* 儀錶板下半：待辦 / 今日請假 / 今日外出 / 甘特圖 */
.dash-bottom { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-top: 1.4rem; }
@media (max-width: 900px) { .dash-bottom { grid-template-columns: 1fr; } }
.dash-col-side { display: flex; flex-direction: column; gap: 1rem; }
.dash-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem 1.1rem; }
.dash-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.dash-panel-head a { font-size: .85rem; }
.gantt { margin-top: 1rem; border-top: 1px solid #edf2f7; padding-top: .8rem; }
.gantt-row { display: grid; grid-template-columns: 10rem 1fr; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.gantt-label { font-size: .82rem; color: #2c5282; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-track { position: relative; height: 1.2rem; background: #f7fafc; border-radius: 6px; }
.gantt-bar { position: absolute; top: 0; height: 1.2rem; background: #4299e1; border-radius: 6px; display: flex; align-items: center; justify-content: center; min-width: 1.5rem; }
.gantt-bar span { font-size: .7rem; color: #fff; }
.gantt-axis { display: flex; justify-content: space-between; font-size: .75rem; color: #a0aec0; margin-top: .3rem; padding-left: 10.6rem; }

/* ===== 頂端公司切換橫幅 ===== */
.tenant-switch { position: relative; margin-right: auto; }
.tenant-switch > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .7rem; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
    user-select: none;
}
.tenant-switch > summary::-webkit-details-marker { display: none; }
.tenant-switch > summary:hover { border-color: #cbd5e0; background: #f7fafc; }
.ts-cur-label { font-size: .72rem; color: #a0aec0; }
.ts-name { font-weight: 700; color: #2c5282; }
.ts-caret { color: #a0aec0; font-size: .75rem; }
.tenant-switch[open] > summary { border-color: #2c5282; }
.ts-menu {
    position: absolute; top: calc(100% + .3rem); left: 0; z-index: 50; min-width: 300px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: .4rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.ts-menu-head { font-size: .72rem; color: #a0aec0; padding: .3rem .5rem .4rem; }
.ts-form { margin: 0; }
.ts-item {
    display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
    padding: .5rem .5rem; border: 0; border-radius: 7px; background: none; cursor: pointer;
    font: inherit; color: #2d3748;
}
button.ts-item:hover { background: #ebf8ff; }
.ts-item.current { background: #f0fff4; cursor: default; }
.ts-check { width: 1rem; color: #38a169; }
.ts-item-name { flex: 1; font-weight: 600; }
.ts-item small { color: #718096; }
.ts-empty { padding: .5rem; color: #a0aec0; font-size: .82rem; }

/* ===== Phase 1 HR pages ===== */
.swan-nav .nav-group { color: #a0aec0; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
    padding: .9rem 1rem .2rem; margin-top: .3rem; }
.swan-nav .nav-link { padding: .4rem 1rem; }
.swan-nav .nav-link.soon { opacity: .55; }
.toolbar { display: flex; gap: 1rem; align-items: center; margin: .8rem 0; flex-wrap: wrap; }
.toolbar .search { padding: .45rem .7rem; border: 1px solid #cbd5e0; border-radius: 8px; min-width: 260px; }
.toolbar .chk { font-size: .85rem; color: #4a5568; display: flex; gap: .3rem; align-items: center; }
.detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .5rem 1.5rem; margin: 1rem 0; }
.detail > div { padding: .5rem 0; border-bottom: 1px solid #edf2f7; }
.detail > div > span { display: inline-block; width: 90px; color: #718096; font-size: .82rem; }
.punch-card { max-width: 460px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.4rem; }
.punch-row { margin-bottom: 1rem; }
.punch-row label { display: block; font-size: .85rem; color: #4a5568; margin-bottom: .3rem; }
.punch-row select { width: 100%; padding: .5rem; border: 1px solid #cbd5e0; border-radius: 8px; }
.punch-who { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.punch-who > div { display: flex; flex-direction: column; gap: .2rem; }
.punch-who .punch-geo { padding: .45rem .9rem; white-space: nowrap; }
.punch-who .muted { font-size: .85rem; color: #4a5568; }
.punch-who strong { font-size: 1.15rem; }
.punch-buttons { display: flex; gap: 1rem; }
.btn.big { flex: 1; padding: 1rem; font-size: 1.05rem; border-radius: 10px; }
.btn.big.alt { background: #718096; }

.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ===== Forms (write flows) ===== */
.form-card { max-width: 720px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; }
.form-row { margin-bottom: 1rem; }
.form-row label { display: block; font-size: .85rem; color: #4a5568; margin-bottom: .3rem; }
.form-row input, .form-row select, .form-row textarea {
    width: 100%; padding: .5rem .7rem; border: 1px solid #cbd5e0; border-radius: 8px; font: inherit; }
.form-row textarea { min-height: 70px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-actions { display: flex; gap: .8rem; margin-top: 1.2rem; }
.btn-primary { background: #2c5282; color: #fff; border: 0; border-radius: 8px; padding: .55rem 1.4rem; cursor: pointer; font-weight: 600; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-secondary { background: #edf2f7; color: #2d3748; border: 0; border-radius: 8px; padding: .55rem 1.2rem; cursor: pointer; }
.btn-danger { background: #e53e3e; color: #fff; border: 0; border-radius: 8px; padding: .55rem 1.2rem; cursor: pointer; }
.btn-ok { background: #2f855a; color: #fff; border: 0; border-radius: 8px; padding: .55rem 1.2rem; cursor: pointer; }
.btn-ok:disabled { opacity: .5; cursor: not-allowed; }
.toolbar .btn-primary { padding: .4rem 1rem; }
.val-msg { color: #c53030; font-size: .8rem; margin-top: .2rem; }
.line-table input, .line-table select { padding: .35rem .5rem; border: 1px solid #cbd5e0; border-radius: 6px; width: 100%; box-sizing: border-box; background: #fff; }
/* 明細的多行欄位（詳細規格／備註）：可換行、可拉高 */
.line-table textarea { padding: .35rem .5rem; border: 1px solid #cbd5e0; border-radius: 6px; width: 100%; box-sizing: border-box; background: #fff; min-height: 2.4rem; resize: vertical; font: inherit; line-height: 1.4; }
.line-table td { padding: .3rem; vertical-align: top; }   /* 明細列：多行欄位撐高時其餘欄位靠上 */
.readonly-banner { background: #fefcbf; color: #744210; padding: .5rem .8rem; border-radius: 8px; margin-bottom: 1rem; font-size: .85rem; }
.incomplete-banner { background: #fff8e1; border: 1px solid #f6e05e; color: #744210; padding: .5rem .8rem; border-radius: 8px; margin-bottom: 1rem; font-size: .88rem; }

/* ===== 報價單列印 ===== */
.print-toolbar { padding: .7rem 1rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; color: #fff; }
.print-toolbar label { color: #fff; display: inline-flex; align-items: center; gap: .3rem; }
.print-toolbar a { color: #cfe0ff; }
.print-toolbar button { background: #2c5282; color: #fff; border: 0; border-radius: 8px; padding: .5rem 1.2rem; cursor: pointer; }
.quote-sheet { max-width: 780px; margin: 0 auto; padding: 16px 28px; background: #fff; color: #000; font-size: 13px; }
.quote-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #000; padding-bottom: 6px; }
.qc-name { font-size: 20px; font-weight: 800; }
.qc-line { font-size: 12px; color: #333; }
.quote-title { font-size: 24px; font-weight: 800; letter-spacing: 6px; }
/* 標題下方的流水號（新號碼規則）；表頭「批號」維持原位供使用者對照 */
.quote-title-wrap { text-align: right; }
.quote-title-no { font-size: 12.5px; font-weight: 600; letter-spacing: .5px; color: #000; margin-top: 2px; font-variant-numeric: tabular-nums; }
.quote-meta { width: 100%; margin: 7px 0; border-collapse: collapse; }
.quote-meta td { padding: 2px 6px; font-size: 12.5px; }
.quote-lines { width: 100%; border-collapse: collapse; margin-top: 6px; }
.quote-lines th, .quote-lines td { border: 1px solid #333; padding: 5px 6px; font-size: 12.5px; white-space: pre-line; word-break: break-word; vertical-align: top; }
.quote-lines th { background: #f0f0f0; vertical-align: middle; }
.quote-lines td.num, .quote-lines tfoot td.num { text-align: right; }
.quote-lines td.c { text-align: center; }
.quote-lines td.r { text-align: right; }
.quote-note { margin-top: 10px; font-size: 12.5px; }
.quote-sign { display: flex; justify-content: space-between; margin-top: 40px; font-size: 13px; }
/* 憑單簽名列：右對齊；收貨簽認(tall)保留較大簽名空間 */
/* 憑單金額合計：右對齊小字三行(比照舊系統，不用大表格) */
.quote-totals { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .3rem 1.4rem; margin-top: 4px; font-size: 12px; }
.quote-totals .grand { font-size: 13px; }
/* 報價單 meta：label 靠左不換行、value 靠左、行距歸零 */
.quote-meta td.k { text-align: left; white-space: nowrap; color: #000; font-weight: 700; padding-right: 2px; }
.quote-meta td { vertical-align: top; text-align: left; padding: 0 6px; line-height: 1.5; }
/* 明細：品名一行、規格縮排一個中文字於下方、字級縮小(同約定事項) */
.quote-lines .li-name { font-weight: 600; }
.quote-lines .li-spec { padding-left: 1em; white-space: pre-line; font-size: 11px; line-height: 1.4; }
/* 約定事項下方分隔線；上下 0 間距 */
.quote-hr { border: 0; border-top: 1px solid #333; margin: 6px 0 0; }
/* 合計列包進表格內(比照舊系統)：右對齊一列 */
.quote-lines tfoot td.quote-totrow { text-align: right; font-size: 12.5px; }
/* 訂單備忘：右側大框(可多行) */
.quote-meta td.qm-memo { vertical-align: top; }
.quote-meta td.qm-memo.boxed { border: 1px solid #333; padding: 4px 6px; }
.quote-meta td.qm-memo .qm-memo-body { white-space: pre-line; margin-top: 2px; line-height: 1.5; }
/* 報價單底部：約定事項(緊湊) + (左)公司名/章 (右)簽回提醒，比照舊系統 */
.quote-terms { margin-top: 12px; font-size: 12px; line-height: 1.35; }
.quote-foot2 { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin-top: 8px; font-size: 12.5px; }
.quote-foot2 .qf-left { position: relative; min-width: 200px; }
.quote-foot2 .qf-co { margin-bottom: 2px; }
.quote-foot2 .qf-stamp { height: 92px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.quote-foot2 .qf-right { flex: 1; max-width: 360px; text-align: left; }
.quote-foot2 .qf-signback { color: #333; line-height: 1.6; }
/* 憑單簽名列：右對齊、各欄等高(禮貌)；收貨簽認(tall)為方框，其餘為底線，高度一致 */
/* 簽名列：關卡數不固定(依簽核設定)，方框依可用寬度平均分配並縮在紙寬內，不再固定 120px 撐出頁面 */
/* 簽名欄：標籤印在格子內左上角，不另外佔一行——整列省下約 20px，一頁放得下更多明細。
   標籤後面用括號寫出這一關要做什麼（簽核／複核／知會），不然只看職稱會以為每一格都是上一層主管。 */
.sig-row { display: flex; justify-content: flex-end; align-items: flex-end; gap: .8rem; margin-top: 14px; font-size: 13px; width: 100%; box-sizing: border-box; }
.sig-row .sig { flex: 1 1 0; min-width: 0; max-width: 150px; }
.sig-row .sig-space { position: relative; height: 52px; border: 1px solid #333; border-radius: 4px;
    display: flex; align-items: flex-end; justify-content: center; padding: 0 4px 5px; font-size: 14px; }
/* 標籤連同簽核者姓名一起印在格內左上角，格子本身整個留白給人手簽。
   姓名放進標籤而不是填滿格子，之後要改成電子簽名（如維修單）時直接把圖貼進格子即可。 */
.sig-row .sig-label { position: absolute; top: 2px; left: 5px; right: 5px; text-align: left;
    font-size: 10.5px; line-height: 1.2; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig-row .sig-label .sig-kind { color: #777; }
/* 出貨單「指定送貨地址」淡色標示（僅送貨地址與客戶登記地址不同時；一般送貨不框） */
.quote-meta td.ship-hi, .quote-meta .ship-hi { background: #fff8dc; border-left: 3px solid #dd6b20; padding-left: 4px; }
/* 出貨單表頭三欄(左客戶/發票/送貨、中單號/業務、右備註方框)；區塊間留小間距 */
.om-meta td { vertical-align: top; line-height: 1.55; }
.om-meta .om-gap { margin-top: 6px; }
.om-meta .om-ext { font-size: 11px; color: #333; margin-left: 2px; }
/* 多聯列印（複寫中一刀 / 雷射 2、3 聯）：聯別標籤 + 裁切線 */
.copy-label { max-width: 780px; margin: 2px auto -4px; text-align: right; font-weight: 700; font-size: 13px; padding-right: 4px; }
.cut-line { text-align: center; color: #888; font-size: 12px; letter-spacing: 3px; border-top: 1px dashed #999; margin: 14px 0 10px; padding-top: 4px; }
.copies-1 .copy-2, .copies-1 .copy-3, .copies-1 .cut-2, .copies-1 .cut-3, .copies-1 .copy-label { display: none; }
.copies-2 .copy-3, .copies-2 .cut-3 { display: none; }
@media print {
    /* 裁切線＝實際換頁：每一聯各自一張 A4 */
    .cut-line { display: none; }
    .copies-2 .copy-2,
    .copies-3 .copy-2,
    .copies-3 .copy-3 { break-before: page; page-break-before: always; }
    .copy-wrap .copy { break-inside: auto; }
}
/* 附帶電子發票第二頁：預設隱藏；選「出貨單(含發票)」(body[data-print-scope=all]) 才顯示。
   不硬分頁：接在出貨單後自然流動，塞得下就同一頁，塞不下才換頁；發票整張不被切半。 */
.invoice-page { display: none; }
body[data-print-scope="all"] .invoice-page { display: block; break-before: auto; page-break-before: auto; break-inside: avoid; page-break-inside: avoid; margin-top: 1rem; }
/* 證明聯固定以 5.2cm 實體寬輸出：用 width（不是 max-width）才不會因截圖像素較少而縮小；
   截圖是 3 倍高解析，放大到 5.2cm 不失真。height:auto 保持比例，max-height 只當安全上限。 */
.invoice-page img { display: block; margin: .3cm auto; width: 5.2cm; max-width: 5.2cm; max-height: 26cm; height: auto; opacity: 0; }
/* 含發票列印時隱藏簽名列，空出高度讓出貨單+發票盡量擠進同一頁（螢幕預覽與列印一致）。 */
body[data-print-scope="all"] .sig-row { display: none; }
.inv-loading { text-align: center; color: #666; padding: 2rem 1rem; font-size: .95rem; }
@media print { .inv-loading { display: none; } }
/* 發票被擠到第二頁時，頁1 顯示的提示（由 print.js 依高度估算決定顯示與否）。 */
.inv-nextpage { margin-top: .6rem; text-align: right; font-weight: 700; font-size: .9rem; color: #1a202c; }
@media print {
    .no-print, .sidebar, .top-row, nav { display: none !important; }
    .quote-sheet { max-width: none; }
    body { background: #fff; }
}

.grid td.neg, .quote-lines td.neg { color: #e53e3e; }

/* ===== Collapsible sidebar nav ===== */
.swan-nav { padding: .4rem .3rem; }
.swan-nav .ni { display: inline-block; width: 1.4em; text-align: center; margin-right: .35rem; }
.swan-nav .nav-top { padding: .3rem .8rem; border-radius: 8px; font-weight: 600; }
.swan-nav details.nav-grp { border-radius: 8px; margin: .1rem 0; }
.swan-nav details.nav-grp > summary {
    list-style: none; cursor: pointer; padding: .3rem .8rem; border-radius: 8px;
    color: #cbd5e0; font-size: .9rem; user-select: none; display: flex; align-items: center; position: relative;
}
.swan-nav details.nav-grp > summary::-webkit-details-marker { display: none; }
.swan-nav details.nav-grp > summary::after {
    content: "▾"; margin-left: auto; font-size: .75rem; opacity: .6; transition: transform .15s ease;
    transform: rotate(-90deg);
}
.swan-nav details.nav-grp[open] > summary::after { transform: rotate(0deg); }
.swan-nav details.nav-grp > summary:hover { background: rgba(255,255,255,.08); color: #fff; }
.swan-nav details.nav-grp[open] > summary { color: #fff; }
.swan-nav .nav-link.sub { padding: .22rem .8rem .22rem 1.5rem; font-size: .88rem; border-radius: 8px; }
.swan-nav .nav-link.sub.active { background: rgba(255,255,255,.15); }
.nav-tools { padding: 0 .9rem .2rem; text-align: right; }
.nav-tools .link-btn { color: #a7b6c9; font-size: .74rem; text-decoration: none; }
.nav-tools .link-btn:hover { color: #fff; text-decoration: underline; }

/* ── 派工甘特圖 ── */
.gantt { border: 1px solid #e2e8f0; border-radius: 10px; overflow: auto; background: #fff; }
.gantt-row { display: flex; align-items: stretch; border-bottom: 1px solid #edf2f7; min-height: 34px; }
.gantt-row:last-child { border-bottom: 0; }
.gantt-row.head { position: sticky; top: 0; background: #f7fafc; z-index: 2; font-size: .78rem; color: #4a5568; }
.gantt-label { flex: 0 0 220px; padding: .35rem .6rem; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; justify-content: center; }
.gantt-label .sub { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-label .who { font-size: .72rem; color: #718096; }
.gantt-track { position: relative; flex: 1 1 auto; min-width: 640px; }
.gantt-grid { position: absolute; inset: 0; }
.gantt-col { position: absolute; top: 0; bottom: 0; border-left: 1px solid #edf2f7; font-size: .68rem; color: #a0aec0; padding-left: 3px; }
.gantt-bar { position: absolute; top: 6px; height: 20px; border-radius: 5px; background: #90cdf4; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.gantt-bar .fill { position: absolute; inset: 0; width: var(--p); background: #3182ce; }
.gantt-bar .txt { position: absolute; left: 5px; top: 2px; font-size: .68rem; color: #1a202c; white-space: nowrap; z-index: 1; }
.gantt-bar.done { background: #9ae6b4; } .gantt-bar.done .fill { background: #38a169; }
.gantt-bar.late { background: #feb2b2; } .gantt-bar.late .fill { background: #e53e3e; }
.gantt-bar.off { background: #e2e8f0; } .gantt-bar.off .fill { background: #a0aec0; }
.gantt-label a.sub { color:#2c5282; text-decoration:none; } .gantt-label a.sub:hover { text-decoration:underline; }
/* 工作管理：進度條與活動時間軸 */
.wk-bar { height: 8px; background: #edf2f7; border-radius: 999px; overflow: hidden; min-width: 5rem; }
.wk-bar span { display: block; height: 100%; background: #3182ce; border-radius: 999px; }
.wk-tl { display: flex; flex-direction: column; gap: .5rem; }
.wk-tl-item { border-left: 3px solid #90cdf4; padding: .3rem .7rem; background: #f7fafc; border-radius: 0 8px 8px 0; font-size: .9rem; }
.wk-tl-item.sys { border-left-color: #e2e8f0; background: transparent; font-size: .8rem; color: #718096; }
.wk-tl-item.rep { border-left-color: #f6ad55; background: #fffaf0; }
.wk-txt { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; line-height: 1.6; max-width: 70rem; }
.wk-tl-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .15rem; font-size: .8rem; }
.wk-cal { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:2px; background:#e2e8f0; border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; }
.wk-cal-h { background:#f7fafc; text-align:center; font-size:.78rem; color:#4a5568; padding:.3rem 0; font-weight:600; }
.wk-cal-d { background:#fff; min-height:5.5rem; padding:.2rem .3rem; display:flex; flex-direction:column; gap:.15rem; }
.wk-cal-d.out { background:#fafafa; color:#a0aec0; } .wk-cal-d.wknd .wk-cal-n { color:#a0aec0; } .wk-cal-d.today { outline:2px solid #dd6b20; outline-offset:-2px; }
.wk-cal-n { font-size:.78rem; color:#4a5568; text-align:right; }
.wk-cal-i { display:block; font-size:.72rem; line-height:1.25; padding:.1rem .3rem; border-radius:4px; text-decoration:none; color:#1a202c; background:#edf2f7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wk-cal-i.tag-ok { background:#c6f6d5; } .wk-cal-i.tag-warn { background:#fefcbf; } .wk-cal-i.tag-err { background:#fed7d7; } .wk-cal-i.tag-off { background:#e2e8f0; color:#718096; }
.wk-cal-i.st { background:#ebf8ff; color:#2c5282; } .wk-cal-i.late { box-shadow:inset 0 0 0 1px #e53e3e; }
.gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #dd6b20; z-index: 3; }

/* ═══════════════ 標準化 UI 元件（stdUI） ═══════════════ */
/* 頁首列：標題 + 動作，緊湊滿版 */
/* 基底標題：裸 h1(如單據編輯頁)預設瀏覽器 2em 過大，統一縮小且比列表標題(1.5rem)小；
   .std-h h1 等 scoped 規則仍覆蓋。 */
h1 { font-size:1.25rem; margin:.3rem 0 .7rem; }
.std-h { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.15rem 0 .5rem; }
.std-h h1 { margin:0; font-size:1.5rem; }
.std-h .spacer { flex:1 1 auto; }
/* 返回連結：原本在標題上方獨占一行，移進標題列做成小膠囊。
   點擊優先退回瀏覽器上一頁（才回得到列表原本的頁碼與捲動位置），
   直接貼網址進來沒有歷史時才走 href 回該列表。 */
.std-h .backlink { font-size:.8rem; color:#4a5568; text-decoration:none; white-space:nowrap;
    border:1px solid #e2e8f0; border-radius:999px; padding:.1rem .62rem; background:#f7fafc; line-height:1.5; }
.std-h .backlink:hover { background:#edf2f7; color:#2b4a6b; border-color:#cbd5e0; }

/* 可收合搜尋列：滿版、上下間隙小、不佔列表版面 */
.stdbar { border:1px solid #e2e8f0; border-radius:8px; background:#fff; margin-bottom:.5rem; }
.stdbar-head { display:flex; align-items:center; gap:.6rem; padding:.35rem .55rem; flex-wrap:wrap; }
.stdbar-toggle { border:1px solid #cbd5e0; background:#f7fafc; border-radius:6px; padding:.28rem .6rem;
    cursor:pointer; font-size:.82rem; color:#2d3748; white-space:nowrap; }
.stdbar-toggle:hover { background:#edf2f7; }
.stdbar-quick { flex:1 1 240px; min-width:180px; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; white-space:nowrap; }
/* 搜尋列內的一列式篩選(標籤與控制項並排) */
.stdbar-quick .qf { display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; font-size:.82rem; color:#4a5568; }
.stdbar-quick .qf select, .stdbar-quick .qf > input { width:auto; padding:.3rem .45rem; border:1px solid #cbd5e0; border-radius:6px; }
.stdbar-quick .qf .combo { position:relative; }
.stdbar-quick .qf .combo-input { width:12rem; padding:.3rem .45rem; border:1px solid #cbd5e0; border-radius:6px; }
/* 國定假日行事曆 */
.cal-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.4rem 0 .8rem; flex-wrap:wrap; }
.cal-year { display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:14px; }
.cal-month { border:1px solid #e2e8f0; border-radius:8px; padding:8px 8px 10px; background:#fff; }
.cal-mtitle { font-weight:600; text-align:center; margin-bottom:5px; color:#2d3748; font-size:.9rem; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-dow { text-align:center; font-size:.66rem; color:#a0aec0; padding-bottom:2px; }
.cal-day { text-align:center; font-size:.74rem; padding:3px 0; border-radius:4px; color:#4a5568; }
.cal-day.sun { color:#e53e3e; }
.cal-day.blank { visibility:hidden; }
.cal-day.hol { background:#fed7d7; color:#c53030; font-weight:700; cursor:pointer; }
.cal-day.hol:hover { background:#fc8181; color:#fff; }
/* 報價單「訂單資料」成交旗標列 */
.order-flag { display:flex; align-items:center; gap:1rem; margin:.4rem 0 .8rem; padding:.5rem .8rem; border:1px solid #e2e8f0; border-radius:8px; background:#f7fafc; }
.order-flag.on { background:#f0fff4; border-color:#9ae6b4; }
.order-flag .of-note { color:#a0aec0; font-size:.82rem; }
.stamp-box { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.stamp-box .stamp-img { height:88px; width:auto; max-width:180px; object-fit:contain; border:1px solid #cbd5e0; border-radius:6px; background:#fff; padding:4px; }
.stdbar-quick input, .stdbar-quick select { width:100%; padding:.32rem .5rem; border:1px solid #cbd5e0; border-radius:6px; }
.stdbar-quick .std-combo[style*="width"] { flex:0 0 auto; }   /* 快速列內指定寬度的下拉不被壓扁 */
.stdbar-quick .std-combo .combo-input { padding:.32rem 1.8rem .32rem .5rem; }   /* 與快速列的輸入框同高 */
.stdbar-quick input[type=checkbox] { width:auto; }
.stdbar-count { font-size:.8rem; color:#718096; white-space:nowrap; }
.stdbar-actions { display:flex; gap:.4rem; align-items:center; margin-left:auto; }
/* 狀態小標籤（資產個體等） */
.tag { display:inline-block; font-size:.75rem; border-radius:999px; padding:.1rem .55rem; font-weight:600; white-space:nowrap; }
.tag-ok { background:#c6f6d5; color:#22543d; }
.tag-warn { background:#feebc8; color:#7b341e; }
.tag-off { background:#e2e8f0; color:#4a5568; }
.tag-err { background:#fed7d7; color:#c53030; }
/* 篩選列右側按鈕較多時用 .btn-sm 縮小（預收款等） */
.stdbar-actions .btn-sm { padding:.35rem .8rem; font-size:.82rem; white-space:nowrap; }
.btn-ok.btn-sm, .btn-danger.btn-sm, .btn-secondary.btn-sm, .btn-primary.btn-sm { padding:.3rem .7rem; font-size:.8rem; white-space:nowrap; }   /* 表格列內的動作按鈕（簽核中心等） */
.stdbar-actions input[type=date] { padding:.25rem .45rem; border:1px solid #cbd5e0; border-radius:6px; font-size:.8rem; background:#fff; }
.stdbar-body { padding:.5rem .55rem .6rem; border-top:1px solid #edf2f7;
    display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:.45rem .8rem; align-items:end; }
.stdbar-body .f { display:flex; flex-direction:column; gap:.15rem; }
.stdbar-body .f label { font-size:.74rem; color:#718096; white-space:nowrap; }
.stdbar-body .f input, .stdbar-body .f select { padding:.32rem .5rem; border:1px solid #cbd5e0; border-radius:6px; }
.stdbar-btns { grid-column:1/-1; display:flex; gap:.5rem; padding-top:.2rem; }
/* 篩選鈕在有條件生效時反白帶數字；已套用的條件以標籤列在篩選列下方（收合時也看得見） */
.stdbar-toggle.on { background:#ebf4ff; border-color:#90cdf4; color:#2c5282; font-weight:600; }
.stdbar-chips { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; padding:0 .55rem .4rem; }
.stdbar-chips:empty { display:none; }
.chip { display:inline-flex; align-items:center; gap:.25rem; background:#edf2f7; color:#2d3748; border-radius:999px;
    padding:.1rem .25rem .1rem .6rem; font-size:.76rem; white-space:nowrap; }
.chip b { font-weight:600; }
.chip .x { border:0; background:transparent; cursor:pointer; color:#718096; font-size:.8rem; line-height:1;
    padding:.1rem .3rem; border-radius:999px; }
.chip .x:hover { background:#cbd5e0; color:#1a202c; }
.stdbar-chips .clear { border:0; background:transparent; color:#2c5282; cursor:pointer; font-size:.76rem;
    text-decoration:underline; padding:.1rem .2rem; }

/* 標準列表：不換行、緊湊、滿版、表頭吸頂、橫向捲動不撐破版面 */
.stdscroll { width:100%; overflow-x:auto; border:1px solid #e2e8f0; border-radius:8px; background:#fff; }
.stdgrid { width:100%; border-collapse:collapse; font-size:.84rem; }
/* 展開列裡的子表／彙總表：淺藍表頭，與主表深藍區隔 */
.stdgrid.subgrid thead th { background:#bee3f8; color:#1a365d; position:static; }
.stdgrid.subgrid tbody td { background:#fff; }
.stdgrid th, .stdgrid td { padding:.34rem .55rem; border-bottom:1px solid #edf2f7;
    white-space:nowrap; text-align:left; }
.stdgrid thead th { position:sticky; top:0; z-index:1; background:#2b4a6b; color:#fff; font-weight:600;
    font-size:.78rem; border-bottom:0; }
.stdgrid tbody tr:hover { background:#f1f7ff; }
.stdgrid tbody tr.on { background:#e6f0fb; }
.stdgrid td.num, .stdgrid th.num { text-align:right; font-variant-numeric:tabular-nums; }
.stdgrid td.wrap { white-space:normal; }        /* 特例允許換行 */
.stdgrid.vtop td { vertical-align:top; }        /* 有換行欄位的列表：所有欄位靠上對齊 */
/* 有換行欄位的列表：控制在 100% 寬內（客戶／備註欄可換行、上限縮小），避免橫向捲軸 */
.stdgrid.vtop { width:100%; table-layout:auto; }
.stdgrid.vtop td.cus, .stdgrid.vtop th.cus { min-width:8rem; max-width:14rem; }
.stdgrid.vtop td.memo { max-width:16rem; }
.stdgrid.vtop td.wrap { word-break:break-word; max-width:10rem; }
/* 客戶/名稱欄：允許換行並限寬，避免長名稱把清單撐爆版面 */
.stdgrid td.cus, .stdgrid th.cus { white-space:normal; word-break:break-word; min-width:10rem; max-width:20rem; }
.stdgrid .zebra:nth-child(even) { background:#fafcff; }
/* 小藥丸標籤（效期預警等） */
.badge-pill { display:inline-block; padding:.12rem .55rem; border-radius:999px; font-size:.75rem; font-weight:600; white-space:nowrap; }
/* 可點擊排序的表頭 */
.stdgrid thead th.sortable { cursor:pointer; user-select:none; }
.stdgrid thead th.sortable:hover { background:#355d87; }

/* 列內動作圖示鈕（依權限顯示） */
.stdacts { display:flex; gap:.15rem; justify-content:flex-end; white-space:nowrap; }
.iconbtn { border:0; background:transparent; cursor:pointer; padding:.12rem .28rem; border-radius:5px;
    font-size:.95rem; line-height:1; color:#4a5568; }
.iconbtn:hover { background:#e2e8f0; }
.iconbtn.danger:hover { background:#fed7d7; }
/* 連結型動作（檢視／編輯／列印）也用同一顆外觀，但保留 <a> 才能中鍵開新分頁 */
a.iconbtn { text-decoration:none; display:inline-flex; align-items:center; line-height:1.4; }
/* 列動作要比抽屜裡的圖示鈕再緊一點：emoji 字身寬，內距與字級各收一點才省得到欄寬。
   量測（4 個動作）：文字版 143px → 原 icon 119px → 收緊後 96px。點擊區仍有 24×24。 */
/* 列動作一律文字（docs/ui.html 第 9 節）。位置要逐列對齊：某列少了某個動作，
   放一個 <span class="slot">同樣的字</span> 佔位（visibility:hidden），其餘動作才不會往旁邊遞補。 */
.stdacts { gap:.55rem; align-items:center; font-size:.82rem; }
.stdacts .slot { visibility:hidden; }
.stdacts .danger { color:#c53030; margin-left:.25rem; }
.stdacts .off { color:#a0aec0; cursor:help; text-decoration:none; }
/* 有權限但當下不能做：不要藏起來，淡化並把原因寫在提示裡 */
.iconbtn.is-off { opacity:.4; cursor:not-allowed; }
/* 動作區的即時提示：原生 title 要等約一秒太慢。動作欄靠右，提示往左展開才不會被 .stdscroll 裁掉 */
.tip { position:relative; }
.tip::after {
    content:attr(data-tip); position:absolute; right:100%; top:50%; transform:translateY(-50%); margin-right:.3rem;
    background:#1a202c; color:#fff; font-size:.72rem; line-height:1.5; padding:.15rem .45rem; border-radius:5px;
    white-space:nowrap; pointer-events:none; opacity:0; visibility:hidden; z-index:30;
    transition:opacity .12s ease .3s, visibility 0s linear .42s;
}
.tip:hover::after, .tip:focus-visible::after { opacity:1; visibility:visible; transition-delay:.3s, 0s; }
.tip.tip-down::after { right:auto; top:100%; left:50%; transform:translateX(-50%); margin:.25rem 0 0; }

/* 抽屜（右側滑出）／Modal */
.drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.34); z-index:50; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(560px,96vw); background:#fff; z-index:51;
    display:flex; flex-direction:column; box-shadow:-8px 0 30px rgba(0,0,0,.18); animation:drawerIn .16s ease-out; }
.drawer.wide { width:min(920px,98vw); }
.drawer.xwide { width:min(1400px,76vw); }   /* 約 3/4 螢幕,閱讀型抽屜(公告/文件) */

/* 簽核紀錄(共用元件 ApprovalTrail) */
.approval-trail { margin-top:.7rem; border-top:1px solid #e2e8f0; padding-top:.6rem; }
.approval-trail .at-title { font-weight:700; font-size:.9rem; margin-bottom:.3rem; }
.approval-trail .at-round { margin:.25rem 0 .5rem; }
.approval-trail .at-round-h { font-weight:600; font-size:.85rem; }
.approval-trail .at-step { color:#718096; font-size:.82rem; padding-left:1.1rem; line-height:1.5; }
@keyframes drawerIn { from { transform:translateX(24px); opacity:.6; } to { transform:none; opacity:1; } }
.drawer-head { display:flex; align-items:center; padding:.7rem 1rem; border-bottom:1px solid #e2e8f0; }
.drawer-head h3 { margin:0; font-size:1.05rem; flex:1; }
.drawer-x { border:0; background:transparent; font-size:1.15rem; cursor:pointer; color:#718096; }
.drawer-body { flex:1; overflow:auto; padding:.9rem 1rem; }
.drawer-foot { padding:.65rem 1rem; border-top:1px solid #e2e8f0; display:flex; gap:.5rem; justify-content:flex-end; background:#fafbfc; }

/* 分頁標籤 */
.tabset { }
.tabstrip { display:flex; gap:.2rem; border-bottom:2px solid #e2e8f0; margin-bottom:.55rem; flex-wrap:wrap; }
.tabbtn { border:0; background:transparent; padding:.3rem .8rem; cursor:pointer; font-size:.86rem;
    color:#4a5568; border-bottom:2px solid transparent; margin-bottom:-2px; }
.tabbtn.on { color:#2b6cb0; border-bottom-color:#2b6cb0; font-weight:600; }
.tabbtn:hover { color:#2b6cb0; }
.tabpane[hidden] { display:none; }

/* 標準表單格：多欄、label 與輸入框同列不換行 */
.fgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:.55rem .9rem; }
.fgrid.cols2 { grid-template-columns:repeat(2,1fr); }
.fgrid .f { display:flex; flex-direction:column; gap:.2rem; }
.fgrid .f.full { grid-column:1/-1; }
.fgrid .f label { font-size:.76rem; color:#4a5568; white-space:nowrap; }
.fgrid .f input, .fgrid .f select, .fgrid .f textarea { padding:.36rem .5rem; border:1px solid #cbd5e0; border-radius:6px; width:100%; }
.fgrid .f textarea { min-height:64px; resize:vertical; }
/* 勾選欄：checkbox 不可撐滿寬（否則文字被擠到最右邊看不到），文字正常字級可換行 */
.fgrid .f label.chk { display:inline-flex; gap:.45rem; align-items:center; white-space:normal; font-size:.9rem; color:#2d3748; }
.fgrid .f label.chk input[type=checkbox], .fgrid .f label.chk input[type=radio] { width:auto; margin:0; }
.fgrid .f .val-msg { color:#e53e3e; font-size:.72rem; }

/* 列內展開的關聯單據區 */
.stdsub { background:#f7fafc; padding:.5rem .7rem; }
.stdsub .subtabs { display:flex; gap:.4rem; margin-bottom:.4rem; flex-wrap:wrap; }
.stdsub .subtab { border:1px solid #cbd5e0; background:#fff; border-radius:14px; padding:.15rem .7rem;
    cursor:pointer; font-size:.78rem; color:#2d3748; }
.stdsub .subtab.on { background:#2b6cb0; color:#fff; border-color:#2b6cb0; }
.fs { border:0; padding:0; margin:0; min-width:0; }
.fs:disabled { opacity:.85; }

/* ── 選單：搜尋 / 常用 / 三層 ── */
.nav-search { position:relative; padding:.5rem .5rem .2rem; }
.nav-search input { width:100%; padding:.4rem .6rem; border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08); color:#fff; border-radius:8px; font-size:.85rem; }
.nav-search input::placeholder { color:#a0aec0; }
.nav-search-x { position:absolute; right:.9rem; top:.6rem; border:0; background:transparent; color:#a0aec0; cursor:pointer; }
.nav-empty { color:#a0aec0; font-size:.82rem; padding:.6rem 1rem; }

.nav-fav { padding:.3rem .3rem .2rem; margin:.2rem .3rem .4rem; border-bottom:1px solid rgba(255,255,255,.12); }
.nav-fav-h { color:#f6e05e; font-size:.74rem; letter-spacing:.05em; padding:.2rem .8rem; }

/* item 行 + 常用星號 */
.swan-nav .nav-row, .nav-fav .nav-row { display:flex; align-items:center; }
.swan-nav .nav-row .nav-link.sub, .nav-fav .nav-row .nav-link.sub { flex:1; }
.nav-star { border:0; background:transparent; cursor:pointer; color:#718096; font-size:.9rem;
    padding:.1rem .4rem; opacity:0; transition:opacity .12s; }
.nav-row:hover .nav-star { opacity:.8; }
.nav-star.on { color:#f6e05e; opacity:1; }
.nav-star:hover { color:#f6e05e; }

/* 三層縮排：level-2 巢狀 details 往內縮、字級略小 */
.swan-nav details.nav-l2 { margin-left:.5rem; }
.swan-nav details.nav-l2 > summary { font-size:.82rem; color:#a7b6c9; padding:.22rem .8rem; }
.swan-nav details.nav-l2 .nav-link.sub { padding-left:2.2rem; font-size:.85rem; }
.swan-nav details.nav-l1 > summary { font-weight:600; }

/* ── 公告 ── */
.dot-unread { display:inline-block; width:8px; height:8px; border-radius:50%; background:#e53e3e; }
.stdgrid .unread { font-weight:700; }
.news-meta { display:flex; gap:1rem; color:#718096; font-size:.82rem; border-bottom:1px solid #edf2f7; padding-bottom:.5rem; margin-bottom:.7rem; flex-wrap:wrap; }
.news-body { line-height:1.7; white-space:normal; word-break:break-word; }
/* 公告圖片 / 附件 */
.news-images { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.news-images img { max-width:min(100%,420px); max-height:360px; border:1px solid #e2e8f0; border-radius:8px; object-fit:contain; }
.news-attach { margin-top:14px; display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.news-uploads { display:flex; flex-wrap:wrap; gap:16px; }
.news-uploads .img-slot { display:flex; flex-direction:column; gap:6px; min-width:170px; }
.news-uploads .img-slot img { max-width:200px; max-height:150px; border:1px solid #e2e8f0; border-radius:6px; object-fit:contain; cursor:pointer; }
button.btn-link { background:none; border:none; cursor:pointer; padding:0; font-size:.82rem; }
.btn-link.danger { color:#c53030; }
.read-stat { display:flex; gap:.6rem; align-items:center; }
.rs-badge { padding:.15rem .7rem; border-radius:14px; font-size:.82rem; font-weight:600; }
.rs-badge.ok { background:#c6f6d5; color:#22543d; }
.rs-badge.no { background:#fed7d7; color:#742a2a; }
.stdsub .subbody { min-height:2rem; }
.stdsub .subcount { display:inline-block; background:#fff; color:#2b6cb0; border-radius:9px; padding:0 .35rem; font-size:.72rem; margin-left:.15rem; }
.stdsub .subtab.on .subcount { background:#2b6cb0; color:#fff; }
.stdgrid .exp { cursor:pointer; color:#4a5568; user-select:none; }
.stdgrid tr.subrow > td { background:#f7fafc; padding:.4rem .6rem; }

/* 分段切換鈕（直式/橫式等） */
.seg { display:inline-flex; border:1px solid #cbd5e0; border-radius:8px; overflow:hidden; }
.seg-btn { border:0; background:#fff; padding:.35rem .8rem; cursor:pointer; font-size:.82rem; color:#4a5568; }
.seg-btn.on { background:#2b6cb0; color:#fff; }
.seg-btn + .seg-btn { border-left:1px solid #cbd5e0; }

/* 組織圖：橫式（由左至右，鏡射直式連接線） */
.org-tree.horizontal ul { flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 0; padding-left: 22px; }
.org-tree.horizontal li { padding: 10px 0 10px 22px; text-align: left; }
.org-tree.horizontal li::before, .org-tree.horizontal li::after {
    top: 0; bottom: 50%; left: 0; right: auto; width: 22px; height: auto;
    border-top: 0; border-bottom: 2px solid #cbd5e0; border-left: 2px solid #cbd5e0;
}
.org-tree.horizontal li::after { top: 50%; bottom: 0; border-bottom: 0; border-top: 2px solid #cbd5e0; }
.org-tree.horizontal li:only-child::before, .org-tree.horizontal li:only-child::after { display: none; }
.org-tree.horizontal li:only-child { padding-left: 22px; }
.org-tree.horizontal li:first-child::before { border: 0 none; }
.org-tree.horizontal li:last-child::after { border: 0 none; }
.org-tree.horizontal li:first-child::after { border-radius: 6px 0 0 0; }
.org-tree.horizontal li:last-child::before { border-radius: 0 0 0 6px; }
.org-tree.horizontal ul ul::before {
    top: 50%; left: 0; width: 22px; height: 0; border-left: 0; border-top: 2px solid #cbd5e0;
}

/* 選單子連結：主選單與常用區一致的淺色（避免常用區變黑字看不清） */
.swan-nav .nav-link.sub, .nav-fav .nav-link.sub { color:#d7d7d7; }
.swan-nav .nav-link.sub:hover, .nav-fav .nav-link.sub:hover { color:#fff; }
.swan-nav .nav-link.sub.active, .nav-fav .nav-link.sub.active { color:#fff; }

/* ── master-detail 編輯頁標準版面（.mdform）：滿版 + 多欄 + 標題與輸入框同行 ──
   密度刻意壓得比一般表單緊：單據表頭動輒十幾個欄位，再加一張明細表，
   鬆一點就會把「明細」推到第一畫面之外——使用者每開一張單都要先捲一次，很傷。
   目標是表頭＋前幾列明細擠進一個畫面。字級不低於 .88rem，仍好讀。 */
.mdform { max-width: none !important; }
.mdform.form-card { padding: .9rem 1.1rem; }
.mdform .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: .25rem 1.2rem; }
.mdform .form-row { display: flex; align-items: center; gap: .55rem; margin: .1rem 0; }
.mdform .form-row > label { flex: 0 0 auto; min-width: 5.5rem; text-align: right; white-space: nowrap; margin: 0; font-size: .8rem; color: #4a5568; }
.mdform .form-row > input, .mdform .form-row > select, .mdform .form-row > textarea { flex: 1 1 auto; min-width: 0; padding: .26rem .45rem; font-size: .88rem; border: 1px solid #cbd5e0; border-radius: 6px; }
.mdform .form-row > textarea { min-height: 40px; resize: vertical; }
/* StdCombo 的輸入框不是 form-row 的直接子元素，要另外對齊密度 */
.mdform .form-row .combo-input { padding: .26rem .45rem; font-size: .88rem; }
/* 明細表滿版、輸入框填滿欄位 */
/* 整頁單據的副標題（報價明細／明細／沖銷明細）：縮小，不要像頁標題 */
.mdform h2 { font-size: 1rem; font-weight: 700; color: #2d3748; margin: .55rem 0 .25rem; }
/* 頁內副標（區塊標題）：比頁標題小一級，避免與 h1 搶版面 */
h2.std-h2 { font-size: 1.05rem; font-weight: 700; color: #2d3748; margin: 1.2rem 0 .4rem; }
h2.std-h2 .muted { font-weight: 500; font-size: .9rem; }
.mdform .line-table { width: 100%; }
.mdform .line-table th { font-size: .78rem; padding-bottom: .15rem; }
.mdform .line-table td { padding: .18rem .3rem; }
.mdform .line-table td.num { padding-top: .45rem; text-align: left; font-variant-numeric: tabular-nums; }   /* 小計：靠左與欄位標題對齊、垂直與輸入框文字齊 */
.mdform .line-table input, .mdform .line-table select, .mdform .line-table textarea { padding: .24rem .4rem; font-size: .88rem; }
.mdform .line-table textarea { resize: both; min-width: 100%; }   /* 多行欄可向右下拉大，編輯／檢視較好讀 */
.mdform .line-table td > input { width: 100%; box-sizing: border-box; }
/* 底部動作列：往上收，讓按鈕跟著單據一起留在第一畫面。
   明細列多到一個畫面放不下時就黏在畫面底部——不必為了按「儲存」先捲到底，
   捲回來又找不到原本在看的那一列。內容本來就放得下時不會有任何變化。 */
.mdform .form-actions { margin-top: .7rem; gap: .6rem; flex-wrap: wrap;
    position: sticky; bottom: 0; background: #fff; padding: .5rem 0 .1rem; border-top: 1px solid #edf2f7; }

/* 列表備註欄：遇換行符號(\n)自動換行、過長折行 */
.stdgrid td.memo { white-space: pre-line; word-break: break-word; min-width: 10rem; max-width: 28rem; }

/* 對帳單（應收/應付明細表，可列印寄送） */
.stmt-sheet { background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:1.2rem 1.4rem; margin-top:.4rem; }
.stmt-head { text-align:center; border-bottom:2px solid #2c5282; padding-bottom:.6rem; margin-bottom:.6rem; }
.stmt-title { font-size:1.4rem; font-weight:800; color:#1a202c; }
.stmt-sub { font-size:1.05rem; font-weight:700; margin:.2rem 0; color:#2c5282; }
.stmt-line { font-size:.82rem; color:#4a5568; }
.stmt-to { font-size:.9rem; margin:.4rem 0 .6rem; }
.stmt-grid th, .stmt-grid td { font-size:.8rem; }
.stmt-grid tfoot td { background:#f7fafc; }
@media print {
    .stmt-sheet { border:0; border-radius:0; padding:0; }
    .stdscroll { overflow:visible !important; border:0 !important; }
    .stmt-grid td.memo { white-space:pre-line; }
    body { background:#fff; }
}

/* 檢視模式（唯讀）：欄位不可操作、隱藏列內刪除鈕（分頁鈕仍可點） */
.viewmode .form-row input, .viewmode .form-row select, .viewmode .form-row textarea,
.viewmode .line-table input, .viewmode .line-table select, .viewmode .multi {
    pointer-events: none; background: #f1f5f9; color: #475569; border-color: #e2e8f0;
}
.viewmode .line-table .link-btn { display: none; }

/* ═ 單據作廢:浮水印 + 提示 ═ */
.void-wm { position: fixed; inset: 0; pointer-events: none; z-index: 9990;
    display: flex; align-items: center; justify-content: center; overflow: hidden; }
.void-wm.wm-soft span { color: rgba(217, 119, 6, .16); border-color: rgba(217, 119, 6, .16); }   /* 未核准：琥珀色，與作廢的紅色區分 */
.print-attach { break-before: page; page-break-before: always; margin-top: 12px; }
.void-wm span { font-size: 20vw; font-weight: 900; line-height: 1;
    color: rgba(214, 0, 0, .13); border: .35rem solid rgba(214, 0, 0, .13);
    padding: .06em .28em; border-radius: .18em; transform: rotate(-26deg);
    white-space: nowrap; letter-spacing: .12em; user-select: none; }
.void-banner { background: #fde8e8; border: 1px solid #f2b8b8; color: #a10000;
    padding: .5rem .8rem; border-radius: 6px; margin: .5rem 0; font-weight: 600; }
.void-banner .vb-sub { font-weight: 400; color: #7a2a2a; margin-left: .5rem; font-size: .9em; }
.badge-void { display: inline-block; background: #d60000; color: #fff; font-size: .72rem;
    font-weight: 700; padding: .05rem .4rem; border-radius: 4px; margin-left: .35rem; vertical-align: middle; }
@media print {
    .void-wm span { color: rgba(214, 0, 0, .16) !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ═ 清單游標分頁列 ═ */
.stdpager { display:flex; align-items:center; justify-content:space-between; gap:1rem;
    margin:.5rem 0 .2rem; font-size:.85rem; color:#4a5568; flex-wrap:wrap; }
.stdpager .sp-count { font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:.2rem; }
.stdpager .sp-size select { padding:.2rem .35rem; border:1px solid #cbd5e0; border-radius:6px; font-size:.82rem; }
.stdpager .sp-nav { display:flex; gap:.5rem; }
.stdpager .sp-nav .btn-secondary { padding:.25rem .7rem; font-size:.82rem; }

/* ═ 月份切換列（差勤依月篩選） ═ */
/* 打卡紀錄：上下班時間後的小圓點＝每一筆打卡（綠正常／紅異常） */
.pk { font-size:.55rem; margin-left:.2rem; vertical-align:middle; cursor:help; }
.pk.ok { color:#38a169; } .pk.bad { color:#e53e3e; }
.stdmonth { display:inline-flex; align-items:center; gap:.35rem; margin-left:.5rem; }
.stdmonth .btn-secondary, .stdmonth .btn-primary { padding:.2rem .55rem; font-size:.82rem; }
.stdmonth .sm-label { min-width:5.2rem; text-align:center; font-weight:600; font-variant-numeric:tabular-nums; }
/* 工作單列印：段落標題與長文字 */
.quote-sheet .print-h2 { font-size:1rem; margin:.8rem 0 .3rem; border-bottom:1px solid #999; padding-bottom:.15rem; }
.quote-sheet .print-text { white-space:pre-wrap; word-break:break-word; line-height:1.5; font-size:.92em; }
/* StdFileView：附件清單與燈箱預覽 */
.std-files { display:inline-flex; flex-wrap:wrap; gap:.3rem .9rem; }
.std-file { color:#2c5282; text-decoration:none; } .std-file:hover { text-decoration:underline; } .std-file.legacy { color:#a0aec0; }
.std-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:2000; display:flex; flex-direction:column; align-items:center; justify-content:center; outline:0; }
.std-lightbox .lb-top { position:absolute; top:.6rem; left:.8rem; right:.8rem; display:flex; gap:.5rem; align-items:center; color:#fff; }
.std-lightbox .lb-top .lb-name { flex:1 1 auto; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .std-lightbox .lb-top .muted { color:#cbd5e0; }
.std-lightbox .lb-body { max-width:92vw; max-height:86vh; margin-top:2.4rem; background:#fff; border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,.5); overflow:hidden; display:flex; }
.std-lightbox .lb-body img { max-width:92vw; max-height:86vh; object-fit:contain; display:block; }
.std-lightbox .lb-body iframe { width:92vw; height:86vh; border:0; }
.std-lightbox .lb-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.85); border:0; border-radius:999px; width:2.6rem; height:2.6rem; font-size:1.6rem; line-height:1; cursor:pointer; color:#2d3748; }
.std-lightbox .lb-nav.prev { left:1rem; } .std-lightbox .lb-nav.next { right:1rem; }
@media print { .std-lightbox { display:none; } }
/* 公司規章：閱讀與列印 */
.policy-wrap { line-height:1.75; font-size:.95rem; max-width:60rem; }
.policy-wrap section { margin-bottom:1.2rem; }
.policy-wrap h2 { font-size:1.15rem; margin:1.2rem 0 .5rem; padding-bottom:.25rem; border-bottom:2px solid #cbd5e0; }
.policy-wrap h3 { font-size:1.02rem; margin:.9rem 0 .3rem; }
.policy-wrap h4 { font-size:.98rem; margin:.8rem 0 .25rem; color:#2c5282; }
.policy-wrap p { margin:.25rem 0 .55rem; text-align:justify; }
.policy-wrap ul { margin:.2rem 0 .6rem 1.4rem; padding:0; } .policy-wrap li { margin:.15rem 0; }
.policy-table { border-collapse:collapse; margin:.4rem 0 .8rem; font-size:.9rem; }
.policy-table th, .policy-table td { border:1px solid #cbd5e0; padding:.25rem .6rem; text-align:left; vertical-align:top; }
.policy-table th { background:#f7fafc; }
.policy-missing { color:#c53030; background:#fff5f5; padding:0 .2rem; }
.policy-print .policy-wrap { max-width:none; font-size:.9em; }
@media print { .policy-wrap h2 { page-break-after:avoid; } .policy-table { page-break-inside:auto; } }
/* 側欄：所有列高一致（與常用區相同），覆蓋 bootstrap .nav-link 與 summary 的預設內距。
   2026-10-10 把上下內距收到原來的 1/3（.18→.06rem），行高也從 1.45 收到 1.25，
   一列從約 26px 變成約 19px，整個選單少捲一截。 */
.swan-nav .nav-link.nav-top, .swan-nav details.nav-grp > summary, .swan-nav .nav-link.sub, .nav-fav .nav-row .nav-link.sub { padding-top:.06rem !important; padding-bottom:.06rem !important; line-height:1.25; margin:0; }
.swan-nav details.nav-grp { margin:0; }
.swan-nav details.nav-l2 > summary { padding-top:.05rem !important; padding-bottom:.05rem !important; }
.swan-nav .nav-row, .nav-fav .nav-row { min-height:0; }
.nav-star { padding-top:0; padding-bottom:0; line-height:1.2; }

/* 請假頁的遞延特休提示：跟剩餘特休同一塊，但要看得出是「快到期的那一段」 */
.sl-carry { margin-top: .35rem; padding: .35rem .55rem; border-radius: 6px;
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: .82rem; line-height: 1.6; }

/* ===== 外銷英文單據（Proforma Invoice／Invoice／Receipt）=====
   沿用中文版的 .quote-sheet 版型，只覆寫會被英文弄壞的地方。
   不動既有 class，免得影響那十幾支中文版型。 */
.en-sheet .quote-title { letter-spacing: 1px; font-size: 22px; }   /* 中文四字標題的 6px 字距會讓英文散掉 */
.en-sheet { font-family: "Segoe UI", Arial, "Helvetica Neue", sans-serif; }
.en-sheet .quote-meta td { vertical-align: top; line-height: 1.75; }
/* 抬頭區：照使用者現在手打的 Word，四格都有框線 */
.en-sheet .en-meta { width: 100%; border-collapse: collapse; margin: .6rem 0 .8rem; }
.en-sheet .en-meta td { border: 1px solid #000; padding: .4rem .55rem; vertical-align: top; line-height: 1.7; }
.en-sheet .en-sub { color: #333; font-size: .9em; }
.en-sheet .en-indent { padding-left: .9rem; font-weight: 700; }
.en-sheet .en-desc { color: #444; font-size: .88em; white-space: pre-line; margin-top: .15rem; }
.en-sheet .en-say { margin: .5rem 0 .2rem; font-weight: 700; letter-spacing: .3px; }
.en-sheet .en-note { color: #555; font-size: .85em; }
.en-sheet .en-block { margin-top: .9rem; border: 1px solid #cbd5e0; border-radius: 4px; padding: .45rem .6rem; }
.en-sheet .en-block-title { font-weight: 700; letter-spacing: .5px; margin-bottom: .25rem; }
.en-sheet .en-pre { white-space: pre-line; line-height: 1.7; }
.en-sheet .en-foot { margin-top: 1rem; font-size: .88em; color: #333; line-height: 1.7; }
.en-sheet .en-thanks { margin-top: .4rem; font-style: italic; }
.en-sheet .en-sign-row { display: flex; gap: 2rem; margin-top: 1.2rem; }
.en-sheet .en-sign { flex: 1 1 0; }
.en-sheet .en-sign-line { display: block; border-bottom: 1px solid #000; height: 2.6rem; }

/* 列印前的設定列（填幣別、匯率、里程碑）：只在畫面上，列印時由 .no-print 隱藏。
   底色是深藍（沿用 .print-toolbar），所以提示文字一律用淺色膠囊，不能用深紅深綠。 */
.en-setup { flex-direction: column; align-items: stretch; gap: .45rem; }
.en-setup .en-setup-row { display: flex; gap: .9rem; align-items: flex-end; flex-wrap: wrap; }
.en-setup label { flex-direction: column; align-items: flex-start; gap: .15rem; font-size: .78rem; letter-spacing: .2px; }
.en-setup select, .en-setup input, .en-setup textarea {
    color: #1a202c; background: #fff; border: 1px solid #cbd5e0; border-radius: 6px; padding: .3rem .45rem; font-size: .88rem;
}
.en-setup textarea { font-family: ui-monospace, "Consolas", "Menlo", monospace; font-size: .82rem; line-height: 1.5; }
.en-setup .en-setup-btns { display: inline-flex; gap: .5rem; align-items: center; margin-left: auto; }
.en-setup .en-setup-msgs:empty { display: none; }
.en-pill { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; }
.en-pill.bad { background: #fed7d7; color: #822727; }
.en-pill.ok  { background: #c6f6d5; color: #22543d; }