/* ============================================================
   Jeenpi 主题切换样式
   深色模式通过 html[data-theme="dark"] 属性激活
   !important 用于覆盖 Tailwind 运行时生成的内联样式
   ============================================================ */

/* ----------------------------------------------------------
   0. 主题切换过渡动画（排除 video / img / canvas）
   ---------------------------------------------------------- */
*:not(video):not(img):not(canvas):not(#videoPlayerContainer):not(#videoPlayerContainer *) {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: ease;
}


/* ----------------------------------------------------------
   0.5 全局滚动条 — 轨道透明，仅显示滑块
   ---------------------------------------------------------- */
/* 内部列表等小滚动条：低调细滑块 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.35); }

html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

/* 主页面滚动条（html 元素）：更粗更明显，方便定位 */
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.32); border-radius: 4px; }
html::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.52); }

html[data-theme="dark"]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.42); }
html[data-theme="dark"]::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.62); }

/* Firefox — 内部列表 */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) transparent; }
html[data-theme="dark"] * { scrollbar-color: rgba(255,255,255,0.22) transparent; }

/* Firefox — 主页面 */
html { scrollbar-color: rgba(0,0,0,0.32) transparent; }
html[data-theme="dark"] { scrollbar-color: rgba(255,255,255,0.42) transparent; }

/* ----------------------------------------------------------
   1. 页面大背景 / body
   ---------------------------------------------------------- */
/* 影院黑：接近纯黑的炭色背景，让海报色彩“发光”；卡片靠微弱明度差与光影分隔 */
html[data-theme="dark"] body {
    background-color: #0a0a0c !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .bg-gray-50 {
    background-color: #0a0a0c !important;
}

html[data-theme="dark"] .bg-white {
    background-color: #16161a !important;
}

html[data-theme="dark"] .bg-white\/90 {
    background-color: rgba(22, 22, 26, 0.92) !important;
}

html[data-theme="dark"] .bg-gray-100 {
    background-color: #1f1f25 !important;
}

html[data-theme="dark"] .bg-gray-200 {
    background-color: #2a2a31 !important;
}

html[data-theme="dark"] .bg-gray-300 {
    background-color: #4B5563 !important;
}


/* ----------------------------------------------------------
   2. 文字颜色
   ---------------------------------------------------------- */
html[data-theme="dark"] .text-gray-900 { color: #f7fafc !important; }
html[data-theme="dark"] .text-gray-800 { color: #e2e8f0 !important; }
html[data-theme="dark"] .text-gray-700 { color: #cbd5e0 !important; }
html[data-theme="dark"] .text-gray-600 { color: #a0aec0 !important; }
html[data-theme="dark"] .text-gray-500 { color: #718096 !important; }
html[data-theme="dark"] .text-gray-400 { color: #8892a0 !important; }
html[data-theme="dark"] .text-gray-300 { color: #a0aec0 !important; }


/* ----------------------------------------------------------
   3. 边框颜色
   ---------------------------------------------------------- */
html[data-theme="dark"] .border-gray-100 { border-color: #252f42 !important; }
html[data-theme="dark"] .border-gray-200 { border-color: #374151 !important; }
html[data-theme="dark"] .border-gray-300 { border-color: #4B5563 !important; }
html[data-theme="dark"] .border             { border-color: #374151 !important; }
html[data-theme="dark"] .border-b           { border-color: #252f42 !important; }
html[data-theme="dark"] .border-t           { border-color: #374151 !important; }


/* ----------------------------------------------------------
   4. 导航栏 .header-nav
   ---------------------------------------------------------- */
html[data-theme="dark"] .header-nav {
    background-color: rgba(10, 10, 12, 0.88) !important;
    /* 浅色基础样式已去掉 border-bottom，深色这里补回完整定义，避免边框丢失 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
}

html[data-theme="dark"] header.bg-white {
    background-color: #1e2435 !important;
    border-bottom-color: #252f42 !important;
}


/* ----------------------------------------------------------
   5. 搜索框（index.html）
   ---------------------------------------------------------- */
html[data-theme="dark"] .search-container {
    background-color: #252f42 !important;
    border-color: #374151 !important;
}
html[data-theme="dark"] .search-container:focus-within {
    background-color: #2d3748 !important;
    box-shadow: 0 0 0 2px rgba(22,93,255,0.4) !important;
}
html[data-theme="dark"] .search-input {
    color: #a0aec0 !important;
    background-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    color-scheme: dark;
}
html[data-theme="dark"] .search-container:focus-within .search-input {
    color: #f7fafc !important;
}
html[data-theme="dark"] .search-input::placeholder { color: #7a8aa0 !important; }


/* ----------------------------------------------------------
   6. 分类 / 过滤 / 排序按钮（index.html）
   ---------------------------------------------------------- */
/* 小屏底部分类按钮（category-btn）：保持背景块风格 */
html[data-theme="dark"] .category-btn-inactive {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #cbd5e0 !important;
}
html[data-theme="dark"] .category-btn-inactive:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* 顶栏导航（header-category-btn）：影院风文字 tab + 下划线，深色配色 */
html[data-theme="dark"] .header-category-btn-active {
    color: #5b8cff !important;
}
html[data-theme="dark"] .header-category-btn-active::after {
    background-color: #5b8cff !important;
}
html[data-theme="dark"] .header-category-btn-inactive {
    color: #9aa3b2 !important;
}
html[data-theme="dark"] .header-category-btn-inactive:hover {
    color: #ffffff !important;
}

/* 排序下拉按钮（.filter-btn-active-all） */
html[data-theme="dark"] .filter-btn-active-all {
    background-color: #252f42 !important;
    color: #cbd5e0 !important;
}
html[data-theme="dark"] .filter-btn-active-all:hover {
    background-color: #2d3748 !important;
}

/* 影院风筛选栏 —— 无边框文字风（深色）：选中=亮白字+极淡中性底，不用蓝色块 */
html[data-theme="dark"] .filter-category-label-active {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .filter-category-label-inactive {
    background-color: transparent !important;
    color: #8b93a3 !important;
}
html[data-theme="dark"] .filter-category-label-inactive:hover {
    color: #e2e8f0 !important;
}

/* 下排子标签值（全部/x265/HDR 等）—— 影院风「下划线高亮」：
   选中=亮蓝字 + 亮蓝下划线，非选中=淡灰纯文字，无底色，区别于上排实心底主分类 */
html[data-theme="dark"] .filter-option-button-active {
    background-color: transparent !important;
    color: #5b8dff !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .filter-option-button::after {
    background-color: #5b8dff;
}
html[data-theme="dark"] .filter-option-button-inactive {
    background-color: transparent !important;
    color: #8b93a3 !important;
}
html[data-theme="dark"] .filter-option-button-inactive:hover {
    color: #e2e8f0 !important;
}

/* 升序/降序按钮 */
html[data-theme="dark"] .sort-btn {
    color: #a0aec0 !important;
}
html[data-theme="dark"] .sort-btn-inactive {
    background-color: #252f42 !important;
}
html[data-theme="dark"] .sort-btn-inactive:hover {
    background-color: #2d3748 !important;
}

/* 升序/降序外框边框 */
html[data-theme="dark"] .sort-container {
    border-color: #374151 !important;
}


/* 过滤栏展开/收起按钮（覆盖内联样式） */
html[data-theme="dark"] #filterToggleBtn {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #6b7686 !important;
}

html[data-theme="dark"] .load-more-btn {
    background-color: #252f42 !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}
html[data-theme="dark"] .load-more-btn:hover {
    background-color: #2d3748 !important;
}


/* 筛选栏外层：背景与页面 body 完全一致，避免出现“一块板子”的色差 */
html[data-theme="dark"] #filterBarOuter {
    background: #0a0a0c !important;
}


/* ----------------------------------------------------------
   7. 下拉菜单（.dropdown-item）
   ---------------------------------------------------------- */
html[data-theme="dark"] #sortDropdownMenu {
    background-color: #1e2435 !important;
    border-color: #374151 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
html[data-theme="dark"] .dropdown-item {
    color: #cbd5e0 !important;
}
html[data-theme="dark"] .dropdown-item:hover {
    background-color: #252f42 !important;
}


/* ----------------------------------------------------------
   8. icon-btn hover 状态
   ---------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    html[data-theme="dark"] .icon-btn:hover {
        color: #4d7cff !important;
        background-color: #252f42 !important;
    }
}
html[data-theme="dark"] .icon-btn:active {
    color: #4d7cff !important;
    background-color: #252f42 !important;
}


/* ----------------------------------------------------------
   9. Hover 背景通用覆盖
   ---------------------------------------------------------- */
html[data-theme="dark"] .hover\:bg-gray-50:hover  { background-color: #1e2435 !important; }
html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #252f42 !important; }
html[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: #374151 !important; }


/* ----------------------------------------------------------
   10. 影片卡片 .movie-card（index.html 动态生成）
   ---------------------------------------------------------- */
html[data-theme="dark"] .movie-card {
    background-color: #16161a !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}
html[data-theme="dark"] .movie-card:hover {
    /* 影院风：hover 时用柔和外发光替代纯黑阴影，让卡片“浮起发光” */
    box-shadow: 0 10px 30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) !important;
}
html[data-theme="dark"] .movie-card .bg-gray-200 {
    background-color: #222228 !important;
}
html[data-theme="dark"] .movie-card .bg-gray-100 {
    background-color: #1f1f25 !important;
}
/* 叠放（剧集/系列）堆叠层：深色模式下用更深的底色 + 边框，区分层次 */
/* 深色模式下，未取到海报主色时回退为深色；取到色时（--stack-color-*）仍优先 */
html[data-theme="dark"] .stacked-card::before {
    background-color: var(--stack-color-1, #353d57);
    /* 深色模式下分隔线柔和一些，避免纯白过亮 */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
html[data-theme="dark"] .stacked-card::after {
    background-color: var(--stack-color-2, #2a3148);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* 深色模式海报顶部分隔线 */
html[data-theme="dark"] .stacked-card > div:first-child {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}


/* ----------------------------------------------------------
   11. 彩色标签（评分/剧集/系列等）
   ---------------------------------------------------------- */
html[data-theme="dark"] .bg-yellow-100  { background-color: rgba(255,215,0,0.12) !important; }
html[data-theme="dark"] .bg-yellow-50   { background-color: rgba(255,215,0,0.07) !important; }
html[data-theme="dark"] .text-yellow-800 { color: #fbbf24 !important; }
html[data-theme="dark"] .text-yellow-700 { color: #f59e0b !important; }

html[data-theme="dark"] .bg-blue-100   { background-color: rgba(22,93,255,0.15) !important; }
html[data-theme="dark"] .bg-blue-50    { background-color: rgba(22,93,255,0.10) !important; }
html[data-theme="dark"] .text-blue-800  { color: #90cdf4 !important; }
html[data-theme="dark"] .text-blue-700  { color: #60a5fa !important; }
html[data-theme="dark"] .border-blue-100{ border-color: rgba(22,93,255,0.2) !important; }
html[data-theme="dark"] .hover\:bg-blue-100:hover { background-color: rgba(22,93,255,0.2) !important; }

html[data-theme="dark"] .bg-purple-100  { background-color: rgba(128,90,213,0.15) !important; }
html[data-theme="dark"] .text-purple-800 { color: #d6bcfa !important; }

html[data-theme="dark"] .bg-green-100   { background-color: rgba(16,185,129,0.15) !important; }
html[data-theme="dark"] .bg-green-50    { background-color: rgba(16,185,129,0.10) !important; }
html[data-theme="dark"] .text-green-800  { color: #6ee7b7 !important; }
html[data-theme="dark"] .text-green-700  { color: #34d399 !important; }
html[data-theme="dark"] .text-green-600  { color: #10b981 !important; }
html[data-theme="dark"] .text-green-500  { color: #34d399 !important; }
html[data-theme="dark"] .border-green-200{ border-color: rgba(16,185,129,0.25) !important; }

html[data-theme="dark"] .bg-red-100     { background-color: rgba(239,68,68,0.15) !important; }
html[data-theme="dark"] .bg-red-50      { background-color: rgba(239,68,68,0.10) !important; }
html[data-theme="dark"] .text-red-700    { color: #fc8181 !important; }
html[data-theme="dark"] .text-red-500    { color: #f87171 !important; }
html[data-theme="dark"] .border-red-200  { border-color: rgba(239,68,68,0.25) !important; }


/* ----------------------------------------------------------
   12. 通用弹窗 / Modal
   ---------------------------------------------------------- */
html[data-theme="dark"] .bg-white.rounded-xl.shadow-2xl,
html[data-theme="dark"] .bg-white.rounded-2xl.shadow-2xl {
    background-color: #1e2435 !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.65) !important;
}

/* error-modal（movie_detail.html 各弹窗）*/
html[data-theme="dark"] .error-modal {
    background-color: #1e2435 !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.65) !important;
}

/* 加载遮罩 */
html[data-theme="dark"] #loadingIndicator .bg-white\/90,
html[data-theme="dark"] .bg-white\/90 {
    background-color: rgba(20, 26, 40, 0.92) !important;
}


/* ----------------------------------------------------------
   13. 表单输入框
   ---------------------------------------------------------- */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #2d3748 !important;
    border-color: #4B5563 !important;
    color: #e2e8f0 !important;
}
/* number 输入框原生上下箭头（spin button）跟随深色主题 */
html[data-theme="dark"] input[type="number"] { color-scheme: dark; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #556070 !important; }

/* 弹窗内灰色按钮（取消、关闭等）*/
html[data-theme="dark"] button.bg-gray-100 {
    background-color: #252f42 !important;
    color: #cbd5e0 !important;
}
html[data-theme="dark"] button.hover\:bg-gray-200:hover {
    background-color: #374151 !important;
}


/* ----------------------------------------------------------
   14. movie_detail.html 专用组件
   ---------------------------------------------------------- */
/* 设置弹窗内的小选项行 bg-gray-50 */
html[data-theme="dark"] .bg-gray-50.rounded-lg {
    background-color: #1a2236 !important;
}

/* toggle 开关底色（未选中） */
html[data-theme="dark"] .bg-gray-200.rounded-full,
html[data-theme="dark"] .w-11.h-6.bg-gray-200 {
    background-color: #374151 !important;
}
/* toggle 开关底色（选中 → 恢复蓝色，更高选择器优先级覆盖上条 !important） */
html[data-theme="dark"] .peer:checked ~ .w-11.h-6.bg-gray-200,
html[data-theme="dark"] .peer:checked ~ .bg-gray-200.rounded-full {
    background-color: #165DFF !important;
}

/* 剧集按钮 */
html[data-theme="dark"] .episode-btn-inactive {
    background-color: #252f42 !important;
    color: #cbd5e0 !important;
    border-color: #374151 !important;
}
html[data-theme="dark"] .episode-btn-inactive:hover {
    border-color: #4d7cff !important;
    color: #90cdf4 !important;
}

/* 演员详情弹窗 */
html[data-theme="dark"] #castDetail .bg-white { background-color: #1e2435 !important; }
html[data-theme="dark"] #castDetail .border-gray-200 { border-color: #374151 !important; }

/* 播放加载弹窗 */
html[data-theme="dark"] #playLoading .bg-white { background-color: #1e2435 !important; }

/* 阴影 */
html[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; }
html[data-theme="dark"] .shadow    { box-shadow: 0 1px 3px rgba(0,0,0,0.6) !important; }
html[data-theme="dark"] .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.6) !important; }
html[data-theme="dark"] .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.7) !important; }


/* ----------------------------------------------------------
   15. 分割线 / divide
   ---------------------------------------------------------- */
html[data-theme="dark"] .divide-gray-100 > * + *,
html[data-theme="dark"] .divide-gray-200 > * + * {
    border-color: #252f42 !important;
}


/* ----------------------------------------------------------
   16. footer（.bg-dark = #1D2939）
   ---------------------------------------------------------- */
html[data-theme="dark"] .bg-dark,
html[data-theme="dark"] footer.bg-dark {
    background-color: #0d1117 !important;
}


/* ----------------------------------------------------------
   17. 播放器区域排除
       #videoPlayerContainer 天然是黑色背景，无需深色处理
       禁用其内部过渡动画以防止闪烁
   ---------------------------------------------------------- */
html[data-theme="dark"] #videoPlayerContainer,
html[data-theme="dark"] #videoPlayerContainer * {
    transition: none !important;
}


/* ----------------------------------------------------------
   18. 主题切换按钮自身
   ---------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    html[data-theme="dark"] #themeToggleBtn:hover {
        color: #4d7cff !important;
        background-color: #252f42 !important;
    }
}


/* ----------------------------------------------------------
   19. 评分条（movie_detail.html .rating-bar 硬编码背景色）
   ---------------------------------------------------------- */
html[data-theme="dark"] .rating-bar {
    background-color: #374151 !important;
}


/* ----------------------------------------------------------
   20. 继续观看滚动箭头渐变（index.html #cwScrollLeft/Right）
       Tailwind from-gray-50 via-gray-50/70 在深色模式下显示为白色渐变
   ---------------------------------------------------------- */
html[data-theme="dark"] #cwScrollLeft {
    background: linear-gradient(to right, #111827 0%, rgba(17,24,39,0.75) 60%, transparent 100%) !important;
}
html[data-theme="dark"] #cwScrollRight {
    background: linear-gradient(to left, #111827 0%, rgba(17,24,39,0.75) 60%, transparent 100%) !important;
}


/* ----------------------------------------------------------
   21. 继续观看与全部影片之间的分割线渐变（index.html #cwSeparator）
   ---------------------------------------------------------- */
html[data-theme="dark"] #cwSeparator .bg-gradient-to-r {
    background: linear-gradient(to right, transparent, #374151) !important;
}
html[data-theme="dark"] #cwSeparator .bg-gradient-to-l {
    background: linear-gradient(to left, transparent, #374151) !important;
}


/* ----------------------------------------------------------
   22. VIP 徽章（index.html #vipBadge .vip-badge）
       深色模式下 #92400E 棕色文字在深色背景不可见
   ---------------------------------------------------------- */
html[data-theme="dark"] .vip-badge {
    color: #FFD700 !important;
    background-color: rgba(255, 215, 0, 0.12) !important;
    border-color: rgba(255, 215, 0, 0.35) !important;
}


/* ----------------------------------------------------------
   23. 小屏合并菜单面板（#mobileMoreMenu）
   ---------------------------------------------------------- */
html[data-theme="dark"] #mobileMoreMenu {
    background-color: #1e2435 !important;
    border-color: #374151 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
html[data-theme="dark"] #mobileMoreMenu button {
    color: #cbd5e0 !important;
}
html[data-theme="dark"] #mobileMoreMenu button:hover {
    background-color: #252f42 !important;
}
html[data-theme="dark"] #mobileMoreMenu button .text-gray-400 {
    color: #8892a0 !important;
}
html[data-theme="dark"] #mobileMoreMenu .h-px {
    background-color: #2d3748 !important;
}


/* ----------------------------------------------------------
   24. 主题切换按钮太阳图标（img 标签，不继承 color，用 filter 调色）
       浅色模式：SVG fill=#9CA3AF（已直接写入 SVG 文件）
       深色模式：text-gray-400 覆盖为 #8892a0，用 brightness 微调
   ---------------------------------------------------------- */
html[data-theme="dark"] #themeIconLight,
html[data-theme="dark"] #mobileThemeIconSun {
    filter: brightness(0.89) !important;
}

/* ----------------------------------------------------------
   25. 书签管理对话框
   ---------------------------------------------------------- */
html[data-theme="dark"] .bookmark-row {
    border-bottom-color: #2d3748 !important;
}