/* Identidade visual BHZ — paleta + tipografia (manual da marca). */

:root {
    --bhz-blue:        #0022eb;
    --bhz-blue-light:  #83b0f9;
    --bhz-purple:      #745ea9;
    --bhz-purple-dark: #3a358f;
    --bhz-navy:        #003086;
    --bhz-midnight:    #100B38;
}

/* Body usa a fonte secundaria (Inter) — Tailwind config injeta via class font-body. */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Nunca deixa a PAGINA (ou o iframe do shell/a tela no mobile) ganhar barra
   de rolagem lateral — quem precisa de rolagem horizontal (grade larga,
   tabela com muitas colunas) tem que prover a sua propria, contida dentro
   de si mesma (ver tabela-scroll.js / .overflow-x-auto). Sem isso, um
   componente largo demais faz a TELA INTEIRA rolar de lado em vez de so
   o componente. */
html, body {
    overflow-x: hidden;
}
/* Reforca o wrapper que tabela-scroll.js insere em toda tabela larga: nunca
   cresce alem do espaco disponivel — a rolagem fica dentro dele (na grade),
   nunca vaza pra pagina. */
[data-tabela-scroll-auto] {
    max-width: 100%;
}
/* O pai do wrapper acima vira grid de 1 coluna com minmax(0, 1fr) — isso
   trava a largura do item nessa faixa INDEPENDENTE do que o conteudo (a
   tabela larga) queira ser, seja qual for o layout do ancestral mais
   acima (flex/grid tende a nao encolher abaixo do conteudo por padrao,
   "min-width: auto"; minmax(0, ...) e a forma padrao de neutralizar
   isso). E o que garante, de fato, que a rolagem lateral fique dentro da
   grade em vez de vazar pra pagina. */
[data-tabela-scroll-pai] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

/* Helper pra titulos com a fonte display (Orbitron / substituto da Ethnocentric). */
.font-display {
    font-family: 'Orbitron', 'Inter', sans-serif;
    letter-spacing: 0.02em;
}

/* Sidebar agrupada — animacao de colapso */
.sidebar-grupo-itens {
    overflow: hidden;
    transition: max-height 200ms ease-in-out;
}
.sidebar-grupo-header .chev {
    transition: transform 200ms ease-in-out;
}
.sidebar-grupo-header[aria-expanded="false"] .chev {
    transform: rotate(-90deg);
}
.sidebar-grupo-header[aria-expanded="false"] + .sidebar-grupo-itens {
    max-height: 0 !important;
}

/* ===================================================================
   Largura dos formularios de cadastro.

   Um lugar so pra ajustar: as telas usam `.form-cadastro` no cartao em vez de
   `max-w-2xl`, `max-w-3xl` e afins, que era o que variava de tela pra tela sem
   criterio nenhum.

   Ocupa a largura disponivel; o respiro lateral vem do padding do
   #default-view, no base.html. Se um dia isso ficar largo demais em monitor
   ultrawide, basta pôr um teto aqui.
   =================================================================== */
.form-cadastro {
    max-width: 100%;
    width: 100%;
}

/* ===================================================================
   Sidebar retratil: so icones; expande no hover mostrando os rotulos.

   Duas decisoes que valem explicar:

   1) A expansao SOBREPOE o conteudo (o aside e fixed/z-50) em vez de
      empurra-lo. Os offsets do conteudo (left-14/pl-14 no base.html)
      acompanham a largura RETRAIDA — se acompanhassem a expandida, a
      tela inteira pularia a cada passada de mouse.

   2) Toda a retracao vive dentro de @media (hover: hover). Em telas de
      toque o :hover nunca dispara de forma confiavel, e a barra ficaria
      presa em icones sem rotulo nenhum. La ela simplesmente continua
      expandida, como era antes desta mudanca.
   =================================================================== */
#sidebar {
    width: 14rem;               /* padrao (e o estado em telas de toque) */
    overflow-x: hidden;
}

@media (hover: hover) {
    #sidebar {
        width: 3.5rem;          /* 56px: cabe o icone de 20px com folga */
        transition: width 180ms ease;
    }
    #sidebar:hover,
    #sidebar:focus-within {     /* navegacao por teclado tambem expande */
        width: 14rem;
    }

    /* Os rotulos continuam no DOM (leitor de tela, Ctrl+F) — so ficam
       invisiveis e SEM LARGURA quando retraida. So opacity nao bastaria:
       o texto continuaria ocupando espaco, empurrando o icone pra fora do
       centro e pra fora dos 56px. */
    #sidebar .sidebar-texto {
        opacity: 0;
        width: 0;
        overflow: hidden;
        white-space: nowrap;
        transition: opacity 120ms ease;
    }
    #sidebar:hover .sidebar-texto,
    #sidebar:focus-within .sidebar-texto {
        opacity: 1;
        width: auto;
    }

    /* Retraida, cada item centraliza o proprio icone. O gap tambem zera —
       senao sobra o espacamento do rotulo que nao esta mais la e o icone
       fica torto. */
    #sidebar:not(:hover):not(:focus-within) .sidebar-item {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* Retraida, o cabecalho do grupo ("CADASTROS", "ROTINAS", ...) nao
       cabe: vira um traco fino separando os blocos de icones. */
    #sidebar:not(:hover):not(:focus-within) .sidebar-grupo-header {
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        opacity: 0;
    }
    #sidebar:not(:hover):not(:focus-within) .sidebar-grupo {
        border-top: 1px solid rgba(58, 53, 143, 0.5);
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }
}

/* Em telas de toque a barra fica expandida (ver nota 2 acima), entao o
   conteudo precisa ser empurrado — senao a barra o cobre. Os seletores
   sao mais especificos que as classes do Tailwind de proposito: #id e
   main.pl-14 ganham de .left-14 / .pl-14. */
@media (hover: none) {
    #topbar, #iframes-container { left: 14rem; }
    main.pl-14 { padding-left: 14rem; }
}

/* Scrollbar discreto na sidebar */
#sidebar {
    scrollbar-width: thin;
    scrollbar-color: #3a358f transparent;
}
#sidebar::-webkit-scrollbar { width: 6px; }
#sidebar::-webkit-scrollbar-thumb { background: #3a358f; border-radius: 3px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }

/* ===================================================================
   Abas dos formularios (e as abas-pagina do contrato).

   Estilo "pasta": faixa acinzentada, uma divisoria entre cada aba, e a
   aba ativa em branco — a mesma cor do painel logo abaixo — com uma
   faixa azul BHZ no topo. Da pra ver de longe quantas abas existem e
   em qual delas se esta.

   Marcacao: <nav class="aba-nav"> com filhos .aba-btn; a ativa leva
   .ativa (o abas.js alterna essa classe; nas abas do contrato, que sao
   paginas de verdade, quem marca e o proprio template).
   =================================================================== */
.aba-nav {
    background-color: #e2e8f0;               /* slate-200 */
    border-bottom: 1px solid #94a3b8;        /* slate-400 */
}

.aba-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #334155;                          /* slate-700 */
    background-color: transparent;
    border-right: 1px solid #cbd5e1;         /* a divisoria entre as abas */
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms, color 150ms;
}
.aba-btn:first-child {
    border-left: 1px solid #cbd5e1;
}
.aba-btn:hover {
    background-color: #cbd5e1;
    color: #0f172a;
}

.aba-btn.ativa {
    background-color: #fff;                  /* mesma cor do painel abaixo */
    color: var(--bhz-navy);
    font-weight: 600;
    box-shadow: inset 0 3px 0 0 var(--bhz-blue);
}
.aba-btn.ativa:hover {
    background-color: #fff;
}

/* ===================================================================
   Mobile (<768px): gaveta off-canvas + desliga o "shell" de janelas.

   Abaixo desse breakpoint, independente de a tela ter hover ou nao (um
   celular claramente nao tem, mas o que decide aqui e a LARGURA — um
   notebook touch de 1440px continua no comportamento de tela grande):

   - #sidebar deixa de ser um trilho sempre visivel e vira uma gaveta que
     comeca fora da tela (`translateX(-100%)`) e desliza por cima do
     conteudo quando o hamburguer (#mobile-topbar) abre.
   - A taskbar de abas (#topbar) e o container de iframes somem: em tela
     pequena, abrir cada tela como "janela" empilhada nao faz sentido — o
     shell.js detecta a mesma largura e deixa o clique no menu navegar a
     pagina de verdade (recarrega o documento), em vez de abrir iframe.
   - #mobile-topbar (oculto em telas >=768px) assume os mesmos 40px de
     altura que o #topbar de desktop ja usava — o `pt-10` do <main> no
     base.html vale pros dois casos, sem precisar de um valor proprio.

   Depois deste bloco no arquivo de proposito: quando a mesma regra
   (`main.pl-14 { padding-left }`) e alvo tanto de @media (hover: none)
   quanto deste, em empate de especificidade quem vem DEPOIS no arquivo
   vence — e por isso este bloco fica por ultimo.
   =================================================================== */
@media (max-width: 767px) {
    #sidebar {
        width: 16rem;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 200ms ease;
    }
    #sidebar.sidebar-aberta {
        transform: translateX(0);
    }
    /* Defensivo: o :hover nunca bate num touch, mas deixa explicito que o
       rotulo sempre aparece aqui (nao depende do estado hover/focus). */
    #sidebar .sidebar-texto {
        opacity: 1;
        width: auto;
    }

    #sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        z-index: 40;
    }
    #sidebar-backdrop.aberto {
        display: block;
    }

    #mobile-topbar {
        display: flex;
    }
    #topbar, #iframes-container {
        display: none !important;
    }

    main.pl-14 {
        padding-left: 0;
    }
}

@media (min-width: 768px) {
    #mobile-topbar {
        display: none;
    }
}

/* Edicao inline na grade (grade-editar.js) */
/* Hover: cinza claro — so indica "linha sob o mouse", nao seleciona nada. */
table[data-grade] tbody tr:hover {
    background-color: #f1f5f9;
}
/* Selecionada: azul claro da paleta BHZ (bhz-blue-light #83b0f9 a ~20% sobre
   branco) + a faixa azul na borda esquerda. O !important vence o hover acima
   pra a linha selecionada nao "perder a cor" quando o mouse passa por ela. */
.grade-linha-selecionada {
    background-color: #e6effe !important;
    box-shadow: inset 3px 0 0 0 #0022eb;
}
/* Cursor: a celula editavel NAO muda de cursor — fica a seta padrao, mesmo na
   linha selecionada. So quando o campo ja esta aberto pra editar e que aparece
   o cursor de texto, e isso vem do proprio <input>/<textarea> (comportamento
   nativo), sem regra nossa. */
.grade-flash-ok {
    background-color: #d1fae5 !important;
    transition: background-color .6s ease;
}
.grade-flash-erro {
    background-color: #fee2e2 !important;
    transition: background-color .6s ease;
}

/* Grades dinamicas (data-grade): celula sempre em 1 linha so — nunca quebra
   por conta do conteudo. Se a soma das colunas ficar mais larga que a tela,
   quem rola e a tabela inteira (tabela-scroll.js ja envolve toda <table> num
   overflow-x-auto), nao a celula individual. */
table[data-grade] > thead th,
table[data-grade] > tbody td {
    white-space: nowrap;
}
/* Coluna redimensionada manualmente (grade-dinamica.js) trunca com "..." em
   vez de forcar a coluna a crescer alem do que a pessoa escolheu. */
table[data-grade] .grade-col-redimensionada {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Alca de redimensionar, na borda direita de cada <th> movivel. */
.grade-alca-redimensionar {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
}
.grade-alca-redimensionar:hover,
.grade-col-redimensionando {
    background-color: rgba(0, 34, 235, 0.15);
}

/* Botao de filtro (funil) por coluna (grade-filtrar.js) — vive DENTRO do
   proprio <th data-col>, ao lado do rotulo, igual a alca de arrastar/
   redimensionar de grade-dinamica.js. Sempre visivel (nao so no hover):
   e o unico jeito de descobrir que a coluna e filtravel. Cinza sutil por
   padrao, azul BHZ quando ha um filtro ativo naquela coluna. */
.grade-filtro-botao {
    display: inline-flex;
    vertical-align: middle;
    color: rgba(15, 23, 42, 0.35);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.grade-filtro-botao:hover {
    color: #0022eb;
}
.grade-filtro-botao.grade-filtro-ativo {
    color: #0022eb;
}


/* Flag "Ocultar encerradas" das grades de Atividades (grade-encerradas.js).
   Classe na tabela, não `hidden` na linha: o funil por coluna já usa `hidden`
   e os dois mecanismos não podem se desfazer um ao outro. */
table.grade-ocultar-encerradas tbody tr[data-encerrada] { display: none; }
/* Busca rápida por número na barra da grade (grade-editar.js). */
table[data-grade] tbody tr[data-busca-oculta] { display: none; }

/* Painel lateral de filtros rapidos (grade-lateral.js). Recolhido, sobra so
   a faixa com o botao de reabrir. */
aside[data-lateral].lateral-recolhido { width: 2.5rem; }
aside[data-lateral].lateral-recolhido [data-lateral-corpo],
aside[data-lateral].lateral-recolhido [data-lateral-titulo] { display: none; }
aside[data-lateral].lateral-recolhido > div:first-child { justify-content: center; padding-left: 0; padding-right: 0; }
aside[data-lateral].lateral-recolhido [data-lateral-toggle] svg { transform: rotate(180deg); }

/* Linha com o detalhe aberto (grade-detalhe.js) */
tr.grade-linha-expandida > td { border-bottom-color: transparent; }

/* Barra do formulario so com Salvar/Descartar (projeto aberto na propria aba do
   shell, onde Grade/Inserir/Duplicar/navegacao/Excluir nao fazem sentido —
   esses ficam no Portfolio). A barra inteira some enquanto nada foi alterado.
   O !important vence o `display: contents` que o barra-form.js poe inline. */
.barra-so-salvar > :not([data-barra="sujo"]) { display: none !important; }
.barra-so-salvar:not(:has([data-barra="sujo"].flex)) { display: none; }