/* ===================================================================
   Base Styles
   =================================================================== */
:root {
    --hi2025-bg-color: #FFFFFF;
    --hi2025-font-color: #333333;
    --hi2025-font-family: Arial, sans-serif;
    --hi2025-font-size: 14px;
    --hi2025-border-color: #e0e0e0;
    --hi2025-border-thickness: 1px;
}

#hi2025-invoice-app { 
    background: var(--hi2025-bg-color); 
    color: var(--hi2025-font-color); 
    font-family: var(--hi2025-font-family); 
    font-size: var(--hi2025-font-size); 
    border-style: solid; 
    border-color: var(--hi2025-border-color); 
    border-width: var(--hi2025-border-thickness); 
    border-radius: 5px; 
    max-width: 100%; 
    margin: 20px auto; 
}

#hi2025-invoice-app *, #hi2025-invoice-app *:before, #hi2025-invoice-app *:after { 
    box-sizing: border-box; 
}

#hi2025-invoice-paper { 
    padding: 25px; 
    background: #fff; 
}

#hi2025-invoice-app .hi2025-main-title { 
    text-align: center; 
    font-size: 2.5em; 
    font-weight: bold; 
    color: #333; 
    margin-bottom: 30px; 
    letter-spacing: 2px; 
}

#hi2025-invoice-app .hi2025-section { 
    padding: 15px; 
    margin-bottom: 20px; 
    border-style: solid; 
    border-color: var(--hi2025-border-color); 
    border-width: var(--hi2025-border-thickness); 
    border-radius: 4px; 
}

#hi2025-invoice-app .hi2025-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 30px; 
}

#hi2025-invoice-app h3 { 
    margin-top: 0; 
    margin-bottom: 15px; 
}

#hi2025-invoice-app label { 
    display: block; 
    margin-bottom: 5px; 
    font-weight: bold; 
}

#hi2025-invoice-app input[type="text"], 
#hi2025-invoice-app input[type="number"], 
#hi2025-invoice-app select, 
#hi2025-invoice-app textarea { 
    width: 100%; 
    padding: 8px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
}

#hi2025-invoice-app input[type="date"] { 
    position: relative; 
    padding: 7px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    min-height: 38px; 
}

#hi2025-invoice-app textarea { 
    min-height: 80px; 
    resize: vertical; 
}

#hi2025-invoice-app .hi2025-form-row { 
    display: flex; 
    align-items: baseline; 
    gap: 15px; 
    margin-bottom: 8px; 
    padding-bottom: 8px; 
    border-bottom: 1px solid #e53935; 
}

#hi2025-invoice-app .hi2025-form-row label { 
    flex-basis: 110px; 
    flex-shrink: 0; 
    margin-bottom: 0; 
    text-align: left; 
    font-weight: bold; 
}

#hi2025-invoice-app .hi2025-form-row input, 
#hi2025-invoice-app .hi2025-form-row select { 
    flex-grow: 1; 
    border: none; 
    padding: 2px 0; 
    background: transparent; 
}

/* For responsive tables, wrap the table in this div. Allows horizontal scroll on desktop if needed. */
.hi2025-table-wrapper {
    overflow-x: auto;
    width: 100%;
}

#hi2025-invoice-app .hi2025-items-table { 
    width: 100%; 
    border-collapse: collapse; 
    min-width: 600px;
}

#hi2025-invoice-app .hi2025-items-table th, 
#hi2025-invoice-app .hi2025-items-table td { 
    padding: 10px; 
    text-align: left; 
    border-bottom: 1px solid #e0e0e0; 
}

#hi2025-invoice-app .hi2025-items-table th { 
    background-color: #f5f5f5; 
}

#hi2025-invoice-app .hi2025-payment-option { 
    display: flex; 
    align-items: center; 
    margin-bottom: 10px; 
}

#hi2025-invoice-app .hi2025-payment-option input[type="radio"] { 
    margin-right: 10px; 
    width: auto; 
}

#hi2025-invoice-app .hi2025-payment-details-wrapper { 
    margin-top: 10px; 
}

#hi2025-invoice-app .hi2025-totals table { 
    width: 100%; 
    text-align: right; 
}

#hi2025-invoice-app .hi2025-totals td { 
    padding: 5px 8px; 
    vertical-align: middle; 
}

#hi2025-invoice-app .hi2025-totals .hi2025-input-cell input[type="number"] { 
    width: 70px; 
    text-align: right; 
    margin-right: 5px; 
}

#hi2025-invoice-app .hi2025-totals .hi2025-input-cell select { 
    width: auto; 
    padding: 8px 4px; 
    margin-left: 5px; 
}

#hi2025-invoice-app .hi2025-calculated-amount { 
    display: inline-block; 
    min-width: 80px; 
    text-align: right; 
    color: #555; 
    font-size: 0.9em; 
    padding-left: 5px; 
}

#hi2025-invoice-app .hi2025-total-row { 
    font-size: 1.2em; 
    font-weight: bold; 
    border-top: 2px solid #333; 
}

#hi2025-invoice-app .hi2025-total-row td { 
    padding-top: 10px; 
}

#hi2025-invoice-app .hi2025-amount-words-section { 
    padding: 0 15px 15px; 
}

#hi2025-invoice-app .hi2025-amount-words { 
    width: 100%; 
    text-align: right; 
    padding: 10px; 
    background-color: #f5f5f5; 
    border: 1px solid #e0e0e0; 
    border-radius: 4px; 
    font-weight: bold; 
    font-size: 0.95em; 
}

#hi2025-invoice-app .hi2025-footer-actions { 
    text-align: right; 
    padding: 20px; 
}

#hi2025-invoice-app .button { 
    display: inline-block; 
    padding: 10px 15px; /* Increased padding for easier tapping */
    cursor: pointer; 
    border: 1px solid; 
    border-radius: 3px;
    font-size: 1em;
    line-height: 1.5; 
}

#hi2025-invoice-app .button-primary { 
    background: #5e35b1; 
    border-color: #4527a0; 
    color: #fff; 
}

#hi2025-invoice-app .hi2025-add-item-btn { 
    margin-top: 15px; 
}


/* ===================================================================
   Print Styles
   =================================================================== */
.hi2025-print-only { display: none; }
.hi2025-is-printing .hi2025-screen-only { display: none !important; }
.hi2025-is-printing .hi2025-print-only { display: block !important; }
.hi2025-is-printing .hi2025-totals .hi2025-print-text-combined { display: block; width: 100%; text-align: right; padding: 5px 8px; }
.hi2025-print-text { display: block; width: 100%; padding: 8px; min-height: 38px; white-space: pre-wrap; word-wrap: break-word; }
.hi2025-is-printing .hi2025-form-row .hi2025-print-text { padding: 2px 0; min-height: auto; white-space: nowrap; }
.hi2025-is-printing .hi2025-items-table .hi2025-print-text { display: block; padding: 0; min-height: auto; }
.hi2025-is-printing .hi2025-items-table td:nth-child(2), .hi2025-is-printing .hi2025-items-table td:nth-child(3) { text-align: center; }
.hi2025-is-printing .hi2025-no-print { display: none !important; }


/* ===================================================================
   Responsive Styles
   =================================================================== */
/* For tablets and mobile phones (screens smaller than 768px) */
@media (max-width: 768px) {
    /* --- General Layout --- */
    #hi2025-invoice-app {
        margin: 0;
        border: none;
    }
    #hi2025-invoice-paper {
        padding: 15px;
    }
    #hi2025-invoice-app .hi2025-main-title {
        font-size: 2em;
        margin-bottom: 20px;
    }

    /* --- Grid --- */
    #hi2025-invoice-app .hi2025-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* --- Form Rows --- */
    #hi2025-invoice-app .hi2025-form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        border: none;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #eee;
    }
    #hi2025-invoice-app .hi2025-form-row label {
        flex-basis: auto;
        margin-bottom: 5px;
    }
    #hi2025-invoice-app .hi2025-form-row input, 
    #hi2025-invoice-app .hi2025-form-row select {
        padding: 8px;
        border: 1px solid #ddd;
        width: 100%;
    }

    /* --- Responsive Items Table (Card Layout) --- */
    .hi2025-table-wrapper {
        overflow-x: hidden; /* Prevent scrolling for the card layout */
    }
    #hi2025-invoice-app .hi2025-items-table {
        min-width: 0; /* Override desktop min-width */
    }
    #hi2025-invoice-app .hi2025-items-table thead {
        display: none; /* Hide the table header */
    }
    #hi2025-invoice-app .hi2025-items-table tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid var(--hi2025-border-color);
        border-radius: 4px;
        padding: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    #hi2025-invoice-app .hi2025-items-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    #hi2025-invoice-app .hi2025-items-table tr td:last-child {
        border-bottom: none;
    }
    /* Add labels using the data-label attribute from the HTML */
    #hi2025-invoice-app .hi2025-items-table td:before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
        margin-right: 15px;
        color: #333;
    }
    /* Style inputs within the mobile table */
    #hi2025-invoice-app .hi2025-items-table td input,
    #hi2025-invoice-app .hi2025-items-table td textarea,
    #hi2025-invoice-app .hi2025-items-table td span {
        width: 55%; /* Adjust width to provide enough space for label */
        text-align: right;
    }
    #hi2025-invoice-app .hi2025-items-table td textarea {
       min-height: 60px;
    }

    /* --- Totals & Footer --- */
    #hi2025-invoice-app .hi2025-totals table,
    #hi2025-invoice-app .hi2025-amount-words {
        text-align: left;
    }
    #hi2025-invoice-app .hi2025-totals td {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
    }
     #hi2025-invoice-app .hi2025-totals td:last-child {
        text-align: right;
    }
    #hi2025-invoice-app .hi2025-footer-actions {
        text-align: center;
        padding: 20px 0 10px;
    }
    #hi2025-invoice-app .hi2025-footer-actions .button {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
    #hi2025-invoice-app .hi2025-footer-actions .button:last-child {
        margin-bottom: 0;
    }
}

/* ===================================================================
   A4 Force Styles for PDF Generation
   - These rules override responsive styles to ensure the PDF
     always renders in a desktop/A4 format, even on mobile.
   =================================================================== */
.hi2025-force-a4 {
    width: 210mm; /* A4 width */
    max-width: 210mm !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.hi2025-force-a4 #hi2025-invoice-paper {
    padding: 20px !important;
}

/* Force two-column grid */
.hi2025-force-a4 .hi2025-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
}

/* Force desktop form rows */
.hi2025-force-a4 .hi2025-form-row {
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 15px !important;
    border-bottom: 1px solid #e53935 !important;
}
.hi2025-force-a4 .hi2025-form-row label {
    flex-basis: 110px !important;
    margin-bottom: 0 !important;
}
.hi2025-force-a4 .hi2025-form-row input,
.hi2025-force-a4 .hi2025-form-row select {
    border: none !important;
    padding: 2px 0 !important;
}

/* --- Force the Desktop Table Layout --- */
.hi2025-force-a4 .hi2025-items-table {
    min-width: 600px !important; /* Ensure table has its desktop width */
}

/* Re-show the header */
.hi2025-force-a4 .hi2025-items-table thead {
    display: table-header-group !important;
}

/* Revert rows from "cards" to actual table rows */
.hi2025-force-a4 .hi2025-items-table tr {
    display: table-row !important;
    margin-bottom: 0 !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Revert cells from stacked items to table cells */
.hi2025-force-a4 .hi2025-items-table td {
    display: table-cell !important;
    text-align: left !important;
    padding: 10px !important;
    border-bottom: 1px solid #e0e0e0 !important;
    vertical-align: middle !important;
}

/* Hide the mobile data-label */
.hi2025-force-a4 .hi2025-items-table td::before {
    content: none !important;
}

/* Reset input/textarea widths inside the table */
.hi2025-force-a4 .hi2025-items-table td input,
.hi2025-force-a4 .hi2025-items-table td textarea {
    width: 100% !important;
}