/* =========================================================================
   ROOF - CAMADA DE RESPONSIVIDADE
   Carregada por roof_responsivo.php no fim do <head> de cada tela.

   Princípio: o visual das telas não muda; muda só a "casca" do layout.
   Em vez de travar a página na altura da janela (height: 100vh +
   overflow: hidden) e encolher/cortar o conteúdo para caber, a página
   passa a rolar naturalmente quando o conteúdo é maior que a janela
   (janela baixa ou zoom do navegador alto).
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. CRIAR VAGA - /contratante/ (index.php + modal_comecar.php)
   ------------------------------------------------------------------------- */
@media (min-width: 769px) {
    html:has(body.contratante-create-page),
    body.contratante-create-page {
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body.contratante-create-page {
        min-height: 100vh !important;
    }

    body.contratante-create-page .roof-create-main {
        height: auto !important;
        min-height: calc(100dvh - 70px) !important;
        overflow-y: visible !important;
        overflow-x: clip !important;
        /* Centraliza quando cabe; quando não cabe, começa do topo (sem cortar). */
        align-items: flex-start !important;
    }

    /* Sem encolhimento automático: o conteúdo mantém o tamanho real e a página rola. */
    body.contratante-create-page .roof-create-main .roof-create-card,
    body.contratante-create-page .roof-create-main .roof-success-screen {
        zoom: 1 !important;
        transform: none !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
    }
}


/* -------------------------------------------------------------------------
   2. LOGIN E CADASTRO - login.php, cadastro.php
   ------------------------------------------------------------------------- */
@media (min-width: 521px) {
    html:has(.roof-login-page),
    body:has(.roof-login-page) {
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body:has(.roof-login-page) .roof-login-page {
        height: auto !important;
        min-height: calc(100dvh - var(--roof-header-height, 70px)) !important;
        overflow-y: visible !important;
        overflow-x: clip !important;
        /* Centraliza quando cabe; quando não cabe, não corta o topo. */
        align-items: flex-start !important;
    }

    body:has(.roof-login-page) .roof-login-page > .roof-login-card,
    body:has(.roof-login-page) .roof-login-page > .roof-vaga-success {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }
}

/* -------------------------------------------------------------------------
   3. PAINEL DO CONTRATANTE - casca comum (cabeçalho + menu lateral + conteúdo)
   Antes: html/body/.roof-app/.roof-layout travados em 100vh com
   overflow: hidden -> conteúdo cortado ou comprimido.
   Agora: a página rola; o cabeçalho e o menu lateral ficam fixos (sticky).
   ------------------------------------------------------------------------- */
html:has(body .roof-topbar),
html body:has(.roof-topbar) {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

html body:has(.roof-topbar) .roof-app {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    grid-template-rows: auto auto !important;
}

html body:has(.roof-topbar) .roof-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
}

html body:has(.roof-topbar) .roof-layout {
    height: auto !important;
    min-height: calc(100dvh - var(--roof-header-height, 96px)) !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: start !important;
}

/* Área de conteúdo de cada tela: cresce com o conteúdo. */
html body:has(.roof-topbar) .roof-layout > section,
html body:has(.roof-topbar) .roof-layout > main,
html body:has(.roof-topbar) .roof-layout > div:not(.roof-sidebar) {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* Consistência da casca entre as telas (2026-10-18).
   Cada tela tem a própria cópia do CSS do cabeçalho e do menu lateral;
   estas regras fixam o que variava de uma tela para outra. */

/* Barra de rolagem sempre presente (desabilitada quando não há o que rolar):
   telas que rolam e telas que não rolam ficam com a mesma largura útil, sem
   "pulo" horizontal do cabeçalho e do conteúdo ao trocar de tela. */
html:has(body .roof-topbar) {
    overflow-y: scroll !important;
}

/* Card "Precisa de ajuda?": mesma altura em todas as telas
   (Relatórios e Financeiro forçavam altura mínima própria). */
html body:has(.roof-topbar) .roof-sidebar .roof-support-card {
    min-height: auto !important;
}

/* Links do topo: cada rótulo reserva a largura da versão em negrito, para o
   item ativo não empurrar os vizinhos ao trocar de tela. */
html body:has(.roof-topbar) .roof-topnav .roof-topnav-label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

html body:has(.roof-topbar) .roof-topnav .roof-topnav-label::after {
    content: attr(data-label);
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
}

/* Título e subtítulo de cada tela do painel com o mesmo tamanho
   (variavam de 22px a 28px entre Vagas, Candidatos, Relatórios etc.).
   O título de destaque do Gerenciamento de vagas (.roof-title) fica de fora. */
@media (min-width: 861px) {
    html body:has(.roof-topbar) .roof-layout h1:not(.roof-title) {
        font-size: clamp(22px, 1.4vw, 28px) !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }

    html body:has(.roof-topbar) .roof-layout h1:not(.roof-title) + p {
        font-size: clamp(12px, 0.72vw, 14px) !important;
        line-height: 1.45 !important;
    }
}

/* Tablet (861–1180px): Relatórios e Financeiro escondiam o menu lateral e
   mudavam a grade; as outras telas mostram. Mesmo padrão em todas. */
@media (min-width: 861px) and (max-width: 1180px) {
    html body:has(.roof-topbar) .roof-layout {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    html body:has(.roof-topbar) .roof-sidebar {
        display: flex !important;
        width: 192px !important;
        max-width: 192px !important;
    }
}

/* Celular: o nome do usuário aparecia em algumas telas e não em outras. */
@media (max-width: 860px) {
    html body:has(.roof-topbar) .roof-user-name {
        display: block !important;
    }
}

/* Menu lateral fixo enquanto a página rola (desktop e tablet). */
@media (min-width: 861px) {
    html body:has(.roof-topbar) .roof-sidebar {
        position: sticky !important;
        top: calc(var(--roof-header-height, 96px) + clamp(8px, 1.4vh, 15px)) !important;
        align-self: start !important;
        height: calc(100dvh - var(--roof-header-height, 96px) - 2 * clamp(8px, 1.4vh, 15px)) !important;
        max-height: none !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}


/* -------------------------------------------------------------------------
   4. NOVA VAGA (painel) - nova_vaga.php
   Antes: página travada na altura da janela + formulário encolhido por JS
   (transform: scale até ~55%). Agora: tamanho real e a página rola.
   ------------------------------------------------------------------------- */
html:has(body .roof-create-shell),
html body:has(.roof-create-shell) {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

html body:has(.roof-create-shell) .roof-create-page {
    height: auto !important;
    min-height: calc(100dvh - var(--roof-create-header-height, 70px)) !important;
    overflow-y: visible !important;
    overflow-x: clip !important;
    align-items: flex-start !important;
}

html body:has(.roof-create-shell) .roof-create-shell {
    transform: none !important;
    zoom: 1 !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
}


/* -------------------------------------------------------------------------
   5. CONFIGURAÇÕES - configuracoes.php
   Antes: o conteúdo era encolhido por JS (zoom até 38%) para caber sem
   rolagem, ficando ilegível em telas baixas/zoom alto. Agora: tamanho real.
   ------------------------------------------------------------------------- */
html body:has(.roof-topbar) .settings-main-inner,
html body:has(.roof-topbar) .settings-grid {
    zoom: 1 !important;
    transform: none !important;
    height: auto !important;
    max-height: none !important;
}


/* -------------------------------------------------------------------------
   6. EQUIPE e FINANCEIRO - gerenciar_equipe.php, financeiro.php
   Antes: JS encolhia o conteúdo (zoom até 54% / 68%) para caber sem rolagem.
   Agora: tamanho real e a página rola.
   ------------------------------------------------------------------------- */
html body:has(.roof-topbar) .team-page-inner,
html body:has(.roof-topbar) .finance-inner {
    zoom: 1 !important;
    transform: none !important;
    height: auto !important;
    max-height: none !important;
}

/* Equipe: largura fixa de 1185px -> fluida (mesmo desenho quando há espaço). */
html body:has(.roof-topbar) .team-page-inner {
    width: 100% !important;
    max-width: 1185px !important;
    min-width: 0 !important;
}

html body:has(.roof-topbar) .team-layout-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 318px) !important;
}

html body:has(.roof-topbar) .team-summary-card {
    grid-template-columns: 54px minmax(0, 1fr) minmax(160px, 300px) auto !important;
}

html body:has(.roof-topbar) .team-layout-grid > *,
html body:has(.roof-topbar) .team-card {
    min-width: 0 !important;
}

@media (max-width: 1100px) {
    html body:has(.roof-topbar) .team-layout-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body:has(.roof-topbar) .team-summary-card {
        grid-template-columns: 54px minmax(0, 1fr) !important;
    }

    html body:has(.roof-topbar) .team-summary-card > :nth-child(n + 3) {
        grid-column: 1 / -1 !important;
    }
}

/* Configurações: duas colunas só quando há espaço; senão empilha. */
@media (max-width: 1100px) {
    html body:has(.roof-topbar) .settings-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* -------------------------------------------------------------------------
   7. GRADE MENU + CONTEÚDO
   Cada tela esconde o menu lateral numa largura diferente. Antes, a grade
   continuava reservando a coluna do menu (conteúdo espremido em 212px) ou
   dimensionava a coluna pelo conteúdo (página mais larga que o celular).
   Agora: coluna do menu "auto" (zero quando o menu some) + conteúdo fluido.
   ------------------------------------------------------------------------- */
html body:has(.roof-topbar) .roof-layout {
    grid-template-columns: auto minmax(0, 1fr) !important;
}

html body:has(.roof-topbar) .roof-layout > :not(.roof-sidebar) {
    grid-column: -2 / -1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html body:has(.roof-topbar) .roof-main-inner {
    min-width: 0 !important;
    max-width: 100% !important;
}


/* -------------------------------------------------------------------------
   8. TABELAS E GRADES LARGAS
   Tabelas mais largas que a tela rolam para o lado dentro do próprio card,
   em vez de cortar colunas.
   ------------------------------------------------------------------------- */
html body:has(.roof-topbar) .jobs-table-wrap,
html body:has(.roof-topbar) .candidates-table-wrap,
html body:has(.roof-topbar) .report-table-scroll {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Equipe: tabelas dentro de cards com overflow: hidden. */
html body:has(.roof-topbar) .team-card:has(> .team-members-table),
html body:has(.roof-topbar) .team-card:has(> .permissions-table) {
    overflow-x: auto !important;
}

html body:has(.roof-topbar) .team-members-table,
html body:has(.roof-topbar) .permissions-table {
    min-width: 700px !important;
}

/* Financeiro: 4 cards de métrica lado a lado só quando há espaço. */
@media (max-width: 1100px) {
    html body:has(.roof-topbar) .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    html body:has(.roof-topbar) .metric-grid,
    html body:has(.roof-topbar) .jobs-metrics-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Candidatos: barra do funil rola para o lado quando não cabe. */
@media (max-width: 1180px) {
    html body:has(.roof-topbar) .pipeline-grid {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
}


/* -------------------------------------------------------------------------
   9. CABEÇALHO NO CELULAR/TABLET
   O cabeçalho empilha (logo / usuário / menu), mas uma altura fixa de 82px
   fazia o menu e o avatar ficarem por cima do conteúdo.
   ------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    html body:has(.roof-topbar) .roof-topbar {
        height: auto !important;
        max-height: none !important;
        min-height: 72px !important;
    }
}

@media (max-width: 860px) {
    html body:has(.roof-topbar) .roof-topbar {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;
        /* Cabeçalho empilhado é alto: não fica fixo no celular para não ocupar a tela. */
        position: relative !important;
    }

    html body:has(.roof-topbar) .roof-topnav {
        justify-content: center !important;
    }
}


/* -------------------------------------------------------------------------
   10. AJUSTES PONTUAIS
   ------------------------------------------------------------------------- */
/* Financeiro (<= 1100px): botão "Comprar pacote" ficava numa coluna de 60px. */
@media (max-width: 1100px) {
    html body:has(.roof-topbar) .cta-banner .cta-button.primary,
    html body:has(.roof-topbar) .cta-banner .cta-button.secondary {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

/* Equipe: coluna "Ações" (Editar + menu) precisa de ~110px; antes invadia "Último acesso". */
html body:has(.roof-topbar) .team-members-table th:last-child,
html body:has(.roof-topbar) .team-members-table td:last-child {
    width: 112px !important;
    white-space: nowrap !important;
}

/* Vagas no celular: a tabela vira lista de cartões -> sem rolagem interna e sem cortar o cartão. */
@media (max-width: 860px) {
    html body:has(.roof-topbar) .jobs-table-wrap {
        overflow: visible !important;
    }

    html body:has(.roof-topbar) .jobs-table tr,
    html body:has(.roof-topbar) .jobs-table td {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* -------------------------------------------------------------------------
   11. MODAIS ABERTOS: TRAVAR O FUNDO
   (manter SEMPRE no fim do arquivo)
   Como a página agora rola pelo html/body, é preciso respeitar as travas
   que os modais aplicam ao abrir (classe no body ou body.style.overflow),
   para a página de trás não rolar junto com o modal.
   ------------------------------------------------------------------------- */
html:has(body.roof-checkout-open),
html:has(body.roof-dev-modal-open),
html:has(body.roof-enable-notifications-open),
html:has(body.roof-invite-member-open),
html:has(body.roof-job-view-open),
html:has(body.roof-popup-open),
html:has(body.roof-profile-drawer-open),
html:has(body[style*="overflow: hidden"]),
html body.roof-checkout-open,
html body.roof-dev-modal-open,
html body.roof-enable-notifications-open,
html body.roof-invite-member-open,
html body.roof-job-view-open,
html body.roof-popup-open,
html body.roof-profile-drawer-open,
html body[style*="overflow: hidden"] {
    overflow: hidden !important;
}