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. */
.mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-paper-square) {
    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);
}