*{margin:0;padding:0;font-family:Inter,sans-serif;font-size:16px}#navBar{color:#1e3a5f;background-color:#fff;justify-content:space-between;align-items:center;padding:10px 20px;display:flex;box-shadow:0 2px 2px #a0a0a0}#logo{justify-content:center;align-items:center;column-gap:10px;display:flex}#logo i,#logo p{font-size:16px;font-weight:700}#addButton{color:#fff;cursor:pointer;background-color:#1e3a5f;border:none;border-radius:.4rem;justify-content:center;align-items:center;column-gap:10px;padding:8px 10px;display:flex}#addButton span,#addButton i{font-size:10px}#totalInvoice{background-color:#f4f6f9;justify-content:center;align-items:center;column-gap:20px;padding:20px;display:flex}.totalInvoiceContainer{color:#000;background-color:#fff;border-radius:.5rem;flex-direction:column;justify-content:center;row-gap:5px;width:33%;height:auto;padding:20px;display:flex;box-shadow:0 2px 4px #a0a0a0}.totalInvoiceContainer .title,.fromStatus{color:#1f2937;font-size:14px;font-weight:400}.totalInvoiceContainer .fromStatus{font-size:10px}#box1 .fromStatus{color:#22c55e}#box2 .fromStatus{color:#ef4444}.totalInvoiceContainer .amount{color:#1e3a5f;font-size:22px;font-weight:700}#invoiceList{background-color:#f4f6f9;padding:20px}.table-wrap{background-color:#fff;border:1px solid #e5e7eb;border-radius:.75rem;overflow:hidden;box-shadow:0 2px 4px #a0a0a0}#invoiceTable{border-collapse:collapse;table-layout:fixed;width:100%}#invoiceTable thead tr{border-bottom:1px solid #e5e7eb}.headColumn{text-align:left;color:#374151;padding:10px 12px;font-size:14px;font-weight:600}#invoiceTable tbody tr{border-bottom:1px solid #e5e7eb;transition:background .12s}#invoiceTable tbody tr:last-child{border-bottom:none}#invoiceTable tbody tr:hover{background-color:#f4f5f6}#invoiceTable tbody td{color:#374151;vertical-align:middle;padding:8px 10px;font-size:12px}.invNo{color:#1f2937;font-weight:600}#invoiceAmount strong{font-size:12px}.badge{border-radius:.7rem;padding:4px 10px;font-size:10px;font-weight:600;display:inline-block}.badge.paid{color:#166534;background-color:#dcfce7}.badge.unpaid{color:#991b1b;background-color:#fee2e2}.actions{align-items:center;gap:16px;display:flex}.actions i{cursor:pointer;color:#9ca3af;font-size:12px;transition:color .15s}.actions .fa-eye:hover{color:#3b82f6}.actions .fa-download:hover{color:#22c55e}.actions .fa-trash-can{color:#ef4444}.empty{color:#9ca3af;flex-direction:column;align-items:center;gap:10px;padding:48px;font-size:14px;display:flex}.empty i{font-size:24px}#newInvoicePage{background-color:#f4f6f9;flex-direction:column;align-items:center;min-height:100vh;padding-bottom:30px;display:flex}#newInvoiceHeader{background-color:#fff;width:100%;height:auto;padding:10px;box-shadow:0 2px 2px #e9e9e9}#newInvoiceHeader button{background-color:#0000;border:none;border-radius:.4rem;outline:none;justify-content:center;align-items:center;column-gap:15px;margin-left:30px;padding:8px;display:flex}#newInvoiceHeader button i{color:#1e3a5f;font-size:14px}#newInvoiceHeader button span{color:#1e3a5f;font-size:14px;font-weight:500}#newInvoiceHeader button:hover{background-color:#e9e9e9}#invoiceForm{background-color:#fff;border-radius:.5rem;flex-direction:column;justify-content:center;align-items:center;width:90%;height:auto;margin-top:40px;padding:20px;display:flex;box-shadow:0 2px 2px #dfdfdf}.formSection{border-bottom:1px solid #dcdcdc;flex-direction:column;justify-content:center;row-gap:10px;width:100%;padding-top:20px;padding-bottom:20px;display:flex}.sectionTitle{text-align:left;color:#1e3a5f;margin-bottom:20px;font-size:16px;font-weight:700}.formGroup{text-align:left;flex-direction:column;justify-content:center;row-gap:4px;width:100%;display:flex}.formGroup label{color:#000;font-size:14px}.formGroup input,.formGroup textarea{color:#222;background-color:#f2f2f2;border:none;border-radius:.3rem;outline:none;padding:10px;font-size:12px}.formRow{justify-content:space-between;align-items:center;column-gap:20px;display:flex}.formGroup select,.formGroup select option{color:#222;background-color:#fff;border:none;border-radius:.3rem;outline:none;padding:10px 10px 10px 5px;font-size:12px;box-shadow:0 2px 2px #dfdfdf}.sectionHeader{justify-content:space-between;align-items:center;display:flex}.addItemBtn{color:#1e3a5f;background-color:#fff;border:1px solid #1e3a5f;border-radius:.3rem;justify-content:space-between;align-items:center;column-gap:10px;padding:6px 8px;font-size:12px;display:flex}.addItemBtn i{font-size:12px}.itemCard{background-color:#fff;border:1px solid #d8d8d8;border-radius:.4rem;flex-direction:column;row-gap:10px;margin-bottom:8px;padding:10px;display:flex}.itemCardHeader{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.itemCardHeader span{color:#4f4f4f;font-size:14px}.itemCardHeader i{color:red;font-size:14px}.itemCard .formRow{margin-top:6px}.totalsSection{flex-direction:column;row-gap:20px;margin-top:30px;display:flex}.totalRow{color:gray;justify-content:space-between;align-items:center;display:flex}.totalRow span{font-size:14px}.totalDue span{color:#1e3a5f;font-size:16px;font-weight:700}.formButtons{justify-content:space-between;align-items:center;width:100%;display:flex}.saveBtn,.downloadBtn{border:none;border-radius:.4rem;justify-content:center;align-items:center;column-gap:10px;width:49%;padding:7px 0;display:flex}.saveBtn i,.saveBtn span,.downloadBtn i,.downloadBtn span{font-size:12px}.saveBtn{color:#fff;background-color:#1e3a5f}.downloadBtn{color:#1e3a5f;background-color:#fff;border:1px solid #1e3a5f}#invoicePreview{color:#1f2937;background:#fff;width:86%;min-height:297mm;margin-top:40px;padding:40px;font-size:12px}.previewHeader{justify-content:space-between;align-items:flex-start;margin-bottom:20px;display:flex}.previewTitle{color:#1e3a5f;font-size:28px;font-weight:700}.previewInvNo{color:#6b7280;margin-top:4px;font-size:12px}.previewCompany{text-align:right;color:#374151;font-size:11px;line-height:1.6}.previewCompanyName{font-size:13px;font-weight:700}.previewDivider{border:none;border-top:1px solid #e5e7eb;margin:16px 0}.previewBillRow{justify-content:space-between;margin-bottom:24px;display:flex}.previewBillLabel{color:#6b7280;margin-bottom:4px;font-size:16px;font-weight:600}.previewClientName{margin-bottom:2px;font-size:14px;font-weight:700}.previewClientEmail,.previewClientAddress{margin-bottom:2px;font-size:12px;font-weight:500}.previewDates{text-align:right;font-size:11px;line-height:1.8}.previewDates p,.previewDates span{color:#6b7280;font-size:14px}.previewTable{border-collapse:collapse;width:100%;margin-bottom:20px}.previewTable thead tr{border-bottom:2px solid #1e3a5f}.previewTable th{text-align:left;color:#1e3a5f;padding:8px 10px;font-size:12px;font-weight:600}.previewTable td{border-bottom:1px solid #f3f4f6;padding:8px 10px;font-size:12px}.previewTotals{flex-direction:column;align-items:flex-end;gap:6px;margin-bottom:20px;display:flex}.previewTotalRow{color:#374151;gap:40px;display:flex}.previewTotalRow span{font-size:14px}.previewTotalDue{color:#1e3a5f;border-top:2px solid #1e3a5f;margin-top:4px;padding-top:6px;font-weight:700}.previewNotes{color:#6b7280;margin-bottom:4px;font-size:12px}.previewPayment{color:#374151;margin-bottom:8px;font-size:12px}.previewThankYou{text-align:center;color:#9ca3af;margin-top:16px;font-size:12px}*{margin:0;padding:0}body{background-color:#f4f6f9;height:100vh}