/* ==========================================================================
   RESPONSIVIDADE — EcoGlobal
   ==========================================================================
   Arquivo único e central para toda a responsividade da plataforma (mobile,
   tablet, notebooks com resolução menor). Carregado por último (depois de
   bootstrap.template.css / global.css / themes.css) em todos os "shells" da
   aplicação (main, area-empresa, administrativo, login, registro).

   Por que tanto !important aqui?
   Várias partes da UI injetam <style> em runtime (o gerador de sidebar em
   components.js, e os fragmentos de página carregados via AJAX pelo router
   SPA) — esses <style> acabam entrando no DOM DEPOIS deste arquivo, então
   em empate de especificidade eles venceriam uma regra "normal" mesmo
   dentro de um @media. Usar !important aqui garante que as regras de
   breakpoint sempre prevaleçam, independente da ordem de carregamento.

   Breakpoints usados neste arquivo:
     1200px — colapso da navegação do topbar em menu hambúrguer (cobre
              notebooks com resolução menor, ex.: 1280px, 1366px)
      992px — tablets / grids de 4 colunas -> 2 colunas
      860px — dashboards com 2 colunas -> empilhado
      768px — telas de celular em paisagem / tablets pequenos
      640px — celulares
      480px — celulares pequenos
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Rede de segurança global — evita overflow horizontal e mídia estourando
   -------------------------------------------------------------------------- */

img, svg, video, iframe, canvas {
    max-width: 100%;
}


/* --------------------------------------------------------------------------
   1. Topbar — menu de navegação mobile (main + area-empresa)
   -------------------------------------------------------------------------- */

/* Botão hambúrguer: só existe em telas menores. !important necessário porque
   .btn-icon (global.css, aninhado dentro de .topbar) tem display:flex com
   especificidade maior que um seletor de classe única. */
.topbar-mobile-toggle {
    display: none !important;
    border: none;
    cursor: pointer;
}

@media (max-width: 1200px) {
    .topbar.topbar-public .topbar-nav-menu,
    .topbar.topbar-empresa .topbar-nav-menu {
        display: none !important;
    }

    .topbar.topbar-public .topbar-inner,
    .topbar.topbar-empresa .topbar-inner {
        grid-template-columns: auto 1fr !important;
    }

    .topbar.topbar-public .topbar-mobile-toggle,
    .topbar.topbar-empresa .topbar-mobile-toggle {
        display: flex !important;
    }

    /* Painel flutuante do menu mobile, aberto via toggleMobileNav() (global.js) */
    .topbar.mobile-nav-open .topbar-nav-menu {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: calc(100% + 10px);
        left: 20px;
        right: 20px;
        width: auto;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        gap: 4px;
        padding: 12px !important;
        border-radius: 20px;
        background: var(--dropdown-bg);
        border: 1px solid var(--dropdown-border);
        box-shadow: 0 10px 25px var(--dropdown-shadow);
        z-index: 1001;
    }

    .topbar.mobile-nav-open .topbar-nav-menu .page-link {
        width: 100% !important;
        justify-content: flex-start;
        color: var(--dropdown-item-text) !important;
    }
}

/* Ações da direita (busca, avatar, badges) mais compactas em telas pequenas */
@media (max-width: 480px) {
    .topbar .topbar-inner { padding: 6px 10px !important; gap: 10px !important; }
    .topbar .actions-bar { gap: 6px !important; }
    .topbar .topbar-logo { height: 28px !important; }
    .topbar .context-badge { display: none !important; }
}


/* --------------------------------------------------------------------------
   2. Layout de dashboard com sidebar (administrativo, área-empresa, perfil)
      Cobre qualquer container inicializado pela função sidebar() de
      components.js — .sidebar-container, #side-container, etc.
   -------------------------------------------------------------------------- */

/* Botão que expande/recolhe o menu — só existe visualmente no mobile (ver @media
   abaixo). Injetado como primeiro filho de .sidebar por enhanceMobileSidebars()
   em global.js. No desktop a sidebar não tem esse botão nem se colapsa. */
.sidebar-mobile-toggle {
    display: none;
}

@media (max-width: 900px) {
    [sidebar="initialized"] {
        flex-direction: column !important;
        gap: 18px; /* respiro entre o menu e o conteúdo, em vez de ficarem colados */
    }

    /* "aside.sidebar" (em vez de só ".sidebar") é de propósito: o componente injeta em
       runtime a regra ".sidebar:has(.sidebar-label) { padding: 20px !important }" (mesma
       especificidade que um seletor de classe + atributo) — como ela entra no DOM depois
       deste arquivo, no empate ela vencia e o padding de 20px nunca era substituído,
       deixando a barra do toggle "flutuando" no topo da caixa em vez de centralizada.
       Somar o seletor de tag eleva a especificidade e garante que esta regra sempre vença. */
    [sidebar="initialized"] > aside.sidebar {
        width: 100% !important;
        max-height: 60px; /* recolhida: só a barra do toggle aparece */
        overflow: hidden !important;
        padding: 8px 14px !important;
        transition: max-height .25s ease;
    }

    [sidebar="initialized"] > aside.sidebar.expanded {
        max-height: 60vh;
        overflow-y: auto !important;
    }

    .sidebar-mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: none;
        border: none;
        color: var(--text-heading);
        font-weight: 700;
        font-size: 15px;
        padding: 10px 6px;
        cursor: pointer;
    }

    .sidebar-mobile-toggle .bi {
        color: var(--eco-green, var(--primary));
        font-size: 18px;
        transition: transform .2s ease;
    }

    [sidebar="initialized"] > .sidebar.expanded .sidebar-mobile-toggle .bi {
        transform: rotate(180deg);
    }

    /* Separa visualmente a barra do toggle da lista de itens quando expandida */
    [sidebar="initialized"] > .sidebar.expanded .sidebar-mobile-toggle {
        margin-bottom: 8px;
        border-bottom: 1px solid var(--border-subtle);
        padding-bottom: 14px;
    }

    [sidebar="initialized"] .content-container {
        padding: 0 !important;
    }

    /* O toggle recolhido já mostra o nome da tela atual — o título grande que cada
       página desenha no topo do próprio conteúdo (ex.: "Dashboard de Ecossistema")
       fica redundante no mobile. .section-title é a classe já usada por a maioria
       dessas páginas (administrativo, área-empresa, perfil) para esse título/cabeçalho. */
    [sidebar="initialized"] .content-container .section-title {
        display: none !important;
    }

    /* Cada página dentro do content-container é envolvida por um <section> próprio
       (window-pane), que herda o padding lateral genérico de "section" (global.css).
       A sidebar não passa por esse wrapper, então sem isso o conteúdo (ex.: .glass-card)
       fica mais estreito que a barra da sidebar acima dele. Zera só o padding lateral,
       mantendo o espaçamento vertical original. */
    [sidebar="initialized"] .content-container section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* --------------------------------------------------------------------------
   3. Grids de cartões (produtos, parceiros, identidade visual)
   -------------------------------------------------------------------------- */

/* main/content/home.php, empresa.php, marketplace.php */
@media (max-width: 992px) {
    .product-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 560px) {
    .product-grid { grid-template-columns: 1fr 1fr !important; }
    .wrap { padding: 0 18px !important; }
    .mkt-wrap { padding: 22px 18px 50px !important; }
}

/* main/content/parceiros.php */
@media (max-width: 992px) {
    .partner-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 640px) {
    .partner-grid { grid-template-columns: 1fr !important; }
}

/* administrativo/content/panel/identidade-visual.php */
@media (max-width: 860px) {
    .iv-grid.active { grid-template-columns: 1fr !important; }
}


/* --------------------------------------------------------------------------
   4. main/content/home.php — hero e título
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .hero-section { height: auto !important; min-height: 340px; }
    .hero-slide-nav { width: 38px !important; height: 38px !important; font-size: 1rem !important; }
    .hero-slide-prev { left: 10px !important; }
    .hero-slide-next { right: 10px !important; }
    .hero-slide-content { flex-direction: column !important; align-items: flex-start !important; padding: 22px 22px 26px !important; }
    .hero-slide-title { font-size: 20px !important; }

    /* main/content/sobre-nos.php */
    .section-title { font-size: 2.2rem !important; }
}


/* --------------------------------------------------------------------------
   5. Tabelas — nenhuma página envolve <table> em .table-responsive, então
      global.js (wrapResponsiveTables) envolve toda <table> num
      .table-responsive-auto em runtime. Deixar a <table> como display:table
      normal (em vez de display:block) preserva o alinhamento de colunas
      entre thead e tbody; quem rola é o wrapper.
   -------------------------------------------------------------------------- */

.table-responsive-auto {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* .custom-table (default.stylesheet.css) implementa cabeçalho fixo desenhando CADA
   linha (thead e cada <tr> do tbody) como sua própria mini-table table-layout:fixed
   de largura 100%. Isso é ótimo pra manter colunas alinhadas, mas em telas estreitas
   o "100%" vira poucos pixels por coluna e o texto, sem clip, vaza visualmente por
   cima da coluna vizinha (não dá pra ver que são colunas — parece tudo embaralhado).
   min-width garante colunas com espaço mínimo razoável (o wrapper acima rola o
   excesso); overflow+ellipsis é a rede de segurança para quando mesmo assim o
   conteúdo não couber. */
.table-responsive-auto table.custom-table {
    min-width: 640px;
}

.table-responsive-auto table.custom-table td,
.table-responsive-auto table.custom-table th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   6. Modais (.cyan-modal / .mdl)
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
    .cyan-modal { width: 94% !important; max-height: 94vh !important; }
    .cyan-modal-header,
    .cyan-modal-body,
    .cyan-modal-footer { padding-left: 16px !important; padding-right: 16px !important; }
    .cyan-modal-footer { flex-wrap: wrap; }
}


/* --------------------------------------------------------------------------
   7. Login / Registro — cartão centralizado com position:absolute quebra em
      viewports curtos (o body tem overflow:hidden). Em telas pequenas o
      cartão volta ao fluxo normal, permitindo rolagem.
   -------------------------------------------------------------------------- */

@media (max-width: 700px), (max-height: 700px) {
    body:has(.login-card),
    body:has(.register-card) {
        overflow-y: auto !important;
    }

    .login-card,
    .register-card {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 24px auto !important;
    }
}

@media (max-width: 480px) {
    .login-card,
    .register-card {
        padding: 1.75rem 1.25rem !important;
        border-radius: 1.25rem !important;
    }

    main.container { mask-image: none !important; }
}