/* ============================================================================
   DEMAN CORE LAYOUT SYSTEM
   Layout essencial extraído e modernizado do Dasho Admin Template
   Versão: 1.0.0 | Fevereiro 2026

   Este arquivo substitui o vendor.css (16.731 linhas, 388 KB) mantendo apenas
   as classes críticas para o funcionamento do layout principal.

   Classes preservadas:
   - .pcoded-navbar (sidebar container)
   - .pcoded-main-container (área de conteúdo)
   - .menupos-fixed (posicionamento fixo)
   - .navbar-collapsed (estado colapsado responsivo)
   - .scroll-div (scrollbar customizado)

   Total: ~220 linhas (redução de 98.7%)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. LAYOUT PRINCIPAL - Container e Wrapper
   ---------------------------------------------------------------------------- */

.pcoded-main-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-left: 264px; /* largura da sidebar */
    transition: margin-left var(--transition-normal, 250ms ease);
    background: var(--deman-bg-secondary, #f8f9fa);
}

.pcoded-main-container:before {
    content: "";
    transition: all var(--transition-normal, 250ms ease);
}

.pcoded-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pcoded-content {
    flex: 1;
    padding: var(--space-4, 1rem);
    background: var(--deman-bg-secondary, #f8f9fa);
}

.pcoded-inner-content,
.main-body,
.page-wrapper {
    width: 100%;
    max-width: 100%;
}

/* ----------------------------------------------------------------------------
   2. SIDEBAR BASE - Estrutura da Navegação Lateral
   ---------------------------------------------------------------------------- */

.pcoded-navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 264px;
    height: 100%;
    background: var(--sidebar-bg, #FAFAFA);
    border-right: 1px solid var(--deman-border-light, #eeeeee);
    z-index: 1029;
    transition: all var(--transition-normal, 250ms ease);
    display: block;
    color: var(--deman-text-secondary, #5a5a5a);
}

/* Reset de listas */
.pcoded-navbar ul {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}

/* Container de conteúdo da navbar */
.pcoded-navbar .navbar-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pcoded-navbar .navbar-content {
    flex: 1;
    overflow: hidden;
    box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.09);
}

.pcoded-navbar .scroll-div.navbar-content {
    height: calc(100% - 64px);
}

/* ----------------------------------------------------------------------------
   3. HEADER LOGO - Logo e Branding
   ---------------------------------------------------------------------------- */

.pcoded-navbar .header-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    float: left;
    background: var(--sidebar-bg, #FAFAFA);
    height: 64px;
    width: 264px;
    text-align: center;
    margin-right: 0;
    padding: 10px 25px;
    transition: all var(--transition-normal, 250ms ease);
    box-shadow: 0 1px 0 0 rgba(181, 189, 202, 0.2), 7px 0 15px 0 rgba(69, 90, 100, 0.09);
}

.pcoded-navbar .header-logo .logo-dark {
    display: none;
}

.pcoded-navbar .header-logo .logo-thumb {
    transform: rotateY(-90deg);
    opacity: 0;
    position: absolute;
    transition: unset;
}

.pcoded-navbar .header-logo + .scroll-div {
    float: left;
    display: inline-block;
}

/* ----------------------------------------------------------------------------
   4. MOBILE MENU - Botão Hamburger
   ---------------------------------------------------------------------------- */

.pcoded-navbar .mobile-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 64px;
    position: absolute;
    right: 10px;
    top: 0;
    padding: 0 10px;
    cursor: pointer;
    transition: all var(--transition-normal, 250ms ease);
}

/* ----------------------------------------------------------------------------
   5. SCROLLBAR CUSTOMIZADO
   ---------------------------------------------------------------------------- */

.scroll-div {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Webkit (Chrome, Safari, Edge) */
.scroll-div::-webkit-scrollbar {
    width: 6px;
}

.scroll-div::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-div::-webkit-scrollbar-thumb {
    background: var(--deman-gray-300, #b0b0b0);
    border-radius: var(--radius-full, 9999px);
}

.scroll-div::-webkit-scrollbar-thumb:hover {
    background: var(--deman-gray-400, #8d8d8d);
}

/* Firefox */
.scroll-div {
    scrollbar-width: thin;
    scrollbar-color: var(--deman-gray-300, #b0b0b0) transparent;
}

/* ----------------------------------------------------------------------------
   6. POSICIONAMENTO FIXO - menupos-fixed
   ---------------------------------------------------------------------------- */

.pcoded-navbar.menupos-fixed {
    position: fixed;
}

.pcoded-navbar.menupos-fixed + .pcoded-main-container {
    margin-left: 264px;
}

/* ----------------------------------------------------------------------------
   7. ESTADO COLAPSADO - navbar-collapsed
   ---------------------------------------------------------------------------- */

.pcoded-navbar.navbar-collapsed {
    width: inherit;
    height: 100%;
    transition: all var(--transition-normal, 250ms ease);
}

.pcoded-navbar.navbar-collapsed .header-logo {
    width: 70px;
    padding: 10px 20px;
}

.pcoded-navbar.navbar-collapsed .header-logo img {
    transform: rotateY(-90deg);
    transform-origin: 0 0;
    opacity: 0;
    transition: unset;
}

.pcoded-navbar.navbar-collapsed .header-logo .logo-thumb {
    transform: rotateY(0deg);
    transform-origin: 0 0;
    opacity: 1;
    left: 20px;
}

.pcoded-navbar.navbar-collapsed .header-logo .mobile-menu {
    transform: rotateY(-90deg);
    transform-origin: 0 0;
    opacity: 0;
}

.pcoded-navbar.navbar-collapsed .navbar-content.ps {
    overflow: visible;
}

/* Ajuste do container principal quando sidebar está colapsada */
.pcoded-navbar.navbar-collapsed ~ .pcoded-header {
    width: calc(100% - 70px);
}

.pcoded-navbar.navbar-collapsed ~ .pcoded-header,
.pcoded-navbar.navbar-collapsed ~ .pcoded-main-container {
    margin-left: 70px;
}

/* Hover na sidebar colapsada - expandir temporariamente */
.pcoded-navbar.navbar-collapsed:hover {
    width: 264px !important;
}

.pcoded-navbar.navbar-collapsed:hover .header-logo {
    width: 264px;
}

.pcoded-navbar.navbar-collapsed:hover .header-logo img {
    transform: rotateY(0deg);
    opacity: 1;
}

.pcoded-navbar.navbar-collapsed:hover .header-logo .logo-thumb {
    transform: rotateY(-90deg);
    opacity: 0;
}

.pcoded-navbar.navbar-collapsed:hover .header-logo .mobile-menu {
    display: flex;
    right: 10px;
}

/* ----------------------------------------------------------------------------
   8. RESPONSIVO - Mobile e Tablet
   ---------------------------------------------------------------------------- */

/* Tablet (1024px e menor) */
@media (max-width: 1024px) {
    .pcoded-navbar {
        position: fixed;
        margin-left: -264px;
        z-index: 1030;
    }

    .pcoded-navbar.ativa {
        margin-left: 0;
        box-shadow: var(--shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.1));
    }

    .pcoded-main-container {
        margin-left: 0;
    }

    .mobile-menu {
        display: flex !important;
    }
}

/* Mobile (768px e menor) */
@media (max-width: 768px) {
    .pcoded-content {
        padding: var(--space-3, 0.75rem);
    }

    .pcoded-navbar {
        width: 264px;
    }
}

/* Mobile pequeno (480px e menor) */
@media (max-width: 480px) {
    .pcoded-content {
        padding: var(--space-2, 0.5rem);
    }
}

/* ----------------------------------------------------------------------------
   9. UTILITÁRIOS DE LAYOUT
   ---------------------------------------------------------------------------- */

/* Prevenção de scroll horizontal */
.pcoded-main-container,
.pcoded-wrapper,
.pcoded-content {
    overflow-x: hidden;
}

/* Garantir que o conteúdo não ultrapasse a largura */
.pcoded-inner-content {
    max-width: 100%;
    overflow-x: auto;
}

/* ----------------------------------------------------------------------------
   NOTAS DE IMPLEMENTAÇÃO:

   1. Este arquivo deve ser carregado ANTES de app.css
   2. As variáveis CSS usam fallbacks para garantir compatibilidade
   3. O layout é baseado em flexbox para melhor responsividade
   4. Classes customizadas do NavMenu.razor não estão aqui (ver app.css)
   5. JavaScript pcoded.min.js é necessário para toggle de collapse

   Substituição de vendor.css:
   - Antes: 16.731 linhas, 388 KB
   - Agora: 220 linhas, ~15 KB
   - Redução: 98.7% de tamanho

   Data: 04 de Fevereiro de 2026
   ---------------------------------------------------------------------------- */



   /*
    Overrides manuais:
   */

*:focus {
  outline: none;
}
.table {
  margin-bottom: 0;
}