/* ============================================================
   Am Smart — Tema de marca sobre Vuexy
   ------------------------------------------------------------
   Carregar DEPOIS de vendor/vuexy/css/core.css e ANTES de
   qualquer folha de página.

   Só redefine custom properties. Não escreve regra de
   componente — é isso que permite retematizar o Vuexy inteiro
   sem recompilar o SCSS.

   Paleta:  #222628 grafite (primário) · #6F7C84 ardósia (secundário)
            Os dois são pontos da mesma escala — ver adiante.
   Fontes:  Gilroy (display) + Figtree (interface)
   ============================================================ */

/* ── Gilroy ───────────────────────────────────────────────────
   ATENÇÃO: só existem 300, 700, 800 e 900. Os pesos 400, 500 e
   600 — a faixa da interface — NÃO estão disponíveis, por isso
   a família de UI é a Figtree. Ver docs/TIPOGRAFIA.md.
   ------------------------------------------------------------ */
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-Bold.woff') format('woff'),
         url('../fonts/gilroy/Gilroy-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-ExtraBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-Black.woff') format('woff'),
         url('../fonts/gilroy/Gilroy-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-BlackItalic.woff') format('woff'),
         url('../fonts/gilroy/Gilroy-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* ── Escala da marca ──────────────────────────────────────────
   As duas cores da identidade são dois pontos de UMA escala: o
   primário #222628 e o secundário #6F7C84 estão ambos em 201° com
   ~8,5% de saturação. A rampa abaixo foi gerada a partir delas, o
   que faz o secundário poder ser usado tanto quanto o primário sem
   soar como cor estranha — é a mesma família.
   ------------------------------------------------------------ */
:root {
    --am-brand-50:   #F3F7F9;   /* fundo de página          */
    --am-brand-100:  #E6EEF2;   /* superfície sutil, rótulos */
    --am-brand-200:  #CDDEE7;   /* bordas                   */
    --am-brand-300:  #ADC7D5;   /* acento claro, desabilitado */
    --am-brand-400:  #8BA4B1;
    --am-brand-500:  #6F7C84;   /* ← SECUNDÁRIO da marca    */
    --am-brand-600:  #5A666C;   /* secundário com texto branco (5,91:1) */
    --am-brand-700:  #464F53;
    --am-brand-800:  #32383B;
    --am-brand-900:  #222628;   /* ← PRIMÁRIO da marca      */
}

/* ── Papéis ───────────────────────────────────────────────────
   Nomes próprios, independentes do Bootstrap. Use estes ao
   escrever CSS novo — nunca os hexadecimais diretos.
   ------------------------------------------------------------ */
:root {
    /* Primário — grafite AM. Branco por cima: 15,26:1 (AAA).
       Sendo quase preto, o hover CLAREIA em vez de escurecer:
       escurecer um #222628 não se enxerga. */
    --am-brand-1:          var(--am-brand-900);
    --am-brand-1-rgb:      34, 38, 40;
    --am-brand-1-hover:    var(--am-brand-800);
    --am-brand-1-active:   var(--am-brand-700);
    --am-brand-1-deep:     var(--am-brand-900);
    --am-brand-1-subtle:   var(--am-brand-100);
    --am-brand-1-border:   var(--am-brand-200);

    /* Secundário — ardósia AM. Usado tanto quanto o primário:
       botões discretos, rótulos, ícones, bordas, texto de apoio.
       ATENÇÃO: com texto branco por cima rende 4,29:1 e REPROVA AA
       para corpo de texto. Quando houver texto branco pequeno em
       cima, usar --am-brand-2-ui (5,91:1). */
    --am-brand-2:          var(--am-brand-500);
    --am-brand-2-rgb:      111, 124, 132;
    --am-brand-2-ui:       var(--am-brand-600);
    --am-brand-2-hover:    var(--am-brand-700);
    --am-brand-2-subtle:   var(--am-brand-100);
    --am-brand-2-border:   var(--am-brand-200);

    /* Terciário — o papel de superfície/borda que antes era um
       cinza solto agora vem da própria escala. */
    --am-brand-3:          var(--am-brand-300);
    --am-brand-3-rgb:      173, 199, 213;
    --am-brand-3-subtle:   var(--am-brand-100);

    /* Tipografia */
    --am-font-display: 'Gilroy', 'Figtree', system-ui, -apple-system, sans-serif;
    --am-font-ui:      'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ── Ligação com o Bootstrap/Vuexy ────────────────────────────
   O core.css do Vuexy consome estas variáveis em 323 lugares.
   Redefini-las aqui reveste o template inteiro.

   Mudança em relação à paleta anterior: o `secondary` do Bootstrap
   agora É o secundário da marca. Antes ele ficava no cinza neutro
   do template porque a marca era azul e pintar de azul todo botão
   discreto seria demais. Com a marca sendo ardósia, os dois papéis
   coincidem — e é isso que põe o secundário em uso pesado, de
   graça, em todo `btn-secondary`, `text-secondary` e `bg-label-*`.
   ------------------------------------------------------------ */
:root,
[data-bs-theme='light'] {
    --bs-primary:               var(--am-brand-1);
    --bs-primary-rgb:           var(--am-brand-1-rgb);
    --bs-primary-contrast:      #FFFFFF;
    --bs-primary-text-emphasis: var(--am-brand-900);
    --bs-primary-bg-subtle:     var(--am-brand-100);
    --bs-primary-border-subtle: var(--am-brand-200);

    --bs-secondary:               var(--am-brand-2);
    --bs-secondary-rgb:           var(--am-brand-2-rgb);
    --bs-secondary-contrast:      #FFFFFF;
    --bs-secondary-text-emphasis: var(--am-brand-700);
    --bs-secondary-bg-subtle:     var(--am-brand-100);
    --bs-secondary-border-subtle: var(--am-brand-200);
    --bs-secondary-color:         var(--am-brand-600);
    --bs-secondary-color-rgb:     90, 102, 108;

    --bs-body-bg:      var(--am-brand-50);
    --bs-border-color: var(--am-brand-200);

    --bs-link-color:       var(--am-brand-1);
    --bs-link-color-rgb:   var(--am-brand-1-rgb);
    --bs-link-hover-color: var(--am-brand-2-ui);

    --bs-font-sans-serif: var(--am-font-ui);

    /* O `dark` do Bootstrap vinha do roxo do template (#2f3349).
       Apontando-o para o grafite da marca, os 601 `text-dark` e 220
       `bg-dark` espalhados pelas views passam a seguir a identidade
       sem precisar editar view nenhuma. */
    --bs-dark:               var(--am-brand-900);
    --bs-dark-rgb:           var(--am-brand-1-rgb);
    --bs-dark-contrast:      #FFFFFF;
    --bs-dark-text-emphasis: var(--am-brand-900);
    --bs-dark-bg-subtle:     var(--am-brand-100);
    --bs-dark-border-subtle: var(--am-brand-200);
}

/* Botões da marca — o Vuexy declara estes valores literalmente
   dentro de cada .btn-*, então precisam ser reescritos. */
.btn-primary {
    --bs-btn-color:                 #FFFFFF;
    --bs-btn-bg:                    var(--am-brand-1);
    --bs-btn-border-color:          var(--am-brand-1);
    --bs-btn-hover-color:           #FFFFFF;
    --bs-btn-hover-bg:              var(--am-brand-1-hover);
    --bs-btn-hover-border-color:    var(--am-brand-1-hover);
    --bs-btn-focus-shadow-rgb:      var(--am-brand-1-rgb);
    --bs-btn-active-color:          #FFFFFF;
    --bs-btn-active-bg:             var(--am-brand-1-active);
    --bs-btn-active-border-color:   var(--am-brand-1-active);
    --bs-btn-active-shadow:         none;
    --bs-btn-disabled-color:        #FFFFFF;
    --bs-btn-disabled-bg:           var(--am-brand-1);
    --bs-btn-disabled-border-color: var(--am-brand-1);
}

.btn-outline-primary {
    --bs-btn-color:                 var(--am-brand-1);
    --bs-btn-border-color:          var(--am-brand-300);
    --bs-btn-bg:                    transparent;
    --bs-btn-hover-color:           #FFFFFF;
    --bs-btn-hover-bg:              var(--am-brand-1);
    --bs-btn-hover-border-color:    var(--am-brand-1);
    --bs-btn-focus-shadow-rgb:      var(--am-brand-1-rgb);
    --bs-btn-active-color:          #FFFFFF;
    --bs-btn-active-bg:             var(--am-brand-1-active);
    --bs-btn-active-border-color:   var(--am-brand-1-active);
    --bs-btn-disabled-color:        var(--am-brand-400);
    --bs-btn-disabled-border-color: var(--am-brand-200);
}

/* O secundário carrega texto branco: usa o passo 600 (5,91:1),
   não o 500, que reprovaria AA. */
.btn-secondary {
    --bs-btn-color:                 #FFFFFF;
    --bs-btn-bg:                    var(--am-brand-2-ui);
    --bs-btn-border-color:          var(--am-brand-2-ui);
    --bs-btn-hover-color:           #FFFFFF;
    --bs-btn-hover-bg:              var(--am-brand-2-hover);
    --bs-btn-hover-border-color:    var(--am-brand-2-hover);
    --bs-btn-focus-shadow-rgb:      var(--am-brand-2-rgb);
    --bs-btn-active-color:          #FFFFFF;
    --bs-btn-active-bg:             var(--am-brand-700);
    --bs-btn-active-border-color:   var(--am-brand-700);
    --bs-btn-active-shadow:         none;
    --bs-btn-disabled-color:        #FFFFFF;
    --bs-btn-disabled-bg:           var(--am-brand-400);
    --bs-btn-disabled-border-color: var(--am-brand-400);
}

.btn-outline-secondary {
    --bs-btn-color:                 var(--am-brand-2-ui);
    --bs-btn-border-color:          var(--am-brand-300);
    --bs-btn-bg:                    transparent;
    --bs-btn-hover-color:           #FFFFFF;
    --bs-btn-hover-bg:              var(--am-brand-2-ui);
    --bs-btn-hover-border-color:    var(--am-brand-2-ui);
    --bs-btn-focus-shadow-rgb:      var(--am-brand-2-rgb);
    --bs-btn-active-color:          #FFFFFF;
    --bs-btn-active-bg:             var(--am-brand-2-hover);
    --bs-btn-active-border-color:   var(--am-brand-2-hover);
    --bs-btn-disabled-color:        var(--am-brand-400);
    --bs-btn-disabled-border-color: var(--am-brand-200);
}

.progress { --bs-progress-bar-bg: var(--am-brand-1); }

/* ── Secundário em uso pesado ─────────────────────────────────
   Onde o template deixaria neutro, entra a ardósia da marca.
   ------------------------------------------------------------ */
.menu-vertical .menu-item:not(.active) > .menu-link > .menu-icon { color: var(--am-brand-2); }
.layout-navbar .btn-icon { color: var(--am-brand-2); }
.am-kpi-icon:not(.gradient) { background-color: var(--am-brand-100); color: var(--am-brand-2-ui); }
.table > thead > tr > th { color: var(--am-brand-2-ui); }
.breadcrumb .breadcrumb-item a { color: var(--am-brand-2-ui); }
.form-text, .form-label small { color: var(--am-brand-2-ui); }

/* O rótulo secundário do Vuexy usa o próprio secundário como texto
   sobre um fundo clareado dele mesmo: com o #6F7C84 isso rende
   3,56:1, abaixo de AA. O texto desce um passo na escala. */
.bg-label-secondary { color: var(--am-brand-700) !important; }

/* Foco de campo na ardósia, não no grafite: sobre fundo claro o
   anel do primário quase não se enxerga. */
.form-control:focus,
.form-select:focus {
    border-color: var(--am-brand-2);
    box-shadow: 0 0 0 0.15rem rgba(var(--am-brand-2-rgb), 0.25);
}

/* Ícone do cabeçalho de card e do card-title herdam a ardósia. */
.card-title > .ti:first-child,
.am-card-title > .ti:first-child { color: var(--am-brand-2-ui); }

/* ── Modo escuro ──────────────────────────────────────────────
   O tema escuro do Vuexy é calibrado para o roxo original: a rampa
   clara vinha a 248° com saturação alta, e é ela que alimenta todo
   o sistema de tints. Aqui a rampa inteira é regerada em 201° — o
   mesmo matiz da marca — com saturação contida.

   O primário não pode ser o #222628: sobre fundo escuro ele É o
   fundo. No escuro os dois papéis sobem na escala e invertem o
   texto por cima, como o próprio Vuexy faz.
   ------------------------------------------------------------ */
[data-bs-theme='dark'] {
    /* A escala inverte de papel no escuro: 50 vira a superfície mais
       funda e 900 a mais clara. Sem isto, todo `var(--am-brand-100)`
       usado como fundo — ícone de KPI, rótulo — vira uma mancha clara
       em cima do tema escuro. */
    --am-brand-50:   #1A1E20;
    --am-brand-100:  #252A2D;
    --am-brand-200:  #31383C;
    --am-brand-300:  #3E474C;
    --am-brand-400:  #647178;
    --am-brand-500:  #8FA3AE;
    --am-brand-600:  #A0B2BB;
    --am-brand-700:  #ABBBC4;
    --am-brand-800:  #B5C4CC;
    --am-brand-900:  #B6C5CE;

    --am-brand-1:          #B6C5CE;   /* 9,49:1 sobre o fundo */
    --am-brand-1-rgb:      182, 197, 206;
    --am-brand-1-hover:    #C9D5DC;
    --am-brand-1-active:   #DAE3E8;
    --am-brand-1-deep:     #DAE3E8;
    --am-brand-1-subtle:   #2B3236;
    --am-brand-1-border:   #3E474C;

    --am-brand-2:          #8FA3AE;   /* 6,41:1 sobre o fundo */
    --am-brand-2-rgb:      143, 163, 174;
    --am-brand-2-ui:       #8FA3AE;
    --am-brand-2-hover:    #A6B7C0;
    --am-brand-2-subtle:   #2B3236;
    --am-brand-2-border:   #3E474C;

    --am-brand-3:          #4E595F;
    --am-brand-3-rgb:      78, 89, 95;
    --am-brand-3-subtle:   #323A3E;

    /* Rampa neutra regerada em 201° */
    --bs-base-color:              #E3E6E8;
    --bs-base-color-rgb:          227, 230, 232;
    --bs-body-bg:                 #1A1E20;
    --bs-body-bg-rgb:             26, 30, 32;
    --bs-body-color:              #B0BABF;
    --bs-body-color-rgb:          176, 186, 191;
    --bs-paper-bg:                #24292B;
    --bs-paper-bg-rgb:            36, 41, 43;
    --bs-heading-color:           #DADFE2;
    --bs-border-color:            #3E474C;

    --bs-secondary:               var(--am-brand-2);
    --bs-secondary-rgb:           var(--am-brand-2-rgb);
    --bs-secondary-contrast:      #14181A;
    --bs-secondary-text-emphasis: #C2CFD6;
    --bs-secondary-color:         #7A8890;
    --bs-secondary-color-rgb:     122, 136, 144;
    --bs-secondary-bg:            #7A8890;
    --bs-secondary-bg-rgb:        122, 136, 144;
    --bs-secondary-bg-subtle:     #323A3E;
    --bs-secondary-border-subtle: #485257;
    --bs-tertiary-bg:             #4E595F;
    --bs-tertiary-bg-rgb:         78, 89, 95;
    --bs-tertiary-color:          rgba(176, 186, 191, 0.5);

    --bs-light-bg-subtle:         #2B3236;
    --bs-light-border-subtle:     #3A4347;
    --bs-light-text-emphasis:     #B0BABF;
    --bs-dark-bg-subtle:          #303840;
    --bs-dark-border-subtle:      #414B51;
    --bs-dark-text-emphasis:      #E3E6E8;
    --bs-dark:                    var(--am-brand-1);
    --bs-dark-rgb:                var(--am-brand-1-rgb);
    --bs-dark-contrast:           #14181A;

    --bs-gray-25:   #272E31;
    --bs-gray-50:   #2C3336;
    --bs-gray-75:   #30383B;
    --bs-gray-100:  #454F54;
    --bs-gray-200:  #3E474C;
    --bs-gray-300:  #59656B;
    --bs-gray-400:  #7A8890;
    --bs-gray-500:  #8FA3AE;
    --bs-gray-600:  #9DAEB7;
    --bs-gray-700:  #B0BABF;
    --bs-gray-800:  #C6CED2;
    --bs-gray-900:  #DADFE2;
    --bs-gray:      #8FA3AE;
    --bs-gray-rgb:  143, 163, 174;

    --bs-link-color:           var(--am-brand-1);
    --bs-link-color-rgb:       var(--am-brand-1-rgb);
    --bs-link-hover-color:     var(--am-brand-1-hover);
    --bs-link-hover-color-rgb: 201, 213, 220;

    --bs-box-shadow:    0 0.1875rem 0.75rem 0 rgba(8, 11, 12, 0.28);
    --bs-box-shadow-xs: 0 0.0625rem 0.375rem 0 rgba(8, 11, 12, 0.22);
    --bs-box-shadow-sm: 0 0.125rem 0.5rem 0 rgba(8, 11, 12, 0.24);
    --bs-box-shadow-lg: 0 0.25rem 1.125rem 0 rgba(8, 11, 12, 0.30);
    --bs-box-shadow-xl: 0 0.3125rem 1.875rem 0 rgba(8, 11, 12, 0.34);
    --bs-card-hover-box-shadow: 0 0.25rem 1.125rem 0 rgba(8, 11, 12, 0.36);
}

/* No escuro os botões da marca são claros: o texto por cima inverte. */
[data-bs-theme='dark'] .btn-primary,
[data-bs-theme='dark'] .btn-secondary {
    --bs-btn-color:            #14181A;
    --bs-btn-hover-color:      #14181A;
    --bs-btn-active-color:     #14181A;
    --bs-btn-disabled-color:   #14181A;
}
[data-bs-theme='dark'] .btn-outline-primary,
[data-bs-theme='dark'] .btn-outline-secondary {
    --bs-btn-hover-color:  #14181A;
    --bs-btn-active-color: #14181A;
}

/* ── Tipografia ───────────────────────────────────────────────
   Regra de ouro: Gilroy só em display (títulos, KPIs, marca),
   porque só temos 700/800/900. Corpo, labels, botões, células
   de tabela e menu vão de Figtree, que tem 400/500/600/700.
   Nunca misturar as duas dentro do mesmo bloco de texto.
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.am-page-title,
.am-card-title,
.am-kpi-value,
.app-brand-text,
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
    font-family: var(--am-font-display);
    font-weight: 800;
    letter-spacing: -0.015em;
}

h5, h6, .am-card-title { font-weight: 700; letter-spacing: -0.005em; }

/* Números que se alinham em coluna. */
.am-kpi-value,
.table td.num,
.text-tabular { font-variant-numeric: tabular-nums; }

/* ── Utilitários de marca secundária ──────────────────────────
   O `secondary` do Bootstrap continua sendo o cinza neutro —
   mexer nele repintaria de azul todo botão discreto da
   plataforma. A cor secundária da marca ganha nome próprio.
   ------------------------------------------------------------ */
.text-brand-2  { color: var(--am-brand-2-ui) !important; }
.bg-brand-2    { background-color: var(--am-brand-2) !important; color: #FFFFFF !important; }
.border-brand-2{ border-color: var(--am-brand-2) !important; }

.bg-label-brand-2 {
    background-color: var(--am-brand-2-subtle) !important;
    color: var(--am-brand-2-ui) !important;
}

.btn-brand-2 {
    --bs-btn-color:              #FFFFFF;
    --bs-btn-bg:                 var(--am-brand-2-ui);
    --bs-btn-border-color:       var(--am-brand-2-ui);
    --bs-btn-hover-color:        #FFFFFF;
    --bs-btn-hover-bg:           #26639F;
    --bs-btn-hover-border-color: #26639F;
    --bs-btn-focus-shadow-rgb:   48, 127, 226;
    --bs-btn-active-color:       #FFFFFF;
    --bs-btn-active-bg:          #26639F;
    --bs-btn-active-border-color:#1F5688;
}

/* ── Tokens legados do app.css ───────────────────────────────
   O `public/css/app.css` deixou de ser carregado pelo painel na
   fase 8, mas 220 usos de `var(--am-*)` continuam espalhados por
   views e folhas de módulo. Sem estes apelidos eles resolveriam
   para nada e a página perderia cor e espaçamento.

   Mapeados para tokens semânticos do Vuexy, não para hexadecimais:
   assim eles acompanham o modo escuro de graça.

   `--am-black` marcava o ACENTO da marca (link em hover, aba ativa,
   borda de item selecionado), não texto corrido — o corpo usava
   `--am-gray-700`. Por isso vira o azul, e não o heading-color.
   ------------------------------------------------------------ */
:root {
    --am-black:     var(--am-brand-1);
    --am-white:     var(--bs-paper-bg);

    --am-gray-50:   var(--bs-body-bg);
    --am-gray-100:  var(--bs-secondary-bg-subtle);
    --am-gray-200:  var(--bs-border-color);
    --am-gray-300:  var(--bs-border-color);
    --am-gray-400:  var(--bs-secondary-color);
    --am-gray-500:  var(--bs-secondary-color);
    --am-gray-600:  var(--bs-body-color);
    --am-gray-700:  var(--bs-body-color);
    --am-gray-900:  var(--bs-heading-color);

    --am-body-bg:   var(--bs-body-bg);

    --am-gradient:   linear-gradient(135deg, var(--am-brand-1) 0%, var(--am-brand-2) 100%);
    --am-gradient-h: linear-gradient(135deg, var(--am-brand-1-hover) 0%, var(--am-brand-2) 100%);

    --am-shadow-sm: var(--bs-box-shadow-sm);
    --am-shadow-md: var(--bs-box-shadow);
    --am-shadow-lg: var(--bs-box-shadow-lg);

    --am-border-r:    0.375rem;
    --am-card-radius: 0.375rem;
    --am-transition:  0.2s ease;

    /* Métricas do layout antigo — ainda citadas em cálculos de
       largura em algumas telas. */
    --am-sidebar-w:           260px;
    --am-sidebar-collapsed-w: 72px;
    --am-topbar-h:            64px;
}