/* ========================================================== FINOVA ACCOUNTING SYSTEM MODULE : AGING PAYABLE VERSION : 4.1.0 FINAL HEADER & FILTER STANDARD : AGING RECEIVABLE ========================================================== */ /* ========================================================== PAGE ========================================================== */ .aging-payable-page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; } /* ========================================================== PAGE HEADER ========================================================== */ .aging-payable-page > .finova-page-header { width: 100%; margin-bottom: 8px !important; flex: 0 0 auto; box-sizing: border-box; } .aging-payable-page > .finova-page-header .finova-page-header-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .aging-payable-page > .finova-page-header .finova-page-header-right .btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; min-height: 38px; white-space: nowrap; } /* ========================================================== FILTER CARD ========================================================== */ .aging-payable-page > .aging-payable-filter-card { width: 100% !important; max-width: none !important; margin: 0 !important; flex: 0 0 auto; box-sizing: border-box; border-radius: 12px; } .aging-payable-filter-card > .finova-card-body { width: 100%; padding: 8px 20px !important; box-sizing: border-box; } .aging-payable-filter-card > .finova-card-body > .row { width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box; align-items: end !important; } .aging-payable-filter-card > .finova-card-body > .row > [class*="col-"] { min-width: 0; margin: 0; box-sizing: border-box; } /* ========================================================== FILTER LABEL ========================================================== */ .aging-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; } /* ========================================================== FILTER CONTROL ========================================================== */ .aging-payable-filter-card .form-control, .aging-payable-filter-card .form-select { width: 100%; height: 46px !important; min-height: 46px !important; } /* ========================================================== INPUT GROUP ========================================================== */ .aging-payable-filter-card .input-group { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; height: 46px !important; } /* ========================================================== KEYWORD ========================================================== */ .aging-payable-filter-card #aging-payable-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 ========================================================== */ .aging-payable-filter-card #btn-find-aging-payable { 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 ========================================================== */ .aging-payable-table-card { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; } .aging-payable-table-card .finova-card-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0 !important; overflow: hidden; } .aging-payable-table-card .finova-table-container { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; overflow: hidden; } .aging-payable-table-card .table-responsive { display: block; flex: 1 1 auto; min-height: 0; width: 100%; overflow-x: auto; overflow-y: auto; } /* ========================================================== TABLE 20 COLUMNS ========================================================== */ .aging-payable-table-card .finova-table { width: 100%; /* ====================================================== OLD : 2675px NEW : + PO NO 160px ====================================================== */ min-width: 2835px; margin-bottom: 0; vertical-align: middle; } .aging-payable-table-card .finova-table thead th { font-weight: 700 !important; color: #111827 !important; white-space: nowrap; vertical-align: middle; } .aging-payable-table-card .finova-table tbody td { font-weight: 400 !important; color: #1F2937 !important; vertical-align: middle; } /* ========================================================== COLUMN WIDTHS ========================================================== */ /* ========================================================== NO ========================================================== */ .aging-col-no { width: 55px; min-width: 55px; max-width: 55px; } /* ========================================================== VENDOR ========================================================== */ .aging-col-vendor { width: 220px; min-width: 220px; } /* ========================================================== INVOICE NO ========================================================== */ .aging-col-invoice { width: 160px; min-width: 160px; } /* ========================================================== PO NO ========================================================== */ .aging-col-po { width: 160px; min-width: 160px; } /* ========================================================== DESCRIPTION ========================================================== */ .aging-col-description { width: 280px; min-width: 280px; } /* ========================================================== ACCOUNT HOLDER ========================================================== */ .aging-col-account-holder { width: 190px; min-width: 190px; } /* ========================================================== BANK NAME ========================================================== */ .aging-col-bank-name { width: 170px; min-width: 170px; } /* ========================================================== BANK ACCOUNT ========================================================== */ .aging-col-bank-account { width: 180px; min-width: 180px; } /* ========================================================== DATE ========================================================== */ .aging-col-date { width: 120px; min-width: 120px; } /* ========================================================== AMOUNT ========================================================== */ .aging-col-amount { width: 125px; min-width: 125px; } /* ========================================================== WIDE AMOUNT ========================================================== */ .aging-col-amount-wide { width: 150px; min-width: 150px; } /* ========================================================== DESCRIPTION ========================================================== */ .aging-payable-description { white-space: normal !important; word-break: break-word; line-height: 1.45; } /* ========================================================== AMOUNT ALIGNMENT ========================================================== */ .aging-payable-table-card .finova-table-number { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; } /* ========================================================== OVERDUE ========================================================== */ .aging-payable-overdue { font-weight: 600 !important; } /* ========================================================== TABLE FOOTER ========================================================== */ .aging-payable-table-card tfoot th, .aging-payable-table-card tfoot td { position: sticky; bottom: 0; z-index: 4; background: #F8FAFC; font-size: 12px; font-weight: 700; white-space: nowrap; vertical-align: middle; } /* ========================================================== TOTAL LABEL ========================================================== */ .aging-payable-table-card tfoot th[colspan] { text-align: right !important; } /* ========================================================== PAGINATION ========================================================== */ .aging-payable-table-card .finova-pagination-wrapper { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; width: 100%; margin-top: auto; } .aging-payable-table-card .finova-pagination-left { display: flex; align-items: center; gap: 8px; } .aging-payable-table-card .finova-pagination-label { display: inline-flex; align-items: center; white-space: nowrap; } .aging-payable-table-card .finova-pagination-total { display: inline-flex; align-items: center; min-width: 18px; margin-left: 2px; } .aging-payable-table-card .finova-pagination-info { display: inline-flex; align-items: center; margin-left: auto; white-space: nowrap; } .aging-payable-table-card .finova-pagination-input { width: 42px; min-width: 42px; text-align: center; } /* ========================================================== PAGINATION BUTTON ========================================================== */ .aging-payable-table-card .finova-pagination-btn { display: inline-flex; align-items: center; justify-content: center; } /* ========================================================== SCROLLBAR ========================================================== */ .aging-payable-table-card .table-responsive { scrollbar-width: thin; } /* ========================================================== WEBKIT HORIZONTAL SCROLLBAR ========================================================== */ .aging-payable-table-card .table-responsive::-webkit-scrollbar { width: 8px; height: 8px; } .aging-payable-table-card .table-responsive::-webkit-scrollbar-track { background: #F1F5F9; } .aging-payable-table-card .table-responsive::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; } .aging-payable-table-card .table-responsive::-webkit-scrollbar-thumb:hover { background: #94A3B8; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 1199.98px) { .aging-payable-table-card .finova-table { min-width: 2835px; } } @media (max-width: 991.98px) { /* ====================================================== HEADER ====================================================== */ .aging-payable-page > .finova-page-header { align-items: flex-start; } .aging-payable-page > .finova-page-header .finova-page-header-right { flex-wrap: wrap; justify-content: flex-start; } /* ====================================================== FILTER ====================================================== */ .aging-payable-filter-card > .finova-card-body { padding: 10px 14px !important; } /* ====================================================== TABLE ====================================================== */ .aging-payable-table-card .finova-table { min-width: 2835px; } } @media (max-width: 767.98px) { /* ====================================================== HEADER BUTTON ====================================================== */ .aging-payable-page > .finova-page-header .finova-page-header-right { width: 100%; } /* ====================================================== PAGINATION ====================================================== */ .aging-payable-table-card .finova-pagination-wrapper { flex-wrap: wrap; gap: 8px; } .aging-payable-table-card .finova-pagination-info { width: 100%; margin-left: 0; justify-content: flex-end; } }