/* ATHENA Mobile — responsividade tier-1.
 *
 * Estratégia: NÃO refazer layout dos componentes (Home.razor é gigante).
 * Em vez disso, aplicar overrides via media query <=768px que:
 *   1) Forçam grid/flex a empilhar
 *   2) Reduzem padding/gap pra ganhar área util em telas pequenas
 *   3) Tornam tabelas roláveis horizontalmente
 *   4) Ocultam sidebar e expõem hambúrguer (data-athena-nav-toggle)
 *   5) Respeitam safe areas do iPhone (env(safe-area-inset-*))
 *
 * Reaproveita classes do app: .container-fluid, .row, .col-*,
 * .athena-card, .athena-sidebar, .table-responsive (Bootstrap).
 */

/* Safe areas (iPhone notch / Android gesture bar) */
:root {
    --athena-safe-top: env(safe-area-inset-top, 0px);
    --athena-safe-bottom: env(safe-area-inset-bottom, 0px);
    --athena-safe-left: env(safe-area-inset-left, 0px);
    --athena-safe-right: env(safe-area-inset-right, 0px);
}

html[data-athena-pwa="1"] body {
    padding-top: var(--athena-safe-top);
    padding-bottom: var(--athena-safe-bottom);
    padding-left: var(--athena-safe-left);
    padding-right: var(--athena-safe-right);
}

/* Toque amigável: alvos minimos 44x44 em mobile (WCAG 2.5.5). */
@media (pointer: coarse) {
    button, .btn, [role="button"], a.nav-link, .athena-tab {
        min-height: 44px;
        min-width: 44px;
    }
    input, select, textarea {
        font-size: 16px !important; /* evita zoom no iOS */
    }
}

/* === Breakpoint <= 768px === */
@media (max-width: 768px) {
    /* Tipografia compactada */
    html { font-size: 14px; }

    .container, .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .row {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }

    .row > [class*="col-"] {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Cards e widgets do dashboard: full width em mobile */
    .athena-card,
    .athena-widget,
    .athena-panel,
    .card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
    }

    /* Sidebar/menu lateral colapsa por padrão em mobile */
    .athena-sidebar,
    .sidebar,
    aside.athena-side,
    nav.lateral {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 80vw !important;
        max-width: 320px;
        height: 100dvh;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 0 0 24px rgba(0,0,0,.5);
        overflow-y: auto;
    }
    html[data-athena-nav-open="1"] .athena-sidebar,
    html[data-athena-nav-open="1"] .sidebar,
    html[data-athena-nav-open="1"] aside.athena-side,
    html[data-athena-nav-open="1"] nav.lateral {
        transform: translateX(0);
    }
    html[data-athena-nav-open="1"]::after {
        content: '';
        position: fixed; inset: 0; z-index: 1030;
        background: rgba(0,0,0,.5);
        backdrop-filter: blur(2px);
    }

    /* Botão hambúrguer (precisa existir no HTML como [data-athena-nav-toggle]) */
    [data-athena-nav-toggle] {
        display: inline-flex !important;
        position: fixed;
        top: calc(12px + var(--athena-safe-top));
        left: 12px;
        z-index: 1050;
        width: 44px; height: 44px;
        align-items: center; justify-content: center;
        background: rgba(20,20,28,.85);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 12px;
        color: #fff;
    }

    /* Tabelas: scroll horizontal sem quebrar layout */
    table { font-size: 12px; }
    .table-responsive, .athena-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Mapa do dashboard: altura adaptativa */
    #map, .athena-map, .leaflet-container {
        height: 50dvh !important;
        min-height: 280px;
    }

    /* Chat IA lateral: bottom-sheet em mobile */
    .athena-ia-painel, .ia-chat-panel {
        position: fixed !important;
        left: 0; right: 0; bottom: 0;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 70dvh !important;
        max-height: 90dvh;
        border-radius: 16px 16px 0 0 !important;
        z-index: 1045;
        transform: translateY(100%);
        transition: transform .25s ease;
    }
    html[data-athena-ia-open="1"] .athena-ia-painel,
    html[data-athena-ia-open="1"] .ia-chat-panel {
        transform: translateY(0);
    }

    /* KPIs grandes: empilhar em uma coluna */
    .athena-kpis,
    .row-kpis {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Toasts/alertas: do topo, full width */
    .toast-container,
    .athena-toast-stack {
        top: calc(8px + var(--athena-safe-top)) !important;
        right: 8px !important;
        left: 8px !important;
        max-width: calc(100vw - 16px);
    }

    /* Modais fullscreen */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100vw !important;
        min-height: 100dvh;
    }
    .modal-content {
        border-radius: 0 !important;
        min-height: 100dvh;
    }
}

/* Esconde hambúrguer em desktop */
@media (min-width: 769px) {
    [data-athena-nav-toggle] { display: none !important; }
}

/* Modo paisagem em celular: aproveita altura */
@media (max-width: 920px) and (orientation: landscape) {
    #map, .athena-map, .leaflet-container { height: 65dvh !important; }
    .athena-kpis { flex-direction: row !important; flex-wrap: wrap; }
}

/* Tablets (768-1024) */
@media (min-width: 769px) and (max-width: 1024px) {
    .athena-sidebar { width: 220px !important; }
    .athena-kpis > * { flex: 1 1 calc(50% - 8px); }
}

/* Acessibilidade: respeita reduzir movimento */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}