/* ========================================================================
   BACK-OFFICE LOOK (2.52.0) — loaded after app.css.

   Scope: .erp-shell is the MudLayout of MainLayout, .erp-dialogs wraps its
   MudDialogProvider. Nothing here can reach PosLayout, WaiterLayout,
   LoginLayout, pos-offline.html or nara.html — they have no such wrapper.
   Colours come from the MudTheme in MainLayout.BuildTheme (palette vars), so
   light/dark and the tenant's brand colour follow automatically; this file
   only adds what the palette cannot express: shape, rhythm, hierarchy.

   Phone rules use 600px (MudBlazor's own boundary) like app.css; the tab bar
   follows the drawer's switch at Md (960px), which MainLayout drives.
   ======================================================================== */

/* ---- Fonts: the same files nara.html serves ----------------------------- */

@font-face {
    font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
    src: url('/fonts/golos/golos-var-latin.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
    src: url('/fonts/golos/golos-var-latin-ext.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
    src: url('/fonts/golos/golos-var-cyrillic.woff2') format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/fonts/playfair/playfair-500-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/fonts/playfair/playfair-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/fonts/playfair/playfair-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ------------------------------------------------------------- */

.erp-shell,
.erp-dialogs {
    /* Brand tint for selected/active states: 10% of whatever the tenant's colour is. */
    --erp-tint: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    --erp-tint-strong: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    --erp-radius: 10px;
    --erp-radius-sm: 8px;
    /* Two-layer shadow tinted with the ink colour, not grey: on the warm background a grey
       shadow reads as dirt. The 1px ring does the edge work so the blur can stay soft. */
    --erp-shadow: 0 0 0 1px var(--mud-palette-lines-default), 0 1px 2px rgba(38, 18, 22, .04), 0 4px 16px rgba(38, 18, 22, .04);
    --erp-shadow-raised: 0 0 0 1px var(--mud-palette-lines-default), 0 2px 4px rgba(38, 18, 22, .05), 0 12px 32px rgba(38, 18, 22, .10);
    --erp-tabbar-h: 62px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* MudBlazor's dark mode only swaps CSS variables; MainLayout adds erp-dark for the rest. */
.erp-shell.erp-dark,
.erp-dialogs.erp-dark {
    --erp-shadow: 0 0 0 1px var(--mud-palette-lines-default), 0 1px 2px rgba(0, 0, 0, .3);
    --erp-shadow-raised: 0 0 0 1px var(--mud-palette-lines-default), 0 12px 32px rgba(0, 0, 0, .45);
}

/* ---- App bar ------------------------------------------------------------ */

.erp-shell .erp-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
}

.erp-shell .erp-appbar .mud-toolbar {
    gap: 4px;
}

/* The brand plate: the logo has always lived on the brand colour, so it keeps one. */
.erp-brand {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    margin-left: 4px;
    border-radius: var(--erp-radius-sm);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    text-decoration: none;
    transition: filter .15s ease;
}

.erp-brand:hover { filter: brightness(1.06); }
.erp-brand:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.erp-brand img {
    display: block;
    height: 22px;
    max-width: 150px;
    object-fit: contain;
}

.erp-brand-name {
    font-weight: 600;
    font-size: .9375rem;
    white-space: nowrap;
}

/* ---- Drawer ------------------------------------------------------------- */

.erp-shell .erp-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

.erp-shell .erp-nav {
    padding: 8px 0 24px;
}

.erp-shell .erp-nav .mud-nav-link {
    margin: 1px 8px;
    width: auto;
    border-radius: var(--erp-radius-sm);
    padding: 8px 12px;
    min-height: 38px;
    font-size: .875rem;
    transition: background-color .12s ease, color .12s ease;
}

.erp-shell .erp-nav .mud-nav-link .mud-nav-link-icon,
.erp-shell .erp-nav .mud-nav-link > .mud-icon-root:first-child {
    font-size: 1.25rem;
}

.erp-shell .erp-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: var(--erp-tint);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

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

@media (hover: hover) and (pointer: fine) {
    .erp-shell .erp-nav .mud-nav-link:hover:not(.mud-nav-link-disabled) {
        background-color: var(--mud-palette-action-default-hover);
    }

    .erp-shell .erp-nav .mud-nav-link.active:hover:not(.mud-nav-link-disabled) {
        background-color: var(--erp-tint-strong);
    }
}

/* Group headers: same row, but they label a section, so they are quieter than links. */
.erp-shell .erp-nav .mud-nav-group > .mud-nav-link > .mud-nav-link-text {
    font-weight: 600;
}

/* Nested links: indent by the icon, not by MudBlazor's 48px. */
.erp-shell .erp-drawer:not(.mud-drawer--closed) .erp-nav .mud-nav-group .mud-navmenu .mud-nav-link {
    padding-left: 20px;
}

.erp-shell .erp-nav-section {
    display: block;
    margin: 14px 20px 2px;
    font-size: .6875rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.erp-shell .erp-nav > .mud-divider,
.erp-shell .erp-nav .mud-divider {
    margin: 8px 20px !important;
    border-color: var(--mud-palette-divider-light);
}

/* Mini rail (desktop, collapsed): the pill must fit a 56px rail. */
.erp-shell .mud-drawer--closed.mud-drawer-mini .erp-nav .mud-nav-link {
    margin: 1px 6px;
    padding: 8px 10px !important;
    justify-content: center;
}

.erp-shell .mud-drawer--closed.mud-drawer-mini .erp-nav-section {
    visibility: hidden;
    height: 4px;
    margin: 4px 0;
}

/* ---- Page frame --------------------------------------------------------- */

.erp-shell .erp-main {
    padding: 24px 28px 56px;
}

@media (max-width: 959.98px) {
    .erp-shell .erp-main {
        padding: 16px 16px 40px;
    }
}

@media (max-width: 600px) {
    .erp-shell .erp-main {
        padding: 12px 12px 32px;
    }
}

/* Room for the tab bar so the last row of a list is never under it. */
.erp-shell.erp-has-tabbar .erp-main {
    padding-bottom: calc(var(--erp-tabbar-h) + 24px + env(safe-area-inset-bottom, 0px));
}

/* Display face for page titles (theme H3–H5): tighten the bottom of the title row so the
   serif sits on the content instead of floating above it. */
.erp-shell .erp-main .mud-typography-h3,
.erp-shell .erp-main .mud-typography-h4,
.erp-shell .erp-main .mud-typography-h5 {
    font-feature-settings: "lnum" 1;
}

@media (max-width: 600px) {
    .erp-shell .erp-main .mud-typography-h3 { font-size: 1.75rem; }
    .erp-shell .erp-main .mud-typography-h4 { font-size: 1.5rem; }
    .erp-shell .erp-main .mud-typography-h5 { font-size: 1.3125rem; }
}

/* ---- Surfaces ------------------------------------------------------------ */

/* Every raised surface on a page gets the same hairline-and-soft-shadow treatment instead of
   Material's grey drop shadows of five different depths. */
.erp-shell .erp-main .mud-paper.mud-elevation-1,
.erp-shell .erp-main .mud-paper.mud-elevation-2,
.erp-shell .erp-main .mud-paper.mud-elevation-3,
.erp-shell .erp-main .mud-paper.mud-elevation-4,
.erp-shell .erp-main .mud-table.mud-elevation-1,
.erp-shell .erp-main .mud-table.mud-elevation-2,
.erp-shell .erp-main .mud-card.mud-elevation-1,
.erp-shell .erp-main .mud-card.mud-elevation-2 {
    box-shadow: var(--erp-shadow);
}

.erp-shell .erp-main .mud-paper.mud-elevation-6,
.erp-shell .erp-main .mud-paper.mud-elevation-8,
.erp-shell .erp-main .mud-card.mud-elevation-4 {
    box-shadow: var(--erp-shadow-raised);
}

.erp-shell .erp-main .mud-paper-outlined {
    border-color: var(--mud-palette-lines-default);
}

/* ---- Tables -------------------------------------------------------------- */

/* Figures line up in columns: the whole point of an ERP table. */
.erp-shell .erp-main .mud-table-cell,
.erp-dialogs .mud-table-cell {
    font-variant-numeric: tabular-nums;
}

.erp-shell .erp-main .mud-table-root .mud-table-head .mud-table-cell,
.erp-dialogs .mud-table-root .mud-table-head .mud-table-cell {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background-gray);
    border-bottom-color: var(--mud-palette-lines-default);
    white-space: nowrap;
}

/* Keep the rounded corners of the table on its header too. */
.erp-shell .erp-main .mud-table-root .mud-table-head .mud-table-row:first-child .mud-table-cell:first-child {
    border-top-left-radius: var(--erp-radius);
}

.erp-shell .erp-main .mud-table-root .mud-table-head .mud-table-row:first-child .mud-table-cell:last-child {
    border-top-right-radius: var(--erp-radius);
}

/* A toolbar above the header (search, filters) owns the corner instead. */
.erp-shell .erp-main .mud-table-toolbar ~ .mud-table-container .mud-table-head .mud-table-cell {
    border-radius: 0 !important;
}

.erp-shell .erp-main .mud-table-toolbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.erp-shell .erp-main .mud-table-pagination {
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ---- Buttons ------------------------------------------------------------- */

:is(.erp-shell, .erp-dialogs) .mud-button-root.mud-button {
    border-radius: var(--erp-radius-sm);
    padding-inline: 14px;
}

:is(.erp-shell, .erp-dialogs) .mud-button-filled {
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    :is(.erp-shell, .erp-dialogs) .mud-button-filled:hover {
        box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    }
}

:is(.erp-shell, .erp-dialogs) .mud-button-outlined {
    border-color: var(--mud-palette-lines-inputs);
}

:is(.erp-shell, .erp-dialogs) .mud-button-outlined.mud-button-outlined-primary {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}

/* Keyboard focus is visible everywhere in the back office. */
:is(.erp-shell, .erp-dialogs) .mud-button-root:focus-visible,
:is(.erp-shell, .erp-dialogs) .mud-nav-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ---- Inputs, chips, tabs ------------------------------------------------- */

:is(.erp-shell, .erp-dialogs) .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--erp-radius-sm);
}

:is(.erp-shell, .erp-dialogs) .mud-chip {
    font-weight: 500;
}

.erp-shell .erp-main .mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.erp-shell .erp-main .mud-tab {
    text-transform: none;
    font-weight: 550;
    letter-spacing: normal;
    min-width: 0;
}

.erp-shell .erp-main .mud-expand-panel {
    box-shadow: var(--erp-shadow);
}

/* ---- Dialogs ------------------------------------------------------------- */

.erp-dialogs .mud-dialog {
    border-radius: 14px;
    box-shadow: var(--erp-shadow-raised);
}

.erp-dialogs .mud-dialog .mud-dialog-title {
    padding: 18px 24px 10px;
}

.erp-dialogs .mud-dialog .mud-dialog-actions {
    padding: 12px 20px 16px;
    gap: 8px;
    border-top: 1px solid var(--mud-palette-divider-light);
}

/* ---- Phones -------------------------------------------------------------- */

@media (max-width: 600px) {
    /* iOS zooms the whole page into any field under 16px and never zooms back out. */
    :is(.erp-shell, .erp-dialogs) .mud-input,
    :is(.erp-shell, .erp-dialogs) .mud-input-slot,
    :is(.erp-shell, .erp-dialogs) .mud-select .mud-input-slot,
    :is(.erp-shell, .erp-dialogs) input.mud-input-root,
    :is(.erp-shell, .erp-dialogs) textarea.mud-input-root {
        font-size: 16px;
    }

    /* Thumb-sized targets: 40px is the floor for anything tappable. */
    :is(.erp-shell, .erp-dialogs) .mud-button-root.mud-button {
        min-height: 40px;
    }

    :is(.erp-shell, .erp-dialogs) .mud-icon-button.mud-icon-button-size-small {
        padding: 8px;
    }

    .erp-shell .erp-nav .mud-nav-link {
        min-height: 44px;
        font-size: .9375rem;
    }

    /* Stacked table cards (MudBlazor < 600px) as real cards: space between rows. */
    .erp-shell .erp-main .mud-xs-table .mud-table-body .mud-table-row {
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .erp-shell .erp-main .mud-xs-table .mud-table-body .mud-table-cell {
        border-bottom: 0;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .erp-shell .erp-main .mud-xs-table .mud-table-body .mud-table-row .mud-table-cell:first-child {
        padding-top: 12px;
    }

    .erp-shell .erp-main .mud-xs-table .mud-table-body .mud-table-row .mud-table-cell:last-child {
        padding-bottom: 12px;
    }

    .erp-shell .erp-main .mud-xs-table .mud-table-cell::before {
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
        font-size: .8125rem;
    }

    .erp-dialogs .mud-dialog .mud-dialog-title {
        padding: 14px 16px 8px;
    }

    .erp-dialogs .mud-dialog .mud-dialog-actions {
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    /* Full-screen dialogs (app.css) are sheets, not floating cards. */
    .erp-dialogs .mud-dialog.mud-dialog-width-md,
    .erp-dialogs .mud-dialog.mud-dialog-width-lg,
    .erp-dialogs .mud-dialog.mud-dialog-width-xl,
    .erp-dialogs .mud-dialog.mud-dialog-width-xxl {
        border-radius: 0;
        box-shadow: none;
    }
}

/* ---- Phone tab bar (MobileTabBar.razor) ---------------------------------- */

.erp-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above page content and sticky toolbars; below the temporary drawer's overlay
       (var(--mud-zindex-drawer) = 1100), dialogs and snackbars. */
    z-index: 1090;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: calc(var(--erp-tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--mud-palette-surface) 90%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.erp-tab {
    appearance: none;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.erp-tab span {
    font-size: .6875rem;
    font-weight: 500;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-tab .mud-icon-root {
    box-sizing: content-box;
    padding: 3px 16px;
    border-radius: 999px;
    transition: background-color .15s ease;
}

.erp-tab.erp-tab-active {
    color: var(--mud-palette-primary);
}

.erp-tab.erp-tab-active span {
    font-weight: 650;
}

.erp-tab.erp-tab-active .mud-icon-root {
    background: var(--erp-tint-strong);
}

.erp-tab:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -4px;
    border-radius: 12px;
}

/* Snackbars and the sticky list toolbar must clear the tab bar. */
body:has(.erp-has-tabbar) .mud-snackbar-location-bottom-left,
body:has(.erp-has-tabbar) .mud-snackbar-location-bottom-center,
body:has(.erp-has-tabbar) .mud-snackbar-location-bottom-right {
    bottom: calc(var(--erp-tabbar-h, 62px) + 12px + env(safe-area-inset-bottom, 0px));
}

@media print {
    .erp-tabbar { display: none; }
    .erp-shell .erp-appbar { backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    .erp-shell *,
    .erp-tabbar * {
        transition: none !important;
    }
}

/* ========================================================================
   SIGN-IN SCREENS (AuthShell.razor — login, 2FA; LoginLayout adds .erp-auth)

   Brand panel in the tenant colour + the form on the back office's warm
   paper. The panel exists because the uploaded logo is made for the brand
   colour: on the old white card the Nara mark was white-on-white.
   ======================================================================== */

.erp-auth {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.erp-auth .auth {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    min-height: 100vh;
    min-height: 100dvh;
}

.erp-auth .auth-brand {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    overflow: hidden;
    color: var(--mud-palette-primary-text);
    background:
        radial-gradient(120% 90% at 0% 100%, rgba(0, 0, 0, .22) 0%, transparent 60%),
        radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, .14) 0%, transparent 55%),
        var(--mud-palette-primary);
}

.erp-auth .auth-brand-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    max-width: 360px;
}

.erp-auth .auth-logo {
    display: block;
    width: min(260px, 100%);
    max-height: 120px;
    object-fit: contain;
}

.erp-auth .auth-brand-icon {
    font-size: 3.5rem;
}

.erp-auth .auth-brand-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.2;
}

.erp-auth .auth-tagline {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.4;
    opacity: .9;
}

.erp-auth .auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.erp-auth .auth-card {
    width: 100%;
    max-width: 380px;
}

.erp-auth .auth-title {
    margin: 0 0 4px;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    font-size: 2.25rem;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.erp-auth .auth-sub {
    margin: 0 0 28px;
    font-size: .9375rem;
    color: var(--mud-palette-text-secondary);
}

.erp-auth .mud-input.mud-input-outlined {
    background: var(--mud-palette-surface);
}

.erp-auth .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 8px;
}

.erp-auth .mud-button-root.mud-button {
    border-radius: 8px;
}

.erp-auth .mud-button-filled {
    box-shadow: none;
}

.erp-auth .auth-submit {
    min-height: 48px;
    font-size: 1rem;
}

.erp-auth .auth-foot {
    margin: 24px 0 0;
    text-align: center;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

.erp-auth .mud-button-root:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Phone / portrait tablet: the panel becomes a band above the form. */
@media (max-width: 899.98px) {
    .erp-auth .auth {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    .erp-auth .auth-brand {
        padding: 36px 24px 32px;
    }

    .erp-auth .auth-brand-inner { gap: 10px; }
    .erp-auth .auth-logo { width: min(180px, 70%); max-height: 72px; }
    .erp-auth .auth-tagline { font-size: 1rem; }

    .erp-auth .auth-main {
        align-items: flex-start;
        padding: 28px 20px 40px;
    }

    .erp-auth .auth-title { font-size: 1.875rem; }
    .erp-auth .auth-sub { margin-bottom: 22px; }

    /* iOS zooms into any field under 16px. */
    .erp-auth input.mud-input-root { font-size: 16px; }
}

/* Шема за книжење: изборот на конто во матрицата мора да ја покаже шифрата и почетокот на називот
   (без ова табелата ги збива во „7…“). Под 600px табелата е картичка — без min-width (правило). */
@media (min-width: 600px) {
    .erp-shell .erp-account-picker { min-width: 160px; }
}