/* 黄色主题全局样式 - 恒星云爆文专属配色 */

:root {
    /* 黄色主题色彩变量 - 根据开发规则定义 */
    --primary-yellow: #F57F17;        /* 主色系：深黄色 */
    --secondary-yellow: #FBC02D;      /* 次色系：中黄色 */
    --warning-yellow: #FFCA28;        /* 警告色系：标准黄 */
    --error-yellow: #FFEB3B;          /* 错误色系：成功黄（亮黄色） */
    --theme-yellow: #FFF176;          /* 主题色系：亮黄色 */
    
    /* 深色变体 */
    --primary-yellow-dark: #F57F17;   /* 深黄色 */
    --primary-yellow-darker: #E65100;  /* 更深的黄色 */
    
    /* 浅色变体 */
    --primary-yellow-light: #FFB300;   /* 亮黄色 */
    --primary-yellow-lighter: #FDD835; /* 更亮的黄色 */
    
    /* 渐变定义 */
    --yellow-gradient-primary: linear-gradient(135deg, #F57F17, #FBC02D);
    --yellow-gradient-dark: linear-gradient(135deg, #E65100, #F57F17);
    --yellow-gradient-light: linear-gradient(135deg, #FBC02D, #FDD835);
    --yellow-gradient-soft: linear-gradient(135deg, #FFCA28, #FFF176);
    
    /* 背景渐变 */
    --yellow-bg-gradient: linear-gradient(135deg, #FFF8E1 0%, #FFFDE7 50%, #ffffff 100%);
    
    /* 阴影效果 */
    --yellow-shadow: 0 4px 12px rgba(245, 127, 23, 0.3);
    --yellow-shadow-hover: 0 8px 20px rgba(245, 127, 23, 0.4);
    --yellow-shadow-soft: 0 2px 8px rgba(251, 192, 45, 0.2);
    
    /* 过渡效果 */
    --yellow-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ======================== 全局元素样式 ======================== */

/* 全局链接和按钮黄色主题 */
a:hover, .btn:hover, .button:hover {
    color: var(--primary-yellow) !important;
}

/* 表单元素焦点黄色 */
input:focus, textarea:focus, select:focus {
    border-color: var(--primary-yellow) !important;
    box-shadow: 0 0 0 0.2rem rgba(245, 127, 23, 0.25) !important;
}

/* 主要按钮黄色风格 */
.btn-primary, .primary-btn {
    background: var(--yellow-gradient-primary) !important;
    border-color: var(--primary-yellow) !important;
    color: #fff !important;
    transition: var(--yellow-transition);
}

.btn-primary:hover, .primary-btn:hover {
    background: var(--yellow-gradient-dark) !important;
    transform: translateY(-2px);
    box-shadow: var(--yellow-shadow);
}

/* 活动状态和选中状态 */
.active, .current, .selected {
    background-color: #f57f1700 !important;
    color: white !important;
}

/* 导航栏活动项 */
.nav-link.active, .navbar-nav .nav-link.active {
    color: var(--primary-yellow) !important;
}

/* ======================== 分页和导航 ======================== */

/* 分页按钮 */
.pagination .page-link {
    color: var(--primary-yellow) !important;
}

.pagination .page-link:hover {
    background-color: var(--primary-yellow) !important;
    color: white !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-yellow) !important;
    border-color: var(--primary-yellow) !important;
}

/* ======================== 进度条和徽章 ======================== */

/* 进度条 */
.progress-bar {
    background: var(--yellow-gradient-primary) !important;
}

/* 徽章和标签 */
.badge-primary, .badge-danger {
    background-color: var(--primary-yellow) !important;
}

.badge-info {
    background-color: var(--secondary-yellow) !important;
}

.badge-warning {
    background-color: var(--warning-yellow) !important;
    color: #333 !important;
}

/* ======================== 边框和装饰 ======================== */

/* 边框 */
.border-primary, .border-danger {
    border-color: var(--primary-yellow) !important;
}

/* 文本颜色 */
.text-primary, .text-danger {
    color: var(--primary-yellow) !important;
}

/* 背景色 */
.bg-primary, .bg-danger {
    background-color: var(--primary-yellow) !important;
}

/* ======================== 警告框和提示 ======================== */

/* 警告框 */
.alert-danger, .alert-primary {
    background-color: rgba(245, 127, 23, 0.1) !important;
    border-color: var(--primary-yellow) !important;
    color: var(--primary-yellow-darker) !important;
}

.alert-warning {
    background-color: rgba(255, 202, 40, 0.1) !important;
    border-color: var(--warning-yellow) !important;
    color: #F57F17 !important;
}

.alert-info {
    background-color: rgba(251, 192, 45, 0.1) !important;
    border-color: var(--secondary-yellow) !important;
    color: #F57F17 !important;
}

/* ======================== 表格 ======================== */

/* 表格行活动状态 */
.table-active {
    background-color: rgba(245, 127, 23, 0.1) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(255, 241, 225, 0.5) !important;
}

/* ======================== 下拉菜单 ======================== */

/* 下拉菜单活动项 */
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--primary-yellow) !important;
}

.dropdown-item:hover {
    background-color: rgba(245, 127, 23, 0.1) !important;
    color: var(--primary-yellow) !important;
}

/* ======================== 特殊效果 ======================== */

/* 发光效果 */
.yellow-glow {
    box-shadow: 0 0 20px rgba(245, 127, 23, 0.5);
}

/* 脉冲动画 */
.yellow-pulse {
    animation: yellowPulse 2s ease-in-out infinite;
}

@keyframes yellowPulse {
    0%, 100% { 
        box-shadow: 0 0 8px rgba(245, 127, 23, 0.4);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 20px rgba(245, 127, 23, 0.8);
        transform: scale(1.02);
    }
}

/* ======================== 卡片和容器 ======================== */

/* 卡片悬停效果 */
.card:hover, .novel-card:hover {
    box-shadow: var(--yellow-shadow) !important;
    border-color: var(--primary-yellow) !important;
}

/* ======================== 表单控件 ======================== */

/* 复选框和单选框 */
.form-check-input:checked {
    background-color: var(--primary-yellow) !important;
    border-color: var(--primary-yellow) !important;
}

/* 开关按钮 */
.form-switch .form-check-input:checked {
    background-color: var(--primary-yellow) !important;
}

/* ======================== 加载和状态 ======================== */

/* 加载旋转器 */
.spinner-border {
    color: var(--primary-yellow) !important;
}

.spinner-grow {
    background-color: var(--primary-yellow) !important;
}

/* ======================== 模态框 ======================== */

/* 模态框头部 */
.modal-header {
    background: var(--yellow-gradient-primary) !important;
    color: white !important;
}

/* ======================== 标签页 ======================== */

/* 标签页 */
.nav-tabs .nav-link.active {
    color: var(--primary-yellow) !important;
    border-color: var(--primary-yellow) var(--primary-yellow) #fff !important;
}

.nav-pills .nav-link.active {
    background-color: var(--primary-yellow) !important;
}

/* ======================== 响应式调整 ======================== */

@media (max-width: 768px) {
    .btn-primary, .primary-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    :root {
        --yellow-shadow: 0 2px 8px rgba(245, 127, 23, 0.2);
        --yellow-shadow-hover: 0 4px 12px rgba(245, 127, 23, 0.3);
    }
}

/* ======================== 自定义组件 ======================== */

/* VIP会员标识 */
.vip-badge {
    background: var(--yellow-gradient-primary) !important;
    color: white !important;
}

/* 热门标签 */
.hot-tag, .new-tag {
    background-color: var(--error-yellow) !important;
    color: #333 !important;
}

/* 推荐标签 */
.recommend-tag {
    background-color: var(--primary-yellow) !important;
    color: white !important;
}

/* ======================== 链接状态 ======================== */

/* 链接默认状态 */
a {
    color: var(--primary-yellow);
    transition: var(--yellow-transition);
}

a:hover {
    color: var(--primary-yellow-darker);
    text-decoration: none;
}

/* ======================== 滚动条样式 ======================== */

/* 滚动条 - webkit浏览器 */
::-webkit-scrollbar-thumb {
    background: var(--yellow-gradient-primary) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--yellow-gradient-dark) !important;
}

/* ======================== 特殊页面元素 ======================== */

/* 作者认证标识 */
.author-verified {
    color: var(--primary-yellow) !important;
}

/* 书籍收藏按钮 */
.bookmark-btn.active {
    color: var(--error-yellow) !important;
}

/* 点赞按钮 */
.like-btn.active {
    color: var(--primary-yellow) !important;
}

/* ======================== 通知和提示 ======================== */

/* Toast提示 */
.toast-header {
    background: var(--yellow-gradient-primary) !important;
    color: white !important;
}

/* ======================== 评分星级 ======================== */

/* 星级评分 */
.star-rating .star.active,
.star-rating .star.filled {
    color: var(--error-yellow) !important;
}

/* ======================== 按钮变体 ======================== */

/* 次要按钮 */
.btn-secondary {
    background-color: var(--secondary-yellow) !important;
    border-color: var(--secondary-yellow) !important;
    color: #333 !important;
}

.btn-secondary:hover {
    background-color: var(--primary-yellow) !important;
    border-color: var(--primary-yellow) !important;
    color: white !important;
}

/* 警告按钮 */
.btn-warning {
    background-color: var(--warning-yellow) !important;
    border-color: var(--warning-yellow) !important;
    color: #333 !important;
}

/* 轮廓按钮 */
.btn-outline-primary {
    color: var(--primary-yellow) !important;
    border-color: var(--primary-yellow) !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary-yellow) !important;
    color: white !important;
}

/* ======================== 结束 ======================== */