<?php

require_once __DIR__ . '/helpers.php';

function sparrow_backyard_header(string $page_title = 'Backyard'): void
{
    $app_name = sparrow_config('app_name');
    ?>
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title><?php echo sparrow_escape($page_title); ?> | <?php echo sparrow_escape($app_name); ?></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>
            :root {
                --sparrow-bg: #fbf7fa;
                --sparrow-card: #ffffff;
                --sparrow-border: #ead7e5;
                --sparrow-text: #352733;
                --sparrow-muted: #725d6d;
                --sparrow-purple: #9b5c8f;
                --sparrow-purple-dark: #864b7b;
                --sparrow-soft-pink: #f9f2f7;
                --sparrow-sidebar: #fff8fc;
            }

            * {
                box-sizing: border-box;
            }

            body {
                margin: 0;
                font-family: Arial, sans-serif;
                background: var(--sparrow-bg);
                color: var(--sparrow-text);
				font-size: 12px; /* smaller than default 16px */
            }

            a {
                color: var(--sparrow-purple);
            }

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

            .sidebar {
                width: 245px;
                background: var(--sparrow-sidebar);
                border-right: 1px solid var(--sparrow-border);
                padding: 18px 14px;
                flex-shrink: 0;
            }

            .sidebar-brand {
                padding: 10px 10px 18px;
                margin-bottom: 12px;
                border-bottom: 1px solid var(--sparrow-border);
            }

            .sidebar-brand-title {
                font-weight: bold;
                font-size: 18px;
                line-height: 1.2;
            }

            .sidebar-brand-subtitle {
                margin-top: 4px;
                color: var(--sparrow-muted);
                font-size: 13px;
            }

            .sidebar-nav {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }

            .sidebar-nav a {
                display: block;
                padding: 10px 12px;
                border-radius: 12px;
                color: var(--sparrow-text);
                text-decoration: none;
                font-weight: bold;
            }

            .sidebar-nav a:hover {
                background: var(--sparrow-soft-pink);
                color: var(--sparrow-purple-dark);
            }

            .sidebar-nav a.is-active {
                background: #ffffff;
                color: var(--sparrow-purple-dark);
                border: 1px solid var(--sparrow-border);
                box-shadow: 0 4px 16px rgba(70, 35, 60, 0.05);
            }

            .main-shell {
                flex: 1;
                min-width: 0;
            }

            .topbar {
                background: var(--sparrow-card);
                border-bottom: 1px solid var(--sparrow-border);
                padding: 16px 24px;
                display: flex;
                justify-content: space-between;
                gap: 16px;
                align-items: center;
            }

            .page-title {
                font-weight: bold;
                font-size: 20px;
            }

            .topbar-actions {
                display: flex;
                gap: 14px;
                align-items: center;
                flex-wrap: wrap;
            }

            .topbar-actions a {
                color: var(--sparrow-purple);
                text-decoration: none;
                font-weight: bold;
            }

            .page {
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px 24px;
}

            .card {
                background: var(--sparrow-card);
                border: 1px solid var(--sparrow-border);
                border-radius: 14px;
                padding: 20px;
                box-shadow: 0 8px 30px rgba(70, 35, 60, 0.06);
                margin-bottom: 18px;
            }

            h1,
            h2,
            h3 {
                margin-top: 0;
            }

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

            .button {
                display: inline-block;
                padding: 4px 6px;
                border-radius: 999px;
                background: var(--sparrow-purple);
                color: #ffffff;
                text-decoration: none;
                font-weight: bold;
                border: 0;
                cursor: pointer;
            }

            .button:hover {
                background: var(--sparrow-purple-dark);
            }

            .button-secondary {
                background: #ffffff;
                color: var(--sparrow-purple);
                border: 1px solid var(--sparrow-border);
            }

            .button-secondary:hover {
                background: var(--sparrow-soft-pink);
            }
			
#add-item-row,
.remove-item-button {
    display: inline-block;
    padding: 4px 6px;
    border-radius: 999px;
    border: 1px solid var(--sparrow-border);
    background: #ffffff;
    color: var(--sparrow-purple-dark);
    font-weight: bold;
    cursor: pointer;
}

#add-item-row:hover,
.remove-item-button:hover {
    background: var(--sparrow-soft-pink);
}

.remove-item-button {
    padding: 6px 10px;
    font-size: 8px;
}

.items-edit-table th:nth-child(1),
.items-edit-table td:nth-child(1) {
    width: 80px;
}

.items-edit-table th:nth-child(2),
.items-edit-table td:nth-child(2) {
    width: 150px;
}

.items-edit-table input[name="quantity[]"] {
    max-width: 70px;
    min-width: 60px;
}

.items-edit-table select[name="item_type[]"] {
    min-width: 130px;
}

.inline-edit-box {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid var(--sparrow-border);
    border-radius: 16px;
    background: #fffbfd;
}

.payment-delivery-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.payment-delivery-row .card {
    flex: 1 1 300px;
}

.internal-cost-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    margin-bottom: 16px;
}

.internal-cost-grid .sparrow-form-field {
    margin-bottom: 0;
}

.internal-cost-grid input {
    width: 100%;
}

@media (max-width: 700px) {
    .internal-cost-grid {
        grid-template-columns: 1fr;
    }
}

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

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

            th,
            td {
                padding: 12px 10px;
                border-bottom: 1px solid var(--sparrow-border);
                text-align: left;
                vertical-align: top;
            }

            th {
                color: var(--sparrow-muted);
                font-size: 12px;
                text-transform: uppercase;
                letter-spacing: 0.04em;
            }
			
			tbody tr {
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

tbody tr:hover {
    background: #fff4fb;
}
			
			.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--sparrow-border);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    background: #ffffff;
    color: var(--sparrow-text);
}

textarea {
    resize: vertical;
}

.form-section {
    margin-top: 20px;
}

.form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.item-card {
    border: 1px solid var(--sparrow-border);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 16px;
    background: #fffbfd;
}

.notice-error {
    padding: 12px 14px;
    margin-bottom: 18px;
    border-radius: 12px;
    border: 1px solid #efb9b9;
    background: #fff0f0;
    color: #8a2525;
    font-weight: bold;
}

.notice-success {
    padding: 12px 14px;
    margin-bottom: 18px;
    border-radius: 12px;
    border: 1px solid #b9dfc3;
    background: #f0fff4;
    color: #276738;
    font-weight: bold;
}

.fake-input {
    width: 100%;
    border: 1px solid var(--sparrow-border);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--sparrow-soft-pink);
    color: var(--sparrow-purple-dark);
    font-weight: bold;
    min-height: 41px;
}

.page-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.heading-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

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

.detail-label {
    color: var(--sparrow-muted);
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.detail-value {
    font-size: 12px;
}

@media (max-width: 700px) {
    .form-grid,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .page-heading-row {
        display: block;
    }

    .heading-actions {
        margin-top: 14px;
    }
}

            @media (max-width: 800px) {
                .backyard-shell {
                    display: block;
                }
				
				.sidebar {
    width: 100%;
    flex: none;
    border-right: 0;
    border-bottom: 1px solid var(--sparrow-border);
}

                .sidebar {
                    width: 100%;
                    border-right: 0;
                    border-bottom: 1px solid var(--sparrow-border);
                }

                .sidebar-nav {
                    flex-direction: row;
                    overflow-x: auto;
                    padding-bottom: 4px;
                }

                .sidebar-nav a {
                    white-space: nowrap;
                }

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

                .page {
                    padding: 18px 14px;
                }

                .card {
                    padding: 18px;
                }
            }
			
/* Narrower Backyard sidebar */
.sidebar {
    width: 180px;
    flex: 0 0 180px;
}

.main-shell {
    flex: 1;
    min-width: 0;
}

/* Table inside main order view */
.order-items-table {
    font-size: 0.875rem; /* slightly smaller */
}

.order-items-table th,
.order-items-table td {
    padding: 6px 8px; /* less padding, tighter rows */
}

/* Order detail/work page only */
body.order-view-page .page {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 22px 18px 22px 10px;
}

body.order-view-page .card {
    padding: 18px;
    margin-bottom: 14px;
}

/* Order view two-column work layout */
body.order-view-page .order-work-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 18px;
    align-items: start;
}

body.order-view-page .order-work-main {
    min-width: 0;
}

body.order-view-page .order-summary-side {
    position: sticky;
    top: 18px;
}

body.order-view-page .profit-summary-card {
    padding: 18px;
}

body.order-view-page .profit-summary-card h2 {
    font-size: 17px;
    margin-bottom: 14px;
}

body.order-view-page .summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--sparrow-border);
}

body.order-view-page .summary-row span {
    color: var(--sparrow-muted);
    font-weight: bold;
}

body.order-view-page .summary-row strong {
    text-align: right;
}

body.order-view-page .summary-row-total {
    border-bottom: 0;
    font-size: 12px;
}

body.order-view-page .summary-note {
    margin: 10px 0 0;
    font-size: 12px;
}

@media (max-width: 1000px) {
    body.order-view-page .order-work-layout {
        grid-template-columns: 1fr;
    }

    body.order-view-page .order-summary-side {
        position: static;
    }
}

/* Sparrow-style accent for floating Profit Summary card */
body.order-view-page .profit-summary-card {
    background: #fff0f8; /* soft pink background */
    border: 1px solid var(--sparrow-border);
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(70, 35, 60, 0.08);
    padding: 20px;
}

body.order-view-page .profit-summary-card h2 {
    font-size: 18px;
    color: var(--sparrow-purple-dark);
    margin-bottom: 14px;
}

body.order-view-page .profit-summary-card .summary-row {
    font-size: 12px; /* matches your 12px site font */
    padding: 6px 0;
}

body.order-view-page .profit-summary-card .summary-row strong {
    font-weight: bold;
    font-size: 13px; /* slightly larger for numbers */
    color: var(--sparrow-text);
}

body.order-view-page .profit-summary-card .summary-row-total strong {
    font-size: 14px;
    color: var(--sparrow-purple-dark);
}

body.order-view-page .profit-summary-card .summary-note {
    font-size: 11px;
    color: var(--sparrow-muted);
    margin-top: 8px;
}

/* Standardize all cards with soft shadow, gradient header line, rounded corners */
.card,
body.order-view-page .profit-summary-card {
    border-radius: 18px;
    border: 1px solid var(--sparrow-border);
    box-shadow: 0 8px 30px rgba(70, 35, 60, 0.06);
    background: var(--sparrow-card);
    padding: 20px;
    position: relative;
}

/* Gradient header line for all cards */

/* Profit Summary special pink background */
body.order-view-page .profit-summary-card {
    background: #fff0f8; /* soft pink */
}

/* Card header spacing */
.card h2,
body.order-view-page .profit-summary-card h2 {
    margin-top: 10px;
    margin-bottom: 14px;
}

/* Summary rows for Profit Summary */
body.order-view-page .profit-summary-card .summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--sparrow-border);
    font-size: 12px;
}

body.order-view-page .profit-summary-card .summary-row strong {
    font-weight: bold;
    font-size: 13px;
    color: var(--sparrow-text);
}

body.order-view-page .profit-summary-card .summary-row-total strong {
    font-size: 14px;
    color: var(--sparrow-purple-dark);
}

body.order-view-page .profit-summary-card .summary-note {
    font-size: 11px;
    color: var(--sparrow-muted);
    margin-top: 8px;
}

/* Cleaner Sparrow card style */
.card {
    border-radius: 18px;
    border: 1px solid var(--sparrow-border);
    box-shadow: 0 8px 30px rgba(70, 35, 60, 0.06);
    background: var(--sparrow-card);
}

/* Dark pink card headings */
.card h1,
.card h2,
.card h3,
body.order-view-page .profit-summary-card h2 {
    color: var(--sparrow-purple-dark);
}

/* Card headers with subtle gradient under the text */
.card h1,
.card h2,
.card h3,
body.order-view-page .profit-summary-card h2 {
    position: relative;           /* needed for pseudo gradient effect */
    display: inline-block;        /* lets background size work properly */
    padding-bottom: 6px;          /* space for gradient line */
    margin-bottom: 12px;
    color: var(--sparrow-purple-dark);
    border-bottom: 0;             /* remove any previous hard line */
    background: linear-gradient(
        90deg,
        #c982b8 0%,
        #e4bfdc 45%,
        transparent 100%
    );
    background-size: 100% 2px;    /* 2px tall line under the text */
    background-repeat: no-repeat;
    background-position: left bottom;
}

.card h1,
.card h2,
body.order-view-page .profit-summary-card h2 {
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 0;
    background: linear-gradient(to right, #d9b4d0, transparent);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
}

/* Standard Sparrow-style cards for all pages */
.card {
    border-radius: 18px;
    border: 1px solid var(--sparrow-border);
    box-shadow: 0 8px 30px rgba(70, 35, 60, 0.06);
    background: var(--sparrow-card);
    padding: 20px;
}

/* Card headers */
.card h1,
.card h2,
.card h3 {
    color: var(--sparrow-purple-dark);
    padding-bottom: 10px;
    margin-bottom: 14px;
}

/* Profit Summary special */
body.order-view-page .profit-summary-card {
    background: #fff0f8; /* soft pink */
}

/* Profit Summary rows */
body.order-view-page .profit-summary-card .summary-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid var(--sparrow-border);
    font-size: 12px;
}

body.order-view-page .profit-summary-card .summary-row strong {
    font-weight: bold;
    font-size: 13px;
    color: var(--sparrow-text);
}

body.order-view-page .profit-summary-card .summary-row-total strong {
    font-size: 14px;
    color: var(--sparrow-purple-dark);
}

body.order-view-page .profit-summary-card .summary-note {
    font-size: 11px;
    color: var(--sparrow-muted);
    margin-top: 8px;
}

.notes-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.notes-row .card {
    flex: 1 1 300px;
}

.pretty-file-upload {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.pretty-file-upload input[type="file"] {
    position: absolute;
    left: -9999px;
}

.pretty-file-upload label.button {
    cursor: pointer;
    margin-bottom: 0;
}

.file-upload-name {
    color: var(--sparrow-muted);
    font-size: 12px;
}

.reference-image-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(210px, 1fr)
    );
    gap: 16px;
    margin-top: 16px;
}

.reference-image-card {
    padding: 14px;
    border: 1px solid #ead4df;
    border-radius: 14px;
    background: #fffafd;
}

.reference-image-card h3 {
    margin: 0 0 12px;
    color: #854766;
    font-size: 16px;
}

.reference-image-preview {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: 10px;
    background: #ffffff;
}

.reference-file-name {
    margin: 10px 0 0;
    overflow-wrap: anywhere;
}

.approval-image-add-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    margin-bottom: 20px;
}

.approval-image-add-row label {
    width: 100%;
    margin: 0;
}

.approval-image-add-row select {
    min-width: 220px;
}

.approval-upload-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(240px, 320px)
    );
    gap: 18px;
    width: 100%;
    grid-column: 1 / -1;
    margin-bottom: 20px;
}

.approval-upload-box[hidden] {
    display: none;
}

.approval-upload-box h3 {
    margin-top: 0;
}

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

.approval-upload-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(210px, 1fr)
    );
    gap: 18px;
    margin-bottom: 20px;
}

.approval-upload-grid {
    grid-column: 1 / -1;
    width: 100%;
}

.approval-upload-box {
    padding: 16px;
    background: #fffafd;
    border: 1px solid #eadde7;
    border-radius: 12px;
}

.approval-upload-box label {
    display: block;
    margin-bottom: 10px;
}

.approval-position-preview {
    display: block;
    width: 100%;
    max-width: 260px;
    max-height: 240px;
    margin-bottom: 10px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid #e4d9e2;
    border-radius: 8px;
}

.approval-upload-box input[type="file"] {
    width: 100%;
}

.approval-preview {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--sparrow-border);
}

.approval-image-preview {
    display: block;
    max-width: 100%;
    max-height: 360px;
    border: 1px solid var(--sparrow-border);
    border-radius: 14px;
    background: #ffffff;
    padding: 6px;
    margin: 8px 0 12px;
}

.approval-status-buttons .button-success {
    background: #c3f0d8;
    border: 1px solid #7bc787;
    color: #276738;
}

.approval-status-buttons .button-success:hover {
    background: #a7e8c3;
}

.approval-status-buttons .button-secondary {
    background: var(--sparrow-soft-pink);
    border: 1px solid var(--sparrow-border);
    color: var(--sparrow-purple-dark);
}

.approval-status-buttons .button-secondary:hover {
    background: #f3e6f1;
}

.approval-status-pill {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid var(--sparrow-border);
}

.approval-status-waiting {
    background: var(--sparrow-soft-pink);
    color: var(--sparrow-purple-dark);
}

.approval-status-approved {
    background: #f0fff4;
    color: #276738;
    border-color: #b9dfc3;
}

.approval-status-changes_requested {
    background: #fff0f0;
    color: #8a2525;
    border-color: #efb9b9;
}

.status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: bold;
    margin-right: 6px;
}

.status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: bold;
    margin-right: 6px;
}

/* Approval pills */
.approval-status-waiting {
    background: var(--sparrow-soft-pink);
    color: var(--sparrow-purple-dark);
    border: 1px solid var(--sparrow-border);
}

.approval-status-approved {
    background: #f0fff4;
    color: #276738;
    border: 1px solid #b9dfc3;
}

.approval-status-changes_requested {
    background: #fff0f0;
    color: #8a2525;
    border: 1px solid #efb9b9;
}

/* Stack payment pills 2 per row */

.daily-verse-card {
    background: #fff8fc;
    border: 1px solid #ead7e5;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.daily-verse-card h2 {
    margin-top: 0;
    font-size: 16px;
    color: #864b7b;
}

.daily-verse-card h3 {
    margin-bottom: 4px;
    font-size: 14px;
    color: #9b5c8f;
}

.daily-verse-card p {
    margin-top: 4px;
    font-size: 13px;
    color: #352733;
}

.settings-section-card {
    margin-bottom: 28px;
}

.settings-category-section {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--sparrow-border);
}

.settings-category-section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.settings-category-section h3 {
    margin-bottom: 12px;
}

.settings-category-card {
    background: #fff8fc;
    border: 1px solid #ead7e5;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.settings-category-card h3 {
    margin-top: 0;
    font-size: 16px;
    color: #864b7b;
    margin-bottom: 12px;
}

.settings-category-card ul {
    list-style-type: none;
    padding-left: 0;
}

.settings-category-card li {
    margin-bottom: 6px;
}

.settings-category-card input[type="text"] {
    padding: 4px 6px;
    margin-right: 4px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 13px;
}

.settings-category-card .button {
    margin-bottom: 4px;
}

.backyard-settings-box {
    background: #fff8fc;
    border: 1px solid var(--sparrow-border);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 8px 30px rgba(70, 35, 60, 0.06);
}

.backyard-settings-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sparrow-border);
}

.backyard-settings-tab {
    background: #ffffff;
    color: var(--sparrow-purple-dark);
    border: 1px solid var(--sparrow-border);
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: bold;
    cursor: pointer;
}

.backyard-settings-tab.is-active,
.backyard-settings-tab:hover {
    background: var(--sparrow-purple);
    color: #ffffff;
}

.backyard-settings-panel {
    display: none;
}

.backyard-settings-panel.is-active {
    display: block;
}

.backyard-settings-section-title {
    margin-bottom: 16px;
    color: var(--sparrow-purple-dark);
}

.backyard-settings-subcards {
    display: grid;
    gap: 18px;
}

.backyard-settings-subcard {
    background: #ffffff;
    border: 1px solid var(--sparrow-border);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(70, 35, 60, 0.04);
}

.backyard-settings-subcard h3 {
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--sparrow-purple-dark);
}

.backyard-settings-grid {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 14px 18px;
    align-items: start;
}

.backyard-settings-help {
    margin-top: 5px;
    color: var(--sparrow-muted);
    font-size: 12px;
    line-height: 1.35;
}

.backyard-settings-list {
    display: grid;
    gap: 10px;
}

.backyard-settings-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.backyard-settings-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--sparrow-border);
}

.backyard-settings-save-row {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--sparrow-border);
}

@media (max-width: 800px) {
    .backyard-settings-grid,
    .backyard-settings-row,
    .backyard-settings-add-row {
        grid-template-columns: 1fr;
    }
}

.backyard-settings-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.backyard-settings-row-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
}

.button-danger {
    border-color: #e4a3a3;
    background: #fff5f5;
    color: #8a2525;
}

.button-danger:hover {
    background: #ffe5e5;
    color: #701b1b;
}

@media (max-width: 700px) {
    .backyard-settings-row {
        grid-template-columns: 1fr;
    }

    .backyard-settings-row-actions {
        justify-content: flex-start;
    }
}

.orders-toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin: 6px 0 12px;
}

.bulk-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bulk-action-select {
    width: 145px;
    max-width: 145px;
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid #e8cfd8;
    border-radius: 8px;
    background: #fff;
    color: #4a3140;
}

.button-small {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.2;
}

.sparrow-order-form {
    max-width: 900px;
}

.sparrow-form-card {
    background: #fff;
    border: 1px solid #f3bfd1;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 18px;
}

.sparrow-form-card h3,
.sparrow-form-card h4 {
    margin-top: 0;
    color: #3f3f3f;
}

.form-grid.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-field {
    margin-bottom: 16px;
}

.form-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #444;
}

.form-field label span,
.sparrow-form-card h3 span {
    color: #cc3366;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    border: 1px solid #efb5cc;
    border-radius: 9px;
    padding: 10px;
    font-size: 14px;
    box-sizing: border-box;
}

.form-field select {
    border-color: #999;
    border-radius: 0;
}

.form-field textarea {
    min-height: 110px;
}

.help-text {
    margin-top: -4px;
    font-size: 13px;
    color: #666;
}

.product-section {
    background: #fafafa;
    border-left: 5px solid #f1d6e2;
    padding: 16px;
    margin: 18px 0;
}

.repeater-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 14px;
}

.agreement-line {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.7;
}

.agreement-line input {
    margin-top: 6px;
}

.primary-btn,
.secondary-btn,
.remove-item-btn {
    border: 0;
    border-radius: 9px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
}

.primary-btn {
    background: #d88fac;
    color: #fff;
}

.secondary-btn {
    background: #fff;
    border: 2px solid #444;
    color: #111;
}

.remove-item-btn {
    background: #fff;
    border: 2px solid #444;
    color: #111;
    margin-top: 5px;
}

.form-actions {
    margin-top: 20px;
}

.admin-only-card {
    border-color: #cbb5ef;
}

@media (max-width: 700px) {
    .form-grid.two {
        grid-template-columns: 1fr;
    }
}

.backyard-orders-table {
    width: 100%;
    border-collapse: collapse;
}

.backyard-orders-table th {
    background: #f6d0e0;
    padding: 10px;
    text-align: left;
}

.backyard-orders-table td {
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.status-pill {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    color: var(--sparrow-purple-dark);
    background: var(--sparrow-soft-pink);
    border: 1px solid var(--sparrow-border);
}

.orders-list-card {
    padding: 0;
    overflow: hidden;
}

.orders-list-card h2 {
    padding: 16px 18px 0;
}

.orders-dashboard-wrap {
    overflow-x: auto;
}

.orders-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.orders-dashboard-table thead th {
    background: #f8d5e4;
    border-bottom: 1px solid #eca7c4;
    color: #3e2632;
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 11px 12px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.orders-dashboard-table tbody td {
    border-bottom: 1px solid #f6cddd;
    padding: 12px;
    vertical-align: top;
}

.orders-dashboard-table tbody tr:hover {
    background: #fff8fb;
}

.select-col {
    width: 55px;
    text-align: center;
}

.actions-col {
    width: 90px;
}

.order-col {
    width: 140px;
}

.customer-col {
    width: 190px;
}

.items-col {
    min-width: 220px;
}

.payment-col {
    width: 235px;
}

.delivery-col {
    width: 130px;
}

.status-col {
    width: 155px;
}

.open-pill {
    background: #d783ad;
    border-radius: 999px;
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 7px 15px;
    text-decoration: none;
}

.open-pill:hover {
    background: #c96f9c;
    color: #fff;
}

.order-number {
    color: #27131d;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 24px;
}

.order-date {
    color: #111;
    font-size: 12px;
}

.customer-name {
    color: #111;
    font-weight: 500;
}

.customer-sub {
    color: #666;
    font-size: 11px;
    margin-top: 4px;
}

.item-line {
    color: #111;
    line-height: 1.45;
    margin-bottom: 3px;
}

/* Soft color rows */
.orders-dashboard-table td.sparrow-payment-cell .sparrow-payment-summary-collected {
    background: #eef7ff;
}

.orders-dashboard-table td.sparrow-payment-cell .sparrow-payment-summary-blessing {
    background: #f5efff;
}

.orders-dashboard-table td.sparrow-payment-cell .sparrow-payment-summary-discount {
    background: #f3e8ff;
    border: 1px solid #d8b4fe;
}

.orders-dashboard-table td.sparrow-payment-cell .sparrow-payment-summary-discount span,
.orders-dashboard-table td.sparrow-payment-cell .sparrow-payment-summary-discount strong {
    color: #6b21a8;
}

/* Balance full-width row */
.orders-dashboard-table td.sparrow-payment-cell .sparrow-payment-summary-balance {
    grid-column: 1 / -1;
}

.orders-dashboard-table td.sparrow-payment-cell .sparrow-payment-summary-balance-open {
    background: #fff1f1;
    border: 1px solid #f0b6b6;
}

.orders-dashboard-table td.sparrow-payment-cell .sparrow-payment-summary-balance-open span,
.orders-dashboard-table td.sparrow-payment-cell .sparrow-payment-summary-balance-open strong {
    color: #b32d2e;
}

.orders-dashboard-table td.sparrow-payment-cell .sparrow-payment-summary-balance-paid {
    background: #e9f8ee;
    border: 1px solid #bfe8ca;
}

.orders-dashboard-table td.sparrow-payment-cell .sparrow-payment-summary-balance-paid span,
.orders-dashboard-table td.sparrow-payment-cell .sparrow-payment-summary-balance-paid strong {
    color: #16723a;
}


.delivery-pill {
    background: #eef7ff;
    border: 1px solid #abd8ff;
    border-radius: 999px;
    color: #075985;
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 13px;
}

.delivery-not-set {
    background: #fff;
    border-color: #e5e5e5;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.10);
    color: #555;
}

.money-status-pill,
.order-status-pill {
    border-radius: 999px;
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 7px;
    padding: 5px 11px;
}

.money-status-pill {
    margin-right: 6px;
}

.unpaid-pill {
    background: #fff3f2;
    border: 1px solid #ffb8b0;
    color: #d92d20;
}

.paid-pill {
    background: #ecfdf3;
    border: 1px solid #a6e7bc;
    color: #067647;
}

.order-status-pill {
    background: #e9f5ff;
    border: 1px solid #a8d7ff;
    color: #075ca8;
}

.status-delivered,
.status-completed {
    background: #ecfdf3;
    border-color: #a6e7bc;
    color: #067647;
}

.status-packaging,
.status-pressing,
.status-products-ordered {
    background: #fff8e6;
    border-color: #f5d98d;
    color: #8a5a00;
}

.status-order-approved {
    background: #f0ecff;
    border-color: #cabdff;
    color: #5b3db0;
}

.dashboard-approval-alert {
    border: 2px solid #d892aa;
    background: #fff4f8;
}

.dashboard-approval-alert h2 {
    margin-bottom: 6px;
    color: #8a3f57;
}

.dashboard-approval-alert-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.dashboard-approval-alert-item {
    padding: 12px 14px;
    border: 1px solid #edc4d2;
    border-radius: 14px;
    background: #ffffff;
}

.dashboard-approval-alert-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 14px;
    margin-bottom: 6px;
}

.dashboard-approval-alert-note {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fce8ef;
}

.dashboard-approval-alert-date {
    color: #725f69;
    font-size: 13px;
}

@media (max-width: 900px) {
    .orders-dashboard-table thead {
        display: none;
    }

    .orders-dashboard-table,
    .orders-dashboard-table tbody,
    .orders-dashboard-table tr,
    .orders-dashboard-table td {
        display: block;
        width: 100%;
    }

    .orders-dashboard-table tr {
        border-bottom: 2px solid #f1bfd2;
        padding: 12px;
    }

    .orders-dashboard-table tbody td {
        border-bottom: 0;
        padding: 7px 0;
    }

    .orders-dashboard-table tbody td::before {
        color: #7b425b;
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.04em;
        margin-bottom: 4px;
        text-transform: uppercase;
    }

    .select-col {
        text-align: left;
    }

    .payment-box {
        max-width: 260px;
    }
}

/* Pretty individual colors */
.orders-dashboard-table .sparrow-payment-total {
    background: #fff8fb !important;
    border-color: #f7dce8 !important;
}

.orders-dashboard-table .sparrow-payment-total span,
.orders-dashboard-table .sparrow-payment-total strong {
    color: #7d5a6a !important;
}

.orders-dashboard-table .sparrow-payment-collected {
    background: #eef7ff !important;
    border-color: #cbe7ff !important;
}

.orders-dashboard-table .sparrow-payment-collected span,
.orders-dashboard-table .sparrow-payment-collected strong {
    color: #075985 !important;
}

.orders-dashboard-table .sparrow-payment-blessing {
    background: #f5efff !important;
    border-color: #dcc9ff !important;
}

.orders-dashboard-table .sparrow-payment-blessing span,
.orders-dashboard-table .sparrow-payment-blessing strong {
    color: #5e35b1 !important;
}

.orders-dashboard-table .sparrow-payment-discount {
    background: #f3e8ff !important;
    border-color: #d8b4fe !important;
}

.orders-dashboard-table .sparrow-payment-discount span,
.orders-dashboard-table .sparrow-payment-discount strong {
    color: #6b21a8 !important;
}

/* Balance is full width */
.orders-dashboard-table .sparrow-payment-balance {
    grid-column: 1 / -1 !important;
}

.orders-dashboard-table .sparrow-payment-balance-open {
    background: #fff1f1 !important;
    border-color: #f0b6b6 !important;
}

.orders-dashboard-table .sparrow-payment-balance-open span,
.orders-dashboard-table .sparrow-payment-balance-open strong {
    color: #b32d2e !important;
}

.orders-dashboard-table .sparrow-payment-balance-paid {
    background: #e9f8ee !important;
    border-color: #bfe8ca !important;
}

.orders-dashboard-table .sparrow-payment-balance-paid span,
.orders-dashboard-table .sparrow-payment-balance-paid strong {
    color: #16723a !important;
}

/* Dashboard / Orders Pretty Payment Mini Card */
.sparrow-payment-cell {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 250px !important;
    vertical-align: top !important;
}

.sparrow-payment-mini-card {
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #f2c6d8 !important;
    border-radius: 14px !important;
    padding: 8px !important;
    box-shadow: 0 2px 8px rgba(125, 90, 106, 0.10) !important;
    box-sizing: border-box !important;
}

.sparrow-payment-mini-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
}

.sparrow-payment-mini-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 5px !important;
    width: 100% !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    box-sizing: border-box !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

.sparrow-payment-mini-row span,
.sparrow-payment-mini-row strong {
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

/* Soft pretty colors */
.sparrow-payment-total {
    background: #fff8fb !important;
    border-color: #f7dce8 !important;
}

.sparrow-payment-total span,
.sparrow-payment-total strong {
    color: #7d5a6a !important;
}

.sparrow-payment-collected {
    background: #eef7ff !important;
    border-color: #cbe7ff !important;
}

.sparrow-payment-collected span,
.sparrow-payment-collected strong {
    color: #075985 !important;
}

.sparrow-payment-blessing {
    background: #f5efff !important;
    border-color: #dcc9ff !important;
}

.sparrow-payment-blessing span,
.sparrow-payment-blessing strong {
    color: #5e35b1 !important;
}

.sparrow-payment-discount {
    background: #f3e8ff !important;
    border-color: #d8b4fe !important;
}

.sparrow-payment-discount span,
.sparrow-payment-discount strong {
    color: #6b21a8 !important;
}

.sparrow-payment-balance {
    grid-column: 1 / -1 !important;
}

.sparrow-payment-balance-open {
    background: #fff1f1 !important;
    border-color: #f0b6b6 !important;
}

.sparrow-payment-balance-open span,
.sparrow-payment-balance-open strong {
    color: #b32d2e !important;
}

.sparrow-payment-balance-paid {
    background: #e9f8ee !important;
    border-color: #bfe8ca !important;
}

.sparrow-payment-balance-paid span,
.sparrow-payment-balance-paid strong {
    color: #16723a !important;
}

/* Dashboard smaller, softer status pills */
.dashboard-status-cell {
    min-width: 145px;
    vertical-align: top;
}

.dashboard-mini-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 5px 0;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    border: 1px solid transparent;
}

.dashboard-order-status-pill {
    background: #eef7ff;
    border-color: #cbe7ff;
    color: #075985;
}

.dashboard-approval-pill {
    display: flex;
}

.dashboard-approval-waiting,
.dashboard-approval-pending {
    background: #fff8e6;
    border-color: #f4dca3;
    color: #7a4b00;
}

.dashboard-approval-approved {
    background: #e9f8ee;
    border-color: #bfe8ca;
    color: #16723a;
}

.dashboard-approval-changes_requested {
    background: #fff1f1;
    border-color: #f2c3c3;
    color: #9f2a2a;
}

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.dashboard-kpi-card {
    background: #ffffff;
    border: 1px solid var(--sparrow-border);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 4px 16px rgba(70, 35, 60, 0.05);
}

.dashboard-kpi-card span {
    display: block;
    color: var(--sparrow-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.dashboard-kpi-card strong {
    color: var(--sparrow-purple-dark);
    display: block;
    font-size: 18px;
    line-height: 1.1;
}

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

@media (max-width: 480px) {
    .dashboard-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-kpi-blue {
    background: #f4faff;
    border-color: #cbe7ff;
}

.dashboard-kpi-blue strong {
    color: #075985;
}

.dashboard-kpi-purple {
    background: #faf7ff;
    border-color: #dcc9ff;
}

.dashboard-kpi-purple strong {
    color: #5e35b1;
}

.dashboard-kpi-green {
    background: #f3fbf5;
    border-color: #bfe8ca;
}

.dashboard-kpi-green strong {
    color: #16723a;
}

.dashboard-kpi-gold {
    background: #fffaf0;
    border-color: #f4dca3;
}

.dashboard-kpi-gold strong {
    color: #7a4b00;
}

.dashboard-kpi-soft-red {
    background: #fff7f7;
    border-color: #f2c3c3;
}

.dashboard-kpi-soft-red strong {
    color: #9f2a2a;
}

.pricing-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.pricing-toolbar input,
.pricing-toolbar select {
    min-width: 220px;
}

.pricing-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-left: auto;
}

.pricing-page-btn {
    background: #fff8fb;
    color: var(--sparrow-purple-dark);
    border: 1px solid var(--sparrow-border);
}

.pricing-page-btn.is-active {
    background: var(--sparrow-purple);
    color: #fff;
}

.pricing-row-hidden {
    display: none !important;
}

.pricing-table {
    border: 1px solid #f2c6d8;
    border-radius: 14px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
}

.pricing-table thead th {
    background: #f8dbe8;
    color: #5f4050;
    font-weight: 400;
    border-bottom: 1px solid #eeb8cd;
    padding: 10px 8px;
}

.pricing-table tbody td {
    border-bottom: 1px solid #f7dce8;
    padding: 8px;
    vertical-align: middle;
}

.pricing-table tbody tr:nth-child(even) td {
    background: #fff8fb;
}

.pricing-table tbody tr:hover td {
    background: #fdf0f6;
}

.pricing-table input[type="text"],
.pricing-table input[type="number"] {
    width: 100%;
    min-height: 32px;
    border: 1px solid #e9bfd0;
    border-radius: 8px;
    padding: 5px 8px;
    box-sizing: border-box;
}

.pricing-profit {
    color: #16723a;
    font-weight: 500;
    white-space: nowrap;
}

@media (max-width: 782px) {
    .pricing-table thead {
        display: none;
    }

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

    .pricing-table tr {
        margin-bottom: 12px;
        border: 1px solid #f2c6d8;
        border-radius: 14px;
        padding: 10px;
    }

    .pricing-table td {
        border-bottom: 1px solid #f7dce8;
        padding: 7px 0;
    }

    .pricing-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: 500;
        color: #7d5a6a;
        text-transform: uppercase;
        margin-bottom: 3px;
    }
}

.dashboard-items-cell {
    line-height: 1.45;
    min-width: 220px;
}

.dashboard-items-cell br {
    margin-bottom: 3px;
}

.dashboard-items-cell {
    color: #111;
    font-size: 12px;
}

.sparrow-payment-method-pill {
    display: inline-flex;
    width: fit-content;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f7e8ee;
    color: #7a3f55;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.dashboard-payment-method-pill {
    background: #f7e8ee;
    color: #7a3f55;
}

.dashboard-kpi-groups {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
    align-items: start;
}

.dashboard-kpi-group-card {
    background: #ffffff;
    border: 1px solid var(--sparrow-border);
    border-radius: 18px;
    padding: 14px 16px 16px;
    box-shadow: 0 8px 30px rgba(70, 35, 60, 0.05);
}

.dashboard-kpi-group-card summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--sparrow-purple-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
    list-style-position: inside;
}

.dashboard-kpi-group-card summary::marker {
    color: var(--sparrow-purple);
}

.dashboard-kpi-grid-small {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-kpi-grid-small .dashboard-kpi-card {
    margin: 0;
    min-height: 76px;
}

.dashboard-kpi-group-card {
    align-self: start;
}

.dashboard-kpi-group-card:not([open]) {
    padding-bottom: 14px;
}

.dashboard-kpi-group-card:not([open]) .dashboard-kpi-grid {
    display: none;
}

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

@media (max-width: 600px) {
    .dashboard-kpi-grid-small {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .dashboard-kpi-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .dashboard-kpi-groups {
        grid-template-columns: 1fr;
    }
}

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

.dashboard-kpi-settings-box {
    border: 1px solid var(--sparrow-border);
    border-radius: 16px;
    padding: 16px;
    background: #ffffff;
}

.dashboard-kpi-settings-box h4 {
    margin: 0 0 12px;
    color: var(--sparrow-purple-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dashboard-kpi-settings-box label {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: normal;
    margin-bottom: 8px;
}

.dashboard-kpi-settings-box input[type="checkbox"] {
    width: auto;
}

@media (max-width: 800px) {
    .dashboard-kpi-settings-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-kpi-money-green {
    background: #e9f8ee;
    border-color: #bfe8ca;
}

.dashboard-kpi-money-green {
    background: #e9f8ee;
    border-color: #bfe8ca;
    color: #16723a;
}

.dashboard-kpi-money-blue {
    background: #eef7ff;
    border-color: #abd8ff;
    color: #075985;
}

.dashboard-kpi-money-purple {
    background: #f5efff;
    border-color: #d8b4fe;
    color: #6b21a8;
}

.dashboard-kpi-money-pink {
    background: #fff0f8;
    border-color: #efb5d2;
    color: #864b7b;
}

.dashboard-kpi-money-red {
    background: #fff1f1;
    border-color: #f0b6b6;
    color: #b32d2e;
}

.dashboard-kpi-card span {
    font-size: 11px !important;
    font-weight: 700;
    line-height: 1.2;
}

.dashboard-kpi-card strong {
    font-size: 15px !important;
    line-height: 1.2;
}

.customer-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.customer-address-box h3 {
    margin-top: 0;
}

.customer-unmerge-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--sparrow-border);
}

.customer-unmerge-row:last-child {
    border-bottom: 0;
}

.profit-loss-kpi-grid {
    margin-bottom: 18px;
}

.profit-loss-filter-form .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profit-loss-table th,
.profit-loss-table td {
    white-space: nowrap;
}

.profit-loss-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.profit-loss-breakdown-grid > div {
    background: #fff8fc;
    border: 1px solid var(--sparrow-border);
    border-radius: 14px;
    padding: 14px;
}

@media (max-width: 1000px) {
    .profit-loss-filter-form .form-grid,
    .profit-loss-breakdown-grid {
        grid-template-columns: 1fr;
    }
}

.profit-loss-kpi-wrap {
    margin-bottom: 18px;
}

.profit-loss-feature-kpis {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.profit-loss-hero-card {
    min-height: 105px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profit-loss-hero-card span {
    font-size: 12px !important;
}

.profit-loss-hero-card strong {
    font-size: 24px !important;
}

@media (max-width: 800px) {
    .profit-loss-feature-kpis {
        grid-template-columns: 1fr;
    }
}

/* Supplier Splitter */
.supplier-totals-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.supplier-notes-field {
    margin-top: 12px;
}

.supplier-save-note {
    color: var(--sparrow-muted);
    margin: 14px 0 20px;
    font-weight: bold;
}

.supplier-items-heading {
    border-top: 1px solid var(--sparrow-border);
    margin-top: 22px;
    padding-top: 18px;
}

.supplier-splitter-table input,
.supplier-splitter-table select {
    min-width: 110px;
}

.supplier-splitter-table input[name="description[]"] {
    min-width: 230px;
}

.supplier-splitter-table input[name="goes_with_order_number[]"] {
    min-width: 120px;
}

.supplier-splitter-table input[name="quantity[]"] {
    min-width: 70px;
}

.supplier-splitter-table input[type="checkbox"] {
    width: auto;
    min-width: 0;
}

.supplier-center {
    text-align: center;
    vertical-align: middle;
}

.supplier-mini-items {
    background: #fffbfd;
    border: 1px solid var(--sparrow-border);
    border-radius: 14px;
    padding: 12px 14px;
}

.supplier-mini-items ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

.supplier-mini-items li {
    margin-bottom: 5px;
}

.supplier-remove-row {
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .supplier-totals-grid {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

@media (max-width: 700px) {
    .supplier-totals-grid {
        grid-template-columns: 1fr;
    }
}

/* Supplier Splitter status labels */
.supplier-status-pill {
    border: 1px solid var(--sparrow-border);
}

.supplier-status-draft {
    background: var(--sparrow-soft-pink);
    color: var(--sparrow-purple-dark);
}

.supplier-status-reviewed {
    background: #f7f1ff;
    color: #5e3b7c;
    border-color: #d8c8ef;
}

.supplier-status-ready-to-apply {
    background: #f0fff4;
    color: #276738;
    border-color: #b9dfc3;
}

.supplier-actions-cell {
    min-width: 290px;
}

.supplier-actions-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.supplier-status-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex-wrap: nowrap;
}

.supplier-status-select {
    width: 130px;
    min-width: 130px;
    padding: 6px 10px;
}

.supplier-actions-inline .button-small,
.supplier-status-form .button-small {
    padding: 5px 10px;
    line-height: 1.2;
    white-space: nowrap;
}

/* Supplier Splitter preview order matching */
.supplier-match-found {
    background: #f0fff4;
    color: #276738;
    border: 1px solid #b9dfc3;
}

.supplier-match-missing {
    background: #fff0f0;
    color: #8a2525;
    border: 1px solid #efb9b9;
}

.supplier-match-detail {
    margin-top: 5px;
    font-size: 11px;
}

/* Gang Sheet Split Calculator */
.gang-sheet-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.gang-sheet-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
    margin: 16px 0 20px;
}

.gang-sheet-summary div {
    background: #fffbfd;
    border: 1px solid var(--sparrow-border);
    border-radius: 14px;
    padding: 12px;
}

.gang-sheet-summary span {
    display: block;
    color: var(--sparrow-muted);
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.gang-sheet-summary strong {
    color: var(--sparrow-purple-dark);
}

.gang-sheet-table input,
.gang-sheet-table select {
    min-width: 95px;
}

.gang-sheet-table .gang-description {
    min-width: 220px;
}

.gang-sheet-table .gang-order {
    min-width: 130px;
}

.gang-row-area,
.gang-row-cost {
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .gang-sheet-grid,
    .gang-sheet-summary {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

@media (max-width: 700px) {
    .gang-sheet-grid,
    .gang-sheet-summary {
        grid-template-columns: 1fr;
    }
}

/* Supplier Splitter preview summary */
.supplier-preview-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 12px;
    margin: 16px 0 20px;
}

.supplier-preview-summary div {
    background: #fffbfd;
    border: 1px solid var(--sparrow-border);
    border-radius: 14px;
    padding: 12px;
}

.supplier-preview-summary span {
    display: block;
    color: var(--sparrow-muted);
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.supplier-preview-summary strong {
    color: var(--sparrow-purple-dark);
    font-size: 14px;
}

@media (max-width: 900px) {
    .supplier-preview-summary {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}

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

/* Collapsible Supplier Splitter sections */
.supplier-collapsible summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--sparrow-purple-dark);
    font-weight: bold;
    font-size: 18px;
    padding-bottom: 10px;
    margin-bottom: 0;
    background: linear-gradient(to right, #d9b4d0, transparent);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
}

.supplier-collapsible summary::-webkit-details-marker {
    display: none;
}

.supplier-collapsible summary::after {
    content: "Open";
    font-size: 11px;
    color: var(--sparrow-purple);
    border: 1px solid var(--sparrow-border);
    border-radius: 999px;
    padding: 4px 8px;
    background: #ffffff;
}

.supplier-collapsible[open] summary {
    margin-bottom: 14px;
}

.supplier-collapsible[open] summary::after {
    content: "Close";
}

.supplier-collapsible summary small {
    color: var(--sparrow-muted);
    font-size: 11px;
    font-weight: normal;
}

@media (max-width: 700px) {
    .supplier-collapsible summary {
        display: block;
    }

    .supplier-collapsible summary small {
        display: block;
        margin-top: 4px;
    }

    .supplier-collapsible summary::after {
        float: right;
        margin-top: -22px;
    }
}

/* Supplier Splitter delete button */
.supplier-delete-form {
    margin: 0;
}

.supplier-delete-button {
    color: #8a2525;
    border-color: #efb9b9;
}

.supplier-delete-button:hover {
    background: #fff0f0;
    color: #8a2525;
}

/* Supplier Splitter application status */
.supplier-preview-summary-six {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
}

.supplier-applied-pill {
    background: #f7f1ff;
    color: #5e3b7c;
    border: 1px solid #d8c8ef;
}

.supplier-not-applied-pill {
    background: #fffbfd;
    color: var(--sparrow-purple-dark);
    border: 1px solid var(--sparrow-border);
}

@media (max-width: 1100px) {
    .supplier-preview-summary-six {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }
}

@media (max-width: 700px) {
    .supplier-preview-summary-six {
        grid-template-columns: 1fr;
    }
}

/* Supplier Splitter readiness message */
.supplier-readiness-message {
    border-radius: 14px;
    padding: 12px 14px;
    margin: 14px 0 20px;
    font-weight: normal;
}

.supplier-readiness-message strong {
    display: block;
    margin-bottom: 5px;
}

.supplier-readiness-message ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.supplier-readiness-message p {
    margin: 8px 0 0;
}

.supplier-readiness-ready {
    background: #f0fff4;
    border: 1px solid #b9dfc3;
    color: #276738;
}

.supplier-readiness-locked {
    background: #fff0f0;
    border: 1px solid #efb9b9;
    color: #8a2525;
}

.gallery-admin-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--sparrow-border);
    background: #ffffff;
    padding: 3px;
}

.gallery-empty-thumb {
    display: inline-flex;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px dashed var(--sparrow-border);
    color: var(--sparrow-muted);
    background: var(--sparrow-soft-pink);
    font-size: 11px;
}

.gallery-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff8fc;
    border: 1px solid var(--sparrow-border);
    color: var(--sparrow-purple-dark);
    font-size: 11px;
    font-weight: bold;
    line-height: 1.2;
}

.gallery-pill-green {
    background: #f0fff4;
    border-color: #b9dfc3;
    color: #276738;
}

.gallery-pill-muted {
    background: #f7f1f5;
    border-color: var(--sparrow-border);
    color: var(--sparrow-muted);
}

.gallery-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.gallery-image-card {
    border: 1px solid var(--sparrow-border);
    border-radius: 18px;
    background: #fffbfd;
    padding: 12px;
}

.gallery-image-card img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--sparrow-border);
    background: #ffffff;
    margin-bottom: 10px;
}

.gallery-image-card .form-actions {
    margin-top: 10px;
}

.gallery-photo-upload-card {
    border: 1px dashed var(--sparrow-border);
    border-radius: 18px;
    background: #fff8fc;
    padding: 14px;
    margin-bottom: 18px;
}

.gallery-photo-upload-card h3 {
    margin-top: 0;
    color: var(--sparrow-purple-dark);
}

.gallery-image-edit-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sparrow-border);
}

.gallery-image-edit-form label {
    display: block;
    margin-bottom: 9px;
    font-weight: bold;
    color: var(--sparrow-purple-dark);
}

.gallery-image-edit-form input[type="text"],
.gallery-image-edit-form input[type="number"],
.gallery-image-edit-form input[type="file"] {
    width: 100%;
    margin-top: 5px;
}

.gallery-bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--sparrow-border);
    border-radius: 14px;
    background: var(--sparrow-soft-pink);
}

.gallery-category-action {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gallery-category-action select {
    min-width: 190px;
}

.gallery-select-cell {
    width: 90px;
    min-width: 90px;
}

.gallery-select-control {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    cursor: pointer;
    font-size: 12px;
}

.gallery-select-control:last-child {
    margin-bottom: 0;
}

.gallery-select-control input[type="checkbox"],
.gallery-select-control input[type="radio"],
#gallery-select-all {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0;
    padding: 0;
}

.gallery-keep-control {
    color: var(--sparrow-purple-dark);
}

.gallery-bulk-toolbar button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gallery-bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid #eadfea;
    border-radius: 14px;
    background: #fff8fc;
}

.gallery-bulk-toolbar select {
    min-width: 175px;
}

.gallery-bulk-divider {
    width: 1px;
    height: 34px;
    background: #dfd3df;
}

.gallery-select-cell {
    width: 90px;
    min-width: 90px;
}

.gallery-select-control {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 7px;
    cursor: pointer;
    font-size: 12px;
}

.gallery-select-control:last-child {
    margin-bottom: 0;
}

.gallery-select-control input {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0;
    padding: 0;
}

.gallery-keep-control {
    color: #755174;
}

.gallery-bulk-toolbar button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 700px) {
    .gallery-bulk-toolbar {
        align-items: stretch;
    }

    .gallery-bulk-toolbar select,
    .gallery-bulk-toolbar button {
        width: 100%;
    }

    .gallery-bulk-divider {
        width: 100%;
        height: 1px;
    }
}

.marketing-admin-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--sparrow-border);
    background: #ffffff;
    padding: 3px;
}

.marketing-empty-thumb {
    display: inline-flex;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px dashed var(--sparrow-border);
    color: var(--sparrow-muted);
    background: var(--sparrow-soft-pink);
    font-size: 11px;
}

.marketing-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff8fc;
    border: 1px solid var(--sparrow-border);
    color: var(--sparrow-purple-dark);
    font-size: 11px;
    font-weight: bold;
    line-height: 1.2;
    margin-right: 4px;
    margin-bottom: 4px;
}

.marketing-pill-status {
    background: #f9f2f7;
}

.marketing-image-preview {
    margin: 8px 0 12px;
}

.marketing-image-preview img {
    width: 180px;
    max-width: 100%;
    border-radius: 16px;
    border: 1px solid var(--sparrow-border);
    background: #ffffff;
    padding: 4px;
}

.marketing-caption-preview {
    width: 100%;
    border: 1px solid var(--sparrow-border);
    border-radius: 14px;
    padding: 12px;
    background: #fffbfd;
    color: var(--sparrow-text);
    font-family: inherit;
    line-height: 1.45;
}

.analytics-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.analytics-stat-card,
.analytics-info-card {
    background: #ffffff;
    border: 1px solid var(--sparrow-border);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 6px 20px rgba(70, 35, 60, 0.05);
}

.analytics-stat-card strong {
    display: block;
    margin-top: 6px;
    font-size: 28px;
    color: var(--sparrow-purple-dark);
}

.analytics-stat-label {
    color: var(--sparrow-muted);
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.analytics-info-card h2 {
    margin-top: 0;
    color: var(--sparrow-purple-dark);
}

.analytics-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff8fc;
    border: 1px solid var(--sparrow-border);
    color: var(--sparrow-purple-dark);
    font-size: 11px;
    font-weight: bold;
    line-height: 1.2;
}

.order-request-card {
    margin-bottom: 18px;
}

.request-summary-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.request-summary-panel {
    padding: 14px;
    border: 1px solid #ead4df;
    border-radius: 14px;
    background: #fffafd;
}

.request-summary-panel h3 {
    margin: 0 0 10px;
    color: #854766;
    font-size: 16px;
}

.request-summary-details {
    display: grid;
    gap: 7px;
    font-size: 14px;
}

.request-summary-details strong {
    margin-right: 4px;
}

@media (max-width: 700px) {
    .request-summary-panels {
        grid-template-columns: 1fr;
    }
}

.request-item-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(240px, 1fr)
    );
    gap: 14px;
    margin-top: 12px;
}

.request-item-card {
    padding: 14px;
    border: 1px solid #ead4df;
    border-radius: 14px;
    background: #fffafd;
}

.request-item-card h3 {
    margin: 0 0 12px;
    color: #854766;
    font-size: 16px;
}

.request-item-details {
    display: grid;
    gap: 6px;
    font-size: 14px;
}

.request-item-notes {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid #f0dce6;
    font-size: 14px;
}

.request-reference-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

.request-reference {
    width: 150px;
}

.request-reference > strong {
    display: block;
    margin-bottom: 6px;
    color: #854766;
    font-size: 13px;
}

.request-reference .order-request-image {
    display: block;
    width: 150px;
    height: 130px;
    object-fit: contain;
    border: 1px solid #ead4df;
    border-radius: 10px;
    background: #ffffff;
}

.request-reference .button {
    width: 100%;
    text-align: center;
}

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

    .request-reference-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .request-reference {
        width: auto;
    }

    .request-reference .order-request-image {
        width: 100%;
        height: 120px;
    }
}

@media (max-width: 400px) {
    .request-reference-list {
        grid-template-columns: 1fr;
    }
}

.order-request-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 5px 11px;
    border-radius: 999px;
    background: #fff8fc;
    border: 1px solid var(--sparrow-border);
    color: var(--sparrow-purple-dark);
    font-size: 12px;
    font-weight: bold;
}

.order-request-image {
    display: block;
    width: 190px;
    max-width: 100%;
    margin-top: 8px;
    border-radius: 16px;
    border: 1px solid var(--sparrow-border);
    background: #ffffff;
    padding: 4px;
}

.order-request-admin-form {
    margin-top: 16px;
    border-top: 1px solid var(--sparrow-border);
    padding-top: 14px;
}

.order-request-delete-form {
    margin-top: 10px;
}

.button-danger {
    background: #fff4f6;
    color: #9d3146;
    border: 1px solid #e8b6c0;
}

.button-danger:hover {
    background: #ffe8ee;
    color: #84263a;
}

.order-request-action-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.order-request-delete-form {
    margin: 0;
}

.button-danger {
    background: #fff4f6;
    color: #9d3146;
    border: 1px solid #e8b6c0;
}

.button-danger:hover {
    background: #ffe8ee;
    color: #84263a;
}

.order-request-inline-form,
.order-request-delete-form {
    margin: 0;
}

.converted-requests-card {
    margin-top: 20px;
}

.converted-requests-summary {
    cursor: pointer;
    font-weight: bold;
    color: var(--sparrow-purple-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.converted-requests-summary span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fff8fc;
    border: 1px solid var(--sparrow-border);
    font-size: 12px;
}

.converted-requests-list {
    margin-top: 14px;
    overflow-x: auto;
}

.converted-requests-table {
    width: 100%;
    border-collapse: collapse;
}

.converted-requests-table th,
.converted-requests-table td {
    padding: 10px;
    border-bottom: 1px solid var(--sparrow-border);
    text-align: left;
    vertical-align: top;
}

.converted-requests-table th {
    color: var(--sparrow-purple-dark);
    font-size: 12px;
}

.converted-small-text {
    font-size: 12px;
    margin-top: 3px;
}

.converted-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.converted-actions form {
    margin: 0;
}

/* Gift Order */
.gift-order-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--sparrow-border);
}

.gift-order-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 260px;
    margin: 0;
    cursor: pointer;
}

.gift-order-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
    padding: 0;
    accent-color: var(--sparrow-purple);
}

.gift-order-toggle span {
    color: var(--sparrow-text);
    line-height: 1.3;
}

.gift-order-toggle small {
    display: block;
    margin-top: 2px;
    color: var(--sparrow-muted);
    font-size: 12px;
    font-weight: normal;
}

.gift-order-pill {
    background: #f3ecff;
    color: var(--sparrow-purple-dark);
    border: 1px solid #d5bced;

.supplies-summary-numbers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0 20px;
}

.supplies-summary-numbers > div {
    padding: 16px;
    border: 1px solid #eadfea;
    border-radius: 14px;
    background: #fff8fc;
    text-align: center;
}

.summary-number {
    display: block;
    margin-bottom: 4px;
    color: #755174;
    font-size: 28px;
    font-weight: 700;
}

.low-number {
    color: #a35c6c;
}

.low-stock-list {
    display: grid;
    gap: 9px;
}

.low-stock-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff4f4;
}

.low-stock-item span {
    color: #7d4d57;
    font-size: 13px;
}

.supply-row-low {
    background: #fff8f8;
}

.low-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f8d9df;
    color: #7d3545;
    font-size: 11px;
    font-weight: 700;
}

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

@media (max-width: 700px) {
    .supplies-table thead {
        display: none;
    }
}

/* Supplies / Inventory */
    .supplies-table,
    .supplies-table tbody,
    .supplies-table tr,
    .supplies-table td {
        display: block;
        width: 100%;
    }

    .supplies-table tr {
        margin-bottom: 14px;
        padding: 12px;
        border: 1px solid #eadfea;
        border-radius: 14px;
        background: #fff;
    }

    .supplies-table tr.supply-row-low {
        background: #fff8f8;
    }

    .supplies-table td {
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 10px;
        padding: 7px 0;
        border: 0;
    }

    .supplies-table td::before {
        content: attr(data-label);
        color: #755174;
        font-size: 12px;
        font-weight: 700;
    }

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

    .low-stock-item {
        flex-direction: column;
        gap: 3px;
    }
}

.supplies-page-layout {
    display: grid;
    grid-template-columns:
        minmax(320px, 0.8fr)
        minmax(0, 1.7fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}

.supplies-left-column {
    display: grid;
    gap: 20px;
}

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

.supplies-right-column {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.supplies-inventory-card {
    min-width: 0;
}

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

.supply-delete-form {
    display: inline-block;
    margin-left: 5px;
}

.supply-delete-button {
    background: #a94455;
    border-color: #a94455;
    color: #fff;
}

.supply-delete-button:hover {
    background: #873645;
    border-color: #873645;
}

.supply-quick-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 0px;
	margin-bottom: 2px;
}

.supply-quick-controls form {
    margin: 0;
}

.supply-quick-button {
    min-width: 38px;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.2;
}

/* Customer History Print Page */
body.customer-print-page {
    background: var(--sparrow-bg);
    color: var(--sparrow-text);
}

body.customer-print-page .print-page {
    width: 8.5in;
    min-height: 11in;
    margin: 0 auto;
    padding: 0.4in 0.45in 0.4in 0.6in;
    background: #ffffff;
    color: var(--sparrow-text);
    box-sizing: border-box;
}

body.customer-print-page .print-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

body.customer-print-page .report-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sparrow-purple);
}

body.customer-print-page .report-header h1 {
    margin: 0;
    color: var(--sparrow-purple-dark);
    font-size: 22px;
}

body.customer-print-page .section {
    margin-top: 10px;
}

body.customer-print-page .section h2 {
    margin: 0 0 7px;
    padding-bottom: 4px;
    color: var(--sparrow-purple-dark);
    font-size: 15px;
    border-bottom: 1px solid #ead7e5;
}

body.customer-print-page .customer-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 7px;
}

body.customer-print-page .customer-field {
    padding: 7px 8px;
    background: #fffafd;
    border: 1px solid var(--sparrow-border);
    border-radius: 8px;
}

body.customer-print-page .label {
    display: block;
    margin-bottom: 2px;
    color: var(--sparrow-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.customer-print-page .value {
    font-size: 12px;
    font-weight: 700;
}

body.customer-print-page .kpi-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 6px;
}

body.customer-print-page .kpi {
    padding: 5px 7px;
    background: #fffafd;
    border: 1px solid var(--sparrow-border);
    border-radius: 8px;
    text-align: center;
}

body.customer-print-page .kpi span {
    display: block;
    margin-bottom: 1px;
    color: var(--sparrow-muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

body.customer-print-page .kpi strong {
    display: block;
    color: var(--sparrow-purple-dark);
    font-size: 14px;
    line-height: 1.1;
}

body.customer-print-page .notes-box {
    min-height: 38px;
    padding: 8px;
    background: #fffafd;
    border: 1px solid var(--sparrow-border);
    border-radius: 8px;
    white-space: pre-wrap;
}

body.customer-print-page .order-card {
    margin: 0 0 10px;
    padding: 9px;
    border: 1px solid var(--sparrow-border);
    border-radius: 8px;
    break-inside: avoid;
    page-break-inside: avoid;
}

body.customer-print-page .order-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 2px solid #d9a8b8;
}

body.customer-print-page .order-heading h3 {
    margin: 0;
    color: var(--sparrow-purple-dark);
    font-size: 14px;
}

body.customer-print-page .order-date {
    color: var(--sparrow-muted);
    font-size: 11px;
    white-space: nowrap;
}

body.customer-print-page .order-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 6px;
}

body.customer-print-page .order-summary div {
    padding: 4px 6px;
    background: #fff8fc;
    border-radius: 6px;
}

body.customer-print-page table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

body.customer-print-page th {
    padding: 5px 6px;
    background: #f4e7ec;
    color: var(--sparrow-purple-dark);
    border: 1px solid #ddc8d0;
    font-size: 9px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

body.customer-print-page td {
    padding: 5px 6px;
    border: 1px solid #e6d9de;
    font-size: 10px;
    vertical-align: top;
}

body.customer-print-page .muted {
    color: var(--sparrow-muted);
}

@media screen and (max-width: 900px) {
    body.customer-print-page .print-page {
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 16px;
    }

    body.customer-print-page .customer-grid,
    body.customer-print-page .kpi-grid,
    body.customer-print-page .order-summary {
        grid-template-columns: 1fr;
    }
}

@media print {
    body.customer-print-page {
        background: #ffffff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.customer-print-page .print-actions {
        display: none !important;
    }

    body.customer-print-page .print-page {
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
    }

    body.customer-print-page .order-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    @page {
        size: letter;
        margin:
            0.4in
            0.4in
            0.4in
            0.75in;
    }
	
	body.customer-print-page .sidebar,
body.customer-print-page .topbar {
    display: none !important;
}

body.customer-print-page .backyard-shell,
body.customer-print-page .main-shell,
body.customer-print-page .page {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
}

@media print {
    body.customer-print-page
    .customer-history-new-page {
        break-before: page;
        page-break-before: always;
    }
}
        </style>
    </head>
    <?php
$script_name = basename($_SERVER['SCRIPT_NAME'] ?? '');
$body_class = '';

if ($script_name === 'order-view.php') {
    $body_class = 'order-view-page';
}

if ($script_name === 'customer-print.php') {
    $body_class = 'customer-print-page';
}
?>

<body class="<?php echo sparrow_escape($body_class); ?>">

    <div class="backyard-shell">
        <aside class="sidebar">
            <div class="sidebar-brand">
                <div class="sidebar-brand-title">Sparrow Backyard</div>
                <div class="sidebar-brand-subtitle">Private workspace</div>
            </div>

            <nav class="sidebar-nav">
    <?php sparrow_sidebar_link('/backyard/dashboard.php', 'Dashboard'); ?>
	<?php sparrow_sidebar_link('/backyard/order-requests.php', 'Order Requests'); ?>
	<?php sparrow_sidebar_link('/backyard/messages.php', 'Messages'); ?>
    <?php sparrow_sidebar_link('/backyard/order-new.php', 'New Order'); ?>
	<?php sparrow_sidebar_link('/backyard/trash.php', 'Trash Orders'); ?>
	<?php sparrow_sidebar_link('/backyard/marketing.php', 'Marketing Posts'); ?>
	<?php sparrow_sidebar_link('/backyard/products.php', 'Shop'); ?>
	<?php sparrow_sidebar_link('/backyard/gallery.php', 'Gallery'); ?>
	<?php sparrow_sidebar_link('/backyard/supplies.php', 'Supplies/Inventory'); ?>
	<?php sparrow_sidebar_link('/backyard/pricing.php', 'Pricing/Cost Table'); ?>
    <?php sparrow_sidebar_link('/backyard/supplier-splitter.php', 'Supplier Splitter'); ?>
    <?php sparrow_sidebar_link('/backyard/customers.php', 'Customer History'); ?>
    <?php sparrow_sidebar_link('/backyard/profit-loss.php', 'Profit / Loss'); ?>
	<?php sparrow_sidebar_link('/backyard/import.php', 'Import'); ?>
	<?php sparrow_sidebar_link('/backyard/analytics.php', 'Analytics'); ?>
	<?php sparrow_sidebar_link('/backyard/backups.php', 'Backup & Restore'); ?>
	<?php sparrow_sidebar_link('/backyard/settings.php', 'Settings'); ?>
</nav>
        </aside>

        <div class="main-shell">
            <header class="topbar">
                <div class="page-title"><?php echo sparrow_escape($page_title); ?></div>

                <nav class="topbar-actions">
					<a href="<?php echo sparrow_escape(sparrow_url('/index.php')); ?>">Main Site</a> | 
                    <a href="<?php echo sparrow_escape(sparrow_url('/logout.php')); ?>">Logout</a>
                </nav>
            </header>

            <main class="page">
    <?php
}

function sparrow_backyard_footer(): void
{
    ?>
            </main>
        </div>
    </div>

    </body>
    </html>
    <?php
}

function sparrow_sidebar_link(string $path, string $label): void
{
    $current_path = $_SERVER['SCRIPT_NAME'] ?? '';
    $full_path = sparrow_url($path);

    $is_active = str_ends_with($current_path, $path);

    if ($path === '#') {
        $full_path = '#';
        $is_active = false;
    }

    ?>
    <a
        href="<?php echo sparrow_escape($full_path); ?>"
        class="<?php echo $is_active ? 'is-active' : ''; ?>"
    >
        <?php echo sparrow_escape($label); ?>
    </a>
    <?php
}

if (!function_exists('sparrow_format_phone_number')) {
    function sparrow_format_phone_number($phone): string
    {
        $phone = trim((string) $phone);

        if ($phone === '') {
            return '';
        }

        $digits = preg_replace('/\D+/', '', $phone);

        if (strlen($digits) === 10) {
            return '(' . substr($digits, 0, 3) . ') ' . substr($digits, 3, 3) . '-' . substr($digits, 6);
        }

        if (strlen($digits) === 11 && substr($digits, 0, 1) === '1') {
            return '(' . substr($digits, 1, 3) . ') ' . substr($digits, 4, 3) . '-' . substr($digits, 7);
        }

        return $phone;
    }
}
