html, body {
    /* font-family intentionally removed: let MudBlazor theme set it via
       var(--mud-typography-default-family) so our brand FontFamily (Manrope,
       configured in BrandConfiguration.CreateMudTheme) actually propagates
       to navbar/body. Hardcoding 'Helvetica Neue' here overrides the theme. */
    margin: 0;
    padding: 0;
    min-height: 100vh;
    width: 100%;
    height: 100%;
    /* The page itself never scrolls — the content area below the top bar does (see
       .xgg-app-content / .xgg-login-content). Stops the body scrollbar running up behind
       the fixed header, so the content scrollbar lines up with the nav menu's. */
    overflow: hidden;
}

/* Main app: content scrolls in its own region that starts just below the fixed top bar,
   so its scrollbar begins at the header line — matching the nav drawer's scrollbar. */
.mud-main-content.xgg-app-content {
    padding-top: 0 !important;
    margin-top: var(--mud-appbar-height, 64px);
    height: calc(100vh - var(--mud-appbar-height, 64px));
    overflow-y: auto;
    box-sizing: border-box;
}

/* Login / not-authorized screen keeps the body locked, so give it its own full-height
   scroll (the transparent top bar still reserves its space via the default padding-top). */
.mud-main-content.xgg-login-content {
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
}

#app {
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

a {
    color: var(--mud-palette-primary);
}

/* Shared link style — primary MudBlazor color + underline. Use this class on every
   <MudLink> / <a> that represents a navigable link, so colors stay consistent across
   the panel and follow the active theme primary (light/dark/branded). */
.xgg-link,
.xgg-link:link,
.xgg-link:visited,
.xgg-link:active {
    color: var(--mud-palette-primary) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.xgg-link:hover,
.xgg-link:focus {
    color: var(--mud-palette-primary-darken) !important;
    text-decoration: underline !important;
}

/* Quieter text next to a main value. One definition for the whole panel — it used to be
   copied into fifteen page files, mostly with a fixed grey that failed in dark mode. */
.grey-color {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzWk0yNjMuNTc2IDg2LjA1NDdDMjYxLjA0OSA4Ni4wNTQ3IDI1OS43ODUgODcuMzAwNSAyNTkuNzg2IDg5Ljc5MjEgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Custom scripts from here down */

.zamowOnlineLogo {
    position: fixed;
    min-width: 100%;
    padding-top: 20%;
    text-align: center;
    z-index: 1;
    pointer-events: none;
}

.zamowOnlineLogo img {
    max-width: 400px;
}

#waveVideo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    object-fit: cover;
}

@supports (-moz-appearance:none) {
    /* Firefox-specific fix */
    #waveVideo {
        min-width: 100vw;
        min-height: 100vh;
    }
}

.image-dialog.mud-dialog .mud-dialog-content {
    cursor: zoom-in;
}

/* Fullscreen image dialog – all areas black, title/actions hidden */
.fullscreen-image-dialog {
    background-color: black !important;
}
.fullscreen-image-dialog .mud-dialog-title {
    display: none !important;
}
.fullscreen-image-dialog .mud-dialog-actions {
    display: none !important;
}
.fullscreen-image-dialog .mud-dialog-content {
    background-color: black !important;
    padding: 0 !important;
    overflow: hidden !important;
    max-height: none !important;
    flex: 1 !important;
    position: relative !important;
}

.mud-table-head .mud-table-cell .column-header {
    justify-content: flex-start !important;
    gap: 4px !important;
}

.mud-table-head .mud-table-cell .column-header > span,
.mud-table-head .mud-table-cell .column-header .column-header-content {
    width: auto !important;
    max-width: max-content !important;
}

.mud-table-head .mud-table-cell .column-options > *:nth-child(n+2),
.mud-table-head .mud-table-cell .column-options > *:nth-child(n+2) * {
    opacity: 0 !important;
    transition: opacity 0.2s ease-in-out;
}

.mud-table-head .mud-table-cell:hover .column-options *,
.mud-table-head .mud-table-cell:hover .column-options > * {
    opacity: 1 !important;
}

/* UserAvatar component — gray frame around every avatar (image or initials).
   Lives in global css because Blazor scoped css does not pierce into child component
   roots (MudAvatar) without a wrapper element, and a wrapper would break MudAvatarGroup
   overlapping layout. */
.user-avatar {
    border: 3px solid #c4c4c4 !important;
}

/* Slight bump on Size.Small variant (default 24px feels cramped with 2-letter initials
   plus the gray border). Other sizes keep MudBlazor defaults. */
.user-avatar.mud-avatar-small {
    height: 32px !important;
    width: 32px !important;
    font-size: 0.85rem !important;
}

/* MudBlazor v9 zeroed default horizontal padding inside MudExpansionPanel content
   AND header (used to be 24px in v7). Restore so existing panels (InvoiceData on
   OrderDetails, OrderHistoryPanel, StoreCustomerInfoCard) keep their side spacing
   on both the title row (text + expand arrow) and the content body.
   We match Mud's own selector specificity (.mud-expand-panel .mud-expand-panel-*)
   so we don't need !important. */
.mud-expand-panel .mud-expand-panel-header,
.mud-expansion-panel .mud-expansion-panel-header {
    padding-left: 24px;
    padding-right: 24px;
}

.mud-expand-panel .mud-expand-panel-content,
.mud-expansion-panel .mud-expansion-panel-content {
    padding-left: 24px;
    padding-right: 24px;
}

/* MudBlazor v9 changed default MudLink Typo from body1 to inherit and shifted link
   color toward primary (blue, #006bb7); Bootstrap base (via BootstrapBlazor.FontAwesome)
   also sets `a, .btn-link { color: #006bb7 }`. Active breadcrumb items render as <a>
   (.mud-link / .btn-link) and went blue. Scope the dark-text override to breadcrumbs ONLY,
   and EXCLUDE the disabled (current page) item via :not(.mud-disabled) so Mud's own greyed
   styling for the current item is left intact (don't !important over it). */
.app-breadcrumbs .mud-breadcrumb-item:not(.mud-disabled) a {
    color: var(--mud-palette-text-primary) !important;
}

/* MudDataGrid v9 cell rendering doesn't propagate the parent .razor scoped
   attribute down to <td>, so DeliveryZones.razor.css `::deep .zone-name {...}`
   stops matching. Restore the zone-name styling globally.
   v9 also wraps cell value in a <span>, so target both the td (with CellClass)
   and any descendant text node — plus !important to beat Mud's default cell text. */
.zone-name,
td.zone-name,
.zone-name * {
    font-weight: 600 !important;
    font-size: 0.925rem !important;
}

/* MudBlazor v9 MudFileUpload root element became display:block, causing the
   wrapper to fill the column width — XGGButton inside CustomContent gets
   stretched. Force inline-flex so the upload button hugs its content. */
.mud-file-upload {
    display: inline-flex;
}

/* ...except uploads explicitly marked full-width (e.g. the PageEditor gallery
   drag-and-drop zone), which must stretch to fill their parent MudPaper instead
   of shrinking to content. */
.mud-file-upload.full-width {
    display: block;
    width: 100%;
}

/* MudBlazor v9 dropped the v7 default font-weight 500 on MudNavGroup labels —
   navbar group headings ("Sprzedaż", "Magazyn", ...) rendered thinner than before.
   Restore the bold-ish weight. !important so theme-level typography defaults
   don't win the cascade.
   Kept in step with the menu items further down: a heading that opens a section must
   not look lighter than the plain links sitting under it. */
.mud-nav-group > .mud-nav-link > .mud-nav-link-text,
.mud-nav-group > .mud-nav-link .mud-nav-link-text {
    font-weight: 600 !important;
}

@media (max-width: 599.98px) {
    .mud-picker-popover {
        left: 24px !important;
    }
}

/* Loading-skeleton shapes. Use these via Class= on MudSkeleton instead of inline
   Style="border-radius:...". Rectangle skeletons are square by default, so these
   round them to match the control they stand in for. */
.skeleton-rounded {
    border-radius: 4px;
}

.skeleton-rounded-lg {
    border-radius: 12px;
}

.skeleton-chip {
    border-radius: 14px;
}

.skeleton-fill {
    border-radius: 4px;
    flex: 1;
}

/* Holds controls that are drawn only so the browser compiles their code ahead of time (see the note on the
   menu-rules page). They must really be laid out - display:none would skip the work - so they sit off the
   left edge instead, out of sight and out of the tab order. */
.offscreen-warmup {
    position: absolute;
    left: -10000px;
    top: 0;
    width: 300px;
    pointer-events: none;
}

/* Wide red bar under the top bar when the connection has been down for a while. */
.connection-lost-bar {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 1400;
    border-radius: 0;
}

.connection-lost-bar-text {
    font-weight: 600;
}

/* Number of new orders next to the board link in the menu: level with the text and a little away from it, so the
   menu row does not cut it off. */
.unseen-orders-badge {
    margin-left: 10px;
}
/* ==========================================================================
   Panel skin — only what BrandConfiguration.CreateMudTheme() cannot express.

   Never put a raw colour here. Always var(--mud-palette-*), so dark mode and
   the Marston's brand keep working on their own.
   ========================================================================== */

.mud-appbar.xgg-appbar {
    background-color: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    box-shadow: none;
}

.mud-drawer.xgg-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
    box-shadow: none;
}

/* Must not paint itself white, or the cards lose their contrast with the page. */
.mud-paper.xgg-page-surface {
    background-color: transparent;
    box-shadow: none;
    border: none;
}

/* Inset on the container, so links stay width:100% and nested ones line up. */
.mud-navmenu.xgg-nav {
    padding-left: 12px;
    padding-right: 12px;
}

.xgg-nav-brand {
    margin: 16px 0 18px;
    padding: 13px 14px;
    border-radius: 14px;
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
}

.xgg-nav-brand-name {
    display: block;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.xgg-nav-brand-address {
    display: block;
    margin-top: 5px;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

.xgg-nav-section {
    display: block;
    padding: 0 8px;
    margin-bottom: 6px;
    color: var(--mud-palette-text-disabled);
}

.xgg-nav-divider {
    margin: 12px 8px;
    border-color: var(--mud-palette-lines-default);
}

/* The verbose selectors copy the shape of MudBlazor's own. Its rules for the selected
   item beat a plain class, so a shorter selector here loses and the pill never shows. */
.mud-navmenu.xgg-nav .mud-nav-link {
    margin: 2px 0;
    padding: 11px 13px;
    border-radius: 12px;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-drawer-text);
    transition: background-color .15s, color .15s, box-shadow .15s;
}

/* MudBlazor's own tint: translucent, so it works both ways. A fixed grey would
   turn into a white patch in dark mode. */
.mud-navmenu.xgg-nav .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

/* The glow lands on the next menu item, so it must be half-transparent and the pill
   must sit above it — otherwise that one item hovers differently from the rest. */
.mud-navmenu.xgg-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    position: relative;
    z-index: 1;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
    box-shadow: 0 10px 20px -6px rgba(var(--mud-palette-primary-rgb), 0.5);
}

.mud-navmenu.xgg-nav .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled) {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.mud-navmenu.xgg-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root {
    color: var(--mud-palette-primary-text);
}

.mud-navmenu.xgg-nav .mud-nav-link:not(.active) .mud-icon-root {
    color: var(--mud-palette-drawer-icon);
}

.mud-navmenu.xgg-nav .mud-nav-group .mud-collapse-container .mud-nav-link {
    padding-left: 34px;
    font-size: 0.8125rem;
}

/* Papers with no elevation are layout helpers, not cards, so they stay borderless. */
.mud-paper:not(.mud-elevation-0):not(.mud-appbar):not(.mud-drawer):not(.mud-popover) {
    border: 1px solid var(--mud-palette-lines-default);
}

/* Square="true" means the page wanted flush corners on purpose — leave those alone. The Manager screens
   set their own corners (manager-* classes), so they are left out too. */
.mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-paper-square):not(:where(.manager-shell, .manager-shell *, .manager-sheet, .manager-sheet *, .manager-sheet-backdrop, .manager-nav-wrap, .manager-nav-wrap *, .manager-dialog *)) {
    border-radius: 16px;
}

/* Smaller surfaces, less rounding. */
.mud-popover.mud-popover-paper,
.mud-menu-popover .mud-paper,
.mud-list {
    border-radius: 12px;
}

/* Do NOT add a focus ring to a bordered field. Its label sits in a notch in the top border;
   a shadow follows the full rectangle and strikes through the label. MudBlazor's focused
   border respects the notch — let it do the work.
   Nothing else is needed here either: MudBlazor already takes the field's border colour and
   radius from the theme, and button casing and weight from Typography.Button. */

/* MudBlazor puts the subtitle1 style on the box around a field and makes the field inherit
   it, so what the user typed comes out as heavy as a heading. Selector shape copied from
   MudBlazor's own — a plain class loses. */
.mud-input > input.mud-input-root,
.mud-input > textarea.mud-input-root,
div.mud-input-slot.mud-input-root {
    font-weight: 400;
}

/* --- Alerts on a dark page. ---

   An alert without an explicit Variant writes its text in the severity's Darken shade on a barely
   tinted strip. On a dark page that is dark-on-dark: the info alert measured 1.88:1 where 4.5 is
   the minimum. Darken cannot simply be lightened in the palette, because MudBlazor also paints
   filled-button hover with it — so the swap happens here, for alerts only, and only in dark mode. */
.xgg-dark .mud-alert-text-info {
    color: var(--mud-palette-info-lighten);
}

.xgg-dark .mud-alert-text-success {
    color: var(--mud-palette-success-lighten);
}

.xgg-dark .mud-alert-text-warning {
    color: var(--mud-palette-warning-lighten);
}

.xgg-dark .mud-alert-text-error {
    color: var(--mud-palette-error-lighten);
}

.mud-table-root .mud-table-cell {
    border-bottom-color: var(--mud-palette-table-lines);
}

.mud-table-head .mud-table-cell {
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}
/* ===================== ZAMOW.online Manager - MudBlazor parts =====================
   The Manager screens are built from MudBlazor parts, but their whole look comes from the manager-* classes
   below. These rules switch off MudBlazor's own look inside the Manager screens (capital letters on buttons,
   fixed text sizes, rounded paper, chip margins), so only the manager-* classes decide how things look.
   :where() keeps these rules weak, so any manager-* class always wins over them. */
:where(.manager-shell, .manager-sheet, .manager-nav-wrap, .manager-dialog) .mud-typography:not(:where(.mud-input-control *)) {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
}

:where(.manager-shell, .manager-sheet, .manager-nav-wrap, .manager-dialog) .mud-paper:not(:where(.mud-input-control *)),
.mud-paper:where(.manager-shell, .manager-sheet-backdrop, .manager-sheet, .manager-nav-wrap) {
    color: inherit;
    background-color: transparent;
    border-radius: 0;
    transition: none;
}

:where(.manager-shell, .manager-sheet, .manager-nav-wrap, .manager-dialog) .mud-button-root {
    min-width: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: none;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    transition: none;
}

/* the inner wrapper of a button steps aside, so the button lays out its content itself */
:where(.manager-shell, .manager-sheet, .manager-nav-wrap, .manager-dialog) .mud-button-label,
:where(.manager-shell, .manager-sheet, .manager-nav-wrap, .manager-dialog) .mud-icon-button-label,
:where(.manager-shell, .manager-sheet, .manager-nav-wrap, .manager-dialog) .mud-chip-content {
    display: contents;
}

/* a disabled MudButton is greyed out with !important; ours keep their own colour and only fade
   (see the :disabled rules of each button below) */
:where(.manager-shell, .manager-sheet, .manager-nav-wrap, .manager-dialog) .mud-disabled .mud-icon-root {
    color: inherit;
}

.manager-btn.is-soft:disabled{
    color: var(--mud-palette-text-primary) !important;
}

.manager-btn.is-primary:disabled{
    color: var(--mud-palette-primary-text) !important;
}

.manager-btn.is-danger:disabled {
    color: var(--mud-palette-error) !important;
}

:where(.manager-shell, .manager-sheet, .manager-nav-wrap, .manager-dialog) .mud-chip {
    height: auto;
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    background-color: transparent;
    border-radius: 0;
    transition: none;
}

/* ===================== ZAMOW.online Manager =====================
   Global on purpose: the screens mix plain elements with MudBlazor components, and scoped CSS
   does not reach components rendered straight into a layout. Colours come from the theme
   variables, so light and dark mode both work. */
.manager-shell {
    /* html/body do not scroll (see top of this file), so the shell is the scroll area.
       dvh follows the phone browser bars; vh is the fallback for older engines. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px calc(112px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    background: var(--mud-palette-background-gray);
}

.manager-content {
    max-width: 560px;
    margin: 0 auto;
}

/* ---- bottom navigation: a floating rounded bar that does not touch the screen edges ---- */
.manager-nav-wrap {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 1600;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .14), 0 1px 3px rgba(15, 23, 42, .06);
}

.manager-nav-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    cursor: pointer;
    transition: flex-grow .2s ease, background-color .2s ease;
}

/* only the current screen shows its name, the rest stay as icons */
.manager-nav-item.active {
    flex-grow: 1.9;
    background: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--mud-palette-primary);
}

.manager-nav-label {
    display: none;
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manager-nav-item.active .manager-nav-label {
    display: inline;
}

/* ---- "More" sheet ---- */
.manager-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1450;
    background: rgba(15, 23, 42, .45);
}

.manager-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    max-width: 600px;
    max-height: 88vh;
    margin: 0 auto;
    overflow-y: auto;
    padding: 8px 16px calc(108px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    background: var(--mud-palette-surface);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .25);
}

.manager-sheet-grip {
    width: 40px;
    height: 4px;
    margin: 4px auto 12px;
    border-radius: 2px;
    background: var(--mud-palette-lines-default);
}

.manager-sheet-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.manager-sheet-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.manager-sheet-title {
    flex: 1 1 auto;
    font-size: 20px;
    font-weight: 800;
}

.manager-sheet-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}

.manager-sheet-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-height: 104px;
    padding: 14px;
    border: 0;
    border-radius: 18px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.manager-sheet-tile-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.manager-sheet-tile-label {
    font-size: 14px;
    font-weight: 800;
}

.manager-sheet-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.manager-sheet-link:last-child {
    border-bottom: 0;
}

.manager-sheet-link-label {
    flex: 1 1 auto;
    min-width: 0;
}

.manager-sheet-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 2px;
}

.manager-sheet-chevron,
.manager-sheet-mode-icon {
    color: var(--mud-palette-text-secondary);
}

/* ---- page header ---- */
.manager-page-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 4px 0 16px;
}

.manager-page-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manager-page-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.manager-page-note {
    margin: -8px 0 14px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.manager-back,
.manager-icon-btn {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .06);
}

.manager-icon-btn {
    background: var(--mud-palette-background-gray);
    box-shadow: none;
}

.manager-icon-btn.is-primary {
    background: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--mud-palette-primary);
}

.manager-icon-btn.is-filled {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    box-shadow: 0 6px 16px rgba(var(--mud-palette-primary-rgb), .35);
}

/* ---- cards and tiles ---- */
.manager-card{
    min-width: 0;
    background: var(--mud-palette-surface);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}

.manager-card {
    padding: 16px;
    margin-bottom: 14px;
}

.manager-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.manager-card-title {
    font-size: 16px;
    font-weight: 800;
}

.manager-label {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.manager-tone-success {
    color: var(--mud-palette-success);
}

.manager-tone-error {
    color: var(--mud-palette-error);
}

/* ---- dashboard: today's sales ---- */
.manager-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
    padding: 20px 18px 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
    color: var(--mud-palette-primary-text);
    box-shadow: 0 12px 30px rgba(var(--mud-palette-primary-rgb), .35);
}

/* a soft circle in the corner, only for looks */
.manager-hero::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    pointer-events: none;
}

.manager-hero-label {
    position: relative;
    font-size: 13px;
    opacity: .85;
}

.manager-hero-value {
    position: relative;
    margin-top: 6px;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

/* ---- bar chart ---- */
.manager-bars {
    display: flex;
    align-items: stretch;
    gap: 8px;
    height: 130px;
}

.manager-bars.is-dense {
    gap: 3px;
}

.manager-bar-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.manager-bar-track {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
}

.manager-bar {
    width: 100%;
    border-radius: 10px;
    background: rgba(var(--mud-palette-primary-rgb), .16);
    transition: height .3s ease;
}

.manager-bars.is-dense .manager-bar {
    border-radius: 4px;
}

.manager-bar.is-today {
    background: var(--mud-palette-primary);
    box-shadow: 0 6px 14px rgba(var(--mud-palette-primary-rgb), .35);
}

/* the best day of the range */
.manager-bar.is-best {
    background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
}

.manager-bar-label {
    height: 14px;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    overflow: visible;
    white-space: nowrap;
}

.manager-bar-label.is-today {
    color: var(--mud-palette-primary);
    font-weight: 800;
}

.manager-bar-label.is-best {
    color: #7c3aed;
    font-weight: 800;
}

/* ---- lists ---- */
.manager-list > .manager-row + .manager-row {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.manager-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 0;
}

.manager-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.manager-row-title {
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manager-row-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manager-row-side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    max-width: 50%;
}

.manager-row-date {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.manager-row-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

.manager-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
}

.manager-avatar-muted {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.manager-empty {
    padding: 20px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.manager-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
}

.manager-empty-card .manager-empty {
    padding: 12px 8px 16px;
}

.manager-empty-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
}

/* ---- pills ---- */
.manager-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manager-pill-primary {
    background: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--mud-palette-primary);
}

.manager-pill-muted {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.manager-pill-success {
    background: rgba(var(--mud-palette-success-rgb), .14);
    color: var(--mud-palette-success);
}

/* five colour pairs; the same name always lands on the same pair */
.manager-tone-bg-0 {
    background: rgba(59, 130, 246, .14);
    color: #2563eb;
}

.manager-tone-bg-1 {
    background: rgba(34, 197, 94, .16);
    color: #15803d;
}

.manager-tone-bg-2 {
    background: rgba(245, 158, 11, .18);
    color: #b45309;
}

.manager-tone-bg-3 {
    background: rgba(139, 92, 246, .16);
    color: #7c3aed;
}

.manager-tone-bg-4 {
    background: rgba(236, 72, 153, .14);
    color: #be185d;
}

.manager-dot-0 {
    background: #3b82f6;
}

.manager-dot-1 {
    background: #22c55e;
}

.manager-dot-2 {
    background: #f59e0b;
}

.manager-dot-3 {
    background: #8b5cf6;
}

.manager-dot-4 {
    background: #ef4444;
}

/* ---- search, tabs and filter chips ---- */
.manager-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    margin-bottom: 14px;
    padding: 0 14px;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}

.manager-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: 14px;
}

/* the search box holds a MudTextField; its own frame and spacing are removed so the box looks as before */
.manager-search .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.manager-search .mud-input-control-input-container,
.manager-search .mud-input {
    width: 100%;
}

.manager-search .mud-input {
    color: inherit;
    font-family: inherit;
}

.manager-search .mud-input > input.mud-input-root {
    height: 48px;
    padding: 0;
    color: var(--mud-palette-text-primary);
    font-size: 14px;
}

.manager-segment {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}

.manager-segment-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.manager-segment-item.active,
.manager-chip.active {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    box-shadow: 0 6px 16px rgba(var(--mud-palette-primary-rgb), .3);
}

.manager-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.manager-chip {
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.manager-meter{
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
}

.manager-meter > span{
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--mud-palette-primary);
}

/* ---- orders: today at a glance ---- */
.manager-icon-btn.is-surface {
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .06);
}

.manager-icon-btn.is-surface.is-active {
    background: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--mud-palette-primary);
}

/* drawn in the page colours, so it is light in the light theme and dark in the dark one */
.manager-summary {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 22px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}

.manager-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.manager-summary-main {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    margin-bottom: 12px;
}

.manager-summary-cell {
    min-width: 0;
}

.manager-summary-cell + .manager-summary-cell {
    padding-left: 14px;
    border-left: 1px solid var(--mud-palette-lines-default);
}

/* an amount never breaks inside; on a narrow phone the figure gets a little smaller instead */
.manager-summary-value {
    margin-top: 2px;
    font-size: clamp(20px, 7vw, 28px);
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

/* the statistics cards start with the amount, which needs the wider column */
.manager-summary-main.is-amount-first {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.manager-back.is-on-primary {
    background: rgba(255, 255, 255, .18);
    color: var(--mud-palette-primary-text);
    box-shadow: none;
}

.manager-row-sub.is-wrap {
    white-space: normal;
}

.manager-row-title.is-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ---- statistics ---- */
.manager-head-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(var(--mud-palette-primary-rgb), .3);
}

.manager-date-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px 10px 16px;
}

.manager-date-label {
    min-width: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.manager-segment.is-compact {
    flex: 0 0 auto;
    margin: 0;
    padding: 3px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
    box-shadow: none;
}

.manager-segment.is-compact .manager-segment-item {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
}

/* the change chip sits in an uppercase line but reads better in normal letters */
.manager-summary-head .manager-pill {
    letter-spacing: 0;
    text-transform: none;
}

.manager-pill-error {
    background: rgba(var(--mud-palette-error-rgb), .12);
    color: var(--mud-palette-error);
}

/* one grid for the whole table, so the columns line up from the header down */
.manager-compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    column-gap: 12px;
    font-size: 13px;
}

.manager-compare-row {
    display: contents;
}

.manager-compare-row > * {
    padding: 10px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    text-align: right;
    white-space: nowrap;
}

/* the label column gives way first, the numbers always stay whole */
.manager-compare-row > :first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.manager-compare-row.is-head > * {
    align-self: end;
    padding-top: 0;
    border-top: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.manager-compare-row.is-head .is-current {
    color: var(--mud-palette-primary);
}

.manager-compare-row .is-muted {
    color: var(--mud-palette-text-secondary);
}

.manager-compare-note {
    margin-top: 6px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.manager-product-row {
    padding: 8px 0;
}

.manager-product-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 14px;
}

.manager-product-name {
    min-width: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manager-product-qty {
    flex: 0 0 auto;
    font-weight: 800;
}

/* ---- buttons in the Manager look ---- */
.manager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.manager-btn.is-primary {
    flex: 1 1 auto;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    box-shadow: 0 8px 18px rgba(var(--mud-palette-primary-rgb), .3);
}

.manager-btn.is-soft {
    flex: 0 0 auto;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .1);
}

.manager-btn:disabled {
    opacity: .6;
    cursor: default;
}

.manager-btn-spinner {
    width: 18px !important;
    height: 18px !important;
    color: inherit;
}

/* ---- sales report dialog ---- */
/* The dialog sits above the floating bottom bar and never runs under it: the space the bar needs is
   kept free, and anything taller than the screen scrolls inside the dialog instead of growing. */
.manager-dialog {
    border-radius: 24px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
    z-index: 1700;
    max-height: calc(100dvh - 120px - env(safe-area-inset-bottom));
    margin-bottom: calc(96px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
}

.manager-dialog .mud-dialog-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.manager-dialog .mud-dialog-title,
.manager-dialog .mud-dialog-actions {
    flex: 0 0 auto;
}

.manager-dialog-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.manager-dialog-heading {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}

.manager-dialog-label {
    margin: 4px 0 8px;
}

.manager-dialog-actions {
    display: flex;
    gap: 10px;
    width: 100%;
    padding: 4px 8px 8px;
}

/* ---- contacts ---- */
.manager-head-btn.is-soft {
    background: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--mud-palette-primary);
    box-shadow: none;
}

.manager-section-label {
    margin: 18px 4px 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* the ZAMOW.online help desk card at the top, in the brand colour */
.manager-support-card {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
    color: var(--mud-palette-primary-text);
    box-shadow: 0 12px 30px rgba(var(--mud-palette-primary-rgb), .35);
}

.manager-support-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.manager-support-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, .2);
    font-size: 18px;
    font-weight: 800;
}

.manager-support-name {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
}

.manager-support-sub {
    margin-top: 2px;
    font-size: 12px;
    opacity: .85;
}

.manager-support-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin-top: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
    color: inherit;
    text-decoration: none;
}

.manager-support-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .18);
}

.manager-support-value {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manager-support-action {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    opacity: .85;
}

.manager-support-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    color: inherit;
    opacity: .9;
    text-decoration: none;
}

/* the phone app's colour, as a light tint behind letters in a deeper shade; the first lines are for older WebViews */
.manager-avatar.is-letter {
    background: var(--mud-palette-background-gray);
    color: var(--avatar-colour, var(--mud-palette-text-secondary));
    background: color-mix(in srgb, var(--avatar-colour, #94a3b8) 18%, transparent);
    color: color-mix(in srgb, var(--avatar-colour, #94a3b8) 75%, var(--mud-palette-text-primary));
}

.manager-btn.is-danger {
    flex: 0 0 auto;
    background: rgba(var(--mud-palette-error-rgb), .12);
    color: var(--mud-palette-error);
}

.manager-btn.is-small {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px;
}

.manager-btn-full {
    width: 100%;
}

.manager-chips.is-tight {
    gap: 6px;
    margin-bottom: 0;
}

.manager-chips.is-tight .manager-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 0 12px;
    background: var(--mud-palette-background-gray);
    box-shadow: none;
}

.manager-chips.is-tight .manager-chip.active {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.manager-chips.is-tight .manager-chip.is-add {
    background: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--mud-palette-primary);
}

.manager-inline-add,
.manager-category-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.manager-grow {
    flex: 1 1 auto;
    min-width: 0;
}

/* description and number share a line when both fit, otherwise the number moves down;
   the dot before a part that starts a new line falls outside the box and is cut off */
.manager-inline-parts {
    overflow: hidden;
    margin-top: 2px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.manager-inline-parts-inner {
    display: flex;
    flex-wrap: wrap;
    margin-left: -14px;
}

.manager-inline-parts-inner > span {
    position: relative;
    min-width: 0;
    padding-left: 14px;
    overflow-wrap: break-word;
}

.manager-inline-parts-inner > span::before {
    content: "·";
    position: absolute;
    left: 4px;
}

.manager-inline-parts-inner > span.is-nowrap {
    white-space: nowrap;
}

.manager-alert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.manager-alert-actions .manager-btn {
    flex: 1 1 140px;
}

/* ---- start screen ---- */
.manager-hero-brand {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

.manager-hero-brand-name {
    font-size: 17px;
    font-weight: 800;
}

.manager-hero-brand-sub {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    opacity: .75;
}

/* the picked restaurant, with the way to change it */
.manager-place,
.manager-sales {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .14);
}

.manager-sales {
    margin-top: 10px;
}

.manager-place-name {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.manager-place-sub {
    margin-top: 2px;
    font-size: 12px;
    opacity: .85;
}

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

.manager-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px;
    border: 0;
    border-radius: 20px;
    background: var(--mud-palette-surface);
    box-shadow: 0 6px 20px rgba(15, 23, 42, .06);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.manager-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    border-radius: 12px;
}

.manager-feature-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
}

.manager-feature-sub {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

/* how many things wait on that screen */
.manager-feature-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    line-height: 22px;
    text-align: center;
}

.manager-feature-badge.is-error {
    background: var(--mud-palette-error);
    color: #fff;
}

.manager-feature-badge.is-primary {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* ---- cases ---- */
.manager-task-create {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin-bottom: 8px;
    border: 0;
    border-radius: 20px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    box-shadow: 0 10px 24px rgba(var(--mud-palette-primary-rgb), .32);
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.manager-task-create-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .22);
}

.manager-task-row {
    width: 100%;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.manager-task-files .manager-btn-full {
    margin-top: 4px;
}

/* sizes and avatar colours as classes, picked in ManagerUi, so the screens need no inline style */
.manager-w-0 {
    width: 0%;
}

.manager-w-5 {
    width: 5%;
}

.manager-w-10 {
    width: 10%;
}

.manager-w-15 {
    width: 15%;
}

.manager-w-20 {
    width: 20%;
}

.manager-w-25 {
    width: 25%;
}

.manager-w-30 {
    width: 30%;
}

.manager-w-35 {
    width: 35%;
}

.manager-w-40 {
    width: 40%;
}

.manager-w-45 {
    width: 45%;
}

.manager-w-50 {
    width: 50%;
}

.manager-w-55 {
    width: 55%;
}

.manager-w-60 {
    width: 60%;
}

.manager-w-65 {
    width: 65%;
}

.manager-w-70 {
    width: 70%;
}

.manager-w-75 {
    width: 75%;
}

.manager-w-80 {
    width: 80%;
}

.manager-w-85 {
    width: 85%;
}

.manager-w-90 {
    width: 90%;
}

.manager-w-95 {
    width: 95%;
}

.manager-w-100 {
    width: 100%;
}

.manager-h-0 {
    height: 0%;
}

.manager-h-5 {
    height: 5%;
}

.manager-h-10 {
    height: 10%;
}

.manager-h-15 {
    height: 15%;
}

.manager-h-20 {
    height: 20%;
}

.manager-h-25 {
    height: 25%;
}

.manager-h-30 {
    height: 30%;
}

.manager-h-35 {
    height: 35%;
}

.manager-h-40 {
    height: 40%;
}

.manager-h-45 {
    height: 45%;
}

.manager-h-50 {
    height: 50%;
}

.manager-h-55 {
    height: 55%;
}

.manager-h-60 {
    height: 60%;
}

.manager-h-65 {
    height: 65%;
}

.manager-h-70 {
    height: 70%;
}

.manager-h-75 {
    height: 75%;
}

.manager-h-80 {
    height: 80%;
}

.manager-h-85 {
    height: 85%;
}

.manager-h-90 {
    height: 90%;
}

.manager-h-95 {
    height: 95%;
}

.manager-h-100 {
    height: 100%;
}

.manager-letter-0 {
    --avatar-colour: #00D0EA;
}

.manager-letter-1 {
    --avatar-colour: #0075F0;
}

.manager-letter-2 {
    --avatar-colour: #7C4DFF;
}

.manager-letter-3 {
    --avatar-colour: #BC56FF;
}

.manager-letter-4 {
    --avatar-colour: #FF54BB;
}

.manager-letter-5 {
    --avatar-colour: #FF5B55;
}

.manager-letter-6 {
    --avatar-colour: #FF891D;
}

.manager-letter-7 {
    --avatar-colour: #FFC600;
}

.manager-letter-8 {
    --avatar-colour: #26BC6D;
}

/* --- The card shown while a sign-in finishes. ---

   It takes the place of the login box, so it fades in rather than appearing the instant the
   password is accepted - a card that swaps its contents with no transition reads as a glitch. */
.xgg-login-transition {
    animation: xgg-login-transition-in 250ms ease-in;
}

@keyframes xgg-login-transition-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Same box the login logo sits in, so swapping one card for the other does not move it.
   Global rather than scoped: the login page's own stylesheet does not reach into this card. */
.xgg-login-transition-logo {
    width: 220px;
    max-width: 100%;
    height: 120px;
}

.xgg-login-transition-bar {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .xgg-login-transition {
        animation: none;
    }
}