/* 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 color-mix(in srgb, var(--mud-palette-text-primary) 16%, transparent);
    border-radius: var(--portal-radius-lg);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .10), 0 8px 30px rgba(0, 0, 0, .08);
}
[data-theme="dark"] .portal-save-bar { box-shadow: 0 -6px 28px rgba(0, 0, 0, .45), 0 8px 30px rgba(0, 0, 0, .3); }
.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; }
/* Статус делит строку с кнопками, пока ему остаётся хотя бы 120 px, а его текст переносится на вторую строку —
   две строки укладываются в высоту кнопки: на телефоне панель с одной кнопкой не занимает пятую часть экрана. */
.portal-save-status { display: inline-flex; flex: 1 1 120px; align-items: center; gap: 8px; min-width: 0; color: var(--mud-palette-text-secondary); font-size: 12px; line-height: 1.35; }
.portal-save-status > span { min-width: 0; overflow-wrap: anywhere; }
.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 { gap: 8px; }
}
@media (max-width: 599.98px) and (orientation: landscape) {
    :root { --portal-sticky-top: var(--header-h, calc(var(--mud-appbar-height, 64px) * .75)); }
}