/* ===========================================================================
   Application shell — the chrome MainLayout draws around every page.

   Two deliberately unalike shells, picked by role in MainLayout:

     .app-bar--staff   Back-office console. Dark chrome over light content,
                       drawer toggle, role badge, compact square icon actions.
     .app-bar--store   Storefront. Light glass, brand hairline, pill nav and a
                       lime CTA. No drawer, no hamburger — nothing that reads
                       as an ERP to a customer.

   The visual language is the one StoreOrder / Menu / OrderKanban already
   speak: the lime -> brown brand gradient, 12-16px radii, soft shadows, pill
   chips, uppercase micro-labels, 120-180ms transitions.

   Global rather than a scoped MainLayout.razor.css because nearly every rule
   below has to reach a MudBlazor internal (.mud-appbar, .mud-toolbar,
   .mud-nav-link, .mud-avatar) — CSS isolation never stamps its scope
   attribute onto another component's markup, so a scoped sheet could only
   reach these through a plain wrapper element that does not exist here.

   The app bar is 64px tall and must stay that way: StoreOrder, Menu, Order
   and ManualOrderProductSelector all pin their sticky rows with `top: 64px`.
   =========================================================================== */

:root {
    --app-lime: var(--mud-palette-primary, #A7CF47);
    --app-lime-dk: var(--mud-palette-primary-darken, #8AB636);
    --app-lime-lt: var(--mud-palette-primary-lighten, #B8D96F);
    /* One step deeper than the palette goes. The wordmark gradient has to land on
       something that still reads as text on white, and primary-darken alone does not. */
    --app-lime-deep: color-mix(in srgb, var(--mud-palette-primary-darken, #8AB636) 66%, #0f1408);
    --app-brown: var(--mud-palette-secondary, #A9783D);
    --app-brown-dk: var(--mud-palette-secondary-darken, #8A6031);
    --app-gold: var(--mud-palette-tertiary, #F0DA2F);

    --app-ink: var(--mud-palette-text-primary, rgba(0,0,0,.87));
    --app-muted: var(--mud-palette-text-secondary, rgba(0,0,0,.60));
    --app-surface: var(--mud-palette-surface, #fff);
    --app-line: var(--mud-palette-lines-default, rgba(0,0,0,.12));

    --app-radius: 16px;
    --app-radius-sm: 12px;
    --app-shadow: 0 6px 20px rgba(0,0,0,.08);

    /* Back-office chrome — a warm near-black pulled towards the brand brown so
       the dark bar still belongs to the palette instead of looking bolted on. */
    --app-console: #221d19;
    --app-console-2: #2f2823;
}

/* ===========================================================================
   Shared app-bar frame
   =========================================================================== */

/* Both bars are left at Color.Default — which emits no `mud-theme-*` class — so the
   rules below can paint them. Color="Color.Transparent" would look like the right
   choice and is not: `.mud-theme-transparent` sets `color: inherit !important` and
   `background-color: transparent !important`, and no specificity beats !important. */
.app-bar.mud-appbar {
    box-shadow: none;
}

.app-bar .mud-toolbar.app-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 14px;
    min-width: 0;
}

/* Brand hairline: the same lime -> gold -> brown run the page heroes open
   with, so the chrome and the content below it read as one brand. */
.app-bar.mud-appbar::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--app-lime) 0%,
        var(--app-gold) 45%,
        var(--app-brown) 100%);
    pointer-events: none;
}

/* --------------------------------- Brand --------------------------------- */

.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    border-radius: var(--app-radius-sm);
    padding: 4px 6px;
    transition: background .15s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.app-brand:hover { transform: translateY(-1px); }

/* min-width: 0 is the part that matters: a replaced element in a flex row otherwise refuses to
   shrink below its intrinsic width, so on a narrow phone the wordmark pushed the bar's actions
   past the right edge instead of giving way. object-position keeps it flush left as it narrows.
   Same split the page heroes use (StoreOrder's .so-brand/.so-langs): the brand absorbs all of
   the row's shrinking, the actions beside it stay whole. */
.app-brand__logo {
    height: 22px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}

.app-brand__mark {
    height: 30px;
    width: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

.app-brand__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    line-height: 1.05;
}

/* One line each, ellipsised — not wrapped, and not left to spill. The column above is
   min-width: 0, so without an overflow rule these nowrap spans just ran out under the
   actions on a narrow phone. Mirrors .so-brand-tag in the StoreOrder hero. */
.app-brand__name {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-brand__sub {
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .68;
}

/* ------------------------------ Icon actions ----------------------------- */

.app-bar .app-icon-btn.mud-icon-button {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--app-radius-sm);
    transition: background-color .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}

.app-bar .app-icon-btn.mud-icon-button:hover { transform: translateY(-1px); }

/* --------------------------------- Menus --------------------------------- */

/* PopoverClass lands on the MudPopover root itself, not on a paper child. */
.app-menu-popover.mud-popover {
    border-radius: 14px;
    box-shadow: var(--app-shadow), 0 2px 6px rgba(0,0,0,.06);
}

.app-menu-popover .mud-menu-item {
    width: auto;
    margin: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

/* Flag swatches inside the language menu. */
.app-lang-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.app-flag {
    display: inline-flex;
    line-height: 0;
}

.app-flag svg {
    width: 20px;
    height: 14px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.14);
}

.app-menu-check { margin-inline-start: auto; padding-inline-start: 14px; }

/* --------------------------------- Account -------------------------------- */

.app-user {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    cursor: pointer;
    max-width: 220px;
    transition: background-color .15s ease, transform .15s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.app-user:hover { transform: translateY(-1px); }

.app-user__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.1;
    text-align: start;
}

.app-user__name {
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-user__role {
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .66;
    white-space: nowrap;
}

.app-avatar.mud-avatar {
    width: 34px;
    height: 34px;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(135deg, var(--app-lime) 0%, var(--app-lime-dk) 45%, var(--app-brown) 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    flex-shrink: 0;
}

.app-user__caret { flex-shrink: 0; opacity: .7; }

/* Header block at the top of the account menu. */
.app-account-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px;
    min-width: 232px;
}

.app-account-head__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-account-head__name { font-size: .95rem; font-weight: 800; color: var(--app-ink); }
.app-account-head__meta { font-size: .74rem; font-weight: 600; color: var(--app-muted); }

/* ===========================================================================
   Staff shell — back-office console chrome
   =========================================================================== */

.app-bar--staff.mud-appbar {
    color: #fff;
    background: linear-gradient(115deg,
        color-mix(in srgb, var(--app-console-2) 92%, transparent) 0%,
        color-mix(in srgb, var(--app-console) 92%, transparent) 52%,
        color-mix(in srgb, var(--app-console-2) 92%, transparent) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
}

/* A faint lime wash bleeding in from the left edge — the same trick the page
   heroes use to keep a dark surface from going flat. */
.app-bar--staff.mud-appbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 220% at 0% 0%,
        rgba(167,207,71,.16) 0%,
        rgba(167,207,71,0) 55%);
    pointer-events: none;
}

.app-bar--staff .mud-toolbar.app-toolbar { position: relative; z-index: 1; }

.app-bar--staff .app-icon-btn.mud-icon-button {
    color: rgba(255,255,255,.82);
    background-color: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
}

.app-bar--staff .app-icon-btn.mud-icon-button:hover {
    color: #fff;
    background-color: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.2);
}

.app-bar--staff .app-brand:hover { background-color: rgba(255,255,255,.07); }
.app-bar--staff .app-brand__name { color: #fff; }
.app-bar--staff .app-brand__sub { color: var(--app-lime-lt); opacity: .85; }

.app-bar--staff .app-user {
    background-color: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    color: #fff;
}

.app-bar--staff .app-user:hover {
    background-color: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.2);
}

.app-bar--staff .app-user__role { color: var(--app-lime-lt); opacity: 1; }

/* Role badge next to the wordmark — says at a glance which console you are in. */
.app-role {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    white-space: nowrap;
    color: var(--app-lime-lt);
    background-color: rgba(167,207,71,.14);
    border: 1px solid rgba(167,207,71,.34);
}

.app-divider-v {
    width: 1px;
    height: 26px;
    flex-shrink: 0;
    margin-inline: 4px;
    background-color: rgba(255,255,255,.14);
}

/* ===========================================================================
   Store shell — storefront chrome
   =========================================================================== */

.app-bar--store.mud-appbar {
    color: var(--app-ink);
    background: color-mix(in srgb, var(--app-surface) 84%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 2px 14px rgba(0,0,0,.05);
}

.app-bar--store .app-brand:hover { background-color: color-mix(in srgb, var(--app-lime) 12%, transparent); }

/* Wordmark inked across the green spectrum only — bright lime into deep green, no
   brown. The white SVG wordmark the page heroes use would be invisible on this light
   bar, so the store shell pairs the app mark with type instead. */
.app-bar--store .app-brand__name {
    background: linear-gradient(115deg,
        var(--app-lime) 0%,
        var(--app-lime-dk) 42%,
        var(--app-lime-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.app-bar--store .app-brand__sub { color: var(--app-muted); }

.app-bar--store .app-icon-btn.mud-icon-button {
    color: var(--app-muted);
    background-color: color-mix(in srgb, var(--app-ink) 4%, transparent);
    border: 1px solid transparent;
}

.app-bar--store .app-icon-btn.mud-icon-button:hover {
    color: var(--app-lime-dk);
    background-color: color-mix(in srgb, var(--app-lime) 16%, transparent);
    border-color: color-mix(in srgb, var(--app-lime) 34%, transparent);
}

/* -------------------------------- Pill nav -------------------------------- */

.app-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.app-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    color: var(--app-muted);
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.app-nav__link:hover {
    color: var(--app-lime-dk);
    background-color: color-mix(in srgb, var(--app-lime) 13%, transparent);
    transform: translateY(-1px);
}

.app-nav__link.is-active {
    color: var(--app-lime-dk);
    background-color: color-mix(in srgb, var(--app-lime) 18%, transparent);
}

.app-nav__link .mud-icon-root { font-size: 1.15rem; }

/* --------------------------------- CTA ------------------------------------ */

.app-bar .app-cta.mud-button-root {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 7px 20px;
    font-weight: 800;
    font-size: .875rem;
    text-transform: none;
    letter-spacing: .01em;
    color: #fff;
    background: linear-gradient(115deg, var(--app-lime) 0%, var(--app-lime-dk) 100%);
    box-shadow: 0 6px 16px rgba(138,182,54,.32);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.app-bar .app-cta.mud-button-root:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 10px 22px rgba(138,182,54,.4);
}

.app-bar .app-cta .mud-icon-root { font-size: 1.15rem; }

/* ------------------------------ Sign-in ----------------------------------- */

/* Customer sign-in sits next to the ordering CTA, so it is outlined rather than
   filled: two lime buttons side by side would compete, and ordering is still the
   thing the bar is for. */
.app-bar .app-signin.mud-button-root {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 700;
    font-size: .875rem;
    text-transform: none;
    letter-spacing: .01em;
    color: var(--app-muted);
    border: 1px solid var(--app-line);
    background: transparent;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.app-bar .app-signin.mud-button-root:hover {
    color: var(--app-lime-dk);
    border-color: color-mix(in srgb, var(--app-lime) 40%, transparent);
    background-color: color-mix(in srgb, var(--app-lime) 12%, transparent);
    transform: translateY(-1px);
}

.app-bar .app-signin .mud-icon-root { font-size: 1.15rem; }

.app-bar--store .app-user {
    background-color: color-mix(in srgb, var(--app-ink) 4%, transparent);
    border: 1px solid var(--app-line);
    color: var(--app-ink);
}

.app-bar--store .app-user:hover {
    background-color: color-mix(in srgb, var(--app-lime) 13%, transparent);
    border-color: color-mix(in srgb, var(--app-lime) 40%, transparent);
}

/* Desktop is not always wide: below ~1150px the pill labels go and the icons
   carry the nav, before anything can be clipped by the toolbar's nowrap row. */
@media (max-width: 1150px) {
    .app-nav__link { padding: 9px 11px; gap: 0; }
    .app-nav__label { display: none; }
    .app-user__text { display: none; }
    .app-user { padding: 4px; }
}

@media (max-width: 1000px) {
    .app-bar .app-cta.mud-button-root { padding: 7px 14px; }
    .app-bar .app-signin.mud-button-root { padding: 6px 10px; }
    .app-cta__label { display: none; }
    .app-signin__label { display: none; }
    .app-brand__sub { display: none; }

    /* With the label gone the start-icon's trailing margin would push it off centre. */
    .app-bar .app-cta .mud-button-label .mud-button-icon-start,
    .app-bar .app-signin .mud-button-label .mud-button-icon-start {
        margin: 0;
        margin-inline: 0;
    }
}

/* ===========================================================================
   Navigation drawer (staff only)
   =========================================================================== */

.app-drawer.mud-drawer {
    border-inline-end: 1px solid var(--app-line);
    box-shadow: none;
}

.app-drawer .mud-drawer-header {
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--app-line);
}

.app-drawer__head {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-width: 0;
}

.app-drawer__mark {
    height: 34px;
    width: 34px;
    object-fit: contain;
    flex-shrink: 0;
}

.app-drawer__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.app-drawer__name {
    font-size: .95rem;
    font-weight: 800;
    color: var(--app-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-drawer__meta {
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--app-brown);
}

/* Inset, rounded nav rows — the drawer equivalent of the pill nav in the store
   bar, and the reason the menu no longer looks like a plain link list. */
.app-drawer .mud-nav-link {
    border-radius: var(--app-radius-sm);
    margin-inline: 8px;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}

.app-drawer .mud-nav-link .mud-nav-link-text { font-size: .875rem; }

.app-drawer .mud-navmenu > .mud-nav-group > .mud-nav-link {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--app-muted);
}

.app-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
    font-weight: 700;
    background-color: color-mix(in srgb, var(--app-lime) 18%, transparent);
}

/* MudBlazor's own scrollbar is fine, but the drawer reads calmer with a
   hairline one that only shows up while the list is being used. */
.app-drawer.mud-drawer { scrollbar-width: thin; }

/* ===========================================================================
   Full-screen mode — the board views hide the chrome; this is the way back.
   =========================================================================== */

.app-fs-exit.mud-button-root {
    position: fixed;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 1250;
    border-radius: 999px;
    padding: 6px 16px 6px 12px;
    font-weight: 700;
    font-size: .8rem;
    text-transform: none;
    color: #fff;
    background: color-mix(in srgb, var(--app-console) 82%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: var(--app-shadow);
    opacity: .55;
    transition: opacity .15s ease, transform .15s ease;
}

.app-fs-exit.mud-button-root:hover { opacity: 1; transform: translateY(1px); }

/* ===========================================================================
   Responsive — below the tablet breakpoint MobileBottomNav and
   MobileAdminSideDrawer own navigation, so the desktop chrome steps aside.
   The selectors stay specific to .app-bar / .app-drawer: MobileAdminSideDrawer
   is a MudDrawer too, and a blanket .mud-drawer rule would hide it as well.
   =========================================================================== */

@media (max-width: 960px) and (orientation: portrait) {
    .app-bar.mud-appbar,
    .app-drawer.mud-drawer { display: none !important; }

    .mud-main-content {
        padding-top: 8px !important;
        padding-bottom: 76px !important;
    }
}

@media (max-width: 600px) {
    .app-bar.mud-appbar,
    .app-drawer.mud-drawer { display: none !important; }

    .mud-main-content {
        padding-top: 8px !important;
        padding-bottom: 76px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-brand,
    .app-user,
    .app-nav__link,
    .app-bar .app-icon-btn.mud-icon-button,
    .app-bar .app-cta.mud-button-root,
    .app-fs-exit.mud-button-root { transition: none; }

    .app-brand:hover,
    .app-user:hover,
    .app-nav__link:hover,
    .app-bar .app-icon-btn.mud-icon-button:hover,
    .app-bar .app-cta.mud-button-root:hover { transform: none; }
}

/* ===========================================================================
   WhatsApp delivery states — one accent per state of a campaign message.

   Global rather than scoped because the same five states are drawn by two
   separate components: the campaign history list (WhatsAppCampaignHistory) and
   the campaign details dialog (WhatsAppCampaignDetailsDialog). CSS isolation
   would give each its own copy, and the day one copy changed a "delivered"
   would be green on one screen and something else on the other.

   Each class only carries the hue, in --wd-accent; the two components decide
   what to paint with it (a bar segment, a tile border, a legend dot). Paired
   with WhatsAppDeliveryDisplay.AccentClass, which is what emits these names.
   =========================================================================== */

/* Blue, matching WhatsApp's own blue double tick. */
.wd-read { --wd-accent: var(--mud-palette-info); }
.wd-delivered { --wd-accent: var(--mud-palette-success); }
/* Amber, not green: it left Meta but was never confirmed on a device. */
.wd-sent { --wd-accent: var(--mud-palette-warning); }
/* Grey, not green: no receipt at all means nothing is known yet. */
.wd-accepted { --wd-accent: var(--mud-palette-text-secondary); }
.wd-failed { --wd-accent: var(--mud-palette-error); }

/* The cumulative funnel adds two accents the five per-recipient states do not have. */
.wd-funnel-sent { --wd-accent: var(--mud-palette-primary); }
.wd-clicked { --wd-accent: var(--mud-palette-tertiary); }