/* 自定义样式 */
/* body 样式由 input.css 统一定义，此处不再覆盖 */

/* 主色调文本 */
.text-primary {
    color: #1890ff;
}


/* 响应式轮播图 */
@media (max-width: 768px) {
    .h-96 {
        height: 200px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .h-96 {
        height: 300px;
    }
}

/* 轮播图箭头背景样式 */
.carousel-arrow {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.carousel-arrow:hover {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ===== 浏览器兼容性回退 ===== */
/* 针对不支持 oklch() 颜色空间的浏览器（如奇安信、旧版国产浏览器），
   只回退真正依赖 oklch() 的类：颜色相关类和 grid 布局类。
   布局/间距/尺寸/排版等通用类不在此回退，避免 !important 引发覆盖问题。 */
@supports not (color: oklch(0 0 0)) {

    /* ── 背景色 ── */
    .bg-white              { background-color: #ffffff !important; }
    .bg-blue-50            { background-color: #eff6ff !important; }
    .bg-blue-500,
    .hover\:bg-blue-500:hover { background-color: #3b82f6 !important; }
    .bg-blue-600,
    .hover\:bg-blue-600:hover { background-color: #2563eb !important; }
    .bg-blue-700,
    .hover\:bg-blue-700:hover { background-color: #1d4ed8 !important; }
    .bg-green-50           { background-color: #f0fdf4 !important; }
    .bg-green-500,
    .hover\:bg-green-500:hover { background-color: #22c55e !important; }
    .bg-green-600,
    .hover\:bg-green-600:hover { background-color: #16a34a !important; }
    .bg-red-50             { background-color: #fef2f2 !important; }
    .bg-red-500,
    .hover\:bg-red-500:hover { background-color: #ef4444 !important; }
    .bg-red-600,
    .hover\:bg-red-600:hover { background-color: #dc2626 !important; }
    .bg-yellow-50          { background-color: #fefce8 !important; }
    .bg-orange-50          { background-color: #fff7ed !important; }
    .bg-gray-50            { background-color: #f9fafb !important; }
    .bg-gray-100           { background-color: #f3f4f6 !important; }
    .bg-gray-200           { background-color: #e5e7eb !important; }

    /* ── 文字颜色 ── */
    .text-white            { color: #ffffff !important; }
    .text-blue-600         { color: #2563eb !important; }
    .text-gray-400         { color: #9ca3af !important; }
    .text-gray-500         { color: #6b7280 !important; }
    .text-gray-600         { color: #4b5563 !important; }
    .text-gray-700         { color: #374151 !important; }
    .text-gray-800         { color: #1f2937 !important; }
    .text-gray-200         { color: #e5e7eb !important; }
    .text-red-500          { color: #ef4444 !important; }
    .text-red-600          { color: #dc2626 !important; }
    .text-red-700          { color: #b91c1c !important; }
    .text-green-500        { color: #22c55e !important; }
    .text-green-600        { color: #16a34a !important; }
    .text-green-700        { color: #15803d !important; }
    .text-yellow-800       { color: #854d0e !important; }
    .text-orange-500       { color: #f97316 !important; }

    /* ── 边框颜色 ── */
    .border-blue-200       { border-color: #bfdbfe !important; }
    .border-blue-400       { border-color: #60a5fa !important; }
    .border-blue-500       { border-color: #3b82f6 !important; }
    .border-blue-600       { border-color: #2563eb !important; }
    .border-gray-100       { border-color: #f3f4f6 !important; }
    .border-gray-200       { border-color: #e5e7eb !important; }
    .border-gray-300       { border-color: #d1d5db !important; }
    .border-green-200      { border-color: #bbf7d0 !important; }
    .border-red-200        { border-color: #fecaca !important; }
    .border-yellow-200     { border-color: #fef08a !important; }
    .border-orange-200     { border-color: #fed7aa !important; }

    /* ── 阴影（v4 用 oklch 定义阴影色值） ── */
    .shadow-sm  { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05) !important; }
    .shadow-md  { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1) !important; }
    .shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important; }

    /* ── Grid 布局（grid-cols-* 在 v4 中依赖 CSS 变量） ── */
    .grid                  { display: grid !important; }
    .grid-cols-1           { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .grid-cols-2           { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-3           { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .grid-cols-4           { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .grid-cols-5           { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .grid-cols-6           { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .grid-cols-12          { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

    /* ── gap 间距（v4 中依赖 --spacing CSS 变量） ── */
    .gap-4  { gap: 1rem !important; }
    .gap-6  { gap: 1.5rem !important; }
    .gap-8  { gap: 2rem !important; }

    @media (min-width: 640px) {
        .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
        .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    }
    @media (min-width: 768px) {
        .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
        .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    }
    @media (min-width: 1024px) {
        .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
        .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    }
    @media (min-width: 1280px) {
        .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
        .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    }

    /* ── space-x-* 间距（依赖 CSS 变量） ── */
    .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem !important; }
    .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem !important; }
    .space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem !important; }

    /* ── 响应式 flex-row（只覆盖对应断点，不影响 flex-col） ── */
    @media (min-width: 768px) {
        .md\:flex-row { flex-direction: row !important; }
        .md\:gap-8 { gap: 2rem !important; }
        .md\:flex-shrink-0 { flex-shrink: 0 !important; }
        .md\:w-\[320px\] { width: 320px !important; }
        .md\:w-1\/3 { width: 33.333333% !important; }
        .md\:w-2\/3 { width: 66.666667% !important; }
    }
    @media (min-width: 1024px) {
        .lg\:flex-row { flex-direction: row !important; }
        .lg\:w-3\/4 { width: 75% !important; }
        .lg\:w-1\/4 { width: 25% !important; }
    }
    @media (min-width: 1280px) {
        .xl\:flex-row { flex-direction: row !important; }
    }

    /* ── flex-shrink-0（基础） ── */
    .flex-shrink-0 { flex-shrink: 0 !important; }

    /* ── 输入框聚焦样式（focus:ring/focus:border 依赖 CSS 变量和 @property） ── */
    /* 奇安信浏览器不支持 @property 规则，导致 ring 的 CSS 变量链路断裂。
       先用 focus:ring-2 清除错误的 box-shadow，再用 focus:ring-primary 设蓝色 ring */
    .focus\:ring-2:focus {
        box-shadow: none !important;
    }
    .focus\:ring-primary:focus {
        --tw-ring-color: #1890ff !important;
        box-shadow: 0 0 0 2px #1890ff !important;
    }
    .focus\:border-primary:focus { border-color: #1890ff !important; }
    .focus\:border-transparent:focus { border-color: transparent !important; }
    .focus\:outline-none:focus { outline: none !important; }
}

/* ===== Tailwind v4 响应式 display + flex + 宽度 硬性回退 ===== */
/* 不依赖 @supports 和 CSS 变量，纯传统写法，确保旧浏览器（奇安信等）侧边栏正常显示、无抖动 */

/* 基础宽度：w-64 在 v4 中依赖 var(--spacing)，旧浏览器解析延迟导致宽度闪变 */
.w-64 {
    width: 16rem !important;
}

@media screen and (min-width: 768px) {
    .hidden.md\:block {
        display: block !important;
    }
    .md\:hidden {
        display: none !important;
    }
    /* 防止切换到横向布局的瞬间抖动 */
    .md\:flex-row {
        flex-direction: row !important;
    }
    .md\:gap-8 {
        gap: 2rem !important;
    }
}

/* 防止 flex 子项收缩导致侧边栏宽度变化 */
.flex-shrink-0 {
    flex-shrink: 0 !important;
}