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


body {

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background: #f4f7f6;

    color: #1d2523;
}


/* SIDEBAR */


.sidebar {

    position: fixed;

    left: 0;

    top: 0;

    width: 250px;

    height: 100vh;

    background: #102d27;

    padding: 30px 20px;

    color: white;
}


.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 40px;
}


.logo-circle {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    background: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 26px;
}


.brand h2 {

    font-size: 18px;

    letter-spacing: 1px;
}


.brand span {

    display: block;

    margin-top: 3px;

    font-size: 12px;

    color: #9eb7b1;
}


nav {

    display: flex;

    flex-direction: column;

    gap: 7px;
}


nav a {

    text-decoration: none;

    color: #c8d8d4;

    padding: 12px 15px;

    border-radius: 7px;

    font-size: 14px;
}


nav a:hover {

    background: #1d453c;

    color: white;
}


nav a.active {

    background: #2d6658;

    color: white;
}


/* MAIN */


.main-content {

    margin-left: 250px;

    padding: 35px;
}


.topbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;
}


.topbar h1 {

    font-size: 30px;
}


.topbar p {

    color: #77827f;

    margin-top: 5px;
}


.status {

    background: white;

    padding: 10px 15px;

    border-radius: 8px;

    font-size: 13px;

    box-shadow:
        0 1px 4px
        rgba(0, 0, 0, 0.08);
}


.status-dot {

    display: inline-block;

    width: 8px;

    height: 8px;

    background: #32a467;

    border-radius: 50%;

    margin-right: 7px;
}


/* CARDS */


.cards {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    margin-bottom: 30px;
}


.card {

    background: white;

    padding: 22px;

    border-radius: 10px;

    border: 1px solid #e4e9e7;

    box-shadow:
        0 2px 5px
        rgba(0, 0, 0, 0.04);
}


.card span {

    color: #77827f;

    font-size: 11px;

    letter-spacing: 0.7px;

    font-weight: 600;
}


.card h2 {

    margin-top: 10px;

    margin-bottom: 5px;

    font-size: 25px;
}


.card p {

    color: #87918f;

    font-size: 12px;
}


/* PANEL */


.panel {

    background: white;

    border-radius: 10px;

    border: 1px solid #e4e9e7;

    margin-bottom: 25px;

    overflow: hidden;
}


.panel-header {

    padding: 22px;

    border-bottom:
        1px solid #e7ecea;
}


.panel-header h2 {

    font-size: 18px;
}


.panel-header p {

    color: #85908d;

    font-size: 13px;

    margin-top: 4px;
}


/* TABLE */


.table-container {

    overflow-x: auto;
}


table {

    width: 100%;

    border-collapse: collapse;

    font-size: 13px;
}


th {

    background: #f7f9f8;

    padding: 13px;

    text-align: left;

    color: #68736f;

    font-size: 11px;

    letter-spacing: 0.4px;

    text-transform: uppercase;

    border-bottom:
        1px solid #e3e9e6;
}


td {

    padding: 15px 13px;

    border-bottom:
        1px solid #edf0ef;
}


tbody tr:hover {

    background: #fafcfb;
}


/* BADGES */


.badge {

    padding: 6px 9px;

    border-radius: 20px;

    font-size: 10px;

    font-weight: 700;
}


.badge-green {

    background: #dff4e8;

    color: #237048;
}


.badge-orange {

    background: #fff0d5;

    color: #946314;
}


.badge-red {

    background: #ffe2e2;

    color: #a23434;
}


/* STOCK FORM */


.stock-form {

    display: flex;

    gap: 6px;
}


.stock-form input {

    width: 70px;

    padding: 7px;

    border: 1px solid #ccd4d1;

    border-radius: 5px;
}


.stock-form button {

    border: none;

    background: #234d43;

    color: white;

    padding: 7px 10px;

    border-radius: 5px;

    cursor: pointer;
}


/* PRODUCT FORM */


.product-form {

    padding: 22px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}


.product-form label {

    display: block;

    font-size: 12px;

    font-weight: 600;

    margin-bottom: 6px;
}


.product-form input {

    width: 100%;

    padding: 10px;

    border:
        1px solid #ccd4d1;

    border-radius: 6px;
}


.button-wrapper {

    display: flex;

    align-items: end;
}


.primary-button {

    padding: 11px 20px;

    border: none;

    border-radius: 6px;

    background: #245c4e;

    color: white;

    cursor: pointer;

    font-weight: 600;
}


.primary-button:hover {

    background: #183f35;
}


/* RESPONSIVE */


@media (max-width: 1100px) {

    .cards {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .product-form {

        grid-template-columns:
            repeat(2, 1fr);
    }

}

.product-form select {

    width: 100%;

    padding: 10px;

    border:
        1px solid #ccd4d1;

    border-radius: 6px;

    background: white;

    font-family: inherit;
}

.inventory-profile-form {

    display: grid;

    grid-template-columns:
        2fr
        repeat(5, 1fr)
        auto;

    gap: 15px;

    align-items: end;

    padding: 18px 22px;

    border-bottom:
        1px solid #edf0ef;
}


.inventory-profile-form:last-child {

    border-bottom: none;
}


.inventory-profile-form label {

    display: block;

    font-size: 11px;

    font-weight: 600;

    margin-bottom: 6px;

    color: #67726f;
}


.inventory-profile-form input {

    width: 100%;

    padding: 9px;

    border:
        1px solid #ccd4d1;

    border-radius: 6px;
}


.profile-sku {

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding-bottom: 8px;
}


.profile-sku strong {

    font-size: 14px;
}


.profile-sku span {

    font-size: 11px;

    color: #7b8783;
}


@media (max-width: 1300px) {

    .inventory-profile-form {

        grid-template-columns:
            repeat(3, 1fr);

    }

}

.order-items-wrapper {

    padding: 22px;

    border-top:
        1px solid #edf0ef;
}


.order-items-wrapper h3 {

    margin-bottom: 18px;
}


.order-item-row {

    display: grid;

    grid-template-columns:
        3fr
        1fr
        1fr
        1fr
        auto;

    gap: 15px;

    align-items: end;

    margin-bottom: 15px;
}


.order-item-row label {

    display: block;

    font-size: 11px;

    font-weight: 600;

    margin-bottom: 6px;
}


.order-item-row input,
.order-item-row select {

    width: 100%;

    padding: 10px;

    border:
        1px solid #ccd4d1;

    border-radius: 6px;

    background: white;
}


.secondary-button {

    padding: 9px 15px;

    border:
        1px solid #245c4e;

    background: white;

    color: #245c4e;

    border-radius: 6px;

    cursor: pointer;

    font-weight: 600;
}


.remove-item-button {

    padding: 10px 12px;

    border: none;

    border-radius: 6px;

    background: #ecefee;

    cursor: pointer;
}


.order-submit {

    padding: 20px 22px;

    border-top:
        1px solid #edf0ef;
}


.order-actions {

    display: flex;

    gap: 8px;
}


.danger-button {

    padding: 9px 12px;

    border: none;

    border-radius: 6px;

    background: #a64242;

    color: white;

    cursor: pointer;
}

/* ========================================================
   ORDER ITEMS
   ======================================================== */


.order-items-wrapper {

    padding: 24px;

    border-top:
        1px solid #e5ebe8;

    background:
        #fbfcfc;
}


.order-items-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 20px;
}


.order-items-header h3 {

    margin: 0;

    font-size: 18px;
}


.order-items-header p {

    margin-top: 5px;

    font-size: 12px;

    color: #7d8885;
}


.order-item-card {

    position: relative;

    margin-bottom: 18px;

    padding: 22px;

    background: white;

    border:
        1px solid #dfe6e3;

    border-radius: 10px;

    box-shadow:
        0 1px 3px
        rgba(0, 0, 0, 0.03);
}


.order-item-number {

    display: inline-block;

    margin-bottom: 16px;

    padding: 5px 10px;

    border-radius: 20px;

    background: #e8f3ef;

    color: #235c4d;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.4px;
}


.order-item-grid {

    display: grid;

    grid-template-columns:
        minmax(280px, 2.4fr)
        minmax(100px, 0.7fr)
        minmax(150px, 1fr)
        minmax(120px, 0.8fr)
        auto;

    gap: 18px;

    align-items: end;
}


.order-item-grid label {

    display: block;

    margin-bottom: 7px;

    font-size: 11px;

    font-weight: 600;

    color: #5f6966;
}


.order-item-grid input,
.order-item-grid select {

    width: 100%;

    height: 42px;

    padding: 9px 11px;

    border:
        1px solid #ccd5d1;

    border-radius: 6px;

    background: white;

    font-family: inherit;

    font-size: 13px;
}


.order-item-grid input:focus,
.order-item-grid select:focus {

    outline: none;

    border-color:
        #2d6b5b;

    box-shadow:
        0 0 0 2px
        rgba(45, 107, 91, 0.08);
}


.currency-input {

    position: relative;
}


.currency-input span {

    position: absolute;

    left: 11px;

    top: 50%;

    transform:
        translateY(-50%);

    font-size: 13px;

    color: #66716e;

    z-index: 1;
}


.currency-input input {

    padding-left: 27px;
}


.percent-input {

    position: relative;
}


.percent-input span {

    position: absolute;

    right: 12px;

    top: 50%;

    transform:
        translateY(-50%);

    font-size: 13px;

    color: #66716e;
}


.percent-input input {

    padding-right: 30px;
}


.remove-column {

    min-width: 90px;
}


.remove-item-button {

    width: 100%;

    height: 42px;

    padding: 0 14px;

    border:
        1px solid #e2c9c9;

    border-radius: 6px;

    background: #fff5f5;

    color: #9c3b3b;

    font-weight: 600;

    cursor: pointer;
}


.remove-item-button:hover {

    background: #fce8e8;
}


.secondary-button {

    padding: 10px 16px;

    border:
        1px solid #245c4e;

    border-radius: 6px;

    background: white;

    color: #245c4e;

    cursor: pointer;

    font-weight: 600;
}


.secondary-button:hover {

    background: #edf6f3;
}


@media (max-width: 1200px) {

    .order-item-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .order-product-field {

        grid-column:
            1 / -1;
    }


    .remove-column {

        width: 120px;
    }

}


@media (max-width: 700px) {

    .order-items-header {

        flex-direction: column;

        align-items: flex-start;
    }


    .order-item-grid {

        grid-template-columns:
            1fr;
    }


    .order-product-field {

        grid-column: auto;
    }


    .remove-column {

        width: 100%;
    }

}

/* ========================================================
   ORDER DETAIL
   ======================================================== */


.view-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 13px;

    border-radius: 6px;

    border:
        1px solid #245c4e;

    background: white;

    color: #245c4e;

    text-decoration: none;

    font-weight: 600;

    font-size: 12px;
}


.view-button:hover {

    background:
        #edf6f3;
}


.order-detail-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;

    padding: 24px;
}


.order-detail-grid > div {

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.detail-label {

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.4px;

    color: #77827f;

    font-weight: 600;
}


.order-totals {

    margin-left: auto;

    width: 420px;

    padding: 25px;
}


.order-totals > div {

    display: flex;

    justify-content: space-between;

    padding: 10px 0;

    border-bottom:
        1px solid #edf0ef;
}


.order-totals .grand-total {

    padding-top: 16px;

    font-size: 18px;

    border-bottom: none;
}


.payment-form {

    display: flex;

    gap: 15px;

    align-items: end;

    padding: 24px;
}


.payment-form label {

    display: block;

    margin-bottom: 7px;

    font-size: 11px;

    font-weight: 600;
}


.payment-form select {

    min-width: 220px;

    height: 42px;

    padding: 9px 11px;

    border:
        1px solid #ccd5d1;

    border-radius: 6px;

    background: white;
}


.fulfilment-actions {

    display: flex;

    gap: 12px;

    padding: 24px;
}


@media (max-width: 900px) {

    .order-detail-grid {

        grid-template-columns:
            1fr;
    }


    .order-totals {

        width: 100%;
    }

}

/* ========================================================
   CUSTOMERS
   ======================================================== */

.customer-form {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

    padding: 24px;
}


.customer-form label {

    display: block;

    margin-bottom: 6px;

    font-size: 11px;

    font-weight: 600;

    color: #68736f;
}


.customer-form input,
.customer-form select {

    width: 100%;

    height: 42px;

    padding: 9px 11px;

    border:
        1px solid #ccd4d1;

    border-radius: 6px;

    background: white;
}


.customer-notes {

    grid-column:
        span 2;
}



/* ========================================================
   INVOICE
   ======================================================== */

.invoice-page {

    background: #eef2f0;
}


.invoice-screen-actions {

    width: 1100px;

    max-width: calc(100% - 40px);

    margin: 25px auto;

    display: flex;

    justify-content: space-between;
}


.invoice-document {

    width: 1100px;

    max-width: calc(100% - 40px);

    margin: 0 auto 50px;

    padding: 50px;

    background: white;

    box-shadow:
        0 4px 20px
        rgba(0, 0, 0, 0.08);
}


.invoice-header {

    display: flex;

    justify-content: space-between;

    gap: 40px;

    padding-bottom: 30px;

    border-bottom:
        2px solid #173f35;
}


.invoice-brand {

    font-size: 21px;

    font-weight: 700;

    color: #173f35;

    margin-bottom: 12px;
}


.invoice-header p {

    margin: 3px 0;

    font-size: 13px;
}


.invoice-title {

    text-align: right;
}


.invoice-title h1 {

    font-size: 32px;

    color: #173f35;

    margin-bottom: 8px;
}


.invoice-meta {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    margin: 30px 0;
}


.invoice-meta div {

    display: flex;

    flex-direction: column;

    gap: 6px;
}


.invoice-meta span {

    font-size: 11px;

    color: #77827f;

    text-transform: uppercase;
}


.invoice-address {

    margin-bottom: 30px;

    padding: 20px;

    background: #f7f9f8;

    border-radius: 8px;
}


.invoice-address h3 {

    margin-bottom: 10px;
}


.invoice-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 20px;
}


.invoice-table th {

    background: #173f35;

    color: white;
}


.invoice-total-box {

    width: 400px;

    margin-left: auto;

    margin-top: 25px;
}


.invoice-total-box > div {

    display: flex;

    justify-content: space-between;

    padding: 10px 0;

    border-bottom:
        1px solid #e4e9e7;
}


.invoice-grand-total {

    font-size: 19px;

    border-bottom: none !important;

    padding-top: 16px !important;
}


.invoice-payment {

    margin-top: 35px;

    padding-top: 20px;

    border-top:
        1px solid #e4e9e7;
}


.invoice-payment p {

    margin: 4px 0;

    font-size: 13px;
}


.invoice-status-section {

    margin-top: 30px;

    padding-top: 20px;

    border-top:
        1px solid #e4e9e7;
}


.invoice-status-section select {

    height: 40px;

    margin: 0 10px;

    padding: 7px 10px;
}


@media print {

    .invoice-screen-actions,
    .invoice-status-section {

        display: none !important;
    }


    body {

        background: white;
    }


    .invoice-document {

        width: 100%;

        max-width: none;

        margin: 0;

        padding: 20px;

        box-shadow: none;
    }

}


@media (max-width: 900px) {

    .customer-form {

        grid-template-columns:
            1fr;
    }


    .customer-notes {

        grid-column:
            auto;
    }


    .invoice-meta {

        grid-template-columns:
            repeat(2, 1fr);
    }

}

/* =========================================================
   PANDA LEAF OFFICIAL LOGO
   ========================================================= */

.logo-circle {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 50%;

    background: white;
}


.company-logo {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}

/* =========================================================
   FINANCE
   ========================================================= */

.checkbox-field {

    height: 42px;

    display: flex;

    align-items: center;

    gap: 9px;
}


.checkbox-field input {

    width: auto;

    height: auto;
}


.finance-filter {

    display: flex;

    gap: 18px;

    align-items: end;

    padding: 22px;
}


.finance-filter label {

    display: block;

    margin-bottom: 6px;

    font-size: 11px;

    font-weight: 600;
}


.finance-filter input {

    height: 42px;

    padding: 9px 11px;

    border:
        1px solid #ccd4d1;

    border-radius: 6px;
}


.pnl-statement {

    padding: 25px;

    max-width: 700px;

    margin-left: auto;

    margin-right: auto;
}


.pnl-row {

    display: flex;

    justify-content: space-between;

    padding: 13px 5px;

    border-bottom:
        1px solid #e7ecea;
}


.pnl-total {

    margin-top: 6px;

    border-top:
        2px solid #87918f;

    font-size: 16px;
}


.pnl-grand-total {

    margin-top: 15px;

    padding-top: 18px;

    border-top:
        3px solid #245c4e;

    border-bottom: none;

    font-size: 20px;

    color: #173f35;
}

/* =========================================================
   PROFIT & LOSS V2.1
   ========================================================= */


.pnl-period-selector {

    display: flex;

    align-items: end;

    gap: 18px;

    padding: 22px;
}


.pnl-period-selector label {

    display: block;

    margin-bottom: 6px;

    font-size: 11px;

    font-weight: 600;

    color: #65706d;
}


.pnl-period-selector select {

    min-width: 170px;

    height: 42px;

    padding: 9px 11px;

    border:
        1px solid #ccd4d1;

    border-radius: 6px;

    background: white;
}


.pnl-section-title {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin:

        10px
        0
        18px;

}


.pnl-section-title h2 {

    margin: 0;

    font-size: 22px;
}


.pnl-section-title p {

    margin-top: 4px;

    color: #7a8582;

    font-size: 12px;
}


/* P&L STATEMENT */


.pnl-v2-statement {

    width: 760px;

    max-width: 100%;

    margin: 0 auto;

    padding: 30px;
}


.pnl-v2-heading {

    margin-top: 20px;

    padding:

        10px
        0;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.7px;

    text-transform: uppercase;

    color: #245c4e;
}


.pnl-v2-heading:first-child {

    margin-top: 0;
}


.pnl-v2-row {

    display: flex;

    justify-content: space-between;

    gap: 30px;

    padding:

        10px
        5px;

    border-bottom:
        1px solid #edf0ef;
}


.pnl-v2-row span {

    color: #48514f;
}


.pnl-v2-deduction strong {

    color: #874141;
}


.pnl-v2-subtotal {

    margin-top: 4px;

    padding-top: 13px;

    border-top:
        1px solid #9ba5a2;

    font-size: 15px;
}


.pnl-v2-major {

    margin-top: 8px;

    padding:

        15px
        5px;

    border-top:
        2px solid #687570;

    border-bottom:
        2px solid #687570;

    font-size: 18px;

    color: #173f35;
}


.pnl-v2-net-profit {

    margin-top: 15px;

    padding:

        18px
        5px;

    border-top:
        3px solid #245c4e;

    border-bottom:
        3px double #245c4e;

    font-size: 20px;

    color: #173f35;
}


.pnl-v2-margin {

    padding:

        9px
        5px;

    text-align: right;

    font-size: 12px;

    color: #707b77;
}


/* ANNUAL TABLE */


.annual-pnl-table {

    min-width: 1050px;
}


.selected-pnl-month {

    background: #f0f7f4;
}


.annual-total-row {

    background: #173f35;

    color: white;
}


.annual-total-row td {

    border-bottom: none;
}


.pnl-profit {

    color: #24734d;
}


.pnl-loss {

    color: #a13f3f;
}


/* ANNUAL INSIGHTS */


.annual-insight-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;

    padding: 24px;
}


.annual-insight-card {

    padding: 20px;

    border:
        1px solid #e2e8e5;

    border-radius: 9px;

    background: #fafcfb;
}


.annual-insight-card span {

    display: block;

    margin-bottom: 10px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.6px;

    color: #72807b;
}


.annual-insight-card h3 {

    margin-bottom: 5px;

    font-size: 20px;
}


.annual-insight-card strong {

    font-size: 13px;

    color: #245c4e;
}


/* INFORMATION */


.pnl-information-box {

    padding: 24px;

    background: #f8faf9;
}


.pnl-information-box strong {

    color: #173f35;
}


.pnl-information-box p {

    margin-top: 10px;

    max-width: 950px;

    line-height: 1.6;

    color: #697470;

    font-size: 12px;
}


/* RESPONSIVE */


@media (max-width: 1000px) {

    .annual-insight-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .pnl-period-selector {

        flex-direction: column;

        align-items: stretch;
    }


    .pnl-period-selector select {

        width: 100%;
    }


    .annual-insight-grid {

        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   SKU REMOVE BUTTON
   ========================================================= */

.sku-remove-button {

    padding: 8px 11px;

    border:
        1px solid #e1bcbc;

    border-radius: 6px;

    background: #fff5f5;

    color: #a13f3f;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;
}


.sku-remove-button:hover {

    background: #f9dddd;

    border-color: #cf9595;
}

/* =========================================================
   P&L V2.2A - GROWTH CONTROL
   ========================================================= */

.growth-status-panel {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

    margin-bottom: 22px;
}


.growth-status-panel > div {

    background: #173f35;

    color: white;

    padding: 22px;

    border-radius: 10px;
}


.growth-status-panel span {

    display: block;

    margin-bottom: 9px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.6px;

    color: #b9d1ca;
}


.growth-status-panel h2 {

    margin-bottom: 4px;

    font-size: 22px;
}


.growth-status-panel p {

    font-size: 12px;

    color: #c7d9d4;
}


.growth-compare-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;

    margin-bottom: 28px;
}


.growth-compare-card {

    padding: 20px;

    background: white;

    border:
        1px solid #e3e9e6;

    border-radius: 10px;
}


.growth-compare-card span {

    display: block;

    margin-bottom: 10px;

    color: #6d7975;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.5px;
}


.growth-compare-card h3 {

    margin-bottom: 8px;

    font-size: 22px;

    color: #173f35;
}


.growth-compare-card p {

    margin-bottom: 7px;

    font-size: 12px;

    color: #77827f;
}


.growth-compare-card strong {

    display: block;

    margin-bottom: 7px;

    font-size: 12px;
}


@media (max-width: 1100px) {

    .growth-compare-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .growth-status-panel {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 700px) {

    .growth-compare-grid {

        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   GOODS RECEIVED V2
   ========================================================= */

.goods-received-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

    padding: 24px;
}


.goods-received-grid label {

    display: block;

    margin-bottom: 6px;

    font-size: 11px;

    font-weight: 600;
}


.goods-received-grid input,
.goods-received-grid select {

    width: 100%;

    min-height: 40px;

    box-sizing: border-box;
}


.goods-received-notes {

    grid-column:
        span 2;
}


.landed-cost-summary {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;

    margin:
        0 24px 22px;

    padding: 20px;

    background: #f7faf8;

    border:
        1px solid #e0e8e4;

    border-radius: 9px;
}


.landed-cost-summary span {

    display: block;

    margin-bottom: 8px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.5px;

    color: #74807c;
}


.landed-cost-summary h3 {

    margin: 0;

    color: #173f35;

    font-size: 20px;
}


.landed-cost-highlight {

    padding-left: 18px;

    border-left:
        3px solid #245c4e;
}


.landed-cost-highlight h3 {

    font-size: 24px;
}


.goods-received-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:

        0 24px 24px;
}


.inventory-planning-row {

    display: grid;

    grid-template-columns:
        1.6fr
        repeat(5, 1fr)
        auto;

    gap: 14px;

    align-items: end;

    padding: 18px;

    border-top:
        1px solid #e7ecea;
}


.inventory-planning-row small {

    display: block;

    margin-top: 4px;

    color: #7a8581;
}


.inventory-planning-row label {

    display: block;

    margin-bottom: 5px;

    font-size: 10px;
}


.inventory-planning-row input {

    width: 100%;

    box-sizing: border-box;
}


@media (max-width: 1100px) {

    .goods-received-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .landed-cost-summary {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .inventory-planning-row {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .goods-received-grid {

        grid-template-columns:
            1fr;
    }


    .goods-received-notes {

        grid-column:
            auto;
    }


    .landed-cost-summary {

        grid-template-columns:
            1fr;
    }


    .goods-received-footer {

        flex-direction: column;

        align-items: stretch;
    }


    .inventory-planning-row {

        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   INVENTORY PROFESSIONAL UI V3
   ========================================================= */


.inventory-top-status {

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 10px 14px;

    border: 1px solid #dfe6e3;
    border-radius: 8px;

    background: #ffffff;

    font-size: 12px;
    color: #344c45;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */


.inventory-section-heading {

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.section-chip {

    padding: 7px 12px;

    border-radius: 20px;

    background: #edf6f2;

    color: #1e6654;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.5px;
    text-transform: uppercase;
}


.section-chip-dark {

    background: #173f35;
    color: white;
}


/* =========================================================
   SKU CELL
   ========================================================= */


.sku-cell {

    display: flex;
    flex-direction: column;
    gap: 3px;
}


.sku-cell small {

    color: #7a8581;
    font-size: 10px;
}


/* =========================================================
   PLANNING TABLE
   ========================================================= */


.planning-table-header {

    display: grid;

    grid-template-columns:
        1.6fr
        repeat(5, minmax(110px, 1fr))
        70px;

    gap: 14px;

    padding:
        11px
        18px;

    background: #f5f8f6;

    border-top: 1px solid #e5eae8;
    border-bottom: 1px solid #e5eae8;

    color: #71807b;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.4px;
    text-transform: uppercase;
}


.inventory-planning-row-v2 {

    display: grid;

    grid-template-columns:
        1.6fr
        repeat(5, minmax(110px, 1fr))
        70px;

    gap: 14px;

    align-items: center;

    padding:
        15px
        18px;

    border-bottom: 1px solid #edf0ef;
}


.inventory-planning-row-v2:last-child {

    border-bottom: none;
}


.inventory-planning-row-v2:hover {

    background: #fbfcfc;
}


.inventory-planning-row-v2 input {

    width: 100%;

    height: 36px;

    box-sizing: border-box;

    padding:
        7px
        9px;

    border: 1px solid #cfd8d4;
    border-radius: 5px;

    background: white;
}


.planning-product {

    display: flex;
    flex-direction: column;
    gap: 3px;
}


.planning-product strong {

    color: #152f29;
}


.planning-product small {

    color: #7d8985;
    font-size: 10px;
}


.planning-save-button {

    height: 36px;

    border: none;
    border-radius: 5px;

    background: #205f50;
    color: white;

    font-weight: 600;

    cursor: pointer;
}


.planning-save-button:hover {

    background: #174c40;
}


.mobile-field-label {

    display: none;
}


/* =========================================================
   GOODS RECEIVED MAIN LAYOUT
   ========================================================= */


.goods-received-panel {

    overflow: hidden;
}


.goods-received-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        390px;

    gap: 0;
}


.goods-received-main {

    padding: 26px;

    border-right: 1px solid #e4e9e7;
}


.landed-cost-sidebar {

    padding: 26px;

    background: #f7faf8;
}


/* =========================================================
   FORM SECTION TITLES
   ========================================================= */


.form-section-title {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;
}


.form-section-title h3 {

    margin: 0;

    font-size: 15px;

    color: #183b32;
}


.form-section-title p {

    margin: 3px 0 0;

    font-size: 10px;

    color: #7a8581;
}


.form-section-number {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border-radius: 50%;

    background: #173f35;

    color: white;

    font-size: 11px;
    font-weight: 700;
}


.cost-title {

    margin-top: 30px;
}


/* =========================================================
   DELIVERY FORM GRID
   ========================================================= */


.goods-form-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.field-wide {

    grid-column: span 2;
}


.form-field label,
.cost-field label {

    display: block;

    margin-bottom: 6px;

    color: #40524c;

    font-size: 10px;
    font-weight: 600;
}


.form-field input,
.form-field select,
.form-field textarea {

    width: 100%;

    box-sizing: border-box;

    border: 1px solid #ccd6d2;

    border-radius: 6px;

    background: white;

    font-family: inherit;

    font-size: 12px;
}


.form-field input,
.form-field select {

    height: 40px;

    padding:
        8px
        10px;
}


.form-field textarea {

    padding: 10px;

    resize: vertical;

    min-height: 80px;
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.cost-field input:focus {

    outline: none;

    border-color: #327460;

    box-shadow:
        0 0 0 2px
        rgba(50, 116, 96, 0.08);
}


/* =========================================================
   COST GRID
   ========================================================= */


.cost-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 15px;
}


.cost-field {

    padding: 13px;

    border: 1px solid #e0e6e3;

    border-radius: 7px;

    background: #fbfcfb;
}


.cost-primary {

    background: #f2f8f5;

    border-color: #cadfd6;
}


.money-field {

    display: flex;

    align-items: center;

    height: 38px;

    overflow: hidden;

    border: 1px solid #ccd6d2;

    border-radius: 5px;

    background: white;
}


.money-field span {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 100%;

    background: #f5f7f6;

    border-right: 1px solid #dce2df;

    color: #596862;
}


.money-field input {

    flex: 1;

    min-width: 0;

    height: 100%;

    padding:
        0
        10px;

    border: none;

    outline: none;

    background: transparent;
}


.notes-field {

    margin-top: 20px;
}


/* =========================================================
   LANDED COST SIDEBAR
   ========================================================= */


.cost-summary-heading {

    margin-bottom: 25px;
}


.cost-summary-heading span {

    display: block;

    margin-bottom: 6px;

    color: #628076;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.8px;
}


.cost-summary-heading h3 {

    margin: 0;

    color: #173f35;

    font-size: 18px;
}


.cost-summary-row {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        11px
        0;

    color: #61706b;

    font-size: 11px;
}


.cost-summary-row strong {

    color: #192f29;

    font-size: 14px;
}


.cost-summary-divider {

    margin: 10px 0;

    border-top: 1px solid #cfd9d5;
}


.total-row {

    padding:
        15px
        0;
}


.total-row span {

    font-weight: 700;

    color: #304c43;
}


.total-row strong {

    font-size: 18px;

    color: #173f35;
}


.unit-cost-box {

    margin-top: 16px;

    padding: 20px;

    border-radius: 9px;

    background: #173f35;

    color: white;
}


.unit-cost-box span {

    display: block;

    margin-bottom: 7px;

    color: #bcd5cd;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.7px;
}


.unit-cost-box strong {

    display: block;

    margin-bottom: 5px;

    font-size: 29px;
}


.unit-cost-box small {

    color: #b9ccc6;

    font-size: 9px;
}


/* =========================================================
   FIFO INFORMATION
   ========================================================= */


.fifo-information {

    margin-top: 18px;

    padding: 14px;

    border:
        1px solid #d9e5e0;

    border-radius: 7px;

    background: white;
}


.fifo-information strong {

    display: block;

    margin-bottom: 5px;

    color: #245e4f;

    font-size: 11px;
}


.fifo-information p {

    margin: 0;

    color: #75817d;

    font-size: 9px;

    line-height: 1.5;
}


/* =========================================================
   INCOMING CHECKBOX
   ========================================================= */


.incoming-checkbox {

    display: flex;

    gap: 10px;

    margin-top: 19px;

    padding: 13px;

    border-radius: 7px;

    background: #eef5f2;

    cursor: pointer;
}


.incoming-checkbox input {

    margin-top: 3px;
}


.incoming-checkbox span {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.incoming-checkbox strong {

    color: #264c41;

    font-size: 10px;
}


.incoming-checkbox small {

    color: #78847f;

    font-size: 9px;
}


/* =========================================================
   RECEIVE BUTTON
   ========================================================= */


.receive-stock-button {

    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin-top: 20px;

    padding:
        13px
        16px;

    border: none;

    border-radius: 7px;

    background: #1d604f;

    color: white;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


.receive-stock-button:hover {

    background: #164d40;
}


.receive-stock-button span {

    font-size: 18px;
}


.receive-action-note {

    margin:

        9px
        5px
        0;

    text-align: center;

    color: #7a8782;

    font-size: 9px;

    line-height: 1.4;
}


/* =========================================================
   OTHER STOCK MOVEMENTS
   ========================================================= */


.other-stock-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 17px;

    padding: 24px;
}


.other-stock-submit {

    grid-column: span 3;
}


/* =========================================================
   LEDGER
   ========================================================= */


.quantity-positive {

    color: #227049;

    font-weight: 700;
}


.quantity-negative {

    color: #a84646;

    font-weight: 700;
}


.ledger-notes {

    max-width: 420px;

    white-space: normal;

    color: #65736e;

    font-size: 10px;
}


.empty-table-message {

    padding: 30px !important;

    text-align: center;

    color: #7d8885;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */


@media (max-width: 1250px) {

    .goods-received-layout {

        grid-template-columns:
            1fr;
    }


    .goods-received-main {

        border-right: none;

        border-bottom: 1px solid #e4e9e7;
    }


    .landed-cost-sidebar {

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 15px;
    }


    .cost-summary-heading,
    .unit-cost-box,
    .fifo-information,
    .incoming-checkbox,
    .receive-stock-button,
    .receive-action-note {

        grid-column: span 2;
    }

}


@media (max-width: 1050px) {

    .planning-table-header {

        display: none;
    }


    .inventory-planning-row-v2 {

        grid-template-columns:
            repeat(2, 1fr);

        padding: 20px;
    }


    .planning-product {

        grid-column: span 2;
    }


    .mobile-field-label {

        display: block;

        margin-bottom: 5px;

        font-size: 9px;

        color: #6d7975;
    }


    .planning-save-button {

        width: 120px;
    }


    .cost-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .goods-form-grid,
    .cost-grid,
    .other-stock-grid {

        grid-template-columns:
            1fr;
    }


    .field-wide,
    .other-stock-submit {

        grid-column:
            auto;
    }


    .landed-cost-sidebar {

        display: block;
    }


    .cost-summary-heading,
    .unit-cost-box,
    .fifo-information,
    .incoming-checkbox,
    .receive-stock-button,
    .receive-action-note {

        margin-bottom: 15px;
    }


    .inventory-planning-row-v2 {

        grid-template-columns:
            1fr;
    }


    .planning-product {

        grid-column:
            auto;
    }

}

/* =========================================================
   SUPPLIERS V1
   ========================================================= */


.supplier-form-section {

    padding: 26px;
}


.supplier-form-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.supplier-commercial-title {

    margin-top: 30px;
}


.supplier-create-footer {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 24px;

    padding-top: 20px;

    border-top:
        1px solid #e3e8e6;
}


.supplier-create-note {

    color: #78847f;

    font-size: 10px;
}


.supplier-create-note strong {

    margin-left: 5px;

    color: #245e4f;
}


.supplier-create-button {

    width: 220px;

    margin-top: 0;
}


/* =========================================================
   SUPPLIER TABLE
   ========================================================= */


.supplier-name-cell {

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.supplier-name-cell strong {

    color: #163b31;
}


.supplier-name-cell span {

    color: #7b8682;

    font-size: 9px;
}


.supplier-contact-cell {

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.supplier-contact-cell small {

    color: #77827e;
}


.currency-chip {

    display: inline-block;

    min-width: 36px;

    padding:
        5px
        8px;

    text-align: center;

    border-radius: 5px;

    background: #eef4f1;

    color: #275b4e;

    font-size: 10px;

    font-weight: 700;
}


.supplier-actions {

    display: flex;

    align-items: center;

    gap: 8px;
}


.supplier-actions form {

    margin: 0;
}


.supplier-archive-button,
.supplier-activate-button {

    min-height: 33px;

    padding:
        7px
        11px;

    border-radius: 5px;

    font-size: 10px;

    font-weight: 600;

    cursor: pointer;
}


.supplier-archive-button {

    border:
        1px solid #e2b7b7;

    background: #fff5f5;

    color: #a23f3f;
}


.supplier-archive-button:hover {

    background: #f8dddd;
}


.supplier-activate-button {

    border:
        1px solid #b9d9cc;

    background: #eef8f4;

    color: #24664f;
}


.supplier-activate-button:hover {

    background: #dff1e9;
}


.supplier-inactive-row {

    opacity: 0.68;

    background: #fafafa;
}


/* =========================================================
   SUPPLIER DETAIL
   ========================================================= */


.supplier-detail-header {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}


.supplier-detail-header h1 {

    margin:
        4px
        0;

    font-size: 27px;
}


.supplier-detail-header p {

    margin: 0;

    color: #7b8682;

    font-size: 12px;
}


.supplier-detail-code {

    color: #28705c;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.7px;
}


.supplier-detail-actions {

    display: flex;

    align-items: center;

    gap: 12px;
}


.supplier-edit-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        340px;
}


.supplier-edit-main {

    padding: 26px;

    border-right:
        1px solid #e4e9e7;
}


.supplier-summary-sidebar {

    padding: 26px;

    background: #f7faf8;
}


.supplier-summary-row {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        12px
        0;

    border-bottom:
        1px solid #e3e8e6;

    color: #66746f;

    font-size: 10px;
}


.supplier-summary-row strong {

    color: #183c32;

    text-align: right;
}


.supplier-update-footer {

    display: flex;

    justify-content: flex-end;

    margin-top: 24px;

    padding-top: 20px;

    border-top:
        1px solid #e3e8e6;
}


.supplier-update-button {

    width: 230px;

    margin-top: 0;
}


.supplier-po-placeholder {

    margin-top: 18px;

    padding: 18px;

    border-radius: 8px;

    background: #173f35;

    color: white;
}


.supplier-po-placeholder span {

    display: block;

    margin-bottom: 7px;

    color: #b7d0c8;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.6px;
}


.supplier-po-placeholder strong {

    display: block;

    margin-bottom: 6px;

    font-size: 17px;
}


.supplier-po-placeholder small {

    color: #b8cdc6;

    line-height: 1.5;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */


@media (max-width: 1000px) {

    .supplier-edit-layout {

        grid-template-columns:
            1fr;
    }


    .supplier-edit-main {

        border-right: none;

        border-bottom:
            1px solid #e4e9e7;
    }

}


@media (max-width: 700px) {

    .supplier-form-grid {

        grid-template-columns:
            1fr;
    }


    .supplier-create-footer {

        flex-direction: column;

        align-items: stretch;
    }


    .supplier-create-button,
    .supplier-update-button {

        width: 100%;
    }


    .supplier-detail-header {

        flex-direction: column;

        align-items: flex-start;
    }

}

/* =========================================================
   SUPPLIERS V1.1 - ARCHIVE MANAGEMENT
   ========================================================= */


/* =========================================================
   TOP ARCHIVE BUTTON
   ========================================================= */


.supplier-archive-header-button {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 165px;

    padding: 10px 15px;

    border: 1px solid #dce4e0;

    border-radius: 8px;

    background: #ffffff;

    color: #54645e;

    text-decoration: none;

    transition: 0.15s ease;
}


.supplier-archive-header-button:hover {

    border-color: #becdc7;

    background: #f8faf9;
}


.supplier-archive-header-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 6px;

    background: #edf2f0;

    color: #50625b;

    font-size: 13px;
}


.supplier-archive-header-button > div:last-child {

    display: flex;

    align-items: center;

    gap: 9px;
}


.supplier-archive-header-button span {

    font-size: 10px;

    font-weight: 600;
}


.supplier-archive-header-button strong {

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 22px;
    height: 22px;

    padding: 0 5px;

    border-radius: 11px;

    background: #e7eeeb;

    color: #395149;

    font-size: 10px;
}


/* HAS ARCHIVED RECORDS */


.supplier-archive-header-button.supplier-archive-has-records {

    border-color: #e3c28a;

    background: #fff9ef;

    color: #855b1d;
}


.supplier-archive-has-records
.supplier-archive-header-icon {

    background: #f4dfb7;

    color: #855b1d;
}


.supplier-archive-has-records strong {

    background: #d99732;

    color: #ffffff;
}


/* =========================================================
   ARCHIVE KPI CARD
   ========================================================= */


.supplier-archive-card {

    display: block;

    color: inherit;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}


.supplier-archive-card:hover {

    transform: translateY(-1px);

    box-shadow:
        0 5px 16px
        rgba(23, 63, 53, 0.08);
}


.supplier-card-top {

    display: flex;

    align-items: center;
    justify-content: space-between;
}


.supplier-card-arrow {

    font-size: 16px;

    color: #7a8984;
}


.supplier-archive-card-active {

    border-color: #e0bd80 !important;

    background:
        linear-gradient(
            135deg,
            #fffdf8,
            #fff7e8
        ) !important;
}


.supplier-archive-card-active h2 {

    color: #a66517;
}


.supplier-archive-card-active
.supplier-card-arrow {

    color: #c17c20;
}


/* =========================================================
   SUCCESS MESSAGE
   ========================================================= */


.supplier-success-message {

    margin-bottom: 18px;

    padding: 13px 17px;

    border:
        1px solid #b9ddcc;

    border-radius: 7px;

    background: #eaf7f0;

    color: #24624d;

    font-size: 11px;

    font-weight: 600;
}


/* =========================================================
   ARCHIVE PAGE HEADER
   ========================================================= */


.supplier-archive-count-badge {

    display: inline-flex;

    align-items: center;

    padding: 7px 11px;

    border: 1px solid #e3c589;

    border-radius: 20px;

    background: #fff8e9;

    color: #91601b;

    font-size: 10px;

    font-weight: 700;
}


/* =========================================================
   ARCHIVE INFORMATION
   ========================================================= */


.supplier-archive-info {

    display: flex;

    gap: 13px;

    align-items: flex-start;

    margin-bottom: 20px;

    padding: 16px 18px;

    border: 1px solid #dbe5e1;

    border-radius: 8px;

    background: #f7faf8;
}


.supplier-archive-info-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 27px;

    width: 27px;
    height: 27px;

    border-radius: 50%;

    background: #245f50;

    color: #ffffff;

    font-family: Georgia, serif;

    font-size: 13px;

    font-weight: 700;
}


.supplier-archive-info strong {

    display: block;

    margin-bottom: 4px;

    color: #294a41;

    font-size: 11px;
}


.supplier-archive-info p {

    max-width: 850px;

    margin: 0;

    color: #74817c;

    font-size: 10px;

    line-height: 1.55;
}


/* =========================================================
   ARCHIVED STATUS
   ========================================================= */


.supplier-archived-status {

    display: inline-block;

    padding: 5px 8px;

    border-radius: 4px;

    background: #fff3dd;

    color: #a46918;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.3px;
}


/* =========================================================
   REACTIVATE BUTTON
   ========================================================= */


.supplier-reactivate-button {

    min-height: 33px;

    padding: 7px 12px;

    border:
        1px solid #9ccdbb;

    border-radius: 5px;

    background: #eaf7f1;

    color: #21664f;

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;
}


.supplier-reactivate-button:hover {

    border-color: #68ad93;

    background: #dcefe7;
}


/* =========================================================
   EMPTY DIRECTORY
   ========================================================= */


.supplier-clean-empty-state {

    padding: 45px 20px !important;

    text-align: center;
}


.supplier-clean-empty-state strong {

    display: block;

    margin-top: 8px;

    color: #355047;

    font-size: 12px;
}


.supplier-clean-empty-state span {

    display: block;

    margin-top: 5px;

    color: #84908c;

    font-size: 10px;
}


.supplier-empty-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin: auto;

    border-radius: 50%;

    background: #e9f3ef;

    color: #276650;

    font-size: 18px;
}


.supplier-empty-archive {

    background: #edf5f1;

    color: #39725d;
}

/* =========================================================
   PURCHASE ORDERS V1
   ========================================================= */


.po-create-panel {
    overflow: hidden;
}


.po-create-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        370px;
}


.po-create-main {

    padding: 26px;

    border-right:
        1px solid #e3e9e6;
}


.po-summary-sidebar {

    padding: 26px;

    background: #f7faf8;
}


/* =========================================================
   PURCHASE ORDER FORM
   ========================================================= */


.po-form-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.po-field-help {

    display: block;

    margin-top: 5px;

    color: #82908b;

    font-size: 9px;
}


.po-lines-title {

    margin-top: 30px;
}


/* =========================================================
   PO PRODUCT LINES
   ========================================================= */


.po-lines-table {

    overflow: hidden;

    border:
        1px solid #dfe6e3;

    border-radius: 8px;
}


.po-line-header {

    display: grid;

    grid-template-columns:
        2fr
        1fr
        1.15fr
        1fr
        42px;

    gap: 12px;

    padding:
        11px
        14px;

    background: #f2f6f4;

    color: #687771;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.4px;

    text-transform: uppercase;
}


.po-line-row {

    display: grid;

    grid-template-columns:
        2fr
        1fr
        1.15fr
        1fr
        42px;

    gap: 12px;

    align-items: center;

    padding:
        13px
        14px;

    border-top:
        1px solid #e8ecea;

    background: white;
}


.po-line-row input,
.po-line-row select {

    width: 100%;

    box-sizing: border-box;

    height: 38px;

    padding:
        7px
        9px;

    border:
        1px solid #cfd8d4;

    border-radius: 5px;

    background: white;
}


.po-line-value {

    min-height: 38px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    padding:
        0 10px;

    border-radius: 5px;

    background: #f7f9f8;

    color: #26453c;

    font-size: 12px;

    font-weight: 700;
}


.po-remove-line {

    width: 32px;
    height: 32px;

    border:
        1px solid #e5c2c2;

    border-radius: 5px;

    background: #fff5f5;

    color: #a34646;

    font-size: 17px;

    cursor: pointer;
}


.po-remove-line:hover {

    background: #f9dfdf;
}


.po-lines-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        15px
        14px;

    border-top:
        1px solid #e5eae8;

    background: #fbfcfc;
}


.po-add-line-button {

    min-height: 35px;

    padding:
        8px
        13px;

    border:
        1px solid #b8d2c8;

    border-radius: 5px;

    background: #edf7f2;

    color: #23604e;

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;
}


.po-add-line-button:hover {

    background: #dff0e8;
}


.po-total-block {

    text-align: right;
}


.po-total-block span {

    display: block;

    margin-bottom: 3px;

    color: #788580;

    font-size: 9px;

    font-weight: 700;
}


.po-total-block strong {

    color: #173f35;

    font-size: 20px;
}


/* =========================================================
   MONEY FIELD
   ========================================================= */


.money-field {

    display: flex;

    align-items: center;

    height: 38px;

    overflow: hidden;

    border:
        1px solid #ccd6d2;

    border-radius: 5px;

    background: white;
}


.money-field span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;
    height: 100%;

    flex: 0 0 34px;

    background: #f4f7f5;

    border-right:
        1px solid #dce2df;

    color: #596862;
}


.money-field input {

    flex: 1;

    min-width: 0;

    height: 100%;

    padding:
        0
        9px !important;

    border: none !important;

    outline: none;

    background: transparent;
}


/* =========================================================
   SUMMARY SIDEBAR
   ========================================================= */


.po-summary-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        11px
        0;

    color: #697770;

    font-size: 10px;
}


.po-summary-row strong {

    max-width: 190px;

    text-align: right;

    color: #1e3e35;

    font-size: 11px;
}


.po-summary-divider {

    margin: 10px 0;

    border-top:
        1px solid #d5dfdb;
}


.po-gbp-summary {

    margin-top: 15px;

    padding: 18px;

    border-radius: 8px;

    background: #173f35;

    color: white;
}


.po-gbp-summary span {

    display: block;

    margin-bottom: 8px;

    color: #b6d0c7;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.6px;
}


.po-gbp-summary strong {

    display: block;

    margin-bottom: 6px;

    font-size: 25px;
}


.po-gbp-summary small {

    color: #b6c9c3;

    font-size: 9px;

    line-height: 1.45;
}


.po-create-button {

    width: 100%;

    margin-top: 20px;
}


/* =========================================================
   HISTORY
   ========================================================= */


.po-number-cell {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.po-number-cell strong {

    color: #183c32;
}


.po-number-cell small {

    color: #87918e;

    font-size: 9px;
}


/* =========================================================
   STATUS BADGES
   ========================================================= */


.po-status {

    display: inline-block;

    padding:
        5px
        8px;

    border-radius: 4px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.3px;
}


.po-status-draft {

    background: #eef1f0;

    color: #66716d;
}


.po-status-confirmed {

    background: #e4eef8;

    color: #376a98;
}


.po-status-part {

    background: #fff3d9;

    color: #936217;
}


.po-status-received {

    background: #e5f4ec;

    color: #27704f;
}


.po-status-cancelled {

    background: #fae7e7;

    color: #a54545;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */


.po-empty-state {

    padding:
        45px
        20px !important;

    text-align: center;
}


.po-empty-state strong {

    display: block;

    margin-top: 8px;

    color: #365148;

    font-size: 12px;
}


.po-empty-state span {

    display: block;

    margin-top: 5px;

    color: #82908b;

    font-size: 10px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */


@media (max-width: 1200px) {

    .po-create-layout {

        grid-template-columns:
            1fr;
    }


    .po-create-main {

        border-right: none;

        border-bottom:
            1px solid #e3e9e6;
    }

}


@media (max-width: 850px) {

    .po-line-header {

        display: none;
    }


    .po-line-row {

        grid-template-columns:
            1fr
            1fr;
    }


    .po-line-row > div:first-child {

        grid-column:
            span 2;
    }


    .po-remove-line {

        width: 100%;
    }

}


@media (max-width: 700px) {

    .po-form-grid {

        grid-template-columns:
            1fr;
    }


    .po-line-row {

        grid-template-columns:
            1fr;
    }


    .po-line-row > div:first-child {

        grid-column:
            auto;
    }


    .po-lines-footer {

        flex-direction: column;

        align-items: stretch;
    }


    .po-total-block {

        text-align: left;
    }

}

/* =========================================================
   PURCHASE ORDER DETAIL V1
   ========================================================= */


.po-detail-summary-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    padding: 22px;
}


.po-detail-summary-item {

    padding: 16px;

    border: 1px solid #dfe6e3;

    border-radius: 7px;

    background: #fafcfb;
}


.po-detail-summary-item span {

    display: block;

    margin-bottom: 6px;

    color: #77857f;

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;
}


.po-detail-summary-item strong {

    color: #173f35;

    font-size: 14px;
}


.po-detail-summary-item.highlight {

    background: #173f35;

    border-color: #173f35;
}


.po-detail-summary-item.highlight span {

    color: #b6cec6;
}


.po-detail-summary-item.highlight strong {

    color: #ffffff;

    font-size: 19px;
}


.po-notes-box {

    margin:
        0 22px 22px;

    padding: 15px;

    border-radius: 7px;

    background: #f5f8f7;
}


.po-notes-box span {

    display: block;

    margin-bottom: 5px;

    color: #66766f;

    font-size: 9px;

    font-weight: 700;
}


.po-notes-box p {

    margin: 0;

    color: #40544d;

    font-size: 10px;

    line-height: 1.5;
}


/* =========================================================
   CONTAINER BUILDER
   ========================================================= */


.po-container-create-form {

    padding: 20px;

    border-bottom: 1px solid #e3e9e6;
}


.po-container-form-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}


.po-container-card {

    margin: 20px;

    overflow: hidden;

    border: 1px solid #dce5e1;

    border-radius: 8px;

    background: white;
}


.po-container-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 17px 18px;

    background: #f5f8f7;

    border-bottom: 1px solid #dfe6e3;
}


.po-container-header span {

    color: #668078;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.4px;
}


.po-container-header h3 {

    margin: 3px 0;

    color: #173f35;

    font-size: 15px;
}


.po-container-header small {

    color: #83908b;
}


.po-container-count {

    padding: 6px 10px;

    border-radius: 15px;

    background: #e8f2ee;

    color: #28614f;

    font-size: 9px;

    font-weight: 700;
}


.po-container-notes {

    padding: 10px 18px;

    border-bottom: 1px solid #e5ebe8;

    color: #687871;

    font-size: 10px;
}


.po-add-container-item-form {

    padding: 18px;

    border-top: 1px solid #e4eae7;

    background: #fbfcfc;
}


.po-add-container-grid {

    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        auto;

    gap: 12px;

    align-items: end;
}


/* =========================================================
   LANDED COSTS
   ========================================================= */


.po-landed-cost-form {

    padding: 20px;

    border-bottom: 1px solid #e2e8e5;
}


.po-landed-cost-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}


.po-recalculate-footer {

    display: flex;

    justify-content: flex-end;

    padding: 15px 20px;
}


/* =========================================================
   GOODS RECEIPT
   ========================================================= */


.po-receipt-row {

    display: grid;

    grid-template-columns:
        1.6fr
        repeat(4, 0.8fr)
        2fr;

    gap: 14px;

    align-items: center;

    padding: 14px 18px;

    border-top: 1px solid #e5ebe8;
}


.po-receipt-row > div strong {

    display: block;

    color: #173f35;

    font-size: 11px;
}


.po-receipt-row > div span,
.po-receipt-row > div small {

    display: block;

    color: #82908b;

    font-size: 9px;
}


.po-receive-form {

    display: grid;

    grid-template-columns:
        70px
        130px
        auto;

    gap: 8px;
}


.po-receive-form input {

    min-width: 0;
}


/* =========================================================
   FINAL ACTIONS
   ========================================================= */


.po-final-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    padding: 20px;
}


.po-action-warning {

    flex: 1;

    min-width: 280px;

    padding: 14px 16px;

    border-radius: 7px;

    background: #fff9e8;

    border: 1px solid #ead79b;
}


.po-action-warning strong {

    display: block;

    margin-bottom: 4px;

    color: #7d591b;

    font-size: 11px;
}


.po-action-warning p {

    margin: 0;

    color: #8b724a;

    font-size: 10px;
}


/* =========================================================
   TABLES
   ========================================================= */


.po-detail-table,
.po-container-table {

    width: 100%;

    border-collapse: collapse;
}


.po-detail-table th,
.po-container-table th {

    padding: 11px 12px;

    background: #f3f6f5;

    color: #65766f;

    font-size: 9px;

    font-weight: 700;

    text-align: left;

    text-transform: uppercase;
}


.po-detail-table td,
.po-container-table td {

    padding: 12px;

    border-top: 1px solid #e6ebe9;

    color: #32483f;

    font-size: 10px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */


@media (max-width: 1200px) {

    .po-detail-summary-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .po-container-form-grid,
    .po-landed-cost-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .po-add-container-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .po-receipt-row {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .po-detail-summary-grid,
    .po-container-form-grid,
    .po-landed-cost-grid,
    .po-add-container-grid,
    .po-receipt-row,
    .po-receive-form {

        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   PURCHASE ORDER DETAIL - LANDED COST FX
   ========================================================= */


.po-fx-field {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 8px;
}


.po-refresh-fx-button {

    min-height: 38px;

    padding:
        7px
        12px;

    border:
        1px solid #b9cec5;

    border-radius: 5px;

    background: #edf6f2;

    color: #245e4f;

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;
}


.po-refresh-fx-button:hover {

    background: #dfeee8;
}


.po-refresh-fx-button:disabled {

    opacity: 0.6;

    cursor: wait;
}


.po-fx-status {

    margin-top: 6px;

    padding:
        7px
        9px;

    border-radius: 5px;

    background: #f5f8f7;

    color: #5d716a;

    font-size: 9px;
}


.po-landed-gbp-preview {

    display: flex;

    align-items: center;

    min-height: 38px;

    overflow: hidden;

    border:
        1px solid #cdd8d3;

    border-radius: 5px;

    background: #f7faf8;
}


.po-landed-gbp-preview span {

    display: flex;

    align-items: center;

    justify-content: center;

    align-self: stretch;

    width: 38px;

    border-right:
        1px solid #dce5e1;

    background: #edf4f1;

    color: #426158;

    font-size: 12px;
}


.po-landed-gbp-preview strong {

    padding-left: 11px;

    color: #173f35;

    font-size: 14px;
}

/* =========================================================
   LANDED COST EDIT V1.1
   ========================================================= */


.po-cost-actions {

    display: flex;

    gap: 7px;

    align-items: center;
}


.po-cost-actions form {

    margin: 0;
}


.po-cost-edit-row td {

    padding: 0 !important;

    background: #f8faf9;
}


.po-cost-edit-form {

    padding: 18px;
}


.po-cost-edit-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;
}


.po-cost-edit-footer {

    display: flex;

    gap: 9px;

    justify-content: flex-end;

    margin-top: 16px;

    padding-top: 14px;

    border-top: 1px solid #dfe7e3;
}


@media (max-width: 1000px) {

    .po-cost-edit-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 650px) {

    .po-cost-edit-grid {

        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   REMOVE PURCHASE ORDER CONTAINER
   ========================================================= */

.po-container-header-actions {

    display: flex;

    align-items: center;

    gap: 10px;
}


.po-remove-container-button {

    padding:
        7px
        11px;

    border:
        1px solid #e0b6b6;

    border-radius: 5px;

    background: #fff5f5;

    color: #a34040;

    font-size: 9px;

    font-weight: 700;

    cursor: pointer;
}


.po-remove-container-button:hover {

    background: #f9e1e1;

    border-color: #cf9494;
}

/* =========================================================
   CONTAINER DELETE BUTTON
   ========================================================= */

.po-container-header-actions {

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;
}


.po-remove-container-button {

    padding: 7px 12px;

    border: 1px solid #dfb2b2;

    border-radius: 5px;

    background: #fff4f4;

    color: #a43e3e;

    font-size: 9px;

    font-weight: 700;

    cursor: pointer;
}


.po-remove-container-button:hover {

    background: #f8dddd;

    border-color: #cb8d8d;
}

/* =========================================================
   PURCHASE ORDER CONTAINER DELETE
   ========================================================= */

.po-container-header-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;
}


.po-delete-container-form {

    margin: 0;
}


.po-remove-container-button {

    min-height: 30px;

    padding:
        6px
        11px;

    border:
        1px solid #e1b4b4;

    border-radius: 5px;

    background: #fff4f4;

    color: #a43f3f;

    font-size: 9px;

    font-weight: 700;

    cursor: pointer;
}


.po-remove-container-button:hover {

    background: #f9dddd;

    border-color: #cf9191;

    color: #8f3030;
}