/* Layouts can override --portal-sticky-top for their fixed header. */
:root { --portal-sticky-top: var(--header-h, var(--mud-appbar-height, 64px)); }
/* Панель сохранения стоит после полей и закреплена у нижнего края окна: действия всегда под рукой. */
.portal-save-bar {
    position: sticky;
    bottom: 16px;
    z-index: 10;
    margin: 24px 0 0;
    padding: 12px 20px;
    min-width: 0;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
}
.portal-save-bar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.portal-save-bar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-left: auto; }
.portal-save-bar-feedback { margin-top: 12px; max-height: 30dvh; overflow-y: auto; overflow-wrap: anywhere; }
.portal-save-status { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--mud-palette-text-secondary); font-size: 12px; }
.portal-save-status .mud-icon-root { font-size: 18px; flex-shrink: 0; }
.portal-save-status .mud-progress-circular { width: 18px !important; height: 18px !important; flex-shrink: 0; }
@media (max-width: 599.98px) {
    :root { --portal-sticky-top: var(--header-h, calc(var(--mud-appbar-height, 64px) * .875)); }
    .portal-save-bar { bottom: 8px; padding: 10px 12px; }
    .portal-save-bar-actions { width: 100%; gap: 8px; }
}
@media (max-width: 599.98px) and (orientation: landscape) {
    :root { --portal-sticky-top: var(--header-h, calc(var(--mud-appbar-height, 64px) * .75)); }
}

/* Всплывающие сообщения появляются внизу, там же, где панель: на страницах с панелью они встают над ней,
   чтобы «Изменения сохранены» не закрывало кнопки. */
body:has(.portal-save-bar) [class*="mud-snackbar-location-bottom"] { bottom: 104px; }
@media (max-width: 599.98px) {
    body:has(.portal-save-bar) [class*="mud-snackbar-location-bottom"] { bottom: 136px; }
}