/* responsive.css — melhorias responsivas IGEC (mobile/tablet)
   Carregado depois dos estilos inline de cada página, por isso usa !important
   para sobrepor regras de igual especificidade. */

/* Sem scroll horizontal + mapa de Portugal a caber na largura */
html, body { overflow-x: hidden !important; }
#mapa-portugal { max-width: 100% !important; height: auto !important; }

/* Mobile / tablet: navbar colapsado (Bootstrap navbar-expand-lg = < 992px) */
@media (max-width: 991px) {
    /* o container flex real é o .container-fluid (não o .navbar) */
    .navbar .container-fluid {
        flex-wrap: wrap !important;
        align-items: center !important;
        row-gap: 8px;
    }
    /* logo à esquerda, hambúrguer à direita; NÃO colapsar a imagem em flex
       (bug do iOS: imagem sem largura definida encolhe para 0 no Safari/Chrome iOS) */
    .navbar-brand { flex: 0 0 auto !important; margin-right: auto !important; }
    .navbar-brand img { height: 45px !important; width: auto !important; max-width: 75vw !important; display: inline-block !important; }
    /* cada bloco do navbar ocupa a linha toda (empilha); position:relative para
       a caixa de resultados (#searchResults, absoluta) se posicionar por este bloco */
    .navbar .container-fluid > div { width: 100% !important; position: relative !important; }
    /* caixa de pesquisa a 100% e legível */
    #search-box { width: 100% !important; max-width: 100% !important; }
    .search-txt { width: 100% !important; text-align: left !important; }
    /* cartões de ano/concelho/distrito (.district-card) cabem no ecrã pequeno
       — por defeito têm margin-left/right: 10% (~56px) e largura que transborda */
    .district-card {
        margin-left: 8px !important;
        margin-right: 8px !important;
        max-width: calc(100% - 16px) !important;
        width: auto !important;
        box-sizing: border-box !important;
    }

    /* RAIZ do corte à esquerda: .content (envolve tabela + listas) tem
       margin-left/right: -50px (truque de desenho desktop) que no telemóvel
       empurra todo o conteúdo ~50px para fora do ecrã à esquerda → anular */
    .content { margin-left: 0 !important; margin-right: 0 !important; }

    /* tabela de contagens das atividades: table-layout:fixed para caber na largura
       (colunas iguais). display:block parte-a numa tira estreita — NÃO usar. */
    .tabela-dados {
        display: table !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        font-size: 11px !important;
        border-collapse: collapse !important;
    }
    .tabela-dados thead { display: table-header-group !important; }
    .tabela-dados tbody { display: table-row-group !important; }
    .tabela-dados tr { display: table-row !important; }
    .tabela-dados th, .tabela-dados td {
        display: table-cell !important;
        text-align: center !important;
        padding: 3px 4px !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    /* o padrão "responsivo" inline punha td::before com data-label (vazio) +
       text-align:right + padding-left:50% → desligar o rótulo-fantasma (centramos acima) */
    .tabela-dados td::before { content: none !important; display: none !important; }

    /* listas de distritos/concelhos: tirar o indent default do <ul> e manter dentro
       da largura — senão o conteúdo é cortado à ESQUERDA (ex.: "veiro" em vez de "Aveiro") */
    .document-list, ul.document-list {
        padding-left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* nomes/links longos quebram dentro dos cartões em vez de forçarem a largura */
    .document-list, .school-list, .document-list-item { overflow-wrap: anywhere !important; }

    /* barra de pesquisa: MANTER font-size >= 16px, senão o iOS faz AUTO-ZOOM ao focar
       o input (bug conhecido do Safari/Chrome iOS). O placeholder longo é encurtado
       por JS (nav-mobile.js) para caber a 16px sem truncar. */
    .search-txt { font-size: 16px !important; }

    /* resultados da pesquisa (#searchResults tem width:610px fixo → trunca à direita)
       cabem no ecrã e os nomes/badges quebram de linha em vez de cortar */
    #searchResults {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
    }
    #searchResults li, #searchResults a, #searchResults span {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}