/*
 * ELÚSIA · админка как веб-приложение (пакет N2).
 * 1. Отступы у выреза, «чёлки» в альбомной ориентации и нижней полосы iPhone (viewport-fit=cover ставит elusia-pwa.js).
 *    В браузере и на компьютере env(safe-area-inset-*) = 0 — всё остаётся как в Filament.
 * 2. Страница «Уведомления» (resources/views/filament/pages/devices.blade.php).
 * Цвета — из переменных Filament, светлая и тёмная тема.
 */

:root {
    --elusia-sat: env(safe-area-inset-top, 0px);
    --elusia-sab: env(safe-area-inset-bottom, 0px);
    --elusia-sal: env(safe-area-inset-left, 0px);
    --elusia-sar: env(safe-area-inset-right, 0px);
}

/* верхняя панель: под строкой состояния и у выреза сбоку */
.fi-topbar {
    height: calc(4rem + var(--elusia-sat));
    padding-top: var(--elusia-sat);
    padding-left: max(1rem, var(--elusia-sal));
    padding-right: max(1rem, var(--elusia-sar));
}

/* боковое меню (на телефоне — выезжающее): шапка ниже строки состояния, низ списка выше полосы «домой» */
.fi-sidebar {
    padding-left: var(--elusia-sal);
}
.fi-sidebar-header {
    height: calc(4rem + var(--elusia-sat));
    padding-top: var(--elusia-sat);
}
.fi-sidebar-nav {
    padding-bottom: calc(2rem + var(--elusia-sab));
}

/* содержимое страниц: поля Filament (1 / 1,5 / 2 rem), но не меньше выреза */
.fi-main {
    padding-left: max(1rem, var(--elusia-sal));
    padding-right: max(1rem, var(--elusia-sar));
}
@media (min-width: 768px) {
    .fi-main {
        padding-left: max(1.5rem, var(--elusia-sal));
        padding-right: max(1.5rem, var(--elusia-sar));
    }
}
@media (min-width: 1024px) {
    .fi-main {
        padding-left: max(2rem, var(--elusia-sal));
        padding-right: max(2rem, var(--elusia-sar));
    }
}
.fi-main-ctn {
    padding-bottom: var(--elusia-sab);
}

/* всплывающие сообщения и окна — не под вырезом и не под полосой */
.fi-no {
    padding-top: var(--elusia-sat);
    padding-bottom: var(--elusia-sab);
    padding-right: var(--elusia-sar);
}
.fi-modal-window-ctn {
    padding-top: var(--elusia-sat);
    padding-bottom: var(--elusia-sab);
}

/* вход, второй фактор */
.fi-simple-layout {
    padding-top: var(--elusia-sat);
    padding-bottom: var(--elusia-sab);
}

/* ——— страница «Уведомления» ——— */

[x-cloak] {
    display: none !important;
}

.elusia-devices {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* длинная кнопка не раздвигает страницу шире экрана */
    gap: 1.5rem;
}

.elusia-status {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1rem;
}
.elusia-status div {
    display: grid;
    gap: 0.125rem;
}
.elusia-status dt,
.elusia-muted,
.elusia-device__meta {
    font-size: 0.875rem;
    color: var(--gray-500);
}
.elusia-status dd {
    margin: 0;
    font-weight: 500;
}

.elusia-hint {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: color-mix(in oklab, var(--primary-500) 10%, transparent);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.elusia-hint p {
    margin: 0 0 0.5rem;
}
.elusia-hint ol {
    margin: 0;
    padding-left: 1.25rem;
    list-style: decimal;
}
.elusia-hint li + li {
    margin-top: 0.25rem;
}

.elusia-note {
    margin: 0 0 1rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    background: color-mix(in oklab, var(--gray-500) 12%, transparent);
}
.elusia-note--warn {
    background: color-mix(in oklab, var(--danger-500) 12%, transparent);
}
.elusia-note--ok {
    background: color-mix(in oklab, var(--success-500) 14%, transparent);
}
.elusia-note code {
    font-size: 0.85em;
}

.elusia-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
@media (max-width: 639px) {
    /* на телефоне — кнопки во всю ширину, текст переносится */
    .elusia-actions > * {
        width: 100%;
        white-space: normal;
    }
}

.elusia-device-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.elusia-device {
    display: grid;
    gap: 0.375rem;
    padding: 0.875rem 0;
    border-top: 1px solid color-mix(in oklab, var(--gray-500) 25%, transparent);
}
.elusia-device:first-child {
    border-top: 0;
    padding-top: 0;
}
.elusia-device__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.elusia-device__name {
    font-weight: 600;
}
.elusia-badge-this {
    font-size: 0.75rem;
    color: var(--primary-600);
}
.elusia-device__meta {
    overflow-wrap: anywhere;
}
.elusia-device__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}