/* ==========================================================================
   Painel administrativo — Escola Técnica Educativa

   Estrutura herdada de associacaovivacomesperanca (shell com sidebar
   off-canvas, topbar com breadcrumb, área de conteúdo, rodapé), reescrita
   sobre Bootstrap 5 puro em vez do tema comprado.

   PALETA: os valores vêm da logotipo institucional, medidos por média de
   cluster de pixels — os mesmos do tema do Moodle.

   Contraste verificado (WCAG 2.1):
     #1f1fb3 + texto branco ....... 11,02:1   AA e AAA
     #14147a + texto branco ....... 14,88:1   AA e AAA
     #e0920d + texto branco ........ 2,53:1   REPROVA
     #e0920d + texto #1a1a1a ....... 6,87:1   AA

   Consequência: o laranja é ACENTO (bordas, faixas, destaques) e só recebe
   texto escuro. Quem carrega a interface é o azul.
   ========================================================================== */

:root {
    /* Marca */
    --azul: #1f1fb3;
    --azul-escuro: #14147a;
    --azul-profundo: #0d0d52;
    --laranja: #e0920d;
    --laranja-claro: #f59834;
    --cinza-marca: #e6e6e6;

    /* Superfícies */
    --fundo: #f4f5f9;
    --superficie: #ffffff;
    --borda: #e3e5ec;
    --texto: #1a1a1a;
    --texto-suave: #5b6070;

    /* Semânticas */
    --sucesso: #1f7a3d;
    --perigo: #b02a37;
    --alerta: var(--laranja);

    /* Medidas */
    --raio: .5rem;
    --raio-sm: .35rem;
    --sidebar-w: 264px;
    --topbar-h: 60px;

    /* Bootstrap */
    --bs-body-bg: var(--fundo);
    --bs-body-color: var(--texto);
    --bs-border-color: var(--borda);
    --bs-primary: var(--azul);
    --bs-link-color: var(--azul);
    --bs-link-hover-color: var(--azul-escuro);
}

body {
    background: var(--fundo);
    color: var(--texto);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------------ shell */
.shell { display: flex; min-height: 100vh; }
.shell-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: var(--sidebar-w);
}

/* ---------------------------------------------------------------- sidebar */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--azul-profundo);
    color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 1040;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    /* A faixa laranja amarra o cabeçalho do menu à identidade. */
    box-shadow: inset 0 -3px 0 var(--laranja);
}
.sidebar-brand img { height: 40px; width: auto; }
.sidebar-brand .brand-text { line-height: 1.15; min-width: 0; }
.sidebar-brand .brand-name {
    font-weight: 700;
    font-size: .92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-brand small { color: rgba(255, 255, 255, .65); font-size: .72rem; }
.sidebar-close {
    display: none;
    margin-left: auto;
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem .6rem; }

.sidebar-nav .nav-link,
.sidebar-nav .nav-parent {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .58rem .7rem;
    border-radius: var(--raio-sm);
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
}
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-parent:hover { background: rgba(255, 255, 255, .09); color: #fff; }

.sidebar-nav .nav-link.active {
    background: var(--azul);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--laranja);
}
.sidebar-nav .nav-parent.expanded { color: #fff; }

.sidebar-nav .nav-caret {
    margin-left: auto;
    transition: transform .15s ease;
    font-size: 1.1rem;
    line-height: 1;
}
.sidebar-nav .nav-parent.expanded .nav-caret { transform: rotate(90deg); }

.sidebar-nav .nav-children { padding: .15rem 0 .3rem .95rem; }
.sidebar-nav .nav-sublink {
    display: block;
    padding: .42rem .7rem;
    border-radius: var(--raio-sm);
    color: rgba(255, 255, 255, .68);
    text-decoration: none;
    font-size: .85rem;
    border-left: 2px solid rgba(255, 255, 255, .14);
}
.sidebar-nav .nav-sublink:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.sidebar-nav .nav-sublink.active {
    color: #fff;
    background: rgba(255, 255, 255, .11);
    border-left-color: var(--laranja);
    font-weight: 600;
}

.sidebar-footer { padding: .75rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.account-card {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255, 255, 255, .07);
    border-radius: var(--raio);
    padding: .55rem .65rem;
}
.account-avatar, .account-initials {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 36px;
}
.account-initials {
    display: grid;
    place-items: center;
    background: var(--laranja);
    /* Texto escuro sobre laranja: branco reprovaria em contraste. */
    color: #1a1a1a;
    font-weight: 700;
    font-size: .8rem;
}
.account-info { min-width: 0; flex: 1; }
.account-name {
    font-size: .84rem; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-role { font-size: .72rem; color: rgba(255, 255, 255, .6); }
.account-logout {
    background: none; border: 0;
    color: rgba(255, 255, 255, .7);
    padding: .2rem .3rem; border-radius: var(--raio-sm);
}
.account-logout:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* ----------------------------------------------------------------- topbar */
.topbar {
    height: var(--topbar-h);
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    position: sticky;
    top: 0;
    z-index: 1020;
}
.sidebar-toggle {
    display: none;
    background: none; border: 0;
    font-size: 1.3rem; color: var(--texto);
}
.breadcrumb-premium {
    display: flex; align-items: center; gap: .45rem;
    list-style: none; margin: 0; padding: 0;
    font-size: .86rem; color: var(--texto-suave);
}
.breadcrumb-premium .crumb + .crumb::before { content: '/'; margin-right: .45rem; opacity: .45; }
.breadcrumb-premium .crumb a { color: var(--texto-suave); text-decoration: none; }
.breadcrumb-premium .crumb.current { color: var(--azul-escuro); font-weight: 600; }

.topbar-acoes { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.sino { position: relative; color: var(--texto-suave); font-size: 1.15rem; text-decoration: none; padding: .3rem; }
.sino:hover { color: var(--azul); }
.sino .contador {
    position: absolute; top: -2px; right: -4px;
    background: var(--laranja); color: #1a1a1a;
    font-size: .65rem; font-weight: 700;
    border-radius: 999px; padding: 0 .32rem; line-height: 1.5;
}

/* ---------------------------------------------------------------- conteúdo */
/*
 * Área de segurança do painel.
 *
 * Antes o conteúdo tinha 1,2rem de folga lateral e nenhum limite de largura:
 * numa tela larga a tabela ia de ponta a ponta, e o olho perdia a linha entre
 * a primeira coluna e a última. As três medidas abaixo resolvem juntas:
 *
 *   --folga-painel   respiro lateral, que cresce conforme a tela;
 *   --largura-painel teto de largura da área útil;
 *   margin-inline    centraliza o que sobra.
 *
 * A barra de cima e o rodapé usam a MESMA folga, senão o título da página não
 * alinha com a trilha de navegação logo acima dele.
 */
:root {
    --folga-painel: 1.2rem;
    --largura-painel: 1560px;
}

@media (min-width: 768px) {
    :root { --folga-painel: 1.75rem; }
}
@media (min-width: 1400px) {
    :root { --folga-painel: 2.5rem; }
}

/* O eixo compartilhado. O fundo da barra e do rodapé continua ocupando a tela
   toda; só o conteúdo deles fica dentro deste limite. */
.faixa-painel {
    width: 100%;
    max-width: var(--largura-painel);
    margin-inline: auto;
    padding-inline: var(--folga-painel);
}
.topbar .faixa-painel {
    height: 100%;
    display: flex;
    align-items: center;
    gap: .8rem;
}

.content-shell {
    flex: 1;
    width: 100%;
    max-width: var(--largura-painel);
    margin-inline: auto;
    padding: 1.6rem var(--folga-painel) 2.5rem;
}
.app-footer-premium {
    padding-block: .9rem;
    border-top: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: .82rem;
    background: var(--superficie);
}

.pagina-titulo {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--azul-escuro);
    margin: 0 0 1.1rem;
    padding-bottom: .35rem;
    border-bottom: 3px solid var(--laranja);
    display: inline-block;
}

/* -------------------------------------------------------------- componentes */
.card {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: 0 1px 2px rgba(13, 13, 82, .04);
}
.card-header { background: rgba(31, 31, 179, .04); border-bottom: 1px solid var(--borda); font-weight: 600; }

.btn-primary {
    background-color: var(--azul);
    border-color: var(--azul);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--azul-escuro);
    border-color: var(--azul-escuro);
}
.btn-outline-primary { color: var(--azul); border-color: var(--azul); }
.btn-outline-primary:hover { background-color: var(--azul); border-color: var(--azul); }
/* Laranja recebe texto escuro, nunca branco. */
.btn-warning { background-color: var(--laranja); border-color: var(--laranja); color: #1a1a1a; }
.btn-warning:hover { background-color: var(--laranja-claro); border-color: var(--laranja-claro); color: #1a1a1a; }

.table thead th {
    background: rgba(31, 31, 179, .05);
    color: var(--azul-escuro);
    border-bottom: 2px solid rgba(31, 31, 179, .18);
    font-weight: 600;
    font-size: .84rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.table > tbody > tr:hover > * { background-color: rgba(31, 31, 179, .035); }

.badge.bg-primary { background-color: var(--azul) !important; }
.badge.bg-warning { background-color: var(--laranja) !important; color: #1a1a1a !important; }

.form-control:focus, .form-select:focus {
    border-color: #6a6ad6;
    box-shadow: 0 0 0 .2rem rgba(31, 31, 179, .2);
}

.stat-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.1rem; }
.stat-card .rotulo { color: var(--texto-suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.stat-card .valor { font-size: 1.7rem; font-weight: 700; color: var(--azul-escuro); line-height: 1.2; }
.stat-card .icone { font-size: 1.5rem; color: var(--laranja); }

/* Foco de teclado bem visível — acessibilidade */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--laranja);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ mobile */
.sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(13, 13, 82, .5);
    z-index: 1035;
}
.sidebar-backdrop.show { display: block; }

@media (max-width: 991.98px) {
    .shell-main { margin-left: 0; }
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close, .sidebar-toggle { display: block; }
}