/* 
    Single Source of Truth para as cores e estilos globais do sistema.
    Conforme a regra de arquitetura definida em frontend-padrao.md
*/

:root {
    /* Cor Principal (Slate 900) solicitada pelo usuário */
    --cor-primaria: #353a40;
    
    /* Variações auxiliares para hover, focus e fundos gerados a partir do tom primário */
    --cor-primaria-hover: #434954; /* Slate 800 */
    --cor-primaria-light: #b0b2b5; /* Slate 600 */
    --cor-primaria-lightest: #F1F5F9; /* Slate 100 */
}

/* 
    O Unfold às vezes necessita que as cores de foco e highlight possuam
    definições RGB/Hex claras caso o motor Tailwind encontre as variáveis CSS 
*/

/* 
    Sobrescrevendo a Sidebar do Unfold para respeitar a Cor Primária
*/
nav#nav-sidebar-inner {
    background-color: var(--cor-primaria) !important;
}
nav#nav-sidebar-inner * {
    border-color: var(--cor-primaria-hover) !important;
}
/* Cores dos textos e ícones na Sidebar */
nav#nav-sidebar-inner a, 
nav#nav-sidebar-inner span, 
nav#nav-sidebar-inner p, 
nav#nav-sidebar-inner h2,
nav#nav-sidebar-inner svg,
nav#nav-sidebar-inner .material-symbols-outlined {
    color: var(--cor-primaria-lightest) !important;
}
/* Hover nos itens da Sidebar */
nav#nav-sidebar-inner a:hover {
    background-color: var(--cor-primaria-hover) !important;
}

/* 
    Sobrescrevendo a barra superior (Header) para manter contraste no fundo escuro.
    Como o painel não roda via CDN, precisamos forçar o background via CSS tradicional.
*/
#top-header {
    background-color: var(--cor-primaria) !important;
}
#top-header * {
    color: var(--cor-primaria-lightest) !important;
}
/* Garantir que ícones e divisórias se integrem ao fundo */
#top-header .border-base-200, 
#top-header .dark\:border-base-700 {
    border-color: var(--cor-primaria-light) !important;
}
#top-header a:hover {
    color: #ffffff !important;
}

/* 
    Botões de Ação do Objeto (Ex: Histórico, Ver no Site)
    O padrão do Unfold coloca fundo branco (bg-white), fazendo os botões
    desaparecerem contra o fundo geral. Vamos forçar o padrão primário STRIX.
*/
ul[x-bind\:class*="showActions"] {
    background-color: transparent !important;
}
ul[x-bind\:class*="showActions"] li {
    background-color: var(--cor-primaria) !important;
    border-color: var(--cor-primaria-hover) !important;
    transition: all 0.2s ease-in-out !important;
}
ul[x-bind\:class*="showActions"] li a,
ul[x-bind\:class*="showActions"] li a span {
    color: #ffffff !important;
}
ul[x-bind\:class*="showActions"] li:hover {
    background-color: var(--cor-primaria-hover) !important;
}

/* 
    Sobrescrevendo os botões genéricos de Adicionar (+ addlink)
    Isso força que o botão de adicionar uma chave estrangeira/categoria
    tenha o formato de botão (quadrado com cantos arredondados) 
    e use estritamente a cor primária, removendo o padrão bolinha.
*/
a.addlink {
    background-color: var(--cor-primaria) !important;
    border-radius: 8px !important; /* Muda de bolinha perfeita para formato botão */
    color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
}
a.addlink:hover {
    background-color: var(--cor-primaria-hover) !important;
}