/**
 * 品牌颜色通用样式
 * 用于支持代理商白标化的动态颜色应用
 * 
 * 使用方式：
 * 1. 页面需引入 brand_variables.css（定义CSS变量）
 * 2. 页面需引入 brand_loader.js（动态更新CSS变量）
 * 3. 使用此文件中的类名替换硬编码颜色
 */

/* ==================== Logo 防闪烁 ==================== */

/* Logo 初始透明，配置加载后显示 */
.brand-logo {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.brand-logo.brand-loaded {
    opacity: 1;
}

/* ==================== 背景色 ==================== */

/* 页面深色背景 */
.brand-bg {
    background-color: var(--color-background, #101c22) !important;
}

/* ==================== 渐变按钮 ==================== */

/* 主副色渐变按钮（登录、启动、一键生成、客服、下载视频） */
.brand-btn-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
    color: white !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.brand-btn-gradient:hover {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
    filter: brightness(1.1) !important;
    transform: scale(1.02);
}

.brand-btn-gradient:active {
    filter: brightness(0.95) !important;
    transform: scale(0.98);
}

/* ==================== 边框+透明渐变背景按钮 ==================== */

/* 编辑、详情、保存草稿、使用样板、保存修改、重新生成按钮 */
.brand-btn-outline {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 6, 235, 228), 0.1) 0%, rgba(var(--color-secondary-rgb, 245, 111, 172), 0.1) 100%) !important;
    border: 1px solid rgba(var(--color-primary-rgb, 6, 235, 228), 0.3) !important;
    color: var(--color-primary) !important;
    transition: all 0.2s ease !important;
}

.brand-btn-outline:hover {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 6, 235, 228), 0.25) 0%, rgba(var(--color-secondary-rgb, 245, 111, 172), 0.25) 100%) !important;
    border-color: rgba(var(--color-primary-rgb, 6, 235, 228), 0.5) !important;
}

.brand-btn-outline:active {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 6, 235, 228), 0.15) 0%, rgba(var(--color-secondary-rgb, 245, 111, 172), 0.15) 100%) !important;
}

/* ==================== 单色背景按钮 ==================== */

/* 副色背景按钮（免费开始、升级） */
.brand-btn-secondary {
    background-color: var(--color-secondary) !important;
    color: white !important;
    transition: all 0.2s ease !important;
}

.brand-btn-secondary:hover {
    background-color: var(--color-secondary) !important;
    filter: brightness(1.1) !important;
    transform: scale(1.02);
}

.brand-btn-secondary:active {
    filter: brightness(0.95) !important;
    transform: scale(0.98);
}

/* 主色背景按钮 */
.brand-btn-primary {
    background-color: var(--color-primary) !important;
    color: #000 !important;
    transition: all 0.2s ease !important;
}

.brand-btn-primary:hover {
    background-color: var(--color-primary) !important;
    filter: brightness(1.1) !important;
    transform: scale(1.02);
}

.brand-btn-primary:active {
    filter: brightness(0.95) !important;
    transform: scale(0.98);
}

/* ==================== 进度条 ==================== */

/* 主副色渐变进度条 */
.brand-progress {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary)) !important;
}

/* ==================== 页码 ==================== */

/* 页码选中状态 */
.brand-page-active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #000 !important;
}

/* ==================== 品牌色文字 ==================== */

/* 主色文字（品牌色，自适应亮度以增加可读性） */
.brand-text-primary {
    color: var(--color-primary-text, var(--color-primary)) !important;
}

/* 副色文字（品牌色，自适应亮度以增加可读性） */
.brand-text-secondary {
    color: var(--color-secondary-text, var(--color-secondary)) !important;
}

/* 原始品牌色文字（不自适应，用于需要保持原色的场景） */
.brand-text-primary-raw {
    color: var(--color-primary) !important;
}

.brand-text-secondary-raw {
    color: var(--color-secondary) !important;
}

/* 卡片内主色文字（自适应亮度，基于卡片背景） */
.brand-card-text-primary {
    color: var(--color-card-primary-text, var(--color-primary)) !important;
}

/* 卡片内副色文字（自适应亮度，基于卡片背景） */
.brand-card-text-secondary-color {
    color: var(--color-card-secondary-text, var(--color-secondary)) !important;
}

/* ==================== 自适应文字颜色（根据背景亮度自动适配） ==================== */

/* 
 * 页面级文字颜色（适配页面背景）
 * 深色背景 -> 浅色文字（白/浅灰）
 * 浅色背景 -> 深色文字（黑/深灰）
 * 默认值保持平台原有的深色背景配色
 */

/* 页面主文字（标题、主要内容）- 默认: 白色(深色背景) */
.brand-text-base,
.dark\:brand-text-base:is(.dark *) {
    color: var(--color-text-primary, #ffffff) !important;
}

/* 页面次要文字（描述、副标题）- 默认: gray-300(深色背景) */
.brand-text-desc,
.dark\:brand-text-desc:is(.dark *) {
    color: var(--color-text-secondary, #d1d5db) !important;
}

/* 页面弱化文字（提示、时间、ID等）- 默认: gray-400(深色背景) */
.brand-text-muted,
.dark\:brand-text-muted:is(.dark *) {
    color: var(--color-text-muted, #9ca3af) !important;
}

/* 
 * 卡片/窗口内文字颜色（适配卡片背景）
 * 用于：产品信息窗口、任务卡片、弹窗等
 */

/* 卡片内主文字 - 默认: 白色(深色卡片) */
.brand-card-text,
.dark\:brand-card-text:is(.dark *) {
    color: var(--color-card-text-primary, #ffffff) !important;
}

/* 卡片内次要文字 - 默认: gray-300(深色卡片) */
.brand-card-text-desc,
.dark\:brand-card-text-desc:is(.dark *) {
    color: var(--color-card-text-secondary, #d1d5db) !important;
}

/* 卡片内弱化文字 - 默认: gray-400(深色卡片) */
.brand-card-text-muted,
.dark\:brand-card-text-muted:is(.dark *) {
    color: var(--color-card-text-muted, #9ca3af) !important;
}

/* 
 * 输入框文字颜色（适配输入框背景）
 */

/* 输入框文字 - 默认: 白色(深色输入框) */
.brand-input-text,
.dark\:brand-input-text:is(.dark *) {
    color: var(--color-input-text, #ffffff) !important;
}

/* 输入框占位符 - 默认: gray-500(深色输入框) */
.brand-input-placeholder::placeholder {
    color: var(--color-input-placeholder, #6b7280) !important;
}

/* 
 * 下拉框/选择框文字颜色（适配下拉框背景）
 */

/* 下拉框选中值文字 */
.brand-select-text {
    color: var(--color-select-text, #ffffff) !important;
}

/* 下拉框选项文字 */
.brand-select-option {
    color: var(--color-select-option-text, #d1d5db) !important;
}

/* 
 * 用户下拉菜单文字颜色（适配菜单背景）
 */

/* 下拉菜单主文字 */
.brand-dropdown-text,
.dark\:brand-dropdown-text:is(.dark *) {
    color: var(--color-dropdown-text, #ffffff) !important;
}

/* 下拉菜单次要文字 */
.brand-dropdown-text-secondary,
.dark\:brand-dropdown-text-secondary:is(.dark *) {
    color: var(--color-dropdown-text-secondary, #d1d5db) !important;
}

/* 下拉菜单弱化文字 */
.brand-dropdown-text-muted,
.dark\:brand-dropdown-text-muted:is(.dark *) {
    color: var(--color-dropdown-text-muted, #9ca3af) !important;
}

/* ==================== 表面色/背景色（自适应） ==================== */

/* 
 * 通用表面色（用于卡片、窗口、弹窗等）
 * 默认值保持平台原有深色背景配色
 */

/* 主表面色（卡片、窗口背景）- 默认: 深灰 */
.brand-surface {
    background-color: var(--color-surface, rgb(31, 41, 55)) !important;
}

/* 次级表面色（输入框、下拉框、嵌套区域）- 默认: 更深灰 */
.brand-surface-secondary {
    background-color: var(--color-surface-secondary, rgb(17, 24, 39)) !important;
}

/* hover时的表面色（用于菜单项、按钮hover）*/
.brand-surface-hover:hover {
    background-color: var(--color-surface-secondary, rgb(17, 24, 39)) !important;
}

/* dark模式下的hover表面色 */
.dark\:brand-surface-hover:hover:is(.dark *) {
    background-color: var(--color-surface-secondary, rgb(17, 24, 39)) !important;
}

/* 侧边栏背景 */
.brand-sidebar-bg {
    background-color: var(--color-sidebar-bg, rgb(26, 40, 50)) !important;
}

/* 侧边栏hover背景色 */
.sidebar-nav-item:hover {
    background-color: var(--color-surface, rgb(31, 41, 55)) !important;
}

/* ==================== 自适应边框色 ==================== */

/* 通用边框色（自适应） */
.brand-border {
    border-color: var(--color-border, rgb(55, 65, 81)) !important;
}

/* 通用边框色（用于 dark: 模式替换） */
.brand-border-adaptive {
    border-color: var(--color-border, rgb(55, 65, 81)) !important;
}

/* ==================== 侧边栏文字（自适应） ==================== */

/* 侧边栏文字 */
.brand-sidebar-text {
    color: var(--color-sidebar-text, #d1d5db) !important;
}

/* 侧边栏弱化文字 */
.brand-sidebar-text-muted {
    color: var(--color-sidebar-text-muted, #9ca3af) !important;
}

/* ==================== 页码控件（自适应） ==================== */

/* 页码按钮背景 */
.brand-pagination-bg {
    background-color: var(--color-surface, rgb(31, 41, 55)) !important;
    border-color: var(--color-border, rgb(55, 65, 81)) !important;
}

/* 页码按钮文字 */
.brand-pagination-text {
    color: var(--color-card-text-secondary, #d1d5db) !important;
}

/* 页码按钮 hover */
.brand-pagination-hover:hover {
    background-color: var(--color-surface-secondary, rgb(17, 24, 39)) !important;
}

/* ==================== 图标颜色 ==================== */

/* 主色图标 */
.brand-icon-primary {
    color: var(--color-primary) !important;
    fill: var(--color-primary) !important;
}

/* 副色图标 */
.brand-icon-secondary {
    color: var(--color-secondary) !important;
    fill: var(--color-secondary) !important;
}

/* ==================== 边框颜色（品牌色） ==================== */

/* 主色边框 */
.brand-border-primary {
    border-color: var(--color-primary) !important;
}

/* 副色边框 */
.brand-border-secondary {
    border-color: var(--color-secondary) !important;
}

/* ==================== 渐变卡片 ==================== */

/* 积分卡片渐变背景 */
.brand-card-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
}

/* 卡片hover效果（我的视频页任务卡片） */
.brand-card-hover:hover {
    box-shadow: 0 25px 50px -12px rgba(var(--color-primary-rgb, 6, 235, 228), 0.1) !important;
    border-color: transparent !important;
    outline: 2px solid rgba(var(--color-primary-rgb, 6, 235, 228), 0.5) !important;
    outline-offset: -2px;
}

/* ==================== 悬浮效果 ==================== */

/* 悬浮时显示主色 */
.brand-hover-primary:hover {
    color: var(--color-primary) !important;
}

/* 悬浮时显示副色 */
.brand-hover-secondary:hover {
    color: var(--color-secondary) !important;
}

/* 悬浮时边框主色 */
.brand-hover-border-primary:hover {
    border-color: var(--color-primary) !important;
}

/* ==================== 阴影效果 ==================== */

/* 主色阴影 */
.brand-shadow-primary {
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb, 6, 235, 228), 0.3) !important;
}

/* 副色阴影 */
.brand-shadow-secondary {
    box-shadow: 0 0 15px rgba(var(--color-secondary-rgb, 245, 111, 172), 0.3) !important;
}

/* ==================== 输入框焦点 ==================== */

/* 输入框焦点时边框主色 */
.brand-focus-primary:focus {
    border-color: var(--color-primary) !important;
    outline-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 6, 235, 228), 0.2) !important;
}

/* 全局输入框focus样式（覆盖Tailwind默认） */
input:focus, textarea:focus, select:focus {
    border-color: var(--color-primary) !important;
    --tw-ring-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 6, 235, 228), 0.2) !important;
}

/* focus:ring-primary-1 和 focus:border-primary-1 覆盖 */
.focus\:ring-primary-1:focus {
    --tw-ring-color: var(--color-primary) !important;
}

.focus\:border-primary-1:focus {
    border-color: var(--color-primary) !important;
}

/* ==================== 复选框样式 ==================== */

/* 复选框选中和hover状态 */
input[type="checkbox"] {
    accent-color: var(--color-primary) !important;
}

input[type="checkbox"]:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

input[type="checkbox"]:hover {
    border-color: var(--color-primary) !important;
}

input[type="checkbox"]:focus {
    --tw-ring-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 6, 235, 228), 0.2) !important;
}

/* text-primary-1 checkbox覆盖 */
.text-primary-1[type="checkbox"]:checked {
    background-color: var(--color-primary) !important;
}

/* ==================== Tab选中状态 ==================== */

/* Tab选中时底部边框 */
.brand-tab-active {
    border-bottom-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* ==================== 链接颜色 ==================== */

/* 主色链接 */
a.brand-link-primary {
    color: var(--color-primary) !important;
}

a.brand-link-primary:hover {
    color: var(--color-primary-hover, var(--color-primary)) !important;
    text-decoration: underline;
}

/* ==================== 客服悬浮按钮 ==================== */

.brand-customer-service {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
}

/* ==================== 装饰元素 ==================== */

/* 主色装饰圆点 */
.brand-dot-primary {
    background-color: var(--color-primary) !important;
}

/* 副色装饰圆点 */
.brand-dot-secondary {
    background-color: var(--color-secondary) !important;
}

/* ==================== 侧边栏 ==================== */

/* 侧边栏导航项基础样式 - 禁用transition避免闪烁 */
.sidebar-nav-item {
    color: inherit;
    transition: background 0.15s ease, transform 0.15s ease !important;
    /* 不对color使用transition，避免颜色变化时的闪烁 */
}

/* 侧边栏导航项悬停 */
.sidebar-nav-item:hover {
    color: var(--color-primary) !important;
    background: rgba(var(--color-primary-rgb, 6, 235, 228), 0.05) !important;
}

/* 侧边栏导航项点击状态 */
.sidebar-nav-item:active {
    color: var(--color-primary) !important;
    transform: scale(0.98);
}

/* 侧边栏激活状态 */
.brand-sidebar-active {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 6, 235, 228), 0.1) 0%, rgba(var(--color-secondary-rgb, 245, 111, 172), 0.1) 100%) !important;
    border: 1px solid rgba(var(--color-primary-rgb, 6, 235, 228), 0.3) !important;
    color: var(--color-primary) !important;
}

.brand-sidebar-active:hover {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 6, 235, 228), 0.15) 0%, rgba(var(--color-secondary-rgb, 245, 111, 172), 0.15) 100%) !important;
    color: var(--color-primary) !important;
}

.brand-sidebar-active:active {
    color: var(--color-primary) !important;
}

/* ==================== Tab选中状态 ==================== */

/* Tab激活状态（我的信息页等） */
.brand-tab-active {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary) !important;
}

/* ==================== 我的积分页 ==================== */

/* 积分统计卡片渐变 */
.brand-stats-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
}

/* 积分消耗数字（副色） */
.brand-points-expense {
    color: var(--color-secondary) !important;
}

/* ==================== 升级按钮 ==================== */

/* 顶部升级按钮（副色背景） */
.brand-upgrade-btn {
    background-color: var(--color-secondary) !important;
    color: white !important;
}