/**
 * 导航组件样式
 */

@layer components {
  /* 顶部导航栏 */
  .navbar {
    @apply bg-white border-b border-gray-200 h-16 fixed top-0 right-0 left-0 z-20 flex items-center px-5;
  }

  .navbar-container {
    @apply flex items-center justify-between w-full;
  }

  .navbar-brand {
    @apply flex items-center space-x-2;
  }

  .navbar-brand-logo {
    @apply h-8 w-auto;
  }

  .navbar-brand-text {
    @apply font-medium text-lg text-gray-900;
  }

  .navbar-menu {
    @apply flex items-center space-x-4;
  }

  .navbar-item {
    @apply relative px-3 py-2 text-sm text-gray-600 hover:text-[#00684a] transition-colors;
  }

  .navbar-item.active {
    @apply text-[#00684a] font-medium;
  }

  .navbar-item.active::after {
    content: '';
    @apply absolute bottom-0 left-0 w-full h-0.5 bg-[#00684a];
  }

  /* 标签页导航 */
  .tabs {
    @apply border-b border-gray-200;
  }

  .tabs-list {
    @apply flex -mb-px space-x-6;
  }

  .tab-item {
    @apply py-3 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 
           hover:text-gray-700 hover:border-gray-300 cursor-pointer;
  }

  .tab-item.active {
    @apply border-[#00684a] text-[#00684a];
  }

  /* 面包屑导航 */
  .breadcrumbs {
    @apply flex items-center text-sm text-gray-500 mb-4;
  }

  .breadcrumb-item {
    @apply flex items-center;
  }

  .breadcrumb-item:not(:last-child)::after {
    content: "/";
    @apply mx-2;
  }

  .breadcrumb-item:last-child {
    @apply text-gray-800 font-medium;
  }

  /* 步骤导航 */
  .steps {
    @apply flex justify-between items-center;
  }

  .step-item {
    @apply flex-1 relative;
  }

  .step-item:not(:last-child)::after {
    content: '';
    @apply absolute top-1/2 right-0 w-full h-0.5 bg-gray-200 -translate-y-1/2 z-0;
  }

  .step-item.active:not(:last-child)::after {
    @apply bg-[#00684a];
  }

  .step-item.completed:not(:last-child)::after {
    @apply bg-[#00684a];
  }

  .step-circle {
    @apply h-8 w-8 rounded-full bg-white border-2 border-gray-300 flex items-center justify-center 
           text-xs font-medium text-gray-500 relative z-10;
  }

  .step-item.active .step-circle {
    @apply border-[#00684a] text-[#00684a];
  }

  .step-item.completed .step-circle {
    @apply bg-[#00684a] border-[#00684a] text-white;
  }

  .step-label {
    @apply mt-2 text-xs font-medium text-gray-500 text-center;
  }

  .step-item.active .step-label {
    @apply text-[#00684a];
  }

  .step-item.completed .step-label {
    @apply text-[#00684a];
  }

  /* 下拉菜单 */
  .dropdown {
    @apply relative inline-block;
  }

  .dropdown-toggle {
    @apply cursor-pointer;
  }

  .dropdown-menu {
    @apply absolute right-0 z-10 w-48 mt-2 origin-top-right bg-white rounded-md shadow-lg 
           ring-1 ring-black ring-opacity-5 focus:outline-none py-1;
  }

  .dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left;
  }

  .dropdown-divider {
    @apply my-1 border-t border-gray-100;
  }
}