/*
 * tema.css — identidade visual da ArvoreSer nos temas CLARO e ESCURO
 * (redesenho de layout, entrega 2026-10-27-layout-tema-claro-escuro;
 * mockup aprovado: entregas-ia/2026-10-27-mockup-layout-dashboard-master).
 *
 * - Carregado DEPOIS do tabler.min.css por todos os layouts.
 * - O tema vem do atributo data-bs-theme do <html> ("light" | "dark"),
 *   escrito pelo servidor a partir de usuarios.tema (temaDoUsuario()) e
 *   trocado ao vivo pelo botão da navbar (assets/js/core/tema.js).
 * - Tokens próprios: --as-*. Também sobrescreve as variáveis do Tabler
 *   (fundo, superfície, borda), assim TODAS as telas — inclusive as
 *   antigas — acompanham o tema sem precisar de CSS próprio.
 * - Nunca usar cor fixa de tema numa tela nova: usar var(--as-*) ou
 *   var(--tblr-*). Para JS (gráficos), ler com corTema('--as-...').
 */

/* ------------------------------------------------------------------
 * TOKENS — tema claro (padrão)
 * ------------------------------------------------------------------ */
html[data-bs-theme="light"] {
    --as-bg: #f3f6fb;
    --as-card: #ffffff;
    --as-borda: #e6ebf3;
    --as-titulo: #1b2a5e;
    --as-texto: #5b6785;
    --as-texto-fraco: #8a94ad;
    --as-verde: #2fb344;
    --as-verde-claro: #e8f6eb;
    --as-amarelo: #f5c542;
    --as-laranja: #f47b20;
    --as-laranja-claro: #fff1e6;
    --as-trilho: #eef1f6;
    --as-navbar: #ffffff;
    --as-sombra: 0 1px 2px rgba(27, 42, 94, .04), 0 2px 8px rgba(27, 42, 94, .05);

    --tblr-body-bg: var(--as-bg);
    --tblr-bg-surface: var(--as-card);
    --tblr-border-color: var(--as-borda);
}

/* ------------------------------------------------------------------
 * TOKENS — tema escuro
 * ------------------------------------------------------------------ */
html[data-bs-theme="dark"] {
    --as-bg: #0f1522;
    --as-card: #182033;
    --as-borda: #263049;
    --as-titulo: #e7ecf7;
    --as-texto: #a7b1c8;
    --as-texto-fraco: #7b86a0;
    --as-verde: #2fb344;
    --as-verde-claro: rgba(47, 179, 68, .16);
    --as-amarelo: #f5c542;
    --as-laranja: #f47b20;
    --as-laranja-claro: rgba(244, 123, 32, .16);
    --as-trilho: #232c42;
    --as-navbar: #141b2b;
    --as-sombra: none;

    --tblr-body-bg: var(--as-bg);
    --tblr-bg-surface: var(--as-card);
    --tblr-border-color: var(--as-borda);
}

/* Cor da marca e fonte valem para os dois temas */
:root {
    --tblr-primary: #2fb344;
    --tblr-primary-rgb: 47, 179, 68;
    --tblr-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    background: var(--as-bg);
    font-family: var(--tblr-font-sans-serif);
}

/* Cards: mesmo acabamento do mockup em todas as telas */
.card {
    background-color: var(--as-card);
    border-color: var(--as-borda);
    border-radius: 12px;
    box-shadow: var(--as-sombra);
}

/* ------------------------------------------------------------------
 * NAVBAR (faixa única: logo + menu + ações + usuário)
 * ------------------------------------------------------------------ */
.as-navbar {
    background: var(--as-navbar);
    border-bottom: 1px solid var(--as-borda);
    min-height: 64px;
    padding-top: 0;
    padding-bottom: 0;
    /* Indicador do item ativo do Tabler (linha sob o item) em laranja */
    --tblr-navbar-active-color: var(--as-laranja);
    --tblr-navbar-active-border-color: var(--as-laranja);
}
.as-marca {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--as-titulo);
    text-decoration: none;
}
.as-marca svg { width: 34px; height: 34px; flex: 0 0 34px; }
.as-marca:hover { color: var(--as-titulo); text-decoration: none; }
.as-navbar .navbar-nav .nav-link {
    color: var(--as-titulo);
    font-weight: 500;
    padding: 1.25rem .8rem;
}
.as-navbar .navbar-nav .nav-link-icon { width: auto; height: auto; margin-right: .4rem; }
.as-navbar .navbar-nav .nav-link-icon .ti { font-size: 1.15rem; }
.as-navbar .navbar-nav .nav-link .nav-link-icon,
.as-navbar .navbar-nav .nav-link .nav-link-icon .ti { color: var(--as-titulo); }
.as-navbar .navbar-nav .nav-item.active > .nav-link,
.as-navbar .navbar-nav .nav-item.active > .nav-link .nav-link-icon,
.as-navbar .navbar-nav .nav-item.active > .nav-link .nav-link-icon .ti { color: var(--as-laranja); }
/* Item "Administrador" (agrupador do sistema) em laranja, como no mockup */
.as-navbar .navbar-nav .nav-item.as-nav-admin > .nav-link,
.as-navbar .navbar-nav .nav-item.as-nav-admin > .nav-link .nav-link-icon .ti { color: var(--as-laranja); }

.as-btn-circ {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--as-titulo);
    background: transparent;
    border: 0;
    position: relative;
    padding: 0;
}
.as-btn-circ:hover { background: var(--as-trilho); }
.as-btn-circ .ti { font-size: 1.25rem; }
.as-btn-circ .as-ponto {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--as-laranja);
}
.as-usuario { color: var(--as-titulo); font-weight: 500; }
.as-usuario:hover { color: var(--as-titulo); }

/* No celular o menu recolhe: links sem a "aba" inferior, com um respiro */
@media (max-width: 991.98px) {
    .as-navbar .navbar-nav .nav-link { padding: .6rem .25rem; }
    .as-navbar .navbar-collapse { padding-bottom: .75rem; }
}

/* ------------------------------------------------------------------
 * CABEÇALHO DA PÁGINA (seções pageTitle, pageIcon, pageSubtitle,
 * pageActions, pageDecor do layout)
 * ------------------------------------------------------------------ */
.as-page-header {
    position: relative;
    padding: 1.5rem 0 1rem;
}
.as-page-header .page-title,
.as-page-header h1 {
    color: var(--as-titulo);
    font-weight: 800;
    margin: 0;
}
.as-page-header.com-icone .page-title { font-size: 1.85rem; }
.as-page-header .as-subtitulo { color: var(--as-texto); margin: .15rem 0 0; }
.as-icone-grande {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 12px;
    background: var(--as-laranja-claro);
    color: var(--as-laranja);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
}
.as-page-header .as-decor {
    position: absolute;
    right: 30%;
    top: -6px;
    pointer-events: none;
    opacity: .14;
}
.as-page-header .as-decor svg { width: 140px; height: auto; }
@media (max-width: 767.98px) {
    .as-page-header .as-decor { display: none; }
}

/* Trilha (breadcrumb) — seção pageBreadcrumb do layout */
.as-trilha { display: flex; align-items: center; gap: .4rem; padding-top: 1rem; font-size: .8rem; color: var(--as-texto-fraco); }
.as-trilha a { color: var(--as-titulo); display: inline-flex; text-decoration: none; }
.as-trilha a:hover { color: var(--as-verde); }
.as-trilha .ti { font-size: 1rem; }
.as-trilha .atual { color: var(--as-verde); font-weight: 500; }
.as-trilha + .as-page-header { padding-top: .75rem; }

/* Frase da marca à direita do cabeçalho (layouts/partials/slogan.php) */
.as-slogan { display: flex; align-items: center; gap: 1.25rem; }
.as-slogan p { margin: 0; font-style: italic; font-weight: 600; color: var(--as-titulo); line-height: 1.25; font-size: .95rem; }
.as-slogan p em { color: var(--as-verde); font-style: italic; position: relative; }
.as-slogan p em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--as-laranja); }
.as-slogan .as-slogan-sep { width: 1px; align-self: stretch; background: var(--as-borda); }
.as-slogan svg { width: 44px; height: 44px; }
@media (max-width: 991.98px) { .as-slogan { display: none; } }

/* ------------------------------------------------------------------
 * COMPONENTES REUTILIZÁVEIS DOS CARDS (dashboard e telas novas)
 * ------------------------------------------------------------------ */
.as-card-head { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.25rem .25rem; }
.as-card-head .as-ic { font-size: 1.6rem; color: var(--as-verde); line-height: 1; }
.as-card-head .as-ic.laranja { color: var(--as-laranja); }
.as-card-head h3 { color: var(--as-titulo); font-weight: 700; font-size: 1.05rem; margin: 0; }
.as-card-head small { color: var(--as-texto); font-size: .76rem; display: block; }

.as-trilho { background: var(--as-trilho); border-radius: 6px; height: 14px; position: relative; }
.as-barra { height: 100%; border-radius: 6px; }
.bg-as-verde { background: var(--as-verde); }
.bg-as-amarelo { background: var(--as-amarelo); }
.bg-as-laranja { background: var(--as-laranja); }
.text-as-titulo { color: var(--as-titulo) !important; }
.text-as-texto { color: var(--as-texto) !important; }
.text-as-laranja { color: var(--as-laranja) !important; }
.text-as-verde { color: var(--as-verde) !important; }

.btn-as-verde-outline {
    color: var(--as-verde);
    border: 1px solid var(--as-verde);
    background: transparent;
    font-size: .78rem;
    padding: .3rem .8rem;
    border-radius: 8px;
}
.btn-as-verde-outline:hover { background: var(--as-verde-claro); color: var(--as-verde); }

/* ------------------------------------------------------------------
 * MARCAÇÃO — card com DADOS FIXOS (ainda não dinâmico). Pedido do Jorge
 * (27/10/2026): toda tela/card com dado fixo leva a tarja "MARCAÇÃO";
 * quando o dado ficar real, tira-se a classe.
 *   - num card:                 <div class="card as-fixo">
 *   - em vários de uma vez:     <div class="as-fixo-area"> ...cards... </div>
 *   - Dashboard: o Controller marca o card no catálogo ('fixo' => true) e a
 *     View acrescenta "as-fixo" no class="card" do widget.
 * ------------------------------------------------------------------ */
.card.as-fixo,
.as-fixo-area .card { position: relative; }
.card.as-fixo::after,
.as-fixo-area .card::after {
    content: "MARCAÇÃO";
    position: absolute;
    top: -9px;
    right: 14px;
    z-index: 2;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 16px;
    color: #3d2c00;
    background: repeating-linear-gradient(-45deg, #f5c542 0 8px, #ffd969 8px 16px);
    box-shadow: 0 0 0 1px rgba(61, 44, 0, .25);
    pointer-events: none;
}

/* ------------------------------------------------------------------
 * SELO "Gerenciando: <empresa>" (master com empresa em gestão, 27/10/2026)
 * ------------------------------------------------------------------ */
.as-selo-gestao { background: var(--as-laranja-claro); border-bottom: 1px solid var(--as-borda); color: var(--as-titulo); font-size: .85rem; }
.as-selo-gestao .container-fluid { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; }
.as-selo-gestao > .container-fluid > .ti { color: var(--as-laranja); font-size: 1.15rem; }
.as-selo-gestao strong { color: var(--as-laranja); }
.as-selo-acoes { margin-left: auto; display: inline-flex; gap: 1rem; }
.as-selo-acoes a { color: var(--as-titulo); text-decoration: none; font-weight: 500; }
.as-selo-acoes a:hover { color: var(--as-laranja); }

/* Impressão: sempre fundo branco, independente do tema */
@media print {
    body { background: #fff !important; }
    .card { box-shadow: none !important; }
}

/* Espaço entre título e subtítulo no cabeçalho dos cards (ajustes da Natália,
   28/10/2026): o Tabler põe .card-title e .card-subtitle lado a lado, colados
   ("Redefinir senhaDefine..."). Vale para todas as telas. */
.card-header > .card-title + .card-subtitle { margin-left: .75rem; }