/* SESB no celular (app e navegador). Carregado em todas as páginas por core/app_shell.py.
 * No computador (telas acima de 768 px) nada daqui se aplica. */
@media (max-width: 768px) {
    /* Nada é cortado na página: o que for mais largo que a tela rola dentro do
       próprio quadro (sesb-app.js marca esses quadros). Não use overflow
       hidden/clip no html ou no body: no WebView do Android isso trava a rolagem
       e esconde o que passa da borda. */
    .sesb-corta-enfeite { overflow-x: hidden; }
    @supports (overflow-x: clip) { .sesb-corta-enfeite { overflow-x: clip; } }
    .sesb-altura-livre { height: auto !important; }
    .sesb-rolagem-x { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; }

    .sesb-tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

    /* Tabelas mais largas que a tela (marcadas por sesb-app.js): a primeira
       coluna (normalmente o nome do aluno) fica fixa à esquerda enquanto o
       resto rola. */
    table.sesb-tabela-larga > thead > tr > :first-child,
    table.sesb-tabela-larga > tbody > tr > :first-child,
    table.sesb-tabela-larga > tr > :first-child {
        position: sticky;
        left: 0;
        z-index: 3;
        background-color: var(--bs-body-bg, #fff);
        box-shadow: 1px 0 0 rgba(15, 23, 42, .12);
    }
    table.sesb-tabela-larga > thead > tr > :first-child { z-index: 4; }

    /* Se essa primeira coluna for larga demais, ela encolhe e o nome quebra em linhas. */
    table.sesb-col1-larga { min-width: 0 !important; }
    table.sesb-col1-larga > thead > tr > :first-child,
    table.sesb-col1-larga > tbody > tr > :first-child,
    table.sesb-col1-larga > tr > :first-child {
        min-width: 0 !important;
        width: 38vw !important;
        max-width: 38vw !important;
        white-space: normal !important;
        overflow-wrap: break-word;
        font-size: .86rem;
        line-height: 1.2;
    }
    table.sesb-col1-larga > tbody > tr > :first-child * {
        white-space: normal !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* Barra de navegação inferior da equipe (professor, coordenação, gestão).
   O aluno já tem a dele no Portal do Aluno. */
.sesb-barra-inferior { display: none; }
@media (max-width: 768px) {
    .sesb-barra-inferior {
        display: flex;
        position: fixed;
        left: 10px; right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 1030;
        background: rgba(255, 255, 255, .97);
        border: 1px solid rgba(15, 23, 42, .08);
        border-radius: 22px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
        padding: 6px;
        backdrop-filter: blur(8px);
    }
    .sesb-barra-inferior a,
    .sesb-barra-inferior button {
        flex: 1;
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        border: 0; background: transparent; border-radius: 16px;
        padding: 7px 2px; color: #475569; text-decoration: none;
        font-size: .7rem; font-weight: 700;
    }
    .sesb-barra-inferior i { font-size: 1.12rem; }
    .sesb-barra-inferior .ativo { background: #0d6efd; color: #fff; }
    /* Espaço no fim da página para a barra não cobrir o último conteúdo.
       A classe vem do sesb-app.js (celulares antigos não entendem :has). */
    body.sesb-com-barra-inferior,
    body:has(.sesb-barra-inferior) { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
    html:has(body.sesb-destravada:not(.modal-open)), body.sesb-destravada:not(.modal-open) { overflow-y: auto !important; height: auto !important; min-height: 100%; }
    body.sesb-tela-camera .sesb-barra-inferior { display: none !important; }
    body.sesb-com-barra-inferior #toastSalvo,
    body:has(.sesb-barra-inferior) #toastSalvo { bottom: 90px !important; }
}