/********** Área logada (painel) — chrome compartilhado **********/
/* JAC-282: antes deste arquivo, cada página em public/painel/*.html repetia
   o mesmo <style> inline (JAC-128/133 e JAC-237 abaixo) e o sidebar/topbar do
   mini-SPA usava cinza genérico do Bootstrap (#212529), sem nenhuma relação
   com a identidade visual do site público (--bs-primary laranja, logo,
   Josefin Sans). Este arquivo padroniza os dois pontos num lugar só. */

html, body { height: 100%; }

/* JAC-290: bootstrap.min.css já é compilado com paleta escura (body escuro,
   headings brancos, --bs-primary laranja) — o mesmo usado no site público.
   Até aqui .painel-conteudo forçava esse conteúdo de volta pro claro
   (body #f8f9fa + heading #212529), deixando cards/tabelas/inputs brancos
   "flutuando" dentro do shell escuro (sidebar/login). Removido de propósito:
   o conteúdo agora herda o escuro padrão do site: só falta escurecer os
   poucos componentes que o Bootstrap ainda hardcoda em branco
   (.card/.form-control/.form-select), o que as regras abaixo cobrem. */

/* Fix: cursor "|" vazando abaixo de campos de texto em mobile (mesma
   correção do #inscricaoModal em css/style.css; as páginas do painel não
   carregam style.css). */
.painel-conteudo input.form-control,
.painel-conteudo .form-select,
.login-shell input.form-control {
    overflow: hidden;
}

/*** Shell do mini-SPA (sidebar + topbar) ***/
.painel-layout { display: flex; min-height: 100vh; }

.painel-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--bs-secondary);
    /* JAC-290 follow-up: board pediu sidebar fixa (só o conteúdo rola) —
       poucos itens de menu, cabem em 100vh sem precisar de scroll próprio.
       sticky (em vez de fixed) evita ter que compensar a largura dela com
       margin no .painel-main. */
    position: sticky;
    top: 0;
    height: 100vh;
    /* JAC-298: display:flex + margin-top:auto no rodapé (abaixo) empurra o
       crédito SAGA pro fim da sidebar, mesmo com poucos itens de menu. */
    display: flex;
    flex-direction: column;
}
.painel-sidebar .painel-marca {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--bs-primary);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.painel-sidebar .painel-marca img {
    height: 28px;
}
.painel-sidebar .nav-link {
    color: var(--bs-light);
}
.painel-sidebar .nav-link:hover {
    color: var(--bs-primary);
}
.painel-sidebar .nav-link.active {
    color: var(--bs-primary);
    background: transparent;
    font-weight: 600;
    border-left: 3px solid var(--bs-primary);
    padding-left: calc(1rem - 3px);
}
/* JAC-298: crédito "Desenvolvido por SAGA" no rodapé da sidebar — mesmo
   padrão já usado na área logada do TecAgri, pedido pelo board na Fase 1
   (JAC-290) mas que ficou de fora do fechamento dela. */
.painel-sidebar .sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
}
.painel-sidebar .sidebar-credit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    color: inherit;
    text-decoration: none;
}
.painel-sidebar .sidebar-credit-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
}
.painel-sidebar .sidebar-credit-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.painel-sidebar .sidebar-credit-text span {
    color: var(--bs-light);
    font-size: 11px;
}
.painel-sidebar .sidebar-credit-text strong {
    font-size: 13px;
    color: var(--bs-light);
}
.painel-main {
    flex: 1;
    min-width: 0;
}
.painel-topbar {
    background: var(--bs-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.painel-conteudo {
    padding: 1.5rem;
    /* JAC-290: corpo de tabelas/formulários/títulos maior, priorizando
       legibilidade pra quem passa tempo em tabelas densas (mídia/tutores). */
    font-size: 1.0625rem;
    line-height: 1.55;
}
.painel-conteudo .small {
    font-size: .95em;
}

/* .btn-outline-secondary usa --bs-secondary (quase preto) pro texto/borda —
   pensado pra ficar sobre fundo claro. Sobra invisível (escuro sobre escuro)
   na topbar e nos cards/tabelas escuros do painel; reaproveita --bs-light. */
.painel-layout .btn-outline-secondary,
.painel-card-flutuante .btn-outline-secondary {
    color: var(--bs-light);
    border-color: var(--bs-light);
}
.painel-layout .btn-outline-secondary:hover,
.painel-card-flutuante .btn-outline-secondary:hover {
    color: #000;
    background-color: var(--bs-light);
    border-color: var(--bs-light);
}

/*** Superfícies do conteúdo (cards/tabelas/inputs) ***/
.painel-conteudo .card {
    background-color: var(--bs-secondary);
    border-color: rgba(255, 255, 255, .08);
}

/* JAC-290 follow-up (validação do board em produção): --bs-light
   (#A0A0A0) é cinza médio, não branco — usá-lo como cor de texto do
   conteúdo (labels, cabeçalhos/células de tabela) falha contraste WCAG AA
   sobre o fundo escuro. Texto do conteúdo vira branco/quase-branco; os
   headings já saem brancos direto do Bootstrap compilado (sem override
   aqui). */
.painel-conteudo {
    color: #f2f2f2;
}
.painel-conteudo .table {
    color: #f2f2f2;
    --bs-table-striped-color: #f2f2f2;
    --bs-table-hover-color: #f2f2f2;
    --bs-table-active-color: #f2f2f2;
}
.painel-conteudo .text-muted {
    color: #cfcfcf !important;
}

/* Tabelas hoje ganham .bg-white nos templates pra ficarem legíveis sobre o
   fundo claro anterior — com o conteúdo escuro isso inverte o problema
   (texto cinza claro da .table sobre branco). Neutraliza pra deixar a
   própria .table cuidar da cor (já pensada pro fundo escuro). */
.painel-conteudo .bg-white {
    background-color: transparent !important;
}

/* JAC-290 follow-up: o board validou os inputs escuros em produção e pediu
   pra reverter só essa parte — campo digitável com fundo escuro some no
   fundo escuro do card em volta. Campos de texto/select/data/hora/textarea
   voltam a ser claros (texto escuro sobre branco), igual ao padrão do resto
   do site; a seta do .form-select e o botão "Escolher arquivo" do
   input[type=file] voltam ao padrão do Bootstrap (já pensado pra fundo
   claro), por isso não têm mais override aqui. */
.painel-conteudo .form-control,
.painel-conteudo .form-select {
    background-color: #fff;
    color: #212529;
    border-color: #ced4da;
}
.painel-conteudo .form-control:focus,
.painel-conteudo .form-select:focus {
    background-color: #fff;
    color: #212529;
}
.painel-conteudo .form-check-input {
    background-color: var(--bs-dark);
    border-color: var(--bs-light);
}
/* input[type=file] (fotos/banners/carrossel): o botão nativo "Escolher
   arquivo" não segue --bs-dark do .form-control em volta, sobra como pílula
   clara isolada no card escuro. */
.painel-conteudo input[type="file"].form-control::file-selector-button {
    background-color: var(--bs-secondary);
    color: var(--bs-light);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: .25rem;
    margin-inline-end: .75rem;
}

/* .alert-secondary/-warning/-danger/-success (estados vazios, erros e
   confirmações espalhados pelos módulos) continuam com o claro padrão do
   Bootstrap — não fazem parte da paleta recompilada (body/headings/primary)
   e sobram como ilha clara no meio do conteúdo escuro. #painel-erro fica
   fora de .painel-conteudo (irmão dela dentro de .painel-main), por isso o
   escopo aqui é o .painel-main inteiro. */
.painel-main .alert-secondary {
    background-color: var(--bs-secondary);
    color: var(--bs-light);
    border-color: rgba(255, 255, 255, .08);
}
.painel-main .alert-warning {
    background-color: var(--bs-secondary);
    color: var(--bs-warning);
    border-color: var(--bs-warning);
}
.painel-main .alert-danger {
    background-color: var(--bs-secondary);
    color: #ff8391;
    border-color: var(--bs-danger);
}
.painel-main .alert-success {
    background-color: var(--bs-secondary);
    color: #4ade80;
    border-color: var(--bs-success);
}

/* .alert-secondary/-warning/-danger/-success (estados vazios, erros e
   confirmações espalhados pelos módulos) continuam com o claro padrão do
   Bootstrap — não fazem parte da paleta recompilada (body/headings/primary)
   e sobram como ilha clara no meio do conteúdo escuro. #painel-erro fica
   fora de .painel-conteudo (irmão dela dentro de .painel-main), por isso o
   escopo aqui é o .painel-main inteiro. */
.painel-main .alert-secondary {
    background-color: var(--bs-secondary);
    /* mesmo motivo do texto de conteúdo acima: --bs-light é cinza médio,
       não branco. */
    color: #f2f2f2;
    border-color: rgba(255, 255, 255, .08);
}
.painel-main .alert-warning {
    background-color: var(--bs-secondary);
    color: var(--bs-warning);
    border-color: var(--bs-warning);
}
.painel-main .alert-danger {
    background-color: var(--bs-secondary);
    color: #ff8391;
    border-color: var(--bs-danger);
}
.painel-main .alert-success {
    background-color: var(--bs-secondary);
    color: #4ade80;
    border-color: var(--bs-success);
}

/* Sobreposições construídas em JS puro fora de .painel-conteudo (sem
   bootstrap.bundle.js no painel, ver painel-comum.js/painel-cadastros.js) —
   mesmo tratamento do card escuro do login. */
.painel-card-flutuante {
    background-color: rgba(26, 26, 26, .97);
    border: 1px solid var(--bs-primary);
    backdrop-filter: blur(5px);
    color: var(--bs-light);
}

@media (max-width: 767.98px) {
    .painel-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        /* mobile já era off-canvas fixo antes do sticky do desktop acima;
           bottom:0 é quem define a altura aqui (acompanha a viewport real
           do navegador mobile), não o height:100vh fixo do desktop. */
        height: auto;
        z-index: 1030;
        margin-left: -220px;
        transition: margin-left .2s ease;
    }
    .painel-sidebar.aberta {
        margin-left: 0;
    }
}

/*** Login ***/
body.painel-login-body {
    background: url('../img/gif.gif') no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.login-shell {
    width: 100%;
    max-width: 420px;
    padding: 1rem;
}
.login-shell .card {
    background: rgba(33, 37, 41, 0.95);
    border: 1px solid var(--bs-primary);
    backdrop-filter: blur(5px);
}
.login-shell .card-title { color: var(--bs-primary); }
.login-shell .form-label { color: var(--bs-light); }
.login-shell .form-control { background: var(--bs-dark); color: #fff; border-color: var(--bs-secondary); }
.login-shell .form-control:focus { background: var(--bs-dark); color: #fff; }