/*
 * Adaptive views
 *
 * Theme-aware overrides for the public receipt flow, delivery management,
 * and the three mobile workspaces.  Keep this file after main.css and the
 * semantic token layer so every colour follows the active visual theme.
 */

:where(
    .public-delivery-root,
    #deliveryManagement-view,
    #mobileMenu-view,
    #mobileApproval-view,
    #mobileOrder-view
) {
    color: var(--ui-text);
    font-family: var(--ui-font-body);
}

:where(
    .public-delivery-root,
    #deliveryManagement-view,
    #mobileMenu-view,
    #mobileApproval-view,
    #mobileOrder-view
) *,
:where(
    .public-delivery-root,
    #deliveryManagement-view,
    #mobileMenu-view,
    #mobileApproval-view,
    #mobileOrder-view
) *::before,
:where(
    .public-delivery-root,
    #deliveryManagement-view,
    #mobileMenu-view,
    #mobileApproval-view,
    #mobileOrder-view
) *::after {
    box-sizing: border-box;
}

/* Scoped Tailwind colour bridge for templates rendered by delivery scripts. */
:is(.public-delivery-root, #deliveryManagement-view) :where(
    .text-slate-900,
    .text-slate-800,
    .text-slate-700
) {
    color: var(--ui-text);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(
    .text-slate-600,
    .text-slate-500,
    .text-slate-400
) {
    color: var(--ui-text-muted);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(.bg-white) {
    background-color: var(--ui-surface);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(
    .bg-slate-50,
    .bg-slate-100
) {
    background-color: var(--ui-surface-muted);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(
    .border-slate-200,
    .border-slate-300,
    .border-slate-400
) {
    border-color: var(--ui-border);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(
    .bg-emerald-50,
    .bg-emerald-100
) {
    background-color: var(--ui-success-soft);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(
    .text-emerald-600,
    .text-emerald-700,
    .text-emerald-800,
    .text-emerald-900
) {
    color: var(--ui-success);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(
    .border-emerald-200,
    .border-emerald-300
) {
    border-color: var(--ui-success);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(
    .bg-amber-50,
    .bg-amber-100
) {
    background-color: var(--ui-warning-soft);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(
    .text-amber-700,
    .text-amber-800,
    .text-amber-900
) {
    color: var(--ui-warning);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(
    .border-amber-200,
    .border-amber-300
) {
    border-color: var(--ui-warning);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(
    .bg-rose-50,
    .bg-rose-100
) {
    background-color: var(--ui-danger-soft);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(
    .text-rose-600,
    .text-rose-700,
    .text-rose-800,
    .text-rose-900
) {
    color: var(--ui-danger);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(
    .border-rose-200,
    .border-rose-300
) {
    border-color: var(--ui-danger);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(.bg-sky-50) {
    background-color: var(--ui-info-soft);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(.text-sky-800) {
    color: var(--ui-info);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(.border-sky-200) {
    border-color: var(--ui-info);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(.rounded-lg) {
    border-radius: var(--ui-radius-md);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(.rounded-xl) {
    border-radius: var(--ui-radius-lg);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(.rounded-full) {
    border-radius: var(--ui-radius-pill);
}

:is(.public-delivery-root, #deliveryManagement-view) :where(.shadow-sm) {
    box-shadow: var(--ui-shadow-panel);
}

/* --------------------------------------------------------------------------
   Public QR receipt page
   -------------------------------------------------------------------------- */

.public-delivery-root {
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(var(--ui-space-3), 2.5vw, var(--ui-space-6));
    background: var(--ui-canvas);
}

.delivery-public-shell {
    width: min(100%, 52rem);
    margin-inline: auto;
}

.delivery-public-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-4);
    padding: clamp(var(--ui-space-4), 3vw, var(--ui-space-6));
    border: 1px solid var(--ui-action);
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
    background: var(--ui-action);
    color: var(--ui-on-action);
    box-shadow: var(--ui-shadow-panel);
}

#public-delivery-root .delivery-public-header :where(h1, h2, p) {
    color: var(--ui-on-action);
}

.delivery-public-header-mark {
    display: grid;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid var(--ui-on-action);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface);
    color: var(--ui-action);
    font-size: var(--ui-text-lg);
    font-weight: 800;
}

.delivery-public-content {
    padding: clamp(var(--ui-space-3), 2.5vw, var(--ui-space-5));
    border: 1px solid var(--ui-border);
    border-top: 0;
    border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
    background: var(--ui-surface-muted);
}

.delivery-public-card {
    padding: clamp(var(--ui-space-3), 2vw, var(--ui-space-4));
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-panel);
}

.delivery-public-card-difference {
    border-color: var(--ui-warning);
    background: var(--ui-warning-soft);
}

.delivery-public-thumb-link {
    flex: 0 0 auto;
    border-radius: var(--ui-radius-md);
}

.delivery-public-thumb {
    width: clamp(3.75rem, 13vw, 4.75rem);
    height: clamp(3.75rem, 13vw, 4.75rem);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-muted);
    object-fit: cover;
}

.delivery-public-step,
.delivery-public-quick,
.delivery-public-difference,
.delivery-public-outline,
.delivery-public-submit {
    min-height: 2.75rem;
    touch-action: manipulation;
}

.delivery-public-step {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    place-items: center;
    padding: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    color: var(--ui-text);
    font-size: 1.2rem;
    font-weight: 750;
}

.delivery-public-qty {
    width: 5.75rem;
    height: 2.75rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    color: var(--ui-text);
    font-weight: 700;
    text-align: center;
}

.delivery-public-quick,
.delivery-public-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
    font-weight: 650;
    line-height: 1.2;
}

.delivery-public-difference {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--ui-warning);
    border-radius: var(--ui-radius-md);
    background: var(--ui-warning-soft);
    color: var(--ui-warning);
    font-size: var(--ui-text-xs);
    font-weight: 700;
    line-height: 1.2;
}

.delivery-public-reason,
.delivery-public-note,
.delivery-form-control {
    min-height: 2.75rem;
    border-color: var(--ui-border);
    background: var(--ui-surface-raised);
    color: var(--ui-text);
}

.delivery-public-note {
    min-height: 5.5rem;
    resize: vertical;
}

.delivery-public-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1rem;
    border: 1px solid var(--ui-action);
    border-radius: var(--ui-radius-md);
    background: var(--ui-action);
    color: var(--ui-on-action);
    font-weight: 750;
    box-shadow: none;
}

.delivery-public-submit:disabled {
    cursor: wait;
    opacity: 0.58;
}

.delivery-public-loading,
.delivery-public-error,
.delivery-empty-state {
    display: grid;
    min-height: 16rem;
    place-items: center;
    align-content: center;
    padding: var(--ui-space-5);
    color: var(--ui-text-muted);
    text-align: center;
}

.delivery-public-error {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-panel);
}

#public-delivery-root [data-public-message] {
    border-color: var(--ui-info);
    background: var(--ui-info-soft);
    color: var(--ui-info);
}

#public-delivery-root [data-public-message].bg-emerald-50 {
    border-color: var(--ui-success);
    background: var(--ui-success-soft);
    color: var(--ui-success);
}

#public-delivery-root [data-public-message].bg-rose-50 {
    border-color: var(--ui-danger);
    background: var(--ui-danger-soft);
    color: var(--ui-danger);
}

@media (hover: hover) {
    .delivery-public-step:hover,
    .delivery-public-quick:hover,
    .delivery-public-outline:hover {
        border-color: var(--ui-action);
        background: var(--ui-surface-muted);
        color: var(--ui-action);
    }

    .delivery-public-difference:hover {
        filter: brightness(0.97);
    }

    .delivery-public-submit:hover {
        border-color: var(--ui-action-hover);
        background: var(--ui-action-hover);
    }
}

@media (max-width: 42rem) {
    .public-delivery-root {
        padding: 0;
    }

    .delivery-public-header,
    .delivery-public-content {
        border-inline: 0;
        border-radius: 0;
    }

    .delivery-public-header {
        padding-top: max(var(--ui-space-4), env(safe-area-inset-top));
    }

    .delivery-public-content {
        padding-bottom: max(var(--ui-space-5), env(safe-area-inset-bottom));
    }

    .delivery-public-card > .flex:first-child {
        align-items: flex-start;
    }

    .delivery-public-card .delivery-public-quick {
        flex: 1 1 7rem;
    }

    .delivery-public-card .delivery-public-difference {
        flex: 1 1 calc(33.333% - var(--ui-space-2));
    }
}

@media (max-width: 24rem) {
    .delivery-public-header-mark {
        width: 2.5rem;
        height: 2.5rem;
    }

    .delivery-public-card .delivery-public-difference {
        flex-basis: calc(50% - var(--ui-space-2));
    }

    .delivery-public-qty {
        flex: 1 1 4.5rem;
        min-width: 4.5rem;
    }
}

/* --------------------------------------------------------------------------
   Delivery management
   -------------------------------------------------------------------------- */

#deliveryManagement-view {
    color: var(--ui-text);
}

.delivery-management-shell {
    width: min(100%, var(--ui-page-width));
    max-width: none;
    margin-inline: auto;
    padding: var(--ui-gutter);
}

#deliveryManagement-view .delivery-management-shell > .flex:first-child {
    padding-bottom: var(--ui-space-4);
    border-bottom: 1px solid var(--ui-border);
}

#deliveryManagement-view :where(
    .delivery-public-outline,
    .delivery-public-submit,
    [data-delete-delivery-order],
    [data-correct-receipt],
    [data-reissue-order],
    [data-revoke-order]
) {
    min-height: 2.75rem;
    touch-action: manipulation;
}

.delivery-create-panel,
.delivery-detail-panel {
    margin-top: var(--ui-space-4);
    padding: clamp(var(--ui-space-3), 2.5vw, var(--ui-space-5));
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-panel);
}

.delivery-form-control {
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    color: var(--ui-text);
    font-weight: 400;
}

#deliveryManagement-view :where(input[type="checkbox"], input[type="radio"]) {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    accent-color: var(--ui-action);
}

.delivery-order-card {
    display: block;
    width: 100%;
    min-height: 4.75rem;
    padding: var(--ui-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    color: var(--ui-text);
    text-align: start;
    box-shadow: none;
    transition: border-color var(--ui-duration-fast) ease,
        background-color var(--ui-duration-fast) ease,
        box-shadow var(--ui-duration-fast) ease;
    touch-action: manipulation;
}

.delivery-order-card-active {
    border-color: var(--ui-action);
    background: var(--ui-selection);
    box-shadow: inset 3px 0 0 var(--ui-action);
}

@media (hover: hover) {
    .delivery-order-card:hover {
        border-color: var(--ui-action);
        background: var(--ui-surface-muted);
        box-shadow: var(--ui-shadow-panel);
    }
}

.delivery-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid currentColor;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-text-xs);
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.delivery-status-draft,
.delivery-status-partial {
    background: var(--ui-warning-soft);
    color: var(--ui-warning);
}

.delivery-status-shipped {
    background: var(--ui-info-soft);
    color: var(--ui-info);
}

.delivery-status-completed {
    background: var(--ui-success-soft);
    color: var(--ui-success);
}

.delivery-status-revoked {
    background: var(--ui-danger-soft);
    color: var(--ui-danger);
}

.delivery-source-list {
    display: grid;
    max-height: min(60vh, 32rem);
    gap: var(--ui-space-2);
    padding-inline-end: var(--ui-space-1);
    overflow: auto;
    overscroll-behavior: contain;
}

.delivery-source-row {
    display: grid;
    grid-template-columns: auto 2.75rem minmax(12rem, 1fr) auto auto;
    align-items: center;
    gap: var(--ui-space-3);
    min-height: 4rem;
    padding: var(--ui-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    color: var(--ui-text);
    cursor: pointer;
}

@media (hover: hover) {
    .delivery-source-row:hover {
        border-color: var(--ui-action);
        background: var(--ui-surface-muted);
    }
}

.delivery-source-thumb {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-muted);
    object-fit: cover;
}

.delivery-source-qty,
.delivery-source-date {
    min-height: 2.75rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-raised);
    color: var(--ui-text);
}

.delivery-source-qty {
    width: 5rem;
    padding: 0.4rem;
    text-align: end;
}

.delivery-source-date {
    width: 9.25rem;
    padding: 0.4rem;
    font-size: var(--ui-text-xs);
}

.delivery-kpi {
    display: grid;
    min-width: 0;
    gap: var(--ui-space-1);
    padding: var(--ui-space-3);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-muted);
}

.delivery-kpi span {
    color: var(--ui-text-muted);
    font-size: var(--ui-text-xs);
}

.delivery-kpi strong {
    overflow-wrap: anywhere;
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
}

.delivery-qr {
    width: clamp(8.5rem, 22vw, 11rem);
    height: auto;
    aspect-ratio: 1;
    padding: var(--ui-space-2);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
}

.delivery-detail-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
}

.delivery-detail-table th,
.delivery-detail-table td {
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid var(--ui-border-soft);
    text-align: start;
    vertical-align: middle;
}

.delivery-detail-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ui-surface-muted);
    color: var(--ui-text-muted);
    font-size: var(--ui-text-xs);
    font-weight: 750;
    white-space: nowrap;
}

.delivery-detail-table tbody tr:last-child td {
    border-bottom: 0;
}

.delivery-detail-table tbody tr:hover td {
    background: var(--ui-surface-muted);
}

.delivery-dashboard-shortcut {
    border-color: var(--ui-action);
    background: var(--ui-success-soft);
    color: var(--ui-action);
    box-shadow: var(--ui-shadow-panel);
}

.delivery-dashboard-shortcut small {
    color: var(--ui-text-muted);
}

@media (max-width: 62rem) {
    .delivery-source-row {
        grid-template-columns: auto 2.75rem minmax(10rem, 1fr);
    }

    .delivery-source-row > :nth-child(4) {
        grid-column: 2 / -1;
    }

    .delivery-source-row > :nth-child(5) {
        grid-column: 2 / -1;
        width: 100%;
    }
}

@media (max-width: 44rem) {
    .delivery-management-shell {
        padding: var(--ui-space-3);
    }

    #deliveryManagement-view .delivery-management-shell > .flex:first-child {
        display: grid;
    }

    #deliveryManagement-view .delivery-management-shell > .flex:first-child > .flex:last-child {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    #deliveryManagement-view .delivery-management-shell > .flex:first-child > .flex:last-child > * {
        width: 100%;
    }

    #deliveryManagement-view [data-show-create] {
        grid-column: 1 / -1;
    }

    .delivery-source-row {
        grid-template-columns: auto 2.75rem minmax(0, 1fr);
        gap: var(--ui-space-2);
    }

    .delivery-source-row > :nth-child(4),
    .delivery-source-row > :nth-child(5) {
        grid-column: 2 / -1;
        width: 100%;
        margin: 0;
    }

    .delivery-source-row > :nth-child(4) {
        justify-content: space-between;
    }

    .delivery-source-qty {
        width: min(7rem, 45vw);
    }

    .delivery-qr {
        justify-self: center;
    }

    .delivery-detail-panel > .overflow-x-auto {
        overflow: visible;
    }

    .delivery-detail-table,
    .delivery-detail-table tbody {
        display: block;
        width: 100%;
    }

    .delivery-detail-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .delivery-detail-table tbody {
        display: grid;
        gap: var(--ui-space-3);
    }

    .delivery-detail-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: var(--ui-space-3);
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-md);
        background: var(--ui-surface);
        box-shadow: var(--ui-shadow-panel);
    }

    .delivery-detail-table td {
        display: block;
        min-width: 0;
        padding: var(--ui-space-2);
        border: 0;
        overflow-wrap: anywhere;
    }

    .delivery-detail-table td::before {
        display: block;
        margin-bottom: var(--ui-space-1);
        color: var(--ui-text-muted);
        font-size: var(--ui-text-xs);
        font-weight: 700;
    }

    .delivery-detail-table td:nth-child(1),
    .delivery-detail-table td:nth-child(2),
    .delivery-detail-table td:nth-child(7) {
        grid-column: 1 / -1;
    }

    .delivery-detail-table td:nth-child(1)::before { content: "品項"; }
    .delivery-detail-table td:nth-child(2)::before { content: "來源申請單"; }
    .delivery-detail-table td:nth-child(3)::before { content: "發貨"; }
    .delivery-detail-table td:nth-child(4)::before { content: "已領"; }
    .delivery-detail-table td:nth-child(5)::before { content: "剩餘"; }
    .delivery-detail-table td:nth-child(6)::before { content: "到貨日"; }
    .delivery-detail-table td:nth-child(7)::before { content: "差異／意見"; }
}

@media (max-width: 25rem) {
    #deliveryManagement-view .delivery-management-shell > .flex:first-child > .flex:last-child {
        grid-template-columns: 1fr;
    }

    #deliveryManagement-view [data-show-create] {
        grid-column: auto;
    }

    .delivery-detail-table tr {
        grid-template-columns: 1fr;
    }

    .delivery-detail-table td {
        grid-column: 1 / -1;
    }
}

/* --------------------------------------------------------------------------
   Shared mobile workspace components
   -------------------------------------------------------------------------- */

:is(#mobileApproval-view, #mobileOrder-view) .mobile-view {
    position: fixed;
    inset: 0 auto 0 50%;
    z-index: 10000;
    display: flex;
    width: min(100%, 52rem);
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow: hidden;
    flex-direction: column;
    border-inline: 1px solid var(--ui-border);
    background: var(--ui-canvas);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-float);
    transform: translateX(-50%);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-header {
    position: relative;
    top: auto;
    z-index: 20;
    display: flex;
    min-height: 4rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: max(var(--ui-space-3), env(safe-area-inset-top)) var(--ui-space-4) var(--ui-space-3);
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-raised);
    color: var(--ui-text);
    box-shadow: none;
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-header h1,
:is(#mobileApproval-view, #mobileOrder-view) .mobile-title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--ui-text);
    font-size: var(--ui-text-lg);
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#mobileApproval-view, #mobileOrder-view) :where(
    .mobile-header .close-btn,
    .mobile-back-btn,
    .mobile-cart-btn
) {
    display: inline-flex;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-muted);
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
    font-weight: 650;
    touch-action: manipulation;
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--ui-space-3);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ui-canvas);
    -webkit-overflow-scrolling: touch;
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-tabs,
:is(#mobileApproval-view, #mobileOrder-view) .mobile-category-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: var(--ui-space-1);
    padding: var(--ui-space-2) var(--ui-space-3);
    overflow-x: auto;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-tab, .mobile-category-tab) {
    min-width: max-content;
    min-height: 2.75rem;
    flex: 1 0 auto;
    padding: 0.55rem 0.8rem;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-md);
    background: transparent;
    color: var(--ui-text-muted);
    font-size: var(--ui-text-sm);
    font-weight: 650;
    line-height: 1.2;
    scroll-snap-align: start;
    touch-action: manipulation;
}

:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-tab, .mobile-category-tab).active {
    border-color: var(--ui-action);
    background: var(--ui-selection);
    color: var(--ui-action);
}

:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-card, .mobile-approval-card) {
    margin-bottom: var(--ui-space-3);
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-panel);
}

:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-card-header, .mobile-card-footer) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3) var(--ui-space-4);
    border-color: var(--ui-border-soft);
    background: var(--ui-surface-muted);
    color: var(--ui-text);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-card-header {
    border-bottom: 1px solid var(--ui-border-soft);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-card-footer {
    border-top: 1px solid var(--ui-border-soft);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-card-body {
    padding: var(--ui-space-4);
    background: var(--ui-surface);
    color: var(--ui-text);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-badge {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border: 1px solid currentColor;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-text-xs);
    font-weight: 700;
    white-space: nowrap;
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-badge.pending {
    background: var(--ui-warning-soft);
    color: var(--ui-warning);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-badge.approved {
    background: var(--ui-success-soft);
    color: var(--ui-success);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-badge.rejected {
    background: var(--ui-danger-soft);
    color: var(--ui-danger);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-btn {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    padding: 0.65rem 0.9rem;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-sm);
    font-weight: 700;
    line-height: 1.2;
    touch-action: manipulation;
}

:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-btn.primary, .mobile-add-btn, .mobile-checkout-btn) {
    border-color: var(--ui-action);
    background: var(--ui-action);
    color: var(--ui-on-action);
}

:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-btn.secondary, .mobile-btn-secondary) {
    border-color: var(--ui-border);
    background: var(--ui-surface-muted);
    color: var(--ui-text);
}

:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-btn.success, .mobile-btn-success) {
    border-color: var(--ui-success-solid);
    background: var(--ui-success-solid);
    color: var(--ui-on-action);
}

:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-btn.danger, .mobile-btn-danger) {
    border-color: var(--ui-danger-solid);
    background: var(--ui-danger-solid);
    color: var(--ui-on-action);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-empty, .mobile-empty-state) {
    display: grid;
    min-height: 14rem;
    place-items: center;
    align-content: center;
    padding: var(--ui-space-6) var(--ui-space-4);
    color: var(--ui-text-muted);
    text-align: center;
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-empty-icon {
    margin-bottom: var(--ui-space-3);
    font-size: clamp(2.5rem, 10vw, 3.25rem);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-stats-bar {
    display: flex;
    min-height: 3rem;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--ui-space-5);
    padding: var(--ui-space-2) var(--ui-space-4);
    overflow-x: auto;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-stat-item {
    display: flex;
    align-items: baseline;
    gap: var(--ui-space-2);
    white-space: nowrap;
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-stat-label {
    color: var(--ui-text-muted);
    font-size: var(--ui-text-xs);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-stat-value {
    color: var(--ui-text);
    font-size: var(--ui-text-md);
    font-weight: 750;
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-stat-value.pending {
    color: var(--ui-warning);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-stat-value.success {
    color: var(--ui-success);
}

:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-item-row, .mobile-info-row) {
    border-color: var(--ui-border-soft);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-item-row {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3) 0;
    border-bottom: 1px solid var(--ui-border-soft);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-item-row:last-child {
    border-bottom: 0;
}

:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-item-image, .mobile-product-image) {
    flex: 0 0 auto;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-muted);
    object-fit: cover;
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-item-image {
    width: 3.75rem;
    height: 3.75rem;
}

:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-item-info, .mobile-product-info) {
    min-width: 0;
    flex: 1 1 auto;
}

:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-item-name, .mobile-product-name, .mobile-value) {
    color: var(--ui-text);
    font-weight: 650;
}

:is(#mobileApproval-view, #mobileOrder-view) :where(
    .mobile-item-detail,
    .mobile-product-spec,
    .mobile-label,
    .mobile-request-date,
    .mobile-cart-count
) {
    color: var(--ui-text-muted);
}

:is(#mobileApproval-view, #mobileOrder-view) :where(
    .mobile-item-price,
    .mobile-item-amount,
    .mobile-product-price,
    .mobile-amount,
    .mobile-request-id
) {
    color: var(--ui-action);
    font-weight: 700;
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-action-bar {
    display: flex;
    flex: 0 0 auto;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3) var(--ui-space-4) max(var(--ui-space-3), env(safe-area-inset-bottom));
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface-raised) !important;
    box-shadow: 0 -8px 24px color-mix(in srgb, var(--ui-text) 10%, transparent) !important;
}

/* Legacy component names kept for older mobile render paths. */
:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-approval-container, .mobile-order-container) {
    min-height: 100%;
    background: var(--ui-canvas);
    color: var(--ui-text);
}

:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-approval-list, .mobile-product-list, .mobile-items-list) {
    display: grid;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3);
}

:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-info-row, .mobile-card-footer, .mobile-detail-footer) {
    background: var(--ui-surface-muted);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-header-tag {
    border-radius: var(--ui-radius-sm);
    background: var(--ui-selection);
    color: var(--ui-action);
}

:is(#mobileApproval-view, #mobileOrder-view) :where(.mobile-cart-badge, .mobile-menu-badge) {
    background: var(--ui-danger-solid);
    color: var(--ui-on-action);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-detail-modal {
    background: var(--ui-overlay);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-detail-content {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-float);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-detail-header {
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-raised);
    color: var(--ui-text);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-detail-section-title {
    color: var(--ui-text-muted);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-detail-title,
:is(#mobileApproval-view, #mobileOrder-view) .mobile-detail-section {
    color: var(--ui-text);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-detail-body {
    background: var(--ui-surface);
    color: var(--ui-text);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-detail-footer {
    border-color: var(--ui-border);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-item-card {
    border: 1px solid var(--ui-border-soft);
    background: var(--ui-surface-muted);
    color: var(--ui-text);
}

:is(#mobileApproval-view, #mobileOrder-view) .mobile-detail-close {
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface-muted);
    color: var(--ui-text);
}

/* --------------------------------------------------------------------------
   Mobile approval
   -------------------------------------------------------------------------- */

#mobileApproval-view .mobile-content {
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
}

#mobileApproval-view .mobile-approval-card:active {
    transform: none;
}

#mobileApproval-view :where(#mobile-approve-modal, #mobile-reject-modal) {
    background: var(--ui-overlay) !important;
    backdrop-filter: blur(3px);
}

#mobileApproval-view :where(#mobile-approve-modal, #mobile-reject-modal) > div {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-float);
}

#mobileApproval-view :where(#mobile-approve-modal, #mobile-reject-modal) > div > :first-child {
    border-bottom-color: var(--ui-border) !important;
}

#mobileApproval-view :where(#mobile-approve-modal, #mobile-reject-modal) > div > :last-child {
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface-muted) !important;
}

#mobileApproval-view :where(#mobile-approve-comment, #mobile-reject-reason) {
    min-height: 6rem;
    border-color: var(--ui-border) !important;
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text);
}

#mobileApproval-view :where(input[type="checkbox"], input[type="radio"]) {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--ui-action);
}

/* Precise replacements for colours embedded by the legacy mobile renderer. */
:where(#mobileApproval-view, #mobileOrder-view) [style*="color:#333"] {
    color: var(--ui-text) !important;
}

:where(#mobileApproval-view, #mobileOrder-view) :where(
    [style*="color:#555"],
    [style*="color:#666"],
    [style*="color:#6b7280"],
    [style*="color:#888"],
    [style*="color:#999"],
    [style*="color:#9ca3af"]
) {
    color: var(--ui-text-muted) !important;
}

:where(#mobileApproval-view, #mobileOrder-view) [style*="color:#667eea"] {
    color: var(--ui-action) !important;
}

:where(#mobileApproval-view, #mobileOrder-view) [style*="color:#10b981"] {
    color: var(--ui-success) !important;
}

:where(#mobileApproval-view, #mobileOrder-view) [style*="color:#ef4444"] {
    color: var(--ui-danger) !important;
}

:where(#mobileApproval-view, #mobileOrder-view) :where(
    [style*="background:#f5f5f5"],
    [style*="background:#f8f9fa"],
    [style*="background:#f3f4f6"]
) {
    background-color: var(--ui-surface-muted) !important;
}

:where(#mobileApproval-view, #mobileOrder-view) [style*="background:#f0f9ff"] {
    background-color: var(--ui-info-soft) !important;
}

:where(#mobileApproval-view, #mobileOrder-view) [style*="background:#fef2f2"] {
    background-color: var(--ui-danger-soft) !important;
}

:where(#mobileApproval-view, #mobileOrder-view) :where(
    [style*="border:1px solid #ddd"],
    [style*="border-top:1px solid #eee"],
    [style*="border-bottom:1px solid #eee"]
) {
    border-color: var(--ui-border) !important;
}

/* --------------------------------------------------------------------------
   Mobile ordering
   -------------------------------------------------------------------------- */

#mobileOrder-view .mobile-search,
#mobileOrder-view .mobile-search-bar {
    display: flex;
    flex: 0 0 auto;
    gap: var(--ui-space-2);
    padding: var(--ui-space-3);
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

#mobileOrder-view .mobile-search-input-wrapper,
#mobileOrder-view .mobile-cart-info {
    color: var(--ui-text);
}

#mobileOrder-view .mobile-search :where(input, .mobile-search-input) {
    min-width: 0;
    min-height: 2.75rem;
    flex: 1 1 auto;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    color: var(--ui-text);
    font-size: 1rem;
}

#mobileOrder-view .mobile-search-icon {
    color: var(--ui-text-muted);
}

#mobileOrder-view .mobile-search-clear {
    display: inline-grid;
    min-width: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface-muted);
    color: var(--ui-text);
}

#mobileOrder-view #mobile-order-products {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: var(--ui-space-3);
}

#mobileOrder-view .mobile-product-card {
    display: flex;
    min-width: 0;
    min-height: 7rem;
    align-items: stretch;
    gap: var(--ui-space-3);
    margin: 0;
    padding: var(--ui-space-3);
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-panel);
}

#mobileOrder-view .mobile-product-card.in-cart {
    border-color: var(--ui-action);
    background: var(--ui-selection);
}

#mobileOrder-view .mobile-product-image {
    width: clamp(4rem, 18vw, 5rem);
    height: clamp(4rem, 18vw, 5rem);
}

#mobileOrder-view .mobile-product-info {
    display: flex;
    flex-direction: column;
}

#mobileOrder-view .mobile-product-name {
    margin-bottom: var(--ui-space-1);
    overflow: hidden;
    font-size: var(--ui-text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mobileOrder-view .mobile-product-spec {
    display: -webkit-box;
    margin-bottom: var(--ui-space-1);
    overflow: hidden;
    font-size: var(--ui-text-xs);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#mobileOrder-view .mobile-product-price {
    margin-top: auto;
    font-size: var(--ui-text-sm);
}

#mobileOrder-view .mobile-product-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
    margin-top: var(--ui-space-2);
}

#mobileOrder-view .mobile-add-btn,
#mobileOrder-view .mobile-checkout-btn {
    display: inline-flex;
    min-width: 5rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--ui-action);
    border-radius: var(--ui-radius-md);
    background: var(--ui-action);
    color: var(--ui-on-action);
    font-size: var(--ui-text-sm);
    font-weight: 700;
    box-shadow: none;
    touch-action: manipulation;
}

#mobileOrder-view :where(.mobile-qty-control, .mobile-quantity-control) {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-muted);
}

#mobileOrder-view .mobile-qty-btn {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    place-items: center;
    border: 0;
    background: var(--ui-surface-raised);
    color: var(--ui-action);
    font-size: var(--ui-text-lg);
    font-weight: 750;
    touch-action: manipulation;
}

#mobileOrder-view :where(.mobile-qty-input, .mobile-qty-value) {
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    background: var(--ui-surface-muted);
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
    font-weight: 700;
    text-align: center;
}

#mobileOrder-view .mobile-cart-fab {
    position: absolute;
    right: max(var(--ui-space-4), env(safe-area-inset-right));
    bottom: max(var(--ui-space-5), env(safe-area-inset-bottom));
    z-index: 30;
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border: 1px solid var(--ui-action);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-action);
    color: var(--ui-on-action);
    box-shadow: var(--ui-shadow-float);
    touch-action: manipulation;
}

#mobileOrder-view .mobile-cart-fab svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--ui-on-action);
}

#mobileOrder-view .mobile-cart-fab .cart-count {
    display: grid;
    min-width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border: 2px solid var(--ui-surface-raised);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-danger-solid);
    color: var(--ui-on-action);
    font-size: 0.68rem;
    font-weight: 750;
}

#mobileOrder-view :where(
    input[type="text"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="number"],
    select,
    textarea
) {
    min-height: 2.75rem;
    border-color: var(--ui-border) !important;
    background-color: var(--ui-surface-raised) !important;
    color: var(--ui-text) !important;
}

#mobileOrder-view :where(input, select, textarea):disabled {
    background-color: var(--ui-surface-muted) !important;
    color: var(--ui-text-muted) !important;
}

#mobileOrder-view :where(input[type="checkbox"], input[type="radio"]) {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--ui-action);
}

#mobileOrder-view label:has(> #mobile-attachment-input) {
    min-height: 2.75rem;
    background: var(--ui-action) !important;
    color: var(--ui-on-action) !important;
    touch-action: manipulation;
}

#mobileOrder-view .mobile-cart-summary {
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface-raised);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-panel);
}

#mobileOrder-view .mobile-cart-total {
    color: var(--ui-text);
}

@media (min-width: 42rem) {
    #mobileOrder-view #mobile-order-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 28rem) {
    :is(#mobileApproval-view, #mobileOrder-view) .mobile-header {
        padding-inline: var(--ui-space-3);
    }

    :is(#mobileApproval-view, #mobileOrder-view) .mobile-card-header,
    :is(#mobileApproval-view, #mobileOrder-view) .mobile-card-body {
        padding-inline: var(--ui-space-3);
    }

    :is(#mobileApproval-view, #mobileOrder-view) .mobile-item-row {
        display: grid;
        grid-template-columns: 3.75rem minmax(0, 1fr);
    }

    :is(#mobileApproval-view, #mobileOrder-view) .mobile-item-row > :last-child:not(.mobile-item-info) {
        grid-column: 2;
        text-align: start;
    }

    #mobileOrder-view .mobile-product-card {
        gap: var(--ui-space-2);
        padding: var(--ui-space-2);
    }

    #mobileOrder-view .mobile-product-actions > .mobile-btn {
        flex: 1 1 auto;
    }

    #mobileOrder-view .mobile-action-bar > div:last-child {
        flex-wrap: wrap;
    }
}

/* --------------------------------------------------------------------------
   Mobile feature menu (legacy template is inline-styled, hence the narrow
   !important overrides below).
   -------------------------------------------------------------------------- */

#mobileMenu-view > div {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ui-canvas) !important;
    color: var(--ui-text);
}

#mobileMenu-view > div > div:first-child {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 4rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-raised) !important;
    box-shadow: none;
}

#mobileMenu-view h1 {
    color: var(--ui-text) !important;
    font-weight: 750;
}

#mobileMenu-view [data-action="close-mobile-menu"] {
    min-height: 2.75rem;
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
    font-weight: 650;
    touch-action: manipulation;
}

#mobileMenu-view > div > div:nth-child(2) {
    width: min(100%, 52rem);
    margin-inline: auto;
}

#mobileMenu-view [data-action^="open-mobile-"] {
    min-height: 6rem;
    border-color: var(--ui-border) !important;
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-panel) !important;
    touch-action: manipulation;
}

#mobileMenu-view [data-action^="open-mobile-"] > div:first-child {
    border: 1px solid var(--ui-border);
    background: var(--ui-selection) !important;
    color: var(--ui-action);
}

#mobileMenu-view [data-action="open-mobile-approval-from-menu"] > div:first-child {
    background: var(--ui-warning-soft) !important;
    color: var(--ui-warning);
}

#mobileMenu-view [data-action^="open-mobile-"] [style*="color:#333"] {
    color: var(--ui-text) !important;
}

#mobileMenu-view [data-action^="open-mobile-"] [style*="color:#666"],
#mobileMenu-view > div > div:nth-child(2) > div:first-child [style*="color:#666"],
#mobileMenu-view > div > div:nth-child(2) > div:first-child [style*="color:#999"] {
    color: var(--ui-text-muted) !important;
}

#mobileMenu-view [data-action="open-mobile-approval-from-menu"] > [style*="background:#ef4444"] {
    background: var(--ui-danger-solid) !important;
    color: var(--ui-on-action) !important;
    box-shadow: none !important;
}

#mobileMenu-view [data-action="switch-to-desktop"] {
    min-height: 2.75rem;
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
    font-weight: 650;
    touch-action: manipulation;
}

/* Class-based menu variant retained for callers that do not use inline markup. */
#mobileMenu-view .mobile-menu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ui-space-3);
    padding: var(--ui-space-2);
}

#mobileMenu-view .mobile-menu-card {
    min-height: 7rem;
    padding: var(--ui-space-5);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-panel);
    touch-action: manipulation;
}

#mobileMenu-view .mobile-menu-title {
    color: var(--ui-text);
}

#mobileMenu-view .mobile-menu-icon {
    color: var(--ui-action);
}

#mobileMenu-view .mobile-menu-desc {
    color: var(--ui-text-muted);
}

#mobileMenu-view .mobile-menu-badge {
    background: var(--ui-danger-solid);
    color: var(--ui-on-action);
    box-shadow: none;
}

@media (hover: hover) {
    :is(#mobileApproval-view, #mobileOrder-view) :where(
        .mobile-header .close-btn,
        .mobile-back-btn,
        .mobile-cart-btn,
        .mobile-btn.secondary,
        .mobile-btn-secondary
    ):hover,
    #mobileMenu-view :where(
        [data-action="close-mobile-menu"],
        [data-action="switch-to-desktop"]
    ):hover {
        border-color: var(--ui-action);
        background: var(--ui-selection) !important;
        color: var(--ui-action) !important;
    }

    :is(#mobileApproval-view, #mobileOrder-view) :where(
        .mobile-btn.primary,
        .mobile-add-btn,
        .mobile-checkout-btn
    ):hover {
        border-color: var(--ui-action-hover);
        background: var(--ui-action-hover);
    }

    #mobileMenu-view [data-action^="open-mobile-"]:hover,
    #mobileMenu-view .mobile-menu-card:hover {
        border-color: var(--ui-action) !important;
        box-shadow: var(--ui-shadow-float) !important;
        transform: translateY(-2px);
    }
}

@media (min-width: 40rem) {
    #mobileMenu-view > div > div:nth-child(2) > div:nth-child(2),
    #mobileMenu-view .mobile-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 32rem) {
    :is(#mobileApproval-view, #mobileOrder-view) .mobile-view {
        border-inline: 0;
        box-shadow: none;
    }

}

@supports not (color: color-mix(in srgb, white, black)) {
    :is(#mobileApproval-view, #mobileOrder-view) .mobile-action-bar {
        box-shadow: var(--ui-shadow-panel) !important;
    }
}