.accounting-section {
    max-height: 17.5rem;
    overflow: auto;
    position: relative;
}

.table-container {
    position: relative;
}

.table-accounting,
.payment-table {
    border-collapse: collapse;
    margin-bottom: 0;
    table-layout: auto;
    width: 100%;
}

.table-accounting thead th,
.payment-table thead th {
    background: var(--app-table-header-bg) !important;
    border-color: var(--app-border-strong) !important;
    color: var(--app-text);
    font-weight: 600;
    padding: 0.35rem 0.25rem;
    white-space: nowrap;
    z-index: var(--app-z-sticky);
}

.table-accounting tfoot td,
.payment-table tfoot td {
    background: var(--app-table-footer-bg) !important;
    border-color: var(--app-border-strong) !important;
    color: var(--app-text);
    font-weight: 700;
    padding: 0.35rem 0.25rem;
    white-space: nowrap;
    z-index: var(--app-z-sticky);
}

.table-accounting thead th,
.table-accounting tfoot td {
    position: sticky;
}

.table-accounting td,
.table-accounting th,
.payment-table td,
.payment-table th {
    border-color: var(--app-border-strong) !important;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.table-accounting td {
    min-width: 2.5rem;
}

.table-accounting .input-group,
.payment-table .input-group,
.table-accounting .grand-total-row {
    flex-wrap: nowrap;
}

.table-accounting .grand-total-row,
.payment-summary-value {
    font-weight: 600;
}

.table-accounting input,
.table-accounting .select2-container--default .select2-selection--single,
.payment-table input,
.payment-table .select2-container--default .select2-selection--single {
    border: 0 !important;
}

.table-accounting .form-control {
    background: var(--app-warning-surface) !important;
    border-radius: 0;
    padding: 5px;
}

.table-accounting .form-control:disabled,
.table-accounting .form-control[readonly] {
    background: transparent !important;
}

.payment-table .form-control.form-control-sm {
    background: var(--app-warning-surface) !important;
    border-radius: 0;
    padding: 0.3125rem 0.5rem;
}

.payment-table .form-control.form-control-sm:read-only {
    background: transparent !important;
}

.table-accounting .select2-container .select2-selection--single,
.table-accounting .select2-container .select2-selection--single .select2-selection__arrow {
    background: var(--app-warning-surface) !important;
    border-radius: 0;
    height: 1.5625rem !important;
}

.table-accounting .select2-container .select2-selection--single .select2-selection__arrow {
    width: 1.5rem !important;
}

.table-accounting .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 1.6875rem !important;
}

.table-accounting .col-percent,
.table-accounting .col-amount {
    max-width: 5rem;
    min-width: 3.75rem;
}

.table-accounting .min-width-select2-dropdown,
.table-accounting .select2-container--default .select2-selection--single {
    min-width: 12.5rem !important;
}

.payment-section {
    max-height: calc(100% - 15.625rem);
    overflow: auto;
    position: relative;
}

.payment-table thead th,
.payment-table tfoot td {
    padding: 0.3125rem;
}

.payment-summary {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    margin-top: var(--app-space-3);
    padding: var(--app-space-3);
}

.payment-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--app-space-1);
}

.payment-summary-label {
    color: var(--app-text-muted);
    font-weight: 500;
}

.bg-warning-subtle {
    background: var(--app-warning-surface) !important;
}

.calculation-flow {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0.625rem;
    color: #fff;
    padding: 1.5rem;
}

.calculation-flow .stage-card {
    backdrop-filter: blur(0.625rem);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 1rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.calculation-flow .stage-pre-taxable {
    border-left: 4px solid #4caf50;
}

.calculation-flow .stage-on-taxable {
    border-left: 4px solid #ff9800;
}

.calculation-flow .stage-gst {
    border-left: 4px solid #2196f3;
}

.calculation-flow .stage-post-gst {
    border-left: 4px solid #9c27b0;
}

.calculation-flow .stage-card:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.table-accounting input[type="number"],
.payment-table input[type="number"] {
    appearance: textfield;
}

.table-accounting input[type="number"]::-webkit-inner-spin-button,
.table-accounting input[type="number"]::-webkit-outer-spin-button,
.payment-table input[type="number"]::-webkit-inner-spin-button,
.payment-table input[type="number"]::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

@media (max-width: 991.98px) {
    .accounting-section,
    .payment-section {
        max-height: none;
    }
}