/* ============================================================
   RESPONSIVE FIXES - PAV SIMCO
   ============================================================
   Carregado POR ÚLTIMO em cada página (após o CSS específico),
   para corrigir problemas de adaptação a telas pequenas/médias
   sem reescrever os CSS gigantes (medico/dashboard/odontograma).

   Cobre os padrões transversais detectados na auditoria:
   - overflow horizontal global
   - larguras fixas (min-width) que estouram mobile
   - grids fixos que não refluem
   - modais que não cabem
   - áreas de toque < 44px

   Edições cirúrgicas por página ficam nos respectivos CSS.
   ============================================================ */

/* ------------------------------------------------------------
   1. PREVENÇÃO GLOBAL DE OVERFLOW HORIZONTAL
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
}

/* Mídia nunca estoura o container */
img, video, canvas, svg, iframe {
    max-width: 100%;
}

/* ------------------------------------------------------------
   2. TABELAS LARGAS -> SCROLL HORIZONTAL SUAVE
   ------------------------------------------------------------
   Qualquer wrapper marcado .table-responsive ganha scroll touch.
   Também damos scroll a wrappers comuns de tabela do projeto. */
.table-responsive,
.table-container,
.tabela-wrap,
.grid-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------
   3. ÁREAS DE TOQUE (touch) >= 44px em dispositivos touch
   ------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
    button,
    [role="button"],
    .btn,
    a.btn,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
    }
    /* inputs/selects também: evita toque difícil e zoom iOS */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px; /* previne zoom automático no iOS */
    }
}

/* ============================================================
   PÁGINA: DASHBOARD
   ============================================================ */

/* Tabela de agendamentos (min-width:1400px) e performance-table (700px) */
@media (max-width: 768px) {
    .agendamentos-table { min-width: 760px; }
    .performance-table { min-width: 100%; }
    .charts-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .stats-overview .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .simcare-orc-kpis { grid-template-columns: repeat(3, 1fr) !important; }
    .pav-tempo-resumo { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
    .agendamentos-table { font-size: 0.72rem; min-width: 640px; }
    .agendamentos-table th,
    .agendamentos-table td { padding: 6px 5px; }
    .stats-overview .stats-grid { grid-template-columns: 1fr 1fr !important; }
    .simcare-orc-kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .pav-tempo-resumo { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    /* Calendário continua 7 colunas mas com fonte menor */
    .calendario-grid { gap: 2px !important; }
    /* Modal de recados ocupa tela quase inteira */
    #dash-recados-panel {
        width: 98vw !important;
        max-width: 98vw !important;
        height: 88vh !important;
    }
}

/* Header do dashboard reflui em telas pequenas */
@media (max-width: 600px) {
    .dashboard-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .dashboard-header .header-center {
        order: 3;
        width: 100%;
        max-width: none !important;
    }
    .date-filter-container {
        width: 100%;
        max-width: none !important;
        flex-wrap: wrap;
    }
    .date-input { min-width: 0; }
}

/* ============================================================
   PÁGINA: PAINEL MÉDICO
   ============================================================ */

/* 3.1 Floating video: nunca pode estourar a viewport em mobile */
@media (max-width: 575px) {
    .floating-video-window,
    .floating-video-window.maximized {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        right: 8px !important;
        left: auto !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 3 / 4;
        max-height: 80vh;
    }
}

/* 3.2 Grids de anamnese / receita / perfil colapsam para 1 coluna */
@media (max-width: 991px) {
    .anamnese-split-container,
    #anamnese-split-container,
    .receita-split-container,
    #receita-split-container,
    .simcare-perfil-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* 3.3 Tabela presencial: scroll em vez de estourar */
@media (max-width: 768px) {
    .grid-presencial-table { min-width: 720px; }
}
@media (max-width: 480px) {
    .grid-presencial-table { min-width: 600px; font-size: 0.72rem; }
}

/* 3.3b Tabelas internas do prontuário (ex.: Exames Laboratoriais) têm muitas
   colunas e o wrapper imediato fica com overflow-x:hidden, cortando as colunas
   da direita (Exames/Ações) sem permitir scroll. Damos scroll horizontal ao
   container da lista e impedimos que a tabela seja espremida abaixo do legível. */
@media (max-width: 991px) {
    #exameslab-lista,
    #exameslab-lista > div,
    #conteudo-exameslab .tabela-wrap,
    .prontuario-tabela-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #exameslab-lista table,
    #conteudo-exameslab table {
        min-width: 640px;
    }
}

/* 3.4 Stats label legível (era 0.5rem = 8px) */
@media (max-width: 575px) {
    .stat-label { font-size: 0.65rem !important; line-height: 1.2; }
}
@media (max-width: 359px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .stat-label { font-size: 0.62rem !important; }
}

/* 3.5 Header do painel: ícones-only em telas estreitas para caber */
@media (max-width: 600px) {
    .header-right { flex-wrap: wrap; gap: 6px; }
}

/* 3.6 Cards da sidebar mobile não podem ser esmagados pelo flex column.
   O container .sidebar-content é flex-direction:column; em telas baixas o
   flex-shrink padrão (1) comprime cards como .novidades-card (Central de
   Comunicação), cortando o texto. Forçamos altura natural e impedimos o
   encolhimento. Mantém o overflow:hidden do card (preserva o brilho ::before). */
@media (max-width: 1024px) {
    .sidebar .sidebar-content > * {
        flex-shrink: 0;
    }
    .sidebar .novidades-card,
    .sidebar .doctor-welcome,
    .sidebar .schedule-card,
    .sidebar .quick-stats,
    .sidebar .support-card,
    .sidebar .bird-id-card,
    .sidebar .memed-card {
        height: auto !important;
        min-height: auto;
        flex-shrink: 0;
    }
    /* garante que a logo do topo da sidebar nunca seja cortada */
    .sidebar .sidebar-header {
        flex-shrink: 0;
    }
}

/* ============================================================
   PÁGINA: TELAS DO PACIENTE (consulta / consulta-pav)
   ============================================================ */

/* CPF input nunca estoura */
@media (max-width: 600px) {
    .cpf-input,
    .cpf-input-container input {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Countdown circle proporcional em mobile */
@media (max-width: 600px) {
    .countdown-circle {
        width: 72px !important;
        height: 72px !important;
        border-width: 4px !important;
    }
    .countdown-circle span { font-size: 1.8rem !important; }
}

/* Abas da fila PAV: permitir scroll horizontal em vez de quebrar */
@media (max-width: 480px) {
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    .tab-btn { flex: 0 0 auto; white-space: nowrap; }
}

/* ============================================================
   FORMULÁRIOS 2-COLUNAS -> 1 COLUNA EM MOBILE (genérico)
   ============================================================
   Cobre form-row/form-row-3 de atualizar-dados, termos-embed e admin. */
@media (max-width: 480px) {
    .form-row,
    .form-row-3,
    .form-row-endereco {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }
}

/* form-group com min-width 200px (termos-embed) reflui */
@media (max-width: 480px) {
    .form-row > .form-group,
    .historico-filtros > * {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    .form-row,
    .historico-filtros { flex-direction: column; }
}

/* ============================================================
   PÁGINA: TRILHAS
   ============================================================ */
@media (max-width: 575px) {
    /* container com menos padding */
    .container { padding-left: 12px; padding-right: 12px; }
    /* filtros empilham */
    .filtros { grid-template-columns: 1fr !important; }
}

/* ============================================================
   PÁGINA: ADMIN-NOVIDADES
   ============================================================ */
@media (max-width: 575px) {
    .stats-bar { grid-template-columns: 1fr 1fr !important; }
    #emoji-picker,
    #novidade-emoji-picker {
        width: 90vw !important;
        max-width: 90vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

/* ============================================================
   MODAIS GENÉRICOS QUE NÃO CABEM EM MOBILE
   ============================================================
   Limita a largura de qualquer .modal-content / .custom-modal
   a 96vw e altura a 90vh com scroll interno. */
@media (max-width: 575px) {
    .modal-content,
    .custom-modal,
    .modal-box {
        max-width: 96vw !important;
        max-height: 90vh !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Landscape baixo: modais usam mais altura */
@media (max-height: 500px) and (orientation: landscape) {
    .modal-content,
    .custom-modal,
    .modal-box {
        max-height: 96vh !important;
        overflow-y: auto;
    }
}