/* =============================================================================
   STICKY PAGE HEADER
   Прилипание шапки страницы (title + breadcrumbs + header actions).
   Цель: кнопки всегда под рукой при скролле длинных таблиц/форм.

   Детали, важные для корректной работы:
   - Filament-topbar (`.fi-topbar-ctn`) уже sticky на `top: 0, z-index: 30`
     и занимает `min-h-16` = 4rem. Поэтому наша шапка прилипает НИЖЕ
     (top: 4rem) и с z-index < 30, чтобы topbar оставался поверх.
   - Подложка растянута full-bleed через negative margin + компенсация
     padding. Без этого гораздо более узкая подложка живёт в ширине
     `.fi-main { px-4 md:px-6 lg:px-8 }`, и слева/справа видны вертикальные
     «обрезы». Full-bleed делает шапку визуальным продолжением topbar.
   ============================================================================= */

.fi-header {
    position: sticky;
    top: 4rem;        /* под Filament-topbar (min-h-16) */
    z-index: 20;      /* ниже topbar (z-30), выше обычного контента */

    background: var(--color-gray-50);

    /* Растягиваем подложку на всю ширину viewport — компенсируем
       горизонтальные паддинги .fi-main (4/6/8 по breakpoints). */
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
    padding-block: var(--space-3);
    margin-block-end: 0;

    box-shadow: 0 2px 4px -3px rgba(15, 23, 42, 0.08);
}

@media (min-width: 768px) {
    .fi-header {
        margin-inline: calc(-1 * var(--space-6));
        padding-inline: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .fi-header {
        margin-inline: calc(-1 * var(--space-8));
        padding-inline: var(--space-8);
    }
}

.dark .fi-header {
    background: #030712; /* gray-950 — матчит fi-body в dark mode */
}

/* На узких экранах (<640px) Filament прячет/меняет topbar; sticky-шапка
   занимает слишком много вертикали — отключаем. */
@media (max-width: 640px) {
    .fi-header {
        position: static;
        box-shadow: none;
        margin-inline: 0;
    }
}