/**
 * Invoice Payment (Make Payment) modal — scoped to .inv-payment-modal-window only.
 */

.inv-payment-modal-window .modal-dialog {
    width: calc(100% - 24px);
    max-width: 680px;
    margin: 12px auto;
}

.inv-payment-modal-window .modal-content {
    border: none;
    border-radius: 0;
    overflow: hidden;
}

.inv-payment-modal-window .modal-body {
    padding: 0 !important;
    max-height: none;
    overflow: visible;
}

.inv-payment-root {
    --inv-pay-blue: #337ab7;
    --inv-pay-border: #c0c0c0;
    --inv-pay-panel-bg: #fff;
    --inv-pay-total-bg: #c3f7c3;
}

.inv-payment-root .inv-payment-header {
    font-size: 25px;
    text-align: center;
    background-color: var(--inv-pay-blue);
    color: #fff;
    padding: 12px 48px 12px 14px;
    position: relative;
    margin: 0;
    border: none;
    border-radius: 0;
}

.inv-payment-root .inv-payment-header .close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    float: none;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    font-size: 28px;
    line-height: 44px;
    color: #fff !important;
    opacity: 1;
    text-shadow: none;
}

.inv-payment-root .inv-payment-body {
    padding: 0 12px 16px !important;
}

.inv-payment-root .inv-payment-help-row {
    text-align: right;
    padding: 6px 0 0;
}

.inv-payment-root .inv-payment-main {
    padding: 15px 0 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
}

.inv-payment-root .inv-payment-main-inner {
    margin: 0 auto;
    max-width: 100%;
}

.inv-payment-root .inv-payment-total-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 16px;
    margin-bottom: 20px;
}

.inv-payment-root .inv-payment-total-label {
    color: #228b22;
    font-size: 26px;
    font-weight: 700;
    margin: 0;
}

.inv-payment-root .inv-payment-total-input {
    width: 120px;
    max-width: 100%;
    background: var(--inv-pay-total-bg);
    text-align: right;
    font-size: 16px;
    min-height: 36px;
}

.inv-payment-root .inv-payment-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--inv-pay-border);
    padding: 15px;
    margin: 0 0 12px;
    background: var(--inv-pay-panel-bg);
    box-sizing: border-box;
}

.inv-payment-root .inv-payment-grid-wrap {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d4d4d4;
    box-sizing: border-box;
    background: #fff;
}

.inv-payment-root .inv-payment-grid {
    height: 250px !important;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
}

.inv-payment-root .inv-payment-grid .ui-grid-viewport {
    min-height: 200px !important;
    overflow-x: hidden !important;
}

.inv-payment-modal-window .inv-payment-root .ui-grid-render-container-body {
    width: 100% !important;
    max-width: 100% !important;
}

.inv-payment-modal-window .inv-payment-root .ui-grid-render-container-body .ui-grid-canvas {
    width: 100% !important;
    max-width: 100% !important;
}

.inv-payment-root .inv-payment-totals {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.inv-payment-root .inv-payment-totals label {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
}

.inv-payment-root .inv-payment-totals input {
    width: 100%;
    max-width: 140px;
    box-sizing: border-box;
    font-size: 16px;
    min-height: 36px;
}

.inv-payment-root .inv-payment-totals .inv-payment-change-input {
    background: #ffcccc;
}

.inv-payment-root .inv-payment-hint {
    text-align: center;
    margin: 8px 0 12px;
    font-size: 14px;
}

.inv-payment-root .inv-payment-xero-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 8px 0 4px;
    padding: 6px 0;
    font-size: 16px;
    line-height: 1.3;
    user-select: none;
    min-height: 44px;
}

.inv-payment-root .inv-payment-xero-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--inv-pay-blue);
}

.inv-payment-root .inv-payment-hidden {
    display: none !important;
}

.inv-payment-root .inv-payment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 12px 0 4px;
}

.inv-payment-root .inv-payment-actions .btn {
    flex: 1 1 calc(50% - 4px);
    max-width: 100%;
    min-height: 44px;
    white-space: normal;
}

/* Grid cosmetics — scoped to this modal only */
.inv-payment-modal-window .inv-payment-root .inv-payment-grid .ui-grid {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.inv-payment-modal-window .inv-payment-root .ui-grid-pinned-container-left .ui-grid-header-cell:last-child,
.inv-payment-modal-window .inv-payment-root .ui-grid-pinned-container-left .ui-grid-cell:last-child {
    border-right: 1px solid #d4d4d4 !important;
}

.inv-payment-modal-window .inv-payment-root .ui-grid-render-container-body .ui-grid-canvas {
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

.inv-payment-modal-window .inv-payment-root .ui-grid-filter-container {
    display: none !important;
}

.inv-payment-modal-window .inv-payment-root .ui-grid-header-cell {
    text-align: center !important;
}

.inv-payment-modal-window .inv-payment-root .ui-grid-right-textAlign {
    text-align: right;
}

/* Selection column — match ui-grid selectionRowHeaderWidth (30px) */
.inv-payment-modal-window .inv-payment-root .ui-grid-row-header-cell,
.inv-payment-modal-window .inv-payment-root .ui-grid-header-cell-row-header {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
}

.inv-payment-modal-window .inv-payment-root .ui-grid-pinned-container-left {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
}

.inv-payment-modal-window .inv-payment-root .ui-grid-scrollbar-horizontal,
.inv-payment-modal-window .inv-payment-root .ui-grid-scrollbar-horizontal-section {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

.inv-payment-modal-window .inv-payment-root .currency {
    text-align: right;
}

.inv-payment-modal-window .inv-payment-root .currency .ui-grid-cell-contents:before {
    content: '$';
    float: left;
}

.inv-payment-modal-window .inv-payment-root .enMoney::before {
    content: "$";
    float: left;
}

.inv-payment-modal-window .inv-payment-root .negMoney {
    color: red;
}

.inv-payment-modal-window .inv-payment-root div.negMoney::before {
    content: '($';
}

.inv-payment-modal-window .inv-payment-root div.negMoney::after {
    content: ')';
}

@media (min-width: 768px) {
    .inv-payment-modal-window .modal-dialog {
        width: 88%;
        max-width: 680px;
    }

    .inv-payment-root .inv-payment-body {
        padding: 0 20px 20px !important;
    }

    .inv-payment-root .inv-payment-panel {
        flex-direction: row;
        align-items: flex-start;
    }

    .inv-payment-root .inv-payment-grid-wrap {
        flex: 1 1 72%;
    }

    .inv-payment-root .inv-payment-totals {
        flex: 0 0 140px;
        padding-left: 12px;
    }

    .inv-payment-root .inv-payment-actions {
        justify-content: flex-start;
        padding-left: 36px;
    }

    .inv-payment-root .inv-payment-actions .btn {
        flex: 0 1 auto;
        width: auto;
    }
}

@media (min-width: 992px) {
    .inv-payment-modal-window .modal-dialog.modal-lg {
        width: 680px;
        max-width: 92vw;
    }
}