/* ==========================================================================
   Portal do Aluno - ajustes para celular e tablet (Etapa 1)

   Carregado por:
   - includes/scripts_header.php (todas as paginas internas do modulo)
   - autenticacao/login.php e autenticacao/esqueci-minha-senha.php

   O CSS proprio de cada pagina (bloco <style> no <head>) vem DEPOIS deste
   arquivo. Por isso os seletores comecam com "html body" (mais especificos)
   e so usam !important onde a pagina tambem usa ou onde ha estilo inline.

   Pontos de quebra (os mesmos do Bootstrap 4 usado no portal):
   - ate 991.98px: tablet (o menu lateral vira gaveta)
   - ate 767.98px: tablet pequeno / celular deitado
   - ate 575.98px: celular
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Login e Esqueci minha senha (body.account-body)
   A .row.vh-100 fica sem .container em volta e as margens negativas do
   Bootstrap geravam rolagem lateral de 8px em qualquer largura de tela.
   -------------------------------------------------------------------------- */
html body.account-body > .row.vh-100,
html body.account-body .auth-page .row {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 767.98px) {
    /* Botao do WhatsApp (gif) menor, para nao cobrir o logo da tweduc */
    html body .wa-login {
        bottom: 12px !important;
        right: 6px !important;
    }

    html body .wa-login img {
        width: 120px;
        height: auto;
    }

    /* A linha principal tinha altura fixa (100vh) e o conteudo transbordava:
       deixa crescer com o conteudo */
    html body.account-body > .row.vh-100 {
        height: auto !important;
        min-height: 100vh;
    }

    /* Espaco abaixo do logo da tweduc para ele ficar acima do botao do WhatsApp */
    html body.account-body img[src*="logo-tweduc-rodape"] {
        margin-bottom: 96px;
    }
}


/* --------------------------------------------------------------------------
   2. Paginas internas: cabecalho, banners, textos pequenos e areas de toque
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Cabecalho sempre por cima do conteudo. Com o menu aberto o tema sobe o
       conteudo (z-index 2) acima do cabecalho (z-index 1) e, com a pagina rolada,
       os cartoes apareciam por cima do cabecalho.
       !important: a regra do tema usa [dir=ltr] e e mais especifica. */
    html body .mdk-header-layout > .mdk-header {
        z-index: 3 !important;
    }

    /* Icone do menu (gaveta): maior, mais escuro e com area de toque de 44px */
    html body #default-navbar .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
    }

    html body #default-navbar .navbar-toggler .material-icons {
        font-size: 28px;
        color: #1a237e;
    }

    /* Titulos dos cartoes e rotulos dos campos (eram 11px) */
    html body .dados-card-header h6,
    html body .dados-content .dados-card-header h6 {
        font-size: 0.8rem !important;
    }

    html body .field-label {
        font-size: 0.78rem;
    }

    /* Botao "Trocar foto" (Meus dados / Atualizar dados) */
    html body .upload-label {
        min-height: 40px;
        padding: 8px 14px;
        font-size: 0.82rem;
    }

    /* Botoes do calendario (FullCalendar): Anterior, Proximo, Hoje, Mes, Semana, Dia */
    html body .fc .fc-toolbar .fc-button {
        height: auto;
        min-height: 40px;
        padding: 0 0.9em;
        font-size: 0.85rem;
    }

    /* Controles das tabelas (DataTables): Exibir, Pesquisar e paginacao */
    html body .dataTables_wrapper .dataTables_length select,
    html body .dataTables_wrapper .dataTables_filter input {
        height: auto;
        min-height: 40px;
    }

    html body .dataTables_wrapper .dataTables_paginate .page-link {
        min-width: 40px;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* As linhas internas do DataTables (.row) tem margens negativas do Bootstrap
       e criavam uma rolagem lateral dentro da area da tabela */
    html body .dataTables_wrapper > .row {
        margin-left: 0;
        margin-right: 0;
    }

    html body .dataTables_wrapper > .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 767.98px) {
    /* Banner azul do topo das paginas */
    html body .dados-banner {
        padding: 24px 0 64px;
    }

    html body .dados-banner-inner {
        gap: 12px;
    }

    html body .dados-banner-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    html body .dados-banner-icon svg {
        width: 22px;
        height: 22px;
    }

    /* Foto do aluno no banner (tem tamanho em estilo inline) */
    html body .dados-banner-icon img {
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
    }

    html body .dados-banner h2 {
        font-size: 1.35rem;
        line-height: 1.25;
    }

    html body .dados-banner p {
        font-size: 0.85rem;
    }

    /* Capa: a data da saudacao vai para a linha de baixo, em tamanho menor */
    html body .banner-saudacao-sep {
        display: none;
    }

    html body .banner-saudacao-data {
        display: block;
        margin-top: 4px;
        font-size: 0.9rem;
        font-weight: 500;
        opacity: 0.9;
    }

    /* Campos com fonte de 16px: evita o zoom automatico do iPhone ao tocar no campo */
    html body input.form-control,
    html body select.form-control,
    html body textarea.form-control,
    html body .dataTables_wrapper .dataTables_length select,
    html body .dataTables_wrapper .dataTables_filter input {
        font-size: 16px;
    }
}