src/assets/css/app.css
/* 应用容器样式 - 使用DaisyUI的工具类 */
.app-container {
  @apply flex flex-col h-screen w-full bg-base-200 text-base-content transition-colors duration-300 overflow-hidden;
}

/* 内容区域 - 使用变量来更灵活地控制侧边栏与内容的关系 */
.content-area {
  @apply flex-1 overflow-y-auto relative transition-all duration-300 ease-in-out h-screen z-10;
  width: var(--content-width, calc(100% - 64px));
  margin-left: var(--sidebar-width, 64px);
}

/* 当侧边栏展开时 */
.content-area.sidebar-expanded {
  width: var(--content-width, calc(100% - 220px));
  margin-left: var(--sidebar-width, 220px);
}

/* 页面切换动画容器 - 垂直滑动支持 */
.page-transition-enter-active,
.page-transition-leave-active {
  @apply transition-all duration-500 ease-in-out;
}

/* 垂直滑动页面切换动画 */
.slide-down-enter-active,
.slide-down-leave-active,
.slide-up-enter-active,
.slide-up-leave-active {
  @apply transition-all duration-500 ease-in-out;
}

/* 向前导航 - 页面向下滑动 */
.slide-down-enter-from {
  @apply opacity-0;
  transform: translateY(-100%);
}

.slide-down-leave-to {
  @apply opacity-0;
  transform: translateY(100%);
}

/* 向后导航 - 页面向上滑动 */
.slide-up-enter-from {
  @apply opacity-0;
  transform: translateY(100%);
}

.slide-up-leave-to {
  @apply opacity-0;
  transform: translateY(-100%);
}

/* 响应式设计 - 移动设备上固定侧边栏宽度 */
@media (max-width: 768px) {
  .content-area,
  .content-area.sidebar-expanded {
    width: calc(100% - 64px);
    margin-left: 64px;
  }

  /* 添加额外的移动设备优化 */
  .app-container {
    @apply overflow-x-hidden;
  }
}

/* 新增: Iconify图标支持 */
.iconify {
  @apply inline-flex align-middle;
}

.icon-btn {
  @apply btn btn-ghost btn-circle;
}

.icon-btn-sm {
  @apply btn btn-ghost btn-sm btn-circle;
}

/* 新增: 为移动设备添加更好的抽屉支持 */
@media (max-width: 768px) {
  .drawer-content {
    @apply transition-all duration-300 ease-in-out;
  }

  .drawer-side {
    @apply z-30;
  }
}

/* 确保主题切换瞬间完成 - 禁用所有过渡 */
:root {
  --transition-theme: none;
}

[data-theme] {
  transition: none !important;
}

/* 后端离线警告栏样式 */
.backend-offline-warning {
  @apply fixed top-0 left-0 right-0 z-50 p-4;
}

.backend-offline-warning .alert {
  @apply relative;
}

.backend-offline-warning .btn {
  @apply ml-4 text-xs;
}

.backend-offline-warning .btn.loading {
  @apply opacity-70 cursor-not-allowed;
}

/* 确保警告栏在所有内容之上但在模态框之下 */
.backend-offline-warning {
  z-index: 40;
}
