html, body { height: 100%; margin: 0; padding: 0; }
/* Едно място, цялото приложение (вкл. модалите — те са позиционирани спрямо
   [data-modal-container], който живее вътре в .bm-app) — вместо да редим
   safe-area компенсация поотделно във всеки компонент (header/tabbar/modal),
   резервираме разстоянието тук, веднъж, за целия екран. max(24px, ...) —
   env(safe-area-inset-*) не се попълва изобщо в Android WebView-то (Capacitor,
   потвърдено на реален телефон — самият env() фикс сам по себе си нямаше
   никакъв визуален ефект), 24px е гарантиран минимум независимо дали
   инсетът реално се докладва. */
.bm-app {
    /* Изложени като custom properties (не само padding) — Modal модула
     * (modules/Modal/resources/css/modal.css .cModal-content max-height)
     * ги чете, за да НЕ надценява наличната височина с точно това
     * резервирано разстояние: caskade-ват надолу към [data-modal-container]
     * (живее вътре в .bm-app), :root fallback-ът там е 0px за модали извън
     * MobileLayout контекст. */
    --bm-safe-top:    max(24px, env(safe-area-inset-top, 0px));
    --bm-safe-bottom: max(24px, env(safe-area-inset-bottom, 0px));

    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    padding-top:    var(--bm-safe-top);
    padding-bottom: var(--bm-safe-bottom);
}

.bm-header {
    height: 56px;
}

[data-mobilelayout-header-center] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0; /* позволява на детето (bm-header-btn/title) да се свие ПОД max-width:60% (shell.html) — без него дълго заглавие просто пренасяше на 2 реда вместо да се съкрати, виж .bm-header-title */
}

.bm-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    padding: 0 0.75rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font-size: 1rem;
    min-width: 0;
    max-width: 100%;
}

/*
 * Заглавието на страницата (BmHeader.js `#renderTitle()`) — ФИКСИРАНО на
 * ЕДИН ред, с "..." при препълване (потребителски доклад 2026-09-20
 * "текстът... заглавието на страницата... в бутона за менюто" пренасяше
 * грозно, вместо да се съкрати) — `min-width:0` е задължителен на всеки
 * flex предшественик (header-center + бутона по-горе), иначе flex
 * елементите не се свиват под собствената си "естествена" ширина и
 * `text-overflow:ellipsis` никога не се задейства.
 */
.bm-header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.bm-tab   { font-size: 0.65rem; flex: 1 1 0; min-width: 0; } /* равни табове (в оригинала бяха по съдържание: flex-grow без основа) */
.bm-tab i { font-size: 1.3rem; line-height: 1; }

[data-mobilelayout-slides] > * { overscroll-behavior-y: contain; }

/* Header slot elements hidden inside slide content */
[data-mobilelayout-slides] [data-mobilelayout-header-right],
[data-mobilelayout-slides] [data-mobilelayout-header-left] { display: none; }

/* Бивши вградени стилове на shell.html и breadcrumb.html: политиката за съдържание не пуска `style=""`, затова са класове. */
.bm-preloader {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: #fff;
}
/* Предзареждане: иконата на апп-а (фавикона) и кръгче, което обикаля около нея. Не инлайн стил — CSP е `style-src 'self'`. */
.bm-preloader-ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
}
.bm-preloader-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid color-mix(in srgb, var(--uix-primary, #0d6efd) 15%, transparent);
    border-top-color: var(--uix-primary, #0d6efd);
    animation: bm-preloader-spin 0.9s linear infinite;
}
.bm-preloader-ring img { border-radius: 16px; }
@keyframes bm-preloader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .bm-preloader-ring::before { animation-duration: 3s; }
}
.bm-header-side   { min-width: 48px; }
.bm-header-middle { max-width: 60%; }
.bm-crumb-sep     { font-size: 0.65rem; }
/* Второстепенно меню под хедъра (MobileApp::switcher): лента с текущия избор и стрелка. */
.bm-switch { display: flex; justify-content: center; border-bottom: 1px solid var(--bs-border-color, #dee2e6); background: #fff; }
.bm-switch-toggle { display: flex; align-items: center; gap: 0.5rem; border: 0; background: transparent; padding: 0.4rem 1rem; font-weight: 600; max-width: 100%; }
.bm-switch-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }