:root {
    color-scheme: dark;
    --orderpal-mint: #36e3a4;
    --orderpal-ink: #10231f;
    --orderpal-green: #36e3a4;
    --orderpal-bg: #0d1916;
    --orderpal-surface: #14231f;
    --orderpal-border: #2b3f36;
    --orderpal-text: #e8f0eb;
    --orderpal-muted: #a3b4aa;
    --orderpal-hover: #1d3028;
    --orderpal-input: #0d1916;
    --orderpal-shadow: 0 8px 24px rgb(0 0 0 / 18%);
    --bs-body-bg: var(--orderpal-bg);
    --bs-body-color: var(--orderpal-text);
    --bs-secondary-color: var(--orderpal-muted);
    --bs-border-color: var(--orderpal-border);
}

html[data-theme="light"] {
    color-scheme: light;
    --orderpal-green: #087f5b;
    --orderpal-bg: #f5f8f6;
    --orderpal-surface: #ffffff;
    --orderpal-border: #dbe5de;
    --orderpal-text: #10231f;
    --orderpal-muted: #586b61;
    --orderpal-hover: #edf3ef;
    --orderpal-input: #ffffff;
    --orderpal-shadow: 0 8px 24px rgb(24 32 40 / 7%);
    --bs-body-bg: var(--orderpal-bg);
    --bs-body-color: var(--orderpal-text);
    --bs-secondary-color: var(--orderpal-muted);
    --bs-border-color: var(--orderpal-border);
}

html, body {
    min-height: 100%;
    margin: 0;
    font-family: Inter, "Segoe UI Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--orderpal-bg);
}

html { font-size: 14px; }

body { color: var(--orderpal-text); background: var(--orderpal-bg); font-size: 1rem; line-height: 1.5; transition: background-color .18s ease, color .18s ease; }
a { color: var(--orderpal-green); }
a:hover { color: color-mix(in srgb, var(--orderpal-green), white 18%); }

button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid #3ecf8e; outline-offset: 2px; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #3ecf8e; }
.invalid { outline: 1px solid #ed6a75; }
.validation-message { color: #ed6a75; }

.auth-required-card {
    width: min(100%, 420px);
    padding: 2rem;
    border: 1px solid #303439;
    border-radius: .8rem;
    background: #17191c;
    text-align: center;
    box-shadow: 0 24px 70px rgb(0 0 0 / 24%);
}
.auth-required-icon {
    width: 2.8rem;
    height: 2.8rem;
    display: grid;
    place-items: center;
    margin: 0 auto .9rem;
    border-radius: .7rem;
    color: #3ecf8e;
    background: #1d3a2d;
}
.auth-required-card h1 { margin: 0 0 .5rem; color: #f0f2f3; font-size: 1.25rem; }
.auth-required-card p { margin: 0 0 1.2rem; color: #9299a1; font-size: .8rem; }
.auth-required-link { display: inline-flex; align-items: center; gap: .45rem; color: #3ecf8e; font-size: .8rem; font-weight: 650; text-decoration: none; }
.auth-required-link:hover { color: #72e0ae; }

.blazor-error-boundary {
    background: #3b2024;
    border: 1px solid #673239;
    border-radius: .5rem;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

::selection { color: #092217; background: #3ecf8e; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #111315; }
::-webkit-scrollbar-thumb { border: 2px solid #111315; border-radius: 99px; background: #363a40; }
::-webkit-scrollbar-thumb:hover { background: #4b5158; }

@media (max-width: 700px) {
    html { font-size: 16px; }
}

.theme-toggle {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .35rem .6rem;
    border: 1px solid var(--orderpal-border);
    border-radius: .42rem;
    color: var(--orderpal-muted);
    background: var(--orderpal-surface);
    font-size: .7rem;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.theme-toggle:hover { color: var(--orderpal-text); border-color: #3ecf8e; }
.theme-toggle i { color: var(--orderpal-green); }

/* Shared page surfaces and controls */
.app-content { color: var(--orderpal-text); }
.app-content h1, .app-content h2, .app-content h3, .app-content h4, .app-content h5 { color: var(--orderpal-text); }
.app-content .card, .app-content .modal-content, .app-content .dropdown-menu,
.app-content .list-group-item, .app-content .accordion-item {
    color: var(--orderpal-text);
    border-color: var(--orderpal-border);
    background-color: var(--orderpal-surface);
}
.app-content .card-header, .app-content .card-footer, .app-content .accordion-button { color: var(--orderpal-text); border-color: var(--orderpal-border); background-color: var(--orderpal-hover); }
.app-content .bg-light, .app-content .bg-white { color: var(--orderpal-text) !important; background-color: var(--orderpal-surface) !important; }
.app-content .card-header.bg-white, .app-content .card-footer.bg-white { background-color: var(--orderpal-hover) !important; }
.app-content .table-light, .app-content .table-light > th, .app-content .table-light > td,
.app-content .table-light > :not(caption) > * > * { --bs-table-bg: var(--orderpal-hover); --bs-table-color: var(--orderpal-text); color: var(--orderpal-text); border-color: var(--orderpal-border); }
.app-content .bg-light .text-dark, .app-content .bg-white .text-dark { color: var(--orderpal-text) !important; }
.app-content .bg-light-subtle { color: var(--orderpal-text) !important; background-color: var(--orderpal-hover) !important; }
.app-content .table {
    --bs-table-color: var(--orderpal-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--orderpal-border);
    --bs-table-striped-color: var(--orderpal-text);
    --bs-table-striped-bg: color-mix(in srgb, var(--orderpal-surface), var(--orderpal-text) 3%);
    --bs-table-hover-color: var(--orderpal-text);
    --bs-table-hover-bg: var(--orderpal-hover);
    color: var(--orderpal-text);
}
.app-content .table > :not(caption) > * > * { color: inherit; border-color: var(--orderpal-border); }
.app-content .form-control, .app-content .form-select, .app-content .input-group-text {
    color: var(--orderpal-text);
    border-color: var(--orderpal-border);
    background-color: var(--orderpal-input);
}
.app-content .form-control::placeholder { color: var(--orderpal-muted); opacity: .8; }
.app-content .form-control:focus, .app-content .form-select:focus {
    color: var(--orderpal-text);
    border-color: var(--orderpal-green);
    background-color: var(--orderpal-input);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--orderpal-green), transparent 80%);
}
.order-status { display: inline-flex; align-items: center; padding: .23rem .52rem; border-radius: 999px; font-size: .68rem; font-weight: 650; white-space: nowrap; }
.customer-status-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .16rem .5rem; border-radius: 999px; font-size: .66rem; font-weight: 650; white-space: nowrap; color: #4a5665; background: #e9edf1; }
.customer-status-pill.is-vip { color: #8a5a00; background: #fff1cc; }
.customer-status-pill.is-blocked { color: #a33b45; background: #fde9ea; }
.order-status-live-cart { color: #0f6b5c; background: #dcf5ef; }
.order-status-new { color: #145bb5; background: #e8f1ff; }
.order-status-to-pack { color: #80530a; background: #fff2d2; }
.order-status-shipped { color: #6941a5; background: #f0eaff; }
.order-status-completed { color: #13734d; background: #e3f6ed; }
.order-status-cancelled { color: #a33b45; background: #fde9ea; }
.order-status-returned { color: #4a5665; background: #e9edf1; }
.app-content .form-select option { color: var(--orderpal-text); background: var(--orderpal-surface); }
.app-content .btn-primary { --bs-btn-bg: #16865e; --bs-btn-border-color: #16865e; --bs-btn-hover-bg: #11734f; --bs-btn-hover-border-color: #11734f; --bs-btn-active-bg: #0e6545; --bs-btn-active-border-color: #0e6545; --bs-btn-disabled-bg: #16865e; --bs-btn-disabled-border-color: #16865e; --bs-btn-disabled-opacity: .45; }
.app-content .btn-outline-primary { --bs-btn-color: var(--orderpal-green); --bs-btn-border-color: var(--orderpal-green); --bs-btn-hover-bg: var(--orderpal-green); --bs-btn-hover-border-color: var(--orderpal-green); --bs-btn-hover-color: #fff; }
.app-content .btn-secondary, .app-content .btn-outline-secondary { --bs-btn-color: var(--orderpal-text); --bs-btn-bg: var(--orderpal-hover); --bs-btn-border-color: var(--orderpal-border); --bs-btn-hover-color: var(--orderpal-text); --bs-btn-hover-bg: var(--orderpal-surface); --bs-btn-hover-border-color: var(--orderpal-muted); }
.app-content .text-muted, .app-content .text-secondary { color: var(--orderpal-muted) !important; }
.app-content hr { border-color: var(--orderpal-border); opacity: 1; }
.app-content .alert { border-color: var(--orderpal-border); }
.page-form-workspace { max-width: 1020px; margin: 0 auto; }
.page-form-card { max-width: 760px; border-color: var(--orderpal-border); background: var(--orderpal-surface); box-shadow: var(--orderpal-shadow); }
.page-form-card .card-body { padding: clamp(1rem, 3vw, 1.6rem); }
.page-form-card .form-label { margin-bottom: .4rem; color: var(--orderpal-text); font-size: .76rem; font-weight: 600; }
.page-form-card .form-text { margin-top: .35rem; color: var(--orderpal-muted); font-size: .68rem; }
.page-form-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--orderpal-border); }
.app-content .form-check-input { border-color: var(--orderpal-border); background-color: var(--orderpal-input); }
.app-content .form-check-input:checked { border-color: #16865e; background-color: #16865e; }
.app-content .form-check-label { color: var(--orderpal-text); font-size: .76rem; }
.page-workspace { max-width: 1480px; margin: 0 auto; }
.page-toolbar, .page-table-card { border-color: var(--orderpal-border); background: var(--orderpal-surface); }
.page-search { position: relative; width: min(100%, 420px); }
.page-search > i { position: absolute; z-index: 1; top: 50%; left: .75rem; color: var(--orderpal-muted); transform: translateY(-50%); }
.page-search .form-control { padding-left: 2.2rem; }
.page-table-card { overflow: hidden; }
.page-table-card .table { min-width: 680px; }
.page-table-card th { padding: .8rem 1rem; color: var(--orderpal-muted); border-bottom: 1px solid var(--orderpal-border); font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.page-table-card td { padding: .85rem 1rem; border-color: var(--orderpal-border); font-size: .78rem; }
.table-primary-text { color: var(--orderpal-text); font-weight: 650; }
.type-code { padding: .18rem .4rem; border: 1px solid var(--orderpal-border); border-radius: .3rem; color: var(--orderpal-muted); background: var(--orderpal-hover); font-size: .68rem; }
.effect-chip { display: inline-flex; padding: .2rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 700; }
.effect-increment, .effect-release { color: #36bd83; background: rgb(62 207 142 / 10%); }
.effect-decrement { color: #ef9b65; background: rgb(239 155 101 / 11%); }
.effect-reserve { color: #80aaff; background: rgb(128 170 255 / 11%); }
.status-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 650; }
.status-chip > span { width: .38rem; height: .38rem; border-radius: 50%; }
.status-active { color: #36bd83; background: rgb(62 207 142 / 10%); }
.status-active > span { background: #3ecf8e; }
.status-inactive { color: var(--orderpal-muted); background: var(--orderpal-hover); }
.status-inactive > span { background: #858b94; }
.page-loading, .page-empty { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; color: var(--orderpal-muted); text-align: center; }
.page-loading { flex-direction: row; }
.page-empty.compact { min-height: 180px; }
.page-empty-icon { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid var(--orderpal-border); border-radius: .75rem; color: var(--orderpal-green); background: var(--orderpal-hover); font-size: 1.05rem; }
.page-empty h2 { margin: .25rem 0 0; color: var(--orderpal-text); font-size: 1rem; font-weight: 650; }
.page-empty p { max-width: 390px; margin: 0 0 .3rem; color: var(--orderpal-muted); font-size: .77rem; }
.page-dialog-backdrop { position: fixed; z-index: 1100; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgb(0 0 0 / 58%); backdrop-filter: blur(3px); }
.page-dialog { width: min(100%, 420px); padding: 1.4rem; border: 1px solid var(--orderpal-border); border-radius: .8rem; color: var(--orderpal-text); background: var(--orderpal-surface); box-shadow: var(--orderpal-shadow); }
.page-dialog-icon { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; margin-bottom: .9rem; border-radius: .6rem; }
.page-dialog-icon.danger { color: #ef6a75; background: rgb(239 106 117 / 12%); }
.page-dialog h2 { margin: 0 0 .4rem; font-size: 1rem; font-weight: 650; }
.page-dialog p { color: var(--orderpal-muted); font-size: .76rem; line-height: 1.55; }
.page-dialog-actions { display: flex; justify-content: flex-end; gap: .55rem; margin-top: 1.15rem; }
.business-list { border: 1px solid var(--orderpal-border); border-radius: .65rem; overflow: hidden; box-shadow: var(--orderpal-shadow); }
.business-list .list-group-item { padding: 1rem 1.1rem; border-color: var(--orderpal-border); background: var(--orderpal-surface); }
.business-avatar { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--orderpal-border); border-radius: .6rem; color: var(--orderpal-green); background: var(--orderpal-hover); }
.business-name, .business-meta { display: block; }
.business-name { color: var(--orderpal-text); font-size: .85rem; font-weight: 650; }
.business-meta { margin-top: .12rem; color: var(--orderpal-muted); font-size: .68rem; }
.free-plan-note { display: flex; align-items: center; gap: .65rem; padding: .85rem; border: 1px solid color-mix(in srgb, var(--orderpal-green), transparent 72%); border-radius: .55rem; color: var(--orderpal-green); background: color-mix(in srgb, var(--orderpal-green), transparent 94%); }
.free-plan-note > i { font-size: 1rem; }
.free-plan-note span, .free-plan-note strong, .free-plan-note small { display: block; }
.free-plan-note strong { color: var(--orderpal-text); font-size: .75rem; }
.free-plan-note small { margin-top: .12rem; color: var(--orderpal-muted); font-size: .68rem; }
.metric-surface { border-color: var(--orderpal-border); background: var(--orderpal-surface); box-shadow: var(--orderpal-shadow); }
.metric-caption-label { color: var(--orderpal-muted); font-size: .72rem; font-weight: 600; }
.app-content .metric-surface .fs-3 { margin-top: .25rem; color: var(--orderpal-text); letter-spacing: -.04em; }
.app-content .container-fluid.py-4, .app-content .container.py-4 { max-width: 1540px; margin-right: auto; margin-left: auto; }
.app-content .container-fluid.py-4 > .d-flex.justify-content-between,
.app-content .container-fluid.py-4 > .d-flex.flex-wrap.justify-content-between,
.app-content .container.py-4 > .d-flex.justify-content-between { align-items: flex-end !important; gap: 1rem; }
.app-content .container-fluid.py-4 > .d-flex.justify-content-between h1,
.app-content .container-fluid.py-4 > .d-flex.justify-content-between h3,
.app-content .container-fluid.py-4 > .d-flex.flex-wrap.justify-content-between h1,
.app-content .container-fluid.py-4 > .d-flex.flex-wrap.justify-content-between h3,
.app-content .container.py-4 > .d-flex.justify-content-between h1 { margin-bottom: .25rem; font-size: clamp(1.45rem, 2.1vw, 1.85rem); font-weight: 650; letter-spacing: -.045em; }
.app-content .container-fluid.py-4 > .d-flex.justify-content-between p,
.app-content .container-fluid.py-4 > .d-flex.flex-wrap.justify-content-between p,
.app-content .container.py-4 > .d-flex.justify-content-between p { color: var(--orderpal-muted) !important; font-size: .8rem; }
@media (max-width: 640px) {
    .app-content .container-fluid.py-4 > .d-flex.justify-content-between,
    .app-content .container-fluid.py-4 > .d-flex.flex-wrap.justify-content-between,
    .app-content .container.py-4 > .d-flex.justify-content-between { align-items: flex-start !important; }
}

.admin-workspace { max-width: 1540px; margin: 0 auto; }
.admin-user-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.admin-metric-card { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .7rem; padding: 1rem; border: 1px solid var(--orderpal-border); border-radius: .65rem; background: var(--orderpal-surface); box-shadow: var(--orderpal-shadow); }
.admin-metric-icon { width: 2.25rem; height: 2.25rem; grid-row: span 2; display: grid; place-items: center; border-radius: .6rem; color: #85a8ff; background: rgb(115 151 255 / 12%); }
.admin-metric-icon.confirmed, .admin-metric-icon.active { color: var(--orderpal-green); background: color-mix(in srgb, var(--orderpal-green), transparent 90%); }
.admin-metric-icon.pending { color: #e7ae55; background: rgb(231 174 85 / 12%); }
.admin-metric-label { color: var(--orderpal-muted); font-size: .68rem; }
.admin-metric-card strong { color: var(--orderpal-text); font-size: 1.45rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.15; }
.admin-metric-card small { grid-column: 1 / -1; margin-top: .65rem; color: var(--orderpal-muted); font-size: .64rem; }
.admin-users-panel { overflow: hidden; border-color: var(--orderpal-border); background: var(--orderpal-surface); box-shadow: var(--orderpal-shadow); }
.admin-users-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--orderpal-border); }
.admin-users-toolbar h2 { margin: 0; color: var(--orderpal-text); font-size: .9rem; font-weight: 650; }
.admin-users-toolbar p { margin: .2rem 0 0; color: var(--orderpal-muted); font-size: .68rem; }
.admin-user-controls { display: flex; align-items: center; gap: .55rem; }
.admin-user-search { width: min(40vw, 280px); position: relative; }
.admin-user-search > i { position: absolute; z-index: 1; top: 50%; left: .7rem; color: var(--orderpal-muted); transform: translateY(-50%); }
.admin-user-search .form-control { padding-left: 2rem; font-size: .72rem; }
.admin-user-filter { width: 180px; font-size: .72rem; }
.admin-users-table { min-width: 850px; font-size: .72rem; }
.admin-users-table > thead th { padding: .72rem .8rem; color: var(--orderpal-muted); border-bottom: 1px solid var(--orderpal-border); font-size: .61rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.admin-users-table > tbody td { padding: .7rem .8rem; color: var(--orderpal-muted); border-color: var(--orderpal-border); white-space: nowrap; }
.admin-users-table > tbody tr:hover > * { color: var(--orderpal-text); background-color: var(--orderpal-hover); }
.admin-user-primary { display: block; max-width: 220px; overflow: hidden; color: var(--orderpal-text); font-weight: 600; text-overflow: ellipsis; }
.admin-users-table td:first-child small { min-height: .8rem; display: block; margin-top: .15rem; color: #d8a657; font-size: .62rem; }
.admin-user-status { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .5rem; border-radius: 999px; font-size: .64rem; font-weight: 650; }
.admin-user-status > span { width: .38rem; height: .38rem; border-radius: 50%; background: currentColor; }
.admin-user-status.is-active { color: #34bd82; background: rgb(62 207 142 / 10%); }
.admin-user-status.is-pending { color: #dca94f; background: rgb(220 169 79 / 11%); }
.admin-user-status.is-banned { color: #ef737d; background: rgb(239 115 125 / 11%); }
.admin-user-status.is-anonymous { color: #91a2b8; background: rgb(145 162 184 / 12%); }
.admin-provider { display: inline-flex; align-items: center; gap: .4rem; color: var(--orderpal-text); }
.admin-provider i { color: var(--orderpal-muted); }
.admin-user-id { color: var(--orderpal-muted); font-size: .65rem; }
.admin-users-pagination { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .75rem 1rem; border-top: 1px solid var(--orderpal-border); color: var(--orderpal-muted); font-size: .68rem; }
.admin-users-pagination > div { display: flex; align-items: center; gap: .6rem; }
.admin-users-pagination .btn { display: inline-flex; align-items: center; gap: .35rem; font-size: .67rem; }
.admin-page-number { min-width: 72px; text-align: center; }
.admin-loading { min-height: 230px; display: flex; align-items: center; justify-content: center; gap: .6rem; color: var(--orderpal-muted); font-size: .78rem; }
.admin-empty { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; }
.admin-empty > span { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid var(--orderpal-border); border-radius: .7rem; color: var(--orderpal-green); background: var(--orderpal-hover); }
.admin-empty h3 { margin: .8rem 0 .25rem; color: var(--orderpal-text); font-size: .9rem; }
.admin-empty p, .admin-data-note { color: var(--orderpal-muted); font-size: .7rem; }
.admin-data-note { display: flex; align-items: center; gap: .4rem; margin: .8rem 0 0; }
.admin-data-note i { color: var(--orderpal-green); }
.admin-setup-alert code { color: inherit; }
html[data-theme="light"] .admin-users-table td:first-child small { color: #986000; }

@media (max-width: 900px) {
    .admin-user-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-users-toolbar { align-items: flex-start; flex-direction: column; }
    .admin-user-controls { width: 100%; }
    .admin-user-search { width: auto; flex: 1; }
}
@media (max-width: 540px) {
    .admin-user-metrics { gap: .55rem; }
    .admin-metric-card { padding: .75rem; }
    .admin-user-controls { align-items: stretch; flex-direction: column; }
    .admin-user-filter { width: 100%; }
    .admin-users-pagination { align-items: flex-start; flex-direction: column; }
}
.app-content .pagination { --bs-pagination-bg: var(--orderpal-surface); --bs-pagination-color: var(--orderpal-text); --bs-pagination-border-color: var(--orderpal-border); --bs-pagination-hover-bg: var(--orderpal-hover); --bs-pagination-hover-color: var(--orderpal-text); --bs-pagination-hover-border-color: var(--orderpal-border); --bs-pagination-active-bg: #16865e; --bs-pagination-active-border-color: #16865e; }

/* Dark mode for pages with custom light dashboard and authentication styles. */
html[data-theme="dark"] .dashboard-page { color: #e5e7eb; }
html[data-theme="dark"] .dashboard-metric-card, html[data-theme="dark"] .dashboard-panel { border-color: #303439; background: #17191c; box-shadow: 0 5px 18px rgb(0 0 0 / 12%); }
html[data-theme="dark"] .dashboard-page h1, html[data-theme="dark"] .dashboard-page h2,
html[data-theme="dark"] .dashboard-page .metric-value, html[data-theme="dark"] .dashboard-table td strong,
html[data-theme="dark"] .dashboard-page .list-empty strong, html[data-theme="dark"] .dashboard-page .activity-main strong { color: #e7e9eb; }
html[data-theme="dark"] .dashboard-page p, html[data-theme="dark"] .dashboard-page .metric-label,
html[data-theme="dark"] .dashboard-page .dashboard-date, html[data-theme="dark"] .dashboard-page .dashboard-table td,
html[data-theme="dark"] .dashboard-page .dashboard-footnote { color: #a0a6ae; }
html[data-theme="dark"] .dashboard-page .dashboard-table th { color: #8b929b; border-color: #303439; }
html[data-theme="dark"] .dashboard-page .dashboard-table td, html[data-theme="dark"] .dashboard-page .activity-row { border-color: #292c30; }
html[data-theme="dark"] .dashboard-page .panel-link { color: #55d79c; }
html[data-theme="dark"] .dashboard-page .panel-link:hover { color: #8ae6b8; }
html[data-theme="dark"] .dashboard-page .chart-empty, html[data-theme="dark"] .dashboard-page .dashboard-loading { color: #959ca4; }
html[data-theme="dark"] .dashboard-page .dashboard-header .btn-primary { color: #10231b; background: #3ecf8e; border-color: #3ecf8e; }
html[data-theme="dark"] .dashboard-page .metric-icon-cyan { color: #76d8e4; background: #17373c; }
html[data-theme="dark"] .app-content .apexcharts-text { fill: #aab0b8 !important; }
html[data-theme="dark"] .app-content .apexcharts-gridline { stroke: #303439 !important; }
html[data-theme="dark"] .app-content .apexcharts-tooltip, html[data-theme="dark"] .app-content .apexcharts-xaxistooltip { color: #e5e7eb; border-color: #3b4046; background: #202327; box-shadow: var(--orderpal-shadow); }
html[data-theme="dark"] .app-content .apexcharts-tooltip-title { border-color: #3b4046; background: #292d32; }
html[data-theme="dark"] .customer-status-pill { color: #bbc5d0; background: #2d333a; }
html[data-theme="dark"] .customer-status-pill.is-vip { color: #f2ce80; background: #40361e; }
html[data-theme="dark"] .customer-status-pill.is-blocked { color: #f29aa1; background: #422429; }
html[data-theme="dark"] .order-status-live-cart { color: #7fe0cd; background: #163b35; }
html[data-theme="dark"] .order-status-new { color: #93beff; background: #1e3451; }
html[data-theme="dark"] .order-status-to-pack { color: #f2ce80; background: #40361e; }
html[data-theme="dark"] .order-status-shipped { color: #c5a8fa; background: #35264d; }
html[data-theme="dark"] .order-status-completed { color: #80dfb0; background: #173a2a; }
html[data-theme="dark"] .order-status-cancelled { color: #f29aa1; background: #422429; }
html[data-theme="dark"] .order-status-returned { color: #bbc5d0; background: #2d333a; }
html[data-theme="dark"] .settings-icon-green { color: #7be4ae; background: #173b2b; }
html[data-theme="dark"] .settings-icon-blue { color: #8cc9fb; background: #19364c; }
html[data-theme="dark"] .settings-icon-amber { color: #f3ca71; background: #40351d; }
html[data-theme="dark"] .settings-icon-purple { color: #c6a7fb; background: #33264a; }

/* Light theme for both app and account shells. */
html[data-theme="light"] .app-shell { color: #22262b; background: #f6f7f9; }
html[data-theme="light"] .app-sidebar { color: #252a30; border-color: #e1e4e8; background: #fff; }
html[data-theme="light"] .sidebar-brand-row, html[data-theme="light"] .sidebar-bottom { border-color: #e7e9ec; }
html[data-theme="light"] .brand-lockup, html[data-theme="light"] .brand-name { color: #24282d; }
html[data-theme="light"] .sidebar-collapse { color: #68717b; }
html[data-theme="light"] .sidebar-collapse:hover, html[data-theme="light"] .workspace-switcher:hover { background: #f1f3f5; }
html[data-theme="light"] .workspace-switcher, html[data-theme="light"] .upgrade-card { color: #282d32; border-color: #e1e4e8; background: #fff; }
html[data-theme="light"] .workspace-copy strong, html[data-theme="light"] .account-copy strong, html[data-theme="light"] .upgrade-card strong { color: #292e34; }
html[data-theme="light"] .workspace-copy small, html[data-theme="light"] .account-copy small, html[data-theme="light"] .upgrade-card small { color: #737b84; }
html[data-theme="light"] .nav-section-heading { color: #858c94; }
html[data-theme="light"] .app-sidebar .sidebar-nav .nav-link { color: #59616a; }
html[data-theme="light"] .app-sidebar .sidebar-nav .nav-link i { color: #78818b; }
html[data-theme="light"] .app-sidebar .sidebar-nav .nav-link:hover { color: #242a30; background: #f1f3f5; }
html[data-theme="light"] .app-sidebar .sidebar-nav .nav-link.active { color: #075e43; border-color: #c9e7d8; background: #e8f6ee; }
html[data-theme="light"] .app-sidebar .sidebar-nav .nav-link.active i { color: #087f5b; }
html[data-theme="light"] .account-logout { color: #737b84; }
html[data-theme="light"] .account-logout:hover { color: #242a30; background: #eef0f2; }
html[data-theme="light"] .app-topbar { border-color: #e1e4e8; background: #fff; }
html[data-theme="light"] .context-workspace, html[data-theme="light"] .system-status { color: #68717b; }
html[data-theme="light"] .context-current { color: #242a30; }
html[data-theme="light"] .topbar-icon, html[data-theme="light"] .topbar-user { color: #626b75; border-color: #e1e4e8; background: #fff; }
html[data-theme="light"] .app-footer { color: #78818b; border-color: #e1e4e8; }
html[data-theme="light"] .auth-shell { color: #242a30; background: radial-gradient(ellipse at 50% 45%, rgb(8 127 91 / 7%), transparent 52%), #f6f7f9; }
html[data-theme="light"] .auth-topbar, html[data-theme="light"] .auth-footer { border-color: #e1e4e8; }
html[data-theme="light"] .auth-brand { color: #242a30; }
html[data-theme="light"] .auth-topbar-note, html[data-theme="light"] .auth-footer { color: #737b84; }
html[data-theme="light"] .auth-card { border-color: #e1e4e8; background: #fff; box-shadow: 0 24px 70px rgb(24 32 40 / 9%); }
html[data-theme="light"] .auth-intro { border-color: #e1e4e8; background: radial-gradient(ellipse at 0% 100%, rgb(8 127 91 / 9%), transparent 55%), #f8faf9; }
html[data-theme="light"] .auth-intro h1, html[data-theme="light"] .auth-form-heading h2, html[data-theme="light"] .auth-signup-copy strong { color: #20262b; }
html[data-theme="light"] .auth-intro > p, html[data-theme="light"] .auth-form-heading p, html[data-theme="light"] .auth-signup-copy p { color: #66717b; }
html[data-theme="light"] .auth-plan { border-color: #dce8e1; background: rgb(255 255 255 / 80%); }
html[data-theme="light"] .auth-plan-heading strong { color: #252b30; }
html[data-theme="light"] .auth-plan-heading small, html[data-theme="light"] .auth-plan li { color: #66716a; }
html[data-theme="light"] .auth-plan ul, html[data-theme="light"] .auth-divider { border-color: #e3e7e4; }
html[data-theme="light"] .auth-divider span { color: #737b84; background: #fff; }
html[data-theme="light"] .auth-field label { color: #424a52; }
html[data-theme="light"] .auth-field .form-control { color: #252a30; border-color: #d8dde2; background: #fff; }
html[data-theme="light"] .auth-field .form-control::placeholder { color: #89919a; }
html[data-theme="light"] .auth-create-account { color: #30363c; border-color: #d8dde2; background: #f4f6f7; }
html[data-theme="light"] .auth-create-account:hover { color: #17211c; border-color: #b9c5be; background: #e9eeeb; }
html[data-theme="light"] .auth-google-button { color: #30363c; border-color: #d8dde2; background: #fff; }
html[data-theme="light"] .auth-google-button:hover { color: #17211c; border-color: #b9c5be; background: #f4f6f7; }
html[data-theme="light"] .auth-message-error { color: #9f3540; border-color: #f0c4c8; background: #fff1f2; }
html[data-theme="light"] .auth-message-info { color: #176344; border-color: #bfe3ce; background: #effaf3; }
html[data-theme="light"] .auth-decoration span { border-color: #d4e4da; background: linear-gradient(145deg, rgb(8 127 91 / 9%), rgb(8 127 91 / 1%)); }
html[data-theme="light"] .auth-required-card { border-color: #e1e4e8; background: #fff; box-shadow: var(--orderpal-shadow); }
html[data-theme="light"] .auth-required-card h1 { color: #22262b; }
html[data-theme="light"] .auth-required-card p { color: #667085; }
html[data-theme="light"] .auth-required-icon { color: #087f5b; background: #e8f6ee; }
html[data-theme="light"] .app-content .bg-light, html[data-theme="light"] .app-content .bg-white { color: #22262b !important; background-color: #fff !important; }
html[data-theme="light"] .app-content .card-header.bg-white, html[data-theme="light"] .app-content .card-footer.bg-white { background-color: #f8f9fa !important; }
html[data-theme="light"] .app-content .table-light, html[data-theme="light"] .app-content .table-light > th,
html[data-theme="light"] .app-content .table-light > td, html[data-theme="light"] .app-content .table-light > :not(caption) > * > * { --bs-table-bg: #f1f3f5; --bs-table-color: #32383e; color: #32383e; border-color: #e1e4e8; }
html[data-theme="light"] .app-content .bg-light .text-dark, html[data-theme="light"] .app-content .bg-white .text-dark { color: #212529 !important; }
html[data-theme="light"] .app-content .bg-light-subtle { color: #22262b !important; background-color: #f1f3f5 !important; }
html[data-theme="light"] .app-content .apexcharts-text { fill: #59616a !important; }
html[data-theme="light"] .app-content .apexcharts-gridline { stroke: #e4e7eb !important; }

@media (max-width: 700px) {
    .theme-toggle span { display: none; }
    .theme-toggle { width: 2rem; padding: .35rem; }
}

/* Unhandled-error bar (App.razor), shared by every layout. Blazor switches it to display:block on an error. */
#blazor-error-ui { display: none; position: fixed; left: 0; bottom: 0; z-index: 1000; box-sizing: border-box; width: 100%; padding: .8rem 2.5rem .8rem 1.25rem; color: #f7f7f8; background: #292124; border-top: 1px solid #58333b; box-shadow: 0 -8px 24px rgb(0 0 0 / 20%); }
#blazor-error-ui .reload { color: #66d9a7; margin-left: .5rem; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* Hide / show the side menu (nav-toggle.js). Phones (700px and below) keep their own menu button. */
.nav-toggle { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; margin-right: .6rem; border: 1px solid var(--orderpal-border); border-radius: .45rem; background: transparent; color: var(--orderpal-muted); }
.nav-toggle:hover, .nav-toggle:focus-visible { color: var(--orderpal-text); border-color: var(--orderpal-green); }
.nav-toggle .when-hidden { display: none; }
html[data-nav="hidden"] .nav-toggle .when-hidden { display: inline; }
html[data-nav="hidden"] .nav-toggle .when-shown { display: none; }
@media (min-width: 701px) {
    html[data-nav="hidden"] .app-sidebar { display: none; }
}
@media (max-width: 700px) {
    .nav-toggle { display: none; }
}

/* Help chat bubble (SupportChat): lift it above bars pinned to the bottom of the screen. */
@media (max-width: 1100px) { body:has(.packing-finish) .chat-bubble { bottom: 7rem; } }
@media (max-width: 700px) { body:has(.cart-total-bar) .chat-bubble { bottom: 5.5rem; } }