/* =====================================================================
   canteiro.io — Responsividade Mobile
   ---------------------------------------------------------------------
   REGRA DE OURO: este arquivo NÃO altera a visualização no computador.
   Tudo que afeta o visual fica DENTRO de blocos @media (max-width: ...).
   Acima do breakpoint (desktop/tablet largo) nada aqui se aplica.

   A única exceção são os "display:none" de elementos NOVOS criados só
   para o mobile (topbar e backdrop do menu): no desktop eles ficam
   ocultos, então o desktop continua exatamente igual.

   Carregado por ÚLTIMO no _Host.cshtml para vencer o tema Syncfusion
   e os CSS existentes nas larguras de celular.
   Breakpoints: 768px (celular/retrato) e 480px (celular pequeno).
   ===================================================================== */

/* ---------------------------------------------------------------------
   Elementos exclusivos do mobile — ocultos no desktop (sem efeito visual)
   --------------------------------------------------------------------- */
.cnt-mobile-topbar {
    display: none;
}

.cnt-nav-backdrop {
    display: none;
}

/* ====================================================================
   CELULAR — breakpoint principal (<= 768px)
   ==================================================================== */
@media (max-width: 768px) {

    /* ---- Anti-overflow horizontal geral ---- */
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* ----------------------------------------------------------------
       1) ESTRUTURA / LAYOUT — sidebar vira drawer, conteúdo full-width
       ---------------------------------------------------------------- */

    /* Topbar fixa com o botão hambúrguer */
    .cnt-mobile-topbar {
        display: flex !important;
        align-items: center;
        gap: 12px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 54px;
        padding: 0 14px;
        background: #ffffff;
        border-bottom: 1px solid #e7ebef;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        z-index: 1200;
    }

    .cnt-menu-btn {
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        background: transparent;
        color: #13212c;
        font-size: 22px;
        line-height: 1;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        cursor: pointer;
    }

    .cnt-menu-btn:active {
        background: #eef2f6;
    }

    .cnt-topbar-brand {
        font-family: "Nunito", "Poppins", sans-serif;
        font-weight: 800;
        font-size: 20px;
        color: #1565c0;
        letter-spacing: -0.5px;
    }

    .cnt-topbar-brand b {
        color: #e65100;
        font-weight: 800;
    }

    /* Sidebar -> painel deslizante (off-canvas) */
    .dashboard-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 84vw !important;
        max-width: 320px !important;
        min-width: 0 !important;
        border-radius: 0 !important;
        z-index: 1300;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.28);
        transform: translateX(-110%);
        transition: transform 0.28s ease;
        -webkit-overflow-scrolling: touch;
    }

    body.cnt-nav-open .dashboard-nav {
        transform: translateX(0);
    }

    /* Backdrop escuro atrás do drawer */
    .cnt-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
        z-index: 1290;
    }

    body.cnt-nav-open .cnt-nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Trava o scroll do fundo quando o menu está aberto */
    body.cnt-nav-open {
        overflow: hidden;
    }

    /* Conteúdo ocupa a tela toda; remove a margem/padding do desktop */
    .dashboard-app {
        margin: 0 !important;
        min-height: auto !important;
    }

    .dashboard-content {
        /* o padding-left:80px é inline no MainLayout — precisa de !important */
        padding: 68px 14px 24px 14px !important;
        width: 100% !important;
    }

    /* ----------------------------------------------------------------
       2) TIPOGRAFIA — reduz títulos enormes do desktop
       ---------------------------------------------------------------- */
    h1,
    .h1 {
        font-size: 1.7rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    .titulo-grid,
    .tit-grid {
        font-size: 19px !important;
        line-height: 1.3 !important;
    }

    .subtitulo-grid {
        font-size: 14px !important;
    }

    /* ----------------------------------------------------------------
       3) CABEÇALHOS DE TELA — empilham título + ações
       ---------------------------------------------------------------- */
    .header-container,
    .header-container-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    /* Linha de busca/filtros: ocupa a largura toda e quebra */
    .search-controls-container {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        gap: 10px !important;
    }

    /* Componentes Syncfusion dentro de busca/cabeçalho -> largura total
       (vencem o Width="...px" definido inline pelo componente) */
    .search-controls-container .e-input-group,
    .search-controls-container .e-control-wrapper,
    .search-controls-container .e-ddl,
    .search-controls-container .e-textbox,
    .search-controls-container .e-btn,
    .header-container .e-input-group,
    .header-container .e-control-wrapper,
    .header-container .e-ddl,
    .header-container .e-btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* ----------------------------------------------------------------
       4) CARDS / WRAPPERS — uma coluna e padding menor
       ---------------------------------------------------------------- */
    .card-layout-container {
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .info-card.e-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    .grid-wrapper,
    .grid-wrapper-2,
    .grid-wrapper-3,
    .grid-wrapper-calendar,
    .grid-wrapper-cadastro {
        padding: 14px !important;
        border-radius: 10px !important;
    }

    /* permite rolar grids largos na horizontal em vez de cortar/espremer */
    .grid-wrapper,
    .grid-wrapper-2 {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ----------------------------------------------------------------
       5) SYNCFUSION GRID (tabelas) — mais compacto e rolável
       ---------------------------------------------------------------- */
    .e-grid {
        font-size: 13px !important;
    }

    .e-grid .e-gridheader .e-headercell,
    .e-grid .e-headercelldiv {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 12px !important;
    }

    .e-grid .e-rowcell {
        padding: 8px !important;
        font-size: 13px !important;
    }

    .e-grid .e-pager {
        overflow-x: auto;
    }

    .e-grid .e-pager .e-pagercontainer {
        min-width: 0;
    }

    /* ----------------------------------------------------------------
       6) FORMULÁRIOS — campos empilham (1 coluna) e ocupam a largura
       ---------------------------------------------------------------- */
    .form-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .form-group {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .form-group .e-input-group,
    .form-group .e-control-wrapper,
    .form-group .e-ddl,
    .form-group .e-textbox,
    .form-row .e-input-group,
    .form-row .e-control-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* ----------------------------------------------------------------
       7) DIÁLOGOS / POPUPS Syncfusion — cabem na tela do celular
       ---------------------------------------------------------------- */
    .e-dialog {
        max-width: 94vw !important;
        min-width: 0 !important;
    }

    .e-dialog .e-dlg-content {
        font-size: 14px;
    }

    .e-dlg-container .e-dialog {
        margin: 0 auto;
    }

    /* ----------------------------------------------------------------
       8) AGENDA / CALENDÁRIO / CRONOGRAMA — painéis lado a lado empilham
       ---------------------------------------------------------------- */
    .container-grid,
    .container-grid-2 {
        flex-direction: column !important;
        height: auto !important;
        gap: 14px !important;
        padding: 0 !important;
    }

    .container-grid > div:first-child {
        width: 100% !important;
        height: auto !important;
    }

    .e-schedule {
        min-height: 70vh;
    }

    /* ----------------------------------------------------------------
       8b) PAINÉIS COM LARGURA FIXA INLINE (Index, RoteiroVisitas...)
       Os estilos estão embutidos no HTML (min-width: 350/450/600px),
       então usamos seletor de atributo — só no mobile — para que os
       painéis quebrem em vez de estourar a largura da tela. Os pais
       desses painéis já usam flex-wrap, então eles empilham.
       ---------------------------------------------------------------- */
    [style*="min-width: 300px"],
    [style*="min-width: 350px"],
    [style*="min-width: 400px"],
    [style*="min-width: 450px"],
    [style*="min-width: 500px"],
    [style*="min-width: 600px"],
    [style*="width: 220px"],
    [style*="width: 230px"],
    [style*="width: 240px"],
    [style*="width: 250px"],
    [style*="width: 260px"],
    [style*="width: 280px"],
    [style*="width: 300px"],
    [style*="width: 310px"],
    [style*="width: 320px"],
    [style*="width: 350px"] {
        min-width: 0 !important;
        width: 100% !important;
        flex-basis: 100% !important;
        box-sizing: border-box;
    }

    /* Cabeçalho da Home (saudação + data/clima/sino): permite quebrar */
    .cnt-home-head {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* ----------------------------------------------------------------
       8c) TELAS COM LAYOUT PRÓPRIO (não usam as classes globais)
       ---------------------------------------------------------------- */

    /* Central de Ajuda — duas colunas (menu + conteúdo) viram uma só */
    .ajuda-layout {
        flex-direction: column !important;
        min-height: 0 !important;
    }

    .ajuda-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: 42vh;
        position: static !important;
        border-right: none !important;
        border-bottom: 1px solid #e9ecef !important;
        padding: 10px 0 !important;
    }

    .ajuda-layout > main {
        padding: 20px 16px !important;
    }

    /* Página pública de Privacidade/Suporte (layout próprio, sem dashboard) */
    .pagina-privacidade nav {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px !important;
    }

    .pagina-privacidade .container {
        margin: 20px auto !important;
    }

    .pagina-privacidade section {
        padding: 22px !important;
        margin-bottom: 22px !important;
    }

    .pagina-privacidade .support-card {
        padding: 20px !important;
    }

    /* ----------------------------------------------------------------
       9) ALVOS DE TOQUE — botões confortáveis para o dedo
       ---------------------------------------------------------------- */
    .e-btn,
    .btn,
    button {
        min-height: 42px;
    }

    /* botões "cheios" em barras de ação ficam melhores ocupando a largura */
    .action-buttons-wrapper .e-btn,
    .action-buttons-wrapper-2 .e-btn {
        min-height: 40px;
    }

    .dashboard-content img,
    .dashboard-content canvas,
    .dashboard-content video,
    .dashboard-content iframe {
        max-width: 100% !important;
        height: auto;
    }

    .dashboard-content canvas {
        height: auto !important;
    }

    [style*="grid-template-columns: repeat(2, 1fr)"],
    [style*="grid-template-columns:repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

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

    .sup-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
}

/* ====================================================================
   CELULAR PEQUENO — ajustes finos (<= 480px)
   ==================================================================== */
@media (max-width: 480px) {

    .dashboard-content {
        padding: 64px 10px 20px 10px !important;
    }

    .dashboard-nav {
        width: 88vw !important;
    }

    .titulo-grid,
    .tit-grid {
        font-size: 18px !important;
    }

    .grid-wrapper,
    .grid-wrapper-2,
    .grid-wrapper-3,
    .grid-wrapper-calendar,
    .grid-wrapper-cadastro {
        padding: 12px !important;
    }

    /* cards de métrica: valores e ícones proporcionais */
    .card-metric-value {
        font-size: 20px !important;
    }

    .card-title {
        font-size: 15px !important;
    }

    /* grid ainda mais enxuto */
    .e-grid .e-rowcell,
    .e-grid .e-gridheader .e-headercell {
        padding: 6px !important;
    }

    /* botões de ação empilhados em telas muito estreitas */
    .action-buttons-wrapper {
        flex-wrap: wrap;
        gap: 6px;
    }
}