/* bpop UI-shell (02.08.2026) — design tokens + responsive fixes (UI-ТЗ П1/П4/П5).
   Feature-scoped: правки только представления, бизнес-логика не затронута. */

:root {
    --rz-space-1: 4px; --rz-space-2: 8px; --rz-space-3: 12px; --rz-space-4: 16px; --rz-space-6: 24px;
    /* 15.08.2026: было 12px. Пресет дизайн-системы даёт 10px, и на них же
       переведена публичная часть (--radius в resources/css/site.css).
       Без этой правки карточки панели и сайта скруглены по-разному. */
    --rz-radius: 10px;
    --rz-touch: 44px;
    /* 15.08.2026: статусы приведены к дизайн-системе (site.css, секция 2.3).
       --rz-status-warn был #d97706 — это фирменный цвет, он же --primary.
       Фирменный цвет не может быть статусом «предупреждение»: бейдж
       «ожидает оплаты» оказался бы того же цвета, что кнопка «Заселить».
       В дизайн-системе янтарного среди статусов нет вовсе, ожидание синее,
       поэтому warn указывает на ту же синюю, что и info. Оба токена сейчас
       ни в одном правиле не используются — объявлены впрок 02.08.2026. */
    --rz-status-ok: #047857; --rz-status-warn: #1d4ed8; --rz-status-danger: #b91c1c; --rz-status-info: #1d4ed8;
    --rz-kpi-min: 220px;
}

/* П4: KPI-плитки не сжимаются уже 220px (1280×720 читаемо) */
.fi-wi-stats-overview-stats-ctn {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(var(--rz-kpi-min), 1fr)) !important;
}

/* П6: touch-цель ≥44px на мобильных */
@media (max-width: 767px) {
    .fi-btn, .fi-icon-btn, .fi-dropdown-trigger button, .fi-ta-actions a, .fi-ta-actions button {
        min-height: var(--rz-touch);
    }
    .fi-icon-btn { min-width: var(--rz-touch); }
}

/* П5: уборка ≤767px — карточки вместо широкой таблицы.
   Активируется только на странице с балкой rz-page-housekeeping (route-scoped). */
@media (max-width: 767px) {
    body.rz-page-housekeeping .fi-ta-table thead { display: none; }
    body.rz-page-housekeeping .fi-ta-table, 
    body.rz-page-housekeeping .fi-ta-table tbody { display: block; width: 100%; }
    body.rz-page-housekeeping .fi-ta-table tbody tr {
        display: block;
        border: 1px solid rgb(0 0 0 / 0.08);
        border-radius: var(--rz-radius);
        margin: 0 0 var(--rz-space-3);
        padding: var(--rz-space-3);
        background: #fff;
    }
    .dark body.rz-page-housekeeping .fi-ta-table tbody tr { background: rgb(255 255 255 / 0.03); border-color: rgb(255 255 255 / 0.1); }
    body.rz-page-housekeeping .fi-ta-table td { display: block; border: none !important; padding: 2px 0; }
    body.rz-page-housekeeping .fi-ta-table td.fi-ta-cell:first-child { font-weight: 600; font-size: 1rem; }
    /* колонка действий — крупная главная кнопка на всю ширину */
    body.rz-page-housekeeping .fi-ta-table td.fi-ta-actions-cell { padding-top: var(--rz-space-2); }
    body.rz-page-housekeeping .fi-ta-actions { justify-content: stretch; }
    body.rz-page-housekeeping .fi-ta-actions .fi-btn { width: 100%; justify-content: center; min-height: var(--rz-touch); }
    /* нет общей горизонтальной прокрутки */
    body.rz-page-housekeeping .fi-ta-content { overflow-x: hidden !important; }
}

/* П5: календарь на мобильных — метки броней читаемы (не «А…») */
@media (max-width: 767px) {
    [data-stay-group] { font-size: 10px !important; line-height: 1.15 !important;
        white-space: normal !important; overflow: hidden;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* П3: мобильный bottom navigation */
@media (max-width: 767px) {
    #rz-bottom-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        display: flex; background: #fff; border-top: 1px solid rgb(0 0 0 / 0.1);
        padding: env(safe-area-inset-bottom, 0) 0 0;
    }
    .dark #rz-bottom-nav { background: #111827; border-color: rgb(255 255 255 / 0.1); }
    #rz-bottom-nav a, #rz-bottom-nav button {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 8px 4px 10px; min-height: 52px; font-size: 11px; color: #6b7280;
        background: none; border: none; text-decoration: none;
    }
    #rz-bottom-nav .rz-bn-active { color: #d97706; font-weight: 600; }
    #rz-bottom-nav svg { width: 22px; height: 22px; }
    .fi-main { padding-bottom: 84px !important; }
}
@media (min-width: 768px) { #rz-bottom-nav { display: none; } }

/* П3: простой профиль — прячем всё, кроме белого списка (JS ставит класс) */
body.rz-nav-simple .fi-sidebar-nav .fi-sidebar-item:not(.rz-nav-keep) { display: none; }
body.rz-nav-simple .fi-sidebar-nav .fi-sidebar-group:not(.rz-nav-keep-group) > .fi-sidebar-group-button { display: none; }


/* П5: модальные окна на телефоне — full-screen sheet (без наложения на карточку) */
@media (max-width: 767px) {
    .fi-modal-window {
        max-width: 100vw !important;
        width: 100vw !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .fi-modal { align-items: stretch !important; }
}

/* П6: видимый фокус для клавиатурной навигации (WCAG) */
:where(a, button, [role="button"], input, select, textarea):focus-visible {
    outline: 2px solid #d97706 !important;
    outline-offset: 2px;
}


/* Аудит-3 P1 (04.08.2026) — мобильная инфопанель: НИКАКИХ фиксированных
   высот. GridStack-раскладка (absolute + заданные высоты ячеек) на телефоне
   отключается полностью: виджеты складываются в один столбец с естественной
   высотой, пустые области исчезают. Desktop-поведение не затронуто. */
@media (max-width: 767px) {
    .grid-stack { height: auto !important; }
    .grid-stack .grid-stack-item {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        transform: none !important;
        inset: auto !important;
        margin-bottom: .75rem;
    }
    .grid-stack .grid-stack-item-content {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        inset: auto !important;
        overflow: visible !important;
    }
    /* редактирование раскладки на телефоне не имеет смысла */
    .rz-editing-toggle, [data-rz-rearrange] { display: none !important; }
}


/* UX-аудит (04.08.2026), пункт 1 — мобильная инфопанель. */
@media (max-width: 767px) {
    /* Кнопки «Изменить расположение»/«Сбросить» бессмысленны на телефоне. */
    .rz-dashboard-toolbar { display: none !important; }

    /* Stat-карточки KPI: высота по контенту, текст переносится, ничего не
       обрезается по кромке карточки. */
    .fi-wi-stats-overview-stats-ctn { grid-template-columns: 1fr 1fr !important; }
    .fi-wi-stats-overview-stat,
    .fi-wi-stats-overview-stat > * {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    .fi-wi-stats-overview-stat-description,
    .fi-wi-stats-overview-stat-label {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    /* Виджеты-таблицы: без внутреннего вертикального скролла. */
    .grid-stack .fi-ta-content { max-height: none !important; overflow-y: visible !important; }
}

/* Пункт 6 — свёрнутый сайдбар (desktop): подпись 9px под иконкой вместо
   голой пиктограммы-загадки. Работает только когда сайдбар свёрнут. */
@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open) { --sidebar-width: 4.75rem; width: 4.75rem !important; }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button {
        flex-direction: column;
        gap: 2px;
        padding: .45rem .15rem;
        height: auto;
    }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-label {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100%;
        font-size: 9px;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
        overflow-wrap: break-word;
    }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-button { justify-content: center; }
}


/* UX-аудит, пункт 2 — уборка: чипы-фильтры и настоящие карточки. */
.rz-hk-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rz-hk-chip {
    padding: .5rem 1rem;
    min-height: 44px;
    border-radius: 9999px;
    border: 1px solid rgb(209 213 219);
    background: #fff;
    font-size: .875rem;
    color: rgb(55 65 81);
    cursor: pointer;
}
.dark .rz-hk-chip { background: rgb(31 41 55); border-color: rgb(75 85 99); color: rgb(209 213 219); }
.rz-hk-chip-active {
    background: rgb(217 119 6);
    border-color: rgb(217 119 6);
    color: #fff;
    font-weight: 600;
}
@media (min-width: 768px) {
    /* На desktop чипы не нужны — есть обычные фильтры таблицы. */
    .rz-hk-chips { display: none; }
}
@media (max-width: 767px) {
    .rz-hk-desc { display: none; }

    /* Карточка номера: прячем пустые значения-прочерки и ужимаем зазоры. */
    body.rz-page-housekeeping .fi-ta-cell:has(.fi-ta-placeholder) { display: none !important; }
    body.rz-page-housekeeping .fi-ta-cell { padding-top: .25rem !important; padding-bottom: .25rem !important; }
    body.rz-page-housekeeping .fi-ta-record { padding: .75rem !important; }
    /* Плотнее контент ячеек карточки (штатный py-4 раздувал её). */
    body.rz-page-housekeeping .fi-ta-text { padding: .3rem .75rem !important; }
    body.rz-page-housekeeping td.fi-ta-cell { height: auto !important; }

    /* Главное действие «Изменить статус» — одна крупная кнопка во всю
       ширину; второстепенные (Минибар/История) — компактные ссылки. */
    body.rz-page-housekeeping .fi-ta-actions { flex-wrap: wrap; gap: .5rem !important; }
    body.rz-page-housekeeping .fi-ta-actions a[href], /* не трогаем ссылки */
    body.rz-page-housekeeping .fi-ta-actions button { min-height: 44px; }
    body.rz-page-housekeeping .fi-ta-actions > *:first-child {
        flex: 1 1 100%;
    }
    body.rz-page-housekeeping .fi-ta-actions > *:first-child .fi-link,
    body.rz-page-housekeeping .fi-ta-actions > *:first-child button {
        width: 100%;
        justify-content: center;
        border: 1.5px solid rgb(217 119 6);
        border-radius: .625rem;
        padding: .55rem .75rem;
        font-weight: 600;
    }
}


/* UX-аудит, пункт 7 — цветовая дисциплина KPI: описание метрики всегда
   нейтральное, тревожные цвета — только там, где нужно действие. */
.fi-wi-stats-overview-stat-description { color: rgb(107 114 128) !important; }
.dark .fi-wi-stats-overview-stat-description { color: rgb(156 163 175) !important; }

body.rz-cal-hints-off .rz-cal-hint { display: none !important; }


/* Мастер заселения (20.07.2026) — «Идёт заселение»: мягкая розовая
   пульсация. Отключается для пользователей с настройкой «меньше анимации»
   (WCAG 2.2, вместо мигания остаётся статичный розовый). */
@keyframes rz-blink-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}
.rz-blink { animation: rz-blink-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .rz-blink { animation: none; }
}

/* Срочная уборка «Заезд ждёт» — красная мигающая пометка на доске уборки. */
.rz-hk-rush {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .6rem;
    border-radius: 9999px;
    background: #fee2e2;
    border: 1px solid #ef4444;
    color: #991b1b;
    font-size: .75rem;
    font-weight: 600;
    animation: rz-blink-pulse 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .rz-hk-rush { animation: none; } }


/* Ранний выезд (20.07.2026) — прерванная раньше срока бронь: рваный
   (зубчатый) правый край блока в календаре. */
.rz-ragged-right {
    clip-path: polygon(
        0 0, 100% 0,
        calc(100% - 7px) 8%, 100% 16%, calc(100% - 7px) 24%, 100% 32%,
        calc(100% - 7px) 40%, 100% 48%, calc(100% - 7px) 56%, 100% 64%,
        calc(100% - 7px) 72%, 100% 80%, calc(100% - 7px) 88%, 100% 96%,
        calc(100% - 7px) 100%, 0 100%
    );
    border-right-style: dashed !important;
}


/* Продление проживания (18.08.2026, владелец: «продлённая и прерванная бронь
   выглядят одинаково — разорванный правый край»). Рваный край означает
   «оборвалось раньше срока», и для продлённой брони он читается ровно
   наоборот. Поэтому продление помечается противоположным по смыслу образом:
   правый край сведён остриём вправо — «проживание пошло дальше», — а место
   первоначальной даты выезда отмечено швом, справа от которого добавленные
   ночи заштрихованы. Позиция шва приходит из календаря переменной --rz-seam.
   Признак вычисляется из данных (факт выезда позже плановой даты), а не из
   статуса, поэтому виден и у завершённых броней. */
.rz-extended {
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
}

.rz-extended::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--rz-seam, 100%);
    right: 0;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .55) 0 3px, transparent 3px 7px);
    border-left: 2px dashed rgba(15, 23, 42, .45);
    pointer-events: none;
}

/* Полоса продления не должна перекрывать подпись: текст поднимаем над швом. */
.rz-extended > a { position: relative; z-index: 1; }


/* 20.07.2026 — «Выезд просрочен»: быстрая пульсация (в 2 раза быстрее
   «Идёт заселение»); при reduced motion — статично. */
.rz-blink-fast { animation: rz-blink-pulse .7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rz-blink-fast { animation: none; } }


/* п.4 (21.07.2026): «Имя гварда» — внутреннее понятие библиотеки прав.
   В bpop механизм входа один, значение всегда «web», управляющему оно
   ничего не говорит. Прячем колонку в таблице ролей и поле в форме;
   в базе поле остаётся, иначе библиотека прав работать не будет. */
.fi-ta-cell[data-column="guard_name"],
.fi-ta-header-cell[data-column="guard_name"],
.fi-fo-field-wrp:has(input[id$="guard_name"]) {
    display: none !important;
}


/* п.3 (21.07.2026): панель сохранения. Появляется только когда в форме
   что-то изменили — постоянно висящая полоса съедала бы верх экрана на
   страницах, где ничего не правят. Держится сверху при прокрутке: длинные
   формы (карточка брони, тарифы) иначе требовали возврата в самый низ. */
.rz-save-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: #fff7ed;
    border-bottom: 1px solid #fdba74;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    animation: rz-save-bar-in 0.18s ease-out;
}

@keyframes rz-save-bar-in {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.rz-save-bar__text {
    font-size: 0.875rem;
    font-weight: 500;
    color: #9a3412;
}

.rz-save-bar__btn {
    padding: 0.4rem 1.1rem;
    border-radius: 0.5rem;
    background: #ea580c;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.rz-save-bar__btn:hover { background: #c2410c; }

/* Пока панель висит, сдвигаем содержимое, чтобы она ничего не закрывала. */
body.rz-has-unsaved .fi-main { padding-top: 3rem; }

@media (prefers-color-scheme: dark) {
    .rz-save-bar { background: #431407; border-bottom-color: #9a3412; }
    .rz-save-bar__text { color: #fed7aa; }
}


/* ===================================================================
   Мобильные исправления (22.07.2026, замечания владельца)
   =================================================================== */

@media (max-width: 1024px) {
    /* 1. Боковое меню упиралось в нижнюю панель — последние пункты
       («Telegram-уведомления») просто нельзя было домотать. Добавляем
       запас снизу на высоту нижней навигации плюс безопасную зону
       iPhone, и разрешаем меню прокручиваться целиком. */
    .fi-sidebar,
    .fi-sidebar-nav {
        max-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fi-sidebar-nav {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 2. Панель «Есть несохранённые изменения» перекрывала шапку.
       Сдвигаем её под шапку и делаем компактнее — на узком экране
       длинная надпись занимала две строки. */
    .rz-save-bar {
        top: auto;
        bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
        flex-wrap: nowrap;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        border-top: 1px solid #fdba74;
        border-bottom: 0;
        border-radius: 0.75rem 0.75rem 0 0;
    }

    .rz-save-bar__text {
        font-size: 0.8125rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Раз панель теперь снизу, верхний отступ содержимому не нужен. */
    body.rz-has-unsaved .fi-main {
        padding-top: 0;
    }

    /* 3. Таблицы шире экрана (аналитика, реестры) обрезались справа —
       колонки «Средняя цена ночи» было не видно. Даём горизонтальную
       прокрутку самим таблицам, а не всей странице. */
    .fi-ta-content,
    .fi-section-content table,
    .fi-page table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fi-page table thead,
    .fi-page table tbody {
        display: table;
        width: 100%;
        min-width: max-content;
    }

    /* 4. Календарь: вертикальная прокрутка почти не работала, потому что
       обёртка перехватывала жест ради горизонтальной прокрутки сетки.
       Разрешаем оба направления — палец вниз листает страницу, вбок —
       сетку дат. */
    .rz-calendar-scroll,
    .fi-page .overflow-x-auto {
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
    }
}

/* 5. Красная отметка закрытых для продажи дат в «Тарифах и доступности»
   (замечание владельца). Цветом, а не только текстом: закрытую дату надо
   видеть боковым зрением, просматривая месяц целиком. */
.rz-date-closed {
    background: #fee2e2 !important;
    color: #991b1b !important;
    font-weight: 600;
}

.rz-date-closed::after {
    content: '×';
    margin-left: 0.25rem;
    opacity: 0.7;
}

@media (prefers-color-scheme: dark) {
    .rz-date-closed {
        background: #7f1d1d !important;
        color: #fecaca !important;
    }
}


/* Кнопка «Отменить изменения» в панели сохранения (22.07.2026).
   Визуально тише «Сохранить»: отмена — редкое и опасное действие,
   не должна конкурировать за внимание с основным. */
.rz-save-bar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.rz-save-bar__cancel {
    padding: 0.4rem 0.9rem;
    border-radius: 0.5rem;
    background: transparent;
    border: 1px solid #fdba74;
    color: #9a3412;
    font-size: 0.875rem;
    cursor: pointer;
}

.rz-save-bar__cancel:hover {
    background: #ffedd5;
}

@media (prefers-color-scheme: dark) {
    .rz-save-bar__cancel { color: #fed7aa; border-color: #9a3412; }
    .rz-save-bar__cancel:hover { background: #7c2d12; }
}


/* v11 (22.07.2026, замечание владельца «зачем две кнопки Сохранить»):
   пока есть несохранённые правки, нижние кнопки формы скрыты — сохранение
   идёт через единственную кнопку в верхней панели. Модальных окон это не
   касается: у них свой блок кнопок (.fi-modal-footer), не .fi-form-actions. */
body.rz-has-unsaved .fi-form-actions { display: none; }

/* Состояния панели сохранения: процесс / успех / ошибка валидации. */
.rz-save-bar__btn[disabled],
.rz-save-bar__cancel[disabled] { opacity: 0.55; cursor: default; }

.rz-save-bar--saved { background: #f0fdf4; border-color: #86efac; }
.rz-save-bar--saved .rz-save-bar__text { color: #166534; }
.rz-save-bar--saved .rz-save-bar__actions { display: none; }

.rz-save-bar--error { background: #fef2f2; border-color: #fca5a5; }
.rz-save-bar--error .rz-save-bar__text { color: #991b1b; }

@media (prefers-color-scheme: dark) {
    .rz-save-bar--saved { background: #052e16; border-color: #166534; }
    .rz-save-bar--saved .rz-save-bar__text { color: #86efac; }
    .rz-save-bar--error { background: #450a0a; border-color: #991b1b; }
    .rz-save-bar--error .rz-save-bar__text { color: #fca5a5; }
}


/* Счётчик просроченных выездов у пункта «Брони» (28.07.2026): мигает
   и кликабелен — ведёт на вкладку с этими бронями. Цвет задаёт сам
   Filament (info, синий), здесь только анимация и курсор. */
@keyframes rz-badge-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.fi-sidebar-item .fi-badge.rz-badge-blink { animation: rz-badge-blink 1.2s ease-in-out infinite; }


/* Цифры в панели — tabular-nums (15.08.2026, дизайн-система, правило 7).

   Это не косметика. Без него колонка сумм в реестре оплат визуально дрожит:
   в пропорциональном шрифте цифры разной ширины, разряды не выстраиваются
   друг под друга, и столбец нельзя просмотреть взглядом — приходится читать
   каждую строку. То же с датами в шахматке и номерами комнат.

   Правило повешено на таблицы, KPI-плитки и поля ввода, а не на весь
   документ: заголовки разделов и подсказки — это текст, а не данные. */
.fi-ta-table,
.fi-ta-cell,
.fi-ta-text,
.fi-wi-stats-overview-stat,
.fi-fo-field-wrp input,
.fi-fo-field-wrp textarea {
    font-variant-numeric: tabular-nums;
}