:root {
    --bg: #f6f8fb;
    --surface: #fff;
    --text: #18212f;
    --muted: #7b8797;
    --primary: #50C878;
    --primary2: #78D99A;
    --danger: #e5484d;
    --success: #2f9e6f;
    --warning: #f59f00;
    --border: #e8ecf2;
    --shadow: 0 10px 35px rgba(34, 45, 70, .07);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    background: var(--bg);
    color: var(--text);
}

a {
    text-decoration: none;
    color: inherit;
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px;
    background: #111827;
    color: #dce3ee;
    padding: 24px 18px;
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    z-index: 30;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px 26px;
}

.brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), #78D99A);
    display: grid;
    place-items: center;
    font-size: 20px;
}

.brand strong {
    display: block;
    color: #fff;
    font-size: 20px;
}

.brand span {
    font-size: 12px;
    color: #8ea0b7;
}

.sidebar nav {
    display: grid;
    gap: 7px;
}

.sidebar nav a, .sidebar-footer a {
    padding: 12px 14px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14px;
}

.sidebar nav a:hover, .sidebar nav a.active {
    background: rgba(80, 200, 120, .16);
    color: #50C878;
    box-shadow: inset 3px 0 0 #50C878;
}

.sidebar-footer {
    margin-top: auto;
}

.main {
    margin-left: 260px;
    width: calc(100% - 260px);
}

.topbar {
    height: 88px;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(246, 248, 251, .85);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar h1 {
    margin: 0;
    font-size: 24px;
}

.topbar p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.user-chip div {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #E8F8EE;
    color: var(--primary);
    font-weight: 700;
}

.content {
    padding: 26px 32px 45px;
}

.grid-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.card, .panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.stat {
    padding: 20px;
}

.stat .icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #ECF9F0;
    color: var(--primary);
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}

.stat small {
    color: var(--muted);
}

.stat h3 {
    font-size: 28px;
    margin: 5px 0 0;
}

.panel {
    padding: 22px;
    margin-top: 22px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.panel-head h2 {
    margin: 0;
    font-size: 18px;
}

.btn {
    border: 0;
    border-radius: 11px;
    padding: 10px 15px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-light {
    background: #f1f3f7;
    color: var(--text);
}

.btn-danger {
    background: #fff0f0;
    color: var(--danger);
}

.table-wrap {
    overflow: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    text-align: left;
    padding: 13px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    white-space: nowrap;
}

th {
    color: #667085;
    font-weight: 600;
    background: #fafbfc;
}

.badge {
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.badge.success {
    background: #e9f8f1;
    color: var(--success);
}

.badge.danger {
    background: #fff0f0;
    color: var(--danger);
}

.badge.warning {
    background: #fff7df;
    color: #a66b00;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.field {
    display: grid;
    gap: 7px;
}

.field.full {
    grid-column: 1/-1;
}

.field label {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
}

.input, .select, .textarea {
    width: 100%;
    border: 1px solid #dfe4ea;
    background: #fff;
    border-radius: 11px;
    padding: 11px 12px;
    font: inherit;
    outline: 0;
}

.input:focus, .select:focus, .textarea:focus {
    border-color: #50C878;
    box-shadow: 0 0 0 3px rgba(80, 200, 120, .12);
}

.textarea {
    min-height: 95px;
    resize: vertical;
}

.alert {
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-size: 14px;
}

.alert.success {
    background: #eaf8f1;
    color: #247856;
}

.alert.error {
    background: #fff0f0;
    color: #b42318;
}

.search {
    max-width: 330px;
    position: relative;
}

.search i {
    position: absolute;
    left: 12px;
    top: 13px;
    color: #98a2b3;
}

.search input {
    padding-left: 36px;
}

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
}

.login-visual {
    background: radial-gradient(circle at 20% 20%, #78D99A 0, #50C878 28%, #17663B 100%);
    padding: 70px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-visual h1 {
    font-size: 52px;
    line-height: 1.05;
    margin: 0 0 18px;
    max-width: 600px;
}

.login-visual p {
    max-width: 560px;
    color: #E7F8ED;
    font-size: 17px;
}

.login-box {
    display: grid;
    place-items: center;
    padding: 32px;
}

.login-card {
    width: min(430px, 100%);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 34px;
    box-shadow: var(--shadow);
}

.login-card h2 {
    font-size: 28px;
    margin: 0 0 7px;
}

.login-card>p {
    color: var(--muted);
    margin: 0 0 25px;
}

.login-card .field {
    margin-bottom: 15px;
}

.login-card .btn {
    width: 100%;
    justify-content: center;
    padding: 12px;
}

.muted {
    color: var(--muted);
}

.receipt {
    max-width: 820px;
    margin: auto;
    background: #fff;
    padding: 38px;
    border-radius: 18px;
    border: 1px solid var(--border);
}

.receipt-head {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #111827;
    padding-bottom: 18px;
    margin-bottom: 20px;
}

.receipt-total {
    font-size: 30px;
    font-weight: 700;
}

.mobile-menu {
    display: none;
    border: 0;
    background: transparent;
    font-size: 20px;
}

@media(max-width:1050px) {
    .grid-cards {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media(max-width:800px) {
    .sidebar {
        transform: translateX(-100%);
        transition: .2s;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main {
        margin-left: 0;
        width: 100%;
    }

    .mobile-menu {
        display: block;
    }

    .topbar {
        padding: 0 18px;
    }

    .content {
        padding: 20px 18px;
    }

    .login-page {
        grid-template-columns: 1fr;
    }

    .login-visual {
        display: none;
    }

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

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

}

@media(max-width:520px) {
    .grid-cards {
        grid-template-columns: 1fr;
    }

    .user-chip span {
        display: none;
    }

}

@media print {
    .sidebar, .topbar, .no-print {
        display: none!important;
    }

    .main {
        margin: 0;
        width: 100%;
    }

    .content {
        padding: 0;
    }

    .receipt {
        border: 0;
        box-shadow: none;
    }

}

/* v2 refinements */
.action-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-sm {
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 12px;
}

.btn-xs {
    padding: 5px 9px;
    border-radius: 8px;
    font-size: 11px;
}

.btn-edit {
    background: #ECF9F0;
    color: #2E8B57;
}

.btn-edit:hover {
    background: #DDF4E5;
}

.btn-stock {
    background: #eaf8f1;
    color: #247856;
}

.btn-stock:hover {
    background: #daf2e6;
}

.btn-view {
    background: #ECF9F0;
    color: #278B55;
}

.btn-receipt {
    background: #fff3e8;
    color: #b45309;
}

.btn-receipt:hover {
    background: #ffe8d1;
}

.badge.info {
    background: #ECF9F0;
    color: #2E8B57;
}

.field-help {
    color: var(--muted);
    font-size: 12px;
}

.stock-preview {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #F4FCF7;
    border: 1px solid #D8F0E0;
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: 100%;
}

.stock-preview i {
    color: var(--primary);
}

.stock-preview small, .stock-preview strong {
    display: block;
}

.stock-preview strong {
    margin-top: 2px;
}

.stock-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.stock-summary>div {
    padding: 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid var(--border);
}

.stock-summary small, .stock-summary strong {
    display: block;
}

.stock-summary small {
    color: var(--muted);
    font-size: 12px;
}

.stock-summary strong {
    font-size: 18px;
    margin-top: 5px;
}

.issue-product-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fbfcfe;
    margin-bottom: 12px;
}

.issue-stock-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 9px;
    color: var(--muted);
    font-size: 12px;
}

.pieces-label {
    color: var(--primary);
    font-weight: 600;
}

.customer-profile .eyebrow {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--primary);
    font-weight: 700;
}

.customer-profile h2 {
    margin: 5px 0;
}

.panel-subtitle {
    margin: 4px 0 0;
    font-size: 12px;
}

.history-grid>.panel:first-child {
    margin-top: 0;
}

.history-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.history-dot.add {
    background: #2f9e6f;
}

.history-dot.issue {
    background: #e5484d;
}

.history-dot.adjust {
    background: #f59f00;
}

.qty-positive {
    color: #247856;
    font-weight: 700;
}

.qty-negative {
    color: #b42318;
    font-weight: 700;
}

.chart-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
}

.chart-grid .panel {
    margin-top: 0;
}

.chart-panel {
    min-width: 0;
}

.ims-chart {
    width: 100%;
    display: block;
}

.report-tabs {
    display: inline-flex;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 5px;
    margin-bottom: 20px;
}

.report-tabs a {
    padding: 9px 17px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.report-tabs a.active {
    background: var(--primary);
    color: #fff;
}

.report-cards {
    margin-bottom: 18px;
}

.receipt-summary {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 28px;
    align-items: end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.receipt-summary span, .receipt-summary strong {
    display: block;
}

.receipt-summary strong {
    font-size: 22px;
    margin-top: 4px;
}

@media(max-width:1000px) {
    .chart-grid {
        grid-template-columns: 1fr;
    }

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

}

@media(max-width:600px) {
    .stock-summary {
        grid-template-columns: 1fr;
    }

    .issue-stock-meta {
        display: grid;
    }

    .receipt-summary {
        grid-template-columns: 1fr;
    }

}

/* v3 payments + delete */
.inline-form {
    display: inline;
    margin: 0;
}

.btn-delete {
    background: #fee2e2;
    color: #b91c1c;
}

.btn-delete:hover {
    background: #fecaca;
}

.payment-box {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #D8F0E0;
    border-radius: 16px;
    background: #F7FCF9;
}

.bill-total {
    font-size: 14px;
    color: var(--muted);
}

.bill-total strong {
    color: var(--primary);
    font-size: 20px;
    margin-left: 5px;
}

.payment-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.payment-summary>div {
    padding: 13px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.payment-summary span, .payment-summary strong {
    display: block;
}

.payment-summary span {
    font-size: 12px;
    color: var(--muted);
}

.payment-summary strong {
    margin-top: 4px;
    font-size: 18px;
}

.line-amount {
    color: #278B55;
    font-weight: 700;
}

.payment-badge {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.payment-badge.full {
    background: #e9f8f1;
    color: #247856;
}

.payment-badge.advance {
    background: #fff7df;
    color: #a66b00;
}

.payment-badge.unpaid {
    background: #fff0f0;
    color: #b42318;
}

@media(max-width:600px) {
    .payment-summary {
        grid-template-columns: 1fr;
    }

    .action-group {
        flex-wrap: wrap;
    }

}

/* v6 management actions */
.btn-update {
    background: #ECF9F0;
    color: #2E8B57;
}

.btn-update:hover {
    background: #DDF4E5;
}

.btn-delete-solid {
    background: #fff0f0;
    color: #b42318;
}

.btn-delete-solid:hover {
    background: #fee2e2;
}

.action-group.compact {
    gap: 6px;
    flex-wrap: nowrap;
}

.action-group.compact .btn {
    white-space: nowrap;
}

.danger-note {
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff7f7;
    border: 1px solid #ffd7d7;
    color: #9f2525;
    font-size: 13px;
    margin: 0 0 18px;
}

/* layout utilities - v7 */
.page-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px;
}

.page-container-narrow {
    max-width: 760px;
    margin: 50px auto;
    padding: 20px;
}

.heading-reset {
    margin: 0;
}

.link-centered {
    display: block;
    text-align: center;
    margin-top: 15px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-18 {
    margin-top: 18px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-28 {
    margin-top: 28px;
}

.text-xs-muted {
    font-size: 11px;
    margin-top: 4px;
    color: var(--muted);
}

.inline-flex-gap {
    display: flex;
    gap: 8px;
}

.action-row {
    margin-top: 18px;
}

.product-qty-row {
    display: flex;
    gap: 8px;
}

.panel-head-spaced {
    margin-top: 28px;
}

/* system-wide emerald theme */
::selection {
    background: rgba(80, 200, 120, .28);
    color: #172033;
}

a:focus-visible, button:focus-visible, .btn:focus-visible {
    outline: 3px solid rgba(80, 200, 120, .28);
    outline-offset: 2px;
}

.btn-primary:hover {
    background: #46B86C;
}

.btn-primary:active {
    background: #3FAA62;
}

.brand-icon {
    box-shadow: 0 10px 24px rgba(80, 200, 120, .22);
}

.sidebar nav a:hover i, .sidebar nav a.active i {
    color: #50C878;
}

.user-chip div {
    box-shadow: 0 0 0 1px rgba(80, 200, 120, .18);
}

.stat .icon {
    box-shadow: inset 0 0 0 1px rgba(80, 200, 120, .12);
}

.input:hover, .select:hover, .textarea:hover {
    border-color: #B9E8C8;
}

.report-tabs a:hover {
    color: #2E8B57;
    background: #F1FBF4;
}

.btn-view:hover {
    background: #DDF4E5;
}

.badge.info {
    border: 1px solid #D6EEDF;
}

.panel-accent {
    border-top: 3px solid #50C878;
}

.text-primary, .link-primary {
    color: #50C878!important;
}

.bg-primary {
    background: #50C878!important;
}

.border-primary {
    border-color: #50C878!important;
}

/* =====================================================
   V8 - Categories, Staff & Compact Dispatch Lines
===================================================== */

.field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.field-label-row label {
    margin: 0;
}

.field-inline-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.field-inline-action:hover {
    text-decoration: underline;
}

.manage-grid {
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(480px, 1.28fr);
    gap: 20px;
    align-items: start;
}

.manage-grid .panel {
    margin-top: 0;
}

.issue-lines {
    display: grid;
    gap: 10px;
}

.issue-lines-head,
.issue-line {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) 130px 165px 145px 42px;
    gap: 10px;
    align-items: start;
}

.issue-lines-head {
    padding: 0 12px 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.issue-line {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fbfcfe;
}

.issue-line-product,
.issue-line-field,
.issue-line-total-wrap {
    min-width: 0;
}

.issue-line .input,
.issue-line .select,
.issue-line-total {
    min-height: 42px;
}

.issue-line-product small,
.issue-line-field small {
    display: block;
    min-height: 16px;
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.3;
}

.available-label {
    color: var(--muted);
}

.pieces-label {
    color: var(--primary);
    font-weight: 700;
}

.price-help {
    color: var(--muted);
}

.issue-line-total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: #278B55;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.issue-remove-btn {
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    align-self: start;
    background: #fff0f0;
    color: #b42318;
    cursor: pointer;
    transition: .18s ease;
}

.issue-remove-btn:hover {
    background: #fee2e2;
    transform: translateY(-1px);
}

.issue-mobile-label {
    display: none;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.payment-form-grid {
    align-items: start;
}

.payment-form-grid .field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.payment-form-grid .input,
.payment-form-grid .select {
    width: 100%;
}

.payment-form-grid .field-help {
    min-height: 17px;
    margin-top: 6px;
    line-height: 1.35;
}

.payment-help-placeholder {
    visibility: hidden;
}

@media (max-width: 1180px) {
    .issue-lines-head,
    .issue-line {
        grid-template-columns: minmax(220px, 1.8fr) 110px 145px 130px 42px;
    }
}

@media (max-width: 900px) {
    .manage-grid {
        grid-template-columns: 1fr;
    }

    .issue-lines-head {
        display: none;
    }

    .issue-line {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .issue-line-product {
        grid-column: 1 / -1;
    }

    .issue-line-total-wrap {
        align-self: end;
    }

    .issue-remove-btn {
        align-self: end;
    }

    .issue-mobile-label {
        display: block;
    }
}

@media (max-width: 560px) {
    .issue-line {
        grid-template-columns: 1fr;
    }

    .issue-line-product,
    .issue-line-field,
    .issue-line-total-wrap {
        grid-column: 1;
    }

    .issue-remove-btn {
        width: 100%;
        height: 38px;
    }

    .payment-box {
        padding: 14px;
    }

    .field-label-row {
        align-items: flex-start;
    }
}

/* =====================================================
   V9 - Installments, Payments & Day End
===================================================== */
.payment-installment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

.readonly-value {
    display: flex;
    align-items: center;
    background: #f8fafc;
    color: #278B55;
    font-weight: 700;
}

.payment-derived .select {
    background: #f8fafc;
    color: #667085;
}

.installment-summary {
    margin-top: 0;
}

.installment-plan-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.installment-plan-bar > div {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #D8F0E0;
    background: #F7FCF9;
}

.installment-plan-bar span,
.installment-plan-bar strong {
    display: block;
}

.installment-plan-bar span {
    color: var(--muted);
    font-size: 11px;
}

.installment-plan-bar strong {
    margin-top: 4px;
    color: #278B55;
    font-size: 15px;
}

.receive-payment-panel {
    border-top: 3px solid var(--primary);
}

.day-end-banner {
    margin-top: 0;
    margin-bottom: 20px;
    border-top: 3px solid var(--primary);
}

.day-end-summary {
    margin-top: 0;
}

.money-stat {
    font-size: 22px !important;
}

@media (max-width: 900px) {
    .payment-installment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .installment-plan-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .payment-installment-grid,
    .installment-plan-bar {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   V12 - Product specific installments
===================================================== */
.installment-payment-panel {
    border-color: #cfeedd;
    background: linear-gradient(180deg,#ffffff,#f7fcf9);
}
.installment-product-grid {
    display: grid;
    gap: 16px;
}
.installment-status-cards {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 10px;
}
.installment-status-cards > div {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
}
.installment-status-cards span,
.installment-status-cards strong { display:block; }
.installment-status-cards span { color:var(--muted); font-size:11px; }
.installment-status-cards strong { margin-top:4px; font-size:16px; }
.installment-status-cards > div:last-child strong { color:var(--primary); }
.installment-receive-grid { align-items:end; }
.empty-installment-state {
    padding: 18px;
    border: 1px dashed #cfeedd;
    border-radius: 14px;
    display:flex;
    align-items:center;
    gap:12px;
    color:#247856;
    background:#f7fcf9;
}
.empty-installment-state i { font-size:22px; }
.empty-installment-state strong,
.empty-installment-state span { display:block; }
.empty-installment-state span { margin-top:3px; color:var(--muted); font-size:12px; }
.purchase-lines { display:grid; gap:10px; }
.purchase-lines-head,
.purchase-line {
    display:grid;
    grid-template-columns: minmax(230px,2fr) 90px 125px 105px 125px 110px 125px 42px;
    gap:10px;
    align-items:start;
}
.purchase-lines-head {
    padding:0 12px 7px;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.purchase-line {
    padding:12px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fbfcfe;
}
.purchase-line > * { min-width:0; }
.purchase-line small { display:block; margin-top:5px; min-height:15px; font-size:10px; }
.purchase-line-total {
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:0 10px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    color:#278b55;
    font-weight:700;
    white-space:nowrap;
}
.purchase-remove-btn {
    width:42px;height:42px;border:0;border-radius:10px;background:#fff0f0;color:#b42318;
    display:grid;place-items:center;cursor:pointer;
}
.purchase-mobile-label { display:none; }
@media(max-width:1250px){
    .purchase-lines-head,.purchase-line { grid-template-columns:minmax(210px,1.8fr) 80px 110px 95px 110px 100px 115px 40px; gap:8px; }
}
@media(max-width:900px){
    .installment-status-cards { grid-template-columns:repeat(2,1fr); }
    .purchase-lines-head { display:none; }
    .purchase-line { grid-template-columns:1fr 1fr; }
    .purchase-product { grid-column:1/-1; }
    .purchase-mobile-label { display:block; margin-bottom:6px; color:var(--muted); font-size:10px; font-weight:700; }
}
@media(max-width:560px){
    .installment-status-cards { grid-template-columns:1fr; }
    .purchase-line { grid-template-columns:1fr; }
    .purchase-product { grid-column:1; }
    .purchase-remove-btn { width:100%; }
}
.customer-picker-panel { margin-top:0; }
.customer-picker-row { display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:10px; align-items:center; }
@media(max-width:600px){ .customer-picker-row { grid-template-columns:1fr; } .customer-picker-row .btn { width:100%; justify-content:center; } }


/* =====================================================
   V13 - Multi product installment receiving
===================================================== */
.multi-installment-list {
    display:grid;
    gap:10px;
}
.multi-installment-row {
    display:grid;
    grid-template-columns:32px minmax(180px,1.45fr) repeat(4,minmax(105px,.8fr)) minmax(125px,.9fr) minmax(105px,.75fr);
    gap:10px;
    align-items:center;
    padding:12px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    cursor:pointer;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.multi-installment-row.selected {
    border-color:#9bddb3;
    background:#f7fcf9;
    box-shadow:0 0 0 3px rgba(80,200,120,.08);
}
.multi-installment-check { display:grid; place-items:center; }
.multi-installment-check input { width:18px; height:18px; accent-color:var(--primary); }
.multi-installment-product strong,
.multi-installment-product span,
.multi-installment-stat span,
.multi-installment-stat strong,
.multi-installment-input span { display:block; }
.multi-installment-product strong { font-size:14px; }
.multi-installment-product span,
.multi-installment-stat span,
.multi-installment-input span { color:var(--muted); font-size:10px; margin-bottom:4px; }
.multi-installment-stat strong { font-size:13px; white-space:nowrap; }
.multi-installment-stat.remaining strong { color:var(--primary-dark); }
.multi-installment-input .input,
.multi-installment-input .select { min-height:40px; }
.multi-installment-input .input:disabled,
.multi-installment-input .select:disabled { opacity:.55; background:#f3f5f7; }
.installment-submit-bar {
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    gap:12px;
    margin-top:14px;
}
.installment-issued-by { width:min(360px,100%); margin:0; }
.installment-submit-bar .btn { min-height:42px; }
@media(max-width:1350px){
    .multi-installment-row { grid-template-columns:32px minmax(180px,1.4fr) repeat(2,minmax(110px,.8fr)) minmax(125px,.9fr) minmax(105px,.75fr); }
    .multi-installment-stat:nth-of-type(3), .multi-installment-stat:nth-of-type(4) { display:none; }
}
@media(max-width:900px){
    .multi-installment-row { grid-template-columns:32px 1fr 1fr; align-items:start; }
    .multi-installment-product { grid-column:2/-1; }
    .multi-installment-stat,
    .multi-installment-input { min-width:0; }
    .installment-submit-bar { flex-direction:column; align-items:stretch; }
    .installment-issued-by { width:100%; }
    .installment-submit-bar .btn { width:100%; justify-content:center; }
}
@media(max-width:560px){
    .multi-installment-row { grid-template-columns:28px 1fr; }
    .multi-installment-product { grid-column:2; }
    .multi-installment-stat,
    .multi-installment-input { grid-column:1/-1; }
}

/* =====================================================
   V18 - Installment actions and live purchase totals
===================================================== */
.multi-installment-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex-wrap:wrap;
}
.multi-installment-actions .btn {
    min-height:34px;
    padding:7px 9px;
}
@media(max-width:1550px){
    .multi-installment-row {
        grid-template-columns:32px minmax(170px,1.35fr) repeat(3,minmax(95px,.72fr)) minmax(120px,.85fr) minmax(95px,.7fr) minmax(150px,.9fr);
    }
}
@media(max-width:900px){
    .multi-installment-actions { grid-column:1/-1; justify-content:flex-start; }
}
@media(max-width:560px){
    .multi-installment-actions { grid-column:1/-1; }
    .multi-installment-actions .btn { flex:1; justify-content:center; }
}


/* ===== Bill-level installments ===== */
.bill-product-head,.bill-product-lines .purchase-line{grid-template-columns:minmax(260px,2fr) 100px 140px 150px 44px!important;}
.bill-payment-box{margin-top:18px;padding:18px;border:1px solid #d7eee0;border-radius:16px;background:#f8fffb;}
.bill-payment-title{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px;}
.bill-payment-title h3{margin:0 0 4px;font-size:16px;}.bill-payment-title p{margin:0;}.bill-payment-title>strong{font-size:20px;color:#169c54;white-space:nowrap;}
.bill-payment-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.bill-installment-card{border:1px solid #cfead9;border-radius:16px;padding:16px;background:#fbfffc;}
.bill-plan-select{display:flex;align-items:center;gap:9px;margin-bottom:14px;}
.bill-plan-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #e2eee6;border-radius:12px;overflow:hidden;margin-bottom:14px;}
.bill-plan-stats>div{padding:12px;border-right:1px solid #e2eee6;}.bill-plan-stats>div:last-child{border-right:0}.bill-plan-stats span{display:block;color:#758091;font-size:11px;margin-bottom:4px}.bill-plan-stats strong{font-size:14px;}
.bill-plan-pay-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end}.bill-pay-btn{height:44px;white-space:nowrap;}
@media(max-width:1000px){.bill-payment-grid,.bill-plan-stats{grid-template-columns:1fr 1fr}.bill-plan-pay-row{grid-template-columns:1fr 1fr}.bill-product-head,.bill-product-lines .purchase-line{grid-template-columns:minmax(210px,1.6fr) 90px 120px 130px 40px!important}}
@media(max-width:700px){.bill-product-head{display:none!important}.bill-product-lines .purchase-line{grid-template-columns:1fr!important}.bill-payment-grid,.bill-plan-stats,.bill-plan-pay-row{grid-template-columns:1fr}.bill-payment-title{flex-direction:column}.bill-plan-stats>div{border-right:0;border-bottom:1px solid #e2eee6}.bill-plan-stats>div:last-child{border-bottom:0}}

/* Receipt correction page */
.edit-receipt-stats{margin-bottom:18px}
.receipt-edit-list{display:flex;flex-direction:column;gap:12px}
.receipt-edit-row{display:grid;grid-template-columns:minmax(220px,2fr) minmax(110px,.65fr) minmax(150px,.9fr) minmax(150px,.9fr) auto;gap:12px;align-items:end;padding:14px;border:1px solid var(--border,#e6e9ef);border-radius:14px;background:#fff}
.receipt-edit-row .field{margin:0}
.receipt-edit-total-value,.receipt-edit-readonly{min-height:44px;display:flex;align-items:center;padding:0 12px;border:1px solid #e6e9ef;border-radius:10px;background:#f8fafb;font-weight:700}
.receipt-edit-readonly{flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.25}
.receipt-edit-readonly span{font-size:12px;color:#7a8494;font-weight:500;margin-top:3px}
.receipt-edit-save{padding-bottom:1px}
.receipt-edit-save .btn{white-space:nowrap}
@media(max-width:1050px){.receipt-edit-row{grid-template-columns:1fr 1fr}.receipt-edit-save{grid-column:1/-1}.receipt-edit-product{grid-column:1/-1}}
@media(max-width:650px){.receipt-edit-row{grid-template-columns:1fr}.receipt-edit-product,.receipt-edit-save{grid-column:auto}.receipt-edit-save .btn{width:100%;justify-content:center}}

/* ===== V22.1 - Simplified receipt correction ===== */
.receipt-correction-panel{overflow:hidden}
.correction-panel-head{margin-bottom:14px}
.correction-table{border:1px solid var(--border,#e4e8ee);border-radius:14px;overflow:hidden;background:#fff}
.correction-table-head,.correction-display-row{display:grid;grid-template-columns:minmax(240px,2fr) minmax(110px,.7fr) minmax(135px,.85fr) minmax(145px,.9fr) 100px;gap:12px;align-items:center}
.correction-table-head{padding:10px 14px;background:#f7f9fb;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.correction-record+.correction-record{border-top:1px solid var(--border,#e4e8ee)}
.correction-display-row{padding:13px 14px;min-height:58px}
.correction-display-row>div{min-width:0}
.correction-display-row .btn{min-height:34px;padding:7px 10px;justify-content:center}
.correction-main strong{font-size:14px}
.correction-editor{display:none;grid-template-columns:minmax(260px,2fr) minmax(120px,.7fr) minmax(150px,.9fr) minmax(150px,.9fr) auto;gap:12px;align-items:end;padding:14px;background:#f8fcfa;border-top:1px solid #d9eee1}
.correction-editor.is-open{display:grid}
.correction-editor .field{margin:0}
.correction-calculated-total{min-height:44px;display:flex;align-items:center;padding:0 12px;border:1px solid var(--border,#e4e8ee);border-radius:10px;background:#fff;font-weight:700;color:var(--primary-dark,#168b4d)}
.correction-editor-actions{display:flex;gap:8px;align-items:center}
.correction-editor-actions .btn{white-space:nowrap}
.payment-correction-editor{grid-template-columns:minmax(220px,1.4fr) minmax(150px,.8fr) minmax(150px,.8fr) auto}
.correction-payment-label{min-height:44px;display:flex;flex-direction:column;justify-content:center;padding:0 12px;border:1px solid var(--border,#e4e8ee);border-radius:10px;background:#fff}
.correction-payment-label span{font-size:10px;color:var(--muted);margin-bottom:3px}.correction-payment-label strong{font-size:14px}
@media(max-width:1050px){
  .correction-table-head{display:none}
  .correction-display-row{grid-template-columns:1.4fr repeat(3,1fr) auto}
  .correction-editor,.payment-correction-editor{grid-template-columns:1fr 1fr}
  .correction-product-field,.correction-payment-label{grid-column:1/-1}
  .correction-editor-actions{grid-column:1/-1;justify-content:flex-end}
}
@media(max-width:700px){
  .correction-display-row{grid-template-columns:1fr 1fr;gap:8px}
  .correction-main{grid-column:1/-1}
  .correction-display-row>div:last-child{grid-column:1/-1}
  .correction-display-row .btn{width:100%}
  .correction-editor,.payment-correction-editor{grid-template-columns:1fr}
  .correction-product-field,.correction-payment-label,.correction-editor-actions{grid-column:auto}
  .correction-editor-actions{flex-direction:column}
  .correction-editor-actions .btn{width:100%;justify-content:center}
}