/**
 * Универсальные мобильные стили для всех custom Filament-страниц.
 * Подключается через AdminPanelProvider::resources().
 *
 * Покрывает: Kanban, Owner Dashboard, Analytics, Health, Broadcast,
 * Duplicate Clients/Products, Needs Attention, Settings, Whatsapp instances.
 *
 * Inbox имеет свои специфичные мобильные правила (см. inbox.blade.php).
 */

@media (max-width: 768px) {
    /* ========== Общие правила ========== */

    /* Filament resource header */
    .fi-page-header { padding: 12px !important; }
    .fi-header-heading { font-size: 18px !important; }

    /* Filament tables — горизонтальный скролл вместо обрезки */
    .fi-ta-content { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .fi-ta-table { min-width: 600px; }

    /* Filament форма — single column на мобильном */
    .fi-fo-component-ctn .fi-fo-component-grid { grid-template-columns: 1fr !important; }
    .fi-fo-tabs > .fi-tabs-tab-list { overflow-x: auto; flex-wrap: nowrap !important; }

    /* Action кнопки в шапке ресурса — компактнее */
    .fi-header-actions { flex-wrap: wrap; gap: 4px !important; }
    .fi-header-actions .fi-btn { font-size: 12px !important; padding: 6px 10px !important; }

    /* ========== Kanban ========== */

    .kanban-board { overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
    .kanban-column { min-width: 280px !important; max-width: 280px !important; }
    .kanban-card { padding: 10px !important; font-size: 13px !important; }
    .kanban-card .lead-amount { font-size: 13px !important; }

    /* ========== Dashboard widgets ========== */

    .fi-wi-stats-overview-stat { padding: 12px !important; }
    .fi-wi-stats-overview-stat-value { font-size: 18px !important; }
    .fi-wi-stats-overview-stat-label { font-size: 11px !important; }

    /* Графики — фиксированная высота чтобы не тянулись */
    .fi-wi-chart-chart-ctn { height: 240px !important; }

    /* Stats grid → 2 колонки на мобильном */
    .fi-wi-stats-overview { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

    /* ========== Owner Dashboard / Analytics ========== */

    .owner-grid { grid-template-columns: 1fr !important; }
    .owner-section { padding: 12px !important; margin-bottom: 12px !important; }
    .owner-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ========== Settings ========== */

    .fi-tabs-tab { font-size: 12px !important; padding: 8px 12px !important; white-space: nowrap; }
    .fi-page-settings-form .fi-fo-section { padding: 12px !important; }

    /* ========== Broadcast ========== */

    .broadcast-form { padding: 12px !important; }
    .broadcast-stats { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }

    /* ========== WhatsApp instances ========== */

    .wa-instance-card { flex-direction: column !important; gap: 8px !important; padding: 12px !important; }
    .wa-instance-actions { flex-wrap: wrap; gap: 6px !important; width: 100%; }
    .wa-instance-actions button { flex: 1; font-size: 12px !important; }

    /* ========== Duplicates pages ========== */

    .duplicate-group { padding: 10px !important; }
    .duplicate-row { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; }

    /* ========== Health page ========== */

    .health-grid { grid-template-columns: 1fr !important; }

    /* ========== Sidebar ========== */

    /* Filament в мобильной версии скрывает sidebar — открывается через бургер.
       Делаем чтобы он покрывал весь экран при открытии и был ПОВЕРХ inbox-fixed. */
    .fi-sidebar {
        width: 85vw !important;
        max-width: 320px !important;
        z-index: 50 !important;     /* выше любого fixed-контента */
    }
    /* Backdrop оверлея sidebar — тоже выше inbox */
    .fi-sidebar-close-overlay,
    [class*="sidebar"][class*="overlay"] { z-index: 49 !important; }

    /* ========== Touch-friendly размеры ========== */

    button, .fi-btn, [wire\:click], [x-on\:click] {
        min-height: 36px;
    }

    /* Inputs: больший шрифт чтобы iOS не зумил */
    input, textarea, select { font-size: 16px !important; }
}

/* ========== Очень узкий экран (iPhone SE) ========== */
@media (max-width: 380px) {
    .fi-wi-stats-overview { grid-template-columns: 1fr !important; }
    .conv-name { font-size: 13px !important; }
    .msg-bubble { max-width: 85% !important; }
}