/* assets/style.css */

/* 1. 设置滚动条宽度 */
.hover-scroll::-webkit-scrollbar {
    width: 6px; /* 细条 */
    height: 6px;
}

/* 2. 轨道 (Track) - 永远透明 */
.hover-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* 3. 滑块 (Thumb) - 默认状态：透明 (看不见) */
.hover-scroll::-webkit-scrollbar-thumb {
    background-color: transparent; /* 关键！默认看不见 */
    border-radius: 10px;
}

/* 4. 鼠标悬停在容器上时 - 滑块变灰 (看见了) */
.hover-scroll:hover::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* 对应 Tailwind gray-300 */
}

/* 5. 兼容 Firefox (Firefox 不支持 webkit 前缀) */
.hover-scroll {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent; /* 默认透明 */
}
.hover-scroll:hover {
    scrollbar-color: #cbd5e1 transparent; /* 悬停变灰 */
}

.hover-scroll {
    overflow-y: auto; /* 或者是 overlay */
}

/* 1. 强制 Ant Picker 背景透明 */
/* 这样外层 div 的 bg-base-100 才能显现出来 */
.ant-picker {
    background-color: transparent !important;
}

/* 2. 强制输入框文字颜色跟随主题 */
/* inherit 会让它继承外层 div 的 text-base-content */
.ant-picker-input > input {
    color: inherit !important;
}

/* 3. 核心修复：Placeholder (占位符) 颜色 */
/* 必须单独设置，Ant Design 默认是灰黑色，暗黑模式下看不清 */
.ant-picker-input > input::placeholder {
    /* 使用 DaisyUI 的文字颜色变量 (--bc)，并设置 40% 不透明度 */
    /* 这样在亮色是浅灰，暗色是浅白 */
    color: color-mix(in oklab, currentcolor 60%, transparent) !important;
}

/* 4. 修复后缀图标 (日历图标) 颜色 */
.ant-picker-suffix {
    color: color-mix(in oklab, currentcolor 60%, transparent) !important;
}

/* 5. 修复清除图标 (那个小叉号) */
.ant-picker-clear {
    color: color-mix(in oklab, currentcolor 60%, transparent) !important;
    background: transparent !important;
}

/*  替换日期选择颜色 Placeholder */
:where(.css-mncuj7).ant-picker {
    color: color-mix(in oklab, currentcolor 60%, transparent) !important;
}
/*
:where(.css-mncuj7).ant-picker-dropdown .ant-picker-panel-container {
    background: color-mix(in oklab, currentcolor 60%, transparent) !important;
}

:where(.css-mncuj7).ant-picker-dropdown .ant-picker-cell-in-view {
color: color-mix(in oklab, currentcolor 10%, transparent);
    } */

/* toast 特效 */

/* assets/style.css */

/* 1. 进场动画：从上方 20px 处滑入并淡入 */
@keyframes toastSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 赋予单个提示框进场动画 */
.toast-enter {
    animation: toastSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 2. 退场动画类 (由 JS 触发)：向上飘散、缩小并消失 */
.toast-exit {
    opacity: 0 !important;
    transform: translateY(-20px) scale(0.95) !important;
    transition: all 0.3s cubic-bezier(0.5, 0, 0, 1) !important;
    pointer-events: none;
}

/* 针对所有 Dash 输入框的 Placeholder 优化 */
.dash-input-element::placeholder {
    /* 使用低不透明度，使其看起来像背景的一部分 */
    color: currentColor;
    opacity: 0.35;
    font-weight: 400;
    font-size: 0.875rem; /* 略小于正文，更有层次感 */
    transition: all 0.2s ease;
}

.dash-input-element::placeholder {
    color: hsl(var(--bc) / 0.4); /* 使用 DaisyUI 的 base-content 变量 */
    transition: opacity 0.2s ease;
}
/* 下拉框占位符优化 */
.dash-dropdown-placeholder {
    /* 使用柔和的灰色或 base-content 的低透明度 */
    color: hsl(var(--bc) / 0.4) !important;
    font-weight: 400 !important;
    font-size: 0.875rem;
    /* 避免占位符文字被选中 */
    user-select: none;
    transition: opacity 0.2s ease;
}

/* 当下拉框被激活/打开时，进一步弱化占位符 */
.dash-dropdown:focus-within .dash-dropdown-placeholder {
    opacity: 0.5;
}

/* 聚焦时完全隐藏，非常干净 */
.dash-input-element:focus::placeholder {
    opacity: 0;
}

/* 聚焦时让 placeholder 变得更淡或消失，减少视觉干扰 */
.dash-input-element:focus::placeholder {
    opacity: 0.15;
    transform: translateX(4px); /* 微小的位移效果 */
}

/* 1. 父容器：让标签能自动换行并保持间距 */
.readonly-dropdown .dash-dropdown-value {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important; /* 标签之间的上下左右间距 */
    padding: 4px 0 !important;
}

/* 2. 🌟 核心美化：灰色背景的标签样式 */
.readonly-dropdown .dash-dropdown-value-item {
    /* --- 颜色与边框 --- */
    background-color: #f3f4f6 !important; /* 高级浅灰底色 (Tailwind gray-100) */
    border: 1px solid #e5e7eb !important; /* 稍深一点的灰边框 (Tailwind gray-200) */
    color: #4b5563 !important;            /* 深灰色文字 (Tailwind gray-600) */

    /* --- 尺寸与布局 --- */
    border-radius: 6px !important;        /* 圆润的边角，4px-6px 最佳 */
    padding: 4px 10px !important;         /* 内部留白，让背景包裹文字 */
    font-size: 13px !important;           /* 秀气的字号 */
    font-weight: 400 !important;          /* 字体不需要太粗，保持轻盈 */

    /* --- 对齐 --- */
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.5 !important;
}

/* 3. 去掉 Dash 自带的恶心逗号 */
.readonly-dropdown .dash-dropdown-value-item::after,
.readonly-dropdown .dash-dropdown-value-item::before {
    content: none !important;
    display: none !important;
}

/* (可选) 如果你的系统支持明暗模式切换，加入这段防止黑夜模式下白底刺眼 */
[data-theme="dark"] .readonly-dropdown .dash-dropdown-value-item {
    background-color: #374151 !important; /* 深灰色背景 (gray-700) */
    border-color: #4b5563 !important;     /* 边框 (gray-600) */
    color: #e5e7eb !important;            /* 浅灰色文字 (gray-200) */
}

/* =======================================================
   完美对齐 Textarea 的下拉框边框样式 (极简稳妥版)
   ======================================================= */

button.dash-dropdown {
    /* 1. 强制清理原生的阴影和轮廓 */
    outline: none !important;
    box-shadow: none !important;

    /* 2. 🌟 完美复刻截图的边框：1px 实线，Tailwind 经典灰 (gray-300) */
    border: 1px solid #d1d5db !important;

    /* 3. 圆角匹配 (对应 Tailwind 的 rounded-lg) */
    border-radius: 0.5rem !important;
    background-color: transparent !important;
}

/* 鼠标悬停时：边框稍微变深一点 (gray-400) */
button.dash-dropdown:hover {
    border-color: #9ca3af !important;
}

/* 展开或聚焦时：变成主题蓝 (blue-500) */
button.dash-dropdown[data-state="open"],
button.dash-dropdown:focus {
    border-color: #3b82f6 !important;
    /* 加上极细的一圈蓝光，类似标准 input 的 focus 效果 */
    box-shadow: 0 0 0 1px #3b82f6 !important;
}

/* =======================================================
   文件上传进度条状态控制 (替代 Callback 里的 inline-style)
   ======================================================= */

/* 宽度控制 */
.upload-w-0 { width: 0%; }
.upload-w-90 { width: 90%; }
.upload-w-100 { width: 100%; }

/* 动画速度控制 */
.upload-speed-slow { transition: width 5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.upload-speed-fast { transition: width 0.3s ease-out; }
.upload-speed-none { transition: none; }