/* ============================================================
   CraftGrid - Shared Document Status Badges
   Used by Purchase Requests, Purchase Orders and
   future ERP documents.
   ============================================================ */

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.65rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Draft */
.status-draft {
    background-color: #6c757d;
    color: #ffffff;
}

/* Draft status - shared visual treatment for transactional documents.
   Draft means the document is still editable and not posted/finalized. */
.cg-document-status-draft {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .28rem .62rem;
    border-radius: 999px;
    color: #7a5000;
    background: #fff0bf;
    border: 1px solid #e4c15a;
    font-size: .74rem;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: .01em;
    white-space: nowrap;
    box-shadow: 0 1px 1px rgba(122, 80, 0, .06);
}

.cg-document-status-draft i {
    font-size: .78rem;
}

.cg-document-status-draft:hover {
    background: #ffe9a3;
}

/* Submitted */
.status-submitted {
    background-color: #0d6efd;
    color: #ffffff;
}

/* Approved */
.status-approved {
    background-color: #198754;
    color: #ffffff;
}

/* Rejected */
.status-rejected {
    background-color: #dc3545;
    color: #ffffff;
}

/* Cancelled */
.status-cancelled {
    background-color: #343a40;
    color: #ffffff;
}

/* Partially Received */
.status-partially-received {
    background-color: #f59f00;
    color: #212529;
}

/* Completed */
.status-completed {
    background-color: #146c43;
    color: #ffffff;
}

/* Pending */
.status-pending {
    background-color: #6f42c1;
    color: #ffffff;
}

/* Fallback */
.status-default {
    background-color: #6c757d;
    color: #ffffff;
}

/* ============================================================
   CraftGrid - Authentication Header
   Premium branded header used on unauthenticated pages.
   ============================================================ */
.cg-auth-header {
    position: relative;
    z-index: 20;
    min-height: 116px;
    color: #fff;
    background: linear-gradient(108deg, #102f4a 0%, #07536a 43%, #078a67 78%, #10ad78 100%);
    overflow: hidden;
}

.cg-auth-header::after {
    content: "";
    position: absolute;
    width: 430px;
    height: 230px;
    right: 16%;
    top: -150px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    transform: rotate(-14deg);
}

.cg-auth-header-inner {
    width: min(1440px, 100%);
    min-height: 116px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 78px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    z-index: 1;
}

.cg-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 17px;
    color: #fff;
}

.cg-auth-logo {
    width: 50px;
    height: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    flex: 0 0 auto;
}

.cg-auth-logo span {
    display: block;
    border-radius: 4px;
    background: #f3c43f;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

.cg-auth-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.cg-auth-brand-copy strong {
    font-size: 2.18rem;
    font-weight: 760;
    letter-spacing: -.045em;
    color: #fff;
}

.cg-auth-brand-copy strong span { color: #19b681; }

.cg-auth-brand-copy small {
    margin-top: 8px;
    color: rgba(255,255,255,.72);
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .28em;
}

.cg-auth-header-tagline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 190px;
    color: rgba(255,255,255,.96);
    line-height: 1.22;
    font-size: .92rem;
}

.cg-auth-header-tagline strong { font-weight: 650; }
.cg-auth-header-tagline span { font-weight: 500; }

.cg-auth-header-tagline i {
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 14px;
    border-radius: 999px;
    background: #f3c43f;
}

.cg-auth-main {
    flex: 1 0 auto;
    width: 100%;
}

@media (max-width: 700px) {
    .cg-auth-header { min-height: 82px; }
    .cg-auth-header-inner { min-height: 82px; padding: 0 18px; }
    .cg-auth-logo { width: 35px; height: 35px; gap: 3px; }
    .cg-auth-brand { gap: 10px; }
    .cg-auth-brand-copy strong { font-size: 1.55rem; }
    .cg-auth-brand-copy small { margin-top: 5px; font-size: .42rem; letter-spacing: .19em; }
    .cg-auth-header-tagline { display: none; }
}


/* Login page uses its own full-bleed product experience.
   Keep the generic authentication header for other unauthenticated pages. */
.craftgrid-login-layout .cg-auth-header {
    display: none;
}

.craftgrid-login-layout .cg-auth-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.craftgrid-login-layout .cg-auth-main > .cg-login-page {
    flex: 1 1 auto;
}


/* ============================================================
   CraftGrid - Routing Status Badges
   Routing lifecycle statuses use soft semantic colors so that
   Active and Draft are immediately distinguishable.
   ============================================================ */

.cg-routing-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.cg-routing-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.cg-routing-status-active {
    background: #e4f7e9;
    color: #24763b;
}

.cg-routing-status-active .cg-routing-status-dot {
    background: #2cab52;
}

.cg-routing-status-draft {
    background: #fff1cc;
    color: #a56a00;
}

.cg-routing-status-draft .cg-routing-status-dot {
    background: #f0a500;
}

.cg-routing-status-default {
    background: #edf0f2;
    color: #5f6b76;
}

.cg-routing-status-default .cg-routing-status-dot {
    background: #7b8792;
}


/* ============================================================
   CraftGrid - BOM Status & Responsive List
   BOM lifecycle uses the same semantic status treatment as
   Routings: Active = green, Draft = amber, Inactive = grey.
   ============================================================ */

.cg-bom-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.cg-bom-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.cg-bom-status-active {
    background: #e4f7e9;
    color: #24763b;
}

.cg-bom-status-active .cg-bom-status-dot {
    background: #2cab52;
}

.cg-bom-status-draft {
    background: #fff1cc;
    color: #a56a00;
}

.cg-bom-status-draft .cg-bom-status-dot {
    background: #f0a500;
}

.cg-bom-status-inactive {
    background: #edf0f2;
    color: #5f6b76;
}

.cg-bom-status-inactive .cg-bom-status-dot {
    background: #7b8792;
}

@media (max-width: 767.98px) {
    .bom-index-header {
        align-items: flex-start !important;
        gap: 0.75rem;
    }

    .bom-index-header h2 {
        font-size: 1.65rem;
    }

    .bom-index-header > a {
        white-space: nowrap;
    }

    .bom-index-filters .card-body {
        padding: 1rem;
    }

    .bom-index-list {
        background: transparent;
        border: 0;
        box-shadow: none !important;
    }

    .bom-index-list .card-header {
        margin-bottom: 0.75rem;
        border-radius: 0.9rem;
        border: 1px solid rgba(10, 61, 46, 0.10);
        background: #fff;
    }

    .cg-boms-table {
        display: block;
    }

    .cg-boms-table thead {
        display: none;
    }

    .cg-boms-table tbody {
        display: block;
    }

    .cg-boms-table tbody tr {
        display: block;
        margin-bottom: 0.85rem;
        padding: 0.85rem 0.95rem;
        border: 1px solid rgba(10, 61, 46, 0.10);
        border-radius: 0.95rem;
        background: #fff;
        box-shadow: 0 4px 14px rgba(15, 55, 45, 0.06);
    }

    .cg-boms-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .cg-boms-table tbody td {
        display: grid;
        grid-template-columns: 7.2rem minmax(0, 1fr);
        align-items: center;
        gap: 0.65rem;
        min-height: 2.55rem;
        padding: 0.5rem 0;
        border: 0 !important;
        border-bottom: 1px solid #edf1ef !important;
        text-align: left !important;
    }

    .cg-boms-table tbody td:last-child {
        border-bottom: 0 !important;
    }

    .cg-boms-table tbody td::before {
        content: attr(data-label);
        color: #60788b;
        font-size: 0.67rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .cg-boms-table tbody td[data-label="Finished Item"] {
        align-items: start;
    }

    .cg-boms-table tbody td[data-label="Finished Item"] > div {
        grid-column: 2;
        margin-top: -0.35rem;
    }

    .cg-boms-table tbody td[data-label="Finished Item"] > strong {
        grid-column: 2;
    }

    .cg-boms-table tbody td[data-label="Action"] {
        display: flex;
        justify-content: flex-end;
        padding-top: 0.75rem;
    }

    .cg-boms-table tbody td[data-label="Action"]::before {
        display: none;
    }

    .bom-index-action .btn {
        min-width: 84px;
    }

    .cg-bom-status {
        justify-self: start;
    }
}


/* ============================================================
   CraftGrid - Production Orders responsive/mobile polish
   Desktop keeps the normal ERP table. Mobile changes dense
   index/detail tables into readable cards and prevents action
   buttons from overflowing the viewport.
   ============================================================ */

@media (max-width: 767.98px) {
    .production-orders-page-header,
    .production-order-details-header {
        align-items: flex-start !important;
        flex-direction: column;
        gap: .75rem;
    }

    .production-orders-page-header h2,
    .production-order-details-header h2 {
        font-size: 1.65rem;
        line-height: 1.15;
    }

    .production-orders-page-header > a {
        width: 100%;
    }

    .production-orders-filters .card-body {
        padding: 1rem;
    }

    .production-orders-list {
        background: transparent;
        border: 0;
        box-shadow: none !important;
    }

    .production-orders-list .card-header {
        margin-bottom: .75rem;
        border: 1px solid rgba(10,61,46,.10);
        border-radius: .9rem;
        background: #fff;
        padding: .8rem .9rem;
    }

    .production-orders-list .table-responsive {
        overflow: visible;
    }

    .production-orders-table {
        display: block;
    }

    .production-orders-table thead {
        display: none;
    }

    .production-orders-table tbody {
        display: block;
    }

    .production-orders-table tbody tr {
        display: block;
        margin-bottom: .85rem;
        padding: .8rem .9rem;
        border: 1px solid rgba(10,61,46,.10);
        border-radius: .95rem;
        background: #fff;
        box-shadow: 0 4px 14px rgba(15,55,45,.06);
    }

    .production-orders-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .production-orders-table tbody td {
        display: grid;
        grid-template-columns: 6.8rem minmax(0,1fr);
        align-items: center;
        gap: .55rem;
        min-height: 2.45rem;
        padding: .48rem 0;
        border: 0 !important;
        border-bottom: 1px solid #edf1ef !important;
        text-align: left !important;
        min-width: 0;
    }

    .production-orders-table tbody td:last-child {
        border-bottom: 0 !important;
    }

    .production-orders-table tbody td::before {
        content: attr(data-label);
        color: #60788b;
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .production-orders-table tbody td[data-label="Finished Item"] {
        align-items: start;
    }

    .production-orders-table tbody td[data-label="Finished Item"] > strong,
    .production-orders-table tbody td[data-label="Finished Item"] > div {
        grid-column: 2;
        min-width: 0;
    }

    .production-orders-table tbody td[data-label="Finished Item"] > div {
        margin-top: -.3rem;
    }

    .production-orders-table tbody td[data-label="Planned"],
    .production-orders-table tbody td[data-label="Produced"] {
        text-align: left !important;
    }

    .production-order-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: .5rem !important;
    }

    .production-order-actions > a,
    .production-order-actions > form,
    .production-order-actions > form > button {
        width: 100%;
        min-width: 0;
    }

    .production-order-actions > form {
        display: block !important;
    }

    .production-order-actions .production-order-complete-form {
        grid-column: 1 / -1;
        display: grid !important;
        grid-template-columns: minmax(0,1fr) auto;
        gap: .5rem !important;
        align-items: stretch !important;
    }

    .production-order-completion-input {
        width: 100% !important;
        min-width: 0;
    }

    .production-order-complete-button {
        width: auto !important;
        min-width: 88px;
    }

    .production-order-summary .row > [class*="col-"] {
        width: 100%;
    }

    .production-order-summary .card-body {
        padding: 1rem;
    }

    .production-order-materials .table-responsive {
        overflow: visible;
    }

    .production-order-materials-table {
        display: block;
    }

    .production-order-materials-table thead {
        display: none;
    }

    .production-order-materials-table tbody,
    .production-order-materials-table tbody tr {
        display: block;
    }

    .production-order-materials-table tbody tr {
        margin: .7rem;
        padding: .65rem .75rem;
        border: 1px solid #e4ece8;
        border-radius: .85rem;
        background: #fff;
    }

    .production-order-materials-table tbody td {
        display: grid;
        grid-template-columns: 6.7rem minmax(0,1fr);
        gap: .5rem;
        align-items: center;
        min-height: 2.35rem;
        padding: .42rem 0;
        border: 0 !important;
        border-bottom: 1px solid #edf1ef !important;
        text-align: left !important;
        min-width: 0;
    }

    .production-order-materials-table tbody td:last-child {
        border-bottom: 0 !important;
    }

    .production-order-materials-table tbody td::before {
        content: attr(data-label);
        color: #60788b;
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .production-order-materials-table tbody td[data-label="Component"] {
        align-items: start;
    }

    .production-order-materials-table tbody td[data-label="Component"] > strong,
    .production-order-materials-table tbody td[data-label="Component"] > div {
        grid-column: 2;
    }

    .production-order-materials-table tbody td[data-label="Component"] > div {
        margin-top: -.3rem;
    }

    /* Traceability tables are allowed to scroll rather than squeeze
       tiny columns into an unreadable mobile layout. */
    .production-order-details-header + .production-order-summary { margin-top: .1rem; }

    .production-order-details-header .btn {
        min-height: 42px;
    }
}

.production-order-uom { color: #6c757d; font-size: .82em; font-weight: 500; }


/* ============================================================
   Purchase Orders - mobile presentation
   Presentation only. No transaction/workflow logic.
   ============================================================ */
@media (max-width: 767.98px) {

    /* ---------- Common document header ---------- */
    .po-document-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .65rem;
    }

    .po-document-title-row {
        flex-wrap: nowrap !important;
        white-space: nowrap;
    }

    .po-document-title-row h2 {
        white-space: nowrap;
        font-size: 1.35rem;
        line-height: 1.2;
    }

    .po-document-actions {
        width: 100%;
        display: flex !important;
        flex-wrap: wrap;
        gap: .5rem !important;
    }

    .po-document-actions > *,
    .po-document-actions form,
    .po-document-actions a,
    .po-document-actions button {
        margin-left: 0 !important;
    }

    .po-document-actions .btn {
        min-height: 42px;
    }

    /* ---------- PO create/edit line cards ---------- */
    .po-create-lines-wrap,
    .po-edit-lines-wrap,
    .po-detail-lines-wrap {
        overflow: visible !important;
    }

    .po-create-lines-table,
    .po-edit-lines-table,
    .po-detail-lines-table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0;
        table-layout: auto;
    }

    .po-create-lines-table thead,
    .po-edit-lines-table thead,
    .po-detail-lines-table thead {
        display: none;
    }

    .po-create-lines-table tbody,
    .po-edit-lines-table tbody,
    .po-detail-lines-table tbody {
        display: block;
        width: 100%;
    }

    .po-create-lines-table tbody tr,
    .po-edit-lines-table tbody tr,
    .po-detail-lines-table tbody tr {
        display: block;
        width: calc(100% - 1.5rem);
        margin: .75rem;
        padding: .15rem .75rem;
        box-sizing: border-box;
        border: 1px solid #e1e7e5;
        border-radius: .85rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
    }

    .po-create-lines-table tbody td,
    .po-edit-lines-table tbody td,
    .po-detail-lines-table tbody td {
        display: grid !important;
        grid-template-columns: 6.7rem minmax(0,1fr);
        gap: .55rem;
        align-items: center;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 2.5rem;
        padding: .55rem 0;
        box-sizing: border-box;
        white-space: normal !important;
        overflow: hidden;
        border: 0 !important;
        border-bottom: 1px solid #edf1f0 !important;
        text-align: left !important;
    }

    .po-create-lines-table tbody td:last-child,
    .po-edit-lines-table tbody td:last-child,
    .po-detail-lines-table tbody td:last-child {
        border-bottom: 0 !important;
    }

    .po-create-lines-table tbody td::before,
    .po-edit-lines-table tbody td::before,
    .po-detail-lines-table tbody td::before {
        grid-column: 1;
        color: #5f788a;
        font-size: .64rem;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: .03em;
        text-transform: uppercase;
    }

    .po-create-lines-table tbody td > *,
    .po-edit-lines-table tbody td > *,
    .po-detail-lines-table tbody td > * {
        grid-column: 2;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow-wrap: anywhere;
    }

    .po-create-lines-table tbody td input.form-control,
    .po-create-lines-table tbody td .form-control,
    .po-edit-lines-table tbody td input.form-control,
    .po-edit-lines-table tbody td .form-control {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .po-create-lines-table tbody td:nth-child(1)::before,
    .po-edit-lines-table tbody td:nth-child(1)::before,
    .po-detail-lines-table tbody td:nth-child(1)::before { content: "#"; }

    .po-create-lines-table tbody td:nth-child(2)::before,
    .po-edit-lines-table tbody td:nth-child(2)::before,
    .po-detail-lines-table tbody td:nth-child(2)::before { content: "Purchase Request"; }

    .po-create-lines-table tbody td:nth-child(3)::before,
    .po-edit-lines-table tbody td:nth-child(3)::before,
    .po-detail-lines-table tbody td:nth-child(3)::before { content: "Item"; }

    .po-create-lines-table tbody td:nth-child(4)::before,
    .po-edit-lines-table tbody td:nth-child(4)::before,
    .po-detail-lines-table tbody td:nth-child(4)::before { content: "UOM"; }

    .po-create-lines-table tbody td:nth-child(5)::before { content: "Requested"; }
    .po-create-lines-table tbody td:nth-child(6)::before { content: "Pending to Order"; }
    .po-create-lines-table tbody td:nth-child(7)::before { content: "PO Qty"; }
    .po-create-lines-table tbody td:nth-child(8)::before { content: "Warehouse"; }
    .po-create-lines-table tbody td:nth-child(9)::before { content: "Required Date"; }
    .po-create-lines-table tbody td:nth-child(10)::before { content: "Unit Price"; }
    .po-create-lines-table tbody td:nth-child(11)::before { content: "Discount"; }
    .po-create-lines-table tbody td:nth-child(12)::before { content: "Tax"; }
    .po-create-lines-table tbody td:nth-child(13)::before { content: "Line Total"; }
    .po-create-lines-table tbody td:nth-child(14)::before { content: "Action"; }

    .po-edit-lines-table tbody td:nth-child(5)::before { content: "Requested"; }
    .po-edit-lines-table tbody td:nth-child(6)::before { content: "Ordered"; }
    .po-edit-lines-table tbody td:nth-child(7)::before { content: "Pending to Order"; }
    .po-edit-lines-table tbody td:nth-child(8)::before { content: "PO Qty"; }
    .po-edit-lines-table tbody td:nth-child(9)::before { content: "Warehouse"; }
    .po-edit-lines-table tbody td:nth-child(10)::before { content: "Required Date"; }
    .po-edit-lines-table tbody td:nth-child(11)::before { content: "Unit Price"; }
    .po-edit-lines-table tbody td:nth-child(12)::before { content: "Discount"; }
    .po-edit-lines-table tbody td:nth-child(13)::before { content: "Tax"; }
    .po-edit-lines-table tbody td:nth-child(14)::before { content: "Line Total"; }

    .po-detail-lines-table tbody td:nth-child(5)::before { content: "Warehouse"; }
    .po-detail-lines-table tbody td:nth-child(6)::before { content: "Requested"; }
    .po-detail-lines-table tbody td:nth-child(7)::before { content: "Ordered"; }
    .po-detail-lines-table tbody td:nth-child(8)::before { content: "Pending to Order"; }
    .po-detail-lines-table tbody td:nth-child(9)::before { content: "PO Qty"; }
    .po-detail-lines-table tbody td:nth-child(10)::before { content: "Received"; }
    .po-detail-lines-table tbody td:nth-child(11)::before { content: "Remaining to Receive"; }
    .po-detail-lines-table tbody td:nth-child(12)::before { content: "Unit Price"; }
    .po-detail-lines-table tbody td:nth-child(13)::before { content: "Discount"; }
    .po-detail-lines-table tbody td:nth-child(14)::before { content: "Tax"; }
    .po-detail-lines-table tbody td:nth-child(15)::before { content: "Line Total"; }

    .po-create-lines-table tbody td:nth-child(3),
    .po-edit-lines-table tbody td:nth-child(3),
    .po-detail-lines-table tbody td:nth-child(3) {
        align-items: start;
    }

    .po-create-lines-table tbody td:nth-child(3) > div,
    .po-edit-lines-table tbody td:nth-child(3) > div,
    .po-detail-lines-table tbody td:nth-child(3) > div {
        grid-column: 2;
        width: 100%;
        min-width: 0;
    }

    .po-create-lines-table tbody td:last-child,
    .po-edit-lines-table tbody td:last-child {
        display: block !important;
        text-align: right !important;
        padding: .7rem 0;
    }

    .po-create-lines-table tbody td:last-child::before,
    .po-edit-lines-table tbody td:last-child::before {
        display: none;
    }

    .po-create-lines-table tbody td:last-child .btn,
    .po-edit-lines-table tbody td:last-child .btn {
        width: 100%;
        min-height: 42px;
    }

    /* UOM: desktop shows code/name; mobile uses the compact field. */
    .po-uom-mobile { display: none !important; }

    @media (max-width: 767.98px) {
        .po-uom-desktop { display: none !important; }
        .po-uom-mobile { display: block !important; }
    }

    /* ---------- PO index mobile ---------- */
    .po-index-page-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .6rem;
    }

    .po-index-page-header h2 {
        white-space: nowrap;
        font-size: 1.35rem;
    }

    .po-index-page-header > a {
        align-self: flex-end;
        min-height: 42px;
        max-width: 100%;
        white-space: nowrap;
    }

    .po-index-table-wrap {
        overflow: visible !important;
    }

    .po-index-table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    .po-index-table thead {
        display: none;
    }

    .po-index-table tbody {
        display: block;
        width: 100%;
    }

    .po-index-table tbody tr {
        display: block;
        width: calc(100% - 1.5rem);
        margin: .75rem;
        padding: .2rem .75rem;
        border: 1px solid #e1e7e5;
        border-radius: .85rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
    }

    .po-index-table tbody td {
        display: grid !important;
        grid-template-columns: 6.7rem minmax(0,1fr);
        gap: .55rem;
        align-items: center;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 2.4rem;
        padding: .5rem 0;
        box-sizing: border-box;
        border: 0 !important;
        border-bottom: 1px solid #edf1f0 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: hidden;
    }

    .po-index-table tbody td:last-child {
        border-bottom: 0 !important;
    }

    .po-index-table tbody td::before {
        grid-column: 1;
        color: #5f788a;
        font-size: .64rem;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: .03em;
        text-transform: uppercase;
    }

    .po-index-table tbody td > * {
        grid-column: 2;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }

    .po-index-table tbody td:nth-child(1)::before { content: "PO No."; }
    .po-index-table tbody td:nth-child(2)::before { content: "Order Date"; }
    .po-index-table tbody td:nth-child(3)::before { content: "Expected Date"; }
    .po-index-table tbody td:nth-child(4)::before { content: "Company"; }
    .po-index-table tbody td:nth-child(5)::before { content: "Supplier"; }
    .po-index-table tbody td:nth-child(6)::before { content: "Status"; }
    .po-index-table tbody td:nth-child(7)::before { content: "Actions"; }

    .po-index-table tbody td:nth-child(7) {
        display: flex !important;
        justify-content: flex-end;
        gap: .45rem;
    }

    .po-index-table tbody td:nth-child(7)::before {
        margin-right: auto;
    }

    .po-index-table tbody tr:has(td[colspan]) td {
        display: block !important;
        text-align: center !important;
        border: 0 !important;
    }
}


/* Warehouse code/name display - presentation only */
.cg-warehouse-code-display { font-weight: 500; }
.cg-warehouse-name-display { margin-top: .25rem; color: #6b7685; font-size: .78rem; line-height: 1.25; overflow-wrap: anywhere; }


/* ============================================================
   CraftGrid - Global Compact List Filters
   Applies only to list/filter cards detected by list-grid-ux.js.
   No form fields, endpoints or business logic are changed.
   ============================================================ */

.cg-filter-card {
    margin-bottom: 0.75rem !important;
}

.cg-filter-card > .card-header,
.cg-filter-card > .gl-card-header {
    padding: 0.5rem 0.8rem !important;
    min-height: 0;
}

.cg-filter-card > .card-body,
.cg-filter-card > .gl-card-body {
    padding: 0.65rem 0.8rem !important;
}

.cg-filter-card .form-label {
    margin-bottom: 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.15;
}

.cg-filter-card .form-control,
.cg-filter-card .form-select {
    min-height: 36px;
    height: 36px;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: 0.86rem;
}

.cg-filter-card .row {
    --bs-gutter-x: 0.65rem;
    --bs-gutter-y: 0.45rem;
}

.cg-filter-card .mt-4 {
    margin-top: 0.65rem !important;
}

.cg-filter-card .mt-3 {
    margin-top: 0.5rem !important;
}

.cg-filter-card .mb-3 {
    margin-bottom: 0.5rem !important;
}

.cg-filter-card .btn {
    min-height: 36px;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: 0.84rem;
}

/* Desktop: keep ordinary filter rows compact and aligned at the bottom. */
@media (min-width: 992px) {
    .cg-filter-card form > .row,
    .cg-filter-card .gl-card-body > .row {
        align-items: end;
    }

    .cg-filter-card form > .row.g-3,
    .cg-filter-card .gl-card-body > .row.g-3 {
        row-gap: 0.45rem;
    }

    /* Where a form contains a single filter row, keep the action block
       alongside the filters instead of creating a large empty second row. */
    .cg-filter-card form > .row + .d-flex.justify-content-end {
        margin-top: 0.55rem !important;
    }
}

/* Mobile: preserve readable touch targets and natural stacking. */
@media (max-width: 767.98px) {
    .cg-filter-card > .card-body,
    .cg-filter-card > .gl-card-body {
        padding: 0.7rem !important;
    }

    .cg-filter-card .form-control,
    .cg-filter-card .form-select,
    .cg-filter-card .btn {
        min-height: 38px;
        height: 38px;
    }
}

/* ============================================================
   CraftGrid - Sortable Header Clarity
   Make the shared sort control visibly clickable without
   changing its navigation or sorting semantics.
   ============================================================ */

th[aria-sort] > a[data-cg-sort-header] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    min-height: 32px;
    padding: 0.15rem 0.25rem;
    border-radius: 0.3rem;
}

th[aria-sort] > a[data-cg-sort-header]:hover,
th[aria-sort] > a[data-cg-sort-header]:focus-visible {
    background: rgba(13, 110, 253, 0.07);
    text-decoration: none;
}

th[aria-sort="ascending"] > a[data-cg-sort-header],
th[aria-sort="descending"] > a[data-cg-sort-header] {
    font-weight: 700;
}

th[aria-sort="none"] > a[data-cg-sort-header] {
    color: inherit;
}

/* ============================================================
   CraftGrid - Global Filter Layout Polish
   Desktop: keep common list filters in one compact row when the
   available width allows it. Mobile keeps natural stacking.
   UI-only: no fields, names, endpoints or business rules change.
   ============================================================ */

@media (min-width: 1200px) {
    .cg-filter-card form > .row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: .65rem;
        margin-left: 0;
        margin-right: 0;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }

    .cg-filter-card form > .row > [class*="col-"] {
        flex: 1 1 0;
        width: auto !important;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        margin: 0;
        min-width: 120px;
    }

    /* Give the primary free-text search a little more room. */
    .cg-filter-card form > .row > [class*="col-md-6"] {
        flex-grow: 1.7;
    }

    /* Keep the separate action group on the same line. */
    .cg-filter-card form > .purchase-request-filter-actions,
    .cg-filter-card form > .filter-actions {
        margin-top: 0 !important;
        margin-left: auto;
        flex: 0 0 auto;
        align-self: flex-end;
        white-space: nowrap;
    }

    .cg-filter-card form > .row + .d-flex.justify-content-end {
        margin-top: 0 !important;
    }

    .cg-filter-card .form-control,
    .cg-filter-card .form-select,
    .cg-filter-card .btn {
        min-height: 38px;
        height: 38px;
    }

    .cg-filter-card .form-label {
        margin-bottom: .18rem;
    }
}

/* At medium widths, keep the compact spacing but allow wrapping rather
   than creating an unusable compressed row. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .cg-filter-card form > .row {
        row-gap: .5rem;
    }
}

/* ============================================================
   CraftGrid - Global Search Bar Compactness
   ============================================================ */

.cg-global-search {
    margin-bottom: 1rem;
}

.cg-global-search-bar {
    min-height: 52px;
    border-radius: 14px;
}

.cg-global-search-input {
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.cg-global-search-action {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}

@media (max-width: 767.98px) {
    .cg-global-search {
        margin-bottom: .8rem;
    }

    .cg-global-search-bar {
        min-height: 48px;
        border-radius: 12px;
    }
}


/* ============================================================
   CraftGrid - Final Compact List / Search Presentation
   UI-only. Keep existing navigation, endpoints and business
   logic unchanged.
   ============================================================ */

.cg-global-search {
    margin-top: -.35rem;
    margin-bottom: .65rem;
}

.cg-global-search-bar {
    min-height: 48px;
    height: 48px;
    border-radius: 12px;
}

.cg-global-search-input {
    padding-top: .45rem;
    padding-bottom: .45rem;
}

.cg-global-search-action {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
}

@media (max-width: 767.98px) {
    .cg-global-search {
        margin-top: -.2rem;
        margin-bottom: .6rem;
    }

    .cg-global-search-bar {
        min-height: 46px;
        height: 46px;
        border-radius: 11px;
    }
}

/* Purchase Requests: five filter fields + actions in one compact
   desktop row. Mobile remains naturally stacked. */
@media (min-width: 992px) {
    .purchase-requests-filters form {
        display: grid;
        grid-template-columns: minmax(250px, 1.7fr)
                               repeat(4, minmax(120px, 1fr))
                               auto;
        column-gap: .65rem;
        row-gap: 0;
        align-items: end;
    }

    .purchase-requests-filters form > .purchase-request-filter-grid {
        display: contents;
    }

    .purchase-requests-filters form > .purchase-request-filter-grid > [class*="col-"] {
        width: auto !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        min-width: 0;
    }

    .purchase-requests-filters form > .purchase-request-filter-actions {
        grid-column: 6;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: flex-end;
        white-space: nowrap;
        gap: .5rem !important;
    }

    .purchase-requests-filters .form-label {
        margin-bottom: .18rem;
    }

    .purchase-requests-filters .form-control,
    .purchase-requests-filters .form-select {
        height: 38px;
        min-height: 38px;
    }

    .purchase-requests-filters .btn {
        height: 38px;
        min-height: 38px;
        padding-top: .3rem;
        padding-bottom: .3rem;
    }

    .purchase-requests-filters > .card-body {
        padding-top: .7rem !important;
        padding-bottom: .7rem !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .purchase-requests-filters .card-body {
        padding: .65rem .75rem !important;
    }

    .purchase-requests-filters .row {
        --bs-gutter-y: .45rem;
    }

    .purchase-requests-filters .purchase-request-filter-actions {
        margin-top: .55rem !important;
    }
}

@media (max-width: 767.98px) {
    .purchase-requests-filters .card-header {
        padding: .55rem .75rem !important;
    }

    .purchase-requests-filters .card-body {
        padding: .65rem .75rem !important;
    }

    .purchase-requests-filters .form-label {
        margin-bottom: .18rem;
    }

    .purchase-requests-filters .purchase-request-filter-actions {
        margin-top: .45rem !important;
    }
}


/* ============================================================
   CraftGrid - Global Compact Create/Edit Forms
   Presentation-only. Applies to POST forms whose primary card is
   directly inside the form. Does not alter fields or behavior.
   ============================================================ */

.cg-form-card > .card-header,
.cg-form-card > .gl-card-header {
    padding: .65rem .85rem !important;
}

.cg-form-card > .card-body,
.cg-form-card > .gl-card-body {
    padding: .8rem .85rem !important;
}

.cg-form-card .row.g-3 {
    --bs-gutter-x: .85rem;
    --bs-gutter-y: .65rem;
}

.cg-form-card .form-label {
    margin-bottom: .18rem;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.15;
}

.cg-form-card .form-control,
.cg-form-card .form-select {
    min-height: 40px;
    height: 40px;
    padding-top: .35rem;
    padding-bottom: .35rem;
    font-size: .9rem;
}

.cg-form-card textarea.form-control {
    height: auto;
    min-height: 76px;
}

.cg-form-card .form-text {
    margin-top: .18rem;
    font-size: .74rem;
    line-height: 1.25;
}

.cg-form-card .text-danger {
    font-size: .75rem;
}

.cg-form-card + .purchase-request-form-actions,
.cg-form-card ~ .purchase-request-form-actions {
    margin-top: .9rem !important;
}

@media (max-width: 767.98px) {
    .cg-form-card > .card-header,
    .cg-form-card > .gl-card-header {
        padding: .6rem .75rem !important;
    }

    .cg-form-card > .card-body,
    .cg-form-card > .gl-card-body {
        padding: .7rem .75rem !important;
    }

    .cg-form-card .row.g-3 {
        --bs-gutter-x: .7rem;
        --bs-gutter-y: .5rem;
    }

    .cg-form-card .form-control,
    .cg-form-card .form-select {
        min-height: 42px;
        height: 42px;
        font-size: .9rem;
    }

    .cg-form-card textarea.form-control {
        min-height: 82px;
    }
}


/* Purchase-order quantity column guidance.
   Visual-only helper; does not change transaction logic. */
.cg-column-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    vertical-align: -1px;
    color: #557086;
    font-size: .78rem;
    line-height: 1;
    cursor: help;
    border-radius: 50%;
    transition: color .15s ease, background-color .15s ease;
}

.cg-column-info:hover,
.cg-column-info:focus-visible {
    color: #0b8063;
    background-color: rgba(11, 128, 99, .08);
    outline: none;
}

.cg-column-info i {
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .cg-column-info {
        width: 17px;
        height: 17px;
        margin-left: 3px;
        font-size: .82rem;
    }
}

/* ==========================================================
   Goods Receipt list header - desktop/mobile alignment
   Kept in site.css because this stylesheet is loaded globally.
   Presentation only; no transaction logic is affected.
   ========================================================== */
.cg-gr-page-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 1rem;
}

.cg-gr-page-header > .cg-page-header-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.cg-gr-page-header > .cg-page-header-action {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    align-self: center !important;
    white-space: nowrap !important;
}

.cg-gr-page-header .cg-page-title-line {
    display: inline-flex !important;
    align-items: center !important;
    gap: .25rem !important;
}

@media (max-width: 767.98px) {
    .cg-gr-page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .7rem !important;
    }

    .cg-gr-page-header > .cg-page-header-action {
        width: 100% !important;
        margin-left: 0 !important;
        align-self: stretch !important;
        justify-content: center;
    }
}

/* Final Goods Receipt mobile header polish. */
@media (max-width: 767.98px) {
    .cg-gr-page-header {
        margin-bottom: .8rem !important;
    }

    .cg-gr-page-header .cg-page-header-title {
        width: 100% !important;
    }

    .cg-gr-page-header .cg-page-title-line {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    .cg-gr-page-header .cg-page-title-line h1,
    .cg-gr-page-header .cg-page-title-line h2,
    .cg-gr-page-header .cg-page-title-line h3 {
        white-space: nowrap !important;
    }

    .cg-gr-page-header > .cg-page-header-action {
        width: 100% !important;
        min-height: 46px !important;
    }
}


/* ==========================================================
   Goods Receipt Create header - desktop/mobile Back placement
   Presentation only. Transaction behavior is unchanged.
   ========================================================== */
.cg-gr-create-page-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 1rem;
}

.cg-gr-create-page-header > .cg-page-header-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.cg-gr-create-page-header > .cg-page-header-action {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 0 !important;
    margin-left: auto !important;
    align-self: center !important;
    white-space: nowrap !important;
}

@media (max-width: 767.98px) {
    .cg-gr-create-page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .45rem !important;
        margin-bottom: .85rem !important;
    }

    .cg-gr-create-page-header > .cg-page-header-title {
        width: 100% !important;
    }

    .cg-gr-create-page-header > .cg-page-header-action {
        width: auto !important;
        min-height: 44px !important;
        min-width: 0 !important;
        margin-left: auto !important;
        align-self: flex-end !important;
        justify-content: center !important;
        padding-left: .85rem;
        padding-right: .85rem;
    }
}


/* ============================================================
   Goods Receipt form - mobile item card polish
   Presentation only. Transaction behavior is unchanged.
   ============================================================ */
.cg-gr-items-card .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
}
.cg-gr-items-card .card-header .text-muted {
    flex-basis: 100%;
}

@media (max-width: 767.98px) {
    .cg-gr-form-card,
    .cg-gr-items-card {
        margin-bottom: .85rem !important;
    }

    .cg-gr-form-card > .card-header,
    .cg-gr-items-card > .card-header {
        padding: .7rem .8rem !important;
    }

    .cg-gr-form-card > .card-body {
        padding: .75rem .8rem !important;
    }

    .cg-gr-form-card .row.g-4 {
        --bs-gutter-x: .7rem;
        --bs-gutter-y: .65rem;
    }

    .cg-gr-form-card .form-label {
        margin-bottom: .2rem;
        font-size: .82rem;
    }

    .cg-gr-form-card .form-control,
    .cg-gr-form-card .form-select {
        min-height: 42px;
        height: 42px;
        font-size: .9rem;
    }

    .cg-gr-form-card textarea.form-control {
        height: auto;
        min-height: 76px;
    }

    .cg-gr-items-card .card-header {
        padding: .7rem .8rem !important;
    }

    .cg-gr-items-card .card-header strong {
        font-size: .95rem;
    }

    .cg-gr-items-card .card-header .text-muted {
        margin-top: .15rem !important;
        font-size: .78rem !important;
        line-height: 1.35;
    }

    /* Turn each GR line into a readable mobile card instead of
       forcing the user to horizontally scroll a wide table. */
    .cg-gr-items-table {
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .cg-gr-items-table thead {
        display: none;
    }

    .cg-gr-items-table tbody,
    .cg-gr-items-table tr,
    .cg-gr-items-table td {
        display: block;
        width: 100%;
    }

    .cg-gr-items-table tbody tr {
        padding: .75rem .8rem;
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    }

    .cg-gr-items-table tbody tr:last-child {
        border-bottom: 0;
    }

    .cg-gr-items-table tbody td {
        position: relative;
        display: grid;
        grid-template-columns: 42% 58%;
        align-items: center;
        gap: .5rem;
        padding: .38rem 0 !important;
        border: 0 !important;
        text-align: left !important;
    }

    .cg-gr-items-table tbody td::before {
        content: attr(data-label);
        font-size: .76rem;
        font-weight: 700;
        color: #557086;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    .cg-gr-items-table tbody td[data-label="#"] {
        display: none;
    }

    .cg-gr-items-table tbody td[data-label="Item"] > div,
    .cg-gr-items-table tbody td[data-label="Warehouse"] > div {
        min-width: 0;
    }

    .cg-gr-items-table tbody td[data-label="Item"] small,
    .cg-gr-items-table tbody td[data-label="Warehouse"] small {
        display: block;
        line-height: 1.25;
    }

    .cg-gr-items-table tbody td .form-control {
        width: 100%;
        min-height: 42px;
        height: 42px;
        font-size: .9rem;
    }

    .cg-gr-items-table tbody td[data-label="Receipt Qty"],
    .cg-gr-items-table tbody td[data-label="Unit Cost"] {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important;
    }

    .cg-gr-items-table tbody td[data-label="Receipt Qty"]::before,
    .cg-gr-items-table tbody td[data-label="Unit Cost"]::before {
        align-self: center;
    }

    .cg-gr-items-table tbody td[data-label="Line Total"] {
        margin-top: .2rem;
        padding-top: .55rem !important;
        border-top: 1px solid #edf1f3 !important;
        font-weight: 700;
    }

    .cg-gr-items-table tbody td[data-label="Line Total"]::after {
        content: none;
    }

    /* Keep bottom actions visible, balanced and easy to tap. */
    .cg-gr-items-card ~ .d-flex,
    .cg-gr-items-card + .d-flex {
        justify-content: stretch !important;
        gap: .55rem !important;
        margin-top: .1rem;
        padding: 0 .05rem;
    }

    .cg-gr-items-card ~ .d-flex > .btn,
    .cg-gr-items-card + .d-flex > .btn {
        flex: 1 1 0;
        min-height: 44px;
    }
}


/* ============================================================
   Goods Receipt list - mobile-first transaction cards
   Presentation only. Keeps the desktop table unchanged while
   removing horizontal scrolling on phones.
   ============================================================ */
@media (max-width: 767.98px) {
    .cg-gr-filter-card {
        margin-bottom: .8rem !important;
    }

    .cg-gr-filter-card .card-header {
        padding: .65rem .8rem !important;
    }

    .cg-gr-filter-card .card-body {
        padding: .7rem .8rem !important;
    }

    .cg-gr-filter-card .row {
        --bs-gutter-x: .7rem;
        --bs-gutter-y: .55rem;
    }

    .cg-gr-filter-card .form-label {
        margin-bottom: .2rem;
        font-size: .78rem;
    }

    .cg-gr-filter-card .form-control,
    .cg-gr-filter-card .form-select {
        min-height: 42px;
        height: 42px;
        font-size: .9rem;
    }

    .cg-gr-filter-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: .55rem !important;
        margin-top: .65rem !important;
    }

    .cg-gr-filter-actions .btn {
        min-height: 44px;
        width: 100%;
    }

    .cg-transaction-list {
        overflow: hidden;
    }

    .cg-transaction-list > .card-header {
        padding: .7rem .8rem !important;
    }

    .cg-transaction-list > .card-header strong {
        font-size: .95rem;
    }

    .cg-transaction-list > .card-header .small {
        font-size: .76rem;
    }

    .cg-transaction-list .table-responsive {
        overflow: visible !important;
    }

    .cg-transaction-list table {
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
    }

    .cg-transaction-list table thead {
        display: none;
    }

    .cg-transaction-list table tbody,
    .cg-transaction-list table tbody tr,
    .cg-transaction-list table tbody td {
        display: block;
        width: 100%;
    }

    .cg-transaction-list table tbody tr {
        margin: 0;
        padding: .75rem .8rem .7rem;
        border-bottom: 1px solid #e7ecef;
        background: #fff;
    }

    .cg-transaction-list table tbody tr:last-child {
        border-bottom: 0;
    }

    .cg-transaction-list table tbody td {
        display: grid;
        grid-template-columns: 39% minmax(0, 61%);
        align-items: center;
        gap: .45rem;
        padding: .28rem 0 !important;
        border: 0 !important;
        text-align: left !important;
        min-width: 0;
        line-height: 1.25;
    }

    .cg-transaction-list table tbody td::before {
        content: attr(data-label);
        color: #60778a;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .cg-transaction-list table tbody td[data-label="GR No."] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: .5rem !important;
        margin-bottom: .2rem;
        border-bottom: 1px solid #edf1f3 !important;
        font-size: .98rem;
        color: #123b57;
    }

    .cg-transaction-list table tbody td[data-label="GR No."]::before {
        content: "GOODS RECEIPT";
        font-size: .72rem;
    }

    .cg-transaction-list table tbody td[data-label="Company"] {
        display: none;
    }

    .cg-transaction-list table tbody td[data-label="Quantity"],
    .cg-transaction-list table tbody td[data-label="Value"] {
        text-align: left !important;
    }

    .cg-transaction-list table tbody td[data-label="Value"] {
        font-weight: 600;
    }

    .cg-transaction-list table tbody td[data-label="Status"] {
        padding-top: .45rem !important;
    }

    .cg-transaction-list table tbody td[data-label="Status"] .badge {
        justify-self: start;
    }

    .cg-transaction-list table tbody td[data-label="Actions"] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: .45rem;
        margin-top: .45rem;
        padding-top: .6rem !important;
        border-top: 1px solid #edf1f3 !important;
    }

    .cg-transaction-list table tbody td[data-label="Actions"]::before {
        content: "";
        margin-right: auto;
    }

    .cg-transaction-list table tbody td[data-label="Actions"] .btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 0 !important;
    }

    .cg-transaction-list table tbody td[data-label="Actions"] .btn i {
        margin: 0 !important;
    }

    .cg-transaction-list .card-footer {
        padding: .65rem .8rem !important;
    }

    .cg-transaction-list .pagination {
        justify-content: center !important;
        flex-wrap: wrap;
    }

    .cg-transaction-list table tbody tr > td.text-center {
        display: block;
        padding: 1.5rem .5rem !important;
    }

    .cg-transaction-list table tbody tr > td.text-center::before {
        content: none;
    }
}

/* ============================================================
   Goods Receipt details - mobile polish
   Presentation only. Transaction/authentication logic unchanged.
   ============================================================ */
@media (max-width: 767.98px) {
    .cg-gr-details-page {
        overflow-x: hidden;
    }

    .cg-gr-details-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .65rem !important;
        margin-bottom: .9rem !important;
    }

    .cg-gr-details-header > div:first-child {
        min-width: 0;
    }

    .cg-gr-details-header h2 {
        font-size: 1.55rem;
        line-height: 1.12;
        white-space: normal !important;
    }

    .cg-gr-details-header .text-muted {
        font-size: .9rem;
    }

    .cg-gr-details-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem !important;
        width: 100%;
        align-items: stretch;
    }

    .cg-gr-details-actions > a,
    .cg-gr-details-actions > form,
    .cg-gr-details-actions > button {
        width: 100%;
        min-width: 0;
        margin: 0 !important;
    }

    .cg-gr-details-actions > form {
        display: block;
    }

    .cg-gr-details-actions > form > button {
        width: 100%;
        min-height: 44px;
    }

    .cg-gr-details-actions .btn {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .25rem;
        white-space: nowrap;
        padding: .55rem .55rem;
        font-size: .92rem;
        line-height: 1.15;
    }

    /* Posted GR: invoice is the primary action and gets the full row;
       Print + Back share the next row. Draft GR keeps Back on its own row. */
    .cg-gr-details-actions.cg-posted-actions .cg-gr-invoice-action {
        grid-column: 1 / -1;
        min-height: 48px;
    }

    .cg-gr-details-actions.cg-posted-actions .cg-gr-invoice-action i {
        flex: 0 0 auto;
    }

    .cg-gr-details-actions.cg-draft-actions .cg-back-btn {
        grid-column: 1 / -1;
    }

    .cg-gr-details-actions .cg-back-btn {
        min-height: 44px;
    }

    .cg-gr-details-page > .alert {
        margin-top: .1rem;
        margin-bottom: .85rem !important;
        padding: .75rem .85rem;
        font-size: .9rem;
        line-height: 1.4;
    }

    .cg-gr-details-page > .alert .btn-close {
        padding: .9rem .75rem;
    }

    .cg-gr-details-info-card,
    .cg-gr-details-items-card {
        margin-bottom: .85rem !important;
    }

    .cg-gr-details-info-card .card-header,
    .cg-gr-details-items-card .card-header {
        padding: .7rem .8rem !important;
    }

    .cg-gr-details-info-card .card-body {
        padding: .8rem !important;
    }

    .cg-gr-details-info-card .row.g-4 {
        --bs-gutter-x: .7rem;
        --bs-gutter-y: .8rem;
    }

    .cg-gr-details-info-card .text-muted.small {
        margin-bottom: .12rem;
        font-size: .78rem;
    }

    .cg-gr-details-items-card .card-header strong {
        font-size: .95rem;
    }

    .cg-gr-details-items-card .card-header .text-muted {
        display: block;
        margin-top: .2rem !important;
        font-size: .78rem !important;
        line-height: 1.35;
    }

    .cg-gr-details-items-card .table-responsive {
        overflow: visible !important;
    }

    .cg-gr-details-items-table {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .cg-gr-details-items-table thead {
        display: none;
    }

    .cg-gr-details-items-table tbody,
    .cg-gr-details-items-table tbody tr,
    .cg-gr-details-items-table tbody td {
        display: block;
        width: 100%;
    }

    .cg-gr-details-items-table tbody tr {
        padding: .7rem .8rem;
        border-bottom: 1px solid #e7ecef;
        background: #fff;
    }

    .cg-gr-details-items-table tbody tr:last-child {
        border-bottom: 0;
    }

    .cg-gr-details-items-table tbody td {
        display: grid;
        grid-template-columns: 38% minmax(0, 62%);
        align-items: start;
        gap: .45rem;
        padding: .34rem 0 !important;
        border: 0 !important;
        text-align: left !important;
        min-width: 0;
        line-height: 1.25;
    }

    .cg-gr-details-items-table tbody td::before {
        content: attr(data-label);
        color: #60778a;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .cg-gr-details-items-table tbody td[data-label="#"] {
        display: none;
    }

    .cg-gr-details-items-table tbody td[data-label="Item"] > div,
    .cg-gr-details-items-table tbody td[data-label="Warehouse"] > div {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .cg-gr-details-items-table tbody td[data-label="Item"] small,
    .cg-gr-details-items-table tbody td[data-label="Warehouse"] small {
        display: block;
        line-height: 1.25;
    }

    .cg-gr-details-items-table tbody td[data-label="Line Total"] {
        margin-top: .25rem;
        padding-top: .55rem !important;
        border-top: 1px solid #edf1f3 !important;
        font-weight: 700;
    }

    .cg-gr-details-summary-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .cg-gr-details-summary-row > .col-lg-4 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100%;
    }

    .cg-gr-details-summary-row .card-header,
    .cg-gr-details-summary-row .card-body {
        padding: .8rem !important;
    }
}

/* ============================================================
   Goods Receipt navigation convention
   Back is a footer navigation action on Create/Edit/Details.
   Save/Cancel remain the form actions on Create/Edit.
   Presentation only; return URLs and transaction logic unchanged.
   ============================================================ */
.cg-gr-create-page-header > .cg-page-header-action {
    display: none !important;
}

.cg-gr-form-actions {
    width: 100%;
}

.cg-gr-form-actions > .cg-back-btn {
    flex: 0 0 auto;
}

.cg-gr-details-back-footer {
    width: 100%;
}

@media (max-width: 767.98px) {
    .cg-gr-form-actions {
        align-items: stretch !important;
        flex-wrap: wrap;
        gap: .65rem !important;
    }

    .cg-gr-form-actions > .cg-back-btn {
        order: 1;
        min-height: 46px;
    }

    .cg-gr-form-actions > div {
        order: 2;
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
    }

    .cg-gr-form-actions > div .btn {
        min-height: 46px;
    }

    .cg-gr-details-back-footer {
        margin-top: 1rem !important;
        padding-bottom: .25rem;
    }

    .cg-gr-details-back-footer .cg-back-btn {
        width: auto;
        min-height: 46px;
    }
}

/* ============================================================
   Purchase Invoice Create - mobile transaction polish
   Presentation only. Keeps invoice/three-way-match logic unchanged.
   Back follows the CraftGrid transaction convention: footer action.
   ============================================================ */
.cg-purchase-invoice-page {
    min-width: 0;
}

.cg-purchase-invoice-header {
    min-width: 0;
}

.cg-purchase-invoice-header > div {
    min-width: 0;
}

.cg-purchase-invoice-header .text-muted {
    overflow-wrap: anywhere;
}

/* The invoice quantity is the primary operational input on Create. */
.cg-primary-entry-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    padding: .08rem .42rem;
    border-radius: 999px;
    background: rgba(11, 61, 46, .10);
    color: #0b3d2e;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.cg-purchase-invoice-quantity-cell {
    position: relative;
}

.cg-purchase-invoice-quantity-primary-input {
    border: 2px solid #0b3d2e;
    border-left-width: 4px;
    background: #fffdf5;
    box-shadow: 0 0 0 .14rem rgba(11, 61, 46, .08);
    font-weight: 600;
}

.cg-purchase-invoice-quantity-primary-input:focus {
    border-color: #0b3d2e;
    background: #fff;
    box-shadow: 0 0 0 .24rem rgba(11, 61, 46, .18);
    outline: none;
}

.cg-purchase-invoice-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.cg-purchase-invoice-list-header > div {
    min-width: 0;
}

.cg-new-purchase-invoice-btn {
    flex: 0 0 auto;
    margin-left: auto;
}

.cg-purchase-invoice-form-actions {
    width: 100%;
}

.cg-purchase-invoice-form-actions .cg-back-btn {
    flex: 0 0 auto;
    min-height: 44px;
}

@media (max-width: 767.98px) {
    .cg-purchase-invoice-page {
        overflow-x: hidden;
    }

    .cg-purchase-invoice-header {
        display: block !important;
        margin-bottom: .8rem !important;
    }

    .cg-purchase-invoice-header h2 {
        font-size: 1.55rem;
        line-height: 1.12;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .cg-purchase-invoice-header .text-muted {
        margin-top: .25rem;
        font-size: .9rem;
        line-height: 1.35;
    }

    .cg-purchase-invoice-page > .card {
        margin-bottom: .8rem !important;
    }

    .cg-purchase-invoice-page > .card .card-body {
        padding: .8rem !important;
    }

    .cg-purchase-invoice-page > .card .row.g-3 {
        --bs-gutter-x: .7rem;
        --bs-gutter-y: .65rem;
    }

    .cg-purchase-invoice-page > .card .form-label {
        margin-bottom: .25rem;
        font-size: .8rem;
    }

    .cg-purchase-invoice-page > .card .form-control {
        min-height: 44px;
    }

    .cg-purchase-invoice-page > .card .col-md-4,
    .cg-purchase-invoice-page > .card .col-md-8 {
        width: 100%;
    }

    /* Keep the three-way match readable on a phone instead of clipping
       ten columns into the viewport. Each line becomes a compact card. */
    .cg-purchase-invoice-page .cg-three-way-match-card .card-header {
        padding: .7rem .8rem !important;
    }

    .cg-purchase-invoice-page .cg-three-way-match-card .card-header strong {
        font-size: .96rem;
    }

    .cg-purchase-invoice-page .cg-three-way-match-card .card-header .small {
        display: block;
        margin-top: .2rem;
        font-size: .78rem;
        line-height: 1.35;
    }

    .cg-purchase-invoice-page .cg-three-way-match-card .table-responsive {
        overflow: visible !important;
    }

    .cg-purchase-invoice-page .cg-three-way-match-card table {
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
    }

    .cg-purchase-invoice-page .cg-three-way-match-card table thead {
        display: none;
    }

    .cg-purchase-invoice-page .cg-three-way-match-card table tbody,
    .cg-purchase-invoice-page .cg-three-way-match-card table tbody tr,
    .cg-purchase-invoice-page .cg-three-way-match-card table tbody td {
        display: block;
        width: 100%;
    }

    .cg-purchase-invoice-page .cg-three-way-match-card table tbody tr {
        padding: .75rem .8rem .8rem;
        border-bottom: 1px solid #e7ecef;
        background: #fff;
    }

    .cg-purchase-invoice-page .cg-three-way-match-card table tbody tr:last-child {
        border-bottom: 0;
    }

    .cg-purchase-invoice-page .cg-three-way-match-card table tbody td {
        display: grid;
        grid-template-columns: 40% minmax(0, 60%);
        align-items: center;
        gap: .45rem;
        padding: .3rem 0 !important;
        border: 0 !important;
        text-align: left !important;
        min-width: 0;
        line-height: 1.25;
    }

    .cg-purchase-invoice-page .cg-three-way-match-card table tbody td::before {
        content: attr(data-label);
        color: #60778a;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .cg-purchase-invoice-page .cg-three-way-match-card table tbody td[data-label="Item"] {
        display: block;
        padding-bottom: .55rem !important;
        margin-bottom: .2rem;
        border-bottom: 1px solid #edf1f3 !important;
    }

    .cg-purchase-invoice-page .cg-three-way-match-card table tbody td[data-label="Item"]::before {
        display: block;
        margin-bottom: .18rem;
    }

    .cg-purchase-invoice-page .cg-three-way-match-card table tbody td[data-label="Item"] > div,
    .cg-purchase-invoice-page .cg-three-way-match-card table tbody td[data-label="Item"] > small,
    .cg-purchase-invoice-page .cg-three-way-match-card table tbody td[data-label="GR / PO"] > div,
    .cg-purchase-invoice-page .cg-three-way-match-card table tbody td[data-label="GR / PO"] > small {
        overflow-wrap: anywhere;
    }

    .cg-purchase-invoice-page .cg-three-way-match-card table tbody td[data-label="Invoice Qty"],
    .cg-purchase-invoice-page .cg-three-way-match-card table tbody td[data-label="Invoice Price"],
    .cg-purchase-invoice-page .cg-three-way-match-card table tbody td[data-label="Disc %"],
    .cg-purchase-invoice-page .cg-three-way-match-card table tbody td[data-label="Tax %"] {
        align-items: center;
    }

    .cg-purchase-invoice-page .cg-three-way-match-card table tbody td input {
        width: 100%;
        min-width: 0;
        min-height: 42px;
    }

    .cg-purchase-invoice-form-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: .55rem !important;
        align-items: stretch !important;
        margin-top: .8rem !important;
        padding-bottom: .25rem;
    }

    .cg-purchase-invoice-form-actions .cg-back-btn,
    .cg-purchase-invoice-form-actions > div,
    .cg-purchase-invoice-form-actions > div .btn {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        margin: 0 !important;
    }

    .cg-purchase-invoice-form-actions > div {
        display: block !important;
    }

    .cg-purchase-invoice-form-actions .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* ============================================================
   Purchase Invoice selection/list - mobile polish
   Presentation only. Transaction and permission logic unchanged.
   ============================================================ */
.cg-purchase-invoice-select-page,
.cg-purchase-invoice-list-page {
    min-width: 0;
}

.cg-purchase-invoice-select-header,
.cg-purchase-invoice-list-header {
    min-width: 0;
}

.cg-purchase-invoice-select-header h2,
.cg-purchase-invoice-list-header h2 {
    white-space: normal;
}

.cg-purchase-invoice-select-header .text-muted,
.cg-purchase-invoice-list-header .text-muted {
    overflow-wrap: anywhere;
}

.cg-purchase-invoice-select-actions {
    padding: .8rem;
    border-top: 1px solid #e7ecef;
}

.cg-new-purchase-invoice-btn {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .cg-purchase-invoice-select-page,
    .cg-purchase-invoice-list-page {
        overflow-x: hidden;
    }

    /* Issue 1: keep the selection-page title/description together and
       prevent the Back button from competing for header width. */
    .cg-purchase-invoice-select-header {
        display: block !important;
        margin-bottom: .8rem !important;
    }

    .cg-purchase-invoice-select-header h2 {
        font-size: 1.55rem;
        line-height: 1.12;
        overflow-wrap: anywhere;
    }

    .cg-purchase-invoice-select-header .text-muted {
        margin-top: .25rem;
        font-size: .9rem;
        line-height: 1.35;
    }

    /* Issue 2: Back/Continue use the same bottom action convention. */
    .cg-purchase-invoice-select-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: .55rem !important;
        align-items: stretch;
    }

    .cg-purchase-invoice-select-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
    }

    /* Issue 3: invoiceable GR rows become readable mobile cards. */
    .cg-invoiceable-gr-card .table-responsive {
        overflow: visible !important;
    }

    .cg-invoiceable-gr-card table {
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
    }

    .cg-invoiceable-gr-card table thead {
        display: none;
    }

    .cg-invoiceable-gr-card table tbody,
    .cg-invoiceable-gr-card table tbody tr,
    .cg-invoiceable-gr-card table tbody td {
        display: block;
        width: 100%;
    }

    .cg-invoiceable-gr-card table tbody tr {
        padding: .75rem .8rem .8rem;
        border-bottom: 1px solid #e7ecef;
        background: #fff;
    }

    .cg-invoiceable-gr-card table tbody tr:last-child {
        border-bottom: 0;
    }

    .cg-invoiceable-gr-card table tbody td {
        display: grid;
        grid-template-columns: 42% minmax(0, 58%);
        align-items: center;
        gap: .45rem;
        padding: .3rem 0 !important;
        border: 0 !important;
        text-align: left !important;
        min-width: 0;
        line-height: 1.3;
    }

    .cg-invoiceable-gr-card table tbody td::before {
        content: attr(data-label);
        color: #60778a;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .cg-invoiceable-gr-card table tbody td[data-label="Select"] {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding-bottom: .55rem !important;
        margin-bottom: .2rem;
        border-bottom: 1px solid #edf1f3 !important;
    }

    .cg-invoiceable-gr-card table tbody td[data-label="Select"]::before {
        content: "Select";
        display: block;
    }

    .cg-invoiceable-gr-card table tbody td[data-label="Select"] .form-check-input {
        margin: 0 !important;
        width: 1.15rem;
        height: 1.15rem;
        flex: 0 0 auto;
    }

    .cg-invoiceable-gr-card table tbody td[data-label="Goods Receipt"] {
        font-size: .98rem;
    }

    .cg-invoiceable-gr-card table tbody td[data-label="Remaining Qty"],
    .cg-invoiceable-gr-card table tbody td[data-label="Receipt Value"] {
        text-align: left !important;
    }

    /* Issue 4: list-page title gets its own full-width block. */
    .cg-purchase-invoice-list-header {
        display: block !important;
        margin-bottom: .8rem !important;
    }

    .cg-purchase-invoice-list-header h2 {
        font-size: 1.55rem;
        line-height: 1.12;
        overflow-wrap: anywhere;
    }

    .cg-purchase-invoice-list-header .text-muted {
        margin-top: .25rem;
        font-size: .9rem;
        line-height: 1.35;
    }

    /* Issue 5: New Purchase Invoice gets a dedicated full-width action row,
       so the label never wraps awkwardly beside the heading. */
    .cg-new-purchase-invoice-btn {
        display: flex !important;
        width: 100%;
        min-height: 46px;
        margin-top: .75rem;
        white-space: nowrap;
        align-items: center;
        justify-content: center;
    }

    .cg-new-purchase-invoice-btn i {
        flex: 0 0 auto;
    }
}


/* ==========================================================
   Global company selector mobile behavior
   ----------------------------------------------------------
   Native <select> popups are rendered by the browser/OS and
   cannot be reliably width-constrained with CSS. The shared
   company-selector script therefore shortens long option
   labels on narrow screens. Keep the closed control inside
   its parent width as well.
   ========================================================== */
select[name*="CompanyId" i],
select[id*="CompanyId" i],
select[name="companyId" i],
select[id="companyId" i] {
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 575.98px) {
    select[name*="CompanyId" i],
    select[id*="CompanyId" i],
    select[name="companyId" i],
    select[id="companyId" i] {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* ============================================================
   CraftGrid - Global Company Selector
   ------------------------------------------------------------
   On mobile, native <select> popups are controlled by the
   browser/OS and cannot be reliably constrained. Company
   selectors therefore use a small CraftGrid dropdown on
   narrow screens. The real <select> remains the submitted
   form value and desktop behavior is unchanged.
   ============================================================ */
.cg-company-select-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
}

.cg-company-select-wrapper > select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.cg-company-select-button,
.cg-company-select-menu {
    display: none;
}

@media (max-width: 767.98px) {
    .cg-company-select-wrapper {
        width: 100%;
        min-width: 0;
    }

    .cg-company-select-wrapper > select {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        pointer-events: none !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
    }

    .cg-company-select-button {
        display: flex;
        width: 100%;
        min-height: 44px;
        align-items: center;
        justify-content: space-between;
        gap: .65rem;
        padding: .65rem .85rem;
        border: 1px solid #cedbd8;
        border-radius: .75rem;
        background: #fff;
        color: #263a46;
        font: inherit;
        font-weight: 500;
        line-height: 1.25;
        text-align: left;
        overflow: hidden;
    }

    .cg-company-select-label {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cg-company-select-arrow {
        width: .6rem;
        height: .6rem;
        flex: 0 0 auto;
        margin-right: .1rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        opacity: .75;
        pointer-events: none;
    }

    .cg-company-select-wrapper.is-open .cg-company-select-button {
        border-color: #6c9dff;
        box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .10);
    }

    .cg-company-select-button {
        white-space: nowrap;
    }

    .cg-company-select-menu {
        display: block;
        position: absolute;
        top: calc(100% + .3rem);
        left: 0;
        right: 0;
        z-index: 2050;
        max-height: min(18rem, 50vh);
        overflow-y: auto;
        overflow-x: hidden;
        padding: .25rem;
        border: 1px solid #cbd8d6;
        border-radius: .7rem;
        background: #fff;
        box-shadow: 0 10px 28px rgba(15, 55, 45, .16);
    }

    .cg-company-select-menu[hidden] {
        display: none !important;
    }

    .cg-company-select-option {
        display: block;
        width: 100%;
        min-height: 42px;
        padding: .6rem .7rem;
        border: 0;
        border-radius: .5rem;
        background: transparent;
        color: #263a46;
        font: inherit;
        line-height: 1.3;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .cg-company-select-option:hover,
    .cg-company-select-option:focus-visible {
        background: #eef5f3;
        outline: none;
    }

    .cg-company-select-option.is-selected {
        background: #e7f2ef;
        font-weight: 650;
    }
}


/* ============================================================
   Purchase Invoice Details - mobile header/action polish
   Presentation only. Transaction logic unchanged.
   ============================================================ */
.cg-purchase-invoice-details-header {
    min-width: 0;
}

.cg-purchase-invoice-details-heading {
    min-width: 0;
    flex: 1 1 auto;
}

.cg-purchase-invoice-details-title {
    min-width: 0;
}

.cg-purchase-invoice-details-title h2 {
    white-space: nowrap;
}

.cg-purchase-invoice-details-subtitle {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cg-purchase-invoice-details-actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cg-purchase-invoice-details-actions > .btn,
.cg-purchase-invoice-details-actions > form {
    flex: 0 0 auto;
}

.cg-purchase-invoice-details-actions > form {
    margin: 0 !important;
}

.cg-purchase-invoice-details-actions > form > .btn {
    width: 100%;
}

@media (max-width: 767.98px) {
    .cg-purchase-invoice-details-header {
        display: block !important;
        width: 100%;
        margin-bottom: .85rem !important;
    }

    .cg-purchase-invoice-details-heading {
        width: 100%;
        margin-bottom: .7rem;
    }

    .cg-purchase-invoice-details-title {
        width: 100%;
        flex-wrap: nowrap;
        align-items: center;
    }

    .cg-purchase-invoice-details-title h2 {
        font-size: 1.45rem;
        line-height: 1.1;
        white-space: nowrap;
        flex: 0 1 auto;
        min-width: 0;
    }

    .cg-purchase-invoice-details-title .cg-auto-context-help,
    .cg-purchase-invoice-details-title > * {
        flex: 0 0 auto;
    }

    .cg-purchase-invoice-details-subtitle {
        margin-top: .3rem !important;
        font-size: .9rem;
        line-height: 1.35;
        max-width: 100%;
    }

    .cg-purchase-invoice-details-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: .55rem !important;
        justify-content: stretch;
        align-items: stretch;
    }

    .cg-purchase-invoice-details-actions > .btn,
    .cg-purchase-invoice-details-actions > form,
    .cg-purchase-invoice-details-actions > form > .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        margin: 0 !important;
    }

    .cg-purchase-invoice-details-actions > .btn,
    .cg-purchase-invoice-details-actions > form > .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: normal;
    }
}

.cg-purchase-invoice-number,
.cg-purchase-invoice-supplier-label,
.cg-purchase-invoice-supplier-number {
    display: inline;
}

.cg-purchase-invoice-supplier-label {
    margin-left: .25rem;
}

@media (max-width: 767.98px) {
    .cg-purchase-invoice-details-subtitle {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: .3rem;
        row-gap: .05rem;
        overflow-wrap: normal;
        word-break: normal;
    }

    .cg-purchase-invoice-number {
        flex: 0 0 100%;
    }

    .cg-purchase-invoice-supplier-label {
        margin-left: 0;
        flex: 0 0 auto;
    }

    .cg-purchase-invoice-supplier-number {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}



/* ============================================================
   Purchase Invoice Details - mobile line readability
   Desktop table remains unchanged. On small screens each
   invoice line becomes a labeled ERP detail card so all
   three-way-match values remain visible without horizontal
   scrolling.
   ============================================================ */
@media (max-width: 767.98px) {
    .cg-purchase-invoice-details-lines .table-responsive {
        overflow: visible;
    }

    .cg-purchase-invoice-details-lines .table {
        display: block;
        width: 100%;
    }

    .cg-purchase-invoice-details-lines .table thead {
        display: none;
    }

    .cg-purchase-invoice-details-lines .table tbody {
        display: block;
        padding: .65rem;
    }

    .cg-purchase-invoice-details-lines .table tbody tr {
        display: block;
        margin: 0;
        border: 1px solid #e1e8ed;
        border-radius: .8rem;
        overflow: hidden;
        background: #fff;
    }

    .cg-purchase-invoice-details-lines .table tbody td {
        display: grid;
        grid-template-columns: minmax(88px, 40%) minmax(0, 60%);
        gap: .6rem;
        align-items: start;
        width: 100%;
        padding: .65rem .75rem !important;
        border-bottom: 1px solid #edf1f3;
        text-align: left !important;
        vertical-align: top;
    }

    .cg-purchase-invoice-details-lines .table tbody td:last-child {
        border-bottom: 0;
    }

    .cg-purchase-invoice-details-lines .table tbody td::before {
        content: attr(data-label);
        font-size: .72rem;
        line-height: 1.25;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #65798c;
        padding-top: .1rem;
    }

    .cg-purchase-invoice-details-lines .cg-mobile-cell-value {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
        color: #172b3a;
        line-height: 1.35;
    }

    .cg-purchase-invoice-details-lines .cg-mobile-cell-value.text-end,
    .cg-purchase-invoice-details-lines td.text-end .cg-mobile-cell-value {
        text-align: right;
    }

    .cg-purchase-invoice-details-lines .cg-pi-line-number {
        display: none !important;
    }

    .cg-purchase-invoice-details-lines .table tbody td[data-label="Item"] .cg-mobile-cell-value,
    .cg-purchase-invoice-details-lines .table tbody td[data-label="GR / PO"] .cg-mobile-cell-value {
        text-align: left;
    }

    .cg-purchase-invoice-details-lines .table tbody td[data-label="Warehouse"] .cg-mobile-cell-value {
        font-weight: 500;
    }
}

/* ============================================================
   Supplier Payment Details - mobile polish
   Desktop layout remains unchanged. On small screens:
   1) actions become a controlled button grid so Post Payment
      cannot overflow the viewport;
   2) invoice allocations become readable labeled cards instead
      of a squeezed five-column table.
   ============================================================ */
.cg-supplier-payment-details-actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: stretch;
}

.cg-supplier-payment-details-actions > form {
    margin: 0 !important;
}

.cg-supplier-payment-details-actions > form > .btn {
    width: 100%;
}

@media (max-width: 767.98px) {
    .cg-supplier-payment-details-header {
        display: block !important;
        width: 100%;
        margin-bottom: .85rem !important;
    }

    .cg-supplier-payment-details-heading {
        width: 100%;
        margin-bottom: .75rem;
    }

    .cg-supplier-payment-details-heading h2 {
        font-size: 1.45rem;
        line-height: 1.15;
        white-space: nowrap;
    }

    .cg-supplier-payment-details-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: .55rem !important;
    }

    .cg-supplier-payment-details-actions > .btn,
    .cg-supplier-payment-details-actions > form,
    .cg-supplier-payment-details-actions > form > .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        margin: 0 !important;
    }

    .cg-supplier-payment-details-actions > .btn,
    .cg-supplier-payment-details-actions > form > .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: normal;
        text-align: center;
        line-height: 1.15;
    }

    /* Back is deliberately the last, full-width action on mobile. */
    .cg-supplier-payment-details-actions > .cg-back-btn {
        grid-column: span 2;
        order: 20;
    }

    .cg-supplier-payment-allocations .table-responsive {
        overflow: visible;
    }

    .cg-supplier-payment-allocations .table {
        display: block;
        width: 100%;
    }

    .cg-supplier-payment-allocations .table thead {
        display: none;
    }

    .cg-supplier-payment-allocations .table tbody {
        display: block;
        padding: .65rem;
    }

    .cg-supplier-payment-allocations .table tbody tr {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 1px solid #e1e8ed;
        border-radius: .8rem;
        overflow: hidden;
        background: #fff;
    }

    .cg-supplier-payment-allocations .table tbody td {
        display: grid;
        grid-template-columns: minmax(92px, 38%) minmax(0, 62%);
        gap: .6rem;
        align-items: start;
        width: 100%;
        padding: .65rem .75rem !important;
        border-bottom: 1px solid #edf1f3;
        text-align: left !important;
        vertical-align: top;
    }

    .cg-supplier-payment-allocations .table tbody td:last-child {
        border-bottom: 0;
    }

    .cg-supplier-payment-allocations .table tbody td::before {
        content: attr(data-label);
        font-size: .72rem;
        line-height: 1.25;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #65798c;
        padding-top: .1rem;
    }

    .cg-supplier-payment-allocations .cg-payment-mobile-value {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
        color: #172b3a;
        line-height: 1.35;
        text-align: left;
    }

    .cg-supplier-payment-allocations .table tbody td[data-label="Invoice"] .cg-payment-mobile-value {
        font-weight: 700;
    }

    /* The empty-state row is not a normal allocation card. */
    .cg-supplier-payment-allocations .table tbody td[colspan] {
        display: block;
        text-align: center !important;
    }

    .cg-supplier-payment-allocations .table tbody td[colspan]::before {
        display: none;
    }
}


/* ============================================================
   Supplier Payment - mobile allocation cards + proof
   Presentation only; payment allocation/posting logic unchanged.
   ============================================================ */
.cg-supplier-payment-create-allocations .table-responsive { overflow: visible; }
.cg-supplier-payment-create-allocations .table { margin-bottom: 0; }
.cg-supplier-payment-proof .form-control[type="file"] { min-height: 42px; }

@media (max-width: 767.98px) {
    .cg-supplier-payment-create-allocations .card-header {
        display: block !important;
        padding: .75rem .9rem !important;
    }
    .cg-supplier-payment-create-allocations .card-header > strong {
        display: block;
        font-size: 1rem;
        line-height: 1.3;
        margin-bottom: .35rem;
    }
    .cg-supplier-payment-create-allocations .card-header > span {
        display: block;
        line-height: 1.35;
        white-space: normal;
    }
    .cg-supplier-payment-create-allocations .table {
        display: block;
        width: 100%;
        min-width: 0 !important;
    }
    .cg-supplier-payment-create-allocations .table thead {
        display: none;
    }
    .cg-supplier-payment-create-allocations .table tbody {
        display: block;
        padding: .65rem;
        width: 100%;
        box-sizing: border-box;
    }
    .cg-supplier-payment-create-allocations .table tbody tr {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 1px solid #e1e8ed;
        border-radius: .8rem;
        overflow: hidden;
        background: #fff;
        box-sizing: border-box;
    }
    .cg-supplier-payment-create-allocations .table tbody td {
        display: grid !important;
        grid-template-columns: minmax(92px, 36%) minmax(0, 64%);
        gap: .55rem;
        align-items: start;
        width: 100% !important;
        min-width: 0 !important;
        padding: .65rem .75rem !important;
        border: 0 !important;
        border-bottom: 1px solid #edf1f3 !important;
        text-align: left !important;
        white-space: normal !important;
        box-sizing: border-box;
    }
    .cg-supplier-payment-create-allocations .table tbody td:last-child {
        border-bottom: 0 !important;
    }
    .cg-supplier-payment-create-allocations .table tbody td::before {
        content: attr(data-label);
        color: #65798c;
        font-size: .7rem;
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: .04em;
        text-transform: uppercase;
        padding-top: .15rem;
    }
    .cg-supplier-payment-create-allocations .table tbody td > .cg-payment-mobile-value,
    .cg-supplier-payment-create-allocations .table tbody td > .form-control {
        grid-column: 2;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .cg-supplier-payment-create-allocations .table tbody td > .form-control {
        width: 100%;
        min-height: 40px;
        box-sizing: border-box;
    }
    .cg-supplier-payment-create-allocations .table tbody td[colspan] {
        display: block !important;
        text-align: center !important;
        padding: 1rem !important;
    }
    .cg-supplier-payment-create-allocations .table tbody td[colspan]::before {
        display: none;
    }

    .cg-supplier-payment-proof .card-header {
        padding: .75rem .9rem !important;
    }
    .cg-supplier-payment-proof .card-body {
        padding: .85rem .9rem !important;
    }
    .cg-supplier-payment-proof form .btn {
        width: 100%;
        min-height: 42px;
    }
    .cg-supplier-payment-proof .form-control[type="file"] {
        width: 100%;
        font-size: .85rem;
        min-height: 44px;
    }
}


.cg-payment-availability {
    display: block;
    margin-top: .2rem;
    font-size: .72rem;
    line-height: 1.35;
}
.cg-payment-posted {
    display: block;
    color: #65798c;
    font-weight: 600;
}
.cg-payment-reserved {
    display: block;
    color: #9a6700;
    font-weight: 700;
}
.cg-payment-available {
    display: block;
    color: #16834d;
    font-weight: 700;
}
.cg-supplier-payment-create-allocations .allocation-input[readonly] {
    background-color: #f5f7f9;
    cursor: not-allowed;
}
@media (max-width: 767.98px) {
    .cg-payment-availability {
        text-align: left;
    }
}


/* Supplier Payment - draft reservation reference */
.cg-payment-reservation-note {
    margin-top: .45rem;
    padding: .5rem .65rem;
    border: 1px solid #f0d79a;
    border-radius: .55rem;
    background: #fffaf0;
    color: #7a5700;
}
.cg-payment-reservation-note.is-partial {
    background: #fffaf0;
}
.cg-payment-reservation-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    line-height: 1.25;
    font-weight: 700;
}
.cg-payment-reservation-list {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .35rem;
}
.cg-payment-reservation-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    padding: .28rem .5rem;
    border: 1px solid #e8c875;
    border-radius: .4rem;
    background: #fff;
    color: #765300;
    text-decoration: none;
    font-size: .72rem;
    line-height: 1.2;
    font-weight: 700;
}
.cg-payment-reservation-link:hover,
.cg-payment-reservation-link:focus {
    color: #5f4300;
    text-decoration: underline;
}
.cg-payment-reservation-number {
    white-space: nowrap;
}
.cg-payment-reservation-amount {
    white-space: nowrap;
    font-weight: 600;
}
.cg-payment-reservation-link > i {
    font-size: .65rem;
    opacity: .75;
}
@media (max-width: 767.98px) {
    .cg-payment-reservation-note {
        width: 100%;
        box-sizing: border-box;
        margin-top: .45rem;
        padding: .55rem .65rem;
        border-radius: .6rem;
    }
    .cg-payment-reservation-label {
        font-size: .7rem;
    }
    .cg-payment-reservation-list {
        display: block;
        margin-top: .4rem;
    }
    .cg-payment-reservation-link {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        justify-content: space-between;
        padding: .38rem .5rem;
        font-size: .75rem;
    }
    .cg-payment-reservation-link + .cg-payment-reservation-link {
        margin-top: .3rem;
    }
}

/* Supplier Payment - existing proof replacement UI */
.cg-payment-proof-existing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.cg-payment-proof-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.cg-payment-proof-replace-form {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid #e9eef2;
}

.cg-payment-proof-replace-picker {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
}

.cg-payment-proof-replace-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

@media (max-width: 767.98px) {
    .cg-payment-proof-existing {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }

    .cg-payment-proof-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .cg-payment-proof-actions .btn,
    .cg-payment-proof-replace-actions .btn {
        width: 100%;
        min-height: 42px;
    }

    .cg-payment-proof-replace-picker {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .65rem;
    }

    .cg-payment-proof-replace-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
}


/* ============================================================
   Fixed Asset Details - mobile header
   ============================================================ */
.cg-fixed-asset-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cg-fixed-asset-details-title {
    min-width: 0;
    flex: 1 1 auto;
}

.cg-fixed-asset-details-title h2 {
    white-space: nowrap;
}

.cg-fixed-asset-details-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
    flex: 0 0 auto;
}

.cg-fixed-asset-details-actions form {
    margin: 0;
}

@media (max-width: 767.98px) {
    .cg-fixed-asset-details-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 1.25rem;
        row-gap: .75rem;
    }

    .cg-fixed-asset-details-title {
        width: auto;
        min-width: 0;
    }

    .cg-fixed-asset-details-title h2 {
        white-space: nowrap;
        font-size: 1.55rem;
        line-height: 1.2;
    }

    .cg-fixed-asset-details-actions {
        width: auto;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .cg-fixed-asset-details-actions .cg-fixed-asset-back {
        width: auto;
        min-width: 106px;
        min-height: 44px;
        white-space: nowrap;
    }

    .cg-fixed-asset-details-actions form {
        margin: 0;
    }

    /* Draft actions move below the title; Back stays beside the title. */
    .cg-fixed-asset-details-actions .cg-fixed-asset-back {
        order: 1;
    }

    .cg-fixed-asset-details-actions a:not(.cg-fixed-asset-back),
    .cg-fixed-asset-details-actions form {
        order: 2;
        flex-basis: 100%;
    }

    .cg-fixed-asset-details-actions a:not(.cg-fixed-asset-back),
    .cg-fixed-asset-details-actions form .btn {
        width: 100%;
        min-height: 44px;
    }

}


/* ============================================================
   Fixed Assets list - mobile card layout
   Keeps the desktop table intact and converts only this list
   into readable cards on narrow screens.
   ============================================================ */
@media (max-width: 767.98px) {
    .cg-fixed-assets-list {
        width: 100%;
        display: block;
        border-collapse: separate;
        border-spacing: 0;
    }

    .cg-fixed-assets-list thead {
        display: none;
    }

    .cg-fixed-assets-list tbody,
    .cg-fixed-assets-list tbody tr {
        display: block;
        width: 100%;
    }

    .cg-fixed-assets-list tbody tr {
        margin: 0 0 1rem;
        padding: 1rem;
        border: 1px solid #e3e8ee;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(20, 40, 60, .06);
    }

    .cg-fixed-assets-list tbody tr:last-child {
        margin-bottom: 0;
    }

    .cg-fixed-assets-list tbody td {
        display: grid;
        grid-template-columns: minmax(82px, 34%) minmax(0, 1fr);
        gap: .75rem;
        align-items: start;
        width: 100%;
        min-width: 0;
        padding: .55rem 0;
        border: 0;
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .cg-fixed-assets-list tbody td::before {
        content: attr(data-label);
        display: block;
        text-align: left;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #64788b;
    }

    .cg-fixed-assets-list tbody td > * {
        min-width: 0;
        max-width: 100%;
    }

    .cg-fixed-assets-list tbody td:last-child {
        margin-top: .35rem;
        padding-top: .75rem;
        border-top: 1px solid #e6ebef;
    }

    .cg-fixed-assets-list tbody td:last-child > * {
        justify-self: end;
    }

    .cg-fixed-assets-list .btn {
        min-height: 44px;
    }
}

/* Goods Receipt - Batch Traceability Phase 2 */
.cg-gr-batch-card .cg-gr-batch-line {
    background: var(--cg-surface, #fff);
}

.cg-gr-batch-table th,
.cg-gr-batch-table td {
    white-space: nowrap;
    vertical-align: middle;
}

.cg-gr-batch-table .form-control {
    min-width: 110px;
}

.cg-gr-batch-detail-row > td {
    background: rgba(13, 110, 253, 0.035);
}

.cg-gr-batch-detail-row .table {
    font-size: .875rem;
}

@media (max-width: 767.98px) {
    .cg-gr-batch-card .card-body {
        padding: .75rem;
    }

    .cg-gr-batch-line {
        padding: .75rem !important;
    }

    .cg-gr-batch-table {
        min-width: 820px;
    }

    .cg-gr-batch-card .table-responsive {
        margin-right: -.25rem;
        margin-left: -.25rem;
    }

    .cg-gr-batch-line .d-flex.justify-content-between {
        align-items: flex-start;
    }

    .cg-gr-batch-detail-row .table {
        min-width: 720px;
    }
}


/* =========================================================
   CraftGrid One - Goods Receipt Batch Traceability
   Mobile-first layout override
   ========================================================= */
@media (max-width: 767.98px) {
    .cg-gr-batch-card .card-body {
        padding: .75rem;
    }

    .cg-gr-batch-line {
        padding: .75rem !important;
        overflow: hidden;
    }

    .cg-gr-batch-line .table-responsive {
        overflow: visible;
        margin: 0;
    }

    .cg-gr-batch-table {
        width: 100%;
        min-width: 0 !important;
        margin-bottom: .75rem;
        table-layout: fixed;
    }

    .cg-gr-batch-table thead {
        display: none;
    }

    .cg-gr-batch-table tbody,
    .cg-gr-batch-table tr,
    .cg-gr-batch-table td {
        display: block;
        width: 100%;
    }

    .cg-gr-batch-table tbody {
        display: block;
    }

    .cg-gr-batch-table tr.cg-gr-batch-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .65rem;
        padding: .75rem;
        margin-bottom: .75rem;
        border: 1px solid #e3e9ee;
        border-radius: .75rem;
        background: #fff;
    }

    .cg-gr-batch-table tr.cg-gr-batch-row:last-child {
        margin-bottom: 0;
    }

    .cg-gr-batch-table tr.cg-gr-batch-row td {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: .35rem;
        padding: 0;
        border: 0;
        white-space: normal;
    }

    .cg-gr-batch-table tr.cg-gr-batch-row td::before {
        font-size: .72rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: #64788b;
    }

    .cg-gr-batch-table tr.cg-gr-batch-row td:nth-child(1)::before {
        content: "Batch Number";
    }

    .cg-gr-batch-table tr.cg-gr-batch-row td:nth-child(2)::before {
        content: "Supplier Batch";
    }

    .cg-gr-batch-table tr.cg-gr-batch-row td:nth-child(3)::before {
        content: "Mfg. Date";
    }

    .cg-gr-batch-table tr.cg-gr-batch-row td:nth-child(4)::before {
        content: "Best Before";
    }

    .cg-gr-batch-table tr.cg-gr-batch-row td:nth-child(5)::before {
        content: "Expiry Date";
    }

    .cg-gr-batch-table tr.cg-gr-batch-row td:nth-child(6)::before {
        content: "Quantity";
    }

    .cg-gr-batch-table tr.cg-gr-batch-row td:nth-child(7) {
        display: flex;
        justify-content: flex-end;
        padding-top: .15rem;
    }

    .cg-gr-batch-table tr.cg-gr-batch-row td:nth-child(7)::before {
        display: none;
    }

    .cg-gr-batch-table tr.cg-gr-batch-row td > .form-control {
        display: block;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        min-height: 46px;
        padding: .65rem .75rem;
        font-size: .95rem;
        line-height: 1.25;
        box-sizing: border-box;
    }

    .cg-gr-batch-table tr.cg-gr-batch-row td > input[type="date"] {
        width: 100%;
        min-width: 0;
        appearance: auto;
        -webkit-appearance: auto;
    }

    .cg-gr-batch-table tr.cg-gr-batch-row td:nth-child(6) .form-control {
        text-align: right;
    }

    .cg-gr-batch-table .remove-batch-row {
        min-width: 44px;
        min-height: 44px;
    }

    .cg-gr-batch-table tr.cg-gr-batch-row td:nth-child(7) {
        justify-content: flex-end;
        padding-top: .35rem;
    }

    .cg-gr-batch-line .d-flex.justify-content-between {
        align-items: stretch;
        gap: .65rem !important;
    }

    .cg-gr-batch-line .add-batch-row {
        min-height: 42px;
    }

    .cg-gr-batch-line .batch-allocation-summary,
    .cg-gr-batch-line > .d-flex.justify-content-between > .small {
        text-align: right;
    }
}


/* ============================================================
   Goods Receipt - final mobile details correction
   Presentation only. Keeps GR posting and batch logic unchanged.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Main GR line values: wrap direct text in a real value element so
       mobile grid layout cannot lose anonymous text nodes. */
    .cg-gr-details-items-table tbody td .cg-gr-mobile-value {
        display: block;
        min-width: 0;
        color: #172b3a;
        font-size: .92rem;
        font-weight: 500;
        line-height: 1.3;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .cg-gr-details-items-table tbody td[data-label="Quantity"] .cg-gr-mobile-value,
    .cg-gr-details-items-table tbody td[data-label="Unit Cost"] .cg-gr-mobile-value,
    .cg-gr-details-items-table tbody td[data-label="Line Total"] .cg-gr-mobile-value {
        text-align: right;
    }

    /* Batch traceability on Details: turn the nested desktop table into
       readable mobile rows instead of retaining its desktop min-width. */
    .cg-gr-details-items-table .cg-gr-batch-detail-row {
        display: block !important;
        width: 100% !important;
        padding: .75rem .8rem .85rem !important;
        background: #f7fbff !important;
        border-top: 1px solid #e3edf5 !important;
        border-bottom: 1px solid #e3edf5 !important;
    }

    .cg-gr-details-items-table .cg-gr-batch-detail-row > td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .cg-gr-details-items-table .cg-gr-batch-detail-row > td > .small {
        display: block;
        margin-bottom: .55rem !important;
        color: #173b59;
        font-size: .82rem;
    }

    .cg-gr-details-items-table .cg-gr-batch-detail-row .table-responsive {
        overflow: visible !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .cg-gr-details-items-table .cg-gr-batch-detail-row .table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        table-layout: auto !important;
    }

    .cg-gr-details-items-table .cg-gr-batch-detail-row .table thead {
        display: none !important;
    }

    .cg-gr-details-items-table .cg-gr-batch-detail-row .table tbody,
    .cg-gr-details-items-table .cg-gr-batch-detail-row .table tbody tr,
    .cg-gr-details-items-table .cg-gr-batch-detail-row .table tbody td {
        display: block !important;
        width: 100% !important;
    }

    .cg-gr-details-items-table .cg-gr-batch-detail-row .table tbody tr {
        padding: .65rem .7rem !important;
        margin: 0 !important;
        border: 1px solid #dfe9f0 !important;
        border-radius: .7rem !important;
        background: #fff !important;
    }

    .cg-gr-details-items-table .cg-gr-batch-detail-row .table tbody td {
        display: grid !important;
        grid-template-columns: 43% minmax(0, 57%) !important;
        align-items: start !important;
        gap: .4rem !important;
        padding: .28rem 0 !important;
        border: 0 !important;
        text-align: left !important;
        min-width: 0 !important;
        line-height: 1.25;
    }

    .cg-gr-details-items-table .cg-gr-batch-detail-row .table tbody td::before {
        content: attr(data-label);
        color: #60778a;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
    }

    .cg-gr-details-items-table .cg-gr-batch-detail-row .cg-gr-batch-mobile-value {
        display: block;
        min-width: 0;
        color: #172b3a;
        font-size: .86rem;
        font-weight: 500;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .cg-gr-details-items-table .cg-gr-batch-detail-row .table tbody td[data-label="Qty"] .cg-gr-batch-mobile-value {
        text-align: right;
    }
}

/* Goods Receipt Batch source / existing-batch selection */
.cg-gr-batch-table .cg-batch-source,
.cg-gr-batch-table .cg-existing-batch {
    min-width: 180px;
}

.cg-gr-batch-table .cg-batch-metadata[readonly] {
    background-color: var(--bs-secondary-bg);
    cursor: not-allowed;
}

.cg-gr-batch-table .cg-existing-batch-select .form-text {
    margin-top: .25rem;
}

@media (max-width: 767.98px) {
    .cg-gr-batch-table thead { display: none; }
    .cg-gr-batch-table tbody,
    .cg-gr-batch-table tr,
    .cg-gr-batch-table td { display: block; width: 100%; }
    .cg-gr-batch-table tr.cg-gr-batch-row {
        border: 1px solid var(--bs-border-color);
        border-radius: .75rem;
        padding: .75rem;
        margin-bottom: .75rem;
        background: var(--bs-body-bg);
    }
    .cg-gr-batch-table td { border: 0; padding: .35rem 0; }
    .cg-gr-batch-table td::before {
        display: block;
        margin-bottom: .25rem;
        font-size: .78rem;
        font-weight: 600;
        color: var(--bs-secondary-color);
    }
    .cg-gr-batch-table td:nth-child(1)::before { content: "Batch Source"; }
    .cg-gr-batch-table td:nth-child(2)::before { content: "Internal Batch No."; }
    .cg-gr-batch-table td:nth-child(3)::before { content: "Supplier Batch No."; }
    .cg-gr-batch-table td:nth-child(4)::before { content: "Mfg. Date"; }
    .cg-gr-batch-table td:nth-child(5)::before { content: "Best Before"; }
    .cg-gr-batch-table td:nth-child(6)::before { content: "Expiry Date"; }
    .cg-gr-batch-table td:nth-child(7)::before { content: "Quantity"; }
    .cg-gr-batch-table td:nth-child(8)::before { content: ""; }
    .cg-gr-batch-table .form-select,
    .cg-gr-batch-table .form-control { width: 100%; min-width: 0; min-height: 42px; }
    .cg-gr-batch-table td:last-child { text-align: right !important; padding-top: .5rem; }
}

/* Purchase Order edit: keep line validation outside the data row so an error
   does not resize/reflow the quantity cell or disturb the horizontal grid. */
.po-edit-lines-table .po-line-validation-row > td {
    padding: 0.35rem 0.75rem 0.55rem;
    border-top: 0;
    background: #fff8f8;
}

.po-edit-lines-table .po-line-validation-message {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.15rem;
    color: #b42318;
    font-size: 0.82rem;
    font-weight: 500;
}

.po-edit-lines-table .po-line-validation-message span {
    display: inline;
}


/* ============================================================
   Goods Receipt Create - mobile polish
   Presentation only. Transaction behavior is unchanged.
   ============================================================ */
@media (max-width: 767.98px) {
    .cg-gr-form-card {
        border-radius: .8rem !important;
        overflow: hidden;
    }

    .cg-gr-form-card > .card-header,
    .cg-gr-items-card > .card-header {
        padding: .75rem .85rem !important;
    }

    .cg-gr-form-card > .card-body {
        padding: .8rem .85rem !important;
    }

    .cg-gr-form-card .row.g-4 {
        --bs-gutter-x: .75rem;
        --bs-gutter-y: .7rem;
    }

    .cg-gr-form-card .form-label {
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .01em;
        color: #536b7d;
    }

    .cg-gr-form-card .form-select,
    .cg-gr-form-card .form-control {
        min-height: 44px;
        height: 44px;
        border-radius: .55rem;
        font-size: .88rem;
    }

    .cg-gr-form-card .form-select {
        padding-right: 2.15rem;
    }

    .cg-gr-form-card .form-text {
        margin-top: .35rem;
        font-size: .72rem;
        line-height: 1.35;
    }

    .cg-gr-form-card textarea.form-control {
        height: auto;
        min-height: 78px;
        line-height: 1.4;
    }

    /* Keep the primary selection prominent, while reducing vertical travel. */
    .cg-gr-form-card .cg-gr-receipt-date-field,
    .cg-gr-form-card .cg-gr-status-field {
        width: 50%;
        flex: 0 0 50%;
    }

    .cg-gr-form-card .cg-gr-status-field .pt-2 {
        padding-top: .05rem !important;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Business context becomes a compact two-column information grid. */
    .cg-gr-form-card .cg-gr-context-field {
        width: 50%;
        flex: 0 0 50%;
    }

    .cg-gr-form-card .cg-gr-company-field {
        width: 100%;
        flex-basis: 100%;
    }

    .cg-gr-form-card .cg-gr-context-field .fw-semibold {
        font-size: .86rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    form > .alert {
        font-size: .8rem;
        line-height: 1.4;
    }

    /* Keep the long business term readable without making the card wider. */
    .cg-gr-items-table tbody td[data-label="Available to Receive"] {
        grid-template-columns: 38% 62%;
    }

    .cg-gr-items-table tbody td::before {
        font-size: .72rem;
        line-height: 1.25;
    }

    .cg-gr-items-table tbody td[data-label="Item"] > div,
    .cg-gr-items-table tbody td[data-label="Warehouse"] > div {
        font-size: .84rem;
        line-height: 1.25;
    }

    .cg-gr-items-table tbody td[data-label="Item"] small,
    .cg-gr-items-table tbody td[data-label="Warehouse"] small {
        font-size: .74rem;
    }

    .cg-gr-items-table tbody td .form-control {
        min-height: 44px;
        height: 44px;
        border-radius: .55rem;
    }

    .cg-gr-items-card .card-header .text-muted {
        max-width: 100%;
    }

    /* Make footer actions thumb-friendly and prevent cramped buttons. */
    .cg-gr-form-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: .6rem !important;
        padding: 0 .05rem .35rem;
    }

    .cg-gr-form-actions > .cg-back-btn {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
    }

    .cg-gr-form-actions > div {
        display: contents !important;
    }

    .cg-gr-form-actions > div .btn {
        width: 100%;
        min-height: 46px;
        padding-left: .55rem;
        padding-right: .55rem;
        font-size: .84rem;
    }

    .cg-gr-form-actions > div .btn:first-child {
        grid-column: 1;
        grid-row: 2;
    }

    .cg-gr-form-actions > div .btn:last-child {
        grid-column: 2;
        grid-row: 2;
    }
}

@media (max-width: 359.98px) {
    .cg-gr-form-card .cg-gr-receipt-date-field,
    .cg-gr-form-card .cg-gr-status-field,
    .cg-gr-form-card .cg-gr-context-field {
        width: 100%;
        flex-basis: 100%;
    }

    .cg-gr-form-card .cg-gr-company-field {
        width: 100%;
        flex-basis: 100%;
    }

    .cg-gr-form-actions > div .btn {
        font-size: .78rem;
    }
}


/* ============================================================
   Batch Details - mobile header polish
   Presentation only. No batch/inventory business logic changes.
   ============================================================ */
@media (max-width: 767.98px) {
    .batch-details-header {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: .7rem;
        margin-bottom: 1rem !important;
    }

    .batch-details-title-block {
        min-width: 0;
    }

    .batch-details-title-row {
        align-items: center;
        flex-wrap: wrap;
        gap: .4rem !important;
    }

    .batch-details-title {
        font-size: 1.5rem;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .batch-details-title-row .badge {
        flex: 0 0 auto;
    }

    .batch-details-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .batch-details-actions .btn {
        min-height: 42px;
        min-width: 96px;
    }
}


/* ============================================================
   Ledger Account Details - mobile header actions
   Presentation only. No accounting/business logic changes.
   ============================================================ */
@media (max-width: 767.98px) {
    .cg-ledger-account-details-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .7rem !important;
        margin-bottom: 1rem !important;
    }

    .cg-ledger-account-details-header > div:first-child {
        width: 100%;
        min-width: 0;
    }

    .cg-ledger-account-details-header h2 {
        font-size: 1.45rem;
        line-height: 1.15;
        overflow-wrap: anywhere;
        margin-bottom: .15rem !important;
    }

    .cg-ledger-account-details-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: .55rem !important;
        align-items: stretch !important;
    }

    .cg-ledger-account-details-actions > form {
        display: contents !important;
    }

    .cg-ledger-account-details-actions > .btn,
    .cg-ledger-account-details-actions > form > .btn,
    .cg-ledger-account-details-actions > form > button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        margin-left: 0 !important;
    }

    .cg-ledger-account-details-actions .cg-ledger-account-back-btn {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 359.98px) {
    .cg-ledger-account-details-actions {
        grid-template-columns: 1fr;
    }

    .cg-ledger-account-details-actions .cg-ledger-account-back-btn {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ============================================================
   Fiscal Years - mobile polish
   Presentation only. Keeps desktop table/layout unchanged.
   ============================================================ */
.cg-fiscal-years-header-actions {
    flex: 0 0 auto;
}

.cg-fiscal-years-header-actions .btn {
    white-space: nowrap;
}

.cg-fiscal-years-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {
    .cg-fiscal-years-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .75rem !important;
    }

    .cg-fiscal-years-header > div:first-child {
        width: 100%;
        min-width: 0;
    }

    .cg-fiscal-years-header h2 {
        font-size: 1.65rem;
        line-height: 1.15;
    }

    .cg-fiscal-years-header-actions {
        width: 100%;
    }

    .cg-fiscal-years-header-actions .btn {
        width: auto;
        min-height: 44px;
        white-space: nowrap;
    }

    .cg-fiscal-years-table-card {
        overflow: hidden;
    }

    .cg-fiscal-years-table-wrap {
        overflow: visible !important;
    }

    .cg-fiscal-years-table {
        width: 100%;
        min-width: 0 !important;
        display: block;
        border-collapse: separate;
        border-spacing: 0;
    }

    .cg-fiscal-years-table thead {
        display: none;
    }

    .cg-fiscal-years-table tbody,
    .cg-fiscal-years-table tbody tr {
        display: block;
        width: 100%;
    }

    .cg-fiscal-years-table tbody tr {
        margin: 0;
        padding: .85rem 1rem;
        border-bottom: 1px solid #e3e8ee;
        background: #fff;
    }

    .cg-fiscal-years-table tbody tr:last-child {
        border-bottom: 0;
    }

    .cg-fiscal-years-table tbody .cg-fiscal-years-empty-row {
        padding: 0;
        border-bottom: 0;
    }

    .cg-fiscal-years-table tbody .cg-fiscal-years-empty-row td {
        display: block;
        padding: 1.25rem 1rem !important;
        text-align: center;
    }

    .cg-fiscal-years-table tbody .cg-fiscal-years-empty-row td::before {
        display: none;
    }

    .cg-fiscal-years-table tbody td {
        display: grid;
        grid-template-columns: minmax(82px, 34%) minmax(0, 1fr);
        gap: .7rem;
        align-items: start;
        width: 100%;
        min-width: 0;
        padding: .45rem 0;
        border: 0;
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .cg-fiscal-years-table tbody td::before {
        content: attr(data-label);
        display: block;
        text-align: left;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #64788b;
    }

    .cg-fiscal-years-table tbody td > * {
        min-width: 0;
        max-width: 100%;
    }

    .cg-fiscal-years-table tbody td[data-label="Actions"] {
        margin-top: .35rem;
        padding-top: .7rem;
        border-top: 1px solid #e6ebef;
    }

    .cg-fiscal-years-row-actions {
        justify-content: flex-end;
        width: 100%;
    }

    .cg-fiscal-years-row-actions .btn {
        min-height: 42px;
    }
}

/* ============================================================
   Fiscal Year Details - mobile polish
   Presentation only. Desktop layout remains unchanged.
   ============================================================ */
.cg-fiscal-year-details-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}

.cg-fiscal-year-period-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {
    .cg-fiscal-year-details-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .75rem;
    }

    .cg-fiscal-year-details-title {
        width: 100%;
        min-width: 0;
    }

    .cg-fiscal-year-details-title h2 {
        font-size: 1.55rem;
        line-height: 1.15;
    }

    .cg-fiscal-year-details-title small {
        display: block;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .cg-fiscal-year-details-actions {
        width: 100%;
        justify-content: flex-start;
        align-items: stretch;
    }

    .cg-fiscal-year-details-actions > a,
    .cg-fiscal-year-details-actions > form,
    .cg-fiscal-year-details-actions > form > button {
        margin-left: 0 !important;
    }

    .cg-fiscal-year-details-actions > a,
    .cg-fiscal-year-details-actions > form > button {
        min-height: 42px;
    }

    .cg-fiscal-year-periods-card {
        overflow: hidden;
    }

    .cg-fiscal-year-periods-wrap {
        overflow: visible !important;
    }

    .cg-fiscal-year-periods-table {
        width: 100%;
        min-width: 0 !important;
        display: block;
        border-collapse: separate;
        border-spacing: 0;
    }

    .cg-fiscal-year-periods-table thead {
        display: none;
    }

    .cg-fiscal-year-periods-table tbody,
    .cg-fiscal-year-periods-table tbody tr {
        display: block;
        width: 100%;
    }

    .cg-fiscal-year-periods-table tbody tr {
        padding: .7rem 1rem;
        border-bottom: 1px solid #e3e8ee;
        background: #fff;
    }

    .cg-fiscal-year-periods-table tbody tr:last-child {
        border-bottom: 0;
    }

    .cg-fiscal-year-periods-table tbody td {
        display: grid;
        grid-template-columns: minmax(58px, 30%) minmax(0, 1fr);
        gap: .65rem;
        align-items: center;
        width: 100%;
        min-width: 0;
        padding: .4rem 0;
        border: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .cg-fiscal-year-periods-table tbody td::before {
        content: attr(data-label);
        display: block;
        text-align: left;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #64788b;
    }

    .cg-fiscal-year-periods-table tbody td > * {
        min-width: 0;
        max-width: 100%;
    }

    .cg-fiscal-year-periods-table tbody td[data-label="Actions"] {
        margin-top: .3rem;
        padding-top: .65rem;
        border-top: 1px solid #e6ebef;
    }

    .cg-fiscal-year-period-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .cg-fiscal-year-period-actions .btn {
        min-height: 40px;
    }
}

/* ============================================================
   Purchase Invoice Details - financial overview alignment
   Compact ERP-style financial summary.
   Presentation only; transaction logic unchanged.
   ============================================================ */
.cg-pi-financial-overview {
    align-items: start;
}

.cg-pi-financial-overview > [class*="col-"] {
    min-width: 0;
}

.cg-pi-financial-overview .cg-pi-summary-card,
.cg-pi-financial-overview .cg-pi-payment-status {
    margin-bottom: 0 !important;
}

/* Keep both cards visually compact; do not let the summary create a large blank area. */
.cg-pi-financial-overview .cg-pi-payment-status .card-body {
    padding: .8rem 1.1rem;
}

.cg-pi-financial-overview .cg-pi-payment-status .row {
    min-height: 62px;
}

.cg-pi-financial-overview .cg-pi-summary-card .card-header {
    padding: .7rem 1rem;
}

.cg-pi-financial-overview .cg-pi-summary-card .card-body {
    padding: .65rem .9rem .75rem;
}

.cg-pi-financial-overview .cg-pi-summary-card .card-body > .d-flex {
    margin-bottom: .28rem !important;
    line-height: 1.25;
}

.cg-pi-financial-overview .cg-pi-summary-card .card-body hr {
    margin: .5rem 0;
}

.cg-pi-financial-overview .cg-pi-summary-card .card-body > .d-flex:last-child {
    margin-top: .5rem !important;
    color: #617487;
}

.cg-pi-financial-overview .cg-pi-summary-card .card-body > .d-flex:nth-of-type(4) {
    padding: .42rem .5rem;
    margin: .35rem 0 0 !important;
    border-radius: .45rem;
    background: #eef5fb;
}

@media (max-width: 991.98px) {
    .cg-pi-financial-overview .col-lg-8,
    .cg-pi-financial-overview .col-lg-4 {
        width: 100%;
    }

    .cg-pi-financial-overview .offset-lg-8 {
        margin-left: 0;
    }

    .cg-pi-financial-overview .cg-pi-summary-card {
        margin-top: 1rem !important;
    }

    .cg-pi-financial-overview .cg-pi-payment-status .row {
        min-height: auto;
    }
}

/* ============================================================
   Purchase Invoice Details - payment UX
   Green = financial status/action. Purple = payment history.
   Presentation only; no transaction logic.
   ============================================================ */
.cg-pi-payment-status {
    border: 1px solid #dbe7e1;
    overflow: hidden;
}

.cg-pi-payment-status .card-header {
    background: #f8fbf9;
    border-bottom: 1px solid #e2ece7;
}

.cg-pi-payment-status-paid {
    border-color: #b9e2cc;
    background: linear-gradient(135deg, #f2fbf5 0%, #ffffff 68%);
}

.cg-pi-payment-status-partial {
    border-color: #ead9a8;
    background: linear-gradient(135deg, #fffaf0 0%, #ffffff 68%);
}

.cg-pi-payment-status-unpaid {
    border-color: #d8e0e7;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 68%);
}

.cg-pi-payment-status-main {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.cg-pi-payment-status-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #198754;
    color: #fff;
    font-size: 1.35rem;
}

.cg-pi-payment-status-partial .cg-pi-payment-status-icon {
    background: #f59f00;
    color: #212529;
}

.cg-pi-payment-status-unpaid .cg-pi-payment-status-icon {
    background: #6c757d;
}

.cg-pi-payment-status-title {
    display: block;
    color: #087443;
    font-size: 1.25rem;
    line-height: 1.15;
}

.cg-pi-payment-status-partial .cg-pi-payment-status-title {
    color: #9a6700;
}

.cg-pi-payment-status-unpaid .cg-pi-payment-status-title {
    color: #536575;
}

.cg-pi-payment-status-main small {
    display: block;
    color: #617487;
    margin-top: .2rem;
}

.cg-pi-payment-amount {
    color: #087443;
    font-size: 1.15rem;
}

.cg-pi-outstanding {
    color: #25384a;
    font-size: 1.15rem;
}

.cg-pi-history-card {
    border: 1px solid #ddd8f0;
    overflow: hidden;
}

.cg-pi-history-card .card-header {
    background: linear-gradient(90deg, #f7f3ff 0%, #fbfaff 100%);
    border-bottom: 1px solid #e4ddf5;
}

.cg-pi-history-toggle {
    min-height: 62px;
    padding: .75rem 1rem;
    color: #493b70;
    border: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.cg-pi-history-toggle:hover,
.cg-pi-history-toggle:focus {
    color: #392c5d;
    background: #f3effc;
    box-shadow: none;
}

.cg-pi-history-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #6f42c1;
    color: #fff;
}

.cg-pi-history-summary {
    margin-left: .25rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: #ece5fa;
    color: #5a3d92;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.cg-pi-history-chevron {
    color: #6f42c1;
    transition: transform .18s ease;
}

.cg-pi-history-toggle:not(.collapsed) .cg-pi-history-chevron {
    transform: rotate(180deg);
}

.cg-pi-history-table thead th {
    background: #faf8fe;
    color: #64758a;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    border-bottom-color: #e7e1f3;
}

.cg-pi-history-table tbody td {
    border-color: #eeeaf6;
}

.cg-pi-history-type {
    font-weight: 600;
    white-space: nowrap;
}

.cg-pi-history-type-payment {
    background: #dff3e8;
    color: #087443;
}

.cg-pi-history-type-advance {
    background: #ece5fa;
    color: #5a3d92;
}

.cg-pi-history-status-cancelled {
    background: #e9ecef;
    color: #667085;
}

.cg-pi-history-note {
    margin-top: 1rem;
    padding: .75rem .9rem;
    border-radius: .65rem;
    background: #f0ebfb;
    border: 1px solid #ddd2f2;
    color: #51436d;
    font-size: .9rem;
}

.cg-pi-history-empty {
    padding: .9rem;
    border-radius: .65rem;
    background: #f7f9fb;
    color: #66788a;
}

@media (max-width: 767.98px) {
    .cg-pi-payment-status-main {
        align-items: flex-start;
    }

    .cg-pi-history-toggle {
        min-height: 58px;
        padding: .7rem .8rem;
    }

    .cg-pi-history-toggle > span:first-child {
        flex-wrap: wrap;
    }

    .cg-pi-history-summary {
        flex: 0 0 auto;
    }

    .cg-pi-history-table {
        display: block;
    }

    .cg-pi-history-table thead {
        display: none;
    }

    .cg-pi-history-table tbody,
    .cg-pi-history-table tr {
        display: block;
    }

    .cg-pi-history-table tr {
        margin-bottom: .75rem;
        border: 1px solid #e6e0f2;
        border-radius: .75rem;
        overflow: hidden;
        background: #fff;
    }

    .cg-pi-history-table tr:last-child {
        margin-bottom: 0;
    }

    .cg-pi-history-table td {
        display: grid;
        grid-template-columns: minmax(95px, 38%) minmax(0, 62%);
        gap: .6rem;
        width: 100%;
        padding: .6rem .7rem !important;
        text-align: left !important;
        border-bottom: 1px solid #f0edf5;
        overflow-wrap: anywhere;
    }

    .cg-pi-history-table td:last-child {
        border-bottom: 0;
    }

    .cg-pi-history-table td::before {
        content: attr(data-label);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #718196;
    }

    .cg-pi-history-note {
        font-size: .84rem;
    }
}

/* ============================================================
   Purchase Invoice Details - approved financial layout
   Payment status + history stay in the left column.
   Invoice Summary stays compact in the right column.
   Presentation only; no accounting/business logic changes.
   ============================================================ */
.cg-pi-financial-layout {
    align-items: flex-start;
}

.cg-pi-financial-layout > .col-lg-8,
.cg-pi-financial-layout > .col-lg-4 {
    min-width: 0;
}

.cg-pi-payment-status {
    border: 1px solid #bfe4cf;
    border-radius: .85rem;
    overflow: hidden;
    background: linear-gradient(135deg, #f1fbf5 0%, #ffffff 72%);
    margin-bottom: 1rem;
}

.cg-pi-payment-status .card-header {
    background: transparent;
    border-bottom: 1px solid #d9eee1;
    padding: .75rem 1rem;
    color: #123d2b;
}

.cg-pi-payment-status .card-body {
    padding: .9rem 1rem;
}

.cg-pi-payment-status-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(145px, .8fr) minmax(145px, .8fr);
    align-items: center;
}

.cg-pi-payment-status-main {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
    padding-right: 1.25rem;
}

.cg-pi-payment-status-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #198754;
    color: #fff;
    font-size: 1.45rem;
}

.cg-pi-payment-status-partial .cg-pi-payment-status-icon {
    background: #f59f00;
    color: #212529;
}

.cg-pi-payment-status-unpaid .cg-pi-payment-status-icon {
    background: #6c757d;
}

.cg-pi-payment-status-title {
    display: block;
    color: #087443;
    font-size: 1.28rem;
    line-height: 1.15;
}

.cg-pi-payment-status-partial .cg-pi-payment-status-title {
    color: #9a6700;
}

.cg-pi-payment-status-unpaid .cg-pi-payment-status-title {
    color: #536575;
}

.cg-pi-payment-status-main small {
    display: block;
    margin-top: .2rem;
    color: #617487;
}

.cg-pi-payment-metric {
    min-height: 48px;
    padding: .15rem 1rem;
    border-left: 1px solid #dbe9e1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cg-pi-payment-metric small {
    color: #66788a;
    margin-bottom: .1rem;
}

.cg-pi-payment-amount {
    color: #087443;
    font-size: 1.2rem;
    line-height: 1.15;
}

.cg-pi-outstanding {
    color: #183b5b;
    font-size: 1.2rem;
    line-height: 1.15;
}

.cg-pi-summary-card {
    border: 1px solid #e0e5ea;
    border-radius: .85rem;
    overflow: hidden;
}

.cg-pi-summary-card .card-header {
    padding: .75rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e6eaee;
    color: #123d5d;
}

.cg-pi-summary-card .card-body {
    padding: .7rem .9rem .8rem;
}

.cg-pi-summary-row {
    line-height: 1.25;
    margin-bottom: .42rem !important;
}

.cg-pi-summary-card hr {
    margin: .55rem 0;
}

.cg-pi-summary-total {
    padding: .42rem .5rem;
    border-radius: .45rem;
    background: #eef5fb;
}

.cg-pi-summary-variance {
    margin-top: .55rem !important;
    color: #647b91;
}

.cg-pi-history-card {
    border: 1px solid #ddd8f0;
    border-radius: .85rem;
    overflow: hidden;
}

.cg-pi-history-card .card-header {
    background: linear-gradient(90deg, #f6f1ff 0%, #fbfaff 100%);
    border-bottom: 1px solid #e4ddf5;
}

.cg-pi-history-toggle {
    min-height: 62px;
    padding: .72rem .9rem;
    color: #493b70;
    border: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.cg-pi-history-toggle:hover,
.cg-pi-history-toggle:focus {
    color: #392c5d;
    background: #f3effc;
    box-shadow: none;
}

.cg-pi-history-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #6f42c1;
    color: #fff;
}

.cg-pi-history-summary {
    margin-left: .25rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: #ece5fa;
    color: #5a3d92;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.cg-pi-history-chevron {
    color: #6f42c1;
    transition: transform .18s ease;
}

.cg-pi-history-toggle:not(.collapsed) .cg-pi-history-chevron {
    transform: rotate(180deg);
}

.cg-pi-history-table {
    min-width: 880px;
}

.cg-pi-history-table thead th {
    background: #faf8fe;
    color: #64758a;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    border-bottom-color: #e7e1f3;
}

.cg-pi-history-table tbody td {
    border-color: #eeeaf6;
}

.cg-pi-history-type {
    font-weight: 600;
    white-space: nowrap;
}

.cg-pi-history-type-payment {
    background: #dff3e8;
    color: #087443;
}

.cg-pi-history-type-advance {
    background: #ece5fa;
    color: #5a3d92;
}

.cg-pi-history-note {
    margin-top: .8rem;
    padding: .7rem .85rem;
    border-radius: .65rem;
    background: #eef7ff;
    border: 1px solid #cfe5fb;
    color: #24557d;
    font-size: .86rem;
}

.cg-pi-history-empty {
    padding: .9rem;
    border-radius: .65rem;
    background: #f7f9fb;
    color: #66788a;
}

.cg-pi-related-documents-card {
    margin-top: 1rem;
    border: 1px solid #e0e5ea;
    border-radius: .85rem;
    overflow: hidden;
}

.cg-pi-related-documents-toggle {
    min-height: 58px;
    padding: .72rem .9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #173d5d;
    border: 0;
    border-radius: 0;
}

.cg-pi-related-documents-toggle:hover,
.cg-pi-related-documents-toggle:focus {
    background: #f7fafc;
    box-shadow: none;
}

.cg-pi-related-documents-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eef2f6;
    color: #315674;
}

.cg-pi-related-document-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .8rem;
    border: 1px solid #e3e8ed;
    border-radius: .65rem;
    text-decoration: none;
    color: #1c5278;
}

.cg-pi-related-document-link:hover {
    background: #f7fafc;
}

.cg-pi-related-document-link > i {
    font-size: 1.15rem;
}

.cg-pi-related-document-link small,
.cg-pi-related-document-link strong {
    display: block;
}

.cg-pi-related-document-link small {
    color: #718196;
}

@media (max-width: 991.98px) {
    .cg-pi-payment-status-grid {
        grid-template-columns: 1fr 1fr;
        row-gap: .75rem;
    }

    .cg-pi-payment-status-main {
        grid-column: 1 / -1;
        padding-right: 0;
    }

    .cg-pi-payment-metric:first-of-type {
        border-left: 0;
        padding-left: 0;
    }

    .cg-pi-financial-layout > .col-lg-4 {
        margin-top: 0;
    }
}

@media (max-width: 767.98px) {
    .cg-pi-payment-status-grid {
        grid-template-columns: 1fr;
    }

    .cg-pi-payment-metric,
    .cg-pi-payment-metric:first-of-type {
        border-left: 0;
        border-top: 1px solid #dbe9e1;
        padding: .65rem 0 0;
    }

    .cg-pi-history-toggle {
        min-height: 58px;
        padding: .65rem .75rem;
    }

    .cg-pi-history-toggle > span:first-child {
        flex-wrap: wrap;
    }

    .cg-pi-history-summary {
        flex: 0 0 auto;
    }

    .cg-pi-history-table {
        min-width: 0;
    }

    .cg-pi-history-table thead {
        display: none;
    }

    .cg-pi-history-table tbody,
    .cg-pi-history-table tr {
        display: block;
    }

    .cg-pi-history-table tr {
        margin-bottom: .75rem;
        border: 1px solid #e6e0f2;
        border-radius: .75rem;
        overflow: hidden;
        background: #fff;
    }

    .cg-pi-history-table tr:last-child {
        margin-bottom: 0;
    }

    .cg-pi-history-table td {
        display: grid;
        grid-template-columns: minmax(95px, 38%) minmax(0, 62%);
        gap: .6rem;
        width: 100%;
        padding: .6rem .7rem !important;
        text-align: left !important;
        border-bottom: 1px solid #f0edf5;
        overflow-wrap: anywhere;
    }

    .cg-pi-history-table td:last-child {
        border-bottom: 0;
    }

    .cg-pi-history-table td::before {
        content: attr(data-label);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #718196;
    }
}


/* ============================================================
   Goods Receipt grouped list
   ERP hierarchy: Supplier -> Purchase Order -> Goods Receipt.
   Presentation only; no transaction/accounting logic is changed.
   ============================================================ */
.cg-gr-grouped-list {
    overflow: hidden;
}

.cg-gr-grouped-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.cg-gr-grouped-list-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    flex-wrap: wrap;
}

.cg-gr-groups {
    background: #f8fafb;
}

.cg-gr-supplier-group,
.cg-gr-po-group {
    margin: 0;
}

.cg-gr-supplier-group + .cg-gr-supplier-group {
    border-top: 1px solid #dfe6ea;
}

.cg-gr-supplier-summary,
.cg-gr-po-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.cg-gr-supplier-summary::-webkit-details-marker,
.cg-gr-po-summary::-webkit-details-marker {
    display: none;
}

.cg-gr-supplier-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    background: #eef4f7;
    border-bottom: 1px solid #d9e2e7;
}

.cg-gr-supplier-summary:hover {
    background: #e8f0f4;
}

.cg-gr-summary-main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .6rem;
}

.cg-gr-chevron {
    width: 1rem;
    flex: 0 0 1rem;
    color: #5f7483;
    transition: transform .15s ease;
}

.cg-gr-supplier-group[open] > .cg-gr-supplier-summary .cg-gr-chevron,
.cg-gr-po-group[open] > .cg-gr-po-summary .cg-gr-chevron {
    transform: rotate(90deg);
}

.cg-gr-summary-icon,
.cg-gr-po-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .45rem;
    flex: 0 0 2rem;
}

.cg-gr-summary-icon {
    color: #123b57;
    background: rgba(18, 59, 87, .10);
}

.cg-gr-po-icon {
    color: #5c4a91;
    background: rgba(92, 74, 145, .10);
}

.cg-gr-summary-title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cg-gr-summary-title {
    color: #123b57;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.cg-gr-po-summary .cg-gr-summary-title {
    color: #334155;
}

.cg-gr-summary-subtitle {
    margin-top: .1rem;
    color: #6b7f8d;
    font-size: .76rem;
    font-weight: 500;
    line-height: 1.25;
}

.cg-gr-summary-metrics,
.cg-gr-po-metrics {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .35rem .85rem;
    color: #536875;
    font-size: .78rem;
    white-space: nowrap;
}

.cg-gr-summary-metrics strong,
.cg-gr-po-metrics strong {
    color: #263f4f;
}

.cg-gr-status-metric {
    font-weight: 600;
}

.cg-gr-status-posted {
    color: #0b8063;
}

.cg-gr-status-draft {
    color: #8a6516;
}

.cg-gr-supplier-body {
    padding: .6rem .75rem .8rem 2.25rem;
    background: #f8fafb;
}

.cg-gr-po-group + .cg-gr-po-group {
    margin-top: .55rem;
}

.cg-gr-po-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem .8rem;
    background: #fff;
    border: 1px solid #dfe6ea;
    border-radius: .55rem .55rem 0 0;
}

.cg-gr-po-summary:hover {
    background: #fbfcfd;
}

.cg-gr-po-body {
    overflow: hidden;
    border: 1px solid #dfe6ea;
    border-top: 0;
    border-radius: 0 0 .55rem .55rem;
    background: #fff;
}

.cg-gr-grid-header,
.cg-gr-grid-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.25fr) minmax(120px, 1fr) minmax(90px, .65fr) minmax(100px, .8fr) minmax(90px, .8fr) minmax(95px, .75fr);
    column-gap: .75rem;
    align-items: center;
}

.cg-gr-grid-header {
    min-height: 38px;
    padding: .45rem .8rem;
    color: #60778a;
    background: #f7f9fa;
    border-bottom: 1px solid #e5eaed;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cg-gr-grid-row {
    min-height: 52px;
    padding: .5rem .8rem;
    border-bottom: 1px solid #edf1f3;
}

.cg-gr-grid-row:last-child {
    border-bottom: 0;
}

.cg-gr-grid-row:hover {
    background: #fbfcfd;
}

.cg-gr-cell {
    min-width: 0;
    color: #344b59;
    font-size: .84rem;
}

.cg-gr-cell-primary {
    font-weight: 650;
}

.cg-gr-document-link {
    color: #123b57;
    text-decoration: none;
}

.cg-gr-document-link:hover {
    text-decoration: underline;
}

.cg-gr-actions {
    white-space: nowrap;
}

.cg-gr-actions .btn {
    min-width: 32px;
}

@media (max-width: 991.98px) {
    .cg-gr-grid-header,
    .cg-gr-grid-row {
        grid-template-columns: minmax(120px, 1.2fr) minmax(110px, 1fr) minmax(80px, .7fr) minmax(95px, .8fr) minmax(85px, .8fr) minmax(90px, .7fr);
        column-gap: .5rem;
    }

    .cg-gr-summary-metrics,
    .cg-gr-po-metrics {
        gap: .3rem .55rem;
    }

    .cg-gr-supplier-body {
        padding-left: 1rem;
    }
}

@media (max-width: 767.98px) {
    .cg-gr-grouped-list-header {
        align-items: stretch;
    }

    .cg-gr-grouped-list-tools {
        justify-content: flex-start;
        width: 100%;
    }

    .cg-gr-grouped-list-tools .badge {
        margin-right: auto;
    }

    .cg-gr-grouped-list-tools .btn {
        min-height: 34px;
    }

    .cg-gr-supplier-summary,
    .cg-gr-po-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: .55rem;
        padding: .75rem .8rem;
    }

    .cg-gr-summary-main {
        width: 100%;
    }

    .cg-gr-summary-metrics,
    .cg-gr-po-metrics {
        width: 100%;
        justify-content: flex-start;
        padding-left: 1.6rem;
        white-space: normal;
    }

    .cg-gr-supplier-body {
        padding: .45rem .55rem .65rem;
    }

    .cg-gr-po-group + .cg-gr-po-group {
        margin-top: .45rem;
    }

    .cg-gr-grid-header {
        display: none;
    }

    .cg-gr-grid-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .15rem .8rem;
        padding: .7rem .75rem;
    }

    .cg-gr-grid-row + .cg-gr-grid-row {
        border-top: 1px solid #edf1f3;
    }

    .cg-gr-cell {
        display: grid;
        grid-template-columns: 42% minmax(0, 58%);
        gap: .35rem;
        align-items: center;
        padding: .2rem 0;
        font-size: .8rem;
        text-align: left !important;
    }

    .cg-gr-cell::before {
        content: attr(data-label);
        color: #60778a;
        font-size: .67rem;
        font-weight: 700;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .cg-gr-cell-primary {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        padding-bottom: .45rem;
        margin-bottom: .15rem;
        border-bottom: 1px solid #edf1f3;
    }

    .cg-gr-cell-primary::before {
        content: "GOODS RECEIPT";
        flex: 0 0 auto;
        margin-right: .45rem;
        color: #60778a;
        font-size: .67rem;
        font-weight: 700;
        letter-spacing: .035em;
    }

    .cg-gr-cell[data-label="Status"] {
        align-items: center;
    }

    .cg-gr-cell[data-label="Status"] .badge {
        justify-self: start;
    }

    .cg-gr-actions {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: .4rem;
        margin-top: .35rem;
        padding-top: .55rem;
        border-top: 1px solid #edf1f3;
    }

    .cg-gr-actions::before {
        margin-right: auto;
    }

    .cg-gr-actions .btn {
        min-width: 36px;
        min-height: 34px;
    }
}

@media (max-width: 479.98px) {
    .cg-gr-grouped-list-tools .badge {
        width: 100%;
        margin-right: 0;
    }

    .cg-gr-grouped-list-tools .btn {
        flex: 1 1 calc(50% - .2rem);
    }

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

    .cg-gr-cell {
        grid-template-columns: 39% minmax(0, 61%);
    }

    .cg-gr-cell-primary,
    .cg-gr-actions {
        grid-column: 1;
    }

    .cg-gr-summary-metrics,
    .cg-gr-po-metrics {
        padding-left: 1.6rem;
    }
}


/* ============================================================
   CraftGrid - Purchase Request grouped list
   ERP hierarchy: Supplier -> Purchase Request.
   Presentation only; transaction/approval logic unchanged.
   ============================================================ */
.cg-pr-grouped-list,
.cg-po-grouped-list { overflow: hidden; }

.cg-pr-grouped-list-header,
.cg-po-grouped-list-header {
    display:flex; align-items:center; justify-content:space-between;
    gap:.75rem; flex-wrap:wrap;
}
.cg-pr-grouped-list-tools,
.cg-po-grouped-list-tools {
    display:flex; align-items:center; justify-content:flex-end;
    gap:.4rem; flex-wrap:wrap;
}
.cg-pr-groups, .cg-po-groups { background:#f8fafb; }

.cg-pr-supplier-group, .cg-po-supplier-group { margin:0; }
.cg-pr-supplier-group + .cg-pr-supplier-group,
.cg-po-supplier-group + .cg-po-supplier-group { border-top:1px solid #dfe6ea; }

.cg-pr-supplier-summary, .cg-po-supplier-summary {
    list-style:none; cursor:pointer; user-select:none;
}
.cg-pr-supplier-summary::-webkit-details-marker,
.cg-po-supplier-summary::-webkit-details-marker { display:none; }

.cg-pr-supplier-summary, .cg-po-supplier-summary {
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:.9rem 1rem; background:#eef4f7;
    border-bottom:1px solid #d9e2e7;
}
.cg-pr-supplier-summary:hover, .cg-po-supplier-summary:hover { background:#e8f0f4; }

.cg-pr-summary-main, .cg-po-summary-main {
    display:flex; align-items:center; min-width:0; gap:.6rem;
}
.cg-pr-chevron, .cg-po-chevron {
    width:1rem; flex:0 0 1rem; color:#5f7483; transition:transform .15s ease;
}
.cg-pr-supplier-group[open] > .cg-pr-supplier-summary .cg-pr-chevron,
.cg-po-supplier-group[open] > .cg-po-supplier-summary .cg-po-chevron { transform:rotate(90deg); }

.cg-pr-summary-icon, .cg-po-summary-icon {
    width:2rem; height:2rem; display:inline-flex; align-items:center;
    justify-content:center; border-radius:.45rem; flex:0 0 2rem;
    color:#123b57; background:rgba(18,59,87,.10);
}
.cg-pr-summary-title-wrap, .cg-po-summary-title-wrap {
    display:flex; flex-direction:column; min-width:0;
}
.cg-pr-summary-title, .cg-po-summary-title {
    color:#123b57; font-weight:700; line-height:1.25; overflow-wrap:anywhere;
}
.cg-pr-summary-subtitle, .cg-po-summary-subtitle {
    margin-top:.1rem; color:#6b7f8d; font-size:.76rem; font-weight:500; line-height:1.25;
}
.cg-pr-summary-metrics, .cg-po-summary-metrics {
    display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap;
    gap:.35rem .85rem; color:#536875; font-size:.78rem; white-space:nowrap;
}
.cg-pr-summary-metrics strong, .cg-po-summary-metrics strong { color:#263f4f; }
.cg-pr-status-draft, .cg-po-status-draft { color:#8a6516; font-weight:600; }
.cg-pr-status-submitted, .cg-po-status-submitted { color:#1769aa; font-weight:600; }
.cg-pr-status-approved, .cg-po-status-approved,
.cg-po-status-completed { color:#0b8063; font-weight:600; }
.cg-pr-status-rejected, .cg-po-status-rejected,
.cg-po-status-cancelled { color:#b33a3a; font-weight:600; }
.cg-po-status-partial { color:#8a6516; font-weight:600; }

.cg-pr-supplier-body, .cg-po-supplier-body {
    padding:.6rem .75rem .8rem 2.25rem; background:#f8fafb;
}
.cg-pr-grid-header, .cg-pr-grid-row,
.cg-po-grid-header, .cg-po-grid-row {
    display:grid; align-items:center; column-gap:.75rem;
}
.cg-pr-grid-header, .cg-pr-grid-row {
    grid-template-columns:minmax(120px,1.15fr) minmax(115px,.9fr) minmax(115px,.9fr)
                           minmax(95px,.8fr) minmax(160px,1.6fr) minmax(95px,.75fr);
}
.cg-po-grid-header, .cg-po-grid-row {
    grid-template-columns:minmax(120px,1.25fr) minmax(115px,1fr) minmax(115px,1fr)
                           minmax(105px,.9fr) minmax(160px,1.5fr) minmax(95px,.75fr);
}
.cg-pr-grid-header, .cg-po-grid-header {
    min-height:38px; padding:.45rem .8rem; color:#60778a; background:#f7f9fa;
    border:1px solid #e5eaed; border-bottom:1px solid #e5eaed;
    font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.cg-pr-grid-row, .cg-po-grid-row {
    min-height:52px; padding:.5rem .8rem; background:#fff;
    border:1px solid #edf1f3; border-top:0;
}
.cg-pr-grid-row:hover, .cg-po-grid-row:hover { background:#fbfcfd; }
.cg-pr-cell, .cg-po-cell {
    min-width:0; color:#344b59; font-size:.84rem; overflow-wrap:anywhere;
}
.cg-pr-cell-primary, .cg-po-cell-primary { font-weight:650; }
.cg-pr-document-link, .cg-po-document-link { color:#123b57; text-decoration:none; }
.cg-pr-document-link:hover, .cg-po-document-link:hover { text-decoration:underline; }
.cg-pr-actions, .cg-po-actions { white-space:nowrap; }
.cg-pr-actions .btn, .cg-po-actions .btn { min-width:32px; }

@media (max-width:991.98px) {
    .cg-pr-grid-header, .cg-pr-grid-row {
        grid-template-columns:minmax(105px,1.1fr) minmax(105px,1fr) minmax(105px,1fr)
                               minmax(90px,.8fr) minmax(120px,1.25fr) minmax(90px,.75fr);
        column-gap:.5rem;
    }
    .cg-po-grid-header, .cg-po-grid-row {
        grid-template-columns:minmax(105px,1.15fr) minmax(100px,1fr) minmax(105px,1fr)
                               minmax(90px,.8fr) minmax(120px,1.25fr) minmax(90px,.75fr);
        column-gap:.5rem;
    }
    .cg-pr-summary-metrics, .cg-po-summary-metrics { gap:.3rem .55rem; }
    .cg-pr-supplier-body, .cg-po-supplier-body { padding-left:1rem; }
}

@media (max-width:767.98px) {
    .cg-pr-grouped-list-header, .cg-po-grouped-list-header { align-items:stretch; }
    .cg-pr-grouped-list-tools, .cg-po-grouped-list-tools {
        justify-content:flex-start; width:100%;
    }
    .cg-pr-grouped-list-tools .badge, .cg-po-grouped-list-tools .badge { margin-right:auto; }
    .cg-pr-grouped-list-tools .btn, .cg-po-grouped-list-tools .btn { min-height:34px; }

    .cg-pr-supplier-summary, .cg-po-supplier-summary {
        align-items:flex-start; flex-direction:column; gap:.55rem; padding:.75rem .8rem;
    }
    .cg-pr-summary-main, .cg-po-summary-main { width:100%; }
    .cg-pr-summary-metrics, .cg-po-summary-metrics {
        width:100%; justify-content:flex-start; padding-left:1.6rem; white-space:normal;
    }
    .cg-pr-supplier-body, .cg-po-supplier-body { padding:.45rem .55rem .65rem; }

    .cg-pr-grid-header, .cg-po-grid-header { display:none; }
    .cg-pr-grid-row, .cg-po-grid-row {
        display:grid; grid-template-columns:1fr 1fr; gap:.15rem .8rem; padding:.7rem .75rem;
    }
    .cg-pr-grid-row + .cg-pr-grid-row, .cg-po-grid-row + .cg-po-grid-row {
        border-top:1px solid #edf1f3;
    }
    .cg-pr-cell, .cg-po-cell {
        display:grid; grid-template-columns:42% minmax(0,58%); gap:.35rem;
        align-items:center; padding:.2rem 0; font-size:.8rem; text-align:left !important;
    }
    .cg-pr-cell::before, .cg-po-cell::before {
        content:attr(data-label); color:#60778a; font-size:.67rem; font-weight:700;
        letter-spacing:.035em; text-transform:uppercase;
    }
    .cg-pr-cell-primary, .cg-po-cell-primary {
        grid-column:1 / -1; display:flex; align-items:center; padding-bottom:.45rem;
        margin-bottom:.15rem; border-bottom:1px solid #edf1f3;
    }
    .cg-pr-cell-primary::before, .cg-po-cell-primary::before {
        content:"DOCUMENT"; flex:0 0 auto; margin-right:.45rem; color:#60778a;
        font-size:.67rem; font-weight:700; letter-spacing:.035em;
    }
    .cg-pr-cell[data-label="Status"] .badge, .cg-po-cell[data-label="Status"] .badge { justify-self:start; }
    .cg-pr-actions, .cg-po-actions {
        grid-column:1 / -1; display:flex; justify-content:flex-end; align-items:center;
        gap:.4rem; margin-top:.35rem; padding-top:.55rem; border-top:1px solid #edf1f3;
    }
    .cg-pr-actions::before, .cg-po-actions::before { margin-right:auto; content:attr(data-label); color:#60778a;
        font-size:.67rem; font-weight:700; letter-spacing:.035em; text-transform:uppercase; }
    .cg-pr-actions .btn, .cg-po-actions .btn { min-width:36px; min-height:36px; }
}


/* ============================================================
   Goods Receipt grouped list
   ERP hierarchy: Supplier -> Purchase Order -> Goods Receipt.
   Presentation only; no transaction/accounting logic is changed.
   ============================================================ */
.cg-gr-grouped-list {
    overflow: hidden;
}

.cg-gr-grouped-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.cg-gr-grouped-list-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    flex-wrap: wrap;
}

.cg-gr-groups {
    background: #f8fafb;
}

.cg-gr-supplier-group,
.cg-gr-po-group {
    margin: 0;
}

.cg-gr-supplier-group + .cg-gr-supplier-group {
    border-top: 1px solid #dfe6ea;
}

.cg-gr-supplier-summary,
.cg-gr-po-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.cg-gr-supplier-summary::-webkit-details-marker,
.cg-gr-po-summary::-webkit-details-marker {
    display: none;
}

.cg-gr-supplier-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    background: #eef4f7;
    border-bottom: 1px solid #d9e2e7;
}

.cg-gr-supplier-summary:hover {
    background: #e8f0f4;
}

.cg-gr-summary-main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .6rem;
}

.cg-gr-chevron {
    width: 1rem;
    flex: 0 0 1rem;
    color: #5f7483;
    transition: transform .15s ease;
}

.cg-gr-supplier-group[open] > .cg-gr-supplier-summary .cg-gr-chevron,
.cg-gr-po-group[open] > .cg-gr-po-summary .cg-gr-chevron {
    transform: rotate(90deg);
}

.cg-gr-summary-icon,
.cg-gr-po-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .45rem;
    flex: 0 0 2rem;
}

.cg-gr-summary-icon {
    color: #123b57;
    background: rgba(18, 59, 87, .10);
}

.cg-gr-po-icon {
    color: #5c4a91;
    background: rgba(92, 74, 145, .10);
}

.cg-gr-summary-title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cg-gr-summary-title {
    color: #123b57;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.cg-gr-po-summary .cg-gr-summary-title {
    color: #334155;
}

.cg-gr-summary-subtitle {
    margin-top: .1rem;
    color: #6b7f8d;
    font-size: .76rem;
    font-weight: 500;
    line-height: 1.25;
}

.cg-gr-summary-metrics,
.cg-gr-po-metrics {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .35rem .85rem;
    color: #536875;
    font-size: .78rem;
    white-space: nowrap;
}

.cg-gr-summary-metrics strong,
.cg-gr-po-metrics strong {
    color: #263f4f;
}

.cg-gr-status-metric {
    font-weight: 600;
}

.cg-gr-status-posted {
    color: #0b8063;
}

.cg-gr-status-draft {
    color: #8a6516;
}

.cg-gr-supplier-body {
    padding: .6rem .75rem .8rem 2.25rem;
    background: #f8fafb;
}

.cg-gr-po-group + .cg-gr-po-group {
    margin-top: .55rem;
}

.cg-gr-po-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem .8rem;
    background: #fff;
    border: 1px solid #dfe6ea;
    border-radius: .55rem .55rem 0 0;
}

.cg-gr-po-summary:hover {
    background: #fbfcfd;
}

.cg-gr-po-body {
    overflow: hidden;
    border: 1px solid #dfe6ea;
    border-top: 0;
    border-radius: 0 0 .55rem .55rem;
    background: #fff;
}

.cg-gr-grid-header,
.cg-gr-grid-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.25fr) minmax(120px, 1fr) minmax(90px, .65fr) minmax(100px, .8fr) minmax(90px, .8fr) minmax(95px, .75fr);
    column-gap: .75rem;
    align-items: center;
}

.cg-gr-grid-header {
    min-height: 38px;
    padding: .45rem .8rem;
    color: #60778a;
    background: #f7f9fa;
    border-bottom: 1px solid #e5eaed;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cg-gr-grid-row {
    min-height: 52px;
    padding: .5rem .8rem;
    border-bottom: 1px solid #edf1f3;
}

.cg-gr-grid-row:last-child {
    border-bottom: 0;
}

.cg-gr-grid-row:hover {
    background: #fbfcfd;
}

.cg-gr-cell {
    min-width: 0;
    color: #344b59;
    font-size: .84rem;
}

.cg-gr-cell-primary {
    font-weight: 650;
}

.cg-gr-document-link {
    color: #123b57;
    text-decoration: none;
}

.cg-gr-document-link:hover {
    text-decoration: underline;
}

.cg-gr-actions {
    white-space: nowrap;
}

.cg-gr-actions .btn {
    min-width: 32px;
}

@media (max-width: 991.98px) {
    .cg-gr-grid-header,
    .cg-gr-grid-row {
        grid-template-columns: minmax(120px, 1.2fr) minmax(110px, 1fr) minmax(80px, .7fr) minmax(95px, .8fr) minmax(85px, .8fr) minmax(90px, .7fr);
        column-gap: .5rem;
    }

    .cg-gr-summary-metrics,
    .cg-gr-po-metrics {
        gap: .3rem .55rem;
    }

    .cg-gr-supplier-body {
        padding-left: 1rem;
    }
}

@media (max-width: 767.98px) {
    .cg-gr-grouped-list-header {
        align-items: stretch;
    }

    .cg-gr-grouped-list-tools {
        justify-content: flex-start;
        width: 100%;
    }

    .cg-gr-grouped-list-tools .badge {
        margin-right: auto;
    }

    .cg-gr-grouped-list-tools .btn {
        min-height: 34px;
    }

    .cg-gr-supplier-summary,
    .cg-gr-po-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: .55rem;
        padding: .75rem .8rem;
    }

    .cg-gr-summary-main {
        width: 100%;
    }

    .cg-gr-summary-metrics,
    .cg-gr-po-metrics {
        width: 100%;
        justify-content: flex-start;
        padding-left: 1.6rem;
        white-space: normal;
    }

    .cg-gr-supplier-body {
        padding: .45rem .55rem .65rem;
    }

    .cg-gr-po-group + .cg-gr-po-group {
        margin-top: .45rem;
    }

    .cg-gr-grid-header {
        display: none;
    }

    .cg-gr-grid-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .15rem .8rem;
        padding: .7rem .75rem;
    }

    .cg-gr-grid-row + .cg-gr-grid-row {
        border-top: 1px solid #edf1f3;
    }

    .cg-gr-cell {
        display: grid;
        grid-template-columns: 42% minmax(0, 58%);
        gap: .35rem;
        align-items: center;
        padding: .2rem 0;
        font-size: .8rem;
        text-align: left !important;
    }

    .cg-gr-cell::before {
        content: attr(data-label);
        color: #60778a;
        font-size: .67rem;
        font-weight: 700;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .cg-gr-cell-primary {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        padding-bottom: .45rem;
        margin-bottom: .15rem;
        border-bottom: 1px solid #edf1f3;
    }

    .cg-gr-cell-primary::before {
        content: "GOODS RECEIPT";
        flex: 0 0 auto;
        margin-right: .45rem;
        color: #60778a;
        font-size: .67rem;
        font-weight: 700;
        letter-spacing: .035em;
    }

    .cg-gr-cell[data-label="Status"] {
        align-items: center;
    }

    .cg-gr-cell[data-label="Status"] .badge {
        justify-self: start;
    }

    .cg-gr-actions {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: .4rem;
        margin-top: .35rem;
        padding-top: .55rem;
        border-top: 1px solid #edf1f3;
    }

    .cg-gr-actions::before {
        margin-right: auto;
    }

    .cg-gr-actions .btn {
        min-width: 36px;
        min-height: 34px;
    }
}

@media (max-width: 479.98px) {
    .cg-gr-grouped-list-tools .badge {
        width: 100%;
        margin-right: 0;
    }

    .cg-gr-grouped-list-tools .btn {
        flex: 1 1 calc(50% - .2rem);
    }

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

    .cg-gr-cell {
        grid-template-columns: 39% minmax(0, 61%);
    }

    .cg-gr-cell-primary,
    .cg-gr-actions {
        grid-column: 1;
    }

    .cg-gr-summary-metrics,
    .cg-gr-po-metrics {
        padding-left: 1.6rem;
    }
}

/* Goods Receipt draft emphasis - presentation only. */
.cg-gr-status-draft {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .18rem .48rem;
    border-radius: 999px;
    color: #8a5a00;
    background: #fff3cd;
    border: 1px solid #f0d98a;
}

.cg-gr-grid-row-draft {
    position: relative;
    background: #fffaf0;
    box-shadow: inset 3px 0 0 #d99a00;
}

.cg-gr-grid-row-draft:hover {
    background: #fff6df;
}

.cg-gr-grid-row-draft .cg-gr-document-link {
    font-weight: 750;
}

.cg-gr-draft-badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: .24rem .58rem;
    border-radius: 999px;
    color: #7a5000;
    background: #fff0bf;
    border: 1px solid #e4c15a;
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .01em;
}

.cg-gr-grid-row-draft .cg-gr-actions .btn-outline-primary {
    border-color: #d99a00;
    color: #8a5a00;
    background: #fffaf0;
}

.cg-gr-grid-row-draft .cg-gr-actions .btn-outline-primary:hover {
    color: #fff;
    background: #b77900;
    border-color: #b77900;
}