/* Album Menu Styles */
.album-menu {
  @apply bg-white rounded-lg shadow-sm p-4;
}

.album-menu-list {
  @apply space-y-1;
}

.album-menu-item {
  @apply relative;
}

.album-menu-item.current > a {
  @apply bg-blue-50 text-blue-700 font-semibold;
}

.album-menu-item.ancestor > a {
  @apply bg-gray-50;
}

.album-submenu {
  @apply ml-4 mt-1 space-y-1 border-l-2 border-gray-200 pl-3;
}

/* Menu System Styles */
.menu {
  @apply relative;
}

.menu-items {
  @apply list-none p-0 m-0;
}

.menu-item {
  @apply relative;
}

.menu-link,
.menu-label {
  @apply block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded transition-colors cursor-pointer;
}

.menu-link {
  @apply no-underline;
}

/* Vertical layout (default) */
.menu-vertical .menu-items {
  @apply flex flex-col;
}

.menu-vertical .menu-subitems {
  @apply ml-4 mt-1;
}

/* Horizontal layout */
.menu-horizontal > .menu-items {
  @apply flex flex-row space-x-2;
}

.menu-horizontal .menu-item-level-0 {
  @apply relative;
}

.menu-horizontal .menu-subitems {
  @apply absolute left-0 top-full mt-1 bg-white shadow-lg rounded-lg min-w-48 z-10 py-2;
}

.menu-horizontal .menu-item-level-1 .menu-link,
.menu-horizontal .menu-item-level-1 .menu-label {
  @apply whitespace-nowrap;
}

/* Dropdown behavior (hover) */
.menu-dropdown .menu-subitems {
  @apply hidden;
}

.menu-dropdown .menu-item-has-children:hover > .menu-subitems {
  @apply block;
}

/* Accordion behavior (click - requires JavaScript) */
.menu-accordion .menu-subitems {
  @apply hidden;
}

.menu-accordion .menu-item-has-children.is-open > .menu-subitems {
  @apply block;
}

/* Accordion arrow indicator */
.menu-accordion .menu-item-has-children > .menu-link::after,
.menu-accordion .menu-item-has-children > .menu-label::after {
  content: "▼";
  @apply ml-2 inline-block transition-transform text-xs;
}

.menu-accordion .menu-item-has-children.is-open > .menu-link::after,
.menu-accordion .menu-item-has-children.is-open > .menu-label::after {
  @apply rotate-180;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .menu-horizontal > .menu-items {
    @apply flex-col space-x-0 space-y-1;
  }
  
  .menu-horizontal .menu-subitems {
    @apply relative left-auto top-auto mt-1 ml-4 shadow-none;
  }
}