/* =============================================================
   responsive.css — beecrowd Judge
   Fase 1: bloqueadores globais + hamburger menu
   Breakpoints: 1024px (tablet/iPad/Surface), 768px, 480px
   ============================================================= */

/* Hamburger: oculto por padrão (desktop) */
.mobile-hamburger {
    display: none;
}

/* ── 1024px: iPad, Surface Pro, tablets ── */
@media screen and (max-width: 1024px) {

    /* 1. Remover min-widths que causam scroll horizontal */
    #container {
        min-width: 0 !important;
    }

    .content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 12px;
        box-sizing: border-box;
    }

    /* Header: layout flex limpo (sem row-reverse global) */
    header .content-big {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
        float: none !important;
    }

    /* Ocultar seção de avatar/flag no header mobile — hamburger substitui */
    header .h-small:not(.h-uri) {
        display: none !important;
    }

    /* Logo + sino: alinhar verticalmente */
    header .h-small.h-uri {
        display: flex !important;
        align-items: center;
        float: none !important;
        height: 50px;
        width: auto !important;
    }

    /* Conteúdo (fora do header): só remover a largura fixa */
    .content-big {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* 2. Sidebar: ocultar em mobile */
    #side-bar {
        display: none !important;
    }

    /* 3. Conteúdo principal: 100% de largura, limpar float */
    .main-content,
    .main-content-small,
    .main-content-wide,
    .main-content-big,
    .home-main-content {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
        clear: both;
    }

    /* 4. Navegação desktop: ocultar (apenas o menu do header) */
    .h-large {
        display: none !important;
        float: none !important;
    }

    /* 5. Seções do header: auto-width */
    .h-small {
        width: auto !important;
    }

    /* 6. Footer */
    .footer-content {
        width: auto !important;
        min-width: 0 !important;
    }

    footer .site-version,
    footer .site-information,
    footer .site-copyright,
    footer .site-coyright {
        padding: 5px 10px;
    }

    /* 7. Flash messages: relativo para não cobrir conteúdo */
    .flash,
    .auth {
        position: relative !important;
        top: auto !important;
    }

    /* 8. Hambúrguer: visível em mobile */
    .mobile-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px 14px;
        height: 50px;
        flex-shrink: 0;
    }

    .mobile-hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background-color: #454545;
        border-radius: 2px;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    /* Hambúrguer → X quando menu está aberto */
    header.mobile-nav-open .mobile-hamburger span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    header.mobile-nav-open .mobile-hamburger span:nth-child(2) {
        opacity: 0;
    }

    header.mobile-nav-open .mobile-hamburger span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* 9. Painel de navegação mobile */
    header.mobile-nav-open .h-large {
        display: block !important;
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        width: 100% !important;
        height: calc(100dvh - 50px);
        background: #fff;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 998;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        float: none !important;
        box-sizing: border-box;
    }

    /* Menu em coluna */
    header.mobile-nav-open #menu {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        padding: 8px 0 24px;
    }

    header.mobile-nav-open #menu > li {
        display: block !important;
        position: relative !important;
        height: auto !important;
        border-bottom: 1px solid #f0f0f0;
        float: none !important;
    }

    header.mobile-nav-open #menu > li > a {
        display: block !important;
        padding: 14px 20px !important;
        font-size: 14px;
        font-weight: 500;
        height: auto !important;
        line-height: normal !important;
    }

    /* Notificação badge dentro do item */
    header.mobile-nav-open #menu > li > em {
        position: absolute;
        right: 48px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Seta indicando submenu */
    header.mobile-nav-open #menu > li.has-submenu > a::after {
        content: '›';
        float: right;
        font-size: 18px;
        line-height: 1;
        color: #aaa;
        transition: transform 0.2s;
    }

    header.mobile-nav-open #menu > li.has-submenu.mobile-open > a::after {
        transform: rotate(90deg);
    }

    /* Submenus: estáticos e colapsados por padrão */
    header.mobile-nav-open .h-sub-menu,
    header.mobile-nav-open .h-sub-submenu {
        position: static !important;
        visibility: visible !important;
        display: none !important;
        box-shadow: none !important;
        border-top: 1px solid #f0f0f0;
        background: #fafafa;
        padding: 0;
        min-width: 0;
        width: 100% !important;
    }

    header.mobile-nav-open .h-sub-menu.mobile-open,
    header.mobile-nav-open .h-sub-submenu.mobile-open {
        display: block !important;
    }

    header.mobile-nav-open .h-sub-menu > li > a,
    header.mobile-nav-open .h-sub-submenu > li > a {
        display: block;
        padding: 12px 36px;
        font-size: 13px;
        color: #555;
    }

    header.mobile-nav-open .h-sub-menu hr,
    header.mobile-nav-open .h-sub-submenu hr {
        margin: 0 20px;
        border-top: 1px solid #eee;
    }

    /* Sub-submenu indentado */
    header.mobile-nav-open .h-sub-submenu > li > a {
        padding-left: 52px;
    }

    /* Problema/view: topo (breadcrumb + banner) ocupa largura total */
    .main-content-wide {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    #checking-banner,
    .main-content-big {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* Cabeçalho de página (#page-name): remover ícone sprite e padding do h1 */
    #page-name,
    #page-name-c,
    #page-name-cha,
    #page-name-user-profile,
    #page-name-user-profile-c,
    #page-name-user-profile-cha {
        background-image: none !important;
        margin: 8px 0 !important;
    }

    #page-name h1,
    #page-name-c h1,
    #page-name-cha h1,
    #page-name-user-profile h1,
    #page-name-user-profile-c h1,
    #page-name-user-profile-cha h1 {
        padding: 10px 12px !important;
        font-size: 16px !important;
        /* espaço à direita para os botões não sobreporem */
        padding-right: 8px !important;
    }

    /* Botões de ação: tirar posicionamento absoluto, fluir abaixo do h1 */
    .problem-actions {
        position: static !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px;
        padding: 6px 10px 8px !important;
        border-top: 1px solid #eee;
    }

    .problem-actions a {
        margin: 0 !important;
        font-size: 10px;
    }

    /* Breadcrumb / separadores inline: permitir quebra de linha */
    #page-name-c ul,
    #page-name-cha ul {
        white-space: normal;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Problema/IDE: empilhar descrição acima do editor */
    .blocks {
        flex-direction: column !important;
    }

    .block-col-60,
    .block-col-40 {
        width: 100% !important;
        margin: 0 0 16px !important;
        box-sizing: border-box;
    }
}

/* ── Fullscreen (problema aberto em nova aba): sem wrapper .content ── */
@media screen and (max-width: 1024px) {
    #description.fullscreen-description {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box;
        padding: 12px;
    }
}

/* ── Popup de termos (Banner-New-Profile): 600px fixo quebra em mobile ── */
@media screen and (max-width: 768px) {
    #new-profile-popup {
        width: calc(100vw - 32px) !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding: 0 16px 20px !important;
    }

    #new-profile-popup h2 {
        font-size: 16px !important;
        padding: 16px 0 !important;
    }

    #new-profile-popup .send-red {
        width: 100% !important;
    }
}

/* ── 768px: celulares landscape / tablets pequenos ── */
@media screen and (max-width: 768px) {

    .content {
        padding: 0 8px;
    }

    /* Travar overflow horizontal: impede zoom-out e scroll para a direita */
    html {
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    #container {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Garantir que nenhum filho direto do content ultrapasse a largura */
    .content > *,
    .content.page > * {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Tabelas: scroll horizontal dentro do container, não da página */
    .list,
    #table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .list table,
    #table table {
        min-width: 500px;
    }

    /* Página: margem reduzida */
    .content.page {
        margin: 8px auto 30px;
        border-radius: 2px;
    }

    /* Bell menu: não vazar à direita */
    .h-bell-menu {
        right: auto !important;
        left: -30px !important;
    }
}

/* ── 480px: celulares ── */
@media screen and (max-width: 480px) {

    .content {
        padding: 0 4px;
    }

    .content.page {
        margin: 0 auto 16px;
        border-radius: 0;
    }

    /* Ocultar textos de usuário no header para ganhar espaço */
    .h-user,
    .h-language {
        display: none !important;
    }
}

/* ── Drawer: fix de posicionamento que assume viewport ≥ 1030px ── */
@media screen and (max-width: 1040px) {
    #drawer .tour-drawer {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 24px) !important;
        max-width: 380px;
    }
}