/* =========================================================
   ADMIN DESIGN SYSTEM
========================================================= */

:root {
    --admin-bg: #f4f1ee;
    --admin-panel: #ffffff;

    --admin-sidebar: #292522;
    --admin-sidebar-soft: #342f2b;

    --admin-text: #292522;
    --admin-muted: #8a817b;

    --admin-accent: #c7a4a8;
    --admin-accent-light: #eee0e1;

    --admin-border: #e5dfda;

    --admin-danger: #a85050;
    --admin-success: #55755c;

    --admin-shadow:
        0 8px 30px rgba(35, 30, 27, 0.06);

    --admin-radius: 12px;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background: var(--admin-bg);
    color: var(--admin-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
}

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


/* =========================================================
   LAYOUT
========================================================= */

.admin-layout {
    min-height: 100vh;

    display: grid;
    grid-template-columns: 245px 1fr;
}


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

.admin-sidebar {
    position: sticky;
    top: 0;

    height: 100vh;

    display: flex;
    flex-direction: column;

    padding: 28px 20px;

    background: var(--admin-sidebar);
    color: rgba(255, 255, 255, 0.82);

    overflow: hidden;
}


.admin-brand {
    padding: 0 12px 32px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


.admin-brand a {
    display: flex;
    flex-direction: column;
}


.admin-brand-main {
    display: flex;
    align-items: center;

    min-height: 31px;

    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;

    letter-spacing: 0.16em;
}


.admin-brand-logo {
    display: block;

    width: auto;
    max-width: 150px;
    height: 31px;

    object-fit: contain;
    object-position: left center;

    filter: brightness(0) invert(1);
}


.admin-brand-sub {
    margin-top: 4px;

    color: var(--admin-accent);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.28em;
}


/* =========================================================
   NAVIGATION
========================================================= */

.admin-nav {
    flex: 1;

    min-height: 0;

    overflow-y: auto;
    overscroll-behavior: contain;

    padding-top: 24px;
    padding-right: 4px;

    scrollbar-width: thin;
    scrollbar-color:
        transparent
        transparent;
}


.admin-nav:hover {
    scrollbar-color:
        rgba(255, 255, 255, 0.18)
        transparent;
}


.admin-nav::-webkit-scrollbar {
    width: 5px;
}


.admin-nav::-webkit-scrollbar-track {
    background: transparent;
}


.admin-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background: transparent;
}


.admin-nav:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
}


.admin-nav-label {
    margin: 26px 12px 8px;

    color: rgba(255, 255, 255, 0.33);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.16em;
}


.admin-nav a {
    display: block;

    margin-bottom: 3px;

    padding: 10px 12px;

    border-radius: 7px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 13px;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.admin-nav a:hover {
    background: var(--admin-sidebar-soft);

    color: #ffffff;
}


.admin-nav a.active {
    background: rgba(199, 164, 168, 0.16);

    color: #ffffff;
}


.admin-nav a.active::before {
    content: "";

    display: inline-block;

    width: 5px;
    height: 5px;

    margin-right: 10px;

    border-radius: 50%;

    background: var(--admin-accent);

    vertical-align: middle;
}


.admin-sidebar-footer {
    flex: 0 0 auto;

    padding-top: 20px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}


.admin-sidebar-footer a,
.admin-sidebar-footer button {
    display: block;

    width: 100%;

    padding: 8px 12px;

    border: 0;
    background: transparent;

    color: rgba(255, 255, 255, 0.52);

    font-family: inherit;
    font-size: 11px;

    text-align: left;

    cursor: pointer;
}


.admin-sidebar-footer a:hover,
.admin-sidebar-footer button:hover {
    color: #ffffff;
}


.admin-sidebar-footer form {
    margin: 0;
}


/* =========================================================
   MAIN AREA
========================================================= */

.admin-main {
    min-width: 0;
}


/* =========================================================
   TOP BAR
========================================================= */

.admin-topbar {
    min-height: 74px;

    display: flex;

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

    padding: 0 38px;

    background:
        rgba(244, 241, 238, 0.92);

    backdrop-filter: blur(15px);

    border-bottom:
        1px solid var(--admin-border);
}


.admin-topbar-label {
    color: var(--admin-muted);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.18em;
}


.admin-user {
    text-align: right;
}


.admin-user-name {
    font-size: 13px;

    font-weight: 600;
}


.admin-user-role {
    margin-top: 2px;

    color: var(--admin-muted);

    font-size: 9px;

    letter-spacing: 0.1em;
}


/* =========================================================
   CONTENT
========================================================= */

.admin-content {
    width: 100%;

    max-width: 1500px;

    padding: 42px;
}


.admin-page-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 35px;
}


.admin-page-title {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 40px;

    font-weight: 400;

    letter-spacing: -0.02em;
}


.admin-page-description {
    margin: 8px 0 0;

    color: var(--admin-muted);
}


/* =========================================================
   CARDS
========================================================= */

.admin-card {
    padding: 25px;

    background: var(--admin-panel);

    border:
        1px solid var(--admin-border);

    border-radius:
        var(--admin-radius);

    box-shadow:
        var(--admin-shadow);
}


.admin-dashboard-grid {
    display: grid;

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

    gap: 18px;
}


.admin-dashboard-card {
    min-height: 155px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 24px;

    background: var(--admin-panel);

    border:
        1px solid var(--admin-border);

    border-radius:
        var(--admin-radius);

    box-shadow:
        var(--admin-shadow);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.admin-dashboard-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 34px
        rgba(35, 30, 27, 0.09);
}


.admin-dashboard-card-label {
    color: var(--admin-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.admin-dashboard-card-title {
    margin: 25px 0 6px;

    font-family: Georgia, serif;

    font-size: 24px;

    font-weight: 400;
}


.admin-dashboard-card-link {
    color: var(--admin-accent);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.admin-dashboard-section {
    margin-top: 28px;
    padding: 26px;
    background: var(--admin-panel);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
}


.admin-dashboard-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}


.admin-dashboard-section-heading h2 {
    margin: 7px 0 0;
    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 400;
}


.admin-dashboard-section-heading p {
    max-width: 470px;
    margin: 0;
    color: var(--admin-muted);
    font-size: 11px;
    line-height: 1.6;
    text-align: right;
}


.admin-metric-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}


.admin-metric-card {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--admin-border);
    border-radius: 9px;
    background: #fbfaf8;
}


.admin-metric-card > span {
    display: block;
    min-height: 28px;
    color: var(--admin-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.admin-metric-card strong {
    display: flex;
    align-items: baseline;
    gap: 7px;
    color: var(--admin-text);
    font-family: Georgia, serif;
    font-size: 27px;
    font-weight: 400;
}


.admin-metric-card small {
    color: var(--admin-accent);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
}


.admin-table-wrap {
    overflow-x: auto;
}


.admin-access-table {
    min-width: 760px;
}


.admin-access-status {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}


.admin-access-status.is-success {
    background: #e5efe8;
    color: #3d684a;
}


.admin-access-status.is-failed {
    background: #f7e7e5;
    color: #99463e;
}


.admin-access-device {
    max-width: 310px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.admin-empty-cell {
    padding: 30px !important;
    color: var(--admin-muted);
    text-align: center;
}


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

.admin-content table {
    width: 100%;

    border-collapse: collapse;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid var(--admin-border) !important;

    border-radius:
        var(--admin-radius);

    box-shadow:
        var(--admin-shadow);
}


.admin-content th {
    padding: 13px 15px;

    background: #f0ece8;

    color: var(--admin-muted);

    border: 0 !important;

    border-bottom:
        1px solid var(--admin-border) !important;

    text-align: left;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.admin-content td {
    padding: 14px 15px;

    border: 0 !important;

    border-bottom:
        1px solid var(--admin-border) !important;
}


.admin-content tr:last-child td {
    border-bottom: 0 !important;
}


.admin-content tbody tr:hover {
    background: #faf8f6;
}


/* =========================================================
   BUTTONS
========================================================= */

.admin-button,
.admin-content button {
    display: inline-flex;

    min-height: 38px;

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

    padding: 0 17px;

    border:
        1px solid var(--admin-sidebar);

    border-radius: 6px;

    background: var(--admin-sidebar);

    color: #ffffff;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    cursor: pointer;
}


.admin-button:hover,
.admin-content button:hover {
    background: #423a35;
}


.admin-button-secondary {
    background: transparent;

    color: var(--admin-text);
}


/* =========================================================
   FORMS
========================================================= */

.admin-content input,
.admin-content select,
.admin-content textarea {
    width: 100%;

    max-width: 650px;

    padding: 11px 12px;

    border:
        1px solid var(--admin-border);

    border-radius: 6px;

    background: #ffffff;

    font: inherit;

    outline: none;
}


.admin-content input:focus,
.admin-content select:focus,
.admin-content textarea:focus {
    border-color:
        var(--admin-accent);

    box-shadow:
        0 0 0 3px
        rgba(199, 164, 168, 0.15);
}


.admin-content label {
    display: block;

    margin-bottom: 6px;

    color: var(--admin-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


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

@media (max-width: 900px) {

    .admin-layout {
        grid-template-columns: 190px 1fr;
    }

    .admin-content {
        padding: 25px;
    }

    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .admin-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-dashboard-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-dashboard-section-heading p {
        text-align: left;
    }

}


@media (max-width: 650px) {

    .admin-layout {
        display: block;
    }

    .admin-sidebar {
        position: relative;

        width: 100%;
        height: auto;
    }

    .admin-metric-grid {
        grid-template-columns: 1fr;
    }

}

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

.status-badge {
    display: inline-flex;

    align-items: center;

    min-height: 24px;

    padding: 0 9px;

    border-radius: 999px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.status-active {
    background: #e7efe8;
    color: #55755c;
}


.status-inactive {
    background: #eee9e6;
    color: #837871;
}

/* =========================================================
   INVENTORY
========================================================= */

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}


.admin-edit-link {
    color: var(--admin-text);

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

    letter-spacing: 0.06em;

    text-transform: uppercase;

    border-bottom:
        1px solid var(--admin-accent);
}


.admin-muted-text {
    color: var(--admin-muted);

    font-size: 10px;
}


.status-in-stock {
    background: #e7efe8;
    color: #55755c;
}


.status-reserved {
    background: #f2ead7;
    color: #8a6b32;
}


.status-sold {
    background: #e5e5e5;
    color: #66615d;
}


.status-returned {
    background: #e4ebf1;
    color: #526a7c;
}


.status-damaged,
.status-lost {
    background: #f3e1e1;
    color: #9a5252;
}

/* =========================================================
   PRODUCT INVENTORY DETAIL
========================================================= */

.admin-sku-link {
    color: var(--admin-text);

    font-weight: 700;

    border-bottom:
        1px solid var(--admin-accent);

    transition:
        color 0.15s ease;
}


.admin-sku-link:hover {
    color: #9c7378;
}


.product-inventory-summary {
    display: grid;

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

    gap: 14px;

    margin-bottom: 24px;
}


.inventory-stat-card {
    min-height: 115px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding: 20px;

    background: #ffffff;

    border:
        1px solid var(--admin-border);

    border-radius:
        var(--admin-radius);

    box-shadow:
        var(--admin-shadow);
}


.inventory-stat-card span {
    color: var(--admin-muted);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.inventory-stat-card strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;

    font-weight: 400;
}


.sku-inventory-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}


.sku-inventory-heading h2 {
    margin: 0 0 6px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;
}


.sku-inventory-heading p {
    margin: 0;

    color: var(--admin-muted);
}


@media (max-width: 1200px) {

    .product-inventory-summary {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 700px) {

    .product-inventory-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

/* =========================================================
   SALES
========================================================= */

.sales-summary-grid {
    display: grid;

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

    gap: 14px;

    margin-bottom: 18px;
}


.sales-summary-card {
    min-height: 130px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding: 21px;

    background: #ffffff;

    border:
        1px solid var(--admin-border);

    border-radius:
        var(--admin-radius);

    box-shadow:
        var(--admin-shadow);
}


.sales-summary-label {
    color: var(--admin-muted);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.sales-summary-value {
    margin: 18px 0 8px;

    color: var(--admin-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;

    font-weight: 400;

    white-space: nowrap;
}


.sales-summary-note {
    color: var(--admin-muted);

    font-size: 10px;
}


.sales-status-line {
    display: flex;

    align-items: center;

    gap: 30px;

    margin-bottom: 24px;

    padding: 13px 18px;

    background:
        rgba(255, 255, 255, 0.55);

    border:
        1px solid var(--admin-border);

    border-radius: 8px;

    color: var(--admin-muted);

    font-size: 11px;
}


.sales-status-line strong {
    margin-left: 5px;

    color: var(--admin-text);
}


.money-cell {
    white-space: nowrap;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   PAYMENT STATUS
========================================================= */

.payment-paid,
.payment-settled {
    background: #e7efe8;
    color: #55755c;
}


.payment-pending {
    background: #f3ead6;
    color: #876a36;
}


.payment-refund-required {
    background: #f3e1e1;
    color: #9a5252;
}


.payment-voided,
.payment-failed {
    background: #ece8e5;
    color: #756c67;
}


/* =========================================================
   SALE STATUS
========================================================= */

.status-pending {
    background: #f3ead6;
    color: #876a36;
}


.status-confirmed {
    background: #e2ebf1;
    color: #526d7d;
}


.status-processing {
    background: #e7e5f1;
    color: #665f82;
}


.status-shipped {
    background: #e5edf1;
    color: #55727e;
}


.status-completed {
    background: #e7efe8;
    color: #55755c;
}


.status-voided,
.status-cancelled {
    background: #f3e1e1;
    color: #9a5252;
}


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

.admin-empty-state {
    padding: 50px 20px;

    text-align: center;
}


.admin-empty-state h2 {
    margin-bottom: 10px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;
}


.admin-empty-state p {
    margin-bottom: 25px;

    color: var(--admin-muted);
}


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

@media (max-width: 1250px) {

    .sales-summary-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 800px) {

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

}


@media (max-width: 520px) {

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

}

/* =========================================================
   SALE DETAIL
========================================================= */

.sale-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


.sale-detail-summary {
    display: grid;

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

    gap: 14px;

    margin-bottom: 20px;
}


.sale-detail-stat {
    min-height: 110px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding: 20px;

    background: #ffffff;

    border:
        1px solid var(--admin-border);

    border-radius:
        var(--admin-radius);

    box-shadow:
        var(--admin-shadow);
}


.sale-detail-stat > span {
    color: var(--admin-muted);

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

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.sale-detail-stat > strong {
    margin-top: 18px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    font-weight: 400;
}


.sale-detail-grid {
    display: grid;

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

    gap: 20px;
}


.sale-returns-card {
    margin-bottom: 20px;
}


.sale-returns-table .sale-return-refund-amount {
    white-space: nowrap;

    font-variant-numeric: tabular-nums;
}


.sale-finance-payment-grid {
    display: grid;

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

    gap: 20px;

    align-items: stretch;

    margin-top: 20px;
}


.sale-finance-payment-grid > .admin-card {
    min-width: 0;
}


.detail-section-heading {
    display: flex;

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

    gap: 20px;

    margin-bottom: 22px;
}


.detail-section-heading h2 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;

    font-weight: 400;
}


.detail-section-heading > span {
    color: var(--admin-muted);

    font-size: 10px;
}


.detail-list {
    display: grid;
}


.detail-list > div {
    display: flex;

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

    gap: 25px;

    padding: 13px 0;

    border-bottom:
        1px solid var(--admin-border);
}


.detail-list > div:last-child {
    border-bottom: 0;
}


.detail-list span {
    color: var(--admin-muted);

    font-size: 11px;
}


.detail-list strong {
    text-align: right;

    font-size: 12px;
}


/* FINANCIAL BREAKDOWN */

.sale-financial-card {
    max-width: 850px;
}


.financial-breakdown > div {
    display: flex;

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

    gap: 25px;

    padding: 13px 0;

    border-bottom:
        1px solid var(--admin-border);
}


.financial-breakdown span {
    color: var(--admin-muted);

    font-size: 11px;
}


.financial-breakdown strong {
    font-size: 13px;

    font-variant-numeric:
        tabular-nums;
}


.financial-profit-row {
    margin-top: 4px;

    padding-top: 18px !important;

    border-bottom: 0 !important;
}


.financial-profit-row span,
.financial-profit-row strong {
    color: var(--admin-text);

    font-size: 16px;
}


/* PAYMENT */

.payment-detail-layout {
    display: grid;

    grid-template-columns:
        1fr 340px;

    gap: 50px;

    align-items: start;
}


.payment-detail-layout-readonly {
    grid-template-columns: 1fr;
}


.sale-finance-payment-grid
.payment-detail-layout:not(
    .payment-detail-layout-readonly
) {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(210px, 240px);

    gap: 24px;
}


.payment-status-form {
    padding: 22px;

    background: var(--admin-bg);

    border:
        1px solid var(--admin-border);

    border-radius: 8px;
}


.payment-status-form select {
    margin-bottom: 12px;
}


/* DANGER */

.sale-danger-zone {
    display: flex;

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

    gap: 30px;

    margin-top: 40px;

    padding: 24px;

    border:
        1px solid #e6cccc;

    border-radius:
        var(--admin-radius);

    background: #fffafa;
}


.sale-danger-zone strong {
    color: #8f4545;
}


.sale-danger-zone p {
    margin: 7px 0 0;

    color: var(--admin-muted);

    font-size: 11px;
}


.danger-button {
    background: #9a5252 !important;

    border-color: #9a5252 !important;
}


.danger-button:hover {
    background: #803f3f !important;
}


/* RESPONSIVE */

@media (max-width: 1200px) {

    .sale-detail-summary {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 1100px) {

    .sale-finance-payment-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 850px) {

    .sale-detail-grid,
    .payment-detail-layout {
        grid-template-columns: 1fr;
    }


    .sale-detail-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

/* =========================================================
   WEBSITE ORDERS
========================================================= */

.order-summary-grid {
    display: grid;

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

    gap: 14px;

    margin-bottom: 24px;
}


.order-summary-card {
    min-height: 115px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding: 20px;

    background: #ffffff;

    border:
        1px solid var(--admin-border);

    border-radius:
        var(--admin-radius);

    box-shadow:
        var(--admin-shadow);
}


.order-summary-card span {
    color: var(--admin-muted);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.order-summary-card strong {
    margin-top: 20px;

    color: var(--admin-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 28px;

    font-weight: 400;
}


/* ORDER STATUS */

.status-processing {
    background: #ebe7f1;
    color: #6b6281;
}


.status-shipped {
    background: #e4edf1;
    color: #55717d;
}


.status-completed {
    background: #e7efe8;
    color: #55755c;
}


.status-confirmed {
    background: #e4edf1;
    color: #526d7d;
}


.status-cancelled {
    background: #f3e1e1;
    color: #9a5252;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .order-summary-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 700px) {

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

}

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

.order-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


.order-detail-summary {
    display: grid;

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

    gap: 14px;

    margin-bottom: 20px;
}


.order-detail-stat {
    min-height: 110px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding: 20px;

    background: #ffffff;

    border:
        1px solid var(--admin-border);

    border-radius:
        var(--admin-radius);

    box-shadow:
        var(--admin-shadow);
}


.order-detail-stat > span {
    color: var(--admin-muted);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.order-detail-stat > strong {
    margin-top: 18px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    font-weight: 400;
}


.order-detail-grid {
    display: grid;

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

    gap: 20px;
}


.shipping-address-box {
    max-width: 600px;

    padding: 22px;

    background: var(--admin-bg);

    border:
        1px solid var(--admin-border);

    border-radius: 8px;
}


.shipping-address-box strong {
    display: block;

    margin-bottom: 12px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    font-weight: 400;
}


.shipping-address-box p {
    margin: 5px 0;
}


.order-payment-list {
    max-width: 650px;
}


/* STATUS CONTROL */

.order-status-control {
    display: grid;

    grid-template-columns:
        1fr 350px;

    gap: 50px;

    align-items: start;
}


.order-status-control > div p {
    margin-top: 0;
}


.order-status-control form {
    padding: 22px;

    background: var(--admin-bg);

    border:
        1px solid var(--admin-border);

    border-radius: 8px;
}


.order-status-control select {
    margin-bottom: 12px;
}


/* CANCEL */

.order-danger-zone {
    display: flex;

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

    gap: 30px;

    margin-top: 40px;

    padding: 24px;

    border:
        1px solid #e6cccc;

    border-radius:
        var(--admin-radius);

    background: #fffafa;
}


.order-danger-zone strong {
    color: #8f4545;
}


.order-danger-zone p {
    margin: 7px 0 0;

    color: var(--admin-muted);

    font-size: 11px;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .order-detail-summary {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 850px) {

    .order-detail-grid,
    .order-status-control {
        grid-template-columns: 1fr;
    }


    .order-detail-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

/* =========================================================
   INVOICES
========================================================= */

.invoice-summary-grid {
    display: grid;

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

    gap: 14px;

    max-width: 600px;

    margin-bottom: 24px;
}


.invoice-summary-card {
    min-height: 115px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding: 20px;

    background: #ffffff;

    border:
        1px solid var(--admin-border);

    border-radius:
        var(--admin-radius);

    box-shadow:
        var(--admin-shadow);
}


.invoice-summary-card span {
    color: var(--admin-muted);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.invoice-summary-card strong {
    margin-top: 20px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;

    font-weight: 400;
}


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

.invoice-detail-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.invoice-detail-summary {
    display: grid;

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

    gap: 14px;

    margin-bottom: 20px;
}


.invoice-detail-stat {
    min-height: 110px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 20px;

    background: #ffffff;

    border:
        1px solid var(--admin-border);

    border-radius:
        var(--admin-radius);

    box-shadow:
        var(--admin-shadow);
}


.invoice-detail-stat > span {
    color: var(--admin-muted);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.invoice-detail-stat > strong {
    margin-top: 18px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    font-weight: 400;
}


.invoice-detail-grid {
    display: grid;

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

    gap: 20px;
}


.invoice-total-layout {
    display: grid;

    grid-template-columns:
        1fr minmax(380px, 520px);

    gap: 20px;

    margin-top: 20px;
}


.invoice-total-card {
    width: 100%;
}


.invoice-grand-total {
    margin-top: 6px;

    padding-top: 20px !important;

    border-bottom: 0 !important;
}


.invoice-grand-total span,
.invoice-grand-total strong {
    color: var(--admin-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;
}


.invoice-payment-list {
    max-width: 650px;
}


@media (max-width: 900px) {

    .invoice-detail-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .invoice-detail-grid {
        grid-template-columns: 1fr;
    }


    .invoice-total-layout {
        grid-template-columns: 1fr;
    }


    .invoice-summary-grid {
        max-width: none;
    }

}

/* =========================================================
   SALES CHANNELS
========================================================= */

.channel-code {
    display: inline-block;

    padding: 5px 8px;

    background: var(--admin-bg);

    border:
        1px solid var(--admin-border);

    border-radius: 5px;

    color: var(--admin-muted);

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size: 10px;
}


.channel-actions {
    display: flex;

    align-items: center;

    gap: 14px;
}


.channel-toggle-form {
    margin: 0;
}


.admin-text-button {
    min-height: auto !important;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: var(--admin-muted) !important;

    font-size: 10px !important;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    box-shadow: none !important;
}


.admin-text-button:hover {
    color: var(--admin-text) !important;

    transform: none !important;
}


.admin-text-button-danger {
    color: #9a5252 !important;
}


.channel-form-card {
    max-width: 760px;
}


.channel-fee-grid {
    display: grid;

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

    gap: 20px;
}


.channel-code-preview {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 20px;

    padding: 15px 17px;

    background: var(--admin-bg);

    border:
        1px solid var(--admin-border);

    border-radius: 7px;
}


.channel-code-preview span {
    color: var(--admin-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.channel-code-preview strong {
    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size: 12px;
}


.channel-fee-example {
    margin-top: 22px;

    padding: 17px;

    background: var(--admin-bg);

    border-left:
        3px solid var(--admin-accent);
}


.channel-fee-example strong {
    display: block;

    margin-bottom: 6px;

    font-size: 11px;
}


.channel-fee-example p {
    margin: 0;

    color: var(--admin-muted);

    font-size: 11px;
}


@media (max-width: 650px) {

    .channel-fee-grid {
        grid-template-columns: 1fr;
    }

}

.payment-payout-pending {
    background: #eee7f1;
    color: #725f7d;
}

/* =========================================================
   NEW SALE FORM
========================================================= */

.sale-entry-form {
    max-width: none;
}


.sale-form-section {
    margin-bottom: 20px;
}


.sale-form-section h2 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;

    font-weight: 400;
}


.sale-form-grid {
    display: grid;

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

    gap: 20px;
}


.form-field {
    min-width: 0;
}


.form-field-wide {
    grid-column:
        1 / -1;
}


.form-field label {
    display: block;

    margin-bottom: 7px;
}


.form-field input,
.form-field select,
.form-field textarea {
    max-width: none;
}


.sale-form-subtitle {
    margin:
        26px 0 15px;

    color: var(--admin-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* INVENTORY PREVIEW */

.sale-selection-preview {
    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 1px;

    margin-top: 22px;

    overflow: hidden;

    border:
        1px solid var(--admin-border);

    border-radius: 8px;

    background:
        var(--admin-border);
}


.sale-selection-preview > div {
    padding: 16px;

    background:
        var(--admin-bg);
}


.sale-selection-preview span {
    display: block;

    margin-bottom: 7px;

    color: var(--admin-muted);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.sale-selection-preview strong {
    font-size: 12px;

    font-weight: 600;
}


/* PAYMENT STATUS GUIDE */

.payment-status-guide {
    display: grid;

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

    gap: 10px;

    margin-top: 22px;
}


.payment-status-guide > div {
    padding: 14px;

    background: var(--admin-bg);

    border:
        1px solid var(--admin-border);

    border-radius: 7px;
}


.payment-status-guide strong {
    display: block;

    margin-bottom: 5px;

    font-size: 10px;
}


.payment-status-guide span {
    color: var(--admin-muted);

    font-size: 9px;

    line-height: 1.45;
}


/* ERROR */

.admin-form-error {
    margin-bottom: 20px;

    padding: 15px 18px;

    border:
        1px solid #e6cccc;

    border-radius: 8px;

    background: #fffafa;

    color: #954f4f;

    font-size: 12px;

    font-weight: 600;
}


/* SUBMIT */

.sale-form-submit {
    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 10px;

    padding-top: 10px;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .sale-form-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .sale-selection-preview {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .payment-status-guide {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 700px) {

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


    .sale-selection-preview {
        grid-template-columns: 1fr;
    }


    .payment-status-guide {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   QUICK PAYMENT STATUS
========================================================= */

.quick-payment-form {
    margin: 0;
}


.quick-payment-select {
    width: auto !important;
    max-width: 150px !important;

    min-height: 28px;

    padding: 4px 25px 4px 10px !important;

    border: 0 !important;
    border-radius: 999px !important;

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

    letter-spacing: 0.05em;
    text-transform: uppercase;

    cursor: pointer;

    box-shadow: none !important;
}


.quick-payment-pending {
    background: #f3ead6 !important;
    color: #876a36 !important;
}


.quick-payment-paid {
    background: #e7efe8 !important;
    color: #55755c !important;
}


.quick-payment-payout-pending {
    background: #eee7f1 !important;
    color: #725f7d !important;
}


.quick-payment-settled {
    background: #e7efe8 !important;
    color: #55755c !important;
}


.quick-payment-method {
    margin-top: 5px;

    color: var(--admin-muted);

    font-size: 9px;

    white-space: nowrap;
}

/* =========================================================
   SALES STATUS FILTER
========================================================= */

.sales-status-line {
    gap: 6px;
}


.sales-filter-link {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 12px;

    border-radius: 6px;

    color: var(--admin-muted);

    font-size: 10px;

    font-weight: 600;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.sales-filter-link:hover {
    background: #ffffff;

    color: var(--admin-text);
}


.sales-filter-link strong {
    display: inline-flex;

    min-width: 20px;
    height: 20px;

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

    margin-left: 2px;

    padding: 0 6px;

    border-radius: 999px;

    background: #ffffff;

    color: var(--admin-text);

    font-size: 9px;
}


.sales-filter-link.active {
    background: var(--admin-sidebar);

    color: #ffffff;
}


.sales-filter-link.active strong {
    background:
        rgba(255, 255, 255, 0.15);

    color: #ffffff;
}

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

.finance-period-bar {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 24px;

    padding: 14px;

    background: #ffffff;

    border:
        1px solid var(--admin-border);

    border-radius:
        var(--admin-radius);

    box-shadow:
        var(--admin-shadow);
}


.finance-month-arrow {
    width: 38px;
    height: 38px;

    display: inline-flex;

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

    border:
        1px solid var(--admin-border);

    border-radius: 7px;

    font-size: 16px;
}


.finance-month-arrow:hover {
    background: var(--admin-bg);
}


.finance-period-title {
    min-width: 180px;
}


.finance-period-title span {
    display: block;

    margin-bottom: 3px;

    color: var(--admin-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.12em;
}


.finance-period-title strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    font-weight: 400;
}


.finance-period-form {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-left: auto;
}


.finance-period-form select {
    width: auto !important;

    min-width: 110px;
}


/* MAIN CARDS */

.finance-main-grid {
    display: grid;

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

    gap: 14px;

    margin-bottom: 18px;
}


.finance-card {
    min-height: 145px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding: 21px;

    background: #ffffff;

    border:
        1px solid var(--admin-border);

    border-radius:
        var(--admin-radius);

    box-shadow:
        var(--admin-shadow);
}


.finance-card > span {
    color: var(--admin-muted);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.finance-card > strong {
    margin: 22px 0 8px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;

    font-weight: 400;

    white-space: nowrap;
}


.finance-card small {
    color: var(--admin-muted);

    font-size: 9px;
}


.finance-profit-card {
    background: #6f5d60;

    border-color: #6f5d60;

    color: #ffffff;
}


.finance-profit-card > span,
.finance-profit-card small {
    color: rgba(
        255,
        255,
        255,
        0.72
    );
}


.finance-profit-card > strong {
    color: #ffffff;
}


/* SECONDARY */

.finance-secondary-grid {
    display: grid;

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

    gap: 14px;

    margin-bottom: 18px;
}


.finance-secondary-grid .admin-card {
    min-height: 100px;
}


.finance-mini-label {
    display: block;

    margin-bottom: 18px;

    color: var(--admin-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.1em;
}


.finance-mini-value {
    display: block;

    margin-bottom: 7px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    font-weight: 400;
}


/* STATUS */

.finance-status-strip {
    display: grid;

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

    margin-bottom: 24px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid var(--admin-border);

    border-radius:
        var(--admin-radius);
}


.finance-status-strip > div {
    display: flex;

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

    gap: 20px;

    padding: 15px 18px;

    border-right:
        1px solid var(--admin-border);
}


.finance-status-strip > div:last-child {
    border-right: 0;
}


.finance-status-strip span {
    color: var(--admin-muted);

    font-size: 10px;
}


.finance-status-strip strong {
    font-size: 12px;
}


/* PAYOUT */

.finance-payout-value {
    display: inline-block;

    padding: 5px 8px;

    border-radius: 5px;

    background: #eee7f1;

    color: #725f7d;

    font-size: 10px;

    font-weight: 700;
}


/* NOTE */

.finance-note {
    max-width: 850px;

    margin-top: 22px;

    padding: 18px 20px;

    border-left:
        3px solid var(--admin-accent);

    background:
        rgba(
            255,
            255,
            255,
            0.55
        );
}


.finance-note strong {
    display: block;

    margin-bottom: 7px;

    font-size: 11px;
}


.finance-note p {
    margin: 0;

    color: var(--admin-muted);

    font-size: 10px;

    line-height: 1.7;
}


/* RESPONSIVE */

@media (max-width: 1250px) {

    .finance-main-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .finance-secondary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 750px) {

    .finance-period-bar {
        flex-wrap: wrap;
    }


    .finance-period-form {
        width: 100%;

        margin-left: 0;
    }


    .finance-main-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .finance-status-strip {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 520px) {

    .finance-main-grid,
    .finance-secondary-grid,
    .finance-status-strip {
        grid-template-columns: 1fr;
    }

}

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

.finance-main-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.finance-secondary-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.finance-section-label {
    display: flex;

    align-items: center;

    gap: 12px;

    margin:
        8px 0 12px;

    color:
        var(--admin-text);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.11em;
}


.finance-section-label span {
    color:
        var(--admin-muted);

    font-size: 9px;

    font-weight: 400;

    letter-spacing: 0;
}


.finance-money-strip {
    display: grid;

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

    margin-bottom: 18px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid var(--admin-border);

    border-radius:
        var(--admin-radius);
}


.finance-money-strip > div {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    padding:
        17px 20px;

    border-right:
        1px solid var(--admin-border);
}


.finance-money-strip > div:last-child {
    border-right: 0;
}


.finance-money-strip span {
    color:
        var(--admin-muted);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.finance-money-strip strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    font-weight: 400;
}


@media (max-width: 900px) {

    .finance-main-grid,
    .finance-secondary-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 600px) {

    .finance-money-strip {
        grid-template-columns:
            1fr;
    }


    .finance-money-strip > div {
        border-right: 0;

        border-bottom:
            1px solid var(--admin-border);
    }


    .finance-money-strip > div:last-child {
        border-bottom: 0;
    }

}

/* =========================================================
   EXPENSES
========================================================= */

.expense-summary-grid {
    display: grid;

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

    gap: 14px;

    margin-bottom: 20px;
}


.expense-summary-value {
    display: block;

    margin-top: 12px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;

    font-weight: 400;
}


.expense-form-grid {
    display: grid;

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

    gap: 20px;
}


.expense-category {
    display: inline-block;

    padding: 5px 8px;

    border-radius: 5px;

    background: var(--admin-bg);

    color: var(--admin-text);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.expense-void-button {
    padding: 5px 9px !important;

    border: 0 !important;

    background: transparent !important;

    color: #a45e5e !important;

    font-size: 9px !important;

    font-weight: 700;

    cursor: pointer;
}


.expense-void-button:hover {
    text-decoration: underline;
}


.expense-voided-row {
    opacity: 0.48;
}


.status-active {
    background: #e7efe8;
    color: #55755c;
}


.status-voided {
    background: #f1e5e5;
    color: #985c5c;
}


@media (max-width: 850px) {

    .expense-form-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

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

}

/* =========================================================
   RECURRING EXPENSE
========================================================= */

.recurring-expense-box {
    padding: 18px;

    border: 1px solid var(--admin-border);

    border-radius: 8px;

    background: var(--admin-bg);
}


.recurring-checkbox {
    display: flex !important;

    align-items: center;

    gap: 10px;

    margin: 0 !important;

    cursor: pointer;
}


.recurring-checkbox input {
    width: auto !important;

    margin: 0;
}


.recurring-checkbox span {
    font-size: 11px;

    font-weight: 700;
}


.recurring-expense-box p {
    margin: 8px 0 0 25px;

    color: var(--admin-muted);

    font-size: 9px;
}


.recurring-end-field {
    max-width: 320px;

    margin: 20px 0 0 25px;
}


.recurring-end-field label {
    display: block;

    margin-bottom: 7px;
}


.recurring-end-field small {
    display: block;

    margin-top: 7px;

    color: var(--admin-muted);

    font-size: 8px;
}

.expense-repeat-info {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
}


.expense-repeat-badge,
.expense-generated-badge {
    display: inline-block;

    padding: 4px 7px;

    border-radius: 5px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.expense-repeat-badge {
    background: #eee7f1;
    color: #725f7d;
}


.expense-generated-badge {
    background: #edf0ea;
    color: #65705e;
}


.expense-inline-action {
    display: inline-block;
    margin-right: 6px;
}


.expense-stop-repeat {
    padding: 5px 8px !important;

    border: 0 !important;

    background: transparent !important;

    color: #725f7d !important;

    font-size: 9px !important;

    font-weight: 700;

    cursor: pointer;
}


.expense-stop-repeat:hover {
    text-decoration: underline;
}

/* =========================================================
   EXPENSE MONTH NAVIGATION
========================================================= */

.expense-month-bar {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 20px;

    padding: 14px 16px;

    background: #fff;

    border: 1px solid var(--admin-border);

    border-radius: 8px;
}


.expense-month-arrow {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    border: 1px solid var(--admin-border);

    border-radius: 6px;

    text-decoration: none;

    color: var(--admin-text);

    font-size: 16px;
}


.expense-month-arrow:hover {
    background: var(--admin-bg);
}


.expense-month-title {
    min-width: 170px;
}


.expense-month-title span {
    display: block;

    margin-bottom: 3px;

    color: var(--admin-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.expense-month-title strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    font-weight: 400;
}


.expense-month-select {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-left: auto;
}


.expense-month-select select {
    min-width: 110px;

    padding: 8px 10px;

    border: 1px solid var(--admin-border);

    border-radius: 6px;

    background: #fff;
}


.expense-month-select button {
    padding: 9px 14px;

    border: 0;

    border-radius: 6px;

    cursor: pointer;
}


.expense-summary-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.expense-summary-note {
    display: block;

    margin-top: 7px;

    color: var(--admin-muted);

    font-size: 8px;
}


@media (max-width: 800px) {

    .expense-month-bar {
        flex-wrap: wrap;
    }


    .expense-month-select {
        width: 100%;

        margin-left: 0;
    }


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

}

/* =========================================================
   FINANCE - 4 CARD CASH POSITION
========================================================= */

.finance-cash-grid {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


.finance-expense-card {
    position: relative;
}


.finance-card-detail-link {
    display: inline-block;

    margin-top: 12px;

    color: var(--admin-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-decoration: none;

    text-transform: uppercase;
}


.finance-card-detail-link:hover {
    color: var(--admin-text);

    text-decoration: underline;
}


.finance-negative-value {
    color: #9b5353;
}


@media (max-width: 1100px) {

    .finance-cash-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .finance-cash-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   COMPANY FUNDS
========================================================= */

.fund-period-bar {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 20px;

    padding: 14px 16px;

    background: #ffffff;

    border: 1px solid var(--admin-border);

    border-radius: 8px;
}


.fund-month-arrow {
    display: flex;

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

    width: 34px;
    height: 34px;

    border: 1px solid var(--admin-border);

    border-radius: 6px;

    color: var(--admin-text);

    text-decoration: none;

    font-size: 16px;
}


.fund-month-arrow:hover {
    background: var(--admin-bg);
}


.fund-period-title {
    min-width: 170px;
}


.fund-period-title span {
    display: block;

    margin-bottom: 3px;

    color: var(--admin-muted);

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

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.fund-period-title strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    font-weight: 400;
}


.fund-period-form {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-left: auto;
}


.fund-period-form select {
    min-width: 110px;

    padding: 8px 10px;

    border: 1px solid var(--admin-border);

    border-radius: 6px;

    background: #ffffff;
}


.fund-period-form button {
    padding: 9px 14px;

    border: 0;

    border-radius: 6px;

    cursor: pointer;
}


/* =========================================================
   MAIN FUND CARDS
========================================================= */

.fund-main-grid {
    display: grid;

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

    gap: 14px;

    margin-bottom: 26px;
}


.fund-card {
    min-height: 125px;

    padding: 20px;

    background: #ffffff;

    border: 1px solid var(--admin-border);

    border-radius: 8px;
}


.fund-card > span {
    display: block;

    margin-bottom: 13px;

    color: var(--admin-muted);

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

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.fund-card > strong {
    display: block;

    margin-bottom: 10px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 24px;

    font-weight: 400;
}


.fund-card > small {
    color: var(--admin-muted);

    font-size: 8px;

    line-height: 1.5;
}


.fund-total-card {
    background: #6f5d60;

    border-color: #6f5d60;

    color: #ffffff;
}


.fund-total-card > span,
.fund-total-card > small {
    color: rgba(
        255,
        255,
        255,
        0.72
    );
}


.fund-total-card > strong {
    color: #ffffff;
}


.fund-negative {
    color: #9b5353 !important;
}


/* =========================================================
   FUND BREAKDOWN
========================================================= */

.fund-breakdown-grid {
    display: grid;

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

    margin-bottom: 26px;

    background: #ffffff;

    border: 1px solid var(--admin-border);

    border-radius: 8px;

    overflow: hidden;
}


.fund-breakdown-grid > div {
    padding: 16px;

    border-right: 1px solid var(--admin-border);
}


.fund-breakdown-grid > div:last-child {
    border-right: 0;
}


.fund-breakdown-grid span {
    display: block;

    margin-bottom: 7px;

    color: var(--admin-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.fund-breakdown-grid strong {
    font-size: 12px;
}


/* =========================================================
   GROWTH
========================================================= */

.fund-growth-card {
    margin-bottom: 20px;
}


.fund-current-month-row {
    background: #f4efef;
}


.fund-type-badge {
    display: inline-block;

    padding: 5px 8px;

    border-radius: 5px;

    background: #eee7e8;

    color: #66575a;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.fund-money-in {
    color: #55705a;

    font-weight: 700;
}


.fund-money-out {
    color: #955b5b;

    font-weight: 700;
}


/* =========================================================
   FUND FORM
========================================================= */

.fund-form-grid {
    display: grid;

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

    gap: 20px;
}


.fund-form-note {
    margin-top: 16px;

    padding: 16px 18px;

    background: #f3eeee;

    border: 1px solid #e7dddd;

    border-radius: 8px;
}


.fund-form-note strong {
    display: block;

    margin-bottom: 6px;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}


.fund-form-note p {
    margin: 0;

    color: var(--admin-muted);

    font-size: 9px;

    line-height: 1.6;
}


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

@media (max-width: 1100px) {

    .fund-main-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .fund-breakdown-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .fund-breakdown-grid > div {
        border-bottom:
            1px solid var(--admin-border);
    }

}


@media (max-width: 700px) {

    .fund-main-grid,
    .fund-breakdown-grid,
    .fund-form-grid {
        grid-template-columns: 1fr;
    }


    .fund-period-bar {
        flex-wrap: wrap;
    }


    .fund-period-form {
        width: 100%;

        margin-left: 0;
    }

}

/* =========================================================
   COMPANY FUNDS GROWTH CHART
========================================================= */

.fund-chart-card {
    margin-bottom: 20px;
}


.fund-chart-container {
    position: relative;

    width: 100%;

    height: 260px;

    padding-top: 10px;
}


@media (max-width: 700px) {
    .fund-chart-container {
        height: 200px;
    }
}

/* =========================================================
   PRODUCT EDIT CMS
========================================================= */

.product-edit-grid {
    display: grid;

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

    gap: 32px;
}


.product-edit-image-column > label {
    display: block;

    margin-bottom: 8px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.product-edit-image-preview {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    aspect-ratio: 1 / 1;

    margin-bottom: 12px;

    overflow: hidden;

    background: #f3efec;

    border: 1px solid var(--admin-border);

    border-radius: 8px;
}


.product-edit-image-preview img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.product-image-empty {
    color: var(--admin-muted);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}


.product-edit-image-column input[type="file"] {
    width: 100%;
}


.product-edit-image-column p {
    margin-top: 8px;
}


.product-edit-details {
    display: grid;

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

    gap: 20px;

    align-content: start;
}


@media (max-width: 850px) {

    .product-edit-grid {
        grid-template-columns: 1fr;
    }


    .product-edit-image-column {
        max-width: 400px;
    }

}


@media (max-width: 600px) {

    .product-edit-details {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   COMPANY SETTINGS
========================================================= */

.company-settings-success {
    margin-bottom: 20px;

    padding: 14px 16px;

    background: #f1eceb;

    border: 1px solid #ded5d3;

    color: #6f5d60;

    font-size: 12px;
}


.company-settings-brand-grid {
    display: grid;

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

    gap: 34px;

    align-items: start;
}


.company-logo-preview {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 150px;

    margin: 8px 0 12px;

    padding: 20px;

    background: #f4f1ef;

    border: 1px solid var(--admin-border);

    border-radius: 8px;
}


.company-logo-preview img {
    max-width: 100%;

    max-height: 100%;

    object-fit: contain;
}


.company-logo-preview span {
    color: #99908b;

    font-size: 9px;

    letter-spacing: 0.12em;
}


.company-settings-fields {
    display: grid;

    gap: 20px;
}


.company-settings-two-column {
    display: grid;

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

    gap: 20px;
}


@media (max-width: 800px) {

    .company-settings-brand-grid {
        grid-template-columns: 1fr;
    }


    .company-logo-preview {
        max-width: 300px;
    }

}


@media (max-width: 600px) {

    .company-settings-two-column {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   SHOP CATEGORIES
========================================================= */

.category-actions {
    display: flex;

    align-items: center;

    gap: 12px;
}


.category-actions form {
    margin: 0;
}


.category-toggle-button {
    padding: 0;

    border: 0;

    background: transparent;

    color: #8a615f;

    font-size: 10px;

    cursor: pointer;

    text-decoration: underline;
}


.category-location-header,
.category-location-more {
    display: inline-flex;

    padding: 5px 8px;

    border-radius: 4px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.category-location-header {
    background: #eee8e6;

    color: #6f5d60;
}


.category-location-more {
    background: #f2f0ed;

    color: #89817c;
}

.category-checkbox-label {
    display: flex;

    align-items: center;

    gap: 9px;

    cursor: pointer;
}


.category-checkbox-label input {
    width: auto;

    margin: 0;
}

/* =========================================================
   SHOP CATEGORY EDIT
========================================================= */

.shop-category-edit-grid {
    display: grid;

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

    gap: 36px;

    align-items: start;
}


.shop-category-image-preview {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    aspect-ratio: 4 / 3;

    margin: 8px 0 12px;

    overflow: hidden;

    background: #f3efec;

    border: 1px solid var(--admin-border);

    border-radius: 8px;
}


.shop-category-image-preview img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.shop-category-image-preview span {
    color: #958b86;

    font-size: 9px;

    letter-spacing: 0.1em;
}


.subcategory-add-form {
    display: grid;

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

    gap: 16px;

    align-items: end;

    padding: 20px;

    background: #f7f4f2;

    border: 1px solid var(--admin-border);

    border-radius: 8px;
}


.subcategory-add-button {
    display: flex;

    align-items: flex-end;
}


.subcategory-add-button button {
    white-space: nowrap;
}


@media (max-width: 850px) {

    .shop-category-edit-grid {
        grid-template-columns: 1fr;
    }


    .shop-category-image-preview {
        max-width: 420px;
    }


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

}

/* =========================================================
   CATEGORY SUBCATEGORY EXPAND
========================================================= */

.subcategory-toggle {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 5px 8px;

    border: 0;

    background: transparent;

    color: #2f2a27;

    cursor: pointer;

    font-size: 11px;
}


.subcategory-toggle-arrow {
    display: inline-block;

    font-size: 10px;

    transition: transform 0.2s ease;
}


.subcategory-toggle[
    aria-expanded="true"
] .subcategory-toggle-arrow {
    transform: rotate(180deg);
}


.subcategory-expand-row td {
    padding: 0 !important;

    background: #f8f5f3;
}


.subcategory-expand-panel {
    padding: 18px 22px 20px;

    border-top: 1px solid #ebe4df;
}


.subcategory-expand-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 14px;
}


.subcategory-chip-list {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.subcategory-chip {
    display: inline-flex;

    align-items: center;

    padding: 7px 10px;

    border-radius: 999px;

    background: #eee8e6;

    color: #5f5153;

    font-size: 10px;

    font-weight: 600;
}


.subcategory-chip-inactive {
    opacity: 0.5;
}

/* =========================================================
   SHOP CATEGORY - VISUAL POLISH
========================================================= */


/* Subcategory count dropdown
   4 ▼ / 0 ▼ */
.subcategory-toggle {
    min-width: 48px !important;

    padding: 7px 10px !important;

    background: #f1ece9 !important;

    border: 1px solid #e2d9d5 !important;

    border-radius: 6px !important;

    color: #6f5d60 !important;

    font-size: 10px !important;

    font-weight: 700 !important;

    box-shadow: none !important;
}


.subcategory-toggle:hover {
    background: #e9e1de !important;
}


/* Small arrow */
.subcategory-toggle-arrow {
    font-size: 8px;

    color: #8d7d7f;
}


/* -----------------------------------------
   Expanded area heading
   "Earrings Subcategories"
----------------------------------------- */

.subcategory-expand-header strong {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: #837875;
}


/* Manage link */
.subcategory-expand-header .admin-edit-link {
    font-size: 9px;
}


/* -----------------------------------------
   Actual subcategory items
   Gem / Huggies / Studs / Statement
----------------------------------------- */

.subcategory-chip {
    padding: 8px 13px;

    background: #eee8e6;

    border-radius: 999px;

    color: #443a38;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.01em;
}


.subcategory-chip:hover {
    background: #e5ddda;
}


/* Disabled subcategory */
.subcategory-chip-inactive {
    opacity: 0.45;
}


/* -----------------------------------------
   Disable / Enable category button
----------------------------------------- */

.category-toggle-button {
    min-width: 64px !important;

    padding: 7px 11px !important;

    background: #f1ece9 !important;

    border: 1px solid #e2d9d5 !important;

    border-radius: 5px !important;

    color: #6f5d60 !important;

    font-size: 9px !important;

    font-weight: 700 !important;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    text-decoration: none !important;

    box-shadow: none !important;
}


.category-toggle-button:hover {
    background: #e9e1de !important;

    color: #514345 !important;
}

/* =========================================================
   PRODUCT EDIT V2
========================================================= */

.product-edit-details-grid {
    display: grid;

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

    gap: 18px 22px;
}


/* =========================================================
   PRODUCT IMAGES
========================================================= */

.product-images-section {
    margin-top: 30px;

    padding-top: 26px;

    border-top: 1px solid
        var(--admin-border);
}


.product-images-heading {
    margin-bottom: 18px;
}


.product-images-heading h3 {
    margin: 0 0 5px;

    font-size: 15px;

    font-weight: 700;
}


.product-images-heading p {
    margin: 0;
}


.product-image-manager-grid {
    display: grid;

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

    gap: 22px;
}


.product-image-manager {
    min-width: 0;

    padding: 18px;

    background: #faf8f7;

    border: 1px solid
        var(--admin-border);

    border-radius: 8px;
}


.product-image-manager-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 13px;
}


.product-image-manager-heading strong {
    color: #302a27;

    font-size: 12px;
}


.product-image-manager-heading span {
    color: #918581;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.05em;
}


/* =========================================================
   IMAGE PREVIEW
========================================================= */

.product-image-preview-frame {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #f1eeec;

    border: 1px solid #e2dbd7;

    border-radius: 7px;
}


.product-image-preview-img {
    width: 100%;

    height: 100%;

    display: block;
}


.product-image-contain {
    object-fit: contain;

    background: #fff;
}


.product-image-cover {
    object-fit: cover;
}


.product-image-placeholder {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    color: #9d928d;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.product-image-input {
    margin-top: 14px;
}


.product-image-input label {
    display: block;

    margin-bottom: 7px;

    color: #756966;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.product-image-input input[type="file"] {
    width: 100%;

    padding: 9px;

    background: #fff;

    border: 1px solid
        var(--admin-border);

    border-radius: 6px;
}


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

@media (max-width: 900px) {

    .product-edit-details-grid {
        grid-template-columns: 1fr;
    }


    .product-image-manager-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   COMPACT PRODUCT IMAGE MANAGER
========================================================= */

.compact-product-images {
    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 18px;

    margin-bottom: 28px;
}


.compact-product-image-item {
    width: 220px;

    flex: 0 0 220px;
}


.compact-image-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 7px;
}


.compact-image-heading strong {
    color: #342d2a;

    font-size: 13px;

    font-weight: 700;
}


.compact-image-heading span {
    color: #9a8d88;

    font-size: 8px;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.compact-image-preview {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 220px;

    height: 155px;

    overflow: hidden;

    background: #f3f0ee;

    border: 1px solid
        var(--admin-border);

    border-radius: 6px;
}


.compact-image-preview img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


.compact-image-placeholder {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    color: #a09691;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 0.07em;
}


.compact-product-image-item input[type="file"] {
    width: 100%;

    margin-top: 8px;

    padding: 6px;

    border: 1px solid
        var(--admin-border);

    border-radius: 5px;

    background: #fff;

    font-size: 9px;
}


/* =========================================================
   PRODUCT INFORMATION BELOW IMAGES
========================================================= */

.product-information-section {
    padding-top: 24px;

    border-top: 1px solid
        var(--admin-border);
}


@media (max-width: 650px) {

    .compact-product-images {
        flex-wrap: wrap;
    }

}