/* mobile.css - Responsividade para dispositivos móveis */

/* ========== VARIÁVEIS MOBILE ========== */
:root {
    --sidebar-width-mobile: 260px;
}

/* ========== TABLET (768px - 1024px) ========== */
@media (max-width: 1024px) {
    /* Sidebar menor */
    .sidebar {
        width: 200px;
    }
    
    .main-content {
        margin-left: 200px;
    }
    
    /* Cards em 3 colunas */
    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Dashboard grid */
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .dashboard-grid .mapa-container,
    .dashboard-grid .ranking-container {
        height: auto;
        min-height: 500px;
    }
    
    /* Ranking abaixo do mapa */
    .ranking-container {
        height: 400px;
    }
}

/* ========== MOBILE (até 768px) ========== */
@media (max-width: 768px) {
    /* Esconder sidebar por padrão */
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width-mobile);
        transition: transform 0.3s ease;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    /* Main content ocupa tudo */
    .main-content {
        margin-left: 0;
        width: 100%;
    }
    
    /* Header mobile */
    .header {
        padding: 0 12px;
    }
    
    .header-title {
        font-size: 14px;
    }
    
    /* Botão menu hambúrguer */
    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        cursor: pointer;
        margin-right: 12px;
    }
    
    .menu-toggle svg {
        width: 20px;
        height: 20px;
        stroke: var(--text-primary);
    }
    
    /* Overlay quando sidebar aberta */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    /* Conteúdo com menos padding */
    .content {
        padding: 12px;
    }
    
    /* Cards em 2 colunas */
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .cards-grid-5 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .card {
        padding: 12px;
    }
    
    .card-value {
        font-size: 18px;
    }
    
    .card-label {
        font-size: 10px;
    }
    
    /* Filtros empilhados */
    .filtros-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .filtro-grupo {
        width: 100%;
    }
    
    .filtro-grupo select,
    .filtro-grupo input {
        width: 100%;
        min-width: auto;
    }
    
    .filtros-bar .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Abas em scroll horizontal */
    .tab-nav {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 8px;
        margin-bottom: 12px;
        -webkit-overflow-scrolling: touch;
    }
    
    .tab-nav::-webkit-scrollbar {
        height: 4px;
    }
    
    /* Dashboard: mapa e ranking empilhados */
    .dashboard-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .mapa-container {
        height: 350px;
        min-height: 350px;
    }
    
    .ranking-container {
        height: 350px;
    }
    
    /* Mapa - ajustes */
    .mapa-estado-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .mapa-estado-info-left {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .estado-temp-inline {
        display: none;
    }
    
    /* Filtro de população - canto inferior esquerdo no mobile também */
    .mapa-filtro-populacao-panel {
        bottom: 8px;
        left: 8px;
    }
    
    .mapa-filtro-populacao-panel .mapa-filtro-popup {
        bottom: 100%;
        top: auto;
        margin-bottom: 4px;
    }
    
    /* Filtros do mapa - mover para topo e popup abre para baixo */
    .mapa-filtros-panel {
        top: 10px;
        bottom: auto;
        right: 10px;
    }
    
    .mapa-filtro-popup {
        top: 100%;
        bottom: auto;
        max-height: 250px;
    }
    
    /* Zoom de estado - reduzir para caber na tela */
    .mapa-svg-container {
        transform: scale(0.85);
        transform-origin: center center;
    }
    
    .mapa-container.estado-ativo .mapa-svg-container {
        max-height: 280px;
        overflow: hidden;
    }
    
    /* Header do estado mais compacto */
    .mapa-estado-titulo {
        font-size: 12px;
        padding: 4px 10px;
    }
    
    .estado-fechar-btn {
        padding: 4px;
    }
    
    /* Ranking - itens menores */
    .ranking-item {
        padding: 8px 12px;
    }
    
    .ranking-nome {
        font-size: 11px;
    }
    
    .ranking-producao {
        font-size: 11px;
    }
    
    /* Tabelas - scroll horizontal */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .data-table {
        min-width: 600px;
    }
    
    .data-table th,
    .data-table td {
        padding: 8px 10px;
        font-size: 11px;
    }
    
    /* Modais - quase fullscreen */
    .modal {
        width: 95%;
        max-width: none;
        max-height: 90vh;
        margin: 5vh auto;
    }
    
    .modal-header {
        padding: 12px 16px;
    }
    
    .modal-header h2 {
        font-size: 16px;
    }
    
    .modal-body {
        padding: 16px;
    }
    
    .modal-footer {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .modal-footer .btn {
        flex: 1;
        min-width: 100px;
    }
    
    /* Form em modal - campos empilhados */
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    
    .form-row {
        flex-direction: column;
        gap: 12px;
    }
    
    /* User menu no header */
    .user-menu {
        gap: 8px;
    }
    
    .user-info > div {
        display: none;
    }
    
    .user-chevron {
        display: none;
    }
    
    .user-dropdown {
        min-width: 180px;
        right: -8px;
    }
    
    /* Estado resumo - 2 colunas */
    .estado-resumo {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Cards de temperatura no modal */
    .estado-temp-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .estado-temp-card {
        padding: 10px;
    }
    
    .estado-temp-valor {
        font-size: 20px;
    }
    
    /* Gráficos */
    .graficos-row-2 {
        grid-template-columns: 1fr !important;
    }
    
    .grafico-card {
        padding: 12px;
    }
    
    /* Relatórios */
    .relatorio-acoes {
        flex-direction: column;
        gap: 8px;
    }
    
    .relatorio-acoes .btn {
        width: 100%;
    }
    
    /* Modal de filtros de relatórios - responsivo */
    .modal-relatorio-filtros .filtros-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .modal-relatorio-filtros .filtro-item select,
    .modal-relatorio-filtros .filtro-item input {
        font-size: 16px; /* Evita zoom no iOS */
    }
    
    .modal-relatorio-filtros .filtro-item select[multiple] {
        height: 80px;
    }
    
    /* Cards de relatórios em coluna no mobile */
    .relatorios-grid {
        grid-template-columns: 1fr;
    }
    
    .relatorio-card {
        max-width: none;
    }
    
    /* Toast mais largo */
    .toast {
        left: 12px;
        right: 12px;
        max-width: none;
    }
    
    /* Paginação */
    .pagination {
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .pagination button {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* ========== MOBILE PEQUENO (até 480px) ========== */
@media (max-width: 480px) {
    /* Cards em coluna única */
    .cards-grid,
    .cards-grid-5 {
        grid-template-columns: 1fr;
    }
    
    /* Header ainda mais compacto */
    .header {
        height: 48px;
        padding: 0 8px;
    }
    
    .header-title {
        font-size: 13px;
    }
    
    /* Content com padding mínimo */
    .content {
        padding: 8px;
    }
    
    /* Sidebar header */
    .sidebar-header {
        padding: 0 12px;
    }
    
    .logo-text {
        font-size: 14px;
    }
    
    /* Nav items menores */
    .nav-item {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    /* Mapa menor */
    .mapa-container {
        height: 280px;
        min-height: 280px;
    }
    
    /* Zoom de estado ainda menor em telas pequenas */
    .mapa-svg-container {
        transform: scale(0.75);
        transform-origin: center center;
    }
    
    .mapa-container.estado-ativo .mapa-svg-container {
        max-height: 220px;
    }
    
    /* Ranking menor */
    .ranking-container {
        height: 300px;
    }
    
    /* Cards de temperatura - 1 coluna */
    .estado-temp-cards {
        grid-template-columns: 1fr;
    }
    
    /* Estado resumo - 1 coluna */
    .estado-resumo {
        grid-template-columns: 1fr;
    }
    
    /* Botões menores */
    .btn {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .btn-sm {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    /* Tabela - colunas escondidas */
    .data-table .hide-mobile {
        display: none;
    }
    
    /* Modal footer - botões empilhados */
    .modal-footer {
        flex-direction: column;
    }
    
    .modal-footer .btn {
        width: 100%;
    }
}

/* ========== UTILITÁRIOS MOBILE ========== */

/* Esconder em mobile */
.hide-mobile {
    display: none !important;
}

/* Mostrar apenas em mobile */
.show-mobile {
    display: block !important;
}

/* Reset para desktop */
@media (min-width: 769px) {
    .menu-toggle {
        display: none !important;
    }
    
    .sidebar-overlay {
        display: none !important;
    }
    
    .hide-mobile {
        display: initial !important;
    }
    
    .show-mobile {
        display: none !important;
    }
}

/* ========== AJUSTES DE TOUCH ========== */
@media (hover: none) and (pointer: coarse) {
    /* Aumentar área de toque */
    .btn {
        min-height: 44px;
    }
    
    .nav-item {
        min-height: 44px;
    }
    
    .ranking-item {
        min-height: 48px;
    }
    
    /* Remover efeitos hover em touch */
    .nav-item:hover {
        background: transparent;
    }
    
    .nav-item:active {
        background: var(--bg-tertiary);
    }
    
    .ranking-item:hover {
        background: transparent;
    }
    
    .ranking-item:active {
        background: var(--bg-tertiary);
    }
}

/* ========== LANDSCAPE MOBILE ========== */
@media (max-width: 768px) and (orientation: landscape) {
    .mapa-container {
        height: 250px;
        min-height: 250px;
    }
    
    .modal {
        max-height: 95vh;
    }
    
    .modal-body {
        max-height: 60vh;
        overflow-y: auto;
    }
    
    /* Inline de oportunidades mobile */
    .inline-cadastrar-cia,
    .inline-declinar-cia {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .inline-cadastrar-cia > span,
    .inline-declinar-cia > span {
        width: 100%;
    }
    
    .inline-cadastrar-cia input,
    .inline-cadastrar-cia select,
    .inline-declinar-cia input,
    .inline-declinar-cia select {
        width: 100% !important;
        min-width: unset !important;
    }
    
    .inline-cadastrar-cia > div,
    .inline-declinar-cia > div {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .inline-declinar-cia label {
        flex: 0 0 auto;
    }
    
    /* Botões inline mobile */
    .inline-cadastrar-cia button,
    .inline-declinar-cia button {
        flex: 1;
        min-width: 100px;
    }
    
    /* Oportunidades seguradora row mobile */
    .oport-seguradora-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .oport-seguradora-row > div:last-child {
        width: 100%;
        display: flex;
        gap: 8px;
    }
    
    .oport-seguradora-row button {
        flex: 1;
    }
}

/* ========== OPORTUNIDADES MOBILE (v10.5.17) ========== */
@media (max-width: 768px) {
    /* Cards de KPI - 2x2 */
    #aba-dashboard-oportunidades .cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    
    /* Gráficos em coluna única */
    #aba-dashboard-oportunidades .graficos-row-2 {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    
    /* Altura reduzida dos gráficos */
    #aba-dashboard-oportunidades .grafico-container {
        height: 220px !important;
    }
    
    /* ===== HEADER DA LISTA (busca) ===== */
    #lista-corretores-oportunidades .oport-lista-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 10px 12px !important;
    }
    
    #lista-corretores-oportunidades .oport-busca {
        width: 100% !important;
    }
    
    #lista-corretores-oportunidades .oport-busca input {
        width: 100% !important;
        min-width: unset !important;
        flex: 1;
    }
    
    /* ===== ACCORDION HEADER - SIMPLIFICADO ===== */
    /* Esconder TUDO exceto nome, cnpj e badges */
    #lista-corretores-oportunidades > div > div[onclick] {
        padding: 12px !important;
    }
    
    #lista-corretores-oportunidades > div > div[onclick] > div:first-child {
        flex: 1;
    }
    
    /* Esconder chips de categoria no header */
    #lista-corretores-oportunidades > div > div[onclick] > div:last-child > div:first-child {
        display: none !important;
    }
    
    /* Badges lado a lado */
    #lista-corretores-oportunidades .badge {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
    
    /* ===== ACCORDION BODY - ESTILO LISTA LIMPA ===== */
    #lista-corretores-oportunidades .oport-corretor-body {
        padding: 0 !important;
    }
    
    /* Título da seção (Oportunidades de Cadastro/Venda) */
    #lista-corretores-oportunidades .oport-secao > div:first-child {
        padding: 10px 12px !important;
        font-size: 10px !important;
    }
    
    /* ===== SEGURADORA ROW - FORMATO LISTA VERTICAL ===== */
    #lista-corretores-oportunidades .oport-seguradora-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 14px 12px !important;
        border-left-width: 3px !important;
    }
    
    /* Info da seguradora (nome + categorias) */
    #lista-corretores-oportunidades .oport-seguradora-row > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    /* Nome da seguradora */
    #lista-corretores-oportunidades .oport-seguradora-row > div:first-child > span:first-child {
        min-width: unset !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    
    /* Chips de categoria - wrap */
    #lista-corretores-oportunidades .oport-seguradora-row > div:first-child > div {
        flex-wrap: wrap !important;
    }
    
    #lista-corretores-oportunidades .oport-seguradora-row .chip {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }
    
    /* Botões - OCUPAM 100% CADA */
    #lista-corretores-oportunidades .oport-seguradora-row > div:last-child {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100%;
    }
    
    #lista-corretores-oportunidades .oport-seguradora-row .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    /* ===== INLINE DECLINAR - FORMATO MODAL ===== */
    .inline-declinar-cia {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px !important;
        background: var(--bg-tertiary) !important;
        border-radius: 6px !important;
        margin: 8px 0 !important;
    }
    
    .inline-declinar-cia > span {
        font-size: 13px !important;
        font-weight: 500 !important;
        white-space: normal !important;
        margin-bottom: 4px;
    }
    
    /* Container de categorias */
    .inline-declinar-cia > div:first-of-type {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    .inline-declinar-cia select {
        width: 100% !important;
        min-width: unset !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
    
    .inline-declinar-cia input[type="text"] {
        width: 100% !important;
        min-width: unset !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
    
    /* Botões do inline declinar */
    .inline-declinar-cia > div:last-of-type {
        display: flex !important;
        gap: 8px !important;
        margin-top: 4px;
    }
    
    .inline-declinar-cia button {
        flex: 1 !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    /* ===== INLINE CADASTRAR - FORMATO MODAL ===== */
    .inline-cadastrar-cia {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px !important;
        background: var(--bg-tertiary) !important;
        border-radius: 6px !important;
        margin: 8px 0 !important;
    }
    
    .inline-cadastrar-cia > span {
        font-size: 13px !important;
        font-weight: 500 !important;
    }
    
    .inline-cadastrar-cia input,
    .inline-cadastrar-cia select {
        width: 100% !important;
        min-width: unset !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
    
    .inline-cadastrar-cia button {
        width: 100% !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    /* ===== PAGINAÇÃO ===== */
    #lista-corretores-oportunidades .oport-paginacao {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 12px !important;
    }
    
    #lista-corretores-oportunidades .oport-paginacao button {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    /* Cards de KPI - coluna única */
    #aba-dashboard-oportunidades .cards-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Gráficos ainda menores */
    #aba-dashboard-oportunidades .grafico-container {
        height: 180px !important;
    }
    
    /* Título do gráfico menor */
    #aba-dashboard-oportunidades .grafico-titulo {
        font-size: 12px;
    }
    
    /* Botão expandir escondido */
    #aba-dashboard-oportunidades .btn-expandir-grafico {
        display: none;
    }
    
    /* Nome do corretor menor */
    #lista-corretores-oportunidades > div > div[onclick] div[style*="font-weight: 500"] {
        font-size: 13px !important;
    }
    
    /* CNPJ/cidade menor */
    #lista-corretores-oportunidades > div > div[onclick] div[style*="font-size: 12px"] {
        font-size: 11px !important;
    }
}

/* ========== PRINT - Esconder elementos de navegação ========== */
@media print {
    .sidebar,
    .header,
    .menu-toggle,
    .sidebar-overlay,
    .filtros-bar,
    .btn,
    .modal-footer {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .content {
        padding: 0;
    }
}