:root {
    --brand: #4b5fe2;
    --brand-dk: #3a4ec8;
    --brand-lt: #eef0fd;
    --brand-mid: #6677ee;
    --tbl-head: #1a1c2e;
    --page-bg: #f0f2f8;
    --surface: #ffffff;
    --border: #e2e5f0;
    --border2: #cdd1e8;
    --text: #1e2235;
    --text2: #4a5170;
    --muted: #8892ab;
    --red: #dc3545;
    --red-lt: #fde8ea;
    --amber: #f59e0b;
    --amber-lt: #fef3c7;
    --green: #198754;
    --green-lt: #d1f0e0;
    --indigo-lt: #eef0fd;
    --drw-bg: #3244c4;
    --drw-dk: #2536a8;
    --drw-border: #5066e8;
    --r: 8px;
    --r2: 5px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--page-bg);
    color: var(--text);
    font-size: 13.5px;
}

.smt-shell {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
}

/* ── Page header ─── */
.smt-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 0 .6rem;
    flex-wrap: wrap;
    gap: .5rem;
}

    .smt-page-header h4 {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--text);
        display: flex;
        align-items: center;
        gap: .45rem;
    }

        .smt-page-header h4 i {
            color: var(--brand);
        }

.smt-breadcrumb {
    font-size: .74rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}

    .smt-breadcrumb a {
        color: var(--brand);
        text-decoration: none;
    }

        .smt-breadcrumb a:hover {
            text-decoration: underline;
        }

/* ── CHANGE 3: Responsive body grid ─── */
.smt-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1rem;
    align-items: start;
}

/* ── LEFT column ─── */
.smt-left-col {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-width: 0;
}

/* ── Stat strip ─── */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .65rem;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

    .stat-card .sc-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .85rem;
        flex-shrink: 0;
    }

    .stat-card .sc-body {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .stat-card .sc-lbl {
        font-size: .67rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--muted);
    }

    .stat-card .sc-num {
        font-size: 1.18rem;
        font-weight: 700;
        color: var(--text);
        line-height: 1.2;
    }

    .stat-card .sc-sub {
        font-size: .68rem;
        color: var(--muted);
        margin-top: .05rem;
    }

    .stat-card.sc-brand {
        border-color: #c4cdf8;
        background: var(--indigo-lt);
    }

        .stat-card.sc-brand .sc-icon {
            background: #d8dcfb;
            color: var(--brand);
        }

        .stat-card.sc-brand .sc-num {
            color: var(--brand);
        }

    .stat-card.sc-red .sc-icon {
        background: var(--red-lt);
        color: var(--red);
    }

    .stat-card.sc-red .sc-num {
        color: var(--red);
    }

    .stat-card.sc-amber .sc-icon {
        background: var(--amber-lt);
        color: #b45309;
    }

    .stat-card.sc-amber .sc-num {
        color: #b45309;
    }

    .stat-card.sc-sel .sc-icon {
        background: var(--indigo-lt);
        color: var(--brand);
    }

    .stat-card.sc-sel .sc-num {
        color: var(--brand);
    }

    .stat-card.sc-sel {
        border-color: #c4cdf8;
    }

/* ── Table card ─── */
.tbl-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tbl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: .4rem;
}

.tbl-toolbar-left {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.tbl-title {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text);
}

.sel-badge {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    background: var(--indigo-lt);
    color: var(--brand);
    border: 1px solid #c4cdf8;
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 600;
    padding: .15rem .55rem;
    opacity: 0;
    transform: scale(.88);
    transition: opacity .18s, transform .18s;
}

    .sel-badge.show {
        opacity: 1;
        transform: scale(1);
    }

/* CHANGE 3: adaptive table height */
.tbl-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(140vh - 500px);
    min-height: 220px;
}

.smt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
    min-width: 820px;
}

    .smt-table thead th {
        background: var(--tbl-head);
        color: #fff;
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        padding: .6rem .85rem;
        border-right: 1px solid rgba(255,255,255,.07);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 2;
    }

        .smt-table thead th:last-child {
            border-right: none;
        }

    .smt-table tbody tr {
        border-bottom: 1px solid var(--border);
        transition: background .1s;
    }

        .smt-table tbody tr:hover {
            background: #f5f7ff;
        }

        .smt-table tbody tr.sel-row {
            background: var(--indigo-lt);
        }

            .smt-table tbody tr.sel-row:hover {
                background: #e4e8fb;
            }

    .smt-table tbody td {
        padding: .55rem .85rem;
        vertical-align: middle;
        color: var(--text2);
    }

        .smt-table tbody td.dim {
            color: var(--muted);
        }

/* Badges */
.bp {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    border-radius: 20px;
    padding: .18rem .58rem;
    font-size: .67rem;
    font-weight: 600;
}

    .bp::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
        display: inline-block;
    }

.bp-danger {
    background: var(--red-lt);
    color: var(--red);
}

.bp-amber {
    background: var(--amber-lt);
    color: #92400e;
}

.bp-green {
    background: var(--green-lt);
    color: var(--green);
}

.smt-cb {
    width: 14px;
    height: 14px;
    accent-color: var(--brand);
    cursor: pointer;
}

.btn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: var(--r2);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all .12s;
}

    .btn-ico:hover {
        border-color: var(--brand);
        color: var(--brand);
        background: var(--indigo-lt);
    }

.tbl-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem 1rem;
    border-top: 1px solid var(--border);
    background: #fafbfe;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: .4rem;
}

.tbl-footer-info {
    font-size: .72rem;
    color: var(--muted);
}

/* Pagination */
.smt-pg {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}

    .smt-pg .pbn {
        min-width: 28px;
        height: 28px;
        border-radius: var(--r2);
        border: 1px solid var(--border);
        background: var(--surface);
        font-size: .72rem;
        font-weight: 600;
        color: var(--muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all .12s;
        padding: 0 .4rem;
    }

        .smt-pg .pbn.act {
            background: var(--brand);
            color: #fff;
            border-color: var(--brand);
        }

        .smt-pg .pbn:hover:not(.act) {
            background: var(--indigo-lt);
            color: var(--brand);
            border-color: #c4cdf8;
        }

        .smt-pg .pbn:disabled {
            opacity: .4;
            cursor: not-allowed;
        }

/* Skeleton */
@@keyframes shimmer {
    0% {
        background-position: -600px 0
    }

    100% {
        background-position: 600px 0
    }
}

.sk {
    background: linear-gradient(90deg,#eaecf6 25%,#f4f5fb 50%,#eaecf6 75%);
    background-size: 1200px 100%;
    animation: shimmer 1.3s linear infinite;
    border-radius: 3px;
    height: 11px;
    display: inline-block;
}

/* ── RIGHT — Filter sidebar ─── */
.smt-right-col {
    position: sticky;
    top: 10px;
}

.filter-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    overflow: hidden;
}

.filter-card-header {
    background: var(--brand);
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}

    .filter-card-header span {
        color: #fff;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .filter-card-header i {
        color: rgba(255,255,255,.8);
        font-size: .78rem;
    }

.filter-body {
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.filter-label {
    font-size: .69rem;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: .2rem;
}

.filter-body .form-control,
.filter-body .form-select {
    font-size: .78rem;
    border: 1px solid var(--border2);
    border-radius: var(--r2);
    height: 34px;
    padding: 0 .65rem;
    color: var(--text);
    background: var(--surface);
    transition: border .15s, box-shadow .15s;
}

    .filter-body .form-control:focus,
    .filter-body .form-select:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(75,95,226,.12);
        outline: none;
    }

    .filter-body .form-control::placeholder {
        color: var(--muted);
        font-size: .76rem;
    }

/* Select2 */
.filter-body .select2-container--default .select2-selection--single {
    border: 1px solid var(--border2) !important;
    border-radius: var(--r2) !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
}

    .filter-body .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: .78rem !important;
        line-height: 34px !important;
        color: var(--text) !important;
        padding-left: .65rem;
    }

    .filter-body .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 32px !important;
    }

.filter-body .select2-container {
    width: 100% !important;
}

/* Context pills */
.ctx-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--indigo-lt);
    border: 1px solid #c4cdf8;
    border-radius: 20px;
    padding: .2rem .65rem;
    font-size: .68rem;
    color: var(--text2);
}

    .ctx-pill i {
        color: var(--brand);
        font-size: .68rem;
    }

    .ctx-pill strong {
        color: var(--brand);
        font-weight: 600;
    }

.btn-brand {
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--r2);
    padding: .45rem .9rem;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

    .btn-brand:hover {
        background: var(--brand-dk);
    }

.btn-outline-s {
    background: var(--surface);
    color: var(--text2);
    border: 1px solid var(--border2);
    border-radius: var(--r2);
    padding: .44rem .75rem;
    font-size: .78rem;
    cursor: pointer;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
}

    .btn-outline-s:hover {
        background: var(--indigo-lt);
        color: var(--brand);
        border-color: #c4cdf8;
    }

.howto-list {
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin: 0;
}

    .howto-list li {
        font-size: .72rem;
        color: var(--muted);
        line-height: 1.5;
    }

/* ── Settle Drawer ─── */
.smt-settle-drawer {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: 0 -4px 20px rgba(75,95,226,.15);
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s cubic-bezier(.4,0,.2,1);
    margin-top: .85rem;
}

    .smt-settle-drawer.open {
        max-height: 1200px;
    }

.drw-header {
    background: var(--brand);
    padding: .7rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.drw-title {
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: .45rem;
}

    .drw-title i {
        color: #a8b8f8;
    }

.drw-invoice-nos {
    font-size: .7rem;
    color: rgba(255,255,255,.75);
    font-weight: 400;
    max-width: 400px;
    word-break: break-word;
}

.btn-drw-confirm {
    background: #fff;
    color: var(--brand);
    border: none;
    border-radius: var(--r2);
    padding: .48rem 1.2rem;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
}

    .btn-drw-confirm:hover {
        background: #eef0fd;
        box-shadow: 0 2px 8px rgba(0,0,0,.1);
    }

    .btn-drw-confirm:disabled {
        background: rgba(255,255,255,.4);
        color: rgba(75,95,226,.5);
        cursor: not-allowed;
    }

.btn-drw-cancel {
    background: transparent;
    color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--r2);
    padding: .44rem .85rem;
    font-size: .78rem;
    cursor: pointer;
    transition: all .13s;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

    .btn-drw-cancel:hover {
        background: rgba(255,255,255,.12);
        color: #fff;
    }

.drw-body {
    padding: 1rem 1.25rem;
}

.alloc-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-bottom: 1rem;
}

.alloc-box {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.alloc-lbl {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.alloc-inp {
    border: 1.5px solid var(--border2);
    border-radius: var(--r2);
    padding: .5rem .8rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    width: 100%;
    transition: border .15s;
    background: var(--surface);
}

    .alloc-inp:focus {
        border-color: var(--brand);
        outline: none;
        box-shadow: 0 0 0 3px rgba(75,95,226,.1);
    }

    .alloc-inp[readonly] {
        background: #f5f6fc;
        color: var(--text2);
    }

    .alloc-inp.bal-pos {
        color: var(--green);
        border-color: #a3d9b8;
    }

    .alloc-inp.bal-neg {
        color: var(--red);
        border-color: #f0a0a8;
    }

.modal-tbl-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 500px;
    border: 1px solid var(--border);
    border-radius: var(--r2);
    margin-bottom: .9rem;
}

.modal-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: .74rem;
    min-width: 900px;
}

    .modal-tbl thead th {
        background: var(--tbl-head);
        color: #fff;
        font-size: .62rem;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        padding: .5rem .7rem;
        border-right: 1px solid rgba(255,255,255,.06);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 2;
    }

        .modal-tbl thead th:last-child {
            border-right: none;
        }

    .modal-tbl tbody td {
        padding: .45rem .7rem;
        border-bottom: 1px solid var(--border);
        color: var(--text2);
        vertical-align: middle;
    }

    .modal-tbl tbody tr:hover td {
        background: #f5f7ff;
    }

    .modal-tbl tbody tr.m-checked td {
        background: var(--indigo-lt);
    }

        .modal-tbl tbody tr.m-checked td:first-child {
            border-left: 3px solid var(--brand);
        }

.tds-in {
    border: 1px solid var(--border2);
    border-radius: 4px;
    padding: .25rem .4rem;
    font-size: .73rem;
    width: 82px;
    color: var(--text);
    background: var(--surface);
    transition: border .12s;
}

    .tds-in:focus {
        border-color: var(--brand);
        outline: none;
    }

    .tds-in:disabled {
        background: #f2f3f8;
        opacity: .6;
        cursor: not-allowed;
    }

.m-status {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    border-radius: 12px;
    padding: .15rem .55rem;
    font-size: .65rem;
    font-weight: 600;
    white-space: nowrap;
}

    .m-status::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
        display: inline-block;
    }

.m-status-pending {
    background: var(--red-lt);
    color: var(--red);
}

.m-status-full {
    background: var(--green-lt);
    color: var(--green);
}

.m-status-partial {
    background: var(--amber-lt);
    color: #92400e;
}

/* Payment form */
.pay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .65rem;
    padding-top: .85rem;
    border-top: 1px solid var(--border);
}

.pay-field {
    display: flex;
    flex-direction: column;
    gap: .22rem;
}

.pay-lbl {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text2);
}

.pay-inp {
    border: 1px solid var(--border2);
    border-radius: var(--r2);
    padding: .42rem .7rem;
    font-size: .8rem;
    color: var(--text);
    background: var(--surface);
    transition: border .15s;
}

    .pay-inp:focus {
        border-color: var(--brand);
        outline: none;
        box-shadow: 0 0 0 3px rgba(75,95,226,.1);
    }

    .pay-inp::placeholder {
        color: var(--muted);
    }

    .pay-inp.is-invalid {
        border-color: var(--red) !important;
    }

.pay-err {
    font-size: .66rem;
    color: var(--red);
    display: none;
    margin-top: .15rem;
}

/* ═══════════════════════════════════════════════════
                   CHANGE 3 — Comprehensive Responsive Breakpoints
                ═══════════════════════════════════════════════════ */

/* Large tablet */
@@media (max-width: 1200px) {
    .smt-body {
        grid-template-columns: 1fr 270px;
    }

    .stat-strip {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet — collapse sidebar below table */
@@media (max-width: 1024px) {
    .smt-body {
        grid-template-columns: 1fr 250px;
        gap: .75rem;
    }

    .stat-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .alloc-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Small tablet — full-width layout */
@@media (max-width: 768px) {
    .smt-body {
        grid-template-columns: 1fr;
    }

    .smt-right-col {
        position: static;
        order: -1;
    }
    /* filters on top on mobile */
    .stat-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .alloc-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .tbl-scroll {
        max-height: calc(100vh - 260px);
        min-height: 180px;
    }

    .drw-header {
        flex-direction: column;
        align-items: flex-start;
    }

        .drw-header > div:last-child {
            width: 100%;
            justify-content: flex-end;
            display: flex;
        }
}

/* Phone landscape */
@@media (max-width: 600px) {
    .stat-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem;
    }

    .stat-card {
        padding: .6rem .75rem;
        gap: .55rem;
    }

        .stat-card .sc-num {
            font-size: 1rem;
        }

    .pay-grid {
        grid-template-columns: 1fr 1fr;
    }

    .alloc-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Phone portrait */
@@media (max-width: 480px) {
    .smt-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .stat-strip {
        grid-template-columns: 1fr 1fr;
        gap: .4rem;
    }

    .alloc-row {
        grid-template-columns: 1fr;
    }

    .pay-grid {
        grid-template-columns: 1fr;
    }

    .tbl-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .tbl-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Very small phone */
@@media (max-width: 360px) {
    .stat-strip {
        grid-template-columns: 1fr;
    }

    .stat-card .sc-num {
        font-size: .95rem;
    }
}