/* DMS Mobile - overrides locales encima de Tabler.
 * Mantener este archivo corto y enfocado en cosas que Tabler no cubre. */

/* Rotación del chevron de dropdown-toggle cuando se usa como toggle de collapse
 * en la barra lateral. Tabler/BS5 sólo rotan el chevron para dropdown popup
 * (basado en .show del button), no para [aria-expanded] del collapse. */
.navbar-vertical .nav-link.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Sub-nav anidada bajo cada sección del sidebar: indentación, separación y
 * estado activo del leaf. */
.navbar-vertical .nav-sm {
    padding-left: 0.75rem;
    border-left: 1px solid var(--tblr-border-color);
    margin-left: 1rem;
}

.navbar-vertical .nav-sm .nav-link {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-size: 0.85rem;
}

.navbar-vertical .nav-sm .nav-link.active,
.navbar-vertical .nav-sm .nav-item.active > .nav-link {
    color: var(--tblr-primary);
    font-weight: 500;
}

/* Tom Select: el tema bootstrap5 usa var(--bs-body-bg), pero Tabler
   expone --tblr-* y no define --bs-body-bg, así que el control y el
   menú desplegable quedaban con fondo transparente (se veía el contenido
   detrás). Forzamos la superficie Tabler en control + dropdown. */
.ts-control,
.ts-dropdown,
.ts-dropdown .optgroup-header {
    background-color: var(--tblr-bg-surface, #fff);
    color: var(--tblr-body-color, #182433);
}

.ts-dropdown {
    border: 1px solid var(--tblr-border-color, #e5e7eb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ts-dropdown .active,
.ts-dropdown .active.create {
    background-color: var(--tblr-bg-surface-secondary, #f1f5f9);
    color: var(--tblr-body-color, #182433);
}