.v2-nav-center {
    flex: 1 1 auto;
    text-align: center;
    font-size: 1.9rem;   /* 2026/09/10：依指示再加大 */
    font-weight: 700;
    color: #fff;   /* 2026/09/09：banner 標題改白色 */
    text-shadow: 0 1px 6px rgba(16, 58, 89, .5);   /* 淺色底圖上仍看得清楚 */
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-card table th:nth-child(7),
.table-card table td:nth-child(7) {
    display: none;
}

/* 大宗資材維護：保留既有表格功能，並依新欄位調整欄寬。 */
#green-item-module .table-card table {
    min-width: 0;
    table-layout: fixed;
}

#green-item-module .table-card table th:nth-child(1),
#green-item-module .table-card table td:nth-child(1) { width: 5%; }

#green-item-module .table-card table th:nth-child(2),
#green-item-module .table-card table td:nth-child(2) { width: 11%; }

#green-item-module .table-card table th:nth-child(3),
#green-item-module .table-card table td:nth-child(3) { width: 8%; }

#green-item-module .table-card table th:nth-child(4),
#green-item-module .table-card table td:nth-child(4) { width: 19%; }

#green-item-module .table-card table th:nth-child(5),
#green-item-module .table-card table td:nth-child(5) { width: 14%; }

#green-item-module .table-card table th:nth-child(6),
#green-item-module .table-card table td:nth-child(6) { width: 9%; }

#green-item-module .table-card table th:nth-child(7),
#green-item-module .table-card table td:nth-child(7) {
    display: table-cell;
    width: 24%;
}

#green-item-module .table-card table th:nth-child(8),
#green-item-module .table-card table td:nth-child(8) { width: 10%; }

#green-item-module .table-card td {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    #green-item-module .table-card table th:nth-child(7),
    #green-item-module .table-card table td:nth-child(7) {
        display: flex;
        width: 100%;
    }
}

/* 編輯預算／標單／契約：平板寬度也改用資料卡，左側標題、右側內容。 */
@media (min-width: 769px) and (max-width: 1024px) {
    .budget-edit-page .table-scroll {
        overflow: visible;
    }

    .budget-edit-page .estimate-table,
    .budget-edit-page .estimate-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 6px;
        box-sizing: border-box;
    }

    .budget-edit-page .estimate-table thead {
        display: none;
    }

    .budget-edit-page .estimate-table tr {
        display: block;
        margin: 0 0 12px;
        overflow: hidden;
        border: 1px solid #d6e1e8;
        border-radius: 10px;
        background: #fff;
    }

    .budget-edit-page .estimate-table .item-row td,
    .budget-edit-page .estimate-table .group td[data-label] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px;
        padding: 10px 15px;
        box-sizing: border-box;
        border: 0;
        border-bottom: 1px solid #e6edf1;
        text-align: right !important;
        white-space: normal !important;
    }

    .budget-edit-page .estimate-table .item-row td::before,
    .budget-edit-page .estimate-table .group td[data-label]::before,
    .budget-edit-page .estimate-table .grand-total .total-number::before {
        content: attr(data-label);
        flex: 0 0 38%;
        color: var(--brand-accent);
        font-size: var(--fs-base);
        font-weight: 600;
        text-align: left;
    }

    .budget-edit-page .estimate-table .item-row td:empty,
    .budget-edit-page .estimate-table .group td:not([data-label]),
    .budget-edit-page .estimate-table .grand-total td:not(.total-number):not(:nth-child(2)) {
        display: none;
    }

    .budget-edit-page .estimate-table .item-row td:last-child,
    .budget-edit-page .estimate-table .group td[data-label]:last-child {
        border-bottom: 0;
    }

    .budget-edit-page .estimate-table .grand-total td:nth-child(2) {
        display: block;
        padding: 12px 15px 7px;
        border: 0;
        text-align: left;
    }

    .budget-edit-page .estimate-table .grand-total .total-number {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100% !important;
        padding: 10px 15px;
        box-sizing: border-box;
        border: 0;
        border-top: 1px solid #478268;
        text-align: right !important;
    }
}

/* 最終覆寫：移除工程外碼、單位造價、工料編號後的桌面欄寬。 */
@media (min-width: 1025px) {
    .budget-edit-page .estimate-table { min-width: 1110px !important; }
    .budget-edit-page .estimate-table th:nth-child(1) { width: 52px; }
    .budget-edit-page .estimate-table th:nth-child(2) { width: 230px; }
    .budget-edit-page .estimate-table th:nth-child(3),
    .budget-edit-page .estimate-table th:nth-child(4) { width: 48px; }
    .budget-edit-page .estimate-table th:nth-child(5),
    .budget-edit-page .estimate-table th:nth-child(6),
    .budget-edit-page .estimate-table th:nth-child(7) { width: 68px; }
    .budget-edit-page .estimate-table th:nth-child(8) { width: 110px; }
    .budget-edit-page .estimate-table th:nth-child(n+9) { width: 86px; }
}

/* 工項編輯：已收起的欄位改於第二個綠色資訊區塊編輯。 */
.budget-edit-page .item-modal-removed-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 20px 18px;
    padding: 14px 16px;
    border: 1px solid #a8d5bd;
    border-radius: 7px;
    background: #eff9f3;
}

.budget-edit-page .item-modal-removed-fields label {
    display: grid;
    gap: 6px;
    color: var(--text-2);
    font-weight: 700;
}

.budget-edit-page .item-modal-removed-fields input {
    width: 100%;
    min-width: 0;
    height: 36px;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid #a8d5bd;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: inherit;
}

/* 綠色工項編輯改採與碳排頁一致的「類型、權重、備註」清單。 */
.budget-edit-page .green-type-editor {
    margin: 0 20px 16px;
}

.budget-edit-page .green-type-entry {
    display: grid;
    grid-template-columns: minmax(0,1fr) calc(100px * var(--fs-scale)) auto;
    gap: 10px 14px;
    align-items: end;
    padding: 16px 18px;
    border: 1px dashed #9fc7eb;
    border-radius: 7px;
    background: #fbfdff;
}

.budget-edit-page .green-type-entry label {
    display: grid;
    gap: 6px;
    color: var(--brand-accent);
    font-weight: 700;
}

.budget-edit-page .green-type-entry select,
.budget-edit-page .green-type-entry input,
.budget-edit-page .green-type-entry textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: inherit;
}

.budget-edit-page .green-type-entry textarea {
    min-height: 72px;
    resize: vertical;
}

.budget-edit-page .green-type-entry .green-type-note {
    grid-column: 1 / 3;
}

.budget-edit-page .green-type-entry .primary-button {
    min-width: 64px;
    height: 36px;
    align-self: end;
}

.budget-edit-page .green-type-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
}

.budget-edit-page .green-type-table th,
.budget-edit-page .green-type-table td {
    width: auto;
}

.budget-edit-page .green-type-table th:last-child,
.budget-edit-page .green-type-table td:last-child {
    width: calc(92px * var(--fs-scale));
    text-align: center;
    white-space: nowrap;
}

.budget-edit-page .green-type-table .icon-action {
    margin: 0 2px;
}

.budget-edit-page .green-type-table .green-type-empty td {
    padding: 24px 10px;
    color: var(--text-4);
    font-weight: 700;
    text-align: center;
}

/* 分頁資訊、筆數選單與頁碼同列置於表格下方。 */
.budget-edit-page .table-pagination-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: calc(100% - 24px);
    margin: 10px 12px 14px;
    padding: 8px 10px;
    box-sizing: border-box;
    border: 1px solid #c8d8e6;
    border-radius: 8px;
    background: #fff;
}

.budget-edit-page .table-pagination-footer .table-pagination-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-2);
    white-space: nowrap;
}

.budget-edit-page .table-pagination-footer .table-pagination-pages {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.budget-edit-page .table-pagination-pages button:disabled {
    color: var(--text-4);
    border-color: #d8e0e7;
    background: #fff;
    cursor: default;
}

@media (max-width: 768px) {
    .budget-edit-page .item-modal-removed-fields {
        grid-template-columns: 1fr;
        margin-inline: 14px;
    }

    .budget-edit-page .green-type-editor {
        margin-inline: 14px;
    }

    .budget-edit-page .green-type-entry {
        grid-template-columns: 1fr calc(82px * var(--fs-scale));
        padding: 13px;
    }

    .budget-edit-page .green-type-entry .green-type-note {
        grid-column: 1 / -1;
    }

    .budget-edit-page .green-type-entry .primary-button {
        grid-column: 2;
    }

    .budget-edit-page .table-pagination-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        width: calc(100% - 12px);
        margin: 8px 6px 12px;
    }

    .budget-edit-page .table-pagination-footer .table-pagination-info {
        flex-wrap: wrap;
    }
}

/* 手機維持既有的項目資料卡版型：每列一張卡，左標題、右內容。 */
@media (max-width: 768px) {
    .budget-edit-page .table-scroll { overflow: visible !important; }
    .budget-edit-page .estimate-table,
    .budget-edit-page .estimate-table tbody { display: block !important; width: 100% !important; min-width: 0 !important; padding: 6px; box-sizing: border-box; }
    .budget-edit-page .estimate-table thead { display: none !important; }
    .budget-edit-page .estimate-table tr { display: block !important; margin: 0 0 12px; overflow: hidden; border: 1px solid #d6e1e8; border-radius: 9px; }
    .budget-edit-page .estimate-table .item-row td,
    .budget-edit-page .estimate-table .group td[data-label] { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100% !important; min-width: 0 !important; min-height: 42px; padding: 9px 15px; box-sizing: border-box; border: 0; border-bottom: 1px solid #e2eaee; text-align: right !important; white-space: normal !important; }
    .budget-edit-page .estimate-table .item-row td::before,
    .budget-edit-page .estimate-table .group td[data-label]::before,
    .budget-edit-page .estimate-table .grand-total .total-number::before { content: attr(data-label); flex: 0 0 39%; color: var(--brand-accent); font-size: var(--fs-md); font-weight: 600; text-align: left; }
    .budget-edit-page .estimate-table .item-row td:empty,
    .budget-edit-page .estimate-table .group td:not([data-label]),
    .budget-edit-page .estimate-table .grand-total td:not(.total-number):not(:nth-child(2)) { display: none !important; }
    .budget-edit-page .estimate-table .item-row td:last-child,
    .budget-edit-page .estimate-table .group td[data-label]:last-child { border-bottom: 0; }
}

/* 手機資料卡的別名另起一行，避免與工項名稱及鎖定框擠在一起。 */
@media (max-width: 768px) {
    .budget-edit-page .estimate-table .item-row td:nth-child(2) {
        display: grid !important;
        grid-template-columns: 39% auto minmax(0, 1fr);
        align-items: center;
        column-gap: 8px;
        row-gap: 5px;
    }

    .budget-edit-page .estimate-table .item-row td:nth-child(2)::before {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .budget-edit-page .estimate-table .item-row td:nth-child(2) .item-selector-control {
        grid-column: 2;
        grid-row: 1;
    }

    .budget-edit-page .estimate-table .item-row td:nth-child(2) .item-name-text {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        min-width: 0;
        text-align: right;
    }

    .budget-edit-page .estimate-table .item-row td:nth-child(2) .item-alias-text {
        display: block;
        grid-column: 2 / -1;
        grid-row: 2;
        margin: 0;
        padding-top: 2px;
        color: var(--brand-accent);
        text-align: right;
    }
}

.water-brand {
    height: 72px;
    width: 245px;
    padding: 12px 20px;
}

.water-brand img {
    width: 195px;
    max-height: 60px;
    object-fit: contain;
    object-position: left center;
}

.captcha {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 11px;
}

.captcha b {
    font: italic 25px Georgia, serif;
    letter-spacing: 7px;
    color: #694264;
    background: #faf7fa;
    padding: 3px 12px;
}

.captcha button {
    border: 0;
    border-radius: 4px;
    background: #697788;
    color: #fff;
    padding: 8px 12px;
    cursor: pointer;
}

/* 登入頁：延續工程、經費與估算模組的綠色資訊卡風格。 */
.water-login {
    min-height: 100vh;
    background: #edf4f4 url("../assets/login-background.png") center center / 100% auto no-repeat fixed;
    color: #28455a;
    overflow-x: hidden;
}

.login-brand {
    position: fixed;
    z-index: 2;
    top: 22px;
    left: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #2b5551;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.water-login-logo {
    position: static;
    width: 150px;
    max-width: none;
}

.login-layout {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(380px, 1fr) minmax(350px, 410px);
    align-items: center;
    gap: clamp(42px, 9vw, 160px);
    width: min(1180px, calc(100% - 80px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 110px 0 70px;
}

.login-intro {
    position: relative;
    overflow: hidden;
    max-width: 560px;
    padding: 24px 24px 88px;
    border: 1px solid #c8dfda;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fdfbde 0%, #eff8f6e0 100%);
    box-shadow: 0 16px 32px #275b5012;
}

.login-intro::before {
    position: absolute;
    z-index: 0;
    right: -14px;
    bottom: 29px;
    width: 205px;
    height: 90px;
    opacity: .23;
    background-image: linear-gradient(#5f9e8c 1px, transparent 1px), linear-gradient(90deg, #5f9e8c 1px, transparent 1px);
    background-size: 18px 18px;
    content: '';
    transform: perspective(160px) rotateX(58deg);
    transform-origin: bottom;
}

.login-intro::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 64px;
    border-top: 1px solid #91c7b4;
    background:
        linear-gradient(145deg, transparent 0 41%, #d2ebdf 41.4% 51%, transparent 51.4%) 0 100% / 145px 64px repeat-x,
        linear-gradient(105deg, transparent 0 44%, #b8ddcb 44.4% 58%, transparent 58.4%) 48px 100% / 175px 64px repeat-x,
        linear-gradient(90deg, #246c58, #2d896d 58%, #4e9a7d);
    content: '';
}

.login-intro>* {
    position: relative;
    z-index: 1;
}

.login-kicker {
    display: inline-flex;
    margin: 0 0 15px;
    padding: 7px 12px;
    border: 1px solid #a8d5c5;
    border-radius: 99px;
    background: #effaf5d9;
    color: #26755c;
    font-size: .84rem;
    font-weight: 700;
}

.login-intro h1 {
    margin: 0;
    color: #1e4b56;
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.28;
    letter-spacing: .04em;
}

.login-description {
    max-width: 500px;
    margin: 20px 0 26px;
    color: #3f5361;
    font-size: 1rem;
    line-height: 1.9;
}

.login-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #ccdfdf;
    border-radius: 12px;
    background: #fffffff0;
    box-shadow: 0 12px 30px #2d5d5a12;
}

.login-overview div {
    min-height: 95px;
    padding: 17px 16px;
    border-right: 1px solid #dce9e7;
}

.login-overview div:last-child {
    border-right: 0;
}

.login-overview strong,
.login-overview span {
    display: block;
}

.login-overview strong {
    margin-bottom: 8px;
    color: #216e58;
    font-size: .94rem;
}

.login-overview span {
    color: #47515e;
    font-size: .94rem;
    line-height: 1.55;
}

.water-login-card {
    position: static;
    width: auto;
    padding: 30px 32px 26px;
    transform: none;
    border: 1px solid #d5e3e4;
    border-radius: 16px;
    background: #fffffff5;
    box-shadow: 0 18px 42px #244f5726;
}

.login-card-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 19px;
    padding-bottom: 17px;
    border-bottom: 1px solid #dbe8e7;
}

.login-card-heading p {
    margin: 0 0 2px;
    color: #43505b;
    font-size: .97rem;
    font-weight: 600;
}

.water-login-card h2 {
    margin: 0;
    text-align: left;
    color: #254d59;
    font-size: 1.45rem;
    line-height: 1.2;
}

.water-login-card label {
    margin-top: 13px;
    color: #335368;
    font-size: .86rem;
    font-weight: 600;
}

.water-login-card input {
    box-sizing: border-box;
    height: 42px;
    margin-top: 6px;
    border-color: #cbdce0;
    border-radius: 7px;
    background: #fbfdfd;
    color: #294a61;
    font-size: .93rem;
}

.water-login-card input:focus {
    outline: 0;
    border-color: #3d9878;
    box-shadow: 0 0 0 3px #2d9b701c;
}

.captcha {
    gap: 10px;
    margin: 9px 0 18px;
}

.captcha b {
    flex: 1 1 auto;
    box-sizing: border-box;
    padding: 7px 14px;
    border: 1px dashed #aac6be;
    border-radius: 7px;
    background: #edf7f2;
    color: #2a7661;
    font-size: 1.12rem;
    letter-spacing: 8px;
    text-align: center;
}

.captcha button {
    width: 40px;
    height: 38px;
    padding: 0;
    border: 1px solid #b8d5ca;
    border-radius: 7px;
    background: #fff;
    color: #28785e;
    font-size: 1.1rem;
}

.captcha button:hover {
    background: #edf8f2;
}

.water-login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 44px;
    border-radius: 7px;
    background: #1f795d;
    box-shadow: 0 5px 12px #17634933;
    font-weight: 700;
    letter-spacing: .08em;
}

.water-login-button:hover {
    background: #17674f;
    transform: translateY(-1px);
}

.water-login-button span {
    font-size: 1.2rem;
}

.water-login-card .login-policy {
    margin: 17px 0 0;
    color: #47515e;
    font-size: .9rem;
    line-height: 1.7;
}

.water-login-card a {
    color: #267a61;
    font-weight: 600;
}

.login-footer {
    position: fixed;
    right: 28px;
    bottom: 18px;
    color: #445057;
    font-size: .88rem;
}

.logout-button {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border: 1px solid #c9d7df;
    border-radius: 6px;
    color: #3b5263;
    background: #fff;
    text-decoration: none;
    font-weight: 600;
}

.logout-button:hover {
    background: #f0f6f3;
    color: var(--text-2);
}

.project-link {
    text-decoration: none;
}

.project-link:hover {
    text-decoration: underline;
}

.analysis-check {
    width: 17px;
    height: 17px;
    accent-color: #287d61;
    cursor: pointer;
}

/* 分析勾勾：工項清單（.estimate-table）與單價分析項目彈窗內（.analysis-table）
   共用同一組樣式，兩邊長得完全一樣。 */
.budget-edit-page .estimate-table .analysis-action,
.budget-edit-page .analysis-table .analysis-action {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #c6d1dc;
    border-radius: 5px;
    background: #fff;
    color: var(--text-4);
    cursor: pointer;
}

.budget-edit-page .estimate-table .analysis-action.is-enabled,
.budget-edit-page .analysis-table .analysis-action.is-enabled {
    border-color: #8ec3a3;
    background: #edf8f1;
    color: #287d61;
}

.estimate-table .subtotal td {
    font-style: normal !important;
    font-weight: 700 !important;
}

.fixed-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: 16px;
    background: #f4f7f8;
    color: var(--text-2);
    cursor: pointer;
    font-weight: 700;
}

.fixed-switch input {
    position: absolute;
    opacity: 0;
}

.fixed-switch span {
    position: relative;
    width: 35px;
    height: 19px;
    border-radius: 12px;
    background: #a5b4c0;
}

.fixed-switch span:after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    transition: .18s;
}

.fixed-switch input:checked+span {
    background: #287d61;
}

.fixed-switch input:checked+span:after {
    left: 19px;
}

/* 編輯列表：欄位精簡與可選表格分頁。 */
.budget-edit-page .estimate-table {
    min-width: 1110px;
}

.budget-edit-page .table-pagination-switch {
    border: 1px solid #b8cde0;
    background: #f8fbfe;
    color: var(--text-2);
}

.budget-edit-page .table-pagination-switch input:checked + span {
    background: #286fae !important;
}

.table-pagination-controls {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    color: var(--text-2);
    font-size: var(--fs-base);
    font-weight: 600;
    white-space: nowrap;
}

.table-pagination-controls[hidden] {
    display: none;
}

.table-pagination-controls label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.table-pagination-controls select {
    width: 58px;
    height: 30px;
    padding: 3px 7px;
    border: 1px solid #c8d8e6;
    border-radius: 5px;
    background: #fff;
    color: var(--brand);
    font: inherit;
}

.table-pagination-pages {
    display: inline-flex;
    gap: 4px;
}

.table-pagination-pages button {
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border: 1px solid #c8d8e6;
    border-radius: 5px;
    background: #fff;
    color: var(--text-2);
    font: inherit;
    cursor: pointer;
}

.table-pagination-pages button:hover,
.table-pagination-pages button.is-current {
    border-color: #286fae;
    background: #286fae;
    color: #fff;
}

.budget-edit-page .estimate-table tr.table-pagination-hidden {
    display: none !important;
}

@media (max-width: 1024px) {
    .budget-edit-page .edit-title-with-lock {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .table-pagination-controls {
        width: 100%;
        flex-wrap: wrap;
        padding-left: 2px;
    }
}

.project-menu {
    position: fixed !important;
    z-index: 30;
    display: grid;
    width: 230px;
    padding: 6px;
    background: #fff !important;
    border: 1px solid #d5dfe1;
    border-radius: 8px;
    box-shadow: 0 8px 20px #123b3426;
}

.project-menu[hidden] {
    display: none !important;
}

.project-menu .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.project-menu .modal-title>span {
    font-size: var(--fs-2xl);
}

.project-menu .modal-title h2 {
    margin: 0;
    font-size: var(--fs-2xl);
    color: var(--text-1);
}

.project-menu .modal-title>b {
    padding: 4px 10px;
    border-radius: 5px;
    background: #e9f7eb;
    border: 1px solid #b8dfbd;
    color: #358648;
    font-size: var(--fs-base);
}

.close-project-menu {
    margin-left: auto !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-4) !important;
    font-size: 30px !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.project-menu-intro {
    margin: 20px 0 13px;
    color: var(--text-4);
}

.project-menu .project-options {
    display: grid;
    gap: 10px;
}

.project-menu .project-option {
    display: flex;
    gap: 13px;
    padding: 15px 19px;
    border: 1px solid #dce4e8;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.project-menu .project-option.selected {
    border-color: #2b7d60;
    background: #effcf4;
    box-shadow: inset 0 0 0 1px #9fd6b1;
}

.project-menu .project-option input {
    width: 18px;
    height: 18px;
    accent-color: #287d61;
}

.project-menu .project-option strong,
.project-menu .project-option small {
    display: block;
}

.project-menu .project-option strong {
    font-size: var(--fs-lg);
    color: var(--text-1);
}

.project-menu .project-option small {
    margin-top: 4px;
    color: var(--text-4);
}

.project-menu .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #dfe6e8;
}

.project-menu .modal-actions .primary-button,
.project-menu .modal-actions .secondary-button {
    height: 40px;
}

.project-menu .modal-title,
.project-menu .project-menu-intro,
.project-menu .modal-actions {
    display: none;
}

.project-menu .project-options {
    display: grid;
    gap: 0;
}

.project-menu .project-option {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-1);
    text-align: left;
    font: 14px "Noto Sans TC", Arial, sans-serif;
}

.project-menu .project-option input,
.project-menu .project-option small {
    display: none;
}

.project-menu .project-option strong {
    font-size: var(--fs-base);
    font-weight: 500;
    color: inherit;
}

.project-menu .project-option.selected,
.project-menu .project-option:hover {
    background: #eaf6ee;
    box-shadow: none;
    color: var(--text-2);
}

/* 預算／標單／契約列表的建立按鈕與建立選單統一使用藍色系。 */
#budget-module .project-create {
    border-color: #18578f !important;
    background: #18578f !important;
    color: #fff !important;
}

#budget-module .project-create:hover {
    border-color: #0d4577 !important;
    background: #0d4577 !important;
}

.project-menu .project-option.selected,
.project-menu .project-option:hover {
    background: #eaf3fb;
    color: var(--brand);
}

/* 「建立專案／建立標單」小型錨定選單：JS（placeProjectMenu）已會把 left 夾在
   12px ~ innerWidth - 寬度 - 12px 之間，這裡加一道保險，避免極窄裝置下固定的
   230px 寬度仍貼到螢幕邊緣或被裁切。 */
@media (max-width: 600px) {
    .project-menu {
        max-width: calc(100vw - 24px);
    }
}

.page-shell .editor-actions {
    position: relative;
    top: auto;
    z-index: 14;
}

.toolbar-fixed .page-shell .editor-actions {
    position: sticky;
    top: 72px;
}

.page-shell .editor-body {
    min-height: calc(100vh - 208px);
}

.editor-no-side {
    display: block;
}

.editor-no-side .estimate-wrap {
    padding: 15px 20px 88px;
}

.page-shell .editor-footer {
    position: static !important;
    margin: 0;
    padding: 20px 24px 34px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    justify-content: center !important;
}

.page-shell .estimate-table thead {
    position: relative;
    z-index: 2;
}

/* 開啟固定工具列時，表格標題列緊接在工具列下方一起固定。 */
.toolbar-fixed .page-shell .estimate-table thead {
    position: static;
}

.estimate-sticky-header {
    display: none;
    position: absolute;
    top: calc(100% - 1px);
    z-index: 2;
    overflow: hidden;
    background: #5d6d7d;
    pointer-events: none;
}

.estimate-sticky-header-table {
    min-width: 1160px;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
    will-change: transform;
}

.toolbar-fixed .estimate-sticky-header {
    display: block;
}

/* 標題列由固定工具列承載，避免被橫向捲動容器裁切。 */
.toolbar-fixed .page-shell .editor-actions {
    overflow: visible;
}

.toolbar-fixed .table-scroll .estimate-table > thead {
    position: static;
    visibility: hidden;
}

@media (max-width: 768px) {
    .toolbar-fixed .estimate-sticky-header {
        display: none;
    }
}

.page-shell .estimate-panel {
    overflow: visible;
}

.page-shell .table-scroll {
    overflow: auto;
}

.page-shell .editor-actions button {
    white-space: nowrap;
}

.estimate-panel {
    background: #fff;
    border: 1px solid #dce5e4;
    border-radius: 8px;
    overflow: hidden;
}

.estimate-panel .estimate-toolbar {
    min-width: 0;
    border: 0;
    border-bottom: 1px solid #dce5e4;
    border-radius: 0;
}

.estimate-table {
    table-layout: fixed;
    width: 100%;
    min-width: 1160px;
}

.estimate-table .col-no {
    width: 6%;
}

.estimate-table .col-item {
    width: 22%;
}

.estimate-table .col-unit,
.estimate-table .col-analysis {
    width: 5%;
}

.estimate-table .col-qty {
    width: 6%;
}

.estimate-table .col-price {
    width: 8%;
}

.estimate-table .col-total {
    width: 9%;
}

.estimate-table .col-code {
    width: 12%;
}

.estimate-table .col-carbon {
    width: 8%;
}

.estimate-table .col-action {
    width: 11%;
}

.estimate-table th,
.estimate-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.estimate-table th:nth-child(n+3),
.estimate-table td:nth-child(n+3) {
    text-align: center;
}

.collapse-row {
    min-width: 48px;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-2) !important;
    font-weight: 700;
    cursor: pointer;
}

.collapse-row .right {
    display: flex;
    justify-content: flex-end;
}

.basic-form {
    padding-bottom: 22px;
}

.basic-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 22px;
}

.basic-form-grid label {
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.basic-form-grid input,
.basic-form-grid select,
.basic-form-grid textarea {
    width: 100%;
    margin-top: 6px;
    padding: 9px 11px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: 14px "Noto Sans TC", Arial, sans-serif;
}

.basic-form-grid input,
.basic-form-grid select {
    height: 38px;
}

.basic-form-grid textarea {
    resize: vertical;
}

.basic-form-full {
    grid-column: 1 / -1;
}

.basic-form-section-title {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding: 10px 0 8px;
    border-bottom: 2px solid #d8e6f3;
    color: var(--brand-accent);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.basic-detail-form {
    display: grid;
    gap: 18px;
}

.basic-page-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    border-bottom: 1px solid #d9e5ef;
}

.basic-page-tabs button {
    padding: 9px 17px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--brand-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.basic-page-tabs button:hover,
.basic-page-tabs button.is-active {
    border-bottom-color: #286fae;
    color: var(--brand);
}

.personnel-panel {
    display: grid;
    gap: 18px;
}

.personnel-panel[hidden],
.basic-detail-form[hidden] {
    display: none;
}

.add-basic-panel[hidden] {
    display: none;
}

.personnel-section {
    margin: 0;
    padding-bottom: 20px;
}

.personnel-section .card-heading {
    color: var(--brand-accent);
    font-size: var(--fs-lg);
}

.personnel-mode {
    display: flex;
    gap: 14px;
    margin-left: 18px;
    color: var(--brand);
    font-size: var(--fs-base);
    font-weight: 500;
}

.personnel-mode input { accent-color: #286fae; }

.personnel-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 10px;
    color: var(--text-3);
    font-size: var(--fs-base);
    font-weight: 600;
}

.personnel-table-toolbar .primary-button { padding: 0 14px; background: #286fae; border-color: #286fae; }
.personnel-table-toolbar .primary-button:hover { background: #18578f; }

.personnel-simple-table { padding: 0 22px; }
.personnel-simple-table > div { display: grid; grid-template-columns: 2fr 1.6fr 1.6fr calc(70px * var(--fs-scale)); align-items: center; min-height: 52px; border-bottom: 1px solid #e3ebf2; color: var(--brand); }
.personnel-simple-table > div:first-child { min-height: 44px; background: #f3f7fb; color: var(--brand-accent); font-size: var(--fs-md); }
.personnel-simple-table b, .personnel-simple-table strong { padding: 0 14px; }
.personnel-simple-table .personnel-delete-button {
    display: inline-grid;
    place-items: center;
    justify-self: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #f2a6ae;
    border-radius: 5px;
    background: #fff;
    color: #dd2e41;
    cursor: pointer;
}

.personnel-simple-table .personnel-delete-button:hover {
    background: #fff0f2;
    color: #d43c50;
}

.personnel-outline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 20px 22px; }
.personnel-outline-grid > div { display: grid; gap: 14px; padding: 16px; border: 1px dashed #a9c8e6; border-radius: 8px; }
.personnel-outline-grid label { color: var(--text-3); font-size: var(--fs-md); }
.personnel-outline-grid input { box-sizing: border-box; width: 100%; height: 38px; margin-top: 6px; padding: 0 11px; border: 1px solid #cad5de; border-radius: 6px; color: var(--text-2); font: inherit; }
.personnel-role-title { margin: 0 22px 12px; padding-top: 17px; border-top: 1px solid #e5edf3; color: var(--text-3); font-size: var(--fs-base); font-weight: 700; }
.personnel-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 22px; }
.personnel-role-grid article { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 16px; border: 1px solid #d8e3ed; border-radius: 8px; color: var(--brand-accent); }
.personnel-role-grid span { display: grid; gap: 4px; color: var(--brand); }
.personnel-role-grid b { font-size: var(--fs-base); }
.personnel-role-grid small { color: var(--brand-accent); font-size: var(--fs-md); font-weight: 600; }

.personnel-form-actions {
    margin-top: 4px;
    padding: 0;
}

.basic-form-actions .secondary-button,
.basic-form-actions .primary-button,
.personnel-table-toolbar .primary-button {
    min-height: 36px;
    border-radius: 6px;
    font-weight: 600;
}

.basic-form-actions .secondary-button {
    border-color: #c8d7e5;
    background: #fff;
    color: var(--brand-accent);
}

.basic-form-actions .secondary-button:hover {
    border-color: #9fb8ce;
    background: #f4f8fb;
    color: var(--brand);
}

@media (max-width: 760px) {
    .personnel-outline-grid,
    .personnel-role-grid {
        grid-template-columns: 1fr;
    }

    .personnel-simple-table > div {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px;
    }

    .personnel-simple-table > div:first-child { display: none; }
}

@media (max-width: 600px) {
    .basic-page-tabs { margin-right: 0; margin-left: 0; }
    .basic-page-tabs button { flex: 1; padding-right: 8px; padding-left: 8px; }
    .personnel-table-toolbar { align-items: flex-start; flex-direction: column; padding-right: 12px; padding-left: 12px; }
    .personnel-simple-table, .personnel-outline-grid, .personnel-role-grid { padding-right: 12px; padding-left: 12px; }
    .personnel-role-title { margin-right: 12px; margin-left: 12px; }
    .personnel-mode { gap: 8px; margin-left: auto; }
}

.basic-info-section {
    margin: 0;
    padding-bottom: 0;
}

.basic-info-section .card-heading {
    color: var(--brand-accent);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.basic-project-type {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #9cc3ef;
    border-radius: 6px;
    background: #f7fbff;
    color: var(--text-3);
    font-size: var(--fs-sm);
    margin: 20px 0;
}

.basic-project-type b {
    color: var(--brand-accent);
    font-size: var(--fs-base);
}

.basic-blue-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #9cc3ef;
    border-radius: 5px;
    background: #f1f7fd;
    color: transparent;
    cursor: pointer;
}

.basic-blue-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.basic-blue-check i {
    display: none;
    font-size: var(--fs-sm);
}

.basic-blue-check:has(input:checked) {
    border-color: #18578f;
    background: #18578f;
    color: #fff;
}

.basic-blue-check:has(input:checked) i {
    display: block;
}

.basic-overview-meta {
    grid-template-columns: calc(120px * var(--fs-scale)) minmax(220px,1fr) calc(120px * var(--fs-scale));
    max-width: 680px;
    padding-bottom: 10px;
}

/* 標案概況：工程規模、發包方式、會計科目與查閱用正確率。 */
.basic-overview-meta {
    grid-template-columns: repeat(3,minmax(calc(150px * var(--fs-scale)),1fr));
    max-width: none;
}

/* 標案概況第一排：工程年度、案件類別、狀態、分享，獨立一個4欄網格，
   不會影響到底下工程規模／發包方式／會計科目那一排（3欄）。 */
.basic-overview-meta-row1 {
    grid-template-columns: repeat(4,minmax(calc(150px * var(--fs-scale)),1fr));
    max-width: none;
}

/* 包住第一排與第二排兩個網格，讓它們上下堆疊（basic-overview-toolbar 是
   flex 容器，只有這個 stack 是它唯一的子項，內部再用 grid 排成兩排）。 */
.basic-overview-meta-stack {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 22px 0;
}

.basic-overview-meta-stack .basic-form-grid {
    padding: 0;
}

.basic-accounting-range > span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    margin-top: 6px;
}

.basic-accounting-range > span input {
    margin-top: 0;
}

.basic-accounting-range > span b {
    color: var(--text-3);
    font-weight: 500;
}

.basic-readonly-rates {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 0 22px 14px;
}

.basic-readonly-rates label {
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.basic-readonly-rates input {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    margin-top: 6px;
    padding: 0 12px;
    border: 1px solid #c9d9e8;
    border-radius: 7px;
    background: #f3f6f9;
    color: var(--text-2);
}

.basic-readonly-rates .basic-total-price input { background: #fff; }

/* 專案設計方式設定：沿用基本資料的虛線分區與表單控制項。 */
.basic-design-setting {
    margin: 0 22px 14px;
    padding: 16px;
    border: 1px dashed #a9c8e6;
    border-radius: 8px;
    background: #fff;
}

.basic-design-setting-title {
    margin-bottom: 14px;
    color: var(--brand);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.basic-design-setting-content {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    gap: 24px;
    align-items: start;
}

.basic-design-options { display: grid; gap: 11px; }
.basic-design-options label,
.basic-design-rule label { color: var(--text-2); font-size: var(--fs-base); }
.basic-design-options input { accent-color: #286fae; }
.basic-design-rule { padding-left: 22px; border-left: 1px solid #d9e4ed; }
.basic-design-rule p { margin: 12px 0 0; color: #d13f3f; font-size: var(--fs-md); font-weight: 600; line-height: 1.55; }
.basic-design-check-row { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--fs-base); }
.basic-design-check-row .basic-blue-check { flex: 0 0 auto; }

@media (max-width: 760px) {
    .basic-overview-meta,
    .basic-overview-meta-row1,
    .basic-readonly-rates {
        grid-template-columns: 1fr;
    }

    .basic-design-setting-content { grid-template-columns: 1fr; gap: 14px; }
    .basic-design-rule { padding-top: 14px; padding-left: 0; border-top: 1px solid #d9e4ed; border-left: 0; }
}

.basic-overview-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 0 22px;
}

.basic-overview-toolbar .basic-overview-meta {
    flex: 1;
    margin: 0;
    padding-right: 0;
    padding-left: 0;
}

.basic-outline-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 0 22px 14px;
}

.basic-outline-group {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px dashed #a9c8e6;
    border-radius: 8px;
}

.basic-outline-group label,
.basic-location-row label,
.basic-organization-flow label {
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.basic-outline-group input,
.basic-location-row select,
.basic-organization-flow select {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    margin-top: 6px;
    padding: 0 11px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: 14px "Noto Sans TC", Arial, sans-serif;
}

.basic-location-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 22px 14px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #f4f7fb;
}

.basic-location-row b {
    color: var(--brand);
    font-size: var(--fs-base);
}

.basic-location-row label {
    width: calc(150px * var(--fs-scale));
}

.basic-location-row select {
    margin: 0;
}

.basic-organization-flow {
    display: grid;
    grid-template-columns: minmax(0,1fr) calc(22px * var(--fs-scale)) minmax(0,1fr) calc(22px * var(--fs-scale)) minmax(0,1fr) calc(22px * var(--fs-scale)) minmax(0,1fr);
    align-items: center;
    gap: 12px;
    padding: 0 22px 22px;
}

.basic-organization-flow label {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: 8px;
    background: #f4f7fb;
    color: var(--brand);
    font-size: var(--fs-base);
    font-weight: 700;
}

.basic-organization-flow select {
    margin: 0;
    font-weight: 400;
}

.basic-organization-flow > i {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: var(--fs-lg);
    text-align: center;
}

.basic-purchasing-flow {
    grid-template-columns: minmax(460px,1fr) calc(22px * var(--fs-scale)) minmax(calc(150px * var(--fs-scale)),.32fr);
    align-items: stretch;
}

.basic-purchasing-flow .basic-purchasing-org {
    min-width: 0;
}

.basic-purchasing-org-row {
    display: grid;
    grid-template-columns: minmax(calc(180px * var(--fs-scale)),.65fr) minmax(0,2fr);
    gap: 12px;
    margin-top: 0;
}

.basic-purchasing-org-row > select,
.basic-purchasing-org-row .org-combo-row {
    margin-top: 0;
}

@media (max-width: 620px) {
    .basic-purchasing-org-row {
        grid-template-columns: 1fr;
    }
}

.basic-decision-row {
    display: flex;
    align-items: end;
    gap: 8px;
    padding: 18px 22px 12px;
}

.basic-decision-row label {
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.basic-decision-row input {
    box-sizing: border-box;
    width: 160px;
    height: 38px;
    margin-left: 8px;
    padding: 0 11px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #f4f7fb;
    color: var(--text-2);
    font: 14px "Noto Sans TC", Arial, sans-serif;
}

.basic-decision-row .secondary-button {
    height: 34px;
    padding: 0 12px;
    border-color: #ef9b9b;
    color: #cb4848;
}

.basic-dashed-panel {
    display: grid;
    gap: 16px;
    margin: 0 22px 22px;
    padding: 18px;
    border: 1px dashed #a9c8e6;
    border-radius: 8px;
}

.basic-budget-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.basic-data-tile {
    padding: 16px;
    border-radius: 8px;
    background: #f3f6fa;
}

.basic-data-tile small {
    display: block;
    min-height: 18px;
    margin-bottom: 6px;
    color: var(--text-4);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.basic-data-tile label,
.basic-carbon-setting b {
    display: block;
    color: var(--brand);
    font-size: var(--fs-base);
    font-weight: 700;
}

.basic-data-tile input,
.basic-carbon-setting select,
.basic-carbon-setting input {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    margin-top: 12px;
    padding: 0 11px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: 14px "Noto Sans TC", Arial, sans-serif;
}

.basic-carbon-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 0;
}

.basic-carbon-setting {
    display: grid;
    gap: 13px;
    padding: 16px;
    border-radius: 8px;
    background: #eaf3ff;
}

.basic-carbon-setting > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.basic-carbon-setting b {
    flex: 0 0 auto;
}

.basic-carbon-setting select,
.basic-carbon-setting input {
    width: auto;
    min-width: 110px;
    margin-top: 0;
}

.basic-carbon-setting > div:first-child {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
}

.basic-carbon-setting > div:nth-child(2) {
    display: grid;
    grid-template-columns: auto minmax(0,1.2fr) minmax(calc(68px * var(--fs-scale)),.7fr) minmax(calc(68px * var(--fs-scale)),.7fr);
}

.basic-carbon-setting > div:first-child select,
.basic-carbon-setting > div:nth-child(2) select,
.basic-carbon-setting > div:nth-child(2) input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.basic-blue-switch {
    display: inline-flex;
    cursor: pointer;
}

.basic-blue-switch input { display: none; }

.basic-blue-switch span {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #b8c9d9;
}

.basic-blue-switch span::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    content: '';
    transition: transform .18s ease;
}

.basic-blue-switch:has(input:checked) span { background: #286fae; }
.basic-blue-switch:has(input:checked) span::after { transform: translateX(16px); }

@media (max-width: 850px) {
    .basic-overview-meta,
    .basic-overview-meta-row1,
    .basic-outline-grid {
        grid-template-columns: 1fr;
    }

    .basic-organization-flow {
        grid-template-columns: 1fr;
    }

    .basic-overview-toolbar {
        flex-direction: column;
    }

    .basic-budget-panel,
    .basic-carbon-panel {
        grid-template-columns: 1fr;
    }

    .basic-organization-flow > i {
        transform: rotate(90deg);
    }
}

@media (max-width: 600px) {
    .basic-outline-grid {
        padding-right: 12px;
        padding-left: 12px;
    }

    .basic-location-row,
    .basic-organization-flow {
        margin-right: 12px;
        margin-left: 12px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .basic-dashed-panel {
        margin-right: 12px;
        margin-left: 12px;
        padding: 12px;
    }

    .basic-decision-row {
        flex-wrap: wrap;
        row-gap: 8px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .basic-decision-row input {
        width: auto;
        max-width: 160px;
        flex: 1 1 auto;
    }

    .basic-carbon-setting > div {
        grid-template-columns: 1fr;
        flex-wrap: wrap;
    }

    .basic-carbon-setting > div:first-child,
    .basic-carbon-setting > div:nth-child(2) {
        grid-template-columns: 1fr;
    }

    .basic-carbon-setting > div:first-child select,
    .basic-carbon-setting > div:nth-child(2) select,
    .basic-carbon-setting > div:nth-child(2) input {
        width: 100%;
    }

    .basic-location-row {
        flex-wrap: wrap;
    }
}

.basic-check-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #f8fbfe;
}

.basic-form-grid .basic-check-field input {
    width: auto;
    height: auto;
    margin: 0 5px 0 0;
    padding: 0;
    accent-color: #286fae;
    vertical-align: middle;
}

.basic-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 0 22px;
}

/* 專案基本資料沿用建立分標專案的標題與按鈕配置。 */
.add-shell .page-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.add-shell .page-intro h1 {
    margin: 0;
    color: var(--brand);
    font-size: 23px;
}

.add-shell .page-intro .secondary-button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.add-shell .basic-form-actions {
    justify-content: center;
    margin-top: 26px;
}

/* 專案基本資料與建立分標專案使用相同的平板、手機排列。 */
@media (max-width: 850px) {
    .add-shell.basic-content .basic-form-grid {
        grid-template-columns: 1fr;
    }

    .add-shell.basic-content .basic-form-full {
        grid-column: auto;
    }
}

.analysis-fixed-price {
    appearance: none;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 1px solid #93c9a6;
    border-radius: 5px;
    background: #f1faf4;
    cursor: pointer;
    vertical-align: middle;
}

.analysis-fixed-price:checked {
    border-color: #27804e;
    background: #27804e;
}

.analysis-fixed-price:checked::after {
    display: block;
    color: #fff;
    content: '✓';
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 22px;
}

.analysis-lock-control {
    margin-right: 6px;
    vertical-align: middle;
}

.analysis-table td:nth-child(2) {
    vertical-align: middle;
}

.analysis-fixed-price {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.analysis-fixed-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #93c9a6;
    border-radius: 5px;
    background: #f1faf4;
    color: transparent;
    cursor: pointer;
    vertical-align: middle;
}

.analysis-fixed-control i {
    display: none;
    font-size: var(--fs-sm);
}

.analysis-fixed-control:has(input:checked) {
    border-color: #27804e;
    background: #27804e;
    color: #fff;
}

.analysis-fixed-control:has(input:checked) i {
    display: block;
}

.analysis-table tbody tr.is-locked select,
.analysis-table tbody tr.is-locked .analysis-fixed-control {
    pointer-events: none;
    opacity: .45;
}

.analysis-table tbody tr.is-selected {
    background: #f1faf4;
}

.analysis-table tbody tr.is-selected td {
    color: #216c4f;
    box-shadow: inset 0 2px 0 #27804e, inset 0 -2px 0 #27804e;
}

.analysis-table tbody tr.is-selected td:first-child {
    box-shadow: inset 2px 0 0 #27804e, inset 0 2px 0 #27804e, inset 0 -2px 0 #27804e;
}

.analysis-table tbody tr.is-selected td:last-child {
    box-shadow: inset -2px 0 0 #27804e, inset 0 2px 0 #27804e, inset 0 -2px 0 #27804e;
}

.analysis-table tbody tr.analysis-other {
    background: #fff;
}

.analysis-table td[data-editable="true"] {
    cursor: text;
}

.analysis-table td[data-editable="true"][contenteditable="true"] {
    outline: 0;
    background: #fffdf1;
    box-shadow: inset 0 0 0 1px #e4bc58;
}

.analysis-table tbody tr.is-locked {
    opacity: .62;
    background: #f3f6f5;
}

.analysis-table tbody tr.is-locked td[data-editable="true"] {
    pointer-events: none;
}

.analysis-lock-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #93c9a6;
    border-radius: 5px;
    background: #f1faf4;
    color: #27804e;
    cursor: pointer;
}

.analysis-lock-control input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.analysis-lock-control i {
    font-size: var(--fs-xs);
}

.analysis-lock-control:has(input:checked) {
    border-color: #27804e;
    background: #27804e;
    color: #fff;
}

.analysis-table .analysis-rounding {
    width: 48px;
    min-width: 0;
    height: 27px;
    border: 1px solid #cbd8e3;
    border-radius: 4px;
    background: #fff;
    color: var(--brand);
    font: inherit;
    text-align: center;
}

.analysis-table td:has(.analysis-fixed-price) {
    text-align: center;
}

.analysis-lock-control:not(:has(input:checked)) i {
    display: none;
}

.detail-code-trigger {
    min-height: 27px;
    padding: 3px 6px;
    border: 1px solid #ffffff;
    border-radius: 5px;
    background: #f1faf4;
    color: #246d55;
    cursor: pointer;
    font: inherit;
}

.analysis-table tbody tr.is-locked .detail-code-trigger {
    opacity: .45;
    pointer-events: none;
}

/* 單價分析項目彈窗 */
.analysis-modal[hidden] {
    display: none;
}

.analysis-modal {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.analysis-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 42, 53, .48);
}

.analysis-modal-card {
    position: relative;
    width: min(1180px, 100%);
    max-height: calc(100vh - 40px);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(22, 48, 64, .3);
}

.analysis-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid #dce8ef;
    background: #f7fbfd;
    border-radius: 12px 12px 0 0;
}

.analysis-modal-header h2 {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-xl);
}

.analysis-modal-header h2 i {
    margin-right: 7px;
    color: #27804e;
}

.analysis-modal-close {
    border: 0;
    background: transparent;
    color: var(--text-4);
    font-size: var(--fs-2xl);
    cursor: pointer;
}

.analysis-item-title {
    margin: 14px 20px;
    padding: 13px 17px;
    border: 1px solid #b9d2eb;
    border-radius: 7px;
    background: #eef6ff;
    color: var(--brand);
    font-weight: 700;
}

.analysis-item-title span {
    color: var(--text-1);
    font-size: var(--fs-xl);
}

.analysis-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 20px 10px;
    padding: 8px;
    border-radius: 6px;
    background: #eef6f2;
}

.analysis-toolbar button {
    min-height: 31px;
    padding: 5px 9px;
    border: 1px solid #9bcbb0;
    border-radius: 5px;
    background: #fff;
    color: #246d55;
    cursor: pointer;
    font: inherit;
}

.analysis-toolbar button i {
    margin-right: 4px;
}

.analysis-toolbar label {
    margin-left: auto;
    color: var(--text-2);
    font-size: var(--fs-md);
}

.analysis-toolbar input {
    accent-color: #27804e;
}

.analysis-table-wrap {
    margin: 0 20px;
    overflow: auto;
    border: 1px solid #d7e4df;
}

.analysis-table {
    width: max-content;
    min-width: 1350px;
    border-collapse: collapse;
}

.analysis-table th,
.analysis-table td {
    height: auto;
    padding: 7px 8px;
    border: 1px solid #d7e4df;
    color: var(--brand);
    text-align: center;
    white-space: nowrap;
}

.analysis-table th {
    background: #246d55;
    color: #fff;
    font-weight: 700;
}

.analysis-table th:nth-child(2),
.analysis-table td:nth-child(2) {
    min-width: 180px;
    text-align: left;
}

.analysis-table tbody tr.is-selected td {
    color: #216c4f;
}

.analysis-table tbody tr.analysis-other {
    background: #fff2f5;
}

.analysis-table input {
    accent-color: #27804e;
}

.analysis-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 18px 20px;
}

/* 挑選工項彈窗 */
.work-code-modal[hidden] {
    display: none;
}

.work-code-modal {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.work-code-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 42, 53, .48);
}

.work-code-modal-card {
    position: relative;
    width: min(1120px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(22, 48, 64, .3);
}

.work-code-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid #dce8ef;
    background: #f7fbfd;
}

.work-code-modal-header h2 {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-xl);
}

.work-code-modal-header h2 i {
    margin-right: 7px;
    color: #27804e;
}

.work-code-modal-close {
    border: 0;
    background: transparent;
    color: var(--text-4);
    font-size: var(--fs-2xl);
    cursor: pointer;
}

.work-code-item-title {
    margin: 14px 20px;
    padding: 13px 17px;
    border: 1px solid #b9d2eb;
    border-radius: 7px;
    background: #eef6ff;
    color: var(--brand);
    font-weight: 700;
}

.work-code-item-title span {
    color: var(--text-1);
    font-size: var(--fs-xl);
}

.work-code-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 20px 12px;
}

.work-code-filters label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-2);
    font-size: var(--fs-base);
}

.work-code-filters select,
.work-code-filters input {
    height: 32px;
    min-width: 0;
    border: 1px solid #cbd8e3;
    border-radius: 5px;
    padding: 4px 8px;
    font: inherit;
}

.work-search {
    margin-left: auto;
}

.work-search input {
    width: 180px;
}

.work-search button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 5px;
    background: #247657;
    color: #fff;
    cursor: pointer;
}

.work-code-table-wrap {
    margin: 0 20px;
    overflow-x: auto;
    border: 1px solid #d7e4df;
}

.work-code-table {
    width: 100% !important;
    min-width: 930px !important;
    border-collapse: collapse;
}

.work-code-table th,
.work-code-table td {
    height: auto;
    padding: 7px 8px;
    border: 1px solid #d7e4df;
    color: var(--brand);
    text-align: left;
    white-space: nowrap;
}

.work-code-table th {
    background: #246d55;
    color: #fff;
    font-weight: 700;
}

.work-code-table tbody tr {
    cursor: pointer;
}

.work-code-table tbody tr:hover {
    background: #f1faf4;
}

.work-code-table tbody tr.is-selected {
    background: #f1faf4;
}

.work-code-table tbody tr.is-selected td {
    color: #216c4f;
    box-shadow: inset 0 2px 0 #27804e, inset 0 -2px 0 #27804e;
}

.work-code-table tbody tr.is-selected td:first-child {
    box-shadow: inset 2px 0 0 #27804e, inset 0 2px 0 #27804e, inset 0 -2px 0 #27804e;
}

.work-code-table tbody tr.is-selected td:last-child {
    box-shadow: inset -2px 0 0 #27804e, inset 0 2px 0 #27804e, inset 0 -2px 0 #27804e;
}

.work-code-table tbody tr.is-selected i {
    color: #27804e;
}

.work-code-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 18px 20px;
}

/* 手機版單價分析：選取整筆資料時僅顯示卡片外框，不為每個欄位畫框。 */
@media (max-width: 770px) {
    .budget-edit-page .analysis-table tbody tr.is-selected,
    .contract-edit-page .analysis-table tbody tr.is-selected {
        box-shadow: none !important;
    }

    .budget-edit-page .analysis-table tbody tr.is-selected {
        border: 2px solid #287d61 !important;
    }

    .contract-edit-page .analysis-table tbody tr.is-selected {
        border: 2px solid #8064a6 !important;
    }

    .budget-edit-page .analysis-table tbody tr.is-selected td,
    .contract-edit-page .analysis-table tbody tr.is-selected td {
        box-shadow: none !important;
    }
}

@media (max-width: 640px) {
    .work-code-modal {
        padding: 10px;
    }

    .work-code-modal-card {
        max-height: calc(100vh - 20px);
    }

    .work-code-item-title,
    .work-code-filters,
    .work-code-table-wrap {
        margin-left: 12px;
        margin-right: 12px;
    }

    .work-search {
        width: 100%;
        margin-left: 0;
    }

    .work-search input {
        flex: 1;
    }

    .work-code-modal-actions {
        padding: 14px 12px;
    }
}

@media (max-width: 600px) {
    .add-shell.basic-content .page-intro {
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 18px;
    }

    .add-shell.basic-content .page-intro h1 {
        font-size: var(--fs-2xl);
    }

    .add-shell.basic-content .page-intro .secondary-button {
        height: 34px;
        padding: 0 10px;
        white-space: nowrap;
    }

    .add-shell.basic-content .basic-form {
        border-radius: 8px;
    }

    .add-shell.basic-content .basic-form-actions {
        flex-wrap: wrap;
        padding: 0;
    }
}

.inside_footer {
    position: relative;
    margin-top: 28px;
    padding: 9px 20px;
    text-align: left;
    background: #e9f3f1;
    border-top: 1px solid #cbded9;
}

.footer-G {
    color: var(--text-2);
    font-size: var(--fs-base);
}

.inside_footer .container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    max-width: 1500px;
    margin: 0 auto;
}

#gotop {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 25;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #28745d;
    cursor: pointer;
    box-shadow: 0 3px 10px #1e705844;
}

#gotop[hidden] {
    display: none !important;
}

#gotop:hover {
    background: #175a47;
}

#gotop img {
    width: 19px;
    height: 19px;
    object-fit: contain;
}

.icon-action {
    display: inline-grid !important;
    place-items: center;
    width: calc(30px * var(--fs-scale));
    height: calc(30px * var(--fs-scale));
    padding: 0;
    border-radius: 5px;
    font-size: var(--fs-xl);
    line-height: 1;
    text-decoration: none;
}

.edit.icon-action {
    border: 1px solid #9cc3ef;
    color: var(--brand-accent);
    background: #f5faff;
    margin-right: 7px;
}

.delete.icon-action {
    border: 1px solid #f1b2b7;
    color: #d63948;
    background: #fff7f7;
    cursor: pointer;
}

.page-size-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: auto;
    color: var(--text-3);
    font-size: var(--fs-base);
}

.page-size-label select {
    height: 30px;
    padding: 0 24px 0 8px;
    border: 1px solid #cad5de;
    border-radius: 5px;
    background: #fff;
    color: var(--text-2);
    font: inherit;
}

.table-card th {
    font-size: var(--fs-base);
}

.page-intro h1,
.empty-card h1 {
    font-size: var(--fs-base);
}

@media (max-width: 680px) {
    .basic-form-grid {
        grid-template-columns: 1fr;
    }

    .basic-form-full {
        grid-column: auto;
    }
}

@media (max-width: 900px) {
    .water-login-card {
        right: 5%;
        width: min(360px, 90vw);
    }

    .water-login-logo {
        width: 230px;
    }
}

/* 系統登入頁：單一帳密驗證入口。 */
.water-login {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        linear-gradient(135deg, rgba(239, 248, 253, .92), rgba(224, 240, 249, .84)),
        #eaf4f9 url("../assets/login-background.png") center center / cover no-repeat fixed;
    color: #234969;
}

.water-login::before,
.water-login::after {
    position: fixed;
    z-index: 0;
    border: 1px solid rgba(83, 167, 209, .22);
    border-radius: 50%;
    pointer-events: none;
    content: '';
}

.water-login::before {
    top: 8%;
    left: -110px;
    width: 300px;
    height: 300px;
}

.water-login::after {
    right: -110px;
    bottom: 4%;
    width: 360px;
    height: 360px;
}

.login-brand {
    position: relative;
    z-index: 2;
    top: auto;
    left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(1220px, calc(100% - 64px));
    margin: 22px auto 0;
    color: #285875;
    font-size: .92rem;
    font-weight: 600;
}

.water-login-logo {
    position: static;
    /* 2026/09/15：登入頁 logo 放大 */
    width: 292px;
    max-width: 58vw;
    height: auto;
}

.login-layout {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 1;
    grid-template-columns: 1fr;
    place-items: center;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 34px 20px 66px;
}

.login-intro {
    display: none;
}

.water-login-card.login-system-card {
    position: static;
    box-sizing: border-box;
    width: min(100%, 440px);
    margin: 0;
    padding: 34px 38px 32px;
    transform: none;
    border: 1px solid rgba(151, 191, 219, .72);
    border-radius: 22px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 20px 48px rgba(47, 91, 119, .18);
}

.login-system-card .login-card-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin: 0;
    padding: 0 0 20px;
    border-bottom: 1px solid #dce8f0;
    text-align: left;
}

.login-system-card .login-card-heading p {
    margin: 0 0 2px;
    color: #3c515f;
    font-size: .9rem;
    font-weight: 500;
}

.login-system-card .login-card-heading h1 {
    margin: 0;
    color: #174c76;
    font-size: 1.55rem;
    letter-spacing: .08em;
}

.login-system-card form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
}

.login-system-card form[hidden] {
    display: none;
}

.login-system-card .certificate-login-heading {
    margin: 0 0 4px;
    text-align: center;
}

.login-system-card .certificate-login-heading strong {
    display: block;
    color: #174c76;
    font-size: 1.35rem;
    line-height: 1.45;
}

.login-system-card .certificate-login-heading p {
    margin: 5px 0 0;
    color: #c43a3a;
    font-size: .92rem;
    font-weight: 700;
}

.login-system-card form>label {
    display: block;
    width: 100%;
    margin: 0;
    color: #345b74;
    font-size: .9rem;
    font-weight: 600;
    text-align: left;
}

.login-system-card form input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    margin: 7px 0 0;
    padding: 0 13px;
    border: 1px solid #bfd4e3;
    border-radius: 8px;
    background: #fff;
    color: #254760;
    font: inherit;
    font-weight: 400;
    text-align: left;
}

.login-system-card form input:focus {
    outline: 0;
    border-color: #3e91c3;
    box-shadow: 0 0 0 3px rgba(54, 139, 189, .14);
}

.captcha-input-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) calc(126px * var(--fs-scale));
    gap: 9px;
    align-items: end;
}

.login-system-card .captcha {
    display: flex;
    box-sizing: border-box;
    width: auto;
    height: 46px;
    margin: 7px 0 0;
    padding: 0 7px 0 12px;
    border: 1px solid #bfd4e3;
    border-radius: 8px;
    background: #f4f9fc;
    align-items: center;
    justify-content: space-between;
}

.login-system-card .captcha b {
    color: #286b91;
    font-family: Georgia, serif;
    font-size: 1rem;
    font-style: italic;
    letter-spacing: .13em;
}

.login-system-card .captcha button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #286f9d;
    font-size: 1.1rem;
    cursor: pointer;
}

.login-system-card .captcha button:hover {
    background: #dceef8;
}

.login-system-card .water-login-button {
    width: 100%;
    min-height: 48px;
    margin: 7px 0 0;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #2d89bf, #17649a);
    box-shadow: 0 8px 16px rgba(31, 108, 158, .22);
    color: #fff;
    font: inherit;
    font-weight: 700;
    letter-spacing: .08em;
}

.login-system-card .water-login-button:hover {
    background: linear-gradient(135deg, #277cad, #125781);
    transform: translateY(-1px);
}

.login-system-card .natural-person-login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin: 10px 0 0;
    border: 1.5px solid #2d89bf;
    border-radius: 8px;
    background: #fff;
    color: #1d5f8e;
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .02em;
    text-decoration: none;
    transition: background .15s, transform .15s;
}

.login-system-card .natural-person-login-button:hover {
    background: #eaf4fb;
    transform: translateY(-1px);
}

.login-footer {
    position: relative;
    z-index: 1;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    margin: 0;
    padding: 15px 20px 18px;
    background: rgba(40, 92, 124, .9);
    color: #e9f5fc;
    font-size: .9rem;
    letter-spacing: .03em;
    text-align: center;
}

@media (max-width: 640px) {
    .login-brand {
        width: calc(100% - 36px);
        gap: 10px;
        margin-top: 17px;
        font-size: .92rem;
    }

    .water-login-logo {
        width: 104px;
    }

    .login-layout {
        padding: 25px 18px 45px;
    }

    .water-login-card.login-system-card {
        padding: 28px 21px 25px;
        border-radius: 16px;
    }

    .login-system-card .login-card-heading h1 {
        font-size: 1.35rem;
    }

    .captcha-input-row {
        grid-template-columns: minmax(0,1fr) calc(112px * var(--fs-scale));
        gap: 7px;
    }

    .login-footer {
        font-size: .85rem;
    }
}

/* 版本管理手機／平板：使用獨立資料卡，避免表格欄位擠壓。 */
.version-mobile-list,
.version-add-mobile-form {
    display: none;
}

@media (max-width: 900px) {

    .version-mobile-list {
        display: grid;
        gap: 9px;
    }

    .version-mobile-card {
        overflow: hidden;
        border: 1px solid #d7e1ea;
        border-radius: 8px;
        background: #fff;
    }

    .version-mobile-card>div,
    .version-add-mobile-form>label,
    .version-add-mobile-form>div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 44px;
        padding: 8px 10px;
        border-bottom: 1px solid #e4ebf0;
    }

    .version-mobile-card>div:last-child,
    .version-add-mobile-form>div:last-child {
        border-bottom: 0;
    }

    .version-mobile-card>div>span,
    .version-add-mobile-form>label,
    .version-add-mobile-form>div>span {
        flex: 0 0 auto;
        color: var(--brand-accent);
        font-size: var(--fs-sm);
        font-weight: 600;
    }

    .version-mobile-card>div>strong {
        min-width: 0;
        color: var(--brand);
        font-size: var(--fs-base);
        font-weight: 500;
        line-height: 1.45;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .version-mobile-card .version-load {
        flex: 0 0 auto;
    }

    .version-add-mobile-form {
        display: block;
        overflow: hidden;
        border: 1px solid #d7e1ea;
        border-radius: 8px;
        background: #fff;
    }

    .version-add-mobile-form>label {
        color: var(--brand-accent);
    }

    .version-add-mobile-form input {
        box-sizing: border-box;
        width: min(190px, 58%);
        min-width: 0;
        height: 34px;
        padding: 5px 8px;
        border: 1px solid #c7d5e1;
        border-radius: 5px;
        background: #fff;
        color: var(--brand);
        font: inherit;
        text-align: right;
    }
}

@media (max-width: 600px) {
    .water-login-logo {
        position: absolute;
        width: 190px;
        max-width: none;
        left: 18px;
        top: 16px;
    }

    .water-login-card {
        top: 70px;
        bottom: auto;
        transform: none;
        right: 5%;
        padding: 20px;
        width: 90vw;
    }
}

/* 手機版以資料卡呈現併標專案列表，完整保留每個欄位。 */
@media (max-width: 600px) {

    .master-project-card .table-wrap,
    .master-project-card .master-project-table,
    .master-project-card .master-project-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .master-project-card .master-project-table thead {
        display: none;
    }

    .master-project-card .master-project-table tbody tr {
        display: block;
        margin: 12px 0;
        padding: 7px 12px;
        border: 1px solid #d7e1ea;
        border-radius: 9px;
        background: #fff;
        box-shadow: 0 1px 2px #123c5210;
    }

    .master-project-card .master-project-table tbody tr.is-selected {
        background: #e8f6ee;
    }

    .master-project-card .master-project-table tbody tr.is-active {
        background: #cfe9da;
    }

    .master-project-card .master-project-table tbody tr.is-first-unselected td {
        border-top: 0;
    }

    .master-project-card .master-project-table tbody td {
        display: grid;
        grid-template-columns: calc(82px * var(--fs-scale)) minmax(0,1fr);
        align-items: center;
        gap: 10px;
        width: 100% !important;
        min-height: 34px;
        padding: 5px 0;
        border: 0;
        text-align: right;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .master-project-card .master-project-table tbody td::before {
        content: attr(data-label);
        color: var(--brand-accent);
        font-size: var(--fs-md);
        font-weight: 700;
        text-align: left;
    }

    .master-project-card .master-project-table tbody td:first-child {
        grid-template-columns: calc(82px * var(--fs-scale)) 1fr;
    }

    .master-project-card .master-project-table tbody td:first-child input {
        justify-self: end;
        width: 18px;
        height: 18px;
    }
}

.mobile-menu-backdrop {
    display: none;
}

/* 主選單改為純文字呈現。 */
.nav-item .nav-icon {
    display: none;
}

/* 編輯預算項目：對齊預算編製模組的頁面層級與卡片風格。 */
.budget-edit-page,
.budget-edit-page .page-shell {
    background: #f2f7fb;
}

.budget-edit-page .page-shell {
    min-height: 100vh;
}

.edit-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 2.2vw 15px;
}

.edit-page-heading h1 {
    margin: 0;
    color: var(--brand);
    font-size: 23px;
}

.edit-page-heading p {
    margin: 5px 0 0;
    color: var(--text-3);
    font-size: var(--fs-base);
}

.edit-page-heading .secondary-button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
}

.edit-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.edit-project-summary {
    display: block;
    margin: 20px 2.2vw 20px;
    padding: 16px 26px 18px;
    border: 1px solid #27804e;
    border-radius: 14px;
    background: #f5faf7;
}

.project-summary-code {
    display: block;
    margin-bottom: 6px;
    color: var(--brand-accent);
    font-size: var(--fs-base);
    font-weight: 700;
}

.project-summary-detail {
    display: flex;
    align-items: center;
    gap: 20px;
}

.project-summary-detail strong {
    color: var(--brand);
    font-size: 1.45rem;
    line-height: 1.35;
}

.project-summary-detail span {
    padding-left: 20px;
    border-left: 1px solid #a9c5df;
    color: var(--brand-accent);
    white-space: nowrap;
}

/* 專案基本資料：以藍色摘要呈現目前點選的案件，不影響表單原有欄位內容。 */
.basic-project-summary {
    margin-bottom: 0;
    border-color: #8fc2f1;
    background: #eaf4ff;
}

.basic-project-summary .project-summary-code {
    color: var(--brand-accent);
}

.basic-project-summary .project-summary-detail strong {
    color: var(--brand);
}

.basic-project-summary .project-summary-detail span {
    color: var(--brand-accent);
}

/* 編輯視窗共用的工項資訊欄位：可直接搜尋代碼或工項名稱。 */
.modal-item-fields {
    display: grid;
    grid-template-columns: minmax(calc(145px * var(--fs-scale)),1fr) minmax(calc(130px * var(--fs-scale)),.8fr) minmax(240px,2fr) minmax(calc(130px * var(--fs-scale)),.8fr);
    gap: 12px;
    align-items: end;
    margin: 18px 20px;
    padding: 14px 16px;
    border: 1px solid #27804e;
    border-radius: 7px;
    background: #eef6f2;
}

/* 工項編輯：第一列新增項次，保留工項項目較大的輸入寬度。 */
.item-modal .modal-item-fields {
    grid-template-columns: minmax(calc(76px * var(--fs-scale)),.45fr) minmax(calc(145px * var(--fs-scale)),1fr) minmax(240px,2fr) minmax(calc(110px * var(--fs-scale)),.7fr);
}

.modal-item-fields label {
    display: grid;
    gap: 6px;
    color: var(--brand);
    font-size: var(--fs-base);
    font-weight: 700;
}

.modal-item-fields input,
.modal-item-fields select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 7px 10px;
    border: 1px solid #bfd0e1;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: inherit;
    font-weight: 500;
}

.modal-item-fields input:focus,
.modal-item-fields select:focus {
    border-color: #2f7ec4;
    outline: 2px solid rgba(47, 126, 196, .16);
    outline-offset: 0;
}

.contract-edit-page .modal-item-fields {
    border-color: #c8b6e4;
    background: #faf7ff;
}

.contract-edit-page .modal-item-fields label { color: var(--text-1); }
.contract-edit-page .modal-item-fields input:focus,
.contract-edit-page .modal-item-fields select:focus { border-color: #7654a8; outline-color: rgba(118, 84, 168, .16); }

/* 綠色工項編輯視窗較窄，工項資訊固定以兩欄兩列呈現。 */
#green-modal .modal-item-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.item-modal-extra-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: -4px 20px 18px;
    padding: 14px 16px;
    border: 1px solid #27804e;
    border-radius: 7px;
    background: #eef6f2;
}

.item-modal-extra-fields label {
    display: grid;
    gap: 6px;
    color: var(--brand);
    font-size: var(--fs-base);
    font-weight: 700;
}

.item-modal-extra-fields input,

.estimate-table .item-name-text { display: inline-block; }

.estimate-table .item-alias-text {
    display: block;
    margin: 6px 0 3px 30px;
    color: var(--brand-accent);
    font-size: var(--fs-xs);
    line-height: 1.35;
}

/* 編輯預算／標單／契約列表不顯示屬性標記欄位，保留資料欄位索引供既有功能使用。 */
/* 隱藏欄位後仍填滿編輯區的可用寬度，避免右側留下空白。 */
.budget-edit-page .estimate-table {
    width: 100% !important;
    min-width: 100% !important;
}

@media (min-width: 769px) {
    .budget-edit-page .estimate-panel,
    .budget-edit-page .table-scroll {
        box-sizing: border-box;
        width: 100% !important;
    }

    .budget-edit-page .estimate-table {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    .budget-edit-page .estimate-sticky-header-table {
        table-layout: fixed !important;
    }

    .budget-edit-page .estimate-table th,
    .budget-edit-page .estimate-table td {
        min-width: 0 !important;
    }

    .budget-edit-page .estimate-table th:nth-child(15),
    .budget-edit-page .estimate-table td:nth-child(15),
    .budget-edit-page .estimate-table th:nth-child(16),
    .budget-edit-page .estimate-table td:nth-child(16) {
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        padding-right: 5px !important;
        padding-left: 5px !important;
        text-align: center !important;
    }
}

/* 碳排放推估：彈窗工項資訊採用統一的藍色欄位區。 */
.carbon-edit-page .carbon-item-context {
    display: grid;
    grid-template-columns: calc(172px * var(--fs-scale)) calc(138px * var(--fs-scale)) minmax(240px,1fr) calc(140px * var(--fs-scale));
    gap: 12px;
    margin: 18px 20px 12px;
    padding: 14px 16px;
    border: 1px solid #9bc4ee;
    border-radius: 7px;
    background: #eef6ff;
}

.carbon-edit-page .carbon-item-context label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--brand);
    font-size: var(--fs-base);
    font-weight: 700;
}

.carbon-edit-page .carbon-item-context input {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 7px 10px;
    box-sizing: border-box;
    border: 1px solid #b8cee5;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: inherit;
}

@media (max-width: 700px) {
    .carbon-edit-page .carbon-item-context {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-right: 14px;
        margin-left: 14px;
        padding: 12px;
    }

    .carbon-edit-page .carbon-item-context-name {
        grid-column: 1 / -1;
    }
}

.contract-edit-page .item-modal-extra-fields { border-color: #c8b6e4; background: #fcfaff; }
.contract-edit-page .item-modal-extra-fields label { color: var(--text-1); }

@media (max-width: 760px) {
    .modal-item-fields {
        grid-template-columns: 1fr 1fr;
        margin: 14px 12px;
        padding: 12px;
    }

    .modal-item-fields .item-name-field { grid-column: 1 / -1; }

    .item-modal-extra-fields {
        grid-template-columns: 1fr;
        margin: -4px 12px 14px;
        padding: 12px;
    }
}

.budget-edit-page .page-shell .editor-actions {
    position: relative;
    top: auto;
    z-index: 1;
    margin: 0 2.2vw;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #d9e5ee;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 2px 8px #264b6510;
}

.budget-edit-page.toolbar-fixed .page-shell .editor-actions {
    position: sticky;
    top: 82px;
    z-index: 12;
}

.budget-edit-page .editor-actions button {
    min-height: 34px;
    border-color: #c8d9e4;
    color: var(--brand);
}

.budget-edit-page .editor-tip {
    display: none;
}

.budget-edit-page .editor-no-side .estimate-wrap {
    padding: 0 2.2vw 20px;
}

.budget-edit-page .estimate-panel {
    border-color: #d9e5ee;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 2px 8px #264b6510;
}

.budget-edit-page .estimate-panel .estimate-toolbar {
    min-height: 62px;
    padding: 12px 16px;
    background: #fff;
    border-bottom-color: #d9e5ee;
}

.budget-edit-page .estimate-table th {
    background: #596877;
}

.budget-edit-page .estimate-table {
    min-width: 1380px;
}

.budget-edit-page .estimate-table th,
.budget-edit-page .estimate-table td {
    height: 42px;
    padding: 0 7px;
    font-size: var(--fs-sm);
}

.budget-edit-page .estimate-table th {
    font-size: var(--fs-xs);
    white-space: nowrap;
}

.budget-edit-page .estimate-table th:nth-child(1) {
    width: 52px;
}

.budget-edit-page .estimate-table th:nth-child(2) {
    width: 230px;
    text-align: left;
}

.budget-edit-page .estimate-table th:nth-child(3) {
    width: 48px;
}

.budget-edit-page .estimate-table th:nth-child(4),
.budget-edit-page .estimate-table th:nth-child(6) {
    width: 48px;
}

.budget-edit-page .estimate-table th:nth-child(5),
.budget-edit-page .estimate-table th:nth-child(7) {
    width: 64px;
}

.budget-edit-page .estimate-table th:nth-child(8) {
    width: 110px;
}

.budget-edit-page .estimate-table th:nth-child(9) {
    width: 110px;
}

.budget-edit-page .estimate-table th:nth-child(10),
.budget-edit-page .estimate-table th:nth-child(11),
.budget-edit-page .estimate-table th:nth-child(12),
.budget-edit-page .estimate-table th:nth-child(13),
.budget-edit-page .estimate-table th:nth-child(14),
.budget-edit-page .estimate-table th:nth-child(15),
.budget-edit-page .estimate-table th:nth-child(16),
.budget-edit-page .estimate-table th:nth-child(17) {
    width: 86px;
}

.budget-edit-page .estimate-table .green-action {
    border: 1px solid #93c9a6;
    background: #f1faf4;
    color: #27804e;
}

.budget-edit-page .estimate-table .item-row.is-green-item > td {
    background: #8dddc6 !important;
}

/* 編輯預算項目：標題列與總計列統一為灰藍色。 */
.budget-edit-page .estimate-table thead th,
.budget-edit-page .estimate-table .grand-total td {
    background: #5d6d7d !important;
}

/* 重新總計完成提示：沿用總價調整的狀態提示樣式。 */
.recalculate-modal .green-modal-card {
    width: min(320px, 100%);
}

.formula-check-modal .green-modal-card {
    width: min(320px, 100%);
}

.green-modal.formula-check-modal {
    position: fixed !important;
    z-index: 1000 !important;
}

.green-modal.formula-check-modal .green-modal-card {
    position: relative;
    z-index: 1001;
}

.formula-check-modal .recalculate-message {
    margin: 20px 0 0 20px;
    color: var(--brand);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.recalculate-modal .recalculate-message {
    margin: 20px 0 0 20px;
    color: var(--brand);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.recalculate-modal .recalculate-message .analysis-fixed-control {
    flex: 0 0 auto;
    margin: 0;
}

.budget-edit-page .estimate-table th:first-child,
.budget-edit-page .estimate-table td:first-child {
    padding: 0;
}

.budget-edit-page .estimate-table .collapse-row {
    width: 100%;
    min-width: 0;
    padding: 0;
}

.budget-edit-page .estimate-table .muted-number {
    color: var(--text-4);
}

.budget-edit-page .estimate-table .item-edit {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border: 1px solid #9cc3ef;
    border-radius: 5px;
    background: #f5faff;
    color: var(--brand-accent);
    font-size: 0;
}

.budget-edit-page .estimate-table .item-edit i {
    font-size: var(--fs-xl);
}

.budget-edit-page .estimate-selection-actions {
    display: inline-flex;
    gap: 6px;
    margin-left: 4px;
}

.budget-edit-page .editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.budget-edit-page .editor-row-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.budget-edit-page .editor-actions button i {
    margin-right: 5px;
}

.budget-edit-page .editor-actions .toolbar-mobile-label {
    display: none;
}

.budget-edit-page .editor-actions .danger-action {
    border-color: #aebbc6;
    background: #fff;
    color: var(--text-3);
}

.budget-edit-page .editor-row-actions .combine-move-button:not(.danger-action) {
    border-color: #79b896;
    background: #f4fbf7;
    color: #216c4f;
}

.budget-edit-page .editor-row-actions #estimate-indent {
    border-color: #79b896;
    background: #f4fbf7;
    color: #216c4f;
}

.budget-edit-page .editor-row-actions #estimate-outdent {
    border-color: #79b896;
    background: #f4fbf7;
    color: #216c4f;
}

.budget-edit-page .editor-primary-actions>button {
    border-color: #b6d5e9;
    background: #edf7fc;
    color: var(--brand-accent);
    font-weight: 700;
}

.budget-edit-page .editor-primary-actions>button:nth-of-type(1) {
    border-color: #efb9b6;
    background: #fff4f3;
    color: #c34c48;
}

.budget-edit-page .editor-primary-actions>button:nth-of-type(2) {
    border-color: #f0cb8d;
    background: #fff8eb;
    color: #a8650f;
}

.budget-edit-page .editor-primary-actions>button:nth-of-type(3) {
    border-color: #a9cbed;
    background: #eef7ff;
    color: var(--brand-accent);
}

.budget-edit-page .editor-primary-actions>button:nth-of-type(4) {
    border-color: #c7c3e6;
    background: #f4f2fd;
    color: var(--brand-accent);
}

.budget-edit-page .estimate-table .is-selected td {
    background: #e8f6ee;
}

.budget-edit-page .estimate-table .is-group-selected td {
    background: #e8f6ee;
}

.budget-edit-page .estimate-table .is-active td {
    box-shadow: inset 0 2px #4e9a78, inset 0 -2px #4e9a78;
}

.budget-edit-page .estimate-table .group.sub {
    cursor: grab;
}

.budget-edit-page .estimate-table .item-row[draggable="true"] {
    cursor: grab;
}

.budget-edit-page .estimate-table .item-row.is-dragging {
    opacity: .45;
}

.budget-edit-page .estimate-table td.is-cell-editing {
    background: #fffdf1;
    box-shadow: inset 0 0 0 1px #e4bc58;
}

/* 綠色工項編輯中的欄位仍需以黃色明確標示目前正在修改。 */
.budget-edit-page .estimate-table .item-row.is-green-item > td.is-cell-editing {
    background: #fff0b8 !important;
    box-shadow: inset 0 0 0 1px #d69d19;
}

/* 項目名稱可直接編輯，但不顯示瀏覽器預設黑色外框。 */
.budget-edit-page .estimate-table .item-name-text[contenteditable="true"],
.budget-edit-page .estimate-table .group-name-text[contenteditable="true"] {
    outline: 0;
    box-shadow: none;
}

.budget-edit-page .estimate-table td:has(.attribute-dropdown) {
    overflow: visible;
}

.attribute-dropdown {
    position: relative;
    display: inline-block;
    min-width: 62px;
}

.attribute-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    width: 100%;
    min-height: 28px;
    padding: 4px 7px;
    border: 1px solid #9bcbb0;
    border-radius: 5px;
    background: #f1faf4;
    color: #246d55;
    cursor: pointer;
    font: inherit;
}

.attribute-trigger i {
    font-size: var(--fs-xs);
    transition: transform .18s;
}

.attribute-trigger[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.attribute-menu {
    position: absolute;
    z-index: 25;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    min-width: 74px;
    padding: 4px;
    border: 1px solid #a8d0b5;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(32, 79, 60, .18);
}

.attribute-menu[hidden] {
    display: none;
}

.attribute-menu button {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-2);
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.attribute-menu button:hover {
    background: #e5f5e9;
}

.budget-edit-page .estimate-table .item-row.is-locked .attribute-dropdown {
    opacity: .35;
    pointer-events: none;
}

.work-code-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-width: 78px;
    min-height: 28px;
    margin: 3px;
    border: 1px solid #9bcbb0;
    border-radius: 5px;
    background: #f1faf4;
    color: #246d55;
    cursor: pointer;
    font: inherit;
}

.work-code-trigger i {
    font-size: var(--fs-xs);
}

.work-code-trigger.is-incorrect-code,
.contract-edit-page .work-code-trigger.is-incorrect-code {
    border-color: #e06a6a !important;
    background: #fff3f3 !important;
    color: #c74444 !important;
}

.budget-edit-page .estimate-table .item-row.is-locked .work-code-trigger {
    opacity: .35;
    pointer-events: none;
}

.budget-edit-page .estimate-table .item-row.is-locked {
    opacity: .68;
}

.budget-edit-page .estimate-table .group.is-locked {
    opacity: .68;
}

.budget-edit-page .estimate-table .item-row.is-locked .item-edit {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

.budget-edit-page .estimate-table .item-row.is-locked .analysis-check,
.budget-edit-page .estimate-table .item-row.is-locked .analysis-action,
.budget-edit-page .estimate-table .item-row.is-locked .edit.icon-action,
.budget-edit-page .estimate-table .item-row.is-locked .green-action {
    opacity: .35;
    pointer-events: none;
    cursor: not-allowed;
}

/* 鎖定欄移除後：數量、單價、複價固定使用清楚的數字樣式。 */
.budget-edit-page .estimate-table .item-row td:nth-child(5),
.budget-edit-page .estimate-table .item-row td:nth-child(6),
.budget-edit-page .estimate-table .item-row td:nth-child(7) {
    color: var(--brand);
    text-align: right;
}

.budget-edit-page .estimate-table th:nth-child(5),
.budget-edit-page .estimate-table th:nth-child(6),
.budget-edit-page .estimate-table th:nth-child(7) {
    min-width: 96px;
}

.budget-edit-page .estimate-table td:nth-child(5),
.budget-edit-page .estimate-table td:nth-child(6),
.budget-edit-page .estimate-table td:nth-child(7) {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.budget-edit-page .estimate-table td:nth-child(10),
.budget-edit-page .estimate-table td:nth-child(11),
.budget-edit-page .estimate-table td:nth-child(14),
.budget-edit-page .estimate-table td:nth-child(15) {
    color: var(--brand);
    text-align: right;
    white-space: nowrap;
}

.budget-edit-page .estimate-table .group td:nth-child(4),
.budget-edit-page .estimate-table .group td:nth-child(5),
.budget-edit-page .estimate-table .group td:nth-child(6),
.budget-edit-page .estimate-table .group td:nth-child(7),
.budget-edit-page .estimate-table .group td:nth-child(9),
.budget-edit-page .estimate-table .group td:nth-child(10),
.budget-edit-page .estimate-table .group td:nth-child(11),
.budget-edit-page .estimate-table .group td:nth-child(14),
.budget-edit-page .estimate-table .group td:nth-child(15) {
    text-align: right;
}

.budget-edit-page .estimate-table .group td:nth-child(9),
.budget-edit-page .estimate-table .group td:nth-child(10) {
    color: var(--text-2);
    font-weight: 700;
}

/* 編輯預算表格依內容展開欄寬，避免文字與金額被截斷或互相覆蓋。 */
.budget-edit-page .estimate-table {
    width: max-content;
    min-width: 2180px;
    table-layout: auto;
    font-size: var(--fs-base);
}

.budget-edit-page .estimate-table th,
.budget-edit-page .estimate-table td {
    font-size: var(--fs-base);
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.budget-edit-page .estimate-table th:nth-child(2),
.budget-edit-page .estimate-table td:nth-child(2) {
    min-width: 230px;
    white-space: normal;
}

.budget-edit-page .estimate-table th:nth-child(n+9),
.budget-edit-page .estimate-table td:nth-child(n+9) {
    min-width: 92px;
}

.budget-edit-page .table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .budget-edit-page .editor-no-side .estimate-wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    .budget-edit-page .estimate-table th {
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.35;
    }

    .budget-edit-page .estimate-table td:nth-child(2) {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .budget-edit-page .table-scroll {
        overflow: visible;
    }

    .budget-edit-page .estimate-table,
    .budget-edit-page .estimate-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 6px;
    }

    .budget-edit-page .estimate-table thead {
        display: none;
    }

    .budget-edit-page .estimate-table tr {
        display: block;
        margin: 0 0 10px;
        border: 1px solid #d6e1e8;
        border-radius: 9px;
        overflow: hidden;
    }

    .budget-edit-page .estimate-table .item-row td,
    .budget-edit-page .estimate-table .group td[data-label] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 12px;
        border: 0;
        border-bottom: 1px solid #e6edf1;
        box-sizing: border-box;
        white-space: normal !important;
        text-align: right !important;
    }

    .budget-edit-page .estimate-table .item-row td::before,
    .budget-edit-page .estimate-table .group td[data-label]::before,
    .budget-edit-page .estimate-table .grand-total .total-number::before {
        content: attr(data-label);
        flex: 0 0 36%;
        color: var(--brand-accent);
        font-size: var(--fs-md);
        font-weight: 500;
        text-align: left;
    }

    .budget-edit-page .estimate-table .item-row td:empty {
        display: none;
    }

    .budget-edit-page .estimate-table .item-row td:last-child,
    .budget-edit-page .estimate-table .group td[data-label]:last-child {
        border-bottom: 0;
    }

    .budget-edit-page .estimate-table .group td:not([data-label]),
    .budget-edit-page .estimate-table .grand-total td:not(.total-number):not(:nth-child(2)) {
        display: none;
    }

    .budget-edit-page .estimate-table .grand-total td:nth-child(2) {
        display: block;
        padding: 11px 12px 6px;
        border: 0;
        text-align: left;
    }

    .budget-edit-page .estimate-table .grand-total .total-number {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100% !important;
        min-width: 0 !important;
        padding: 9px 12px;
        border: 0;
        border-top: 1px solid #478268;
        box-sizing: border-box;
        text-align: right !important;
    }

    .budget-edit-page .estimate-table .item-selector-control {
        flex: 0 0 auto;
    }

    .budget-edit-page .estimate-table .is-active td {
        box-shadow: none;
    }

    .budget-edit-page .estimate-table .item-row.is-active,
    .budget-edit-page .estimate-table .group.is-active {
        box-shadow: inset 0 0 0 2px #287d61;
    }
}

/* 版本管理：手機／平板表格改為左標題、右內容資料卡。 */
@media (max-width: 900px) {

    .version-table-wrap,
    .version-add-table-wrap {
        overflow: visible;
        border: 0;
    }

    .version-table,
    .version-table tbody,
    .version-table tr,
    .version-table th,
    .version-table td,
    .version-add-table,
    .version-add-table tbody,
    .version-add-table tr,
    .version-add-table th,
    .version-add-table td {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .version-table thead,
    .version-add-table thead {
        display: none;
    }

    .version-table tbody,
    .version-add-table tbody {
        display: grid;
        gap: 9px;
    }

    .version-table tr,
    .version-add-table tr {
        overflow: hidden;
        padding: 2px 10px;
        border: 1px solid #d7e1ea;
        border-radius: 8px;
        background: #fff;
    }

    .version-table td,
    .version-add-table td {
        position: relative;
        min-height: 43px;
        padding: 9px 0 9px 98px;
        border: 0;
        border-bottom: 1px solid #e4ebf0;
        color: var(--brand);
        font-size: var(--fs-base);
        line-height: 1.4;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .version-table td:last-child,
    .version-add-table td:last-child {
        border-bottom: 0;
    }

    .version-table td::before,
    .version-add-table td::before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 88px;
        transform: translateY(-50%);
        color: var(--brand-accent);
        font-size: var(--fs-sm);
        font-weight: 600;
        text-align: left;
    }

    .version-table td:nth-child(1)::before,
    .version-add-table td:nth-child(1)::before {
        content: '版次';
    }

    .version-table td:nth-child(2)::before,
    .version-add-table td:nth-child(2)::before {
        content: '說明';
    }

    .version-table td:nth-child(3)::before,
    .version-add-table td:nth-child(3)::before {
        content: '更新時間';
    }

    .version-table td:nth-child(4)::before,
    .version-add-table td:nth-child(4)::before {
        content: '更新人員';
    }

    .version-table td:nth-child(5)::before,
    .version-add-table td:nth-child(5)::before {
        content: '管理';
    }

    .version-table .version-status {
        max-width: 100%;
        text-align: right;
    }

    .version-table .version-load {
        margin-left: auto;
    }

    .version-add-table td {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .version-add-table input {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .version-add-table .version-add-save-cell {
        text-align: right;
    }

    .version-add-table .version-add-save-cell .primary-button {
        margin-left: auto;
    }
}

@media (min-width: 769px) {
    .budget-edit-page .estimate-table {
        width: 100%;
        min-width: 1260px;
        table-layout: fixed;
    }

    .budget-edit-page .estimate-table th,
    .budget-edit-page .estimate-table td {
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.3;
    }

    .budget-edit-page .estimate-table th:nth-child(2),
    .budget-edit-page .estimate-table td:nth-child(2) {
        min-width: 190px;
    }

    .budget-edit-page .estimate-table th:nth-child(n+9),
    .budget-edit-page .estimate-table td:nth-child(n+9) {
        min-width: 68px;
    }

    .budget-edit-page .estimate-table th:nth-child(6),
    .budget-edit-page .estimate-table td:nth-child(6),
    .budget-edit-page .estimate-table th:nth-child(7),
    .budget-edit-page .estimate-table td:nth-child(7) {
        width: 86px;
        min-width: 86px;
    }

    .budget-edit-page .estimate-table th:nth-child(9),
    .budget-edit-page .estimate-table td:nth-child(9) {
        width: 58px;
        min-width: 58px;
    }

    .budget-edit-page .estimate-table th:nth-child(16),
    .budget-edit-page .estimate-table td:nth-child(16),
    .budget-edit-page .estimate-table th:nth-child(17),
    .budget-edit-page .estimate-table td:nth-child(17) {
        width: 48px;
        min-width: 48px;
    }

    .budget-edit-page .estimate-table td:nth-child(5),
    .budget-edit-page .estimate-table td:nth-child(6),
    .budget-edit-page .estimate-table td:nth-child(7),
    .budget-edit-page .estimate-table td:nth-child(10),
    .budget-edit-page .estimate-table td:nth-child(11),
    .budget-edit-page .estimate-table td:nth-child(14),
    .budget-edit-page .estimate-table td:nth-child(15) {
        white-space: nowrap;
    }
}

.budget-edit-page .item-selector,
.budget-edit-page .group-selector {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.budget-edit-page .item-selector-control {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-right: 5px;
    border: 1px solid #c7c7c7;
    border-radius: 5px;
    vertical-align: middle;
    color: #27804e;
}

.budget-edit-page .item-selector-control i {
    display: none;
    color: #fff;
    font-size: var(--fs-xs);
}

.budget-edit-page .item-selector:checked+i,
.budget-edit-page .group-selector:checked+i {
    display: block;
}

.budget-edit-page .item-selector-control:has(.item-selector:checked),
.budget-edit-page .item-selector-control:has(.group-selector:checked) {
    border-color: #287b4b;
    background: #287b4b;
}

@media (max-width: 700px) {
    .budget-edit-page .estimate-toolbar .estimate-selection-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
}

.budget-edit-page .estimate-table .lock-check:checked {
    accent-color: #cf3131;
}

.budget-edit-page .estimate-table .grand-total td {
    background: #165e36;
    color: #fff;
    font-weight: 700;
}

.budget-edit-page .estimate-table .grand-total .total-number {
    text-align: right;
}

.budget-edit-page .estimate-table .group td {
    background: #e9f5ee;
}

.budget-edit-page .estimate-table .sub td {
    background: #f5faf7;
}

.budget-edit-page .estimate-table .subtotal td {
    background: #edf4fb;
    color: var(--brand);
    font-style: normal;
    font-weight: 700;
}

.budget-edit-page .page-shell .editor-footer {
    margin: 0 2.2vw 28px;
    padding: 14px 18px !important;
    border: 1px solid #d9e5ee !important;
    border-radius: 10px;
    background: #fff !important;
    box-shadow: 0 2px 8px #264b6510 !important;
}

.budget-edit-page .editor-footer>span {
    display: none;
}

.budget-edit-page .editor-footer-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.budget-edit-page .editor-bottom-actions {
    display: flex;
    justify-content: center;
    margin: 0 2.2vw 28px;
    padding: 8px 0;
}

.budget-edit-page .editor-bottom-actions .editor-footer-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.budget-edit-page .editor-bottom-actions .secondary-button,
.budget-edit-page .editor-bottom-actions .primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    height: 36px;
    padding: 0 16px;
    text-decoration: none;
    font-weight: 700;
}

.budget-edit-page .edit-page-heading .secondary-button i {
    margin-right: 6px;
}

.budget-edit-page .edit-heading-actions>button:first-child {
    border: 0;
    background: #247657;
    color: #fff;
    font-weight: 500;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.budget-edit-page .edit-heading-actions>button:nth-child(2) {
    border: 0;
    background: #24658b;
    color: #fff;
    font-weight: 500;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.budget-edit-page .edit-heading-actions>button:first-child:hover {
    background: #18583f;
    box-shadow: 0 4px 10px rgba(24, 88, 63, .22);
    transform: translateY(-1px);
}

.budget-edit-page .edit-heading-actions>button:nth-child(2):hover {
    background: #174d6b;
    box-shadow: 0 4px 10px rgba(23, 77, 107, .22);
    transform: translateY(-1px);
}

.budget-edit-page .export-menu-wrap {
    position: relative;
}

.budget-edit-page .public-price-search {
    border: 0;
    background: #5b6688;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.budget-edit-page .public-price-search:hover {
    background: #465170;
    color: #fff;
    box-shadow: 0 4px 10px rgba(23, 77, 107, .22);
    transform: translateY(-1px);
}

.export-menu[hidden] {
    display: none;
}

.export-menu {
    position: absolute;
    z-index: 45;
    top: calc(100% + 8px);
    right: 0;
    width: min(330px, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid #9dc9e7;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(32, 94, 134, .2);
}

.export-menu label,
.export-menu p {
    display: block;
    margin: 0 0 7px;
    color: var(--brand);
    font-size: var(--fs-base);
    font-weight: 700;
}

.export-menu input {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    margin-bottom: 13px;
    padding: 0 10px;
    border: 1px solid #b8d2e6;
    border-radius: 6px;
    color: var(--brand);
    font: inherit;
}

.export-menu input:focus {
    border-color: #286fae;
    outline: 2px solid rgba(40, 111, 174, .16);
}

.export-format-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.export-format-options button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    border: 1px solid #7fafd1;
    border-radius: 6px;
    background: #edf7ff;
    color: var(--brand);
    font: inherit;
    font-size: var(--fs-base);
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.export-format-options button:hover {
    border-color: #286fae;
    background: #dcefff;
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .budget-edit-page .export-menu-wrap {
        position: static;
    }

    .budget-edit-page .export-menu {
        position: absolute;
        right: 16px;
        left: 16px;
        width: auto;
    }
}

.green-modal[hidden] {
    display: none;
}

.green-modal {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.green-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 42, 53, .48);
}

.green-modal-card {
    position: relative;
    width: min(560px, 100%);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(22, 48, 64, .3);
    overflow: hidden;
    z-index: 100;
}

.green-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid #dce8ef;
    background: #f7fbfd;
}

.green-modal-header h2 {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-xl);
}

.green-modal-header h2 i {
    margin-right: 7px;
    color: #27804e;
}

.green-modal-close {
    border: 0;
    background: transparent;
    color: var(--text-4);
    font-size: var(--fs-2xl);
    cursor: pointer;
}

.green-item-title {
    margin: 18px 20px;
    padding: 16px 18px;
    border: 1px solid #b9d2e8;
    border-radius: 7px;
    background: #eaf4fd;
    color: var(--brand);
    font-weight: 700;
}

.green-item-title #green-item-name {
    color: var(--text-1);
    font-size: var(--fs-xl);
    font-weight: 700;
}

.green-table-wrap {
    margin: 0 20px;
    width: auto;
    overflow: visible;
}

.green-option-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed;
}

.green-option-table th {
    padding: 11px 6px;
    background: #eaf7ee;
    border: 1px solid #c9dfd0;
    color: var(--text-2);
    overflow-wrap: anywhere;
    width: 25% !important;
    min-width: 0 !important;
    font-size: var(--fs-base);
}

.green-option-table td {
    padding: 15px 6px;
    border: 1px solid #dce8e1;
    text-align: center;
    width: 25% !important;
    min-width: 0 !important;
}

.green-option-table input:not(.analysis-fixed-price) {
    width: 19px;
    height: 19px;
    accent-color: #27804e;
}

.green-option-table .analysis-fixed-control {
    margin: 0;
}

.green-option-table tbody tr:hover,
.green-option-table tbody tr:hover td {
    background: #fff !important;
    color: inherit;
}

/* 項目及說明：文字換行維持同一個起點，鎖定框對齊整段文字中央。 */
.budget-edit-page .estimate-table .item-row td:nth-child(2) .item-selector-control {
    vertical-align: middle;
    margin-right: 7px;
}

.budget-edit-page .estimate-table .item-row td:nth-child(2) .item-name-text {
    display: inline-block;
    max-width: calc(100% - 38px);
    vertical-align: middle;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .budget-edit-page .estimate-table .item-row td:nth-child(2) .item-selector-control {
        align-self: center;
        margin-right: 0;
    }

    .budget-edit-page .estimate-table .item-row td:nth-child(2) .item-name-text {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }
}

.green-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 18px 20px;
}

.green-modal-actions .primary-button,
.green-modal-actions .secondary-button {
    min-width: 76px;
}

/* 版本管理 */
.version-modal[hidden] {
    display: none;
}

.version-modal {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.version-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 42, 53, .48);
}

.version-modal-card {
    position: relative;
    width: min(780px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(22, 48, 64, .3);
}

.version-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid #dce8ef;
    background: #f7fbfd;
}

.version-modal-header h2 {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-xl);
}

.version-modal-header h2 i {
    margin-right: 7px;
    color: #27804e;
}

.version-modal-close {
    border: 0;
    background: transparent;
    color: var(--text-4);
    font-size: var(--fs-2xl);
    cursor: pointer;
}

.version-modal-content {
    padding: 16px 20px 0;
}

.version-intro {
    margin: 0 0 12px;
    color: var(--text-3);
    font-size: var(--fs-base);
}

.version-table-wrap {
    overflow-x: auto;
    border: 1px solid #d7e1ea;
    border-radius: 7px;
}

.version-table {
    width: 100%;
    min-width: 690px;
    border-collapse: collapse;
    font-size: var(--fs-base);
}

.version-table th,
.version-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e8ee;
    text-align: left;
    vertical-align: middle;
}

.version-table th {
    background: #f5f8fb;
    color: var(--text-3);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.version-table tbody tr:last-child td {
    border-bottom: 0;
}

.version-table tbody tr.is-loaded {
    background: #effaf2;
}

.version-table small {
    display: block;
    margin-top: 3px;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.version-status {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.version-status.active {
    background: #ebebeb;
    color: var(--text-2);
}

.version-status.editing {
    background: #fff0c6;
    color: #a56812;
}

.version-load {
    min-width: 66px;
    padding: 7px 10px;
    border: 1px solid #8dbaf0;
    border-radius: 5px;
    background: #287bd8;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.version-load i {
    margin-right: 4px;
}

.version-load.is-loaded,
.version-load:disabled {
    border-color: #9aa9ba;
    background: #aab5c4;
    cursor: default;
}

.version-add-panel {
    display: grid;
    grid-template-columns: calc(140px * var(--fs-scale)) minmax(0,1fr) minmax(0,1.35fr) auto;
    gap: 10px;
    align-items: end;
    margin-top: 14px;
    padding: 13px;
    border: 1px solid #f4c77e;
    border-radius: 7px;
    background: #fff8ed;
}

.version-add-panel h3 {
    grid-column: 1 / -1;
    margin: 0;
    color: #ad6004;
    font-size: var(--fs-base);
}

.version-add-panel h3 i {
    margin-right: 5px;
}

.version-add-panel label {
    display: grid;
    gap: 5px;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.version-add-panel input {
    min-width: 0;
    height: 32px;
    padding: 5px 8px;
    border: 1px solid #c4cbd3;
    border-radius: 5px;
    background: #fff;
    color: var(--brand);
    font: inherit;
}

.version-add-panel .primary-button {
    height: 32px;
    white-space: nowrap;
}

.version-add-panel .primary-button i {
    margin-right: 4px;
}

.version-modal-actions {
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px 18px;
}

.version-table-wrap {
    position: relative;
}

.version-table tbody tr.is-loaded {
    background: transparent;
}

.version-table tbody tr:hover td {
    background: #effaf2;
}

.version-load {
    border-color: #27804e;
    background: #27804e;
}

.version-load:hover:not(:disabled) {
    border-color: #1c653c;
    background: #1c653c;
}

.version-add-toggle {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 1px solid #8fc8a5;
    border-radius: 5px;
    background: #f1faf4;
    color: #27804e;
    cursor: pointer;
}

.version-add-toggle:hover {
    background: #dff4e6;
}

.version-add-panel {
    margin: 20px -20px 0;
    padding: 17px 20px;
    border: 0;
    border-top: 1px solid #dce4eb;
    border-radius: 0;
    background: #f9fbfd;
}

.version-add-panel[hidden] {
    display: none;
}

.version-status.editing {
    background: #eaf4ff;
    color: var(--brand-accent);
}

.version-load {
    border-color: #b5bec8;
    background: #f0f2f4;
    color: var(--text-3);
}

.version-load:hover:not(:disabled) {
    border-color: #99a7b4;
    background: #e2e7eb;
}

.version-load.is-loaded,
.version-load:disabled {
    border-color: #a6d8b5;
    background: #e3f5e8;
    color: #247247;
}

.version-add-toggle {
    border-color: #27804e;
    background: #27804e;
    color: #fff;
}

.version-add-toggle:hover {
    border-color: #1c653c;
    background: #1c653c;
}

.version-status.editing {
    background: #e3f5e8;
    color: #247247;
}

.version-load {
    border-color: #8996a3;
    background: #8996a3;
    color: #fff;
}

.version-load:hover:not(:disabled) {
    border-color: #727f8c;
    background: #727f8c;
    color: #fff;
}

.version-modal-actions .version-add-toggle {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    height: auto;
    padding: 8px 12px;
    color: #fff;
    font: inherit;
    font-weight: 600;
}

.version-add-panel h3 {
    color: #27804e;
    font-size: var(--fs-lg);
    padding-bottom: 10px;
}

.version-add-panel label {
    font-size: var(--fs-base);
}

.version-add-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

.version-add-panel .primary-button {
    align-self: end;
}

.version-add-panel {
    display: block;
}

.version-add-table-wrap {
    overflow-x: auto;
    border: 1px solid #d7e1ea;
    border-radius: 7px;
}

.version-add-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: var(--fs-base);
}

.version-add-table th,
.version-add-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #e0e8ee;
    text-align: left;
    vertical-align: middle;
}

.version-add-table th {
    background: #f5f8fb;
    color: var(--text-3);
    font-weight: 700;
}

.version-add-table tbody tr:last-child td {
    border-bottom: 0;
}

.version-add-table input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 5px 8px;
    border: 1px solid #c7d5e1;
    border-radius: 5px;
    background: #fff;
    color: var(--brand);
    font: inherit;
}

.version-add-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.version-add-actions .primary-button {
    min-width: 76px;
    min-height: 36px;
    padding: 7px 12px;
}

.version-add-table {
    table-layout: fixed;
}

.version-add-table th {
    font-size: var(--fs-sm);
}

.version-add-table th:nth-child(1),
.version-add-table td:nth-child(1) {
    width: 9%;
}

.version-add-table th:nth-child(2),
.version-add-table td:nth-child(2) {
    width: 34%;
}

.version-add-table th:nth-child(3),
.version-add-table td:nth-child(3) {
    width: 19%;
}

.version-add-table th:nth-child(4),
.version-add-table td:nth-child(4) {
    width: 28%;
}

.version-add-table th:nth-child(5),
.version-add-table td:nth-child(5) {
    width: 10%;
}

.version-add-table .version-add-save-cell {
    width: auto;
}

.version-add-table .version-add-save-cell .primary-button {
    min-width: 34px;
    width: 34px;
    min-height: 34px;
    height: 34px;
    padding: 0;
}

.version-add-table .version-add-save-cell .primary-button i {
    margin: 0;
}

.version-add-time {
    color: var(--text-4);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.version-load {
    border-color: #24658b;
    background: #24658b;
    color: #fff;
}

.version-load:hover:not(:disabled) {
    border-color: #174d6b;
    background: #174d6b;
    color: #fff;
}

.version-modal-actions .primary-button.version-add-toggle {
    border-color: #27804e;
    background: #27804e;
    color: #fff;
}

.version-modal-actions .primary-button.version-add-toggle:hover {
    border-color: #1c653c;
    background: #1c653c;
}

.version-modal-actions .primary-button.version-add-toggle {
    min-width: 76px;
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 6px;
    font-weight: 600;
}

.version-add-table {
    min-width: 700px;
    font-size: var(--fs-base);
}

.version-add-table .version-add-save-cell {
    width: 88px;
    text-align: center;
}

.version-add-table .primary-button,
.version-modal-actions .secondary-button {
    min-width: 76px;
    min-height: 36px;
    padding: 7px 12px;
}

@media (max-width: 720px) {
    .version-modal {
        padding: 10px;
    }

    .version-modal-card {
        max-height: calc(100vh - 20px);
    }

    .version-modal-header,
    .version-modal-content,
    .version-modal-actions {
        padding-left: 13px;
        padding-right: 13px;
    }

    .version-add-panel {
        grid-template-columns: 1fr;
    }

    .version-table-wrap {
        overflow-x: auto;
    }
}

/* 主項大類設定彈窗 */
.major-modal[hidden] {
    display: none;
}

.major-modal {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.major-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 42, 53, .48);
}

.major-modal-card {
    position: relative;
    width: min(900px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(22, 48, 64, .3);
}

.major-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid #dce8ef;
    background: #f7fbfd;
}

.major-modal-header h2 {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-xl);
}

.major-modal-header h2 i {
    margin-right: 7px;
    color: #27804e;
}

.major-modal-close {
    border: 0;
    background: transparent;
    color: var(--text-4);
    font-size: var(--fs-2xl);
    cursor: pointer;
}

.major-item-title {
    margin: 16px 20px;
    padding: 14px 18px;
    border: 1px solid #b9d2eb;
    border-radius: 7px;
    background: #eef6ff;
    color: var(--brand);
    font-weight: 700;
}

.major-item-title span {
    color: var(--text-1);
    font-size: var(--fs-xl);
}

.major-settings-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 14px;
    margin: 0 20px;
}

.major-modal fieldset {
    min-width: 0;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #cbd8e3;
    border-radius: 6px;
}

.major-modal legend {
    padding: 0 5px;
    color: var(--text-3);
    font-weight: 700;
    font-size: var(--fs-lg);
}

.major-radio-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 12px 16px;
    color: var(--text-2);
    font-size: var(--fs-base);
}

.major-radio-grid label {
    display: flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
}

.major-radio-grid input {
    margin-top: 2px;
    accent-color: #27804e;
}

.major-form-row {
    display: grid;
    gap: 9px;
}

.major-form-row label {
    display: grid;
    grid-template-columns: 5.4rem minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: var(--text-2);
    font-size: var(--fs-base);
}

.major-price-row label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-2);
    font-size: var(--fs-base);
}

.major-modal input,
.major-modal select {
    min-width: 0;
    height: 32px;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid #cbd8e3;
    border-radius: 5px;
    background: #fff;
    color: var(--brand);
    font: inherit;
}

.major-form-row input,
.major-form-row select {
    width: 100%;
}

.major-price-field {
    margin: 14px 20px !important;
    width: calc(100% - 40px);
    min-width: 0;
    max-width: calc(100% - 40px);
    box-sizing: border-box;
}

.major-price-field p {
    margin: 0 0 10px;
    color: var(--text-4);
    font-size: var(--fs-md);
}

.major-auto-price {
    padding: 6px 0;
    font-size: var(--fs-lg) !important;
}

.major-direct-price label,
.major-formula-price p,
.major-segment-price>p,
.major-custom-price>p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--brand);
}

.major-direct-price input,
.major-formula-price input {
    width: 170px;
}

.major-tabs {
    display: flex;
    align-items: end;
    gap: 4px;
    margin: 4px 0 0;
}

.major-tabs button {
    min-height: 32px;
    padding: 6px 19px;
    border: 1px solid #9bcbb0;
    border-bottom-color: #246d55;
    border-radius: 6px 6px 0 0;
    background: #f1faf4;
    color: #246d55;
    font: inherit;
    cursor: pointer;
}

.major-tabs button.active {
    background: #246d55;
    color: #fff;
    border-color: #246d55;
}

.major-formula-help {
    flex: 1;
    min-width: 210px;
    padding: 6px 9px;
    border: 1px solid #d2dce5;
    background: #f5f7f9;
    color: var(--brand-accent);
    font-size: var(--fs-sm);
    line-height: 1.35;
}

.major-formula-check {
    margin-left: auto;
    border-radius: 4px !important;
    border-color: #9bcbb0 !important;
    background: #f1faf4 !important;
    color: #246d55 !important;
}

.major-formula-check[hidden] {
    display: none !important;
}

.major-custom-formula-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #b8d9c3;
    border-radius: 0 0 5px 5px;
    background: #fff;
}

.major-custom-formula-entry label {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--brand);
}

.major-custom-formula-entry input {
    flex: 1;
    min-width: 0;
}

.major-custom-formula-check {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 5px 14px;
    border: 1px solid #9bcbb0;
    border-radius: 6px;
    background: #f1faf4;
    color: #246d55;
    font: inherit;
    cursor: pointer;
}

.major-custom-formula-check:hover {
    background: #dff2e5;
}

.major-custom-formula-help {
    margin: 8px 0 0;
    border: 1px solid #cbd9e6;
    border-radius: 5px;
    background: #f8fbfd;
    color: var(--brand);
}

.major-custom-formula-help summary {
    padding: 7px 10px;
    color: #246d55;
    font-weight: 700;
    cursor: pointer;
}

.major-custom-formula-help > div {
    display: grid;
    gap: 7px;
    padding: 0 12px 12px;
    line-height: 1.55;
}

.major-custom-formula-help p,
.major-custom-formula-help ul {
    margin: 0;
}

.major-custom-formula-help code {
    color: var(--brand);
    font-family: Consolas, monospace;
}

.major-tabs-selection-button {
    margin-left: auto !important;
    margin-top: 0 !important;
    border-bottom-color: #8fc6a3 !important;
    border-radius: 6px !important;
}

.major-tabs-selection-button[hidden] {
    display: none !important;
}

.major-selection-toolbar {
    display: flex;
    justify-content: flex-end;
    min-height: 32px;
    margin: -2px 0 4px;
}

.major-selection-toolbar-button {
    margin: 0 !important;
}

.major-selection-table {
    margin-top: 0;
    border: 1px solid #b8d9c3;
    border-radius: 0 0 5px 5px;
    background: #fff;
    overflow: hidden;
}

.major-selection-table table {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: collapse;
    table-layout: fixed;
}

.major-selection-table th,
.major-selection-table td {
    height: auto;
    padding: 6px 8px;
    border: 1px solid #d7e4df;
    color: var(--brand);
    text-align: left;
}

.major-selection-table th {
    background: #246d55;
    color: #fff;
    font-weight: 700;
}

.major-selection-table th:first-child {
    width: 48px;
    text-align: center;
}

.major-selection-table th:nth-child(2) {
    width: 48px;
    text-align: center;
}

.major-selection-table td:first-child,
.major-selection-table td:nth-child(2) {
    text-align: center;
}

.major-selection-table tbody td {
    height: auto;
    min-height: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    background: #fff;
}

.major-selection-table tbody tr:hover td {
    background: #eff8f3;
}

.major-select-button {
    position: static;
    margin-top: 6px;
    min-height: 30px;
    padding: 5px 14px;
    border: 1px solid #8fc6a3;
    border-radius: 6px;
    background: #f1faf4;
    color: #246d55;
    cursor: pointer;
    font: inherit;
}

.major-select-button:hover,
.major-formula-check:hover {
    background: #dff2e5 !important;
}

.major-segment-panel[hidden] {
    display: none;
}

.major-segment-price,
.major-segment-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.major-segment-entry {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 7px 10px;
    margin: 8px 0 0;
    padding: 9px;
    border: 1px solid #b8d9c3;
    background: #f3fbf5;
}

/* 新分段直接在公式表格第一列輸入，避免與表格資料重複。 */
.major-segment-panel[data-major-segment-panel="formula"] .major-segment-entry {
    display: none;
}

.major-segment-entry label {
    display: grid;
    gap: 3px;
    color: #246d55;
    font-size: var(--fs-sm);
    font-weight: 700;
}

.major-segment-entry input {
    width: min(112px, 100%);
    height: 30px;
    padding: 4px 7px;
    border: 1px solid #b5cabc;
    border-radius: 4px;
    background: #fff;
    color: var(--brand);
    font: inherit;
}

.major-segment-entry input:nth-of-type(1),
.major-segment-entry input:nth-of-type(2) {
    width: min(130px, 100%);
}

.major-segment-entry input:nth-of-type(3) {
    width: min(78px, 100%);
}

.major-segment-entry > span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    color: var(--brand);
    font-size: var(--fs-base);
}

.major-segment-add {
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid #70ad82;
    border-radius: 4px;
    background: #246d55;
    color: #fff;
    cursor: pointer;
    font: inherit;
}

.major-segment-add:hover {
    background: #18513f;
}

.major-segment-formula-table {
    max-width: 100%;
    border: 1px solid #85b895;
    overflow: hidden;
    box-sizing: border-box;
}

.major-segment-formula-table table {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 20%) minmax(0, 14%) minmax(0, 20%) minmax(0, 13%) minmax(0, 33%);
    border-collapse: collapse;
    table-layout: fixed;
    overflow: hidden;
}

.major-segment-formula-table thead,
.major-segment-formula-table tbody,
.major-segment-formula-table tr {
    display: contents;
}

.major-segment-formula-table th,
.major-segment-formula-table td {
    height: 34px;
    min-width: 0;
    padding: 4px 5px;
    box-sizing: border-box;
    border: 1px solid #cae0d0;
    color: var(--brand);
    font-size: var(--fs-xs);
    text-align: right;
    overflow-wrap: anywhere;
}

.major-segment-formula-table th {
    background: #246d55;
    color: #fff;
    font-weight: 700;
    text-align: center;
}

.major-segment-formula-table th:nth-child(1), .major-segment-formula-table td:nth-child(1) { width: auto; }
.major-segment-formula-table th:nth-child(2),
.major-segment-formula-table td:nth-child(2) {
    width: auto;
    text-align: center;
}

.major-segment-formula-table th:nth-child(3), .major-segment-formula-table td:nth-child(3),
.major-segment-formula-table th:nth-child(4), .major-segment-formula-table td:nth-child(4),
.major-segment-formula-table th:nth-child(5), .major-segment-formula-table td:nth-child(5) { width: auto; }

.major-segment-formula-table th:last-child,
.major-segment-formula-table td:last-child {
    text-align: center;
}

.major-segment-formula-table tbody tr:not(.major-segment-input-row):hover td {
    background: #eff8f3;
}

.major-segment-action-heading,
.major-segment-action-cell {
    text-align: center !important;
}

.major-segment-action-heading {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.major-segment-add-row,
.major-segment-confirm-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid #8fc6a3;
    border-radius: 5px;
    background: #f1faf4;
    color: #246d55;
    cursor: pointer;
}

.major-segment-action-heading .major-segment-add-row {
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
}

.major-segment-add-row:hover,
.major-segment-confirm-row:hover {
    border-color: #18578f;
    background: #e8f3ff;
    color: var(--brand);
}

.major-segment-input-row td {
    padding: 3px !important;
    background: #fff8d9;
}

.major-segment-input-row input {
    width: 100%;
    min-width: 0;
    height: 28px;
    box-sizing: border-box;
    padding: 3px 5px;
    border: 1px solid #dfbb57;
    border-radius: 3px;
    background: #fffef6;
    color: var(--brand);
    font: inherit;
}

.major-segment-formula-input-cell {
    display: flex !important;
    align-items: center;
    gap: 4px;
}

.major-segment-formula-input-cell input {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 5px !important;
}

.major-segment-formula-input-cell .major-segment-confirm-row {
    flex: 0 0 26px;
}

/* 主項大類設定：加總項目挑選 */
.major-sum-picker-modal[hidden] { display: none; }
.major-sum-picker-modal { position: fixed; z-index: 92; inset: 0; display: grid; place-items: center; padding: 24px; }
.major-sum-picker-backdrop { position: absolute; inset: 0; background: rgba(28, 45, 61, .58); }
.major-sum-picker-card { position: relative; z-index: 1; width: min(880px, 100%); max-height: min(860px, calc(100vh - 48px)); overflow: auto; border-radius: 12px; background: #fff; box-shadow: 0 18px 44px rgba(16, 44, 70, .26); }
.major-sum-picker-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #d8e4ef; background: #f5f9fd; }
.major-sum-picker-header h2 { margin: 0; color: var(--brand); font-size: var(--fs-lg); }
.major-sum-picker-header h2 i { margin-right: 7px; }
.major-sum-picker-header button { border: 0; background: transparent; color: var(--text-4); font-size: var(--fs-2xl); cursor: pointer; }
.major-sum-picker-intro { margin: 16px 18px 12px; padding: 12px 14px; border: 1px solid #b9d4ee; border-radius: 8px; background: #edf6ff; color: var(--brand); }
.major-sum-picker-intro p { margin: 6px 0 0; font-size: var(--fs-base); line-height: 1.55; }
.major-sum-picker-table-wrap { margin: 0 18px; border: 1px solid #d4e1ea; border-radius: 8px; overflow: hidden; margin-top: 15px;}
.major-sum-picker-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.major-sum-picker-table th, .major-sum-picker-table td { padding: 8px 10px; border-bottom: 1px solid #dce7ee; color: var(--brand); font-size: var(--fs-base); text-align: left; vertical-align: middle; }
.major-sum-picker-table th { background: #5d6d7d; color: #fff; font-weight: 700; }
.major-sum-picker-table th:nth-child(1), .major-sum-picker-table td:nth-child(1) { width: 58px; text-align: center; }
.major-sum-picker-table th:nth-child(2), .major-sum-picker-table td:nth-child(2) { width: 72px; text-align: center; }
.major-sum-picker-table th:nth-child(3), .major-sum-picker-table td:nth-child(3) { width: 64px; text-align: center; }
.major-sum-picker-table tbody tr:hover { background: #eff8f3; }
.major-sum-picker-table tbody tr[hidden],
.major-sum-picker-table tbody tr.is-major-sum-hidden { display: none !important; }
.major-sum-picker-table .major-sum-operator { border: 1px solid #18578f; background: #18578f; color: #fff; font: inherit; font-size: var(--fs-lg); line-height: 1; }
.major-sum-picker-table .major-sum-operator.is-minus { border-color: #0d4577; background: #0d4577; color: #fff; }
.major-sum-collapse { display: inline-flex; align-items: center; justify-content: center; width: 15px; min-width: 15px; margin-right: 5px; padding: 0; border: 0; background: transparent; color: #246d55; cursor: pointer; font: inherit; font-weight: 700; line-height: 1; }
.major-sum-collapse i { display: block; font-size: var(--fs-base); }
.major-sum-collapse:hover { color: var(--brand); }
.major-sum-picker-table strong { display: block; }
.major-sum-picker-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 18px; }

@media (max-width: 640px) {
    .major-sum-picker-modal { padding: 10px; }
    .major-sum-picker-card { max-height: calc(100vh - 20px); }
    .major-sum-picker-header, .major-sum-picker-actions { padding: 12px; }
    .major-sum-picker-intro, .major-sum-picker-table-wrap { margin-left: 12px; margin-right: 12px; }
    .major-sum-picker-table th, .major-sum-picker-table td { padding: 7px 5px; font-size: var(--fs-xs); }
    .major-sum-picker-table th:nth-child(1), .major-sum-picker-table td:nth-child(1) { width: 42px; }
    .major-sum-picker-table th:nth-child(2), .major-sum-picker-table td:nth-child(2) { width: 52px; }
    .major-sum-picker-table th:nth-child(3), .major-sum-picker-table td:nth-child(3) { width: 42px; }
}

/* 工項編輯彈窗 */
.item-modal[hidden] {
    display: none;
}

.item-modal {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.item-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 42, 53, .48);
}

.item-modal-card {
    position: relative;
    width: min(760px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(22, 48, 64, .3);
}

.item-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid #dce8ef;
    background: #f7fbfd;
}

.item-modal-header h2 {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-xl);
}

.item-modal-header h2 i {
    margin-right: 7px;
    color: #27804e;
}

.item-modal-close {
    border: 0;
    background: transparent;
    color: var(--text-4);
    font-size: var(--fs-2xl);
    cursor: pointer;
}

.item-modal-title {
    margin: 16px 20px;
    padding: 14px 18px;
    border: 1px solid #b9d2eb;
    border-radius: 7px;
    background: #eef6ff;
    color: var(--brand);
    font-weight: 700;
}

.item-modal-title span {
    color: var(--text-1);
    font-size: var(--fs-xl);
}

.item-modal-grid {
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 12px;
    margin: 0 20px;
}

.item-modal fieldset {
    min-width: 0;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #cbd8e3;
    border-radius: 6px;
}

.item-modal legend {
    padding: 0 5px;
    color: var(--text-3);
    font-weight: 700;
    font-size: var(--fs-lg);
}

.item-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    color: var(--text-2);
    font-size: var(--fs-base);
}

.item-radio-row label {
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.item-radio-row input {
    accent-color: #27804e;
}

.item-modal-grid>fieldset:nth-child(1) {
    padding-top: 7px;
}

.item-modal-grid>fieldset:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.item-modal-grid>fieldset:nth-child(3) {
    grid-row: 2;
}

.item-modal input,
.item-modal select {
    min-width: 0;
    height: 31px;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid #cbd8e3;
    border-radius: 5px;
    background: #fff;
    color: var(--brand);
    font: inherit;
}

.item-price-form {
    display: grid;
    gap: 7px;
}

.item-price-form label {
    display: grid;
    grid-template-columns: 6.4rem minmax(0,1fr) calc(16px * var(--fs-scale));
    align-items: center;
    gap: 7px;
    color: var(--text-2);
    font-size: var(--fs-base);
}

.item-price-form label:first-child {
    grid-template-columns: 6.4rem minmax(0,1fr) calc(52px * var(--fs-scale));
}

.item-price-form select {
    width: 100%;
}

.item-price-form em {
    color: var(--brand-accent);
    font-style: normal;
}

.item-category {
    display: grid;
    gap: 9px;
}

.item-category select {
    width: 100%;
}

.item-history {
    margin: 14px 20px !important;
}

.item-history table {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: collapse;
    table-layout: fixed;
}

.item-history th,
.item-history td {
    height: auto;
    padding: 9px 8px;
    border: 1px solid #d7e4df;
    color: var(--brand);
    text-align: center;
}

.item-history th {
    background: #246d55;
    color: #fff;
}

.item-history td:first-child {
    text-align: left;
}

.item-history td:not(:first-child) {
    color: var(--brand-accent);
}

.item-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 18px 20px;
}

@media (max-width: 640px) {
    .item-modal {
        padding: 10px;
    }

    .item-modal-card {
        max-height: calc(100vh - 20px);
    }

    .item-modal-title,
    .item-modal-grid,
    .item-history {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    .item-modal-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .item-modal-grid>fieldset:nth-child(2),
    .item-modal-grid>fieldset:nth-child(3) {
        grid-column: auto;
        grid-row: auto;
    }

    .item-modal-actions {
        padding: 14px 12px;
    }
}

.major-price-row {
    display: flex;
    gap: 24px;
}

.major-price-row input {
    width: 160px;
}

.major-price-row input[readonly] {
    background: #f4f7f9;
}

.major-note {
    margin: 0 20px;
    padding: 11px 14px;
    border: 1px solid #c9e3ca;
    border-radius: 6px;
    background: #f0faef;
    color: var(--text-3);
    font-size: var(--fs-base);
}

.major-note i {
    margin-right: 5px;
}

.major-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 18px 20px;
}

@media (max-width: 640px) {
    .major-modal {
        padding: 10px;
    }

    .major-modal-card {
        max-height: calc(100vh - 20px);
    }

    .major-item-title,
    .major-settings-grid,
    .major-price-field,
    .major-note {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    .major-settings-grid {
        grid-template-columns: 1fr;
    }

    .major-radio-grid {
        grid-template-columns: 1fr;
    }

    .major-form-row input,
    .major-form-row select {
        width: 65%;
    }

    .major-price-row {
        flex-direction: column;
        gap: 9px;
    }

    .major-modal-actions {
        padding: 14px 12px;
    }
}

/* 碳排工項編輯彈窗 */
.carbon-modal[hidden] {
    display: none;
}

.carbon-modal {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.carbon-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 42, 53, .48);
}

.carbon-modal-card {
    position: relative;
    width: min(920px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(22, 48, 64, .3);
}

.carbon-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #dce8ef;
    background: #f7fbfd;
}

.carbon-modal-header h2 {
    margin: 0;
    color: var(--brand);
    font-size: var(--fs-xl);
}

.carbon-modal-header h2 i {
    margin-right: 7px;
    color: var(--brand-accent);
}

.carbon-modal-close {
    border: 0;
    background: transparent;
    color: var(--text-4);
    font-size: var(--fs-2xl);
    cursor: pointer;
}

.carbon-item-title {
    margin: 18px 20px 12px;
    padding: 15px 18px;
    border: 1px solid #b9d2eb;
    border-radius: 7px;
    background: #eef6ff;
    color: var(--brand);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.carbon-item-title span {
    color: var(--text-1);
    font-size: var(--fs-xl);
}

.carbon-settings {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 32px;
    padding: 0 20px 12px;
    color: var(--text-3);
}

/* 2026/09/15：工料分析基本量右邊的轉換係數（demo 新增的 .carbon-convert，這裡目前
   沒有元件在用——BudgetCarbonEdit.vue 的轉換係數是 2026-09-11 使用者裁示先加的，
   用自己的 .carbon-conversion-row／.carbon-conversion-own scoped 樣式，這次同步
   custom.css 只是照 demo commit 原樣整塊搬，不代表要換掉既有元件的 class） */
.carbon-convert { display: inline-flex; align-items: center; gap: 7px; color: var(--text-3); }
.carbon-convert b { color: var(--brand); }
.carbon-convert input[type="number"] { width: calc(78px * var(--fs-scale)); }
.carbon-convert input[type="text"] { width: calc(70px * var(--fs-scale)); }

/* 工料挑選清單：改成碳排放係數表的欄位（項次／編號／名稱／單位／係數／來源／範疇／年份）。
   欄位變多，彈窗放寬到 1240px，表格另外給最小寬度＋水平捲動，欄位才不會擠在一起。 */
#carbon-modal .carbon-modal-card { width: min(1240px, 96vw); }
.carbon-factor-list { overflow-x: auto; }
/* 共用的 .carbon-material-table 寫了 min-width:0 !important 且位置在後面，
   這裡用 table.xxx 提高特異性才蓋得過去 */
table.carbon-factor-table {
    table-layout: fixed;
    width: 100% !important;
    min-width: calc(1020px * var(--fs-scale)) !important;
    max-width: none !important;
}
.carbon-factor-table th { white-space: nowrap; }
/* 欄寬要蓋過前面共用的 .carbon-material-table th:nth-child(n)（同特異性但寫在後面），
   所以這裡一律加上 .carbon-factor-table 之外的 table 類別提高特異性。 */
table.carbon-factor-table th:nth-child(1) { width: 5%; }
table.carbon-factor-table th:nth-child(2) { width: 17%; }
table.carbon-factor-table th:nth-child(3) { width: 21%; }
table.carbon-factor-table th:nth-child(4) { width: 8%; }
table.carbon-factor-table th:nth-child(5) { width: 13%; }
table.carbon-factor-table th:nth-child(6) { width: 17%; }
table.carbon-factor-table th:nth-child(7) { width: 10%; }
table.carbon-factor-table th:nth-child(8) { width: 9%; }
table.carbon-factor-table th:last-child { width: calc(48px * var(--fs-scale)); }
.carbon-factor-table .cp-seq,
.carbon-factor-table .cp-unit,
.carbon-factor-table .cp-scope,
.carbon-factor-table .cp-year { text-align: center; }
.carbon-factor-table .cp-factor { text-align: right; font-variant-numeric: tabular-nums; }
.carbon-factor-table .cp-code {
    padding-right: 18px;                /* 與工項名稱之間留出間距，不要黏在一起 */
    font-family: Consolas, "Noto Sans TC", monospace;
    letter-spacing: .02em;
    white-space: nowrap;
}
.carbon-factor-table .cp-name { padding-left: 4px; font-weight: 600; }
.carbon-factor-table .cp-name small { display: block; color: var(--text-4); font-size: var(--fs-xs); font-weight: 400; }
.carbon-factor-table .cp-source { color: var(--text-3); font-size: var(--fs-sm); }

/* 2026/09/15 碳排工項編輯：碳分析按鈕移到資訊區塊下方，兩段式展開 */
.carbon-analysis-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 0 20px 12px;
}
.carbon-analysis-bar .secondary-button { min-height: calc(36px * var(--fs-scale)); }
.carbon-analysis-hint { color: var(--text-4); font-size: var(--fs-sm); }
.carbon-scope {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 20px 14px;
    padding: 12px 16px;
    border: 1px solid #cfe0ee;
    border-radius: 10px;
    background: #f3f8fc;
}
.carbon-scope-label { color: var(--brand); font-weight: 700; font-size: var(--fs-sm); }
.carbon-scope-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid #bfd4e3;
    border-radius: 999px;
    background: #fff;
    color: var(--text-2);
    font-size: var(--fs-sm);
    cursor: pointer;
}
.carbon-scope-option:hover { border-color: var(--brand-accent); }
.carbon-scope-option input { width: 15px; height: 15px; accent-color: #18578f; }
.carbon-scope-option.is-checked {
    border-color: #18578f;
    background: #e8f1f9;
    color: var(--brand);
    font-weight: 700;
}
.carbon-scope[hidden],
.carbon-settings[hidden],
.carbon-current-wrap[hidden] { display: none !important; }

.carbon-settings label {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.carbon-settings strong {
    color: var(--brand);
}

.carbon-settings input {
    width: 70px;
    height: 33px;
    padding: 4px 9px;
    border: 1px solid #cbd9e6;
    border-radius: 5px;
    font: inherit;
}

.carbon-current-wrap {
    margin: 0 20px;
    overflow: hidden;
}

.carbon-current-table,
.carbon-material-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.carbon-current-table th,
.carbon-current-table td,
.carbon-material-table th,
.carbon-material-table td {
    height: auto;
    padding: 10px 8px;
    border-bottom: 1px solid #dfe8ef;
    color: var(--brand);
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.carbon-current-table th,
.carbon-material-table th {
    background: #f2f7fb;
    color: var(--text-4);
    font-weight: 700;
}

.carbon-current-table th:nth-child(1) {
    width: 38%;
}

.carbon-current-table th:nth-child(2),
.carbon-current-table th:nth-child(3) {
    width: 14%;
}

.carbon-current-table th:nth-child(4) {
    width: 11%;
}

.carbon-current-table th:nth-child(5) {
    width: 15%;
}

.carbon-current-table th:last-child {
    width: 8%;
}

.carbon-current-table tbody td {
    font-weight: 600;
}

.carbon-current-table .carbon-row-edit {
    width: 30px;
    height: 30px;
    border: 1px solid #b8c3ce;
    border-radius: 5px;
    background: #f7f9fb;
    color: var(--text-4);
    cursor: pointer;
}

.carbon-current-table .carbon-row-edit.is-editing {
    border-color: #84b999;
    background: #f1faf4;
    color: #27804e;
}

.carbon-current-table .carbon-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.carbon-current-table .carbon-row-remove {
    width: 30px;
    height: 30px;
    padding: 0;
}

.carbon-current-table th:last-child,
.carbon-current-table td:last-child {
    width: 10%;
    min-width: 88px;
}

.carbon-current-table th:nth-child(1) {
    width: 36%;
}

.carbon-current-table th:nth-child(2) {
    width: 12%;
}

.carbon-current-table th:nth-child(3) {
    width: 14%;
}

.carbon-current-table th:nth-child(4) {
    width: 12%;
}

.carbon-quantity-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #8bb5df;
    border-radius: 4px;
    padding: 5px 6px;
    color: var(--brand);
    font: inherit;
    text-align: right;
}

.carbon-picker {
    margin: 16px 20px 0;
    padding: 14px;
    overflow: hidden;
    border-radius: 8px;
}

.carbon-picker .carbon-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 15px;
}

.carbon-picker .carbon-tabs>button {
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 7px 10px;
    color: var(--brand-accent);
    cursor: pointer;
    font: inherit;
}

.carbon-picker .carbon-tabs>button.active {
    color: var(--brand-accent);
    border-bottom-color: #376db1;
}

.carbon-picker .carbon-tabs label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    color: var(--text-3);
    font-weight: 700;
}

.carbon-search-group {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 7px;
    margin-left: auto;
}

.carbon-picker .carbon-tabs input {
    width: 180px;
    max-width: 28vw;
    height: 34px;
    border: 1px solid #cbd9e6;
    border-radius: 5px;
}

.carbon-search {
    border: 0 !important;
    border-radius: 5px;
    background: #607185 !important;
    color: #fff !important;
    padding: 8px 14px !important;
}

.carbon-picker-content {
    margin-top: 12px;
    padding: 12px;
    background: #edf6fe;
    border-radius: 7px;
    scroll-margin-top: 10px;
    transition: box-shadow .2s ease;
}

.carbon-picker-content.is-tab-target {
    box-shadow: 0 0 0 2px #18578f;
}

.carbon-machine-picker-content {
    background: #f1f3f5;
}

.carbon-fuel-picker-content {
    background: #fef6ed;
}

.carbon-custom-picker-content {
    background: #fff1f2;
}

.carbon-machine-table th {
    background: #dfe5e9;
    color: var(--text-3);
}

.carbon-fuel-table th {
    background: #ffead0;
    color: #8a5a2b;
}

.carbon-custom-table th {
    background: #e2eaf1;
    color: var(--brand-accent);
}

.carbon-custom-table input {
    width: 100%;
    min-width: 0;
    height: 30px;
    border: 1px solid #c8d7e4;
    border-radius: 4px;
    background: #fff;
    color: var(--brand);
    padding: 4px 6px;
}

.carbon-custom-picker-content.is-readonly-view .carbon-custom-draft {
    display: none;
}

.carbon-custom-table th:last-child,
.carbon-custom-table td:last-child {
    width: 86px;
}

.carbon-custom-action-cell {
    text-align: center;
    white-space: nowrap;
}

.carbon-custom-row-action {
    min-width: 32px;
    height: 32px;
    padding: 0 7px;
}

.carbon-custom-save-row {
    border: 1px solid #b9d5eb;
    border-radius: 5px;
    background: #e9f3fb;
    color: var(--brand);
}

.carbon-custom-save-row:hover {
    background: #d9ebf8;
    color: var(--brand);
}

.carbon-custom-add-row {
    min-width: 32px;
}

.carbon-picker-title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 800;
    letter-spacing: .02em;
}

.carbon-picker-heading,
.carbon-picker-tools {
    display: flex;
    align-items: center;
}

.carbon-picker-heading {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.carbon-picker-tools {
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
}

.carbon-material-title {
    color: var(--brand-accent);
}

.carbon-machine-title {
    color: var(--text-3);
}

.carbon-fuel-title {
    color: #a96324;
}

.carbon-custom-title {
    color: #b85764;
}

.carbon-picker-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--brand-accent);
}

.carbon-picker-meta select {
    width: 68px;
    height: 32px;
    border: 1px solid #cbd9e6;
    border-radius: 5px;
}

.carbon-page-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
}

.carbon-page-toggle input {
    accent-color: #4685cf;
}

.carbon-current-table th,
.carbon-material-table th {
    font-size: var(--fs-base);
}

.carbon-material-table th:nth-child(1) {
    width: 7%;
}

.carbon-material-table th:nth-child(2) {
    width: 10%;
}

.carbon-material-table th:nth-child(3) {
    width: 28%;
}

.carbon-material-table th:nth-child(4) {
    width: 14%;
}

.carbon-material-table th:nth-child(5) {
    width: 15%;
}

.carbon-material-table th:nth-child(6) {
    width: 20%;
}

.carbon-material-table th:last-child {
    width: 6%;
}

.carbon-material-table tbody td {
    font-weight: 600;
}

.carbon-material-table tbody td:last-child {
    text-align: center;
}

.carbon-material-table button {
    width: calc(30px * var(--fs-scale));
    height: calc(30px * var(--fs-scale));
    border: 1px solid #9bbde4;
    border-radius: 5px;
    background: #f4f9ff;
    color: var(--brand-accent);
    font-size: var(--fs-base);
    font-weight: 700;
    cursor: pointer;
}

.carbon-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 12px;
    white-space: nowrap;
}

.carbon-pagination button {
    min-width: 28px;
    height: 30px;
    border: 0;
    border-radius: 4px;
    background: #f0f1f3;
    color: var(--text-1);
    font-weight: 700;
}

.carbon-pagination button.active {
    background: #e4effb;
    color: var(--brand-accent);
}

.carbon-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 18px 20px;
}

@media (max-width: 640px) {
    .carbon-modal {
        padding: 10px;
    }

    .carbon-modal-card {
        max-height: calc(100vh - 20px);
    }

    .carbon-settings {
        gap: 10px;
    }

    .carbon-picker .carbon-tabs label {
        margin-left: 0;
        width: 100%;
    }

    .carbon-picker .carbon-tabs input {
        flex: 1;
        max-width: none;
    }

    .carbon-current-table th,
    .carbon-current-table td,
    .carbon-material-table th,
    .carbon-material-table td {
        padding: 7px 4px;
        font-size: var(--fs-xs);
    }

    .carbon-picker {
        margin: 12px;
        padding: 9px;
    }

    .carbon-item-title {
        margin: 12px;
    }

    .carbon-current-wrap,
    .carbon-settings {
        margin-left: 12px;
        margin-right: 12px;
        padding-left: 0;
        padding-right: 0;
    }

    .carbon-picker-content {
        padding: 7px;
    }

    .carbon-picker-meta {
        gap: 6px;
        font-size: var(--fs-sm);
    }

    .carbon-picker-heading {
        gap: 8px;
    }

    .carbon-picker-tools {
        gap: 7px;
    }

    .carbon-pagination {
        gap: 2px;
    }

    .carbon-pagination button {
        min-width: 23px;
        height: 28px;
        padding: 0 4px;
    }

    .carbon-modal-actions {
        padding: 12px;
    }
}

.budget-edit-page .editor-bottom-actions .secondary-button {
    border: 1px solid #cbd8e3;
    border-radius: 6px;
    background: #fff;
    color: var(--brand-accent);
}

.budget-edit-page .editor-bottom-actions .primary-button {
    border-radius: 6px;
    background: #19745c;
    color: #fff;
}

.budget-edit-page .editor-footer-actions .secondary-button,
.budget-edit-page .editor-footer-actions .primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    height: 36px;
    padding: 0 16px;
    text-decoration: none;
    font-weight: 700;
}

.budget-edit-page .editor-footer-actions .secondary-button {
    border: 1px solid #cbd8e3;
    border-radius: 6px;
    background: #fff;
    color: var(--brand-accent);
}

.budget-edit-page .editor-footer-actions .primary-button {
    border-radius: 6px;
    background: #19745c;
    color: #fff;
}

@media (max-width: 850px) {
    .edit-page-heading {
        padding: 18px 16px 0;
    }

    .edit-project-summary {
        margin-left: 16px;
        margin-right: 16px;
    }

    .budget-edit-page .page-shell .editor-actions,
    .budget-edit-page .editor-tip,
    .budget-edit-page .page-shell .editor-footer {
        margin-left: 16px;
        margin-right: 16px;
    }

    .budget-edit-page .editor-no-side .estimate-wrap {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 600px) {
    .edit-page-heading {
        align-items: flex-start;
    }

    .edit-page-heading h1 {
        font-size: var(--fs-2xl);
    }

    .edit-page-heading p {
        display: none;
    }

    .edit-project-summary {
        padding: 14px 16px;
        border-radius: 10px;
    }

    .project-summary-detail {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .project-summary-detail strong {
        font-size: var(--fs-xl);
    }

    .project-summary-detail span {
        padding-left: 0;
        border-left: 0;
    }

    .budget-edit-page .page-shell .editor-actions {
        display: block;
    }

    .budget-edit-page .action-group {
        margin-bottom: 8px;
    }

    .budget-edit-page .estimate-panel .estimate-toolbar {
        min-width: 0;
        flex-wrap: wrap;
    }

    .budget-edit-page .estimate-toolbar input {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 850px) {
    .mobile-menu-backdrop {
        position: fixed;
        z-index: 25;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        background: rgba(35, 52, 69, .42);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .mobile-menu-backdrop.is-visible {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 850px) {
    .sidebar.open {
        transform: none;
        z-index: 30;
        box-shadow: 8px 0 24px #203a5430;
    }

    .top-actions {
        display: flex !important;
        margin-left: auto;
    }

    .logout-button {
        width: 34px;
        padding: 0;
        justify-content: center;
        font-size: 0;
    }

    .logout-button:before {
        content: "↪";
        font-size: var(--fs-2xl);
        line-height: 1;
    }
}

/* 併標專案：單列表右側的排序工具 */
.combine-single-actions {
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
    vertical-align: middle;
}

.master-search:has(.combine-single-actions) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.combine-move-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #8dbba5;
    border-radius: 6px;
    background: #fff;
    color: #28745d;
    font: inherit;
    font-size: var(--fs-base);
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.combine-move-button:hover {
    background: #e8f6ee;
    border-color: #28745d;
    transform: translateY(-1px);
}

.combine-move-button:focus-visible {
    outline: 3px solid #9ccfba;
    outline-offset: 2px;
}

.master-project-table tbody tr[draggable="true"] {
    cursor: grab;
}

.master-project-table tbody tr.is-dragging {
    opacity: .45;
}

.master-project-table tbody tr.is-selected {
    background: #e8f6ee;
}

.master-project-table tbody tr.is-active {
    background: #cfe9da;
    outline: 2px solid #4e9a78;
    outline-offset: -2px;
}

.master-project-table tbody tr.is-first-unselected td {
    border-top: 3px solid #aab8c5;
}

@media (max-width: 600px) {
    .master-project-card .master-search:not(:has(.combine-single-actions)) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
    }

    .master-project-card .master-search:not(:has(.combine-single-actions)) label {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }

    .master-project-card .master-search:not(:has(.combine-single-actions)) input {
        flex: 1;
        width: 100%;
        min-width: 0;
    }

    .master-project-card .master-search:not(:has(.combine-single-actions))>.search-icon-button {
        margin-left: 0 !important;
    }

    .master-search:has(.combine-single-actions) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 6px;
    }

    .master-search:has(.combine-single-actions) label {
        grid-column: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }

    .master-search:has(.combine-single-actions)>.search-icon-button {
        grid-column: 2;
        margin-left: 0 !important;
    }

    .master-search:has(.combine-single-actions) input,
    .master-search:has(.combine-single-actions) select {
        width: 100%;
        min-width: 0;
        flex: 1;
    }

    .combine-single-actions {
        grid-column: 1 / -1;
        width: 100%;
        margin-left: auto;
        gap: 4px;
        justify-content: flex-end;
    }

    .combine-move-button {
        min-width: 74px;
        min-height: 34px;
        padding: 0 10px;
    }

    .combine-move-button span {
        display: inline;
    }

    .master-project-card .table-wrap {
        width: 100%;
        overflow-x: visible;
        padding: 0 10px;
    }

    .master-project-table {
        min-width: 0;
        width: 100%;
        table-layout: fixed;
    }

    .master-project-table th,
    .master-project-table td {
        padding: 9px 6px;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .master-project-table th:first-child,
    .master-project-table td:first-child {
        width: 34px;
    }

    .master-project-table th:nth-child(2),
    .master-project-table td:nth-child(2) {
        width: 35%;
    }

    /* 分標／併標主專案挑選：勾選用的 radio 按鈕在手機版放大，避免觸控時誤點旁邊欄位。 */
    .master-project-table td:first-child input[type="radio"] {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 600px) {
    .content {
        padding: 16px 12px;
    }

    .table-card,
    .table-wrap {
        overflow: visible;
    }

    .table-card table,
    .table-card thead,
    .table-card tbody,
    .table-card tr,
    .table-card td {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .table-card thead {
        display: none;
    }

    .table-card tbody {
        padding: 8px;
    }

    .table-card tr {
        margin-bottom: 10px;
        padding: 7px 11px;
        border: 1px solid #d9e1e7;
        border-radius: 8px;
        background: #fff;
    }

    .table-card td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 34px;
        height: auto;
        padding: 5px 0;
        border: 0;
        text-align: right;
    }

    .table-card td:before {
        content: attr(data-label);
        flex: 0 0 88px;
        color: var(--text-4);
        text-align: left;
        font-size: var(--fs-xs);
    }

    .table-card .row-actions {
        justify-content: flex-end;
        gap: 7px;
        border-top: 1px solid #e8edf0;
        margin-top: 5px;
        padding-top: 9px;
    }

    .table-card .row-actions:before {
        margin-right: auto;
    }

    .table-card .pagination {
        justify-content: center;
    }

    .inside_footer {
        padding: 14px 16px;
    }

    .inside_footer .container {
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        font-size: var(--fs-xs);
    }

    #gotop {
        margin-left: auto;
    }

    .page-size-label {
        width: 100%;
        justify-content: center;
        margin: 0 0 8px;
    }
}

.table-summary {
    display: flex;
    align-items: center;
    gap: 24px;
}

.table-summary .page-size-label {
    margin: 0;
    padding-left: 14px;
    border-left: 1px solid #d9e1e7;
}

.button-icon {
    display: inline-block;
    margin-right: 5px;
    font-size: var(--fs-lg);
    line-height: 1;
}

.pagination {
    justify-content: center;
}

.page-position {
    display: flex;
    align-items: center;
    gap: 10px;
}

#page-numbers {
    display: flex;
    gap: 5px;
}

#page-numbers button {
    width: 28px;
    height: 28px;
    border: 1px solid #d4dde4;
    border-radius: 5px;
    background: #fff;
    color: var(--text-4);
}

#page-numbers button.current {
    border-color: #286fae;
    background: #286fae;
    color: #fff;
}

@media (max-width: 600px) {
    .table-summary {
        width: 100%;
        justify-content: space-between;
        gap: 12px;
    }

    .table-summary .page-size-label {
        width: auto;
        margin: 0;
        padding-left: 12px;
    }

    .page-position {
        gap: 6px;
    }
}

.add-page {
    min-height: 100vh;
    background: #eef5fa;
}

.add-shell {
    max-width: 100%;
    padding: 22px 2.2vw 42px;
}

.add-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.add-header h1 {
    margin: 0;
    font-size: var(--fs-2xl);
    color: var(--brand);
}

.add-header a {
    padding: 8px 13px;
    border: 1px solid #bdd7ef;
    border-radius: 6px;
    background: #edf7ff;
    color: var(--brand-accent);
    text-decoration: none;
}

.upload-card,
.project-form-card {
    padding: 28px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px #203a5410;
    margin: 80px;
}

.upload-card h2 {
    margin: 0 0 18px;
    padding: 0 12px 12px;
    border-bottom: 1px solid #d5e4f0;
    border-left: 6px solid #2872b5;
    color: var(--brand-accent);
    font-size: var(--fs-xl);
}

.upload-card h2 small {
    color: var(--brand-accent);
    font-weight: 400;
}

.upload-zone {
    display: flex;
    min-height: 230px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed #b6cae0;
    border-radius: 9px;
    background: #fafcff;
    color: var(--brand-accent);
    cursor: pointer;
}

.upload-zone .upload-icon {
    font-size: 42px;
    color: var(--brand-accent);
}

.upload-zone strong {
    color: var(--text-1);
    font-size: var(--fs-xl);
}

.upload-zone small {
    color: var(--brand-accent);
    font-weight: 600;
}

.add-next {
    display: block;
    min-width: 164px;
    height: 46px;
    margin: 18px auto;
    border: 0;
    border-radius: 7px;
    background: #ccd9e6;
    color: #fff;
    font-size: var(--fs-xl);
}

.project-form-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 52px;
    background: #edf4fd;
}

.project-form-card h2 {
    margin: 0;
    font-size: var(--fs-2xl);
    color: var(--brand);
}

.project-form-card p {
    margin: 6px 0 14px;
}

.project-form-card label {
    display: block;
    margin: 11px 0;
    color: var(--text-1);
}

.project-form-card b {
    color: #d04141;
}

.project-form-card input,
.project-form-card textarea {
    display: block;
    width: 100%;
    min-height: 31px;
    margin-top: 5px;
    border: 1px solid #aab5c0;
    background: #fff;
}

.project-form-card textarea {
    height: 44px;
    resize: vertical;
}

.project-form-card small {
    display: block;
    margin-top: 4px;
}

.form-wizard-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 20px -52px -24px;
    padding: 10px 20px;
    border-top: 1px solid #6aa5ff;
}

.form-wizard-actions a,
.form-wizard-actions button {
    padding: 7px 16px;
    border: 1px solid #aac0d8;
    background: #fff;
    color: var(--brand);
    text-decoration: none;
}

.form-wizard-actions button {
    background: #28745d;
    color: #fff;
    border-color: #28745d;
}

.combine-project-card {
    padding-bottom: 20px;
}

.combine-picker {
    display: grid;
    grid-template-columns: minmax(0,1fr) calc(92px * var(--fs-scale)) minmax(0,1fr);
    gap: 16px;
    padding: 20px;
}

.combine-list {
    min-width: 0;
    border: 1px solid #b7c8d9;
    background: #f7fbff;
}

.combine-list h2 {
    margin: 0;
    padding: 9px 12px;
    background: #9bd379;
    color: var(--text-1);
    font-size: var(--fs-base);
    text-align: center;
}

.combine-list .table-wrap {
    min-height: 310px;
    max-height: 410px;
    overflow: auto;
}

.combine-list table {
    min-width: 480px;
}

.combine-list th {
    background: #e0f3d7;
    color: var(--text-1);
}

.combine-list td:first-child {
    width: 36px;
    text-align: center;
}

.combine-list input {
    width: 16px;
    height: 16px;
    accent-color: #28745d;
}

.combine-transfer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.combine-transfer button,
.combine-order button {
    min-height: 34px;
    border: 1px solid #b7c8d9;
    border-radius: 5px;
    background: #fff;
    color: var(--brand);
    cursor: pointer;
}

.combine-transfer button:hover,
.combine-order button:hover {
    background: #edf7f0;
    color: var(--text-2);
}

.combine-order {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 9px;
    border-top: 1px solid #d5e1eb;
}

@media (max-width: 850px) {
    .combine-picker {
        grid-template-columns: 1fr;
    }

    .combine-transfer {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .combine-transfer button {
        padding: 0 12px;
    }

    .combine-list .table-wrap {
        min-height: 190px;
    }

    .combine-list table {
        min-width: 560px;
    }
}

.combine-search-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
    padding: 16px 20px 0;
}

.combine-search-toolbar label {
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.combine-search-toolbar input {
    height: 34px;
    margin-left: 7px;
    padding: 0 10px;
    border: 1px solid #cad5de;
    border-radius: 5px;
}

.combine-search-toolbar button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #a8c8e6;
    border-radius: 5px;
    background: #f5faff;
    color: var(--brand-accent);
    cursor: pointer;
}

.combine-search-toolbar button:hover {
    background: #e3f1ff;
}

.combine-list tbody tr[draggable="true"] {
    cursor: grab;
}

.combine-list tbody tr.dragging {
    opacity: .45;
    background: #dff1e5;
}

@media (max-width: 600px) {
    .combine-search-toolbar {
        justify-content: stretch;
        padding: 14px 12px 0;
    }

    .combine-search-toolbar label {
        flex: 1;
    }

    .combine-search-toolbar input {
        width: calc(100% - 40px);
    }
}

.search-icon-button {
    display: inline-grid;
    place-items: center;
    width: calc(36px * var(--fs-scale));
    min-width: calc(36px * var(--fs-scale));
    padding: 0;
    font-size: var(--fs-base);
}

.small-red {
    color: #e2165b;
    font-weight: normal;
}

.logout-button:before {
    content: "\21aa";
    display: inline-block;
    margin-right: 6px;
    font-size: var(--fs-lg);
    line-height: 1;
}

#page-info {
    display: none;
}

.project-form-card {
    border: 1px solid #cbd9e7;
    box-shadow: 0 10px 24px #203a5418;
}

.project-form-card h2 {
    padding-bottom: 12px;
    border-bottom: 2px solid #7eafe1;
}

.project-form-card label {
    font-weight: 600;
}

.project-form-card input,
.project-form-card textarea {
    border-radius: 4px;
    padding: 7px 9px;
    font: 14px "Noto Sans TC", Arial, sans-serif;
}

.project-form-card input:focus,
.project-form-card textarea:focus {
    outline: 0;
    border-color: #4385c6;
    box-shadow: 0 0 0 3px #4385c622;
}

.form-wizard-actions button {
    border-radius: 5px;
    cursor: pointer;
}

.project-form-standard {
    max-width: 860px;
}

.project-input-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}

.project-input-grid label {
    margin: 0;
}

.project-input-grid input {
    height: 38px;
}

.project-form-standard .form-wizard-actions {
    margin-top: 24px;
}

.project-form-standard .form-wizard-actions button {
    order: 2;
}

.project-form-standard .form-wizard-actions a {
    order: 1;
}

@media (max-width: 600px) {
    .project-input-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .project-form-standard {
        padding: 20px;
    }

    .project-form-standard .form-wizard-actions {
        margin-left: -20px;
        margin-right: -20px;
        margin-bottom: -20px;
    }
}

@media (max-width: 600px) {
    .row-actions .icon-action {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: calc(70px * var(--fs-scale));
        height: 30px;
        padding: 0 7px;
        gap: 4px;
        white-space: nowrap;
        overflow: visible;
    }

    .row-actions .icon-action:after {
        content: attr(aria-label);
        font-size: var(--fs-xs);
        line-height: 1;
    }

    .logout-button:before {
        margin-right: 0;
    }
}

.logout-button:before {
    content: "\1F6AA";
}

.add-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.add-page-heading p {
    margin: 0 0 3px;
    color: #28745d;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.add-page-heading h1 {
    margin: 0;
    color: var(--brand);
    font-size: 23px;
}

.add-page-heading .secondary-button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.upload-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.upload-card-heading h2 {
    margin: 0;
}

.template-select-button {
    height: 36px;
    padding: 0 14px;
    border: 1px solid #18578f;
    border-radius: 6px;
    background: #18578f;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.template-select-button:hover {
    border-color: #0d4577;
    background: #0d4577;
}

@media (max-width: 600px) {
    .add-page .page-shell {
        min-height: 100vh;
    }

    .add-page .add-shell {
        padding: 16px 12px 28px;
    }

    .add-page-heading {
        align-items: flex-start;
        gap: 12px;
    }

    .add-page-heading h1 {
        font-size: var(--fs-2xl);
    }

    .add-page-heading .secondary-button {
        height: 34px;
        padding: 0 10px;
        white-space: nowrap;
    }

    .template-select-button {
        height: 34px;
        padding: 0 10px;
        white-space: nowrap;
    }

    .upload-card-heading {
        gap: 10px;
    }

    .add-page .upload-card {
        padding: 16px 12px;
        border-radius: 8px;
    }

    .add-page .upload-card h2 {
        font-size: var(--fs-lg);
        line-height: 1.55;
        padding-left: 9px;
    }

    .add-page .upload-card h2 small {
        display: block;
        margin-top: 5px;
        font-size: var(--fs-sm);
    }

    .add-page .upload-zone {
        min-height: 190px;
        padding: 18px 12px;
        text-align: center;
    }

    .add-page .add-next {
        width: 100%;
        max-width: none;
        margin: 16px 0 0;
    }
}

.logout-button:before,
#gotop:before,
.upload-zone .upload-icon:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.logout-button:before {
    content: "\f2f5";
}

#gotop img {
    display: none;
}

#gotop:before {
    content: "\f062";
    color: #fff;
    font-size: var(--fs-xl);
}

.upload-zone .upload-icon {
    font-size: 0;
}

.upload-zone .upload-icon:before {
    content: "\f574";
    color: var(--brand-accent);
    font-size: 42px;
}

.upload-card,
.project-form-card {
    margin: 80px;
}

@media (max-width: 1024px) {

    .upload-card,
    .project-form-card {
        margin: 36px 24px;
    }
}

@media (max-width: 600px) {

    .upload-card,
    .project-form-card {
        margin: 18px 0;
    }
}

.add-page:has(.add-system-header) .add-shell {
    padding-top: 94px;
}

.add-shell>.form-actions {
    justify-content: center !important;
    margin-top: 22px;
}

@media (max-width: 850px) {
    .add-shell .search-form {
        grid-template-columns: 1fr !important;
    }

    .add-shell>.form-actions {
        grid-column: auto !important;
    }
}

.project-form-actions {
    justify-content: center !important;
}

.project-form-actions a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.master-project-card {
    padding-bottom: 20px;
}

.master-project-intro {
    margin: 18px 20px 10px;
    color: var(--text-3);
}

.master-search {
    display: flex;
    padding: 20px 12px;
}

.master-search label {
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.master-search input {
    height: 34px;
    margin-left: 8px;
    padding: 0 10px;
    border: 1px solid #cad5de;
    border-radius: 5px;
}

.master-project-table {
    min-width: 700px;
}

.master-project-table th {
    background: #d9f0d5;
    color: var(--text-2);
}

.master-project-table td:first-child {
    width: 42px;
    text-align: center;
}

.master-project-table input {
    width: 17px;
    height: 17px;
    accent-color: #28745d;
}

/* 分標專案：詳細表項目挑選 */
.add-page .sub-master-summary {
    margin: 0 0 14px;
}

.sub-item-table {
    width: 100%;
    min-width: 1060px;
    border-collapse: collapse;
    font-size: var(--fs-base);
}

.sub-item-table th {
    padding: 9px 8px;
    border: 0;
    background: #d9f0d5;
    color: var(--text-2);
    font-weight: 700;
    white-space: nowrap;
}

.sub-item-table td {
    padding: 8px;
    border: 0;
    color: var(--brand);
    vertical-align: middle;
    text-align: center;
}

.sub-item-table td:first-child {
    width: 40px;
    text-align: center;
}

.sub-item-table td:nth-child(2) {
    width: 48px;
    text-align: center;
}

.sub-item-table td:nth-child(3) {
    min-width: 210px;
}

.sub-item-table input:not(.analysis-fixed-price) {
    width: 17px;
    height: 17px;
    accent-color: #28745d;
}

.sub-item-table .analysis-fixed-control {
    margin: 0;
}

.sub-item-table .number {
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sub-item-table .sub-item-group {
    background: #edf7f0;
    color: var(--text-2);
    font-weight: 700;
}

.sub-item-table .sub-item-section {
    background: #f5faf7;
    font-weight: 700;
}

.sub-item-table tbody tr:hover td {
    background: #f1faf4;
}

.sub-item-table tbody tr {
    cursor: pointer;
}

.sub-item-table tbody tr.is-selected td {
    background: #e8f6ee;
    color: #216c4f;
}

.master-project-card .form-actions {
    margin: 20px 20px 0;
}

@media (max-width: 600px) {
    .master-search {
        justify-content: stretch;
    }

    .master-search label,
    .master-search input {
        width: 100%;
    }

    .master-search input {
        margin: 6px 0 0;
    }

    .master-project-table {
        min-width: 620px;
    }

    .master-project-card .form-actions {
        margin-left: 0;
        margin-right: 0;
        flex-wrap: wrap;
    }
}

.add-next:not(:disabled) {
    background: #fff;
    color: #28745d;
    border: 1px solid #28745d;
    cursor: pointer;
    box-shadow: 0 2px 6px #1e705822;
}

.add-next:not(:disabled):hover {
    background: #edf7f0;
}

.uploaded-file-name {
    max-width: min(90%, 520px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #28745d;
    font-weight: 700;
}

.add-shell.add-shell-expanded {
    margin-left: 245px;
}

.add-system-header.add-header-expanded {
    margin-left: 245px;
}

@media (max-width: 850px) {

    .add-shell.add-shell-expanded,
    .add-system-header.add-header-expanded {
        margin-left: 0;
    }
}

/* 單價分析項目：預留固定單價提示所需的細項備註欄寬。 */
.analysis-table th:nth-child(21),
.analysis-table td:nth-child(21) {
    min-width: 300px;
    text-align: left;
    white-space: normal;
}

/* 單價分析項目彈窗：視窗本體固定置中，超出寬度只由表格區塊處理。 */
.analysis-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.analysis-modal-card {
    box-sizing: border-box;
    width: min(1180px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
    margin: auto;
}

.analysis-table-wrap {
    max-width: calc(100% - 40px);
    overflow: auto;
}

/* 一般螢幕：以滿版、固定比例的密集表格呈現，避免橫向捲動。 */
@media (min-width: 1101px) {
    .analysis-modal-card {
        width: calc(100vw - 48px);
        max-width: 1600px;
    }

    .analysis-table-wrap {
        overflow: hidden;
    }

    .analysis-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .analysis-table th,
    .analysis-table td {
        padding: 7px 4px;
        font-size: clamp(.8rem, .85vw, .96rem);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .analysis-table th:nth-child(1) {
        width: 3%;
    }

    .analysis-table th:nth-child(2) {
        width: 13%;
    }

    .analysis-table th:nth-child(3) {
        width: 3%;
    }

    .analysis-table th:nth-child(4) {
        width: 4%;
    }

    .analysis-table th:nth-child(5) {
        width: 4%;
    }

    .analysis-table th:nth-child(6),
    .analysis-table th:nth-child(7) {
        width: 5%;
    }

    .analysis-table th:nth-child(8) {
        width: 7%;
    }

    .analysis-table th:nth-child(9) {
        width: 4%;
    }

    .analysis-table th:nth-child(13) {
        width: 4%;
    }

    .analysis-table th:nth-child(14),
    .analysis-table th:nth-child(15),
    .analysis-table th:nth-child(16),
    .analysis-table th:nth-child(17) {
        width: 3%;
    }

    .analysis-table th:nth-child(10) {
        width: 5%;
    }

    .analysis-table th:nth-child(11) {
        width: 6%;
    }

    .analysis-table th:nth-child(12) {
        width: 3%;
    }

    .analysis-table th:nth-child(18),
    .analysis-table th:nth-child(19),
    .analysis-table th:nth-child(20) {
        width: 5%;
    }

    .analysis-table th:nth-child(21) {
        width: 7%;
    }

    .analysis-table th:nth-child(2),
    .analysis-table td:nth-child(2),
    .analysis-table th:nth-child(21),
    .analysis-table td:nth-child(21) {
        min-width: 0;
    }

    .analysis-table .analysis-rounding {
        width: 100%;
        max-width: 48px;
    }
}

/* 單價分析項目：窄螢幕改以欄位卡片呈現，避免橫向捲動。 */
@media (max-width: 1100px) {
    .analysis-modal {
        padding: 10px;
    }

    .analysis-modal-card {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .analysis-modal-header {
        padding: 10px 12px;
    }

    .analysis-item-title {
        padding: 10px 12px;
    }

    .analysis-table-wrap {
        max-width: none;
        margin: 0 12px;
        overflow: visible;
        border: 0;
    }

    .analysis-table,
    .analysis-table tbody,
    .analysis-table tr,
    .analysis-table td {
        display: block;
    }

    .analysis-table {
        width: 100%;
        min-width: 0;
    }

    .analysis-table thead {
        display: none;
    }

    .analysis-table tbody {
        display: grid;
        gap: 10px;
    }

    .analysis-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        overflow: hidden;
        border: 1px solid #d7e4df;
        border-radius: 8px;
        background: #fff;
    }

    .analysis-table tbody tr.is-selected {
        box-shadow: inset 0 0 0 2px #27804e;
    }

    .analysis-table tbody tr.is-selected td,
    .analysis-table tbody tr.is-selected td:first-child,
    .analysis-table tbody tr.is-selected td:last-child {
        box-shadow: none;
    }

    .analysis-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-width: 0;
        min-height: 42px;
        padding: 7px 9px;
        border: 0;
        border-bottom: 1px solid #e3ece8;
        color: var(--brand);
        font-size: var(--fs-base);
        text-align: right;
        white-space: normal;
        word-break: break-word;
    }

    .analysis-table td::before {
        flex: 0 0 45%;
        margin-right: 8px;
        color: var(--text-4);
        font-size: var(--fs-sm);
        font-weight: 600;
        text-align: left;
    }

    .analysis-table td:nth-child(1)::before {
        content: '序號';
    }

    .analysis-table td:nth-child(2)::before {
        content: '細項名稱';
    }

    .analysis-table td:nth-child(3)::before {
        content: '單位';
    }

    .analysis-table td:nth-child(4)::before {
        content: '分析';
    }

    .analysis-table td:nth-child(5)::before {
        content: '數量';
    }

    .analysis-table td:nth-child(6)::before {
        content: '單價';
    }

    .analysis-table td:nth-child(7)::before {
        content: '複價';
    }

    .analysis-table td:nth-child(8)::before {
        content: '細項代碼';
    }

    .analysis-table td:nth-child(9)::before {
        content: '百分比';
    }

    .analysis-table td:nth-child(13)::before {
        content: '工項類';
    }

    .analysis-table td:nth-child(14)::before {
        content: '人工(%)';
    }

    .analysis-table td:nth-child(15)::before {
        content: '機具(%)';
    }

    .analysis-table td:nth-child(16)::before {
        content: '材料(%)';
    }

    .analysis-table td:nth-child(17)::before {
        content: '雜項(%)';
    }

    .analysis-table td:nth-child(10)::before {
        content: '碳係數';
    }

    .analysis-table td:nth-child(11)::before {
        content: '碳排放量';
    }

    .analysis-table td:nth-child(12)::before {
        content: '碳排';
    }

    .analysis-table td:nth-child(18)::before {
        content: '單價取位';
    }

    .analysis-table td:nth-child(19)::before {
        content: '複價取位';
    }

    .analysis-table td:nth-child(20)::before {
        content: '標單固定單';
    }

    .analysis-table td:nth-child(21)::before {
        content: '細項備註';
    }

    .analysis-table td:nth-child(2),
    .analysis-table td:nth-child(8),
    .analysis-table td:nth-child(21) {
        grid-column: 1 / -1;
    }

    .analysis-table td:nth-child(2) {
        min-width: 0;
        text-align: left;
    }

    .analysis-table td:nth-child(21) {
        min-width: 0;
        text-align: left;
    }

    .analysis-table td:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .analysis-table .analysis-rounding {
        width: 64px;
    }
}

/* 自主檢查彈窗 */

/* 編碼正確率彈窗 */
.code-rate-modal[hidden] {
    display: none;
}

.code-rate-modal {
    position: fixed;
    z-index: 82;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.code-rate-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 42, 53, .48);
}

.code-rate-card {
    position: relative;
    box-sizing: border-box;
    width: min(1120px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(22, 48, 64, .3);
}

.code-rate-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 20px;
    border-bottom: 1px solid #dce8ef;
    background: #f7fbfd;
}

.code-rate-header h2 {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-xl);
}

.code-rate-header h2>i {
    margin-right: 7px;
    color: #27804e;
}

.code-rate-header h2 span {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 7px;
    border: 1px solid #bae0c5;
    border-radius: 4px;
    background: #effaf1;
    color: #2d8251;
    font-size: var(--fs-xs);
    vertical-align: middle;
}

.code-rate-close {
    border: 0;
    background: transparent;
    color: var(--text-4);
    font-size: var(--fs-2xl);
    cursor: pointer;
}

.code-rate-content {
    padding: 16px 20px;
}

.code-score-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.code-score-card {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid #dce5ed;
    border-radius: 8px;
    background: #f9fbfd;
    color: var(--brand);
}

.code-score-card small,
.code-score-card em {
    display: block;
    font-size: var(--fs-xs);
    font-style: normal;
}

.code-score-card small {
    font-weight: 700;
    font-size: var(--fs-lg);
}

.code-score-card strong {
    display: block;
    margin: 3px 0;
    color: var(--brand);
    font-size: 1.4rem;
    line-height: 1.1;
}

.code-score-card em {
    color: var(--text-4);
}

.code-score-card.score-main {
    border-color: #75d99a;
    background: #e9fff0;
    color: #22764d;
}

.code-score-card.score-main strong {
    color: #168044;
}

.code-score-card.score-blue {
    border-color: #cbdcf1;
    background: #f0f6ff;
}

.code-score-card.score-blue strong {
    color: var(--brand-accent);
}

.code-score-card.score-danger {
    border-color: #f1d1d1;
    background: #fff3f3;
}

.code-score-card.score-danger strong,
.code-score-card.score-danger small {
    color: #bd3c3c;
}

.code-rate-pass {
    margin: 12px 0;
    padding: 10px 13px;
    border-radius: 6px;
    background: #dff9e7;
    color: #28764d;
    font-size: var(--fs-base);
}

.code-rate-pass i {
    margin-right: 6px;
}

.code-rule-panel {
    margin: -1px 8px 10px;
    padding: 8px 14px;
    border: 1px solid #dce5ed;
    border-top: 0;
    border-radius: 0 0 7px 7px;
    background: #fff;
    color: var(--brand-accent);
    font-size: var(--fs-md);
}

.code-rule-panel ol {
    margin: 5px 0 4px 18px;
    padding: 0;
}

.code-error-section {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid #f0c47a;
    border-radius: 8px;
}

.code-error-heading {
    padding: 10px 13px;
    border-bottom: 1px solid #f3d8aa;
    background: #fff6e8;
}

.code-error-heading h3 {
    margin: 0;
    color: #a65a18;
    font-size: var(--fs-base);
}

.code-error-heading h3 i {
    margin-right: 6px;
    color: #ab6414;
}

.code-error-heading span {
    font-size: var(--fs-sm);
    font-weight: 400;
}

.code-error-table-wrap {
    overflow: auto;
}

.code-error-table {
    width: 100%;
    border-collapse: collapse;
}

.code-error-table th,
.code-error-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e5ece8;
    color: var(--brand);
    font-size: var(--fs-md);
    text-align: left;
}

.code-error-table th {
    background: #fbfdfc;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.code-error-table th:last-child,
.code-error-table td:last-child {
    width: 54px;
    text-align: center;
}

.code-error-table tbody tr:last-child td {
    border-bottom: 0;
}

.code-error-table b {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    background: #ffe2e2;
    color: #c44545;
    font-size: var(--fs-xs);
}

.code-go {
    width: 32px;
    height: 32px;
    border: 1px solid #8fc2f3;
    border-radius: 5px;
    background: #fff;
    color: var(--brand-accent);
    cursor: pointer;
}

.code-go:hover {
    background: #eaf4ff;
}

.code-error-mobile-list {
    display: none;
}

.code-rate-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 20px 18px;
}

.code-rate-actions i {
    margin-right: 5px;
}

@media (max-width: 850px) {
    .budget-edit-page #version-manager-trigger .editor-version-label,
    .budget-edit-page #public-price-search .editor-price-label,
    .budget-edit-page #editor-back-to-list .editor-back-label { font-size: 0; }
    .budget-edit-page #version-manager-trigger .editor-version-label::after { content: '版本'; font-size: var(--fs-sm); }
    .budget-edit-page #public-price-search .editor-price-label::after { content: '價格查詢'; font-size: var(--fs-sm); }
    .budget-edit-page #editor-back-to-list .editor-back-label { display: none; }
    .code-rate-modal {
        padding: 10px;
    }

    .code-rate-card {
        width: 100%;
        max-height: calc(100vh - 20px);
    }

    .code-rate-header,
    .code-rate-content,
    .code-rate-actions {
        padding-left: 13px;
        padding-right: 13px;
    }

    .code-score-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .code-score-card:first-child {
        grid-column: 1 / -1;
    }

    .code-score-card strong {
        font-size: var(--fs-2xl);
    }

    

    .code-error-table,
    .code-error-table tbody,
    .code-error-table tr,
    .code-error-table th,
    .code-error-table td {
        display: block;
    }

    .code-error-table thead {
        display: none;
    }

    .code-error-table tbody {
        display: grid;
        gap: 8px;
        padding: 8px;
    }

    .code-error-table tr {
        padding: 8px;
        border: 1px solid #dce8ef;
        border-radius: 7px;
    }

    .code-error-table td {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 5px 0;
        border: 0;
        text-align: right;
    }

    .code-error-table td::before {
        color: var(--text-4);
        content: attr(data-label);
        font-size: var(--fs-xs);
        text-align: left;
    }

    .code-error-table td:nth-child(1)::before {
        content: '工項代碼';
    }

    .code-error-table td:nth-child(2)::before {
        content: '項目名稱';
    }

    .code-error-table td:nth-child(3)::before {
        content: '錯誤說明';
    }

    .code-error-table td:nth-child(4)::before {
        content: '操作';
    }

    .code-error-table th:last-child,
    .code-error-table td:last-child {
        width: auto;
        text-align: right;
    }
}

/* 編碼正確率：手機／平板錯誤工項清單改為左標題、右內容的資料卡。 */
@media (max-width: 1100px) {
    .code-error-table-wrap {
        overflow: visible;
    }

    .code-error-table {
        display: none !important;
    }

    .code-error-mobile-list {
        display: grid;
        gap: 8px;
        padding: 8px;
    }

    .code-error-mobile-card {
        overflow: hidden;
        border: 1px solid #dce8ef;
        border-radius: 7px;
        background: #fff;
    }

    .code-error-mobile-card:nth-child(even) {
        background: #fff;
    }

    .code-error-mobile-card>div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 44px;
        padding: 8px 10px;
        border-bottom: 1px solid #e5ece8;
    }

    .code-error-mobile-card>div:last-child {
        border-bottom: 0;
    }

    .code-error-mobile-card>div>span {
        flex: 0 0 auto;
        color: var(--brand-accent);
        font-size: var(--fs-sm);
        font-weight: 600;
    }

    .code-error-mobile-card>div>strong {
        min-width: 0;
        color: var(--brand);
        font-size: var(--fs-base);
        font-weight: 500;
        line-height: 1.45;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .code-error-mobile-card b {
        margin-right: 7px;
        padding: 2px 6px;
        border-radius: 4px;
        background: #ffe2e2;
        color: #c44545;
        font-size: var(--fs-xs);
    }

    .code-error-mobile-card .code-go {
        flex: 0 0 auto;
    }

    .code-error-table,
    .code-error-table tbody,
    .code-error-table tr,
    .code-error-table th,
    .code-error-table td {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .code-error-table thead {
        display: none;
    }

    .code-error-table tbody {
        display: grid;
        gap: 8px;
        padding: 8px;
        box-sizing: border-box;
    }

    .code-error-table tr {
        box-sizing: border-box;
        padding: 2px 10px;
        border: 1px solid #dce8ef;
        border-radius: 7px;
        background: #fff;
    }

    .code-error-table tbody tr:nth-child(even) {
        background: #f2faf6;
    }

    .code-error-table td {
        display: block !important;
        position: relative;
        box-sizing: border-box;
        min-height: 44px;
        padding: 10px 0 10px 104px;
        border: 0;
        border-bottom: 1px solid #e5ece8;
        text-align: right !important;
        overflow-wrap: anywhere;
    }

    .code-error-table td:last-child {
        border-bottom: 0;
    }

    .code-error-table td::before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 96px;
        transform: translateY(-50%);
        color: var(--text-4);
        font-size: var(--fs-xs);
        font-weight: 600;
        text-align: left;
    }

    .code-error-table td:nth-child(1)::before {
        content: '工項代碼';
    }

    .code-error-table td:nth-child(2)::before {
        content: '項目名稱';
    }

    .code-error-table td:nth-child(3)::before {
        content: '錯誤說明';
    }

    .code-error-table td:nth-child(4)::before {
        content: '操作';
    }

    .code-error-table .code-error-content {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        width: 100%;
        min-width: 0;
        margin: 0;
        color: var(--brand);
        text-align: right;
        overflow-wrap: anywhere;
    }

    .code-error-table td:nth-child(3) .code-error-content {
        white-space: normal;
    }

    .code-error-table .code-go {
        display: inline-grid;
        margin-left: auto;
    }
}

/* 總價調整彈窗 */
.total-adjust-modal[hidden] {
    display: none;
}

.total-adjust-modal {
    position: fixed;
    z-index: 82;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.total-adjust-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 42, 53, .48);
}

.total-adjust-card {
    position: relative;
    box-sizing: border-box;
    width: min(760px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(22, 48, 64, .3);
}

.total-adjust-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 20px;
    border-bottom: 1px solid #dce8ef;
    background: #f7fbfd;
}

.total-adjust-header h2 {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-xl);
}

.total-adjust-header h2 i {
    margin-right: 7px;
    color: #27804e;
}

.total-adjust-close {
    border: 0;
    background: transparent;
    color: var(--text-4);
    font-size: var(--fs-2xl);
    cursor: pointer;
}

.total-adjust-content {
    padding: 16px 20px 8px;
}

.adjust-mode {
    display: none;
    padding: 13px 15px;
    border: 1px solid #d3e2f0;
    border-radius: 8px;
    background: #f5f9ff;
}

.adjust-mode.is-active {
    display: block;
}

.adjust-mode+.adjust-mode {
    margin-top: 10px;
}

.adjust-mode-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--brand);
}

.adjust-mode-title input,
.adjust-mode input,
.adjust-options input {
    accent-color: #27804e;
}

.adjust-mode-title b {
    font-size: var(--fs-lg);
}

.adjust-lock {
    max-width: 300px;
    color: var(--brand-accent);
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.adjust-mode p {
    margin: 7px 0 10px;
    color: var(--brand-accent);
    font-size: var(--fs-md);
}

.adjust-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 22px;
    max-width: 570px;
    margin: auto;
}

.adjust-field-grid label,
.adjust-ratio-fields label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--brand);
}

.adjust-field-grid output {
    color: var(--brand);
    font-family: ui-monospace, Consolas, monospace;
}

.adjust-field-grid input,
.adjust-ratio-fields input {
    width: 160px;
    max-width: 58%;
    height: 30px;
    padding: 4px 8px;
    border: 1px solid #afc2d5;
    border-radius: 4px;
    background: #fff;
    color: var(--brand);
    font: inherit;
    text-align: right;
}

.adjust-field-grid span,
.adjust-ratio-fields span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.adjust-ratio-layout {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 18px;
    align-items: start;
}

.adjust-ratio-fields {
    display: grid;
    gap: 8px;
}

.adjust-ratio-layout fieldset,
.adjust-options {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #78a9e3;
    border-radius: 6px;
    background: #f7fbff;
}

.adjust-ratio-layout legend,
.adjust-options legend {
    padding: 0 5px;
    color: var(--brand-accent);
    font-size: var(--fs-md);
    font-weight: 700;
}

.adjust-ratio-layout fieldset label,
.adjust-options label {
    display: block;
    margin: 6px 0;
    color: var(--brand);
    font-size: var(--fs-md);
}

.adjust-options {
    margin-top: 12px;
}

.adjust-options label {
    display: inline-block;
    margin-right: 28px;
}

.total-adjust-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 18px;
}

.total-adjust-actions i {
    margin-right: 5px;
}

@media (max-width: 640px) {
    .total-adjust-modal {
        padding: 10px;
    }

    .total-adjust-card {
        width: 100%;
        max-height: calc(100vh - 20px);
    }

    .total-adjust-header,
    .total-adjust-content,
    .total-adjust-actions {
        padding-left: 13px;
        padding-right: 13px;
    }

    .adjust-mode-title {
        display: block;
    }

    .adjust-lock {
        display: block;
        max-width: none;
        margin: 8px 0 0;
    }

    .adjust-field-grid,
    .adjust-ratio-layout {
        grid-template-columns: 1fr;
    }

    .adjust-options label {
        display: block;
        margin-right: 0;
    }

    .adjust-field-grid input,
    .adjust-ratio-fields input {
        width: 170px;
        max-width: 64%;
    }
}

/* 總價調整：卡片式操作流程 */
.total-adjust-content>.adjust-lock {
    margin: 0 0 12px;
    font-weight: 700;
    color: var(--brand);
    font-size: var(--fs-lg);
}

.total-adjust-content>.adjust-lock input:not(.analysis-fixed-price) {
    width: 16px;
    height: 16px;
    accent-color: #e68a17;
}

.total-adjust-content>.adjust-lock .analysis-fixed-control {
    margin: 0;
    flex: 0 0 auto;
}

.total-adjust-content .adjust-mode {
    display: block;
    margin-top: 8px;
    border-color: #dce4eb;
    background: #fbfcfd;
    opacity: .58;
    transition: border-color .18s ease, background .18s ease, opacity .18s ease;
}

.total-adjust-content .adjust-mode.is-active {
    border: 2px solid #8fc4a4;
    background: #fff;
    box-shadow: 0 2px 8px rgba(34, 108, 79, .08);
    opacity: 1;
}

.total-adjust-content .adjust-mode:not(.is-active) p,
.total-adjust-content .adjust-mode:not(.is-active) .adjust-field-grid,
.total-adjust-content .adjust-mode:not(.is-active) .adjust-ratio-layout {
    pointer-events: none;
}

.total-adjust-content .adjust-mode-title label {
    cursor: pointer;
}

.total-adjust-content .adjust-mode.is-active .adjust-mode-title b {
    color: #256b4e;
}

.total-adjust-content .adjust-mode p {
    margin-left: 24px;
}

.total-adjust-content .adjust-field-grid {
    max-width: 500px;
    margin: 12px 0 0 24px;
}

.total-adjust-content .adjust-ratio-layout {
    margin: 12px 0 0 24px;
}

.total-adjust-content .adjust-options {
    margin-top: 12px;
    background: #fff;
}

.total-adjust-actions {
    padding-top: 8px;
}

.total-adjust-content .adjust-mode-title {
    justify-content: flex-start;
    gap: 14px;
}

.adjust-mode-summary {
    color: var(--text-4);
    font-size: var(--fs-md);
}

.total-adjust-content .adjust-field-grid {
    grid-template-columns: minmax(0, 420px);
    gap: 7px;
    max-width: 420px;
}

.total-adjust-content .adjust-mode:not(.is-active) {
    opacity: .82;
}

.total-adjust-content .adjust-mode-title>label:first-child input {
    display: none;
}

.total-adjust-content .adjust-mode-title>label:first-child {
    padding-left: 0;
}

.total-adjust-content .adjust-field-grid label {
    display: grid;
    grid-template-columns: calc(145px * var(--fs-scale)) 1fr;
    align-items: center;
    min-height: 34px;
    justify-content: start;
}

.total-adjust-content .adjust-field-grid output,
.total-adjust-content .adjust-field-grid input,
.total-adjust-content .adjust-field-grid span {
    justify-self: start;
    box-sizing: border-box;
    min-height: 34px;
}

.total-adjust-content .adjust-field-grid output {
    display: flex;
    align-items: center;
}

.total-adjust-content .adjust-field-grid input {
    width: 220px;
    max-width: 100%;
}

.total-adjust-content .adjust-field-grid span {
    display: inline-flex;
    align-items: center;
}

.adjust-calc-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.adjust-calc-buttons button {
    min-height: 35px;
    padding: 7px 12px;
    border: 1px solid #b8cbdc;
    border-radius: 5px;
    background: #fff;
    color: var(--brand-accent);
    font: inherit;
    cursor: pointer;
}

.adjust-calc-buttons button:hover {
    border-color: #8fc4a4;
    background: #f1faf4;
    color: #246d55;
}

.adjust-calc-buttons button.is-selected {
    border-color: #27804e;
    background: #27804e;
    color: #fff;
}

.adjust-calc-buttons button.is-selected::before {
    margin-right: 6px;
    content: '✓';
    font-weight: 800;
}

/* 總價調整模式標題與狀態色帶 */
.total-adjust-content>.adjust-lock {
    margin-bottom: 20px;
    padding-bottom: 14px;
}

.total-adjust-content .adjust-mode {
    position: relative;
    overflow: hidden;
    padding-top: 15px;
    padding-bottom: 17px;
}

.total-adjust-content .adjust-mode-title {
    min-height: 30px;
    padding: 0 0 10px;
    border-bottom: 1px solid #e0e8ee;
}

.total-adjust-content .adjust-mode-title b {
    color: var(--text-2);
    font-size: var(--fs-lg);
    letter-spacing: .01em;
}

.total-adjust-content .adjust-mode::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: #dce4eb;
    content: '';
}

.total-adjust-content .adjust-mode.is-active::after {
    background: #27804e;
}

.total-adjust-content .adjust-mode.is-active .adjust-mode-title {
    border-bottom-color: #b8dfc7;
}

.total-adjust-content [data-adjust-panel="restore"] .adjust-mode-title {
    padding-bottom: 0;
    border-bottom: 0;
}

.total-adjust-content [data-adjust-panel="restore"]::after {
    display: none;
}

.adjust-lock-separator {
    height: 8px;
    margin: 0 0 10px;
}

/* 版本管理最終 RWD 覆寫：僅顯示獨立資料卡，避免舊表格規則介入。 */
@media (max-width: 900px) {

    .version-table,
    .version-add-table {
        display: none !important;
    }

    .version-mobile-list {
        display: grid !important;
    }

    .version-add-mobile-form {
        display: block !important;
    }
}

/* 總價調整：手機／平板維持說明與欄位完整可讀。 */
@media (max-width: 768px) {
    .total-adjust-content>.adjust-lock {
        display: grid;
        grid-template-columns: calc(24px * var(--fs-scale)) minmax(0,1fr);
        align-items: center;
        column-gap: 7px;
        margin-bottom: 0;
        padding-bottom: 0;
        line-height: 1.45;
    }

    .total-adjust-content>.adjust-lock .analysis-fixed-control {
        justify-self: center;
        align-self: center;
    }

    .adjust-lock-separator {
        height: 8px;
        margin: 0 0 8px;
    }

    .total-adjust-content .adjust-mode {
        box-sizing: border-box;
        padding: 12px;
    }

    .total-adjust-content .adjust-field-grid {
        max-width: 85%;
        margin: 12px 0 0 24px;
    }

    .total-adjust-content .adjust-field-grid label {
        grid-template-columns: calc(100px * var(--fs-scale)) minmax(0,1fr);
        min-width: 0;
    }

    .total-adjust-content .adjust-field-grid output,
    .total-adjust-content .adjust-field-grid input,
    .total-adjust-content .adjust-field-grid span {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
    }

    .total-adjust-content .adjust-field-grid output {
        justify-content: flex-end;
        text-align: right;
    }

    .total-adjust-content .adjust-field-grid span {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 5px;
    }

    .total-adjust-content .adjust-field-grid input {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
    }
}

/* 登入頁 RWD：覆寫舊版登入卡定位，改為工程資訊與登入表單的單欄版。 */
@media (max-width: 900px) {
    .login-layout {
        grid-template-columns: minmax(290px, 1fr) minmax(320px, 380px);
        gap: 38px;
        width: min(900px, calc(100% - 52px));
    }

    .water-login-logo {
        position: static;
        width: 140px;
    }

    .login-overview div {
        padding: 14px 11px;
    }
}

@media (max-width: 700px) {
    .water-login {
        background-position: center center;
    }

    .login-brand {
        position: absolute;
        top: 15px;
        left: 18px;
        gap: 9px;
    }

    .login-brand span {
        display: none;
    }

    .water-login-logo {
        position: static;
        width: 125px;
        max-width: none;
    }

    .login-layout {
        display: block;
        width: min(440px, calc(100% - 32px));
        min-height: auto;
        padding: 92px 0 72px;
    }

    .login-intro {
        padding: 0;
    }

    .login-intro h1 {
        font-size: 1.8rem;
    }

    .login-description {
        margin: 13px 0 18px;
        font-size: .9rem;
        line-height: 1.7;
    }

    .login-overview {
        margin-bottom: 20px;
    }

    .login-overview div {
        min-height: auto;
        padding: 11px 9px;
    }

    .login-overview strong {
        font-size: .9rem;
    }

    .login-overview span {
        display: none;
    }

    .water-login-card {
        position: static;
        width: auto;
        padding: 24px 21px 21px;
        transform: none;
    }

    .login-footer {
        position: static;
        padding: 0 16px 18px;
        color: #435058;
        text-align: center;
    }
}

/* 全站藍色系：工程藍作為主色，保留警示、刪除等語意色。 */
:root {
    --green: #286fae;
    --green-dark: #1d568c;
    --mint: #eaf3fb;
    --navy: #244b70;
}

.sidebar .brand>span,
.nav-item:hover {
    background: #f0f6fc;
}

.nav-item.active {
    background: #e4f0fb;
    color: var(--brand-accent);
}

.nav-item.active::before {
    background: #2a75b4;
}

.sidebar nav {
    overflow-y: auto;
}

.sidebar .nav-folder {
    margin: 0 0 5px;
}

.sidebar .nav-folder summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}

.sidebar .nav-folder summary::-webkit-details-marker {
    display: none;
}

.sidebar .nav-folder-toggle {
    margin-bottom: 0;
}

.sidebar .nav-folder-toggle i {
    font-size: var(--fs-xs);
    transition: transform .18s ease;
}

.sidebar .nav-folder[open] .nav-folder-toggle i {
    transform: rotate(180deg);
}

.sidebar .nav-folder.is-active>.nav-folder-toggle {
    background: #e4f0fb;
    color: var(--brand-accent);
    font-weight: 700;
}

.sidebar .nav-submenu {
    position: relative;
    display: grid;
    gap: 2px;
    margin: 3px 0 8px 17px;
    padding: 4px 0 4px 15px;
    border-left: 1px solid #d5e0e9;
}

.sidebar .nav-subitem {
    position: relative;
    display: block;
    width: 100%;
    padding: 8px 9px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-3);
    text-align: left;
    text-decoration: none;
    font: 500 .86rem inherit;
    line-height: 1.35;
    cursor: pointer;
}

.sidebar .nav-subitem::before {
    position: absolute;
    top: 50%;
    left: -16px;
    width: 15px;
    border-top: 1px solid #d5e0e9;
    content: "";
}

.sidebar .nav-subitem:last-child::after {
    position: absolute;
    top: 50%;
    bottom: -8px;
    left: -16px;
    width: 2px;
    background: #fff;
    content: "";
}

.sidebar .nav-subitem:hover {
    background: #edf7ff;
    color: var(--brand);
}

.sidebar .nav-subitem.active {
    background: #e4f0fb;
    color: var(--brand);
    font-weight: 700;
}

@media (max-width: 850px) {
    .sidebar .nav-submenu {
        margin-left: 15px;
    }
}

.inside_footer {
    border-top-color: #c7ddeb;
    background: #eaf3fb;
}

.footer-G {
    color: var(--brand-accent);
}

.budget-edit-page .estimate-table th {
    background: #286fae;
}

.login-kicker,
.captcha b,
.login-overview strong,
.water-login-card a {
    color: #216aa5;
}

.login-kicker {
    border-color: #b9d5eb;
    background: #e9f3fb;
}

.water-login-card input:focus {
    border-color: #4c91c5;
    box-shadow: 0 0 0 3px #2f79b51c;
}

.captcha button {
    border-color: #b8d4e8;
    color: #216aa5;
}

.captcha button:hover {
    background: #edf6fc;
}

.login-intro::after {
    border-top-color: #93bfe0;
    background:
        linear-gradient(145deg, transparent 0 41%, #d2e7f6 41.4% 51%, transparent 51.4%) 0 100% / 145px 64px repeat-x,
        linear-gradient(105deg, transparent 0 44%, #bad8ee 44.4% 58%, transparent 58.4%) 48px 100% / 175px 64px repeat-x,
        linear-gradient(90deg, #245f99, #3d82bd 58%, #67a4d1);
}

/* 按鈕維持原本的綠色操作語意，僅頁面框架採用藍色系。 */
.primary-button,
.water-login-button,
.budget-edit-page .editor-bottom-actions .primary-button,
.budget-edit-page .editor-footer-actions .primary-button,
.version-modal-actions .primary-button.version-add-toggle {
    border-color: #18578f !important;
    background: #18578f !important;
    box-shadow: 0 2px 5px #18578f22;
}

.primary-button:hover,
.water-login-button:hover,
.budget-edit-page .editor-bottom-actions .primary-button:hover,
.budget-edit-page .editor-footer-actions .primary-button:hover,
.version-modal-actions .primary-button.version-add-toggle:hover {
    border-color: #0d406d !important;
    background: #0d406d !important;
}

.pagination .current {
    border-color: #1e7058;
    background: #1e7058;
}

#gotop {
    background: #28745d;
    box-shadow: 0 3px 10px #1e705844;
}

/* 指定操作採藍色；預算明細表欄位則維持原有綠色。 */
#gotop {
    background: #286fae;
    box-shadow: 0 3px 10px #1d568c44;
}

#gotop:hover {
    background: #1d568c;
}

.pagination .current,
.pagination .current:hover {
    border-color: #286fae;
    background: #286fae;
}

.logout-button:hover {
    border-color: #b9d5eb;
    background: #edf6fc;
    color: var(--brand-accent);
}

#budget-module #search-form button[type="submit"] {
    border-color: #286fae !important;
    background: #286fae !important;
    color: #fff;
}

#budget-module #search-form button[type="submit"]:hover {
    background: #1d568c !important;
}

#search-form button[type="reset"] {
    border-color: #cfd9e1;
    background: #fff;
    color: var(--text-3);
}

#search-form button[type="reset"]:hover {
    border-color: #b9c9d6;
    background: #f7fafc;
    color: var(--brand-accent);
}

#budget-module .table-card tbody tr:hover,
#budget-module .table-card tbody tr:hover td {
    background: #eef6fd;
}

.budget-edit-page .estimate-table th {
    background: #2c755d;
}

/* 預算編製查詢卡：平板、手機均維持欄位與輸入框的左右對齊。 */
#budget-module .search-form label {
    display: grid;
    gap: 6px;
}

/* 列表查詢列：工程名稱右側的單位欄位與查詢按鈕維持同一列。
   狀態欄位在 2026/08/21 從預算與契約移除，所以這裡由五欄改四欄；
   碳排模組的查詢列還留著狀態，下面再覆寫回五欄。 */
@media (min-width: 851px) {
    #budget-module .search-form {
        grid-template-columns: minmax(calc(145px * var(--fs-scale)),1fr) minmax(215px,1.5fr) minmax(calc(145px * var(--fs-scale)),1fr) auto;
        gap: 12px;
    }

    .carbon-estimation-page #budget-module .search-form {
        grid-template-columns: minmax(calc(145px * var(--fs-scale)),1fr) minmax(calc(195px * var(--fs-scale)),1.35fr) minmax(calc(145px * var(--fs-scale)),1fr) minmax(calc(100px * var(--fs-scale)),.55fr) auto;
    }

    #budget-module .search-form .form-actions {
        flex-wrap: nowrap;
    }
}

#budget-module .search-form input,
#budget-module .search-form select {
    box-sizing: border-box;
    margin-top: 0;
}

#budget-module .search-button-label {
    display: none;
}

@media (max-width: 850px) {
    #budget-module .search-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    #budget-module .search-form .form-actions {
        grid-column: auto;
        justify-content: flex-end;
    }
}

@media (max-width: 600px) {
    #budget-module .search-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
        padding: 20px 17px;
    }

    #budget-module .search-form .form-actions {
        grid-column: auto;
        justify-content: flex-end;
        gap: 9px;
        margin-top: 3px;
    }

    #budget-module .search-form .search-icon-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: auto;
        min-width: 76px;
        padding: 0 13px;
        font-size: var(--fs-base);
    }

    #budget-module .search-button-label {
        display: inline;
    }
}

/* 分標專案項目挑選：768px 以下改以完整資料卡呈現，避免橫向捲動。 */
@media (max-width: 768px) {
    .add-page .sub-master-summary {
        margin: 0 0 12px;
    }

    .add-page .table-wrap:has(.sub-item-table) {
        overflow: visible;
    }

    .sub-item-table,
    .sub-item-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .sub-item-table thead {
        display: none;
    }

    .sub-item-table tbody tr,
    .sub-item-table tbody tr.sub-item-group,
    .sub-item-table tbody tr.sub-item-section {
        display: block;
        margin: 10px 0;
        padding: 4px 0;
        border: 1px solid #d2e0e9;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 2px #173c5610;
    }

    .sub-item-table tbody tr.sub-item-group {
        border-color: #9fc9b5;
        background: #f1f9f4;
    }

    .sub-item-table tbody tr.sub-item-section {
        background: #f7fbf9;
    }

    .sub-item-table td,
    .sub-item-table td:first-child,
    .sub-item-table td:nth-child(2),
    .sub-item-table td:nth-child(3),
    .sub-item-table .number {
        display: grid;
        grid-template-columns: calc(104px * var(--fs-scale)) minmax(0,1fr);
        align-items: center;
        width: auto;
        min-width: 0;
        padding: 7px 12px;
        color: var(--brand);
        text-align: right;
        white-space: normal;
    }

    .sub-item-table td+td {
        border-top: 1px solid #e6edf1;
    }

    .sub-item-table td::before {
        color: var(--brand-accent);
        font-size: var(--fs-sm);
        font-weight: 600;
        text-align: left;
    }

    .sub-item-table td:nth-child(1)::before {
        content: '選取';
    }

    .sub-item-table td:nth-child(2)::before {
        content: '項次';
    }

    .sub-item-table td:nth-child(3)::before {
        content: '項目及說明';
    }

    .sub-item-table td:nth-child(4)::before {
        content: '單位';
    }

    .sub-item-table td:nth-child(5)::before {
        content: '預算數量';
    }

    .sub-item-table td:nth-child(6)::before {
        content: '預算單價';
    }

    .sub-item-table td:nth-child(7)::before {
        content: '分標數量';
    }

    .sub-item-table td:nth-child(8)::before {
        content: '分標單價';
    }

    .sub-item-table td:nth-child(9)::before {
        content: '已分標數量';
    }

    .sub-item-table td:nth-child(10)::before {
        content: '已分單價';
    }

    .sub-item-table td:first-child input,
    .sub-item-table td:first-child .analysis-fixed-control {
        justify-self: end;
    }

    /* 預算書詳細表項目挑選：勾選用的 checkbox 在手機版放大，避免觸控時誤點旁邊欄位。 */
    .sub-item-table td:first-child input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    .sub-item-table td:nth-child(3) {
        text-align: right;
    }

    .sub-item-table tbody tr.is-selected {
        border: 2px solid #2c755d;
        background: #f0f9f4;
    }

    .sub-item-table tbody tr.is-selected td {
        background: transparent;
        color: var(--text-2);
    }

    .project-form-actions {
        flex-wrap: wrap;
        gap: 9px;
    }
}

/* 編輯預算項目：平板維持表格、手機維持完整資料卡。 */
@media (min-width: 769px) and (max-width: 1024px) {

    .budget-edit-page .edit-page-heading,
    .budget-edit-page .edit-project-summary,
    .budget-edit-page .page-shell .editor-actions,
    .budget-edit-page .editor-no-side .estimate-wrap,
    .budget-edit-page .page-shell .editor-footer {
        margin-right: 14px;
        margin-left: 14px;
    }

    .budget-edit-page .editor-no-side .estimate-wrap {
        padding-right: 0;
        padding-left: 0;
    }

    .budget-edit-page .editor-actions {
        gap: 8px;
    }

    .budget-edit-page .editor-actions .action-group {
        flex-wrap: wrap;
        gap: 7px;
    }

    .budget-edit-page .estimate-panel .estimate-toolbar {
        flex-wrap: wrap;
        gap: 9px;
    }

    .budget-edit-page .table-scroll {
        border: 1px solid #d5e2eb;
        border-radius: 9px;
    }

    .budget-edit-page .estimate-table {
        min-width: 1160px;
    }
}

@media (max-width: 768px) {
    .budget-edit-page .page-shell {
        min-width: 0;
    }

    .budget-edit-page .edit-page-heading {
        flex-wrap: wrap;
        gap: 10px;
        padding: 0px 12px 12px 20px;
    }

    .budget-edit-page .edit-page-heading .secondary-button {
        margin-left: 0;
    }

    .budget-edit-page .edit-project-summary {
        margin: 14px 12px;
    }

    .budget-edit-page .page-shell .editor-actions,
    .budget-edit-page .editor-tip,
    .budget-edit-page .page-shell .editor-footer {
        margin-right: 12px;
        margin-left: 12px;
    }

    .budget-edit-page .editor-actions,
    .budget-edit-page .editor-actions .action-group {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .budget-edit-page .editor-actions button {
        flex: 1 1 auto;
        min-height: 36px;
        padding-right: 10px;
        padding-left: 10px;
        font-size: var(--fs-md);
    }

    .budget-edit-page .editor-no-side .estimate-wrap {
        padding-right: 12px;
        padding-left: 12px;
    }

    .budget-edit-page .estimate-panel {
        border-radius: 10px;
    }

    .budget-edit-page .estimate-panel .estimate-toolbar {
        padding: 10px 12px;
    }

    .budget-edit-page .estimate-table tr {
        margin-bottom: 12px;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 3px #1a456112;
    }

    .budget-edit-page .estimate-table .item-row td,
    .budget-edit-page .estimate-table .group td[data-label] {
        min-height: 42px;
        padding: 9px 11px;
        font-size: var(--fs-base);
    }

    .budget-edit-page .estimate-table .item-row td::before,
    .budget-edit-page .estimate-table .group td[data-label]::before {
        flex-basis: 39%;
        font-size: var(--fs-sm);
    }

    .budget-edit-page .estimate-table .item-row td:nth-child(2) {
        align-items: center;
        text-align: right !important;
    }

    .budget-edit-page .estimate-table .item-row td:nth-child(2) .item-name-text {
        text-align: right;
    }

    .budget-edit-page .editor-bottom-actions {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* 手機／平板固定工具列：主功能一列、列操作一列。 */
@media (max-width: 768px) {
    .budget-edit-page .editor-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .budget-edit-page .editor-actions .editor-primary-actions,
    .budget-edit-page .editor-actions .editor-row-actions {
        display: grid;
        width: 100%;
        gap: 7px;
    }

    .budget-edit-page .editor-actions .editor-primary-actions {
        grid-template-columns: calc(42px * var(--fs-scale)) repeat(4,minmax(0,1fr));
    }

    .budget-edit-page .editor-actions .editor-row-actions {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .budget-edit-page .editor-actions .fixed-switch {
        justify-content: center;
        width: 42px;
        min-width: 42px;
        height: 36px;
        padding: 0;
        border-radius: 7px;
    }

    .budget-edit-page .editor-actions .fixed-switch b {
        display: none;
    }

    .budget-edit-page .editor-actions .toolbar-label {
        display: none;
    }

    .budget-edit-page .editor-actions .toolbar-mobile-label {
        display: inline;
    }

    .budget-edit-page .editor-actions .editor-row-actions .toolbar-label {
        display: none;
    }

    .budget-edit-page .editor-actions .fixed-switch span {
        width: 27px;
        height: 17px;
    }

    .budget-edit-page .editor-actions .fixed-switch span::after {
        top: 2px;
        width: 13px;
        height: 13px;
    }

    .budget-edit-page .editor-actions .fixed-switch input:checked+span::after {
        left: 11px;
    }

    .budget-edit-page .editor-actions .editor-primary-actions>button,
    .budget-edit-page .editor-actions .editor-row-actions>button {
        justify-content: center;
        width: 100%;
        min-width: 0;
        height: 36px;
        min-height: 36px;
        padding: 0 5px;
        font-size: var(--fs-xs);
    }

    .budget-edit-page .editor-actions .editor-primary-actions>button i {
        margin: 0 4px 0 0;
    }

    .budget-edit-page .editor-actions .editor-row-actions>button i {
        margin: 0;
        font-size: var(--fs-lg);
    }

    .budget-edit-page .estimate-table .grand-total .total-number::before {
        color: #fff;
    }

    .budget-edit-page .estimate-table .item-row td:first-child,
    .budget-edit-page .estimate-table .group td[data-label="項次"] {
        justify-content: flex-end;
        text-align: right !important;
    }

    .budget-edit-page .estimate-table .item-row td:first-child::before,
    .budget-edit-page .estimate-table .group td[data-label="項次"]::before {
        margin-right: auto;
    }

    .budget-edit-page .estimate-table .group td[data-label="項次"] .collapse-row {
        display: inline-flex;
        width: auto;
        margin-left: auto;
    }

    .budget-edit-page .estimate-table .group td[data-label="項目及說明"]::before {
        margin-right: auto;
    }

    .budget-edit-page .estimate-table .group td[data-label="項目及說明"] .item-selector-control {
        flex: 0 0 auto;
        margin: 0 7px 0 0;
    }

    .budget-edit-page .estimate-table .group td[data-label="項目及說明"] .group-name-text {
        flex: 0 1 auto;
        text-align: right;
    }

    .budget-edit-page .estimate-table .item-row td[data-label="項目及說明"]::before {
        margin-right: auto;
    }

    .budget-edit-page .estimate-table .item-row td[data-label="項目及說明"] .item-selector-control {
        flex: 0 0 auto;
        margin: 0 7px 0 0;
    }

    .budget-edit-page .estimate-table .item-row td[data-label="項目及說明"] .item-name-text {
        flex: 0 1 auto;
        text-align: right;
    }

    .budget-edit-page .estimate-table .carbon-action {
        margin-right: 0;
    }

    /* 卡片版有 display:block 設定，需明確保留收合列的 hidden 狀態。 */
    .budget-edit-page .estimate-table tbody tr[hidden] {
        display: none !important;
    }

    .budget-edit-page .estimate-table .group.is-active {
        border: 2px solid #287d61;
        box-shadow: 0 0 0 2px #287d611a;
    }

}

/* 碳排工項編輯：手機改為左標題、右內容的資料卡。 */
@media (max-width: 640px) {
    .carbon-current-wrap {
        overflow: visible;
    }

    .carbon-current-table,
    .carbon-current-table tbody {
        display: block;
        width: 100% !important;
    }

    .carbon-current-table thead {
        display: none;
    }

    .carbon-current-table tbody tr {
        display: block;
        overflow: hidden;
        border: 1px solid #d6e2eb;
        border-radius: 8px;
        background: #fff;
    }

    .carbon-current-table tbody td {
        display: grid;
        grid-template-columns: calc(104px * var(--fs-scale)) minmax(0,1fr);
        align-items: center;
        min-height: 39px;
        padding: 8px 10px;
        border-bottom: 1px solid #e4edf2;
        font-size: var(--fs-md);
        text-align: right;
    }

    .carbon-current-table tbody td:last-child {
        border-bottom: 0;
    }

    .carbon-current-table tbody td::before {
        color: var(--brand-accent);
        font-size: var(--fs-sm);
        font-weight: 600;
        text-align: left;
    }

    .carbon-current-table tbody td:nth-child(1)::before {
        content: '工料名稱';
    }

    .carbon-current-table tbody td:nth-child(2)::before {
        content: '數量';
    }

    .carbon-current-table tbody td:nth-child(3)::before {
        content: '單位碳排量';
    }

    .carbon-current-table tbody td:nth-child(4)::before {
        content: '單位';
    }

    .carbon-current-table tbody td:nth-child(5)::before {
        content: '備註';
    }

    .carbon-current-table tbody td:nth-child(6)::before {
        content: '操作';
    }

    .carbon-current-table .carbon-row-edit {
        justify-self: end;
        width: 30px;
        min-width: 30px;
        margin: 0;
    }

    .carbon-current-table .carbon-row-actions {
        justify-self: end;
    }

    .carbon-picker .carbon-tabs {
        gap: 3px 13px;
    }

    .carbon-picker .carbon-tabs>button {
        padding: 5px 8px;
        font-size: var(--fs-sm);
    }

    .carbon-picker .carbon-tabs .carbon-search-group {
        display: flex;
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        margin: 5px 0 0;
        gap: 6px;
    }

    .carbon-picker .carbon-tabs .carbon-search-group label {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        margin: 0;
        gap: 6px;
        white-space: nowrap;
    }

    .carbon-picker .carbon-tabs input {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: none;
    }

    .carbon-picker .carbon-tabs .carbon-search-group .carbon-search {
        flex: 0 0 56px;
        width: 56px;
        height: 34px;
        margin: 0;
        padding: 0 !important;
    }

    .carbon-picker-content {
        overflow: visible;
    }

    .carbon-material-table,
    .carbon-material-table tbody {
        display: block;
        width: 100% !important;
    }

    .carbon-material-table thead {
        display: none;
    }

    .carbon-material-table tbody tr {
        display: block;
        overflow: hidden;
        margin-bottom: 9px;
        border: 1px solid #d6e2eb;
        border-radius: 8px;
        background: #fff;
    }

    .carbon-material-table tbody td {
        display: grid;
        grid-template-columns: calc(112px * var(--fs-scale)) minmax(0,1fr);
        align-items: center;
        min-height: 38px;
        padding: 7px 9px;
        border-bottom: 1px solid #e4edf2;
        font-size: var(--fs-sm);
        text-align: right;
    }

    .carbon-material-table tbody td:last-child {
        border-bottom: 0;
    }

    .carbon-material-table tbody td::before {
        color: var(--brand-accent);
        font-size: var(--fs-xs);
        font-weight: 600;
        text-align: left;
    }

    .carbon-material-table tbody td:nth-child(1)::before {
        content: 'ID';
    }

    .carbon-material-table tbody td:nth-child(2)::before {
        content: '類別';
    }

    .carbon-material-table tbody td:nth-child(3)::before {
        content: '材料名稱及規格';
    }

    .carbon-material-table tbody td:nth-child(4)::before {
        content: '單位碳排量';
    }

    .carbon-material-table tbody td:nth-child(5)::before {
        content: '單位';
    }

    .carbon-material-table tbody td:nth-child(6)::before {
        content: '備註(參考來源)';
    }

    .carbon-material-table tbody td:nth-child(7)::before {
        content: '加入';
    }

    .carbon-material-table tbody td:last-child button {
        justify-self: end;
        width: 30px;
        min-width: 30px;
        margin: 0;
    }

    /* 挑選工項：篩選列固定、清單改為資料卡。 */
    .work-code-filters {
        flex-wrap: wrap;
        gap: 6px;
    }

    .work-code-filters>label:not(.work-search) {
        flex: 0 0 auto;
        min-width: 0;
        white-space: nowrap;
    }

    .work-code-filters>label:not(.work-search) select {
        width: 115px;
    }

    .work-code-filters .work-search {
        display: flex;
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        margin: 5px 0 0;
    }

    .work-code-filters .work-search input {
        min-width: 0;
    }

    .work-code-table-wrap {
        overflow: visible;
    }

    .work-code-table,
    .work-code-table tbody {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    .work-code-table thead {
        display: none;
    }

    .work-code-table tbody tr {
        display: block;
        overflow: hidden;
        margin-bottom: 10px;
        border: 1px solid #d7e4df;
        border-radius: 8px;
        background: #fff;
    }

    .work-code-table tbody td {
        display: grid;
        grid-template-columns: calc(108px * var(--fs-scale)) minmax(0,1fr);
        align-items: center;
        min-height: 38px;
        padding: 7px 9px;
        border: 0;
        border-bottom: 1px solid #e4edf2;
        font-size: var(--fs-sm);
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .work-code-table tbody td:last-child {
        border-bottom: 0;
    }

    .work-code-table tbody td::before {
        color: var(--brand-accent);
        font-size: var(--fs-xs);
        font-weight: 600;
        text-align: left;
    }

    .work-code-table tbody td:nth-child(1)::before {
        content: '工項代碼';
    }

    .work-code-table tbody td:nth-child(2)::before {
        content: '分析';
    }

    .work-code-table tbody td:nth-child(3)::before {
        content: '工項名稱';
    }

    .work-code-table tbody td:nth-child(4)::before {
        content: '別名';
    }

    .work-code-table tbody td:nth-child(5)::before {
        content: '單位';
    }

    .work-code-table tbody td:nth-child(6)::before {
        content: '單價';
    }

    .work-code-table tbody td:nth-child(7)::before {
        content: '人工(%)';
    }

    .work-code-table tbody td:nth-child(8)::before {
        content: '機具(%)';
    }

    .work-code-table tbody td:nth-child(9)::before {
        content: '材料(%)';
    }

    .work-code-table tbody td:nth-child(10)::before {
        content: '雜項(%)';
    }

    .work-code-table tbody tr.is-selected {
        border: 2px solid #287d61;
        background: #f1faf4;
    }

    .work-code-table tbody tr.is-selected td,
    .work-code-table tbody tr.is-selected td:first-child,
    .work-code-table tbody tr.is-selected td:last-child {
        box-shadow: none !important;
    }
}

/* 窄螢幕：分析細項改成左標題、右內容資料卡。 */
.analysis-auto-short {
    display: none;
}

/* 單價分析：暫時保留功能結構，但不顯示自動重新小計控制項。 */
.analysis-toolbar .analysis-auto-control,
.analysis-toolbar label:has(.analysis-auto-full),
.analysis-toolbar label:has(.analysis-auto-short) {
    display: none !important;
}

@media (max-width: 1100px) {
    .analysis-modal {
        overflow: hidden;
        overscroll-behavior: contain;
    }

    .analysis-modal-card {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 20px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .analysis-toolbar {
        display: flex;
        justify-content: flex-start;
        margin: 0 12px 10px;
        padding: 7px;
        border: 1px solid #d2e5db;
        background: #f3faf6;
    }

    .analysis-toolbar button {
        width: 34px;
        min-width: 34px;
        height: 32px;
        min-height: 32px;
        padding: 0;
        place-items: center;
        font-size: 0;
        line-height: 1;
    }

    .analysis-toolbar button i {
        margin: 0;
        font-size: var(--fs-base);
        line-height: 1;
    }

    .analysis-toolbar label {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        margin-left: auto;
        padding: 0 8px;
        border: 1px solid #b6d9c6;
        border-radius: 5px;
        background: #fff;
        font-size: var(--fs-sm);
    }

    .analysis-auto-full {
        display: none;
    }

    .analysis-auto-short {
        display: inline;
    }

    .analysis-table tbody {
        display: block;
    }

    .analysis-table tbody tr {
        display: block;
        margin-bottom: 10px;
        border: 1px solid #d7e4df;
        border-radius: 8px;
    }

    .analysis-table td,
    .analysis-table td:nth-child(2),
    .analysis-table td:nth-child(8),
    .analysis-table td:nth-child(21) {
        display: grid;
        grid-template-columns: calc(116px * var(--fs-scale)) minmax(0,1fr);
        align-items: center;
        min-width: 0;
        min-height: 40px;
        padding: 7px 9px;
        border: 0;
        border-bottom: 1px solid #e3ece8;
        font-size: var(--fs-md);
        text-align: right;
    }

    .analysis-table td:nth-child(2),
    .analysis-table td:nth-child(18),
    .analysis-table td:nth-child(19),
    .analysis-table td:nth-child(20) {
        text-align: right;
    }

    .analysis-table td:nth-child(2) .analysis-lock-control,
    .analysis-table td:nth-child(18) .analysis-rounding,
    .analysis-table td:nth-child(19) .analysis-rounding,
    .analysis-table td:nth-child(20) .analysis-fixed-control {
        justify-self: end;
    }

    .analysis-table td:nth-child(2) .analysis-item-detail {
        display: inline-flex !important;
        grid-column: auto;
        grid-row: auto;
        align-items: center;
        justify-content: flex-end;
        justify-self: end;
        gap: 7px;
        width: auto;
        min-width: 0;
        white-space: nowrap;
    }

    .analysis-table td:nth-child(2) .analysis-item-name {
        display: block;
        overflow: hidden;
        min-width: 0;
        text-overflow: ellipsis;
        text-align: right;
    }

    .analysis-table td:nth-child(2)::before {
        grid-column: auto;
        grid-row: auto;
        align-self: center;
    }

    /* 細項名稱比照主表「項目及說明」：標題在左、鎖定框與名稱同列靠右。 */
    .analysis-table td:nth-child(2) {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        text-align: right;
        white-space: nowrap;
    }

    .analysis-table td:nth-child(2)::before {
        flex: 0 0 auto;
        margin-right: auto;
    }

    .analysis-table td:nth-child(2) .analysis-item-detail {
        flex: 0 1 auto;
        margin-left: auto;
    }

    .analysis-table td::before {
        margin: 0;
        color: var(--brand-accent);
        font-size: var(--fs-xs);
        font-weight: 600;
        text-align: left;
    }

    .analysis-table td:last-child {
        border-bottom: 0;
    }

    .analysis-table tbody tr.is-selected {
        border: 2px solid #287d61;
        box-shadow: none;
    }

    .analysis-table tbody tr.is-selected td,
    .analysis-table tbody tr.is-selected td:first-child,
    .analysis-table tbody tr.is-selected td:last-child {
        box-shadow: none;
    }
}

@media (max-width: 640px) {
    .analysis-toolbar {
        gap: 5px;
    }

    .analysis-toolbar button {
        width: 32px;
        min-width: 32px;
    }

    .analysis-toolbar label {
        padding: 0 6px;
    }
}

.total-adjust-content .adjust-options h3 {
    margin: 0 0 5px;
    color: #256b4e;
    font-size: var(--fs-lg);
}

.adjust-calc-buttons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.adjust-calc-buttons button::before {
    display: none !important;
}

.adjust-calc-buttons button i {
    display: none;
    font-size: var(--fs-sm);
}

.adjust-calc-buttons button.is-selected i {
    display: inline-block;
}

/* 單價分析項目的標單固定單價勾選框。 */
.analysis-fixed-control {
    width: 24px;
    height: 24px;
    border-color: #8fc4a4;
    border-radius: 5px;
    background: #fff;
}

.analysis-fixed-control i {
    font-size: var(--fs-base);
    font-weight: 800;
}

/* 自主檢查的系統提示需覆蓋在目前彈窗之上。 */

/* 總價調整：上下分區與二選一選項 */
.total-adjust-content [data-adjust-panel="restore"] .adjust-mode-title {
    padding: 0 0 10px;
    border-bottom: 1px solid #e0e8ee;
}

.total-adjust-content [data-adjust-panel="restore"]::after {
    display: block;
}

.total-adjust-content [data-adjust-panel="restore"].is-active .adjust-mode-title {
    border-bottom-color: #b8dfc7;
}

.total-adjust-content .adjust-options {
    margin: 22px -20px 0;
    padding: 18px 20px 15px 20px;
    border: 0;
    border-top: 1px solid #dce4eb;
    border-radius: 0;
    background: #f9fbfd;
}

.total-adjust-content .adjust-options legend {
    padding: 0;
    color: #256b4e;
    font-size: var(--fs-lg);
}

.adjust-options-hint {
    margin: 5px 0 10px;
    color: var(--text-4);
    font-size: var(--fs-md);
}

.adjust-calc-buttons {
    gap: 0;
}

.adjust-calc-buttons button {
    position: relative;
    min-width: 180px;
    border-radius: 0;
    background: #fff;
    color: var(--brand-accent);
}

.adjust-calc-buttons button:first-child {
    border-radius: 6px 0 0 6px;
}

.adjust-calc-buttons button:last-child {
    border-left: 0;
    border-radius: 0 6px 6px 0;
}

.adjust-calc-buttons button::before {
    display: inline-grid;
    width: 15px;
    height: 15px;
    margin-right: 6px;
    border: 1px solid #aebfcd;
    border-radius: 50%;
    background: #fff;
    content: '';
    place-items: center;
    vertical-align: -2px;
}

.adjust-calc-buttons button.is-selected {
    border-color: #27804e;
    background: #effaf2;
    color: #246d55;
    font-weight: 700;
}

.adjust-calc-buttons button.is-selected::before {
    margin-right: 6px;
    border-color: #27804e;
    background: #27804e;
    color: #fff;
    content: '✓';
    font-size: var(--fs-xs);
    font-weight: 800;
}

.adjust-calc-buttons button.is-selected+button {
    border-left-color: #27804e;
}

@media (max-width: 640px) {
    .total-adjust-content .adjust-options {
        margin-right: -13px;
        margin-left: -13px;
        padding-right: 13px;
        padding-left: 13px;
    }

    .adjust-calc-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .adjust-calc-buttons button,
    .adjust-calc-buttons button:first-child,
    .adjust-calc-buttons button:last-child {
        width: 100%;
        border: 1px solid #b8cbdc;
        border-radius: 6px;
        text-align: left;
    }

    .adjust-calc-buttons button.is-selected+button {
        border-left-color: #b8cbdc;
    }
}

/* 版本管理新增版本：手機／平板一列一個欄位，左標題、右輸入框。 */
@media (max-width: 900px) {
    .version-add-mobile-form>label {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px;
        margin: 0;
        color: var(--brand-accent);
        font-size: var(--fs-sm);
        font-weight: 600;
    }

    .version-add-mobile-form>label input {
        width: min(200px, 60%);
        margin: 0 0 0 auto;
        text-align: right;
    }

    .version-add-mobile-form>div {
        display: flex !important;
        justify-content: flex-end !important;
        min-height: 54px;
    }
}

/* 系統登入頁最終版：僅保留帳號、密碼、驗證碼。 */
.water-login {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* 2026/09/15：原本是 overflow:hidden，畫面只要比視窗高（螢幕比例 125/150%、字級調大）
       就會被裁掉而且捲不動。只擋左右方向，上下一定要留給它捲。 */
    overflow-x: hidden;
    background: #eaf4f9 url("../assets/login-background.png") center center / cover no-repeat fixed;
    color: #234969;
}

.water-login::before,
.water-login::after {
    position: fixed;
    z-index: 0;
    border: 1px solid rgba(83, 167, 209, .22);
    border-radius: 50%;
    pointer-events: none;
    content: '';
}

.water-login::before {
    top: 8%;
    left: -110px;
    width: 300px;
    height: 300px;
}

.water-login::after {
    right: -110px;
    bottom: 4%;
    width: 360px;
    height: 360px;
}

.login-brand {
    position: relative;
    z-index: 2;
    top: auto;
    left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    width: calc(100% - 40px);
    margin: 18px 0 0 20px;
    color: #285875;
    font-size: .92rem;
    font-weight: 600;
}

.water-login-logo {
    position: static;
    /* 2026/09/15：登入頁 logo 放大（這份是最後生效的定義，改這裡才有用） */
    width: 292px;
    max-width: 58vw;
    height: auto;
}

.login-layout {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 1;
    grid-template-columns: 1fr;
    place-items: center;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 34px 20px 66px;
}

.login-intro {
    display: none !important;
}

.water-login-card.login-system-card {
    position: static;
    box-sizing: border-box;
    width: min(100%, 440px);
    margin: 0;
    padding: 34px 38px 32px;
    transform: none;
    border: 1px solid rgba(151, 191, 219, .72);
    border-radius: 22px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 20px 48px rgba(47, 91, 119, .18);
}

.login-system-card .login-card-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin: 0;
    padding: 0 0 20px;
    border-bottom: 1px solid #dce8f0;
    text-align: center;
}

.login-system-card .login-card-heading p {
    margin: 0 0 2px;
    color: #3c515f;
    font-size: .9rem;
    font-weight: 500;
}

.login-system-card .login-card-heading h1 {
    margin: 0;
    color: #174c76;
    font-size: 1.8rem;
    line-height: 1.45;
    letter-spacing: .08em;
}

.login-system-card form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    padding-top: 22px;
}

.login-system-card form>label {
    display: block;
    width: 100%;
    margin: 0;
    color: #345b74;
    font-size: .9rem;
    font-weight: 600;
    text-align: left;
}

.login-system-card form input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    margin: 7px 0 0;
    padding: 0 13px;
    border: 1px solid #bfd4e3;
    border-radius: 8px;
    background: #fff;
    color: #254760;
    font: inherit;
    font-weight: 400;
    text-align: left;
}

.login-system-card form input:focus {
    outline: 0;
    border-color: #3e91c3;
    box-shadow: 0 0 0 3px rgba(54, 139, 189, .14);
}

.captcha-input-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) calc(126px * var(--fs-scale));
    gap: 9px;
    align-items: end;
}

.login-system-card .captcha {
    display: flex;
    box-sizing: border-box;
    width: auto;
    height: 46px;
    margin: 7px 0 0;
    padding: 0 7px 0 12px;
    border: 1px solid #bfd4e3;
    border-radius: 8px;
    background: #f4f9fc;
    align-items: center;
    justify-content: space-between;
}

.login-system-card .captcha b {
    color: #286b91;
    font-family: Georgia, serif;
    font-size: 1rem;
    font-style: italic;
    letter-spacing: .13em;
}

.login-system-card .captcha button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #286f9d;
    font-size: 1.1rem;
    cursor: pointer;
}

.login-system-card .captcha button:hover {
    background: #dceef8;
}

.login-system-card .water-login-button {
    width: 100%;
    min-height: 48px;
    margin: 7px 0 0;
    border: 0;
    border-radius: 8px;
    background: #18578f !important;
    box-shadow: 0 8px 16px rgba(40, 111, 174, .22);
    color: #fff;
    font: inherit;
    font-weight: 700;
    letter-spacing: .08em;
}

.login-system-card .water-login-button:hover {
    background: #1f5f98;
    transform: translateY(-1px);
}

.login-footer {
    position: relative;
    z-index: 1;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    margin: 0;
    padding: 10px 20px;
    background: rgba(40, 92, 124, .9);
    color: #f5fbff;
    font-size: .9rem;
    letter-spacing: .03em;
    text-align: right;
}

@media (max-width: 640px) {
    .login-brand {
        width: calc(100% - 28px);
        gap: 10px;
        margin: 14px 0 0 14px;
        font-size: .92rem;
    }

    .water-login-logo {
        width: 138px;
    }

    .login-layout {
        padding: 25px 18px 45px;
    }

    .water-login-card.login-system-card {
        padding: 28px 21px 25px;
        border-radius: 16px;
    }

    .login-system-card .login-card-heading h1 {
        font-size: 1.35rem;
    }

    .captcha-input-row {
        grid-template-columns: minmax(0,1fr) calc(112px * var(--fs-scale));
        gap: 7px;
    }

    .login-footer {
        padding-right: 18px;
        font-size: .9rem;
    }
}

/* 共用頂端 Banner：使用 navbar-bg 保留工程系統的明亮藍色層次。 */
.topbar.fixed-header {
    background-color: #f7fbfe;
    /* 2026/09/15：拿掉上面那層白色漸層，否則整條 banner 會霧霧的 */
    background-image: url("../assets/navbar-bg.png");
    background-position: center center;
    background-size: cover;
    border-bottom: 1px solid #b9d8eb;
    box-shadow: inset 0 -1px 0 #dfdfdf, 0 2px 9px rgba(42, 95, 130, .08);
}

.topbar.fixed-header>* {
    position: relative;
    z-index: 1;
}

@media (max-width: 700px) {
    .topbar.fixed-header {
        background-position: 58% center;
    }
}

/* 專案基本資料：僅調整儲存按鈕色彩。 */
.basic-form-actions .primary-button {
    background: #18578f !important;
    border-color: #18578f !important;
}

.basic-form-actions .primary-button:hover {
    background: #0d4577 !important;
    border-color: #0d4577 !important;
}

/* 預算編製列表：工程編號內容字級。 */
#project-rows td.code {
    font-size: var(--fs-base);
}

/* 預算編製列表：項次與功能欄標題置中。 */
#budget-module .table-card thead th:first-child,
#budget-module .table-card thead th:nth-child(8) {
    text-align: center;
}

#budget-module #project-rows td:first-child,
#budget-module #project-rows td:nth-child(8) {
    text-align: center;
}

#budget-module .project-transfer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 30px;
    margin-right: 7px;
    padding: 4px 9px;
    border: 1px solid #efb36c;
    border-radius: 5px;
    background: #fff6e9;
    color: #ac6111;
    font: inherit;
    font-size: var(--fs-md);
    cursor: pointer;
}

#budget-module .project-transfer-button:hover {
    background: #ffe7c6;
}

#budget-module .project-transfer-button.is-transferred {
    border-color: #b8d3c0;
    background: #edf7f0;
    color: var(--text-3);
    cursor: default;
}

/* 標單編制列表：轉入流程以紫色／橘色區分狀態。 */

/* 標單編輯：沿用預算編輯功能，改以橘色辨識可操作與選取狀態。 */

/* 標單編輯主表：以橘色區隔預算編輯的綠色色系；綠色工項按鈕維持原有綠色。 */

/* 標單主項以深棕色呈現，總計維持中性灰色。 */

/* 表格滑入時使用淡橘色，保留目前已選取的辨識效果。 */

/* 固定工具列的操作按鈕改為橘色色系；綠色欄位按鈕不受影響。 */

/* 標單大項的名稱與收合符號使用相同深棕色。 */

/* 標單分標流程：以橘色識別搜尋、表格與送出操作。 */

/* 契約分標流程：以紫色識別搜尋、表格與送出操作。 */
.contract-page .project-form-actions .primary-button,
.contract-page .master-project-card .search-icon-button {
    border-color: #7857ad;
    background: #654695;
    color: #fff;
}

.contract-page .project-form-actions .primary-button:hover,
.contract-page .master-project-card .search-icon-button:hover {
    border-color: #50357f;
    background: #50357f;
}

.contract-page .master-project-table th,
.contract-page .sub-item-table th {
    background: #654695;
    color: #fff;
}

.contract-page .master-project-table td,
.contract-page .sub-item-table td {
    border-color: #d8cbed;
}

.contract-page .master-project-table tbody tr:hover td,
.contract-page .sub-item-table tbody tr:hover td {
    background: #f5f0fb;
}

.contract-page .master-project-table tbody tr.is-selected td,
.contract-page .sub-item-table tbody tr.is-selected td {
    background: #e8def7;
    color: var(--brand);
}

.contract-page .master-project-table input,
.contract-page .sub-item-table input:not(.analysis-fixed-price) {
    accent-color: #7653aa;
}

/* 分標項目挑選：各編製模組的勾選框使用對應主色。 */

.contract-page .sub-item-table input[type="checkbox"] {
    accent-color: #7653aa !important;
}

.contract-page .sub-item-table .analysis-fixed-price {
    border-color: #b9a2dc;
    background: #f6f1fb;
}

.contract-page .sub-item-table .analysis-fixed-price:checked,
.contract-page .sub-item-table .analysis-fixed-control:has(.analysis-fixed-price:checked) {
    border-color: #7653aa !important;
    background: #7653aa !important;
    color: #fff;
}

.contract-page .edit-project-summary,
.contract-edit-page .edit-project-summary {
    border-color: #8b6abb;
    background: #f6f1fb;
}

/* 分標詳細表標題需明確覆蓋預算頁的綠色表頭。 */

.contract-page .sub-item-table thead th {
    background: #654695 !important;
    color: #fff !important;
}

/* 詳細表的大項／分項列不再沿用預算綠色。 */

.contract-page .sub-item-table .sub-item-group,
.contract-page .sub-item-table .sub-item-group td {
    background: #eee5f8 !important;
    color: var(--brand) !important;
}

.contract-page .sub-item-table .sub-item-section,
.contract-page .sub-item-table .sub-item-section td {
    background: #f7f3fb !important;
    color: #5d4387 !important;
}

/* 標單編輯的主項設定與工項編輯：綠色操作色改為橘色。 */

/* 除標題外，主項設定與工項編輯文字維持原本色系。 */

/* 工項編輯與工項項目維持原本的標示色。 */

/* 碳排放推估模組：沿用專案列表的版面與系統藍色操作。 */
.carbon-estimation-page .carbon-estimation-content {
    padding-top: 28px;
}

.carbon-estimation-page .carbon-project-card {
    overflow: hidden;
}

.carbon-estimation-page .carbon-project-card .primary-button,
.carbon-estimation-page .carbon-run-button {
    background: #18578f;
    border-color: #18578f;
    color: #fff;
}

.carbon-estimation-page .carbon-project-card .primary-button:hover,
.carbon-estimation-page .carbon-run-button:hover {
    background: #0d4577;
    border-color: #0d4577;
}

.carbon-estimation-page .carbon-project-link {
    color: var(--brand-accent);
    text-decoration: none;
}

.carbon-estimation-page .carbon-project-link:hover {
    color: var(--brand-accent);
    text-decoration: underline;
}

.carbon-estimation-page .carbon-amount {
    color: var(--brand);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.carbon-estimation-page .carbon-run-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
}

.carbon-estimation-page .carbon-empty {
    padding: 32px !important;
    color: var(--text-3);
    text-align: center !important;
}

.carbon-estimation-page .row-actions .delete,
.carbon-estimation-page .row-actions .project-transfer-button {
    display: none !important;
}

/* 碳排放推估模組列表頁與 budget.html 共用同一個 #budget-module id，
   這裡另外用 .carbon-estimation-page 範圍限定加一層保險，確保本頁「第7欄（建立日期）
   還原」與「功能欄手機版 icon-only 靠右」不會依賴其他頁面的修改時序。 */
.carbon-estimation-page #budget-module .table-card table th:nth-child(7),
.carbon-estimation-page #budget-module .table-card table td:nth-child(7) {
    display: table-cell;
}

@media (max-width: 600px) {
    .carbon-estimation-page #budget-module .table-card .row-actions {
        justify-content: flex-end;
        gap: 6px;
    }

    .carbon-estimation-page #budget-module .table-card .row-actions .icon-action {
        min-width: 30px;
        width: 30px;
        padding: 0;
    }

    .carbon-estimation-page #budget-module .table-card .row-actions .icon-action:after {
        content: '';
        margin: 0;
    }

    .carbon-estimation-page #budget-module .table-card td.row-actions {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .carbon-estimation-page #budget-module .table-card td.row-actions:before {
        margin-right: auto !important;
    }
}

/* 碳排放推估：詳細價目表 */
.carbon-edit-page {
    background: #f2f7fb;
}

.carbon-edit-page .carbon-project-summary {
    border-color: #9fc8ee;
    background: #eaf4ff;
}

.carbon-edit-page .carbon-project-summary .project-summary-code,
.carbon-edit-page .carbon-project-summary .project-summary-detail span {
    color: var(--brand-accent);
}

.carbon-edit-page .carbon-project-summary .project-summary-detail strong {
    color: var(--brand);
}

.carbon-calc-shell {
    margin: 0 2.2vw 32px;
}

.carbon-calc-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.carbon-heading-back { margin-left: 4px; }
.carbon-heading-actions { display: inline-flex; align-items: center; gap: 10px; }

.carbon-calc-heading h1 {
    margin: 0;
    color: var(--brand);
    font-size: var(--fs-2xl);
}

.carbon-module-tabs {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid #b9d1ec;
    border-radius: 7px;
    background: #fff;
}

.carbon-module-tabs button {
    min-width: 78px;
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-right: 1px solid #b9d1ec;
    color: var(--brand-accent);
    background: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.carbon-module-tabs button:last-child { border-right: 0; }
.carbon-module-tabs button:hover { background: #eaf4ff; }
.carbon-module-tabs button.is-active { color: #fff; background: #286fae; }

.carbon-tabs {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid #d5e1ef;
    border-radius: 8px;
    background: #fff;
}

.carbon-tabs button {
    min-height: 38px;
    padding: 0 20px;
    border: 0;
    border-right: 1px solid #d5e1ef;
    color: var(--brand-accent);
    background: #fff;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.carbon-tabs button:last-child { border-right: 0; }
.carbon-tabs button:hover { background: #edf5ff; }
.carbon-tabs button.is-active { color: #fff; background: #356cc2; }

.carbon-overview {
    display: grid;
    /* 2026/09/01：可拆解率移除後剩 4 塊，改成 4 欄等寬平均分 */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    margin-bottom: 12px;
    padding: 14px 8px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #d3e0eb;
    box-shadow: none;
}

.carbon-overview-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border-right: 1px solid #d5e1ed;
    text-align: center;
    font-weight: 500;
    line-height: 1.55;
}
.carbon-overview-item:last-child { border-right: 0; }
.carbon-overview-item b { font-weight: 700; }
.carbon-overview-price { color: #e61a14; }
.carbon-overview-blue { color: var(--brand-accent); }
.carbon-overview-green { color: #2d8537; }
.carbon-overview-dark { color: var(--brand); }

.carbon-lock-control {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px 4px;
    color: var(--brand-accent);
    cursor: pointer;
    user-select: none;
}
.carbon-lock-control input { position: absolute; opacity: 0; pointer-events: none; }
.carbon-lock-slider {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #ccd9e6;
    transition: .18s ease;
}
.carbon-lock-slider::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    content: '';
    box-shadow: 0 1px 3px #35526b55;
    transition: .18s ease;
}
.carbon-lock-control input:checked + .carbon-lock-slider { background: #286fae; }
.carbon-lock-control input:checked + .carbon-lock-slider::after { transform: translateX(16px); }

.carbon-detail-panel {
    padding: 16px 22px 22px;
    border: 1px solid #d3e0eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}
.carbon-detail-panel.is-locked { opacity: .72; }
.carbon-detail-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-bottom: 14px;
}
.carbon-search-tools,
.carbon-import-tools { display: flex; align-items: center; gap: 10px; }
.carbon-search-tools input {
    width: 235px;
    height: 37px;
    padding: 0 12px;
    border: 1px solid #cbdced;
    border-radius: 6px;
    color: var(--brand);
    font: inherit;
}
.carbon-tool-button,
.carbon-download-button,
.carbon-back-list {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 37px;
    padding: 0 13px;
    border: 1px solid #8bb5e9;
    border-radius: 7px;
    color: var(--brand-accent);
    background: #fff;
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
.carbon-tool-button:hover,
.carbon-download-button:hover,
.carbon-back-list:hover { background: #eaf4ff; }
.carbon-tool-button.is-active { border-color: #4e83ce; background: #f4f9ff; color: var(--brand-accent); }
.carbon-back-list { border-color: #cbd9e8; color: var(--brand-accent); }

.carbon-table-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 42px;
    padding: 0 4px;
    border-bottom: 1px solid #d9e4ec;
    color: var(--brand-accent);
    font-size: var(--fs-base);
}
.carbon-table-size { display: inline-flex; align-items: center; gap: 18px; }
.carbon-table-summary label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-left: 16px;
    border-left: 1px solid #d9e4ec;
}
.carbon-table-summary select {
    height: 31px;
    min-width: 70px;
    padding: 0 9px;
    border: 1px solid #c5d6e8;
    border-radius: 5px;
    color: var(--brand-accent);
    background: #fff;
    font: inherit;
}
.carbon-table-wrap { overflow: auto; max-height: min(620px, calc(100vh - 382px)); }
.carbon-detail-table { width: 100%; min-width: 1110px; border-collapse: collapse; table-layout: fixed; }
.carbon-detail-table th {
    padding: 12px 10px;
    color: var(--brand-accent);
    background: #fafbfc;
    border: 0;
    border-bottom: 1px solid #d9e4ec;
    font-size: var(--fs-base);
    white-space: nowrap;
}
.carbon-detail-table td {
    padding: 13px 12px;
    color: var(--brand);
    border: 0;
    border-bottom: 1px solid #dfe8ef;
    vertical-align: middle;
    text-align: center;
}
.carbon-detail-table th:nth-child(2),
.carbon-detail-table td:nth-child(2) { width: 28%; text-align: left; }
.carbon-detail-table td b { font-weight: 700; }
.carbon-detail-table td small,
.carbon-detail-table .carbon-code { display: block; color: var(--brand-accent); font-weight: 600; }
.carbon-detail-table td small { margin-top: 4px; font-size: var(--fs-sm); }
.carbon-detail-table .carbon-green-head { color: #358355; background: #effbf2; }
.carbon-detail-table .carbon-water-head { color: #b75665; background: #fff1f2; }
.carbon-detail-table tbody tr:nth-child(even) { background: transparent; }
.carbon-detail-table tbody tr:hover { background: #dceeff; }
.carbon-detail-table tbody tr.carbon-main-row { background: transparent; }
.carbon-detail-table tbody tr.carbon-main-row:hover { background: #e3f1ff; }
.carbon-detail-table th:nth-child(1),
.carbon-detail-table th:nth-child(7),
.carbon-detail-table th:nth-child(8),
.carbon-detail-table th:nth-child(9),
.carbon-detail-table td:nth-child(7),
.carbon-detail-table td:nth-child(8),
.carbon-detail-table td:nth-child(9) { text-align: center; }
.carbon-edit-action,
.carbon-green-action,
.carbon-water-action,
.carbon-eye-button {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 6px;
    cursor: pointer;
}
.carbon-edit-action { color: var(--brand-accent); background: #e7f0fd; }
.carbon-green-action { color: #2b854a; background: #e7f7eb; }
.carbon-water-action { color: #e6192f; background: #ffe6e9; }
.carbon-eye-button { color: var(--text-4); background: #edf2f7; }
.carbon-edit-action:hover { background: #cfe3ff; }
.carbon-green-action:hover { background: #cdeed7; }
.carbon-water-action:hover { background: #ffd1d8; }
.carbon-eye-button:hover { background: #dbe7f1; }
.carbon-tab-placeholder { padding: 42px 20px; color: var(--brand-accent); text-align: center; }

@media (max-width: 1100px) {
    .carbon-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .carbon-overview-item:nth-child(2n) { border-right: 0; }
    .carbon-overview-item:nth-child(-n+2) { border-bottom: 1px solid #d5e1ed; padding-bottom: 12px; }
    .carbon-overview-item:nth-child(n+3) { padding-top: 12px; }
}
@media (max-width: 760px) {
    .carbon-calc-shell { margin: 0 12px 20px; }
    .carbon-calc-heading,
    .carbon-detail-tools { align-items: stretch; flex-direction: column; }
    .carbon-heading-actions { width: 100%; }
    .carbon-back-list .carbon-back-label { display: none; }
    .carbon-back-list { justify-content: center; width: 38px; min-width: 38px; padding: 0; }
    .carbon-module-tabs { width: 100%; }
    .carbon-module-tabs button { flex: 1; }
    .carbon-tabs { width: 100%; }
    .carbon-tabs button { flex: 1; padding: 0 8px; font-size: var(--fs-sm); }
    .carbon-overview { grid-template-columns: 1fr; }
    .carbon-overview-item,
    .carbon-overview-item:nth-child(2n) { border-right: 0; border-bottom: 1px solid #d5e1ed; padding: 10px 15px; }
    .carbon-overview-item:last-child { border-bottom: 0; }
    .carbon-search-tools,
    .carbon-import-tools { flex-wrap: wrap; }
    .carbon-table-summary,
    .carbon-table-size { align-items: flex-start; flex-wrap: wrap; }
    .carbon-search-tools input { flex: 1 1 150px; width: auto; }
    .carbon-detail-panel { padding: 14px; }
    .carbon-table-wrap { max-height: none; overflow: visible; }
    .carbon-detail-table,
    .carbon-detail-table tbody,
    .carbon-detail-table tr,
    .carbon-detail-table td { display: block; min-width: 0; width: 100%; }
    .carbon-detail-table thead { display: none; }
    .carbon-detail-table tr { margin-bottom: 12px; border: 1px solid #d7e4f0; border-radius: 8px; overflow: hidden; }
    .carbon-detail-table td { display: grid; grid-template-columns: 42% 58%; padding: 10px 12px; border-bottom: 1px solid #e5edf4; text-align: right; }
    .carbon-detail-table td::before { color: var(--brand-accent); font-weight: 600; text-align: left; content: attr(data-label); }
    .carbon-detail-table td:nth-child(1)::before { content: '項次'; }
    .carbon-detail-table td:nth-child(2)::before { content: '項目（編碼）'; }
    .carbon-detail-table td:nth-child(3)::before { content: '數量 / 單位'; }
    .carbon-detail-table td:nth-child(4)::before { content: '金額（元）'; }
    .carbon-detail-table td:nth-child(5)::before { content: '碳係數（kgCO2e）'; }
    .carbon-detail-table td:nth-child(6)::before { content: '碳排放量'; }
    .carbon-detail-table td:nth-child(7)::before { content: '碳排編輯'; }
    .carbon-detail-table td:nth-child(8)::before { content: '綠色'; }
    .carbon-detail-table td:nth-child(9)::before { content: '水利署'; }
    .carbon-detail-table th:nth-child(2),
    .carbon-detail-table td:nth-child(2) { width: 100%; text-align: right; }
.carbon-detail-table td:nth-child(2) b,
    .carbon-detail-table td:nth-child(2) small,
    .carbon-detail-table .carbon-code { text-align: right; }
}

@media (min-width: 761px) and (max-width: 850px) {
    .budget-edit-page #version-manager-trigger .editor-version-label,
    .budget-edit-page #public-price-search .editor-price-label,
    .budget-edit-page #editor-back-to-list .editor-back-label { font-size: 0; }
    .budget-edit-page #version-manager-trigger .editor-version-label::after { content: '版本'; font-size: var(--fs-sm); }
    .budget-edit-page #public-price-search .editor-price-label::after { content: '價格查詢'; font-size: var(--fs-sm); }
    .budget-edit-page #editor-back-to-list .editor-back-label { display: none; }
}

@media (max-width: 600px) {
    .carbon-estimation-page .carbon-estimation-content {
        padding-top: 16px;
    }

    .carbon-estimation-page .carbon-run-button {
        min-width: 74px;
    }
}

/* 契約編輯：標題旁資料鎖定開關與鎖定狀態。 */
.edit-title-with-lock {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contract-data-lock {
    height: 30px;
    padding: 0 9px;
    font-size: var(--fs-md);
    color: var(--text-2);
    background: #fff;
    border: 1px solid #b5a3ce;
}

.contract-edit-page .contract-data-lock input:checked + span {
    background: #76559c !important;
}

.contract-edit-page.is-data-locked .editor-actions,
.contract-edit-page.is-data-locked .editor-no-side,
.contract-edit-page.is-data-locked .editor-footer,
.contract-edit-page.is-data-locked .edit-heading-actions {
    opacity: 1;
    filter: none;
    cursor: not-allowed;
}

.contract-edit-page .contract-lock-modal {
    z-index: 150;
}

.contract-edit-page .contract-lock-modal .green-modal-header h2,
.contract-edit-page .contract-lock-modal .green-modal-header h2 i {
    color: var(--text-1);
}

.contract-edit-page .contract-lock-modal .green-modal-card {
    width: min(460px, calc(100vw - 32px));
}

.budget-edit-page .contract-lock-modal .green-modal-card {
    width: min(460px, calc(100vw - 32px));
}

.contract-edit-page .contract-lock-modal .recalculate-message {
    max-width: none;
    margin: 20px 20px 0;
    padding: 13px 15px;
    border-radius: 6px;
    color: var(--text-2);
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.55;
}

@media (max-width: 600px) {
    .edit-title-with-lock {
        gap: 8px;
    }

    .contract-data-lock b {
        font-size: var(--fs-xs);
    }

    /* 編輯頁頂端「版本管理／匯出報表／公開價格查詢／返回列表」按鈕群：850px 斷點已把
       文字縮成短標籤，但 .edit-heading-actions 本身沒有 flex-wrap，極窄裝置（320~360px）
       上 4 個按鈕仍可能加總超出可視寬度而橫向溢出，這裡讓它可以自動換行。 */
    .edit-heading-actions {
        flex-wrap: wrap;
        row-gap: 8px;
        width: 100%;
    }
}

/* 契約編輯沿用標單的文字層級，改以深紫色識別。 */
.contract-edit-page .major-modal-header h2,
.contract-edit-page .major-modal-header h2 i,
.contract-edit-page .major-modal legend,
.contract-edit-page .item-modal-header h2,
.contract-edit-page .item-modal-header h2 i,
.contract-edit-page .item-modal legend,
.contract-edit-page .analysis-modal-header h2,
.contract-edit-page .analysis-modal-header h2 i,
.contract-edit-page .work-code-modal-header h2,
.contract-edit-page .work-code-modal-header h2 i,
.contract-edit-page .work-code-modal-header h2 i {
    color: var(--text-1) !important;
}

.contract-edit-page .work-code-trigger,
.contract-edit-page .attribute-trigger {
    color: var(--text-2) !important;
}

/* 契約主項大類設定：完整改用紫色操作系。 */
.contract-edit-page .major-tabs button {
    border-color: #b5a3ce;
    border-bottom-color: #6f5a8c;
    background: #f5f0fb;
    color: var(--text-2);
}

.contract-edit-page .major-tabs button.active {
    border-color: #6f5a8c !important;
    background: #6f5a8c !important;
    color: #fff !important;
}

.contract-edit-page .major-selection-table,
.contract-edit-page .major-segment-formula-table {
    border-color: #b5a3ce;
}

.contract-edit-page .major-selection-table th,
.contract-edit-page .major-selection-table td,
.contract-edit-page .major-segment-formula-table th,
.contract-edit-page .major-segment-formula-table td {
    border-color: #d8cbed;
}

.contract-edit-page .major-selection-table tbody tr:hover td,
.contract-edit-page .major-segment-formula-table tbody tr:not(.major-segment-input-row):hover td {
    background: #f4eef9;
}

.contract-edit-page .major-select-button,
.contract-edit-page .major-tabs-selection-button,
.contract-edit-page .major-segment-add-row,
.contract-edit-page .major-segment-confirm-row {
    border-color: #b5a3ce !important;
    background: #f5f0fb !important;
    color: var(--text-2) !important;
}

.contract-edit-page .major-select-button:hover,
.contract-edit-page .major-tabs-selection-button:hover,
.contract-edit-page .major-segment-add-row:hover,
.contract-edit-page .major-segment-confirm-row:hover {
    border-color: #9478b8 !important;
    background: #eadff6 !important;
    color: var(--text-1) !important;
}

.contract-edit-page .major-segment-add {
    border-color: #8064a6;
    background: #6f5a8c;
}

.contract-edit-page .major-segment-add:hover {
    background: #59456f;
}

.contract-edit-page .major-radio-grid input,
.contract-edit-page .item-radio-row input {
    accent-color: #76559c;
}

.contract-edit-page .item-history th {
    border-color: #6f5a8c;
    background: #6f5a8c;
    color: #fff;
}

.contract-edit-page .item-history td {
    border-color: #d8cbed;
}

/* 分析、工項代碼與屬性標記改採標單橘色操作色。 */

/* 分析與挑選工項視窗也一併沿用橘色色系。 */

/* 單價分析項目：未鎖定與未勾選控制項也使用橘色。 */

/* 已設定綠色工項的列，hover 時保持清楚的綠色辨識。 */

/* 一般滑入保持淡色；實際編輯中的儲存格以較明顯的淡黃區隔。 */

/* 滑入編輯列時仍保留深色編輯框。 */

/* 契約編輯獨立頁：沿用完整編輯功能，使用沈穩紫色色系。 */
.contract-edit-shell {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
    background: #f5f3f9;
}

.contract-editor-frame {
    display: block;
    width: 100%;
    height: 100vh;
    border: 0;
}

/* 契約編製模組列表：獨立頁面沿用預算列表操作，使用紫色色系。 */
.contract-module-shell {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
    background: #f5f3f9;
}

.contract-module-frame {
    display: block;
    width: 100%;
    height: 100vh;
    border: 0;
}

.module-basic-shell {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
    background: #f2f7fb;
}

.module-basic-frame {
    display: block;
    width: 100%;
    height: 100vh;
    border: 0;
}

.contract-basic-shell { background: #f5f3f9; }

.contract-page .table-card thead th {
}

.contract-page .table-card tbody tr:hover td {
    background: #f7f1fc;
}

.contract-page .project-create {
    border-color: #76559c;
    background: #76559c;
}

.contract-page .project-create:hover {
    background: #59456f;
}

.contract-edit-page .estimate-table th {
    background: #6f5a8c !important;
}

.contract-edit-page .estimate-table .group > td {
    background: #f3eff9 !important;
    color: var(--text-1) !important;
    font-weight: 700;
}

.contract-edit-page .estimate-table .group.sub > td {
    background: #faf8fd !important;
}

.contract-edit-page .estimate-table .group .collapse-row,
.contract-edit-page .estimate-table .group .collapse-row * {
    color: var(--text-1) !important;
}

.contract-edit-page .estimate-table .grand-total td {
    background: #5d6d7d !important;
    color: #fff !important;
}

.contract-edit-page .estimate-table tbody tr:not(.grand-total):hover > td {
    background: #f8f4fc !important;
}

.contract-edit-page .estimate-table .is-selected td,
.contract-edit-page .estimate-table .is-group-selected td {
    background: #eee6f7 !important;
}

.contract-edit-page .estimate-table .is-active td {
    box-shadow: inset 0 2px #8064a6, inset 0 -2px #8064a6;
}

.contract-edit-page .editor-row-actions .combine-move-button:not(.danger-action),
.contract-edit-page .major-select-button,
.contract-edit-page .major-custom-formula-check {
    border-color: #b5a3ce !important;
    background: #f5f0fb !important;
    color: var(--text-2) !important;
}

.contract-edit-page .editor-row-actions .combine-move-button:not(.danger-action):hover,
.contract-edit-page .major-select-button:hover,
.contract-edit-page .major-custom-formula-check:hover {
    border-color: #9478b8 !important;
    background: #eadff6 !important;
}

.contract-edit-page .fixed-switch input:checked + span,
.contract-edit-page .item-selector-control:has(.item-selector:checked),
.contract-edit-page .item-selector-control:has(.group-selector:checked),
.contract-edit-page .analysis-lock-control:has(input:checked),
.contract-edit-page .analysis-fixed-control:has(input:checked) {
    border-color: #76559c;
    background: #76559c;
}

.contract-edit-page .item-selector-control,
.contract-edit-page .analysis-lock-control,
.contract-edit-page .analysis-fixed-control,
.contract-edit-page .detail-code-trigger,
.contract-edit-page .work-code-trigger,
.contract-edit-page .attribute-trigger {
    background: #f5f0fb;
    color: var(--text-2);
}

.contract-edit-page .item-selector-control:hover,
.contract-edit-page .analysis-lock-control:hover,
.contract-edit-page .analysis-fixed-control:hover,
.contract-edit-page .detail-code-trigger:hover,
.contract-edit-page .work-code-trigger:hover,
.contract-edit-page .attribute-trigger:hover {
    background: #dbd5e3;
}

.contract-edit-page .analysis-action.is-enabled {
    border-color: #b5a3ce;
    background: #f5f0fb;
    color: var(--text-2);
}

.contract-edit-page .analysis-check,
.contract-edit-page .analysis-table input {
    accent-color: #76559c !important;
}

.contract-edit-page .estimate-table .analysis-action.is-enabled {
    border-color: #b5a3ce !important;
    background: #f5f0fb !important;
    color: var(--text-2) !important;
}

.contract-edit-page .estimate-table .analysis-action.is-enabled:hover {
    border-color: #9478b8 !important;
    background: #e8dcf5 !important;
}

.contract-edit-page .attribute-menu {
    border-color: #b5a3ce;
    box-shadow: 0 7px 16px rgba(81, 57, 112, .18);
}

.contract-edit-page .attribute-menu button {
    color: var(--text-1);
}

.contract-edit-page .attribute-menu button:hover {
    background: #f0e9f8;
}

.contract-edit-page .analysis-modal-header h2,
.contract-edit-page .analysis-modal-header h2 i,
.contract-edit-page .work-code-modal-header h2,
.contract-edit-page .work-code-modal-header h2 i {
    color: var(--text-2) !important;
}

.contract-edit-page .analysis-toolbar {
    background: #f7f2fb;
}

.contract-edit-page .analysis-toolbar button {
    border-color: #b5a3ce;
    color: var(--text-2);
}

.contract-edit-page .analysis-table th,
.contract-edit-page .work-code-table th,
.contract-edit-page .major-tabs button.active,
.contract-edit-page .major-selection-table th,
.contract-edit-page .major-segment-formula-table th {
    border-color: #6f5a8c !important;
    background: #6f5a8c !important;
    color: #fff !important;
}

.contract-edit-page .analysis-table tbody tr:hover,
.contract-edit-page .analysis-table tbody tr.is-selected,
.contract-edit-page .work-code-table tbody tr:hover,
.contract-edit-page .work-code-table tbody tr.is-selected {
    background: #f4eef9;
}

.contract-edit-page .analysis-table tbody tr.is-selected td,
.contract-edit-page .work-code-table tbody tr.is-selected td {
    color: var(--text-2);
    box-shadow: inset 0 2px 0 #8064a6, inset 0 -2px 0 #8064a6;
}

.contract-edit-page .work-search button {
    background: #6f5a8c;
}

.contract-edit-page .work-search button:hover {
    background: #59456f;
}

/* 已完成綠色工項的列在滑入時保持綠色色系，避免與一般列混淆。 */
.contract-edit-page .estimate-table .item-row.is-green-item:hover > td {
    background: #6fcea8 !important;
    box-shadow: inset 0 1px #2d946b, inset 0 -1px #2d946b;
}

/* hover 到編輯列時，維持深紫色修改框，不讓 hover 底色覆蓋。 */
.contract-edit-page .estimate-table tbody tr:hover > td[data-editable="true"][contenteditable="true"],
.contract-edit-page .estimate-table tbody tr:hover > td.is-cell-editing,
.contract-edit-page .estimate-table tbody tr:hover > td:focus-within,
.contract-edit-page .estimate-table tbody tr:hover > td:has(input:focus),
.contract-edit-page .estimate-table tbody tr:hover > td:has(select:focus) {
    background: #eee2f8 !important;
    box-shadow: inset 0 0 0 2px #69488f !important;
}

/* 編輯預算項目：完成與指定彈出框使用同一組系統藍。 */
.budget-edit-page .editor-footer-actions .complete-button,
.budget-edit-page .code-rate-actions .primary-button,
.budget-edit-page .total-adjust-actions .primary-button,
.budget-edit-page .green-modal-actions .primary-button,
.budget-edit-page .version-modal-actions .primary-button,
.budget-edit-page .version-add-table .primary-button,
.budget-edit-page .version-add-mobile-form .primary-button,
.budget-edit-page .carbon-modal-actions .primary-button,
.budget-edit-page .work-code-modal-actions .primary-button,
.budget-edit-page .analysis-modal-actions .primary-button {
    background: #18578f !important;
    border-color: #18578f !important;
    color: #fff;
}

.budget-edit-page .editor-footer-actions .complete-button:hover,
.budget-edit-page .code-rate-actions .primary-button:hover,
.budget-edit-page .total-adjust-actions .primary-button:hover,
.budget-edit-page .green-modal-actions .primary-button:hover,
.budget-edit-page .version-modal-actions .primary-button:hover,
.budget-edit-page .version-add-table .primary-button:hover,
.budget-edit-page .version-add-mobile-form .primary-button:hover,
.budget-edit-page .carbon-modal-actions .primary-button:hover,
.budget-edit-page .work-code-modal-actions .primary-button:hover,
.budget-edit-page .analysis-modal-actions .primary-button:hover {
    background: #0d4577 !important;
    border-color: #0d4577 !important;
}

.budget-edit-page .code-rate-header h2,
.budget-edit-page .total-adjust-header h2,
.budget-edit-page .green-modal-header h2,
.budget-edit-page .version-modal-header h2,
.budget-edit-page .carbon-modal-header h2,
.budget-edit-page .work-code-modal-header h2,
.budget-edit-page .analysis-modal-header h2,
.budget-edit-page .code-rate-header h2 i,
.budget-edit-page .total-adjust-header h2 i,
.budget-edit-page .green-modal-header h2 i,
.budget-edit-page .version-modal-header h2 i,
.budget-edit-page .carbon-modal-header h2 i,
.budget-edit-page .work-code-modal-header h2 i,
.budget-edit-page .analysis-modal-header h2 i {
    color: var(--brand);
}

@media (max-width: 700px) {
    .v2-nav-center {
        font-size: 1.4rem;
    }
}

/* 碳排工項編輯：每一種工料使用整塊一致的表格底色。 */
.carbon-machine-picker-content,
.carbon-machine-picker-content .carbon-machine-table,
.carbon-machine-picker-content .carbon-machine-table tbody,
.carbon-machine-picker-content .carbon-machine-table tbody tr,
.carbon-machine-picker-content .carbon-machine-table tbody td {
    background: #f1f3f5;
}

.carbon-machine-picker-content .carbon-machine-table th {
    background: #dce2e6;
    color: var(--text-2);
}

.carbon-machine-picker-content .carbon-machine-table tbody td {
    border-color: #d5dce1;
}

.carbon-custom-picker-content,
.carbon-custom-picker-content .carbon-custom-table,
.carbon-custom-picker-content .carbon-custom-table tbody,
.carbon-custom-picker-content .carbon-custom-table tbody tr,
.carbon-custom-picker-content .carbon-custom-table tbody td {
    background: #fff7f7;
}

.carbon-custom-picker-content .carbon-custom-table th {
    background: #fae8ea;
    color: #a64c5a;
}

.carbon-custom-picker-content .carbon-custom-table tbody td {
    border-color: #efd4d8;
}

@media (max-width: 700px) {
    .carbon-machine-picker-content .carbon-machine-table tbody tr {
        background: #f1f3f5;
        border-color: #cbd3da;
    }

    .carbon-machine-picker-content .carbon-machine-table tbody td {
        background: #f1f3f5;
        border-color: #d8dee3;
    }

    .carbon-custom-picker-content .carbon-custom-table tbody tr {
        background: #fff7f7;
        border-color: #efcfd4;
    }

    .carbon-custom-picker-content .carbon-custom-table tbody td {
        background: #fff7f7;
        border-color: #f0d9dc;
    }
}

/* 四種工料表格各自保有對應色系的滑鼠懸停效果。 */
.carbon-material-table tbody tr,
.carbon-machine-table tbody tr,
.carbon-fuel-table tbody tr,
.carbon-custom-table tbody tr {
    transition: background-color .16s ease;
}

.carbon-material-table tbody tr:hover td {
    background: #e5f1fc;
}

.carbon-machine-table tbody tr:hover td {
    background: #e5e9ec;
}

.carbon-fuel-table tbody tr:hover td {
    background: #ffeed9;
}

.carbon-custom-table tbody tr:hover td {
    background: #ffedef;
}

/* 大項目（壹／一／二／三）進入編輯時，以較明顯的獨立淡黃色標示。 */
.budget-edit-page .estimate-table .group > td.is-cell-editing {
    background: #fff3c4 !important;
    box-shadow: inset 0 0 0 1px #d6a52f;
}

/* 標單彈窗標題維持深棕色，覆蓋既有橘色主題規則。 */

/* ========================================================================= */
/* 2026/08/05：custom_0805.css 覆蓋後，補回下列既有選單專屬樣式（工項資料庫模組／ */
/* 帳號權限／範本維護／系統管理），這些選擇器 custom_0805.css 完全沒有對應內容， */
/* 因此不會與其覆蓋後的其他頁面樣式產生衝突。 */
/* ========================================================================= */

/* ---- 右上角「字體大小」三選一 ----------------------------------------------
   這組控制項刻意不使用 var(--fs-*)：它自己也跟著縮放的話，按一下「大」
   按鈕會突然變大並改變位置，使用者會找不到剛剛按的那顆。所以尺寸全部寫死。
   按鈕上的 小／中／大 三個字本身就用不同字級呈現，當作效果預覽。 */
.font-scale-control {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 34px;
    padding: 0 4px 0 8px;
    border: 1px solid #c9d7df;
    border-radius: 6px;
    background: #fff;
    order: -1;          /* .top-actions 是 flex，固定排在異常申報與登出的左邊 */
}

.font-scale-hint {
    margin-right: 4px;
    color: #5b7186;
    font-size: 12px;
    line-height: 1;
}

.font-scale-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--text-3);
    background: transparent;
    font-family: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

/* 三顆按鈕自己用不同大小呈現，當作「按下去會變成這樣」的預覽。
   這幾個 px 是刻意寫死的，不走 var(--fs-*)，理由同上。 */
.font-scale-option[data-font-scale-option="small"] { font-size: 12px; }
.font-scale-option[data-font-scale-option="base"] { font-size: 14px; }
.font-scale-option[data-font-scale-option="large"] { font-size: 17px; }

.font-scale-option:hover {
    background: #eef4f9;
}

.font-scale-option.is-active {
    border-color: #9dc0da;
    color: var(--brand);
    background: var(--brand-soft);
}

.font-scale-option:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 1px;
}

/* 手機版：跟登出、異常申報一樣收窄，只留三顆字，不顯示前面的圖示。 */
@media (max-width: 850px) {
    .font-scale-control {
        gap: 0;
        padding: 0 3px;
    }

    .font-scale-hint {
        display: none;
    }

    .font-scale-option {
        width: 24px;
    }
}

.report-issue-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #f0c088;
    border-radius: 6px;
    color: #b15f19;
    background: #fff7ee;
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.report-issue-button:hover {
    background: #fdecd8;
}

/* 手機版（比照 .logout-button 同一個斷點）：異常申報鈕只顯示 icon，不顯示「異常申報」文字。 */
@media (max-width: 850px) {
    .report-issue-button {
        width: 34px;
        min-width: 34px;
        padding: 0;
        gap: 0;
        justify-content: center;
    }

    .report-issue-button .report-issue-label {
        display: none;
    }
}

.icon-action.is-disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

#login-log-module .log-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 18px 17px;
}

#login-log-module .log-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #44505e;
    font-size: 13px;
    white-space: nowrap;
}

#login-log-module .log-field input[type="date"],
#login-log-module .log-field input[type="number"] {
    height: 36px;
    margin: 0;
    padding: 0 11px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #fff;
    color: #405262;
    font: 14px inherit;
    line-height: 36px;
}

#login-log-module .log-field input[type="date"] {
    width: 168px;
}

#login-log-module .log-field input[type="number"] {
    width: 64px;
    text-align: center;
    padding: 0 6px;
}

#login-log-module .search-button-label {
    display: none;
}

.role-edit-modal[hidden] {
    display: none;
}

.role-edit-modal {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.role-edit-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 42, 53, .48);
}

.role-edit-modal-card {
    position: relative;
    width: min(520px, 100%);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(22, 48, 64, .3);
    overflow: hidden;
}

.role-edit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #dce8ef;
    background: #f7fbfd;
}

.role-edit-modal-header h2 {
    margin: 0;
    color: var(--brand);
    font-size: var(--fs-xl);
}

.role-edit-modal-header h2 i {
    margin-right: 7px;
    color: var(--brand-accent);
}

.role-edit-modal-close {
    border: 0;
    background: transparent;
    color: var(--text-4);
    font-size: var(--fs-2xl);
    cursor: pointer;
}

.role-edit-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.role-edit-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.role-edit-form input,
.role-edit-form textarea,
.role-edit-form select {
    padding: 9px 11px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: 14px "Noto Sans TC", inherit;
    resize: vertical;
}

.role-edit-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid #eef1f3;
}

.role-edit-modal-actions .primary-button,
.role-edit-modal-actions .secondary-button {
    min-width: 76px;
}

.fp-table {
    min-width: 1120px;
}

.fp-table th,
.fp-table td {
    text-align: center;
    padding: 9px 10px;
    border-bottom: 1px solid #e8edf0;
}

.fp-table thead th {
    white-space: normal;
    line-height: 1.45;
    vertical-align: bottom;
    background: #eaf2fb;
    color: var(--brand-accent);
    font-size: var(--fs-xs);
    font-weight: 700;
    border-bottom: 1px solid #cfe0f4;
}

.fp-table .fp-item-col {
    text-align: left;
    min-width: 220px;
    white-space: normal;
    color: var(--text-2);
}

.fp-table .fp-group-tr {
    background: #f4f8fd;
}

.fp-table .fp-group-tr td {
    font-weight: 700;
    color: var(--brand-accent);
}

.fp-table .fp-sub-row {
    padding-left: 30px;
    color: var(--text-3);
    font-weight: 400;
}

.fp-table .fp-sub-row::before {
    content: '－';
    margin-right: 4px;
    color: var(--brand-accent);
}

.fp-table .analysis-fixed-control {
    margin: 0 auto;
    border-color: #a9c6e8;
    background: #f2f7fd;
}

.fp-table .analysis-fixed-control:has(input:checked) {
    border-color: #2a75b4;
    background: #2a75b4;
    color: #fff;
}

.fp-table .analysis-fixed-control.is-indeterminate {
    background: #eaf2fb;
    border-color: #2a75b4;
    color: var(--brand-accent);
}

.fp-table .analysis-fixed-control.is-indeterminate i {
    display: block;
}

.fp-table .analysis-fixed-control.is-indeterminate i::before {
    content: '\f068';
}

/* RWD：這頁是「選單 x 角色」的權限矩陣（1個標籤欄＋6個角色核取方塊欄，min-width 1120px），
   跟其他清單型頁面的資料形狀不同，不適合轉成「一列一張卡片」的版型（6個核取方塊硬要疊起來
   反而更難操作），改用「保留橫向捲動＋最左邊功能選單欄位固定（sticky）」的方式，讓使用者
   在窄螢幕橫向滑動查看各角色欄位時，隨時都看得到目前是哪個功能選單、不會捲到忘記自己在看哪一列。 */
#function-permission-module .fp-table thead th.fp-item-col,
#function-permission-module .fp-table tbody td.fp-item-col {
    position: sticky;
    left: 0;
    z-index: 1;
}

#function-permission-module .fp-table thead th.fp-item-col {
    z-index: 2;
}

#function-permission-module .fp-table tbody td.fp-item-col {
    background: #fff;
    box-shadow: 2px 0 4px -2px rgba(15, 40, 60, .15);
}

#function-permission-module .fp-table tbody .fp-group-tr td.fp-item-col {
    background: #f4f8fd;
}

#function-permission-module .fp-table tbody tr:hover td.fp-item-col {
    background: #eef6fd;
}

/* 手機板改用另一種呈現方式：橫向捲動+sticky欄位在小螢幕上仍需要靠手勢才找得到功能欄位，
   使用體驗不好。改成跟其他清單頁一樣「一列一張卡片」，但這頁每一列的意義是「一個功能選單
   在6個角色下的開關狀態」，所以卡片內不是label:value的表格列，而是把「功能選單」名稱當作
   卡片標題，底下再列出6個角色各自的核取方塊（label:checkbox），不需要橫向捲動就能操作。 */
@media (max-width: 600px) {
    #function-permission-module .fp-table,
    #function-permission-module .fp-table thead,
    #function-permission-module .fp-table tbody,
    #function-permission-module .fp-table tr,
    #function-permission-module .fp-table th,
    #function-permission-module .fp-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    #function-permission-module .fp-table {
        min-width: 0;
    }

    #function-permission-module .fp-table thead {
        display: none;
    }

    #function-permission-module .fp-table tbody {
        padding: 4px 0;
    }

    #function-permission-module .fp-table tr {
        margin-bottom: 10px;
        padding: 10px 12px 6px;
        border: 1px solid #d9e1e7;
        border-radius: 8px;
        background: #fff;
    }

    #function-permission-module .fp-table .fp-group-tr {
        background: #fff;
    }

    #function-permission-module .fp-table .fp-item-col {
        position: static;
        box-shadow: none;
        text-align: left;
        padding: 0 0 8px;
        margin-bottom: 6px;
        border-bottom: 1px solid #e8edf0;
        background: transparent !important;
        font-weight: 700;
        color: var(--brand-accent);
        font-size: var(--fs-base);
    }

    #function-permission-module .fp-table .fp-sub-row {
        padding-left: 0;
    }

    #function-permission-module .fp-table td:not(.fp-item-col) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 0;
        text-align: right;
        font-size: var(--fs-md);
    }

    #function-permission-module .fp-table td:not(.fp-item-col):before {
        content: attr(data-label);
        color: var(--text-4);
        font-size: var(--fs-xs);
        text-align: left;
    }

    #function-permission-module .fp-table .analysis-fixed-control {
        margin: 0;
    }
}

.role-management-toolbar,
.table-toolbar-end {
    justify-content: flex-end;
}

.user-edit-modal-card {
    width: min(820px, 96vw);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}

.user-edit-modal-card #user-edit-form {
    overflow-y: auto;
}

.form-section {
    padding: 4px 26px 16px;
    border-bottom: 1px solid #eef1f3;
}

.form-section:last-of-type {
    border-bottom: 0;
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 16px 0 2px;
    color: var(--brand);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: .02em;
}

.form-section-title i {
    color: var(--brand-accent);
    font-size: var(--fs-sm);
}

.form-section .basic-form-grid {
    padding: 10px 0 0;
}

.form-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.org-combo-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
}

.org-combo-row .org-combo {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
}

.org-combo-row .org-code-display {
    flex: 0 0 130px;
    margin-top: 0 !important;
    padding: 9px 11px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    height: 38px;
}

.org-combo {
    position: relative;
    display: block;
    margin-top: 6px;
}

.org-combo-input {
    width: 100%;
    margin-top: 0 !important;
    padding: 9px 11px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: 14px "Noto Sans TC", Arial, sans-serif;    
    height: 38px;
}

.org-combo-list {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #cfe0f4;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(22, 48, 64, .18);
}

.org-combo-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid #f0f4f8;
    background: #fff;
    color: var(--text-2);
    font: 13px inherit;
    text-align: left;
    cursor: pointer;
}

.org-combo-option:last-child {
    border-bottom: 0;
}

.org-combo-option:hover {
    background: #eaf2fb;
    color: var(--brand);
}

.org-combo-option span {
    flex: 0 0 auto;
    color: var(--text-4);
    font-size: var(--fs-xs);
    font: 11px Consolas, monospace;
}

.org-combo-empty {
    padding: 10px 12px;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.org-code-display {
    background: #f4f6f8 !important;
    color: var(--text-4) !important;
    cursor: not-allowed;
    font: 12px Consolas, monospace !important;
}

.phone-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.phone-group input {
    margin-top: 0 !important;
    min-width: 0;
}

.phone-group input#user-phone-area-input {
    flex: 0 0 64px;
}

.phone-group input#user-phone-number-input {
    flex: 1 1 auto;
}

.phone-group input#user-phone-ext-input {
    flex: 0 0 64px;
}

.phone-ext-label {
    color: var(--text-4);
    font-size: var(--fs-xs);
    white-space: nowrap;
}

.radio-group {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 10px;
}

.basic-form-grid input[type="radio"] {
    width: auto;
    margin-top: 0;
}

.radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-2);
    font-size: var(--fs-base);
    font-weight: 400;
}

.upload-dropzone {
    margin-top: 6px;
    padding: 22px;
    border: 1.5px dashed #c3d0da;
    border-radius: 8px;
    background: #fafbfc;
    color: var(--text-4);
    text-align: center;
    font-size: var(--fs-sm);
}

#user-management-module .table-card td[data-label="機關"] {
    max-width: calc(200px * var(--fs-scale));
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#user-management-module .table-card .row-actions {
    text-align: center;
}

#user-management-module .table-card thead th:last-child,
#user-management-module .table-card tbody td.row-actions {
    position: sticky;
    right: 0;
    z-index: 1;
}

#user-management-module .table-card thead th:last-child {
    background: #fafbfc;
}

#user-management-module .table-card tbody td.row-actions {
    background: #fff;
    box-shadow: -6px 0 6px -6px rgba(15, 40, 60, .15);
}

#user-management-module .table-card tbody tr:hover td.row-actions {
    background: #eef6fd;
}

#user-management-module .table-card thead th:first-child,
#user-management-module .table-card thead th:last-child {
    text-align: center;
}

#user-management-module .table-card td[data-label="項次"] {
    text-align: center;
}

#user-management-module .search-button-label {
    display: none;
}

.secondary-button-blue {
    border-color: #2a75b4;
    color: var(--brand-accent);
    background: #eaf2fb;
}

.secondary-button-blue:hover {
    background: #dcebf9;
    color: var(--brand);
}

#role-create {
    border-color: #2a75b4 !important;
    background: #2a75b4 !important;
    box-shadow: 0 2px 5px rgba(42, 117, 180, .22);
}

#role-create:hover {
    border-color: #1d568c !important;
    background: #1d568c !important;
}

.role-edit-modal-actions .primary-button {
    border-color: #2a75b4 !important;
    background: #2a75b4 !important;
    box-shadow: 0 2px 5px rgba(42, 117, 180, .22);
}

.role-edit-modal-actions .primary-button:hover {
    border-color: #1d568c !important;
    background: #1d568c !important;
}

#role-management-module .table-card thead th:first-child,
#role-management-module .table-card thead th:last-child {
    text-align: center;
}

#role-management-module .table-card td[data-label="項次"],
#role-management-module .table-card .row-actions {
    text-align: center;
}

#role-management-module .table-card tbody tr:hover,
#role-management-module .table-card tbody tr:hover td,
#function-permission-module .fp-table tbody tr:hover,
#function-permission-module .fp-table tbody tr:hover td,
#user-management-module .table-card tbody tr:hover,
#user-management-module .table-card tbody tr:hover td,
#login-log-module .table-card tbody tr:hover,
#login-log-module .table-card tbody tr:hover td,
#system-announcements-module .table-card tbody tr:hover,
#system-announcements-module .table-card tbody tr:hover td,
#plan-maintenance-module .table-card tbody tr:hover,
#plan-maintenance-module .table-card tbody tr:hover td,
#list-flowchart-module .table-card tbody tr:hover,
#list-flowchart-module .table-card tbody tr:hover td,
#inspection-standard-module .table-card tbody tr:hover,
#inspection-standard-module .table-card tbody tr:hover td,
#inspection-record-module .table-card tbody tr:hover,
#inspection-record-module .table-card tbody tr:hover td,
#org-template-xml-module .table-card tbody tr:hover,
#org-template-xml-module .table-card tbody tr:hover td,
#project-carbon-factor-module .table-card tbody tr:hover,
#project-carbon-factor-module .table-card tbody tr:hover td,
#material-carbon-factor-module .material-factor-card tbody tr:hover,
#material-carbon-factor-module .material-factor-card tbody tr:hover td,
#green-item-module .table-card tbody tr:hover,
#green-item-module .table-card tbody tr:hover td {
    background: #eef6fd;
}

.primary-button.button-blue {
    border-color: #2a75b4 !important;
    background: #2a75b4 !important;
    box-shadow: 0 2px 5px rgba(42, 117, 180, .22);
}

.primary-button.button-blue:hover {
    border-color: #1d568c !important;
    background: #1d568c !important;
}

.download.icon-action {
    border: 1px solid #9bd9b4;
    color: #1e7058;
    background: #f2f9f4;
    margin-right: 7px;
}

/* 分享：改用青綠色。同一列的預覽是藍、下載是綠、刪除是紅，青綠跟它們都分得開。 */
.share.icon-action {
    border: 1px solid #9ad3d8;
    color: #0f7c8a;
    background: #f2fbfc;
    margin-right: 7px;
}

.share.icon-action:hover {
    border-color: #4fb3bf;
    background: #e0f5f7;
    color: #0a616c;
}

.save.icon-action {
    border: 1px solid #f0c088;
    color: #b15f19;
    background: #fff7ee;
    margin-right: 7px;
}

.cancel.icon-action {
    border: 1px solid #cad5de;
    color: var(--text-3);
    background: #f7fafc;
}

.cancel.icon-action:hover {
    background: #eef2f5;
}

.reorder.icon-action {
    border: 1px solid #cbd9e6;
    color: var(--brand-accent);
    background: #f4f8fb;
    margin-right: 7px;
}

.reorder.icon-action:hover {
    background: #e6eff8;
}

.secondary-button-red {
    border-color: #e2929b;
    color: #c1414f;
    background: #fdf1f2;
}

.secondary-button-red:hover {
    background: #fbe3e5;
}

.notice-tabs-card {
    padding: 6px 22px 0;
}

.notice-tabs {
    display: flex;
    align-items: center;
    gap: 26px;
    border-bottom: 1px solid #eef1f3;
}

.notice-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 2px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-4);
    font: 15px "Noto Sans TC", Arial, sans-serif;
    font-weight: 600;
    cursor: pointer;
}

.notice-tab.active {
    color: var(--brand-accent);
    border-bottom-color: #2a75b4;
}

.notice-publish-panel {
    padding-bottom: 22px;
}

.notice-publish-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 22px 0;
}

.notice-import-group {
    margin-left: auto;
}

.notice-title-wrap {
    padding: 6px 22px 0;
}

.notice-title-wrap label {
    display: block;
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.notice-title-wrap input {
    width: 100%;
    margin-top: 6px;
    padding: 9px 11px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: 15px "Noto Sans TC", Arial, sans-serif;
    height: 40px;
}

.notice-editor-wrap {
    padding: 16px 22px 0;
}

.notice-editor-label {
    margin: 4px 0 8px;
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.notice-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border: 1px solid #d9e1e7;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #fafbfc;
}

.notice-editor-btn {
    display: inline-grid;
    place-items: center;
    width: calc(30px * var(--fs-scale));
    height: calc(30px * var(--fs-scale));
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    font-size: var(--fs-sm);
}

.notice-editor-btn:hover {
    border-color: #cfe0f4;
    background: #eaf2fb;
    color: var(--brand);
}

.notice-editor-sep {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: #e2e8ee;
}

.notice-editor-color {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    color: var(--text-2);
    font-size: var(--fs-xs);
    cursor: pointer;
}

.notice-editor-color input[type="color"] {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid #d9e1e7;
    border-radius: 4px;
    background: none;
    cursor: pointer;
}

.notice-editor-select {
    height: 30px;
    padding: 0 6px;
    border: 1px solid #d9e1e7;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font-size: var(--fs-xs);
}

.notice-editor-body {
    min-height: 320px;
    padding: 16px 18px;
    border: 1px solid #d9e1e7;
    border-radius: 0 0 8px 8px;
    background: #fff;
    color: var(--text-2);
    font: 14px "Noto Sans TC", Arial, sans-serif;
    line-height: 1.7;
    overflow-y: auto;
}

.notice-editor-body:focus {
    outline: none;
    border-color: #8fbde6;
}

.notice-editor-body:empty:before {
    content: attr(data-placeholder);
    color: var(--text-4);
}

.notice-editor-body img {
    max-width: 100%;
}

.notice-content-table,
.notice-editor-body table {
    border-collapse: collapse;
    margin: 8px 0;
}

.notice-content-table td,
.notice-editor-body table td {
    min-width: 60px;
    height: 30px;
    padding: 6px 10px;
    border: 1px solid #d9e1e7;
}

.notice-publish-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 22px 4px;
}

.notice-preview-modal-card {
    width: min(720px, 96vw);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}

.notice-preview-body {
    padding: 22px;
    overflow-y: auto;
}

.notice-preview-title {
    margin: 0 0 8px;
    color: var(--brand);
    font-size: var(--fs-2xl);
}

.notice-preview-meta {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef1f3;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.notice-preview-content {
    color: var(--text-2);
    font-size: var(--fs-base);
    line-height: 1.8;
}

.notice-preview-empty {
    color: var(--text-4);
}

#system-announcements-module .table-card thead th:first-child,
#system-announcements-module .table-card thead th:last-child {
    text-align: center;
}

#system-announcements-module .table-card td[data-label="項次"],
#system-announcements-module .table-card .row-actions {
    text-align: center;
}

.pill-action-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: none;
    font-size: var(--fs-xs);
    cursor: pointer;
    margin-right: 6px;
}

.pill-action-button:last-child {
    margin-right: 0;
}

.pill-action-blue {
    border-color: #9cc3ef;
    color: var(--brand-accent);
    background: #f5faff;
}

.pill-action-blue:hover {
    background: #eaf2fb;
}

.pill-action-green {
    border-color: #9bd9b4;
    color: #1e7058;
    background: #f2f9f4;
}

.pill-action-green:hover {
    background: #e5f3ea;
}

.flowchart-editor-modal-card {
    width: min(1200px, 96vw);
    height: min(760px, 92vh);
    display: flex;
    flex-direction: column;
}

.flowchart-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid #eef1f3;
    flex-wrap: wrap;
}

.flowchart-editor-toolbar>div {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.flowchart-editor-body {
    flex: 1;
    display: flex;
    min-height: 0;
    border-bottom: 1px solid #eef1f3;
}

.flowchart-palette {
    width: 130px;
    flex: 0 0 130px;
    border-right: 1px solid #dce8ef;
    background: #fafbfc;
}

.flowchart-diagram {
    flex: 1;
    min-width: 0;
    background: #fff;
}

.record-view-modal-card {
    width: min(880px, 96vw);
    height: min(860px, 92vh);
    display: flex;
    flex-direction: column;
}

.record-view-frame-wrap {
    flex: 1;
    min-height: 0;
    padding: 0 22px 20px;
}

.record-view-frame-wrap iframe {
    width: 100%;
    height: 100%;
    border: 1px solid #dce8ef;
    border-radius: 8px;
    background: #f4f6f8;
}

.modal-meta-line {
    padding: 16px 22px 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
    line-height: 1.8;
}

.modal-meta-line b {
    color: var(--text-2);
}

.kv-summary {
    display: grid;
    grid-template-columns: calc(96px * var(--fs-scale)) 1fr;
    row-gap: 8px;
    column-gap: 10px;
    margin: 4px 0 0;
    padding: 14px 22px 20px;
    font-size: var(--fs-sm);
}

.kv-summary dt {
    color: var(--text-4);
    font-weight: 600;
}

.kv-summary dd {
    margin: 0;
    color: var(--text-1);
    word-break: break-all;
}

.plan-org-card {
    padding: 0;
}

.plan-category-block+.plan-category-block {
    border-top: 8px solid #f2f5f8;
}

.info-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 22px 0;
    padding: 10px 14px;
    border: 1px solid #bfe0f5;
    border-left: 4px solid #2a86c9;
    border-radius: 8px;
    background: #eef7fd;
    color: var(--brand);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.info-hint i {
    margin-top: 2px;
    color: var(--brand-accent);
    font-size: var(--fs-base);
}

.info-hint.info-hint-muted {
    border-color: #ecdfb3;
    border-left-color: #c99a2e;
    background: #fdf8ec;
    color: #7a5c1e;
}

.info-hint.info-hint-muted i {
    color: #916f21;
}

#plan-maintenance-module .search-button-label,
#org-template-xml-module .search-button-label,
#exception-report-handling-module .search-button-label,
#project-carbon-factor-module .search-button-label,
#material-carbon-factor-module .search-button-label,
#green-item-module .search-button-label {
    display: none;
}

#exception-report-handling-module .table-card tbody tr:hover,
#exception-report-handling-module .table-card tbody tr:hover td {
    background: #f3f8fd;
}

#exception-report-handling-module .table-card td[data-label="問題描述"] {
    max-width: calc(260px * var(--fs-scale));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.pagination[hidden] {
    display: none;
}

#plan-maintenance-module .table-card thead th:last-child {
    text-align: center;
}

#plan-maintenance-module .table-card .row-actions {
    text-align: center;
}

#plan-maintenance-module .table-card table {
    table-layout: fixed;
}

#plan-maintenance-module .table-card thead th:nth-child(2),
#plan-maintenance-module .table-card tbody td:nth-child(2) {
    width: 160px;
}

#plan-maintenance-module .table-card thead th:nth-child(3),
#plan-maintenance-module .table-card tbody td:nth-child(3) {
    width: 190px;
}

#list-flowchart-module .table-card thead th:first-child,
#list-flowchart-module .table-card thead th:nth-last-child(-n+2) {
    text-align: center;
}

#list-flowchart-module .table-card td[data-label="排序"],
#list-flowchart-module .table-card .row-actions {
    text-align: center;
}

#inspection-standard-module .table-card thead th:first-child,
#inspection-standard-module .table-card thead th:last-child {
    text-align: center;
}

#inspection-standard-module .table-card thead th {
    white-space: nowrap;
    padding: 0 8px;
    font-size: var(--fs-xs);
    letter-spacing: -0.2px;
}

#inspection-standard-module .table-card td[data-label="順序"],
#inspection-standard-module .table-card .row-actions {
    text-align: center;
}

#inspection-standard-module .table-card tr.is-editing-row td {
    vertical-align: top;
    padding-top: 8px;
    padding-bottom: 8px;
}

#inspection-standard-module .table-card tr.is-editing-row textarea {
    width: 100%;
    min-width: 120px;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: 13px "Noto Sans TC", inherit;
    resize: vertical;
}

#inspection-record-module .table-card thead th:first-child,
#inspection-record-module .table-card thead th:last-child {
    text-align: center;
}

#inspection-record-module .table-card td[data-label="排序"],
#inspection-record-module .table-card .row-actions {
    text-align: center;
}

#org-template-xml-module .table-card thead th:first-child,
#org-template-xml-module .table-card thead th:last-child {
    text-align: center;
}

#org-template-xml-module .table-card td[data-label="項次"],
#org-template-xml-module .table-card .row-actions {
    text-align: center;
}

#org-template-xml-module .xml-upload-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#org-template-xml-module .xml-upload-target {
    margin: 0;
}

#org-template-xml-module .xml-upload-target b {
    color: var(--brand-accent);
}

#org-template-xml-module .xml-upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 108px;
    margin-top: 0;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

#org-template-xml-module .xml-upload-dropzone .upload-icon {
    font-size: 26px;
    color: var(--brand-accent);
}

#org-template-xml-module .xml-upload-dropzone strong {
    color: var(--text-1);
    font-size: var(--fs-base);
    font-weight: 600;
}

#org-template-xml-module .xml-upload-dropzone small {
    color: var(--brand-accent);
    font-size: var(--fs-xs);
}

#org-template-xml-module .xml-upload-dropzone.is-dragover {
    border-color: #2872b5;
    background: #eef6fd;
}

#org-template-xml-module .xml-upload-dropzone.is-disabled {
    cursor: not-allowed;
    opacity: .55;
}

#exception-report-modal {
    overflow-y: auto;
    align-items: flex-start;
    justify-items: center;
    padding: 24px 20px;
}

.exception-report-modal-card {
    width: min(760px, 96vw);
    max-height: none;
    display: flex;
    flex-direction: column;
    transition: width .15s ease;
}

.exception-report-modal-card.is-progress-view {
    width: min(980px, 96vw);
}

.exception-report-panel {
    padding: 18px 22px 4px;
    overflow-y: visible;
}

.exception-report-panel .modal-meta-line {
    padding: 0;
    margin-bottom: 10px;
}

.exception-report-panel .kv-summary {
    margin-bottom: 18px;
    padding: 12px 14px;
    background: #f7fafc;
    border: 1px solid #e8edf0;
    border-radius: 8px;
}

.exception-report-panel .basic-form-grid {
    padding: 0;
}

.exception-report-panel .table-wrap {
    padding: 0;
    overflow-x: visible;
}

.exception-report-panel .table-wrap table {
    table-layout: fixed;
    width: 100%;
}

.exception-report-panel .table-wrap th,
.exception-report-panel .table-wrap td {
    white-space: normal;
    word-break: break-word;
}

.exception-report-panel .table-wrap th:nth-child(1),
.exception-report-panel .table-wrap td:nth-child(1) {
    width: 12%;
}

.exception-report-panel .table-wrap th:nth-child(2),
.exception-report-panel .table-wrap td:nth-child(2) {
    width: 15%;
}

.exception-report-panel .table-wrap th:nth-child(3),
.exception-report-panel .table-wrap td:nth-child(3) {
    width: 11%;
}

.exception-report-panel .table-wrap th:nth-child(4),
.exception-report-panel .table-wrap td:nth-child(4) {
    width: 48%;
}

.exception-report-panel .table-wrap th:nth-child(5),
.exception-report-panel .table-wrap td:nth-child(5) {
    width: 14%;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

.status-pill.status-pending {
    background: #fff7ee;
    color: #b15f19;
    border: 1px solid #f0c088;
}

.status-pill.status-completed {
    background: #edf5f0;
    color: #1e7058;
    border: 1px solid #9bd9b4;
}

@media (max-width: 760px) {
    .code-rate-modal {
    padding: 10px;
}

    .code-rate-card {
    width: 100%;
    max-height: calc(100vh - 20px);
}

    .code-rate-header,
        .code-rate-content,
        .code-rate-actions {
    padding-left: 13px;
    padding-right: 13px;
}

    .code-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

    .code-score-card:first-child {
    grid-column: 1 / -1;
}

    .code-score-card strong {
    font-size: var(--fs-2xl);
}

    

    .code-error-table,
        .code-error-table tbody,
        .code-error-table tr,
        .code-error-table th,
        .code-error-table td {
    display: block;
}

    .code-error-table thead {
    display: none;
}

    .code-error-table tbody {
    display: grid;
    gap: 8px;
    padding: 8px;
}

    .code-error-table tr {
    padding: 8px;
    border: 1px solid #dce8ef;
    border-radius: 7px;
}

    .code-error-table td {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border: 0;
    text-align: right;
}

    .code-error-table td::before {
    color: var(--text-4);
    content: attr(data-label);
    font-size: var(--fs-xs);
    text-align: left;
}

    .code-error-table td:nth-child(1)::before {
    content: '工項代碼';
}

    .code-error-table td:nth-child(2)::before {
    content: '項目名稱';
}

    .code-error-table td:nth-child(3)::before {
    content: '錯誤說明';
}

    .code-error-table td:nth-child(4)::before {
    content: '操作';
}

    .code-error-table th:last-child,
        .code-error-table td:last-child {
    width: auto;
    text-align: right;
}

}

@media (max-width: 680px) {
    #login-log-module .log-search-form {
    align-items: stretch;
}

}

@media (max-width: 900px) {
    .form-grid-4 {
    grid-template-columns: 1fr 1fr;
}

}

@media (max-width: 720px) {
    .form-grid-3 {
    grid-template-columns: 1fr 1fr;
}

    .notice-import-group {
    margin-left: 0;
    width: 100%;
}

    #plan-maintenance-module .table-card thead th:nth-child(2),
        #plan-maintenance-module .table-card tbody td:nth-child(2),
        #plan-maintenance-module .table-card thead th:nth-child(3),
        #plan-maintenance-module .table-card tbody td:nth-child(3) {
    width: auto;
}

}

@media (max-width: 480px) {
    .form-grid-3,
        .form-grid-4 {
    grid-template-columns: 1fr;
}

}

@media (max-width: 600px) {
    #user-management-module .table-card td[data-label="機關"] {
    max-width: none;
    white-space: normal;
}

    #user-management-module .table-card thead th:last-child,
        #user-management-module .table-card tbody td.row-actions {
    position: static;
    box-shadow: none;
}

}

/* ---- 修正：custom_0805.css 有一條未限定範圍的全站規則會隱藏 .table-card 表格第7欄， */
/* 這裡針對受保護選單的表格強制還原顯示，避免功能欄（含操作按鈕）被誤藏。 ---- */

#user-management-module .table-card table th:nth-child(7),
#role-management-module .table-card table th:nth-child(7),
#function-permission-module .table-card table th:nth-child(7),
#org-template-xml-module .table-card table th:nth-child(7),
#plan-maintenance-module .table-card table th:nth-child(7),
#list-flowchart-module .table-card table th:nth-child(7),
#inspection-standard-module .table-card table th:nth-child(7),
#inspection-record-module .table-card table th:nth-child(7),
#login-log-module .table-card table th:nth-child(7),
#system-announcements-module .table-card table th:nth-child(7),
#exception-report-handling-module .table-card table th:nth-child(7),
#account-log-module .table-card table th:nth-child(7),
#budget-module .table-card table th:nth-child(7),
#user-management-module .table-card table td:nth-child(7),
#role-management-module .table-card table td:nth-child(7),
#function-permission-module .table-card table td:nth-child(7),
#org-template-xml-module .table-card table td:nth-child(7),
#plan-maintenance-module .table-card table td:nth-child(7),
#list-flowchart-module .table-card table td:nth-child(7),
#inspection-standard-module .table-card table td:nth-child(7),
#inspection-record-module .table-card table td:nth-child(7),
#login-log-module .table-card table td:nth-child(7),
#system-announcements-module .table-card table td:nth-child(7),
#exception-report-handling-module .table-card table td:nth-child(7),
#account-log-module .table-card table td:nth-child(7),
#budget-module .table-card table td:nth-child(7) {
    display: table-cell !important;
}

/* ⚠ 本專案加的（demo 沒有）：#account-log-module 的第 7 欄是「異動內容」，
   demo 漏了把它加進上面這張還原清單，整欄會被檔頭那條全站規則藏起來。
   ⚠ 每次從 demo 同步 custom.css 都要重新補。 */

/* 預算編製列表（#budget-module 同時被 budget.html、contract.html、carbon-estimation.html
   使用）：欄位為 項次/工程編號/工程名稱/
   機關/預算金額/狀態/建立日期/功能 共8欄，第7欄「建立日期」同樣會被上面全站規則誤藏，這裡一併還原。 */

/* ========================================================================= */
/* 工程細目編碼維護：左側樹狀結構 + 右側詳情面板（2026/08/05 新建） */
/* ========================================================================= */
#project-item-code-module {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.code-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.code-page-breadcrumb {
    color: var(--text-4);
    font-size: var(--fs-sm);
}

.code-page-breadcrumb i {
    margin: 0 4px;
    font-size: var(--fs-xs);
}

.code-page-actions {
    display: flex;
    gap: 8px;
}

.code-maintenance-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 16px;
    align-items: start;
}

.code-tree-card {
    display: flex;
    flex-direction: column;
    padding: 14px;
    max-height: calc(100vh - 190px);
    min-height: 420px;
}

.code-tree-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.code-tree-header h3 {
    margin: 0;
    color: var(--brand);
    font-size: var(--fs-base);
}

.code-tree-header h3 i {
    margin-right: 6px;
    color: var(--brand-accent);
}

.code-tree-add-outline {
    display: inline-grid;
    place-items: center;
    width: calc(30px * var(--fs-scale));
    height: calc(30px * var(--fs-scale));
    border: 1px solid #9cc3ef;
    border-radius: 6px;
    background: #f5faff;
    color: var(--brand-accent);
    font-size: var(--fs-lg);
    cursor: pointer;
    line-height: 1;
    transition: background .15s ease;
}

.code-tree-add-outline:hover {
    background: #e4f0fd;
}

.code-tree-search {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.code-tree-search input {
    flex: 1;
    height: 38px;
    padding: 9px 11px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: 14px "Noto Sans TC", inherit;
}

.code-tree-search button {
    width: 38px;
    height: 38px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #fff;
    color: var(--text-3);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.code-tree-search button:hover {
    background: #f3f8fd;
    color: var(--brand);
    border-color: #9cc3ef;
}

.code-tree-scroll {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

.code-tree-empty {
    padding: 24px 8px;
    color: var(--text-4);
    font-size: var(--fs-sm);
    text-align: center;
}

.code-tree-node {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 6px 6px 4px;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--text-2);
}

.code-tree-node:hover {
    background: #f3f8fd;
}

.code-tree-node.is-selected {
    background: #e8f1fb;
    color: var(--brand);
    font-weight: 700;
}

.code-tree-node-outline {
    font-weight: 700;
}

.code-tree-toggle {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--text-4);
    cursor: pointer;
    padding: 0;
    transition: background .15s ease, color .15s ease;
}

.code-tree-toggle:hover {
    background: #dceaf7;
    color: var(--brand);
}

.code-tree-spacer {
    width: 16px;
    flex: 0 0 16px;
}

.code-tree-icon {
    flex: 0 0 auto;
    color: var(--brand-accent);
    font-size: var(--fs-xs);
}

.code-tree-node.is-selected .code-tree-icon {
    color: var(--brand);
}

.code-tree-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-tree-count {
    flex: 0 0 auto;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.code-tree-children {
    margin-left: 20px;
    border-left: 1px dashed #dce8ef;
    padding-left: 4px;
}

.code-tree-node-leaf {
    font-size: var(--fs-sm);
    color: var(--text-3);
}

.code-detail-card {
    padding: 18px 20px 22px;
    min-height: 420px;
}

.code-detail-position {
    color: var(--text-4);
    font-size: var(--fs-sm);
    margin-bottom: 14px;
}

.code-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    color: var(--text-4);
    text-align: center;
}

.code-detail-empty i {
    font-size: 32px;
    color: var(--text-4);
}

.code-detail-section {
    margin-bottom: 26px;
}

.code-detail-section:last-child {
    margin-bottom: 0;
}

.code-detail-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.code-detail-section-heading h3 {
    margin: 0;
    color: var(--brand);
    font-size: var(--fs-base);
}

.code-category-form {
    padding: 0;
    grid-template-columns: repeat(4, 1fr);
}

.code-category-form input:disabled {
    background: #f4f7f9;
    color: var(--text-3);
}

#project-item-code-module tr.is-highlighted-row td {
    background: #fff7ee;
}

@media (max-width: 960px) {
    .code-maintenance-layout {
        grid-template-columns: 1fr;
    }

    .code-tree-card {
        max-height: 320px;
        min-height: 220px;
    }

    .code-category-form {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 手機版：.code-category-form 原本從 4 欄→2 欄就沒有再往下收合了，較窄的手機螢幕下
   兩欄仍會太擠（跟 .basic-form-grid 原本在 680px 以下收合成單欄的設計不一致），
   這裡補上單欄斷點。 */
@media (max-width: 640px) {
    .code-category-form {
        grid-template-columns: 1fr;
    }
}

/* ---- 2026/08/05 追加：可點擊列、總覽表、新增彈窗下拉選單提示 ---- */
.code-modal-hint {
    margin: -8px 0 0;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

#project-item-code-module .code-detail-card table tbody tr.is-row-clickable {
    cursor: pointer;
}

#project-item-code-module .code-detail-card table tbody tr.is-row-clickable:hover td {
    background: #f3f8fd;
}

.code-overview-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.code-overview-cell span {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.code-overview-empty-hint {
    color: var(--text-4);
    font-size: var(--fs-xs);
    margin: 0 0 10px;
}

/* ========================================================================= */
/* 材料、機具、燃料碳係數維護：頁籤 + 維護表格（2026/08/05 新建） */
/* ========================================================================= */
.material-factor-tabs {
    display: inline-flex;
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid #d5e1ef;
    border-radius: 8px;
    background: #fff;
}

.material-factor-tabs button {
    min-height: 38px;
    padding: 0 22px;
    border: 0;
    border-right: 1px solid #d5e1ef;
    color: var(--brand-accent);
    background: #fff;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.material-factor-tabs button:last-child { border-right: 0; }
.material-factor-tabs button:hover { background: #edf5ff; }
.material-factor-tabs button.is-active { color: #fff; background: #286fae; }

/* 手機版：頁籤改滿版平均分配寬度，避免 inline-flex 內容超出畫面寬度造成頁面橫向捲動。 */
@media (max-width: 760px) {
    .material-factor-tabs {
        display: flex;
        width: 100%;
    }

    .material-factor-tabs button {
        flex: 1;
        padding: 0 6px;
        font-size: var(--fs-sm);
    }
}

.material-factor-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 16px 17px 0;
    color: var(--brand);
    font-size: var(--fs-lg);
}

.material-factor-bar {
    display: inline-block;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: #1d568c;
}

.material-factor-toolbar {
    flex-wrap: nowrap;
    gap: 12px;
}

.material-factor-search-form {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.material-factor-search-form label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-3);
    font-size: var(--fs-sm);
    flex: 1 1 auto;
    min-width: 0;
}

.material-factor-search-form label span {
    flex: 0 0 auto;
    white-space: nowrap;
}

.material-factor-search-form input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 36px;
    padding: 0 11px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: inherit;
}

.material-factor-search-form .form-actions {
    flex: 0 0 auto;
}

.material-factor-toolbar-right {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.material-factor-count-line {
    padding: 10px 17px 12px;
    color: var(--text-3);
    font-size: var(--fs-sm);
}

/* 手機版：搜尋列（關鍵字＋重設／查詢）維持同一排、變寬撐滿；下方的匯入／下載／新增
   按鈕另起一排，且只顯示 icon、不顯示文字，避免長文字換行把版面撐亂。 */
@media (max-width: 760px) {
    .material-factor-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .material-factor-search-form {
        width: 100%;
    }

    .material-factor-toolbar-right {
        width: 100%;
        flex-wrap: wrap;
        margin-left: 0;
    }

    .material-factor-toolbar-right button {
        flex: 1 1 auto;
        justify-content: center;
        padding: 0 8px;
        font-size: 0;
    }

    .material-factor-toolbar-right button .button-icon {
        margin-right: 0;
        font-size: var(--fs-base);
    }
}

/* 「功能」欄固定寬度已改由後面的 table-layout:fixed 統一設定（每欄固定百分比寬度），此處規則移除。 */

/* ========================================================================= */
/* 工項碳排係數維護：查詢列單排 / 匯入 / 碳分析按鈕（2026/08/05 新建） */
/* 這個查詢列欄位較多（機關/年度/工項編碼/工項名稱/操作），改用 flex-wrap 取代原本的
   CSS Grid minmax 寫法：每個欄位都有保底寬度（min-width），畫面較窄時會自動換行，
   不會像 minmax 那樣被其他欄位（尤其是機關的下拉搜尋框）擠壓到快看不見。 */
/* ========================================================================= */
#project-carbon-factor-module .search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 18px;
}

#project-carbon-factor-module .search-form > label {
    flex: 1 1 220px;
    min-width: 190px;
}

#project-carbon-factor-module .search-form > label:first-child {
    flex: 1.6 1 260px;
    min-width: 240px;
}

#project-carbon-factor-module .search-form .form-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

@media (max-width: 640px) {
    #project-carbon-factor-module .search-form > label,
    #project-carbon-factor-module .search-form > label:first-child {
        flex: 1 1 100%;
        min-width: 0;
    }

    #project-carbon-factor-module .search-form .form-actions {
        flex: 1 1 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
}

/* ========================================================================= */
/* 使用者管理：查詢列新增「機關」關鍵字下拉欄位（2026/08/07 新建）。原本 .search-form
   是固定 4 欄的 CSS Grid（見 css/styles.css），欄位變多後改用 flex-wrap，比照
   #project-carbon-factor-module 的作法，讓機關下拉搜尋框有足夠寬度不被擠壓。 */
/* ========================================================================= */
#user-management-module .search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 18px;
}

#user-management-module .search-form > label {
    flex: 1 1 200px;
    min-width: 180px;
}

#user-management-module .search-form > label:nth-child(2) {
    flex: 1.4 1 260px;
    min-width: 240px;
}

#user-management-module .search-form .form-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

@media (max-width: 640px) {
    #user-management-module .search-form > label,
    #user-management-module .search-form > label:nth-child(2) {
        flex: 1 1 100%;
        min-width: 0;
    }

    #user-management-module .search-form .form-actions {
        flex: 1 1 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
}

/* 新增／編輯人員彈窗：「會員類別與機關」區塊移至最上方後，細分類別選項中有較長的文字
   （例：不使用公務信箱註冊帳號的公部門人員），原本 3 欄等寬的 form-grid-3 太窄會被截斷，
   這裡把第 2 欄（細分類別）加寬，第 1 欄（會員類別）維持原寬，第 3 欄本來就沒有內容
   （機關欄位是 .basic-form-full 自己獨立換行）。 */
#user-edit-modal .member-category-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1fr);
}

/* 手機版：全站通用規則（.row-actions .icon-action）在手機版會把按鈕加寬並透過 :after
   顯示 aria-label 文字（例如「編輯」「刪除」），這是多數舊頁面的預設行為。但「工項資料庫模組」
   這 4 個頁面（工程細目編碼維護／工項碳排係數維護／材料機具燃料碳係數維護／綠色工項維護）
   使用者希望手機版統一維持單純 icon、不要出現文字，這裡整組覆寫回單純 icon 按鈕。 */
@media (max-width: 600px) {
    #project-item-code-module .table-card .row-actions,
    #project-carbon-factor-module .table-card .row-actions,
    #material-carbon-factor-module .table-card .row-actions,
    #green-item-module .table-card .row-actions,
    #budget-module .table-card .row-actions {
        justify-content: flex-end;
        gap: 6px;
    }

    #project-item-code-module .table-card .row-actions .icon-action,
    #project-carbon-factor-module .table-card .row-actions .icon-action,
    #material-carbon-factor-module .table-card .row-actions .icon-action,
    #green-item-module .table-card .row-actions .icon-action,
    #budget-module .table-card .row-actions .icon-action {
        min-width: 30px;
        width: 30px;
        padding: 0;
    }

    #project-item-code-module .table-card .row-actions .icon-action:after,
    #project-carbon-factor-module .table-card .row-actions .icon-action:after,
    #material-carbon-factor-module .table-card .row-actions .icon-action:after,
    #green-item-module .table-card .row-actions .icon-action:after,
    #budget-module .table-card .row-actions .icon-action:after {
        content: '';
        margin: 0;
    }

    /* budget.html／contract.html（同一個 #budget-module）：「功能」欄除了編輯／刪除
       icon 按鈕，還有一個帶文字的
       .project-transfer-button（轉入／已轉入），維持顯示文字不強制 icon-only，
       但仍需要 gap 與靠右對齊，避免跟編輯／刪除擠在一起時換行错位。 */
    #budget-module .table-card .row-actions .project-transfer-button {
        min-height: 30px;
        white-space: nowrap;
    }

    /* 保險加強：這幾個模組的「功能」欄手機版一律要靠右，用 !important 排除任何可能還沒
       抓到的其他規則干擾，確保 justify-content 一定生效，不會退回瀏覽器預設的靠左排列。 */
    #project-item-code-module .table-card td.row-actions,
    #project-carbon-factor-module .table-card td.row-actions,
    #material-carbon-factor-module .table-card td.row-actions,
    #green-item-module .table-card td.row-actions,
    #user-management-module .table-card td.row-actions,
    #exception-report-handling-module .table-card td.row-actions,
    #budget-module .table-card td.row-actions {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    #project-item-code-module .table-card td.row-actions:before,
    #project-carbon-factor-module .table-card td.row-actions:before,
    #material-carbon-factor-module .table-card td.row-actions:before,
    #green-item-module .table-card td.row-actions:before,
    #user-management-module .table-card td.row-actions:before,
    #budget-module .table-card td.row-actions:before,
    #exception-report-handling-module .table-card td.row-actions:before {
        margin-right: auto !important;
    }
}

.carbon-factor-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.carbon-factor-update-date {
    padding: 0 17px 10px;
    text-align: right;
    color: var(--text-4);
    font-size: var(--fs-sm);
}

.analyze.icon-action {
    border: 1px solid #cdbcee;
    color: var(--brand-accent);
    background: #f6f1fd;
    margin-right: 7px;
}

.analyze.icon-action:hover { background: #ece0fa; }

/* 碳分析彈窗：比預設 .carbon-modal-card 寬一些，讓工料挑選表格更好閱讀（僅此頁的彈窗，不影響 budget_edit.html 既有彈窗）。 */
#carbon-analysis-modal .carbon-modal-card {
    width: min(1120px, 96vw);
}

/* 碳分析彈窗的工料挑選表格：省略獨立 ID/類別欄，名稱及規格合併呈現（類別以小標籤顯示於名稱下方），
   欄數與共用 .carbon-material-table（budget_edit.html 用）不同，故以 #carbon-analysis-modal 範圍覆寫寬度。 */
#carbon-analysis-modal .carbon-material-table th:nth-child(1) {
    width: 44%;
}

#carbon-analysis-modal .carbon-material-table th:nth-child(2) {
    width: 16%;
}

#carbon-analysis-modal .carbon-material-table th:nth-child(3) {
    width: 13%;
}

#carbon-analysis-modal .carbon-material-table th:nth-child(4) {
    width: 21%;
}

#carbon-analysis-modal .carbon-material-table th:last-child {
    width: 6%;
}

.carbon-picker-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.carbon-picker-name b {
    font-weight: 600;
}

.carbon-picker-name span {
    color: var(--brand-accent);
    font-size: var(--fs-xs);
    font-weight: 500;
}

/* 手機版卡片化表格（.carbon-material-table 在 640px 以下會轉成一列一卡片，用 nth-child 假標籤取代表頭）：
   共用規則是照 budget_edit.html 的 7 欄（ID/類別/名稱/碳排量/單位/備註/加入）配置假標籤，
   但此彈窗（#carbon-analysis-modal）欄位已精簡為 5 欄（名稱及規格/碳排量/單位/備註/加入），
   nth-child 對應會錯位，需在同一斷點內以 #carbon-analysis-modal 範圍覆寫回正確的假標籤。 */
@media (max-width: 640px) {
    #carbon-analysis-modal .carbon-material-table tbody td:nth-child(1)::before {
        content: '';
        display: none;
    }

    #carbon-analysis-modal .carbon-material-table tbody td:nth-child(1) {
        grid-template-columns: 1fr;
        text-align: left;
    }

    #carbon-analysis-modal .carbon-material-table tbody td:nth-child(2)::before {
        content: '單位碳排量';
    }

    #carbon-analysis-modal .carbon-material-table tbody td:nth-child(3)::before {
        content: '單位';
    }

    #carbon-analysis-modal .carbon-material-table tbody td:nth-child(4)::before {
        content: '備註(參考來源)';
    }

    #carbon-analysis-modal .carbon-material-table tbody td:nth-child(5)::before {
        content: '';
    }
}

/* 表格內直接編輯（inline edit）的輸入框樣式統一：比照既有 #inspection-standard-module 的寫法。 */
tr.is-editing-row td {
    vertical-align: middle;
    padding-top: 8px;
    padding-bottom: 8px;
}

tr.is-editing-row input,
tr.is-editing-row select,
tr.is-editing-row textarea {
    width: 100%;
    min-width: 64px;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: 13px "Noto Sans TC", inherit;
}

/* ========================================================================= */
/* 真正的根本原因找到了：檔案最前面（第13-16行）有一條「全站通用、沒有限定模組」的舊規則：

     .table-card table th:nth-child(7),
     .table-card table td:nth-child(7) { display: none; }

   這條規則會把「任何有 .table-card 的表格」的第7欄整個隱藏（原本應該是給某個舊頁面
   隱藏內部用的欄位，但沒有限定只套用在那個頁面，變成全站任何7欄表格都會受影響）。
   material-carbon-factor-module、green-item-module 的表格剛好是7欄，「功能」正好是
   第7欄，所以編輯/刪除按鈕連同標題文字整個被 display:none 蓋掉——不是變窄、不是被
   捲動擋住，是直接被隱藏，這也是使用者手動多加一欄測試後「功能」欄反而正常顯示的
   原因（多一欄後「功能」變成第8欄，不再被這條規則命中）。
   project-carbon-factor-module 雖然「功能」是第8欄沒事，但第7欄「備註」其實也被
   這條規則誤隱藏了，只是没那麼顯眼没被特別提出來。
   這裡針對這3個模組個別覆寫回來，不去動原本那條全站規則（避免影響其他不明的舊頁面）。 */
#project-carbon-factor-module .table-card table th:nth-child(7),
#project-carbon-factor-module .table-card table td:nth-child(7),
#material-carbon-factor-module .table-card table th:nth-child(7),
#material-carbon-factor-module .table-card table td:nth-child(7),
#green-item-module .table-card table th:nth-child(7),
#green-item-module .table-card table td:nth-child(7) {
    display: table-cell;
}
/* ========================================================================= */

/* ========================================================================= */
/* 搭配上面的修正：table-layout:auto 底下，瀏覽器會依「內容的自然寬度」決定每欄寬度 ——
   編輯列的 input/select 或較長的文字內容，可能把表格總寬度撐到超出可視範圍，
   導致最右邊的「功能」欄（編輯/刪除等按鈕）被推到畫面外，需要橫向捲動才看得到。
   改用 table-layout:fixed 搭配每欄固定百分比寬度，欄寬不再受內容影響。

   另外全站 table { min-width: 930px }（styles.css）這 3 個新頁面欄位其實不需要
   這麼寬，這裡個別覆寫成較窄的 min-width，讓表格盡量整個顯示在畫面內、不需要
   靠橫向捲動才看得到「功能」欄。 */
/* ========================================================================= */
#project-carbon-factor-module .table-wrap table {
    table-layout: fixed;
    min-width: 820px;
}

#project-carbon-factor-module .table-wrap table th:nth-child(1),
#project-carbon-factor-module .table-wrap table td:nth-child(1) { width: 6%; }
#project-carbon-factor-module .table-wrap table th:nth-child(2),
#project-carbon-factor-module .table-wrap table td:nth-child(2) { width: 12%; }
#project-carbon-factor-module .table-wrap table th:nth-child(3),
#project-carbon-factor-module .table-wrap table td:nth-child(3) { width: 21%; }
#project-carbon-factor-module .table-wrap table th:nth-child(4),
#project-carbon-factor-module .table-wrap table td:nth-child(4) { width: 12%; }
#project-carbon-factor-module .table-wrap table th:nth-child(5),
#project-carbon-factor-module .table-wrap table td:nth-child(5) { width: 8%; }
#project-carbon-factor-module .table-wrap table th:nth-child(6),
#project-carbon-factor-module .table-wrap table td:nth-child(6) { width: 12%; }
#project-carbon-factor-module .table-wrap table th:nth-child(7),
#project-carbon-factor-module .table-wrap table td:nth-child(7) { width: 15%; }
#project-carbon-factor-module .table-wrap table th:nth-child(8),
#project-carbon-factor-module .table-wrap table td:nth-child(8) { width: 14%; }

/* 綠色工項維護（green-item.html）表格樣式。
   注意：這個頁面的 <section id="green-item-module"> 這個 ID 跟 bulk-material.html（大宗資材維護）
   共用同一個 ID（各自獨立的頁面，ID沒有真的衝突，但選到同一個CSS選擇器），為了不影響
   大宗資材維護頁面既有的表格樣式，這裡额外多加一層 .green-item-page（body class）限定，
   只套用在綠色工項維護這一頁。表格目前是13欄（項次～功能），舊的7欄寬度設定已經跟現在的
   欄位數對不上，這裡重新依實際欄數配置寬度，並加強列距／斑馬紋／字級顏色。 */
.green-item-page #green-item-module .table-wrap table {
    table-layout: fixed;
    min-width: 1200px;
}

.green-item-page #green-item-module .table-wrap table th:nth-child(1),
.green-item-page #green-item-module .table-wrap table td:nth-child(1) { width: 4%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(2),
.green-item-page #green-item-module .table-wrap table td:nth-child(2) { width: 8%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(3),
.green-item-page #green-item-module .table-wrap table td:nth-child(3) { width: 13%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(4),
.green-item-page #green-item-module .table-wrap table td:nth-child(4) { width: 9%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(5),
.green-item-page #green-item-module .table-wrap table td:nth-child(5) { width: 6%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(6),
.green-item-page #green-item-module .table-wrap table td:nth-child(6) { width: 7%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(7),
.green-item-page #green-item-module .table-wrap table td:nth-child(7) { width: 7%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(8),
.green-item-page #green-item-module .table-wrap table td:nth-child(8) { width: 7%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(9),
.green-item-page #green-item-module .table-wrap table td:nth-child(9) { width: 7%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(10),
.green-item-page #green-item-module .table-wrap table td:nth-child(10) { width: 9%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(11),
.green-item-page #green-item-module .table-wrap table td:nth-child(11) { width: 6%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(12),
.green-item-page #green-item-module .table-wrap table td:nth-child(12) { width: 9%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(13),
.green-item-page #green-item-module .table-wrap table td:nth-child(13) { width: 8%; }

.green-item-page #green-item-module .table-wrap table td {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 字級／顏色：標題列文字加深、內容列字級略放大，跟表格其他頁面一致的深藍灰色系。 */
.green-item-page #green-item-module .table-wrap table th {
    height: auto;
    padding: 11px 12px;
    color: var(--text-1);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.green-item-page #green-item-module .table-wrap table td {
    height: auto;
    padding: 11px 12px;
    color: var(--text-2);
    font-size: var(--fs-md);
    line-height: 1.5;
}

/* 斑馬紋：奇偶列淺色交錯，跟 hover 的淡藍色（既有規則 #eef6fd）區隔開。 */
.green-item-page #green-item-module .table-wrap table tbody tr:nth-child(even) {
    background: #f7fafc;
}

.green-item-page #green-item-module .table-wrap table tbody tr:nth-child(even):hover {
    background: #eef6fd;
}

@media (max-width: 600px) {
    .green-item-page #green-item-module .table-wrap table {
        table-layout: auto;
        min-width: 0;
        width: 100%;
    }

    .green-item-page #green-item-module .table-wrap table th:nth-child(n),
    .green-item-page #green-item-module .table-wrap table td:nth-child(n) {
        width: 100%;
    }

    .green-item-page #green-item-module .table-wrap table tbody tr:nth-child(even) {
        background: transparent;
    }
}

#material-carbon-factor-module .table-wrap table {
    table-layout: fixed;
    min-width: 760px;
}

#material-carbon-factor-module .table-wrap table th:nth-child(1),
#material-carbon-factor-module .table-wrap table td:nth-child(1) { width: 6%; }
#material-carbon-factor-module .table-wrap table th:nth-child(2),
#material-carbon-factor-module .table-wrap table td:nth-child(2) { width: 11%; }
#material-carbon-factor-module .table-wrap table th:nth-child(3),
#material-carbon-factor-module .table-wrap table td:nth-child(3) { width: 27%; }
#material-carbon-factor-module .table-wrap table th:nth-child(4),
#material-carbon-factor-module .table-wrap table td:nth-child(4) { width: 14%; }
#material-carbon-factor-module .table-wrap table th:nth-child(5),
#material-carbon-factor-module .table-wrap table td:nth-child(5) { width: 10%; }
#material-carbon-factor-module .table-wrap table th:nth-child(6),
#material-carbon-factor-module .table-wrap table td:nth-child(6) { width: 20%; }
#material-carbon-factor-module .table-wrap table th:nth-child(7),
#material-carbon-factor-module .table-wrap table td:nth-child(7) { width: 12%; }

/* table-layout:fixed 後文字不會撐開欄寬，改為換行與省略處理，避免內容溢出儲存格。 */
#project-carbon-factor-module .table-wrap table td,
#material-carbon-factor-module .table-wrap table td {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 手機版表格跑掉的原因：上面這些 table-layout:fixed / min-width / 每欄百分比寬度
   規則都是用「#模組id」限定的（有ID），specificity 比全站手機版卡片化那條沒有ID
   的通用規則（.table-card table, td { width:100%; min-width:0 } 等）高，即使包在
   @media(max-width:600px) 裡面，沒有ID的規則還是贏不了有ID的規則，所以這3個模組
   在手機版還是被強制維持成 760~820px 的桌面欄寬配置，卡片裡的內容被擠成極窄的
   欄位，文字才會被 word-break 逐字換行、整個版面跑掉。這裡在手機寬度下，用同樣
   有ID的規則明確把 table-layout/min-width/每欄寬度都還原掉，讓 .table-card 原本
   的卡片化版型可以正常生效。 */
@media (max-width: 600px) {
    #project-carbon-factor-module .table-wrap table,
    #material-carbon-factor-module .table-wrap table {
        table-layout: auto;
        min-width: 0;
        width: 100%;
    }

    /* 用 :nth-child(n)（比對任何位置）維持跟桌面版每欄規則一樣的 specificity（都是1個
       pseudo-class），這樣即使沒有指定跟桌面版一樣的欄位序號，靠著在原始碼中排序在後面，
       也能正確覆蓋掉桌面版每一條 :nth-child(1)~:nth-child(8) 的個別寬度設定。 */
    #project-carbon-factor-module .table-wrap table th:nth-child(n),
    #project-carbon-factor-module .table-wrap table td:nth-child(n),
    #material-carbon-factor-module .table-wrap table th:nth-child(n),
    #material-carbon-factor-module .table-wrap table td:nth-child(n) {
        width: 100%;
    }
}

/* 先前為了解決橫向捲動時「功能」欄被捲出視窗，曾用 position:sticky 固定該欄，
   但這 3 個頁面的表格是 border-collapse:collapse（全站表格預設），position:sticky
   加在 <th>/<td> 上與 border-collapse:collapse 搭配在部分瀏覽器會整欄無法正確繪製
   （不是變窄，是整欄含文字都不顯示），懷疑就是「功能」欄完全消失的原因，故移除。
   現在已經改用縮小 min-width 的方式從根本減少橫向捲動的機會，不需要再靠 sticky。 */

/* carbon_edit.html：碳排放推估頁專用樣式，統一維護於共用樣式檔。 */
.carbon-edit-page .carbon-benefit-section { margin-top: 24px; }
.carbon-edit-page .carbon-benefit-section .card-heading { color: var(--brand-accent); }
.carbon-edit-page .carbon-benefit-section .card-heading h2 { margin: 0; font-size: var(--fs-lg); }
.carbon-edit-page .carbon-benefit-table th { height: 46px; padding: 7px 10px; color: var(--brand-accent); background: #fafbfc; font-size: var(--fs-base); }
.carbon-edit-page .carbon-benefit-table th:nth-child(1), .carbon-edit-page .carbon-benefit-table td:nth-child(1) { width: 4%; text-align: center; }
.carbon-edit-page .carbon-benefit-table th:nth-child(2) { width: 21%; }.carbon-edit-page .carbon-benefit-table th:nth-child(3) { width: 8%; }.carbon-edit-page .carbon-benefit-table th:nth-child(4) { width: 19%; }.carbon-edit-page .carbon-benefit-table th:nth-child(5), .carbon-edit-page .carbon-benefit-table th:nth-child(6) { width: 8%; }.carbon-edit-page .carbon-benefit-table th:nth-child(7) { width: 12%; }.carbon-edit-page .carbon-benefit-table th:nth-child(8) { width: 16%; }.carbon-edit-page .carbon-benefit-table th:nth-child(9), .carbon-edit-page .carbon-benefit-table td:nth-child(9) { width: 100px; text-align: center; }
.carbon-edit-page .carbon-benefit-table td { padding: 9px 10px; }.carbon-edit-page .carbon-benefit-table input { width: 100%; height: 38px; padding: 9px 11px; box-sizing: border-box; border: 1px solid #cad5de; border-radius: 6px; color: var(--text-2); background: #fff; font: 14px "Noto Sans TC", Arial, sans-serif; }.carbon-edit-page .carbon-benefit-table input:focus { border-color: #6ca1d5; }.carbon-edit-page .carbon-benefit-emission { color: var(--brand); font-weight: 700; text-align: center; }.carbon-edit-page .carbon-benefit-actions { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }.carbon-edit-page .carbon-benefit-actions .icon-action { margin: 0; }.carbon-edit-page .carbon-benefit-actions .carbon-custom-row-action { min-width: 30px; height: 30px; padding: 0; }.carbon-edit-page .carbon-benefit-table #carbon-benefit-add { width: 34px; min-width: 34px; height: 34px; padding: 0; line-height: 1; }.carbon-edit-page .carbon-benefit-text { color: var(--brand-accent); }.carbon-benefit-empty td { padding: 24px 10px !important; color: var(--text-4); font-weight: 700; text-align: center !important; }
.carbon-green-modal .green-modal-header h2, .carbon-green-modal .green-modal-header h2 i, .carbon-water-modal .green-modal-header h2, .carbon-water-modal .green-modal-header h2 i { color: var(--brand-accent); }.carbon-green-form { display: grid; grid-template-columns: minmax(calc(190px * var(--fs-scale)),1fr) calc(130px * var(--fs-scale)); gap: 10px 18px; margin: 0 20px 12px; padding: 16px 18px; border: 1px dashed #9fc7eb; border-radius: 7px; background: #fbfdff; }.carbon-green-form label { display: grid; grid-template-columns: calc(52px * var(--fs-scale)) minmax(0,1fr); align-items: center; gap: 8px; color: var(--brand-accent); font-weight: 700; }.carbon-green-form select, .carbon-green-form input, .carbon-green-form textarea { width: 100%; min-width: 0; padding: 8px 10px; box-sizing: border-box; border: 1px solid #cad5de; border-radius: 6px; color: var(--text-2); background: #fff; font: inherit; }.carbon-green-form .carbon-green-note { grid-column: 1 / -1; align-items: start; }.carbon-green-form textarea { min-height: 74px; resize: vertical; }.carbon-green-form .primary-button { grid-column: 2; justify-self: end; align-self: end; }.carbon-green-modal .green-modal-card { width: min(860px, calc(100vw - 32px)); }.carbon-green-type-wrap { width: auto; max-width: none; margin: 0 20px; overflow: hidden; border: 1px solid #d7e4f0; border-radius: 7px; }.carbon-green-type-table { width: 100% !important; min-width: 0 !important; max-width: 100% !important; border-collapse: collapse; table-layout: fixed; }.carbon-green-type-table th { padding: 11px 10px; color: var(--brand-accent); background: #f8fafc; border: 0; border-bottom: 1px solid #d7e4f0; text-align: left; font-size: var(--fs-base); }.carbon-green-type-table .carbon-green-type-col { width: 18%; }.carbon-green-type-table .carbon-green-weight-col { width: 14%; }.carbon-green-type-table .carbon-green-action-col, .carbon-green-type-actions { width: calc(72px * var(--fs-scale)); min-width: calc(72px * var(--fs-scale)); }.carbon-green-type-table th:last-child, .carbon-green-type-actions { text-align: center !important; }.carbon-green-type-table td { padding: 14px 10px; color: var(--brand-accent); border: 0; border-bottom: 1px solid #e1eaf1; text-align: left; }.carbon-green-type-table tr:last-child td { border-bottom: 0; }.carbon-green-type-table select, .carbon-green-type-table input { width: 100%; min-width: 0; padding: 7px 8px; box-sizing: border-box; border: 1px solid #8bb5df; border-radius: 5px; color: var(--text-2); background: #fff; font: inherit; }.carbon-green-type-actions { padding: 0 4px !important; white-space: nowrap; }.carbon-green-type-actions .icon-action { margin: 0 2px; }.carbon-green-type-actions .carbon-custom-row-action, .carbon-current-table .carbon-custom-row-action { width: calc(30px * var(--fs-scale)); height: calc(30px * var(--fs-scale)); padding: 0; border: 1px solid #87b7e8; border-radius: 5px; background: #eef7ff; color: var(--brand-accent); cursor: pointer; }.carbon-green-type-actions .carbon-custom-row-action:hover, .carbon-current-table .carbon-custom-row-action:hover { background: #dceeff; }.carbon-green-type-table .carbon-green-empty { padding: 24px 10px; color: var(--text-4); font-weight: 700; text-align: center; }.carbon-green-type-table tbody tr:hover td { background: #f8fbfd; }
.carbon-water-form { margin: 22px 20px 0; }.carbon-water-form label { display: block; margin-bottom: 9px; color: var(--text-2); font-weight: 700; }.carbon-water-form textarea { display: block; width: 100%; min-height: 128px; padding: 11px 12px; box-sizing: border-box; border: 1px solid #7eaee0; border-radius: 6px; color: var(--text-2); font: inherit; resize: vertical; }
.carbon-modal .carbon-modal-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 15px; overflow: visible; border: 0; border-radius: 0; background: transparent; }.carbon-modal .carbon-modal-tabs > button { flex: 0 0 auto; min-height: 0; padding: 7px 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--brand-accent); font: inherit; }.carbon-modal .carbon-modal-tabs > button:hover { background: transparent; color: var(--brand-accent); }.carbon-modal .carbon-modal-tabs > button.active { color: var(--brand-accent); border-bottom-color: #286fae; background: transparent; }.carbon-modal .carbon-picker-title { color: var(--text-3); }.carbon-modal-tabs .carbon-search-group { margin-left: auto; }
.budget-edit-page .carbon-modal #carbon-material-section, .budget-edit-page .carbon-modal #carbon-machine-section, .budget-edit-page .carbon-modal #carbon-fuel-section, .budget-edit-page .carbon-modal #carbon-custom-section { display: none !important; }
@media (max-width: 760px) { .carbon-edit-page .carbon-benefit-section { margin-top: 18px; }.carbon-edit-page .carbon-benefit-table, .carbon-edit-page .carbon-benefit-table tbody, .carbon-edit-page .carbon-benefit-table tr, .carbon-edit-page .carbon-benefit-table td { display: block; min-width: 0; width: 100%; }.carbon-edit-page .carbon-benefit-table thead { display: block; }.carbon-edit-page .carbon-benefit-table thead tr { display: flex; justify-content: flex-end; background: transparent; }.carbon-edit-page .carbon-benefit-table thead th { display: none; }.carbon-edit-page .carbon-benefit-table thead th:last-child { display: block; width: auto; padding: 8px 0 6px; background: transparent; border: 0; }.carbon-edit-page .carbon-benefit-table tbody tr { margin-bottom: 12px; border: 1px solid #d7e4f0; border-radius: 8px; overflow: hidden; }.carbon-edit-page .carbon-benefit-table td { display: grid; grid-template-columns: 38% 62%; min-height: 48px; padding: 8px 12px; box-sizing: border-box; border-bottom: 1px solid #e2eaf1; align-items: center; text-align: right; }.carbon-edit-page .carbon-benefit-table td::before { color: var(--brand-accent); font-size: var(--fs-base); font-weight: 600; text-align: left; }.carbon-edit-page .carbon-benefit-table td:nth-child(1)::before { content: '項次'; }.carbon-edit-page .carbon-benefit-table td:nth-child(2)::before { content: '項目及說明'; }.carbon-edit-page .carbon-benefit-table td:nth-child(3)::before { content: '數量'; }.carbon-edit-page .carbon-benefit-table td:nth-child(4)::before { content: '單位'; }.carbon-edit-page .carbon-benefit-table td:nth-child(5)::before { content: '金額(元)'; }.carbon-edit-page .carbon-benefit-table td:nth-child(6)::before { content: '碳係數'; }.carbon-edit-page .carbon-benefit-table td:nth-child(7)::before { content: '工程碳排放量(kgCO2e)'; }.carbon-edit-page .carbon-benefit-table td:nth-child(8)::before { content: '編碼(備註)'; }.carbon-edit-page .carbon-benefit-table td:nth-child(9)::before { content: '操作'; }.carbon-edit-page .carbon-benefit-table td:nth-child(1), .carbon-edit-page .carbon-benefit-table td:nth-child(9) { width: 100%; text-align: right; }.carbon-edit-page .carbon-benefit-actions { justify-content: flex-end; }.carbon-modal-tabs .carbon-search-group { margin-left: 0; } }
@media (max-width: 600px) { .carbon-green-form { grid-template-columns: 1fr; }.carbon-green-form .primary-button { grid-column: auto; width: 100%; } }

/* 編輯預算／標單／契約：窄螢幕保留完整欄位，改由表格本身提供水平滑動。 */
@media (max-width: 768px) {
    .budget-edit-page .estimate-panel {
        overflow: hidden;
    }

    .budget-edit-page .estimate-panel .table-scroll {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: visible;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #8ca1b3 #edf2f6;
        scrollbar-width: thin;
    }

    .budget-edit-page .estimate-table {
        display: table;
        width: max-content;
        min-width: 1380px;
        padding: 0;
        table-layout: auto;
    }

    .budget-edit-page .estimate-table tbody {
        display: table-row-group;
    }

    .budget-edit-page .estimate-table thead {
        display: table-header-group;
    }

    .budget-edit-page .estimate-table tr {
        display: table-row;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .budget-edit-page .estimate-table .item-row td,
    .budget-edit-page .estimate-table .group td[data-label] {
        display: table-cell;
        width: auto !important;
        min-height: 0;
        padding: 8px 7px;
        text-align: inherit;
    }

    .budget-edit-page .estimate-table .item-row td::before,
    .budget-edit-page .estimate-table .group td[data-label]::before {
        content: none;
    }
}

/* 編輯預算表格：內容與固定標題共用同一個完整欄寬。 */
@media (min-width: 769px) {
    .budget-edit-page .estimate-panel .table-scroll {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .budget-edit-page .estimate-table,
    .budget-edit-page .estimate-sticky-header-table {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    .budget-edit-page .estimate-table col,
    .budget-edit-page .estimate-sticky-header-table col {
        width: auto !important;
    }

    .budget-edit-page .estimate-table th,
    .budget-edit-page .estimate-table td {
        min-width: 0 !important;
    }
}

/* 平板與縮放後的桌面寬度：不壓縮欄位，改以表格內滑動保留全部資料。 */
@media (min-width: 769px) and (max-width: 1440px) {
    .budget-edit-page .estimate-panel .table-scroll {
        overflow-x: auto !important;
        overflow-y: visible;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #8ca1b3 #edf2f6;
        scrollbar-width: thin;
    }

    .budget-edit-page .estimate-table {
        width: max-content !important;
        min-width: 1380px !important;
        max-width: none !important;
        table-layout: auto !important;
    }
}

/* 大宗資材維護：分頁、列內儲存與手機版欄位對齊。 */
#green-item-module .pagination {
    justify-content: center;
    gap: 7px;
    padding: 10px 17px;
}

#green-item-module .pagination #green-item-page-numbers {
    display: inline-flex;
    gap: 7px;
}

#green-item-module .pagination button {
    width: 29px;
    height: 29px;
    border-radius: 6px;
}

#green-item-module .save.icon-action {
    margin-right: 7px;
    border: 1px solid #f0ae62;
    color: #aa6311;
    background: #fff8ee;
}

#green-item-module .cancel.icon-action {
    border: 1px solid #cbd9e7;
    color: var(--text-4);
    background: #f7fbff;
}

@media (max-width: 600px) {
    #green-item-module .table-card td,
    #green-item-module .table-card table td:nth-child(7) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
    }

    #green-item-module .table-card td::before {
        flex: 0 0 88px;
        margin: 0;
        text-align: left;
    }

    #green-item-module .table-card td input,
    #green-item-module .table-card td select {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
    }

    #green-item-module .table-card .row-actions .icon-action {
        width: 30px;
        min-width: 30px;
        padding: 0;
    }

    #green-item-module .table-card .row-actions .icon-action::after {
        content: '';
    }
}

/* 最終覆寫：手機版別名獨立顯示在工項名稱下方。 */
@media (max-width: 768px) {
    .budget-edit-page .estimate-table .item-row td:nth-child(2) { display: grid !important; grid-template-columns: 39% auto minmax(0, 1fr); align-items: center; column-gap: 9px; row-gap: 6px; }
    .budget-edit-page .estimate-table .item-row td:nth-child(2):has(.item-alias-text) { min-height: 66px; padding-top: 12px !important; padding-bottom: 12px !important; }
    .budget-edit-page .estimate-table .item-row td:nth-child(2)::before { grid-column: 1; grid-row: 1 / span 2; }
    .budget-edit-page .estimate-table .item-row td:nth-child(2) .item-selector-control { grid-column: 2; grid-row: 1; }
    .budget-edit-page .estimate-table .item-row td:nth-child(2) .item-name-text { grid-column: 3; grid-row: 1; justify-self: end; min-width: 0; text-align: right !important; }
    .budget-edit-page .estimate-table .item-row td:nth-child(2) .item-alias-text { display: block; grid-column: 2 / -1; grid-row: 2; margin: 0; padding-top: 2px; border: 0; color: var(--brand-accent); line-height: 1.45; text-align: right; }

    .budget-edit-page .estimate-table .item-row.is-green-item.is-active {
        position: relative;
        z-index: 1;
        outline: 2px solid #17855e;
        outline-offset: -2px;
        box-shadow: 0 0 0 2px rgba(23, 133, 94, .16) !important;
    }

    .budget-edit-page.contract-edit-page .estimate-table .item-row.is-active,
    .budget-edit-page.contract-edit-page .estimate-table .group.is-active {
        position: relative;
        z-index: 1;
        outline: 2px solid #7654a8;
        outline-offset: -2px;
        box-shadow: 0 0 0 2px rgba(118, 84, 168, .14) !important;
    }

    .budget-edit-page.contract-edit-page .estimate-table .item-row.is-green-item.is-active {
        outline-color: #17855e;
        box-shadow: 0 0 0 2px rgba(23, 133, 94, .16) !important;
    }

    .budget-edit-page .estimate-table .is-active > td {
        box-shadow: none !important;
    }
}

/* 最終覆寫：手機不縮回橫向表格，固定採用左標題、右內容資料卡。 */
@media (max-width: 768px) {
    .budget-edit-page .table-scroll { overflow: visible !important; }
    .budget-edit-page .estimate-table,
    .budget-edit-page .estimate-table tbody { display: block !important; width: 100% !important; min-width: 0 !important; padding: 6px; box-sizing: border-box; }
    .budget-edit-page .estimate-table thead { display: none !important; }
    .budget-edit-page .estimate-table tr { display: block !important; margin: 0 0 12px; overflow: hidden; border: 1px solid #d6e1e8; border-radius: 9px; }
    .budget-edit-page .estimate-table .item-row td,
    .budget-edit-page .estimate-table .group td[data-label] { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100% !important; min-width: 0 !important; min-height: 42px; padding: 9px 15px; box-sizing: border-box; border: 0; border-bottom: 1px solid #e2eaee; text-align: right !important; white-space: normal !important; }
    .budget-edit-page .estimate-table .item-row td::before,
    .budget-edit-page .estimate-table .group td[data-label]::before,
    .budget-edit-page .estimate-table .grand-total .total-number::before { content: attr(data-label); flex: 0 0 39%; color: var(--brand-accent); font-size: var(--fs-md); font-weight: 600; text-align: left; }
    .budget-edit-page .estimate-table .item-row td:empty,
    .budget-edit-page .estimate-table .group td:not([data-label]),
    .budget-edit-page .estimate-table .grand-total td:not(.total-number):not(:nth-child(2)) { display: none !important; }
    .budget-edit-page .estimate-table .item-row td:last-child,
    .budget-edit-page .estimate-table .group td[data-label]:last-child { border-bottom: 0; }
}

/* 最終覆寫：預算／標單／契約編輯表格在平板顯示為左標題、右內容。 */
@media (min-width: 769px) and (max-width: 1024px) {
    .budget-edit-page .table-scroll { overflow: visible !important; }
    .budget-edit-page .estimate-table,
    .budget-edit-page .estimate-table tbody { display: block !important; width: 100% !important; min-width: 0 !important; padding: 6px; box-sizing: border-box; }
    .budget-edit-page .estimate-table thead { display: none !important; }
    .budget-edit-page .estimate-table tr { display: block !important; margin: 0 0 12px; overflow: hidden; border: 1px solid #d6e1e8; border-radius: 10px; background: #fff; }
    .budget-edit-page .estimate-table .item-row td,
    .budget-edit-page .estimate-table .group td[data-label] { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; width: 100% !important; min-width: 0 !important; min-height: 46px; padding: 10px 15px; box-sizing: border-box; border: 0; border-bottom: 1px solid #e6edf1; text-align: right !important; white-space: normal !important; }
    .budget-edit-page .estimate-table .item-row td::before,
    .budget-edit-page .estimate-table .group td[data-label]::before,
    .budget-edit-page .estimate-table .grand-total .total-number::before { content: attr(data-label); flex: 0 0 38%; color: var(--brand-accent); font-size: var(--fs-base); font-weight: 600; text-align: left; }
    .budget-edit-page .estimate-table .item-row td:empty,
    .budget-edit-page .estimate-table .group td:not([data-label]),
    .budget-edit-page .estimate-table .grand-total td:not(.total-number):not(:nth-child(2)) { display: none !important; }
    .budget-edit-page .estimate-table .item-row td:last-child,
    .budget-edit-page .estimate-table .group td[data-label]:last-child { border-bottom: 0; }
    .budget-edit-page .estimate-table .grand-total td:nth-child(2) { display: block !important; padding: 12px 15px 7px; border: 0; text-align: left; }
    .budget-edit-page .estimate-table .grand-total .total-number { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; width: 100% !important; padding: 10px 15px; box-sizing: border-box; border: 0; border-top: 1px solid #478268; text-align: right !important; }
}

/* 最終覆寫：欄位精簡後維持完整桌面表格寬度。 */
@media (min-width: 1025px) {
    .budget-edit-page .estimate-table { min-width: 1110px !important; }
    .budget-edit-page .estimate-table th:nth-child(1) { width: 52px; }
    .budget-edit-page .estimate-table th:nth-child(2) { width: 230px; }
    .budget-edit-page .estimate-table th:nth-child(3),
    .budget-edit-page .estimate-table th:nth-child(4) { width: 48px; }
    .budget-edit-page .estimate-table th:nth-child(5),
    .budget-edit-page .estimate-table th:nth-child(6),
    .budget-edit-page .estimate-table th:nth-child(7) { width: 68px; }
    .budget-edit-page .estimate-table th:nth-child(8) { width: 110px; }
    .budget-edit-page .estimate-table th:nth-child(n+9) { width: 86px; }
}

/* 最終覆寫：工項編輯第二資訊區、綠色類型清單與表格下方分頁。 */
.budget-edit-page #item-modal .modal-item-fields { grid-template-columns: calc(90px * var(--fs-scale)) calc(150px * var(--fs-scale)) minmax(240px,1fr) calc(110px * var(--fs-scale)); }
.budget-edit-page #item-modal .modal-item-fields .item-name-field { min-width: 0; }
.budget-edit-page #item-modal .modal-item-fields > label:last-child { min-width: 0; }
.budget-edit-page #item-modal .item-modal-extra-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.budget-edit-page .item-modal-removed-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 20px 18px; padding: 14px 16px; border: 1px solid #a8d5bd; border-radius: 7px; background: #eff9f3; }
.budget-edit-page .item-modal-removed-fields { border-color: #27804e; background: #eef6f2; }
.budget-edit-page .item-modal-removed-fields label { display: grid; gap: 6px; color: var(--brand); font-size: var(--fs-base); font-weight: 700; }
.budget-edit-page .item-modal-removed-fields input { width: 100%; min-width: 0; height: 36px; box-sizing: border-box; padding: 7px 10px; border: 1px solid #bfd0e1; border-radius: 6px; background: #fff; color: var(--text-2); font: inherit; }

.budget-edit-page.contract-edit-page .item-modal-removed-fields { border-color: #c8b6e4; background: #fcfaff; }
.budget-edit-page.contract-edit-page .item-modal-removed-fields label { color: var(--text-1); }
.budget-edit-page .green-type-editor { margin: 0 20px 16px; }
.budget-edit-page .green-type-entry { display: grid; grid-template-columns: minmax(0,1fr) calc(100px * var(--fs-scale)) auto; gap: 10px 14px; align-items: end; padding: 16px 18px; border: 1px dashed #9fc7eb; border-radius: 7px; background: #fbfdff; }
.budget-edit-page .green-type-entry label { display: grid; gap: 6px; color: var(--brand-accent); font-weight: 700; }
.budget-edit-page .green-type-entry select, .budget-edit-page .green-type-entry input, .budget-edit-page .green-type-entry textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px 10px; border: 1px solid #cad5de; border-radius: 6px; background: #fff; color: var(--text-2); font: inherit; }
.budget-edit-page .green-type-entry textarea { min-height: 72px; resize: vertical; }
.budget-edit-page .green-type-entry .green-type-note { grid-column: 1 / 3; }
.budget-edit-page .green-type-entry .primary-button { min-width: 64px; height: 36px; align-self: end; }
.budget-edit-page .green-type-table { width: 100% !important; min-width: 0 !important; table-layout: fixed; }
.budget-edit-page .green-type-table th, .budget-edit-page .green-type-table td { width: auto; }
.budget-edit-page .green-type-table th:last-child, .budget-edit-page .green-type-table td:last-child { width: calc(92px * var(--fs-scale)); text-align: center; white-space: nowrap; }
.budget-edit-page .green-type-table .icon-action { margin: 0 2px; }
.budget-edit-page .green-type-table .green-type-empty td { padding: 24px 10px; color: var(--text-4); font-weight: 700; text-align: center; }
.budget-edit-page #green-modal .green-modal-card { width: min(860px, calc(100vw - 32px)); }
.budget-edit-page #green-modal .green-modal-header h2,
.budget-edit-page #green-modal .green-modal-header h2 i { color: var(--brand-accent); }
.budget-edit-page .green-type-table .green-type-edit,
.budget-edit-page .green-type-table .green-type-delete { width: 30px; min-width: 30px; height: 30px; padding: 0; border-radius: 5px; box-sizing: border-box; }
.budget-edit-page .green-type-table .green-type-edit { border: 1px solid #86baf0; background: #f4f9ff; color: var(--brand-accent); }
.budget-edit-page .green-type-table .green-type-edit:hover { border-color: #2169a9; background: #e4f1ff; }
.budget-edit-page .green-type-table .green-type-confirm { width: 30px; min-width: 30px; height: 30px; padding: 0; border: 1px solid #86baf0; border-radius: 5px; background: #f4f9ff; color: var(--brand-accent); }
.budget-edit-page .green-type-table .green-type-confirm:hover { border-color: #2169a9; background: #e4f1ff; }
.budget-edit-page .green-type-table tr.is-editing td { background: #f5fbf8; }
.budget-edit-page .green-type-table .green-type-delete { border: 1px solid #ffabb4; background: #fff5f6; color: #e22539; }
.budget-edit-page .green-type-table .green-type-delete:hover { border-color: #eb6674; background: #ffe8eb; }
.budget-edit-page #green-modal .green-type-editor { margin: 0 20px 12px; }
.budget-edit-page #green-modal .green-type-entry { display: grid; grid-template-columns: minmax(calc(190px * var(--fs-scale)),1fr) calc(130px * var(--fs-scale)); gap: 10px 18px; margin: 0; padding: 16px 18px; border: 1px dashed #9fc7eb; border-radius: 7px; background: #fbfdff; }
.budget-edit-page #green-modal .green-type-entry label { display: grid; grid-template-columns: calc(52px * var(--fs-scale)) minmax(0,1fr); align-items: center; gap: 8px; color: var(--brand-accent); font-weight: 700; }
.budget-edit-page #green-modal .green-type-entry .green-type-note { grid-column: 1 / -1; align-items: start; }
.budget-edit-page #green-modal .green-type-entry textarea { min-height: 74px; resize: vertical; }
.budget-edit-page #green-modal .green-type-entry .primary-button { grid-column: 2; justify-self: end; align-self: end; }
.budget-edit-page #green-modal .green-table-wrap { width: auto; max-width: none; margin: 12px 20px 0; overflow: hidden; border: 1px solid #d7e4f0; border-radius: 7px; }
.budget-edit-page #green-modal .green-type-table { width: 100% !important; min-width: 0 !important; max-width: 100% !important; border-collapse: collapse; table-layout: fixed; }
.budget-edit-page #green-modal .green-type-table th { padding: 11px 10px; color: var(--brand-accent); background: #f8fafc; border: 0; border-bottom: 1px solid #d7e4f0; text-align: left; font-size: var(--fs-base); }
.budget-edit-page #green-modal .green-type-table th:nth-child(1) { width: 18%; }
.budget-edit-page #green-modal .green-type-table th:nth-child(2) { width: 14%; }
.budget-edit-page #green-modal .green-type-table th:last-child, .budget-edit-page #green-modal .green-type-table td:last-child { width: 72px; min-width: 72px; text-align: center !important; }
.budget-edit-page #green-modal .green-type-table td { padding: 14px 10px; color: var(--brand-accent); border: 0; border-bottom: 1px solid #e1eaf1; text-align: left; }
.budget-edit-page #green-modal .green-type-table tr:last-child td { border-bottom: 0; }
.budget-edit-page #green-modal .green-type-table select, .budget-edit-page #green-modal .green-type-table input { width: 100%; height: auto;min-width: 0; padding: 7px 8px; box-sizing: border-box; border: 1px solid #8bb5df; border-radius: 5px; color: var(--text-2); background: #fff; font: inherit; }
.budget-edit-page #green-modal .green-type-table tr.is-editing td { background: #f5fbf8; }
.budget-edit-page .edit-title-with-lock .table-pagination-controls { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); white-space: nowrap; }
.budget-edit-page .table-pagination-pages-footer { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 12px 0 16px; }
.budget-edit-page .table-pagination-pages-footer[hidden] { display: none !important; }
.budget-edit-page .table-pagination-pages button:disabled { color: var(--text-4); border-color: #d8e0e7; background: #fff; cursor: default; }
.budget-edit-page .estimate-table .item-row td:first-child[data-editable="true"] { cursor: text; }
.budget-edit-page .estimate-table .item-row td.item-sequence-error { color: #d53b3b !important; font-weight: 700; }
.budget-edit-page .collapse-row .group-sequence[contenteditable="true"] { outline: 0; }
@media (max-width: 768px) {
  .budget-edit-page #item-modal .modal-item-fields { grid-template-columns: 1fr 1fr; }
  .budget-edit-page #item-modal .modal-item-fields .item-name-field { grid-column: 1 / -1; }
  .budget-edit-page .item-modal-removed-fields { grid-template-columns: 1fr; margin-inline: 14px; }
  .budget-edit-page .green-type-editor { margin-inline: 14px; }
  .budget-edit-page .green-type-entry { grid-template-columns: 1fr calc(82px * var(--fs-scale)); padding: 13px; }
  .budget-edit-page .green-type-entry .green-type-note { grid-column: 1 / -1; }
  .budget-edit-page .green-type-entry .primary-button { grid-column: 2; }
  .budget-edit-page .edit-title-with-lock .table-pagination-controls { flex-wrap: wrap; }
}

/* 綠色工項編輯與 carbon_edit 的綠色類型編輯一致。 */
.budget-edit-page #green-modal .green-type-editor { margin: 0; }
.budget-edit-page #green-modal .green-type-entry.carbon-green-form { margin: 0 20px 12px; }
.budget-edit-page #green-modal .carbon-green-type-wrap { margin: 0 20px; }
.budget-edit-page #green-modal .carbon-green-type-table .carbon-green-type-actions { width: calc(72px * var(--fs-scale)); min-width: calc(72px * var(--fs-scale)); }
@media (max-width: 600px) {
  .budget-edit-page #green-modal .green-type-entry.carbon-green-form { grid-template-columns: 1fr; }
  .budget-edit-page #green-modal .green-type-entry.carbon-green-form .primary-button { grid-column: auto; width: 100%; }
}

/* 工項編輯：歷史價格依目前工項帶入本機關與其他機關的參考案件。 */
.budget-edit-page .item-history { margin: 16px 20px !important; border: 1px solid #cbd8e3; border-radius: 6px;}
.budget-edit-page .item-history legend { display: flex; align-items: baseline; gap: 6px; }
.budget-edit-page .item-history legend small { color: var(--text-4); font-size: var(--fs-sm); font-weight: 400; }
.budget-edit-page .item-history-table-wrap { width: 100%; overflow-x: auto; border: 1px solid #d7e4df; border-radius: 6px; }
.budget-edit-page .item-history-table { width: 100%; min-width: 650px; border-collapse: collapse; table-layout: fixed; }
.budget-edit-page .item-history-table th,
.budget-edit-page .item-history-table td { height: auto; padding: 9px 8px; border: 0; border-right: 1px solid #d7e4df; border-bottom: 1px solid #d7e4df; color: var(--brand); text-align: left; vertical-align: middle; }
.budget-edit-page .item-history-table th { background: #246d55; color: #fff; font-weight: 700; white-space: nowrap; }
.budget-edit-page .item-history-table th:nth-child(1) { width: 16%; }
.budget-edit-page .item-history-table th:nth-child(2) { width: 21%; }
.budget-edit-page .item-history-table th:nth-child(3) { width: 20%; }
.budget-edit-page .item-history-table th:nth-child(4) { width: 16%; }
.budget-edit-page .item-history-table th:nth-child(5) { width: 12%; }
.budget-edit-page .item-history-table th:last-child { width: 74px; }
.budget-edit-page .item-history-shared-table th:nth-child(1) { width: 13%; }
.budget-edit-page .item-history-shared-table th:nth-child(2) { width: 17%; }
.budget-edit-page .item-history-shared-table th:nth-child(3) { width: 19%; }
.budget-edit-page .item-history-shared-table th:nth-child(4) { width: 17%; }
.budget-edit-page .item-history-shared-table th:nth-child(5) { width: 14%; }
.budget-edit-page .item-history-shared-table th:nth-child(6) { width: 10%; }
.budget-edit-page .item-history-shared-table th:last-child { width: 74px; }
.budget-edit-page .item-history-table th:last-child,
.budget-edit-page .item-history-table td:last-child { border-right: 0; text-align: center; }
.budget-edit-page .item-history-table tbody tr:last-child td { border-bottom: 0; }
.budget-edit-page .item-history-table tbody tr:hover td { background: #f4faf7; }
.budget-edit-page .item-history-source-title { margin: 14px 0 8px; color: var(--text-2); font-weight: 700; }
.budget-edit-page .item-history-quote { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 4px 9px; border: 1px solid #74ae91; border-radius: 5px; background: #f3fbf6; color: #216d51; font: inherit; font-size: var(--fs-md); font-weight: 700; cursor: pointer; }
.budget-edit-page .item-history-quote:hover,
.budget-edit-page .item-history-quote.is-quoted { background: #dff3e6; border-color: #27804e; }

.budget-edit-page.contract-edit-page .item-history-table-wrap { border-color: #d8cbed; }
.budget-edit-page.contract-edit-page .item-history-table th { background: #6f5a8c; }
.budget-edit-page.contract-edit-page .item-history-table th,
.budget-edit-page.contract-edit-page .item-history-table td { border-color: #d8cbed; }
.budget-edit-page.contract-edit-page .item-history-table tbody tr:hover td { background: #f8f4fc; }
.budget-edit-page.contract-edit-page .item-history-quote { border-color: #b9a4d6; background: #faf7ff; color: var(--text-2); }
.budget-edit-page.contract-edit-page .item-history-quote:hover,
.budget-edit-page.contract-edit-page .item-history-quote.is-quoted { border-color: #6f5a8c; background: #eee6f8; }

/* 歷史價格列滑入／引用時，底色延伸至表格框線內側的完整寬度。 */
.budget-edit-page .item-history-table-wrap:has(tbody tr:hover),
.budget-edit-page .item-history-table-wrap:has(.item-history-quote.is-quoted) { background: #f4faf7; }

.budget-edit-page.contract-edit-page .item-history-table-wrap:has(tbody tr:hover),
.budget-edit-page.contract-edit-page .item-history-table-wrap:has(.item-history-quote.is-quoted) { background: #f8f4fc; }

/* 歷史價格點選狀態：未選取維持白色，選取列完整填滿對應模組底色。 */
.budget-edit-page .item-history-table-wrap:has(tbody tr.is-selected) { background: #f4faf7; }
.budget-edit-page .item-history-table tbody tr.is-selected td { background: #f4faf7; }

.budget-edit-page.contract-edit-page .item-history-table-wrap:has(tbody tr.is-selected),
.budget-edit-page.contract-edit-page .item-history-table tbody tr.is-selected td { background: #f8f4fc; }

@media (max-width: 720px) {
  .budget-edit-page .item-history { margin-inline: 14px !important; }
  .budget-edit-page .item-history legend { display: block; }
  .budget-edit-page .item-history legend small { display: block; margin-top: 3px; }

  /* 歷史價格：手機版改為左標題、右內容的資料卡，避免表格欄位被壓縮。 */
  .budget-edit-page .item-history-table-wrap { overflow: visible; }
  .budget-edit-page .item-history-table,
  .budget-edit-page .item-history-table tbody,
  .budget-edit-page .item-history-table tr,
  .budget-edit-page .item-history-table td { display: block; width: 100%; min-width: 0 !important; }
  .budget-edit-page .item-history-table thead { display: none; }
  .budget-edit-page .item-history-table tbody { padding: 0px; }
  .budget-edit-page .item-history-table tbody tr { padding: 2px 10px; border: 1px solid #d7e4df; border-radius: 6px; background: #fff; }
  .budget-edit-page .item-history-table tbody tr + tr { margin-top: 8px; }
  .budget-edit-page .item-history-table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; padding: 7px 0; border: 0; border-bottom: 1px solid #e4ece8; text-align: right; overflow-wrap: anywhere; }
  .budget-edit-page .item-history-table td::before { flex: 0 0 5.8em; color: var(--text-2); font-weight: 700; text-align: left; }
  .budget-edit-page .item-history-table td:last-child { border-bottom: 0; justify-content: space-between; text-align: right; }
  .budget-edit-page .item-history-table td:nth-child(1)::before { content: '案件編號'; }
  .budget-edit-page .item-history-table td:nth-child(2)::before { content: '案件名稱'; }
  .budget-edit-page .item-history-table td:nth-child(3)::before { content: '工作項目'; }
  .budget-edit-page .item-history-table td:nth-child(4)::before { content: '工項代碼'; }
  .budget-edit-page .item-history-table td:nth-child(5)::before { content: '單價'; }
  .budget-edit-page .item-history-table td:nth-child(6)::before { content: '功能'; }
  .budget-edit-page .item-history-shared-table td:nth-child(2)::before { content: '機關名稱'; }
  .budget-edit-page .item-history-shared-table td:nth-child(3)::before { content: '案件名稱'; }
  .budget-edit-page .item-history-shared-table td:nth-child(4)::before { content: '工作項目'; }
  .budget-edit-page .item-history-shared-table td:nth-child(5)::before { content: '工項代碼'; }
  .budget-edit-page .item-history-shared-table td:nth-child(6)::before { content: '單價'; }
  .budget-edit-page .item-history-shared-table td:nth-child(7)::before { content: '功能'; }
  
  .budget-edit-page.contract-edit-page .item-history-table tbody tr { border-color: #d8cbed; }
  .budget-edit-page .item-history-table tbody tr.is-selected { background: #f4faf7; }
  
  .budget-edit-page.contract-edit-page .item-history-table tbody tr.is-selected { background: #f8f4fc; }

  /* 編碼正確率分析：四個統計卡在手機版固定為 2 × 2。 */
  .code-score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .code-score-card:first-child { grid-column: auto; }
}

/* 工項編輯：手機版欄位依螢幕寬度重排，避免六個補充欄位被壓縮。 */
@media (max-width: 760px) {
  .budget-edit-page #item-modal .item-modal-card { width: calc(100% - 20px); }
  .budget-edit-page #item-modal .item-modal-extra-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .budget-edit-page #item-modal .item-modal-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .budget-edit-page #item-modal .item-modal-grid > fieldset:nth-child(2),
  .budget-edit-page #item-modal .item-modal-grid > fieldset:nth-child(3) { grid-column: auto; grid-row: auto; }
}

@media (max-width: 480px) {
  .budget-edit-page #item-modal .modal-item-fields,
  .budget-edit-page #item-modal .item-modal-extra-fields { grid-template-columns: 1fr; }
  .budget-edit-page #item-modal .modal-item-fields .item-name-field { grid-column: auto; }
}

/* 綠色類型清單：底色只在實際 hover 的列顯示。 */
.carbon-green-type-table .carbon-green-action-col,
.carbon-green-type-table .carbon-green-type-actions,
.budget-edit-page #green-modal .carbon-green-type-table .carbon-green-type-actions { width: calc(66px * var(--fs-scale)); min-width: calc(66px * var(--fs-scale)); }
.carbon-green-type-table .carbon-green-type-actions { padding-inline: 1px !important; }
.carbon-green-type-table .carbon-green-type-actions .icon-action { margin: 0 1px; }
.budget-edit-page #green-modal .green-type-table tr.is-editing td { background: transparent; }
.budget-edit-page #green-modal .green-type-table tbody tr:hover td { background: #f8fbfd; }

/* Green item maintenance: use the dedicated 13-column layout from custom01. */
.green-item-page #green-item-module .table-wrap table {
    table-layout: fixed;
    min-width: 1200px;
}

.green-item-page #green-item-module .table-wrap table th:nth-child(1),
.green-item-page #green-item-module .table-wrap table td:nth-child(1) { width: 4%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(2),
.green-item-page #green-item-module .table-wrap table td:nth-child(2) { width: 8%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(3),
.green-item-page #green-item-module .table-wrap table td:nth-child(3) { width: 13%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(4),
.green-item-page #green-item-module .table-wrap table td:nth-child(4) { width: 9%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(5),
.green-item-page #green-item-module .table-wrap table td:nth-child(5) { width: 6%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(6),
.green-item-page #green-item-module .table-wrap table td:nth-child(6) { width: 7%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(7),
.green-item-page #green-item-module .table-wrap table td:nth-child(7) { width: 7%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(8),
.green-item-page #green-item-module .table-wrap table td:nth-child(8) { width: 7%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(9),
.green-item-page #green-item-module .table-wrap table td:nth-child(9) { width: 7%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(10),
.green-item-page #green-item-module .table-wrap table td:nth-child(10) { width: 9%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(11),
.green-item-page #green-item-module .table-wrap table td:nth-child(11) { width: 6%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(12),
.green-item-page #green-item-module .table-wrap table td:nth-child(12) { width: 9%; }
.green-item-page #green-item-module .table-wrap table th:nth-child(13),
.green-item-page #green-item-module .table-wrap table td:nth-child(13) { width: 8%; }

.green-item-page #green-item-module .table-wrap table td {
    overflow-wrap: break-word;
    word-break: break-word;
    height: auto;
    padding: 11px 12px;
    color: var(--text-2);
    font-size: var(--fs-md);
    line-height: 1.5;
}

.green-item-page #green-item-module .table-wrap table th {
    height: auto;
    padding: 11px 12px;
    color: var(--text-1);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.green-item-page #green-item-module .table-wrap table tbody tr:nth-child(even) {
    background: #f7fafc;
}

.green-item-page #green-item-module .table-wrap table tbody tr:nth-child(even):hover {
    background: #eef6fd;
}

@media (max-width: 600px) {
    .green-item-page #green-item-module .table-wrap table {
        table-layout: auto;
        min-width: 0;
        width: 100%;
    }

    .green-item-page #green-item-module .table-wrap table th:nth-child(n),
    .green-item-page #green-item-module .table-wrap table td:nth-child(n) {
        width: 100%;
    }

    .green-item-page #green-item-module .table-wrap table tbody tr:nth-child(even) {
        background: transparent;
    }
}

/* 工項編輯與挑選工項使用相同彈窗寬度。 */
.budget-edit-page .item-modal-card { width: min(1120px, 100%); }

/* 公開價格查詢：改為站內查詢與單價分析入口。 */
.public-price-modal[hidden] { display: none; }
.public-price-modal { position: fixed; z-index: 1500; inset: 0; display: grid; place-items: center; padding: 20px; box-sizing: border-box; }
.public-price-modal-backdrop { position: absolute; inset: 0; background: rgba(25, 42, 53, .48); }
.public-price-modal-card { position: relative; width: min(1120px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow: auto; border-radius: 12px; background: #fff; box-shadow: 0 18px 48px rgba(22, 48, 64, .3); }
.public-price-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #d8e3ed; background: #f8fbfd; }
.public-price-modal-header h2 { margin: 0; color: var(--brand); font-size: var(--fs-xl); }
.public-price-modal-header h2 i { margin-right: 7px; color: var(--brand-accent); }
.public-price-modal-header > button { padding: 2px 6px; border: 0; background: transparent; color: var(--text-4); font-size: var(--fs-2xl); cursor: pointer; }
.public-price-query { display: flex; align-items: end; gap: 10px; margin: 18px 20px 8px; padding: 14px 16px; border: 1px solid #c8ddeb; border-radius: 7px; background: #fafdff; }
.public-price-query label { flex: 1 1 auto; display: grid; gap: 6px; color: var(--brand-accent); font-size: var(--fs-base); font-weight: 700; }
.public-price-query input { width: 100%; height: 38px; box-sizing: border-box; padding: 8px 11px; border: 1px solid #bfd0e1; border-radius: 6px; color: var(--text-2); font: inherit; }
.public-price-query input:focus { border-color: #6ca1d5; outline: 0; }
.public-price-query .primary-button { min-height: 38px; padding-inline: 15px; background: #18578f; border-color: #18578f; }
.public-price-query .primary-button:hover { background: #0d4577; border-color: #0d4577; }
.public-price-hint { margin: 0 20px 10px; color: var(--text-4); font-size: var(--fs-md); }
.public-price-table-wrap { margin: 0 20px; overflow-x: auto; border: 1px solid #c9dbe9; border-radius: 7px; }
.public-price-table { width: 100%; min-width: 880px; border-collapse: collapse; table-layout: fixed; }
.public-price-table th, .public-price-table td { padding: 10px 9px; border: 0; border-right: 1px solid #d8e4ed; border-bottom: 1px solid #d8e4ed; color: var(--text-2); text-align: left; vertical-align: middle; }
.public-price-table th { background: #216b8d; color: #fff; white-space: nowrap; font-weight: 700; }
.public-price-table th:nth-child(1) { width: 15%; }.public-price-table th:nth-child(2) { width: 12%; }.public-price-table th:nth-child(3) { width: 19%; }.public-price-table th:nth-child(4) { width: 17%; }.public-price-table th:nth-child(5) { width: 13%; }.public-price-table th:nth-child(6) { width: 9%; }.public-price-table th:nth-child(7) { width: 10%; }.public-price-table th:last-child { width: 72px; }
.public-price-table th:last-child, .public-price-table td:last-child { border-right: 0; text-align: center; }
.public-price-table tbody tr:last-child td { border-bottom: 0; }
.public-price-table tbody tr:hover td { background: #f1f8fd; }
.public-price-item-name { padding: 0; border: 0; background: transparent; color: var(--brand); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.public-price-item-name:hover { color: var(--brand); text-decoration: underline; }
.public-price-quote { color: var(--brand); border-color: #87b7e8; background: #f2f8ff; }
.public-price-quote:hover { color: var(--brand); border-color: #2169a9; background: #e1effc; }
.public-price-empty td { padding: 28px 10px; color: var(--text-4); text-align: center !important; font-weight: 700; }
.public-price-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 14px 20px 0; }
.public-price-pagination[hidden] { display: none; }
.public-price-pagination button { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid #c7d7e5; border-radius: 5px; background: #fff; color: var(--brand-accent); font: inherit; cursor: pointer; }
.public-price-pagination button:hover:not(:disabled) { border-color: #2169a9; background: #edf6fe; }
.public-price-pagination button.active { border-color: #18578f; background: #18578f; color: #fff; font-weight: 700; }
.public-price-pagination button:disabled { opacity: .45; cursor: default; }
.public-price-modal-actions { display: flex; justify-content: flex-end; padding: 16px 20px 18px; }
@media (max-width: 680px) { .public-price-modal { padding: 10px; }.public-price-modal-card { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }.public-price-query { align-items: stretch; flex-direction: column; margin: 14px; }.public-price-query .primary-button { width: 100%; }.public-price-hint, .public-price-table-wrap { margin-inline: 14px; }.public-price-modal-actions { padding: 14px; } }

/* 挑選工項：每列直接引用，取代底部確認。 */
.work-code-table th:last-child,
.work-code-table td:last-child { width: 72px; text-align: center; }
.work-code-quote { min-width: 48px; padding: 5px 9px; border: 1px solid #8fb6dc; border-radius: 5px; background: #f2f8ff; color: var(--brand); font: inherit; font-weight: 700; cursor: pointer; }
.work-code-quote:hover { border-color: #2169a9; background: #e1effc; color: var(--brand); }
/* 編輯項目表格分頁：開關與每頁筆數收納於同一個控制框。 */
.budget-edit-page .table-pagination-panel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  box-sizing: border-box;
  padding: 4px 10px;
  border: 1px solid #b8cde0;
  border-radius: 18px;
  background: #f8fbfe;
}
.budget-edit-page .table-pagination-panel .table-pagination-switch {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
}
.budget-edit-page .table-pagination-panel .table-pagination-controls {
  display: inline-flex !important;
  width: auto;
  min-height: 28px;
  padding: 0;
}
.budget-edit-page .table-pagination-panel .table-pagination-controls[hidden] {
  display: none !important;
}
.budget-edit-page .table-pagination-panel .table-pagination-controls > span:empty {
  display: none;
}
.budget-edit-page .table-pagination-panel .table-pagination-controls select {
  width: 54px;
  height: 28px;
  border-radius: 5px;
}

/* 碳排放推估列表：四階段碳排量皆依工程總價換算顯示。 */
.carbon-estimation-page #budget-module .carbon-stage-value {
  color: var(--brand);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.carbon-estimation-page #budget-module .table-card table {
  min-width: 1180px;
}

/* 碳排放推估列表：手機改用左標題、右內容，避免欄位被遮住。 */
@media (max-width: 768px) {
  .carbon-estimation-page #budget-module .table-card table,
  .carbon-estimation-page #budget-module .table-card tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .carbon-estimation-page #budget-module .table-card thead { display: none !important; }
  .carbon-estimation-page #budget-module .table-card tr {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px;
    overflow: hidden;
    border: 1px solid #d7e4f0;
    border-radius: 8px;
  }
  .carbon-estimation-page #budget-module .table-card td {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: center;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid #e5edf4;
    text-align: right;
    overflow-wrap: anywhere;
  }
  .carbon-estimation-page #budget-module .table-card td:nth-child(7) {
    display: grid !important;
  }
  .carbon-estimation-page #budget-module .table-card td::before {
    content: attr(data-label);
    color: var(--brand-accent);
    font-weight: 600;
    text-align: left;
  }
  .carbon-estimation-page #budget-module .table-card .carbon-stage-value {
    justify-self: end;
    white-space: nowrap;
  }
  .carbon-estimation-page #budget-module .table-card td:last-child { border-bottom: 0; }
  .carbon-estimation-page #budget-module .table-card td.row-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }
  .carbon-estimation-page #budget-module .table-card td.row-actions::before { margin-right: auto; }
}

@media (max-width: 768px) {
  .budget-edit-page .table-pagination-panel {
    width: 100%;
    justify-content: space-between;
    border-radius: 9px;
  }
}
@media (max-width: 760px) {
  .work-code-table tbody td:nth-child(11)::before { content: '功能'; }
  .public-price-pagination { margin-inline: 14px; }
}

/* ===========================================================================
   工項細目編碼維護（project-item-code.html）2026/08/18 改版
   1. 左側篇碼分類可收合成窄條
   2. 左側兩層樹：篇碼（2碼）→ 章碼（前5碼）
   3. 右側清單核心 8 欄 + 可展開的其他欄位
   4. 新增暫行碼／編輯彈窗：逐碼引導 + 規則表 + 20 欄表單
   =========================================================================== */

/* 只給螢幕閱讀器看的文字（視覺上隱藏，但不是 display:none，輔助科技仍讀得到） */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- 1. 側欄收合 ---- */
.code-maintenance-layout.is-tree-collapsed {
    grid-template-columns: calc(46px * var(--fs-scale)) 1fr;
}

.code-tree-collapse-button {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    padding: 0;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #fff;
    color: var(--text-3);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.code-tree-collapse-button:hover {
    background: #f3f8fd;
    border-color: #9cc3ef;
    color: var(--brand);
}

/* 收合後才出現的窄直條 */
.code-tree-rail {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 2px;
}

.code-tree-rail-button {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #9cc3ef;
    border-radius: 6px;
    background: #f3f8fd;
    color: var(--brand);
    cursor: pointer;
}

.code-tree-rail-button:hover {
    background: #e2effb;
}

.code-tree-rail-label {
    writing-mode: vertical-rl;
    letter-spacing: 3px;
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.code-tree-card.is-collapsed {
    padding: 12px 8px;
    min-height: 180px;
    align-items: center;
}

.code-tree-card.is-collapsed .code-tree-header,
.code-tree-card.is-collapsed .code-tree-scroll {
    display: none;
}

.code-tree-card.is-collapsed .code-tree-rail {
    display: flex;
}

/* ---- 2. 兩層樹：篇碼 → 章碼 ---- */
.code-division-block {
    margin-bottom: 2px;
}

.code-division-caret {
    flex: 0 0 12px;
    color: var(--text-4);
    font-size: var(--fs-xs);
    transition: transform .15s ease;
}

.code-division-block.is-expanded .code-division-caret {
    transform: rotate(90deg);
    color: var(--brand);
}

.code-division-code {
    flex: 0 0 auto;
    min-width: 24px;
    color: var(--brand-accent);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.code-chapter-list {
    margin: 2px 0 8px 22px;
    border-left: 1px dashed #dce8ef;
    padding-left: 6px;
    display: grid;
    gap: 1px;
}

.code-chapter-item {
    display: flex;
    align-items: baseline;
    gap: 7px;
    width: 100%;
    padding: 5px 7px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: var(--fs-sm);
    text-align: left;
    cursor: pointer;
}

.code-chapter-item:hover {
    background: #f3f8fd;
}

.code-chapter-item.is-selected {
    background: #e8f1fb;
    color: var(--brand);
    font-weight: 700;
}

.code-chapter-code {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--brand-accent);
}

.code-chapter-item.is-selected .code-chapter-code {
    color: var(--brand);
}

.code-chapter-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-chapter-empty {
    padding: 8px 7px;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

/* ---- 3. 右側清單：範圍提示、欄寬、展開列 ---- */
.code-scope-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 9px 12px;
    border: 1px solid #cfe4f7;
    border-radius: 7px;
    background: #f4f9fe;
    color: var(--brand-accent);
    font-size: var(--fs-sm);
}

.code-scope-hint i {
    color: var(--brand-accent);
}

/* 不出現水平捲軸：styles.css 有一條全站的 table { min-width: 930px }，就是它撐出捲軸的。
   這裡把它蓋掉成 min-width:0，讓表格寬度就是容器寬度；欄寬全部壓在 100% 以內，
   內容過長改成換行，不靠捲動。 */
#project-item-code-module .code-item-table {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
}

/* 清單欄寬（2026/08/21 重排）：
   展開鈕移除、多了延伸碼，欄位變成
   基本工項代碼｜延伸碼｜工項中文名稱｜單位｜單價｜單價分析｜項目種類｜備註欄｜功能。
   短欄位給剛好的寬度就好，把空間讓給會斷行的工項中文名稱。 */
#project-item-code-module .code-item-table th:nth-child(1),
#project-item-code-module .code-item-table td:nth-child(1) { width: calc(118px * var(--fs-scale)); }
#project-item-code-module .code-item-table th:nth-child(2),
#project-item-code-module .code-item-table td:nth-child(2) { width: calc(84px * var(--fs-scale)); }
#project-item-code-module .code-item-table th:nth-child(3),
#project-item-code-module .code-item-table td:nth-child(3) { width: auto; }
#project-item-code-module .code-item-table th:nth-child(4),
#project-item-code-module .code-item-table td:nth-child(4) { width: calc(76px * var(--fs-scale)); }
#project-item-code-module .code-item-table th:nth-child(5),
#project-item-code-module .code-item-table td:nth-child(5) { width: calc(88px * var(--fs-scale)); }
#project-item-code-module .code-item-table th:nth-child(6),
#project-item-code-module .code-item-table td:nth-child(6) { width: calc(80px * var(--fs-scale)); }
#project-item-code-module .code-item-table th:nth-child(7),
#project-item-code-module .code-item-table td:nth-child(7) { width: calc(88px * var(--fs-scale)); }
#project-item-code-module .code-item-table th:nth-child(8),
#project-item-code-module .code-item-table td:nth-child(8) { width: 15%; }
#project-item-code-module .code-item-table th:nth-child(9),
#project-item-code-module .code-item-table td:nth-child(9) { width: calc(116px * var(--fs-scale)); }

/* 對齊：表頭與內容共用同一組 .ta-* class，永遠同向 */
#project-item-code-module .code-item-table th.ta-left,
#project-item-code-module .code-item-table td.ta-left { text-align: left; }
#project-item-code-module .code-item-table th.ta-center,
#project-item-code-module .code-item-table td.ta-center { text-align: center; }
#project-item-code-module .code-item-table th.ta-right,
#project-item-code-module .code-item-table td.ta-right { text-align: right; }

/* 數值欄用等寬數字，右對齊才會整齊 */
#project-item-code-module .code-item-table td.ta-right {
    font-variant-numeric: tabular-nums;
}

#project-item-code-module .code-item-table th,
#project-item-code-module .code-item-table td {
    padding-right: 8px;
    padding-left: 8px;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: var(--fs-sm);
}

/* 表頭字太長時（例如「基本工項代碼」）允許換行，不撐開欄寬 */
#project-item-code-module .code-item-table th {
    white-space: normal;
    line-height: 1.35;
}

/* 10 碼代碼固定寬度字型，靠壓縮字距讓它剛好塞得下一行 */
#project-item-code-module .code-item-table td:nth-child(2) b {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.2px;
}

/* 功能欄三顆按鈕：縮小間距，剛好排得下 */
#project-item-code-module .code-item-table .row-actions {
    white-space: nowrap;
}

#project-item-code-module .code-item-table .row-actions .icon-action {
    margin-right: 3px;
}

#project-item-code-module .code-item-table .row-actions .icon-action:last-child {
    margin-right: 0;
}

.code-row-expander {
    padding-right: 0 !important;
    padding-left: 6px !important;
    text-align: center;
}

.code-row-expand-button {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #d7e3ed;
    border-radius: 5px;
    background: #fff;
    color: var(--text-4);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, color .15s ease;
}

.code-row-expand-button:hover {
    background: #f3f8fd;
    border-color: #9cc3ef;
    color: var(--brand);
}

tr.is-expanded .code-row-expand-button {
    transform: rotate(90deg);
    background: #e8f1fb;
    border-color: #9cc3ef;
    color: var(--brand);
}

#project-item-code-module tr.code-row-detail td {
    padding: 0;
    background: #f7fbff;
    border-top: 0;
}

.code-row-detail-inner {
    padding: 14px 18px 16px 44px;
    border-left: 3px solid #9cc3ef;
}

.code-row-detail-title {
    margin-bottom: 10px;
    color: var(--brand-accent);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.code-row-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(calc(190px * var(--fs-scale)),1fr));
    gap: 8px 18px;
    margin: 0;
}

.code-row-detail-grid > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #dfeaf3;
}

.code-row-detail-grid dt {
    flex: 0 0 92px;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.code-row-detail-grid dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-sm);
    overflow-wrap: break-word;
}

.code-row-detail-note {
    margin-top: 10px;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

/* ---- 4. 新增暫行碼／編輯彈窗 ---- */
/* 2026/08/21 加寬：規則表 5 欄 ＋ 底下「基本資料」6 欄要排在同一列，
   1180px 扣掉內距之後只剩 1100 左右，名稱欄擠成一團。放寬到 1320px。 */
.code-item-modal-card {
    width: min(1320px, 96vw);
    max-width: 96vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

/* 上下版面：新增時「先選碼、再填資料」，編輯時「先看資料、規則表在下面」。
   兩種模式都是單欄，只是用 order 決定誰在上面。 */
.code-item-modal-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 2px 8px;
}

.code-item-modal-body .code-wizard { order: 1; }
.code-item-modal-body .code-item-form { order: 2; }

/* 逐碼引導 */
.code-wizard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* 章碼選擇器與代碼預覽並排在最上面一列 */
/* 章碼下拉在 2026/08/21 移除（改由左側樹決定），「完整工項代碼」拉滿整列 */
.code-wizard-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

@media (max-width: 820px) {
    .code-wizard-head {
        grid-template-columns: minmax(0, 1fr);
    }
}

.code-wizard-preview {
    padding: 12px 14px;
    border: 1px solid #cfe4f7;
    border-radius: 8px;
    background: #f4f9fe;
}

.code-wizard-preview-label {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.code-wizard-preview-code {
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 6px 0 4px;
    font-family: "Consolas", "Menlo", monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
}

.code-wizard-fixed {
    color: var(--brand);
}

.code-wizard-slot {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    padding: 0 2px;
    border-bottom: 2px solid #b9d3ea;
    color: var(--text-4);
}

.code-wizard-slot.is-filled {
    border-bottom-color: #2a75b4;
    color: var(--brand);
}

.code-wizard-preview-chapter {
    color: var(--text-2);
    font-size: var(--fs-xs);
    line-height: 1.6;
}

.code-wizard-path {
    color: var(--brand-accent);
}

/* 五個碼位並排成一列（畫面窄時自動折行） */

@media (max-width: 1080px) {
    
}

@media (max-width: 720px) {
    
}

/* 並排之後每欄變窄，選項改成一列一個往下排，長名稱才看得完整 */
.code-wizard-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 190px;
    overflow-y: auto;
}

/* 右：20 欄表單 */
.code-item-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.code-form-group {
    border: 1px solid #dfe8ef;
    border-radius: 8px;
    padding: 11px 13px 13px;
    background: #fff;
}

.code-form-group-title {
    margin-bottom: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid #eaf1f7;
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.code-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(calc(160px * var(--fs-scale)),1fr));
    gap: 11px 13px;
}

.code-form-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.code-form-field.is-wide {
    grid-column: 1 / -1;
}

.code-form-field > span {
    margin-bottom: 5px;
    color: var(--text-3);
    font-size: var(--fs-xs);
}

.code-form-field > span em {
    color: var(--text-4);
    font-style: normal;
}

.code-form-required {
    margin-left: 3px;
    color: #d13f3f;
    font-style: normal;
}

.code-form-field input,
.code-form-field select,
.code-form-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #cad5de;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: 13px "Noto Sans TC", Arial, sans-serif;
}

.code-form-field input:read-only {
    background: #f4f7f9;
    color: var(--text-3);
    font-family: "Consolas", "Menlo", monospace;
    font-weight: 700;
}

.code-form-field textarea {
    resize: vertical;
}

/* 表單並排：上下版面之後寬度變寬，一列可放更多欄 */
.code-form-grid {
    grid-template-columns: repeat(auto-fill,minmax(calc(190px * var(--fs-scale)),1fr));
}

@media (max-width: 960px) {
    .code-maintenance-layout.is-tree-collapsed {
        grid-template-columns: 1fr;
    }

    .code-tree-card.is-collapsed {
        min-height: 0;
    }

    .code-tree-rail {
        flex-direction: row;
    }

    .code-tree-rail-label {
        writing-mode: horizontal-tb;
        letter-spacing: 1px;
    }
}

@media (max-width: 600px) {
    #project-item-code-module .code-item-table {
        table-layout: auto;
        min-width: 0;
        width: 100%;
    }

    #project-item-code-module .code-item-table th:nth-child(n),
    #project-item-code-module .code-item-table td:nth-child(n) {
        width: 100%;
    }

    .code-row-detail-inner {
        padding: 12px;
        border-left: 0;
    }
}

/* ---- 5. 編輯模式：基本資料在上、碼位與規則表在下（2026/08/18） ---- */
.code-item-modal-body.is-edit-mode .code-item-form {
    order: 1;
}

.code-item-modal-body.is-edit-mode .code-wizard {
    order: 2;
    border-top: 1px dashed #cfe4f7;
    padding-top: 14px;
}

/* 編輯時碼位只是對照用，選項清單壓矮一點 */
.code-item-modal-body.is-edit-mode .code-wizard-options {
    max-height: 120px;
}

.code-wizard-locked-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid #e5dcc0;
    border-radius: 7px;
    background: #fdfaef;
    color: #8a7434;
    font-size: var(--fs-sm);
}

.code-wizard-locked-hint i {
    color: #8b722f;
}

/* ---- 6. 單價分析彈窗：樣式改寫於檔尾的 .upa-* 區塊 ---- */

/* 功能欄的「單價分析」按鈕 */
.analysis.icon-action {
    border: 1px solid #f0cd9a;
    color: #a06919;
    background: #fffaf2;
    margin-right: 7px;
}

.analysis.icon-action.has-data {
    border-color: #d9822b;
    background: #fdf0dd;
    color: #a35f0f;
}

@media (max-width: 900px) {
    .code-analysis-hint {
        font-size: var(--fs-xs);
    }

    
}

/* ---- 7. 新增暫行碼：彈窗內的章碼（前5碼）選擇器 ---- */

/* ---- 規則表（新版樣式，放在最後蓋掉舊版） ---- */
/* 這一頁較早的版本在本檔約 9030 行處已有一組 .code-rule-toggle / .code-rule-panel，
   為避免改到那組舊樣式影響其他區塊，新版一律放在檔尾靠來源順序覆蓋。 */

.code-rule-panel {
    margin: 0;
    border: 1px solid #d7e3ed;
    border-top: 1px solid #d7e3ed;
    border-radius: 10px;
    padding: 0;
    background: #fff;
    color: var(--text-2);
    font-size: var(--fs-xs);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(29, 86, 140, .06);
}

/* 規則表抬頭：章碼徽章＋章名＋備註 */
.code-rule-meta {
    padding: 11px 14px;
    border-bottom: 1px solid #e3ebf2;
    background: linear-gradient(180deg, #f7fbff 0%, #eff6fd 100%);
}

.code-rule-meta-main {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--brand);
    font-size: var(--fs-md);
}

.code-rule-chapter-chip {
    padding: 2px 9px;
    border-radius: 999px;
    background: #2a75b4;
    color: #fff;
    font-family: "Consolas", "Menlo", monospace;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .5px;
}

.code-rule-note,
.code-rule-warn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    font-size: var(--fs-xs);
    line-height: 1.6;
}

.code-rule-note { color: var(--text-4); }
.code-rule-note i { color: var(--brand-accent); }
.code-rule-warn { color: #9b6b1d; }
.code-rule-warn i { color: #986d1d; }

/* 五個碼位並排，欄與欄之間用細線隔開，像紙本對照表 */
.code-rule-columns {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: #e3ebf2;
    gap: 1px;
}

.code-rule-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
}

.code-rule-column-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 2px solid #cfe0ee;
    background: #f2f7fc;
}

.code-rule-column.is-picked .code-rule-column-head {
    border-bottom-color: #2a75b4;
    background: #e6f1fb;
}

/* 這幾個小方塊的邊長是配著字級訂的，所以也要跟著 --fs-scale 一起縮放，
   否則使用者切到「大」的時候裡面的字會被裁掉。 */
.code-rule-digit-badge {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: calc(20px * var(--fs-scale));
    height: calc(20px * var(--fs-scale));
    border-radius: 5px;
    background: #2a75b4;
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.code-rule-column-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--brand);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.code-rule-column-picked {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 4px;
    background: #1e7058;
    color: #fff;
    font-family: "Consolas", "Menlo", monospace;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.code-rule-column-body {
    flex: 1 1 auto;
    max-height: 300px;
    overflow-y: auto;
    padding: 6px;
}

.code-rule-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.code-rule-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 4px 6px;
    border-radius: 5px;
    color: var(--text-2);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.code-rule-item:nth-child(even) {
    background: #f8fbfd;
}

.code-rule-item:hover {
    background: #f0f7fd;
}

.code-rule-code {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: calc(20px * var(--fs-scale));
    height: calc(20px * var(--fs-scale));
    padding: 0 4px;
    border: 1px solid #dbe6ef;
    border-radius: 4px;
    background: #fff;
    color: var(--brand-accent);
    font-family: "Consolas", "Menlo", monospace;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.code-rule-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.code-rule-item.is-active {
    background: #e6f1fb;
    box-shadow: inset 2px 0 0 #2a75b4;
    color: var(--brand);
    font-weight: 700;
}

.code-rule-item.is-active .code-rule-code {
    border-color: #2a75b4;
    background: #2a75b4;
    color: #fff;
}

@media (max-width: 1080px) {
    .code-rule-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .code-rule-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .code-rule-column-body {
        max-height: 200px;
    }
}

/* ---- 8. 真實規則表：碼位搜尋、合併碼位、章碼前綴（2026/08/18） ---- */

/* 代碼預覽的格子改成動態產生（span=2 的碼位會有兩格且連在一起） */
.code-wizard-slots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.code-wizard-slot.is-merged {
    border-bottom-style: dashed;
}

.code-wizard-slot.is-merged.is-filled {
    border-bottom-style: solid;
}

.code-wizard-prefix-tag {
    display: inline-block;
    margin-right: 5px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #5b6f82;
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.code-wizard-norule {
    color: #9b6b1d;
}

/* 碼位步驟的欄數依實際步驟數而定（01450 只有四步） */

@media (max-width: 1080px) {
    
}

@media (max-width: 720px) {
    
}

/* 碼位內的搜尋框（選項多的碼位才會出現，例如 01450 的 CNS 檢驗項目） */

/* 規則表：欄數依步驟數；合併碼位的徽章要寬一點放得下「8~9」 */
.code-rule-columns {
    grid-template-columns: repeat(var(--rule-col-count, 5), minmax(0, 1fr));
}

@media (max-width: 1080px) {
    .code-rule-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .code-rule-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.code-rule-digit-badge.is-wide {
    width: auto;
    min-width: 34px;
    padding: 0 5px;
    font-size: var(--fs-xs);
    letter-spacing: -.3px;
}

.code-rule-prefix-chip {
    padding: 2px 8px;
    border-radius: 999px;
    background: #5b6f82;
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.code-rule-more {
    padding: 6px;
    color: var(--text-4);
    font-size: var(--fs-xs);
    text-align: center;
}

/* ===========================================================================
   帳號異動清單（account-change-log.html）2026/08/18 新增
   唯讀稽核紀錄：哪個帳號、什麼時間、對哪個帳號、做了什麼、改前改後是什麼。
   =========================================================================== */

.acl-page-hint {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 14px;
    padding: 11px 14px;
    border: 1px solid #cfe4f7;
    border-radius: 8px;
    background: #f4f9fe;
    color: var(--brand-accent);
    font-size: var(--fs-sm);
    line-height: 1.7;
}

.acl-page-hint i {
    margin-top: 3px;
    color: var(--brand-accent);
    font-size: var(--fs-base);
}

.acl-page-hint b {
    color: var(--brand);
}

/* ---- 色調：一種異動類型一個顏色，清單徽章與明細抬頭共用 ---- */

/* ---- 查詢列：四個條件＋三顆按鈕排成一整排 ---- */
#account-log-module .acl-search-form {
    grid-template-columns: minmax(calc(140px * var(--fs-scale)),.85fr) minmax(calc(140px * var(--fs-scale)),.85fr) minmax(calc(130px * var(--fs-scale)),.8fr) minmax(220px,1.5fr) auto;
    gap: 14px;
    align-items: end;
}

/* 三顆功能鍵只留圖示，不顯示中文（沿用其他頁面的做法） */
#account-log-module .search-button-label {
    display: none;
}

#account-log-module .form-actions {
    display: flex;
    gap: 8px;
}

#account-log-module .search-icon-button {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
}

@media (max-width: 1080px) {
    #account-log-module .acl-search-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #account-log-module .acl-search-form .form-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 600px) {
    #account-log-module .acl-search-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- 清單 ---- */
#account-log-module .acl-table {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
}

#account-log-module .acl-table th:nth-child(1),
#account-log-module .acl-table td:nth-child(1) { width: 46px; }
#account-log-module .acl-table th:nth-child(2),
#account-log-module .acl-table td:nth-child(2) { width: 96px; }
#account-log-module .acl-table th:nth-child(3),
#account-log-module .acl-table td:nth-child(3) { width: 116px; }
#account-log-module .acl-table th:nth-child(4),
#account-log-module .acl-table td:nth-child(4) { width: 88px; }
#account-log-module .acl-table th:nth-child(5),
#account-log-module .acl-table td:nth-child(5) { width: 96px; display: table-cell; }
#account-log-module .acl-table th:nth-child(6),
#account-log-module .acl-table td:nth-child(6) { width: 19%; }
#account-log-module .acl-table th:nth-child(7),
#account-log-module .acl-table td:nth-child(7) { width: auto; }
#account-log-module .acl-table th:nth-child(8),
#account-log-module .acl-table td:nth-child(8) { width: 62px; }
#account-log-module .acl-table th:nth-child(9),
#account-log-module .acl-table td:nth-child(9) { width: 58px; }

#account-log-module .acl-table th,
#account-log-module .acl-table td {
    padding: 9px 8px;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: var(--fs-sm);
    vertical-align: middle;
}

/* 對齊：表頭與內容共用 .ta-*，永遠同向 */
#account-log-module .acl-table th.ta-left,
#account-log-module .acl-table td.ta-left { text-align: left; }
#account-log-module .acl-table th.ta-center,
#account-log-module .acl-table td.ta-center { text-align: center; }
#account-log-module .acl-table th.ta-right,
#account-log-module .acl-table td.ta-right { text-align: right; }

.acl-time,
.acl-who {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.acl-time b,
.acl-who b {
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.acl-time small,
.acl-who small {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.acl-role {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
}

.acl-role-admin { background: #e8f1fb; color: var(--brand); }
.acl-role-vendor { background: #f1eefb; color: var(--brand); }

.acl-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
}

.acl-badge i { font-size: var(--fs-xs); }

.acl-badge.acl-tone-info   { background: #eef4f9; color: var(--brand-accent); }
.acl-badge.acl-tone-edit   { background: #e8f1fb; color: var(--brand-accent); }
.acl-badge.acl-tone-warn   { background: #fdf3e3; color: #a06919; }
.acl-badge.acl-tone-good   { background: #eaf7f0; color: #1e7058; }
.acl-badge.acl-tone-danger { background: #fdeff0; color: #c0424f; }

.acl-change {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.acl-change i {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.acl-change-before {
    padding: 2px 7px;
    border-radius: 5px;
    background: #f6f8fa;
    color: var(--text-4);
    text-decoration: line-through;
}

.acl-change-after {
    padding: 2px 7px;
    border-radius: 5px;
    background: #eaf7f0;
    color: #1e7058;
    font-weight: 600;
}

.acl-nochange {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.acl-result {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
}

.acl-result-ok { background: #eaf7f0; color: #1e7058; }
.acl-result-ng { background: #fdeff0; color: #c0424f; }

#account-log-module .acl-empty {
    padding: 30px;
    color: var(--text-4);
    text-align: center;
}

/* ---- 明細彈窗 ---- */
.acl-detail-card {
    width: min(780px, 95vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

/* 抬頭與底部按鈕列維持整條滿版（跟全站其他彈窗一致），
   內容區自己留內距，不要貼著卡片邊緣。 */
.acl-detail-card .role-edit-modal-header {
    padding: 16px 26px;
}

.acl-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 26px 24px;
}

.acl-detail-card .role-edit-modal-actions {
    padding: 16px 26px;
}

.acl-detail-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 9px;
    background: #f7fafc;
}

.acl-detail-icon {
    display: inline-grid;
    place-items: center;
    width: calc(38px * var(--fs-scale));
    height: calc(38px * var(--fs-scale));
    border-radius: 10px;
    font-size: var(--fs-lg);
}

.acl-detail-head.acl-tone-info   .acl-detail-icon { background: #eef4f9; color: var(--brand-accent); }
.acl-detail-head.acl-tone-edit   .acl-detail-icon { background: #e8f1fb; color: var(--brand-accent); }
.acl-detail-head.acl-tone-warn   .acl-detail-icon { background: #fdf3e3; color: #a06919; }
.acl-detail-head.acl-tone-good   .acl-detail-icon { background: #eaf7f0; color: #1e7058; }
.acl-detail-head.acl-tone-danger .acl-detail-icon { background: #fdeff0; color: #c0424f; }

.acl-detail-action {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-1);
    font-size: var(--fs-base);
    font-weight: 700;
}

.acl-detail-sub {
    margin-top: 3px;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

/* 誰 → 對誰 */
.acl-detail-flow {
    display: grid;
    grid-template-columns: minmax(0,1fr) calc(66px * var(--fs-scale)) minmax(0,1fr);
    gap: 10px;
    align-items: center;
}

.acl-party {
    padding: 12px 14px;
    border: 1px solid #dfe8ef;
    border-radius: 9px;
    background: #fff;
}

.acl-party.is-target {
    border-color: #cfe4f7;
    background: #f7fbff;
}

.acl-party-label {
    margin-bottom: 6px;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.acl-party-account {
    color: var(--brand);
    font-family: "Consolas", "Menlo", monospace;
    font-size: var(--fs-base);
    font-weight: 700;
}

.acl-party-name {
    margin-top: 2px;
    color: var(--text-2);
    font-size: var(--fs-sm);
}

.acl-party-org {
    margin: 2px 0 7px;
    color: var(--text-4);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.acl-party-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--brand-accent);
}

.acl-party-arrow i { font-size: var(--fs-lg); }

.acl-party-arrow small {
    color: var(--text-4);
    font-size: var(--fs-xs);
    text-align: center;
    line-height: 1.3;
}

.acl-detail-block {
    border: 1px solid #dfe8ef;
    border-radius: 9px;
    padding: 11px 13px 13px;
}

.acl-detail-block-title {
    margin-bottom: 9px;
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.acl-diff {
    display: grid;
    grid-template-columns: minmax(0,1fr) calc(26px * var(--fs-scale)) minmax(0,1fr);
    gap: 8px;
    align-items: center;
}

.acl-diff > i {
    color: var(--text-4);
    text-align: center;
}

.acl-diff-col {
    padding: 9px 11px;
    border-radius: 7px;
}

.acl-diff-col span {
    display: block;
    margin-bottom: 3px;
    font-size: var(--fs-xs);
}

.acl-diff-col b {
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}

.acl-diff-col.is-before { background: #f6f8fa; }
.acl-diff-col.is-before span { color: var(--text-4); }
.acl-diff-col.is-before b { color: var(--text-4); text-decoration: line-through; }

.acl-diff-col.is-after { background: #eaf7f0; }
.acl-diff-col.is-after span { color: var(--text-4); }
.acl-diff-col.is-after b { color: #1e7058; }

.acl-nochange-block,
.acl-reason {
    padding: 9px 11px;
    border-radius: 7px;
    background: #f7fafc;
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1.7;
}

.acl-nochange-block i { color: var(--brand-accent); margin-right: 5px; }

.acl-reason.is-fail {
    background: #fdeff0;
    color: #a93c48;
}

.acl-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(calc(180px * var(--fs-scale)),1fr));
    gap: 8px 16px;
    margin: 0;
}

.acl-detail-grid > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #e5edf4;
}

.acl-detail-grid dt {
    flex: 0 0 72px;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.acl-detail-grid dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .acl-detail-flow {
        grid-template-columns: minmax(0, 1fr);
    }

    .acl-party-arrow {
        flex-direction: row;
        gap: 8px;
    }

    .acl-party-arrow i {
        transform: rotate(90deg);
    }

    #account-log-module .acl-table {
        table-layout: auto;
    }

    #account-log-module .acl-table th:nth-child(n),
    #account-log-module .acl-table td:nth-child(n) {
        width: auto;
    }
}

/* 單價分析彈窗要能疊在「單價分析項目」彈窗（.analysis-modal，z-index:80）之上，
   因為 budget_edit.html 是從那個彈窗裡點開這個的。 */
.code-analysis-modal {
    z-index: 90;
}

/* ===========================================================================
   單價分析彈窗（js/unit-price-analysis.js）2026/08/18 重新設計
   一次只看一個基本工項：上方摘要卡交代「分析誰、算出多少」，下方是乾淨的明細表。
   配色刻意收斂：中性灰藍表頭 + 斑馬紋，全表只有「金額」用站上的藍當重點色，
   不再出現橘／黃／綠多色標示。
   =========================================================================== */

/* ---- 摘要卡 ---- */

/* ---- 表格抬頭列 ---- */

/* ---- 明細表 ---- */

/* 欄寬與對齊：同一條規則同時套 th 與 td，表頭與內容必然一致 */
/* 彈窗變寬之後，兩個名稱欄可以拿到更多空間，長名稱不必擠成兩三行 */

/* 下拉：基本工項與分析工項名稱 */

/* 表格放不下的欄位（備註／百分比）填了之後在名稱下方以小字顯示 */

/* 金額是全表唯一的重點色 */

/* 合計列 */

/* 拖曳 */

/* 分析勾勾的 hover 也一起統一 */
.budget-edit-page .estimate-table .analysis-action.is-enabled:hover,
.budget-edit-page .analysis-table .analysis-action.is-enabled:hover {
    border-color: #66ad84;
    background: #e2f4ea;
    color: #1e6b52;
}

/* 單價分析項目彈窗：細項名稱做成可點擊（開工項編輯），
   樣式比照工項清單的「項目及說明」。 */
.budget-edit-page .analysis-table .detail-name-text {
    border-bottom: 1px dashed #b9cddd;
    color: var(--brand);
    cursor: pointer;
}

.budget-edit-page .analysis-table .detail-name-text:hover {
    border-bottom-color: #2a75b4;
    color: var(--brand-accent);
}

.budget-edit-page .analysis-table .detail-name-text:focus-visible {
    outline: 2px solid #2a75b4;
    outline-offset: 2px;
}

.budget-edit-page .analysis-table tr.is-locked .detail-name-text {
    border-bottom: 0;
    color: var(--text-4);
    cursor: not-allowed;
}

/* 工項類別：維持原本的上下排列（.item-category 本來就是單欄 grid），
   只補上每個下拉的小標題樣式。 */
.budget-edit-page .item-category label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--text-3);
    font-size: var(--fs-sm);
}

/* 工項編輯要能疊在「單價分析項目」彈窗（.analysis-modal，z-index:80）之上，
   因為它是從那個彈窗裡點細項名稱開出來的。單價分析（.upa-modal）再更上層。 */
.item-modal {
    z-index: 95;
}

/* 碳排工項編輯（2026/08/21）：
   原本只從明細表的碳排欄開，跟 .analysis-modal 一樣是 80。
   兩個一樣高的時候，後出現在 HTML 裡的那個蓋在上面——碳排彈窗寫在前面，
   所以從「單價分析項目」按碳排時它是開在後面，看起來像沒反應。
   現在它可能從 .analysis-modal(80) 或 .upa-modal(95) 開出來，所以要比兩者都高。 */
.carbon-modal {
    z-index: 100;
}

/* ---- 暫存說明：儲存前記錄這一版的目的，內容會進版本管理的「說明」欄 ---- */
.draft-note-modal {
    position: fixed;
    z-index: 96;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.draft-note-modal[hidden] {
    display: none;
}

.draft-note-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 42, 53, .48);
}

.draft-note-card {
    position: relative;
    width: min(520px, 100%);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(22, 48, 64, .3);
    overflow: hidden;
}

.draft-note-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid #dce8ef;
    background: #f7fbfd;
}

.draft-note-header h2 {
    margin: 0;
    color: var(--text-3);
    font-size: var(--fs-base);
    font-weight: 700;
}

.draft-note-close {
    border: 0;
    background: transparent;
    color: var(--text-4);
    font-size: var(--fs-lg);
    cursor: pointer;
}

.draft-note-close:hover {
    color: var(--text-3);
}

.draft-note-body {
    padding: 20px 18px 16px;
    background: #f4f9fd;
}

.draft-note-body input {
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    padding: 0 11px;
    border: 1px solid #a9bccd;
    border-radius: 4px;
    background: #fff;
    color: var(--text-2);
    font: 14px "Noto Sans TC", Arial, sans-serif;
}

.draft-note-body input:focus {
    outline: 0;
    border-color: #2a75b4;
    box-shadow: 0 0 0 3px rgba(42, 117, 180, .12);
}

.draft-note-hint {
    margin: 14px 0 0;
    color: #d0393f;
    font-size: var(--fs-sm);
}

.draft-note-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    background: #f4f9fd;
    border-top: 1px solid #e2ecf3;
}

.draft-note-actions .primary-button,
.draft-note-actions .secondary-button {
    min-width: 84px;
}

/* ===========================================================================
   專案基本資料 →「專案計算方式」頁籤（budget_basic.html）2026/08/18 新增
   四個區塊：差額處理方式／特殊計算、參數設定、項次編號、設定小數位數
   =========================================================================== */
.calc-panel {
    display: grid;
    gap: 18px;
}

.calc-panel[hidden] {
    display: none;
}

.calc-section {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.calc-section-title {
    padding: 11px 18px;
    border-bottom: 1px solid #dce8ef;
    background: #f2f7fc;
    color: var(--brand);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.5;
}

.calc-section-body {
    display: grid;
    gap: 11px;
    padding: 16px 18px 18px;
}

.calc-sub-title {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-sm);
}

/* 單選／勾選 */
.calc-radio-group {
    display: grid;
    gap: 9px;
}

.calc-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
}

.calc-radio,
.calc-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-2);
    font-size: var(--fs-sm);
    cursor: pointer;
}

.calc-radio input,
.calc-check input {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    accent-color: #286fae;
    cursor: pointer;
}

.calc-check input:disabled,
.calc-check input:disabled + span {
    cursor: not-allowed;
    opacity: .55;
}

.calc-check-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.calc-check-inline input[type="number"] {
    width: 78px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid #cad5de;
    border-radius: 5px;
    background: #fff;
    color: var(--text-2);
    font: 13px "Noto Sans TC", Arial, sans-serif;
    text-align: right;
}

.calc-check-inline input[type="number"]:disabled {
    background: #f4f7f9;
    color: var(--text-4);
}

.calc-inline-hint {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

/* 注意文字：照原系統用色區分 */
.calc-note {
    margin: 4px 0 0;
    color: #d0393f;
    font-size: var(--fs-sm);
    line-height: 1.7;
}

.calc-note-green {
    color: #2b8354;
}

.calc-note-orange {
    color: #a86519;
}

/* 項次編號 */
.calc-fieldset {
    margin: 0;
    padding: 12px 14px 14px;
    border: 1px solid #dfe8ef;
    border-radius: 8px;
}

.calc-fieldset legend {
    padding: 0 7px;
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.calc-seq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 14px;
    align-items: start;
}

.calc-seq-levels {
    display: grid;
    gap: 8px;
}

.calc-seq-level {
    display: grid;
    grid-template-columns: calc(68px * var(--fs-scale)) minmax(0,1fr);
    align-items: center;
    gap: 8px;
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.calc-seq-level select {
    width: 100%;
    height: 32px;
    padding: 0 9px;
    border: 1px solid #cad5de;
    border-radius: 5px;
    background: #fff;
    color: var(--text-2);
    font: 13px "Noto Sans TC", Arial, sans-serif;
}

.calc-seq-actions {
    margin-top: 12px;
    text-align: right;
}

.calc-seq-actions .secondary-button {
    height: 30px;
    padding: 0 14px;
    font-size: var(--fs-sm);
}

.calc-seq-joiner select {
    height: 32px;
    padding: 0 9px;
    border: 1px solid #cad5de;
    border-radius: 5px;
    background: #fff;
    color: var(--text-2);
    font: 13px "Noto Sans TC", Arial, sans-serif;
}

.calc-seq-joiner select:disabled {
    background: #f4f7f9;
    color: var(--text-4);
}

.calc-seq-explain {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 7px;
    background: #f7fafc;
    color: var(--text-2);
    font-size: var(--fs-xs);
    line-height: 1.75;
}

.calc-seq-explain p {
    margin: 0 0 5px;
}

.calc-seq-explain-title {
    font-weight: 700;
    color: var(--text-2);
}

.calc-seq-explain .is-red {
    color: #d0393f;
}

.calc-seq-sample {
    margin: 0 0 10px;
    padding-left: 20px;
    color: var(--text-4);
}

/* 小數位數 */
/* 固定兩欄：第一列＝分析主項單價／分析項數量，第二列＝分析項單價／分析項複價。
   用 max 值把格子寬度壓在原本的尺寸，欄位不會因為變成兩欄就被拉寬。 */
.calc-decimal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(230px, 300px));
    justify-content: start;
    gap: 10px 18px;
}

@media (max-width: 620px) {
    .calc-decimal-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.calc-decimal-grid > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid #e5edf3;
    border-radius: 7px;
    background: #fbfcfe;
    color: var(--text-2);
    font-size: var(--fs-sm);
}

.calc-decimal-grid > label > span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-4);
    font-size: var(--fs-xs);
    white-space: nowrap;
}

.calc-decimal-grid input {
    width: 62px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #cad5de;
    border-radius: 5px;
    background: #fff;
    color: var(--text-2);
    font: 13px "Noto Sans TC", Arial, sans-serif;
    text-align: right;
}

.calc-decimal-grid input:disabled {
    background: #f4f7f9;
    color: var(--text-4);
}

.calc-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 900px) {
    .calc-seq-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- 單價分析：單筆編輯小視窗（表格上放不下的欄位） ---- */

/* ===========================================================================
   專案基本資料 →「案件資訊」頁籤（budget_basic.html）2026/08/18 依現行系統重排
   ① 專案基本資訊（含下方子頁籤）② 其他資訊 ③ 碳排管理
   =========================================================================== */
.case-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    padding: 16px 20px 0;
}

.case-block.case-two-col {
    padding-top: 14px;
}

.case-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.case-field .is-required::before {
    margin-right: 3px;
    color: #d0393f;
    content: '*';
}

.case-field input,
.case-field select,
.case-field textarea {
    width: 100%;
    box-sizing: border-box;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #cad5de;
    border-radius: 5px;
    background: #fff;
    color: var(--text-2);
    font: 13px "Noto Sans TC", Arial, sans-serif;
}

.case-field textarea {
    height: auto;
    padding: 9px 11px;
    resize: vertical;
}

.case-field input:read-only {
    background: #f4f7f9;
    color: var(--text-4);
}

.case-field input:focus,
.case-field select:focus,
.case-field textarea:focus {
    outline: 0;
    border-color: #2a75b4;
    box-shadow: 0 0 0 3px rgba(42, 117, 180, .1);
}

.case-wide,
.case-full {
    grid-column: 1 / -1;
}

/* 主辦單位：代碼 + 名稱 + 瀏覽鈕
   ⚠ 2026/08/25 修正：這條 3 欄 grid（代碼顯示框｜名稱輸入框｜瀏覽鈕）是照 demo 自己
   手刻的 3 元素版型寫的，但本專案的主辦單位一律用共用元件 Common/OrgCombo.vue——
   它的 DOM 只有一個根節點 <span class="org-combo-row">（內部自己用 flex 排代碼／輸入框，
   用 focus 觸發下拉搜尋取代瀏覽鈕，是刻意的設計，不是漏做），所以這個 3 欄 grid
   永遠只收到 1 個 grid item，被硬塞進第一欄（130px），代碼顯示框跟著溢出、輸入框被壓扁。
   Budget/Contract/Carbon 三個模組的專案基本資料頁共用這個 class，三頁都中招。
   `.case-org-browse`／`.case-org-code` 這兩個 demo 專用 class 全專案 0 筆使用，
   證實這個 3 欄版型本來就沒被用過——改成單欄，讓 OrgCombo 自己的 flex 版型
   （custom.css 的 `.org-combo-row` 那組規則）撐滿整欄寬度就好。
   （下面 768px 的 media query 本來就已經是這個單欄寫法，這裡改成跟它一致，
   不是另外發明新樣式。） */
.case-org {
    grid-column: 1 / -1;
}

.case-org-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.case-org-code {
    font-family: "Consolas", "Menlo", monospace;
    font-variant-numeric: tabular-nums;
}

.case-org-row .org-combo {
    min-width: 0;
}

.case-org-row .org-combo-input {
    width: 100%;
    box-sizing: border-box;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #cad5de;
    border-radius: 5px;
    background: #f4f7f9;
    color: var(--text-2);
    font: 13px "Noto Sans TC", Arial, sans-serif;
}

.case-org-browse {
    height: 34px;
    border: 1px solid #cad5de;
    border-radius: 5px;
    background: #f7fafc;
    color: var(--text-3);
    font-size: var(--fs-base);
    line-height: 1;
    cursor: pointer;
}

.case-org-browse:hover {
    border-color: #9cc3ef;
    background: #f0f6fc;
    color: var(--brand);
}

/* 區間欄位：預算年度、會計科目、預計工期 */
.case-range > span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.case-range > span input {
    min-width: 0;
}

.case-range > span select {
    flex: 0 0 110px;
}

.case-range em {
    flex: 0 0 auto;
    color: var(--text-4);
    font-style: normal;
    font-size: var(--fs-xs);
    white-space: nowrap;
}

.case-actions-row {
    display: flex;
    justify-content: flex-end;
    padding-top: 14px;
}

.case-actions-row .secondary-button {
    height: 32px;
    padding: 0 14px;
    font-size: var(--fs-sm);
}

/* 三個正確率 */
.case-rate-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 4px;
    padding-top: 14px;
    padding-bottom: 4px;
    border-top: 1px solid #eaf1f7;
}

.case-rate-row input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 下方子頁籤 */
.case-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 16px 20px 0;
    border-bottom: 1px solid #d9e5ef;
}

.case-subtabs button {
    padding: 8px 15px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--text-4);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}

.case-subtabs button:hover {
    background: #f3f8fd;
    color: var(--brand);
}

.case-subtabs button.is-active {
    border-color: #d9e5ef;
    background: #fff;
    color: var(--brand);
    box-shadow: 0 1px 0 #fff;
    margin-bottom: -1px;
}

.case-subpanel {
    padding: 16px 20px 18px;
}

.case-subpanel[hidden] {
    display: none;
}

.case-subpanel-actions {
    margin-top: 10px;
    text-align: right;
}

.case-subpanel-actions .secondary-button {
    height: 30px;
    padding: 0 13px;
    font-size: var(--fs-sm);
}

.case-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.case-table th,
.case-table td {
    padding: 7px 9px;
    border-bottom: 1px solid #eef3f7;
}

.case-table thead th {
    background: #f4f7fa;
    border-bottom: 1px solid #dfe8ef;
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
}

.case-table th.ta-left, .case-table td.ta-left { text-align: left; }
.case-table th.ta-right, .case-table td.ta-right { text-align: right; }
.case-table th.ta-center, .case-table td.ta-center { text-align: center; }

.case-table input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 7px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--text-2);
    font: 12.5px "Noto Sans TC", Arial, sans-serif;
}

.case-table td.ta-right input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.case-table input:hover {
    border-color: #dfe8ef;
    background: #fff;
}

.case-table input:focus {
    outline: 0;
    border-color: #2a75b4;
    background: #fff;
}

.case-empty {
    padding: 24px;
    color: var(--text-4);
    text-align: center;
}

/* ---- 其他資訊 ---- */
.case-fieldset {
    margin: 16px 20px;
    padding: 12px 16px 16px;
    border: 1px solid #dfe8ef;
    border-radius: 8px;
}

.case-fieldset legend {
    padding: 0 7px;
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.case-class-head {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(0, 1.4fr);
    gap: 16px;
    align-items: start;
}

.case-stage {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.case-stage-label {
    flex: 0 0 auto;
    margin-top: 6px;
    color: var(--text-3);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.case-stage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
}

.case-subclass {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eaf1f7;
}

.case-subclass-label {
    margin-bottom: 9px;
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.case-subclass-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px 16px;
    padding: 12px 14px;
    border: 1px solid #e5edf3;
    border-radius: 7px;
    background: #fbfcfe;
}

.case-check {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-2);
    font-size: var(--fs-sm);
    cursor: pointer;
}

.case-check input {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    accent-color: #286fae;
    cursor: pointer;
}

.case-check-placeholder {
    display: block;
}

.case-price-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 20px;
}

@media (max-width: 900px) {
    .case-block,
    .case-block.case-two-col,
    .case-rate-row,
    .case-class-head,
    .case-price-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .case-subclass-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-org-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .case-org-browse {
        display: none;
    }
}

/* ---- 案件資訊：排版微調＋輸入框更明顯（2026/08/18） ---- */
/* 區塊小標題：把一長串欄位分成「專案識別／工程資訊／編碼正確率」三段 */
.case-section-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 18px 20px 2px;
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.case-section-label::after {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, #dbe7f1, transparent);
    content: '';
}

.case-section-label:first-of-type {
    margin-top: 14px;
}

/* 欄位間距放鬆一點，標籤與輸入框拉開 */
.case-block {
    gap: 14px 24px;
    padding: 8px 20px 0;
}

.case-field {
    gap: 6px;
    color: var(--text-3);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* 輸入框：明顯的邊框與白底，不再是淡淡一條線 */
.case-field input,
.case-field select,
.case-field textarea,
.case-org-row .org-combo-input {
    height: 36px;
    border: 1px solid #b6c6d4;
    border-radius: 6px;
    background: #fff;
    color: var(--text-1);
    font-size: var(--fs-md);
    box-shadow: inset 0 1px 2px rgba(22, 48, 64, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.case-field textarea {
    height: auto;
}

.case-field input::placeholder,
.case-field textarea::placeholder {
    color: var(--text-4);
}

.case-field input:hover,
.case-field select:hover,
.case-field textarea:hover {
    border-color: #8fa9be;
}

.case-field input:focus,
.case-field select:focus,
.case-field textarea:focus,
.case-org-row .org-combo-input:focus {
    outline: 0;
    border-color: #2a75b4;
    box-shadow: 0 0 0 3px rgba(42, 117, 180, .14);
}

/* 唯讀欄位維持灰底，但邊框一樣看得見 */
.case-field input:read-only,
.case-org-row .org-combo-input {
    background: #f3f6f9;
    color: var(--text-2);
}

.case-rate-row input:read-only {
    background: #f3f6f9;
    font-weight: 700;
}

/* 子頁籤表格裡的輸入框也要看得出來是可以打字的 */
.case-table td input {
    padding: 6px 9px;
    border: 1px solid #cfdae4;
    border-radius: 5px;
    background: #fff;
    font-size: var(--fs-sm);
}

.case-table td input:hover {
    border-color: #9fb5c7;
}

.case-table td input:focus {
    outline: 0;
    border-color: #2a75b4;
    box-shadow: 0 0 0 3px rgba(42, 117, 180, .12);
}

.case-table tbody tr:hover td {
    background: #f8fbfd;
}

/* 兩欄之間拉一條淡淡的分隔，左右對照更清楚 */
@media (min-width: 901px) {
    .case-block.case-two-col {
        column-gap: 40px;
        position: relative;
    }

    .case-block.case-two-col::before {
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: calc(50% + 0px);
        width: 1px;
        background: #eef3f7;
        content: '';
    }
}

/* 其他資訊：分類方框與間距 */
.case-fieldset {
    margin: 8px 20px 16px;
}

.case-subclass-grid {
    gap: 9px 16px;
    padding: 14px 16px;
}

.case-check {
    font-size: var(--fs-sm);
}

.case-price-grid {
    gap: 14px 24px;
}

/* 彈窗放寬到 1440px 之後，視窗介於 820~1240px 時欄位仍會被擠壓，
   這一段讓表格在容器不夠寬時先出現橫向捲動，欄寬不被壓爛。 */
@media (max-width: 1240px) {
    .upa-table-wrap {
        overflow-x: auto;
    }

    .upa-table {
        min-width: 1060px;
    }
}

/* ===========================================================================
   全站視覺基準（2026/08/18）
   把頁面底色加深、卡片明確浮出來，並統一表頭／表格的文字階層。
   顏色與字級一律走 :root 的 tokens（見 styles.css 檔頭）。
   =========================================================================== */

/* ---- 頁面底 vs 卡片：拉出層次 ---- */
body,
.page-shell,
.add-page {
    background: var(--bg-page);
}

/* 卡片維持白底，但邊框看得見、加一層很淡的陰影 */
.card,
.role-edit-modal-card,
.item-modal-card,
.analysis-modal-card,
.version-modal-card,
.carbon-modal-card {
    background: var(--card);
    border-color: var(--line);
}

.card {
    box-shadow: 0 1px 2px rgba(27, 42, 56, .04);
}

/* 卡片抬頭：原本 #fafbfc 幾乎等於白色，改用有感的淺灰藍 */
.card-heading {
    background: var(--bg-subtle);
    border-bottom-color: var(--line);
    color: var(--text-1);
    font-size: var(--fs-lg);
}

.card-heading b {
    color: var(--text-1);
    font-weight: 700;
}

/* ---- 表格：表頭與內容的階層 ---- */
.table-card table thead th,
.case-table thead th,
.acl-table thead th {
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--line);
    color: var(--text-3);
    font-weight: 700;
}

.table-card table tbody td {
    color: var(--text-2);
}

.table-card table tbody tr:hover td {
    background: #f4f8fc;
}

/* 分隔線統一 */
.table-card table tbody td,
.case-table td{
    border-bottom-color: var(--line-soft);
}

/* ---- 表單控制項：框線要看得出來 ---- */
.search-form input,
.search-form select,
.basic-form-grid input,
.basic-form-grid select,
.basic-form-grid textarea {
    border-color: var(--field-line);
    color: var(--text-2);
}

.search-form input:focus,
.search-form select:focus,
.basic-form-grid input:focus,
.basic-form-grid select:focus,
.basic-form-grid textarea:focus {
    outline: 0;
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(26, 107, 176, .12);
}

::placeholder {
    color: #42505e;
}

/* ---- 頁面標題 ---- */
.add-page-heading h1,
.page-intro h1 {
    color: var(--text-1);
}

/* 頂欄標題（banner）維持原本的 1.6rem，完全不套 token——設定寫在檔案開頭
   那條原始的 .v2-nav-center，這裡不再覆蓋，否則會蓋掉窄螢幕縮成 1.4rem
   的 media query。⚠ 2026-09-09 顏色已改 #fff＋text-shadow（見檔案開頭），
   demo 自己那份同位置的舊註解沒有跟著更新（demo 上游疏漏，見 CLAUDE.md
   5.5 節「專案自訂」表格第五項）——這裡是本檔唯一份、已修正，下次整檔同步
   時記得比對這段有沒有被 demo 的舊版蓋回去。 */

/* ---- 搜尋卡：與一般卡片區隔 ---- */
.search-card {
    background: var(--card);
}

/* ---- 空狀態、次要說明統一用 text-4 ---- */
.code-detail-empty p,
.case-empty,
.acl-empty{
    color: var(--text-4);
}

/* ===========================================================================
   彈窗內距補強（2026/08/18）
   有幾個彈窗的內容直接貼著卡片邊緣，這裡統一補上左右內距。
   抬頭列與底部按鈕列維持整條滿版（全站一致），只補內容區。
   =========================================================================== */

/* 新增暫行碼／編輯工項：內容區原本只有 2px 左右內距 */
.code-item-modal-body {
    padding: 18px 24px 20px;
}

/* 主類設定的單選群組 */
.major-radio-grid {
    margin: 0 20px 14px;
}

/* 重新總計的鎖定提示 */
.adjust-lock {
    margin: 0 20px 12px;
}

/* 這三個彈窗卡片底下的區塊沒有各自的內距，直接給卡片內距 */
.notice-preview-modal-card > :not(.role-edit-modal-header):not(.role-edit-modal-actions):not(.notice-preview-modal-header),
.record-view-modal-card > :not(.role-edit-modal-header):not(.role-edit-modal-actions):not(.record-view-modal-header),
.exception-report-modal-card > :not(.role-edit-modal-header):not(.role-edit-modal-actions):not(.exception-report-modal-header) {
    padding-right: 22px;
    padding-left: 22px;
}

.notice-preview-modal-card > :last-child,
.record-view-modal-card > :last-child,
.exception-report-modal-card > :last-child {
    padding-bottom: 18px;
}

/* 單價分析項目：表格與工具列離邊界遠一點 */
.analysis-toolbar {
    padding: 10px 20px;
}

/* 彈窗裡的表格捲動區，底部留白 */
.analysis-table-wrap,
.work-code-table-wrap,
.public-price-table-wrap {
    margin-bottom: 14px;
}

/* 通用：彈窗卡片內若直接放 <table>／<p>／<dl>，也補上內距 */
.role-edit-modal-card > table,
.role-edit-modal-card > p,
.role-edit-modal-card > dl,
.item-modal-card > table,
.item-modal-card > p,
.carbon-modal-card > p,
.version-modal-card > p {
    margin-right: 22px;
    margin-left: 22px;
}

/* ==========================================================================
   建立新專案：預算書來源三選一（budget_add.html）
   2026/08/19 新增。取代原本只有一個上傳區的版面，改成
   機關範本／工程會範本／自行上傳三個分頁，選完再跳出「匯入工項範圍」彈窗。
   ========================================================================== */
.source-card {
    max-width: 1180px;
    margin: 28px auto 0;
    padding: 26px 28px 28px;
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 3px 12px #203a5410;
}

.source-card-head h2 {
    margin: 0 0 4px;
    padding: 0 0 0 12px;
    border-left: 6px solid var(--brand-accent);
    color: var(--brand-accent);
    font-size: var(--fs-xl);
}

.source-card-head p {
    margin: 0 0 20px 18px;
    color: var(--text-4);
    font-size: var(--fs-sm);
}

/* ---- 三個來源分頁 ---- */
.source-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}

.source-tab {
    display: grid;
    grid-template-columns: calc(34px * var(--fs-scale)) 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-subtle);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.source-tab i {
    grid-row: 1 / 3;
    width: calc(34px * var(--fs-scale));
    height: calc(34px * var(--fs-scale));
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line-soft);
    color: var(--text-4);
    font-size: var(--fs-lg);
    display: grid;
    place-items: center;
}

.source-tab-title {
    color: var(--text-1);
    font-size: var(--fs-base);
    font-weight: 600;
}

.source-tab-note {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.source-tab:hover {
    border-color: var(--brand-accent);
    background: #fff;
}

.source-tab.is-active {
    border-color: var(--brand-accent);
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px var(--brand-accent);
}

.source-tab.is-active i {
    border-color: var(--brand-accent);
    background: var(--brand-accent);
    color: #fff;
}

.source-tab.is-active .source-tab-title {
    color: var(--brand);
}

/* ---- 面板上方的機關標示與搜尋 ---- */
.source-panel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.source-org-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-subtle);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.source-org-badge i {
    color: var(--brand-accent);
}

.source-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-4);
    font-size: var(--fs-sm);
}

.source-hint i {
    color: var(--brand-accent);
}

.source-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 280px;
    padding: 0 12px;
    border: 1px solid var(--field-line);
    border-radius: 7px;
    background: #fff;
    color: var(--text-4);
}

.source-search input {
    width: 100%;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-size: var(--fs-sm);
    outline: none;
}

/* ---- 範本卡片清單 ---- */
.template-list {
    display: grid;
    gap: 12px;
}

.template-card {
    position: relative;
    display: grid;
    grid-template-columns: calc(26px * var(--fs-scale)) 1fr;
    align-items: start;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.template-card:hover {
    border-color: var(--brand-accent);
    box-shadow: 0 2px 10px #203a5412;
}

.template-card.is-selected {
    border-color: var(--green);
    background: #f6fbf8;
    box-shadow: inset 0 0 0 1px var(--green);
}

.template-card-check {
    width: calc(22px * var(--fs-scale));
    height: calc(22px * var(--fs-scale));
    margin-top: 2px;
    border: 1px solid var(--field-line);
    border-radius: 6px;
    background: #fff;
    color: transparent;
    font-size: var(--fs-xs);
    display: grid;
    place-items: center;
}

.template-card.is-selected .template-card-check {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

.template-card-main {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.template-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.template-card-title strong {
    color: var(--text-1);
    font-size: var(--fs-lg);
}

.template-kind {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.template-card-meta {
    display: flex;
    gap: 6px 18px;
    flex-wrap: wrap;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.template-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.template-card-meta i {
    color: var(--text-4);
}

.template-card-preview {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.template-chip {
    padding: 3px 9px;
    border: 1px solid var(--line-soft);
    border-radius: 5px;
    background: var(--bg-subtle);
    color: var(--text-3);
    font-size: var(--fs-xs);
}

.template-chip.is-more {
    border-style: dashed;
    color: var(--text-4);
}

.template-empty {
    padding: 46px 20px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: var(--bg-subtle);
    text-align: center;
}

.template-empty i {
    color: var(--text-4);
    font-size: 30px;
}

.template-empty p {
    margin: 12px 0 4px;
    color: var(--text-2);
    font-size: var(--fs-base);
    font-weight: 600;
}

.template-empty small {
    color: var(--text-4);
}

/* ---- 自行上傳分頁 ---- */
.source-panel .upload-card-heading h3 {
    margin: 0 0 14px;
    padding: 0 0 0 12px;
    border-left: 6px solid var(--brand-accent);
    color: var(--brand-accent);
    font-size: var(--fs-lg);
}

.source-panel .upload-card-heading h3 small {
    color: var(--text-4);
    font-size: var(--fs-sm);
    font-weight: 400;
}

.source-panel .upload-zone {
    min-height: 260px;
}

.source-panel .upload-zone.is-dragging {
    border-color: var(--brand-accent);
    background: var(--brand-soft);
}

.source-panel .upload-zone.is-filled {
    border-style: solid;
    border-color: var(--green);
    background: #f6fbf8;
}

/* ---- 底部選擇摘要與下一步 ---- */
.source-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1180px;
    margin: 18px auto 60px;
    flex-wrap: wrap;
}

.source-selected {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 10px 18px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--bg-subtle);
    color: var(--text-4);
    font-size: var(--fs-sm);
}

.source-selected.is-ready {
    border-style: solid;
    border-color: var(--green);
    background: var(--mint);
    color: var(--text-2);
}

.source-selected b {
    color: var(--text-1);
}

.source-selected small {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.source-footer .add-next {
    margin: 0;
}

/* ---- 匯入工項範圍彈窗 ---- */
.import-scope-card {
    width: min(620px, 94vw);
}

.import-scope-body {
    padding: 22px 26px 6px;
}

.import-scope-source {
    display: grid;
    gap: 3px;
    padding: 14px 16px;
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    background: var(--bg-subtle);
}

.import-scope-source strong {
    color: var(--text-1);
    font-size: var(--fs-lg);
}

.import-scope-source small {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.scope-source-tag {
    justify-self: start;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.import-scope-intro {
    margin: 18px 0 12px;
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.import-scope-options {
    display: grid;
    gap: 10px;
}

.scope-option {
    display: grid;
    grid-template-columns: calc(20px * var(--fs-scale)) 1fr;
    align-items: start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.scope-option:hover {
    border-color: var(--brand-accent);
}

.scope-option.is-selected {
    border-color: var(--brand-accent);
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px var(--brand-accent);
}

.scope-option input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--brand-accent);
}

.scope-option-body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.scope-option-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.scope-option-head strong {
    color: var(--text-1);
    font-size: var(--fs-base);
}

.scope-default {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--mint);
    color: var(--green-dark);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.scope-count {
    margin-left: auto;
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.scope-count b {
    color: var(--brand-accent);
    font-size: var(--fs-lg);
}

.scope-count.is-unknown {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.scope-option-body small {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

@media (max-width: 900px) {
    .source-tabs {
        grid-template-columns: 1fr;
    }

    .source-card {
        margin: 18px 14px 0;
        padding: 20px 16px 22px;
    }

    .source-footer {
        margin: 16px 14px 40px;
        flex-direction: column;
        align-items: stretch;
    }

    .source-footer .add-next {
        width: 100%;
    }

    .source-search {
        min-width: 0;
        width: 100%;
    }

    .template-card-meta {
        gap: 4px 12px;
    }
}

/* ==========================================================================
   專案基本資料調整（budget_basic.html，2026/08/19）
   ① 專案計算方式：差額處理與特殊計算合併成一個區塊
   ② 新增「系統比對結果」頁籤，收納原本放在案件資訊的編碼正確率
   ========================================================================== */
.calc-section-merged .calc-section-body {
    display: grid;
    gap: 0;
}

.calc-subsection + .calc-subsection {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
}

.calc-subsection-title {
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 3px solid var(--brand-accent);
    color: var(--text-1);
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.5;
}

/* ---- 系統比對結果 ---- */
.compare-section {
    padding-bottom: 0;
}

/* 卡片本身沒有左右內距（.card 是滿版的），內容要自己撐開，
   不然三張數值卡會直接貼著卡片邊緣。 */
.compare-section-body {
    padding: 20px 22px 24px;
}

.compare-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 18px;
    padding: 10px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--bg-subtle);
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.compare-hint i {
    margin-top: 2px;
    color: var(--brand-accent);
}

/* 2026/08/22：中間的「加權正確率」移除後剩兩張，改用 auto-fit 讓欄數跟著卡片數走，
   以後增減卡片都不用再回來改這裡。 */
.compare-rate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(240px * var(--fs-scale)), 1fr));
    gap: 14px;
}

.compare-rate {
    display: grid;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-subtle);
}

.compare-rate-label {
    color: var(--text-3);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.compare-rate-value {
    color: var(--brand-accent);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
}

.compare-rate-value em {
    margin-left: 3px;
    color: var(--text-4);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 600;
}

.compare-rate-note {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

@media (max-width: 900px) {
    .compare-rate-grid {
        grid-template-columns: 1fr;
    }

    .compare-rate-value {
        font-size: 26px;
    }
}

/* ---- 建立新專案：麵包屑與範本分頁（2026/08/19 微調）---- */
.add-breadcrumb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1180px;
    margin: 22px auto 0;
}

.add-breadcrumb {
    color: var(--text-4);
    font-size: var(--fs-sm);
}

.add-breadcrumb i {
    margin: 0 6px;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.add-breadcrumb strong {
    color: var(--text-1);
    font-size: var(--fs-base);
}

.template-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
    flex-wrap: wrap;
}

.template-pager-count {
    color: var(--text-4);
    font-size: var(--fs-sm);
}

.template-pager .pagination {
    height: auto;
    padding: 0;
    justify-content: flex-end;
}

.template-pager-numbers {
    display: flex;
    gap: 6px;
}

@media (max-width: 900px) {
    .add-breadcrumb-bar {
        margin: 16px 14px 0;
    }

    .template-pager {
        justify-content: center;
    }
}

/* ==========================================================================
   工項編輯：進階搜尋（更換工項）  budget_edit.html，2026/08/19
   點「進階搜尋」後，最上方欄位以外的整區換成挑選流程。
   ========================================================================== */
/* 進階搜尋按鈕放在最上方那排欄位（項次／工項代碼／工項項目／單位）的右下角，
   自成一列橫跨整個 grid，這樣不會擠壓到欄位寬度。 */
.item-advanced-search-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-start;
    margin-top: 2px;
}

.item-advanced-search-row .secondary-button {
    height: 32px;
    padding: 0 14px;
    font-size: var(--fs-sm);
}

.item-swap {
    margin: 0 20px 16px;
    border: 1px solid var(--brand-accent);
    border-radius: 10px;
    background: var(--card);
    overflow: hidden;
}

.item-swap-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--brand-soft);
}

.item-swap-head h3 {
    margin: 0 0 2px;
    color: var(--brand);
    font-size: var(--fs-lg);
}

.item-swap-head p {
    margin: 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
}

/* ---- 兩個來源 ---- */
.item-swap-sources {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px 18px;
}

.item-swap-source {
    display: grid;
    grid-template-columns: calc(20px * var(--fs-scale)) 1fr;
    align-items: start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--bg-subtle);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.item-swap-source:hover {
    border-color: var(--brand-accent);
}

.item-swap-source.is-selected {
    border-color: var(--brand-accent);
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px var(--brand-accent);
}

.item-swap-source input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--brand-accent);
}

.item-swap-source-body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.item-swap-source-body strong {
    color: var(--text-1);
    font-size: var(--fs-base);
}

.item-swap-source-body strong i {
    margin-right: 6px;
    color: var(--brand-accent);
}

.item-swap-source-body small {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

/* ---- 步驟列 ---- */
.item-swap-panel {
    padding: 0 18px 6px;
}

.swap-step + .swap-step {
    margin-top: 4px;
}

.swap-step-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.swap-step-title {
    color: var(--text-2);
    font-size: var(--fs-base);
}

.swap-step-title b {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--brand-accent);
    color: #fff;
    font-size: var(--fs-xs);
}

/* ---- 案件清單 ---- */
.swap-project-list {
    display: grid;
    gap: 10px;
    max-height: 320px;
    overflow: auto;
    padding-right: 4px;
}

.swap-project {
    display: grid;
    grid-template-columns: calc(168px * var(--fs-scale)) 1fr calc(20px * var(--fs-scale));
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.swap-project:hover {
    border-color: var(--brand-accent);
    box-shadow: 0 2px 10px #203a5412;
}

.swap-project-db {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.swap-project-db i {
    color: var(--brand-accent);
}

.swap-project-main {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.swap-project-main strong {
    color: var(--text-1);
    font-size: var(--fs-base);
}

.swap-project-meta {
    display: flex;
    gap: 4px 16px;
    flex-wrap: wrap;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.swap-project-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.swap-project-meta i {
    color: var(--text-4);
}

.swap-project-go {
    color: var(--text-4);
}

/* ---- 已挑選的案件 ---- */
.swap-picked-project {
    display: grid;
    gap: 3px;
    margin-bottom: 12px;
    padding: 12px 16px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--bg-subtle);
}

.swap-picked-tag {
    justify-self: start;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--mint);
    color: var(--green-dark);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.swap-picked-project strong {
    color: var(--text-1);
    font-size: var(--fs-base);
}

.swap-picked-project small {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.swap-item-search {
    display: flex;
    margin-bottom: 10px;
}

/* ---- 工項表格 ---- */
.swap-table-wrap {
    max-height: 340px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.swap-item-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.swap-item-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-subtle);
    color: var(--text-2);
    font-weight: 700;
    white-space: nowrap;
}

.swap-item-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text-2);
}

.swap-item-table tbody tr.is-selectable {
    cursor: pointer;
}

.swap-item-table tbody tr.is-selectable:hover {
    background: var(--bg-subtle);
}

.swap-item-table tbody tr.is-checked {
    background: var(--mint);
}

/* 沒有工項代碼的是分類節點，不能挑，用灰字區隔 */
.swap-item-table tbody tr.is-group td {
    background: #fbfcfe;
    color: var(--text-3);
    font-weight: 600;
}

.swap-col-check {
    width: 54px;
}

.swap-col-no {
    width: calc(96px * var(--fs-scale));
    color: var(--text-4);
    white-space: nowrap;
}

.swap-col-code {
    width: calc(140px * var(--fs-scale));
    color: var(--brand-accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.swap-check {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--field-line);
    border-radius: 5px;
    background: #fff;
    color: transparent;
    font-size: 11px;
}

.swap-check.is-checked {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

.swap-indent {
    display: inline-block;
}

.swap-empty {
    padding: 34px 12px !important;
    color: var(--text-4);
    text-align: center;
}

/* ---- 工程會資料庫：左樹右清單 ---- */
.swap-pcc-layout {
    display: grid;
    grid-template-columns: 268px 1fr;
    gap: 14px;
    align-items: start;
}

.swap-pcc-tree {
    max-height: 400px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-subtle);
}

.swap-tree-division > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.swap-tree-division > summary::-webkit-details-marker {
    display: none;
}

.swap-tree-division > summary:hover {
    background: #fff;
}

.swap-tree-division > summary em {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--line-soft);
    color: var(--text-4);
    font-size: var(--fs-xs);
    font-style: normal;
}

.swap-tree-code {
    color: var(--brand-accent);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.swap-tree-chapters {
    display: grid;
    background: #fff;
}

.swap-tree-chapter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 22px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: transparent;
    color: var(--text-3);
    font-size: var(--fs-xs);
    text-align: left;
    cursor: pointer;
}

.swap-tree-chapter:hover {
    background: var(--bg-subtle);
}

.swap-tree-chapter.is-active {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

.swap-pcc-list {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.swap-pcc-list-head {
    padding: 8px 12px;
    border-radius: 7px;
    background: var(--bg-subtle);
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.swap-pcc-list-head b {
    color: var(--brand-accent);
    font-variant-numeric: tabular-nums;
}

.swap-pcc-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.swap-pcc-pager .pagination {
    height: auto;
    padding: 0;
    justify-content: flex-end;
}

/* ---- 底部：已選 + 動作 ---- */
.item-swap-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    padding: 14px 18px;
    border-top: 1px solid var(--line-soft);
    background: var(--bg-subtle);
    flex-wrap: wrap;
}

.item-swap-actions > div {
    display: flex;
    gap: 10px;
}

.item-swap-picked {
    display: grid;
    gap: 2px;
    margin: 0;
    color: var(--text-4);
    font-size: var(--fs-sm);
}

.item-swap-picked.is-ready b {
    color: var(--text-1);
}

.item-swap-picked small {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

@media (max-width: 900px) {
    .item-swap {
        margin: 0 12px 14px;
    }

    .item-swap-sources,
    .swap-pcc-layout {
        grid-template-columns: 1fr;
    }

    .swap-project {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .swap-project-go {
        display: none;
    }

    .swap-pcc-tree {
        max-height: 220px;
    }

    .item-swap-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .item-swap-actions > div button {
        flex: 1;
    }
}

/* 更換工項時要暫時藏起來的區塊。
   注意：這幾個區塊的 CSS 都有設 display（grid／flex），而作者樣式一律優先於瀏覽器
   預設的 [hidden] { display: none }，所以只加 hidden 屬性是藏不掉的，必須明確覆蓋。
   （只有 .item-history 沒設 display，之前才會變成「只有歷史價格會消失」。） */
#item-modal .item-modal-extra-fields[hidden],
#item-modal .item-modal-grid[hidden],
#item-modal .item-history[hidden],
#item-modal .item-modal-actions[hidden] {
    display: none !important;
}

/* ==========================================================================
   轉入標單：系統自主檢查 → 空白標單設定 → 產製 → 產出清單
   （modules/budget/tender-produce.js 自行注入的彈窗，budget.html 與 budget_edit.html 共用）
   2026/08/19 新增
   ========================================================================== */
.produce-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
}

.produce-modal[hidden] {
    display: none !important;
}

.produce-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(20, 33, 46, .45);
}

.produce-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(880px, 96vw);
    max-height: 90vh;
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 18px 48px rgba(20, 33, 46, .28);
    overflow: hidden;
}

.produce-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-subtle);
}

.produce-header h2 {
    margin: 0;
    color: var(--brand);
    font-size: var(--fs-xl);
}

.produce-header h2 i {
    margin-right: 8px;
    color: var(--brand-accent);
}

.produce-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
}

.produce-close:hover {
    background: var(--line-soft);
    color: var(--text-1);
}

.produce-project {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 22px 0;
}

.produce-project:empty {
    display: none;
}

.produce-project-tag {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.produce-project strong {
    color: var(--text-1);
    font-size: var(--fs-base);
}

.produce-project small {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.produce-step {
    padding: 16px 22px 4px;
    overflow: auto;
}

.produce-step[hidden] {
    display: none !important;
}

/* ---- 系統檢查結果 ---- */
.produce-check-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.produce-check-summary > i {
    font-size: 24px;
}

.produce-check-summary span {
    display: grid;
    gap: 2px;
}

.produce-check-summary b {
    color: var(--text-1);
    font-size: var(--fs-lg);
}

.produce-check-summary small {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.produce-check-summary em {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--text-4);
    font-size: var(--fs-xs);
    font-style: normal;
    white-space: nowrap;
}

.produce-check-summary.is-pass {
    border-color: var(--green);
    background: var(--mint);
}

.produce-check-summary.is-pass > i {
    color: var(--green);
}

.produce-check-summary.is-fail {
    border-color: #d9a441;
    background: #fdf6e8;
}

.produce-check-summary.is-fail > i {
    color: #8f5a0d;
}

.produce-check-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.produce-check-item {
    display: grid;
    grid-template-columns: calc(26px * var(--fs-scale)) 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.produce-check-no {
    display: grid;
    place-items: center;
    width: calc(24px * var(--fs-scale));
    height: calc(24px * var(--fs-scale));
    border-radius: 50%;
    background: var(--bg-sunken);
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.produce-check-text {
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

.produce-check-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
}

.produce-check-item.is-pass {
    border-color: #bfe3d0;
    background: #f6fbf8;
}

.produce-check-item.is-pass .produce-check-no {
    background: var(--mint);
    color: var(--green-dark);
}

.produce-check-item.is-pass .produce-check-state {
    color: var(--green-dark);
}

.produce-check-item.is-fail .produce-check-state {
    color: #8c4d08;
}

.produce-check-item.is-fail.is-highlight {
    border-color: #d9a441;
    background: #fdf6e8;
    box-shadow: inset 0 0 0 1px #d9a441;
}

/* ---- 空白標單設定 ---- */
.produce-option-group {
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--bg-subtle);
}

.produce-option-group h3 {
    margin: 0 0 4px;
    padding-left: 10px;
    border-left: 4px solid var(--brand-accent);
    color: var(--brand);
    font-size: var(--fs-lg);
}

.produce-option-group > p {
    margin: 0 0 16px 14px;
    color: var(--text-4);
    font-size: var(--fs-sm);
}

.produce-option {
    display: grid;
    grid-template-columns: calc(20px * var(--fs-scale)) 1fr;
    align-items: start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text-2);
    font-size: var(--fs-sm);
    cursor: pointer;
}

.produce-option + .produce-option {
    margin-top: 10px;
}

.produce-option:hover {
    border-color: var(--brand-accent);
}

.produce-option input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--brand-accent);
}

.produce-option:has(input:checked) {
    border-color: var(--brand-accent);
    background: var(--brand-soft);
}

/* ---- 產製中 ---- */
.produce-running {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 46px 22px 34px;
    text-align: center;
}

.produce-spinner {
    position: relative;
    width: 72px;
    height: 72px;
    margin-bottom: 10px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-accent);
    font-size: 26px;
}

.produce-spinner span {
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-top-color: var(--brand-accent);
    border-radius: 50%;
    animation: produce-spin 1.1s linear infinite;
}

.produce-spinner span:nth-child(3) {
    inset: 6px;
    border-top-color: #9dc4e6;
    animation-duration: 1.6s;
    animation-direction: reverse;
}

.produce-spinner span:nth-child(4) {
    inset: 12px;
    border-top-color: #cfe2f4;
    animation-duration: 2.1s;
}

@keyframes produce-spin {
    to { transform: rotate(360deg); }
}

.produce-running-title {
    margin: 0;
    color: var(--text-1);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.produce-running-note {
    margin: 0 0 14px;
    color: var(--text-4);
    font-size: var(--fs-sm);
}

.produce-progress {
    width: min(420px, 100%);
    height: 8px;
    border-radius: 999px;
    background: var(--bg-sunken);
    overflow: hidden;
}

.produce-progress-bar {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-accent), #5aa5dd);
    transition: width .5s ease;
}

@media (prefers-reduced-motion: reduce) {
    .produce-spinner span { animation: none; }
    .produce-progress-bar { transition: none; }
}

/* ---- 產出清單 ---- */
.produce-files-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.produce-files-head:empty {
    display: none;
}

.produce-files-head div {
    display: grid;
    gap: 2px;
}

.produce-files-head strong {
    color: var(--text-1);
    font-size: var(--fs-base);
}

.produce-files-head small {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.produce-done-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--mint);
    color: var(--green-dark);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.produce-table-wrap {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: auto;
}

.produce-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.produce-table thead th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-subtle);
    color: var(--text-2);
    font-weight: 700;
    white-space: nowrap;
}

.produce-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text-2);
}

.produce-table tbody tr:last-child td {
    border-bottom: 0;
}

.produce-col-no { width: 64px; }
.produce-col-format { width: 96px; }

.produce-file-name {
    display: grid;
    grid-template-columns: calc(22px * var(--fs-scale)) 1fr;
    align-items: center;
    gap: 4px 10px;
}

.produce-file-name i {
    grid-row: 1 / 3;
    color: var(--brand-accent);
    font-size: var(--fs-lg);
}

.produce-file-name b {
    color: var(--text-1);
}

.produce-file-name small {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.produce-format {
    display: inline-block;
    min-width: 54px;
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-subtle);
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.produce-download {
    height: 32px;
    padding: 0 12px;
    font-size: var(--fs-sm);
}

.produce-empty {
    padding: 46px 20px !important;
    text-align: center;
}

.produce-empty i {
    color: var(--text-4);
    font-size: 30px;
}

.produce-empty p {
    margin: 12px 0 4px;
    color: var(--text-2);
    font-size: var(--fs-base);
    font-weight: 600;
}

.produce-empty small {
    color: var(--text-4);
}

/* ---- 底部 ---- */
.produce-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding: 14px 22px;
    border-top: 1px solid var(--line-soft);
    background: var(--bg-subtle);
    flex-wrap: wrap;
}

.produce-hint {
    margin: 0;
    color: var(--text-4);
    font-size: var(--fs-sm);
}

.produce-hint:empty {
    display: none;
}

.produce-hint.is-ok {
    color: var(--green-dark);
    font-weight: 600;
}

.produce-hint.is-error {
    color: #8c4d08;
    font-weight: 600;
}

.produce-buttons {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

@media (max-width: 760px) {
    .produce-check-item {
        grid-template-columns: calc(26px * var(--fs-scale)) 1fr;
    }

    .produce-check-state {
        grid-column: 2;
    }

    .produce-check-summary {
        flex-wrap: wrap;
    }

    .produce-check-summary em {
        margin-left: 0;
    }

    .produce-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .produce-buttons {
        margin-left: 0;
    }

    .produce-buttons button {
        flex: 1;
    }
}

/* ---- 預算書檔案／標單檔案：兩顆成對的檔案按鈕（2026/08/19）----
   標單檔案是主要動作（產製結果的入口），用實心藍；
   預算書檔案是次要動作，用外框藍。兩顆並排時中間不留縫，看起來像一組。 */
.file-action-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 15px;
    border-radius: 7px;
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
}

.file-action-button i {
    font-size: var(--fs-base);
}

.budget-file-button {
    border: 1px solid var(--brand-accent);
    background: #fff;
    color: var(--brand-accent);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
}

.budget-file-button:hover {
    background: var(--brand-soft);
}

.tender-file-button {
    border: 1px solid var(--brand-accent);
    background: var(--brand-accent);
    color: #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.tender-file-button:hover {
    background: var(--brand);
    border-color: var(--brand);
}

.tender-file-button:focus-visible,
.budget-file-button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .file-action-button {
        height: 34px;
        padding: 0 11px;
    }
}

/* ==========================================================================
   單價分析共用彈窗（js/modules/item-code/unit-price-analysis.js）2026/08/19 改版
   版面沿用 budget_edit.html 既有的「單價分析項目」（.analysis-modal / .analysis-table），
   這裡只補共用元件多出來的東西：麵包屑、選取列、可編輯欄位、合計列。
   ========================================================================== */
.upa-modal {
    z-index: 95;
}

/* ---- 往下鑽一層時的返回列 ---- */
.upa-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 20px 0;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-subtle);
    color: var(--text-4);
    font-size: var(--fs-sm);
}

.upa-breadcrumb[hidden] {
    display: none !important;
}

.upa-breadcrumb b {
    color: var(--text-1);
}

.upa-breadcrumb button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--brand-accent);
    border-radius: 6px;
    background: #fff;
    color: var(--brand-accent);
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
}

.upa-breadcrumb button:hover {
    background: var(--brand-soft);
}

/* ---- 工具列右側的選取提示 ---- */
.upa-toolbar-hint {
    margin-left: auto;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.upa-toolbar-hint.is-active {
    color: var(--green-dark);
    font-weight: 600;
}

/* ---- 明細表：可編輯欄位 ---- */
.upa-table input[type="text"],
.upa-table input[type="number"] {
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-family: inherit;
}

.upa-table input[type="text"]:hover,
.upa-table input[type="number"]:hover {
    border-color: var(--line);
    background: #fff;
}

.upa-table input[type="text"]:focus,
.upa-table input[type="number"]:focus {
    border-color: var(--brand-accent);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(26, 107, 176, .14);
}

.upa-table input[type="number"] {
    text-align: right;
}

/* 各欄寬度：把重要欄位留寬，比例類欄位壓窄 */
.upa-table .upa-c-name    { min-width: 190px; }
.upa-table .upa-c-unit    { width: 62px; }
.upa-table .upa-c-analysis{ width: 52px; text-align: center; }
.upa-table .upa-c-code    { width: 132px; }
.upa-table .upa-c-cat     { width: 62px; }
.upa-table .upa-c-cfactor { width: 78px; }
.upa-table .upa-c-camount { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.upa-table .upa-c-carbon  { width: 54px; text-align: center; }
.upa-table .upa-c-remark  { min-width: 120px; }
.upa-table .upa-c-fixed   { width: 74px; text-align: center; }

.upa-table .upa-c-amount {
    color: var(--brand-accent);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

/* ---- 選取中的那一列 ---- */
.upa-table tbody tr.upa-row {
    cursor: pointer;
}

.upa-table tbody tr.upa-row.is-selected > td {
    background: #f2f9f5;
}

.upa-table tbody tr.upa-row.is-selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--green);
}

/* ---- 合計列與空狀態 ---- */
.upa-table tfoot .upa-total-row td {
    padding: 11px 9px;
    border-top: 2px solid var(--line);
    background: var(--bg-subtle);
    color: var(--text-1);
    font-weight: 700;
}

.upa-table tfoot .upa-total-row td:nth-child(2) {
    color: var(--brand-accent);
    font-size: var(--fs-lg);
    text-align: right;
}

.upa-empty-row td {
    padding: 34px 16px !important;
    background: #fff;
    color: var(--text-4);
    text-align: center;
}

/* ---- 歷史價格：與 budget_edit 的樣式一致，只調整外距 ---- */
.upa-history {
    margin: 14px 20px !important;
}

/* ---- 19 欄要一次看完，不要有橫向捲軸 ----
   做法：把卡片放寬到接近整個視窗，表格改成 table-layout: fixed 並用百分比配寬，
   表頭允許換行、內距與字級縮小。只有視窗真的太窄（<1180px）時才退回捲動，
   否則欄位會被壓到看不清楚。 */
.upa-modal .analysis-modal-card {
    display: flex;
    flex-direction: column;
    width: min(1720px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow: hidden;
}

/* 中間內容可以上下捲，抬頭與底部按鈕列固定 */
.upa-modal .analysis-modal-header,
.upa-modal .analysis-modal-actions {
    flex: none;
}

.upa-modal .upa-fields,
.upa-modal .upa-toolbar,
.upa-modal .upa-breadcrumb {
    flex: none;
}

.upa-modal .upa-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.upa-table-wrap {
    overflow-x: hidden;
}

.upa-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.upa-table th,
.upa-table td {
    padding: 5px 5px;
    font-size: var(--fs-xs);
    white-space: normal;
    overflow-wrap: anywhere;
}

.upa-table thead th {
    line-height: 1.35;
}

.upa-table input[type="text"],
.upa-table input[type="number"] {
    height: 27px;
    padding: 0 5px;
    font-size: var(--fs-xs);
}

.upa-table .analysis-rounding {
    width: 100%;
    min-width: 0;
    height: 27px;
    padding: 0 2px;
    font-size: var(--fs-xs);
}

/* 21 欄的寬度配置，加總為 100%（2026/08/21：編碼整合類別 → 碳係數／碳排放量／碳排） */
.upa-table col.c-seq      { width: 2.5%; }
.upa-table col.c-name     { width: 12%; }
.upa-table col.c-unit     { width: 3.5%; }
.upa-table col.c-analysis { width: 3.5%; }
.upa-table col.c-qty      { width: 4%; }
.upa-table col.c-price    { width: 5%; }
.upa-table col.c-amount   { width: 5%; }
.upa-table col.c-code     { width: 8%; }
.upa-table col.c-percent  { width: 4.5%; }
.upa-table col.c-cat      { width: 4%; }
.upa-table col.c-ratio    { width: 3.8%; }
.upa-table col.c-cfactor  { width: 4.5%; }
.upa-table col.c-camount  { width: 5%; }
.upa-table col.c-carbon   { width: 3%; }
.upa-table col.c-round    { width: 5%; }
.upa-table col.c-fixed    { width: 4%; }
.upa-table col.c-remark   { width: 6.3%; }

/* 視窗太窄時才允許橫向捲動，免得欄位被壓爛 */
@media (max-width: 1180px) {
    .upa-table-wrap {
        overflow-x: auto;
    }

    .upa-table {
        table-layout: auto;
        min-width: 1180px;
    }
}

/* ---- 登入頁的「重設示範資料」（原型用）----
   這是原型才有的入口：操作結果暫存在 localStorage，按一下回到初始狀態。
   刻意做得低調，不干擾正式畫面。 */
.demo-reset-link {
    margin-left: 14px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    opacity: .55;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.demo-reset-link:hover {
    opacity: 1;
}
/* ===========================================================================
   契約編製：編輯頁的紫色主題（2026/08/19 自動產生）
   ---------------------------------------------------------------------------
   預算編製的編輯頁主色是綠色（.budget-edit-page 與各共用彈窗），
   契約編製共用同一份畫面（contract_edit.html 以 iframe 載入
   budget_edit.html?module=contract，body 會掛上 .contract-edit-page），
   差別只在配色。
   下面這些規則是把上述綠色系（色相 90~175）整組平移到契約的紫色（色相 264），
   飽和度與亮度維持不變，所以深淺層次跟綠色版一致，不會有某些欄位特別跳。
   手寫過的 .contract-edit-page 規則會保留，這裡不重複產生。
   共 91 條，略過已手寫 13 條。
   =========================================================================== */
.contract-edit-page .item-modal-removed-fields {
    border: 1px solid #baaad3;
    background: #f3eff9;
}

.contract-edit-page .item-modal-removed-fields input {
    border: 1px solid #baaad3;
}

.contract-edit-page .estimate-table .analysis-action.is-enabled,
.contract-edit-page .analysis-table .analysis-action.is-enabled {
    border-color: #a490c1;
    background: #f1edf8;
    color: #4b2b7a;
}

.contract-edit-page .analysis-fixed-price {
    border: 1px solid #a995c7;
    background: #f5f1fa;
}

.contract-edit-page .analysis-fixed-price:checked {
    border-color: #4b2b7c;
    background: #4b2b7c;
}

.contract-edit-page .analysis-fixed-control {
    border: 1px solid #a995c7;
    background: #f5f1fa;
}

.contract-edit-page .analysis-fixed-control:has(input:checked) {
    border-color: #4b2b7c;
    background: #4b2b7c;
}

.contract-edit-page .analysis-table tbody tr.is-selected td {
    color: #402469;
    box-shadow: inset 0 2px 0#4b2b7c,inset 0-2px 0#4b2b7c;
}

.contract-edit-page .analysis-table tbody tr.is-selected td:first-child {
    box-shadow: inset 2px 0 0#4b2b7c,inset 0 2px 0#4b2b7c,inset 0-2px 0#4b2b7c;
}

.contract-edit-page .analysis-table tbody tr.is-selected td:last-child {
    box-shadow: inset -2px 0 0#4b2b7c,inset 0 2px 0#4b2b7c,inset 0-2px 0#4b2b7c;
}

.contract-edit-page .analysis-table tbody tr.is-locked {
    background: #f4f3f6;
}

.contract-edit-page .analysis-modal-header h2 i {
    color: #4b2b7c;
}

.contract-edit-page .analysis-toolbar input {
    accent-color: #4b2b7c;
}

.contract-edit-page .analysis-table-wrap {
    border: 1px solid #dcd8e3;
}

.contract-edit-page .analysis-table th,
.contract-edit-page .analysis-table td {
    border: 1px solid #dcd8e3;
}

.contract-edit-page .analysis-table th {
    background: #42276a;
}

.contract-edit-page .analysis-table tbody tr.is-selected td {
    color: #402469;
}

.contract-edit-page .analysis-table input {
    accent-color: #4b2b7c;
}

.contract-edit-page .work-code-modal-header h2 i {
    color: #4b2b7c;
}

.contract-edit-page .work-code-table-wrap {
    border: 1px solid #dcd8e3;
}

.contract-edit-page .work-code-table th,
.contract-edit-page .work-code-table td {
    border: 1px solid #dcd8e3;
}

.contract-edit-page .work-code-table th {
    background: #42276a;
}

.contract-edit-page .work-code-table tbody tr:hover {
    background: #f5f1fa;
}

.contract-edit-page .work-code-table tbody tr.is-selected {
    background: #f5f1fa;
}

.contract-edit-page .work-code-table tbody tr.is-selected td {
    color: #402469;
    box-shadow: inset 0 2px 0#4b2b7c,inset 0-2px 0#4b2b7c;
}

.contract-edit-page .work-code-table tbody tr.is-selected td:first-child {
    box-shadow: inset 2px 0 0#4b2b7c,inset 0 2px 0#4b2b7c,inset 0-2px 0#4b2b7c;
}

.contract-edit-page .work-code-table tbody tr.is-selected td:last-child {
    box-shadow: inset -2px 0 0#4b2b7c,inset 0 2px 0#4b2b7c,inset 0-2px 0#4b2b7c;
}

.contract-edit-page .work-code-table tbody tr.is-selected i {
    color: #4b2b7c;
}

.contract-edit-page .estimate-table .green-action {
    border: 1px solid #a995c7;
    background: #f5f1fa;
    color: #4b2b7c;
}

.contract-edit-page .estimate-table .item-row.is-green-item>td {
    background: #ae90da !important;
}

.contract-edit-page .editor-row-actions .combine-move-button:not(.danger-action) {
    border-color: #937cb5;
    background: #f7f4fb;
    color: #402469;
}

.contract-edit-page .editor-row-actions #estimate-indent {
    border-color: #937cb5;
    background: #f7f4fb;
    color: #402469;
}

.contract-edit-page .editor-row-actions #estimate-outdent {
    border-color: #937cb5;
    background: #f7f4fb;
    color: #402469;
}

.contract-edit-page .estimate-table .is-selected td {
    background: #eee9f5;
}

.contract-edit-page .estimate-table .is-group-selected td {
    background: #eee9f5;
}

.contract-edit-page .work-code-trigger {
    border: 1px solid #af9dc9;
    background: #f5f1fa;
    color: #42276a;
}

.contract-edit-page .item-selector-control {
    color: #4b2b7c;
}

.contract-edit-page .item-selector-control:has(.item-selector:checked),
.contract-edit-page .item-selector-control:has(.group-selector:checked) {
    border-color: #4a2b78;
    background: #4a2b78;
}

.contract-edit-page .estimate-table .group td {
    background: #eee9f5;
}

.contract-edit-page .estimate-table .sub td {
    background: #f7f5fa;
}

.contract-edit-page .edit-heading-actions>button:first-child {
    background: #452773;
}

.contract-edit-page .edit-heading-actions>button:first-child:hover {
    background: #321b55;
    box-shadow: 0 4px 10px rgba(50, 27, 85, .22);
}

.contract-edit-page .green-option-table th {
    background: #efebf6;
    border: 1px solid #d2cade;
}

.contract-edit-page .green-option-table td {
    border: 1px solid #e1dce8;
}

.contract-edit-page .green-option-table input:not(.analysis-fixed-price) {
    accent-color: #4b2b7c;
}

.contract-edit-page .item-modal-header h2 i {
    color: #4b2b7c;
}

.contract-edit-page .item-history th,
.contract-edit-page .item-history td {
    border: 1px solid #dcd8e3;
}

.contract-edit-page .editor-bottom-actions .primary-button {
    background: #3e1d70;
}

.contract-edit-page .editor-footer-actions .primary-button {
    background: #3e1d70;
}

.contract-edit-page .sub-item-table th {
    background: #e0d6ef;
}

.contract-edit-page .sub-item-table input:not(.analysis-fixed-price) {
    accent-color: #472b71;
}

.contract-edit-page .sub-item-table .sub-item-group {
    background: #f1edf7;
}

.contract-edit-page .sub-item-table .sub-item-section {
    background: #f7f5fa;
}

.contract-edit-page .sub-item-table tbody tr:hover td {
    background: #f5f1fa;
}

.contract-edit-page .sub-item-table tbody tr.is-selected td {
    background: #eee9f5;
    color: #402469;
}

.contract-edit-page .analysis-fixed-control {
    border-color: #a591c2;
}

.contract-edit-page .item-modal-removed-fields {
    border: 1px solid #baaad3;
    background: #f3eff9;
}

.contract-edit-page .item-modal-removed-fields {
    border-color: #4b2b7c;
    background: #f1eef6;
}

.contract-edit-page .green-type-table tr.is-editing td {
    background: #f7f5fb;
}

.contract-edit-page #green-modal .green-type-table tr.is-editing td {
    background: #f7f5fb;
}

.contract-edit-page .item-history-table-wrap {
    border: 1px solid #dcd8e3;
}

.contract-edit-page .item-history-table th,
.contract-edit-page .item-history-table td {
    border-right: 1px solid #dcd8e3;
    border-bottom: 1px solid #dcd8e3;
}

.contract-edit-page .item-history-table th {
    background: #42276a;
}

.contract-edit-page .item-history-table tbody tr:hover td {
    background: #f6f4fa;
}

.contract-edit-page .item-history-quote {
    border: 1px solid #8c76ac;
    background: #f6f3fb;
    color: #40246a;
}

.contract-edit-page .item-history-quote:hover,
.contract-edit-page .item-history-quote.is-quoted {
    background: #e7e0f2;
    border-color: #4b2b7c;
}

.contract-edit-page .item-history-table-wrap:has(tbody tr:hover),
.contract-edit-page .item-history-table-wrap:has(.item-history-quote.is-quoted) {
    background: #f6f4fa;
}

.contract-edit-page .item-history-table-wrap:has(tbody tr.is-selected) {
    background: #f6f4fa;
}

.contract-edit-page .item-history-table tbody tr.is-selected td {
    background: #f6f4fa;
}

.contract-edit-page .estimate-table .analysis-action.is-enabled:hover,
.contract-edit-page .analysis-table .analysis-action.is-enabled:hover {
    border-color: #8369aa;
    background: #e9e3f3;
    color: #3d2168;
}

.contract-edit-page .upa-table tbody tr.upa-row.is-selected>td {
    background: #f5f2f9;
}

@media (min-width:769px) and (max-width:1024px) {
    .contract-edit-page .estimate-table .grand-total .total-number {
        border-top: 1px solid #5f4980;
    }
}

@media (max-width:768px) {
    .contract-edit-page .estimate-table .grand-total .total-number {
        border-top: 1px solid #5f4980;
    }

    .contract-edit-page .estimate-table .item-row.is-active,
    .contract-edit-page .estimate-table .group.is-active {
        box-shadow: inset 0 0 0 2px #4b2b7a;
    }
}

@media (max-width:1100px) {
    .contract-edit-page .analysis-table tbody tr {
        border: 1px solid #dcd8e3;
    }

    .contract-edit-page .analysis-table td {
        border-bottom: 1px solid #e7e3ec;
    }
}

@media (max-width:768px) {
    .contract-edit-page .sub-item-table tbody tr.sub-item-group {
        border-color: #b0a1c7;
        background: #f4f1f9;
    }

    .contract-edit-page .sub-item-table tbody tr.sub-item-section {
        background: #f9f7fb;
    }

    .contract-edit-page .sub-item-table tbody tr.is-selected {
        border: 2px solid #4a2f72;
        background: #f4f0f9;
    }
}

@media (max-width:768px) {
    .contract-edit-page .estimate-table .group.is-active {
        border: 2px solid #4b2b7a;
        box-shadow: 0 0 0 2px #4b2b7a1a;
    }
}

@media (max-width:640px) {
    .contract-edit-page .work-code-table tbody tr {
        border: 1px solid #dcd8e3;
    }

    .contract-edit-page .work-code-table tbody tr.is-selected {
        border: 2px solid #4b2b7a;
        background: #f5f1fa;
    }
}

@media (max-width:1100px) {
    .contract-edit-page .analysis-toolbar label {
        border: 1px solid #c4b7d8;
    }

    .contract-edit-page .analysis-table tbody tr {
        border: 1px solid #dcd8e3;
    }

    .contract-edit-page .analysis-table td,
    .contract-edit-page .analysis-table td:nth-child(2),
    .contract-edit-page .analysis-table td:nth-child(8),
    .contract-edit-page .analysis-table td:nth-child(21) {
        border-bottom: 1px solid #e7e3ec;
    }
}

@media (max-width:768px) {
    .contract-edit-page .estimate-table .item-row.is-green-item.is-active {
        outline: 2px solid #441b81;
        box-shadow: 0 0 0 2px rgba(68, 27, 129, .16) !important;
    }

    .contract-edit-page.contract-edit-page .estimate-table .item-row.is-green-item.is-active {
        outline-color: #441b81;
        box-shadow: 0 0 0 2px rgba(68, 27, 129, .16) !important;
    }
}

@media (min-width:769px) and (max-width:1024px) {
    .contract-edit-page .estimate-table .grand-total .total-number {
        border-top: 1px solid #5f4980;
    }
}

@media (max-width:720px) {
    .contract-edit-page .item-history-table tbody tr {
        border: 1px solid #dcd8e3;
    }

    .contract-edit-page .item-history-table td {
        border-bottom: 1px solid #e7e4ec;
    }

    .contract-edit-page .item-history-table tbody tr.is-selected {
        background: #f6f4fa;
    }
}

/* ---- 用到 CSS 變數（無法自動換色）的幾處，手動補上契約的紫色 ---- */
.contract-edit-page .upa-table tbody tr.upa-row.is-selected > td {
    background: #f5f2fa;
}

.contract-edit-page .upa-table tbody tr.upa-row.is-selected > td:first-child {
    box-shadow: inset 3px 0 0 #7654a8;
}

.contract-edit-page .upa-toolbar-hint.is-active,
.contract-edit-page .swap-picked-tag,
.contract-edit-page .item-swap-picked.is-ready b {
    color: #5e4189;
}

.contract-edit-page .swap-picked-tag {
    background: #efe9f8;
}

.contract-edit-page .swap-check.is-checked,
.contract-edit-page .template-card.is-selected .template-card-check {
    border-color: #7654a8;
    background: #7654a8;
}

.contract-edit-page .swap-item-table tbody tr.is-checked {
    background: #f5f2fa;
}

/* ==========================================================================
   窄視窗／瀏覽器放大時的版面修正（2026/08/19）
   ---------------------------------------------------------------------------
   把瀏覽器放大等同於把視窗變窄（CSS 像素變少），所以兩者用同一組斷點處理。
   下面這幾條是靜態稽核找出來「最小需求寬度超過手機寬度、又沒有手機版覆寫」的規則。
   表格類不列入：它們都放在 .table-wrap／.xxx-scroll 這種可橫向捲動的容器裡，
   本來就是允許左右滑的設計。
   ========================================================================== */

/* 採購機關 → 建立者 的流程列：原本第一欄最少要 460px，加上箭頭與第二欄共需 632px，
   在手機上會直接把卡片撐破。窄螢幕改成上下堆疊，箭頭轉成向下。 */
@media (max-width: 820px) {
    .basic-purchasing-flow {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .basic-purchasing-flow > i {
        justify-self: center;
        transform: rotate(90deg);
    }

    .basic-purchasing-org-row,
    .basic-purchasing-flow .org-combo-row {
        grid-template-columns: minmax(0, 1fr);
        flex-direction: column;
        align-items: stretch;
    }
}

/* 工項編輯最上方那排欄位：.item-modal .modal-item-fields 的層級比通用的
   .modal-item-fields 高，所以在手機上不會被通用的覆寫吃到，要自己寫一條。 */
@media (max-width: 760px) {
    .item-modal .modal-item-fields,
    #green-modal .modal-item-fields,
    .analysis-modal .modal-item-fields,
    .work-code-modal .modal-item-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .item-modal .modal-item-fields .item-name-field,
    .analysis-modal .modal-item-fields .item-name-field,
    .work-code-modal .modal-item-fields .item-name-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .item-modal .modal-item-fields,
    #green-modal .modal-item-fields,
    .analysis-modal .modal-item-fields,
    .work-code-modal .modal-item-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .item-modal .modal-item-fields .item-name-field,
    .analysis-modal .modal-item-fields .item-name-field,
    .work-code-modal .modal-item-fields .item-name-field {
        grid-column: auto;
    }
}

/* ---- 編輯頁抬頭的按鈕列：放大或窄視窗時要收得起來 ----
   這一列有版本管理／預算書檔案／標單檔案／公開價格查詢／返回列表五顆按鈕，
   字級調大之後在 1100px 以下就排不完（瀏覽器放到 175% 就會遇到）。
   做法：一律允許換行；1100px 以下把按鈕文字縮短；850px 以下只留圖示。 */
.edit-heading-actions {
    flex-wrap: wrap;
    row-gap: 8px;
}

@media (max-width: 1100px) {
    .edit-heading-actions .file-action-button .editor-action-label {
        font-size: 0;
    }

    .edit-heading-actions #budget-files .editor-action-label::after {
        content: "預算書";
        font-size: var(--fs-sm);
    }

    .edit-heading-actions #tender-files .editor-action-label::after {
        content: "標單";
        font-size: var(--fs-sm);
    }
}

@media (max-width: 850px) {
    .edit-heading-actions .file-action-button .editor-action-label,
    .edit-heading-actions .file-action-button .editor-action-label::after {
        display: none;
    }

    .edit-heading-actions .file-action-button {
        padding: 0 12px;
    }
}

/* 使用者把字體切到「大」（1.25 倍）時，同樣一排按鈕會提早排不下，
   所以把上面兩個斷點往上推：1100→1400、850→1050。 */
@media (max-width: 1400px) {
    :root[data-font-scale="large"] .edit-heading-actions .file-action-button .editor-action-label {
        font-size: 0;
    }

    :root[data-font-scale="large"] .edit-heading-actions #budget-files .editor-action-label::after {
        content: "預算書";
        font-size: var(--fs-sm);
    }

    :root[data-font-scale="large"] .edit-heading-actions #tender-files .editor-action-label::after {
        content: "標單";
        font-size: var(--fs-sm);
    }
}

@media (max-width: 1050px) {
    :root[data-font-scale="large"] .edit-heading-actions .file-action-button .editor-action-label,
    :root[data-font-scale="large"] .edit-heading-actions .file-action-button .editor-action-label::after {
        display: none;
    }

    :root[data-font-scale="large"] .edit-heading-actions .file-action-button {
        padding: 0 12px;
    }
}


/* 專案清單「分享」按鈕：把專案分享給其他機關引用（2026/08/20 新增）。
   顏色比照編輯（藍）／刪除（紅）的做法，用綠色系跟兩者區隔。 */
.share.icon-action {
    margin-right: 7px;
    border: 1px solid #8fcbb2;
    color: #17795c;
    background: #f2fbf7;
    cursor: pointer;
}

.share.icon-action:hover {
    background: #e2f6ee;
}

.contract-page .share.icon-action {
    border-color: #c3aee0;
    color: #6a49a0;
    background: #f8f4fd;
}

.contract-page .share.icon-action:hover {
    background: #f0e8fa;
}

/* ---- 更換工項：抬頭固定在最上方 -------------------------------------------
   原本「確定更換」在整個挑選區的最下面，清單一長就得往下滑才找得到。
   改成固定在抬頭：上排是標題與兩顆按鈕，下排整條顯示目前選到的工項。

   注意：.item-swap 原本有 overflow: hidden（為了讓圓角切齊），
   而 overflow 不是 visible 的祖先會讓裡面的 sticky 失效，
   所以這裡把它改回 visible，圓角改由抬頭自己處理。 */
.item-swap {
    overflow: visible;
}

.item-swap-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    row-gap: 10px;
    column-gap: 16px;
    border-radius: 9px 9px 0 0;
    box-shadow: 0 2px 6px rgba(22, 48, 64, .08);
}

.item-swap-head-text {
    min-width: 0;
}

.item-swap-buttons {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
}

/* 「已選擇」獨立成一整條，右端放「確定更換」。 */
.item-swap-picked-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    grid-column: 1 / -1;
    padding: 8px 8px 8px 12px;
    border: 1px dashed var(--field-line);
    border-radius: 7px;
    background: #fff;
}

/* 選好之後整條的框線變成實線藍。is-ready 是 JS 掛在裡層的 <p> 上，
   所以外框要用 :has() 反過來讀它的狀態。 */
.item-swap-picked-bar:has(.item-swap-picked.is-ready) {
    border-style: solid;
    border-color: var(--brand-accent);
}

.item-swap-head .item-swap-picked {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}

.item-swap-picked-bar #item-swap-confirm {
    flex-shrink: 0;
}

.swap-picked-label {
    flex-shrink: 0;
    padding: 1px 8px;
    border-radius: 20px;
    color: #fff;
    background: var(--brand-accent);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.item-swap-head .item-swap-picked b {
    min-width: 0;
}

.swap-picked-meta {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

.contract-edit-page .swap-picked-label {
    background: #7654a8;
}

.contract-edit-page .item-swap-picked-bar:has(.item-swap-picked.is-ready) {
    border-color: #7654a8;
}

/* 窄視窗：標題與按鈕上下排，按鈕各佔一半 */
@media (max-width: 700px) {
    .item-swap-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .item-swap-buttons > button {
        flex: 1;
    }

    /* 窄視窗：工項資訊與按鈕改上下排，按鈕拉滿整條 */
    .item-swap-picked-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
    }
}

/* ---- 工項編輯的附加欄位（2026/08/21 重排）--------------------------------
   欄位剩四個：別名、工程外碼、工料編號各佔一格，備註獨立一整列並加大。
   注意這一區在 1080px／820px／640px 有三段覆寫（3欄→2欄→1欄），
   備註都要跨滿整列，所以 grid-column 用 1 / -1 而不是寫死欄數。 */
.item-modal-extra-fields .item-note-field {
    grid-column: 1 / -1;
}

.item-modal-extra-fields textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 84px;
    padding: 9px 11px;
    border: 1px solid #bfd0e1;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: inherit;
    font-weight: 400;
    line-height: 1.6;
    resize: vertical;
}

.item-modal-extra-fields textarea:focus {
    outline: 0;
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(26, 107, 176, .14);
}

.contract-edit-page .item-modal-extra-fields textarea:focus {
    border-color: #7654a8;
    box-shadow: 0 0 0 3px rgba(118, 84, 168, .14);
}

/* ---- 工項細目編碼維護：規則表就是挑選介面（2026/08/21）------------------- */
.code-rule-hint {
    margin-top: 6px;
    color: var(--brand-accent);
    font-size: var(--fs-xs);
}

/* 每一欄右上角的「＋」：在該碼位自行新增代碼 */
.code-rule-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 跟著字級縮放，否則使用者切到「大」時裡面的＋會被裁掉 */
    width: calc(22px * var(--fs-scale));
    height: calc(22px * var(--fs-scale));
    margin-left: auto;
    padding: 0;
    border: 1px solid #9dc0da;
    border-radius: 5px;
    color: var(--brand-accent);
    background: #fff;
    font-size: var(--fs-xs);
    cursor: pointer;
}

.code-rule-add:hover {
    color: #fff;
    background: var(--brand-accent);
}

/* 可點選的規則列 */
.code-rule-item[data-digit] {
    cursor: pointer;
}

.code-rule-item[data-digit]:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: -2px;
}

.code-rule-item.is-locked {
    cursor: default;
}

/* 自己補上去的代碼標一下，跟規則表原本就有的區隔 */
.code-rule-item.is-custom .code-rule-code {
    border-color: #d9a441;
    color: #8a5a10;
    background: #fff6e5;
}

.code-rule-item.is-custom.is-active .code-rule-code {
    border-color: #2a75b4;
    color: #fff;
    background: #2a75b4;
}

/* 價格與百分率：四個百分率是一組，獨立成一列 */
.code-form-subrow {
    margin-top: 12px;
    padding: 11px 12px 12px;
    border: 1px dashed #cfdde8;
    border-radius: 7px;
    background: #fafcfe;
}

.code-form-subrow-title {
    margin-bottom: 8px;
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.code-form-grid-rates {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 760px) {
    .code-form-grid-rates {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .code-form-grid-rates {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- 產出檔案清單改版（2026/08/21）---------------------------------------
   四份文件 × 三種格式；格式用 icon 不寫文字；壓縮檔獨立放在右上角。 */
.produce-files-head {
    align-items: center;
    gap: 14px;
}

.produce-files-info {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.produce-bundle {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-left: auto;
    padding: 9px 14px;
    border: 1px solid #9dc0da;
    border-radius: 9px;
    color: var(--brand);
    background: var(--brand-soft);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.produce-bundle:hover {
    border-color: var(--brand-accent);
    background: #dbeafb;
}

.produce-bundle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(32px * var(--fs-scale));
    height: calc(32px * var(--fs-scale));
    border-radius: 8px;
    color: #fff;
    background: var(--brand-accent);
    font-size: var(--fs-base);
}

.produce-bundle-text {
    display: grid;
    gap: 2px;
}

.produce-bundle-text b {
    color: var(--text-1);
    font-size: var(--fs-md);
}

.produce-bundle-text small {
    color: var(--text-4);
    font-size: var(--fs-xs);
}

/* 三種格式的 icon 按鈕 */





@media (max-width: 640px) {
    .produce-bundle {
        width: 100%;
        margin-left: 0;
    }
}

/* IR設定值：放在單價分析項目的動作列最左邊，跟取消／儲存分開 */
.upa-ir-button {
    margin-right: auto;
}

/* ===========================================================================
   編輯工具列右側的三個工具：發包設定／自主檢查／細項清單（2026/08/21）
   三個共用同一個彈窗外框，內容由 modules/budget/estimate-tools.js 換掉。
   ========================================================================= */
.tools-modal[hidden] { display: none; }

.tools-modal {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.tools-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(16, 34, 52, .42);
}

.tools-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1180px, 100%);
    max-height: calc(100vh - 40px);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(22, 48, 64, .3);
}

.tools-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--brand-soft);
    border-radius: 12px 12px 0 0;
}

.tools-header h2 {
    margin: 0;
    color: var(--brand);
    font-size: var(--fs-xl);
}

.tools-close {
    width: calc(32px * var(--fs-scale));
    height: calc(32px * var(--fs-scale));
    border: 0;
    border-radius: 6px;
    color: var(--text-3);
    background: transparent;
    font-size: var(--fs-lg);
    cursor: pointer;
}

.tools-close:hover { background: #dceaf7; }

.tools-intro {
    margin: 0;
    padding: 12px 20px 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.tools-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 14px 20px 4px;
}

.tools-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--line-soft);
    background: var(--bg-subtle);
    border-radius: 0 0 12px 12px;
}

.tools-count {
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.tools-buttons {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

/* ---- 階層頁籤 1~8 ---- */
.tools-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.tools-level {
    width: calc(30px * var(--fs-scale));
    height: calc(30px * var(--fs-scale));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text-2);
    background: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tools-level:hover:not(:disabled) { border-color: var(--brand-accent); }

.tools-level.is-active {
    border-color: var(--brand-accent);
    color: #fff;
    background: var(--brand-accent);
}

.tools-level:disabled {
    color: var(--line);
    background: var(--bg-subtle);
    cursor: not-allowed;
}

/* ---- 表格 ---- */
.tools-table-wrap {
    max-height: 52vh;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.tools-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-md);
}

.tools-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 9px 10px;
    border-bottom: 2px solid #cfe0ee;
    color: var(--text-1);
    background: var(--bg-subtle);
    font-weight: 700;
    white-space: nowrap;
}

.tools-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text-2);
}

.tools-table tbody tr:hover { background: #f4f9fd; }

.tools-table input[type="checkbox"] {
    width: calc(16px * var(--fs-scale));
    height: calc(16px * var(--fs-scale));
    accent-color: var(--brand-accent);
    cursor: pointer;
}

.contract-table tr.is-group { background: #f2f7fb; }
.contract-table tr.is-group .contract-name { color: var(--brand); font-weight: 700; }

.contract-name-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: calc(30px * var(--fs-scale));
    padding: 0 8px;
    border: 1px solid var(--field-line);
    border-radius: 5px;
    background: #fff;
    color: var(--text-2);
    font: inherit;
    font-size: var(--fs-sm);
}

.tools-empty {
    padding: 26px 10px;
    color: var(--text-4);
    text-align: center;
}

/* ---- 自主檢查 ---- */
.tools-check-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tools-check-item label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text-2);
    font-size: var(--fs-md);
    line-height: 1.6;
    cursor: pointer;
}

.tools-check-item label:hover { border-color: var(--brand-accent); }

.tools-check-item.is-done label {
    border-color: #8fcbb2;
    background: #f2fbf7;
}

.tools-check-item input {
    flex-shrink: 0;
    width: calc(17px * var(--fs-scale));
    height: calc(17px * var(--fs-scale));
    margin-top: 2px;
    accent-color: #17795c;
}

.tools-check-all {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}

.tools-check-all label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--text-1);
    font-weight: 700;
    cursor: pointer;
}

.tools-check-all input {
    width: calc(17px * var(--fs-scale));
    height: calc(17px * var(--fs-scale));
    accent-color: var(--brand-accent);
}

/* ---- 細項清單的篩選列 ---- */
.tools-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.tools-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tools-filter {
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 20px;
    color: var(--text-2);
    background: #fff;
    font: inherit;
    font-size: var(--fs-sm);
    white-space: nowrap;
    cursor: pointer;
}

.tools-filter:hover { border-color: var(--brand-accent); }

.tools-filter.is-active {
    border-color: var(--brand-accent);
    color: #fff;
    background: var(--brand-accent);
}

.tools-search {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 0 11px;
    border: 1px solid var(--field-line);
    border-radius: 7px;
    background: #fff;
    color: var(--text-4);
}

.tools-search input {
    width: 190px;
    height: calc(32px * var(--fs-scale));
    border: 0;
    background: none;
    color: var(--text-2);
    font: inherit;
    font-size: var(--fs-sm);
    outline: 0;
}

.detail-table .is-item-row { background: #f3f8fc; }
.detail-table .is-item-row td { font-weight: 600; }
.detail-table .is-negative td { color: #c0392b; }
.detail-parent { color: var(--text-4); font-size: var(--fs-xs); }
.detail-sub-icon { margin-right: 4px; color: var(--brand-accent); font-size: var(--fs-xs); }

.detail-code {
    font-family: "Consolas", "Menlo", monospace;
    font-size: var(--fs-sm);
}

.detail-category {
    display: inline-block;
    min-width: calc(40px * var(--fs-scale));
    padding: 2px 8px;
    border-radius: 20px;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.detail-category-工項 { color: var(--brand); background: var(--brand-soft); }
.detail-category-人工 { color: #8a5a10; background: #fff6e5; }
.detail-category-機具 { color: #1d6a8a; background: #e6f4f9; }
.detail-category-材料 { color: #17795c; background: #eaf8f2; }
.detail-category-雜項 { color: #6a49a0; background: #f3edfb; }

@media (max-width: 760px) {
    .tools-search { width: 100%; margin-left: 0; }
    .tools-search input { width: 100%; }
    .tools-buttons { width: 100%; margin-left: 0; }
    .tools-buttons > button { flex: 1; }
}

/* 工項中文名稱不要被拆成一個字一行（其餘欄位維持原本的斷字設定） */
#project-item-code-module .code-item-table td:nth-child(3) {
    overflow-wrap: normal;
    word-break: keep-all;
    line-height: 1.5;
}

/* 規則表每一欄底下也放一顆「新增代碼」：清單長的時候不用捲回最上面找＋。
   跟右上角那顆是同一個 data-rule-add，共用同一段程式。 */
.code-rule-add-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 7px 6px;
    border: 0;
    border-top: 1px dashed var(--line);
    color: var(--brand-accent);
    background: #f7fbfe;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    cursor: pointer;
}

.code-rule-add-bottom:hover {
    color: #fff;
    background: var(--brand-accent);
}

.code-rule-add-bottom:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: -2px;
}

/* 產出檔案清單：圖示改用 assets/file-types/ 的格式徽章（2026/08/21） */
.produce-file-name {
    display: inline-flex;
    align-items: flex-start;
    text-align: left;
}

/* 格式欄直接放格式圖示，取代原本的文字標籤 */
.produce-file-icon {
    display: block;
    width: calc(30px * var(--fs-scale));
    height: calc(30px * var(--fs-scale));
    margin: 0 auto;
}

.produce-file-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.produce-file-text b {
    color: var(--text-1);
    font-size: var(--fs-md);
    line-height: 1.45;
}

.produce-file-text small {
    color: var(--text-4);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.produce-bundle-icon img {
    width: calc(24px * var(--fs-scale));
    height: calc(24px * var(--fs-scale));
}

.produce-bundle-icon {
    background: transparent;
}

/* 系統比對結果：每一張正確率卡片底下各有一顆不符清單下載鈕（2026/08/21） */
.compare-rate {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 按鈕靠右下，寬度只包住文字，不要拉滿整張卡片 */
.compare-download {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-end;
    margin-top: 12px;
    padding: 6px 12px;
    text-decoration: none;
    white-space: nowrap;
}

.compare-download-icon {
    width: calc(18px * var(--fs-scale));
    height: calc(18px * var(--fs-scale));
}

/* 異常申報的兩條動作列（填寫申報＝取消／回報，目前進度＝關閉）靠 hidden 切換。
   注意：.role-edit-modal-actions 設了 display: flex，而作者樣式一律優先於瀏覽器
   預設的 [hidden] { display: none }，所以只加 hidden 屬性是藏不掉的，必須明確覆蓋。 */
.role-edit-modal-actions[hidden] {
    display: none !important;
}

/* 新增暫行碼的「基本資料」排成一列：
   代碼與延伸碼是固定長度（10 碼、最多 2 碼），給剛好的寬度就好，
   剩下的空間分給三個名稱欄位；項目種類是下拉，也給固定寬度。
   2026/08/21 二修：彈窗加寬到 1320px 後，欄距也一起放寬，新增才不會比編輯擠。 */
.code-form-grid-basic {
    grid-template-columns:
        calc(140px * var(--fs-scale))
        calc(84px * var(--fs-scale))
        minmax(0, 1.5fr)
        minmax(0, 1.35fr)
        minmax(0, 1.15fr)
        calc(128px * var(--fs-scale));
    gap: 11px 16px;
}

@media (max-width: 1120px) {
    .code-form-grid-basic {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .code-form-grid-basic {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 代碼欄還沒選碼時顯示「請先選碼」，唯讀欄位是等寬粗體，提示文字改回一般字體
   才不會又把欄位撐開，順便用淺灰跟真的代碼區分開來。 */
.code-form-field input:read-only::placeholder {
    font-family: "Noto Sans TC", Arial, sans-serif;
    font-weight: 400;
    color: var(--text-4);
}

/* ==========================================================================
   單價分析項目彈窗最上方的工項資料列（2026/08/21 新增，08/21 二版改版面）
   壓成兩列：上面是「這是哪個工項」，下面是七格等寬的數字，
   彈窗很寬（明細表 19 欄）時字才不會被拉得四散。

   配色跟著模組走，兩邊要看得出來不一樣：
     預算編製（標單）＝綠色系，與底下工項欄位那一排一致
     契約編製模組    ＝紫色系
   色票集中在下面這幾個變數，改一個地方就好。
   ========================================================================== */
.analysis-item-summary {
    --sum-line: #cfe3d8;
    --sum-bg: #f3f9f6;
    --sum-head-bg: #e8f4ed;
    --sum-accent: #1f6d43;
    --sum-strong: #14532d;

    /* 這一條放在彈窗卡片（display:flex; flex-direction:column）裡面，
       預設的 flex-shrink:1 會把它壓扁，配上 overflow:hidden 就變成第二列被切一半。
       跟抬頭、工項欄位、工具列一樣要 flex:none，高度以內容為準。 */
    flex: none;
    /* 2026/09/01：下方留 14px，跟工具列（插入工項那排）不要貼在一起 */
    margin: 18px 20px 14px;
    border: 1px solid var(--sum-line);
    border-radius: 8px;
    background: var(--sum-bg);
    color: var(--text-2);
    font-size: var(--fs-sm);
    overflow: hidden;
}

/* 契約編製模組：整組換成紫色 */
.contract-edit-page .analysis-item-summary {
    --sum-line: #d9cbee;
    --sum-bg: #faf7ff;
    --sum-head-bg: #f2ebfc;
    --sum-accent: #5d3f92;
    --sum-strong: #452c70;
}

/* ---- 上：工項名稱／代碼／單位 ---- */
.analysis-summary-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--sum-line);
    background: var(--sum-head-bg);
    min-width: 0;
}

.analysis-summary-caption {
    flex: none;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--sum-accent);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 1px;
}

.analysis-summary-name {
    flex: 0 1 auto;
    overflow: hidden;
    color: var(--sum-strong);
    font-size: var(--fs-base);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analysis-summary-code {
    flex: none;
    padding: 2px 8px;
    border: 1px solid var(--sum-line);
    border-radius: 4px;
    background: #fff;
    color: var(--sum-accent);
    font-family: "Consolas", "Menlo", monospace;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .6px;
}

/* 單位靠右，跟 PCCES 原系統一樣 */
.analysis-summary-unit {
    flex: none;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    margin-left: auto;
    white-space: nowrap;
}

.analysis-summary-unit > b {
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-weight: 500;
}

.analysis-summary-unit > span {
    color: var(--sum-strong);
    font-weight: 700;
}

/* ---- 下：七格等寬的數字 ---- */
.analysis-summary-stats {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.analysis-summary-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 14px;
    border-left: 1px solid var(--sum-line);
    min-width: 0;
}

.analysis-summary-stat:first-child {
    border-left: 0;
}

/* 複價是這一列的結論，底色加深一點 */
.analysis-summary-stat.is-total {
    background: var(--sum-head-bg);
}

.analysis-summary-stat-label {
    color: var(--text-4);
    font-size: var(--fs-xs);
    line-height: 1.3;
    white-space: nowrap;
}

.analysis-summary-stat-value {
    overflow: hidden;
    color: var(--sum-accent);
    font-size: var(--fs-md);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analysis-summary-stat-value.is-num {
    font-variant-numeric: tabular-nums;
}

.analysis-summary-stat.is-total .analysis-summary-stat-value {
    color: var(--sum-strong);
}

.analysis-summary-input {
    width: 100%;
    box-sizing: border-box;
    padding: 3px 7px;
    border: 1px solid var(--sum-line);
    border-radius: 5px;
    background: #fff;
    color: var(--sum-accent);
    font: 700 var(--fs-md)/1.35 "Consolas", "Menlo", monospace;
    text-align: right;
}

.analysis-summary-input:focus {
    border-color: var(--sum-accent);
    outline: 2px solid rgba(31, 109, 67, .16);
    outline-offset: 1px;
}

.contract-edit-page .analysis-summary-input:focus {
    outline-color: rgba(93, 63, 146, .16);
}

/* 窄一點的畫面：七格排不下就折成四格、再折成兩格 */
@media (max-width: 1180px) {
    .analysis-summary-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .analysis-summary-stat:nth-child(4n + 1) {
        border-left: 0;
    }

    .analysis-summary-stat:nth-child(n + 5) {
        border-top: 1px solid var(--sum-line);
    }
}

@media (max-width: 700px) {
    .analysis-item-summary {
        margin-right: 12px;
        margin-left: 12px;
    }

    .analysis-summary-head {
        flex-wrap: wrap;
    }

    .analysis-summary-unit {
        margin-left: 0;
    }

    .analysis-summary-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analysis-summary-stat:nth-child(4n + 1) {
        border-left: 1px solid var(--sum-line);
    }

    .analysis-summary-stat:nth-child(odd) {
        border-left: 0;
    }

    .analysis-summary-stat:nth-child(n + 3) {
        border-top: 1px solid var(--sum-line);
    }
}

/* ==========================================================================
   底部「儲存／確認及製作標單」貼近表格（2026/08/22）

   真正造成「開分頁時中間空一大塊」的是這一條：
       .page-shell .editor-body { min-height: calc(100vh - 208px) }
   它讓放表格的那一段永遠撐滿整個畫面高度。沒開分頁時表格很長，撐不撐得滿看不出來；
   一旦開分頁只剩 10 列，表格變短，那一段仍然佔著整個螢幕高，
   多出來的空白就全部堆在表格與按鈕中間（圖二）。
   所以要拿掉的是這個「撐滿高度」，不是表格自己的邊距。
   外層 .page-shell 本來就有 min-height:100vh，頁尾一樣會待在畫面下緣，
   多的空白會落在按鈕下方，而不是卡在表格與按鈕之間。
   ========================================================================== */
.budget-edit-page .page-shell .editor-body {
    min-height: 0;
}

/* 表格（或頁碼列）到按鈕之間固定 8px，開不開分頁都一樣 */
.budget-edit-page .editor-no-side .estimate-wrap {
    padding-bottom: 0;
}

.budget-edit-page .table-pagination-pages-footer {
    margin: 8px 0 0;
}

.budget-edit-page .editor-bottom-actions {
    padding-top: 8px;
    padding-bottom: 0;
}

/* ==========================================================================
   自主檢查清單（2026/08/22 新增，core/self-check-list.js）
   兩個地方共用同一套版面：
     · 轉入標單流程的第一步（.produce-check-list 裡）
     · 預算編製工具列的「自主檢查」（.tools-body 裡）
   每一列：勾選框＋序號 ｜ 檢查項目 ｜ 狀態 ｜「系統協助檢查」
   ========================================================================== */
.self-check-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid #e2ebf2;
}

.self-check-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
}

.self-check-all input {
    width: calc(17px * var(--fs-scale));
    height: calc(17px * var(--fs-scale));
    accent-color: #27804e;
    cursor: pointer;
}

.self-check-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.self-check-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid #e2ebf2;
    border-radius: 7px;
    background: #fff;
}

.self-check-item.is-done {
    border-color: #bfe0cd;
    background: #f4fbf7;
}

.self-check-item.is-fail {
    border-color: #f0c9c9;
    background: #fdf6f6;
}

.self-check-tick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.self-check-tick input {
    width: calc(17px * var(--fs-scale));
    height: calc(17px * var(--fs-scale));
    accent-color: #27804e;
    cursor: pointer;
}

.self-check-no {
    display: inline-grid;
    place-items: center;
    min-width: calc(22px * var(--fs-scale));
    height: calc(22px * var(--fs-scale));
    padding: 0 5px;
    border-radius: 999px;
    background: #eef3f8;
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.self-check-item.is-done .self-check-no {
    background: #27804e;
    color: #fff;
}

.self-check-text {
    min-width: 0;
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

.self-check-state {
    white-space: nowrap;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.self-check-state.is-pass { color: #1f6d43; }
.self-check-state.is-fail { color: #c0392b; }

.self-check-run {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: calc(30px * var(--fs-scale));
    padding: 0 11px;
    border: 1px solid #a9c8e4;
    border-radius: 6px;
    background: #f2f8fd;
    color: #1d5c93;
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.self-check-run:hover {
    border-color: #6ea5d6;
    background: #e4f0fa;
}

.self-check-run.is-all {
    background: #1d5c93;
    border-color: #1d5c93;
    color: #fff;
}

.self-check-run.is-all:hover {
    background: #164a78;
    border-color: #164a78;
}

/* 契約編製模組換成紫色系 */
.contract-edit-page .self-check-run {
    border-color: #c3b1e0;
    background: #f6f1fd;
    color: #5d3f92;
}

.contract-edit-page .self-check-run.is-all {
    background: #5d3f92;
    border-color: #5d3f92;
    color: #fff;
}

.contract-edit-page .self-check-item.is-done {
    border-color: #cbbde4;
    background: #f7f3fd;
}

.contract-edit-page .self-check-item.is-done .self-check-no,
.contract-edit-page .self-check-all input,
.contract-edit-page .self-check-tick input {
    background: #5d3f92;
    accent-color: #5d3f92;
    color: #fff;
}

.contract-edit-page .self-check-state.is-pass { color: #5d3f92; }

/* 窄畫面：狀態與按鈕移到第二列 */
@media (max-width: 720px) {
    .self-check-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .self-check-state,
    .self-check-run {
        grid-column: 2;
        justify-self: start;
    }

    .self-check-head {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   單價分析項目彈窗：整張卡片一起捲（2026/08/22 三修）

   一修時卡片超出畫面會被裁掉，先做成「中間自己捲」的內捲動區；
   使用者回饋不要彈窗裡再多一條捲軸，要跟工項編輯一樣整頁往下滑。
   改成卡片本身 overflow-y:auto——max-height 是 100vh 換算的，
   所以瀏覽器放大縮小（視窗變相變小）時卡片跟著縮，內容一律捲得到，
   不會再發生「放大後底部被切掉」。
   ========================================================================== */
.analysis-modal-card {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* .analysis-scroll 這層保留（HTML 結構不動），但不再自己捲 */
.analysis-modal-card > .analysis-scroll {
    overflow: visible;
}

.analysis-scroll .analysis-table-wrap {
    max-width: none;
    overflow: visible;
}

/* 注入的那個單價分析彈窗（.upa-modal）同步：拿掉內捲動區，整卡一起捲 */
.upa-modal .analysis-modal-card {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.upa-modal .upa-scroll {
    overflow: visible;
}

/* ==========================================================================
   清單功能欄的三顆文件鈕（2026/08/22）：預算書🧮／標單📄／契約書✍️
   三顆都開同一份編輯頁，用邊框色帶出各自的表格主題色：
   綠＝預算書、深黃＝標單、紫＝契約書。
   ========================================================================== */
.doc-action {
    border: 1px solid #bfcbd6;
    background: #fff;
    margin-right: 7px;
}

/* 2026/08/22 二版：表情符號太不明顯，改用全站同一套 Font Awesome 圖示，
   邊框、底色與圖示顏色都跟著各自的表格主題色（綠／深黃／紫）。 */
.doc-action i {
    font-size: calc(16px * var(--fs-scale));
    line-height: 1;
}

.doc-action[title="預算書"] { border-color: #7ab897; background: #f0f9f4; color: #1f6d43; }
.doc-action[title="標單"]   { border-color: #ccae4e; background: #fdf7e5; color: #8a6a12; }
.doc-action[title="契約書"] { border-color: #b399d9; background: #f7f2fd; color: #5d3f92; }

.doc-action:hover { filter: brightness(.96); }

/* ==========================================================================
   標單編輯（budget_edit.html?module=tender）：表格改深黃色（2026/08/22）
   做法完全比照契約書的紫色主題（.contract-edit-page 那一組），
   只動 .tender-edit-page 底下的表格配色，其他共用的顏色一律不碰。
   ========================================================================== */
.tender-edit-page .estimate-table th {
    background: #8a6a12 !important;
}

.tender-edit-page .estimate-table .group > td {
    background: #faf5e2 !important;
    color: var(--text-1) !important;
    font-weight: 700;
}

.tender-edit-page .estimate-table .group.sub > td {
    background: #fdfaf0 !important;
}

.tender-edit-page .estimate-table .group .collapse-row,
.tender-edit-page .estimate-table .group .collapse-row * {
    color: var(--text-1) !important;
}

.tender-edit-page .estimate-table .grand-total td {
    background: #6d5410 !important;
    color: #fff !important;
}

.tender-edit-page .estimate-table tbody tr:not(.grand-total):hover > td {
    background: #faf6e9 !important;
}

.tender-edit-page .estimate-table .is-selected td,
.tender-edit-page .estimate-table .is-group-selected td {
    background: #f3ecd2 !important;
}

.tender-edit-page .estimate-table .is-active td {
    box-shadow: inset 0 2px #b08d24, inset 0 -2px #b08d24;
}

/* 編輯格聚焦（同契約主題的做法：hover 底色不能蓋過正在編輯的格子） */
.tender-edit-page .estimate-table tbody tr:hover > td[data-editable="true"][contenteditable="true"],
.tender-edit-page .estimate-table tbody tr:hover > td.is-cell-editing,
.tender-edit-page .estimate-table tbody tr:hover > td:focus-within,
.tender-edit-page .estimate-table tbody tr:hover > td:has(input:focus),
.tender-edit-page .estimate-table tbody tr:hover > td:has(select:focus) {
    background: #fff !important;
}

/* ==========================================================================
   歷史價格搜尋列與九欄表格（2026/08/22，core/history-price.js）
   工項編輯／兩個單價分析彈窗共用。
   ========================================================================== */
.history-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin-bottom: 10px;
    padding: 9px 12px;
    border: 1px solid #e2ebf2;
    border-radius: 7px;
    background: #f8fafc;
}

.history-filter > label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-3);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.history-range,
.history-place {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.history-range em {
    color: var(--text-4);
    font-style: normal;
}

.history-filter input[type="date"],
.history-filter select {
    min-height: calc(30px * var(--fs-scale));
    padding: 2px 8px;
    border: 1px solid #c6d3de;
    border-radius: 5px;
    background: #fff;
    color: var(--text-2);
    font: inherit;
    font-size: var(--fs-sm);
}

.history-price-table .hp-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.history-price-table .hp-code {
    font-family: "Consolas", "Menlo", monospace;
}

.history-price-table .hp-actions {
    white-space: nowrap;
}

.history-price-table .hp-actions .work-code-quote {
    margin-right: 6px;
}

.history-price-table .hp-actions .work-code-quote:last-child {
    margin-right: 0;
}

.history-price-table .hp-empty {
    padding: 16px;
    color: var(--text-4);
    text-align: center;
}

/* 參考單價用主題綠、參考工項維持原本的樣式，兩顆一眼分得出來 */
.history-ref-price {
    border-color: #7ab897 !important;
    background: #f0f9f4 !important;
    color: #1f6d43 !important;
}

/* ==========================================================================
   歷史價格九欄表格的欄寬（2026/08/22 修）

   舊的歷史價格是六欄（案件編號…單價｜功能 74px），欄寬用
   .item-history-table th:nth-child(n) 寫死。改成九欄之後那組舊欄寬還在生效：
   前五欄吃掉 85%、功能欄只有 74px，數量／單價／複價被擠到疊在一起，
   「參考工項／參考單價」兩顆按鈕也爆出格子外。
   這裡用同樣的選擇器強度、寫在檔案後面，把九欄各自的寬度蓋回來；
   工項名稱不給寬度，吃掉剩餘空間。
   ========================================================================== */
.budget-edit-page .history-price-table {
    /* 九欄的最小可讀寬度；比這窄才出現橫向捲軸，不會擠成一團 */
    min-width: calc(880px * var(--fs-scale));
}

.budget-edit-page .history-price-table th:nth-child(1) { width: 6%; }
.budget-edit-page .history-price-table th:nth-child(2) { width: auto; }
.budget-edit-page .history-price-table th:nth-child(3) { width: 12%; }
.budget-edit-page .history-price-table th:nth-child(4) { width: 6%; }
.budget-edit-page .history-price-table th:nth-child(5) { width: 13%; }
.budget-edit-page .history-price-table th:nth-child(6) { width: 7%; }
.budget-edit-page .history-price-table th:nth-child(7) { width: 8%; }
.budget-edit-page .history-price-table th:nth-child(8) { width: 9%; }

/* 功能欄要放得下兩顆按鈕，並跟著字體大小縮放 */
.budget-edit-page .history-price-table th:last-child {
    width: calc(178px * var(--fs-scale));
}

/* 數字靠右（舊規則全部置中，特異性要跟上才能蓋過） */
.budget-edit-page .history-price-table td.hp-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.budget-edit-page .history-price-table td.hp-name {
    text-align: left;
}

/* 兩顆按鈕固定同一行、不換行也不爆格 */
.budget-edit-page .history-price-table td.hp-actions {
    white-space: nowrap;
    text-align: center;
    padding-right: 4px;
    padding-left: 4px;
}

.budget-edit-page .history-price-table .work-code-quote {
    padding: 4px 8px;
}

/* 沒有 .budget-edit-page 的頁面（project-item-code.html 的單價分析）同一套 */
.history-price-table { min-width: calc(880px * var(--fs-scale)); }
.history-price-table th:nth-child(1) { width: 6%; }
.history-price-table th:nth-child(3) { width: 12%; }
.history-price-table th:nth-child(4) { width: 6%; }
.history-price-table th:nth-child(5) { width: 13%; }
.history-price-table th:nth-child(6) { width: 7%; }
.history-price-table th:nth-child(7) { width: 8%; }
.history-price-table th:nth-child(8) { width: 9%; }
.history-price-table th:last-child { width: calc(178px * var(--fs-scale)); }

/* 表格外層允許橫向捲（窄視窗的保險），預設寬度下不會出現捲軸 */
.history-price .item-history-table-wrap {
    overflow-x: auto;
}

/* 確認及製作標單：icon 與文字之間補一格。
   按鈕是 flex 容器，HTML 裡 icon 後面的空白字元會被 flex 佈局丟掉，
   所以看起來黏在一起——用 margin 補回來（2026/08/22）。 */
.budget-edit-page .editor-bottom-actions .complete-button i {
    margin-right: 7px;
}

/* 公開價格查詢：頁碼列下方留一點空間，不要貼著彈窗底邊（2026/08/22） */
.public-price-pagination {
    padding-bottom: 16px;
}

/* ==========================================================================
   碳排／綠色工項編輯：上方唯讀資訊區塊（2026/08/23，同日二版）
   資訊與按鈕放在同一個框：左邊是「小標在上、值在下」的欄位格，
   右邊（with-actions 才有）用分隔線隔出參考／碳分析兩顆按鈕。
   ========================================================================== */
.item-info-block {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 18px 20px 14px;
    border: 1px solid #cfe0d8;
    border-radius: 8px;
    background: #f3f9f6;
    overflow: hidden;
}

.info-block-fields {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
    min-width: 0;
    padding: 12px 16px;
}

.info-block-fields .info-field {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.info-block-fields .info-field.is-grow {
    flex: 1 1 calc(200px * var(--fs-scale));
}

.info-block-fields .info-field > small {
    color: var(--text-4);
    font-size: var(--fs-xs);
    white-space: nowrap;
}

.info-block-fields .info-field > span,
.info-block-fields .info-field > strong {
    overflow: hidden;
    color: #14532d;
    font-size: var(--fs-md);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-block-fields .info-field > strong em {
    margin-left: 4px;
    color: var(--text-4);
    font-size: var(--fs-xs);
    font-style: normal;
    font-weight: 400;
}

.info-block-fields .info-field > code {
    align-self: flex-start;
    padding: 2px 8px;
    border: 1px solid #cfe0d8;
    border-radius: 4px;
    background: #fff;
    color: #1f6d43;
    font-family: "Consolas", "Menlo", monospace;
    font-weight: 700;
    letter-spacing: .5px;
}

/* 按鈕跟資訊同一個框，用分隔線隔開 */
.info-block-actions {
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-left: 1px solid #d9e8e0;
    background: #eef6f1;
}

.info-block-actions button {
    min-width: calc(88px * var(--fs-scale));
}

#carbon-analysis-toggle.is-active {
    border-color: #1f6d43;
    background: #dff0e6;
    color: #14532d;
}

@media (max-width: 700px) {
    .item-info-block {
        flex-direction: column;
    }

    .info-block-actions {
        flex-direction: row;
        border-left: 0;
        border-top: 1px solid #d9e8e0;
    }
}

/* 作者樣式會蓋過瀏覽器預設的 [hidden]，明確處理碳分析區的收合 */
.carbon-picker[hidden] {
    display: none !important;
}

@media (max-width: 700px) {
    .modal-info-row {
        flex-direction: column;
    }

    .item-info-actions {
        flex-direction: row;
    }
}

/* ==========================================================================
   詳細價目表的階層控制列（2026/08/23）：沿用發包設定的 .tools-level 按鈕樣式
   ========================================================================== */
.estimate-level-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 16px;
    border-bottom: 1px solid #e2ebf2;
    background: #fff;
}

.estimate-level-label {
    color: var(--text-3);
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
}

.estimate-table tr.estimate-level-hidden {
    display: none !important;
}

/* 標單／契約主題下控制列跟著配色 */
.tender-edit-page .estimate-level-bar { border-bottom-color: #ecdfb4; }
.contract-edit-page .estimate-level-bar { border-bottom-color: #e0d4f0; }

/* ==========================================================================
   彈窗縮放保險（2026/08/23）
   放大縮小＝視窗變相變小。每個彈窗卡片都要：max-height 跟著 100vh 走＋
   卡片自己能捲，內容才不會在高縮放時被裁掉。
   下面三個是體檢時發現漏掉的（其餘卡片本來就有）。
   ========================================================================== */
.green-modal-card,
.draft-note-card {
    max-height: calc(100vh - 32px);
    overflow-x: hidden;
    overflow-y: auto;
}

/* 產製流程卡片原本 overflow:hidden，高度不夠時內容會被 flex 壓扁又裁掉 */
.produce-card {
    overflow-x: hidden;
    overflow-y: auto;
}

.produce-card > * {
    flex: none;
}

/* 詳細價目表階層控制列（2026/08/23 二版）：改放在工具列的第二排。
   工具列是 flex 一列，讓它換行後獨佔整排，上緣加分隔線。 */
.budget-edit-page .editor-actions {
    flex-wrap: wrap;
}

.editor-actions .estimate-level-bar {
    flex: 1 1 100%;
    order: 99;
    margin: 0;
    padding: 8px 0 0;
    border-top: 1px solid #e2ebf2;
    border-bottom: 0;
    background: transparent;
}

/* ── 工項編輯改成舊系統排版（2026/09/01）──
   附圖二的欄位次序：代碼｜外碼 → 名稱｜單位 → Description｜Unit → 備註 → 類別歸屬 → 別名，
   全部放同一個綠框（.modal-item-fields 原本的框線與底色），進階搜尋在右下。
   只改排版，顏色沿用原設計（含契約紫、標單黃的主題覆寫）。 */
.item-modal .modal-item-fields.item-fields-classic { display: block; }
.item-fields-classic .item-classic-grid {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) minmax(calc(180px * var(--fs-scale)), 1fr);
    gap: 12px;
    align-items: center;
}
/* 2026/09/01 三版：標籤與輸入框同一列（原本標籤在上、輸入框在下，一組佔兩列太占空間） */
.item-fields-classic .item-classic-grid label {
    display: flex;
    align-items: center;
    gap: 10px;
}
.item-fields-classic .ic-label {
    flex: none;
    width: calc(92px * var(--fs-scale));
    white-space: nowrap;
}
.item-fields-classic .item-classic-grid label > input,
.item-fields-classic .item-classic-grid label > select,
.item-fields-classic .item-classic-grid label > .ic-category-row {
    flex: 1 1 auto;
    min-width: 0;
}
.item-fields-classic .item-classic-grid + .item-classic-grid { margin-top: 12px; }
.item-fields-classic .ic-full { grid-column: 1 / -1; }
.ic-category-row { display: flex; gap: 8px; }
.ic-category-row input { flex: 1 1 auto; }
.ic-category-row .ic-category-browse {
    flex: none;
    width: calc(42px * var(--fs-scale));
    height: 36px;
    border: 1px solid #bfd0e1;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.ic-category-row .ic-category-browse:hover { border-color: #2f7ec4; color: #1d568c; }
.item-fields-classic input[readonly] { background: #f2f6f9; color: var(--text-3); }
.item-fields-classic .item-advanced-search-row {
    display: flex;
    justify-content: flex-start;   /* 2026/09/01：改靠綠框左邊 */
    margin: 12px 0 0;
}
@media (max-width: 700px) {
    .item-fields-classic .item-classic-grid { grid-template-columns: 1fr; }
}

/* ── 單價分析工項資料列改回舊系統的四列排版（2026/09/01，只改排版、配色照舊） ── */
.analysis-item-summary.summary-classic { padding: 10px 14px 12px; }
.summary-classic .analysis-summary-line { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: center; min-width: 0; }
.summary-classic .analysis-summary-line + .analysis-summary-line { margin-top: 7px; }
.summary-classic .analysis-summary-field { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.summary-classic .analysis-summary-field.is-grow { flex: 1 1 auto; }
/* 2026/09/01 二版：名稱欄不撐滿，單位緊跟在旁邊（名稱過長仍會截斷） */
.summary-classic .analysis-summary-name-field { flex: 0 1 auto; min-width: 0; max-width: 70%; }
.summary-classic .analysis-summary-field-label { color: var(--text-4); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.summary-classic .analysis-summary-name { flex: 0 1 auto; }
.summary-classic .analysis-summary-unit-value { color: var(--sum-strong); font-weight: 700; }
.summary-classic .analysis-summary-input { width: calc(110px * var(--fs-scale)); }
.summary-classic .analysis-summary-stat-value.is-total { color: var(--sum-strong); }
.summary-classic .analysis-summary-money { padding-top: 7px; border-top: 1px dashed var(--sum-line); }
/* 唯讀的百分比格：跟複價一樣置右、等寬數字 */
.upa-table td.upa-c-percent { text-align: right; font-variant-numeric: tabular-nums; padding-right: 10px; }

/* ── 詳細價目表欄寬／列高拖拉（2026/09/01）── */
.estimate-panel .estimate-table thead th { position: relative; }
.estimate-col-resizer {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 3;
}
.estimate-col-resizer:hover { background: rgba(47, 126, 196, .28); }
body.estimate-resizing-col, body.estimate-resizing-col * { cursor: col-resize !important; user-select: none !important; }
body.estimate-resizing-row, body.estimate-resizing-row * { cursor: row-resize !important; user-select: none !important; }
.estimate-table tbody .row-resize-hot { cursor: row-resize; }

/* ── 大項／分項設定改成舊系統排版（2026/09/01，只改排版、配色照舊） ── */
.major-modal .modal-item-fields.major-fields-classic {
    grid-template-columns: minmax(240px, 2.4fr) minmax(calc(150px * var(--fs-scale)), 1fr);
}
.major-fields-classic .mf-seq { grid-column: 1 / -1; max-width: calc(220px * var(--fs-scale)); }
/* 數量與取位原則改直排（附圖六：數量→取位原則→差額攤提 一列一項） */
.major-form-row.major-form-column { flex-direction: column; align-items: stretch; gap: 10px; }
.major-form-row.major-form-column label { justify-content: space-between; }
/* 加總項目挑選的階層控制列 */
.major-sum-level-bar { padding: 10px 18px 0; }
.major-sum-picker-table tr.major-sum-level-hidden { display: none !important; }

/* ── 附圖七修正（2026/09/01）：編碼正確率視窗的「錯誤態樣分析」展開鈕 ──
   .code-rule-toggle 一直沒有自己的樣式（長成瀏覽器預設按鈕、字擠成一小塊）；
   檔尾後來又加了一組給暫行碼規則表用的 .code-rule-panel 通用樣式，把這裡的
   面板邊距歸零。兩件事疊起來版面就跑掉了，這裡用較深的選擇器整組蓋回來。 */
.code-rate-content .code-rule-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 12px 0 0;
    padding: 10px 13px;
    border: 1px solid #d7e3ed;
    border-radius: 7px;
    background: #f6fafd;
    color: var(--brand-accent);
    font: inherit;
    font-size: var(--fs-base);
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.code-rate-content .code-rule-toggle:hover { background: #edf5fb; }
.code-rate-content .code-rule-toggle > i { flex: none; transition: transform .15s ease; }
.code-rate-content .code-rule-toggle.is-open > i { transform: rotate(90deg); }
.code-rate-content .code-rule-toggle.is-open { border-radius: 7px 7px 0 0; }
.code-rate-content .code-rule-toggle span { color: var(--text-4); font-size: var(--fs-xs); font-weight: 500; }
.code-rate-content .code-rule-panel {
    margin: 0 0 10px;
    padding: 8px 14px 10px;
    border: 1px solid #d7e3ed;
    border-top: 0;
    border-radius: 0 0 7px 7px;
    background: #fff;
    color: var(--brand-accent);
    font-size: var(--fs-md);
    box-shadow: none;
}
.code-rate-content .code-rule-panel ol { margin: 5px 0 4px 18px; padding: 0; }

/* ── 階層控制的啟用鈕文字要白（2026/09/01 補）──
   工具列有一條 .budget-edit-page .editor-actions button { color: var(--brand) }，
   比 .tools-level.is-active 更明確，把白字蓋成深藍、跟深藍底疊在一起看不見。
   用三個 class 的選擇器蓋回來。 */
.budget-edit-page .editor-actions .tools-level.is-active { color: #fff; }
/* pcces.css 還有一條 .editor-actions button:hover { background: #edf7f0 }——
   滑到啟用鈕上底色會變淺綠，白字就看不見了。啟用鈕 hover 維持深藍底白字。 */
.budget-edit-page .editor-actions .tools-level.is-active:hover {
    border-color: var(--brand-accent);
    background: var(--brand-accent);
    color: #fff;
}

/* ── 案件資訊1 工程資訊：所在區域／工程所在縣市／施工地點 排同一列（2026/09/01 二版） ── */
.case-block.case-three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .case-block.case-three-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .case-block.case-three-col { grid-template-columns: 1fr; }
}

/* ── 自訂項次編號彈窗（2026/09/01）── */
.calc-seq-custom-row { display: flex; justify-content: flex-end; margin-top: 12px; }
.custom-seq-card { max-width: calc(720px * var(--fs-scale)); width: min(94vw, calc(720px * var(--fs-scale))); }
.custom-seq-body {
    display: flex;
    gap: 14px;
    padding: 14px 18px 4px;
    min-width: 0;
}
.custom-seq-pane-title { margin-bottom: 8px; color: var(--brand); font-size: var(--fs-sm); font-weight: 700; }
.custom-seq-styles { flex: 0 0 calc(200px * var(--fs-scale)); display: flex; flex-direction: column; min-width: 0; }
.custom-seq-content { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.custom-seq-style-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border: 1px solid #d7e3ed;
    border-radius: 7px;
    background: #fff;
    max-height: 46vh;
    overflow-y: auto;
}
.custom-seq-style {
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.custom-seq-style:hover { background: #eef5fb; }
.custom-seq-style.is-selected { border-color: var(--brand-accent); background: var(--brand-accent); color: #fff; font-weight: 700; }
.custom-seq-table-wrap {
    flex: 1 1 auto;
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid #d7e3ed;
    border-radius: 7px;
    background: #fff;
}
.custom-seq-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.custom-seq-table th {
    position: sticky;
    top: 0;
    padding: 8px 12px;
    background: #eaf3ec;
    color: var(--brand);
    text-align: left;
    border-bottom: 1px solid #d7e3ed;
}
.custom-seq-table th:first-child { width: calc(72px * var(--fs-scale)); }
.custom-seq-table td { padding: 7px 12px; border-bottom: 1px solid #edf3f8; color: var(--text-2); }
.custom-seq-table td[contenteditable]:focus { outline: 2px solid rgba(47, 126, 196, .35); outline-offset: -2px; }
.custom-seq-table tr.is-selected td { background: #e8f2fb; }
.custom-seq-table tr:hover td { background: #f2f8fd; }
.custom-seq-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 700px) {
    .custom-seq-body { flex-direction: column; }
    .custom-seq-styles { flex: none; }
    .custom-seq-style-list { max-height: 26vh; }
}

/* ── 單價分析項目：代碼／外碼輸入框拿掉後剩 名稱＋單位 兩欄（2026/09/01 二版） ── */
.modal-item-fields.analysis-fields-slim,
.item-modal .modal-item-fields.analysis-fields-slim {
    grid-template-columns: minmax(240px, 3fr) minmax(calc(120px * var(--fs-scale)), 1fr);
}
/* 2026/09/01 三版：綠框文字加大一級（標籤與輸入內容都從內文 16px 升到 18px） */
.modal-item-fields.analysis-fields-slim label { font-size: var(--fs-lg); }
.modal-item-fields.analysis-fields-slim input,
.modal-item-fields.analysis-fields-slim select {
    height: calc(42px * var(--fs-scale));
    font-size: var(--fs-lg);
}

/* 固定表頭複製品：靠近格線時顯示欄寬拖拉游標（2026/09/01 二版） */
.estimate-sticky-header th.col-resize-hot { cursor: col-resize; }

/* ── 工項編輯四版（2026/09/01）：備註三列高放最下面；價格欄標籤不斷行 ── */
.item-fields-classic .item-classic-grid label > textarea {
    flex: 1 1 auto;
    min-width: 0;
    resize: vertical;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid #bfd0e1;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: inherit;
    font-weight: 500;
}
.item-fields-classic .ic-note-row { align-items: flex-start; }
.item-fields-classic .ic-note-row .ic-label { padding-top: 7px; }
/* 人工比例(%) 這類標籤原本被 6.4rem 的欄寬折成兩行——
   標籤欄改依內容寬（不斷行），寬度由輸入框那欄縮小吸收 */
.item-price-form label {
    grid-template-columns: max-content minmax(0, 1fr) calc(16px * var(--fs-scale));
    white-space: nowrap;
}
.item-price-form label:first-child {
    grid-template-columns: max-content minmax(0, 1fr) calc(52px * var(--fs-scale));
}

/* ── 階層控制搬到「表格分頁」右邊（2026/09/01 三版，工具列不再多佔一排） ── */
.edit-title-with-lock .estimate-level-bar.heading-level-bar {
    padding: 0;
    border-bottom: 0;
    background: transparent;
    margin-left: 4px;
}
.heading-level-bar .tools-levels { margin-bottom: 0; }

/* ── 可編輯＝真正的輸入框樣（2026/09/01 四版）──
   可編輯的文字由 JS 包進 .cell-input 內框，樣式跟頁面上真正的輸入框一致
   （白底、#bfd0e1 細框、圓角，留邊不貼滿整格）；名稱欄的提示畫在名稱本身。
   滑過框變深、編輯中變藍框；鎖定列退回純文字；唯讀資訊不加框。 */
.estimate-table td[data-editable="true"] { cursor: text; }
.estimate-table td[data-editable="true"] .cell-input,
.analysis-table td[data-editable="true"] .cell-input,
.estimate-table .item-name-text[data-editable="true"],
.estimate-table .group-name-text[data-editable="true"] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: calc(30px * var(--fs-scale));
    padding: 3px 8px;
    border: 1px solid #bfd0e1;
    border-radius: 6px;
    background: #fff;
    color: inherit;
    cursor: text;
    text-align: inherit;
}
.estimate-table .item-name-text[data-editable="true"],
.estimate-table .group-name-text[data-editable="true"] {
    display: inline-block;
    width: auto;
    min-width: calc(150px * var(--fs-scale));
    max-width: 100%;
    vertical-align: middle;
}
.estimate-table td[data-editable="true"]:hover .cell-input,
.analysis-table td[data-editable="true"]:hover .cell-input,
.estimate-table .item-name-text[data-editable="true"]:hover,
.estimate-table .group-name-text[data-editable="true"]:hover { border-color: #7fa9cd; }
.estimate-table td[contenteditable="true"] .cell-input,
.analysis-table td[contenteditable="true"] .cell-input,
.estimate-table .item-name-text[contenteditable="true"],
.estimate-table .group-name-text[contenteditable="true"] {
    border-color: #2f7ec4;
    outline: 2px solid rgba(47, 126, 196, .16);
}
/* 鎖定列退回純文字 */
.estimate-table tr.is-locked td[data-editable="true"] .cell-input,
.analysis-table tbody tr.is-locked td[data-editable="true"] .cell-input,
.estimate-table tr.is-locked .item-name-text[data-editable="true"],
.estimate-table tr.is-locked .group-name-text[data-editable="true"] {
    border-color: transparent;
    background: transparent;
    cursor: default;
}
/* 唯讀資訊維持純文字：工項資料列的代碼、碳排／綠色資訊區塊的代碼 */
.analysis-summary-code {
    padding: 0;
    border: 0;
    background: transparent;
}
.item-info-block .info-field code {
    padding: 0;
    border: 0;
    background: transparent;
}

/* ── 類別挑選彈窗（2026/09/01）：要疊在工項編輯（z-index 95）上面 ── */
.belong-modal { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 20px; }
.belong-modal[hidden] { display: none !important; }
.belong-modal-backdrop { position: absolute; inset: 0; background: rgba(23, 48, 71, .45); }
.belong-modal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(92vw, calc(420px * var(--fs-scale)));
    max-height: calc(100vh - 40px);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 42, 66, .28);
    overflow: hidden;
}
.belong-table-wrap { flex: 1 1 auto; overflow-y: auto; margin: 0 18px; border: 1px solid #d7e3ed; border-radius: 7px; }
.belong-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.belong-table th {
    position: sticky;
    top: 0;
    padding: 8px 14px;
    background: #eaf3ec;
    color: var(--brand);
    text-align: left;
    border-bottom: 1px solid #d7e3ed;
}
.belong-table th:first-child { width: calc(64px * var(--fs-scale)); }
.belong-table td { padding: 6px 14px; border-bottom: 1px solid #edf3f8; color: var(--text-2); }
.belong-table tbody tr:hover td { background: #f2f8fd; }
.belong-modal-card .item-modal-actions { flex: none; }

/* ── 按鈕文字不斷行（2026/09/01）──
   字體放大或視窗縮放時，按鈕文字在按鈕裡折行會把版面撐爆。
   一律不斷行：按鈕跟著文字變寬，放不下時整顆換到下一行（動作列都可換行）。 */
.budget-edit-page button,
#analysis-modal button,
#code-analysis-modal button,
#item-modal button { white-space: nowrap; }
.budget-edit-page .item-modal-actions,
.budget-edit-page .analysis-modal-actions,
.budget-edit-page .analysis-toolbar,
.budget-edit-page .green-modal-actions,
.budget-edit-page .major-modal-actions,
.budget-edit-page .editor-bottom-actions { flex-wrap: wrap; row-gap: 8px; }

/* ── 瀏覽器縮放 150% 防爆版（2026/09/01）──
   縮放後畫面的 CSS 寬度變窄，表格被鎖成容器寬、每一欄被壓扁，
   М3、數字、標題通通折行。對策：
   對策改為（2026/09/02 二版）：不加大表格最小寬度（使用者不想在表格裡多一條
   橫向捲軸，維持本來的 1110px 下限就好），改用「文字不斷行＋畫面窄時縮小
   輸入框留白」讓內容塞得下。 */
.budget-edit-page .edit-title-with-lock h1 { white-space: nowrap; }
.budget-edit-page .fixed-switch b { white-space: nowrap; }
.budget-edit-page .table-pagination-controls,
.budget-edit-page .table-pagination-controls label { white-space: nowrap; }
.estimate-table .cell-input,
.analysis-table .cell-input { white-space: nowrap; }

/* ── 手機版按鈕補文字（2026/09/01）──
   幾顆按鈕在窄畫面只剩圖示（預算書／標單檔案、返回列表、複製那排），
   跟旁邊留短字的按鈕不一致也看不懂。統一改成「圖示＋縮短文字」。 */
@media (max-width: 850px) {
    .edit-heading-actions .file-action-button .editor-action-label { display: inline; font-size: 0; }
    .edit-heading-actions .file-action-button .editor-action-label::after { display: inline; font-size: var(--fs-sm); }
    .edit-heading-actions #budget-files .editor-action-label::after { content: "預算書"; }
    .edit-heading-actions #tender-files .editor-action-label::after { content: "標單"; }
    .budget-edit-page #editor-back-to-list .editor-back-label { display: inline; font-size: 0; }
    .budget-edit-page #editor-back-to-list .editor-back-label::after { content: " 返回"; font-size: var(--fs-sm); }
}
@media (max-width: 768px) {
    /* 複製／縮排／取消縮排／新增／刪除：把文字顯示回來（原本只剩圖示） */
    .budget-edit-page .editor-actions .editor-row-actions .toolbar-label {
        display: inline;
        margin-left: 5px;
        font-size: var(--fs-sm);
    }
}

/* ── 手機版按鈕排整齊（2026/09/01 二版）──
   窄畫面時按鈕靠 flex 自動換行，寬窄不一、有的黏在一起。
   改成固定三欄的格線：每顆等寬、置中、間距一致。 */
@media (max-width: 768px) {
    .budget-edit-page .edit-heading-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .budget-edit-page .edit-heading-actions > button,
    .budget-edit-page .edit-heading-actions > a {
        width: 100%;
        justify-content: center;
        margin: 0;
        box-sizing: border-box;
    }
    .budget-edit-page .editor-actions .action-group {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        width: 100%;
    }
    .budget-edit-page .editor-actions .action-group > button {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }
    .budget-edit-page .editor-actions .action-group .fixed-switch {
        justify-content: center;
        margin: 0;
    }
}

/* ── 手機版按鈕排法（2026/09/01 三版，僅窄畫面生效）──
   ① 返回固定放最右欄；② 固定工具列開關移去跟表格分頁同一排（JS 搬）；
   ③ 下排順序改 複製→新增→刪除，第二排 縮排→取消縮排。 */
@media (max-width: 768px) {
    .budget-edit-page #editor-back-to-list { grid-column: 3; }
    .budget-edit-page #estimate-copy { order: 1; }
    .budget-edit-page #estimate-add-row { order: 2; }
    .budget-edit-page #estimate-delete { order: 3; }
    .budget-edit-page #estimate-indent { order: 4; }
    .budget-edit-page #estimate-outdent { order: 5; }
    /* 搬過去之後跟表格分頁排同一列 */
    .budget-edit-page .table-pagination-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
    .budget-edit-page .table-pagination-panel .fixed-switch b { display: inline; white-space: nowrap; }
}

/* ── 表格分頁打開時的跑版修正（2026/09/02）──
   標題列原本不換行，分頁控制（共N筆／每頁顯示）一展開，1~8 階層鈕被擠到
   一欄寬，直接疊成一直排。改法：標題列允許換行、1~8 整組不可拆散也不可壓縮，
   放不下就整組換到下一行。 */
.budget-edit-page .edit-title-with-lock {
    flex-wrap: wrap;
    row-gap: 10px;
}
.edit-title-with-lock .estimate-level-bar.heading-level-bar { flex: none; }
.heading-level-bar .tools-levels { flex-wrap: nowrap; }
.budget-edit-page .table-pagination-panel { flex: none; }

/* 畫面偏窄（含瀏覽器縮放 150%）時，縮小輸入框的留白換取欄寬 */
@media (min-width: 769px) and (max-width: 1560px) {
    .estimate-table .cell-input,
    .analysis-table .cell-input { padding: 3px 4px; }
}

/* ── 桌面版表格排版統一（2026/09/02 四版）──
   之前只在 1025~1500px 用 fixed 排版，超過 1500（縮放 110%／125%）又落回
   舊的 auto 排版，數字換一個縮放比例就爆一次。改成桌面一律 fixed＋百分比欄寬：
   同一套規則在任何縮放比例下都等比縮放，不會改一處壞一處。
   字級與留白的縮小則只在畫面較窄（≤1500px）時啟動。 */
@media (min-width: 1025px) {
    .budget-edit-page .estimate-panel .estimate-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }
    .budget-edit-page .estimate-panel .estimate-table th:nth-child(1) { width: 4% !important; }
    .budget-edit-page .estimate-panel .estimate-table th:nth-child(2) { width: 17% !important; }
    .budget-edit-page .estimate-panel .estimate-table th:nth-child(3) { width: 4.5% !important; }
    .budget-edit-page .estimate-panel .estimate-table th:nth-child(4) { width: 4% !important; }
    .budget-edit-page .estimate-panel .estimate-table th:nth-child(5) { width: 6% !important; }
    .budget-edit-page .estimate-panel .estimate-table th:nth-child(6) { width: 9% !important; }
    .budget-edit-page .estimate-panel .estimate-table th:nth-child(7) { width: 8.5% !important; }
    .budget-edit-page .estimate-panel .estimate-table th:nth-child(8) { width: 13% !important; }
    .budget-edit-page .estimate-panel .estimate-table th:nth-child(9) { width: 9% !important; }
    .budget-edit-page .estimate-panel .estimate-table th:nth-child(10) { width: 6.5% !important; }
    .budget-edit-page .estimate-panel .estimate-table th:nth-child(11) { width: 6.5% !important; }
    .budget-edit-page .estimate-panel .estimate-table th:nth-child(12) { width: 6% !important; }
    .budget-edit-page .estimate-panel .estimate-table th:nth-child(13) { width: 6% !important; }
    .budget-edit-page .estimate-table .work-code-trigger {
        padding-left: 4px;
        padding-right: 4px;
        letter-spacing: 0;
        font-size: calc(16px * var(--fs-scale));
    }
}
/* 畫面較窄（含縮放 150%）時再縮字級與留白 */
@media (min-width: 1025px) and (max-width: 1500px) {
    .budget-edit-page .estimate-panel .estimate-table {
        font-size: calc(13px * var(--fs-scale));
    }
    .budget-edit-page .estimate-panel .estimate-table th,
    .budget-edit-page .estimate-panel .estimate-table td {
        padding-left: 5px;
        padding-right: 5px;
    }
    .estimate-table .cell-input {
        padding: 2px 4px;
        min-height: calc(26px * var(--fs-scale));
    }
    .estimate-table .item-name-text[data-editable="true"] { min-width: calc(110px * var(--fs-scale)); }
}

/* ── 設定小數位數改成舊系統的兩組欄位（2026/09/07，配色照本站） ── */
.calc-decimal-groups { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.calc-decimal-fieldset { flex: 0 1 calc(340px * var(--fs-scale)); min-width: calc(260px * var(--fs-scale)); }
.calc-decimal-grid.calc-decimal-rows { grid-template-columns: minmax(0, 1fr); }

/* ── 案件資訊-預算 改版（2026/09/08）── */
.case-duration-field > span .case-duration-gap { margin-left: 14px; }
.case-coord-field > div { display: flex; align-items: center; min-height: 38px; }
.case-rate-value {
    display: flex;
    align-items: center;
    min-height: 38px;
    color: var(--brand);
    font-size: var(--fs-lg);
    font-weight: 700;
}
.case-fieldset .case-fieldset-block { padding: 4px 4px 0; }

/* ── 案件資訊排版修正（2026/09/08 二版）──
   ① 兩欄中線那條淡分隔線在新版多段小區塊裡到處都是一條線、還會切過三欄列，整個拿掉；
   ② 工程概要下方留白；③ 次要分類勾選格的空狀態。 */
.case-block.case-two-col::before { content: none; }
.case-outline-block { padding-bottom: 20px; }
.case-subclass-empty { color: var(--text-4); font-size: var(--fs-sm); }

/* ── 案件資訊-預算／-契約 版面重排（2026/09/08 三版）──
   拋開舊的 case-block 兩欄規則，改用 12 欄格線自己排：
   欄距一致、每一列的欄寬有節奏（8+4／12／4+4+4／7+5／6+6），
   正確率改成資訊卡，工程座標改為經緯度輸入。 */
/* 2026/09/08 四版：改成「內容導向」的排法——每種欄位給合理的固定寬度，
   放不下自動換行；輸入框不再被撐成整排長條。 */
.case-v2 .case-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 26px;
    padding: 14px 20px 0;
}
.case-v2 .case-fieldset .case-grid { padding: 8px 6px 2px; }
.case-v2 .case-grid > * { flex: 0 0 auto; min-width: 0; max-width: 100%; box-sizing: border-box; }
.case-v2 .cg-3 { width: calc(170px * var(--fs-scale)); }
.case-v2 .cg-4 { width: calc(240px * var(--fs-scale)); }
.case-v2 .cg-5 { width: calc(360px * var(--fs-scale)); }
.case-v2 .cg-6 { width: calc(300px * var(--fs-scale)); }
.case-v2 .cg-7 { width: calc(500px * var(--fs-scale)); }
.case-v2 .cg-8 { width: calc(560px * var(--fs-scale)); }
.case-v2 .cg-12 { width: 100%; }
/* 工程座標：經緯度兩格 */
.case-coord-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.case-coord-row em { flex: none; color: var(--text-4); font-style: normal; font-size: var(--fs-sm); white-space: nowrap; }
.case-coord-row input { flex: 1 1 auto; min-width: 0; }
/* 正確率資訊卡 */
.case-rate-tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 16px;
    border: 1px solid #c9ddf0;
    border-radius: 9px;
    background: #eaf3fb;   /* 2026/09/08 四版：改淺藍底 */
}
.case-rate-tile small { color: var(--text-4); font-size: var(--fs-sm); font-weight: 700; }
.case-rate-tile strong { color: var(--brand-accent); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.2; }
/* 工程概要區塊下方留白 */
.case-v2 .case-grid.case-outline-block { padding-bottom: 20px; }

/* ── 案件資訊五版（2026/09/08）：一列一個群組 ──
   每一列自己一個 .case-row，同類型欄位（地點＋座標、工期＋正確率）固定同列；
   工期與座標的小輸入框給固定寬，不再被 .case-field 的 100% 撐爆成直排。 */
.case-v2 .case-grid.case-row { padding-top: 0; margin-top: 16px; }
.case-v2 .cw-org { width: calc(520px * var(--fs-scale)); }
.case-v2 .cw-tender { width: calc(200px * var(--fs-scale)); }
.case-v2 .cw-name { flex: 1 1 calc(360px * var(--fs-scale)); max-width: calc(720px * var(--fs-scale)); }
.case-v2 .cw-region { width: calc(150px * var(--fs-scale)); }
.case-v2 .cw-county { width: calc(200px * var(--fs-scale)); }
.case-v2 .cw-coord { width: calc(400px * var(--fs-scale)); }
.case-v2 .cw-duration { width: calc(560px * var(--fs-scale)); }
.case-v2 .cw-rate { width: calc(220px * var(--fs-scale)); }
/* 工期：三組輸入固定寬、同一行排開 */
.case-duration-field > span { display: flex; flex-wrap: nowrap; align-items: center; gap: 7px; }
.case-duration-field > span em { flex: none; color: var(--text-4); font-style: normal; font-size: var(--fs-sm); white-space: nowrap; }
.case-duration-field input[type="number"] { flex: none; width: calc(88px * var(--fs-scale)); }
.case-duration-field input[type="date"] { flex: none; width: calc(160px * var(--fs-scale)); }
/* 座標兩格也固定寬 */
.case-coord-row input { flex: none; width: calc(130px * var(--fs-scale)); }
@media (max-width: 900px) {
    .case-v2 .case-grid.case-row > * { width: 100% !important; max-width: none; }
    .case-duration-field > span { flex-wrap: wrap; }
}

/* ── 案件資訊六版（2026/09/08）：舊系統式「標籤在左：欄位在右」──
   跟工項編輯綠框同一種排法：標籤靠右對齊加全形冒號、輸入框跟在右邊；
   列的分組維持五版（地點＋座標一列、工期＋正確率一列）。 */
.case-v2 .case-field {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.case-v2 .case-field > span:first-child {
    flex: none;
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
}
.case-v2 .case-field > span:first-child::after { content: '：'; }
.case-v2 .case-field > input,
.case-v2 .case-field > select,
.case-v2 .case-field > .case-org-row,
.case-v2 .case-field > .case-coord-row,
.case-v2 .case-field > textarea { flex: 1 1 auto; min-width: 0; }
.case-v2 .case-textarea-field { align-items: flex-start; }
.case-v2 .case-textarea-field > span:first-child { padding-top: 8px; }
/* 標籤佔掉水平空間，各欄寬加大一號 */
.case-v2 .cw-org { width: calc(600px * var(--fs-scale)); }
.case-v2 .cw-tender { width: calc(280px * var(--fs-scale)); }
.case-v2 .cw-region { width: calc(210px * var(--fs-scale)); }
.case-v2 .cw-county { width: calc(270px * var(--fs-scale)); }
.case-v2 .cw-coord { width: calc(470px * var(--fs-scale)); }
.case-v2 .cw-duration { width: calc(640px * var(--fs-scale)); }
.case-v2 .case-grid .cg-6 { width: calc(360px * var(--fs-scale)); }
.case-v2 .case-grid .cg-4 { width: calc(330px * var(--fs-scale)); }

/* ── 案件資訊七版（2026/09/09）：舊系統直式表單 ──
   一列一個欄位、由上往下排；標籤固定寬靠右加全形冒號（六版樣式沿用），
   輸入框依內容給固定寬，不佔滿整行。正確率兩張卡片並排一列、對齊輸入框起點。 */
.case-v2 .case-grid.case-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.case-v2 .case-stack > * { width: auto !important; max-width: 100%; flex: none; }
.case-v2 .case-stack .case-field > span:first-child { min-width: calc(128px * var(--fs-scale)); }
.case-v2 .case-stack input.cin-md, .case-v2 .case-stack select.cin-md { width: calc(280px * var(--fs-scale)); }
.case-v2 .case-stack input.cin-xl { width: calc(600px * var(--fs-scale)); }
.case-v2 .case-stack .case-org-row { width: calc(620px * var(--fs-scale)); }
.case-v2 .case-stack textarea { width: calc(740px * var(--fs-scale)); max-width: 100%; }
.case-v2 .case-stack .case-fieldset-block input,
.case-v2 .case-stack input[type="date"] { width: calc(220px * var(--fs-scale)); }
.case-v2 .case-grid-tight.case-stack input[type="number"] { width: calc(240px * var(--fs-scale)); }
/* 正確率卡片：並排一列，起點對齊輸入框（128px 標籤 + 8px 間距） */
.case-rate-pair {
    display: flex;
    gap: 14px;
    margin-left: calc(136px * var(--fs-scale));
}
.case-rate-pair .case-rate-tile { width: calc(220px * var(--fs-scale)); }
@media (max-width: 700px) {
    .case-rate-pair { margin-left: 0; flex-wrap: wrap; }
    .case-v2 .case-stack .case-field { flex-wrap: wrap; }
}

/* ── 案件資訊八版（2026/09/09，依規格重構）──
   標籤在上、12 欄 Grid，充分吃滿 1920 寬；輸入框高度／圓角／框線沿用全站
   .case-field 既有樣式；右側「資料品質」卡與輸入欄位視覺區分（虛線框＋淺藍底）。 */
.case-v8 .case-v8-wrap {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    padding: 14px 20px 18px;
}
.case-v8 .case-v8-form { flex: 1 1 auto; min-width: 0; }
.case-v8 .case-v8-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px 18px;
}
.case-v8 .case-v8-pad { padding: 14px 20px 18px; }
.case-v8 .v8-span-4 { grid-column: span 4; }
.case-v8 .v8-span-8 { grid-column: span 8; }
.case-v8 .v8-span-12 { grid-column: span 12; }
.case-v8 .case-field textarea { width: 100%; box-sizing: border-box; }
/* 帶單位的輸入（120 天、8,743,586 元） */
.v8-suffix { display: flex; align-items: center; gap: 8px; }
.v8-suffix input { flex: 1 1 auto; min-width: 0; }
.v8-suffix em { flex: none; color: var(--text-4); font-style: normal; font-size: var(--fs-sm); }
/* 資料品質卡：系統分析結果，跟輸入欄位視覺區分 */
.case-quality {
    flex: 0 0 calc(230px * var(--fs-scale));
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 10px;
    border: 1px dashed #a9c8e2;
    border-radius: 10px;
    background: #f4f9fd;
}
.case-quality-title { color: var(--brand-accent); font-size: var(--fs-sm); font-weight: 700; }
.case-quality-title i { margin-right: 6px; }
.case-quality .case-rate-tile { width: auto; }
.case-quality-note { margin: 0; color: var(--text-4); font-size: var(--fs-xs); }
@media (max-width: 1100px) {
    .case-v8 .case-v8-wrap { flex-direction: column; }
    .case-quality { flex: none; width: 100%; box-sizing: border-box; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .case-v8 .v8-span-4 { grid-column: span 6; }
    .case-v8 .v8-span-8 { grid-column: span 12; }
}
@media (max-width: 640px) {
    .case-v8 .case-v8-grid > * { grid-column: span 12 !important; }
}

/* ── 工期資訊輸入欄加寬（2026/09/09）──
   六版留下的 .case-duration-field 小輸入框規則（88px／160px）還在生效，
   八版的工期區沿用了這個 class，欄位被鎖小。改成撐滿自己的格子。 */
.case-v8 .v8-suffix { width: 100%; }
.case-v8 .case-duration-field input[type="number"],
.case-v8 .case-duration-field input[type="date"] {
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
}

/* 使用者清單的帳號狀態標籤（2026/09/14） */
.user-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: var(--fs-xs);
    white-space: nowrap;
}
.user-status.is-on { border: 1px solid #cfe5d6; background: #f0f7f2; color: #1e7a3c; }
.user-status.is-off { border: 1px solid var(--line); background: #f1f2f4; color: var(--text-3); }
#user-gid-field[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   公開價格查詢改版（2026/09/14）：查詢條件卡＋查詢結果卡（四種呈現方式）。
   版面比照工程會價格資料庫，配色沿用本站（綠標題列、藍輔助色）。
   ══════════════════════════════════════════════════════════════════════════ */
/* 彈窗卡片本身沒有內距，所以每一塊自己抓左右邊距 */
.public-price-modal-card { padding-bottom: 18px; background: #f7fafc; }
.public-price-modal-card > .pp-search { margin: 18px 20px 14px; }
.public-price-modal-card > .pp-export { margin: 0 20px 12px; }
.public-price-modal-card > .pp-result { margin: 0 20px; }
.pp-search,
.pp-result {
    border: 1px solid #d7e3ed;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(29, 86, 140, .06);
}
.pp-search-head,
.pp-result-head {
    padding: 10px 16px;
    border-bottom: 1px solid #d7e3ed;
    background: #eef3f7;
    color: var(--brand);
    font-size: var(--fs-base);
    font-weight: 700;
}
.pp-search-head i,
.pp-result-head i { margin-right: 7px; }
.pp-search-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 34px;
    padding: 6px 22px 16px;
}
.pp-field {
    display: grid;
    grid-template-columns: calc(140px * var(--fs-scale)) minmax(0, 1fr);
    gap: 6px 14px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #e6edf3;
    color: var(--text-2);
    font-size: var(--fs-sm);
}
/* 一般欄位兩欄一列，最後一列與跨欄的欄位不畫底線 */
.pp-search-body > .pp-field:nth-last-child(2),
.pp-search-body > .pp-field:nth-last-child(3) { border-bottom: 0; }
.pp-field-full { border-bottom: 1px dashed #e6edf3; }
.pp-field-full { grid-column: 1 / -1; }
.pp-field > select,
.pp-field > input {
    box-sizing: border-box;
    width: 100%;
    min-height: calc(38px * var(--fs-scale));
    padding: 6px 10px;
    border: 1px solid #bfd0e1;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: inherit;
}
.pp-required { color: var(--text-2); }
.pp-required::before { content: '＊'; margin-right: 2px; color: #c8322b; }
/* 決標日：左圖示的日期框＋快速區間（2026/09/14 二版，說明文字依指示移除） */
.pp-range { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pp-date {
    position: relative;
    flex: 0 1 calc(210px * var(--fs-scale));
    display: flex;
    align-items: center;
    min-width: 0;
}
.pp-date > i {
    position: absolute;
    left: 11px;
    color: var(--brand-accent);
    font-size: var(--fs-sm);
    pointer-events: none;
}
.pp-date > input {
    box-sizing: border-box;
    width: 100%;
    min-height: calc(38px * var(--fs-scale));
    padding: 6px 10px 6px 32px;
    border: 1px solid #bfd0e1;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: inherit;
    font-variant-numeric: tabular-nums;
}
.pp-date > input:focus {
    border-color: var(--brand-accent);
    outline: 2px solid rgba(47, 126, 196, .16);
}
.pp-range > em {
    flex: none;
    color: var(--text-3);
    font-style: normal;
    font-size: var(--fs-sm);
}
.pp-date-quick { display: inline-flex; gap: 6px; margin-left: 4px; }
.pp-date-quick button {
    padding: 5px 12px;
    border: 1px solid #cfdeea;
    border-radius: 99px;
    background: #fff;
    color: var(--brand-accent);
    font: inherit;
    font-size: var(--fs-xs);
    cursor: pointer;
}
.pp-date-quick button:hover { border-color: var(--brand-accent); background: #eef5fb; }
.pp-date-quick button.is-active { border-color: #17649a; background: #17649a; color: #fff; }
.pp-search-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 14px;
}
.pp-export { display: flex; gap: 10px; }
.pp-export-button {
    min-height: calc(38px * var(--fs-scale));
    padding: 0 20px;
    border: 0;
    border-radius: 6px;
    background: #1f6d43;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.pp-export-button:hover { background: #1a5c39; }
.pp-result-body { padding: 16px 18px 18px; }
.pp-scope {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-left: 3px solid var(--brand);
    border-radius: 0 7px 7px 0;
    background: #f2f8f5;
    color: var(--text-2);
    font-size: var(--fs-sm);
}
/* 標題下的紅字提醒（2026/09/15） */
.pp-scope-note {
    margin: 0 20px 12px;
    color: #c0392b;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .02em;
}
.pp-modes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.pp-mode {
    min-height: calc(38px * var(--fs-scale));
    padding: 0 18px;
    border: 1px solid #cfdeea;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: inherit;
    cursor: pointer;
}
.pp-mode i { margin-right: 6px; }
.pp-mode.is-active { border-color: #17649a; background: #17649a; color: #fff; font-weight: 600; }
/* .pp-remind（提醒清單）2026/09/15 依指示移除，樣式一併刪掉 */
.pp-panel[hidden] { display: none !important; }
/* 2026/09/15 起改成七欄（工項名稱／編碼／單位／區域／價格類型／價格／資料來源），
   特異性要壓過舊的 nth-child 寬度設定 */
.public-price-modal-card .public-price-table-wrap { margin: 0; }
.public-price-table.pp-table { min-width: calc(900px * var(--fs-scale)); }
.public-price-table.pp-table th:nth-child(1) { width: 22%; }
.public-price-table.pp-table th:nth-child(2) { width: 13%; }
.public-price-table.pp-table th:nth-child(3) { width: 6%; }
.public-price-table.pp-table th:nth-child(4) { width: 8%; }
.public-price-table.pp-table th:nth-child(5) { width: 10%; }
.public-price-table.pp-table th:nth-child(6) { width: 10%; }
.public-price-table.pp-table th:nth-child(7),
.public-price-table.pp-table th:last-child { width: 31%; }
.public-price-table.pp-table td:last-child { text-align: left; }
.pp-source { color: var(--text-3); font-size: var(--fs-sm); line-height: 1.5; }
.pp-source small { display: block; color: var(--text-4); font-size: var(--fs-xs); }
.pp-table th { white-space: nowrap; }
.pp-table td { vertical-align: middle; }
.pp-table .hp-num { text-align: right; font-variant-numeric: tabular-nums; }
.pp-table th i { margin-left: 4px; color: #bfe0f5; cursor: help; }
.public-price-modal-card .public-price-pagination { margin: 12px 0 0; }
.pp-award-ratio { display: block; color: var(--text-4); font-size: var(--fs-xs); }
.pp-report-button {
    padding: 4px 12px;
    border: 1px solid #e0c3a4;
    border-radius: 6px;
    background: #fdf6ec;
    color: #9a5b12;
    font: inherit;
    font-size: var(--fs-xs);
    cursor: pointer;
}
.pp-report-button:hover { background: #f8ecd9; }
.pp-empty { margin: 10px 0 0; color: var(--text-4); font-size: var(--fs-xs); }
/* 分區查詢 */
.pp-area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(160px * var(--fs-scale)), 1fr));
    gap: 12px;
}
.pp-area-card {
    padding: 14px 16px;
    border: 1px solid #d7e3ed;
    border-radius: 9px;
    background: #f6fafd;
}
.pp-area-card.is-empty { opacity: .55; }
.pp-area-name { color: var(--brand); font-size: var(--fs-sm); font-weight: 700; }
.pp-area-price { margin: 4px 0 2px; color: #17649a; font-size: var(--fs-xl); font-weight: 700; }
.pp-area-meta { color: var(--text-4); font-size: var(--fs-xs); }
/* 樹狀顯示 */
.pp-tree-node {
    margin-bottom: 8px;
    border: 1px solid #e2ebf2;
    border-radius: 8px;
    background: #fff;
}
.pp-tree-node summary {
    display: flex;
    gap: 10px;
    padding: 9px 14px;
    background: #f2f7fb;
    color: var(--brand);
    font-size: var(--fs-sm);
    cursor: pointer;
}
.pp-tree-node summary span { margin-left: auto; color: var(--text-4); font-size: var(--fs-xs); }
.pp-tree-node ul { margin: 0; padding: 8px 14px 12px 30px; color: var(--text-2); font-size: var(--fs-sm); }
.pp-tree-node li { padding: 3px 0; }
.pp-tree-code {
    display: inline-block;
    min-width: calc(120px * var(--fs-scale));
    color: var(--text-4);
    font-family: "Consolas", "Menlo", monospace;
}
.pp-tree-node li b { float: right; color: #17649a; }
/* 趨勢圖表 */
.pp-trend-chart {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    height: calc(190px * var(--fs-scale));
    padding: 12px 14px;
    border: 1px solid #e2ebf2;
    border-radius: 8px;
    background: #fafcfe;
}
.pp-trend-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 4px;
}
.pp-trend-bar i {
    display: block;
    width: 60%;
    max-width: calc(46px * var(--fs-scale));
    height: var(--pp-bar);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #4ea3d8, #17649a);
}
.pp-trend-value { color: #17649a; font-size: var(--fs-xs); font-weight: 700; }
.pp-trend-year { color: var(--text-4); font-size: var(--fs-xs); }
@media (max-width: 900px) {
    .pp-search-body { grid-template-columns: minmax(0, 1fr); }
    .pp-field { grid-template-columns: minmax(0, 1fr); }
    .pp-field-help { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   個人資料蒐集告知暨同意書（2026/09/14）：登入頁用彈窗、管理者啟用頁直接嵌入。
   兩邊都要捲到最下面才解鎖勾選，所以捲動區高度固定、內容一定捲得動。
   ══════════════════════════════════════════════════════════════════════════ */
.privacy-consent-modal {
    position: fixed;
    z-index: 1600;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}
.privacy-consent-modal[hidden] { display: none !important; }
.privacy-consent-backdrop { position: absolute; inset: 0; background: rgba(23, 48, 71, .5); }
.privacy-consent-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(94vw, calc(760px * var(--fs-scale)));
    max-height: calc(100vh - 40px);
    padding: 0 0 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 42, 66, .3);
    overflow: hidden;
}
.privacy-consent-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid #e2ebf2;
    background: #f4f9fc;
}
.privacy-consent-head h2,
.privacy-consent-head h3 {
    margin: 0;
    color: #174c76;
    font-size: var(--fs-lg);
    font-weight: 700;
}
.privacy-consent-close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-3);
    font-size: 1rem;
    cursor: pointer;
}
.privacy-consent-close:hover { background: #e4eef6; }
.privacy-consent-scroll {
    flex: 1 1 auto;
    max-height: calc(46vh);
    min-height: calc(200px * var(--fs-scale));
    margin: 14px 20px 0;
    padding: 14px 16px;
    border: 1px solid #d7e3ed;
    border-radius: 8px;
    background: #fcfdfe;
    overflow-y: auto;
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1.85;
}
.privacy-consent-scroll:focus { outline: 2px solid rgba(47, 126, 196, .3); }
.privacy-consent-text p { margin: 0 0 10px; }
.privacy-consent-text h4 {
    margin: 14px 0 6px;
    color: var(--brand);
    font-size: var(--fs-base);
}
.privacy-consent-sub { margin: 4px 0 2px !important; font-weight: 600; }
.privacy-consent-list { margin: 0 0 8px 26px; }
.privacy-consent-note { margin-top: 12px !important; color: var(--text-4); }
.privacy-consent-updated {
    margin: 12px 0 0;
    color: var(--text-4);
    font-size: var(--fs-xs);
    text-align: right;
}
.privacy-consent-hint {
    margin: 8px 20px 0;
    color: #b0620e;
    font-size: var(--fs-xs);
}
.privacy-consent-hint[hidden] { display: none !important; }
.privacy-consent-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 20px 0;
    color: var(--text-2);
    font-size: var(--fs-sm);
    cursor: pointer;
}
.privacy-consent-check input { width: 16px; height: 16px; accent-color: #286fae; }
.privacy-consent-check input:disabled { cursor: not-allowed; }
.privacy-consent-check input:disabled + span { color: var(--text-4); }
.privacy-consent-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 16px 20px 0;
}
.privacy-consent-cancel,
.privacy-consent-submit {
    min-height: 42px;
    padding: 0 24px;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.privacy-consent-cancel { border: 1px solid #cfdeea; background: #eef2f6; color: #345b74; }
.privacy-consent-submit { border: 0; background: linear-gradient(135deg, #2d89bf, #17649a); color: #fff; }
.privacy-consent-submit:disabled {
    background: #c3d2de;
    color: #fff;
    cursor: not-allowed;
}
/* 嵌在啟用頁裡的版本：沒有彈窗外框，直接是一塊卡片；預設收合，點標題列展開 */
.privacy-consent-inline {
    margin: 0;
    border: 1px solid #d7e3ed;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.privacy-consent-inline .privacy-consent-scroll {
    max-height: calc(200px * var(--fs-scale));
    min-height: 0;
    margin: 12px 14px 0;
}
.privacy-consent-inline .privacy-consent-hint,
.privacy-consent-inline .privacy-consent-check { margin-left: 14px; margin-right: 14px; }
.privacy-consent-inline .privacy-consent-check { margin-top: 11px; margin-bottom: 11px; }
.privacy-consent-inline .privacy-consent-check .req { margin-left: 2px; color: #c0392b; font-style: normal; }

.privacy-consent-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(11px * var(--fs-scale)) 14px;
    background: #f3f8fc;
    color: #1d568c;
    font-size: var(--fs-sm);
    list-style: none;
    cursor: pointer;
}
.privacy-consent-summary::-webkit-details-marker { display: none; }
.privacy-consent-summary:hover { background: #e9f2f9; }
.privacy-consent-summary-main { display: flex; align-items: center; gap: 8px; }
.privacy-consent-summary-note { margin-left: auto; color: #5a7086; font-size: var(--fs-xs); }
.privacy-consent-caret { color: #5a7086; font-size: .84rem; transition: transform .18s ease; }
.privacy-consent-fold[open] .privacy-consent-caret { transform: rotate(180deg); }
.privacy-consent-fold[open] .privacy-consent-summary { border-bottom: 1px solid #e1eaf1; }
.privacy-consent-inline.is-read .privacy-consent-summary-note { color: #1a6a35; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   登入頁改版（2026/09/14）：左說明／右登入卡，登入卡含身分別與三種驗證方式；
   另有單位管理者首次啟用（採購網驗證）三步驟頁。
   版面依指定設計，配色沿用本站登入頁（水藍系）＋廠商用綠色區分。
   ══════════════════════════════════════════════════════════════════════════ */
.water-login { --login-accent: #1d6899; --login-accent-dark: #145179; }
.water-login[data-login-id="vendor"] { --login-accent: #1e7a6a; --login-accent-dark: #156052; }

/* ──────────────────────────────────────────────────────────────────────────
   版面（2026/09/15 資訊層級重構）
   ≥1400  雙欄 45 / 55，內容 max-width 1240px 置中，不隨超寬螢幕拉伸
   1100–1399  compact desktop：gap 收小、登入卡上限降到 540、左側次要內容減量
   <1100  Login Focus：改單欄，登入卡排第一，說明／公告／工具移到下方
   ────────────────────────────────────────────────────────────────────────── */
.login-layout.login-layout-wide {
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr);
    place-items: center stretch;
    align-content: center;
    width: min(1040px, 100%);      /* 2026/09/18：大卡整體收窄，跟登入表單的寬度對上 */
    margin: 0 auto;
    /* 上下留白收小：整頁（logo＋大卡＋頁尾）要塞進 1080p 的可視高度，不出現捲軸 */
    padding-top: 16px;
    padding-bottom: 24px;
}

/* ══ 2026/09/21 從 demo 補（demo 2026/09/17 新增，本檔當時漏了同步）：一張大卡
   （.login-shell）包住左右兩欄 ══════════════════════════════════════════════
   只有這一層有白底、圓角、細藍灰邊框與淡陰影；裡面的左右欄不再各自有外框。
   見 docs/modules/login.md 對齊細節。 */
.login-shell {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #c9dbe8;
    border-radius: 16px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(28, 68, 96, .06),
        0 10px 24px rgba(28, 68, 96, .12),
        0 28px 56px rgba(28, 68, 96, .14);
    overflow: hidden;
}
.login-shell-title {
    position: relative;
    margin: 0;
    padding: 18px 24px 12px;
    color: #123d60;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .3em;
    text-indent: .3em;          /* 抵銷最後一個字的字距，視覺上才真的置中 */
    text-align: center;
}
.login-shell-title::after {
    display: block;
    width: calc(56px * var(--fs-scale));
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--login-accent), var(--login-accent-dark));
    content: '';
}
.login-shell-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* 2026/09/18：左右各半，分隔線正好在卡片正中間 */
    align-items: start;
    border-top: 1px solid #e3ecf3;
}
/* 兩欄都用 border-box，內距算在欄寬內，手機單欄時才不會比卡片還寬被切掉 */
.login-shell-body > .login-intro-panel,
.login-shell-body > .login-card-v2 {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    padding: 20px 32px 22px;
}
.login-shell-body > .login-card-v2 { border-left: 1px solid #dbe6ef; }
.login-layout.login-layout-verify {
    place-items: start center;
    width: min(820px, 100%);
    margin: 0 auto;
    padding-top: 24px;
    padding-bottom: 44px;
}
/* 步驟二欄位多，改用寬版（左資料／右表單），整頁一眼看完不必往下捲 */
.login-layout.login-layout-verify.is-step2 { width: min(940px, 100%); }

/* ---- 左側說明（維持原本的卡片式呈現） ----
   文字直接壓在背景照片上，所以色階再壓深一階，並加一點白色描邊把字從照片上拉出來。 */
.login-intro-panel { align-self: center; color: #1b3f5c; }
.login-intro-title {
    position: relative;
    margin: 0 0 10px;
    padding-bottom: 12px;
    color: #0f3a5c;
    font-size: 1.72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .85), 0 2px 10px rgba(255, 255, 255, .7);
}
.login-intro-title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(54px * var(--fs-scale));
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--login-accent), rgba(29, 104, 153, .18));
    content: '';
}
.login-intro-lead {
    margin: 0 0 18px;
    color: #27506e;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.85;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
.login-notice {
    margin-bottom: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(139, 181, 212, .75);
    border-radius: 12px;
    background: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 1px 2px rgba(28, 68, 96, .08),
        0 8px 20px rgba(28, 68, 96, .12);
}
.login-notice h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #10395b;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .04em;
}
.login-notice h2 i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(26px * var(--fs-scale));
    height: calc(26px * var(--fs-scale));
    border-radius: 8px;
    background: rgba(29, 104, 153, .1);
    color: var(--login-accent);
    font-size: .84rem;
}
/* 2026/09/17：左側整欄合併成「一張卡」——帳號說明／最新公告／環境與元件下載三段，
   段落之間用一條虛線分隔，卡外不再有其他浮著的元件。 */
.login-notice-group { margin-bottom: 0; padding: 4px 20px; }
.login-notice-part { padding: 14px 0; }
.login-notice-part + .login-notice-part { border-top: 1px dashed rgba(139, 181, 212, .85); }
/* 卡內的工具連結：改成無外框的文字連結，避免卡中又出現一排小卡片 */
.login-notice-tools .login-env { gap: 8px 10px; }
.login-notice-tools .login-env a {
    padding: 4px 10px;
    border-color: rgba(178, 205, 226, .9);
    box-shadow: none;
    background: #f5f9fc;
    font-size: .84rem;
}
.login-notice-tools .login-env a:hover {
    border-color: var(--login-accent);
    background: #fff;
    box-shadow: 0 2px 6px rgba(28, 68, 96, .12);
}
.login-notice ul { margin: 0; padding: 0; list-style: none; color: #2f5670; font-size: .9rem; line-height: 1.75; }
.login-notice li { position: relative; padding: 0 0 0 16px; }
.login-notice li + li { margin-top: 6px; }
.login-notice li::before {
    position: absolute;
    top: .72em;
    left: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(29, 104, 153, .48);
    content: '';
}
.login-env { display: flex; flex-wrap: wrap; gap: 9px; }
.login-env a {
    padding: 5px 14px;
    border: 1px solid rgba(139, 181, 212, .8);
    border-radius: 99px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(28, 68, 96, .1), 0 4px 10px rgba(28, 68, 96, .08);
    color: #1d5177;
    font-size: .86rem;
    font-weight: 500;
    text-decoration: none;
}
.login-env a:hover {
    border-color: var(--login-accent);
    box-shadow: 0 2px 4px rgba(28, 68, 96, .12), 0 6px 14px rgba(28, 68, 96, .12);
    transform: translateY(-1px);
}
.login-env a i { margin-right: 5px; }
.login-env.login-env-inline { margin-top: 4px; }

/* ---- 右側登入卡：唯一的主視覺 ----------------------------------------------
   立體感的做法：多層陰影（貼地的窄陰影＋中距離＋遠距離大範圍）＋內緣高光，
   再加一條頂端主色收邊，卡片看起來像「浮在背景圖上的一塊實體卡」。 */
.water-login-card.login-card-v2 {
    position: relative;
    box-sizing: border-box;
    /* 寬度用 clamp，不寫死 px；上下限之間隨欄寬伸縮 */
    width: clamp(min(100%, 480px), 100%, 620px);
    padding: 0 0 18px;
    border: 1px solid rgba(132, 174, 205, .7);
    border-bottom-color: rgba(98, 143, 176, .8);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 55%, #f1f7fc 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 0 0 1px rgba(255, 255, 255, .7),
        inset 0 -3px 0 rgba(174, 200, 219, .35),      /* 卡片底緣的厚度 */
        0 1px 1px rgba(20, 56, 82, .10),              /* 貼地接觸陰影 */
        0 4px 8px rgba(20, 56, 82, .12),
        0 14px 26px rgba(20, 56, 82, .16),
        0 34px 64px rgba(20, 56, 82, .24);            /* 遠距離大範圍 */
    overflow: hidden;
}
/* 頂端 5px 主色收邊：切換機關／廠商時顏色跟著換，下緣再壓一道陰影做出厚度 */
.water-login-card.login-card-v2::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: 5px;
    background: linear-gradient(90deg, var(--login-accent), var(--login-accent-dark) 58%, rgba(29, 104, 153, .4));
    box-shadow: 0 1px 3px rgba(20, 56, 82, .28);
    content: '';
}
/* 身分別頁籤：未選的像凹進去的軌道，選中的那片浮起來接住下方表單 */
.login-card-v2 .login-id-tabs {
    background: linear-gradient(180deg, #e7eef5, #eff4f8);
    box-shadow: inset 0 -1px 0 #d6e3ec, inset 0 1px 2px rgba(40, 88, 117, .08);
}
.login-card-v2 .login-id-tab.is-active {
    background: #fff;
    box-shadow: 0 -3px 8px rgba(31, 108, 158, .1);
}
/* 登入方式：整條是凹槽，選中的那顆浮起 */
.login-card-v2 .login-method-tabs { box-shadow: inset 0 1px 3px rgba(40, 88, 117, .13); }
.login-card-v2 .login-method-tab.is-active {
    box-shadow: 0 1px 2px rgba(40, 88, 117, .2), 0 3px 8px rgba(40, 88, 117, .12);
}
/* 輸入框：內凹 */
.login-card-v2 .login-panel input,
.login-card-v2 .login-panel select {
    box-shadow: inset 0 1px 2px rgba(35, 74, 100, .08);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.login-card-v2 .login-panel input:focus,
.login-card-v2 .login-panel select:focus {
    box-shadow: 0 0 0 3px rgba(54, 139, 189, .16), inset 0 1px 2px rgba(35, 74, 100, .06);
}
.login-card-v2 .login-captcha-image {
    box-shadow: inset 0 1px 2px rgba(35, 74, 100, .1), inset 0 -1px 0 rgba(255, 255, 255, .8);
    /* 驗證碼字本身：深色、加粗、間距收一點，四個字才不會擠到邊 */
    color: #14293d;
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-indent: .22em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}
/* 登入鈕：凸起，按下去會下沉 */
.login-card-v2 .water-login-button {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .3),
        0 2px 4px rgba(24, 87, 143, .24),
        0 7px 16px rgba(24, 87, 143, .3);
    transition: transform .12s ease, box-shadow .12s ease;
}
.login-card-v2 .water-login-button:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .32),
        0 3px 6px rgba(24, 87, 143, .26),
        0 10px 22px rgba(24, 87, 143, .34);
}
.login-card-v2 .water-login-button:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(12, 52, 88, .3), 0 1px 2px rgba(24, 87, 143, .2);
}
/* 管理者啟用：次要層級，只給一點點浮起感 */
.login-card-v2 .login-apply-button {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(78, 116, 36, .16);
    transition: transform .12s ease, box-shadow .12s ease;
}
.login-card-v2 .login-apply-button:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 10px rgba(78, 116, 36, .22);
}
.water-login-card.login-card-v2 .login-card-title {
    margin: 0;
    padding: 16px 24px 10px;
    background: none;
    color: #174c76;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.4;
    text-align: left;
}
.login-id-tabs { display: flex; background: #eef3f8; }
.login-id-tab {
    flex: 1;
    padding: 13px 0;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #5a6a7a;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.login-id-tab:hover { background: rgba(255, 255, 255, .6); color: #345b74; }
.login-id-tab.is-active {
    background: #fff;
    border-bottom-color: var(--login-accent);
    color: var(--login-accent);
}
/* 第二層：登入方式 selector——視覺重量明顯低於身分別頁籤（無外框卡片感） */
.login-method-tabs {
    display: flex;
    gap: 4px;
    margin: 16px 24px 0;
    padding: 4px;
    border-radius: 8px;
    background: #eff4f8;
}
.login-method-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #5a7086;
    font: inherit;
    font-size: .86rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.login-method-tab i { font-size: .92rem; }
.login-method-tab:hover { background: rgba(255, 255, 255, .7); color: #345b74; }
.login-method-tab.is-active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(40, 88, 117, .16);
    color: var(--login-accent);
    font-weight: 700;
}
/* 表單間距層級：label→input 近、helper 貼著 input、不同 field 之間才拉開 */
.login-panel { display: flex; flex-direction: column; gap: 18px; padding: 18px 24px 4px; }
.login-panel[hidden] { display: none !important; }
.login-field { display: block; color: #345b74; font-size: .9rem; font-weight: 600; text-align: left; }
.login-star { color: #c8322b; }
.login-card-v2 .login-panel input,
.login-card-v2 .login-panel select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: calc(44px * var(--fs-scale));
    margin: 4px 0 0;
    padding: 0 12px;
    border: 1px solid #bfd4e3;
    border-radius: 8px;
    background: #fff;
    color: #254760;
    font: inherit;
    font-weight: 400;
}
.login-card-v2 .login-panel input:focus,
.login-card-v2 .login-panel select:focus {
    outline: 0;
    border-color: var(--login-accent);
    box-shadow: 0 0 0 3px rgba(54, 139, 189, .14);
}
/* helper text：緊貼欄位、行高收斂，顏色取到 AA 4.5:1 以上 */
.login-field-tip { display: block; margin: 3px 0 0; color: #5a7086; font-size: .84rem; font-weight: 400; line-height: 1.5; }
.login-field-note { margin: 2px 0 0; color: #c8322b; font-size: .84rem; font-weight: 400; line-height: 1.5; }

/* 帳號＋延伸碼 */
.login-account-row { display: flex; align-items: flex-end; gap: 8px; }
.login-account-main { flex: 1; min-width: 0; color: inherit; font-size: inherit; font-weight: inherit; }
.login-account-ext { flex: none; width: calc(92px * var(--fs-scale)); color: inherit; font-size: inherit; font-weight: inherit; }
.login-account-dash { padding-bottom: 12px; color: #5a6a7a; font-weight: 700; }

/* 密碼顯示切換 */
.login-password-row { position: relative; display: block; }
.login-password-row input { padding-right: 44px !important; }
.login-password-eye {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: calc(36px * var(--fs-scale));
    height: calc(36px * var(--fs-scale));
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #5a6a7a;
    cursor: pointer;
}
.login-password-eye:hover { background: #eef5fb; }

/* 驗證碼 */
.login-captcha-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.login-captcha-row input { margin: 0 !important; flex: 1 1 calc(120px * var(--fs-scale)); min-width: 0; }
.login-captcha-image {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(104px * var(--fs-scale));
    height: calc(44px * var(--fs-scale));
    border: 1px solid #c6d7e4;
    border-radius: 8px;
    /* 2026/09/17：原本的藍字＋斜紋底太淡，底紋放到最淡、字改成近黑的深藍 */
    background: repeating-linear-gradient(-45deg, #f6f9fc, #f6f9fc 7px, #eef3f8 7px, #eef3f8 14px);
    color: #14293d;
    font-family: Georgia, serif;
    font-size: 1.12rem;
    font-style: italic;
    font-weight: 700;
    letter-spacing: .3em;
    user-select: none;
}
.login-captcha-button {
    flex: none;
    width: calc(40px * var(--fs-scale));
    height: calc(44px * var(--fs-scale));
    border: 1px solid #bfd4e3;
    border-radius: 8px;
    background: #fff;
    color: var(--login-accent);
    cursor: pointer;
}
.login-captcha-button:hover { background: #eef5fb; }

/* 按鈕 */
.login-card-v2 .water-login-button,
.login-inline-button {
    width: 100%;
    min-height: calc(46px * var(--fs-scale));
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--login-accent), var(--login-accent-dark));
    box-shadow: 0 8px 16px rgba(31, 108, 158, .22);
    color: #fff;
    font: inherit;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.login-inline-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    padding: 0 26px;
}
/* 用 <a> 當主要按鈕時，要蓋掉 .water-login-card a 的連結色，否則會變成深藍連結字 */
.water-login-card a.water-login-button,
.water-login-card a.login-inline-button,
.water-login a.login-inline-button,
.water-login a.water-login-button { color: #fff; }
/* CTA 層級：登入＝唯一 Primary；忘記帳密＝文字連結；啟用＝輕量 secondary */
.login-submit-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.login-submit-area .water-login-button { width: 100%; }
.login-text-link {
    color: #2b6491;
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
}
.water-login-card a.login-text-link,
.water-login a.login-text-link { color: #2b6491; font-weight: 500; }
.login-text-link:hover { text-decoration: underline; }
.login-button-row { display: flex; gap: 10px; }
.login-button-row .water-login-button { flex: 1; }
.login-ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(46px * var(--fs-scale));
    padding: 0 20px;
    border: 1px solid #cfdeea;
    border-radius: 8px;
    background: #eef2f6;
    color: #345b74;
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
/* 用 <a> 當次要按鈕時，要蓋掉 .water-login-card a 的連結色 */
.water-login-card a.login-ghost-button,
.water-login a.login-ghost-button { color: #345b74; font-weight: 500; }
.login-ghost-button:hover { background: #e3eaf1; }
.login-admin-activate { margin: 14px 24px 0; padding-top: 14px; border-top: 1px solid #e3ecf3; }
/* 降低視覺重量：改成淡綠底＋綠字的次要按鈕，不再與「登入」同級 */
.login-apply-button,
.water-login-card .login-apply-button,
.water-login-card a.login-apply-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: calc(38px * var(--fs-scale));
    border: 1px solid #bcd39b;
    border-radius: 8px;
    background: #f2f8ea;
    box-shadow: none;
    color: #3f6b16;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
}
.login-apply-button:hover,
.water-login-card a.login-apply-button:hover {
    border-color: #9dbd76;
    background: #e9f3dc;
    color: #3f6b16;
}
.login-admin-activate .login-field-tip { text-align: center; }

/* 憑證：讀卡機狀態 */
.login-device-status {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid #cfdeea;
    border-radius: 8px;
    background: #f2f7fb;
    color: #40607a;
    font-size: .86rem;
}
.login-device-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.login-device-dot.is-ok { background: #1e7a3c; }
.login-device-dot.is-wait { background: #b0620e; }
.login-device-status button {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--login-accent);
    font: inherit;
    font-size: .82rem;
    text-decoration: underline;
    cursor: pointer;
}

/* 行動憑證 QR */
.login-qr-zone { text-align: center; }
.login-qr-zone[hidden] { display: none !important; }
.login-qr {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 2px;
    width: calc(170px * var(--fs-scale));
    height: calc(170px * var(--fs-scale));
    max-width: 100%;
    margin: 4px auto 8px;
    padding: 10px;
    border: 1px solid #cfdeea;
    border-radius: 10px;
    background: #fff;
}
.login-qr i { background: #243547; border-radius: 1px; }
.login-qr i.is-blank { background: transparent; }
.login-qr-countdown { margin: 0; color: #5a6a7a; font-size: .85rem; }
.login-qr-countdown b { color: #c8322b; }
.login-qr-countdown .login-captcha-button {
    width: calc(32px * var(--fs-scale));
    height: calc(32px * var(--fs-scale));
    margin-left: 6px;
    vertical-align: middle;
}
.login-mobile-steps {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: login-step;
}
.login-mobile-steps li {
    flex: 1;
    padding: 9px 6px;
    border-radius: 8px;
    background: #f2f7fb;
    color: #40607a;
    font-size: .84rem;
    line-height: 1.5;
    text-align: center;
}
.login-mobile-steps li::before {
    counter-increment: login-step;
    content: counter(login-step);
    display: block;
    margin: 0 auto 3px;
    width: calc(22px * var(--fs-scale));
    height: calc(22px * var(--fs-scale));
    border-radius: 50%;
    background: var(--login-accent);
    color: #fff;
    font-weight: 700;
    line-height: calc(22px * var(--fs-scale));
}

/* ---- 管理者首次啟用（採購網驗證） ---- */
.login-verify-wrap { width: 100%; }
.login-steps {
    display: flex;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}
.login-steps li {
    position: relative;
    flex: 1;
    padding-top: 36px;
    color: #5a6a7a;
    font-size: .88rem;
    text-align: center;
}
.login-steps .login-step-no {
    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(28px * var(--fs-scale));
    height: calc(28px * var(--fs-scale));
    border-radius: 50%;
    background: #cbd7e1;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    transform: translateX(-50%);
}
.login-steps li::after {
    position: absolute;
    top: 13px;
    left: calc(50% + 18px);
    width: calc(100% - 36px);
    height: 2px;
    background: #cbd7e1;
    content: '';
}
.login-steps li:last-child::after { display: none; }
.login-steps li.is-active { color: var(--login-accent); font-weight: 700; }
.login-steps li.is-active .login-step-no { background: var(--login-accent); }
.login-steps li.is-done .login-step-no { background: #1e7a3c; font-size: 0; }
.login-steps li.is-done .login-step-no::before { content: '✓'; font-size: .92rem; }
.login-verify-card {
    position: static;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 26px 30px 24px;
    transform: none;
    border: 1px solid rgba(151, 191, 219, .72);
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 48px rgba(47, 91, 119, .18);
    text-align: left;
}
.login-verify-card[hidden] { display: none !important; }
.login-verify-card h1 { margin: 0 0 12px; color: #174c76; font-size: 1.22rem; letter-spacing: .04em; }
.login-verify-card p { margin: 0 0 12px; color: #40607a; font-size: .92rem; line-height: 1.8; }
.login-verify-list { margin: 0 0 18px 22px; color: #40607a; font-size: .92rem; line-height: 1.9; }
.login-verify-result {
    margin: 0 0 18px;
    padding: 14px 18px;
    border: 1px solid #cfe5d6;
    border-radius: 10px;
    background: #f2f8f4;
}
.login-verify-result p { margin: 0 0 8px; color: #1e7a3c; font-weight: 600; }
.login-verify-result dl { margin: 0; display: grid; gap: 4px; }
.login-verify-result dl > div { display: flex; gap: 10px; font-size: .92rem; }
.login-verify-result dt { flex: none; width: calc(140px * var(--fs-scale)); color: #5a6a7a; }
.login-verify-result dd { margin: 0; color: #254760; }
.login-verify-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.login-verify-card .login-field input,
.login-verify-card .login-field select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: calc(44px * var(--fs-scale));
    margin: 6px 0 0;
    padding: 0 12px;
    border: 1px solid #bfd4e3;
    border-radius: 8px;
    background: #fff;
    color: #254760;
    font: inherit;
    font-weight: 400;
}
.login-verify-card .login-field input:focus,
.login-verify-card .login-field select:focus {
    outline: 0;
    border-color: var(--login-accent);
    box-shadow: 0 0 0 3px rgba(54, 139, 189, .14);
}
/* 步驟 2：左「採購網帶回資料」／右「管理者設定＋個資同意」，一頁看完不用往下捲 */
.login-verify-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.login-verify-head h1 { margin: 0; }
.login-verify-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #cfe5d6;
    border-radius: 999px;
    background: #eef7f1;
    color: #1a6a35;
    font-size: var(--fs-xs);
    font-weight: 600;
}
/* 上：採購網帶回的單位資料（橫向資訊條）；下：管理者設定表單 */
.login-verify-cols { display: block; }
.login-verify-step2 .login-verify-result { margin: 0 0 18px; padding: 13px 18px; }
.login-verify-step2 .login-verify-result p {
    margin: 0 0 10px;
    padding-bottom: 9px;
    border-bottom: 1px dashed #cfe5d6;
    font-size: var(--fs-sm);
    letter-spacing: .04em;
}
.login-verify-step2 .login-verify-result dl {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px 18px;
}
.login-verify-step2 .login-verify-result dl > div { display: block; }
.login-verify-step2 .login-verify-result dt {
    width: auto;
    margin-bottom: 3px;
    color: #5f7382;
    font-size: var(--fs-xs);
}
.login-verify-step2 .login-verify-result dd {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.5;
}
.login-verify-step2 .login-verify-grid { gap: 12px 14px; margin-bottom: 14px; }
.login-verify-step2 .login-field input { height: calc(42px * var(--fs-scale)); margin-top: 5px; }
.login-verify-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.login-verify-actions.is-center { justify-content: center; }
.login-verify-done { text-align: center; }
.login-verify-done .login-done-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(64px * var(--fs-scale));
    height: calc(64px * var(--fs-scale));
    margin: 6px auto 14px;
    border-radius: 50%;
    background: #f0f7f2;
    color: #1e7a3c;
    font-size: 1.8rem;
}

/* ---- 忘記帳號／忘記密碼（2026/09/15） ---- */
.login-recover-title {
    margin: 0 0 14px;
    color: #174c76;
    font-size: 1.44rem;
    letter-spacing: .06em;
    text-align: center;
}
.login-recover-tabs {
    display: flex;
    gap: 8px;
    margin: 0 auto 16px;
    padding: 5px;
    border: 1px solid rgba(151, 191, 219, .6);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
}
.login-recover-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: calc(40px * var(--fs-scale));
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #46688a;
    font: inherit;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
}
.login-recover-tab:hover { background: #eef4f9; }
.login-recover-tab.is-active {
    background: linear-gradient(135deg, var(--login-accent), var(--login-accent-dark));
    box-shadow: 0 4px 10px rgba(31, 108, 158, .22);
    color: #fff;
}
.login-verify-card h2 {
    margin: 0 0 10px;
    color: #174c76;
    font-size: 1.12rem;
    letter-spacing: .04em;
}
.login-recover-lead { margin: 0 0 16px; color: #40607a; font-size: .92rem; line-height: 1.85; }
.login-verify-grid .login-field.is-wide { grid-column: 1 / -1; }
.login-recover-result {
    margin: 4px 0 16px;
    padding: 13px 16px;
    border: 1px solid #cfe5d6;
    border-radius: 10px;
    background: #f2f8f4;
}
.login-recover-result[hidden] { display: none !important; }
.login-recover-result p { margin: 0; color: #1a6a35; font-size: .92rem; line-height: 1.8; }
.login-recover-result .login-recover-demo { margin-top: 6px; color: #40607a; font-size: .86rem; }
.login-code-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 6px;
}
.login-code-row .login-field { flex: 1; min-width: 0; }
.login-code-row .login-ghost-button { flex: none; }
.login-pw-rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(160px * var(--fs-scale)), 1fr));
    gap: 6px 14px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid #dbe6ef;
    border-radius: 10px;
    background: #f7fafc;
    list-style: none;
    color: #5a7086;
    font-size: .86rem;
}
.login-pw-rules li { display: flex; align-items: center; gap: 7px; }
.login-pw-rules li::before {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(18px * var(--fs-scale));
    height: calc(18px * var(--fs-scale));
    border: 1px solid #c3d3df;
    border-radius: 50%;
    background: #fff;
    color: transparent;
    content: '✓';
}
.login-pw-rules li.is-ok { color: #1a6a35; font-weight: 600; }
.login-pw-rules li.is-ok::before { border-color: #1a6a35; background: #1a6a35; color: #fff; }

/* 提示訊息（toast）：原本沒設 z-index，會被 z-index:1 的整條頁尾蓋住。
   一律浮到最上層，登入系列頁再往上挪開頁尾的高度。 */
.toast { z-index: 2000; }
.water-login .toast { bottom: 76px; }

/* ── 大卡裡面的左右欄：拿掉各自的白框，只留內容 ─────────────────────────── */
/* 右欄：原本自己是一張立體卡，在大卡裡改成透明無框，只靠左邊一條分隔線 */
.login-shell .water-login-card.login-card-v2 {
    /* 舊版在 ≤600px 有 .water-login-card { top:70px; right:5% } 這種絕對定位殘留，
       配合 position:relative 會把整個登入區往下、往左推——這裡一律歸零 */
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 20px 32px 22px;
    border: 0;
    border-left: 1px solid #dbe6ef;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
.login-shell .water-login-card.login-card-v2::before { display: none; }
/* 登入表單本身不要撐滿整個右欄（太寬），寬度收到 500px 並在欄內置中 */
.login-shell .login-card-v2 > .login-id-tabs,
.login-shell .login-card-v2 > .login-method-tabs,
.login-shell .login-card-v2 > .login-panel,
.login-shell .login-card-v2 > .login-admin-activate {
    max-width: calc(500px * var(--fs-scale));
    margin-left: auto;
    margin-right: auto;
}
/* 原本卡片內距靠各區塊自己的左右 24px，現在改由欄位 padding 統一提供 */
.login-shell .login-id-tabs {
    border: 1px solid #d6e3ec;
    border-radius: 8px;
    overflow: hidden;
}
.login-shell .login-id-tab { border-bottom-width: 3px; }
.login-shell .login-method-tabs { margin: 12px 0 0; }
.login-shell .login-panel { gap: 14px; padding: 16px 0 2px; }
.login-shell .login-admin-activate { margin: 12px 0 0; padding-top: 12px; }
/* 左欄：說明文字直接排在白底上，不再需要描邊；三段資訊區塊也不再是卡片 */
.login-shell .login-intro-panel { align-self: start; }
.login-shell .login-intro-lead {
    margin: 0 0 6px;
    color: #2c4f68;
    font-weight: 400;
    text-shadow: none;
}
.login-shell .login-notice-group {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.login-shell .login-notice-part { padding: 12px 0; }
.login-shell .login-notice-part:last-child { padding-bottom: 0; }

/* ---- 響應式斷點（2026/09/15 重構，2026/09/21 依 demo HEAD 21cdc8a 補上 .login-shell
   版本——demo 自己在 09/17～09/18 把這整段改成配合 .login-shell 的單欄版面，這裡整段
   換成 demo 現在的版本，不是逐條疊加，見 docs/modules/login.md）-----------------------
   全部用 grid / max-width / clamp / minmax 處理，沒有任何 zoom hack 或 scale()。
   瀏覽器縮放本質上只是改變可用的 CSS 寬高，所以照寬度分三段、再用一段密度調整
   處理矮視窗（1366×768、1280×630…），100% / 125% / 150% 走的是同一套規則。 */

/* ① 1100–1399：compact desktop。大卡縮到 1120、欄內距收小、左側文字降一階 */
@media (max-width: 1399px) {
    .login-layout.login-layout-wide { width: min(980px, 100%); }
    .login-shell-title { padding: 22px 20px 14px; font-size: 1.44rem; }
    .login-shell-body > .login-intro-panel,
    .login-shell .water-login-card.login-card-v2 { padding: 22px 26px 26px; }
    .login-intro-lead { font-size: .92rem; line-height: 1.75; }
    .login-shell .login-notice-part { padding: 13px 0; }
    .login-notice ul { font-size: .88rem; line-height: 1.7; }
    .login-env { gap: 7px; }
    .login-env a { padding: 4px 12px; }
}

/* ② <1100：Login Focus Mode——大卡內改上下排列，登入表單在上、說明在下 */
@media (max-width: 1099px) {
    /* 舊版登入頁在 ≤900／≤700 有一組 .login-layout 的手機規則（display:block、兩欄 grid、
       padding 92px 0…），這裡用更高特異性把版面固定回單欄，避免被那些舊規則干擾 */
    .water-login .login-layout.login-layout-wide {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        box-sizing: border-box;
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
        /* 左右一定要留白，卡片不能貼齊螢幕邊；舊規則有 padding:0 的寫法，這裡用 !important 壓過 */
        padding: 18px 16px 24px !important;
    }
    .login-shell {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
    .login-shell-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    .login-shell-body > * {
        grid-column: 1;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .login-shell .water-login-card.login-card-v2 {
        order: 1;
        border-left: 0;
        border-bottom: 1px solid #dbe6ef;
    }
    .login-shell-body > .login-intro-panel { order: 2; }
    .login-intro-lead { margin-bottom: 4px; overflow-wrap: anywhere; }
    .login-notice ul { overflow-wrap: anywhere; }
    .login-layout.login-layout-verify,
    .login-layout.login-layout-verify.is-step2 { width: 100%; }
    .login-verify-grid { grid-template-columns: minmax(0, 1fr); }
    .login-verify-step2 .login-verify-result dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .login-shell-title { padding: 18px 16px 12px; font-size: 1.3rem; }
    .login-shell-body > .login-intro-panel,
    .login-shell .water-login-card.login-card-v2 { padding: 18px 18px 22px; }
    .login-shell .login-method-tabs { margin: 12px 0 0; }
    .login-shell .login-panel { gap: 15px; padding: 16px 0 4px; }
    .login-shell .login-admin-activate { margin: 12px 0 0; }
    .login-verify-card { padding: 20px 18px; }
    .login-steps li { padding-top: 32px; font-size: .84rem; }
    .login-verify-head { gap: 8px; }
    .login-verify-actions { flex-direction: column-reverse; }
    .login-verify-actions .login-ghost-button,
    .login-verify-actions .login-inline-button { width: 100%; }
}
/* ≤700 時舊規則會把 logo 改成絕對定位貼在左上角，版面上方要留出 logo 的高度；
   左右仍保留 14px，卡片不會貼齊螢幕邊 */
@media (max-width: 700px) {
    .water-login .login-layout.login-layout-wide { padding: 80px 14px 22px !important; }
    .login-shell-body > .login-intro-panel,
    .login-shell .water-login-card.login-card-v2 { padding: 18px 16px 22px; }
}
@media (max-width: 560px) {
    .login-method-tab { gap: 4px; padding: 7px 2px; font-size: .82rem; }
    .login-button-row { flex-direction: column; }
    .login-mobile-steps { flex-direction: column; }
    .login-env a { flex: 1 1 100%; text-align: center; }
    .login-verify-step2 .login-verify-result dl { grid-template-columns: minmax(0, 1fr); }
    .login-captcha-row { flex-wrap: wrap; }
    .login-captcha-row input { flex: 1 1 100%; order: 3; }
}
/* ── 矮視窗密度調整（1366×768、1280×630…）：只收外框留白與欄位密度，
      不動字級層級、不做整體縮放；桌機一般高度完全不受影響。 ── */
@media (max-height: 820px) {
    .login-brand { margin-top: 12px; }
    .water-login-logo { width: 240px; }
    .login-layout,
    .water-login .login-layout.login-layout-wide { padding-top: 10px; padding-bottom: 14px; }
    .login-shell-title { padding: 14px 20px 8px; font-size: 1.36rem; }
    .login-shell-title::after { margin-top: 7px; }
    .login-shell-body > .login-intro-panel,
    .login-shell .water-login-card.login-card-v2 { padding: 16px 26px 18px; }
    .login-shell .login-notice-part { padding: 10px 0; }
    .login-id-tab { padding: 10px 0; }
    .login-shell .login-method-tabs { margin-top: 10px; }
    .login-shell .login-panel { gap: 12px; padding: 14px 0 2px; }
    .login-card-v2 .login-panel input,
    .login-card-v2 .login-panel select { height: calc(40px * var(--fs-scale)); }
    .login-captcha-image,
    .login-captcha-button { height: calc(40px * var(--fs-scale)); }
    .login-card-v2 .water-login-button { min-height: calc(42px * var(--fs-scale)); }
    .login-submit-area { gap: 8px; }
    .login-shell .login-admin-activate { margin-top: 10px; padding-top: 10px; }
    .login-mobile-steps { display: none; }
    .login-qr { width: calc(140px * var(--fs-scale)); height: calc(140px * var(--fs-scale)); }
    .login-intro-title { margin-bottom: 8px; padding-bottom: 9px; }
    .login-intro-lead { margin-bottom: 12px; line-height: 1.7; }
    .login-notice { margin-bottom: 10px; padding: 12px 16px; }
    .login-notice h2 { margin-bottom: 7px; }
    .login-footer { padding: 8px 20px 9px; }
    .water-login .toast { bottom: 62px; }

    .login-layout.login-layout-verify { padding-top: 14px; padding-bottom: 28px; }
    .login-steps { margin-bottom: 14px; }
    .login-steps li { padding-top: 30px; }
    .login-steps .login-step-no { width: calc(24px * var(--fs-scale)); height: calc(24px * var(--fs-scale)); }
    .login-verify-card { padding: 18px 24px 18px; }
    .login-verify-card .login-field input,
    .login-verify-card .login-field select { height: calc(40px * var(--fs-scale)); margin-top: 4px; }
    .login-recover-lead { margin-bottom: 12px; line-height: 1.7; }
    .login-pw-rules { margin-bottom: 12px; padding: 9px 12px; }
    .login-verify-head { margin-bottom: 10px; }
    .login-verify-step2 .login-verify-result { margin-bottom: 12px; padding: 10px 14px; }
    .login-verify-step2 .login-verify-result p { margin-bottom: 7px; padding-bottom: 6px; }
    .login-verify-step2 .login-verify-grid { gap: 8px 14px; margin-bottom: 10px; }
    .login-verify-step2 .login-field input { height: calc(38px * var(--fs-scale)); margin-top: 3px; }
    .privacy-consent-summary { padding: calc(9px * var(--fs-scale)) 14px; }
    .privacy-consent-inline .privacy-consent-check { margin-top: 8px; margin-bottom: 8px; }
    .privacy-consent-inline .privacy-consent-scroll { max-height: calc(150px * var(--fs-scale)); }
}
/* 極矮視窗（1280×630 這類）：再收一階密度，仍然只動留白與欄位高度 */
@media (max-height: 700px) {
    .login-brand { margin-top: 6px; }
    .water-login-logo { width: 196px; }
    .login-layout,
    .water-login .login-layout.login-layout-wide { padding-top: 4px; padding-bottom: 8px; }
    .login-shell-title { padding: 10px 20px 6px; font-size: 1.18rem; }
    .login-shell-title::after { height: 3px; margin-top: 5px; }
    .login-shell-body > .login-intro-panel,
    .login-shell .water-login-card.login-card-v2 { padding: 12px 24px 14px; }
    .login-shell .login-notice-part { padding: 8px 0; }
    .login-id-tab { padding: 8px 0; }
    .login-shell .login-method-tabs { margin-top: 8px; }
    .login-method-tab { padding: 6px 4px; }
    .login-shell .login-panel { gap: 9px; padding: 10px 0 2px; }
    .login-card-v2 .login-panel input,
    .login-card-v2 .login-panel select { height: calc(36px * var(--fs-scale)); margin-top: 3px; }
    .login-captcha-image,
    .login-captcha-button { height: calc(36px * var(--fs-scale)); }
    .login-card-v2 .water-login-button { min-height: calc(38px * var(--fs-scale)); }
    .login-submit-area { gap: 6px; }
    .login-apply-button { min-height: calc(36px * var(--fs-scale)); }
    .login-shell .login-admin-activate { margin-top: 6px; padding-top: 7px; }
    .login-footer { padding: 5px 20px 6px; font-size: .84rem; }
    .login-device-status { padding: 7px 11px; }
    .login-intro-title { font-size: 1.44rem; }
    .login-intro-lead { margin-bottom: 10px; }
    .login-notice { margin-bottom: 8px; padding: 10px 14px; }
    .login-notice ul { line-height: 1.6; }
    .login-notice li + li { margin-top: 4px; }
    .login-env a { padding: 4px 11px; }
    .login-footer { padding: 6px 20px 7px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   案件資訊（2026/09/14 合併改版）：版面依使用者提供的「工程標案基本資料填報」，
   左側區塊導覽＋必填完成度，右側四個編號區塊；顏色沿用本站既有色系
   （01 藍＝brand-accent、02 紫＝契約色、03 綠＝brand、04 深黃＝標單色）。
   ══════════════════════════════════════════════════════════════════════════ */
.case-report {
    --case-c1: #1d568c;
    --case-c2: #5d3f92;
    --case-c3: #1f6d43;
    --case-c4: #8a6a12;
    display: grid;
    grid-template-columns: calc(215px * var(--fs-scale)) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* ---- 左側導覽 ---- */
.case-report-nav {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.case-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text-2);
    font-size: var(--fs-sm);
    text-decoration: none;
}
.case-nav-link:hover { border-color: var(--brand-accent); background: #f6fafd; }
.case-nav-no {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(26px * var(--fs-scale));
    height: calc(26px * var(--fs-scale));
    border-radius: 6px;
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
}
.case-nav-link[data-case-nav="1"] .case-nav-no { background: var(--case-c1); }
.case-nav-link[data-case-nav="2"] .case-nav-no { background: var(--case-c2); }
.case-nav-link[data-case-nav="3"] .case-nav-no { background: var(--case-c3); }
.case-nav-link[data-case-nav="4"] .case-nav-no { background: var(--case-c4); }
.case-nav-done { margin-left: auto; color: var(--text-4); font-size: var(--fs-xs); }
.case-nav-done.is-full { color: var(--brand); font-weight: 700; }
.case-progress {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.case-progress-title { margin-bottom: 6px; color: var(--text-4); font-size: var(--fs-xs); }
.case-progress-title b { color: var(--brand); font-size: var(--fs-base); }
.case-progress-bar {
    height: 8px;
    border-radius: 99px;
    background: #eef2f6;
    overflow: hidden;
}
.case-progress-bar i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 99px;
    background: var(--brand-accent);
    transition: width .3s;
}

/* ---- 右側區塊 ---- */
.case-report-main { min-width: 0; }
.case-sec {
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    scroll-margin-top: 16px;
}
.case-sec-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    color: #fff;
}
.case-sec-head h2 { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: .04em; }
.case-sec-no { font-size: var(--fs-base); font-weight: 700; opacity: .85; }
.case-sec-hint { margin-left: auto; font-size: var(--fs-xs); opacity: .9; }
.case-sec[data-case-sec="1"] .case-sec-head { background: var(--case-c1); }
.case-sec[data-case-sec="2"] .case-sec-head { background: var(--case-c2); }
.case-sec[data-case-sec="3"] .case-sec-head { background: var(--case-c3); }
.case-sec[data-case-sec="4"] .case-sec-head { background: var(--case-c4); }
.case-sec-body { padding: 6px 20px 14px; }

/* ---- 欄位列：標籤在左、控制項在右 ---- */
.case-row {
    display: grid;
    grid-template-columns: calc(180px * var(--fs-scale)) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 13px 0;
    border-bottom: 1px dashed var(--line);
}
.case-row:last-child { border-bottom: 0; }
.case-row-label {
    padding-top: 8px;
    color: var(--text-2);
    font-size: var(--fs-base);
    font-weight: 600;
}
.case-star { margin-left: 2px; color: #c8322b; }
.case-row-sub {
    display: block;
    color: var(--text-4);
    font-size: var(--fs-xs);
    font-weight: 400;
}
.case-row-ctrl {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
/* 主辦單位那組（代碼＋名稱＋瀏覽鈕）沿用既有的 .case-org-row 樣式，這裡只給寬度 */
.case-row-ctrl .case-org-row { flex: 1 1 100%; max-width: calc(620px * var(--fs-scale)); }
.case-row-ctrl .case-subclass-grid { flex: 1 1 100%; }
.case-row-ctrl input:not(.org-combo-input):not([type="radio"]):not([type="checkbox"]),
.case-row-ctrl select {
    box-sizing: border-box;
    min-height: calc(38px * var(--fs-scale));
    padding: 7px 10px;
    border: 1px solid #bfd0e1;
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font: inherit;
}
.case-row-ctrl input:focus,
.case-row-ctrl select:focus,
.case-row-ctrl textarea:focus {
    border-color: var(--brand-accent);
    outline: 2px solid rgba(47, 126, 196, .16);
}
.case-row-ctrl input[readonly] { background: #f2f5f8; color: var(--text-3); cursor: not-allowed; }
.case-row-ctrl textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: calc(96px * var(--fs-scale));
    padding: 8px 10px;
    border: 1px solid #bfd0e1;
    border-radius: 6px;
    font: inherit;
    resize: vertical;
}
.case-report .cw-s { width: calc(120px * var(--fs-scale)); }
.case-report .cw-m { width: calc(210px * var(--fs-scale)); }
.case-report .cw-l { width: calc(340px * var(--fs-scale)); }
.case-report .cw-full { width: 100%; }
.case-report .money-input { text-align: right; font-variant-numeric: tabular-nums; }
.case-unit { color: var(--text-4); font-size: var(--fs-sm); }
.case-help {
    flex-basis: 100%;
    color: var(--text-4);
    font-size: var(--fs-xs);
}
.case-help.is-ok { color: #1e7a3c; }
.case-help.is-warn { color: #b0620e; }
.case-row.is-invalid input,
.case-row.is-invalid select,
.case-row.is-invalid textarea { border-color: #c8322b; }
.case-duration-days { display: inline-flex; align-items: center; gap: 7px; }
.case-duration-days[hidden] { display: none !important; }
.case-report input[hidden] { display: none !important; }

/* 單選膠囊 */
.case-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font-size: var(--fs-sm);
    cursor: pointer;
}
.case-opt input { accent-color: #286fae; cursor: pointer; }
.case-opt:has(input:checked) { border-color: var(--brand-accent); background: #eef5fb; font-weight: 600; }
.case-auto-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 5px;
    background: #f2f5f8;
    color: var(--text-4);
    font-size: var(--fs-xs);
}

/* 送出前的未填清單 */
.case-check-box {
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-left: 4px solid #b0620e;
    border-radius: 8px;
    background: #fff8ef;
    font-size: var(--fs-sm);
}
.case-check-box[hidden] { display: none !important; }
.case-check-box ul { margin: 6px 0 0 20px; }
.case-check-box li { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1000px) {
    .case-report { grid-template-columns: minmax(0, 1fr); }
    .case-report-nav { position: static; flex-direction: row; flex-wrap: wrap; }
    .case-nav-link { flex: 1 1 auto; }
    .case-progress { flex: 1 1 100%; }
}
@media (max-width: 700px) {
    .case-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .case-row-label { padding-top: 0; }
    .case-report .cw-m, .case-report .cw-l { width: 100%; }
}

/* ── 碳排預算書下載（2026/09/11）──
   上半：兩種下載方式（直接下載／客製化）；
   下半：客製化才展開，四張表各自列出可加選的欄位（前面的固定欄位只標示不給勾）。
   注意 .carbon-export-tables 用 hidden 收合，所以 display 要寫在 :not([hidden]) 上，
   否則作者的 display 會蓋掉瀏覽器預設的 [hidden]{display:none}。 */
.carbon-export-card { width: min(96vw, calc(760px * var(--fs-scale))); }
.carbon-export-body {
    padding: 16px 20px 4px;
    overflow-y: auto;
}
.carbon-export-ways {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.carbon-export-way {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #d7e3ed;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}
.carbon-export-way:has(input:checked) { border-color: var(--brand-accent); background: #f2f8fd; }
.carbon-export-way input { margin-top: 3px; accent-color: #286fae; }
.carbon-export-way strong { display: block; color: var(--brand); font-size: var(--fs-base); }
.carbon-export-way small { display: block; margin-top: 2px; color: var(--text-4); font-size: var(--fs-xs); }
.carbon-export-tables:not([hidden]) {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}
.carbon-export-table {
    padding: 12px 14px;
    border: 1px solid #e2ebf2;
    border-radius: 9px;
    background: #fafcfe;
}
.carbon-export-table-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-bottom: 9px;
}
.carbon-export-table-head b { color: var(--brand); font-size: var(--fs-base); }
.carbon-export-fixed { color: var(--text-4); font-size: var(--fs-xs); }
.carbon-export-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}
@media (max-width: 700px) {
    .carbon-export-ways { grid-template-columns: minmax(0, 1fr); }
}

/* ── 專案自訂（非 PCECUI demo 內容）：myAjax 全域 loading 遮罩 ── */
#globalLoader {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}