/* =====================================================================================================================
   AdvEntPOS Web Office: the shell and the shared page parts, on top of MudBlazor.
   The look: white surfaces on a near-white ground, ink text, one grey for secondary text, hairline borders, flat at rest.
   Brand navy #022C78 only for the top bar and the mark; AdvEntPOS blue #0D47A1 only for actions, links, focus and
   selection; status colours only for status, always with words. System sans, 14px controls, 13px tables.
   Desktop first: the full layout is designed for 1280 px and wider and folds down at 1279, 959 and 599 px.
   Inside the app, colours come from MudBlazor's palette variables (Theme\OfficeTheme.cs) so the dark theme follows;
   the sign-in pages are static (no theme provider) and use the --pwo-* tokens below.
   ===================================================================================================================== */
:root {
    --pwo-navy: #022C78;
    --pwo-blue: #0D47A1;
    --pwo-blue-hover: #0A3A85;
    --pwo-on-blue: #FFFFFF;
    --pwo-mark: #022C78;
    --pwo-canvas: #F6F7F9;
    --pwo-surface: #FFFFFF;
    --pwo-ink: #101828;
    --pwo-ink-2: #5B6472;
    --pwo-rule: #E4E7EC;
    --pwo-input: #C3C9D2;
    --pwo-selected: rgba(13, 71, 161, .08);
    --pwo-bad: #B42318;
    --pwo-bad-tint: #FEF3F2;
    --pwo-radius: 8px;
    --pwo-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --pwo-blue: #6E9BF0;
        --pwo-blue-hover: #8DB1F4;
        --pwo-on-blue: #0B1220;
        --pwo-mark: #E6EAF0;
        --pwo-canvas: #0B1220;
        --pwo-surface: #121A29;
        --pwo-ink: #E6EAF0;
        --pwo-ink-2: #9AA4B2;
        --pwo-rule: #243044;
        --pwo-input: #3A4760;
        --pwo-selected: rgba(110, 155, 240, .14);
        --pwo-bad: #F97066;
        --pwo-bad-tint: #2A1618;
    }
}

html, body { height: 100%; }
body { margin: 0; background: var(--mud-palette-background, var(--pwo-canvas)); color: var(--mud-palette-text-primary, var(--pwo-ink)); }
::selection { background: rgba(var(--mud-palette-primary-rgb, 13, 71, 161), .2); }
input, textarea { caret-color: var(--mud-palette-primary, var(--pwo-blue)); }
a { text-underline-offset: 2px; }
/* Flat at rest: buttons carry no shadow (menus, popovers and dialogs keep MudBlazor's elevation). */
.mud-button-filled, .mud-button-filled:hover, .mud-button-filled:active, .mud-button-filled:focus-visible { box-shadow: none; }
/* Text buttons get a light border in their own colour so they read as buttons, not as plain text
   (padding as MudBlazor's outlined buttons, less the border, so they keep their size). */
.mud-button-root.mud-button-text { border: 1px solid color-mix(in srgb, currentColor 35%, transparent); padding: 5px 11px; }
.mud-button-root.mud-button-text-size-small { padding: 3px 8px; }
.mud-button-root.mud-button-text-size-large { padding: 7px 14px; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--mud-palette-primary, var(--pwo-blue)); outline-offset: 2px; }
/* The page heading takes focus after each navigation (for screen readers); it is not a control, so no ring. */
h1:focus, h1:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------------------------- start-up splash */
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--pwo-canvas); z-index: 2000; }
.boot-mark { display: block; color: var(--pwo-mark); animation: boot-fade 1.2s ease-in-out infinite alternate; }
@keyframes boot-fade { to { opacity: .4; } }
/* The splash goes as soon as the interactive page has drawn its layout. */
body:has(.mud-layout) .boot { display: none; }

/* ------------------------------------------------------------------------------------------------------- top bar */
/* Solid navy from the theme (AppbarBackground); start and end share the room so the quick find sits in the middle. */
.pwo-appbar .mud-toolbar { gap: 16px; }
.pwo-appbar :focus-visible { outline-color: var(--mud-palette-appbar-text); }
.pwo-appbar-start, .pwo-appbar-end { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 4px; }
.pwo-appbar-end { justify-content: flex-end; gap: 12px; }

.pwo-brand {
    display: flex; align-items: center; gap: 10px; min-width: 0; height: 40px; padding: 0 8px; border-radius: 8px;
    color: inherit; text-decoration: none; white-space: nowrap;
}
.pwo-brand-mark { flex: none; }
.pwo-brand-text { font-size: 15px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; }
.pwo-brand-text b { font-weight: 700; }

.pwo-quickfind { position: relative; flex: 0 1 560px; min-width: 0; }
.pwo-quickfind .mud-input-control { margin: 0; }
.pwo-quickfind .mud-input.mud-input-outlined { background: var(--mud-palette-surface); border-radius: 8px; }
.pwo-quickfind .mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--mud-palette-lines-default); }
.pwo-quickfind .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--mud-palette-primary); }
/* 36 px tall on the 56 px bar (MudBlazor's dense outlined field is 40 px). */
.pwo-quickfind .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 9.5px; padding-bottom: 9.5px; color: var(--mud-palette-text-primary);
}
.pwo-quickfind input::placeholder { color: var(--mud-palette-text-secondary); opacity: 1; }
.pwo-quickfind .mud-input-adornment-icon { color: var(--mud-palette-text-secondary); }
.pwo-quickfind-key {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none;
    padding: 2px 6px; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px;
    background: var(--mud-palette-background); color: var(--mud-palette-text-secondary);
    font: 600 12px/16px var(--pwo-font);
}
/* The hint makes way for the typing and for the clear button. */
.pwo-quickfind:focus-within .pwo-quickfind-key,
.pwo-quickfind:has(input:not(:placeholder-shown)) .pwo-quickfind-key { display: none; }
.pwo-quickfind-item { display: flex; flex-direction: column; line-height: 1.35; }
.pwo-quickfind-item small { font-size: 12px; color: var(--mud-palette-text-secondary); }

.pwo-find-toggle { display: none; }

.pwo-chip {
    display: inline-flex; align-items: center; gap: 8px; max-width: 280px; height: 36px; padding: 0 8px 0 10px;
    border-radius: 8px; border: 1px solid rgba(255, 255, 255, .24); background: transparent;
    color: inherit; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.pwo-chip:hover { background: rgba(255, 255, 255, .08); }
.pwo-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwo-kind {
    font-size: 11px; font-weight: 600; line-height: 16px; padding: 1px 6px; border-radius: 4px;
    background: rgba(255, 255, 255, .16); color: inherit; white-space: nowrap;
}
.pwo-avatar {
    width: 32px; height: 32px; flex: none; border-radius: 50%; border: 0; padding: 0;
    background: var(--mud-palette-appbar-text); color: var(--mud-palette-appbar-background);
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.pwo-menu-head { padding: 12px 16px 10px; min-width: 240px; }
.pwo-menu-head .mud-typography { display: block; }
.pwo-menu-form { margin: 0; width: 100%; align-self: stretch; }
.pwo-menu-button {
    display: flex; align-items: center; justify-content: flex-start; align-self: stretch; gap: 12px; width: 100%;
    padding: 8px 16px; border: 0; background: none;
    font: inherit; font-size: 14px; color: inherit; cursor: pointer; text-align: left;
}
.pwo-menu-button:hover { background: var(--mud-palette-action-default-hover); }
.pwo-menu-button:focus-visible { outline-offset: -2px; }

/* -------------------------------------------------------------------------------------------------------- drawer */
.pwo-drawer.mud-drawer { border-right: 1px solid var(--mud-palette-lines-default); }
.pwo-drawer .mud-drawer-content { scrollbar-gutter: stable; scrollbar-width: thin; }
.pwo-nav .mud-nav-link-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwo-nav { padding: 12px 6px 24px; }
.pwo-nav .mud-nav-link {
    min-height: 36px; padding: 6px 12px; border-radius: 8px;
    font-size: 14px; font-weight: 500; line-height: 20px; color: var(--mud-palette-text-primary);
}
.pwo-nav .mud-nav-link .mud-nav-link-icon { font-size: 20px; color: var(--mud-palette-drawer-icon); }
/* An open group is not a selection: its arrow stays grey. */
.pwo-nav .mud-nav-link .mud-nav-link-expand-icon,
.pwo-nav .mud-nav-link .mud-nav-link-expand-icon.mud-transform { fill: var(--mud-palette-drawer-icon); }
.pwo-nav .mud-nav-link:hover:not(.mud-nav-link-disabled) { background: var(--mud-palette-table-hover); }
.pwo-nav .mud-nav-link:focus-visible { outline-offset: -2px; }
/* A group's screens line up with the group's name, a little denser and lighter than it. */
.pwo-nav .mud-nav-group .mud-nav-item .mud-nav-link { min-height: 32px; padding-top: 6px; padding-bottom: 6px; padding-inline-start: 32px; font-weight: 400; }
.pwo-nav .mud-nav-link.active:not(.mud-nav-link-disabled),
.pwo-nav .mud-nav-link.active:not(.mud-nav-link-disabled):hover {
    color: var(--mud-palette-primary); background: rgba(var(--mud-palette-primary-rgb), .08); font-weight: 600; border: 0;
}
.pwo-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { color: var(--mud-palette-primary); }
.pwo-nav .mud-nav-link-disabled { color: var(--mud-palette-text-secondary); }
/* Debug builds only: areas and screens still in development (OfficeMenu.IsDebugOnly) are red; the open page keeps its
   selection colour. Only the marked item's own link: a released screen in a red group stays in normal text. */
.pwo-nav .pwo-nav-debug > .mud-nav-link,
.pwo-nav .pwo-nav-debug > .mud-nav-link .mud-nav-link-icon { color: var(--mud-palette-error); }
.pwo-nav .pwo-nav-debug > .mud-nav-link .mud-nav-link-expand-icon { fill: var(--mud-palette-error); }
.pwo-nav-soon { display: inline-flex; align-items: center; gap: 8px; }
.pwo-soon {
    font-size: 11px; font-weight: 600; line-height: 16px; padding: 0 6px; border-radius: 4px;
    background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary);
}

/* ----------------------------------------------------------------------------------------------------------- page */
.pwo-main { min-height: 100vh; }
.pwo-page { max-width: 1600px; margin: 0 auto; padding: 24px 32px 48px; }
.pwo-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.pwo-pagehead-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pwo-title {
    margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em;
    color: var(--mud-palette-text-primary); text-wrap: balance;
}
.pwo-lede { margin: 4px 0 0; max-width: 72ch; font-size: 14px; line-height: 1.5; color: var(--mud-palette-text-secondary); }
/* The way back to the list a detail page belongs to: navigation, so it is a link, not a label. */
.pwo-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 8px; font-size: 13px; font-weight: 600;
    color: var(--mud-palette-text-secondary); text-decoration: none; }
.pwo-back:hover { color: var(--mud-palette-primary); text-decoration: underline; text-underline-offset: 3px; }
.pwo-section-title { margin: 24px 0 8px; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--mud-palette-text-primary); }
.pwo-section-title:first-child { margin-top: 0; }

.pwo-card {
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: var(--pwo-radius);
}

.pwo-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 48px 16px; color: var(--mud-palette-text-primary);
}

/* Link blocks of the web shop and DoorDash pages (the dashboard has its own): flat bordered entries, the title is the link. */
.pwo-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pwo-tile { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: var(--pwo-radius); padding: 16px; }
.pwo-tile-head { display: flex; align-items: flex-start; gap: 12px; }
.pwo-tile-head > div { flex: 1; min-width: 0; }
.pwo-tile-icon { display: flex; flex: none; color: var(--mud-palette-text-secondary); }
.pwo-tile-title { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 600; }
.pwo-tile-title a, a.pwo-tile-title { color: var(--mud-palette-primary); text-decoration: none; }
.pwo-tile-title a:hover, a.pwo-tile-title:hover { text-decoration: underline; }
.pwo-tile-blurb { margin: 2px 0 0; font-size: 13px; color: var(--mud-palette-text-secondary); }

/* ----------------------------------------------------------------------------------------- lists and entry forms */
.pwo-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
.pwo-toolbar .pwo-search { flex: 0 1 280px; width: 280px; max-width: 100%; }
.pwo-toolbar > .mud-select, .pwo-toolbar > .mud-picker { flex: 0 0 auto; }
.pwo-toolbar-spacer { flex: 1; }

/* The table fills its card, so row lines and hover reach across it (MudDataGrid sizes it to its columns). */
.pwo-grid .mud-table-root { min-width: 100%; }
.pwo-grid .mud-table-cell { font-size: 13px; font-variant-numeric: tabular-nums; }
/* Dense columns: MudBlazor's 16 + 24 px of padding per column would push a wide list past the page. */
.pwo-grid .mud-table-row > .mud-table-cell { padding-inline: 8px; }
.pwo-grid .mud-table-row > .mud-table-cell:first-child { padding-left: 16px; }
.pwo-grid .mud-table-row > .mud-table-cell:last-child { padding-right: 16px; }
.pwo-grid .mud-table-head .mud-table-cell {
    position: sticky; top: 0; z-index: 1; height: 36px; padding-top: 6px; padding-bottom: 6px;
    background: var(--mud-palette-background); color: var(--mud-palette-text-secondary); font-weight: 600; line-height: 20px;
}
.pwo-grid .mud-table-body .mud-table-cell { height: 40px; padding-top: 4px; padding-bottom: 4px; }
/* Codes, numbers and headings stay on one line; names and other text wrap so a wide list still fits the page. */
.pwo-grid .mud-table-head .mud-table-cell, .pwo-grid .pwo-num, .pwo-grid .mud-table-cell.pwo-nowrap { white-space: nowrap; }
.pwo-grid .mud-table-row { cursor: pointer; }
.pwo-num { text-align: right; font-variant-numeric: tabular-nums; }
/* A figure column's heading sits over its figures: the sort and menu icons go to its left. */
.pwo-grid th.pwo-num .column-header { flex-direction: row-reverse; justify-content: flex-start; }

.pwo-formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 24px; }
.pwo-formgrid .pwo-span-all { grid-column: 1 / -1; }
/* A name and its localized name share the first row, splitting it by how many columns fit (260px each, 24px gaps). */
.pwo-formgrid { container-type: inline-size; }
@container (min-width: 828px) { .pwo-formgrid .pwo-name { grid-column: span 2; } }
@container (min-width: 1112px) { .pwo-formgrid .pwo-name-pair { grid-column: span 2; } }

.pwo-dialog-body { max-height: min(72vh, 760px); overflow-y: auto; padding-top: 4px; }

/* =====================================================================================================================
   Sign-in pages (static): on wide screens a navy brand panel beside the form; on narrow ones the form alone, under the
   mark and the product name. The card floats on the ground with a soft shadow; fields and buttons are 44px tall.
   ===================================================================================================================== */
.auth {
    min-height: 100vh; display: flex; background: var(--pwo-canvas); color: var(--pwo-ink);
    font-family: var(--pwo-font); font-size: 14px; line-height: 1.5;
}
.auth-aside { display: none; }
.auth-main {
    flex: 1; width: 100%; max-width: 456px; margin: 0 auto; box-sizing: border-box; padding: 24px 16px;
    display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 12px; }
.auth-mark { color: var(--pwo-mark); }
.auth-brand-text { font-size: 18px; letter-spacing: -.01em; }
.auth-brand-text b { font-weight: 700; }
.auth-card {
    background: var(--pwo-surface); border: 1px solid var(--pwo-rule); border-radius: 16px; padding: 32px 36px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -8px rgba(16, 24, 40, .10);
}
.auth-title { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
.auth-lede { margin: 4px 0 20px; color: var(--pwo-ink-2); }
.auth-alert {
    margin: 0 0 20px; padding: 10px 12px 10px 14px; border-radius: 10px; border: 1px solid var(--pwo-bad);
    border-left-width: 4px; background: var(--pwo-bad-tint); color: var(--pwo-bad); font-weight: 500;
}
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label { font-weight: 600; font-size: 13px; }
.auth-field input, .auth-search input {
    box-sizing: border-box; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--pwo-input);
    background: var(--pwo-surface); color: var(--pwo-ink); font: inherit; font-size: 15px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-field input:hover, .auth-search input:hover { border-color: var(--pwo-ink-2); }
.auth-field input:focus, .auth-search input:focus {
    outline: none; border-color: var(--pwo-blue); box-shadow: 0 0 0 4px var(--pwo-selected), 0 0 0 1px var(--pwo-blue);
}
.auth-field-error { color: var(--pwo-bad); font-size: 13px; }
/* A one-time code: the figures are the field, large, centred and spaced (the letter spacing also trails the last figure). */
.auth-field input.auth-code {
    height: 60px; padding: 0 16px 0 calc(16px + .3em); font-size: 28px; font-weight: 600; text-align: center;
    letter-spacing: .3em; font-variant-numeric: tabular-nums;
}
.auth-field input.auth-code::placeholder { color: var(--pwo-ink-2); opacity: .5; }
.auth-field .invalid { border-color: var(--pwo-bad); }
.auth-button {
    height: 44px; margin-top: 6px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--pwo-blue); color: var(--pwo-on-blue);
    font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 12px -4px rgba(13, 71, 161, .45);
    transition: background-color .15s ease, transform .05s ease;
}
.auth-button:hover { background: var(--pwo-blue-hover); }
.auth-button:active { transform: translateY(1px); }
.auth-button:disabled { opacity: .7; cursor: default; }
.auth-button-small { margin: 0; height: 40px; }
.auth-help { margin: 20px 0 0; color: var(--pwo-ink-2); font-size: 13px; }
.auth-help a { color: var(--pwo-blue); font-weight: 500; text-decoration: none; }
.auth-help a:hover { text-decoration: underline; }
.auth-switch { margin: 16px 0 0; text-align: center; }
.auth-link { border: 0; background: none; padding: 0; font: inherit; color: var(--pwo-blue); cursor: pointer; text-decoration: none; font-weight: 500; }
.auth-link:hover { text-decoration: underline; }
.auth-foot { margin: 0; text-align: center; color: var(--pwo-ink-2); font-size: 12px; }

/* The form side: a lighter panel (soft blue light, faint dot grid) holding the form without a box, the help and legal
   links at its foot. On wide screens it overlaps the brand panel with rounded corners. The password box has an eye to
   show what was typed (password-toggle.js). */
.auth-side {
    flex: 1; min-width: 0; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column;
    background:
        radial-gradient(640px 420px at 88% 6%, rgba(13, 71, 161, .10), transparent 70%),
        radial-gradient(560px 380px at 70% 100%, rgba(30, 91, 198, .08), transparent 70%),
        radial-gradient(rgba(16, 24, 40, .07) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--pwo-canvas);
}
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-label-link { font-size: 13px; font-weight: 600; color: var(--pwo-blue); text-decoration: none; }
.auth-label-link:hover { text-decoration: underline; }
.auth-input-wrap { position: relative; display: flex; }
.auth-field .auth-input-wrap input { flex: 1; min-width: 0; padding-right: 46px; }
.auth-eye {
    position: absolute; top: 50%; right: 6px; width: 34px; height: 34px; margin-top: -17px; border: 0; border-radius: 8px; cursor: pointer;
    background: transparent no-repeat center / 18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.auth-eye[aria-pressed=true] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D47A1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7c2 0 3.7.6 5.1 1.5M22 12s-3.5 7-10 7c-2 0-3.7-.6-5.1-1.5'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
}
.auth-eye:hover { background-color: var(--pwo-selected); }
/* The main button of a form: a deep blue gradient (the spinner of auth-busy.js sits beside the words). */
.auth-form > .auth-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; margin-top: 4px;
    background: linear-gradient(180deg, #1E5BC6, #0D47A1); box-shadow: 0 2px 4px rgba(16, 24, 40, .08), 0 8px 18px -8px rgba(13, 71, 161, .6);
}
.auth-form > .auth-button:hover { background: linear-gradient(180deg, #1A52B5, #0A3A85); }
.auth-form > .auth-button[hidden] { display: none; }
.auth-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 24px; padding: 12px 24px 20px;
    color: var(--pwo-ink-2); font-size: 12px;
}
.auth-footer-help { margin: 0; }
.auth-footer-help a { color: var(--pwo-blue); font-weight: 600; text-decoration: none; }
.auth-footer-help a:hover { text-decoration: underline; }
.auth-footer .auth-foot { width: 100%; }

/* The brand panel, from 960px: navy with a soft light, the emblem large and faint behind the words. */
@media (min-width: 960px) {
    .auth-aside {
        position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
        flex: 0 0 44%; max-width: 640px; box-sizing: border-box; padding: 40px 56px; color: #FFFFFF;
        background: radial-gradient(120% 80% at 0% 0%, #1E5BC6 0%, rgba(30, 91, 198, 0) 60%),
                    linear-gradient(160deg, #0D47A1 0%, #022C78 55%, #011B4D 100%);
    }
    .auth-aside-watermark { position: absolute; right: -140px; bottom: -90px; color: #FFFFFF; opacity: .06; pointer-events: none; }
    .auth-aside-brand { position: relative; display: flex; align-items: center; gap: 12px; color: #FFFFFF; }
    .auth-aside-copy { position: relative; max-width: 420px; }
    .auth-aside-title { margin: 0 0 12px; font-size: 36px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; }
    .auth-aside-lede { margin: 0 0 28px; font-size: 16px; color: rgba(255, 255, 255, .78); }
    .auth-aside-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
    .auth-aside-points li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, .92); }
    .auth-aside-points li::before {
        content: "✓"; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
        background: rgba(255, 255, 255, .14); font-size: 13px; font-weight: 700;
    }
    .auth-aside-foot { position: relative; margin: 0; font-size: 12px; color: rgba(255, 255, 255, .6); }
    /* The form panel rounds over the brand panel; the form sits on it without a box. */
    .auth-side { position: relative; z-index: 1; margin-left: -28px; border-radius: 28px 0 0 28px; box-shadow: -12px 0 40px -12px rgba(2, 44, 120, .35); }
    .auth-main { max-width: 440px; padding: 24px 32px; }
    .auth-card { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
    .auth-title { font-size: 32px; }
    .auth-lede { margin-bottom: 28px; }
    /* The brand panel carries the name and the copyright. */
    .auth-main > .auth-brand, .auth-footer .auth-foot { display: none; }
    .auth-footer { justify-content: space-between; padding: 16px 40px 22px; }
    .auth-footer-help { flex: 1; text-align: center; }
}
@media (max-width: 480px) {
    .auth-main { padding: 32px 12px; }
    .auth-card { padding: 28px 20px; border-radius: 14px; }
}
@media (prefers-color-scheme: dark) {
    .auth-card { box-shadow: none; }
    .auth-button, .auth-form > .auth-button { box-shadow: none; }
}
/* The privacy policy and terms of use: a long document inside the sign-in card, spaced for reading. */
.legal-doc h2 { margin: 24px 0 8px; font-size: 16px; line-height: 24px; }
.legal-doc h3 { margin: 16px 0 4px; font-size: 14px; }
.legal-doc p, .legal-doc ul { margin: 0 0 12px; }
.legal-doc ul { padding-left: 20px; }
.legal-doc li + li { margin-top: 6px; }
.legal-doc mark { padding: 0 2px; border-radius: 2px; }
.legal-updated { color: var(--pwo-ink-2); font-size: 13px; }
/* A confirmation (not an error): the selection tint and blue, with words. */
.auth-notice {
    margin: 0 0 16px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--pwo-blue);
    background: var(--pwo-selected); color: var(--pwo-ink); font-weight: 500;
}
.auth-field-help { color: var(--pwo-ink-2); font-size: 13px; }
.auth-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.auth-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--pwo-blue); }
.auth-check-note { color: var(--pwo-ink-2); font-size: 13px; }
/* Two-step verification: the setup steps, the QR code to scan and the key to type instead. */
.auth-steps { margin: 4px 0 8px; padding-left: 20px; font-size: 13px; }
.auth-steps li + li { margin-top: 4px; }
.auth-qr { display: flex; justify-content: center; margin: 8px 0; }
.auth-qr img { border-radius: 8px; background: #fff; }
.auth-center { text-align: center; margin: 0 0 16px; }
.auth-secret { word-break: break-all; font-size: 13px; letter-spacing: .05em; }

/* The store users remembered on this device: one row each, the user to sign in with and an × to forget it. */
.remembered { margin: 0 0 8px; }
.remembered-title { margin: 0 0 8px; font-weight: 600; font-size: 13px; }
.remembered-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.remembered-user { display: flex; gap: 8px; }
.remembered-pick {
    flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 16px;
    border: 1px solid var(--pwo-rule); border-radius: 12px; background: var(--pwo-surface); color: inherit; font: inherit; cursor: pointer; text-align: left;
    transition: border-color .15s ease, background-color .15s ease;
}
.remembered-pick:hover { border-color: var(--pwo-blue); background: var(--pwo-selected); }
.remembered-id { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remembered-go { color: var(--pwo-blue); font-size: 13px; font-weight: 600; }
.remembered-forget {
    width: 48px; height: 48px; flex: none; border: 1px solid var(--pwo-rule); border-radius: 12px; background: var(--pwo-surface);
    color: var(--pwo-ink-2); font-size: 20px; line-height: 1; cursor: pointer;
}
.remembered-forget:hover { border-color: var(--pwo-bad); color: var(--pwo-bad); }
.remembered-or { margin: 16px 0; text-align: center; color: var(--pwo-ink-2); font-size: 13px; }

/* Choose a store: a search box with its magnifier inside, then one row per store (initials tile, name and city, the POS
   version, an arrow), in a list that scrolls on its own with a slim bar and fades at its bottom edge. */
.auth-search { display: flex; gap: 8px; margin: -8px 0 16px; }
.auth-search input {
    flex: 1; min-width: 0; padding-left: 40px;
    background: var(--pwo-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center;
}
.store-list {
    list-style: none; margin: 0 -6px; padding: 2px 6px 12px; display: flex; flex-direction: column; gap: 8px;
    max-height: max(180px, calc(100vh - 430px)); max-height: max(180px, calc(100dvh - 430px)); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--pwo-input) transparent;
    mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
}
.store-list::-webkit-scrollbar { width: 6px; }
.store-list::-webkit-scrollbar-thumb { background: var(--pwo-input); border-radius: 3px; }
.store-card {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--pwo-rule); border-radius: 12px;
    color: inherit; text-decoration: none; background: var(--pwo-surface);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
a.store-card:hover { border-color: var(--pwo-blue); background: var(--pwo-selected); box-shadow: 0 4px 12px -6px rgba(13, 71, 161, .35); }
/* Inside the scrolling list a ring outside the card would be cut off. */
a.store-card:focus-visible { outline-offset: -2px; }
.store-avatar {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
    background: var(--pwo-selected); color: var(--pwo-blue); font-size: 14px; font-weight: 700; letter-spacing: .02em;
}
.store-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.store-name { font-weight: 600; overflow-wrap: anywhere; }
.store-place { color: var(--pwo-ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-badge {
    flex: none; font-size: 11px; font-weight: 600; line-height: 16px; padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--pwo-rule); color: var(--pwo-ink-2); background: var(--pwo-canvas);
}
.store-badge-10 { border-color: transparent; background: var(--pwo-selected); color: var(--pwo-blue); }
.store-go {
    flex: none; width: 8px; height: 8px; margin: 0 4px 0 2px; border-top: 2px solid var(--pwo-ink-2); border-right: 2px solid var(--pwo-ink-2);
    transform: rotate(45deg); opacity: .5; transition: transform .15s ease, opacity .15s ease, border-color .15s ease;
}
a.store-card:hover .store-go { opacity: 1; border-color: var(--pwo-blue); transform: translateX(3px) rotate(45deg); }

/* =====================================================================================================================
   Narrower screens (desktop first: the rules above are the full layout)
   ===================================================================================================================== */
@media (max-width: 1279px) {
    .pwo-chip { max-width: 200px; }
}

@media (max-width: 959px) {
    .pwo-page { padding: 20px 16px 40px; }
    .pwo-quickfind { display: none; }
    .pwo-quickfind.pwo-quickfind-open {
        display: flex; align-items: center; gap: 4px; position: absolute; inset: 0 8px; z-index: 2;
        background: var(--mud-palette-appbar-background); color: var(--mud-palette-appbar-text);
    }
    .pwo-quickfind-open .pwo-quickfind-box { flex: 1; min-width: 0; }
    .pwo-quickfind-open .pwo-quickfind-key { display: none; }
    .pwo-find-toggle { display: inline-flex; }
}

@media (max-width: 599px) {
    .pwo-appbar .mud-toolbar { gap: 4px; padding-left: 8px; padding-right: 8px; }
    .pwo-appbar-end { gap: 8px; }
    .pwo-brand-sub { display: none; }
    /* The store chip becomes a round icon button; its menu still names the store and version. */
    .pwo-chip { width: 36px; padding: 0; justify-content: center; border-radius: 50%; flex: none; }
    .pwo-chip-text, .pwo-kind { display: none; }
    .pwo-title { font-size: 24px; }
    .pwo-toolbar .pwo-search { width: 100%; }
    .pwo-toolbar > .mud-select, .pwo-toolbar > .mud-picker { flex: 1 1 100%; }
    .auth-main { padding: 24px 16px; justify-content: flex-start; }
    .auth-card { padding: 24px 20px; }
}

/* Lists on phones: MudBlazor stacks each grid row as one line per field; make each row a compact two-column card
   (label above value) so a long list stays scannable. Applies to every MudDataGrid/MudTable below 600 px. */
@media (max-width: 599.98px) {
    .mud-xs-table .mud-table-body .mud-table-row {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px;
        padding: 12px 16px; border-bottom: 1px solid var(--mud-palette-table-lines);
    }
    .mud-xs-table .mud-table-body .mud-table-row .mud-table-cell {
        display: block; min-width: 0; height: auto; padding: 0; border: 0 !important; font-size: 13px; white-space: normal; overflow-wrap: anywhere;
    }
    .mud-xs-table .mud-table-body .mud-table-row .mud-table-cell::before {
        display: block; padding: 0; font-size: 11px; font-weight: 600; color: var(--mud-palette-text-secondary);
    }
    .mud-xs-table .mud-table-body .mud-table-row .mud-table-cell:last-child { border-bottom: 0; }
    /* !important: MudDataGrid puts an inline width:max-content on its table (for sideways scroll on wider screens). */
    .mud-xs-table .mud-table-root, .mud-xs-table .mud-table-body { display: block; width: 100% !important; }
}

/* Printing: the page's own content only (the report pages print their header, tables and notes). */
@media print {
    .pwo-appbar, .pwo-drawer, .pwo-noprint, .mud-snackbar-provider, .mud-popover-provider { display: none !important; }
    .mud-main-content { padding: 0 !important; margin: 0 !important; }
    .pwo-page { max-width: none; padding: 0; }
}

/* Touch screens: every tap target at least 32 px (icon buttons 36 px), without changing the desktop's density. */
@media (pointer: coarse) {
    .pwo-rowlink, .mud-table-cell a.mud-link, .pwo-tile-title a, a.pwo-tile-title {
        display: inline-flex; align-items: center; min-height: 32px; min-width: 32px;
    }
    .mud-icon-button { min-width: 36px; min-height: 36px; }
    /* MudBlazor names the small size per variant: mud-button-outlined-size-small, mud-button-text-size-small… */
    .mud-button-root[class*="-size-small"] { min-height: 36px; }
}

/* Helper text + character counter: keep the counter on one line, gap it from the caption,
   and let the caption take the remaining width instead of squeezing the counter. */
.mud-input-control-helper-container .d-flex { gap: 12px; align-items: flex-start; }
.mud-input-control-helper-container .d-flex > .me-auto { flex: 1 1 auto; min-width: 0; }
.mud-input-control-helper-container .d-flex > .ms-auto { flex: 0 0 auto; white-space: nowrap; }

/* The AdvEnt AI side panel (Components/Assistant/AssistantPanel): on wide screens the page narrows beside it instead of
   lying under it, so both stay usable; narrower screens get it over the page. */
:root { --pwo-ai-width: 400px; }
@media (min-width: 960px) {
    body:has(.pwo-ai-panel:not([hidden])) .mud-main-content { margin-right: var(--pwo-ai-width); }
}

/* =====================================================================================================================
   The loader (BusyIndicator): a bar moving along the very top of the window while work runs, and after a moment a
   "Working…" badge under the app bar. Both fade in late (no flash for quick work), fade out at once, never take clicks.
   ===================================================================================================================== */
.pwo-busy { position: fixed; top: 0; left: 0; right: 0; z-index: 1600; pointer-events: none; }
.pwo-busy-bar { height: 3px; overflow: hidden; opacity: 0; transition: opacity .2s ease; }
.pwo-busy-bar::before {
    content: ""; display: block; width: 40%; height: 100%; border-radius: 0 3px 3px 0;
    /* Light on the navy app bar it runs over (light and dark themes alike). */
    background: linear-gradient(90deg, rgba(142, 197, 255, 0), #8EC5FF 35%, #FFFFFF);
    box-shadow: 0 0 8px rgba(142, 197, 255, .8);
    animation: pwo-busy-slide 1.1s ease-in-out infinite;
}
.pwo-busy-on .pwo-busy-bar { opacity: 1; transition-delay: .15s; }
.pwo-busy-pill {
    position: absolute; top: 72px; left: 50%; display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
    background: var(--mud-palette-surface, var(--pwo-surface)); color: var(--mud-palette-text-primary, var(--pwo-ink));
    border: 1px solid var(--mud-palette-lines-default, var(--pwo-rule)); box-shadow: 0 6px 20px -6px rgba(16, 24, 40, .25);
    font: 600 13px/18px var(--pwo-font); opacity: 0; transform: translate(-50%, -6px); transition: opacity .2s ease, transform .2s ease;
}
.pwo-busy-on .pwo-busy-pill { opacity: 1; transform: translate(-50%, 0); transition-delay: .8s; }
.pwo-busy-spin, .auth .is-busy::after {
    width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; flex: none;
    border: 2px solid var(--mud-palette-lines-default, var(--pwo-rule)); border-top-color: var(--mud-palette-primary, var(--pwo-blue));
    animation: pwo-spin .8s linear infinite;
}
@keyframes pwo-busy-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes pwo-spin { to { transform: rotate(360deg); } }

/* The sign-in pages post whole forms: the button pressed shows a spinner and takes no second click (auth-busy.js). */
.auth .is-busy { position: relative; pointer-events: none; }
.auth .auth-button.is-busy { opacity: .9; }
.auth .is-busy::after { content: ""; display: inline-block; margin-left: 8px; vertical-align: middle; }
.auth .auth-form > .auth-button.is-busy::after {
    content: ""; font-size: 0; transform: none; border-color: rgba(255, 255, 255, .45); border-top-color: #FFFFFF;
}
.auth .remembered-pick.is-busy .remembered-go { display: none; }

@media (prefers-reduced-motion: reduce) {
    .pwo-busy-bar::before { animation-duration: 2.4s; }
    .pwo-busy-spin, .auth .is-busy::after { animation-duration: 1.6s; }
}
@media print { .pwo-busy { display: none !important; } }