/*
 * Barra do topo do admin, no layout horizontal_dark do tema Tabler, sem
 * `doubleTopBarInHorizontalLayouts`: o logo, os itens do menu e o usuário numa
 * linha só, compacta, com o ícone de cada item sempre à vista.
 */

/* A largura da coluna do logo: o texto "FabriccaPro" do project_logo. */
:root {
    --admin-brand-width: 132px;
}

header.top .navbar {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* O logo, primeiro item da linha, numa coluna própria: quando os itens não
   cabem numa linha, as seguintes começam alinhadas depois dele, não embaixo. */
header.top .navbar-nav:has(> .nav-brand) {
    position: relative;
    padding-left: var(--admin-brand-width, 116px);
}
header.top .nav-brand {
    position: absolute;
    left: 0;
    top: 0;
}
/* Centrado na altura da primeira linha de itens (38px, a dos .nav-link abaixo). */
header.top .nav-brand .nav-link {
    display: flex;
    align-items: center;
    height: 38px;
    padding-left: 0;
    padding-right: 0;
}

/* Os itens, sem quebrar o texto; o que não couber desce inteiro para outra
   linha, em vez de criar rolagem horizontal. */
header.top .navbar-nav {
    flex-wrap: wrap;
    align-items: center;
}
header.top .navbar-nav .nav-link {
    min-height: 0;
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
}
header.top .navbar-nav .nav-link {
    padding-left: 8px;
    padding-right: 8px;
}

/* A lista vazia que o tema deixa ao lado do logo só ocupa espaço. */
header.top .navbar-nav:not(:has(> *)) {
    display: none;
}

/* O ícone de cada item, em qualquer largura: os componentes do tema o
   escondem entre 992 e 1199 px (d-lg-none d-xl-block). */
header.top .nav-link > .nav-icon {
    display: inline-block !important;
}

/* O item da entidade da página aberta (menu_items.blade.php e o script do
   tema marcam com .active): o realce do item sob o mouse, fixo, e uma linha
   só, embaixo dele. A do Tabler (.nav-item.active:after) sai, para não somar
   uma segunda linha. */
header.top .navbar-nav .nav-link.active {
    color: var(--tblr-navbar-active-color, #fff);
    background-color: rgba(255, 255, 255, .08);
    box-shadow: inset 0 -2px 0 var(--tblr-primary, #206bc4);
}
header.top .navbar-nav .nav-item.active::after {
    content: none;
}

/* Barra de rolagem na cor da Fabricca (o laranja #f60), em todo o admin: trilha laranja clara com
   uma borda à esquerda no laranja forte do polegar. No Chrome e no Safari, `scrollbar-color` anularia os
   estilos ::-webkit-scrollbar (e a borda), então só o Firefox, que não os tem, o recebe. */
/* O tema define `scrollbar-color` (um cinza transparente); com ele o Chrome ignora o ::-webkit-scrollbar. */
:root,
:root * {
    scrollbar-color: auto !important;
}
*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
*::-webkit-scrollbar-track {
    background: #ffe3d1;
    border-left: 1px solid #f60;
}
/* O tema pinta o polegar com uma sombra interna (20% da cor do texto, 40% sob o mouse) por cima do fundo:
   sem tirá-la o laranja só aparecia sob o mouse. */
*::-webkit-scrollbar-thumb,
:hover::-webkit-scrollbar-thumb {
    box-shadow: none !important;
}
*::-webkit-scrollbar-thumb {
    background: #f60;
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
[data-bs-theme=dark] *::-webkit-scrollbar-track {
    background: #3a2a1c;
}
@supports not selector(::-webkit-scrollbar) {
    :root,
    :root * {
        scrollbar-color: #f60 #ffe3d1 !important;
    }
    :root[data-bs-theme=dark],
    :root[data-bs-theme=dark] *,
    [data-bs-theme=dark] :root * {
        scrollbar-color: #f60 #3a2a1c !important;
    }
}

/* Abas dos formulários (ex.: Dados cadastrais / Permissões / Alterar senha): as inativas num cinza
   mais escuro que a página, com texto escuro, e a ativa branca, com um filete laranja no topo. */
.nav-tabs {
    border-bottom: 1px solid #c4cad4;
}
.nav-tabs .nav-link {
    color: #2b3445;
    background-color: #e3e7ee;
    border: 1px solid #c4cad4;
    margin-right: 4px;
    margin-bottom: -1px; /* a ativa cobre a linha da barra: aba e conteúdo ficam contínuos */
}
.nav-tabs .nav-link:hover:not(.active) {
    background-color: #d6dce6;
    color: #1a2233;
}
.nav-tabs .nav-link.active {
    color: #1a2233;
    font-weight: 600;
    background-color: #fff;
    border-color: #c4cad4;
    border-bottom-color: #fff;
    box-shadow: inset 0 3px 0 #f60;
}
[data-bs-theme=dark] .nav-tabs {
    border-bottom-color: #3c465a;
}
[data-bs-theme=dark] .nav-tabs .nav-link {
    color: #cfd6e4;
    background-color: #1b2331;
    border-color: #3c465a;
}
[data-bs-theme=dark] .nav-tabs .nav-link:hover:not(.active) {
    background-color: #263044;
    color: #fff;
}
[data-bs-theme=dark] .nav-tabs .nav-link.active {
    color: #fff;
    background-color: #242f42;
    border-bottom-color: #242f42;
}

/* O conteúdo da aba leva a mesma borda das abas (menos o topo, que é a linha da barra), para aba e
   conteúdo formarem uma peça só. O tema fixa `border-style: none !important` nesse seletor. */
div.tab-container div.tab-content {
    border-style: none solid solid !important;
    border-width: 0 1px 1px !important;
    border-color: #c4cad4 !important;
    border-radius: 0 0 6px 6px;
}
[data-bs-theme=dark] div.tab-container div.tab-content {
    border-color: #3c465a !important;
}

/* O avatar do usuário na bolinha do topo (o tema o sobrepõe às iniciais): sempre preenchendo o círculo. */
header .avatar > img.avatar {
    object-fit: cover;
}