/* =====================================================================
   PORTAL THEME — Design system visual do Portal de Dados (Grupo Treviso)
   ---------------------------------------------------------------------
   Este arquivo concentra o novo padrão visual do portal, inspirado na
   identidade da Fenatran: fundo em escala de cinza (a mesma tonalidade
   já usada na tela de login) combinado com azul/cinza nos componentes
   (botões, cards, modais, sidebar e barra superior).

   Este arquivo é carregado GLOBALMENTE em `template.html`, portanto os
   estilos abaixo se propagam automaticamente para todos os módulos do
   portal (Fenatran, Pedidos em Aberto, Kaizen, Consórcio, etc.) sem
   necessidade de duplicar CSS em cada plugin.

   IMPORTANTE: apenas camada de apresentação. Nenhuma regra aqui altera
   estrutura de rotas, IDs usados por scripts ou lógica de backend.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) TOKENS DE COR — paleta azul/cinza compartilhada por todo o portal
   ---------------------------------------------------------------------
   Os tokens abaixo são redefinidos por tema (`data-bs-theme="dark"` ou
   `"light"`), mas mantêm sempre os MESMOS NOMES de variável. Assim,
   qualquer componente que consuma `var(--portal-*)` já se adapta
   automaticamente ao alternar o tema, sem precisar de CSS duplicado.
   --------------------------------------------------------------------- */

/* Cor de texto/ícone fixa para uso sobre o sidebar. O sidebar mantém o
   azul petróleo da marca (identidade visual) tanto no tema claro quanto
   no escuro, então seu texto/ícones NÃO seguem `--portal-text` (que muda
   conforme o tema) — usam este tom claro constante para sempre contrastar
   com o fundo escuro do menu. */
:root {
    --portal-sidebar-text: rgba(231, 235, 241, 0.92);
    --portal-sidebar-text-active: #ffffff;
}

html[data-bs-theme="dark"] {
    /* Fundo geral em escala de cinza — a mesma tonalidade (Bootstrap dark
       theme, #212529) já usada na tela de login antes desta refatoração */
    --portal-bg: #212529;
    --portal-bg-elevated: #22262c;

    /* Superfícies (cards, modais, dropdowns) */
    --portal-surface-1: #262b32;
    --portal-surface-2: #2d333b;
    --portal-border: #3a4048;

    /* Azul institucional (ações, links, destaque) */
    --portal-primary: #2f7dd9;
    --portal-primary-hover: #1f63b8;
    --portal-primary-soft: rgba(47, 125, 217, 0.16);

    /* Sidebar / topbar — azul petróleo escuro, alinhado à identidade atual */
    --portal-sidebar-bg: #0e2238;
    --portal-sidebar-bg-alt: #12314f;
    --portal-topbar-bg: #1f242b;

    /* Texto */
    --portal-text: #e7ebf1;
    --portal-text-muted: #9aa4b2;

    /* Sobrescreve variáveis do Bootstrap para que TODOS os componentes
       nativos (btn, card, modal, table, form-control...) já herdem a
       nova paleta sem precisar de classes extras em cada template. */
    --bs-body-bg: var(--portal-bg);
    --bs-body-color: var(--portal-text);
    --bs-border-color: var(--portal-border);
    --bs-secondary-bg: var(--portal-surface-1);
    --bs-tertiary-bg: var(--portal-surface-2);
    --bs-primary: var(--portal-primary);
    --bs-primary-rgb: 47, 125, 217;
    --bs-link-color: var(--portal-primary);
    --bs-link-hover-color: #5aa0ea;
}

/* ---------------------------------------------------------------------
   1.1) TEMA CLARO — mesma identidade (azul institucional + sidebar navy),
   com superfícies em cinza claro no lugar do fundo escuro. Acionado pelo
   botão "Alterar Tema" (ver core/static/js/theme-toggle.js), que apenas
   alterna o atributo `data-bs-theme` no <html> — todo o resto do tema é
   resolvido aqui, via CSS, de forma previsível e consistente.
   --------------------------------------------------------------------- */
html[data-bs-theme="light"] {
    /* Fundo geral em cinza claro (contraparte clara do cinza do tema escuro) */
    --portal-bg: #eef1f5;
    --portal-bg-elevated: #ffffff;

    /* Superfícies (cards, modais, dropdowns) */
    --portal-surface-1: #ffffff;
    --portal-surface-2: #f2f4f7;
    --portal-border: #d7dde5;

    /* Mesmo azul institucional do tema escuro, para preservar a identidade */
    --portal-primary: #2f7dd9;
    --portal-primary-hover: #1f63b8;
    --portal-primary-soft: rgba(47, 125, 217, 0.12);

    /* Sidebar permanece com o azul petróleo da marca em qualquer tema */
    --portal-sidebar-bg: #0e2238;
    --portal-sidebar-bg-alt: #12314f;
    --portal-topbar-bg: #ffffff;

    /* Texto */
    --portal-text: #1c222b;
    --portal-text-muted: #5b6572;

    --bs-body-bg: var(--portal-bg);
    --bs-body-color: var(--portal-text);
    --bs-border-color: var(--portal-border);
    --bs-secondary-bg: var(--portal-surface-1);
    --bs-tertiary-bg: var(--portal-surface-2);
    --bs-primary: var(--portal-primary);
    --bs-primary-rgb: 47, 125, 217;
    --bs-link-color: var(--portal-primary);
    --bs-link-hover-color: #1f63b8;
}

/* Fundo em escala de cinza aplicado ao corpo inteiro do portal */
body {
    background-color: var(--portal-bg);
    color: var(--portal-text);
}

/* ---------------------------------------------------------------------
   2) CARDS — usados em home, dashboards e telas de listagem
   --------------------------------------------------------------------- */
.card {
    background-color: var(--portal-surface-2);
    border: 1px solid var(--portal-border);
    color: var(--portal-text);
}

.card .text-muted {
    color: var(--portal-text-muted) !important;
}

/* ---------------------------------------------------------------------
   3) BOTÕES — reforço da paleta azul/cinza nas ações principais
   --------------------------------------------------------------------- */
.btn-primary {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--portal-primary-hover);
    border-color: var(--portal-primary-hover);
}

.btn-outline-primary {
    color: var(--portal-primary);
    border-color: var(--portal-primary);
}

.btn-outline-primary:hover {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
}

.btn-secondary,
.btn-outline-secondary {
    --bs-btn-bg: var(--portal-surface-2);
    --bs-btn-border-color: var(--portal-border);
}

/* ---------------------------------------------------------------------
   4) MODAIS / TOASTS — mesma superfície azul/cinza dos cards
   --------------------------------------------------------------------- */
.modal-content {
    background-color: var(--portal-surface-1);
    border: 1px solid var(--portal-border);
    color: var(--portal-text);
}

.modal-header,
.modal-footer {
    border-color: var(--portal-border);
}

.toast {
    background-color: var(--portal-surface-1);
    border: 1px solid var(--portal-border);
}

/* ---------------------------------------------------------------------
   5) FORMULÁRIOS / TABELAS — consistência com o restante do sistema
   --------------------------------------------------------------------- */
.form-control,
.form-select {
    background-color: var(--portal-surface-2);
    border-color: var(--portal-border);
    color: var(--portal-text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--portal-surface-2);
    border-color: var(--portal-primary);
    color: var(--portal-text);
    box-shadow: 0 0 0 0.2rem var(--portal-primary-soft);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--portal-text);
    --bs-table-border-color: var(--portal-border);
}

/* ---------------------------------------------------------------------
   6) SIDEBAR — menu lateral modernizado (mantém IDs/classes usados
   pelo script.js; apenas a apresentação visual foi revista)
   --------------------------------------------------------------------- */
aside#sidebar,
#sidebar {
    background: linear-gradient(180deg, var(--portal-sidebar-bg) 0%, var(--portal-sidebar-bg-alt) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/* Usa a cor fixa de texto do sidebar (não a `--portal-text` do tema), pois
   o fundo do menu permanece azul petróleo tanto no tema claro quanto no
   escuro — ver bloco de tokens (1) acima. */
.sidebar-logo a {
    color: var(--portal-sidebar-text);
}

.sidebar-nav {
    padding: 1.25rem 0;
}

/* Item de menu: espaçamento e cantos levemente arredondados no hover/ativo */
a.sidebar-link {
    color: var(--portal-sidebar-text);
    border-radius: 0 .5rem .5rem 0;
    margin: .1rem .5rem .1rem 0;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

a.sidebar-link:hover {
    background-color: rgba(255, 255, 255, .08);
    border-left: 3px solid var(--portal-primary);
    color: var(--portal-sidebar-text-active);
}

/* Destaca visualmente o grupo de menu quando expandido (aberto) */
a.sidebar-link[aria-expanded="true"] {
    background-color: var(--portal-primary-soft);
    color: var(--portal-sidebar-text-active);
}

/* ---------------------------------------------------------------------
   6.1) SUBMENUS — rolagem interna própria (nunca a sidebar inteira)
   ---------------------------------------------------------------------
   Cada `.sidebar-dropdown` tem uma altura máxima independente do tamanho
   da lista de itens. Combinado com o accordion exclusivo (`data-bs-parent`
   em template.html, que fecha qualquer outro submenu aberto), isso garante
   que abrir um submenu longo (ex.: setor com muitos dashboards) role
   apenas o próprio submenu — o sidebar e o restante do portal permanecem
   sempre estáticos, sem precisar rolar o menu inteiro para navegar.
   --------------------------------------------------------------------- */
.sidebar-dropdown {
    max-height: min(320px, 45vh);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Barra de rolagem discreta e clara, já que o fundo do submenu é sempre
   escuro (azul petróleo) independentemente do tema claro/escuro do portal. */
.sidebar-dropdown {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .3) transparent;
}

.sidebar-dropdown::-webkit-scrollbar {
    width: 5px;
}

.sidebar-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .3);
    border-radius: 3px;
}

.sidebar-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .45);
}

/* Painel flutuante do submenu — visual (cor/borda/sombra). A ativação por
   hover (exibição/posicionamento) fica em style.css, escopada apenas para
   desktop; aqui cuidamos somente da aparência da lista flutuante. */
.sidebar-dropdown {
    background-color: var(--portal-sidebar-bg-alt);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 .5rem .5rem 0;
    box-shadow: .5rem .25rem 1.25rem rgba(0, 0, 0, .4);
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------------------
   7) TOPBAR — barra superior compartilhada por todas as telas internas
   (título da página + botão de menu para telas pequenas)
   --------------------------------------------------------------------- */
.portal-topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.25rem;
    background-color: var(--portal-topbar-bg);
    border-bottom: 1px solid var(--portal-border);
    position: sticky;
    top: 0;
    z-index: 900;
}

.portal-topbar .portal-topbar-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--portal-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botão de menu mobile — só aparece em telas pequenas (ver seção 8) */
.portal-topbar-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--portal-border);
    border-radius: .4rem;
    color: var(--portal-text);
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Variante flutuante usada em módulos com cabeçalho próprio (ex.: Fenatran),
   para dar acesso ao menu lateral em smartphones sem duplicar cabeçalhos.
   Alinhado à esquerda para manter o padrão do restante do portal. */
.portal-topbar-toggle-floating {
    position: fixed;
    top: .6rem;
    left: .75rem;
    z-index: 950;
    background-color: var(--portal-topbar-bg);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .35);
}

/* Camada escura usada para fechar o menu ao tocar fora dele (mobile) */
.portal-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 999;
}

/* ---------------------------------------------------------------------
   8) RESPONSIVIDADE — comportamento em smartphones/tablets
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Sidebar vira um menu "off-canvas": some da tela e só aparece
       sobrepondo o conteúdo quando o usuário toca no botão de menu. */
    aside#sidebar,
    #sidebar {
        position: fixed;
        width: 260px;
        min-width: 260px;
        transform: translateX(-100%);
        box-shadow: .5rem 0 1.5rem rgba(0, 0, 0, .4);
    }

    aside#sidebar.expand,
    #sidebar.expand {
        transform: translateX(0);
    }

    /* Em telas pequenas o menu retraído (modo ícone) não existe: ele
       fica sempre com os textos visíveis quando aberto. */
    #sidebar:not(.expand) .sidebar-logo,
    #sidebar:not(.expand) a.sidebar-link span {
        display: revert;
    }

    /* Conteúdo ocupa a largura total; o menu passa a flutuar por cima */
    #iframe-conteudo {
        margin-left: 0 !important;
    }

    .portal-topbar-toggle {
        display: inline-flex;
    }

    .portal-sidebar-backdrop.show {
        display: block;
    }
}