/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Set base font for the entire page */
body { 
    font-family: 'Inter', sans-serif; 
}

/* Styles for the invoice preview box */
.invoice-box { 
    max-width: 800px; 
    margin: auto; 
    padding: 30px; 
    border: 1px solid #eee; 
    box-shadow: 0 0 10px rgba(0, 0, 0, .15); 
    font-size: 16px; 
    line-height: 24px; 
    color: #555; 
}

/* Base table styles */
.invoice-box table { 
    width: 100%; 
    line-height: inherit; 
    text-align: left; 
    border-collapse: collapse; 
}

.invoice-box table td { 
    padding: 5px; 
    vertical-align: top; 
}

/* Spacing for top and information sections */
.invoice-box table tr.top table td { 
    padding-bottom: 20px; 
}

.invoice-box table tr.information table td { 
    padding-bottom: 40px; 
}

/* Style for table headings */
.invoice-box table tr.heading td { 
    background: #eee; 
    border-bottom: 1px solid #ddd; 
    font-weight: bold; 
}

/* Style for individual item rows */
.invoice-box table tr.item td { 
    border-bottom: 1px solid #eee; 
}

.invoice-box table tr.item.last td { 
    border-bottom: none; 
}

/* New calculation section styles */
.calculation-section {
    width: 100%;
    margin-left: auto;
    max-width: 300px;
    padding: 10px 0;
    margin-top: 20px;
}

.calculation-section > div {
    padding: 3px 0;
    display: flex;
    justify-content: space-between;
}

.calculation-section > div:last-child {
    border-top: 1px solid #eee;
    padding-top: 8px;
    margin-top: 8px;
}

/* Responsive styles for small screens */
@media only screen and (max-width: 600px) {
    .invoice-box table tr.top table td, 
    .invoice-box table tr.information table td { 
        width: 100%; 
        display: block; 
        text-align: center; 
    }
    
    .calculation-section {
        max-width: 100%;
        margin-left: 0;
    }
}

/* Hide arrows from number input fields */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] { 
    -moz-appearance: textfield; 
}

/* Animation for the history side panel */
#history-panel { 
    transition: transform 0.3s ease-in-out; 
}