/**
 * Betech Hyva – Left sidebar menu.
 * To ensure Tailwind processes it, @import this file in the theme’s tailwind-source.css.
 */

/* Root */
.bhyva-sidebar {
  @apply fixed left-0 top-0 bottom-0 z-40 hidden flex-row overflow-hidden transition-[width] duration-300 ease-out lg:flex;
}

.bhyva-sidebar--collapsed {
  @apply w-[60px];
}

.bhyva-sidebar--expanded {
  @apply w-auto;
}

/* Column 1: main nav */
.bhyva-sidebar__main {
  @apply flex flex-col shrink-0 overflow-hidden py-3 px-2 bg-white border border-solid border-gray-200 transition-[width] duration-300 ease-out;
}

.bhyva-sidebar__main--closed {
  @apply w-[60px];
}

.bhyva-sidebar__main--open {
  @apply w-[288px];
}

.bhyva-sidebar__header {
  @apply flex items-center shrink-0 border-b border-white/20;
}

.bhyva-sidebar__header-btn {
  @apply relative flex items-center justify-center shrink-0 w-10 h-10 rounded-full border-none cursor-pointer;
  @apply bg-slate-800 text-white transition-opacity;
}
.bhyva-sidebar__header-btn:hover {
  @apply opacity-90;
}

.bhyva-sidebar__header-link {
  @apply ml-3 font-bold text-xl whitespace-nowrap overflow-hidden text-ellipsis;
  @apply text-slate-800 no-underline;
}
.bhyva-sidebar__header-link:hover {
  @apply opacity-90;
}

.bhyva-sidebar__nav {
  @apply flex-1 overflow-y-auto py-2 flex flex-col gap-0.5;
}

.bhyva-sidebar__row {
  @apply flex items-center w-full gap-2 min-h-[50px] text-left no-underline border-none bg-transparent cursor-pointer;
  @apply transition-colors;
}
.bhyva-sidebar__row:hover {
  @apply bg-gradient-to-r from-gray-100 to-white;
}
a.bhyva-sidebar__row {
  @apply text-inherit;
}

.bhyva-sidebar__row--active {
  @apply bg-gradient-to-r from-gray-100 to-white text-blue-600;
}

.bhyva-sidebar__icon {
  @apply shrink-0 w-10 h-10 flex items-center justify-center rounded overflow-hidden;
}

.bhyva-sidebar__icon img {
  @apply w-auto h-5 object-cover;
}

.bhyva-sidebar__icon-letter {
  @apply text-xl font-semibold text-slate-800;
}

.bhyva-sidebar__icon-inline {
  @apply inline-block;
}

.bhyva-sidebar__row-label {
  @apply flex-1 whitespace-nowrap overflow-hidden text-ellipsis text-lg font-medium;
}

.bhyva-sidebar__row-tooltip {
  @apply pointer-events-none fixed ml-10 whitespace-nowrap rounded px-2 py-1 text-sm text-white shadow;
  @apply bg-slate-800 opacity-0 transition-opacity;
}
.bhyva-sidebar__row:hover .bhyva-sidebar__row-tooltip,
.bhyva-sidebar__row:focus-within .bhyva-sidebar__row-tooltip {
  @apply opacity-100;
}

.bhyva-sidebar__row-chevron {
  @apply shrink-0 text-slate-700/90;
}

/* Wrapper for all dynamic sub columns (one .bhyva-sidebar__sub per path level) */
.bhyva-sidebar__sub-wrap {
  @apply flex flex-row flex-shrink-0 overflow-hidden;
}

/* One sub column per parent in path */
.bhyva-sidebar__sub {
  @apply flex flex-col w-64 min-w-64 flex-shrink-0 overflow-hidden pt-[53px] bg-white border border-solid border-gray-200 border-l-0;
}

.bhyva-sidebar__sub-panel {
  @apply flex flex-col w-full min-h-0 bg-white shrink-0;
}

.bhyva-sidebar__sub-inner {
  @apply flex-1 overflow-y-auto py-2;
}

.bhyva-sidebar__sub-row {
  @apply flex items-center w-full gap-2 py-2.5 px-4 min-h-[50px] text-left no-underline border-none bg-transparent cursor-pointer;
  @apply text-gray-800 text-lg font-medium transition-colors;
}
.bhyva-sidebar__sub-row:hover {
  @apply bg-gradient-to-r from-gray-100 to-white;
}
a.bhyva-sidebar__sub-row {
  @apply text-inherit;
}

.bhyva-sidebar__sub-row--active {
  @apply bg-gradient-to-r from-gray-100 to-white text-blue-600;
}

.bhyva-sidebar__sub-row span:first-child {
  @apply flex-1 whitespace-nowrap overflow-hidden text-ellipsis;
}

.bhyva-sidebar__sub-row-chevron {
  @apply shrink-0 flex items-center text-gray-600;
}