/* static/css/input.css */
@import "tailwindcss";

/* =================================================================== */
/*       [核心] 定义 shadcn/ui 的设计系统变量                          */
/* =================================================================== */
@layer base {
  /* 亮色模式 */
  :root {
    --background: theme(colors.white);
    --foreground: theme(colors.zinc.900);
    
    --muted: theme(colors.zinc.100);
    --muted-foreground: theme(colors.zinc.500);
    
    --primary: theme(colors.blue.600);
    --primary-foreground: theme(colors.white);
    
    --secondary: theme(colors.zinc.200);
    --secondary-foreground: theme(colors.zinc.900);
    
    --destructive: theme(colors.red.600);
    --destructive-foreground: theme(colors.white);
    --accent: theme(colors.zinc.100);
    --accent-foreground: theme(colors.zinc.900);
    
    --border: theme(colors.zinc.300); /* 统一使用 zinc 以保持一致性 */
    --input: theme(colors.zinc.300);
    --ring: theme(colors.blue.500);
    --radius: 0.5rem;
  }
 
  /* 暗色模式 */
  .dark {
    --background: theme(colors.zinc.900); 
    --foreground: theme(colors.zinc.100);
    
    --muted: theme(colors.zinc.900 / 0.5); 
    --muted-foreground: theme(colors.zinc.400);
    
    --primary: theme(colors.blue.600); /* 亮色和暗色模式下的主色通常保持一致 */
    --primary-foreground: theme(colors.white);
    
    --secondary: theme(colors.zinc.900);
    --secondary-foreground: theme(colors.zinc.100);
    
    --destructive: theme(colors.red.700); /* 暗色模式下可以稍暗一些以保持对比度 */
    --destructive-foreground: theme(colors.white);
    
    --accent: theme(colors.zinc.700 / 0.6); /* 示例: dark:border-zinc-700/60 */
    --accent-foreground: theme(colors.zinc.100);
    --border: theme(colors.zinc.900);
    --input: theme(colors.zinc.700);
    --ring: theme(colors.blue.500);
  }
}

/* =================================================================== */
/*       [核心] shadcn/ui 组件层定义                                     */
/* =================================================================== */
@layer components {
  /* --- 按钮 (Button) --- */
  .btn {
     @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors 
           focus-visible:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[(var(--ring))]
           disabled:pointer-events-none disabled:opacity-50;
  }
  .btn-primary {
    @apply bg-primary text-primary-foreground hover:bg-primary/90;
  }
  .btn-secondary {
    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
  }
  .btn-destructive {
    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
  }
  .btn-outline {
    @apply border border-input bg-background hover:bg-accent hover:text-accent-foreground;
  }
  .btn-ghost {
    @apply hover:bg-accent hover:text-accent-foreground;
  }
  .btn-link {
    @apply text-primary underline-offset-4 hover:underline;
  }
  
  /* 按钮尺寸变体 */
  .btn-lg { @apply h-11 rounded-md px-8; }
  .btn-md { @apply h-10 px-4 py-2; }
  .btn-sm { @apply h-9 rounded-md px-3; }
  .btn-icon { @apply h-10 w-10; }
  /* --- 输入框 (Input) --- */
  .input {
    @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm 
           file:border-0 file:bg-transparent file:text-sm file:font-medium 
           placeholder:text-muted-foreground 
           focus-visible:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[(var(--ring))]
           disabled:cursor-not-allowed disabled:opacity-50;
  }
}

@custom-variant dark (&:where(.dark, .dark *));

/* =================================================================== */
/*       [核心] 主题定义层 (Theming Layer for Tailwind JIT)             */
/* =================================================================== */
@theme {
    /* 颜色: --color-KEY 会自动生成 bg-KEY, text-KEY, border-KEY 等 */
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    /* 圆角: --radius-KEY 会生成 rounded-KEY */
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    /* 动画 Keyframes */
    @keyframes toast-in { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } }
    @keyframes panel-in { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes panel-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-10px) scale(0.95); } }
    /* 动画工具类: --animation-KEY 生成 animate-KEY */
    --animation-toast-in: toast-in 0.4s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
    --animation-toast-out: toast-out 0.3s ease-out forwards;
    --animation-panel-in: panel-in 0.2s ease-out;
    --animation-panel-out: panel-out 0.2s ease-out forwards;
}
 
/* v4引擎已经为你生成了 animate-panel-in 等类，所以@apply可以找到它们 */

/* -------------------------*/
/* ------ base.html ------- */
/* ------------------------ */

/* [最终悬浮版] 细线轨道 + 宽滑块 */
.main-content-scroll::-webkit-scrollbar {
    width: 16px; /* 为轨道和滑块的交互留出足够的空间 */
}
/* [核心] 使用渐变“画”出一条1px的细线作为轨道 */
.main-content-scroll::-webkit-scrollbar-track {
    background: transparent; /* 轨道区域完全透明 */
    background-image: linear-gradient(
        to right,
        transparent 7px, /* 7px 的透明空间 */
        rgba(108, 108, 108, 0.1) 7px,   /* 线的开始 */
        rgba(100, 100, 100, 0.1) 8px,   /* 线的结束 (1px宽) */
        transparent 8px    /* 剩余的透明空间 */
    );
}
.dark .main-content-scroll::-webkit-scrollbar-track {
    background-image: linear-gradient(
        to right,
        transparent 7px,
        rgba(0, 0, 0, 0.2) 7px, /* 暗色模式的细线 */
        rgba(0, 0, 0, 0.2) 8px,
        transparent 8px
    );
}
/* 滑块比轨道线更宽，并带有光晕效果 */
.main-content-scroll::-webkit-scrollbar-thumb {
    height: 50px; /* 给滑块一个最小高度 */
    background-color: rgb(222, 222, 222); /* 浅色模式 slate-500 @ 40% */
    border-radius: 9999px;
    
    /* [核心] 使用透明边框让滑块宽度只有 8px (16px - 4px*2) */
    border: 5px solid transparent; 
    lg:border: 4px solid transparent; 
    background-clip: content-box;
    /* 光晕效果 */
    box-shadow: inset 0 0 0 1px rgba(150, 150, 150, 0.1);
    transition: all 0.2s ease-in-out;
}
.dark .main-content-scroll::-webkit-scrollbar-thumb {
    background-color: #181818; /* 暗色模式 zinc-900 */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
/* 悬停时，滑块“变实”，颜色加深 */
.main-content-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgb(202, 202, 202);
    border-width: 4px; /* [核心交互] 透明边框消失，滑块宽度变为完整的16px，产生吸附放大的效果 */
}
.dark .main-content-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #151515; 
}

.shadow-main { box-shadow: 0 0 25px rgba(0, 0, 0, 0.08); }


@layer components {
  /* 1. 父容器:  group 统一写入html */
  .nav-item-wrapper {
    @apply relative mx-4; /* 原始 margin: 0 1rem; -> mx-4 */
  }
  /* 2. 链接本身 */
  .nav-link {
    @apply flex items-baseline p-3 rounded-l-lg text-[#f4f4f5] justify-center lg:justify-start;
    @apply transition-colors duration-200 ease-in-out;
    /* 悬停状态 */
    @apply group-hover:bg-[rgba(63,63,70,0.8)] dark:group-hover:bg-white/10;
  }
  /* 3. 图标 */
  .nav-icon {
    @apply w-[1.2rem] text-center;
    @apply transition-all duration-300 ease-in-out;
    /* 悬停和激活状态 */
    @apply group-hover:text-[#60a5fa] group-hover:[filter:drop-shadow(0_0_5px_rgba(59,130,246,0.5))];
    @apply group-data-[active='true']:text-[#60a5fa] group-data-[active='true']:[filter:drop-shadow(0_0_5px_rgba(59,130,246,0.7))];
  }
  /* 4. 指示器 */
  .nav-indicator {
    @apply absolute -left-4 top-0 h-full w-1 bg-[#f4f4f5] rounded-r-full pointer-events-none;
    @apply opacity-0 transition-opacity duration-300 ease-in-out;
    /* 激活状态 */
    @apply group-data-[active='true']:opacity-100;
  }
  /* 5. 像素装饰文本 */
  .pixel-decoration {
    @apply font-['Pixelify_Sans'] text-[0.6rem] text-[#3ac06b] ml-2 relative top-px tracking-[0.5px];
    @apply opacity-0 [text-shadow:0_0_5px_rgba(74,222,128,0.5)];
    @apply transition-opacity duration-200 ease-in-out;
    /* 悬停状态 */
    @apply group-data-[active='true']:opacity-100 group-hover:opacity-100;
  }


/* =================================================================== */
/*    [融合版] 全局异步任务中心样式                                     */
/* =================================================================== */

/* --- 组件 A: Toast 通知样式 (保持不变) --- */
.toast-item {
    @apply flex items-start p-3 w-full rounded-lg shadow-lg ring-1 ring-black/5 dark:ring-white/10 bg-white/80 dark:bg-zinc-800/80 backdrop-blur-md pointer-events-auto;
}
.toast-icon {
    @apply flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-white mr-3;
}
.toast-icon-loading {@apply bg-blue-500;}
.toast-icon-success {@apply bg-green-500;}
.toast-icon-error   {@apply bg-red-500;}
.toast-content {
    @apply flex-grow;
}
.toast-title {
    @apply font-semibold text-sm text-zinc-800 dark:text-zinc-100;
}
.toast-message {
    @apply text-xs text-zinc-600 dark:text-zinc-400 mt-0.5;
}
.toast-close-btn {
    @apply ml-4 text-zinc-400 hover:text-zinc-800 dark:hover:text-white transition-colors;
}

/* --- [升级] 组件 B: 多阶段任务项样式 --- */

/* 1. 任务项主容器: 移除了 flex 布局，采用块级布局容纳复杂内容 */
.task-list-item {
    @apply flex justify-between items-start px-3 py-2 rounded-lg transition-colors duration-200 overflow-hidden border;
    @apply hover:bg-black/5 dark:hover:bg-white/5;
    @apply border-transparent dark:border-transparent;
    @apply bg-zinc-50 dark:bg-zinc-800/50;
}

/* --- 任务项主内容区 (左栏) --- */
.task-item-main {
    @apply flex items-center justify-between flex-grow gap-1; /* flex-grow 使其占据所有可用空间 */
}
/* 2. 任务项头部: 包含标题和时间戳 */
.task-item-header {
    @apply flex justify-between items-center mb-2;
}
.task-item-title {
    /* 融合了您原有的字体样式 */
    @apply font-medium text-sm text-zinc-700 dark:text-zinc-200;
}
.task-item-timestamp {
    /* 融合了您原有的字体样式 */
    @apply text-xs self-start pt-1.5 pl-2 text-zinc-400 dark:text-zinc-500 flex-shrink-0;
}

/* 3. [新增] 阶段动画的核心容器 */
.task-stages-container {
    @apply flex flex-col gap-1.5 overflow-hidden;
}

/* 4. [新增] 单个阶段的样式 */
.task-stage {
    @apply flex items-center gap-2 p-1.5 rounded-md transition-all duration-300 ease-in-out relative;
}
.task-stage-icon {
    @apply w-4 h-4 relative flex-shrink-0 text-zinc-400;
}
.task-stage-icon i {
    @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity duration-200;
}
.task-stage-content {
    @apply flex-grow flex justify-between items-baseline text-xs;
}
.task-stage-name {
    @apply text-zinc-600 dark:text-zinc-400;
}
.task-stage-progress-text {
    @apply font-mono text-zinc-500 dark:text-zinc-500;
}
.task-stage-progress-bg {
    @apply absolute bottom-0 left-0 right-0 h-0.5 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden;
}
.task-stage-progress-bar {
    @apply h-full w-0 rounded-full;
}

/* 5. [新增] 各阶段的状态视觉 */
/* Pending: 待处理 */
.task-stage.stage-pending { @apply opacity-40; }
.task-stage.stage-pending .fa-circle { @apply opacity-100; }

/* Active: 当前活动 */
.task-stage.stage-active {
    @apply opacity-100 bg-blue-500/10;
}
.task-stage.stage-active .fa-spinner { @apply opacity-100 text-blue-500; }
.task-stage.stage-active .task-stage-name { @apply font-semibold text-zinc-800 dark:text-zinc-100; }
.task-stage.stage-active .task-stage-progress-bar { @apply bg-blue-500; }

/* Completed: 已完成 */
.task-stage.stage-completed { @apply opacity-60; }
.task-stage.stage-completed .fa-check { @apply opacity-100 text-green-500; }
.task-stage.stage-completed .task-stage-name { @apply line-through text-zinc-500 dark:text-zinc-500; }
.task-stage.stage-completed .task-stage-progress-bar { @apply bg-green-500; }

/* Error / Skipped: 错误或跳过 */
.task-stage.stage-error, .task-stage.stage-skipped { @apply opacity-50 bg-red-500/5; }
.task-stage.stage-error .fa-times, .task-stage.stage-skipped .fa-times { @apply opacity-100 text-red-500; }
.task-stage.stage-error .task-stage-name, .task-stage.stage-skipped .task-stage-name { @apply line-through; }

/* 6. [新增] 任务最终状态的容器 */
.task-final-status {
    @apply overflow-hidden text-sm;
}
.task-final-status i {
    @apply text-lg;
}

/* =================================================================== */
/*    任务中心智能摘要卡片样式 (Tailwind @apply 统一版)                  */
/* =================================================================== */
/* --- 1. 摘要行的行内图标 --- */
.task-item-icon-summary {
    @apply text-lg mr-3; /* text-lg=18px, mr-3=12px, mt-px=1px */
}
/* --- 2. 可折叠内容区 --- */
.task-details-content {
    @apply transition-all duration-300 ease-in-out overflow-hidden;
}
.task-details-content.collapsed {
    @apply max-h-0 opacity-0 mt-0 pt-0 pb-0 border-t-0;
}
/* --- 3. 折叠区内的详情列表 --- */
/* 注意: space-y-1 现在被移到HTML中，由父元素直接控制，更符合Tailwind用法 */
.task-details-body {
    @apply pt-2 mt-2 border-t border-black/5 text-xs text-zinc-600;
    @apply dark:border-white/[.07] dark:text-zinc-400;
}
/* --- 4. 折叠/展开的雪佛兰图标 --- */
.task-toggle-icon {
    @apply transition-transform duration-300 ease-in-out text-zinc-400 flex-shrink-0 ml-2;
}
/* --- 5. 展开状态下的图标旋转 --- */
/* 
   使用 .expanded 类来控制旋转。
   这个 .expanded 类由我们的JS代码在点击时添加到 [data-task-toggle] 元素上。
*/
[data-task-toggle].expanded .task-toggle-icon {
    @apply rotate-180;
}

  /* -------------------------*/
  /* ------ dashboard ------- */
  /* ------------------------ */

/* [核心] dashboard tab 组件重构 */

  /* 基础的标签项样式 (现在背景透明) */
  .tab-item {
    /* [核心变化] 移除背景，添加 z-index 使其位于指示器之上 */
    @apply relative z-10 inline-flex items-center justify-center whitespace-nowrap rounded-md px-2 sm:px-5 py-1.5 text-sm font-medium transition-colors duration-200;
    
    /* 默认/非激活状态的文字颜色 */
    @apply text-zinc-200 dark:text-zinc-400;
    
    /* 悬停时的文字颜色 */
    @apply hover:text-zinc-900 hover:font-medium dark:hover:text-zinc-200 dark:hover:font-medium;
    
    /* 焦点样式 (无需改动) */
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500;
  }
  
  /* 激活状态的标签 (只改变文字颜色) */
  .tab-active {
    /* [核心变化] 激活状态只改变文字颜色，使其在白色指示器上可见 */
    @apply text-zinc-900 dark:text-zinc-50;
  }


  /* 自定义下拉选项的样式 */
  .custom-select-option {
    @apply cursor-pointer select-none rounded-md px-3 py-1.5 text-sm text-zinc-800 dark:text-zinc-200;
    @apply transition-colors duration-150;
  }
  
  /* 选项的悬停和高亮状态 */
  .custom-select-option:hover, .custom-select-option.is-highlighted {
    @apply bg-zinc-200 dark:bg-zinc-700 outline-none;
  }
  /* 定义下拉菜单面板的基础样式 */
  .dropdown-panel {
    @apply absolute right-0 z-10 mt-1 w-32 rounded-md border border-zinc-200 bg-white shadow-lg dark:border-zinc-600 dark:bg-zinc-700;
  }
  /* 定义菜单项（按钮）的基础样式 */
  .menu-item {
    @apply w-full text-left flex items-center gap-x-3 px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-600 transition-colors;
  }
  /* 可选：为危险操作（如删除）创建一个变体 */
  .menu-item-danger {
    @apply text-red-600;
  }
  .menu-item-icon-neutral {
    @apply text-blue-500;
  }
  /* 定义菜单项内部图标的样式 */
  .menu-item-icon {
    @apply w-4;
  }
  /* 定义菜单中的分隔线 */
  .menu-divider {
    @apply my-1 h-px bg-zinc-200 dark:bg-zinc-700;
  }

  /*
   * ds-stats-card (Dashboard Statistics Card)
   * 定义了仪表盘页面顶部核心指标卡片的统一外观。
   * 包含了内边距、圆角、边框、背景色、阴影以及深色模式下的样式。
    */
  .ds-stats-card {
  @apply p-6 rounded-2xl border border-zinc-400 shadow-sm dark:bg-zinc-900/50 dark:border-zinc-800;
  }

  /* -------------------------*/
  /* ------ keygroups ------- */
  /* ------------------------ */
  /**
  * 1. 【新增】Group 卡片的通用基础样式
  *    抽离了 active 和 inactive 状态共享的所有样式。
  *    注意：它不会替换 .group-card-active/inactive，而是与之共存。
  */
  .group-card {
    @apply cursor-pointer rounded-lg p-3 transition-all duration-200 h-16 flex flex-col justify-center;
  }
  /**
  * 2. 【新增】移动端首屏的 "当前分组" 选择器样式
  */
  .mobile-group-selector {
    @apply flex-grow flex items-center justify-between p-3 border border-zinc-200 dark:border-zinc-700 rounded-lg;
  }
  /* 移动端群组下拉列表样式 */
  .mobile-group-menu-active {
  /* --- Positioning & Layering --- */
  @apply absolute z-20 top-full left-0 right-0;
  /* --- Appearance --- */
  @apply bg-white dark:bg-zinc-800 shadow-lg rounded-b-lg border border-t-0 border-zinc-200 dark:border-zinc-700;
  /* --- Spacing & Content Flow --- */
  @apply p-4;

  max-height: 14rem;
  @apply overflow-y-auto;
}
  /**
  * 3. 【新增】卡片/选择器中的次要描述文本样式
  */
  .card-sub-text {
    @apply text-xs text-zinc-500 dark:text-zinc-400 truncate;
  }
  /**
  * 4. 【新增】桌面端 “添加分组” 按钮的特定样式
  */
    .add-group-btn-desktop {
      /**
       * [核心修正]
       * 1. 新增 p-1: 增加一个4px的内边距，为背景裁剪创造空间。
       * 2. 新增 bg-clip-content: 让背景只在内容区（内边距内部）绘制。
       */
      @apply w-full h-16 border-zinc-300 dark:border-zinc-600 text-zinc-400 dark:text-zinc-500 
             hover:border-blue-500 hover:text-blue-500 
             p-1 bg-clip-content;
      --stripe-color: theme('colors.zinc.200');
      .dark & {
          --stripe-color: theme('colors.zinc.700');
      }

      /**
       * [核心修正] 
       * 1. 角度改为 -45deg 实现镜像。
       * 2. 宽度和间距从 15px/30px 减半为 7.5px/15px。
       */
      background-image: repeating-linear-gradient(
          -45deg,
          var(--stripe-color),
          var(--stripe-color) 6px,
          transparent 6px,
          transparent 12px
      );
  }
  /**
  * 5. 【新增】移动端 “添加分组” 按钮的特定样式
  */
  .add-group-btn-mobile {
      @apply w-15 h-15 border-blue-500/50 text-blue-500;
  }
  /**
  * 6. 【新增】健康指示器的外环样式
  */
  .health-indicator-ring {
    @apply w-5 h-5 flex items-center justify-center rounded-full shrink-0;
  }
  /**
  * 7. 【新增】健康指示器的核心圆点样式
  */
  .health-indicator-dot {
    @apply w-2 h-2 rounded-full;
  }
  /* 
  * 8.  JS依赖
  */
  .group-card-active {
      @apply cursor-pointer rounded-lg p-3 mr-3 bg-blue-500/10 border border-blue-500/30 text-zinc-800 dark:text-zinc-200 transition-all duration-200;
  }
  .group-card-inactive {
      @apply cursor-pointer rounded-lg p-3 mr-3 bg-white dark:bg-zinc-800/50 border border-zinc-200 dark:border-zinc-700/60 text-zinc-800 dark:text-zinc-200 hover:border-blue-500/50 hover:bg-blue-500/5;
      transition-property: background-color, border-color, transform;
      transition-duration: 200ms;
  }

  /* ==========================================================================
   Modal Component Styles (单功能模态框组件)
   ========================================================================== */
  /**
  * 1. 模态框遮罩层 (Modal Overlay)
  *    覆盖整个屏幕的半透明背景。
  */
  .modal-overlay {
    @apply fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm;
  }
  /* ... (modal-panel, header, title, close-btn, body, label, footer 保持不变) ... */
   .modal-panel {
    @apply w-full max-w-2xl rounded-lg bg-white p-8 shadow-2xl dark:bg-zinc-800/90 border dark:border-zinc-700 flex flex-col;
  }
  .modal-header {
    @apply flex items-center justify-between pb-4 border-b dark:border-zinc-700;
  }
  .modal-title {
    @apply text-xl font-semibold;
  }
  .modal-close-btn {
    @apply text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 transition-colors;
  }
  .modal-body {
    @apply mt-6 p-1 pr-4 -mr-4;
  }
  .modal-label {
    @apply text-sm font-medium text-zinc-700 dark:text-zinc-300;
  }
  .modal-footer {
    @apply mt-2 flex justify-end gap-x-3 pt-3;
  }
  /**
   * [修正] 将所有按钮的样式定义分离，避免 @apply 嵌套自定义类。
   * HTML中将同时使用 .modal-btn 和 .modal-btn-primary/secondary/danger。
   */
  /* 9. 模态框按钮基础样式 (Modal Button Base) */
  .modal-btn {
    @apply rounded-md px-4 py-2 text-sm font-medium transition-colors;
  }
  
  /* 10. 主要操作按钮 (如: 导入, 保存) */
  .modal-btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
  }
  
  /* 11. 次要/取消按钮 */
  .modal-btn-secondary {
    @apply bg-zinc-200 text-zinc-700 hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600;
  }
  
  /* 12. 危险操作按钮 (如: 删除) */
  .modal-btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700;
  }

    /* Modal Inputs */
  .modal-input {
    /*@apply mt-1 block w-full rounded-md border border-zinc-300 bg-white p-2 min-h-[40px] focus:border-blue-500 focus:ring-blue-500 dark:bg-zinc-700 dark:border-zinc-600 sm:text-sm;*/
    @apply mt-1 block w-full px-3 py-2 text-xs bg-white dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-600 rounded-md placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-transparent transition duration-150 ease-in-out;
  }
  /* 
 * 修正：确保textarea也使用相同的字体大小和行高
 * Tailwind forms 插件有时会覆盖这些，所以我们明确指定
 */
  textarea.modal-input {
    @apply text-sm leading-6;
  }
  /* Tag Input Component */
  .tag-input-container {

    @apply flex flex-wrap items-center gap-2 mt-1 w-full rounded-md  bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 p-2 min-h-[40px] focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500;
  }
  .tag-item {
    @apply flex items-center gap-x-1.5 bg-blue-100 dark:bg-blue-500/20 text-blue-800 dark:text-blue-200 text-sm font-medium rounded-full px-2.5 py-0.5;
  }
  .tag-delete {
    @apply text-blue-500 dark:text-blue-300 hover:text-blue-700 dark:hover:text-blue-100 font-bold;
  }
  .tag-input-new {
    /* 使其在容器内垂直居中，感觉更好 */
    @apply flex-grow bg-transparent focus:outline-none text-sm self-center;
  }

    /* 为复制按钮提供基础样式 */
  .tag-copy-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1.0rem; /* 调整图标大小 */
      padding: 0 8px;
      opacity: 0.6;
      transition: opacity 0.2s, transform 0.2s;
  }
  .tag-copy-btn:hover {
      opacity: 1;
      transform: scale(1.1);
  }
  /* 复制成功后的状态 */
  .tag-copy-btn.copied span {
      color: #4CAF50; /* 绿色，表示成功 */
      font-size: 0.8rem; /* 可以让提示文字小一点 */
      font-weight: bold;
  }
    /* 复制成功后的状态 */
  .tag-copy-btn.none span {
      color: #3766c3; /* 绿色，表示成功 */
      font-size: 0.8rem; /* 可以让提示文字小一点 */
      font-weight: bold;
  }

  /* Advanced Request Settings Modal Specifics */
  details summary::-webkit-details-marker {
    display: none;
  }
  details > summary {
    list-style: none;
  }
  details > summary .fa-chevron-down {
    transition: transform 0.2s ease-in-out;
  }
  details[open] > summary .fa-chevron-down {
    transform: rotate(180deg);
  }

  .dynamic-kv-item {
    @apply flex items-center gap-x-2;
  }
  .dynamic-kv-key {
    @apply w-full px-3 py-2 bg-zinc-100 dark:bg-zinc-700/50 border border-zinc-300 dark:border-zinc-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-transparent transition duration-150 ease-in-out font-mono text-xs;
  }
  .dynamic-kv-value {
    @apply w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-transparent transition duration-150 ease-in-out font-mono text-xs;
  }
}

@layer components {
  /* Toggle Switch Component */
  .toggle-checkbox:checked {
    @apply right-0 border-blue-600;
    right: 0;
  }
  .toggle-checkbox:checked + .toggle-label {
    @apply bg-blue-600;
  }

  /* Tooltip Component */
  .tooltip-icon {
    @apply relative inline-flex items-center justify-center ml-2 text-zinc-400 cursor-pointer;
  }
  /* .tooltip-text is now dynamically generated by JS */
  .global-tooltip {
    @apply fixed z-[9999] w-max max-w-xs whitespace-normal rounded-lg bg-zinc-800 px-3 py-2 text-sm font-medium text-white shadow-lg transition-opacity duration-200;
  }
}

@layer components {
  /* SortableJS Drag Styles */
  .sortable-ghost {
    @apply opacity-40 bg-blue-200 dark:bg-blue-900/50;
  }
  .sortable-drag {
    @apply shadow-lg scale-105 cursor-grabbing;
  }

  /* Fallback class for when forceFallback is true */
  .sortable-fallback {
    @apply shadow-lg scale-105 cursor-grabbing;
  }
}

/* =================================================================== */
/*       自定义 SweetAlert2 样式 (Custom SweetAlert2 Styles)         */
/* =================================================================== */
.swal2-popup.swal2-custom-style {
    @apply  bg-zinc-300 dark:bg-zinc-800 text-sm; /* 为整个弹窗设置基础字体大小 */
}
.swal2-popup.swal2-custom-style .swal2-title {
    @apply text-xl font-semibold text-zinc-800 dark:text-zinc-100; /* 应用标题样式 */
}
.swal2-popup.swal2-custom-style .swal2-html-container {
    @apply text-sm text-zinc-600 dark:text-zinc-300; /* 应用正文样式 */
}
.swal2-popup.swal2-custom-style .swal2-confirm-button,
.swal2-popup.swal2-custom-style .swal2-cancel-button {
    @apply text-sm font-medium px-4 py-2 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2; /* 应用按钮样式 */
    @apply focus:ring-offset-white dark:focus:ring-offset-zinc-800;
}
.swal2-popup.swal2-custom-style .swal2-confirm-button {
     @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}
.swal2-popup.swal2-custom-style .swal2-cancel-button {
    @apply bg-transparent text-zinc-700 dark:text-zinc-200 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700 focus:ring-zinc-500;
}
/* 覆盖图标大小 */
.swal2-popup.swal2-custom-style .swal2-icon {
    @apply w-8 h-8 my-2;
}
.swal2-popup.swal2-custom-style .swal2-icon .swal2-icon-content {
    @apply text-4xl;
}