.invoice-template {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    /* remove the old 900px cap */
    background: var(--card-selection);
    display: flex;
    flex-direction: column;
    /* feels “about the same size” at 100% and scales at 75% */
    inline-size: clamp(720px, 64vw, 980px);
}

.invoice-header {
    margin: 2rem 2rem 0rem 2rem;
}

.invoiceBox {
    height: 60px;
    width: 50%;
    font-size: xx-large;
    font-weight: 520;
}

.logo-upload-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 140px;
    background-color: var(--border-lines);
    border: 2px dashed #bbb;
    border-radius: 8px;
    color: #555;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    overflow: hidden;
    position: relative;
}

.logo-upload-box:hover {
    background-color: #d3d3d3;
}

.logo-upload-box span {
    pointer-events: none;
}

.logo-delete-button {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: transparent;
    color: var(--delete-colour);
    cursor: pointer;
    display: none;
    z-index: 5;
    padding: 4px;
}

.logo-delete-button .delete-icon {
    fill: currentColor;
}

.logo-delete-button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--delete-colour);
    cursor: pointer;
    display: none;
    z-index: 5;
    padding: 0;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.logo-delete-button:hover {
    background-color: color-mix(in srgb, var(--delete-colour) 14%, transparent);
}

.logo-delete-button:active {
    transform: scale(0.92);
}

.logo-delete-button .delete-icon {
    fill: currentColor;
}

.logo-upload-box.has-logo .logo-delete-button {
    display: grid;
    place-items: center;
}

.addLogo {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.header-top {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
}

.header-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}


.from-details {
    display: grid;
    gap: 10px;
    --label-w: 3.5rem;
}

.from-details .fromDiv {
    display: grid;
    grid-template-columns: var(--label-w) minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
}

.from-details label {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    padding-right: 12px;
}

.from-details input {
    width: 100%;
    height: 40px;
    padding-left: 5px;
}

.billToHeader {
    margin-bottom: 10px;
    height: 28px;
}

.detailsHeader {
    margin-bottom: 10px;
    height: 28px;
}

.invoice-sendTo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-left: 2rem;
    margin-right: 2rem;
}

/* Mobile: stack Bill To then Details, inputs fill the row */
@media (max-width: 820px) {
    .invoice-sendTo {
        grid-template-columns: 1fr;
        /* Details goes underneath */
        gap: 1.25rem;
    }

    /* Use the same label column width for BOTH sections on mobile */
    .invoice-billTo,
    .invoice-meta {
        --label-w: clamp(7rem, 34vw, 9rem);
        /* left label gutter */
        gap: 10px;
    }

    /* Each row = [label | input expands] */
    .invoice-billTo .billToDiv,
    .invoice-meta .invoiceMetaDiv,
    .from-details .fromDiv {
        display: grid;
        grid-template-columns: var(--label-w) minmax(0, 1fr);
        align-items: center;
        column-gap: 12px;
    }

    /* Ensure controls actually stretch */
    .invoice-billTo input,
    .invoice-meta input,
    .from-details input {
        width: 100%;
    }

    /* Slightly tighter headings on mobile */
    .billToHeader,
    .detailsHeader {
        margin-top: 1rem;
        margin-bottom: .35rem;
    }
}

.invoice-meta input {
    width: 100%;
}

.invoice-billTo {
    display: grid;
    gap: 10px;
    --label-w: 3.5rem;
}

.invoice-billTo label {
    font-size: 14px;
}

.invoice-billTo input {
    width: 100%;
    height: 40px;
    padding-left: 5px;

}

.billToDiv {
    display: flex;
    gap: 10px;
}

.invoice-meta {
    display: grid;
    gap: 10px;
    height: 100%;
    --label-w: 6.8rem
}

.invoice-meta label {
    font-size: 14px;
}

.invoice-meta input {
    width: 100%;
    height: 40px;
    padding-left: 5px;
}

.invoiceMetaDiv {
    display: flex;
    gap: 10px;
}

/* keep both columns on the same grid, but with a slimmer label column */
.invoice-billTo .billToDiv,
.invoice-meta .invoiceMetaDiv {
    display: grid;
    grid-template-columns: var(--label-w) minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
}

/* LEFT-align label text (this is the big fix) */
.invoice-billTo label,
.invoice-meta label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* was flex-end */
    white-space: nowrap;
    padding-right: 12px;
}

.invoice-items {
    margin-top: 2rem;
    margin-left: 2rem;
    margin-right: 2rem;
    display: block;
}

/* Compact the black header bar */
.item-header {
    background: var(--template-colour);
    color: var(--template-header-text);
    height: 38px;
    display: grid;
    align-items: center;
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.item-header>div {
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 0.85rem;
    font-weight: 600;
}

.item-inputs textarea {
    font-size: 0.95rem;
}

.item-header,
.item-inputs {
    display: grid;
    grid-template-columns:
        2.2rem 2.2rem minmax(160px, 1fr) minmax(70px, 0.45fr) minmax(70px, 0.45fr) minmax(90px, 0.65fr);
    gap: 5px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;

}

.item-inputs {
    width: 100%;
    margin-top: 0;
    padding: 5px 0;
}

.item-inputs input {
    width: 100%;
    height: 40px;
    padding-left: 5px;
    font-size: 0.95rem;
    min-width: 0;
    box-sizing: border-box;
}

.amount-output {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-details {
    width: 71%;
    align-items: center;
    justify-content: center;
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    margin-left: 127px;
    padding-left: 5px;
    padding-top: 5px;
}

.item-description {
    width: 100%;
}

/* Hide the disabled delete button on the first item */
.delete-button[disabled] {
    visibility: hidden;
    pointer-events: none;
}

/* Odd even rows for items and details wrapper */

.newItemDiv {
    padding: 0;
    transition: background-color 120ms ease;
}

.newItemDiv.strip-odd,
.newItemDiv.strip-odd .item-inputs,
.newItemDiv.strip-odd .item-row {
    background: var(--row-odd);
}

.newItemDiv.strip-even,
.newItemDiv.strip-even .item-inputs,
.newItemDiv.strip-even .item-row {
    background: var(--template-row-even);
}

.newItem-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.newItem-Button {
    float: right;
    background-color: var(--download-button);
    color: white;
    border: none;
    height: 30px;
    width: 70px;
    border-radius: 10px;
}

.newItem-Button:hover {
    background-color: var(--download-hover);
}

.delete-button {
    border: none;
    background-color: transparent;
    border: none;
    background: transparent;
    color: crimson;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.delete-icon {
    fill: currentColor;
}

.item-inputs label {
    display: none;
}

.newItemLine {
    margin-top: 0;
    border: none;
    height: 1px;
    background: var(--template-line-colour);
    opacity: 0.45;
}

.terms {
    margin: 0 2rem 2rem 2rem;
}

.termsBox {
    resize: vertical;
    width: 100%;
    height: 3rem;
    padding-left: 5px;
    padding-top: 5px;
}

.invoice-currency {
    margin-right: 5px
}

@media (max-width: 1180px) {
    .invoice-adSpace {
        display: none;
    }

    .invoice-container {
        flex-direction: column;
    }

    .invoice-template {
        width: 100%;
    }

    .invoice-sidebar {
        width: 100%;
        margin-right: 2rem;
        overflow: hidden;
    }

    .invoice-container {
        padding-right: 2rem;
    }
}

/* Stack on smaller screens */
@media (max-width: 768px) {
    .invoice-container {
        flex-direction: column;
    }

    .newItemLine {
        display: none;
    }

    .mobile-custom-line {
        display: block;
        height: 1px;
        background-color: var(--muted-text-colour);
        width: 100%;
        margin: 1rem 0;
    }

    .invoice-template {
        width: 100%;
    }

    .invoice-adSpace {
        display: none;
    }

    .header-top,
    .header-details {
        grid-template-columns: 1fr;
    }

    .item-header {
        display: none;
    }

    .item-inputs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "tax delete"
            "taxbox delete"
            "desc desc"
            "descinput descinput"
            "qty rate"
            "qtyinput rateinput"
            "amountlabel amountlabel"
            "amount amount";
        gap: 0.6rem 1rem;
        padding: 15px;
        border: var(--border-colour) 2px solid;
        width: 100%;
        text-align: left;
    }

    .item-inputs .item-label {
        display: block;
        justify-self: start;
        text-align: left;
        font-weight: 700;
        color: var(--muted-text-colour);
    }

    .tax-label,
    .tax-input,
    .description-label,
    .description-input,
    .quantity-label,
    .quantity-input {
        justify-self: start;
        text-align: left;
    }

    .tax-label {
        grid-area: tax;
    }

    .tax-input {
        grid-area: taxbox;
        width: 44px !important;
        height: 44px !important;
    }

    .description-label {
        grid-area: desc;
    }

    .description-input {
        grid-area: descinput;
    }

    .quantity-label {
        grid-area: qty;
    }

    .quantity-input {
        grid-area: qtyinput;
    }

    .rate-label {
        grid-area: rate;
        justify-self: start;
        text-align: left;
    }

    .rate-input {
        grid-area: rateinput;
    }

    .amount-label {
        grid-area: amountlabel;
        justify-self: end !important;
        text-align: right;
    }

    .amount-output {
        grid-area: amount;
        justify-self: end !important;
        text-align: right;
        margin: 0;
    }

    .delete-button {
        grid-area: delete;
        justify-self: end;
        align-self: start;
    }
}

/* sidebar */

.invoice-sidebar {
    margin-right: 2rem;
}

.sidebar-line {
    width: 100%
}

.invoice-container {
    padding-right: 2rem;
}

/* footer */
.footer-inner {
    grid-template-columns: 1fr;
    gap: .75rem;
}

.footer-social {
    justify-content: flex-start;
}

/* Invoice subtotal section */

.subtotalContainer {
    margin-right: 2rem;
    margin-left: 2rem;
}

.invoice-subtotal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    float: right;
    justify-content: right;
    margin-right: 20px;
}

.subtotalText {
    display: grid;
    gap: 10px;
}

.subtotalTextAmount {
    float: right;
    text-align: end;
    display: grid;
    gap: 10px;
}

/* notes section of template */

.notes {
    margin: 0 2rem 0rem 2rem;
}


.additional-notes {
    height: 3rem;
    width: 100%;
    padding-left: 5px;
    padding-top: 5px;
}

/* When an image is present, contain it inside the box without distortion */
#imagePreview {
    display: block;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    object-fit: contain;
}

.item-checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* right-align and keep amount in view */
.item-amount {
    text-align: right;
    white-space: nowrap;
}