/* ========================================================== FINOVA ACCOUNTING SYSTEM MODULE : ACCOUNT PAYABLE Version : 2.1 Enterprise TABLE STANDARD : GLOBAL TABLE COMPONENT VISUAL STANDARD : BUSINESS PARTNER / CHART OF ACCOUNTS NOTE : - Header aligned with BP / COA - Filter aligned with BP / COA - Table visual controlled by Global Table CSS - Pagination controlled by Global Pagination CSS - AP business status behavior remains here ========================================================== */ /* ========================================================== ACCOUNT PAYABLE PAGE ========================================================== */ .account-payable-page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; } /* ========================================================== PAGE HEADER SAME AS BP / COA ========================================================== */ .account-payable-page > .finova-page-header { width: 100%; margin-bottom: 8px !important; flex-shrink: 0; box-sizing: border-box; } /* ========================================================== FILTER CARD SAME AS BP / COA ========================================================== */ .account-payable-page > .account-payable-filter-card { width: 100% !important; max-width: none !important; margin: 0 !important; flex: 0 0 auto; box-sizing: border-box; border-radius: 12px; } /* ========================================================== FILTER CARD BODY SAME AS BP / COA ========================================================== */ .account-payable-filter-card > .finova-card-body { width: 100%; padding: 8px 20px 8px 20px !important; box-sizing: border-box; } /* ========================================================== FILTER ROW ========================================================== */ .account-payable-filter-card > .finova-card-body > .row { width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box; align-items: end !important; } /* ========================================================== FILTER COLUMN ========================================================== */ .account-payable-filter-card > .finova-card-body > .row > [class*="col-"] { min-width: 0; margin: 0; box-sizing: border-box; } /* ========================================================== FILTER LABEL SAME AS BP / COA ========================================================== */ .account-payable-filter-card .form-label { display: block; margin-top: 0 !important; margin-bottom: 6px !important; color: #1F2937; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: left; } /* ========================================================== FILTER INPUT & SELECT SAME AS BP / COA ========================================================== */ .account-payable-filter-card .form-control, .account-payable-filter-card .form-select { width: 100%; height: 46px !important; min-height: 46px !important; box-sizing: border-box; } /* ========================================================== FILTER INPUT GROUP ========================================================== */ .account-payable-filter-card .input-group { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; width: 100% !important; height: 46px !important; margin: 0 !important; box-sizing: border-box; } /* ========================================================== KEYWORD INPUT ========================================================== */ .account-payable-filter-card .input-group #ap-keyword { flex: 1 1 auto !important; width: 1% !important; min-width: 0 !important; height: 46px !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* ========================================================== FIND BUTTON ========================================================== */ .account-payable-filter-card .input-group #btn-find-ap { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 80px !important; width: 80px !important; min-width: 80px !important; height: 46px !important; padding: 0 12px !important; white-space: nowrap; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* ========================================================== TABLE CARD ========================================================== */ .account-payable-table-card { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; } /* ========================================================== TABLE CARD BODY ========================================================== */ .account-payable-table-card .finova-card-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0 !important; overflow: hidden; } /* ========================================================== TABLE CONTAINER ========================================================== */ .account-payable-table-card .finova-table-container { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; overflow: hidden; } /* ========================================================== TABLE RESPONSIVE ========================================================== */ .account-payable-table-card .finova-table-container .table-responsive { display: block; flex: 1 1 auto; min-height: 0; width: 100%; overflow-x: auto; overflow-y: auto; } /* ========================================================== TABLE ========================================================== */ .account-payable-table-card .finova-table { width: 100%; margin-bottom: 0; vertical-align: middle; } /* ========================================================== TABLE HEADER ========================================================== */ .account-payable-table-card .finova-table thead th { font-weight: 700 !important; color: #111827 !important; } /* ========================================================== TABLE BODY ========================================================== */ .account-payable-table-card .finova-table tbody td { font-weight: 400 !important; color: #1F2937 !important; } /* ========================================================== TABLE NUMBER CENTER ALIGNMENT ========================================================== */ .account-payable-table-card .finova-table th:first-child, .account-payable-table-card .finova-table td:first-child { text-align: center !important; vertical-align: middle !important; } /* ========================================================== PAGINATION ========================================================== */ .account-payable-table-card .finova-table-container .finova-pagination-wrapper { flex: 0 0 auto; width: 100%; margin-top: auto; } /* ========================================================== PAGINATION LEFT SAME AS BP / COA ========================================================== */ .account-payable-table-card .finova-pagination-left { display: flex; align-items: center; gap: 8px; } /* ========================================================== PAGINATION LABEL ========================================================== */ .account-payable-table-card .finova-pagination-label { display: inline-flex; align-items: center; white-space: nowrap; } /* ========================================================== PAGINATION TOTAL ========================================================== */ .account-payable-table-card .finova-pagination-total { display: inline-flex; align-items: center; min-width: 18px; margin-left: 2px; } /* ========================================================== AP TABLE BODY ========================================================== */ #ap-table-body { background: #FFFFFF; } /* ========================================================== AP ROW STATUS KEEP NORMAL TABLE APPEARANCE ========================================================== */ .ap-row-posted, .ap-row-draft, .ap-row-complete, .ap-row-void { opacity: 1 !important; } /* ========================================================== STATUS BADGE ========================================================== */ #ap-table-body .badge { opacity: 1; } /* ========================================================== ACTION BUTTON ========================================================== */ #ap-table-body .btn { opacity: 1; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 1200px) { .account-payable-filter-card > .finova-card-body { padding-left: 16px !important; padding-right: 16px !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 768px) { .account-payable-filter-card > .finova-card-body { padding: 8px 16px !important; } } /* ========================================================== AP TOM SELECT - COA SEARCHABLE DROPDOWN ========================================================== */ #accountPayableDetailModal .ts-wrapper { width: 100%; } /* ========================================================== TOM SELECT CONTROL KEEP SEARCH INPUT ON SAME LINE ========================================================== */ #accountPayableDetailModal .ts-control { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; width: 100% !important; min-height: 38px; overflow: hidden; } /* ========================================================== SELECTED COA ========================================================== */ #accountPayableDetailModal .ts-control .item { flex: 0 1 auto !important; min-width: 0; max-width: calc(100% - 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================== TOM SELECT SEARCH INPUT IMPORTANT : DO NOT USE WIDTH 100% ========================================================== */ #accountPayableDetailModal .ts-control > input { flex: 1 1 auto !important; width: 1px !important; min-width: 20px !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 0 4px !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } /* ========================================================== REMOVE FOCUS SHADOW FROM INTERNAL INPUT ========================================================== */ #accountPayableDetailModal .ts-control > input:focus { outline: none !important; box-shadow: none !important; } /* ========================================================== DROPDOWN ========================================================== */ #accountPayableDetailModal .ts-dropdown { width: 100%; } /* ========================================================== FINOVA ACCOUNTING SYSTEM ACCOUNT PAYABLE COMPACT BODY TABLE LAYOUT ========================================================== */ /* ========================================================== TABLE HEADER WIDTH ========================================================== */ .account-payable-table-card .ap-col-no { width: 54px; min-width: 54px; max-width: 54px; } .account-payable-table-card .ap-col-document { width: 245px; min-width: 245px; } .account-payable-table-card .ap-col-vendor { width: 360px; min-width: 320px; } .account-payable-table-card .ap-col-date-info { width: 210px; min-width: 210px; } .account-payable-table-card .ap-col-amount-status { width: 230px; min-width: 230px; } .account-payable-table-card .ap-col-action { width: 105px; min-width: 105px; max-width: 105px; } /* ========================================================== TABLE ROW ========================================================== */ .account-payable-table-card .finova-table tbody .ap-data-row { min-height: 108px; } /* ========================================================== TABLE CELL ========================================================== */ .account-payable-table-card .finova-table tbody .ap-data-row > td { padding: 12px 14px; vertical-align: top; font-size: 12px; line-height: 1.45; background: #FFFFFF; } /* ========================================================== ROW HOVER ========================================================== */ .account-payable-table-card .finova-table tbody .ap-data-row:hover > td { background: #F8FAFC; } /* ========================================================== NO ========================================================== */ .account-payable-table-card .ap-cell-no { text-align: center; vertical-align: middle !important; font-weight: 600; color: var(--text-secondary); } /* ========================================================== DOCUMENT CELL ========================================================== */ .ap-document-wrap { display: flex; flex-direction: column; gap: 4px; width: 100%; } /* ========================================================== DOCUMENT BADGES ========================================================== */ .ap-document-badges { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } .ap-document-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 21px; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .25px; white-space: nowrap; } .ap-document-badge-payable { background: #EAF2FF; border: 1px solid #C8DAFA; color: #315D9A; } .ap-document-badge-invoice { background: #F3F4F6; border: 1px solid #D9DEE5; color: #56606D; } /* ========================================================== GLOBAL INFO LINE ========================================================== */ .ap-info-line { display: grid; grid-template-columns: 82px 10px minmax(0, 1fr); align-items: start; min-width: 0; gap: 2px; } /* ========================================================== INFO LABEL ========================================================== */ .ap-info-label { color: var(--text-secondary); font-size: 11px; font-weight: 500; white-space: nowrap; } /* ========================================================== INFO SEPARATOR ========================================================== */ .ap-info-separator { color: #94A3B8; text-align: center; } /* ========================================================== INFO VALUE ========================================================== */ .ap-info-value { min-width: 0; color: var(--text-primary); font-size: 11.5px; font-weight: 500; overflow-wrap: anywhere; } /* ========================================================== DOCUMENT VALUE ========================================================== */ .ap-cell-document .ap-info-value { font-weight: 500; } /* ========================================================== VENDOR CELL ========================================================== */ .ap-vendor-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* ========================================================== VENDOR NAME ========================================================== */ .ap-vendor-name { color: var(--text-primary); font-size: 12.5px; font-weight: 600; line-height: 1.4; word-break: break-word; } /* ========================================================== DESCRIPTION ========================================================== */ .ap-description-line { display: grid; grid-template-columns: 82px 10px minmax(0, 1fr); align-items: start; gap: 2px; min-width: 0; } .ap-description-value { color: var(--text-secondary); font-size: 11.5px; font-weight: 400; line-height: 1.5; white-space: normal; word-break: break-word; } /* ========================================================== DATE CELL ========================================================== */ .ap-date-wrap { display: flex; flex-direction: column; gap: 4px; width: 100%; } .ap-cell-date-info .ap-info-line { grid-template-columns: 72px 10px minmax(0, 1fr); } /* ========================================================== AMOUNT / STATUS CELL ========================================================== */ .ap-amount-wrap { display: flex; flex-direction: column; gap: 4px; width: 100%; } .ap-cell-amount-status .ap-info-line { grid-template-columns: 86px 10px minmax(0, 1fr); } /* ========================================================== AMOUNT VALUE ========================================================== */ .ap-amount-value { font-weight: 600; text-align: left; white-space: nowrap; } /* ========================================================== STATUS LINE ========================================================== */ .ap-status-line { margin-top: 2px; } .ap-status-line .ap-info-value { display: flex; align-items: center; } /* ========================================================== STATUS BADGE ========================================================== */ .ap-status-line .badge { min-width: 74px; padding: 5px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; line-height: 1; } /* ========================================================== ACTION CELL ========================================================== */ .account-payable-table-card .ap-cell-action { vertical-align: middle !important; text-align: center; } /* ========================================================== ACTION BUTTON GROUP ========================================================== */ .account-payable-table-card .ap-cell-action .btn-group { display: inline-flex; align-items: center; justify-content: center; gap: 3px; } /* ========================================================== ACTION BUTTON ========================================================== */ .account-payable-table-card .ap-cell-action .btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 5px; } /* ========================================================== ACTION ICON ========================================================== */ .account-payable-table-card .ap-cell-action .btn i { font-size: 11px; } /* ========================================================== HEADER ALIGNMENT ========================================================== */ .account-payable-table-card .finova-table thead th { vertical-align: middle; } .account-payable-table-card .finova-table thead .ap-col-no { text-align: center; } .account-payable-table-card .finova-table thead .ap-col-document, .account-payable-table-card .finova-table thead .ap-col-vendor, .account-payable-table-card .finova-table thead .ap-col-date-info, .account-payable-table-card .finova-table thead .ap-col-amount-status { text-align: left; } .account-payable-table-card .finova-table thead .ap-col-action { text-align: center; } /* ========================================================== DESCRIPTION FULL BODY ========================================================== */ .ap-cell-vendor { white-space: normal; } .ap-description-value { display: block; max-width: 100%; } /* ========================================================== PREVENT COLUMN CONTENT OVERFLOW ========================================================== */ .ap-cell-document, .ap-cell-vendor, .ap-cell-date-info, .ap-cell-amount-status { min-width: 0; overflow: hidden; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 1200px) { .account-payable-table-card .ap-col-document { min-width: 220px; } .account-payable-table-card .ap-col-vendor { min-width: 300px; } .account-payable-table-card .ap-col-date-info { min-width: 195px; } .account-payable-table-card .ap-col-amount-status { min-width: 215px; } } /* ========================================================== SMALL SCREEN KEEP HORIZONTAL TABLE SCROLL ========================================================== */ @media (max-width: 768px) { .account-payable-table-card .finova-table { min-width: 1180px; } } /* ========================================================== ACCOUNT PAYABLE BODY FONT SIZE ENHANCEMENT ========================================================== */ /* ========================================================== BASE BODY ========================================================== */ .account-payable-table-card .finova-table tbody .ap-data-row > td { font-size: 14px; line-height: 1.55; } /* ========================================================== DOCUMENT BADGE PAYABLE / INV ========================================================== */ .ap-document-badge { font-size: 12px; font-weight: 600; min-height: 23px; padding: 3px 9px; } /* ========================================================== LABEL Inv No PO No Journal Description Inv Date Received Due Date Total Outstanding Status ========================================================== */ .ap-info-label { font-size: 13px; font-weight: 500; } /* ========================================================== SEPARATOR : ========================================================== */ .ap-info-separator { font-size: 13px; } /* ========================================================== VALUE ========================================================== */ .ap-info-value { font-size: 13px; font-weight: 500; } /* ========================================================== VENDOR NAME ========================================================== */ .ap-vendor-name { font-size: 14px; font-weight: 600; line-height: 1.5; } /* ========================================================== DESCRIPTION VALUE ========================================================== */ .ap-description-value { font-size: 13px; line-height: 1.55; } /* ========================================================== AMOUNT ========================================================== */ .ap-amount-value { font-size: 13.5px; font-weight: 600; } /* ========================================================== STATUS BADGE ========================================================== */ .ap-status-line .badge { font-size: 11.5px; font-weight: 600; min-width: 80px; padding: 6px 9px; } /* ========================================================== ACTION BUTTON ========================================================== */ .account-payable-table-card .ap-cell-action .btn { width: 32px; height: 32px; } /* ========================================================== ACTION ICON ========================================================== */ .account-payable-table-card .ap-cell-action .btn i { font-size: 13px; } /* ========================================================== FINOVA ACCOUNTING SYSTEM ACCOUNT PAYABLE MODAL TABS FINAL CLEAN SEGMENTED DESIGN ========================================================== */ /* ========================================================== TAB WRAPPER ========================================================== */ #accountPayableModal .ap-modern-tabs-wrapper { width: 100%; padding: 6px; background: #F1F3F6; border-top: 1px solid #E1E5EA; border-bottom: 1px solid #DDE2E8; } /* ========================================================== TAB CONTAINER ========================================================== */ #accountPayableModal #ap-modal-tabs { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; width: 100%; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* ========================================================== TAB ITEM ========================================================== */ #accountPayableModal #ap-modal-tabs .nav-item { width: 100%; min-width: 0; margin: 0 !important; flex: none !important; } /* ========================================================== TAB BUTTON ========================================================== */ #accountPayableModal #ap-modal-tabs .nav-link { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 36px !important; margin: 0 !important; padding: 7px 14px !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 8px !important; color: #344054 !important; font-family: inherit; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.2; letter-spacing: .1px; text-align: center; box-shadow: none; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; } /* ========================================================== HIDE ICON AND SUBTITLE KEEP CLEAN DESIGN ========================================================== */ #accountPayableModal #ap-modal-tabs .ap-tab-icon, #accountPayableModal #ap-modal-tabs .ap-tab-subtitle { display: none !important; } /* ========================================================== TAB CONTENT ========================================================== */ #accountPayableModal #ap-modal-tabs .ap-tab-content { display: block; width: 100%; } /* ========================================================== TAB TITLE ========================================================== */ #accountPayableModal #ap-modal-tabs .ap-tab-title { display: block; width: 100%; color: inherit !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.2; letter-spacing: .1px; text-align: center; white-space: nowrap; } /* ========================================================== REMOVE BOOTSTRAP TAB DECORATION ========================================================== */ #accountPayableModal #ap-modal-tabs .nav-link::before, #accountPayableModal #ap-modal-tabs .nav-link::after { display: none !important; } /* ========================================================== HOVER ========================================================== */ #accountPayableModal #ap-modal-tabs .nav-link:hover { background: rgba( 255, 255, 255, .72 ) !important; border-color: #DCE2E9 !important; color: #0D6EFD !important; } /* ========================================================== ACTIVE TAB ========================================================== */ #accountPayableModal #ap-modal-tabs .nav-link.active { background: #FFFFFF !important; border-color: #CFD7E2 !important; color: #0B5ED7 !important; font-weight: 700 !important; box-shadow: 0 2px 7px rgba(15, 23, 42, .11), 0 1px 2px rgba(15, 23, 42, .05), 0 0 0 1px rgba(13, 110, 253, .025) !important; } /* ========================================================== ACTIVE TITLE ========================================================== */ #accountPayableModal #ap-modal-tabs .nav-link.active .ap-tab-title { color: #0B5ED7 !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: .15px; text-shadow: 0 0 8px rgba(13, 110, 253, .16); } /* ========================================================== FOCUS ========================================================== */ #accountPayableModal #ap-modal-tabs .nav-link:focus { outline: none !important; } /* ========================================================== TAB CONTENT AREA ========================================================== */ #accountPayableModal #ap-modal-tab-content { background: #FFFFFF; border: 0; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 768px) { #accountPayableModal #ap-modal-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================== ACCOUNT PAYABLE COMPLETE / NOT COMPLETE ROW FINAL ========================================================== */ /* ========================================================== NOT COMPLETED Draft ========================================================== */ #ap-table-body tr.ap-data-row.ap-row-not-completed > td { background: #FFFFFF !important; background-color: #FFFFFF !important; } /* ========================================================== COMPLETED Complete / Partial Paid / Paid ========================================================== */ #ap-table-body tr.ap-data-row.ap-row-completed > td { background: #EEF1F4 !important; background-color: #EEF1F4 !important; } /* ========================================================== NOT COMPLETED HOVER ========================================================== */ #ap-table-body tr.ap-data-row.ap-row-not-completed:hover > td { background: #F8FAFC !important; background-color: #F8FAFC !important; } /* ========================================================== COMPLETED HOVER ========================================================== */ #ap-table-body tr.ap-data-row.ap-row-completed:hover > td { background: #E3E7EB !important; background-color: #E3E7EB !important; } /* ========================================================== AP JOURNAL STATUS ========================================================== */ .ap-journal-status { margin-top: 5px; font-size: 12px; font-weight: 700; line-height: 1.4; } /* ========================================================== JOURNAL NOT POSTED ========================================================== */ .ap-journal-not-posted { color: #DC3545; } /* ========================================================== JOURNAL POSTED ========================================================== */ .ap-journal-posted { color: #198754; } /* ========================================================== AP PAYMENT HISTORY JOURNAL COLUMN ========================================================== */ .ap-payment-journal-cell { min-width: 170px; vertical-align: middle !important; } /* ========================================================== JOURNAL WRAPPER ========================================================== */ .ap-payment-journal-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; } /* ========================================================== JOURNAL NUMBER ========================================================== */ .ap-payment-journal-no { font-size: 13px; font-weight: 600; line-height: 1.35; white-space: nowrap; color: var(--text-primary); } /* ========================================================== JOURNAL STATUS ========================================================== */ .ap-payment-journal-status { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; } /* ========================================================== AP PAYMENT HISTORY DESCRIPTION ROW ========================================================== */ .ap-payment-description-row { background: #FAFBFC; } .ap-payment-description-row:hover { background: #FAFBFC !important; } /* ========================================================== DESCRIPTION CELL ========================================================== */ .ap-payment-description-cell { padding: 8px 12px !important; vertical-align: top !important; } /* ========================================================== DESCRIPTION WRAPPER ========================================================== */ .ap-payment-description-wrap { display: flex; align-items: flex-start; width: 100%; gap: 8px; font-size: 13px; line-height: 1.5; } /* ========================================================== DESCRIPTION LABEL ========================================================== */ .ap-payment-description-label { flex: 0 0 auto; font-weight: 600; color: var(--text-secondary); } /* ========================================================== DESCRIPTION SEPARATOR ========================================================== */ .ap-payment-description-separator { flex: 0 0 auto; color: var(--text-secondary); } /* ========================================================== DESCRIPTION VALUE ========================================================== */ .ap-payment-description-value { flex: 1; min-width: 0; color: var(--text-primary); white-space: normal; overflow-wrap: anywhere; word-break: break-word; } /* ========================================================== AP PAYMENT SUMMARY ========================================================== */ #accountPayablePaymentModal .ap-payment-summary { width: 100%; padding: 14px 14px 16px 14px; background: #F8F9FA; border-radius: 6px; } /* ========================================================== SUMMARY LINE ========================================================== */ #accountPayablePaymentModal .ap-payment-summary-line { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 28px; } /* ========================================================== SUMMARY LABEL ========================================================== */ #accountPayablePaymentModal .ap-payment-summary-label { color: #6B7280; font-size: 13px; font-weight: 400; } /* ========================================================== SUMMARY VALUE ========================================================== */ #accountPayablePaymentModal .ap-payment-summary-value { color: #1F2937; font-size: 14px; font-weight: 700; text-align: right; } /* ========================================================== DIVIDER ========================================================== */ #accountPayablePaymentModal .ap-payment-summary-divider { width: 100%; height: 1px; margin: 10px 0 14px 0; background: #C9CDD3; } /* ========================================================== PAYMENT AMOUNT ========================================================== */ #accountPayablePaymentModal .ap-payment-amount { width: 100%; height: 40px; min-height: 40px; padding-left: 12px; padding-right: 12px; color: #1F2937; font-size: 18px; font-weight: 600; text-align: right; } /* ========================================================== DESCRIPTION ========================================================== */ #accountPayablePaymentModal .ap-payment-description { width: 100%; min-height: 110px; line-height: 1.5; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } /* ========================================================== JOURNAL PREVIEW ========================================================== */ #accountPayablePaymentModal .ap-payment-journal-preview { background: #FFFFFF; } /* ========================================================== FOOTER ========================================================== */ #accountPayablePaymentModal .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } /* ========================================================== FINOVA ACCOUNTING SYSTEM ACCOUNT PAYABLE INVOICE DETAIL TABLE ========================================================== */ /* ========================================================== TABLE WRAPPER ========================================================== */ .ap-invoice-detail-table-wrapper { width: 100%; overflow-x: auto; } /* ========================================================== TABLE ========================================================== */ .ap-invoice-detail-table { width: 100%; table-layout: fixed; margin-bottom: 0; } /* ========================================================== HEADER ========================================================== */ .ap-invoice-detail-table thead th { vertical-align: middle; white-space: nowrap; font-weight: 600; } /* ========================================================== BODY ========================================================== */ .ap-invoice-detail-table tbody td { vertical-align: top; } /* ========================================================== ACCOUNT COLUMN ========================================================== */ .ap-invoice-detail-table th:nth-child(2), .ap-invoice-detail-table td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; word-break: normal; } /* ========================================================== DESCRIPTION COLUMN ========================================================== */ .ap-invoice-detail-table th:nth-child(3), .ap-invoice-detail-table td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; word-break: normal; line-height: 1.5; } /* ========================================================== NUMBER COLUMNS ========================================================== */ .ap-invoice-detail-table th:nth-child(4), .ap-invoice-detail-table td:nth-child(4), .ap-invoice-detail-table th:nth-child(5), .ap-invoice-detail-table td:nth-child(5), .ap-invoice-detail-table th:nth-child(6), .ap-invoice-detail-table td:nth-child(6) { white-space: nowrap; } /* ========================================================== ACTION COLUMN ========================================================== */ .ap-invoice-detail-table th:nth-child(7), .ap-invoice-detail-table td:nth-child(7) { white-space: nowrap; text-align: center; } /* ========================================================== FINOVA ACCOUNTING SYSTEM ACCOUNT PAYABLE HEADER INFO MATCH ACCOUNT RECEIVABLE ========================================================== */ /* ========================================================== HEADER INFO PANE ========================================================== */ #accountPayableModal #ap-header-info-pane > .p-4 { padding: 20px !important; } /* ========================================================== HEADER CARD ========================================================== */ #accountPayableModal #ap-header-info-pane .finova-card { width: 100% !important; background: #FFFFFF !important; border: 1px solid #EEF0F3 !important; border-radius: 14px !important; box-shadow: 0 3px 10px rgba( 15, 23, 42, .05 ) !important; } /* ========================================================== HEADER CARD BODY ========================================================== */ #accountPayableModal #ap-header-info-pane .finova-card-body { padding: 20px !important; } /* ========================================================== ACCOUNT PAYABLE TAX (+) / TAX (-) FINAL COLUMN ALIGNMENT ========================================================== */ #accountPayableModal #ap-tax-plus-pane th:nth-child(1), #accountPayableModal #ap-tax-plus-pane td:nth-child(1), #accountPayableModal #ap-tax-minus-pane th:nth-child(1), #accountPayableModal #ap-tax-minus-pane td:nth-child(1) { width: 6% !important; white-space: nowrap !important; } #accountPayableModal #ap-tax-plus-pane th:nth-child(2), #accountPayableModal #ap-tax-plus-pane td:nth-child(2), #accountPayableModal #ap-tax-minus-pane th:nth-child(2), #accountPayableModal #ap-tax-minus-pane td:nth-child(2) { width: 34% !important; white-space: nowrap !important; } #accountPayableModal #ap-tax-plus-pane th:nth-child(3), #accountPayableModal #ap-tax-plus-pane td:nth-child(3), #accountPayableModal #ap-tax-minus-pane th:nth-child(3), #accountPayableModal #ap-tax-minus-pane td:nth-child(3) { width: 26% !important; white-space: nowrap !important; } #accountPayableModal #ap-tax-plus-pane th:nth-child(4), #accountPayableModal #ap-tax-plus-pane td:nth-child(4), #accountPayableModal #ap-tax-minus-pane th:nth-child(4), #accountPayableModal #ap-tax-minus-pane td:nth-child(4) { width: 14% !important; text-align: right !important; white-space: nowrap !important; } #accountPayableModal #ap-tax-plus-pane th:nth-child(5), #accountPayableModal #ap-tax-plus-pane td:nth-child(5), #accountPayableModal #ap-tax-minus-pane th:nth-child(5), #accountPayableModal #ap-tax-minus-pane td:nth-child(5) { width: 8% !important; text-align: right !important; white-space: nowrap !important; } #accountPayableModal #ap-tax-plus-pane th:nth-child(6), #accountPayableModal #ap-tax-plus-pane td:nth-child(6), #accountPayableModal #ap-tax-minus-pane th:nth-child(6), #accountPayableModal #ap-tax-minus-pane td:nth-child(6) { width: 12% !important; text-align: right !important; white-space: nowrap !important; } /* ========================================================== FINOVA ACCOUNTING SYSTEM ACCOUNT PAYABLE ACCOUNTING PREVIEW FIXED 5 ROWS + SCROLL ========================================================== */ /* ========================================================== JOURNAL SCROLL AREA SHOW APPROXIMATELY 5 ROWS ========================================================== */ #accountPayableModal #ap-accounting-preview-pane .ap-accounting-preview-scroll { width: 100%; max-height: 225px; overflow-x: auto; overflow-y: auto; } /* ========================================================== KEEP TABLE HEADER VISIBLE ========================================================== */ #accountPayableModal #ap-accounting-preview-pane .ap-accounting-preview-scroll thead th { position: sticky; top: 0; z-index: 5; background: #FFFFFF; } /* ========================================================== KEEP TOTAL ROW VISIBLE ========================================================== */ #accountPayableModal #ap-accounting-preview-pane .ap-accounting-preview-scroll tfoot td { position: sticky; bottom: 0; z-index: 4; background: #FFFFFF; } /* ========================================================== PREVENT AMOUNT WRAPPING ========================================================== */ #accountPayableModal #ap-accounting-preview-pane .ap-accounting-preview-scroll th, #accountPayableModal #ap-accounting-preview-pane .ap-accounting-preview-scroll td { white-space: nowrap; } /* ========================================================== ACCOUNTING SUMMARY NEVER SCROLL WITH JOURNAL ========================================================== */ #accountPayableModal #ap-accounting-preview-pane .ap-accounting-preview-scroll + .row { flex: 0 0 auto; } /* ========================================================== MODAL FOOTER KEEP PERMANENT ========================================================== */ #accountPayableModal .modal-footer { flex: 0 0 auto; background: #FFFFFF; } /* ========================================================== ACCOUNT PAYABLE MAIN MODAL POSITION MATCH ACCOUNT RECEIVABLE ========================================================== */ #accountPayableModal .modal-dialog { width: calc(100% - 48px) !important; max-width: 1140px !important; height: auto !important; max-height: none !important; margin: 48px auto !important; } /* ========================================================== MODAL CONTENT ========================================================== */ #accountPayableModal .modal-content { display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; max-height: calc(100vh - 96px) !important; min-height: 0 !important; overflow: hidden !important; } /* ========================================================== FINOVA ACCOUNTING SYSTEM ACCOUNT PAYABLE BULK AP PAYMENT MODAL TAHAP 4 ========================================================== */ /* ========================================================== MODAL SIZE ========================================================== */ #accountPayablePaymentModal .modal-dialog { width: calc(100% - 48px); max-width: 1180px; margin-left: auto; margin-right: auto; } /* ========================================================== MODAL CONTENT ========================================================== */ #accountPayablePaymentModal .modal-content { border: 0; border-radius: 14px; overflow: hidden; } /* ========================================================== HEADER ========================================================== */ #accountPayablePaymentModal .modal-header { padding: 18px 22px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; } /* ========================================================== BODY ========================================================== */ #accountPayablePaymentModal .modal-body { padding: 20px; background: #F8FAFC; } /* ========================================================== SECTION ========================================================== */ #accountPayablePaymentModal .ap-bulk-payment-section { width: 100%; padding: 18px; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; } /* ========================================================== SECTION HEADER ========================================================== */ #accountPayablePaymentModal .ap-bulk-payment-section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } /* ========================================================== SECTION TITLE ========================================================== */ #accountPayablePaymentModal .ap-bulk-payment-section-title { color: #111827; font-size: 15px; font-weight: 700; line-height: 1.35; } #accountPayablePaymentModal .ap-bulk-payment-section-subtitle { margin-top: 2px; color: #6B7280; font-size: 12px; line-height: 1.45; } /* ========================================================== FORM LABEL ========================================================== */ #accountPayablePaymentModal .form-label { margin-bottom: 6px; color: #374151; font-size: 13px; font-weight: 600; } /* ========================================================== FORM CONTROL ========================================================== */ #accountPayablePaymentModal .form-control, #accountPayablePaymentModal .form-select { min-height: 42px; border-color: #DDE2E8; border-radius: 8px; font-size: 13px; } #accountPayablePaymentModal .form-control:focus, #accountPayablePaymentModal .form-select:focus { border-color: #86B7FE; box-shadow: 0 0 0 3px rgba( 13, 110, 253, .10 ); } /* ========================================================== DESCRIPTION ========================================================== */ #accountPayablePaymentModal .ap-payment-description { width: 100%; min-height: 74px; resize: vertical; line-height: 1.5; } /* ========================================================== SELECT ALL ========================================================== */ #accountPayablePaymentModal .ap-bulk-select-all-wrapper { flex: 0 0 auto; margin: 0; } /* ========================================================== EMPTY / LOADING STATE ========================================================== */ #accountPayablePaymentModal .ap-bulk-payment-empty { display: flex; min-height: 150px; align-items: center; justify-content: center; flex-direction: column; text-align: center; color: #374151; border: 1px dashed #D8DEE7; border-radius: 10px; background: #FAFBFC; } #accountPayablePaymentModal .ap-bulk-payment-empty-icon { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; margin-bottom: 10px; color: #6B7280; font-size: 18px; background: #F1F5F9; border-radius: 50%; } /* ========================================================== TABLE WRAPPER ========================================================== */ #accountPayablePaymentModal .ap-bulk-invoice-table-wrapper { width: 100%; max-height: 330px; overflow: auto; border: 1px solid #E5E7EB; border-radius: 10px; } /* ========================================================== TABLE ========================================================== */ #accountPayablePaymentModal .ap-bulk-invoice-table { width: 100%; min-width: 1040px; margin: 0; font-size: 12px; } /* ========================================================== TABLE HEADER ========================================================== */ #accountPayablePaymentModal .ap-bulk-invoice-table thead th { position: sticky; top: 0; z-index: 2; padding: 11px 10px; color: #374151; font-size: 11px; font-weight: 700; white-space: nowrap; vertical-align: middle; background: #F8FAFC; border-bottom: 1px solid #DDE2E8; } /* ========================================================== TABLE BODY ========================================================== */ #accountPayablePaymentModal .ap-bulk-invoice-table tbody td { padding: 10px; color: #374151; vertical-align: middle; border-bottom-color: #EEF2F6; } /* ========================================================== CHECK COLUMN ========================================================== */ #accountPayablePaymentModal .ap-bulk-col-check { width: 46px; min-width: 46px; } /* ========================================================== PAYMENT INPUT INSIDE TABLE USED ON TAHAP 5 ========================================================== */ #accountPayablePaymentModal .ap-bulk-payment-input { width: 145px; min-height: 36px; margin-left: auto; text-align: right; font-weight: 600; } /* ========================================================== SELECTED ROW ========================================================== */ #accountPayablePaymentModal .ap-bulk-invoice-table tr.ap-bulk-row-selected td { background: #F5F9FF; } /* ========================================================== SUMMARY CARD ========================================================== */ #accountPayablePaymentModal .ap-bulk-summary-card { height: 100%; padding: 14px 16px; border: 1px solid #E5E7EB; border-radius: 10px; background: #FAFBFC; } #accountPayablePaymentModal .ap-bulk-summary-label { margin-bottom: 5px; color: #6B7280; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; } #accountPayablePaymentModal .ap-bulk-summary-value { color: #111827; font-size: 18px; font-weight: 700; line-height: 1.25; } /* ========================================================== TOTAL PAYMENT ========================================================== */ #accountPayablePaymentModal .ap-bulk-summary-card-total { border-color: #BFD4F5; background: #F5F9FF; } #accountPayablePaymentModal .ap-bulk-summary-total { color: #0D6EFD; } /* ========================================================== VALIDATION MESSAGE ========================================================== */ #accountPayablePaymentModal .ap-bulk-payment-message { margin-top: 14px; padding: 10px 12px; color: #92400E; font-size: 12px; border: 1px solid #FDE68A; border-radius: 8px; background: #FFFBEB; } /* ========================================================== JOURNAL PREVIEW ========================================================== */ #accountPayablePaymentModal .ap-payment-journal-preview { padding: 16px 18px; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; } /* ========================================================== JOURNAL LINE ========================================================== */ #accountPayablePaymentModal .ap-bulk-journal-line { display: flex; align-items: center; gap: 12px; min-height: 32px; padding: 4px 0; color: #374151; font-size: 12px; } #accountPayablePaymentModal .ap-bulk-journal-line > span:first-child { width: 50px; color: #6B7280; } /* ========================================================== FOOTER ========================================================== */ #accountPayablePaymentModal .modal-footer { display: flex; align-items: center; gap: 8px; padding: 14px 20px; background: #FFFFFF; border-top: 1px solid #E5E7EB; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 991.98px) { #accountPayablePaymentModal .modal-dialog { width: calc(100% - 24px); } #accountPayablePaymentModal .modal-body { padding: 14px; } #accountPayablePaymentModal .ap-bulk-payment-section { padding: 14px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767.98px) { #accountPayablePaymentModal .modal-dialog { width: calc(100% - 16px); margin: 8px auto; } #accountPayablePaymentModal .modal-footer > .me-auto { display: none; } #accountPayablePaymentModal .modal-footer { justify-content: flex-end; } #accountPayablePaymentModal .ap-bulk-payment-section-header { align-items: flex-start; flex-direction: column; } } /* ========================================================== AP PAYMENT — LOCKED VENDOR + SEARCHABLE BANK ACCOUNT FINAL ========================================================== */ #accountPayablePaymentModal #ap-payment-bulk-vendor:disabled { background-color: #F8FAFC !important; color: #111827 !important; opacity: 1 !important; cursor: not-allowed; } #accountPayablePaymentModal .ts-wrapper { width: 100%; } #accountPayablePaymentModal .ts-control { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; width: 100% !important; min-height: 42px; } #accountPayablePaymentModal .ts-control > input { flex: 1 1 auto !important; width: 1px !important; min-width: 30px !important; max-width: 100% !important; margin: 0 0 0 4px !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } #accountPayablePaymentModal .ts-dropdown { width: 100%; z-index: 1085; } /* ========================================================== FINOVA AP — CLEAN INVOICE DETAIL TABLE FIX Built from the original stylesheet; does not include the previous experimental table hotfixes. ========================================================== */ #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table-wrapper { display: block; width: 100%; height: auto; min-height: 0; max-height: none; overflow-x: auto; overflow-y: hidden; } #accountPayableModal #ap-invoice-details-pane table.ap-invoice-detail-table { display: table; width: 100%; min-width: 985px; max-width: none; height: auto; table-layout: fixed; border-collapse: collapse; margin-bottom: 0; } #accountPayableModal #ap-invoice-details-pane table.ap-invoice-detail-table > thead { display: table-header-group; } #accountPayableModal #ap-invoice-details-pane table.ap-invoice-detail-table > tbody#ap-detail-body { display: table-row-group; height: auto; min-height: 0; } #accountPayableModal #ap-invoice-details-pane table.ap-invoice-detail-table > tbody#ap-detail-body > tr { display: table-row; height: auto; min-height: 0; } #accountPayableModal #ap-invoice-details-pane table.ap-invoice-detail-table > tbody#ap-detail-body > tr > td { display: table-cell; height: auto; min-height: 0; padding: 8px 8px; vertical-align: middle; line-height: 1.35; white-space: normal; overflow-wrap: normal; word-break: normal; } #accountPayableModal #ap-invoice-details-pane table.ap-invoice-detail-table > thead > tr > th { padding: 9px 8px; vertical-align: middle; white-space: nowrap; } #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table colgroup col:nth-child(1) { width: 50px !important; } #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table colgroup col:nth-child(2) { width: 190px !important; } #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table colgroup col:nth-child(3) { width: 240px !important; } #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table colgroup col:nth-child(4) { width: 65px !important; } #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table colgroup col:nth-child(5) { width: 145px !important; } #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table colgroup col:nth-child(6) { width: 170px !important; } #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table colgroup col:nth-child(7) { width: 100px !important; } #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table th:nth-child(1), #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table td:nth-child(1) { text-align: center; } #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table th:nth-child(4), #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table td:nth-child(4), #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table th:nth-child(5), #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table td:nth-child(5), #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table th:nth-child(6), #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table td:nth-child(6) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table th:nth-child(7), #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table td:nth-child(7) { text-align: center; white-space: nowrap; overflow: visible; } #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table td:nth-child(7) .btn, #accountPayableModal #ap-invoice-details-pane .ap-invoice-detail-table td:nth-child(7) button { display: inline-flex; visibility: visible; opacity: 1; align-items: center; justify-content: center; margin: 0 1px; padding: 4px 6px; } #accountPayableModal #ap-invoice-details-pane #ap-detail-body > tr > td[colspan="7"] { height: auto; text-align: center; } /* ========================================================== AP MODAL: KEEP TOTAL SUMMARY VISIBLE WHILE DETAILS SCROLL ========================================================== */ #accountPayableModal .modal-content { max-height: calc(100vh - 2rem); } #accountPayableModal .modal-body { min-height: 0; } #accountPayableModal .ap-total-summary-footer { position: sticky; bottom: 0; z-index: 20; flex: 0 0 auto; background: #fff; box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.06); } /* ========================================================== AP INVOICE DETAILS: SCROLL ONLY THE TRANSACTION ROWS Keep modal title, tab navigation, detail heading and summary fixed. ========================================================== */ @supports selector(#accountPayableModal:has(.x)) { #accountPayableModal:has(#ap-invoice-details-pane.active) .modal-dialog { height: calc(100vh - 2rem); max-height: calc(100vh - 2rem); } #accountPayableModal:has(#ap-invoice-details-pane.active) .modal-content { height: 100%; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; } #accountPayableModal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content > .modal-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) .ap-modern-tabs-wrapper { flex: 0 0 auto; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-modal-tab-content { flex: 1 1 auto; min-height: 0; overflow: hidden; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane.active { height: 100%; min-height: 0; overflow: hidden; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane.active > .p-4 { height: 100%; min-height: 0; padding: 1rem !important; overflow: hidden; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .finova-card { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .finova-card-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .finova-card-body > .d-flex.justify-content-between { flex: 0 0 auto; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .ap-invoice-detail-table-wrapper { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-x: auto !important; overflow-y: auto !important; overscroll-behavior: contain; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .ap-invoice-detail-table thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; } #accountPayableModal:has(#ap-invoice-details-pane.active) .ap-total-summary-footer { position: relative; bottom: auto; flex: 0 0 auto; } } /* ========================================================== FINOVA AP — DEFINITIVE INNER DETAIL SCROLL FIX Only invoice rows scroll; modal header, tabs, detail heading, column header and total summary stay in place. ========================================================== */ @supports selector(#accountPayableModal:has(#ap-invoice-details-pane.active)) { #accountPayableModal:has(#ap-invoice-details-pane.active) { overflow: hidden !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) > .modal-dialog { height: calc(100dvh - 2rem) !important; max-height: calc(100dvh - 2rem) !important; margin: 1rem auto !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content { height: 100% !important; max-height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content > .modal-header { flex: 0 0 auto !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content > .modal-body { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) .ap-modern-tabs-wrapper { flex: 0 0 auto !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-modal-tab-content { flex: 1 1 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane.active.show { height: 100% !important; min-height: 0 !important; overflow: hidden !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane.active.show > .p-4 { height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .finova-card { flex: 1 1 auto !important; height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .finova-card-body { flex: 1 1 auto !important; height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .finova-card-body > .d-flex.justify-content-between { flex: 0 0 auto !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .ap-invoice-detail-table-wrapper { display: block !important; flex: 1 1 0 !important; height: 0 !important; min-height: 0 !important; max-height: none !important; overflow: auto !important; overscroll-behavior: contain; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .ap-invoice-detail-table { height: auto !important; margin-bottom: 0 !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .ap-invoice-detail-table > thead th { position: sticky !important; top: 0 !important; z-index: 5 !important; background: #f8fafc !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) .ap-total-summary-footer { position: relative !important; inset: auto !important; flex: 0 0 auto !important; z-index: 10 !important; background: #fff !important; } } /* PHASE III(10): Invoice Detail shows a compact initial view and scrolls long detail lists. */ #ap-invoice-details-pane .table-responsive { max-height: 290px; overflow: auto; } #ap-invoice-details-pane .table-responsive thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg, #fff); } /* ========================================================== FINOVA AP — MATCH AR MODAL NATURAL HEIGHT / SPACING The old AP detail-tab viewport sizing must not leak into Header, Tax (+), Tax (-), or Accounting Preview tabs. ========================================================== */ #accountPayableModal.modal { align-items: flex-start !important; overflow-y: auto !important; padding-top: 8px !important; padding-bottom: 8px !important; } #accountPayableModal > .modal-dialog, #accountPayableModal.modal .modal-dialog, #accountPayableModal .modal-dialog { margin-top: 0 !important; margin-bottom: 0 !important; } /* Default AP dialog sizing follows the actual content, like AR. */ #accountPayableModal > .modal-dialog > .modal-content, #accountPayableModal .modal-content { height: auto !important; min-height: 0 !important; max-height: none !important; } #accountPayableModal .modal-header, #accountPayableModal .modal-footer { position: relative !important; flex: 0 0 auto !important; } /* On non-invoice tabs, remove the stretched flex area causing the large white gap above Tax and Accounting Preview cards. */ @supports selector(#accountPayableModal:has(#ap-tax-plus-pane.active)) { #accountPayableModal:has(#ap-header-info-pane.active) > .modal-dialog, #accountPayableModal:has(#ap-tax-plus-pane.active) > .modal-dialog, #accountPayableModal:has(#ap-tax-minus-pane.active) > .modal-dialog, #accountPayableModal:has(#ap-accounting-preview-pane.active) > .modal-dialog { height: auto !important; min-height: 0 !important; max-height: none !important; } #accountPayableModal:has(#ap-header-info-pane.active) > .modal-dialog > .modal-content, #accountPayableModal:has(#ap-tax-plus-pane.active) > .modal-dialog > .modal-content, #accountPayableModal:has(#ap-tax-minus-pane.active) > .modal-dialog > .modal-content, #accountPayableModal:has(#ap-accounting-preview-pane.active) > .modal-dialog > .modal-content { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } #accountPayableModal:has(#ap-header-info-pane.active) > .modal-dialog > .modal-content > .modal-body, #accountPayableModal:has(#ap-tax-plus-pane.active) > .modal-dialog > .modal-content > .modal-body, #accountPayableModal:has(#ap-tax-minus-pane.active) > .modal-dialog > .modal-content > .modal-body, #accountPayableModal:has(#ap-accounting-preview-pane.active) > .modal-dialog > .modal-content > .modal-body { display: block !important; flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } #accountPayableModal:has(#ap-header-info-pane.active) #ap-modal-tab-content, #accountPayableModal:has(#ap-tax-plus-pane.active) #ap-modal-tab-content, #accountPayableModal:has(#ap-tax-minus-pane.active) #ap-modal-tab-content, #accountPayableModal:has(#ap-accounting-preview-pane.active) #ap-modal-tab-content { display: block !important; flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } #accountPayableModal:has(#ap-header-info-pane.active) #ap-header-info-pane, #accountPayableModal:has(#ap-tax-plus-pane.active) #ap-tax-plus-pane, #accountPayableModal:has(#ap-tax-minus-pane.active) #ap-tax-minus-pane, #accountPayableModal:has(#ap-accounting-preview-pane.active) #ap-accounting-preview-pane { position: relative !important; inset: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } #accountPayableModal:has(#ap-header-info-pane.active) #ap-header-info-pane > .p-4, #accountPayableModal:has(#ap-tax-plus-pane.active) #ap-tax-plus-pane > .p-4, #accountPayableModal:has(#ap-tax-minus-pane.active) #ap-tax-minus-pane > .p-4, #accountPayableModal:has(#ap-accounting-preview-pane.active) #ap-accounting-preview-pane > .p-4 { height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 20px !important; overflow: visible !important; } #accountPayableModal:has(#ap-header-info-pane.active) .finova-card, #accountPayableModal:has(#ap-tax-plus-pane.active) .finova-card, #accountPayableModal:has(#ap-tax-minus-pane.active) .finova-card, #accountPayableModal:has(#ap-accounting-preview-pane.active) .finova-card, #accountPayableModal:has(#ap-header-info-pane.active) .finova-card-body, #accountPayableModal:has(#ap-tax-plus-pane.active) .finova-card-body, #accountPayableModal:has(#ap-tax-minus-pane.active) .finova-card-body, #accountPayableModal:has(#ap-accounting-preview-pane.active) .finova-card-body { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } } /* Preserve row scrolling when Invoice Details is selected. */ /* ========================================================== FINOVA MODAL ALIGNMENT PATCH — AP Shared baseline with AR; preserve invoice-detail inner scroll. ========================================================== */ #accountPayableModal.modal { align-items: flex-start !important; overflow-y: auto !important; padding: 8px 0 !important; } #accountPayableModal > .modal-dialog, #accountPayableModal.modal .modal-dialog { width: calc(100% - 48px) !important; max-width: 1140px !important; margin: 0 auto !important; height: auto !important; min-height: 0 !important; } #accountPayableModal > .modal-dialog > .modal-content, #accountPayableModal .modal-content { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 16px) !important; overflow: hidden !important; } #accountPayableModal > .modal-dialog > .modal-content > .modal-header, #accountPayableModal > .modal-dialog > .modal-content > .modal-footer { flex: 0 0 auto !important; } /* Default/non-detail tabs scroll in the body only when needed. */ #accountPayableModal > .modal-dialog > .modal-content > .modal-body { min-height: 0 !important; max-height: calc(100dvh - 120px) !important; overflow-x: hidden !important; overflow-y: auto !important; } /* Invoice Details keeps its existing dedicated inner-scroll layout. */ @supports selector(#accountPayableModal:has(#ap-invoice-details-pane.active)) { #accountPayableModal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content > .modal-body { overflow: hidden !important; max-height: none !important; } } /* FINOVA FIX 2026-10-28: compact AP Invoice Details when there are no rows. The detail-tab flex/viewport layout must only constrain populated tables. When the empty-state row is present, let the card and modal use natural height. */ #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) .modal-dialog, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) .modal-content, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) .modal-body, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-modal-tab-content, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane > .p-4, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane .finova-card, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane .finova-card-body, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane .ap-invoice-detail-table-wrapper, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane .table-responsive { height: auto !important; min-height: 0 !important; max-height: none !important; } #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) .modal-content, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) .modal-body, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-modal-tab-content, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane > .p-4, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane .finova-card, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane .finova-card-body, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane .ap-invoice-detail-table-wrapper, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane .table-responsive { flex: 0 0 auto !important; overflow: visible !important; } #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) > .modal-dialog > .modal-content > .modal-body { display: block !important; } #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane .ap-invoice-detail-table { height: auto !important; margin-bottom: 0 !important; } /* FINOVA FIX 2026-10-28: AP empty Invoice Details should size to its content only while Invoice Details is active. Scope the empty-state rules to the active pane so Tax (+), Tax (-), and Accounting Preview retain their own layout. */ @supports selector(#accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty)) { #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) > .modal-dialog { height: auto !important; max-height: calc(100dvh - 16px) !important; margin-top: 8px !important; margin-bottom: 8px !important; } #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) > .modal-dialog > .modal-content { height: auto !important; max-height: calc(100dvh - 16px) !important; min-height: 0 !important; } #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) > .modal-dialog > .modal-content > .modal-body { display: block !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-modal-tab-content, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane > .p-4, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane .finova-card, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane .finova-card-body, #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-invoice-details-pane .ap-invoice-detail-table-wrapper { display: block !important; height: auto !important; max-height: none !important; min-height: 0 !important; flex: 0 0 auto !important; overflow: visible !important; } #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > #ap-detail-empty) #ap-detail-body > #ap-detail-empty > td { height: auto !important; padding-top: 8px !important; padding-bottom: 8px !important; } } /* ========================================================== FINOVA AP/AR TAX (+) & TAX (-) Wrap long invoice descriptions and scroll long tax lists. Keep column headings visible while the tax rows scroll. ========================================================== */ /* Tax lists use an internal scrollbar, like Invoice Details. */ #accountPayableModal #ap-tax-plus-pane .table-responsive, #accountPayableModal #ap-tax-minus-pane .table-responsive { display: block !important; width: 100% !important; max-height: 290px !important; min-height: 0 !important; overflow: auto !important; overscroll-behavior: contain; } #accountPayableModal #ap-tax-plus-pane .table-responsive thead th, #accountPayableModal #ap-tax-minus-pane .table-responsive thead th { position: sticky !important; top: 0 !important; z-index: 5 !important; background: #f8fafc !important; } #accountPayableModal #ap-tax-plus-pane .table-responsive table, #accountPayableModal #ap-tax-minus-pane .table-responsive table { width: 100% !important; table-layout: fixed !important; margin-bottom: 0 !important; } /* Description is allowed to wrap onto multiple lines instead of running into the Tax Account column when the text is long. */ #accountPayableModal #ap-tax-plus-pane .table-responsive th:nth-child(2), #accountPayableModal #ap-tax-plus-pane .table-responsive td:nth-child(2), #accountPayableModal #ap-tax-minus-pane .table-responsive th:nth-child(2), #accountPayableModal #ap-tax-minus-pane .table-responsive td:nth-child(2) { white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; vertical-align: top !important; line-height: 1.45; } #accountPayableModal #ap-tax-plus-pane .table-responsive td:not(:nth-child(2)), #accountPayableModal #ap-tax-minus-pane .table-responsive td:not(:nth-child(2)) { vertical-align: top !important; } /* FINOVA FIX 2026-10-28: show an internal scrollbar from 5 tax rows onward. */ #accountPayableModal #ap-tax-plus-pane .table-responsive, #accountPayableModal #ap-tax-minus-pane .table-responsive { max-height: 160px !important; overflow-x: auto !important; overflow-y: auto !important; overscroll-behavior: contain; } #accountPayableModal #ap-tax-plus-pane .table-responsive thead th, #accountPayableModal #ap-tax-minus-pane .table-responsive thead th { position: sticky !important; top: 0 !important; z-index: 5 !important; background: #f8fafc !important; } /* FINOVA AP - safe correction: stable outer modal without hiding tab contents. Replaces the previous fixed-height/height:0 patch. */ #accountPayableModal.modal > .modal-dialog { height: auto !important; max-height: calc(100dvh - 16px) !important; } #accountPayableModal.modal > .modal-dialog > .modal-content { height: auto !important; min-height: min(650px, calc(100dvh - 16px)) !important; max-height: calc(100dvh - 16px) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #accountPayableModal.modal > .modal-dialog > .modal-content > .modal-body { display: block !important; flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; } #accountPayableModal.modal #ap-modal-tab-content { display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } #accountPayableModal.modal .ap-modern-tabs-wrapper { display: block !important; height: auto !important; flex: none !important; } #accountPayableModal.modal > .modal-dialog > .modal-content > .modal-footer { flex: 0 0 auto !important; } /* Preserve the existing Invoice Details table scrollbar. */ #accountPayableModal.modal #ap-invoice-details-pane .ap-invoice-detail-table-wrapper { max-height: min(340px, 40dvh) !important; overflow-y: auto !important; } @media (max-height: 550px) { #accountPayableModal.modal > .modal-dialog > .modal-content { min-height: 0 !important; } } /* ================================================================ FINOVA AP — CONTENT-SIZED INVOICE DETAILS (2026-11-03) The summary follows the actual transaction rows; at five rows, scroll inside the table instead of growing the modal indefinitely. Only applies to the active Invoice Details tab. ================================================================ */ @supports selector(#accountPayableModal:has(#ap-invoice-details-pane.active)) { #accountPayableModal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content { min-height: 0 !important; height: auto !important; max-height: calc(100dvh - 16px) !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content > .modal-body { display: block !important; flex: 0 1 auto !important; height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 135px) !important; overflow-x: hidden !important; overflow-y: auto !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-modal-tab-content, #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane, #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane > .p-4, #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .finova-card, #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .finova-card-body { height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-modal-tab-content { display: block !important; overflow: visible !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .ap-invoice-detail-table-wrapper { height: auto !important; min-height: 0 !important; max-height: none !important; overflow-x: auto !important; overflow-y: visible !important; flex: 0 0 auto !important; } /* Five real detail rows trigger the inner scrollbar (not the empty-state row). */ #accountPayableModal:has(#ap-invoice-details-pane.active #ap-detail-body > tr:nth-child(5):not(#ap-detail-empty)) #ap-invoice-details-pane .ap-invoice-detail-table-wrapper { max-height: clamp(180px, 34dvh, 310px) !important; overflow-y: auto !important; overscroll-behavior: contain; } #accountPayableModal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .ap-invoice-detail-table thead th { position: sticky !important; top: 0 !important; z-index: 3 !important; background: #f8fafc !important; } #accountPayableModal:has(#ap-invoice-details-pane.active) .ap-total-summary-footer { position: static !important; inset: auto !important; height: auto !important; min-height: 0 !important; margin-top: 0 !important; flex: 0 0 auto !important; box-shadow: none !important; } } /* ================================================================ FINOVA AP - CONSISTENT MODAL SIZE ACROSS ALL FIVE TABS 2026-11-03. Keep the outer dialog fixed; let only body scroll. Preserve the 5-row inner scrollbar and the existing summary. ================================================================ */ #accountPayableModal.modal > .modal-dialog { width: min(1120px, calc(100vw - 24px)) !important; max-width: min(1120px, calc(100vw - 24px)) !important; height: min(730px, calc(100dvh - 24px)) !important; max-height: calc(100dvh - 24px) !important; margin: 12px auto !important; } #accountPayableModal.modal > .modal-dialog > .modal-content, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content { height: 100% !important; min-height: 0 !important; max-height: 100% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #accountPayableModal.modal > .modal-dialog > .modal-content > .modal-header { flex: 0 0 auto !important; } #accountPayableModal.modal > .modal-dialog > .modal-content > .modal-body, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content > .modal-body { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; } #accountPayableModal.modal > .modal-dialog > .modal-content > .modal-footer { flex: 0 0 auto !important; } @media (max-height: 550px) { #accountPayableModal.modal > .modal-dialog { height: calc(100dvh - 12px) !important; margin: 6px auto !important; } } /* FINOVA AP — keep Save/Cancel within comfortable reach at browser zoom. All five tabs retain one consistent modal height; detail table scrolls after 5 rows. */ #accountPayableModal.modal > .modal-dialog { height: min(660px, calc(100dvh - 32px)) !important; max-height: calc(100dvh - 32px) !important; margin: 16px auto !important; } #accountPayableModal.modal > .modal-dialog > .modal-content { height: 100% !important; max-height: 100% !important; } #accountPayableModal.modal > .modal-dialog > .modal-content > .modal-footer { flex-shrink: 0 !important; position: relative !important; z-index: 5 !important; } @media (max-height: 550px) { #accountPayableModal.modal > .modal-dialog { height: calc(100dvh - 12px) !important; margin: 6px auto !important; } } /* FINOVA AP — Invoice Details: keep Save directly after the Summary. Override the previous forced 660px dialog height only on this tab. */ @supports selector(#accountPayableModal:has(#ap-invoice-details-pane.active)) { #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog { height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 24px) !important; margin: 12px auto !important; } #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content { height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 24px) !important; display: flex !important; flex-direction: column !important; } #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content > .modal-body { flex: 0 1 auto !important; height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 145px) !important; overflow-y: auto !important; } #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content > .modal-footer { flex: 0 0 auto !important; margin-top: 0 !important; } } /* FINOVA AP: keep translated date and amount labels from colliding with values. Scoped to the two summary cells; no changes to transaction logic or other tables. */ .account-payable-table-card .ap-cell-date-info .ap-info-line, .account-payable-table-card .ap-cell-amount-status .ap-info-line { display: grid; grid-template-columns: minmax(0, 1fr) 9px minmax(0, 1.12fr); column-gap: 5px; align-items: start; width: 100%; min-width: 0; } .account-payable-table-card .ap-cell-date-info .ap-info-label, .account-payable-table-card .ap-cell-amount-status .ap-info-label { min-width: 0; white-space: normal; overflow-wrap: break-word; word-break: normal; line-height: 1.4; } .account-payable-table-card .ap-cell-date-info .ap-info-separator, .account-payable-table-card .ap-cell-amount-status .ap-info-separator { width: 9px; text-align: center; } .account-payable-table-card .ap-cell-date-info .ap-info-value, .account-payable-table-card .ap-cell-amount-status .ap-info-value { min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; line-height: 1.4; } .account-payable-table-card .ap-cell-amount-status .ap-amount-value { text-align: left; } /* FINOVA DARK MODE — AP Invoice Detail: final override against module CSS. The module's :has() sticky header and summary styles override the earlier generic theme sheet. Only color/contrast is changed here. */ html[data-finova-theme="dark"] body #accountPayableModal.modal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .ap-invoice-detail-table > thead > tr > th, html[data-finova-theme="dark"] body #accountPayableModal.modal:has(#ap-invoice-details-pane.active) #ap-invoice-details-pane .ap-invoice-detail-table thead th, html[data-finova-theme="dark"] body #accountPayableModal.modal #ap-invoice-details-pane .table-responsive thead th { background:#253b57!important; background-color:#253b57!important; background-image:none!important; color:#edf4ff!important; -webkit-text-fill-color:#edf4ff!important; border-color:#435b78!important; } html[data-finova-theme="dark"] body #accountPayableModal.modal #ap-invoice-details-pane .ap-invoice-detail-table thead th :is(span,div,i,strong,small) { color:#edf4ff!important; -webkit-text-fill-color:#edf4ff!important; } html[data-finova-theme="dark"] body #accountPayableModal.modal #ap-invoice-details-pane .ap-invoice-detail-table > tbody > tr > td { background:#1b2e46!important; background-color:#1b2e46!important; color:#edf4ff!important; border-color:#354b68!important; --bs-table-bg:#1b2e46!important; --bs-table-color:#edf4ff!important; --bs-table-accent-bg:transparent!important; } html[data-finova-theme="dark"] body #accountPayableModal.modal #ap-invoice-details-pane .ap-invoice-detail-table > tbody > tr > td :is(span,div,small,strong) { color:inherit!important; } html[data-finova-theme="dark"] body #accountPayableModal.modal .ap-total-summary-footer, html[data-finova-theme="dark"] body #accountPayableModal.modal .ap-total-summary-footer > .d-flex, html[data-finova-theme="dark"] body #accountPayableModal.modal .ap-total-summary-footer .finova-card, html[data-finova-theme="dark"] body #accountPayableModal.modal .ap-total-summary-footer .finova-card-body { background:#18283e!important; background-color:#18283e!important; background-image:none!important; color:#edf4ff!important; border-color:#354b68!important; } html[data-finova-theme="dark"] body #accountPayableModal.modal .ap-total-summary-footer :is(span,strong,small,p) { color:#edf4ff!important; -webkit-text-fill-color:#edf4ff!important; } /* FINOVA 3.0 — AP summary: enforce dark surface even when theme attribute is applied to body or absent. Visual styles only. */ #accountPayableModal .ap-total-summary-footer, #accountPayableModal .ap-total-summary-footer.border-top, #accountPayableModal .ap-total-summary-footer.p-4 { background: #192b43 !important; background-color: #192b43 !important; background-image: none !important; border-top: 1px solid #354b68 !important; color: #edf4ff !important; } #accountPayableModal .ap-total-summary-footer > .d-flex { background: transparent !important; background-color: transparent !important; } #accountPayableModal .ap-total-summary-footer .finova-card, #accountPayableModal .ap-total-summary-footer .finova-card-body { background: #16263c !important; background-color: #16263c !important; background-image: none !important; border-color: #354b68 !important; color: #edf4ff !important; } #accountPayableModal .ap-total-summary-footer :is(span,strong,small,p,div) { color: #edf4ff !important; -webkit-text-fill-color: #edf4ff !important; } #accountPayableModal .ap-total-summary-footer hr { border-color: #526781 !important; opacity: .7 !important; } /* FINOVA 3.0 | Invoice AP summary — override detail-pane white !important and keep the complete footer surface dark (presentation only). */ #accountPayableModal.modal .modal-content .modal-body .ap-total-summary-footer, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) .modal-content .ap-total-summary-footer, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) .ap-total-summary-footer, #accountPayableModal.modal .ap-total-summary-footer.border-top.p-4 { background: #192b43 !important; background-color: #192b43 !important; background-image: none !important; border-top: 1px solid #354b68 !important; box-shadow: none !important; color: #edf4ff !important; } #accountPayableModal.modal .ap-total-summary-footer > .d-flex { background: transparent !important; background-color: transparent !important; background-image: none !important; } #accountPayableModal.modal .ap-total-summary-footer .finova-card, #accountPayableModal.modal .ap-total-summary-footer .finova-card-body { background: #16263c !important; background-color: #16263c !important; background-image: none !important; color: #edf4ff !important; } #accountPayableModal.modal .ap-total-summary-footer :is(span,strong,small,p) { color: #edf4ff !important; -webkit-text-fill-color: #edf4ff !important; } /* FINOVA 3.0 | Invoice AP vendor field dark, including read-only view */ #accountPayableModal #ap-form-vendor, #accountPayableModal #ap-form-vendor:disabled, #accountPayableModal #ap-form-vendor[readonly], #accountPayableModal #ap-form-vendor.form-select { background-color: #101e32 !important; background-image: none !important; color: #f3f7ff !important; -webkit-text-fill-color: #f3f7ff !important; border: 1px solid #49617e !important; opacity: 1 !important; box-shadow: none !important; } #accountPayableModal #ap-form-vendor option { background-color: #101e32 !important; color: #f3f7ff !important; } #accountPayableModal #ap-form-vendor:focus { border-color: #4d94ff !important; box-shadow: 0 0 0 2px rgba(77,148,255,.18) !important; } /* FINOVA | Actual rendered TomSelect vendor control, all AP modal modes */ #accountPayableModal .ts-wrapper:has(#ap-form-vendor), #accountPayableModal .ts-wrapper:has(select#ap-form-vendor), #accountPayableModal #ap-form-vendor-ts-control, #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-control, #accountPayableModal .ts-wrapper:has(select#ap-form-vendor) .ts-control, #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-control input, #accountPayableModal .ts-wrapper:has(select#ap-form-vendor) .ts-control input { background: #101e32 !important; background-color: #101e32 !important; background-image: none !important; color: #f3f7ff !important; -webkit-text-fill-color: #f3f7ff !important; border-color: #49617e !important; opacity: 1 !important; } #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-control .item, #accountPayableModal .ts-wrapper:has(select#ap-form-vendor) .ts-control .item, #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-control > div, #accountPayableModal .ts-wrapper:has(select#ap-form-vendor) .ts-control > div { color: #f3f7ff !important; -webkit-text-fill-color: #f3f7ff !important; } #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-control input::placeholder, #accountPayableModal .ts-wrapper:has(select#ap-form-vendor) .ts-control input::placeholder { color: #91acd0 !important; -webkit-text-fill-color: #91acd0 !important; } #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-dropdown, #accountPayableModal .ts-wrapper:has(select#ap-form-vendor) .ts-dropdown { background: #14253d !important; color: #f3f7ff !important; border-color: #49617e !important; } #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-dropdown .option, #accountPayableModal .ts-wrapper:has(select#ap-form-vendor) .ts-dropdown .option { color: #f3f7ff !important; } #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-dropdown .active, #accountPayableModal .ts-wrapper:has(select#ap-form-vendor) .ts-dropdown .active { background: #24518b !important; } /* FINOVA 3.0 — AP Payment Pemasok follows the active app theme. Default/light is white. Dark only when FINOVA explicitly sets dark theme. No changes to disabled/read-only behavior or payment logic. */ #accountPayablePaymentModal #ap-payment-bulk-vendor, #accountPayablePaymentModal #ap-payment-bulk-vendor:disabled, #accountPayablePaymentModal #ap-payment-bulk-vendor[readonly], #accountPayablePaymentModal #ap-payment-bulk-vendor:read-only, #accountPayablePaymentModal #ap-payment-bulk-vendor + .ts-wrapper .ts-control, #accountPayablePaymentModal .ts-wrapper:has(#ap-payment-bulk-vendor) .ts-control, #accountPayablePaymentModal .ts-wrapper:has(#ap-payment-bulk-vendor) .ts-control input { background: #ffffff !important; background-color: #ffffff !important; color: #14243b !important; -webkit-text-fill-color: #14243b !important; border-color: #cbd5e1 !important; opacity: 1 !important; box-shadow: none !important; } #accountPayablePaymentModal #ap-payment-bulk-vendor option { background: #ffffff !important; color: #14243b !important; } :is(html[data-finova-theme="dark"] body, body[data-finova-theme="dark"]) #accountPayablePaymentModal #ap-payment-bulk-vendor, :is(html[data-finova-theme="dark"] body, body[data-finova-theme="dark"]) #accountPayablePaymentModal #ap-payment-bulk-vendor:disabled, :is(html[data-finova-theme="dark"] body, body[data-finova-theme="dark"]) #accountPayablePaymentModal #ap-payment-bulk-vendor[readonly], :is(html[data-finova-theme="dark"] body, body[data-finova-theme="dark"]) #accountPayablePaymentModal #ap-payment-bulk-vendor:read-only, :is(html[data-finova-theme="dark"] body, body[data-finova-theme="dark"]) #accountPayablePaymentModal #ap-payment-bulk-vendor + .ts-wrapper .ts-control, :is(html[data-finova-theme="dark"] body, body[data-finova-theme="dark"]) #accountPayablePaymentModal .ts-wrapper:has(#ap-payment-bulk-vendor) .ts-control, :is(html[data-finova-theme="dark"] body, body[data-finova-theme="dark"]) #accountPayablePaymentModal .ts-wrapper:has(#ap-payment-bulk-vendor) .ts-control input { background: #101e32 !important; background-color: #101e32 !important; color: #f5f9ff !important; -webkit-text-fill-color: #f5f9ff !important; border-color: #48617f !important; } :is(html[data-finova-theme="dark"] body, body[data-finova-theme="dark"]) #accountPayablePaymentModal #ap-payment-bulk-vendor option { background: #101e32 !important; color: #f5f9ff !important; } /* FINOVA AP modal stability — 2026-11-06. Presentation only. */ #accountPayableModal.modal > .modal-dialog { height: min(780px, calc(100dvh - 24px)) !important; min-height: 0 !important; max-height: calc(100dvh - 24px) !important; display: flex !important; align-items: stretch !important; } #accountPayableModal.modal > .modal-dialog > .modal-content { height: 100% !important; min-height: 0 !important; max-height: 100% !important; display: flex !important; flex-direction: column !important; } #accountPayableModal.modal > .modal-dialog > .modal-content > .modal-body, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content > .modal-body { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-gutter: stable; } #accountPayableModal #ap-modal-tab-content { width: 100% !important; min-width: 0 !important; } #accountPayableModal #ap-modal-tab-content > .tab-pane { width: 100% !important; min-width: 0 !important; } #accountPayableModal #ap-modal-tab-content .table-responsive { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; } #accountPayableModal #ap-modal-tab-content table { width: 100% !important; margin-bottom: 0; } /* Keep all AP tab surfaces in the selected theme, including read-only view. */ #accountPayableModal .modal-content, #accountPayableModal .modal-body, #accountPayableModal #ap-modal-tab-content, #accountPayableModal #ap-modal-tab-content > .tab-pane { background-color: var(--bs-body-bg, #fff) !important; color: var(--bs-body-color, #212529) !important; } :is(html[data-finova-theme="dark"], body[data-finova-theme="dark"], html[data-theme="dark"], body[data-theme="dark"], html[data-bs-theme="dark"], body[data-bs-theme="dark"], body.dark-mode, body.dark-theme) #accountPayableModal .modal-content, :is(html[data-finova-theme="dark"], body[data-finova-theme="dark"], html[data-theme="dark"], body[data-theme="dark"], html[data-bs-theme="dark"], body[data-bs-theme="dark"], body.dark-mode, body.dark-theme) #accountPayableModal .modal-body, :is(html[data-finova-theme="dark"], body[data-finova-theme="dark"], html[data-theme="dark"], body[data-theme="dark"], html[data-bs-theme="dark"], body[data-bs-theme="dark"], body.dark-mode, body.dark-theme) #accountPayableModal #ap-modal-tab-content, :is(html[data-finova-theme="dark"], body[data-finova-theme="dark"], html[data-theme="dark"], body[data-theme="dark"], html[data-bs-theme="dark"], body[data-bs-theme="dark"], body.dark-mode, body.dark-theme) #accountPayableModal #ap-modal-tab-content > .tab-pane { background-color: #14253d !important; color: #f3f7ff !important; } @media (max-width: 767px) { #accountPayableModal.modal > .modal-dialog { width: calc(100% - 16px) !important; height: calc(100dvh - 16px) !important; } } /* FINOVA AP FIX V2 — single geometry for Add/Edit/View and all tabs */ #accountPayableModal.modal > .modal-dialog, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog { width: min(1120px, calc(100vw - 24px)) !important; max-width: min(1120px, calc(100vw - 24px)) !important; height: min(690px, calc(100dvh - 24px)) !important; min-height: 0 !important; max-height: calc(100dvh - 24px) !important; margin: 12px auto !important; display: flex !important; } #accountPayableModal.modal > .modal-dialog > .modal-content, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #accountPayableModal.modal > .modal-dialog > .modal-content > .modal-body, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content > .modal-body { flex: 1 1 0% !important; height: 0 !important; min-height: 0 !important; max-height: none !important; overflow-y: scroll !important; overflow-x: hidden !important; scrollbar-gutter: stable !important; } #accountPayableModal.modal > .modal-dialog > .modal-content > :is(.modal-header,.modal-footer) { flex: 0 0 auto !important; } #accountPayableModal #ap-modal-tab-content, #accountPayableModal #ap-modal-tab-content > .tab-pane { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; } #accountPayableModal #ap-modal-tab-content .table-responsive { max-width: 100% !important; overflow-x: auto !important; } /* Light mode: no hard-coded dark summary background */ #accountPayableModal.modal .modal-content .modal-body .ap-total-summary-footer, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) .modal-content .ap-total-summary-footer, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) .ap-total-summary-footer, #accountPayableModal.modal .ap-total-summary-footer.border-top.p-4 { background: #f2f6fc !important; background-color: #f2f6fc !important; border-color: #dbe4f0 !important; color: #20334e !important; } #accountPayableModal.modal .ap-total-summary-footer .finova-card, #accountPayableModal.modal .ap-total-summary-footer .finova-card-body { background: #ffffff !important; background-color: #ffffff !important; border-color: #dbe4f0 !important; color: #20334e !important; } #accountPayableModal.modal .ap-total-summary-footer :is(span,strong,small,p,div) { color: #20334e !important; -webkit-text-fill-color: #20334e !important; } #accountPayableModal.modal .ap-total-summary-footer hr { border-color: #dbe4f0 !important; } /* Dark theme, matching FINOVA's existing selectors */ :is(html[data-finova-theme="dark"], body[data-finova-theme="dark"], html[data-theme="dark"], body[data-theme="dark"], html[data-bs-theme="dark"], body[data-bs-theme="dark"], body.dark-mode, body.dark-theme, html.dark) #accountPayableModal.modal .modal-content .modal-body .ap-total-summary-footer, :is(html[data-finova-theme="dark"], body[data-finova-theme="dark"], html[data-theme="dark"], body[data-theme="dark"], html[data-bs-theme="dark"], body[data-bs-theme="dark"], body.dark-mode, body.dark-theme, html.dark) #accountPayableModal.modal .ap-total-summary-footer.border-top.p-4 { background: #192b43 !important; background-color: #192b43 !important; border-color: #354b68 !important; color: #edf4ff !important; } :is(html[data-finova-theme="dark"], body[data-finova-theme="dark"], html[data-theme="dark"], body[data-theme="dark"], html[data-bs-theme="dark"], body[data-bs-theme="dark"], body.dark-mode, body.dark-theme, html.dark) #accountPayableModal.modal .ap-total-summary-footer :is(.finova-card,.finova-card-body) { background: #16263c !important; background-color: #16263c !important; color: #edf4ff !important; } :is(html[data-finova-theme="dark"], body[data-finova-theme="dark"], html[data-theme="dark"], body[data-theme="dark"], html[data-bs-theme="dark"], body[data-bs-theme="dark"], body.dark-mode, body.dark-theme, html.dark) #accountPayableModal.modal .ap-total-summary-footer :is(span,strong,small,p,div) { color: #edf4ff !important; -webkit-text-fill-color: #edf4ff !important; } @media (max-height: 550px) { #accountPayableModal.modal > .modal-dialog, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog { height: calc(100dvh - 12px) !important; margin: 6px auto !important; } } /* FINOVA 2026-11-06 — AP dialog stable across Header/Details/Tax/Preview. Explicitly overrides legacy :has(active details) auto-height rules. Scoped to invoice AP only; no JavaScript or transaction changes. */ #accountPayableModal.modal > .modal-dialog, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog { width: min(1120px, calc(100vw - 24px)) !important; max-width: min(1120px, calc(100vw - 24px)) !important; height: min(790px, calc(100dvh - 32px)) !important; min-height: 0 !important; max-height: calc(100dvh - 32px) !important; margin: 16px auto !important; } #accountPayableModal.modal > .modal-dialog > .modal-content, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content { height: 100% !important; min-height: 0 !important; max-height: 100% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #accountPayableModal.modal > .modal-dialog > .modal-content > .modal-body, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content > .modal-body { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; } #accountPayableModal.modal > .modal-dialog > .modal-content > .modal-footer, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content > .modal-footer { flex: 0 0 auto !important; margin-top: 0 !important; } /* AR-like light summary card rather than forced navy footer. */ #accountPayableModal.modal .ap-total-summary-footer, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) .ap-total-summary-footer, #accountPayableModal.modal .modal-content .modal-body .ap-total-summary-footer, #accountPayableModal.modal .ap-total-summary-footer.border-top.p-4 { background: #fff !important; background-color: #fff !important; color: #1c3554 !important; border-color: #dce3ed !important; } #accountPayableModal.modal .ap-total-summary-footer .finova-card, #accountPayableModal.modal .ap-total-summary-footer .finova-card-body { background: #fff !important; background-color: #fff !important; color: #1c3554 !important; border-radius: 14px !important; } #accountPayableModal.modal .ap-total-summary-footer :is(span,strong,small,p,div) { color: #1c3554 !important; -webkit-text-fill-color: #1c3554 !important; } :is(html[data-finova-theme="dark"] body, body[data-finova-theme="dark"], html[data-theme="dark"] body, body[data-theme="dark"], html[data-bs-theme="dark"] body, body[data-bs-theme="dark"], body.dark-mode, body.dark-theme, html.dark body) #accountPayableModal.modal .ap-total-summary-footer, :is(html[data-finova-theme="dark"] body, body[data-finova-theme="dark"], html[data-theme="dark"] body, body[data-theme="dark"], html[data-bs-theme="dark"] body, body[data-bs-theme="dark"], body.dark-mode, body.dark-theme, html.dark body) #accountPayableModal.modal .ap-total-summary-footer :is(.finova-card,.finova-card-body) { background: #192b43 !important; background-color: #192b43 !important; color: #edf4ff !important; border-color: #354b68 !important; } :is(html[data-finova-theme="dark"] body, body[data-finova-theme="dark"], html[data-theme="dark"] body, body[data-theme="dark"], html[data-bs-theme="dark"] body, body[data-bs-theme="dark"], body.dark-mode, body.dark-theme, html.dark body) #accountPayableModal.modal .ap-total-summary-footer :is(span,strong,small,p,div) { color: #edf4ff !important; -webkit-text-fill-color: #edf4ff !important; } @media(max-height:550px) { #accountPayableModal.modal > .modal-dialog, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog { height: calc(100dvh - 12px) !important; max-height: calc(100dvh - 12px) !important; margin: 6px auto !important; } } /* FINOVA AP — final visual override: fixed modal geometry and theme-aware vendor. Appended after legacy rules intentionally; AP only. */ #accountPayableModal.modal > .modal-dialog, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog { width: min(1120px, calc(100vw - 32px)) !important; max-width: min(1120px, calc(100vw - 32px)) !important; height: min(790px, calc(100dvh - 40px)) !important; max-height: calc(100dvh - 40px) !important; min-height: 0 !important; margin: 20px auto !important; transform: none !important; } #accountPayableModal.modal > .modal-dialog > .modal-content, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important; } #accountPayableModal.modal > .modal-dialog > .modal-content > .modal-body, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content > .modal-body { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; height: 0 !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-gutter: stable !important; } #accountPayableModal .ap-modern-tabs-wrapper { flex: 0 0 auto !important; } #accountPayableModal #ap-modal-tab-content { flex: 0 0 auto !important; min-height: 0 !important; } #accountPayableModal .ap-total-summary-footer { flex: 0 0 auto !important; margin-top: auto !important; } #accountPayableModal.modal > .modal-dialog > .modal-content > .modal-footer { flex: 0 0 auto !important; margin-top: 0 !important; } /* Default / light theme: neutralize legacy forced dark TomSelect vendor styles. */ #accountPayableModal #ap-form-vendor, #accountPayableModal #ap-form-vendor option, #accountPayableModal #ap-form-vendor-ts-control, #accountPayableModal .ts-wrapper:has(#ap-form-vendor), #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-control, #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-control input, #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-control .item, #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-control > div, #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-dropdown, #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-dropdown .option { background: #fff !important; background-color: #fff !important; color: #20334e !important; -webkit-text-fill-color: #20334e !important; border-color: #d6dee9 !important; opacity: 1 !important; } #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-control input::placeholder { color: #64748b !important; -webkit-text-fill-color: #64748b !important; } #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-dropdown .active, #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-dropdown .selected { background: #eaf2ff !important; background-color: #eaf2ff !important; color: #153c78 !important; -webkit-text-fill-color: #153c78 !important; } /* Explicit dark theme only. */ :is(html[data-theme="dark"],html[data-finova-theme="dark"],html[data-bs-theme="dark"],html.dark,body[data-theme="dark"],body[data-finova-theme="dark"],body[data-bs-theme="dark"],body.dark-mode,body.dark-theme) #accountPayableModal #ap-form-vendor, :is(html[data-theme="dark"],html[data-finova-theme="dark"],html[data-bs-theme="dark"],html.dark,body[data-theme="dark"],body[data-finova-theme="dark"],body[data-bs-theme="dark"],body.dark-mode,body.dark-theme) #accountPayableModal #ap-form-vendor option, :is(html[data-theme="dark"],html[data-finova-theme="dark"],html[data-bs-theme="dark"],html.dark,body[data-theme="dark"],body[data-finova-theme="dark"],body[data-bs-theme="dark"],body.dark-mode,body.dark-theme) #accountPayableModal #ap-form-vendor-ts-control, :is(html[data-theme="dark"],html[data-finova-theme="dark"],html[data-bs-theme="dark"],html.dark,body[data-theme="dark"],body[data-finova-theme="dark"],body[data-bs-theme="dark"],body.dark-mode,body.dark-theme) #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-control, :is(html[data-theme="dark"],html[data-finova-theme="dark"],html[data-bs-theme="dark"],html.dark,body[data-theme="dark"],body[data-finova-theme="dark"],body[data-bs-theme="dark"],body.dark-mode,body.dark-theme) #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-control input, :is(html[data-theme="dark"],html[data-finova-theme="dark"],html[data-bs-theme="dark"],html.dark,body[data-theme="dark"],body[data-finova-theme="dark"],body[data-bs-theme="dark"],body.dark-mode,body.dark-theme) #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-control .item, :is(html[data-theme="dark"],html[data-finova-theme="dark"],html[data-bs-theme="dark"],html.dark,body[data-theme="dark"],body[data-finova-theme="dark"],body[data-bs-theme="dark"],body.dark-mode,body.dark-theme) #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-dropdown, :is(html[data-theme="dark"],html[data-finova-theme="dark"],html[data-bs-theme="dark"],html.dark,body[data-theme="dark"],body[data-finova-theme="dark"],body[data-bs-theme="dark"],body.dark-mode,body.dark-theme) #accountPayableModal .ts-wrapper:has(#ap-form-vendor) .ts-dropdown .option { background: #15243a !important; background-color: #15243a !important; color: #edf4ff !important; -webkit-text-fill-color: #edf4ff !important; border-color: #405672 !important; } /* FINOVA AP 2026-11-06 — consistent AR-sized shell, scrollable tabs, themed summary. Scoped to the main AP modal; no transaction or form behavior changed. */ #accountPayableModal.modal > .modal-dialog { width: min(1120px, calc(100vw - 32px)) !important; max-width: min(1120px, calc(100vw - 32px)) !important; height: min(790px, calc(100dvh - 32px)) !important; max-height: calc(100dvh - 32px) !important; margin: 16px auto !important; } #accountPayableModal.modal > .modal-dialog > .modal-content { height: 100% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #accountPayableModal.modal > .modal-dialog > .modal-content > .modal-body { display: flex !important; flex: 1 1 0 !important; flex-direction: column !important; min-height: 0 !important; height: auto !important; overflow: hidden !important; } #accountPayableModal .ap-modern-tabs-wrapper { flex: 0 0 auto !important; } #accountPayableModal #ap-modal-tab-content { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-gutter: stable !important; } #accountPayableModal .ap-total-summary-footer { flex: 0 0 auto !important; margin: 0 !important; padding: 16px 20px !important; } #accountPayableModal .ap-total-summary-footer .finova-card { margin: 0 !important; } #accountPayableModal.modal > .modal-dialog > .modal-content > .modal-footer { flex: 0 0 auto !important; margin-top: 0 !important; } /* Theme values are local to AP; light is the default. */ #accountPayableModal { --ap-summary-bg: #ffffff; --ap-summary-card: #ffffff; --ap-summary-text: #19324e; --ap-summary-border: #dce4ef; } :is(html[data-finova-theme="dark"],html[data-theme="dark"],html[data-bs-theme="dark"],html.dark,body[data-finova-theme="dark"],body[data-theme="dark"],body[data-bs-theme="dark"],body.dark-mode,body.dark-theme) #accountPayableModal { --ap-summary-bg: #192a40; --ap-summary-card: #142338; --ap-summary-text: #f2f6ff; --ap-summary-border: #3b526e; } #accountPayableModal.modal .ap-total-summary-footer, #accountPayableModal.modal .ap-total-summary-footer.border-top.p-4, #accountPayableModal.modal .modal-content .modal-body .ap-total-summary-footer { background: var(--ap-summary-bg) !important; background-color: var(--ap-summary-bg) !important; border-color: var(--ap-summary-border) !important; color: var(--ap-summary-text) !important; } #accountPayableModal.modal .ap-total-summary-footer .finova-card, #accountPayableModal.modal .ap-total-summary-footer .finova-card-body { background: var(--ap-summary-card) !important; background-color: var(--ap-summary-card) !important; color: var(--ap-summary-text) !important; border-color: var(--ap-summary-border) !important; } #accountPayableModal.modal .ap-total-summary-footer :is(span,strong,small,p,div) { color: var(--ap-summary-text) !important; -webkit-text-fill-color: var(--ap-summary-text) !important; } #accountPayableModal.modal .ap-total-summary-footer hr { border-color: var(--ap-summary-border) !important; } @media(max-height: 550px) { #accountPayableModal.modal > .modal-dialog { height: calc(100dvh - 12px) !important; margin: 6px auto !important; } } /* AP modal definitive shell: overrides legacy :has(tab.active) height rules. */ #accountPayableModal.modal:has(#ap-modal-tab-content) > .modal-dialog, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog { width: min(1120px, calc(100vw - 32px)) !important; max-width: min(1120px, calc(100vw - 32px)) !important; height: min(790px, calc(100dvh - 32px)) !important; min-height: 0 !important; max-height: calc(100dvh - 32px) !important; margin: 16px auto !important; transform: none !important; } #accountPayableModal.modal:has(#ap-modal-tab-content) > .modal-dialog > .modal-content, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content { height: 100% !important; min-height: 0 !important; max-height: 100% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #accountPayableModal.modal:has(#ap-modal-tab-content) > .modal-dialog > .modal-content > .modal-body, #accountPayableModal.modal:has(#ap-invoice-details-pane.active) > .modal-dialog > .modal-content > .modal-body { flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #accountPayableModal.modal:has(#ap-modal-tab-content) #ap-modal-tab-content { flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; } #accountPayableModal.modal:has(#ap-modal-tab-content) .ap-total-summary-footer { flex: 0 0 auto !important; margin-top: 0 !important; } /* The theme is on html; override older light-specific summary rules. */ html[data-finova-theme="dark"] body #accountPayableModal.modal .modal-body > .ap-total-summary-footer, html[data-theme="dark"] body #accountPayableModal.modal .modal-body > .ap-total-summary-footer, html[data-bs-theme="dark"] body #accountPayableModal.modal .modal-body > .ap-total-summary-footer, html.dark body #accountPayableModal.modal .modal-body > .ap-total-summary-footer, body[data-finova-theme="dark"] #accountPayableModal.modal .modal-body > .ap-total-summary-footer, body.dark-mode #accountPayableModal.modal .modal-body > .ap-total-summary-footer { background: #192a40 !important; background-color: #192a40 !important; border-color: #3b526e !important; color: #f2f6ff !important; } html[data-finova-theme="dark"] body #accountPayableModal.modal .ap-total-summary-footer :is(.finova-card,.finova-card-body), html[data-theme="dark"] body #accountPayableModal.modal .ap-total-summary-footer :is(.finova-card,.finova-card-body), html[data-bs-theme="dark"] body #accountPayableModal.modal .ap-total-summary-footer :is(.finova-card,.finova-card-body), body.dark-mode #accountPayableModal.modal .ap-total-summary-footer :is(.finova-card,.finova-card-body) { background: #142338 !important; background-color: #142338 !important; color: #f2f6ff !important; border-color: #3b526e !important; } @media (max-height: 550px) { #accountPayableModal.modal:has(#ap-modal-tab-content) > .modal-dialog {height: calc(100dvh - 12px) !important; margin: 6px auto !important;} } /* FINOVA 2026-11-06 — Invoice AP: light-mode white canvas matching Invoice AR. Presentation only; do not modify dark mode or transaction behavior. */ html:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark) body:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark-mode):not(.dark-theme) #accountPayableModal.modal .modal-content > .modal-body, html:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark) body:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark-mode):not(.dark-theme) #accountPayableModal.modal #ap-modal-tab-content, html:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark) body:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark-mode):not(.dark-theme) #accountPayableModal.modal #ap-invoice-details-pane, html:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark) body:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark-mode):not(.dark-theme) #accountPayableModal.modal #ap-invoice-details-pane > .p-4, html:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark) body:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark-mode):not(.dark-theme) #accountPayableModal.modal .ap-total-summary-footer { background: #fff !important; background-color: #fff !important; background-image: none !important; } /* FINOVA 2026-11-06 — AP summary light canvas and card: match AR. */ html:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark) body:not(.dark-mode):not(.dark-theme) #accountPayableModal.modal .modal-body .ap-total-summary-footer, html:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark) body:not(.dark-mode):not(.dark-theme) #accountPayableModal.modal .modal-body .ap-total-summary-footer.border-top.p-4 { background: #fff !important; background-color: #fff !important; background-image: none !important; border-color: #e5eaf1 !important; color: #243b58 !important; } html:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark) body:not(.dark-mode):not(.dark-theme) #accountPayableModal.modal .ap-total-summary-footer .finova-card, html:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark) body:not(.dark-mode):not(.dark-theme) #accountPayableModal.modal .ap-total-summary-footer .finova-card-body { background: #fff !important; background-color: #fff !important; background-image: none !important; color: #243b58 !important; border-color: #e5eaf1 !important; } html:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark) body:not(.dark-mode):not(.dark-theme) #accountPayableModal.modal .ap-total-summary-footer :is(span,strong,small,p,div) { color: #243b58 !important; -webkit-text-fill-color: #243b58 !important; } html:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark) body:not(.dark-mode):not(.dark-theme) #accountPayableModal.modal .ap-total-summary-footer hr {border-color:#e5eaf1 !important;} /* FINOVA AP — Invoice Details light theme aligned with Invoice AR. Scoped to AP Invoice Details only; preserves all behavior and dark theme. */ html:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark) body:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark-mode):not(.dark-theme) #accountPayableModal.modal:has(#ap-invoice-details-pane.active) .modal-content .modal-body .ap-total-summary-footer.border-top.p-4 { background: #fff !important; background-color: #fff !important; background-image: none !important; border-top: 1px solid #dee2e6 !important; color: #1f3a5f !important; box-shadow: none !important; padding: 16px 20px !important; } html:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark) body:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark-mode):not(.dark-theme) #accountPayableModal.modal:has(#ap-invoice-details-pane.active) .ap-total-summary-footer .finova-card, html:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark) body:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark-mode):not(.dark-theme) #accountPayableModal.modal:has(#ap-invoice-details-pane.active) .ap-total-summary-footer .finova-card-body { background: #fff !important; background-color: #fff !important; background-image: none !important; border-color: #eef0f3 !important; color: #1f3a5f !important; } html:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark) body:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark-mode):not(.dark-theme) #accountPayableModal.modal:has(#ap-invoice-details-pane.active) .ap-total-summary-footer .finova-card { width: 360px !important; max-width: 100% !important; border: 1px solid #eef0f3 !important; border-radius: 14px !important; box-shadow: 0 3px 10px rgba(15,23,42,.05) !important; } html:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark) body:not([data-finova-theme="dark"]):not([data-theme="dark"]):not([data-bs-theme="dark"]):not(.dark-mode):not(.dark-theme) #accountPayableModal.modal:has(#ap-invoice-details-pane.active) .ap-total-summary-footer :is(span,strong,small,p,div) { color: #1f3a5f !important; -webkit-text-fill-color: #1f3a5f !important; } /* FINOVA AP Invoice Details — explicit automatic light/dark theme. CSS only: no changes to business logic or JavaScript. */ :is(html[data-finova-theme="dark"],html[data-theme="dark"],html[data-bs-theme="dark"],html.dark) body #accountPayableModal.modal:has(#ap-invoice-details-pane.active) :is(#ap-invoice-details-pane,.ap-total-summary-footer), html body:is([data-finova-theme="dark"],[data-theme="dark"],[data-bs-theme="dark"],.dark-mode,.dark-theme) #accountPayableModal.modal:has(#ap-invoice-details-pane.active) :is(#ap-invoice-details-pane,.ap-total-summary-footer) { background: #192a40 !important; background-color: #192a40 !important; color: #f2f6ff !important; border-color: #3b526e !important; } :is(html[data-finova-theme="dark"],html[data-theme="dark"],html[data-bs-theme="dark"],html.dark) body #accountPayableModal.modal:has(#ap-invoice-details-pane.active) .ap-total-summary-footer :is(.finova-card,.finova-card-body), html body:is([data-finova-theme="dark"],[data-theme="dark"],[data-bs-theme="dark"],.dark-mode,.dark-theme) #accountPayableModal.modal:has(#ap-invoice-details-pane.active) .ap-total-summary-footer :is(.finova-card,.finova-card-body) { background: #142338 !important; background-color: #142338 !important; color: #f2f6ff !important; border-color: #3b526e !important; } :is(html[data-finova-theme="dark"],html[data-theme="dark"],html[data-bs-theme="dark"],html.dark) body #accountPayableModal.modal:has(#ap-invoice-details-pane.active) .ap-total-summary-footer :is(span,strong,small,p,div), html body:is([data-finova-theme="dark"],[data-theme="dark"],[data-bs-theme="dark"],.dark-mode,.dark-theme) #accountPayableModal.modal:has(#ap-invoice-details-pane.active) .ap-total-summary-footer :is(span,strong,small,p,div) { color: #f2f6ff !important; -webkit-text-fill-color: #f2f6ff !important; } /* Invoice AP - Lihat Pembayaran satu baris */ .ap-view-payment, .ap-view-payment a { display: inline-flex !important; align-items: center !important; gap: 5px; white-space: nowrap !important; flex-wrap: nowrap !important; width: max-content; max-width: none; vertical-align: middle; } /* FINOVA AP — payment link fits in the Amount / Status column (AR parity). */ .account-payable-table-card .ap-col-amount-status { width: 280px !important; min-width: 280px !important; } .account-payable-table-card .ap-cell-amount-status { min-width: 280px !important; } .account-payable-table-card .ap-cell-amount-status .ap-info-value:has(.ap-view-payment) { overflow: visible !important; overflow-wrap: normal !important; white-space: nowrap !important; } .account-payable-table-card .ap-cell-amount-status .ap-view-payment { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 4px !important; width: max-content !important; max-width: none !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; } .account-payable-table-card .ap-cell-amount-status .ap-view-payment i { flex-shrink: 0; margin-right: 0 !important; } /* FINOVA: consistent invoice dialog width across Add, Edit and View modes. Keep existing tab-specific content height and internal scrolling unchanged. */ #accountPayableModal > .modal-dialog.modal-xl { width: min(1140px, calc(100vw - 32px)) !important; max-width: 1140px !important; margin-left: auto !important; margin-right: auto !important; } /* FINOVA 2026-11-08: Show all invoice/tax/accounting rows without inner vertical scrolling. Only the main modal body may scroll when content exceeds the viewport. */ #accountPayableModal :is( #ap-invoice-details-pane .ap-invoice-detail-table-wrapper, #ap-tax-plus-pane .table-responsive, #ap-tax-minus-pane .table-responsive, #ap-accounting-preview-pane .ap-accounting-preview-scroll ) { height: auto !important; max-height: none !important; overflow-y: visible !important; overscroll-behavior-y: auto !important; } #accountPayableModal :is( #ap-invoice-details-pane .ap-invoice-detail-table-wrapper, #ap-tax-plus-pane .table-responsive, #ap-tax-minus-pane .table-responsive, #ap-accounting-preview-pane .ap-accounting-preview-scroll ) :is(tbody, table) { max-height: none !important; overflow-y: visible !important; }