/* MonEx Transaksi screens (Beli / Jual, Riil / Virtual).
   Presentation only. Nothing here is a JS hook: every id (#savePrint,
   #nilaiTable, #sub_total_transaksi, ...) and the six JS-owned classes
   (.pecahan-input, .rate, .total_idr, .nominal_pembayaran,
   .customer-details-row, .get-data-btn) are read, never rewritten.

   Usage: add `mx-trx mx-trx--beli` (or `--jual`) to the page's <form>. */

.mx-trx {
    --trx-dir: var(--mx-beli);
    --trx-dir-wash: var(--mx-beli-wash);
}

.mx-trx--jual {
    --trx-dir: var(--mx-jual);
    --trx-dir-wash: var(--mx-jual-wash);
}

.mx-trx .app-side .card.text-bg-dark,
.mx-trx .app-side .card.text-bg-secondary {
    background-color: var(--mx-surface) !important;
    color: var(--mx-text) !important;
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius-sm);
    box-shadow: none;
}

.mx-trx .app-side .card.text-bg-secondary {
    background-color: var(--trx-dir-wash) !important;
    border-color: var(--trx-dir);
    color: var(--trx-dir) !important;
}

.mx-trx .app-side .card .card-body {
    padding: 0.4rem 0.5rem !important;
}

.mx-trx .app-side .card h6 {
    font-family: var(--mx-font-sans);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mx-muted);
    margin-bottom: 0.1rem !important;
}

.mx-trx .app-side .card.text-bg-secondary h6 {
    color: inherit;
    font-size: 0.78rem;
    letter-spacing: -0.01em;
    text-transform: none;
}

.mx-trx .app-side .card p {
    font-family: var(--mx-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
}

.mx-trx .app-side .card.text-bg-dark:has(#searchInput) {
    background-color: transparent !important;
    border-color: transparent;
}

.mx-trx .app-side .card:has(#searchInput) .card-body {
    padding: 0 !important;
}

.mx-trx #dataTable {
    border-color: var(--mx-line);
}

.mx-trx #dataTable th[colspan] {
    background-color: var(--mx-surface-sub) !important;
    color: var(--mx-muted) !important;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    box-shadow: none !important;
}

.mx-trx #dataTable td:first-child {
    color: var(--mx-muted);
    font-weight: 500;
    font-size: 0.82rem;
    width: 38%;
}

.mx-trx #dataTable .form-control,
.mx-trx #dataTable .form-select,
.mx-trx #dataTable textarea {
    border-color: transparent;
    background-color: var(--mx-surface-sub);
    font-size: 0.85rem;
}

.mx-trx #dataTable .form-control:focus,
.mx-trx #dataTable .form-select:focus {
    background-color: var(--mx-surface);
    border-color: var(--mx-line-strong);
}

.mx-trx .customer-details-toggle,
.mx-trx #dataTable tr[data-bs-toggle='collapse'] td,
.mx-trx #dataTable .toggle-detail td {
    background-color: var(--trx-dir-wash) !important;
    color: var(--trx-dir) !important;
    font-weight: 600;
}

.mx-trx .input-group-lg > .input-group-text.text-bg-dark {
    background-color: var(--mx-ink) !important;
    color: var(--mx-ink-contrast) !important;
    border-color: var(--mx-ink);
    font-size: 0.66rem !important;
    letter-spacing: 0.12em;
    line-height: 1.15;
}

.mx-trx .input-group-lg > .input-group-text:not(.text-bg-dark) {
    background-color: var(--mx-ink);
    color: var(--mx-ink-contrast);
    border-color: var(--mx-ink);
    font-size: 1rem !important;
}

.mx-trx #sub_total_transaksi {
    background-color: var(--mx-ink);
    color: var(--mx-ink-contrast);
    border-color: var(--mx-ink);
    font-family: var(--mx-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.mx-trx #nilaiTable,
.mx-trx #caraPembayaranTable {
    border-color: var(--mx-line);
}

.mx-trx #nilaiTable > tbody > tr > td,
.mx-trx #caraPembayaranTable > tbody > tr > td {
    border-color: var(--mx-line);
    vertical-align: middle;
}

/* Striping off: the hairlines already guide the eye, and striping makes
   numbers harder to compare down a column. */
.mx-trx .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background-color: transparent;
    box-shadow: none;
}

.mx-trx #nilaiTable .form-control,
.mx-trx #caraPembayaranTable .form-control,
.mx-trx #nilaiTable .form-select,
.mx-trx #caraPembayaranTable .form-select {
    border-color: transparent;
    background-color: transparent;
    font-size: 0.86rem;
}

.mx-trx #nilaiTable .form-control:hover,
.mx-trx #caraPembayaranTable .form-control:hover,
.mx-trx #nilaiTable .form-select:hover,
.mx-trx #caraPembayaranTable .form-select:hover {
    background-color: var(--mx-surface-sub);
}

.mx-trx #nilaiTable .form-control:focus,
.mx-trx #caraPembayaranTable .form-control:focus,
.mx-trx #nilaiTable .form-select:focus,
.mx-trx #caraPembayaranTable .form-select:focus {
    background-color: var(--mx-surface);
    border-color: var(--trx-dir);
    box-shadow: none;
}

.mx-trx .pecahan-input,
.mx-trx .rate,
.mx-trx .total_idr,
.mx-trx .nominal_pembayaran {
    font-family: var(--mx-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    letter-spacing: -0.02em;
}

.mx-trx .total_idr {
    font-weight: 600;
}

.mx-trx .text-bg-success {
    background-color: var(--mx-surface-sub) !important;
    color: var(--mx-muted) !important;
    border: 1px solid var(--mx-line);
    border-bottom: 0;
    border-radius: var(--mx-radius-sm) var(--mx-radius-sm) 0 0;
    text-align: left !important;
}

.mx-trx .text-bg-success h6 {
    color: var(--mx-muted) !important;
    font-family: var(--mx-font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    padding: 0.55rem 0.7rem !important;
}

.mx-trx #savePrint {
    --bs-btn-bg: var(--trx-dir);
    --bs-btn-border-color: var(--trx-dir);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--trx-dir) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--trx-dir) 85%, #000);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--trx-dir) 75%, #000);
    --bs-btn-active-color: #fff;
    font-weight: 650;
}

.mx-trx .btn-info,
.mx-trx .btn-warning {
    --bs-btn-bg: var(--mx-surface);
    --bs-btn-border-color: var(--mx-line-strong);
    --bs-btn-color: var(--mx-text);
    --bs-btn-hover-bg: var(--mx-surface-sub);
    --bs-btn-hover-border-color: var(--mx-line-strong);
    --bs-btn-hover-color: var(--mx-text);
    --bs-btn-active-bg: var(--mx-surface-sub);
    --bs-btn-active-border-color: var(--mx-line-strong);
    --bs-btn-active-color: var(--mx-text);
}

.mx-trx #clearCancel {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--mx-line-strong);
    --bs-btn-color: var(--mx-muted);
    --bs-btn-hover-bg: var(--mx-jual-wash);
    --bs-btn-hover-border-color: var(--mx-jual);
    --bs-btn-hover-color: var(--mx-jual);
    --bs-btn-active-bg: var(--mx-jual-wash);
    --bs-btn-active-color: var(--mx-jual);
}

.mx-trx .card {
    border-color: var(--mx-line);
}

.mx-trx .table > :not(caption) > * > * {
    padding: 0.45rem 0.6rem;
}

.mx-trx .input-group-lg:has(#sub_total_transaksi) {
    background: var(--mx-ink);
    border-radius: var(--mx-radius);
    padding: 0.6rem 0.6rem 0.6rem 1.15rem;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
}

.mx-trx .input-group-lg:has(#sub_total_transaksi) > .input-group-text.text-bg-dark {
    flex: 0 0 100%;
    justify-content: flex-end;
    background: transparent !important;
    border: 0 !important;
    color: #a2968a !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.16em;
    line-height: 1.3;
    padding: 0 0 0.2rem;
}

.mx-trx .input-group-lg:has(#sub_total_transaksi) > .input-group-text:not(.text-bg-dark) {
    background: transparent;
    border: 0;
    color: #a2968a;
    font-size: 1.08rem !important;
    padding: 0 0.4rem 0 0;
    line-height: 1;
}

.mx-trx #sub_total_transaksi {
    background: transparent;
    border: 0;
    color: var(--mx-ink-contrast);
    font-size: 1.6rem !important;
    font-weight: 700;
    text-align: right !important;
    padding: 0;
    line-height: 1;
    height: auto;
    min-height: 0;
    flex: 0 1 auto;
    width: auto !important;
    min-width: 1ch;
    max-width: 100%;
    field-sizing: content;
    box-shadow: none;
}

.mx-trx .customer-info-scroll {
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    background: var(--mx-surface);
    padding: 0;
    max-height: 62vh;
    overflow-y: auto;
}

.mx-trx #dataTable > tbody > tr > td:first-child {
    width: 40%;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--mx-muted);
    text-transform: none;
    letter-spacing: 0;
}

.mx-trx #dataTable > tbody > tr > td:last-child {
    width: 60%;
}

.mx-trx #dataTable .input-group,
.mx-trx #dataTable .form-control,
.mx-trx #dataTable .form-select,
.mx-trx #dataTable textarea {
    width: 100%;
    text-align: left;
}

.mx-trx #dataTable .form-control,
.mx-trx #dataTable .form-select,
.mx-trx #dataTable textarea {
    font-size: 0.82rem;
    padding: 0.2rem 0.4rem;
}

.mx-trx #dataTable .badge {
    border-radius: 999px;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--mx-surface-sub) !important;
    color: var(--mx-muted) !important;
}

.mx-trx #dataTable .badge.text-bg-success,
.mx-trx #dataTable .badge.bg-success {
    background: var(--mx-beli-wash) !important;
    color: var(--mx-beli) !important;
}

.mx-trx #dataTable tr.table-secondary > td {
    background: transparent !important;
    color: var(--mx-muted) !important;
    border-top: 1px dashed var(--mx-line-strong) !important;
    font-size: 0.74rem;
    font-weight: 500 !important;
}

.mx-trx .app-main > .row > [class*='col-']:has(> #savePrint),
.mx-trx .app-main > .row > [class*='col-']:has(> #clearCancel),
.mx-trx .app-main > .row > [class*='col-']:has(> .btn-info),
.mx-trx .app-main > .row > [class*='col-']:has(> .btn-warning) {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin-left: 0;
}

.mx-trx .app-main > .row > [class*='col-']:has(> #savePrint) {
    order: 1;
}

.mx-trx .app-main > .row > [class*='col-']:has(> .btn-info) {
    order: 2;
}

.mx-trx .app-main > .row > [class*='col-']:has(> .btn-warning) {
    order: 3;
}

.mx-trx .app-main > .row > [class*='col-']:has(> #clearCancel) {
    order: 4;
    margin-left: auto !important;
}

.mx-trx .app-main > .row > [class*='col-']:has(> #savePrint) .btn,
.mx-trx .app-main > .row > [class*='col-']:has(> #clearCancel) .btn,
.mx-trx .app-main > .row > [class*='col-']:has(> .btn-info) .btn,
.mx-trx .app-main > .row > [class*='col-']:has(> .btn-warning) .btn {
    width: auto !important;
}

.mx-trx__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.35rem;
    padding: 0.6rem 1rem;
    margin: 0.5rem 0 0.75rem;
    background: var(--mx-surface);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius-sm);
    font-size: 0.9rem;
    color: var(--mx-muted);
}

.mx-trx__tag {
    font-weight: 650;
    font-size: 0.8rem;
    color: var(--trx-dir);
    background: var(--trx-dir-wash);
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
}

.mx-trx__stat b {
    color: var(--mx-text);
    font-family: var(--mx-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.mx-trx__stat--end {
    margin-left: auto;
    font-family: var(--mx-font-mono);
    font-variant-numeric: tabular-nums;
}

.mx-trx #dataTable tr.mx-cust-head > td {
    padding: 0.6rem 0.5rem 0.7rem;
    border-bottom: 1px solid var(--mx-line);
    text-align: left !important;
}

.mx-trx .mx-cust-head__name {
    display: block;
    font-weight: 650;
    font-size: 1rem;
    color: var(--mx-text);
}

.mx-trx .mx-cust-head__cif {
    display: block;
    font-family: var(--mx-font-mono);
    font-size: 0.74rem;
    color: var(--mx-muted);
}

.mx-trx .mx-cust-head__badges {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}

.mx-trx #dataTable tr[data-label='Nama Customer'],
.mx-trx #dataTable tr[data-label='No. CIF'],
.mx-trx #dataTable tr[data-label='Status Customer'] {
    display: none;
}

.mx-trx #dataTable thead {
    display: none;
}

.mx-trx__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
}

.mx-trx__title-text {
    font-family: var(--mx-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mx-text);
}

.mx-trx__title-pill {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--trx-dir);
    background: var(--trx-dir-wash);
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
}

.mx-trx__title-inv {
    flex: 0 0 100%;
    font-family: var(--mx-font-mono);
    font-size: 0.76rem;
    color: var(--mx-muted);
}

.mx-trx .app-main > .row > [class*='col-']:has(#nilaiTable) {
    order: 0;
}

.mx-trx .app-main > .row > [class*='col-']:has(.input-group-lg) {
    order: 1;
}

.mx-trx .app-main > .row > [class*='col-']:has(.text-bg-success) {
    order: 2;
}

.mx-trx .app-main > .row > [class*='col-']:has(> #savePrint) { order: 3; }
.mx-trx .app-main > .row > [class*='col-']:has(> .btn-info) { order: 4; }
.mx-trx .app-main > .row > [class*='col-']:has(> .btn-warning) { order: 5; }
.mx-trx .app-main > .row > [class*='col-']:has(> #clearCancel) { order: 6; }

.mx-trx .app-side,
.mx-trx .app-main {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.mx-trx .app-main > .row {
    background: var(--mx-surface);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    padding: 0.85rem;
    margin: 0;
}

.mx-trx .app-side > .row {
    margin: 0;
}

.mx-trx .app-side .input-group,
.mx-trx .app-side > .row > .col-12:first-child {
    padding: 0;
}

.mx-trx .app-main > .row > [class*='col-']:has(.input-group-lg) {
    margin-top: 0.6rem;
}

.mx-trx #nilaiTable > tbody > tr > td,
.mx-trx #caraPembayaranTable > tbody > tr > td {
    padding: 0.55rem 0.6rem;
}

.mx-trx .app-main > .row > [class*='col-']:has(.text-bg-success) {
    margin-top: 0.85rem;
}

.mx-trx .text-bg-success {
    border-radius: var(--mx-radius) var(--mx-radius) 0 0;
}

.mx-trx .app-main > .row > [class*='col-']:has(.text-bg-success) .table-responsive {
    border: 1px solid var(--mx-line);
    border-top: 0;
    border-radius: 0 0 var(--mx-radius) var(--mx-radius);
    overflow: hidden;
}

.mx-trx #caraPembayaranTable {
    margin-bottom: 0;
}

.mx-trx .app-side > .row > .col-12:first-child {
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    background: var(--mx-surface);
    padding: 0.5rem !important;
    margin-bottom: 0.65rem;
}

.mx-trx .app-main > .row > [class*='col-']:has(> #savePrint),
.mx-trx .app-main > .row > [class*='col-']:has(> .btn-info),
.mx-trx .app-main > .row > [class*='col-']:has(> .btn-warning),
.mx-trx .app-main > .row > [class*='col-']:has(> #clearCancel) {
    margin-top: 0.9rem;
}

.mx-trx .table-bordered > :not(caption) > * > * {
    border-left-width: 0;
    border-right-width: 0;
}

.mx-trx .table > :not(caption) > * > * {
    border-color: var(--mx-line);
}

.mx-trx #nilaiTable .btn,
.mx-trx #caraPembayaranTable .btn {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-color: var(--mx-line-strong);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-hover-color: var(--mx-jual);
    box-shadow: none;
    padding: 0.15rem 0.4rem;
}

.mx-trx #nilaiTable .input-group-text {
    display: none;
}

.mx-trx #nilaiTable .input-group > .form-control {
    border-radius: var(--mx-radius-sm) !important;
}

.mx-trx #dataTable .form-control,
.mx-trx #dataTable textarea,
.mx-trx #dataTable .form-select {
    border: 0 !important;
    background: transparent !important;
    text-align: right;
    padding: 0 !important;
    color: var(--mx-text);
    font-weight: 500;
    box-shadow: none !important;
    resize: none;
}

.mx-trx #dataTable .form-select {
    text-align: right;
    color: var(--mx-muted);
}

.mx-trx #dataTable > tbody > tr > td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--mx-line);
    vertical-align: middle;
}

.mx-trx #dataTable .input-group > .btn {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-color: var(--mx-muted);
    padding: 0 0 0 0.35rem;
}

.mx-trx #dataTable .input-group {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.mx-trx .input-group-lg:has(#sub_total_transaksi) > .input-group-text.text-bg-dark {
    white-space: nowrap;
}

.mx-trx #savePrint {
    --bs-btn-disabled-bg: var(--trx-dir);
    --bs-btn-disabled-border-color: var(--trx-dir);
    --bs-btn-disabled-color: #fff;
}

.mx-trx #savePrint:disabled {
    opacity: 0.5;
}

.mx-trx #clearCancel {
    --bs-btn-border-color: transparent;
}

.mx-trx .app-main > .row > [class*='col-']:has(> .btn-info) .btn,
.mx-trx .app-main > .row > [class*='col-']:has(> .btn-warning) .btn {
    border-color: var(--mx-line-strong);
}

.mx-trx .table-responsive:has(#nilaiTable),
.mx-trx .table-responsive:has(#caraPembayaranTable) {
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    overflow: hidden;
}

.mx-trx .app-main > .row > [class*='col-']:has(.text-bg-success) .table-responsive {
    border-radius: 0 0 var(--mx-radius) var(--mx-radius);
    border-top: 0;
}

.mx-trx #nilaiTable,
.mx-trx #caraPembayaranTable {
    border: 0;
    margin-bottom: 0;
}

.mx-trx #nilaiTable > thead > tr > th,
.mx-trx #caraPembayaranTable > thead > tr > th {
    border: 0 !important;
    border-bottom: 1px solid var(--mx-line) !important;
    background-color: var(--mx-surface-sub) !important;
    box-shadow: none !important;
}

.mx-trx #caraPembayaranTable > thead > tr:first-child > th {
    border-bottom: 1px solid var(--mx-line) !important;
}

.mx-trx #nilaiTable > tbody > tr > td,
.mx-trx #caraPembayaranTable > tbody > tr > td {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--mx-line);
}

.mx-trx #nilaiTable > tbody > tr:last-child > td,
.mx-trx #caraPembayaranTable > tbody > tr:last-child > td {
    border-bottom: 0;
}

.mx-trx .app-side > .row > .col-12:first-child {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 0.7rem;
}

.mx-trx #searchInput {
    border: 1px solid var(--mx-line-strong);
    border-right: 0;
    border-radius: var(--mx-radius-sm) 0 0 var(--mx-radius-sm);
    background: var(--mx-surface);
}

.mx-trx #searchInput:focus {
    border-color: var(--mx-line-strong);
    box-shadow: none;
    outline: 2px solid var(--mx-brass-wash);
    outline-offset: -1px;
}

.mx-trx #checkData {
    border-radius: 0 var(--mx-radius-sm) var(--mx-radius-sm) 0;
}

.mx-trx #dataTable > tbody > tr:last-child > td {
    border-bottom: 0;
}

.mx-trx .table > :not(:first-child) {
    border-top: 0 !important;
}

.mx-trx .table,
.mx-trx .table > thead,
.mx-trx .table > tbody,
.mx-trx .table > tfoot {
    --bs-table-border-color: var(--mx-line);
    border-color: var(--mx-line) !important;
}

.mx-trx .table > thead > tr > th,
.mx-trx .table > tbody > tr > td {
    border-color: var(--mx-line) !important;
}

.mx-trx .table > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

.mx-trx #dataTable > tbody > tr,
.mx-trx #dataTable > tbody > tr > td {
    background-color: var(--mx-surface) !important;
}

.mx-trx #dataTable > tbody > tr.mx-cust-head > td {
    background-color: var(--mx-surface) !important;
}

.mx-trx #dataTable .input-group .btn {
    --bs-btn-bg: transparent !important;
    --bs-btn-border-color: transparent !important;
    --bs-btn-color: var(--mx-muted) !important;
    --bs-btn-hover-bg: transparent !important;
    --bs-btn-hover-color: var(--mx-brass) !important;
    box-shadow: none !important;
}

.mx-trx #savePrint:disabled,
.mx-trx #savePrint.disabled {
    opacity: 1;
}

.mx-trx .app-main > .row > [class*='col-']:has(> #savePrint) .btn,
.mx-trx .app-main > .row > [class*='col-']:has(> .btn-info) .btn,
.mx-trx .app-main > .row > [class*='col-']:has(> .btn-warning) .btn,
.mx-trx .app-main > .row > [class*='col-']:has(> #clearCancel) .btn {
    padding: 0.5rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 600;
}

.mx-trx .app-main > .row > [class*='col-']:has(> #clearCancel) .btn {
    font-weight: 500;
    color: var(--mx-muted);
}

.mx-trx #nilaiTable .form-control,
.mx-trx #nilaiTable .form-select,
.mx-trx #caraPembayaranTable .form-control,
.mx-trx #caraPembayaranTable .form-select {
    background-color: var(--mx-surface);
    border: 1px solid var(--mx-line-strong);
    border-radius: var(--mx-radius-sm);
    min-height: 2rem;
    padding: 0.3rem 0.55rem;
    width: 100%;
    color: var(--mx-text);
}

.mx-trx #nilaiTable .form-control:hover,
.mx-trx #nilaiTable .form-select:hover,
.mx-trx #caraPembayaranTable .form-control:hover,
.mx-trx #caraPembayaranTable .form-select:hover {
    border-color: var(--mx-line-strong);
    background-color: var(--mx-surface);
}

.mx-trx #nilaiTable .form-control:focus,
.mx-trx #nilaiTable .form-select:focus,
.mx-trx #caraPembayaranTable .form-control:focus,
.mx-trx #caraPembayaranTable .form-select:focus {
    background-color: var(--mx-surface);
    border-color: var(--trx-dir);
    box-shadow: 0 0 0 3px var(--trx-dir-wash);
}

.mx-trx #nilaiTable .input-group,
.mx-trx #caraPembayaranTable .input-group {
    flex-wrap: nowrap;
    width: 100%;
}

.mx-trx #nilaiTable .input-group > .form-control {
    border-radius: var(--mx-radius-sm) !important;
}

.mx-trx .text-bg-success {
    border: 1px solid var(--mx-line);
    border-bottom: 0;
}

.mx-trx #caraPembayaranTable > thead > tr > th {
    border-bottom: 1px solid var(--mx-line) !important;
}

/* The app disables these inputs until a customer is picked. Keep the box,
   just fade it, so it reads as not-yet-active rather than broken. */
.mx-trx #nilaiTable .form-control:disabled,
.mx-trx #nilaiTable .form-select:disabled,
.mx-trx #caraPembayaranTable .form-control:disabled,
.mx-trx #caraPembayaranTable .form-select:disabled,
.mx-trx #nilaiTable .form-control[readonly],
.mx-trx #caraPembayaranTable .form-control[readonly] {
    background-color: var(--mx-surface-sub);
    border-color: var(--mx-line);
    color: var(--mx-muted);
    cursor: not-allowed;
}

.mx-trx #nilaiTable > thead > tr > th:nth-child(2) { width: 12% !important; }
.mx-trx #nilaiTable > thead > tr > th:nth-child(3) { width: 28% !important; }
.mx-trx #nilaiTable > thead > tr > th:nth-child(4) { width: 15% !important; }
.mx-trx #nilaiTable > thead > tr > th:nth-child(5) { width: 14% !important; }
.mx-trx #nilaiTable > thead > tr > th:nth-child(6) { width: 22% !important; }

.mx-trx .mx-grid {
    border: 0;
    margin-bottom: 0;
}

.mx-trx .mx-grid > thead > tr > th {
    background-color: var(--mx-surface-sub);
    border: 0;
    border-bottom: 1px solid var(--mx-line);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mx-muted);
}

.mx-trx .mx-grid > tbody > tr > td {
    border: 0;
    border-bottom: 1px solid var(--mx-line);
}

.mx-trx .mx-grid > tbody > tr:last-child > td {
    border-bottom: 0;
}

.mx-trx #caraPembayaranTable > thead > tr > th {
    border: 0 !important;
    border-bottom: 1px solid var(--mx-line) !important;
    background-color: var(--mx-surface-sub) !important;
    padding: 0.55rem 0.6rem;
}

.mx-trx #caraPembayaranTable > thead > tr > th:first-child,
.mx-trx #caraPembayaranTable > tbody > tr > td:first-child {
    text-align: center;
}

.mx-trx #caraPembayaranTable > thead > tr > th:last-child {
    text-align: right;
}

.mx-trx .mx-pay-head {
    background: var(--mx-surface-sub);
    border: 1px solid var(--mx-line);
    border-bottom: 0;
    border-radius: var(--mx-radius) var(--mx-radius) 0 0;
    padding: 0.6rem 0.8rem 0.5rem;
    text-align: left;
}

.mx-trx .mx-pay-head__title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mx-muted);
}

.mx-trx .app-main > .row > [class*='col-']:has(.mx-pay-head) .table-responsive {
    border: 1px solid var(--mx-line);
    border-top: 0;
    border-radius: 0 0 var(--mx-radius) var(--mx-radius);
}

/* Keyed on the sibling instead of the exact column nesting, so every teller page
   joins the header to its table without a seam. The :has(#id) is not decoration —
   .table-responsive:has(#caraPembayaranTable) above scores (1,2,0) and would
   otherwise re-round all four corners. */
.mx-trx .mx-pay-head + .table-responsive:has(#caraPembayaranTable),
.mx-trx .mx-pay-head + .table-responsive:has(#nilaiTable) {
    border: 1px solid var(--mx-line);
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--mx-radius);
    border-bottom-right-radius: var(--mx-radius);
}

.mx-trx #dataTable .input-group {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: nowrap;
}

.mx-trx #dataTable .input-group > .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.mx-trx #dataTable .input-group > .btn {
    flex: 0 0 auto;
    padding: 0 !important;
}

.mx-trx #dataTable tr.table-secondary > td {
    border: 0 !important;
    border-top: 1px solid var(--mx-line) !important;
    border-radius: 0;
    color: var(--mx-muted) !important;
    padding: 0.5rem !important;
}

.mx-trx .app-main > .row > [class*='col-']:has(.mx-pay-head) {
    order: 2;
    margin-top: 0.85rem;
}

.mx-trx .app-main > .row > [class*='col-'].ms-auto:has(> .btn-info),
.mx-trx .app-main > .row > [class*='col-'].ms-auto:has(> .btn-warning) {
    margin-left: 0 !important;
}

.mx-trx .app-main > .row > [class*='col-']:has(> #savePrint),
.mx-trx .app-main > .row > [class*='col-']:has(> .btn-info),
.mx-trx .app-main > .row > [class*='col-']:has(> .btn-warning) {
    padding-right: 0.5rem;
}

/* Kurir unlocks the form for bank / badan-usaha customers, so it has to look
   like a clickable dropdown, not dead text. */
.mx-trx #dataTable #selectKurir,
.mx-trx #dataTable #selectKantorCabang {
    border: 1px solid var(--mx-line-strong) !important;
    background: var(--mx-surface) !important;
    border-radius: var(--mx-radius-sm);
    padding: 0.25rem 1.8rem 0.25rem 0.5rem !important;
    text-align: left;
    color: var(--mx-text);
}

/* The app renders document buttons disabled when nothing is uploaded — keep
   them distinct from the enabled ones so they don't read as broken. */
.mx-trx #dataTable .input-group .btn.disabled {
    opacity: 0.3;
}

.mx-trx #dataTable .input-group .btn:not(.disabled) {
    --bs-btn-color: var(--mx-brass) !important;
}

.mx-trx .mx-pay-head__sub {
    font-size: 0.74rem;
    color: var(--mx-muted);
    margin-top: 0.15rem;
    text-transform: none;
    letter-spacing: 0;
}

.mx-trx #caraPembayaranTable .input-group-text {
    display: none;
}

.mx-trx #caraPembayaranTable .nominal_pembayaran {
    background-color: transparent;
    border-color: transparent;
    font-weight: 600;
}

.mx-trx #caraPembayaranTable .nominal_pembayaran:hover:not(:disabled),
.mx-trx #caraPembayaranTable .nominal_pembayaran:focus {
    background-color: var(--mx-surface);
    border-color: var(--mx-line-strong);
}

.mx-trx #caraPembayaranTable .nominal_pembayaran:disabled {
    background-color: transparent;
    border-color: transparent;
}

.mx-trx .mx-cust-empty {
    display: none;
    text-align: center;
    padding: 2.5rem 1.25rem;
    color: var(--mx-muted);
}

.mx-trx .customer-info-scroll:has(#dataTable[style*='none']) .mx-cust-empty {
    display: block;
}

.mx-trx .mx-cust-empty > i {
    font-size: 1.6rem;
    color: var(--mx-line-strong);
}

.mx-trx .mx-cust-empty__title {
    font-weight: 650;
    color: var(--mx-text);
    margin: 0.75rem 0 0.25rem;
}

.mx-trx .mx-cust-empty__hint {
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0;
}

.mx-trx #caraPembayaranTable tfoot > tr > td {
    border: 0;
    border-top: 1px solid var(--mx-ink);
    background: transparent;
    padding: 0.55rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mx-text);
}

.mx-trx .mx-pay-total__sym {
    font-size: 0.68rem;
    color: var(--mx-muted);
    letter-spacing: 0.1em;
    margin-right: 0.25rem;
}

.mx-trx #caraPembayaranTable tfoot #sub_total_pembayaran {
    font-family: var(--mx-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    letter-spacing: -0.02em;
}

/* The teller has to land on this number exactly, so a mismatch is worth colour. */
.mx-trx .mx-pay-total.is-mismatch > td {
    color: var(--mx-jual);
}

.mx-trx .mx-pay-total.is-mismatch #sub_total_pembayaran {
    color: var(--mx-jual);
}

/* modal shell */
.mx-modal {
    top: var(--mx-navbar-h);
    height: calc(100% - var(--mx-navbar-h));
}

.mx-modal .modal-content {
    background: var(--mx-surface);
    border: 1px solid var(--mx-line-strong);
    border-radius: var(--mx-radius);
    box-shadow: var(--mx-shadow);
    overflow: hidden;
}

.mx-modal .modal-header {
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.15rem;
    background: var(--mx-ground);
    border-bottom: 1px solid var(--mx-line-strong);
}

.mx-modal .modal-header::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--mx-brass-bright);
}

.mx-modal .modal-title {
    font-family: var(--mx-font-display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mx-text-soft);
    margin: 0;
}

.mx-modal__chip {
    font-family: var(--mx-font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    background: var(--mx-ink);
    color: var(--mx-ink-contrast);
    padding: 0.15rem 0.45rem;
}

.mx-modal__chip:empty {
    display: none;
}

.mx-modal .modal-body {
    padding: 0.9rem 1.15rem;
    background: var(--mx-surface);
}

.mx-modal .modal-footer {
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.7rem 1.15rem;
    background: var(--mx-ground);
    border-top: 1px solid var(--mx-line-strong);
}

/* Buttons keep one row; the note is the only thing allowed to give up width. */
.mx-modal .modal-footer > .btn {
    flex: 0 0 auto;
    margin: 0;
}

.mx-modal__note {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 auto 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--mx-muted);
}

.mx-modal__note.is-error {
    color: var(--mx-jual);
    font-weight: 500;
}

/* pecahan breakdown */
.mx-pecahan {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}

.mx-pecahan th {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mx-muted);
    padding: 0 0.5rem 0.45rem;
    border-bottom: 1px solid var(--mx-line);
    text-align: right;
}

.mx-pecahan th:first-child {
    text-align: left;
}

.mx-pecahan td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px dotted var(--mx-line);
    vertical-align: middle;
}

.mx-pecahan tbody tr:last-child td {
    border-bottom: 0;
}

.mx-pecahan__label {
    font-size: 0.85rem;
    color: var(--mx-text);
    white-space: nowrap;
}

.mx-pecahan__label b {
    font-family: var(--mx-font-mono);
    font-weight: 600;
}

.mx-pecahan__count {
    font-family: var(--mx-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    color: var(--mx-muted);
    text-align: right;
    white-space: nowrap;
    width: 5.5rem;
}

/* The field the teller is here to fill, so it has to read as one at rest — the
   underline-only treatment before this was mistaken for a row divider. */
.mx-pecahan__nominal {
    width: 10rem;
}

.mx-pecahan .pecahan-input {
    font-family: var(--mx-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
    text-align: right;
    padding: 0.3rem 0.55rem;
    background: var(--mx-surface-sub);
    border: 1px solid var(--mx-line-strong);
    border-radius: var(--mx-radius-sm);
}

.mx-pecahan .pecahan-input::placeholder {
    color: var(--mx-muted);
    opacity: 0.6;
}

.mx-pecahan .pecahan-input:focus {
    background: var(--mx-surface);
    border-color: var(--mx-brass-bright);
    box-shadow: 0 0 0 3px rgba(141, 100, 32, 0.18);
}

.mx-pecahan .pecahan-input.is-invalid {
    border-color: var(--mx-jual);
    background: var(--mx-jual-wash);
    background-image: none;
    padding-right: 0.55rem;
}

.mx-pecahan__row.is-invalid .mx-pecahan__count {
    color: var(--mx-jual);
}

.mx-pecahan tfoot td {
    border-top: 1.5px solid var(--mx-ink);
    border-bottom: 0;
    padding-top: 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mx-text);
}

.mx-pecahan__total {
    font-family: var(--mx-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    text-align: right;
}

/* customer picker */
.mx-picker {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}

.mx-picker th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mx-ground);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mx-muted);
    padding: 0.5rem 0.65rem;
    border-bottom: 1.5px solid var(--mx-ink);
    text-align: left;
    white-space: nowrap;
}

.mx-picker td {
    padding: 0.55rem 0.65rem;
    font-size: 0.82rem;
    color: var(--mx-text);
    border-bottom: 1px solid var(--mx-line);
    vertical-align: middle;
}

.mx-picker__row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.mx-picker__row:hover > td {
    background: var(--mx-surface-sub);
}

.mx-picker__no {
    width: 2.5rem;
    color: var(--mx-muted);
    font-variant-numeric: tabular-nums;
}

/* the names collide by definition here, so the identity fields carry the weight */
.mx-picker__name {
    color: var(--mx-text-soft);
}

.mx-picker__id {
    font-family: var(--mx-font-mono);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.mx-picker__born {
    font-size: 0.78rem;
    white-space: nowrap;
}

.mx-picker__addr {
    color: var(--mx-muted);
    font-size: 0.76rem;
}

.mx-picker__flag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mx-jual);
    background: var(--mx-jual-wash);
    border: 1px solid var(--mx-jual);
    padding: 0.1rem 0.4rem;
}

.mx-picker__row--blocked {
    cursor: not-allowed;
}

.mx-picker__row--blocked > td {
    opacity: 0.55;
}

.mx-picker__row--blocked:hover > td {
    background: var(--mx-jual-wash);
    opacity: 1;
}

.mx-picker__scroll {
    max-height: 55vh;
    overflow-y: auto;
}

/* Customer panel runs to the bottom of the viewport. The 196px covers what sits
   above it (navbar, page margins, status bar, search row) plus the absolutely
   positioned copyright footer it would otherwise slide under. */
@media (min-width: 992px) {
    .mx-trx .customer-info-scroll {
        max-height: calc(100dvh - 196px);
    }
}