/* --- MODAL OVERLAY AND CONTENT STYLES --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-content {
    background-color: #fff;
    padding: 2rem;
    border-radius: 0.75rem;
    max-width: 95%;
    width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Custom scrollbar for better UX */
.custom-scrollbar::-webkit-scrollbar { width: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* --- INVOICE STYLES --- */
.wrapper-invoice { display: flex; justify-content: center; }
.wrapper-invoice .invoice { height: auto; background: #fff; padding: 5vh; margin-top: 5vh; max-width: 110vh; width: 100%; box-sizing: border-box; border: 1px solid #dcdcdc; }
.wrapper-invoice .invoice .invoice-information { float: right; text-align: right; }
.wrapper-invoice .invoice .invoice-information b { color: "#0F172A"; }
.wrapper-invoice .invoice .invoice-information p { font-size: 2vh; color: gray; }
.wrapper-invoice .invoice .invoice-logo-brand h2 { text-transform: uppercase; font-family: "Inter", sans-serif; font-size: 2.9vh; color: "#0F172A"; }
.wrapper-invoice .invoice .invoice-logo-brand img { max-width: 100px; width: 100%; object-fit: fill; }
.wrapper-invoice .invoice .invoice-head { display: flex; margin-top: 8vh; }
.wrapper-invoice .invoice .invoice-head .head { width: 100%; box-sizing: border-box; }
.wrapper-invoice .invoice .invoice-head .client-info { text-align: left; }
.wrapper-invoice .invoice .invoice-head .client-info h2 { font-weight: 500; letter-spacing: 0.3px; font-size: 2vh; color: "#0F172A"; }
.wrapper-invoice .invoice .invoice-head .client-info p { font-size: 2vh; color: gray; }
.wrapper-invoice .invoice .invoice-head .client-data { text-align: right; }
.wrapper-invoice .invoice .invoice-head .client-data h2 { font-weight: 500; letter-spacing: 0.3px; font-size: 2vh; color: "#0F172A"; }
.wrapper-invoice .invoice .invoice-head .client-data p { font-size: 2vh; color: gray; }
.wrapper-invoice .invoice .invoice-body { margin-top: 8vh; }
.wrapper-invoice .invoice .invoice-body .table { border-collapse: collapse; width: 100%; }
.wrapper-invoice .invoice .invoice-body .table thead tr th { font-size: 2vh; border: 1px solid #dcdcdc; text-align: left; padding: 1vh; background-color: #eeeeee; }
.wrapper-invoice .invoice .invoice-body .table tbody tr td { font-size: 2vh; border: 1px solid #dcdcdc; text-align: left; padding: 1vh; background-color: #fff; }
.wrapper-invoice .invoice .invoice-body .table tbody tr td:nth-child(2) { text-align: right; }
.wrapper-invoice .invoice .invoice-body .flex-table { display: flex; }
.wrapper-invoice .invoice .invoice-body .flex-table .flex-column { width: 100%; box-sizing: border-box; }
.wrapper-invoice .invoice .invoice-body .flex-table .flex-column .table-subtotal { border-collapse: collapse; box-sizing: border-box; width: 100%; margin-top: 2vh; }
.wrapper-invoice .invoice .invoice-body .flex-table .flex-column .table-subtotal tbody tr td { font-size: 2vh; border-bottom: 1px solid #dcdcdc; text-align: left; padding: 1vh; background-color: #fff; }
.wrapper-invoice .invoice .invoice-body .flex-table .flex-column .table-subtotal tbody tr td:nth-child(2) { text-align: right; }
.wrapper-invoice .invoice .invoice-body .invoice-total-amount { margin-top: 1rem; }
.wrapper-invoice .invoice .invoice-body .invoice-total-amount p { font-weight: bold; color: "#0F172A"; text-align: right; font-size: 2vh; }
.wrapper-invoice .invoice .invoice-footer { margin-top: 4vh; }
.wrapper-invoice .invoice .invoice-footer p { font-size: 1.7vh; color: gray; }
.copyright { margin-top: 2rem; text-align: center; }
.copyright p { color: gray; font-size: 1.8vh; }