/**
 * Receipt maker — Items table UI (optional).
 * Scope: .rm-maker .rm-items-block.rm-items-ui-v2 only.
 * Remove the stylesheet link from receipt-maker.blade.php to revert to receipt_maker_1.css items styling.
 */

.rm-maker .rm-items-block.rm-items-ui-v2 {
    --rm-items-v2-bg: var(--rm-card, #ffffff);
    --rm-items-v2-head: var(--rm-surface-neutral, #f5f5f5);
    --rm-items-v2-border: var(--rm-border, #e2e8f0);
    --rm-items-v2-text: var(--rm-text, #151515);
    --rm-items-v2-placeholder: var(--rm-field-placeholder, rgba(0, 0, 0, 0.5));
    --rm-items-v2-muted: var(--rm-muted, #535353);
    --rm-items-v2-input-bg: var(--rm-input, #ffffff);
    --rm-items-v2-col-sr: 56px;
    --rm-items-v2-item-pad: 14px;
    /* Sr | Item | Qty | Rate | Tax name | Tax % | Amount */
    --rm-items-v2-grid: var(--rm-items-v2-col-sr) minmax(0, 2fr) minmax(0, 0.78fr) minmax(0, 0.78fr) minmax(0, 0.78fr) minmax(0, 0.78fr) minmax(0, 0.95fr);
}

@media (prefers-color-scheme: dark) {
    .rm-maker .rm-items-block.rm-items-ui-v2 {
        --rm-items-v2-bg: #141820;
        --rm-items-v2-head: #444;
        --rm-items-v2-border: rgba(255, 255, 255, 0.2);
        --rm-items-v2-text: #ffffff;
        --rm-items-v2-placeholder: rgba(255, 255, 255, 0.5);
        --rm-items-v2-muted: rgba(255, 255, 255, 0.5);
        --rm-items-v2-input-bg: #0f1218;
    }

    .rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table textarea,
    .rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table .rm-item-desc textarea {
        background: transparent !important;
    }

    .rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table input:placeholder-shown,
    .rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table textarea:placeholder-shown {
        color: rgba(255, 255, 255, 0.5) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
    }

    .rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table .rm-item-desc > .custom_span {
        color: rgba(255, 255, 255, 0.5) !important;
    }
}

@media (prefers-color-scheme: light) {
    .rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table input:placeholder-shown,
    .rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table textarea:placeholder-shown {
        color: rgba(0, 0, 0, 0.5) !important;
        -webkit-text-fill-color: rgba(0, 0, 0, 0.5) !important;
    }

    .rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table .rm-item-desc > .custom_span {
        color: rgba(0, 0, 0, 0.5) !important;
    }
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-section-title {
    color: var(--rm-items-v2-text);
    font-weight: 600;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-scroll {
    overflow: visible;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-scroll.table-responsive {
    overflow-x: visible;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table {
    --rm-items-grid: var(--rm-items-v2-grid);
    --rm-items-min-width: 0;
    background: transparent;
    min-width: 0;
    width: 100%;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tr {
    column-gap: 0;
    width: 100%;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table thead tr {
    background: var(--rm-items-v2-head);
    border-radius: 0;
    padding: 0;
    min-height: 35px;
    align-items: stretch;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table thead th {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    color: var(--rm-items-v2-text);
    font-size: 14px;
    font-weight: 600;
    border: 0;
    border-right: 1px solid var(--rm-items-v2-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    align-self: stretch;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table thead th:last-child {
    border-right: 0;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table thead th:nth-child(2) {
    justify-content: flex-start;
    text-align: left;
    padding-left:5px;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table thead th:nth-child(n + 3) {
    justify-content: flex-end;
    text-align: right;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table thead th:first-child {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--rm-items-v2-col-sr);
    width: var(--rm-items-v2-col-sr);
    max-width: var(--rm-items-v2-col-sr);
    padding: 12px 2px 12px 16px;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    border-right: 0 !important;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td:nth-of-type(1).product_count,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table .product_count {
    display: flex !important;
    align-items: flex-start;
    justify-content: start;
    flex: 0 0 var(--rm-items-v2-col-sr);
    width: var(--rm-items-v2-col-sr);
    max-width: var(--rm-items-v2-col-sr);
    color: var(--rm-items-v2-text);
    font-weight: 600;
    font-size: 12px;
    padding: 16px 4px 12px 16px;
    text-align: center;
    border-right: 0 !important;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody tr {
    padding: 0;
    align-items: stretch;
    border-top: 1px solid var(--rm-items-v2-border);
    background: transparent;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px;
    border: 0;
    border-right: 1px solid var(--rm-items-v2-border);
    min-height: 68px;
    min-width: 0;
    align-self: stretch;
    text-align: left;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td:nth-of-type(2) {
    justify-content: flex-start;
    text-align: left;
    padding-left: var(--rm-items-v2-item-pad);
    padding-right: 10px;
    padding-left: 5px;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td:nth-of-type(n + 3) {
    justify-content: start;
    align-items: start;
    text-align: right; 
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td:nth-of-type(7) {
    padding-right: 12px;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td:last-child {
    border-right: 0;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td:nth-of-type(2),
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td:nth-of-type(2) > div {
    display: block !important;
    width: 100%;
    min-width: 0;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td:nth-of-type(2) .mb_2,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td:nth-of-type(2) .color_black {
    grid-column: unset !important;
    grid-row: unset !important;
    width: 100%;
    display: block !important;
    margin-bottom: 8px;
    text-align: left !important;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td:nth-of-type(2) .color_light,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table .rm-item-desc {
    grid-column: unset !important;
    grid-row: unset !important;
    width: 100%;
    display: block !important;
    text-align: left;
} 

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table input,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table textarea {
    background: transparent !important;
    border: 0;
    border-radius: 0;
    font-size: 14px !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: left !important;
    padding: 0;
    font-weight: 400;
}

/* Match form placeholders: muted when empty, full text color when filled */
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table input:placeholder-shown,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table textarea:placeholder-shown {
    color: var(--rm-items-v2-placeholder) !important;
    -webkit-text-fill-color: var(--rm-items-v2-placeholder) !important;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table input:not(:placeholder-shown),
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table textarea:not(:placeholder-shown) {
    color: var(--rm-items-v2-text) !important;
    -webkit-text-fill-color: var(--rm-items-v2-text) !important;
} 

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td:nth-of-type(2) input,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td:nth-of-type(2) textarea {
    text-align: left !important;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td:nth-of-type(n + 3) input {
    text-align: right !important;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table .max_70 {
    max-width: 100%;
    width: 100%;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table input::placeholder,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table textarea::placeholder {
    color: var(--rm-items-v2-placeholder) !important;
    opacity: 1;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table input::-webkit-input-placeholder,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table textarea::-webkit-input-placeholder {
    color: var(--rm-items-v2-placeholder) !important;
    opacity: 1;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table .rm-item-desc textarea {
    background: transparent !important;
    min-height: 34px;
    padding: 0 !important;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table .rm-item-desc {
    position: relative;
    margin-top: 0;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table .rm-item-desc > .custom_span {
    color: var(--rm-items-v2-placeholder) !important;
    position: absolute;
    left: 0;
    top: 0;
    right: auto;
    transform: none;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    pointer-events: none;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table .rm-item-desc > textarea:focus + .custom_span,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table .rm-item-desc > textarea:not(:placeholder-shown) + .custom_span {
    display: none;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td:nth-of-type(2) .mb_2,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td:nth-of-type(2) .rm-item-desc {
    text-align: left;
    width: 100%;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table input:-webkit-autofill,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--rm-items-v2-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--rm-items-v2-bg) inset !important;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-amount-cell {
    align-items: flex-start;
    position: relative;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-amount-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    width: 100%;
    min-width: 0;
    min-height: 24px;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-amount-cell .amount_value {
    background: transparent !important;
    border: 0 !important;
    color: var(--rm-items-v2-text);
    font-weight: 600;
    min-height: 25px;
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    font-size: 14px !important;
    justify-content: flex-end !important;
    text-align: right !important;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-amount-cell .product_total,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-amount-cell .add_symbol {
    color: var(--rm-items-v2-text);
    font-size: 12px;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-amount-cell .product_total,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-amount-cell .add_symbol {
    width: auto !important;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-row-delete {
    opacity: 0;
    pointer-events: none;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    width: 36px;
    min-width: 36px;
    background: transparent;
    transition: opacity 0.15s ease, max-height 0.15s ease, margin 0.15s ease;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-row-delete .rm-del-icon--default {
    opacity: 1;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .instant_invoice_detail:hover .rm-items-row-delete,
.rm-maker .rm-items-block.rm-items-ui-v2 .instant_invoice_detail:focus-within .rm-items-row-delete {
    opacity: 1;
    pointer-events: auto;
    max-height: 40px;
    margin-top: 8px;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-actions {
    display: flex;
    flex-wrap: wrap;
    background: transparent;
    border-top: 1px solid var(--rm-items-v2-border);
    padding: 12px 16px;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    border-radius: 0 0 12px 12px;
    min-width: 0;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-actions .add_product,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-actions .add_task {
    color: var(--rm-items-v2-text);
    font-weight: 600;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-actions .add_product svg path,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-actions .add_task svg path {
    stroke: #007aff;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-tax-name-cell,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-item-rate-cell,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-item-tax-rate-cell {
    flex-direction: column;
    align-items: stretch;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-item-name-field,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-item-rate-field,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-tax-name-field,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-item-tax-rate-field {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-item-name-field {
    align-items: flex-start;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-item-rate-field,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-tax-name-field,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-item-tax-rate-field {
    align-items: flex-end;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-item-rate-field input,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-tax-name-field input,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-item-tax-rate-field input {
    width: 100%;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-item-field-error {
    display: none;
    width: 100%;
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--rm-modal-error, #ef4444) !important;
    white-space: nowrap;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-item-name-field .rm-item-field-error {
    text-align: left;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-item-rate-field .rm-item-field-error,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-tax-name-field .rm-item-field-error,
.rm-maker .rm-items-block.rm-items-ui-v2 .rm-item-tax-rate-field .rm-item-field-error {
    text-align: right;
}

.rm-maker .rm-items-block.rm-items-ui-v2 .rm-item-field-error.is-visible {
    display: block;
}

/* Same table as desktop. At phone widths the row scrolls inside the card. */
@media (max-width: 767.98px) {
    .rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-scroll,
    .rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-scroll.table-responsive {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table {
        min-width: 860px;
        width: 860px;
    }

    .rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table thead {
        display: block;
    }

    .rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody tr {
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-table tbody td:nth-of-type(7) {
        grid-column: auto;
    }

    .rm-maker .rm-items-block.rm-items-ui-v2 .rm-items-actions {
        position: sticky;
        left: 0;
        z-index: 1;
        width: 100%;
        min-width: 100%;
    }
    .rm-address-split {
        gap: 0 !important;
    }
}