/* theme-layout.css — Layout global: header, menú lateral, sidebar, dropdowns.
   Modo oscuro aplicado con html.theme-dark. Cargar antes que theme-dashboard y theme-views. */

/* ========== Base: iconos del header (barra superior) ========== */
.navbar-icons-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.navbar-icons-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 46px;
    width: 46px;
    height: 46px;
    padding: 0;
    text-align: center;
}

.navbar-icons-link .navbar-icons-icon,
.navbar-icons-link .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
    margin: 0 auto;
}

/* ========== Modo oscuro: global y layout ========== */
html.theme-dark .loading-progress-text,
html.theme-dark .loading-progress-text::after {
    color: #ffffff;
}

html.theme-dark body {
    background-color: #0f1419;
}

html.theme-dark .page {
    background-color: #0f1419;
}

html.theme-dark .main {
    background-color: #0f1419;
}

/* Header (menu-lg) */
html.theme-dark .menu-lg,
html.theme-dark .menu {
    background-color: #1a202c;
    border-bottom: 1px solid #2d3748;
}

html.theme-dark .navbar-brand-link {
    color: #e2e8f0;
}

html.theme-dark .navbar-icons-container .navbar-icons-link,
html.theme-dark .navbar-icons-link {
    color: #e2e8f0;
    background-color: transparent;
}

html.theme-dark .navbar-icons-link:hover {
    color: #f8fafc;
    background-color: rgba(255, 255, 255, 0.08);
}

html.theme-dark .navbar-icons-link-active,
html.theme-dark .navbar-icons-link.active {
    color: #6366f1;
    background-color: rgba(99, 102, 241, 0.2);
}

html.theme-dark .navbar-icons-menu-link,
html.theme-dark .navbar-icons-menu-icon {
    color: #e2e8f0;
    background-color: transparent;
}

html.theme-dark .navbar-icons-menu-link:hover {
    color: #f8fafc;
    background-color: rgba(255, 255, 255, 0.08);
}

html.theme-dark .navbar-icons-menu-avatar .avatar {
    border: 1px solid #4a5568;
}

/* Dropdowns del header */
html.theme-dark .menu-lg .dropdown-menu {
    background-color: #1a202c;
    border-color: #2d3748;
}

html.theme-dark .menu-lg .dropdown-item {
    color: #e2e8f0;
}

html.theme-dark .menu-lg .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

html.theme-dark .menu-lg .dropdown-header {
    color: #718096;
}

html.theme-dark .menu-lg .dropdown-divider {
    border-color: #2d3748;
}

/* Sidebar / menú lateral */
html.theme-dark .nav-menu,
html.theme-dark .app-sidebar.nav-menu {
    background-color: #1a202c;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
}

html.theme-dark .sidebar {
    background-color: #1a202c;
}

/* DevExpress TreeView en sidebar */
html.theme-dark .nav-menu .dxbl-treeview,
html.theme-dark .app-sidebar .dxbl-treeview {
    background-color: transparent;
    color: #e2e8f0;
}

html.theme-dark .nav-menu .dxbl-treeview-item-content,
html.theme-dark .app-sidebar .dxbl-treeview-item-content {
    color: #e2e8f0;
}

html.theme-dark .nav-menu .dxbl-treeview-item-content:hover,
html.theme-dark .app-sidebar .dxbl-treeview-item-content:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

html.theme-dark .nav-menu .dxbl-treeview-item.dxbl-active .dxbl-treeview-item-content,
html.theme-dark .app-sidebar .dxbl-treeview-item.dxbl-active .dxbl-treeview-item-content {
    background-color: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
}

/* Panel de filtro del TreeView (input "Filtrar...") */
html.theme-dark .nav-menu .dxbl-edit,
html.theme-dark .nav-menu input.dxbl-form-control,
html.theme-dark .app-sidebar .dxbl-edit,
html.theme-dark .app-sidebar input.dxbl-form-control {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}

html.theme-dark .nav-menu .dxbl-edit::placeholder,
html.theme-dark .app-sidebar input::placeholder {
    color: #718096;
}

/* Scrollbars modo oscuro — globales */
html.theme-dark * {
    scrollbar-color: #6366f1 #1e2433;
}

html.theme-dark ::-webkit-scrollbar-track {
    background: #1e2433;
}

html.theme-dark ::-webkit-scrollbar-thumb {
    background: #6366f1;
    border-color: #1e2433;
}

html.theme-dark ::-webkit-scrollbar-thumb:hover {
    background: #818cf8;
}

/* Scrollbars modo oscuro — grillas DevExpress */
html.theme-dark .dxbl-grid,
html.theme-dark .dxbl-scroll-viewer {
    scrollbar-color: #6366f1 #252d3d;
}

html.theme-dark .dxbl-grid ::-webkit-scrollbar-track,
html.theme-dark .dxbl-scroll-viewer::-webkit-scrollbar-track {
    background: #252d3d;
}

html.theme-dark .dxbl-grid ::-webkit-scrollbar-thumb,
html.theme-dark .dxbl-scroll-viewer::-webkit-scrollbar-thumb {
    background: #6366f1;
    border-color: #252d3d;
}

html.theme-dark .dxbl-grid ::-webkit-scrollbar-thumb:hover,
html.theme-dark .dxbl-scroll-viewer::-webkit-scrollbar-thumb:hover {
    background: #818cf8;
}