/* ============================================================
   SIGSPA-ASSPAFC — Compatibilidade Mobile (Android / iOS)
   Carregado após modern.css — ajustes exclusivos de tela pequena.
   ============================================================ */

* {
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   CENTRAL DO ASSOCIADO — Menu lateral em DRAWER (Mobile / iOS)
   Oculta o menu por padrão; o botão no header da Central
   (mesma linha do título) alterna abrir/fechar.
   ============================================================ */
/* Desktop/tablet: botão e backdrop nunca aparecem */
.ca-menu-toggle,
.ca-menu-backdrop {
    display: none;
}

@media (max-width: 767.98px) {
    /* Botão de menu no header — mesma linha do título */
    .ca-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-left: auto;
        margin-right: 6px;
        border: none;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        font-size: 15px;
        cursor: pointer;
        transition: background .15s, transform .15s;
        flex-shrink: 0;
        touch-action: manipulation;
    }
    .ca-menu-toggle:hover { background: rgba(255, 255, 255, 0.32); }
    .ca-menu-toggle:active { transform: scale(.94); }

    /* Layout relativo para posicionar o drawer */
    #modalSocio .ca-layout { position: relative; }

    /* Sidebar oculto por padrão (desliza de fora) */
    #modalSocio .ca-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(250px, 80vw);
        z-index: 20;
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s;
        box-shadow: none;
        align-items: stretch;
        padding: 10px 6px;
    }

    /* Restaura itens do menu alinhados à esquerda com rótulos visíveis
       (sobrepõe o modo "rail fino" de 48px do modern.css) */
    #modalSocio .ca-sidebar a,
    #modalSocio .ca-sidebar button {
        width: 100%;
        height: 40px;
        justify-content: flex-start;
        padding: 0 12px;
        font-size: 14px;
    }
    #modalSocio .ca-sidebar .ca-nav-label { display: inline; }
    #modalSocio .ca-sidebar .ca-nav-group-header {
        justify-content: flex-start;
        padding: 0 12px;
    }

    #modalSocio.ca-menu-aberto .ca-sidebar {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(15, 23, 42, 0.22);
    }

    /* Backdrop interno clicável para fechar */
    #modalSocio .ca-menu-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 15;
        background: rgba(15, 23, 42, 0.38);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }
    #modalSocio.ca-menu-aberto .ca-menu-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ---------- Tablet / Mobile (<= 991.98px) ---------- */
@media (max-width: 991.98px) {
    /* Botão hamburger do drawer — fica dentro do topbar */
    .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: static;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: transparent;
        color: #1f2937;
        font-size: 17px;
        box-shadow: none;
        transition: transform .15s ease, background .15s ease;
        touch-action: manipulation;
    }
    .sidebar-toggle:hover { background: rgba(0,0,0,.05); }
    .sidebar-toggle:active { transform: scale(.94); }

    body:has(.sidebar.open) .sidebar {
        box-shadow: 8px 0 44px rgba(15, 23, 42, .4);
    }

    /* Topbar em tela média */
    .top-navbar {
        gap: 8px;
        padding: 0 12px;
    }
    .top-navbar .search-container {
        flex: 1;
        max-width: none;
    }

    /* Painel de notificações ajustado à tela */
    .topbar-dropdown-menu {
        min-width: 0;
        width: min(320px, calc(100vw - 32px));
        right: 0;
    }
}

/* ---------- Tablets pequenos (<= 767.98px) ---------- */
@media (max-width: 767.98px) {
    /* Tabelas com rolagem horizontal suave */
    .table-responsive,
    .gl-tabela,
    .pag-tabela,
    .ath-tabela,
    .atd-tabela,
    .mdm-lista {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mdm-grid { grid-template-columns: 1fr; }

    /* Grids fixos inline dos modais: 3-4 colunas viram 2 no tablet */
    [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
    [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
    [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }

    /* Grids de cards por classe */
    .mdoc-grid,
    .mens-grid,
    .cfg-grid,
    .c59-grid { grid-template-columns: repeat(2, 1fr); }

    /* Info grid da Central do Associado: 2 colunas no tablet */
    .info-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .info-grid,
    .info-card { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
    .info-card { grid-template-columns: 30px 1fr; gap: 8px; padding: 10px 12px; }
}

/* ---------- Celulares (<= 575.98px) ---------- */
@media (max-width: 575.98px) {
    /* Grids fixos inline dos modais: tudo em 1 coluna no celular */
    [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }

    .mdoc-grid,
    .mens-grid,
    .cfg-grid,
    .c59-grid { grid-template-columns: 1fr; }

    /* Info grid da Central do Associado: 1 coluna no celular */
    .info-grid { grid-template-columns: 1fr !important; }

    /* Evita o zoom automático do iOS ao focar campos */
    body.pagina-logada input:not([type=checkbox]):not([type=radio]):not([type=file]),
    body.pagina-logada select,
    body.pagina-logada textarea {
        font-size: 16px;
    }

    /* Modais ocupam a largura toda, sem margens laterais */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100%;
    }
    .modal-content { border-radius: 0; border: none; }

    /* Central do Associado: altura de tela (dvh corrige a barra de URL do iOS) */
    @supports (height: 100dvh) {
        #modalSocio .modal-dialog,
        #modalSocio .modal-content { height: 100dvh !important; }
    }

    /* Header da Central */
    #modalSocio .ca-assoc-header {
        padding: 10px 12px;
        gap: 8px;
    }
    #modalSocio .ca-assoc-header .ca-avatar {
        width: 52px;
        height: 52px;
        font-size: 18px;
    }
    #modalSocio .ca-assoc-header .ca-header-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    #modalSocio .ca-assoc-header .ca-header-actions .ca-btn {
        justify-content: center;
    }

    /* Perfil individual (Taxa Federativa / Declaração de Produção) */
    .perfil-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Estatísticas da fila em 2 colunas */
    .atd-stat-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Botão de tema */
    .tema-toggle {
        width: 40px;
        height: 40px;
        bottom: 62px;
        right: 14px;
    }

    /* Página de login */
    .login-card {
        width: 92vw;
        max-width: 420px;
        padding: 28px 20px;
    }

    /* Topbar mobile: esconde a pesquisa no modo compacto? Não —
       mantém a pesquisa mas reduz o espaço do usuário (nome já some). */
    .brand-mobile {
        display: flex;
    }
    .top-navbar {
        padding: 0 8px;
    }
    .top-navbar .search-container input {
        font-size: 14px;
        padding: 7px 12px 7px 34px;
    }
    .topbar-dropdown-menu {
        width: min(320px, calc(100vw - 24px));
    }

    /* Toque mais preciso em botões principais */
    .btn-novo-cadastro,
    .atd-btn,
    .mdm-btn,
    .gl-btn,
    .ca-btn,
    .portal-card,
    .ath-btn {
        touch-action: manipulation;
    }
}