/* Đề nghị thanh toán chi phí phát sinh: 4 vùng màu, hạng mục → dòng chi phí, chứng từ theo hạng mục (mockup bản 16). */
.pci-hidden,.pci-zone [hidden]{display:none!important}
.hrm-payment-form-content:has(.pci-zone){gap:14px}
.pci-zone{--pci-z:#2563EB;--pci-zs:#EFF6FF;border:1px solid var(--line,#DCE3EE);border-left:4px solid var(--pci-z);border-radius:12px;padding:0 14px 14px;background:var(--surface,#fff)}
.pci-zone[data-tone="violet"]{--pci-z:#7C3AED;--pci-zs:#F5F3FF}
.pci-zone[data-tone="green"]{--pci-z:#059669;--pci-zs:#ECFDF5}
.pci-zone[data-tone="amber"]{--pci-z:#D97706;--pci-zs:#FFFBEB}
.pci-zone>header{display:flex!important;align-items:center;justify-content:space-between;gap:12px;margin:0 -14px 12px;padding:10px 14px;background:var(--pci-zs);border-radius:0 11px 0 0;min-height:48px}
.pci-zone>header strong{display:flex;align-items:center;gap:10px;color:var(--pci-z)!important;font-size:.92rem!important}
.pci-zone-no{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--pci-z);color:#fff;font-size:.78rem}
.pci-zone[data-tone="blue"] .hrm-payment-form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pci-zone[data-tone="blue"] [data-field-key="approvalItemName"],.pci-zone[data-tone="blue"] [data-field-key="description"]{grid-column:1/-1}
.pci-zone[data-tone="amber"] .hrm-payment-form-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.pci-zone[data-tone="amber"] .hrm-request-field{grid-column:span 2}
.pci-zone[data-tone="amber"] [data-field-key="transferInfo"],.pci-zone[data-tone="amber"] [data-field-key="transferContent"]{grid-column:span 3}
.pci-zone .hrm-payment-form-grid.pci-money-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr)}
.pci-money-grid [data-currency-suffix]{display:none}
.pci-locked{background:#F1F5F9!important;color:#0F172A!important;font-weight:600}
.pci-add-group{min-height:36px;border-radius:999px;padding:0 16px;color:#6D28D9;border-color:#C4B5FD;background:#fff}

.pci-items{display:grid;gap:12px}
.pci-group-list{display:grid;gap:12px}
.pci-group{display:grid;gap:8px;padding:12px;border:1px solid #DDD6FE;border-radius:12px;background:#FCFBFF}
.pci-group.pci-miss{border-color:#FCA5A5;background:#FEF2F2}
.pci-group.pci-miss .pci-inv-add{border-color:#EF4444;color:#B91C1C}
.pci-group-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto 28px;align-items:center;gap:10px}
.pci-group-no{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:#7C3AED;color:#fff;font-size:.74rem;font-weight:800;white-space:nowrap}
.pci-group-name{min-height:40px;padding:6px 10px;border:1px solid var(--line,#DCE3EE);border-radius:8px;background:#fff;font:inherit;font-weight:700;font-size:.88rem;min-width:0}
.pci-group-sub{font-size:.95rem;color:#4C1D95;font-variant-numeric:tabular-nums;white-space:nowrap}
.pci-group-inv{display:grid;grid-template-columns:170px minmax(0,1fr) 260px;gap:8px}
.pci-doc-kind{min-height:38px;padding:6px 28px 6px 10px;border:1px solid var(--line,#DCE3EE);border-radius:8px;background-color:#fff;font:inherit;font-size:.8rem;font-weight:700;color:#334155;min-width:0}
.pci-inv{display:block;min-width:0}
.pci-inv-add{width:100%;min-height:38px;border-radius:8px;border:1px dashed #C4B5FD;background:#fff;color:#6D28D9;font-size:.8rem}
.pci-inv-file{display:flex;align-items:center;gap:4px;min-height:38px;padding:0 4px 0 10px;border-radius:8px;background:#ECFDF5;border:1px solid #A7F3D0;color:#047857;font-size:.78rem;font-weight:600;min-width:0}
.pci-inv-file>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.pci-inv-scanning{display:flex;align-items:center;min-height:38px;padding:0 12px;border-radius:8px;background:#F5F3FF;border:1px dashed #C4B5FD;color:#6D28D9;font-size:.8rem;font-weight:700;animation:pciPulse 1s ease-in-out infinite}
@keyframes pciPulse{50%{opacity:.55}}
.pci-group-inv .pci-pre{display:flex!important;gap:0!important;align-items:center;min-height:38px;border:1px solid var(--line,#DCE3EE);border-radius:8px;background:#fff;overflow:hidden;min-width:0}
.pci-group-inv .pci-pre i{flex:none;align-self:stretch;display:flex;align-items:center;padding:0 10px;font-style:normal;font-size:.72rem;font-weight:700;color:#64748B;background:#F8FAFC;border-right:1px solid #EEF2F7}
.pci-group-inv .pci-pre input{flex:1;width:100%;border:0!important;min-height:36px;padding:6px 10px;border-radius:0;font:inherit;font-size:.82rem;min-width:0;background:transparent}
.pci-scan-tag{display:none;flex:none;margin-right:6px;padding:2px 8px;border-radius:999px;background:#EDE9FE;color:#6D28D9;font-style:normal;font-size:.68rem;font-weight:700;white-space:nowrap}
.pci-pre.is-scanned .pci-scan-tag{display:inline-flex}
.pci-group-docs{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pci-doc-chip{display:inline-flex;align-items:center;gap:2px;max-width:420px;height:30px;padding:0 2px 0 10px;border-radius:999px;background:#F1F5F9;border:1px solid #E2E8F0;color:#334155;font-size:.74rem;font-weight:600}
.pci-doc-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pci-doc-chip em{font-style:normal;font-weight:700;color:#475569;margin-right:4px;white-space:nowrap}
.pci-doc-chip em::after{content:" ·"}
.pci-doc-x{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:#94A3B8;cursor:pointer}
.pci-add-doc-w{position:relative}
.pci-add-doc-w>summary{list-style:none;display:inline-flex;align-items:center}
.pci-add-doc-w>summary::-webkit-details-marker{display:none}
.pci-add-doc{height:30px;padding:0 12px;border:1px dashed #CBD5E1;border-radius:999px;background:#fff;color:#475569;font:inherit;font-size:.74rem;font-weight:700;cursor:pointer}
.pci-add-doc:hover{border-color:#94A3B8;background:#F8FAFC}
.pci-doc-menu{position:absolute;z-index:5;top:calc(100% + 4px);left:0;display:grid;min-width:280px;padding:5px;border:1px solid #E2E8F0;border-radius:10px;background:#fff;box-shadow:0 10px 24px rgba(15,23,42,.14)}
.pci-doc-menu button{padding:9px 10px;border:0;border-radius:7px;background:transparent;text-align:left;font:inherit;font-size:.8rem;color:#0F172A;cursor:pointer}
.pci-doc-menu button:hover{background:#F5F3FF;color:#6D28D9}
.pci-lines-head,.pci-line{display:grid;grid-template-columns:minmax(0,1fr) 180px 140px 28px;gap:8px;align-items:center}
.pci-lines-head{padding:4px 0 0;color:#64748B;font-size:.72rem;font-weight:700}
.pci-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pci-lines{display:grid;gap:6px}
.pci-line input,.pci-line select{width:100%;min-height:38px;padding:6px 10px;border:1px solid var(--line,#DCE3EE);border-radius:8px;background:#fff;font:inherit;font-size:.82rem;min-width:0}
.pci-line .pci-amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.pci-items.pci-no-project .pci-type,.pci-items.pci-no-project .pci-lines-head>span:nth-child(2){visibility:hidden}
.pci-inv-x,.pci-line-del,.pci-group-del{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:#94A3B8;font-size:1.1rem;cursor:pointer}
.pci-line-del:hover:not(:disabled),.pci-group-del:hover{background:#FEF2F2;color:#DC2626}
.pci-line-del:disabled{opacity:.3;cursor:default}
.pci-add-line{justify-self:start;height:34px;padding:0 14px;border:1px dashed #C4B5FD;border-radius:999px;background:#fff;color:#6D28D9;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.pci-add-line:hover{background:#F5F3FF}
.pci-items-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:#F5F3FF;color:#4C1D95;font-weight:700}
.pci-items-count{font-weight:500;color:#6D28D9;font-size:.78rem}
.pci-items-total{font-size:1rem;font-variant-numeric:tabular-nums}

.pci-money{display:flex;align-items:stretch;min-height:44px;border:1px solid var(--line,#DCE3EE);border-radius:10px;background:#fff;overflow:hidden}
.pci-money input{flex:1 1 auto!important;width:auto!important;min-width:0;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;text-align:right;font-variant-numeric:tabular-nums}
.pci-money .pci-cur{flex:0 0 78px!important;width:78px!important;max-width:78px!important;min-height:0!important;height:auto!important;margin:0;padding:0 26px 0 12px;border:0;border-left:1px solid #E2E8F0;border-radius:0;background-color:#F1F5F9;font:inherit;font-size:.8rem;font-weight:800;color:#0F172A;cursor:pointer}
.pci-cur-tag{flex:none;display:flex;align-items:center;padding:0 12px;border-left:1px solid #E2E8F0;background:#F8FAFC;color:#64748B;font-size:.8rem;font-weight:700;white-space:nowrap}
.pci-money-grid [data-field-key="totalAmount"] .pci-money{background:#F1F5F9}
.pci-money-grid [data-field-key="remainingAmount"] .pci-money{background:#ECFDF5;border-color:#A7F3D0}
.pci-money-grid [data-field-key="remainingAmount"] input{font-weight:800;color:#047857}
.pci-money-grid [data-field-key="remainingAmount"] .pci-cur-tag{background:#D1FAE5;color:#047857;border-color:#A7F3D0}
.pci-adv select{flex:1 1 auto!important;min-width:0!important;width:auto!important;border:0!important;border-radius:0!important;background-color:transparent!important;min-height:42px!important;padding:0 28px 0 12px!important;font:inherit;font-size:.82rem}
.pci-adv .pci-adv-amt{font-variant-numeric:tabular-nums}
[data-field-key="advancePick"].is-on .pci-money{border-color:#FCD34D}
[data-field-key="advancePick"].is-on .pci-adv-amt{background:#FEF3C7;color:#B45309}
[data-field-key="advancePick"].is-over .pci-money{border-color:#F59E0B;box-shadow:0 0 0 3px #FEF3C7}
.pci-adv-warn{margin-top:10px;padding:10px 12px;border:1px solid #FCD34D;border-left:4px solid #F59E0B;border-radius:10px;background:#FFFBEB;color:#78350F;font-size:.8rem;line-height:1.5}
.pci-adv-warn b{color:#92400E}
.pci-adv-warn[hidden]{display:none!important}

/* Chi tiết đề nghị (Tác vụ, Duyệt thanh toán) */
.pci-detail{display:grid;gap:8px}
.pci-detail h5 span{color:#6D28D9}
.pci-detail-item{display:grid;gap:6px;padding:10px 12px;border:1px solid #DDD6FE;border-left:4px solid #7C3AED;border-radius:10px;background:#FCFBFF}
.pci-detail-item header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pci-detail-item header b{padding:2px 8px;border-radius:999px;background:#7C3AED;color:#fff;font-size:.7rem}
.pci-detail-item header strong{flex:1;min-width:0}
.pci-detail-item header span{font-weight:700;color:#4C1D95;font-variant-numeric:tabular-nums}
.pci-detail-doc{display:flex;flex-wrap:wrap;gap:6px;margin:0;color:#475569;font-size:.8rem}
.pci-detail-chip{padding:1px 8px;border-radius:999px;background:#F1F5F9;border:1px solid #E2E8F0;font-size:.74rem}
.pci-detail table{width:100%;border-collapse:collapse;font-size:.82rem}
.pci-detail td{padding:4px 0;border-top:1px solid #EEF2F7}
.pci-detail td:nth-child(2){color:#64748B;padding:4px 10px}
.pci-detail footer{display:flex;justify-content:space-between;padding:8px 12px;border-radius:10px;background:#F5F3FF;color:#4C1D95;font-weight:700}

/* Thẻ "Tạm ứng / thanh toán của dự án" trong tab Sản xuất */
.production-finance-total{color:#047857;font-size:14px}
.production-finance-table{width:100%}
.production-finance-table th,.production-finance-table td{white-space:nowrap}
.production-finance-table td:nth-child(3){white-space:normal;min-width:220px}
.production-finance-table td:first-child{border-left:4px solid transparent}
.production-finance-table tr.is-draft td:first-child{border-left-color:#94A3B8}
.production-finance-table tr.is-review td:first-child{border-left-color:#3B82F6}
.production-finance-table tr.is-review td{background:#F8FBFF}
.production-finance-table tr.is-approved td:first-child{border-left-color:#10B981}
.production-finance-table tr.is-rejected td:first-child{border-left-color:#EF4444}
.production-finance-table tr[data-production-finance-request]{cursor:pointer}
.production-finance-table tr[data-production-finance-request]:hover td{background:#F8FAFC}
.production-finance-table .pci-num{text-align:right}
.production-finance-kind{display:inline-flex;height:20px;align-items:center;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700}
.production-finance-kind.is-pay{background:#EFF6FF;color:#1D4ED8}
.production-finance-kind.is-adv{background:#FEF3C7;color:#B45309}
.production-finance-status{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;background:#F1F5F9;color:#475569}
.production-finance-status.is-review{background:#EFF6FF;color:#1D4ED8}
.production-finance-status.is-approved{background:#D1FAE5;color:#047857}
.production-finance-status.is-rejected{background:#FEF2F2;color:#B91C1C}

@media (max-width:760px){
  .pci-zone[data-tone="blue"] .hrm-payment-form-grid,.pci-zone .hrm-payment-form-grid.pci-money-grid,.pci-zone[data-tone="amber"] .hrm-payment-form-grid{grid-template-columns:minmax(0,1fr)}
  .pci-zone[data-tone="amber"] .hrm-request-field,.pci-zone[data-tone="amber"] [data-field-key="transferInfo"],.pci-zone[data-tone="amber"] [data-field-key="transferContent"]{grid-column:auto}
  .pci-group-inv{grid-template-columns:minmax(0,1fr)}
  .pci-lines-head{display:none}
  .pci-line{grid-template-columns:minmax(0,1fr) 28px;padding-bottom:6px;border-bottom:1px dashed #E9E3FB}
  .pci-line .pci-line-name{grid-column:1/-1}
  .pci-line .pci-type{grid-column:1/-1}
  .pci-line .pci-amt{grid-column:1}
  .pci-zone>header{flex-wrap:wrap}
  .pci-items.pci-no-project .pci-type{display:none}
}
.ifm-payment-table .ifm-row-tag.is-project{background:#DBEAFE;color:#1D4ED8;font-weight:800}
.pci-detail-item header{padding:0;margin:0;border:0;background:none}