/**
 * 全局布局样式
 * 定义应用的主要布局结构
 */

/**
 * 侧边栏基础样式
 */
.sidebar {
  @apply w-[280px] h-screen bg-white border-r border-gray-100 flex flex-col 
         transition-all duration-300 fixed left-0 top-0 z-[100] overflow-y-auto
         shadow-[0_0_15px_rgba(0,0,0,0.05)];
}

.sidebar.collapsed {
  @apply w-20;
}

/* 侧边栏头部 */
.sidebar-header {
  @apply h-16 border-b border-gray-100 flex items-center justify-between px-5;
}

.sidebar-logo {
  @apply flex items-center space-x-2;
}

.sidebar-logo-img {
  @apply h-8 w-auto;
}

.sidebar-logo-text {
  @apply font-medium text-lg text-gray-900 transition-opacity duration-200;
}

.sidebar.collapsed .sidebar-logo-text {
  @apply opacity-0 invisible;
}

.sidebar-toggle {
  @apply bg-transparent border-none text-xl text-gray-500 cursor-pointer p-1 
         rounded transition-all duration-200;
}

.sidebar-toggle:hover {
  @apply bg-gray-100;
}

/* 用户资料 */
.sidebar-user {
  @apply flex items-center px-5 py-3 border-b border-gray-100;
}

.sidebar-user-avatar {
  @apply w-10 h-10 rounded-full overflow-hidden flex-shrink-0;
}

.sidebar-user-info {
  @apply ml-3 transition-opacity duration-200;
}

.sidebar.collapsed .sidebar-user-info {
  @apply opacity-0 invisible;
}

.sidebar-user-name {
  @apply text-sm font-medium text-gray-900;
}

.sidebar-user-role {
  @apply text-xs text-gray-500;
}

/* 导航菜单 */
.sidebar-menu {
  @apply flex-1 overflow-y-auto py-4 px-3;
}

.sidebar-menu-item {
  @apply flex items-center py-3 px-4 text-gray-800 no-underline rounded-md 
         cursor-pointer transition-all duration-200 mb-1;
}

.sidebar-menu-item i {
  @apply text-base w-6 text-center;
}

.sidebar-menu-icon {
  @apply text-xl opacity-80 w-5 flex-shrink-0;
}

.sidebar-menu-text {
  @apply ml-2.5 transition-opacity duration-200;
}

.sidebar.collapsed .sidebar-menu-text {
  @apply opacity-0 invisible;
}

.sidebar-menu-badge {
  @apply ml-auto bg-[#00684a] text-white text-xs font-semibold h-5 min-w-[20px] rounded-full
         flex items-center justify-center px-1 transition-opacity duration-200;
}

.sidebar.collapsed .sidebar-menu-badge {
  @apply opacity-0 invisible;
}

.sidebar-menu-item:hover {
  @apply bg-[rgba(0,104,74,0.05)];
}

.sidebar-menu-item.active {
  @apply bg-[rgba(0,104,74,0.1)] text-[#00684A] font-medium;
}

.sidebar-submenu {
  @apply pl-7 mt-1 space-y-1 transition-all duration-200 overflow-hidden;
}

.sidebar-submenu-item {
  @apply flex items-center px-3 py-2 rounded-md text-sm text-gray-500 
         hover:bg-gray-50 transition-colors duration-100;
}

.sidebar-submenu-item.active {
  @apply text-[#00684a];
}

/* 侧边栏底部 */
.sidebar-footer {
  @apply border-t border-gray-100 px-5 py-4;
}

/**
 * 主布局容器
 */
.layout-container {
  @apply flex min-h-screen bg-gray-50;
}

/**
 * 主内容区域
 */
.main-content {
  @apply flex-1 ml-[280px] transition-all duration-300 min-h-screen flex flex-col;
}

.main-content.sidebar-collapsed {
  @apply ml-20;
}

.content-container {
  @apply flex-1 p-5 overflow-auto;
}

/**
 * 面包屑导航
 */
.breadcrumb {
  @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-700 font-medium;
}

/**
 * 响应式调整
 */
@screen sm {
  .content-container {
    @apply p-6;
  }
}

@screen md {
  .sidebar-toggle {
    @apply block;
  }
}

/**
 * 暗色模式
 */
.dark .layout-container {
  @apply bg-gray-900;
}

.dark .content-container {
  @apply bg-gray-900 text-gray-200;
}