/* Global font */
/*body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}*/

/* Headings (like your "Մուտք գործել") */
/*h1, h2, h3, h4, h5, h6,
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
    font-weight: 600;
    letter-spacing: 0.02em;
}*/

/* Labels (like "Էլ․հասցե", "Գաղտնաբառ") */
/*.mud-input-label {
    font-weight: 500;
    letter-spacing: 0.015em;
}*/

/* Inputs text */
/*.mud-input-input {
    font-weight: 400;
    letter-spacing: 0.01em;
}*/

/* Buttons */
/*.mud-button {
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: none;*/ /* cleaner, more modern */
/*}*/

/* Secondary text / links */
/*.mud-typography-body2 {
    letter-spacing: 0.015em;
}*/

/* Optional: slightly improve spacing */
/*.mud-paper {
    border-radius: 10px;
}*/

body {
    font-family: 'Inter', sans-serif;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/***** Color overrides *****/
.top-row {
    background-color: #0b4251 !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid #d6d5d5 !important;
}

.validation-message {
    color: red !important;
    padding-top: 3px;
}

.list-item-inactive, .list-item-inactive .mud-paper {
    background-color: rgb(220, 220, 220) !important;
}

.list-item-active, .list-item-inactive {
    border-radius: 12px;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.list-item-active:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-2px);
}

.mdc-select__anchor.mdc-ripple-upgraded, .mat-autocomplete-list.mat-autocomplete-list-wrapper label {
    color: #495057 !important;
    background-color: rgb(245, 245, 245) !important;
    background-clip: padding-box !important;
    border: 1px solid #ced4da !important;
}

.settings-header {
    color: white !important;
    display: flex;
    align-self: center;
    font-size: 29px;
}

.sidebar {
    background-image: linear-gradient(180deg, #0b4251 0%, #00394d 100%) !important;
}

/* Theme Dependent */

.dark-theme .settings-header {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Theme Dependent */
/***** Color overrides *****/

.PortalIos .mud-appbar {
    padding-top: 30px;
}

.PortalIos .mud-drawer-header {
    height: 94px;
}

.PortalIos .mud-drawer-header h5 {
    padding-top: 15px;
}

.Portal .door-state-buttons {
    padding: 30px 0;
}

.Portal .mud-dialog-content .locker-image {
    margin-top: 30px;
}

.Portal .mud-dialog-content .bottom-info {
    margin-top: 20px;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.arrow-Top {
    transform: rotate(90deg);
}

.arrow-Right {
    transform: rotate(180deg);
}

.arrow-Bottom {
    transform: rotate(270deg);
}

.innovera-hyper-link {
    text-decoration: underline !important;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.nowrap {
    text-wrap: nowrap;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

.mud-overlay.mud-overlay-absolute {
    height: 100vh;
}

.locker-data {
    text-align: left;
    max-width: 1000px;
    display: inline;
    width: -webkit-fill-available;
}

.locker-data .col-item {
    margin-bottom: 30px;
}

.locker-data .col-item .file-picture-row {
    margin-bottom: 0px;
}

#app-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -22px;
    margin-left: -22px;
}

.error-content {
    width: 100%;
    margin-top: 25px;
    margin-bottom: 15px;
    white-space-collapse: preserve;
}

.error-content .mud-alert-message {
    padding: 12px 0px;
}

.error-content .mud-alert-icon {
    padding: 10px 0px;
}

.file-picture-row .file-image {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    aspect-ratio: 1;
    height: 400px;
    width: 400px;
}

.file-picture-row .file-image .mud-avatar {
    aspect-ratio: 1 / 1;
}

.file-picture-row .file-image div {
    width: 100%;
    height: 100%;
    font-size: 250px;
}

.file-image-add, .file-image-remove {
    position: relative;
    bottom: 70px;
}

.file-picture-row .mud-tooltip-root {
    display: block;
}

.file-picture-row {
    margin-bottom: 42px;
    text-align: center;
}

.locker-types-grid .file-picture-row {
    margin-bottom: 0px;
    height: 400px;
}

/* Explicit width (not auto) because this image sits inside a <table> cell - table auto-layout
   negotiates column widths across all cells, which fights a plain auto-width-from-height
   calculation and can shrink the image far narrower than its actual aspect ratio. ObjectFit
   is set to Contain on the ImageControl itself (MudImage renders it as an `!important` class,
   so it can't be overridden here) so a non-square generated icon isn't stretched to fill the
   square box. */
.locker-types-grid .squared-image {
    display: block;
    height: 96px;
    width: 96px;
    margin: 0 auto;
}

/* MudImage's own .fluid class caps it at max-width:100% of its column, so without reserving
   space here the column above stays too narrow (table auto-layout otherwise shrinks it to fit
   the other columns) and clamps the image back down below its intended 96px. */
.locker-types-grid td.locker-type-image-cell {
    min-width: 130px;
}

/* The locker's own uploaded photo can be a narrow/portrait shot - in this single-column edit form
   that would otherwise stretch to the full column width and balloon to an oversized height.
   Capping it to a small square keeps it a sane size (ObjectFit="Contain" on the ImageUploadControl
   itself keeps the whole photo visible instead of cropping/stretching it - MudImage renders its
   ObjectFit as an `!important` class, so that has to be set on the component, not overridden here). */
.locker-edit-form .file-image {
    max-width: 260px;
    margin: 0 auto;
}

.locker-edit-form .squared-image {
    aspect-ratio: 1 / 1;
}

.squared-image, .rectangled-image {
    width: 100%;
}

.locker-type-logo-preview {
    display: flex;
    justify-content: center;
    max-width: 320px;
    margin: 0 auto 16px;
}

.mud-alert-message {
    overflow-wrap: anywhere !important;
}

/*Not Logged In*/
@media (max-width: 640.98px) {
    #logged-in-form, #not-logged-in-form {
        padding-top: 2rem;
    }

    #not-logged-in-form {
        display: table;
        width: 100%;
    }

    html, body, #app, .page, .mud-main-content .mud-container:first-child, #not-logged-container, #not-logged-in-form {
        height: 100%;
    }

    .mud-main-content {
        height: 95%;
    }

    #logged-in-form .main {
        padding: 40px 0px;
    }

    #not-logged-in-form .main {
        padding: 40px 0px;
        display: table-cell;
        text-align: left;
        vertical-align: middle;
    }

    #not-logged-in-form .control-row-checkbox {
        text-align: right;
    }

    .button-row .control-row {
        text-align: left;
    }

    .button-row div:first-child {
        padding: 0;
    }

    .button-row button {
        width: 100% !important;
        height: auto !important;
    }

    .button-row button:last-child:not(:only-child) {
        margin-top: 20px;
    }

    .fullbutton {
        margin: 40px 0px 0px 0px !important;
    }

    .fullbutton button {
        width: 100% !important;
    }

    .mud-main-content, #not-logged-container {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .navbar-brand img {
        max-height: 30px;
    }

    .Portal .mud-dialog-content .close-door-animation {
        height: 200px;
        width: 200px;
    }
}

@media (min-width: 641px) {
    .navbar-brand img {
        max-height: 40px;
    }
    
    .app-bar-small {
        display: none;
    }

    .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block !important;
    }

    .page {
        flex-direction: row;
    }

    .app-content {
        padding-top: 0px;
        display: flex;
    }

    .sidebar {
        padding-top: 64px;
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }
}

.assignement-button button {
    height: 36.5px;
}

#not-logged-in-form .row, #logged-in-form .row {
    min-height: 96px;
}

.filter-buttons {
    padding-top: 27px;
}

.error-container h1 {
    font-size: 80px;
}

/*End Not Logged In*/

.filter-item {
    padding: 10px 0;
}

.filter-item .mud-checkbox, .sorting-item .mud-checkbox {
    padding-top: 10px;
}

.filter-add {
    margin-left: 10px;
}

.filter-left {
    float: left;
    margin: 0;
}

.filter-mobile-trigger {
    margin-bottom: 16px;
}

.filter-mobile-open {
    width: 100%;
}

.filter-drawer {
    /* MudDrawer only pins itself to the viewport top when it is a near-top sibling of the
       app bar (as NavMenu/Settings are); nested this deep in page content, "top" resolves
       to the drawer's static in-flow position instead, so it must be pinned explicitly. */
    top: 0 !important;
    height: 100dvh !important;
    /* Set via the CSS variable MudBlazor itself reads for both the open width and the
       closed-state offset (right: calc(-1 * var(--mud-drawer-width))) - overriding the
       "width" property directly instead would leave that offset at its old default, so
       the drawer would only slide (old width) off-screen and leave a sliver visible. */
    --mud-drawer-width: min(92vw, 420px);
}

.filter-drawer-content {
    padding: 8px 16px 16px;
}

.filter-drawer-footer {
    /* Keeps Reset reachable without scrolling back up through a long field list - sticks
       to the bottom of the drawer's own scroll area (the "aside.mud-drawer" element). */
    position: sticky;
    bottom: 0;
    background: var(--mud-palette-surface);
    padding: 12px 16px;
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
}

.filter-drawer-footer .filter-reset {
    width: 100%;
}

.list-card {
    padding: 15px;
    margin: 3% 0%;
    height: 100%;
}

.card-image {
    background-size: contain;
}

.status-bar {
    padding: 5px;
}

.status-bar label {
    margin-left: 10px;
}

.list-item {
    padding: 5px;
}

.list-item img {
    width: 100%;
}

.list-item .mud-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-wrap: break-word;
}

/* Bootstrap's grid tops out at xxl (1400px), which lumps ordinary laptop screens in with 4K/ultrawide
   monitors. This custom breakpoint keeps card grids at 3 per row up through xxl and only widens to
   6 per row on genuinely large (4K/ultrawide-class) screens. */
@media (min-width: 2560px) {
    .col-4k-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
}

.mat-paginator {
    margin-top: 30px;
    margin-bottom: 60px;
}

.mdc-select {
    min-width: 0;
}

.sorting-row {
    margin-top: 20px;
    margin-bottom: 5px;
}

.mat-autocomplete-list.mat-autocomplete-list-wrapper, .mat-autocomplete-list.mat-autocomplete-list-wrapper label {
    width: 100%;
}

.row-founditems {
    padding-left: 6px;
    padding-top: 6px;
}

.mat-paginator-page-size {
    align-items: center !important;
    justify-content: center;
}

.mat-paginator-range-labelmat-paginator-range-label, .mat-paginator-page-size-label {
    padding-top: 5px;
}

.edit-form {
    position: relative;
}

.edit-form .control-row {
    margin: 0px 5px;
    min-height: 96px;
}

.edit-form .control-row.user-confirmation-column-item {
    min-height: 36px;
}

.edit-form .control-row .language-flag {
    width: 22px;
}

.edit-form .control-row .mud-tooltip-root {
    width: 100%;
}

.edit-form .control-row-checkbox {
    min-height: 68px;
}

.edit-form .control-row-textarea {
    min-height: 134px;
}

.edit-form .button-row {
    margin: 40px 0px 0px 0px;
}

#not-logged-in-form .edit-form .button-row, #not-logged-in-form .edit-form .control-row {
    min-height: 58px !important;
}

.fullbutton .control-row {
    text-align: center;
}

.edit-form .fullbutton button {
    width: 250px;
}

.edit-form .fullbutton {
    margin: 0;
}

.reserve-map-page {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
}

@media (min-width: 600px) {
    .reserve-map-page {
        top: 64px;
    }
}

.reserve-map-overlay-panel {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    width: 340px;
    max-width: 90vw;
    padding: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    border-radius: var(--mud-default-borderradius, 4px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
    transition: right 225ms cubic-bezier(0, 0, 0.2, 1);
}

/* The Settings drawer (right-anchored, z-index far above this panel) slides over this same
   top-right corner when opened - shift the panel left by the drawer's width (LayoutProperties.
   DrawerWidthRight, currently 300px) so it moves out from under it instead of being covered.
   Desktop only, matching the drawer's own persistent (non-scrim) behavior; on mobile the panel
   is already full-width (see below) so there's no separate corner to protect. */
@media (min-width: 600px) {
    body:has(.settings-drawer.mud-drawer--open) .reserve-map-overlay-panel {
        right: 316px;
    }
}

@media (max-width: 599px) {
    .reserve-map-overlay-panel {
        left: 8px;
        right: 8px;
        top: 8px;
        width: auto;
        max-width: none;
    }
}

.locker-map-infowindow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 160px;
    padding: 4px 2px;
    text-align: center;
}

.locker-map-infowindow-image {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    background: #f0f0f0;
    padding: 4px;
    box-sizing: border-box;
}

.locker-map-infowindow-name {
    font-weight: 600;
    font-size: 14px;
}

.locker-map-infowindow-address {
    font-size: 12px;
    color: rgba(0, 0, 0, .6);
}

.locker-map-infowindow-select {
    margin-top: 4px;
    padding: 6px 16px;
    border: none;
    border-radius: var(--mud-default-borderradius, 4px);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 500;
    cursor: pointer;
}

.locker-map-infowindow-select:hover {
    filter: brightness(0.92);
}

.locker-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    border-radius: var(--mud-default-borderradius, 4px);
}

/* Same size wrapper technique as .about-card-logo - ImageControl renders a MudImage internally so
   it's sized through this wrapper and descendant selectors rather than directly. The ImageControl
   here is passed ObjectFit="Contain" (rather than the default Fill) because this shows the
   locker's own uploaded photo, which (unlike the generated square locker type icons) can be a
   narrow/portrait shot that stretching or cropping would ruin. */
.locker-summary-logo {
    width: 132px;
    height: 132px;
    overflow: hidden;
    border-radius: 10px;
    flex-shrink: 0;
    background: #f0f0f0;
    padding: 4px;
    box-sizing: border-box;
}

/* Selector needs 2 classes (not `.locker-summary-logo img`) to out-specificity MudBlazor's own
   `.mud-image.fluid { height: auto }`, which would otherwise win the "height" declaration and
   let the image grow past this wrapper's fixed box based on its own aspect ratio. */
.locker-summary-logo .squared-image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.locker-summary-logo .mud-elevation-25 {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    border: 1px solid rgba(0, 0, 0, .2);
}

.locker-summary-name {
    font-weight: 600;
    font-size: 15px;
}

.locker-summary-address {
    font-size: 13px;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, .6));
}

.locker-summary-actions {
    margin-left: auto;
    align-self: flex-start;
    flex-shrink: 0;
}

.active-inactive-text {
    margin-left: 10px;
}

.list-item button {
    margin: 5px;
}

.language-row-main {
    padding: 16px 20px;
}

.language-row-main .language-text {
    font-weight: 500;
}

.language-text-header {
    font-size: 20px;
}

.language-flag {
    width: 32px;
    float: right;
}

.language-text {
    line-height: 32px;
    float: left;
    margin-right: 10px;
}

.language-row {
    min-width: 188px;
}

.mdc-card__media {
    background-size: contain;
}

/* Start Main Layout */

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main {
    flex: 1;
}

.sidebar {
    background-image: linear-gradient(180deg, #0b4251 0%, #00394d 100%);
}

.top-row a, .top-row .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
}

.top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mud-toolbar {
    padding: 0 40px;
}

.portal-locker-form-loading {
    position: relative;
    height: 100%;
    width: 100%;
}

.portal-locker-form-loading-blured-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.portal-locker-form-loading .page-title {
    margin-bottom: 30px;
}

.portal-locker-form-loading .locker-image {
    margin: 44px 0px;
    filter: blur(5px);
}

.portal-locker-form-loading .bottom-info {
    font-size: 24px;
    filter: blur(5px);
}

.portal-locker-form-loading .lock-animation-container {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: -125px;
}

.portal-locker-form-loading .lock-animation {
    width: 500px;
    height: 500px;
}

/* Full-screen loader shown by GeneralFormLoadingControl / OverlayForm while a
   layout or form is loading (replaces the old 404px loading_animation.gif).
   Theme-aware brand spinner - shared by Portal, the MAUI app and the kiosk. */
.app-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    box-sizing: border-box;
}

.app-loader-spinner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid rgba(127, 127, 127, .22);
    border-top-color: var(--mud-palette-primary, #0b4251);
    animation: app-loader-spin .8s linear infinite;
}

@keyframes app-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

.app-loader-title {
    margin: 0;
    max-width: 30ch;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, .6));
}

@media (prefers-reduced-motion: reduce) {
    .app-loader-spinner {
        animation-duration: 2s;
    }
}

.locker-app-credentials-tab {
    display: flex;
}

.locker-app-credentials-tab h6 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 9px;
}

/* Segmented-button replacement for the store-operations tab strip on narrow screens - see the
   (max-width: 640.98px) block below, which hides MudTabs' own scrollable header and shows this
   instead. Avoids fighting MudBlazor's scroll-button/overflow logic, which doesn't reliably fit
   three tabs (All/Received/Sent) without clipping text behind arrow buttons on phone-width screens. */
.store-operations-tabs-mobile-selector {
    display: none;
    border-radius: var(--mud-default-borderradius, 4px);
    overflow: hidden;
    border: 1px solid var(--mud-palette-primary);
    margin-bottom: 12px;
}

.store-operations-tab-button {
    flex: 1 1 0;
    border: none;
    border-left: 1px solid var(--mud-palette-primary);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    padding: 10px 4px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: .02857em;
    text-transform: uppercase;
    cursor: pointer;
}

.store-operations-tab-button:first-child {
    border-left: none;
}

.store-operations-tab-button.active {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.store-operations-tabs .mud-tabs-tabbar {
    margin-bottom: 12px;
}

@media (max-width: 640.98px) {

    .mud-toolbar {
        padding: 0 20px;
    }

    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-row a, .top-row .btn-link {
        margin-left: 0;
    }

    .app-bar-large {
        display: none;
    }

    .app-bar-small {
        display: block !important;
    }

    .file-picture-row .file-image {
        text-align: center;
        width: 100%;
        max-width: 200px;
        height: auto;
        margin: 0 auto;
    }

    .store-operations-tabs .mud-tabs-tabbar {
        display: none;
    }

    .store-operations-tabs-mobile-selector {
        display: flex;
    }

    .language-row-main .language-text {
        display: none;
    }

    .language-row-main {
        min-width: 64px;
        padding: 12px 16px;
    }

    .portal-locker-form-loading .lock-animation {
        width: 250px;
        height: 250px;
    }

    .portal-locker-form-loading .lock-animation-container {
        margin-top: -90px;
    }
}

.rz-map {
    margin-bottom: 40px;
}

@media (min-width: 641px) {
    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }
}

/* End Main Layout*/

/* Start Profile Menu */
.app-bar-menu, .profile-menu div[oncontextmenu] {
    display: flex;
    align-items: center;
}

.profile-menu .mud-avatar {
    margin-right: 26px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    color: white;
    padding: 0 10px;
}

.mud-drawer-header {
    margin: 0 0 0 0 !important;
    width: 100% !important;
}

.settings-row {
    margin: 10px;
}

.settings-row .language-flag, .settings-row .theme-icon {
    width: 22px;
}

.menu-icon {
    padding: 0;
}

/* End Profile Menu */

.mud-container {
    max-width: none;
}

.responsive-list-view .mud-overlay, .responsive-data-table .mud-overlay {
    height: 100vh;
}

/* Card images (e.g. a locker's own uploaded photo, or a non-square generated locker type icon)
   can be a narrow/portrait shot - without a height cap, scaling that to the card's full width
   blows the image up to an oversized height. Capping it to a square keeps it to roughly the
   card's width (ObjectFit="Contain", passed by the consuming page e.g. LockersPage, keeps the
   whole photo visible instead of cropping/stretching it into that square). */
.responsive-list-view .squared-image {
    aspect-ratio: 1 / 1;
}

.responsive-list-view .dropoff-button {
    margin-right: 10px;
}

.mud-table-root .data-table-footer {
    display: table-footer-group !important;
}

@media (max-width: 640.98px) {
    /* MudBlazor's built-in mobile "card" table view (.mud-sm-table, applied by MudTable because
       ResponsiveDataTable/DataTable set Breakpoint="Breakpoint.Sm") lays each cell out as a flex row
       with the column label squeezed beside the content on a single line. That fits a short single
       value, but this app's row templates (e.g. the Parcels table) pack multi-line rich content -
       addresses, stacked sub-fields with their own bold labels - into a cell, and cramming that next
       to the label in a flex row is what produces wide, overlapping, hard-to-read text on phones.
       Stack the label above the content instead so it can wrap at full width. */
    .mud-sm-table .mud-table-cell {
        display: block;
        overflow-wrap: anywhere;
    }

    .mud-sm-table .mud-table-cell:before {
        display: block;
        padding-right: 0;
        margin-bottom: 4px;
    }

    /* A single long unbreakable token in a cell (an email address, a connection-id GUID, a long
       device description) forces the table's auto layout to size the whole table past the viewport
       even though the cell itself is now a block - let content wrap instead of pushing the table wide. */
    .mud-sm-table .mud-table-cell * {
        overflow-wrap: anywhere;
    }

    /* The desktop 96px logo (sized to stay legible in a table row alongside many other columns)
       reads as tiny once the mobile card view gives it a full-width cell to itself - double it. */
    .locker-types-grid .squared-image {
        height: 192px;
        width: 192px;
    }
}

.page-title {
    margin-bottom: 20px;
}

.version-info {
    padding-top: 2em;
}

button {
    white-space: nowrap;
}

.mud-pagination {
    width: auto;
}

.padding-left0 {
    padding-left: 0;
}

.padding-right0 {
    padding-right: 0;
}

.phone-control-row {
    min-height: auto !important;
}

.mud-card-actions {
    flex-wrap: wrap;
}

.mud-card-header .mud-card-header-content {
    overflow: hidden;
    overflow-wrap: break-word;
}

.mud-card-header .mud-badge-root, .locker-hardware-type-badge {
    padding-right: 10px;
}

/***** Portal *****/
.getting-started-panels .mud-expand-panel-text {
    font-size: 30px;
}

.getting-started-panels .mud-expand-panel-content {
    white-space: pre-line;
}

.privacy-link {
    text-decoration: underline !important;
    color: rgb(108, 117, 125) !important;
}

.privacy-policy-page {
    white-space: pre-line;
}

.mud-dialog {
    border-radius: 6px;
    border-width: 8px 0px 0px 0px;
    padding: 16px 31px 16px 31px;
    min-width: 250px;
    width: auto;
}

@media (max-width: 640.98px) {
    .mud-dialog {
        min-width: 0;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .mud-dialog .mud-dialog-content {
        overflow-x: auto;
    }
}

.dialog-background-overlay {
    backdrop-filter: blur(10px);
}

.dialog-logo {
    width: 25px;
    height: 25px;
}

.dialog-content {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
    white-space: pre-line;
}

.mud-dialog .mud-button, .mud-dialog .mud-dialog-actions .innovera-hyper-link {
    height: 33px;
    border-radius: 4px;
    padding: 8px;
    text-decoration: none !important;
}

.mud-dialog .mud-button .mud-button-label, .mud-dialog .mud-dialog-actions .innovera-hyper-link {
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
}

.mud-dialog .mud-dialog-actions {
    display: block;
    margin: 0;
    padding: 0;
    text-align: right;
}

.dialog-content-title {
    margin-top: 15px;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

.dialog-content .arrow {
    margin: 20px;
}

.mud-snackbar {
    background: #ffffff;
    border-width: 0px 0px 0px 4px;
    border-radius: 4px;
    padding: 10px;
}

.not-found-form .title {
    margin-top: 40px;
    font-weight: 700;
    font-size: 150px;
    line-height: 183px;
}

.not-found-form .subtitle {
    font-weight: 700;
    font-size: 52px;
    line-height: 64px;
}

.not-found-form .text {
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
}

.not-found-form .text-line1 {
    margin-top: 100px;
}

.not-found-form .text-line2 {
    margin-bottom: 40px;
}

.mud-appbar .language-menu {
    margin-left: 20px;
}

.locker-app-download-link p {
    text-decoration: underline;
    cursor: pointer;
}

.opening-the-locker-in-popup .lock-animation {
    position: absolute;
    top: 180px;
    left: 50%;
    margin-left: -75px;
    height: 150px;
    width: 150px;
}

.opening-the-locker-in-popup .locker-image {
    filter: blur(5px);
}

.apiuser-creation-container p {
    overflow-wrap: break-word;
}

.error-border {
    border: 1px solid;
    color: red;
}

.date-time-control {
    display: flex;
}

.date-time-control .mud-picker:last-child {
    margin-left: 10px;
}

/* About page - card layout for the Company/Retailer/Innovera detail sections. */
.about-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
}

.about-cards-row {
    row-gap: 24px;
}

.about-card-col {
    display: flex;
}

.about-detail-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ImageControl has no Class parameter of its own (it hardcodes its class from ImageControlType),
   so it's wrapped in this plain div rather than styled directly - size/crop the img it renders
   through descendant selectors instead. */
.about-card-logo {
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 50%;
    flex-shrink: 0;
}

.about-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ImageControl hardcodes Elevation="25" (MudBlazor's heaviest shadow) for every use, which reads
   as dated at this small avatar size - swap it for a flat, subtle border that works in both themes. */
.about-card-logo .mud-elevation-25 {
    box-shadow: none;
    border: 1px solid rgba(127, 127, 127, 0.25);
}

.about-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
}

.about-detail-icon {
    margin-top: 2px;
    flex-shrink: 0;
}

.about-detail-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.about-detail-label {
    display: block;
    opacity: 0.65;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
}

.about-detail-value {
    display: block;
    font-weight: 500;
}

.about-detail-card .mud-card-actions {
    justify-content: flex-end;
    padding-top: 0;
}

@media (max-width: 640.98px) {
    .about-actions .about-contact-button {
        width: 100%;
    }

    .about-card-logo {
        width: 44px;
        height: 44px;
    }
}
/* Locker visualization: the cabinet drawing shared by any page that wants to show a locker rather than
   only a table of its compartments. The cabinet itself is painted in the same colours the server draws the
   locker type icon with (LockerTypeIconGenerationService), and the availability of a compartment is laid
   over its door as a tinted, patterned film so the drawing still reads as a locker. */
.locker-visualization {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.locker-visualization-canvas {
    width: 100%;
    max-width: 520px;
    max-height: 60vh;
}

.locker-visualization-empty {
    padding: 24px 0;
    opacity: 0.7;
}

/* Cabinet shell. */
.locker-visualization-roof {
    fill: #fcfcfc;
}

.locker-visualization-roof-edge {
    fill: #cfd3d5;
}

.locker-visualization-roof-light {
    fill: #fff7dc;
}

.locker-visualization-roof-outline {
    fill: none;
    stroke: #cfd3d5;
    stroke-width: 1;
}

.locker-visualization-frame {
    fill: #aeb4b7;
}

.locker-visualization-plinth {
    fill: #d3d7d9;
}

/* Doors. */
.locker-visualization-door-face {
    fill: #f7f8f8;
}

.locker-visualization-door-shine {
    pointer-events: none;
}

.locker-visualization-shine-start {
    stop-color: #ffffff;
    stop-opacity: 0.41;
}

.locker-visualization-shine-end {
    stop-color: #ffffff;
    stop-opacity: 0;
}

.locker-visualization-door-border {
    fill: none;
    stroke: #d3d7d9;
    stroke-width: 1;
    pointer-events: none;
}

.locker-visualization-screw {
    fill: #a8adb0;
}

.locker-visualization-label {
    fill: #2a2c2e;
    font-weight: 600;
    opacity: 0.62;
    pointer-events: none;
}

.locker-visualization-brand-text {
    fill: #0b4251;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    pointer-events: none;
}

.locker-visualization-brand-mark {
    pointer-events: none;
}

/* Terminal (service compartment). */
.locker-visualization-terminal-bezel {
    fill: #2a2c2e;
}

.locker-visualization-terminal-screen {
    fill: #eef2f5;
}

.locker-visualization-terminal-header {
    fill: #0b4251;
}

.locker-visualization-terminal-card {
    fill: #dfe7eb;
}

.locker-visualization-terminal-scanner {
    fill: #1c1e20;
}

.locker-visualization-terminal-lens {
    fill: #3e4a4e;
}

/* Availability film. The tint is deliberately light so the door underneath still shows through, and each
   state carries its own pattern as well as its own colour for anyone who cannot rely on colour alone. */
.locker-visualization-state-tint,
.locker-visualization-state-pattern,
.locker-visualization-state-outline {
    pointer-events: none;
}

.locker-visualization-state-tint {
    opacity: 0.12;
}

.locker-visualization-state-pattern {
    opacity: 0.32;
}

.locker-visualization-state-outline {
    fill: none;
    stroke-width: 1;
    opacity: 0.55;
}

.locker-visualization-door-available .locker-visualization-state-tint,
.locker-visualization-legend-swatch.locker-visualization-door-available {
    fill: var(--mud-palette-success);
    background: var(--mud-palette-success);
}

.locker-visualization-door-occupied .locker-visualization-state-tint,
.locker-visualization-legend-swatch.locker-visualization-door-occupied {
    fill: var(--mud-palette-error);
    background: var(--mud-palette-error);
}

.locker-visualization-door-out-of-service .locker-visualization-state-tint,
.locker-visualization-legend-swatch.locker-visualization-door-out-of-service {
    fill: var(--mud-palette-warning);
    background: var(--mud-palette-warning);
}

.locker-visualization-door-available .locker-visualization-state-outline {
    stroke: var(--mud-palette-success);
}

.locker-visualization-door-occupied .locker-visualization-state-outline {
    stroke: var(--mud-palette-error);
}

.locker-visualization-door-out-of-service .locker-visualization-state-outline {
    stroke: var(--mud-palette-warning);
}

.locker-visualization-pattern-available {
    fill: var(--mud-palette-success);
}

.locker-visualization-pattern-occupied {
    stroke: var(--mud-palette-error);
}

.locker-visualization-pattern-out-of-service {
    stroke: var(--mud-palette-warning);
}

/* A compartment that belongs to another company: greyed out, with no pattern and no number, since the only
   thing being said about it is that it is not the caller to look into. */
.locker-visualization-door-not-accessible .locker-visualization-state-tint,
.locker-visualization-legend-swatch.locker-visualization-door-not-accessible {
    fill: #6b7477;
    background: #6b7477;
}

.locker-visualization-door-not-accessible .locker-visualization-state-tint {
    opacity: 0.3;
}

.locker-visualization-door-not-accessible .locker-visualization-state-outline {
    stroke: #6b7477;
}

.locker-visualization-door-clickable {
    cursor: pointer;
}

.locker-visualization-door:hover .locker-visualization-door-border {
    stroke: #0b4251;
    stroke-width: 1.8;
}

/* Only a door that answers to a click gets the stronger hover, so the rest do not look interactive. */
.locker-visualization-door-clickable:hover .locker-visualization-state-tint {
    opacity: 0.26;
}

/* Legend. */
.locker-visualization-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    font-size: 13px;
}

.locker-visualization-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.locker-visualization-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #90979b;
    border-radius: 3px;
    opacity: 0.55;
}

.locker-visualization-legend-swatch.locker-visualization-door-service {
    background: #f7f8f8;
    opacity: 1;
}

/* Compartment availability page: the drawing next to the counts it explains, stacking on narrow screens. */
.compartment-availability {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

.compartment-availability-visualization {
    flex: 1 1 280px;
    min-width: 260px;
}

.compartment-availability-details {
    flex: 1 1 320px;
    min-width: 280px;
}

.compartment-availability-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.compartment-availability-total {
    flex: 1 1 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    border-radius: var(--mud-default-borderradius, 4px);
    background: var(--mud-palette-surface);
}

.compartment-availability-total-value {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

.compartment-availability-total-label {
    font-size: 12px;
    text-align: center;
    opacity: 0.75;
}

.compartment-availability-total-available .compartment-availability-total-value {
    color: var(--mud-palette-success);
}

.compartment-availability-total-occupied .compartment-availability-total-value {
    color: var(--mud-palette-error);
}

.compartment-availability-size-dimensions {
    margin-left: 6px;
    opacity: 0.7;
    font-size: 12px;
}

/* Compartments page: the cabinet drawing with the details of whichever compartment is picked out beside it,
   and the list one click away for the things a drawing cannot do (filtering, sorting, bulk assignment). */
.compartment-view-switch {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 8px 0 16px;
}

.compartment-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 16px;
}

.compartment-layout-visualization {
    flex: 1 1 280px;
    min-width: 260px;
}

.compartment-layout-details {
    flex: 1 1 320px;
    min-width: 280px;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    border-radius: var(--mud-default-borderradius, 4px);
    background: var(--mud-palette-surface);
}

.compartment-layout-hint {
    padding: 24px 8px;
    opacity: 0.7;
}

.compartment-layout-details-title {
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.compartment-layout-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 0 0 16px;
}

.compartment-layout-facts dt {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
    align-self: center;
}

.compartment-layout-facts dd {
    margin: 0;
    font-weight: 500;
}

.compartment-layout-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The door the details belong to, ringed so the two halves of the view stay tied together. */
.locker-visualization-door-selected .locker-visualization-door-border {
    stroke: var(--mud-palette-primary);
    stroke-width: 2.4;
}

.locker-visualization-door-selected .locker-visualization-state-tint {
    opacity: 0.3;
}

/* CompartmentSizeDoorSelectControl - draws each compartment size as a door scaled to its real height.
   Unselected doors are neutral gray; the selected door fills with the tenant's own Primary color, as
   configured through IApplicationUIConfigurationService (the same color driving the appbar), so a
   retailer with its own branding gets that color here too, with no extra wiring needed. */
.compartment-size-door-picker-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
}

/* Always wraps onto extra rows instead of ever scrolling sideways, on any screen width. */
.compartment-size-door-shelf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 22px 16px;
    border-bottom: 3px solid var(--mud-palette-gray-default, #9e9e9e);
    padding: 0 6px 12px 2px;
}

.compartment-size-door-shelf.disabled {
    opacity: 0.6;
}

.compartment-size-door-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    flex: 0 0 auto;
    outline: none;
}

.compartment-size-door-slot[aria-disabled="true"] {
    cursor: not-allowed;
}

.compartment-size-door-slot:hover:not(.unavailable):not(.selected) {
    transform: translateY(-3px);
}

.compartment-size-door-slot:focus-visible .compartment-size-box {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.compartment-size-box-wrap {
    position: relative;
    display: flex;
    align-items: flex-end;
}

/* The box itself is inline SVG whose polygon coordinates are computed in the component (a cabinet
   projection), so the three faces always meet exactly regardless of the compartment's proportions.
   All the CSS does is colour them: one fill for all three faces, with the top lightened and the side
   darkened so the shape reads as solid. */
.compartment-size-box {
    display: block;
    overflow: visible;
}

.compartment-size-box polygon {
    fill: var(--mud-palette-gray-light, #e8e8e8);
    transition: fill .15s ease;
}

.compartment-size-box-top {
    filter: brightness(1.14);
}

.compartment-size-box-side {
    filter: brightness(.8);
}

.compartment-size-door-slot:hover:not(.unavailable):not(.selected) .compartment-size-box {
    filter: brightness(.97);
}

.compartment-size-door-slot.selected:hover .compartment-size-box {
    filter: brightness(1.08);
}

.compartment-size-box-check {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mud-palette-primary, #0b4251);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--mud-palette-surface);
}

.compartment-size-door-code {
    font-weight: 700;
    font-size: 12px;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    margin-top: 10px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Dimensions and availability sit under the box rather than on it, so they never have to fit inside a
   small compartment's face. */
.compartment-size-door-dims {
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Static fallback only - DynamicStyles.razor overrides the fill with !important, using
   AppState.Palette.Primary (sourced from IApplicationUIConfigurationService), so a retailer with their own
   configured theme gets the selected box in their own colour instead of this default. The top/side faces
   need no colour logic of their own - their brightness() filter just lightens/darkens whatever fill they
   are given. */
.compartment-size-door-slot.selected .compartment-size-box polygon {
    fill: var(--mud-palette-primary, #0b4251);
}

.compartment-size-door-slot.selected .compartment-size-door-code {
    color: var(--mud-palette-primary, #0b4251);
}

/* A size with nothing free is hatched rather than tinted - the previous near-white fill was too easy to
   mistake for an ordinary box. The fill itself is set inline on the polygons (it points at the SVG pattern
   declared by the control), so only the outline is styled here. */
.compartment-size-door-slot.unavailable .compartment-size-box polygon {
    stroke: var(--mud-palette-gray-darker, #4a4a4a);
    stroke-width: 1;
}

.compartment-size-box-defs {
    position: absolute;
    width: 0;
    height: 0;
}

.compartment-size-hatch-bg {
    fill: var(--mud-palette-gray-default, #9e9e9e);
}

.compartment-size-hatch-line {
    stroke: var(--mud-palette-gray-darker, #4a4a4a);
    stroke-width: 3;
}

.compartment-size-door-slot.unavailable .compartment-size-door-code {
    color: var(--mud-palette-text-secondary);
}

.compartment-size-door-avail {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    margin-top: 6px;
}

.reserve-actions {
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* =======================================================================
   Modernised not-logged-in screens (Login, Register, Password recovery,
   Confirm email/phone, Contact us, About, Privacy, GDPR, anonymous Pickup,
   Update).

   Scope: EVERY rule below is under `.auth-modern`, a class emitted on the
   layout container ONLY when the host is not the Locker.Web kiosk AND the
   visitor is not logged in - by NotLoggedInLayout always, and by MainLayout
   when its role is still null (Contact us / About / Privacy / GDPR have no
   `@layout` of their own and so render under MainLayout even for anonymous
   visitors). It never appears on logged-in pages or in Locker.Web, so nothing
   here can regress the shared `.edit-form` / `#*-form` / `.version-info` rules
   defined earlier in this file - those are only overridden, never edited.
   Palette values come from the `--app-*` custom properties emitted by
   DynamicStyles.razor (tenant/white-label aware).
   ======================================================================= */

/* Full-viewport backdrop. Fixed so it ignores MudMainContent's pt-16/px-16 and
   bleeds under everything except the app bar. Kept light and airy - a pale wash
   with a faint brand tint - so the dark app bar reads as an intentional header
   and the white card floats cleanly above it. */
.auth-modern::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background: #f3f5f8; /* fallback for no color-mix() */
    background:
        radial-gradient(900px 480px at 100% 0%,
            color-mix(in srgb, var(--app-primary, #0b4251) 12%, transparent) 0%,
            transparent 70%),
        radial-gradient(1000px 620px at 0% 100%,
            color-mix(in srgb, var(--app-primary, #0b4251) 8%, transparent) 0%,
            transparent 68%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--app-primary, #0b4251) 4%, #ffffff) 0%,
            color-mix(in srgb, var(--app-primary, #0b4251) 9%, #eef1f5) 100%);
}

/* The container id differs by layout - #not-logged-container (NotLoggedInLayout,
   used by Login/Register/recovery/confirm/pickup) or #logged-in-container
   (MainLayout, used by Contact us / About / Privacy / GDPR, which also render
   for anonymous visitors). Both carry `.auth-modern` only when logged out. */
#not-logged-container.auth-modern,
#logged-in-container.auth-modern {
    position: relative;
    display: flex;
    align-items: center;
    /* `safe center` keeps a card that is taller than the viewport from being
       centred up behind the fixed app bar - it falls back to start-alignment
       and lets the page scroll instead. */
    align-items: safe center;
    justify-content: center;
    /* MudMainContent adds 64px (pt-16) and the parent .mud-container 24px (mt-6)
       of offset above this element, so subtract both - otherwise the card is
       centred against a box 88px taller than the space that is actually visible
       and drifts down past the viewport. */
    min-height: calc(100vh - 88px);
    min-height: calc(100dvh - 88px);
    /* !important to beat the id-level `padding: 0 !important` reset that the
       max-width:640.98px block sets on #not-logged-container. */
    padding: 24px 16px 40px !important;
}

.auth-modern > * {
    position: relative;
    z-index: 1;
}

.auth-modern #not-logged-in-form,
.auth-modern #logged-in-form,
.auth-modern #not-logged-in-form .main,
.auth-modern #logged-in-form .main {
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    background: transparent;
}

/* ---- The floating card (covers EditFormNarrowCenter AND EditFormCenter) ---- */
.auth-modern .edit-form {
    max-width: 460px;
    width: 100%;
    margin-inline: auto;
    padding: 40px 36px 28px;
    background: var(--app-surface, #ffffff);
    border: 1px solid rgba(16, 24, 40, .06);
    border-radius: 16px;
    box-shadow: 0 12px 34px -12px rgba(16, 24, 40, .18), 0 4px 12px -6px rgba(16, 24, 40, .10);
    align-self: center;
}

/* Collapse the Bootstrap grid so fields fill the card edge to edge. */
.auth-modern .edit-form .row {
    margin: 0 0 16px;
    min-height: 0 !important;
}

.auth-modern .edit-form .row:last-child {
    margin-bottom: 0;
}

.auth-modern .edit-form .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
}

.auth-modern .edit-form .control-row,
.auth-modern #not-logged-in-form .edit-form .control-row,
.auth-modern #logged-in-form .edit-form .control-row,
.auth-modern #not-logged-in-form .edit-form .button-row,
.auth-modern #logged-in-form .edit-form .button-row {
    margin: 0;
    min-height: 0 !important;
}

/* ---- Title ---- */
.auth-modern {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.auth-modern .page-title {
    margin-bottom: 24px;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ---- Inputs ---- */
/* Height is left at the MudBlazor filled-input default on purpose - only the
   label weight is nudged. */
.auth-modern .mud-input-control {
    width: 100%;
}

.auth-modern .mud-input-label {
    font-weight: 500;
}

.auth-modern .validation-message {
    font-size: .8rem;
}

/* ---- Buttons ---- */
/* column-reverse puts the submit button (last in DOM) visually above the
   forgot-password / cancel link, with no markup change. */
.auth-modern .button-row .control-row {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
}

.auth-modern .button-row .mud-button {
    width: 100%;
    white-space: normal;
    text-transform: none;
    font-weight: 600;
}

.auth-modern .button-row .float-end {
    float: none !important;
}

.auth-modern .button-row .mud-button-filled-primary {
    min-height: 48px;
    border-radius: 10px;
}

/* Secondary actions (forgot password, cancel, back) render as quiet text links. */
.auth-modern .button-row .mud-button-filled-default {
    background: transparent;
    box-shadow: none;
    color: var(--app-primary, #0b4251);
}

.auth-modern .button-row .mud-button-filled-default:hover {
    background: color-mix(in srgb, var(--app-primary, #0b4251) 8%, transparent);
}

/* Divider + register row. */
.auth-modern .fullbutton {
    margin: 24px 0 0 !important;
}

.auth-modern .fullbutton .control-row {
    display: block;
}

.auth-modern .fullbutton .mud-button {
    width: 100%;
}

/* ---- Inline error alert ---- */
.auth-modern .error-content {
    margin: 0 0 16px;
    border-radius: 10px;
}

.auth-modern .error-content .mud-alert-message {
    padding: 10px 0;
}

/* ---- Version / privacy footer ---- */
/* Inside the card (Login, Register, recovery, confirm, pickup). */
.auth-modern .edit-form .version-info {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid color-mix(in srgb, var(--app-text, #2f2a2b) 12%, transparent);
    font-size: .78rem;
    line-height: 1.5;
    color: var(--app-text-secondary, #5f5a5b);
}

.auth-modern .edit-form .version-info .privacy-link {
    color: var(--app-text-secondary, #5f5a5b) !important;
}

/* Outside the card, sitting on the light backdrop (Update.razor). */
.auth-modern .main > .version-info {
    margin-top: 20px;
    text-align: center;
    font-size: .78rem;
}

.auth-modern .main > .version-info,
.auth-modern .main > .version-info .privacy-link {
    color: var(--app-text-secondary, #5f5a5b) !important;
}

/* ---- Mobile: neutralise the display:table centring hack from the
   max-width:640.98px block above and let the card breathe edge to edge. ---- */
@media (max-width: 640.98px) {
    #not-logged-container.auth-modern,
    #logged-in-container.auth-modern {
        /* On mobile the shared rule above zeroes MudMainContent's padding-top
           while the app bar stays position:fixed (56px). Only the parent
           .mud-container's 24px margin-top is left above this element, so pad
           the top enough to clear the bar with breathing room, and base
           min-height on that same 24px offset so the card fills - but never
           overflows - the visible viewport. */
        min-height: calc(100vh - 24px);
        min-height: calc(100dvh - 24px);
        padding: 48px 12px 32px !important;
    }

    .auth-modern #not-logged-in-form,
    .auth-modern #logged-in-form,
    .auth-modern #not-logged-in-form .main,
    .auth-modern #logged-in-form .main {
        display: block;
        text-align: left;
        vertical-align: baseline;
        padding: 0;
    }

    .auth-modern .edit-form {
        max-width: 440px;
        padding: 28px 22px 20px;
        border-radius: 14px;
    }

    .auth-modern .button-row button:last-child:not(:only-child) {
        margin-top: 0;
    }
}

/* =======================================================================
   Modernised Privacy Policy / GDPR (Data Management Policy) pages.

   Scope: every rule below is under `.privacy-modern`, a class put on the
   EditFormCenter container by PrivacyPolicyPage.razor and GdprPage.razor.
   It only ever widens and restyles that one document card - the shared
   `.edit-form` / `.version-info` rules earlier in this file are overridden,
   never edited, so no other page is affected. Colours come from the
   MudBlazor palette custom properties, so the page follows the active
   (white-label) theme.
   ======================================================================= */
.edit-form.privacy-modern {
    max-width: 820px;
    width: 100%;
    margin-inline: auto;
    padding: 32px clamp(16px, 5vw, 48px) 28px;
    text-align: left;
    background: var(--mud-palette-surface, #ffffff);
    border: 1px solid var(--mud-palette-lines-default, rgba(16, 24, 40, .1));
    border-radius: 16px;
    box-shadow: 0 12px 34px -12px rgba(16, 24, 40, .12), 0 3px 10px -6px rgba(16, 24, 40, .08);
}

.privacy-modern .page-title {
    text-align: left;
    margin-bottom: 6px;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.privacy-modern .privacy-doc {
    font-size: 1rem;
    color: var(--mud-palette-text-primary, #1f1f1f);
}

.privacy-modern .privacy-updated {
    display: inline-block;
    margin-bottom: 22px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(127, 127, 127, .14);
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, .6));
    font-size: .8rem;
    font-weight: 500;
}

.privacy-modern .privacy-lead {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.7;
}

.privacy-modern .privacy-section {
    margin-top: 28px;
}

.privacy-modern .privacy-section > h2 {
    margin: 0 0 10px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mud-palette-text-primary, #1a1a1a);
}

.privacy-modern .privacy-section p {
    margin: 0 0 12px;
    line-height: 1.7;
}

.privacy-modern .privacy-section p:last-child {
    margin-bottom: 0;
}

.privacy-modern .privacy-subheading {
    margin: 16px 0 6px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, .6));
}

.privacy-modern .privacy-list {
    margin: 0 0 12px;
    padding-left: 1.3rem;
}

.privacy-modern .privacy-list li {
    margin-bottom: 8px;
    line-height: 1.65;
}

.privacy-modern .privacy-list li:last-child {
    margin-bottom: 0;
}

.privacy-modern .privacy-list li strong {
    font-weight: 650;
}

.privacy-modern .privacy-contact {
    padding: 18px 20px;
    border-radius: 12px;
    background: var(--mud-palette-background-grey, #f4f6f8);
    border: 1px solid var(--mud-palette-lines-default, rgba(16, 24, 40, .08));
}

.privacy-modern .privacy-contact > h2 {
    font-size: 1.1rem;
}

.privacy-modern .version-info {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    font-size: .8rem;
}

@media (max-width: 640.98px) {
    .edit-form.privacy-modern {
        padding: 20px 16px 22px;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }

    .privacy-modern .privacy-lead {
        font-size: 1rem;
    }

    .privacy-modern .privacy-section > h2 {
        font-size: 1.1rem;
    }
}

/* =======================================================================
   Modernised logged-in Portal chrome: the top app bar, the left main-menu
   drawer, the right Settings drawer and the version footer.

   Scope: EVERY rule below is under `.portal-chrome`, a class emitted by
   Layout.razor on the outer layout `<div>` ONLY when the visitor is logged
   in AND the host is not the Locker.Web kiosk / LockerApp role
   (`IsLoggedAndNotLockerApp`). The MudAppBar and both MudDrawers all render
   inside that div, so this one class scopes all of them and never touches
   anonymous pages, the kiosk, or shared list/form pages. Colours come from
   the MudBlazor `--mud-palette-*` custom properties, so both themes and
   white-label retailer palettes follow along. Same containment approach as
   `.auth-modern` / `.privacy-modern` above.
   ======================================================================= */

/* ---- App bar ---- */
/* Elevation is set to 0 in Layout.razor for this state; add back a soft,
   modern shadow instead of MudBlazor's hard elevation-3 stack. */
.portal-chrome .mud-appbar {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .14), 0 2px 6px -2px rgba(16, 24, 40, .10);
}

/* Global `.mud-toolbar { padding: 0 40px }` is a lot on a phone - tighten it,
   and keep a comfortable inset on wider screens. */
.portal-chrome .mud-toolbar {
    padding-left: 12px;
    padding-right: 12px;
}

@media (min-width: 641px) {
    .portal-chrome .mud-toolbar {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ---- Drawers (shared) ---- */
.portal-chrome .mud-drawer {
    border-color: var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
}

/* Header keeps the app bar's colour (the `mud-appbar` class supplies the
   background + text colour); this rule re-establishes a horizontal, vertically
   centred layout (the `mud-appbar` class otherwise forces flex-direction:column,
   which pins the title to the top), matches the app bar's height, and adds the
   same soft bottom shadow. Used by both drawers. */
.portal-chrome .nav-menu-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: var(--mud-appbar-height, 64px);
    padding: 0 24px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .14), 0 2px 6px -2px rgba(16, 24, 40, .10);
}

.portal-chrome .nav-menu-title {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--mud-palette-appbar-text, #ffffff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Main menu drawer ---- */
/* `.mud-drawer-content` is already display:flex/column/height:100%, so the
   link list simply takes the remaining space and the footer pins itself. */
.portal-chrome .nav-menu-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px 10px 4px;
}

.portal-chrome .nav-menu-drawer .mud-navmenu .mud-nav-link {
    margin: 2px 0;
    border-radius: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.portal-chrome .nav-menu-drawer .mud-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
}

/* Drop MudBlazor's inline-end accent bar entirely and mark the active item with
   just a primary-tinted fill + bolder primary text. */
.portal-chrome .nav-menu-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    border-inline-end: none;
    box-shadow: none;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.14);
    font-weight: 600;
}

.portal-chrome .nav-menu-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--mud-palette-primary);
}

/* Pinned footer carrying the version / copyright / privacy links. */
.portal-chrome .nav-menu-footer {
    flex: 0 0 auto;
    padding: 14px 18px 16px;
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    font-size: .72rem;
    line-height: 1.55;
    text-align: center;
}

/* DisplayVersionInfo leads with a <br> before the privacy links - drop it so
   the footer doesn't start with a blank line. */
.portal-chrome .nav-menu-footer br:first-child {
    display: none;
}

.portal-chrome .nav-menu-footer .version-info-version {
    display: block;
    white-space: pre-line;
    margin-bottom: 2px;
}

.portal-chrome .nav-menu-footer,
.portal-chrome .nav-menu-footer span,
.portal-chrome .nav-menu-footer a,
.portal-chrome .nav-menu-footer .privacy-link {
    color: var(--mud-palette-text-secondary) !important;
}

/* ---- Settings drawer ---- */
.portal-chrome .settings-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.portal-chrome .settings-content .settings-row {
    margin: 0;
}

.portal-chrome .settings-content .mud-input-control,
.portal-chrome .settings-content .language-menu,
.portal-chrome .settings-content .language-row {
    width: 100%;
}

/* Profile card - replaces the old 250px avatar inside a bare MudButton. */
.portal-chrome .settings-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    text-align: left;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    border-radius: 12px;
    cursor: pointer;
    transition: box-shadow .15s ease;
}

.portal-chrome .settings-profile-card:hover {
    box-shadow: 0 6px 18px -8px rgba(16, 24, 40, .30);
}

.portal-chrome .settings-profile-card .mud-avatar {
    width: 52px;
    height: 52px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.portal-chrome .settings-profile-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.portal-chrome .settings-profile-name {
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-chrome .settings-profile-role {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

.portal-chrome .settings-profile-chevron {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
}

.portal-chrome .settings-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.portal-chrome .settings-section-title {
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 640.98px) {
    .portal-chrome .settings-content {
        padding: 12px;
        gap: 18px;
    }

    .portal-chrome .nav-menu-body {
        padding: 8px 8px 4px;
    }
}

/* =======================================================================
   Modernised Administration page (SuperAdministrator only).

   Scope: every rule is under `.administration-modern`, put on the page
   wrapper by `AdministrationPage.razor` and on each tab's `EditFormCenter`
   card. Restyles MudTabs into a compact pill group, tidies each tab's card
   and adds contextual hint text. Colours use `--mud-palette-*` so both
   themes follow. Same containment approach as `.auth-modern` /
   `.privacy-modern` / `.portal-chrome`.
   ======================================================================= */
.administration-modern .administration-tabs {
    max-width: 720px;
    margin: 0 auto;
}

/* Pill-style tab strip. MudBlazor keeps horizontal scroll buttons when the
   tabs overflow (fine on a phone - they stay reachable); MinimumTabWidth="0px"
   lets them shrink to their content first so 4 short tabs usually fit. */
.administration-modern .administration-tabs .mud-tabs-tabbar {
    background: var(--mud-palette-background-grey, rgba(127, 127, 127, .10));
    border-radius: 12px;
    padding: 4px;
}

.administration-modern .administration-tabs .mud-tabs-tabbar-inner {
    min-height: 0;
}

.administration-modern .administration-tabs .mud-tab {
    min-height: 40px;
    padding: 6px 14px;
    border-radius: 9px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.administration-modern .administration-tabs .mud-tab.mud-tab-active {
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .16);
}

/* The active pill fill is the indicator - drop MudBlazor's sliding underline. */
.administration-modern .administration-tabs .mud-tab-slider {
    display: none;
}

.administration-modern .administration-tabs .mud-tabs-panels {
    padding-top: 22px;
}

/* Each tab's card (EditFormCenter renders `.edit-form` + our class on one div). */
.administration-modern .edit-form {
    max-width: 560px;
    margin-inline: auto;
    padding: 24px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default, rgba(16, 24, 40, .1));
    border-radius: 14px;
    box-shadow: 0 8px 24px -14px rgba(16, 24, 40, .18);
}

.administration-modern .administration-hint {
    margin: 0 0 18px;
    color: var(--mud-palette-text-secondary);
    font-size: .9rem;
    line-height: 1.5;
}

.administration-modern .administration-hint-warning {
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--mud-palette-text-primary);
    background: rgba(var(--mud-palette-warning-rgb), 0.12);
    border: 1px solid rgba(var(--mud-palette-warning-rgb), 0.35);
}

.administration-modern .administration-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.administration-modern .administration-actions .mud-button {
    flex: 1 1 auto;
}

.administration-modern .administration-image-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Make the native file input read as a styled control rather than a raw
   browser widget. */
.administration-modern .administration-image-upload {
    font: inherit;
    color: var(--mud-palette-text-secondary);
    max-width: 100%;
}

.administration-modern .administration-image-upload::file-selector-button {
    margin-right: 12px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text, #ffffff);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.administration-modern .administration-image-upload::file-selector-button:hover {
    filter: brightness(.94);
}

@media (max-width: 640.98px) {
    .administration-modern .edit-form {
        padding: 18px 16px;
        border-radius: 12px;
    }

    .administration-modern .administration-actions .mud-button {
        flex-basis: 100%;
    }
}

/* =======================================================================
   Modernised Profile (`/Profile`) and Change Password (`/ChangePassword`)
   pages.

   Scope: every rule under `.profile-modern`, passed by ProfilePage.razor and
   ChangePasswordPage.razor to their `EditFormCenter` / `EditFormNarrowCenter`
   (`.edit-form` + this class on one div). ProfilePage also carries
   `.profile-modern-wide` for its two-column layout. Gives both forms a
   floating card, a tighter field rhythm (the shared `.edit-form .control-row`
   forces a 96px min-height that reads as very airy) and a cleaner button row.
   Colours use `--mud-palette-*`. Same containment approach as `.auth-modern`
   / `.privacy-modern` / `.administration-modern`.
   ======================================================================= */
.edit-form.profile-modern {
    max-width: 560px;
    width: 100%;
    margin-inline: auto;
    padding: 28px clamp(16px, 4vw, 32px) 24px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default, rgba(16, 24, 40, .1));
    border-radius: 16px;
    box-shadow: 0 12px 34px -14px rgba(16, 24, 40, .16), 0 3px 10px -6px rgba(16, 24, 40, .08);
}

.edit-form.profile-modern.profile-modern-wide {
    max-width: 760px;
}

.profile-modern .page-title {
    margin-bottom: 22px;
    font-size: clamp(1.35rem, 3.5vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* The shared `.edit-form .control-row { min-height: 96px }` / `#logged-in-form
   .row { min-height: 96px }` rules make every field row very tall - let rows
   size to content with a consistent gap instead. */
.edit-form.profile-modern .row {
    min-height: 0 !important;
}

.profile-modern .control-row,
.profile-modern .control-row-checkbox,
.profile-modern .control-row-textarea {
    min-height: 0;
    margin: 0 0 14px;
}

.profile-modern .mud-input-control {
    width: 100%;
}

/* The button row keeps the project's standard `.float-end` styling (Cancel
   left, primary floats right). Only widen its column wrapper to the full card:
   the shared markup puts the buttons in a half-width, centred `.col-lg-6`
   (Profile) / `.col-lg-8` (Change Password), which reads as a short strip
   floating mid-card here and, on the narrower Change Password card, is too
   tight for "Cancel" + "Change password" to sit on one line. */
.profile-modern .button-row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

/* "Delete profile" - set apart from the edit fields as a small danger zone. */
.profile-modern .profile-danger-item {
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default, rgba(16, 24, 40, .1));
}

.profile-modern .profile-danger-item .mud-button {
    text-transform: none;
}

@media (max-width: 640.98px) {
    .edit-form.profile-modern,
    .edit-form.profile-modern.profile-modern-wide {
        max-width: 100%;
        padding: 20px 16px;
        border-radius: 14px;
    }
}

/* =======================================================================
   Avatar dropdown menu in the app bar (Layout.razor). MudMenu's popover
   renders at the document root via MudPopoverProvider, so this is scoped by
   the menu's `ListClass="profile-menu-list"` rather than `.portal-chrome`.
   Adds a name/email header, groups items with dividers, gives every row an
   icon + a comfortable touch target, and marks Log out in the error colour.
   ======================================================================= */
.profile-menu-list {
    min-width: 236px;
    max-width: min(92vw, 320px);
    padding: 6px;
    box-sizing: border-box;
    /* Safety net: a global `button { white-space: nowrap }` rule (buttons
       elsewhere shouldn't wrap their label) also hits MudMenuItem's <button>,
       which kept long labels ("Notification Templates", "Download API
       Specification (Retailer)", ...) from wrapping inside the capped width
       above and forced the popover into a horizontal scrollbar. Overridden
       below so items wrap instead; this hides the scrollbar in case anything
       else still overflows. */
    overflow-x: hidden;
}

.profile-menu-list .profile-menu-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px 10px;
}

.profile-menu-list .profile-menu-name {
    font-weight: 600;
    font-size: .95rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-menu-list .profile-menu-email {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-menu-list .profile-menu-divider {
    margin: 6px 4px;
}

.profile-menu-list .mud-menu-item {
    border-radius: 8px;
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
}

.profile-menu-list .mud-menu-item .mud-menu-item-icon {
    margin-inline-end: 12px;
    color: var(--mud-palette-text-secondary) !important;
}

.profile-menu-list .mud-menu-item .mud-menu-item-text {
    margin: 0;
    font-size: .9rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.profile-menu-list .profile-menu-logout .mud-menu-item-text {
    color: var(--mud-palette-error);
    font-weight: 600;
}

.profile-menu-list .profile-menu-logout .mud-menu-item-icon {
    color: var(--mud-palette-error) !important;
}

/* =======================================================================
   Titled form sections.

   `FormSection.razor` renders these. The ReservePage originally hand-rolled
   the same card as `.reserve-section`, which is kept as an alias so that
   page keeps its exact look.
   ======================================================================= */

.form-section,
.reserve-section {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 16px 18px 4px;
    margin-bottom: 14px;
}

.form-section-title,
.reserve-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}

/* =======================================================================
   Modernised entity add/edit forms (Locker, Company, Retailer, User,
   Locker type, Manufacturer, plus the small configuration forms).

   Scope: every rule below is under `.edit-form-modern`, a class each edit
   template passes to `EditFormCenter` / `EditFormNarrowCenter`, so it lands
   on the same div as the shared `.edit-form`. Nothing here targets MudBlazor
   control internals - only the wrapper rows this project owns - so the
   controls keep their stock appearance.

   Two things it does:
   1. Gives the `AdvancedViewSwitchControl` a right-aligned header row.
   2. Undoes the fixed `.control-row { min-height: 96px }` rhythm on small
      screens, where reserving ~96px per field turns a form into a very long
      scroll. On desktop the original rhythm is left alone.
   ======================================================================= */

.edit-form-modern .edit-form-view-mode {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 6px;
}

/* The switch label is the mode name, so let it read as a control label
   rather than as body copy. */
.edit-form-modern .edit-form-view-mode-switch {
    margin: 0;
}

/* A section that only holds an Addressbox already provides its own spacing. */
.edit-form-modern .form-section > .row:first-child {
    margin-top: 0;
}

.edit-form-modern .form-section:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    /* Let each field take the height it needs. Without this a Basic view of
       ~8 fields is still ~800px tall on a phone purely from reserved space. */
    .edit-form-modern .control-row,
    .edit-form-modern .control-row-checkbox,
    .edit-form-modern .control-row-textarea {
        min-height: 0;
        margin-bottom: 14px;
    }

    .edit-form-modern .form-section,
    .edit-form-modern .reserve-section {
        padding: 14px 14px 0;
        border-radius: 12px;
    }

    .edit-form-modern .form-section > .row,
    .edit-form-modern .form-section > .row > [class*="col-"] {
        margin-inline: 0;
        padding-inline: 0;
    }

    .edit-form-modern .page-title {
        margin-bottom: 12px;
    }
}

.template-entities-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 12px;
}

.template-entity-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    border-radius: 16px;
    font-size: 13px;
    cursor: default;
}

.template-entity-badge code {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.template-entity-badge-type {
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, .6));
    font-size: 11px;
}