/* ============================================================================
   ESTUDO pedro 2026-06-02 Reskin Orvyx (be) — casca (shell): sidebar, topbar,
   perfil e footer. Escopo por IDs estaveis (#mainnav-container, #navbar) para
   vencer Bootstrap 3/Nifty por especificidade, carregado apos os vendor CSS.
   ============================================================================ */

/* ---------------------------------------------------------------- Sidebar -- */
/* Cor/borda da sidebar valem em qualquer largura (visual). */
#mainnav-container {
    background: var(--card);
    border-right: 1px solid var(--border);
}

/* Sidebar FIXA: antes era position:absolute ancorada ao #container, entao rolava
   junto com a pagina. Fixa no viewport, o menu rola internamente (.nano-content).
   IMPORTANTE: SO no desktop (>=768px). No mobile o Nifty usa um drawer que
   recolhe/desliza (.mainnav-in/.mainnav-out); forcar position:fixed + left:0 em
   qualquer largura fazia a sidebar NAO recolher no mobile. */
@media (min-width: 768px) {
    #mainnav-container {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 999;
    }
}

#mainnav-container #mainnav,
#mainnav-container .nano-content {
    background: transparent;
}

/* Cabecalhos e divisores de secao */
/* Nifty deixa o list-header claro (sidebar escura por padrao) com regra mais
   especifica — por isso ficava branco no light. Forcamos a cor de token. */
#mainnav-menu li.list-header {
    color: var(--muted-foreground) !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 11px;
    font-weight: 600;
    padding: 16px 20px 6px;
}

#mainnav-menu .list-divider {
    border-color: var(--border);
    margin: 6px 0;
}

/* Itens do menu */
#mainnav-menu > li > a {
    color: var(--foreground);
    border-radius: var(--radius);
    margin: 2px 10px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color .15s ease, color .15s ease;
}

#mainnav-menu > li > a > i {
    color: var(--muted-foreground);
    font-size: 18px;
    transition: color .15s ease;
}

#mainnav-menu > li > a:hover,
#mainnav-menu > li > a:focus {
    background: var(--secondary);
    color: var(--foreground);
}

#mainnav-menu > li > a:hover > i {
    color: var(--primary);
}

/* Item ativo — realce sobrio (sem gradiente): fundo suave + cor primaria */
#mainnav-menu > li.active > a,
#mainnav-menu > li.active-link > a,
#mainnav-menu > li.active-sub > a {
    background: var(--secondary);
    color: var(--primary);
    font-weight: 600;
}

#mainnav-menu > li.active > a > i,
#mainnav-menu > li.active-link > a > i,
#mainnav-menu > li.active-sub > a > i {
    color: var(--primary);
}

/* Menu recolhido (mainnav-sm): centraliza o icone no trilho estreito */
#container.mainnav-sm #mainnav-menu > li > a {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: 6px;
    margin-right: 6px;
}

#container.mainnav-sm #mainnav-menu > li > a > i {
    margin: 0;
}

/* ---------------------------------------------------------------- Perfil --- */
/* Perfil compacto (sem avatar): so o nome do usuario, area enxuta */
#mainnav-profile {
    border-bottom: 1px solid var(--border);
    padding: 10px 16px;
}

/* Sem foto de perfil hoje — remove o avatar acima do nome do usuario */
#mainnav-profile .pad-btm {
    display: none;
}

#mainnav-profile .profile-wrap {
    padding: 0 !important;
    text-align: left !important;
}

#mainnav-profile .mnp-name {
    color: var(--foreground);
    font-weight: 600;
    font-size: 13.5px;
    margin: 0;
    line-height: 1.3;
}

#mainnav-profile .mnp-desc {
    color: var(--muted-foreground);
    font-size: 11px;
    margin: 0;
}

/* ----------------------------------------------------- Filtro do menu ----- */
.ovx-menu-filter {
    position: relative;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

.ovx-menu-filter > i {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-foreground);
    font-size: 14px;
    pointer-events: none;
}

.ovx-menu-filter input {
    width: 100%;
    height: 34px;
    padding: 0 10px 0 32px;
    border: 1px solid var(--input);
    border-radius: 8px;
    background: var(--background);
    color: var(--foreground);
    font-size: 13px;
    outline: none;
}

.ovx-menu-filter input::placeholder {
    color: var(--muted-foreground);
}

.ovx-menu-filter input:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}

/* No menu recolhido nao ha espaco para o filtro */
#container.mainnav-sm .ovx-menu-filter {
    display: none;
}

/* ---------------------------------------------------------------- Topbar --- */
#navbar {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--ovx-shadow-sm);
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}

/* Brand / logo no topo: wordmark (expandido) x icone (recolhido) */
#navbar .navbar-header {
    height: 60px;
    display: flex;
    align-items: center;
}

#navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 14px;
    background: transparent !important;
}

/* Recolhido: centraliza a logo no trilho estreito (sem padding lateral) */
#container.mainnav-sm #navbar .navbar-brand {
    padding: 0;
    justify-content: center;
}

/* Marca = SO o nome (wordmark), SEM imagem de logo ao lado. A logo.png (fallback)
   nao representava a marca e poluia ao lado do nome -> removida (pedido do
   cliente, 2026-06-03). Esconde os 4 .ovx-logo e os <img> brand-icon/cliente. */
#navbar .ovx-brand,
#navbar .navbar-brand .brand-icon,
#navbar .navbar-brand .brand-client-icon {
    display: none !important;
}

/* Wordmark: nome COMPLETO quando expandido; SO a 1a letra quando o menu recolhe.
   .brand-initial e renderizado no cabecalho.ascx (1a letra do Nome_curto). */
#navbar .brand-title {
    display: block;
}

#navbar .brand-title .brand-text {
    display: inline-block;
}

#navbar .brand-title .brand-initial {
    display: none;
}

#container.mainnav-sm #navbar .brand-title {
    display: block !important;
    width: 100%;
    text-align: center;
}

#container.mainnav-sm #navbar .brand-title .brand-text {
    display: none;
}

#container.mainnav-sm #navbar .brand-title .brand-initial {
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
}

/* Bloco navy atras do brand (pseudo .navbar-header::before do skin/cabecalho) */
#navbar .navbar-header::before,
#navbar .navbar-header::after {
    background: transparent !important;
    content: none !important;
}

/* Centro do topo vazio por enquanto */
#navbar .navbar-center {
    display: none;
}

#navbar .brand-title .brand-text,
#navbar #tituloAplicacao {
    color: var(--foreground);
    font-weight: 600;
}

#navbar .navbar-top-links > li > a {
    color: var(--foreground);
}

#navbar .navbar-top-links > li > a:hover,
#navbar .navbar-top-links > li > a:focus {
    color: var(--primary);
}

#navbar .navbar-top-links > li > a > i {
    color: var(--muted-foreground);
}

#navbar .navbar-top-links > li > a:hover > i {
    color: var(--primary);
}

/* Dropdowns da topbar */
#navbar .dropdown-menu {
    background: var(--popover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--ovx-shadow-lg);
    color: var(--popover-foreground);
}

#navbar .dropdown-menu .head-list > li > a,
#navbar .dropdown-menu a {
    color: var(--popover-foreground);
}

#navbar .dropdown-menu a:hover {
    background: var(--secondary);
    color: var(--foreground);
}

/* ----------------------------------------------------- Toggle de tema ----- */
#orvyx-theme-toggle > a {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#orvyx-theme-toggle .ovx-icon-sun {
    display: none;
}

#orvyx-theme-toggle .ovx-icon-moon {
    display: inline-block;
}

html.dark #orvyx-theme-toggle .ovx-icon-sun {
    display: inline-block;
}

html.dark #orvyx-theme-toggle .ovx-icon-moon {
    display: none;
}

/* ---------------------------------------------------------------- Footer --- */
#footer {
    background: var(--card) !important;
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
}

#footer p {
    color: var(--muted-foreground);
}

/* Botao scroll-top */
.scroll-top.btn {
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: 50%;
    box-shadow: var(--ovx-shadow-md);
}