/* ============================================================
   PAGE-SPECIFIC OVERRIDES
   Centralized styles migrated from isolated CSS files.
   ============================================================ */

.public-layout {
    min-height: 100vh;
    overflow-x: clip;
}

.responsive-page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.responsive-page-header-actions,
.responsive-form-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.responsive-form-actions {
    justify-content: flex-end;
}

.responsive-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.responsive-split-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.responsive-split-grid__main--7 {
    grid-column: span 7;
}

.responsive-split-grid__side--5 {
    grid-column: span 5;
}

.responsive-split-grid__main--8 {
    grid-column: span 8;
}

.responsive-split-grid__side--4 {
    grid-column: span 4;
}

.responsive-form-grid-2,
.responsive-metrics-grid-2,
.responsive-metrics-grid-3,
.responsive-metrics-grid-4,
.responsive-zone-grid,
.responsive-quick-actions-grid,
.responsive-chart-labels-7 {
    display: grid;
    gap: 1rem;
}

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

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

.responsive-metrics-grid-4,
.responsive-zone-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.responsive-quick-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.responsive-chart-labels-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
}

.app-content > *,
.glass-panel,
.card,
.card-body {
    max-width: 100%;
    min-width: 0;
}

.admin-form-page {
    width: min(100%, 42rem);
    min-width: 0;
}

.admin-form-page--narrow {
    max-width: 42rem;
}

.admin-form-page--comfortable {
    width: min(100%, 64rem);
}

.admin-form-page--user-add {
    width: min(100%, 74rem);
}

.user-add-form__section {
    display: grid;
    gap: 1.15rem;
    padding: 1.15rem;
    border: 1px solid rgba(var(--zj-outline-rgb), 0.15);
    border-radius: var(--zj-radius-xl);
    background: color-mix(in srgb, var(--zj-surface-container-low) 78%, transparent);
}

.user-add-form__section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-add-form__section-head > .material-symbols-outlined {
    display: grid;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 0.85rem;
    background: rgba(var(--zj-primary-rgb), 0.11);
    color: var(--zj-primary);
}

.user-add-form__section-head h2,
.user-add-form__section-head p {
    margin: 0;
}

.user-add-form__section-head h2 {
    color: var(--zj-on-surface);
    font-size: 1rem;
    font-weight: 900;
}

.user-add-form__section-head p {
    margin-top: 0.15rem;
    color: var(--zj-on-surface-variant);
    font-size: 0.82rem;
    line-height: 1.55;
}



@media (max-width: 680px) {
    .user-add-form__section {
        padding: 0.9rem;
    }
}

.user-add-options {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--zj-radius-lg, 0.75rem);
    background: color-mix(in srgb, var(--zj-primary, #0ea5e9) 6%, transparent);
    border: 1px solid rgba(var(--zj-primary-rgb, 14, 165, 233), 0.18);
}

.user-add-redirect-toggle {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--zj-on-surface, #1e293b);
    cursor: pointer;
}

.user-add-redirect-toggle input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--zj-primary, #0ea5e9);
    cursor: pointer;
}

.admin-create-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.7fr);
    gap: 1rem;
    align-items: start;
}

.admin-create-grid > * {
    min-width: 0;
}

.admin-form-page__form,
.admin-form-page__section,
.admin-permissions-panel,
.permission-modules {
    display: grid;
    gap: 1rem;
}

.admin-form-page__form {
    gap: 1.25rem;
}

.admin-form-page__section-title {
    margin: 0;
    color: var(--zj-on-surface);
    font-size: 1.15rem;
    font-weight: 900;
}

.admin-form-page__actions,
.admin-permissions-panel__actions,
.permission-modal__toolbar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.admin-form-page__actions {
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.admin-permissions-panel__head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
}

.admin-permissions-panel__hint {
    margin: 0.35rem 0 0;
    color: var(--zj-on-surface-variant);
    line-height: 1.7;
}

.permission-module {
    min-width: 0;
    padding: 0.95rem;
    border: 1px solid rgba(var(--zj-outline-rgb), 0.14);
    border-radius: var(--zj-radius-xl);
    background: var(--zj-surface-container-low);
}

.permission-module__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
}

.permission-module__header h3,
.permission-modal__header h2 {
    margin: 0;
    color: var(--zj-on-surface);
    font-size: 1rem;
    font-weight: 900;
}

.permission-module__header p,
.permission-modal__header p {
    margin: 0.25rem 0 0;
    color: var(--zj-on-surface-variant);
    line-height: 1.7;
}

.permission-module__actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.permission-module__count,
.permission-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    border-radius: var(--zj-radius-full);
    padding: 0.35rem 0.7rem;
    background: rgba(var(--zj-primary-rgb), 0.1);
    color: var(--zj-primary);
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.permission-badge {
    background: var(--zj-surface-container);
    color: var(--zj-on-surface-variant);
}

.permission-badge--allowed {
    background: rgba(34, 197, 94, 0.13);
    color: #15803d;
}

.permission-badge--required {
    background: rgba(245, 158, 11, 0.14);
    color: #9a5b00;
}

.permission-module__toggle,
.permission-page-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--zj-on-surface);
    font-weight: 800;
}

.permission-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.permission-modal__panel {
    width: min(58rem, 100%);
    max-height: min(42rem, calc(100dvh - 2rem));
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 1rem;
    overflow: hidden;
    padding: 1rem;
    border-radius: var(--zj-radius-2xl);
    background: var(--zj-surface);
    box-shadow: var(--zj-shadow-2xl);
}

.permission-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.permission-modal__toolbar {
    align-items: center;
}

.permission-module__table-wrap {
    min-width: 0;
    overflow: auto;
    border: 1px solid rgba(var(--zj-outline-rgb), 0.14);
    border-radius: var(--zj-radius-xl);
}

.permission-module__table {
    width: 100%;
    min-width: 42rem;
    border-collapse: collapse;
}

.permission-module__table th,
.permission-module__table td {
    padding: 0.8rem;
    border-bottom: 1px solid rgba(var(--zj-outline-rgb), 0.12);
    text-align: start;
    vertical-align: middle;
}

.permission-module__table th {
    color: var(--zj-on-surface-variant);
    background: var(--zj-surface-container-low);
    font-size: 0.78rem;
    font-weight: 900;
}

.permission-module__table code {
    direction: ltr;
    display: inline-block;
    overflow-wrap: anywhere;
}

@media (max-width: 980px) {
    .admin-create-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {

    .admin-form-page__actions,
    .admin-permissions-panel__head,
    .permission-modal__header,
    .permission-modal__toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-form-page__actions > *,
    .admin-permissions-panel__actions > *,
    .permission-module__actions > *,
    .permission-modal__toolbar > * {
        width: 100%;
        justify-content: center;
    }

    .permission-modal {
        padding: 0.6rem;
    }

    .permission-modal__panel {
        max-height: calc(100dvh - 1.2rem);
        padding: 0.75rem;
        border-radius: var(--zj-radius-xl);
    }

    .permission-module {
        padding: 0.8rem;
    }

    .permission-module__table {
        min-width: 36rem;
    }
}

.reports-page__stats {
    padding: 0 1.5rem 1.5rem;
}

.reports-page__content {
    padding: 1.5rem;
}

.reports-page__content-main {
    grid-column: span 8;
}

.reports-page__content-side {
    grid-column: span 4;
}

.reports-page__chart-legend,
.reports-page__donut-legend {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.reports-page__donut-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    height: 100%;
}

.reports-page__donut-meter {
    position: relative;
    width: 13rem;
    height: 13rem;
}

.health-aura {
    position: relative;
    display: grid;
    gap: 2rem;
    max-width: 72rem;
    margin-inline: auto;
    padding-bottom: 1rem;
}

.health-aura::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 24%, rgba(255, 107, 53, 0.14), transparent 28rem),
        radial-gradient(circle at 72% 42%, rgba(0, 106, 106, 0.13), transparent 24rem);
    opacity: 0.38;
}

.health-aura__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 0.4rem;
}

.health-aura__header h1 {
    margin: 0 0 0.5rem;
    color: var(--zj-on-surface);
    font-family: var(--zj-font-headline);
    font-size: clamp(2.7rem, 6vw, 4.6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
}

.health-aura__header p {
    margin: 0;
    max-width: 46rem;
    color: var(--zj-on-surface-variant);
    font-size: clamp(0.98rem, 1.5vw, 1.12rem);
    font-weight: 500;
    line-height: 1.9;
}

.health-aura__refresh {
    min-height: 3.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.95rem 1.7rem;
    border: 0;
    border-radius: 0.75rem;
    color: var(--zj-on-primary);
    background: #b32600;
    box-shadow: 0 18px 34px rgba(171, 53, 0, 0.22);
    font: inherit;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform var(--zj-transition-fast), filter var(--zj-transition-fast);
}

.health-aura__refresh:hover {
    filter: brightness(1.05);
}

.health-aura__refresh:active {
    transform: scale(0.98);
}

.health-aura__refresh:disabled {
    cursor: wait;
    opacity: 0.72;
}

.health-aura__services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.health-aura-service {
    position: relative;
    min-height: 17rem;
    display: grid;
    align-content: space-between;
    gap: 1.5rem;
    overflow: hidden;
    padding: 2rem;
    border-radius: 1.5rem;
    background: rgba(221, 228, 227, 0.62);
    border: 1px solid rgba(225, 191, 181, 0.18);
    box-shadow: 0 24px 56px rgba(43, 50, 50, 0.06);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.health-aura-service--wide {
    grid-column: span 2;
    min-height: 15rem;
}

.health-aura-service__halo {
    position: absolute;
    inset-inline-start: -1.5rem;
    top: -1.5rem;
    width: 7rem;
    height: 7rem;
    border-radius: 999px;
    background: rgba(0, 106, 106, 0.12);
    filter: blur(30px);
}

.health-aura-state--degraded .health-aura-service__halo {
    background: rgba(255, 186, 56, 0.18);
}

.health-aura-state--unhealthy .health-aura-service__halo {
    background: rgba(186, 26, 26, 0.14);
}

.health-aura-service header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.health-aura-service__icon {
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    border-radius: 1rem;
    color: var(--zj-secondary);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 2px 12px rgba(255, 255, 255, 0.65), 0 12px 24px rgba(43, 50, 50, 0.08);
    font-size: 1.9rem;
}

.health-aura-state--degraded .health-aura-service__icon {
    color: var(--zj-tertiary);
}

.health-aura-state--unhealthy .health-aura-service__icon {
    color: var(--zj-error);
}

.health-aura-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    color: #047857;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.22);
    font-size: 0.82rem;
    font-weight: 900;
}

.health-aura-chip i {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
}

.health-aura-chip.health-aura-state--degraded {
    color: #b45309;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.22);
}

.health-aura-chip.health-aura-state--unhealthy {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

.health-aura-service__copy {
    position: relative;
    z-index: 1;
}

.health-aura-service__copy h2 {
    margin: 0 0 0.55rem;
    color: var(--zj-on-surface);
    font-size: clamp(1.4rem, 2.1vw, 1.8rem);
    font-weight: 900;
    line-height: 1.2;
}

.health-aura-service__copy p {
    margin: 0;
    color: rgba(89, 65, 57, 0.76);
    font-size: 0.95rem;
    line-height: 1.7;
}

.health-aura-service__metrics {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.health-aura-service__metrics div {
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.health-aura-service__metrics span {
    display: block;
    margin-bottom: 0.35rem;
    color: rgba(89, 65, 57, 0.56);
    font-size: 0.76rem;
    font-weight: 700;
}

.health-aura-service__metrics strong {
    color: var(--zj-on-surface);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.1;
}

.health-aura-state--degraded .health-aura-service__metrics strong:first-of-type,
.health-aura-state--degraded .health-aura-service__metrics div:first-child strong {
    color: #b45309;
}

.health-aura-state--unhealthy .health-aura-service__metrics strong:first-of-type,
.health-aura-state--unhealthy .health-aura-service__metrics div:first-child strong {
    color: #b91c1c;
}

.health-aura__logs {
    display: grid;
    gap: 1rem;
    margin-top: 0.75rem;
}

.health-aura__logs h2 {
    margin: 0;
    color: var(--zj-on-surface);
    font-size: clamp(2rem, 4vw, 3.05rem);
    font-weight: 900;
    line-height: 1.05;
}

.health-aura-log-table {
    overflow: hidden;
    border-radius: 1.5rem;
    background: rgba(221, 228, 227, 0.68);
    border: 1px solid rgba(225, 191, 181, 0.16);
    box-shadow: 0 18px 42px rgba(43, 50, 50, 0.05);
}

.health-aura-log-table__head,
.health-aura-log-row {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr 0.85fr;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.health-aura-log-table__head {
    color: rgba(89, 65, 57, 0.78);
    background: rgba(221, 228, 227, 0.78);
    font-size: 0.9rem;
    font-weight: 900;
}

.health-aura-log-row {
    min-height: 4.6rem;
    color: var(--zj-on-surface);
    background: rgba(255, 255, 255, 0.24);
}

.health-aura-log-row + .health-aura-log-row {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.health-aura-log-row strong {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 900;
}

.health-aura-log-row i {
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 999px;
}

.health-aura-dot--error {
    background: #ef4444;
}

.health-aura-dot--warning {
    background: #f59e0b;
}

.health-aura-dot--info {
    background: #3b82f6;
}

.health-aura-log-row span,
.health-aura-log-row time {
    color: rgba(89, 65, 57, 0.78);
}

.health-aura-log-row em {
    width: max-content;
    min-width: 5.6rem;
    justify-self: start;
    padding: 0.46rem 0.85rem;
    border-radius: 999px;
    font-style: normal;
    font-size: 0.82rem;
    font-weight: 800;
}

.health-aura-log-status--pending {
    color: #6b7280;
    background: rgba(255, 255, 255, 0.58);
}

.health-aura-log-status--resolved {
    color: #047857;
    background: rgba(209, 250, 229, 0.72);
}

.health-aura-log-table__footer {
    width: 100%;
    min-height: 4.4rem;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.26);
    color: #b32600;
    background: rgba(221, 228, 227, 0.72);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.health-aura__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border-radius: 1.5rem;
    background: rgba(221, 228, 227, 0.64);
    border: 1px solid rgba(225, 191, 181, 0.16);
    box-shadow: 0 18px 42px rgba(43, 50, 50, 0.05);
}

.health-aura__stats article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 1.8rem;
}

.health-aura__stats article + article {
    border-inline-start: 1px solid rgba(255, 255, 255, 0.32);
}

.health-aura__stats span {
    order: 2;
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    color: var(--zj-secondary);
    background: rgba(255, 255, 255, 0.74);
    font-size: 1.45rem;
}

.health-aura__stats p {
    margin: 0 0 0.2rem;
    color: rgba(89, 65, 57, 0.68);
    font-size: 0.82rem;
    font-weight: 700;
}

.health-aura__stats strong {
    color: var(--zj-on-surface);
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
}

.health-aura__loading {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 4rem 1rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.72);
}

@media (max-width: 1180px) {
    .health-aura__services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .health-aura-service--wide {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .health-aura {
        gap: 1.5rem;
    }

    .health-aura__header {
        align-items: stretch;
        flex-direction: column;
    }

    .health-aura__refresh {
        width: 100%;
    }

    .health-aura__services,
    .health-aura__stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .health-aura-service,
    .health-aura-service--wide {
        grid-column: auto;
        min-height: 0;
        padding: 1.35rem;
    }

    .health-aura-service__metrics,
    .health-aura-log-table__head,
    .health-aura-log-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .health-aura-log-table__head {
        display: none;
    }

    .health-aura-log-row {
        gap: 0.45rem;
        padding: 1rem;
    }

    .health-aura-log-row em {
        justify-self: stretch;
        text-align: center;
    }

    .health-aura__stats article + article {
        border-inline-start: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.32);
    }
}

.health-diagnostics__summary {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(18rem, 0.9fr);
    gap: 1rem;
    margin: 1.25rem 0;
}

.health-diagnostics__summary-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.sa-dashboard__header-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sa-dashboard__stats {
    margin-bottom: 2rem;
}

.sa-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
}

.sa-dashboard__side {
    grid-column: span 4;
}

.sa-dashboard__main {
    grid-column: span 8;
}

.sa-dashboard__quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.sa-dashboard__announcement-header,
.sa-dashboard__stat-list-item,
.staff-dashboard__summary-item,
.admin-dashboard__table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.sa-dashboard__announcement-actions {
    display: flex;
    justify-content: flex-end;
}

.sa-dashboard__chart-frame {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.65rem;
    height: 12rem;
    padding: 1rem;
    background: var(--zj-surface-container-low);
    border-radius: var(--zj-radius-xl);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.sa-dashboard__chart-frame > div {
    flex: 1 1 0;
    min-width: 0.85rem;
}

.staff-dashboard__stats {
    margin-bottom: 2rem;
}

.staff-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
}

.staff-dashboard__main {
    grid-column: span 8;
}

.staff-dashboard__rail {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.admin-dashboard__rail {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.admin-dashboard__content {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 0.95fr);
    gap: 1.5rem;
    align-items: start;
}

.admin-dashboard__main,
.admin-dashboard__rail {
    min-width: 0;
}

.order-details__hero,
.order-details__hero-meta,
.order-details__hero-badges,
.order-details__hero-actions,
.order-details__item-row,
.order-details__item-main,
.order-details__item-meta,
.order-details__summary,
.order-details__customer-head,
.order-details__timeline-head,
.user-details__header,
.user-details__hero,
.user-details__hero-main,
.user-details__hero-actions,
.user-details__access-head,
.user-details__permission-head,
.restaurant-settings-page__working-hours-head,
.restaurant-settings-page__working-hours-row,
.restaurant-settings-page__working-hours-main,
.restaurant-settings-page__working-hours-range,
.auth-support-stack {
    display: flex;
    gap: 1rem;
}

.order-details__hero,
.user-details__header,
.user-details__hero,
.user-details__access-head,
.restaurant-settings-page__working-hours-head {
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.order-details__hero-meta,
.order-details__hero-badges,
.restaurant-settings-page__working-hours-main,
.restaurant-settings-page__working-hours-range,
.auth-support-stack {
    align-items: center;
    flex-wrap: wrap;
}

.order-details__hero-actions,
.user-details__hero-actions {
    flex-wrap: wrap;
}

.order-details__item-row,
.order-details__item-main,
.order-details__item-meta,
.order-details__customer-head,
.order-details__timeline-head,
.user-details__permission-head {
    align-items: center;
    justify-content: space-between;
}

.order-details__summary {
    flex-direction: column;
    max-width: 20rem;
    margin-inline-start: auto;
    gap: 0.75rem;
}

.order-details__customer-stats,
.user-details__metrics,
.user-details__access-grid,
.auth-security-grid {
    display: grid;
    gap: 1rem;
}

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

.user-details__metrics {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.user-details__metrics > div {
    grid-column: span 6;
}

.user-details__access-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.user-details__access-grid > div {
    grid-column: span 4;
}

.auth-security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.auth-support-stack {
    justify-content: center;
}

.staff-heritage-dashboard {
    display: grid;
    gap: 1.5rem;
    max-width: 72rem;
    margin-inline: auto;
}

.staff-heritage-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr);
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    min-height: min(34rem, calc(100svh - 8rem));
    padding: clamp(1.25rem, 3vw, 2rem) 0;
}

.staff-heritage-hero__copy {
    display: grid;
    gap: 0.7rem;
    align-content: center;
}

.staff-heritage-hero__shift {
    color: var(--zj-on-surface-variant);
    font-size: 0.92rem;
    font-weight: 700;
}

.staff-heritage-hero h1 {
    margin: 0;
    color: var(--zj-on-surface);
    font-size: clamp(2.2rem, 5vw, 4.35rem);
    font-weight: 900;
    line-height: 0.98;
}

.staff-heritage-hero h1 span {
    color: var(--zj-primary);
}

.staff-heritage-hero p {
    margin: 0;
    max-width: 42rem;
    color: var(--zj-on-surface-variant);
    font-size: clamp(1rem, 2vw, 1.18rem);
    font-weight: 600;
    line-height: 1.8;
}

.staff-heritage-hero p strong {
    color: var(--zj-on-surface);
    font-weight: 900;
}

.staff-heritage-hero__action {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.15rem;
    color: var(--zj-primary);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
}

.staff-heritage-hero__action-icon,
.staff-heritage-hero__action-arrow {
    font-size: 1.2rem;
}

.staff-heritage-hero__media {
    position: relative;
    display: block;
    min-height: clamp(22rem, 44vw, 36rem);
    overflow: hidden;
    border-radius: 0;
    isolation: isolate;
    background: var(--zj-surface-container);
    box-shadow: none;
}

.staff-heritage-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.5));
    pointer-events: none;
}

.staff-heritage-hero__media img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: block;
    object-fit: cover;
}

.staff-heritage-hero__ticket {
    position: absolute;
    z-index: 2;
    inset-inline-end: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(24rem, calc(100% - 2rem));
    padding: 0.85rem 1rem;
    color: #fff;
    background: rgba(15, 23, 42, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.staff-heritage-hero__ticket span {
    display: grid;
    gap: 0.1rem;
}

.staff-heritage-hero__ticket small,
.staff-heritage-hero__ticket em {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 700;
}

.staff-heritage-hero__ticket strong {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 900;
}

.staff-heritage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.75fr);
    gap: 1rem;
}

.staff-heritage-orders,
.staff-heritage-summary,
.staff-heritage-alert {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.56);
    box-shadow: var(--zj-shadow-sm);
}

.staff-heritage-orders {
    padding: 1rem;
    grid-row: span 2;
}

.staff-heritage-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.staff-heritage-panel-header h2,
.staff-heritage-alert h2 {
    margin: 0;
    color: var(--zj-on-surface);
    font-size: 1.05rem;
    font-weight: 900;
}

.staff-heritage-panel-header a,
.staff-heritage-alert a {
    color: var(--zj-primary);
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
}

.staff-heritage-order-list {
    display: grid;
    gap: 0.75rem;
}

.staff-heritage-order {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem;
    color: inherit;
    text-decoration: none;
    background: rgba(248, 250, 252, 0.74);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.staff-heritage-order img {
    width: 4.25rem;
    height: 4.25rem;
    object-fit: contain;
    background: rgba(var(--zj-primary-rgb), 0.08);
}

.staff-heritage-order__content,
.staff-heritage-order__time {
    display: grid;
    gap: 0.15rem;
}

.staff-heritage-order__content strong,
.staff-heritage-order__time strong {
    color: var(--zj-on-surface);
    font-weight: 900;
}

.staff-heritage-order__content small,
.staff-heritage-order__time small {
    color: var(--zj-on-surface-variant);
    font-size: 0.74rem;
    font-weight: 700;
}

.staff-heritage-order__time {
    text-align: center;
}

.staff-heritage-order__open {
    color: var(--zj-primary);
    font-size: 1.25rem;
}

.staff-heritage-summary {
    display: grid;
    gap: 0.55rem;
    align-content: start;
    padding: 1rem;
}

.staff-heritage-summary__icon,
.staff-heritage-alert__icon {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    color: var(--zj-primary);
    background: rgba(var(--zj-primary-rgb), 0.1);
}

.staff-heritage-summary span,
.staff-heritage-summary small {
    color: var(--zj-on-surface-variant);
    font-size: 0.78rem;
    font-weight: 800;
}

.staff-heritage-summary > strong {
    color: var(--zj-on-surface);
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1;
}

.staff-heritage-summary p,
.staff-heritage-alert p {
    margin: 0;
    color: var(--zj-on-surface-variant);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.7;
}

.staff-heritage-progress {
    height: 0.55rem;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.18);
}

.staff-heritage-progress span {
    display: block;
    height: 100%;
    background: var(--zj-primary);
}

.staff-shift__branch-unavailable {
    width: min(100%, 28rem);
    margin-inline: auto;
    padding: 1rem 1.1rem;
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    border: 1px solid rgba(239, 68, 68, 0.22);
    border-radius: var(--zj-radius-lg);
    background: rgba(254, 242, 242, 0.78);
    color: var(--zj-on-surface);
}

.staff-shift__branch-unavailable > .material-symbols-outlined {
    color: var(--zj-danger, #dc2626);
    font-size: 1.8rem;
}

.staff-shift__branch-unavailable > p {
    margin: 0;
    color: var(--zj-on-surface-variant);
}

.staff-shift__branch-unavailable > .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.staff-shift__hold-button {
    --hold-progress: 0;
    position: relative;
    isolation: isolate;
    min-width: min(100%, 17rem);
    min-height: 4.25rem;
    display: inline-grid;
    grid-template-columns: auto minmax(0, auto);
    grid-template-areas:
        "icon label"
        "icon hint";
    align-items: center;
    justify-content: center;
    gap: 0.12rem 0.55rem;
    overflow: visible;
    touch-action: none;
    user-select: none;
    transform: scale(1);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.staff-shift__hold-button > .material-symbols-outlined {
    grid-area: icon;
    position: relative;
    z-index: 2;
    font-size: 1.45rem;
}

.staff-shift__hold-button > strong {
    grid-area: label;
    position: relative;
    z-index: 2;
    line-height: 1.1;
}

.staff-shift__hold-button > small {
    grid-area: hint;
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
}

.staff-shift__hold-button > small:nth-of-type(n + 2) {
    display: none;
}

.staff-shift__hold-fill {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.staff-shift__hold-fill::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: calc(var(--hold-progress) * 100%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.36));
    transition: width 2s linear;
}

.staff-shift__hold-button.is-holding {
    transform: scale(1.08);
    box-shadow: 0 1rem 2rem rgba(var(--zj-primary-rgb), 0.26);
    filter: saturate(1.08);
}

.staff-shift__hold-button.is-complete {
    animation: staff-shift-hold-burst 520ms cubic-bezier(.2, .9, .2, 1);
}

.staff-shift__hold-button.is-complete::after {
    content: "";
    position: absolute;
    inset: -0.75rem;
    z-index: 0;
    border-radius: 999px;
    border: 2px solid rgba(var(--zj-primary-rgb), 0.42);
    animation: staff-shift-hold-burst 520ms cubic-bezier(.2, .9, .2, 1);
    pointer-events: none;
}

.staff-shift__confetti {
    position: absolute;
    z-index: 4;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #facc15;
    opacity: 0;
    pointer-events: none;
}

.staff-shift__confetti:nth-last-of-type(4) {
    inset-block-start: 18%;
    inset-inline-start: 18%;
    background: #22c55e;
}

.staff-shift__confetti:nth-last-of-type(3) {
    inset-block-start: 15%;
    inset-inline-end: 20%;
    background: #38bdf8;
}

.staff-shift__confetti:nth-last-of-type(2) {
    inset-block-end: 18%;
    inset-inline-start: 24%;
    background: #fb7185;
}

.staff-shift__confetti:nth-last-of-type(1) {
    inset-block-end: 17%;
    inset-inline-end: 22%;
    background: #facc15;
}

.staff-shift__hold-button.is-complete .staff-shift__confetti {
    animation: staff-shift-confetti-pop 620ms ease-out forwards;
}

.staff-shift__hold-button.is-complete .staff-shift__confetti:nth-last-of-type(4) {
    --confetti-x: -2.2rem;
    --confetti-y: -2.8rem;
}

.staff-shift__hold-button.is-complete .staff-shift__confetti:nth-last-of-type(3) {
    --confetti-x: 2.4rem;
    --confetti-y: -2.5rem;
    animation-delay: 45ms;
}

.staff-shift__hold-button.is-complete .staff-shift__confetti:nth-last-of-type(2) {
    --confetti-x: -2rem;
    --confetti-y: 2.35rem;
    animation-delay: 80ms;
}

.staff-shift__hold-button.is-complete .staff-shift__confetti:nth-last-of-type(1) {
    --confetti-x: 2.35rem;
    --confetti-y: 2.15rem;
    animation-delay: 115ms;
}

@keyframes staff-shift-hold-burst {
    0% {
        transform: scale(1.08);
    }
    52% {
        transform: scale(1.22);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes staff-shift-confetti-pop {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.35);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(var(--confetti-x, 0), var(--confetti-y, 0)) scale(1.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .staff-shift__hold-fill::before,
    .staff-shift__hold-button,
    .staff-shift__hold-button.is-complete,
    .staff-shift__hold-button.is-complete::after,
    .staff-shift__hold-button.is-complete .staff-shift__confetti {
        animation: none;
        transition-duration: 1ms;
    }

    .staff-shift__hold-button.is-holding {
        transform: none;
    }

    .staff-shift__hold-button.is-complete::after {
        opacity: 0;
    }
}

.staff-heritage-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
}

.staff-heritage-alert a {
    grid-column: 1 / -1;
    width: max-content;
}

@media (max-width: 1080px) {
    .responsive-metrics-grid-4,
    .health-diagnostics__summary-stats,
    .sa-dashboard__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .responsive-split-grid__main--7,
    .responsive-split-grid__side--5,
    .responsive-split-grid__main--8,
    .responsive-split-grid__side--4,
    .reports-page__content-main,
    .reports-page__content-side,
    .sa-dashboard__main,
    .sa-dashboard__side,
    .staff-dashboard__main,
    .staff-dashboard__rail {
        grid-column: 1 / -1;
    }

    .health-diagnostics__summary,
    .sa-dashboard__grid,
    .staff-dashboard__grid {
        grid-template-columns: 1fr;
    }

    .order-details__hero,
    .user-details__header {
        align-items: stretch;
    }

    .staff-heritage-hero,
    .staff-heritage-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-heritage-hero {
        min-height: 0;
    }

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

@media (max-width: 720px) {
    .responsive-page-header-actions,
    .responsive-form-actions,
    .reports-page__chart-legend,
    .reports-page__donut-legend,
    .sa-dashboard__header-actions {
        width: 100%;
    }

    .responsive-page-header-actions > *,
    .responsive-form-actions > *,
    .sa-dashboard__header-actions > * {
        flex: 1 1 calc(50% - 0.375rem);
        justify-content: center;
    }

    .order-details__hero-actions,
    .user-details__hero-actions {
        width: 100%;
    }

    .order-details__hero-actions > *,
    .user-details__hero-actions > * {
        flex: 1 1 calc(50% - 0.5rem);
        justify-content: center;
    }
}

@media (max-width: 640px) {
.responsive-form-grid-2,
.responsive-metrics-grid-2,
.responsive-metrics-grid-3,
.responsive-metrics-grid-4,
.health-diagnostics__summary-stats,
.sa-dashboard__stats {
        grid-template-columns: 1fr;
    }

    .responsive-zone-grid,
    .responsive-quick-actions-grid,
    .responsive-chart-labels-7,
    .sa-dashboard__quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reports-page__stats,
    .reports-page__content {
        padding-inline: 1rem;
    }

    .reports-page__donut-meter {
        width: min(12rem, 100%);
        height: min(12rem, 100%);
    }

    .responsive-page-header-actions > *,
    .responsive-form-actions > *,
    .sa-dashboard__header-actions > * {
        flex-basis: 100%;
    }

    .sa-dashboard__announcement-header,
    .sa-dashboard__stat-list-item,
    .staff-dashboard__summary-item,
    .admin-dashboard__table-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .sa-dashboard__announcement-actions {
        justify-content: stretch;
    }

    .sa-dashboard__announcement-actions > * {
        width: 100%;
    }

    .sa-dashboard__chart-frame {
        gap: 0.45rem;
        padding: 0.85rem;
    }

    .order-details__item-row,
    .order-details__item-main,
    .order-details__item-meta,
    .order-details__timeline-head,
    .user-details__hero,
    .user-details__hero-main,
    .user-details__permission-head,
    .restaurant-settings-page__working-hours-row,
    .restaurant-settings-page__working-hours-main,
    .restaurant-settings-page__working-hours-range,
    .auth-support-stack {
        align-items: stretch;
        flex-direction: column;
    }

    .order-details__hero-meta,
    .order-details__hero-badges,
    .order-details__customer-head,
    .restaurant-settings-page__working-hours-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .order-details__customer-stats,
    .user-details__metrics,
    .user-details__access-grid,
    .auth-security-grid {
        grid-template-columns: 1fr;
    }

    .user-details__metrics > div,
    .user-details__access-grid > div {
        grid-column: 1 / -1;
    }

    .order-details__summary {
        max-width: none;
        margin-inline-start: 0;
    }

    .order-details__hero-actions > *,
    .user-details__hero-actions > * {
        flex-basis: 100%;
    }
}

@media (max-width: 420px) {
    .responsive-zone-grid,
    .responsive-quick-actions-grid,
    .responsive-chart-labels-7,
    .sa-dashboard__quick-actions {
        grid-template-columns: 1fr;
    }
}

.about-screen {
    display: grid;
    gap: 1.5rem;
}

.about-screen__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.9fr);
    gap: 1.5rem;
    padding: 2rem;
    border-radius: var(--zj-radius-3xl);
    position: relative;
    overflow: hidden;
}

.about-screen__hero::before,
.about-screen__hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(2.5rem);
    opacity: 0.65;
    pointer-events: none;
}

.about-screen__hero::before {
    inset-inline-start: -4rem;
    top: -3rem;
    width: 12rem;
    height: 12rem;
background: rgba(14, 165, 233, 0.2);
}

.about-screen__hero::after {
    inset-inline-end: -3rem;
    bottom: -4rem;
    width: 14rem;
    height: 14rem;
    background: rgba(23, 37, 84, 0.18);
}

.about-screen__hero-copy,
.about-screen__status-copy {
    position: relative;
    z-index: 1;
}

.about-screen__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    color: var(--zj-secondary);
    font-size: 0.85rem;
    font-weight: 800;
}

.about-screen__eyebrow-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--zj-secondary);
    box-shadow: 0 0 0 0.35rem rgba(23, 37, 84, 0.12);
}

.about-screen__hero h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(2.3rem, 5vw, 4.2rem);
}

.about-screen__subtitle {
    max-width: 40rem;
    margin: 0;
    color: var(--zj-on-surface-variant);
    font-size: 1.02rem;
    line-height: 1.9;
}

.about-screen__hero-badges {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.about-screen__hero-visual {
    position: relative;
    min-height: 18rem;
    display: grid;
    place-items: center;
}

.about-screen__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(0.5rem);
}

.about-screen__orb--primary {
    width: 14rem;
    height: 14rem;
background: radial-gradient(circle, rgba(14, 165, 233, 0.26) 0%, rgba(14, 165, 233, 0.02) 72%);
}

.about-screen__orb--secondary {
    width: 9rem;
    height: 9rem;
    background: radial-gradient(circle, rgba(23, 37, 84, 0.24) 0%, rgba(23, 37, 84, 0.03) 72%);
    inset-inline-end: 1rem;
    bottom: 1rem;
}

.about-screen__hero-panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.5rem;
    justify-items: center;
    padding: 2rem;
    width: min(100%, 18rem);
    border-radius: var(--zj-radius-3xl);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: var(--zj-shadow-xl);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.about-screen__hero-panel .material-symbols-outlined {
    font-size: 2.2rem;
    color: var(--zj-primary);
}

.about-screen__hero-panel strong {
    font-size: 3rem;
    line-height: 1;
}

.about-screen__hero-panel small {
    color: var(--zj-on-surface-variant);
}

.about-screen__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.about-screen__card {
    grid-column: span 4;
    display: grid;
    gap: 0.75rem;
    padding: 1.35rem;
    border-radius: var(--zj-radius-2xl);
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--zj-shadow-md);
}

.about-screen__card--wide {
    grid-column: span 8;
}

.about-screen__card .material-symbols-outlined {
    color: var(--zj-primary);
    font-size: 1.8rem;
}

.about-screen__card h2,
.about-screen__status h2 {
    margin: 0;
    font-size: 1.15rem;
}

.about-screen__card p,
.about-screen__status-copy p,
.public-contact__subtitle,
.profile-screen__hero-copy p,
.profile-screen__identity-body p,
.not-found-screen__panel p {
    margin: 0;
    color: var(--zj-on-surface-variant);
    line-height: 1.8;
}

.about-screen__status {
    overflow: hidden;
}

.about-screen__status-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
}

.about-screen__section-label,
.public-contact__section-label,
.profile-screen__section-label {
    margin: 0 0 0.4rem;
    color: var(--zj-primary);
    font-size: 0.82rem;
    font-weight: 800;
}

.about-screen__status-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(10rem, 1fr));
    gap: 0.9rem;
}

.about-screen__status-metrics div,
.profile-screen__identity-stats div {
    display: grid;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    border-radius: var(--zj-radius-xl);
    background: var(--zj-surface-container-low);
}

.about-screen__status-metrics span,
.profile-screen__identity-stats span {
    color: var(--zj-on-surface-variant);
    font-size: 0.82rem;
}

.about-screen__status-metrics strong,
.profile-screen__identity-stats strong {
    font-size: 1.2rem;
}

.public-contact {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 28%),
        radial-gradient(circle at bottom left, rgba(23, 37, 84, 0.1), transparent 32%),
        var(--zj-surface);
}

.public-contact__topbar,
.public-contact__footer {
    width: min(100%, 76rem);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}

.public-contact__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--zj-on-surface);
    font-weight: 800;
}

.public-contact__brand .material-symbols-outlined {
    color: var(--zj-primary);
}

.public-contact__nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.public-contact__nav a {
    color: var(--zj-on-surface-variant);
    font-weight: 700;
}

.public-contact__nav a.is-active {
    color: var(--zj-primary);
}

.public-contact__content {
    width: min(100%, 76rem);
    margin-inline: auto;
    padding: 1rem 1.5rem 2rem;
    display: grid;
    gap: 1.5rem;
    flex: 1;
}

.public-contact__hero {
    display: grid;
    gap: 0.75rem;
    justify-items: center;
    text-align: center;
    padding: 2.5rem 1rem 1rem;
}

.public-contact__eyebrow {
    margin: 0;
    color: var(--zj-secondary);
    font-size: 0.88rem;
    font-weight: 800;
}

.public-contact__hero h1,
.not-found-screen__panel h1 {
    margin: 0;
    font-size: clamp(2.25rem, 5vw, 4rem);
}

.public-contact__grid {
    display: grid;
    grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.2fr);
    gap: 1rem;
    align-items: start;
}

.public-contact__info-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.public-contact__info-card {
    grid-column: span 12;
    display: grid;
    gap: 0.65rem;
    padding: 1.4rem;
    border-radius: var(--zj-radius-2xl);
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--zj-shadow-md);
}

.public-contact__info-card--highlight {
background: linear-gradient(180deg, rgba(23, 37, 84, 0.95), rgba(14, 165, 233, 0.92));
    color: var(--zj-on-primary);
}

.public-contact__info-card .material-symbols-outlined,
.profile-screen__security-card .material-symbols-outlined {
    color: var(--zj-primary);
    font-size: 1.7rem;
}

.public-contact__info-card--highlight .material-symbols-outlined,
.public-contact__info-card--highlight a,
.public-contact__info-card--highlight p,
.public-contact__info-card--highlight h2,
.public-contact__info-card--highlight span {
    color: var(--zj-on-primary) !important;
}

.public-contact__info-card h2,
.public-contact__social h2,
.profile-screen__section-head h2,
.profile-screen__security-card h3 {
    margin: 0;
    font-size: 1.12rem;
}

.public-contact__info-card p,
.public-contact__info-card span,
.public-contact__success p,
.public-contact__footer p,
.profile-screen__security-card p {
    margin: 0;
    color: var(--zj-on-surface-variant);
}

.public-contact__info-card a {
    font-weight: 800;
}

.public-contact__form-shell,
.public-contact__social,
.not-found-screen__panel {
    border-radius: var(--zj-radius-3xl);
    padding: 1.5rem;
}

.public-contact__form {
    display: grid;
    gap: 1rem;
}

.public-contact__form-grid,
.profile-screen__form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.public-contact__textarea,
.profile-screen__bio {
    resize: vertical;
    min-height: 8rem;
}

.public-contact__submit {
    width: 100%;
}

.public-contact__success {
    display: grid;
    gap: 0.9rem;
    justify-items: center;
    text-align: center;
    padding: 1.5rem 0.5rem;
}

.public-contact__success .material-symbols-outlined {
    font-size: 3rem;
    color: var(--zj-secondary);
}

.public-contact__social {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.public-contact__social-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.public-contact__social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    padding: 0.8rem 1rem;
    border-radius: var(--zj-radius-full);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: var(--zj-on-surface);
    font-weight: 700;
}

.public-contact__footer {
border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.profile-screen {
    display: grid;
    gap: 1.25rem;
    padding-bottom: 5rem;
}

.profile-screen__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--zj-radius-3xl);
}

.profile-screen__meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.profile-screen__hero h1,
.profile-screen__identity-body h2 {
    margin: 0 0 0.5rem;
}

.profile-screen__hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.profile-screen__layout {
    display: grid;
    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.profile-screen__identity,
.profile-screen__security-card {
    overflow: hidden;
}

.profile-screen__identity-body {
    display: grid;
    gap: 1rem;
    justify-items: center;
    text-align: center;
}

.profile-screen__avatar-button {
    position: relative;
    padding: 0;
    background: none;
    border: 0;
}

.profile-screen__avatar {
    width: 8rem;
    height: 8rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zj-primary), var(--zj-secondary));
    color: var(--zj-on-primary);
    font-size: 2.5rem;
    font-weight: 900;
    box-shadow: var(--zj-shadow-xl);
}

.profile-screen__avatar-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(22, 29, 29, 0.45);
    color: white;
    opacity: 0;
    transition: opacity var(--zj-transition-fast);
}

.profile-screen__avatar-button:hover .profile-screen__avatar-overlay {
    opacity: 1;
}

.profile-screen__identity-stats {
    width: 100%;
    display: grid;
    gap: 0.75rem;
}

.profile-screen__content {
    display: grid;
    gap: 1rem;
}

.profile-screen__section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.profile-screen__readonly-field {
    display: grid;
    gap: 0.45rem;
}

.profile-screen__readonly-field label {
    color: var(--zj-on-surface-variant);
    font-size: 0.85rem;
    font-weight: 700;
}

.profile-screen__readonly-field div {
    min-height: 3.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: var(--zj-radius-xl);
    background: var(--zj-surface-container-low);
    color: var(--zj-on-surface);
}

.profile-screen__readonly-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-block: 0.5rem 1rem;
}

.profile-screen__readonly-grid > div {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    border-radius: var(--zj-radius-lg);
    background: var(--zj-surface-container-low);
}

.profile-screen__readonly-grid label {
    color: var(--zj-on-surface-variant);
    font-size: 0.78rem;
    font-weight: 700;
}

.profile-screen__readonly-grid div div {
    color: var(--zj-on-surface);
    font-weight: 800;
}

.profile-screen__security-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.profile-screen__security-card .card-body {
    display: grid;
    gap: 0.75rem;
    height: 100%;
}

.profile-screen__security-card .btn {
    justify-self: start;
    margin-top: auto;
}

.profile-screen__mobile-nav {
    display: none;
}

.not-found-screen {
    min-height: calc(100vh - 4rem);
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.not-found-screen__panel {
    width: min(100%, 38rem);
    display: grid;
    gap: 1rem;
    justify-items: center;
    text-align: center;
}

.not-found-screen__code {
    font-size: clamp(5rem, 14vw, 8rem);
    line-height: 1;
    font-weight: 900;
color: rgba(14, 165, 233, 0.18);
}

.not-found-screen__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.routes-feedback {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
}

.routes-feedback__visual {
    display: grid;
    place-items: center;
    width: 6rem;
    height: 6rem;
    border-radius: 1.6rem;
background: rgba(14, 165, 233, 0.1);
    color: var(--zj-primary);
    font-size: 2rem;
    font-weight: 800;
}

.routes-feedback__visual--soft {
    background: rgba(23, 37, 84, 0.12);
    color: var(--zj-secondary);
}

.routes-feedback__copy {
    display: grid;
    gap: 0.6rem;
    justify-items: center;
}

.routes-feedback__copy h1,
.routes-feedback__copy p,
.routes-feedback__copy small {
    margin: 0;
}

.routes-feedback__copy p,
.routes-feedback__copy small {
    color: var(--zj-on-surface-variant);
    line-height: 1.7;
}

.routes-feedback__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.1rem;
    border-radius: var(--zj-radius-full);
    background: var(--zj-primary);
    color: var(--zj-on-primary);
    text-decoration: none;
    font-weight: 700;
}

@media print {
    .no-print { display: none !important; }
    .print-canvas { margin: auto; padding: 2rem; }
}

.bar-chart { display: flex; align-items: flex-end; gap: 0.5rem; height: 12rem; padding-top: 1rem; }
.bar-chart__bar { flex: 1; border-radius: var(--zj-radius-md) var(--zj-radius-md) 0 0; background: var(--zj-primary); min-width: 1.5rem; transition: height var(--zj-transition-normal); }
.bar-chart__bar:hover { background: var(--zj-primary-container); }

@media (max-width: 1024px) {
    .about-screen__grid,
    .public-contact__info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-screen__card,
    .about-screen__card--wide,
    .public-contact__info-card {
        grid-column: span 1;
    }

    .profile-screen__security-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 960px) {
    .about-screen__hero,
    .about-screen__status-body,
    .public-contact__grid,
    .profile-screen__layout,
    .profile-screen__hero {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .about-screen__status-metrics,
    .profile-screen__form-grid {
        grid-template-columns: 1fr;
    }

    .public-contact__social {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 768px) {
    .public-contact__topbar,
    .public-contact__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .public-contact__nav,
    .profile-screen__hero-actions,
    .not-found-screen__actions {
        justify-content: center;
    }

    .profile-screen__mobile-nav {
        display: block;
    }
}

@media (max-width: 640px) {
    .about-screen__hero,
    .public-contact__form-shell,
    .public-contact__social,
    .profile-screen__hero,
    .not-found-screen__panel {
        padding: 1.25rem;
    }

    .about-screen__grid,
    .public-contact__info-grid,
    .public-contact__form-grid {
        grid-template-columns: 1fr;
    }
}

/* MIGRATED: Components\Layout\ThemeToggle.razor.css */
.theme-toggle {
    display: grid;
    gap: 0.85rem;
    padding: 0.95rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid rgba(var(--zj-outline-rgb), 0.14);
    border-radius: 1.2rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(244,251,255,0.9));
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.theme-toggle__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.theme-toggle__heading {
    display: grid;
    gap: 0.18rem;
}

.theme-toggle__heading strong {
    font-size: 0.86rem;
    font-weight: 900;
    color: var(--zj-on-surface);
}

.theme-toggle__heading small {
    font-size: 0.7rem;
    color: var(--zj-on-surface-variant);
    line-height: 1.55;
}

.theme-toggle__mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(var(--zj-primary-rgb), 0.1);
    color: var(--zj-primary);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.theme-toggle__current {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.85rem;
    border-radius: 1rem;
    background: rgba(var(--zj-primary-rgb), 0.06);
}

.theme-toggle__current-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.theme-toggle__current-copy strong {
    font-size: 0.84rem;
    font-weight: 900;
    color: var(--zj-on-surface);
}

.theme-toggle__current-copy small {
    font-size: 0.7rem;
    color: var(--zj-on-surface-variant);
}

.theme-toggle__options {
    display: grid;
    gap: 0.55rem;
}

.theme-toggle__divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--zj-outline-rgb), 0.18), transparent);
}

.theme-toggle__icon-block {
    display: grid;
    gap: 0.65rem;
}

.theme-toggle__icon-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.theme-toggle__icon-option {
    position: relative;
    min-width: 0;
    min-height: 4.25rem;
    padding: 0.65rem 0.45rem 0.55rem;
    border: 1px solid rgba(var(--zj-outline-rgb), 0.12);
    border-radius: 1rem;
    background: rgba(255,255,255,0.72);
    color: var(--zj-on-surface);
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.38rem;
    box-shadow: none;
}

.theme-toggle__icon-option:hover:not(:disabled) {
    border-color: rgba(var(--zj-primary-rgb), 0.22);
    background: rgba(var(--zj-primary-rgb), 0.08);
    transform: translateY(-1px);
}

.theme-toggle__icon-option.is-active {
    border-color: rgba(var(--zj-primary-rgb), 0.28);
    background: linear-gradient(180deg, rgba(var(--zj-primary-rgb), 0.14), rgba(var(--zj-primary-rgb), 0.08));
    color: var(--zj-primary);
}

.theme-toggle__icon-image {
    width: 2.2rem;
    height: 2.2rem;
    object-fit: contain;
}

.theme-toggle__icon-option span:not(.material-symbols-outlined) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.68rem;
    font-weight: 900;
}

.theme-toggle__icon-check {
    position: absolute;
    inset-block-start: 0.35rem;
    inset-inline-start: 0.35rem;
    font-size: 0.95rem;
}

.theme-toggle__option {
    width: 100%;
    min-height: 3.1rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(var(--zj-outline-rgb), 0.12);
    border-radius: 1rem;
    background: rgba(255,255,255,0.72);
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-align: start;
    color: var(--zj-on-surface);
}

.theme-toggle__option:hover:not(:disabled) {
    border-color: rgba(var(--zj-primary-rgb), 0.22);
    background: rgba(var(--zj-primary-rgb), 0.08);
    transform: translateY(-1px);
}

.theme-toggle__option.is-active {
    border-color: rgba(var(--zj-primary-rgb), 0.26);
    background: linear-gradient(180deg, rgba(var(--zj-primary-rgb), 0.14), rgba(var(--zj-primary-rgb), 0.08));
    color: var(--zj-primary);
}

.theme-toggle__option-copy {
    display: grid;
    gap: 0.12rem;
    flex: 1;
    min-width: 0;
}

.theme-toggle__option-copy strong {
    font-size: 0.82rem;
    font-weight: 900;
}

.theme-toggle__option-copy small {
    font-size: 0.68rem;
    color: var(--zj-on-surface-variant);
}

.theme-toggle__option.is-active .theme-toggle__option-copy small {
    color: inherit;
}

.theme-toggle__option-check {
    font-size: 1.05rem;
}

.theme-toggle__hint {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.6;
    color: var(--zj-on-surface-variant);
}

.theme-toggle__swatch {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.95rem;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        0 10px 20px rgba(15, 23, 42, 0.08);
}

.theme-toggle__swatch--aura-light {
    background:
        linear-gradient(135deg, #0ea5e9 0 50%, #172554 50% 75%, #f59e0b 75% 100%);
}

.theme-toggle__swatch--admin-gold-light {
    background:
        linear-gradient(135deg, #c5a059 0 50%, #262626 50% 75%, #8fa5d6 75% 100%);
}

.theme-toggle__swatch--customer-sunset-light {
    background:
        linear-gradient(135deg, #ff6f18 0 50%, #6e4a2d 50% 75%, #e6a96e 75% 100%);
}

.theme-toggle__swatch--violet-light {
    background:
        linear-gradient(135deg, #7c3aed 0 50%, #312e81 50% 75%, #14b8a6 75% 100%);
}

.theme-toggle__swatch--emerald-light {
    background:
        linear-gradient(135deg, #059669 0 50%, #064e3b 50% 75%, #0d9488 75% 100%);
}

.theme-toggle__swatch--rose-light {
    background:
        linear-gradient(135deg, #db2777 0 50%, #831843 50% 75%, #f472b6 75% 100%);
}

@media (max-width: 720px) {
    .theme-toggle {
        padding: 0.85rem;
    }

    .theme-toggle__header {
        align-items: stretch;
        flex-direction: column;
    }

    .theme-toggle__current,
    .theme-toggle__option {
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .theme-toggle {
        gap: 0.75rem;
        padding: 0.75rem;
        border-radius: 1rem;
    }

    .theme-toggle__current {
        gap: 0.6rem;
        padding: 0.75rem;
    }

    .theme-toggle__option {
        min-height: 2.9rem;
        padding: 0.65rem 0.7rem;
        gap: 0.6rem;
    }

    .theme-toggle__icon-options {
        gap: 0.45rem;
    }

    .theme-toggle__icon-option {
        min-height: 3.9rem;
        border-radius: 0.9rem;
    }

    .theme-toggle__icon-image {
        width: 1.95rem;
        height: 1.95rem;
    }

    .theme-toggle__option-copy strong,
    .theme-toggle__current-copy strong {
        font-size: 0.78rem;
    }

    .theme-toggle__option-copy small,
    .theme-toggle__current-copy small,
    .theme-toggle__heading small,
    .theme-toggle__hint {
        font-size: 0.64rem;
        line-height: 1.5;
    }

    .theme-toggle__swatch {
        width: 2.15rem;
        height: 2.15rem;
        border-radius: 0.8rem;
    }
}


/* MIGRATED: Pages\Admin\ErrorLogs.razor.css */
.user-management-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.user-management-actions__edit {
    min-height: 2.35rem;
    padding-inline: 0.75rem;
    border-radius: 0.75rem;
}

.user-management-actions__edit .material-symbols-outlined {
    font-size: 1.05rem;
}

.user-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.34fr);
    gap: 1rem;
    align-items: start;
}

.user-edit-layout > *,
.user-edit-side > *,
.user-edit-identity > div {
    min-inline-size: 0;
}

.user-edit-identity p {
    overflow-wrap: anywhere;
}

.user-edit-identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.4rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--zj-outline-variant);
}

.user-edit-identity__avatar {
    display: grid;
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    color: var(--zj-primary);
    background: var(--zj-primary-container);
    border-radius: 1rem;
    font-size: 1.15rem;
    font-weight: 900;
}

.user-edit-identity h2,
.user-edit-identity p {
    margin: 0;
}

.user-edit-identity h2 {
    font-size: 1.15rem;
}

.user-edit-identity p {
    margin-top: 0.2rem;
    color: var(--zj-on-surface-variant);
}
.user-edit-form {
    display: grid;
    gap: 1rem;
}

.user-edit-form__hint {
    display: block;
    margin-top: 0.35rem;
    color: var(--zj-on-surface-variant);
}

.user-edit-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.25rem;
    padding: 0.8rem 0.9rem;
    background: color-mix(in srgb, var(--zj-primary) 4%, transparent);
    border: 1px solid var(--zj-outline-variant);
    border-radius: 0.85rem;
}

.user-edit-status > div {
    display: grid;
    gap: 0.2rem;
}

.user-edit-status span {
    color: var(--zj-on-surface-variant);
    font-size: 0.78rem;
}

.user-edit-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    padding-top: 0.25rem;
}

.user-edit-side {
    position: sticky;
    top: 1rem;
}

.user-edit-side__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

.user-edit-side__content > * {
    min-inline-size: 0;
}

.user-edit-side__content h2,
.user-edit-side__content p {
    margin: 0;
}

.user-edit-side__content p {
    color: var(--zj-on-surface-variant);
    line-height: 1.7;
}

.user-edit-side__icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    color: var(--zj-primary);
    background: var(--zj-primary-container);
    border-radius: 0.9rem;
}

@media (max-width: 900px) {
    .user-edit-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-edit-side {
        position: static;
    }
}

@media (max-width: 620px) {

    .user-edit-form__actions {
        flex-direction: column-reverse;
    }

    .user-edit-form__actions .btn {
        width: 100%;
    }
}

.password-live-requirements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.75rem;
    margin-top: 0.65rem;
    padding: 0.75rem;
    color: var(--zj-on-surface-variant);
    background: color-mix(in srgb, var(--zj-primary) 4%, transparent);
    border: 1px solid var(--zj-outline-variant);
    border-radius: 0.8rem;
}

.password-live-requirements__item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.45;
    transition: color 160ms ease;
}

.password-live-requirements__item .material-symbols-outlined {
    flex: 0 0 auto;
    color: var(--zj-outline);
    font-size: 1.05rem;
}

.password-live-requirements__item--met {
    color: var(--zj-success, #087f5b);
    font-weight: 700;
}

.password-live-requirements__item--met .material-symbols-outlined {
    color: currentColor;
}

@media (max-width: 560px) {
    .password-live-requirements {
        grid-template-columns: 1fr;
    }
}

.error-logs-page__table-wrap {
    width: 100%;
    overflow-x: auto;
}

.error-logs-page__table {
    width: 100%;
    min-width: 84rem;
    table-layout: fixed;
    border-collapse: collapse;
}

.error-logs-page__table th,
.error-logs-page__table td {
    padding: 0.75rem;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.error-logs-page__table th {
    color: var(--zj-on-surface);
    font-weight: 800;
    white-space: nowrap;
}

.error-logs-page__table tbody tr:last-child > td {
    border-bottom: 0;
}

.error-logs-page__col-reference {
    width: 15rem;
}

.error-logs-page__col-restaurant {
    width: 11rem;
}

.error-logs-page__col-severity,
.error-logs-page__col-type {
    width: 9rem;
}

.error-logs-page__col-user {
    width: 12rem;
}

.error-logs-page__col-time {
    width: 14rem;
}

.error-logs-page__col-actions,
.error-logs-page__col-toggle {
    width: 7rem;
}

.error-logs-page__col-description {
    width: 18rem;
}

.error-logs-page__message-cell,
.error-logs-page__description-cell {
    text-align: start !important;
}

.error-logs-page__reference-cell {
    direction: ltr;
}

.error-logs-page__reference-cell code,
.error-logs-page__time-cell {
    white-space: nowrap;
}

.error-logs-page__user-cell,
.error-logs-page__description-cell {
    overflow: hidden;
    text-overflow: ellipsis;
}

.error-logs-page__actions-cell .btn,
.error-logs-page__restaurant-copy {
    margin-inline: auto;
}

.error-logs-page__expanded-row > td {
    text-align: start;
    background: color-mix(in srgb, var(--zj-primary) 3%, transparent);
}

.error-logs-page__message-preview {
    display: -webkit-box;
    width: 100%;
    max-width: none;
    padding: 0;
    overflow: hidden;
    color: var(--zj-on-surface);
    background: transparent;
    border: 0;
    font: inherit;
    line-height: 1.55;
    text-align: start;
    cursor: pointer;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.error-logs-page__message-entry {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
}

.error-logs-page__message-entry .error-logs-page__message-preview {
    min-width: 0;
}

.error-logs-page__occurrence-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 1.7rem;
    padding: 0.2rem 0.5rem;
    color: var(--zj-primary);
    background: color-mix(in srgb, var(--zj-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--zj-primary) 28%, var(--zj-outline-variant));
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: help;
}

button.error-logs-page__message-preview:hover {
    color: var(--zj-primary);
    text-decoration: none;
    text-underline-offset: 0.2rem;
}

span.error-logs-page__message-preview {
    cursor: text;
}

.error-logs-page__toolbar,
.error-logs-page__tabs {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.error-logs-page__toolbar {
    justify-content: space-between;
}

.error-logs-page__restaurant-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 18rem;
    padding: 0.35rem 0.55rem;
    color: var(--zj-on-surface-variant);
    background: color-mix(in srgb, var(--zj-primary) 6%, transparent);
    border: 1px solid var(--zj-outline-variant);
    border-radius: 0.65rem;
    cursor: pointer;
}

.error-logs-page__restaurant-copy:hover,
.error-logs-page__restaurant-copy:focus-visible {
    color: var(--zj-primary);
    border-color: color-mix(in srgb, var(--zj-primary) 45%, var(--zj-outline-variant));
}

.error-logs-page__restaurant-copy > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.error-logs-page__restaurant-copy .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 1rem;
}

.error-logs-page__modal-backdrop {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(5px);
}

.error-logs-page__modal {
    display: flex;
    flex-direction: column;
    width: min(58rem, 96vw);
    max-height: min(88vh, 52rem);
    overflow: hidden;
    background: var(--zj-surface, #fff);
    border: 1px solid var(--zj-outline-variant);
    border-radius: 1.25rem;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.3);
}

.error-logs-page__modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--zj-outline-variant);
}

.error-logs-page__modal-header h2 {
    margin: 0.25rem 0 0;
    font-size: 1.1rem;
    direction: ltr;
    text-align: start;
}

.error-logs-page__modal-eyebrow {
    color: var(--zj-primary);
    font-size: 0.75rem;
    font-weight: 800;
}

.error-logs-page__modal-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.error-logs-page__copy-diagnostic {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.error-logs-page__copy-diagnostic .material-symbols-outlined {
    font-size: 1.15rem;
}

.error-logs-page__modal-close {
    display: grid;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    color: var(--zj-on-surface);
    background: color-mix(in srgb, var(--zj-on-surface) 7%, transparent);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.error-logs-page__modal-content {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    overflow: auto;
}

.error-logs-page__details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.error-logs-page__details-grid > div,
.error-logs-page__details-section {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.8rem;
    background: color-mix(in srgb, var(--zj-primary) 4%, transparent);
    border: 1px solid var(--zj-outline-variant);
    border-radius: 0.85rem;
}

.error-logs-page__details-grid strong,
.error-logs-page__details-section strong {
    color: var(--zj-on-surface-variant);
    font-size: 0.75rem;
}

.error-logs-page__details-grid span,
.error-logs-page__details-section p {
    margin: 0;
    overflow-wrap: anywhere;
}

.error-logs-page__details-grid > .error-logs-page__source-location {
    grid-column: 1 / -1;
}

.error-logs-page__source-location small {
    color: var(--zj-on-surface-variant);
    overflow-wrap: anywhere;
}

.error-logs-page__occurrences-section {
    gap: 0.75rem;
}

.error-logs-page__occurrences-heading,
.error-logs-page__occurrences-loading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.error-logs-page__occurrences-heading {
    justify-content: space-between;
}

.error-logs-page__occurrences-heading > span {
    padding: 0.2rem 0.55rem;
    color: var(--zj-primary);
    background: color-mix(in srgb, var(--zj-primary) 10%, transparent);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.error-logs-page__occurrences-table-wrap {
    overflow: auto;
    border: 1px solid var(--zj-outline-variant);
    border-radius: 0.75rem;
}

.error-logs-page__occurrences-table {
    width: 100%;
    min-width: 38rem;
    border-collapse: collapse;
}

.error-logs-page__occurrences-table th,
.error-logs-page__occurrences-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--zj-outline-variant);
    text-align: start;
    white-space: nowrap;
}

.error-logs-page__occurrences-table th {
    color: var(--zj-on-surface-variant);
    background: color-mix(in srgb, var(--zj-primary) 5%, transparent);
    font-size: 0.75rem;
}

.error-logs-page__occurrences-table tbody tr:last-child td {
    border-bottom: 0;
}

.error-logs-page__details-section pre {
    max-height: 22rem;
    margin: 0;
    padding: 1rem;
    overflow: auto;
    color: #e5e7eb;
    background: #111827;
    border-radius: 0.75rem;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .error-logs-page__message-cell {
        width: 16rem;
        min-width: 16rem;
    }

    .error-logs-page__details-grid {
        grid-template-columns: 1fr;
    }

    .error-logs-page__modal-header {
        align-items: flex-start;
    }

    .error-logs-page__modal-actions {
        flex-direction: column-reverse;
        align-items: flex-end;
    }

    .error-logs-page__copy-diagnostic {
        white-space: normal;
    }
}

.error-logs {
    display: grid;
    gap: 1.5rem;
}

.error-logs__hero,
.error-logs__filters,
.error-logs__table-shell,
.error-logs__distribution-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(243,244,255,0.92));
    border: 1px solid rgba(70, 89, 169, 0.08);
    box-shadow: 0 24px 48px rgba(24, 34, 70, 0.06);
}

.error-logs__hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.8rem 2rem;
    border-radius: 2rem;
}

.error-logs__eyebrow {
    margin: 0 0 0.5rem;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.error-logs__hero h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 800;
}

.error-logs__hero p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.8;
    max-width: 40rem;
}

.error-logs__hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.error-logs__ghost-action,
.error-logs__primary-action {
    padding: 0.9rem 1.2rem;
    border: 0;
    border-radius: 1rem;
    font: inherit;
    font-weight: 700;
}

.error-logs__ghost-action {
    background: rgba(92, 111, 193, 0.12);
    color: var(--color-primary);
}

.error-logs__primary-action {
    background: var(--color-primary);
    color: white;
}

.error-logs__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.error-logs__metric-card {
    display: grid;
    gap: 0.45rem;
    padding: 1.35rem 1.4rem;
    border-radius: 1.35rem;
    background: rgba(255,255,255,0.96);
    border-inline-start: 4px solid var(--color-primary);
    box-shadow: 0 18px 38px rgba(24, 34, 70, 0.05);
}

.error-logs__metric-card span,
.error-logs__metric-card small {
    color: var(--color-text-muted);
}

.error-logs__metric-card strong {
    font-size: 2rem;
    font-weight: 800;
}

.error-logs__metric-card.is-health {
    border-inline-start-color: var(--color-success);
}

.error-logs__metric-card.is-critical {
    border-inline-start-color: var(--color-error);
}

.error-logs__filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 1.4rem;
}

.error-logs__chips {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.error-logs__chips button {
    border: 1px solid rgba(70, 89, 169, 0.1);
    border-radius: 999px;
    background: white;
    padding: 0.55rem 0.85rem;
    color: var(--color-text-muted);
    font: inherit;
}

.error-logs__table-shell {
    padding: 0.6rem;
    border-radius: 1.8rem;
}

.error-logs__table-wrap {
    overflow-x: auto;
}

.error-logs__table {
    width: 100%;
    min-width: 56rem;
    border-collapse: collapse;
}

.error-logs__table th,
.error-logs__table td {
    padding: 1rem 1.1rem;
    text-align: right;
    border-bottom: 1px solid rgba(70, 89, 169, 0.08);
}

.error-logs__table th {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.error-logs__trace-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-weight: 700;
}

.error-logs__status-code,
.error-logs__reference,
.error-logs__severity {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 800;
}

.error-logs__status-code,
.error-logs__reference {
    background: rgba(92, 111, 193, 0.08);
    color: var(--color-primary);
}

.error-logs__severity.is-critical {
    background: rgba(239, 68, 68, 0.12);
    color: #b42318;
}

.error-logs__severity.is-warning {
    background: rgba(245, 158, 11, 0.12);
    color: #b4690e;
}

.error-logs__severity.is-info {
    background: rgba(68, 86, 166, 0.1);
    color: var(--color-primary);
}

.error-logs__path {
    color: var(--color-text-muted);
    font-family: "Consolas", "IBM Plex Mono", monospace;
    direction: ltr;
    text-align: left;
}

.error-logs__expanded-row td {
    padding-top: 0;
    background: rgba(20, 26, 48, 0.98);
}

.error-logs__trace-card {
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    color: #d8def7;
}

.error-logs__trace-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
    color: #aeb8dd;
    font-size: 0.8rem;
}

.error-logs__trace-card pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: "Consolas", "IBM Plex Mono", monospace;
}

.error-logs__loading {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.error-logs__lower-grid {
    display: grid;
    grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.6fr);
    gap: 1rem;
}

.error-logs__alert-card {
    display: grid;
    gap: 1rem;
    padding: 1.6rem;
    border-radius: 1.8rem;
    background: linear-gradient(180deg, #5467ce, #4659b3);
    color: white;
    box-shadow: 0 24px 46px rgba(69, 88, 181, 0.24);
}

.error-logs__alert-card button {
    justify-self: start;
    padding: 0.9rem 1.1rem;
    border: 0;
    border-radius: 1rem;
    background: white;
    color: var(--color-primary);
    font-weight: 800;
}

.error-logs__distribution-card {
    padding: 1.5rem;
    border-radius: 1.8rem;
}

.error-logs__distribution-card h3 {
    margin: 0 0 1.4rem;
}

.error-logs__bars {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
}

.error-logs__bar-item {
    display: grid;
    gap: 0.6rem;
    justify-items: center;
}

.error-logs__bar-track {
    display: flex;
    align-items: end;
    width: 100%;
    height: 11rem;
    padding: 0.55rem;
    border-radius: 1rem;
    background: rgba(68, 86, 166, 0.08);
}

.error-logs__bar-fill {
    width: 100%;
    border-radius: 0.8rem;
    background: linear-gradient(180deg, rgba(68,86,166,0.35), rgba(68,86,166,0.95));
}

.error-logs__bar-item span {
    color: var(--color-text-muted);
    font-weight: 700;
}

@media (max-width: 1080px) {
    .error-logs__hero,
    .error-logs__filters,
    .error-logs__lower-grid {
        flex-direction: column;
        align-items: stretch;
    }

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

@media (max-width: 640px) {
    .error-logs__metrics,
    .error-logs__bars {
        grid-template-columns: 1fr;
    }
}


/* MIGRATED: Pages\Admin\HealthCheck.razor.css */
.health-diagnostics,
.health-diagnostics__overview,
.health-diagnostics__lower-grid {
    display: grid;
    gap: 1.35rem;
}

.health-diagnostics__hero,
.health-diagnostics__checks-shell,
.health-diagnostics__hardware-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(243,244,255,0.92));
    border: 1px solid rgba(70, 89, 169, 0.08);
    box-shadow: 0 24px 48px rgba(24, 34, 70, 0.06);
}

.health-diagnostics__hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.4rem;
    padding: 1.9rem 2rem;
    border-radius: 2rem;
}

.health-diagnostics__eyebrow {
    margin: 0 0 0.55rem;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.health-diagnostics__hero h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
}

.health-diagnostics__hero p,
.health-diagnostics__hardware-card p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.8;
}

.health-diagnostics__hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.health-diagnostics__hero-actions button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 0;
    border-radius: 1rem;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.health-diagnostics__ghost-action {
    background: rgba(92, 111, 193, 0.12);
    color: var(--color-primary);
}

.health-diagnostics__primary-action {
    background: var(--color-primary);
    color: white;
}

.health-diagnostics__overview {
    grid-template-columns: 0.9fr 0.9fr 0.9fr 1.6fr;
}

.health-diagnostics__metric-card,
.health-diagnostics__protocol-card {
    padding: 1.4rem 1.5rem;
    border-radius: 1.5rem;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(70, 89, 169, 0.08);
    box-shadow: 0 18px 36px rgba(24, 34, 70, 0.05);
}

.health-diagnostics__metric-card span,
.health-diagnostics__metric-card small,
.health-diagnostics__protocol-card span,
.health-diagnostics__protocol-card small {
    color: var(--color-text-muted);
}

.health-diagnostics__metric-card strong,
.health-diagnostics__protocol-card h2 {
    display: block;
    margin-top: 0.35rem;
    font-size: 2rem;
    font-weight: 800;
}

.health-diagnostics__protocol-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-inline-start: 4px solid transparent;
}

.health-diagnostics__protocol-card.is-healthy {
    border-inline-start-color: var(--color-success);
}

.health-diagnostics__protocol-card.is-degraded {
    border-inline-start-color: var(--color-warning);
}

.health-diagnostics__protocol-card.is-unhealthy {
    border-inline-start-color: var(--color-error);
}

.health-diagnostics__protocol-meta {
    text-align: left;
}

.health-diagnostics__checks-shell {
    padding: 1.15rem;
    border-radius: 1.9rem;
}

.health-diagnostics__checks-shell > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0.2rem 1rem;
}

.health-diagnostics__checks-shell h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
}

.health-diagnostics__legend {
    display: flex;
    gap: 1rem;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.health-diagnostics__legend i {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    margin-inline-start: 0.25rem;
}

.health-diagnostics__legend i.is-critical {
    background: var(--color-error);
}

.health-diagnostics__legend i.is-active {
    background: var(--color-success);
}

.health-diagnostics__checks {
    display: grid;
}

.health-diagnostics__check-row {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    gap: 0.9rem;
    align-items: center;
    padding: 1rem 0.75rem;
    border-top: 1px solid rgba(70, 89, 169, 0.08);
}

.health-diagnostics__check-row button {
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 0.9rem;
    background: rgba(92,111,193,0.08);
    color: var(--color-primary);
}

.health-diagnostics__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
}

.health-diagnostics__badge.is-success {
    background: rgba(34, 197, 94, 0.14);
    color: #0f7b3b;
}

.health-diagnostics__badge.is-warning {
    background: rgba(245, 158, 11, 0.14);
    color: #b4690e;
}

.health-diagnostics__badge.is-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #b42318;
}

.health-diagnostics__badge.is-neutral {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
}

.health-diagnostics__duration small,
.health-diagnostics__copy p {
    color: var(--color-text-muted);
}

.health-diagnostics__copy strong {
    display: block;
    margin-bottom: 0.25rem;
}

.health-diagnostics__icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.9rem;
    background: rgba(92,111,193,0.1);
    color: var(--color-primary);
}

.health-diagnostics__lower-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 1fr);
}

.health-diagnostics__hardware-card,
.health-diagnostics__console-card {
    padding: 1.5rem;
    border-radius: 1.8rem;
}

.health-diagnostics__hardware-card h3,
.health-diagnostics__console-card h3 {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.health-diagnostics__hardware-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.health-diagnostics__hardware-metrics div {
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(92,111,193,0.08);
}

.health-diagnostics__hardware-metrics span {
    display: block;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.health-diagnostics__hardware-metrics strong {
    font-size: 1.6rem;
    font-weight: 800;
}

.health-diagnostics__console-card {
    background: #1e2438;
    color: #d8def7;
    box-shadow: 0 26px 50px rgba(15, 22, 48, 0.28);
}

.health-diagnostics__console-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.health-diagnostics__console-card span,
.health-diagnostics__console-card p {
    margin: 0;
    font-family: "Consolas", "IBM Plex Mono", monospace;
}

.health-diagnostics__console-lines {
    display: grid;
    gap: 0.7rem;
}

.health-diagnostics__console-lines div {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.8rem;
    align-items: start;
}

.health-diagnostics__console-lines strong.is-ok {
    color: #7df8d7;
}

.health-diagnostics__console-lines strong.is-warning {
    color: #ffc36a;
}

.health-diagnostics__console-lines strong.is-error {
    color: #ff9086;
}

.health-diagnostics__loading {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 4rem 1rem;
    border-radius: 1.8rem;
    background: rgba(255,255,255,0.9);
}

@media (max-width: 1080px) {
    .health-diagnostics__hero,
    .health-diagnostics__overview,
    .health-diagnostics__lower-grid {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .health-diagnostics__check-row,
    .health-diagnostics__hardware-metrics {
        grid-template-columns: 1fr;
    }
}


/* MIGRATED: Pages\Admin\RestaurantSettings.razor.css */
.restaurant-settings-page__form {
    margin-top: 1rem;
}

.restaurant-settings-page__grid {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.7fr);
}

.restaurant-settings-page__identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
}

.restaurant-settings-page__logo {
    width: 8rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 2rem;
    background: var(--surface-warm);
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 900;
}

.restaurant-settings-page__meta {
    display: grid;
    gap: 0.75rem;
}

.restaurant-settings-page__meta div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 960px) {
    .restaurant-settings-page__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .restaurant-settings-page__identity {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* MIGRATED: Pages\Customer\Cart.razor.css */
.customer-menu__brand,
.customer-menu__hero-top,
.customer-menu__hero-copy,
.customer-menu__hero-count,
.customer-menu__category-head,
.customer-menu__sticky-cart-inner,
.customer-cart__nav,
.customer-cart__nav-meta,
.customer-orders__card-head,
.customer-orders__card-footer {
    display: flex;
    gap: 1rem;
}

.customer-menu__brand,
.customer-menu__category-head,
.customer-menu__sticky-cart-inner,
.customer-cart__nav,
.customer-orders__card-head,
.customer-orders__card-footer {
    align-items: center;
    justify-content: space-between;
}

.customer-menu__hero-top {
    align-items: flex-start;
    justify-content: space-between;
}

.customer-menu__welcome-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}

.customer-menu__welcome-card .customer-menu__hero-top {
    display: none;
}

.customer-menu__banner {
    position: relative;
    min-height: 13.5rem;
    overflow: hidden;
    border-radius: clamp(1.6rem, 5vw, 2.4rem);
    isolation: isolate;
    background: var(--zj-surface-container);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 24px 50px rgba(var(--zj-primary-rgb), 0.16);
}

.customer-menu__banner-image,
.customer-menu__banner-overlay {
    position: absolute;
    inset: 0;
}

.customer-menu__banner-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.01);
}

.customer-menu__banner-overlay {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.66)),
        linear-gradient(90deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.32));
}

.customer-menu__banner-copy {
    position: absolute;
    z-index: 2;
    inset-inline: 1.4rem;
    bottom: 1.35rem;
    display: grid;
    gap: 0.18rem;
    color: #fff;
    text-align: start;
}

.customer-menu__banner-copy h1 {
    margin: 0;
    max-width: 16rem;
    font-size: clamp(1.85rem, 8vw, 2.8rem);
    font-weight: 500;
    line-height: 1.05;
    color: rgba(255, 250, 240, 0.94);
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
}

.customer-menu__banner-copy p {
    margin: 0;
    font-size: clamp(0.86rem, 3.4vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 246, 235, 0.88);
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.customer-menu__banner-table {
    position: absolute;
    z-index: 2;
    top: 1rem;
    inset-inline-start: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 2.45rem;
    padding: 0.48rem 0.76rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, 0.36);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 0.78rem;
    font-weight: 800;
}

.customer-menu__banner-table .material-symbols-outlined {
    font-size: 1rem;
}

.customer-menu__banner-table strong {
    font-size: 1rem;
    color: #fff3e8;
}

.customer-menu__hero-copy,
.customer-cart__nav-meta {
    flex-direction: column;
}

.customer-menu__hero-copy,
.customer-cart__nav-meta {
    gap: 0.35rem;
}

.customer-orders__header {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 1.5rem;
}

.customer-orders__banner {
    position: relative;
    min-height: 12.5rem;
    display: grid;
    align-items: end;
    overflow: hidden;
    margin-bottom: 1.1rem;
    padding: 1.25rem;
    border-radius: clamp(1.35rem, 5vw, 2rem);
    isolation: isolate;
    background: var(--zj-surface-container);
    border: 1px solid rgba(255, 255, 255, 0.52);
    box-shadow: 0 22px 50px rgba(var(--zj-primary-rgb), 0.14);
}

.customer-orders__banner img,
.customer-orders__banner-overlay {
    position: absolute;
    inset: 0;
}

.customer-orders__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
}

.customer-orders__banner-overlay {
    z-index: 1;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.68)),
        linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(var(--zj-primary-rgb), 0.28));
}

.customer-orders__banner-copy {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0.18rem;
    color: #fff;
    max-width: 22rem;
}

.customer-orders__banner-copy span {
    width: max-content;
    padding: 0.34rem 0.72rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 248, 238, 0.94);
    font-size: 0.72rem;
    font-weight: 900;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.customer-orders__banner-copy h1 {
    margin: 0;
    font-size: clamp(2rem, 9vw, 3rem);
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
}

.customer-orders__banner-copy p {
    margin: 0;
    color: rgba(255, 246, 235, 0.92);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.7;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}

.customer-orders__banner-count {
    position: absolute;
    z-index: 2;
    top: 1rem;
    inset-inline-start: 1rem;
    min-width: 4.4rem;
    display: grid;
    justify-items: center;
    gap: 0.06rem;
    padding: 0.58rem 0.85rem;
    border-radius: 1rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.customer-orders__banner-count strong {
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
}

.customer-orders__banner-count span {
    font-size: 0.68rem;
    font-weight: 800;
    color: rgba(255, 246, 235, 0.86);
}

.customer-menu__hero-count {
    min-width: 5rem;
    text-align: center;
    padding: 0.9rem 0.75rem;
    border-radius: var(--zj-radius-2xl);
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: var(--zj-shadow-sm);
    position: relative;
}

.customer-menu__session-card {
    padding: 0.9rem 1rem;
    border-radius: var(--zj-radius-2xl);
    background: rgba(255,255,255,0.45);
    border: 1px solid rgba(255,255,255,0.45);
    position: relative;
}

.customer-menu__session-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    position: relative;
}

.customer-menu__grid,
.customer-orders__list {
    display: grid;
    gap: 1rem;
}

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

.customer-menu__sticky-cart {
    position: fixed;
    bottom: 4.75rem;
    left: 0;
    right: 0;
    padding: 0 1rem 1rem;
    z-index: 39;
}

.customer-menu__sticky-cart-inner {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(148,163,184,0.16);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: var(--zj-radius-2xl);
    box-shadow: var(--zj-shadow-xl);
    padding: 0.85rem 1rem;
}

.customer-menu__sticky-cart-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 8rem;
    flex: 1 1 auto;
}

.customer-menu__sticky-cart-copy strong {
    line-height: 1.25;
}

.customer-menu__sticky-cart-items {
    display: block;
    overflow: hidden;
    color: var(--zj-on-surface);
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-menu__sticky-cart-total {
    color: var(--zj-on-surface-variant);
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

.customer-menu__sticky-cart-copy p {
    color: var(--color-text-muted);
    line-height: 1.45;
}

.customer-cart__nav {
    margin-bottom: 1.25rem;
}

.customer-cart__nav-meta {
    text-align: center;
    flex: 1;
}

.customer-orders__filters {
    display: flex;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.customer-orders__list {
    grid-template-columns: 1fr;
}

.customer-orders__card {
    border-radius: var(--zj-radius-2xl);
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.72)),
        radial-gradient(circle at 100% 0%, rgba(var(--zj-primary-rgb), 0.1), transparent 38%);
    border: 1px solid rgba(var(--zj-primary-rgb), 0.12);
    box-shadow: 0 18px 42px rgba(31, 41, 55, 0.06);
    transition: box-shadow var(--zj-transition-fast), transform var(--zj-transition-fast);
}

.customer-orders__card:hover {
    box-shadow: var(--zj-shadow-md);
    transform: translateY(-1px);
}

.customer-orders__card:active {
    transform: translateY(0);
}

.customer-orders__card-head {
    margin-bottom: 0.75rem;
    align-items: flex-start;
}

.customer-orders__session-card {
    display: grid;
    gap: 1rem;
}

.customer-orders__session-head,
.customer-orders__session-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.customer-orders__order-meta {
    display: grid;
    gap: 0.42rem;
}

.customer-orders__order-chip {
    width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(var(--zj-primary-rgb), 0.1);
    color: var(--zj-primary);
    border: 1px solid rgba(var(--zj-primary-rgb), 0.16);
    font-weight: 900;
    direction: ltr;
}

.customer-orders__order-meta time {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    color: var(--zj-on-surface-variant);
    font-size: 0.78rem;
    font-weight: 750;
}

.customer-orders__order-meta time .material-symbols-outlined {
    font-size: 0.95rem;
    color: var(--zj-primary);
}

.customer-orders__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    min-height: 2.2rem;
    padding: 0.42rem 0.75rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 900;
    white-space: nowrap;
    background: rgba(var(--zj-primary-rgb), 0.1);
    color: var(--zj-primary);
    border: 1px solid rgba(var(--zj-primary-rgb), 0.14);
}

.customer-orders__status .material-symbols-outlined {
    font-size: 1rem;
}

.customer-orders__status--preparing {
    background: rgba(245, 158, 11, 0.13);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.18);
}

.customer-orders__status--ready {
    background: rgba(14, 165, 233, 0.13);
    color: #0369a1;
    border-color: rgba(14, 165, 233, 0.18);
}

.customer-orders__status--delivered,
.customer-orders__status--completed {
    background: rgba(5, 150, 105, 0.13);
    color: #047857;
    border-color: rgba(5, 150, 105, 0.18);
}

.customer-orders__status--cancelled {
    background: rgba(220, 38, 38, 0.11);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.16);
}

.customer-orders__items-preview {
    display: grid;
    gap: 0.65rem;
}

.customer-orders__item-preview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.72rem;
    padding: 0.62rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.customer-orders__item-thumb {
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 0.85rem;
    background:
        radial-gradient(circle at center,
            #fffaf5 0%,
            #ffe5d2 38%,
            #ffae73 68%,
            #ff6f18 100%);
    border: 1px solid rgba(var(--zj-primary-rgb), 0.24);
    color: var(--zj-primary);
}

.customer-orders__item-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.customer-orders__item-copy {
    min-width: 0;
    display: grid;
    gap: 0.14rem;
}

.customer-orders__item-copy strong {
    color: var(--zj-on-surface);
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.35;
}

.customer-orders__item-copy span {
    color: var(--zj-on-surface-variant);
    font-size: 0.76rem;
    font-weight: 750;
}

.customer-orders__more-items {
    width: max-content;
    padding: 0.36rem 0.68rem;
    border-radius: 999px;
    background: var(--zj-surface-container);
    color: var(--zj-on-surface-variant);
    font-size: 0.78rem;
    font-weight: 900;
}

.customer-orders__session-footer {
    padding-top: 0.85rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.customer-orders__session-footer div {
    display: grid;
    gap: 0.08rem;
}

.customer-orders__session-footer span {
    color: var(--zj-on-surface-variant);
    font-size: 0.76rem;
    font-weight: 750;
}

.customer-orders__session-footer strong {
    color: var(--zj-primary);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.1;
}

.customer-orders__open-icon {
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(var(--zj-primary-rgb), 0.1);
    color: var(--zj-primary) !important;
    font-size: 1.25rem !important;
}

@media (max-width: 520px) {
    .customer-orders__banner {
        min-height: 11.25rem;
        padding: 1rem;
        border-radius: 1.35rem;
    }

    .customer-orders__banner-copy h1 {
        font-size: 2.15rem;
    }

    .customer-orders__session-head,
    .customer-orders__session-footer {
        align-items: flex-start;
    }

    .customer-orders__session-head {
        flex-direction: column;
    }

    .customer-orders__status {
        width: max-content;
        max-width: 100%;
    }

    .customer-orders__item-preview {
        padding: 0.56rem;
    }

    .customer-orders__session-footer strong {
        font-size: 1.2rem;
    }
}

.customer-cart__layout {
    display: grid;
    grid-template-columns: minmax(0, 36rem) minmax(18rem, 0.8fr);
    justify-content: center;
    gap: 1.5rem;
}

.customer-cart__screen {
    align-content: flex-start;
}

.customer-cart__screen-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--color-text-muted);
}

.customer-cart__screen-top strong {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 1.2rem;
}

.customer-cart__empty {
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    padding: 2rem 1rem;
    text-align: center;
}

.customer-cart__empty .material-symbols-outlined {
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    border-radius: 1.2rem;
    background: var(--surface-accent-soft);
    color: var(--color-primary);
}

.customer-cart__empty p {
    color: var(--color-text-muted);
}

.customer-cart__items {
    display: grid;
    gap: 0.8rem;
}

.customer-cart__item {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-panel) 94%, white);
    border: 1px solid color-mix(in srgb, var(--ghost-border-color) 72%, transparent);
}

.customer-cart__thumb {
    width: 3.4rem;
    height: 3.4rem;
    padding: 0.2rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 1.05rem;
    border: 1px solid rgba(var(--zj-primary-rgb), 0.38);
    background:
        radial-gradient(circle at center,
            #fffaf5 0%,
            #ffe5d2 38%,
            #ffae73 68%,
            #ff6f18 100%);
    box-shadow: 0 12px 26px rgba(var(--zj-primary-rgb), 0.16);
}

.customer-cart__thumb-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 0.82rem;
}

.customer-cart__thumb--placeholder {
    color: var(--zj-primary);
}

.customer-cart__thumb--placeholder .material-symbols-outlined {
    font-size: 1.35rem;
}

.customer-cart__item-copy p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.customer-cart__unit-price {
    display: block;
    width: max-content;
    max-width: 100%;
    color: var(--zj-on-surface-variant);
    font-weight: 850;
    white-space: nowrap;
}

.customer-cart__item-copy strong {
    display: block;
    margin-bottom: 0.2rem;
    line-height: 1.35;
}

.customer-cart__item-side {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.customer-cart__icon,
.customer-cart__delete {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--surface-panel) 90%, white);
    border: 1px solid color-mix(in srgb, var(--ghost-border-color) 72%, transparent);
}

.customer-cart__qty {
    min-width: 2rem;
    text-align: center;
    font-weight: 800;
}

.customer-cart__summary {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(238, 245, 244, 0.9));
    border: 1px solid color-mix(in srgb, var(--ghost-border-color) 72%, transparent);
}

.customer-cart__summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.customer-cart__submit {
    width: 100%;
}

.customer-cart__submit-spinner {
    animation: customer-cart-submit-spin 0.8s linear infinite;
}

@keyframes customer-cart-submit-spin {
    to {
        transform: rotate(360deg);
    }
}

.customer-cart__meta {
    display: grid;
    gap: 0.8rem;
}

.customer-cart__meta div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 960px) {
    .customer-cart__layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .customer-menu__hero-top,
    .customer-menu__category-head,
    .customer-menu__sticky-cart-inner,
    .customer-cart__nav,
    .customer-orders__header,
    .customer-orders__card-head,
    .customer-orders__card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .customer-menu__hero-count {
        width: 100%;
        min-width: 0;
    }

    .customer-menu__banner {
        min-height: 11.8rem;
        border-radius: 1.55rem;
    }

    .customer-menu__banner-copy {
        inset-inline: 1rem;
        bottom: 1rem;
    }

    .customer-menu__banner-table {
        top: 0.8rem;
        inset-inline-start: 0.8rem;
    }

    .customer-menu__grid {
        grid-template-columns: 1fr;
    }

    .customer-menu__sticky-cart {
        padding-inline: 0.75rem;
    }

    .customer-menu__sticky-cart-inner {
        gap: 0.85rem;
        padding: 1rem;
        border-radius: 1.45rem;
    }

    .customer-menu__sticky-cart-inner > *:last-child,
    .customer-cart__nav > *:first-child,
    .customer-orders__filters > * {
        width: 100%;
    }

    .customer-orders__filters .filter-pill {
        flex: 1 1 100%;
        text-align: center;
    }

    .customer-orders__card {
        padding: 1rem;
    }

    .customer-orders__card-footer {
        gap: 0.6rem;
    }

    .customer-cart__item {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 0.9rem;
    }

    .customer-cart__thumb {
        width: 3.1rem;
        height: 3.1rem;
        border-radius: 0.95rem;
    }

    .customer-cart__item-side {
        justify-content: flex-start;
        gap: 0.65rem;
        flex-wrap: wrap;
    }

    .customer-cart__delete {
        justify-self: flex-start;
    }

    .customer-cart__icon,
    .customer-cart__delete {
        width: 2.65rem;
        height: 2.65rem;
        border-radius: 1rem;
    }

    .customer-cart__qty {
        min-width: 2.5rem;
        font-size: 1rem;
    }

    .customer-cart__summary,
    .order-tracking__ticket,
    .order-tracking__summary {
        padding: 1.1rem;
    }

    .order-tracking__step {
        gap: 1rem;
    }

    .order-tracking__dot {
        width: 1.1rem;
        height: 1.1rem;
    }
}

@media (max-width: 420px) {
    .customer-menu__sticky-cart {
        padding-inline: 0.5rem;
        padding-bottom: 0.75rem;
    }

    .customer-menu__session-card,
    .customer-orders__card,
    .customer-cart__item,
    .customer-cart__summary,
    .order-tracking__ticket,
    .order-tracking__summary {
        border-radius: 1.25rem;
    }

    .customer-menu__hero-count {
        padding: 0.8rem 0.7rem;
    }
}


/* MIGRATED: Pages\Customer\Menu.razor.css */
.customer-menu-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.customer-menu-page__hero {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #f8fafc, #ecfeff);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.customer-menu-page__eyebrow {
    color: #0f766e;
    margin-bottom: 0.5rem;
}

.customer-menu-page__hero h1 {
    margin: 0 0 0.75rem;
}

.customer-menu-page__hero p {
    margin: 0;
    color: #475569;
}

.customer-menu-page__hero-card,
.customer-menu-page__session {
    padding: 1rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.customer-menu-page__api {
    margin-top: 0.75rem;
    color: #0f172a;
}

.customer-menu-page__session-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.customer-menu-page__content {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.customer-menu-page__section-title {
    font-weight: 700;
    margin-bottom: 1rem;
}

.customer-menu-page__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

@media (max-width: 900px) {
    .customer-menu-page__hero,
    .customer-menu-page__content {
        grid-template-columns: 1fr;
    }
}


/* MIGRATED: Pages\Customer\OrderTracking.razor.css */
.order-tracking__wrap {
    display: flex;
    justify-content: center;
}

.order-tracking__screen {
    align-content: flex-start;
}

.order-tracking__success {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    text-align: center;
}

.order-tracking__success-icon {
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    border-radius: 1.25rem;
    background: var(--surface-success-soft);
    color: var(--color-success-ink);
}

.order-tracking__success p {
    color: var(--color-text-muted);
}

.order-tracking__ticket,
.order-tracking__summary {
    display: grid;
    gap: 0.7rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-panel) 94%, white);
    border: 1px solid color-mix(in srgb, var(--ghost-border-color) 72%, transparent);
}

.order-tracking__ticket span {
    color: var(--color-text-muted);
}

.order-tracking__ticket strong {
    font-family: var(--font-display);
    font-size: 1.4rem;
}

.order-tracking__timeline {
    display: grid;
    gap: 0.9rem;
}

.order-tracking__step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    color: var(--color-text-muted);
}

.order-tracking__step.is-active {
    color: var(--color-text);
}

.order-tracking__dot {
    width: 1rem;
    height: 1rem;
    margin-top: 0.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-outline) 32%, transparent);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-outline) 10%, transparent);
}

.order-tracking__step.is-active .order-tracking__dot {
    background: var(--color-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.order-tracking__summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.order-tracking__actions {
    display: grid;
    gap: 0.7rem;
}

.order-tracking__actions > * {
    width: 100%;
}

.order-tracking-spice {
    display: grid;
    gap: 1.55rem;
}

.order-tracking-spice__hero {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    text-align: center;
    padding-block: 0.5rem 0.2rem;
}

.order-tracking-spice__success-ring {
    width: 6.8rem;
    height: 6.8rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(var(--zj-primary-rgb), 0.1);
    color: var(--zj-primary);
}

.order-tracking-spice__success-ring .material-symbols-outlined {
    width: 3.1rem;
    height: 3.1rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--zj-primary);
    color: var(--zj-on-primary);
    font-size: 2rem;
    font-variation-settings: "FILL" 1, "wght" 800, "GRAD" 0, "opsz" 32;
}

.order-tracking-spice__hero h1 {
    margin: 0;
    font-size: clamp(2rem, 8vw, 2.85rem);
    font-weight: 900;
    line-height: 1.08;
    color: var(--zj-on-surface);
}

.order-tracking-spice__hero p {
    margin: 0;
    max-width: 24rem;
    color: var(--zj-on-surface-variant);
    font-size: 1rem;
    line-height: 1.8;
}

.order-tracking-spice__number-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.62rem 1.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-panel) 92%, white);
    border: 1px solid color-mix(in srgb, var(--ghost-border-color) 72%, transparent);
    color: var(--zj-on-surface-variant);
}

.order-tracking-spice__number-pill strong {
    color: var(--zj-primary);
    font-size: 1.05rem;
    font-weight: 900;
    direction: ltr;
}

.order-tracking-spice__progress-card,
.order-tracking-spice__total-card {
    position: relative;
    overflow: hidden;
    padding: 1.25rem;
    border-radius: 1.7rem;
    background: color-mix(in srgb, var(--surface-panel) 94%, white);
    border: 1px solid color-mix(in srgb, var(--ghost-border-color) 72%, transparent);
    box-shadow: 0 20px 46px rgba(var(--zj-primary-rgb), 0.08);
}

.order-tracking-spice__progress-card::before {
    content: "";
    position: absolute;
    top: -2.5rem;
    inset-inline-end: -2.5rem;
    width: 8rem;
    height: 8rem;
    border-radius: 999px;
    background: rgba(var(--zj-primary-rgb), 0.06);
}

.order-tracking-spice__section-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.2rem;
}

.order-tracking-spice__section-head h2,
.order-tracking-spice__items h2 {
    margin: 0;
    color: var(--zj-on-surface);
    font-size: 1.25rem;
    font-weight: 900;
}

.order-tracking-spice__section-head span {
    padding: 0.36rem 0.85rem;
    border-radius: 999px;
    background: rgba(var(--zj-secondary-rgb), 0.14);
    color: var(--zj-secondary);
    font-size: 0.78rem;
    font-weight: 900;
}

.order-tracking-spice__steps {
    --progress: 18%;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.order-tracking-spice__steps::before,
.order-tracking-spice__steps::after {
    content: "";
    position: absolute;
    top: 1.25rem;
    inset-inline-start: 0;
    height: 2px;
    border-radius: 999px;
}

.order-tracking-spice__steps::before {
    width: 100%;
    background: var(--zj-surface-container-high);
}

.order-tracking-spice__steps::after {
    width: var(--progress);
    background: var(--zj-primary);
}

.order-tracking-spice__step {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    min-width: 4.5rem;
    color: var(--zj-on-surface-variant);
    opacity: 0.65;
}

.order-tracking-spice__step-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--zj-surface-container-high);
    color: inherit;
    font-size: 1.25rem;
}

.order-tracking-spice__step.is-active {
    opacity: 1;
    color: var(--zj-primary);
}

.order-tracking-spice__step.is-active .order-tracking-spice__step-icon {
    background: var(--zj-primary);
    color: var(--zj-on-primary);
    font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 24;
}

.order-tracking-spice__step strong {
    font-size: 0.72rem;
    font-weight: 900;
    text-align: center;
    line-height: 1.35;
}

.order-tracking-spice__items {
    display: grid;
    gap: 0.85rem;
}

.order-tracking-spice__item-list {
    display: grid;
    gap: 0.85rem;
}

.order-tracking-spice__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 1.35rem;
    background: color-mix(in srgb, var(--surface-panel) 94%, white);
    border: 1px solid color-mix(in srgb, var(--ghost-border-color) 72%, transparent);
}

.order-tracking-spice__item-thumb,
.customer-orders__session-thumb {
    width: 4.2rem;
    height: 4.2rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
    border-radius: 1rem;
    background:
        radial-gradient(circle at center,
            #fffaf5 0%,
            #ffe5d2 38%,
            #ffae73 68%,
            #ff6f18 100%);
    border: 1px solid rgba(var(--zj-primary-rgb), 0.28);
    color: var(--zj-primary);
}

.order-tracking-spice__item-thumb img,
.customer-orders__session-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.order-tracking-spice__item-copy {
    min-width: 0;
}

.order-tracking-spice__item-copy h3 {
    margin: 0;
    color: var(--zj-on-surface);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.35;
}

.order-tracking-spice__item-copy p {
    margin: 0.2rem 0 0;
    color: var(--zj-on-surface-variant);
    font-size: 0.82rem;
}

.order-tracking-spice__item-price {
    color: var(--zj-primary);
    font-weight: 900;
    white-space: nowrap;
}

.order-tracking-spice__total-card {
    display: grid;
    gap: 0.8rem;
}

.order-tracking-spice__total-card div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.order-tracking-spice__total-card span {
    color: var(--zj-on-surface-variant);
}

.order-tracking-spice__total-card hr {
    width: 100%;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--ghost-border-color) 70%, transparent);
}

.order-tracking-spice__grand-total span {
    color: var(--zj-on-surface);
    font-size: 1.05rem;
    font-weight: 900;
}

.order-tracking-spice__grand-total strong {
    color: var(--zj-primary);
    font-size: 1.55rem;
    font-weight: 900;
}

.order-tracking-spice__actions {
    display: grid;
    grid-template-columns: 0.85fr 1.4fr;
    gap: 0.85rem;
}

.order-tracking-spice__actions > * {
    justify-content: center;
}

.customer-orders__session-card {
    display: grid;
    gap: 0.85rem;
}

.customer-orders__session-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
}

.customer-orders__session-thumb {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 0.95rem;
}

@media (max-width: 520px) {
    .order-tracking-spice__progress-card,
    .order-tracking-spice__total-card {
        padding: 1rem;
        border-radius: 1.35rem;
    }

    .order-tracking-spice__section-head {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 1.65rem;
    }

    .order-tracking-spice__steps {
        gap: 0.25rem;
    }

    .order-tracking-spice__step {
        min-width: 3.9rem;
    }

    .order-tracking-spice__step-icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.1rem;
    }

    .order-tracking-spice__step strong {
        font-size: 0.64rem;
    }

    .order-tracking-spice__item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .order-tracking-spice__item-price {
        grid-column: 2;
        justify-self: start;
    }

    .order-tracking-spice__actions {
        grid-template-columns: 1fr;
    }
}


/* MIGRATED: Pages\Profile\ProfileBasics.razor.css */
.profile-page,
.profile-page__grid {
    display: grid;
    gap: 1.5rem;
}

.profile-page__hero,
.profile-page__panel,
.profile-page__sessions-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(243,244,255,0.92));
    border: 1px solid rgba(70, 89, 169, 0.08);
    box-shadow: 0 24px 48px rgba(24, 34, 70, 0.06);
}

.profile-page__hero {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1.8rem 2rem;
    border-radius: 2rem;
}

.profile-page__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.profile-page__role-chip {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.14);
    color: #0f7b3b;
    font-size: 0.74rem;
    font-weight: 800;
}

.profile-page__meta small,
.profile-page__hero-copy p,
.profile-page__insight-card p,
.profile-page__insight-card span,
.profile-page__insight-card small {
    color: var(--color-text-muted);
}

.profile-page__hero-copy h1 {
    margin: 0 0 0.3rem;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
}

.profile-page__hero-copy p {
    margin: 0;
    font-size: 1.05rem;
}

.profile-page__hero-actions {
    display: flex;
    gap: 0.75rem;
}

.profile-page__hero-actions button,
.profile-page__security-item button,
.profile-page__avatar-shell button {
    border: 0;
    cursor: pointer;
    font: inherit;
}

.profile-page__ghost-action,
.profile-page__primary-action {
    padding: 0.9rem 1.15rem;
    border-radius: 1rem;
    font-weight: 700;
}

.profile-page__ghost-action {
    background: rgba(92, 111, 193, 0.12);
    color: var(--color-primary);
}

.profile-page__primary-action {
    background: var(--color-primary);
    color: white;
}

.profile-page__avatar-shell {
    position: relative;
}

.profile-page__avatar {
    display: grid;
    place-items: center;
    width: 8rem;
    height: 8rem;
    border-radius: 1.8rem;
    background: linear-gradient(180deg, rgba(16, 24, 40, 0.9), rgba(68, 86, 166, 0.9));
    color: white;
    font-size: 2.35rem;
    font-weight: 800;
    box-shadow: 0 22px 40px rgba(16, 24, 40, 0.22);
}

.profile-page__avatar-shell button {
    position: absolute;
    inset-inline-start: -0.2rem;
    inset-block-end: -0.2rem;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.95rem;
    background: #0b7b63;
    color: white;
}

.profile-page__grid {
    grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.8fr);
}

.profile-page__rail {
    display: grid;
    gap: 1rem;
}

.profile-page__insight-card {
    display: grid;
    gap: 0.65rem;
    padding: 1.5rem;
    border-radius: 1.8rem;
    background: linear-gradient(180deg, #5467ce, #4659b3);
    color: white;
    box-shadow: 0 24px 46px rgba(69, 88, 181, 0.24);
}

.profile-page__insight-card p,
.profile-page__insight-card span,
.profile-page__insight-card small {
    margin: 0;
    color: rgba(255,255,255,0.78);
}

.profile-page__insight-card strong {
    font-size: 2rem;
    font-weight: 800;
}

.profile-page__progress {
    height: 0.25rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.18);
}

.profile-page__progress i {
    display: block;
    width: 75%;
    height: 100%;
    background: white;
}

.profile-page__sessions-card,
.profile-page__panel {
    padding: 1.5rem;
    border-radius: 1.8rem;
}

.profile-page__sessions-card h2,
.profile-page__panel h2 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.profile-page__sessions-card {
    display: grid;
    gap: 0.9rem;
}

.profile-page__sessions-card div {
    display: grid;
    gap: 0.2rem;
}

.profile-page__sessions-card strong {
    font-size: 0.95rem;
}

.profile-page__sessions-card small {
    color: var(--color-text-muted);
}

.profile-page__content {
    display: grid;
    gap: 1rem;
}

.profile-page__panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.profile-page__form {
    display: grid;
    gap: 1rem;
}

.profile-page__readonly-grid {
    display: grid;
    gap: 1rem;
}

.profile-page__readonly-grid label,
.profile-page__readonly label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.profile-page__readonly-grid > div > div,
.profile-page__readonly > div {
    min-height: 3.4rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    background: rgba(92, 111, 193, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--color-text);
}

.profile-page__security-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(92, 111, 193, 0.08);
}

.profile-page__security-item strong {
    display: block;
    margin-bottom: 0.3rem;
}

.profile-page__security-item p {
    margin: 0;
    color: var(--color-text-muted);
}

.profile-page__security-item button {
    padding: 0.8rem 1rem;
    border-radius: 0.9rem;
    background: white;
    color: var(--color-primary);
    font-weight: 700;
}

@media (max-width: 980px) {
    .profile-page__hero,
    .profile-page__grid {
        grid-template-columns: 1fr;
    }
}


/* MIGRATED: Pages\Static\About.razor.css */
.about-page {
    display: grid;
    gap: 1.8rem;
}

.about-page__hero,
.about-page__card,
.about-page__specs {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(243,244,255,0.92));
    border: 1px solid rgba(70, 89, 169, 0.08);
    box-shadow: 0 24px 48px rgba(24, 34, 70, 0.06);
}

.about-page__hero {
    display: grid;
    grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.4fr);
    gap: 1.5rem;
    align-items: center;
    padding: 2rem;
    border-radius: 2rem;
}

.about-page__visual {
    display: grid;
    place-items: center;
}

.about-page__visual-core {
    display: grid;
    place-items: center;
    width: 16rem;
    height: 16rem;
    border-radius: 2rem;
    background:
        radial-gradient(circle at top, rgba(68, 86, 166, 0.18), transparent 55%),
        linear-gradient(180deg, #111827, #202b51);
    color: rgba(255,255,255,0.82);
    font-size: 3.5rem;
    font-weight: 800;
    box-shadow: 0 28px 60px rgba(16, 24, 40, 0.22);
    transform: rotate(-6deg);
}

.about-page__eyebrow {
    margin: 0 0 0.75rem;
    color: var(--color-success);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.about-page__copy h1 {
    margin: 0 0 0.8rem;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
}

.about-page__copy h1 span {
    display: block;
    color: rgba(68, 86, 166, 0.38);
}

.about-page__copy p {
    max-width: 38rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.9;
}

.about-page__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.about-page__card {
    padding: 1.45rem;
    border-radius: 1.6rem;
}

.about-page__card h2,
.about-page__specs h2 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    font-weight: 800;
}

.about-page__card p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.8;
}

.about-page__card > span.material-symbols-outlined {
    margin-bottom: 0.9rem;
    color: var(--color-primary);
    font-size: 1.7rem;
}

.about-page__card--highlight {
    display: grid;
    gap: 0.5rem;
    background: linear-gradient(180deg, #5467ce, #4659b3);
    color: white;
    box-shadow: 0 24px 46px rgba(69, 88, 181, 0.24);
}

.about-page__card--highlight span,
.about-page__card--highlight small {
    color: rgba(255,255,255,0.82);
}

.about-page__card--highlight strong {
    font-size: 2.4rem;
    font-weight: 800;
}

.about-page__card--soft {
    background: linear-gradient(180deg, rgba(186, 233, 221, 0.9), rgba(186, 233, 221, 0.78));
}

.about-page__specs {
    padding: 1.6rem;
    border-radius: 1.8rem;
}

.about-page__spec-list {
    display: grid;
    gap: 0.9rem;
}

.about-page__spec-list div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: rgba(255,255,255,0.78);
}

.about-page__spec-list span {
    color: var(--color-primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.about-page__spec-list strong {
    font-size: 1.05rem;
}

.about-page__spec-list small {
    color: var(--color-text-muted);
    font-family: "Consolas", "IBM Plex Mono", monospace;
}

.about-page__footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
}

.about-page__footer strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1.2rem;
}

.about-page__footer p,
.about-page__footer small,
.about-page__footer span {
    margin: 0;
    color: var(--color-text-muted);
}

@media (max-width: 980px) {
    .about-page__hero,
    .about-page__grid {
        grid-template-columns: 1fr;
    }
}


/* MIGRATED: Pages\Static\ContactUs.razor.css */
.contact-page {
    display: grid;
    gap: 2rem;
    max-width: 72rem;
    margin: 0 auto;
}

.contact-page__eyebrow {
    margin: 0 0 0.6rem;
    color: var(--color-success);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.contact-page__header h1 {
    margin: 0 0 0.6rem;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.contact-page__subtitle {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.8;
}

.contact-page__grid {
    display: grid;
    grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.4fr);
    gap: 1.5rem;
    align-items: start;
}

.contact-page__info {
    display: grid;
    gap: 1rem;
}

.contact-page__info-card {
    padding: 1.4rem;
    border-radius: var(--radius-lg);
    background: var(--surface-panel);
    border: var(--panel-border);
    box-shadow: var(--ambient-shadow-soft);
}

.contact-page__info-card .material-symbols-outlined {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--color-primary);
    font-size: 1.6rem;
}

.contact-page__info-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 800;
}

.contact-page__info-card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.7;
}

.contact-page__info-card a {
    color: var(--color-primary);
    font-weight: 700;
}

.contact-page__info-card--highlight {
    background: var(--brand-gradient);
    border: none;
    color: #fff;
    box-shadow: 0 24px 46px rgba(69, 88, 181, 0.24);
}

.contact-page__info-card--highlight .material-symbols-outlined,
.contact-page__info-card--highlight h3 {
    color: #fff;
}

.contact-page__info-card--highlight p {
    color: rgba(255, 255, 255, 0.8);
}

.contact-page__form-shell {
    background: var(--surface-panel);
    border: var(--panel-border);
    box-shadow: var(--ambient-shadow);
    border-radius: var(--radius-lg);
    padding: 2rem;
}

.contact-page__form {
    display: grid;
    gap: 1.25rem;
}

.contact-page__textarea {
    resize: vertical;
    min-height: 8rem;
}

.contact-page__success {
    display: grid;
    gap: 1rem;
    text-align: center;
    padding: 2rem 1rem;
}

.contact-page__success .material-symbols-outlined {
    font-size: 3rem;
    color: var(--color-success);
    margin: 0 auto;
}

.contact-page__success h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
}

.contact-page__success p {
    margin: 0;
    color: var(--color-text-muted);
}

.contact-page__reset {
    justify-self: center;
    padding: 0.85rem 1.5rem;
    border: 0;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 860px) {
    .contact-page__grid {
        grid-template-columns: 1fr;
    }
}


/* MIGRATED: Pages\NotFound.razor.css */
.error-pages {
    min-height: calc(100vh - 10rem);
    display: flex;
    align-items: center;
    padding: 2rem 0;
}

.error-pages__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 3rem;
    align-items: center;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
}

.error-pages__divider {
    width: 1px;
    height: 24rem;
    background: linear-gradient(180deg, transparent, var(--color-border) 25%, var(--color-border) 75%, transparent);
    opacity: 0.4;
}

.error-pages__panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.error-pages__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 0.5rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    border: 1px solid color-mix(in srgb, var(--color-border) 14%, transparent);
}

.error-pages__art {
    position: absolute;
    inset: 0;
}

.error-pages__art--404 {
    background:
        radial-gradient(circle at 25% 20%, rgba(255,255,255,0.8), transparent 28%),
        radial-gradient(circle at 70% 32%, rgba(255,255,255,0.65), transparent 34%),
        linear-gradient(180deg, #c8d8e8, #7e97a8 44%, #dde6ea 100%);
}

.error-pages__art--403 {
    background:
        radial-gradient(circle at 30% 40%, rgba(68,86,166,0.14), transparent 46%),
        radial-gradient(circle at 75% 20%, rgba(59,102,93,0.1), transparent 38%),
        linear-gradient(180deg, #1e2438, #2b3255 50%, #1c2030 100%);
}

.error-pages__badge {
    width: 8rem;
    height: 8rem;
    border-radius: 999px;
    background: var(--color-surface-low);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.error-pages__badge::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-primary) 20%, transparent);
    opacity: 0.2;
    border-radius: inherit;
}

.error-pages__badge span {
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-primary);
    position: relative;
    letter-spacing: -0.04em;
}

.error-pages__badge--secondary span {
    color: var(--color-secondary);
}

.error-pages__panel h1 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.error-pages__panel h1 span {
    color: var(--color-primary);
}

.error-pages__accent--secondary {
    color: var(--color-secondary) !important;
}

.error-pages__panel p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.8;
    max-width: 30rem;
}

.error-pages__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.error-pages__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.error-pages__btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    text-decoration: none;
}

.error-pages__btn--primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.error-pages__btn--secondary {
    background: color-mix(in srgb, var(--color-secondary) 16%, transparent);
    color: var(--color-secondary);
}

.error-pages__btn--secondary-dark {
    background: color-mix(in srgb, var(--color-secondary) 16%, transparent);
    color: var(--color-secondary);
}

.error-pages__ref {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-outline);
    font-size: 0.78rem;
    margin-top: 0.5rem;
}

.error-pages__ref .material-symbols-outlined {
    font-size: 0.95rem;
}

@media (max-width: 860px) {
    .error-pages__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .error-pages__divider {
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--color-border) 25%, var(--color-border) 75%, transparent);
    }
}

.customer-menu__category-grid {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block: 0.15rem 0.85rem;
    scroll-snap-type: x mandatory;
}

.customer-menu__category-card {
    flex: 0 0 clamp(9.5rem, 32vw, 11.25rem);
    min-height: 8.25rem;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.45rem;
    padding: 0.9rem;
    border: 1px solid rgba(var(--zj-outline-rgb), 0.16);
    border-radius: var(--zj-radius-xl);
    background: var(--zj-surface);
    color: var(--zj-on-surface);
    box-shadow: var(--ambient-shadow-soft);
    text-align: center;
    scroll-snap-align: start;
}

.customer-menu__category-card-icon {
    width: 2.65rem;
    height: 2.65rem;
    display: grid;
    place-items: center;
    border-radius: var(--zj-radius-lg);
    background: rgba(var(--zj-primary-rgb), 0.1);
    color: var(--zj-primary);
}

.customer-menu__category-card strong {
    font-weight: 950;
    line-height: 1.35;
}

.customer-menu__category-card small {
    color: var(--zj-on-surface-variant);
    font-weight: 800;
}

.customer-menu__category-card--active {
    border-color: rgba(var(--zj-primary-rgb), 0.38);
    background: linear-gradient(180deg, rgba(var(--zj-primary-rgb), 0.12), var(--zj-surface));
    box-shadow: 0 1rem 2rem rgba(var(--zj-primary-rgb), 0.12);
}

.customer-menu__category-card--active .customer-menu__category-card-icon {
    background: var(--zj-primary);
    color: var(--zj-on-primary);
}

.customer-menu__browser,
.customer-menu__details,
.customer-menu__option-groups {
    display: grid;
    gap: 1rem;
}

.customer-menu__browser {
    padding-top: 1rem;
}

.customer-cart__item > div:first-child {
    min-width: 0;
}

.customer-menu__browser-tools {
    position: sticky;
    top: 0;
    z-index: 34;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.65rem 0;
    background: rgba(244, 251, 255, 0.88);
    border-bottom: 1px solid rgba(var(--zj-outline-rgb), 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.customer-menu__search {
    min-height: 3rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.9rem;
    border-radius: var(--zj-radius-xl);
    background: var(--zj-surface);
    border: 1px solid rgba(var(--zj-outline-rgb), 0.18);
    box-shadow: 0 0.5rem 1.4rem rgba(22, 29, 29, 0.05);
}

.customer-menu__search > .material-symbols-outlined {
    color: var(--zj-primary);
    font-size: 1.25rem;
}

.customer-menu__search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.7rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--zj-on-surface);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 750;
}

.customer-menu__search button,
.customer-menu__layout-button {
    border: 0;
    cursor: pointer;
    color: var(--zj-on-surface-variant);
    background: transparent;
}

.customer-menu__search button {
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    border-radius: var(--zj-radius-full);
}

.customer-menu__layout-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(var(--zj-outline-rgb), 0.15);
}

.customer-menu__layout-button {
    width: 2.4rem;
    height: 2.15rem;
    display: inline-grid;
    place-items: center;
    border-radius: 0.8rem;
}

.customer-menu__layout-button--active {
    color: var(--zj-on-primary);
    background: var(--zj-secondary);
    box-shadow: 0 0.5rem 1.2rem rgba(23, 37, 84, 0.18);
}

.customer-menu__grid--grid {
    grid-template-columns: repeat(auto-fill, minmax(10.75rem, 1fr));
}

.customer-menu__grid--list {
    grid-template-columns: minmax(0, 1fr);
}

.customer-menu__grid--editorial {
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}

.customer-menu__offer-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.85rem;
}

.customer-menu__offer-list--horizontal {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block: 0.1rem 0.75rem;
}

.customer-menu__offer-card {
    flex: 0 0 min(16rem, 78vw);
    display: grid;
    gap: 0.65rem;
    overflow: hidden;
    text-align: start;
    border: 0;
    border-radius: 1.35rem;
    padding: 0;
    color: #fff;
    background: #172554;
    box-shadow: 0 1rem 2.2rem rgba(23, 37, 84, 0.18);
    scroll-snap-align: start;
}

.customer-menu__offer-card--disabled {
    opacity: 0.72;
}

.customer-menu__offer-image {
    position: relative;
    min-height: 7rem;
    display: block;
    overflow: hidden;
}

.customer-menu__offer-image img {
    width: 100%;
    height: 100%;
    min-height: 7rem;
    display: block;
    object-fit: cover;
}

.customer-menu__offer-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.54));
}

.customer-menu__offer-badge,
.customer-menu__offer-remaining,
.customer-menu__offer-unavailable {
    position: absolute;
    z-index: 2;
}

.customer-menu__offer-badge {
    top: 0.75rem;
    inset-inline-start: 0.75rem;
    padding: 0.28rem 0.65rem;
    border-radius: var(--zj-radius-full);
    color: #e0f2fe;
    background: rgba(var(--zj-primary-rgb), 0.9);
    font-size: 0.72rem;
    font-weight: 900;
}

.customer-menu__offer-remaining {
    bottom: 0.75rem;
    inset-inline-end: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--zj-radius-full);
    color: #fef3c7;
    background: rgba(15, 23, 42, 0.72);
    font-size: 0.72rem;
    font-weight: 900;
}

.customer-menu__offer-unavailable {
    inset: 0;
    display: grid;
    place-items: center;
    gap: 0.25rem;
    padding: 1rem;
    text-align: center;
    color: #fff;
    background: rgba(15, 23, 42, 0.68);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 850;
}

.customer-menu__offer-copy {
    display: grid;
    gap: 0.2rem;
    padding: 0.8rem 0.95rem 1rem;
    background: #172554;
}

.customer-menu__offer-copy strong {
    color: #fff;
    font-size: 0.98rem;
    font-weight: 950;
    line-height: 1.35;
}

.customer-menu__offer-copy small {
    color: #e0f2fe;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.55;
}

.menu-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8rem, 12rem);
    align-items: stretch;
    position: relative;
    overflow: hidden;
}

.menu-card__media {
    grid-column: 2;
    grid-row: 1;
    min-height: 100%;
    position: relative;
    z-index: 1;
}

.menu-card__content {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 2;
}

.menu-card__details {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    background: transparent;
    color: var(--zj-primary);
    font-weight: 900;
    padding: 0.25rem 0;
}

.menu-card--grid {
    grid-template-columns: minmax(0, 1fr);
}

.menu-card--grid .menu-card__media,
.menu-card--grid .menu-card__content {
    grid-column: 1;
}

.menu-card--grid .menu-card__media {
    min-height: 7.6rem;
}

.menu-card--list {
    grid-template-columns: minmax(0, 1fr) minmax(6rem, 7.5rem);
}

.menu-card--editorial {
    min-height: 16rem;
    grid-template-columns: minmax(0, 1fr);
    color: #fff;
    background: #172554;
}

.menu-card--editorial .menu-card__media,
.menu-card--editorial .menu-card__content {
    grid-column: 1;
    grid-row: 1;
}

.menu-card--editorial .menu-card__media {
    min-height: 16rem;
}

.menu-card--editorial .menu-card__overlay {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.78));
}

.menu-card--editorial .menu-card__content {
    align-self: end;
    color: #fff;
    background: transparent;
}

.menu-card--editorial .menu-card__title,
.menu-card--editorial .menu-card__description,
.menu-card--editorial .menu-card__category {
    color: #fff;
}

.menu-card__stock-pill {
    position: absolute;
    z-index: 3;
    top: 0.7rem;
    inset-inline-start: 0.7rem;
    padding: 0.25rem 0.58rem;
    border-radius: var(--zj-radius-full);
    color: #fef3c7;
    background: rgba(15, 23, 42, 0.74);
    font-size: 0.72rem;
    font-weight: 950;
}

@media (min-width: 900px) {
    .customer-shell .customer-container {
        max-width: min(100% - 4rem, 72rem);
    }

    .customer-menu__welcome-card {
        max-width: 48rem;
        margin-inline: auto;
    }

    .customer-menu__grid--grid {
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    }

    .customer-menu__grid--editorial {
        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    }

    .customer-menu__sticky-cart {
        padding-inline: 2rem;
    }

    .customer-menu__sticky-cart .customer-container {
        max-width: min(100% - 4rem, 42rem);
    }
}

.customer-menu__details-nav {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
}

.customer-menu__details-nav h1 {
    margin: 0;
    color: var(--zj-on-surface);
    font-size: 1.3rem;
    font-weight: 950;
    text-align: center;
}

.customer-menu__details-image {
    min-height: 16rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--zj-radius-2xl);
    background: var(--zj-surface-container);
    color: var(--zj-primary);
}

.customer-menu__details-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.customer-menu__details-image--placeholder .material-symbols-outlined {
    font-size: 4rem;
}

.customer-menu__details-copy {
    display: grid;
    gap: 0.3rem;
}

.customer-menu__details-copy h2,
.customer-menu__option-group h3 {
    margin: 0;
    color: var(--zj-on-surface);
    font-weight: 950;
}

.customer-menu__details-copy p,
.customer-menu__option-group p {
    margin: 0;
    color: var(--zj-on-surface-variant);
    line-height: 1.7;
}

.customer-menu__option-group {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: var(--zj-radius-xl);
    background: var(--zj-surface);
    border: 1px solid rgba(var(--zj-outline-rgb), 0.14);
}

.customer-menu__option-group-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.customer-menu__option-group-head > span {
    border-radius: var(--zj-radius-full);
    background: rgba(var(--zj-primary-rgb), 0.1);
    color: var(--zj-primary);
    padding: 0.32rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 900;
}

.customer-menu__option-list {
    display: grid;
    gap: 0.55rem;
}

.customer-menu__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3rem;
    border: 1px solid var(--zj-outline-variant);
    border-radius: var(--zj-radius-lg);
    background: var(--zj-surface);
    color: var(--zj-on-surface);
    padding: 0.75rem 0.9rem;
    font-weight: 850;
}

.customer-menu__option--selected {
    border-color: var(--zj-primary);
    background: rgba(var(--zj-primary-rgb), 0.08);
}

.customer-menu__details-submit {
    position: sticky;
    bottom: 5.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem;
    border-radius: var(--zj-radius-xl);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--zj-shadow-xl);
}

.customer-menu__details-submit div {
    display: grid;
    gap: 0.1rem;
}

.customer-menu__details-submit span {
    color: var(--zj-on-surface-variant);
    font-size: 0.78rem;
    font-weight: 800;
}

.customer-menu__details-submit strong {
    color: var(--zj-on-surface);
    font-size: 1.1rem;
    font-weight: 950;
}

.customer-cart__edit {
    justify-self: end;
}

.customer-cart__item {
    grid-template-columns: minmax(12rem, 1fr) auto auto auto;
}

.customer-cart__action-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    border: 1px solid rgba(var(--zj-outline-rgb), 0.14);
    border-radius: var(--zj-radius-xl);
    background: var(--zj-surface);
    color: var(--zj-on-surface);
    padding: 1rem;
    text-align: start;
    box-shadow: var(--ambient-shadow-soft);
}

.customer-cart__action-row small {
    grid-column: 2 / -1;
    color: var(--zj-on-surface-variant);
    font-weight: 750;
}

.customer-cart__action-row--coupon .material-symbols-outlined {
    color: var(--zj-error);
}

.customer-cart__tax-note {
    color: #b45309;
    font-weight: 850;
    text-align: end;
}

.customer-cart__points-note {
    padding: 0.85rem;
    border-radius: var(--zj-radius-lg);
    background: #fff7ed;
    color: #9a3412;
}

@media (max-width: 640px) {
    .customer-menu__category-grid {
        gap: 0.6rem;
    }

.customer-menu__category-card {
        flex-basis: 10.5rem;
        min-height: 7rem;
        padding: 0.65rem 0.45rem;
    }

    .menu-card {
        grid-template-columns: minmax(0, 1fr) 8rem;
    }

    .customer-menu__details-submit,
    .customer-menu__details-nav {
        grid-template-columns: 1fr;
    }

    .customer-menu__details-submit {
        align-items: stretch;
        flex-direction: column;
    }

    .customer-cart__item {
        grid-template-columns: 1fr;
    }
}

/* Customer Blue Ocean Editorial redesign */
.customer-shell {
    min-height: 100dvh;
    background:
        radial-gradient(circle at 15% 0%, rgba(125, 211, 252, 0.24), transparent 28rem),
        linear-gradient(180deg, #f4fbff 0%, #eef7fc 100%);
    color: #0f172a;
}

.customer-design {
    --customer-navy: #172554;
    --customer-sky: #0ea5e9;
    --customer-sky-soft: rgba(14, 165, 233, 0.1);
    --customer-hairline: rgba(148, 163, 184, 0.2);
    --customer-muted: #475569;
    --customer-panel: rgba(255, 255, 255, 0.88);
    max-width: min(100% - 2rem, 54rem);
}

.customer-design--cart,
.customer-design--orders {
    max-width: min(100% - 2rem, 64rem);
}

.customer-design__header {
    min-height: 3.25rem;
    padding: 0.35rem 0 1rem !important;
}

.customer-design__table-chip {
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.48rem 0.82rem;
    border-radius: 999px;
    background: var(--customer-navy);
    color: #e0f2fe;
    box-shadow: 0 0.75rem 1.6rem rgba(23, 37, 84, 0.18);
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
}

.customer-design__table-chip .material-symbols-outlined {
    font-size: 1.05rem;
}

.customer-design__warning {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 1.15rem;
    background: #fff7ed;
    border: 1px solid rgba(217, 119, 6, 0.25);
    color: #9a3412;
}

.customer-design__warning > .material-symbols-outlined {
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    border-radius: 0.85rem;
    background: #fef3c7;
    color: #b45309;
}

.customer-design__warning div {
    display: grid;
    gap: 0.1rem;
}

.customer-design__warning strong {
    font-size: 0.92rem;
    font-weight: 950;
}

.customer-design__warning span:not(.material-symbols-outlined) {
    font-size: 0.8rem;
    font-weight: 750;
    line-height: 1.6;
}

.customer-design .glass-panel,
.customer-design .card {
    border-color: var(--customer-hairline);
    background: var(--customer-panel);
    box-shadow: 0 1px 3px rgba(22, 29, 29, 0.04), 0 1.25rem 3.2rem rgba(22, 29, 29, 0.06);
}

.customer-design__hero-card {
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.customer-design__hero-card > .card-body {
    padding: 0;
}

.customer-design .customer-menu__welcome-card {
    gap: 1rem;
}

.customer-design .customer-menu__banner {
    min-height: 8rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 1.2rem 2.6rem rgba(23, 37, 84, 0.12);
}

.customer-design .customer-menu__banner-overlay,
.customer-design .customer-orders__banner-overlay {
    background:
        linear-gradient(90deg, rgba(23, 37, 84, 0.88), rgba(23, 37, 84, 0.42), rgba(23, 37, 84, 0.08)),
        linear-gradient(180deg, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0.45));
}

[dir="rtl"] .customer-design .customer-menu__banner-overlay,
[dir="rtl"] .customer-design .customer-orders__banner-overlay {
    background:
        linear-gradient(270deg, rgba(23, 37, 84, 0.88), rgba(23, 37, 84, 0.42), rgba(23, 37, 84, 0.08)),
        linear-gradient(180deg, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0.45));
}

.customer-design .customer-menu__banner-copy h1,
.customer-design .customer-orders__banner-copy h1 {
    max-width: none;
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 950;
    letter-spacing: 0;
}

.customer-design .customer-menu__banner-copy p,
.customer-design .customer-orders__banner-copy p {
    font-weight: 800;
}

.customer-design .customer-menu__banner-table {
    top: auto;
    bottom: 1rem;
    inset-inline-start: 1rem;
    background: rgba(14, 165, 233, 0.2);
    color: #e0f2fe;
}

.customer-design .customer-menu__session-card {
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.2);
    backdrop-filter: blur(20px);
}

.customer-design .customer-menu__session-form {
    padding: 1rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.2);
    backdrop-filter: blur(24px);
}

.customer-design .customer-menu__session-form .btn-primary:disabled {
    background: #dbe7f0;
    color: #94a3b8;
    box-shadow: none;
}

.customer-design--gate {
    max-width: min(100% - 2rem, 40rem);
}

.customer-design--gate .card {
    border-radius: 1.5rem;
}

.customer-design--gate .card-body {
    background: rgba(255, 255, 255, 0.82);
    border-radius: inherit;
}

.customer-gate__intro {
    display: grid;
    gap: 0.5rem;
    margin: 0 auto 1.1rem;
    text-align: center;
}

.customer-gate__intro h1 {
    margin: 0;
    color: var(--customer-navy);
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    font-weight: 950;
    letter-spacing: 0;
}

.customer-gate__intro p {
    margin: 0;
    color: #334155;
    font-size: 0.92rem;
    font-weight: 750;
    line-height: 1.7;
}

.customer-gate__list {
    display: grid;
    gap: 0.95rem;
}

.customer-gate__branch {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--customer-hairline);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.05);
    color: var(--customer-navy);
    text-align: start;
    cursor: pointer;
}

.customer-gate__branch:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.35);
}

.customer-gate__branch-icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 0.9rem;
    background: #e0f2fe;
    color: var(--customer-sky);
    font-size: 1.4rem;
}

.customer-gate__branch-copy {
    min-width: 0;
    display: grid;
    gap: 0.25rem;
}

.customer-gate__branch-copy strong {
    color: var(--customer-navy);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.4;
}

.customer-gate__branch-copy span {
    color: #475569;
    font-size: 0.85rem;
    font-weight: 750;
}

.customer-gate__status {
    justify-self: end;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.customer-gate__status--open {
    background: #dcfce7;
    color: #047857;
}

.customer-gate__status--closed {
    background: #f1f5f9;
    color: #94a3b8;
}

.customer-gate__state .card-body {
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    padding: 1.6rem;
    text-align: center;
    color: var(--customer-navy);
}

.customer-gate__state .material-symbols-outlined {
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    border-radius: 1.1rem;
    background: #e0f2fe;
    color: var(--customer-sky);
    font-size: 1.8rem;
}

.customer-design .customer-menu__loading-card {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 1.5rem;
    text-align: center;
}

.customer-design .customer-menu__loading-card > .material-symbols-outlined {
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    border-radius: 1.4rem;
    background: rgba(14, 165, 233, 0.1);
    color: var(--customer-sky);
    font-size: 2rem;
    animation: zjPulse 1.5s ease-in-out infinite;
}

.customer-design .customer-menu__loading-card h2 {
    margin: 0;
    color: var(--customer-navy);
    font-size: 1.05rem;
    font-weight: 950;
}

.customer-design .customer-menu__loading-card p {
    margin: 0.2rem 0 0;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 750;
}

.customer-menu__skeleton-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.75rem;
}

.customer-menu__skeleton-grid span {
    min-height: 7rem;
    border-radius: 1.1rem;
    background: linear-gradient(90deg, #e2edf5, #f5fbff, #e2edf5);
    background-size: 200% 100%;
    animation: zjSkeleton 1.4s ease-in-out infinite;
}

.customer-design .customer-menu__browser-tools {
    top: 0;
    margin-inline: -0.25rem;
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(244, 251, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.customer-design .customer-menu__search {
    min-height: 3rem;
    border-radius: 1rem;
    background: #fff;
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: 0 0.75rem 1.8rem rgba(22, 29, 29, 0.05);
}

.customer-design .customer-menu__layout-switcher {
    background: rgba(255, 255, 255, 0.92);
}

.customer-design .customer-menu__layout-button {
    width: 2.4rem;
    height: 2.15rem;
}

.customer-design .customer-menu__layout-button--active {
    background: var(--customer-navy);
    color: #e0f2fe;
}

.customer-design .customer-menu__category-grid,
.customer-design .customer-menu__offer-chips,
.customer-design .customer-menu__offer-list--horizontal,
.customer-design .customer-menu__rewards-carousel {
    scrollbar-width: none;
}

.customer-design .customer-menu__category-grid::-webkit-scrollbar,
.customer-design .customer-menu__offer-chips::-webkit-scrollbar,
.customer-design .customer-menu__offer-list--horizontal::-webkit-scrollbar,
.customer-design .customer-menu__rewards-carousel::-webkit-scrollbar {
    display: none;
}

.customer-design .customer-menu__category-grid {
    gap: 0.55rem;
    padding-block: 0 0.85rem;
}

.customer-design .customer-menu__category-card {
    flex: 0 0 auto;
    min-width: auto;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.48rem 0.88rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
}

.customer-design .customer-menu__category-card-icon {
    display: none;
}

.customer-design .customer-menu__category-card strong {
    font-size: 0.86rem;
    font-weight: 900;
    white-space: nowrap;
}

.customer-design .customer-menu__category-card small {
    min-width: 1.35rem;
    height: 1.35rem;
    display: inline-grid;
    place-items: center;
    padding-inline: 0.3rem;
    border-radius: 999px;
    background: #e2edf5;
    color: #475569;
    font-size: 0.7rem;
}

.customer-design .customer-menu__category-card--active {
    background: var(--customer-sky);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0.7rem 1.6rem rgba(14, 165, 233, 0.28);
}

.customer-design .customer-menu__category-card--active small {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.customer-design .customer-menu__offers,
.customer-design .customer-menu__rewards,
.customer-design .customer-loyalty-banner,
.customer-design .customer-menu__browser {
    margin-top: 1.2rem;
}

.customer-design .customer-menu__offers-head,
.customer-design .customer-menu__rewards-head,
.customer-design .customer-menu__category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.customer-design .customer-menu__offers-head h2,
.customer-design .customer-menu__rewards-head h2,
.customer-design .customer-menu__category-head h2 {
    color: var(--customer-navy) !important;
    font-size: 1.05rem !important;
    font-weight: 950 !important;
}

.customer-design .customer-menu__offer-card {
    flex-basis: min(15.65rem, 78vw);
    border-radius: 1.38rem;
    background: var(--customer-navy);
    box-shadow: 0 1.1rem 2.2rem rgba(23, 37, 84, 0.2);
}

.customer-design .customer-menu__offer-image {
    min-height: 6.5rem;
}

.customer-design .customer-menu__offer-copy {
    background: var(--customer-navy);
}

.customer-design .customer-menu__offer-copy strong {
    color: #fff;
}

.customer-design .customer-menu__offer-copy small,
.customer-design .customer-menu__offer-copy .old-price {
    color: #bae6fd;
}

.customer-design .customer-menu__offer-badge {
    background: var(--customer-sky);
    color: #fff;
}

.customer-design .customer-menu__offer-remaining {
    background: rgba(15, 23, 42, 0.75);
    color: #fde68a;
}

.customer-design .customer-menu__reward-auth,
.customer-design .customer-loyalty-banner {
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 1rem 2.4rem rgba(22, 29, 29, 0.06);
}

.customer-design .customer-menu__grid--grid {
    grid-template-columns: repeat(auto-fill, minmax(10.75rem, 1fr));
}

.customer-design .customer-menu__grid--list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}

.customer-design .customer-menu__grid--editorial {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.customer-design .menu-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 0.9rem 2rem rgba(22, 29, 29, 0.055);
}

.customer-design .menu-card__media {
    min-height: 7.65rem;
    overflow: hidden;
    border-radius: 1.1rem;
}

.customer-design .menu-card--grid .menu-card__media {
    margin: 0.65rem 0.65rem 0;
}

.customer-design .menu-card__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.customer-design .menu-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.62));
}

.customer-design .menu-card__price {
    position: absolute;
    z-index: 3;
    bottom: 0.65rem;
    inset-inline-start: 0.75rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 950;
}

.customer-design .menu-card__content {
    padding: 0.78rem;
}

.customer-design .menu-card__title {
    color: #0f172a;
    font-size: 0.96rem;
    font-weight: 950;
    line-height: 1.35;
}

.customer-design .menu-card__description {
    color: #475569;
    display: -webkit-box;
    min-height: 2.4em;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.78rem;
    font-weight: 700;
}

.customer-design .menu-card__details {
    min-height: 2.3rem;
    color: var(--customer-sky);
}

.customer-design .menu-card__action,
.customer-design .menu-card__quantity-button--add {
    background: var(--customer-sky);
    color: #fff;
    box-shadow: 0 0.65rem 1.25rem rgba(14, 165, 233, 0.24);
}

.customer-design .menu-card__quantity-control {
    min-height: 2.45rem;
    border-radius: 0.9rem;
    background: #f8fbfd;
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.customer-design .menu-card--list {
    grid-template-columns: minmax(0, 1fr) 6rem;
    min-height: 7.1rem;
}

.customer-design .menu-card--list .menu-card__media {
    margin: 0.65rem;
}

.customer-design .menu-card--editorial {
    min-height: 15.6rem;
    color: #fff;
    background: var(--customer-navy);
}

.customer-design .menu-card--editorial .menu-card__media {
    margin: 0;
    min-height: 15.6rem;
    border-radius: inherit;
}

.customer-design .menu-card--editorial .menu-card__content {
    align-self: end;
    color: #fff;
    padding: 1rem;
}

.customer-design .menu-card--editorial .menu-card__title {
    color: #fff;
    font-size: 1.2rem;
}

.customer-design .menu-card--editorial .menu-card__description,
.customer-design .menu-card--editorial .menu-card__category {
    color: #e0f2fe;
}

.customer-design .customer-menu__details-shell {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    align-items: end;
}

.customer-design .customer-menu__details-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.5);
    cursor: pointer;
    animation: zjFade 200ms ease both;
}

.customer-design .customer-menu__details {
    position: relative;
    z-index: 1;
    width: min(100%, 40rem);
    max-height: 88dvh;
    overflow: auto;
    margin-inline: auto;
    padding: 0.8rem 1rem 1rem;
    border-radius: 1.75rem 1.75rem 0 0;
    background: #f4fbff;
    box-shadow: 0 -1.4rem 3.8rem rgba(15, 23, 42, 0.25);
    animation: zjSlideUp 260ms ease both;
}

.customer-design .customer-menu__details-handle {
    width: 2.75rem;
    height: 0.28rem;
    display: block;
    margin: 0 auto 0.65rem;
    border-radius: 999px;
    background: #cbd5e1;
}

.customer-design .customer-menu__details-nav {
    grid-template-columns: auto minmax(0, 1fr) auto;
    position: sticky;
    top: -0.8rem;
    z-index: 3;
    padding-block: 0.35rem;
    background: rgba(244, 251, 255, 0.92);
    backdrop-filter: blur(16px);
}

.customer-design .customer-menu__details-image {
    min-height: 11.25rem;
    border-radius: 1.25rem;
}

.customer-design .customer-menu__option {
    min-height: 2.75rem;
    border-radius: 999px;
}

.customer-design .customer-menu__option--selected {
    background: var(--customer-sky);
    border-color: var(--customer-sky);
    color: #fff;
}

.customer-design .customer-menu__details-submit {
    bottom: 0.75rem;
    display: grid;
    grid-template-columns: auto minmax(0, auto) minmax(10rem, 1fr);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(18px);
}

.customer-menu__details-qty {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem;
    border-radius: 1rem;
    background: #f8fbfd;
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.customer-menu__details-qty strong {
    min-width: 1.9rem;
    text-align: center;
}

.customer-design .customer-menu__sticky-cart {
    bottom: 4.75rem;
}

.customer-design .customer-menu__sticky-cart-inner {
    max-width: 40rem;
    margin-inline: auto;
    border: 0;
    border-radius: 1.25rem;
    background: var(--customer-navy);
    color: #e0f2fe;
    box-shadow: 0 1rem 3rem rgba(23, 37, 84, 0.35);
    animation: zjSlideUp 250ms ease both;
}

.customer-design .customer-menu__sticky-cart-items {
    color: #fff;
}

.customer-design .customer-menu__sticky-cart-total {
    color: #7dd3fc;
}

.customer-design .customer-menu__sticky-cart .btn-primary {
    background: var(--customer-sky);
    color: #fff;
}

.customer-design--cart .customer-cart__nav,
.customer-design--orders .customer-menu__brand {
    margin-bottom: 1rem;
}

.customer-design .customer-cart__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    align-items: start;
    gap: 1.2rem;
}

.customer-design .customer-cart__checkout-panel {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 0.85rem;
}

.customer-design .customer-cart__item {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    border-radius: 1.12rem;
    background: #fff;
}

.customer-design .customer-cart__item--reward {
    background: #f0fdf4;
    border-color: rgba(21, 128, 61, 0.22);
}

.customer-cart__reward-line {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 0.78rem;
    font-weight: 950;
}

.customer-design .customer-cart__thumb {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
}

.customer-design .customer-cart__edit {
    color: var(--customer-sky);
    background: transparent;
    border: 0;
    box-shadow: none;
}

.customer-design .customer-cart__summary {
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.9);
}

.customer-design .customer-cart__points-note {
    background: rgba(14, 165, 233, 0.08);
    color: #0369a1;
}

.customer-design .customer-cart__submit {
    min-height: 3.1rem;
    border-radius: 1rem;
    background: var(--customer-sky);
    box-shadow: 0 0.85rem 1.6rem rgba(14, 165, 233, 0.25);
}

.customer-cart__checkout-note {
    margin: 0;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 750;
    text-align: center;
}

.customer-design .customer-orders__banner {
    min-height: 10rem;
    border-radius: 1.5rem;
}

.customer-orders__tabs {
    display: inline-flex;
    padding: 0.28rem;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.customer-orders__tab {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 0;
    border-radius: 0.85rem;
    padding: 0.45rem 0.95rem;
    color: #475569;
    background: transparent;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.customer-orders__tab span {
    min-width: 1.35rem;
    height: 1.35rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: #e2edf5;
    font-size: 0.72rem;
}

.customer-orders__tab--active {
    background: var(--customer-navy);
    color: #e0f2fe;
    box-shadow: 0 0.65rem 1.5rem rgba(23, 37, 84, 0.18);
}

.customer-orders__tab--active span {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.customer-design .customer-orders__card {
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.9);
}

.customer-design .customer-orders__status {
    min-height: 2.25rem;
}

.customer-design .customer-orders__status--new {
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
}

.customer-design .customer-orders__status--confirmed {
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
}

.customer-design .customer-orders__status--ready,
.customer-design .customer-orders__status--delivered {
    background: #dcfce7;
    color: #15803d;
    border-color: rgba(21, 128, 61, 0.18);
}

.customer-design .customer-orders__status--cancelled {
    background: #ffdad6;
    color: #ba1a1a;
}

.customer-orders__cancel-card {
    background: #fff7f7 !important;
}

.customer-orders__invoice-action {
    justify-content: center;
}

@keyframes zjSlideUp {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zjFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes zjPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.72;
    }
    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

@keyframes zjSkeleton {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -200% 0;
    }
}

.customer-design--menu {
    max-width: min(100% - 2rem, 56rem) !important;
}

.customer-design--gate {
    max-width: min(100% - 2rem, 48rem) !important;
}

.customer-design__header {
    margin-bottom: 1rem;
    align-items: center !important;
}

.customer-design .customer-menu__welcome-card {
    max-width: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.customer-design .customer-menu__hero-top {
    display: none !important;
}

.customer-design .customer-menu__banner {
    width: 100%;
    min-height: 8.25rem;
    overflow: hidden;
    background:
        linear-gradient(270deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.28)),
        url("/_content/Zajal.Shared/images/customer/welcome-spice.jpg") center / cover;
}

.customer-design .customer-menu__banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.customer-design .customer-menu__banner-copy {
    inset-inline-end: 1.5rem;
    inset-inline-start: auto;
    bottom: auto;
    top: 50%;
    max-width: min(72%, 28rem);
    transform: translateY(-50%);
    align-items: flex-start;
    text-align: start;
}

.customer-design .customer-menu__banner-copy h1 {
    font-size: clamp(1.45rem, 3.5vw, 2.15rem);
    line-height: 1.15;
}

.customer-design .customer-menu__banner-copy p {
    font-size: 0.92rem;
    line-height: 1.5;
}

.customer-design .customer-menu__banner-table {
    inset-inline-start: 1.35rem;
    bottom: 1rem;
    max-width: calc(100% - 2.7rem);
    padding: 0.4rem 0.8rem;
    color: #fff;
    background: rgba(15, 23, 42, 0.35);
    border-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(14px);
}

.customer-design .customer-menu__session-form {
    margin-top: 1rem;
    padding: 1.15rem;
    border-radius: 1.45rem;
}

.customer-design .customer-menu__session-form > div {
    display: grid;
    gap: 0.4rem;
}

.customer-design .customer-menu__reward-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 1rem 1.15rem;
}

.customer-design .customer-menu__reward-auth h2,
.customer-design .customer-menu__reward-auth p {
    margin: 0;
}

.customer-design .customer-menu__reward-auth-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.customer-design .customer-menu__reward-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
}

@media (min-width: 900px) {
    .customer-design--menu {
        max-width: min(100% - 4rem, 56rem) !important;
    }

    .customer-design .customer-menu__details-shell {
        align-items: center;
        padding: 2rem;
    }

    .customer-design .customer-menu__details {
        border-radius: 1.75rem;
        max-width: 38rem;
    }

    .customer-design .customer-menu__banner {
        min-height: 8.8rem;
    }
}

@media (max-width: 760px) {
    .customer-design {
        max-width: min(100% - 1rem, 40rem);
    }

    .customer-design__header {
        align-items: center !important;
        flex-direction: row !important;
    }

    .customer-design .customer-cart__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-design .customer-cart__checkout-panel {
        position: static;
    }

    .customer-design .customer-cart__item {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-design .customer-menu__details-submit {
        grid-template-columns: 1fr;
    }

    .customer-gate__branch {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .customer-gate__status {
        grid-column: 2;
        justify-self: start;
    }

    .customer-design .customer-menu__banner-copy {
        inset-inline-end: 1rem;
        max-width: calc(100% - 2rem);
    }

    .customer-design .customer-menu__reward-auth,
    .customer-design .customer-menu__reward-auth-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* MIGRATED: Pages\Admin\RewardTermsReview.razor.css */
.reward-terms-review {
    display: grid;
    gap: 1.25rem;
}

.reward-terms-review__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.reward-terms-review__header h1 {
    margin: 0 0 0.35rem;
    color: var(--zj-on-surface);
    font-size: 1.7rem;
    font-weight: 900;
}

.reward-terms-review__header p {
    margin: 0;
    max-width: 42rem;
    color: var(--zj-on-surface-variant);
    line-height: 1.8;
}

.reward-terms-review__filter {
    display: grid;
    gap: 0.4rem;
    min-width: 13rem;
    color: var(--zj-on-surface-variant);
    font-size: 0.8rem;
    font-weight: 800;
}

.reward-terms-review__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(21rem, 0.75fr);
    gap: 1rem;
    align-items: start;
}

.reward-terms-review__table-panel {
    min-width: 0;
    overflow: hidden;
}

.reward-terms-review__table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem 0.75rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.reward-terms-review__table-head h2 {
    margin: 0;
    color: var(--zj-on-surface);
    font-size: 1rem;
    font-weight: 900;
}

.reward-terms-review__table-head p {
    margin: 0.25rem 0 0;
    color: var(--zj-on-surface-variant);
    font-size: 0.8rem;
}

.reward-terms-review__table-head > span {
    display: inline-flex;
    white-space: nowrap;
    border-radius: 999px;
    padding: 0.38rem 0.75rem;
    background: rgba(14, 165, 233, 0.12);
    color: #0277a8;
    font-size: 0.75rem;
    font-weight: 900;
}

.reward-terms-review__table-wrap {
    overflow-x: auto;
}

.reward-terms-review__table {
    width: 100%;
    min-width: 54rem;
    border-collapse: collapse;
}

.reward-terms-review__table th,
.reward-terms-review__table td {
    padding: 0.9rem 1rem;
    text-align: right;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    vertical-align: middle;
}

.reward-terms-review__table th {
    color: var(--zj-on-surface-variant);
    background: rgba(241, 245, 249, 0.72);
    font-size: 0.72rem;
    font-weight: 900;
}

.reward-terms-review__table td {
    color: var(--zj-on-surface);
    font-size: 0.84rem;
}

.reward-terms-review__table td strong,
.reward-terms-review__table td small {
    display: block;
}

.reward-terms-review__table td small {
    margin-top: 0.25rem;
    color: var(--zj-on-surface-variant);
    font-size: 0.7rem;
}

.reward-terms-review__row {
    cursor: pointer;
    transition: background var(--zj-transition-fast), box-shadow var(--zj-transition-fast);
}

.reward-terms-review__row:hover,
.reward-terms-review__row:focus-visible {
    background: rgba(14, 165, 233, 0.07);
    outline: none;
}

.reward-terms-review__row.is-selected {
    background: rgba(14, 165, 233, 0.12);
    box-shadow: inset -4px 0 0 #0ea5e9;
}

.reward-terms-review__details {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.07);
}

.reward-terms-review__details-empty {
    display: grid;
    min-height: 18rem;
    place-items: center;
    gap: 0.55rem;
    text-align: center;
    color: var(--zj-on-surface-variant);
}

.reward-terms-review__details-empty .material-symbols-outlined {
    color: #0ea5e9;
    font-size: 2.4rem;
}

.reward-terms-review__details-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.reward-terms-review__details-head span:first-child {
    color: #0ea5e9;
    font-size: 0.78rem;
    font-weight: 900;
}

.reward-terms-review__details-head h2 {
    margin: 0.2rem 0 0;
    color: var(--zj-on-surface);
    font-size: 1.25rem;
    font-weight: 900;
}

.reward-terms-review__details-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0;
}

.reward-terms-review__details-meta div {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    border-radius: 0.85rem;
    background: rgba(241, 245, 249, 0.78);
}

.reward-terms-review__details-meta dt {
    color: var(--zj-on-surface-variant);
    font-size: 0.7rem;
    font-weight: 800;
}

.reward-terms-review__details-meta dd {
    margin: 0;
    color: var(--zj-on-surface);
    font-size: 0.78rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.reward-terms-review__detail-block {
    display: grid;
    gap: 0.5rem;
    padding: 0.95rem;
    border-radius: 1rem;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.reward-terms-review__detail-block--danger {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.14);
}

.reward-terms-review__detail-block span {
    color: var(--zj-on-surface-variant);
    font-size: 0.74rem;
    font-weight: 900;
}

.reward-terms-review__detail-block p {
    margin: 0;
    color: var(--zj-on-surface);
    line-height: 1.85;
    white-space: pre-wrap;
}

.reward-terms-review__actions {
    display: grid;
    gap: 0.75rem;
}

.reward-terms-review__actions .btn {
    justify-content: center;
}

.reward-terms-review__reject {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
}

.reward-terms-review__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    background: rgba(245, 158, 11, 0.13);
    color: #9a5b00;
    font-size: 0.72rem;
    font-weight: 900;
}

.reward-terms-review__status--approved {
    background: rgba(34, 197, 94, 0.13);
    color: #15803d;
}

.reward-terms-review__status--rejected {
    background: rgba(239, 68, 68, 0.12);
    color: #b42318;
}

.reward-terms-review__empty {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    text-align: center;
}

.reward-terms-review__empty .material-symbols-outlined {
    color: #0ea5e9;
    font-size: 2.5rem;
}

@media (max-width: 1180px) {
    .reward-terms-review__workspace {
        grid-template-columns: 1fr;
    }

    .reward-terms-review__details {
        position: static;
    }
}

@media (max-width: 760px) {
    .reward-terms-review__header,
    .reward-terms-review__table-head,
    .reward-terms-review__details-head {
        align-items: stretch;
        flex-direction: column;
    }

    .reward-terms-review__filter {
        min-width: 0;
    }

    .reward-terms-review__details-meta {
        grid-template-columns: 1fr;
    }

    .reward-terms-review__reject {
        grid-template-columns: 1fr;
    }
}
.menu-import {
    display: grid;
    gap: 1rem;
    margin-block: 1rem;
    padding: 1rem;
    border-radius: var(--zj-radius-xl);
    background: var(--zj-surface-container-low);
}

.menu-import__intro,
.menu-import__summary,
.menu-import__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.menu-import__intro h2,
.menu-import__section h3 {
    margin: 0;
    color: var(--zj-on-surface);
    font-weight: 900;
}

.menu-import__intro p,
.menu-import__empty,
.menu-import__hint {
    margin: 0.25rem 0 0;
    color: var(--zj-on-surface-variant);
    line-height: 1.8;
}

.menu-import__upload {
    position: relative;
    overflow: hidden;
}

.menu-import__upload input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.menu-import__alert {
    padding: 0.75rem 1rem;
    border-radius: var(--zj-radius-lg);
    background: color-mix(in srgb, var(--zj-error) 12%, transparent);
    color: var(--zj-error);
    font-weight: 800;
}

.menu-import__summary {
    padding: 0.85rem;
    border-radius: var(--zj-radius-lg);
    background: var(--zj-surface);
    color: var(--zj-on-surface);
}

.menu-import__sections {
    display: grid;
    gap: 1rem;
}

.menu-import__section {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--zj-radius-xl);
}

.menu-import__section--new {
    background: color-mix(in srgb, var(--zj-success) 10%, transparent);
}

.menu-import__section--duplicate {
    background: color-mix(in srgb, #f59e0b 14%, transparent);
}

.menu-import__section--incomplete {
    background: color-mix(in srgb, var(--zj-error) 10%, transparent);
}

.menu-import__item-card,
.menu-import__duplicate-card {
    display: grid;
    gap: 0.55rem;
    padding: 0.9rem;
    border-radius: var(--zj-radius-lg);
    background: var(--zj-surface);
    color: var(--zj-on-surface);
}

.menu-import__item-card p,
.menu-import__compare-card p {
    margin: 0;
    color: var(--zj-on-surface-variant);
    line-height: 1.7;
}

.menu-import__check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 850;
}

.menu-import__compare {
    direction: ltr;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.menu-import__compare-card {
    direction: rtl;
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem;
    border-radius: var(--zj-radius-lg);
    background: var(--zj-surface-container-low);
}

.menu-import__compare-card--incoming {
    background: color-mix(in srgb, #f59e0b 12%, var(--zj-surface-container-low));
}

.menu-import__compare-card small {
    color: var(--zj-on-surface-variant);
    font-weight: 800;
}

.menu-import__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
}

.menu-import__fields label {
    display: grid;
    gap: 0.35rem;
    color: var(--zj-on-surface-variant);
    font-weight: 800;
}

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

/* Human resources pages */
.finance-dashboard {
    width: min(100%, 74rem);
    display: grid;
    gap: 1rem;
    margin-inline: auto;
    padding-bottom: 1rem;
    text-align: start;
}

.finance-dashboard__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem;
    border: 1px solid var(--zj-outline-variant);
    border-radius: var(--zj-radius-xl);
    background: var(--zj-surface-container-low);
}

.finance-dashboard__header > div {
    min-width: 0;
}

.finance-dashboard__header span {
    color: var(--zj-primary);
    font-weight: 900;
}

.finance-dashboard__header h1 {
    margin: 0.15rem 0 0.25rem;
    color: var(--zj-on-surface);
    font-size: clamp(1.75rem, 4vw, 2.65rem);
    font-weight: 950;
    line-height: 1.12;
}

.finance-dashboard__header p,
.finance-dashboard__muted {
    margin: 0;
    color: var(--zj-on-surface-variant);
    line-height: 1.75;
}

.finance-dashboard__header .btn {
    flex: 0 0 auto;
}

.hr-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.65rem;
    align-items: end;
}

.finance-dashboard__filters + .finance-dashboard__filters {
    margin-top: 0.75rem;
}

.finance-dashboard__filters .form-control,
.finance-dashboard__filters .form-select,
.hr-form-grid .form-control,
.hr-form-grid .form-select {
    width: 100%;
    min-width: 0;
}

.finance-dashboard__filters .btn {
    justify-self: start;
}

.finance-dashboard__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.75rem;
}

.finance-dashboard__metrics article {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--zj-outline-variant);
    border-radius: var(--zj-radius-lg);
    background: var(--zj-surface);
}

.finance-dashboard__metrics small {
    display: block;
    color: var(--zj-on-surface-variant);
    font-weight: 800;
}

.finance-dashboard__metrics strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--zj-on-surface);
    font-size: 1.45rem;
    font-weight: 950;
}

.finance-dashboard__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 0.85rem;
    align-items: start;
}

.finance-dashboard .card-body,
.finance-dashboard__panel {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
}

.finance-dashboard .card-body h2,
.finance-dashboard__panel h2 {
    margin: 0;
    color: var(--zj-on-surface);
    font-size: 1.08rem;
    font-weight: 950;
}

.finance-dashboard__bars,
.finance-dashboard__alerts {
    display: grid;
    gap: 0.6rem;
}

.finance-dashboard__bars div,
.finance-dashboard__alerts article {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.75rem;
    border-radius: var(--zj-radius-md);
    background: var(--zj-surface-container-low);
}

.finance-dashboard__alerts article {
    display: grid;
    align-items: start;
}

.finance-dashboard__bars span,
.finance-dashboard__alerts strong,
.finance-dashboard__alerts small {
    overflow-wrap: anywhere;
}

.finance-dashboard__bars a {
    flex: 0 0 auto;
    color: var(--zj-primary);
    font-weight: 900;
    text-decoration: none;
}

.finance-dashboard__state {
    min-height: 13rem;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
}

.finance-dashboard__notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(var(--zj-primary-rgb), 0.22);
    border-radius: var(--zj-radius-lg);
    background: rgba(var(--zj-primary-rgb), 0.08);
    color: var(--zj-on-surface);
}

.finance-dashboard__notice > .material-symbols-outlined {
    color: var(--zj-primary);
}

.finance-dashboard__notice strong {
    display: block;
    font-weight: 950;
}

.finance-dashboard__notice p {
    margin: 0.2rem 0 0;
    color: var(--zj-on-surface-variant);
    line-height: 1.7;
}

.finance-dashboard__notice code {
    direction: ltr;
    display: inline-block;
}

.finance-dashboard .table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.finance-dashboard .table th,
.finance-dashboard .table td {
    padding: 0.7rem 0.75rem;
    text-align: start;
    vertical-align: middle;
    border-bottom: 1px solid var(--zj-outline-variant);
}

.finance-dashboard .table td:last-child {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

@media (max-width: 760px) {
    .finance-dashboard__header {
        align-items: stretch;
        flex-direction: column;
    }

    .finance-dashboard__header .btn,
    .finance-dashboard__filters .btn,
    .finance-dashboard__notice .btn {
        width: 100%;
        justify-content: center;
    }

    .finance-dashboard__notice {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .finance-dashboard__notice .btn {
        grid-column: 1 / -1;
    }

    .finance-dashboard .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

.finance-dashboard .table td:last-child {
    min-width: 16rem;
    }
}

/* Claude customer menu fidelity pass. Keep bottom navigation unchanged. */
.customer-design .customer-menu__browser {
    margin-top: 1.1rem;
}

.customer-design .customer-menu__browser-tools {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
}

.customer-design .customer-menu__grid--list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20.5rem), 1fr)) !important;
    gap: 0.85rem;
}

.customer-design .menu-card {
    min-width: 0;
}

.customer-design .menu-card--list {
    direction: ltr;
    grid-template-columns: minmax(0, 1fr) 6rem !important;
    grid-template-areas: "content media";
    align-items: stretch;
    min-height: 7.25rem;
    padding: 0.62rem;
    border-radius: 1.12rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: #fff;
    box-shadow: 0 1px 3px rgba(22, 29, 29, 0.04);
    overflow: hidden;
}

.customer-design .menu-card--list .menu-card__media {
    grid-area: media;
    width: 6rem;
    min-height: 6rem;
    height: 6rem;
    margin: 0 !important;
    border-radius: 0.88rem;
    background: #e2edf5;
}

.customer-design .menu-card--list .menu-card__content {
    grid-area: content;
    direction: rtl;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    align-content: stretch;
    min-width: 0;
    padding: 0.1rem 0 0.05rem 0.15rem !important;
}

.customer-design .menu-card--list .menu-card__title {
    margin: 0;
    color: #0f172a;
    font-size: 0.97rem;
    font-weight: 900;
    line-height: 1.35;
}

.customer-design .menu-card--list .menu-card__description {
    margin: 0.1rem 0 0;
    min-height: 0;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.55;
    -webkit-line-clamp: 2;
}

.customer-design .menu-card--list .menu-card__details,
.customer-design .menu-card--list .menu-card__category,
.customer-design .menu-card--list .menu-card__price,
.customer-design .menu-card--list .menu-card__overlay {
    display: none !important;
}

.customer-design .menu-card__content-price {
    display: none;
}

.customer-design .menu-card--list .menu-card__content-price {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    color: #172554;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1;
}

.customer-design .menu-card--list .menu-card__footer {
    display: grid;
    grid-template-columns: minmax(0, auto) auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.customer-design .menu-card--list .menu-card__action {
    width: 2.5rem;
    height: 2.25rem;
    min-height: 0;
    border-radius: 0.75rem;
    background: #0ea5e9;
    color: #fff;
    box-shadow: 0 8px 18px rgba(14, 165, 233, 0.25);
}

.customer-design .menu-card--list .menu-card__quantity-control {
    min-height: 2.15rem;
    height: 2.15rem;
    border-radius: 0.75rem;
    overflow: hidden;
    background: rgba(14, 165, 233, 0.06);
    border: 1px solid rgba(14, 165, 233, 0.25);
}

.customer-design .menu-card--list .menu-card__quantity-button {
    width: 2.15rem;
    height: 2.15rem;
    min-height: 0;
    padding: 0;
    color: #0ea5e9;
    background: transparent;
}

.customer-design .menu-card--list .menu-card__quantity-button--add {
    background: #0ea5e9;
    color: #fff;
}

.customer-design .menu-card--list .menu-card__quantity-control strong {
    min-width: 1.75rem;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 950;
    text-align: center;
}

.customer-design .menu-card--list .menu-card__stock-pill {
    top: 0.35rem;
    inset-inline-start: auto;
    inset-inline-end: 0.35rem;
    font-size: 0.62rem;
}

.customer-design .menu-card--grid .menu-card__content-price,
.customer-design .menu-card--editorial .menu-card__content-price {
    display: none;
}

.customer-design .customer-menu__rewards {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 1px 3px rgba(22, 29, 29, 0.04), 0 1rem 2.4rem rgba(22, 29, 29, 0.06);
}

.customer-design .customer-menu__rewards > .card {
    margin: 0;
    box-shadow: none;
    background: transparent;
    border: 0;
}

.customer-rewards-summary {
    display: grid;
    gap: 0.75rem;
}

.customer-rewards-summary__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.customer-rewards-summary__spark {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
}

.customer-rewards-summary__top h2 {
    margin: 0;
    color: #0f172a;
    font-size: 0.98rem;
    font-weight: 950;
    line-height: 1.5;
}

.customer-rewards-summary__top p {
    margin: 0.1rem 0 0;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.5;
}

.customer-rewards-summary__favorite {
    min-height: 2.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    border: 0;
    border-radius: 0.8rem;
    padding: 0.48rem 0.8rem;
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}

.customer-rewards-summary__favorite:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.customer-rewards-summary__points {
    display: grid;
    gap: 0.4rem;
}

.customer-rewards-summary__points > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: #172554;
    font-size: 0.78rem;
    font-weight: 900;
}

.customer-rewards-summary__points span {
    color: #475569;
    white-space: nowrap;
}

.customer-rewards-summary__bar {
    height: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: #dbeafe;
}

.customer-rewards-summary__bar span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #38bdf8, #0ea5e9);
    transition: width 400ms ease;
}

.customer-design .customer-menu__rewards .customer-menu__carousel-toolbar,
.customer-design .customer-menu__reward-card--all {
    display: none !important;
}

.customer-design .customer-menu__rewards-head {
    margin-top: 0.2rem;
}

.customer-design .customer-menu__rewards-head h2 {
    font-size: 0.94rem !important;
}

.customer-design .customer-menu__rewards-head button {
    border: 0;
    background: transparent;
    color: #0ea5e9;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}

.customer-design .customer-menu__rewards-carousel {
    display: flex;
    justify-content: flex-start;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0 0 0.2rem;
}

.customer-design .customer-menu__reward-card {
    flex: 0 0 9.4rem;
    width: 9.4rem;
    min-height: 8.9rem;
    display: grid;
    align-content: start;
    gap: 0.42rem;
    padding: 0.62rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: none;
    color: #0f172a;
    text-align: start;
}

.customer-design .customer-menu__reward-image {
    width: 100%;
    height: 4rem;
    display: block;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #eef6fb;
}

.customer-design .customer-menu__reward-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.customer-design .customer-menu__reward-points {
    justify-self: start;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
    font-size: 0.68rem;
    font-weight: 950;
}

.customer-design .customer-menu__reward-card strong {
    color: #0f172a;
    font-size: 0.8rem;
    font-weight: 900;
    line-height: 1.35;
}

@media (max-width: 760px) {
    .customer-design .customer-menu__browser-tools {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-design .customer-menu__layout-switcher {
        justify-self: start;
    }

    .customer-design .customer-menu__grid--list {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Blue Ocean Editorial pass — sticky search + chips shell */
.customer-menu__sticky-tools {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    gap: 0.65rem;
    margin-inline: -0.5rem;
    padding: 0.65rem 0.5rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(244, 251, 255, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.customer-menu__sticky-tools .customer-menu__category-grid {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.1rem 0.1rem 0.75rem;
    scrollbar-width: none;
}

.customer-menu__sticky-tools .customer-menu__category-grid::-webkit-scrollbar {
    display: none;
}

/* Blue Ocean Editorial pass — centered state cards (waiting / error / empty) */
.customer-menu__state-card > .card-body {
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    padding: 2.1rem 1.4rem;
    text-align: center;
}

.customer-menu__state-card h2,
.customer-menu__state-card h3 {
    margin: 0;
    color: var(--zj-on-surface);
    font-size: 1.1rem;
    font-weight: 950;
}

.customer-menu__state-card p {
    margin: 0;
    max-width: 22rem;
    color: var(--zj-on-surface-variant);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.8;
}

.customer-menu__state-card--error {
    border-color: rgba(186, 26, 26, 0.18) !important;
}

.customer-menu__state-disc {
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.1);
    color: var(--zj-primary);
}

.customer-menu__state-disc .material-symbols-outlined {
    font-size: 2rem;
}

.customer-menu__state-disc--error {
    background: #ffdad6;
    color: #ba1a1a;
}

.customer-menu__state-icon--pulse {
    animation: zjPulse 1.6s ease-in-out infinite;
}

.customer-menu__state-icon--spin {
    animation: zj-spin 1.1s linear infinite;
}

.customer-menu__state-retry-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--zj-primary);
    font-size: 0.78rem;
    font-weight: 900;
}

.customer-menu__state-retry-hint .material-symbols-outlined {
    font-size: 1.1rem;
}

.customer-menu__reset-filters {
    border: 0;
    cursor: pointer;
    border-radius: 0.75rem;
    padding: 0.65rem 1.4rem;
    background: #eef6fb;
    color: var(--customer-navy, #172554);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 900;
}

/* Blue Ocean Editorial pass — discovery block (offers first, hidden while searching) */
.customer-menu__discovery {
    display: flex;
    flex-direction: column;
}

.customer-menu__discovery--hidden {
    display: none;
}

.customer-menu__discovery .customer-menu__offers {
    order: -1;
}

.customer-menu__offers-title {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-width: 0;
}

.customer-menu__offers-hint {
    color: var(--zj-primary);
    font-size: 0.76rem;
    font-weight: 900;
    white-space: nowrap;
}

/* Blue Ocean Editorial pass — offers: compact navy cards, no chevron toolbars */
.customer-design .customer-menu__carousel-toolbar {
    display: none !important;
}

.customer-design .customer-menu__offers {
    gap: 0.7rem;
}

.customer-design .customer-menu__offers-head {
    align-items: baseline;
}

.customer-design .customer-menu__offers-head h2 {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--customer-navy);
}

.customer-design .customer-menu__offers-hint {
    color: var(--customer-sky);
    font-size: 0.75rem;
    font-weight: 800;
}

.customer-design .customer-menu__offer-list--horizontal {
    gap: 0.75rem;
}

.customer-design .customer-menu__offer-card {
    flex-basis: min(15.65rem, 82vw);
    min-height: 0;
    grid-template-rows: auto auto;
    overflow: hidden;
    border: 0;
    border-radius: 1.4rem;
    background: var(--customer-navy);
    box-shadow: 0 1.1rem 2.4rem rgba(23, 37, 84, 0.22);
}

.customer-design .customer-menu__offer-image {
    height: 6.5rem;
    min-height: 6.5rem;
    background: #1e3a8a;
}

.customer-design .customer-menu__offer-image img {
    opacity: 0.92;
}

.customer-design .customer-menu__offer-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.85rem 0.85rem;
    background: var(--customer-navy);
}

.customer-design .customer-menu__offer-copy strong {
    display: block;
    min-height: 0;
    padding: 0;
    border-top: 0;
    background: transparent;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.45;
}

.customer-design .customer-menu__offer-copy small {
    color: #7dd3fc;
    font-size: 0.8rem;
    font-weight: 800;
}

/* Blue Ocean Editorial pass — items header row */
.customer-menu__items-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.customer-menu__items-heading {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    min-width: 0;
}

.customer-menu__items-heading h2 {
    margin: 0;
    color: var(--customer-navy, #172554);
    font-size: 1.05rem;
    font-weight: 950;
    white-space: nowrap;
}

.customer-menu__items-count {
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    background: #eef6fb;
    color: var(--zj-on-surface-variant);
    font-size: 0.76rem;
    font-weight: 850;
    white-space: nowrap;
}

/* Blue Ocean Editorial pass — compact loyalty join block */
.customer-design .customer-menu__reward-auth--compact {
    grid-template-columns: minmax(0, 1fr) auto;
}

.customer-menu__reward-auth-intro {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.customer-menu__reward-auth-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.12);
    color: var(--zj-primary);
    font-size: 1.35rem;
}

.customer-menu__reward-auth--compact h2 {
    font-size: 0.95rem !important;
    font-weight: 950 !important;
    color: var(--zj-on-surface) !important;
}

.customer-menu__reward-auth--compact p {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--zj-on-surface-variant);
    line-height: 1.6;
}

.customer-menu__reward-auth-secondary {
    min-height: 2.5rem;
    border: 0;
    cursor: pointer;
    border-radius: 0.75rem;
    padding: 0.55rem 1.1rem;
    background: rgba(14, 165, 233, 0.1);
    color: var(--zj-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 900;
}

.customer-menu__reward-auth-secondary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Blue Ocean Editorial pass — item details sheet refinements */
.customer-design .customer-menu__details-image {
    position: relative;
}

.customer-menu__details-edit-badge {
    position: absolute;
    top: 0.65rem;
    inset-inline-start: 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    background: var(--customer-navy, #172554);
    color: #e0f2fe;
    font-size: 0.72rem;
    font-weight: 900;
}

.customer-menu__details-edit-badge .material-symbols-outlined {
    font-size: 0.9rem;
}

.customer-menu__details-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.customer-menu__details-title-row strong {
    flex: 0 0 auto;
    color: var(--zj-primary);
    font-size: 1.1rem;
    font-weight: 950;
}

.customer-menu__details-reset {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 0;
    cursor: pointer;
    padding: 0.35rem 0;
    background: transparent;
    color: var(--zj-outline);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
}

.customer-menu__details-reset .material-symbols-outlined {
    font-size: 1rem;
}

/* Blue Ocean Editorial pass — rewards auth sheet */
.customer-menu__auth-sheet {
    display: grid;
    gap: 0.85rem;
    width: min(100%, 32.5rem) !important;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important;
}

.customer-menu__auth-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.customer-menu__auth-head h2 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--customer-navy, #172554);
    font-size: 1.12rem;
    font-weight: 950;
}

.customer-menu__auth-head h2 .material-symbols-outlined {
    color: var(--zj-primary);
    font-size: 1.4rem;
}

.customer-menu__auth-close {
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    background: #eef6fb;
    color: var(--zj-on-surface-variant);
}

.customer-menu__auth-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 0.9rem;
    background: #fff;
}

.customer-menu__auth-tab {
    flex: 1;
    min-height: 2.5rem;
    border: 0;
    cursor: pointer;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--zj-on-surface-variant);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 900;
}

.customer-menu__auth-tab--active {
    background: var(--customer-navy, #172554);
    color: #e0f2fe;
    box-shadow: 0 0.55rem 1.3rem rgba(23, 37, 84, 0.18);
}

.customer-menu__auth-field {
    display: grid;
    gap: 0.4rem;
}

.customer-menu__auth-field label {
    color: var(--customer-navy, #172554);
    font-size: 0.8rem;
    font-weight: 850;
}

.menu-card__offer-pill {
    position: absolute;
    inset-inline-start: .65rem;
    inset-block-end: .65rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    max-width: calc(100% - 1.3rem);
    padding: .35rem .55rem;
    overflow: hidden;
    color: #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 6px 18px rgba(234, 88, 12, .28);
    font-size: .72rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-card__offer-pill .material-symbols-outlined { font-size: .9rem; }
.menu-card__old-price { color: #94a3b8; text-decoration: line-through; font-size: .78rem; }

.customer-cart__discount,
.customer-cart__discount strong {
    color: var(--zj-success, #07855b);
}

.customer-cart__offer-badge {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .65rem;
    border-radius: .8rem;
    color: #076b4b;
    background: rgba(16, 185, 129, .1);
    font-weight: 800;
}

.customer-cart__offer-badge .material-symbols-outlined {
    font-size: 1rem;
}

.customer-menu__phone-input {
    display: grid;
    grid-template-columns: minmax(9.5rem, 0.9fr) minmax(0, 1.4fr);
    gap: 0.55rem;
    align-items: stretch;
}

.customer-menu__phone-input .form-input,
.customer-menu__dial-code {
    min-width: 0;
}

.customer-menu__auth-field-hint {
    color: var(--zj-on-surface-variant);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.6;
}

.customer-menu__auth-hint {
    margin: 0;
    color: var(--zj-on-surface-variant);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.8;
}

.customer-menu__auth-submit {
    width: 100%;
    min-height: 3.1rem;
    justify-content: center;
    border-radius: 1rem;
    font-weight: 950;
}

.customer-menu__auth-link {
    justify-self: center;
    border: 0;
    cursor: pointer;
    padding: 0.25rem 0;
    background: transparent;
    color: var(--zj-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 850;
}

.customer-menu__auth-link--muted {
    color: var(--zj-on-surface-variant);
}

@media (max-width: 760px) {
    .customer-menu__phone-input {
        grid-template-columns: minmax(8.5rem, 0.95fr) minmax(0, 1.25fr);
    }

    .customer-design .customer-menu__reward-auth--compact {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-menu__sticky-tools {
        margin-inline: -0.25rem;
        padding-inline: 0.25rem;
    }

    .customer-menu__items-head {
        flex-wrap: wrap;
    }
}

/* Blue Ocean Editorial pass — cart refinements */
.customer-cart__add-more {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    cursor: pointer;
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(14, 165, 233, 0.1);
    color: var(--zj-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
}

.customer-cart__add-more .material-symbols-outlined {
    font-size: 1.1rem;
}

.customer-cart__coupon-apply {
    min-height: 2.85rem;
    border: 0;
    cursor: pointer;
    border-radius: 0.88rem;
    padding: 0 1.4rem;
    background: var(--customer-navy, #172554);
    color: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 850;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.customer-cart__coupon-apply:disabled {
    opacity: 0.7;
    cursor: wait;
}

.customer-cart__coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    border-radius: 0.88rem;
    background: #dcfce7;
    border: 1px solid rgba(21, 128, 61, 0.2);
}

.customer-cart__coupon-applied > span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #15803d;
    font-size: 0.85rem;
    font-weight: 950;
    min-width: 0;
    flex-wrap: wrap;
}

.customer-cart__coupon-applied .material-symbols-outlined {
    font-size: 1.2rem;
}

.customer-cart__coupon-applied strong {
    letter-spacing: 1px;
}

.customer-cart__coupon-applied button {
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    padding: 0.25rem 0;
    background: transparent;
    color: #ba1a1a;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 850;
}

.customer-cart__coupon-error {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #ba1a1a;
    font-size: 0.8rem;
    font-weight: 850;
}

.customer-cart__coupon-error .material-symbols-outlined {
    font-size: 1rem;
}

.customer-design .customer-cart__item-side .customer-cart__icon:last-of-type {
    color: #ba1a1a;
}

.customer-design .customer-menu__details-submit .customer-menu__details-qty {
    display: inline-flex;
    justify-self: start;
    width: max-content;
}

/* Blue Ocean Editorial pass — my orders refinements */
.customer-orders__page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.customer-orders__page-head h1 {
    margin: 0;
    color: var(--customer-navy, #172554);
    font-size: 1.35rem;
    font-weight: 950;
}

.customer-orders__page-head p {
    margin: 0.2rem 0 0;
    color: var(--zj-on-surface-variant);
    font-size: 0.8rem;
    font-weight: 700;
}

.customer-orders__new-order {
    min-height: 2.5rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    cursor: pointer;
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(14, 165, 233, 0.1);
    color: var(--zj-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
}

.customer-orders__new-order .material-symbols-outlined {
    font-size: 1.1rem;
}

.customer-orders__session-card--highlight {
    border-color: rgba(14, 165, 233, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.22), 0 1rem 2.4rem rgba(22, 29, 29, 0.08) !important;
}

.customer-orders__stepper {
    padding-top: 0.35rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    cursor: default;
}

.customer-design .customer-orders__stepper .stepper__progress {
    background: linear-gradient(90deg, #38bdf8, #0ea5e9);
    transition: width 400ms ease;
}

.customer-design .customer-orders__stepper .stepper__dot--completed,
.customer-design .customer-orders__stepper .stepper__dot--active {
    background: var(--zj-primary);
    border-color: var(--zj-primary);
    color: #fff;
}

.customer-design .customer-orders__stepper .stepper__dot--pending {
    background: #eef6fb;
    border-color: #cbd5e1;
    color: #94a3b8;
}

.customer-design .customer-orders__stepper .stepper__label {
    font-size: 0.7rem;
    font-weight: 850;
}

.customer-orders__cancel-btn {
    min-height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 0;
    cursor: pointer;
    border-radius: 0.85rem;
    padding: 0.55rem 1.1rem;
    background: #ffdad6;
    color: #ba1a1a;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 900;
}

.customer-orders__cancel-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.customer-orders__cancel-btn .material-symbols-outlined {
    font-size: 1.1rem;
}

.customer-orders__cancel-shell {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.customer-orders__cancel-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    cursor: pointer;
    background: rgba(15, 23, 42, 0.55);
    animation: zjFade 200ms ease both;
}

.customer-orders__cancel-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 24rem);
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1.35rem;
    border-radius: 1.5rem;
    background: #f4fbff;
    text-align: center;
    box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.35);
    animation: zjSlideUp 250ms ease both;
}

.customer-orders__cancel-dialog h2 {
    margin: 0;
    color: var(--zj-on-surface);
    font-size: 1.05rem;
    font-weight: 950;
}

.customer-orders__cancel-dialog p {
    margin: 0;
    color: var(--zj-on-surface-variant);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.8;
}

.customer-orders__cancel-disc {
    width: 3.75rem;
    height: 3.75rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #ffdad6;
    color: #ba1a1a;
}

.customer-orders__cancel-disc .material-symbols-outlined {
    font-size: 1.85rem;
}

.customer-orders__cancel-actions {
    width: 100%;
    display: flex;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.customer-orders__cancel-confirm,
.customer-orders__cancel-dismiss {
    flex: 1;
    min-height: 2.85rem;
    border: 0;
    cursor: pointer;
    border-radius: 0.88rem;
    padding: 0.7rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 950;
}

.customer-orders__cancel-confirm {
    background: #ba1a1a;
    color: #fff;
}

.customer-orders__cancel-dismiss {
    background: #eef6fb;
    color: var(--customer-navy, #172554);
}

.customer-orders__cancel-confirm:disabled,
.customer-orders__cancel-dismiss:disabled {
    opacity: 0.6;
    cursor: wait;
}

.customer-orders__live-hint {
    margin: 0.85rem 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--zj-outline);
    font-size: 0.78rem;
    font-weight: 750;
    text-align: center;
}

.customer-orders__live-hint .material-symbols-outlined {
    font-size: 1rem;
}

.customer-design .customer-orders__status--preparing {
    background: #fef3c7;
    color: #b45309;
}

.customer-design .customer-orders__status--completed {
    background: #eef6fb;
    color: #475569;
}

/* Inventory/branch acceptance screens: keep normal-size action text readable in both modes. */
:is(.stock-dashboard, .stock-movements, .stock-operations, .inventory-alerts,
    .stock-transfers, .stock-transfer-details, .purchase-orders-page, .purchase-order,
    .goods-receipt, .supplier-payables, .finance-reports) .btn-primary {
    background: #006c9c;
    color: #fff;
}

:is(.stock-dashboard, .stock-movements, .stock-operations, .inventory-alerts,
    .stock-transfers, .stock-transfer-details, .purchase-orders-page, .purchase-order,
    .goods-receipt, .supplier-payables, .finance-reports) .btn-primary:hover {
    background: #00547a;
    color: #fff;
}


/* Optional native-table coverage: same surface tokens as ZjDataTable.
   Existing table density is preserved; spacing is a separate opt-in. */
:is(table.zj-table-tone, .zj-table-tones :is(.data-table, .finance-simple-table__table)) {
    color: var(--zj-on-surface);
    font-variant-numeric: tabular-nums;
    --bs-table-bg: transparent;
}
:is(table.zj-table-tone, .zj-table-tones :is(.data-table, .finance-simple-table__table)) > thead > tr > th {
    background: var(--zj-surface-container-high);
    color: var(--zj-on-surface);
}
:is(table.zj-table-tone, .zj-table-tones :is(.data-table, .finance-simple-table__table)) > tbody > tr:nth-child(even):not(.is-dirty, .has-warning, .is-selected, .is-unselected, .is-editing) {
    background: var(--zj-surface-container-low);
}
:is(table.zj-table-tone, .zj-table-tones :is(.data-table, .finance-simple-table__table)) > tbody > tr:is(:hover, :focus-within):not(.is-dirty, .has-warning, .is-selected, .is-unselected, .is-editing) {
    background: var(--zj-surface-container-high);
}
:is(table.zj-table-tone, .zj-table-tones :is(.data-table, .finance-simple-table__table)) > tbody > tr:focus-within > :is(td, th) {
    box-shadow: inset 0 -2px var(--zj-on-surface-variant);
}
/* A checked native checkbox supplies the meaning; the border supports it. */
table.zj-table-tone--spaced { width: 100%; border-collapse: collapse; }
table.zj-table-tone--spaced > :is(thead, tbody) > tr > :is(th, td) { padding: .65rem .75rem; }
:is(table.zj-table-tone, .zj-table-tones :is(.data-table, .finance-simple-table__table)) > tbody > tr:has(input[type="checkbox"]:checked) > :is(td, th):first-child {
    box-shadow: inset -3px 0 var(--zj-primary);
}
:is(.inventory-command__table-wrap, .stocktake-review__table-wrap, .purchase-suggestion-group__table-shell, .zj-table-region--bounded):focus-visible {
    outline: 2px solid var(--zj-on-surface);
    outline-offset: -3px;
}
@media screen and (min-width: 1025px) {
    .zj-table-region--bounded {
        max-block-size: min(60vh, 36rem);
        overflow: auto;
        isolation: isolate;
    }
    .zj-table-region--bounded > table > thead th { position: static; }
    .zj-table-region--bounded > table > thead {
        position: sticky;
        inset-block-start: 0;
        z-index: 2;
    }
}
@media print {
    .zj-table-region--bounded { max-block-size: none; overflow: visible; }
    .zj-table-region--bounded > table > thead,
    .zj-table-region--bounded > table > thead th { position: static; }
}